\n \n \n Accordion 1\n \n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse\n malesuada lacus ex, sit amet blandit leo lobortis eget.\n \n \n \n \n \n Accordion 2\n \n \n \n Donec placerat, lectus sed mattis semper, neque lectus feugiat\n lectus, varius pulvinar diam eros in elit.\n \n \n \n \n \n Accordion 3\n \n \n \n Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer\n sit amet egestas eros, vitae egestas augue.\n \n \n \n
\n);","description":"Basic accordion with summary and details."},{"id":"ui-components-accordion--expanded-by-default","name":"Expanded By Default","snippet":"const ExpandedByDefault = () => (\n
\n \n \n Expanded by default\n \n \n \n This accordion is expanded by default. Lorem ipsum dolor sit amet,\n consectetur adipiscing elit.\n \n \n \n \n \n Collapsed\n \n \n \n Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.\n \n \n \n
\n);","description":"Accordion expanded by default using the `defaultExpanded` prop."},{"id":"ui-components-accordion--disabled","name":"Disabled","snippet":"const Disabled = () => (\n
\n \n \n Enabled accordion\n \n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n \n \n \n \n \n Disabled accordion\n \n \n This content is not reachable.\n \n \n
\n \n \n General settings\n I am an accordion\n \n \n \n Nulla facilisi. Phasellus sollicitudin nulla et quam mattis\n feugiat. Aliquam eget maximus est, id dignissim quam.\n \n \n \n \n \n Users\n \n You are currently not an owner\n \n \n \n \n Donec placerat, lectus sed mattis semper, neque lectus feugiat\n lectus, varius pulvinar diam eros in elit.\n \n \n \n \n \n Advanced settings\n \n Filtering has been entirely disabled\n \n \n \n \n Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer\n sit amet egestas eros, vitae egestas augue.\n \n \n \n
\n );\n};","description":"Controlled accordion where expand/collapse state is managed by React state."},{"id":"ui-components-accordion--with-actions","name":"With Actions","snippet":"const WithActions = () => (\n
\n \n \n Accordion with actions\n \n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse\n malesuada lacus ex, sit amet blandit leo lobortis eget.\n \n \n \n \n \n \n \n
\n);","description":"Accordion with action buttons using the `AccordionActions` component."},{"id":"ui-components-accordion--custom-transition","name":"Custom Transition","snippet":"const CustomTransition = () => {\n const [expanded, setExpanded] = useState(false);\n\n return (\n
\n setExpanded(isExpanded)}\n slots={{ transition: Fade as any }}\n slotProps={{ transition: { timeout: 400 } }}\n sx={[\n !expanded && {\n '& .MuiAccordion-region': { height: 0 },\n '& .MuiAccordionDetails-root': { display: 'none' },\n },\n ]}\n >\n \n Custom transition using Fade\n \n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Suspendisse malesuada lacus ex, sit amet blandit leo lobortis\n eget.\n \n \n \n \n \n Default transition using Collapse\n \n \n \n Donec placerat, lectus sed mattis semper, neque lectus feugiat\n lectus, varius pulvinar diam eros in elit.\n \n \n \n
\n {['panel1', 'panel2', 'panel3'].map((panel, index) => (\n \n \n Collapsible Group Item #{index + 1}\n \n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Suspendisse malesuada lacus ex, sit amet blandit leo lobortis\n eget.\n \n \n \n ))}\n
\n );\n};","description":"Only one accordion can be expanded at a time, with visual customization."},{"id":"ui-components-accordion--square","name":"Square","snippet":"const Square = () => (\n
\n \n \n Square Accordion\n \n \n \n This accordion has square corners instead of the default rounded\n ones.\n \n \n \n
\n);","description":"Square accordion without rounded corners."}],"import":"import {\n Accordion,\n AccordionActions,\n AccordionDetails,\n AccordionSummary,\n Button,\n Typography,\n} from \"@exotel-npm-dev/signal-design-system\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Accordion","definedInFile":"/Users/rudrakshula.prasanth/Main/Exotel-Design-System/src/components/Accordion/Accordion.tsx","actualName":"Accordion","exportName":"Accordion","composes":["Omit"]},"docs":{"ui-components-accordion--docs":{"id":"ui-components-accordion--docs","name":"Docs","path":"./src/stories/ui-components/Accordion.mdx","title":"UI Components/Accordion","content":"import { Meta, Canvas, ArgTypes } from '@storybook/addon-docs/blocks';\nimport * as AccordionStories from './Accordion.stories';\nimport { Accordion } from '../../components/Accordion';\n\n\n\n# Accordion\n\n## Overview\n\n`Accordion` is the Signal Design System wrapper around MUI `Accordion`. It is a thin `forwardRef` pass-through with no custom logic. It lets users show and hide sections of related content on a page.\n\n```tsx\nimport {\n Accordion,\n AccordionSummary,\n AccordionDetails,\n AccordionActions,\n Typography,\n} from '@exotel-npm-dev/signal-design-system';\n```\n\nThe app must be wrapped in `ExotelThemeProvider` for correct styling.\n\n`AccordionSummary`, `AccordionDetails`, and `AccordionActions` are MUI re-exports from the design system package — not Signal wrappers. Import them from `@exotel-npm-dev/signal-design-system` alongside `Accordion`.\n\n**When to use**\n\n- Grouping related optional or secondary content into collapsible sections\n- Reducing visual clutter on dense settings or configuration pages\n- Showing supplementary detail that agents can expand on demand\n\n**When not to use**\n\n- Switching between peer views where only one panel is visible at a time → use `Tabs`\n- Off-canvas or overlay content → use `Drawer` or `Dialog`\n- Sequential step-by-step workflows → use `Stepper`\n- Critical information that must always be visible → render directly or use `Card`\n- Navigation to another route → use `Link` or app navigation\n\n## Anatomy\n\nSignal does not provide `AccordionItem`, `AccordionTrigger`, `AccordionContent`, or `AccordionHeader`. Use MUI composition:\n\n```\nAccordion ← Signal wrapper\n├── AccordionSummary ← MUI header/trigger (required)\n├── AccordionDetails ← MUI content panel (required)\n└── AccordionActions ← MUI optional footer\n```\n\nMultiple sibling `` elements form a group. There is no parent `AccordionGroup` component.\n\nCanonical structure:\n\n```tsx\n\n \n Section title\n \n \n Panel content\n \n {/* optional */}\n \n \n \n \n\n```\n\n## Props\n\n`AccordionProps` extends MUI `AccordionProps` (minus `ref`). All MUI props pass through via spread.\n\n### Props documented in stories argTypes\n\n| Name | Type | Default | Description | Usage guidance |\n|------|------|---------|-------------|----------------|\n| `defaultExpanded` | `boolean` | `false` | Expands the panel on mount in uncontrolled mode | Use for the most important section that should be visible initially. Only one panel per group should use this unless using controlled state. |\n| `disabled` | `boolean` | `false` | Prevents expand/collapse interaction | Use when the section is unavailable. Content in `AccordionDetails` is not reachable. |\n| `disableGutters` | `boolean` | `true` | Removes expanded margin in accordion sets | Default `true` so stacked panels stay flush with divider separators. Set `false` only if you need MUI's expanded spacing. |\n| `square` | `boolean` | `false` | Disables rounded corners | Use for flush groups or when matching rectangular layout containers. |\n| `expanded` | `boolean` | — | Controlled expand state | Pair with `onChange`. Required for controlled and single-expand patterns. |\n\n### Props used in stories (not in argTypes)\n\n| Name | Type | Description | Usage guidance |\n|------|------|-------------|----------------|\n| `onChange` | `(event: SyntheticEvent, expanded: boolean) => void` | Fires when expand state changes | Required for controlled mode and `OnlyOneExpanded` pattern. |\n| `elevation` | `number` | Shadow depth | `OnlyOneExpanded` uses `elevation={0}` for flat groups. |\n| `slots.transition` | Component | Custom expand animation | `CustomTransition` uses `Fade` instead of default `Collapse`. |\n| `slotProps.transition` | `object` | Transition configuration | e.g. `{ timeout: 400 }` in `CustomTransition`. |\n| `sx` | `SxProps` | Style overrides | Used for borders, subtitle layout, and collapsed-region hiding. |\n\nAdditional standard MUI `AccordionProps` pass through. See the generated table below for the full API.\n\n\n\n## Variants\n\nSignal defines no custom `variant` prop. Styling options evidenced in stories:\n\n| Style | Props | Story |\n|-------|-------|-------|\n| Default stacked set | `disableGutters` (default `true`), `elevation` (default `0`) | `Basic` |\n| Square corners | `square` | `Square` |\n| Flush bordered group | `disableGutters`, `elevation={0}`, `square`, border `sx` | `OnlyOneExpanded` |\n\n## States\n\n| State | How to apply | Notes |\n|-------|--------------|-------|\n| Collapsed | Default | Content in `AccordionDetails` is hidden |\n| Expanded | `defaultExpanded` or `expanded={true}` | Content visible; summary shows expanded indicator |\n| Disabled | `disabled={true}` | Non-interactive; content not reachable |\n| Hover / Focus / Pressed | Automatic | Styled by MUI defaults; no separate Signal stories |\n\n\n\n## Behavior\n\n| Pattern | Mechanism | Story |\n|---------|-----------|-------|\n| Independent panels | Multiple sibling `` elements; each manages own state | `Basic` |\n| Default open | `defaultExpanded` on one panel | `ExpandedByDefault` |\n| Controlled panel | `expanded` + `onChange` per panel | `Controlled` |\n| Only one expanded | App state tracks active panel ID; `expanded={activeId === panel}` | `OnlyOneExpanded` |\n| Footer actions | `AccordionActions` with `Button` children | `WithActions` |\n| Custom transition | `slots={{ transition: Fade }}` + `slotProps` + conditional `sx` | `CustomTransition` |\n\n**Not built-in:** There is no `type=\"single\"` or built-in single-expand prop. Exclusive expand is a composition pattern implemented via controlled state in `OnlyOneExpanded`.\n\n`MuiAccordion` theme defaults: `disableGutters: true` and `elevation: 0` so stacked panels stay flush; expanded panels keep the `::before` divider between siblings (no 16px expanded margin).\n\n## Stories\n\n### Basic\n\n**Story ID:** `ui-components-accordion--basic`\n\nThree independent accordions, each with `AccordionSummary` and `AccordionDetails`.\n\n**Recommended usage:** Default composition for unrelated collapsible sections on the same page.\n\n\n\n### ExpandedByDefault\n\n**Story ID:** `ui-components-accordion--expanded-by-default`\n\nFirst panel uses `defaultExpanded`; second panel is collapsed.\n\n**Recommended usage:** When one section should be visible on initial page load.\n\n### Disabled\n\n**Story ID:** `ui-components-accordion--disabled`\n\nEnabled accordion alongside `disabled` accordion.\n\n**Recommended usage:** Reference for non-interactive panel appearance and behavior.\n\n### Controlled\n\n**Story ID:** `ui-components-accordion--controlled`\n\nThree panels with `expanded` and `onChange` driven by React state. Summary includes primary label and secondary subtitle `Typography`.\n\n**Recommended usage:** When expand state must sync with app logic or URL state. Two-line summary layout pattern.\n\n\n\n### WithActions\n\n**Story ID:** `ui-components-accordion--with-actions`\n\nPanel with `AccordionActions` containing `Cancel` and `Agree` buttons.\n\n**Recommended usage:** Panel-scoped actions such as inline agreement or confirmation within a section.\n\n\n\n### CustomTransition\n\n**Story ID:** `ui-components-accordion--custom-transition`\n\nControlled accordion using `Fade` transition via `slots` and `slotProps` instead of default `Collapse`.\n\n**Recommended usage:** Custom animation when default collapse transition is insufficient.\n\n### OnlyOneExpanded\n\n**Story ID:** `ui-components-accordion--only-one-expanded`\n\nThree panels in a flush bordered group. Controlled state ensures only one panel is expanded at a time. Uses `disableGutters`, `elevation={0}`, `square`, and border `sx`.\n\n**Recommended usage:** Mutually exclusive sections such as settings categories.\n\n\n\n### Square\n\n**Story ID:** `ui-components-accordion--square`\n\nSingle accordion with `square` prop.\n\n**Recommended usage:** Square-corner styling without full flush-group treatment.\n\n## Accessibility\n\n- `AccordionSummary` renders an interactive header (button) with `aria-expanded` reflecting panel state.\n- `AccordionDetails` content is associated with its summary via MUI region/id linkage.\n- Keyboard: Enter and Space toggle expand/collapse on the summary (MUI default).\n- Focus: summary receives focus; MUI `:focus-visible` ring applies.\n- `disabled` removes interactivity and sets appropriate disabled ARIA state.\n- No custom ARIA logic in the Signal wrapper; standard MUI `aria-*` props pass through via `{...props}`.\n- Screen readers announce expanded/collapsed state via `aria-expanded` on the summary button.\n- Storybook a11y addon is configured with `test: 'todo'` — accessibility is not CI-gated in the current Storybook setup.\n\n## Best Practices\n\n- Group related optional or secondary content into collapsible sections.\n- Use clear, scannable summary labels via `Typography` in `AccordionSummary`.\n- Use the `OnlyOneExpanded` controlled pattern when panels are mutually exclusive.\n- Apply `defaultExpanded` to at most one section in an uncontrolled group.\n- Use `AccordionActions` for actions scoped to a single panel, not page-level CTAs.\n- Use controlled mode (`expanded` + `onChange`) when expand state must sync with app logic.\n- Import all accordion parts from `@exotel-npm-dev/signal-design-system`, not `@mui/material` directly.\n\n## Anti-patterns\n\n- Hiding critical required information in collapsed panels by default.\n- Nesting accordions inside accordions (not demonstrated in stories; increases accessibility complexity).\n- Using accordion for sequential step-by-step workflows — use `Stepper`.\n- Using accordion for switching between peer views — use `Tabs`.\n- Using accordion for off-canvas navigation — use `Drawer`.\n- Inventing `AccordionItem`, `AccordionTrigger`, or `AccordionContent` APIs — they do not exist in Signal.\n- Assuming a built-in single-expand prop — implement via controlled state (`OnlyOneExpanded`).\n- Importing `@mui/material/Accordion` directly in consumer apps.\n\n## Guidance for AI Agents\n\nThis section is optimized for Storybook MCP and AI code generation.\n\n### When to choose `Accordion`\n\n- Collapsible sections of related content on the same page\n- Optional or secondary detail agents can expand on demand\n- Settings or configuration grouped into scannable sections\n- Supplementary content that reduces clutter when collapsed\n\n### When to choose another component\n\n| Scenario | Component |\n|----------|-----------|\n| Switch between peer views (one visible at a time) | `Tabs` |\n| Off-canvas or overlay panel | `Drawer` or `Dialog` / `StructuredDialog` |\n| Static grouped content always visible | `Card` or plain layout |\n| Short content that should not hide | Render directly (no accordion) |\n| Sequential wizard or multi-step flow | `Stepper` |\n| Navigation to URL or route | `Link` or app navigation |\n\n### Recommended content types\n\n- Settings sections (general, users, advanced)\n- FAQ or help supplementary detail\n- Optional configuration fields\n- Inline agreement or confirmation within a section (`AccordionActions`)\n\n### Recommended content length\n\n- Summary: short label (1–5 words) via `Typography` in `AccordionSummary`\n- Details: moderate content; avoid very long scrollable panels inside a single accordion\n- For lengthy forms, prefer `Drawer` or dedicated page over deep accordion nesting\n\n### Preferred composition patterns\n\n```tsx\n// Basic — story: Basic\n\n \n Section title\n \n \n Panel content\n \n\n\n// Controlled with subtitle — story: Controlled\n\n \n General settings\n Subtitle text\n \n \n Content\n \n\n\n// Single-expand flush group — story: OnlyOneExpanded\n\n Collapsible Group Item #1\n Content\n\n\n// With actions — story: WithActions\n\n \n \n\n```\n\n### Canonical stories for code generation\n\n| Task | Reference story |\n|------|-----------------|\n| Default composition | `Basic` (`ui-components-accordion--basic`) |\n| Initially expanded panel | `ExpandedByDefault` |\n| Controlled expand state | `Controlled` |\n| Mutually exclusive panels | `OnlyOneExpanded` |\n| Panel footer actions | `WithActions` |\n| Disabled panel | `Disabled` |\n| Square corners | `Square` |\n| Custom animation | `CustomTransition` |\n\n### Common mistakes to avoid\n\n- Inventing `AccordionItem`, `AccordionTrigger`, `AccordionContent`, or `AccordionHeader` — use `AccordionSummary` and `AccordionDetails`.\n- Assuming built-in single-expand — use controlled state pattern from `OnlyOneExpanded`.\n- Omitting `AccordionSummary` or `AccordionDetails` — both are required for a functional panel.\n- Using `Collapsible` — component does not exist in Signal.\n- Using `Accordion` for tab-like view switching — use `Tabs`.\n- Omitting `ExotelThemeProvider` in app setup.\n\n### Composition guidance\n\n- Place sibling `` elements in a containing `div` or layout component.\n- For exclusive expand, track active panel ID in state and pass `expanded={activeId === panelId}` to each accordion.\n- Put page-level primary actions outside accordions; use `AccordionActions` only for panel-scoped actions.\n- Use `defaultExpanded` on one panel OR controlled state — not both on the same panel.\n\n## Related Components\n\n| Component | Relationship |\n|-----------|----------------|\n| `AccordionSummary` | MUI header/trigger (re-export) |\n| `AccordionDetails` | MUI content panel (re-export) |\n| `AccordionActions` | MUI optional footer (re-export) |\n| `Typography` | Summary and details text |\n| `Button` | Actions in `AccordionActions` |\n| `Tabs` | Alternative for view switching |\n| `Card` | Alternative for always-visible grouped content |\n| `Drawer` | Alternative for overlay panels |\n| `Dialog` / `StructuredDialog` | Alternative for modal content |\n| `Stepper` | Alternative for sequential flows |\n\n`Collapsible` and `Section` do not exist as components in the Signal Design System.\n"}}},"ui-components-alert":{"id":"ui-components-alert","name":"Alert","path":"./src/stories/ui-components/Alert.stories.tsx","stories":[{"id":"ui-components-alert--success","name":"Success","snippet":"const Success = () => This is a success alert!;","description":"Success alert"},{"id":"ui-components-alert--error","name":"Error","snippet":"const Error = () => This is an error alert!;","description":"Error alert"},{"id":"ui-components-alert--warning","name":"Warning","snippet":"const Warning = () => This is a warning alert!;","description":"Warning alert"},{"id":"ui-components-alert--info","name":"Info","snippet":"const Info = () => This is an info alert!;","description":"Info alert"},{"id":"ui-components-alert--variants","name":"Variants","snippet":"const Variants = () => (\n
\n Standard variant\n Filled variant\n Outlined variant\n
\n);","description":"Different variants"},{"id":"ui-components-alert--dismissible","name":"Dismissible","snippet":"const Dismissible = () => {\n const [open, setOpen] = React.useState(true);\n if (!open) return ;\n return (\n setOpen(false)}>\n This alert can be dismissed\n \n );\n};","description":"Dismissible alert"},{"id":"ui-components-alert--with-action","name":"With Action","snippet":"const WithAction = () => (\n {}}>\n \n \n }\n >\n This alert has a custom action button\n \n);","description":"Alert with action"},{"id":"ui-components-alert--interactive","name":"Interactive","snippet":"const Interactive = () => This is an alert message;","description":"Interactive alert with all controls"}],"import":"import { Alert, Icon, IconButton } from \"@exotel-npm-dev/signal-design-system\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Alert","definedInFile":"/Users/rudrakshula.prasanth/Main/Exotel-Design-System/src/components/Alert/Alert.tsx","actualName":"Alert","exportName":"Alert","props":{"children":{"required":false,"tsType":{"name":"ReactReactNode","raw":"React.ReactNode"},"description":""}},"composes":["Omit"]},"docs":{"ui-components-alert--docs":{"id":"ui-components-alert--docs","name":"Docs","path":"./src/stories/ui-components/Alert.mdx","title":"UI Components/Alert","content":"import { Meta, Canvas, ArgTypes } from '@storybook/addon-docs/blocks';\nimport * as AlertStories from './Alert.stories';\nimport { Alert } from '../../components/Alert';\n\n\n\n# Alert\n\n## Overview\n\n`Alert` is the Signal Design System wrapper around MUI `Alert`. It is a thin `forwardRef` pass-through with no custom logic. It displays important, persistent messages inline within a page or view.\n\n```tsx\nimport { Alert } from '@exotel-npm-dev/signal-design-system';\n```\n\nThe app must be wrapped in `ExotelThemeProvider` for correct styling.\n\n**When to use**\n\n- Inline feedback that should remain visible until dismissed or resolved\n- Form validation summaries, configuration warnings, or status messages within a page section\n- Contextual messages tied to a specific area of the UI (not global transient toasts)\n\n**When not to use**\n\n- Brief, auto-dismissing global notifications → use `Snackbar` (typically wrapping `Alert` as its child)\n- Blocking confirmation or destructive actions → use `Dialog` or `StructuredDialog`\n- Small status indicators on icons or avatars → use `Badge`\n- Long-form help or supplementary detail → use `Accordion` or inline `Typography`\n- Navigation or routing → use `Link`\n\n## Anatomy\n\nSignal does not provide `AlertTitle` or `AlertDescription` subcomponents. Use MUI composition:\n\n```\nAlert ← Signal wrapper\n├── (optional) Typography ← title or emphasized line (MUI re-export)\n└── children ← message body (text or Typography)\n```\n\nOptional slots:\n\n- `action` — trailing control (e.g. `IconButton` for dismiss or secondary action)\n- `onClose` — built-in dismiss button when provided\n\nCanonical structure:\n\n```tsx\n\n Operation completed successfully.\n\n```\n\nWith dismiss:\n\n```tsx\n\n This alert can be dismissed\n\n```\n\n## Props\n\n`AlertProps` extends MUI `AlertProps` (minus `ref`). All MUI props pass through via spread.\n\n### Props documented in stories argTypes\n\n| Name | Type | Default | Description | Usage guidance |\n|------|------|---------|-------------|----------------|\n| `severity` | `'error' \\| 'warning' \\| 'info' \\| 'success'` | `'success'` | Semantic color and icon | Match message intent: `error` for failures, `warning` for caution, `info` for neutral context, `success` for confirmation |\n| `variant` | `'standard' \\| 'filled' \\| 'outlined'` | `'standard'` | Visual style | `standard` for default inline; `filled` for higher emphasis; `outlined` for subtle bordered look |\n| `onClose` | `(event: SyntheticEvent) => void` | — | Shows built-in close button and fires on dismiss | Use when the user can dismiss the message; pair with local state (`Dismissible` story) |\n| `children` | `ReactNode` | — | Alert message content | Keep concise; use `Typography` for multi-line or titled messages |\n\n### Props used in stories (not in argTypes)\n\n| Name | Type | Description | Usage guidance |\n|------|------|-------------|----------------|\n| `action` | `ReactNode` | Trailing slot for custom controls | `WithAction` uses `IconButton` + `Icon` for a custom dismiss or action control |\n\nAdditional standard MUI `AlertProps` pass through (e.g. `icon`, `iconMapping`, `sx`, `role`). See the generated table below for the full API.\n\n\n\n## Variants\n\n| Variant | Description | Story |\n|---------|-------------|-------|\n| `standard` | Tonal background via `resolveTonalColor` (light: solid; dark: alpha 32%) | `Variants`, `Success`, `Error`, `Warning`, `Info` |\n| `filled` | Solid semantic background | `Variants` |\n| `outlined` | Border with transparent/light background | `Variants` |\n\nSignal defines no custom variant beyond MUI's three options. **`standard`** uses `MuiAlert` theme overrides with `resolveTonalColor` for background — **light:** solid `palette.tonal`; **dark:** `alpha(palette.main, 32%)`. Text and icon colors remain MUI defaults.\n\n## States\n\n| State | How to apply | Notes |\n|-------|--------------|-------|\n| Visible (default) | Render `` | Inline in document flow |\n| Dismissible | `onClose` callback | Renders MUI close button; parent controls visibility (`Dismissible`) |\n| With custom action | `action` prop | Custom trailing control (`WithAction`) |\n| Hidden | Conditional render in parent | `Dismissible` unmounts alert when closed |\n\nSeverity states (semantic, not interactive):\n\n| Severity | Use for | Story |\n|----------|---------|-------|\n| `success` | Completed actions, positive outcomes | `Success` |\n| `error` | Failures, blocking issues | `Error` |\n| `warning` | Caution, reversible risk | `Warning` |\n| `info` | Neutral context, tips | `Info` |\n\n## Behavior\n\n| Pattern | Mechanism | Story |\n|---------|-----------|-------|\n| Static inline message | Render with `severity` + `children` | `Success`, `Error`, `Warning`, `Info` |\n| Variant comparison | `variant` prop | `Variants` |\n| User-dismissible | `onClose` + parent `open` state | `Dismissible` |\n| Custom trailing action | `action` slot | `WithAction` |\n| Interactive controls | Storybook argTypes | `Interactive` |\n\n`Alert` is not a toast container. It does not auto-hide, anchor to viewport corners, or manage `open` state — that is `Snackbar`'s role. In Signal stories, `Snackbar` wraps `Alert` as its child for transient notifications.\n\n## Stories\n\n### Success\n\n**Story ID:** `ui-components-alert--success`\n\nSuccess severity with default `standard` variant.\n\n**Recommended usage:** Confirming a completed operation inline on the page.\n\n\n\n### Error\n\n**Story ID:** `ui-components-alert--error`\n\nError severity alert.\n\n**Recommended usage:** Reporting failures or validation errors that need attention.\n\n\n\n### Warning\n\n**Story ID:** `ui-components-alert--warning`\n\nWarning severity alert.\n\n**Recommended usage:** Cautionary messages about reversible or pending issues.\n\n\n\n### Info\n\n**Story ID:** `ui-components-alert--info`\n\nInfo severity alert.\n\n**Recommended usage:** Neutral contextual information or tips.\n\n\n\n### Variants\n\n**Story ID:** `ui-components-alert--variants`\n\nThree `success` alerts demonstrating `standard`, `filled`, and `outlined` variants.\n\n**Recommended usage:** Choose visual weight appropriate to page density and emphasis needs.\n\n\n\n### Dismissible\n\n**Story ID:** `ui-components-alert--dismissible`\n\n`info` alert with `onClose` handler; parent state controls visibility. Re-open via button when dismissed.\n\n**Recommended usage:** Non-critical messages the user can dismiss after reading.\n\n\n\n### WithAction\n\n**Story ID:** `ui-components-alert--with-action`\n\n`warning` alert with custom `action` slot containing `IconButton` and `Icon`.\n\n**Recommended usage:** Custom trailing control when the built-in `onClose` button is insufficient.\n\n\n\n### Interactive\n\n**Story ID:** `ui-components-alert--interactive`\n\nPlayground story with Storybook controls for `severity`, `variant`, and `children`.\n\n**Recommended usage:** Explore prop combinations during development.\n\n## Content guidelines\n\nRules for writing alert messages in Exotel products. Content is set via `children` (and optionally a `Typography` title).\n\n### Message structure\n\n| Element | Guidance |\n|---------|----------|\n| Body (`children`) | One clear sentence stating what happened or what the user should know |\n| Title (optional) | Short emphasized line via `Typography` with `fontWeight=\"bold\"` or `variant=\"label1\"` — use when the body needs context |\n| Action label | If using `action`, use an icon with accessible `aria-label` (e.g. dismiss) |\n\n### Writing principles\n\n| Principle | Rule |\n|-----------|------|\n| Lead with outcome | State what happened first: \"Campaign saved\" not \"We have saved your campaign\" |\n| Be specific | Name the object: \"3 contacts failed to import\" not \"Import failed\" |\n| Actionable errors | Tell the user what to do next: \"Check the phone number format and try again\" |\n| Concise | One to two sentences; avoid paragraphs |\n| Match severity | `error` = something failed; `warning` = caution; `info` = neutral; `success` = confirmed completion |\n| No blame | Describe the issue, not the user: \"Invalid email format\" not \"You entered an invalid email\" |\n\n### Severity and tone\n\n| Severity | Tone | Example |\n|----------|------|---------|\n| `success` | Confident, brief | \"Channel configuration saved.\" |\n| `error` | Direct, actionable | \"Unable to save changes. Check required fields and try again.\" |\n| `warning` | Cautionary, specific | \"This action will remove 12 contacts from the list.\" |\n| `info` | Neutral, helpful | \"Changes take effect after the next sync.\" |\n\n### Do and don't\n\n| Do | Don't |\n|----|-------|\n| \"3 campaigns failed to export. Download the error report.\" | \"Error!\" (no context) |\n| \"Connection restored. Pending messages will send shortly.\" | \"Something went wrong. Please contact support.\" (when fixable inline) |\n| Use `onClose` for dismissible non-critical info | Auto-dismiss inline alerts (use `Snackbar` instead) |\n| Pair `error` severity with specific next steps | Use `error` for neutral information |\n\n### Guidance for AI-generated content\n\n- Choose `severity` from message intent, not visual preference.\n- Keep `children` to 1–2 sentences; never generate placeholder lorem ipsum.\n- For errors, include what failed and a suggested user action when known.\n- Do not invent a `title` prop — use `Typography` as a child if a title line is needed.\n- Prefer `onClose` for dismissible alerts; use `action` only when a custom control is required.\n- Do not use `Alert` for toast-style transient messages — wrap in `Snackbar` with `autoHideDuration`.\n\n## Accessibility\n\n- Renders with `role=\"alert\"` by default (MUI), so screen readers announce the message when it appears.\n- Severity icons are decorative; MUI provides appropriate `aria-hidden` on icons.\n- `onClose` renders a close button with an accessible label (MUI default close text).\n- Custom `action` controls must include their own accessible names (`aria-label` on `IconButton`).\n- Keyboard: close button is focusable and activatable via Enter/Space (MUI default).\n- No custom ARIA logic in the Signal wrapper; standard MUI `aria-*` props pass through via `{...props}`.\n- Storybook a11y addon is configured with `test: 'todo'` — accessibility is not CI-gated in the current Storybook setup.\n\n## Best practices\n\n- Place alerts near the content they relate to (form top, section header, affected panel).\n- Match `severity` to message intent; do not use `error` for informational content.\n- Use `onClose` when the message is dismissible; control visibility with parent state.\n- For transient global feedback, compose `Snackbar` + `Alert` (see `Snackbar` stories).\n- Keep messages short and actionable; link to detail pages for lengthy explanations.\n- Use `variant=\"outlined\"` or `variant=\"standard\"` in dense layouts; reserve `filled` for high emphasis.\n- Import from `@exotel-npm-dev/signal-design-system`, not `@mui/material` directly.\n\n## Anti-patterns\n\n- Using `Alert` for auto-dismissing toast notifications — use `Snackbar`.\n- Using `Alert` for modal confirmations — use `Dialog` or `StructuredDialog`.\n- Stacking many simultaneous inline alerts without hierarchy — consolidate or use `Snackbar`.\n- Using `success` severity for warnings or errors.\n- Inventing a `title` or `description` prop — use `children` and optional `Typography`.\n- Hardcoding hex colors instead of `severity` semantic colors.\n- Omitting `ExotelThemeProvider` in app setup.\n\n## Guidance for AI Agents\n\nThis section is optimized for Storybook MCP and AI code generation.\n\n### When to choose `Alert`\n\n- Inline, persistent feedback within a page section\n- Form-level validation or status messages\n- Contextual warnings tied to a specific UI area\n- Child content inside `Snackbar` for styled toast messages\n\n### When to choose another component\n\n| Scenario | Component |\n|----------|-----------|\n| Auto-dismissing global notification | `Snackbar` (with `Alert` child) |\n| Blocking confirmation or destructive action | `Dialog` / `StructuredDialog` |\n| Small count or status on an icon/avatar | `Badge` |\n| Expandable supplementary detail | `Accordion` |\n| Hover-only supplementary text | `Tooltip` |\n| Rich interactive popover content | `Popover` |\n| Page-level promotional banner (persistent) | Custom layout with `Alert` or dedicated banner pattern |\n\n### Prop selection guidance\n\n| Use case | Recommended props |\n|----------|-------------------|\n| Default inline success | `severity=\"success\"`, `variant=\"standard\"` |\n| High-emphasis error | `severity=\"error\"`, `variant=\"filled\"` |\n| Subtle info in dense UI | `severity=\"info\"`, `variant=\"outlined\"` |\n| User can dismiss | `onClose={handler}` + parent visibility state |\n| Custom trailing control | `action={}` |\n\n### Preferred composition patterns\n\n```tsx\n// Inline success — story: Success\nThis is a success alert!\n\n// Severity set — stories: Error, Warning, Info\nThis is an error alert!\n\n// Variants — story: Variants\nFilled variant\n\n// Dismissible — story: Dismissible\n setOpen(false)}>\n This alert can be dismissed\n\n\n// Custom action — story: WithAction\n\n \n \n }\n>\n This alert has a custom action button\n\n\n// Toast pattern — see Snackbar stories\n\n \n This is a success message!\n \n\n```\n\n### Canonical stories for code generation\n\n| Task | Reference story |\n|------|-----------------|\n| Default success message | `Success` (`ui-components-alert--success`) |\n| Error message | `Error` |\n| Warning message | `Warning` |\n| Info message | `Info` |\n| Compare visual variants | `Variants` |\n| Dismissible alert | `Dismissible` |\n| Custom action slot | `WithAction` |\n| Prop playground | `Interactive` |\n\n### Common mistakes to avoid\n\n- Using `Alert` alone for toast behavior — wrap in `Snackbar` with `open` and `autoHideDuration`.\n- Inventing `title` or `description` props — use `children` and `Typography`.\n- Choosing `filled` variant everywhere — increases visual noise in dense pages.\n- Omitting parent state for dismissible alerts — `onClose` only fires the callback; parent must hide the alert.\n- Using `Alert` for modal dialogs — use `Dialog` / `StructuredDialog`.\n- Forgetting `aria-label` on custom `action` icon buttons.\n\n### Composition guidance\n\n- Place one primary alert per form or section; avoid alert stacking.\n- Combine with `Snackbar` for transient feedback; keep `Alert` inline for persistent context.\n- Use `IconButton` + `Icon` in `action` for icon-only controls (see `WithAction`).\n- Do not nest `Alert` inside `Alert`.\n- Pair form validation alerts with `FormField` / `EnhancedTextField` error states at the field level.\n\n## Related Components\n\n| Component | Relationship |\n|-----------|----------------|\n| `Snackbar` | Container for transient toast notifications; typically wraps `Alert` |\n| `Dialog` / `StructuredDialog` | Blocking modal for confirmations |\n| `Typography` | Optional title or formatted message text |\n| `IconButton` | Custom `action` slot control |\n| `Icon` | Icon inside `action` (`WithAction` story) |\n| `Badge` | Small status indicator on icons/avatars |\n| `Tooltip` | Hover-only supplementary text |\n| `FormField` | Field-level validation alongside form alerts |\n"}}},"ui-components-appbar":{"id":"ui-components-appbar","name":"AppBar","path":"./src/stories/ui-components/AppBar.stories.tsx","stories":[{"id":"ui-components-appbar--with-logo-url","name":"Logo as URL","snippet":"const WithLogoUrl = () => console.log('notification clicked')} />;"},{"id":"ui-components-appbar--with-logo-node","name":"Logo as React node","snippet":"const WithLogoNode = () => \n \n exotel\n )}\n appLauncherType=\"default\"\n appLauncherProducts={DEFAULT_PRODUCTS}\n onNotificationClick={() => console.log('notification clicked')} />;"},{"id":"ui-components-appbar--default-layout","name":"AppLauncher — default layout","snippet":"const DefaultLayout = () => console.log('notification clicked')} />;"},{"id":"ui-components-appbar--sectioned-layout","name":"AppLauncher — sectioned layout","snippet":"const SectionedLayout = () => console.log('notification clicked')} />;"},{"id":"ui-components-appbar--without-app-launcher","name":"Without AppLauncher","snippet":"const WithoutAppLauncher = () => console.log('notification clicked')} />;"}],"import":"import { AppBar, Icon } from \"@exotel-npm-dev/signal-design-system\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"AppBar","definedInFile":"/Users/rudrakshula.prasanth/Main/Exotel-Design-System/src/components/AppBar/AppBar.tsx","actualName":"AppBar","exportName":"AppBar","props":{"appLauncherType":{"required":false,"tsType":{"name":"union","raw":"'default' | 'sectioned'","elements":[{"name":"literal","value":"'default'"},{"name":"literal","value":"'sectioned'"}]},"description":"Layout mode for the AppLauncher. Omit `appLauncherProducts` to hide the launcher entirely.","defaultValue":{"value":"'default'","computed":false}},"appLauncherProducts":{"required":false,"tsType":{"name":"Array","elements":[{"name":"Product"}],"raw":"Product[]"},"description":"Product list rendered inside the AppLauncher. Required to show the launcher."},"appLauncherIconName":{"required":false,"tsType":{"name":"unknown"},"description":"Icon for the AppLauncher trigger button."},"avatarName":{"required":true,"tsType":{"name":"string"},"description":"Full name used to derive initials and avatar background colour."},"avatarSize":{"required":false,"tsType":{"name":"union","raw":"'small' | 'medium' | 'large'","elements":[{"name":"literal","value":"'small'"},{"name":"literal","value":"'medium'"},{"name":"literal","value":"'large'"}]},"description":"Size of the avatar trigger. @default 'small'"},"avatarMenuGroups":{"required":true,"tsType":{"name":"Array","elements":[{"name":"AvatarMenuGroup"}],"raw":"AvatarMenuGroup[]"},"description":"Grouped menu items rendered inside the AvatarMenu popup."},"avatarFooterInfo":{"required":true,"tsType":{"name":"Array","elements":[{"name":"AvatarMenuFooterInfo"}],"raw":"AvatarMenuFooterInfo[]"},"description":"Static info rows displayed in the AvatarMenu footer (e.g. last login, version)."},"avatarSelectedTheme":{"required":true,"tsType":{"name":"union","raw":"'light' | 'dark' | 'system'","elements":[{"name":"literal","value":"'light'"},{"name":"literal","value":"'dark'"},{"name":"literal","value":"'system'"}]},"description":"Currently active theme mode — highlights the selected option in the Theme submenu."},"onAvatarThemeChange":{"required":true,"tsType":{"name":"signature","type":"function","raw":"(mode: ThemeMode) => void","signature":{"arguments":[{"type":{"name":"union","raw":"'light' | 'dark' | 'system'","elements":[{"name":"literal","value":"'light'"},{"name":"literal","value":"'dark'"},{"name":"literal","value":"'system'"}]},"name":"mode"}],"return":{"name":"void"}}},"description":"Called when the user picks a theme option in the Theme submenu."},"onAvatarLogout":{"required":true,"tsType":{"name":"signature","type":"function","raw":"() => void","signature":{"arguments":[],"return":{"name":"void"}}},"description":"Called when the Logout row is clicked."},"brandLogo":{"required":true,"tsType":{"name":"union","raw":"string | React.ReactNode","elements":[{"name":"string"},{"name":"ReactReactNode","raw":"React.ReactNode"}]},"description":"Brand logo — either a URL string (renders as ) or a React node\n(renders as-is, e.g. an inline