{
  "schemaVersion": 3,
  "beamVersion": "2.73.0",
  "generatedAt": "2026-09-16T12:41:46.757Z",
  "components": [
    {
      "title": "In Development/DataTable",
      "slug": "in-development-datatable",
      "description": "DataTable renders tabular data with a compound component API (Header,\nToolbar, Head, ColumnHeader, Body, Row, Cell, Footer).",
      "type": "component",
      "props": [
        {
          "name": "data",
          "type": "TData[]",
          "description": "Row data rendered by the table."
        },
        {
          "name": "columns",
          "type": "DataTableColumnDef<TData, unknown>[]",
          "description": "Column definitions describing how to render each column."
        },
        {
          "name": "table",
          "type": "Table<TData>",
          "description": "A pre-built TanStack `Table` instance (e.g. from `useBeamTable` or\n`useReactTable`). When supplied, DataTable renders it directly instead of\nbuilding its own. Mutually exclusive with `data`/`columns`."
        },
        {
          "name": "density",
          "type": "'sm' | 'md' | 'lg'",
          "description": "Density of the table's rows.",
          "defaultValue": "'md'"
        },
        {
          "name": "bordered",
          "type": "boolean",
          "description": "Adds a border around the table container.",
          "defaultValue": "true"
        },
        {
          "name": "rounded",
          "type": "boolean",
          "description": "Rounds the corners of the table container.",
          "defaultValue": "true"
        },
        {
          "name": "striped",
          "type": "boolean",
          "description": "Applies zebra striping to body rows in the current row-model order, starting\nwith the second row. Sorting, filtering, and expansion preserve visual\nalternation; pagination restarts it on each page. Manually composed rows\nmust set `DataTable.Row`'s `striped` prop explicitly, and their `<tbody>`\nmust use the `bm-data-table__body` class for zebra and hover styles.\nVirtualized rows should derive `striped` from their index in the complete\ncurrent row model rather than their mounted DOM position. When enabled,\n`rowHover` layers over either background.",
          "defaultValue": "false"
        },
        {
          "name": "rowHover",
          "type": "boolean",
          "description": "Highlights body rows on hover as a visual aid. Does not make rows selectable\nor clickable. A manually composed `<tbody>` must use the\n`bm-data-table__body` class for this styling.",
          "defaultValue": "false"
        },
        {
          "name": "tableProps",
          "type": "Omit<DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, \"ref\">",
          "description": "Props forwarded to the inner `<table>` element. The root props on `DataTable`\ntarget the wrapper `<div>`, which contains both the toolbar and the table."
        },
        {
          "name": "children",
          "type": "ReactNode",
          "description": "DataTable sub-components (Header, Toolbar, Head, ColumnHeader, Body, Row, Cell, Footer)."
        },
        {
          "name": "aria-label",
          "type": "string",
          "description": "Accessible name for the table. Applied directly to the `<table>` element, unless\na `DataTable.Toolbar` is present — then it's applied to the container as a\n`region` landmark naming the whole widget instead."
        },
        {
          "name": "aria-labelledby",
          "type": "string",
          "description": "ID of the element that labels the table. Alternative to `aria-label` — see its\ndescription for how the label is routed depending on whether a toolbar is present."
        }
      ],
      "subcomponentProps": [
        {
          "name": "DataTable.Header",
          "props": []
        },
        {
          "name": "DataTable.Toolbar",
          "props": []
        },
        {
          "name": "DataTable.Head",
          "props": []
        },
        {
          "name": "DataTable.ColumnHeader",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "Renders a `<th scope=\"col\">`. Nest inside a `DataTable.Head` (`<thead>`) row so\nthe column headers form a valid table header row group."
            }
          ]
        },
        {
          "name": "DataTable.Body",
          "props": []
        },
        {
          "name": "DataTable.Row",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "Explicit row content (e.g. `DataTable.Cell` / `DataTable.ColumnHeader`\nchildren). Takes precedence over `row` — used by `DataTable.Head` and by\nmanual (ADR-000 Layer 3) composition."
            },
            {
              "name": "row",
              "type": "Row<unknown>",
              "description": "The table row to render, sourced from the table instance. When supplied\n(by `DataTable.Body`), the row renders one `DataTable.Cell` per visible\ncolumn via `flexRender`. Ignored when `children` are provided."
            },
            {
              "name": "striped",
              "type": "boolean",
              "description": "Applies the zebra background to a manually composed row.",
              "defaultValue": "false"
            }
          ]
        },
        {
          "name": "DataTable.Cell",
          "props": []
        },
        {
          "name": "DataTable.Footer",
          "props": []
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "DataTable composed from sample columns and rows. `DataTable.Head` and\n`DataTable.Body` read from the TanStack instance built internally, with each\nbody row rendering one cell per visible column. The `DataTable.CellContent`\nmedia-object helper is what remains for EPTOOLS-2193.",
          "source": "// `args` widens `TData` to `unknown` (StoryObj resolves DataTable's generic\n    // to its default), which then conflicts with the explicit `SampleRow`\n    // `data`/`columns` below during JSX inference. Narrowing the cast to the\n    // Layer 1 (`data`/`columns`) prop shape lines it back up with `sampleRows`/\n    // `sampleColumnDefs` without loosening `DataTable`'s own generic typing.\n    const typedArgs = args as Partial<DataTableDataProps<SampleRow>>;\n\n    return (\n      <DataTable<SampleRow>\n        {...typedArgs}\n        data={sampleRows}\n        columns={sampleColumnDefs}\n      >\n        <DataTable.Header>Team roster</DataTable.Header>\n        <DataTable.Head />\n        <DataTable.Body />\n      </DataTable>\n    );"
        },
        {
          "name": "Flat Container",
          "description": "Set `bordered={false}` and `rounded={false}` for a flat container with no\nborder or corner radius around the table.",
          "source": "<DataTable\n      bordered={false}\n      rounded={false}\n      data={sampleRows}\n      columns={sampleColumnDefs}\n    >\n      <DataTable.Header>Team roster</DataTable.Header>\n      <DataTable.Head />\n      <DataTable.Body />\n    </DataTable>"
        },
        {
          "name": "Striped",
          "description": "Set `striped` for alternating body-row backgrounds.",
          "source": "<DataTable striped data={sampleRows} columns={sampleColumnDefs}>\n      <DataTable.Header>Team roster</DataTable.Header>\n      <DataTable.Head />\n      <DataTable.Body />\n    </DataTable>"
        },
        {
          "name": "Sorted Striped",
          "description": "",
          "source": "const table = useBeamTable({\n      data: sampleRows,\n      columns: sampleColumnDefs,\n      enableSorting: true,\n      initialState: { sorting: [{ id: 'name', desc: false }] },\n    });\n\n    return (\n      <DataTable striped table={table}>\n        <DataTable.Header>Team roster sorted by name</DataTable.Header>\n        <DataTable.Head />\n        <DataTable.Body />\n      </DataTable>\n    );"
        },
        {
          "name": "Compact Striped",
          "description": "",
          "source": "<DataTable striped density=\"sm\" data={sampleRows} columns={sampleColumnDefs}>\n      <DataTable.Header>Compact team roster</DataTable.Header>\n      <DataTable.Head />\n      <DataTable.Body />\n    </DataTable>"
        },
        {
          "name": "With Table Instance",
          "description": "DataTable also accepts a pre-built TanStack `table` instance via the `table`\nprop instead of building one internally from `data`/`columns` — built here\nwith `useBeamTable` (ADR-000 Layer 2). The rendered markup is the same\neither way; only who builds the instance changes.",
          "source": "const table = useBeamTable({ data: sampleRows, columns: sampleColumnDefs });\n\n    return (\n      <DataTable table={table}>\n        <DataTable.Header>Team roster</DataTable.Header>\n        <DataTable.Head />\n        <DataTable.Body />\n      </DataTable>\n    );"
        },
        {
          "name": "Aligned Columns",
          "description": "A column requests logical end alignment with `meta: { align: 'end' }` — suited to\nnumeric or status columns. It resolves to `text-align: end`, so it flips with the\nwriting direction in RTL. Both the column header and its body cells adopt the\nalignment from the instance.",
          "source": "const columns: DataTableColumnDef<SampleRow>[] = [\n      { accessorKey: 'name', header: 'Name' },\n      { accessorKey: 'role', header: 'Role' },\n      { accessorKey: 'team', header: 'Team' },\n      { accessorKey: 'status', header: 'Status', meta: { align: 'end' } },\n    ];\n\n    return (\n      <DataTable<SampleRow> data={sampleRows} columns={columns}>\n        <DataTable.Header>Team roster</DataTable.Header>\n        <DataTable.Head />\n        <DataTable.Body />\n      </DataTable>\n    );"
        },
        {
          "name": "Grouped Headers",
          "description": "Grouped headers render from nested column definitions. A spanning parent header\n(`scope=\"colgroup\"`) sits above its child columns; an ungrouped column gets an\nempty spacer header in the top row, left unlabeled and without a `scope`.",
          "source": "const columns: DataTableColumnDef<SampleRow>[] = [\n      { accessorKey: 'name', header: 'Name' },\n      {\n        header: 'Organization',\n        columns: [\n          { accessorKey: 'role', header: 'Role' },\n          { accessorKey: 'team', header: 'Team' },\n          { accessorKey: 'status', header: 'Status' },\n        ],\n      },\n    ];\n\n    return (\n      <DataTable<SampleRow> data={sampleRows} columns={columns}>\n        <DataTable.Header>Team roster</DataTable.Header>\n        <DataTable.Head />\n        <DataTable.Body />\n      </DataTable>\n    );"
        }
      ],
      "category": "In Development",
      "displayName": "DataTable",
      "importPath": "@viasat/beam-react/wip"
    },
    {
      "title": "In Development/DataTable/Performance",
      "slug": "in-development-datatable-performance",
      "description": "Performance stories for DataTable. Separate from the main stories file —\nthese render a story-only virtualized/profiled harness (see comments\nabove) rather than exercising DataTable's public API directly, so controls\nare disabled the same way other hardcoded variant stories are.",
      "type": "component",
      "props": [
        {
          "name": "data",
          "type": "TData[]",
          "description": "Row data rendered by the table."
        },
        {
          "name": "columns",
          "type": "DataTableColumnDef<TData, unknown>[]",
          "description": "Column definitions describing how to render each column."
        },
        {
          "name": "table",
          "type": "Table<TData>",
          "description": "A pre-built TanStack `Table` instance (e.g. from `useBeamTable` or\n`useReactTable`). When supplied, DataTable renders it directly instead of\nbuilding its own. Mutually exclusive with `data`/`columns`."
        },
        {
          "name": "density",
          "type": "'sm' | 'md' | 'lg'",
          "description": "Density of the table's rows.",
          "defaultValue": "'md'"
        },
        {
          "name": "bordered",
          "type": "boolean",
          "description": "Adds a border around the table container.",
          "defaultValue": "true"
        },
        {
          "name": "rounded",
          "type": "boolean",
          "description": "Rounds the corners of the table container.",
          "defaultValue": "true"
        },
        {
          "name": "striped",
          "type": "boolean",
          "description": "Applies zebra striping to body rows in the current row-model order, starting\nwith the second row. Sorting, filtering, and expansion preserve visual\nalternation; pagination restarts it on each page. Manually composed rows\nmust set `DataTable.Row`'s `striped` prop explicitly, and their `<tbody>`\nmust use the `bm-data-table__body` class for zebra and hover styles.\nVirtualized rows should derive `striped` from their index in the complete\ncurrent row model rather than their mounted DOM position. When enabled,\n`rowHover` layers over either background.",
          "defaultValue": "false"
        },
        {
          "name": "rowHover",
          "type": "boolean",
          "description": "Highlights body rows on hover as a visual aid. Does not make rows selectable\nor clickable. A manually composed `<tbody>` must use the\n`bm-data-table__body` class for this styling.",
          "defaultValue": "false"
        },
        {
          "name": "tableProps",
          "type": "Omit<DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, \"ref\">",
          "description": "Props forwarded to the inner `<table>` element. The root props on `DataTable`\ntarget the wrapper `<div>`, which contains both the toolbar and the table."
        },
        {
          "name": "children",
          "type": "ReactNode",
          "description": "DataTable sub-components (Header, Toolbar, Head, ColumnHeader, Body, Row, Cell, Footer)."
        },
        {
          "name": "aria-label",
          "type": "string",
          "description": "Accessible name for the table. Applied directly to the `<table>` element, unless\na `DataTable.Toolbar` is present — then it's applied to the container as a\n`region` landmark naming the whole widget instead."
        },
        {
          "name": "aria-labelledby",
          "type": "string",
          "description": "ID of the element that labels the table. Alternative to `aria-label` — see its\ndescription for how the label is routed depending on whether a toolbar is present."
        }
      ],
      "stories": [
        {
          "name": "Non Virtualized Baseline",
          "description": "",
          "source": "<RenderStats id=\"datatable-baseline\">\n      <NonVirtualizedTable rows={rowsBaseline} />\n    </RenderStats>"
        },
        {
          "name": "10K Rows",
          "description": "",
          "source": "<RenderStats id=\"datatable-10k-rows\">\n      <VirtualizedTable rows={rows10k} />\n    </RenderStats>"
        },
        {
          "name": "100K Rows",
          "description": "",
          "source": "<RenderStats id=\"datatable-100k-rows\">\n      <VirtualizedTable rows={rows100k} />\n    </RenderStats>"
        },
        {
          "name": "Re-render Stress Test",
          "description": "",
          "source": "<StressTestHarness />"
        }
      ],
      "category": "In Development",
      "displayName": "DataTable/Performance",
      "importPath": "@viasat/beam-react/wip"
    },
    {
      "title": "In Development/BadgeIndicator",
      "slug": "in-development-badgeindicator",
      "description": "BadgeIndicator is a compact visual element for numeric counts, notifications, or activity states. It comes in three kinds — `count`, `icon`, and `marker`.\n\nTo label content with a status or category — use [Badge](/docs/components-badge--docs). For an even more subtle indicator with a label, use [BadgeDot](/docs/components-badgedot--docs).",
      "type": "component",
      "props": [
        {
          "name": "kind",
          "type": "enum",
          "description": "Specify the display kind: `count`, `icon`, or `marker`.",
          "defaultValue": "count"
        },
        {
          "name": "count",
          "type": "number",
          "description": "Specify a number for the BadgeIndicator.\n\nA bare count announces only the number (e.g. \"5\") to screen readers, with no\ncontext. Set a contextual `aria-label` describing what the count represents\n(e.g. \"5 unread messages\"), and keep it in sync with `count`.",
          "required": true
        },
        {
          "name": "maxCount",
          "type": "number",
          "description": "Specify the highest number allowed to display. Numbers above this value render as `{maxCount}+`.\nValues below 1 and non-finite values (`NaN`, `Infinity`) fall back to the default",
          "defaultValue": "99"
        },
        {
          "name": "hideZero",
          "type": "boolean",
          "description": "When `true`, hides the BadgeIndicator when count is 0 — it collapses to zero width so no\nlayout space is reserved, but stays mounted so screen readers still announce when the count returns.\nNegative counts normalize to 0 and are also hidden",
          "defaultValue": "false"
        },
        {
          "name": "appearance",
          "type": "'accent' | 'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'",
          "description": "Specify the color of the BadgeIndicator. For the `marker` kind, `appearance` also\ndetermines the accessible name when no `aria-label` is set (e.g. `negative` →\n\"negative status\") — override `aria-label` when the color's meaning differs.",
          "defaultValue": "accent"
        },
        {
          "name": "emphasis",
          "type": "any",
          "description": "Specify the BadgeIndicator color strength. `subtle` is not available for the\n`marker` kind — it falls back to `medium`.",
          "defaultValue": "strong"
        },
        {
          "name": "size",
          "type": "'sm' | 'md'",
          "description": "Specify the size of the BadgeIndicator",
          "defaultValue": "md"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the BadgeIndicator. By default it inherits the theme from the parent."
        },
        {
          "name": "ringColor",
          "type": "any",
          "description": "Specify a color to render a decorative ring around the BadgeIndicator. Generally\nmatched to the surface behind the BadgeIndicator, so pick the matching named\nsurface (`surface-01`, `expressive`, …). Any CSS color value also works when the\nbackground isn't one of those surfaces."
        },
        {
          "name": "icon",
          "type": "React.FC<any>",
          "description": "Specify an icon for the BadgeIndicator",
          "required": true
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default BadgeIndicator.",
          "source": "args.kind === 'icon' ? (\n      <BadgeIndicator\n        {...args}\n        icon={Check}\n        aria-label={args['aria-label'] || 'completed'}\n      />\n    ) : (\n      <BadgeIndicator\n        {...args}\n        aria-label={\n          args.kind === 'marker'\n            ? args['aria-label']\n            : args['aria-label'] || `${args.count ?? 0} unread messages`\n        }\n      />\n    )"
        },
        {
          "name": "Kind",
          "description": "BadgeIndicator supports `count`, `icon`, and `marker` kinds.\n\n> Use `count` when the number itself matters (unread messages, items in a cart, or pending approvals), `icon` when a symbol communicates state more clearly than a number, and `marker` when state matters but the exact value doesn't.",
          "source": "<div\n      style={{\n        display: 'flex',\n        gap: 'var(--bm-sem-space-200)',\n        flexWrap: 'wrap',\n        alignItems: 'flex-start',\n      }}\n    >\n      <BadgeIndicator\n        kind=\"count\"\n        count={5}\n        appearance=\"accent\"\n        emphasis=\"strong\"\n        size=\"md\"\n      />\n      <BadgeIndicator\n        kind=\"icon\"\n        icon={Check}\n        aria-label=\"completed\"\n        appearance=\"accent\"\n        emphasis=\"strong\"\n        size=\"md\"\n      />\n      <BadgeIndicator\n        kind=\"marker\"\n        appearance=\"accent\"\n        emphasis=\"strong\"\n        size=\"md\"\n      />\n    </div>"
        },
        {
          "name": "Appearance",
          "description": "BadgeIndicator supports `accent`, `infoPrimary`, `infoSecondary`, `positive`, `warning`, and `negative` appearance. Default appearance is `accent`.\n\n> For generic unread or new activity indicators, prefer `accent` or `infoPrimary`. Reserve `negative` for states that are explicitly error-related, urgent, blocked, or require corrective action — not for notifications in general.",
          "source": "<div\n      style={{\n        display: 'flex',\n        gap: 'var(--bm-sem-space-200)',\n        flexWrap: 'wrap',\n        alignItems: 'flex-start',\n      }}\n    >\n      {badgeIndicatorAppearances.map(appearance => (\n        <BadgeIndicator\n          key={appearance}\n          kind=\"count\"\n          count={3}\n          appearance={appearance}\n          emphasis=\"strong\"\n          size=\"md\"\n        />\n      ))}\n    </div>"
        },
        {
          "name": "Emphasis",
          "description": "BadgeIndicator supports `strong`, `medium`, and `subtle` emphasis; `subtle` is not available in `marker` kind. Default emphasis is `strong`.",
          "source": "<div\n      style={{\n        display: 'flex',\n        gap: 'var(--bm-sem-space-200)',\n        flexWrap: 'wrap',\n        alignItems: 'flex-start',\n      }}\n    >\n      {badgeIndicatorEmphases.map(emphasis => (\n        <div\n          key={emphasis}\n          style={{\n            display: 'flex',\n            flexDirection: 'column',\n            gap: 'var(--bm-sem-space-50)',\n            alignItems: 'center',\n          }}\n        >\n          <BadgeIndicator\n            kind=\"count\"\n            count={3}\n            appearance=\"accent\"\n            emphasis={emphasis}\n            size=\"md\"\n          />\n          <span\n            style={{\n              font: 'var(--bm-sem-typo-label-xs)',\n              color: 'var(--bm-sem-color-text-primary)',\n            }}\n          >\n            {emphasis}\n          </span>\n        </div>\n      ))}\n    </div>"
        },
        {
          "name": "Icon",
          "description": "BadgeIndicator can display an icon instead of number. Pass any Beam icon via the `icon` prop. `aria-label` is required — it's the only accessible label since there's no visible text.\n\n> Use it when a specific icon communicates the state better than a number or a color marker — for example, a checkmark for completed, a flag for flagged, or a warning for needs attention.",
          "source": "<BadgeIndicator\n      kind=\"icon\"\n      icon={Check}\n      aria-label=\"completed\"\n      appearance=\"accent\"\n      emphasis=\"strong\"\n      size=\"md\"\n    />"
        },
        {
          "name": "Marker",
          "description": "BadgeIndicator can display as a small color marker only — no number or icon. Marker supports `strong` and `medium` emphasis; `subtle` is not available and falls back to `medium`.\n\n> Use it wherever color alone is enough to communicate state, or when the count is unknown or irrelevant.",
          "source": "<BadgeIndicator kind=\"marker\" appearance=\"accent\" emphasis=\"strong\" size=\"md\" />"
        },
        {
          "name": "Size",
          "description": "BadgeIndicator supports `sm` and `md`. Default size is `md`. At each size, `marker` is smaller than `count` and `icon` kinds because it doesn't contain content, making it suitable for compact UI.",
          "source": "<div\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: 'var(--bm-sem-space-200)',\n      }}\n    >\n      {(['sm', 'md'] as const).map(size => (\n        <div\n          key={size}\n          style={{\n            display: 'flex',\n            gap: 'var(--bm-sem-space-100)',\n            alignItems: 'center',\n          }}\n        >\n          <span\n            style={{\n              width: '24px',\n              font: 'var(--bm-sem-typo-label-xs)',\n              color: 'var(--bm-sem-color-text-primary)',\n            }}\n          >\n            {size}\n          </span>\n          <BadgeIndicator\n            kind=\"count\"\n            count={3}\n            appearance=\"accent\"\n            emphasis=\"strong\"\n            size={size}\n          />\n          <BadgeIndicator\n            kind=\"icon\"\n            icon={Check}\n            aria-label=\"completed\"\n            appearance=\"accent\"\n            emphasis=\"strong\"\n            size={size}\n          />\n          <BadgeIndicator\n            kind=\"marker\"\n            appearance=\"accent\"\n            emphasis=\"strong\"\n            size={size}\n          />\n        </div>\n      ))}\n    </div>"
        },
        {
          "name": "Max Count",
          "description": "Specify the highest number allowed to display with `maxCount`. When count exceeds that, the BadgeIndicator displays as `maxCount+`. The default is `99`, but this is configurable.",
          "source": "<div\n      style={{\n        display: 'flex',\n        gap: 'var(--bm-sem-space-100)',\n        alignItems: 'center',\n      }}\n    >\n      <BadgeIndicator\n        kind=\"count\"\n        count={99}\n        maxCount={99}\n        appearance=\"accent\"\n        emphasis=\"strong\"\n        size=\"md\"\n      />\n      <BadgeIndicator\n        kind=\"count\"\n        count={100}\n        maxCount={99}\n        appearance=\"accent\"\n        emphasis=\"strong\"\n        size=\"md\"\n      />\n      <BadgeIndicator\n        kind=\"count\"\n        count={1000}\n        maxCount={999}\n        appearance=\"accent\"\n        emphasis=\"strong\"\n        size=\"md\"\n      />\n    </div>"
        },
        {
          "name": "Positioning",
          "description": "Positioning is left to the user, so it works with any host — Avatar, Button, Tabs, Icon, etc. Wrap the host in `position: relative` and position the BadgeIndicator with `position: absolute`. Use CSS logical properties (`inset-inline-end`, `inset-block-start`, etc.) instead of `right`/`left` so the badge mirrors correctly in RTL layouts.",
          "source": "<div\n      style={{\n        display: 'flex',\n        gap: 'var(--bm-sem-space-300)',\n        alignItems: 'center',\n      }}\n    >\n      {/* Icon host — count badge top-right */}\n      <div style={{ position: 'relative', display: 'inline-flex' }}>\n        <MailOutlined\n          style={{\n            width: 'var(--bm-sem-size-icon-lg)',\n            height: 'var(--bm-sem-size-icon-lg)',\n            color: 'var(--bm-sem-color-icon-secondary)',\n          }}\n        />\n        <BadgeIndicator\n          kind=\"count\"\n          count={5}\n          appearance=\"accent\"\n          emphasis=\"strong\"\n          size=\"sm\"\n          aria-label=\"5 messages\"\n          style={{\n            position: 'absolute',\n            top: 'calc(-1 * var(--bm-sem-space-25))',\n            insetInlineEnd: 'calc(-1 * var(--bm-sem-space-25))',\n          }}\n        />\n      </div>\n      {/* Icon host — marker badge bottom-right */}\n      <div style={{ position: 'relative', display: 'inline-flex' }}>\n        <MailOutlined\n          style={{\n            width: 'var(--bm-sem-size-icon-lg)',\n            height: 'var(--bm-sem-size-icon-lg)',\n            color: 'var(--bm-sem-color-icon-secondary)',\n          }}\n        />\n        <BadgeIndicator\n          kind=\"marker\"\n          appearance=\"infoPrimary\"\n          emphasis=\"medium\"\n          size=\"sm\"\n          aria-label=\"online\"\n          style={{\n            position: 'absolute',\n            bottom: 'var(--bm-sem-space-12)',\n            insetInlineEnd: '0',\n          }}\n        />\n      </div>\n    </div>"
        },
        {
          "name": "Hide Zero",
          "description": "Set `hideZero` to `true` to hide the BadgeIndicator when count is 0. It collapses to zero width so no space is reserved in the layout. When count changes from zero, screen readers reliably announce the new value.",
          "source": "<div\n      style={{\n        display: 'flex',\n        gap: 'var(--bm-sem-space-300)',\n        alignItems: 'flex-start',\n      }}\n    >\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          alignItems: 'center',\n          gap: 'var(--bm-sem-space-100)',\n        }}\n      >\n        <div style={{ position: 'relative', display: 'inline-flex' }}>\n          <MailOutlined\n            style={{\n              width: 'var(--bm-sem-size-icon-lg)',\n              height: 'var(--bm-sem-size-icon-lg)',\n              color: 'var(--bm-sem-color-icon-secondary)',\n            }}\n          />\n          <BadgeIndicator\n            kind=\"count\"\n            count={0}\n            hideZero={false}\n            appearance=\"accent\"\n            emphasis=\"strong\"\n            size=\"sm\"\n            style={{\n              position: 'absolute',\n              top: 'calc(-1 * var(--bm-sem-space-25))',\n              insetInlineEnd: 'calc(-1 * var(--bm-sem-space-25))',\n            }}\n          />\n        </div>\n        <span\n          style={{\n            font: 'var(--bm-sem-typo-label-xs)',\n            color: 'var(--bm-sem-color-text-primary)',\n          }}\n        >\n          hideZero=false, count=0\n        </span>\n      </div>\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          alignItems: 'center',\n          gap: 'var(--bm-sem-space-100)',\n        }}\n      >\n        <div style={{ position: 'relative', display: 'inline-flex' }}>\n          <MailOutlined\n            style={{\n              width: 'var(--bm-sem-size-icon-lg)',\n              height: 'var(--bm-sem-size-icon-lg)',\n              color: 'var(--bm-sem-color-icon-secondary)',\n            }}\n          />\n          <BadgeIndicator\n            kind=\"count\"\n            count={0}\n            hideZero={true}\n            appearance=\"accent\"\n            emphasis=\"strong\"\n            size=\"sm\"\n            style={{\n              position: 'absolute',\n              top: 'calc(-1 * var(--bm-sem-space-25))',\n              insetInlineEnd: 'calc(-1 * var(--bm-sem-space-25))',\n            }}\n          />\n        </div>\n        <span\n          style={{\n            font: 'var(--bm-sem-typo-label-xs)',\n            color: 'var(--bm-sem-color-text-primary)',\n          }}\n        >\n          hideZero=true, count=0\n        </span>\n      </div>\n    </div>"
        },
        {
          "name": "Hide Zero Transition",
          "description": "When `hideZero` is set, the BadgeIndicator scales and fades as it comes and goes rather than\nblinking in and out. Use the buttons to move the count across zero and watch the transition.\n\n> The animation is skipped entirely for anyone who has asked their OS to reduce motion. The\nbadge still appears and disappears at the same moments, it just does so instantly.",
          "source": "const [count, setCount] = useState(0);\n    return (\n      <div\n        style={{\n          display: 'flex',\n          gap: 'var(--bm-sem-space-300)',\n          alignItems: 'center',\n        }}\n      >\n        <div\n          style={{\n            display: 'inline-flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            width: '5rem',\n            height: '4.25rem',\n            background: 'var(--bm-sem-color-surface-02)',\n            borderRadius: 'var(--bm-sem-radius-md)',\n          }}\n        >\n          <div style={{ position: 'relative', display: 'inline-flex' }}>\n            <Avatar\n              size=\"md\"\n              shape=\"circle\"\n              src={NeilTyson}\n              alt=\"Neil deGrasse Tyson\"\n            />\n            <BadgeIndicator\n              kind=\"count\"\n              count={count}\n              hideZero\n              appearance=\"negative\"\n              emphasis=\"strong\"\n              size=\"sm\"\n              ringColor=\"surface-02\"\n              aria-label={`${count} unread messages`}\n              style={{\n                position: 'absolute',\n                insetInlineEnd: 'calc(-1 * var(--bm-sem-space-25))',\n                top: 'calc(-1 * var(--bm-sem-space-25))',\n              }}\n            />\n          </div>\n        </div>\n        <div style={{ display: 'flex', gap: 'var(--bm-sem-space-100)' }}>\n          <Button\n            size=\"sm\"\n            kind=\"outline\"\n            onClick={() => setCount(c => Math.max(0, c - 1))}\n          >\n            Remove one\n          </Button>\n          <Button size=\"sm\" onClick={() => setCount(c => c + 1)}>\n            Add one\n          </Button>\n        </div>\n      </div>\n    );"
        },
        {
          "name": "Ring",
          "description": "Use `ringColor` to add a decorative ring around the BadgeIndicator when placing it over\nimages, avatars, or colored surfaces. The ring creates visual separation without\naffecting the BadgeIndicator size or layout. Generally, the ring color is matched to\nthe surface the BadgeIndicator sits on, so pass the matching named surface —\n`surface-01`, `surface-02`, `expressive`, and so on. Any CSS color value also works\nwhen the background isn't one of those surfaces.",
          "source": "<div\n      style={{\n        display: 'flex',\n        gap: 'var(--bm-sem-space-150)',\n        alignItems: 'center',\n      }}\n    >\n      {/* Light surface-01 — photo avatar with count badge */}\n      <div\n        style={{\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          boxSizing: 'border-box',\n          width: '5rem',\n          height: '4.25rem',\n          background: 'var(--bm-sem-color-surface-01)',\n          border:\n            'var(--bm-sem-border-width-md) solid var(--bm-sem-color-border-01)',\n          borderRadius: 'var(--bm-sem-radius-md)',\n        }}\n      >\n        <div\n          style={{\n            position: 'relative',\n            display: 'inline-flex',\n            flexDirection: 'column',\n            alignItems: 'flex-start',\n          }}\n        >\n          <Avatar\n            size=\"md\"\n            shape=\"circle\"\n            src={NeilTyson}\n            alt=\"Neil deGrasse Tyson\"\n          />\n          <BadgeIndicator\n            kind=\"count\"\n            count={3}\n            appearance=\"accent\"\n            emphasis=\"strong\"\n            size=\"sm\"\n            ringColor=\"surface-01\"\n            style={{\n              position: 'absolute',\n              insetInlineStart: '1.25rem',\n              top: '-0.375rem',\n            }}\n          />\n        </div>\n      </div>\n\n      {/* Light surface-02 — square org avatar with icon badge */}\n      <div\n        style={{\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          boxSizing: 'border-box',\n          width: '5rem',\n          height: '4.25rem',\n          background: 'var(--bm-sem-color-surface-02)',\n          border:\n            'var(--bm-sem-border-width-md) solid var(--bm-sem-color-border-02)',\n          borderRadius: 'var(--bm-sem-radius-md)',\n        }}\n      >\n        <div\n          style={{\n            position: 'relative',\n            display: 'inline-flex',\n            flexDirection: 'column',\n            alignItems: 'flex-start',\n          }}\n        >\n          <Avatar size=\"md\" shape=\"square\" alt=\"Organization\" />\n          <BadgeIndicator\n            kind=\"icon\"\n            icon={Check}\n            aria-label=\"verified\"\n            appearance=\"positive\"\n            emphasis=\"strong\"\n            size=\"sm\"\n            ringColor=\"surface-02\"\n            style={{\n              position: 'absolute',\n              insetInlineStart: '1.25rem',\n              top: '-0.375rem',\n            }}\n          />\n        </div>\n      </div>\n\n      {/* Dark theme — accent avatar with marker badge */}\n      <div\n        className=\"bm-dark\"\n        style={{\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          boxSizing: 'border-box',\n          width: '5rem',\n          height: '4.25rem',\n          background: 'var(--bm-sem-color-surface-01)',\n          border:\n            'var(--bm-sem-border-width-md) solid var(--bm-sem-color-border-01)',\n          borderRadius: 'var(--bm-sem-radius-md)',\n        }}\n      >\n        <div\n          style={{\n            position: 'relative',\n            display: 'inline-flex',\n            flexDirection: 'column',\n            alignItems: 'flex-start',\n          }}\n        >\n          <Avatar size=\"md\" shape=\"circle\" appearance=\"accent\" alt=\"User\" />\n          <BadgeIndicator\n            kind=\"marker\"\n            appearance=\"infoPrimary\"\n            emphasis=\"medium\"\n            size=\"sm\"\n            aria-label=\"alert\"\n            ringColor=\"surface-01\"\n            style={{\n              position: 'absolute',\n              insetInlineStart: '1.375rem',\n              top: '-0.125rem',\n            }}\n          />\n        </div>\n      </div>\n    </div>"
        }
      ],
      "category": "In Development",
      "displayName": "BadgeIndicator",
      "importPath": "@viasat/beam-react/wip"
    },
    {
      "title": "Components/Tooltip",
      "slug": "components-tooltip",
      "description": "Tooltips display additional information upon hover. The information should be contextual, useful, and nonessential.",
      "type": "component",
      "props": [
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the Tooltip. By default it inherits the theme from the parent"
        },
        {
          "name": "text",
          "type": "React.ReactNode",
          "description": "The content of Tooltip",
          "required": true
        },
        {
          "name": "showDelay",
          "type": "number",
          "description": "Specify millisecond delay before showing Tooltip",
          "defaultValue": "0"
        },
        {
          "name": "placement",
          "type": "enum",
          "description": "Specify the placement of Tooltip relative to the anchor",
          "defaultValue": "'top'"
        },
        {
          "name": "autoPlacement",
          "type": "boolean | { crossAxis?: boolean; alignment?: Alignment; autoAlignment?: boolean; allowedPlacements?: Placement[]; rootBoundary?: RootBoundary; elementContext?: ElementContext; altBoundary?: boolean; padding?: Padding; boundary?: Boundary; }",
          "description": "Specify if Tooltip should automatically choose the placement that has the most space.\n<a href=\"https://floating-ui.com/docs/autoplacement#options\" target=\"_blank\" rel=\"noopener noreferrer\">\n  AutoPlacementOptions\n</a>"
        },
        {
          "name": "flip",
          "type": "boolean | { crossAxis?: boolean; rootBoundary?: RootBoundary; elementContext?: ElementContext; altBoundary?: boolean; padding?: Padding; mainAxis?: boolean; ... 4 more ...; boundary?: Boundary; }",
          "description": "Specify if Tooltip should flip to the opposite side if there is not enough space.\nCannot be used with `autoPlacement`.\n<a href=\"https://floating-ui.com/docs/flip#options\" target=\"_blank\" rel=\"noopener noreferrer\">\n  FlipOptions\n</a>",
          "defaultValue": "true"
        },
        {
          "name": "shift",
          "type": "boolean | { crossAxis?: boolean; rootBoundary?: RootBoundary; elementContext?: ElementContext; altBoundary?: boolean; padding?: Padding; mainAxis?: boolean; limiter?: { ...; }; boundary?: Boundary; }",
          "description": "Specify if Tooltip should shift to keep itself in view.\n<a href=\"https://floating-ui.com/docs/shift#options\" target=\"_blank\" rel=\"noopener noreferrer\">\n    ShiftOptions\n</a>",
          "defaultValue": "true"
        },
        {
          "name": "autoHiding",
          "type": "boolean | { rootBoundary?: RootBoundary; elementContext?: ElementContext; altBoundary?: boolean; padding?: Padding; strategy?: \"referenceHidden\" | \"escaped\"; boundary?: Boundary; }",
          "description": "Specify if Tooltip should hide when the anchor is not in view.\n<a href=\"https://floating-ui.com/docs/hide#options\" target=\"_blank\" rel=\"noopener noreferrer\">\n    HideOptions\n</a>",
          "defaultValue": "true"
        },
        {
          "name": "middleware",
          "type": "MiddlewareModifier",
          "description": "Pass an array to override the floating-ui middleware\nor a function to modify the Beam-default middleware array.\n<a href=\"https://floating-ui.com/docs/middleware\" target=\"_blank\" rel=\"noopener noreferrer\">\n    Middleware\n</a>"
        },
        {
          "name": "open",
          "type": "boolean",
          "description": "Control the visibility of Tooltip"
        },
        {
          "name": "defaultOpen",
          "type": "boolean",
          "description": "Control the default visibility of Tooltip"
        },
        {
          "name": "portalled",
          "type": "boolean | FloatingPortalProps",
          "description": "Specify if the floating element should be portalled.\n<a href=\"https://floating-ui.com/docs/floatingportal#props\" target=\"_blank\" rel=\"noopener noreferrer\">\n    FloatingPortalProps\n</a>",
          "defaultValue": "false"
        },
        {
          "name": "onOpenChange",
          "type": "(open: boolean, event?: Event, reason?: OpenChangeReason) => void",
          "description": "Callback when the Tooltip requests to change the `open` value\n\n<a href=\"https://floating-ui.com/docs/react#open-event-callback\" target=\"_blank\" rel=\"noopener noreferrer\">\n    onOpenChange\n</a>"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Prevent Tooltip from appearing"
        },
        {
          "name": "role",
          "type": "UseRoleProps",
          "description": "Adds base screen reader props to the reference and floating elements for a given `role`"
        },
        {
          "name": "children",
          "type": "React.ReactNode",
          "description": "Specify content and sub-components of the Popover",
          "required": true
        },
        {
          "name": "size",
          "type": "boolean | { rootBoundary?: RootBoundary; elementContext?: ElementContext; altBoundary?: boolean; padding?: Padding; boundary?: Boundary; apply?: (args: { ...; } & { ...; }) => Promisable<...>; }",
          "description": "Constrain the floating element's size to fit within available space.\n[SizeOptions](https://floating-ui.com/docs/size#options)",
          "defaultValue": "md"
        },
        {
          "name": "openOnSelected",
          "type": "boolean | UseSelectedProps",
          "description": "Enable selection interaction"
        },
        {
          "name": "rootContext",
          "type": "FloatingRootContext<ReferenceType>",
          "description": "Specify the floating ui root context, if any"
        },
        {
          "name": "listNavigation",
          "type": "UseListNavigationProps",
          "description": "Adds list navigation support to the floating list, if any"
        },
        {
          "name": "typeahead",
          "type": "UseTypeaheadProps",
          "description": "Adds typeahead support to the floating list, if any"
        },
        {
          "name": "dismiss",
          "type": "UseDismissProps",
          "description": "Configure dismiss behaviour (escape key, outside press, etc.)"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Tooltip. Learn more about\n[Floating UI](https://floating-ui.com/)\n(JavaScript library used to power Beam's Tooltip).",
          "source": "<Tooltip {...args}>\n        <TooltipIconTrigger>\n          <InfoOutline />\n        </TooltipIconTrigger>\n      </Tooltip>"
        },
        {
          "name": "Tooltip Trigger",
          "description": "Wrap the Tooltip trigger with the Tooltip component. The trigger must be a single element.\nIf the trigger is a custom component, it must use the\n[forward ref](https://react.dev/reference/react/forwardRef) pattern.\nFor all event handlers and accessibility features to work properly, the trigger must also spread all `props`.\n\n```tsx\nconst CustomComponent = forwardRef(\n ({foo, bar, ...props}, ref) => {\n return (\n \n ...\n \n );\n },\n);\n```",
          "source": "const CustomButton = forwardRef<HTMLButtonElement, BaseTempComponentProps>(\n      ({ children, style, ...props }, ref) => {\n        return (\n          <button\n            style={{\n              background: bmSemColorSurface02,\n              border: 'none',\n              padding: '0.5rem',\n              font: bmSemTypoBodyMd,\n              color: bmSemColorTextPrimary,\n              ...style,\n            }}\n            ref={ref}\n            aria-label=\"Custom tooltip trigger\"\n            {...props}\n          >\n            {children}\n          </button>\n        );\n      },\n    );\n    return (\n      <Tooltip text=\"Tooltip example\">\n        <CustomButton>Custom Component</CustomButton>\n      </Tooltip>\n    );"
        },
        {
          "name": "Tooltip Icon Trigger",
          "description": "Tooltip provides an optional default icon wrapper called `TooltipIconTrigger`.\n`size` is `sm`, `md`, `lg`, `xl`, or `none`. Default size is `md`. `none` disables automatic trigger\ndimension styles. Use `children` to specify a custom trigger.",
          "source": "<div className={tooltipStyles['tooltip-icon']}>\n        {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map(size => (\n          <Tooltip text=\"Tooltip example\">\n            <TooltipIconTrigger size={size}>\n              <InfoOutline />\n            </TooltipIconTrigger>\n          </Tooltip>\n        ))}\n      </div>"
        },
        {
          "name": "Placement",
          "description": "Set `placement` to either `top`, `right`, `bottom`, or `left` to set the side of\nthe anchor that the Tooltip appears on. This will place it at the center of the\nanchor. Optionally, suffix the placement with `-start` or `-end` to align the Tooltip to\nthe start or end of the anchor.",
          "source": "<PlacementStory placementButton={placementButton} />"
        },
        {
          "name": "Custom Content",
          "description": "Use `text` to customize the Tooltip. The example below uses\nthe `bold` attribute on the Text component.",
          "source": "<Tooltip\n        text={\n          <Text compact kind=\"body-sm\">\n            <Text bold compact kind=\"body-sm\">\n              Lorem ipsum\n            </Text>{' '}\n            dolor sit amet, consectetur adipiscing elit. Nullam finibus{' '}\n            <Text bold compact kind=\"body-sm\">\n              volutpat\n            </Text>{' '}\n            metus.\n          </Text>\n        }\n      >\n        <Trigger>Example</Trigger>\n      </Tooltip>"
        },
        {
          "name": "Shift",
          "description": "`shift` (enabled by default) detaches the Tooltip so that it remains in view.\nEither specify the property as a boolean value or pass an object with advanced\n[options](https://floating-ui.com/docs/shift#options).",
          "source": "<div ref={context.scrollRef} className={floatingStyles['compare-container']}>\n        <Tooltip shift text=\"Tooltip example\" open>\n          <Trigger>shift applied</Trigger>\n        </Tooltip>\n        <Tooltip shift={false} text=\"Tooltip example\" open>\n          <Trigger>shift disabled</Trigger>\n        </Tooltip>\n      </div>"
        },
        {
          "name": "Auto Hiding",
          "description": "`autoHiding` (enabled by default) hides the Tooltip when the trigger is no longer visible.\nEither specify the property as a boolean value or pass an object with advanced\n[options](https://floating-ui.com/docs/hide#options).",
          "source": "<div ref={context.scrollRef} className={floatingStyles['compare-container']}>\n        <Tooltip autoHiding text=\"Tooltip example\" open placement=\"right\">\n          <Trigger>autoHiding applied</Trigger>\n        </Tooltip>\n        <Tooltip autoHiding={false} text=\"Tooltip example\" open placement=\"right\">\n          <Trigger>autoHiding disabled</Trigger>\n        </Tooltip>\n      </div>"
        },
        {
          "name": "Flip",
          "description": "`flip` (enabled by default) moves the Tooltip to the opposite side if there is not enough space.\nEither specify the property as a boolean value or pass an object with advanced\n[options](https://floating-ui.com/docs/flip#options).\n`flip` uses a \"least-space\" strategy\nwhereas `autoPlacement` uses a \"most-space\" strategy, so do not use at the same time\nas `autoPlacement`. If `autoPlacement` is enabled, `flip` will automatically be disabled.",
          "source": "<div ref={context.scrollRef} className={floatingStyles['compare-container']}>\n        <Tooltip flip text=\"Tooltip example\" open placement=\"right\">\n          <Trigger>flip applied</Trigger>\n        </Tooltip>\n        <Tooltip flip={false} text=\"Tooltip example\" open placement=\"right\">\n          <Trigger>flip disabled</Trigger>\n        </Tooltip>\n      </div>"
        },
        {
          "name": "Auto Placement",
          "description": "`autoPlacement` moves the Tooltip to the side with the most space.\nEither specify the property as a boolean value or pass an object with additional\n[options](https://floating-ui.com/docs/autoplacement#options).\n`autoPlacement` uses a \"most-space\" strategy whereas `flip` uses a \"least-space\"\nstrategy, so do not use both at the same time. If `autoPlacement` is enabled,\n`flip` will automatically be disabled.",
          "source": "<div ref={context.scrollRef} className={floatingStyles['compare-container']}>\n        <Tooltip autoPlacement text=\"Tooltip example\" open placement=\"top\">\n          <Trigger>autoPlacement applied</Trigger>\n        </Tooltip>\n        <Tooltip text=\"Tooltip example\" open>\n          <Trigger>autoPlacement not applied</Trigger>\n        </Tooltip>\n      </div>"
        },
        {
          "name": "Open",
          "description": "Specify the `open` prop to control the visibility of the Tooltip.",
          "source": "<Tooltip {...reactArgs} open>\n      <TooltipIconTrigger>\n        <InfoOutline />\n      </TooltipIconTrigger>\n    </Tooltip>"
        },
        {
          "name": "Disabled",
          "description": "Specify the `disabled` prop to disable the Tooltip.",
          "source": "<Tooltip {...reactArgs} disabled>\n      <TooltipIconTrigger>\n        <InfoOutline />\n      </TooltipIconTrigger>\n    </Tooltip>"
        },
        {
          "name": "Portalled",
          "description": "Use `portalled` to append the tooltip to the document body.\nThis is useful when Tooltip is clipped by a parent container with `overflow: hidden`.\nEither specify the property as a boolean value or pass an object with additional\n[options](https://floating-ui.com/docs/floatingportal#props).\nBe careful when using this prop, as it may interfere with `shift`.\n\nBelow is a relatively positioned container with `overflow: hidden`",
          "source": "<div className={floatingStyles['portal-container']}>\n        <Tooltip text=\"Tooltip example\" portalled>\n          <Trigger>Portalled</Trigger>\n        </Tooltip>\n        <Tooltip text=\"Tooltip example\">\n          <Trigger>Not portalled</Trigger>\n        </Tooltip>\n      </div>"
        }
      ],
      "category": "Components",
      "displayName": "Tooltip",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Toast/ToastContainer",
      "slug": "components-toast-toastcontainer",
      "description": "ToastContainer is a utility component that renders the Toast in the browser.",
      "type": "component",
      "props": [
        {
          "name": "position",
          "type": "'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'",
          "description": "Specify the position of the toasts",
          "defaultValue": "bottom-right"
        },
        {
          "name": "renderInPortal",
          "type": "boolean",
          "description": "Specify if the container should be rendered in a portal",
          "defaultValue": "false"
        },
        {
          "name": "offsetX",
          "type": "string",
          "description": "Specify space between Toast and the viewport (use rems for accessibility)",
          "defaultValue": "false"
        },
        {
          "name": "offsetY",
          "type": "string",
          "description": "Specify space between Toast and the viewport (use rems for accessibility)"
        },
        {
          "name": "maxToasts",
          "type": "number",
          "description": "Max number of Toast allowed"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "ToastContainer Default behavior.",
          "source": "const TriggerToasts = () => {\n      const { addToast } = useToast();\n\n      const handleToast = () => {\n        const randomIndex = Math.floor(Math.random() * toastsSet.length);\n        addToast(toastsSet[randomIndex]);\n      };\n\n      return (\n        <Button kind=\"filled\" size=\"sm\" appearance=\"accent\" onClick={handleToast}>\n          Make Toast\n        </Button>\n      );\n    };\n\n    return (\n      <ToastContainer\n        renderInPortal={args.renderInPortal}\n        position={args.position}\n        maxToasts={args.maxToasts}\n        offsetX={args.offsetX}\n        offsetY={args.offsetY}\n      >\n        <TriggerToasts />\n      </ToastContainer>\n    );"
        }
      ],
      "category": "Components",
      "displayName": "Toast/ToastContainer",
      "importPath": "@viasat/beam-react",
      "pairedHooks": [
        {
          "name": "useToast",
          "kind": "hook",
          "signature": "useToast(): { addToast: (toast: ToastProps) => void; dismissToast: (id: string) => void; removeToast: (id: string) => void; removeAllToasts: () => void; removeOldestToast: () => void; toasts: ToastProps[] }",
          "returns": "{ addToast: (toast: ToastProps) => void; dismissToast: (id: string) => void; removeToast: (id: string) => void; removeAllToasts: () => void; removeOldestToast: () => void; toasts: ToastProps[] }",
          "importPath": "@viasat/beam-react"
        }
      ]
    },
    {
      "title": "Components/Toast/Toast",
      "slug": "components-toast-toast",
      "description": "A toast is a compact notification that pops up to provide brief feedback on actions or status updates. It’s commonly used for brief, non-critical notifications like confirmations, warnings, or errors.\n\nFor inline or persistent page messaging, try an [Alert](/docs/components-alert--docs).",
      "type": "component",
      "props": [
        {
          "name": "isDismissed",
          "type": "boolean",
          "description": "internal - animation handling inside the Toast"
        },
        {
          "name": "isFirstToast",
          "type": "boolean",
          "description": ""
        },
        {
          "name": "heading",
          "type": "ReactNode",
          "description": "Specify heading text for Toast"
        },
        {
          "name": "body",
          "type": "ReactNode",
          "description": "Specify body text for Toast"
        },
        {
          "name": "icon",
          "type": "ReactNode",
          "description": "Specify a different icon for Toast"
        },
        {
          "name": "hideIcon",
          "type": "boolean",
          "description": "Specify if the icon displays on the Toast",
          "defaultValue": "false"
        },
        {
          "name": "lite",
          "type": "boolean",
          "description": "Displays the lite version of the Toast",
          "defaultValue": "false"
        },
        {
          "name": "dismissible",
          "type": "boolean",
          "description": "Specify if the Toast renders with a CloseButton. If autoDismiss is set to false than the toast will remain manually dismissible.",
          "defaultValue": "true"
        },
        {
          "name": "autoDismiss",
          "type": "boolean",
          "description": "Specify if Toast auto dismisses",
          "defaultValue": "true"
        },
        {
          "name": "duration",
          "type": "number",
          "description": "Number of milliseconds before toast is automatically dismissed. Default is 7000 milliseconds.",
          "defaultValue": "7000"
        },
        {
          "name": "appearance",
          "type": "'positive' | 'warning' | 'negative' | 'information'",
          "description": "Specify the appearance of a Toast",
          "defaultValue": "information"
        },
        {
          "name": "actions",
          "type": "ReactNode",
          "description": "Specify if actions display on the Toast"
        },
        {
          "name": "onClose",
          "type": "() => void",
          "description": "Specify a callback function to be called while Toast closes"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Toast.",
          "source": "<Toast\n        body={args.body}\n        heading={args.heading}\n        appearance={args.appearance}\n        autoDismiss={args.autoDismiss}\n        dismissible={args.dismissible}\n        lite={args.lite}\n        hideIcon={args.hideIcon}\n        actions={\n          <>\n            <Button kind=\"outline\" size=\"sm\" appearance=\"neutral\">\n              {' '}\n              Action\n            </Button>\n            <Link size=\"sm\" appearance=\"secondary\" href={'#'}>\n              Link text\n            </Link>\n          </>\n        }\n      />"
        },
        {
          "name": "Appearance",
          "description": "Toast supports `information`, `positive`, `warning`, and `negative` appearance. Default appearance is `information`.",
          "source": "<div\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: bmCompToastSpaceStack,\n      }}\n    >\n      {toastAppearances.map(variant => (\n        <Toast\n          key={variant}\n          appearance={variant}\n          body={appearanceText[variant].body}\n          heading={appearanceText[variant].heading}\n          actions={\n            <>\n              <Button kind=\"outline\" size=\"sm\" appearance=\"neutral\">\n                {' '}\n                Action\n              </Button>{' '}\n              <Link size=\"sm\" appearance=\"secondary\" href={'#'}>\n                Link text\n              </Link>\n            </>\n          }\n        />\n      ))}\n    </div>"
        },
        {
          "name": "Icon",
          "description": "Displaying Toast icon is optional. Set `hideIcon` to `true` to hide the icon. Customize the icon using `icon`.",
          "source": "<div style={{ display: 'flex', flexDirection: 'column', gap: bmSemSpace75 }}>\n      <Toast\n        hideIcon={true}\n        heading={iconText.hideIcon.heading}\n        body={iconText.hideIcon.body}\n        actions={\n          <>\n            <Button kind=\"outline\" size=\"sm\" appearance=\"neutral\">\n              {' '}\n              Action\n            </Button>{' '}\n            <Link size=\"sm\" appearance=\"secondary\" href={'#'}>\n              Link text\n            </Link>\n          </>\n        }\n      />\n\n      <Toast\n        heading={iconText.customIcon.heading}\n        body={iconText.customIcon.body}\n        icon={<Lock />}\n        actions={\n          <>\n            <Button kind=\"outline\" size=\"sm\" appearance=\"neutral\">\n              {' '}\n              Action\n            </Button>{' '}\n            <Link size=\"sm\" appearance=\"secondary\" href={'#'}>\n              Link text\n            </Link>\n          </>\n        }\n      />\n    </div>"
        },
        {
          "name": "Dismissible",
          "description": "Making the Toast dismissible is optional. Set `dismissible` to `false` to remove the `CloseButton`. If `autoDismiss` is set to `false` than the toast will remain manually dismissible.",
          "source": "<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>\n      <Toast\n        dismissible={false}\n        body={dismissibleText.body}\n        heading={dismissibleText.heading}\n        actions={\n          <>\n            <Button kind=\"outline\" size=\"sm\" appearance=\"neutral\">\n              {' '}\n              Action\n            </Button>{' '}\n            <Link size=\"sm\" appearance=\"secondary\" href={'#'}>\n              Link text\n            </Link>\n          </>\n        }\n      />\n    </div>"
        },
        {
          "name": "Actions",
          "description": "Adding actions is optional. Use `actions` slot to add Button and Link.",
          "source": "<div\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        gap: bmSemSpace300,\n      }}\n    >\n      <Toast\n        heading={actionsText.heading}\n        body={actionsText.body}\n        actions={\n          <>\n            <Button kind=\"outline\" size=\"sm\" appearance=\"neutral\">\n              {' '}\n              Action\n            </Button>{' '}\n            <Link size=\"sm\" appearance=\"secondary\" href={'#'}>\n              Link text\n            </Link>\n          </>\n        }\n      />\n      <Toast\n        body={actionsText.litebody}\n        lite\n        actions={\n          <Link size=\"sm\" appearance=\"secondary\" href={'#'}>\n            Link text\n          </Link>\n        }\n      />\n    </div>"
        },
        {
          "name": "Lite",
          "description": "Set `lite` to `true` to display the compact Toast variants.",
          "source": "<div\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: bmCompToastSpaceStack,\n      }}\n    >\n      {toastAppearances.map(variant => (\n        <Toast\n          key={variant}\n          appearance={variant}\n          body={liteText.body}\n          lite\n          dismissible\n          actions={\n            <Link size=\"sm\" appearance=\"secondary\" href={'#'}>\n              Link text\n            </Link>\n          }\n        />\n      ))}\n    </div>"
        },
        {
          "name": "Custom Content",
          "description": "Use `body` slot to customize Toast. The example below features a timestamp added to the Toast.",
          "source": "<Toast\n        heading={customContentText.heading}\n        body={\n          <div\n            style={{ display: 'flex', flexDirection: 'column', gap: bmSemSpace50 }}\n          >\n            {customContentText.body}\n            <div style={{ display: 'flex' }}>\n              <Text key=\"text-body-md\" as=\"span\" color=\"secondary\" kind=\"body-md\">\n                00:00:00 AM\n              </Text>\n            </div>\n          </div>\n        }\n        actions={\n          <>\n            <Button kind=\"outline\" size=\"sm\" appearance=\"neutral\">\n              {' '}\n              Action\n            </Button>\n            <Link size=\"sm\" appearance=\"secondary\" href={'#'}>\n              Link text\n            </Link>\n          </>\n        }\n      />"
        }
      ],
      "category": "Components",
      "displayName": "Toast/Toast",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Forms/TextField",
      "slug": "forms-textfield",
      "description": "A TextField allows users to enter short snippets of text, like names, emails,\npasswords etc.",
      "type": "component",
      "props": [
        {
          "name": "width",
          "type": "string",
          "description": "Specify the width of TextField"
        },
        {
          "name": "label",
          "type": "Nullable<ReactElement<any, string | JSXElementConstructor<any>>>",
          "description": "Specify Label for TextField",
          "defaultValue": "null"
        },
        {
          "name": "ellipse",
          "type": "boolean",
          "description": "Specify if overflow displays ellipsis",
          "defaultValue": "false"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if TextField displays in a disabled state",
          "defaultValue": "false"
        },
        {
          "name": "placeholder",
          "type": "string",
          "description": "Specify placeholder text for TextField"
        },
        {
          "name": "readOnly",
          "type": "boolean",
          "description": "Specify if TextField displays in a read-only state",
          "defaultValue": "false"
        },
        {
          "name": "required",
          "type": "boolean",
          "description": "Specify if TextField is a required input",
          "defaultValue": "false"
        },
        {
          "name": "size",
          "type": "any",
          "description": "Specify the size of TextField.\nPassing a number is a deprecated, backward-compatible shorthand for the\nnative character width — use `htmlSize` instead."
        },
        {
          "name": "error",
          "type": "string | boolean",
          "description": "Specify error text and display error state of a TextField"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the TextField. By default it inherits the theme from the parent"
        },
        {
          "name": "contentAfter",
          "type": "ReactNode",
          "description": "Specify content to display after input"
        },
        {
          "name": "contentBefore",
          "type": "ReactNode",
          "description": "Specify content to display before input"
        },
        {
          "name": "fluid",
          "type": "boolean",
          "description": "Specify if TextField is fluid",
          "defaultValue": "false"
        },
        {
          "name": "htmlSize",
          "type": "number",
          "description": "Specify the native input width in average character widths\n(the HTML `size` attribute)"
        },
        {
          "name": "helperText",
          "type": "Nullable<ReactElement<any, string | JSXElementConstructor<any>>>",
          "description": "Specify HelperText for TextField",
          "defaultValue": "null"
        },
        {
          "name": "validationRules",
          "type": "FormValidator[]",
          "description": "Specify form validation rules for TextField",
          "defaultValue": "[]"
        },
        {
          "name": "hideRequiredMarker",
          "type": "boolean",
          "description": "Specify if the TextField displays with an asterisk",
          "defaultValue": "false"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default TextField.",
          "source": "<TextField {...args} />"
        },
        {
          "name": "With Placeholder",
          "description": "Displaying placeholder text is optional.\nUse `placeholder` to display placeholder text in a TextField.",
          "source": "<TextField\n      id=\"with-placeholder\"\n      name=\"with-placeholder\"\n      label={<Label>Label</Label>}\n      placeholder=\"Placeholder text\"\n    />"
        },
        {
          "name": "Without Label",
          "description": "Displaying the `Label` is optional.\nTextField will display without Label if not passed as a prop.\nIf no `label` is passed, set `aria-label` to make this input accessible\nfor screen readers.",
          "source": "<TextField id=\"without-label\" name=\"without-label\" aria-label=\"without-label\" />"
        },
        {
          "name": "With Helper Text",
          "description": "Displaying `HelperText` is optional. TextField will display\nwith `HelperText` if passed as a prop.",
          "source": "<TextField\n        id=\"with-helper-text\"\n        name=\"with-helper-text\"\n        label={<Label>Label</Label>}\n        helperText={<HelperText>Helper text</HelperText>}\n      />"
        },
        {
          "name": "Required",
          "description": "Set `required` to `true` to make TextField required.\nSet `hideRequiredMarker` to `true` to remove the asterisk (*).",
          "source": "<>\n        <TextField\n          required\n          id=\"required-with-marker\"\n          name=\"required-with-marker\"\n          label={<Label>With required marker</Label>}\n        />\n        <TextField\n          required\n          hideRequiredMarker\n          id=\"required-no-marker\"\n          name=\"required-no-marker\"\n          label={<Label>Without required marker</Label>}\n        />\n      </>"
        },
        {
          "name": "Optional",
          "description": "Pass `optional` to `Label` to show that a TextField is optional.\nDo not mix required and optional markers in the same form set.",
          "source": "<TextField\n      id=\"optional\"\n      name=\"optional\"\n      label={<Label optional=\"(optional)\">Label</Label>}\n    />"
        },
        {
          "name": "Error",
          "description": "Use `error` to specify `HelperText` text and display TextField in an error state.",
          "source": "<TextField\n      id=\"error\"\n      name=\"error\"\n      error=\"Helper text\"\n      label={<Label>Label</Label>}\n    />"
        },
        {
          "name": "Read Only",
          "description": "Set `readOnly` to `true` to display TextField in a read-only state.",
          "source": "<TextField\n      readOnly\n      id=\"read-only\"\n      name=\"read-only\"\n      value=\"Filled text\"\n      label={<Label>Label</Label>}\n    />"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` to display TextField in a disabled state.",
          "source": "<TextField disabled id=\"disabled\" name=\"disabled\" label={<Label>Label</Label>} />"
        },
        {
          "name": "Width",
          "description": "Use `width` to customize the width of a TextField.\nUse `rems` to specify width to ensure TextField scales with user preferences.",
          "source": "<TextField\n      width=\"25rem\"\n      id=\"custom-width\"\n      name=\"custom-width\"\n      label={<Label>Custom width</Label>}\n    />"
        },
        {
          "name": "Fluid",
          "description": "Set `fluid` to `true` to make TextField span its parent container.",
          "source": "<TextField fluid id=\"fluid\" name=\"fluid\" label={<Label>Fluid</Label>} />"
        },
        {
          "name": "With Icon Before And After",
          "description": "TextField supports icons, flags, payment logos,\netc as `contentBefore` and `contentAfter`.",
          "source": "<>\n        <TextField\n          id=\"content-before\"\n          name=\"content-before\"\n          contentBefore={<Satellite />}\n          label={<Label>Content before</Label>}\n        />\n        <TextField\n          id=\"content-after\"\n          name=\"content-after\"\n          contentAfter={<Satellite />}\n          label={<Label>Content after</Label>}\n        />\n        <TextField\n          id=\"content-before-flag\"\n          name=\"content-before-flag\"\n          label={<Label>Content before</Label>}\n          contentBefore={<England style={{ width: bmPrimitiveDimension150 }} />}\n        />\n        <TextField\n          id=\"content-after-payment\"\n          name=\"content-after-payment\"\n          label={<Label>Content after</Label>}\n          contentAfter={<ApplePay style={{ width: bmPrimitiveDimension150 }} />}\n        />\n      </>"
        },
        {
          "name": "Size",
          "description": "TextField supports `sm`, `md`, and `lg` sizes. Default size is `md`.",
          "source": "<>\n        <TextField\n          size=\"sm\"\n          label={<Label>Small</Label>}\n          helperText={<HelperText>Helper text</HelperText>}\n          contentBefore={<Icon icon={Satellite} ariaLabel=\"Satellite icon\" />}\n          contentAfter={<Visa aria-label=\"Visa icon\" />}\n        />\n        <TextField\n          size=\"md\"\n          label={<Label>Medium</Label>}\n          helperText={<HelperText>Helper text</HelperText>}\n          contentBefore={<Icon icon={Satellite} ariaLabel=\"Satellite icon\" />}\n          contentAfter={<Visa aria-label=\"Visa icon\" />}\n        />\n        <TextField\n          size=\"lg\"\n          label={<Label>Large</Label>}\n          helperText={<HelperText>Helper text</HelperText>}\n          contentBefore={<Icon icon={Satellite} ariaLabel=\"Satellite icon\" />}\n          contentAfter={<Visa aria-label=\"Visa icon\" />}\n        />\n      </>"
        },
        {
          "name": "With Masking Library",
          "description": "Use TextField with 3rd party masking libraries. This examples is using\n[react-input-mask](https://www.npmjs.com/package/react-input-mask) to collect a phone number.",
          "source": "<InputMask mask=\"(999) 999 9999\" maskChar=\"9\" dir={globals.dir}>\n        {inputProps => (\n          <TextField\n            type=\"tel\"\n            inputMode=\"numeric\"\n            id=\"with-masking-library\"\n            name=\"with-masking-library\"\n            placeholder=\"(999) 999 9999\"\n            label={<Label>Label</Label>}\n            contentBefore={\n              <UnitedStatesOfAmerica style={{ width: bmPrimitiveDimension150 }} />\n            }\n            {...inputProps}\n          />\n        )}\n      </InputMask>"
        }
      ],
      "category": "Forms",
      "displayName": "TextField",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Forms/TextArea",
      "slug": "forms-textarea",
      "description": "A TextArea is an input field that allows users to enter long-form text.",
      "type": "component",
      "props": [
        {
          "name": "cols",
          "type": "number",
          "description": "Specify the width of TextArea"
        },
        {
          "name": "label",
          "type": "Nullable<ReactElement<any, string | JSXElementConstructor<any>>>",
          "description": "Specify Label for TextArea",
          "defaultValue": "null"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if TextArea displays in a disabled state",
          "defaultValue": "false"
        },
        {
          "name": "placeholder",
          "type": "string",
          "description": "Specify placeholder text for TextArea"
        },
        {
          "name": "readOnly",
          "type": "boolean",
          "description": "Specify if TextArea displays in a read-only state",
          "defaultValue": "false"
        },
        {
          "name": "required",
          "type": "boolean",
          "description": "Specify if TextArea is a required input",
          "defaultValue": "false"
        },
        {
          "name": "rows",
          "type": "number",
          "description": "Specify the height of TextArea"
        },
        {
          "name": "width",
          "type": "string",
          "description": "Specify the width of TextArea"
        },
        {
          "name": "error",
          "type": "string | boolean",
          "description": "Specify error text and display error state of a TextArea"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the TextArea. By default it inherits the theme from the parent"
        },
        {
          "name": "maxCount",
          "type": "number",
          "description": "Specify the maximum character count for the TextArea"
        },
        {
          "name": "fluid",
          "type": "boolean",
          "description": "Specify if TextArea is fluid",
          "defaultValue": "false"
        },
        {
          "name": "helperText",
          "type": "Nullable<ReactElement<any, string | JSXElementConstructor<any>>>",
          "description": "Specify HelperText for TextArea",
          "defaultValue": "null"
        },
        {
          "name": "hideResize",
          "type": "boolean",
          "description": "Specify if TextArea can be manually resized",
          "defaultValue": "false"
        },
        {
          "name": "autoResize",
          "type": "boolean",
          "description": "Specify if the TextArea automatically resizes to fit the text",
          "defaultValue": "false"
        },
        {
          "name": "validationRules",
          "type": "FormValidator[]",
          "description": "Specify form validation rules for TextArea",
          "defaultValue": "[]"
        },
        {
          "name": "hideRequiredMarker",
          "type": "boolean",
          "description": "Specify if the TextArea displays with an asterisk",
          "defaultValue": "false"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default TextArea.",
          "source": "<TextArea id=\"default\" name=\"default\" label={<Label>Label</Label>} {...args} />"
        },
        {
          "name": "Without Placeholder",
          "description": "Displaying `placeholder` is optional.\nTextArea will display without a placeholder if no text is passed.",
          "source": "<TextArea\n      id=\"without-placeholder\"\n      name=\"without-placeholder\"\n      label={<Label>Label</Label>}\n    />"
        },
        {
          "name": "Without Label",
          "description": "Displaying the `Label` is optional.\nTextArea will display without Label if `children` is not passed to `label`.",
          "source": "<TextArea\n        id=\"without-label\"\n        name=\"without-label\"\n        aria-label=\"without-label\"\n        placeholder=\"Placeholder text\"\n      />"
        },
        {
          "name": "With Helper Text",
          "description": "Displaying `HelperText` is optional.\n`TextArea` will display with `HelperText` if `children` is passed to `helperText`.",
          "source": "<TextArea\n        id=\"with-helper-text\"\n        name=\"with-helper-text\"\n        label={<Label>Label</Label>}\n        placeholder=\"Placeholder text\"\n        helperText={<HelperText>Helper text</HelperText>}\n      />"
        },
        {
          "name": "With Counter",
          "description": "Pass a `number` to `maxCount` to display the counter and set a\nmaximum character count for the TextArea.",
          "source": "<TextArea\n        maxCount={250}\n        id=\"with-counter\"\n        name=\"with-counter\"\n        placeholder=\"Placeholder text\"\n        label={<Label>With counter</Label>}\n      />"
        },
        {
          "name": "Required",
          "description": "Set `required` to `true` to make TextArea required.\nSet `hideRequiredMarker` to `true` to remove the asterisk (*).",
          "source": "<>\n        <TextArea\n          required\n          id=\"required-with-marker\"\n          name=\"required-with-marker\"\n          placeholder=\"Placeholder text\"\n          label={<Label>With required marker</Label>}\n        />\n        <TextArea\n          required\n          hideRequiredMarker\n          id=\"required-no-marker\"\n          name=\"required-no-marker\"\n          placeholder=\"Placeholder text\"\n          label={<Label>Without required marker</Label>}\n        />\n      </>"
        },
        {
          "name": "Optional",
          "description": "Pass `optional` to `label` to show that a TextArea is optional.\nDo not mix required and optional markers in the same form set.",
          "source": "<TextArea\n        id=\"optional\"\n        name=\"optional\"\n        placeholder=\"Placeholder text\"\n        label={<Label optional=\"(optional)\">Label</Label>}\n      />"
        },
        {
          "name": "Error",
          "description": "Use `error` to specify `HelperText` text and display TextArea in an error state.",
          "source": "<TextArea\n      id=\"error\"\n      name=\"error\"\n      error=\"Helper text\"\n      label={<Label>Label</Label>}\n      placeholder=\"Placeholder text\"\n    />"
        },
        {
          "name": "Read Only",
          "description": "Set `readOnly` to `true` to display TextArea in a read-only state.",
          "source": "<TextArea\n        readOnly\n        id=\"read-only\"\n        name=\"read-only\"\n        defaultValue=\"Filled text\"\n        label={<Label>Label</Label>}\n        placeholder=\"Placeholder text\"\n      />"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` to display TextArea in a disabled state.",
          "source": "<TextArea\n      disabled\n      id=\"disabled\"\n      name=\"disabled\"\n      label={<Label>Label</Label>}\n      placeholder=\"Placeholder text\"\n    />"
        },
        {
          "name": "Width",
          "description": "Use `width` to customize the width of a TextArea.\nUse `rems` to specify width to ensure TextField scales with user preferences.\nIf preferred, `cols` can also be used to adjust the width of a TextArea.",
          "source": "<TextArea\n        width=\"25rem\"\n        id=\"custom-width\"\n        name=\"custom-width\"\n        placeholder=\"Placeholder text\"\n        label={<Label>Custom width</Label>}\n      />"
        },
        {
          "name": "Height",
          "description": "Use `rows` to customize the height of a TextArea.\nTextArea defaults to a minimum height of 3 rows.\nUse [TextField](/docs/forms-textfield--docs) if a single row field is preferred.",
          "source": "<TextArea\n        fluid\n        rows={6}\n        id=\"custom-height\"\n        name=\"custom-height\"\n        label={<Label>Custom height</Label>}\n        defaultValue=\"This text area has a custom height of 6 rows.\"\n      />"
        },
        {
          "name": "Fluid",
          "description": "Set `fluid` to `true` to make TextArea span its parent container.",
          "source": "<TextArea\n      fluid\n      id=\"fluid\"\n      name=\"fluid\"\n      label={<Label>Fluid</Label>}\n      placeholder=\"Placeholder text\"\n    />"
        },
        {
          "name": "Auto Resize",
          "description": "Set `autoResize` to `true` to make TextArea automatically resizes to fit the text.\nThis example has a minimum `rows` setting of 4.",
          "source": "<TextArea\n        rows={4}\n        autoResize\n        id=\"auto-resize\"\n        name=\"auto-resize\"\n        placeholder=\"Placeholder text\"\n        label={<Label>Auto-resizing TextArea</Label>}\n        defaultValue=\"This text area is using auto resize. Try adding more text.\"\n      />"
        }
      ],
      "category": "Forms",
      "displayName": "TextArea",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Text",
      "slug": "components-text",
      "description": "Text styles strings, ensuring typography is consistent across all Viasat products.",
      "type": "component",
      "props": [
        {
          "name": "children",
          "type": "React.ReactNode",
          "description": "The text content",
          "required": true
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the Text. By default it inherits the theme from the parent"
        },
        {
          "name": "kind",
          "type": "'heading-6xl' | 'heading-5xl' | 'heading-4xl' | 'heading-3xl' | 'heading-2xl' | 'heading-xl' | 'heading-lg' | 'heading-md' | 'heading-sm' | 'heading-xs' | 'heading-alt-6xl' | 'heading-alt-5xl' | 'heading-alt-4xl' | 'heading-alt-3xl' | 'heading-alt-2xl' | 'heading-alt-xl' | 'heading-alt-lg' | 'heading-alt-md' | 'heading-alt-sm' | 'heading-alt-xs' | 'body-2xl' | 'body-xl' | 'body-lg' | 'body-md' | 'body-sm' | 'body-xs' | 'detail-xl' | 'detail-lg' | 'detail-md' | 'detail-sm' | 'detail-xs' | 'label-2xl' | 'label-xl' | 'label-lg' | 'label-md' | 'label-sm' | 'label-xs'",
          "description": "Specify if Text displays as a heading, body, detail, or label variant",
          "defaultValue": "body-md"
        },
        {
          "name": "color",
          "type": "'primary' | 'secondary' | 'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative' | 'secondaryInverse' | 'selected' | 'disabled' | 'primaryInverse' | 'expressive' | 'expressiveStronger' | 'expressiveInverse' | 'expressiveInverseStronger'",
          "description": "Specifies the color of the text"
        },
        {
          "name": "bold",
          "type": "boolean",
          "description": "Specify if Text is bold. This prop only works for body `kinds`"
        },
        {
          "name": "as",
          "type": "React.ElementType",
          "description": "Specifies which HTML component to wrap the text content in"
        },
        {
          "name": "alignment",
          "type": "'start' | 'end' | 'center'",
          "description": "Sets css text-align to either start, center, or end"
        },
        {
          "name": "wordBreak",
          "type": "'normal' | 'breakAll' | 'breakWord'",
          "description": "Sets the css word-break property"
        },
        {
          "name": "truncate",
          "type": "boolean",
          "description": "Truncates the text with ellipsis if it exceeds the container"
        },
        {
          "name": "block",
          "type": "boolean",
          "description": "Changes the css display to block"
        },
        {
          "name": "compact",
          "type": "boolean",
          "description": "Reduces the line-height of body and label `kind` variants"
        },
        {
          "name": "strikethrough",
          "type": "boolean",
          "description": "Adds a strikethrough to the text"
        },
        {
          "name": "underline",
          "type": "boolean",
          "description": "Underlines the text"
        },
        {
          "name": "italic",
          "type": "boolean",
          "description": "Italicizes the text"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Text.",
          "source": "<Text {...args} />"
        },
        {
          "name": "Kind",
          "description": "All `kind` variants are based off of Beam’s [Typography Design Tokens](https://www.figma.com/design/4FUymLWopOWPWIDvPFcO1K/Beam-3-ALPHA--DONT-USE-?node-id=4012-10803).\n\n`kind` provides presets with default size, weight, and line-height applied to heading, body, detail, and label variants. `bold` modifiers are only intended to be applied to body variants. `compact`, which reduces line-height, is only intended to be used with `body` and `label` variants.\n\n`heading-2xl` to `heading-6xl` are responsive across desktop, tablet, and mobile devices.",
          "source": "TEXT_KIND_VALUES.map(kind => (\n      <Text key={`text-${kind}`} as=\"span\" kind={kind} color=\"primary\">\n        {capitalizeFirstLetter(kind)}\n      </Text>\n    ))"
        },
        {
          "name": "Weight",
          "description": "Modify Text weight using the `bold` prop. This prop only works for **body** `kinds`.",
          "source": "<Text bold color=\"primary\">\n        This text is bold\n      </Text>"
        },
        {
          "name": "Color",
          "description": "Text supports `primary`, `secondary`, `positive`, `warning`, `negative` `infoPrimary`, `infoSecondary`, `selected`, `disabled`, `inversePrimary`, and `inverseSecondary` colors. Default color is inherited from the parent.",
          "source": "TEXT_COLOR_VALUES.map(color => (\n      <Text\n        key={`text-${color}`}\n        style={{\n          backgroundColor: color.toLowerCase().includes('inverse')\n            ? 'var(--bm-sem-color-surface-inverse)'\n            : '',\n        }}\n        color={color}\n      >{`This text is colored ${color}`}</Text>\n    ))"
        },
        {
          "name": "Alignment",
          "description": "Text supports `start`, `center`, and `end` alignments. Default alignment is `undefined`.",
          "source": "TEXT_ALIGNMENT_VALUES.map(alignment => (\n      <Text\n        key={`text-alignment-${alignment}`}\n        style={{\n          backgroundColor: 'var(--bm-sem-color-surface-02)',\n        }}\n        color=\"primary\"\n        alignment={alignment}\n      >{`This text is aligned ${alignment}`}</Text>\n    ))"
        },
        {
          "name": "Truncate",
          "description": "Truncate text by setting `truncate` to `true`.",
          "source": "<Text color=\"primary\" truncate>\n        {defaultStoryBookTextLong}\n      </Text>"
        },
        {
          "name": "Compact",
          "description": "Set `compact` to `true` to reduce line-height. Only use with body and label `kind` variants.",
          "source": "<Text color=\"primary\" compact>\n        This text has compact line-height\n      </Text>"
        },
        {
          "name": "Strikethrough",
          "description": "Add a strikethrough text by setting `strikethrough` to `true`.",
          "source": "<Text color=\"primary\" strikethrough>\n        This text has a strikethrough\n      </Text>"
        },
        {
          "name": "Underline",
          "description": "Add a underline to Text by setting `underline` to `true`. Be cautious when using underline, as it can easily be confused with a Link.",
          "source": "<Text color=\"primary\" underline>\n        This text is underlined\n      </Text>"
        },
        {
          "name": "Italic",
          "description": "Make Text italic by setting `italic` to `true`.",
          "source": "<Text italic color=\"primary\">\n        This text is italicized\n      </Text>"
        }
      ],
      "category": "Components",
      "displayName": "Text",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Tabs/Tabs",
      "slug": "components-tabs-tabs",
      "description": "Alpha\n [Learn more](/docs/concepts-component-lifecycle--docs) \n\nTabs allows users to navigate between different sections of content within a single view,\nmaking it easy to switch between related or non-related information.",
      "type": "component",
      "props": [
        {
          "name": "orientation",
          "type": "'horizontal' | 'vertical'",
          "description": "Specify the orientation of Tabs",
          "defaultValue": "horizontal"
        },
        {
          "name": "fluid",
          "type": "boolean",
          "description": "Specify if Tabs.Items display as fluid",
          "defaultValue": "false"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if all Tab.Items are disabled",
          "defaultValue": "false"
        },
        {
          "name": "divider",
          "type": "boolean",
          "description": "Specify if a Divider displays under Tabs.Group",
          "defaultValue": "true"
        },
        {
          "name": "size",
          "type": "'md' | 'lg'",
          "description": "Specify the size of a Tabs",
          "defaultValue": "md"
        },
        {
          "name": "initialSelection",
          "type": "string",
          "description": "Specify the value of the selected item"
        },
        {
          "name": "onChange",
          "type": "(value: string) => void",
          "description": "Specify a call back function to utilize the value of the selected item"
        },
        {
          "name": "contentGutter",
          "type": "string",
          "description": "Specify the inline padding value on the inner content of the Tabs for horizontal orientation only"
        },
        {
          "name": "dividerColor",
          "type": "'00' | '00-alt' | '01' | '02' | '03'",
          "description": "Specify the border color of the divider component",
          "defaultValue": "03"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Tabs.",
          "source": "<Tabs {...args}>\n        <Tabs.Group>\n          <Tabs.Item value=\"item1\">Item one</Tabs.Item>\n          <Tabs.Item value=\"item2\">Item two</Tabs.Item>\n          <Tabs.Item value=\"item3\">Item three</Tabs.Item>\n          <Tabs.Item value=\"item4\">Item four</Tabs.Item>\n        </Tabs.Group>\n      </Tabs>"
        },
        {
          "name": "Orientation",
          "description": "Tabs support both `horizontal` and `vertical` options. Default orientation is `horizontal`.",
          "source": "<>\n        {['horizontal', 'vertical'].map(orientation => (\n          <Tabs\n            key={orientation}\n            orientation={orientation as 'horizontal' | 'vertical'}\n            {...args}\n          >\n            <Tabs.Group>\n              <Tabs.Item value=\"item1\">Item one</Tabs.Item>\n              <Tabs.Item value=\"item2\">Item two</Tabs.Item>\n              <Tabs.Item value=\"item3\">Item three</Tabs.Item>\n              <Tabs.Item value=\"item4\">Item four</Tabs.Item>\n            </Tabs.Group>\n          </Tabs>\n        ))}\n      </>"
        },
        {
          "name": "Divider",
          "description": "Set `divider` to `false` to remove the Divider.",
          "source": "<>\n      {['horizontal', 'vertical'].map(orientation => (\n        <Tabs\n          key={orientation}\n          orientation={orientation as 'horizontal' | 'vertical'}\n          divider={false}\n        >\n          <Tabs.Group>\n            <Tabs.Item value=\"item1\">Item one</Tabs.Item>\n            <Tabs.Item value=\"item2\">Item two</Tabs.Item>\n            <Tabs.Item value=\"item3\">Item three</Tabs.Item>\n            <Tabs.Item value=\"item4\">Item four</Tabs.Item>\n          </Tabs.Group>\n        </Tabs>\n      ))}\n    </>"
        },
        {
          "name": "With Icon",
          "description": "Pass `icon` to `Tabs.Item` to add icons to Tabs.",
          "source": "<>\n        {['horizontal', 'vertical'].map(orientation => (\n          <Tabs\n            key={orientation}\n            orientation={orientation as 'horizontal' | 'vertical'}\n          >\n            <Tabs.Group>\n              <Tabs.Item value=\"item1\" icon={<Satellite />}>\n                Item one\n              </Tabs.Item>\n              <Tabs.Item value=\"item2\" icon={<Satellite />}>\n                Item two\n              </Tabs.Item>\n              <Tabs.Item value=\"item3\" icon={<Satellite />}>\n                Item three\n              </Tabs.Item>\n              <Tabs.Item value=\"item4\" icon={<Satellite />}>\n                Item four\n              </Tabs.Item>\n            </Tabs.Group>\n          </Tabs>\n        ))}\n      </>"
        },
        {
          "name": "Icon Only",
          "description": "Pass `icon` to `Tabs.Item` to create icon only Tabs. Adding text to Tabs items is optional. If no `children` are passed,\nset `aria-label` to make the Tabs accessible to screen readers.\n\n> When `aria-label` is passed, the same value will also display as a Tooltip",
          "source": "<>\n        {['horizontal', 'vertical'].map(orientation => (\n          <Tabs\n            key={orientation}\n            orientation={orientation as 'horizontal' | 'vertical'}\n          >\n            <Tabs.Group>\n              <Tabs.Item\n                value=\"item1\"\n                icon={<Satellite />}\n                aria-label=\"Item one\"\n              ></Tabs.Item>\n              <Tabs.Item\n                value=\"item2\"\n                icon={<Satellite />}\n                aria-label=\"Item two\"\n              ></Tabs.Item>\n              <Tabs.Item\n                value=\"item3\"\n                icon={<Satellite />}\n                aria-label=\"Item three\"\n              ></Tabs.Item>\n              <Tabs.Item\n                value=\"item4\"\n                icon={<Satellite />}\n                aria-label=\"Item four\"\n              ></Tabs.Item>\n            </Tabs.Group>\n          </Tabs>\n        ))}\n      </>"
        },
        {
          "name": "Size",
          "description": "Tabs supports `md` and `lg` sizes. Default size is `md`.",
          "source": "const [orientation, setOrientation] = useState<'horizontal' | 'vertical'>(\n      'horizontal',\n    );\n\n    const handleOrientationChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      setOrientation(e.target.value as 'horizontal' | 'vertical');\n    };\n    return (\n      <>\n        <RadioButtonGroup orientation=\"horizontal\">\n          <RadioButton\n            type=\"radio\"\n            name=\"orientation\"\n            value=\"horizontal\"\n            label=\"Horizontal\"\n            defaultChecked\n            onChange={handleOrientationChange}\n          />\n          <RadioButton\n            type=\"radio\"\n            name=\"orientation\"\n            value=\"vertical\"\n            label=\"Vertical\"\n            onChange={handleOrientationChange}\n          />\n        </RadioButtonGroup>\n\n        <Box\n          style={{\n            display: 'flex',\n            flexDirection: 'column',\n            gap: orientation === 'horizontal' ? bmSemSpace150 : bmSemSpace400,\n          }}\n        >\n          <Tabs orientation={orientation}>\n            <Tabs.Group>\n              <Tabs.Item value=\"item1\" icon={<Satellite />}>\n                Medium tab\n              </Tabs.Item>\n              <Tabs.Item value=\"item2\" icon={<Satellite />}>\n                Medium tab\n              </Tabs.Item>\n              <Tabs.Item value=\"item3\" icon={<Satellite />}>\n                Medium tab\n              </Tabs.Item>\n              <Tabs.Item value=\"item4\" icon={<Satellite />}>\n                Medium tab\n              </Tabs.Item>\n            </Tabs.Group>\n          </Tabs>\n          <Tabs orientation={orientation} size=\"lg\">\n            <Tabs.Group>\n              <Tabs.Item value=\"item1\" icon={<Satellite />}>\n                Large tab\n              </Tabs.Item>\n              <Tabs.Item value=\"item2\" icon={<Satellite />}>\n                Large tab\n              </Tabs.Item>\n              <Tabs.Item value=\"item3\" icon={<Satellite />}>\n                Large tab\n              </Tabs.Item>\n              <Tabs.Item value=\"item4\" icon={<Satellite />}>\n                Large tab\n              </Tabs.Item>\n            </Tabs.Group>\n          </Tabs>\n        </Box>\n      </>\n    );"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` on a `Tabs.Item` to display a specific item in a disabled state.\nSet `disabled` to `true` on Tabs to display all items in a disabled state.",
          "source": "<Box style={{ display: 'flex', flexDirection: 'column', gap: bmSemSpace150 }}>\n        <Tabs>\n          <Tabs.Group>\n            <Tabs.Item value=\"item1\">Enabled tab</Tabs.Item>\n            <Tabs.Item value=\"item2\">Enabled tab</Tabs.Item>\n            <Tabs.Item value=\"item3\" disabled>\n              Disabled tab\n            </Tabs.Item>\n            <Tabs.Item value=\"item4\">Enabled tab</Tabs.Item>\n          </Tabs.Group>\n        </Tabs>\n        <Tabs disabled>\n          <Tabs.Group>\n            <Tabs.Item value=\"item1\">Disabled tab</Tabs.Item>\n            <Tabs.Item value=\"item2\">Disabled tab</Tabs.Item>\n            <Tabs.Item value=\"item3\">Disabled tab</Tabs.Item>\n            <Tabs.Item value=\"item4\">Disabled tab</Tabs.Item>\n          </Tabs.Group>\n        </Tabs>\n      </Box>"
        },
        {
          "name": "Fluid",
          "description": "Tab items display auto-with by default. Set `fluid` to `true` to display `Tabs.Items` as fluid.\n\n> `fluid` is only available for `horizontal` Tabs",
          "source": "<Box style={{ display: 'flex', flexDirection: 'column', gap: bmSemSpace150 }}>\n        <Tabs>\n          <Tabs.Group>\n            <Tabs.Item value=\"item1\">Item one</Tabs.Item>\n            <Tabs.Item value=\"item2\">Item two</Tabs.Item>\n            <Tabs.Item value=\"item3\">Item three</Tabs.Item>\n          </Tabs.Group>\n        </Tabs>\n        <Tabs fluid>\n          <Tabs.Group>\n            <Tabs.Item value=\"item1\">Item one</Tabs.Item>\n            <Tabs.Item value=\"item2\">Item two</Tabs.Item>\n            <Tabs.Item value=\"item3\">Item three</Tabs.Item>\n          </Tabs.Group>\n        </Tabs>\n      </Box>"
        },
        {
          "name": "Align With Content",
          "description": "When Tabs are confined within a container, the Tabs.Group including the Divider naturally aligns with surrounding left & right margins.",
          "source": "<>\n        <Box style={{ display: 'flex', flexDirection: 'column' }} gap=\"75\">\n          <Text color=\"secondary\" kind=\"body-md\">\n            Auto-width Tabs\n          </Text>\n          <Box\n            p={'150'}\n            style={{ display: 'flex', flexDirection: 'column' }}\n            backgroundColor={'00'}\n            borderRadius=\"md\"\n          >\n            <Box p={'150'} borderRadius=\"md\" backgroundColor={'01'}>\n              <Tabs>\n                <Tabs.Group>\n                  {planets.map(planet => (\n                    <Tabs.Item key={planet} value={planet}>\n                      {planet}\n                    </Tabs.Item>\n                  ))}\n                </Tabs.Group>\n                {planets.map(planet => (\n                  <Tabs.Panel key={planet} value={planet}>\n                    <Box\n                      backgroundColor={'00'}\n                      p={'150'}\n                      borderRadius=\"md\"\n                      style={{ height: '9.25rem' }}\n                    >\n                      {null}\n                    </Box>\n                  </Tabs.Panel>\n                ))}\n              </Tabs>\n            </Box>\n          </Box>\n        </Box>\n        <Box style={{ display: 'flex', flexDirection: 'column' }} gap=\"75\">\n          <Text color=\"secondary\" kind=\"body-md\">\n            Fluid Tabs\n          </Text>\n          <Box\n            p={'150'}\n            style={{ display: 'flex', flexDirection: 'column' }}\n            backgroundColor={'00'}\n            borderRadius=\"md\"\n          >\n            <Box p={'150'} borderRadius=\"md\" backgroundColor={'01'}>\n              <Tabs fluid>\n                <Tabs.Group>\n                  {planets.slice(0, 3).map(planet => (\n                    <Tabs.Item key={planet} value={planet}>\n                      {planet}\n                    </Tabs.Item>\n                  ))}\n                </Tabs.Group>\n                {planets.slice(0, 3).map(planet => (\n                  <Tabs.Panel key={planet} value={planet}>\n                    <Box\n                      backgroundColor={'00'}\n                      p={'150'}\n                      borderRadius=\"md\"\n                      style={{ height: '9.25rem' }}\n                    >\n                      {null}\n                    </Box>\n                  </Tabs.Panel>\n                ))}\n              </Tabs>\n            </Box>\n          </Box>\n        </Box>\n      </>"
        },
        {
          "name": "Full Width",
          "description": "When Tabs span the full width of the viewport, the left side of `Tabs.Group` should align to site\ncontent while the Divider extends the full width of the viewport.\n\n> Use Beam’s component spacing API to add side padding to `Tabs.Group`.",
          "source": "<Box\n        style={{ display: 'flex', flexDirection: 'column', gap: bmSemSpace150 }}\n        p={'150'}\n        borderRadius=\"md\"\n        backgroundColor={'00'}\n      >\n        <Box borderRadius=\"md\" pTop={'150'} backgroundColor=\"01\">\n          <Tabs contentGutter={`${bmSemSpace150}`}>\n            <Tabs.Group>\n              {planets.map(planet => (\n                <Tabs.Item key={planet} value={planet}>\n                  {planet}\n                </Tabs.Item>\n              ))}\n            </Tabs.Group>\n            {planets.map(planet => (\n              <Tabs.Panel key={planet} value={planet}>\n                <Box\n                  backgroundColor={'00'}\n                  borderRadius=\"md\"\n                  style={{\n                    height: '9.25rem',\n                    width: '100%',\n                    marginBottom: `${bmSemSpace150}`,\n                  }}\n                >\n                  {null}\n                </Box>\n              </Tabs.Panel>\n            ))}\n          </Tabs>\n        </Box>\n      </Box>"
        },
        {
          "name": "Max Width",
          "description": "It is possible to extend the divider full-width while keeping Tabs aligned to the primary content.\nUse `max-width` on `Tabs.Group` to align `max-width` Tabs to `max-width` content.",
          "source": "<Box\n        style={{ display: 'flex', flexDirection: 'column', gap: bmSemSpace150 }}\n        p={'150'}\n        borderRadius=\"md\"\n        backgroundColor={'00'}\n      >\n        <Box borderRadius=\"md\" pTop={'150'} backgroundColor=\"01\">\n          <Tabs contentGutter={`${bmSemSpace150}`}>\n            <Tabs.Group style={{ maxWidth: '29rem' }}>\n              {planets.map(planet => (\n                <Tabs.Item key={planet} value={planet}>\n                  {planet}\n                </Tabs.Item>\n              ))}\n            </Tabs.Group>\n            {planets.map(planet => (\n              <Tabs.Panel key={planet} value={planet}>\n                <Box\n                  backgroundColor={'00'}\n                  borderRadius=\"md\"\n                  style={{\n                    height: '9.25rem',\n                    maxWidth: '29rem',\n                    width: '100%',\n                    alignSelf: 'center',\n                    marginBottom: `${bmSemSpace150}`,\n                  }}\n                >\n                  {null}\n                </Box>\n              </Tabs.Panel>\n            ))}\n          </Tabs>\n        </Box>\n      </Box>"
        },
        {
          "name": "Overflow",
          "description": "Overflow behavior display left and right arrows for scrolling when there are too many items to fit in a container.\n\n> Once overflow is activated, left and right arrows do not display on touch devices. Overflow is only available for `horizontal` Tabs.",
          "source": "<Box\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: bmSemSpace150,\n          maxWidth: '34rem',\n          justifyContent: 'center',\n          alignSelf: 'center',\n        }}\n        p={'150'}\n        borderRadius=\"md\"\n        backgroundColor={'00'}\n      >\n        <Box borderRadius=\"md\" pTop={'150'} backgroundColor=\"01\">\n          <Tabs>\n            <Tabs.Group pBefore={'150'} pAfter={'150'}>\n              {planets.map(planet => (\n                <Tabs.Item key={planet} value={planet}>\n                  {planet}\n                </Tabs.Item>\n              ))}\n            </Tabs.Group>\n            {planets.map(planet => (\n              <Tabs.Panel\n                key={planet}\n                value={planet}\n                style={{\n                  padding: `0 ${bmSemSpace150} ${bmSemSpace150} ${bmSemSpace150}`,\n                }}\n              >\n                <Box\n                  backgroundColor={'00'}\n                  borderRadius=\"md\"\n                  style={{\n                    height: '9.25rem',\n                    width: '100%',\n                    alignSelf: 'center',\n                  }}\n                >\n                  {null}\n                </Box>\n              </Tabs.Panel>\n            ))}\n          </Tabs>\n        </Box>\n      </Box>"
        }
      ],
      "category": "Components",
      "displayName": "Tabs/Tabs",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Tabs/Tabs.Panel",
      "slug": "components-tabs-tabs-panel",
      "description": "Tabs.Panel allows Tabs to toggle between sets of grouped content.",
      "type": "component",
      "props": [
        {
          "name": "value",
          "type": "string",
          "description": "Specify the value of the panel",
          "required": true
        },
        {
          "name": "children",
          "type": "React.ReactNode",
          "description": "Specify the content of the panel",
          "required": true
        }
      ],
      "stories": [
        {
          "name": "Example",
          "description": "This example demonstrates how Tabs uses Tabs.Panel to toggle between unique sets of content.\nTabs.Panel provides a out of the box solution for integrating tab selection with corresponding tab content.\nUsing Tabs.Panel is optional.",
          "source": "const galaxies = [\n      {\n        name: 'Andromeda',\n        text: 'The Andromeda Galaxy is a barred spiral galaxy and is the nearest major galaxy to the Milky Way.',\n      },\n      {\n        name: \"Bode's Galaxy\",\n        text: 'Messier 81 is a grand design spiral galaxy about 12 million light-years away in the constellation Ursa Major.',\n      },\n      {\n        name: 'Milky Way',\n        text: 'The Milky Way, measures 100,000 light-years in diameter, and is thought to contain at least 100 billion stars.',\n      },\n      {\n        name: 'Sobrero Galaxy',\n        text: 'The Sombrero Galaxy is a peculiar galaxy of unclear classification in the constellation borders of Virgo and Corvus',\n      },\n    ];\n\n    const planets = [\n      {\n        name: 'Jupiter',\n        text: 'Jupiter is the fifth planet from the Sun and the largest in the Solar System.',\n      },\n      {\n        name: 'Mercury',\n        text: 'Mercury is the first planet from the Sun and the smallest in the Solar System.',\n      },\n      {\n        name: 'Saturn',\n        text: 'Saturn is the sixth planet from the Sun and the second largest in the Solar System, after Jupiter.',\n      },\n      {\n        name: 'Venus',\n        text: 'Venus is the second planet from the Sun and is the closest in size to its orbital neighbor Earth.',\n      },\n    ];\n\n    // callisto, europa, moon, titan, triton\n    const moons = [\n      {\n        name: 'Callisto',\n        text: 'Callisto, or Jupiter IV, is the second-largest moon of Jupiter, after Ganymede.',\n      },\n      {\n        name: 'Europa',\n        text: 'Europa, or Jupiter II, is the smallest of the four Galilean moons orbiting Jupiter.',\n      },\n      {\n        name: 'Moon',\n        text: \"The Moon is Earth's only natural satellite, orbiting at an average distance of 384399 km.\",\n      },\n      {\n        name: 'Titan',\n        text: 'Titan is the largest moon of Saturn and the second-largest in the Solar System.',\n      },\n    ];\n\n    return (\n      <Box\n        style={{ display: 'flex', flexDirection: 'column', gap: bmSemSpace150 }}\n        p={'150'}\n        borderRadius=\"md\"\n        backgroundColor={'00'}\n      >\n        <Box borderRadius=\"md\" p={'150'} backgroundColor=\"01\">\n          <Tabs>\n            <Tabs.Group>\n              <Tabs.Item value=\"galaxies\">Galaxies</Tabs.Item>\n              <Tabs.Item value=\"planets\">Planets</Tabs.Item>\n              <Tabs.Item value=\"moons\">Moons</Tabs.Item>\n            </Tabs.Group>\n\n            <Tabs.Panel value=\"galaxies\">\n              <Box\n                style={{\n                  display: 'flex',\n                  flexDirection: 'column',\n                  gap: bmSemSpace150,\n                }}\n              >\n                {galaxies.map(galaxy => (\n                  <Box\n                    key={galaxy.name}\n                    backgroundColor={'00'}\n                    borderRadius=\"md\"\n                    p={'100'}\n                    gap={'25'}\n                    style={{\n                      display: 'flex',\n                      flexDirection: 'column',\n                    }}\n                  >\n                    <Text kind=\"label-lg\">{galaxy.name}</Text>\n                    <Text kind=\"body-sm\">{galaxy.text}</Text>\n                  </Box>\n                ))}\n              </Box>\n            </Tabs.Panel>\n\n            <Tabs.Panel value=\"planets\">\n              <Box\n                style={{\n                  display: 'flex',\n                  flexDirection: 'column',\n                  gap: bmSemSpace150,\n                }}\n              >\n                {planets.map(planet => (\n                  <Box\n                    key={planet.name}\n                    backgroundColor={'00'}\n                    borderRadius=\"md\"\n                    p={'100'}\n                    gap={'25'}\n                    style={{\n                      display: 'flex',\n                      flexDirection: 'column',\n                    }}\n                  >\n                    <Text kind=\"label-lg\">{planet.name}</Text>\n                    <Text kind=\"body-sm\">{planet.text}</Text>\n                  </Box>\n                ))}\n              </Box>\n            </Tabs.Panel>\n\n            <Tabs.Panel value=\"moons\">\n              <Box\n                style={{\n                  display: 'flex',\n                  flexDirection: 'column',\n                  gap: bmSemSpace150,\n                }}\n              >\n                {moons.map(moon => (\n                  <Box\n                    key={moon.name}\n                    backgroundColor={'00'}\n                    borderRadius=\"md\"\n                    p={'100'}\n                    gap={'25'}\n                    style={{\n                      display: 'flex',\n                      flexDirection: 'column',\n                    }}\n                  >\n                    <Text kind=\"label-lg\">{moon.name}</Text>\n                    <Text kind=\"body-sm\">{moon.text}</Text>\n                  </Box>\n                ))}\n              </Box>\n            </Tabs.Panel>\n          </Tabs>\n        </Box>\n      </Box>\n    );"
        }
      ],
      "category": "Components",
      "displayName": "Tabs/Tabs.Panel",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Tabs/Tabs.Item",
      "slug": "components-tabs-tabs-item",
      "description": "Tabs.Item is a child component of Tabs that represents a single item within a group of items.",
      "type": "component",
      "props": [
        {
          "name": "value",
          "type": "string",
          "description": "Specify the value of the item",
          "required": true
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if an item is disabled",
          "defaultValue": "false"
        },
        {
          "name": "icon",
          "type": "React.ReactNode",
          "description": "Specify an icon for an item"
        },
        {
          "name": "children",
          "type": "React.ReactNode",
          "description": "Specify text for an item"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Tabs.Item.",
          "source": "<Tabs divider={false}>\n        <Tabs.Group>\n          <Tabs.Item value=\"item1\" disabled={disabled}>\n            Item one\n          </Tabs.Item>\n        </Tabs.Group>\n      </Tabs>"
        },
        {
          "name": "With Icon",
          "description": "Pass `icon` to `Tabs.Item` to add an icon to a tab.",
          "source": "<Tabs divider={false}>\n        <Tabs.Group>\n          <Tabs.Item value=\"item1\" icon={<Satellite />}>\n            Item one\n          </Tabs.Item>\n        </Tabs.Group>\n      </Tabs>"
        },
        {
          "name": "Icon Only",
          "description": "Pass `icon` to `Tabs.Item` to create an icon only segment. Adding text to an item is optional.\nIf `children` is not passed, set `aria-label` to make the item accessible for screen readers.\n\n> When `aria-label` is passed, the same value will also display as a Tooltip",
          "source": "<Tabs divider={false}>\n        <Tabs.Group>\n          <Tabs.Item\n            value=\"item1\"\n            icon={<Satellite />}\n            aria-label=\"Item one\"\n          ></Tabs.Item>\n        </Tabs.Group>\n      </Tabs>"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` on a `Tab.Item` to display a specific item in a disabled state.",
          "source": "<Tabs divider={false}>\n        <Tabs.Group>\n          <Tabs.Item value=\"item1\" icon={<Satellite />} disabled>\n            Disabled\n          </Tabs.Item>\n        </Tabs.Group>\n      </Tabs>"
        }
      ],
      "category": "Components",
      "displayName": "Tabs/Tabs.Item",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Tabs/Tabs.Group",
      "slug": "components-tabs-tabs-group",
      "description": "Tabs.Group is a child component of Tabs that represents a group of items.",
      "type": "component",
      "props": [
        {
          "name": "children",
          "type": "ReactElement<TabsItemProps, string | JSXElementConstructor<any>> | ReactElement<TabsItemProps, string | JSXElementConstructor<...>>[]",
          "description": "Specify the items for the group",
          "required": true
        },
        {
          "name": "backgroundColor",
          "type": "'positive' | 'warning' | 'negative' | 'inverse' | 'selected' | 'expressive' | '00' | '00-alt' | '01' | '02' | '03' | 'info-primary' | 'info-secondary' | 'positive-strong' | 'warning-strong' | 'negative-strong' | 'info-primary-strong' | 'info-secondary-strong' | 'selected-subtle' | 'highlight' | 'transparent' | 'expressive-stronger' | 'expressive-inverse'",
          "description": "Specify the background color of a Box"
        },
        {
          "name": "borderColor",
          "type": "'positive' | 'warning' | 'negative' | 'inverse' | 'selected' | 'expressive' | 'focus' | '00' | '00-alt' | '01' | '02' | '03' | 'info-primary' | 'info-secondary' | 'positive-strong' | 'warning-strong' | 'negative-strong' | 'info-primary-strong' | 'info-secondary-strong' | 'transparent' | 'expressive-stronger' | 'strong'",
          "description": "Specify the border color of a Box"
        },
        {
          "name": "borderWidth",
          "type": "'md' | 'lg' | 'xl' | 'none' | 'divider'",
          "description": "Specify the border width of a Box"
        },
        {
          "name": "borderRadius",
          "type": "'xs' | 'sm' | 'md' | 'lg' | 'none' | 'round'",
          "description": "Specify the border radius of a Box"
        },
        {
          "name": "as",
          "type": "React.ElementType",
          "description": "Specify the HTML element type of a Box",
          "defaultValue": "'div'"
        },
        {
          "name": "shadow",
          "type": "'sm' | 'md' | 'lg' | 'none' | 'overlay'",
          "description": "Specify if a Box has a shadow"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of a Box"
        },
        {
          "name": "p",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify all padding"
        },
        {
          "name": "m",
          "type": "any",
          "description": "Specify all margin"
        },
        {
          "name": "px",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify before and after padding"
        },
        {
          "name": "py",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify top and bottom padding"
        },
        {
          "name": "pTop",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify top padding"
        },
        {
          "name": "pBottom",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify bottom padding"
        },
        {
          "name": "pBefore",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify before padding"
        },
        {
          "name": "pAfter",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify after padding"
        },
        {
          "name": "mx",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify before and after margin"
        },
        {
          "name": "my",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify top and bottom margin"
        },
        {
          "name": "mTop",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify top margin"
        },
        {
          "name": "mBottom",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify bottom margin"
        },
        {
          "name": "mBefore",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify before margin"
        },
        {
          "name": "mAfter",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify after margin"
        },
        {
          "name": "gap",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify gap between child elements"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Tabs.Group.",
          "source": "<Tabs divider={false}>\n        <Tabs.Group>\n          <Tabs.Item value=\"item1\">Item one</Tabs.Item>\n          <Tabs.Item value=\"item2\">Item two</Tabs.Item>\n          <Tabs.Item value=\"item3\">Item three</Tabs.Item>\n          <Tabs.Item value=\"item4\">Item four</Tabs.Item>\n        </Tabs.Group>\n      </Tabs>"
        }
      ],
      "category": "Components",
      "displayName": "Tabs/Tabs.Group",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Forms/Switch/Switch",
      "slug": "forms-switch-switch",
      "description": "A switch serves as a simple on/off toggle, allowing users to apply immediate decisions.",
      "type": "component",
      "props": [
        {
          "name": "onText",
          "type": "React.ReactNode",
          "description": "Specify a side label for the “on” position. If onText is not specified, side label defaults to offText value."
        },
        {
          "name": "offText",
          "type": "React.ReactNode",
          "description": "Specify a side label for the “off” position. If offText is not specified, side label defaults to onText value."
        },
        {
          "name": "textPosition",
          "type": "'before' | 'after'",
          "description": "Specify the position of the side label",
          "defaultValue": "'after'"
        },
        {
          "name": "readOnly",
          "type": "boolean",
          "description": "Specify if Switch displays in a read-only state",
          "defaultValue": "false"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if Switch displays in a disabled state",
          "defaultValue": "false"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the Alert. By default it inherits the theme from the parent"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Switch.",
          "source": "<Switch {...args} />"
        },
        {
          "name": "Side Labels",
          "description": "Displaying a side label is optional. Pass `onText` do display a side label next to the Switch. If `offText` is not specified, the side label will default to the `onText` value and vise versa.",
          "source": "<>\n      <Switch id=\"no-side-label\" name=\"side-label\" aria-label=\"no-side-label\" />\n      <Switch onText=\"On\" offText=\"Off\" id=\"two-side-labels\" name=\"side-label\" />\n      <Switch\n        defaultChecked={true}\n        onText=\"Notify me when my data is going low\"\n        id=\"one-side-label\"\n        name=\"side-label\"\n      />\n    </>"
        },
        {
          "name": "Side Label Position",
          "description": "Use `textPosition` to display side label before the Switch. Default position is `after`.",
          "source": "<>\n        <Switch\n          textPosition=\"after\"\n          onText=\"Text after\"\n          id=\"text-position-after\"\n          name=\"text-position\"\n        />\n        <Switch\n          textPosition=\"before\"\n          onText=\"Text before\"\n          id=\"text-position-before\"\n          name=\"text-position\"\n        />\n      </>"
        },
        {
          "name": "Read Only",
          "description": "Set `readOnly` to `true` to display Switch in a read only state.",
          "source": "<>\n      <Switch\n        readOnly\n        defaultChecked\n        onText=\"Read only on\"\n        offText=\"Read only off\"\n        id=\"read-only-switch-on\"\n        name=\"read-only\"\n      />\n      <Switch\n        readOnly\n        onText=\"Read only on\"\n        offText=\"Read only off\"\n        id=\"read-only-switch-off\"\n        name=\"read-only\"\n      />\n    </>"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` to display Switch in a disabled state.",
          "source": "<>\n      <Switch\n        disabled\n        defaultChecked\n        onText=\"Disabled on\"\n        offText=\"Disabled off\"\n        id=\"disabled-switch-on\"\n        name=\"disabled\"\n      />\n      <Switch\n        disabled\n        onText=\"Disabled on\"\n        offText=\"Disabled off\"\n        id=\"disabled-switch-off\"\n        name=\"disabled\"\n      />\n    </>"
        }
      ],
      "category": "Forms",
      "displayName": "Switch/Switch",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Stepper/Stepper",
      "slug": "components-stepper-stepper",
      "description": "A stepper guides users through the steps of a task in sequential order.",
      "type": "component",
      "props": [
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the Stepper. By default it inherits the theme from the parent"
        },
        {
          "name": "orientation",
          "type": "'horizontal' | 'vertical'",
          "description": "Specify the orientation of the Stepper",
          "defaultValue": "StepperOrientations.Horizontal"
        },
        {
          "name": "children",
          "type": "ReactNode",
          "description": "Provide steps to Stepper",
          "required": true
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Stepper.",
          "source": "<Stepper orientation={args.orientation}>\n        <Stepper.Step\n          status={StepperStatuses.Current}\n          markerContent=\"1\"\n          heading=\"First Step\"\n        />\n        <Stepper.Step\n          status={StepperStatuses.Incomplete}\n          markerContent=\"2\"\n          heading=\"Middle Step\"\n        />\n        <Stepper.Step\n          status={StepperStatuses.Incomplete}\n          markerContent=\"3\"\n          heading=\"Middle Step\"\n        />\n        <Stepper.Step\n          status={StepperStatuses.Incomplete}\n          markerContent=\"4\"\n          heading=\"Last Step\"\n        />\n      </Stepper>"
        },
        {
          "name": "With Heading",
          "description": "Pass `heading` prop to Stepper.Step to show the heading under each step. Adding a `heading` is recommended if space allows.",
          "source": "<Stepper orientation={args.orientation}>\n        <Stepper.Step\n          status={StepperStatuses.Current}\n          markerContent=\"1\"\n          heading=\"Heading\"\n        />\n        <Stepper.Step\n          status={StepperStatuses.Incomplete}\n          markerContent=\"2\"\n          heading=\"Heading\"\n        />\n        <Stepper.Step\n          status={StepperStatuses.Incomplete}\n          markerContent=\"3\"\n          heading=\"Heading\"\n        />\n        <Stepper.Step\n          status={StepperStatuses.Incomplete}\n          markerContent=\"4\"\n          heading=\"Heading\"\n        />\n      </Stepper>"
        },
        {
          "name": "With Body",
          "description": "Pass `children` prop to Stepper.Step to display optional secondary text if additional description is needed.\n\n> Body text will not display if a `heading` has not been provided.",
          "source": "<Stepper orientation={args.orientation}>\n        <Stepper.Step\n          status={StepperStatuses.Current}\n          markerContent=\"1\"\n          heading=\"Heading\"\n        >\n          Body text\n        </Stepper.Step>\n        <Stepper.Step\n          status={StepperStatuses.Incomplete}\n          markerContent=\"2\"\n          heading=\"Heading\"\n        >\n          Body text\n        </Stepper.Step>\n        <Stepper.Step\n          status={StepperStatuses.Incomplete}\n          markerContent=\"3\"\n          heading=\"Heading\"\n        >\n          Body text\n        </Stepper.Step>\n\n        <Stepper.Step\n          status={StepperStatuses.Incomplete}\n          markerContent=\"4\"\n          heading=\"Heading\"\n        >\n          Body text\n        </Stepper.Step>\n      </Stepper>"
        },
        {
          "name": "Kind",
          "description": "Stepper supports `marker`, `number`, and `icon` options. Default kind is `marker`.\n\n> Kind is set automatically when numbers or icons are passed to Stepper.Step.",
          "source": "<Box style={{ display: 'flex', flexDirection: 'column', gap: bmSemSpace500 }}>\n        <Stepper orientation={args.orientation}>\n          <Stepper.Step status={StepperStatuses.Current} aria-label=\"1\" />\n          <Stepper.Step status={StepperStatuses.Incomplete} aria-label=\"2\" />\n          <Stepper.Step status={StepperStatuses.Incomplete} aria-label=\"3\" />\n          <Stepper.Step status={StepperStatuses.Incomplete} aria-label=\"4\" />\n        </Stepper>\n        <Stepper orientation={args.orientation}>\n          <Stepper.Step status={StepperStatuses.Current} markerContent=\"1\" />\n          <Stepper.Step status={StepperStatuses.Incomplete} markerContent=\"2\" />\n          <Stepper.Step status={StepperStatuses.Incomplete} markerContent=\"3\" />\n          <Stepper.Step status={StepperStatuses.Incomplete} markerContent=\"4\" />\n        </Stepper>\n        <Stepper orientation={args.orientation}>\n          <Stepper.Step\n            status={StepperStatuses.Current}\n            markerContent={<Icon icon={Satellite} />}\n            aria-label=\"1\"\n          />\n          <Stepper.Step\n            status={StepperStatuses.Incomplete}\n            markerContent={<Icon icon={Satellite} />}\n            aria-label=\"2\"\n          />\n          <Stepper.Step\n            status={StepperStatuses.Incomplete}\n            markerContent={<Icon icon={Satellite} />}\n            aria-label=\"3\"\n          />\n          <Stepper.Step\n            status={StepperStatuses.Incomplete}\n            markerContent={<Icon icon={Satellite} />}\n            aria-label=\"4\"\n          />\n        </Stepper>\n      </Box>"
        },
        {
          "name": "Status",
          "description": "Stepper.Step supports `complete`, `current`, `incomplete` and `error` statuses. Default status is `incomplete`.",
          "source": "<Stepper orientation={args.orientation}>\n        <Stepper.Step\n          status={StepperStatuses.Complete}\n          markerContent=\"1\"\n          heading=\"Complete\"\n          aria-label=\"1\"\n        />\n        <Stepper.Step\n          status={StepperStatuses.Current}\n          markerContent=\"2\"\n          heading=\"Current\"\n          aria-label=\"2\"\n        />\n        <Stepper.Step\n          status={StepperStatuses.Incomplete}\n          markerContent=\"3\"\n          heading=\"Incomplete\"\n          aria-label=\"3\"\n        />\n      </Stepper>"
        },
        {
          "name": "Error",
          "description": "Use error status to display Stepper.Step in an error state.\n\n> It’s recommended that error status is only used on the active step to notify the user of current errors.",
          "source": "<Stepper orientation={args.orientation}>\n        <Stepper.Step\n          status={StepperStatuses.Complete}\n          markerContent=\"1\"\n          heading=\"First Step\"\n          aria-label=\"1\"\n        />\n        <Stepper.Step\n          status={StepperStatuses.Error}\n          markerContent=\"2\"\n          heading=\"Middle Step\"\n          aria-label=\"2\"\n        />\n        <Stepper.Step\n          status={StepperStatuses.Incomplete}\n          markerContent=\"3\"\n          heading=\"Last Step\"\n          aria-label=\"3\"\n        />\n      </Stepper>"
        },
        {
          "name": "Orientation",
          "description": "Stepper defaults to `horizontal`, but also offers a `vertical` option.\n\n> For `vertical` orientation, pass children to Stepper.Step to provide custom content for each step. `heading` is required for all vertical steps.",
          "source": "const [orientation, setOrientation] = useState<string>(\n      args.orientation || 'horizontal',\n    );\n    return (\n      <>\n        <RadioButtonGroup\n          orientation=\"horizontal\"\n          onChange={(e: React.FormEvent<HTMLFieldSetElement>) => {\n            setOrientation((e.target as HTMLInputElement).value);\n          }}\n          style={{ marginBottom: bmSemSpace500 }}\n        >\n          <RadioButton\n            id=\"horizontal\"\n            label=\"Horizontal\"\n            name=\"orientation\"\n            value=\"horizontal\"\n            defaultChecked={orientation === 'horizontal'}\n          />\n          <RadioButton\n            id=\"vertical\"\n            label=\"Vertical\"\n            name=\"orientation\"\n            value=\"vertical\"\n            defaultChecked={orientation === 'vertical'}\n          />\n        </RadioButtonGroup>\n        <Stepper orientation={orientation as StepperOrientation}>\n          <Stepper.Step\n            status={StepperStatuses.Current}\n            markerContent=\"1\"\n            heading=\"First Step\"\n          />\n          <Stepper.Step\n            status={StepperStatuses.Incomplete}\n            markerContent=\"2\"\n            heading=\"Middle Step\"\n          />\n          <Stepper.Step\n            status={StepperStatuses.Incomplete}\n            markerContent=\"3\"\n            heading=\"Middle Step\"\n          />\n          <Stepper.Step\n            status={StepperStatuses.Incomplete}\n            markerContent=\"4\"\n            heading=\"Last Step\"\n          />\n        </Stepper>\n      </>\n    );"
        },
        {
          "name": "Clickable Steps",
          "description": "Use `onClick` to make Stepper.Step interactive.\n\n> There are 3 options for making a Stepper interactive:\n> 1. Use the UI components and self-manage the state of the Stepper by passing the onClick prop to each Stepper.Step.\n> 2. Recommended: Use the `useBeamStepper` hook and the exposed `getStatus`, `goToStep`, `goToNextStep`, `goToPrevStep`, functions to simplify the Stepper's state management. The `useBeamStepper` hook is powered by [stepperize/react](https://www.npmjs.com/package/@stepperize/react).\n> 3. Advanced mode: Use the `useBeamStepper` hook but rely on the stepperize library to get access to extended functionality.",
          "source": "const steps = [\n      {\n        id: '1',\n        markerContent: '1',\n        heading: 'First Step',\n        status: StepperStatuses.Complete,\n      },\n      {\n        id: '2',\n        markerContent: '2',\n        heading: 'Middle Step',\n        status: StepperStatuses.Incomplete,\n      },\n      {\n        id: '3',\n        markerContent: '3',\n        heading: 'Last Step',\n        status: StepperStatuses.Incomplete,\n      },\n    ];\n    const { Stepper, all, goToStep, getStatus } = useBeamStepper(steps, {\n      initialStep: '1',\n      skipSteps: true,\n    });\n\n    return (\n      <Stepper orientation={args.orientation}>\n        {all.map(step => (\n          <Stepper.Step\n            key={step.id}\n            status={getStatus(step.id)}\n            markerContent={step.markerContent}\n            heading={step.heading}\n            onClick={() => {\n              goToStep(step.id);\n            }}\n          />\n        ))}\n      </Stepper>\n    );"
        },
        {
          "name": "Horizontal Example",
          "description": "Use page level actions to guide users through each step of the horizontal Stepper.",
          "source": "const steps = [\n      {\n        id: '1',\n        markerContent: '1',\n        heading: 'First Step',\n        status: StepperStatuses.Complete,\n      },\n      {\n        id: '2',\n        markerContent: '2',\n        heading: 'Middle Step',\n        status: StepperStatuses.Incomplete,\n      },\n      {\n        id: '3',\n        markerContent: '3',\n        heading: 'Middle Step',\n        status: StepperStatuses.Incomplete,\n      },\n      {\n        id: '4',\n        markerContent: '4',\n        heading: 'Middle Step',\n        status: StepperStatuses.Incomplete,\n      },\n    ];\n    const {\n      Stepper,\n      all,\n      current,\n      utils: { getLast, getFirst },\n      resetStepper,\n      goToStep,\n      goToNextStep,\n      goToPrevStep,\n      getStatus,\n      when,\n    } = useBeamStepper(steps, {\n      initialStep: '1',\n      skipSteps: true,\n    });\n\n    const last = getLast();\n    const first = getFirst();\n\n    return (\n      <>\n        <Stepper\n          orientation={args.orientation}\n          style={{ marginBottom: bmSemSpace200 }}\n        >\n          {all.map(step => {\n            const stepStatus = getStatus(step.id);\n            return (\n              <Stepper.Step\n                key={step.id}\n                status={stepStatus}\n                markerContent={step.markerContent}\n                heading={step.heading}\n                onClick={\n                  stepStatus === StepperStatuses.Complete\n                    ? () => goToStep(step.id)\n                    : undefined\n                }\n              />\n            );\n          })}\n        </Stepper>\n        <Box mBottom=\"200\">\n          {all.map(step => {\n            return when(step.id, () => (\n              <Box\n                key={step.id}\n                backgroundColor=\"02\"\n                borderRadius=\"md\"\n                py=\"400\"\n                style={{\n                  display: 'flex',\n                  justifyContent: 'center',\n                  alignItems: 'center',\n                }}\n              >\n                <Text color=\"secondary\">Page {step.id} content</Text>\n              </Box>\n            ));\n          })}\n        </Box>\n        <Box\n          style={{ display: 'flex', gap: bmSemSpace75, justifyContent: 'end' }}\n          mBottom=\"200\"\n        >\n          {![first.id, last.id].includes(current.id) && (\n            <Button kind=\"outline\" onClick={goToPrevStep}>\n              Previous\n            </Button>\n          )}\n          {current.id !== last.id && <Button onClick={goToNextStep}>Next</Button>}\n          {current.id === last.id && <Button onClick={resetStepper}>Reset</Button>}\n        </Box>\n      </>\n    );"
        },
        {
          "name": "Vertical Example",
          "description": "Use `children` to add content and actions to each step of the `vertical` Stepper.",
          "source": "const steps = [\n      {\n        id: '1',\n        markerContent: '1',\n        heading: 'First Step',\n        status: StepperStatuses.Complete,\n      },\n      {\n        id: '2',\n        markerContent: '2',\n        heading: 'Middle Step',\n        status: StepperStatuses.Incomplete,\n      },\n      {\n        id: '3',\n        markerContent: '3',\n        heading: 'Middle Step',\n        status: StepperStatuses.Incomplete,\n      },\n      {\n        id: '4',\n        markerContent: '4',\n        heading: 'Middle Step',\n        status: StepperStatuses.Incomplete,\n      },\n    ];\n    const {\n      Stepper,\n      all,\n      current,\n      when,\n      utils: { getLast, getFirst },\n      resetStepper,\n      goToStep,\n      goToNextStep,\n      goToPrevStep,\n      getStatus,\n    } = useBeamStepper(steps, {\n      initialStep: '1',\n      skipSteps: true,\n    });\n\n    const last = getLast();\n    const first = getFirst();\n\n    return (\n      <Stepper\n        orientation={StepperOrientations.Vertical}\n        style={{ marginBottom: bmSemSpace200 }}\n      >\n        {all.map(step => {\n          const stepStatus = getStatus(step.id);\n          return (\n            <Stepper.Step\n              key={step.id}\n              status={stepStatus}\n              markerContent={step.markerContent}\n              heading={step.heading}\n              onClick={\n                stepStatus === StepperStatuses.Complete\n                  ? () => goToStep(step.id)\n                  : undefined\n              }\n            >\n              {when(step.id, () => (\n                <>\n                  <Box\n                    backgroundColor=\"02\"\n                    borderRadius=\"md\"\n                    mBottom=\"100\"\n                    py=\"400\"\n                    style={{\n                      display: 'flex',\n                      justifyContent: 'center',\n                      alignItems: 'center',\n                      flexGrow: 1,\n                    }}\n                  >\n                    <Text color=\"secondary\">Step {step.id} content</Text>\n                  </Box>\n                  <Box\n                    style={{\n                      display: 'flex',\n                      gap: bmSemSpace75,\n                      justifyContent: 'start',\n                    }}\n                  >\n                    {![first.id, last.id].includes(current.id) && (\n                      <Button kind=\"outline\" onClick={goToPrevStep}>\n                        Previous\n                      </Button>\n                    )}\n                    {current.id !== last.id && (\n                      <Button onClick={goToNextStep}>Next</Button>\n                    )}\n                    {current.id === last.id && (\n                      <Button onClick={resetStepper}>Reset</Button>\n                    )}\n                  </Box>\n                </>\n              ))}\n            </Stepper.Step>\n          );\n        })}\n      </Stepper>\n    );"
        }
      ],
      "category": "Components",
      "displayName": "Stepper/Stepper",
      "importPath": "@viasat/beam-react",
      "pairedHooks": [
        {
          "name": "useBeamStepper",
          "kind": "hook",
          "signature": "useBeamStepper(steps: Step[], config: Config): { utils: Utils<Step[]>; resetStepper: () => void; getStatus: (stepId: string) => any; goToStep: (stepId: string) => void; goToNextStep: () => void | null; goToPrevStep: () => void | null; ... 22 more ...; Stepper: { ...; }; }",
          "params": [
            {
              "name": "steps",
              "type": "Step[]"
            },
            {
              "name": "config",
              "type": "Config"
            }
          ],
          "returns": "{ utils: Utils<Step[]>; resetStepper: () => void; getStatus: (stepId: string) => any; goToStep: (stepId: string) => void; goToNextStep: () => void | null; goToPrevStep: () => void | null; ... 22 more ...; Stepper: { ...; }; }",
          "description": "Initialize a Stepper from your `steps` and `config`, then destructure the returned\n`Stepper` component and helpers and render them: `const { Stepper, all, getStatus,\ngoToNextStep, goToPrevStep } = useBeamStepper(steps, config);` then render `<Stepper>`\nwith a `<Stepper.Step>` per step (e.g. `all.map(s => <Stepper.Step status={getStatus(s.id)} />)`)\nand advance with `goToNextStep()` / `goToPrevStep()` / `goToStep(id)`.",
          "importPath": "@viasat/beam-react"
        }
      ]
    },
    {
      "title": "Components/Stepper/Stepper.Step",
      "slug": "components-stepper-stepper-step",
      "description": "Stepper.Step is a child component of Stepper that represents a single item within a Stepper.",
      "type": "component",
      "props": [
        {
          "name": "heading",
          "type": "ReactNode",
          "description": "Specify the heading text for Stepper"
        },
        {
          "name": "children",
          "type": "ReactNode",
          "description": "Specify the body text for horizontal Stepper or custom content for vertical Stepper"
        },
        {
          "name": "markerContent",
          "type": "ReactNode",
          "description": "Specify icons or numbers for the marker"
        },
        {
          "name": "onClick",
          "type": "(event: MouseEvent<Element, MouseEvent>) => void",
          "description": "Specify if step is interactive"
        },
        {
          "name": "status",
          "type": "'error' | 'incomplete' | 'current' | 'complete'",
          "description": "Specify the status of a step"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Step.",
          "source": "<StepperStep {...args} />"
        }
      ],
      "category": "Components",
      "displayName": "Stepper/Stepper.Step",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Spinner",
      "slug": "components-spinner",
      "description": "Spinner give users visual feedback that their request is being processed.",
      "type": "component",
      "props": [
        {
          "name": "size",
          "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'",
          "description": "Specify the size of the spinner",
          "defaultValue": "md"
        },
        {
          "name": "value",
          "type": "number | undefined",
          "description": "Specify if a spinner is determinate by setting a value",
          "defaultValue": "undefined"
        },
        {
          "name": "showPercentage",
          "type": "boolean",
          "description": "Specify if a percentage displays with the Spinner",
          "defaultValue": "undefined"
        },
        {
          "name": "heading",
          "type": "ReactNode",
          "description": "Specify the heading text for Spinner",
          "defaultValue": "undefined"
        },
        {
          "name": "body",
          "type": "ReactNode",
          "description": "Specify the body text for Spinner",
          "defaultValue": "undefined"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the Spinner. By default it inherits the theme from the parent"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Spinner.",
          "source": "<Spinner {...args} />"
        },
        {
          "name": "With Heading",
          "description": "Use `heading` to add heading text to the Spinner.",
          "source": "<Spinner heading={defaultText} />"
        },
        {
          "name": "Indeterminate",
          "description": "An indeterminate spinner should be used when download time can not be estimated. The default Spinner is `indeterminate`.",
          "source": "<Spinner heading={defaultText} />"
        },
        {
          "name": "Determinate",
          "description": "A determinate spinner should be used when download time can be estimated. Pass a value to the Spinner to make it `determinate`.",
          "source": "const { size, showPercentage } = args;\n    const [value, setValue] = useState<number>(0);\n    useEffect(() => determinateAnimation(value, setValue), [value]);\n\n    return (\n      <Spinner\n        value={value}\n        size={size}\n        heading=\"Loading...\"\n        showPercentage={showPercentage}\n      />\n    );"
        },
        {
          "name": "Inline",
          "description": "Set `size` to `xs` for an inline spinner.",
          "source": "<Spinner heading={defaultText} size=\"xs\" />"
        },
        {
          "name": "Show Percentage",
          "description": "Set `showPercentage` to `true` to add a percentage counter to a `determinate` Spinner.",
          "source": "<div\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: bmSemSpace500,\n        justifyContent: 'space-between',\n      }}\n    >\n      <Spinner size=\"xs\" {...args} />\n      <Spinner size=\"md\" {...args} />\n    </div>"
        },
        {
          "name": "Size",
          "description": "Spinner supports `xxs`, `xs`, `sm`, `md`, and `lg`. Default size is `md`.\n\n> Use `xxs` Spinner with inline elements that require a compact progress indictor.",
          "source": "<>\n        {spinnerSizes.map(size => (\n          <Spinner size={size} {...args} />\n        ))}\n      </>"
        },
        {
          "name": "With Body",
          "description": "Use `body` to add body text to the Spinner.",
          "source": "<>\n        <Spinner size=\"xxs\" {...args} />\n        <Spinner size=\"xs\" {...args} />\n        <Spinner size=\"md\" {...args} />\n      </>"
        }
      ],
      "category": "Components",
      "displayName": "Spinner",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Forms/Slider",
      "slug": "forms-slider",
      "description": "A slider allows users to select a value from a predefined range by dragging a handle along a track.",
      "type": "component",
      "props": [
        {
          "name": "value",
          "type": "number | [number, number]",
          "description": "The value of the Slider (controlled mode)\nThe value of the Slider (controlled mode). [min, max]"
        },
        {
          "name": "defaultValue",
          "type": "number | [number, number]",
          "description": "Specify the initial value of the Slider\nSpecify the initial value of the Slider. [min, max]"
        },
        {
          "name": "onChange",
          "type": "((value: number) => void) | ((value: [number, number]) => void)",
          "description": "Callback fired when the value changes"
        },
        {
          "name": "range",
          "type": "[number, number]",
          "description": "Specify the range of the Slider, minimum and maximum values",
          "defaultValue": "[0, 100]"
        },
        {
          "name": "label",
          "type": "ReactNode",
          "description": "Specify the label for the Slider"
        },
        {
          "name": "readOnly",
          "type": "boolean",
          "description": "Specify whether the Slider is read-only",
          "defaultValue": "false"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify whether the Slider is disabled",
          "defaultValue": "false"
        },
        {
          "name": "step",
          "type": "number",
          "description": "Specify the step value of the Slider",
          "defaultValue": "1"
        },
        {
          "name": "className",
          "type": "string",
          "description": "Specify custom className for the Slider container"
        },
        {
          "name": "error",
          "type": "string",
          "description": "Specify error text and display error state of Slider"
        },
        {
          "name": "name",
          "type": "string",
          "description": "Specify the name of the Slider input, useful for form submission."
        },
        {
          "name": "valueAxis",
          "type": "{ [value: number]: string; }",
          "description": "Specify the value axis marks & labels"
        },
        {
          "name": "showValueAxisLabels",
          "type": "boolean",
          "description": "Show the value axis under the Slider",
          "defaultValue": "true"
        },
        {
          "name": "marksSource",
          "type": "enum",
          "description": "Set the source of the marks. `step` will render marks based on the step value, `valueAxis` based on the `valueAxis` prop and `none` will not render any marks",
          "defaultValue": "none"
        },
        {
          "name": "restrictToValueAxis",
          "type": "boolean",
          "description": "Restrict Slider value to only the provided value axis",
          "defaultValue": "false"
        },
        {
          "name": "showTextField",
          "type": "boolean",
          "description": "Specify whether or not the Slider should display the TextField",
          "defaultValue": "false"
        },
        {
          "name": "textFieldWidth",
          "type": "string",
          "description": "Specify the width of the TextField",
          "defaultValue": "3.625rem"
        },
        {
          "name": "persistentTooltip",
          "type": "boolean",
          "description": "Specify whether the tooltip should be always visible",
          "defaultValue": "false"
        },
        {
          "name": "disabledTooltip",
          "type": "boolean",
          "description": "Specify whether to hide the tooltip on the slider handle",
          "defaultValue": "false"
        },
        {
          "name": "helperText",
          "type": "ReactNode",
          "description": "Specify HelperText for Slider"
        },
        {
          "name": "contentBefore",
          "type": "ReactNode",
          "description": "Specify content to display before selection"
        },
        {
          "name": "contentAfter",
          "type": "ReactNode",
          "description": "Specify content to display after selection"
        },
        {
          "name": "min",
          "type": "number",
          "description": "Specify a minimum value for the Slider value"
        },
        {
          "name": "max",
          "type": "number",
          "description": "Specify a maximum value for the Slider value"
        },
        {
          "name": "validationRules",
          "type": "FormValidator[]",
          "description": "Validation rules for the Slider component"
        },
        {
          "name": "minGap",
          "type": "number",
          "description": "Minimum gap between the two handles. Defaults to step value"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Slider.",
          "source": "<Slider {...args} />"
        },
        {
          "name": "With Label",
          "description": "Displaying the `Label` is optional. Slider will display without `Label` if not passed as a prop. If no `label` is passed, set `aria-label` to make this input accessible for screen readers.",
          "source": "<Slider {...args} />"
        },
        {
          "name": "With Helper Text",
          "description": "Displaying HelperText is optional. Slider will display with HelperText if passed as a prop.",
          "source": "<Slider {...args} />"
        },
        {
          "name": "With Value Axis",
          "description": "Use `valueAxis` to add values below the slider.",
          "source": "<>\n      <Slider\n        {...args}\n        valueAxis={{\n          0: '0',\n          100: '100',\n        }}\n      />\n      <Slider\n        {...args}\n        valueAxis={{\n          0: '0',\n          20: '20',\n          40: '40',\n          60: '60',\n          80: '80',\n          100: '100',\n        }}\n      />\n    </>"
        },
        {
          "name": "Restrict Value Axis",
          "description": "Use `restrictToValueAxis` to only allow the Slider to stop on the provided values.",
          "source": "<Slider {...args} />"
        },
        {
          "name": "Custom Range",
          "description": "Use `range` to define a custom range value for the Slider.",
          "source": "<Slider {...args} />"
        },
        {
          "name": "Custom Step",
          "description": "Use `step` to define a custom step value for the Slider.",
          "source": "<Slider {...args} />"
        },
        {
          "name": "With Marks",
          "description": "Set `marksSource` values to add marks along the Slider.",
          "source": "<>\n      <Slider {...args} />\n      <Slider\n        {...args}\n        label=\"Marks restricted to value axis\"\n        restrictToValueAxis={true}\n        marksSource=\"valueAxis\"\n      />\n    </>"
        },
        {
          "name": "Content Before And After",
          "description": "Slider supports values, icons, and buttons as `contentBefore` and `contentAfter`.",
          "source": "<>\n      <Slider {...args} />\n      <Slider\n        {...args}\n        label=\"Icon before and after\"\n        contentBefore={\n          <Icon\n            icon={VolumeDown}\n            ariaLabel=\"Volume down\"\n            style={{ color: bmCompSliderColorIcon }}\n          />\n        }\n        contentAfter={\n          <Icon\n            icon={VolumeUp}\n            ariaLabel=\"Volume up\"\n            style={{ color: bmCompSliderColorIcon }}\n          />\n        }\n      />\n      <Slider\n        {...args}\n        label=\"Button before and after\"\n        contentBefore={\n          <Button\n            iconOnly\n            iconBefore={<Remove />}\n            kind=\"bare\"\n            appearance=\"neutral-subtle\"\n            aria-label=\"before\"\n          />\n        }\n        contentAfter={\n          <Button\n            iconOnly\n            iconBefore={<Add />}\n            kind=\"bare\"\n            appearance=\"neutral-subtle\"\n            aria-label=\"after\"\n          />\n        }\n      />\n    </>"
        },
        {
          "name": "Dual Handle",
          "description": "Pass a second value to `defaultValue` or `value` to add a second handle to the Slider.",
          "source": "<Slider {...args} />"
        },
        {
          "name": "With Text Field",
          "description": "Set `showTextField` to `true` to include a TextField with the Slider.\n\nThe width of the TextField can be modified to accommodate large and small values.",
          "source": "<>\n      <Slider {...args} />\n      <Slider\n        label=\"With large values\"\n        valueAxis={{\n          100000: '100,000',\n          500000: '500,000',\n        }}\n        defaultValue={300500}\n        range={[100000, 500000]}\n        step={500}\n        textFieldWidth=\"90px\"\n        showTextField={args.showTextField}\n      />\n      <Slider\n        label=\"With dual handle\"\n        defaultValue={[24, 84]}\n        showTextField={args.showTextField}\n      />\n    </>"
        },
        {
          "name": "Disabled Tooltip",
          "description": "Set `disabledTooltip` to `true` to suppress the tooltip during all user interactions.",
          "source": "<>\n      <Slider {...args} />\n      <Slider\n        label=\"Dual handle with disabled tooltip\"\n        defaultValue={[25, 75]}\n        disabledTooltip={true}\n      />\n    </>"
        },
        {
          "name": "Persistent Tooltip",
          "description": "Set `persistentTooltip` to `true` to make the Tooltip value always visible.",
          "source": "<Slider {...args} />"
        },
        {
          "name": "Disabled",
          "description": "Set `disabledTooltip` to `true` to suppress the tooltip during all user interactions.",
          "source": "<Slider {...args} />"
        },
        {
          "name": "Read Only",
          "description": "Set `readOnly` to `true` to display Slider in a read only state.",
          "source": "<Slider {...args} />"
        },
        {
          "name": "Error",
          "description": "Use `error` to specify HelperText text and display Slider in an error state.",
          "source": "<Slider {...args} />"
        },
        {
          "name": "Min And Max",
          "description": "Use `min` and `max` to control slider value limits.",
          "source": "<div style={{ padding: bmSemSpace100 }}>\n      <Slider {...args} />\n    </div>"
        },
        {
          "name": "Controlled",
          "description": "This is a controlled Slider example.",
          "source": "const initialValue = Array.isArray(args.defaultValue)\n      ? args.defaultValue[0]\n      : args.defaultValue ?? 84;\n    const [value, setValue] = useState<number>(initialValue);\n    return (\n      <Slider\n        label={args.label || 'Controlled Slider'}\n        value={value}\n        onChange={setValue}\n      />\n    );"
        }
      ],
      "category": "Forms",
      "displayName": "Slider",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Layout/SideNav/SideNav",
      "slug": "layout-sidenav-sidenav",
      "description": "Side nav provides vertical navigation that links to key sections within an application.\n\nUse SideNav with [PageLayout](./?path=/docs/layout-pagelayout-pagelayout--docs) to coordinate, state, interactive, and responsive behaviors.",
      "type": "component",
      "props": [
        {
          "name": "backdrop",
          "type": "enum",
          "description": "Specify an opaque or transparent backdrop when the SideNav drawer is open and `floating` is set to `true`. On mobile, the backdrop is always set to opaque",
          "defaultValue": "'opaque'"
        },
        {
          "name": "children",
          "type": "React.ReactNode",
          "description": "The content of the SideNav"
        },
        {
          "name": "closedLayout",
          "type": "false | 'hidden' | 'rail'",
          "description": "Specify the layout of the SideNav when closed",
          "defaultValue": "false"
        },
        {
          "name": "floating",
          "type": "boolean",
          "description": "Specify if SideNav is absolutely positioned",
          "defaultValue": "false"
        },
        {
          "name": "openLayout",
          "type": "false | 'drawer' | 'rail'",
          "description": "Specify the layout of the SideNav when open",
          "defaultValue": "'drawer'"
        },
        {
          "name": "resizable",
          "type": "boolean",
          "description": "Specify if the drawer is resizable",
          "defaultValue": "false"
        }
      ],
      "subcomponentProps": [
        {
          "name": "SideNav.Header",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "The content of the SideNav.Header",
              "required": true,
              "defaultValue": "null"
            }
          ]
        },
        {
          "name": "SideNav.Body",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "The content of the SideNav.Body",
              "required": true,
              "defaultValue": "null"
            },
            {
              "name": "reflowNavigation",
              "type": "any",
              "description": "Utility prop that reflows Header navigation items to SideNavBody when viewing on smaller viewports",
              "defaultValue": "null"
            },
            {
              "name": "reflowNavigationAriaLabel",
              "type": "string",
              "description": "Specify aria-label for the reflowed navigation items"
            }
          ]
        },
        {
          "name": "SideNav.ActionList",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "The content of the ActionList"
            },
            {
              "name": "loading",
              "type": "boolean",
              "description": "Display a Spinner when action list is loading",
              "defaultValue": "false"
            },
            {
              "name": "noResults",
              "type": "string",
              "description": "Display a message if no results are found"
            },
            {
              "name": "header",
              "type": "React.ReactNode",
              "description": "Add a header at the top of ActionList"
            },
            {
              "name": "supportingText",
              "type": "string",
              "description": "Add supporting text below the header"
            },
            {
              "name": "indent",
              "type": "number | boolean",
              "description": "Display the default indention or specify a custom indention to align ActionList items"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "description": "Specify if all items in a ActionList are disabled"
            },
            {
              "name": "ariaLabel",
              "type": "string",
              "description": "Specify the aria-label for the ActionList"
            },
            {
              "name": "className",
              "type": "string",
              "description": ""
            },
            {
              "name": "role",
              "type": "string",
              "description": "Specify the role of the ActionList",
              "defaultValue": "listbox"
            },
            {
              "name": "id",
              "type": "string",
              "description": ""
            }
          ]
        },
        {
          "name": "SideNav.ActionList.Item",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "The content of the SideNav.ActionList.Item",
              "required": true
            },
            {
              "name": "selected",
              "type": "boolean",
              "description": "Boolean that states if the action is selected"
            },
            {
              "name": "supportingText",
              "type": "string",
              "description": "Add secondary support text"
            },
            {
              "name": "contentAfter",
              "type": "ReactNode",
              "description": "Add content after the text"
            },
            {
              "name": "contentBefore",
              "type": "ReactNode",
              "description": "Add content before the text"
            },
            {
              "name": "defaultSelected",
              "type": "boolean",
              "description": "Specify if a list item is selected",
              "defaultValue": "false"
            },
            {
              "name": "kind",
              "type": "'action' | 'destructive' | 'flyout' | 'singleCheckMark' | 'multiCheckMark' | 'checkbox' | 'radio' | 'switch'",
              "description": "Specify what kind of item displays",
              "defaultValue": "'action'"
            },
            {
              "name": "indent",
              "type": "number | boolean",
              "description": "Display the default indention or specify a custom indention to align ActionList items"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "description": "Specify if a list item is disabled",
              "defaultValue": "false"
            },
            {
              "name": "onSelectionChange",
              "type": "(selected: boolean) => void",
              "description": "Specify a callback that fires when a list item is selected or deselected"
            },
            {
              "name": "role",
              "type": "string",
              "description": "Specify the role of the item",
              "defaultValue": "'option'"
            },
            {
              "name": "tooltipPlacement",
              "type": "enum",
              "description": ""
            },
            {
              "name": "as",
              "type": "\"div\"",
              "description": "Specify a different component to render the item, such as an anchor tag for links",
              "defaultValue": "div"
            }
          ]
        },
        {
          "name": "SideNav.ActionList.Item.Label",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "The content of the SideNav.ActionList.Item.Label",
              "required": true
            }
          ]
        },
        {
          "name": "SideNav.ActionList.Item.Flyout",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "Specify custom content for the Menu",
              "required": true
            },
            {
              "name": "as",
              "type": "React.ElementType",
              "description": "Specify the HTML element type of a Box",
              "defaultValue": "'div'"
            },
            {
              "name": "p",
              "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
              "description": "Specify all padding"
            },
            {
              "name": "px",
              "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
              "description": "Specify before and after padding"
            },
            {
              "name": "py",
              "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
              "description": "Specify top and bottom padding"
            },
            {
              "name": "pTop",
              "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
              "description": "Specify top padding"
            },
            {
              "name": "pBottom",
              "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
              "description": "Specify bottom padding"
            },
            {
              "name": "pBefore",
              "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
              "description": "Specify before padding"
            },
            {
              "name": "pAfter",
              "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
              "description": "Specify after padding"
            },
            {
              "name": "gap",
              "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
              "description": "Specify gap between child elements"
            },
            {
              "name": "overlay",
              "type": "Overlay",
              "description": "Specify if the content should render with an overlay.\nPass `true` for a default dimmed scrim, `'transparent'` for an invisible\nclick-blocking overlay, or a `FloatingOverlayProps` object (e.g. to lock\nscroll or apply custom styling) for full control. Omit or `false` for none.",
              "defaultValue": "false"
            },
            {
              "name": "skipFloatingStyles",
              "type": "boolean",
              "description": "Specify if the content should render with an overlay\nand not be positioned relative to the trigger",
              "defaultValue": "false"
            }
          ]
        },
        {
          "name": "SideNav.ActionList.Item.Expandable",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "Specify body content for the SideNav.ActionList.Item.Expandable",
              "required": true
            },
            {
              "name": "onToggle",
              "type": "(event: React.SyntheticEvent, isOpen: boolean) => void",
              "description": "Specify a callback when the open SideNav.ActionList.Item.Expandable changes"
            },
            {
              "name": "open",
              "type": "boolean",
              "description": "Specify if an SideNav.ActionList.Item.Expandable is open.\nIf this is specified, the component becomes controlled",
              "defaultValue": "false"
            },
            {
              "name": "defaultOpen",
              "type": "boolean",
              "description": "Specify if an SideNav.ActionList.Item.Expandable is open by default",
              "defaultValue": "false"
            },
            {
              "name": "heading",
              "type": "React.ReactNode",
              "description": "This is used internally by SideNav.ActionList.Item.Expandable and should not be set manually\n@internal"
            }
          ]
        },
        {
          "name": "SideNav.ActionList.Group",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "Add list items to create a ActionList.Group"
            },
            {
              "name": "noResults",
              "type": "React.ReactNode",
              "description": "Display a message if no results are found"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "description": "Specify if a group is disabled"
            },
            {
              "name": "divider",
              "type": "boolean",
              "description": "Add a divider at the bottom of this group",
              "defaultValue": "false"
            }
          ]
        },
        {
          "name": "SideNav.ActionList.Group.Heading",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "The content of the SideNav.ActionList.Group.Heading",
              "required": true,
              "defaultValue": "null"
            },
            {
              "name": "contentAfter",
              "type": "ReactNode",
              "description": "Add content after the text"
            }
          ]
        },
        {
          "name": "SideNav.Footer",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "The content of the SideNav.Footer",
              "required": true,
              "defaultValue": "null"
            }
          ]
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default SideNav. Specify if the SideNav is in `drawer` or `rail` mode using `closedLayout` and `openLayout` options.",
          "source": "<>\n      <SideNavProvider sideNavConfig={{ withMobile: false, defaultOpen: true }}>\n        <SideNav openLayout=\"drawer\" resizable={args.resizable}>\n          <SideNav.ActionList ariaLabel=\"Actions\">\n            <SideNav.ActionList.Item\n              selected={true}\n              contentBefore={<Icon icon={Satellite} />}\n              aria-label=\"Item 1\"\n            >\n              Item 1\n            </SideNav.ActionList.Item>\n            <SideNav.ActionList.Item\n              contentBefore={<Icon icon={Satellite} />}\n              aria-label=\"Item 2\"\n            >\n              Item 2\n            </SideNav.ActionList.Item>\n            <SideNav.ActionList.Item\n              contentBefore={<Icon icon={Satellite} />}\n              aria-label=\"Item 3\"\n            >\n              Item 3\n            </SideNav.ActionList.Item>\n            <SideNav.ActionList.Item\n              contentBefore={<Icon icon={Satellite} />}\n              aria-label=\"Item 4\"\n            >\n              Item 4\n            </SideNav.ActionList.Item>\n            <SideNav.ActionList.Item\n              contentBefore={<Icon icon={Satellite} />}\n              aria-label=\"Item 5\"\n            >\n              Item 5\n            </SideNav.ActionList.Item>\n            <SideNav.ActionList.Item\n              contentBefore={<Icon icon={Satellite} />}\n              aria-label=\"Item 6\"\n            >\n              Item 6\n            </SideNav.ActionList.Item>\n            <SideNav.ActionList.Item\n              contentBefore={<Icon icon={Satellite} />}\n              aria-label=\"Item 7\"\n            >\n              Item 7\n            </SideNav.ActionList.Item>\n            <SideNav.ActionList.Item\n              contentBefore={<Icon icon={Satellite} />}\n              aria-label=\"Item 8\"\n            >\n              Item 8\n            </SideNav.ActionList.Item>\n          </SideNav.ActionList>\n        </SideNav>\n      </SideNavProvider>\n      <Box style={{ height: '100%', width: '100%' }} p=\"150\" backgroundColor=\"00\">\n        <Box\n          borderRadius=\"md\"\n          backgroundColor=\"01\"\n          p=\"150\"\n          style={{ width: '100%', height: '100%' }}\n        ></Box>\n      </Box>\n    </>"
        },
        {
          "name": "Body",
          "description": "Pass list items to `SideNav.ActionList` to display navigation items in the SideNav.",
          "source": "<>\n      <SideNavProvider sideNavConfig={{ withMobile: false, defaultOpen: true }}>\n        <SideNav openLayout=\"drawer\">\n          <SideNav.Body>\n            <SideNav.ActionList ariaLabel=\"Actions\">\n              <SideNav.ActionList.Item\n                selected={true}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 1\"\n              >\n                Item 1\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 2\"\n              >\n                Item 2\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 3\"\n              >\n                Item 3\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 4\"\n              >\n                Item 4\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 5\"\n              >\n                Item 5\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 6\"\n              >\n                Item 6\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 7\"\n              >\n                Item 7\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 8\"\n              >\n                Item 8\n              </SideNav.ActionList.Item>\n            </SideNav.ActionList>\n          </SideNav.Body>\n        </SideNav>\n      </SideNavProvider>\n      <Box style={{ height: '100%', width: '100%' }} p=\"150\" backgroundColor=\"00\">\n        <Box\n          borderRadius=\"md\"\n          backgroundColor=\"01\"\n          p=\"150\"\n          style={{ width: '100%', height: '100%' }}\n        ></Box>\n      </Box>\n    </>"
        },
        {
          "name": "With SideNav Header",
          "description": "Pass content to `SideNav.Header` to display content on top of `SideNav.Body`.\n\n> The content of `SideNav.Header` is a user provided component. For a smooth close animation, be sure to consider content wrapping when the `drawer` collapses.",
          "source": "<>\n      <SideNavProvider sideNavConfig={{ withMobile: false, defaultOpen: true }}>\n        <SideNav openLayout=\"drawer\">\n          <SideNav.Header>\n            <Box\n              gap=\"50\"\n              style={{ display: 'flex', minWidth: '10rem' }}\n              mTop=\"25\"\n              mBottom=\"50\"\n            >\n              <Avatar shape=\"square\" size=\"md\" name=\"B M\" />\n              <Box>\n                <Text kind=\"label-sm\" compact style={{ display: 'block' }}>\n                  Beam\n                </Text>\n                <Text\n                  kind=\"body-xs\"\n                  compact\n                  style={{ display: 'block' }}\n                  color=\"secondary\"\n                >\n                  Design System\n                </Text>\n              </Box>\n            </Box>\n          </SideNav.Header>\n          <SideNav.Body>\n            <SideNav.ActionList ariaLabel=\"Actions\">\n              <SideNav.ActionList.Item\n                selected={true}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 1\"\n              >\n                Item 1\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 2\"\n              >\n                Item 2\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 3\"\n              >\n                Item 3\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 4\"\n              >\n                Item 4\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 5\"\n              >\n                Item 5\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 6\"\n              >\n                Item 6\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 7\"\n              >\n                Item 7\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 8\"\n              >\n                Item 8\n              </SideNav.ActionList.Item>\n            </SideNav.ActionList>\n          </SideNav.Body>\n        </SideNav>\n      </SideNavProvider>\n      <Box style={{ height: '100%', width: '100%' }} p=\"150\" backgroundColor=\"00\">\n        <Box\n          borderRadius=\"md\"\n          backgroundColor=\"01\"\n          p=\"150\"\n          style={{ width: '100%', height: '100%' }}\n        ></Box>\n      </Box>\n    </>"
        },
        {
          "name": "With SideNav Footer",
          "description": "Pass content to `SideNav.Footer` to display content under `SideNav.Body`.\n\n> The content of SideNav.Footer is a user provided component. For a smooth close animation, be sure to consider content wrapping when the `drawer` collapses.",
          "source": "<>\n      <SideNavProvider sideNavConfig={{ withMobile: false, defaultOpen: true }}>\n        <SideNav openLayout=\"drawer\">\n          <SideNav.Header>\n            <Box\n              gap=\"50\"\n              style={{ display: 'flex', minWidth: '10rem' }}\n              mTop=\"25\"\n              mBottom=\"50\"\n            >\n              <Avatar shape=\"square\" size=\"md\" name=\"B M\" />\n              <Box>\n                <Text kind=\"label-sm\" compact style={{ display: 'block' }}>\n                  Beam\n                </Text>\n                <Text\n                  kind=\"body-xs\"\n                  compact\n                  style={{ display: 'block' }}\n                  color=\"secondary\"\n                >\n                  Design System\n                </Text>\n              </Box>\n            </Box>\n          </SideNav.Header>\n          <SideNav.Body>\n            <SideNav.ActionList ariaLabel=\"Actions\">\n              <SideNav.ActionList.Item\n                selected={true}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 1\"\n              >\n                Item 1\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 2\"\n              >\n                Item 2\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 3\"\n              >\n                Item 3\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 4\"\n              >\n                Item 4\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 5\"\n              >\n                Item 5\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 6\"\n              >\n                Item 6\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 7\"\n              >\n                Item 7\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 8\"\n              >\n                Item 8\n              </SideNav.ActionList.Item>\n            </SideNav.ActionList>\n          </SideNav.Body>\n          <SideNav.Footer>\n            <SideNav.ActionList ariaLabel=\"Footer Actions\">\n              <SideNav.ActionList.Group divider>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Settings} />}\n                  aria-label=\"Settings\"\n                >\n                  Settings\n                </SideNav.ActionList.Item>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Export} />}\n                  aria-label=\"Logout\"\n                >\n                  Logout\n                </SideNav.ActionList.Item>\n              </SideNav.ActionList.Group>\n            </SideNav.ActionList>\n            <Box pTop=\"25\" pBottom=\"25\" style={{ overflow: 'clip' }}>\n              <Button\n                iconBefore={<Feedback />}\n                kind=\"outline\"\n                size=\"sm\"\n                width={'100%'}\n                style={{ overflow: 'clip' }}\n              >\n                Give feedback\n              </Button>\n            </Box>\n          </SideNav.Footer>\n        </SideNav>\n      </SideNavProvider>\n      <Box style={{ height: '100%', width: '100%' }} p=\"150\" backgroundColor=\"00\">\n        <Box\n          borderRadius=\"md\"\n          backgroundColor=\"01\"\n          p=\"150\"\n          style={{ width: '100%', height: '100%' }}\n        ></Box>\n      </Box>\n    </>"
        },
        {
          "name": "Rail",
          "description": "Specify if the SideNav is in `drawer` or `rail` mode using `closedLayout` and `openLayout` options.\n> `SideNav.Header` content will not display in rail mode. `SideNav.ActionList.Items` in `SideNav.Footer` automatically display in rail mode\nwhile custom content will not display.",
          "source": "<>\n      <SideNavProvider sideNavConfig={{ withMobile: false, defaultOpen: true }}>\n        <SideNav openLayout=\"rail\">\n          <SideNav.ActionList ariaLabel=\"Actions\">\n            <SideNav.ActionList.Item\n              contentBefore={<Icon icon={Satellite} />}\n              aria-label=\"Item 1\"\n              selected={true}\n            >\n              Item 1\n            </SideNav.ActionList.Item>\n            <SideNav.ActionList.Item\n              contentBefore={<Icon icon={Satellite} />}\n              aria-label=\"Item 2\"\n            >\n              Item 2\n            </SideNav.ActionList.Item>\n            <SideNav.ActionList.Item\n              contentBefore={<Icon icon={Satellite} />}\n              aria-label=\"Item 3\"\n            >\n              Item 3\n            </SideNav.ActionList.Item>\n            <SideNav.ActionList.Item\n              contentBefore={<Icon icon={Satellite} />}\n              aria-label=\"Item 4\"\n            >\n              Item 4\n            </SideNav.ActionList.Item>\n            <SideNav.ActionList.Item\n              contentBefore={<Icon icon={Satellite} />}\n              aria-label=\"Item 5\"\n            >\n              Item 5\n            </SideNav.ActionList.Item>\n            <SideNav.ActionList.Item\n              contentBefore={<Icon icon={Satellite} />}\n              aria-label=\"Item 6\"\n            >\n              Item 6\n            </SideNav.ActionList.Item>\n            <SideNav.ActionList.Item\n              contentBefore={<Icon icon={Satellite} />}\n              aria-label=\"Item 7\"\n            >\n              Item 7\n            </SideNav.ActionList.Item>\n            <SideNav.ActionList.Item\n              contentBefore={<Icon icon={Satellite} />}\n              aria-label=\"Item 8\"\n            >\n              Item 8\n            </SideNav.ActionList.Item>\n          </SideNav.ActionList>\n          <SideNav.Footer>\n            <SideNav.ActionList ariaLabel=\"navigation-footer\">\n              <SideNav.ActionList.Group>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Settings} />}\n                  aria-label=\"Settings\"\n                >\n                  <SideNav.ActionList.Item.Label>\n                    Settings\n                  </SideNav.ActionList.Item.Label>\n                </SideNav.ActionList.Item>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Export} />}\n                  aria-label=\"Logout\"\n                >\n                  Logout\n                </SideNav.ActionList.Item>\n              </SideNav.ActionList.Group>\n            </SideNav.ActionList>\n            <Box pTop=\"25\" pBottom=\"25\" className=\"bm-side-nav__footer__slot\">\n              <Divider\n                borderColor=\"01\"\n                role=\"presentation\"\n                aria-orientation={undefined}\n                style={{ marginBlockEnd: '1rem' }}\n              />\n              <Button\n                iconBefore={<Feedback />}\n                kind=\"outline\"\n                size=\"sm\"\n                width={'100%'}\n                style={{ overflow: 'clip', minWidth: '165px' }}\n              >\n                Give feedback\n              </Button>\n            </Box>\n          </SideNav.Footer>\n        </SideNav>\n      </SideNavProvider>\n      <Box style={{ height: '100%', width: '100%' }} p=\"150\" backgroundColor=\"00\">\n        <Box\n          borderRadius=\"md\"\n          backgroundColor=\"01\"\n          p=\"150\"\n          style={{ width: '100%', height: '100%' }}\n        ></Box>\n      </Box>\n    </>"
        },
        {
          "name": "With Expandable",
          "description": "Expandable items reveal a nested list of sub-items inline to display a continuous navigation hierarchy. Use `SideNav.ActionList.Item` to add expandable navigation to the SideNav in drawer mode. There are two types of expandable navigation:\n\n1. **Expandable sections** reveal nested sub-items, but they do not link to a unique page.\n2. **Expandable links** redirect to a unique page and act as an accordion for sub-items.\n\nAn expandable section can be turned into an expandable link by providing an `onClick` handler to `SideNav.ActionList.Item`.\n> The example below uses `SideNav.ActionList.Item.Label` and `SideNav.ActionList.Item.Expandable` to add expandable navigation to the SideNav drawer.\n\nWhen to use:\n- For continuous navigation hierarchy, use [Expandable](#with-expandable)\n- For jump off points or elements other than navigational items, use [Flyout](#with-flyout)\n- For actions directly related to the side nav item, use [Action Menu](#with-action-menu)",
          "source": "const [selected, setSelected] = useState<string | null>('Item 1');\n    return (\n      <>\n        <SideNavProvider sideNavConfig={{ withMobile: false, defaultOpen: true }}>\n          <SideNav openLayout=\"drawer\">\n            <SideNav.Header>\n              <Box\n                gap=\"50\"\n                style={{ display: 'flex', minWidth: '10rem' }}\n                mTop=\"25\"\n                mBottom=\"50\"\n              >\n                <Avatar shape=\"square\" size=\"md\" name=\"B M\" />\n                <Box>\n                  <Text kind=\"label-sm\" compact style={{ display: 'block' }}>\n                    Beam\n                  </Text>\n                  <Text\n                    kind=\"body-xs\"\n                    compact\n                    style={{ display: 'block' }}\n                    color=\"secondary\"\n                  >\n                    Design System\n                  </Text>\n                </Box>\n              </Box>\n            </SideNav.Header>\n            <SideNav.Body>\n              <SideNav.ActionList ariaLabel=\"Actions\">\n                {/* Item 1 */}\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Satellite} />}\n                  aria-label=\"Item 1\"\n                  selected={selected === 'Item 1'}\n                  onClick={() => setSelected('Item 1')}\n                >\n                  Item 1\n                </SideNav.ActionList.Item>\n                {/* Item 2 - Expandable section (no onClick) */}\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Satellite} />}\n                  aria-label=\"Item 2\"\n                >\n                  <SideNav.ActionList.Item.Label>\n                    Expandable section\n                  </SideNav.ActionList.Item.Label>\n                  <SideNav.ActionList.Item.Expandable>\n                    <SideNav.ActionList ariaLabel=\"expandable-menu-2\">\n                      <SideNav.ActionList.Item\n                        aria-label=\"Sub item 2.1\"\n                        selected={selected === 'Sub item 2.1'}\n                        onClick={() => setSelected('Sub item 2.1')}\n                      >\n                        Sub item 1\n                      </SideNav.ActionList.Item>\n                      <SideNav.ActionList.Item\n                        aria-label=\"Sub item 2.2\"\n                        selected={selected === 'Sub item 2.2'}\n                        onClick={() => setSelected('Sub item 2.2')}\n                      >\n                        Sub item 2\n                      </SideNav.ActionList.Item>\n                      <SideNav.ActionList.Item\n                        aria-label=\"Sub item 2.3\"\n                        selected={selected === 'Sub item 2.3'}\n                        onClick={() => setSelected('Sub item 2.3')}\n                      >\n                        Sub item 3\n                      </SideNav.ActionList.Item>\n                    </SideNav.ActionList>\n                  </SideNav.ActionList.Item.Expandable>\n                </SideNav.ActionList.Item>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Satellite} />}\n                  aria-label=\"Item 3\"\n                  selected={selected === 'Item 3'}\n                  onClick={() => setSelected('Item 3')}\n                >\n                  <SideNav.ActionList.Item.Label>\n                    Expandable link\n                  </SideNav.ActionList.Item.Label>\n                  <SideNav.ActionList.Item.Expandable>\n                    <SideNav.ActionList ariaLabel=\"expandable-menu-3\">\n                      <SideNav.ActionList.Item\n                        aria-label=\"Sub item 3.1\"\n                        selected={selected === 'Sub item 3.1'}\n                        onClick={() => setSelected('Sub item 3.1')}\n                      >\n                        Sub item 1\n                      </SideNav.ActionList.Item>\n                      <SideNav.ActionList.Item\n                        aria-label=\"Sub item 3.2\"\n                        selected={selected === 'Sub item 3.2'}\n                        onClick={() => setSelected('Sub item 3.2')}\n                      >\n                        Sub item 2\n                      </SideNav.ActionList.Item>\n                      <SideNav.ActionList.Item\n                        aria-label=\"Sub item 3.3\"\n                        selected={selected === 'Sub item 3.3'}\n                        onClick={() => setSelected('Sub item 3.3')}\n                      >\n                        Sub item 3\n                      </SideNav.ActionList.Item>\n                    </SideNav.ActionList>\n                  </SideNav.ActionList.Item.Expandable>\n                </SideNav.ActionList.Item>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Satellite} />}\n                  aria-label=\"Item 4\"\n                  selected={selected === 'Item 4'}\n                  onClick={() => setSelected('Item 4')}\n                >\n                  Item 4\n                </SideNav.ActionList.Item>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Satellite} />}\n                  aria-label=\"Item 5\"\n                  selected={selected === 'Item 5'}\n                  onClick={() => setSelected('Item 5')}\n                >\n                  Item 5\n                </SideNav.ActionList.Item>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Satellite} />}\n                  aria-label=\"Item 6\"\n                  selected={selected === 'Item 6'}\n                  onClick={() => setSelected('Item 6')}\n                >\n                  Item 6\n                </SideNav.ActionList.Item>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Satellite} />}\n                  aria-label=\"Item 7\"\n                  selected={selected === 'Item 7'}\n                  onClick={() => setSelected('Item 7')}\n                >\n                  Item 7\n                </SideNav.ActionList.Item>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Satellite} />}\n                  aria-label=\"Item 8\"\n                  selected={selected === 'Item 8'}\n                  onClick={() => setSelected('Item 8')}\n                >\n                  Item 8\n                </SideNav.ActionList.Item>\n              </SideNav.ActionList>\n            </SideNav.Body>\n            <SideNav.Footer>\n              <SideNav.ActionList ariaLabel=\"Footer Actions\">\n                <SideNav.ActionList.Group divider>\n                  <SideNav.ActionList.Item\n                    contentBefore={<Icon icon={Settings} />}\n                    aria-label=\"Settings\"\n                  >\n                    Settings\n                  </SideNav.ActionList.Item>\n                  <SideNav.ActionList.Item\n                    contentBefore={<Icon icon={Export} />}\n                    aria-label=\"Logout\"\n                  >\n                    Logout\n                  </SideNav.ActionList.Item>\n                </SideNav.ActionList.Group>\n              </SideNav.ActionList>\n              <Box pTop=\"25\" pBottom=\"25\" style={{ overflow: 'clip' }}>\n                <Button\n                  iconBefore={<Feedback />}\n                  kind=\"outline\"\n                  size=\"sm\"\n                  width={'100%'}\n                  style={{ overflow: 'clip' }}\n                >\n                  Give feedback\n                </Button>\n              </Box>\n            </SideNav.Footer>\n          </SideNav>\n        </SideNavProvider>\n        <Box style={{ height: '100%', width: '100%' }} p=\"150\" backgroundColor=\"00\">\n          <Box\n            borderRadius=\"md\"\n            backgroundColor=\"01\"\n            p=\"150\"\n            style={{ width: '100%', height: '100%' }}\n          ></Box>\n        </Box>\n      </>\n    );"
        },
        {
          "name": "With Flyout",
          "description": "Flyouts appear as an overlay and can be used to open a list of jump off points or to display elements other than navigational items. It’s generally not recommended to use for navigation hierarchy, instead use Expandable.\n\nUse `SideNav.ActionList.Item` to add a flyout menu or popover to the SideNav in `drawer` and `rail` mode.\n\n> The example below uses `SideNav.ActionList.Item.Label` and `SideNav.ActionList.Item.Flyout` to add a flyout menu and popover to the SideNav drawer.\n\nWhen to use:\n- For continuous navigation hierarchy, use [Expandable](#with-expandable)\n- For jump off points or elements other than navigational items, use [Flyout](#with-flyout)\n- For actions directly related to the side nav item, use [Action Menu](#with-action-menu)",
          "source": "<>\n      <SideNavProvider sideNavConfig={{ withMobile: false, defaultOpen: true }}>\n        <SideNav openLayout=\"drawer\">\n          <SideNav.Header>\n            <Box\n              gap=\"50\"\n              style={{ display: 'flex', minWidth: '10rem' }}\n              mTop=\"25\"\n              mBottom=\"50\"\n            >\n              <Avatar shape=\"square\" size=\"md\" name=\"B M\" />\n              <Box>\n                <Text kind=\"label-sm\" compact style={{ display: 'block' }}>\n                  Beam\n                </Text>\n                <Text\n                  kind=\"body-xs\"\n                  compact\n                  style={{ display: 'block' }}\n                  color=\"secondary\"\n                >\n                  Design System\n                </Text>\n              </Box>\n            </Box>\n          </SideNav.Header>\n          <SideNav.Body>\n            <SideNav.ActionList ariaLabel=\"Actions\">\n              <SideNav.ActionList.Item\n                selected={true}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 1\"\n              >\n                Item 1\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 2\"\n              >\n                Item 2\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={StarBorderOutlined} />}\n                aria-label=\"Item 3\"\n              >\n                <SideNav.ActionList.Item.Label>\n                  Favorites\n                </SideNav.ActionList.Item.Label>\n                <SideNav.ActionList.Item.Flyout>\n                  <SideNav.ActionList ariaLabel=\"flyout-menu-3\">\n                    <SideNav.ActionList.Group divider>\n                      <SideNav.ActionList.Item\n                        aria-label=\"Item 3.1\"\n                        contentBefore={<Icon icon={StarBorderOutlined} />}\n                      >\n                        Favorite space 1\n                      </SideNav.ActionList.Item>\n                      <SideNav.ActionList.Item\n                        aria-label=\"Item 3.2\"\n                        contentBefore={<Icon icon={StarBorderOutlined} />}\n                      >\n                        Favorite space 2\n                      </SideNav.ActionList.Item>\n                      <SideNav.ActionList.Item\n                        aria-label=\"Item 3.3\"\n                        contentBefore={<Icon icon={StarBorderOutlined} />}\n                      >\n                        Favorite space 3\n                      </SideNav.ActionList.Item>\n                    </SideNav.ActionList.Group>\n                    <SideNav.ActionList.Group>\n                      <SideNav.ActionList.Item\n                        aria-label=\"Item 3.4\"\n                        contentBefore={<Icon icon={FormatListBulleted} />}\n                      >\n                        View all favourite spaces\n                      </SideNav.ActionList.Item>\n                      <SideNav.ActionList.Item\n                        aria-label=\"Item 3.5\"\n                        contentBefore={<Icon icon={Add} />}\n                      >\n                        Create new space\n                      </SideNav.ActionList.Item>\n                    </SideNav.ActionList.Group>\n                  </SideNav.ActionList>\n                </SideNav.ActionList.Item.Flyout>\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 4\"\n              >\n                Item 4\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={LocalAirport} />}\n                aria-label=\"Item 5\"\n              >\n                <SideNav.ActionList.Item.Label>\n                  Popover\n                </SideNav.ActionList.Item.Label>\n                <SideNav.ActionList.Item.Flyout\n                  style={{\n                    width: '19rem',\n                    display: 'flex',\n                    flexDirection: 'column',\n                  }}\n                  px=\"100\"\n                  py=\"100\"\n                  gap=\"125\"\n                >\n                  <Box\n                    style={{\n                      display: 'flex',\n                      justifyContent: 'space-between',\n                      alignItems: 'start',\n                      width: '100%',\n                    }}\n                  >\n                    <Text kind=\"heading-sm\" color=\"primary\">\n                      Popover\n                    </Text>\n                  </Box>\n                  <Text kind=\"body-md\" color=\"secondary\">\n                    A temporary container that appears on top of the interface.\n                  </Text>\n                  <Button size=\"sm\" appearance=\"accent\" kind=\"filled\">\n                    Action\n                  </Button>\n                </SideNav.ActionList.Item.Flyout>\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 6\"\n              >\n                Item 6\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 7\"\n              >\n                Item 7\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 8\"\n              >\n                Item 8\n              </SideNav.ActionList.Item>\n            </SideNav.ActionList>\n          </SideNav.Body>\n          <SideNav.Footer>\n            <SideNav.ActionList ariaLabel=\"Footer Actions\">\n              <SideNav.ActionList.Group divider>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Settings} />}\n                  aria-label=\"Settings\"\n                >\n                  Settings\n                </SideNav.ActionList.Item>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Export} />}\n                  aria-label=\"Logout\"\n                >\n                  Logout\n                </SideNav.ActionList.Item>\n              </SideNav.ActionList.Group>\n            </SideNav.ActionList>\n            <Box pTop=\"25\" pBottom=\"25\" style={{ overflow: 'clip' }}>\n              <Button\n                iconBefore={<Feedback />}\n                kind=\"outline\"\n                size=\"sm\"\n                width={'100%'}\n                style={{ overflow: 'clip' }}\n              >\n                Give feedback\n              </Button>\n            </Box>\n          </SideNav.Footer>\n        </SideNav>\n      </SideNavProvider>\n      <Box style={{ height: '100%', width: '100%' }} p=\"150\" backgroundColor=\"00\">\n        <Box\n          borderRadius=\"md\"\n          backgroundColor=\"01\"\n          p=\"150\"\n          style={{ width: '100%', height: '100%' }}\n        ></Box>\n      </Box>\n    </>"
        },
        {
          "name": "With Action Menu",
          "description": "A menu can be added to `SideNav.ActionList.Item` when it requires a group of secondary, context-specific actions.\nThese actions might include options like \"Edit\", \"Delete\", \"Archive\", or \"Share\" that apply directly to the content or settings for that item.\n\nWhen to use:\n- For continuous navigation hierarchy, use [Expandable](#with-expandable)\n- For jump off points or elements other than navigational items, use [Flyout](#with-flyout)\n- For actions directly related to the side nav item, use [Action Menu](#with-action-menu)",
          "source": "<>\n      <SideNavProvider sideNavConfig={{ withMobile: false, defaultOpen: true }}>\n        <SideNav openLayout=\"drawer\">\n          <SideNav.Header>\n            <Box\n              gap=\"50\"\n              style={{ display: 'flex', minWidth: '10rem' }}\n              mTop=\"25\"\n              mBottom=\"50\"\n            >\n              <Avatar shape=\"square\" size=\"md\" name=\"B M\" />\n              <Box>\n                <Text kind=\"label-sm\" compact style={{ display: 'block' }}>\n                  Beam\n                </Text>\n                <Text\n                  kind=\"body-xs\"\n                  compact\n                  style={{ display: 'block' }}\n                  color=\"secondary\"\n                >\n                  Design System\n                </Text>\n              </Box>\n            </Box>\n          </SideNav.Header>\n          <SideNav.Body>\n            <SideNav.ActionList ariaLabel=\"Actions\">\n              <SideNav.ActionList.Item\n                selected={true}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 1\"\n              >\n                Item 1\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 2\"\n              >\n                Item 2\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 3\"\n                contentAfter={\n                  <Menu>\n                    <Menu.Trigger>\n                      <ActionList.IconButton\n                        appearance=\"neutral-subtle\"\n                        kind=\"bare\"\n                        size=\"sm\"\n                        icon={MoreHoriz}\n                        onKeyDown={e => {\n                          if (e.key === 'Enter' || e.key === ' ') {\n                            // this is necessary because the SideNav.ActionList.Item has an onKeyDown handler that listens for Enter and Space\n                            e.stopPropagation();\n                            e.preventDefault();\n                            (e.target as HTMLElement).click();\n                          }\n                        }}\n                        onClick={e => {\n                          e.preventDefault();\n                          e.stopPropagation();\n                        }}\n                        aria-label=\"More\"\n                      />\n                    </Menu.Trigger>\n                    <Menu.PopoverContent>\n                      <ActionList>\n                        <ActionList.Item\n                          contentBefore={<Icon icon={EditOutlined} />}\n                          onClick={e => {\n                            e.preventDefault();\n                            e.stopPropagation();\n                          }}\n                        >\n                          Rename\n                        </ActionList.Item>\n                        <ActionList.Item\n                          contentBefore={<Icon icon={StarBorderOutlined} />}\n                          onClick={e => {\n                            e.preventDefault();\n                            e.stopPropagation();\n                          }}\n                        >\n                          Add to favorites\n                        </ActionList.Item>\n                        <ActionList.Item\n                          contentBefore={<Icon icon={ContentOutlined} />}\n                          onClick={e => {\n                            e.preventDefault();\n                            e.stopPropagation();\n                          }}\n                        >\n                          Duplicate\n                        </ActionList.Item>\n                        <ActionList.Item\n                          contentBefore={<Icon icon={LinkOutlined} />}\n                          onClick={e => {\n                            e.preventDefault();\n                            e.stopPropagation();\n                          }}\n                        >\n                          Copy Link\n                        </ActionList.Item>\n                      </ActionList>\n                    </Menu.PopoverContent>\n                  </Menu>\n                }\n              >\n                Item 3 with menu\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 4\"\n              >\n                Item 4\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 5\"\n              >\n                Item 5\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 6\"\n              >\n                Item 6\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 7\"\n              >\n                Item 7\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 8\"\n              >\n                Item 8\n              </SideNav.ActionList.Item>\n            </SideNav.ActionList>\n          </SideNav.Body>\n          <SideNav.Footer>\n            <SideNav.ActionList ariaLabel=\"Footer Actions\">\n              <SideNav.ActionList.Group divider>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Settings} />}\n                  aria-label=\"Settings\"\n                >\n                  Settings\n                </SideNav.ActionList.Item>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Export} />}\n                  aria-label=\"Logout\"\n                >\n                  Logout\n                </SideNav.ActionList.Item>\n              </SideNav.ActionList.Group>\n            </SideNav.ActionList>\n            <Box pTop=\"25\" pBottom=\"25\" style={{ overflow: 'clip' }}>\n              <Button\n                iconBefore={<Feedback />}\n                kind=\"outline\"\n                size=\"sm\"\n                width={'100%'}\n                style={{ overflow: 'clip' }}\n              >\n                Give feedback\n              </Button>\n            </Box>\n          </SideNav.Footer>\n        </SideNav>\n      </SideNavProvider>\n      <Box style={{ height: '100%', width: '100%' }} p=\"150\" backgroundColor=\"00\">\n        <Box\n          borderRadius=\"md\"\n          backgroundColor=\"01\"\n          p=\"150\"\n          style={{ width: '100%', height: '100%' }}\n        ></Box>\n      </Box>\n    </>"
        },
        {
          "name": "Scrolling",
          "description": "When the number of body items exceeds the viewable area, SideNav.Body displays with internal scrolling.",
          "source": "<>\n      <SideNavProvider sideNavConfig={{ withMobile: false, defaultOpen: true }}>\n        <SideNav openLayout=\"drawer\">\n          <SideNav.Header>\n            <Box\n              gap=\"50\"\n              style={{ display: 'flex', minWidth: '10rem' }}\n              mTop=\"25\"\n              mBottom=\"50\"\n            >\n              <Avatar shape=\"square\" size=\"md\" name=\"B M\" />\n              <Box>\n                <Text kind=\"label-sm\" compact style={{ display: 'block' }}>\n                  Beam\n                </Text>\n                <Text\n                  kind=\"body-xs\"\n                  compact\n                  style={{ display: 'block' }}\n                  color=\"secondary\"\n                >\n                  Design System\n                </Text>\n              </Box>\n            </Box>\n          </SideNav.Header>\n          <SideNav.Body>\n            <SideNav.ActionList ariaLabel=\"Actions\">\n              <SideNav.ActionList.Item\n                selected={true}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 1\"\n              >\n                Item 1\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 2\"\n              >\n                Item 2\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 3\"\n              >\n                Item 3\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 4\"\n              >\n                Item 4\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 5\"\n              >\n                Item 5\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 6\"\n              >\n                Item 6\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 7\"\n              >\n                Item 7\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 8\"\n              >\n                Item 8\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 9\"\n              >\n                Item 9\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 10\"\n              >\n                Item 10\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 11\"\n              >\n                Item 11\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 12\"\n              >\n                Item 12\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 13\"\n              >\n                Item 13\n              </SideNav.ActionList.Item>\n            </SideNav.ActionList>\n          </SideNav.Body>\n          <SideNav.Footer>\n            <SideNav.ActionList ariaLabel=\"Footer Actions\">\n              <SideNav.ActionList.Group divider>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Settings} />}\n                  aria-label=\"Settings\"\n                >\n                  Settings\n                </SideNav.ActionList.Item>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Export} />}\n                  aria-label=\"Logout\"\n                >\n                  Logout\n                </SideNav.ActionList.Item>\n              </SideNav.ActionList.Group>\n            </SideNav.ActionList>\n            <Box pTop=\"25\" pBottom=\"25\" style={{ overflow: 'clip' }}>\n              <Button\n                iconBefore={<Feedback />}\n                kind=\"outline\"\n                size=\"sm\"\n                width={'100%'}\n                style={{ overflow: 'clip' }}\n              >\n                Give feedback\n              </Button>\n            </Box>\n          </SideNav.Footer>\n        </SideNav>\n      </SideNavProvider>\n      <Box style={{ height: '100%', width: '100%' }} p=\"150\" backgroundColor=\"00\">\n        <Box\n          borderRadius=\"md\"\n          backgroundColor=\"01\"\n          p=\"150\"\n          style={{ width: '100%', height: '100%' }}\n        ></Box>\n      </Box>\n    </>"
        },
        {
          "name": "Resizable Drawer",
          "description": "Set `resizable` to `true` to allow users to modify the width of the `drawer`.\n\n> The `drawer` can be resized by dragging the resize handler, minimum 200px, maximum 400px.",
          "source": "<>\n      <SideNavProvider sideNavConfig={{ withMobile: false, defaultOpen: true }}>\n        <SideNav openLayout=\"drawer\" resizable={true}>\n          <SideNav.Header>\n            <Box\n              gap=\"50\"\n              style={{ display: 'flex', minWidth: '10rem' }}\n              mTop=\"25\"\n              mBottom=\"50\"\n            >\n              <Avatar shape=\"square\" size=\"md\" name=\"B M\" />\n              <Box>\n                <Text kind=\"label-sm\" compact style={{ display: 'block' }}>\n                  Beam\n                </Text>\n                <Text\n                  kind=\"body-xs\"\n                  compact\n                  style={{ display: 'block' }}\n                  color=\"secondary\"\n                >\n                  Design System\n                </Text>\n              </Box>\n            </Box>\n          </SideNav.Header>\n          <SideNav.Body>\n            <SideNav.ActionList ariaLabel=\"Actions\">\n              <SideNav.ActionList.Item\n                selected={true}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 1\"\n              >\n                Item 1\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 2\"\n              >\n                Item 2\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 3\"\n              >\n                Item 3\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 4\"\n              >\n                Item 4\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 5\"\n              >\n                Item 5\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 6\"\n              >\n                Item 6\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 7\"\n              >\n                Item 7\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 8\"\n              >\n                Item 8\n              </SideNav.ActionList.Item>\n            </SideNav.ActionList>\n          </SideNav.Body>\n          <SideNav.Footer>\n            <SideNav.ActionList ariaLabel=\"Footer Actions\">\n              <SideNav.ActionList.Group divider>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Settings} />}\n                  aria-label=\"Settings\"\n                >\n                  Settings\n                </SideNav.ActionList.Item>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Export} />}\n                  aria-label=\"Logout\"\n                >\n                  Logout\n                </SideNav.ActionList.Item>\n              </SideNav.ActionList.Group>\n            </SideNav.ActionList>\n            <Box pTop=\"25\" pBottom=\"25\" style={{ overflow: 'clip' }}>\n              <Button\n                iconBefore={<Feedback />}\n                kind=\"outline\"\n                size=\"sm\"\n                width={'100%'}\n                style={{ overflow: 'clip' }}\n              >\n                Give feedback\n              </Button>\n            </Box>\n          </SideNav.Footer>\n        </SideNav>\n      </SideNavProvider>\n      <Box style={{ height: '100%', width: '100%' }} p=\"150\" backgroundColor=\"00\">\n        <Box\n          borderRadius=\"md\"\n          backgroundColor=\"01\"\n          p=\"150\"\n          style={{ width: '100%', height: '100%' }}\n        ></Box>\n      </Box>\n    </>"
        },
        {
          "name": "Drawer",
          "description": "",
          "source": "const [primarySelect, setPrimarySelect] = useState('Item 1');\n    return (\n      <SideNavProvider sideNavConfig={{ withMobile: false, defaultOpen: true }}>\n        <SideNav openLayout=\"drawer\" resizable={false}>\n          <SideNav.Body>\n            <SideNav.ActionList ariaLabel=\"Actions\">\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 1'}\n                onClick={() => setPrimarySelect('Item 1')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 1\"\n              >\n                Item 1\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 2'}\n                onClick={() => setPrimarySelect('Item 2')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 2\"\n              >\n                Item 2\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 3'}\n                onClick={() => setPrimarySelect('Item 3')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 3\"\n              >\n                Item 3\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 4'}\n                onClick={() => setPrimarySelect('Item 4')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 4\"\n              >\n                Item 4\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 5'}\n                onClick={() => setPrimarySelect('Item 5')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 5\"\n              >\n                Item 5\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 6'}\n                onClick={() => setPrimarySelect('Item 6')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 6\"\n              >\n                Item 6\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 7'}\n                onClick={() => setPrimarySelect('Item 7')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 7\"\n              >\n                Item 7\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 8'}\n                onClick={() => setPrimarySelect('Item 8')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 8\"\n              >\n                Item 8\n              </SideNav.ActionList.Item>\n            </SideNav.ActionList>\n          </SideNav.Body>\n        </SideNav>\n        <Box backgroundColor=\"00\" style={{ height: '100%', flex: 1 }}>\n          <Box p=\"100\">\n            <Text kind=\"heading-2xl\">Side nav example</Text>\n            <Text style={{ marginTop: '1.5rem', display: 'block' }}>\n              Side nav provides vertical navigation that links to key sections within an\n              application. Check out{' '}\n              <Link href=\"/?path=/docs/layout-pagelayout-pagelayout--docs\">\n                PageLayout\n              </Link>{' '}\n              to see examples of Header and SideNav working together to create UI shells\n              for web applications.\n            </Text>\n          </Box>\n        </Box>\n      </SideNavProvider>\n    );"
        },
        {
          "name": "Rail (Example)",
          "description": "",
          "source": "const [primarySelect, setPrimarySelect] = useState('Item 1');\n    return (\n      <SideNavProvider sideNavConfig={{ withMobile: false, defaultOpen: true }}>\n        <SideNav openLayout=\"rail\" resizable={false}>\n          <SideNav.Body>\n            <SideNav.ActionList ariaLabel=\"Actions\">\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 1'}\n                onClick={() => setPrimarySelect('Item 1')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 1\"\n              >\n                Item 1\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 2'}\n                onClick={() => setPrimarySelect('Item 2')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 2\"\n              >\n                Item 2\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 3'}\n                onClick={() => setPrimarySelect('Item 3')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 3\"\n              >\n                Item 3\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 4'}\n                onClick={() => setPrimarySelect('Item 4')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 4\"\n              >\n                Item 4\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 5'}\n                onClick={() => setPrimarySelect('Item 5')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 5\"\n              >\n                Item 5\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 6'}\n                onClick={() => setPrimarySelect('Item 6')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 6\"\n              >\n                Item 6\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 7'}\n                onClick={() => setPrimarySelect('Item 7')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 7\"\n              >\n                Item 7\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 8'}\n                onClick={() => setPrimarySelect('Item 8')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 8\"\n              >\n                Item 8\n              </SideNav.ActionList.Item>\n            </SideNav.ActionList>\n          </SideNav.Body>\n          <SideNav.Footer>\n            <SideNav.ActionList ariaLabel=\"navigation-footer\">\n              <SideNav.ActionList.Group>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Settings} />}\n                  aria-label=\"Settings\"\n                  selected={primarySelect === 'Settings'}\n                  onClick={() => setPrimarySelect('Settings')}\n                >\n                  <SideNav.ActionList.Item.Label>\n                    Settings\n                  </SideNav.ActionList.Item.Label>\n                </SideNav.ActionList.Item>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Export} />}\n                  aria-label=\"Logout\"\n                  selected={primarySelect === 'Logout'}\n                  onClick={() => setPrimarySelect('Logout')}\n                >\n                  Logout\n                </SideNav.ActionList.Item>\n              </SideNav.ActionList.Group>\n            </SideNav.ActionList>\n            <Box pTop=\"25\" pBottom=\"25\" className=\"bm-side-nav__footer__slot\">\n              <Divider\n                borderColor=\"01\"\n                role=\"presentation\"\n                aria-orientation={undefined}\n                style={{ marginBlockEnd: '1rem' }}\n              />\n              <Button\n                iconBefore={<Feedback />}\n                kind=\"outline\"\n                size=\"sm\"\n                width={'100%'}\n                style={{ overflow: 'clip', minWidth: '165px' }}\n              >\n                Give feedback\n              </Button>\n            </Box>\n          </SideNav.Footer>\n        </SideNav>\n        <Box backgroundColor=\"00\" style={{ height: '100%', flex: 1 }}>\n          <Box p=\"100\">\n            <Text kind=\"heading-2xl\">Side nav example</Text>\n            <Text style={{ marginTop: '1.5rem', display: 'block' }}>\n              Side nav provides vertical navigation that links to key sections within an\n              application. Check out{' '}\n              <Link href=\"/?path=/docs/layout-pagelayout-pagelayout--docs\">\n                PageLayout\n              </Link>{' '}\n              to see examples of Header and SideNav working together to create UI shells\n              for web applications.\n            </Text>\n          </Box>\n        </Box>\n      </SideNavProvider>\n    );"
        },
        {
          "name": "With SideNavHeader And SideNavFooter",
          "description": "",
          "source": "const [primarySelect, setPrimarySelect] = useState('Item 1');\n    return (\n      <SideNavProvider sideNavConfig={{ withMobile: false, defaultOpen: true }}>\n        <SideNav openLayout=\"drawer\" resizable={false}>\n          <SideNav.Header>\n            <Box gap=\"50\" style={{ display: 'flex' }} mTop=\"25\" mBottom=\"50\">\n              <Avatar shape=\"square\" size=\"md\" name=\"B M\" />\n              <Box>\n                <Text kind=\"label-sm\" compact style={{ display: 'block' }}>\n                  Beam\n                </Text>\n                <Text kind=\"body-xs\" compact style={{ display: 'block' }} color=\"secondary\">\n                  Design System\n                </Text>\n              </Box>\n            </Box>\n          </SideNav.Header>\n          <SideNav.Body>\n            <SideNav.ActionList ariaLabel=\"Actions\">\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 1'}\n                onClick={() => setPrimarySelect('Item 1')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 1\"\n              >\n                Item 1\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 2'}\n                onClick={() => setPrimarySelect('Item 2')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 2\"\n              >\n                Item 2\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 3'}\n                onClick={() => setPrimarySelect('Item 3')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 3\"\n              >\n                Item 3\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 4'}\n                onClick={() => setPrimarySelect('Item 4')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 4\"\n              >\n                Item 4\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 5'}\n                onClick={() => setPrimarySelect('Item 5')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 5\"\n              >\n                Item 5\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 6'}\n                onClick={() => setPrimarySelect('Item 6')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 6\"\n              >\n                Item 6\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 7'}\n                onClick={() => setPrimarySelect('Item 7')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 7\"\n              >\n                Item 7\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 8'}\n                onClick={() => setPrimarySelect('Item 8')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 8\"\n              >\n                Item 8\n              </SideNav.ActionList.Item>\n            </SideNav.ActionList>\n          </SideNav.Body>\n          <SideNav.Footer>\n            <SideNav.ActionList ariaLabel=\"Footer Actions\">\n              <SideNav.ActionList.Group divider>\n                <SideNav.ActionList.Item\n                  selected={primarySelect === 'Settings'}\n                  onClick={() => setPrimarySelect('Settings')}\n                  contentBefore={<Icon icon={Settings} />}\n                  aria-label=\"Settings\"\n                >\n                  Settings\n                </SideNav.ActionList.Item>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Export} />}\n                  aria-label=\"Logout\"\n                >\n                  Logout\n                </SideNav.ActionList.Item>\n              </SideNav.ActionList.Group>\n            </SideNav.ActionList>\n            <Box pTop=\"25\" pBottom=\"25\" style={{ overflow: 'clip' }}>\n              <Button\n                iconBefore={<Feedback />}\n                kind=\"outline\"\n                size=\"sm\"\n                width={'100%'}\n                style={{ overflow: 'clip' }}\n              >\n                Give feedback\n              </Button>\n            </Box>\n          </SideNav.Footer>\n        </SideNav>\n        <Box backgroundColor=\"00\" style={{ height: '100%', flex: 1 }}>\n          <Box p=\"100\">\n            <Text kind=\"heading-2xl\">Side nav example</Text>\n            <Text style={{ marginTop: '1.5rem', display: 'block' }}>\n              Side nav provides vertical navigation that links to key sections within an\n              application. Check out{' '}\n              <Link href=\"/?path=/docs/layout-pagelayout-pagelayout--docs\">\n                PageLayout\n              </Link>{' '}\n              to see examples of Header and SideNav working together to create UI shells\n              for web applications.\n            </Text>\n          </Box>\n        </Box>\n      </SideNavProvider>\n    );"
        }
      ],
      "category": "Layout",
      "displayName": "SideNav/SideNav",
      "importPath": "@viasat/beam-react",
      "pairedHooks": [
        {
          "name": "SideNavProvider",
          "kind": "provider",
          "signature": "<SideNavProvider sideNavConfig={...}>{children}</SideNavProvider>",
          "params": [
            {
              "name": "children",
              "type": "ReactNode"
            },
            {
              "name": "sideNavConfig",
              "type": "SideNavConfig",
              "optional": true
            }
          ],
          "importPath": "@viasat/beam-react"
        }
      ]
    },
    {
      "title": "Forms/Select",
      "slug": "forms-select",
      "description": "Select allows users to pick one or more items from a predefined styled list.\n\nFor simple, single-choice selection, especially on mobile devices, use [NativeSelect](/docs/forms-nativeselect--docs) instead.",
      "type": "component",
      "props": [
        {
          "name": "label",
          "type": "ReactNode",
          "description": "Specify Label for Select"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if Select displays in a disabled state",
          "defaultValue": "false"
        },
        {
          "name": "multiple",
          "type": "boolean",
          "description": "Sets the selection type to multiselect. Set this to true for multiselect, even if fully controlling selection state. This enables styles and accessibility properties to be set",
          "defaultValue": "false"
        },
        {
          "name": "required",
          "type": "boolean",
          "description": "Specify if Select is a required input",
          "defaultValue": "false"
        },
        {
          "name": "size",
          "type": "'sm' | 'md' | 'lg'",
          "description": "Specify the size of Select",
          "defaultValue": "'md'"
        },
        {
          "name": "placeholder",
          "type": "string",
          "description": "Specify a placeholder for the Select"
        },
        {
          "name": "helperText",
          "type": "ReactNode",
          "description": "Specify HelperText for Select"
        },
        {
          "name": "readOnly",
          "type": "boolean",
          "description": "Specify if Select displays in a read-only state",
          "defaultValue": "false"
        },
        {
          "name": "error",
          "type": "string | boolean",
          "description": "Specify error text and display error state of a Select"
        },
        {
          "name": "fluid",
          "type": "boolean",
          "description": "Specify if Select is fluid",
          "defaultValue": "false"
        },
        {
          "name": "width",
          "type": "string",
          "description": "Specify the width of Select"
        },
        {
          "name": "hideRequiredMarker",
          "type": "boolean",
          "description": "Specify if the Select displays with an asterisk",
          "defaultValue": "false"
        },
        {
          "name": "validationRules",
          "type": "FormValidator[]",
          "description": "Specify form validation rules for Select"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the Select. By default it inherits the theme from the parent"
        },
        {
          "name": "clearable",
          "type": "boolean",
          "description": "Specify if the Select is clearable. Defaults to `true` if `multiple` is set, `false` otherwise"
        },
        {
          "name": "contentBefore",
          "type": "ReactNode",
          "description": "Specify content to display before selection"
        },
        {
          "name": "contentAfter",
          "type": "ReactNode",
          "description": "Specify content to display after selection"
        },
        {
          "name": "ariaLabel",
          "type": "string",
          "description": "Specify an accessible label for the Select"
        }
      ],
      "subcomponentProps": [
        {
          "name": "Select.Option",
          "props": [
            {
              "name": "value",
              "type": "string",
              "description": "Specify the value of the option. Use this to control selectedOptions or to get the option value in the onOptionSelect callback. Defaults to the text content of the option"
            },
            {
              "name": "label",
              "type": "string",
              "description": "Specify the label of the option. Defaults to the text content of the option"
            },
            {
              "name": "children",
              "type": "ReactNode",
              "description": "Add text to an item",
              "required": true
            },
            {
              "name": "supportingText",
              "type": "string",
              "description": "Add secondary support text"
            },
            {
              "name": "contentAfter",
              "type": "ReactNode",
              "description": "Add content after the text"
            },
            {
              "name": "contentBefore",
              "type": "ReactNode",
              "description": "Add content before the text"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "description": "Specify if a list item is disabled",
              "defaultValue": "false"
            },
            {
              "name": "onSelectionChange",
              "type": "(selected: boolean) => void",
              "description": "Specify a callback that fires when a list item is selected or deselected"
            },
            {
              "name": "tooltipPlacement",
              "type": "enum",
              "description": ""
            },
            {
              "name": "as",
              "type": "\"div\"",
              "description": "Specify a different component to render the item, such as an anchor tag for links",
              "defaultValue": "div"
            }
          ]
        },
        {
          "name": "Select.OptionGroup",
          "props": [
            {
              "name": "heading",
              "type": "ReactNode",
              "description": "Visible group label rendered above the group's options. Used as the source for `aria-label` on the group container."
            },
            {
              "name": "divider",
              "type": "boolean",
              "description": "Render a visual separator below the group.",
              "defaultValue": "false"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "description": "Disables every Option inside the group. Heading remains visible; options are non-interactive.",
              "defaultValue": "false"
            },
            {
              "name": "children",
              "type": "ReactNode",
              "description": "`Option` components. Nested `OptionGroup`s are not supported."
            }
          ]
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Select.",
          "source": "<Select {...args}>\n        <Select.Option value=\"item1\">List item 1</Select.Option>\n        <Select.Option value=\"item2\">List item 2</Select.Option>\n        <Select.Option value=\"item3\">List item 3</Select.Option>\n        <Select.Option value=\"item4\">List item 4</Select.Option>\n        <Select.Option value=\"item5\">List item 5</Select.Option>\n        <Select.Option value=\"item6\">List item 6</Select.Option>\n        <Select.Option value=\"item7\">List item 7</Select.Option>\n        <Select.Option value=\"item8\">List item 8</Select.Option>\n        <Select.Option value=\"item9\">List item 9</Select.Option>\n        <Select.Option value=\"item10\">List item 10</Select.Option>\n        <Select.Option value=\"item11\">List item 11</Select.Option>\n        <Select.Option value=\"item12\">List item 12</Select.Option>\n        <Select.Option value=\"item13\">List item 13</Select.Option>\n        <Select.Option value=\"item14\">List item 14</Select.Option>\n        <Select.Option value=\"item15\">List item 15</Select.Option>\n        <Select.Option value=\"item16\">List item 16</Select.Option>\n        <Select.Option value=\"item17\">List item 17</Select.Option>\n        <Select.Option value=\"item18\">List item 18</Select.Option>\n        <Select.Option value=\"item19\">List item 19</Select.Option>\n        <Select.Option value=\"item20\">List item 20</Select.Option>\n      </Select>"
        },
        {
          "name": "Without Label",
          "description": "Displaying the `Label` is optional. Select will display without Label if `children` is not passed to `labelProps`. Set `aria-label` to make this input accessible for screen readers.",
          "source": "<Select {...args}>\n      <Select.Option value=\"item1\">List item 1</Select.Option>\n      <Select.Option value=\"item2\">List item 2</Select.Option>\n      <Select.Option value=\"item3\">List item 3</Select.Option>\n    </Select>"
        },
        {
          "name": "With Helper Text",
          "description": "Displaying `HelperText` is optional. Select will display with `HelperText` if `children` is passed to `helperTextProps`.",
          "source": "<Select {...args}>\n      <Select.Option value=\"item1\">List item 1</Select.Option>\n      <Select.Option value=\"item2\">List item 2</Select.Option>\n      <Select.Option value=\"item3\">List item 3</Select.Option>\n    </Select>"
        },
        {
          "name": "Required",
          "description": "Set `required` to `true` to make Select required. Set `hideRequiredMarker` to `true` to remove the asterisk (*).",
          "source": "<>\n      <Select {...args} label={<Label>With required marker</Label>}>\n        <Select.Option value=\"item1\">List item 1</Select.Option>\n        <Select.Option value=\"item2\">List item 2</Select.Option>\n        <Select.Option value=\"item3\">List item 3</Select.Option>\n      </Select>\n      <Select\n        {...args}\n        label={<Label>Without required marker</Label>}\n        hideRequiredMarker\n      >\n        <Select.Option value=\"item1\">List item 1</Select.Option>\n        <Select.Option value=\"item2\">List item 2</Select.Option>\n        <Select.Option value=\"item3\">List item 3</Select.Option>\n      </Select>\n    </>"
        },
        {
          "name": "Optional",
          "description": "Pass `optional` to `labelProps` to show that a Select is optional.\n\n> Do not mix required and optional markers in the same form set.",
          "source": "<Select {...args}>\n      <Select.Option value=\"item1\">List item 1</Select.Option>\n      <Select.Option value=\"item2\">List item 2</Select.Option>\n      <Select.Option value=\"item3\">List item 3</Select.Option>\n    </Select>"
        },
        {
          "name": "Error",
          "description": "Use `error` to specify `HelperText` text and display Select in an error state.",
          "source": "<Select {...args}>\n      <Select.Option value=\"item1\">List item 1</Select.Option>\n      <Select.Option value=\"item2\">List item 2</Select.Option>\n      <Select.Option value=\"item3\">List item 3</Select.Option>\n    </Select>"
        },
        {
          "name": "Read Only",
          "description": "Set `readOnly` to `true` to display Select in a read only state.",
          "source": "<Select {...args}>\n      <Select.Option value=\"item1\">List item 1</Select.Option>\n      <Select.Option value=\"item2\">List item 2</Select.Option>\n      <Select.Option value=\"item3\">List item 3</Select.Option>\n    </Select>"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` to display Select in a disabled state.",
          "source": "<Select {...args}>\n      <Select.Option value=\"item1\">List item 1</Select.Option>\n      <Select.Option value=\"item2\">List item 2</Select.Option>\n      <Select.Option value=\"item3\">List item 3</Select.Option>\n    </Select>"
        },
        {
          "name": "Multiselect",
          "description": "Set `multiselect` to `true` to allow multiple items to be selected.",
          "source": "<Select {...args}>\n      <Select.Option value=\"item1\">List item 1</Select.Option>\n      <Select.Option value=\"item2\">List item 2</Select.Option>\n      <Select.Option value=\"item3\">List item 3</Select.Option>\n      <Select.Option value=\"item4\">List item 4</Select.Option>\n      <Select.Option value=\"item5\">List item 5</Select.Option>\n      <Select.Option value=\"item6\">List item 6</Select.Option>\n      <Select.Option value=\"item7\">List item 7</Select.Option>\n      <Select.Option value=\"item8\">List item 8</Select.Option>\n      <Select.Option value=\"item9\">List item 9</Select.Option>\n      <Select.Option value=\"item10\">List item 10</Select.Option>\n      <Select.Option value=\"item11\">List item 11</Select.Option>\n      <Select.Option value=\"item12\">List item 12</Select.Option>\n      <Select.Option value=\"item13\">List item 13</Select.Option>\n      <Select.Option value=\"item14\">List item 14</Select.Option>\n      <Select.Option value=\"item15\">List item 15</Select.Option>\n      <Select.Option value=\"item16\">List item 16</Select.Option>\n      <Select.Option value=\"item17\">List item 17</Select.Option>\n      <Select.Option value=\"item18\">List item 18</Select.Option>\n      <Select.Option value=\"item19\">List item 19</Select.Option>\n      <Select.Option value=\"item20\">List item 20</Select.Option>\n    </Select>"
        },
        {
          "name": "With Grouped Options",
          "description": "Wrap related options in `Select.OptionGroup` to display a heading above a group. Use `divider` to add a visual separator between groups.\n\n> Root-level options can be mixed in alongside groups and will render in source order.",
          "source": "<Select {...args}>\n      <Select.OptionGroup heading=\"Planets\" divider>\n        <Select.Option value=\"mercury\">Mercury</Select.Option>\n        <Select.Option value=\"venus\">Venus</Select.Option>\n        <Select.Option value=\"earth\">Earth</Select.Option>\n      </Select.OptionGroup>\n      <Select.OptionGroup heading=\"Moons\">\n        <Select.Option value=\"callisto\">Callisto</Select.Option>\n        <Select.Option value=\"titan\">Titan</Select.Option>\n      </Select.OptionGroup>\n    </Select>"
        },
        {
          "name": "Width",
          "description": "Use `width` to customize the width of a Select. Use `rems` to specify width to ensure Select scales with user preferences.",
          "source": "<Select {...args}>\n      <Select.Option value=\"item1\">List item 1</Select.Option>\n      <Select.Option value=\"item2\">List item 2</Select.Option>\n      <Select.Option value=\"item3\">List item 3</Select.Option>\n    </Select>"
        },
        {
          "name": "Fluid",
          "description": "Set `fluid` to `true` to make Select span its parent container.",
          "source": "<Select {...args}>\n      <Select.Option value=\"item1\">List item 1</Select.Option>\n      <Select.Option value=\"item2\">List item 2</Select.Option>\n      <Select.Option value=\"item3\">List item 3</Select.Option>\n    </Select>"
        },
        {
          "name": "Content Before And After",
          "description": "Select supports icons, flags, payment logos, etc as `contentBefore` and `contentAfter`.",
          "source": "const [flag, setFlag] = useState<keyof typeof flags>('UnitedStatesOfAmerica');\n    const [payment, setPayment] = useState<keyof typeof paymentMethods>('ApplePay');\n\n    const handleFlagChange = useCallback((event: ChangeEvent<HTMLSelectElement>) => {\n      setFlag(event.target.value as keyof typeof flags);\n    }, []);\n\n    const handlePaymentChange = useCallback(\n      (event: ChangeEvent<HTMLSelectElement>) => {\n        setPayment(event.target.value as keyof typeof paymentMethods);\n      },\n      [],\n    );\n\n    return (\n      <>\n        <Select\n          label={<Label>Content before</Label>}\n          contentBefore={<Icon icon={Satellite} ariaLabel=\"Satellite icon\" />}\n          value=\"item1\"\n        >\n          <Select.Option value=\"item1\">List item 1</Select.Option>\n          <Select.Option value=\"item2\">List item 2</Select.Option>\n          <Select.Option value=\"item3\">List item 3</Select.Option>\n        </Select>\n        <Select\n          label={<Label>Content after</Label>}\n          contentAfter={<Icon icon={Satellite} ariaLabel=\"Satellite icon\" />}\n          value=\"item1\"\n        >\n          <Select.Option value=\"item1\">List item 1</Select.Option>\n          <Select.Option value=\"item2\">List item 2</Select.Option>\n          <Select.Option value=\"item3\">List item 3</Select.Option>\n        </Select>\n        <Select\n          label={<Label>Content before</Label>}\n          contentBefore={<Icon icon={flags[flag]} />}\n          onChange={handleFlagChange}\n          value={flag}\n        >\n          <Select.Option\n            value=\"UnitedStatesOfAmerica\"\n            contentBefore={<Icon icon={UnitedStatesOfAmerica} />}\n          >\n            United States\n          </Select.Option>\n          <Select.Option value=\"Romania\" contentBefore={<Icon icon={Romania} />}>\n            Romania\n          </Select.Option>\n          <Select.Option\n            value=\"UnitedKingdom\"\n            contentBefore={<Icon icon={UnitedKingdom} />}\n          >\n            United Kingdom\n          </Select.Option>\n          <Select.Option value=\"Ireland\" contentBefore={<Icon icon={Ireland} />}>\n            Ireland\n          </Select.Option>\n        </Select>\n        <Select\n          label={<Label>Content before</Label>}\n          contentBefore={<Icon icon={paymentMethods[payment]} />}\n          onChange={handlePaymentChange}\n          value={payment}\n        >\n          <Select.Option value=\"ApplePay\" contentBefore={<Icon icon={ApplePay} />}>\n            Apple Pay\n          </Select.Option>\n          <Select.Option value=\"Visa\" contentBefore={<Icon icon={Visa} />}>\n            Visa\n          </Select.Option>\n          <Select.Option\n            value=\"Mastercard\"\n            contentBefore={<Icon icon={Mastercard} />}\n          >\n            Mastercard\n          </Select.Option>\n          <Select.Option value=\"Bank\" contentBefore={<Icon icon={Bank} />}>\n            Bank Transfer\n          </Select.Option>\n        </Select>\n        <Select\n          label={<Label>Content before and after with chips</Label>}\n          placeholder={placeholderTextMultiselect}\n          contentBefore={<Icon icon={Satellite} ariaLabel=\"Satellite icon\" />}\n          contentAfter={<Icon icon={Satellite} ariaLabel=\"Satellite icon\" />}\n          multiple\n          defaultValue={['item1']}\n        >\n          <Select.Option value=\"item1\">List item 1</Select.Option>\n          <Select.Option value=\"item2\">List item 2</Select.Option>\n          <Select.Option value=\"item3\">List item 3</Select.Option>\n        </Select>\n        <Select\n          label={<Label>Text before and after</Label>}\n          placeholder={placeholderText}\n          contentBefore=\"Text\"\n          contentAfter=\"Text\"\n        >\n          <Select.Option value=\"item1\">List item 1</Select.Option>\n          <Select.Option value=\"item2\">List item 2</Select.Option>\n          <Select.Option value=\"item3\">List item 3</Select.Option>\n        </Select>\n      </>\n    );"
        },
        {
          "name": "Size",
          "description": "Select supports `sm`, `md`, and `lg` sizes. Default size is `md`.",
          "source": "<>\n        <Select\n          size=\"sm\"\n          label={<Label>Small</Label>}\n          helperText={<HelperText>Helper text</HelperText>}\n          placeholder={placeholderText}\n          contentBefore={<Icon icon={Satellite} ariaLabel=\"Satellite icon\" />}\n          contentAfter={<Visa aria-label=\"Visa icon\" />}\n        >\n          <Select.Option value=\"item1\">List item 1</Select.Option>\n          <Select.Option value=\"item2\">List item 2</Select.Option>\n          <Select.Option value=\"item3\">List item 3</Select.Option>\n        </Select>\n        <Select\n          size=\"md\"\n          label={<Label>Medium</Label>}\n          helperText={<HelperText>Helper text</HelperText>}\n          placeholder={placeholderText}\n          contentBefore={<Icon icon={Satellite} ariaLabel=\"Satellite icon\" />}\n          contentAfter={<Visa aria-label=\"Visa icon\" />}\n        >\n          <Select.Option value=\"item1\">List item 1</Select.Option>\n          <Select.Option value=\"item2\">List item 2</Select.Option>\n          <Select.Option value=\"item3\">List item 3</Select.Option>\n        </Select>\n        <Select\n          size=\"lg\"\n          label={<Label>Large</Label>}\n          helperText={<HelperText>Helper text</HelperText>}\n          placeholder={placeholderText}\n          contentBefore={<Icon icon={Satellite} ariaLabel=\"Satellite icon\" />}\n          contentAfter={<Visa aria-label=\"Visa icon\" />}\n        >\n          <Select.Option value=\"item1\">List item 1</Select.Option>\n          <Select.Option value=\"item2\">List item 2</Select.Option>\n          <Select.Option value=\"item3\">List item 3</Select.Option>\n        </Select>\n      </>"
        },
        {
          "name": "Controlled",
          "description": "Setting `value` prop makes the Select controlled",
          "source": "const [singleSelectValue, setSingleSelectValue] = useState<string | undefined>(\n      undefined,\n    );\n    const handleChangeSingleSelect = useCallback(\n      (event: React.ChangeEvent<HTMLSelectElement>) => {\n        setSingleSelectValue(event.target.value);\n      },\n      [],\n    );\n\n    const [multiSelectValue, setMultiSelectValue] = useState<string[]>([]);\n    const handleChangeMultiSelect = useCallback(\n      (event: React.ChangeEvent<HTMLSelectElement>) => {\n        const selectedOptions = Array.from(\n          event.target.selectedOptions,\n          option => option.value,\n        );\n        setMultiSelectValue(selectedOptions);\n      },\n      [],\n    );\n\n    return (\n      <>\n        <Select\n          label={<Label>Single select</Label>}\n          placeholder={placeholderText}\n          value={singleSelectValue}\n          onChange={handleChangeSingleSelect}\n          name=\"select-controlled\"\n        >\n          <Select.Option value=\"item1\">List item 1</Select.Option>\n          <Select.Option value=\"item2\">List item 2</Select.Option>\n          <Select.Option value=\"item3\">List item 3</Select.Option>\n          <Select.Option value=\"item4\">List item 4</Select.Option>\n        </Select>\n        <Select\n          label={<Label>Multi select</Label>}\n          placeholder={placeholderTextMultiselect}\n          value={multiSelectValue}\n          onChange={handleChangeMultiSelect}\n          name=\"select-multiple-controlled\"\n          multiple\n        >\n          <Select.Option value=\"item1\">List item 1</Select.Option>\n          <Select.Option value=\"item2\">List item 2</Select.Option>\n          <Select.Option value=\"item3\">List item 3</Select.Option>\n          <Select.Option value=\"item4\">List item 4</Select.Option>\n        </Select>\n      </>\n    );"
        },
        {
          "name": "Truncation",
          "description": "Long placeholders, selected values, or chips are truncated. Tooltips will display on chips and on items within the actionlist",
          "source": "<>\n      <Select\n        label={<Label>Single select</Label>}\n        placeholder=\"Select an option or something because I'm lonely and need some friends and this world is terrifying and I just want to be happy...\"\n      >\n        <Select.Option value=\"item1\">\n          This is the first and foremost option that one could pick during a moment\n          of existential dread\n        </Select.Option>\n        <Select.Option value=\"item2\">\n          This is the second option that might bring a glimmer of hope\n        </Select.Option>\n        <Select.Option value=\"item3\">\n          This is the third option, a beacon of light in the darkness\n        </Select.Option>\n        <Select.Option value=\"item4\">\n          This is the fourth option, a reminder that we are not alone\n        </Select.Option>\n        <Select.Option value=\"item5\">List item 5</Select.Option>\n      </Select>\n      <Select\n        label={<Label>Multi select</Label>}\n        placeholder=\"Select an option or something because I'm lonely and need some friends and this world is terrifying and I just want to be happy...\"\n        multiple\n      >\n        <Select.Option value=\"item1\">\n          This is the first and foremost option that one could pick during a moment\n          of existential dread\n        </Select.Option>\n        <Select.Option value=\"item2\">\n          This is the second option that might bring a glimmer of hope\n        </Select.Option>\n        <Select.Option value=\"item3\">\n          This is the third option, a beacon of light in the darkness\n        </Select.Option>\n        <Select.Option value=\"item4\">\n          This is the fourth option, a reminder that we are not alone\n        </Select.Option>\n        <Select.Option value=\"item5\">List item 5</Select.Option>\n      </Select>\n    </>"
        }
      ],
      "category": "Forms",
      "displayName": "Select",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/SegmentedControl",
      "slug": "components-segmentedcontrol",
      "description": "SegmentedControl is a set of two or more mutually exclusive options to filter\nor navigate between different sections of content within a single view,\nmaking it easy to switch between related or non-related information.",
      "type": "component",
      "props": [
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if all SegmentedControl items are disabled",
          "defaultValue": "false"
        },
        {
          "name": "size",
          "type": "'sm' | 'md' | 'lg'",
          "description": "Specify the size of a SegmentedControl",
          "defaultValue": "md"
        },
        {
          "name": "onChange",
          "type": "(value: string) => void",
          "description": "Specify a callback function to utilize the value of the selected item"
        },
        {
          "name": "initialSelection",
          "type": "string",
          "description": "Specify the value of the initially selected item"
        },
        {
          "name": "fluid",
          "type": "boolean",
          "description": "Specify if the SegmentedControl is fluid within its parent container",
          "defaultValue": "false"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the SegmentedControl"
        },
        {
          "name": "children",
          "type": "ReactNode",
          "description": "Specify the content of the SegmentedControl"
        }
      ],
      "subcomponentProps": [
        {
          "name": "SegmentedControl.List",
          "props": [
            {
              "name": "children",
              "type": "ReactElement<SegmentedControlItemProps, string | JSXElementConstructor<any>> | ReactElement<SegmentedControlItemProps, string | JSXElementConstructor<...>>[]",
              "description": "Specify the items of the list",
              "required": true
            }
          ]
        },
        {
          "name": "SegmentedControl.Item",
          "props": [
            {
              "name": "value",
              "type": "string",
              "description": "Specify the value of the item",
              "required": true
            },
            {
              "name": "children",
              "type": "ReactNode",
              "description": "Specify the text of the item"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "description": "Specify if this item is disabled"
            },
            {
              "name": "icon",
              "type": "ReactNode",
              "description": "Specify an icon for the item"
            }
          ]
        },
        {
          "name": "SegmentedControl.Panel",
          "props": [
            {
              "name": "value",
              "type": "string",
              "description": "Specify the value of the panel",
              "required": true
            },
            {
              "name": "children",
              "type": "ReactNode",
              "description": "Specify the content of the panel"
            }
          ]
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default SegmentedControl.",
          "source": "<SegmentedControl size={size} disabled={disabled} fluid={fluid}>\n      <SegmentedControl.List>\n        <SegmentedControl.Item value=\"one\">Item one</SegmentedControl.Item>\n        <SegmentedControl.Item value=\"two\">Item two</SegmentedControl.Item>\n      </SegmentedControl.List>\n    </SegmentedControl>"
        },
        {
          "name": "Segments",
          "description": "Pass `SegmentedControl.Items` to SegmentedControl as needed.\n\n> Do not add more than 6 items to a SegmentedControl. If more than 6 items are needed, consider using [Chips](?path=/docs/components-chip-chipgroup--docs) instead.",
          "source": "<>\n      <SegmentedControl>\n        <SegmentedControl.List>\n          <SegmentedControl.Item value=\"one\">Item one</SegmentedControl.Item>\n          <SegmentedControl.Item value=\"two\">Item two</SegmentedControl.Item>\n        </SegmentedControl.List>\n      </SegmentedControl>\n      <SegmentedControl>\n        <SegmentedControl.List>\n          <SegmentedControl.Item value=\"one\">Item one</SegmentedControl.Item>\n          <SegmentedControl.Item value=\"two\">Item two</SegmentedControl.Item>\n          <SegmentedControl.Item value=\"three\">Item three</SegmentedControl.Item>\n          <SegmentedControl.Item value=\"four\">Item four</SegmentedControl.Item>\n        </SegmentedControl.List>\n      </SegmentedControl>\n    </>"
        },
        {
          "name": "Size",
          "description": "SegmentedControl supports `sm`, `md`, and `lg`. Default size is `md`.",
          "source": "<>\n      <SegmentedControl size=\"sm\">\n        <SegmentedControl.List>\n          <SegmentedControl.Item value=\"one\">Small control</SegmentedControl.Item>\n          <SegmentedControl.Item value=\"two\">Small control</SegmentedControl.Item>\n        </SegmentedControl.List>\n      </SegmentedControl>\n      <SegmentedControl size=\"md\">\n        <SegmentedControl.List>\n          <SegmentedControl.Item value=\"one\">Medium control</SegmentedControl.Item>\n          <SegmentedControl.Item value=\"two\">Medium control</SegmentedControl.Item>\n        </SegmentedControl.List>\n      </SegmentedControl>\n      <SegmentedControl size=\"lg\">\n        <SegmentedControl.List>\n          <SegmentedControl.Item value=\"one\">Large control</SegmentedControl.Item>\n          <SegmentedControl.Item value=\"two\">Large control</SegmentedControl.Item>\n        </SegmentedControl.List>\n      </SegmentedControl>\n    </>"
        },
        {
          "name": "With Icon",
          "description": "Pass `icon` to `SegmentedControl.Item` to add icons to the SegmentedControl.",
          "source": "<>\n      {SegmentedControlSizes.map(size => (\n        <SegmentedControl size={size} key={size} id={`bm-segmented-control-${size}`}>\n          <SegmentedControl.List>\n            <SegmentedControl.Item icon={<Satellite />} value=\"one\">\n              With icon\n            </SegmentedControl.Item>\n            <SegmentedControl.Item icon={<Satellite />} value=\"two\">\n              With icon\n            </SegmentedControl.Item>\n            <SegmentedControl.Item icon={<Satellite />} value=\"three\">\n              With icon\n            </SegmentedControl.Item>\n          </SegmentedControl.List>\n        </SegmentedControl>\n      ))}\n    </>"
        },
        {
          "name": "Icon Only",
          "description": "Pass `icon` to `SegmentedControl.Item` to create icon only SegmentedControl.\nAdding text to SegmentedControl items is optional. If no `children` are passed, set aria-label to make the SegmentedControl accessible for screen readers.\n\n> When `aria-label` is passed, the same value will also display as a Tooltip",
          "source": "<SegmentedControl>\n      <SegmentedControl.List>\n        <SegmentedControl.Item\n          value=\"one\"\n          icon={<Satellite />}\n          aria-label=\"Item one\"\n        />\n        <SegmentedControl.Item\n          value=\"two\"\n          icon={<Satellite />}\n          aria-label=\"Item two\"\n        />\n        <SegmentedControl.Item\n          value=\"three\"\n          icon={<Satellite />}\n          aria-label=\"Item three\"\n        />\n      </SegmentedControl.List>\n    </SegmentedControl>"
        },
        {
          "name": "Width",
          "description": "By default, the width of each segment item is defined by its content. Set `fluid` to `true` to display equal width items.\n\n> Add a max-width to the parent to display a fixed size control with equal width items.",
          "source": "<>\n      <Box style={{ display: 'flex', flexDirection: 'column', gap: bmSemSpace75 }}>\n        <Text color=\"secondary\" kind=\"body-sm\">\n          Default\n        </Text>\n        <SegmentedControl>\n          <SegmentedControl.List>\n            <SegmentedControl.Item value=\"one\">Item one</SegmentedControl.Item>\n            <SegmentedControl.Item value=\"two\">Item two</SegmentedControl.Item>\n          </SegmentedControl.List>\n        </SegmentedControl>\n      </Box>\n\n      <Box style={{ display: 'flex', flexDirection: 'column', gap: bmSemSpace75 }}>\n        <Text color=\"secondary\" kind=\"body-sm\">\n          Fluid\n        </Text>\n        <SegmentedControl fluid>\n          <SegmentedControl.List>\n            <SegmentedControl.Item value=\"one\">Item one</SegmentedControl.Item>\n            <SegmentedControl.Item value=\"two\">Item two</SegmentedControl.Item>\n          </SegmentedControl.List>\n        </SegmentedControl>\n      </Box>\n\n      <Box style={{ display: 'flex', flexDirection: 'column', gap: bmSemSpace75 }}>\n        <Text color=\"secondary\" kind=\"body-sm\">\n          Fluid with max-width\n        </Text>\n        <SegmentedControl fluid style={{ maxWidth: '25rem' }}>\n          <SegmentedControl.List>\n            <SegmentedControl.Item value=\"one\">Item one</SegmentedControl.Item>\n            <SegmentedControl.Item value=\"two\">Item two</SegmentedControl.Item>\n          </SegmentedControl.List>\n        </SegmentedControl>\n      </Box>\n    </>"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` on a `SegmentedControl.Item` to display a specific item in a disabled state.\nSet `disabled` to `true` on `SegmentedControl` to display the entire control in a disabled state.",
          "source": "<>\n      <SegmentedControl>\n        <SegmentedControl.List>\n          <SegmentedControl.Item icon={<Satellite />} value=\"one\">\n            Enabled control\n          </SegmentedControl.Item>\n          <SegmentedControl.Item icon={<Satellite />} value=\"two\">\n            Enabled control\n          </SegmentedControl.Item>\n          <SegmentedControl.Item icon={<Satellite />} value=\"three\" disabled>\n            Disabled control\n          </SegmentedControl.Item>\n        </SegmentedControl.List>\n      </SegmentedControl>\n\n      <SegmentedControl disabled>\n        <SegmentedControl.List>\n          <SegmentedControl.Item icon={<Satellite />} value=\"one\">\n            Disabled control\n          </SegmentedControl.Item>\n          <SegmentedControl.Item icon={<Satellite />} value=\"two\">\n            Disabled control\n          </SegmentedControl.Item>\n          <SegmentedControl.Item icon={<Satellite />} value=\"three\">\n            Disabled control\n          </SegmentedControl.Item>\n        </SegmentedControl.List>\n      </SegmentedControl>\n    </>"
        },
        {
          "name": "Panel Example",
          "description": "SegmentedControl.Panel allows SegmentedControl to toggle between different views and content.\n\n> This example demonstrates how SegmentedControl uses SegmentedControl.Panel to toggle between list and grid views.",
          "source": "const planets = [\n      {\n        name: 'Mercury',\n        description:\n          'Mercury is the first planet from the Sun and the smallest in the Solar System.',\n      },\n      {\n        name: 'Venus',\n        description:\n          'Venus is the second planet from the Sun and is the closest in size to its orbital neighbor Earth.',\n      },\n      {\n        name: 'Jupiter',\n        description:\n          'Jupiter is the fifth planet from the Sun and the largest in the Solar System.',\n      },\n      {\n        name: 'Saturn',\n        description:\n          'Saturn is the sixth planet from the Sun and the second largest in the Solar System, after Jupiter.',\n      },\n    ];\n\n    return (\n      <div>\n        <SegmentedControl\n          id=\"bm-segmented-control-panel-example\"\n          size=\"sm\"\n          className={segmentedControlPanelStyles['segmented-control-container']}\n        >\n          <div className={segmentedControlPanelStyles['segmented-control-header']}>\n            <Text kind=\"heading-lg\">Planets</Text>\n\n            <SegmentedControl.List\n              className={segmentedControlPanelStyles['segmented-control-list']}\n            >\n              <SegmentedControl.Item value=\"list\" icon={<ViewList />}>\n                List view\n              </SegmentedControl.Item>\n              <SegmentedControl.Item value=\"grid\" icon={<GridOn />}>\n                Grid view\n              </SegmentedControl.Item>\n            </SegmentedControl.List>\n          </div>\n\n          <SegmentedControl.Panel value=\"list\">\n            <Box className={segmentedControlPanelStyles['list-view']}>\n              {planets.map(planet => (\n                <Box\n                  key={planet.name}\n                  backgroundColor=\"02\"\n                  borderRadius=\"sm\"\n                  borderWidth=\"md\"\n                  borderColor=\"02\"\n                  className={segmentedControlPanelStyles['planet-card-list']}\n                >\n                  <Text block kind=\"label-lg\">\n                    {planet.name}\n                  </Text>\n                  <Text block kind=\"body-sm\">\n                    {planet.description}\n                  </Text>\n                </Box>\n              ))}\n            </Box>\n          </SegmentedControl.Panel>\n          <SegmentedControl.Panel value=\"grid\">\n            <Box className={segmentedControlPanelStyles['grid-view']}>\n              {planets.map(planet => (\n                <Box\n                  key={planet.name}\n                  backgroundColor=\"02\"\n                  borderRadius=\"sm\"\n                  borderWidth=\"md\"\n                  borderColor=\"02\"\n                  className={segmentedControlPanelStyles['planet-card-grid']}\n                >\n                  <Text block kind=\"label-lg\">\n                    {planet.name}\n                  </Text>\n                  <Text block kind=\"body-sm\">\n                    {planet.description}\n                  </Text>\n                </Box>\n              ))}\n            </Box>\n          </SegmentedControl.Panel>\n        </SegmentedControl>\n      </div>\n    );"
        }
      ],
      "category": "Components",
      "displayName": "SegmentedControl",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Search",
      "slug": "components-search",
      "description": "Search allows users to enter queries to discover, explore, or retrieve an open-ended set of results. Use this for exploration where the user might not know exactly what they are looking for.\n\nIf the field requires the user to pick a specific, validated value from a defined list, use an [Autocomplete](/docs/forms-autocomplete--docs) instead.",
      "type": "component",
      "props": [
        {
          "name": "label",
          "type": "Nullable<React.ReactElement>",
          "description": "Specify Label for Search"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if Search displays in a disabled state",
          "defaultValue": "false"
        },
        {
          "name": "placeholder",
          "type": "string",
          "description": "Specify placeholder text for Search"
        },
        {
          "name": "size",
          "type": "any",
          "description": "Specify the size of Search.\nPassing a number is a deprecated, backward-compatible shorthand for the\nnative character width — use `htmlSize` instead.",
          "defaultValue": "'md'"
        },
        {
          "name": "width",
          "type": "string",
          "description": "Specify the width of Search"
        },
        {
          "name": "children",
          "type": "React.ReactNode",
          "description": "Specify the Search results to display in the Search dropdown\n(see Search.Results)"
        },
        {
          "name": "onSearch",
          "type": "(query: string) => void",
          "description": "Specify a callback to load or filter results when the query changes",
          "required": true
        },
        {
          "name": "debounce",
          "type": "number",
          "description": "Specify the debounce time (in milliseconds) for the search input",
          "defaultValue": "200"
        },
        {
          "name": "helperText",
          "type": "Nullable<React.ReactElement>",
          "description": "Specify HelperText for Search"
        },
        {
          "name": "fluid",
          "type": "boolean",
          "description": "Specify if Search is fluid",
          "defaultValue": "false"
        },
        {
          "name": "htmlSize",
          "type": "number",
          "description": "Specify the native input width in average character widths\n(the HTML `size` attribute)"
        },
        {
          "name": "loading",
          "type": "boolean",
          "description": "Display a loading state for Search",
          "defaultValue": "false"
        },
        {
          "name": "clearable",
          "type": "boolean",
          "description": "Adds a clear button to the Search input",
          "defaultValue": "true"
        },
        {
          "name": "hideIcon",
          "type": "boolean",
          "description": "Specify if the icon displays on the Search"
        },
        {
          "name": "icon",
          "type": "React.FC<any>",
          "description": "Specify a different icon for the Search"
        },
        {
          "name": "contentBefore",
          "type": "React.ReactNode",
          "description": "Specify content to display before input"
        },
        {
          "name": "contentAfter",
          "type": "React.ReactNode",
          "description": "Specify content to display after input"
        },
        {
          "name": "error",
          "type": "string | boolean",
          "description": "Specify error text and display error state of a Search"
        },
        {
          "name": "noResults",
          "type": "string",
          "description": "Display a message if no results are found"
        },
        {
          "name": "clearButtonAriaLabel",
          "type": "string",
          "description": "Aria label for the clear button",
          "defaultValue": "Clear search"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the Search. By default it inherits the theme from the parent"
        }
      ],
      "subcomponentProps": [
        {
          "name": "Search.Results",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "Add list items to create a ActionList.Group"
            },
            {
              "name": "noResults",
              "type": "React.ReactNode",
              "description": "Display a message if no results are found"
            },
            {
              "name": "heading",
              "type": "any",
              "description": "Add a heading on top of a group"
            },
            {
              "name": "divider",
              "type": "boolean",
              "description": "Add a divider at the bottom of this group",
              "defaultValue": "false"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "description": "Specify if a group is disabled"
            }
          ]
        },
        {
          "name": "Search.Results.Item",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "Add text to an item",
              "required": true
            },
            {
              "name": "supportingText",
              "type": "string",
              "description": "Add secondary support text"
            },
            {
              "name": "contentAfter",
              "type": "ReactNode",
              "description": "Add content after the text"
            },
            {
              "name": "contentBefore",
              "type": "ReactNode",
              "description": "Add content before the text"
            },
            {
              "name": "defaultSelected",
              "type": "boolean",
              "description": "Specify if a list item is selected",
              "defaultValue": "false"
            },
            {
              "name": "kind",
              "type": "'action' | 'destructive' | 'flyout' | 'singleCheckMark' | 'multiCheckMark' | 'checkbox' | 'radio' | 'switch'",
              "description": "Specify what kind of item displays",
              "defaultValue": "'action'"
            },
            {
              "name": "indent",
              "type": "number | boolean",
              "description": "Display the default indention or specify a custom indention to align ActionList items"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "description": "Specify if a list item is disabled",
              "defaultValue": "false"
            },
            {
              "name": "onSelectionChange",
              "type": "(selected: boolean) => void",
              "description": "Specify a callback that fires when a list item is selected or deselected"
            },
            {
              "name": "role",
              "type": "string",
              "description": "Specify the role of the item",
              "defaultValue": "'option'"
            },
            {
              "name": "tooltipPlacement",
              "type": "enum",
              "description": ""
            },
            {
              "name": "as",
              "type": "ElementType",
              "description": "Specify a different component to render the item, such as an anchor tag for links",
              "defaultValue": "div"
            },
            {
              "name": "ref",
              "type": "any",
              "description": ""
            }
          ]
        },
        {
          "name": "Search.Results.ViewAll",
          "props": [
            {
              "name": "as",
              "type": "ElementType",
              "description": "Specify a different component to render the item, such as an anchor tag for links",
              "defaultValue": "div"
            },
            {
              "name": "variant",
              "type": "enum",
              "description": "Specify the variant of the View All item. By default, it is inferred from context:\n'group' when inside a Search.Results, 'global' when directly inside Search."
            },
            {
              "name": "ref",
              "type": "any",
              "description": ""
            }
          ]
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Search.",
          "source": "<Search {...args} />"
        },
        {
          "name": "With Placeholder",
          "description": "Displaying placeholder text is optional.\nUse `placeholder` to display placeholder text in a Search.",
          "source": "<Search\n      id=\"with-placeholder\"\n      name=\"with-placeholder\"\n      aria-label=\"with placeholder\"\n      placeholder=\"Search\"\n    />"
        },
        {
          "name": "With Label",
          "description": "Pass a Label to `label` prop to display it above Search.\nSet `aria-label` to make Search accessible for screen readers\nif no visible label is provided.",
          "source": "<Search\n      id=\"with-label\"\n      name=\"with-label\"\n      label={<Label>Label</Label>}\n      placeholder=\"Search\"\n    />"
        },
        {
          "name": "With Helper Text",
          "description": "Displaying `HelperText` is optional. Search will display\nwith `HelperText` if passed as a prop.",
          "source": "<Search\n      id=\"with-helpertext\"\n      name=\"with-helpertext\"\n      aria-label=\"with helper text\"\n      placeholder=\"Search\"\n      helperText={<HelperText>Helper text</HelperText>}\n    />"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` to display Search in a disabled state.",
          "source": "<Search\n      disabled\n      id=\"search-disabled\"\n      name=\"search-disabled\"\n      aria-label=\"disabled\"\n      placeholder=\"Search\"\n    />"
        },
        {
          "name": "Width",
          "description": "Use `width` to customize the width of a Search.\nUse `rems` to specify width to ensure Search scales with user preferences.",
          "source": "<Search\n      width=\"25rem\"\n      id=\"custom-width\"\n      name=\"custom-width\"\n      aria-label=\"custom width\"\n      placeholder=\"Search\"\n    />"
        },
        {
          "name": "Fluid",
          "description": "Set `fluid` to `true` to make Search span its parent container.",
          "source": "<Search\n      fluid\n      id=\"fluid\"\n      name=\"fluid\"\n      aria-label=\"fluid\"\n      placeholder=\"Search\"\n    />"
        },
        {
          "name": "Icon",
          "description": "By default, Search includes a search icon. The icon may be customized or removed as needed.",
          "source": "<>\n      <Search\n        id=\"icon-default\"\n        name=\"icon-default\"\n        label={<Label optional=\"(default)\">Icon on</Label>}\n        placeholder=\"Search...\"\n        {...args}\n      />\n      <Search\n        id=\"icon-swap\"\n        name=\"icon-swap\"\n        label={<Label>Swap icon</Label>}\n        icon={PlaceOutlined}\n        placeholder=\"Search for your address\"\n        {...args}\n      />\n      <Search\n        id=\"icon-hidden\"\n        name=\"icon-hidden\"\n        label={<Label>No icon</Label>}\n        hideIcon={true}\n        placeholder=\"Search\"\n        {...args}\n      />\n    </>"
        },
        {
          "name": "Content Before And After",
          "description": "Search supports text, buttons, badges, etc as `contentBefore` and `contentAfter`.",
          "source": "<>\n        <Search\n          id=\"content-before-text\"\n          name=\"content-before-text\"\n          label={<Label>Content before with text</Label>}\n          contentBefore=\"Planets:\"\n          {...args}\n        />\n        <Search\n          id=\"content-before-badge\"\n          name=\"content-before-badge\"\n          label={<Label>Content before with badge</Label>}\n          contentBefore={\n            <Badge appearance=\"infoSecondary\" size=\"sm\" emphasis=\"medium\" hideIcon>\n              Galaxies\n            </Badge>\n          }\n          {...args}\n        />\n        <Search\n          id=\"content-after-button\"\n          name=\"content-after-button\"\n          label={<Label>Content after with button</Label>}\n          contentAfter={\n            <Button\n              kind=\"bare\"\n              appearance=\"neutral-subtle\"\n              size=\"sm\"\n              iconOnly\n              iconBefore={<Mic />}\n              aria-label=\"Microphone\"\n            />\n          }\n          placeholder=\"Search\"\n          {...args}\n        />\n        <Search\n          id=\"content-after-text\"\n          name=\"content-after-text\"\n          label={<Label>Content after with text</Label>}\n          contentAfter=\"Ctrl K\"\n          placeholder=\"Search\"\n          {...args}\n        />\n      </>"
        },
        {
          "name": "Size",
          "description": "Search supports `sm`, `md`, and `lg` sizes. Default size is `md`.",
          "source": "<>\n        <Search\n          size=\"sm\"\n          label={<Label>Small</Label>}\n          helperText={<HelperText>Helper text</HelperText>}\n          placeholder=\"Search...\"\n          contentBefore={<Icon icon={Satellite} ariaLabel=\"Satellite icon\" />}\n          contentAfter={<Visa aria-label=\"Visa icon\" />}\n          {...args}\n        />\n        <Search\n          size=\"md\"\n          label={<Label>Medium</Label>}\n          helperText={<HelperText>Helper text</HelperText>}\n          placeholder=\"Search...\"\n          contentBefore={<Icon icon={Satellite} ariaLabel=\"Satellite icon\" />}\n          contentAfter={<Visa aria-label=\"Visa icon\" />}\n          {...args}\n        />\n        <Search\n          size=\"lg\"\n          label={<Label>Large</Label>}\n          helperText={<HelperText>Helper text</HelperText>}\n          placeholder=\"Search...\"\n          contentBefore={<Icon icon={Satellite} ariaLabel=\"Satellite icon\" />}\n          contentAfter={<Visa aria-label=\"Visa icon\" />}\n          {...args}\n        />\n      </>"
        },
        {
          "name": "With Results",
          "description": "Use `Search.Results` to display results in the dropdown.",
          "source": "<Search {...args}>\n      <Search.Results divider>\n        <Search.Results.Item contentBefore={<Icon icon={SearchIcon} />}>\n          design systems in figma\n        </Search.Results.Item>\n        <Search.Results.Item contentBefore={<Icon icon={SearchIcon} />}>\n          design systems in storybook\n        </Search.Results.Item>\n        <Search.Results.Item\n          contentBefore={<Icon icon={DescriptionOutlined} />}\n          supportingText=\"/shared/design/\"\n        >\n          Design System Tokens.pdf\n        </Search.Results.Item>\n        <Search.Results.Item\n          contentBefore={<Icon icon={DescriptionOutlined} />}\n          supportingText=\"/shared/design/\"\n        >\n          WOW - Design System.pdf\n        </Search.Results.Item>\n        <Search.Results.Item\n          contentBefore={<Icon icon={Person} />}\n          supportingText=\"desmond@company.com\"\n        >\n          Desmond System (Product)\n        </Search.Results.Item>\n        <Search.Results.Item\n          contentBefore={<Icon icon={Person} />}\n          supportingText=\"jimmy@company.com\"\n        >\n          Jimmy System (Design)\n        </Search.Results.Item>\n      </Search.Results>\n      <Search.Results.ViewAll onClick={action('global view all clicked')}>\n        View all results\n      </Search.Results.ViewAll>\n    </Search>"
        },
        {
          "name": "With Grouped Results",
          "description": "Group results by category using multiple `Search.Results` with `heading` and `divider`.",
          "source": "<Search {...args}>\n      <Search.Results heading=\"Files\" divider>\n        <Search.Results.Item\n          contentBefore={<Icon icon={DescriptionOutlined} />}\n          supportingText=\"/shared/marketing/\"\n        >\n          Design System_Final_v3.pdf\n        </Search.Results.Item>\n        <Search.Results.Item\n          contentBefore={<Icon icon={DescriptionOutlined} />}\n          supportingText=\"/shared/design/\"\n        >\n          WOW - Design System.pdf\n        </Search.Results.Item>\n        <Search.Results.Item\n          contentBefore={<Icon icon={DescriptionOutlined} />}\n          supportingText=\"/shared/design/\"\n        >\n          OMG - Design System.pdf\n        </Search.Results.Item>\n        <Search.Results.ViewAll onClick={action('Files — view all clicked')}>\n          View all files\n        </Search.Results.ViewAll>\n      </Search.Results>\n      <Search.Results heading=\"People\" divider>\n        <Search.Results.Item\n          contentBefore={<Icon icon={Person} />}\n          supportingText=\"desmond@company.com\"\n        >\n          Desmond System (Product)\n        </Search.Results.Item>\n        <Search.Results.Item\n          contentBefore={<Icon icon={Person} />}\n          supportingText=\"john@company.com\"\n        >\n          John System (Product)\n        </Search.Results.Item>\n        <Search.Results.Item\n          contentBefore={<Icon icon={Person} />}\n          supportingText=\"jimmy@company.com\"\n        >\n          Jimmy System (Design)\n        </Search.Results.Item>\n        <Search.Results.ViewAll onClick={action('People — view all clicked')}>\n          View all people\n        </Search.Results.ViewAll>\n      </Search.Results>\n      <Search.Results.ViewAll onClick={action('global view all clicked')}>\n        View all results\n      </Search.Results.ViewAll>\n    </Search>"
        },
        {
          "name": "With Top Result",
          "description": "Surface a single high-confidence match as a \"Top result\" before the remaining groups.",
          "source": "<Search {...args}>\n      <Search.Results divider>\n        <Search.Results.Item\n          contentBefore={<Icon icon={DescriptionOutlined} />}\n          supportingText=\"/shared/design/\"\n        >\n          Beam Design System.fig\n        </Search.Results.Item>\n      </Search.Results>\n      <Search.Results heading=\"People\" divider>\n        <Search.Results.Item\n          contentBefore={<Icon icon={Person} />}\n          supportingText=\"desmond@company.com\"\n        >\n          Desmond System (Product)\n        </Search.Results.Item>\n        <Search.Results.Item\n          contentBefore={<Icon icon={Person} />}\n          supportingText=\"sdown@company.com\"\n        >\n          System Down (Product)\n        </Search.Results.Item>\n        <Search.Results.Item\n          contentBefore={<Icon icon={Person} />}\n          supportingText=\"jimmy@company.com\"\n        >\n          Jimmy System (Design)\n        </Search.Results.Item>\n      </Search.Results>\n      <Search.Results.ViewAll onClick={action('global view all clicked')}>\n        View all results\n      </Search.Results.ViewAll>\n    </Search>"
        },
        {
          "name": "With Empty State",
          "description": "When a search yields no matches, display an empty state message.",
          "source": "const { results, search, query } = useSimulatedSearch({ dataset: suggestions });\n\n    return (\n      <>\n        <Text kind=\"body-sm\">Type &quot;x&quot; to see the empty state</Text>\n        <Search\n          {...args}\n          onSearch={search}\n          noResults={\n            query.length > 0 && results.length === 0 ? 'No results found' : undefined\n          }\n        >\n          {results.length > 0 && (\n            <Search.Results>\n              {results.map(suggestion => (\n                <Search.Results.Item\n                  key={suggestion}\n                  contentBefore={<Icon icon={SearchIcon} />}\n                >\n                  {suggestion}\n                </Search.Results.Item>\n              ))}\n            </Search.Results>\n          )}\n        </Search>\n      </>\n    );"
        },
        {
          "name": "With Loading",
          "description": "Display a loading indicator while results are being fetched.",
          "source": "const { results, search, isSearching } = useSimulatedSearch({\n      dataset: suggestions,\n      timeout: query => (!query ? false : 1500),\n    });\n\n    return (\n      <>\n        <Text kind=\"body-sm\">Start typing to see the loading state</Text>\n        <Search {...args} onSearch={search} loading={isSearching}>\n          {results.length > 0 && (\n            <Search.Results>\n              {results.map(suggestion => (\n                <Search.Results.Item\n                  key={suggestion}\n                  contentBefore={<Icon icon={SearchIcon} />}\n                >\n                  {suggestion}\n                </Search.Results.Item>\n              ))}\n            </Search.Results>\n          )}\n        </Search>\n      </>\n    );"
        },
        {
          "name": "On Change",
          "description": "The search dropdown supports multiple activation modes. By default, it opens on focus\nbecause the dropdown renders whenever `children` are present. To open the dropdown only\nafter the user has typed something (onChange behavior), conditionally render children\nbased on the current query — when `query` is empty, pass no children so the dropdown\nstays closed.",
          "source": "const { results, search, query } = useSimulatedSearch({ dataset: suggestions });\n\n    return (\n      <>\n        <Text kind=\"body-sm\">Start typing \"design\" to see the dropdown</Text>\n        <Search {...args} onSearch={search}>\n          {query.length > 0 && results.length > 0 && (\n            <Search.Results>\n              {results.map(suggestion => (\n                <Search.Results.Item\n                  key={suggestion}\n                  contentBefore={<Icon icon={SearchIcon} />}\n                >\n                  {suggestion}\n                </Search.Results.Item>\n              ))}\n            </Search.Results>\n          )}\n        </Search>\n      </>\n    );"
        },
        {
          "name": "Example",
          "description": "This example simulates an asynchronous search operation.",
          "source": "const peopleSearch = useSimulatedSearch({ dataset: people, timeout: 200 });\n    const filesSearch = useSimulatedSearch({ dataset: files, timeout: 300 });\n    const suggestionsSearch = useSimulatedSearch({\n      dataset: suggestions,\n      timeout: 150,\n    });\n\n    const { results, isSearching, search } = useMultipleSimulatedSearches({\n      people: peopleSearch,\n      files: filesSearch,\n      suggestions: suggestionsSearch,\n    });\n\n    const personToItem = (person: typeof people[number]) =>\n      person && (\n        <Search.Results.Item\n          key={person.email}\n          contentBefore={<Icon icon={Person} />}\n          supportingText={person.email}\n        >\n          {person.name} ({person.department})\n        </Search.Results.Item>\n      );\n\n    const fileToItem = (file: typeof files[number]) =>\n      file && (\n        <Search.Results.Item\n          key={file.path + file.name}\n          contentBefore={<Icon icon={DescriptionOutlined} />}\n          supportingText={file.path}\n        >\n          {file.name}\n        </Search.Results.Item>\n      );\n\n    const suggestionToItem = (suggestion: string) =>\n      suggestion && (\n        <Search.Results.Item\n          key={suggestion}\n          contentBefore={<Icon icon={SearchIcon} />}\n        >\n          {suggestion}\n        </Search.Results.Item>\n      );\n\n    const shouldDisplayDropdown = !!(\n      results.files.length ||\n      results.people.length ||\n      results.suggestions.length\n    );\n    const topResult =\n      fileToItem(results.files[0]) || personToItem(results.people[0]);\n\n    const children = shouldDisplayDropdown\n      ? [\n          topResult && (\n            <Search.Results key=\"top-result\" divider>\n              {topResult}\n            </Search.Results>\n          ),\n          results.suggestions.length > 0 && (\n            <Search.Results key=\"suggestions\" heading=\"Suggestions\" divider>\n              {results.suggestions.slice(0, 2).map(suggestionToItem)}\n            </Search.Results>\n          ),\n          results.people.length > 0 && (\n            <Search.Results key=\"people\" heading=\"People\" divider>\n              {results.people.slice(0, 2).map(personToItem)}\n              {results.people.length > 2 && (\n                <Search.Results.ViewAll\n                  onClick={action('People — view all clicked')}\n                >\n                  View all people\n                </Search.Results.ViewAll>\n              )}\n            </Search.Results>\n          ),\n          results.files.length > 0 && (\n            <Search.Results key=\"files\" heading=\"Files\" divider>\n              {results.files.slice(0, 2).map(fileToItem)}\n              {results.files.length > 2 && (\n                <Search.Results.ViewAll onClick={action('Files — view all clicked')}>\n                  View all files\n                </Search.Results.ViewAll>\n              )}\n            </Search.Results>\n          ),\n          <Search.Results.ViewAll\n            key=\"global-view-all\"\n            onClick={action('global view all clicked')}\n          >\n            View all\n          </Search.Results.ViewAll>,\n        ]\n      : undefined;\n\n    return (\n      <Search {...args} onSearch={search} loading={isSearching}>\n        {children}\n      </Search>\n    );"
        }
      ],
      "category": "Components",
      "displayName": "Search",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Forms/RadioButton/RadioButton",
      "slug": "forms-radiobutton-radiobutton",
      "description": "RadioButton allows a user to choose a single option from a group of choices;\nselecting a new option will automatically deselect the previous choice.",
      "type": "component",
      "props": [
        {
          "name": "label",
          "type": "ReactNode",
          "description": "Specify the text for the label"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if RadioButton displays in a disabled state",
          "defaultValue": "false"
        },
        {
          "name": "readOnly",
          "type": "boolean",
          "description": "Specify if RadioButton displays in a read-only state",
          "defaultValue": "false"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the RadioButton. By default it inherits the theme from the parent"
        },
        {
          "name": "error",
          "type": "boolean",
          "description": "Specify error text and display error state of a RadioButton",
          "defaultValue": "false"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default RadioButton.",
          "source": "<RadioButton {...args} />"
        },
        {
          "name": "Without Label",
          "description": "Displaying the `label` is optional.\nRadioButton will display without `label` if no content is passed.\nIf no `label` is passed, set `aria-label` to make this radio input accessible\nfor screen readers.",
          "source": "<RadioButton\n      name=\"without-label\"\n      aria-label=\"Without label\"\n      id=\"without-label-radio-button\"\n    />"
        },
        {
          "name": "Error",
          "description": "Use `error` to display RadioButton in an error state.",
          "source": "<RadioButton\n      error\n      name=\"error\"\n      id=\"error-radio-button\"\n      label=\"Radio button label\"\n    />"
        },
        {
          "name": "Read Only",
          "description": "Set `readOnly` to `true` to display RadioButton in a read only state.",
          "source": "<>\n        <RadioButton\n          readOnly\n          name=\"read-only\"\n          label=\"Read only\"\n          id=\"read-only-radio-button-1\"\n        />\n        <RadioButton\n          readOnly\n          defaultChecked\n          name=\"read-only\"\n          label=\"Selected read only\"\n          id=\"read-only-radio-button-2\"\n        />\n      </>"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` to display RadioButton in a disabled state.",
          "source": "<>\n        <RadioButton\n          disabled\n          name=\"disabled\"\n          label=\"Disabled\"\n          id=\"disabled-radio-button-1\"\n        />\n        <RadioButton\n          disabled\n          defaultChecked\n          name=\"disabled\"\n          label=\"Selected disabled\"\n          id=\"disabled-radio-button-2\"\n        />\n      </>"
        }
      ],
      "category": "Forms",
      "displayName": "RadioButton/RadioButton",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/ProgressBar",
      "slug": "components-progressbar",
      "description": "Progress bars show the progression and duration of a system task such as file uploads, downloads, or installations.",
      "type": "component",
      "props": [
        {
          "name": "state",
          "type": "'active' | 'success' | 'error'",
          "description": "Specify the ProgressBar state",
          "defaultValue": "active"
        },
        {
          "name": "size",
          "type": "'sm' | 'md' | 'lg'",
          "description": "Specify the size of the ProgressBar",
          "defaultValue": "md"
        },
        {
          "name": "label",
          "type": "React.ReactNode",
          "description": "Provide text for the ProgressBar label"
        },
        {
          "name": "helperText",
          "type": "React.ReactNode",
          "description": "Specify helperText for ProgressBar. helperText is required for the Error state."
        },
        {
          "name": "fullWidth",
          "type": "boolean",
          "description": "Specify if the ProgressBar has no corner radius",
          "defaultValue": "false"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the ProgressBar. By default it inherits the theme from the parent"
        },
        {
          "name": "value",
          "type": "number",
          "description": "Specify if a ProgressBar is determinate by setting a value between 0 and 100."
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default ProgressBar.",
          "source": "<ProgressBar {...args} />"
        },
        {
          "name": "Indeterminate",
          "description": "An indeterminate ProgressBar should be used when download time can not be estimated. The default ProgressBar is `indeterminate`.",
          "source": "<ProgressBar label=\"System update\" helperText=\"Checking for updates...\" />"
        },
        {
          "name": "Determinate",
          "description": "A determinate ProgressBar should be used when download time can be estimated. Pass a `value` to the ProgressBar to make it `determinate`.\n\n> The example below starts as `indeterminate`, transitioning to a `determinate` ProgressBar once the download time is available.",
          "source": "const [value, setValue] = useState<number | undefined>();\n    const [state, setState] = useState<'active' | 'success'>('active');\n\n    useEffect(() => {\n      if (value === undefined) {\n        setTimeout(() => setValue(0), 4_000);\n      } else if (value < 100) {\n        determinateAnimation(value, setValue);\n      } else {\n        setTimeout(() => setState('success'), 300);\n        setTimeout(() => {\n          setValue(undefined);\n          setState('active');\n        }, 4_300);\n      }\n    }, [value]);\n\n    const helperText = getHelperText(value);\n\n    return (\n      <ProgressBar\n        state={state}\n        label=\"Download file\"\n        helperText={helperText}\n        value={value}\n      />\n    );"
        },
        {
          "name": "State",
          "description": "ProgressBar supports `active`, `success` and `error` states. Default state is `active`.",
          "source": "<>\n      <ProgressBar\n        value={80}\n        label=\"Active progress bar\"\n        helperText={defaultStoryBookHelperText}\n      />\n      <ProgressBar\n        state=\"success\"\n        label=\"Success progress bar\"\n        helperText={defaultStoryBookHelperText}\n      />\n      <ProgressBar\n        value={80}\n        state=\"error\"\n        label=\"Error progress bar\"\n        helperText={defaultStoryBookHelperText}\n      />\n    </>"
        },
        {
          "name": "Label",
          "description": "Pass text to `children` to add a label on the top of the ProgressBar. If no\nlabel is passed, set aria-label to make the ProgressBar accessible for screen readers.",
          "source": "<>\n      <ProgressBar value={80} label=\"With label\" />\n      <ProgressBar value={80} aria-label=\"Without label\" />\n    </>"
        },
        {
          "name": "With Helper Text",
          "description": "Pass text to `helpText` to add contextual information under the ProgressBar. Adding `helperText` is optional.\n\n> The label should describe what the progress is related to, while the Helper Text communicates what’s\nhappening now or how much progress has been made. For a determinate ProgressBar, the text is usually a\npercentage, fraction, ratio, or numeric value that shows progression.",
          "source": "<>\n      <ProgressBar value={50} label=\"Survey\" helperText=\"50% complete\" />\n      <ProgressBar\n        value={100}\n        state=\"success\"\n        label=\"Export data\"\n        helperText=\"Data exported successfully\"\n      />\n      <ProgressBar\n        value={80}\n        state=\"error\"\n        label=\"Upload image\"\n        helperText=\"There was an issue, try again\"\n      />\n    </>"
        },
        {
          "name": "Size",
          "description": "ProgressBar supports `sm`, `md`, and `lg`. Default size is `md`.",
          "source": "<>\n      <ProgressBar value={80} size=\"sm\" label=\"Small\" />\n      <ProgressBar value={80} size=\"md\" label=\"Medium\" />\n      <ProgressBar value={80} size=\"lg\" label=\"Large\" />\n    </>"
        },
        {
          "name": "Full Width",
          "description": "Remove the corner radius by setting `fullWidth` to `true`. fullWidth should only be used if a ProgressBar needs to visually extend the full width of a container.\n\n> To use ProgressBar as a page loader, set `fullWidth` to `true` to allow the ProgressBar to align seamlessly with surrounding content. View example below.",
          "source": "const [value, setValue] = useState<number>(0);\n\n    useEffect(() => {\n      if (value < 100) {\n        determinateAnimation(value, setValue);\n      }\n    }, [value]);\n\n    return (\n      <>\n        {value < 100 && (\n          <ProgressBar\n            value={value}\n            fullWidth\n            style={{ position: 'absolute', top: 0, left: 0, right: 0 }}\n            aria-label=\"Page loader\"\n          />\n        )}\n        {value === 100 && (\n          <Button\n            appearance=\"accent\"\n            kind=\"filled\"\n            size=\"sm\"\n            onClick={() => setValue(0)}\n          >\n            Reload example\n          </Button>\n        )}\n      </>\n    );"
        }
      ],
      "category": "Components",
      "displayName": "ProgressBar",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Popover/Popover.Trigger",
      "slug": "components-popover-popover-trigger",
      "description": "Popover.Trigger is a wrapper component around the element that triggers or closes a Popover.",
      "type": "component",
      "props": [
        {
          "name": "children",
          "type": "ReactNode",
          "description": "The content that will trigger the Popover. Forward refs to the trigger element.",
          "required": true
        }
      ],
      "stories": [
        {
          "name": "Trigger",
          "description": "The trigger must be a single element.\nIf the trigger is a custom component, it must use the\n[forwardRef](https://react.dev/reference/react/forwardRef) pattern.\nFor all event handlers and accessibility features to work properly, the trigger must also spread all `props`.\n\n```tsx\nconst CustomComponent = forwardRef(\n ({foo, bar, ...props}, ref) => {\n return (\n \n ...\n \n );\n },\n);\n```",
          "source": "<Popover portalled>\n        <Popover.Trigger>\n          <BaseTrigger>Popover trigger</BaseTrigger>\n        </Popover.Trigger>\n        <Popover.Content\n          style={{\n            width: '19rem',\n            display: 'flex',\n            flexDirection: 'column',\n          }}\n          px=\"100\"\n          py=\"100\"\n          gap=\"125\"\n        >\n          <Box\n            style={{\n              display: 'flex',\n              justifyContent: 'space-between',\n              alignItems: 'start',\n              width: '100%',\n            }}\n          >\n            <Text kind=\"heading-sm\" color=\"primary\">\n              {popoverStorybookTitle}\n            </Text>\n            <Popover.CloseTrigger>\n              <CloseButton size=\"md\" />\n            </Popover.CloseTrigger>\n          </Box>\n          <Text kind=\"body-md\" color=\"secondary\">\n            {popoverStorybookBody}\n          </Text>\n          <Popover.CloseTrigger>\n            <Button size=\"sm\">Action</Button>\n          </Popover.CloseTrigger>\n        </Popover.Content>\n      </Popover>"
        },
        {
          "name": "Close Trigger",
          "description": "Popover also provides a `Popover.CloseTrigger` component to close the popover",
          "source": "<Popover portalled>\n        <Popover.Trigger>\n          <BaseTrigger>Popover trigger</BaseTrigger>\n        </Popover.Trigger>\n        <Popover.Content\n          style={{\n            width: '19rem',\n            display: 'flex',\n            flexDirection: 'column',\n          }}\n          px=\"100\"\n          py=\"100\"\n          gap=\"125\"\n        >\n          <Box\n            style={{\n              display: 'flex',\n              justifyContent: 'space-between',\n              alignItems: 'start',\n              width: '100%',\n            }}\n          >\n            <Text kind=\"heading-sm\" color=\"primary\">\n              {popoverStorybookTitle}\n            </Text>\n            <Popover.CloseTrigger>\n              <CloseButton size=\"md\" />\n            </Popover.CloseTrigger>\n          </Box>\n          <Text kind=\"body-md\" color=\"secondary\">\n            {popoverStorybookBody}\n          </Text>\n          <Popover.CloseTrigger>\n            <Button appearance=\"destructive\" size=\"sm\">\n              Close me\n            </Button>\n          </Popover.CloseTrigger>\n        </Popover.Content>\n      </Popover>"
        }
      ],
      "category": "Components",
      "displayName": "Popover/Popover.Trigger",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Popover/Popover",
      "slug": "components-popover-popover",
      "description": "A Popover is a temporary container that appears on top of the interface when an element is triggered.\nIt displays supplemental information and/or interactions related to the element.\n\n`Popover` is a mandatory wrapper provider component around `Popover.Trigger` and `Popover.Content`.",
      "type": "component",
      "props": [
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the Popover. By default it inherits the theme from the parent"
        },
        {
          "name": "hideArrow",
          "type": "boolean",
          "description": "Whether the arrow is visible",
          "defaultValue": "false"
        },
        {
          "name": "appearance",
          "type": "enum",
          "description": "Specify the color mode of the Popover",
          "defaultValue": "default"
        },
        {
          "name": "placement",
          "type": "enum",
          "description": "Specify the location of the floating content",
          "defaultValue": "'top'"
        },
        {
          "name": "autoPlacement",
          "type": "boolean | { crossAxis?: boolean; alignment?: Alignment; autoAlignment?: boolean; allowedPlacements?: Placement[]; rootBoundary?: RootBoundary; elementContext?: ElementContext; altBoundary?: boolean; padding?: Padding; boundary?: Boundary; }",
          "description": "Specify if the floating content should automatically choose the placement that has the most space.\n<a href=\"https://floating-ui.com/docs/autoplacement#options\" target=\"_blank\" rel=\"noopener noreferrer\">AutoPlacementOptions</a>"
        },
        {
          "name": "flip",
          "type": "boolean | { crossAxis?: boolean; rootBoundary?: RootBoundary; elementContext?: ElementContext; altBoundary?: boolean; padding?: Padding; mainAxis?: boolean; ... 4 more ...; boundary?: Boundary; }",
          "description": "Specify if the floating content should flip to the opposite side if there is not enough space.\n<a href=\"https://floating-ui.com/docs/flip#options\" target=\"_blank\" rel=\"noopener noreferrer\">FlipOptions</a>\n\nCannot be used with `autoPlacement`"
        },
        {
          "name": "shift",
          "type": "boolean | { crossAxis?: boolean; rootBoundary?: RootBoundary; elementContext?: ElementContext; altBoundary?: boolean; padding?: Padding; mainAxis?: boolean; limiter?: { ...; }; boundary?: Boundary; }",
          "description": "Allow shifting of the floating content.\n<a href=\"https://floating-ui.com/docs/shift#options\" target=\"_blank\" rel=\"noopener noreferrer\">ShiftOptions</a>"
        },
        {
          "name": "autoHiding",
          "type": "boolean | { rootBoundary?: RootBoundary; elementContext?: ElementContext; altBoundary?: boolean; padding?: Padding; strategy?: \"referenceHidden\" | \"escaped\"; boundary?: Boundary; }",
          "description": "Specify if the Popover should auto-hide when the anchor is not in view.\n<a href=\"https://floating-ui.com/docs/hide#options\" target=\"_blank\" rel=\"noopener noreferrer\">HideOptions</a>"
        },
        {
          "name": "size",
          "type": "boolean | { rootBoundary?: RootBoundary; elementContext?: ElementContext; altBoundary?: boolean; padding?: Padding; boundary?: Boundary; apply?: (args: { ...; } & { ...; }) => Promisable<...>; }",
          "description": "Constrain the floating element's size to fit within available space.\n<a href=\"https://floating-ui.com/docs/size#options\" target=\"_blank\" rel=\"noopener noreferrer\">SizeOptions</a>"
        },
        {
          "name": "middleware",
          "type": "MiddlewareModifier",
          "description": "Middleware functions to modify the behavior of the floating element"
        },
        {
          "name": "offset",
          "type": "any",
          "description": "Specify the distance between the anchor and the Popover in rems.\n<a href=\"https://floating-ui.com/docs/offset#options\" target=\"_blank\" rel=\"noopener noreferrer\">OffsetOptions</a>",
          "defaultValue": "0.5"
        },
        {
          "name": "open",
          "type": "boolean",
          "description": "Specify the display state"
        },
        {
          "name": "defaultOpen",
          "type": "boolean",
          "description": "Specify the default open state"
        },
        {
          "name": "openOnHover",
          "type": "boolean | UseHoverProps",
          "description": "Enable hover interaction.\n<a href=\"https://floating-ui.com/docs/usehover#props\" target=\"_blank\" rel=\"noopener noreferrer\">UseHoverProps</a>"
        },
        {
          "name": "openOnClick",
          "type": "boolean | UseClickProps",
          "description": "Enable click interaction.\n<a href=\"https://floating-ui.com/docs/useclick#props\" target=\"_blank\" rel=\"noopener noreferrer\">UseClickProps</a>",
          "defaultValue": "true"
        },
        {
          "name": "openOnFocus",
          "type": "boolean | UseFocusProps",
          "description": "Enable focus interaction.\n<a href=\"https://floating-ui.com/docs/usefocus#props\" target=\"_blank\" rel=\"noopener noreferrer\">UseFocusProps</a>"
        },
        {
          "name": "portalled",
          "type": "boolean | FloatingPortalProps",
          "description": "Specify if the Popover is portalled"
        },
        {
          "name": "trapFocus",
          "type": "boolean",
          "description": "Specify if the Popover should trap focus within the floating content.",
          "defaultValue": "false"
        },
        {
          "name": "focusConfiguration",
          "type": "FocusManagerProps",
          "description": "Configure modal or non-modal focus management for popover content.\n<a href=\"https://floating-ui.com/docs/floatingfocusmanager#props\" target=\"_blank\" rel=\"noopener noreferrer\">FloatingFocusManagerProps</a>"
        },
        {
          "name": "onOpenChange",
          "type": "(open: boolean, event?: Event, reason?: OpenChangeReason) => void",
          "description": "Callback function that receives change in visibility state of the FloatingUI\n\n<a href=\"https://floating-ui.com/docs/react#open-event-callback\" target=\"_blank\" rel=\"noopener noreferrer\">\n    onOpenChange\n</a>"
        },
        {
          "name": "role",
          "type": "UseRoleProps",
          "description": "Adds base screen reader props to the reference and floating elements for a given `role`"
        },
        {
          "name": "openOnSelected",
          "type": "boolean | UseSelectedProps",
          "description": "Enable selection interaction"
        },
        {
          "name": "transitionConfig",
          "type": "UseTransitionStylesProps",
          "description": "Transition configuration"
        },
        {
          "name": "rootContext",
          "type": "FloatingRootContext<ReferenceType>",
          "description": "Specify the floating ui root context, if any"
        },
        {
          "name": "listNavigation",
          "type": "UseListNavigationProps",
          "description": "Adds list navigation support to the floating list, if any"
        },
        {
          "name": "typeahead",
          "type": "UseTypeaheadProps",
          "description": "Adds typeahead support to the floating list, if any"
        },
        {
          "name": "dismiss",
          "type": "UseDismissProps",
          "description": "Configure dismiss behaviour (escape key, outside press, etc.)"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Popover. Learn more about\n[Floating UI](https://floating-ui.com/)\n(JavaScript library used to power Beam's Popover).",
          "source": "<Popover {...args}>\n        <Popover.Trigger>\n          <Trigger>Popover trigger</Trigger>\n        </Popover.Trigger>\n        <Popover.Content\n          style={{\n            width: '19rem',\n            display: 'flex',\n            flexDirection: 'column',\n          }}\n          px=\"100\"\n          py=\"100\"\n          gap=\"125\"\n        >\n          <Box\n            style={{\n              display: 'flex',\n              justifyContent: 'space-between',\n              alignItems: 'start',\n              width: '100%',\n            }}\n          >\n            <Text kind=\"heading-sm\" color=\"primary\">\n              {popoverStorybookTitle}\n            </Text>\n            <Popover.CloseTrigger>\n              <CloseButton size=\"md\" />\n            </Popover.CloseTrigger>\n          </Box>\n          <Text kind=\"body-md\" color=\"secondary\">\n            {popoverStorybookBody}\n          </Text>\n          <Popover.CloseTrigger>\n            <Button size=\"sm\">Action</Button>\n          </Popover.CloseTrigger>\n        </Popover.Content>\n      </Popover>"
        },
        {
          "name": "Placement",
          "description": "Set `placement` to either `top`, `right`, `bottom`, or `left` to set the side of\nthe anchor that Popover appears on. This will place it at the center of the\nanchor. Optionally, suffix the placement with `-start` or `-end` to align the Popover to\nthe start or end of the anchor.",
          "source": "const placementButton = (side: Side, alignment: Alignment) => {\n      const placementString = joinPosition(side, alignment);\n      return (\n        <Popover\n          {...args}\n          key={placementString}\n          placement={placementString}\n          portalled\n        >\n          <Popover.Trigger>\n            <Trigger fixedWith productType=\"enterprise\">\n              {placementString}\n            </Trigger>\n          </Popover.Trigger>\n          <Popover.Content\n            style={{\n              width: '19rem',\n              display: 'flex',\n              flexDirection: 'column',\n            }}\n            px=\"100\"\n            py=\"100\"\n            gap=\"125\"\n          >\n            <Box\n              style={{\n                display: 'flex',\n                justifyContent: 'space-between',\n                alignItems: 'start',\n                width: '100%',\n              }}\n            >\n              <Text kind=\"heading-sm\" color=\"primary\">\n                {popoverStorybookTitle}\n              </Text>\n              <Popover.CloseTrigger>\n                <CloseButton size=\"md\" />\n              </Popover.CloseTrigger>\n            </Box>\n            <Text kind=\"body-md\" color=\"secondary\">\n              {popoverStorybookBody}\n            </Text>\n            <Popover.CloseTrigger>\n              <Button size=\"sm\">Action</Button>\n            </Popover.CloseTrigger>\n          </Popover.Content>\n        </Popover>\n      );\n    };\n\n    return <PlacementStory placementButton={placementButton} />;"
        },
        {
          "name": "Hide Arrow",
          "description": "Displaying the arrow on Popover is optional. Set `hideArrow` to `true` to hide the beak.",
          "source": "<Popover {...reactArgs} hideArrow>\n      <Popover.Trigger>\n        <Trigger>Popover trigger</Trigger>\n      </Popover.Trigger>\n      <Popover.Content\n        style={{\n          width: '19rem',\n          display: 'flex',\n          flexDirection: 'column',\n        }}\n        px=\"100\"\n        py=\"100\"\n        gap=\"125\"\n      >\n        <Box\n          style={{\n            display: 'flex',\n            justifyContent: 'space-between',\n            alignItems: 'start',\n            width: '100%',\n          }}\n        >\n          <Text kind=\"heading-sm\" color=\"primary\">\n            {popoverStorybookTitle}\n          </Text>\n          <Popover.CloseTrigger>\n            <CloseButton size=\"md\" />\n          </Popover.CloseTrigger>\n        </Box>\n        <Text kind=\"body-md\" color=\"secondary\">\n          {popoverStorybookBody}\n        </Text>\n        <Popover.CloseTrigger>\n          <Button size=\"sm\">Action</Button>\n        </Popover.CloseTrigger>\n      </Popover.Content>\n    </Popover>"
        },
        {
          "name": "Offset",
          "description": "Specify the `offset` prop to override the token distance between Popover Content\nand the trigger.\nIf just a number is provided, it will be interpreted in rems.\nAlternatively to passing a number, pass an object with advanced\n[options](https://floating-ui.com/docs/offset).",
          "source": "<Popover {...reactArgs} offset={1}>\n      <Popover.Trigger>\n        <Trigger>Popover trigger</Trigger>\n      </Popover.Trigger>\n      <Popover.Content\n        style={{\n          width: '19rem',\n          display: 'flex',\n          flexDirection: 'column',\n        }}\n        px=\"100\"\n        py=\"100\"\n        gap=\"125\"\n      >\n        <Box\n          style={{\n            display: 'flex',\n            justifyContent: 'space-between',\n            alignItems: 'start',\n            width: '100%',\n          }}\n        >\n          <Text kind=\"heading-sm\" color=\"primary\">\n            {popoverStorybookTitle}\n          </Text>\n          <Popover.CloseTrigger>\n            <CloseButton size=\"md\" />\n          </Popover.CloseTrigger>\n        </Box>\n        <Text kind=\"body-md\" color=\"secondary\">\n          {popoverStorybookBody}\n        </Text>\n        <Popover.CloseTrigger>\n          <Button size=\"sm\">Action</Button>\n        </Popover.CloseTrigger>\n      </Popover.Content>\n    </Popover>"
        },
        {
          "name": "Appearance",
          "description": "Popover appearance supports `default` and `inverse` themes. Default appearance is `default`.",
          "source": "<>\n        {appearances.map(appearance => {\n          const text = `${appearanceString(appearance)}`;\n          return (\n            <Popover {...args} appearance={appearance} key={text}>\n              <Popover.Trigger>\n                <Trigger>{text}</Trigger>\n              </Popover.Trigger>\n              <Popover.Content\n                style={{\n                  width: '19rem',\n                  display: 'flex',\n                  flexDirection: 'column',\n                }}\n                px=\"100\"\n                py=\"100\"\n                gap=\"125\"\n              >\n                <Box\n                  style={{\n                    display: 'flex',\n                    justifyContent: 'space-between',\n                    alignItems: 'start',\n                    width: '100%',\n                  }}\n                >\n                  <Text kind=\"heading-sm\" color=\"primary\">\n                    {popoverStorybookTitle}\n                  </Text>\n                  <Popover.CloseTrigger>\n                    <CloseButton size=\"md\" />\n                  </Popover.CloseTrigger>\n                </Box>\n                <Text kind=\"body-md\" color=\"secondary\">\n                  {popoverStorybookBody}\n                </Text>\n                <Popover.CloseTrigger>\n                  <Button size=\"sm\">Action</Button>\n                </Popover.CloseTrigger>\n              </Popover.Content>\n            </Popover>\n          );\n        })}\n      </>"
        },
        {
          "name": "Open",
          "description": "Specify the `open` prop and the `onOpenChange` prop to control the visibility of the Popover.\nWhen Popover is controlled, every time an event occurs that should change the visibility of the Popover,\nPopover calls the `onOpenChange` function.",
          "source": "const [isOpen, setOpen] = React.useState(false);\n    const closeHandler = () => setOpen(false);\n    return (\n      <Box\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: '1rem',\n          width: '100%',\n          alignItems: 'center',\n        }}\n      >\n        <Checkbox\n          style={{\n            alignSelf: 'flex-start',\n          }}\n          label={`Popover is ${isOpen ? 'open' : 'closed'}`}\n          onChange={() => setOpen(prevState => !prevState)}\n          checked={isOpen}\n        />\n        <Popover portalled open={isOpen}>\n          <Popover.Trigger>\n            <Trigger style={{ width: 'fix-content', pointerEvents: 'none' }}>\n              Popover Anchor\n            </Trigger>\n          </Popover.Trigger>\n          <Popover.Content\n            style={{\n              width: '19rem',\n              display: 'flex',\n              flexDirection: 'column',\n            }}\n            px=\"100\"\n            py=\"100\"\n            gap=\"125\"\n          >\n            <Box\n              style={{\n                display: 'flex',\n                justifyContent: 'space-between',\n                alignItems: 'start',\n                width: '100%',\n              }}\n            >\n              <Text kind=\"heading-sm\">{popoverStorybookTitle}</Text>\n              <CloseButton size=\"md\" onClick={closeHandler} />\n            </Box>\n            <Text kind=\"body-md\" color=\"secondary\">\n              {popoverStorybookBody}\n            </Text>\n            <Button size=\"sm\" onClick={closeHandler}>\n              Action\n            </Button>\n          </Popover.Content>\n        </Popover>\n      </Box>\n    );"
        },
        {
          "name": "Open Interactions",
          "description": "Specify the `openOnClick`, `openOnFocus`, and `openOnHover` props to control\nwhat triggers the Popover to open.\nSpecify the props as booleans or with advanced options for\n[click](https://floating-ui.com/docs/useclick),\n[focus](https://floating-ui.com/docs/usefocus), and\n[hover](https://floating-ui.com/docs/usehover).\n\n> When using `openOnFocus`, make sure to update the `focusConfiguration` prop to `focusConfiguration={{ order: ['reference', 'content'] }}`.\n> This ensures the trigger remains keyboard accessible at all times.",
          "source": "const [value, setValue] = React.useState(['openOnClick']);\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      const checked = event.target.checked;\n      if (checked) {\n        setValue([...value, event.target.value]);\n      } else {\n        setValue(value.filter(item => item !== event.target.value));\n      }\n    };\n\n    const args = {\n      ..._args,\n      openOnClick: value.includes('openOnClick'),\n      openOnFocus: value.includes('openOnFocus'),\n      openOnHover: value.includes('openOnHover'),\n      ...(value.includes('openOnFocus') && {\n        focusConfiguration: {\n          order: ['reference', 'content'] as FocusManagerProps['order'],\n        },\n      }),\n    };\n\n    return (\n      <Box\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: '1rem',\n          alignItems: 'center',\n          width: '100%',\n        }}\n      >\n        <CheckboxGroup\n          orientation=\"horizontal\"\n          name=\"custom-content\"\n          style={{ alignSelf: 'flex-start' }}\n        >\n          <Checkbox\n            label=\"OnClick\"\n            value=\"openOnClick\"\n            onChange={handleChange}\n            defaultChecked\n          />\n          <Checkbox label=\"OnFocus\" value=\"openOnFocus\" onChange={handleChange} />\n          <Checkbox label=\"OnHover\" value=\"openOnHover\" onChange={handleChange} />\n        </CheckboxGroup>\n        <Popover {...args}>\n          <Popover.Trigger>\n            <Trigger style={{ width: 'fit-content' }}>Popover trigger</Trigger>\n          </Popover.Trigger>\n          <Popover.Content\n            style={{\n              width: '19rem',\n              display: 'flex',\n              flexDirection: 'column',\n            }}\n            px=\"100\"\n            py=\"100\"\n            gap=\"125\"\n          >\n            <Box\n              style={{\n                display: 'flex',\n                justifyContent: 'space-between',\n                alignItems: 'start',\n                width: '100%',\n              }}\n            >\n              <Text kind=\"heading-sm\" color=\"primary\">\n                {popoverStorybookTitle}\n              </Text>\n              <Popover.CloseTrigger>\n                <CloseButton size=\"md\" />\n              </Popover.CloseTrigger>\n            </Box>\n            <Text kind=\"body-md\" color=\"secondary\">\n              {popoverStorybookBody}\n            </Text>\n            <Popover.CloseTrigger>\n              <Button size=\"sm\">Action</Button>\n            </Popover.CloseTrigger>\n          </Popover.Content>\n        </Popover>\n      </Box>\n    );"
        },
        {
          "name": "Portalled",
          "description": "Use `portalled` to append the Popover to the document body.\nThis is useful when Popover Content is clipped by a parent container with `overflow: hidden`.\nEither specify the property as a boolean value or pass an object with additional\n[options](https://floating-ui.com/docs/FloatingPortal).\nBe careful when using this prop, as it may interfere with `shift`.\n\nBelow is a relatively positioned container with `overflow: hidden`",
          "source": "<div className={floatingStyles['portal-container--large']}>\n        <BasePopover text=\"Portalled\" portalled />\n        <BasePopover text=\"Not portalled\" portalled={false} />\n      </div>"
        },
        {
          "name": "Trap Focus",
          "description": "Specify the `trapFocus` prop to control the focus management of Popover.\nEither specify the property as a boolean value or pass an object with additional\n[options](https://floating-ui.com/docs/floatingfocusmanager).",
          "source": "<>\n        <BasePopover text=\"TrapFocus applied\" trapFocus portalled />\n        <BasePopover text=\"TrapFocus not applied\" portalled />\n      </>"
        }
      ],
      "category": "Components",
      "displayName": "Popover/Popover",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Popover/Popover.Content",
      "slug": "components-popover-popover-content",
      "description": "Popover.Content is a wrapper around the content that appears in Popover.",
      "type": "component",
      "props": [
        {
          "name": "children",
          "type": "React.ReactNode",
          "description": "Specify custom content for the Popover",
          "required": true
        },
        {
          "name": "as",
          "type": "React.ElementType",
          "description": "Specify the HTML element type of a Box",
          "defaultValue": "'div'"
        },
        {
          "name": "p",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify all padding"
        },
        {
          "name": "px",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify before and after padding"
        },
        {
          "name": "py",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify top and bottom padding"
        },
        {
          "name": "pTop",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify top padding"
        },
        {
          "name": "pBottom",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify bottom padding"
        },
        {
          "name": "pBefore",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify before padding"
        },
        {
          "name": "pAfter",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify after padding"
        },
        {
          "name": "gap",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify gap between child elements"
        },
        {
          "name": "overlay",
          "type": "Overlay",
          "description": "Specify if the content should render with an overlay.\nPass `true` for a default dimmed scrim, `'transparent'` for an invisible\nclick-blocking overlay, or a `FloatingOverlayProps` object (e.g. to lock\nscroll or apply custom styling) for full control. Omit or `false` for none.",
          "defaultValue": "false"
        },
        {
          "name": "skipFloatingStyles",
          "type": "boolean",
          "description": "Specify if the content should render with an overlay\nand not be positioned relative to the trigger",
          "defaultValue": "false"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Popover.Content",
          "source": "<Popover portalled>\n        <Popover.Trigger>\n          <Trigger>Popover trigger</Trigger>\n        </Popover.Trigger>\n        <Popover.Content\n          style={{\n            width: '19rem',\n          }}\n          {...args}\n        >\n          <Text color=\"primary\">{args.children}</Text>\n        </Popover.Content>\n      </Popover>"
        },
        {
          "name": "Padding",
          "description": "Popover padding is fully customizable. Use Beam’s spacing tokens to quickly modify padding around content.\n\n> Padding is independently adjustable on all four sides to maximize flexibility.",
          "source": "// const paddings = ['100', '150', '200'] as Spacing[];\n    const paddings = [\n      {\n        padding: '100',\n        content: '16px',\n      },\n      {\n        padding: '150',\n        content: '24px',\n      },\n      {\n        padding: '200',\n        content: '32px',\n      },\n    ] as Record<'padding' | 'content', Spacing | string>[];\n\n    return (\n      <>\n        {paddings.map((padding, index) => (\n          <Popover portalled>\n            <Popover.Trigger>\n              <Trigger>Example {`${index + 1}`}</Trigger>\n            </Popover.Trigger>\n            <Popover.Content\n              style={{\n                width: '19rem',\n              }}\n              p={padding.padding as Spacing}\n            >\n              <Text color=\"primary\">{`This Popover’s padding is equal to ${padding.content} padding.`}</Text>\n            </Popover.Content>\n          </Popover>\n        ))}\n      </>\n    );"
        }
      ],
      "category": "Components",
      "displayName": "Popover/Popover.Content",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Panel",
      "slug": "components-panel",
      "description": "A Panel presents supplementary content, tools, or focused workflows in a container associated with the current experience.\n\nUse a Panel when users need space to view, edit, configure, or work through related content without moving to a separate page. If the interaction is more contained and can be completed in a focused temporary window, consider using a [Dialog](?path=/docs/components-dialog--docs).",
      "type": "component",
      "props": [
        {
          "name": "kind",
          "type": "enum",
          "description": "Render the Panel inline: it sits in document flow and pushes adjacent content aside\nwhen open. Required to opt into the inline kind; the Panel defaults to `'overlay'`.\nRender the Panel as an overlay: portalled and floating above the page.",
          "defaultValue": "overlay"
        },
        {
          "name": "modalType",
          "type": "enum",
          "description": "Modal behavior (overlay panels only).\n\n- `'isModal'` (default) — backdrop overlay with focus trapped; Escape and a backdrop\n  click close it.\n- `'nonModal'` — page stays interactive; Escape closes the panel; outside clicks close\n  it only when `closeOnOutsidePress={true}`.\n- `'alert'` — close button hidden; Escape and outside clicks are suppressed.",
          "defaultValue": "isModal"
        },
        {
          "name": "offset",
          "type": "string | boolean | { x: string; y: string; }",
          "description": "Insets an overlay Panel from the viewport edge, giving it rounded corners and\nremoving the outer divider (regardless of the `divider` prop).\n\nPass `true` for the default `1rem`, a CSS length like `\"2rem\"` for a uniform offset,\nor a `{ x, y }` object like `{ x: \"2rem\", y: \"0.5rem\" }` to offset the axes\nindependently.",
          "defaultValue": "false"
        },
        {
          "name": "children",
          "type": "ReactNode",
          "description": "Specify the content of the Panel",
          "required": true
        },
        {
          "name": "aria-label",
          "type": "string",
          "description": "Accessible name for the panel dialog, required when `Panel.Header.Heading` is not rendered.\n\nWith a heading present, `aria-labelledby` points to it automatically; without one, a\n`role=\"dialog\"` needs this so screen readers can announce the Panel.\n@example ```tsx\n<Panel kind=\"overlay\" aria-label=\"User settings\" ... />\n```"
        },
        {
          "name": "open",
          "type": "boolean",
          "description": "Controls the Panel's visibility. For inline panels, omitting this prop\nrenders the panel as always-visible (uncontrolled)."
        },
        {
          "name": "onOpenChange",
          "type": "(open: boolean) => void",
          "description": "Callback when Panel open state changes"
        },
        {
          "name": "width",
          "type": "PanelWidth",
          "description": "Width of a side Panel.\n\nApplies only when `position` is `\"start\"` or `\"end\"`. Has no effect on\n`position=\"bottom\"` panels; use `height` for bottom panels instead.\n\nUse a named preset (`\"sm\"`, `\"md\"`, `\"lg\"`) or any valid CSS width value\nsuch as `\"480px\"` or `\"30vw\"`.\n\nWhen omitted, the Panel uses the `\"md\"` width preset.",
          "defaultValue": "'md'"
        },
        {
          "name": "height",
          "type": "string",
          "description": "Height of a bottom Panel.\n\nApplies only when `position=\"bottom\"`. Has no effect on side panels\n(`position=\"start\"` or `position=\"end\"`); use `width` for those instead.\n\nUse any valid CSS height value, such as `\"50dvh\"` or `\"480px\"`.\nWhen omitted, the Panel sizes to its content and is capped at `90dvh`.\nAvoid `height=\"auto\"` because it removes the `90dvh` viewport cap."
        },
        {
          "name": "padding",
          "type": "enum",
          "description": "Specify the horizontal padding\nsm=1rem, md=1.5rem",
          "defaultValue": "md"
        },
        {
          "name": "dismissible",
          "type": "boolean",
          "description": "Specify whether to show the header close button",
          "defaultValue": "true"
        },
        {
          "name": "closeButtonAriaLabel",
          "type": "string",
          "description": "Label for the close button. Used as both the button's `aria-label`\nand the visible tooltip text. Provide a value that works in both contexts.",
          "defaultValue": "Close panel"
        },
        {
          "name": "isAnimated",
          "type": "boolean",
          "description": "Specify whether to animate the Panel as it opens and closes",
          "defaultValue": "true"
        },
        {
          "name": "divider",
          "type": "boolean",
          "description": "Specify whether to show an external divider between panel and page content",
          "defaultValue": "true"
        },
        {
          "name": "backgroundColor",
          "type": "'positive' | 'warning' | 'negative' | 'inverse' | 'selected' | 'expressive' | '00' | '00-alt' | '01' | '02' | '03' | 'info-primary' | 'info-secondary' | 'positive-strong' | 'warning-strong' | 'negative-strong' | 'info-primary-strong' | 'info-secondary-strong' | 'selected-subtle' | 'highlight' | 'transparent' | 'expressive-stronger' | 'expressive-inverse'",
          "description": "Specify the background color for all panel surfaces (Header, Body, Footer).\nA `backgroundColor` set on a section takes priority."
        },
        {
          "name": "dividerColor",
          "type": "'00' | '00-alt' | '01' | '02' | '03'",
          "description": "Specify the border color of the external divider between the panel and page content. Also sets\nthe default divider color for the Header and Footer; a `dividerColor` set on a\nsection takes priority.",
          "defaultValue": "'01'"
        },
        {
          "name": "position",
          "type": "enum",
          "description": "Specify where the Panel is anchored within its container",
          "defaultValue": "'start'"
        },
        {
          "name": "resizable",
          "type": "boolean | { minSize?: number; maxSize?: number; storageKey?: string }",
          "description": "Enables user-resizing via a drag handle at the panel edge.\nPass `true` to use default min/max constraints, or an object to set custom\nvalues in pixels.\n\nProvide a `storageKey` in the config object to persist the panel's last-used size across sessions.",
          "defaultValue": "false"
        },
        {
          "name": "onBeforeClose",
          "type": "(reason: PanelCloseReason) => boolean | Promise<boolean>",
          "description": "Runs before a user-initiated close and acts as a gate: return `false` (or\n`Promise<false>`) to keep the Panel open, for example when a form has unsaved changes.\n\nIt only fires for UI-triggered closes (close button, Escape, or outside press), never\nwhen the parent changes the `open` prop programmatically. Under `modalType=\"alert\"`,\nthe `'escapeKey'` and `'outsidePress'` reasons are suppressed, so it won't fire for\nthose either.\n@example ```tsx\n// Drive a confirmation dialog from state; avoid window.confirm (blocking, breaks iframes).\n// See the \"Preserving and Guarding State\" story for a full reference implementation.\n<Panel\n  onBeforeClose={(reason) => {\n    if (!isDirty) return true;\n    return new Promise(resolve => {\n      setResolveClose(() => resolve);\n      setShowConfirmDialog(true);\n    });\n  }}\n/>\n```"
        },
        {
          "name": "closeOnOutsidePress",
          "type": "boolean",
          "description": "When `modalType=\"nonModal\"`, allows the panel to close when the user\nclicks outside it. Has no effect for `'isModal'` or `'alert'` panels.",
          "defaultValue": "false"
        },
        {
          "name": "container",
          "type": "HTMLElement",
          "description": "Portal target for the overlay. When set, the Panel renders inside this element with\n`position: absolute` instead of `position: fixed`. The container needs to:\n- establish a containing block (e.g. `position: relative`)\n- set an appropriate `z-index`\n- use `overflow: hidden` (or `clip`), so the slide-in/out transform doesn't flash a\n  transient scrollbar\n\nPass the resolved element, or `null` until it exists — resolution is left to the implementer. Use state\nor a callback ref so the value is reactive: when it flips from `null` to the element,\nthe Panel re-renders into the container. A plain `useRef` whose `.current` is mutated\nwon't trigger that.\n\nHas no effect on `kind=\"inline\"`.\n@example ```tsx\nconst [container, setContainer] = useState<HTMLElement | null>(null);\nreturn (\n  <div ref={setContainer} style={{ position: 'relative', overflow: 'hidden' }}>\n    <Panel kind=\"overlay\" container={container} ... />\n  </div>\n);\n```"
        },
        {
          "name": "triggerRef",
          "type": "RefObject<HTMLElement>",
          "description": "The element that opens the Panel. Clicks on it are excluded from outside-press\ndismissal, so it can toggle the Panel without the close immediately re-firing, and\nfocus returns to it when the Panel closes. No effect on `kind=\"inline\"`.\n\nAvoid `triggerRef` when the Panel is nested inside another FloatingUI floating element."
        }
      ],
      "subcomponentProps": [
        {
          "name": "Panel.Header",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "Specify the content for the panel header"
            },
            {
              "name": "divider",
              "type": "boolean",
              "description": "Specify whether to show a divider below the header",
              "defaultValue": "true"
            },
            {
              "name": "dividerColor",
              "type": "'00' | '00-alt' | '01' | '02' | '03'",
              "description": "Specify the border color of the header divider",
              "defaultValue": "'01'"
            },
            {
              "name": "backgroundColor",
              "type": "'positive' | 'warning' | 'negative' | 'inverse' | 'selected' | 'expressive' | '00' | '00-alt' | '01' | '02' | '03' | 'info-primary' | 'info-secondary' | 'positive-strong' | 'warning-strong' | 'negative-strong' | 'info-primary-strong' | 'info-secondary-strong' | 'selected-subtle' | 'highlight' | 'transparent' | 'expressive-stronger' | 'expressive-inverse'",
              "description": "Specify the background color of the header surface"
            }
          ]
        },
        {
          "name": "Panel.Header.Row",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "Specify the content for the header row"
            }
          ]
        },
        {
          "name": "Panel.Header.ContentBefore",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "Specify the content shown before the heading"
            }
          ]
        },
        {
          "name": "Panel.Header.Heading",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "Specify the content for the heading"
            }
          ]
        },
        {
          "name": "Panel.Header.ContentAfter",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "Specify the content shown after the heading"
            }
          ]
        },
        {
          "name": "Panel.Header.Description",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "Specify the content for the header description"
            }
          ]
        },
        {
          "name": "Panel.Header.Subheader",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "Specify the subheader content"
            }
          ]
        },
        {
          "name": "Panel.Body",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "Specify the content for the Panel body"
            },
            {
              "name": "backgroundColor",
              "type": "'positive' | 'warning' | 'negative' | 'inverse' | 'selected' | 'expressive' | '00' | '00-alt' | '01' | '02' | '03' | 'info-primary' | 'info-secondary' | 'positive-strong' | 'warning-strong' | 'negative-strong' | 'info-primary-strong' | 'info-secondary-strong' | 'selected-subtle' | 'highlight' | 'transparent' | 'expressive-stronger' | 'expressive-inverse'",
              "description": "Specify the background color of the body surface"
            }
          ]
        },
        {
          "name": "Panel.Footer",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "Specify the content for the Panel footer"
            },
            {
              "name": "divider",
              "type": "boolean",
              "description": "Whether to show a divider above the footer",
              "defaultValue": "true"
            },
            {
              "name": "dividerColor",
              "type": "'00' | '00-alt' | '01' | '02' | '03'",
              "description": "Specify the border color of the footer divider",
              "defaultValue": "'01'"
            },
            {
              "name": "backgroundColor",
              "type": "'positive' | 'warning' | 'negative' | 'inverse' | 'selected' | 'expressive' | '00' | '00-alt' | '01' | '02' | '03' | 'info-primary' | 'info-secondary' | 'positive-strong' | 'warning-strong' | 'negative-strong' | 'info-primary-strong' | 'info-secondary-strong' | 'selected-subtle' | 'highlight' | 'transparent' | 'expressive-stronger' | 'expressive-inverse'",
              "description": "Specify the background color of the footer surface"
            }
          ]
        },
        {
          "name": "Panel.Footer.Actions",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "Specify the content for the footer actions"
            },
            {
              "name": "layout",
              "type": "'start' | 'end' | 'stacked' | 'spaceBetween'",
              "description": "Specify how the actions are arranged in the footer",
              "defaultValue": "end"
            }
          ]
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Panel.",
          "source": "const [isOpen, setIsOpen] = useState(false);\n    const triggerButtonRef = useRef<HTMLButtonElement>(null);\n\n    return (\n      <Box style={controlAreaStyle}>\n        <Button ref={triggerButtonRef} onClick={() => setIsOpen(!isOpen)}>\n          Panel trigger\n        </Button>\n        <Panel\n          open={isOpen}\n          onOpenChange={setIsOpen}\n          triggerRef={triggerButtonRef}\n        >\n          <Panel.Header>\n            <Panel.Header.Row>\n              <Panel.Header.Heading>Panel heading</Panel.Header.Heading>\n            </Panel.Header.Row>\n          </Panel.Header>\n          <Panel.Body>\n            <Box py=\"100\">\n              Panel content goes here. The body of a Panel is fully configurable.\n            </Box>\n          </Panel.Body>\n          <Panel.Footer>\n            <Panel.Footer.Actions layout=\"end\">\n              <Button kind=\"outline\" onClick={() => setIsOpen(false)}>\n                Cancel\n              </Button>\n              <Button onClick={() => setIsOpen(false)}>Save</Button>\n            </Panel.Footer.Actions>\n          </Panel.Footer>\n        </Panel>\n      </Box>\n    );"
        },
        {
          "name": "Kind",
          "description": "Panel supports `overlay` and `inline` options. The default kind is `overlay`.",
          "source": "const [kind, setKind] = useState<PanelKind>('overlay');\n    const [isOpen, setIsOpen] = useState(false);\n    const triggerButtonRef = useRef<HTMLButtonElement>(null);\n\n    const panel = (\n      <Panel\n        {...(kind === 'inline'\n          ? { kind: 'inline' as const }\n          : {\n              kind: 'overlay' as const,\n              triggerRef: triggerButtonRef,\n            })}\n        position=\"start\"\n        open={isOpen}\n        onOpenChange={setIsOpen}\n        width=\"md\"\n      >\n        <Panel.Header>\n          <Panel.Header.Row>\n            <Panel.Header.Heading>Panel heading</Panel.Header.Heading>\n          </Panel.Header.Row>\n        </Panel.Header>\n        <Panel.Body>\n          <Box py=\"100\">\n            Panel content goes here. The body of a Panel is fully configurable.\n          </Box>\n        </Panel.Body>\n        <Panel.Footer>\n          <Panel.Footer.Actions layout=\"end\">\n            <Button kind=\"outline\" onClick={() => setIsOpen(false)}>\n              Cancel\n            </Button>\n            <Button onClick={() => setIsOpen(false)}>Save</Button>\n          </Panel.Footer.Actions>\n        </Panel.Footer>\n      </Panel>\n    );\n\n    return (\n      <Box\n        backgroundColor=\"00\"\n        style={{\n          height: '100%',\n          width: '100%',\n          display: 'flex',\n        }}\n      >\n        {kind === 'inline' && panel}\n        <Box\n          borderRadius=\"md\"\n          backgroundColor=\"01\"\n          p=\"150\"\n          m=\"150\"\n          style={{\n            flex: 1,\n            display: 'flex',\n            flexDirection: 'column',\n            alignItems: 'center',\n            justifyContent: 'center',\n            gap: '1.5rem',\n          }}\n        >\n          <RadioButtonGroup orientation=\"horizontal\">\n            <RadioButton\n              label=\"Overlay\"\n              value=\"overlay\"\n              checked={kind === 'overlay'}\n              onChange={() => {\n                setKind('overlay');\n                setIsOpen(false);\n              }}\n            />\n            <RadioButton\n              label=\"Inline\"\n              value=\"inline\"\n              checked={kind === 'inline'}\n              onChange={() => {\n                setKind('inline');\n                setIsOpen(false);\n              }}\n            />\n          </RadioButtonGroup>\n          <Button ref={triggerButtonRef} onClick={() => setIsOpen(v => !v)}>\n            Panel trigger\n          </Button>\n        </Box>\n        {kind === 'overlay' && panel}\n      </Box>\n    );"
        },
        {
          "name": "Position",
          "description": "Panel supports `start`, `end`, and `bottom` positions. The default position is\n`start`.",
          "source": "const [position, setPosition] = useState<PanelPosition>('start');\n    const [isOpen, setIsOpen] = useState(false);\n    const triggerButtonRef = useRef<HTMLButtonElement>(null);\n\n    return (\n      <Box style={controlAreaStyle}>\n        <RadioButtonGroup orientation=\"horizontal\">\n          <RadioButton\n            label=\"Start\"\n            value=\"start\"\n            checked={position === 'start'}\n            onChange={() => setPosition('start')}\n          />\n          <RadioButton\n            label=\"End\"\n            value=\"end\"\n            checked={position === 'end'}\n            onChange={() => setPosition('end')}\n          />\n          <RadioButton\n            label=\"Bottom\"\n            value=\"bottom\"\n            checked={position === 'bottom'}\n            onChange={() => setPosition('bottom')}\n          />\n        </RadioButtonGroup>\n        <Button ref={triggerButtonRef} onClick={() => setIsOpen(v => !v)}>\n          Panel trigger\n        </Button>\n        <Panel\n          kind=\"overlay\"\n          modalType=\"nonModal\"\n          position={position}\n          open={isOpen}\n          onOpenChange={setIsOpen}\n          triggerRef={triggerButtonRef}\n          width=\"md\"\n        >\n          <Panel.Header>\n            <Panel.Header.Row>\n              <Panel.Header.Heading>Panel heading</Panel.Header.Heading>\n            </Panel.Header.Row>\n          </Panel.Header>\n          <Panel.Body>\n            <Box py=\"100\">\n              Panel content goes here. The body of a Panel is fully configurable.\n            </Box>\n          </Panel.Body>\n          <Panel.Footer>\n            <Panel.Footer.Actions layout=\"end\">\n              <Button kind=\"outline\" onClick={() => setIsOpen(false)}>\n                Cancel\n              </Button>\n              <Button onClick={() => setIsOpen(false)}>Save</Button>\n            </Panel.Footer.Actions>\n          </Panel.Footer>\n        </Panel>\n      </Box>\n    );"
        },
        {
          "name": "Width",
          "description": "Panel supports `sm`, `md`, and `lg` widths for `start`/`end` panels. The default\nwidth is `md`. For `bottom` panels, use the `height` prop instead, `width` has no\neffect.\n\n> Pass any CSS length to `width` (e.g. `\"480px\"`, `\"30vw\"`) to set a custom width.\n> **Do not** use `style={{ width }}` as a workaround, it bypasses the animation styling.",
          "source": "const [width, setWidth] = useState<'sm' | 'md' | 'lg' | 'custom'>('md');\n    const [isOpen, setIsOpen] = useState(false);\n    const triggerButtonRef = useRef<HTMLButtonElement>(null);\n    const appliedWidth = width === 'custom' ? '60vw' : width;\n\n    return (\n      <Box style={controlAreaStyle}>\n        <RadioButtonGroup orientation=\"horizontal\">\n          <RadioButton\n            label=\"Small\"\n            value=\"sm\"\n            checked={width === 'sm'}\n            onChange={() => setWidth('sm')}\n          />\n          <RadioButton\n            label=\"Medium\"\n            value=\"md\"\n            checked={width === 'md'}\n            onChange={() => setWidth('md')}\n          />\n          <RadioButton\n            label=\"Large\"\n            value=\"lg\"\n            checked={width === 'lg'}\n            onChange={() => setWidth('lg')}\n          />\n          <RadioButton\n            label=\"Custom\"\n            value=\"custom\"\n            checked={width === 'custom'}\n            onChange={() => setWidth('custom')}\n          />\n        </RadioButtonGroup>\n        <Button ref={triggerButtonRef} onClick={() => setIsOpen(v => !v)}>\n          Panel trigger\n        </Button>\n        <Panel\n          kind=\"overlay\"\n          modalType=\"nonModal\"\n          open={isOpen}\n          onOpenChange={setIsOpen}\n          triggerRef={triggerButtonRef}\n          width={appliedWidth}\n        >\n          <Panel.Header>\n            <Panel.Header.Row>\n              <Panel.Header.Heading>Panel heading</Panel.Header.Heading>\n            </Panel.Header.Row>\n          </Panel.Header>\n          <Panel.Body>\n            <Box py=\"100\">\n              Panel content goes here. The body of a Panel is fully configurable.\n            </Box>\n          </Panel.Body>\n          <Panel.Footer>\n            <Panel.Footer.Actions layout=\"end\">\n              <Button kind=\"outline\" onClick={() => setIsOpen(false)}>\n                Cancel\n              </Button>\n              <Button onClick={() => setIsOpen(false)}>Save</Button>\n            </Panel.Footer.Actions>\n          </Panel.Footer>\n        </Panel>\n      </Box>\n    );"
        },
        {
          "name": "Height",
          "description": "By default a `bottom` Panel sizes to its content (up to a max of `90dvh`). When\ncontent exceeds the cap, the Panel body becomes scrollable.\n\n> Pass any CSS length to `height` (e.g. `\"50dvh\"`) to set a custom height.",
          "source": "const [isOpen, setIsOpen] = useState(false);\n    const [heightMode, setHeightMode] = useState<'auto' | 'custom'>('auto');\n    const triggerButtonRef = useRef<HTMLButtonElement>(null);\n\n    return (\n      <Box style={controlAreaStyle}>\n        <RadioButtonGroup orientation=\"horizontal\">\n          <RadioButton\n            label=\"Auto height\"\n            value=\"auto\"\n            checked={heightMode === 'auto'}\n            onChange={() => setHeightMode('auto')}\n          />\n          <RadioButton\n            label=\"Custom height\"\n            value=\"custom\"\n            checked={heightMode === 'custom'}\n            onChange={() => setHeightMode('custom')}\n          />\n        </RadioButtonGroup>\n        <Button ref={triggerButtonRef} onClick={() => setIsOpen(v => !v)}>\n          Panel trigger\n        </Button>\n        <Panel\n          kind=\"overlay\"\n          modalType=\"nonModal\"\n          position=\"bottom\"\n          open={isOpen}\n          onOpenChange={setIsOpen}\n          triggerRef={triggerButtonRef}\n          height={heightMode === 'custom' ? '50dvh' : undefined}\n        >\n          <Panel.Header>\n            <Panel.Header.Row>\n              <Panel.Header.Heading>Panel heading</Panel.Header.Heading>\n            </Panel.Header.Row>\n          </Panel.Header>\n          <Panel.Body>\n            <Box py=\"100\">\n              <Text>\n                {[\n                  ...LONG_BODY_PARAGRAPHS,\n                  ...LONG_BODY_PARAGRAPHS,\n                  ...LONG_BODY_PARAGRAPHS,\n                  ...LONG_BODY_PARAGRAPHS,\n                ].map((paragraph, i) => (\n                  <p key={i}>{paragraph}</p>\n                ))}\n              </Text>\n            </Box>\n          </Panel.Body>\n          <Panel.Footer>\n            <Panel.Footer.Actions layout=\"end\">\n              <Button kind=\"outline\" onClick={() => setIsOpen(false)}>\n                Cancel\n              </Button>\n              <Button onClick={() => setIsOpen(false)}>Save</Button>\n            </Panel.Footer.Actions>\n          </Panel.Footer>\n        </Panel>\n      </Box>\n    );"
        },
        {
          "name": "Modal Type",
          "description": "Overlay panels support three `modalType` values that control how the panel\ninteracts with the rest of the page:\n\n- `'isModal'` (default) — Use for workflows that require the user's attention before\n returning to the page. A backdrop is shown, background interaction is blocked, focus\n remains within the Panel.\n- `'nonModal'` — Use for side-by-side workflows where users may need to reference or\n interact with the page while the Panel is open. No backdrop is shown, background\n content remains interactive, and focus can move outside the Panel.\n- `'alert'` — Use for critical workflows that require the user to make a decision before\n continuing. A backdrop is shown, background interaction is blocked, the header close\n button is hidden, and the Panel can only be dismissed through the provided actions.",
          "source": "const [modalType, setModalType] = useState<PanelModalType>('isModal');\n    const [isOpen, setIsOpen] = useState(false);\n    const triggerButtonRef = useRef<HTMLButtonElement>(null);\n\n    const Actions =\n      modalType === 'alert' ? (\n        <Button onClick={() => setIsOpen(false)}>Yes, I agree</Button>\n      ) : (\n        <>\n          <Button kind=\"outline\" onClick={() => setIsOpen(false)}>\n            Cancel\n          </Button>\n          <Button onClick={() => setIsOpen(false)}>Save</Button>\n        </>\n      );\n\n    return (\n      <Box style={controlAreaStyle}>\n        <RadioButtonGroup orientation=\"horizontal\">\n          <RadioButton\n            label=\"Modal\"\n            value=\"isModal\"\n            checked={modalType === 'isModal'}\n            onChange={() => {\n              setModalType('isModal');\n              setIsOpen(false);\n            }}\n          />\n          <RadioButton\n            label=\"Non-Modal\"\n            value=\"nonModal\"\n            checked={modalType === 'nonModal'}\n            onChange={() => {\n              setModalType('nonModal');\n              setIsOpen(false);\n            }}\n          />\n          <RadioButton\n            label=\"Alert\"\n            value=\"alert\"\n            checked={modalType === 'alert'}\n            onChange={() => {\n              setModalType('alert');\n              setIsOpen(false);\n            }}\n          />\n        </RadioButtonGroup>\n        <Button ref={triggerButtonRef} onClick={() => setIsOpen(v => !v)}>\n          Panel trigger\n        </Button>\n        <Panel\n          kind=\"overlay\"\n          modalType={modalType}\n          open={isOpen}\n          onOpenChange={setIsOpen}\n          triggerRef={triggerButtonRef}\n          width=\"md\"\n        >\n          <Panel.Header>\n            <Panel.Header.Row>\n              <Panel.Header.Heading>Panel heading</Panel.Header.Heading>\n            </Panel.Header.Row>\n          </Panel.Header>\n          <Panel.Body>\n            <Box py=\"100\">\n              Panel content goes here. The body of a Panel is fully configurable.\n            </Box>\n          </Panel.Body>\n          <Panel.Footer>\n            <Panel.Footer.Actions layout=\"end\">{Actions}</Panel.Footer.Actions>\n          </Panel.Footer>\n        </Panel>\n      </Box>\n    );"
        },
        {
          "name": "Control Outside Press",
          "description": "For `nonModal` Panels, use `closeOnOutsidePress` to control whether an outside press\ndismisses the Panel. `isModal` Panels always dismiss on backdrop press. `alert` Panels\ndo not support outside-press dismissal.",
          "source": "const [isOpen, setIsOpen] = useState(false);\n    const [remainOpen, setRemainOpen] = useState(true);\n    const triggerButtonRef = useRef<HTMLButtonElement>(null);\n\n    return (\n      <Box style={controlAreaStyle}>\n        <Checkbox\n          label=\"Remain open when user clicks outside the Panel\"\n          checked={remainOpen}\n          onChange={e => setRemainOpen(e.target.checked)}\n        />\n        <Button ref={triggerButtonRef} onClick={() => setIsOpen(v => !v)}>\n          Panel trigger\n        </Button>\n        <Panel\n          kind=\"overlay\"\n          modalType=\"nonModal\"\n          closeOnOutsidePress={!remainOpen}\n          open={isOpen}\n          onOpenChange={setIsOpen}\n          triggerRef={triggerButtonRef}\n          width=\"md\"\n        >\n          <Panel.Header>\n            <Panel.Header.Row>\n              <Panel.Header.Heading>Panel heading</Panel.Header.Heading>\n            </Panel.Header.Row>\n          </Panel.Header>\n          <Panel.Body>\n            <Box py=\"100\">\n              Panel content goes here. The body of a Panel is fully configurable.\n            </Box>\n          </Panel.Body>\n          <Panel.Footer>\n            <Panel.Footer.Actions layout=\"end\">\n              <Button kind=\"outline\" onClick={() => setIsOpen(false)}>\n                Cancel\n              </Button>\n              <Button onClick={() => setIsOpen(false)}>Save</Button>\n            </Panel.Footer.Actions>\n          </Panel.Footer>\n        </Panel>\n      </Box>\n    );"
        },
        {
          "name": "Offset",
          "description": "Set `offset` to add space between the Panel and the viewport edge. An offset Panel\ngets rounded corners on every side and drops its outer divider.\n\n> Pass `true` for the Beam default of `1rem`, a CSS length for a uniform offset, or a\n> `{ x, y }` object like `{ x: \"2rem\", y: \"0.5rem\" }` to offset the axes independently.",
          "source": "const [isOpen, setIsOpen] = useState(false);\n    const triggerButtonRef = useRef<HTMLButtonElement>(null);\n\n    return (\n      <Box style={controlAreaStyle}>\n        <Button ref={triggerButtonRef} onClick={() => setIsOpen(v => !v)}>\n          Panel trigger\n        </Button>\n        <Panel\n          kind=\"overlay\"\n          offset\n          open={isOpen}\n          onOpenChange={setIsOpen}\n          triggerRef={triggerButtonRef}\n          width=\"md\"\n        >\n          <Panel.Header>\n            <Panel.Header.Row>\n              <Panel.Header.Heading>Panel heading</Panel.Header.Heading>\n            </Panel.Header.Row>\n          </Panel.Header>\n          <Panel.Body>\n            <Box py=\"100\">\n              Panel content goes here. The body of a Panel is fully configurable.\n            </Box>\n          </Panel.Body>\n          <Panel.Footer>\n            <Panel.Footer.Actions layout=\"end\">\n              <Button kind=\"outline\" onClick={() => setIsOpen(false)}>\n                Cancel\n              </Button>\n              <Button onClick={() => setIsOpen(false)}>Save</Button>\n            </Panel.Footer.Actions>\n          </Panel.Footer>\n        </Panel>\n      </Box>\n    );"
        },
        {
          "name": "With Header",
          "description": "The header is highly customizable - add icons, actions, a description, custom\ncontent. On overlay panels you can also hide the close button with `dismissible={false}`.",
          "source": "const [isOpen, setIsOpen] = useState(false);\n    const triggerButtonRef = useRef<HTMLButtonElement>(null);\n\n    return (\n      <Box style={controlAreaStyle}>\n        <Button ref={triggerButtonRef} onClick={() => setIsOpen(v => !v)}>\n          Panel trigger\n        </Button>\n        <Panel\n          kind=\"overlay\"\n          open={isOpen}\n          onOpenChange={setIsOpen}\n          triggerRef={triggerButtonRef}\n          width=\"md\"\n        >\n          <Panel.Header>\n            <Panel.Header.Row>\n              <Panel.Header.ContentBefore>\n                <Icon icon={Satellite} size=\"lg\" color=\"primary\" />\n              </Panel.Header.ContentBefore>\n              <Panel.Header.Heading>Panel heading</Panel.Header.Heading>\n              <Panel.Header.ContentAfter>\n                <Icon icon={CloudDoneOutlined} size=\"lg\" color=\"secondary\" />\n                <Button\n                  appearance=\"neutral-subtle\"\n                  kind=\"bare\"\n                  size=\"lg\"\n                  iconOnly\n                  iconBefore={<Icon icon={Add} />}\n                  aria-label=\"Add\"\n                />\n                <Menu>\n                  <Menu.Trigger>\n                    <Button\n                      appearance=\"neutral-subtle\"\n                      kind=\"bare\"\n                      size=\"lg\"\n                      iconOnly\n                      iconBefore={<Icon icon={MoreHoriz} />}\n                      aria-label=\"More options\"\n                    />\n                  </Menu.Trigger>\n                  <Menu.PopoverContent>\n                    <ActionList>\n                      <ActionList.Item>List item</ActionList.Item>\n                      <ActionList.Item>List item</ActionList.Item>\n                      <ActionList.Item>List item</ActionList.Item>\n                      <ActionList.Item>List item</ActionList.Item>\n                      <ActionList.Item>List item</ActionList.Item>\n                    </ActionList>\n                  </Menu.PopoverContent>\n                </Menu>\n              </Panel.Header.ContentAfter>\n            </Panel.Header.Row>\n            <Panel.Header.Description>\n              Descriptive text used to add extra information to the header\n            </Panel.Header.Description>\n            <Panel.Header.Subheader>\n              <Alert\n                appearance=\"infoSecondary\"\n                size=\"sm\"\n                body=\"Sub header section. Add any custom content here.\"\n              />\n            </Panel.Header.Subheader>\n          </Panel.Header>\n          <Panel.Body>\n            <Box py=\"100\">\n              Panel content goes here. The body of a Panel is fully configurable.\n            </Box>\n          </Panel.Body>\n          <Panel.Footer>\n            <Panel.Footer.Actions layout=\"end\">\n              <Button kind=\"outline\" onClick={() => setIsOpen(false)}>\n                Cancel\n              </Button>\n              <Button onClick={() => setIsOpen(false)}>Save</Button>\n            </Panel.Footer.Actions>\n          </Panel.Footer>\n        </Panel>\n      </Box>\n    );"
        },
        {
          "name": "With Footer",
          "description": "`Panel.Footer.Actions` allows four common button layouts: `start`, `end`,\n`spaceBetween`, and `stacked`. However, the footer isn't limited to these and accepts any\ncustom content.",
          "source": "const [isOpen, setIsOpen] = useState(false);\n    const triggerButtonRef = useRef<HTMLButtonElement>(null);\n\n    return (\n      <Box style={controlAreaStyle}>\n        <Button ref={triggerButtonRef} onClick={() => setIsOpen(v => !v)}>\n          Panel trigger\n        </Button>\n        <Panel\n          kind=\"overlay\"\n          open={isOpen}\n          onOpenChange={setIsOpen}\n          triggerRef={triggerButtonRef}\n          width=\"md\"\n        >\n          <Panel.Header>\n            <Panel.Header.Row>\n              <Panel.Header.Heading>Panel heading</Panel.Header.Heading>\n            </Panel.Header.Row>\n          </Panel.Header>\n          <Panel.Body>\n            <Box py=\"100\">\n              Panel content goes here. The body of a Panel is fully configurable.\n            </Box>\n          </Panel.Body>\n          <Panel.Footer>\n            <Panel.Footer.Actions layout=\"spaceBetween\">\n              <Button kind=\"ghost\" onClick={() => setIsOpen(false)}>\n                Revert changes\n              </Button>\n              <Box style={{ display: 'flex', gap: '0.5rem' }}>\n                <Button kind=\"outline\" onClick={() => setIsOpen(false)}>\n                  Cancel\n                </Button>\n                <Button onClick={() => setIsOpen(false)}>Save</Button>\n              </Box>\n            </Panel.Footer.Actions>\n          </Panel.Footer>\n        </Panel>\n      </Box>\n    );"
        },
        {
          "name": "Horizontal Padding",
          "description": "Panel supports horizontal padding in `sm` and `md`. Default padding is `md`.",
          "source": "const [padding, setPadding] = useState<'sm' | 'md'>('md');\n    const [isOpen, setIsOpen] = useState(false);\n    const triggerButtonRef = useRef<HTMLButtonElement>(null);\n\n    return (\n      <Box style={controlAreaStyle}>\n        <RadioButtonGroup orientation=\"horizontal\">\n          <RadioButton\n            label=\"Small\"\n            value=\"sm\"\n            checked={padding === 'sm'}\n            onChange={() => setPadding('sm')}\n          />\n          <RadioButton\n            label=\"Medium\"\n            value=\"md\"\n            checked={padding === 'md'}\n            onChange={() => setPadding('md')}\n          />\n        </RadioButtonGroup>\n        <Button ref={triggerButtonRef} onClick={() => setIsOpen(v => !v)}>\n          Panel trigger\n        </Button>\n        <Panel\n          kind=\"overlay\"\n          modalType=\"nonModal\"\n          open={isOpen}\n          onOpenChange={setIsOpen}\n          triggerRef={triggerButtonRef}\n          padding={padding}\n          width=\"md\"\n        >\n          <Panel.Header>\n            <Panel.Header.Row>\n              <Panel.Header.Heading>Panel heading</Panel.Header.Heading>\n            </Panel.Header.Row>\n          </Panel.Header>\n          <Panel.Body>\n            <Box py=\"100\">\n              Panel content goes here. The body of a Panel is fully configurable.\n            </Box>\n          </Panel.Body>\n          <Panel.Footer>\n            <Panel.Footer.Actions layout=\"end\">\n              <Button kind=\"outline\" onClick={() => setIsOpen(false)}>\n                Cancel\n              </Button>\n              <Button onClick={() => setIsOpen(false)}>Save</Button>\n            </Panel.Footer.Actions>\n          </Panel.Footer>\n        </Panel>\n      </Box>\n    );"
        },
        {
          "name": "Rendering Overlay In Container",
          "description": "The `container` prop renders a `nonModal` Panel inside a page region instead of over\nthe whole viewport. Because it stays within the content area, it doesn't cover global\nUI like the Header, which remains visible and interactive while the Panel is open.",
          "source": "const [containerEl, setContainerEl] = useState<HTMLElement | null>(null);\n    const triggerButtonRef = useRef<HTMLButtonElement>(null);\n    const [isOpen, setIsOpen] = useState(false);\n\n    return (\n      <PageLayout sideNavConfig={{ defaultOpen: true, withMobile: false }}>\n        <PageLayout.Header>\n          <Header>\n            <Header.Masthead>\n              <Header.Masthead.Signal />\n              <Header.Masthead.Text kind=\"heading-sm\">Header</Header.Masthead.Text>\n            </Header.Masthead>\n          </Header>\n        </PageLayout.Header>\n        <PageLayout.Main>\n          <Box\n            ref={setContainerEl}\n            backgroundColor=\"00\"\n            style={{\n              position: 'relative',\n              overflow: 'hidden',\n              height: '100%',\n              display: 'flex',\n            }}\n          >\n            <Box\n              borderRadius=\"md\"\n              backgroundColor=\"01\"\n              p=\"150\"\n              m=\"150\"\n              style={{\n                flex: 1,\n                display: 'flex',\n                alignItems: 'center',\n              }}\n            >\n              <Button ref={triggerButtonRef} onClick={() => setIsOpen(v => !v)}>\n                Panel trigger\n              </Button>\n            </Box>\n            <Panel\n              kind=\"overlay\"\n              modalType=\"nonModal\"\n              container={containerEl}\n              triggerRef={triggerButtonRef}\n              position=\"end\"\n              open={isOpen}\n              onOpenChange={setIsOpen}\n            >\n              <Panel.Header>\n                <Panel.Header.Row>\n                  <Panel.Header.Heading>Panel heading</Panel.Header.Heading>\n                </Panel.Header.Row>\n              </Panel.Header>\n              <Panel.Body>\n                <Box py=\"100\">\n                  Panel content goes here. The body of a Panel is fully configurable.\n                </Box>\n              </Panel.Body>\n              <Panel.Footer>\n                <Panel.Footer.Actions layout=\"end\">\n                  <Button kind=\"outline\" onClick={() => setIsOpen(false)}>\n                    Close\n                  </Button>\n                </Panel.Footer.Actions>\n              </Panel.Footer>\n            </Panel>\n          </Box>\n        </PageLayout.Main>\n      </PageLayout>\n    );"
        },
        {
          "name": "Preserving And Guarding State",
          "description": "A Panel doesn't preserve its own state, so guarding unsaved work is up to implementer's responsibility.\n`onBeforeClose` runs whenever someone tries to close the Panel (close button, Escape,\nor an outside press) and acts as a gate: return `true` to let it close, `false` to\nkeep it open.\n\nFor an async workflows like a confirmation dialog, return a `Promise` and resolve\nit once the user decides. The callback only fires for user-initiated closes; setting\n`open={false}` from the parent bypasses it, so programmatic closes are never blocked.\n\nFooter actions like Save and Cancel rely on the same `onBeforeClose` logic, wiring those up is also the\nimplementer's responsibility.",
          "source": "const [isOpen, setIsOpen] = useState(false);\n    const triggerButtonRef = useRef<HTMLButtonElement>(null);\n    const [committedValue, setCommittedValue] = useState('spock');\n    const [inputValue, setInputValue] = useState('spock');\n    const [inputError, setInputError] = useState(false);\n    const [showConfirm, setShowConfirm] = useState(false);\n    const [resolveClose, setResolveClose] = useState<\n      ((allow: boolean) => void) | null\n    >(null);\n    const isDirty = inputValue !== committedValue;\n\n    const openConfirmDialog = () => setShowConfirm(true);\n\n    const handleBeforeClose = useCallback(\n      (_reason: PanelCloseReason): Promise<boolean> => {\n        if (!isDirty) return Promise.resolve(true);\n        return new Promise(resolve => {\n          setShowConfirm(true);\n          setResolveClose((prev: ((allow: boolean) => void) | null) => {\n            prev?.(false); // settle any outstanding promise\n            return resolve;\n          });\n        });\n      },\n      [isDirty],\n    );\n\n    const discardChanges = () => {\n      setInputValue(committedValue);\n      setInputError(false);\n      setShowConfirm(false);\n      if (resolveClose) {\n        resolveClose(true);\n        setResolveClose(null);\n      } else {\n        setIsOpen(false);\n      }\n    };\n\n    const keepEditing = () => {\n      setShowConfirm(false);\n      resolveClose?.(false);\n      setResolveClose(null);\n    };\n\n    return (\n      <Box style={controlAreaStyle}>\n        <Button ref={triggerButtonRef} onClick={() => setIsOpen(true)}>\n          Panel trigger\n        </Button>\n        <Dialog\n          open={showConfirm}\n          onOpenChange={open => {\n            if (!open) keepEditing();\n          }}\n          portalled\n          size=\"sm\"\n        >\n          <Dialog.Content>\n            <Dialog.Header appearance=\"negative\" heading=\"Discard changes?\" />\n            <Dialog.Body text=\"You have unsaved edits. If you leave now, changes will be lost.\" />\n            <Dialog.Footer>\n              <Button appearance=\"destructive\" onClick={discardChanges}>\n                Discard changes\n              </Button>\n              <Button appearance=\"neutral\" kind=\"outline\" onClick={keepEditing}>\n                Keep editing\n              </Button>\n            </Dialog.Footer>\n          </Dialog.Content>\n        </Dialog>\n        <Panel\n          kind=\"overlay\"\n          open={isOpen}\n          onOpenChange={setIsOpen}\n          triggerRef={triggerButtonRef}\n          onBeforeClose={handleBeforeClose}\n        >\n          <Panel.Header>\n            <Panel.Header.Row>\n              <Panel.Header.Heading>Edit username</Panel.Header.Heading>\n            </Panel.Header.Row>\n          </Panel.Header>\n          <Panel.Body>\n            <Box py=\"100\">\n              Try closing, canceling, or saving this Panel after making an edit to\n              Username:\n              <br />\n              <ul>\n                <li>\n                  <b>Closing/Canceling</b> the Panel will fire a warning Dialog about\n                  the unsaved edit.\n                </li>\n                <li>\n                  <b>Saving</b> will retain edits\n                </li>\n              </ul>\n              <TextField\n                id=\"panel-name\"\n                label={<Label>Username</Label>}\n                value={inputValue}\n                error={inputError ? 'Username is a required field.' : undefined}\n                onChange={e => {\n                  setInputValue(e.target.value);\n                  setInputError(false);\n                }}\n              />\n            </Box>\n          </Panel.Body>\n          <Panel.Footer>\n            <Panel.Footer.Actions layout=\"end\">\n              <Button\n                kind=\"outline\"\n                onClick={() => {\n                  if (isDirty) openConfirmDialog();\n                  else setIsOpen(false);\n                }}\n              >\n                Cancel\n              </Button>\n              <Button\n                onClick={() => {\n                  if (!inputValue.trim()) {\n                    setInputError(true);\n                    return;\n                  }\n                  setCommittedValue(inputValue);\n                  setIsOpen(false);\n                }}\n              >\n                Save\n              </Button>\n            </Panel.Footer.Actions>\n          </Panel.Footer>\n        </Panel>\n      </Box>\n    );"
        },
        {
          "name": "Customize Colors",
          "description": "Panel surface and divider colors can be customized globally or\nper section. Set `backgroundColor` and `dividerColor` on Panel to apply consistent colors\nacross the full component, or override them on `Panel.Header`, `Panel.Body`, and `Panel.Footer`\nfor more granular customization.\n\n- `Panel backgroundColor` — default background color for all sections: Header, Body, and Footer;\n subcomponent-level `backgroundColor` takes priority.\n- `Panel dividerColor` — default divider color for the panel and its sections;\n subcomponent-level `dividerColor` takes priority.\n- `'Panel.Header backgroundColor'`, `'Panel.Body backgroundColor'`, `'Panel.Footer backgroundColor'`\n — overrides the Panel background color for that section.\n- `'Panel.Header dividerColor'`, `'Panel.Footer dividerColor'` — overrides the Panel divider color\n for the divider rendered between that section and the body.\n\n> All custom color values can use design tokens (`'00'`, `'01'`, `'02'`, etc.) — the same values\n> accepted by `Box backgroundColor`.",
          "source": "<Box\n      style={{ display: 'flex', height: '100%', width: '100%' }}\n      backgroundColor=\"00\"\n    >\n      <Panel kind=\"inline\" position=\"start\" open dividerColor=\"02\" width=\"sm\">\n        <Panel.Header backgroundColor=\"02\" dividerColor=\"02\">\n          <Panel.Header.Row>\n            <Panel.Header.Heading>Panel heading</Panel.Header.Heading>\n          </Panel.Header.Row>\n        </Panel.Header>\n        <Panel.Body backgroundColor=\"00\">\n          <Box py=\"100\">\n            Panel content goes here. The body of a Panel is fully configurable.\n          </Box>\n        </Panel.Body>\n        <Panel.Footer backgroundColor=\"02\" dividerColor=\"02\">\n          <Panel.Footer.Actions layout=\"end\">\n            <Button kind=\"outline\">Cancel</Button>\n            <Button>Save</Button>\n          </Panel.Footer.Actions>\n        </Panel.Footer>\n      </Panel>\n      <Box\n        borderRadius=\"md\"\n        backgroundColor=\"01\"\n        m=\"150\"\n        p=\"150\"\n        style={{\n          display: 'flex',\n          flex: 1,\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n      >\n        <Text color=\"secondary\" alignment=\"center\">\n          Page content here.\n        </Text>\n      </Box>\n    </Box>"
        },
        {
          "name": "Permanent",
          "description": "A permanent Panel is always visible and can't be closed by the user.\nTypically used to display essential and always-accessible controls like navigation or\nother critical tools.",
          "source": "<Box\n      style={{\n        display: 'flex',\n        height: '100%',\n        width: '100%',\n      }}\n      backgroundColor=\"00\"\n    >\n      <Panel kind=\"inline\" position=\"start\" open dismissible={false} divider={false}>\n        <Panel.Header>\n          <Panel.Header.Row>\n            <Panel.Header.Heading>Panel heading</Panel.Header.Heading>\n          </Panel.Header.Row>\n        </Panel.Header>\n        <Panel.Body>\n          <Box py=\"100\">\n            Panel content goes here. The body of a Panel is fully configurable.\n          </Box>\n        </Panel.Body>\n      </Panel>\n      <Box\n        borderRadius=\"md\"\n        backgroundColor=\"01\"\n        p=\"150\"\n        m=\"150\"\n        style={{\n          display: 'flex',\n          flex: 1,\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n      >\n        <Text color=\"secondary\" alignment=\"center\">\n          Page content here.\n        </Text>\n      </Box>\n    </Box>"
        },
        {
          "name": "Multi-Panel",
          "description": "Multiple Panels can be open on the same page, including multiple inline, overlay,\nor combination of both. The inline panel occupies document flow and shifts the page\ncontent, while the overlay panel is portalled to `document.body` and floats above the content.\nNeither panel's open/closed state affects the other.",
          "source": "const [inlineOpen, setInlineOpen] = useState(false);\n    const [overlayOpen, setOverlayOpen] = useState(false);\n\n    return (\n      <Box\n        style={{ display: 'flex', height: '100%', width: '100%' }}\n        backgroundColor=\"00\"\n      >\n        <Panel\n          kind=\"inline\"\n          position=\"start\"\n          open={inlineOpen}\n          onOpenChange={setInlineOpen}\n          width=\"sm\"\n        >\n          <Panel.Header>\n            <Panel.Header.Row>\n              <Panel.Header.Heading>Panel heading</Panel.Header.Heading>\n            </Panel.Header.Row>\n          </Panel.Header>\n          <Panel.Body>\n            <Box py=\"100\">\n              Panel content goes here. The body of a Panel is fully configurable.\n            </Box>\n          </Panel.Body>\n          <Panel.Footer>\n            <Panel.Footer.Actions layout=\"end\">\n              <Button kind=\"outline\" onClick={() => setInlineOpen(false)}>\n                Close\n              </Button>\n            </Panel.Footer.Actions>\n          </Panel.Footer>\n        </Panel>\n\n        <Box\n          borderRadius=\"md\"\n          backgroundColor=\"01\"\n          p=\"150\"\n          m=\"150\"\n          style={{\n            flex: 1,\n            display: 'flex',\n            flexDirection: 'column',\n            alignItems: 'center',\n            justifyContent: 'center',\n            gap: '0.5rem',\n          }}\n        >\n          <Button width=\"9rem\" onClick={() => setInlineOpen(v => !v)}>\n            Inline trigger\n          </Button>\n          <Button width=\"9rem\" onClick={() => setOverlayOpen(v => !v)}>\n            Overlay trigger\n          </Button>\n        </Box>\n\n        <Panel\n          kind=\"overlay\"\n          modalType=\"nonModal\"\n          closeOnOutsidePress={false}\n          position=\"end\"\n          open={overlayOpen}\n          onOpenChange={setOverlayOpen}\n          width=\"sm\"\n        >\n          <Panel.Header>\n            <Panel.Header.Row>\n              <Panel.Header.Heading>Panel heading</Panel.Header.Heading>\n            </Panel.Header.Row>\n          </Panel.Header>\n          <Panel.Body>\n            <Box py=\"100\">\n              Panel content goes here. The body of a Panel is fully configurable.\n            </Box>\n          </Panel.Body>\n          <Panel.Footer>\n            <Panel.Footer.Actions layout=\"end\">\n              <Button kind=\"outline\" onClick={() => setOverlayOpen(false)}>\n                Close\n              </Button>\n            </Panel.Footer.Actions>\n          </Panel.Footer>\n        </Panel>\n      </Box>\n    );"
        },
        {
          "name": "Resizable",
          "description": "Set `resizable` to `true` to enable resizing, or pass\n`resizable={{ minSize: 200, maxSize: 500 }}` to set custom min/max sizes. The size\nis persisted to localStorage when a `storageKey` is provided.\n\n> Drag the edge of the Panel to try out resizing.",
          "source": "<Box\n      style={{\n        display: 'flex',\n        height: '100%',\n        width: '100%',\n      }}\n      backgroundColor=\"00\"\n    >\n      <Panel\n        id=\"resizable-inline-start\"\n        kind=\"inline\"\n        position=\"start\"\n        open\n        resizable={{ minSize: 260, maxSize: 650 }}\n        divider={false}\n      >\n        <Panel.Header>\n          <Panel.Header.Row>\n            <Panel.Header.Heading>Panel heading</Panel.Header.Heading>\n          </Panel.Header.Row>\n        </Panel.Header>\n        <Panel.Body>\n          <Box py=\"100\">\n            Panel content goes here. The body of a Panel is fully configurable.\n          </Box>\n        </Panel.Body>\n        <Panel.Footer>\n          <Panel.Footer.Actions layout=\"end\">\n            <Button kind=\"outline\">Cancel</Button>\n            <Button>Save</Button>\n          </Panel.Footer.Actions>\n        </Panel.Footer>\n      </Panel>\n      <Box\n        borderRadius=\"md\"\n        backgroundColor=\"01\"\n        p=\"150\"\n        m=\"150\"\n        style={{\n          display: 'flex',\n          flex: 1,\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n      >\n        <Text color=\"secondary\" alignment=\"center\">\n          Page content here.\n        </Text>\n      </Box>\n    </Box>"
        },
        {
          "name": "Responsive",
          "description": "The Panel has no built-in responsive behavior; breakpoints are defined at the application level.\nThis example wires them up inline with `window.matchMedia` — in production, reach for\nthe usual breakpoint hook or CSS-in-JS solution instead.\n\n> Resize the browser (or use the Storybook viewport addon) to preview both states:\n> - **>=720px** — `kind=\"overlay\"`, `position=\"start\"`, `modalType=\"isModal\"`\n> - **< 720px** — `kind=\"overlay\"`, `position=\"bottom\"`, `modalType=\"isModal\"`",
          "source": "const [bp, setBp] = useState<'md' | 'sm'>(() => {\n      if (typeof window === 'undefined') return 'md';\n      return window.matchMedia('(max-width: 719px)').matches ? 'sm' : 'md';\n    });\n    const [open, setOpen] = useState(false);\n    const triggerButtonRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n      const smMq = window.matchMedia('(max-width: 719px)');\n\n      const update = () => {\n        setBp(smMq.matches ? 'sm' : 'md');\n      };\n\n      smMq.addEventListener('change', update);\n      return () => {\n        smMq.removeEventListener('change', update);\n      };\n    }, []);\n\n    return (\n      <Box style={controlAreaStyle}>\n        <Panel\n          kind=\"overlay\"\n          modalType=\"isModal\"\n          triggerRef={triggerButtonRef}\n          position={bp === 'sm' ? 'bottom' : 'start'}\n          open={open}\n          onOpenChange={setOpen}\n          divider={false}\n        >\n          <Panel.Header>\n            <Panel.Header.Row>\n              <Panel.Header.Heading>Panel heading</Panel.Header.Heading>\n            </Panel.Header.Row>\n          </Panel.Header>\n          <Panel.Body>\n            <Box py=\"100\">\n              Panel content goes here. The body of a Panel is fully configurable.\n            </Box>\n          </Panel.Body>\n          <Panel.Footer>\n            <Panel.Footer.Actions layout=\"end\">\n              <Button kind=\"outline\" onClick={() => setOpen(false)}>\n                Close\n              </Button>\n            </Panel.Footer.Actions>\n          </Panel.Footer>\n        </Panel>\n        <Button ref={triggerButtonRef} onClick={() => setOpen(v => !v)}>\n          Panel trigger\n        </Button>\n      </Box>\n    );"
        }
      ],
      "category": "Components",
      "displayName": "Panel",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Pagination",
      "slug": "components-pagination",
      "description": "Pagination is used to move back and forth through content that’s split across multiple pages.",
      "type": "component",
      "props": [
        {
          "name": "onPageChange",
          "type": "(desiredPageNumber: number) => void",
          "description": "Callback to execute on page change",
          "required": true
        },
        {
          "name": "totalPages",
          "type": "number",
          "description": "Sets total number of pages",
          "required": true
        },
        {
          "name": "currentPage",
          "type": "number",
          "description": "The currently active page in the pagination.",
          "defaultValue": "1"
        },
        {
          "name": "indeterminate",
          "type": "boolean",
          "description": "Specify if Pagination displays without a page count",
          "defaultValue": "false"
        },
        {
          "name": "offset",
          "type": "number",
          "description": "Specify how many extra items display on each side of the active item",
          "defaultValue": "0"
        },
        {
          "name": "controlsFirstLast",
          "type": "boolean",
          "description": "Specify if the first and last Pagination controls display",
          "defaultValue": "false"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Pagination.",
          "source": "<Pagination {...args} />"
        },
        {
          "name": "Truncation",
          "description": "Truncation automatically gets applied if there are more than 5 items.",
          "source": "<>\n        <Pagination\n          onPageChange={elem => console.log('Desired Page: ', elem)}\n          totalPages={5}\n        />\n        <Pagination\n          onPageChange={elem => console.log('Desired Page: ', elem)}\n          totalPages={10}\n        />\n      </>"
        },
        {
          "name": "Offset",
          "description": "Use offset to configure how many extra items display on each side of the active item.",
          "source": "<>\n        <Pagination\n          currentPage={4}\n          onPageChange={elem => console.log('Desired Page: ', elem)}\n          totalPages={10}\n        />\n        <Pagination\n          currentPage={8}\n          onPageChange={elem => console.log('Desired Page: ', elem)}\n          totalPages={16}\n          offset={2}\n        />\n      </>"
        },
        {
          "name": "First And Last",
          "description": "Set `controlsFirstLast` to `true` to make first and last Pagination controls available.",
          "source": "<Pagination\n      onPageChange={elem => console.log('Desired Page: ', elem)}\n      totalPages={10}\n      controlsFirstLast={true}\n    />"
        },
        {
          "name": "Indeterminate",
          "description": "Set `indeterminate` to `true` to display Pagination without a page count.",
          "source": "<>\n        <Pagination\n          onPageChange={elem => console.log('Desired Page: ', elem)}\n          totalPages={10}\n          indeterminate={true}\n        />\n        <Pagination\n          onPageChange={elem => console.log('Desired Page: ', elem)}\n          totalPages={10}\n          indeterminate={true}\n          controlsFirstLast={true}\n        />\n      </>"
        }
      ],
      "category": "Components",
      "displayName": "Pagination",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Layout/PageLayout/PageLayout",
      "slug": "layout-pagelayout-pagelayout",
      "description": "PageLayout is a robust utility component that leverages Header and SideNav to create responsive UI shells for web applications at Viasat.\n\nWhile [Header](./?path=/docs/layout-header-header--docs) and [SideNav](./?path=/docs/layout-sidenav-sidenav--docs) can be used independently, it’s recommended to use PageLayout to leverage pre-rolled features such as navigation reflow, open/close controls for SideNav, and general responsive behaviors.",
      "type": "component",
      "props": [
        {
          "name": "children",
          "type": "ReactNode",
          "description": "The content of the PageLayout"
        },
        {
          "name": "sideNavConfig",
          "type": "{ withMobile?: boolean; defaultOpen?: boolean }",
          "description": "Configuration for SideNav and Header, passed to SideNavContext.\nAccepts `{ withMobile?: boolean; defaultOpen?: boolean }` — `withMobile`\nenables mobile responsive behavior (default `true`); `defaultOpen` sets the\nSideNav's initial open state (default `false`)."
        }
      ],
      "subcomponentProps": [
        {
          "name": "PageLayout.Header",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "The content of the PageLayout.Header",
              "required": true
            }
          ]
        },
        {
          "name": "PageLayout.Aside",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "The content of the PageLayout.Aside",
              "required": true
            }
          ]
        },
        {
          "name": "PageLayout.Main",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "The content of the PageLayout.Main",
              "required": true
            }
          ]
        }
      ],
      "stories": [
        {
          "name": "Example",
          "description": "This is an example of PageLayout using Header and SideNav to create a UI shell.",
          "source": "<PageLayout sideNavConfig={{ withMobile: false, defaultOpen: true }}>\n      <PageLayout.Header>\n        <Header>\n          <Header.Masthead>\n            <Header.Masthead.Signal />{' '}\n            <Header.Masthead.Text kind=\"heading-sm\">Platform</Header.Masthead.Text>\n          </Header.Masthead>\n          <Header.ActionGroup>\n            <Header.Action\n              aria-label=\"Apps\"\n              icon={<Icon color=\"secondary\" icon={AppsCurved} />}\n            />\n            <Tooltip text=\"Profile\" portalled showDelay={600}>\n              <Avatar\n                size=\"xs\"\n                onClick={() => undefined}\n                role=\"button\"\n                aria-label=\"Profile\"\n                alt=\"Profile\"\n              />\n            </Tooltip>\n          </Header.ActionGroup>\n        </Header>\n      </PageLayout.Header>\n      <PageLayout.Aside>\n        <SideNav openLayout=\"drawer\">\n          <SideNav.ActionList ariaLabel=\"Actions\">\n            <SideNav.ActionList.Item\n              selected={true}\n              contentBefore={<Icon icon={Satellite} />}\n              aria-label=\"Item 1\"\n            >\n              Item 1\n            </SideNav.ActionList.Item>\n            <SideNav.ActionList.Item\n              contentBefore={<Icon icon={Satellite} />}\n              aria-label=\"Item 2\"\n            >\n              Item 2\n            </SideNav.ActionList.Item>\n            <SideNav.ActionList.Item\n              contentBefore={<Icon icon={Satellite} />}\n              aria-label=\"Item 3\"\n            >\n              Item 3\n            </SideNav.ActionList.Item>\n            <SideNav.ActionList.Item\n              contentBefore={<Icon icon={Satellite} />}\n              aria-label=\"Item 4\"\n            >\n              Item 4\n            </SideNav.ActionList.Item>\n            <SideNav.ActionList.Item\n              contentBefore={<Icon icon={Satellite} />}\n              aria-label=\"Item 5\"\n            >\n              Item 5\n            </SideNav.ActionList.Item>\n            <SideNav.ActionList.Item\n              contentBefore={<Icon icon={Satellite} />}\n              aria-label=\"Item 6\"\n            >\n              Item 6\n            </SideNav.ActionList.Item>\n            <SideNav.ActionList.Item\n              contentBefore={<Icon icon={Satellite} />}\n              aria-label=\"Item 7\"\n            >\n              Item 7\n            </SideNav.ActionList.Item>\n            <SideNav.ActionList.Item\n              contentBefore={<Icon icon={Satellite} />}\n              aria-label=\"Item 8\"\n            >\n              Item 8\n            </SideNav.ActionList.Item>\n          </SideNav.ActionList>\n        </SideNav>\n      </PageLayout.Aside>\n      <PageLayout.Main>\n        <Box\n          style={{\n            height: '100%',\n            width: '100%',\n            display: 'flex',\n            flexDirection: 'column',\n          }}\n          p=\"150\"\n          backgroundColor=\"00\"\n        >\n          <Box mBottom=\"150\">\n            <Breadcrumb aria-label={'Breadcrumbs 2'}>\n              <BreadcrumbItem href=\"#\" icon={Home}>\n                Item 1\n              </BreadcrumbItem>\n              <BreadcrumbItem href=\"#\">Item 2</BreadcrumbItem>\n              <BreadcrumbItem href=\"#\">Item 3</BreadcrumbItem>\n              <BreadcrumbItem href=\"#\">Current</BreadcrumbItem>\n            </Breadcrumb>\n          </Box>\n          <Box\n            borderRadius=\"md\"\n            backgroundColor=\"01\"\n            p=\"150\"\n            style={{ width: '100%', flex: 1 }}\n          ></Box>\n        </Box>\n      </PageLayout.Main>\n    </PageLayout>"
        },
        {
          "name": "Navigation Reflow",
          "description": "PageLayout automates `Header.Navigation` responsive behaviors by reflowing navigation items to the SideNav.Body.",
          "source": "<PageLayout sideNavConfig={{ withMobile: true, defaultOpen: false }}>\n      <PageLayout.Header>\n        <Header>\n          <Header.Masthead>\n            <Header.Masthead.Logo />\n          </Header.Masthead>\n          <Header.Navigation>\n            <Header.Navigation.Item aria-label=\"Item 1\" selected>\n              Item 1\n            </Header.Navigation.Item>\n            <Header.Navigation.Item aria-label=\"Item 2\">\n              Item 2\n            </Header.Navigation.Item>\n            <Header.Navigation.Item aria-label=\"Item 3\">\n              Item 3\n            </Header.Navigation.Item>\n            <Header.Navigation.Item aria-label=\"Item 4\">\n              Item 4\n            </Header.Navigation.Item>\n          </Header.Navigation>\n          <Header.ActionGroup>\n            <Tooltip text=\"Profile\" portalled showDelay={600}>\n              <Avatar\n                size=\"xs\"\n                onClick={() => undefined}\n                role=\"button\"\n                aria-label=\"Profile\"\n                alt=\"Profile\"\n              />\n            </Tooltip>\n          </Header.ActionGroup>\n        </Header>\n      </PageLayout.Header>\n      <PageLayout.Main>\n        <Box\n          style={{\n            height: '100%',\n            width: '100%',\n            display: 'flex',\n            flexDirection: 'column',\n          }}\n          p=\"150\"\n          backgroundColor=\"00\"\n        >\n          <Box\n            borderRadius=\"md\"\n            backgroundColor=\"01\"\n            p=\"150\"\n            style={{\n              width: '100%',\n              flex: 1,\n              display: 'flex',\n              justifyContent: 'center',\n              alignItems: 'center',\n            }}\n          >\n            <Text color=\"secondary\" kind=\"body-lg\" alignment=\"center\">\n              Adjust browser width to preview navigation reflow\n            </Text>\n          </Box>\n        </Box>\n      </PageLayout.Main>\n    </PageLayout>"
        },
        {
          "name": "Drawer To Rail",
          "description": "Use `Header.SideNavTrigger` and the SideNav props `openLayout=\"drawer\"` and `closedLayout=\"rail\"` to collapse from a drawer to rail.\nThe content of `SideNav.Header` and `SideNav.Footer` are user provided components. For a smooth close animation, be sure to consider wrapping\nwhen custom content in the drawer collapses to a rail.\n\n> `SideNav.Header` content will not display in rail mode. `SideNav.ActionList.Items` in `SideNav.Footer` automatically display in rail mode while custom content will not display.",
          "source": "<PageLayout sideNavConfig={{ withMobile: false, defaultOpen: true }}>\n        <PageLayout.Header>\n          <Header>\n            <Header.SideNavTrigger />\n            <Header.Masthead>\n              <Header.Masthead.Signal />{' '}\n              <Header.Masthead.Text kind=\"heading-sm\">Platform</Header.Masthead.Text>\n            </Header.Masthead>\n            <Header.ActionGroup>\n              <Header.Action\n                aria-label=\"Apps\"\n                icon={<Icon color=\"secondary\" icon={AppsCurved} />}\n              />\n              <Tooltip text=\"Profile\" portalled showDelay={600}>\n                <Avatar\n                  size=\"xs\"\n                  onClick={() => undefined}\n                  role=\"button\"\n                  aria-label=\"Profile\"\n                  alt=\"Profile\"\n                />\n              </Tooltip>\n            </Header.ActionGroup>\n          </Header>\n        </PageLayout.Header>\n        <PageLayout.Aside>\n          <SideNav openLayout=\"drawer\" closedLayout=\"rail\">\n            <SideNav.Header>\n              <Box\n                gap=\"50\"\n                style={{ display: 'flex', minWidth: '165px' }}\n                mTop=\"25\"\n                mBottom=\"50\"\n              >\n                <Avatar shape=\"square\" size=\"md\" name=\"B M\" />\n                <Box>\n                  <Text kind=\"label-sm\" compact style={{ display: 'block' }}>\n                    Beam\n                  </Text>\n                  <Text\n                    kind=\"body-xs\"\n                    compact\n                    style={{ display: 'block' }}\n                    color=\"secondary\"\n                  >\n                    Design System\n                  </Text>\n                </Box>\n              </Box>\n            </SideNav.Header>\n            <SideNav.Body>\n              <SideNav.ActionList ariaLabel=\"Actions\">\n                <SideNav.ActionList.Item\n                  selected={true}\n                  contentBefore={<Icon icon={Satellite} />}\n                  aria-label=\"Item 1\"\n                >\n                  Item 1\n                </SideNav.ActionList.Item>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Satellite} />}\n                  aria-label=\"Item 2\"\n                >\n                  Item 2\n                </SideNav.ActionList.Item>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Satellite} />}\n                  aria-label=\"Item 3\"\n                >\n                  Item 3\n                </SideNav.ActionList.Item>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Satellite} />}\n                  aria-label=\"Item 4\"\n                >\n                  Item 4\n                </SideNav.ActionList.Item>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Satellite} />}\n                  aria-label=\"Item 5\"\n                >\n                  Item 5\n                </SideNav.ActionList.Item>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Satellite} />}\n                  aria-label=\"Item 6\"\n                >\n                  Item 6\n                </SideNav.ActionList.Item>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Satellite} />}\n                  aria-label=\"Item 7\"\n                >\n                  Item 7\n                </SideNav.ActionList.Item>\n                <SideNav.ActionList.Item\n                  contentBefore={<Icon icon={Satellite} />}\n                  aria-label=\"Item 8\"\n                >\n                  Item 8\n                </SideNav.ActionList.Item>\n              </SideNav.ActionList>\n            </SideNav.Body>\n            <SideNav.Footer>\n              <SideNav.ActionList ariaLabel=\"navigation-footer\">\n                <SideNav.ActionList.Group>\n                  <SideNav.ActionList.Item\n                    contentBefore={<Icon icon={Settings} />}\n                    aria-label=\"Settings\"\n                  >\n                    <SideNav.ActionList.Item.Label>\n                      Settings\n                    </SideNav.ActionList.Item.Label>\n                  </SideNav.ActionList.Item>\n                  <SideNav.ActionList.Item\n                    contentBefore={<Icon icon={Export} />}\n                    aria-label=\"Logout\"\n                  >\n                    Logout\n                  </SideNav.ActionList.Item>\n                </SideNav.ActionList.Group>\n              </SideNav.ActionList>\n              <Box pTop=\"25\" pBottom=\"25\" className=\"bm-side-nav__footer__slot\">\n                <Divider\n                  borderColor=\"01\"\n                  role=\"presentation\"\n                  aria-orientation={undefined}\n                  style={{ marginBlockEnd: '1rem' }}\n                />\n                <Button\n                  iconBefore={<Feedback />}\n                  kind=\"outline\"\n                  size=\"sm\"\n                  width={'100%'}\n                  style={{ overflow: 'clip', minWidth: '165px' }}\n                >\n                  Give feedback\n                </Button>\n              </Box>\n            </SideNav.Footer>\n          </SideNav>\n        </PageLayout.Aside>\n        <PageLayout.Main>\n          <Box\n            style={{\n              height: '100%',\n              width: '100%',\n              display: 'flex',\n              flexDirection: 'column',\n            }}\n            p=\"150\"\n            backgroundColor=\"00\"\n          >\n            <Box mBottom=\"150\">\n              <Breadcrumb aria-label={'Breadcrumbs 2'}>\n                <BreadcrumbItem href=\"#\" icon={Home}>\n                  Item 1\n                </BreadcrumbItem>\n                <BreadcrumbItem href=\"#\">Item 2</BreadcrumbItem>\n                <BreadcrumbItem href=\"#\">Item 3</BreadcrumbItem>\n                <BreadcrumbItem href=\"#\">Current</BreadcrumbItem>\n              </Breadcrumb>\n            </Box>\n            <Box\n              borderRadius=\"md\"\n              backgroundColor=\"01\"\n              p=\"150\"\n              style={{ width: '100%', flex: 1 }}\n            ></Box>\n          </Box>\n        </PageLayout.Main>\n      </PageLayout>"
        },
        {
          "name": "With Panel",
          "description": "PageLayout composes with [Panel](./?path=/docs/in-development-panel--docs)\nto surface supplementary content, tools, or focused workflows alongside the main content area.\nUse the controls to switch between an `overlay` Panel (portalled into the content region so the\nHeader stays visible) and an `inline` Panel (which occupies document flow and shifts page content).\n\n> Click the trigger below to view overlay and inline examples of Panel.",
          "source": "const [kind, setKind] = useState<PanelKind>('overlay');\n    const [isOpen, setIsOpen] = useState(false);\n    const [containerEl, setContainerEl] = useState<HTMLElement | null>(null);\n    const triggerRef = useRef<HTMLButtonElement>(null);\n\n    const panel = (\n      <Panel\n        {...(kind === 'inline'\n          ? { kind: 'inline' as const }\n          : {\n              kind: 'overlay' as const,\n              modalType: 'nonModal' as const,\n              container: containerEl,\n              triggerRef,\n            })}\n        position=\"end\"\n        open={isOpen}\n        onOpenChange={setIsOpen}\n        width=\"md\"\n      >\n        <Panel.Header>\n          <Panel.Header.Row>\n            <Panel.Header.Heading>Panel heading</Panel.Header.Heading>\n          </Panel.Header.Row>\n        </Panel.Header>\n        <Panel.Body>\n          <Box py=\"100\">\n            Panel content goes here. The body of a Panel is fully configurable.\n          </Box>\n        </Panel.Body>\n        <Panel.Footer>\n          <Panel.Footer.Actions layout=\"end\">\n            <Button kind=\"outline\" onClick={() => setIsOpen(false)}>\n              Cancel\n            </Button>\n            <Button onClick={() => setIsOpen(false)}>Save</Button>\n          </Panel.Footer.Actions>\n        </Panel.Footer>\n      </Panel>\n    );\n\n    return (\n      <PageLayout sideNavConfig={{ defaultOpen: true, withMobile: false }}>\n        <PageLayout.Header>\n          <Header>\n            <Header.Masthead>\n              <Header.Masthead.Signal />{' '}\n              <Header.Masthead.Text kind=\"heading-sm\">Platform</Header.Masthead.Text>\n            </Header.Masthead>\n            <Header.ActionGroup>\n              <Header.Action\n                aria-label=\"Apps\"\n                icon={<Icon color=\"secondary\" icon={AppsCurved} />}\n              />\n              <Tooltip text=\"Profile\" portalled showDelay={600}>\n                <Avatar\n                  size=\"xs\"\n                  onClick={() => undefined}\n                  role=\"button\"\n                  aria-label=\"Profile\"\n                  alt=\"Profile\"\n                />\n              </Tooltip>\n            </Header.ActionGroup>\n          </Header>\n        </PageLayout.Header>\n        <PageLayout.Aside>\n          <SideNav openLayout=\"rail\">\n            <SideNav.ActionList ariaLabel=\"Actions\">\n              <SideNav.ActionList.Item\n                selected={true}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 1\"\n              >\n                Item 1\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 2\"\n              >\n                Item 2\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 3\"\n              >\n                Item 3\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 4\"\n              >\n                Item 4\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 5\"\n              >\n                Item 5\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 6\"\n              >\n                Item 6\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 7\"\n              >\n                Item 7\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 8\"\n              >\n                Item 8\n              </SideNav.ActionList.Item>\n            </SideNav.ActionList>\n            <SideNav.Footer>\n              <SideNav.ActionList ariaLabel=\"navigation-footer\">\n                <SideNav.ActionList.Group>\n                  <SideNav.ActionList.Item\n                    contentBefore={<Icon icon={Settings} />}\n                    aria-label=\"Settings\"\n                  >\n                    Settings\n                  </SideNav.ActionList.Item>\n                  <SideNav.ActionList.Item\n                    contentBefore={<Icon icon={Export} />}\n                    aria-label=\"Logout\"\n                  >\n                    Logout\n                  </SideNav.ActionList.Item>\n                </SideNav.ActionList.Group>\n              </SideNav.ActionList>\n            </SideNav.Footer>\n          </SideNav>\n        </PageLayout.Aside>\n        <PageLayout.Main>\n          <Box\n            ref={setContainerEl}\n            backgroundColor=\"00\"\n            style={{\n              position: 'relative',\n              overflow: 'hidden',\n              height: '100%',\n              display: 'flex',\n            }}\n          >\n            <Box\n              style={{\n                flex: 1,\n                display: 'flex',\n                flexDirection: 'column',\n              }}\n              p=\"150\"\n            >\n              <Box mBottom=\"150\">\n                <Breadcrumb aria-label={'Breadcrumbs'}>\n                  <BreadcrumbItem href=\"#\" icon={Home}>\n                    Item 1\n                  </BreadcrumbItem>\n                  <BreadcrumbItem href=\"#\">Item 2</BreadcrumbItem>\n                  <BreadcrumbItem href=\"#\">Item 3</BreadcrumbItem>\n                  <BreadcrumbItem href=\"#\">Current</BreadcrumbItem>\n                </Breadcrumb>\n              </Box>\n              <Box\n                borderRadius=\"md\"\n                backgroundColor=\"01\"\n                p=\"150\"\n                style={{\n                  flex: 1,\n                  display: 'flex',\n                  flexDirection: 'column',\n                  alignItems: 'flex-start',\n                  gap: '1rem',\n                }}\n              >\n                <RadioButtonGroup orientation=\"horizontal\">\n                  <RadioButton\n                    label=\"Overlay\"\n                    value=\"overlay\"\n                    checked={kind === 'overlay'}\n                    onChange={() => {\n                      setKind('overlay');\n                      setIsOpen(false);\n                    }}\n                  />\n                  <RadioButton\n                    label=\"Inline\"\n                    value=\"inline\"\n                    checked={kind === 'inline'}\n                    onChange={() => {\n                      setKind('inline');\n                      setIsOpen(false);\n                    }}\n                  />\n                </RadioButtonGroup>\n                <Button ref={triggerRef} onClick={() => setIsOpen(v => !v)}>\n                  Panel trigger\n                </Button>\n              </Box>\n            </Box>\n            {panel}\n          </Box>\n        </PageLayout.Main>\n      </PageLayout>\n    );"
        },
        {
          "name": "Context And Configuration",
          "description": "PageLayout is a flexible layout component designed to support complex page structures using Header, SideNav, and a main content area. Internally, PageLayout uses `SideNavContext` to coordinate, state, interactive, and responsive behaviors.\n\nFor example, `SideNavContext` allows the Header to pass Header.Navigation items to the SideNav.Body for rendering in mobile mode. It also serves as the single source of truth for the SideNav state by managing whether it is open or closed, while tracking mobile and desktop breakpoints. Additionally, `Header.SideNavTrigger` uses this shared context to toggle the SideNav.\n\nPageLayout also accepts a `sideNavConfig`, which is passed internally to `SideNavProvider`. It supports the following options:\n\n- `withMobile` (boolean, default: true): Enables mobile mode, causing Header.Navigation items to be reflow into SideNav.Body when on mobile.\n- `defaultOpen` (boolean, default: false): Sets the initial open state of the SideNav.\n\n> The example below demonstrates a full PageLayout implementation with SideNav, Header, and user-provided content.",
          "source": "const [primarySelect, setPrimarySelect] = useState('Item 1');\n    const [secondarySelect, setSecondarySelect] = useState('Dashboard');\n\n    return (\n      <PageLayout sideNavConfig={{ defaultOpen: true }}>\n        <PageLayout.Header>\n          <Header>\n            <Header.SideNavTrigger />\n            <Header.Masthead aria-label=\"Masthead\">\n              <Header.Masthead.Signal />{' '}\n              <Header.Masthead.Text kind=\"heading-sm\">Platform</Header.Masthead.Text>\n            </Header.Masthead>\n            <Header.Navigation>\n              <Header.Navigation.Item\n                selected={primarySelect === 'Item 1'}\n                onClick={() => setPrimarySelect('Item 1')}\n              >\n                Item 1\n              </Header.Navigation.Item>\n              <Header.Navigation.Item\n                selected={primarySelect === 'Item 2'}\n                onClick={() => setPrimarySelect('Item 2')}\n              >\n                Item 2\n              </Header.Navigation.Item>\n              <Header.Navigation.Item\n                selected={primarySelect === 'Item 3'}\n                onClick={() => setPrimarySelect('Item 3')}\n              >\n                Item 3\n              </Header.Navigation.Item>\n              <Header.Navigation.Item\n                selected={primarySelect === 'Item 4'}\n                onClick={() => setPrimarySelect('Item 4')}\n              >\n                Item 4\n              </Header.Navigation.Item>\n            </Header.Navigation>\n            <Header.ActionGroup>\n              <Header.Action\n                aria-label=\"Apps\"\n                icon={<Icon color=\"secondary\" icon={AppsCurved} />}\n              />\n              <Tooltip text=\"Profile\" portalled showDelay={600}>\n                <Avatar\n                  size=\"xs\"\n                  onClick={() => undefined}\n                  role=\"button\"\n                  aria-label=\"Profile\"\n                  alt=\"Profile\"\n                />\n              </Tooltip>\n            </Header.ActionGroup>\n          </Header>\n        </PageLayout.Header>\n        <PageLayout.Aside>\n          <SideNav openLayout=\"drawer\" closedLayout=\"rail\" resizable>\n            <SideNav.Header>\n              <Box\n                gap=\"50\"\n                style={{ display: 'flex', minWidth: '10rem' }}\n                mTop=\"25\"\n                mBottom=\"50\"\n              >\n                <Avatar shape=\"square\" size=\"md\" name=\"B M\" />\n                <Box>\n                  <Text kind=\"label-sm\" compact style={{ display: 'block' }}>\n                    Beam\n                  </Text>\n                  <Text\n                    kind=\"body-xs\"\n                    compact\n                    style={{ display: 'block' }}\n                    color=\"secondary\"\n                  >\n                    Design System\n                  </Text>\n                </Box>\n              </Box>\n            </SideNav.Header>\n            <SideNav.Body>\n              <SideNav.ActionList ariaLabel=\"navigation-body\">\n                <SideNav.ActionList.Group>\n                  <SideNav.ActionList.Group.Heading\n                    contentAfter={<Icon icon={TrendingUp} />}\n                  >\n                    Heading here\n                  </SideNav.ActionList.Group.Heading>\n                  <SideNav.ActionList.Item\n                    selected={secondarySelect === 'Dashboard'}\n                    onClick={() => setSecondarySelect('Dashboard')}\n                    contentBefore={<Icon icon={Home} />}\n                    aria-label=\"Dashboard\"\n                  >\n                    Dashboard\n                  </SideNav.ActionList.Item>\n                  <SideNav.ActionList.Item\n                    selected={secondarySelect === 'Teams'}\n                    onClick={() => setSecondarySelect('Teams')}\n                    contentBefore={<Icon icon={PeopleAlt} />}\n                    contentAfter={<span>24</span>}\n                    aria-label=\"Teams\"\n                  >\n                    Teams\n                  </SideNav.ActionList.Item>\n                  <SideNav.ActionList.Item\n                    selected={secondarySelect === 'Analytics'}\n                    onClick={() => setSecondarySelect('Analytics')}\n                    contentBefore={<Icon icon={TrendingUp} />}\n                    aria-label=\"Analytics\"\n                  >\n                    Analytics\n                  </SideNav.ActionList.Item>\n                  <SideNav.ActionList.Item\n                    selected={secondarySelect === 'Goals'}\n                    onClick={() => setSecondarySelect('Goals')}\n                    kind=\"flyout\"\n                    contentBefore={<Icon icon={Mission} />}\n                    aria-label=\"Goals\"\n                  >\n                    Goals\n                  </SideNav.ActionList.Item>\n                  <SideNav.ActionList.Item\n                    selected={secondarySelect === 'Payments'}\n                    onClick={() => setSecondarySelect('Payments')}\n                    contentBefore={<Icon icon={CreditCard} />}\n                    aria-label=\"Payments\"\n                  >\n                    Payments\n                  </SideNav.ActionList.Item>\n                  <SideNav.ActionList.Item\n                    selected={secondarySelect === 'Documents'}\n                    onClick={() => setSecondarySelect('Documents')}\n                    contentBefore={<Icon icon={FolderOpen} />}\n                    contentAfter={<span>112</span>}\n                    aria-label=\"Documents\"\n                  >\n                    Documents\n                  </SideNav.ActionList.Item>\n                </SideNav.ActionList.Group>\n                <SideNav.ActionList.Group>\n                  <SideNav.ActionList.Group.Heading\n                    contentAfter={<Icon icon={TrendingUp} />}\n                  >\n                    Heading here\n                  </SideNav.ActionList.Group.Heading>\n                  <SideNav.ActionList.Item\n                    selected={secondarySelect === 'Dashboard2'}\n                    onClick={() => setSecondarySelect('Dashboard2')}\n                    contentBefore={<Icon icon={Home} />}\n                    aria-label=\"Dashboard\"\n                  >\n                    Dashboard\n                  </SideNav.ActionList.Item>\n                  <SideNav.ActionList.Item\n                    selected={secondarySelect === 'Teams2'}\n                    onClick={() => setSecondarySelect('Teams2')}\n                    contentBefore={<Icon icon={PeopleAlt} />}\n                    contentAfter={<span>24</span>}\n                    aria-label=\"Teams\"\n                  >\n                    Teams\n                  </SideNav.ActionList.Item>\n                  <SideNav.ActionList.Item\n                    selected={secondarySelect === 'Analytics2'}\n                    onClick={() => setSecondarySelect('Analytics2')}\n                    contentBefore={<Icon icon={TrendingUp} />}\n                    aria-label=\"Analytics\"\n                  >\n                    Analytics\n                  </SideNav.ActionList.Item>\n                  <SideNav.ActionList.Item\n                    selected={secondarySelect === 'Goals2'}\n                    onClick={() => setSecondarySelect('Goals2')}\n                    kind=\"flyout\"\n                    contentBefore={<Icon icon={Mission} />}\n                    aria-label=\"Goals\"\n                  >\n                    Goals\n                  </SideNav.ActionList.Item>\n                  <SideNav.ActionList.Item\n                    selected={secondarySelect === 'Payments2'}\n                    onClick={() => setSecondarySelect('Payments2')}\n                    contentBefore={<Icon icon={CreditCard} />}\n                    aria-label=\"Payments\"\n                  >\n                    Payments\n                  </SideNav.ActionList.Item>\n                  <SideNav.ActionList.Item\n                    selected={secondarySelect === 'Documents2'}\n                    onClick={() => setSecondarySelect('Documents2')}\n                    contentBefore={<Icon icon={FolderOpen} />}\n                    contentAfter={<span>112</span>}\n                    aria-label=\"Documents\"\n                  >\n                    Documents\n                  </SideNav.ActionList.Item>\n                </SideNav.ActionList.Group>\n              </SideNav.ActionList>\n            </SideNav.Body>\n            <SideNav.Footer>\n              <SideNav.ActionList ariaLabel=\"navigation-footer\">\n                <SideNav.ActionList.Group>\n                  <SideNav.ActionList.Item\n                    selected={secondarySelect === 'Settings'}\n                    onClick={() => setSecondarySelect('Settings')}\n                    kind=\"flyout\"\n                    contentBefore={<Icon icon={Settings} />}\n                    aria-label=\"Settings\"\n                  >\n                    Settings\n                  </SideNav.ActionList.Item>\n                  <SideNav.ActionList.Item\n                    selected={secondarySelect === 'APIDocs'}\n                    onClick={() => setSecondarySelect('APIDocs')}\n                    contentBefore={<Icon icon={Code} />}\n                    aria-label=\"API documentation\"\n                  >\n                    API documentation\n                  </SideNav.ActionList.Item>\n                  <SideNav.ActionList.Item\n                    contentBefore={<Icon icon={Export} />}\n                    aria-label=\"Logout\"\n                  >\n                    Logout\n                  </SideNav.ActionList.Item>\n                </SideNav.ActionList.Group>\n              </SideNav.ActionList>\n              <Box\n                pTop=\"25\"\n                pBottom=\"25\"\n                style={{ overflow: 'clip' }}\n                className=\"bm-side-nav__footer__slot\"\n              >\n                <Divider\n                  borderColor=\"01\"\n                  role=\"presentation\"\n                  aria-orientation={undefined}\n                  style={{ marginBlockEnd: '1rem' }}\n                />\n                <Button\n                  // eslint-disable-next-line react/jsx-no-undef\n                  iconBefore={<Feedback />}\n                  kind=\"outline\"\n                  size=\"sm\"\n                  width={'100%'}\n                  style={{ overflow: 'clip' }}\n                >\n                  Give feedback\n                </Button>\n              </Box>\n            </SideNav.Footer>\n          </SideNav>\n        </PageLayout.Aside>\n        <PageLayout.Main>\n          <Box\n            style={{\n              height: '100%',\n              width: '100%',\n              display: 'flex',\n              flexDirection: 'column',\n            }}\n            p=\"150\"\n            backgroundColor=\"00\"\n          >\n            <Box mBottom=\"150\">\n              <Breadcrumb aria-label={'Breadcrumbs 2'}>\n                <BreadcrumbItem href=\"#\" icon={Home}>\n                  Item 1\n                </BreadcrumbItem>\n                <BreadcrumbItem href=\"#\">Item 2</BreadcrumbItem>\n                <BreadcrumbItem href=\"#\">Item 3</BreadcrumbItem>\n                <BreadcrumbItem href=\"#\">Current</BreadcrumbItem>\n              </Breadcrumb>\n            </Box>\n            <Box\n              borderRadius=\"md\"\n              backgroundColor=\"01\"\n              p=\"150\"\n              style={{ width: '100%', flex: 1 }}\n            ></Box>\n          </Box>\n        </PageLayout.Main>\n      </PageLayout>\n    );"
        },
        {
          "name": "Responsive Header",
          "description": "",
          "source": "<PageLayout sideNavConfig={{ defaultOpen: false }}>\n        <PageLayout.Header>\n          <Header>\n            <Header.Masthead aria-label=\"Masthead\" />\n            <Header.Navigation>\n              <Header.Navigation.Item selected>Item 1</Header.Navigation.Item>\n              <Header.Navigation.Item>Item 2</Header.Navigation.Item>\n              <Header.Navigation.Item>Item 3</Header.Navigation.Item>\n              <Header.Navigation.Item>Item 4</Header.Navigation.Item>\n            </Header.Navigation>\n            <Header.ActionGroup>\n              <Tooltip text=\"Profile\" portalled showDelay={600}>\n                <Avatar\n                  size=\"xs\"\n                  onClick={() => undefined}\n                  role=\"button\"\n                  aria-label=\"Profile\"\n                  alt=\"Profile\"\n                />\n              </Tooltip>\n            </Header.ActionGroup>\n          </Header>\n        </PageLayout.Header>\n        <PageLayout.Main>\n          <Box backgroundColor=\"00\" style={{ height: 'calc(100vh - 64px)' }}>\n            <Box p=\"100\">\n              <Text kind=\"heading-2xl\">Page layout example</Text>\n              <Text style={{ marginTop: '1.5rem', display: 'block' }}>\n                Page layout is utility component that allows teams to create UI shells for\n                web applications. View various breakpoint behaviors by adjusting the browser\n                width.\n              </Text>\n            </Box>\n          </Box>\n        </PageLayout.Main>\n      </PageLayout>"
        },
        {
          "name": "Persistent SideNav",
          "description": "",
          "source": "const [primarySelect, setPrimarySelect] = useState('Item 1');\n    return (\n      <PageLayout sideNavConfig={{ defaultOpen: true, withMobile: false }}>\n        <PageLayout.Header>\n          <Header>\n            <Header.Masthead aria-label=\"Masthead\">\n              <Header.Masthead.Signal />{' '}\n              <Header.Masthead.Text kind=\"heading-sm\">Platform</Header.Masthead.Text>\n            </Header.Masthead>\n            <Header.ActionGroup>\n              <Header.Action\n                aria-label=\"Apps\"\n                icon={<Icon color=\"secondary\" icon={AppsCurved} />}\n              />\n              <Tooltip text=\"Profile\" portalled showDelay={600}>\n                <Avatar\n                  size=\"xs\"\n                  onClick={() => undefined}\n                  role=\"button\"\n                  aria-label=\"Profile\"\n                  alt=\"Profile\"\n                />\n              </Tooltip>\n            </Header.ActionGroup>\n          </Header>\n        </PageLayout.Header>\n        <PageLayout.Aside>\n          <SideNav openLayout=\"drawer\" resizable={false}>\n            <SideNav.ActionList ariaLabel=\"navigation-body\">\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 1'}\n                onClick={() => setPrimarySelect('Item 1')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 1\"\n              >\n                Item 1\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 2'}\n                onClick={() => setPrimarySelect('Item 2')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 2\"\n              >\n                Item 2\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 3'}\n                onClick={() => setPrimarySelect('Item 3')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 3\"\n              >\n                Item 3\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 4'}\n                onClick={() => setPrimarySelect('Item 4')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 4\"\n              >\n                Item 4\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 5'}\n                onClick={() => setPrimarySelect('Item 5')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 5\"\n              >\n                Item 5\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 6'}\n                onClick={() => setPrimarySelect('Item 6')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 6\"\n              >\n                Item 6\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 7'}\n                onClick={() => setPrimarySelect('Item 7')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 7\"\n              >\n                Item 7\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 8'}\n                onClick={() => setPrimarySelect('Item 8')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 8\"\n              >\n                Item 8\n              </SideNav.ActionList.Item>\n            </SideNav.ActionList>\n          </SideNav>\n        </PageLayout.Aside>\n        <PageLayout.Main>\n          <Box backgroundColor=\"00\" style={{ height: 'calc(100vh - 64px)' }}>\n            <Box p=\"100\">\n              <Text kind=\"heading-2xl\">Page layout example</Text>\n              <Text style={{ marginTop: '1.5rem', display: 'block' }}>\n                Page layout is utility component that allows teams to create UI shells for\n                web applications. View various breakpoint behaviors by adjusting the browser\n                width.\n              </Text>\n            </Box>\n          </Box>\n        </PageLayout.Main>\n      </PageLayout>\n    );"
        },
        {
          "name": "Responsive Persistent SideNav",
          "description": "",
          "source": "const [primarySelect, setPrimarySelect] = useState('Item 1');\n    return (\n      <PageLayout sideNavConfig={{ defaultOpen: true }}>\n        <PageLayout.Header>\n          <Header>\n            <Header.Masthead aria-label=\"Masthead\">\n              <Header.Masthead.Signal />{' '}\n              <Header.Masthead.Text kind=\"heading-sm\">Platform</Header.Masthead.Text>\n            </Header.Masthead>\n            <Header.ActionGroup>\n              <Header.Action\n                aria-label=\"Apps\"\n                icon={<Icon color=\"secondary\" icon={AppsCurved} />}\n              />\n              <Tooltip text=\"Profile\" portalled showDelay={600}>\n                <Avatar\n                  size=\"xs\"\n                  onClick={() => undefined}\n                  role=\"button\"\n                  aria-label=\"Profile\"\n                  alt=\"Profile\"\n                />\n              </Tooltip>\n            </Header.ActionGroup>\n          </Header>\n        </PageLayout.Header>\n        <PageLayout.Aside>\n          <SideNav openLayout=\"drawer\">\n            <SideNav.ActionList ariaLabel=\"navigation-body\">\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 1'}\n                onClick={() => setPrimarySelect('Item 1')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 1\"\n              >\n                Item 1\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 2'}\n                onClick={() => setPrimarySelect('Item 2')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 2\"\n              >\n                Item 2\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 3'}\n                onClick={() => setPrimarySelect('Item 3')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 3\"\n              >\n                Item 3\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 4'}\n                onClick={() => setPrimarySelect('Item 4')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 4\"\n              >\n                Item 4\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 5'}\n                onClick={() => setPrimarySelect('Item 5')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 5\"\n              >\n                Item 5\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 6'}\n                onClick={() => setPrimarySelect('Item 6')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 6\"\n              >\n                Item 6\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 7'}\n                onClick={() => setPrimarySelect('Item 7')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 7\"\n              >\n                Item 7\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 8'}\n                onClick={() => setPrimarySelect('Item 8')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 8\"\n              >\n                Item 8\n              </SideNav.ActionList.Item>\n            </SideNav.ActionList>\n          </SideNav>\n        </PageLayout.Aside>\n        <PageLayout.Main>\n          <Box backgroundColor=\"00\" style={{ height: 'calc(100vh - 64px)' }}>\n            <Box p=\"100\">\n              <Text kind=\"heading-2xl\">Page layout example</Text>\n              <Text style={{ marginTop: '1.5rem', display: 'block' }}>\n                Page layout is utility component that allows teams to create UI shells for\n                web applications. View various breakpoint behaviors by adjusting the browser\n                width.\n              </Text>\n            </Box>\n          </Box>\n        </PageLayout.Main>\n      </PageLayout>\n    );"
        },
        {
          "name": "SideNav Push Page Content",
          "description": "",
          "source": "const [primarySelect, setPrimarySelect] = useState('Item 1');\n    return (\n      <PageLayout sideNavConfig={{ defaultOpen: false }}>\n        <PageLayout.Header>\n          <Header>\n            <Header.SideNavTrigger />\n            <Header.Masthead aria-label=\"Masthead\">\n              <Header.Masthead.Signal />{' '}\n              <Header.Masthead.Text kind=\"heading-sm\">Platform</Header.Masthead.Text>\n            </Header.Masthead>\n            <Header.ActionGroup>\n              <Header.Action\n                aria-label=\"Apps\"\n                icon={<Icon color=\"secondary\" icon={AppsCurved} />}\n              />\n              <Tooltip text=\"Profile\" portalled showDelay={600}>\n                <Avatar\n                  size=\"xs\"\n                  onClick={() => undefined}\n                  role=\"button\"\n                  aria-label=\"Profile\"\n                  alt=\"Profile\"\n                />\n              </Tooltip>\n            </Header.ActionGroup>\n          </Header>\n        </PageLayout.Header>\n        <PageLayout.Aside>\n          <SideNav openLayout=\"drawer\" closedLayout=\"hidden\">\n            <SideNav.ActionList ariaLabel=\"navigation-body\">\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 1'}\n                onClick={() => setPrimarySelect('Item 1')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 1\"\n              >\n                Item 1\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 2'}\n                onClick={() => setPrimarySelect('Item 2')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 2\"\n              >\n                Item 2\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 3'}\n                onClick={() => setPrimarySelect('Item 3')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 3\"\n              >\n                Item 3\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 4'}\n                onClick={() => setPrimarySelect('Item 4')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 4\"\n              >\n                Item 4\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 5'}\n                onClick={() => setPrimarySelect('Item 5')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 5\"\n              >\n                Item 5\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 6'}\n                onClick={() => setPrimarySelect('Item 6')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 6\"\n              >\n                Item 6\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 7'}\n                onClick={() => setPrimarySelect('Item 7')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 7\"\n              >\n                Item 7\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 8'}\n                onClick={() => setPrimarySelect('Item 8')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 8\"\n              >\n                Item 8\n              </SideNav.ActionList.Item>\n            </SideNav.ActionList>\n          </SideNav>\n        </PageLayout.Aside>\n        <PageLayout.Main>\n          <Box backgroundColor=\"00\" style={{ height: 'calc(100vh - 64px)' }}>\n            <Box p=\"100\">\n              <Text kind=\"heading-2xl\">Page layout example</Text>\n              <Text style={{ marginTop: '1.5rem', display: 'block' }}>\n                Page layout is utility component that allows teams to create UI shells for\n                web applications. View various breakpoint behaviors by adjusting the browser\n                width.\n              </Text>\n            </Box>\n          </Box>\n        </PageLayout.Main>\n      </PageLayout>\n    );"
        },
        {
          "name": "SideNav Overlay Page Content",
          "description": "",
          "source": "const [primarySelect, setPrimarySelect] = useState('Item 1');\n    return (\n      <PageLayout sideNavConfig={{ defaultOpen: false }}>\n        <PageLayout.Header>\n          <Header>\n            <Header.SideNavTrigger />\n            <Header.Masthead aria-label=\"Masthead\">\n              <Header.Masthead.Signal />{' '}\n              <Header.Masthead.Text kind=\"heading-sm\">Platform</Header.Masthead.Text>\n            </Header.Masthead>\n            <Header.ActionGroup>\n              <Header.Action\n                aria-label=\"Apps\"\n                icon={<Icon color=\"secondary\" icon={AppsCurved} />}\n              />\n              <Tooltip text=\"Profile\" portalled showDelay={600}>\n                <Avatar\n                  size=\"xs\"\n                  onClick={() => undefined}\n                  role=\"button\"\n                  aria-label=\"Profile\"\n                  alt=\"Profile\"\n                />\n              </Tooltip>\n            </Header.ActionGroup>\n          </Header>\n        </PageLayout.Header>\n        <PageLayout.Aside>\n          <SideNav\n            openLayout=\"drawer\"\n            closedLayout=\"hidden\"\n            floating\n            backdrop=\"opaque\"\n          >\n            <SideNav.ActionList ariaLabel=\"navigation-body\">\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 1'}\n                onClick={() => setPrimarySelect('Item 1')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 1\"\n              >\n                Item 1\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 2'}\n                onClick={() => setPrimarySelect('Item 2')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 2\"\n              >\n                Item 2\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 3'}\n                onClick={() => setPrimarySelect('Item 3')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 3\"\n              >\n                Item 3\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 4'}\n                onClick={() => setPrimarySelect('Item 4')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 4\"\n              >\n                Item 4\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 5'}\n                onClick={() => setPrimarySelect('Item 5')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 5\"\n              >\n                Item 5\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 6'}\n                onClick={() => setPrimarySelect('Item 6')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 6\"\n              >\n                Item 6\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 7'}\n                onClick={() => setPrimarySelect('Item 7')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 7\"\n              >\n                Item 7\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 8'}\n                onClick={() => setPrimarySelect('Item 8')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 8\"\n              >\n                Item 8\n              </SideNav.ActionList.Item>\n            </SideNav.ActionList>\n          </SideNav>\n        </PageLayout.Aside>\n        <PageLayout.Main>\n          <Box backgroundColor=\"00\" style={{ height: 'calc(100vh - 64px)' }}>\n            <Box p=\"100\">\n              <Text kind=\"heading-2xl\">Page layout example</Text>\n              <Text style={{ marginTop: '1.5rem', display: 'block' }}>\n                Page layout is utility component that allows teams to create UI shells for\n                web applications. View various breakpoint behaviors by adjusting the browser\n                width.\n              </Text>\n            </Box>\n          </Box>\n        </PageLayout.Main>\n      </PageLayout>\n    );"
        },
        {
          "name": "Header Navigation Reflow",
          "description": "",
          "source": "const [primarySelect, setPrimarySelect] = useState('Item 1');\n    return (\n      <PageLayout sideNavConfig={{ defaultOpen: true }}>\n        <PageLayout.Header>\n          <Header>\n            <Header.Masthead aria-label=\"Masthead\">\n              <Header.Masthead.Signal />{' '}\n              <Header.Masthead.Text kind=\"heading-sm\">Platform</Header.Masthead.Text>\n            </Header.Masthead>\n            <Header.Navigation>\n              <Header.Navigation.Item selected>Item 1</Header.Navigation.Item>\n              <Header.Navigation.Item>Item 2</Header.Navigation.Item>\n              <Header.Navigation.Item>Item 3</Header.Navigation.Item>\n              <Header.Navigation.Item>Item 4</Header.Navigation.Item>\n            </Header.Navigation>\n            <Header.ActionGroup>\n              <Header.Action\n                aria-label=\"Apps\"\n                icon={<Icon color=\"secondary\" icon={AppsCurved} />}\n              />\n              <Tooltip text=\"Profile\" portalled showDelay={600}>\n                <Avatar\n                  size=\"xs\"\n                  onClick={() => undefined}\n                  role=\"button\"\n                  aria-label=\"Profile\"\n                  alt=\"Profile\"\n                />\n              </Tooltip>\n            </Header.ActionGroup>\n          </Header>\n        </PageLayout.Header>\n        <PageLayout.Aside>\n          <SideNav openLayout=\"drawer\">\n            <SideNav.ActionList ariaLabel=\"navigation-body\">\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 1'}\n                onClick={() => setPrimarySelect('Item 1')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 1\"\n              >\n                Item 1\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 2'}\n                onClick={() => setPrimarySelect('Item 2')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 2\"\n              >\n                Item 2\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 3'}\n                onClick={() => setPrimarySelect('Item 3')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 3\"\n              >\n                Item 3\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 4'}\n                onClick={() => setPrimarySelect('Item 4')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 4\"\n              >\n                Item 4\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 5'}\n                onClick={() => setPrimarySelect('Item 5')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 5\"\n              >\n                Item 5\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 6'}\n                onClick={() => setPrimarySelect('Item 6')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 6\"\n              >\n                Item 6\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 7'}\n                onClick={() => setPrimarySelect('Item 7')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 7\"\n              >\n                Item 7\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 8'}\n                onClick={() => setPrimarySelect('Item 8')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 8\"\n              >\n                Item 8\n              </SideNav.ActionList.Item>\n            </SideNav.ActionList>\n          </SideNav>\n        </PageLayout.Aside>\n        <PageLayout.Main>\n          <Box backgroundColor=\"00\" style={{ height: 'calc(100vh - 64px)' }}>\n            <Box p=\"100\">\n              <Text kind=\"heading-2xl\">Page layout example</Text>\n              <Text style={{ marginTop: '1.5rem', display: 'block' }}>\n                Page layout is utility component that allows teams to create UI shells for\n                web applications. View various breakpoint behaviors by adjusting the browser\n                width.\n              </Text>\n            </Box>\n          </Box>\n        </PageLayout.Main>\n      </PageLayout>\n    );"
        },
        {
          "name": "Rail To Drawer",
          "description": "",
          "source": "const [primarySelect, setPrimarySelect] = useState('Item 1');\n    return (\n      <PageLayout sideNavConfig={{ defaultOpen: false }}>\n        <PageLayout.Header>\n          <Header>\n            <Header.SideNavTrigger />\n            <Header.Masthead aria-label=\"Masthead\">\n              <Header.Masthead.Signal />{' '}\n              <Header.Masthead.Text kind=\"heading-sm\">Platform</Header.Masthead.Text>\n            </Header.Masthead>\n            <Header.ActionGroup>\n              <Header.Action\n                aria-label=\"Apps\"\n                icon={<Icon color=\"secondary\" icon={AppsCurved} />}\n              />\n              <Tooltip text=\"Profile\" portalled showDelay={600}>\n                <Avatar\n                  size=\"xs\"\n                  onClick={() => undefined}\n                  role=\"button\"\n                  aria-label=\"Profile\"\n                  alt=\"Profile\"\n                />\n              </Tooltip>\n            </Header.ActionGroup>\n          </Header>\n        </PageLayout.Header>\n        <PageLayout.Aside>\n          <SideNav openLayout=\"drawer\" closedLayout=\"rail\">\n            <SideNav.ActionList ariaLabel=\"navigation-body\">\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 1'}\n                onClick={() => setPrimarySelect('Item 1')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 1\"\n              >\n                Item 1\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 2'}\n                onClick={() => setPrimarySelect('Item 2')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 2\"\n              >\n                Item 2\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 3'}\n                onClick={() => setPrimarySelect('Item 3')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 3\"\n              >\n                Item 3\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 4'}\n                onClick={() => setPrimarySelect('Item 4')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 4\"\n              >\n                Item 4\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 5'}\n                onClick={() => setPrimarySelect('Item 5')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 5\"\n              >\n                Item 5\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 6'}\n                onClick={() => setPrimarySelect('Item 6')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 6\"\n              >\n                Item 6\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 7'}\n                onClick={() => setPrimarySelect('Item 7')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 7\"\n              >\n                Item 7\n              </SideNav.ActionList.Item>\n              <SideNav.ActionList.Item\n                selected={primarySelect === 'Item 8'}\n                onClick={() => setPrimarySelect('Item 8')}\n                contentBefore={<Icon icon={Satellite} />}\n                aria-label=\"Item 8\"\n              >\n                Item 8\n              </SideNav.ActionList.Item>\n            </SideNav.ActionList>\n          </SideNav>\n        </PageLayout.Aside>\n        <PageLayout.Main>\n          <Box backgroundColor=\"00\" style={{ height: 'calc(100vh - 64px)' }}>\n            <Box p=\"100\">\n              <Text kind=\"heading-2xl\">Page layout example</Text>\n              <Text style={{ marginTop: '1.5rem', display: 'block' }}>\n                Page layout is utility component that allows teams to create UI shells for\n                web applications. View various breakpoint behaviors by adjusting the browser\n                width.\n              </Text>\n            </Box>\n          </Box>\n        </PageLayout.Main>\n      </PageLayout>\n    );"
        },
        {
          "name": "The Kitchen Sink",
          "description": "",
          "source": "const [primarySelect, setPrimarySelect] = useState<string>('Item 1');\n    const [secondarySelect, setSecondarySelect] = useState<string>('Dashboard');\n\n    return (\n      <PageLayout sideNavConfig={{ defaultOpen: true }}>\n        <PageLayout.Header>\n          <Header>\n            <Header.SideNavTrigger />\n            <Header.Masthead aria-label=\"Masthead\">\n              <Header.Masthead.Signal />{' '}\n              <Header.Masthead.Text kind=\"heading-sm\">Platform</Header.Masthead.Text>\n            </Header.Masthead>\n            <Header.Navigation>\n              <Header.Navigation.Item\n                selected={primarySelect === 'Item 1'}\n                onClick={() => setPrimarySelect('Item 1')}\n              >\n                Item 1\n              </Header.Navigation.Item>\n              <Header.Navigation.Item\n                selected={primarySelect === 'Item 2'}\n                onClick={() => setPrimarySelect('Item 2')}\n              >\n                Item 2\n              </Header.Navigation.Item>\n              <Header.Navigation.Item\n                selected={primarySelect === 'Item 3'}\n                onClick={() => setPrimarySelect('Item 3')}\n              >\n                Item 3\n              </Header.Navigation.Item>\n              <Header.Navigation.Item\n                selected={primarySelect === 'Item 4'}\n                onClick={() => setPrimarySelect('Item 4')}\n              >\n                Item 4\n              </Header.Navigation.Item>\n            </Header.Navigation>\n            <Header.ActionGroup>\n              <Header.Action\n                aria-label=\"Apps\"\n                icon={<Icon color=\"secondary\" icon={AppsCurved} />}\n              />\n              <Tooltip text=\"Profile\" portalled showDelay={600}>\n                <Avatar\n                  size=\"xs\"\n                  onClick={() => undefined}\n                  role=\"button\"\n                  aria-label=\"Profile\"\n                  alt=\"Profile\"\n                />\n              </Tooltip>\n            </Header.ActionGroup>\n          </Header>\n        </PageLayout.Header>\n        <PageLayout.Aside>\n          <SideNav openLayout=\"drawer\" closedLayout=\"hidden\" resizable>\n            <SideNav.Header>\n              <Box\n                gap=\"50\"\n                style={{ display: 'flex', minWidth: '165px' }}\n                mTop=\"25\"\n                mBottom=\"50\"\n              >\n                <Avatar shape=\"square\" size=\"md\" name=\"B M\" />\n                <Box>\n                  <Text kind=\"label-sm\" compact style={{ display: 'block' }}>\n                    Beam\n                  </Text>\n                  <Text\n                    kind=\"body-xs\"\n                    compact\n                    style={{ display: 'block' }}\n                    color=\"secondary\"\n                  >\n                    Design System\n                  </Text>\n                </Box>\n              </Box>\n            </SideNav.Header>\n            <SideNav.Body>\n              <SideNav.ActionList ariaLabel=\"navigation-body\">\n                <SideNav.ActionList.Group>\n                  <SideNav.ActionList.Group.Heading\n                    contentAfter={<Icon icon={TrendingUp} />}\n                  >\n                    Heading here\n                  </SideNav.ActionList.Group.Heading>\n                  <SideNav.ActionList.Item\n                    selected={secondarySelect === 'Dashboard'}\n                    onClick={() => setSecondarySelect('Dashboard')}\n                    contentBefore={<Icon icon={Home} />}\n                    aria-label=\"Dashboard\"\n                  >\n                    Dashboard\n                  </SideNav.ActionList.Item>\n                  <SideNav.ActionList.Item\n                    selected={secondarySelect === 'Analytics'}\n                    onClick={() => {\n                      setSecondarySelect('Analytics');\n                    }}\n                    contentBefore={<Icon icon={TrendingUp} />}\n                    aria-label=\"Analytics\"\n                  >\n                    Analytics\n                  </SideNav.ActionList.Item>\n                  <SideNav.ActionList.Item\n                    onClick={() => setSecondarySelect('Goals')}\n                    contentBefore={<Icon icon={Mission} />}\n                    aria-label=\"Goals\"\n                  >\n                    <SideNav.ActionList.Item.Label>\n                      Goals\n                    </SideNav.ActionList.Item.Label>\n                    <SideNav.ActionList.Item.Flyout>\n                      <SideNav.ActionList ariaLabel=\"flyout-menu-1\">\n                        <SideNav.ActionList.Item\n                          onClick={() => setSecondarySelect('Set targets')}\n                          aria-label=\"Set targets\"\n                        >\n                          Set targets\n                        </SideNav.ActionList.Item>\n                        <SideNav.ActionList.Item\n                          onClick={() => setSecondarySelect('Portfolio')}\n                          aria-label=\"Portfolio\"\n                        >\n                          Portfolio\n                        </SideNav.ActionList.Item>\n                        <SideNav.ActionList.Item\n                          onClick={() => setSecondarySelect('Milestones')}\n                          aria-label=\"Milestones\"\n                        >\n                          Milestones\n                        </SideNav.ActionList.Item>\n                        <SideNav.ActionList.Item\n                          onClick={() => setSecondarySelect('Share goals')}\n                          aria-label=\"Share goals\"\n                        >\n                          Share goals\n                        </SideNav.ActionList.Item>\n                      </SideNav.ActionList>\n                    </SideNav.ActionList.Item.Flyout>\n                  </SideNav.ActionList.Item>\n                  <SideNav.ActionList.Item\n                    selected={secondarySelect === 'Teams'}\n                    onClick={() => setSecondarySelect('Teams')}\n                    contentBefore={<Icon icon={PeopleAlt} />}\n                    contentAfter={<span>1</span>}\n                    aria-label=\"Teams\"\n                  >\n                    <SideNav.ActionList.Item.Label>\n                      Teams\n                    </SideNav.ActionList.Item.Label>\n                    <SideNav.ActionList.Item.Expandable>\n                      <SideNav.ActionList ariaLabel=\"expandable-menu-1\">\n                        <SideNav.ActionList.Item\n                          onClick={() => {\n                            setSecondarySelect('Team A');\n                          }}\n                          selected={secondarySelect === 'Team A'}\n                          aria-label=\"Team A\"\n                          contentBefore={<Icon icon={Group} />}\n                        >\n                          <SideNav.ActionList.Item.Label>\n                            Team A\n                          </SideNav.ActionList.Item.Label>\n                          <SideNav.ActionList.Item.Expandable>\n                            <SideNav.ActionList ariaLabel=\"expandable-menu-team-a\">\n                              <SideNav.ActionList.Item\n                                onClick={() => setSecondarySelect('John Doe')}\n                                selected={secondarySelect === 'John Doe'}\n                                aria-label=\"John Doe\"\n                                contentBefore={<Icon icon={Person} />}\n                              >\n                                John Doe\n                              </SideNav.ActionList.Item>\n                              <SideNav.ActionList.Item\n                                onClick={() => setSecondarySelect('Jane Doe')}\n                                selected={secondarySelect === 'Jane Doe'}\n                                aria-label=\"Jane Doe\"\n                                contentBefore={<Icon icon={Person} />}\n                              >\n                                Jane Doe\n                              </SideNav.ActionList.Item>\n                            </SideNav.ActionList>\n                          </SideNav.ActionList.Item.Expandable>\n                        </SideNav.ActionList.Item>\n                        <SideNav.ActionList.Item\n                          onClick={() => setSecondarySelect('Add team')}\n                          aria-label=\"Add team\"\n                          contentBefore={<Icon icon={GroupAdd} />}\n                        >\n                          Add team\n                        </SideNav.ActionList.Item>\n                      </SideNav.ActionList>\n                    </SideNav.ActionList.Item.Expandable>\n                  </SideNav.ActionList.Item>\n                  <SideNav.ActionList.Item\n                    selected={secondarySelect === 'Payments'}\n                    onClick={() => setSecondarySelect('Payments')}\n                    contentBefore={<Icon icon={CreditCard} />}\n                    aria-label=\"Payments\"\n                  >\n                    Payments\n                  </SideNav.ActionList.Item>\n                  <SideNav.ActionList.Item\n                    selected={secondarySelect === 'Documents'}\n                    onClick={() => setSecondarySelect('Documents')}\n                    contentBefore={<Icon icon={FolderOpen} />}\n                    contentAfter={<span>112</span>}\n                    aria-label=\"Documents\"\n                  >\n                    Documents\n                  </SideNav.ActionList.Item>\n                </SideNav.ActionList.Group>\n                <SideNav.ActionList.Group>\n                  <SideNav.ActionList.Group.Heading\n                    contentAfter={<Icon icon={TrendingUp} />}\n                  >\n                    Heading here\n                  </SideNav.ActionList.Group.Heading>\n                  <SideNav.ActionList.Item\n                    selected={secondarySelect === 'Dashboard2'}\n                    onClick={() => setSecondarySelect('Dashboard2')}\n                    contentBefore={<Icon icon={Home} />}\n                    aria-label=\"Dashboard\"\n                  >\n                    Dashboard\n                  </SideNav.ActionList.Item>\n                  <SideNav.ActionList.Item\n                    selected={secondarySelect === 'Teams2'}\n                    onClick={() => setSecondarySelect('Teams2')}\n                    contentBefore={<Icon icon={PeopleAlt} />}\n                    contentAfter={<span>24</span>}\n                    aria-label=\"Teams\"\n                  >\n                    Teams\n                  </SideNav.ActionList.Item>\n                  <SideNav.ActionList.Item\n                    selected={secondarySelect === 'Analytics2'}\n                    onClick={() => setSecondarySelect('Analytics2')}\n                    contentBefore={<Icon icon={TrendingUp} />}\n                    aria-label=\"Analytics\"\n                  >\n                    Analytics\n                  </SideNav.ActionList.Item>\n                  <SideNav.ActionList.Item\n                    contentBefore={<Icon icon={Mission} />}\n                    onClick={() => setPrimarySelect('Goals2')}\n                    aria-label=\"Goals2\"\n                  >\n                    <SideNav.ActionList.Item.Label>\n                      Goals\n                    </SideNav.ActionList.Item.Label>\n                    <SideNav.ActionList.Item.Flyout>\n                      <SideNav.ActionList ariaLabel=\"flyout-menu-1\">\n                        <SideNav.ActionList.Item\n                          onClick={() => setPrimarySelect('Set targets2')}\n                          aria-label=\"Set targets2\"\n                        >\n                          Set targets\n                        </SideNav.ActionList.Item>\n                        <SideNav.ActionList.Item\n                          onClick={() => setPrimarySelect('Portfolio2')}\n                          aria-label=\"Portfolio2\"\n                        >\n                          Portfolio\n                        </SideNav.ActionList.Item>\n                        <SideNav.ActionList.Item\n                          onClick={() => setPrimarySelect('Milestones2')}\n                          aria-label=\"Milestones2\"\n                        >\n                          Milestones\n                        </SideNav.ActionList.Item>\n                        <SideNav.ActionList.Item\n                          onClick={() => setPrimarySelect('Share goals2')}\n                          aria-label=\"Share goals2\"\n                        >\n                          Share goals\n                        </SideNav.ActionList.Item>\n                      </SideNav.ActionList>\n                    </SideNav.ActionList.Item.Flyout>\n                  </SideNav.ActionList.Item>\n                  <SideNav.ActionList.Item\n                    selected={secondarySelect === 'Payments2'}\n                    onClick={() => setSecondarySelect('Payments2')}\n                    contentBefore={<Icon icon={CreditCard} />}\n                    aria-label=\"Payments\"\n                  >\n                    Payments\n                  </SideNav.ActionList.Item>\n                  <SideNav.ActionList.Item\n                    selected={secondarySelect === 'Documents2'}\n                    onClick={() => setSecondarySelect('Documents2')}\n                    contentBefore={<Icon icon={FolderOpen} />}\n                    contentAfter={<span>112</span>}\n                    aria-label=\"Documents\"\n                  >\n                    Documents\n                  </SideNav.ActionList.Item>\n                </SideNav.ActionList.Group>\n              </SideNav.ActionList>\n            </SideNav.Body>\n            <SideNav.Footer>\n              <SideNav.ActionList ariaLabel=\"navigation-footer\">\n                <SideNav.ActionList.Group>\n                  <SideNav.ActionList.Item\n                    contentBefore={<Icon icon={Settings} />}\n                    aria-label=\"Settings\"\n                  >\n                    <SideNav.ActionList.Item.Label>\n                      Settings\n                    </SideNav.ActionList.Item.Label>\n                    <SideNav.ActionList.Item.Flyout>\n                      <SideNav.ActionList ariaLabel=\"flyout-menu-2\">\n                        <SideNav.ActionList.Item\n                          onClick={() => setPrimarySelect('General')}\n                          aria-label=\"General\"\n                        >\n                          General\n                        </SideNav.ActionList.Item>\n                        <SideNav.ActionList.Item\n                          onClick={() => setPrimarySelect('Notifications')}\n                          aria-label=\"Notifications\"\n                        >\n                          Notifications\n                        </SideNav.ActionList.Item>\n                        <SideNav.ActionList.Item\n                          onClick={() => setPrimarySelect('Privacy')}\n                          aria-label=\"Privacy\"\n                        >\n                          Privacy\n                        </SideNav.ActionList.Item>\n                      </SideNav.ActionList>\n                    </SideNav.ActionList.Item.Flyout>\n                  </SideNav.ActionList.Item>\n                  <SideNav.ActionList.Item\n                    selected={secondarySelect === 'APIDocs'}\n                    onClick={() => setSecondarySelect('APIDocs')}\n                    contentBefore={<Icon icon={Code} />}\n                    aria-label=\"API documentation\"\n                  >\n                    API documentation\n                  </SideNav.ActionList.Item>\n                  <SideNav.ActionList.Item\n                    contentBefore={<Icon icon={Export} />}\n                    aria-label=\"Logout\"\n                  >\n                    Logout\n                  </SideNav.ActionList.Item>\n                </SideNav.ActionList.Group>\n              </SideNav.ActionList>\n              <Box pTop=\"25\" pBottom=\"25\" className=\"bm-side-nav__footer__slot\">\n                <Divider\n                  borderColor=\"01\"\n                  role=\"presentation\"\n                  aria-orientation={undefined}\n                  style={{ marginBlockEnd: '1rem' }}\n                />\n                <Button\n                  iconBefore={<Feedback />}\n                  kind=\"outline\"\n                  size=\"sm\"\n                  width={'100%'}\n                  style={{ overflow: 'clip', minWidth: '165px' }}\n                >\n                  Give feedback\n                </Button>\n              </Box>\n            </SideNav.Footer>\n          </SideNav>\n        </PageLayout.Aside>\n        <PageLayout.Main>\n          <Box backgroundColor=\"00\" style={{ height: 'calc(100vh - 64px)' }}>\n            <Box p=\"100\">\n              <Text kind=\"heading-2xl\">Page layout example</Text>\n              <Text style={{ marginTop: '1.5rem', display: 'block' }}>\n                Page layout is utility component that allows teams to create UI shells for\n                web applications. View various breakpoint behaviors by adjusting the browser\n                width.\n              </Text>\n            </Box>\n          </Box>\n        </PageLayout.Main>\n      </PageLayout>\n    );"
        }
      ],
      "category": "Layout",
      "displayName": "PageLayout/PageLayout",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/PageHeader",
      "slug": "components-pageheader",
      "description": "Page header is the highest level heading of a page and can be combined with other built in UI elements.",
      "type": "component",
      "props": [
        {
          "name": "children",
          "type": "ReactNode",
          "description": "Specify the content of the PageHeader",
          "required": true
        }
      ],
      "subcomponentProps": [
        {
          "name": "PageHeader",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "Specify the content of the PageHeader",
              "required": true
            }
          ]
        },
        {
          "name": "PageHeader.Breadcrumb",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "Add Breadcrumb to the PageHeader",
              "required": true
            }
          ]
        },
        {
          "name": "PageHeader.Heading",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "Add heading subcomponents to the PageHeader",
              "required": true
            }
          ]
        },
        {
          "name": "PageHeader.HeadingContent",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "Pass subcomponents for title, content before and content after to PageHeader.HeadingContent",
              "required": true
            },
            {
              "name": "size",
              "type": "'md' | 'lg'",
              "description": "Specify the size of the heading for PageHeader.HeadingContent",
              "defaultValue": "md"
            }
          ]
        },
        {
          "name": "PageHeader.HeadingContent.Title",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "Specify the content of the PageHeader.HeadingContent.Title",
              "required": true
            }
          ]
        },
        {
          "name": "PageHeader.HeadingContent.Before",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "Specify the content before the PageHeader.HeadingContent.Title",
              "required": true
            }
          ]
        },
        {
          "name": "PageHeader.HeadingContent.After",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "Specify the content after the PageHeader.HeadingContent.Title",
              "required": true
            }
          ]
        },
        {
          "name": "PageHeader.HeadingContent.Action",
          "props": [
            {
              "name": "icon",
              "type": "ReactNode",
              "description": "Specify the icon of the PageHeader.HeadingContent.Action",
              "required": true
            },
            {
              "name": "ref",
              "type": "Ref<HTMLButtonElement>",
              "description": "Specify a React ref for the PageHeader.HeadingContent.Action"
            }
          ]
        },
        {
          "name": "PageHeader.Actions",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "Add Buttons and Menu to the PageHeader",
              "required": true
            }
          ]
        },
        {
          "name": "PageHeader.Body",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "Specify the body text of the PageHeader",
              "required": true
            }
          ]
        },
        {
          "name": "PageHeader.Tabs",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "Add Tabs to the PageHeader",
              "required": true
            }
          ]
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default PageHeader.",
          "source": "<PageHeader>\n      <PageHeader.Heading>\n        <PageHeader.HeadingContent>\n          <PageHeader.HeadingContent.Title>\n            Page heading\n          </PageHeader.HeadingContent.Title>\n        </PageHeader.HeadingContent>\n      </PageHeader.Heading>\n    </PageHeader>"
        },
        {
          "name": "Size",
          "description": "`PageHeader.HeadingContent` supports `md` and `lg`. Default size is `md`.",
          "source": "<Box gap=\"200\" style={{ display: 'flex', flexDirection: 'column' }}>\n      <PageHeader>\n        <PageHeader.Heading>\n          <PageHeader.HeadingContent size=\"md\">\n            <PageHeader.HeadingContent.Title>\n              Medium heading\n            </PageHeader.HeadingContent.Title>\n          </PageHeader.HeadingContent>\n        </PageHeader.Heading>\n      </PageHeader>\n      <PageHeader>\n        <PageHeader.Heading>\n          <PageHeader.HeadingContent size=\"lg\">\n            <PageHeader.HeadingContent.Title>\n              Large heading\n            </PageHeader.HeadingContent.Title>\n          </PageHeader.HeadingContent>\n        </PageHeader.Heading>\n      </PageHeader>\n    </Box>"
        },
        {
          "name": "Content Before",
          "description": "Pass action, icons, or other components to `PageHeader.HeadingContent.Before` to display content before the heading.\n\n> Use `PageHeader.HeadingContent.Action` to pass an action",
          "source": "<Box gap=\"200\" style={{ display: 'flex', flexDirection: 'column' }}>\n      <PageHeader>\n        <PageHeader.Heading>\n          <PageHeader.HeadingContent>\n            <PageHeader.HeadingContent.Before>\n              <PageHeader.HeadingContent.Action\n                aria-label=\"Back\"\n                icon={<Icon icon={Arrowbackcurved} />}\n              />\n            </PageHeader.HeadingContent.Before>\n\n            <PageHeader.HeadingContent.Title>\n              With action\n            </PageHeader.HeadingContent.Title>\n          </PageHeader.HeadingContent>\n        </PageHeader.Heading>\n      </PageHeader>\n\n      <PageHeader>\n        <PageHeader.Heading>\n          <PageHeader.HeadingContent>\n            <PageHeader.HeadingContent.Before>\n              <Icon icon={Satellite} />\n            </PageHeader.HeadingContent.Before>\n\n            <PageHeader.HeadingContent.Title>\n              With icon\n            </PageHeader.HeadingContent.Title>\n          </PageHeader.HeadingContent>\n        </PageHeader.Heading>\n      </PageHeader>\n\n      <PageHeader>\n        <PageHeader.Heading>\n          <PageHeader.HeadingContent>\n            <PageHeader.HeadingContent.Before>\n              <PageHeader.HeadingContent.Action\n                icon={<Icon icon={Arrowbackcurved} />}\n                aria-label=\"Back\"\n              />\n              <Icon icon={Satellite} />\n            </PageHeader.HeadingContent.Before>\n\n            <PageHeader.HeadingContent.Title>\n              With action and icon\n            </PageHeader.HeadingContent.Title>\n          </PageHeader.HeadingContent>\n        </PageHeader.Heading>\n      </PageHeader>\n    </Box>"
        },
        {
          "name": "Content After",
          "description": "Pass action, icons, or other components to `PageHeader.HeadingContent.After` to display content after the heading.\n\n> Use `PageHeader.HeadingContent.Action` to pass an action",
          "source": "<Box gap=\"200\" style={{ display: 'flex', flexDirection: 'column' }}>\n      <PageHeader>\n        <PageHeader.Heading>\n          <PageHeader.HeadingContent>\n            <PageHeader.HeadingContent.Title>\n              With action\n            </PageHeader.HeadingContent.Title>\n            <PageHeader.HeadingContent.After>\n              <PageHeader.HeadingContent.Action\n                icon={<Icon icon={Edit} />}\n                aria-label=\"Edit\"\n              />\n            </PageHeader.HeadingContent.After>\n          </PageHeader.HeadingContent>\n        </PageHeader.Heading>\n      </PageHeader>\n\n      <PageHeader>\n        <PageHeader.Heading>\n          <PageHeader.HeadingContent>\n            <PageHeader.HeadingContent.Title>\n              With icon\n            </PageHeader.HeadingContent.Title>\n            <PageHeader.HeadingContent.After>\n              <Icon icon={Satellite} />\n            </PageHeader.HeadingContent.After>\n          </PageHeader.HeadingContent>\n        </PageHeader.Heading>\n      </PageHeader>\n\n      <PageHeader>\n        <PageHeader.Heading>\n          <PageHeader.HeadingContent>\n            <PageHeader.HeadingContent.Title>\n              With action and icon\n            </PageHeader.HeadingContent.Title>\n            <PageHeader.HeadingContent.After>\n              <Icon icon={Satellite} />\n              <PageHeader.HeadingContent.Action\n                icon={<Icon icon={Edit} />}\n                aria-label=\"Edit\"\n              />\n            </PageHeader.HeadingContent.After>\n          </PageHeader.HeadingContent>\n        </PageHeader.Heading>\n      </PageHeader>\n\n      <PageHeader>\n        <PageHeader.Heading>\n          <PageHeader.HeadingContent>\n            <PageHeader.HeadingContent.Title>\n              With badge and action\n            </PageHeader.HeadingContent.Title>\n            <PageHeader.HeadingContent.After>\n              <Badge hideIcon emphasis=\"medium\">\n                Badge text\n              </Badge>\n              <PageHeader.HeadingContent.Action\n                icon={<Icon icon={Edit} />}\n                aria-label=\"Edit\"\n              />\n            </PageHeader.HeadingContent.After>\n          </PageHeader.HeadingContent>\n        </PageHeader.Heading>\n      </PageHeader>\n    </Box>"
        },
        {
          "name": "With Body",
          "description": "Displaying a `PageHeader.Body` is optional. Use `PageHeader.Body` to add body text to the PageHeader.",
          "source": "<PageHeader>\n      <PageHeader.Heading>\n        <PageHeader.HeadingContent>\n          <PageHeader.HeadingContent.Title>\n            Page heading\n          </PageHeader.HeadingContent.Title>\n        </PageHeader.HeadingContent>\n      </PageHeader.Heading>\n      <PageHeader.Body>Page description for additional context</PageHeader.Body>\n    </PageHeader>"
        },
        {
          "name": "With Actions",
          "description": "Displaying `PageHeader.Actions` is optional. Use `PageHeader.Actions` to add Buttons to the PageHeader.",
          "source": "<PageHeader>\n      <PageHeader.Heading>\n        <PageHeader.HeadingContent>\n          <PageHeader.HeadingContent.Title>\n            Page heading\n          </PageHeader.HeadingContent.Title>\n        </PageHeader.HeadingContent>\n        <PageHeader.Actions>\n          <Button size=\"sm\" appearance=\"neutral-subtle\" kind=\"outline\">\n            Button text\n          </Button>\n          <Button size=\"sm\">Button text</Button>\n        </PageHeader.Actions>\n      </PageHeader.Heading>\n      <PageHeader.Body>Page description for additional context</PageHeader.Body>\n    </PageHeader>"
        },
        {
          "name": "Action Overflow",
          "description": "Add a Menu to `PageHeader.Actions` to display an action Menu overflow with the PageHeader.",
          "source": "<PageHeader>\n      <PageHeader.Heading>\n        <PageHeader.HeadingContent>\n          <PageHeader.HeadingContent.Title>\n            Page heading\n          </PageHeader.HeadingContent.Title>\n        </PageHeader.HeadingContent>\n        <PageHeader.Actions>\n          <Button size=\"sm\" appearance=\"neutral-subtle\" kind=\"outline\">\n            Button text\n          </Button>\n          <Button size=\"sm\">Button text</Button>\n          <Menu>\n            <Menu.Trigger>\n              <Button\n                size=\"sm\"\n                appearance=\"neutral-subtle\"\n                kind=\"outline\"\n                iconOnly\n                iconBefore={<Icon icon={MoreHoriz} />}\n                aria-label=\"More actions\"\n              ></Button>\n            </Menu.Trigger>\n            <Menu.PopoverContent>\n              <ActionList>\n                <ActionList.Item>List item one</ActionList.Item>\n                <ActionList.Item>List item two</ActionList.Item>\n                <ActionList.Item>List item three</ActionList.Item>\n                <ActionList.Item>List item four</ActionList.Item>\n                <ActionList.Item>List item five</ActionList.Item>\n              </ActionList>\n            </Menu.PopoverContent>\n          </Menu>\n        </PageHeader.Actions>\n      </PageHeader.Heading>\n      <PageHeader.Body>Page description for additional context</PageHeader.Body>\n    </PageHeader>"
        },
        {
          "name": "With Breadcrumbs",
          "description": "Use `PageHeader.Breadcrumb` to display Breadcrumbs above the heading.",
          "source": "<PageHeader>\n      <PageHeader.Breadcrumb>\n        <Breadcrumb>\n          <BreadcrumbItem href=\"#\">Item 1</BreadcrumbItem>\n          <BreadcrumbItem href=\"#\">Item 2</BreadcrumbItem>\n          <BreadcrumbItem href=\"#\">Item 3</BreadcrumbItem>\n          <BreadcrumbItem href=\"#\">Current</BreadcrumbItem>\n        </Breadcrumb>\n      </PageHeader.Breadcrumb>\n      <PageHeader.Heading>\n        <PageHeader.HeadingContent>\n          <PageHeader.HeadingContent.Title>\n            Page heading\n          </PageHeader.HeadingContent.Title>\n        </PageHeader.HeadingContent>\n        <PageHeader.Actions>\n          <Button size=\"sm\" appearance=\"neutral-subtle\" kind=\"outline\">\n            Button text\n          </Button>\n          <Button size=\"sm\">Button text</Button>\n        </PageHeader.Actions>\n      </PageHeader.Heading>\n    </PageHeader>"
        },
        {
          "name": "With Tabs",
          "description": "Use `PageHeader.Tabs` to display Tabs below the heading and body.",
          "source": "<PageHeader>\n      <PageHeader.Heading>\n        <PageHeader.HeadingContent>\n          <PageHeader.HeadingContent.Title>\n            Page heading\n          </PageHeader.HeadingContent.Title>\n        </PageHeader.HeadingContent>\n        <PageHeader.Actions>\n          <Button size=\"sm\" appearance=\"neutral-subtle\" kind=\"outline\">\n            Button text\n          </Button>\n          <Button size=\"sm\">Button text</Button>\n        </PageHeader.Actions>\n      </PageHeader.Heading>\n      <PageHeader.Body>Page description for additional context</PageHeader.Body>\n      <PageHeader.Tabs>\n        <Tabs>\n          <Tabs.Group>\n            <Tabs.Item value=\"1\">Item one</Tabs.Item>\n            <Tabs.Item value=\"2\">Item two</Tabs.Item>\n            <Tabs.Item value=\"3\">Item three</Tabs.Item>\n            <Tabs.Item value=\"4\">Item four</Tabs.Item>\n          </Tabs.Group>\n        </Tabs>\n      </PageHeader.Tabs>\n    </PageHeader>"
        },
        {
          "name": "Component Hierarchy",
          "description": "PageHeader follows a strict sub-component hierarchy that is necessary for proper layout and function. Please ensure\nthat every sub-component is used in it's correct position within the PageHeader hierarchy.\n\n```tsx\n\n \n \n Item 1\n Item 2\n Item 3\n Item 4\n Item 5\n Current\n \n \n \n \n \n \n \n \n \n Page heading\n \n \n \n \n \n \n \n Button text\n \n Button text\n \n \n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.\n \n \n \n \n Item one\n Item two\n Item three\n Item four\n \n \n \n\n```",
          "source": "<PageHeader>\n      <PageHeader.Breadcrumb>\n        <Breadcrumb>\n          <BreadcrumbItem href=\"#\">Item 1</BreadcrumbItem>\n          <BreadcrumbItem href=\"#\">Item 2</BreadcrumbItem>\n          <BreadcrumbItem href=\"#\">Item 3</BreadcrumbItem>\n          <BreadcrumbItem href=\"#\">Item 4</BreadcrumbItem>\n          <BreadcrumbItem href=\"#\">Item 5</BreadcrumbItem>\n          <BreadcrumbItem href=\"#\">Current</BreadcrumbItem>\n        </Breadcrumb>\n      </PageHeader.Breadcrumb>\n      <PageHeader.Heading>\n        <PageHeader.HeadingContent>\n          <PageHeader.HeadingContent.Before>\n            <Icon icon={Satellite} />\n            <PageHeader.HeadingContent.Action\n              aria-label=\"Back\"\n              icon={<Icon icon={Arrowbackcurved} />}\n            />\n          </PageHeader.HeadingContent.Before>\n          <PageHeader.HeadingContent.Title>\n            Page heading\n          </PageHeader.HeadingContent.Title>\n          <PageHeader.HeadingContent.After>\n            <Icon icon={Satellite} />\n          </PageHeader.HeadingContent.After>\n        </PageHeader.HeadingContent>\n        <PageHeader.Actions>\n          <Button size=\"sm\" appearance=\"neutral-subtle\" kind=\"outline\">\n            Button text\n          </Button>\n          <Button size=\"sm\">Button text</Button>\n        </PageHeader.Actions>\n      </PageHeader.Heading>\n\n      <PageHeader.Body>\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.\n      </PageHeader.Body>\n      <PageHeader.Tabs>\n        <Tabs>\n          <Tabs.Group>\n            <Tabs.Item value=\"1\">Item one</Tabs.Item>\n            <Tabs.Item value=\"2\">Item two</Tabs.Item>\n            <Tabs.Item value=\"3\">Item three</Tabs.Item>\n            <Tabs.Item value=\"4\">Item four</Tabs.Item>\n          </Tabs.Group>\n        </Tabs>\n      </PageHeader.Tabs>\n    </PageHeader>"
        }
      ],
      "category": "Components",
      "displayName": "PageHeader",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Forms/NativeSelect",
      "slug": "forms-nativeselect",
      "description": "Native select allows users to choose one option from a list and uses native browser styles and functionality for that list. It is ideal for single selection on mobile devices.\n\nFor a styled list that includes a multiselect option, use [Select](/docs/forms-select--docs) instead.",
      "type": "component",
      "props": [
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the NativeSelect. By default it inherits the theme from the parent"
        },
        {
          "name": "label",
          "type": "Nullable<ReactElement<any, string | JSXElementConstructor<any>>>",
          "description": "Specify Label for NativeSelect",
          "defaultValue": "null"
        },
        {
          "name": "ellipse",
          "type": "boolean",
          "description": "Specify if overflow displays ellipsis",
          "defaultValue": "true"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if NativeSelect displays in a disabled state",
          "defaultValue": "false"
        },
        {
          "name": "required",
          "type": "boolean",
          "description": "Specify if NativeSelect is a required input",
          "defaultValue": "false"
        },
        {
          "name": "size",
          "type": "'sm' | 'md' | 'lg'",
          "description": "Specify the size of NativeSelect"
        },
        {
          "name": "width",
          "type": "string",
          "description": "Specify the width of NativeSelect"
        },
        {
          "name": "error",
          "type": "string | boolean",
          "description": "Specify error text and display error state of a NativeSelect"
        },
        {
          "name": "fluid",
          "type": "boolean",
          "description": "Specify if NativeSelect is fluid",
          "defaultValue": "false"
        },
        {
          "name": "helperText",
          "type": "Nullable<ReactElement<any, string | JSXElementConstructor<any>>>",
          "description": "Specify HelperText for NativeSelect",
          "defaultValue": "null"
        },
        {
          "name": "validationRules",
          "type": "FormValidator[]",
          "description": "Specify form validation rules for NativeSelect",
          "defaultValue": "[]"
        },
        {
          "name": "hideRequiredMarker",
          "type": "boolean",
          "description": "Specify if the NativeSelect displays with an asterisk",
          "defaultValue": "false"
        },
        {
          "name": "readOnly",
          "type": "boolean",
          "description": "Specify if NativeSelect displays in a read-only state",
          "defaultValue": "false"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default NativeSelect.",
          "source": "<NativeSelect\n        id=\"default\"\n        name=\"default\"\n        label={<Label>Label</Label>}\n        {...args}\n      >\n        <option>Select an option</option>\n        <option value=\"1\">Option 1</option>\n        <option value=\"2\">Option 2</option>\n        <option value=\"3\">Option 3</option>\n      </NativeSelect>"
        },
        {
          "name": "Without Label",
          "description": "Displaying the `Label` is optional.\nNativeSelect will display without `Label` if not passed as a prop.\nIf no `label` is passed, set `aria-label` to make this input accessible\nfor screen readers.",
          "source": "<NativeSelect\n        id=\"without-label\"\n        name=\"without-label\"\n        aria-label=\"without-label\"\n      >\n        <option>Select an option</option>\n        <option value=\"1\">Option 1</option>\n        <option value=\"2\">Option 2</option>\n        <option value=\"3\">Option 3</option>\n      </NativeSelect>"
        },
        {
          "name": "Hidden Options",
          "description": "NativeSelect options can be hidden.",
          "source": "<NativeSelect\n        id=\"hidden-options\"\n        name=\"hidden-options\"\n        label={<Label>Label</Label>}\n      >\n        <option disabled hidden selected>\n          Select an option\n        </option>\n        <option value=\"1\">Option 1</option>\n        <option value=\"2\">Option 2</option>\n        <option value=\"3\">Option 3</option>\n      </NativeSelect>"
        },
        {
          "name": "Without Placeholder",
          "description": "NativeSelect will display without a placeholder if one is not provided.",
          "source": "<NativeSelect\n        id=\"without-placeholder\"\n        name=\"without-placeholder\"\n        label={<Label>Label</Label>}\n      >\n        <option value=\"1\">Option 1</option>\n        <option value=\"2\">Option 2</option>\n        <option value=\"3\">Option 3</option>\n      </NativeSelect>"
        },
        {
          "name": "With Helper Text",
          "description": "Displaying `HelperText` is optional.\nNativeSelect will display with `HelperText` if passed as a prop.",
          "source": "<NativeSelect\n        id=\"with-helper-text\"\n        name=\"with-helper-text\"\n        label={<Label>Label</Label>}\n        helperText={<HelperText>Helper text</HelperText>}\n      >\n        <option>Select an option</option>\n        <option value=\"1\">Option 1</option>\n        <option value=\"2\">Option 2</option>\n        <option value=\"3\">Option 3</option>\n      </NativeSelect>"
        },
        {
          "name": "Required",
          "description": "Set `required` to `true` to make NativeSelect required.\nSet `hideRequiredMarker` to `true` to remove the asterisk (*).",
          "source": "<>\n        <NativeSelect\n          required\n          id=\"required\"\n          name=\"required\"\n          label={<Label>With a required marker</Label>}\n        >\n          <option>Select an option</option>\n          <option value=\"1\">Option 1</option>\n          <option value=\"2\">Option 2</option>\n          <option value=\"3\">Option 3</option>\n        </NativeSelect>\n        <NativeSelect\n          required\n          hideRequiredMarker\n          id=\"required-no-marker\"\n          name=\"required-no-marker\"\n          label={<Label>Without a required marker</Label>}\n        >\n          <option>Select an option</option>\n          <option value=\"1\">Option 1</option>\n          <option value=\"2\">Option 2</option>\n          <option value=\"3\">Option 3</option>\n        </NativeSelect>\n      </>"
        },
        {
          "name": "Optional",
          "description": "Pass `optional` to `label` to show that a NativeSelect is optional.\nDo not mix required and optional markers in the same form set.",
          "source": "<NativeSelect\n        id=\"optional\"\n        name=\"optional\"\n        label={<Label optional=\"(optional)\">Label</Label>}\n      >\n        <option>Select an option</option>\n        <option value=\"1\">Option 1</option>\n        <option value=\"2\">Option 2</option>\n        <option value=\"3\">Option 3</option>\n      </NativeSelect>"
        },
        {
          "name": "Error",
          "description": "Use `error` to specify `HelperText` text and display NativeSelect in an error state.",
          "source": "<NativeSelect\n        id=\"error\"\n        name=\"error\"\n        error=\"Helper text\"\n        label={<Label>Label</Label>}\n      >\n        <option>Select an option</option>\n        <option value=\"1\">Option 1</option>\n        <option value=\"2\">Option 2</option>\n        <option value=\"3\">Option 3</option>\n      </NativeSelect>"
        },
        {
          "name": "Read Only",
          "description": "Set `readOnly` to `true` to display NativeSelect in a read only state.",
          "source": "<NativeSelect\n        readOnly\n        id=\"read-only\"\n        name=\"read-only\"\n        defaultValue=\"2\"\n        label={<Label>Label</Label>}\n      >\n        <option>Select an option</option>\n        <option value=\"1\">Option 1</option>\n        <option value=\"2\">Option 2</option>\n        <option value=\"3\">Option 3</option>\n      </NativeSelect>"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` to display NativeSelect in a disabled state.",
          "source": "<NativeSelect\n        disabled\n        id=\"disabled\"\n        name=\"disabled\"\n        label={<Label>Label</Label>}\n      >\n        <option>Select an option</option>\n        <option value=\"1\">Option 1</option>\n        <option value=\"2\">Option 2</option>\n        <option value=\"3\">Option 3</option>\n      </NativeSelect>"
        },
        {
          "name": "Width",
          "description": "Use `width` to customize the width of a NativeSelect. Use `rems` to specify width\nto ensure NativeSelect scales with user preferences.",
          "source": "<NativeSelect\n        id=\"width\"\n        name=\"width\"\n        width=\"25rem\"\n        label={<Label>Label</Label>}\n      >\n        <option>Select an option</option>\n        <option value=\"1\">Option 1</option>\n        <option value=\"2\">Option 2</option>\n        <option value=\"3\">Option 3</option>\n      </NativeSelect>"
        },
        {
          "name": "Fluid",
          "description": "Set `fluid` to `true` to make NativeSelect span its parent container.",
          "source": "<NativeSelect fluid id=\"fluid\" name=\"fluid\" label={<Label>Label</Label>}>\n        <option>Select an option</option>\n        <option value=\"1\">Option 1</option>\n        <option value=\"2\">Option 2</option>\n        <option value=\"3\">Option 3</option>\n      </NativeSelect>"
        },
        {
          "name": "Size",
          "description": "NativeSelect supports `sm`, `md`, and `lg` sizes. Default size is `md`.",
          "source": "<>\n        <NativeSelect\n          size=\"sm\"\n          label={<Label>Small</Label>}\n          helperText={<HelperText>Helper text</HelperText>}\n        >\n          <option>Select an option</option>\n          <option value=\"1\">Option 1</option>\n          <option value=\"2\">Option 2</option>\n          <option value=\"3\">Option 3</option>\n        </NativeSelect>\n        <NativeSelect\n          size=\"md\"\n          label={<Label>Medium</Label>}\n          helperText={<HelperText>Helper text</HelperText>}\n        >\n          <option>Select an option</option>\n          <option value=\"1\">Option 1</option>\n          <option value=\"2\">Option 2</option>\n          <option value=\"3\">Option 3</option>\n        </NativeSelect>\n        <NativeSelect\n          size=\"lg\"\n          label={<Label>Large</Label>}\n          helperText={<HelperText>Helper text</HelperText>}\n        >\n          <option>Select an option</option>\n          <option value=\"1\">Option 1</option>\n          <option value=\"2\">Option 2</option>\n          <option value=\"3\">Option 3</option>\n        </NativeSelect>\n      </>"
        }
      ],
      "category": "Forms",
      "displayName": "NativeSelect",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Menu/Menu",
      "slug": "components-menu-menu",
      "description": "A Menu is a hidden list used for quick actions and selections. It’s composed of an [ActionList](/docs/components-actionlist-actionlist--docs) within a [Popover](/docs/components-popover-popover--docs) and can be invoked by clicking an interactive trigger like a Button or Chip.",
      "type": "component",
      "props": [
        {
          "name": "children",
          "type": "ReactNode",
          "description": "Specify content and sub-components of the Menu",
          "required": true
        },
        {
          "name": "open",
          "type": "boolean",
          "description": "Specify if the Menu is open"
        },
        {
          "name": "defaultOpen",
          "type": "boolean",
          "description": "Specify if the Menu is open by default"
        },
        {
          "name": "onOpenChange",
          "type": "(open: boolean, event?: Event, reason?: OpenChangeReason) => void",
          "description": "Callback function is called when the Menu is opened or closed"
        },
        {
          "name": "maxHeight",
          "type": "string",
          "description": "Specify the maximum height of the menu"
        },
        {
          "name": "minWidth",
          "type": "string",
          "description": "Specify the minimum width of the menu",
          "defaultValue": "12rem"
        },
        {
          "name": "maxWidth",
          "type": "string",
          "description": "Specify the maximum width of the menu"
        },
        {
          "name": "listNavigation",
          "type": "Partial<UseListNavigationProps>",
          "description": ""
        },
        {
          "name": "offset",
          "type": "any",
          "description": "Specify the distance between the anchor and the Popover in rems.\n<a href=\"https://floating-ui.com/docs/offset#options\" target=\"_blank\" rel=\"noopener noreferrer\">OffsetOptions</a>",
          "defaultValue": "0.5"
        },
        {
          "name": "placement",
          "type": "enum",
          "description": "Specify the location of the floating content",
          "defaultValue": "'top'"
        },
        {
          "name": "autoPlacement",
          "type": "boolean | { rootBoundary?: RootBoundary; elementContext?: ElementContext; altBoundary?: boolean; padding?: Padding; crossAxis?: boolean; alignment?: Alignment; autoAlignment?: boolean; allowedPlacements?: Placement[]; boundary?: Boundary; }",
          "description": "Specify if the floating content should automatically choose the placement that has the most space.\n<a href=\"https://floating-ui.com/docs/autoplacement#options\" target=\"_blank\" rel=\"noopener noreferrer\">AutoPlacementOptions</a>"
        },
        {
          "name": "flip",
          "type": "boolean | { rootBoundary?: RootBoundary; elementContext?: ElementContext; altBoundary?: boolean; padding?: Padding; crossAxis?: boolean; mainAxis?: boolean; ... 4 more ...; boundary?: Boundary; }",
          "description": "Specify if the floating content should flip to the opposite side if there is not enough space.\n<a href=\"https://floating-ui.com/docs/flip#options\" target=\"_blank\" rel=\"noopener noreferrer\">FlipOptions</a>\n\nCannot be used with `autoPlacement`"
        },
        {
          "name": "shift",
          "type": "boolean | { rootBoundary?: RootBoundary; elementContext?: ElementContext; altBoundary?: boolean; padding?: Padding; crossAxis?: boolean; mainAxis?: boolean; limiter?: { ...; }; boundary?: Boundary; }",
          "description": "Allow shifting of the floating content.\n<a href=\"https://floating-ui.com/docs/shift#options\" target=\"_blank\" rel=\"noopener noreferrer\">ShiftOptions</a>"
        },
        {
          "name": "autoHiding",
          "type": "boolean | { strategy?: \"referenceHidden\" | \"escaped\"; rootBoundary?: RootBoundary; elementContext?: ElementContext; altBoundary?: boolean; padding?: Padding; boundary?: Boundary; }",
          "description": "Specify if the Popover should auto-hide when the anchor is not in view.\n<a href=\"https://floating-ui.com/docs/hide#options\" target=\"_blank\" rel=\"noopener noreferrer\">HideOptions</a>"
        },
        {
          "name": "size",
          "type": "boolean | { rootBoundary?: RootBoundary; elementContext?: ElementContext; altBoundary?: boolean; padding?: Padding; boundary?: Boundary; apply?: (args: { ...; } & { ...; }) => Promisable<...>; }",
          "description": "Constrain the floating element's size to fit within available space.\n<a href=\"https://floating-ui.com/docs/size#options\" target=\"_blank\" rel=\"noopener noreferrer\">SizeOptions</a>"
        },
        {
          "name": "middleware",
          "type": "MiddlewareModifier",
          "description": "Middleware functions to modify the behavior of the floating element"
        },
        {
          "name": "openOnHover",
          "type": "boolean | UseHoverProps",
          "description": "Enable hover interaction.\n<a href=\"https://floating-ui.com/docs/usehover#props\" target=\"_blank\" rel=\"noopener noreferrer\">UseHoverProps</a>"
        },
        {
          "name": "openOnClick",
          "type": "boolean | UseClickProps",
          "description": "Enable click interaction.\n<a href=\"https://floating-ui.com/docs/useclick#props\" target=\"_blank\" rel=\"noopener noreferrer\">UseClickProps</a>",
          "defaultValue": "true"
        },
        {
          "name": "openOnFocus",
          "type": "boolean | UseFocusProps",
          "description": "Enable focus interaction.\n<a href=\"https://floating-ui.com/docs/usefocus#props\" target=\"_blank\" rel=\"noopener noreferrer\">UseFocusProps</a>"
        },
        {
          "name": "openOnSelected",
          "type": "boolean | UseSelectedProps",
          "description": "Enable selection interaction"
        },
        {
          "name": "portalled",
          "type": "boolean | FloatingPortalProps",
          "description": "Specify if the Popover is portalled"
        },
        {
          "name": "focusConfiguration",
          "type": "FocusManagerProps",
          "description": "Configure modal or non-modal focus management for popover content.\n<a href=\"https://floating-ui.com/docs/floatingfocusmanager#props\" target=\"_blank\" rel=\"noopener noreferrer\">FloatingFocusManagerProps</a>"
        },
        {
          "name": "transitionConfig",
          "type": "UseTransitionStylesProps",
          "description": "Transition configuration"
        },
        {
          "name": "role",
          "type": "UseRoleProps",
          "description": "Adds base screen reader props to the reference and floating elements for a given `role`"
        },
        {
          "name": "rootContext",
          "type": "FloatingRootContext<ReferenceType>",
          "description": "Specify the floating ui root context, if any"
        },
        {
          "name": "typeahead",
          "type": "UseTypeaheadProps",
          "description": "Adds typeahead support to the floating list, if any"
        },
        {
          "name": "dismiss",
          "type": "UseDismissProps",
          "description": "Configure dismiss behaviour (escape key, outside press, etc.)"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the Popover. By default it inherits the theme from the parent"
        },
        {
          "name": "hideArrow",
          "type": "boolean",
          "description": "Whether the arrow is visible"
        },
        {
          "name": "appearance",
          "type": "enum",
          "description": "Specify the color mode of the Popover",
          "defaultValue": "'default'"
        },
        {
          "name": "trapFocus",
          "type": "boolean",
          "description": "Specify if the Popover should trap focus within the floating content."
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Menu.",
          "source": "<Menu>\n        <Menu.Trigger>\n          <Button>Menu trigger</Button>\n        </Menu.Trigger>\n        <Menu.PopoverContent>\n          <ActionList>\n            <ActionList.Item>List item 1</ActionList.Item>\n            <ActionList.Item>List item 2</ActionList.Item>\n            <ActionList.Item>List item 3</ActionList.Item>\n            <ActionList.Item>List item 4</ActionList.Item>\n            <ActionList.Item>List item 5</ActionList.Item>\n          </ActionList>\n        </Menu.PopoverContent>\n      </Menu>"
        },
        {
          "name": "Width",
          "description": "A default min-width or `12rem` has been applied to the Menu. Both `minWidth` and `maxWidth` are customizable.\n\n> Set `minWidth` value to `unset` to display Menu as auto-width. Examples provided below.",
          "source": "<>\n      <VerticalBox>\n        <BoxHeading>Long menu values</BoxHeading>\n        <Menu minWidth=\"unset\">\n          <Menu.Trigger>\n            <Button>Menu trigger</Button>\n          </Menu.Trigger>\n          <Menu.PopoverContent>\n            <ActionList>\n              <ActionList.Item>Lorem ipsum dolor</ActionList.Item>\n              <ActionList.Item>\n                Lorem ipsum dolor sit amet consectetur\n              </ActionList.Item>\n              <ActionList.Item>\n                Lorem ipsum dolor sit amet consectetur adipiscing\n              </ActionList.Item>\n              <ActionList.Item>Lorem ipsum dolor sit amet</ActionList.Item>\n              <ActionList.Item>Lorem ipsum dolor sit</ActionList.Item>\n            </ActionList>\n          </Menu.PopoverContent>\n        </Menu>\n      </VerticalBox>\n      <VerticalBox>\n        <BoxHeading>Short menu values</BoxHeading>\n        <Menu minWidth=\"unset\">\n          <Menu.Trigger>\n            <Button>Menu trigger</Button>\n          </Menu.Trigger>\n          <Menu.PopoverContent>\n            <ActionList>\n              <ActionList.Item>1</ActionList.Item>\n              <ActionList.Item>2</ActionList.Item>\n              <ActionList.Item>3</ActionList.Item>\n              <ActionList.Item>4</ActionList.Item>\n              <ActionList.Item>5</ActionList.Item>\n            </ActionList>\n          </Menu.PopoverContent>\n        </Menu>\n      </VerticalBox>\n    </>"
        },
        {
          "name": "Height",
          "description": "Set `maxHeight` to customize the height of the Menu. Internal scrolling is automatically triggered when the max-height is exceeded by Menu items.",
          "source": "<Menu maxHeight=\"12rem\">\n      <Menu.Trigger>\n        <Button>Menu trigger</Button>\n      </Menu.Trigger>\n      <Menu.PopoverContent>\n        <ActionList>\n          <ActionList.Item>List item 1</ActionList.Item>\n          <ActionList.Item>List item 2</ActionList.Item>\n          <ActionList.Item>List item 3</ActionList.Item>\n          <ActionList.Item>List item 4</ActionList.Item>\n          <ActionList.Item>List item 5</ActionList.Item>\n          <ActionList.Item>List item 6</ActionList.Item>\n          <ActionList.Item>List item 7</ActionList.Item>\n          <ActionList.Item>List item 8</ActionList.Item>\n        </ActionList>\n      </Menu.PopoverContent>\n    </Menu>"
        },
        {
          "name": "Truncation",
          "description": "Menu item text truncates while `supportingText` wraps. Avoid truncating item text when possible by adjusting or removing `maxWidth`.\n\n> To ensure the Menu is accessible, a Tooltip will display when truncation can’t be avoided.",
          "source": "<Menu maxWidth=\"12rem\">\n      <Menu.Trigger>\n        <Button>Menu trigger</Button>\n      </Menu.Trigger>\n      <Menu.PopoverContent>\n        <ActionList>\n          <ActionList.Item supportingText=\"Lorem ipsum dolor sit amet\">\n            Short list item\n          </ActionList.Item>\n          <ActionList.Item supportingText=\"Lorem ipsum dolor sit amet consectetur adipiscing elit\">\n            This really long menu item gets truncated\n          </ActionList.Item>\n          <ActionList.Item supportingText=\"Lorem ipsum dolor sit amet\">\n            Short list item\n          </ActionList.Item>\n        </ActionList>\n      </Menu.PopoverContent>\n    </Menu>"
        },
        {
          "name": "Flyout Menus",
          "description": "Use sub-nested flyout menus to help users access more information from within a Menu.",
          "source": "<Menu>\n      <Menu.Trigger>\n        <Button>Menu trigger</Button>\n      </Menu.Trigger>\n      <Menu.PopoverContent>\n        <ActionList>\n          <ActionList.Item>List item 1</ActionList.Item>\n          <ActionList.Item>List item 2</ActionList.Item>\n          <Menu>\n            <Menu.Trigger>\n              <ActionList.Item>List item with flyout menu</ActionList.Item>\n            </Menu.Trigger>\n            <Menu.PopoverContent>\n              <ActionList>\n                <ActionList.Item>Sub item 1</ActionList.Item>\n                <Menu>\n                  <Menu.Trigger>\n                    <ActionList.Item>Sub item with flyout menu</ActionList.Item>\n                  </Menu.Trigger>\n                  <Menu.PopoverContent>\n                    <ActionList>\n                      <ActionList.Item>Sub item 1</ActionList.Item>\n                      <ActionList.Item>Sub item 2</ActionList.Item>\n                    </ActionList>\n                  </Menu.PopoverContent>\n                </Menu>\n                <ActionList.Item>Sub item 3</ActionList.Item>\n              </ActionList>\n            </Menu.PopoverContent>\n          </Menu>\n          <ActionList.Item>List item 4</ActionList.Item>\n        </ActionList>\n      </Menu.PopoverContent>\n    </Menu>"
        },
        {
          "name": "Flyout Popover",
          "description": "Use a sub-nested flyout menus to display custom Popover content from within a Menu.",
          "source": "<Menu>\n      <Menu.Trigger>\n        <Button>Menu trigger</Button>\n      </Menu.Trigger>\n      <Menu.PopoverContent>\n        <ActionList>\n          <ActionList.Item>List item 1</ActionList.Item>\n          <ActionList.Item>List item 2</ActionList.Item>\n          <ActionList.Item>List item 3</ActionList.Item>\n          <Menu>\n            <Menu.Trigger>\n              <ActionList.Item>List item with flyout popover</ActionList.Item>\n            </Menu.Trigger>\n            <Menu.PopoverContent\n              style={{\n                width: '19rem',\n                display: 'flex',\n                flexDirection: 'column',\n              }}\n              px=\"100\"\n              py=\"100\"\n              gap=\"125\"\n            >\n              <Box\n                style={{\n                  display: 'flex',\n                  justifyContent: 'space-between',\n                  alignItems: 'start',\n                  width: '100%',\n                }}\n              >\n                <Text kind=\"heading-sm\" color=\"primary\">\n                  {popoverStorybookTitle}\n                </Text>\n              </Box>\n              <Text kind=\"body-md\" color=\"secondary\">\n                {popoverStorybookBody}\n              </Text>\n              <Button size=\"sm\" appearance=\"accent\" kind=\"filled\">\n                Action\n              </Button>\n            </Menu.PopoverContent>\n          </Menu>\n        </ActionList>\n      </Menu.PopoverContent>\n    </Menu>"
        },
        {
          "name": "State Persistence",
          "description": "Make `ActionList` items controlled, to persist the state of each item.\n\n> By default, popovers remove the floating element from the DOM when closed, which means the `ActionList` items will reset to their initial values when the Menu is opened again.",
          "source": "const [listItem1a, setListItem1a] = useState(false);\n    const [listItem2a, setListItem2a] = useState(true);\n    const [listItem3a, setListItem3a] = useState(false);\n    const [listItem1b, setListItem1b] = useState(false);\n    const [listItem2b, setListItem2b] = useState(false);\n    const [listItem3b, setListItem3b] = useState(true);\n\n    return (\n      <>\n        <VerticalBox>\n          <BoxHeading>Uncontrolled ActionList items</BoxHeading>\n          <Menu>\n            <Menu.Trigger>\n              <Button>Menu trigger</Button>\n            </Menu.Trigger>\n            <Menu.PopoverContent>\n              <ActionList>\n                <ActionList.Group divider kind=\"multiCheckMark\">\n                  <ActionList.Item>List item 1</ActionList.Item>\n                  <ActionList.Item defaultSelected>List item 2</ActionList.Item>\n                  <ActionList.Item>List item 3</ActionList.Item>\n                </ActionList.Group>\n                <ActionList.Group kind=\"checkbox\">\n                  <ActionList.Item>List item 1</ActionList.Item>\n                  <ActionList.Item>List item 2</ActionList.Item>\n                  <ActionList.Item defaultSelected>List item 3</ActionList.Item>\n                </ActionList.Group>\n              </ActionList>\n            </Menu.PopoverContent>\n          </Menu>\n        </VerticalBox>\n        <VerticalBox>\n          <BoxHeading>Controlled ActionList items</BoxHeading>\n          <Menu>\n            <Menu.Trigger>\n              <Button>Menu trigger</Button>\n            </Menu.Trigger>\n            <Menu.PopoverContent>\n              <ActionList>\n                <ActionList.Group divider kind=\"multiCheckMark\">\n                  <ActionList.Item\n                    defaultSelected={listItem1a}\n                    onSelectionChange={setListItem1a}\n                  >\n                    List item 1\n                  </ActionList.Item>\n                  <ActionList.Item\n                    defaultSelected={listItem2a}\n                    onSelectionChange={setListItem2a}\n                  >\n                    List item 2\n                  </ActionList.Item>\n                  <ActionList.Item\n                    defaultSelected={listItem3a}\n                    onSelectionChange={setListItem3a}\n                  >\n                    List item 3\n                  </ActionList.Item>\n                </ActionList.Group>\n                <ActionList.Group kind=\"checkbox\">\n                  <ActionList.Item\n                    defaultSelected={listItem1b}\n                    onSelectionChange={setListItem1b}\n                  >\n                    List item 1\n                  </ActionList.Item>\n                  <ActionList.Item\n                    defaultSelected={listItem2b}\n                    onSelectionChange={setListItem2b}\n                  >\n                    List item 2\n                  </ActionList.Item>\n                  <ActionList.Item\n                    defaultSelected={listItem3b}\n                    onSelectionChange={setListItem3b}\n                  >\n                    List item 3\n                  </ActionList.Item>\n                </ActionList.Group>\n              </ActionList>\n            </Menu.PopoverContent>\n          </Menu>\n        </VerticalBox>\n      </>\n    );"
        },
        {
          "name": "Action",
          "description": "",
          "source": "<Menu>\n      <Menu.Trigger>\n        <Button>Menu trigger</Button>\n      </Menu.Trigger>\n      <Menu.PopoverContent>\n        <ActionList>\n          <ActionList.Item>Mercury</ActionList.Item>\n          <ActionList.Item>Venus</ActionList.Item>\n          <ActionList.Item>Earth</ActionList.Item>\n          <ActionList.Item>Mars</ActionList.Item>\n          <ActionList.Item>Jupiter</ActionList.Item>\n        </ActionList>\n      </Menu.PopoverContent>\n    </Menu>"
        },
        {
          "name": "With Header",
          "description": "",
          "source": "<Menu>\n      <Menu.Trigger>\n        <Button>Menu trigger</Button>\n      </Menu.Trigger>\n      <Menu.PopoverContent>\n        <ActionList header=\"Planets\">\n          <ActionList.Item>Mercury</ActionList.Item>\n          <ActionList.Item>Venus</ActionList.Item>\n          <ActionList.Item>Earth</ActionList.Item>\n          <ActionList.Item>Mars</ActionList.Item>\n          <ActionList.Item>Jupiter</ActionList.Item>\n        </ActionList>\n      </Menu.PopoverContent>\n    </Menu>"
        },
        {
          "name": "With Supporting Text",
          "description": "",
          "source": "<Menu>\n      <Menu.Trigger>\n        <Button>Menu trigger</Button>\n      </Menu.Trigger>\n      <Menu.PopoverContent>\n        <ActionList>\n          <ActionList.Item supportingText=\"The first planet mankind will visit.\">\n            Mars\n          </ActionList.Item>\n          <ActionList.Item supportingText=\"The largest planet in the solar system.\">\n            Jupiter\n          </ActionList.Item>\n          <ActionList.Item supportingText=\"The planet with the largest ring system.\">\n            Saturn\n          </ActionList.Item>\n        </ActionList>\n      </Menu.PopoverContent>\n    </Menu>"
        },
        {
          "name": "With Content Before",
          "description": "",
          "source": "<Menu>\n      <Menu.Trigger>\n        <Button>Menu trigger</Button>\n      </Menu.Trigger>\n      <Menu.PopoverContent>\n        <ActionList ariaLabel=\"Action list\">\n          <ActionList.Item contentBefore={<Icon icon={ContentCopy} />}>\n            Copy\n          </ActionList.Item>\n          <ActionList.Item contentBefore={<Icon icon={Edit} />}>\n            Edit\n          </ActionList.Item>\n          <ActionList.Item\n            kind=\"destructive\"\n            contentBefore={<Icon icon={DeleteOutline} />}\n          >\n            Delete\n          </ActionList.Item>\n        </ActionList>\n      </Menu.PopoverContent>\n    </Menu>"
        },
        {
          "name": "With Content Before And After",
          "description": "",
          "source": "<Menu>\n      <Menu.Trigger>\n        <Button>Menu trigger</Button>\n      </Menu.Trigger>\n      <Menu.PopoverContent>\n        <ActionList ariaLabel=\"Action list\">\n          <ActionList.Item\n            contentBefore={<Icon icon={ContentCopy} />}\n            contentAfter=\"Cmd + C\"\n          >\n            Copy\n          </ActionList.Item>\n          <ActionList.Item\n            contentBefore={<Icon icon={Edit} />}\n            contentAfter=\"Cmd + S\"\n          >\n            Edit\n          </ActionList.Item>\n          <ActionList.Item\n            kind=\"destructive\"\n            contentBefore={<Icon icon={DeleteOutline} />}\n            contentAfter=\"⌫\"\n          >\n            Delete\n          </ActionList.Item>\n        </ActionList>\n      </Menu.PopoverContent>\n    </Menu>"
        },
        {
          "name": "With Divider",
          "description": "",
          "source": "<Menu>\n      <Menu.Trigger>\n        <Button>Menu trigger</Button>\n      </Menu.Trigger>\n      <Menu.PopoverContent>\n        <ActionList ariaLabel=\"Action list\">\n          <ActionList.Group divider>\n            <ActionList.Item\n              contentBefore={<Icon icon={ContentCopy} />}\n              contentAfter=\"Cmd + C\"\n            >\n              Copy\n            </ActionList.Item>\n            <ActionList.Item\n              contentBefore={<Icon icon={Edit} />}\n              contentAfter=\"Cmd + S\"\n            >\n              Edit\n            </ActionList.Item>\n          </ActionList.Group>\n          <ActionList.Group>\n            <ActionList.Item\n              kind=\"destructive\"\n              contentBefore={<Icon icon={DeleteOutline} />}\n              contentAfter=\"⌫\"\n            >\n              Delete\n            </ActionList.Item>\n          </ActionList.Group>\n        </ActionList>\n      </Menu.PopoverContent>\n    </Menu>"
        },
        {
          "name": "With Group Headings",
          "description": "",
          "source": "<Menu>\n      <Menu.Trigger>\n        <Button>Menu trigger</Button>\n      </Menu.Trigger>\n      <Menu.PopoverContent>\n        <ActionList ariaLabel=\"Action list\">\n          <ActionList.Group heading=\"Planets\" divider>\n            <ActionList.Item>Mercury</ActionList.Item>\n            <ActionList.Item>Venus</ActionList.Item>\n            <ActionList.Item>Earth</ActionList.Item>\n            <ActionList.Item>Mars</ActionList.Item>\n            <ActionList.Item>Jupiter</ActionList.Item>\n          </ActionList.Group>\n          <ActionList.Group heading=\"Galaxies\">\n            <ActionList.Item>The Milky Way</ActionList.Item>\n            <ActionList.Item>Andromeda</ActionList.Item>\n          </ActionList.Group>\n        </ActionList>\n      </Menu.PopoverContent>\n    </Menu>"
        },
        {
          "name": "With Disabled Item",
          "description": "",
          "source": "<Menu>\n      <Menu.Trigger>\n        <Button>Menu trigger</Button>\n      </Menu.Trigger>\n      <Menu.PopoverContent>\n        <ActionList ariaLabel=\"Action list\">\n          <ActionList.Item supportingText=\"This is a description.\">\n            List item 1\n          </ActionList.Item>\n          <ActionList.Item supportingText=\"This is a description.\" disabled>\n            Disabled item\n          </ActionList.Item>\n          <ActionList.Item supportingText=\"This is a description.\">\n            List item 3\n          </ActionList.Item>\n        </ActionList>\n      </Menu.PopoverContent>\n    </Menu>"
        },
        {
          "name": "Single Select With Checkmark",
          "description": "",
          "source": "const geoSelection = useSelection(true);\n    const meoSelection = useSelection();\n    const leoSelection = useSelection();\n\n    return (\n      <Menu>\n        <Menu.Trigger>\n          <Button>Menu trigger</Button>\n        </Menu.Trigger>\n        <Menu.PopoverContent>\n          <ActionList ariaLabel=\"Action list\">\n            <ActionList.Group kind=\"singleCheckMark\">\n              <ActionList.Item {...geoSelection}>GEO network</ActionList.Item>\n              <ActionList.Item {...meoSelection}>MEO network</ActionList.Item>\n              <ActionList.Item {...leoSelection}>LEO network</ActionList.Item>\n            </ActionList.Group>\n          </ActionList>\n        </Menu.PopoverContent>\n      </Menu>\n    );"
        },
        {
          "name": "Multi Select With Checkmark",
          "description": "",
          "source": "const geoSelection = useSelection(true);\n    const meoSelection = useSelection(true);\n    const leoSelection = useSelection();\n\n    return (\n      <Menu>\n        <Menu.Trigger>\n          <Button>Menu trigger</Button>\n        </Menu.Trigger>\n        <Menu.PopoverContent>\n          <ActionList ariaLabel=\"Action list\">\n            <ActionList.Group kind=\"multiCheckMark\">\n              <ActionList.Item {...geoSelection}>GEO network</ActionList.Item>\n              <ActionList.Item {...meoSelection}>MEO network</ActionList.Item>\n              <ActionList.Item {...leoSelection}>LEO network</ActionList.Item>\n            </ActionList.Group>\n          </ActionList>\n        </Menu.PopoverContent>\n      </Menu>\n    );"
        },
        {
          "name": "Multi Select With Checkbox",
          "description": "",
          "source": "const geoSelection = useSelection(true);\n    const meoSelection = useSelection(true);\n    const leoSelection = useSelection();\n\n    return (\n      <Menu>\n        <Menu.Trigger>\n          <Button>Menu trigger</Button>\n        </Menu.Trigger>\n        <Menu.PopoverContent>\n          <ActionList ariaLabel=\"Action list\">\n            <ActionList.Group kind=\"checkbox\">\n              <ActionList.Item {...geoSelection}>GEO network</ActionList.Item>\n              <ActionList.Item {...meoSelection}>MEO network</ActionList.Item>\n              <ActionList.Item {...leoSelection}>LEO network</ActionList.Item>\n            </ActionList.Group>\n          </ActionList>\n        </Menu.PopoverContent>\n      </Menu>\n    );"
        },
        {
          "name": "Single Select With Radio Button",
          "description": "",
          "source": "const geoSelection = useSelection(true);\n    const meoSelection = useSelection();\n    const leoSelection = useSelection();\n\n    return (\n      <Menu>\n        <Menu.Trigger>\n          <Button>Menu trigger</Button>\n        </Menu.Trigger>\n        <Menu.PopoverContent>\n          <ActionList ariaLabel=\"Action list\">\n            <ActionList.Group kind=\"radio\">\n              <ActionList.Item {...geoSelection}>GEO network</ActionList.Item>\n              <ActionList.Item {...meoSelection}>MEO network</ActionList.Item>\n              <ActionList.Item {...leoSelection}>LEO network</ActionList.Item>\n            </ActionList.Group>\n          </ActionList>\n        </Menu.PopoverContent>\n      </Menu>\n    );"
        },
        {
          "name": "With Flyout Menu",
          "description": "",
          "source": "<Menu>\n      <Menu.Trigger>\n        <Button>Menu trigger</Button>\n      </Menu.Trigger>\n      <Menu.PopoverContent>\n        <ActionList ariaLabel=\"Root menu\">\n          <Menu>\n            <Menu.Trigger>\n              <ActionList.Item>Planets</ActionList.Item>\n            </Menu.Trigger>\n            <Menu.PopoverContent>\n              <ActionList ariaLabel=\"Planets submenu\">\n                <ActionList.Group heading=\"Planets without moons\" divider>\n                  <ActionList.Item>Venus</ActionList.Item>\n                  <ActionList.Item>Pluto</ActionList.Item>\n                </ActionList.Group>\n                <ActionList.Group heading=\"Planets with moons\">\n                  <Menu>\n                    <Menu.Trigger>\n                      <ActionList.Item>Jupiter</ActionList.Item>\n                    </Menu.Trigger>\n                    <Menu.PopoverContent>\n                      <ActionList ariaLabel=\"Jupiter moons submenu\">\n                        <ActionList.Item>Europa</ActionList.Item>\n                        <ActionList.Item>Lo</ActionList.Item>\n                        <ActionList.Item>Ganymede</ActionList.Item>\n                      </ActionList>\n                    </Menu.PopoverContent>\n                  </Menu>\n                  <Menu>\n                    <Menu.Trigger>\n                      <ActionList.Item>Saturn</ActionList.Item>\n                    </Menu.Trigger>\n                    <Menu.PopoverContent>\n                      <ActionList ariaLabel=\"Saturn moons submenu\">\n                        <ActionList.Item>Titan</ActionList.Item>\n                        <ActionList.Item>Enceladus</ActionList.Item>\n                        <ActionList.Item>Mimas</ActionList.Item>\n                      </ActionList>\n                    </Menu.PopoverContent>\n                  </Menu>\n                </ActionList.Group>\n              </ActionList>\n            </Menu.PopoverContent>\n          </Menu>\n          <Menu>\n            <Menu.Trigger>\n              <ActionList.Item>Galaxies</ActionList.Item>\n            </Menu.Trigger>\n            <Menu.PopoverContent>\n              <ActionList ariaLabel=\"Galaxies submenu\">\n                <ActionList.Item>The Milky Way</ActionList.Item>\n                <ActionList.Item>Andromeda</ActionList.Item>\n              </ActionList>\n            </Menu.PopoverContent>\n          </Menu>\n        </ActionList>\n      </Menu.PopoverContent>\n    </Menu>"
        },
        {
          "name": "With Loading Spinner",
          "description": "",
          "source": "<Menu>\n      <Menu.Trigger>\n        <Button>Menu trigger</Button>\n      </Menu.Trigger>\n      <Menu.PopoverContent>\n        <ActionList ariaLabel=\"Action list\" loading />\n      </Menu.PopoverContent>\n    </Menu>"
        },
        {
          "name": "No Results",
          "description": "",
          "source": "<Menu>\n      <Menu.Trigger>\n        <Button>Menu trigger</Button>\n      </Menu.Trigger>\n      <Menu.PopoverContent>\n        <ActionList ariaLabel=\"Action list\" noResults=\"No matches found\" />\n      </Menu.PopoverContent>\n    </Menu>"
        }
      ],
      "category": "Components",
      "displayName": "Menu/Menu",
      "importPath": "@viasat/beam-react",
      "pairedHooks": [
        {
          "name": "useMenuContext",
          "kind": "hook",
          "signature": "useMenuContext(): undefined | { parentMenuContext?: MenuContextValue; close: (event?: Event | undefined) => void; open: (event?: Event | undefined) => void; minWidth?: string; maxWidth?: string; maxHeight?: string }",
          "returns": "undefined | { parentMenuContext?: MenuContextValue; close: (event?: Event | undefined) => void; open: (event?: Event | undefined) => void; minWidth?: string; maxWidth?: string; maxHeight?: string }",
          "description": "Access the surrounding Menu's context to imperatively `open`/`close` it (e.g. from a\ncustom item). Returns `undefined` when called outside a `<Menu>` subtree, so callers must\nnull-check before use: `const menu = useMenuContext(); menu?.close();`",
          "importPath": "@viasat/beam-react"
        }
      ]
    },
    {
      "title": "Components/Menu/Menu.Trigger",
      "slug": "components-menu-menu-trigger",
      "description": "Menu.Trigger is a wrapper component around the element that triggers or closes a Menu.",
      "type": "component",
      "props": [
        {
          "name": "children",
          "type": "ReactNode",
          "description": "The content that will trigger the Menu. Forward refs to the trigger element",
          "required": true
        }
      ],
      "stories": [
        {
          "name": "Trigger",
          "description": "The trigger must be a single element.\nIf the trigger is a custom component, it must use the\n[forwardRef](https://react.dev/reference/react/forwardRef) pattern.\nFor all event handlers and accessibility features to work properly, the trigger must also spread all `props`.\n\n```tsx\nconst CustomComponent = forwardRef(\n ({foo, bar, ...props}, ref) => {\n return (\n \n ...\n \n );\n },\n);\n```",
          "source": "<Menu>\n        <Menu.Trigger>\n          <Button>Menu trigger</Button>\n        </Menu.Trigger>\n        <Menu.PopoverContent>\n          <ActionList>\n            <ActionList.Item>List item 1</ActionList.Item>\n            <ActionList.Item>List item 2</ActionList.Item>\n            <ActionList.Item>List item 3</ActionList.Item>\n            <ActionList.Item>List item 4</ActionList.Item>\n            <ActionList.Item>List item 5</ActionList.Item>\n          </ActionList>\n        </Menu.PopoverContent>\n      </Menu>"
        }
      ],
      "category": "Components",
      "displayName": "Menu/Menu.Trigger",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Menu/Menu.PopoverContent",
      "slug": "components-menu-menu-popovercontent",
      "description": "Menu.PopoverContent is a wrapper around the content that appears in Menu.",
      "type": "component",
      "props": [
        {
          "name": "children",
          "type": "ReactNode",
          "description": "Specify custom content for the Menu",
          "required": true
        },
        {
          "name": "as",
          "type": "React.ElementType",
          "description": "Specify the HTML element type of a Box",
          "defaultValue": "'div'"
        },
        {
          "name": "p",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify all padding"
        },
        {
          "name": "px",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify before and after padding"
        },
        {
          "name": "py",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify top and bottom padding"
        },
        {
          "name": "pTop",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify top padding"
        },
        {
          "name": "pBottom",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify bottom padding"
        },
        {
          "name": "pBefore",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify before padding"
        },
        {
          "name": "pAfter",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify after padding"
        },
        {
          "name": "gap",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify gap between child elements"
        },
        {
          "name": "overlay",
          "type": "Overlay",
          "description": "Specify if the content should render with an overlay.\nPass `true` for a default dimmed scrim, `'transparent'` for an invisible\nclick-blocking overlay, or a `FloatingOverlayProps` object (e.g. to lock\nscroll or apply custom styling) for full control. Omit or `false` for none.",
          "defaultValue": "false"
        },
        {
          "name": "skipFloatingStyles",
          "type": "boolean",
          "description": "Specify if the content should render with an overlay\nand not be positioned relative to the trigger",
          "defaultValue": "false"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Menu.PopoverContent.",
          "source": "<Menu>\n        <Menu.Trigger>\n          <Button>Menu trigger</Button>\n        </Menu.Trigger>\n        <Menu.PopoverContent>\n          <ActionList>\n            <ActionList.Item>List item 1</ActionList.Item>\n            <ActionList.Item>List item 2</ActionList.Item>\n            <ActionList.Item>List item 3</ActionList.Item>\n            <ActionList.Item>List item 4</ActionList.Item>\n            <ActionList.Item>List item 5</ActionList.Item>\n          </ActionList>\n        </Menu.PopoverContent>\n      </Menu>"
        }
      ],
      "category": "Components",
      "displayName": "Menu/Menu.PopoverContent",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Icon/Logo",
      "slug": "components-icon-logo",
      "description": "Beam provides various logo types to support different areas of the business across Viasat.",
      "type": "component",
      "props": [
        {
          "name": "logo",
          "type": "React.FC<any>",
          "description": "Specify which Logo to display",
          "required": true
        },
        {
          "name": "size",
          "type": "string",
          "description": "Pass maxWidth. The height  will scale proportionally with the width."
        },
        {
          "name": "display",
          "type": "enum",
          "description": "Specify the display property of the Logo",
          "defaultValue": "block"
        },
        {
          "name": "ariaLabel",
          "type": "string",
          "description": "Specify the `aria-label` of the Logo"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the Logo. By default it inherits the theme from the parent"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Logo.",
          "source": "<Box p=\"150\">\n      <Logo {...args} />\n    </Box>"
        },
        {
          "name": "Viasat",
          "description": "Both logo and mark variants are available for use in digital experiences. View [Beam 2 Storybook](https://storybook-beam.vega.viasat.com/?path=/docs/components-logo-viasat--docs) for more details.",
          "source": "<Box style={{ display: 'flex', flexDirection: 'column', gap: bmSemSpace300 }}>\n      <Box>\n        <Text color=\"secondary\" style={{ marginBottom: bmSemSpace75 }}>\n          Logo\n        </Text>\n        <Box style={rowStyle}>\n          <Box p=\"150\" borderRadius={'md'} backgroundColor={'01'} theme={'light'}>\n            <Logo logo={ViasatLogoDefault} size={args.size} />\n          </Box>\n          <Box p=\"150\" borderRadius={'md'} backgroundColor={'01'} theme={'light'}>\n            <Logo logo={ViasatLogoGreen} size={args.size} />\n          </Box>\n          <Box p=\"150\" borderRadius={'md'} backgroundColor={'01'} theme={'light'}>\n            <Logo logo={ViasatLogoGray} size={args.size} />\n          </Box>\n          <Box p=\"150\" backgroundColor=\"01\" borderRadius=\"md\" theme={'dark'}>\n            <Logo logo={ViasatLogoWhite} size={args.size} />\n          </Box>\n        </Box>\n      </Box>\n      <Box>\n        <Text color=\"secondary\" style={{ marginBottom: bmSemSpace75 }}>\n          Mark\n        </Text>\n        <Box style={rowStyle}>\n          <Box p=\"150\" borderRadius={'md'} backgroundColor={'01'} theme={'light'}>\n            <Logo logo={ViasatLogomarkColor} size={'2rem'} />\n          </Box>\n          <Box p=\"150\" borderRadius={'md'} backgroundColor={'01'} theme={'light'}>\n            <Logo logo={ViasatLogomarkGreen} size={'2rem'} />\n          </Box>\n          <Box p=\"150\" borderRadius={'md'} backgroundColor={'01'} theme={'light'}>\n            <Logo logo={ViasatLogomarkGray} size={'2rem'} />\n          </Box>\n          <Box p=\"150\" backgroundColor=\"01\" borderRadius=\"md\" theme=\"dark\">\n            <Logo logo={ViasatLogomarkWhite} size={'2rem'} />\n          </Box>\n        </Box>\n      </Box>\n    </Box>"
        },
        {
          "name": "Inmarsat",
          "description": "Stacked, horizontal, combo, and mark variants are available for use in digital experiences. View [Beam 2 Storybook](https://storybook-beam.vega.viasat.com/?path=/docs/components-logo-inmarsat--docs) for more details.",
          "source": "<Box\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: bmSemSpace400,\n        width: '100%',\n      }}\n    >\n      <Box style={{ display: 'flex', gap: bmSemSpace75, flexDirection: 'column' }}>\n        <Text color=\"secondary\">Stacked</Text>\n        <Box style={rowStyle}>\n          <Box p=\"150\" borderRadius={'md'} backgroundColor={'01'} theme={'light'}>\n            <Logo logo={InmarsatStackedTeal} size={args.size} />\n          </Box>\n          <Box p=\"150\" borderRadius={'md'} backgroundColor={'01'} theme={'light'}>\n            <Logo logo={InmarsatStackedGray} size={args.size} />\n          </Box>\n          <Box p=\"150\" borderRadius={'md'} backgroundColor={'01'} theme={'dark'}>\n            <Logo logo={InmarsatStackedWhite} size={args.size} />\n          </Box>\n        </Box>\n      </Box>\n      <Box style={{ display: 'flex', gap: bmSemSpace75, flexDirection: 'column' }}>\n        <Text color=\"secondary\">Inline</Text>\n        <Box style={rowStyle}>\n          <Box p=\"150\" borderRadius={'md'} backgroundColor={'01'} theme={'light'}>\n            <Logo logo={InmarsatHorizontalTeal} size={'7.25rem'} />\n          </Box>\n          <Box p=\"150\" borderRadius={'md'} backgroundColor={'01'} theme={'light'}>\n            <Logo logo={InmarsatHorizontalGray} size={'7.25rem'} />\n          </Box>\n          <Box p=\"150\" borderRadius={'md'} backgroundColor={'01'} theme={'dark'}>\n            <Logo logo={InmarsatHorizontalWhite} size={'7.25rem'} />\n          </Box>\n        </Box>\n      </Box>\n      <Box style={{ display: 'flex', gap: bmSemSpace75, flexDirection: 'column' }}>\n        <Text color=\"secondary\">Combo</Text>\n        <Box style={rowStyle}>\n          <Box p=\"150\" borderRadius={'md'} backgroundColor={'01'} theme={'light'}>\n            <Logo logo={ComboLogoDefault} size={args.size} />\n          </Box>\n          <Box p=\"150\" borderRadius={'md'} backgroundColor={'01'} theme={'dark'}>\n            <Logo logo={ComboLogoWhite} size={args.size} />\n          </Box>\n        </Box>\n      </Box>\n      <Box style={{ display: 'flex', gap: bmSemSpace75, flexDirection: 'column' }}>\n        <Text color=\"secondary\">Mark</Text>\n        <Box style={rowStyle}>\n          <Box p=\"150\" borderRadius={'md'} backgroundColor={'01'} theme={'light'}>\n            <Logo logo={InmarsatLogoMarkTeal} size={'2rem'} />\n          </Box>\n          <Box p=\"150\" borderRadius={'md'} backgroundColor={'01'} theme={'light'}>\n            <Logo logo={InmarsatLogoMarkGray} size={'2rem'} />\n          </Box>\n          <Box p=\"150\" borderRadius={'md'} backgroundColor={'01'} theme={'dark'}>\n            <Logo logo={InmarsatLogoMarkWhite} size={'2rem'} />\n          </Box>\n        </Box>\n      </Box>\n    </Box>"
        },
        {
          "name": "Payment Methods",
          "description": "Various payment method logos are available in both light and dark mode. View [Beam 2 Storybook](https://storybook-beam.vega.viasat.com/?path=/docs/components-logo-payments--docs) for a complete list.",
          "source": "<Box style={rowStyle}>\n      <Box p=\"150\" borderRadius={'md'} backgroundColor={'01'} theme={'light'}>\n        <Logo logo={ApplePay} size={args.size} />\n      </Box>\n      <Box p=\"150\" backgroundColor=\"01\" borderRadius=\"md\" theme=\"dark\">\n        <Logo logo={ApplePayDark} size={args.size} />\n      </Box>\n    </Box>"
        },
        {
          "name": "Airlines",
          "description": "Various airline logos are available in both light and dark mode. View [Beam 2 Storybook](https://storybook-beam.vega.viasat.com/?path=/docs/components-logo-airlines--docs) for a complete list.",
          "source": "<Box style={rowStyle}>\n      <Box p=\"150\" borderRadius={'md'} backgroundColor={'01'} theme={'light'}>\n        <Logo logo={Delta} size={args.size} />\n      </Box>\n      <Box p=\"150\" backgroundColor=\"01\" borderRadius=\"md\" theme=\"dark\">\n        <Logo logo={DeltaDark} size={args.size} />\n      </Box>\n    </Box>"
        },
        {
          "name": "Banks",
          "description": "Various bank logos are available in both light and dark mode. View [Beam 2 Storybook](https://storybook-beam.vega.viasat.com/?path=/docs/components-logo-banks--docs) for a complete list.",
          "source": "<Box style={rowStyle}>\n      <Box p=\"150\" borderRadius={'md'} backgroundColor={'01'} theme={'light'}>\n        <Logo logo={CapitalOne} size={args.size} />\n      </Box>\n      <Box p=\"150\" backgroundColor=\"01\" borderRadius=\"md\" theme=\"dark\">\n        <Logo logo={CapitalOneDark} size={args.size} />\n      </Box>\n    </Box>"
        },
        {
          "name": "Add A Logo",
          "description": "Reach out in [#beam-help](https://viasat.enterprise.slack.com/archives/C02BEV69HAQ)\nto learn more about making an Logo contribution.",
          "source": "<Box style={rowStyle}>\n      <Box p=\"150\" borderRadius={'md'} backgroundColor={'01'} theme={'light'}>\n        <Logo logo={CreditCard} size={args.size} />\n      </Box>\n      <Box p=\"150\" backgroundColor=\"01\" borderRadius=\"md\" theme=\"dark\">\n        <Logo logo={CreditCardDark} size={args.size} />\n      </Box>\n    </Box>"
        }
      ],
      "category": "Components",
      "displayName": "Icon/Logo",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/List",
      "slug": "components-list",
      "description": "Lists are vertical groupings of related text elements. List items can begin with a number, bullet, icon or come unstyled.\n\nUse [ActionList](?path=/docs/components-actionlist-actionlist--docs) or\n[Accordion](?path=/docs/components-accordion-accordion--docs) for interactive list elements.",
      "type": "component",
      "props": [
        {
          "name": "children",
          "type": "React.ReactNode",
          "description": "Add list items to create a List"
        },
        {
          "name": "kind",
          "type": "'ordered' | 'unordered' | 'unstyled' | 'withIcons'",
          "description": "Specify the kind of List"
        },
        {
          "name": "size",
          "type": "'sm' | 'md' | 'lg' | 'xl'",
          "description": "Specify the size of List",
          "defaultValue": "md"
        },
        {
          "name": "density",
          "type": "'md' | 'lg'",
          "description": "Specify the density of the List",
          "defaultValue": "md"
        },
        {
          "name": "indent",
          "type": "boolean",
          "description": "Specify if the List has an indentation.\n`indent` can only be applied to icon and unstyled lists.",
          "defaultValue": "true"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the List"
        }
      ],
      "subcomponentProps": [
        {
          "name": "List.Item",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "Specify the text for List.Item"
            },
            {
              "name": "icon",
              "type": "React.ReactNode",
              "description": "Specify an Icon for the List.Item"
            }
          ]
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default List.",
          "source": "<List kind={kind} size={size} density={density}>\n      <List.Item>{defaultListText}</List.Item>\n      <List.Item>{defaultListText}</List.Item>\n      <List.Item>{defaultListText}</List.Item>\n      <List.Item>{defaultListText}</List.Item>\n      <List.Item>{defaultListText}</List.Item>\n    </List>"
        },
        {
          "name": "Kind And Size",
          "description": "List supports `ordered`, `unordered`, `unstyled`, and `withIcons` options.\nDefault kind is `ordered`. List supports `sm`, `md`, `lg`, and `xl` sizes. Default size is `md`.",
          "source": "const [size, setSize] = useState<ListSize>('md');\n\n    const handleSizeChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      setSize(e.target.value as ListSize);\n    };\n    return (\n      <>\n        <RadioButtonGroup orientation=\"horizontal\">\n          {listSizes.map(listSize => (\n            <RadioButton\n              key={listSize}\n              type=\"radio\"\n              name=\"size\"\n              value={listSize}\n              label={listSizeText[listSize]}\n              checked={size === listSize}\n              onChange={handleSizeChange}\n            />\n          ))}\n        </RadioButtonGroup>\n        {listKind.map(kind => (\n          <List key={kind} kind={kind as ListKind} size={size}>\n            <List.Item>{listKindText[kind]}</List.Item>\n            <List.Item>{listKindText[kind]}</List.Item>\n            <List.Item>{listKindText[kind]}</List.Item>\n            <List.Item>{listKindText[kind]}</List.Item>\n            <List.Item>{listKindText[kind]}</List.Item>\n          </List>\n        ))}\n      </>\n    );"
        },
        {
          "name": "Nesting",
          "description": "Using more than four levels of nesting is not recommended and should be avoided when possible.",
          "source": "<>\n      {listKind.map(kind => (\n        <List key={kind} kind={kind}>\n          <List.Item>{listKindText[kind]}</List.Item>\n          <List.Item>\n            {listKindText[kind]}\n            <List>\n              <List.Item>{listKindText[kind]}</List.Item>\n              <List.Item>\n                {listKindText[kind]}\n                <List>\n                  <List.Item>{listKindText[kind]}</List.Item>\n                  <List.Item>{listKindText[kind]}</List.Item>\n                </List>\n              </List.Item>\n            </List>\n          </List.Item>\n        </List>\n      ))}\n    </>"
        },
        {
          "name": "Indent",
          "description": "Set `indent` to `false` to better align List with surrounding content. `indent` can only be toggled off for `withIcons` and `unstyled` lists.",
          "source": "<>\n      <List kind=\"withIcons\" indent={false}>\n        <List.Item icon={<Speed />}>List with icons</List.Item>\n        <List.Item icon={<DataUsage />}>List with icons</List.Item>\n        <List.Item icon={<DateRange />}>List with icons</List.Item>\n        <List.Item icon={<Place />}>List with icons</List.Item>\n      </List>\n      <List kind=\"unstyled\" indent={false}>\n        <List.Item>Unstyled list</List.Item>\n        <List.Item>Unstyled list</List.Item>\n        <List.Item>Unstyled list</List.Item>\n        <List.Item>Unstyled list</List.Item>\n      </List>\n    </>"
        },
        {
          "name": "Density",
          "description": "List supports `md` and `lg` density options. Default density is `md`.",
          "source": "const [density, setDensity] = useState<ListDensity>('md');\n\n    const handleDensityChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      setDensity(e.target.value as ListDensity);\n    };\n\n    return (\n      <>\n        <RadioButtonGroup orientation=\"horizontal\">\n          {listDensity.map(densityValue => (\n            <RadioButton\n              key={densityValue}\n              type=\"radio\"\n              name=\"density\"\n              value={densityValue}\n              label={listSizeText[densityValue]}\n              checked={density === densityValue}\n              onChange={handleDensityChange}\n            />\n          ))}\n        </RadioButtonGroup>\n        <List density={density}>\n          <List.Item>{densityListText[density]}</List.Item>\n          <List.Item>{densityListText[density]}</List.Item>\n          <List.Item>{densityListText[density]}</List.Item>\n          <List.Item>{densityListText[density]}</List.Item>\n        </List>\n      </>\n    );"
        },
        {
          "name": "Customize Content",
          "description": "Use color icon tokens, expressive tokens, or custom colors to modify `List.Item` icon colors.\n \n> Raw hex values can also be applied, however they must meet accessibility requirements.",
          "source": "<>\n        <List kind=\"withIcons\" indent={false}>\n          <List.Item icon={<Check color={bmSemColorIconPositive} />}>\n            List with icon\n          </List.Item>\n          <List.Item icon={<Check color={bmSemColorIconPositive} />}>\n            List with icon\n          </List.Item>\n          <List.Item icon={<Check color={bmSemColorIconPositive} />}>\n            List with icon\n          </List.Item>\n          <List.Item icon={<Check color={bmSemColorIconPositive} />}>\n            List with icon\n          </List.Item>\n        </List>\n\n        <List kind=\"withIcons\" indent={false}>\n          <List.Item icon={<Speed color={bmExpressiveColorFg} />}>\n            List with icon\n          </List.Item>\n          <List.Item icon={<DataUsage color={bmExpressiveColorFg} />}>\n            List with icon\n          </List.Item>\n          <List.Item icon={<DateRange color={bmExpressiveColorFg} />}>\n            List with icon\n          </List.Item>\n          <List.Item icon={<Place color={bmExpressiveColorFg} />}>\n            List with icon\n          </List.Item>\n        </List>\n      </>"
        }
      ],
      "category": "Components",
      "displayName": "List",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Link",
      "slug": "components-link",
      "description": "Links are navigational elements that can lead users to other pages, external websites or jump to a section of the current page. They may appear on their own, within a sentence or paragraph, or directly following the content.",
      "type": "component",
      "props": [
        {
          "name": "appearance",
          "type": "'primary' | 'secondary'",
          "description": "Specify the appearance of a Link",
          "defaultValue": "primary"
        },
        {
          "name": "size",
          "type": "'sm' | 'md' | 'lg' | 'xl'",
          "description": "Specify the size of a Link"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if the Link is disabled",
          "defaultValue": "false"
        },
        {
          "name": "iconBefore",
          "type": "ReactNode",
          "description": "Specify if the Link displays icon before the text"
        },
        {
          "name": "iconAfter",
          "type": "ReactNode",
          "description": "Specify if the Link displays icon after the text"
        },
        {
          "name": "bold",
          "type": "boolean",
          "description": "Specify if the Link displays as bold",
          "defaultValue": "false"
        },
        {
          "name": "href",
          "type": "string",
          "description": "Specify the target link for the href attribute",
          "required": true
        },
        {
          "name": "onClick",
          "type": "(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void",
          "description": "Specify a custom onClick handler"
        },
        {
          "name": "hideUnderline",
          "type": "boolean",
          "description": "Specify if Link displays with an underline",
          "defaultValue": "false"
        },
        {
          "name": "children",
          "type": "ReactNode",
          "description": "Provide text for the Link",
          "required": true
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Link.",
          "source": "<Link {...args} />"
        },
        {
          "name": "Hide Underline",
          "description": "Set `hideUnderline` to `true` to display Link without an underline. If a Link is being used within a sentence or paragraph, it’s recommended that the Link remains underlined.",
          "source": "<Link href={href} hideUnderline>\n      {hideUnderlineText}\n    </Link>"
        },
        {
          "name": "Inherit",
          "description": "Link inherits all font properties of its surrounding text by default. `iconBefore` and `iconAfter` will not render when when Link is used inline.",
          "source": "<Text>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis{' '}\n      <Link href={href} iconBefore={<Satellite />} iconAfter={<Satellite />}>\n        nulla neque\n      </Link>\n      , ultrices porttitor sollicitudin tincidunt, rhoncus non neque. Aenean at enim\n      mollis lacus ultricies aliquet non: quis elit.\n    </Text>"
        },
        {
          "name": "Size",
          "description": "Link supports `sm`, `md`, `lg`, and `xl`. When `size` is `undefined`, the default Link will inherit the size of its surrounding text.",
          "source": "<div\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        width: '30rem',\n        justifyContent: 'space-between',\n      }}\n    >\n      {linkSizeStory.map(set => {\n        return (\n          <Link\n            key={set.size}\n            iconBefore={<Satellite />}\n            size={set.size}\n            href={href}\n          >\n            {set.text}\n          </Link>\n        );\n      })}\n    </div>"
        },
        {
          "name": "Appearance",
          "description": "Link supports `primary` and `secondary` appearance. Default appearance is `primary`.",
          "source": "<>\n      {linkAppearance.map(appearance => (\n        <Link key={appearance} appearance={appearance} href={href}>\n          {appearanceText}\n        </Link>\n      ))}\n    </>"
        },
        {
          "name": "Bold",
          "description": "Set `bold` to `true` to display a bold link.",
          "source": "<>\n      <Link bold={true} href={href}>\n        {defaultText}\n      </Link>\n      <Link bold={true} href={href} iconBefore={<Satellite />} size=\"md\">\n        {defaultText}\n      </Link>\n    </>"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` to display Link in a disabled state.",
          "source": "<Link disabled={true} href={href}>\n      {' '}\n      {disabledText}\n    </Link>"
        },
        {
          "name": "With Icon",
          "description": "Passing an Icon to `iconBefore` or `iconAfter` to display an Icon on either side of the Link.",
          "source": "<>\n      <Link iconBefore={<Satellite />} size={'md'} href={href}>\n        {withIconText.beforeIcon}\n      </Link>\n      <Link iconAfter={<Satellite />} size={'md'} href={href}>\n        {withIconText.afterIcon}\n      </Link>\n    </>"
        }
      ],
      "category": "Components",
      "displayName": "Link",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Label",
      "slug": "components-label",
      "description": "A Label is a caption for form components such as inputs, checkboxes,\nradio and switch.",
      "type": "component",
      "props": [
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if the Label displays disabled",
          "defaultValue": "false"
        },
        {
          "name": "required",
          "type": "boolean",
          "description": "Specify if the Label displays as required",
          "defaultValue": "false"
        },
        {
          "name": "optional",
          "type": "ReactNode",
          "description": "Specify if the Label displays as optional"
        },
        {
          "name": "children",
          "type": "ReactNode",
          "description": "Specify the text for Label"
        },
        {
          "name": "tooltip",
          "type": "ReactElement<any, string | JSXElementConstructor<any>>",
          "description": "Specify if the icon displays to add a Tooltip"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the Label. By default it inherits the theme from the parent"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Label.",
          "source": "<Label {...args} />"
        },
        {
          "name": "Required",
          "description": "Set `required` to `true` to add an asterisk (*) to the Label for a\nrequired form input. Do not mix `required` and `optional` markers\nin the same form set.",
          "source": "<Label required>Required Label</Label>"
        },
        {
          "name": "Optional",
          "description": "Use `optional` to show that a form input is not required. Do not mix\n`required` and `optional` markers in the same form set.",
          "source": "<Label optional=\"(optional)\">Optional label</Label>"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` to disable the Label.",
          "source": "<Label disabled>Disabled label</Label>"
        },
        {
          "name": "With Tooltip",
          "description": "Use `tooltip` to add a `ToolTip` to the Label. Use `toggle` to display\n`ToolTip` as a toggle control.",
          "source": "<Label tooltip={tooltip}>Label with Tooltip</Label>"
        },
        {
          "name": "Custom Content",
          "description": "Use `children` to customize Label font attributes.",
          "source": "<>\n        <Label>\n          <Text kind=\"body-lg\">Label with custom font size and weight</Text>\n        </Label>\n        <Label tooltip={tooltip}>\n          <Text kind=\"body-xl\">Label with custom font size and weight</Text>\n        </Label>\n        <Label required tooltip={tooltip}>\n          <Text kind=\"label-lg\">Label with custom font size and weight</Text>\n        </Label>\n        <Label tooltip={tooltip} optional={<Text kind=\"body-xl\">(optional)</Text>}>\n          <Text kind=\"label-xl\">Label with custom font size and weight</Text>\n        </Label>\n      </>"
        }
      ],
      "category": "Components",
      "displayName": "Label",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Forms/Switch/SwitchGroup",
      "slug": "forms-switch-switchgroup",
      "description": "SwitchGroup serves as a grouping of simple on/off toggles, allowing users to apply immediate decisions.",
      "type": "component",
      "props": [
        {
          "name": "helperText",
          "type": "Nullable<ReactElement<any, string | JSXElementConstructor<any>>>",
          "description": "Add a HelperText to a group"
        },
        {
          "name": "orientation",
          "type": "'horizontal' | 'vertical'",
          "description": "Specify an orientation preference for the group",
          "defaultValue": "'vertical'"
        },
        {
          "name": "fluid",
          "type": "boolean",
          "description": "Specify if the group should take the full width of its container",
          "defaultValue": "false"
        },
        {
          "name": "layout",
          "type": "'horizontal' | 'vertical' | 'horizontalFluid'",
          "description": "Specify an orientation preference for the group\n@deprecated use `orientation` and `fluid` instead",
          "defaultValue": "'vertical'"
        },
        {
          "name": "required",
          "type": "boolean",
          "description": "Specify if group is a required input",
          "defaultValue": "false"
        },
        {
          "name": "hideRequiredMarker",
          "type": "boolean",
          "description": "Specify if the group displays with an asterisk",
          "defaultValue": "false"
        },
        {
          "name": "label",
          "type": "Nullable<ReactElement<any, string | JSXElementConstructor<any>>>",
          "description": "Add a Label to a group"
        },
        {
          "name": "error",
          "type": "string | boolean",
          "description": "Specify error text and display error state of a group"
        },
        {
          "name": "readOnly",
          "type": "boolean",
          "description": "Specify if a group displays in a read-only state",
          "defaultValue": "false"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if a group displays in a disabled state",
          "defaultValue": "false"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the group. By default it inherits the theme from the parent"
        },
        {
          "name": "validationRules",
          "type": "FormValidator[]",
          "description": "Specify form validation rules for group"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default SwitchGroup.",
          "source": "<SwitchGroup name=\"default\" {...args}>\n        <Switch id=\"default-1\" onText=\"Switch Text\" />\n        <Switch id=\"default-2\" onText=\"Switch Text\" />\n        <Switch id=\"default-3\" onText=\"Switch Text\" />\n      </SwitchGroup>"
        },
        {
          "name": "Top Label",
          "description": "Displaying top `label` is optional. SwitchGroup will display without a top label if no content is passed.",
          "source": "<SwitchGroup name=\"default\" {...args}>\n        <Switch id=\"label-1\" onText=\"Switch Text\" />\n        <Switch id=\"label-2\" onText=\"Switch Text\" />\n        <Switch id=\"label-3\" onText=\"Switch Text\" />\n      </SwitchGroup>"
        },
        {
          "name": "With Helper Text",
          "description": "Displaying `helperText` is optional. SwitchGroup will display HelperText if children is passed to `helperText`.",
          "source": "<SwitchGroup\n        name=\"with-helper-text\"\n        label={<Label>Label</Label>}\n        helperText={<HelperText>Helper text</HelperText>}\n      >\n        <Switch id=\"ht-1\" onText=\"Switch Text\" />\n        <Switch id=\"ht-2\" onText=\"Switch Text\" />\n        <Switch id=\"ht-3\" onText=\"Switch Text\" />\n      </SwitchGroup>"
        },
        {
          "name": "Read Only",
          "description": "Set `readOnly` to `true` to display SwitchGroup in a read only state.",
          "source": "<SwitchGroup\n        readOnly\n        name=\"read-only-on\"\n        label={<Label>Label</Label>}\n        helperText={<HelperText>Helper text</HelperText>}\n      >\n        <Switch id=\"ro-off\" onText=\"Switch Text\" />\n        <Switch id=\"ro-on\" defaultChecked onText=\"Switch Text\" />\n        <Switch id=\"ro-off-two\" onText=\"Switch Text\" />\n      </SwitchGroup>"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` to display SwitchGroup in a disabled state.",
          "source": "<SwitchGroup\n        disabled\n        name=\"disabled-on\"\n        label={<Label>Label</Label>}\n        helperText={<HelperText>Helper text</HelperText>}\n      >\n        <Switch id=\"dis-off\" onText=\"Switch Text\" />\n        <Switch id=\"dis-on\" defaultChecked onText=\"Switch Text\" />\n        <Switch id=\"dis-off-two\" onText=\"Switch Text\" />\n      </SwitchGroup>"
        }
      ],
      "category": "Forms",
      "displayName": "Switch/SwitchGroup",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Forms/RadioButton/RadioButtonGroup",
      "slug": "forms-radiobutton-radiobuttongroup",
      "description": "Used when there are a list of related options where the user may select\na single item. Each option item in the list is mutually exclusive of all\nother option items.",
      "type": "component",
      "props": [
        {
          "name": "helperText",
          "type": "Nullable<ReactElement<any, string | JSXElementConstructor<any>>>",
          "description": "Add a HelperText to a group"
        },
        {
          "name": "orientation",
          "type": "'horizontal' | 'vertical'",
          "description": "Specify an orientation preference for the group",
          "defaultValue": "'vertical'"
        },
        {
          "name": "fluid",
          "type": "boolean",
          "description": "Specify if the group should take the full width of its container",
          "defaultValue": "false"
        },
        {
          "name": "layout",
          "type": "'horizontal' | 'vertical' | 'horizontalFluid'",
          "description": "Specify an orientation preference for the group\n@deprecated use `orientation` and `fluid` instead",
          "defaultValue": "'vertical'"
        },
        {
          "name": "required",
          "type": "boolean",
          "description": "Specify if group is a required input",
          "defaultValue": "false"
        },
        {
          "name": "hideRequiredMarker",
          "type": "boolean",
          "description": "Specify if the group displays with an asterisk",
          "defaultValue": "false"
        },
        {
          "name": "label",
          "type": "Nullable<ReactElement<any, string | JSXElementConstructor<any>>>",
          "description": "Add a Label to a group"
        },
        {
          "name": "error",
          "type": "string | boolean",
          "description": "Specify error text and display error state of a group"
        },
        {
          "name": "readOnly",
          "type": "boolean",
          "description": "Specify if a group displays in a read-only state",
          "defaultValue": "false"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if a group displays in a disabled state",
          "defaultValue": "false"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the group. By default it inherits the theme from the parent"
        },
        {
          "name": "validationRules",
          "type": "FormValidator[]",
          "description": "Specify form validation rules for group"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default RadioButtonGroup.",
          "source": "<RadioButtonGroup name=\"default\" label={<Label>Label</Label>} {...args}>\n        <RadioButton id=\"default-1\" value=\"default-1\" label=\"Radio button label\" />\n        <RadioButton id=\"default-2\" value=\"default-2\" label=\"Radio button label\" />\n        <RadioButton id=\"default-3\" value=\"default-3\" label=\"Radio button label\" />\n      </RadioButtonGroup>"
        },
        {
          "name": "Orientation",
          "description": "RadioButtonGroup offers `vertical` and `horizontal` options.\nDefault orientation is `vertical`.",
          "source": "<div\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: bmSemSpace500,\n        }}\n      >\n        <RadioButtonGroup name=\"vertical\" label={<Label>Vertical</Label>}>\n          <RadioButton id=\"v-1\" value=\"v-1\" label=\"Radio button label\" />\n          <RadioButton id=\"v-2\" value=\"v-2\" label=\"Radio button label\" />\n          <RadioButton id=\"v-3\" value=\"v-3\" label=\"Radio button label\" />\n        </RadioButtonGroup>\n        <RadioButtonGroup\n          name=\"horizontal\"\n          orientation=\"horizontal\"\n          label={<Label>Horizontal</Label>}\n        >\n          <RadioButton id=\"h-1\" value=\"h-1\" label=\"Radio button label\" />\n          <RadioButton id=\"h-2\" value=\"h-2\" label=\"Radio button label\" />\n          <RadioButton id=\"h-3\" value=\"h-3\" label=\"Radio button label\" />\n        </RadioButtonGroup>\n      </div>"
        },
        {
          "name": "Fluid",
          "description": "Set `fluid` to `true` to display a `horizontal` group the full width of its parent container.",
          "source": "<RadioButtonGroup\n        name=\"horizontal\"\n        orientation=\"horizontal\"\n        fluid\n        label={<Label>Horizontal fluid</Label>}\n      >\n        <RadioButton id=\"h-1\" value=\"h-1\" label=\"Radio button label\" />\n        <RadioButton id=\"h-2\" value=\"h-2\" label=\"Radio button label\" />\n        <RadioButton id=\"h-3\" value=\"h-3\" label=\"Radio button label\" />\n      </RadioButtonGroup>"
        },
        {
          "name": "With Helper Text",
          "description": "Displaying `HelperText` is optional. RadioButtonGroup will display with\n`HelperText` if passed as a prop.",
          "source": "<RadioButtonGroup\n        name=\"with-helper-text\"\n        label={<Label>Label</Label>}\n        helperText={<HelperText>Helper text</HelperText>}\n      >\n        <RadioButton id=\"ht-1\" value=\"ht-1\" label=\"Radio button label\" />\n        <RadioButton id=\"ht-2\" value=\"ht-2\" label=\"Radio button label\" />\n        <RadioButton id=\"ht-3\" value=\"ht-3\" label=\"Radio button label\" />\n      </RadioButtonGroup>"
        },
        {
          "name": "Required",
          "description": "Set `required` to `true` to make RadioButtonGroup a required input.\nSet `hideRequiredMarker` to `true` to remove the asterisk (*).",
          "source": "<div\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: bmSemSpace500,\n        }}\n      >\n        <RadioButtonGroup\n          required\n          name=\"with-required-marker\"\n          label={<Label>With required marker</Label>}\n        >\n          <RadioButton id=\"with-rm-1\" value=\"with-rm-1\" label=\"Radio button label\" />\n          <RadioButton id=\"with-rm-2\" value=\"with-rm-2\" label=\"Radio button label\" />\n          <RadioButton id=\"with-rm-3\" value=\"with-rm-3\" label=\"Radio button label\" />\n        </RadioButtonGroup>\n        <RadioButtonGroup\n          required\n          hideRequiredMarker\n          name=\"without-required-marker\"\n          label={<Label>Without required marker</Label>}\n        >\n          <RadioButton id=\"no-rm-1\" value=\"no-rm-1\" label=\"Radio button label\" />\n          <RadioButton id=\"no-rm-2\" value=\"no-rm-2\" label=\"Radio button label\" />\n          <RadioButton id=\"no-rm-3\" value=\"no-rm-3\" label=\"Radio button label\" />\n        </RadioButtonGroup>\n      </div>"
        },
        {
          "name": "Optional",
          "description": "Pass `optional` to `Label` to show that a RadioButtonGroup is optional.\nDo not mix required and optional markers in the same form set.",
          "source": "<RadioButtonGroup\n        name=\"optional\"\n        label={<Label optional=\"(optional)\">Label</Label>}\n      >\n        <RadioButton id=\"opt-1\" value=\"opt-1\" label=\"Radio button label\" />\n        <RadioButton id=\"opt-2\" value=\"opt-2\" label=\"Radio button label\" />\n        <RadioButton id=\"opt-3\" value=\"opt-3\" label=\"Radio button label\" />\n      </RadioButtonGroup>"
        },
        {
          "name": "Error",
          "description": "Use `error` to specify `HelperText` text and display RadioButtonGroup\nin an error state.",
          "source": "<RadioButtonGroup\n        name=\"error\"\n        error=\"Helper text\"\n        label={<Label>Label</Label>}\n      >\n        <RadioButton id=\"err-1\" value=\"err-1\" label=\"Radio button label\" />\n        <RadioButton id=\"err-2\" value=\"err-2\" label=\"Radio button label\" />\n        <RadioButton id=\"err-3\" value=\"err-3\" label=\"Radio button label\" />\n      </RadioButtonGroup>"
        },
        {
          "name": "Read Only",
          "description": "Set `readOnly` to `true` to display RadioButtonGroup in a read-only state.",
          "source": "<RadioButtonGroup\n        readOnly\n        name=\"read-only\"\n        label={<Label>Label</Label>}\n        helperText={<HelperText>Helper text</HelperText>}\n      >\n        <RadioButton id=\"r-o-1\" value=\"r-o-1\" label=\"Radio button label\" />\n        <RadioButton\n          id=\"r-o-2\"\n          value=\"r-o-2\"\n          defaultChecked\n          label=\"Radio button label\"\n        />\n        <RadioButton id=\"r-o-3\" value=\"r-o-3\" label=\"Radio button label\" />\n      </RadioButtonGroup>"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` to display RadioButtonGroup in a disabled state.",
          "source": "<RadioButtonGroup\n        disabled\n        name=\"disabled\"\n        label={<Label>Label</Label>}\n        helperText={<HelperText>Helper text</HelperText>}\n      >\n        <RadioButton id=\"dis-1\" value=\"dis-1\" label=\"Radio button label\" />\n        <RadioButton\n          id=\"dis-2\"\n          value=\"dis-2\"\n          defaultChecked\n          label=\"Radio button label\"\n        />\n        <RadioButton id=\"dis-3\" value=\"dis-3\" label=\"Radio button label\" />\n      </RadioButtonGroup>"
        },
        {
          "name": "Custom Content",
          "description": "Use Label to customize [Label](/docs/components-label--docs) font attributes.",
          "source": "<RadioButtonGroup\n        name=\"custom-content\"\n        label={\n          <Label>\n            <Text bold>Label with custom font size and weight</Text>\n          </Label>\n        }\n      >\n        <RadioButton id=\"cc-1\" value=\"cc-1\" label=\"Radio button label\" />\n        <RadioButton id=\"cc-2\" value=\"cc-2\" label=\"Radio button label\" />\n        <RadioButton id=\"cc-3\" value=\"cc-3\" label=\"Radio button label\" />\n      </RadioButtonGroup>"
        }
      ],
      "category": "Forms",
      "displayName": "RadioButton/RadioButtonGroup",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Forms/Checkbox/CheckboxGroup",
      "slug": "forms-checkbox-checkboxgroup",
      "description": "Used when there are a list of related options where the user may select any number of choices (including zero).",
      "type": "component",
      "props": [
        {
          "name": "helperText",
          "type": "Nullable<ReactElement<any, string | JSXElementConstructor<any>>>",
          "description": "Add a HelperText to a group"
        },
        {
          "name": "orientation",
          "type": "'horizontal' | 'vertical'",
          "description": "Specify an orientation preference for the group",
          "defaultValue": "'vertical'"
        },
        {
          "name": "fluid",
          "type": "boolean",
          "description": "Specify if the group should take the full width of its container",
          "defaultValue": "false"
        },
        {
          "name": "layout",
          "type": "'horizontal' | 'vertical' | 'horizontalFluid'",
          "description": "Specify an orientation preference for the group\n@deprecated use `orientation` and `fluid` instead",
          "defaultValue": "'vertical'"
        },
        {
          "name": "required",
          "type": "boolean",
          "description": "Specify if group is a required input",
          "defaultValue": "false"
        },
        {
          "name": "hideRequiredMarker",
          "type": "boolean",
          "description": "Specify if the group displays with an asterisk",
          "defaultValue": "false"
        },
        {
          "name": "label",
          "type": "Nullable<ReactElement<any, string | JSXElementConstructor<any>>>",
          "description": "Add a Label to a group"
        },
        {
          "name": "error",
          "type": "string | boolean",
          "description": "Specify error text and display error state of a group"
        },
        {
          "name": "readOnly",
          "type": "boolean",
          "description": "Specify if a group displays in a read-only state",
          "defaultValue": "false"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if a group displays in a disabled state",
          "defaultValue": "false"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the group. By default it inherits the theme from the parent"
        },
        {
          "name": "validationRules",
          "type": "FormValidator[]",
          "description": "Specify form validation rules for group"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default CheckboxGroup.",
          "source": "<CheckboxGroup name=\"default\" label={<Label>Label</Label>} {...args}>\n        <Checkbox id=\"default-1\" value=\"default-1\" label=\"Checkbox label\" />\n        <Checkbox id=\"default-2\" value=\"default-2\" label=\"Checkbox label\" />\n        <Checkbox id=\"default-3\" value=\"default-3\" label=\"Checkbox label\" />\n      </CheckboxGroup>"
        },
        {
          "name": "Orientation",
          "description": "CheckboxGroup offers `vertical` and `horizontal` options.\nDefault orientation is `vertical`.",
          "source": "<div\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: bmSemSpace500,\n        }}\n      >\n        <CheckboxGroup name=\"vertical\" label={<Label>Vertical</Label>}>\n          <Checkbox id=\"v-1\" value=\"v-1\" label=\"Checkbox label\" />\n          <Checkbox id=\"v-2\" value=\"v-2\" label=\"Checkbox label\" />\n          <Checkbox id=\"v-3\" value=\"v-3\" label=\"Checkbox label\" />\n        </CheckboxGroup>\n        <CheckboxGroup\n          name=\"horizontal\"\n          orientation=\"horizontal\"\n          label={<Label>Horizontal</Label>}\n        >\n          <Checkbox id=\"h-1\" value=\"h-1\" label=\"Checkbox label\" />\n          <Checkbox id=\"h-2\" value=\"h-2\" label=\"Checkbox label\" />\n          <Checkbox id=\"h-3\" value=\"h-3\" label=\"Checkbox label\" />\n        </CheckboxGroup>\n      </div>"
        },
        {
          "name": "Fluid",
          "description": "Set `fluid` to `true` to display a `horizontal` group the full width of its parent container.",
          "source": "<CheckboxGroup\n        name=\"horizontal-fluid\"\n        orientation=\"horizontal\"\n        fluid\n        label={<Label>Horizontal fluid</Label>}\n      >\n        <Checkbox id=\"hf-1\" value=\"hf-1\" label=\"Checkbox label\" />\n        <Checkbox id=\"hf-2\" value=\"hf-2\" label=\"Checkbox label\" />\n        <Checkbox id=\"hf-3\" value=\"hf-3\" label=\"Checkbox label\" />\n      </CheckboxGroup>"
        },
        {
          "name": "With Helper Text",
          "description": "Displaying `HelperText` is optional. CheckboxGroup will display with\n`HelperText` if passed as a prop.",
          "source": "<CheckboxGroup\n        name=\"with-helper-text\"\n        label={<Label>Label</Label>}\n        helperText={<HelperText>Helper text</HelperText>}\n      >\n        <Checkbox id=\"ht-1\" value=\"ht-1\" label=\"Checkbox label\" />\n        <Checkbox id=\"ht-2\" value=\"ht-2\" label=\"Checkbox label\" />\n        <Checkbox id=\"ht-3\" value=\"ht-3\" label=\"Checkbox label\" />\n      </CheckboxGroup>"
        },
        {
          "name": "Required",
          "description": "Set `required` to `true` to make CheckboxGroup a required input.\nSet `hideRequiredMarker` to `true` to remove the asterisk (*).",
          "source": "<div\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: bmSemSpace500,\n        }}\n      >\n        <CheckboxGroup\n          required\n          name=\"with-required-marker\"\n          label={<Label>With required marker</Label>}\n        >\n          <Checkbox id=\"with-rm-1\" value=\"with-rm-1\" label=\"Checkbox label\" />\n          <Checkbox id=\"with-rm-2\" value=\"with-rm-2\" label=\"Checkbox label\" />\n          <Checkbox id=\"with-rm-3\" value=\"with-rm-3\" label=\"Checkbox label\" />\n        </CheckboxGroup>\n        <CheckboxGroup\n          required\n          hideRequiredMarker\n          name=\"without-required-marker\"\n          label={<Label>Without required marker</Label>}\n        >\n          <Checkbox id=\"no-rm-1\" value=\"no-rm-1\" label=\"Checkbox label\" />\n          <Checkbox id=\"no-rm-2\" value=\"no-rm-2\" label=\"Checkbox label\" />\n          <Checkbox id=\"no-rm-3\" value=\"no-rm-3\" label=\"Checkbox label\" />\n        </CheckboxGroup>\n      </div>"
        },
        {
          "name": "Optional",
          "description": "Pass `optional` to `Label` to show that a CheckboxGroup is optional.\nDo not mix required and optional markers in the same form set.",
          "source": "<CheckboxGroup\n        name=\"optional\"\n        label={<Label optional=\"(optional)\">Label</Label>}\n      >\n        <Checkbox id=\"opt-1\" value=\"opt-1\" label=\"Checkbox label\" />\n        <Checkbox id=\"opt-2\" value=\"opt-2\" label=\"Checkbox label\" />\n        <Checkbox id=\"opt-3\" value=\"opt-3\" label=\"Checkbox label\" />\n      </CheckboxGroup>"
        },
        {
          "name": "Error",
          "description": "Use `error` to specify `HelperText` text and display CheckboxGroup\nin an error state.",
          "source": "<CheckboxGroup name=\"error\" error=\"Helper text\" label={<Label>Label</Label>}>\n        <Checkbox id=\"err-1\" value=\"err-1\" label=\"Checkbox label\" />\n        <Checkbox id=\"err-2\" value=\"err-2\" label=\"Checkbox label\" />\n        <Checkbox id=\"err-3\" value=\"err-3\" label=\"Checkbox label\" />\n      </CheckboxGroup>"
        },
        {
          "name": "Read Only",
          "description": "Set `readOnly` to `true` to display CheckboxGroup in a read-only state.",
          "source": "<CheckboxGroup\n        readOnly\n        name=\"read-only\"\n        label={<Label>Label</Label>}\n        helperText={<HelperText>Helper text</HelperText>}\n      >\n        <Checkbox id=\"r-o-1\" value=\"r-o-1\" label=\"Checkbox label\" />\n        <Checkbox id=\"r-o-2\" value=\"r-o-2\" defaultChecked label=\"Checkbox label\" />\n        <Checkbox id=\"r-o-3\" value=\"r-o-3\" label=\"Checkbox label\" />\n      </CheckboxGroup>"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` to display CheckboxGroup in a disabled state.",
          "source": "<CheckboxGroup\n        disabled\n        name=\"disabled\"\n        label={<Label>Label</Label>}\n        helperText={<HelperText>Helper text</HelperText>}\n      >\n        <Checkbox id=\"dis-1\" value=\"dis-1\" label=\"Checkbox label\" />\n        <Checkbox id=\"dis-2\" value=\"dis-2\" defaultChecked label=\"Checkbox label\" />\n        <Checkbox id=\"dis-3\" value=\"dis-3\" label=\"Checkbox label\" />\n      </CheckboxGroup>"
        },
        {
          "name": "Without Label",
          "description": "Displaying the `Label` is optional. CheckboxGroup will display without Label if\n`children` is not passed to `label`.",
          "source": "<CheckboxGroup name=\"without-label\">\n        <Checkbox\n          id=\"without\"\n          value=\"without\"\n          label=\"You must agree to our terms before you continue\"\n        />\n      </CheckboxGroup>"
        },
        {
          "name": "Custom Content",
          "description": "Use Label to customize [Label](/docs/components-label--docs) font attributes.",
          "source": "<CheckboxGroup name=\"custom-content\" label={<Label>{customLabel}</Label>}>\n        <Checkbox id=\"cc-1\" value=\"cc-1\" label=\"Checkbox label\" />\n        <Checkbox id=\"cc-2\" value=\"cc-2\" label=\"Checkbox label\" />\n        <Checkbox id=\"cc-3\" value=\"cc-3\" label=\"Checkbox label\" />\n      </CheckboxGroup>"
        }
      ],
      "category": "Forms",
      "displayName": "Checkbox/CheckboxGroup",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Icon/Icon",
      "slug": "components-icon-icon",
      "description": "Icons help convey meaning to actions and concepts within a digital experience. They should be easy to understand and recognizable.",
      "type": "component",
      "props": [
        {
          "name": "icon",
          "type": "React.FC<any>",
          "description": "Specify which icon to display",
          "required": true
        },
        {
          "name": "color",
          "type": "'primary' | 'secondary' | 'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative' | 'secondaryInverse' | 'positiveStrong' | 'warningStrong' | 'negativeStrong' | 'infoPrimaryStrong' | 'infoSecondaryStrong' | 'primaryInverse'",
          "description": "Specify the color of Icon"
        },
        {
          "name": "size",
          "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
          "description": "Specify the size of Icon",
          "defaultValue": "md"
        },
        {
          "name": "customIconSize",
          "type": "string | number",
          "description": "Specify a custom size for the Icon"
        },
        {
          "name": "customIconColor",
          "type": "string",
          "description": "Specify a custom color for the Icon"
        },
        {
          "name": "ariaLabel",
          "type": "string",
          "description": "Specify the `aria-label` of the Icon"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the Icon. By default it inherits the theme from the parent"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Icon. View [Beam 2 Storybook](https://storybook-beam.vega.viasat.com/?path=/story/components-icon--all-variants) for a complete list.",
          "source": "<Icon {...args} />"
        },
        {
          "name": "Color",
          "description": "Icon supports `primary`, `secondary`, `positive`, `warning`, `negative`, `infoPrimary`, `infoSecondary`,\n`positiveStrong`, `warningStrong`, `negativeStrong`, `infoPrimaryStrong`, `infoSecondaryStrong`,\n`selected`, `primaryInverse`, `secondaryInverse` color. Default color is inherited from the parent.",
          "source": "const wrapperStyle = {\n      padding: bmSemSpace25,\n      backgroundColor: bmSemColorSurfaceInverse,\n      borderRadius: bmSemRadiusSm,\n    };\n\n    return (\n      <>\n        <Icon icon={Satellite} color=\"primary\" size=\"lg\" />\n        <Icon icon={Satellite} color=\"secondary\" size=\"lg\" />\n        <Icon icon={CheckCircle} color=\"positive\" size=\"lg\" />\n        <Icon icon={Warning} color=\"warning\" size=\"lg\" />\n        <Icon icon={Error} color=\"negative\" size=\"lg\" />\n        <Icon icon={Info} color=\"infoPrimary\" size=\"lg\" />\n        <Icon icon={Info} color=\"infoSecondary\" size=\"lg\" />\n        <Icon icon={CheckCircle} color=\"positiveStrong\" size=\"lg\" />\n        <Icon icon={Warning} color=\"warningStrong\" size=\"lg\" />\n        <Icon icon={Error} color=\"negativeStrong\" size=\"lg\" />\n        <Icon icon={Info} color=\"infoPrimaryStrong\" size=\"lg\" />\n        <Icon icon={Info} color=\"infoSecondaryStrong\" size=\"lg\" />\n        <div style={wrapperStyle}>\n          <Icon icon={Satellite} color=\"primaryInverse\" size=\"lg\" />\n        </div>\n        <div style={wrapperStyle}>\n          <Icon icon={Satellite} color=\"secondaryInverse\" size=\"lg\" />\n        </div>\n      </>\n    );"
        },
        {
          "name": "Size",
          "description": "Icon supports `xs`, `sm`, `md`, `lg`, and `xl` sizes. Default size is `md`.\n\n> Do not use `size` for Illustrative Icons. Use `customIconSize` instead.",
          "source": "<>\n      {iconSizes.map(size => (\n        <Icon key={size} icon={Satellite} size={size} color=\"primary\" />\n      ))}\n    </>"
        },
        {
          "name": "Custom Size",
          "description": "Custom sizes can be passed to the Icon using `customIconSize`. Icons should be sized proportionally using Beam's 8px spacing system (dimensions should be divisible by 4).",
          "source": "<div style={{ display: 'flex', alignItems: 'center', gap: bmSemSpace300 }}>\n      <div style={{ display: 'flex', alignItems: 'center', gap: bmSemSpace75 }}>\n        <Icon\n          icon={Satellite}\n          customIconSize={smallCustomIconSize}\n          color=\"primary\"\n        />\n        <Text kind=\"body-md\" color=\"secondary\">\n          {' '}\n          32px by 32px{' '}\n        </Text>\n      </div>\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          gap: bmSemSpace75,\n        }}\n      >\n        <Icon icon={Satellite} customIconSize={bigCustomIconSize} color=\"primary\" />\n        <Text kind=\"body-md\" color=\"secondary\">\n          {' '}\n          44px by 44px{' '}\n        </Text>\n      </div>\n    </div>"
        },
        {
          "name": "Appearance",
          "description": "Icon provides two Material Icon appearances: Filled and Outlined",
          "source": "<div style={{ display: 'flex', alignItems: 'center', gap: bmSemSpace300 }}>\n      <div style={{ display: 'flex', alignItems: 'center', gap: bmSemSpace75 }}>\n        <Icon icon={Warning} color=\"primary\" />\n        <Text kind=\"body-md\" color=\"secondary\">\n          Warning\n        </Text>\n      </div>\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          gap: bmSemSpace75,\n        }}\n      >\n        <Icon icon={WarningOutlined} color=\"primary\" />\n        <Text kind=\"body-md\" color=\"secondary\">\n          WarningOutlined\n        </Text>\n      </div>\n    </div>"
        },
        {
          "name": "Illustrative Icons",
          "description": "Use Illustrative Icons to add visual flair to an interface. Do not use Illustrative Icons for smaller interactions, such as navigation. `size` is not available for Illustrative Icons, use `customIconSize` instead. [View Beam 2 Storybook](https://storybook-beam.vega.viasat.com/?path=/story/components-illustrativeicon--all-variants) for a complete list.\n\n> Using Illustrative Icons below 48px (3rem) is not recommended. All Illustrative Icons are available as outline only.",
          "source": "<Icon icon={World} color=\"primary\" customIconSize=\"5rem\" />"
        },
        {
          "name": "Custom Color",
          "description": "Expressive tokens or custom colors can be passed to the Icon using `customIconColor`, however new custom values must meet accessibility requirements.",
          "source": "<>\n        <Icon\n          {...args}\n          className=\"bm-expressive-one\"\n          customIconColor={bmExpressiveColorFg}\n          icon={Satellite}\n        />\n        <Icon {...args} customIconColor={customIconColorRed} icon={Satellite} />\n      </>"
        },
        {
          "name": "Add An Icon",
          "description": "Reach out in [#beam-help](https://viasat.enterprise.slack.com/archives/C02BEV69HAQ)\n to learn more about making an icon contribution.",
          "source": "<div style={{ display: 'flex', alignItems: 'center', gap: bmSemSpace300 }}>\n      <Icon icon={Antijammer} color=\"primary\" />\n      <Icon icon={Ship} color=\"primary\" customIconSize=\"5rem\" />\n    </div>"
        }
      ],
      "category": "Components",
      "displayName": "Icon/Icon",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/HelperText",
      "slug": "components-helpertext",
      "description": "HelperText provides additional guidance about an input and can also be\nused as a standalone element outside of forms. It can denote several types of\nmessaging such as providing additional context, warnings, or validation.",
      "type": "component",
      "props": [
        {
          "name": "appearance",
          "type": "'positive' | 'warning' | 'negative' | 'info'",
          "description": "Specify the appearance of the HelperText",
          "defaultValue": "info"
        },
        {
          "name": "size",
          "type": "'sm' | 'md'",
          "description": "Specify the size of the HelperText",
          "defaultValue": "sm"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if the message is disabled for HelpText",
          "defaultValue": "false"
        },
        {
          "name": "hideIcon",
          "type": "boolean",
          "description": "Specify if the icon displays on the HelperText",
          "defaultValue": "false"
        },
        {
          "name": "icon",
          "type": "ReactElement<any, string | JSXElementConstructor<any>>",
          "description": "Specify a different icon for the HelperText"
        },
        {
          "name": "children",
          "type": "ReactNode",
          "description": "Add or customize content in the HelperText"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the HelperText. By default it inherits the theme from the parent"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default HelperText.",
          "source": "<HelperText {...args} />"
        },
        {
          "name": "Appearance",
          "description": "HelperText supports `info`, `positive`, `warning`, and `negative` appearance.\nDefault appearance is `info`.",
          "source": "<>\n        <HelperText appearance=\"info\">\n          Use info message to provide helpful information to users\n        </HelperText>\n        <HelperText appearance=\"positive\">\n          Use a positive message to let users know something is going well\n        </HelperText>\n        <HelperText appearance=\"warning\">\n          Use a warning message to let users know about a known or potential issue\n        </HelperText>\n        <HelperText appearance=\"negative\">\n          Use a negative message to let users know something is wrong\n        </HelperText>\n      </>"
        },
        {
          "name": "Size",
          "description": "HelperText supports `sm` and `md`. Default size is `sm`.",
          "source": "<>\n        <HelperText size=\"sm\">This is a small message</HelperText>\n        <HelperText size=\"md\">This is a medium message</HelperText>\n      </>"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` to disable the HelperText.",
          "source": "<HelperText disabled>This is a disabled message</HelperText>"
        },
        {
          "name": "Icon",
          "description": "Displaying the HelperText icon is optional. Set `hideIcon` to `true` to hide the icon.\nCustomize the icon using `icon`.",
          "source": "<>\n        <HelperText appearance=\"positive\">This message has an icon</HelperText>\n        <HelperText appearance=\"warning\" icon={<Lock />}>\n          This message is using a custom icon\n        </HelperText>\n        <HelperText hideIcon appearance=\"negative\">\n          This message has no icon\n        </HelperText>\n      </>"
        },
        {
          "name": "Custom Content",
          "description": "Customize font weight and add links in a HelperText using a slot.\nCustomize icon color.",
          "source": "<>\n        <HelperText>\n          <Text kind=\"body-sm\">\n            This helper text is using a slot to add &nbsp;\n            <Text kind=\"body-sm\" bold>\n              bold text\n            </Text>{' '}\n            and a{' '}\n            <Link href=\"#\" appearance=\"secondary\">\n              link\n            </Link>\n          </Text>\n        </HelperText>\n        <HelperText icon={<Info style={{ color: bmSemColorIconSelected }} />}>\n          <Text\n            kind=\"body-sm\"\n            className=\"bm-expressive-four\"\n            style={{ color: bmSemColorTextSelected }}\n          >\n            Customize icon color and text color\n          </Text>\n        </HelperText>\n      </>"
        }
      ],
      "category": "Components",
      "displayName": "HelperText",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Layout/Header/Header",
      "slug": "layout-header-header",
      "description": "The header serves as a horizontal navigation bar at the top of all pages within the application.\n\nUse Header with [PageLayout](./?path=/docs/layout-pagelayout-pagelayout--docs) to coordinate, state, interactive, and responsive behaviors.",
      "type": "component",
      "props": [
        {
          "name": "children",
          "type": "React.ReactNode",
          "description": "Provide content for the Header",
          "required": true
        }
      ],
      "subcomponentProps": [
        {
          "name": "Header.Masthead",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "The content of the masthead",
              "defaultValue": "<Logo logo={ViasatLogoDefault} size=\"84px\" />"
            },
            {
              "name": "as",
              "type": "ElementType<any>",
              "description": "Specifies which HTML component to wrap the text content in"
            },
            {
              "name": "href",
              "type": "string",
              "description": "Specify a URL for the masthead",
              "defaultValue": "'#'"
            }
          ]
        },
        {
          "name": "Header.Action",
          "props": [
            {
              "name": "icon",
              "type": "ReactNode",
              "description": "Provide an icon for the action"
            },
            {
              "name": "aria-label",
              "type": "string",
              "description": "Provide an aria-label for the action"
            },
            {
              "name": "appearance",
              "type": "'accent' | 'neutral' | 'destructive' | 'neutral-subtle'",
              "description": "Specify the appearance of a Button",
              "defaultValue": "'accent'"
            },
            {
              "name": "kind",
              "type": "'filled' | 'outline' | 'ghost' | 'bare'",
              "description": "Specify the kind of Button",
              "defaultValue": "'filled'"
            },
            {
              "name": "size",
              "type": "'sm' | 'md' | 'lg'",
              "description": "Specify the size of a Button",
              "defaultValue": "'md'"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "description": "Specify if the Button is disabled"
            },
            {
              "name": "loading",
              "type": "boolean",
              "description": "Specify if the Button is in a loading state"
            },
            {
              "name": "loadingValue",
              "type": "number | undefined",
              "description": "Specify if the loading spinner is determinate by setting a value",
              "defaultValue": "undefined"
            },
            {
              "name": "fluid",
              "type": "boolean",
              "description": "Specify if Button is fluid"
            },
            {
              "name": "width",
              "type": "React.CSSProperties",
              "description": "Specify the width of a Button"
            },
            {
              "name": "iconAfter",
              "type": "React.ReactNode",
              "description": "Specify if the Button displays icon after the text"
            },
            {
              "name": "iconOnly",
              "type": "boolean",
              "description": "Specify if the icon displays without text"
            },
            {
              "name": "productType",
              "type": "'enterprise' | 'consumer'",
              "description": "Specify the productType of a Button"
            },
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "Provide content for the Button"
            },
            {
              "name": "theme",
              "type": "'light' | 'dark'",
              "description": "Specify the theme of the Button. By default it inherits the theme from the parent"
            },
            {
              "name": "m",
              "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
              "description": "Specify all margin"
            },
            {
              "name": "mx",
              "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
              "description": "Specify before and after margin"
            },
            {
              "name": "my",
              "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
              "description": "Specify top and bottom margin"
            },
            {
              "name": "mTop",
              "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
              "description": "Specify top margin"
            },
            {
              "name": "mBottom",
              "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
              "description": "Specify bottom margin"
            },
            {
              "name": "mBefore",
              "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
              "description": "Specify before margin"
            },
            {
              "name": "mAfter",
              "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
              "description": "Specify after margin"
            }
          ]
        },
        {
          "name": "Header.ActionGroup",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "Provide content for actions"
            }
          ]
        },
        {
          "name": "Header.Navigation",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "Provide content for the navigation",
              "required": true
            },
            {
              "name": "orientation",
              "type": "enum",
              "description": "Specify orientation of the navigation",
              "defaultValue": "'horizontal'"
            }
          ]
        },
        {
          "name": "Header.Navigation.Item",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "Provide the content for an item"
            },
            {
              "name": "href",
              "type": "string",
              "description": "Specify URL to make an item a link"
            },
            {
              "name": "selected",
              "type": "boolean",
              "description": "Specify if an item is selected"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "description": "Specify if an item is disabled"
            },
            {
              "name": "icon",
              "type": "ReactNode",
              "description": "Specify an icon for an item"
            }
          ]
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Header.\n\n> Use the default logo masthead for applications that don’t require a unique platform name (Ex. MyViasat, BuyViasat, Viasat.com).",
          "source": "<Header>\n      <Header.Masthead aria-label=\"Masthead\" />\n    </Header>"
        },
        {
          "name": "Plain Text Masthead",
          "description": "Use `Header.Masthead` to create a branded masthead using plain text only.\n\n> Use a plain text masthead for internal or external facing applications that require both Viasat and a platform name to display.",
          "source": "<Header>\n      <Header.Masthead>\n        <Header.Masthead.Text>\n          <Header.Masthead.Text kind=\"heading-sm\">Viasat</Header.Masthead.Text>{' '}\n          Platform\n        </Header.Masthead.Text>\n      </Header.Masthead>\n    </Header>"
        },
        {
          "name": "Signal Masthead",
          "description": "Use `Header.Masthead` to create a branded masthead by pairing the signal with plain text.\n\n> Use the signal masthead for internal or external facing applications that only require the platform name.",
          "source": "<Header>\n      <Header.Masthead>\n        <Header.Masthead.Signal />{' '}\n        <Header.Masthead.Text kind=\"heading-sm\">Platform</Header.Masthead.Text>\n      </Header.Masthead>\n    </Header>"
        },
        {
          "name": "With Actions",
          "description": "Use `Header.ActionGroup` to add actions to the Header.\n\n> This example shows `Header.ActionGroup` with two bare Buttons and Avatar.",
          "source": "<Header>\n      <Header.Masthead aria-label=\"Masthead\" />\n\n      <Header.ActionGroup>\n        <Header.Action\n          aria-label=\"Settings\"\n          icon={<Icon color=\"secondary\" icon={Settings} />}\n        />\n        <Header.Action\n          aria-label=\"Apps\"\n          icon={<Icon color=\"secondary\" icon={AppsCurved} />}\n        />\n        <Tooltip text=\"Profile\" portalled showDelay={600}>\n          <Avatar\n            size=\"xs\"\n            onClick={() => undefined}\n            role=\"button\"\n            aria-label=\"Profile\"\n            alt=\"Profile\"\n          />\n        </Tooltip>\n      </Header.ActionGroup>\n    </Header>"
        },
        {
          "name": "Add Divider",
          "description": "Use `Header.ActionGroup` to add a divider between two actions in the Header.",
          "source": "<Header>\n      <Header.Masthead aria-label=\"Masthead\" />\n\n      <Header.ActionGroup>\n        <Header.Action\n          aria-label=\"Support\"\n          icon={<Icon color=\"secondary\" size=\"md\" icon={CareAgent} />}\n        />\n\n        <Header.ActionGroup.Divider />\n\n        <Header.Action\n          aria-label=\"Settings\"\n          icon={<Icon color=\"secondary\" icon={Settings} />}\n        />\n        <Header.Action\n          aria-label=\"Apps\"\n          icon={<Icon color=\"secondary\" icon={AppsCurved} />}\n        />\n        <Tooltip text=\"Profile\" portalled showDelay={600}>\n          <Avatar\n            size=\"xs\"\n            onClick={() => undefined}\n            role=\"button\"\n            aria-label=\"Profile\"\n            alt=\"Profile\"\n          />\n        </Tooltip>\n      </Header.ActionGroup>\n    </Header>"
        },
        {
          "name": "With Navigation",
          "description": "Header.Navigation is a child component of Header that represents a group of navigation choices.\nSet `selected` to `true` to display a Header.Navigation.Item in a selected state.",
          "source": "<Header>\n      <Header.Masthead aria-label=\"Masthead\" />\n\n      <Header.Navigation>\n        <Header.Navigation.Item selected>Item 1</Header.Navigation.Item>\n        <Header.Navigation.Item>Item 2</Header.Navigation.Item>\n        <Header.Navigation.Item>Item 3</Header.Navigation.Item>\n        <Header.Navigation.Item>Item 4</Header.Navigation.Item>\n      </Header.Navigation>\n      <Header.ActionGroup>\n        <Tooltip text=\"Profile\" portalled showDelay={600}>\n          <Avatar\n            size=\"xs\"\n            onClick={() => undefined}\n            role=\"button\"\n            aria-label=\"Profile\"\n            alt=\"Profile\"\n          />\n        </Tooltip>\n      </Header.ActionGroup>\n    </Header>"
        },
        {
          "name": "Disabled Item",
          "description": "Set `disabled` to `true` to display Header.Navigation.Item in a disabled state.",
          "source": "<Header>\n      <Header.Masthead aria-label=\"Masthead\" />\n\n      <Header.Navigation>\n        <Header.Navigation.Item selected>Item 1</Header.Navigation.Item>\n        <Header.Navigation.Item>Item 2</Header.Navigation.Item>\n        <Header.Navigation.Item disabled>Item 3</Header.Navigation.Item>\n        <Header.Navigation.Item>Item 4</Header.Navigation.Item>\n      </Header.Navigation>\n      <Header.ActionGroup>\n        <Tooltip text=\"Profile\" portalled showDelay={600}>\n          <Avatar\n            size=\"xs\"\n            onClick={() => undefined}\n            role=\"button\"\n            aria-label=\"Profile\"\n            alt=\"Profile\"\n          />\n        </Tooltip>\n      </Header.ActionGroup>\n    </Header>"
        },
        {
          "name": "With Icons",
          "description": "Pass `icon` to Header.Navigation.Item to add icons to the navigation items.",
          "source": "<Header>\n      <Header.Masthead aria-label=\"Masthead\" />\n\n      <Header.Navigation>\n        <Header.Navigation.Item icon={<Icon icon={Satellite} />} selected>\n          Item 1\n        </Header.Navigation.Item>\n        <Header.Navigation.Item icon={<Icon icon={Satellite} />}>\n          Item 2\n        </Header.Navigation.Item>\n        <Header.Navigation.Item icon={<Icon icon={Satellite} />} disabled>\n          Item 3\n        </Header.Navigation.Item>\n        <Header.Navigation.Item icon={<Icon icon={Satellite} />}>\n          Item 4\n        </Header.Navigation.Item>\n      </Header.Navigation>\n      <Header.ActionGroup>\n        <Tooltip text=\"Profile\" portalled showDelay={600}>\n          <Avatar\n            size=\"xs\"\n            onClick={() => undefined}\n            role=\"button\"\n            aria-label=\"Profile\"\n            alt=\"Profile\"\n          />\n        </Tooltip>\n      </Header.ActionGroup>\n    </Header>"
        },
        {
          "name": "Custom Content",
          "description": "Pass a logo to Header.Masthead, as well as a Button or other custom component to Header.ActionGroup.",
          "source": "const { theme } = useBeamTheme();\n    const [date, setDate] = useState(new Date());\n    const timeStr = date\n      .toLocaleTimeString('en-GB', { timeZone: 'Etc/Universal' })\n      .split(':')\n      .join(' : ');\n\n    useEffect(() => {\n      const interval = setInterval(() => {\n        setDate(new Date());\n      }, 1000);\n\n      return () => clearInterval(interval);\n    }, []);\n\n    return (\n      <Header>\n        <Header.Masthead aria-label=\"Masthead\">\n          <Logo\n            size=\"84px\"\n            logo={theme.mode === 'light' ? ComboLogoDefault : ComboLogoWhite}\n          />\n        </Header.Masthead>\n\n        <Header.ActionGroup>\n          <Button kind=\"filled\" size=\"sm\">\n            Call now\n          </Button>\n\n          <Text color=\"secondary\" kind=\"body-sm\">\n            <b>{timeStr}</b> UTC\n          </Text>\n\n          <Header.ActionGroup.Divider />\n\n          <Header.Action\n            aria-label=\"Settings\"\n            icon={<Icon color=\"secondary\" icon={Settings} />}\n          />\n          <Header.Action\n            aria-label=\"Apps\"\n            icon={<Icon color=\"secondary\" icon={AppsCurved} />}\n          />\n          <Tooltip text=\"Profile\" portalled showDelay={600}>\n            <Avatar\n              size=\"xs\"\n              onClick={() => undefined}\n              role=\"button\"\n              aria-label=\"Profile\"\n              alt=\"Profile\"\n            />\n          </Tooltip>\n        </Header.ActionGroup>\n      </Header>\n    );"
        },
        {
          "name": "Default (Example)",
          "description": "This is the default Header.",
          "source": "<Box style={{ height: '100%' }}>\n      <Header>\n        <Header.Masthead aria-label=\"Masthead\" />\n      </Header>\n      <Box style={{ display: 'flex', height: '100%' }}>\n        <Box backgroundColor=\"00\" style={{ height: '100%', width: '100%' }}>\n          <Box p=\"100\">\n            <Text kind=\"heading-2xl\">Header example</Text>\n            <Text style={{ marginTop: '1.5rem', display: 'block' }}>\n              The header serves as a horizontal navigation bar at the top of all pages\n              within an application. Check out{' '}\n              <Link href=\"/?path=/docs/layout-pagelayout-pagelayout--docs\">\n                PageLayout\n              </Link>{' '}\n              to see examples of Header and SideNav working together to create UI shells\n              for web applications.\n            </Text>\n          </Box>\n        </Box>\n      </Box>\n    </Box>"
        },
        {
          "name": "With Actions (Example)",
          "description": "This is the header with Actions.",
          "source": "<Box style={{ height: '100%' }}>\n      <Header>\n        <Header.Masthead aria-label=\"Masthead\" />\n        <Header.ActionGroup>\n          <Header.Action\n            aria-label=\"Settings\"\n            icon={<Icon color=\"secondary\" icon={Settings} />}\n          />\n          <Header.Action\n            aria-label=\"Apps\"\n            icon={<Icon color=\"secondary\" icon={AppsCurved} />}\n          />\n          <Tooltip text=\"Profile\" portalled showDelay={600}>\n            <Avatar\n              size=\"xs\"\n              onClick={() => undefined}\n              role=\"button\"\n              aria-label=\"Profile\"\n              alt=\"Profile\"\n            />\n          </Tooltip>\n        </Header.ActionGroup>\n      </Header>\n      <Box style={{ display: 'flex', height: '100%' }}>\n        <Box backgroundColor=\"00\" style={{ height: '100%', width: '100%' }}>\n          <Box p=\"100\">\n            <Text kind=\"heading-2xl\">Header example</Text>\n            <Text style={{ marginTop: '1.5rem', display: 'block' }}>\n              The header serves as a horizontal navigation bar at the top of all pages\n              within an application. Check out{' '}\n              <Link href=\"/?path=/docs/layout-pagelayout-pagelayout--docs\">\n                PageLayout\n              </Link>{' '}\n              to see examples of Header and SideNav working together to create UI shells\n              for web applications.\n            </Text>\n          </Box>\n        </Box>\n      </Box>\n    </Box>"
        },
        {
          "name": "With Navigation (Example)",
          "description": "This is the header with Navigation. View full responsive behaviors [here](https://d1pa2y2dmre49n.cloudfront.net/?path=/story/ui-shell-header-header--with-navigation).\n\n> When the header is under 1200px, the navigation items display at the top of SideNav.",
          "source": "<Box style={{ height: '100%' }}>\n      <Header>\n        <Header.Masthead aria-label=\"Masthead\" />\n\n        <Header.Navigation>\n          <Header.Navigation.Item selected>Item 1</Header.Navigation.Item>\n          <Header.Navigation.Item>Item 2</Header.Navigation.Item>\n          <Header.Navigation.Item>Item 3</Header.Navigation.Item>\n          <Header.Navigation.Item>Item 4</Header.Navigation.Item>\n        </Header.Navigation>\n\n        <Header.ActionGroup>\n          <Header.Action\n            aria-label=\"Settings\"\n            icon={<Icon color=\"secondary\" icon={Settings} />}\n          />\n          <Header.Action\n            aria-label=\"Apps\"\n            icon={<Icon color=\"secondary\" icon={AppsCurved} />}\n          />\n          <Tooltip text=\"Profile\" portalled showDelay={600}>\n            <Avatar\n              size=\"xs\"\n              onClick={() => undefined}\n              role=\"button\"\n              aria-label=\"Profile\"\n              alt=\"Profile\"\n            />\n          </Tooltip>\n        </Header.ActionGroup>\n      </Header>\n      <Box backgroundColor=\"00\" style={{ height: '100%', width: '100%' }}>\n        <Box p=\"100\">\n          <Text kind=\"heading-2xl\">Header example</Text>\n          <Text style={{ marginTop: '1.5rem', display: 'block' }}>\n            The header serves as a horizontal navigation bar at the top of all pages\n            within an application. Check out{' '}\n            <Link href=\"/?path=/docs/layout-pagelayout-pagelayout--docs\">\n              PageLayout\n            </Link>{' '}\n            to see examples of Header and SideNav working together to create UI shells\n            for web applications.\n          </Text>\n        </Box>\n      </Box>\n    </Box>"
        }
      ],
      "category": "Layout",
      "displayName": "Header/Header",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Forms/Form",
      "slug": "forms-form",
      "description": "Form is a collection of inputs that allow a user to submit data.",
      "type": "component",
      "props": [
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if form is disabled",
          "defaultValue": "false"
        },
        {
          "name": "readOnly",
          "type": "boolean",
          "description": "Specify if form is read only",
          "defaultValue": "false"
        },
        {
          "name": "required",
          "type": "boolean",
          "description": "Specify if form is required",
          "defaultValue": "false"
        },
        {
          "name": "initialValues",
          "type": "Record<string, FormValue>",
          "description": "Specify initial values on Form controls based on their names",
          "defaultValue": "{}"
        },
        {
          "name": "validationMode",
          "type": "'onChange' | 'onBlur' | 'onSubmit'",
          "description": "Specify if validation runs on change or when loosing focus",
          "defaultValue": "onBlur"
        }
      ],
      "stories": [
        {
          "name": "Example",
          "description": "This is the default Form.",
          "source": "const Spacer = () => <div style={{ marginTop: 'var(--bm-sem-space-200)' }} />;\n    return (\n      <Form name=\"example\" {...args}>\n        <TextField\n          fluid\n          required\n          id=\"textField-required\"\n          name=\"textField-required\"\n          placeholder=\"Placeholder text\"\n          label={<Label>Text field</Label>}\n          validationRules={[\n            validators.required({ message: 'This is a required field' }),\n          ]}\n        />\n        <Spacer />\n        <TextField\n          fluid\n          id=\"textField\"\n          name=\"textField\"\n          label={<Label tooltip={tooltip}>Text field</Label>}\n          helperText={<HelperText>Helper text</HelperText>}\n        />\n        <Spacer />\n        <CheckboxGroup\n          required\n          label={<Label>Checkbox group</Label>}\n          name=\"checkbox-group-required-vertical\"\n          validationRules={[\n            validators.required({ message: 'This is a required field' }),\n          ]}\n        >\n          <Checkbox label=\"Checkbox label\" value=\"1\" />\n          <Checkbox label=\"Checkbox label\" value=\"2\" />\n          <Checkbox label=\"Checkbox label\" value=\"3\" />\n        </CheckboxGroup>\n        <Spacer />\n        <RadioButtonGroup\n          required\n          orientation=\"horizontal\"\n          fluid\n          label={<Label>Radio button group</Label>}\n          name=\"radio-button-group-required-horizontal-fluid\"\n          validationRules={[\n            validators.required({ message: 'This is a required field' }),\n          ]}\n        >\n          <RadioButton label=\"Radio button label\" value=\"1\" />\n          <RadioButton label=\"Radio button label\" value=\"2\" />\n          <RadioButton label=\"Radio button label\" value=\"3\" />\n        </RadioButtonGroup>\n        <Spacer />\n        <NativeSelect\n          fluid\n          label={<Label>Native select</Label>}\n          name=\"native-select\"\n        >\n          <option disabled hidden selected>\n            Select an option\n          </option>\n          <option value=\"1\">Option 1</option>\n          <option value=\"2\">Option 2</option>\n          <option value=\"3\">Option 3</option>\n        </NativeSelect>\n        <Spacer />\n        <Select\n          placeholder=\"Select an option\"\n          required\n          fluid\n          label={<Label>Single select</Label>}\n          name=\"select-required\"\n          validationRules={[\n            validators.required({ message: 'This is a required field' }),\n          ]}\n        >\n          <Select.Option value=\"1\">Option 1</Select.Option>\n          <Select.Option value=\"2\">Option 2</Select.Option>\n          <Select.Option value=\"3\">Option 3</Select.Option>\n        </Select>\n        <Spacer />\n        <Select\n          placeholder=\"Select option(s)\"\n          required\n          fluid\n          multiple\n          label={<Label>Multi select</Label>}\n          name=\"select-multiple-required\"\n          validationRules={[\n            validators.required({ message: 'This is a required field' }),\n          ]}\n        >\n          <Select.Option value=\"1\">Option 1</Select.Option>\n          <Select.Option value=\"2\">Option 2</Select.Option>\n          <Select.Option value=\"3\">Option 3</Select.Option>\n        </Select>\n        <Spacer />\n        <Switch onText=\"Switch text\" />\n        <Spacer />\n        <CheckboxGroup\n          required\n          validationRules={[\n            validators.required({ message: 'This is a required field' }),\n          ]}\n          name=\"checkbox-group-required\"\n        >\n          <Checkbox label=\"I have read and accepted the Terms & Conditions\" />\n        </CheckboxGroup>\n        <Spacer />\n        <Text color=\"negative\" kind=\"body-sm\">\n          *Indicates a required field\n        </Text>\n        <Spacer />\n        <div\n          style={{\n            display: 'flex',\n            justifyContent: 'flex-end',\n            gap: 'var(--bm-sem-space-75)',\n          }}\n        >\n          <Button type=\"reset\" kind=\"outline\">\n            Reset\n          </Button>\n          <Button type=\"submit\">Submit</Button>\n        </div>\n      </Form>\n    );"
        },
        {
          "name": "Required",
          "description": "Set `required` to `true` to make a Form input required.",
          "source": "<Form required name=\"required\">\n        <TextField\n          fluid\n          id=\"required-textField\"\n          name=\"required-textField\"\n          label={<Label>Label</Label>}\n          validationRules={[\n            validators.required({ message: 'This is a required field' }),\n          ]}\n        />\n      </Form>"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` to disable a Form input. Disabled Form inputs should\nonly be used when collection of conditional logic is needed.\n(Ex. Collecting State before City)",
          "source": "<Form disabled name=\"disabled\">\n        <TextField\n          fluid\n          id=\"disabled-textField\"\n          name=\"disabled-textField\"\n          label={<Label>Label</Label>}\n        />\n      </Form>"
        },
        {
          "name": "Read Only",
          "description": "Set `readOnly` to `true` to make a Form input non-interactive. Improve\naccessibility by using `readOnly` instead of `disabled` Form inputs when possible.",
          "source": "<Form\n        readOnly\n        name=\"readOnly\"\n        initialValues={{ 'readOnly-textField': 'Filled text' }}\n      >\n        <TextField\n          fluid\n          id=\"readOnly-textField\"\n          name=\"readOnly-textField\"\n          label={<Label>Label</Label>}\n        />\n      </Form>"
        },
        {
          "name": "Initial Values",
          "description": "Use `initialValues` to display Form data based on their names.",
          "source": "const Spacer = () => <div style={{ marginTop: 'var(--bm-sem-space-200)' }} />;\n    const Separator = () => <div style={{ borderTop: 'var(--bm-sem-border-width-md) solid var(--bm-sem-color-border-01)' }} />;\n    return (\n      <Form\n        required\n        name=\"initial-values\"\n        initialValues={{\n          'initial-values-radio-group': '2',\n          'initial-values-textField': 'Filled text',\n          'initial-values-select': '1',\n          'initial-values-select-multiple': ['2', '3'],\n        }}\n      >\n        <TextField\n          fluid\n          label={<Label>Text field</Label>}\n          id=\"initial-values-textField\"\n          name=\"initial-values-textField\"\n          validationRules={[\n            validators.required({ message: 'This is a required field' }),\n          ]}\n        />\n        <Spacer />\n        <CheckboxGroup\n          label={<Label>Checkbox group</Label>}\n          name=\"initial-values-radio-group\"\n          validationRules={[\n            validators.required({ message: 'This is a required field' }),\n          ]}\n        >\n          <Checkbox label=\"Checkbox label\" value=\"1\" />\n          <Checkbox label=\"Checkbox label\" value=\"2\" />\n          <Checkbox label=\"Checkbox label\" value=\"3\" />\n        </CheckboxGroup>\n        <Spacer />\n        <Select\n          placeholder=\"Select an option\"\n          fluid\n          label={<Label>Single select</Label>}\n          name=\"initial-values-select\"\n          validationRules={[\n            validators.required({ message: 'This is a required field' }),\n          ]}\n        >\n          <Select.Option value=\"1\">Option 1</Select.Option>\n          <Select.Option value=\"2\">Option 2</Select.Option>\n          <Select.Option value=\"3\">Option 3</Select.Option>\n        </Select>\n        <Spacer />\n        <Select\n          placeholder=\"Select option(s)\"\n          fluid\n          multiple\n          label={<Label>Multi select</Label>}\n          name=\"initial-values-select-multiple\"\n          validationRules={[\n            validators.required({ message: 'This is a required field' }),\n          ]}\n        >\n          <Select.Option value=\"1\">Option 1</Select.Option>\n          <Select.Option value=\"2\">Option 2</Select.Option>\n          <Select.Option value=\"3\">Option 3</Select.Option>\n        </Select>\n        <Spacer />\n        <Text color=\"negative\" kind=\"body-sm\">\n          *Indicates a required field\n        </Text>\n        <Spacer />\n        <Separator />\n        <Spacer />\n        <div\n          style={{\n            display: 'flex',\n            justifyContent: 'flex-end',\n            gap: 'var(--bm-sem-space-75)',\n          }}\n        >\n          <Button type=\"reset\" kind=\"outline\">\n            Reset\n          </Button>\n          <Button type=\"submit\">Submit</Button>\n        </div>\n      </Form>\n    );"
        },
        {
          "name": "WIP Reset Verification",
          "description": "WIP — manual verification of EPTOOLS-1830 (Select/Autocomplete reset).\nDelete before merging to master.\n\nTwo side-by-side forms: one without `initialValues` (reset → empty) and one\nwith `initialValues` (reset → restored to initial). Pick something in each\nSelect / Autocomplete (single + multi), hit Reset, and confirm the field\nlands where the column header says it should.",
          "source": "const Spacer = () => <div style={{ marginTop: 'var(--bm-sem-space-200)' }} />;\n    const Column = ({\n      title,\n      initialValues,\n      keyPrefix,\n    }: {\n      title: string;\n      initialValues?: Record<string, string | string[]>;\n      keyPrefix: string;\n    }) => (\n      <Form name={`${keyPrefix}-form`} initialValues={initialValues}>\n        <Text kind=\"heading-sm\">{title}</Text>\n        <Spacer />\n        <TextField\n          fluid\n          name={`${keyPrefix}-text`}\n          label={<Label>Text field</Label>}\n        />\n        <Spacer />\n        <Select\n          fluid\n          name={`${keyPrefix}-select`}\n          placeholder=\"Pick one\"\n          label={<Label>Single select</Label>}\n        >\n          <Select.Option value=\"1\">Option 1</Select.Option>\n          <Select.Option value=\"2\">Option 2</Select.Option>\n          <Select.Option value=\"3\">Option 3</Select.Option>\n        </Select>\n        <Spacer />\n        <Select\n          fluid\n          multiple\n          name={`${keyPrefix}-select-multi`}\n          placeholder=\"Pick any\"\n          label={<Label>Multi select</Label>}\n        >\n          <Select.Option value=\"1\">Option 1</Select.Option>\n          <Select.Option value=\"2\">Option 2</Select.Option>\n          <Select.Option value=\"3\">Option 3</Select.Option>\n        </Select>\n        <Spacer />\n        <Autocomplete\n          fluid\n          name={`${keyPrefix}-ac`}\n          placeholder=\"Type to filter\"\n          label={<Label>Autocomplete</Label>}\n        >\n          <Autocomplete.Option value=\"apple\">Apple</Autocomplete.Option>\n          <Autocomplete.Option value=\"banana\">Banana</Autocomplete.Option>\n          <Autocomplete.Option value=\"cherry\">Cherry</Autocomplete.Option>\n        </Autocomplete>\n        <Spacer />\n        <Autocomplete\n          fluid\n          multiple\n          name={`${keyPrefix}-ac-multi`}\n          placeholder=\"Type to filter\"\n          label={<Label>Autocomplete multi</Label>}\n        >\n          <Autocomplete.Option value=\"apple\">Apple</Autocomplete.Option>\n          <Autocomplete.Option value=\"banana\">Banana</Autocomplete.Option>\n          <Autocomplete.Option value=\"cherry\">Cherry</Autocomplete.Option>\n        </Autocomplete>\n        <Spacer />\n        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>\n          <Button type=\"reset\" kind=\"outline\">\n            Reset\n          </Button>\n        </div>\n      </Form>\n    );\n\n    return (\n      <div style={{ display: 'flex', gap: 'var(--bm-sem-space-200)' }}>\n        <div style={{ flex: 1 }}>\n          <Column title=\"No initialValues — reset → empty\" keyPrefix=\"empty\" />\n        </div>\n        <div style={{ flex: 1 }}>\n          <Column\n            title=\"With initialValues — reset → initial\"\n            keyPrefix=\"initial\"\n            initialValues={{\n              'initial-text': 'Initial text',\n              'initial-select': '2',\n              'initial-select-multi': ['1', '3'],\n              'initial-ac': 'banana',\n              'initial-ac-multi': ['apple', 'cherry'],\n            }}\n          />\n        </div>\n      </div>\n    );"
        },
        {
          "name": "Validation Mode",
          "description": "Form supports `onBlur`, `onChange`, and `onSubmit`.\nUse `OnBlur` or `onChange` in conjunction with `onSubmit` to improve\nuser experience. Default validation mode is `onBlur`.\n\n> Use `onChange` with caution, as it can be very disruptive to users.",
          "source": "const Spacer = () => <div style={{ marginTop: 'var(--bm-sem-space-200)' }} />;\n    const Separator = () => <div style={{ borderTop: 'var(--bm-sem-border-width-md) solid var(--bm-sem-color-border-01)' }} />;\n    const [mode, setMode] = React.useState<FormProps['validationMode']>();\n    const handleChange: FormEventHandler<HTMLFieldSetElement> = event => {\n      setMode(\n        (event.target as HTMLInputElement).value as FormProps['validationMode'],\n      );\n    };\n    return (\n      <div>\n        <RadioButtonGroup\n          name=\"mode-controls\"\n          orientation=\"horizontal\"\n          onChange={handleChange}\n        >\n          <RadioButton label=\"onBlur\" value=\"onBlur\" defaultChecked />\n          <RadioButton label=\"onChange\" value=\"onChange\" />\n          <RadioButton label=\"onSubmit\" value=\"onSubmit\" />\n        </RadioButtonGroup>\n        <Spacer />\n        <Form required name=\"validation-mode\" validationMode={mode}>\n          <TextField\n            fluid\n            label={<Label>Text field</Label>}\n            id=\"validation-mode-textField\"\n            name=\"validation-mode-textField\"\n            validationRules={[\n              validators.required({ message: 'This is a required field' }),\n            ]}\n          />\n          <Spacer />\n          <CheckboxGroup\n            label={<Label>Checkbox group</Label>}\n            name=\"validation-mode-radio-group\"\n            validationRules={[\n              validators.required({ message: 'This is a required field' }),\n            ]}\n          >\n            <Checkbox label=\"Checkbox label\" value=\"1\" />\n            <Checkbox label=\"Checkbox label\" value=\"2\" />\n            <Checkbox label=\"Checkbox label\" value=\"3\" />\n          </CheckboxGroup>\n          <Spacer />\n          <Select\n            placeholder=\"Select an option\"\n            fluid\n            label={<Label>Single select</Label>}\n            name=\"validation-mode-select\"\n            validationRules={[\n              validators.required({ message: 'This is a required field' }),\n            ]}\n          >\n            <Select.Option value=\"1\">Option 1</Select.Option>\n            <Select.Option value=\"2\">Option 2</Select.Option>\n            <Select.Option value=\"3\">Option 3</Select.Option>\n          </Select>\n          <Spacer />\n          <Select\n            placeholder=\"Select option(s)\"\n            fluid\n            multiple\n            label={<Label>Multi select</Label>}\n            name=\"validation-mode-select-multiple\"\n            validationRules={[\n              validators.required({ message: 'This is a required field' }),\n            ]}\n          >\n            <Select.Option value=\"1\">Option 1</Select.Option>\n            <Select.Option value=\"2\">Option 2</Select.Option>\n            <Select.Option value=\"3\">Option 3</Select.Option>\n          </Select>\n          <Spacer />\n          <Text color=\"negative\" kind=\"body-sm\">\n            *Indicates a required field\n          </Text>\n          <Spacer />\n          <Separator />\n          <Spacer />\n          <div\n            style={{\n              display: 'flex',\n              justifyContent: 'flex-end',\n              gap: 'var(--bm-sem-space-75)',\n            }}\n          >\n            <Button type=\"reset\" kind=\"outline\">\n              Reset\n            </Button>\n            <Button type=\"submit\">Submit</Button>\n          </div>\n        </Form>\n      </div>\n    );"
        },
        {
          "name": "Validation Min",
          "description": "Use `validators.min()` to require the control's value to be greater than or equal\nto the provided value.\n\n> Blur example below to trigger validation.",
          "source": "<Form name=\"validation-min\">\n        <TextField\n          required\n          fluid\n          type=\"number\"\n          defaultValue=\"4\"\n          id=\"textField-min\"\n          name=\"textField-min\"\n          label={<Label>Items</Label>}\n          validationRules={[\n            validators.min({\n              value: 5,\n              message: 'A minimum of five items is required',\n            }),\n          ]}\n        />\n      </Form>"
        },
        {
          "name": "Validation Max",
          "description": "Use `validators.max()` to require the control's value to be less than or equal\nto the provided value.\n\n> Blur example below to trigger validation.",
          "source": "<Form name=\"validation-max\">\n        <TextField\n          required\n          fluid\n          type=\"number\"\n          defaultValue=\"6\"\n          id=\"textField-max\"\n          name=\"textField-max\"\n          label={<Label>Items</Label>}\n          validationRules={[\n            validators.max({\n              value: 5,\n              message: 'A maximum of five items is required',\n            }),\n          ]}\n        />\n      </Form>"
        },
        {
          "name": "Validation Email",
          "description": "Use `validators.email()` to ensure the control's value passes email validation\ncriteria. Use `validators.pattern()` to customize default email criteria.\n\n> Blur example below to trigger validation.",
          "source": "<Form name=\"validation-email\">\n        <TextField\n          required\n          fluid\n          type=\"email\"\n          id=\"textField-email\"\n          name=\"textField-email\"\n          defaultValue=\"beam@viasat\"\n          label={<Label>Email</Label>}\n          validationRules={[\n            validators.email({\n              message: 'A valid email is required',\n            }),\n          ]}\n        />\n      </Form>"
        },
        {
          "name": "Validation Pattern",
          "description": "Use `validators.pattern()` to require the control's value\nto match a regex/string pattern.\n\n> Blur example below to trigger validation.",
          "source": "<Form name=\"validation-pattern\">\n        <TextField\n          required\n          fluid\n          defaultValue=\"01/20\"\n          id=\"textField-pattern\"\n          name=\"textField-pattern\"\n          label={<Label>Date of birth</Label>}\n          validationRules={[\n            validators.pattern({\n              pattern: /\\b\\d{2}\\/\\d{2}\\/\\d{4}\\b/,\n              message:\n                'Date of birth requires month, day, and year (Ex. ##/##/####)',\n            }),\n          ]}\n        />\n      </Form>"
        },
        {
          "name": "Validation Required",
          "description": "Use `validators.required()` to require the control to have a non-empty value.\n\n> Blur example below to trigger validation.",
          "source": "<Form name=\"validation-required\">\n        <TextField\n          fluid\n          required\n          id=\"textField-required\"\n          name=\"textField-required\"\n          label={<Label>Name</Label>}\n          validationRules={[validators.required({ message: 'Name is required' })]}\n        />\n      </Form>"
        },
        {
          "name": "Validation Min Length",
          "description": "Use `validators.minLength()` to require the length of the control's value to be\ngreater than or equal to the provided minimum length.\n\n> Blur example below to trigger validation.",
          "source": "<Form name=\"validation-min-length\">\n        <TextField\n          required\n          fluid\n          defaultValue=\"L\"\n          id=\"textField-min-length\"\n          name=\"textField-min-length\"\n          label={<Label>Article name</Label>}\n          validationRules={[\n            validators.minLength({\n              length: 3,\n              message: 'Article name must be 3 or more characters ',\n            }),\n          ]}\n        />\n      </Form>"
        },
        {
          "name": "Validation Max Length",
          "description": "Use `validators.maxLength()` to require the length of the control's value to be\nless than or equal to the provided maximum length.\n\n> Blur example below to trigger validation.",
          "source": "<Form name=\"validation-max-length\">\n        <TextField\n          required\n          fluid\n          id=\"textField-max-length\"\n          name=\"textField-max-length\"\n          label={<Label>Article name</Label>}\n          defaultValue=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit\"\n          validationRules={[\n            validators.maxLength({\n              length: 25,\n              message: 'Article name must 25 or less characters',\n            }),\n          ]}\n        />\n      </Form>"
        },
        {
          "name": "Validation Define",
          "description": "Utility validator that accepts regular or async callback function as a parameter\nand defines custom validation rules for form controls. Form element value,\nelement itself and error reset indicator are passed as parameters to the callback\nfunction. In case the form control fails validation, passed callback returns an\nobject with a truthy error state and some error message, otherwise it returns\nan object with a falsy error state.\n\n> Blur example below to trigger validation.",
          "source": "<Form name=\"validation-define\">\n        <TextField\n          required\n          fluid\n          defaultValue=\"Mark D\"\n          id=\"textField-define\"\n          name=\"textField-define\"\n          label={<Label>Username</Label>}\n          validationRules={[\n            validators.define(async (element: HTMLInputElement) => {\n              const response = await fetch(\n                'https://jsonplaceholder.typicode.com/todos/1',\n              );\n              // eslint-disable-next-line @typescript-eslint/no-unused-vars\n              const todos = await response.json();\n\n              return {\n                error: true,\n                message: 'The username you entered is already in use',\n              };\n            }),\n          ]}\n        />\n      </Form>"
        },
        {
          "name": "3rd Party Integration",
          "description": "Form can be used with 3rd-party form libraries. The example form below is\nusing [react\nhook form](https://www.react-hook-form.com/), [@hookform/resolvers](https://www.npmjs.com/package/@hookform/resolvers) and [zod](https://zod.dev/) for validation.\n\n> Blur example below to trigger validation.",
          "source": "const schema = z.object({\n      controller: z.string().trim().min(1, {\n        message: 'This is a required field',\n      }),\n    });\n    const {\n      register,\n      clearErrors,\n      formState: { errors },\n    } = useForm<z.output<typeof schema>>({\n      mode: 'onBlur',\n      resolver: zodResolver(schema),\n    });\n    return (\n      <form name=\"third-party-integration\">\n        <TextField\n          fluid\n          required\n          id=\"controller\"\n          label={<Label>Label</Label>}\n          {...register('controller')}\n          onInput={() => clearErrors('controller')}\n          error={errors?.controller?.message as string}\n        />\n      </form>\n    );"
        }
      ],
      "category": "Forms",
      "displayName": "Form",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Icon/Flag",
      "slug": "components-icon-flag",
      "description": "Beam provides flags to support different areas of the business across Viasat.",
      "type": "component",
      "props": [
        {
          "name": "flag",
          "type": "React.FC<any>",
          "description": "Specify which Flag to display",
          "required": true
        },
        {
          "name": "size",
          "type": "string",
          "description": "Pass maxWidth. The height  will scale proportionally with the width."
        },
        {
          "name": "display",
          "type": "enum",
          "description": "Specify the display property of the Flag",
          "defaultValue": "block"
        },
        {
          "name": "ariaLabel",
          "type": "string",
          "description": "Specify the `aria-label` of the Flag"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the Flag. By default it inherits the theme from the parent"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Flag. View [Beam 2 Storybook](https://storybook-beam.vega.viasat.com/?path=/story/components-logo-flags--all-variants) for a complete list.",
          "source": "<Box>\n      <Flag {...args} />\n    </Box>"
        },
        {
          "name": "Appearance",
          "description": "Flag provides two different appearances: Rectangle and Circled\n\n> Import desired appearance from @viasat.",
          "source": "<Box style={{ display: 'flex', alignItems: 'center', gap: bmSemSpace300 }}>\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'row',\n          gap: bmSemSpace75,\n          alignItems: 'center',\n        }}\n      >\n        <Box>\n          <Flag flag={UnitedKingdom} size={'4rem'} />\n        </Box>\n        <Text color={'secondary'}>UnitedKingdom</Text>\n      </div>\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'row',\n          gap: bmSemSpace75,\n          alignItems: 'center',\n        }}\n      >\n        <Box>\n          <Flag flag={UnitedKingdomCircled} size={'3rem'} />\n        </Box>\n        <Text color={'secondary'}>UnitedKingdomCircled</Text>\n      </div>\n    </Box>"
        },
        {
          "name": "Color Mode",
          "description": "Use Flag in both light and dark mode.",
          "source": "<Box style={{ display: 'flex', alignItems: 'center', gap: bmSemSpace200 }}>\n      <Box p=\"150\" borderRadius={'md'} backgroundColor={'01'} theme={'light'}>\n        <Flag flag={Ireland} size={args.size} />\n      </Box>\n      <Box p=\"150\" borderRadius={'md'} backgroundColor={'01'} theme={'dark'}>\n        <Flag flag={Ireland} size={args.size} />\n      </Box>\n    </Box>"
        }
      ],
      "category": "Components",
      "displayName": "Icon/Flag",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Forms/FileUpload/FileUpload",
      "slug": "forms-fileupload-fileupload",
      "description": "File uploader allows users to upload one or more files by dragging and dropping or activating with a button.",
      "type": "component",
      "props": [
        {
          "name": "accept",
          "type": "string",
          "description": "Specify what types of files can be uploaded"
        },
        {
          "name": "label",
          "type": "React.ReactNode",
          "description": "Specify Label for FileUpload",
          "defaultValue": "null"
        },
        {
          "name": "helperText",
          "type": "React.ReactNode",
          "description": "Specify HelperText for FileUpload",
          "defaultValue": "null"
        },
        {
          "name": "error",
          "type": "string | boolean",
          "description": "Specify error text and display error state of FileUpload"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if FileUpload is in disabled state",
          "defaultValue": "false"
        },
        {
          "name": "multiple",
          "type": "boolean",
          "description": "Specify if more than one file can be can be uploaded",
          "defaultValue": "false"
        },
        {
          "name": "fileLimit",
          "type": "number",
          "description": "Specify how many files can be uploaded"
        },
        {
          "name": "maxFileSize",
          "type": "number",
          "description": "Specify the maximum file size that can be uploaded"
        },
        {
          "name": "required",
          "type": "boolean",
          "description": "Specify if FileUpload is a required input",
          "defaultValue": "false"
        },
        {
          "name": "readOnly",
          "type": "boolean",
          "description": "Specify if FileUpload is in read-only state"
        },
        {
          "name": "hideRequiredMarker",
          "type": "boolean",
          "description": "Specify if FileUpload displays with an asterisk",
          "defaultValue": "false"
        },
        {
          "name": "validationRules",
          "type": "FormValidator[]",
          "description": "Specify form validation rules for Select",
          "defaultValue": "[]"
        },
        {
          "name": "fluid",
          "type": "boolean",
          "description": "Specify if FileUpload is fluid",
          "defaultValue": "false"
        },
        {
          "name": "width",
          "type": "string",
          "description": "Specify the width of FileUpload"
        },
        {
          "name": "onUpload",
          "type": "(file: File, actions: FileActions, abortSignal: AbortSignal) => void",
          "description": "Specify the callback function that is called when a file is uploaded. Setting this prop will make upload asynchronous.\nThe `actions` argument exposes `progress(percent: number)`, `success()`,\n`error(message: string)`, and `dismiss()` to report upload state back to the\ncomponent; `abortSignal` fires when the user cancels the upload."
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the FileUpload. By default it inherits the theme from the parent"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default FileUpload.",
          "source": "<FileUploadComponent {...args} />"
        },
        {
          "name": "Kind",
          "description": "FileUpload supports `FileUpload.Dropzone` and `FileUpload.Button` options.",
          "source": "const [kind, setKind] = useState<'dropzone' | 'button'>('dropzone');\n\n    return (\n      <>\n        <RadioButtonGroup\n          orientation=\"horizontal\"\n          style={{ alignSelf: 'flex-start', flex: 1 }}\n          name=\"kind\"\n        >\n          <RadioButton\n            label=\"Dropzone\"\n            value=\"dropzone\"\n            defaultChecked={kind === 'dropzone'}\n            onChange={() => setKind('dropzone')}\n          />\n          <RadioButton\n            label=\"Button\"\n            value=\"button\"\n            defaultChecked={kind === 'button'}\n            onChange={() => setKind('button')}\n          />\n        </RadioButtonGroup>\n        <FileUploadComponent {...args}>\n          {kind === 'dropzone' && <FileUpload.Dropzone />}\n          {kind === 'button' && <FileUpload.Button />}\n        </FileUploadComponent>\n      </>\n    );"
        },
        {
          "name": "Without Label",
          "description": "Displaying the `Label` is optional. FileUpload will display without Label if not passed as a prop. If no `label` is passed, set `aria-label` to make this input accessible for screen readers.",
          "source": "<FileUploadComponent\n      helperText={\n        <HelperTextComponent>{defaultStoryBookHelperText}</HelperTextComponent>\n      }\n      multiple\n      required\n      accept={defaultStorybookAccept}\n      maxFileSize={400 * 1024}\n    />"
        },
        {
          "name": "Helper Text",
          "description": "Displaying `HelperText` is optional. FileUpload will display with `HelperText` if passed as a prop.",
          "source": "<FileUploadComponent\n      helperText={\n        <HelperTextComponent>{defaultStoryBookHelperText}</HelperTextComponent>\n      }\n      multiple\n      required\n      accept={defaultStorybookAccept}\n      maxFileSize={400 * 1024}\n    />"
        },
        {
          "name": "Error",
          "description": "Use `error` to specify error text and display FileUpload in an error state.",
          "source": "<FileUploadComponent\n      label={<Label>{defaultStoryBookLabel}</Label>}\n      helperText={\n        <HelperTextComponent>{defaultStoryBookHelperText}</HelperTextComponent>\n      }\n      multiple\n      required\n      accept={defaultStorybookAccept}\n      maxFileSize={400 * 1024}\n      error=\"File upload is required\"\n    />"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` to display FileUpload in a disabled state.",
          "source": "<FileUploadComponent\n      label={<Label>{defaultStoryBookLabel}</Label>}\n      helperText={\n        <HelperTextComponent>{defaultStoryBookHelperText}</HelperTextComponent>\n      }\n      multiple\n      required\n      accept={defaultStorybookAccept}\n      maxFileSize={400 * 1024}\n      disabled\n    />"
        },
        {
          "name": "Demo",
          "description": "Add files to the working example below.",
          "source": "<FileUploadComponent\n      label={<Label>{defaultStoryBookLabel}</Label>}\n      helperText={\n        <HelperTextComponent>{defaultStoryBookHelperText}</HelperTextComponent>\n      }\n      multiple\n      required\n      accept={defaultStorybookAccept}\n      maxFileSize={400 * 1024}\n      fileLimit={3}\n      onUpload={fakeUploadFile}\n    />"
        }
      ],
      "category": "Forms",
      "displayName": "FileUpload/FileUpload",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Forms/FileUpload/FileUpload.List",
      "slug": "forms-fileupload-fileupload-list",
      "description": "FileUpload.List is a child component of FileUpload that represents a list of items being uploaded.",
      "type": "component",
      "props": [
        {
          "name": "children",
          "type": "any",
          "description": "Add List items to create a FileUpload.List"
        },
        {
          "name": "thumbnail",
          "type": "boolean",
          "description": "Specify if the all items displays with a default thumbnail or a preview of the image being uploaded. Image only displays for size lg.",
          "defaultValue": "false"
        },
        {
          "name": "size",
          "type": "'md' | 'lg'",
          "description": "Specify FileUpload List size",
          "defaultValue": "md"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the FileUpload. By default it inherits the theme from the parent"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if the FileUpload List is disabled"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default FileUpload.List.",
          "source": "<FileUploadListComponent {...args}>\n      <FileUpload.List.Item\n        fileName=\"Filename.jpg\"\n        fileSize=\"2.45mb\"\n        state=\"uploaded\"\n      />\n      <FileUpload.List.Item\n        fileName=\"Filename.jpg\"\n        fileSize=\"2.45mb\"\n        state=\"uploaded\"\n      />\n      <FileUpload.List.Item\n        fileName=\"Filename.jpg\"\n        fileSize=\"2.45mb\"\n        state=\"uploaded\"\n      />\n    </FileUploadListComponent>"
        },
        {
          "name": "Size",
          "description": "FileUpload.List supports `md` and `lg`. Default size is `md`.",
          "source": "<>\n      <FileUploadListComponent size=\"md\">\n        <FileUpload.List.Item\n          fileName=\"Filename.jpg\"\n          fileSize=\"2.45mb\"\n          state=\"uploaded\"\n        />\n        <FileUpload.List.Item\n          fileName=\"Filename.jpg\"\n          fileSize=\"2.45mb\"\n          state=\"uploaded\"\n        />\n        <FileUpload.List.Item\n          fileName=\"Filename.jpg\"\n          fileSize=\"2.45mb\"\n          state=\"uploaded\"\n        />\n      </FileUploadListComponent>\n      <FileUploadListComponent size=\"lg\">\n        <FileUpload.List.Item\n          fileName=\"Filename.jpg\"\n          fileSize=\"2.45mb\"\n          state=\"uploaded\"\n        />\n        <FileUpload.List.Item\n          fileName=\"Filename.jpg\"\n          fileSize=\"2.45mb\"\n          state=\"uploaded\"\n        />\n        <FileUpload.List.Item\n          fileName=\"Filename.jpg\"\n          fileSize=\"2.45mb\"\n          state=\"uploaded\"\n        />\n      </FileUploadListComponent>\n    </>"
        },
        {
          "name": "With Thumbnail",
          "description": "Set `thumbnail` to `true` to display list items with a thumbnail image. After upload is complete, a preview image will display for GIF, JPG, PNG, or SVG files. All other files types will display with a default thumbnail.",
          "source": "<FileUploadListComponent thumbnail size=\"lg\">\n      <FileUpload.List.Item\n        fileName=\"Filename.jpg\"\n        fileSize=\"2.45mb\"\n        state=\"uploaded\"\n      />\n      <FileUpload.List.Item\n        fileName=\"Filename.jpg\"\n        fileSize=\"2.45mb\"\n        state=\"uploaded\"\n      />\n      <FileUpload.List.Item\n        fileName=\"Filename.jpg\"\n        fileSize=\"2.45mb\"\n        state=\"uploaded\"\n      />\n    </FileUploadListComponent>"
        }
      ],
      "category": "Forms",
      "displayName": "FileUpload/FileUpload.List",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Forms/FileUpload/FileUpload.List.Item",
      "slug": "forms-fileupload-fileupload-list-item",
      "description": "FileUpload.List.Item is a child component of FileUpload.List that represents a specific item being uploaded.",
      "type": "component",
      "props": [
        {
          "name": "error",
          "type": "string",
          "description": "Specify error text and display error state of list item"
        },
        {
          "name": "fileName",
          "type": "string",
          "description": "The name of the uploaded file"
        },
        {
          "name": "fileSize",
          "type": "string",
          "description": "The size of the uploaded file"
        },
        {
          "name": "onDismiss",
          "type": "() => void",
          "description": "Specify a callback when the item is dismissed"
        },
        {
          "name": "size",
          "type": "'md' | 'lg'",
          "description": "Specify the size of the item",
          "defaultValue": "'md'"
        },
        {
          "name": "thumbnail",
          "type": "string | boolean",
          "description": "Specify if the item displays a default thumbnail or a preview of the image being uploaded. Image only displays for size lg.",
          "defaultValue": "false"
        },
        {
          "name": "state",
          "type": "'uploading' | 'success' | 'uploaded' | 'error'",
          "description": "Specify the status of the file",
          "defaultValue": "uploaded"
        },
        {
          "name": "progress",
          "type": "number",
          "description": "Specify the progress of the file upload",
          "defaultValue": "0"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the FileUpload. By default it inherits the theme from the parent"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if the FileUpload is disabled"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default FileUpload.List.Item.",
          "source": "<FileUploadListItemComponent {...args} />"
        },
        {
          "name": "Example",
          "description": "A ProgressBar displays while the file is being uploaded. Once the file has been successfully uploaded, a green checkmark briefly displays letting the user know that the file has been successfully uploaded.",
          "source": "const [state, setState] = useState<FileUploadListItemState>('uploading');\n    const [progress, setProgress] = useState(0);\n    const [timeout, storeTimeout] = useState<NodeJS.Timeout | null>(null);\n\n    useEffect(() => {\n      if (state === 'success') {\n        storeTimeout(\n          setTimeout(() => {\n            setState('uploaded');\n          }, 4_000),\n        );\n      } else if (state === 'uploaded') {\n        storeTimeout(\n          setTimeout(() => {\n            setProgress(0);\n            setState('uploading');\n          }, 4_000),\n        );\n      } else if (state === 'uploading') {\n        if (progress < 100) {\n          const step = Math.min(100 - progress, Math.round(Math.random() * 10));\n          const interval = Math.round(Math.random() * 500 + 100);\n\n          storeTimeout(setTimeout(() => setProgress(progress + step), interval));\n        } else {\n          setState('success');\n        }\n      }\n    }, [state, progress]);\n\n    return (\n      <FileUploadListItemComponent\n        fileName=\"Filename.jpg\"\n        fileSize=\"2.45mb\"\n        state={state}\n        progress={progress}\n        onDismiss={() => {\n          timeout && clearTimeout(timeout);\n          setProgress(0);\n          setState('uploading');\n        }}\n      />\n    );"
        },
        {
          "name": "Size",
          "description": "FileUpload.List.Item supports `md` and `lg`. Default size is `md`.",
          "source": "<>\n      <FileUploadListItemComponent\n        fileName=\"Filename.jpg\"\n        fileSize=\"2.45mb\"\n        state=\"uploaded\"\n        size=\"md\"\n      />\n      <FileUploadListItemComponent\n        fileName=\"Filename.jpg\"\n        fileSize=\"2.45mb\"\n        state=\"uploaded\"\n        size=\"lg\"\n      />\n    </>"
        },
        {
          "name": "With Thumbnail",
          "description": "Set `thumbnail` to `true` to display items with a thumbnail image. After upload is complete, a preview image will display for GIF, JPG, PNG, or SVG files. All other files types will display with a default thumbnail.",
          "source": "<>\n      <FileUploadListItemComponent\n        fileName=\"Filename.jpg\"\n        fileSize=\"2.45mb\"\n        state=\"uploaded\"\n        thumbnail\n        size=\"md\"\n      />\n      <FileUploadListItemComponent\n        fileName=\"Filename.jpg\"\n        fileSize=\"2.45mb\"\n        state=\"uploaded\"\n        thumbnail\n        size=\"lg\"\n      />\n    </>"
        },
        {
          "name": "Error",
          "description": "Use `error` to specify HelperText text and display item in an error state.",
          "source": "<FileUploadListItemComponent\n      fileName=\"Filename.jpg\"\n      fileSize=\"2.45mb\"\n      state=\"error\"\n      error=\"Upload failed\"\n    />"
        },
        {
          "name": "Success Temp",
          "description": "We need to be able to review and inspect the success state.",
          "source": "<>\n      <FileUploadListItemComponent\n        fileName=\"Filename.jpg\"\n        fileSize=\"2.45mb\"\n        state=\"success\"\n        size=\"md\"\n      />\n      <FileUploadListItemComponent\n        fileName=\"Filename.jpg\"\n        fileSize=\"2.45mb\"\n        state=\"success\"\n        size=\"lg\"\n      />\n    </>"
        }
      ],
      "category": "Forms",
      "displayName": "FileUpload/FileUpload.List.Item",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Forms/FileUpload/FileUpload.Dropzone",
      "slug": "forms-fileupload-fileupload-dropzone",
      "description": "FileUpload.Dropzone is a child component of FileUpload that allows users to upload one or more files by dragging and dropping.",
      "type": "component",
      "props": [
        {
          "name": "children",
          "type": "React.ReactNode",
          "description": "Specify text for the Dropzone"
        },
        {
          "name": "error",
          "type": "boolean",
          "description": "Specify if FileUpload is in error state"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the FileUpload. By default it inherits the theme from the parent"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default FileUpload.Dropzone.",
          "source": "<FileUploadDropzoneComponent {...args} />"
        }
      ],
      "category": "Forms",
      "displayName": "FileUpload/FileUpload.Dropzone",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Forms/FileUpload/FileUpload.Button",
      "slug": "forms-fileupload-fileupload-button",
      "description": "FileUpload.Button is a child component of FileUpload that allows users to upload one or more files by activating a button.",
      "type": "component",
      "props": [
        {
          "name": "children",
          "type": "React.ReactNode",
          "description": "Specify text for the Button"
        },
        {
          "name": "error",
          "type": "boolean",
          "description": "Specify if FileUpload is in error state"
        },
        {
          "name": "buttonProps",
          "type": "ButtonProps",
          "description": "Specify the props passed to the Button component"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the FileUpload. By default it inherits the theme from the parent"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default FileUpload.Button.",
          "source": "<FileUploadButtonComponent {...extractInjectedProps(args, 'buttonProps')} />"
        },
        {
          "name": "Custom Content",
          "description": "Use [Button](/docs/components-button--docs) to customize the style of FileUpload.Button.",
          "source": "<FileUploadButtonComponent\n      buttonProps={{ appearance: 'accent', kind: 'filled' }}\n    />"
        }
      ],
      "category": "Forms",
      "displayName": "FileUpload/FileUpload.Button",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/EmptyState",
      "slug": "components-emptystate",
      "description": "Empty states are used to communicate page-level information. They are ideal for grabbing attention and generally include an action to prevent users from hitting a dead end.",
      "type": "component",
      "props": [
        {
          "name": "heading",
          "type": "React.ReactNode",
          "description": "Specify heading text for EmptyState"
        },
        {
          "name": "body",
          "type": "React.ReactNode",
          "description": "Specify body text for EmptyState"
        },
        {
          "name": "icon",
          "type": "React.ReactElement",
          "description": "Specify an icon for EmptyState"
        },
        {
          "name": "actions",
          "type": "React.ReactNode",
          "description": "Add actions to EmptyState"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the EmptyState. By default it inherits the theme from the parent"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default EmptyState.",
          "source": "<EmptyState {...args} />"
        },
        {
          "name": "With Icon",
          "description": "Displaying an `icon` is optional. Use `icon` to add and customize an icon.",
          "source": "<EmptyState\n      heading=\"Empty state heading\"\n      body=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sodales mi enim, sit amet interdum mi feugiat vitae.\"\n      icon={\n        <Caution\n          style={{ color: bmSemColorIconWarning, height: bmCompEmptyStateSizeIcon }}\n        />\n      }\n    />"
        },
        {
          "name": "With Heading",
          "description": "Displaying `heading` is optional. Use `heading` to add heading text to EmptyState.",
          "source": "<EmptyState heading=\"Empty state heading\" icon={AlertIcon} />"
        },
        {
          "name": "With Body",
          "description": "Displaying `body` is optional. Use `body` to add body text to EmptyState.",
          "source": "<EmptyState\n      body=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sodales mi enim, sit amet interdum mi feugiat vitae.\"\n      icon={AlertIcon}\n    />"
        },
        {
          "name": "With Actions",
          "description": "Displaying `actions` is optional. Use `actions` to add a `Button` and/or `Link` to EmptyState.",
          "source": "<EmptyState\n      heading=\"Empty state heading\"\n      body=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sodales mi enim, sit amet interdum mi feugiat vitae.\"\n      icon={AlertIcon}\n      actions={\n        <>\n          <Button kind=\"filled\">Button text</Button>\n          <Link appearance=\"primary\" href=\"\" size=\"md\" hideUnderline>\n            Link text\n          </Link>\n        </>\n      }\n    />"
        },
        {
          "name": "Custom Content",
          "description": "Use `icon`, `heading`, `body`, and `action` slots to customize EmptyState.",
          "source": "<EmptyState\n      heading=\"Empty state heading\"\n      body={\n        <Text color=\"secondary\" kind=\"body-lg\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}\n          <Text bold color=\"secondary\" kind=\"body-lg\">\n            Proin sodales{' '}\n          </Text>\n          mi enim, sit amet interdum mi feugiat vitae.\n        </Text>\n      }\n      icon={<IllustrationSlot style={{ width: '18.8rem', height: 'auto' }} />}\n      actions={\n        <div\n          style={{\n            display: 'flex',\n            flexDirection: 'column',\n            alignItems: 'center',\n            gap: bmSemSpace200,\n          }}\n        >\n          <span style={{ display: 'flex' }}>\n            <Text\n              color=\"secondary\"\n              kind=\"body-sm\"\n              // don't collapse whitespace and preserve end of line whitespace\n              style={{ whiteSpace: 'pre-wrap' }}\n            >\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}\n            </Text>\n            <Link href=\"\" appearance=\"secondary\" size=\"sm\">\n              Learn more\n            </Link>\n          </span>\n          <Button kind=\"outline\" size=\"md\">\n            Button text\n          </Button>\n        </div>\n      }\n    />"
        }
      ],
      "category": "Components",
      "displayName": "EmptyState",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Divider",
      "slug": "components-divider",
      "description": "A divider can be used to separate or group content and can be placed horizontally or vertically.",
      "type": "component",
      "props": [
        {
          "name": "children",
          "type": "ReactNode",
          "description": "Add text to the Divider"
        },
        {
          "name": "orientation",
          "type": "'horizontal' | 'vertical'",
          "description": "Specify the direction of the Divider",
          "defaultValue": "'horizontal'"
        },
        {
          "name": "borderColor",
          "type": "'positive' | 'warning' | 'negative' | 'inverse' | '00' | '00-alt' | '01' | '02' | '03' | 'info-primary' | 'info-secondary' | 'positive-strong' | 'warning-strong' | 'negative-strong' | 'info-primary-strong' | 'info-secondary-strong' | 'strong'",
          "description": "Specify the border color of the divider line",
          "defaultValue": "'00'"
        },
        {
          "name": "inset",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Add equal padding to each side of the Divider",
          "defaultValue": "'0'"
        },
        {
          "name": "borderWidth",
          "type": "'md' | 'lg' | 'xl'",
          "description": "Specify the width of the divider line",
          "defaultValue": "'md'"
        },
        {
          "name": "borderStyle",
          "type": "'solid' | 'dashed' | 'dotted'",
          "description": "Specify the style of the divider line",
          "defaultValue": "'solid'"
        },
        {
          "name": "length",
          "type": "string",
          "description": "Specify the length of the Divider"
        },
        {
          "name": "icon",
          "type": "ReactNode",
          "description": "Add an icon to the Divider"
        },
        {
          "name": "alignContent",
          "type": "'start' | 'end' | 'center'",
          "description": "Align content to the divider line",
          "defaultValue": "'center'"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Divider.",
          "source": "<div style={{ height: '11rem', display: 'flex', justifyContent: 'center' }}>\n      <Divider\n        orientation={orientation}\n        borderColor={borderColor}\n        borderStyle={borderStyle}\n        borderWidth={borderWidth}\n        alignContent={alignContent}\n        inset={inset}\n        icon={icon}\n        length={length}\n      >\n        {children}\n      </Divider>\n    </div>"
        },
        {
          "name": "Orientation",
          "description": "Divider supports `horizontal` and `vertical` orientation. Default `orientation` is `horizontal`.",
          "source": "<div>\n      <Divider />\n      <div style={{ marginTop: `${bmSemSpace300}`, height: '11rem' }}>\n        <Divider orientation=\"vertical\" />\n      </div>\n    </div>"
        },
        {
          "name": "With Text",
          "description": "Use `children` to add text to the Divider.\nDefault text size, weight, and color are customizable. See example [here](#custom-content).",
          "source": "<div>\n      <Divider>Content</Divider>\n      <div style={{ marginTop: `${bmSemSpace300}`, height: '11rem' }}>\n        <Divider orientation=\"vertical\">Content</Divider>\n      </div>\n    </div>"
        },
        {
          "name": "With Text And Icon",
          "description": "Use `children` and `icon` to pair the text with an icon.\nDefault text size, weight, and color are customizable.\nDefault icon size and color are customizable. See example [here](#custom-content).",
          "source": "<div>\n      <Divider icon={<Satellite />}>Content</Divider>\n      <div style={{ marginTop: `${bmSemSpace300}`, height: '11rem' }}>\n        <Divider orientation=\"vertical\" icon={<Satellite />}>\n          Content\n        </Divider>\n      </div>\n    </div>"
        },
        {
          "name": "Icon Only",
          "description": "Use `icon` to add an icon to the Divider.\nDefault icon size and color are customizable. See example [here](#custom-content).",
          "source": "<div>\n      <Divider icon={<Satellite />} />\n      <div style={{ marginTop: `${bmSemSpace300}`, height: '11rem' }}>\n        <Divider orientation=\"vertical\" icon={<Satellite />} />\n      </div>\n    </div>"
        },
        {
          "name": "Length",
          "description": "Use `length` to customize the length of a Divider.\nUse `rems` to specify length to ensure the Divider scales with user preferences.",
          "source": "<div\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n      }}\n    >\n      <Divider length=\"16rem\">Content</Divider>\n      <div style={{ marginTop: `${bmSemSpace300}`, height: '11rem' }}>\n        <Divider orientation=\"vertical\" length=\"8rem\">\n          Content\n        </Divider>\n      </div>\n    </div>"
        },
        {
          "name": "Border Color",
          "description": "Divider supports `00`, `00-alt`, `01`, `02`, and `03` border colors along with various other border color options.\nDefault `borderColor` is 00, which should be paired with a `surface-00` background.\nMore surface pairing examples are provided below.",
          "source": "<div\n      style={{\n        gap: bmSemSpace200,\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <Box backgroundColor={'00'} borderRadius={'md'} px={'150'} py={'150'}>\n        <Divider>on surface 00</Divider>\n      </Box>\n      <Box backgroundColor={'00-alt'} borderRadius={'md'} px={'150'} py={'150'}>\n        <Divider borderColor={'00-alt'}>on surface 00-alt</Divider>\n      </Box>\n      <Box backgroundColor={'01'} borderRadius={'md'} px={'150'} py={'150'}>\n        <Divider borderColor={'01'}>on surface 01</Divider>\n      </Box>\n      <Box backgroundColor={'02'} borderRadius={'md'} px={'150'} py={'150'}>\n        <Divider borderColor={'02'}>on surface 02</Divider>\n      </Box>\n      <Box backgroundColor={'03'} borderRadius={'md'} px={'150'} py={'150'}>\n        <Divider borderColor={'03'}>on surface 03</Divider>\n      </Box>\n    </div>"
        },
        {
          "name": "Align Content Horizontally",
          "description": "Divider supports `start`, `center`, and `end` alignment options. Default `alignContent` is `center`.",
          "source": "<div\n      style={{\n        gap: bmSemSpace200,\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <Divider alignContent=\"start\">Start</Divider>\n      <Divider alignContent=\"center\">Center</Divider>\n      <Divider alignContent=\"end\">End</Divider>\n    </div>"
        },
        {
          "name": "Align Content Vertically",
          "description": "Divider supports `start`, `center`, and `end` alignment options. Default `alignContent` is `center`.",
          "source": "<div\n      style={{\n        gap: bmSemSpace200,\n        display: 'flex',\n        height: '11rem',\n        justifyContent: 'space-between',\n      }}\n    >\n      <Divider alignContent=\"start\" orientation=\"vertical\">\n        Start\n      </Divider>\n      <Divider alignContent=\"center\" orientation=\"vertical\">\n        Center\n      </Divider>\n      <Divider alignContent=\"end\" orientation=\"vertical\">\n        End\n      </Divider>\n    </div>"
        },
        {
          "name": "With Inset",
          "description": "By default, the Divider is fluid and will span edge to edge within its parent container.\nUse `inset` to add equal padding to each side of the divider.",
          "source": "<div\n      style={{\n        gap: bmSemSpace200,\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <Box backgroundColor={'00'} borderRadius={'md'} py={'150'}>\n        <Divider>defualt</Divider>\n      </Box>\n      <Box backgroundColor={'00'} borderRadius={'md'} py={'150'}>\n        <Divider inset=\"100\">inset 100</Divider>\n      </Box>\n      <Box backgroundColor={'00'} borderRadius={'md'} py={'150'}>\n        <Divider inset={'150'}>inset 150</Divider>\n      </Box>\n    </div>"
        },
        {
          "name": "Border Width",
          "description": "Divider supports `md`, `lg`, and `xl` border width options for the divider line.\nDefault `borderWidth` is `md`.",
          "source": "<div\n      style={{\n        gap: bmSemSpace200,\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <Divider>border-width md</Divider>\n      <Divider borderWidth={'lg'}>border-width lg</Divider>\n      <Divider borderWidth={'xl'}>border-width xl</Divider>\n    </div>"
        },
        {
          "name": "Border Style",
          "description": "Divider supports `solid`, `dashed`, and `dotted` border style options for the divider line.\nDefault borderStyle is `solid`.",
          "source": "<div\n      style={{\n        gap: bmSemSpace200,\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <Divider>style solid</Divider>\n      <Divider borderStyle=\"dashed\">style dashed</Divider>\n      <Divider borderStyle={'dotted'}>style dotted</Divider>\n    </div>"
        },
        {
          "name": "Custom Content",
          "description": "The Divider is highly composable. Use `children` to customize text size, weight, and color.\nUse `icon` to customize icon size and color. Use `borderColor` and `borderStyle` to customize the divider line.\n\n> Pass a component to `children` instead of adding text to the Divider.",
          "source": "<div\n      style={{\n        gap: bmSemSpace300,\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <Divider borderWidth={'lg'}>\n        <Text kind={'heading-xs'}>Typography size and weight</Text>\n      </Divider>\n      <Divider\n        borderColor={'positive'}\n        icon={<Icon icon={CheckCircleOutlined} color={'positive'} size={'sm'} />}\n      >\n        <div style={{ display: 'flex', alignItems: 'center' }}>\n          <Text color={'positive'} kind={'label-sm'}>\n            Alert colors\n          </Text>\n        </div>\n      </Divider>\n      <Divider borderColor={'warning'} borderWidth={'lg'}>\n        <Icon icon={WarningAmberOutlined} color={'warning'} size=\"xl\" />\n      </Divider>\n      <Divider>\n        <Badge>Badge</Badge>\n      </Divider>\n    </div>"
        }
      ],
      "category": "Components",
      "displayName": "Divider",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Dialog",
      "slug": "components-dialog",
      "description": "A Dialog presents focused content, tasks, or decisions in a temporary window above the current page.\n\nUse a Dialog when the interaction is contained and benefits from being presented separately from the surrounding interface. If the experience needs more room for editing, browsing or configuration, consider using a [Panel](?path=/docs/in-development-panel--docs).",
      "type": "component",
      "props": [
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the Dialog. By default it inherits the theme from the parent"
        },
        {
          "name": "children",
          "type": "React.ReactNode",
          "description": "Specify content and sub-components of the Dialog",
          "required": true
        },
        {
          "name": "defaultOpen",
          "type": "boolean",
          "description": "Specify the default open state"
        },
        {
          "name": "open",
          "type": "boolean",
          "description": "Specify the display state"
        },
        {
          "name": "onOpenChange",
          "type": "(open: boolean, event?: Event, reason?: OpenChangeReason) => void",
          "description": "Callback function that receives change in visibility state of the FloatingUI\n\n<a href=\"https://floating-ui.com/docs/react#open-event-callback\" target=\"_blank\" rel=\"noopener noreferrer\">\n    onOpenChange\n</a>"
        },
        {
          "name": "portalled",
          "type": "boolean | FloatingPortalProps",
          "description": "Specify if the Dialog is portalled"
        },
        {
          "name": "role",
          "type": "UseRoleProps",
          "description": "Adds base screen reader props to the reference and floating elements for a given `role`"
        },
        {
          "name": "size",
          "type": "'sm' | 'md' | 'lg' | 'xl' | 'full'",
          "description": "Specify the size of the Dialog",
          "defaultValue": "md"
        },
        {
          "name": "openOnSelected",
          "type": "boolean | UseSelectedProps",
          "description": "Enable selection interaction"
        },
        {
          "name": "focusConfiguration",
          "type": "boolean | FocusManagerProps",
          "description": "Configure the focus manager\n\nIf nothing is specified, the focus manager will not be rendered\n\n[FloatingFocusManagerProps](https://floating-ui.com/docs/floatingfocusmanager#props)"
        },
        {
          "name": "dismiss",
          "type": "UseDismissProps",
          "description": "Configure dismiss behaviour (escape key, outside press, etc.)"
        }
      ],
      "subcomponentProps": [
        {
          "name": "Dialog.Trigger",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "The content that will trigger the Dialog. Forwards refs to the trigger element",
              "required": true
            }
          ]
        },
        {
          "name": "Dialog.Content",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "Specify custom content for the Dialog",
              "required": true
            }
          ]
        },
        {
          "name": "Dialog.Header",
          "props": [
            {
              "name": "heading",
              "type": "ReactNode",
              "description": "Add heading text for the Dialog"
            },
            {
              "name": "dismissible",
              "type": "boolean",
              "description": "Specify if the Dialog can be dismissed",
              "defaultValue": "true"
            },
            {
              "name": "closeButtonAriaLabel",
              "type": "string",
              "description": "Specify an aria-label for the close button",
              "defaultValue": "Close dialog"
            },
            {
              "name": "divider",
              "type": "boolean",
              "description": "Specify if the Dialog displays a top divider",
              "defaultValue": "true"
            },
            {
              "name": "disableDividerOnOverflow",
              "type": "boolean",
              "description": "Disable the divider when the content is overflowing",
              "defaultValue": "false"
            },
            {
              "name": "appearance",
              "type": "'positive' | 'warning' | 'negative' | 'information'",
              "description": "Specify the appearance of the heading. `icon` is required to render appearance"
            },
            {
              "name": "icon",
              "type": "ReactElement<any, string | JSXElementConstructor<any>>",
              "description": "Specify an icon next to heading"
            },
            {
              "name": "iconAriaLabel",
              "type": "string",
              "description": "Specify an aria-label for the icon"
            },
            {
              "name": "description",
              "type": "string",
              "description": "Add description text to the header"
            },
            {
              "name": "children",
              "type": "ReactNode",
              "description": "Add custom content to the header"
            },
            {
              "name": "onDismiss",
              "type": "() => void",
              "description": "Specify a callback function for when the close button is activated"
            }
          ]
        },
        {
          "name": "Dialog.Body",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "Specify custom content for the Dialog"
            },
            {
              "name": "text",
              "type": "string",
              "description": "Specify the text content for the Dialog.\nFor custom content, use children instead"
            }
          ]
        },
        {
          "name": "Dialog.Footer",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "Specify the actions to be displayed in the footer.\nIf more than 3 actions are provided, only the first 3 will be rendered",
              "required": true
            }
          ]
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Dialog.",
          "source": "<Dialog {...args} portalled>\n        <Dialog.Trigger>\n          <Button>Dialog trigger</Button>\n        </Dialog.Trigger>\n        <Dialog.Content>\n          <Dialog.Header heading=\"Dialog heading\" />\n          <Dialog.Body text=\"This is optional body copy. The body of a Dialog is fully configurable.\" />\n          <Dialog.Footer>\n            <Button>Save</Button>\n            <Dialog.CloseTrigger>\n              <Button kind=\"outline\">Cancel</Button>\n            </Dialog.CloseTrigger>\n          </Dialog.Footer>\n        </Dialog.Content>\n      </Dialog>"
        },
        {
          "name": "Size",
          "description": "Dialog supports `sm`, `md`, `lg`, `xl`, and `full`. Default size is `md`.\n\n> When viewport is less than 513px, the Dialog will display in mobile mode.",
          "source": "const [size, setSize] = useState<DialogProps['size']>('md');\n\n    return (\n      <Box\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: bmSemSpace150,\n          alignItems: 'center',\n        }}\n      >\n        <RadioButtonGroup orientation=\"horizontal\">\n          <RadioButton\n            label=\"Small\"\n            value=\"sm\"\n            checked={size === 'sm'}\n            onChange={() => setSize('sm')}\n          />\n          <RadioButton\n            label=\"Medium\"\n            value=\"md\"\n            checked={size === 'md'}\n            onChange={() => setSize('md')}\n          />\n          <RadioButton\n            label=\"Large\"\n            value=\"lg\"\n            checked={size === 'lg'}\n            onChange={() => setSize('lg')}\n          />\n          <RadioButton\n            label=\"Extra large\"\n            value=\"xl\"\n            checked={size === 'xl'}\n            onChange={() => setSize('xl')}\n          />\n          <RadioButton\n            label=\"Full\"\n            value=\"full\"\n            checked={size === 'full'}\n            onChange={() => setSize('full')}\n          />\n        </RadioButtonGroup>\n        <Dialog size={size} portalled>\n          <Dialog.Trigger>\n            <Button>Dialog trigger</Button>\n          </Dialog.Trigger>\n          <Dialog.Content>\n            <Dialog.Header heading=\"Dialog heading\" />\n            <Dialog.Body text=\"This is optional body copy. The body of a Dialog is fully configurable.\" />\n            <Dialog.Footer>\n              <Button>Save</Button>\n              <Dialog.CloseTrigger>\n                <Button kind=\"outline\">Cancel</Button>\n              </Dialog.CloseTrigger>\n            </Dialog.Footer>\n          </Dialog.Content>\n        </Dialog>\n      </Box>\n    );"
        },
        {
          "name": "Appearance",
          "description": "Dialog.Header supports `information`, `positive`, `warning`, and `negative` heading appearances.\nAppearance headers include an icon by default.",
          "source": "const [appearance, setAppearance] =\n      useState<DialogHeaderProps['appearance']>('information');\n\n    return (\n      <Box\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: bmSemSpace150,\n          alignItems: 'center',\n        }}\n      >\n        <RadioButtonGroup orientation=\"horizontal\">\n          <RadioButton\n            label=\"Information\"\n            value=\"information\"\n            checked={appearance === 'information'}\n            onChange={() => setAppearance('information')}\n          />\n          <RadioButton\n            label=\"Positive\"\n            value=\"positive\"\n            checked={appearance === 'positive'}\n            onChange={() => setAppearance('positive')}\n          />\n          <RadioButton\n            label=\"Warning\"\n            value=\"warning\"\n            checked={appearance === 'warning'}\n            onChange={() => setAppearance('warning')}\n          />\n          <RadioButton\n            label=\"Negative\"\n            value=\"negative\"\n            checked={appearance === 'negative'}\n            onChange={() => setAppearance('negative')}\n          />\n        </RadioButtonGroup>\n        <Dialog portalled>\n          <Dialog.Trigger>\n            <Button>Dialog trigger</Button>\n          </Dialog.Trigger>\n          <Dialog.Content>\n            <Dialog.Header appearance={appearance} heading=\"Dialog heading\" />\n            <Dialog.Body text=\"This is optional body copy. The body of a Dialog is fully configurable.\" />\n            <Dialog.Footer>\n              <Button>Save</Button>\n              <Dialog.CloseTrigger>\n                <Button kind=\"outline\">Cancel</Button>\n              </Dialog.CloseTrigger>\n            </Dialog.Footer>\n          </Dialog.Content>\n        </Dialog>\n      </Box>\n    );"
        },
        {
          "name": "With Icon",
          "description": "Displaying an icon next to the heading is optional, unless `appearance` has been specified. Use `icon` to display an\nicon before the `heading`.",
          "source": "<Box\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: bmSemSpace150,\n          alignItems: 'center',\n        }}\n      >\n        <Dialog portalled>\n          <Dialog.Trigger>\n            <Button>Dialog trigger</Button>\n          </Dialog.Trigger>\n          <Dialog.Content>\n            <Dialog.Header\n              icon={<Icon icon={Satellite} />}\n              heading=\"Dialog heading\"\n            />\n            <Dialog.Body text=\"This is optional body copy. The body of a Dialog is fully configurable.\" />\n            <Dialog.Footer>\n              <Button>Save</Button>\n              <Dialog.CloseTrigger>\n                <Button kind=\"outline\">Cancel</Button>\n              </Dialog.CloseTrigger>\n            </Dialog.Footer>\n          </Dialog.Content>\n        </Dialog>\n      </Box>"
        },
        {
          "name": "With Description",
          "description": "Use `description` to add text under the `heading` of Dialog.Header.",
          "source": "<Box\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: bmSemSpace150,\n          alignItems: 'center',\n        }}\n      >\n        <Dialog portalled>\n          <Dialog.Trigger>\n            <Button>Dialog trigger</Button>\n          </Dialog.Trigger>\n          <Dialog.Content>\n            <Dialog.Header\n              heading=\"Dialog heading\"\n              description=\"Descriptive text used to add extra information to the header\"\n            />\n            <Dialog.Body text=\"This is optional body copy. The body of a Dialog is fully configurable.\" />\n            <Dialog.Footer>\n              <Button>Save</Button>\n              <Dialog.CloseTrigger>\n                <Button kind=\"outline\">Cancel</Button>\n              </Dialog.CloseTrigger>\n            </Dialog.Footer>\n          </Dialog.Content>\n        </Dialog>\n      </Box>"
        },
        {
          "name": "Custom Header",
          "description": "Use `children` to add custom content such as Tabs to Dialog.Header.",
          "source": "const [activeTab, setActiveTab] = useState('about');\n\n    const TextContent = () => {\n      switch (activeTab) {\n        case 'members':\n          return (\n            <>This is the members tab content. It can be customized as needed.</>\n          );\n        case 'integrations':\n          return (\n            <>\n              This is the integrations tab content. It can be customized as needed.\n            </>\n          );\n        case 'settings':\n          return (\n            <>This is the settings tab content. It can be customized as needed.</>\n          );\n        default:\n          return <>This is the about tab content. It can be customized as needed.</>;\n      }\n    };\n\n    return (\n      <Box\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: bmSemSpace150,\n          alignItems: 'center',\n        }}\n      >\n        <Dialog portalled>\n          <Dialog.Trigger>\n            <Button>Dialog trigger</Button>\n          </Dialog.Trigger>\n          <Dialog.Content>\n            <Dialog.Header heading=\"Dialog heading\" divider={false}>\n              <Tabs style={{ gap: 0 }} onChange={value => setActiveTab(value)}>\n                <Tabs.Group>\n                  <Tabs.Item value=\"about\">About</Tabs.Item>\n                  <Tabs.Item value=\"members\">Members</Tabs.Item>\n                  <Tabs.Item value=\"integrations\">Integrations</Tabs.Item>\n                  <Tabs.Item value=\"settings\">Settings</Tabs.Item>\n                </Tabs.Group>\n              </Tabs>\n            </Dialog.Header>\n            <Dialog.Body>\n              <TextContent />\n            </Dialog.Body>\n            <Dialog.Footer>\n              <Button>Save</Button>\n              <Dialog.CloseTrigger>\n                <Button kind=\"outline\">Cancel</Button>\n              </Dialog.CloseTrigger>\n            </Dialog.Footer>\n          </Dialog.Content>\n        </Dialog>\n      </Box>\n    );"
        },
        {
          "name": "Actions",
          "description": "Dialog.Footer supports up to three actions, `primary`, `secondary`, and `tertiary`.\nIf more than three actions are provided, only the first three will be rendered.",
          "source": "<Dialog {...args} portalled>\n        <Dialog.Trigger>\n          <Button>Dialog trigger</Button>\n        </Dialog.Trigger>\n        <Dialog.Content>\n          <Dialog.Header heading=\"Dialog heading\" />\n          <Dialog.Body text=\"This is optional body copy. The body of a Dialog is fully configurable.\" />\n          <Dialog.Footer>\n            <Button>Save</Button>\n            <Dialog.CloseTrigger>\n              <Button kind=\"outline\">Cancel</Button>\n            </Dialog.CloseTrigger>\n            <Button kind=\"bare\">Tertiary actions</Button>\n          </Dialog.Footer>\n        </Dialog.Content>\n      </Dialog>"
        },
        {
          "name": "Custom Actions",
          "description": "Pass a small component like Checkbox to the `tertiary` action position.",
          "source": "<Dialog {...args} portalled>\n        <Dialog.Trigger>\n          <Button>Dialog trigger</Button>\n        </Dialog.Trigger>\n        <Dialog.Content>\n          <Dialog.Header heading=\"Dialog heading\" />\n          <Dialog.Body text=\"This is optional body copy. The body of a Dialog is fully configurable.\" />\n          <Dialog.Footer>\n            <Button>Save</Button>\n            <Dialog.CloseTrigger>\n              <Button kind=\"outline\">Cancel</Button>\n            </Dialog.CloseTrigger>\n            <Checkbox label=\"Don't show again\" />\n          </Dialog.Footer>\n        </Dialog.Content>\n      </Dialog>"
        },
        {
          "name": "Hide Divider",
          "description": "Displaying the top divider in `Dialog.Header` is optional. Set `divider` to `false` to hide the divider.",
          "source": "<Dialog {...args} portalled>\n        <Dialog.Trigger>\n          <Button>Dialog trigger</Button>\n        </Dialog.Trigger>\n        <Dialog.Content>\n          <Dialog.Header heading=\"Dialog heading\" divider={false} />\n          <Dialog.Body text=\"This is optional body copy. The body of a Dialog is fully configurable.\" />\n          <Dialog.Footer>\n            <Button>Save</Button>\n            <Dialog.CloseTrigger>\n              <Button kind=\"outline\">Cancel</Button>\n            </Dialog.CloseTrigger>\n          </Dialog.Footer>\n        </Dialog.Content>\n      </Dialog>"
        },
        {
          "name": "Dismissible",
          "description": "Making a Dialog dismissible is optional. Set `dismissible` to `false` to remove the CloseButton from `Dialog.Header`.\n\n> Dismissal behavior can be applied to any element within the Dialog by wrapping it with `Dialog.CloseTrigger`.",
          "source": "<Dialog {...args} portalled>\n        <Dialog.Trigger>\n          <Button>Dialog trigger</Button>\n        </Dialog.Trigger>\n        <Dialog.Content>\n          <Dialog.Header heading=\"Dialog heading\" dismissible={false} />\n          <Dialog.Body text=\"This is optional body copy. The body of a Dialog is fully configurable.\" />\n          <Dialog.Footer>\n            <Button>Save</Button>\n            <Dialog.CloseTrigger>\n              <Button kind=\"outline\">Cancel</Button>\n            </Dialog.CloseTrigger>\n          </Dialog.Footer>\n        </Dialog.Content>\n      </Dialog>"
        },
        {
          "name": "Custom Content",
          "description": "This example uses `children` to add custom content to `Dialog.Body`\nwhile `primary` and `tertiary` action positions are used to create a flow in `Dialog.Footer`.\n\n> A fragment is used to fill the secondary action position.",
          "source": "<Dialog portalled>\n        <Dialog.Trigger>\n          <Button>Dialog trigger</Button>\n        </Dialog.Trigger>\n        <Dialog.Content>\n          <Dialog.Header divider={false} />\n          <Dialog.Body>\n            <div\n              style={{\n                paddingInline: '2.5rem',\n                paddingBlockEnd: bmSemSpace100,\n                display: 'flex',\n                flexDirection: 'column',\n                gap: bmSemSpace100,\n              }}\n            >\n              <div\n                style={{\n                  display: 'flex',\n                  flexDirection: 'column',\n                  alignItems: 'center',\n                  gap: bmSemSpace150,\n                }}\n              >\n                <img\n                  width={224.581}\n                  height={176}\n                  src={Illustration}\n                  alt=\"Illustration\"\n                />\n                <Text kind=\"heading-lg\">Welcome!</Text>\n              </div>\n              <Text kind=\"body-lg\" style={{ textAlign: 'center' }} color=\"secondary\">\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non\n                felis quis sem lobortis vehicula at quis libero.\n              </Text>\n            </div>\n          </Dialog.Body>\n          <Dialog.Footer>\n            <Button iconAfter={<ArrowForward />}>Next step</Button>\n            {/* eslint-disable-next-line react/jsx-no-useless-fragment */}\n            <></>\n            <Button kind=\"outline\" iconBefore={<ArrowBack />}>\n              Previous step\n            </Button>\n          </Dialog.Footer>\n        </Dialog.Content>\n      </Dialog>"
        }
      ],
      "category": "Components",
      "displayName": "Dialog",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Forms/DateField",
      "slug": "forms-datefield",
      "description": "DateField allows users to enter a date into a text field. Day, month, and year\nare separate segments, each independently focusable.",
      "type": "component",
      "props": [
        {
          "name": "helperText",
          "type": "Nullable<ReactNode>",
          "description": "Specify HelperText for DateField",
          "defaultValue": "null"
        },
        {
          "name": "required",
          "type": "boolean",
          "description": "Specify if DateField is a required input",
          "defaultValue": "false"
        },
        {
          "name": "hideRequiredMarker",
          "type": "boolean",
          "description": "Specify if the DateField displays with an asterisk",
          "defaultValue": "false"
        },
        {
          "name": "label",
          "type": "Nullable<ReactNode>",
          "description": "Specify Label for DateField",
          "defaultValue": "null"
        },
        {
          "name": "error",
          "type": "string | boolean",
          "description": "Specify error text and display error state of a DateField"
        },
        {
          "name": "readOnly",
          "type": "boolean",
          "description": "Specify if DateField displays in a read-only state",
          "defaultValue": "false"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if DateField displays in a disabled state",
          "defaultValue": "false"
        },
        {
          "name": "fluid",
          "type": "boolean",
          "description": "Specify if DateField is fluid",
          "defaultValue": "false"
        },
        {
          "name": "size",
          "type": "'sm' | 'md' | 'lg'",
          "description": "Specify the size of DateField"
        },
        {
          "name": "width",
          "type": "string",
          "description": "Specify the width of DateField"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the DateField. By default it inherits the theme from the parent"
        },
        {
          "name": "validationRules",
          "type": "FormValidator[]",
          "description": "Specify form validation rules for DateField"
        },
        {
          "name": "value",
          "type": "Nullable<Date>",
          "description": "Specify the controlled date value of DateField; pass `null` to clear"
        },
        {
          "name": "defaultValue",
          "type": "Nullable<Date>",
          "description": "Specify the initial date value of an uncontrolled DateField"
        },
        {
          "name": "onChange",
          "type": "(value: Nullable<Date>) => void",
          "description": "Specify the handler called when the date value changes"
        },
        {
          "name": "minDate",
          "type": "Date",
          "description": "Specify the earliest date; a touched value springs up to it on blur\n(add a `validationRules` entry to block submit)"
        },
        {
          "name": "maxDate",
          "type": "Date",
          "description": "Specify the latest date; a touched value springs down to it on blur\n(add a `validationRules` entry to block submit)"
        },
        {
          "name": "getClampAnnouncement",
          "type": "(clampedDate: Date) => string",
          "description": "Specify a localized message, announced politely to screen readers when a\ntouched value springs to a bound; omit for no announcement"
        },
        {
          "name": "locale",
          "type": "string",
          "description": "Specify the BCP-47 locale tag driving segment order and separators\n(e.g. `en-GB` → DD/MM/YYYY, `de-DE` → DD.MM.YYYY)",
          "defaultValue": "'en-US'"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default DateField.",
          "source": "<DateField {...args} />"
        },
        {
          "name": "With Value",
          "description": "When DateField is controlled, the consumer owns the `value`; `onChange` fires\non user-driven transitions.",
          "source": "const [value, setValue] = useState<Date | null>(FOUNDING_DATE);\n    return (\n      <DateField\n        label={<Label>Founding date</Label>}\n        value={value}\n        onChange={setValue}\n      />\n    );"
        },
        {
          "name": "With Default Value",
          "description": "When DateField is used uncontrolled, add values via `defaultValue`.",
          "source": "<DateField label={<Label>Founding date</Label>} defaultValue={FOUNDING_DATE} />"
        },
        {
          "name": "Without Label",
          "description": "Displaying the `Label` is optional. DateField will display without `Label` if\nnot passed as a prop. If no `label` is passed, set `aria-label` to make this\ninput accessible for screen readers.",
          "source": "<DateField aria-label=\"Date\" />"
        },
        {
          "name": "With Helper Text",
          "description": "Displaying `HelperText` is optional. DateField will display with `HelperText`\nif passed as a prop.",
          "source": "<DateField\n        label={<Label>Date</Label>}\n        helperText={<HelperText>Month, Day, Year</HelperText>}\n      />"
        },
        {
          "name": "Required",
          "description": "Set `required` to `true` to make DateField required. Set `hideRequiredMarker`\nto `true` to remove the asterisk (*).",
          "source": "<div\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: 'var(--bm-sem-space-200)',\n      }}\n    >\n      <DateField required label={<Label>With required marker</Label>} />\n      <DateField\n        required\n        hideRequiredMarker\n        label={<Label>Without required marker</Label>}\n      />\n    </div>"
        },
        {
          "name": "Optional",
          "description": "Pass `optional` to `Label` to show that a DateField is optional. Do not mix\n`required` and `optional` markers in the same form set.",
          "source": "<DateField label={<Label optional=\"(optional)\">Date</Label>} />"
        },
        {
          "name": "Error",
          "description": "Use `error` to specify `HelperText` text and display DateField in an error state.",
          "source": "<DateField label={<Label>Date</Label>} error=\"Enter a valid date\" />"
        },
        {
          "name": "Read Only",
          "description": "Set `readOnly` to `true` to display DateField in a read only state.",
          "source": "<DateField label={<Label>Date</Label>} value={FOUNDING_DATE} readOnly />"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` to display DateField in a disabled state.",
          "source": "<DateField label={<Label>Date</Label>} value={FOUNDING_DATE} disabled />"
        },
        {
          "name": "Width",
          "description": "Use `width` to customize the width of a DateField. Use `rems` to specify width\nto ensure DateField scales with user preferences.",
          "source": "<DateField width=\"20rem\" label={<Label>Date</Label>} />"
        },
        {
          "name": "Fluid",
          "description": "Set `fluid` to `true` to make DateField span its parent container.",
          "source": "<DateField label={<Label>Date</Label>} fluid />"
        },
        {
          "name": "Size",
          "description": "DateField supports `sm`, `md`, and `lg` sizes. Default size is `md`.",
          "source": "<div\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: 'var(--bm-sem-space-200)',\n      }}\n    >\n      <DateField\n        size=\"sm\"\n        label={<Label>Small</Label>}\n        helperText={<HelperText>Month, Day, Year</HelperText>}\n      />\n      <DateField\n        size=\"md\"\n        label={<Label>Medium</Label>}\n        helperText={<HelperText>Month, Day, Year</HelperText>}\n      />\n      <DateField\n        size=\"lg\"\n        label={<Label>Large</Label>}\n        helperText={<HelperText>Month, Day, Year</HelperText>}\n      />\n    </div>"
        },
        {
          "name": "Min Max Constraints",
          "description": "Bounded to a 90-day window from today. `minDate`/`maxDate` clamp a\ntouched value to the nearest bound on blur — a UX \"spring,\" not a\nvalidity check: the field never flags the value invalid or blocks\nsubmission by itself. Pair a `validationRule` for an error message and\nsubmit-blocking — see `MinMaxWithValidation`.",
          "source": "<DateField\n      label={<Label>Appointment date</Label>}\n      helperText={<HelperText>Choose a date within the next 90 days</HelperText>}\n      minDate={minMaxToday}\n      maxDate={minMaxIn90Days}\n      // Announced politely to screen readers when a touched value springs to a\n      // bound on blur (consumer-supplied so the copy stays localizable).\n      getClampAnnouncement={clampedDate =>\n        `Date adjusted to ${clampedDate.toLocaleDateString()}`\n      }\n    />"
        },
        {
          "name": "Min Max With Validation",
          "description": "`minDate`/`maxDate` clamp but never show an error message on their own\n(see `MinMaxConstraints`) — and the clamp only springs a value the user\ntouched, so the pre-filled out-of-range date below reaches submit\nuntouched. Pair a `validators.define` date-range rule via\n`validationRules` to catch it — the WCAG-complete pattern to copy for any\nDateField range error.\n\n> Submit the form below to see the error.",
          "source": "<Form name=\"min-max-with-validation\">\n      <DateField\n        name=\"appointment-date\"\n        label={<Label>Appointment date</Label>}\n        helperText={<HelperText>Choose a date within the next 90 days</HelperText>}\n        defaultValue={minMaxOutOfRangeDefault}\n        minDate={minMaxToday}\n        maxDate={minMaxIn90Days}\n        validationRules={[\n          validators.define(element => {\n            const { value } = element as HTMLInputElement;\n            if (!value) return { error: false };\n\n            const [year, month, day] = value.split('-').map(Number);\n            const date = new Date(year, month - 1, day);\n            const error = date < minMaxToday || date > minMaxIn90Days;\n\n            return { error, message: 'Choose a date within the next 90 days' };\n          }),\n        ]}\n      />\n      <div style={{ marginTop: 'var(--bm-sem-space-200)' }}>\n        <Button type=\"submit\">Submit</Button>\n      </div>\n    </Form>"
        },
        {
          "name": "Locales",
          "description": "Segment order and separators follow the `locale`: en-US `MM/DD/YYYY`, en-GB\n`DD/MM/YYYY`, ja-JP `YYYY/MM/DD`, de-DE `DD.MM.YYYY`. Defaults to `en-US`.\nThe last two rows show separators beyond `/` and `.` — ko-KR's trailing dots\nand ar-SA's native RTL-marked `/`. Placeholder letters stay `MM`/`DD`/`YYYY`\nin every locale.",
          "source": "<div\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: 'var(--bm-sem-space-200)',\n      }}\n    >\n      <DateField locale=\"en-US\" label={<Label>en-US (MM/DD/YYYY)</Label>} />\n      <DateField locale=\"en-GB\" label={<Label>en-GB (DD/MM/YYYY)</Label>} />\n      <DateField locale=\"ja-JP\" label={<Label>ja-JP (YYYY/MM/DD)</Label>} />\n      <DateField locale=\"de-DE\" label={<Label>de-DE (DD.MM.YYYY)</Label>} />\n      <DateField locale=\"ko-KR\" label={<Label>ko-KR (YYYY. MM. DD.)</Label>} />\n      <DateField locale=\"ar-SA\" label={<Label>ar-SA (RTL separators)</Label>} />\n    </div>"
        }
      ],
      "category": "Forms",
      "displayName": "DateField",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/CloseButton",
      "slug": "components-closebutton",
      "description": "The CloseButton is used inside of other components, like a page alert, toast or a modal. Its function is to close or dismiss its parent component.",
      "type": "component",
      "props": [
        {
          "name": "size",
          "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
          "description": "Specify the size of the CloseButton",
          "defaultValue": "md"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the CloseButton. By default it inherits the theme from the parent"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if the CloseButton is disabled",
          "defaultValue": "false"
        },
        {
          "name": "productType",
          "type": "'enterprise' | 'consumer'",
          "description": "Specify the productType of the CloseButton"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default CloseButton.",
          "source": "<CloseButton {...args} />"
        },
        {
          "name": "Size",
          "description": "CloseButton supports, `xs`, `sm`, `md`, `lg`, and `xl`. Default size is `md`.",
          "source": "<>\n        {sizes.map(size => (\n          <CloseButton size={size} />\n        ))}\n      </>"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` to disable the CloseButton.",
          "source": "<CloseButton disabled />"
        },
        {
          "name": "Product Type",
          "description": "The `productType` theme globally sets design decision for multiple components, including CloseButton. Default productType is `enterprise`.",
          "source": "<Box style={{ display: 'flex', flexDirection: 'column', gap: bmSemSpace150 }}>\n      <CloseButton productType=\"enterprise\" />\n      <CloseButton productType=\"consumer\" />\n    </Box>"
        }
      ],
      "category": "Components",
      "displayName": "CloseButton",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Chip/ChipGroup",
      "slug": "components-chip-chipgroup",
      "description": "ChipGroup allows for single or multi-selection within a group of Chips.",
      "type": "component",
      "props": [
        {
          "name": "children",
          "type": "any",
          "description": "Specify amount of Chips in a ChipGroup",
          "required": true
        },
        {
          "name": "multiple",
          "type": "boolean",
          "description": "Specify if multiple Chips can be selected",
          "defaultValue": "false"
        },
        {
          "name": "onChange",
          "type": "(selectedChips: string[]) => void",
          "description": "Specify a change handler for the ChipGroup"
        },
        {
          "name": "selectedChips",
          "type": "string[]",
          "description": "Controlled selected Chips"
        },
        {
          "name": "name",
          "type": "string",
          "description": "Specify the name attribute for the ChipGroup"
        },
        {
          "name": "selectable",
          "type": "boolean",
          "description": "Specify if the ChipGroup is selectable",
          "defaultValue": "false"
        },
        {
          "name": "gap",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify the gap between Chips",
          "defaultValue": "50"
        },
        {
          "name": "size",
          "type": "'sm' | 'md' | 'lg'",
          "description": "Specify the size of the ChipGroup",
          "defaultValue": "md"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default ChipGroup.",
          "source": "<ChipGroup {...args}>\n      {[1, 2, 3].map((_, index) => (\n        <Chip key={index}>{defaultStoryBookText}</Chip>\n      ))}\n    </ChipGroup>"
        },
        {
          "name": "Single Select",
          "description": "ChipGroup defaults to single select.",
          "source": "<ChipGroup name=\"single-select\" selectable>\n      <Chip defaultChecked>{singleSelectStoryText}</Chip>\n      <Chip>{singleSelectStoryText}</Chip>\n      <Chip>{singleSelectStoryText}</Chip>\n    </ChipGroup>"
        },
        {
          "name": "Multi Select",
          "description": "Set `multiple` to `true` to allow multiple chips to be selected within a ChipGroup.",
          "source": "<ChipGroup multiple selectable>\n      <Chip defaultChecked>{multipleSelectStoryText}</Chip>\n      <Chip defaultChecked>{multipleSelectStoryText}</Chip>\n      <Chip>{multipleSelectStoryText}</Chip>\n    </ChipGroup>"
        },
        {
          "name": "Controlled Component",
          "description": "View example of ChipGroup as a controlled component.",
          "source": "const [selectedChips, setSelectedChips] = useState<string[]>([]);\n\n    const handleChipGroupChange = (selected: string[]) => {\n      setSelectedChips(selected);\n    };\n\n    const [selectedSingleChip, setSelectedSingleChip] = useState<string[]>([]);\n\n    const handleSingleChipChange = (selectedChips: string[]) => {\n      setSelectedSingleChip(selectedChips);\n    };\n    return (\n      <div>\n        <div style={{ marginBottom: '3rem' }}>\n          <Text\n            as={'h5'}\n            color={'primary'}\n            kind={'label-sm'}\n            style={{ marginBottom: '1rem' }}\n          >\n            Single Select ChipGroup: {selectedSingleChip}\n          </Text>\n          <ChipGroup\n            selectable\n            selectedChips={selectedSingleChip}\n            onChange={handleSingleChipChange}\n          >\n            <Chip id=\"option1\">Option 1</Chip>\n            <Chip id=\"option2\">Option 2</Chip>\n            <Chip id=\"option3\">Option 3</Chip>\n          </ChipGroup>\n        </div>\n\n        <div>\n          <Text\n            as={'h5'}\n            color={'primary'}\n            kind={'label-sm'}\n            style={{ marginBottom: '1rem' }}\n          >\n            Multi Select ChipGroup: {selectedChips.join(', ')}\n          </Text>\n          <ChipGroup\n            selectable\n            multiple\n            selectedChips={selectedChips}\n            onChange={handleChipGroupChange}\n          >\n            <Chip id=\"option1\">Option 1</Chip>\n            <Chip id=\"option2\">Option 2</Chip>\n            <Chip id=\"option3\">Option 3</Chip>\n          </ChipGroup>\n        </div>\n      </div>\n    );"
        }
      ],
      "category": "Components",
      "displayName": "Chip/ChipGroup",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Chip/Chip",
      "slug": "components-chip-chip",
      "description": "A Chip collects data and filters content.",
      "type": "component",
      "props": [
        {
          "name": "children",
          "type": "React.ReactNode",
          "description": "Provide content for the Chip",
          "required": true
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if the Chip is disabled",
          "defaultValue": "false"
        },
        {
          "name": "selectable",
          "type": "boolean",
          "description": "Specify if the Chip is selectable",
          "defaultValue": "false"
        },
        {
          "name": "size",
          "type": "'sm' | 'md' | 'lg'",
          "description": "Specify the size of the Chip",
          "defaultValue": "'md'"
        },
        {
          "name": "onDismiss",
          "type": "React.MouseEventHandler<HTMLButtonElement>",
          "description": "Specify a callback function for when the close button is activated"
        },
        {
          "name": "icon",
          "type": "React.ReactNode",
          "description": "Specify an icon for the Chip"
        },
        {
          "name": "fluid",
          "type": "boolean",
          "description": "Specify if a Chip is fluid",
          "defaultValue": "false"
        },
        {
          "name": "defaultChecked",
          "type": "boolean",
          "description": "Specify if the Chip is initially checked",
          "defaultValue": "false"
        },
        {
          "name": "checked",
          "type": "boolean",
          "description": "Specify if the Chip is checked",
          "defaultValue": "false"
        },
        {
          "name": "onChange",
          "type": "React.ChangeEventHandler<HTMLInputElement>",
          "description": "Specify a callback function for when the Chip is checked/unchecked",
          "defaultValue": "false"
        },
        {
          "name": "dismissible",
          "type": "boolean",
          "description": "Specify if the Chip can be dismissed",
          "defaultValue": "false"
        },
        {
          "name": "noTabIndex",
          "type": "boolean",
          "description": "Specify if the Chip should not receive focus via keyboard navigation",
          "defaultValue": "false"
        },
        {
          "name": "ellipse",
          "type": "boolean",
          "description": "Specify if the Chip should have text overflow ellipsis",
          "defaultValue": "false"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Chip.",
          "source": "<Chip {...args}>{children}</Chip>"
        },
        {
          "name": "Selectable",
          "description": "Making a Chip selectable is optional. Pass `selectable` prop to enable this functionality.",
          "source": "<Chip id=\"selectable-chip\" selectable>\n      {selectableStoryText}\n    </Chip>"
        },
        {
          "name": "Dismissible",
          "description": "Making a Chip dismissible is optional. Pass a callback function to `onDismiss` to turn on the CloseButton.",
          "source": "<Chip dismissible>{dismissibleStorybookText}</Chip>"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` to display Chip in a disabled state.",
          "source": "<Chip disabled={true}>{disabledStorybookText}</Chip>"
        },
        {
          "name": "Icon",
          "description": "Use `icon` to add an icon to a Chip.",
          "source": "<Chip icon={<Satellite />}>{iconStorybookText}</Chip>"
        },
        {
          "name": "Size",
          "description": "Chip supports `sm`, `md`, and `lg`. Default size is `md`.",
          "source": "<div style={{ display: 'flex', gap: bmSemSpace75, alignItems: 'center' }}>\n      {sizes.map(size => (\n        <Chip key={size} size={size} icon={<Satellite />}>\n          {textToSize[size]}\n        </Chip>\n      ))}\n    </div>"
        },
        {
          "name": "Fluid",
          "description": "Set `fluid` to `true` to make Chip span its parent container.",
          "source": "<Chip fluid>{fluidStorybookText}</Chip>"
        },
        {
          "name": "Controlled Component",
          "description": "View example of Chip as a controlled component.",
          "source": "const [isChecked, setIsChecked] = useState(false);\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      setIsChecked(e.target.checked);\n    };\n    return (\n      <Chip selectable checked={isChecked} onChange={handleChange}>\n        {defaultStoryBookText}\n      </Chip>\n    );"
        }
      ],
      "category": "Components",
      "displayName": "Chip/Chip",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Forms/Checkbox/Checkbox",
      "slug": "forms-checkbox-checkbox",
      "description": "Checkboxes allow users to select multiple choices simultaneously or change a single option between two states. Checkboxes don't immediately apply their changes and require further action, such as clicking a submit button.",
      "type": "component",
      "props": [
        {
          "name": "label",
          "type": "ReactNode",
          "description": "Specify the text for the label"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if Checkbox displays in a disabled state"
        },
        {
          "name": "readOnly",
          "type": "boolean",
          "description": "Specify if Checkbox displays in a read-only state"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the HelperText. By default it inherits the theme from the parent"
        },
        {
          "name": "error",
          "type": "boolean",
          "description": "Specify error text and display error state of a Checkbox"
        },
        {
          "name": "indeterminate",
          "type": "boolean",
          "description": "Specify if Checkbox displays in an indeterminate state",
          "defaultValue": "false"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Checkbox.",
          "source": "<Checkbox {...args} />"
        },
        {
          "name": "Without Label",
          "description": "Displaying the `label` is optional.\nCheckbox will display without `label` if no content is passed.",
          "source": "<Checkbox\n      id=\"without-label-checkbox\"\n      name=\"without-label\"\n      aria-label=\"Checkbox without label\"\n    />"
        },
        {
          "name": "Error",
          "description": "Use `error` to display Checkbox in an error state.",
          "source": "<Checkbox error name=\"error\" id=\"error-checkbox\" label=\"Checkbox label\" />"
        },
        {
          "name": "Read Only",
          "description": "Set `readOnly` to `true` to display Checkbox in a read only state.",
          "source": "<>\n        <Checkbox\n          readOnly\n          name=\"read-only\"\n          label=\"Read only\"\n          id=\"read-only-checkbox-1\"\n        />\n        <Checkbox\n          readOnly\n          defaultChecked\n          name=\"read-only\"\n          label=\"Selected read only\"\n          id=\"read-only-checkbox-2\"\n        />\n      </>"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` to display Checkbox in a disabled state.",
          "source": "<>\n        <Checkbox\n          disabled\n          name=\"disabled\"\n          label=\"Disabled\"\n          id=\"disabled-checkbox-1\"\n        />\n        <Checkbox\n          disabled\n          defaultChecked\n          name=\"disabled\"\n          label=\"Selected disabled\"\n          id=\"disabled-checkbox-2\"\n        />\n      </>"
        },
        {
          "name": "Indeterminate",
          "description": "Checkbox provides enabled, read only, disabled, and error variants for the indeterminate state.",
          "source": "<>\n        <Checkbox\n          indeterminate\n          name=\"indeterminate\"\n          label=\"Enabled\"\n          defaultChecked\n          id=\"indeterminate-checkbox-1\"\n        />\n        <Checkbox\n          indeterminate\n          readOnly\n          name=\"indeterminate\"\n          label=\"Read only\"\n          defaultChecked\n          id=\"indeterminate-checkbox-2\"\n        />\n        <Checkbox\n          indeterminate\n          disabled\n          name=\"indeterminate\"\n          label=\"Disabled\"\n          defaultChecked\n          id=\"indeterminate-checkbox-3\"\n        />\n        <Checkbox\n          indeterminate\n          error\n          name=\"indeterminate\"\n          label=\"Error\"\n          defaultChecked\n          id=\"indeterminate-checkbox-4\"\n        />\n      </>"
        }
      ],
      "category": "Forms",
      "displayName": "Checkbox/Checkbox",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Card/CardGroup",
      "slug": "components-card-cardgroup",
      "description": "CardGroup provides selection management for groups of selectable Cards.\nIt supports both single-select and multi-select modes with various control styles.",
      "type": "component",
      "props": [
        {
          "name": "children",
          "type": "React.ReactNode",
          "description": "The Cards that belong to this CardGroup"
        },
        {
          "name": "aria-label",
          "type": "string",
          "description": "Accessible group label"
        },
        {
          "name": "aria-labelledby",
          "type": "string",
          "description": "ID(s) of elements that label the group"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if all cards in the group are disabled",
          "defaultValue": "false"
        },
        {
          "name": "selectionMode",
          "type": "'multiple' | 'single'",
          "description": "Specify the selection mode for the group",
          "defaultValue": "'single'"
        },
        {
          "name": "showIndicator",
          "type": "boolean",
          "description": "When true, shows a visual selection indicator (radio or checkbox) on cards",
          "defaultValue": "false"
        },
        {
          "name": "name",
          "type": "string",
          "description": "Specify the shared name attribute for form integration when selectable.\nWhen omitted, CardGroup will auto-generate a name"
        },
        {
          "name": "value",
          "type": "string | string[]",
          "description": "Controlled value for the group.\n\n- single selection expects a string\n- multiple selection expects a string[]"
        },
        {
          "name": "defaultValue",
          "type": "string | string[]",
          "description": "Uncontrolled initial value for the group"
        },
        {
          "name": "onChange",
          "type": "(value: string | string[], event: React.ChangeEvent<HTMLInputElement>) => void",
          "description": "Callback invoked when the group selection changes"
        },
        {
          "name": "required",
          "type": "boolean",
          "description": "Specify if the group is a required field",
          "defaultValue": "false"
        },
        {
          "name": "readOnly",
          "type": "boolean",
          "description": "Specify if the group displays in a read-only state",
          "defaultValue": "false"
        },
        {
          "name": "validationRules",
          "type": "FormValidator[]",
          "description": "Specify form validation rules for the group"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default CardGroup.",
          "source": "<CardGroup defaultValue=\"aviation\" aria-label=\"Select service\" {...args}>\n      <Box\n        style={{\n          display: 'grid',\n          gridTemplateColumns: 'repeat(auto-fit, minmax(20rem, 1fr))',\n        }}\n        gap=\"100\"\n      >\n        {cardGroupTestOptions.map(option => (\n          <Card\n            key={option.value}\n            value={option.value}\n            aria-label={`Select ${option.title}`}\n          >\n            <Card.Content>\n              <Card.Header>\n                <Card.Header.Heading>\n                  <Card.Header.HeadingText>{option.title}</Card.Header.HeadingText>\n                </Card.Header.Heading>\n              </Card.Header>\n              <Card.Body>{option.description}</Card.Body>\n            </Card.Content>\n          </Card>\n        ))}\n      </Box>\n    </CardGroup>"
        },
        {
          "name": "Radio Single-Select",
          "description": "Set `selectionMode` to `single` for radio selection functionality on CardGroup.",
          "source": "<CardGroup\n      selectionMode=\"single\"\n      name=\"card-group-radio-single\"\n      defaultValue=\"aviation\"\n      aria-label=\"Select service\"\n    >\n      <Box\n        style={{\n          display: 'grid',\n          gridTemplateColumns: 'repeat(auto-fit, minmax(20rem, 1fr))',\n        }}\n        gap=\"100\"\n      >\n        {cardGroupTestOptions.map(option => (\n          <Card\n            key={option.value}\n            value={option.value}\n            aria-label={`Select ${option.title}`}\n          >\n            <Card.Content>\n              <Card.Header>\n                <Card.Header.Heading>\n                  <Card.Header.HeadingText>{option.title}</Card.Header.HeadingText>\n                </Card.Header.Heading>\n              </Card.Header>\n              <Card.Body>{option.description}</Card.Body>\n            </Card.Content>\n          </Card>\n        ))}\n      </Box>\n    </CardGroup>"
        },
        {
          "name": "Checkbox Multi-Select",
          "description": "Set `selectionMode` to `multiple` for checkbox selection functionality on CardGroup.",
          "source": "<CardGroup\n      selectionMode=\"multiple\"\n      defaultValue={['aviation', 'maritime']}\n      aria-label=\"Select services\"\n    >\n      <Box\n        style={{\n          display: 'grid',\n          gridTemplateColumns: 'repeat(auto-fit, minmax(20rem, 1fr))',\n        }}\n        gap=\"100\"\n      >\n        {cardGroupTestOptions.map(option => (\n          <Card\n            key={option.value}\n            value={option.value}\n            aria-label={`Toggle ${option.title}`}\n          >\n            <Card.Content>\n              <Card.Header>\n                <Card.Header.Heading>\n                  <Card.Header.HeadingText>{option.title}</Card.Header.HeadingText>\n                </Card.Header.Heading>\n              </Card.Header>\n              <Card.Body>{option.description}</Card.Body>\n            </Card.Content>\n          </Card>\n        ))}\n      </Box>\n    </CardGroup>"
        },
        {
          "name": "Show Indicator",
          "description": "Set `showIndicator` to `true` to display CardGroup with visible multi-select or single-select indicators.",
          "source": "const [selectionMode, setSelectionMode] = React.useState<'single' | 'multiple'>(\n      'single',\n    );\n\n    const handleSelectionModeChange: React.FormEventHandler<\n      HTMLFieldSetElement\n    > = event => {\n      setSelectionMode(\n        (event.target as HTMLInputElement).value as 'single' | 'multiple',\n      );\n    };\n\n    const defaultValue = selectionMode === 'multiple' ? ['aviation'] : 'aviation';\n\n    return (\n      <Box style={{ display: 'flex', flexDirection: 'column' }} gap=\"150\">\n        <RadioButtonGroup\n          name=\"card-group-hidden-selection-mode\"\n          orientation=\"horizontal\"\n          onChange={handleSelectionModeChange}\n          style={{ display: 'flex', justifyContent: 'center' }}\n        >\n          <RadioButton\n            id=\"card-group-hidden-mode-single\"\n            value=\"single\"\n            label=\"Single-select\"\n            defaultChecked\n          />\n          <RadioButton\n            id=\"card-group-hidden-mode-multiple\"\n            value=\"multiple\"\n            label=\"Multi-select\"\n          />\n        </RadioButtonGroup>\n\n        <CardGroup\n          key={selectionMode}\n          selectionMode={selectionMode}\n          defaultValue={defaultValue}\n          aria-label=\"Select services\"\n          showIndicator\n        >\n          <Box\n            style={{\n              display: 'grid',\n              gridTemplateColumns: 'repeat(auto-fit, minmax(20rem, 1fr))',\n            }}\n            gap=\"100\"\n          >\n            {cardGroupTestOptions.map(option => (\n              <Card\n                key={option.value}\n                value={option.value}\n                aria-label={`Select ${option.title}`}\n              >\n                <Card.Content>\n                  <Card.Header>\n                    <Card.Header.Heading>\n                      <Card.Header.HeadingText>\n                        {option.title}\n                      </Card.Header.HeadingText>\n                    </Card.Header.Heading>\n                  </Card.Header>\n                  <Card.Body>{option.description}</Card.Body>\n                </Card.Content>\n              </Card>\n            ))}\n          </Box>\n        </CardGroup>\n      </Box>\n    );"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` to disable the entire group.\n\n> CardGroup's `disabled` prop applies the disabled state to the Card surfaces themselves and does **not** propagate to interactive children such as buttons or links. `disabled` must be applied directly to each interactive child when the CardGroup is disabled to prevent interactivity and focus on children.",
          "source": "<CardGroup\n      selectionMode=\"single\"\n      showIndicator\n      name=\"card-group-test-disabled-single\"\n      value=\"aviation\"\n      disabled\n      aria-label=\"Select service\"\n    >\n      <Box\n        style={{\n          display: 'grid',\n          gridTemplateColumns: 'repeat(auto-fit, minmax(20rem, 1fr))',\n        }}\n        gap=\"100\"\n      >\n        {cardGroupTestOptions.map(option => (\n          <Card\n            key={option.value}\n            value={option.value}\n            aria-label={`Select ${option.title}`}\n          >\n            <Card.Content>\n              <Card.Header>\n                <Card.Header.Heading>\n                  <Card.Header.HeadingText>{option.title}</Card.Header.HeadingText>\n                </Card.Header.Heading>\n              </Card.Header>\n              <Card.Body>{option.description}</Card.Body>\n            </Card.Content>\n          </Card>\n        ))}\n      </Box>\n    </CardGroup>"
        }
      ],
      "category": "Components",
      "displayName": "Card/CardGroup",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Card/Card",
      "slug": "components-card-card",
      "description": "Card is a container component that provides structure for displaying content\nwith optional media, header, body, and footer sections.",
      "type": "component",
      "props": [
        {
          "name": "children",
          "type": "React.ReactNode",
          "description": "Specify the content and sub-components of the Card",
          "required": true
        },
        {
          "name": "density",
          "type": "'sm' | 'md' | 'lg'",
          "description": "Specify the density of the Card",
          "defaultValue": "md"
        },
        {
          "name": "borderColor",
          "type": "'positive' | 'warning' | 'negative' | 'inverse' | 'selected' | 'expressive' | 'focus' | '00' | '00-alt' | '01' | '02' | '03' | 'info-primary' | 'info-secondary' | 'positive-strong' | 'warning-strong' | 'negative-strong' | 'info-primary-strong' | 'info-secondary-strong' | 'transparent' | 'expressive-stronger' | 'strong'",
          "description": "Specify the border color of the Card"
        },
        {
          "name": "borderRadius",
          "type": "'xs' | 'sm' | 'md' | 'lg' | 'none' | 'round'",
          "description": "Specify the border radius of the Card"
        },
        {
          "name": "backgroundColor",
          "type": "'positive' | 'warning' | 'negative' | 'inverse' | 'selected' | 'expressive' | '00' | '00-alt' | '01' | '02' | '03' | 'info-primary' | 'info-secondary' | 'positive-strong' | 'warning-strong' | 'negative-strong' | 'info-primary-strong' | 'info-secondary-strong' | 'selected-subtle' | 'highlight' | 'transparent' | 'expressive-stronger' | 'expressive-inverse'",
          "description": "Specify the surface color of the Card"
        },
        {
          "name": "shadow",
          "type": "'sm' | 'md' | 'lg' | 'none' | 'overlay'",
          "description": "Specify a shadow on the Card"
        },
        {
          "name": "type",
          "type": "'clickable' | 'selectable'",
          "description": "Specify the interactive type of the Card. When type=\"selectable\", you should provide either aria-label or aria-labelledby for the selection input to ensure accessibility",
          "defaultValue": "undefined"
        },
        {
          "name": "as",
          "type": "enum",
          "description": "Specify the HTML element type of the Card when interactive"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if the Card is disabled. Only applies when type is set",
          "defaultValue": "false"
        },
        {
          "name": "href",
          "type": "string",
          "description": "Specify the href for the Card when type=\"clickable\" and as=\"a\""
        },
        {
          "name": "target",
          "type": "string",
          "description": "Specify the target for the Card link (e.g., \"_blank\")"
        },
        {
          "name": "rel",
          "type": "string",
          "description": "Specify the rel attribute for the Card link"
        },
        {
          "name": "onClick",
          "type": "(event: any) => void",
          "description": "Specify a click handler for the Card when type=\"clickable\""
        },
        {
          "name": "selectionMode",
          "type": "'multiple' | 'single'",
          "description": "Selection mode when type=\"selectable\". Ignored when Card is inside a CardGroup (group's selectionMode wins)",
          "defaultValue": "'single'"
        },
        {
          "name": "showIndicator",
          "type": "boolean",
          "description": "When true, shows a visual selection indicator (radio or checkbox) on the Card",
          "defaultValue": "false"
        },
        {
          "name": "selected",
          "type": "boolean",
          "description": "Specify if the Card is selected (controlled). Only applies when type=\"selectable\""
        },
        {
          "name": "defaultSelected",
          "type": "boolean",
          "description": "Specify if the Card is initially selected (uncontrolled). Only applies when type=\"selectable\"",
          "defaultValue": "false"
        },
        {
          "name": "onSelect",
          "type": "(event: React.ChangeEvent<HTMLInputElement>) => void",
          "description": "Callback when selection changes. Only applies when type=\"selectable\""
        },
        {
          "name": "name",
          "type": "string",
          "description": "Name attribute for the underlying input when type=\"selectable\".\nUsed for form integration"
        },
        {
          "name": "value",
          "type": "string",
          "description": "Value attribute for the underlying input when type=\"selectable\".\nUsed for form integration\n\n> When used inside a selectable CardGroup, this (or `id`) is required so the\ngroup can manage selection state"
        },
        {
          "name": "aria-label",
          "type": "string",
          "description": "Accessible label for the selectable Card's input. Required when type=\"selectable\""
        },
        {
          "name": "aria-labelledby",
          "type": "string",
          "description": "ID(s) of elements that label the selection input. Alternative to aria-label when type=\"selectable\""
        },
        {
          "name": "m",
          "type": "any",
          "description": "Specify all margin"
        },
        {
          "name": "mBefore",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify before margin"
        },
        {
          "name": "mAfter",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify after margin"
        },
        {
          "name": "mBottom",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify bottom margin"
        },
        {
          "name": "mTop",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify top margin"
        },
        {
          "name": "mx",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify before and after margin"
        },
        {
          "name": "my",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify top and bottom margin"
        }
      ],
      "subcomponentProps": [
        {
          "name": "Card.MediaAbove",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "Specify the content for the media above the card"
            },
            {
              "name": "aspectRatio",
              "type": "'16:9' | '9:16' | '2:1' | '1:2' | '4:3' | '3:4' | '3:2' | '2:3' | '1:1'",
              "description": "Specify the aspect ratio"
            },
            {
              "name": "overlayColor",
              "type": "'black-10' | 'black-20' | 'black-30' | 'black-40' | 'white-10' | 'white-20' | 'white-30' | 'white-40'",
              "description": "Apply a backdrop overlay to improve contrast for overlaid content"
            },
            {
              "name": "overlayContentTop",
              "type": "ReactNode",
              "description": "Content to display as an overlay at the top of the media"
            },
            {
              "name": "overlayContentMiddle",
              "type": "ReactNode",
              "description": "Content to display as an overlay in the middle of the media"
            },
            {
              "name": "overlayContentBottom",
              "type": "ReactNode",
              "description": "Content to display as an overlay at the bottom of the media"
            }
          ]
        },
        {
          "name": "Card.Header",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "Specify the content for the card header"
            }
          ]
        },
        {
          "name": "Card.Header.Heading",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "Specify the content for the card header heading"
            }
          ]
        },
        {
          "name": "Card.Header.HeadingText",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "Specify the content for the card heading text"
            }
          ]
        },
        {
          "name": "Card.Header.Eyebrow",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "Specify the content for the card header eyebrow"
            }
          ]
        },
        {
          "name": "Card.Header.SupportingText",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "Specify the content for the card header supporting text"
            }
          ]
        },
        {
          "name": "Card.MediaBelow",
          "props": [
            {
              "name": "borderRadius",
              "type": "'xs' | 'sm' | 'md' | 'lg' | 'none' | 'round'",
              "description": "Specify the border radius of the media below"
            },
            {
              "name": "children",
              "type": "ReactNode",
              "description": "Specify the content for the media below the card"
            },
            {
              "name": "aspectRatio",
              "type": "'16:9' | '9:16' | '2:1' | '1:2' | '4:3' | '3:4' | '3:2' | '2:3' | '1:1'",
              "description": "Specify the aspect ratio"
            },
            {
              "name": "overlayColor",
              "type": "'black-10' | 'black-20' | 'black-30' | 'black-40' | 'white-10' | 'white-20' | 'white-30' | 'white-40'",
              "description": "Apply a backdrop overlay to improve contrast for overlaid content"
            },
            {
              "name": "overlayContentTop",
              "type": "ReactNode",
              "description": "Content to display as an overlay at the top of the media"
            },
            {
              "name": "overlayContentMiddle",
              "type": "ReactNode",
              "description": "Content to display as an overlay in the middle of the media"
            },
            {
              "name": "overlayContentBottom",
              "type": "ReactNode",
              "description": "Content to display as an overlay at the bottom of the media"
            }
          ]
        },
        {
          "name": "Card.Body",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "Specify the content for the card body"
            }
          ]
        },
        {
          "name": "Card.Content",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "Specify the content for the card content area"
            }
          ]
        },
        {
          "name": "Card.Footer",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "Specify the content for the card footer"
            }
          ]
        },
        {
          "name": "Card.Footer.Actions",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "Specify the content for the card footer actions"
            },
            {
              "name": "layout",
              "type": "'start' | 'end' | 'stacked' | 'spaceBetween'",
              "description": "Specify the layout of actions in the Footer",
              "defaultValue": "start"
            }
          ]
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Card.",
          "source": "<Card {...args} style={{ maxWidth: '22rem' }}>\n      <Card.MediaAbove aspectRatio=\"4:3\">\n        <img src={cardMedia} alt=\"viasat\" />\n      </Card.MediaAbove>\n      <Card.Content>\n        <Card.Header>\n          <Card.Header.Heading>\n            <Card.Header.HeadingText>Heading text</Card.Header.HeadingText>\n          </Card.Header.Heading>\n        </Card.Header>\n\n        <Card.Body>{cardBodyText}</Card.Body>\n\n        <Card.Footer>\n          <Card.Footer.Actions>\n            <Button kind=\"filled\" appearance=\"accent\">\n              Button text\n            </Button>\n            <Button kind=\"outline\" appearance=\"accent\">\n              Button text\n            </Button>\n          </Card.Footer.Actions>\n        </Card.Footer>\n      </Card.Content>\n    </Card>"
        },
        {
          "name": "Media",
          "description": "Adding media to cards is optional. Use `Card.MediaAbove` and `Card.MediaBelow` to add images to Card.",
          "source": "const containerRef = React.useRef<HTMLDivElement>(null);\n    const isRTL = useRTLDirection(containerRef);\n    const ArrowIcon = isRTL ? Arrowbackcurved : Arrowforwardcurved;\n\n    return (\n      <Box\n        style={{ display: 'flex', flexDirection: 'column' }}\n        gap=\"150\"\n        ref={containerRef}\n      >\n        <Card style={{ maxWidth: '22rem' }}>\n          <Card.MediaAbove aspectRatio=\"4:3\">\n            <img src={cardMedia} alt=\"viasat\" />\n          </Card.MediaAbove>\n          <Card.Content>\n            <Card.Header>\n              <Card.Header.Heading>\n                <Card.Header.HeadingText>With media above</Card.Header.HeadingText>\n              </Card.Header.Heading>\n            </Card.Header>\n\n            <Card.Body>{cardBodyText}</Card.Body>\n\n            <Card.Footer>\n              <Card.Footer.Actions>\n                <Button kind=\"filled\" appearance=\"accent\">\n                  Button text\n                </Button>\n                <Button kind=\"outline\" appearance=\"accent\">\n                  Button text\n                </Button>\n              </Card.Footer.Actions>\n            </Card.Footer>\n          </Card.Content>\n        </Card>\n\n        <Card style={{ maxWidth: '22rem' }}>\n          <Card.Content>\n            <Card.Header>\n              <Card.Header.Heading>\n                <Card.Header.HeadingText>With media below</Card.Header.HeadingText>\n              </Card.Header.Heading>\n            </Card.Header>\n\n            <Card.MediaBelow aspectRatio=\"4:3\">\n              <img src={cardMedia} alt=\"viasat\" />\n            </Card.MediaBelow>\n\n            <Card.Body>{cardBodyText}</Card.Body>\n\n            <Card.Footer>\n              <Card.Footer.Actions>\n                <Button kind=\"filled\" appearance=\"accent\">\n                  Button text\n                </Button>\n                <Button kind=\"outline\" appearance=\"accent\">\n                  Button text\n                </Button>\n              </Card.Footer.Actions>\n            </Card.Footer>\n          </Card.Content>\n        </Card>\n\n        <Card style={{ maxWidth: '22rem' }}>\n          <Card.Content>\n            <Card.Header>\n              <Card.Header.Heading>\n                <Card.Header.HeadingText>Without media</Card.Header.HeadingText>\n              </Card.Header.Heading>\n            </Card.Header>\n\n            <Card.Body>{cardBodyText}</Card.Body>\n\n            <Card.Footer>\n              <Card.Footer.Actions>\n                <Button kind=\"filled\" appearance=\"accent\">\n                  Button text\n                </Button>\n                <Button kind=\"outline\" appearance=\"accent\">\n                  Button text\n                </Button>\n              </Card.Footer.Actions>\n            </Card.Footer>\n          </Card.Content>\n        </Card>\n        <Card style={{ maxWidth: '22rem' }}>\n          <Card.MediaAbove\n            aspectRatio=\"4:3\"\n            overlayContentBottom={\n              <Box\n                style={{\n                  display: 'flex',\n                  justifyContent: 'space-between',\n                  alignItems: 'center',\n                  padding: `${bmSemSpace300} ${bmSemSpace150} ${bmSemSpace100}`,\n                  background:\n                    'linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.477) 70.68%, rgba(0, 0, 0, 0.00) 100%)',\n                }}\n                theme=\"dark\"\n              >\n                <Text kind=\"heading-lg\" color=\"primary\">\n                  Media only\n                </Text>\n                <Icon color=\"primary\" icon={ArrowIcon} size=\"lg\" />\n              </Box>\n            }\n          >\n            <img src={cardMedia} alt=\"viasat\" />\n          </Card.MediaAbove>\n        </Card>\n      </Box>\n    );"
        },
        {
          "name": "With Eyebrow",
          "description": "Adding eyebrow text is optional. Use `Card.Header.Eyebrow` to add text or custom content above the heading.",
          "source": "<Box style={{ display: 'flex', flexDirection: 'column' }} gap=\"150\">\n      <Card style={{ maxWidth: '22rem' }}>\n        <Card.MediaAbove aspectRatio=\"4:3\">\n          <img src={cardMedia} alt=\"viasat\" />\n        </Card.MediaAbove>\n        <Card.Content>\n          <Card.Header>\n            <Card.Header.Heading>\n              <Card.Header.Eyebrow>Eyebrow text</Card.Header.Eyebrow>\n              <Card.Header.HeadingText>Heading text</Card.Header.HeadingText>\n            </Card.Header.Heading>\n          </Card.Header>\n\n          <Card.Body>{cardBodyText}</Card.Body>\n\n          <Card.Footer>\n            <Card.Footer.Actions>\n              <Button kind=\"filled\" appearance=\"accent\">\n                Button text\n              </Button>\n              <Button kind=\"outline\" appearance=\"accent\">\n                Button text\n              </Button>\n            </Card.Footer.Actions>\n          </Card.Footer>\n        </Card.Content>\n      </Card>\n      <Card style={{ maxWidth: '22rem' }}>\n        <Card.MediaAbove aspectRatio=\"4:3\">\n          <img src={cardMedia} alt=\"viasat\" />\n        </Card.MediaAbove>\n        <Card.Content>\n          <Card.Header>\n            <Card.Header.Heading>\n              <Card.Header.Eyebrow style={{ paddingBottom: bmSemSpace25 }}>\n                <Badge appearance=\"infoPrimary\" emphasis=\"medium\" size=\"sm\" hideIcon>\n                  Add a badge\n                </Badge>\n              </Card.Header.Eyebrow>\n              <Card.Header.HeadingText>Heading text</Card.Header.HeadingText>\n            </Card.Header.Heading>\n          </Card.Header>\n\n          <Card.Body>{cardBodyText}</Card.Body>\n\n          <Card.Footer>\n            <Card.Footer.Actions>\n              <Button kind=\"filled\" appearance=\"accent\">\n                Button text\n              </Button>\n              <Button kind=\"outline\" appearance=\"accent\">\n                Button text\n              </Button>\n            </Card.Footer.Actions>\n          </Card.Footer>\n        </Card.Content>\n      </Card>\n    </Box>"
        },
        {
          "name": "With Support Text",
          "description": "Adding support text is optional. Use `Card.Header.SupportingText` to add a text under the heading.",
          "source": "<Card style={{ maxWidth: '22rem' }}>\n      <Card.MediaAbove aspectRatio=\"4:3\">\n        <img src={cardMedia} alt=\"viasat\" />\n      </Card.MediaAbove>\n      <Card.Content>\n        <Card.Header>\n          <Card.Header.Heading>\n            <Card.Header.Eyebrow>Eyebrow text</Card.Header.Eyebrow>\n            <Card.Header.HeadingText>Heading text</Card.Header.HeadingText>\n            <Card.Header.SupportingText>Supporting text</Card.Header.SupportingText>\n          </Card.Header.Heading>\n        </Card.Header>\n\n        <Card.Body>{cardBodyText}</Card.Body>\n\n        <Card.Footer>\n          <Card.Footer.Actions>\n            <Button kind=\"filled\" appearance=\"accent\">\n              Button text\n            </Button>\n            <Button kind=\"outline\" appearance=\"accent\">\n              Button text\n            </Button>\n          </Card.Footer.Actions>\n        </Card.Footer>\n      </Card.Content>\n    </Card>"
        },
        {
          "name": "Content Before And After",
          "description": "Use `Header.ContentBefore` and `Header.ContentAfter` to add content such as Avatar, Buttons and Icons to the header.",
          "source": "<Box style={{ display: 'flex', flexDirection: 'column' }} gap=\"300\">\n      <Card style={{ maxWidth: '22rem' }}>\n        <Card.Content>\n          <Card.Header>\n            <Card.Header.ContentBefore>\n              <Avatar\n                size=\"xl\"\n                appearance=\"neutral\"\n                shape=\"circle\"\n                alt=\"User avatar\"\n              />\n            </Card.Header.ContentBefore>\n            <Card.Header.Heading>\n              <Card.Header.HeadingText>\n                Avatar before, actions after\n              </Card.Header.HeadingText>\n            </Card.Header.Heading>\n            <Card.Header.ContentAfter>\n              <Button\n                kind=\"bare\"\n                appearance=\"neutral-subtle\"\n                iconOnly\n                iconBefore={<BookmarkBorder />}\n                aria-label=\"Bookmark\"\n              />\n              <Button\n                kind=\"bare\"\n                appearance=\"neutral-subtle\"\n                iconOnly\n                iconBefore={<MoreVert />}\n                aria-label=\"More options\"\n              />\n            </Card.Header.ContentAfter>\n          </Card.Header>\n\n          <Card.Body>{cardBodyText}</Card.Body>\n\n          <Card.Footer>\n            <Card.Footer.Actions>\n              <Button kind=\"filled\" appearance=\"accent\">\n                Button text\n              </Button>\n              <Button kind=\"outline\" appearance=\"accent\">\n                Button text\n              </Button>\n            </Card.Footer.Actions>\n          </Card.Footer>\n        </Card.Content>\n      </Card>\n      <Card style={{ maxWidth: '22rem' }}>\n        <Card.Content>\n          <Card.Header>\n            <Card.Header.ContentBefore>\n              <Icon size=\"lg\" icon={Wifi} />\n            </Card.Header.ContentBefore>\n            <Card.Header.Heading>\n              <Card.Header.HeadingText>\n                Icon before, icon after\n              </Card.Header.HeadingText>\n            </Card.Header.Heading>\n            <Card.Header.ContentAfter>\n              <Icon icon={LockOutline} />\n            </Card.Header.ContentAfter>\n          </Card.Header>\n\n          <Card.Body>{cardBodyText}</Card.Body>\n\n          <Card.Footer>\n            <Card.Footer.Actions>\n              <Button kind=\"filled\" appearance=\"accent\">\n                Button text\n              </Button>\n              <Button kind=\"outline\" appearance=\"accent\">\n                Button text\n              </Button>\n            </Card.Footer.Actions>\n          </Card.Footer>\n        </Card.Content>\n      </Card>\n    </Box>"
        },
        {
          "name": "With Actions",
          "description": "`Card.Footer.Actions` allows four common Button configurations: `start`, `end`, `spaceBetween`, and `stacked`.",
          "source": "<Box style={{ display: 'flex', flexDirection: 'column' }} gap=\"150\">\n      <Card style={{ maxWidth: '22rem' }}>\n        <Card.Content>\n          <Card.Header>\n            <Card.Header.Heading>\n              <Card.Header.Eyebrow>Customize actions</Card.Header.Eyebrow>\n              <Card.Header.HeadingText>Align start</Card.Header.HeadingText>\n            </Card.Header.Heading>\n            <Card.Header.ContentAfter>\n              <Button\n                kind=\"bare\"\n                appearance=\"neutral-subtle\"\n                iconOnly\n                iconBefore={<BookmarkBorder />}\n                aria-label=\"Bookmark\"\n              />\n              <Button\n                kind=\"bare\"\n                appearance=\"neutral-subtle\"\n                iconOnly\n                iconBefore={<MoreVert />}\n                aria-label=\"More options\"\n              />\n            </Card.Header.ContentAfter>\n          </Card.Header>\n\n          <Card.Body>{cardBodyText}</Card.Body>\n\n          <Card.Footer>\n            <Card.Footer.Actions>\n              <Button kind=\"filled\" appearance=\"accent\">\n                Button text\n              </Button>\n              <Button kind=\"outline\" appearance=\"accent\">\n                Button text\n              </Button>\n            </Card.Footer.Actions>\n          </Card.Footer>\n        </Card.Content>\n      </Card>\n\n      <Card style={{ maxWidth: '22rem' }}>\n        <Card.Content>\n          <Card.Header>\n            <Card.Header.Heading>\n              <Card.Header.Eyebrow>Customize actions</Card.Header.Eyebrow>\n              <Card.Header.HeadingText>Align end</Card.Header.HeadingText>\n            </Card.Header.Heading>\n            <Card.Header.ContentAfter>\n              <Button\n                kind=\"bare\"\n                appearance=\"neutral-subtle\"\n                iconOnly\n                iconBefore={<BookmarkBorder />}\n                aria-label=\"Bookmark\"\n              />\n              <Button\n                kind=\"bare\"\n                appearance=\"neutral-subtle\"\n                iconOnly\n                iconBefore={<MoreVert />}\n                aria-label=\"More options\"\n              />\n            </Card.Header.ContentAfter>\n          </Card.Header>\n\n          <Card.Body>{cardBodyText}</Card.Body>\n\n          <Card.Footer>\n            <Card.Footer.Actions layout=\"end\">\n              <Button kind=\"filled\" appearance=\"accent\">\n                Button text\n              </Button>\n              <Button kind=\"outline\" appearance=\"accent\">\n                Button text\n              </Button>\n            </Card.Footer.Actions>\n          </Card.Footer>\n        </Card.Content>\n      </Card>\n\n      <Card style={{ maxWidth: '22rem' }}>\n        <Card.Content>\n          <Card.Header>\n            <Card.Header.Heading>\n              <Card.Header.Eyebrow>Customize actions</Card.Header.Eyebrow>\n              <Card.Header.HeadingText>Space between</Card.Header.HeadingText>\n            </Card.Header.Heading>\n          </Card.Header>\n\n          <Card.Body>{cardBodyText}</Card.Body>\n\n          <Card.Footer>\n            <Card.Footer.Actions layout=\"spaceBetween\">\n              <Button\n                iconOnly\n                iconBefore={<Share />}\n                kind=\"bare\"\n                appearance=\"neutral\"\n                aria-label=\"Share\"\n              ></Button>\n              <Button kind=\"outline\" appearance=\"accent\">\n                Button text\n              </Button>\n            </Card.Footer.Actions>\n          </Card.Footer>\n        </Card.Content>\n      </Card>\n\n      <Card style={{ maxWidth: '22rem' }}>\n        <Card.Content>\n          <Card.Header>\n            <Card.Header.Heading>\n              <Card.Header.Eyebrow>Customize actions</Card.Header.Eyebrow>\n              <Card.Header.HeadingText>Stacked and fluid</Card.Header.HeadingText>\n            </Card.Header.Heading>\n            <Card.Header.ContentAfter>\n              <Button\n                kind=\"bare\"\n                appearance=\"neutral-subtle\"\n                iconOnly\n                iconBefore={<BookmarkBorder />}\n                aria-label=\"Bookmark\"\n              />\n              <Button\n                kind=\"bare\"\n                appearance=\"neutral-subtle\"\n                iconOnly\n                iconBefore={<MoreVert />}\n                aria-label=\"More options\"\n              />\n            </Card.Header.ContentAfter>\n          </Card.Header>\n\n          <Card.Body>{cardBodyText}</Card.Body>\n\n          <Card.Footer>\n            <Card.Footer.Actions layout=\"stacked\">\n              <Button kind=\"filled\" appearance=\"accent\" fluid>\n                Button text\n              </Button>\n              <Button kind=\"outline\" appearance=\"accent\" fluid>\n                Button text\n              </Button>\n            </Card.Footer.Actions>\n          </Card.Footer>\n        </Card.Content>\n      </Card>\n    </Box>"
        },
        {
          "name": "Image Aspect Ratios",
          "description": "Media.Above and Media.Below support various aspect ratios: `2:1`, `16:9`, `3:2`, `4:3`, `1:1`, `3:4`,\n `2:3`, `9:16`, `1:2`\n\n> The most commonly used aspect ratios are `16:9`, `4:3`, and `1:1`",
          "source": "// Order matches the story description: 2:1, 16:9, 3:2, 4:3, 1:1, 3:4, 2:3, 9:16, 1:2\n    const aspectRatios: AspectRatioValue[] = [\n      '2:1',\n      '16:9',\n      '3:2',\n      '4:3',\n      '1:1',\n      '3:4',\n      '2:3',\n      '9:16',\n      '1:2',\n    ];\n    const [selectedRatio, setSelectedRatio] =\n      React.useState<AspectRatioValue>('4:3');\n\n    const handleRatioChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n      setSelectedRatio(event.target.value as AspectRatioValue);\n    };\n\n    return (\n      <Box\n        style={{ display: 'flex', flexDirection: 'column', width: '100%' }}\n        gap=\"300\"\n      >\n        <NativeSelect\n          id=\"aspect-ratio-select\"\n          name=\"aspect-ratio-select\"\n          value={selectedRatio}\n          onChange={handleRatioChange}\n          style={{ maxWidth: '22rem', alignSelf: 'flex-start' }}\n          width=\"10.75rem\"\n          aria-label=\"Select aspect ratio\"\n        >\n          {aspectRatios.map(ratio => (\n            <option key={ratio} value={ratio}>\n              {ratio === '4:3' ? '4:3 (Default)' : ratio}\n            </option>\n          ))}\n        </NativeSelect>\n\n        <Card style={{ maxWidth: '22rem', alignSelf: 'center' }}>\n          <Card.MediaAbove aspectRatio={selectedRatio}>\n            <img src={cardMedia} alt=\"viasat\" />\n          </Card.MediaAbove>\n          <Card.Content>\n            <Card.Header>\n              <Card.Header.Heading>\n                <Card.Header.HeadingText>\n                  With media above at {selectedRatio} ratio\n                </Card.Header.HeadingText>\n              </Card.Header.Heading>\n            </Card.Header>\n            <Card.Body>{cardBodyText}</Card.Body>\n          </Card.Content>\n        </Card>\n\n        <Card style={{ maxWidth: '22rem', alignSelf: 'center' }}>\n          <Card.Content>\n            <Card.Header>\n              <Card.Header.Heading>\n                <Card.Header.HeadingText>\n                  With media below at {selectedRatio} ratio\n                </Card.Header.HeadingText>\n              </Card.Header.Heading>\n            </Card.Header>\n            <Card.MediaBelow aspectRatio={selectedRatio}>\n              <img src={cardMedia} alt=\"viasat\" />\n            </Card.MediaBelow>\n            <Card.Body>{cardBodyText}</Card.Body>\n          </Card.Content>\n        </Card>\n      </Box>\n    );"
        },
        {
          "name": "Density",
          "description": "Card supports `sm`, `md`, and `lg` density options. Default density is `md`.",
          "source": "const [density, setDensity] = React.useState<CardDensity>('md');\n\n    const handleDensityChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      setDensity(event.target.value as CardDensity);\n    };\n\n    return (\n      <Box\n        style={{ display: 'flex', flexDirection: 'column', width: '100%' }}\n        gap=\"200\"\n      >\n        <RadioButtonGroup name=\"density\" orientation=\"horizontal\">\n          <RadioButton\n            id=\"density-sm\"\n            value=\"sm\"\n            label=\"Small\"\n            checked={density === 'sm'}\n            onChange={handleDensityChange}\n          />\n          <RadioButton\n            id=\"density-md\"\n            value=\"md\"\n            label=\"Medium\"\n            checked={density === 'md'}\n            onChange={handleDensityChange}\n          />\n          <RadioButton\n            id=\"density-lg\"\n            value=\"lg\"\n            label=\"Large\"\n            checked={density === 'lg'}\n            onChange={handleDensityChange}\n          />\n        </RadioButtonGroup>\n\n        <Card style={{ maxWidth: '22rem', alignSelf: 'center' }} density={density}>\n          <Card.Content>\n            <Card.Header>\n              <Card.Header.Heading>\n                <Card.Header.HeadingText>\n                  {densityLabelMap[density]}\n                </Card.Header.HeadingText>\n              </Card.Header.Heading>\n            </Card.Header>\n\n            <Card.MediaBelow aspectRatio=\"4:3\">\n              <img src={cardMedia} alt=\"viasat\" />\n            </Card.MediaBelow>\n\n            <Card.Body>{cardBodyText}</Card.Body>\n\n            <Card.Footer>\n              <Card.Footer.Actions>\n                <Button kind=\"filled\" appearance=\"accent\">\n                  Button text\n                </Button>\n                <Button kind=\"outline\" appearance=\"accent\">\n                  Button text\n                </Button>\n              </Card.Footer.Actions>\n            </Card.Footer>\n          </Card.Content>\n        </Card>\n      </Box>\n    );"
        },
        {
          "name": "Clickable",
          "description": "Clickable Cards make the entire Card surface interactive.\nUse `type=\"clickable\"` to enable click and keyboard focus.\n\n> This example renders the Card as an anchor element with an href, redirecting the click to a new page.",
          "source": "<Card\n      type=\"clickable\"\n      href=\"https://www.viasat.com\"\n      target=\"_blank\"\n      as=\"a\"\n      style={{ maxWidth: '22rem' }}\n    >\n      <Card.MediaAbove aspectRatio=\"4:3\">\n        <img src={cardMedia} alt=\"viasat\" />\n      </Card.MediaAbove>\n      <Card.Content>\n        <Card.Header>\n          <Card.Header.Heading>\n            <Card.Header.HeadingText>Clickable Card</Card.Header.HeadingText>\n            <Card.Header.SupportingText>\n              This entire card is clickable\n            </Card.Header.SupportingText>\n          </Card.Header.Heading>\n        </Card.Header>\n        <Card.Body>\n          Click anywhere on the card surface to activate the click handler. Try using\n          Tab to focus and Enter or Space to activate.\n        </Card.Body>\n      </Card.Content>\n    </Card>"
        },
        {
          "name": "Selectable",
          "description": "Selectable Cards make the entire Card surface interactive. Use `type=\"selectable\"` to enable click and keyboard focus for\nselection behavior. Set `showIndicator` to display a visual selection indicator on the Card.\n\n> Single and multi-select can be defined at the group level or implemented separately if desired.",
          "source": "const [checkboxSelected, setCheckboxSelected] = React.useState(false);\n    const [hiddenSelected, setHiddenSelected] = React.useState(false);\n\n    return (\n      <Box\n        style={{ display: 'flex', flexDirection: 'column', maxWidth: '22rem' }}\n        gap=\"150\"\n      >\n        <Card\n          type=\"selectable\"\n          showIndicator\n          selected={checkboxSelected}\n          onSelect={e => setCheckboxSelected(e.target.checked)}\n          aria-label=\"Select checkbox card\"\n        >\n          <Card.Content>\n            <Card.Header>\n              <Card.Header.Heading>\n                <Card.Header.HeadingText>Visible indicator</Card.Header.HeadingText>\n              </Card.Header.Heading>\n            </Card.Header>\n            <Card.Body>\n              A checkbox can be added to the card to provide extra affordance to the\n              user that the card is selectable.\n            </Card.Body>\n          </Card.Content>\n        </Card>\n        <Card\n          type=\"selectable\"\n          selected={hiddenSelected}\n          onSelect={e => setHiddenSelected(e.target.checked)}\n          aria-label=\"Select hidden indicator card\"\n        >\n          <Card.Content>\n            <Card.Header>\n              <Card.Header.Heading>\n                <Card.Header.HeadingText>Hidden</Card.Header.HeadingText>\n              </Card.Header.Heading>\n            </Card.Header>\n            <Card.Body>{cardBodyText}</Card.Body>\n          </Card.Content>\n        </Card>\n      </Box>\n    );"
        },
        {
          "name": "Interactive Children",
          "description": "Interactive children inside Cards can work independently.\n\n> Important, having nested interactive children within Card can cause issues with screen readers.\nBe sure to test accessibility behaviors.",
          "source": "<Card\n      type=\"clickable\"\n      as=\"a\"\n      href=\"https://www.viasat.com\"\n      target=\"_blank\"\n      style={{ maxWidth: '22rem' }}\n    >\n      <Card.MediaAbove aspectRatio=\"4:3\">\n        <img src={cardMedia} alt=\"viasat\" />\n      </Card.MediaAbove>\n      <Card.Content>\n        <Card.Header>\n          <Card.Header.Heading>\n            <Card.Header.HeadingText>\n              Card with interactive children\n            </Card.Header.HeadingText>\n          </Card.Header.Heading>\n          <Card.Header.ContentAfter>\n            <Button\n              kind=\"bare\"\n              appearance=\"neutral-subtle\"\n              iconOnly\n              iconBefore={<MoreVert />}\n              aria-label=\"More options\"\n              onClick={() => alert('Tertiary action')}\n            />\n          </Card.Header.ContentAfter>\n        </Card.Header>\n        <Card.Body>{cardBodyText}</Card.Body>\n        <Card.Footer>\n          <Card.Footer.Actions>\n            <Button onClick={() => window.open('https://www.viasat.com', '_blank')}>\n              Primary action\n            </Button>\n            <Button\n              appearance=\"neutral-subtle\"\n              onClick={() => alert('Secondary action')}\n            >\n              Secondary action\n            </Button>\n          </Card.Footer.Actions>\n        </Card.Footer>\n      </Card.Content>\n    </Card>"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` to disable clickable or selectable Cards.\n\n> Card's `disabled` prop applies the disabled state to the Card surface itself and does **not** propagate to interactive children such as buttons or links. `disabled` must be applied directly to each interactive child when the Card is disabled to prevent interactivity and focus on children.",
          "source": "<Box\n      style={{ display: 'flex', flexDirection: 'column', maxWidth: '22rem' }}\n      gap=\"150\"\n    >\n      <Card type=\"clickable\" disabled style={{ maxWidth: '22rem' }}>\n        <Card.Content>\n          <Card.Header>\n            <Card.Header.Heading>\n              <Card.Header.HeadingText>Clickable Card</Card.Header.HeadingText>\n              <Card.Header.SupportingText>\n                The entire card is disabled\n              </Card.Header.SupportingText>\n            </Card.Header.Heading>\n          </Card.Header>\n          <Card.Body>{cardBodyText}</Card.Body>\n          <Card.Footer>\n            <Card.Footer.Actions>\n              <Button kind=\"filled\" appearance=\"accent\" disabled>\n                Button text\n              </Button>\n              <Button kind=\"outline\" appearance=\"accent\" disabled>\n                Button text\n              </Button>\n            </Card.Footer.Actions>\n          </Card.Footer>\n        </Card.Content>\n      </Card>\n      <Card\n        type=\"selectable\"\n        showIndicator\n        disabled\n        style={{ maxWidth: '22rem' }}\n      >\n        <Card.Content>\n          <Card.Header>\n            <Card.Header.Heading>\n              <Card.Header.HeadingText>Selectable Card</Card.Header.HeadingText>\n              <Card.Header.SupportingText>\n                The entire card is disabled\n              </Card.Header.SupportingText>\n            </Card.Header.Heading>\n          </Card.Header>\n          <Card.Body>{cardBodyText}</Card.Body>\n          <Card.Footer>\n            <Card.Footer.Actions>\n              <Button kind=\"filled\" appearance=\"accent\" disabled>\n                Button text\n              </Button>\n              <Button kind=\"outline\" appearance=\"accent\" disabled>\n                Button text\n              </Button>\n            </Card.Footer.Actions>\n          </Card.Footer>\n        </Card.Content>\n      </Card>\n    </Box>"
        },
        {
          "name": "Overlay Content",
          "description": "`Card.Media` provides three content overlay slots for maximum customization: `overlayContentTop`, `overlayContentMiddle`, `overlayContentBottom`",
          "source": "const containerRef = React.useRef<HTMLDivElement>(null);\n    const isRTL = useRTLDirection(containerRef);\n    const LeftIcon = isRTL ? ChevronRightCurved : ChevronLeftCurved;\n    const RightIcon = isRTL ? ChevronLeftCurved : ChevronRightCurved;\n\n    return (\n      <div ref={containerRef}>\n        <Card style={{ maxWidth: '22rem' }}>\n          <Card.MediaAbove\n            aspectRatio=\"4:3\"\n            overlayColor=\"black-20\"\n            overlayContentTop={\n              <Box gap=\"25\" style={{ display: 'flex', padding: '1rem 1rem 0 1rem' }}>\n                <Badge hideIcon appearance=\"infoPrimary\" emphasis=\"medium\" size=\"sm\">\n                  Space\n                </Badge>\n                <Badge\n                  hideIcon\n                  appearance=\"infoSecondary\"\n                  emphasis=\"medium\"\n                  size=\"sm\"\n                >\n                  Satellites\n                </Badge>\n              </Box>\n            }\n            overlayContentMiddle={\n              <Box\n                style={{\n                  display: 'flex',\n                  justifyContent: 'space-between',\n                  padding: '0 1rem',\n                }}\n              >\n                <Button\n                  productType=\"consumer\"\n                  appearance=\"neutral-subtle\"\n                  kind=\"filled\"\n                  theme=\"light\"\n                  size=\"sm\"\n                  iconOnly\n                  iconBefore={<LeftIcon />}\n                  style={{ background: 'white' }}\n                  aria-label=\"Previous\"\n                ></Button>\n                <Button\n                  size=\"sm\"\n                  iconOnly\n                  productType=\"consumer\"\n                  appearance=\"neutral-subtle\"\n                  kind=\"filled\"\n                  theme=\"light\"\n                  iconBefore={<RightIcon />}\n                  style={{ background: 'white' }}\n                  aria-label=\"Next\"\n                ></Button>\n              </Box>\n            }\n            overlayContentBottom={\n              <Box\n                style={{\n                  display: 'flex',\n                  justifyContent: 'center',\n                  alignItems: 'center',\n                  paddingBottom: '0.5rem',\n                  gap: '0.5rem',\n                }}\n              >\n                <span\n                  style={{\n                    background: 'white',\n                    height: '0.375rem',\n                    width: '0.375rem',\n                    borderRadius: '50%',\n                  }}\n                ></span>\n                <span\n                  style={{\n                    background: 'rgba(255,255,255,0.5)',\n                    height: '0.375rem',\n                    width: '0.375rem',\n                    borderRadius: '50%',\n                  }}\n                ></span>\n                <span\n                  style={{\n                    background: 'rgba(255,255,255,0.5)',\n                    height: '0.375rem',\n                    width: '0.375rem',\n                    borderRadius: '50%',\n                  }}\n                ></span>\n                <span\n                  style={{\n                    background: 'rgba(255,255,255,0.5)',\n                    height: '0.375rem',\n                    width: '0.375rem',\n                    borderRadius: '50%',\n                  }}\n                ></span>\n                <span\n                  style={{\n                    background: 'rgba(255,255,255,0.5)',\n                    height: '0.375rem',\n                    width: '0.375rem',\n                    borderRadius: '50%',\n                  }}\n                ></span>\n              </Box>\n            }\n          >\n            <img src={cardMedia} alt=\"viasat\" />\n          </Card.MediaAbove>\n          <Card.Content>\n            <Card.Header>\n              <Card.Header.Heading>\n                <Card.Header.HeadingText>Heading text</Card.Header.HeadingText>\n              </Card.Header.Heading>\n            </Card.Header>\n            <Card.Body>{cardBodyText}</Card.Body>\n\n            <Card.Footer>\n              <Card.Footer.Actions>\n                <Button fluid>Button text</Button>\n              </Card.Footer.Actions>\n            </Card.Footer>\n          </Card.Content>\n        </Card>\n      </div>\n    );"
        },
        {
          "name": "Overlay Color",
          "description": "`Card.Media` offer both `black` and `white` color overlays that feature four intensity levels: `10`, `20`, `30`, `40`\n\n> When using text or icons on top of images, it's important to use intensity values that create enough contrast\nto pass accessibility requirements. When `overlayColor` is not used, be sure to add a custom gradient under text and icons as seen in the last example.",
          "source": "const containerRef = React.useRef<HTMLDivElement>(null);\n    const isRTL = useRTLDirection(containerRef);\n    const ArrowIcon = isRTL ? Arrowbackcurved : Arrowforwardcurved;\n\n    return (\n      <Box\n        style={{ display: 'flex', flexDirection: 'column', maxWidth: '62.5rem' }}\n        gap=\"300\"\n        ref={containerRef}\n      >\n        <Box\n          style={{\n            display: 'grid',\n            gridTemplateColumns: 'repeat(auto-fit, minmax(20rem, 1fr))',\n            width: '100%',\n          }}\n          gap=\"150\"\n        >\n          <Box style={{ display: 'flex', flexDirection: 'column' }} gap=\"150\">\n            <Badge icon={CheckCircleOutline} appearance=\"positive\">\n              Do\n            </Badge>\n            <Card>\n              <Card.MediaAbove\n                overlayColor=\"black-30\"\n                overlayContentBottom={\n                  <Box\n                    style={{\n                      display: 'flex',\n                      justifyContent: 'space-between',\n                      alignItems: 'center',\n                      padding: `${bmSemSpace300} ${bmSemSpace150} ${bmSemSpace100}`,\n                    }}\n                    theme=\"dark\"\n                  >\n                    <Text kind=\"heading-lg\" color=\"primary\">\n                      Black overlay\n                    </Text>\n                    <Icon color=\"primary\" icon={ArrowIcon} size=\"lg\" />\n                  </Box>\n                }\n              >\n                <img src={cardAviation} alt=\"viasat\" />\n              </Card.MediaAbove>\n            </Card>\n          </Box>\n          <Box style={{ display: 'flex', flexDirection: 'column' }} gap=\"150\">\n            <Badge icon={ErrorOutline} appearance=\"negative\">\n              Don't\n            </Badge>\n            <Card>\n              <Card.MediaAbove\n                overlayColor=\"black-10\"\n                overlayContentBottom={\n                  <Box\n                    style={{\n                      display: 'flex',\n                      justifyContent: 'space-between',\n                      alignItems: 'center',\n                      padding: `${bmSemSpace300} ${bmSemSpace150} ${bmSemSpace100}`,\n                    }}\n                    theme=\"dark\"\n                  >\n                    <Text kind=\"heading-alt-lg\" color=\"primary\">\n                      Black overlay\n                    </Text>\n                    <Icon color=\"primary\" icon={ArrowIcon} size=\"lg\" />\n                  </Box>\n                }\n              >\n                <img src={cardAviation} alt=\"viasat\" />\n              </Card.MediaAbove>\n            </Card>\n          </Box>\n        </Box>\n\n        <Box\n          style={{\n            display: 'grid',\n            gridTemplateColumns: 'repeat(auto-fit, minmax(20rem, 1fr))',\n            width: '100%',\n          }}\n          gap=\"150\"\n        >\n          <Box style={{ display: 'flex', flexDirection: 'column' }} gap=\"150\">\n            <Badge icon={CheckCircleOutline} appearance=\"positive\">\n              Do\n            </Badge>\n            <Card>\n              <Card.MediaAbove\n                overlayColor=\"white-40\"\n                overlayContentBottom={\n                  <Box\n                    style={{\n                      display: 'flex',\n                      justifyContent: 'space-between',\n                      alignItems: 'center',\n                      padding: `${bmSemSpace300} ${bmSemSpace150} ${bmSemSpace100}`,\n                    }}\n                    theme=\"light\"\n                  >\n                    <Text kind=\"heading-lg\" color=\"primary\">\n                      White overlay\n                    </Text>\n                    <Icon color=\"primary\" icon={ArrowIcon} size=\"lg\" />\n                  </Box>\n                }\n              >\n                <img src={cardMaritime} alt=\"viasat\" />\n              </Card.MediaAbove>\n            </Card>\n          </Box>\n          <Box style={{ display: 'flex', flexDirection: 'column' }} gap=\"150\">\n            <Badge icon={ErrorOutline} appearance=\"negative\">\n              Don't\n            </Badge>\n            <Card>\n              <Card.MediaAbove\n                overlayColor=\"white-30\"\n                overlayContentBottom={\n                  <Box\n                    style={{\n                      display: 'flex',\n                      justifyContent: 'space-between',\n                      alignItems: 'center',\n                      padding: `${bmSemSpace300} ${bmSemSpace150} ${bmSemSpace100}`,\n                    }}\n                    theme=\"light\"\n                  >\n                    <Text kind=\"heading-alt-lg\" color=\"primary\">\n                      White overlay\n                    </Text>\n                    <Icon color=\"primary\" icon={ArrowIcon} size=\"lg\" />\n                  </Box>\n                }\n              >\n                <img src={cardMaritime} alt=\"viasat\" />\n              </Card.MediaAbove>\n            </Card>\n          </Box>\n        </Box>\n        <Box\n          style={{\n            display: 'grid',\n            gridTemplateColumns: 'repeat(auto-fit, minmax(20rem, 1fr))',\n            width: '100%',\n          }}\n          gap=\"150\"\n        >\n          <Box style={{ display: 'flex', flexDirection: 'column' }} gap=\"150\">\n            <Badge icon={CheckCircleOutline} appearance=\"positive\">\n              Do\n            </Badge>\n            <Card>\n              <Card.MediaAbove\n                overlayContentBottom={\n                  <Box\n                    style={{\n                      display: 'flex',\n                      justifyContent: 'space-between',\n                      alignItems: 'center',\n                      padding: `${bmSemSpace300} ${bmSemSpace150} ${bmSemSpace100}`,\n                      background:\n                        'linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.53) 70.68%, rgba(0, 0, 0, 0.00) 100%)',\n                    }}\n                    theme=\"dark\"\n                  >\n                    <Text kind=\"heading-lg\" color=\"primary\">\n                      Custom gradient\n                    </Text>\n                    <Icon color=\"primary\" icon={ArrowIcon} size=\"lg\" />\n                  </Box>\n                }\n              >\n                <img src={cardAviation} alt=\"viasat\" />\n              </Card.MediaAbove>\n            </Card>\n          </Box>\n          <Box style={{ display: 'flex', flexDirection: 'column' }} gap=\"150\">\n            <Badge icon={ErrorOutline} appearance=\"negative\">\n              Don't\n            </Badge>\n            <Card>\n              <Card.MediaAbove\n                overlayColor=\"black-10\"\n                overlayContentBottom={\n                  <Box\n                    style={{\n                      display: 'flex',\n                      justifyContent: 'space-between',\n                      alignItems: 'center',\n                      padding: `${bmSemSpace300} ${bmSemSpace150} ${bmSemSpace100}`,\n                    }}\n                    theme=\"dark\"\n                  >\n                    <Text kind=\"heading-alt-lg\" color=\"primary\">\n                      Black overlay\n                    </Text>\n                    <Icon color=\"primary\" icon={ArrowIcon} size=\"lg\" />\n                  </Box>\n                }\n              >\n                <img src={cardAviation} alt=\"viasat\" />\n              </Card.MediaAbove>\n            </Card>\n          </Box>\n        </Box>\n      </Box>\n    );"
        },
        {
          "name": "Multiple Alignment",
          "description": "Keeping content aligned within Card rows is user controlled.\n\n> Here are a couple examples of popular alignment practices when presenting\nmultiple cards together. Modify browser width to preview the difference between\nthe two examples for desktop and tablet views.",
          "source": "<Box\n      gap=\"300\"\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        maxWidth: '62.5rem',\n        width: '100%',\n      }}\n    >\n      <Box\n        gap=\"150\"\n        style={{ display: 'flex', flexDirection: 'column', width: '100%' }}\n      >\n        <Text kind=\"body-sm\" color=\"secondary\">\n          Headline and actions stay aligned\n        </Text>\n        <Box\n          gap=\"150\"\n          style={{\n            display: 'grid',\n            gridTemplateColumns: 'repeat(auto-fit, minmax(14rem, 1fr))',\n            width: '100%',\n          }}\n        >\n          <Card>\n            <Card.MediaAbove aspectRatio=\"4:3\">\n              <img src={cardMedia} alt=\"viasat\" />\n            </Card.MediaAbove>\n            <Card.Content style={{ flex: 1 }}>\n              <Card.Header>\n                <Card.Header.Heading>\n                  <Card.Header.HeadingText>\n                    Multi-network solution\n                  </Card.Header.HeadingText>\n                </Card.Header.Heading>\n              </Card.Header>\n\n              <Card.Body style={{ flex: 1 }}>\n                Lorem ipsum dolor sit amet, consectetur.\n              </Card.Body>\n\n              <Card.Footer>\n                <Card.Footer.Actions>\n                  <Button kind=\"filled\" appearance=\"accent\">\n                    Button text\n                  </Button>\n                </Card.Footer.Actions>\n              </Card.Footer>\n            </Card.Content>\n          </Card>\n          <Card>\n            <Card.MediaAbove aspectRatio=\"4:3\">\n              <img src={cardMedia} alt=\"viasat\" />\n            </Card.MediaAbove>\n            <Card.Content style={{ flex: 1 }}>\n              <Card.Header>\n                <Card.Header.Heading>\n                  <Card.Header.HeadingText>\n                    Advanced ground terminals\n                  </Card.Header.HeadingText>\n                </Card.Header.Heading>\n              </Card.Header>\n\n              <Card.Body style={{ flex: 1 }}>\n                Lorem ipsum dolor sit amet, consectetur adipiscing.\n              </Card.Body>\n\n              <Card.Footer>\n                <Card.Footer.Actions>\n                  <Button kind=\"filled\" appearance=\"accent\">\n                    Button text\n                  </Button>\n                </Card.Footer.Actions>\n              </Card.Footer>\n            </Card.Content>\n          </Card>\n          <Card>\n            <Card.MediaAbove aspectRatio=\"4:3\">\n              <img src={cardMedia} alt=\"viasat\" />\n            </Card.MediaAbove>\n            <Card.Content style={{ flex: 1 }}>\n              <Card.Header>\n                <Card.Header.Heading>\n                  <Card.Header.HeadingText>Global coverage</Card.Header.HeadingText>\n                </Card.Header.Heading>\n              </Card.Header>\n\n              <Card.Body style={{ flex: 1 }}>\n                Lorem ipsum dolor sit amet, consectetur.\n              </Card.Body>\n\n              <Card.Footer>\n                <Card.Footer.Actions>\n                  <Button kind=\"filled\" appearance=\"accent\">\n                    Button text\n                  </Button>\n                </Card.Footer.Actions>\n              </Card.Footer>\n            </Card.Content>\n          </Card>\n        </Box>\n      </Box>\n      <Box gap=\"150\" style={{ display: 'flex', flexDirection: 'column' }}>\n        <Text kind=\"body-sm\" color=\"secondary\">\n          Headline, body, and actions stay aligned\n        </Text>\n        <Box\n          style={{\n            display: 'grid',\n            gridTemplateColumns: 'repeat(auto-fit, minmax(14rem, 1fr))',\n            gridTemplateRows: 'repeat(4, auto)',\n            gap: bmSemSpace150,\n          }}\n        >\n          <Card\n            style={{\n              display: 'grid',\n              gridTemplateRows: 'subgrid',\n              gridRow: 'span 4',\n              gap: 0,\n            }}\n          >\n            <Card.MediaAbove aspectRatio=\"4:3\">\n              <img src={cardMedia} alt=\"viasat\" />\n            </Card.MediaAbove>\n            <Card.Content\n              style={{\n                display: 'grid',\n                gridTemplateRows: 'subgrid',\n                gridRow: 'span 3',\n              }}\n            >\n              <Card.Header>\n                <Card.Header.Heading>\n                  <Card.Header.HeadingText>\n                    Multi-network solution\n                  </Card.Header.HeadingText>\n                </Card.Header.Heading>\n              </Card.Header>\n\n              <Card.Body>Lorem ipsum dolor sit amet, consectetur.</Card.Body>\n\n              <Card.Footer>\n                <Card.Footer.Actions>\n                  <Button kind=\"filled\" appearance=\"accent\">\n                    Button text\n                  </Button>\n                </Card.Footer.Actions>\n              </Card.Footer>\n            </Card.Content>\n          </Card>\n          <Card\n            style={{\n              display: 'grid',\n              gridTemplateRows: 'subgrid',\n              gridRow: 'span 4',\n              gap: 0,\n            }}\n          >\n            <Card.MediaAbove aspectRatio=\"4:3\">\n              <img src={cardMedia} alt=\"viasat\" />\n            </Card.MediaAbove>\n            <Card.Content\n              style={{\n                display: 'grid',\n                gridTemplateRows: 'subgrid',\n                gridRow: 'span 3',\n              }}\n            >\n              <Card.Header>\n                <Card.Header.Heading>\n                  <Card.Header.HeadingText>\n                    Advanced ground terminals\n                  </Card.Header.HeadingText>\n                </Card.Header.Heading>\n              </Card.Header>\n\n              <Card.Body>\n                Lorem ipsum dolor sit amet, consectetur adipiscing. Lorem ipsum dolor\n                sit amet, consectetur adipiscing.\n              </Card.Body>\n\n              <Card.Footer>\n                <Card.Footer.Actions>\n                  <Button kind=\"filled\" appearance=\"accent\">\n                    Button text\n                  </Button>\n                </Card.Footer.Actions>\n              </Card.Footer>\n            </Card.Content>\n          </Card>\n          <Card\n            style={{\n              display: 'grid',\n              gridTemplateRows: 'subgrid',\n              gridRow: 'span 4',\n              gap: 0,\n            }}\n          >\n            <Card.MediaAbove aspectRatio=\"4:3\">\n              <img src={cardMedia} alt=\"viasat\" />\n            </Card.MediaAbove>\n            <Card.Content\n              style={{\n                display: 'grid',\n                gridTemplateRows: 'subgrid',\n                gridRow: 'span 3',\n              }}\n            >\n              <Card.Header>\n                <Card.Header.Heading>\n                  <Card.Header.HeadingText>Global coverage</Card.Header.HeadingText>\n                </Card.Header.Heading>\n              </Card.Header>\n\n              <Card.Body>Lorem ipsum dolor sit amet, consectetur.</Card.Body>\n\n              <Card.Footer>\n                <Card.Footer.Actions>\n                  <Button kind=\"filled\" appearance=\"accent\">\n                    Button text\n                  </Button>\n                </Card.Footer.Actions>\n              </Card.Footer>\n            </Card.Content>\n          </Card>\n        </Box>\n      </Box>\n    </Box>"
        },
        {
          "name": "Custom Content",
          "description": "Card is highly customizable. Use provided properties such as color, radius, and shadow\nto extend the appearance of Card, while remaining accessible.",
          "source": "const containerRef = React.useRef<HTMLDivElement>(null);\n    const isRTL = useRTLDirection(containerRef);\n    const ArrowIcon = isRTL ? Arrowbackcurved : Arrowforwardcurved;\n\n    return (\n      <Box\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          justifyContent: 'center',\n          maxWidth: '62.5rem',\n          width: '100%',\n        }}\n        gap=\"400\"\n        ref={containerRef}\n      >\n        <Box\n          style={{\n            display: 'grid',\n            gridTemplateColumns: 'repeat(auto-fit, minmax(14rem, 1fr))',\n            width: '100%',\n          }}\n          gap=\"150\"\n        >\n          <Card>\n            <Card.Content>\n              <Card.Header>\n                <Card.Header.Heading>\n                  <Card.Header.Eyebrow style={{ paddingBottom: `${bmSemSpace100}` }}>\n                    <Box\n                      borderRadius=\"round\"\n                      backgroundColor=\"expressive\"\n                      className=\"bm-expressive-violet\"\n                      p=\"75\"\n                    >\n                      <Icon\n                        style={{ color: `${bmExpressiveColorFg}` }}\n                        icon={SatelliteVariant}\n                        size=\"lg\"\n                      />\n                    </Box>\n                  </Card.Header.Eyebrow>\n                  <Card.Header.HeadingText>Multi-network</Card.Header.HeadingText>\n                </Card.Header.Heading>\n              </Card.Header>\n              <Card.Body>\n                Lorem ipsum dolor sit amet, consectetur adipiscing.\n              </Card.Body>\n              <Card.Footer>\n                <Card.Footer.Actions>\n                  <Button kind=\"bare\" iconAfter={<Icon icon={ArrowIcon} />}>\n                    Learn more\n                  </Button>\n                </Card.Footer.Actions>\n              </Card.Footer>\n            </Card.Content>\n          </Card>\n          <Card>\n            <Card.Content>\n              <Card.Header>\n                <Card.Header.Heading>\n                  <Card.Header.Eyebrow style={{ paddingBottom: `${bmSemSpace100}` }}>\n                    <Box\n                      borderRadius=\"round\"\n                      backgroundColor=\"expressive\"\n                      className=\"bm-expressive-pink\"\n                      p=\"75\"\n                    >\n                      <Icon\n                        style={{ color: `${bmExpressiveColorFg}` }}\n                        icon={GroundTerminal}\n                        size=\"lg\"\n                      />\n                    </Box>\n                  </Card.Header.Eyebrow>\n                  <Card.Header.HeadingText>Ground terminals</Card.Header.HeadingText>\n                </Card.Header.Heading>\n              </Card.Header>\n              <Card.Body>\n                Lorem ipsum dolor sit amet, consectetur adipiscing.\n              </Card.Body>\n              <Card.Footer>\n                <Card.Footer.Actions>\n                  <Button kind=\"bare\" iconAfter={<Icon icon={ArrowIcon} />}>\n                    Learn more\n                  </Button>\n                </Card.Footer.Actions>\n              </Card.Footer>\n            </Card.Content>\n          </Card>\n          <Card>\n            <Card.Content>\n              <Card.Header>\n                <Card.Header.Heading>\n                  <Card.Header.Eyebrow style={{ paddingBottom: `${bmSemSpace100}` }}>\n                    <Box\n                      borderRadius=\"round\"\n                      backgroundColor=\"expressive\"\n                      className=\"bm-expressive-teal\"\n                      p=\"75\"\n                    >\n                      <Icon\n                        style={{ color: `${bmExpressiveColorFg}` }}\n                        icon={Public}\n                        size=\"lg\"\n                      />\n                    </Box>\n                  </Card.Header.Eyebrow>\n                  <Card.Header.HeadingText>Global coverage</Card.Header.HeadingText>\n                </Card.Header.Heading>\n              </Card.Header>\n              <Card.Body>\n                Lorem ipsum dolor sit amet, consectetur adipiscing.\n              </Card.Body>\n              <Card.Footer>\n                <Card.Footer.Actions>\n                  <Button kind=\"bare\" iconAfter={<Icon icon={ArrowIcon} />}>\n                    Learn more\n                  </Button>\n                </Card.Footer.Actions>\n              </Card.Footer>\n            </Card.Content>\n          </Card>\n        </Box>\n        <Box\n          style={{\n            display: 'grid',\n            gridTemplateColumns: 'repeat(auto-fit, minmax(14rem, 1fr))',\n            width: '100%',\n          }}\n          gap=\"150\"\n        >\n          <Card\n            className=\"bm-expressive-violet\"\n            backgroundColor=\"expressive\"\n            borderColor=\"transparent\"\n          >\n            <Card.Content>\n              <Card.Header>\n                <Card.Header.Heading>\n                  <Card.Header.HeadingText>Multi-network</Card.Header.HeadingText>\n                </Card.Header.Heading>\n              </Card.Header>\n              <Card.Body>\n                Lorem ipsum dolor sit amet, consectetur adipiscing.\n              </Card.Body>\n              <Card.Footer>\n                <Card.Footer.Actions>\n                  <Link size=\"md\" href=\"#\" appearance=\"secondary\">\n                    Learn more\n                  </Link>\n                </Card.Footer.Actions>\n              </Card.Footer>\n            </Card.Content>\n          </Card>\n          <Card\n            className=\"bm-expressive-pink\"\n            backgroundColor=\"expressive\"\n            borderColor=\"transparent\"\n          >\n            <Card.Content>\n              <Card.Header>\n                <Card.Header.Heading>\n                  <Card.Header.HeadingText>Ground terminals</Card.Header.HeadingText>\n                </Card.Header.Heading>\n              </Card.Header>\n              <Card.Body>\n                Lorem ipsum dolor sit amet, consectetur adipiscing.\n              </Card.Body>\n              <Card.Footer>\n                <Card.Footer.Actions>\n                  <Link size=\"md\" href=\"#\" appearance=\"secondary\">\n                    Learn more\n                  </Link>\n                </Card.Footer.Actions>\n              </Card.Footer>\n            </Card.Content>\n          </Card>\n          <Card\n            className=\"bm-expressive-teal\"\n            backgroundColor=\"expressive\"\n            borderColor=\"transparent\"\n          >\n            <Card.Content>\n              <Card.Header>\n                <Card.Header.Heading>\n                  <Card.Header.HeadingText>Global coverage</Card.Header.HeadingText>\n                </Card.Header.Heading>\n              </Card.Header>\n              <Card.Body>\n                Lorem ipsum dolor sit amet, consectetur adipiscing.\n              </Card.Body>\n              <Card.Footer>\n                <Card.Footer.Actions>\n                  <Link size=\"md\" href=\"#\" appearance=\"secondary\">\n                    Learn more\n                  </Link>\n                </Card.Footer.Actions>\n              </Card.Footer>\n            </Card.Content>\n          </Card>\n        </Box>\n        <Box\n          style={{\n            display: 'grid',\n            gridTemplateColumns: 'repeat(auto-fit, minmax(20rem, 1fr))',\n            width: '100%',\n          }}\n          gap=\"150\"\n        >\n          <Card className=\"bm-expressive-teal\" backgroundColor=\"02\" borderColor=\"02\">\n            <Card.Content>\n              <Card.Header>\n                <Card.Header.Heading>\n                  <Card.Header.HeadingText>NexusWave</Card.Header.HeadingText>\n                </Card.Header.Heading>\n                <Card.Header.ContentAfter>\n                  <Button\n                    kind=\"bare\"\n                    iconOnly\n                    iconBefore={<MoreVert />}\n                    aria-label=\"More options\"\n                  ></Button>\n                </Card.Header.ContentAfter>\n              </Card.Header>\n              <Card.Body>\n                Lorem ipsum dolor sit amet, consectetur adipiscing.\n              </Card.Body>\n              <Card.Footer>\n                <Card.Footer.Actions>\n                  <Link size=\"md\" href=\"#\" appearance=\"primary\" hideUnderline>\n                    Explore now\n                  </Link>\n                </Card.Footer.Actions>\n              </Card.Footer>\n            </Card.Content>\n          </Card>\n          <Card className=\"bm-expressive-teal\" backgroundColor=\"02\" borderColor=\"02\">\n            <Card.Content>\n              <Card.Header>\n                <Card.Header.Heading>\n                  <Card.Header.HeadingText>Amara</Card.Header.HeadingText>\n                </Card.Header.Heading>\n                <Card.Header.ContentAfter>\n                  <Button\n                    kind=\"bare\"\n                    iconOnly\n                    iconBefore={<MoreVert />}\n                    aria-label=\"More options\"\n                  ></Button>\n                </Card.Header.ContentAfter>\n              </Card.Header>\n              <Card.Body>\n                Lorem ipsum dolor sit amet, consectetur adipiscing.\n              </Card.Body>\n              <Card.Footer>\n                <Card.Footer.Actions>\n                  <Link size=\"md\" href=\"#\" appearance=\"primary\" hideUnderline>\n                    Explore now\n                  </Link>\n                </Card.Footer.Actions>\n              </Card.Footer>\n            </Card.Content>\n          </Card>\n        </Box>\n      </Box>\n    );"
        }
      ],
      "category": "Components",
      "displayName": "Card/Card",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Button",
      "slug": "components-button",
      "description": "Button allows users to trigger actions or events.",
      "type": "component",
      "props": [
        {
          "name": "appearance",
          "type": "'accent' | 'neutral' | 'destructive' | 'neutral-subtle'",
          "description": "Specify the appearance of a Button",
          "defaultValue": "accent"
        },
        {
          "name": "kind",
          "type": "'filled' | 'outline' | 'ghost' | 'bare'",
          "description": "Specify the kind of Button",
          "defaultValue": "filled"
        },
        {
          "name": "size",
          "type": "'sm' | 'md' | 'lg'",
          "description": "Specify the size of a Button",
          "defaultValue": "md"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if the Button is disabled"
        },
        {
          "name": "loading",
          "type": "boolean",
          "description": "Specify if the Button is in a loading state"
        },
        {
          "name": "loadingValue",
          "type": "number | undefined",
          "description": "Specify if the loading spinner is determinate by setting a value",
          "defaultValue": "undefined"
        },
        {
          "name": "fluid",
          "type": "boolean",
          "description": "Specify if Button is fluid"
        },
        {
          "name": "width",
          "type": "React.CSSProperties",
          "description": "Specify the width of a Button"
        },
        {
          "name": "iconBefore",
          "type": "React.ReactNode",
          "description": "Specify if the Button displays icon before the text"
        },
        {
          "name": "iconAfter",
          "type": "React.ReactNode",
          "description": "Specify if the Button displays icon after the text"
        },
        {
          "name": "iconOnly",
          "type": "boolean",
          "description": "Specify if the icon displays without text"
        },
        {
          "name": "productType",
          "type": "'enterprise' | 'consumer'",
          "description": "Specify the productType of a Button"
        },
        {
          "name": "children",
          "type": "React.ReactNode",
          "description": "Provide content for the Button"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the Button. By default it inherits the theme from the parent"
        },
        {
          "name": "aria-label",
          "type": "string",
          "description": "Provide an accessible label for the button, especially important for icon-only buttons"
        },
        {
          "name": "m",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify all margin"
        },
        {
          "name": "mx",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify before and after margin"
        },
        {
          "name": "my",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify top and bottom margin"
        },
        {
          "name": "mTop",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify top margin"
        },
        {
          "name": "mBottom",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify bottom margin"
        },
        {
          "name": "mBefore",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify before margin"
        },
        {
          "name": "mAfter",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify after margin"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Button.",
          "source": "<Button {...args} />"
        },
        {
          "name": "Appearance",
          "description": "Button supports `accent`, `neutral`, `neutral-subtle`, and `destructive` appearance. Default appearance is `accent`.",
          "source": "<Box\n      gap={'200'}\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'center',\n      }}\n    >\n      {getTypedValues(BUTTON_APPEARANCES).map(currentAppearance => (\n        <Button key={currentAppearance} appearance={currentAppearance} {...args}>\n          {capitalizeFirstLetter(currentAppearance).replace('-', ' ')}\n        </Button>\n      ))}\n    </Box>"
        },
        {
          "name": "Kind",
          "description": "Button supports `filled`, `outlined`, `ghost`, and `bare` options. Default kind is `filled`.",
          "source": "<Box gap={'200'} style={{ display: 'flex', flexDirection: 'column' }}>\n      {getTypedValues(BUTTON_APPEARANCES).map(currentAppearance => (\n        <Box\n          key={currentAppearance}\n          gap={'125'}\n          style={{ display: 'flex', alignItems: 'center' }}\n        >\n          {getTypedValues(BUTTON_KINDS).map(currentKind => (\n            <Button\n              key={`${currentAppearance}-${currentKind}`}\n              kind={currentKind}\n              appearance={currentAppearance}\n              {...args}\n            >\n              {capitalizeFirstLetter(currentKind)}\n            </Button>\n          ))}\n        </Box>\n      ))}\n    </Box>"
        },
        {
          "name": "Size",
          "description": "Button supports `sm`, `md`, and `lg`. Default size is `md`.",
          "source": "<Box\n      gap={'100'}\n      style={{\n        display: 'flex',\n        flexDirection: 'row',\n        alignItems: 'center',\n        flexShrink: 0,\n        flexGrow: 0,\n      }}\n    >\n      {getTypedValues(BUTTON_SIZES).map(currentSize => (\n        <Button key={currentSize} size={currentSize}>\n          {sizeFullName[currentSize]}\n        </Button>\n      ))}\n    </Box>"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` to display Button in a disabled state.",
          "source": "<Button disabled {...args}>\n      Disabled\n    </Button>"
        },
        {
          "name": "Loading",
          "description": "Set `loading` to `true` to activate the Button’s loading state. Use `children` to modify the text for the loading state.\n\n> By default, Button width will adjust to children when `loading` is set to `true`. Optionally, set a fixed width to prevent the button size from shifting between states.",
          "source": "const [isLoading, setIsLoading] = useState(true);\n\n    const handleSwitchChange: ChangeEventHandler<HTMLInputElement> = event => {\n      setIsLoading(event.target.checked);\n    };\n    return (\n      <Box gap=\"200\" style={{ display: 'flex', flexDirection: 'column' }}>\n        <Switch\n          onText={'Loading state'}\n          onChange={handleSwitchChange}\n          defaultChecked={isLoading}\n        />\n        <Box\n          gap={'125'}\n          style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }}\n        >\n          {getTypedValues(BUTTON_KINDS).map(kind => (\n            <Button key={kind} kind={kind} loading={isLoading} appearance=\"accent\">\n              {isLoading ? 'Loading...' : capitalizeFirstLetter(kind)}\n            </Button>\n          ))}\n        </Box>\n        <Box\n          gap={'125'}\n          style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }}\n        >\n          {getTypedValues(BUTTON_KINDS).map(kind => (\n            <Button\n              key={kind}\n              kind={kind}\n              loading={isLoading}\n              appearance=\"neutral\"\n              width={'7rem'}\n              iconOnly={isLoading}\n            >\n              {capitalizeFirstLetter(kind)}\n            </Button>\n          ))}\n        </Box>\n        <Box\n          gap={'125'}\n          style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }}\n        >\n          {getTypedValues(BUTTON_KINDS).map(kind => (\n            <Button\n              key={kind}\n              kind={kind}\n              loading={isLoading}\n              appearance=\"neutral-subtle\"\n              iconBefore={<Satellite role=\"img\" aria-label=\"Satellite\" />}\n              iconOnly\n            />\n          ))}\n        </Box>\n      </Box>\n    );"
        },
        {
          "name": "Width",
          "description": "Use `width` to customize the width of a Button. Use `rems` to specify width to ensure Button scales with user preferences. Consider internationalization dependencies when setting buttons to a fixed width value.",
          "source": "<Box\n      gap={'100'}\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <Button {...args} />\n      <Button kind=\"outline\" {...args} />\n    </Box>"
        },
        {
          "name": "Fluid",
          "description": "Set `fluid` to `true` to make Button span its parent container.",
          "source": "<Button fluid>Fluid</Button>"
        },
        {
          "name": "With Icon",
          "description": "Pass an icon to `iconBefore` or `iconAfter` to display an icon on either side of the Button.",
          "source": "<Box\n      gap={'100'}\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <Button iconBefore={<Satellite role=\"img\" aria-label=\"Satellite\" />}>\n        Icon before\n      </Button>\n      <Button iconAfter={<Satellite role=\"img\" aria-label=\"Satellite\" />}>\n        Icon after\n      </Button>\n    </Box>"
        },
        {
          "name": "Icon Only",
          "description": "When passing an icon, set `iconOnly` to `true` to display a button without text. If a button has an icon and no text, provide an `aria-label` to the button for accessibility.",
          "source": "<Box gap={'200'} style={{ display: 'flex', flexDirection: 'column' }}>\n      {getTypedValues(BUTTON_APPEARANCES).map(currentAppearance => (\n        <Box\n          key={currentAppearance}\n          gap={'125'}\n          style={{ display: 'flex', alignItems: 'center' }}\n        >\n          {getTypedValues(BUTTON_KINDS).map(currentKind => (\n            <Button\n              key={`${currentAppearance}-${currentKind}`}\n              kind={currentKind}\n              appearance={currentAppearance}\n              iconOnly\n              iconBefore={<Satellite role=\"img\" aria-label=\"Satellite\" />}\n              aria-label=\"Satellite\"\n            />\n          ))}\n        </Box>\n      ))}\n    </Box>"
        },
        {
          "name": "Product Type",
          "description": "The `productType` theme globally sets design decisions for multiple components, including Button. Default `productType` is `enterprise`.\n\n> Learn more about applying `productType` globally in [Theme](?path=/docs/concepts-theming--docs) docs.",
          "source": "<Box style={{ display: 'flex', flexDirection: 'column', gap: bmSemSpace150 }}>\n      <Box style={{ display: 'flex', gap: bmSemSpace100 }}>\n        <Button productType=\"enterprise\">Enterprise</Button>\n        <Button\n          iconOnly\n          iconAfter={<Satellite role=\"img\" aria-label=\"Satellite\" />}\n        ></Button>\n      </Box>\n      <Box style={{ display: 'flex', gap: bmSemSpace100 }}>\n        <Button productType=\"consumer\">Consumer</Button>\n        <Button\n          productType=\"consumer\"\n          iconOnly\n          iconAfter={<Satellite role=\"img\" aria-label=\"Satellite\" />}\n        ></Button>\n      </Box>\n    </Box>"
        }
      ],
      "category": "Components",
      "displayName": "Button",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Breadcrumb/BreadcrumbItem",
      "slug": "components-breadcrumb-breadcrumbitem",
      "description": "Breadcrumb is a secondary navigation pattern that helps users understand the hierarchy\namong levels and navigate back through them.",
      "type": "component",
      "props": [
        {
          "name": "href",
          "type": "string",
          "description": "Pass href to an item"
        },
        {
          "name": "onClick",
          "type": "(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void",
          "description": "Pass an onClick handler to an item"
        },
        {
          "name": "icon",
          "type": "React.FC<any>",
          "description": "Pass icon to an item"
        },
        {
          "name": "children",
          "type": "React.ReactNode",
          "description": "Pass text to an item",
          "required": true
        },
        {
          "name": "truncationWidth",
          "type": "string",
          "description": "Specify truncation width of the items. Sets max-width for all items but the last."
        },
        {
          "name": "isCurrent",
          "type": "boolean",
          "description": "Specify explicitly if the item is the last one",
          "defaultValue": "false"
        },
        {
          "name": "RenderLink",
          "type": "React.ComponentType<Record<string, unknown>>",
          "description": "Pass a custom render element for the link"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default BreadcrumbItem.",
          "source": "<Breadcrumb>\n      <BreadcrumbItem\n        href={href}\n        icon={icon}\n        truncationWidth={truncationWidth}\n        isCurrent={isCurrent}\n      >\n        {children}\n      </BreadcrumbItem>\n      <BreadcrumbItem href=\"#\">Current</BreadcrumbItem>\n    </Breadcrumb>"
        }
      ],
      "category": "Components",
      "displayName": "Breadcrumb/BreadcrumbItem",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Breadcrumb/Breadcrumb",
      "slug": "components-breadcrumb-breadcrumb",
      "description": "Breadcrumb is a secondary navigation pattern that helps users understand the hierarchy\namong levels and navigate back through them.",
      "type": "component",
      "props": [
        {
          "name": "children",
          "type": "React.ReactNode",
          "description": "Pass items to the Breadcrumb",
          "required": true
        },
        {
          "name": "wrap",
          "type": "boolean",
          "description": "Specify if items wrap or collapse to an ellipsis\n@ignore",
          "defaultValue": "true"
        },
        {
          "name": "itemsBeforeCollapse",
          "type": "number",
          "description": "Specify how many items show before ellipsis\n@ignore",
          "defaultValue": "1"
        },
        {
          "name": "itemsAfterCollapse",
          "type": "number",
          "description": "Specify how many items show after ellipsis\n@ignore",
          "defaultValue": "1"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the Breadcrumbs. By default, it inherits the theme from the parent"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Breadcrumb.",
          "source": "<Breadcrumb {...args}>\n      <BreadcrumbItem href=\"#\">Item 1</BreadcrumbItem>\n      <BreadcrumbItem href=\"#\">Item 2</BreadcrumbItem>\n      <BreadcrumbItem href=\"#\">Item 3</BreadcrumbItem>\n      <BreadcrumbItem href=\"#\">Item 4</BreadcrumbItem>\n      <BreadcrumbItem href=\"#\">Item 5</BreadcrumbItem>\n      <BreadcrumbItem href=\"#\">Current</BreadcrumbItem>\n    </Breadcrumb>"
        },
        {
          "name": "With Icon",
          "description": "Use `icon` to pass an icon to a Breadcrumb.Item.\nUse `children` to pass text to a Breadcrumb.Item.\nAdding an icon is optional.",
          "source": "<>\n      <Breadcrumb>\n        <BreadcrumbItem href=\"#\" icon={DashboardOutlined}>\n          Item 1\n        </BreadcrumbItem>\n        <BreadcrumbItem href=\"#\" icon={BusinessOutlined}>\n          Item 2\n        </BreadcrumbItem>\n        <BreadcrumbItem href=\"#\" icon={DirectionsBoatOutlined}>\n          Item 3\n        </BreadcrumbItem>\n        <BreadcrumbItem href=\"#\" icon={SatelliteOutlined}>\n          Item 4\n        </BreadcrumbItem>\n      </Breadcrumb>\n      <Breadcrumb aria-label={'Breadcrumbs 2'}>\n        <BreadcrumbItem href=\"#\" icon={HomeOutlined}>\n          Item 1\n        </BreadcrumbItem>\n        <BreadcrumbItem href=\"#\">Item 2</BreadcrumbItem>\n        <BreadcrumbItem href=\"#\">Item 3</BreadcrumbItem>\n        <BreadcrumbItem href=\"#\">Item 4</BreadcrumbItem>\n      </Breadcrumb>\n    </>"
        },
        {
          "name": "Truncation Width",
          "description": "Pass `truncationWidth` to prevent extra long titles from taking up too much space.\nAll items will respect max-width setting besides the current item.",
          "source": "<Breadcrumb>\n      <BreadcrumbItem href=\"#\" truncationWidth={'7.5rem'}>\n        This is a really long name\n      </BreadcrumbItem>\n      <BreadcrumbItem href=\"#\" truncationWidth={'120px'}>\n        <div>This is a really long name</div>\n      </BreadcrumbItem>\n      <BreadcrumbItem href=\"#\">\n        The user will want to see the current title\n      </BreadcrumbItem>\n    </Breadcrumb>"
        }
      ],
      "category": "Components",
      "displayName": "Breadcrumb/Breadcrumb",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Box",
      "slug": "components-box",
      "description": "Box is a primitive wrapper used to build components,\nproviding quick access to surface, spacing, border, radius, and shadow design tokens.",
      "type": "component",
      "props": [
        {
          "name": "children",
          "type": "ReactNode",
          "description": "Provide content for the Box"
        },
        {
          "name": "backgroundColor",
          "type": "'positive' | 'warning' | 'negative' | 'inverse' | 'selected' | 'expressive' | '00' | '00-alt' | '01' | '02' | '03' | 'info-primary' | 'info-secondary' | 'positive-strong' | 'warning-strong' | 'negative-strong' | 'info-primary-strong' | 'info-secondary-strong' | 'selected-subtle' | 'highlight' | 'transparent' | 'expressive-stronger' | 'expressive-inverse'",
          "description": "Specify the background color of a Box"
        },
        {
          "name": "borderColor",
          "type": "'positive' | 'warning' | 'negative' | 'inverse' | 'selected' | 'expressive' | 'focus' | '00' | '00-alt' | '01' | '02' | '03' | 'info-primary' | 'info-secondary' | 'positive-strong' | 'warning-strong' | 'negative-strong' | 'info-primary-strong' | 'info-secondary-strong' | 'transparent' | 'expressive-stronger' | 'strong'",
          "description": "Specify the border color of a Box"
        },
        {
          "name": "borderWidth",
          "type": "'md' | 'lg' | 'xl' | 'none' | 'divider'",
          "description": "Specify the border width of a Box"
        },
        {
          "name": "borderRadius",
          "type": "'xs' | 'sm' | 'md' | 'lg' | 'none' | 'round'",
          "description": "Specify the border radius of a Box"
        },
        {
          "name": "as",
          "type": "React.ElementType",
          "description": "Specify the HTML element type of a Box",
          "defaultValue": "'div'"
        },
        {
          "name": "shadow",
          "type": "'sm' | 'md' | 'lg' | 'none' | 'overlay'",
          "description": "Specify if a Box has a shadow"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of a Box"
        },
        {
          "name": "p",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify all padding"
        },
        {
          "name": "m",
          "type": "any",
          "description": "Specify all margin"
        },
        {
          "name": "px",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify before and after padding"
        },
        {
          "name": "py",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify top and bottom padding"
        },
        {
          "name": "pTop",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify top padding"
        },
        {
          "name": "pBottom",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify bottom padding"
        },
        {
          "name": "pBefore",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify before padding"
        },
        {
          "name": "pAfter",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify after padding"
        },
        {
          "name": "mx",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify before and after margin"
        },
        {
          "name": "my",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify top and bottom margin"
        },
        {
          "name": "mTop",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify top margin"
        },
        {
          "name": "mBottom",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify bottom margin"
        },
        {
          "name": "mBefore",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify before margin"
        },
        {
          "name": "mAfter",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify after margin"
        },
        {
          "name": "gap",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify gap between child elements"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Box.",
          "source": "<Box {...args}>\n      <Text>{children}</Text>\n    </Box>"
        },
        {
          "name": "Background And Border Color",
          "description": "Apply `backgroundColor` and `borderColor` tokens to a Box.\nView [Design Tokens](https://www.figma.com/design/4FUymLWopOWPWIDvPFcO1K?node-id=4149-1151) to see more available color tokens.",
          "source": "const examples: {\n      backgroundColor: BoxBackgroundColor;\n      borderColor: BoxBorderColor;\n    }[] = [\n      { backgroundColor: '00', borderColor: '00' },\n      { backgroundColor: '00-alt', borderColor: '00-alt' },\n      { backgroundColor: '01', borderColor: '01' },\n      { backgroundColor: '02', borderColor: '02' },\n      { backgroundColor: '03', borderColor: '03' },\n      { backgroundColor: 'inverse', borderColor: 'inverse' },\n    ];\n    return (\n      <>\n        {examples.map(({ backgroundColor, borderColor }) => (\n          <Box\n            key={`${backgroundColor}-${borderColor}`}\n            backgroundColor={backgroundColor}\n            borderColor={borderColor}\n            px=\"75\"\n            py=\"75\"\n          >\n            {backgroundColor === 'inverse' ? (\n              <Text\n                color={'primaryInverse'}\n              >{`surface-${backgroundColor} with border-${borderColor}`}</Text>\n            ) : (\n              <Text>{`surface-${backgroundColor} with border-${borderColor}`}</Text>\n            )}\n          </Box>\n        ))}\n        <div\n          style={{\n            display: 'flex',\n            paddingTop: bmSemSpace100,\n            flexDirection: 'column',\n            justifyContent: 'center',\n            alignItems: 'center',\n          }}\n        >\n          <Text>\n            Learn more about Beam’s{' '}\n            <Link\n              href={\n                'https://www.figma.com/design/4FUymLWopOWPWIDvPFcO1K/Beam-3-ALPHA--DONT-USE-?node-id=19392-69748&t=i2xm8CmKWYAC50rQ-4'\n              }\n              target={'_blank'}\n            >\n              surface layering modal\n            </Link>\n          </Text>{' '}\n        </div>\n      </>\n    );"
        },
        {
          "name": "Border Width",
          "description": "Apply `borderWidth` tokens to a Box. View [Design Tokens](https://www.figma.com/design/4FUymLWopOWPWIDvPFcO1K?node-id=3884-4972) to learn more about border width tokens.",
          "source": "// Helper object just to showcase defined values in story\n    const borderWidthsExamples: Record<BorderWidthType, number | string> = {\n      none: 0,\n      md: 1,\n      lg: 2,\n      xl: 4,\n      divider: 1,\n    };\n    return (\n      <>\n        {Object.keys(borderWidthsExamples).map(key => {\n          const borderWidthKey = key as BorderWidthType;\n          return (\n            <Box\n              key={key}\n              px=\"75\"\n              py=\"75\"\n              borderWidth={borderWidthKey}\n              borderColor=\"01\"\n              backgroundColor=\"01\"\n            >\n              <Text>\n                border-width-{key} ({borderWidthsExamples[borderWidthKey]}px)\n              </Text>\n            </Box>\n          );\n        })}\n      </>\n    );"
        },
        {
          "name": "Border Radius",
          "description": "Apply `borderRadius` tokens to a Box.\nView [Design Tokens](https://www.figma.com/design/4FUymLWopOWPWIDvPFcO1K?node-id=3884-4972) to learn more about border radius tokens.",
          "source": "// Helper object just to showcase proper values in story\n    const borderRadiusValues: Record<BorderRadiusType, number | string> = {\n      none: 0,\n      xs: 2,\n      sm: 4,\n      md: 8,\n      lg: 16,\n      round: 9999,\n    };\n    return (\n      <>\n        {Object.keys(borderRadiusValues).map(key => {\n          const borderRadiusKey = key as BorderRadiusType;\n          return (\n            <Box\n              key={key}\n              backgroundColor=\"02\"\n              borderRadius={borderRadiusKey}\n              px=\"75\"\n              py=\"75\"\n            >\n              <Text>{`radius-${key} (${borderRadiusValues[borderRadiusKey]}px)`}</Text>\n            </Box>\n          );\n        })}\n      </>\n    );"
        },
        {
          "name": "Shadow",
          "description": "Apply `shadow` tokens to a Box. Default shadow is `none`.\nView [Design Tokens](https://www.figma.com/design/4FUymLWopOWPWIDvPFcO1K?node-id=3836-1176) to learn more about shadow tokens.",
          "source": "<>\n        {Object.values(SHADOWS_CLASS_NAMES).map(shadow => (\n          <Box key={shadow} px=\"75\" py=\"75\" shadow={shadow} backgroundColor=\"01\">\n            <Text>shadow-{shadow}</Text>\n          </Box>\n        ))}\n      </>"
        },
        {
          "name": "Custom Content",
          "description": "Use expressive tokens to extend Box colors.",
          "source": "<>\n        <Box\n          px={'100'}\n          py={'75'}\n          className=\"bm-expressive-violet\"\n          backgroundColor=\"expressive\"\n          borderColor=\"expressive\"\n          borderWidth=\"md\"\n          borderRadius=\"sm\"\n        >\n          <Text color=\"expressive\">Violet</Text>\n        </Box>\n        <Box\n          px={'100'}\n          py={'75'}\n          className=\"bm-expressive-violet\"\n          backgroundColor=\"expressive-stronger\"\n          borderColor=\"expressive-stronger\"\n          borderWidth=\"md\"\n          borderRadius=\"sm\"\n        >\n          <Text color=\"expressiveStronger\">Violet stronger</Text>\n        </Box>\n        <Box\n          px={'100'}\n          py={'75'}\n          className=\"bm-expressive-violet\"\n          backgroundColor=\"expressive-inverse\"\n          borderRadius=\"sm\"\n        >\n          <Text color=\"expressiveInverseStronger\">Violet inverse</Text>\n        </Box>\n        <Box pTop={'100'} style={{ display: 'flex', justifyContent: 'center' }}>\n          <Text>\n            Learn more about Beam's{' '}\n            <Link\n              href=\"https://www.figma.com/design/4FUymLWopOWPWIDvPFcO1K/Beam-3-Components---Tokens?node-id=19837-84496&t=MwstU7y1lEMo0xwT-4\"\n              target=\"_blank\"\n            >\n              Expressive tokens\n            </Link>\n          </Text>\n        </Box>\n      </>"
        }
      ],
      "category": "Components",
      "displayName": "Box",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/BadgeDot",
      "slug": "components-badgedot",
      "description": "BadgeDot is used to indicate status, and hold small amounts of information.",
      "type": "component",
      "props": [
        {
          "name": "children",
          "type": "ReactNode",
          "description": "Provide text for the BadgeDot"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the BadgeDot. By default it inherits the theme from the parent"
        },
        {
          "name": "appearance",
          "type": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'",
          "description": "Specify the appearance of the BadgeDot",
          "defaultValue": "infoPrimary"
        },
        {
          "name": "emphasis",
          "type": "'strong' | 'subtle'",
          "description": "Specify the emphasis of the BadgeDot",
          "defaultValue": "strong"
        },
        {
          "name": "overrideDotColor",
          "type": "string",
          "description": "Overrides default dot color"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default BadgeDot.",
          "source": "<BadgeDot {...args} />"
        },
        {
          "name": "Appearances",
          "description": "BadgeDot supports `infoPrimary`, `infoSecondary`, `positive`, `warning`, and `negative` appearance.\nDefault appearance is `infoPrimary`.",
          "source": "<>\n        {appearance.map(variant => (\n          <BadgeDot key={variant} appearance={variant}>\n            {appearanceToText[variant]}\n          </BadgeDot>\n        ))}\n      </>"
        },
        {
          "name": "Customize Appearances",
          "description": "Custom colors can be passed to the dot using `overrideDotColor`.",
          "source": "<BadgeDot {...args}>Custom color</BadgeDot>"
        },
        {
          "name": "Emphasis",
          "description": "BadgeDot supports `strong` and `subtle` emphasis. Default emphasis is `strong`.",
          "source": "<>\n        {emphasis.map(variant => (\n          <BadgeDot key={variant} emphasis={variant}>\n            {emphasisToText[variant]}\n          </BadgeDot>\n        ))}\n      </>"
        },
        {
          "name": "Hide Text",
          "description": "Displaying text is optional. BadgeDot will display without text if no text is passed to `children`.",
          "source": "<BadgeDot />"
        }
      ],
      "category": "Components",
      "displayName": "BadgeDot",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Badge",
      "slug": "components-badge",
      "description": "Badge is used to indicate status, highlight featured content, and hold small amounts of information.",
      "type": "component",
      "props": [
        {
          "name": "appearance",
          "type": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'",
          "description": "Specify the appearance of the Badge",
          "defaultValue": "infoPrimary"
        },
        {
          "name": "p",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify all padding"
        },
        {
          "name": "children",
          "type": "ReactNode",
          "description": "Provide text for the Badge",
          "required": true
        },
        {
          "name": "size",
          "type": "'sm' | 'md'",
          "description": "Specify the size of the Badge",
          "defaultValue": "sm"
        },
        {
          "name": "emphasis",
          "type": "'strong' | 'medium' | 'subtle'",
          "description": "Specify the emphasis of the Badge",
          "defaultValue": "strong"
        },
        {
          "name": "hideIcon",
          "type": "boolean",
          "description": "Specify if the icon displays on the Badge",
          "defaultValue": "false"
        },
        {
          "name": "icon",
          "type": "React.FC<any>",
          "description": "Specify a different icon for the Badge"
        },
        {
          "name": "iconAriaLabel",
          "type": "string",
          "description": "Specify the aria-label for the icon, announced by screen readers"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the Badge"
        },
        {
          "name": "productType",
          "type": "'enterprise' | 'consumer'",
          "description": "Specify the productType of a Badge"
        },
        {
          "name": "expressive",
          "type": "enum",
          "description": "Specify an expressive theme for the Badge"
        },
        {
          "name": "m",
          "type": "any",
          "description": "Specify all margin"
        },
        {
          "name": "px",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify before and after padding"
        },
        {
          "name": "py",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify top and bottom padding"
        },
        {
          "name": "pTop",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify top padding"
        },
        {
          "name": "pBottom",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify bottom padding"
        },
        {
          "name": "pBefore",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify before padding"
        },
        {
          "name": "pAfter",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify after padding"
        },
        {
          "name": "mx",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify before and after margin"
        },
        {
          "name": "my",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify top and bottom margin"
        },
        {
          "name": "mTop",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify top margin"
        },
        {
          "name": "mBottom",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify bottom margin"
        },
        {
          "name": "mBefore",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify before margin"
        },
        {
          "name": "mAfter",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify after margin"
        },
        {
          "name": "gap",
          "type": "'0' | '12' | '25' | '50' | '75' | '100' | '125' | '150' | '200' | '300' | '400' | '500' | '700' | '800'",
          "description": "Specify gap between child elements"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Badge.",
          "source": "<Badge {...args} />"
        },
        {
          "name": "Appearance",
          "description": "Badge supports `infoPrimary`, `infoSecondary`, `positive`, `warning`, and `negative` appearance. Default appearance is `infoPrimary`.",
          "source": "<>\n        {badgeAppearances.map(appearance => (\n          <Badge {...props} appearance={appearance}>\n            {sentenceCase(appearance)}\n          </Badge>\n        ))}\n      </>"
        },
        {
          "name": "Size",
          "description": "Badge supports `sm` and `md`. Default size is `sm`.",
          "source": "<>\n        {badgeSizes.map(size => {\n          return (\n            <Badge {...props} size={size} appearance=\"positive\">\n              {size2label[size]}\n            </Badge>\n          );\n        })}\n      </>"
        },
        {
          "name": "Emphasis",
          "description": "Badge supports `strong`, `medium`, and `subtle` emphasis. Default emphasis is `strong`.",
          "source": "<div style={{ display: 'flex', flexDirection: 'column', rowGap: '12px' }}>\n        {badgeAppearances.map(appearance => (\n          <div style={{ display: 'flex', columnGap: '16px' }}>\n            {badgeEmphases.map(emphasis => (\n              <Badge {...props} emphasis={emphasis} appearance={appearance}>\n                {sentenceCase(emphasis)}\n              </Badge>\n            ))}\n          </div>\n        ))}\n      </div>"
        },
        {
          "name": "Icon",
          "description": "Displaying the Badge icon is optional. Set `hideIcon` to `true` to hide the icon. Customize the icon using `icon`.",
          "source": "<>\n        <Badge>With icon</Badge>\n        <Badge hideIcon>Without icon</Badge>\n        <Badge icon={LocalShippingOutlined}>Custom icon</Badge>\n      </>"
        },
        {
          "name": "Custom Content",
          "description": "Use expressive tokens to effortlessly extend Badge colors.\n\n> Raw hex values can also be applied, however they must meet accessibility requirements.",
          "source": "<>\n        <Badge\n          {...args}\n          style={{\n            color: bmExpressiveColorInverseFgStronger,\n            background: bmExpressiveColorInverseBg,\n          }}\n        />\n        <Badge\n          {...args}\n          style={{\n            color: bmExpressiveColorFg,\n            background: bmExpressiveColorBgStronger,\n          }}\n        />\n        <Badge\n          {...args}\n          style={{\n            color: bmExpressiveColorFg,\n            background: 'transparent',\n            borderColor: bmExpressiveColorBorderStronger,\n          }}\n        />\n      </>"
        }
      ],
      "category": "Components",
      "displayName": "Badge",
      "importPath": "@viasat/beam-react",
      "usageGuidelines": "# Badge guidelines\n\n## Purpose\n\nBadge is a static label used to indicate status, highlight featured content, or hold small amounts of metadata. It is non-interactive and communicates meaning through a combination of color, icon, and text.\n\nFor a more subtle indicator, use BadgeDot. For selectable or interactive labels, use Chip.\n\n## Use when\n\n- Showing the status of an object — for example, positive, warning, negative, or informational states.\n- Labeling content with a short category, tag, or metadata value.\n- Drawing attention to a specific item within a list or table.\n\n## Avoid when\n\n- The label needs to be selectable or interactive — use Chip.\n- The status requires a prominent standalone display; Badge is supplementary, not a primary communication device.\n\n## Variants\n\nBadge includes five appearances for common status needs: **infoPrimary** (default), **infoSecondary**, **positive**, **warning**, and **negative**. Each has a paired default icon and screen reader label.\n\nThree emphasis levels — **strong** (default), **medium**, and **subtle** — adjust visual weight within an appearance. Use a lighter emphasis when a Badge competes with higher-priority content.\n\nTwo sizes are available: **sm** (default) and **md**. Choose based on the density and hierarchy of the surrounding layout.\n\nFor Badges that don't represent a status — such as category labels in a product catalogue — customize color using expressive tokens. Avoid arbitrary hex values except where tokens are not available.\n\n## Accessibility\n\nThe icon is exposed to screen readers with a default label that matches its appearance: \"Success\", \"Warning\", \"Error\", or \"Information\". This label is announced alongside the Badge text.\n\nUser responsibilities:\n\n- If using a custom icon, provide a descriptive label for it so screen readers announce its meaning accurately.\n- If hiding the icon, ensure the label text alone communicates the status — do not rely on color.\n- When customizing Badge color outside of expressive tokens, verify the foreground text and icon meet WCAG AA contrast requirements.\n- Do not wrap Badge in an interactive element to make it appear clickable. Badge has no interactive role or keyboard behavior.\n\n## Content guidance\n\n- Use a single word in most cases. Two to three words are acceptable for complex states such as \"Partially fulfilled\".\n- Avoid punctuation and special characters.\n- Use color and icon together to reinforce the label meaning — do not rely on either alone.\n- Use the default icon for each appearance where possible. Swap icons only when a different icon is more recognizable for a specific use case.\n- If the icon is hidden, the label must carry the full meaning on its own.\n\n## Do\n\n- Use an appearance that best reflects the status being conveyed.\n- Use expressive tokens to customize color for non-status Badges.\n- Mix emphasis levels intentionally when Badges of different priority appear together.\n\n## Don't\n\n- Rely on color alone to convey status.\n- Use punctuation or special characters in Badge text.\n- Make a Badge interactive or wrap it in a button."
    },
    {
      "title": "Components/Avatar/Avatar.Group",
      "slug": "components-avatar-avatar-group",
      "description": "An avatar group displays two or more [Avatars](/docs/components-avatar-avatar--docs) in an overlapping stack or spaced out.",
      "type": "component",
      "props": [
        {
          "name": "children",
          "type": "ReactNode",
          "description": "Add Avatars to create a group",
          "required": true
        },
        {
          "name": "wrapping",
          "type": "boolean",
          "description": "Specify if the AvatarGroup wraps",
          "defaultValue": "false"
        },
        {
          "name": "maxCount",
          "type": "number",
          "description": "Specify the max number of avatars displayed in the group.",
          "defaultValue": "5"
        },
        {
          "name": "size",
          "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
          "description": "Specify the size of all Avatars",
          "defaultValue": "md"
        },
        {
          "name": "layout",
          "type": "'stacked' | 'spaced'",
          "description": "Specify the layout of the group.",
          "defaultValue": "stacked"
        }
      ],
      "stories": [
        {
          "name": "Example",
          "description": "This is an example of an `AvatarGroup` with images available.",
          "source": "<Avatar.Group {...props}>\n      {people.slice(0, 7).map((person, index) => (\n        <Avatar\n          key={person.name}\n          name={person.name}\n          src={index !== 1 ? person.src : undefined}\n        />\n      ))}\n    </Avatar.Group>"
        },
        {
          "name": "Layout",
          "description": "AvatarGroup supports `stacked` and `spaced`. Default layout is `stacked`.",
          "source": "<>\n      {avatarGroupLayouts.map(layout => (\n        <Avatar.Group key={layout} layout={layout}>\n          {people.map(person => (\n            <Avatar key={person.name} {...person} />\n          ))}\n        </Avatar.Group>\n      ))}\n    </>"
        },
        {
          "name": "Size",
          "description": "AvatarGroup supports `xs`, `sm`, `md`, `lg`, and `xl`. Default kind is `md`.",
          "source": "<>\n      {avatarSizes.map(size => (\n        <Avatar.Group key={`AvatarGroup-${size}`} size={size}>\n          {people.map(person => (\n            <Avatar key={person.name} {...person} />\n          ))}\n        </Avatar.Group>\n      ))}\n    </>"
        },
        {
          "name": "Overflow",
          "description": "Use `maxCount` to customize the max number of avatars displayed in a group. Default `maxCount` displays 5 avatars, including the overflow avatar.",
          "source": "<>\n      <Avatar.Group>\n        {people.map(person => (\n          <Avatar key={person.name} {...person} />\n        ))}\n      </Avatar.Group>\n      <Avatar.Group maxCount={7}>\n        {people.map(person => (\n          <Avatar key={person.name} {...person} />\n        ))}\n      </Avatar.Group>\n    </>"
        },
        {
          "name": "Responsive Behavior",
          "description": "When there’s not enough screen space to hold the `maxCount`, the overflow items dynamically collapse into the overflow avatar.\n\n> Adjust the width of the fluid container below to preview responsive behavior",
          "source": "<>\n      <Box style={{ ...grayBoxStyles, width: 'auto', maxWidth: '17.5rem' }}>\n        <Text kind=\"body-sm\" color=\"secondary\">\n          Max-width container\n        </Text>\n        <Avatar.Group maxCount={10} size=\"lg\">\n          {people.map(person => (\n            <Avatar key={person.name} {...person} />\n          ))}\n        </Avatar.Group>\n      </Box>\n      <Box\n        style={{\n          ...grayBoxStyles,\n          resize: 'horizontal',\n          overflow: 'auto',\n        }}\n      >\n        <Text kind=\"body-sm\" color=\"secondary\">\n          Fluid container\n        </Text>\n        <Avatar.Group maxCount={10} size=\"lg\">\n          {people.map(person => (\n            <Avatar key={person.name} {...person} />\n          ))}\n        </Avatar.Group>\n      </Box>\n    </>"
        },
        {
          "name": "Wrapping",
          "description": "Set `wrapping` to `true` to allow Avatar.Group to break to a new line.\n\n> Adjust the width of the fluid container below to preview wrapping behavior.",
          "source": "<>\n      <Box style={{ ...grayBoxStyles, width: 'auto', maxWidth: '17.5rem' }}>\n        <Text kind=\"body-sm\" color=\"secondary\">\n          Max-width container\n        </Text>\n        <Avatar.Group layout=\"spaced\" maxCount={10} size=\"lg\" wrapping>\n          {people.map(person => (\n            <Avatar key={person.name} {...person} />\n          ))}\n        </Avatar.Group>\n      </Box>\n      <Box\n        style={{\n          ...grayBoxStyles,\n          resize: 'horizontal',\n          overflow: 'auto',\n        }}\n      >\n        <Text kind=\"body-sm\" color=\"secondary\">\n          Fluid container\n        </Text>\n        <Avatar.Group layout=\"spaced\" wrapping maxCount={10} size=\"lg\">\n          {people.map(person => (\n            <Avatar key={person.name} {...person} />\n          ))}\n        </Avatar.Group>\n      </Box>\n    </>"
        }
      ],
      "category": "Components",
      "displayName": "Avatar/Avatar.Group",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Avatar/Avatar",
      "slug": "components-avatar-avatar",
      "description": "An avatar represents an entity such as a user, group or organization. They can display as images, text or icons.\n\nIf you need to present more than one avatar, use [Avatar.Group](/docs/components-avatar-avatar-group--docs).",
      "type": "component",
      "props": [
        {
          "name": "appearance",
          "type": "'accent' | 'neutral'",
          "description": "Specify the appearance of an Avatar",
          "defaultValue": "neutral"
        },
        {
          "name": "icon",
          "type": "React.FC<any>",
          "description": "Customize the default icon"
        },
        {
          "name": "name",
          "type": "string",
          "description": "Specify a name to display initials in the Avatar"
        },
        {
          "name": "src",
          "type": "string",
          "description": "Pass an image to the Avatar"
        },
        {
          "name": "alt",
          "type": "string",
          "description": "Specify alt for image"
        },
        {
          "name": "size",
          "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
          "description": "Specify the size of the Avatar",
          "defaultValue": "md"
        },
        {
          "name": "tabIndex",
          "type": "number",
          "description": "If Avatar is non interactive and Tooltip is provided, use tabIndex to make the Avatar focusable"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if the Avatar is disabled"
        },
        {
          "name": "shape",
          "type": "'circle' | 'square'",
          "description": "Specify the shape of the Avatar",
          "defaultValue": "circle"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Avatar.",
          "source": "<Avatar {...args} />"
        },
        {
          "name": "Kind",
          "description": "Avatar’s can display icon, text, or images. If `name` or `src` is not provided, Avatar displays with a default icon.",
          "source": "<>\n      <Avatar alt=\"Person\" />\n      <Avatar name=\"Neil deGrasee Tyson\" />\n      <Avatar src={NeilTyson} name=\"Neil deGrasee Tyson\" />\n    </>"
        },
        {
          "name": "With Text",
          "description": "Pass `name` to display an Avatar with text. Avatar displays the first letters of the first and last words provided. `name` will display as priority over `icon`.",
          "source": "<Avatar name=\"Neil deGrasee Tyson\" />"
        },
        {
          "name": "With Image",
          "description": "Pass an image to `src` to display a image. `src` will display as priority over `name` and `icon`.",
          "source": "<Avatar src={NeilTyson} name=\"Neil deGrasee Tyson\" />"
        },
        {
          "name": "Appearance",
          "description": "Avatar supports `neutral` and `accent`. Default appearance is `neutral`.",
          "source": "<>\n        {avatarAppearances.map(appearance => (\n          <Avatar key={appearance} appearance={appearance} alt=\"Person\" />\n        ))}\n      </>"
        },
        {
          "name": "Size",
          "description": "Avatar supports `xs`, `sm`, `md`, `lg`, and `xl`. Default size is `md`.\n\n> If `name` is provided, `xs` only displays the first letter of the first word provided. If only one word is provided the Avatar will only display the first letter for all sizes.",
          "source": "<Box\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: bmSemSpace100,\n      }}\n    >\n      <Box style={rowStyles}>\n        {avatarSizes.map(size => (\n          <Avatar key={size} size={size} alt=\"Person\" />\n        ))}\n      </Box>\n      <Box style={rowStyles}>\n        {avatarSizes.map(size => (\n          <Avatar key={size} name=\"Neil deGrasee Tyson\" size={size} />\n        ))}\n      </Box>\n      <Box style={rowStyles}>\n        {avatarSizes.map(size => (\n          <Avatar\n            key={size}\n            name=\"Neil deGrasee Tyson\"\n            src={NeilTyson}\n            size={size}\n          />\n        ))}\n      </Box>\n    </Box>"
        },
        {
          "name": "Shape",
          "description": "Avatar supports `circle` and `square`. Default shape is `circle`.\n\n> Use `circle` to represent a person and `square` to represent an organization, team, product, project or space. Use `icon` to customize the default icon.",
          "source": "<>\n      {avatarShapes.map(shape => (\n        <Avatar\n          key={shape}\n          shape={shape}\n          alt={shape === 'circle' ? 'Person' : 'Company'}\n        />\n      ))}\n    </>"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` to display Avatar in a disabled state.",
          "source": "<>\n      <Avatar alt=\"Person\" disabled />\n      <Avatar name=\"Neil deGrasee Tyson\" disabled />\n      <Avatar alt=\"Person\" appearance=\"accent\" disabled />\n      <Avatar appearance=\"accent\" name=\"Neil deGrasee Tyson\" disabled />\n      <Avatar name=\"Neil deGrasee Tyson\" src={NeilTyson} disabled />\n    </>"
        },
        {
          "name": "Interactivity",
          "description": "Wrap Avatar with a link or use `onClick` to make it interactive.",
          "source": "<Avatar alt=\"Person\" onClick={handleClick} />"
        },
        {
          "name": "With Tooltip",
          "description": "Use composition to add a [Tooltip](/docs/components-tooltip--docs) to Avatar.",
          "source": "<>\n      <Tooltip portalled text=\"Neil deGrasee Tyson\">\n        <Avatar alt=\"Person\" tabIndex={0} onClick={handleClick} />\n      </Tooltip>\n      <Tooltip portalled text=\"Neil deGrasee Tyson\">\n        <Avatar tabIndex={0} onClick={handleClick} name=\"Neil deGrasee Tyson\" />\n      </Tooltip>\n      <Tooltip portalled text=\"Neil deGrasee Tyson\">\n        <Avatar\n          tabIndex={0}\n          onClick={handleClick}\n          src={NeilTyson}\n          name=\"Neil deGrasee Tyson\"\n        />\n      </Tooltip>\n    </>"
        },
        {
          "name": "Accessibility",
          "description": "If an Avatar is non-interactive but displays a [Tooltip](/docs/components-tooltip--docs) on hover, be sure to provide a tab index for keyboard only users so they have access to the Tooltip.",
          "source": "<Tooltip portalled text=\"Neil deGrasee Tyson\">\n      <Avatar alt=\"Neil deGrasee Tyson\" tabIndex={0} />\n    </Tooltip>"
        }
      ],
      "category": "Components",
      "displayName": "Avatar/Avatar",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Forms/Autocomplete",
      "slug": "forms-autocomplete",
      "description": "An Autocomplete allows users to type into a field to quickly filter and select a specific value from a predefined set of options. Use this when the task requires selecting a precise, existing item, such as assigning a person, picking a country, or applying a tag.\n\nIf the goal is to explore, browse, or retrieve a broad set of open-ended results, use a [Search](/docs/components-search--docs).\n\nWhere typing to filter the list is not required, use [Select](/docs/forms-select--docs) or [NativeSelect](/docs/forms-nativeselect--docs)",
      "type": "component",
      "props": [
        {
          "name": "label",
          "type": "ReactNode",
          "description": "Specify Label for Autocomplete"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if Autocomplete displays in a disabled state",
          "defaultValue": "false"
        },
        {
          "name": "multiple",
          "type": "boolean",
          "description": "Sets the selection type to multiselect. Set this to true for multiselect, even if fully controlling selection state. This enables styles and accessibility properties to be set",
          "defaultValue": "false"
        },
        {
          "name": "required",
          "type": "boolean",
          "description": "Specify if Autocomplete is a required input",
          "defaultValue": "false"
        },
        {
          "name": "size",
          "type": "'sm' | 'md' | 'lg'",
          "description": "Specify the size of Autocomplete",
          "defaultValue": "'md'"
        },
        {
          "name": "placeholder",
          "type": "string",
          "description": "Specify a placeholder for the Autocomplete"
        },
        {
          "name": "helperText",
          "type": "ReactNode",
          "description": "Specify HelperText for Autocomplete"
        },
        {
          "name": "readOnly",
          "type": "boolean",
          "description": "Specify if Autocomplete displays in a read-only state",
          "defaultValue": "false"
        },
        {
          "name": "error",
          "type": "string | boolean",
          "description": "Specify error text and display error state of a Autocomplete"
        },
        {
          "name": "fluid",
          "type": "boolean",
          "description": "Specify if Autocomplete is fluid",
          "defaultValue": "false"
        },
        {
          "name": "width",
          "type": "string",
          "description": "Specify the width of Autocomplete"
        },
        {
          "name": "hideRequiredMarker",
          "type": "boolean",
          "description": "Specify if the Autocomplete displays with an asterisk",
          "defaultValue": "false"
        },
        {
          "name": "validationRules",
          "type": "FormValidator[]",
          "description": "Specify form validation rules for Autocomplete"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the Autocomplete. By default it inherits the theme from the parent"
        },
        {
          "name": "clearable",
          "type": "boolean",
          "description": "Specify if the Autocomplete is clearable. Defaults to `true` if `multiple` is set, `false` otherwise",
          "defaultValue": "true"
        },
        {
          "name": "contentBefore",
          "type": "ReactNode",
          "description": "Specify content to display before selection"
        },
        {
          "name": "contentAfter",
          "type": "ReactNode",
          "description": "Specify content to display after selection"
        },
        {
          "name": "ariaLabel",
          "type": "string",
          "description": "Specify an accessible label for the Autocomplete"
        },
        {
          "name": "noResultsText",
          "type": "string",
          "description": "Specify text to display when no options are available",
          "defaultValue": "\"No results found\""
        },
        {
          "name": "hideChevron",
          "type": "boolean",
          "description": "When `true`, the chevron (dropdown arrow) indicator in the field is not rendered. Useful when the dropdown affordance is implied by surrounding UI or when the chevron is visually unwanted.",
          "defaultValue": "false"
        },
        {
          "name": "optionFilter",
          "type": "(option: OptionProps, searchText: string, group?: OptionGroupProps) => boolean",
          "description": "Provide a custom option filtering function. Receives the option props, the current search text, and (when the option is inside an `Autocomplete.OptionGroup`) the owning group's props. Return `true` to filter the option out, `false` to keep it visible. Defaults to internal case-insensitive label/value matching that ignores the group."
        }
      ],
      "subcomponentProps": [
        {
          "name": "Autocomplete.Option",
          "props": [
            {
              "name": "value",
              "type": "string",
              "description": "Specify the value of the option. Use this to control selectedOptions or to get the option value in the onOptionSelect callback. Defaults to the text content of the option"
            },
            {
              "name": "label",
              "type": "string",
              "description": "Specify the label of the option. Defaults to the text content of the option"
            },
            {
              "name": "children",
              "type": "ReactNode",
              "description": "Add text to an item",
              "required": true
            },
            {
              "name": "supportingText",
              "type": "string",
              "description": "Add secondary support text"
            },
            {
              "name": "contentAfter",
              "type": "ReactNode",
              "description": "Add content after the text"
            },
            {
              "name": "contentBefore",
              "type": "ReactNode",
              "description": "Add content before the text"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "description": "Specify if a list item is disabled",
              "defaultValue": "false"
            },
            {
              "name": "onSelectionChange",
              "type": "(selected: boolean) => void",
              "description": "Specify a callback that fires when a list item is selected or deselected"
            },
            {
              "name": "tooltipPlacement",
              "type": "enum",
              "description": ""
            },
            {
              "name": "as",
              "type": "\"div\"",
              "description": "Specify a different component to render the item, such as an anchor tag for links",
              "defaultValue": "div"
            }
          ]
        },
        {
          "name": "Autocomplete.OptionGroup",
          "props": [
            {
              "name": "heading",
              "type": "ReactNode",
              "description": "Visible group label rendered above the group's options. Used as the source for `aria-label` on the group container."
            },
            {
              "name": "divider",
              "type": "boolean",
              "description": "Render a visual separator below the group.",
              "defaultValue": "false"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "description": "Disables every Option inside the group. Heading remains visible; options are non-interactive.",
              "defaultValue": "false"
            },
            {
              "name": "children",
              "type": "ReactNode",
              "description": "`Option` components. Nested `OptionGroup`s are not supported."
            }
          ]
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Autocomplete.",
          "source": "<Autocomplete {...args}>\n        <Autocomplete.Option>Callisto</Autocomplete.Option>\n        <Autocomplete.Option>Earth</Autocomplete.Option>\n        <Autocomplete.Option>Enceladus</Autocomplete.Option>\n        <Autocomplete.Option>Europa</Autocomplete.Option>\n        <Autocomplete.Option>Ganymede</Autocomplete.Option>\n        <Autocomplete.Option>Io</Autocomplete.Option>\n        <Autocomplete.Option>Jupiter</Autocomplete.Option>\n        <Autocomplete.Option>Mars</Autocomplete.Option>\n        <Autocomplete.Option>Mercury</Autocomplete.Option>\n        <Autocomplete.Option>Neptune</Autocomplete.Option>\n        <Autocomplete.Option>Pluto</Autocomplete.Option>\n        <Autocomplete.Option>Saturn</Autocomplete.Option>\n        <Autocomplete.Option>Titan</Autocomplete.Option>\n        <Autocomplete.Option>Uranus</Autocomplete.Option>\n        <Autocomplete.Option>Venus</Autocomplete.Option>\n      </Autocomplete>"
        },
        {
          "name": "Without Label",
          "description": "Displaying the `Label` is optional. Autocomplete will display without Label if `children` is not passed to `labelProps`. Set `aria-label` to make this input accessible for screen readers.",
          "source": "<Autocomplete {...args}>\n      <Autocomplete.Option>Callisto</Autocomplete.Option>\n      <Autocomplete.Option>Earth</Autocomplete.Option>\n      <Autocomplete.Option>Enceladus</Autocomplete.Option>\n      <Autocomplete.Option>Europa</Autocomplete.Option>\n      <Autocomplete.Option>Ganymede</Autocomplete.Option>\n      <Autocomplete.Option>Io</Autocomplete.Option>\n      <Autocomplete.Option>Jupiter</Autocomplete.Option>\n      <Autocomplete.Option>Mars</Autocomplete.Option>\n      <Autocomplete.Option>Mercury</Autocomplete.Option>\n      <Autocomplete.Option>Neptune</Autocomplete.Option>\n      <Autocomplete.Option>Pluto</Autocomplete.Option>\n      <Autocomplete.Option>Saturn</Autocomplete.Option>\n      <Autocomplete.Option>Titan</Autocomplete.Option>\n      <Autocomplete.Option>Uranus</Autocomplete.Option>\n      <Autocomplete.Option>Venus</Autocomplete.Option>\n    </Autocomplete>"
        },
        {
          "name": "With Helper Text",
          "description": "Displaying `HelperText` is optional. Autocomplete will display with `HelperText` if `children` is passed to `helperTextProps`.",
          "source": "<Autocomplete {...args}>\n      <Autocomplete.Option>Earth</Autocomplete.Option>\n      <Autocomplete.Option>Jupiter</Autocomplete.Option>\n      <Autocomplete.Option>Mars</Autocomplete.Option>\n      <Autocomplete.Option>Mercury</Autocomplete.Option>\n      <Autocomplete.Option>Neptune</Autocomplete.Option>\n      <Autocomplete.Option>Pluto</Autocomplete.Option>\n      <Autocomplete.Option>Saturn</Autocomplete.Option>\n      <Autocomplete.Option>Uranus</Autocomplete.Option>\n      <Autocomplete.Option>Venus</Autocomplete.Option>\n    </Autocomplete>"
        },
        {
          "name": "Required",
          "description": "Set `required` to `true` to make Autocomplete required. Set `hideRequiredMarker` to `true` to remove the asterisk (*).",
          "source": "<>\n      <Autocomplete {...args} label={<Label>With required marker</Label>}>\n        <Autocomplete.Option>Earth</Autocomplete.Option>\n        <Autocomplete.Option>Jupiter</Autocomplete.Option>\n        <Autocomplete.Option>Mars</Autocomplete.Option>\n        <Autocomplete.Option>Mercury</Autocomplete.Option>\n        <Autocomplete.Option>Neptune</Autocomplete.Option>\n        <Autocomplete.Option>Pluto</Autocomplete.Option>\n        <Autocomplete.Option>Saturn</Autocomplete.Option>\n        <Autocomplete.Option>Uranus</Autocomplete.Option>\n        <Autocomplete.Option>Venus</Autocomplete.Option>\n      </Autocomplete>\n      <Autocomplete\n        {...args}\n        label={<Label>Without required marker</Label>}\n        hideRequiredMarker\n      >\n        <Autocomplete.Option>Earth</Autocomplete.Option>\n        <Autocomplete.Option>Jupiter</Autocomplete.Option>\n        <Autocomplete.Option>Mars</Autocomplete.Option>\n        <Autocomplete.Option>Mercury</Autocomplete.Option>\n        <Autocomplete.Option>Neptune</Autocomplete.Option>\n        <Autocomplete.Option>Pluto</Autocomplete.Option>\n        <Autocomplete.Option>Saturn</Autocomplete.Option>\n        <Autocomplete.Option>Uranus</Autocomplete.Option>\n        <Autocomplete.Option>Venus</Autocomplete.Option>\n      </Autocomplete>\n    </>"
        },
        {
          "name": "Optional",
          "description": "Pass `optional` to `labelProps` to show that a Autocomplete is optional.\n\n> Do not mix required and optional markers in the same form set.",
          "source": "<Autocomplete {...args}>\n      <Autocomplete.Option>Callisto</Autocomplete.Option>\n      <Autocomplete.Option>Enceladus</Autocomplete.Option>\n      <Autocomplete.Option>Europa</Autocomplete.Option>\n      <Autocomplete.Option>Ganymede</Autocomplete.Option>\n      <Autocomplete.Option>Io</Autocomplete.Option>\n      <Autocomplete.Option>Titan</Autocomplete.Option>\n    </Autocomplete>"
        },
        {
          "name": "Error",
          "description": "Use `error` to specify `HelperText` text and display Autocomplete in an error state.",
          "source": "<Autocomplete {...args}>\n      <Autocomplete.Option>Callisto</Autocomplete.Option>\n      <Autocomplete.Option>Enceladus</Autocomplete.Option>\n      <Autocomplete.Option>Europa</Autocomplete.Option>\n      <Autocomplete.Option>Ganymede</Autocomplete.Option>\n      <Autocomplete.Option>Io</Autocomplete.Option>\n      <Autocomplete.Option>Titan</Autocomplete.Option>\n    </Autocomplete>"
        },
        {
          "name": "Read Only",
          "description": "Set `readOnly` to `true` to display Autocomplete in a read only state.",
          "source": "<Autocomplete {...args}>\n      <Autocomplete.Option>Callisto</Autocomplete.Option>\n      <Autocomplete.Option>Enceladus</Autocomplete.Option>\n      <Autocomplete.Option>Europa</Autocomplete.Option>\n      <Autocomplete.Option>Ganymede</Autocomplete.Option>\n      <Autocomplete.Option>Io</Autocomplete.Option>\n      <Autocomplete.Option>Titan</Autocomplete.Option>\n    </Autocomplete>"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` to display Autocomplete in a disabled state.",
          "source": "<Autocomplete {...args}>\n      <Autocomplete.Option>Callisto</Autocomplete.Option>\n      <Autocomplete.Option>Enceladus</Autocomplete.Option>\n      <Autocomplete.Option>Europa</Autocomplete.Option>\n      <Autocomplete.Option>Ganymede</Autocomplete.Option>\n      <Autocomplete.Option>Io</Autocomplete.Option>\n      <Autocomplete.Option>Titan</Autocomplete.Option>\n    </Autocomplete>"
        },
        {
          "name": "Multiselect",
          "description": "Set `multiselect` to `true` to allow multiple items to be selected.",
          "source": "<Autocomplete {...args}>\n      <Autocomplete.Option>Earth</Autocomplete.Option>\n      <Autocomplete.Option>Jupiter</Autocomplete.Option>\n      <Autocomplete.Option>Mars</Autocomplete.Option>\n      <Autocomplete.Option>Mercury</Autocomplete.Option>\n      <Autocomplete.Option>Neptune</Autocomplete.Option>\n      <Autocomplete.Option>Pluto</Autocomplete.Option>\n      <Autocomplete.Option>Saturn</Autocomplete.Option>\n      <Autocomplete.Option>Uranus</Autocomplete.Option>\n      <Autocomplete.Option>Venus</Autocomplete.Option>\n    </Autocomplete>"
        },
        {
          "name": "With Grouped Options",
          "description": "Wrap related options in `Autocomplete.OptionGroup` to display a heading above a group. Use `divider` to add a visual separator between groups.\n\n> Root-level options can be mixed in alongside groups and will render in source order.",
          "source": "<Autocomplete {...args}>\n      <Autocomplete.OptionGroup heading=\"Planets\" divider>\n        <Autocomplete.Option>Mercury</Autocomplete.Option>\n        <Autocomplete.Option>Venus</Autocomplete.Option>\n        <Autocomplete.Option>Earth</Autocomplete.Option>\n      </Autocomplete.OptionGroup>\n      <Autocomplete.OptionGroup heading=\"Moons\">\n        <Autocomplete.Option>Callisto</Autocomplete.Option>\n        <Autocomplete.Option>Titan</Autocomplete.Option>\n      </Autocomplete.OptionGroup>\n    </Autocomplete>"
        },
        {
          "name": "Width",
          "description": "Use `width` to customize the width of a Autocomplete. Use `rems` to specify width to ensure Autocomplete scales with user preferences.",
          "source": "<Autocomplete {...args}>\n      <Autocomplete.Option>Earth</Autocomplete.Option>\n      <Autocomplete.Option>Jupiter</Autocomplete.Option>\n      <Autocomplete.Option>Mars</Autocomplete.Option>\n      <Autocomplete.Option>Mercury</Autocomplete.Option>\n      <Autocomplete.Option>Neptune</Autocomplete.Option>\n      <Autocomplete.Option>Pluto</Autocomplete.Option>\n      <Autocomplete.Option>Saturn</Autocomplete.Option>\n      <Autocomplete.Option>Uranus</Autocomplete.Option>\n      <Autocomplete.Option>Venus</Autocomplete.Option>\n    </Autocomplete>"
        },
        {
          "name": "Fluid",
          "description": "Set `fluid` to `true` to make Autocomplete span its parent container.",
          "source": "<Autocomplete {...args}>\n      <Autocomplete.Option>Earth</Autocomplete.Option>\n      <Autocomplete.Option>Jupiter</Autocomplete.Option>\n      <Autocomplete.Option>Mars</Autocomplete.Option>\n      <Autocomplete.Option>Mercury</Autocomplete.Option>\n      <Autocomplete.Option>Neptune</Autocomplete.Option>\n      <Autocomplete.Option>Pluto</Autocomplete.Option>\n      <Autocomplete.Option>Saturn</Autocomplete.Option>\n      <Autocomplete.Option>Uranus</Autocomplete.Option>\n      <Autocomplete.Option>Venus</Autocomplete.Option>\n    </Autocomplete>"
        },
        {
          "name": "Hide Chevron",
          "description": "Set `hideChevron` to `true` to remove the dropdown indicator. This can be useful when the dropdown affordance is implied by surrounding UI or when the chevron feels visually unnecessary.",
          "source": "<Autocomplete {...args}>\n      <Autocomplete.Option>Earth</Autocomplete.Option>\n      <Autocomplete.Option>Jupiter</Autocomplete.Option>\n      <Autocomplete.Option>Mars</Autocomplete.Option>\n      <Autocomplete.Option>Mercury</Autocomplete.Option>\n      <Autocomplete.Option>Neptune</Autocomplete.Option>\n      <Autocomplete.Option>Saturn</Autocomplete.Option>\n      <Autocomplete.Option>Venus</Autocomplete.Option>\n    </Autocomplete>"
        },
        {
          "name": "Content Before And After",
          "description": "Autocomplete supports icons, flags, payment logos, etc as `contentBefore` and `contentAfter`.",
          "source": "const [flag, setFlag] = useState<keyof typeof flags>('UnitedStatesOfAmerica');\n    const [payment, setPayment] = useState<keyof typeof paymentMethods>('ApplePay');\n\n    const handleFlagChange = useCallback((event: ChangeEvent<HTMLSelectElement>) => {\n      setFlag(event.target.value as keyof typeof flags);\n    }, []);\n\n    const handlePaymentChange = useCallback(\n      (event: ChangeEvent<HTMLSelectElement>) => {\n        setPayment(event.target.value as keyof typeof paymentMethods);\n      },\n      [],\n    );\n\n    return (\n      <>\n        <Autocomplete\n          label={<Label>Content before</Label>}\n          contentBefore={<Icon icon={Satellite} ariaLabel=\"Satellite icon\" />}\n          value=\"item1\"\n        >\n          <Autocomplete.Option value=\"item1\">List item 1</Autocomplete.Option>\n          <Autocomplete.Option value=\"item2\">List item 2</Autocomplete.Option>\n          <Autocomplete.Option value=\"item3\">List item 3</Autocomplete.Option>\n        </Autocomplete>\n        <Autocomplete\n          label={<Label>Content after</Label>}\n          contentAfter={<Icon icon={Satellite} ariaLabel=\"Satellite icon\" />}\n          value=\"item1\"\n        >\n          <Autocomplete.Option value=\"item1\">List item 1</Autocomplete.Option>\n          <Autocomplete.Option value=\"item2\">List item 2</Autocomplete.Option>\n          <Autocomplete.Option value=\"item3\">List item 3</Autocomplete.Option>\n        </Autocomplete>\n        <Autocomplete\n          label={<Label>Content before</Label>}\n          contentBefore={<Icon icon={flags[flag]} />}\n          onChange={handleFlagChange}\n          value={flag}\n        >\n          <Autocomplete.Option\n            value=\"UnitedStatesOfAmerica\"\n            contentBefore={<Icon icon={UnitedStatesOfAmerica} />}\n          >\n            United States\n          </Autocomplete.Option>\n          <Autocomplete.Option\n            value=\"Romania\"\n            contentBefore={<Icon icon={Romania} />}\n          >\n            Romania\n          </Autocomplete.Option>\n          <Autocomplete.Option\n            value=\"UnitedKingdom\"\n            contentBefore={<Icon icon={UnitedKingdom} />}\n          >\n            United Kingdom\n          </Autocomplete.Option>\n          <Autocomplete.Option\n            value=\"Ireland\"\n            contentBefore={<Icon icon={Ireland} />}\n          >\n            Ireland\n          </Autocomplete.Option>\n        </Autocomplete>\n        <Autocomplete\n          label={<Label>Content before</Label>}\n          contentBefore={<Icon icon={paymentMethods[payment]} />}\n          onChange={handlePaymentChange}\n          value={payment}\n        >\n          <Autocomplete.Option\n            value=\"ApplePay\"\n            contentBefore={<Icon icon={ApplePay} />}\n          >\n            Apple Pay\n          </Autocomplete.Option>\n          <Autocomplete.Option value=\"Visa\" contentBefore={<Icon icon={Visa} />}>\n            Visa\n          </Autocomplete.Option>\n          <Autocomplete.Option\n            value=\"Mastercard\"\n            contentBefore={<Icon icon={Mastercard} />}\n          >\n            Mastercard\n          </Autocomplete.Option>\n          <Autocomplete.Option value=\"Bank\" contentBefore={<Icon icon={Bank} />}>\n            Bank Transfer\n          </Autocomplete.Option>\n        </Autocomplete>\n        <Autocomplete\n          label={<Label>Content before and after with chips</Label>}\n          placeholder={placeholderTextMultiselect}\n          contentBefore={<Icon icon={Satellite} ariaLabel=\"Satellite icon\" />}\n          contentAfter={<Icon icon={Satellite} ariaLabel=\"Satellite icon\" />}\n          multiple\n          defaultValue={['item1']}\n        >\n          <Autocomplete.Option value=\"item1\">List item 1</Autocomplete.Option>\n          <Autocomplete.Option value=\"item2\">List item 2</Autocomplete.Option>\n          <Autocomplete.Option value=\"item3\">List item 3</Autocomplete.Option>\n        </Autocomplete>\n        <Autocomplete\n          label={<Label>Text before and after</Label>}\n          placeholder={placeholderText}\n          contentBefore=\"Text\"\n          contentAfter=\"Text\"\n        >\n          <Autocomplete.Option value=\"item1\">List item 1</Autocomplete.Option>\n          <Autocomplete.Option value=\"item2\">List item 2</Autocomplete.Option>\n          <Autocomplete.Option value=\"item3\">List item 3</Autocomplete.Option>\n        </Autocomplete>\n      </>\n    );"
        },
        {
          "name": "Size",
          "description": "Autocomplete supports `sm`, `md`, and `lg` sizes. Default size is `md`.",
          "source": "<>\n        <Autocomplete\n          size=\"sm\"\n          label={<Label>Small</Label>}\n          helperText={<HelperText>Helper text</HelperText>}\n          placeholder={placeholderText}\n          contentBefore={<Icon icon={Satellite} ariaLabel=\"Satellite icon\" />}\n          contentAfter={<Visa aria-label=\"Visa icon\" />}\n        >\n          <Autocomplete.Option value=\"item1\">List item 1</Autocomplete.Option>\n          <Autocomplete.Option value=\"item2\">List item 2</Autocomplete.Option>\n          <Autocomplete.Option value=\"item3\">List item 3</Autocomplete.Option>\n        </Autocomplete>\n        <Autocomplete\n          size=\"md\"\n          label={<Label>Medium</Label>}\n          helperText={<HelperText>Helper text</HelperText>}\n          placeholder={placeholderText}\n          contentBefore={<Icon icon={Satellite} ariaLabel=\"Satellite icon\" />}\n          contentAfter={<Visa aria-label=\"Visa icon\" />}\n        >\n          <Autocomplete.Option value=\"item1\">List item 1</Autocomplete.Option>\n          <Autocomplete.Option value=\"item2\">List item 2</Autocomplete.Option>\n          <Autocomplete.Option value=\"item3\">List item 3</Autocomplete.Option>\n        </Autocomplete>\n        <Autocomplete\n          size=\"lg\"\n          label={<Label>Large</Label>}\n          helperText={<HelperText>Helper text</HelperText>}\n          placeholder={placeholderText}\n          contentBefore={<Icon icon={Satellite} ariaLabel=\"Satellite icon\" />}\n          contentAfter={<Visa aria-label=\"Visa icon\" />}\n        >\n          <Autocomplete.Option value=\"item1\">List item 1</Autocomplete.Option>\n          <Autocomplete.Option value=\"item2\">List item 2</Autocomplete.Option>\n          <Autocomplete.Option value=\"item3\">List item 3</Autocomplete.Option>\n        </Autocomplete>\n      </>"
        },
        {
          "name": "Controlled",
          "description": "Setting `value` prop makes the Autocomplete controlled.",
          "source": "const [singleSelectValue, setSingleSelectValue] = useState<string | undefined>(\n      undefined,\n    );\n    const handleChangeSingleSelect = useCallback(\n      (event: React.ChangeEvent<HTMLSelectElement>) => {\n        setSingleSelectValue(event.target.value);\n      },\n      [],\n    );\n\n    const [multiSelectValue, setMultiSelectValue] = useState<string[]>([]);\n    const handleChangeMultiSelect = useCallback(\n      (event: React.ChangeEvent<HTMLSelectElement>) => {\n        const selectedOptions = Array.from(\n          event.target.selectedOptions,\n          option => option.value,\n        );\n        setMultiSelectValue(selectedOptions);\n      },\n      [],\n    );\n\n    return (\n      <>\n        <Autocomplete\n          label={<Label>Single select</Label>}\n          placeholder={placeholderText}\n          value={singleSelectValue}\n          onChange={handleChangeSingleSelect}\n          name=\"autocomplete-controlled\"\n        >\n          <Autocomplete.Option value=\"item1\">List item 1</Autocomplete.Option>\n          <Autocomplete.Option value=\"item2\">List item 2</Autocomplete.Option>\n          <Autocomplete.Option value=\"item3\">List item 3</Autocomplete.Option>\n          <Autocomplete.Option value=\"item4\">List item 4</Autocomplete.Option>\n        </Autocomplete>\n        <Autocomplete\n          label={<Label>Multi select</Label>}\n          placeholder={placeholderTextMultiselect}\n          value={multiSelectValue}\n          onChange={handleChangeMultiSelect}\n          name=\"autocomplete-multiple-controlled\"\n          multiple\n        >\n          <Autocomplete.Option value=\"item1\">List item 1</Autocomplete.Option>\n          <Autocomplete.Option value=\"item2\">List item 2</Autocomplete.Option>\n          <Autocomplete.Option value=\"item3\">List item 3</Autocomplete.Option>\n          <Autocomplete.Option value=\"item4\">List item 4</Autocomplete.Option>\n        </Autocomplete>\n      </>\n    );"
        },
        {
          "name": "Truncation",
          "description": "Long placeholders, selected values, or chips are truncated. Tooltips will display on chips and on items within the actionlist.",
          "source": "<>\n      <Autocomplete\n        label={<Label>Single select</Label>}\n        placeholder=\"Select an option or something because I'm lonely and need some friends and this world is terrifying and I just want to be happy...\"\n      >\n        <Autocomplete.Option value=\"item1\">\n          This is the first and foremost option that one could pick during a moment\n          of existential dread\n        </Autocomplete.Option>\n        <Autocomplete.Option value=\"item2\">\n          This is the second option that might bring a glimmer of hope\n        </Autocomplete.Option>\n        <Autocomplete.Option value=\"item3\">\n          This is the third option, a beacon of light in the darkness\n        </Autocomplete.Option>\n        <Autocomplete.Option value=\"item4\">\n          This is the fourth option, a reminder that we are not alone\n        </Autocomplete.Option>\n        <Autocomplete.Option value=\"item5\">List item 5</Autocomplete.Option>\n      </Autocomplete>\n      <Autocomplete\n        label={<Label>Multi select</Label>}\n        placeholder=\"Select an option or something because I'm lonely and need some friends and this world is terrifying and I just want to be happy...\"\n        multiple\n      >\n        <Autocomplete.Option value=\"item1\">\n          This is the first and foremost option that one could pick during a moment\n          of existential dread\n        </Autocomplete.Option>\n        <Autocomplete.Option value=\"item2\">\n          This is the second option that might bring a glimmer of hope\n        </Autocomplete.Option>\n        <Autocomplete.Option value=\"item3\">\n          This is the third option, a beacon of light in the darkness\n        </Autocomplete.Option>\n        <Autocomplete.Option value=\"item4\">\n          This is the fourth option, a reminder that we are not alone\n        </Autocomplete.Option>\n        <Autocomplete.Option value=\"item5\">List item 5</Autocomplete.Option>\n      </Autocomplete>\n    </>"
        }
      ],
      "category": "Forms",
      "displayName": "Autocomplete",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Alert",
      "slug": "components-alert",
      "description": "Alerts are attention-grabbing elements that help users quickly understand key information or take immediate action.",
      "type": "component",
      "props": [
        {
          "name": "heading",
          "type": "React.ReactNode",
          "description": "Specify the heading text for Alert"
        },
        {
          "name": "body",
          "type": "React.ReactNode",
          "description": "Specify the body text for Alert"
        },
        {
          "name": "actions",
          "type": "React.ReactNode",
          "description": "Specify if actions display on the Alert"
        },
        {
          "name": "size",
          "type": "'sm' | 'md'",
          "description": "Specify the size of the Alert",
          "defaultValue": "sm"
        },
        {
          "name": "fullWidth",
          "type": "boolean",
          "description": "Specify if the Alert has no border radius",
          "defaultValue": "false"
        },
        {
          "name": "theme",
          "type": "'light' | 'dark'",
          "description": "Specify the theme of the Alert. By default it inherits the theme from the parent"
        },
        {
          "name": "appearance",
          "type": "'infoPrimary' | 'infoSecondary' | 'positive' | 'warning' | 'negative'",
          "description": "Specify the appearance of the Alert",
          "defaultValue": "infoPrimary"
        },
        {
          "name": "hidden",
          "type": "boolean",
          "description": "Specify if the Alert is hidden",
          "defaultValue": "false"
        },
        {
          "name": "icon",
          "type": "React.ReactNode",
          "description": "Specify a different icon for the Alert"
        },
        {
          "name": "hideIcon",
          "type": "boolean",
          "description": "Specify if the icon displays on the Alert",
          "defaultValue": "false"
        },
        {
          "name": "dismissible",
          "type": "boolean",
          "description": "Specify if the Alert can be dismissed",
          "defaultValue": "false"
        },
        {
          "name": "onDismiss",
          "type": "React.MouseEventHandler<HTMLButtonElement>",
          "description": "Specify a callback function for when the close button is activated"
        },
        {
          "name": "role",
          "type": "'alert' | 'alertdialog' | undefined",
          "description": "Specify the role of the Alert"
        },
        {
          "name": "disableAutoFocus",
          "type": "boolean",
          "description": "Specify if the Alert should not autofocus the first focusable element",
          "defaultValue": "false"
        },
        {
          "name": "disableCloseOnEscape",
          "type": "boolean",
          "description": "Specify if the Alert should not close when the escape key is pressed",
          "defaultValue": "false"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Alert.",
          "source": "<Alert {...args} />"
        },
        {
          "name": "Appearance",
          "description": "Alert supports `infoPrimary`, `infoSecondary`, `positive`, `warning`, and `negative` appearances. Default appearance is `infoPrimary`.",
          "source": "<>\n      {appearances.map(variant => (\n        <Alert\n          key={variant}\n          appearance={variant}\n          body={textToAppearances[variant]}\n        />\n      ))}\n    </>"
        },
        {
          "name": "Size",
          "description": "Alert supports `sm` and `md`. Default size is `sm`.",
          "source": "<>\n      {sizes.map(size => (\n        <Alert\n          key={size}\n          size={size}\n          body={textToSize[size]}\n          appearance=\"infoPrimary\"\n        />\n      ))}\n    </>"
        },
        {
          "name": "With Heading",
          "description": "Use `heading` to add heading text to the Alert.",
          "source": "<>\n      <Alert\n        body={defaultStoryBookText}\n        heading={headingText}\n        dismissible\n        disableAutoFocus\n      />\n      <Alert\n        size=\"md\"\n        body={defaultStoryBookText}\n        heading={headingText}\n        dismissible\n        disableAutoFocus\n      />\n    </>"
        },
        {
          "name": "Full Width",
          "description": "Remove the border radius by setting `fullWidth` to `true`. `fullWidth` should only be used if an Alert needs to extend the full width of the browser.",
          "source": "<Alert appearance=\"infoPrimary\" fullWidth body={fullWidthStorybookText} />"
        },
        {
          "name": "Icon",
          "description": "Displaying the Alert icon is optional. Set `hideIcon` to `true` to hide the icon. Customize the `icon` using the `icon` prop.",
          "source": "<>\n      <Alert hideIcon body={iconStorybookText[0]} />\n      <Alert body={iconStorybookText[1]} icon={<LocalAirport />} />\n    </>"
        },
        {
          "name": "Dismissible",
          "description": "Making the Alert dismissible is optional. Set `dismissible` to `true` to turn on the `CloseButton`.",
          "source": "<Alert dismissible disableAutoFocus body={dismissibleStorybookText} />"
        },
        {
          "name": "Actions",
          "description": "Add `actions` to the Alert using the `actions` slot.",
          "source": "<>\n        <Alert\n          body={actionsStorybookText[0]}\n          dismissible\n          disableAutoFocus\n          actions={\n            <>\n              <Button appearance=\"neutral-subtle\" size=\"sm\">\n                {buttonText}\n              </Button>\n              <Button appearance=\"neutral-subtle\" size=\"sm\">\n                {buttonText}\n              </Button>\n            </>\n          }\n        />\n        <Alert\n          body={actionsStorybookText[1]}\n          appearance=\"positive\"\n          dismissible\n          disableAutoFocus\n          actions={\n            <>\n              <Button appearance=\"neutral-subtle\" size=\"sm\">\n                {buttonText}\n              </Button>\n              <Button appearance=\"neutral-subtle\" size=\"sm\">\n                {buttonText}\n              </Button>\n            </>\n          }\n        />\n        <Alert\n          body={actionsStorybookText[1]}\n          appearance=\"infoSecondary\"\n          dismissible\n          disableAutoFocus\n          actions={\n            <Button iconBefore={<PhoneOutlined />} size=\"sm\">\n              {buttonText}\n            </Button>\n          }\n        />\n      </>"
        },
        {
          "name": "Reflow",
          "description": "Alert `actions` automatically reflow when text no longer fits on one line. Modify browser width to preview reflow.",
          "source": "<>\n      <Alert\n        dismissible\n        disableAutoFocus\n        body={\n          <>\n            <Text kind=\"body-sm\">Short string example</Text> Ut volutpat nec enim nec\n            sagittis.\n          </>\n        }\n        actions={\n          <>\n            <Button appearance=\"neutral-subtle\" size=\"sm\">\n              {buttonText}\n            </Button>\n            <Button appearance=\"neutral-subtle\" size=\"sm\">\n              {buttonText}\n            </Button>\n          </>\n        }\n      />\n      <Alert\n        dismissible\n        disableAutoFocus\n        body={\n          <>\n            <Text kind=\"body-sm\">Long string example</Text> Praesent pulvinar purus\n            mauris, elementum volutpat magna dapibus id. Vestibulum et hendrerit\n            lacus.\n          </>\n        }\n        actions={\n          <>\n            <Button appearance=\"neutral-subtle\" size=\"sm\">\n              {buttonText}\n            </Button>\n            <Button appearance=\"neutral-subtle\" size=\"sm\">\n              {buttonText}\n            </Button>\n          </>\n        }\n      />\n    </>"
        },
        {
          "name": "Custom Content",
          "description": "Customize text or add a link in an Alert using the `body` slot.",
          "source": "<Alert\n      dismissible\n      disableAutoFocus\n      actions={\n        <>\n          <Button appearance=\"neutral-subtle\" size=\"sm\">\n            {buttonText}\n          </Button>\n          <Button appearance=\"neutral-subtle\" size=\"sm\">\n            {buttonText}\n          </Button>\n        </>\n      }\n    >\n      <Text kind=\"label-sm\">Important! </Text> This alert is using a slot to bold\n      body text and add a link.{' '}\n      <Link href=\"#\" appearance=\"secondary\">\n        Learn more\n      </Link>\n    </Alert>"
        }
      ],
      "category": "Components",
      "displayName": "Alert",
      "importPath": "@viasat/beam-react",
      "usageGuidelines": "# Alert guidelines\n\n## Purpose\n\nAlert displays persistent, inline messages to help users understand important information or take action. \n\nFor brief, action-triggered feedback that disappears automatically, use Toast instead. For situations requiring a hard block — such as a destructive or irreversible action — use a Dialog.\n\n## Use when\n\n- A page, section, or form has a condition requiring user attention before or during an interaction.\n- A status, error, or warning must persist until the condition is resolved.\n- Informational context should remain visible throughout a session.\n- A success status needs to persist to let the user know an action processed successfully.\n\n## Avoid when\n\n- The message is triggered by a user action and should disappear after a short time — use Toast.\n- The message requires an explicit decision to proceed — use a Dialog.\n- The message is low-priority and does not justify claiming persistent page real estate.\n\n## Appearances\n\nFive appearances are available: informational (primary and secondary), positive, warning, and negative. Select the appearance that matches the nature and severity of the message — do not use success, warning or negative appearance for neutral information.\n\n## Sizes\n\nTwo sizes are available: small (default) and medium. Small suits most inline and contextual placements. Use medium for more prominent or spacious layouts.\n\n## Anatomy\n\nAlert consists of:\n\n- **Icon**: Defaults to an appearance-appropriate icon with a built-in accessible label. Can be replaced with a custom icon or hidden entirely.\n- **Heading**: Optional. Provides a short, specific label for the message \n- **Body**: The main content. Accepts rich text including inline links and bold text.\n- **Actions**: Optional. Use for primary responses such as \"Renew\" or \"Retry\". Button appearance can be adjusted to suit the surrounding context. For supplementary or low-priority links, prefer an inline link in the body instead.\n- **Dismiss button**: Optional. Allows users to close the Alert manually.\n\n## Behavior\n\n- Actions reflow to a new line when the body text wraps — the layout adapts to available width.\n- The `fullWidth` style removes the border radius so the Alert can sit flush in a full-browser-width layout; it does not itself set the Alert's width. Use it for page-level Alerts that already span the full width.\n\n## Accessibility\n\nDefault icons carry accessible labels derived from the appearance — Success, Warning, Error, or Information. These communicate status to screen readers without additional effort.\n\nWhen actions or a dismiss button are present, the component automatically handles ARIA labeling and focus management. The first focusable element receives focus on render, and focus returns to the previously focused element when the Alert is closed. Dismissible Alerts can also be closed with Escape when focus is within the Alert.\n\nUser responsibilities:\n\n- Do not hide the icon for warning or negative Alerts — it is the primary visual and semantic indicator of severity.\n- If using a custom icon, ensure it conveys appropriate meaning and has an accessible label.\n- Keep heading and body text descriptive. Vague headings like \"Warning\" add no value — prefer specific phrases like \"Storage almost full.\"\n- Do not disable auto-focus without providing an equivalent focus management pattern.\n- Avoid placing the Alert where it would disrupt a logical reading or focus order.\n\n## Content guidance\n\n- Aim for one sentence; two at most.\n- Use headings that describe the situation, not the severity — 'Storage almost full' instead of 'Warning'.\n- Do not repeat the heading content in the body.\n- Use inline links in the body for supplementary information.\n\n## Do\n\n- Match appearance to the nature and severity of the message.\n- Allow dismissal when the user no longer needs to act on or refer to the message.\n- Limit actions to two at most; prefer a single focused action.\n\n## Don't\n\n- Set an Alert to auto-dismiss on a timer — Alerts are persistent by design.\n- Show multiple Alerts at once unless each one communicates a separate, high-priority message.\n- Use Alert for brief feedback that should disappear after a user action.\n- Remove the icon from warning or negative Alerts."
    },
    {
      "title": "Components/ActionList",
      "slug": "components-actionlist",
      "description": "ActionList is a vertical list of interactive actions or selectable options; allowing for the inclusion of icons, description, and other visual elements.\n\nTypically, a ActionList is placed within a [Popover](/docs/components-popover-popover--docs) to create menu options. However, they can also be used directly in page containers, providing a versatile way to present choices.",
      "type": "component",
      "props": [
        {
          "name": "children",
          "type": "React.ReactNode",
          "description": "The content of the ActionList"
        },
        {
          "name": "loading",
          "type": "boolean",
          "description": "Display a Spinner when action list is loading",
          "defaultValue": "false"
        },
        {
          "name": "noResults",
          "type": "string",
          "description": "Display a message if no results are found"
        },
        {
          "name": "header",
          "type": "React.ReactNode",
          "description": "Add a header at the top of ActionList"
        },
        {
          "name": "supportingText",
          "type": "string",
          "description": "Add supporting text below the header"
        },
        {
          "name": "indent",
          "type": "number | boolean",
          "description": "Display the default indention or specify a custom indention to align ActionList items"
        },
        {
          "name": "disabled",
          "type": "boolean",
          "description": "Specify if all items in a ActionList are disabled"
        },
        {
          "name": "ariaLabel",
          "type": "string",
          "description": "Specify the aria-label for the ActionList"
        },
        {
          "name": "className",
          "type": "string",
          "description": ""
        },
        {
          "name": "role",
          "type": "string",
          "description": "Specify the role of the ActionList",
          "defaultValue": "listbox"
        },
        {
          "name": "id",
          "type": "string",
          "description": ""
        }
      ],
      "subcomponentProps": [
        {
          "name": "ActionList.Group",
          "props": [
            {
              "name": "children",
              "type": "React.ReactNode",
              "description": "Add list items to create a ActionList.Group"
            },
            {
              "name": "heading",
              "type": "any",
              "description": "Add a heading on top of a group"
            },
            {
              "name": "indent",
              "type": "number | boolean",
              "description": "Display the default indention or specify a custom indention to align ActionList items"
            },
            {
              "name": "divider",
              "type": "boolean",
              "description": "Add a divider at the bottom of this group",
              "defaultValue": "false"
            },
            {
              "name": "kind",
              "type": "'action' | 'destructive' | 'flyout' | 'singleCheckMark' | 'multiCheckMark' | 'checkbox' | 'radio' | 'switch'",
              "description": "Specify what kind of items render in the group",
              "defaultValue": "action"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "description": "Specify if a group is disabled"
            },
            {
              "name": "noResults",
              "type": "React.ReactNode",
              "description": "Display a message if no results are found"
            },
            {
              "name": "role",
              "type": "string",
              "description": "Specify the role of the group",
              "defaultValue": "group"
            }
          ]
        },
        {
          "name": "ActionList.Item",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "description": "Add text to an item",
              "required": true
            },
            {
              "name": "supportingText",
              "type": "string",
              "description": "Add secondary support text"
            },
            {
              "name": "contentAfter",
              "type": "ReactNode",
              "description": "Add content after the text"
            },
            {
              "name": "contentBefore",
              "type": "ReactNode",
              "description": "Add content before the text"
            },
            {
              "name": "defaultSelected",
              "type": "boolean",
              "description": "Specify if a list item is selected",
              "defaultValue": "false"
            },
            {
              "name": "kind",
              "type": "'action' | 'destructive' | 'flyout' | 'singleCheckMark' | 'multiCheckMark' | 'checkbox' | 'radio' | 'switch'",
              "description": "Specify what kind of item displays",
              "defaultValue": "'action'"
            },
            {
              "name": "indent",
              "type": "number | boolean",
              "description": "Display the default indention or specify a custom indention to align ActionList items"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "description": "Specify if a list item is disabled",
              "defaultValue": "false"
            },
            {
              "name": "onSelectionChange",
              "type": "(selected: boolean) => void",
              "description": "Specify a callback that fires when a list item is selected or deselected"
            },
            {
              "name": "role",
              "type": "string",
              "description": "Specify the role of the item",
              "defaultValue": "'option'"
            },
            {
              "name": "tooltipPlacement",
              "type": "enum",
              "description": ""
            },
            {
              "name": "as",
              "type": "ElementType",
              "description": "Specify a different component to render the item, such as an anchor tag for links",
              "defaultValue": "div"
            },
            {
              "name": "ref",
              "type": "any",
              "description": ""
            }
          ]
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default ActionList. View ActionList examples [here](/story/components-actionlist-examples--action).",
          "source": "<ActionList {...args} aria-label=\"Action list\">\n      <ActionList.Item>List item 1</ActionList.Item>\n      <ActionList.Item>List item 2</ActionList.Item>\n      <ActionList.Item>List item 3</ActionList.Item>\n      <ActionList.Item>List item 4</ActionList.Item>\n      <ActionList.Item>List item 5</ActionList.Item>\n    </ActionList>"
        },
        {
          "name": "Kind",
          "description": "Both ActionList.Item and ActionList.Group supports `action`, `destructive`, `singleCheckMark`, `multiCheckMark`, `radio`, `checkbox`, `switch` and `flyout` options. Default kind is `action`.",
          "source": "const [kind, setKind] = useState<ActionListItemKind>('action');\n\n    const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n      setKind(event.target.value as ActionListItemKind);\n    };\n\n    return (\n      <>\n        <NativeSelect onChange={handleChange} aria-label=\"Select kind\">\n          {Object.entries(actionListItemKindText).map(([value, label]) => (\n            <option value={value} key={value}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n        <ActionList ariaLabel=\"Action list\">\n          <ActionList.Group kind={kind}>\n            <ActionList.Item>List item 1</ActionList.Item>\n            <ActionList.Item>List item 2</ActionList.Item>\n            <ActionList.Item>List item 3</ActionList.Item>\n            <ActionList.Item>List item 4</ActionList.Item>\n            <ActionList.Item>List item 5</ActionList.Item>\n          </ActionList.Group>\n        </ActionList>\n      </>\n    );"
        },
        {
          "name": "Divider",
          "description": "Set `divider` to `true` to add a divider at the bottom of a ActionList.Group.",
          "source": "<ActionList ariaLabel=\"Action list\">\n      <ActionList.Group divider>\n        <ActionList.Item>List item 1</ActionList.Item>\n        <ActionList.Item>List item 2</ActionList.Item>\n        <ActionList.Item>List item 3</ActionList.Item>\n      </ActionList.Group>\n      <ActionList.Group>\n        <ActionList.Item>List item 1</ActionList.Item>\n        <ActionList.Item>List item 2</ActionList.Item>\n        <ActionList.Item>List item 3</ActionList.Item>\n      </ActionList.Group>\n    </ActionList>"
        },
        {
          "name": "Heading",
          "description": "Use `heading` to add heading text to ActionList.Group.",
          "source": "<ActionList ariaLabel=\"Action list\">\n      <ActionList.Group heading=\"Group heading\">\n        <ActionList.Item>List item 1</ActionList.Item>\n        <ActionList.Item>List item 2</ActionList.Item>\n        <ActionList.Item>List item 3</ActionList.Item>\n        <ActionList.Item>List item 4</ActionList.Item>\n        <ActionList.Item>List item 5</ActionList.Item>\n      </ActionList.Group>\n    </ActionList>"
        },
        {
          "name": "With Header",
          "description": "Pass text to `header` to display the default heading or a customizable heading on top of the ActionList.\n\n> Use Beam's typography tokens to customize header.",
          "source": "<>\n      <ActionList header=\"Header\">\n        <ActionList.Item>List item 1</ActionList.Item>\n        <ActionList.Item>List item 2</ActionList.Item>\n        <ActionList.Item>List item 3</ActionList.Item>\n        <ActionList.Item>List item 4</ActionList.Item>\n        <ActionList.Item>List item 5</ActionList.Item>\n      </ActionList>\n      <ActionList header={<Text kind=\"heading-md\" as=\"span\">Custom Header</Text>}>\n        <ActionList.Item>List item 1</ActionList.Item>\n        <ActionList.Item>List item 2</ActionList.Item>\n        <ActionList.Item>List item 3</ActionList.Item>\n        <ActionList.Item>List item 4</ActionList.Item>\n        <ActionList.Item>List item 5</ActionList.Item>\n      </ActionList>\n    </>"
        },
        {
          "name": "Supporting Text",
          "description": "Use `supportingText` to add support text to an item.",
          "source": "<ActionList ariaLabel=\"Action list\" header=\"Header\" supportingText=\"Lorem ipsum dolor sit amet\">\n      <ActionList.Item supportingText=\"Lorem ipsum dolor sit amet\">\n        List item 1\n      </ActionList.Item>\n      <ActionList.Item supportingText=\"Lorem ipsum dolor sit amet\">\n        List item 2\n      </ActionList.Item>\n      <ActionList.Item supportingText=\"Lorem ipsum dolor sit amet\">\n        List item 3\n      </ActionList.Item>\n      <ActionList.Item supportingText=\"Lorem ipsum dolor sit amet\">\n        List item 4\n      </ActionList.Item>\n      <ActionList.Item supportingText=\"Lorem ipsum dolor sit amet\">\n        List item 5\n      </ActionList.Item>\n    </ActionList>"
        },
        {
          "name": "Content Before",
          "description": "Use `ActionList.Item` to pass an icon or custom content to `contentBefore`.",
          "source": "<ActionList ariaLabel=\"Action list\">\n      <ActionList.Item contentBefore={<Icon icon={Satellite} />}>List item 1</ActionList.Item>\n      <ActionList.Item contentBefore={<Icon icon={Satellite} />}>List item 2</ActionList.Item>\n      <ActionList.Item contentBefore={<Icon icon={Satellite} />}>List item 3</ActionList.Item>\n      <ActionList.Item contentBefore={<Icon icon={Satellite} />}>List item 4</ActionList.Item>\n      <ActionList.Item contentBefore={<Icon icon={Satellite} />}>List item 5</ActionList.Item>\n    </ActionList>"
        },
        {
          "name": "Content After",
          "description": "Use `ActionList.Item` to pass an icon or custom content to `contentAfter`.",
          "source": "<ActionList ariaLabel=\"Action list\">\n      <ActionList.Item contentAfter={<Icon icon={Satellite} />}>List item 1</ActionList.Item>\n      <ActionList.Item contentAfter={<Icon icon={Satellite} />}>List item 2</ActionList.Item>\n      <ActionList.Item contentAfter={<Icon icon={Satellite} />}>List item 3</ActionList.Item>\n      <ActionList.Item contentAfter={<Icon icon={Satellite} />}>List item 4</ActionList.Item>\n      <ActionList.Item contentAfter={<Icon icon={Satellite} />}>List item 5</ActionList.Item>\n    </ActionList>"
        },
        {
          "name": "Destructive",
          "description": "Both ActionList.Item and ActionList.Group support kind `destructive` for actions that have destructive consequences.",
          "source": "<ActionList ariaLabel=\"Action list\">\n      <ActionList.Group divider>\n        <ActionList.Item\n          contentBefore={<Icon icon={ContentCopy} />}\n        >\n          Copy\n        </ActionList.Item>\n        <ActionList.Item\n          contentBefore={<Icon icon={Edit} />}\n        >\n          Edit\n        </ActionList.Item>\n      </ActionList.Group>\n      <ActionList.Group>\n        <ActionList.Item\n          kind=\"destructive\"\n          contentBefore={<Icon icon={DeleteOutline} />}\n        >\n          Delete\n        </ActionList.Item>\n      </ActionList.Group>\n    </ActionList>"
        },
        {
          "name": "Disabled",
          "description": "Set `disabled` to `true` to display ActionList.Item in a disabled state.",
          "source": "<ActionList ariaLabel=\"Action list\">\n      <ActionList.Group divider>\n        <ActionList.Item\n          contentBefore={<Icon icon={ContentCopy} />}\n        >\n          Copy\n        </ActionList.Item>\n        <ActionList.Item\n          contentBefore={<Icon icon={Edit} />}\n          disabled\n        >\n          Edit\n        </ActionList.Item>\n      </ActionList.Group>\n      <ActionList.Group>\n        <ActionList.Item\n          kind=\"destructive\"\n          contentBefore={<Icon icon={DeleteOutline} />}\n        >\n          Delete\n        </ActionList.Item>\n      </ActionList.Group>\n    </ActionList>"
        },
        {
          "name": "Aligning To Icons",
          "description": "It's recommend to use `indent` to align text in different groups.\n\n> Don't mix grouped items with and without icons.",
          "source": "<div\n      style={{\n        display: 'flex',\n        gap: bmSemSpace400,\n        flexDirection: 'row',\n      }}\n    >\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: bmSemSpace75,\n          flex: 1,\n        }}\n      >\n        <Badge appearance=\"positive\" icon={CheckCircleOutline}>\n          Do\n        </Badge>\n        <ActionList ariaLabel=\"Action list\">\n          <ActionList.Group divider>\n            <ActionList.Item contentBefore={<Icon icon={Satellite} />}>Group 1</ActionList.Item>\n            <ActionList.Item contentBefore={<Icon icon={Satellite} />}>Group 1</ActionList.Item>\n          </ActionList.Group>\n          <ActionList.Group indent>\n            <ActionList.Item>Group 2</ActionList.Item>\n            <ActionList.Item>Group 2</ActionList.Item>\n          </ActionList.Group>\n        </ActionList>\n      </div>\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: bmSemSpace75,\n          flex: 1,\n        }}\n      >\n        <Badge appearance=\"negative\" icon={ErrorOutline}>\n          Don't\n        </Badge>\n        <ActionList ariaLabel=\"Action list\">\n          <ActionList.Group divider>\n            <ActionList.Item contentBefore={<Icon icon={Satellite} />}>Group 1</ActionList.Item>\n            <ActionList.Item>Group 1</ActionList.Item>\n          </ActionList.Group>\n          <ActionList.Group>\n            <ActionList.Item>Group 2</ActionList.Item>\n            <ActionList.Item>Group 2</ActionList.Item>\n          </ActionList.Group>\n        </ActionList>\n      </div>\n    </div>"
        },
        {
          "name": "Aligning To Selectable Items",
          "description": "Set `indent` to `true` to align text between groups.\n\n> Don't mix different item kinds in the same group.",
          "source": "<div\n      style={{\n        display: 'flex',\n        gap: bmSemSpace400,\n        flexDirection: 'row',\n      }}\n    >\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: bmSemSpace75,\n          flex: 1,\n        }}\n      >\n        <Badge appearance=\"positive\" icon={CheckCircleOutline}>\n          Do\n        </Badge>\n        <ActionList ariaLabel=\"Action list\">\n          <ActionList.Group divider kind=\"singleCheckMark\">\n            <ActionList.Item defaultSelected>Group 1</ActionList.Item>\n            <ActionList.Item>Group 1</ActionList.Item>\n          </ActionList.Group>\n          <ActionList.Group>\n            <ActionList.Item>Group 2</ActionList.Item>\n            <ActionList.Item>Group 2</ActionList.Item>\n          </ActionList.Group>\n        </ActionList>\n      </div>\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: bmSemSpace75,\n          flex: 1,\n        }}\n      >\n        <Badge appearance=\"negative\" icon={ErrorOutline}>\n          Don't\n        </Badge>\n        <ActionList ariaLabel=\"Action list\">\n          <ActionList.Group divider>\n            <ActionList.Item kind=\"multiCheckMark\" defaultSelected>Group 1</ActionList.Item>\n            <ActionList.Item kind=\"checkbox\">Group 1</ActionList.Item>\n          </ActionList.Group>\n          <ActionList.Group indent={false}>\n            <ActionList.Item>Group 2</ActionList.Item>\n            <ActionList.Item>Group 2</ActionList.Item>\n          </ActionList.Group>\n        </ActionList>\n      </div>\n    </div>"
        },
        {
          "name": "Aligning To Icons And Selectable Items",
          "description": "Set `indent` to `true` to align all selectable and non-selectable items between groups.\n\n> Don't mix grouped items with and without icons.",
          "source": "<div\n      style={{\n        display: 'flex',\n        gap: bmSemSpace400,\n        flexDirection: 'row',\n      }}\n    >\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: bmSemSpace75,\n          flex: 1,\n        }}\n      >\n        <Badge appearance=\"positive\" icon={CheckCircleOutline}>\n          Do\n        </Badge>\n        <ActionList ariaLabel=\"Action list\">\n          <ActionList.Group divider kind=\"singleCheckMark\">\n            <ActionList.Item contentBefore={<Icon icon={Satellite} />} defaultSelected>Group 1</ActionList.Item>\n            <ActionList.Item contentBefore={<Icon icon={Satellite} />}>Group 1</ActionList.Item>\n          </ActionList.Group>\n          <ActionList.Group divider kind=\"singleCheckMark\">\n            <ActionList.Item defaultSelected>Group 2</ActionList.Item>\n            <ActionList.Item>Group 2</ActionList.Item>\n          </ActionList.Group>\n          <ActionList.Group>\n            <ActionList.Item>Group 3</ActionList.Item>\n            <ActionList.Item>Group 3</ActionList.Item>\n          </ActionList.Group>\n        </ActionList>\n      </div>\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: bmSemSpace75,\n          flex: 1,\n        }}\n      >\n        <Badge appearance=\"negative\" icon={ErrorOutline}>\n          Don't\n        </Badge>\n        <ActionList ariaLabel=\"Action list\">\n          <ActionList.Group divider kind=\"singleCheckMark\">\n            <ActionList.Item contentBefore={<Icon icon={Satellite} />} defaultSelected>Group 1</ActionList.Item>\n            <ActionList.Item>Group 1</ActionList.Item>\n          </ActionList.Group>\n          <ActionList.Group divider kind=\"singleCheckMark\">\n            <ActionList.Item defaultSelected>Group 2</ActionList.Item>\n            <ActionList.Item>Group 2</ActionList.Item>\n          </ActionList.Group>\n          <ActionList.Group indent={false}>\n            <ActionList.Item>Group 3</ActionList.Item>\n            <ActionList.Item>Group 3</ActionList.Item>\n          </ActionList.Group>\n        </ActionList>\n      </div>\n    </div>"
        },
        {
          "name": "Action",
          "description": "",
          "source": "<ActionList ariaLabel=\"Action list\">\n      <ActionList.Item>Mercury</ActionList.Item>\n      <ActionList.Item>Venus</ActionList.Item>\n      <ActionList.Item>Earth</ActionList.Item>\n      <ActionList.Item>Mars</ActionList.Item>\n      <ActionList.Item>Jupiter</ActionList.Item>\n    </ActionList>"
        },
        {
          "name": "With Header (Example)",
          "description": "",
          "source": "<ActionList header=\"Planets\">\n      <ActionList.Item>Mercury</ActionList.Item>\n      <ActionList.Item>Venus</ActionList.Item>\n      <ActionList.Item>Earth</ActionList.Item>\n      <ActionList.Item>Mars</ActionList.Item>\n      <ActionList.Item>Jupiter</ActionList.Item>\n    </ActionList>"
        },
        {
          "name": "With Supporting Text",
          "description": "",
          "source": "<ActionList ariaLabel=\"Action list\">\n      <ActionList.Item supportingText=\"The first planet mankind will visit.\">\n        Mars\n      </ActionList.Item>\n      <ActionList.Item supportingText=\"The largest planet in the solar system.\">\n        Jupiter\n      </ActionList.Item>\n      <ActionList.Item supportingText=\"The planet with the largest ring system.\">\n        Saturn\n      </ActionList.Item>\n    </ActionList>"
        },
        {
          "name": "With Content Before",
          "description": "",
          "source": "<ActionList ariaLabel=\"Action list\">\n      <ActionList.Item contentBefore={<Icon icon={ContentCopy} />}>\n        Copy\n      </ActionList.Item>\n      <ActionList.Item contentBefore={<Icon icon={Edit} />}>Edit</ActionList.Item>\n      <ActionList.Item\n        kind=\"destructive\"\n        contentBefore={<Icon icon={DeleteOutline} />}\n      >\n        Delete\n      </ActionList.Item>\n    </ActionList>"
        },
        {
          "name": "With Content Before And After",
          "description": "",
          "source": "<ActionList ariaLabel=\"Action list\">\n      <ActionList.Item\n        contentBefore={<Icon icon={ContentCopy} />}\n        contentAfter=\"Cmd + C\"\n      >\n        Copy\n      </ActionList.Item>\n      <ActionList.Item contentBefore={<Icon icon={Edit} />} contentAfter=\"Cmd + S\">\n        Edit\n      </ActionList.Item>\n      <ActionList.Item\n        kind=\"destructive\"\n        contentBefore={<Icon icon={DeleteOutline} />}\n        contentAfter=\"⌫\"\n      >\n        Delete\n      </ActionList.Item>\n    </ActionList>"
        },
        {
          "name": "With Divider",
          "description": "",
          "source": "<ActionList ariaLabel=\"Action list\">\n      <ActionList.Group divider>\n        <ActionList.Item\n          contentBefore={<Icon icon={ContentCopy} />}\n          contentAfter=\"Cmd + C\"\n        >\n          Copy\n        </ActionList.Item>\n        <ActionList.Item contentBefore={<Icon icon={Edit} />} contentAfter=\"Cmd + S\">\n          Edit\n        </ActionList.Item>\n      </ActionList.Group>\n      <ActionList.Group>\n        <ActionList.Item\n          kind=\"destructive\"\n          contentBefore={<Icon icon={DeleteOutline} />}\n          contentAfter=\"⌫\"\n        >\n          Delete\n        </ActionList.Item>\n      </ActionList.Group>\n    </ActionList>"
        },
        {
          "name": "With Group Headings",
          "description": "",
          "source": "<ActionList ariaLabel=\"Action list\">\n      <ActionList.Group heading=\"Planets\" divider>\n        <ActionList.Item>Mercury</ActionList.Item>\n        <ActionList.Item>Venus</ActionList.Item>\n        <ActionList.Item>Earth</ActionList.Item>\n        <ActionList.Item>Mars</ActionList.Item>\n        <ActionList.Item>Jupiter</ActionList.Item>\n      </ActionList.Group>\n      <ActionList.Group heading=\"Galaxies\">\n        <ActionList.Item>The Milky Way</ActionList.Item>\n        <ActionList.Item>Andromeda</ActionList.Item>\n      </ActionList.Group>\n    </ActionList>"
        },
        {
          "name": "With Disabled Item",
          "description": "",
          "source": "<ActionList ariaLabel=\"Action list\">\n      <ActionList.Item supportingText=\"This is a description.\">\n        List item 1\n      </ActionList.Item>\n      <ActionList.Item supportingText=\"This is a description.\" disabled>\n        Disabled item\n      </ActionList.Item>\n      <ActionList.Item supportingText=\"This is a description.\">\n        List item 3\n      </ActionList.Item>\n    </ActionList>"
        },
        {
          "name": "Single Select With Checkmark",
          "description": "",
          "source": "<ActionList ariaLabel=\"Action list\">\n      <ActionList.Group kind=\"singleCheckMark\">\n        <ActionList.Item defaultSelected>GEO network</ActionList.Item>\n        <ActionList.Item>MEO network</ActionList.Item>\n        <ActionList.Item>LEO network</ActionList.Item>\n      </ActionList.Group>\n    </ActionList>"
        },
        {
          "name": "Multi Select With Checkmark",
          "description": "",
          "source": "<ActionList ariaLabel=\"Action list\">\n      <ActionList.Group kind=\"multiCheckMark\">\n        <ActionList.Item defaultSelected>GEO network</ActionList.Item>\n        <ActionList.Item defaultSelected>MEO network</ActionList.Item>\n        <ActionList.Item>LEO network</ActionList.Item>\n      </ActionList.Group>\n    </ActionList>"
        },
        {
          "name": "Multi Select With Checkbox",
          "description": "",
          "source": "<ActionList ariaLabel=\"Action list\">\n      <ActionList.Group kind=\"checkbox\">\n        <ActionList.Item defaultSelected>GEO network</ActionList.Item>\n        <ActionList.Item defaultSelected>MEO network</ActionList.Item>\n        <ActionList.Item>LEO network</ActionList.Item>\n      </ActionList.Group>\n    </ActionList>"
        },
        {
          "name": "Single Select With Radio Button",
          "description": "",
          "source": "<ActionList ariaLabel=\"Action list\">\n      <ActionList.Group kind=\"radio\">\n        <ActionList.Item defaultSelected>GEO network</ActionList.Item>\n        <ActionList.Item>MEO network</ActionList.Item>\n        <ActionList.Item>LEO network</ActionList.Item>\n      </ActionList.Group>\n    </ActionList>"
        },
        {
          "name": "Multi Select With Switch",
          "description": "",
          "source": "<ActionList ariaLabel=\"Action list\">\n      <ActionList.Group kind=\"switch\">\n        <ActionList.Item defaultSelected>GEO network</ActionList.Item>\n        <ActionList.Item>MEO network</ActionList.Item>\n        <ActionList.Item>LEO network</ActionList.Item>\n      </ActionList.Group>\n    </ActionList>"
        },
        {
          "name": "With Loading Spinner",
          "description": "",
          "source": "<ActionList ariaLabel=\"Action list\" loading />"
        },
        {
          "name": "No Results",
          "description": "",
          "source": "<ActionList ariaLabel=\"Action list\" noResults=\"No matches found\" />"
        }
      ],
      "category": "Components",
      "displayName": "ActionList",
      "importPath": "@viasat/beam-react"
    },
    {
      "title": "Components/Accordion/AccordionGroup",
      "slug": "components-accordion-accordiongroup",
      "description": "An AccordionGroup allows users to expand and collapse sections of content within a limited space.",
      "type": "component",
      "props": [
        {
          "name": "children",
          "type": "React.ReactNode",
          "description": "Specify which Accordions are in the AccordionGroup",
          "required": true
        },
        {
          "name": "size",
          "type": "'sm' | 'md' | 'lg'",
          "description": "Specify the size of the AccordionGroup",
          "defaultValue": "'medium'"
        },
        {
          "name": "singleExpand",
          "type": "boolean",
          "description": "Specify if only one row item can be expanded at a time",
          "defaultValue": "'false'"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default AccordionGroup.",
          "source": "<AccordionGroup {...args}>\n        <Accordion heading={'Accordion heading'}>\n          <span>{defaultAccordionText}</span>\n        </Accordion>\n        <Accordion heading={'Accordion heading'}>\n          <span>{defaultAccordionText}</span>\n        </Accordion>\n        <Accordion heading={'Accordion heading'}>\n          <span>{defaultAccordionText}</span>\n        </Accordion>\n      </AccordionGroup>"
        },
        {
          "name": "Size",
          "description": "AccordionGroup supports `small`, `medium`, and `large` sizes. Default `size` is `medium`.",
          "source": "<>\n        <AccordionGroup size=\"sm\">\n          <Accordion heading={'Small accordion'} id=\"accordion1\">\n            <span>{defaultAccordionText}</span>\n          </Accordion>\n          <Accordion heading={'Small accordion'} id=\"accordion2\">\n            <span>{defaultAccordionText}</span>\n          </Accordion>\n          <Accordion heading={'Small accordion'} id=\"accordion3\">\n            <span>{defaultAccordionText}</span>\n          </Accordion>\n        </AccordionGroup>\n\n        <AccordionGroup>\n          <Accordion heading={'Medium accordion'}>\n            <span>{defaultAccordionText}</span>\n          </Accordion>\n          <Accordion heading={'Medium accordion'}>\n            <span>{defaultAccordionText}</span>\n          </Accordion>\n          <Accordion heading={'Medium accordion'}>\n            <span>{defaultAccordionText}</span>\n          </Accordion>\n        </AccordionGroup>\n\n        <AccordionGroup size=\"lg\">\n          <Accordion heading={'Large accordion'}>\n            <span>{defaultAccordionText}</span>\n          </Accordion>\n          <Accordion heading={'Large accordion'}>\n            <span>{defaultAccordionText}</span>\n          </Accordion>\n          <Accordion heading={'Large accordion'}>\n            <span>{defaultAccordionText}</span>\n          </Accordion>\n        </AccordionGroup>\n      </>"
        },
        {
          "name": "Single Expand",
          "description": "Set `singleExpand` to `true` to only allow one Accordion row to be open at a time within an AccordionGroup.",
          "source": "<AccordionGroup singleExpand>\n        <Accordion heading={'Accordion heading'} defaultOpen id=\"accordion1\">\n          <span>{defaultAccordionText}</span>\n        </Accordion>\n        <Accordion heading={'Accordion heading'} id=\"accordion2\">\n          <span>{defaultAccordionText}</span>\n        </Accordion>\n        <Accordion heading={'Accordion heading'} id=\"accordion3\">\n          <span>{defaultAccordionText}</span>\n        </Accordion>\n      </AccordionGroup>"
        },
        {
          "name": "Multi Expand",
          "description": "Set `singleExpand` to `false` to allow multiple Accordion rows to be open at a time within an AccordionGroup.",
          "source": "<AccordionGroup>\n        <Accordion heading={'Accordion heading'} defaultOpen id=\"accordion1\">\n          <span>{defaultAccordionText}</span>\n        </Accordion>\n        <Accordion heading={'Accordion heading'} defaultOpen id=\"accordion2\">\n          <span>{defaultAccordionText}</span>\n        </Accordion>\n        <Accordion heading={'Accordion heading'} id=\"accordion3\">\n          <span>{defaultAccordionText}</span>\n        </Accordion>\n      </AccordionGroup>"
        },
        {
          "name": "Controlled Component",
          "description": "Use `open` prop to make AccordionGroup as controlled component",
          "source": "const [openAccordionId, setOpenAccordionId] = React.useState<string | null>(\n      null,\n    );\n\n    const handleToggle = (accordionId: string, isOpen: boolean) => {\n      setOpenAccordionId(isOpen ? accordionId : null);\n    };\n\n    return (\n      <AccordionGroup>\n        <Accordion\n          heading=\"Accordion 1\"\n          open={openAccordionId === 'accordion1'}\n          onToggle={(event, isOpen) => handleToggle('accordion1', isOpen)}\n        >\n          <span>{defaultAccordionText}</span>\n        </Accordion>\n        <Accordion\n          heading=\"Accordion 2\"\n          open={openAccordionId === 'accordion2'}\n          onToggle={(event, isOpen) => handleToggle('accordion2', isOpen)}\n        >\n          <span>{defaultAccordionText}</span>\n        </Accordion>\n        <Accordion\n          heading=\"Accordion 3\"\n          open={openAccordionId === 'accordion3'}\n          onToggle={(event, isOpen) => handleToggle('accordion3', isOpen)}\n        >\n          <span>{defaultAccordionText}</span>\n        </Accordion>\n      </AccordionGroup>\n    );"
        }
      ],
      "category": "Components",
      "displayName": "Accordion/AccordionGroup",
      "importPath": "@viasat/beam-react",
      "usageGuidelines": "# Accordion guidelines\n\n## Purpose\n\nAccordion reveals and hides content sections in place, allowing users to scan headings before committing to reading. Use it to manage information density on pages where not all content is equally relevant to every user.\n\n## Use when\n\n- Content can be grouped under distinct headings and users are unlikely to need all sections at once.\n- Page length is a concern and content can be progressively disclosed.\n- Displaying FAQs, settings panels, or layered reference content.\n\n## Avoid when\n\n- Users are likely to need to compare content across sections — hiding panels creates friction.\n- Content is brief enough to display inline without adding interaction overhead.\n- Users need to locate specific text within the content — collapsed panels are excluded from browser search (Ctrl+F / Cmd+F).\n\n## Anatomy\n\nAccordion must always be used inside an AccordionGroup — it will not work on its own. AccordionGroup is the container; Accordion is the individual item.\n\nEach Accordion item consists of:\n\n- **Trigger** — a heading and chevron that expand or collapse the panel. The heading accepts rich content such as text combined with a Badge, and an icon can be added before it.\n- **Panel** — a customizable content area revealed when the item is open.\n\n## Sizes\n\nThree sizes are available: small, medium (default), and large. Size is set on the group and applies to all items.\n\n## Behavior\n\nEach item expands and collapses independently by default.\n\n**Multiple panels open (default):** Any number of items can be open simultaneously. Use this when panel contents are independent of each other.\n\n**Single expand:** Only one panel can be open at a time — opening a new item collapses the current one. Use this when one active section at a time makes sense contextually.\n\n**Default open:** A panel can be open on initial load when important content should be immediately visible without user action.\n\n**Single item:** One Accordion inside AccordionGroup is valid when only one expandable section is needed.\n\n## Accessibility\n\nAccordion provides keyboard interaction, expanded state communication, and panel visibility management through the component.\n\n- Panels are toggled with Enter or Space.\n- The trigger communicates its expanded or collapsed state to assistive technology automatically.\n- When a panel is collapsed, its contents are hidden from both keyboard navigation and assistive technology.\n\nUser responsibilities:\n\n- Write headings that clearly describe the content being revealed.\n- Do not hide important information inside collapsed panels.\n- Keep focus order predictable when adding interactive elements to panel content.\n- Be aware that browser native search (Ctrl+F / Cmd+F) will not surface content inside collapsed panels.\n\n## Content guidance\n\n- The heading is the only visible content when a panel is collapsed — write it to be specific enough to communicate what the panel contains, and short enough to scan at a glance.\n\n## Do\n\n- Use AccordionGroup as the container for all Accordion items.\n- Set size on the group.\n\n## Don't\n\n- Place Accordion items side-by-side in a layout.\n- Hide important information inside a collapsed panel.\n- Use Accordion when content is brief enough to display all at once.\n- Use Accordion when users need to compare content across sections simultaneously."
    },
    {
      "title": "Components/Accordion/Accordion",
      "slug": "components-accordion-accordion",
      "description": "An Accordion allows users to expand and collapse sections of content within a limited space.",
      "type": "component",
      "props": [
        {
          "name": "size",
          "type": "'sm' | 'md' | 'lg'",
          "description": "Specify size of an Accordion",
          "defaultValue": "'medium'"
        },
        {
          "name": "heading",
          "type": "ReactNode",
          "description": "Specify heading content for the Accordion"
        },
        {
          "name": "children",
          "type": "ReactNode",
          "description": "Specify body content for the Accordion",
          "required": true
        },
        {
          "name": "icon",
          "type": "ReactNode",
          "description": "Display an icon before the Accordion heading"
        },
        {
          "name": "onToggle",
          "type": "(event: SyntheticEvent<Element, Event>, isOpen: boolean) => void",
          "description": "Specify a callback when the open Accordion changes"
        },
        {
          "name": "open",
          "type": "boolean",
          "description": "Specify if an Accordion is open.\nIf this is specified, the component becomes controlled",
          "defaultValue": "false"
        },
        {
          "name": "defaultOpen",
          "type": "boolean",
          "description": "Specify if an Accordion is open by default",
          "defaultValue": "false"
        }
      ],
      "stories": [
        {
          "name": "Default",
          "description": "This is the default Accordion.",
          "source": "<AccordionGroup>\n        <Accordion {...args}>{defaultAccordionText}</Accordion>\n      </AccordionGroup>"
        },
        {
          "name": "Size",
          "description": "Accordion supports `small`, `medium`, and `large` sizes. Default `size` is `medium`.",
          "source": "<>\n        <AccordionGroup>\n          <Accordion size=\"sm\" heading={'Small accordion'} id=\"accordion1\">\n            <span>{defaultAccordionText}</span>\n          </Accordion>\n        </AccordionGroup>\n\n        <AccordionGroup>\n          <Accordion size=\"md\" heading={'Medium accordion'} id=\"accordion2\">\n            <span>{defaultAccordionText}</span>\n          </Accordion>\n        </AccordionGroup>\n\n        <AccordionGroup>\n          <Accordion size=\"lg\" heading={'Large accordion'} id=\"accordion3\">\n            <span>{defaultAccordionText}</span>\n          </Accordion>\n        </AccordionGroup>\n      </>"
        },
        {
          "name": "Icon",
          "description": "Use `icon` to add an icon before the Accordion heading.",
          "source": "<AccordionGroup>\n        <Accordion\n          size=\"sm\"\n          heading={'Accordion with icon'}\n          icon={<Satellite />}\n          id=\"accordion1\"\n        >\n          <span>{defaultAccordionText}</span>\n        </Accordion>\n      </AccordionGroup>"
        },
        {
          "name": "Default To Open",
          "description": "Set `defaultOpen` to `true` to display an Accordion row open by default.",
          "source": "<AccordionGroup>\n        <Accordion size=\"sm\" heading={'Item 1'} defaultOpen id=\"accordion1\">\n          <span>{defaultAccordionText}</span>\n        </Accordion>\n      </AccordionGroup>"
        },
        {
          "name": "Custom Content",
          "description": "Use `heading` and `children` slots to customize the Accordion.",
          "source": "const customHeading = (\n      <>\n        <span style={{ display: 'flex', alignItems: 'center' }}>\n          Accordion heading\n        </span>\n        <Badge appearance=\"positive\" emphasis=\"medium\" hideIcon>\n          New\n        </Badge>\n      </>\n    );\n    return (\n      <AccordionGroup>\n        <Accordion heading={customHeading} defaultOpen id=\"accordion1\">\n          <span>{defaultAccordionText}</span>\n          <Button size=\"sm\">Learn more</Button>\n        </Accordion>\n      </AccordionGroup>\n    );"
        },
        {
          "name": "Controlled Component",
          "description": "Use `open` prop to make Accordion as controlled component",
          "source": "const [isOpen, setIsOpen] = React.useState(false);\n    return (\n      <AccordionGroup>\n        <Accordion\n          size=\"sm\"\n          heading={'Accordion heading'}\n          open={isOpen}\n          onToggle={(event, isOpen) => setIsOpen(isOpen)}\n        >\n          <span>{defaultAccordionText}</span>\n        </Accordion>\n      </AccordionGroup>\n    );"
        }
      ],
      "category": "Components",
      "displayName": "Accordion/Accordion",
      "importPath": "@viasat/beam-react",
      "usageGuidelines": "# Accordion guidelines\n\n## Purpose\n\nAccordion reveals and hides content sections in place, allowing users to scan headings before committing to reading. Use it to manage information density on pages where not all content is equally relevant to every user.\n\n## Use when\n\n- Content can be grouped under distinct headings and users are unlikely to need all sections at once.\n- Page length is a concern and content can be progressively disclosed.\n- Displaying FAQs, settings panels, or layered reference content.\n\n## Avoid when\n\n- Users are likely to need to compare content across sections — hiding panels creates friction.\n- Content is brief enough to display inline without adding interaction overhead.\n- Users need to locate specific text within the content — collapsed panels are excluded from browser search (Ctrl+F / Cmd+F).\n\n## Anatomy\n\nAccordion must always be used inside an AccordionGroup — it will not work on its own. AccordionGroup is the container; Accordion is the individual item.\n\nEach Accordion item consists of:\n\n- **Trigger** — a heading and chevron that expand or collapse the panel. The heading accepts rich content such as text combined with a Badge, and an icon can be added before it.\n- **Panel** — a customizable content area revealed when the item is open.\n\n## Sizes\n\nThree sizes are available: small, medium (default), and large. Size is set on the group and applies to all items.\n\n## Behavior\n\nEach item expands and collapses independently by default.\n\n**Multiple panels open (default):** Any number of items can be open simultaneously. Use this when panel contents are independent of each other.\n\n**Single expand:** Only one panel can be open at a time — opening a new item collapses the current one. Use this when one active section at a time makes sense contextually.\n\n**Default open:** A panel can be open on initial load when important content should be immediately visible without user action.\n\n**Single item:** One Accordion inside AccordionGroup is valid when only one expandable section is needed.\n\n## Accessibility\n\nAccordion provides keyboard interaction, expanded state communication, and panel visibility management through the component.\n\n- Panels are toggled with Enter or Space.\n- The trigger communicates its expanded or collapsed state to assistive technology automatically.\n- When a panel is collapsed, its contents are hidden from both keyboard navigation and assistive technology.\n\nUser responsibilities:\n\n- Write headings that clearly describe the content being revealed.\n- Do not hide important information inside collapsed panels.\n- Keep focus order predictable when adding interactive elements to panel content.\n- Be aware that browser native search (Ctrl+F / Cmd+F) will not surface content inside collapsed panels.\n\n## Content guidance\n\n- The heading is the only visible content when a panel is collapsed — write it to be specific enough to communicate what the panel contains, and short enough to scan at a glance.\n\n## Do\n\n- Use AccordionGroup as the container for all Accordion items.\n- Set size on the group.\n\n## Don't\n\n- Place Accordion items side-by-side in a layout.\n- Hide important information inside a collapsed panel.\n- Use Accordion when content is brief enough to display all at once.\n- Use Accordion when users need to compare content across sections simultaneously."
    }
  ],
  "concepts": [
    {
      "title": "Tokens/Typography",
      "slug": "tokens-typography",
      "description": "Typography is a cornerstone of design systems, shaping the user experience through typeface selection, hierarchy, and styles.",
      "type": "mdx",
      "mdxContent": "# Typography\n\nTypography is a cornerstone of design systems, shaping the user experience through typeface selection, hierarchy, and styles.\n\n  > **Note:** As a general rule, body and heading sizes that work well together have the same t-shirt sizes; eg \"body-md\" + \"heading-md\" should be paired together. However, this is just a guideline, the typeset is adaptive to needs so different t-shirt sizes may be paired if they work for the use case.\n\n### Heading\n\nPrimary heading style used to create various levels of hierarchies between text.\n\n| Token | Size | Line Height |\n|-------|------|-------------|\n| `bm-sem-typo-heading-xl` | 1.75rem | 2.25rem |\n| `bm-sem-typo-heading-6xl-mobile` | 3rem | 3.5rem |\n| `bm-sem-typo-heading-6xl-tablet` | 3.75rem | 4.5rem |\n| `bm-sem-typo-heading-6xl-desktop` | 4.5rem | 5.25rem |\n| `bm-sem-typo-heading-5xl-mobile` | 2.5rem | 3rem |\n| `bm-sem-typo-heading-5xl-tablet` | 3rem | 3.5rem |\n| `bm-sem-typo-heading-5xl-desktop` | 3.75rem | 4.5rem |\n| `bm-sem-typo-heading-4xl-mobile` | 2rem | 2.5rem |\n| `bm-sem-typo-heading-4xl-tablet` | 2.5rem | 3rem |\n| `bm-sem-typo-heading-4xl-desktop` | 3rem | 3.5rem |\n| `bm-sem-typo-heading-3xl-mobile` | 1.75rem | 2.25rem |\n| `bm-sem-typo-heading-3xl-tablet` | 2rem | 2.5rem |\n| `bm-sem-typo-heading-3xl-desktop` | 2.5rem | 3rem |\n| `bm-sem-typo-heading-2xl-mobile` | 1.5rem | 2rem |\n| `bm-sem-typo-heading-2xl-tablet` | 1.75rem | 2.25rem |\n| `bm-sem-typo-heading-2xl-desktop` | 2rem | 2.5rem |\n| `bm-sem-typo-heading-lg` | 1.5rem | 2rem |\n| `bm-sem-typo-heading-md` | 1.25rem | 1.75rem |\n| `bm-sem-typo-heading-sm` | 1.125rem | 1.5rem |\n| `bm-sem-typo-heading-xs` | 1rem | 1.25rem |\n\n### Heading Alt\n\nAlternative heading style that provides a lighter weight option for creating visual hierarchy.\n\n| Token | Size | Line Height |\n|-------|------|-------------|\n| `bm-sem-typo-heading-alt-xl` | 1.75rem | 2.25rem |\n| `bm-sem-typo-heading-alt-6xl-mobile` | 3rem | 3.5rem |\n| `bm-sem-typo-heading-alt-6xl-tablet` | 3.75rem | 4.5rem |\n| `bm-sem-typo-heading-alt-6xl-desktop` | 4.5rem | 5.25rem |\n| `bm-sem-typo-heading-alt-5xl-mobile` | 2.5rem | 3rem |\n| `bm-sem-typo-heading-alt-5xl-tablet` | 3rem | 3.5rem |\n| `bm-sem-typo-heading-alt-5xl-desktop` | 3.75rem | 4.5rem |\n| `bm-sem-typo-heading-alt-4xl-mobile` | 2rem | 2.5rem |\n| `bm-sem-typo-heading-alt-4xl-tablet` | 2.5rem | 3rem |\n| `bm-sem-typo-heading-alt-4xl-desktop` | 3rem | 3.5rem |\n| `bm-sem-typo-heading-alt-3xl-mobile` | 1.75rem | 2.25rem |\n| `bm-sem-typo-heading-alt-3xl-tablet` | 2rem | 2.5rem |\n| `bm-sem-typo-heading-alt-3xl-desktop` | 2.5rem | 3rem |\n| `bm-sem-typo-heading-alt-2xl-mobile` | 1.5rem | 2rem |\n| `bm-sem-typo-heading-alt-2xl-tablet` | 1.75rem | 2.25rem |\n| `bm-sem-typo-heading-alt-2xl-desktop` | 2rem | 2.5rem |\n| `bm-sem-typo-heading-alt-lg` | 1.5rem | 2rem |\n| `bm-sem-typo-heading-alt-md` | 1.25rem | 1.75rem |\n| `bm-sem-typo-heading-alt-sm` | 1.125rem | 1.5rem |\n| `bm-sem-typo-heading-alt-xs` | 1rem | 1.25rem |\n\n### Body\n\nBody is a primarily used for paragraphs but can also be used for single line items.\n\n| Token | Size | Line Height |\n|-------|------|-------------|\n| `bm-sem-typo-body-xl` | 1.25rem | 2rem |\n| `bm-sem-typo-body-xs` | 0.75rem | 1.25rem |\n| `bm-sem-typo-body-sm` | 0.875rem | 1.25rem |\n| `bm-sem-typo-body-md` | 1rem | 1.5rem |\n| `bm-sem-typo-body-lg` | 1.125rem | 1.75rem |\n| `bm-sem-typo-body-2xl` | 1.5rem | 2.25rem |\n\n### Label\n\nLabel is primarily used for single line items like buttons, table headings, form labels etc.\n\n| Token | Size | Line Height |\n|-------|------|-------------|\n| `bm-sem-typo-label-xl` | 1.25rem | 2rem |\n| `bm-sem-typo-label-xs` | 0.75rem | 1.25rem |\n| `bm-sem-typo-label-sm` | 0.875rem | 1.25rem |\n| `bm-sem-typo-label-md` | 1rem | 1.5rem |\n| `bm-sem-typo-label-lg` | 1.125rem | 1.75rem |\n| `bm-sem-typo-label-2xl` | 1.5rem | 2.25rem |\n\n### Detail\n\nUsed for small, uppercase text that provides additional context or emphasis.\n\n| Token | Size | Line Height |\n|-------|------|-------------|\n| `bm-sem-typo-detail-xl` | 1.25rem | 1.5rem |\n| `bm-sem-typo-detail-xs` | 0.75rem | 1rem |\n| `bm-sem-typo-detail-sm` | 0.875rem | 1.25rem |\n| `bm-sem-typo-detail-md` | 1rem | 1.25rem |\n| `bm-sem-typo-detail-lg` | 1.125rem | 1.5rem |"
    },
    {
      "title": "Tokens/Compact Typography",
      "slug": "tokens-compact-typography",
      "description": "Compact typography offers a reduced line-height to cater for instances where the default line-height is not suitable; an example of this could be in a dense layout in a table or graph. It should be co",
      "type": "mdx",
      "mdxContent": "# Compact Typography\n\nCompact typography offers a reduced line-height to cater for instances where the default line-height is not suitable;\nan example of this could be in a dense layout in a table or graph. It should be considered carefully and only used\nwhen it's clear that the default typeset does not fit the use case.\n\n  > **Warning:** Do not use compact typography for main paragraph content. Compact typography line-height does not pass accessibility guidelines which require the line-height to be 1.5 times the font size.\n\n### Body\n\nBody is a primarily used for paragraphs but can also be used for single line items.\n\n| Token | Size | Line Height |\n|-------|------|-------------|\n| `bm-sem-typo-compact-body-xl` | 1.25rem | 1.5rem |\n| `bm-sem-typo-compact-body-xs` | 0.75rem | 1rem |\n| `bm-sem-typo-compact-body-sm` | 0.875rem | 1rem |\n| `bm-sem-typo-compact-body-md` | 1rem | 1.25rem |\n| `bm-sem-typo-compact-body-lg` | 1.125rem | 1.25rem |\n| `bm-sem-typo-compact-body-2xl` | 1.5rem | 1.75rem |\n\n### Label\n\nLabel is primarily used for single line items like buttons, table headings, form labels etc.\n\n| Token | Size | Line Height |\n|-------|------|-------------|\n| `bm-sem-typo-compact-label-xl` | 1.25rem | 1.5rem |\n| `bm-sem-typo-compact-label-xs` | 0.75rem | 1rem |\n| `bm-sem-typo-compact-label-sm` | 0.875rem | 1rem |\n| `bm-sem-typo-compact-label-md` | 1rem | 1.25rem |\n| `bm-sem-typo-compact-label-lg` | 1.125rem | 1.25rem |\n| `bm-sem-typo-compact-label-2xl` | 1.5rem | 1.75rem |"
    },
    {
      "title": "Tokens/Space",
      "slug": "tokens-space",
      "description": "Spacing tokens provide a consistent and intentional arrangement of empty space between elements within an interface. This includes margins, padding, and overall spatial relationships to ensure a cohes",
      "type": "mdx",
      "mdxContent": "# Space\n\nSpacing tokens provide a consistent and intentional arrangement of empty space between\nelements within an interface. This includes margins, padding, and overall spatial\nrelationships to ensure a cohesive and harmonious layout across different screens and devices.\n\n### Spacing Scale\n\nUse Beam's spacing scale to establish a consistent and incremental progression of spacing measurements.\nThe scale uses multiples of two, four, and eight with a base of 16px (1rem) which all tokens are derived from.\n\nThe spacing scale offers denser units at the lower end, enabling precise adjustments.\nConversely, the higher end features larger increments with fewer options,\nencouraging consistent layout decisions at the page level.\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-sem-space-0` | 0 |  |\n| `bm-sem-space-12` | 0.125rem |  |\n| `bm-sem-space-25` | 0.25rem |  |\n| `bm-sem-space-50` | 0.5rem |  |\n| `bm-sem-space-75` | 0.75rem |  |\n| `bm-sem-space-100` | 1rem |  |\n| `bm-sem-space-125` | 1.25rem |  |\n| `bm-sem-space-150` | 1.5rem |  |\n| `bm-sem-space-200` | 2rem |  |\n| `bm-sem-space-300` | 3rem |  |\n| `bm-sem-space-400` | 4rem |  |\n| `bm-sem-space-500` | 5rem |  |\n| `bm-sem-space-700` | 7rem |  |\n| `bm-sem-space-800` | 9rem |  |"
    },
    {
      "title": "Tokens/Size",
      "slug": "tokens-size",
      "description": "Size tokens define the width, height (or both values) of an element.",
      "type": "mdx",
      "mdxContent": "# Size\n\nSize tokens define the width, height (or both values) of an element.\n\n### Height\n\nCommon height tokens used for elements like buttons, chips, badges, inputs, list items, and accordion items.\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-sem-size-height-xs` | 1.5rem |  |\n| `bm-sem-size-height-sm` | 2rem |  |\n| `bm-sem-size-height-md` | 2.5rem |  |\n| `bm-sem-size-height-lg` | 3rem |  |\n| `bm-sem-size-height-xl` | 3.5rem |  |\n| `bm-sem-size-icon-xs` | 0.75rem | -- |\n| `bm-sem-size-icon-sm` | 1rem | -- |\n| `bm-sem-size-icon-md` | 1.25rem | -- |\n| `bm-sem-size-icon-lg` | 1.5rem | -- |\n| `bm-sem-size-icon-xl` | 1.75rem | -- |\n| `bm-sem-size-icon-2xl` | 2rem | -- |\n| `bm-sem-size-focus-offset` | 0.125rem |  |\n\n### Icon\n\nTokens related to common icon sizes.\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-sem-size-height-xs` | 1.5rem |  |\n| `bm-sem-size-height-sm` | 2rem |  |\n| `bm-sem-size-height-md` | 2.5rem |  |\n| `bm-sem-size-height-lg` | 3rem |  |\n| `bm-sem-size-height-xl` | 3.5rem |  |\n| `bm-sem-size-icon-xs` | 0.75rem | -- |\n| `bm-sem-size-icon-sm` | 1rem | -- |\n| `bm-sem-size-icon-md` | 1.25rem | -- |\n| `bm-sem-size-icon-lg` | 1.5rem | -- |\n| `bm-sem-size-icon-xl` | 1.75rem | -- |\n| `bm-sem-size-icon-2xl` | 2rem | -- |\n| `bm-sem-size-focus-offset` | 0.125rem |  |"
    },
    {
      "title": "Tokens/Shadow",
      "slug": "tokens-shadow",
      "description": "Use shadow tokens to draw focus to an experience rather than visual decoration. Use them sparingly so their intent is not lost.",
      "type": "mdx",
      "mdxContent": "# Shadow\n\nUse shadow tokens to draw focus to an experience rather than visual decoration.\nUse them sparingly so their intent is not lost.\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-sem-shadow-none` | 0 0 0 0 rgb(0,0,0,0) |  |\n| `bm-sem-shadow-sm` | 0 0.063rem 0.25rem 0 rgba(0, 0, 0, 0.12) | Shadow shadow that can be used on small or repeated components |\n| `bm-sem-shadow-md` | 0 0.375rem 1rem 0.125rem rgba(0, 0, 0, 0.12) | Default shadow used to draw focus, use sparingly |\n| `bm-sem-shadow-lg` | 0 0.75rem 3rem 0 rgba(0, 0, 0, 0.12) | Feature shadow, use sparingly on very large, expressive elements |\n| `bm-sem-shadow-overlay` | 0 0.25rem 0.75rem 0.125rem rgba(0, 0, 0, 0.12) | Use on elements that sit above the UI, such as modals, dropdowns and toasts |\n| `bm-sem-shadow-overflow` | 0 0.125rem 0.375rem 0.063rem rgba(0, 0, 0, 0.12) | Use to illustrate that content has scrolled outside a view. Can be used for vertical or horizontal scrolling |\n| `bm-sem-shadow-hover` | 0 0.25rem 0.75rem 0.125rem rgba(0, 0, 0, 0.12) | Indicates a hover event. Can be used on containers with no shadow or shadow-sm already applied |"
    },
    {
      "title": "Tokens/Opacity",
      "slug": "tokens-opacity",
      "description": "Sets of opacity tokens used for element transparency.",
      "type": "mdx",
      "mdxContent": "# Opacity\n\nSets of opacity tokens used for element transparency.\n\n### State Layers\n\nOpacity values used to create states.\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-sem-opacity-state-layer-hover` | 0.08 | Opacity value used to create hover state |\n| `bm-sem-opacity-state-layer-active` | 0.16 | Opacity value used to create active state |\n\n### Disabled\n\nOpacity value for components and elements that are in a disabled state.\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-sem-opacity-disabled` | 0.4 | Apply to components that are in a disabled state |"
    },
    {
      "title": "Tokens/Color",
      "slug": "tokens-color",
      "description": "Semantic tokens codify design decisions with names that reflect their intended use. This promotes design consistency throughout applications, enabling global design updates through single value modifi",
      "type": "mdx",
      "mdxContent": "# Semantic\n\nSemantic tokens codify design decisions with names that reflect their intended use.\nThis promotes design consistency throughout applications, enabling global design updates through single value\nmodifications rather than multiple individual changes. \n\n[Learn more](https://www.figma.com/design/4FUymLWopOWPWIDvPFcO1K/Beam-3-ALPHA--DONT-USE-?node-id=19392-68474&t=y6QM6aUQQJxrdPKN-4) about using semantic tokens.\n\n### Surface\n\nBackground color tokens which are the building blocks for the surface layering model.\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-sem-color-surface-00` | #F2F5F8 | Default page background |\n| `bm-sem-color-surface-00-alt` | #ffffff | Alternative page background color |\n| `bm-sem-color-surface-01` | #ffffff | Container color placed on surface-00 |\n| `bm-sem-color-surface-02` | #F2F5F8 | Container color placed on surface-01 |\n| `bm-sem-color-surface-03` | #ffffff | Container color placed on surface-02 |\n| `bm-sem-color-surface-positive` | #DAF7CF | Container color for positive elements |\n| `bm-sem-color-surface-warning` | #FFE4C9 | Container color for warning elements |\n| `bm-sem-color-surface-negative` | #FEE6E7 | Container color for negative elements |\n| `bm-sem-color-surface-info-primary` | #CCF0FF | Container color for info-primary elements |\n| `bm-sem-color-surface-info-secondary` | #DFE7EC | Container color for info-secondary elements |\n| `bm-sem-color-surface-positive-strong` | #187C36 | High emphasis container color for positive elements |\n| `bm-sem-color-surface-warning-strong` | #AC4902 | High emphasis container color for warning elements |\n| `bm-sem-color-surface-negative-strong` | #CC2429 | High emphasis container color for negative elements |\n| `bm-sem-color-surface-info-primary-strong` | #006EAD | High emphasis container color for primary information elements |\n| `bm-sem-color-surface-info-secondary-strong` | #576775 | High emphasis container color for secondary information elements |\n| `bm-sem-color-surface-selected` | #E9FCFF | Container color for selected elements |\n| `bm-sem-color-surface-selected-subtle` | rgba(159, 175, 188, 0.16) | Subtle container color for selected elements |\n| `bm-sem-color-surface-highlight` | rgba(159, 175, 188, 0.16) | Subtly highlight content on any surface  |\n| `bm-sem-color-surface-transparent` | #ffffff00 | Surface will inherit the color directly below |\n| `bm-sem-color-surface-inverse` | #202E39 | High contrast surfaces |\n\n### Text\n\nSet of color tokens used for text.\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-sem-color-text-primary` | #141D24 | Primary text color |\n| `bm-sem-color-text-secondary` | #576775 | Secondary text color |\n| `bm-sem-color-text-positive` | #187C36 | Positive text; Can pair with neutral surfaces and surface-positive |\n| `bm-sem-color-text-warning` | #AC4902 | Warning text; Can pair with neutral surfaces and surface-warning |\n| `bm-sem-color-text-negative` | #CC2429 | Negative text; Can pair with neutral surfaces and surface-negative |\n| `bm-sem-color-text-info-primary` | #006EAD | Primary information text; Can pair with neutral surfaces and surface-primary-info |\n| `bm-sem-color-text-info-secondary` | #465967 | Secondary information text; Can pair with neutral surfaces and surface-secondary-info |\n| `bm-sem-color-text-selected` | #00768F | Selected text; Can pair with neutral and selected surfaces |\n| `bm-sem-color-text-primary-inverse` | #ffffff | Use on high-contrast color or gradient backgrounds |\n| `bm-sem-color-text-secondary-inverse` | #C3CDD5 | Use on high-contrast color or gradient backgrounds |\n| `bm-sem-color-text-disabled` | rgba(87, 103, 117, 0.4) | Use for disabled text |\n\n### Border\n\nSet of color tokens used for borders.\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-sem-color-border-00` | #D1DAE0 | Border color used with “surface-00” |\n| `bm-sem-color-border-00-alt` | #DFE7EC | Border color used with “surface-00-alt” |\n| `bm-sem-color-border-01` | #DFE7EC | Border color used with “surface-01” |\n| `bm-sem-color-border-02` | #D1DAE0 | Border color used with “surface-02” |\n| `bm-sem-color-border-03` | #DFE7EC | Border color used with “surface-03” |\n| `bm-sem-color-border-strong` | #8697A5 | Strong border color generally used for inputs |\n| `bm-sem-color-border-positive` | rgba(24, 124, 54, 0.4) | Border color for positive elements; Can pair with neutral surfaces and surface-postive |\n| `bm-sem-color-border-warning` | rgba(172, 73, 2, 0.4) | Border color for warning elements; Can pair with neutral surfaces and surface-warning |\n| `bm-sem-color-border-negative` | rgba(204, 36, 41, 0.4) | Border color for negative elements; Can pair with neutral surfaces and surface-negative |\n| `bm-sem-color-border-info-primary` | rgba(0, 110, 173, 0.4) | Border color for primary information elements; Can pair with neutral surfaces and surface-info-primary |\n| `bm-sem-color-border-info-secondary` | rgba(87, 103, 117, 0.4) | Border color for secondary information elements; Can pair with neutral surfaces and surface-info-secondary |\n| `bm-sem-color-border-positive-strong` | #187C36 | High contrast border color for success elements; Can pair with neutral surfaces and surface-success |\n| `bm-sem-color-border-warning-strong` | #AC4902 | High contrast border color for warning elements; Can pair with neutral surfaces and surface-warning |\n| `bm-sem-color-border-negative-strong` | #CC2429 | High contrast border color for negative elements; Can pair with neutral surfaces and negative-success |\n| `bm-sem-color-border-info-primary-strong` | #006EAD | High contrast border color for primary information elements; Can pair with neutral surfaces and surface-info-primary |\n| `bm-sem-color-border-info-secondary-strong` | #576775 | High contrast border color for secondary information elements; Can pair with neutral surfaces and surface-info-secondary |\n| `bm-sem-color-border-selected` | #00768F | Selected border; Can pair with neutral and selected surfaces |\n| `bm-sem-color-border-focus` | #0095E0 | Border color for focused elements |\n| `bm-sem-color-border-transparent` | #ffffff00 | Use to hide borders |\n| `bm-sem-color-border-inverse` | #465967 | High contrast border |\n\n### Icon\n\nSet of color tokens used for icons. Icons require a 3:1 contrast ratio compared to text (4.5:1),\nwhich means there’s a wider range of tokens available.\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-sem-color-icon-primary` | #141D24 | Primary icon color |\n| `bm-sem-color-icon-secondary` | #576775 | Secondary icon color |\n| `bm-sem-color-icon-positive` | #24A148 | Positive icons. Pairs with neutral surfaces. Not for use use on surface-positive, instead use icon-positive-strong |\n| `bm-sem-color-icon-warning` | #EB6200 | Warning icons. Pairs with neutral surfaces. Not for use use on surface-warning, instead use icon-warning-strong |\n| `bm-sem-color-icon-negative` | #ED464C | Negative icons. Pairs with neutral surfaces. Not for use use on surface-negative, instead use icon-negative-stong |\n| `bm-sem-color-icon-info-primary` | #0095E0 | Primary info icons. Pairs with neutral surfaces. Not for use use on surface-info-primary, instead use icon-info-primary-strong |\n| `bm-sem-color-icon-info-secondary` | #576775 | Secondary info icons. Pairs with neutral surfaces. Not for use use on surface-info-secondary, instead use icon-info-secondary-strong |\n| `bm-sem-color-icon-positive-strong` | #187C36 | High emphisis positive icons. Can pair with neutral surfaces and surface-positive |\n| `bm-sem-color-icon-warning-strong` | #AC4902 | High emphisis warning icons. Can pair with neutral surfaces and surface-warning |\n| `bm-sem-color-icon-negative-strong` | #CC2429 | High emphisis negative icons. Can pair with neutral surfaces and surface-negative |\n| `bm-sem-color-icon-info-primary-strong` | #006EAD | High emphisis primary info icons. Can pair with neutral surfaces and surface-info-primary |\n| `bm-sem-color-icon-info-secondary-strong` | #465967 | High emphisis secondary info icons. Can pair with neutral surfaces and surface-info-secondary |\n| `bm-sem-color-icon-selected` | #00768F | Selected icons; Can pair with neutral and selected surfaces |\n| `bm-sem-color-icon-primary-inverse` | #ffffff | Use on high-contrast color or gradient backgrounds |\n| `bm-sem-color-icon-secondary-inverse` | #C3CDD5 | Use on high-contrast color or gradient backgrounds |\n\n### Link\n\nSet of color tokens used for links. Can be used for text or icons.\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-sem-color-link-primary` | #00768F | Primary link color for text and icons |\n| `bm-sem-color-link-primary-inverse` | #43BFD6 | Use on high-contrast color or gradient backgrounds |\n| `bm-sem-color-link-secondary` | #141D24 | Secondary link color for text and icons |\n| `bm-sem-color-link-secondary-inverse` | #ffffff | Use on high-contrast color or gradient backgrounds |\n\n### Action\n\nSet of color tokens used for button actions. They can be used for backgrounds or foregrounds.\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-sem-color-action-primary` | #00768F | Accent button color |\n| `bm-sem-color-action-primary-hover` | #005B75 |  |\n| `bm-sem-color-action-primary-active` | #00414D |  |\n| `bm-sem-color-action-onPrimary` | #ffffff |  |\n| `bm-sem-color-action-secondary` | #141D24 | Action secondary is a reserved semantic action output primarily intended for OneFi and potential future secondary-action color use cases |\n| `bm-sem-color-action-neutral` | #141D24 | Neutral button color |\n| `bm-sem-color-action-neutral-subtle` | rgba(159, 175, 188, 0.16) | Neutral button color |\n| `bm-sem-color-action-destructive` | #CC2429 | Destructive button color |\n\n### Overlay\n\nApply above a surface to make it less prominent or to subtly emphasize other elements. Often used as a \"scrim\"\nin elements like a dialog. Static overlays don't change shades or values depending upon the color theme.\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-sem-color-overlay-black-10` | rgba(20, 29, 36, 0.12) | Static dark background overlay |\n| `bm-sem-color-overlay-black-20` | rgba(20, 29, 36, 0.28) | Static dark background overlay |\n| `bm-sem-color-overlay-black-30` | rgba(20, 29, 36, 0.52) | Static dark background overlay |\n| `bm-sem-color-overlay-black-40` | rgba(20, 29, 36, 0.72) | Static dark background overlay |\n| `bm-sem-color-overlay-white-10` | rgba(255, 255, 255, 0.12) | Static white background overlay |\n| `bm-sem-color-overlay-white-20` | rgba(255, 255, 255, 0.28) | Static white background overlay |\n| `bm-sem-color-overlay-white-30` | rgba(255, 255, 255, 0.52) | Static white background overlay |\n| `bm-sem-color-overlay-white-40` | rgba(255, 255, 255, 0.72) | Static white background overlay |\n\n# Expressive\n\nExpressive tokens offer a way to introduce additional colors when an element requires visual emphasis beyond \nthe standard semantic token set. Organized into small groups of foreground, background, and border tokens, \nexpressive tokens work in tandem to produce aesthetically pleasing and accessible user interfaces.\n\n### Default\n\nThe default group consists of low contrast backgrounds with complimenting fg and border colors.\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-expressive-color-bg` | #F8F6FE | Subtle background color |\n| `bm-expressive-color-bg-stronger` | #EAE5FB | Stronger background color |\n| `bm-expressive-color-fg` | #6E49DF | For foreground elements like text and icons. Use with expressive bgs. May also be used with semantic surfaces  |\n| `bm-expressive-color-fg-stronger` | #592FDA | For foreground elements like text and icons. Use with expressive bgs. May also be used with semantic surfaces  |\n| `bm-expressive-color-border` | #DCD3F8 | Subtle border color. Use with expressive bgs. May also be used with semantic surfaces  |\n| `bm-expressive-color-border-stronger` | #6E49DF | Strong border color. Use with expressive bgs. May also be used with semantic surfaces  |\n\n### Inverse\n\nThe inverse group consists of a high contrast background with complimenting fg colors.\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-expressive-color-inverse-bg` | #6E49DF | High contrast background color |\n| `bm-expressive-color-inverse-fg` | #EAE5FB | For foreground elements like text and icons. Use with expressive inverse-bg |\n| `bm-expressive-color-inverse-fg-stronger` | #ffffff | For foreground elements like text and icons. Use with expressive inverse-bg |\n\n# Data Visualization\n\nData visualization colors utilize Beam's color palette and is optimized for accessibility and maximizing data readability.\n\n[Learn more](/?path=/docs/concepts-data-visualization--docs) about using data visualization tokens.\n\n### Single Color\n\nFor data visualization requiring only one color that's not an alert. This color will match the themes accent color.\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-dataviz-color-primary` | #00859E | Use when only one color is required |\n| `bm-dataviz-color-neutral` | #8697A5 | Use for neutral content or to deemphasis data |\n\n### Categorical\n\nCategorical palettes use different colors to distinguish between 2 or more different categories.\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-dataviz-color-categorical-1` | #592FDA | For 2 or more categories. Apply in the order provided |\n| `bm-dataviz-color-categorical-2` | #CF3FAC | For 2 or more categories. Apply in the order provided |\n| `bm-dataviz-color-categorical-3` | #0095E0 | For 2 or more categories. Apply in the order provided |\n| `bm-dataviz-color-categorical-4` | #DC383C | For 2 or more categories. Apply in the order provided |\n| `bm-dataviz-color-categorical-5` | #9E7700 | For 2 or more categories. Apply in the order provided |\n| `bm-dataviz-color-categorical-6` | #005B75 | For 2 or more categories. Apply in the order provided |\n| `bm-dataviz-color-categorical-7` | #941E00 | For 2 or more categories. Apply in the order provided |\n| `bm-dataviz-color-categorical-8` | #208E3F | For 2 or more categories. Apply in the order provided |\n\n### Alert\n\nAlert colors are used to reflect status or severity within the data.\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-dataviz-color-alert-positive` | #24A148 | Communicates positive data |\n| `bm-dataviz-color-alert-positive-strong` | #187C36 | Communicates positive data |\n| `bm-dataviz-color-alert-caution` | #B88A00 | Communicates caution data |\n| `bm-dataviz-color-alert-caution-strong` | #8E6800 | Communicates caution data |\n| `bm-dataviz-color-alert-warning` | #EB6200 | Communicates warning data |\n| `bm-dataviz-color-alert-warning-strong` | #AC4902 | Communicates warning data |\n| `bm-dataviz-color-alert-negative` | #ED464C | Communicates negative data |\n| `bm-dataviz-color-alert-negative-strong` | #CC2429 | Communicates negative data |\n\n### Sequential\n\nSequential data visualization is the use of a single color from light to dark and is used to show low\nto high values using a continuous scale. In light themes, the darkest color denotes the largest values.\nIn dark themes, the lightest color denotes the largest values.\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-dataviz-color-sequential-opt1-10` | #D7F4F9 | Use to show low to high binned data values |\n| `bm-dataviz-color-sequential-opt1-20` | #B2E7F0 | Use to show low to high binned data values |\n| `bm-dataviz-color-sequential-opt1-30` | #8CD8E6 | Use to show low to high binned data values |\n| `bm-dataviz-color-sequential-opt1-40` | #43BFD6 | Use to show low to high binned data values |\n| `bm-dataviz-color-sequential-opt1-50` | #00A2C0 | Use to show low to high binned data values |\n| `bm-dataviz-color-sequential-opt1-60` | #00859E | Use to show low to high binned data values |\n| `bm-dataviz-color-sequential-opt1-70` | #00768F | Use to show low to high binned data values |\n| `bm-dataviz-color-sequential-opt1-80` | #005B75 | Use to show low to high binned data values |\n\n### Diverging\n\nDiverging colors are used to display data that varies from a central point. It's similar to a sequential\ncolor scheme, but instead of showing just one progression, it can represent two distinct ranges\n(such as positive & negative) or the spread of a measure between two different categories.\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-dataviz-color-diverging-opt1-10` | #00414D | Use to display general data that varies from a central point |\n| `bm-dataviz-color-diverging-opt1-20` | #00768F | Use to display general data that varies from a central point |\n| `bm-dataviz-color-diverging-opt1-30` | #00A2C0 | Use to display general data that varies from a central point |\n| `bm-dataviz-color-diverging-opt1-40` | #8CD8E6 | Use to display general data that varies from a central point |\n| `bm-dataviz-color-diverging-opt1-50` | #D7F4F9 | Use to display general data that varies from a central point |\n| `bm-dataviz-color-diverging-opt1-mid` | #FFF3EB | Use to display general data that varies from a central point |\n| `bm-dataviz-color-diverging-opt1-60` | #EAE5FB | Use to display general data that varies from a central point |\n| `bm-dataviz-color-diverging-opt1-70` | #C8BAF3 | Use to display general data that varies from a central point |\n| `bm-dataviz-color-diverging-opt1-80` | #977DE8 | Use to display general data that varies from a central point |\n| `bm-dataviz-color-diverging-opt1-90` | #6E49DF | Use to display general data that varies from a central point |\n| `bm-dataviz-color-diverging-opt1-100` | #3F1DA6 | Use to display general data that varies from a central point |\n| `bm-dataviz-color-diverging-opt2-10` | #7E1E21 | Use to display data that varies from a central point. This palettte works well for representing temperature ranges |\n| `bm-dataviz-color-diverging-opt2-20` | #CC2429 | Use to display data that varies from a central point. This palettte works well for representing temperature ranges |\n| `bm-dataviz-color-diverging-opt2-30` | #ED464C | Use to display data that varies from a central point. This palettte works well for representing temperature ranges |\n| `bm-dataviz-color-diverging-opt2-40` | #FBA6A9 | Use to display data that varies from a central point. This palettte works well for representing temperature ranges |\n| `bm-dataviz-color-diverging-opt2-50` | #FEE6E7 | Use to display data that varies from a central point. This palettte works well for representing temperature ranges |\n| `bm-dataviz-color-diverging-opt2-mid` | #FFF6E1 | Use to display data that varies from a central point. This palettte works well for representing temperature ranges |\n| `bm-dataviz-color-diverging-opt2-60` | #CCF0FF | Use to display data that varies from a central point. This palettte works well for representing temperature ranges |\n| `bm-dataviz-color-diverging-opt2-70` | #64CEFB | Use to display data that varies from a central point. This palettte works well for representing temperature ranges |\n| `bm-dataviz-color-diverging-opt2-80` | #0095E0 | Use to display data that varies from a central point. This palettte works well for representing temperature ranges |\n| `bm-dataviz-color-diverging-opt2-90` | #006EAD | Use to display data that varies from a central point. This palettte works well for representing temperature ranges |\n| `bm-dataviz-color-diverging-opt2-100` | #003F73 | Use to display data that varies from a central point. This palettte works well for representing temperature ranges |\n\n### Miscellaneous\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-dataviz-color-border` | #ffffff | Visual separator between and around data |\n| `bm-dataviz-color-border-inverse` | #202E39 | Visual separator between and around data |\n| `bm-dataviz-opacity-area` | 0.16 | Use for area charts to reduce the opacity of the area under the line |"
    },
    {
      "title": "Tokens/Border Width",
      "slug": "tokens-border-width",
      "description": "Border-width tokens define the width of borders in a consistent and flexible manner.",
      "type": "mdx",
      "mdxContent": "# Border Width\n\nBorder-width tokens define the width of borders in a consistent and flexible manner. \n\n### General Usage\n\nGeneral t-shirt size tokens allow for controlled flexibility however, explicit tokens should be applied if available.\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-sem-border-width-none` | 0 |  |\n| `bm-sem-border-width-md` | 0.063rem | Default |\n| `bm-sem-border-width-lg` | 0.125rem |  |\n| `bm-sem-border-width-xl` | 0.25rem |  |\n\n### Misc\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-sem-border-width-focus` | 0.125rem | Border-width for focused elements |\n| `bm-sem-border-width-selected` | 0.125rem | Border-width for selected elements |\n| `bm-sem-border-width-input` | 0.063rem | For text fields, selects, checkboxes, radio buttons |\n| `bm-sem-border-width-action` | 0.063rem | For action elements like buttons and chips |"
    },
    {
      "title": "Tokens/Border Radius",
      "slug": "tokens-border-radius",
      "description": "Use radius tokens to change the border-radius dimensions on a component or shape. Common examples are containers, cards, buttons, badges, chips and more. Border-radius size varies depending on the com",
      "type": "mdx",
      "mdxContent": "# Border Radius\n\nUse radius tokens to change the border-radius dimensions on a component or shape.\nCommon examples are containers, cards, buttons, badges, chips and more.\nBorder-radius size varies depending on the component type and size.\n\n### General Usage\n\nT-shirt size tokens allows for controlled flexibility, however contextual tokens should be applied if available.\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-sem-radius-none` | 0 | Use for navigation containers such as headers and side-panels |\n| `bm-sem-radius-xs` | 0.125rem | For small elements such as checkboxes |\n| `bm-sem-radius-sm` | 0.25rem | For elements with a small amount of content |\n| `bm-sem-radius-md` | 0.5rem | For inner containers on  consumer apps. For inner AND outer containers on enterprise apps |\n| `bm-sem-radius-lg` | 1rem | Use for outer containers on consumer apps |\n| `bm-sem-radius-round` | 624.938rem | Use for round shapes like avatars |\n\n### Input\n\nUse for actions like buttons and chips.\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-sem-radius-input-sm` | 0.125rem | Use for checkboxes |\n| `bm-sem-radius-input-md` | 0.25rem | Can be used for inputs lik text field and select  |\n| `bm-sem-radius-input-lg` | 624.938rem | Can be used for elements like radio button and switch |\n\n### Focus\n\nWhen an interactive element does not have a radius, focus radius tokens can be used to create a rounded treatment.\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-sem-radius-focus-sm` | 0.125rem | Use for checkboxes |\n| `bm-sem-radius-focus-md` | 0.25rem | Can be used for inputs, selects and search |\n| `bm-sem-radius-focus-lg` | 624.938rem | Can be used for radio buttons and search |"
    },
    {
      "title": "Migrations/v2.35.0 to v2.36.0",
      "slug": "migrations-v2-35-0-to-v2-36-0",
      "description": "Extended Collections reworks how Beam builds its brand themes. Two things came out of it: the generated stylesheets got a lot smaller, and a handful of token names changed along the way.",
      "type": "mdx",
      "mdxContent": "# Migrating to v2.36.0\n\nExtended Collections reworks how Beam builds its brand themes. Two things came out of it: the generated stylesheets got a lot smaller, and a handful of token names changed along the way.\n\nIf you only use Beam through its components, there's very little here for you, since the components were updated to match. If you reference tokens directly in your own styles, as CSS variables or as Sass variables, spend a few minutes on the rest of this before you pull the change in.\n\n### The stylesheets got smaller\n\nUntil now, every brand carried its own private copy of the full color palette. In the `onefi` bundle, that meant carrying 532 brand-specific primitive colors and 355 utility colors that did not need to live in each brand theme file. Extended Collections moves those raw values into shared collections, so a brand theme now points at the shared values instead of restating them.\n\nFor the `onefi` bundle, that works out to:\n\n|         |   Before |    After |\n| ------- | -------: | -------: |\n| Lines   |    7,038 |    3,755 |\n| Raw     | 248.6 KB | 154.2 KB |\n| Gzipped |  20.6 KB |  12.9 KB |\n\nSo roughly 38% smaller overall, and about 7.7 KB off the gzipped payload your users actually download.\n\nNothing looks different. The colors resolve to exactly the same values; we only removed a layer of indirection. A brand color that used to read:\n\n```css\n--bm-theme-color-brand-500: var(\n  --bm-primitive-color-org-aeromexico-blue-500,\n  #77a9fd\n);\n--bm-primitive-color-org-aeromexico-blue-500: rgb(119, 169, 253);\n```\n\nnow just reads:\n\n```css\n--bm-theme-color-brand-500: rgb(119, 169, 253);\n```\n\nWe also checked the generated output for dangling variable references and confirmed the existing typography e2e suite still passes.\n\n## What might break, and what to do about it\n\nThe size win is invisible to your code. What can actually bite you are the tokens that got renamed or removed.\n\n### Two families were renamed\n\nThe product-shape tokens moved out of the `utility-comp` namespace into `alias`, and `btn` became `action` on the way. There are twelve of them:\n\n| Old                                       | New                                  |\n| ----------------------------------------- | ------------------------------------ |\n| `--bm-utility-comp-btn-radius-container`  | `--bm-alias-action-radius-container` |\n| `--bm-utility-comp-btn-radius-focus`      | `--bm-alias-action-radius-focus`     |\n| `--bm-utility-comp-btn-space-sm-x`        | `--bm-alias-action-space-sm-x`       |\n| `--bm-utility-comp-btn-space-md-x`        | `--bm-alias-action-space-md-x`       |\n| `--bm-utility-comp-btn-space-lg-x`        | `--bm-alias-action-space-lg-x`       |\n| `--bm-utility-comp-chip-radius-container` | `--bm-alias-chip-radius-container`   |\n| `--bm-utility-comp-chip-radius-focus`     | `--bm-alias-chip-radius-focus`       |\n| `--bm-utility-comp-chip-space-sm-x`       | `--bm-alias-chip-space-sm-x`         |\n| `--bm-utility-comp-chip-space-md-x`       | `--bm-alias-chip-space-md-x`         |\n| `--bm-utility-comp-chip-space-lg-x`       | `--bm-alias-chip-space-lg-x`         |\n| `--bm-utility-comp-badge-radius`          | `--bm-alias-badge-radius`            |\n| `--bm-utility-comp-badge-space-x`         | `--bm-alias-badge-space-x`           |\n\nThe whole `utility-color` color-ramp family was also renamed to `alias-color-ramp`. That one is mechanical: `--bm-utility-color--` becomes `--bm-alias-color-ramp--`, with a single wrinkle: the step that used to be `default` is now `base`.\n\nEvery other step name carries over unchanged, and so do all twelve palettes: `accent`, `accent-secondary`, `blue`, `gray`, `green`, `lime`, `orange`, `pink`, `red`, `teal`, `violet`, and `warm`.\n\nSo:\n\n```css\n--bm-utility-color-accent-default\n```\n\nis now:\n\n```css\n--bm-alias-color-ramp-accent-base\n```\n\nSame color, new name.\n\n### A few tokens are simply gone\n\n| Removed                                                       | What to use instead                                                       |\n| ------------------------------------------------------------- | ------------------------------------------------------------------------- |\n| `--bm-sem-radius-action-lg`, `--bm-sem-radius-action-md`      | `--bm-sem-radius-action-default` (check the value looks right)            |\n| `--bm-theme-color-brand-1200`                                 | The extra-dark step is gone; `--bm-theme-color-brand-1100` is the nearest |\n| `--bm-primitive-color-org--*` (the 532 raw primitives) | These were internal; reach for `--bm-theme-color-brand-*` instead         |\n\n### Load order matters\n\nBrand theme files no longer carry the primitive palette themselves. Load the base file first, then the brand theme.\n\n```css\n@import '@viasat/beam-tokens/tokens.css';\n@import '@viasat/beam-tokens/themes/onefi.css';\n```\n\nIf you load a brand theme on its own, it falls back to inline defaults rather than the real palette.\n\nTo find anything in your own code that needs updating:\n\n```bash\ngrep -rEn \"bm-(utility-comp|utility-color|primitive-color-org)-|bm-sem-radius-action-(lg|md)|bm-theme-color-brand-1200\" src/\n```\n\nBecause the pattern searches for the shared `bm-*` token name, it catches both CSS variable usage and Sass variable usage.\n\n### A heads-up for Sass users\n\nIf you pull tokens in as Sass variables (`@use '@viasat/beam-tokens/tokens.scss' as tokens` and then `tokens.$bm-…`), the same renames apply, but the failure mode is louder.\n\nA removed Sass variable doesn't fall back to anything. It stops the build with an `Undefined variable` error, and Sass gives up at the first one it hits. The Sass name is just the CSS variable name with a `$` in front, so everything above translates directly:\n\n```scss\ntokens.$bm-utility-color-accent-default\n```\n\nbecomes:\n\n```scss\ntokens.$bm-alias-color-ramp-accent-base\n```\n\nWe ran into this ourselves while building the change. The Beam styles library used `tokens.$bm-utility-color-accent-default` for the slider's focus ring, and the styles build refused to compile until we pointed it at `tokens.$bm-alias-color-ramp-accent-base`: the same color, just the current name.\n\nIf you have any `.scss` consuming Beam tokens, grep before you upgrade rather than finding out at build time.\n\n### New tokens worth knowing about\n\nA few things were added that you can start using:\n\n- `--bm-alias-color-brand-primary-default` and `--bm-alias-color-brand-secondary-default` are the canonical, theme-aware way to reach a brand's primary and secondary color.\n- The `--bm-alias-color-ramp--` system is the new home for ramp colors. It includes 120 tokens across twelve palettes.\n- Ramp steps run `subtlest`, `subtler`, `subtle`, `mute`, `muter`, `base`, `strong`, `stronger`, `strongest`, and `inverse`.\n- New action semantics: `--bm-sem-color-action-primary-hover`, `--bm-sem-color-action-primary-active`, `--bm-sem-color-action-secondary`, and `--bm-sem-radius-action-default`.\n\n### Migration summary\n\nFor most teams, this should be a small migration:\n\n1. Update renamed direct token references.\n2. Replace the few removed tokens.\n3. Confirm `tokens.css` loads before the brand theme.\n\nComponent-only consumers should not need code changes.\n\n---\n\nThe size figures are for the `onefi` bundle. The renames and removals apply across every theme, and to both CSS-variable and Sass consumers. Everything here came out of comparing the current token output against the previous build."
    },
    {
      "title": "Hidden/DataViz",
      "slug": "hidden-dataviz",
      "description": "Data visualization colors utilize Beam's color palette and is optimized for accessibility and maximizing data readability.",
      "type": "mdx",
      "mdxContent": "# Data Visualizations\n\nData visualization colors utilize Beam's color palette and is optimized for accessibility and maximizing data readability.\n\n## Data Visualization Types\n\n- Single-color\n- Categorical\n- Alert\n- Sequential\n- Diverging\n\n### Single Color\n\nFor data visualization requiring only one color that's not an alert. This color will match the themes accent color.\n\n- Use `bm-dataviz-color-primary` for the main color\n- Use `bm-dataviz-color-neutral` with `bm-dataviz-color-primary` in instances where one piece of data needs to be highlighted\n\n#### Accessibility\n\nColors pass 3:1 contrast ratio requirements on `surface-00`, `surface-00-alt` and `surface-01`.\n\n![Single-color data visualization example](/dv-single-color.png)\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-dataviz-color-primary` | #00859E | Use when only one color is required |\n| `bm-dataviz-color-neutral` | #8697A5 | Use for neutral content or to deemphasis data |\n\n### Categorical\n\nCategorical palettes use different colors to distinguish between 2 or more different categories.\n\n- Colors should be applied in **the exact order they are provided** to ensure optimum contrast between adjacent colors.\n- It's recommended to use **no more than five categorical** colors as six or more become increasingly difficult to to interpret.\n\n#### Accessibility\n\nColors pass 3:1 contrast ratio requirements on `surface-00`, `surface-00-alt` and `surface-01`. While we've carefully\nselected colors to be as accessible as possible for those with color blindness, it's impossible to create a range\nthat guarantees a 3:1 contrast ratio against backgrounds and is universally effective across the full spectrum of\ncolor vision deficiencies. Therefore, to ensure clarity for all users, **charts should differentiate items using more\nthan just color, such as incorporating distinct shapes or patterns.**\n\n![Categorical data visualization example](/dv-categorical.png)\n\n\\*_For area chart backgrounds, use `bm-dataviz-opacity-area` in conjunction with the corresponding dataviz color,\nthis will apply an opacity to the color. The area should always have the surface color directly below and not\ninherit from other colors in the chart._\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-dataviz-color-categorical-1` | #592FDA | For 2 or more categories. Apply in the order provided |\n| `bm-dataviz-color-categorical-2` | #CF3FAC | For 2 or more categories. Apply in the order provided |\n| `bm-dataviz-color-categorical-3` | #0095E0 | For 2 or more categories. Apply in the order provided |\n| `bm-dataviz-color-categorical-4` | #DC383C | For 2 or more categories. Apply in the order provided |\n| `bm-dataviz-color-categorical-5` | #9E7700 | For 2 or more categories. Apply in the order provided |\n| `bm-dataviz-color-categorical-6` | #005B75 | For 2 or more categories. Apply in the order provided |\n| `bm-dataviz-color-categorical-7` | #941E00 | For 2 or more categories. Apply in the order provided |\n| `bm-dataviz-color-categorical-8` | #208E3F | For 2 or more categories. Apply in the order provided |\n\n  > **Note:** Colors should be applied in the exact order they are provided to ensure optimum contrast between adjacent colors\n\n### Alert\n\nAlert colors are used to reflect status or severity within the data.\n\n- Use already established **semantic tokens** for text and icons\n- Use **dataviz-alert tokens** for chart data visualization elements like lines and bars\n\n#### Accessibility\n\nColors pass 3:1 contrast ratio requirements on `surface-00`, `surface-00-alt` and `surface-01`.\nHowever, using multiple alert colors within a single chart can make it difficult for users with\ncolor vision deficiencies to distinguish between. To ensure charts are accessible, always\nincorporate other visual indicators like shapes or patterns or consider using categorical colors instead.\n\n![Alert data visualization example](/dv-alert.png)\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-dataviz-color-alert-positive` | #24A148 | Communicates positive data |\n| `bm-dataviz-color-alert-positive-strong` | #187C36 | Communicates positive data |\n| `bm-dataviz-color-alert-caution` | #B88A00 | Communicates caution data |\n| `bm-dataviz-color-alert-caution-strong` | #8E6800 | Communicates caution data |\n| `bm-dataviz-color-alert-warning` | #EB6200 | Communicates warning data |\n| `bm-dataviz-color-alert-warning-strong` | #AC4902 | Communicates warning data |\n| `bm-dataviz-color-alert-negative` | #ED464C | Communicates negative data |\n| `bm-dataviz-color-alert-negative-strong` | #CC2429 | Communicates negative data |\n\n### Sequential\n\nSequential data visualization is the use of a single color from light to dark and is used to show low\nto high values using a continuous scale. In light themes, the darkest color denotes the largest values.\nIn dark themes, the lightest color denotes the largest values.\n\nThe sequential scale can be **binned** or **linear**, which one you use will depend on how your data is distributed.\n\n  \n    ![Binned scale example](/dv-binned-scale.png)\n    \n      Binned scale: Binned color scales use a set number of distinct\n      color categories, with each category representing a specific range of data\n      values.\n    \n  \n  \n    ![Linear scale example](/dv-linear-scale.png)\n    \n      Linear scale: Linear color scales smoothly transitions through\n      shades, much like a gradient, where the color change corresponds to the data's\n      value.\n    \n  \n\n#### Accessibility\n\nThe sequential palette contains some lower contrast colors that do not meet 3:1 ratio with the background.\nBeam follows [IBM's research](https://medium.com/carbondesign/color-palettes-and-accessibility-features-for-data-visualization-7869f4874fca)\non accessibility which concluded that sequential visualizations should utilize\na balanced range of light and dark values to maximize data readability, as this strengthens the distinction\nbetween data points. When background contrast is prioritized too heavily, it can actually decrease the overall\naccessibility of the visualization to all users. To counter this, features such 3:1 contrast-accessible axes and\noutlines should be always be used.\n\n![Sequential gradient example](/dv-sequential-gradient.png)\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-dataviz-color-sequential-opt1-10` | #D7F4F9 | Use to show low to high binned data values |\n| `bm-dataviz-color-sequential-opt1-20` | #B2E7F0 | Use to show low to high binned data values |\n| `bm-dataviz-color-sequential-opt1-30` | #8CD8E6 | Use to show low to high binned data values |\n| `bm-dataviz-color-sequential-opt1-40` | #43BFD6 | Use to show low to high binned data values |\n| `bm-dataviz-color-sequential-opt1-50` | #00A2C0 | Use to show low to high binned data values |\n| `bm-dataviz-color-sequential-opt1-60` | #00859E | Use to show low to high binned data values |\n| `bm-dataviz-color-sequential-opt1-70` | #00768F | Use to show low to high binned data values |\n| `bm-dataviz-color-sequential-opt1-80` | #005B75 | Use to show low to high binned data values |\n\n### Diverging\n\nDiverging colors are used to display data that varies from a central point. It's similar to a sequential color scheme,\nbut instead of showing just one progression, it can represent two distinct ranges (such as positive & negative) or the spread of a measure between two different categories.\nDiverging palettes do not change between light and dark themes.\n\n- **Option 1:** The purple/teal palette can be used for other broader data, like satisfaction levels or profit and loss\n- **Option 2:** The blue/red palette has a connection with cold/hot so is good for representing temperature ranges\n\n#### Accessibility\n\nDiverging palettes contains some lower contrast colors that don't meet 3:1 ratio with the background. This follows the\nsame accessibility rational as sequential colors. [Learn more](#accessibility-3)\n\n![Diverging gradient example](/dv-diverging-gradient.png)\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-dataviz-color-diverging-opt1-10` | #00414D | Use to display general data that varies from a central point |\n| `bm-dataviz-color-diverging-opt1-20` | #00768F | Use to display general data that varies from a central point |\n| `bm-dataviz-color-diverging-opt1-30` | #00A2C0 | Use to display general data that varies from a central point |\n| `bm-dataviz-color-diverging-opt1-40` | #8CD8E6 | Use to display general data that varies from a central point |\n| `bm-dataviz-color-diverging-opt1-50` | #D7F4F9 | Use to display general data that varies from a central point |\n| `bm-dataviz-color-diverging-opt1-mid` | #FFF3EB | Use to display general data that varies from a central point |\n| `bm-dataviz-color-diverging-opt1-60` | #EAE5FB | Use to display general data that varies from a central point |\n| `bm-dataviz-color-diverging-opt1-70` | #C8BAF3 | Use to display general data that varies from a central point |\n| `bm-dataviz-color-diverging-opt1-80` | #977DE8 | Use to display general data that varies from a central point |\n| `bm-dataviz-color-diverging-opt1-90` | #6E49DF | Use to display general data that varies from a central point |\n| `bm-dataviz-color-diverging-opt1-100` | #3F1DA6 | Use to display general data that varies from a central point |\n| `bm-dataviz-color-diverging-opt2-10` | #7E1E21 | Use to display data that varies from a central point. This palettte works well for representing temperature ranges |\n| `bm-dataviz-color-diverging-opt2-20` | #CC2429 | Use to display data that varies from a central point. This palettte works well for representing temperature ranges |\n| `bm-dataviz-color-diverging-opt2-30` | #ED464C | Use to display data that varies from a central point. This palettte works well for representing temperature ranges |\n| `bm-dataviz-color-diverging-opt2-40` | #FBA6A9 | Use to display data that varies from a central point. This palettte works well for representing temperature ranges |\n| `bm-dataviz-color-diverging-opt2-50` | #FEE6E7 | Use to display data that varies from a central point. This palettte works well for representing temperature ranges |\n| `bm-dataviz-color-diverging-opt2-mid` | #FFF6E1 | Use to display data that varies from a central point. This palettte works well for representing temperature ranges |\n| `bm-dataviz-color-diverging-opt2-60` | #CCF0FF | Use to display data that varies from a central point. This palettte works well for representing temperature ranges |\n| `bm-dataviz-color-diverging-opt2-70` | #64CEFB | Use to display data that varies from a central point. This palettte works well for representing temperature ranges |\n| `bm-dataviz-color-diverging-opt2-80` | #0095E0 | Use to display data that varies from a central point. This palettte works well for representing temperature ranges |\n| `bm-dataviz-color-diverging-opt2-90` | #006EAD | Use to display data that varies from a central point. This palettte works well for representing temperature ranges |\n| `bm-dataviz-color-diverging-opt2-100` | #003F73 | Use to display data that varies from a central point. This palettte works well for representing temperature ranges |\n\n### Miscellaneous\n\n| Token | Value | Description |\n|-------|-------|-------------|\n| `bm-dataviz-color-border` | #ffffff | Visual separator between and around data |\n| `bm-dataviz-color-border-inverse` | #202E39 | Visual separator between and around data |\n| `bm-dataviz-opacity-area` | 0.16 | Use for area charts to reduce the opacity of the area under the line |\n\n### General Usage Guidelines\n\n- Don't rely solely on color:\n  - **Shapes:** Use different shapes for different categories\n  - **Patterns/Textures:** Use varying patterns or textures within bars or areas\n  - **Line styles:** Solid, dashed, dotted lines for different trends\n  - **Labels/Text:** Additional label for data points or segments (but never directly on the element)\n- Only use data visualization colors on `surface-00`, `surface-00-alt` or `surface-01`\n- Ensure axis meet 3:1 contrast requirements by using `border-strong` color token\n- Ensure all text _(title, label, legend)_ is large enough to read; a minimum of 12px should be used\n- Don't put text directly on data visualization elements"
    },
    {
      "title": "Concepts/Component Lifecycle",
      "slug": "concepts-component-lifecycle",
      "description": "Beam 3 components have a predetermined set of requirements and expectations that define each stage of their lifespan. View status for all components [here](/docs/concepts-component-status--docs).",
      "type": "mdx",
      "mdxContent": "# Component Lifecycle\n\n  Beam 3 components have a predetermined set of requirements and expectations that\n  define each stage of their lifespan. View status for all components\n  [here](/docs/concepts-component-status--docs).\n\n  > **Warning:** There will be limited support for Beam 2 components as Beam 3 replacement components become available. Component Lifecycle requirements and expectations included in this document do not apply to Beam 2 components.\n\n---\n\n### Alpha\n\nThe component is new. Bugs are likely.\n\n**Meets these requirements:**\n\n- Design component is available\n- Technical docs with examples are available in Storybook\n- Component has been tested in Chrome\n- Design meets Level AA accessibility standards\n- Code partially meets Level AA accessibility standards\n\n**Expectations:**\n\n- Potential bugs\n\n---\n\n### Beta\n\nThe component is fully supported.\n\n**Meets these requirements:**\n\n- Design component is available\n- Technical docs with examples are available in Storybook\n- Cross browser tested\n- Automated testing available\n- Cross framework tested (Next.JS, Vite)\n- Design meets Level AA accessibility standards\n- Code mostly meets Level AA accessibility standards\n- Code Connect is available in Figma Dev Mode (In progress)\n\n**Expectations:**\n\n- Less bugs\n\n---\n\n### Stable\n\nThe component is fully supported. Long-term support is expected.\n\n**Meets these requirements:**\n\n- Design component is available\n- Technical docs with examples are available in Storybook\n- Cross browser tested\n- Automated testing available\n- Cross framework tested (Next.JS, Vite)\n- Design and code meets Level AA accessibility standards\n- Code Connect is available in Figma Dev Mode (In progress)\n\n**Expectations:**\n\n- No breaking changes\n- Long term support\n- Minimal bugs\n\n---\n\n### Deprecated\n\nThe component is no longer supported. The use of deprecated components is highly discouraged once a new replacement components is available. \n\n**Meets these requirements:**\n\n- The component has been clearly marked as Deprecated\n\n**Expectations:**\n\n- Product teams are encouraged to replace Deprecated components as new components become available to avoid future tech debt\n\n---\n\n### Removed\n\nThe component is no longer available.\n\n**Meets these requirements:**\n\n- The removal date has been announced at least one month prior to the release date of the package that will remove the component"
    },
    {
      "title": "Concepts/Using Beam with AI",
      "slug": "concepts-using-beam-with-ai",
      "description": "The `@viasat/beam-react-claude-plugin` is the recommended way to use Claude with Beam. Once installed, Claude gets direct, structured access to component props, stories, and concept docs through the B",
      "type": "mdx",
      "mdxContent": "# Using Beam with AI\n\nThe `@viasat/beam-react-claude-plugin` is the recommended way to use Claude with Beam. Once installed, Claude gets direct, structured access to component props, stories, and concept docs through the Beam MCP server, allowing it to pull from Beam's own sources rather than guessing.\n\n---\n\n### Installing the plugin\n\nAll `/plugin` commands are Claude Code slash commands. Run them inside the Claude Code CLI, not in a raw terminal, the desktop app, or the VS Code Claude extension.\n\nBefore installing, make sure `@viasat/beam-react` is installed in your project and updated to the latest version. The plugin ships pinned to the same version as `@viasat/beam-react`, so installing it against an outdated `@viasat/beam-react` gives you an outdated plugin and MCP.\n\nThe plugin ships as a declared dependency of `@viasat/beam-react` so no separate `npm install` is needed. Run these two commands inside the Claude Code CLI:\n\n```\n/plugin marketplace add ./node_modules/@viasat/beam-react-claude-plugin\n/plugin install beam-react-claude-plugin@beam\n```\n\nThen run `/reload-plugins`.\n\n---\n\n### Updating the plugin\n\nRun `/beam-update` inside the Claude Code CLI. Claude detects whether an update is available, surfaces what changed, and handles the npm + plugin cache update. The only step you take is `/reload-plugins` at the end.\n\nWhen the update crosses a version with a migration guide, Claude also surfaces the relevant guides, scans your code for anything the migration affects, and offers to apply the necessary changes for you before you reload, so you're not left to work out the impact on your own.\n\n---\n\n### What you get\n\nInside any project that has `@viasat/beam-react` in its dependencies, Claude activates a `beam-ui` skill automatically. Ask Claude to build or modify Beam UI and it handles the rest, no extra prompting needed.\n\nThe plugin also starts the `@viasat/beam-react-mcp` server in the background. This gives Claude tool-level access to component props, story examples, and concept documentation.\n\n---\n\n### Not using Claude Code?\n\nIf you're on a different editor, the MCP server runs on its own without the plugin. See [`@viasat/beam-react-mcp`](https://www.npmjs.com/package/@viasat/beam-react-mcp).\n\nAs a fallback, you can also paste Beam's `llms.txt` URL into your AI tool's context or system prompt before asking Beam-related questions:\n\n**Beam React `llms.txt`:** `https://react.beam.viasat.com/llms.txt`\n\nSome tools won't follow links inside `llms.txt` automatically, so include an instruction to read the file and follow any links it references.\n\n---\n\n### Tips\n\n- The plugin handles prop names and imports automatically, so focus on describing what you want to build rather than asking Claude to double-check them.\n- Name the component explicitly when you know it. \"Use a Beam `TextField`\" is clearer than \"use an input,\" and Claude will find the right variant and props.\n- Verify behavior in Storybook before shipping. The MCP gives Claude accurate docs, but a quick visual check catches things docs can't (layout, spacing, responsive behavior, accessibility)."
    },
    {
      "title": "Concepts/Styling",
      "slug": "concepts-styling",
      "description": "Beam is built on a **token-driven** architecture where design decisions flow from centralized tokens into component styles. This guide covers how styling works in Beam and the various ways you can cus",
      "type": "mdx",
      "mdxContent": "# Styling\n\nBeam is built on a **token-driven** architecture where design decisions flow from centralized tokens into component styles. This guide covers how styling works in Beam and the various ways you can customize it.\n\n### How Beam Styling Works\n\nBeam's styling system is layered:\n\n1. **Design Tokens** (`@viasat/beam-tokens`) — The foundation. Colors, spacing, typography, and component-specific values defined as CSS custom properties.\n2. **Component Styles** (`@viasat/beam-styles`) — SCSS modules that consume tokens and define component appearance.\n3. **React Components** (`@viasat/beam-react`) — Ship with pre-compiled CSS, so you get styling out of the box.\n\nFor most users, simply importing the pre-compiled CSS is all you need. For advanced customization, you can work at any layer.\n\n### Quick Start: Pre-compiled CSS\n\nThe simplest approach—just import the compiled styles:\n\n```ts\n// Base styles and component CSS\nimport '@viasat/beam-tokens/styles.css';\n\n// Fonts\nimport '@viasat/beam-fonts/styles.css';\n```\n\nThis gives you everything you need with zero configuration. Components will render correctly with all design tokens applied.\n\n### Customizing with CSS Variables\n\nBeam exposes CSS custom properties (variables) that you can override to customize the look and feel without touching SCSS.\n\n#### Global Token Overrides\n\nOverride design tokens at the root level:\n\n```css\n:root {\n  /* Override brand color (used by accent buttons, links, etc.) */\n  --bm-theme-color-brand-700: #ff6b00;\n\n  /* Adjust spacing scale */\n  --bm-sem-space-100: 1rem;\n\n  /* Change default border radius */\n  --bm-sem-radius-md: 8px;\n}\n```\n\n#### Component-Level Overrides\n\nTarget specific components:\n\n```css\n/* Make all buttons more rounded */\n:root {\n  --bm-alias-action-radius-container: 999px;\n  /* Change accent filled button background color */\n  --bm-comp-btn-color-accent-filled-bg: #0066ff;\n}\n\n/* Customize shadows globally */\n:root {\n  --bm-sem-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);\n}\n```\n\n#### Scoped Theming\n\nApply different themes to sections of your app:\n\n```css\n.my-dark-section {\n  --bm-sem-color-surface-01: #1a1a1a;\n  --bm-sem-color-text-primary: #ffffff;\n}\n\n.my-high-contrast {\n  --bm-theme-color-brand-700: #0066ff;\n  --bm-sem-border-width-focus: 3px;\n}\n```\n\n### Using SCSS Directly\n\nFor advanced customization (creating variants, extending styles, or using Beam's mixins), you can import SCSS files directly from `@viasat/beam-styles`.\n\n#### When to Use SCSS\n\n- Creating custom component variants\n- Extending existing component styles with `@extend`\n- Using Beam's SCSS mixins and utility functions\n- Building components that need to match Beam's styling patterns\n\n#### Bundler Configuration Required\n\nBeam's SCSS files use internal path aliases like `@viasat/beam-tokens/components/Alert`. Your bundler must be configured to resolve these paths.\n\n##### Vite\n\nConfigure the Sass preprocessor in `vite.config.ts`:\n\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite';\nimport * as path from 'path';\nimport { pathToFileURL } from 'node:url';\n\nexport default defineConfig({\n  css: {\n    preprocessorOptions: {\n      scss: {\n        api: 'modern-compiler',\n        importers: [\n          {\n            findFileUrl(url: string): URL | null {\n              if (url.startsWith('@viasat/beam-tokens/')) {\n                const relativePath = url.replace('@viasat/beam-tokens/', '');\n                return pathToFileURL(\n                  path.resolve(\n                    'node_modules/@viasat/beam-tokens/src/lib',\n                    relativePath,\n                  ),\n                ) as URL;\n              }\n              return null;\n            },\n          },\n        ],\n      },\n    },\n  },\n});\n```\n\n##### Webpack\n\nConfigure `sass-loader` in your Webpack config:\n\n```js\n// webpack.config.js\nconst path = require('path');\nconst { pathToFileURL } = require('node:url');\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.scss$/,\n        use: [\n          'style-loader',\n          'css-loader',\n          {\n            loader: 'sass-loader',\n            options: {\n              api: 'modern-compiler',\n              sassOptions: {\n                importers: [\n                  {\n                    findFileUrl(url) {\n                      if (url.startsWith('@viasat/beam-tokens/')) {\n                        const relativePath = url.replace('@viasat/beam-tokens/', '');\n                        return pathToFileURL(\n                          path.resolve(\n                            __dirname,\n                            'node_modules/@viasat/beam-tokens/src/lib',\n                            relativePath,\n                          ),\n                        );\n                      }\n                      return null;\n                    },\n                  },\n                ],\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n##### Next.js\n\nAdd the Sass configuration to `next.config.js`:\n\n```js\n// next.config.js\nconst path = require('path');\nconst { pathToFileURL } = require('node:url');\n\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  sassOptions: {\n    api: 'modern-compiler',\n    importers: [\n      {\n        findFileUrl(url) {\n          if (url.startsWith('@viasat/beam-tokens/')) {\n            const relativePath = url.replace('@viasat/beam-tokens/', '');\n            return pathToFileURL(\n              path.resolve(\n                process.cwd(),\n                'node_modules/@viasat/beam-tokens/src/lib',\n                relativePath,\n              ),\n            );\n          }\n          return null;\n        },\n      },\n    ],\n  },\n};\n\nmodule.exports = nextConfig;\n```\n\n---\n\n#### SCSS Examples\n\n##### Extending Component Styles\n\n```css\n/* my-custom-button.scss */\n@use '@viasat/beam-styles/components/button.module';\n@use '@viasat/beam-styles/utils/mixins';\n\n.my-custom-button {\n  @extend .bm-button;\n\n  /* Add your custom styles */\n  border-radius: 999px;\n  text-transform: uppercase;\n}\n```\n\n##### Using Beam Tokens in SCSS\n\n```css\n@use '@viasat/beam-styles/utils/tokens' as tokens;\n\n.my-component {\n  /* Use semantic tokens */\n  padding: tokens.$bm-sem-space-100;\n  border-radius: tokens.$bm-sem-radius-md;\n  color: tokens.$bm-sem-color-text-primary;\n}\n```\n\n##### Using Component Token Variables\n\n```css\n/* Access component-specific token values */\n.my-button-wrapper {\n  /* Use CSS custom properties directly */\n  background: var(--bm-sem-color-surface-01);\n  border: var(--bm-sem-border-width-md) solid var(--bm-sem-color-border-01);\n}\n```\n\n---\n\n## Best Practices\n\n1. **Start with CSS variables** — Most customizations can be achieved by overriding CSS custom properties. This is the simplest and most maintainable approach.\n\n2. **Use SCSS for complex customizations** — Only reach for direct SCSS when you need mixins, `@extend`, or are building custom components that should match Beam's patterns.\n\n3. **Don't fight the system** — Beam's tokens are designed to work together. Override thoughtfully and test across themes.\n\n4. **Scope your overrides** — Use specific selectors or wrapper classes rather than globally overriding Beam's base tokens.\n\n5. **Keep bundler config in one place** — If using SCSS, centralize your importer configuration so it's easy to maintain."
    },
    {
      "title": "Introduction",
      "slug": "introduction",
      "description": "",
      "type": "mdx",
      "mdxContent": ""
    },
    {
      "title": "Getting Started",
      "slug": "getting-started",
      "description": "Beam 3 is a **headless**, **token-driven** component library built for modern React applications. It provides scalable components, accessible design tokens, and first-class support for cross-platform ",
      "type": "mdx",
      "mdxContent": "# Getting Started\n\nBeam 3 is a **headless**, **token-driven** component library built for modern React applications.\nIt provides scalable components, accessible design tokens, and first-class support for cross-platform development.\n\nThis guide helps you install and start using the Beam Design System in your React application.\n\n---\n\n### Installation\n\nInstall the Beam core packages:\n\n> When you install `@viasat/beam-react`, it automatically includes all necessary dependencies such as `@viasat/beam-icons`, `@viasat/beam-tokens`, and `@viasat/beam-fonts`.\n> These are available for import as needed.\n\n```bash\nnpm install @viasat/beam-react\n```\n\n---\n\n### Usage\n\nTo use Beam, import the base styles and fonts to ensure Beam components render correctly and with proper typography.\n\n#### 1. Import Tokens\n\nThis loads utility classes and per-component styles, enabling tree-shaking:\n\n```ts\nimport '@viasat/beam-tokens/styles.css';\n```\n\n#### 2. Import Fonts\n\nBeam provides its own font styles to maintain visual consistency:\n\n> Only one font import is needed, use this one for standard client-side rendering (CSR) only.\n\n```ts\n// CSR only, not needed for Next.js\nimport '@viasat/beam-fonts/styles.css';\n```\n\n### Setting Up Beam Fonts in Next.js\n\nTo ensure Beam's fonts are correctly integrated into your Next.js project, follow these steps:\n\n#### 1. Copy Beam Fonts to the `public/fonts` Directory\n\nAdd a `postinstall` script to your `package.json`. This ensures that Beam font files are copied to your public directory after every install.\n\n```json\n{\n  \"scripts\": {\n    \"postinstall\": \"cp -R node_modules/@viasat/beam-fonts/assets public/fonts\"\n  }\n}\n```\n\n#### 2. Run the Postinstall Script\n\nAfter adding the script, run the following command to copy the fonts. This will copy the Beam font files to your `public/fonts` directory.\n\n> This step is only necessary if you haven't already run the script.\n\n```bash\nnpm run postinstall\n# or\nnpm install\n```\n\n#### 3. Import Font Styles\n\nIn your `_app.tsx`, `_app.js` or `layout.tsx` file, import the font styles globally. This ensures Beam's font styles are applied application-wide.\n\n> Only one font import is needed, use this one for Next.js only.\n\n```ts\n// Next.js only, not needed for CSR\nimport '@viasat/beam-fonts/styles.nextjs.css';\n```\n\n### Example: Using a Component\n\nHere’s how to import and render a Beam component like `Button`:\n\n```tsx\nimport React from 'react';\nimport { Button } from '@viasat/beam-react/Button';\n\nimport '@viasat/beam-tokens/styles.css';\nimport '@viasat/beam-fonts/styles.css';\n\nexport default function App() {\n  return (\n    <Button appearance=\"accent\" onClick={() => alert('Clicked!')}>\n      Click me!\n    </Button>\n  );\n}\n```\n\n### Tree-shaking & Optimization\n\nBeam 3 is designed for performance. It supports full **tree-shaking** at both the JavaScript and CSS levels with zero extra config.\n\nHere's how it works:\n\n- **Component styles are split**: Each component includes only the styles it needs, so your final CSS bundle stays lean and focused.\n- **ESM-based tree-shaking**: Only the components you import are included in your JS bundle.\n- **Root-level imports are optimized**: Importing from `@viasat/beam-react` is tree-shakable and safe by default.\n- **Direct imports offer maximum control**: If you want the smallest possible bundle, you can import specific components directly:\n\nBeam ships with `sideEffects: false` and ESM output, so everything just works with modern build tools like **Vite**, **Webpack**, or **Next.js**.\n\n```ts\n// Standard usage is still optimized\nimport { Button } from '@viasat/beam-react';\n\n// Most granular usage\nimport Button from '@viasat/beam-react/Button';\n```"
    },
    {
      "title": "Concepts/Theming",
      "slug": "concepts-theming",
      "description": "Beam ships with a first-class theming system, implemented as a lightweight wrapper around [next-themes](https://github.com/pacocoursey/next-themes/tree/main), which lets you tailor the UI along three ",
      "type": "mdx",
      "mdxContent": "# Theming\n\nBeam ships with a first-class theming system, implemented as a lightweight wrapper around [next-themes](https://github.com/pacocoursey/next-themes/tree/main),\nwhich lets you tailor the UI along three independent dimensions:\n\n- **Mode**: overall brightness and contrast (light, dark)\n- **Accent**: emphasizes a particular color or set of colors for interactive or branded elements (teal, blue, violet, etc.)\n- **Product**: component radius, spacing, and density (consumer, enterprise)\n\n---\n\n### Usage\n\n#### 1. Install theme assets\n\n> If an accent CSS file is missing, switching to that accent will be a silent no-op.\n> Accent themes can be found in the `@viasat/beam-tokens/themes` directory.\n\n```tsx\n// root entry (e.g. _app.tsx or main.tsx)\nimport '@viasat/beam-tokens/styles.css';\nimport '@viasat/beam-fonts/styles.css';\nimport '@viasat/beam-tokens/themes/blue.css'; // Always import the Accent themes you want to use\n```\n\n#### 2. Wrap your application with the theme provider\n\nWrap your application with the `BeamThemeProvider` component to provide the theme context to all components within your application.\n\n```tsx\nimport { BeamThemeProvider } from '@viasat/beam-react';\n\nfunction App() {\n  return (\n    <BeamThemeProvider>{/* Your application content goes here */}</BeamThemeProvider>\n  );\n}\n\nexport default App;\n```\n\n#### 3. Use the Beam Theme Utility hook\n\nThe Beam Theme Utility provides a hook `useBeamTheme` that can be used to access the theme context. This hook returns a set of functions\nthat can be used to manage the theme, in addition to the theme state itself.\n\n```tsx\nimport { useBeamTheme, Box, Button, Text } from '@viasat/beam-react';\n\nexport default function Page() {\n  const {\n    theme,\n    systemMode,\n    systemModeEnabled,\n    setSystemModeEnabled,\n    setAccent,\n    setMode,\n    setProductType,\n    toggleMode,\n  } = useBeamTheme();\n\n  return (\n    <Box\n      backgroundColor=\"00\"\n      p={'200'}\n      style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}\n    >\n      <Text color=\"primary\" kind=\"heading-xl\">\n        Current Theme: {theme.mode} {theme.accent} {theme.productType}\n      </Text>\n      <Text color=\"primary\" kind=\"heading-xl\">\n        System Mode: {systemMode}\n      </Text>\n      <Text color=\"primary\" kind=\"heading-xl\">\n        System Mode Enabled: {systemModeEnabled ? 'true' : 'false'}\n      </Text>\n      <Button onClick={() => setSystemModeEnabled(!systemModeEnabled)}>\n        Toggle System Mode\n      </Button>\n      <Button onClick={() => toggleMode()}>Toggle Mode</Button>\n      <Button onClick={() => setMode('light')}>Set Light</Button>\n      <Button onClick={() => setMode('dark')}>Set Dark</Button>\n      <Button onClick={() => setAccent('blue')}>Set Blue Accent</Button>\n      <Button onClick={() => setAccent('teal')}>Set Default Teal Accent</Button>\n      <Button onClick={() => setProductType('consumer')}>Set Consumer</Button>\n      <Button onClick={() => setProductType('enterprise')}>Set Enterprise</Button>\n    </Box>\n  );\n}\n```\n\n---\n\n### Live Example\n\n```tsx\nexport const LiveExample = () => {\n  const {\n    theme,\n    setAccent,\n    setMode,\n    setProductType,\n    systemModeEnabled,\n    setSystemModeEnabled,\n    systemMode,\n  } = useBeamTheme();\n\n  // Hook to manage checked state for the ActionList items\n  const useSelection = (\n    initialSelection = false,\n    onSelection: (selected: boolean) => void,\n  ) => {\n    const [defaultSelected, setSelected] = useState(initialSelection);\n    const onSelectionChange = (selected: boolean) => {\n      setSelected(selected);\n      selected && onSelection(selected);\n    };\n    return { defaultSelected, onSelectionChange };\n  };\n\n  const lightModeSelection = useSelection(true, selected => {\n    setSystemModeEnabled(false);\n    setMode('light');\n  });\n  const darkModeSelection = useSelection(false, selected => {\n    setSystemModeEnabled(false);\n    setMode('dark');\n  });\n\n  const systemModeSelection = useSelection(systemModeEnabled, selected => {\n    setSystemModeEnabled(selected);\n    setMode(systemMode || 'light');\n  });\n\n  // Create accent selections by iterating over ACCENT values\n  const accentSelections = Object.values(ACCENT).reduce((acc, accent) => {\n    acc[accent] = useSelection(theme.accent === accent, selected => {\n      setAccent(accent);\n    });\n    return acc;\n  }, {} as any);\n\n  const enterpriseSelection = useSelection(true, selected => {\n    setProductType('enterprise');\n  });\n  const consumerSelection = useSelection(false, selected => {\n    setProductType('consumer');\n  });\n\n  return (\n    <Box\n      backgroundColor=\"00\"\n      gap=\"150\"\n      py=\"200\"\n      px=\"150\"\n      borderRadius=\"sm\"\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <Box style={{ display: 'flex', flexWrap: 'wrap' }} gap=\"100\">\n        <Menu>\n          <Menu.Trigger>\n            <Button appearance=\"neutral-subtle\" kind=\"outline\" size=\"sm\">\n              Mode\n            </Button>\n          </Menu.Trigger>\n          <Menu.PopoverContent>\n            <ActionList ariaLabel=\"Mode selection\">\n              <ActionList.Group kind=\"singleCheckMark\">\n                <ActionList.Item {...lightModeSelection}>\n                  Light (default)\n                </ActionList.Item>\n                <ActionList.Item {...darkModeSelection}>Dark</ActionList.Item>\n                <ActionList.Item {...systemModeSelection}>System</ActionList.Item>\n              </ActionList.Group>\n            </ActionList>\n          </Menu.PopoverContent>\n        </Menu>\n        <Menu>\n          <Menu.Trigger>\n            <Button appearance=\"neutral-subtle\" kind=\"outline\" size=\"sm\">\n              Accent theme\n            </Button>\n          </Menu.Trigger>\n          <Menu.PopoverContent>\n            <ActionList ariaLabel=\"Accent selection\">\n              <ActionList.Group kind=\"singleCheckMark\">\n                {Object.values(ACCENT).map(accent => (\n                  <ActionList.Item key={accent} {...accentSelections[accent]}>\n                    {accent.charAt(0).toUpperCase() + accent.slice(1)}\n                    {accent === 'teal' && ' (default)'}\n                  </ActionList.Item>\n                ))}\n              </ActionList.Group>\n            </ActionList>\n          </Menu.PopoverContent>\n        </Menu>\n        <Menu>\n          <Menu.Trigger>\n            <Button appearance=\"neutral-subtle\" kind=\"outline\" size=\"sm\">\n              Product type\n            </Button>\n          </Menu.Trigger>\n          <Menu.PopoverContent>\n            <ActionList ariaLabel=\"Product type selection\">\n              <ActionList.Group kind=\"singleCheckMark\">\n                <ActionList.Item {...enterpriseSelection}>\n                  Enterprise (default)\n                </ActionList.Item>\n                <ActionList.Item {...consumerSelection}>Consumer</ActionList.Item>\n              </ActionList.Group>\n            </ActionList>\n          </Menu.PopoverContent>\n        </Menu>\n      </Box>\n      <Box\n        p=\"150\"\n        borderRadius=\"lg\"\n        backgroundColor=\"01\"\n        gap=\"150\"\n        style={{ display: 'flex', flexDirection: 'column' }}\n      >\n        <Box>\n          <Text kind=\"heading-xl\">Sign up</Text>\n        </Box>\n        <Box gap=\"150\" style={{ display: 'flex', flexDirection: 'column' }}>\n          <TextField label={<Label>Username</Label>} fluid />\n          <TextField label={<Label>Password</Label>} fluid />\n          <Checkbox\n            defaultChecked\n            label=\"To boldly go where no theme has gone before\"\n          />\n          <Box\n            gap=\"75\"\n            pTop=\"150\"\n            style={{\n              display: 'flex',\n              justifyContent: 'flex-end',\n              borderTop: `${bmSemBorderWidthMd} solid ${bmSemColorBorder01}`,\n            }}\n          >\n            <Button appearance=\"accent\" kind=\"outline\">\n              Cancel\n            </Button>\n            <Button appearance=\"accent\" kind=\"filled\">\n              Beam me up\n            </Button>\n          </Box>\n        </Box>\n      </Box>\n    </Box>\n  );\n};\n```\n\n---\n\n### Inline Example\n\nInline theming applies a distinct `mode` to specific UI sections, overriding the page's primary `mode`.\nA common use case is alternating `light` and `dark` themes for consecutive sections within the same layout.\n\n> The `className` attribute is used to apply the `bm-light` or `bm-dark` class to the desired section and will\n> override the top-level `mode` set by the `BeamThemeProvider`.\n\n```tsx\nexport const InlineExample = () => {\n  return (\n    <Box backgroundColor=\"00\" p=\"150\" borderRadius=\"sm\">\n      <Box\n        className=\"bm-light\"\n        backgroundColor=\"01\"\n        px=\"150\"\n        py=\"300\"\n        gap=\"125\"\n        style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}\n      >\n        <Box\n          style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}\n        >\n          <Text kind=\"heading-2xl\" color=\"primary\">\n            Section one\n          </Text>\n          <Text kind=\"body-lg\" color=\"secondary\">\n            To boldly go where no theme has gone before.\n          </Text>\n        </Box>\n        <Button>Beam me up</Button>\n      </Box>\n      <Box\n        className=\"bm-dark\"\n        backgroundColor=\"01\"\n        px=\"150\"\n        py=\"300\"\n        gap=\"125\"\n        style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}\n      >\n        <Box\n          style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}\n        >\n          <Text kind=\"heading-2xl\" color=\"primary\">\n            Section two\n          </Text>\n          <Text kind=\"body-lg\" color=\"secondary\">\n            To boldly go where no theme has gone before.\n          </Text>\n        </Box>\n        <Button>Beam me up</Button>\n      </Box>\n    </Box>\n  );\n};\n```\n\n---\n\n### API Reference\n\n#### BeamTheme\n\nA BeamTheme object is comprised of a mode, accent, and productType.\n\n**Mode**\n\nUse mode to set `light` and `dark` color modes.\n\n**Accent themes**\n\nAccent themes can be used to modify the primary accent color used throughout an application.\nCurrently, `accent` themes are provided to meet very distinct requirements. For example, Government Services\nand the OneFi airline portal use `blue` to present a more serious and professional tone,\nwhile MyViasat and BuyViasat use Viasat's default accent, `teal`. The remaining values are not intended for\nrandom use. Please check in with the Beam team if you are interested in using one of the non-default options.\n\n**Product themes**\n\nBeam offers both `enterprise` (default) and `consumer` product themes. Enterprise is intended for data-rich applications,\nwhile Consumer is designed for customer-facing marketing websites. Currently, these themes only affect shape and padding on Button, Chip and Badge.\n\n```tsx\nconst beamTheme: BeamTheme = {\n  mode: 'light',\n  accent: 'blue',\n  productType: 'consumer',\n};\n```\n\n#### BeamThemeProvider Context\n\nBeamThemeProvider is a React Context that provides the BeamTheme object and additional theme management functions. BeamThemeProvider must wrap\nyour application's root component so that all components within the application can access the theme context.\n\n```tsx\nimport { BeamThemeProvider } from \"@viasat/beam-react\";\n\nexport default function App() {\n  return (\n    <BeamThemeProvider defaultTheme={mode: \"dark\", accent: \"blue\", productType: \"consumer\"}>\n      {/* Your application content goes here */}\n    </BeamThemeProvider>\n  )\n}\n```\n\n#### useBeamTheme Hook\n\nThe Beam Theme Utility provides a hook that can be used to access the theme context. This hook returns a set of functions\nthat can be used to manage the theme, in addition to the theme state itself.\n\n```tsx\nimport { useBeamTheme } from '@viasat/beam-react';\n\nexport default function Page() {\n  const { theme, setMode, setAccent, setProductType, toggleMode } = useBeamTheme();\n\n  return (\n    <Box>\n      <Text>Mode: {theme.mode}</Text>\n      <Text>Accent: {theme.accent}</Text>\n      <Text>Product Type: {theme.productType}</Text>\n      <Button onClick={() => toggleMode()}>Toggle Mode</Button>\n    </Box>\n  );\n}\n```\n\n### Next.js\n\nIf you are using Next.js, ensure that you include `'use client'` at the top of all the modules where you are calling\n`BeamThemeProvider` and `useBeamTheme` to enable client-side features that are needed for the Beam Theme Utility.\nNo additional configuration is needed by the Beam Theme Utility for SSR support. Only add `'use client'` where necessary.\nOver-using `'use client'` can lead to performance issues such as increased bundle size.\n\n```tsx\n// clientProviders.tsx\n'use client'; // use client directive that enables hooks, browser APIs, and other client-side features\nimport { BeamThemeProvider } from '@viasat/beam-react';\n\nexport default function ClientProviders({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  return <BeamThemeProvider>{children}</BeamThemeProvider>;\n}\n```\n\n> You will need to import `@viasat/beam-fonts/styles.nextjs.css` instead of `@viasat/beam-fonts/styles.css` in your root file.\n\n> If you do not add `suppressHydrationWarning` to your `` you will get warnings because Beam Theme Utility\n> updates that element. This property only applies one level deep, so it won't block hydration warnings on other elements.\n\n```tsx\n// layout.tsx\nimport type { Metadata } from 'next';\nimport ClientProviders from './clientProviders';\n\nimport '@viasat/beam-tokens/styles.css';\nimport '@viasat/beam-fonts/styles.nextjs.css'; // nextjs specific stylesheet for fonts\nimport '@viasat/beam-tokens/themes/blue.css'; // or the accent you want to use\n\nexport const metadata: Metadata = {\n  title: 'Beam With Next',\n  description: 'Beam With Next',\n};\n\nexport default function RootLayout({\n  children,\n}: Readonly<{\n  children: React.ReactNode;\n}>) {\n  return (\n    <html lang=\"en\" suppressHydrationWarning>\n      <body>\n        <ClientProviders>{children}</ClientProviders>\n      </body>\n    </html>\n  );\n}\n```\n\n---\n\n### Common Pitfalls\n\n- Make sure to apply CSS sanitization at your index level CSS file to clean up any default styling.\n- Ensure that you import all accent stylesheets you plan to use from `@viasat/beam-tokens/themes` in your root entry file.\n  Otherwise, accent will fall back to the default accent color\n- Import the next specific stylesheet for fonts instead of the default stylesheet when using Next.js."
    },
    {
      "title": "Migrations/v1 to v2",
      "slug": "migrations-v1-to-v2",
      "description": "- Published to standard NPM registry - No custom registry configuration needed - Improved package discoverability",
      "type": "mdx",
      "mdxContent": "# What's New in v2?\n\n### Simplified Distribution\n\n- Published to standard NPM registry\n- No custom registry configuration needed\n- Improved package discoverability\n\n### Better Scoping\n\n- Aligned with NPM best practices using `@viasat` scope\n- Clearer package naming with `beam-*` prefix\n- Easier to identify Beam packages in `node_modules`\n\n### Improved Developer Experience\n\n- Simpler installation process\n- Better IDE autocomplete and type inference\n- Consistent with other Viasat packages\n\n---\n\n# Migration Guide: v1 to v2\n\nThis guide will help you migrate your application from Beam v1 to Beam v2.\n\n### 1. Package Scope Changed\n\nAll Beam packages have been moved from the `@beam` scope to the `@viasat/beam-*` scope to align with NPM registry standards.\n\n**Old (v1):**\n\n```ts\nimport { Button } from '@beam/react';\nimport '@beam/tokens/styles.css';\nimport '@beam/fonts/styles.css';\n```\n\n**New (v2):**\n\n```ts\nimport { Button } from '@viasat/beam-react';\nimport '@viasat/beam-tokens/styles.css';\nimport '@viasat/beam-fonts/styles.css';\n```\n\n### 2. Registry Configuration No Longer Required\n\nIn v2, you **no longer need** to configure custom npm registries. Beam packages are now published to the standard NPM registry and internal Artifactory registries with proper scoping.\n\n**Old (v1) - ❌ No longer needed:**\n\n```bash\nnpm set @beam:registry=https://artifactory.viasat.com/artifactory/api/npm/vega-pwaf-npm-prod/\nnpm set @vst:registry=https://artifactory.viasat.com/artifactory/api/npm/vega-pwaf-npm-prod/\n```\n\n**New (v2) - ✅ Just install:**\n\n```bash\nnpm install @viasat/beam-react\n```\n\n---\n\n## Migration Steps\n\n### Step 1: Uninstall Old Packages\n\nRemove all v1 Beam packages from your project:\n\n```bash\nnpm uninstall @beam/react @beam/tokens @beam/fonts @beam/icons @beam/shared @beam/web-components\n```\n\n### Step 2: Install New Packages\n\nInstall the v2 packages:\n\n```bash\nnpm install @viasat/beam-react\n```\n\n> **Note:** Installing `@viasat/beam-react` automatically includes all necessary dependencies (`@viasat/beam-icons`, `@viasat/beam-tokens`, `@viasat/beam-fonts`, etc.)\n\n### Step 3: Update All Imports\n\nYou need to update all import statements across your codebase. The easiest way is to use **Find and Replace** in your editor.\n\n#### Using Find and Replace in VS Code / Most Editors:\n\n1. Open **Find and Replace** (`Cmd+Shift+H` on Mac, `Ctrl+Shift+H` on Windows/Linux)\n2. Use each row from the table below - copy the \"Old Import\" as your **Find** value and the \"New Import\" as your **Replace** value\n3. Click **Replace All** for each package\n4. Repeat for all 6 packages in the table\n\n**Example:**\n\n```\nFind:     @beam/react\nReplace:  @viasat/beam-react\n```\n\n> **Tip:** You don't need to enable regex mode - simple text find/replace works perfectly for this migration.\n\n#### Quick Reference Table\n\n| Old Import (v1)          | New Import (v2)                 |\n| ------------------------ | ------------------------------- |\n| `@beam/react`          | `@viasat/beam-react`          |\n| `@beam/tokens`         | `@viasat/beam-tokens`         |\n| `@beam/fonts`          | `@viasat/beam-fonts`          |\n| `@vst/beam-icons`      | `@viasat/beam-icons`          |\n| `@beam/shared`         | `@viasat/beam-shared`         |\n| `@beam/web-components` | `@viasat/beam-web-components` |\n\n### Step 4: Remove Registry Configuration\n\nIf you previously configured custom registries for `@beam` scope, you can remove them:\n\n```bash\nnpm config delete @beam:registry\nnpm config delete @vst:registry\n```\n\nOr manually edit your `.npmrc` file to remove these lines:\n\n```\n@beam:registry=https://artifactory.viasat.com/...\n@vst:registry=https://artifactory.viasat.com/...\n```\n\n### Step 5: Update `package.json`\n\nVerify your `package.json` has the correct dependencies:\n\n```json\n{\n  \"dependencies\": {\n    \"@viasat/beam-react\": \"^2.0.0\"\n  }\n}\n```\n\n### Step 6: Test Your Application\n\n1. Clear your build cache:\n\n   ```bash\n   rm -rf node_modules/.cache\n   rm -rf .next # if using Next.js\n   rm -rf dist # or your build directory\n   ```\n\n2. Reinstall dependencies:\n\n   ```bash\n   npm install\n   ```\n\n3. Run your application and verify everything works:\n   ```bash\n   npm run dev\n   ```\n\n---\n\n# Migration Checklist\n\n- [ ] Uninstall all `@beam/*` packages\n- [ ] Install `@viasat/beam-react`\n- [ ] Find and replace all imports from `@beam/*` to `@viasat/beam-*`\n- [ ] Remove custom registry configuration\n- [ ] Update `package.json` dependencies\n- [ ] Clear build cache\n- [ ] Test application thoroughly\n- [ ] Update any CI/CD pipelines or deployment scripts\n- [ ] Update team documentation and onboarding guides\n\n---\n\n# Need Help?\n\nIf you encounter any issues during migration:\n\n1. Check that all old `@beam/*` imports have been replaced\n2. Verify no old packages remain in `package.json`\n3. Clear your build cache and `node_modules`\n4. Reach out to [#beam-help](https://viasat.enterprise.slack.com/archives/C02BEV69HAQ) for support"
    },
    {
      "title": "Concepts/Data Visualization",
      "slug": "concepts-data-visualization",
      "description": "",
      "type": "mdx",
      "mdxContent": "### Usage Example\n\n```tsx\nimport Highcharts from 'highcharts';\nimport HighchartsReact from 'highcharts-react-official';\n\nimport { Box } from '@viasat/beam-react';\nimport { getCSSVar } from '@viasat/beam-shared/utils/CSSLookup';\nimport {\n  bmDatavizColorCategorical1,\n  bmDatavizColorCategorical2,\n  bmDatavizColorCategorical3,\n  bmDatavizOpacityArea,\n  bmSemColorBorder01,\n  bmSemColorBorderStrong,\n  bmSemColorSurface01,\n  bmSemColorTextPrimary,\n  bmSemColorTextSecondary,\n  bmSemTypoBodyXs,\n  bmSemTypoLabelSm,\n} from '@viasat/beam-tokens';\n\nexport const HighchartsAreaExample = () => {\n  const options: Highcharts.Options = {\n    title: {\n      text: '',\n    },\n    xAxis: {\n      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],\n      labels: {\n        style: {\n          font: bmSemTypoBodyXs,\n          color: bmSemColorTextSecondary,\n        },\n      },\n      lineColor: bmSemColorBorderStrong,\n      min: 0,\n      max: 6,\n      startOnTick: false,\n      endOnTick: false,\n      minPadding: 0,\n      maxPadding: 0,\n      plotBands: [],\n    },\n    yAxis: {\n      title: {\n        text: '',\n      },\n      labels: {\n        style: {\n          font: bmSemTypoBodyXs,\n          color: bmSemColorTextSecondary,\n        },\n      },\n      gridLineColor: bmSemColorBorder01,\n    },\n    plotOptions: {\n      area: {\n        stacking: 'normal',\n        fillOpacity: parseFloat(getCSSVar(bmDatavizOpacityArea)),\n        pointPlacement: 'on',\n      },\n    },\n    series: [\n      {\n        name: 'Open rate',\n        type: 'area',\n        data: [1, 2, 3, 4, 5, 6, 7],\n        color: bmDatavizColorCategorical1,\n      },\n      {\n        name: 'Click rate',\n        type: 'area',\n        data: [0, 2, 0, 1, 3, 4, 7],\n        color: bmDatavizColorCategorical2,\n      },\n      {\n        name: 'Unsubscribe rate',\n        type: 'area',\n        data: [1, 1, 2, 1, 2, 1, 2],\n        color: bmDatavizColorCategorical3,\n      },\n    ],\n    legend: {\n      itemStyle: {\n        font: bmSemTypoLabelSm,\n        color: bmSemColorTextSecondary,\n      },\n    },\n    chart: {\n      backgroundColor: bmSemColorSurface01,\n      style: {\n        color: bmSemColorTextPrimary,\n      },\n      height: null,\n      width: null,\n      reflow: true,\n    },\n    credits: {\n      enabled: false,\n    },\n  };\n\n  return (\n    <Box\n      backgroundColor=\"01\"\n      borderRadius=\"md\"\n      style={{\n        display: 'flex',\n        justifyContent: 'center',\n        width: '100%',\n        height: '400px',\n      }}\n      gap=\"100\"\n      py=\"100\"\n    >\n      <div style={{ width: '100%', height: '100%' }}>\n        <HighchartsReact highcharts={Highcharts} options={options} />\n      </div>\n    </Box>\n  );\n};\n```"
    },
    {
      "title": "Concepts/Component Status",
      "slug": "concepts-component-status",
      "description": "Beam 3 components have a predetermined set of requirements and expectations that define each stage of their lifespan. Learn more about Component Lifecycles [here](/docs/concepts-component-lifecycle--d",
      "type": "mdx",
      "mdxContent": "# Component Status\n\n  Beam 3 components have a predetermined set of requirements and expectations that\n  define each stage of their lifespan. Learn more about Component Lifecycles\n  [here](/docs/concepts-component-lifecycle--docs)."
    }
  ],
  "icons": [
    {
      "importPath": "@viasat/beam-icons/icons",
      "icons": [
        "AAbumOutlined",
        "AVe",
        "AcUnit",
        "AcUnitOutlined",
        "AccessAlarm",
        "AccessAlarms",
        "AccessAlarmsOutlined",
        "AccessTime",
        "AccessTimeOutlined",
        "Accessibility",
        "AccessibilityNew",
        "AccessibilityNewOutlined",
        "AccessibilityOutlined",
        "Accessible",
        "AccessibleForward",
        "AccessibleForwardOutlined",
        "AccessibleOutlined",
        "AccountBalance",
        "AccountBalanceOutlined",
        "AccountBalanceWallet",
        "AccountBalanceWalletOutlined",
        "AccountBox",
        "AccountBoxOutlined",
        "AccountCircleOutlined",
        "AccountTree",
        "AccountTreeOutlined",
        "Accountcircle",
        "Action",
        "AdUnits",
        "AdUnitsOutlined",
        "Adb",
        "AdbOutlined",
        "Add",
        "AddAPhoto",
        "AddAPhotoOutlined",
        "AddAlarm",
        "AddAlarmOutlined",
        "AddAlert",
        "AddAlertOutlined",
        "AddBox",
        "AddBoxOutlined",
        "AddBusiness",
        "AddBusinessOutlined",
        "AddCircle",
        "AddCircleOutline",
        "AddCircleOutlined",
        "AddComment",
        "AddCommentOutlined",
        "AddIcCall",
        "AddIcCallOutlined",
        "AddLocation",
        "AddLocationAlt",
        "AddLocationAltOutlined",
        "AddLocationOutlined",
        "AddOutlined",
        "AddPhotoAlternate",
        "AddPhotoAlternateOutlined",
        "AddRoad",
        "AddRoadOutlined",
        "AddShoppingCart",
        "AddShoppingCartOutlined",
        "AddTask",
        "AddTaskOutlined",
        "AddToHomeScreen",
        "AddToHomeScreenOutlined",
        "AddToPhotos",
        "AddToPhotosOutlined",
        "AddToQueue",
        "AddToQueueOutlined",
        "Addchart",
        "AddchartOutlined",
        "Adjust",
        "AdjustOutlined",
        "AdminPanelSettings",
        "AdminPanelSettingsOutlined",
        "Agriculture",
        "AgricultureOutlined",
        "AirlineSeatFlat",
        "AirlineSeatFlatAngled",
        "AirlineSeatFlatAngledOutlined",
        "AirlineSeatFlatOutlined",
        "AirlineSeatIndividualSuiteOutlined",
        "AirlineSeatIndividualsuite",
        "AirlineSeatLegroomExtra",
        "AirlineSeatLegroomExtraOutlined",
        "AirlineSeatLegroomNormal",
        "AirlineSeatLegroomNormalOutlined",
        "AirlineSeatLegroomReduced",
        "AirlineSeatLegroomReducedOutlined",
        "AirlineSeatReclineExtra",
        "AirlineSeatReclineExtraOutlined",
        "AirlineSeatReclineNormal",
        "AirlineSeatReclineNormalOutlined",
        "AirplanemodeActive",
        "AirplanemodeActiveOutlined",
        "AirplanemodeInactive",
        "AirplanemodeInactiveOutlined",
        "Airplay",
        "AirplayOutlined",
        "AirportShuttle",
        "AirportShuttleOutlined",
        "Alarm",
        "AlarmAdd",
        "AlarmAddOutlined",
        "AlarmOff",
        "AlarmOffOutlined",
        "AlarmOn",
        "AlarmOnOutlined",
        "AlarmOutlined",
        "Album",
        "Alert",
        "AlignHorizontalCenter",
        "AlignHorizontalLeft",
        "AlignHorizontalRight",
        "AlignVerticalBottom",
        "AlignVerticalCenter",
        "AlignVerticalTop",
        "AllInbox",
        "AllInboxOutlined",
        "AllInclusive",
        "AllInclusiveOutlined",
        "AllOut",
        "AllOutOutlined",
        "AltRoute",
        "AltRouteOutlined",
        "AlternateEmail",
        "AlternateEmailOutlined",
        "AmpStories",
        "AmpStoriesOutlined",
        "Analytics",
        "AnalyticsOutlined",
        "Anchor",
        "AnchorOutlined",
        "Android",
        "AndroidOutlined",
        "Announcement",
        "AnnouncementOutlined",
        "Antijammer",
        "Apartment",
        "ApartmentOutlined",
        "Api",
        "ApiOutlined",
        "AppBlocking",
        "AppBlockingOutlined",
        "AppSettingsAlt",
        "AppSettingsAltOutlined",
        "Apps",
        "AppsCurved",
        "AppsOutlined",
        "Architecture",
        "ArchitectureOutlined",
        "Archive",
        "ArchiveOutlined",
        "ArrowBack",
        "ArrowBackIos",
        "ArrowBackIosOutlined",
        "ArrowBackOutlined",
        "ArrowCircleDown",
        "ArrowCircleDownOutlined",
        "ArrowCircleUp",
        "ArrowCircleUpOutlined",
        "ArrowDownward",
        "ArrowDownwardOutlined",
        "ArrowDropDownCircleOutlined",
        "ArrowDropDownOutlined",
        "ArrowDropUp",
        "ArrowDropUpOutlined",
        "ArrowDropdown",
        "ArrowDropdownCircle",
        "ArrowForward",
        "ArrowForwardIos",
        "ArrowForwardIosOutlined",
        "ArrowForwardOutlined",
        "ArrowLeft",
        "ArrowLeftOutlined",
        "ArrowRight",
        "ArrowRightAlt",
        "ArrowRightAltOutlined",
        "ArrowRightOutlined",
        "ArrowUpward",
        "ArrowUpwardOutlined",
        "Arrowbackcurved",
        "Arrowforwardcurved",
        "ArtTrack",
        "ArtTrackOutlined",
        "Article",
        "ArticleOutlined",
        "AspectRatio",
        "AspectRatioOutlined",
        "Assessment",
        "AssessmentOutlined",
        "Assignment",
        "AssignmentInd",
        "AssignmentIndOutlined",
        "AssignmentLate",
        "AssignmentLateOutlined",
        "AssignmentOutlined",
        "AssignmentReturn",
        "AssignmentReturnOutlined",
        "AssignmentReturned",
        "AssignmentReturnedOutlined",
        "AssignmentTurnedIn",
        "AssignmentTurnedInOutlined",
        "Assistant",
        "AssistantOutlined",
        "AssistantPhoto",
        "AssistantPhotoOutlined",
        "Atm",
        "AtmOutlined",
        "AttachEmail",
        "AttachEmailOutlined",
        "AttachFileOutlined",
        "AttachMoney",
        "AttachMoneyOutlined",
        "Attachment",
        "AttachmentOutlined",
        "AttributionOutlined",
        "Audiotrack",
        "AudiotrackOutlined",
        "AutoDelete",
        "AutoDeleteOutlined",
        "Autorenew",
        "AutorenewOutlined",
        "AvTimer",
        "AvTimerOutlined",
        "BabyChangingStation",
        "BabyChangingStationOutlined",
        "Backpack",
        "BackpackOutlined",
        "Backspace",
        "BackspaceOutlined",
        "Backup",
        "BackupOutlined",
        "BackupTable",
        "BackupTableOutlined",
        "Ballot",
        "BallotOutlined",
        "BarChart",
        "BarChartOutlined",
        "Barcode",
        "BatchPrediction",
        "BatchPredictionOutlined",
        "Bathtub",
        "BathtubOutlined",
        "BatteryAlertOutlined",
        "BatteryChargingFull",
        "BatteryChargingFullOutlined",
        "BatteryFull",
        "BatteryFullOutlined",
        "BatteryStd",
        "BatteryStdOutlined",
        "BatteryUnknown",
        "BatteryUnknownOutlined",
        "BeachAccess",
        "BeachAccessOutlined",
        "BeamMultispot",
        "Bedtime",
        "BedtimeOutlined",
        "Beenhere",
        "BeenhereOutlined",
        "Bento",
        "BentoOutlined",
        "BikeScooter",
        "BikeScooterOutlined",
        "Biotech",
        "BiotechOutlined",
        "Block",
        "BlockOutlined",
        "Bluetooth",
        "BluetoothAudio",
        "BluetoothAudioOutlined",
        "BluetoothConnected",
        "BluetoothConnectedOutlined",
        "BluetoothDisabled",
        "BluetoothDisabledOutlined",
        "BluetoothOutlined",
        "BluetoothSearching",
        "BluetoothSearchingOutlined",
        "BlurCircular",
        "BlurCircularOutlined",
        "BlurLinear",
        "BlurLinearOutlined",
        "BlurOff",
        "BlurOffOutlined",
        "BlurOn",
        "BlurOnOutlined",
        "Book",
        "BookOnline",
        "BookOutlined",
        "Bookmark",
        "BookmarkBorder",
        "BookmarkBorderOutlined",
        "BookmarkOutlined",
        "Bookmarks",
        "BookmarksOutlined",
        "BorderAll",
        "BorderAllOutlined",
        "BorderBottom",
        "BorderBottomOutlined",
        "BorderClear",
        "BorderClearOutlined",
        "BorderColor",
        "BorderHorizontal",
        "BorderHorizontalOutlined",
        "BorderInner",
        "BorderInnerOutlined",
        "BorderLeft",
        "BorderLeftOutlined",
        "BorderOuter",
        "BorderOuterOutlined",
        "BorderRight",
        "BorderRightOutlined",
        "BorderStyle",
        "BorderStyleOutlined",
        "BorderTop",
        "BorderTopOutlined",
        "BorderVertical",
        "BorderVerticalOutlined",
        "BrandingWatermark",
        "BrandingWatermarkOutlined",
        "Brightness1",
        "Brightness1Outlined",
        "Brightness2",
        "Brightness2Outlined",
        "Brightness3",
        "Brightness3Outlined",
        "Brightness4",
        "Brightness4Outlined",
        "Brightness5",
        "Brightness5Outlined",
        "Brightness6",
        "Brightness6Outlined",
        "Brightness7",
        "Brightness7Outlined",
        "BrightnessAuto",
        "BrightnessAutoOutlined",
        "BrightnessHigh",
        "BrightnessHighOutlined",
        "BrightnessLow",
        "BrightnessLowOutlined",
        "BrightnessMedium",
        "BrightnessMediumOutlined",
        "BrokenImageOutlined",
        "BrowserNotSupported",
        "BrowserNotSupportedOutlined",
        "Brush",
        "BrushOutlined",
        "BubbleChart",
        "BubbleChartOutlined",
        "BugReport",
        "BugReportOutlined",
        "Build",
        "BuildCircle",
        "BuildCircleOutlined",
        "BuildOutlined",
        "Bullet6",
        "BurstMode",
        "BurstModeOutlined",
        "Business",
        "BusinessCenter",
        "BusinessCenterOutlined",
        "BusinessOutlined",
        "Cached",
        "CachedOutlined",
        "Cake",
        "CakeOutlined",
        "Calculate",
        "CalculateOutlined",
        "CalendarToday",
        "CalendarTodayOutlined",
        "CalendarViewDay",
        "CalendarViewDayOutlined",
        "Call",
        "CallEnd",
        "CallEndOutlined",
        "CallMade",
        "CallMadeOutlined",
        "CallMerge",
        "CallMergeOutlined",
        "CallMissed",
        "CallMissedOutgoing",
        "CallMissedOutgoingOutlined",
        "CallMissedOutlined",
        "CallOutlined",
        "CallReceived",
        "CallReceivedOutlined",
        "CallSplit",
        "CallSplitOutlined",
        "CallToActionOutlined",
        "Camera",
        "CameraAlt",
        "CameraAltOutlined",
        "CameraEnhance",
        "CameraEnhanceOutlined",
        "CameraFront",
        "CameraFrontOutlined",
        "CameraOutlined",
        "CameraRear",
        "CameraRearOutlined",
        "CameraRoll",
        "CameraRollOutlined",
        "Campaign",
        "CampaignOutlined",
        "Cancel",
        "CancelOutlined",
        "CancelPresentation",
        "CancelPresentationOutlined",
        "CancelScheduleSend",
        "CancelScheduleSendOutlined",
        "CaptivePortal",
        "CardGiftcard",
        "CardGiftcardOutlined",
        "CardMembership",
        "CardMembershipOutlined",
        "CardTravelOutlined",
        "Cardtravel",
        "CareAgent",
        "Carpenter",
        "CarpenterOutlined",
        "Casino",
        "CasinoOutlined",
        "Cast",
        "CastConnectedOutlined",
        "CastForEducation",
        "CastForEducationOutlined",
        "CastOutlined",
        "Castconnected",
        "Category",
        "CategoryOutlined",
        "CenterFocusStrong",
        "CenterFocusStrongOutlined",
        "CenterFocusWeak",
        "CenterFocusWeakOutlined",
        "ChangeHistory",
        "ChangeHistoryOutlined",
        "ChargingStation",
        "ChargingStationOutlined",
        "Chat",
        "ChatBubble",
        "ChatBubbleOutline",
        "ChatBubbleOutlined",
        "ChatOutlined",
        "Check",
        "CheckBox",
        "CheckBoxOutlineBlank",
        "CheckBoxOutlineBlankOutlined",
        "CheckBoxOutlined",
        "CheckCircle",
        "CheckCircleOutline",
        "CheckCircleOutlineOutlined",
        "CheckCircleOutlined",
        "CheckOutlined",
        "Checkroom",
        "CheckroomOutlined",
        "ChevronDownCurved",
        "ChevronLeft",
        "ChevronLeftCurved",
        "ChevronLeftCurvedFirst",
        "ChevronLeftCurvedLast",
        "ChevronLeftOutlined",
        "ChevronRight",
        "ChevronRightCurved",
        "ChevronRightOutlined",
        "ChevronUpCurved",
        "ChildCareOutlined",
        "ChildFriendly",
        "ChildFriendlyOutlined",
        "Childcare",
        "ChromeReaderMode",
        "ChromeReaderModeOutlined",
        "Class",
        "ClassOutlined",
        "CleanHands",
        "CleanHandsOutlined",
        "CleaningServicesOutlined",
        "Clear",
        "ClearAll",
        "ClearAllOutlined",
        "ClearOutlined",
        "Close",
        "CloseFullscreen",
        "CloseFullscreenOutlined",
        "CloseOutlined",
        "ClosePanel",
        "ClosedCaption",
        "ClosedCaptionDisabled",
        "ClosedCaptionDisabledOutlined",
        "ClosedCaptionOutlined",
        "Cloud",
        "CloudCircleOutlined",
        "CloudDone",
        "CloudDoneOutlined",
        "CloudDownload",
        "CloudDownloadOutlined",
        "CloudOff",
        "CloudOffOutlined",
        "CloudOutlined",
        "CloudQueue",
        "CloudQueueOutlined",
        "CloudUpload",
        "CloudUploadOutlined",
        "Cloudcircle",
        "Code",
        "CodeOutlined",
        "Collections",
        "CollectionsBookmark",
        "CollectionsBookmarkOutlined",
        "CollectionsOutlined",
        "ColorLens",
        "ColorLensOutlined",
        "Colorize",
        "ColorizeOutlined",
        "Comment",
        "CommentBank",
        "CommentBankOutlined",
        "CommentOutlined",
        "Commute",
        "CommuteOutlined",
        "Compare",
        "CompareArrows",
        "CompareArrowsOutlined",
        "CompareOutlined",
        "CompassCalibration",
        "CompassCalibrationOutlined",
        "Computer",
        "ComputerOutlined",
        "Confirmation",
        "ConfirmationNumberOutlined",
        "ConnectWithoutContact",
        "ConnectWithoutContactOutlined",
        "Construction",
        "ConstructionOutlined",
        "ContactMail",
        "ContactMailOutlined",
        "ContactPage",
        "ContactPageOutlined",
        "ContactPhone",
        "ContactPhoneOutlined",
        "ContactSupport",
        "ContactSupportOutlined",
        "Contactless",
        "ContactlessOutlined",
        "Contacts",
        "ContactsOutlined",
        "ContentCopy",
        "ContentCut",
        "ContentCutOutlined",
        "ContentOutlined",
        "ContentPaste",
        "ContentPasteOutlined",
        "ControlCamera",
        "ControlCameraOutlined",
        "ControlPoint",
        "ControlPointDuplicate",
        "ControlPointDuplicateOutlined",
        "ControlPointOutlined",
        "Copyright",
        "CopyrightOutlined",
        "Coronavirus",
        "CoronavirusOutlined",
        "CorporateFare",
        "CorporateFareOutlined",
        "Countertops",
        "CountertopsOutlined",
        "Create",
        "CreateNewFolder",
        "CreateNewFolderOutlined",
        "CreateOutlined",
        "CreditCard",
        "CreditCardOffOutlined",
        "CreditCardOutlined",
        "Crop",
        "Crop169",
        "Crop16_9Outlined",
        "Crop32",
        "Crop3_2Outlined",
        "Crop54",
        "Crop5_4Outlined",
        "Crop75",
        "Crop7_5Outlined",
        "CropDin",
        "CropDinOutlined",
        "CropFree",
        "CropFreeOutlined",
        "CropLandscape",
        "CropLandscapeOutlined",
        "CropOriginal",
        "CropOriginalOutlined",
        "CropOutlined",
        "CropPortrait",
        "CropPortraitOutlined",
        "CropRotate",
        "CropRotateOutlined",
        "CropSquare",
        "CropSquareOutlined",
        "Dashboard",
        "DashboardOutlined",
        "DataUsage",
        "DataUsageOutlined",
        "Database",
        "DateRange",
        "DateRangeOutlined",
        "Deadline",
        "Deck",
        "DeckOutlined",
        "Dehaze",
        "DehazeOutlined",
        "Delete",
        "DeleteForever",
        "DeleteForeverOutlined",
        "DeleteOutline",
        "DeleteOutlined",
        "DeleteSweep",
        "DeleteSweepOutlined",
        "DepartureBoard",
        "DepartureBoardOutlined",
        "Description",
        "DescriptionOutlined",
        "DesignServices",
        "DesignServicesOutlined",
        "DesktopAccessDisabledOutlined",
        "DesktopAccessdisabled",
        "DesktopMac",
        "DesktopMacOutlined",
        "DesktopWindows",
        "DesktopWindowsOutlined",
        "Details",
        "DetailsOutlined",
        "DeveloperBoard",
        "DeveloperBoardOutlined",
        "DeveloperMode",
        "DeveloperModeOutlined",
        "DeviceHub",
        "DeviceHubOutlined",
        "DeviceUnknown",
        "DeviceUnknownOutlined",
        "Devices",
        "DevicesOther",
        "DevicesOtherOutlined",
        "DevicesOutlined",
        "DialerSip",
        "DialerSipOutlined",
        "Dialpad",
        "DialpadOutlined",
        "Directions",
        "DirectionsBike",
        "DirectionsBikeOutlined",
        "DirectionsBoat",
        "DirectionsBoatOutlined",
        "DirectionsBus",
        "DirectionsBusOutlined",
        "DirectionsCar",
        "DirectionsCarOutlined",
        "DirectionsOff",
        "DirectionsOffOutlined",
        "DirectionsOutlined",
        "DirectionsRailway",
        "DirectionsRailwayOutlined",
        "DirectionsRun",
        "DirectionsRunOutlined",
        "DirectionsSubway",
        "DirectionsSubwayOutlined",
        "DirectionsTransit",
        "DirectionsTransitOutlined",
        "DirectionsWalk",
        "DirectionsWalkOutlined",
        "DisabledByDefault",
        "DisabledByDefaultOutlined",
        "DiscFull",
        "DiscFullOutlined",
        "Distancing6FtApartOutlined",
        "Dns",
        "DnsOutlined",
        "DoDisturbAltOutlined",
        "DoDisturbOffOutlined",
        "DoDisturbOnOutlined",
        "DoDisturbOutlined",
        "DoNotDisturb",
        "DoNotDisturbAlt",
        "DoNotDisturbOff",
        "DoNotDisturbOn",
        "DoNotStep",
        "DoNotStepOutlined",
        "DoNotTouch",
        "DoNotTouchOutlined",
        "Dock",
        "DockOutlined",
        "Domain",
        "DomainDisabled",
        "DomainDisabledOutlined",
        "DomainOutlined",
        "DomainVerification",
        "DomainVerificationOutlined",
        "Done",
        "DoneAll",
        "DoneAllOutlined",
        "DoneOutline",
        "DoneOutlineOutlined",
        "DoneOutlined",
        "DonutLarge",
        "DonutLargeOutlined",
        "DonutSmall",
        "DonutSmallOutlined",
        "DoubleArrow",
        "DoubleArrowOutlined",
        "DoubleChevronLeftCurved",
        "DoubleChevronRightCurved",
        "DownloadDoneOutlined",
        "DownloadOutlined",
        "Drafts",
        "DraftsOutlined",
        "DragHandle",
        "DragHandleOutlined",
        "DragIndicator",
        "DragIndicatorOutlined",
        "DriveEta",
        "DriveEtaOutlined",
        "Dropdown",
        "Dry",
        "DryOutlined",
        "Duo",
        "DuoOutlined",
        "Dvr",
        "DvrOutlined",
        "DynamicFeedOutlined",
        "DynamicForm",
        "DynamicFormOutlined",
        "East",
        "EastOutlined",
        "Eco",
        "EcoOutlined",
        "Edit",
        "EditAttributes",
        "EditAttributesOutlined",
        "EditLocation",
        "EditLocationOutlined",
        "EditOutlined",
        "EditRoad",
        "EditRoadOutlined",
        "Eject",
        "EjectOutlined",
        "Elderly",
        "ElderlyOutlined",
        "ElectricBike",
        "ElectricBikeOutlined",
        "ElectricCar",
        "ElectricCarOutlined",
        "ElectricMoped",
        "ElectricMopedOutlined",
        "ElectricScooter",
        "ElectricScooterOutlined",
        "ElectricalServices",
        "ElectricalServicesOutlined",
        "ElevatorOutlined",
        "Email",
        "EmailOutlined",
        "EmojiEmotionsOutlined",
        "EmojiEventsOutlined",
        "EmojiFlags",
        "EmojiFlagsOutlined",
        "EmojiFoodBeverage",
        "EmojiFoodBeverageOutlined",
        "EmojiNature",
        "EmojiNatureOutlined",
        "EmojiObjects",
        "EmojiObjectsOutlined",
        "EmojiPeople",
        "EmojiPeopleOutlined",
        "EmojiSymbols",
        "EmojiSymbolsOutlined",
        "EmojiTransportation",
        "EmojiTransportationOutlined",
        "Emojiemotions",
        "Emojievents",
        "Engineering",
        "EngineeringOutlined",
        "EnhancedEncryption",
        "EnhancedEncryptionOutlined",
        "Equalizer",
        "EqualizerOutlined",
        "Error",
        "ErrorOutline",
        "ErrorOutlined",
        "Escalator",
        "EscalatorOutlined",
        "EscalatorWarning",
        "EscalatorWarningOutlined",
        "Euro",
        "EuroOutlined",
        "EuroSymbol",
        "EuroSymbolOutlined",
        "EvStation",
        "EvStationOutlined",
        "Event",
        "EventAvailable",
        "EventAvailableOutlined",
        "EventBusy",
        "EventBusyOutlined",
        "EventNote",
        "EventNoteOutlined",
        "EventOutlined",
        "EventSeat",
        "EventSeatOutlined",
        "ExitToApp",
        "ExitToAppOutlined",
        "ExpandLess",
        "ExpandLessOutlined",
        "ExpandMore",
        "ExpandMoreOutlined",
        "Explicit",
        "ExplicitOutlined",
        "Explore",
        "ExploreOff",
        "ExploreOffOutlined",
        "ExploreOutlined",
        "Export",
        "Exposure",
        "ExposureNeg1",
        "ExposureNeg1Outlined",
        "ExposureNeg2",
        "ExposureNeg2Outlined",
        "ExposureOutlined",
        "ExposurePlus1",
        "ExposurePlus1Outlined",
        "ExposurePlus2",
        "ExposurePlus2Outlined",
        "ExposureZero",
        "ExposureZeroOutlined",
        "Extension",
        "ExtensionOutlined",
        "Face",
        "FaceOutlined",
        "FaceUnlockOutlined",
        "Facebook",
        "FacebookOutlined",
        "FactCheck",
        "FactCheckOutlined",
        "FamilyRestroom",
        "FamilyRestroomOutlined",
        "FastForward",
        "FastForwardOutlined",
        "FastRewind",
        "FastRewindOutlined",
        "Fastfood",
        "FastfoodOutlined",
        "Favorite",
        "FavoriteBorder",
        "FavoriteBorderOutlined",
        "FavoriteOutlined",
        "FeaturedPlayList",
        "FeaturedPlayListOutlined",
        "FeaturedVideo",
        "FeaturedVideoOutlined",
        "Feedback",
        "FeedbackOutlined",
        "Fence",
        "FenceOutlined",
        "FiberDvr",
        "FiberDvrOutlined",
        "FiberManualRecord",
        "FiberManualRecordOutlined",
        "FiberNew",
        "FiberNewOutlined",
        "FiberPin",
        "FiberPinOutlined",
        "FiberSmartRecord",
        "FiberSmartRecordOutlined",
        "File",
        "FileCopy",
        "FileCopyOutlined",
        "FileDownload",
        "FileUpload",
        "Filter",
        "Filter1",
        "Filter2",
        "Filter2Outlined",
        "Filter3",
        "Filter3Outlined",
        "Filter4",
        "Filter4Outlined",
        "Filter5",
        "Filter5Outlined",
        "Filter6",
        "Filter6Outlined",
        "Filter7",
        "Filter7Outlined",
        "Filter8",
        "Filter8Outlined",
        "Filter9",
        "Filter9Outlined",
        "Filter9Plus",
        "Filter9PlusOutlined",
        "FilterAlt",
        "FilterAltOutlined",
        "FilterBAndW",
        "FilterBAndWOutlined",
        "FilterCenterFocusOutlined",
        "FilterCenterfocus",
        "FilterDrama",
        "FilterDramaOutlined",
        "FilterFrames",
        "FilterFramesOutlined",
        "FilterHdr",
        "FilterHdrOutlined",
        "FilterList",
        "FilterListOutlined",
        "FilterNone",
        "FilterNoneOutlined",
        "FilterOutlined",
        "FilterTiltShift",
        "FilterTiltShiftOutlined",
        "FilterVintage",
        "FilterVintageOutlined",
        "Filter_1Outlined",
        "FindInPage",
        "FindInPageOutlined",
        "FindReplace",
        "FindReplaceOutlined",
        "Fingerprint",
        "FingerprintOutlined",
        "FireExtinguisher",
        "FireExtinguisherOutlined",
        "Fireplace",
        "FireplaceOutlined",
        "FirstPage",
        "FirstPageOutlined",
        "FitnessCenter",
        "FitnessCenterOutlined",
        "Flag",
        "FlagOutlined",
        "Flaky",
        "FlakyOutlined",
        "Flare",
        "FlareOutlined",
        "FlashAuto",
        "FlashAutoOutlined",
        "FlashOff",
        "FlashOffOutlined",
        "FlashOn",
        "FlashOnOutlined",
        "Flight",
        "FlightLand",
        "FlightLandOutlined",
        "FlightOutlined",
        "FlightTakeoff",
        "FlightTakeoffOutlined",
        "Flip",
        "FlipCameraAndroid",
        "FlipCameraAndroidOutlined",
        "FlipCameraIos",
        "FlipCameraIosOutlined",
        "FlipOutlined",
        "FlipToBack",
        "FlipToBackOutlined",
        "FlipToFront",
        "FlipToFrontOutlined",
        "Folder",
        "FolderOpen",
        "FolderOpenOutlined",
        "FolderOutlined",
        "FolderShared",
        "FolderSharedOutlined",
        "FolderSpecial",
        "FolderSpecialOutlined",
        "FollowTheSigns",
        "FollowTheSignsOutlined",
        "FontDownload",
        "FontDownloadOutlined",
        "FoodBank",
        "FoodBankOutlined",
        "FormatAlignCenter",
        "FormatAlignCenterOutlined",
        "FormatAlignJustify",
        "FormatAlignJustifyOutlined",
        "FormatAlignLeft",
        "FormatAlignLeftOutlined",
        "FormatAlignRight",
        "FormatAlignRightOutlined",
        "FormatBold",
        "FormatBoldOutlined",
        "FormatClear",
        "FormatClearOutlined",
        "FormatColorReset",
        "FormatColorResetOutlined",
        "FormatColorShapes",
        "FormatColorText",
        "FormatColorfill",
        "FormatIndentCecreaseOutlined",
        "FormatIndentDecrease",
        "FormatIndentIncrease",
        "FormatIndentIncreaseOutlined",
        "FormatItalic",
        "FormatItalicOutlined",
        "FormatLineSpacing",
        "FormatLineSpacingOutlined",
        "FormatListBulleted",
        "FormatListBulletedOutlined",
        "FormatListNumberedOutlined",
        "FormatListNumberedRtl",
        "FormatListNumberedRtlOutlined",
        "FormatPaint",
        "FormatPaintOutlined",
        "FormatQuote",
        "FormatQuoteOutlined",
        "FormatShapesOutlined",
        "FormatSize",
        "FormatSizeOutlined",
        "FormatStrikethrough",
        "FormatStrikethroughOutlined",
        "FormatTextdirectionLToROutlined",
        "FormatTextdirectionLtoR",
        "FormatTextdirectionRToLOutlined",
        "FormatTextdirectionRtoL",
        "FormatUnderlined",
        "FormatUnderlinedOutlined",
        "Forum",
        "ForumOutlined",
        "Forward",
        "Forward10",
        "Forward10Outlined",
        "Forward30",
        "Forward30Outlined",
        "Forward5",
        "Forward5Outlined",
        "ForwardOutlined",
        "ForwardToInbox",
        "ForwardToInboxOutlined",
        "Foundation",
        "FoundationOutlined",
        "FreeBreakfast",
        "FreeBreakfastOutlined",
        "Fullscreen",
        "FullscreenExit",
        "FullscreenExitOutlined",
        "FullscreenOutlined",
        "Functions",
        "FunctionsOutlined",
        "GIconAVel",
        "GTranslate",
        "GTranslateOutlined",
        "Gamepad",
        "GamepadOutlined",
        "Games",
        "GamesOutlined",
        "GavelOutlined",
        "Gesture",
        "GestureOutlined",
        "GetApp",
        "GetAppOutlined",
        "Gif",
        "GifOutlined",
        "GolfCourse",
        "GolfCourseOutlined",
        "GpsFixed",
        "GpsFixedOutlined",
        "GpsNotFixed",
        "GpsOff",
        "GpsOffOutlined",
        "GpsotFixedOutlined",
        "Grade",
        "GradeOutlined",
        "Gradient",
        "GradientOutlined",
        "Grading",
        "GradingOutlined",
        "Grain",
        "GrainOutlined",
        "GraphicEq",
        "GraphicEqOutlined",
        "Grass",
        "GrassOutlined",
        "GridOff",
        "GridOffOutlined",
        "GridOn",
        "GridOnOutlined",
        "GroundTerminal",
        "Group",
        "GroupAdd",
        "GroupAddOutlined",
        "GroupOutlined",
        "GroupWork",
        "GroupWorkOutlined",
        "Groups",
        "GroupsOutlined",
        "Handyman",
        "HandymanOutlined",
        "Hd",
        "HdOutlined",
        "HdrOff",
        "HdrOffOutlined",
        "HdrOn",
        "HdrOnOutlined",
        "HdrStrong",
        "HdrStrongOutlined",
        "HdrWeak",
        "HdrWeakOutlined",
        "Headset",
        "HeadsetMic",
        "HeadsetMicOutlined",
        "HeadsetOutlined",
        "Healing",
        "HealingOutlined",
        "Hearing",
        "HearingDisabled",
        "HearingDisabledOutlined",
        "HearingOutlined",
        "Height",
        "HeightOutlined",
        "Help",
        "HelpCenter",
        "HelpCenterOutlined",
        "HelpOutline",
        "HelpOutlineOutlined",
        "HelpOutlined",
        "HighQuality",
        "HighQualityOutlined",
        "Highlight",
        "HighlightAlt",
        "HighlightAltOutlined",
        "HighlightOff",
        "HighlightOffOutlined",
        "HighlightOutlined",
        "History",
        "HistoryEdu",
        "HistoryEduOutlined",
        "HistoryOutlined",
        "HistoryToggleOff",
        "HistoryToggleOffOutlined",
        "Home",
        "HomeAutomation",
        "HomeOutlined",
        "HomeRepairService",
        "HomeRepairServiceOutlined",
        "HomeWork",
        "HomeWorkOutlined",
        "HorizontalDistribute",
        "HorizontalRule",
        "HorizontalRuleOutlined",
        "HorizontalSplit",
        "HorizontalSplitOutlined",
        "HotTub",
        "HotTubOutlined",
        "Hotel",
        "HotelOutlined",
        "HourglassBottom",
        "HourglassBottomOutlined",
        "HourglassDisabled",
        "HourglassDisabledOutlined",
        "HourglassEmpty",
        "HourglassEmptyOutlined",
        "HourglassFull",
        "HourglassFullOutlined",
        "HourglassTop",
        "HourglassTopOutlined",
        "House",
        "HouseOutlined",
        "HouseSiding",
        "HouseSidingOutlined",
        "HowToReg",
        "HowToRegOutlined",
        "HowToVote",
        "HowToVoteOutlined",
        "Http",
        "HttpOutlined",
        "Https",
        "HttpsOutlined",
        "Hvac",
        "HvacOutlined",
        "Image",
        "ImageAspectRatio",
        "ImageAspectRatioOutlined",
        "ImageNotSupported",
        "ImageNotSupportedOutlined",
        "ImageOutlined",
        "ImageSearch",
        "ImageSearchOutlined",
        "Import",
        "ImportContacts",
        "ImportContactsOutlined",
        "ImportExport",
        "ImportExportOutlined",
        "ImportantDevices",
        "ImportantDevicesOutlined",
        "Inbox",
        "InboxOutlined",
        "IndeterminateCheckBox",
        "IndeterminateCheckBoxOutlined",
        "Info",
        "InfoOutline",
        "InfoOutlined",
        "Input",
        "InputOutlined",
        "InsertChart",
        "InsertChartOutlined",
        "InsertComment",
        "InsertCommentOutlined",
        "InsertDriveFileOutlined",
        "InsertEmoticon",
        "InsertEmoticonOutlined",
        "InsertInvitation",
        "InsertInvitationOutlined",
        "InsertLink",
        "InsertLinkOutlined",
        "InsertPhoto",
        "InsertPhotoOutlined",
        "Insights",
        "InsightsOutlined",
        "Instagram",
        "IntegrationInstructions",
        "IntegrationInstructionsOutlined",
        "InvertColors",
        "InvertColorsOff",
        "InvertColorsOffOutlined",
        "InvertColorsOutlined",
        "Iso",
        "IsoOutlined",
        "Keyboard",
        "KeyboardArrowDown",
        "KeyboardArrowDownOutlined",
        "KeyboardArrowLeft",
        "KeyboardArrowLeftOutlined",
        "KeyboardArrowRight",
        "KeyboardArrowRightOutlined",
        "KeyboardArrowUp",
        "KeyboardArrowUpOutlined",
        "KeyboardBackspace",
        "KeyboardBackspaceOutlined",
        "KeyboardCapslock",
        "KeyboardCapslockOutlined",
        "KeyboardHide",
        "KeyboardHideOutlined",
        "KeyboardOutlined",
        "KeyboardReturn",
        "KeyboardReturnOutlined",
        "KeyboardTab",
        "KeyboardTabOutlined",
        "KeyboardVoice",
        "KeyboardVoiceOutlined",
        "KingBed",
        "KingBedOutlined",
        "Kitchen",
        "KitchenOutlined",
        "Label",
        "LabelImportant",
        "LabelImportantOutlined",
        "LabelOff",
        "LabelOffOutlined",
        "LabelOutline",
        "LabelOutlined",
        "Landscape",
        "LandscapeOutlined",
        "Language",
        "LanguageOutlined",
        "Laptop",
        "LaptopChromebook",
        "LaptopChromebookOutlined",
        "LaptopMac",
        "LaptopMacOutlined",
        "LaptopOutlined",
        "LaptopWindows",
        "LaptopWindowsOutlined",
        "LastPage",
        "LastPageOutlined",
        "Launch",
        "LaunchOutlined",
        "Layers",
        "LayersClear",
        "LayersClearOutlined",
        "LayersOutlined",
        "Leaderboard",
        "LeaderboardOutlined",
        "LeakAdd",
        "LeakAddOutlined",
        "LeakRemove",
        "LeakRemoveOutlined",
        "LeftPanelClose",
        "LeftPanelCloseOutlined",
        "LeftPanelOpen",
        "LeftPanelOpenOutlined",
        "LegendToggle",
        "LegendToggleOutlined",
        "Lens",
        "LensOutlined",
        "LibraryAdd",
        "LibraryAddCheck",
        "LibraryAddCheckOutlined",
        "LibraryAddOutlined",
        "LibraryBooks",
        "LibraryBooksOutlined",
        "LibraryMusic",
        "LibraryMusicOutlined",
        "LightbulbOutline",
        "LightbulbOutlined",
        "LineStyle",
        "LineStyleOutlined",
        "LineWeight",
        "LineWeightOutlined",
        "LinearScale",
        "LinearScaleOutlined",
        "Link",
        "LinkOff",
        "LinkOffOutlined",
        "LinkOutlined",
        "LinkedCamera",
        "LinkedCameraOutlined",
        "Linkedin",
        "List",
        "ListAlt",
        "ListAltOutlined",
        "ListOutlined",
        "LiveHelp",
        "LiveHelpOutlined",
        "LiveTv",
        "LiveTvOutlined",
        "LocalActivity",
        "LocalActivityOutlined",
        "LocalAirport",
        "LocalAirportOutlined",
        "LocalAtm",
        "LocalAtmOutlined",
        "LocalBar",
        "LocalBarOutlined",
        "LocalCafe",
        "LocalCafeOutlined",
        "LocalCarWash",
        "LocalCarWashOutlined",
        "LocalConvenienceStore",
        "LocalConvenienceStoreOutlined",
        "LocalDining",
        "LocalDiningOutlined",
        "LocalDrink",
        "LocalDrinkOutlined",
        "LocalFireDepartment",
        "LocalFireDepartmentOutlined",
        "LocalFlorist",
        "LocalFloristOutlined",
        "LocalGasStation",
        "LocalGasStationOutlined",
        "LocalGroceryStore",
        "LocalGroceryStoreOutlined",
        "LocalHospital",
        "LocalHospitalOutlined",
        "LocalHotel",
        "LocalHotelOutlined",
        "LocalLaundryService",
        "LocalLaundryServiceOutlined",
        "LocalLibrary",
        "LocalLibraryOutlined",
        "LocalMall",
        "LocalMallOutlined",
        "LocalMovies",
        "LocalMoviesOutlined",
        "LocalOffer",
        "LocalOfferOutlined",
        "LocalParking",
        "LocalParkingOutlined",
        "LocalPharmacy",
        "LocalPharmacyOutlined",
        "LocalPhone",
        "LocalPhoneOutlined",
        "LocalPizza",
        "LocalPizzaOutlined",
        "LocalPlay",
        "LocalPlayOutlined",
        "LocalPolice",
        "LocalPoliceOutlined",
        "LocalPostOffice",
        "LocalPostOfficeOutlined",
        "LocalPrintshop",
        "LocalPrintshopOutlined",
        "LocalSee",
        "LocalSeeOutlined",
        "LocalShipping",
        "LocalShippingOutlined",
        "LocalTaxi",
        "LocalTaxiOutlined",
        "LocationCity",
        "LocationCityOutlined",
        "LocationDisabled",
        "LocationDisabledOutlined",
        "LocationOff",
        "LocationOffOutlined",
        "LocationOn",
        "LocationOnOutlined",
        "LocationSearching",
        "LocationSearchingOutlined",
        "Lock",
        "LockOpen",
        "LockOpenOutlined",
        "LockOutline",
        "LockOutlined",
        "Login",
        "LoginOutlined",
        "Looks",
        "Looks3",
        "Looks4",
        "Looks5",
        "Looks6",
        "LooksOne",
        "LooksOneOutlined",
        "LooksOutlined",
        "LooksTwo",
        "LooksTwoOutlined",
        "Looks_3Outlined",
        "Looks_4Outlined",
        "Looks_5Outlined",
        "Looks_6Outlined",
        "Loop",
        "LoopOutlined",
        "Loupe",
        "LoupeOutlined",
        "LowPriority",
        "LowPriorityOutlined",
        "Loyalty",
        "LoyaltyOutlined",
        "Luggage",
        "LuggageOutlined",
        "Mail",
        "MailOutline",
        "MailOutlineOutlined",
        "MailOutlined",
        "Map",
        "MapOutlined",
        "MapUgc",
        "MapsUgcOutlined",
        "MarkChatRead",
        "MarkChatReadOutlined",
        "MarkChatUnread",
        "MarkChatUnreadOutlined",
        "MarkEmailRead",
        "MarkEmailReadOutlined",
        "MarkEmailUnread",
        "MarkEmailUnreadOutlined",
        "Markunread",
        "MarkunreadMailbox",
        "MarkunreadMailboxOutlined",
        "MarkunreadOutlined",
        "Masks",
        "MasksOutlined",
        "Maximize",
        "MaximizeOutlined",
        "Mediation",
        "MediationOutlined",
        "MedicalServices",
        "MedicalServicesOutlined",
        "MeetingRoom",
        "MeetingRoomOutlined",
        "Memory",
        "MemoryOutlined",
        "Menu",
        "MenuBook",
        "MenuBookOutlined",
        "MenuOpen",
        "MenuOpenOutlined",
        "MenuOutlined",
        "MenuStylized",
        "MergeType",
        "MergeTypeOutlined",
        "Message",
        "MessageOutlined",
        "Mic",
        "MicNone",
        "MicNoneOutlined",
        "MicOff",
        "MicOffOutlined",
        "MicOutlined",
        "Microwave",
        "MicrowaveOutlined",
        "MilitaryTech",
        "MilitaryTechOutlined",
        "Minimize",
        "MinimizeOutlined",
        "MiscellaneousServices",
        "MiscellaneousServicesOutlined",
        "MissedVideoCall",
        "MissedVideoCallOutlined",
        "Mission",
        "Mms",
        "MmsOutlined",
        "Mobile5G",
        "Mobile5GOutlined",
        "MobileDataOff",
        "MobileDataOffOutlined",
        "MobileDataOn",
        "MobileDataOnOutlined",
        "MobileFriendly",
        "MobileFriendlyOutlined",
        "MobileOff",
        "MobileOffOutlined",
        "MobileScreenShareOutlined",
        "MobileScreenshare",
        "ModeComment",
        "ModeCommentOutlined",
        "ModeEdit",
        "ModeOutlined",
        "ModelTraining",
        "ModelTrainingOutlined",
        "MonetizationOn",
        "MonetizationOnOutlined",
        "Money",
        "MoneyOff",
        "MoneyOffCsredOutlined",
        "MoneyOffOutlined",
        "MoneyOutlined",
        "MonochromePhotos",
        "MonochromePhotosOutlined",
        "Mood",
        "MoodBad",
        "MoodBadOutlined",
        "MoodOutlined",
        "Moped",
        "MopedOutlined",
        "More",
        "MoreHoriz",
        "MoreHorizOutlined",
        "MoreOutlined",
        "MoreTime",
        "MoreTimeOutlined",
        "MoreVert",
        "MoreVertOutlined",
        "MotionPhotosOn",
        "MotionPhotosOnOutlined",
        "MotionPhotosPause",
        "MotionPhotosPauseOutlined",
        "MotionPhotosPaused",
        "MotionPhotosPausedOutlined",
        "Motorcycle",
        "Mouse",
        "MouseOutlined",
        "MoveToInbox",
        "MoveToInboxOutlined",
        "Movie",
        "MovieCreation",
        "MovieCreationOutlined",
        "MovieFilter",
        "MovieFilterOutlined",
        "MovieOutlined",
        "MultilineChart",
        "MultilineChartOutlined",
        "MultipleStop",
        "MultipleStopOutlined",
        "Museum",
        "MuseumOutlined",
        "MusicNote",
        "MusicNoteOutlined",
        "MusicOff",
        "MusicOffOutlined",
        "MusicVideo",
        "MusicVideoOutlined",
        "MyLocation",
        "MyLocationOutlined",
        "NaVigateBefore",
        "NaVigateNext",
        "Nat",
        "NatOutlined",
        "Nature",
        "NatureOutlined",
        "NaturePeople",
        "NaturePeopleOutlined",
        "NavigateBeforeOutlined",
        "NavigateNextOutlined",
        "Navigation",
        "NavigationOutlined",
        "NearMe",
        "NearMeDisabled",
        "NearMeDisabledOutlined",
        "NearMeOutlined",
        "NetworkCell",
        "NetworkCheck",
        "NetworkCheckOutlined",
        "NetworkLocked",
        "NetworkLockedOutlined",
        "NetworkWifi",
        "NewReleases",
        "NewReleasesOutlined",
        "NextPlan",
        "NextPlanOutlined",
        "NextWeek",
        "NextWeekOutlined",
        "Nfc",
        "NfcOutlined",
        "NightShelter",
        "NightShelterOutlined",
        "NightsStay",
        "NightsStayOutlined",
        "NoBackpack",
        "NoBackpackOutlined",
        "NoCell",
        "NoCellOutlined",
        "NoDrinks",
        "NoDrinksOutlined",
        "NoEncryption",
        "NoEncryptionGmailerrorredOutlined",
        "NoEncryptionOutlined",
        "NoFlash",
        "NoFlashOutlined",
        "NoFood",
        "NoFoodOutlined",
        "NoLuggage",
        "NoLuggageOutlined",
        "NoMeals",
        "NoMealsOutlined",
        "NoMeetingRoom",
        "NoMeetingRoomOutlined",
        "NoPhotography",
        "NoPhotographyOutlined",
        "NoSim",
        "NoSimOutlined",
        "NoStroller",
        "NoStrollerOutlined",
        "NoTransfer",
        "NoTransferOutlined",
        "North",
        "NorthEast",
        "NorthEastOutlined",
        "NorthOutlined",
        "NorthWest",
        "NorthWestOutlined",
        "NotAccessible",
        "NotAccessibleOutlined",
        "NotInterested",
        "NotInterestedOutlined",
        "NotListedLocationOutlined",
        "NotListedlocation",
        "NotStarted",
        "NotStartedOutlined",
        "Note",
        "NoteAdd",
        "NoteAddOutlined",
        "NoteOutlined",
        "Notes",
        "NotesOutlined",
        "NotificationImportant",
        "NotificationImportantOutlined",
        "Notifications",
        "NotificationsActive",
        "NotificationsActiveOutlined",
        "NotificationsNone",
        "NotificationsNoneOutlined",
        "NotificationsOff",
        "NotificationsOffOutlined",
        "NotificationsOutlined",
        "NotificationsPaused",
        "NotificationsPausedOutlined",
        "Numbered",
        "Offer",
        "OfferOutlined",
        "OfflineBolt",
        "OfflineBoltOutlined",
        "OfflinePin",
        "OfflinePinOutlined",
        "OnDemandVideoOutlined",
        "OndemandVideo",
        "OnlinePrediction",
        "OnlinePredictionOutlined",
        "Opacity",
        "OpacityOutlined",
        "OpenInBrowser",
        "OpenInBrowserOutlined",
        "OpenInFull",
        "OpenInFullOutlined",
        "OpenInNew",
        "OpenInNewOutlined",
        "OpenPanel",
        "OpenWith",
        "OpenWithOutlined",
        "Outbond",
        "OutbondOutlined",
        "OutdoorGrill",
        "OutdoorGrillOutlined",
        "Outlet",
        "OutletOutlined",
        "OutlinedFlagOutlined",
        "Pages",
        "PagesOutlined",
        "Pageview",
        "PageviewOutlined",
        "Palette",
        "PaletteOutlined",
        "PanTool",
        "PanToolOutlined",
        "Panorama",
        "PanoramaFishEye",
        "PanoramaFishEyeOutlined",
        "PanoramaHorizontal",
        "PanoramaHorizontalOutlined",
        "PanoramaOutlined",
        "PanoramaVertical",
        "PanoramaVerticalOutlined",
        "PanoramaWideAngle",
        "PanoramaWideAngleOutlined",
        "PartyMode",
        "PartyModeOutlined",
        "Pause",
        "PauseCircleFilled",
        "PauseCircleFilledOutlined",
        "PauseCircleOutline",
        "PauseCircleOutlined",
        "PauseOutlined",
        "PausePresentationOutlined",
        "Pausepresentation",
        "PayForWorkOutlined",
        "Payment",
        "PaymentOutlined",
        "Payments",
        "PaymentsOutlined",
        "PedalBike",
        "PedalBikeOutlined",
        "Pending",
        "PendingActions",
        "PendingActionsOutlined",
        "PendingOutlined",
        "People",
        "PeopleAlt",
        "PeopleAltOutlined",
        "PeopleOutline",
        "PeopleOutlined",
        "PermCameraMic",
        "PermCameraMicOutlined",
        "PermContactCalendar",
        "PermContactCalendarOutlined",
        "PermDataSetting",
        "PermDataSettingOutlined",
        "PermDeviceInformation",
        "PermDeviceInformationOutlined",
        "PermIdentity",
        "PermIdentityOutlined",
        "PermMedia",
        "PermMediaOutlined",
        "PermPhoneMsg",
        "PermPhoneMsgOutlined",
        "PermScanWifi",
        "PermScanWifiOutlined",
        "Person",
        "PersonAdd",
        "PersonAddAlt",
        "PersonAddAlt_1Outlined",
        "PersonAddDisabled",
        "PersonAddDisabledOutlined",
        "PersonAddOutlined",
        "PersonOutline",
        "PersonOutlineOutlined",
        "PersonOutlined",
        "PersonPin",
        "PersonPinCircle",
        "PersonPinCircleOutlined",
        "PersonPinOutlined",
        "PersonRemove",
        "PersonRemoveAlt",
        "PersonRemoveAlt_1Outlined",
        "PersonRemoveOutlined",
        "PersonSearch",
        "PersonSearchOutlined",
        "PersonalVideo",
        "PersonalVideoOutlined",
        "PestControl",
        "PestControlOutlined",
        "PestControlRodent",
        "PestControlRodentOutlined",
        "Pets",
        "PetsOutlined",
        "Phone",
        "PhoneAndroid",
        "PhoneAndroidOutlined",
        "PhoneBluetoothSpeaker",
        "PhoneBluetoothSpeakerOutlined",
        "PhoneCallback",
        "PhoneCallbackOutlined",
        "PhoneDisabled",
        "PhoneDisabledOutlined",
        "PhoneEnabled",
        "PhoneEnabledOutlined",
        "PhoneForwarded",
        "PhoneForwardedOutlined",
        "PhoneInTalk",
        "PhoneInTalkOutlined",
        "PhoneIphone",
        "PhoneIphoneOutlined",
        "PhoneLocked",
        "PhoneLockedOutlined",
        "PhoneMissed",
        "PhoneMissedOutlined",
        "PhoneOutlined",
        "PhonePaused",
        "PhonePausedOutlined",
        "Phonelink",
        "PhonelinkErase",
        "PhonelinkEraseOutlined",
        "PhonelinkLock",
        "PhonelinkLockOutlined",
        "PhonelinkOff",
        "PhonelinkOffOutlined",
        "PhonelinkOutlined",
        "PhonelinkRing",
        "PhonelinkRingOutlined",
        "PhonelinkSetup",
        "PhonelinkSetupOutlined",
        "Photo",
        "PhotoAlbum",
        "PhotoAlbumOutlined",
        "PhotoCamera",
        "PhotoCameraOutlined",
        "PhotoFilter",
        "PhotoFilterOutlined",
        "PhotoLibrary",
        "PhotoLibraryOutlined",
        "PhotoOutlined",
        "PhotoSizeSelectActual",
        "PhotoSizeSelectActualOutlined",
        "PhotoSizeSelectLarge",
        "PhotoSizeSelectLargeOutlined",
        "PhotoSizeSelectSmall",
        "PhotoSizeSelectSmallOutlined",
        "PictureAsPdf",
        "PictureAsPdfOutlined",
        "PictureInPicture",
        "PictureInPictureAltOutlined",
        "PictureInPictureOutlined",
        "PieChart",
        "PieChartOutlined",
        "PinDrop",
        "PinDropOutlined",
        "Place",
        "PlaceOutlined",
        "Placeholder",
        "PlaceholderOutlined",
        "Plagiarism",
        "PlagiarismOutlined",
        "PlayArrow",
        "PlayArrowOutlined",
        "PlayCircleFilled",
        "PlayCircleFilledOutlined",
        "PlayCircleOutline",
        "PlayCircleOutlined",
        "PlayForWork",
        "PlaylistAdd",
        "PlaylistAddCheck",
        "PlaylistAddCheckOutlined",
        "PlaylistAddOutlined",
        "PlaylistPlay",
        "PlaylistPlayOutlined",
        "Plumbing",
        "PlumbingOutlined",
        "PlusOne",
        "PlusOneOutlined",
        "PointOfSale",
        "PointOfSaleOutlined",
        "Policy",
        "PolicyOutlined",
        "Poll",
        "PollOutlined",
        "Polymer",
        "PolymerOutlined",
        "Pool",
        "PoolOutlined",
        "PortableWifiOff",
        "PortableWifiOffOutlined",
        "Portrait",
        "PortraitOutlined",
        "PostAdd",
        "PostAddOutlined",
        "Power",
        "PowerInput",
        "PowerInputOutlined",
        "PowerOff",
        "PowerOffOutlined",
        "PowerOutlined",
        "PowerSettingsNew",
        "PowerSettingsNewOutlined",
        "PrecisionManufacturingOutlined",
        "PregnantWoman",
        "PregnantWomanOutlined",
        "PresentToAll",
        "PresentToAllOutlined",
        "Preview",
        "PreviewOutlined",
        "Print",
        "PrintDisabled",
        "PrintDisabledOutlined",
        "PrintOutlined",
        "PriorityHigh",
        "PriorityHighOutlined",
        "PrivacyTip",
        "PrivacyTipOutlined",
        "Psychology",
        "PsychologyOutlined",
        "Public",
        "PublicOff",
        "PublicOffOutlined",
        "PublicOutlined",
        "Publish",
        "PublishOutlined",
        "PublishedWithChanges",
        "PublishedWithChangesOutlined",
        "PushPinOutlined",
        "Pushpin",
        "QrCode",
        "QrCode2",
        "QrCodeOutlined",
        "QrCodeScanner",
        "QrCodeScannerOutlined",
        "QueryBuilder",
        "QueryBuilderOutlined",
        "QuestionAnswer",
        "QuestionAnswerOutlined",
        "QuestionMark",
        "Queue",
        "QueueMusic",
        "QueueMusicOutlined",
        "QueueOutlined",
        "QueuePlayNext",
        "QueuePlayNextOutlined",
        "QuickReply",
        "QuickreplyOutlined",
        "Quote",
        "Radio",
        "RadioButtonChecked",
        "RadioButtonCheckedOutlined",
        "RadioButtonUnchecked",
        "RadioButtonUncheckedOutlined",
        "RadioOutlined",
        "RateReview",
        "RateReviewOutlined",
        "ReadMore",
        "ReadMoreOutlined",
        "Receipt",
        "ReceiptLong",
        "ReceiptLongOutlined",
        "ReceiptOutlined",
        "RecentActors",
        "RecentActorsOutlined",
        "RecordVoiceOver",
        "RecordVoiceOverOutlined",
        "Redeem",
        "RedeemOutlined",
        "Redo",
        "RedoOutlined",
        "ReduceCapacity",
        "ReduceCapacityOutlined",
        "Refresh",
        "RefreshOutlined",
        "Remove",
        "RemoveCircle",
        "RemoveCircleOutline",
        "RemoveCircleOutlineOutlined",
        "RemoveCircleOutlined",
        "RemoveFromQueue",
        "RemoveFromQueueOutlined",
        "RemoveOutlined",
        "RemoveRedEye",
        "RemoveRedEyeOutlined",
        "RemoveShoppingCart",
        "RemoveShoppingCartOutlined",
        "Reorder",
        "ReorderOutlined",
        "Repeat",
        "RepeatOne",
        "RepeatOneOutlined",
        "RepeatOutlined",
        "Replay",
        "Replay10",
        "Replay10Outlined",
        "Replay30",
        "Replay30Outlined",
        "Replay5",
        "Replay5Outlined",
        "ReplayOutlined",
        "Reply",
        "ReplyAll",
        "ReplyAllOutlined",
        "ReplyOutlined",
        "Report",
        "ReportGmailerrorredOutlined",
        "ReportOff",
        "ReportOffOutlined",
        "ReportOutlined",
        "ReportProblem",
        "ReportProblemOutlined",
        "RequestPage",
        "RequestPageOutlined",
        "RequestQuote",
        "RequestQuoteOutlined",
        "Resistor",
        "ResizeBottomRight",
        "Restaurant",
        "RestaurantMenu",
        "RestaurantMenuOutlined",
        "RestaurantOutlined",
        "Restore",
        "RestoreFromTrash",
        "RestoreFromTrashOutlined",
        "RestoreOutlined",
        "RestorePage",
        "RestorePageOutlined",
        "RiceBowl",
        "RiceBowlOutlined",
        "RightPanelClose",
        "RightPanelCloseOutlined",
        "RightPanelOpen",
        "RightPanelOpenOutlined",
        "RingVolume",
        "RingVolumeOutlined",
        "Roofing",
        "RoofingOutlined",
        "Room",
        "RoomOutlined",
        "RoomPreferences",
        "RoomPreferencesOutlined",
        "RoomService",
        "RoomServiceOutlined",
        "Rotate90DegreesCcw",
        "Rotate90DegreesCcwOutlined",
        "RotateLeft",
        "RotateLeftOutlined",
        "RotateRight",
        "RotateRightOutlined",
        "Rotation3D",
        "Rotation3DOutlined",
        "RoundedCorner",
        "RoundedCornerOutlined",
        "Router",
        "RouterOff",
        "RouterOutlined",
        "Rowing",
        "RowingOutlined",
        "RssFeed",
        "RssFeedOutlined",
        "Rule",
        "RuleFolder",
        "RuleFolderOutlined",
        "RuleOutlined",
        "RunCircle",
        "RunCircleOutlined",
        "RvHookup",
        "RvHookupOutlined",
        "Sanitizer",
        "SanitizerOutlined",
        "Satellite",
        "SatelliteOutlined",
        "SatelliteUplink",
        "SatelliteVariant",
        "SatelliteVariant2",
        "SaveAlt",
        "SaveAltOutlined",
        "SaveOutlined",
        "Scanner",
        "ScannerOutlined",
        "ScatterPlot",
        "ScatterPlotOutlined",
        "Schedule",
        "ScheduleOutlined",
        "School",
        "SchoolOutlined",
        "Science",
        "ScienceOutlined",
        "ScleaningServices",
        "Score",
        "ScoreOutlined",
        "ScreenLockLandscape",
        "ScreenLockLandscapeOutlined",
        "ScreenLockPortrait",
        "ScreenLockPortraitOutlined",
        "ScreenLockRotation",
        "ScreenLockRotationOutlined",
        "ScreenRotation",
        "ScreenRotationOutlined",
        "ScreenShareOutlined",
        "Screenshare",
        "SdCard",
        "SdCardAlertOutlined",
        "SdCardOutlined",
        "SdStorage",
        "SdStorageOutlined",
        "Search",
        "SearchOff",
        "SearchOffOutlined",
        "SearchOutlined",
        "Security",
        "SecurityOutlined",
        "SelectAll",
        "SelectAllOutlined",
        "SelfImprovement",
        "SelfImprovementOutlined",
        "Send",
        "SendOutlined",
        "SensorDoor",
        "SensorDoorOutlined",
        "SensorWindow",
        "SensorWindowOutlined",
        "SentimentDissatisfied",
        "SentimentDissatisfiedOutlined",
        "SentimentNeutral",
        "SentimentNeutralOutlined",
        "SentimentSatisfied",
        "SentimentSatisfiedAltOutlined",
        "SentimentSatisfiedOutlined",
        "SentimentVeryDissatisfied",
        "SentimentVeryDissatisfiedOutlined",
        "SentimentVerySatisfied",
        "SentimentVerySatisfiedOutlined",
        "SentimentsatisfiedAlt",
        "SetMeal",
        "SetMealOutlined",
        "Settings",
        "SettingsApplications",
        "SettingsApplicationsOutlined",
        "SettingsBackupRestore",
        "SettingsBackupRestoreOutlined",
        "SettingsBluetooth",
        "SettingsBluetoothOutlined",
        "SettingsBrightness",
        "SettingsBrightnessOutlined",
        "SettingsCell",
        "SettingsCellOutlined",
        "SettingsEthernet",
        "SettingsEthernetOutlined",
        "SettingsInputAntenna",
        "SettingsInputAntennaOutlined",
        "SettingsInputComponent",
        "SettingsInputComponentOutlined",
        "SettingsInputComposite",
        "SettingsInputCompositeOutlined",
        "SettingsInputHdmi",
        "SettingsInputHdmiOutlined",
        "SettingsInputSvideoOutlined",
        "SettingsInputVideo",
        "SettingsOutlined",
        "SettingsOverscan",
        "SettingsOverscanOutlined",
        "SettingsPhone",
        "SettingsPhoneOutlined",
        "SettingsPower",
        "SettingsPowerOutlined",
        "SettingsRemote",
        "SettingsRemoteOutlined",
        "SettingsSystemDaydream",
        "SettingsSystemDaydreamOutlined",
        "SettingsVoice",
        "SettingsVoiceOutlined",
        "Share",
        "ShareOutlined",
        "ShieldBug",
        "ShieldLock",
        "Shop",
        "ShopOutlined",
        "ShopTwo",
        "ShopTwoOutlined",
        "ShoppingBag",
        "ShoppingBagOutlined",
        "ShoppingBasket",
        "ShoppingBasketOutlined",
        "ShoppingCart",
        "ShoppingCartOutlined",
        "ShortText",
        "ShortTextOutlined",
        "ShowChart",
        "ShowChartOutlined",
        "Shuffle",
        "ShuffleOutlined",
        "ShutterSpeedOutlined",
        "Shutterspeed",
        "Sick",
        "SickOutlined",
        "SignalCellular4Bar",
        "SignalCellularAltOutlined",
        "SignalCellularNoSim",
        "SignalCellularNull",
        "SignalCellularOff",
        "SignalCellularOffOutlined",
        "SignalCellular_4BarOutlined",
        "SignalCellularconnectedNoInternet_4Bar",
        "SignalCellularoInternetOutlined",
        "SignalCellularoSimOutlined",
        "SignalCellularullOutlined",
        "SignalWifi4Bar",
        "SignalWifi4BarLock",
        "SignalWifiOff",
        "SignalWifiOffOutlined",
        "SignalWifi_4BarLockOutlined",
        "SignalWifi_4BarOutlined",
        "SimCard",
        "SimCardAlert",
        "SimCardOutlined",
        "SingleBed",
        "SingleBedOutlined",
        "SixFtApart",
        "SkipNext",
        "SkipNextOutlined",
        "SkipPrevious",
        "SkipPreviousOutlined",
        "Slideshow",
        "SlideshowOutlined",
        "SlowMotionVideo",
        "SlowMotionVideoOutlined",
        "SmartButton",
        "SmartButtonOutlined",
        "Smartphone",
        "SmartphoneOutlined",
        "SmokeFree",
        "SmokeFreeOutlined",
        "SmokingRooms",
        "SmokingRoomsOutlined",
        "Sms",
        "SmsFailed",
        "SmsFailedOutlined",
        "SmsOutlined",
        "SnippetFolder",
        "SnippetFolderOutlined",
        "Snooze",
        "SnoozeOutlined",
        "Soap",
        "SoapOutlined",
        "Sort",
        "SortByAlpha",
        "SortByAlphaOutlined",
        "SortOutlined",
        "Source",
        "SourceOutlined",
        "South",
        "SouthEast",
        "SouthEastOutlined",
        "SouthOutlined",
        "SouthWest",
        "SouthWestOutlined",
        "Spa",
        "SpaOutlined",
        "SpaceBar",
        "SpaceBarOutlined",
        "Speaker",
        "SpeakerGroup",
        "SpeakerGroupOutlined",
        "SpeakerNotes",
        "SpeakerNotesOff",
        "SpeakerNotesOffOutlined",
        "SpeakerNotesOutlined",
        "SpeakerOutlined",
        "SpeakerPhone",
        "SpeakerPhoneOutlined",
        "Speed",
        "SpeedOutlined",
        "Spellcheck",
        "SpellcheckOutlined",
        "SportEsport",
        "Sports",
        "SportsBar",
        "SportsBarOutlined",
        "SportsBaseball",
        "SportsBaseballOutlined",
        "SportsBasketball",
        "SportsBasketballOutlined",
        "SportsCricket",
        "SportsCricketOutlined",
        "SportsEsportsOutlined",
        "SportsFootball",
        "SportsFootballOutlined",
        "SportsGolf",
        "SportsGolfOutlined",
        "SportsHandball",
        "SportsHandballOutlined",
        "SportsHockey",
        "SportsHockeyOutlined",
        "SportsKabaddi",
        "SportsKabaddiOutlined",
        "SportsMma",
        "SportsMmaOutlined",
        "SportsMotorsports",
        "SportsMotorsportsOutlined",
        "SportsOutlined",
        "SportsRugby",
        "SportsRugbyOutlined",
        "SportsSoccerOutlined",
        "SportsTennis",
        "SportsTennisOutlined",
        "SportsVolleyball",
        "SportsVolleyballOutlined",
        "Sportssoccer",
        "SquareEditOutlined",
        "SquareFoot",
        "SquareFootOutlined",
        "StackedLineChart",
        "StackedLineChartOutlined",
        "Stairs",
        "StairsOutlined",
        "Star",
        "StarBorder",
        "StarBorderOutlined",
        "StarBorderPurpleOutlined",
        "StarHalf",
        "StarHalfOutlined",
        "StarOutlined",
        "StarPurpleOutlined",
        "StarRateOutlined",
        "Stars",
        "StarsCircle",
        "StarsOutlined",
        "StayCurrentLandscape",
        "StayCurrentLandscapeOutlined",
        "StayCurrentPortrait",
        "StayCurrentPortraitOutlined",
        "StayPrimaryLandscape",
        "StayPrimaryLandscapeOutlined",
        "StayPrimaryPortraitOutlined",
        "StayPrimaryportrait",
        "StickyNote",
        "StickyNote_2Outlined",
        "Stop",
        "StopCircle",
        "StopCircleOutlined",
        "StopOutlined",
        "StopScreenShareOutlined",
        "Stopscreenshare",
        "Storage",
        "StorageOutlined",
        "Store",
        "StoreMallDirectory",
        "StoreMallDirectoryOutlined",
        "StoreOutlined",
        "Storefront",
        "StorefrontOutlined",
        "Straighten",
        "StraightenOutlined",
        "Streetview",
        "StreetviewOutlined",
        "StrikethroughS",
        "StrikethroughSOutlined",
        "Stroller",
        "StrollerOutlined",
        "Style",
        "StyleOutlined",
        "SubdirectoryArrowLeft",
        "SubdirectoryArrowLeftOutlined",
        "SubdirectoryArrowRight",
        "SubdirectoryArrowRightOutlined",
        "Subject",
        "SubjectOutlined",
        "Subscript",
        "SubscriptOutlined",
        "Subscriptions",
        "SubscriptionsOutlined",
        "Subtitles",
        "SubtitlesOff",
        "SubtitlesOffOutlined",
        "SubtitlesOutlined",
        "Subway",
        "SubwayOutlined",
        "Superscript",
        "SuperscriptOutlined",
        "SupervisedUserCircle",
        "SupervisedUserCircleOutlined",
        "SupervisorAccount",
        "SupervisorAccountOutlined",
        "Support",
        "SupportAgent",
        "SupportAgentOutlined",
        "SupportOutlined",
        "SurroundSoundOutlined",
        "Surroundsound",
        "SwapCalls",
        "SwapCallsOutlined",
        "SwapHoriz",
        "SwapHorizOutlined",
        "SwapHorizontalCircle",
        "SwapHorizontalCircleOutlined",
        "SwapVert",
        "SwapVertOutlined",
        "SwapVerticalCircle",
        "SwapVerticalCircleOutlined",
        "SwitchCamera",
        "SwitchCameraOutlined",
        "SwitchLeft",
        "SwitchLeftOutlined",
        "SwitchRight",
        "SwitchRightOutlined",
        "SwitchVideo",
        "SwitchVideoOutlined",
        "Sync",
        "SyncAltOutlined",
        "SyncDisabled",
        "SyncDisabledOutlined",
        "SyncOutlined",
        "SyncProblem",
        "SyncProblemOutlined",
        "SystemStatus",
        "SystemUpdate",
        "SystemUpdateAlt",
        "SystemUpdateAltOutlined",
        "SystemUpdateOutlined",
        "Tab",
        "TabOutlined",
        "TabUnselected",
        "TabUnselectedOutlined",
        "TableChart",
        "TableChartOutlined",
        "TableRows",
        "TableRowsOutlined",
        "TableView",
        "TableViewOutlined",
        "Tablet",
        "TabletAndroid",
        "TabletAndroidOutlined",
        "TabletMac",
        "TabletMacOutlined",
        "TabletOutlined",
        "TagFaces",
        "TagFacesOutlined",
        "TapAndPlay",
        "TapAndPlayOutlined",
        "Tapas",
        "TapasOutlined",
        "Terrain",
        "TerrainOutlined",
        "TestDoNotUse",
        "TextFields",
        "TextFieldsOutlined",
        "TextFormat",
        "TextFormatOutlined",
        "TextRotateUp",
        "TextRotateUpOutlined",
        "TextRotateVertical",
        "TextRotateVerticalOutlined",
        "TextRotationAngleDown",
        "TextRotationAngleUp",
        "TextRotationAngledownOutlined",
        "TextRotationAngleupOutlined",
        "TextRotationDown",
        "TextRotationDownOutlined",
        "TextRotationNone",
        "TextRotationNoneOutlined",
        "TextSnippet",
        "TextSnippetOutlined",
        "Textsms",
        "TextsmsOutlined",
        "Texture",
        "TextureOutlined",
        "Theaters",
        "TheatersOutlined",
        "Thermometer",
        "ThermostatOutlined",
        "ThumbDown",
        "ThumbDownAlt",
        "ThumbDownAltOutlined",
        "ThumbDownOutlined",
        "ThumbUp",
        "ThumbUpAlt",
        "ThumbUpAltOutlined",
        "ThumbUpOutlined",
        "ThumbsUpDown",
        "ThumbsUpDownOutlined",
        "TimeToLeaveOutlined",
        "Timelapse",
        "TimelapseOutlined",
        "Timeline",
        "TimelineOutlined",
        "Timer",
        "Timer10",
        "Timer10Outlined",
        "Timer3",
        "Timer3Outlined",
        "TimerOff",
        "TimerOffOutlined",
        "TimerOutlined",
        "Title",
        "TitleOutlined",
        "Toc",
        "TocOutlined",
        "Today",
        "TodayOutlined",
        "ToggleOff",
        "ToggleOffOutlined",
        "ToggleOn",
        "ToggleOnOutlined",
        "Toll",
        "TollOutlined",
        "Tonality",
        "TonalityOutlined",
        "Topic",
        "TopicOutlined",
        "TouchApp",
        "TouchAppOutlined",
        "Tour",
        "TourOutlined",
        "Toys",
        "ToysOutlined",
        "TrackChanges",
        "TrackChangesOutlined",
        "Traffic",
        "TrafficOutlined",
        "Train",
        "TrainOutlined",
        "Tram",
        "TramOutlined",
        "TransferWithinAStation",
        "TransferWithinAStationOutlined",
        "Transform",
        "TransformOutlined",
        "TransitEnterexit",
        "TransitEnterexitOutlined",
        "Translate",
        "TranslateOutlined",
        "TrendingDown",
        "TrendingDownOutlined",
        "TrendingFlat",
        "TrendingFlatOutlined",
        "TrendingUp",
        "TrendingUpOutlined",
        "TripOrigin",
        "TripOriginOutlined",
        "Tty",
        "TtyOutlined",
        "Tune",
        "TuneOutlined",
        "TurnedIn",
        "TurnedInNot",
        "TurnedInNotOutlined",
        "TurnedInOutlined",
        "Tv",
        "TvOff",
        "TvOffOutlined",
        "TvOutlined",
        "Twitter",
        "TwitterX",
        "TwoWheeler",
        "TwoWheelerOutlined",
        "UdynamicFeed",
        "Umbrella",
        "UmbrellaOutlined",
        "Unarchive",
        "UnarchiveOutlined",
        "Undo",
        "UndoOutlined",
        "UnfoldLess",
        "UnfoldLessOutlined",
        "UnfoldMore",
        "UnfoldMoreOutlined",
        "Unpublished",
        "UnpublishedOutlined",
        "Unsubscribe",
        "UnsubscribeOutlined",
        "Update",
        "UpdateDisabled",
        "UpdateOutlined",
        "Upgrade",
        "UpgradeOutlined",
        "Upload",
        "UploadOutlined",
        "Usb",
        "UsbOutlined",
        "UsignalCellularAlt",
        "Verified",
        "VerifiedOutlined",
        "VerifiedUser",
        "VerifiedUserOutlined",
        "VerticalAlignBottom",
        "VerticalAlignBottomOutlined",
        "VerticalAlignCenter",
        "VerticalAlignCenterOutlined",
        "VerticalAlignTop",
        "VerticalAlignTopOutlined",
        "VerticalDistribute",
        "VerticalSplit",
        "VerticalSplitOutlined",
        "ViasatBrowser",
        "Vibration",
        "VibrationOutlined",
        "Video4K",
        "Video4KOutlined",
        "VideoCall",
        "VideoCallOutlined",
        "VideoLabel",
        "VideoLabelOutlined",
        "VideoLibrary",
        "VideoLibraryOutlined",
        "VideoSettings",
        "VideoSettingsOutlined",
        "Videocam",
        "VideocamOff",
        "VideocamOffOutlined",
        "VideocamOutlined",
        "VideogameAsset",
        "VideogameAssetOutlined",
        "View360",
        "View360Outlined",
        "ViewAgenda",
        "ViewAgendaOutlined",
        "ViewArray",
        "ViewArrayOutlined",
        "ViewCarousel",
        "ViewCarouselOutlined",
        "ViewColumn",
        "ViewColumnOutlined",
        "ViewComfy",
        "ViewComfyOutlined",
        "ViewCompact",
        "ViewCompactOutlined",
        "ViewDay",
        "ViewDayOutlined",
        "ViewHeadline",
        "ViewHeadlineOutlined",
        "ViewList",
        "ViewListOutlined",
        "ViewModule",
        "ViewModuleOutlined",
        "ViewQuilt",
        "ViewQuiltOutlined",
        "ViewSidebar",
        "ViewSidebarOutlined",
        "ViewStream",
        "ViewStreamOutlined",
        "ViewWeek",
        "ViewWeekOutlined",
        "Vignette",
        "VignetteOutlined",
        "VirusComputer",
        "Visibility",
        "VisibilityOff",
        "VisibilityOffOutlined",
        "VisibilityOutlined",
        "VoiceChat",
        "VoiceChatOutlined",
        "VoiceOverOff",
        "VoiceOverOffOutlined",
        "Voicemail",
        "VoicemailOutlined",
        "VolumeDown",
        "VolumeDownOutlined",
        "VolumeMute",
        "VolumeMuteOutlined",
        "VolumeOff",
        "VolumeOffOutlined",
        "VolumeUp",
        "VolumeUpOutlined",
        "VpnKey",
        "VpnKeyOutlined",
        "VpnLock",
        "VpnLockOutlined",
        "Wallpaper",
        "WallpaperOutlined",
        "Warning",
        "WarningAmberOutlined",
        "WarningOutlined",
        "Wash",
        "WashOutlined",
        "Watch",
        "WatchLater",
        "WatchLaterOutlined",
        "WatchOutlined",
        "WaterDamage",
        "WaterDamageOutlined",
        "Wave",
        "WavesOutlined",
        "WbAuto",
        "WbAutoOutlined",
        "WbCloudy",
        "WbCloudyOutlined",
        "WbIncandescent",
        "WbIncandescentOutlined",
        "WbIridescent",
        "WbIridescentOutlined",
        "WbSunny",
        "WbSunnyOutlined",
        "Wc",
        "WcOutlined",
        "Web",
        "WebAsset",
        "WebAssetOutlined",
        "WebOutlined",
        "Weekend",
        "WeekendOutlined",
        "West",
        "WestOutlined",
        "Whatsapp",
        "WhatsappOutlined",
        "Whatshot",
        "WhatshotOutlined",
        "WheelchairPickup",
        "WheelchairPickupOutlined",
        "WhereToVote",
        "WhereToVoteOutlined",
        "Widgets",
        "WidgetsOutlined",
        "Wifi",
        "WifiCalling",
        "WifiCallingOutlined",
        "WifiLock",
        "WifiLockOutlined",
        "WifiOff",
        "WifiOffOutlined",
        "WifiOutlined",
        "WifiProtectedSetup",
        "WifiProtectedSetupOutlined",
        "WifiTethering",
        "WifiTetheringOutlined",
        "WineBar",
        "WineBarOutlined",
        "Work",
        "WorkOff",
        "WorkOffOutlined",
        "WorkOutline",
        "WorkOutlined",
        "WrapText",
        "WrapTextOutlined",
        "WrongLocation",
        "WrongLocationOutlined",
        "Wysiwyg",
        "WysiwygOutlined",
        "Youtube",
        "YoutubeSearched",
        "YoutubeSearchedForOutlined",
        "ZoomIn",
        "ZoomInOutlined",
        "ZoomOut",
        "ZoomOutMap",
        "ZoomOutMapOutlined",
        "ZoomOutOutlined"
      ]
    },
    {
      "importPath": "@viasat/beam-icons/illustrative-icons",
      "icons": [
        "AccountManagement",
        "Action",
        "ActiveCyberDefense",
        "AiBrainStokes",
        "AirlinePassengers",
        "Alert",
        "AluminumCan",
        "AmericanFlag",
        "AndMore",
        "App",
        "AppUser",
        "Apple",
        "Armor",
        "Arrow",
        "Audio",
        "AugmentedReality",
        "Badge",
        "BarGraph",
        "Barrier",
        "Battery",
        "BattleRoyale",
        "BattlefieldAwarenes",
        "Bike",
        "BillBreakdown",
        "Billing",
        "Biometric",
        "BloodPressureCuff",
        "Bluetooth",
        "BluetoothConnected",
        "BluetoothDisconnected",
        "BluetoothSearching",
        "Bookmark",
        "Boost",
        "BrainConnectionPoints",
        "BrainNetwork",
        "BreachSecurity",
        "BreadGrains",
        "Briefcase",
        "Browser",
        "Bug",
        "Building",
        "Burglar",
        "Bus",
        "Business",
        "BusinessCards",
        "C130",
        "Cabling",
        "CalendarMeals",
        "CardboardBox",
        "Caution",
        "CellPhone",
        "CellPhoneWifi",
        "CellTower",
        "Certificate",
        "CertificateLandscape",
        "ChangeInstallation",
        "ChangePlan",
        "Charge",
        "Chat1",
        "Chat2",
        "CheckMark",
        "Checked",
        "Chip",
        "Circuit",
        "Clock",
        "Cloud",
        "CloudDownload",
        "CloudUpload",
        "CloudUploadDownload1",
        "CloudUpoladDownload2",
        "Coding",
        "CodingShield",
        "Coffee",
        "CoffeeCup",
        "CoffeeTea",
        "CommercialAirlinerPlane",
        "CommercialAviationBroadcastTv",
        "CommercialAviationEfbServices",
        "CommercialAviationElectronicLogbook",
        "CommercialAviationPaymentCredit",
        "CommercialAviationRelax",
        "CommercialAviationServiceManagement",
        "CommercialAviationShop",
        "CommercialAviationStream",
        "CommercialAviationWatch",
        "CommercialAviationWeather",
        "CommercialAviationWork",
        "Communication",
        "CompareBarData",
        "ComputerCheck",
        "ComputerChip",
        "ComputerDisk",
        "ComputerHardwareAccessories",
        "ComputerHealth",
        "ConferenceRoom",
        "Connect",
        "Constant",
        "ContactUs",
        "CordlessPhone",
        "CradlingHands",
        "CrowdSourced",
        "Cruiseship",
        "CustomerService",
        "CustomerServiceRep",
        "Cutlery",
        "Dairy",
        "Data",
        "Data2X",
        "DataAllowance",
        "DataManagement",
        "Date",
        "Dealer",
        "DecisionMaking",
        "Demand",
        "Dial",
        "DigitalSuite",
        "DiscLaptop",
        "DishTxrfPwr",
        "DocumentDelivery",
        "Documents",
        "Domino",
        "Download",
        "DownloadMobileApp",
        "DownloadPdf",
        "Drone",
        "Earbuds",
        "ElectricCar",
        "EmailSimple",
        "EmailUs",
        "End",
        "Entertainment",
        "ExedeVoice",
        "Expert",
        "FaceShield",
        "Facemasks",
        "FamilyCare",
        "Farming",
        "Faucet",
        "FighterJetSide",
        "FighterJetTop",
        "Fighting",
        "FinancialStrength",
        "Fingerprint",
        "Fire",
        "FirstPersonShooter",
        "FlagCircle",
        "Flex",
        "FlightCrew",
        "Football",
        "FruitsVeggies",
        "FunelGear",
        "Funnel",
        "Gaming",
        "Gavel",
        "GeneralPeople",
        "GeneralSatellite",
        "GlobalAir",
        "GlobalAir2",
        "Globe",
        "GradHat",
        "Graph",
        "Grounding",
        "Growth",
        "HandsWifi",
        "HandswithHeart",
        "HandswithStar",
        "Hanger",
        "HdVideo",
        "HdVideoGov",
        "Headset",
        "Heart",
        "HelicopterAbove",
        "HelpCenter",
        "HoldingGear",
        "HoldingHeart",
        "HomeSatellite",
        "Humvee",
        "IflResistance",
        "InFunnel",
        "Installation",
        "Internet",
        "Ipad",
        "IpadData",
        "IpadMap",
        "Ipod",
        "LanguageTranslation",
        "Law",
        "Leaf1",
        "Leaf2",
        "Lifeline",
        "LightSwitch",
        "Lightbulb",
        "Lightbulb2",
        "LimitElectricity",
        "LimitShower",
        "LimitWater",
        "LineData1",
        "LineGraph",
        "Link",
        "Linklock",
        "LockLayers",
        "LunchBag",
        "MachineLearning",
        "Mailing",
        "Man",
        "ManyIntoOne",
        "Map",
        "MapleLeaf",
        "Mask",
        "MeatEggs",
        "MedicalSupplies",
        "MedicalTools",
        "MilitaryLeave",
        "Mmo",
        "MonthlyBilling",
        "Mug",
        "MultiShield",
        "MyExede",
        "NestEgg",
        "Network1",
        "Network2",
        "NewHire",
        "Newspaper",
        "Notebook",
        "NumberSign",
        "Nuts",
        "OduTelemetry",
        "OilGas",
        "OpenHand",
        "OptionalHoliday",
        "Output",
        "PaidTimeOff",
        "PaperAirplane",
        "PaperPlate",
        "ParentingLeave",
        "Paycheck",
        "PaymentCredit",
        "PdlLeave",
        "Pencil",
        "People",
        "PeopleCommunication",
        "PersonWithHeadset",
        "PersononComputers",
        "PhoneKey",
        "Pie",
        "PieGraph",
        "PlaceSetting",
        "PlaneArial",
        "PlaneOutline1",
        "PlaneOutline2",
        "Planes",
        "PlantRoots",
        "PlasticBottle",
        "PlayervsPlayer",
        "Plugin",
        "Podcast",
        "Positive",
        "PregnancyDisability",
        "PriceLock",
        "PriceTagEuro",
        "PrivateBrowsing",
        "PrizeRibbon",
        "Protection",
        "Pumpkin",
        "Puzzle",
        "Pyramid",
        "Qa",
        "QuestionMark",
        "QuickTime",
        "Rainy",
        "RecycleBattery",
        "RecycleBin",
        "RecycleBottles",
        "RecycleCan",
        "RecyclePaper",
        "Reinstall",
        "ReloadDoc",
        "Repeat",
        "Reports",
        "Residential",
        "Resiliency",
        "ReusableBottle",
        "ReuseBag",
        "ReuseElectricity",
        "ReuseMug",
        "ReuseWater",
        "RmaProcessing",
        "RoadMap",
        "Robotics",
        "Router",
        "Rpg",
        "Rxsnr",
        "Satellite",
        "Search",
        "SecureAccess",
        "SecureDocument",
        "SecurityGroup",
        "Selection",
        "ServerRack",
        "ServerRackSecure",
        "Settings",
        "SharedFolder",
        "SharedMailbox",
        "Shield",
        "Ship",
        "ShoppingCart",
        "Shower",
        "SickTime",
        "SimplifiedCommercialAirliner",
        "SituationalAwareness",
        "SmileyComputer",
        "Sms",
        "SoiledNapkin",
        "SoldierWithHeadset",
        "Speed",
        "Sso",
        "StackofPapers",
        "StarEmployee",
        "Stationery",
        "Stocks",
        "Strategy",
        "Straw",
        "Student",
        "Sun",
        "Support",
        "Support24X7",
        "Surfing",
        "Tag",
        "Tags",
        "TakeoutBox",
        "TapeMeasure",
        "Target",
        "Target1",
        "Target3",
        "Teacher",
        "Teaching",
        "Team",
        "TelephonePlug",
        "Television",
        "Temperature",
        "ThistoThat",
        "Threat",
        "ThumbsDown",
        "ThumbsUp",
        "Timecard",
        "Tower",
        "Track",
        "Train",
        "TrashCan",
        "Trophy",
        "TroubleTicket",
        "Truck",
        "TwoMinutes",
        "TxifPwr",
        "TypesofWeather",
        "Ultrasound",
        "UnitedStates",
        "UpArrow",
        "UpdatePassword",
        "UpdatePayment",
        "User",
        "VacationTime",
        "Ventilator",
        "VentilatorMask",
        "ViasatSecurity",
        "VideoCall",
        "View360",
        "Vpn",
        "Wallet",
        "Washer",
        "WatchVideo",
        "WaterUsage",
        "WavyFlag",
        "Website",
        "Wellness",
        "WhatToExpect",
        "Wifi",
        "WifiModem",
        "WifiProtect",
        "Wiki",
        "Wireframe",
        "Woman",
        "Work",
        "World"
      ]
    },
    {
      "importPath": "@viasat/beam-icons/logos/airlines",
      "icons": [
        "AeroMexico",
        "AeroMexicoDark",
        "AmericanAirlines",
        "AmericanAirlinesDark",
        "Ana",
        "AnaDark",
        "Azul",
        "AzulDark",
        "Delta",
        "DeltaDark",
        "ElAl",
        "ElAlDark",
        "Etihad",
        "EtihadDark",
        "Finnair",
        "FinnairDark",
        "Icelandair",
        "IcelandairDark",
        "JetBlue",
        "JetBlueDark",
        "Klm",
        "KlmDark",
        "LaCompagnie",
        "LaCompagnieDark",
        "Neos",
        "NeosDark",
        "Porter",
        "PorterDark",
        "Quantas",
        "QuantasDark",
        "Sas",
        "SasDark",
        "United",
        "UnitedDark",
        "VirginAtlantic",
        "VirginAtlanticDark"
      ]
    },
    {
      "importPath": "@viasat/beam-icons/logos/banks",
      "icons": [
        "BankOfAmerica",
        "BankOfAmericaDark",
        "Bny",
        "BnyDark",
        "CapitalOne",
        "CapitalOneDark",
        "Citi",
        "CitiDark",
        "Citizens",
        "CitizensDark",
        "Hsbc",
        "HsbcDark",
        "JpMorgan",
        "JpMorganDark",
        "PnCbank",
        "PnCbankDark",
        "TdBank",
        "TdBankDark",
        "TruistBank",
        "TruistBankDark",
        "UsBank",
        "UsBankDark",
        "WellsFargo",
        "WellsFargoDark"
      ]
    },
    {
      "importPath": "@viasat/beam-icons/logos/flags",
      "icons": [
        "Afghanistan",
        "AfghanistanCircled",
        "AlandIslands",
        "AlandIslandsCircled",
        "Albania",
        "AlbaniaCircled",
        "Algeria",
        "AlgeriaCircled",
        "AmericanSamoa",
        "AmericanSamoaCircled",
        "Andorra",
        "AndorraCircled",
        "Angola",
        "AngolaCircled",
        "Anguilla",
        "AnguillaCircled",
        "Antarctica",
        "AntarcticaCircled",
        "AntiguaAndBarbuda",
        "AntiguaAndBarbudaCircled",
        "Argentina",
        "ArgentinaCircled",
        "Armenia",
        "ArmeniaCircled",
        "Aruba",
        "ArubaCircled",
        "AscensionIsland",
        "AscensionIslandCircled",
        "Australia",
        "AustraliaCircled",
        "Austria",
        "AustriaCircled",
        "Azerbaijan",
        "AzerbaijanCircled",
        "Bahamas",
        "BahamasCircled",
        "Bahrain",
        "BahrainCircled",
        "Bangladesh",
        "BangladeshCircled",
        "Barbados",
        "BarbadosCircled",
        "BasqueCountry",
        "BasqueCountryCircled",
        "Belarus",
        "BelarusCircled",
        "Belgium",
        "BelgiumCircled",
        "Belize",
        "BelizeCircled",
        "Benin",
        "BeninCircled",
        "Bermuda",
        "BermudaCircled",
        "Bhutan",
        "BhutanCircled",
        "Bolivia",
        "BoliviaCircled",
        "BonaireSintEustatius",
        "BonaireSintEustatiusCircled",
        "BosniaAndHerzegovina",
        "BosniaAndHerzegovinaCircled",
        "Botswana",
        "BotswanaCircled",
        "BouvetIsland",
        "BouvetIslandCircled",
        "Brazil",
        "BrazilCircled",
        "BritishIndianOceanTerritory",
        "BritishIndianOceanTerritoryCircled",
        "BruneiDarussalam",
        "BruneiDarussalamCircled",
        "Bulgaria",
        "BulgariaCircled",
        "BurkinaFaso",
        "BurkinaFasoCircled",
        "Burundi",
        "BurundiCircled",
        "CTedIvoire",
        "CTedIvoireCircled",
        "CaboVerde",
        "CaboVerdeCircled",
        "Cambodia",
        "CambodiaCircled",
        "Cameroon",
        "CameroonCircled",
        "Canada",
        "CanadaCircled",
        "CanaryIslands",
        "CanaryIslandsCircled",
        "Catalonia",
        "CataloniaCircled",
        "CaymanIslands",
        "CaymanIslandsCircled",
        "CentralAfricanRepublic",
        "CentralAfricanRepublicCircled",
        "CentralEuropeanFreeTradeAgreement",
        "CentralEuropeanFreeTradeAgreementCircled",
        "CeutaMelilla",
        "CeutaMelillaCircled",
        "Chad",
        "ChadCircled",
        "Chile",
        "ChileCircled",
        "China",
        "ChinaCircled",
        "ChristmasIsland",
        "ChristmasIslandCircled",
        "ClippertonIsland",
        "ClippertonIslandCircled",
        "CocosKeelingIslands",
        "CocosKeelingIslandsCircled",
        "Colombia",
        "ColombiaCircled",
        "Comoros",
        "ComorosCircled",
        "CookIslands",
        "CookIslandsCircled",
        "CostaRica",
        "CostaRicaCircled",
        "CoteDIvoire",
        "CoteDIvoireCircled",
        "Croatia",
        "CroatiaCircled",
        "Cuba",
        "CubaCircled",
        "CuraAo",
        "CuraAoCircled",
        "Curacao",
        "CuracaoCircled",
        "Cyprus",
        "CyprusCircled",
        "CzechRepublic",
        "CzechRepublicCircled",
        "DemocraticRepublicOfTheCongo",
        "DemocraticRepublicOfTheCongoCircled",
        "Denmark",
        "DenmarkCircled",
        "DiegoGarcia",
        "DiegoGarciaCircled",
        "Djibouti",
        "DjiboutiCircled",
        "Dominica",
        "DominicaCircled",
        "DominicanRepublic",
        "DominicanRepublicCircled",
        "Ecuador",
        "EcuadorCircled",
        "Egypt",
        "EgyptCircled",
        "ElSalvador",
        "ElSalvadorCircled",
        "England",
        "EnglandCircled",
        "EquatorialGuinea",
        "EquatorialGuineaCircled",
        "Eritrea",
        "EritreaCircled",
        "Estonia",
        "EstoniaCircled",
        "Eswatini",
        "EswatiniCircled",
        "Ethiopia",
        "EthiopiaCircled",
        "Europe",
        "EuropeCircled",
        "FalklandIslands",
        "FalklandIslandsCircled",
        "FaroeIslands",
        "FaroeIslandsCircled",
        "FederatedStatesOfMicronesia",
        "FederatedStatesOfMicronesiaCircled",
        "Fiji",
        "FijiCircled",
        "Finland",
        "FinlandCircled",
        "France",
        "FranceCircled",
        "FrenchGuiana",
        "FrenchGuianaCircled",
        "FrenchPolynesia",
        "FrenchPolynesiaCircled",
        "FrenchSouthernTerritories",
        "FrenchSouthernTerritoriesCircled",
        "Gabon",
        "GabonCircled",
        "Galicia",
        "GaliciaCircled",
        "Gambia",
        "GambiaCircled",
        "Georgia",
        "GeorgiaCircled",
        "Germany",
        "GermanyCircled",
        "Ghana",
        "GhanaCircled",
        "Gibraltar",
        "GibraltarCircled",
        "Greece",
        "GreeceCircled",
        "Greenland",
        "GreenlandCircled",
        "Grenada",
        "GrenadaCircled",
        "Guadeloupe",
        "GuadeloupeCircled",
        "Guam",
        "GuamCircled",
        "Guatemala",
        "GuatemalaCircled",
        "Guernsey",
        "GuernseyCircled",
        "Guinea",
        "GuineaBissau",
        "GuineaBissauCircled",
        "GuineaCircled",
        "Guyana",
        "GuyanaCircled",
        "Haiti",
        "HaitiCircled",
        "HeardIslandAndMcDonaldIslands",
        "HeardIslandAndMcDonaldIslandsCircled",
        "HolySee",
        "HolySeeCircled",
        "Honduras",
        "HondurasCircled",
        "HongKong",
        "HongKongCircled",
        "Hungary",
        "HungaryCircled",
        "Iceland",
        "IcelandCircled",
        "India",
        "IndiaCircled",
        "Indonesia",
        "IndonesiaCircled",
        "Iran",
        "IranCircled",
        "Iraq",
        "IraqCircled",
        "Ireland",
        "IrelandCircled",
        "IsleOfMan",
        "IsleOfManCircled",
        "Israel",
        "IsraelCircled",
        "Italy",
        "ItalyCircled",
        "Jamaica",
        "JamaicaCircled",
        "Japan",
        "JapanCircled",
        "Jersey",
        "JerseyCircled",
        "Jordan",
        "JordanCircled",
        "Kazakhstan",
        "KazakhstanCircled",
        "Kenya",
        "KenyaCircled",
        "Kiribati",
        "KiribatiCircled",
        "Kosovo",
        "KosovoCircled",
        "Kuwait",
        "KuwaitCircled",
        "Kyrgyzstan",
        "KyrgyzstanCircled",
        "Laos",
        "LaosCircled",
        "LativiaCircled",
        "Latvia",
        "Lebanon",
        "LebanonCircled",
        "Lesotho",
        "LesothoCircled",
        "Liberia",
        "LiberiaCircled",
        "Libya",
        "LibyaCircled",
        "Liechtenstein",
        "LiechtensteinCircled",
        "Lithuania",
        "LithuaniaCircled",
        "Luxembourg",
        "LuxembourgCircled",
        "Macau",
        "MacauCircled",
        "Madagascar",
        "MadagascarCircled",
        "Malawi",
        "MalawiCircled",
        "Malaysia",
        "MalaysiaCircled",
        "Maldives",
        "MaldivesCircled",
        "Mali",
        "MaliCircled",
        "Malta",
        "MaltaCircled",
        "MarshallIslands",
        "MarshallIslandsCircled",
        "Martinique",
        "MartiniqueCircled",
        "Mauritania",
        "MauritaniaCircled",
        "Mauritius",
        "MauritiusCircled",
        "Mayotte",
        "MayotteCircled",
        "Mexico",
        "MexicoCircled",
        "Moldova",
        "MoldovaCircled",
        "Monaco",
        "MonacoCircled",
        "Mongolia",
        "MongoliaCircled",
        "Montenegro",
        "MontenegroCircled",
        "Montserrat",
        "MontserratCircled",
        "Morocco",
        "MoroccoCircled",
        "Mozambique",
        "MozambiqueCircled",
        "Myanmar",
        "MyanmarCircled",
        "Namibia",
        "NamibiaCircled",
        "Nauru",
        "NauruCircled",
        "Nepal",
        "NepalCircled",
        "Netherlands",
        "NetherlandsCircled",
        "NewCaledonia",
        "NewCaledoniaCircled",
        "NewZealand",
        "NewZealandCircled",
        "Nicaragua",
        "NicaraguaCircled",
        "Niger",
        "NigerCircled",
        "Nigeria",
        "NigeriaCircled",
        "Niue",
        "NiueCircled",
        "NorfolkIsland",
        "NorfolkIslandCircled",
        "NorthKorea",
        "NorthKoreaCircled",
        "NorthMacedonia",
        "NorthMacedoniaCircled",
        "NorthernIreland",
        "NorthernIrelandCircled",
        "NorthernMarianaIslands",
        "NorthernMarianaIslandsCircled",
        "Norway",
        "NorwayCircled",
        "Oman",
        "OmanCircled",
        "Pakistan",
        "PakistanCircled",
        "Palau",
        "PalauCircled",
        "Panama",
        "PanamaCircled",
        "PapuaNewGuinea",
        "PapuaNewGuineaCircled",
        "Paraguay",
        "ParaguayCircled",
        "Peru",
        "PeruCircled",
        "Philippines",
        "PhilippinesCircled",
        "Pitcairn",
        "PitcairnCircled",
        "Poland",
        "PolandCircled",
        "Portugal",
        "PortugalCircled",
        "PuertoRico",
        "PuertoRicoCircled",
        "Qatar",
        "QatarCircled",
        "RUnion",
        "RUnionCircled",
        "RepublicOfTheCongo",
        "RepublicOfTheCongoCircled",
        "Reunion",
        "ReunionCircled",
        "Romania",
        "RomaniaCircled",
        "Russia",
        "RussiaCircled",
        "Rwanda",
        "RwandaCircled",
        "SaintBarthLemy",
        "SaintBarthLemyCircled",
        "SaintBarthelemy",
        "SaintBarthelemyCircled",
        "SaintKittsAndNevis",
        "SaintKittsAndNevisCircled",
        "SaintLucia",
        "SaintLuciaCircled",
        "SaintMartin",
        "SaintMartinCircled",
        "SaintPierreAndMiquelo",
        "SaintPierreAndMiqueloCircled",
        "SaintVincentAndTheGrenadines",
        "SaintVincentAndTheGrenadinesCircled",
        "Samoa",
        "SamoaCircled",
        "SanMarino",
        "SanMarinoCircled",
        "SaoTomeAndPrincipe",
        "SaoTomeAndPrincipeCircled",
        "SaudiArabia",
        "SaudiArabiaCircled",
        "Scotland",
        "ScotlandCircled",
        "Senegal",
        "SenegalCircled",
        "Serbia",
        "SerbiaCircled",
        "Seychelles",
        "SeychellesCircled",
        "SierraLeone",
        "SierraLeoneCircled",
        "Singapore",
        "SingaporeCircled",
        "SintMaarten",
        "SintMaartenCircled",
        "Slovakia",
        "SlovakiaCircled",
        "Slovenia",
        "SloveniaCircled",
        "SolomonIslands",
        "SolomonIslandsCircled",
        "Somalia",
        "SomaliaCircled",
        "SouthAfrica",
        "SouthAfricaCircled",
        "SouthGeorgiaAndTheSouthSandwichIslands",
        "SouthGeorgiaAndTheSouthSandwichIslandsCircled",
        "SouthKorea",
        "SouthKoreaCircled",
        "SouthSudan",
        "SouthSudanCircled",
        "Spain",
        "SpainCircled",
        "SriLanka",
        "SriLankaCircled",
        "StateOfPalestine",
        "StateOfPalestineCircled",
        "Sudan",
        "SudanCircled",
        "Suriname",
        "SurinameCircled",
        "SvalbardAndJanMayen",
        "SvalbardAndJanMayenCircled",
        "Sweden",
        "SwedenCircled",
        "Switzerland",
        "SwitzerlandCircled",
        "Syria",
        "SyriaCircled",
        "Taiwan",
        "TaiwanCircled",
        "Tajikistan",
        "TajikistanCircled",
        "Tanzania",
        "TanzaniaCircled",
        "Thailand",
        "ThailandCircled",
        "TimorLeste",
        "TimorLesteCircled",
        "Togo",
        "TogoCircled",
        "Tokelau",
        "TokelauCircled",
        "Tonga",
        "TongaCircled",
        "TrinidadAndTobago",
        "TrinidadAndTobagoCircled",
        "TristanDaCunha",
        "TristanDaCunhaCircled",
        "Tunisia",
        "TunisiaCircled",
        "Turkey",
        "TurkeyCircled",
        "Turkmenistan",
        "TurkmenistanCircled",
        "TurksAndCaicosIslands",
        "TurksAndCaicosIslandsCircled",
        "Tuvalu",
        "TuvaluCircled",
        "Uganda",
        "UgandaCircled",
        "Ukraine",
        "UkraineCircled",
        "UnitedArabEmirates",
        "UnitedArabEmiratesCircled",
        "UnitedKingdom",
        "UnitedKingdomCircled",
        "UnitedNations",
        "UnitedNationsUnitedNationsCircled",
        "UnitedStatesMinorOutlyingIslands",
        "UnitedStatesMinorOutlyingIslandsCircled",
        "UnitedStatesOfAmerica",
        "UnitedStatesOfAmericaCircled",
        "Uruguay",
        "UruguayCircled",
        "Uzbekistan",
        "UzbekistanCircled",
        "Vanuatu",
        "VanuatuCircled",
        "Venezuela",
        "VenezuelaCircled",
        "Vietnam",
        "VietnamCircled",
        "VirginIslandsBritish",
        "VirginIslandsBritishCircled",
        "VirginIslandsUs",
        "VirginIslandsUsCircled",
        "Wales",
        "WalesCircled",
        "WallisAndFutuna",
        "WallisAndFutunaCircled",
        "WesternSahara",
        "WesternSaharaCircled",
        "Yemen",
        "YemenCircled",
        "Zambia",
        "ZambiaCircled",
        "Zimbabwe",
        "ZimbabweCircled"
      ]
    },
    {
      "importPath": "@viasat/beam-icons/logos/inmarsat",
      "icons": [
        "ComboLogoDefault",
        "ComboLogoWhite",
        "InmarsatHorizontalGray",
        "InmarsatHorizontalTeal",
        "InmarsatHorizontalWhite",
        "InmarsatLogoMarkGray",
        "InmarsatLogoMarkTeal",
        "InmarsatLogoMarkWhite",
        "InmarsatStackedGray",
        "InmarsatStackedTeal",
        "InmarsatStackedWhite"
      ]
    },
    {
      "importPath": "@viasat/beam-icons/logos/payments",
      "icons": [
        "Afterpay",
        "AfterpayDark",
        "Alipay",
        "AlipayDark",
        "Amex",
        "AmexDark",
        "ApplePay",
        "ApplePayDark",
        "Bank",
        "BankAccount",
        "BankAccountDark",
        "BankDark",
        "Barcode",
        "BarcodeDark",
        "CashAppDark",
        "CashAppLight",
        "Clearpay",
        "ClearpayDark",
        "CreditCard",
        "CreditCardDark",
        "CreditCardFront",
        "CreditCardFrontDark",
        "Cvv",
        "CvvDark",
        "DinersClub",
        "DinersClubDark",
        "Discover",
        "DiscoverDark",
        "Elo",
        "EloDark",
        "GooglePay",
        "GooglePayDark",
        "Hipercard",
        "HipercardDark",
        "JapanCreditBureau",
        "JapanCreditBureauDark",
        "Maestro",
        "MaestroDark",
        "Mastercard",
        "MastercardDark",
        "NoCreditCard",
        "NoCreditCardDark",
        "PayPal",
        "PayPalDark",
        "SamsungPay",
        "SamsungPayDark",
        "Sepa",
        "SepaDark",
        "Stripe",
        "StripeDark",
        "UnionPay",
        "UnionPayDark",
        "Venmo",
        "VenmoDark",
        "Visa",
        "VisaDark",
        "WeChatPay",
        "WeChatPayDark"
      ]
    },
    {
      "importPath": "@viasat/beam-icons/logos/viasat",
      "icons": [
        "ViasatLogoDefault",
        "ViasatLogoGray",
        "ViasatLogoGreen",
        "ViasatLogoTest",
        "ViasatLogoWhite",
        "ViasatLogomarkColor",
        "ViasatLogomarkDefault",
        "ViasatLogomarkGray",
        "ViasatLogomarkGreen",
        "ViasatLogomarkWhite"
      ]
    },
    {
      "importPath": "@viasat/beam-icons/logos/viasatMark",
      "icons": [
        "ViasatLogomarkColor",
        "ViasatLogomarkWhite"
      ]
    }
  ]
}