@spaced-out/genesis-mcp 1.0.2 → 1.0.4

package/data/design-system.json

@@ -1,7 +1,7 @@
 {
   "metadata": {
-    "buildDate": "2025-12-15T11:10:28.893Z",
-    "version": "0.5.36",
+    "buildDate": "2026-01-16T06:55:50.533Z",
+    "version": "0.5.39",
     "designSystemPath": "/home/runner/work/ui-design-system/ui-design-system"
   },
   "components": {
@@ -1771,6 +1771,66 @@
         "index.ts"
       ]
     },
+    "PastChatCard": {
+      "name": "PastChatCard",
+      "path": "src/components/PastChatCard",
+      "files": {
+        "main": {
+          "path": "PastChatCard.d.ts",
+          "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport { type AlertSemanticType } from '../../types/common';\nimport type { IconSize, IconType } from '../../components/Icon';\ntype ClassNames = Readonly<{\n    wrapper?: string;\n}>;\nexport interface PastChatCardProps {\n    title: string;\n    subTitle: string;\n    iconName?: string;\n    iconType?: IconType;\n    iconSize?: IconSize;\n    semantic?: AlertSemanticType;\n    disabled?: boolean;\n    classNames?: ClassNames;\n    onClick?: (event: React.SyntheticEvent<HTMLDivElement>) => void;\n    testId?: string;\n}\nexport declare const PastChatCard: Flow.AbstractComponent<PastChatCardProps, HTMLDivElement>;\nexport {};\n//# sourceMappingURL=PastChatCard.d.ts.map"
+        },
+        "story": {
+          "path": "PastChatCard.stories.tsx",
+          "content": "import * as React from 'react';\n\nimport {ALERT_SEMANTIC} from 'src/types/common';\n\nimport {ICON_SIZE, ICON_TYPE} from 'src/components/Icon';\nimport type {PastChatCardProps} from 'src/components/PastChatCard/PastChatCard';\nimport {PastChatCard} from 'src/components/PastChatCard/PastChatCard';\n\nimport css from 'src/components/PastChatCard/PastChatCard.stories.module.css';\n\n\nconst iconTypeOptions: Array<unknown> = [...Object.values(ICON_TYPE)];\nconst iconSizeOptions: Array<unknown> = [...Object.values(ICON_SIZE)];\nconst semanticOptions: Array<unknown> = [...Object.values(ALERT_SEMANTIC)];\n\nconst meta = {\n  tags: ['autodocs'],\n  title: 'Components/Past Chat Card',\n  component: PastChatCard,\n  argTypes: {\n    title: {\n      description: 'The main title text displayed in the card',\n      control: {type: 'text'},\n      table: {\n        type: {summary: 'string'},\n      },\n    },\n    subTitle: {\n      description: 'The text displayed below the title',\n      control: {type: 'text'},\n      table: {\n        type: {summary: 'string'},\n      },\n    },\n    iconName: {\n      description: 'Name of the icon to be displayed in the PastChatCard.',\n      control: {type: 'text'},\n      table: {\n        type: {summary: 'string'},\n      },\n    },\n    iconType: {\n      description: 'The type of icon (solid, regular, duotone, brands)',\n      control: {type: 'select'},\n      options: iconTypeOptions,\n      table: {\n        type: {summary: 'IconType'},\n        defaultValue: {summary: ICON_TYPE.solid},\n      },\n    },\n    iconSize: {\n      description: 'The size of the icon',\n      control: {type: 'select'},\n      options: iconSizeOptions,\n      table: {\n        type: {summary: 'IconSize'},\n        defaultValue: {summary: ICON_SIZE.small},\n      },\n    },\n    semantic: {\n      description: 'Semantic of the icon to be displayed in the PastChatCard.',\n      control: {type: 'select'},\n      options: semanticOptions,\n      table: {\n        type: {summary: 'AlertSemanticType'},\n        defaultValue: {summary: ALERT_SEMANTIC.neutral},\n      },\n    },\n    disabled: {\n      description: 'If **true**, the card will be in disabled state',\n      control: {type: 'boolean'},\n      table: {\n        type: {summary: 'boolean'},\n        defaultValue: {summary: 'false'},\n      },\n    },\n    classNames: {\n      description:\n        'Additional CSS classes to customize the appearance of the PastChatCard.',\n      control: {type: 'object'},\n      table: {\n        type: {summary: '{ wrapper?: string }'},\n      },\n    },\n    onClick: {\n      description: 'onClick handler that is applied to the root <div> element.',\n      action: 'clicked',\n      table: {\n        type: {\n          summary: '(event: React.SyntheticEvent<HTMLDivElement>) => void',\n        },\n      },\n    },\n  },\n  parameters: {\n    docs: {\n      subtitle: 'Generates a PastChatCard component.',\n      description: {\n        component: `\n\\`\\`\\`js\nimport { PastChatCard } from \"@spaced-out/ui-design-system/lib/components/PastChatCard\";\n\\`\\`\\`\nPastChatCard component is for displaying past chat conversations with an optional icon, title, subtitle, and chevron indicator.\nThe card supports hover and focus states for interactive use.\n        `,\n      },\n    },\n    storySource: {\n      componentPath: '/src/components/PastChatCard/PastChatCard.tsx',\n    },\n  },\n};\n\nexport default meta;\n\nexport const Default = {\n  render: (args: PastChatCardProps) => (\n    <div className={css.container}>\n      <PastChatCard {...args} />\n    </div>\n  ),\n  args: {\n    title: 'Meeting scheduled rates last 30 days',\n    subTitle: 'Sep 19, 9:28 AM',\n    iconName: 'analytics',\n    iconType: ICON_TYPE.solid,\n    iconSize: ICON_SIZE.small,\n    semantic: ALERT_SEMANTIC.information,\n  },\n};\n\nexport const MultipleCards = {\n  render: () => (\n    <div className={css.container}>\n      <div className={css.multipleCardsContainer}>\n        <PastChatCard\n          title=\"Meeting scheduled rates last 30 days\"\n          subTitle=\"Sep 19, 9:28 AM\"\n          iconName=\"analytics\"\n          iconType={ICON_TYPE.solid}\n          iconSize={ICON_SIZE.small}\n          semantic={ALERT_SEMANTIC.information}\n        />\n        <PastChatCard\n          title=\"Weekly sales report\"\n          subTitle=\"Sep 18, 2:15 PM\"\n          iconName=\"file-chart-column\"\n          iconType={ICON_TYPE.solid}\n          iconSize={ICON_SIZE.small}\n          semantic={ALERT_SEMANTIC.danger}\n        />\n        <PastChatCard\n          title=\"Customer feedback summary\"\n          subTitle=\"Sep 17, 11:45 AM\"\n        />\n      </div>\n    </div>\n  ),\n};\n\nexport const Disabled = {\n  render: (args: PastChatCardProps) => (\n    <div className={css.container}>\n      <PastChatCard {...args} />\n    </div>\n  ),\n  args: {\n    title: 'Meeting scheduled rates last 30 days',\n    subTitle: 'Sep 19, 9:28 AM',\n    iconName: 'analytics',\n    iconType: ICON_TYPE.solid,\n    iconSize: ICON_SIZE.small,\n    semantic: ALERT_SEMANTIC.information,\n    disabled: true,\n  },\n};\n"
+        },
+        "css": {
+          "path": "PastChatCard.module.css",
+          "content": "@value (\n  spaceSmall,\n  spaceXSmall,\n  spaceXXSmall\n) from '../../styles/variables/_space.css';\n\n@value (\n  colorBorderPrimary,\n  colorBorderTertiary,\n  colorBackgroundTertiary,\n  colorBackgroundPrimary,\n  colorFocusPrimary,\n  colorTextClickable\n) from '../../styles/variables/_color.css';\n\n@value (\n  borderWidthPrimary,\n  borderWidthTertiary,\n  borderWidthNone,\n  borderRadiusSmall\n) from '../../styles/variables/_border.css';\n\n@value (\n  sizeFluid\n) from '../../styles/variables/_size.css';\n\n.card {\n  display: flex;\n  align-items: center;\n  gap: spaceXSmall;\n  padding: spaceSmall;\n  background-color: colorBackgroundTertiary;\n  composes: borderPrimary from '../../styles/border.module.css';\n  border-radius: borderRadiusSmall;\n  cursor: pointer;\n  width: sizeFluid;\n  min-width: fit-content;\n\n  &:focus {\n    border-color: colorTextClickable;\n    box-shadow: borderWidthNone borderWidthNone borderWidthNone\n      borderWidthTertiary colorFocusPrimary;\n    outline: none;\n  }\n\n  &:hover {\n    background-color: colorBackgroundPrimary;\n\n    &:not(:focus) {\n      border-color: colorBorderTertiary;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n}\n\n.textContent {\n  display: flex;\n  flex-direction: column;\n  gap: spaceXXSmall;\n  flex: 1;\n}\n\n.title,\n.subTitle {\n  width: sizeFluid;\n}\n\n.chevronIcon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.semanticIcon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: borderRadiusSmall;\n}\n"
+        },
+        "index": {
+          "path": "index.d.ts",
+          "content": "export * from '../../components/PastChatCard/PastChatCard';\n//# sourceMappingURL=index.d.ts.map"
+        },
+        "additional": {}
+      },
+      "allFiles": [
+        "PastChatCard.module.css",
+        "PastChatCard.stories.module.css",
+        "PastChatCard.stories.tsx",
+        "PastChatCard.tsx",
+        "index.ts"
+      ]
+    },
+    "PreviewCard": {
+      "name": "PreviewCard",
+      "path": "src/components/PreviewCard",
+      "files": {
+        "main": {
+          "path": "PreviewCard.d.ts",
+          "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { ColorTypes } from '../../types/typography';\nimport type { IconSize, IconType } from '../../components/Icon';\ntype ClassNames = Readonly<{\n    wrapper?: string;\n    card?: string;\n    titleText?: string;\n    previewText?: string;\n    cardIconSection?: string;\n    helperText?: string;\n}>;\nexport interface PreviewCardProps {\n    title: string;\n    previewText: string;\n    cardImgIconName?: string;\n    isSelected: boolean;\n    disabled?: boolean;\n    onClick?: (e: React.SyntheticEvent<HTMLElement>) => unknown;\n    helperTextIconName?: string;\n    helperTextIconColor?: ColorTypes;\n    helperTextIconType?: IconType;\n    helperTextIconSize?: IconSize;\n    helperText?: string;\n    classNames?: ClassNames;\n    testId?: string;\n}\nexport declare const PreviewCard: Flow.AbstractComponent<PreviewCardProps, HTMLDivElement>;\nexport {};\n//# sourceMappingURL=PreviewCard.d.ts.map"
+        },
+        "story": {
+          "path": "PreviewCard.stories.tsx",
+          "content": "import * as React from 'react';\n\nimport {TEXT_COLORS} from 'src/types/typography';\n\nimport {ICON_SIZE, ICON_TYPE} from 'src/components/Icon';\nimport type {PreviewCardProps} from 'src/components/PreviewCard/PreviewCard';\nimport {PreviewCard} from 'src/components/PreviewCard/PreviewCard';\n\nimport css from 'src/components/PreviewCard/PreviewCard.stories.module.css';\n\n\nconst colorOptions: Array<unknown> = [...Object.values(TEXT_COLORS)];\nconst iconTypeOptions: Array<unknown> = [...Object.values(ICON_TYPE)];\nconst iconSizeOptions: Array<unknown> = [...Object.values(ICON_SIZE)];\n\nconst meta = {\n  tags: ['autodocs'],\n  title: 'Components/Preview Card',\n  component: PreviewCard,\n  argTypes: {\n    title: {\n      description: 'Main title text displayed in the card',\n      control: {type: 'text'},\n      table: {\n        type: {summary: 'string'},\n      },\n    },\n    previewText: {\n      description: 'Preview text displayed below the title',\n      control: {type: 'text'},\n      table: {\n        type: {summary: 'string'},\n      },\n    },\n    cardImgIconName: {\n      description: 'Icon name for the animated card image displayed at right.',\n      control: {type: 'text'},\n      table: {\n        type: {summary: 'string'},\n        defaultValue: {summary: 'sparkles'},\n      },\n    },\n    isSelected: {\n      description: 'If **true**, the card will be in selected state',\n      control: {type: 'boolean'},\n      table: {\n        type: {summary: 'boolean'},\n      },\n    },\n    disabled: {\n      description: 'If **true**, the card will be in disabled state',\n      control: {type: 'boolean'},\n      table: {\n        type: {summary: 'boolean'},\n        defaultValue: {summary: 'false'},\n      },\n    },\n    onClick: {\n      description: 'Callback function called when card is clicked',\n      action: 'card-clicked',\n      table: {\n        type: {summary: '(e: React.SyntheticEvent<HTMLElement>) => unknown'},\n      },\n    },\n    helperTextIconName: {\n      description: 'Icon name for the helper text icon',\n      control: {type: 'text'},\n      table: {\n        type: {summary: 'string'},\n      },\n    },\n    helperTextIconColor: {\n      description: 'Icon Color for the helper text icon',\n      control: {type: 'select'},\n      options: colorOptions,\n      table: {\n        type: {summary: 'string'},\n        defaultValue: {summary: TEXT_COLORS.primary},\n      },\n    },\n    helperTextIconType: {\n      description: 'Icon Type of the helper text icon',\n      control: {type: 'select'},\n      options: iconTypeOptions,\n      table: {\n        type: {summary: 'string'},\n        defaultValue: {summary: ICON_TYPE.regular},\n      },\n    },\n    helperTextIconSize: {\n      description: 'Icon Size of the helper text icon',\n      control: {type: 'select'},\n      options: iconSizeOptions,\n      table: {\n        type: {summary: 'string'},\n        defaultValue: {summary: ICON_SIZE.small},\n      },\n    },\n    helperText: {\n      description: 'Helper text displayed below the card',\n      control: {type: 'text'},\n      table: {\n        type: {summary: 'string'},\n      },\n    },\n    classNames: {\n      description:\n        'Provide optional classNames to be applied to different parts',\n      control: {type: 'object'},\n      table: {\n        type: {\n          summary:\n            '{ wrapper?: string; card?: string; titleText?: string; previewText?: string; cardIconSection?: string; helperText?: string }',\n        },\n      },\n    },\n    testId: {\n      description: 'Test ID for the component',\n      control: {type: 'text'},\n      table: {\n        type: {summary: 'string'},\n      },\n    },\n  },\n  parameters: {\n    docs: {\n      subtitle: 'Generates a PreviewCard component.',\n      description: {\n        component: `\n\\`\\`\\`js\nimport { PreviewCard } from \"@spaced-out/ui-design-system/lib/components/PreviewCard\";\n\\`\\`\\`\nThe PreviewCard component displays a clickable card with an animated card image displayed at right, with a title, preview text, and optional helper text.\nIt supports three states: default, hovered, and selected.\n        `,\n      },\n    },\n    storySource: {\n      componentPath: '/src/components/PreviewCard/PreviewCard.tsx',\n    },\n  },\n};\n\nexport default meta;\n\nexport const Default = {\n  render: (args: PreviewCardProps) => (\n    <div className={css.container}>\n      <PreviewCard {...args} />\n    </div>\n  ),\n  args: {\n    title: 'The rate of conversations initiated by outbound',\n    previewText: 'Preview',\n    cardImgIconName: 'sparkles',\n    isSelected: false,\n  },\n};\n\nexport const WithHelperText = {\n  render: (args: PreviewCardProps) => (\n    <div className={css.container}>\n      <PreviewCard {...args} />\n    </div>\n  ),\n  args: {\n    title: 'The rate of conversations initiated by outbound',\n    previewText: 'Preview',\n    cardImgIconName: 'sparkles',\n    isSelected: false,\n    helperText: 'Checkpoint made 3 days ago',\n    helperTextIconName: 'check-circle',\n    helperTextIconType: ICON_TYPE.regular,\n    helperTextIconColor: TEXT_COLORS.success,\n    helperTextIconSize: ICON_SIZE.small,\n  },\n};\n\nexport const Selected = {\n  render: (args: PreviewCardProps) => (\n    <div className={css.container}>\n      <PreviewCard {...args} />\n    </div>\n  ),\n  args: {\n    title: 'The rate of conversations initiated by outbound',\n    previewText: 'Preview',\n    cardImgIconName: 'sparkles',\n    isSelected: true,\n    helperText: 'Checkpoint made 3 days ago',\n    helperTextIconName: 'check-circle',\n    helperTextIconType: ICON_TYPE.regular,\n    helperTextIconColor: TEXT_COLORS.success,\n    helperTextIconSize: ICON_SIZE.small,\n  },\n};\n\nexport const Disabled = {\n  render: (args: PreviewCardProps) => (\n    <div className={css.container}>\n      <PreviewCard {...args} />\n    </div>\n  ),\n  args: {\n    title: 'The rate of conversations initiated by outbound',\n    previewText: 'Preview',\n    cardImgIconName: 'sparkles',\n    isSelected: false,\n    disabled: true,\n    helperText: 'Checkpoint made 3 days ago',\n    helperTextIconName: 'check-circle',\n    helperTextIconType: ICON_TYPE.regular,\n    helperTextIconColor: TEXT_COLORS.success,\n    helperTextIconSize: ICON_SIZE.small,\n  },\n};\n"
+        },
+        "css": {
+          "path": "PreviewCard.module.css",
+          "content": "@value (\n  spaceSmall,\n  spaceXSmall,\n  spaceXXSmall,\n  spaceXLarge,\n  spaceNone\n) from '../../styles/variables/_space.css';\n\n@value (\n  colorBorderPrimary,\n  colorBackgroundTertiary,\n  colorNeutralLightest,\n  colorFillSecondary,\n  colorInformationLightest,\n  colorFillPrimary,\n  colorInformation,\n  colorTextClickable,\n  colorFocusPrimary,\n  colorDataViz1,\n  colorDataViz2,\n  colorTextDisabled\n) from '../../styles/variables/_color.css';\n\n@value (\n  borderRadiusSmall,\n  borderRadiusMedium,\n  borderWidthPrimary,\n  borderWidthTertiary,\n  borderWidthNone\n) from '../../styles/variables/_border.css';\n\n@value (\n  shadowBoxShadow1X,\n  shadowBoxShadow1Y,\n  shadowBoxShadow1Blur,\n  shadowBoxShadow2X,\n  shadowBoxShadow2Y,\n  shadowBoxShadow2Blur,\n  shadowBoxShadow1Spread,\n  shadowBoxShadow1Color,\n  shadowBoxShadow4Spread\n) from '../../styles/variables/_shadow.css';\n\n@value (\n  sizeFluid,\n  size66,\n  size50,\n  size4,\n  size120,\n  size10\n) from '../../styles/variables/_size.css';\n\n@value (\n  motionDurationNormal,\n  motionDurationSlow,\n  motionEaseInEaseOut\n) from '../../styles/variables/_motion.css';\n\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: spaceXSmall;\n  width: sizeFluid;\n}\n\n.previewTextContainer {\n  display: flex;\n  align-items: center;\n  gap: spaceXXSmall;\n}\n\n.card {\n  background-color: colorBackgroundTertiary;\n  border: borderWidthPrimary solid colorBorderPrimary;\n  border-radius: borderRadiusMedium;\n  cursor: pointer;\n  outline: none;\n  transition: all motionDurationNormal motionEaseInEaseOut;\n  width: sizeFluid;\n  min-height: fit-content;\n  overflow: hidden;\n\n  &:focus {\n    border-color: colorTextClickable;\n    box-shadow: borderWidthNone borderWidthNone borderWidthNone\n      borderWidthTertiary colorFocusPrimary;\n  }\n\n  &:hover:not(:focus) {\n    box-shadow: shadowBoxShadow1X shadowBoxShadow1Y shadowBoxShadow1Blur\n      shadowBoxShadow1Spread shadowBoxShadow1Color;\n    background-color: colorNeutralLightest;\n    border-color: transparent;\n    background-image: linear-gradient(\n        colorNeutralLightest,\n        colorNeutralLightest\n      ),\n      linear-gradient(to right, colorDataViz2, colorDataViz1);\n    background-clip: content-box, border-box;\n    background-origin: border-box;\n  }\n\n  &:focus:hover {\n    box-shadow: borderWidthNone borderWidthNone borderWidthNone\n      borderWidthTertiary colorFocusPrimary;\n    background-color: colorNeutralLightest;\n  }\n\n  &.selected {\n    border: borderWidthPrimary solid transparent;\n    border-radius: borderRadiusMedium;\n    background-image: linear-gradient(\n        colorFillSecondary,\n        colorInformationLightest\n      ),\n      linear-gradient(to right, colorFillPrimary, colorInformation);\n    background-clip: content-box, border-box;\n    background-origin: border-box;\n    box-shadow: none;\n\n    &:focus {\n      box-shadow: borderWidthNone borderWidthNone borderWidthNone\n        borderWidthTertiary colorFocusPrimary;\n      border-color: colorTextClickable;\n    }\n\n    &:focus:hover {\n      background-image: linear-gradient(\n        colorNeutralLightest,\n        colorNeutralLightest\n      );\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    pointer-events: none;\n    background-color: colorBackgroundTertiary;\n    border: borderWidthPrimary solid colorBorderPrimary;\n  }\n}\n\n.cardContent {\n  display: flex;\n  align-items: flex-start;\n  padding: spaceSmall;\n  gap: spaceSmall;\n  position: relative;\n  min-height: size66;\n}\n\n.mainContent {\n  display: flex;\n  flex-direction: column;\n  gap: spaceXSmall;\n  flex: 1;\n  min-width: spaceNone;\n  padding-right: calc(spaceXLarge + spaceXSmall + spaceSmall);\n}\n\n.titleText {\n  width: sizeFluid;\n}\n\n.previewText {\n  width: fit-content;\n}\n\n.cardIconSection {\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  height: calc(size120 + size10);\n  width: calc(size50 + size4);\n  flex-shrink: 0;\n  border-radius: borderRadiusSmall;\n  background-color: colorNeutralLightest;\n  border: borderWidthPrimary solid colorBorderPrimary;\n  transition: all motionDurationSlow motionEaseInEaseOut;\n  transform: rotate(-3deg);\n  padding-top: spaceSmall;\n  position: absolute;\n  right: spaceXSmall;\n  box-shadow: shadowBoxShadow2X shadowBoxShadow2Y shadowBoxShadow2Blur\n    shadowBoxShadow4Spread shadowBoxShadow1Color;\n}\n\n.card:hover .cardIconSection {\n  transform: rotate(5deg);\n}\n\n.card.selected .cardIconSection,\n.card:hover .cardIconSection {\n  border: borderWidthPrimary solid colorBorderPrimary;\n  background-image: linear-gradient(\n    colorBackgroundTertiary,\n    colorBackgroundTertiary\n  );\n  background-clip: border-box;\n  background-origin: border-box;\n}\n\n.card.selected .cardIconSection > div,\n.card:hover .cardIconSection > div {\n  color: colorTextClickable;\n}\n\n.card.disabled .cardIconSection > div {\n  color: colorTextDisabled;\n}\n\n.helperText {\n  display: flex;\n  align-items: center;\n  gap: spaceXXSmall;\n}\n"
+        },
+        "index": {
+          "path": "index.d.ts",
+          "content": "export * from '../../components/PreviewCard/PreviewCard';\n//# sourceMappingURL=index.d.ts.map"
+        },
+        "additional": {}
+      },
+      "allFiles": [
+        "PreviewCard.module.css",
+        "PreviewCard.stories.module.css",
+        "PreviewCard.stories.tsx",
+        "PreviewCard.tsx",
+        "index.ts"
+      ]
+    },
     "ProgressDonut": {
       "name": "ProgressDonut",
       "path": "src/components/ProgressDonut",
@@ -2017,6 +2077,36 @@
         "index.ts"
       ]
     },
+    "ScrollingLoader": {
+      "name": "ScrollingLoader",
+      "path": "src/components/ScrollingLoader",
+      "files": {
+        "main": {
+          "path": "ScrollingLoader.d.ts",
+          "content": "import type { Flow } from 'flow-to-typescript-codemod';\nexport declare const SCROLLING_LOADER_SIZE: Readonly<{\n    medium: \"medium\";\n    large: \"large\";\n    fluid: \"fluid\";\n}>;\nexport type ScrollingLoaderSize = (typeof SCROLLING_LOADER_SIZE)[keyof typeof SCROLLING_LOADER_SIZE];\ntype ClassNames = Readonly<{\n    wrapper?: string;\n    skeletonContainer?: string;\n    textContainer?: string;\n}>;\nexport interface IconItem {\n    name: string;\n    type?: 'regular' | 'solid' | 'duotone' | 'brands';\n}\nexport interface ScrollingLoaderProps {\n    /** List of icons to display in skeleton rows */\n    iconList: IconItem[];\n    /** List of text messages to cycle through */\n    textList: string[];\n    /** Size variant of the loader */\n    size?: ScrollingLoaderSize;\n    /** Custom class names for styling */\n    classNames?: ClassNames;\n    /** Test ID for the component */\n    testId?: string;\n    /** Animation duration in ms for each text item (default: 2500) */\n    textAnimationDuration?: number;\n    /** Whether to loop through texts or stop at the last one (default: false) */\n    loopTexts?: boolean;\n}\nexport declare const ScrollingLoader: Flow.AbstractComponent<ScrollingLoaderProps, HTMLDivElement>;\nexport {};\n//# sourceMappingURL=ScrollingLoader.d.ts.map"
+        },
+        "story": {
+          "path": "ScrollingLoader.stories.tsx",
+          "content": "import * as React from 'react';\n\nimport type {ScrollingLoaderProps} from 'src/components/ScrollingLoader/ScrollingLoader';\nimport {\n  SCROLLING_LOADER_SIZE,\n  ScrollingLoader,\n} from 'src/components/ScrollingLoader/ScrollingLoader';\n\nimport css from 'src/components/ScrollingLoader/ScrollingLoader.stories.module.css';\n\n\nconst sizeOptions: Array<unknown> = [...Object.values(SCROLLING_LOADER_SIZE)];\n\nexport default {\n  tags: ['autodocs'],\n  title: 'AI Prompt Components/Scrolling Loader',\n  component: ScrollingLoader,\n  argTypes: {\n    iconList: {\n      description:\n        'List of icons to display in the skeleton rows. Each item should have a `name` and optional `type`.',\n      control: {\n        type: 'object',\n      },\n      table: {\n        type: {\n          summary:\n            'Array<{ name: string; type?: \"regular\" | \"solid\" | \"duotone\" | \"brands\" }>',\n        },\n      },\n    },\n    textList: {\n      description: 'List of text messages to cycle through with fade animation',\n      control: {\n        type: 'object',\n      },\n      table: {\n        type: {summary: 'Array<string>'},\n      },\n    },\n    size: {\n      description:\n        'Size variant of the loader. Medium (284px), Large (320px), or Fluid (100%)',\n      options: sizeOptions,\n      control: {type: 'select'},\n      table: {\n        type: {summary: 'enum'},\n        defaultValue: {summary: SCROLLING_LOADER_SIZE.medium},\n      },\n    },\n    textAnimationDuration: {\n      description: 'Duration in milliseconds for each text item display',\n      control: {type: 'number'},\n      table: {\n        type: {summary: 'number'},\n        defaultValue: {summary: 2500},\n      },\n    },\n    classNames: {\n      description: 'External classNames to be applied',\n      control: {\n        type: 'object',\n      },\n      table: {\n        type: {\n          summary:\n            '{wrapper?: string, skeletonContainer?: string, textContainer?: string}',\n        },\n      },\n    },\n    testId: {\n      description: 'Test ID for the component',\n      control: {\n        type: 'text',\n      },\n      table: {\n        type: {summary: 'string'},\n      },\n    },\n    loopTexts: {\n      description:\n        'Whether to loop through texts continuously or stop at the last one. When false, animation stops at the last text received.',\n      control: {type: 'boolean'},\n      table: {\n        type: {summary: 'boolean'},\n        defaultValue: {summary: false},\n      },\n    },\n  },\n  parameters: {\n    docs: {\n      subtitle: 'A scrolling loader with skeleton animation and cycling text',\n      description: {\n        component: `\n\\`\\`\\`jsx\nimport { ScrollingLoader } from \"@spaced-out/ui-design-system/lib/components/ScrollingLoader\";\n\\`\\`\\`\n**ScrollingLoader**\n\nUse this component to display a loading state with animated skeleton rows and cycling text messages.\nPerfect for showing progress during agent creation, publishing, or other multi-step processes.\n\n**Features:**\n- Infinite scrolling skeleton rows with icons\n- Smooth fade-in/fade-out text transitions\n- Gradient fades at top and bottom for seamless loop effect\n- Three size variants: medium, large, and fluid\n- Streaming support: texts can be added dynamically without breaking animations\n\n**Usage:**\n\n\\`\\`\\`jsx\n<ScrollingLoader\n  iconList={[\n    { name: 'envelope' },\n    { name: 'list-check' },\n    { name: 'filter' },\n    { name: 'calendar' },\n    { name: 'circle-question' },\n    { name: 'hand-wave' },\n  ]}\n  textList={[\n    'Publishing your agent...',\n    'Generating Greetings prompt...',\n    'Generating Data Collection prompt...',\n    'Setting things up for you…',\n  ]}\n  size=\"medium\"\n/>\n\\`\\`\\`\n\n**Streaming Usage:**\n\nWhen receiving texts from a stream (e.g., WebSocket, SSE), you can pass them dynamically.\nBy default (\\`loopTexts={false}\\`), the animation stops at the last text and resumes when new texts arrive.\n\n\\`\\`\\`jsx\nconst [streamedTexts, setStreamedTexts] = useState<string[]>([]);\n\n// In your stream handler:\nonStreamMessage((text) => {\n  setStreamedTexts(prev => [...prev, text]);\n});\n\n<ScrollingLoader\n  iconList={iconList}\n  textList={streamedTexts}\n  size=\"medium\"\n/>\n\\`\\`\\`\n\nSet \\`loopTexts={true}\\` if you want the texts to cycle continuously.\n        `,\n      },\n    },\n    storySource: {\n      componentPath: '/src/components/ScrollingLoader/ScrollingLoader',\n    },\n  },\n};\n\nconst DEFAULT_ICONS = [\n  {name: 'envelope'},\n  {name: 'list-check'},\n  {name: 'filter'},\n  {name: 'calendar'},\n  {name: 'circle-question'},\n  {name: 'hand-wave'},\n];\n\nconst PUBLISHING_TEXT_LIST = [\n  'Generating Greetings prompt...',\n  'Generating FAQ prompt...',\n  'Setting things up for you…',\n  'Almost there…',\n];\n\nconst CREATING_TEXT_LIST = [\n  'Getting Greetings Ready...',\n  'Setting Up Data Collection...',\n  'Preparing Screening...',\n  'Preparing Scheduling...',\n  'Preparing FAQ...',\n  'Setting up Closing...',\n];\n\nexport const DefaultStory = (args: ScrollingLoaderProps) => (\n  <div className={css.storyContainer}>\n    <ScrollingLoader {...args} />\n  </div>\n);\n\nDefaultStory.args = {\n  iconList: DEFAULT_ICONS,\n  textList: PUBLISHING_TEXT_LIST,\n  size: SCROLLING_LOADER_SIZE.medium,\n  testId: 'scrolling-loader-default-story',\n};\n\nexport const FluidSizeStory = (args: ScrollingLoaderProps) => (\n  <div className={css.storyContainerFluid}>\n    <ScrollingLoader {...args} />\n  </div>\n);\n\nFluidSizeStory.args = {\n  iconList: DEFAULT_ICONS,\n  textList: PUBLISHING_TEXT_LIST,\n  size: SCROLLING_LOADER_SIZE.fluid,\n  testId: 'scrolling-loader-fluid-story',\n};\n\nexport const CreatingAgentStory = (args: ScrollingLoaderProps) => (\n  <div className={css.storyContainer}>\n    <ScrollingLoader {...args} />\n  </div>\n);\n\nCreatingAgentStory.args = {\n  iconList: DEFAULT_ICONS,\n  textList: CREATING_TEXT_LIST,\n  size: SCROLLING_LOADER_SIZE.medium,\n  textAnimationDuration: 2000,\n  testId: 'scrolling-loader-creating-story',\n};\n\nexport const CustomIconsStory = (args: ScrollingLoaderProps) => (\n  <div className={css.storyContainer}>\n    <ScrollingLoader {...args} />\n  </div>\n);\n\nCustomIconsStory.args = {\n  iconList: [\n    {name: 'robot', type: 'solid'},\n    {name: 'brain', type: 'solid'},\n    {name: 'microchip', type: 'solid'},\n    {name: 'network-wired', type: 'solid'},\n    {name: 'database', type: 'solid'},\n    {name: 'cloud', type: 'solid'},\n  ],\n  textList: [\n    'Initializing AI models...',\n    'Loading neural networks...',\n    'Connecting to services...',\n    'Preparing your experience...',\n  ],\n  size: SCROLLING_LOADER_SIZE.medium,\n  loopTexts: true,\n  testId: 'scrolling-loader-custom-icons-story',\n};\n\n// Streaming example - simulates receiving texts one by one from a stream\nconst STREAMING_TEXT_LIST = [\n  'Connecting to AI service...',\n  'Analyzing your request...',\n  'Generating response...',\n  'Processing data...',\n  'Optimizing results...',\n  'Finalizing output...',\n];\n\nconst StreamingLoaderWrapper = () => {\n  const [streamedTexts, setStreamedTexts] = React.useState<string[]>([\n    STREAMING_TEXT_LIST[0],\n  ]);\n\n  React.useEffect(() => {\n    if (streamedTexts.length >= STREAMING_TEXT_LIST.length) {\n      return;\n    }\n\n    const timeout = setTimeout(() => {\n      setStreamedTexts((prev) => [...prev, STREAMING_TEXT_LIST[prev.length]]);\n    }, 3000); // Add a new text every 3 seconds\n\n    return () => clearTimeout(timeout);\n  }, [streamedTexts.length]);\n\n  return (\n    <div className={css.storyContainer}>\n      <div>\n        Texts received: {streamedTexts.length} / {STREAMING_TEXT_LIST.length}\n      </div>\n      <ScrollingLoader\n        iconList={DEFAULT_ICONS}\n        textList={streamedTexts}\n        size={SCROLLING_LOADER_SIZE.medium}\n        textAnimationDuration={2000}\n        loopTexts={false}\n        testId=\"scrolling-loader-streaming-story\"\n      />\n    </div>\n  );\n};\n\nexport const StreamingStory = () => <StreamingLoaderWrapper />;\n\nStreamingStory.parameters = {\n  docs: {\n    description: {\n      story: `\n**Streaming Use Case**\n\nThis example demonstrates how the ScrollingLoader handles texts being added one by one,\nsimulating a streaming scenario where texts arrive from an API or WebSocket.\n\nWith \\`loopTexts={false}\\`, the animation:\n- Stops at the last text received\n- Resumes when new texts arrive\n- Stops again at the new last text\n\n**Usage with streaming:**\n\\`\\`\\`jsx\nconst [streamedTexts, setStreamedTexts] = useState<string[]>([]);\n\n// In your stream handler:\nonStreamMessage((text) => {\n  setStreamedTexts(prev => [...prev, text]);\n});\n\n<ScrollingLoader\n  iconList={iconList}\n  textList={streamedTexts}\n  size=\"medium\"\n  loopTexts={false}\n/>\n\\`\\`\\`\n      `,\n    },\n  },\n};\n\nDefaultStory.storyName = 'Default (Medium)';\nFluidSizeStory.storyName = 'Fluid Size';\nCreatingAgentStory.storyName = 'Creating Agent';\nCustomIconsStory.storyName = 'Custom Icons';\nStreamingStory.storyName = 'Streaming (Dynamic Texts)';\n"
+        },
+        "css": {
+          "path": "ScrollingLoader.module.css",
+          "content": "@value (\n  colorBackgroundTertiary,\n  colorBackgroundSecondary,\n  colorBorderTertiary,\n  colorTextPrimary,\n  colorFillNone\n) from '../../styles/variables/_color.css';\n\n@value (\n  spaceNone,\n  spaceXXSmall,\n  spaceXSmall,\n  spaceSmall,\n  spaceMedium,\n  spaceFluid,\n  spaceNegHalfFluid\n) from '../../styles/variables/_space.css';\n\n@value (\n  size8,\n  size12,\n  size16,\n  size20,\n  size24,\n  size34,\n  size42,\n  size90,\n  size100,\n  size150,\n  size200,\n  size240,\n  size260,\n  size276,\n  size284,\n  size300,\n  size320,\n  size426,\n  sizeFluid\n) from '../../styles/variables/_size.css';\n\n@value (\n  borderRadiusXSmall,\n  borderRadiusMedium,\n  borderWidthPrimary\n) from '../../styles/variables/_border.css';\n\n@value (\n  motionDurationNormal,\n  motionDurationSlow,\n  motionEaseInEaseOut\n) from '../../styles/variables/_motion.css';\n\n@value (\n  opacity0,\n  opacity100\n) from '../../styles/variables/_opacity.css';\n\n@value (\n  fontWeightMedium\n) from '../../styles/variables/_font.css';\n\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: spaceMedium;\n}\n\n.medium {\n  width: size284;\n}\n\n.large {\n  width: size426;\n}\n\n.fluid {\n  width: sizeFluid;\n}\n\n/* Skeleton Container */\n.skeletonContainer {\n  position: relative;\n  width: sizeFluid;\n  overflow: hidden;\n  border: borderWidthPrimary dashed colorBorderTertiary;\n  border-radius: borderRadiusMedium;\n  background-color: colorBackgroundTertiary;\n}\n\n/* Size-specific skeleton container heights */\n.medium .skeletonContainer {\n  height: size200;\n}\n\n.large .skeletonContainer,\n.fluid .skeletonContainer {\n  height: size300;\n}\n\n.skeletonScroller {\n  --animation-duration: 9s;\n  display: flex;\n  flex-direction: column;\n  gap: spaceMedium;\n  animation: scrollUp var(--animation-duration) linear infinite;\n}\n\n/* Size-specific skeleton scroller padding */\n.medium .skeletonScroller {\n  padding: spaceSmall;\n}\n\n.large .skeletonScroller,\n.fluid .skeletonScroller {\n  padding: spaceMedium;\n}\n\n.skeletonRow {\n  display: flex;\n  align-items: center;\n  gap: spaceXSmall;\n  flex-shrink: 0;\n}\n\n.skeletonRowSmall {\n  gap: spaceXSmall;\n}\n\n.skeletonRowLarge {\n  gap: spaceSmall;\n}\n\n.skeletonBars {\n  display: flex;\n  flex-direction: column;\n  gap: spaceXSmall;\n  flex: 1;\n}\n\n.skeletonBarTitle {\n  width: size90;\n  height: size12;\n  background-color: colorBackgroundSecondary;\n  border-radius: borderRadiusXSmall;\n}\n\n.skeletonBarSubtitle {\n  width: sizeFluid;\n  height: size8;\n  background-color: colorBackgroundSecondary;\n  border-radius: borderRadiusXSmall;\n}\n\n.skeletonRowLarge .skeletonBarTitle {\n  height: calc(size8 * 2);\n}\n\n.skeletonRowLarge .skeletonBarSubtitle {\n  height: size12;\n}\n\n/* Gradient Overlays */\n.gradientTop {\n  position: absolute;\n  top: calc(borderWidthPrimary * -1);\n  left: calc(borderWidthPrimary * -1);\n  right: calc(borderWidthPrimary * -1);\n  background: linear-gradient(\n    to bottom,\n    colorBackgroundTertiary opacity0,\n    colorFillNone opacity100\n  );\n  pointer-events: none;\n}\n\n.gradientBottom {\n  position: absolute;\n  bottom: calc(borderWidthPrimary * -1);\n  left: calc(borderWidthPrimary * -1);\n  right: calc(borderWidthPrimary * -1);\n  background: linear-gradient(\n    to top,\n    colorBackgroundTertiary opacity0,\n    colorFillNone opacity100\n  );\n  pointer-events: none;\n}\n\n/* Size-specific gradient overlay heights (50% of container height) */\n.medium .gradientTop,\n.medium .gradientBottom {\n  height: size100;\n}\n\n.large .gradientTop,\n.large .gradientBottom,\n.fluid .gradientTop,\n.fluid .gradientBottom {\n  height: size150;\n}\n\n/* Text Container */\n.textContainer {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  width: sizeFluid;\n  overflow: hidden;\n}\n\n/* Size-specific text container heights */\n.medium .textContainer {\n  height: calc(size20 + borderWidthPrimary);\n}\n\n.large .textContainer,\n.fluid .textContainer {\n  height: size24;\n}\n\n.textScroller {\n  position: absolute;\n  top: spaceNone;\n  left: spaceNone;\n  right: spaceNone;\n  bottom: spaceNone;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.textItem {\n  position: absolute;\n  white-space: nowrap;\n  color: colorTextPrimary;\n  font-weight: fontWeightMedium;\n  opacity: opacity0;\n  transform: translateY(spaceFluid);\n  /* No transition by default - allows instant reset without animation */\n}\n\n/* Size-specific text typography - applied conditionally via TSX */\n.textItemMedium {\n  composes: bodyMedium from '../../styles/typography.module.css';\n}\n\n.textItemLarge {\n  composes: bodyLarge from '../../styles/typography.module.css';\n}\n\n/* Active state - text sliding in and visible */\n.textItemActive {\n  opacity: opacity100;\n  transform: translateY(spaceNone);\n  transition: opacity motionDurationNormal motionEaseInEaseOut,\n    transform motionDurationNormal motionEaseInEaseOut;\n}\n\n/* Exiting state - text sliding out upward */\n.textItemExiting {\n  opacity: opacity0;\n  transform: translateY(spaceNegHalfFluid);\n  transition: opacity motionDurationNormal motionEaseInEaseOut,\n    transform motionDurationNormal motionEaseInEaseOut;\n}\n\n/* Static state for single item - no animation */\n.textItemStatic {\n  opacity: opacity100;\n  transform: translateY(spaceNone);\n}\n\n/* Scroll Animation */\n@keyframes scrollUp {\n  0% {\n    transform: translateY(spaceNone);\n  }\n  100% {\n    transform: translateY(spaceNegHalfFluid);\n  }\n}\n"
+        },
+        "index": {
+          "path": "index.d.ts",
+          "content": "export * from '../../components/ScrollingLoader/ScrollingLoader';\n//# sourceMappingURL=index.d.ts.map"
+        },
+        "additional": {}
+      },
+      "allFiles": [
+        "ScrollingLoader.module.css",
+        "ScrollingLoader.stories.module.css",
+        "ScrollingLoader.stories.tsx",
+        "ScrollingLoader.tsx",
+        "index.ts"
+      ]
+    },
     "SearchInput": {
       "name": "SearchInput",
       "path": "src/components/SearchInput",
@@ -2137,6 +2227,50 @@
         "index.ts"
       ]
     },
+    "StageArrows": {
+      "name": "StageArrows",
+      "path": "src/components/StageArrows",
+      "files": {
+        "main": {
+          "path": "StageArrows.d.ts",
+          "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\ntype ClassNames = Readonly<{\n    wrapper?: string;\n}>;\nexport interface StageArrowsProps {\n    disabled?: boolean;\n    children: React.ReactNode;\n    classNames?: ClassNames;\n    onStageArrowClick?: ((id: string, e?: React.SyntheticEvent<HTMLElement> | null | undefined) => unknown) | null | undefined;\n    testId?: string;\n}\nexport declare const StageArrows: Flow.AbstractComponent<StageArrowsProps, HTMLDivElement>;\nexport {};\n//# sourceMappingURL=StageArrows.d.ts.map"
+        },
+        "story": {
+          "path": "StageArrows.stories.tsx",
+          "content": "import * as React from 'react';\n\nimport {StageArrow} from 'src/components/StageArrows/StageArrow/StageArrow';\nimport type {StageArrowsProps} from 'src/components/StageArrows/StageArrows';\nimport {StageArrows} from 'src/components/StageArrows/StageArrows';\n\nimport css from 'src/components/StageArrows/StageArrows.stories.module.css';\n\n\nexport default {\n  tags: ['autodocs'],\n  title: 'Components/Stage Arrows/Stage Arrows',\n  component: StageArrows,\n  argTypes: {\n    classNames: {\n      description: 'Provide an optional className to be applied to the wrapper',\n      control: {type: 'object'},\n      table: {\n        type: {summary: '{ wrapper?: string }'},\n      },\n    },\n    disabled: {\n      description: 'If **true**, the component is disabled',\n      control: {type: 'boolean'},\n      table: {\n        type: {summary: 'boolean'},\n        defaultValue: {summary: 'false'},\n      },\n    },\n  },\n  parameters: {\n    docs: {\n      subtitle: 'Generates a StageArrows component.',\n      description: {\n        component: `\n\\`\\`\\`js\nimport { StageArrows } from \"@spaced-out/ui-design-system/lib/components/StageArrows\";\n\\`\\`\\`\nThe StageArrows component is a horizontal navigation component that displays a series of connected stages in a workflow or process. Each stage is represented by a <a href=\"../?path=/docs/components-stage-arrows-stage-arrow--docs\">\\`<StageArrow/>\\`</a> component that can be customized with different types (primary, warning, danger, success, information), icons, and states (disabled, locked)\n\n**note:** -\n1. If only one stage is passed in the StageArrows component, it will be rendered as a In-Between stage arrow.\n2. If two stages are passed in the StageArrows component, the first stage will be rendered as a Start stage arrow and the last stage will be rendered as a End stage arrow.\n        `,\n      },\n    },\n    storySource: {\n      componentPath: '/src/components/StageArrows/StageArrows.tsx',\n    },\n  },\n};\n\n\nexport const _TextOnly = (args: StageArrowsProps): React.ReactNode => (\n  <div className={css.container}>\n    <StageArrows {...args}>\n      <StageArrow id=\"1\" type=\"primary\">\n        Stage 1\n      </StageArrow>\n      <StageArrow id=\"3\" type=\"warning\">\n        Stage 2\n      </StageArrow>\n      <StageArrow id=\"4\" type=\"danger\">\n        Stage 3\n      </StageArrow>\n      <StageArrow id=\"6\" type=\"success\">\n        Stage 4\n      </StageArrow>\n      <StageArrow id=\"7\" type=\"information\">\n        Stage 5\n      </StageArrow>\n    </StageArrows>\n  </div>\n);\n\n_TextOnly.args = {\n  classNames: {wrapper: ''},\n};\n\nexport const _TextAndIcon = (args: StageArrowsProps): React.ReactNode => (\n  <div className={css.container}>\n    <StageArrows {...args}>\n      <StageArrow id=\"1\" type=\"primary\" iconRightName=\"sitemap\">\n        Stage 1\n      </StageArrow>\n      <StageArrow id=\"3\" type=\"warning\" iconRightName=\"sitemap\">\n        Stage 2\n      </StageArrow>\n      <StageArrow id=\"4\" type=\"danger\" iconRightName=\"sitemap\">\n        Stage 3\n      </StageArrow>\n      <StageArrow id=\"6\" type=\"success\" iconRightName=\"sitemap\">\n        Stage 4\n      </StageArrow>\n      <StageArrow id=\"7\" type=\"information\" iconRightName=\"sitemap\">\n        Stage 5\n      </StageArrow>\n    </StageArrows>\n  </div>\n);\n\n_TextAndIcon.args = {\n  classNames: {wrapper: ''},\n};\n\nexport const _Disabled = (args: StageArrowsProps): React.ReactNode => (\n  <div className={css.container}>\n    <StageArrows {...args}>\n      <StageArrow id=\"1\" type=\"primary\" iconLeftName=\"sitemap\">\n        Stage 1\n      </StageArrow>\n      <StageArrow id=\"3\" type=\"warning\" iconLeftName=\"sitemap\" disabled>\n        Stage 2\n      </StageArrow>\n      <StageArrow id=\"4\" type=\"danger\" iconLeftName=\"sitemap\">\n        Stage 3\n      </StageArrow>\n      <StageArrow id=\"6\" type=\"success\" iconLeftName=\"sitemap\">\n        Stage 4\n      </StageArrow>\n      <StageArrow id=\"7\" type=\"information\" iconLeftName=\"sitemap\" disabled>\n        Stage 5\n      </StageArrow>\n    </StageArrows>\n  </div>\n);\n\n_Disabled.args = {\n  classNames: {wrapper: ''},\n};\n"
+        },
+        "css": {
+          "path": "StageArrows.module.css",
+          "content": ".stageArrowsWrapper {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n\n.stageArrowsWrapper::-webkit-scrollbar {\n  display: none;\n}\n"
+        },
+        "index": {
+          "path": "index.d.ts",
+          "content": "export * from '../../components/StageArrows/StageArrow';\nexport * from '../../components/StageArrows/StageArrows';\n//# sourceMappingURL=index.d.ts.map"
+        },
+        "additional": {
+          "StageArrow/StageArrow.d.ts": {
+            "path": "StageArrow/StageArrow.d.ts",
+            "content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { IconType } from '../../../components/Icon';\nimport type { BaseTooltipProps } from '../../../components/Tooltip/Tooltip';\ntype ClassNames = Readonly<{\n    wrapper?: string;\n    icon?: string;\n}>;\nexport declare const STAGE_ARROW_TYPE: Readonly<{\n    primary: \"primary\";\n    danger: \"danger\";\n    success: \"success\";\n    warning: \"warning\";\n    information: \"information\";\n}>;\nexport type StageArrowType = (typeof STAGE_ARROW_TYPE)[keyof typeof STAGE_ARROW_TYPE];\nexport interface StageArrowProps {\n    id: string;\n    type?: StageArrowType;\n    disabled?: boolean;\n    iconLeftName?: string;\n    iconLeftType?: IconType;\n    iconRightName?: string;\n    iconRightType?: IconType;\n    classNames?: ClassNames;\n    isEndStageArrow?: boolean;\n    isStartStageArrow?: boolean;\n    onStageArrowClick?: ((id: string, e?: React.SyntheticEvent<HTMLElement> | null | undefined) => unknown) | null | undefined;\n    children: React.ReactNode;\n    tooltip?: BaseTooltipProps;\n    testId?: string;\n    locked?: boolean;\n}\nexport declare const StageArrow: Flow.AbstractComponent<StageArrowProps, HTMLButtonElement>;\nexport {};\n//# sourceMappingURL=StageArrow.d.ts.map"
+          },
+          "StageArrow/index.d.ts": {
+            "path": "StageArrow/index.d.ts",
+            "content": "export * from '../../../components/StageArrows/StageArrow/StageArrow';\n//# sourceMappingURL=index.d.ts.map"
+          }
+        }
+      },
+      "allFiles": [
+        "StageArrow/StageArrow.module.css",
+        "StageArrow/StageArrow.stories.module.css",
+        "StageArrow/StageArrow.stories.tsx",
+        "StageArrow/StageArrow.tsx",
+        "StageArrow/index.ts",
+        "StageArrows.module.css",
+        "StageArrows.stories.module.css",
+        "StageArrows.stories.tsx",
+        "StageArrows.tsx",
+        "index.ts"
+      ]
+    },
     "StatusIndicator": {
       "name": "StatusIndicator",
       "path": "src/components/StatusIndicator",
@@ -2669,7 +2803,7 @@
         },
         "css": {
           "path": "TokenListInput.module.css",
-          "content": "@value (\n  spaceNone,\n  spaceSmall,\n  spaceXSmall,\n  spaceXXSmall\n) from '../../styles/variables/_space.css';\n@value (\n  colorFocusDanger,\n  colorFillPrimary,\n  colorFillDisabled,\n  colorFocusPrimary,\n  colorBorderDanger,\n  colorBorderPrimary,\n  colorBorderTertiary\n) from '../../styles/variables/_color.css';\n@value (\n  borderWidthPrimary,\n  borderRadiusMedium,\n  borderRadiusSmall,\n  borderWidthNone,\n  borderWidthTertiary\n) from '../../styles/variables/_border.css';\n@value (\n  size2,\n  size4,\n  size8,\n  size26,\n  size228,\n  sizeFluid\n) from '../../styles/variables/_size.css';\n\n@value tokenListHeaderHeight: 18px;\n@value smallBoxHeight: 34px;\n@value mediumBoxHeight: 42px;\n\n.box {\n  display: flex;\n  gap: size8;\n  align-items: center;\n  flex-wrap: wrap;\n  width: sizeFluid;\n  max-height: size228;\n  flex: 0 0 auto;\n  overflow: auto;\n  cursor: pointer;\n}\n\n.box:not(.withError):not(.inputDisabled):not(.inputLocked):not(.inputHidden) {\n  border: borderWidthPrimary solid colorBorderPrimary;\n}\n\n.box:not(.withError):not(.inputDisabled):not(.inputLocked):not(\n    .inputHidden\n  ):hover {\n  border: borderWidthPrimary solid colorBorderTertiary;\n}\n\n.box:not(.withError):not(.inputDisabled):not(.inputLocked):not(\n    .inputHidden\n  ):focus-within {\n  border: borderWidthPrimary solid colorFillPrimary;\n  box-shadow: borderWidthNone borderWidthNone borderWidthNone\n    borderWidthTertiary colorFocusPrimary;\n}\n\n.box.withError {\n  border: borderWidthPrimary solid colorBorderDanger;\n}\n\n.box.withError:focus-within {\n  border: borderWidthPrimary solid colorBorderDanger;\n  box-shadow: borderWidthNone borderWidthNone borderWidthNone\n    borderWidthTertiary colorFocusDanger;\n}\n\n.box.inputLocked {\n  border: borderWidthPrimary solid colorBorderPrimary;\n  border-style: dashed;\n}\n\n.box.inputDisabled {\n  border: borderWidthPrimary solid colorBorderPrimary;\n  background-color: colorFillDisabled;\n}\n\n.tokenListContainer {\n  display: flex;\n  position: relative;\n  flex-flow: column;\n  width: sizeFluid;\n  gap: spaceXXSmall;\n}\n\n.tokenListHeader {\n  display: flex;\n  width: sizeFluid;\n  height: tokenListHeaderHeight;\n  justify-content: space-between;\n}\n\n.clearAllButton {\n  cursor: pointer;\n}\n\n.clearAllButton:focus-visible {\n  box-shadow: borderWidthNone borderWidthNone borderWidthNone\n    borderWidthTertiary colorFocusPrimary;\n}\n\n.medium {\n  border-radius: borderRadiusMedium;\n  padding: spaceXSmall spaceSmall;\n  min-height: mediumBoxHeight;\n}\n\n.small {\n  border-radius: borderRadiusSmall;\n  padding: spaceXXSmall spaceSmall;\n  min-height: smallBoxHeight;\n}\n\n.tokenListInputWrapper {\n  display: flex;\n  flex-direction: column;\n  gap: spaceXSmall;\n}\n\n.inputMedium {\n  composes: formInputMedium from '../../styles/typography.module.css';\n  min-width: calc(sizeFluid/4);\n  outline: none;\n  border: none;\n  background-color: transparent;\n  padding: spaceNone spaceNone spaceNone spaceNone;\n  flex: 1 0;\n}\n\n.inputSmall {\n  composes: formInputSmall from '../../styles/typography.module.css';\n  min-width: calc(sizeFluid/4);\n  outline: none;\n  border: none;\n  background-color: transparent;\n  padding: spaceNone spaceNone spaceNone spaceNone;\n  flex: 1 0;\n}\n\n.lockIcon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: auto;\n}\n\n.loaderContainer {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: size26;\n  height: size26;\n  margin-left: auto;\n}\n\n.menuWrapper {\n  width: var(--dropdown-width);\n  z-index: var(--menu-elevation);\n}\n"
+          "content": "@value (\n  spaceNone,\n  spaceSmall,\n  spaceXSmall,\n  spaceXXSmall\n) from '../../styles/variables/_space.css';\n@value (\n  colorFocusDanger,\n  colorFillPrimary,\n  colorFillDisabled,\n  colorFocusPrimary,\n  colorBorderDanger,\n  colorBorderPrimary,\n  colorBorderTertiary\n) from '../../styles/variables/_color.css';\n@value (\n  borderWidthPrimary,\n  borderRadiusMedium,\n  borderRadiusSmall,\n  borderWidthNone,\n  borderWidthTertiary\n) from '../../styles/variables/_border.css';\n@value (\n  size2,\n  size4,\n  size8,\n  size26,\n  size228,\n  sizeFluid\n) from '../../styles/variables/_size.css';\n\n@value tokenListHeaderHeight: 18px;\n@value smallBoxHeight: 34px;\n@value mediumBoxHeight: 42px;\n\n.box {\n  display: flex;\n  gap: size8;\n  align-items: center;\n  flex-wrap: wrap;\n  width: sizeFluid;\n  max-height: size228;\n  flex: 0 0 auto;\n  overflow: auto;\n  cursor: pointer;\n  border: borderWidthPrimary solid colorBorderPrimary;\n  --box-shadow-focus: initial;\n  --box-shadow-error-focus: initial;\n}\n\n.box:not(.withError):not(.inputDisabled):not(.inputLocked):not(.inputHidden) {\n  border-color: colorBorderPrimary;\n}\n\n.box:not(.withError):not(.inputDisabled):not(.inputLocked):not(\n    .inputHidden\n  ):hover {\n  border-color: colorBorderTertiary;\n}\n\n.box:not(.withError):not(.inputDisabled):not(.inputLocked):not(\n    .inputHidden\n  ):focus-within {\n  border-color: colorFillPrimary;\n  box-shadow: var(\n    --box-shadow-focus,\n    borderWidthNone borderWidthNone borderWidthNone borderWidthTertiary\n      colorFocusPrimary\n  );\n}\n\n.box.withError {\n  border-color: colorBorderDanger;\n}\n\n.box.withError:focus-within {\n  border-color: colorBorderDanger;\n  box-shadow: var(\n    --box-shadow-error-focus,\n    borderWidthNone borderWidthNone borderWidthNone borderWidthTertiary\n      colorFocusDanger\n  );\n}\n\n.box.inputLocked {\n  border-color: colorBorderPrimary;\n  border-style: dashed;\n}\n\n.box.inputDisabled {\n  border-color: colorBorderPrimary;\n}\n\n.tokenListContainer {\n  display: flex;\n  position: relative;\n  flex-flow: column;\n  width: sizeFluid;\n  gap: spaceXXSmall;\n}\n\n.tokenListHeader {\n  display: flex;\n  width: sizeFluid;\n  height: tokenListHeaderHeight;\n  justify-content: space-between;\n}\n\n.clearAllButton {\n  cursor: pointer;\n}\n\n.clearAllButton:focus-visible {\n  box-shadow: borderWidthNone borderWidthNone borderWidthNone\n    borderWidthTertiary colorFocusPrimary;\n}\n\n.medium {\n  border-radius: borderRadiusMedium;\n  padding: spaceXSmall spaceSmall;\n  min-height: mediumBoxHeight;\n}\n\n.small {\n  border-radius: borderRadiusSmall;\n  padding: spaceXXSmall spaceSmall;\n  min-height: smallBoxHeight;\n}\n\n.tokenListInputWrapper {\n  display: flex;\n  flex-direction: column;\n  gap: spaceXSmall;\n}\n\n.inputMedium {\n  composes: formInputMedium from '../../styles/typography.module.css';\n  min-width: calc(sizeFluid/4);\n  outline: none;\n  border: none;\n  background-color: transparent;\n  padding: spaceNone spaceNone spaceNone spaceNone;\n  flex: 1 0;\n}\n\n.inputSmall {\n  composes: formInputSmall from '../../styles/typography.module.css';\n  min-width: calc(sizeFluid/4);\n  outline: none;\n  border: none;\n  background-color: transparent;\n  padding: spaceNone spaceNone spaceNone spaceNone;\n  flex: 1 0;\n}\n\n.lockIcon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: auto;\n}\n\n.loaderContainer {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: size26;\n  height: size26;\n  margin-left: auto;\n}\n\n.menuWrapper {\n  width: var(--dropdown-width);\n  z-index: var(--menu-elevation);\n}\n"
         },
         "index": {
           "path": "index.d.ts",
@@ -4456,6 +4590,9 @@
           "12": {
             "value": "12px"
           },
+          "16": {
+            "value": "16px"
+          },
           "18": {
             "value": "18px"
           },
@@ -4534,6 +4671,9 @@
           "140": {
             "value": "140px"
           },
+          "150": {
+            "value": "150px"
+          },
           "160": {
             "value": "160px"
           },
@@ -4558,6 +4698,9 @@
           "276": {
             "value": "276px"
           },
+          "284": {
+            "value": "284px"
+          },
           "300": {
             "value": "300px"
           },
@@ -4570,6 +4713,9 @@
           "400": {
             "value": "400px"
           },
+          "426": {
+            "value": "426px"
+          },
           "480": {
             "value": "480px"
           },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/genesis-mcp",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "MCP server for Genesis UI Design System - provides AI assistants with access to components, hooks, and design tokens",
   "type": "module",
   "main": "index.js",