@gostudent/shared-ui-library-mcp 1.23.2-DT-16968

package/library-manifest.json

@@ -0,0 +1,1569 @@
+{
+  "libraryVersion": "1.23.2",
+  "components": [
+    {
+      "name": "Avatar",
+      "description": "The **Avatar** component displays a user's photo or, when no image is available, their\ninitials on a colour background. The background colour is derived deterministically from\nthe user's name so the same person always gets the same colour.\n\nThree sizes are available — `sm` (32px), `md` (40px), `lg` (48px) — and four colour\nvariants: `pink`, `purple`, `green`, `orange`.\n\n### Usage\n\n```tsx\nimport { Avatar } from '@gostudent/shared-ui-library';\n\n<Avatar name=\"Jane Doe\" />\n<Avatar name=\"Jane Doe\" src=\"/path/to/photo.jpg\" />\n<Avatar name=\"Jane Doe\" status=\"done\" />\n```\n\n### Accessibility\n\n- Renders a `role=\"img\"` span with `aria-label` set to the user's name.\n- The initials text is `aria-hidden` to avoid redundant screen reader output.\n- The status badge is `aria-hidden` as it is decorative.",
+      "props": [
+        {
+          "name": "name",
+          "description": "Full name used for initials fallback and aria-label.",
+          "options": []
+        },
+        {
+          "name": "src",
+          "description": "Image URL. Falls back to initials on load error.",
+          "options": []
+        },
+        {
+          "name": "size",
+          "description": "Avatar diameter: sm=32px, md=40px, lg=48px.",
+          "options": [
+            "sm",
+            "md",
+            "lg"
+          ]
+        },
+        {
+          "name": "color",
+          "description": "Background colour for the initials variant. Omit to derive from name.",
+          "options": [
+            "pink",
+            "purple",
+            "green",
+            "orange"
+          ]
+        },
+        {
+          "name": "status",
+          "description": "When \"done",
+          "options": [
+            "default",
+            "done"
+          ]
+        },
+        {
+          "name": "className",
+          "description": "Additional CSS class applied to the root element.",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "<Avatar name=\"Jane Doe\" size=\"md\" status=\"default\" />"
+        }
+      ]
+    },
+    {
+      "name": "AvatarGroup",
+      "description": "The **AvatarGroup** component renders a stack of overlapping `Avatar` components.\nWhen `max` is set, additional avatars are collapsed into a `+N` overflow badge.\n\n### Usage\n\n```tsx\nimport { AvatarGroup, Avatar } from '@gostudent/shared-ui-library';\n\n<AvatarGroup max={3}>\n  <Avatar name=\"Anna Smith\" />\n  <Avatar name=\"Ben Johnson\" />\n  <Avatar name=\"Clara Williams\" />\n  <Avatar name=\"Dan Brown\" />\n</AvatarGroup>\n```",
+      "props": [
+        {
+          "name": "max",
+          "description": "Maximum avatars to show before collapsing into +N overflow.",
+          "options": []
+        },
+        {
+          "name": "overlap",
+          "description": "Pixel overlap between avatars. Default: 9.",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "<AvatarGroup overlap={9} />"
+        }
+      ]
+    },
+    {
+      "name": "Button",
+      "description": "The **Button** component is a flexible, accessible button that supports three variants\n(`primary`, `secondary`, `link`), six sizes (`xxs` → `xl`), optional leading/trailing icons,\nand full disabled and focus states.\n\nColours are driven by CSS custom properties so the button automatically adapts to the\nactive brand theme (`gs` or `sk`). Switch themes using the toolbar at the top of the page.\n\n### Usage\n\n```tsx\nimport { Button } from '@gostudent/shared-ui-library';\n\n<Button variant=\"primary\" size=\"md\" onClick={handleClick}>\n  Save changes\n</Button>\n```\n\n### Accessibility\n\n- Renders a native `<button>` element — keyboard and screen-reader accessible by default.\n- Use `type=\"submit\"` inside a `<form>` to trigger form submission.\n- Disabled buttons have `cursor: not-allowed` and are excluded from tab order.\n- Focus ring is visible and uses `outline-offset` to avoid overlapping the border.",
+      "props": [
+        {
+          "name": "variant",
+          "description": "Visual style of the button.",
+          "options": [
+            "primary",
+            "secondary",
+            "link"
+          ]
+        },
+        {
+          "name": "size",
+          "description": "Height and font-size scale. Accepts a single size or a `[mobile, desktop]",
+          "options": [
+            "xxs",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl"
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "When true the button is non-interactive.",
+          "options": []
+        },
+        {
+          "name": "forceFocus",
+          "description": "Force the focus-visible ring appearance.",
+          "options": []
+        },
+        {
+          "name": "forceActive",
+          "description": "Force the active/pressed appearance.",
+          "options": []
+        },
+        {
+          "name": "children",
+          "description": "Button label text.",
+          "options": []
+        },
+        {
+          "name": "leftIcon",
+          "description": "React node rendered to the left of the label.",
+          "options": []
+        },
+        {
+          "name": "rightIcon",
+          "description": "React node rendered to the right of the label.",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "<Button variant=\"primary\" size=\"md\" children=\"Button\" disabled={false} />"
+        },
+        {
+          "name": "Primary",
+          "jsx": "<Button variant=\"primary\" size=\"md\" children=\"Button\" />"
+        },
+        {
+          "name": "Secondary",
+          "jsx": "<Button variant=\"secondary\" size=\"md\" children=\"Button\" />"
+        }
+      ]
+    },
+    {
+      "name": "Calendar",
+      "description": "Single-month date picker built on react-day-picker. Controlled only — consumer manages `value` and `onChange`.\n\n### Peer dependencies\n\nThis component requires **`date-fns`** to be installed in the consuming project:\n\n```sh\nnpm install date-fns\n```\n\n### Locale\n\nPass a `date-fns` `Locale` object via the `locale` prop. Resolve it from your app's i18n state — the component does not accept a locale string.\n\n```ts\n// i18next (e.g. tutor-portal)\nimport { de, enGB } from 'date-fns/locale';\nconst locale = i18n.language.startsWith('de') ? de : enGB;\n\n// Next.js App Router (e.g. gs-desk-frontend)\nimport { de, enGB } from 'date-fns/locale';\nconst locale = lang === 'de' ? de : enGB;\n```\n\nWhen `locale` is omitted, the calendar defaults to `enGB`.",
+      "props": [
+        {
+          "name": "value",
+          "description": "Currently selected date. Pass `null",
+          "options": []
+        },
+        {
+          "name": "onChange",
+          "description": "Called with a noon-normalised `Date",
+          "options": []
+        },
+        {
+          "name": "markedDates",
+          "description": "Dates that show a dot indicator (e.g. days with booked lessons).",
+          "options": []
+        },
+        {
+          "name": "disabledDates",
+          "description": "Dates that are not selectable.",
+          "options": []
+        },
+        {
+          "name": "locale",
+          "description": "A `date-fns",
+          "options": []
+        },
+        {
+          "name": "weekStartsOn",
+          "description": "0 = week starts Sunday, 1 = week starts Monday (default).",
+          "options": []
+        },
+        {
+          "name": "renderDayContent",
+          "description": "Render prop called with the selected date. Return content shown below the calendar grid. Nothing is rendered when `value",
+          "options": []
+        },
+        {
+          "name": "markedDatesLabel",
+          "description": "Legend label for marked dates. Defaults to \"has lesson\".",
+          "options": []
+        },
+        {
+          "name": "secondaryMarkedDates",
+          "description": "Dates that show a red dot indicator (e.g. days with pending feedback).",
+          "options": []
+        },
+        {
+          "name": "secondaryMarkedDatesLabel",
+          "description": "Legend label for secondary marked dates. Defaults to \"has pending feedback\".",
+          "options": []
+        },
+        {
+          "name": "todayLabel",
+          "description": "Label for the Today button. Defaults to \"Today\".",
+          "options": []
+        },
+        {
+          "name": "previousMonthLabel",
+          "description": "Accessible label for the previous month nav button. Defaults to \"Previous month\".",
+          "options": []
+        },
+        {
+          "name": "nextMonthLabel",
+          "description": "Accessible label for the next month nav button. Defaults to \"Next month\".",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "// See \"Default\" story — uses interactive render wrapper"
+        },
+        {
+          "name": "WithMarkedDates",
+          "jsx": "// See \"WithMarkedDates\" story — uses interactive render wrapper"
+        },
+        {
+          "name": "WithBothLegends",
+          "jsx": "// See \"WithBothLegends\" story — uses interactive render wrapper"
+        }
+      ]
+    },
+    {
+      "name": "Card",
+      "description": "The **Card** component is a styled container providing background, border, border-radius,\nand padding. It sets `container-type: inline-size` so child components can use CSS\ncontainer queries for responsive behaviour.\n\n### Usage\n\n```tsx\nimport { Card } from '@gostudent/shared-ui-library';\n\n<Card padding=\"lg\" radius=\"sm\">\n  <p>Card content</p>\n</Card>\n```",
+      "props": [
+        {
+          "name": "padding",
+          "description": "Inner padding: none | sm=8px | md=16px | lg=24px.",
+          "options": [
+            "none",
+            "sm",
+            "md",
+            "lg"
+          ]
+        },
+        {
+          "name": "radius",
+          "description": "Border radius: sm=8px | md=12px | lg=16px.",
+          "options": [
+            "sm",
+            "md",
+            "lg"
+          ]
+        },
+        {
+          "name": "bordered",
+          "description": "Show a 1px border using the default border colour.",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "<Card padding=\"lg\" radius=\"sm\" bordered={true} children=\"Card content goes here.\" />"
+        },
+        {
+          "name": "NoBorder",
+          "jsx": "<Card padding=\"lg\" radius=\"sm\" bordered={false} children=\"This card has no border.\" />"
+        }
+      ]
+    },
+    {
+      "name": "Checkbox",
+      "description": "A styled checkbox input with an optional label. Wraps a native `<input type=\"checkbox\">` so all standard input props (checked, onChange, disabled, etc.) work out of the box.\n\nTypography is responsive: body-md on mobile, body-sm on desktop (tablet breakpoint).\n\n### Accessibility\n\nThe component renders as a `<label>` wrapping a visually-hidden native checkbox, preserving full keyboard and screen-reader support. Focus ring is displayed on `:focus-visible` only.\n\n### Usage\n\n```tsx\nimport { Checkbox } from '@gostudent/shared-ui-library';\n\n<Checkbox\n  label=\"Pending feedback\"\n  checked={value}\n  onChange={(e) => setValue(e.target.checked)}\n/>\n```",
+      "props": [
+        {
+          "name": "label",
+          "description": "Text or React node rendered next to the checkbox box.",
+          "options": []
+        },
+        {
+          "name": "checked",
+          "description": "Whether the checkbox is checked (controlled).",
+          "options": []
+        },
+        {
+          "name": "disabled",
+          "description": "When true, the checkbox is non-interactive and visually muted.",
+          "options": []
+        },
+        {
+          "name": "onChange",
+          "description": "Change handler — receives the native `React.ChangeEvent<HTMLInputElement>`.",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "<Checkbox label=\"Option label\" />"
+        },
+        {
+          "name": "Checked",
+          "jsx": "<Checkbox label=\"Option label\" checked={true} onChange={() => {} />"
+        },
+        {
+          "name": "Disabled",
+          "jsx": "<Checkbox label=\"Disabled unchecked\" disabled={true} />"
+        }
+      ]
+    },
+    {
+      "name": "DataList",
+      "description": "A structured list for displaying tabular-style data rows under a titled section. Supports an optional add action button and shows an empty state when no items are present.\n\nEach row renders four fixed fields — date, event type, subject, and grade — with an optional `actions` slot for icons such as edit or delete.\n\n### Usage\n\n```tsx\nimport { DataList } from '@gostudent/shared-ui-library';\n\n<DataList\n  title=\"Grades (optional)\"\n  items={[{ id: '1', date: '22.01.26', eventType: 'Exam', subject: 'English', grade: '2+' }]}\n  onAdd={() => {}}\n/>\n```",
+      "props": [
+        {
+          "name": "title",
+          "description": "Section label rendered above the list.",
+          "options": []
+        },
+        {
+          "name": "items",
+          "description": "Array of data rows. Each item requires `id",
+          "options": []
+        },
+        {
+          "name": "addLabel",
+          "description": "Label for the add action button. Defaults to \"Add grade\".",
+          "options": []
+        },
+        {
+          "name": "onAdd",
+          "description": "Callback fired when the add button is clicked. When omitted, the button is not rendered.",
+          "options": []
+        },
+        {
+          "name": "emptyStateText",
+          "description": "Placeholder text shown inside the empty state container when `items",
+          "options": []
+        },
+        {
+          "name": "className",
+          "description": "Additional CSS class applied to the root element.",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "<DataList title=\"Grades (optional)\" items={sampleItems} onAdd={() => {} />"
+        },
+        {
+          "name": "EmptyState",
+          "jsx": "<DataList title=\"Grades (optional)\" items={[]} onAdd={() => {} />"
+        },
+        {
+          "name": "WithoutAddButton",
+          "jsx": "<DataList title=\"Grades (optional)\" items={sampleItems} />"
+        }
+      ]
+    },
+    {
+      "name": "Disclosure",
+      "description": "A lightweight disclosure (expand/collapse) component that reveals inline content when toggled.\n\nFollows the WAI-ARIA disclosure pattern — the trigger is a `<button>` with `aria-expanded`,\nand the collapsible region appears directly below, pushing layout down (not a floating overlay).\n\nSupports both **uncontrolled** (via `defaultOpen`) and **controlled** (via `open` + `onToggle`) modes.\n\n### Usage\n\n```tsx\nimport { Disclosure, InfoIcon } from '@gostudent/shared-ui-library';\n\n<Disclosure\n  trigger={\n    <>\n      <InfoIcon size=\"sm\" />\n      <span>5 pending feedback</span>\n    </>\n  }\n>\n  <ul>\n    <li>Alice — awaiting review</li>\n    <li>Bob — submitted</li>\n  </ul>\n</Disclosure>\n```",
+      "props": [
+        {
+          "name": "trigger",
+          "description": "Content rendered inside the toggle button (icon + label, etc.).",
+          "options": []
+        },
+        {
+          "name": "children",
+          "description": "Collapsible content revealed when the disclosure is open.",
+          "options": []
+        },
+        {
+          "name": "defaultOpen",
+          "description": "Initial open state in uncontrolled mode. Ignored when `open",
+          "options": []
+        },
+        {
+          "name": "open",
+          "description": "Controlled open state. When provided the component is fully controlled.",
+          "options": []
+        },
+        {
+          "name": "onToggle",
+          "description": "Callback fired with the next open state whenever the trigger is clicked.",
+          "options": []
+        },
+        {
+          "name": "className",
+          "description": "Additional CSS class applied to the root element.",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "<Disclosure trigger={(      <>        <InfoIcon size=\"sm\" />        <span>5 pending feedback</span>      </>    )} children={(      <ul style={{ margin: '8px 0 0'} padding=\"0 0 0 1.25rem\" listStyle=\"disc' }}>        <li>Alice — awaiting review</li>        <li>Bob — submitted</li>        <li>Charlie — in progress</li>        <li>Diana — not started</li>        <li>Eve — awaiting review</li>      </ul>    ) defaultOpen={false} />"
+        },
+        {
+          "name": "DefaultOpen",
+          "jsx": "<Disclosure trigger={(      <>        <InfoIcon size=\"sm\" />        <span>5 pending feedback</span>      </>    )} children={(      <ul style={{ margin: '8px 0 0'} padding=\"0 0 0 1.25rem\" listStyle=\"disc' }}>        <li>Alice — awaiting review</li>        <li>Bob — submitted</li>        <li>Charlie — in progress</li>        <li>Diana — not started</li>        <li>Eve — awaiting review</li>      </ul>    ) defaultOpen={true} />"
+        },
+        {
+          "name": "TextOnlyTrigger",
+          "jsx": "<Disclosure trigger={<span>Show details</span>} children={(      <p style={{ margin: '8px 0 0'} fontSize=\"14px' }}>        Any React content can go here — lists />"
+        }
+      ]
+    },
+    {
+      "name": "Divider",
+      "description": "",
+      "props": [
+        {
+          "name": "color",
+          "description": "Override the border color. Accepts any CSS color value or variable, e.g. `var(--color-border-default)`.",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "<Divider spacingTop=\"sm\" spacingBottom=\"sm\" />"
+        }
+      ]
+    },
+    {
+      "name": "Drawer",
+      "description": "Generic slide-in panel with optional header, scrollable body, and footer slots.\n\nSupports four **positions**: `left`, `right`, `top`, `bottom`.\n\n**overlay behaviour:**\n- `overlay={true}` (default) — drawer slides **over** page content; a semi-transparent scrim dims the background. Click the scrim or press Escape to close.\n- `overlay={false}` — drawer **pushes** page content sideways; no scrim, background stays fully visible and interactive.",
+      "props": [
+        {
+          "name": "isOpen",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "onClose",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "position",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "width",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "height",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "header",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "footer",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "children",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "overlay",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "fullScreenOnMobile",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "scrollable",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "className",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "aria-label",
+          "description": "",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "// See \"Default\" story — uses interactive render wrapper"
+        },
+        {
+          "name": "RightSide",
+          "jsx": "// See \"RightSide\" story — uses interactive render wrapper"
+        },
+        {
+          "name": "Top",
+          "jsx": "// See \"Top\" story — uses interactive render wrapper"
+        }
+      ]
+    },
+    {
+      "name": "DropdownMenu",
+      "description": "**DropdownMenu** is a styled menu panel used with an **IconButton** trigger.\nIt is a presentational component — the consumer manages open/closed state and positioning.\n\n### Usage\n\n```tsx\nimport { DropdownMenu, DropdownMenuItem, IconButton, KebabIcon } from '@gostudent/shared-ui-library';\n\nconst [open, setOpen] = useState(false);\n\n<div style={{ position: 'relative', display: 'inline-block' }}>\n  <IconButton icon={<KebabIcon />} aria-label=\"More options\" onClick={() => setOpen(o => !o)} />\n  {open && (\n    <div style={{ position: 'absolute', top: '100%', right: 0, marginTop: 4 }}>\n      <DropdownMenu>\n        <DropdownMenuItem onClick={() => {}}>Reschedule lesson</DropdownMenuItem>\n        <DropdownMenuItem onClick={() => {}}>Cancel lesson</DropdownMenuItem>\n      </DropdownMenu>\n    </div>\n  )}\n</div>\n```",
+      "props": [
+        {
+          "name": "children",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "className",
+          "description": "",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "// See \"Default\" story — uses interactive render wrapper"
+        },
+        {
+          "name": "WithoutIcons",
+          "jsx": "// See \"WithoutIcons\" story — uses interactive render wrapper"
+        },
+        {
+          "name": "WithDisabledItem",
+          "jsx": "// See \"WithDisabledItem\" story — uses interactive render wrapper"
+        }
+      ]
+    },
+    {
+      "name": "Grid",
+      "description": "The **Grid** component is a layout primitive that wraps CSS Grid. It maps `columns` and `gap` values to the design token spacing scale and supports responsive tuples for both.\n\n### Usage\n\n```tsx\nimport { Grid } from '@gostudent/shared-ui-library';\n\n<Grid columns={3} gap=\"md\">\n  <div>A</div>\n  <div>B</div>\n  <div>C</div>\n</Grid>\n```\n\n### Responsive — 2-tuple `[mobile, desktop]`\n\n```tsx\n<Grid columns={[1, 3]} gap={['sm', 'md']}>\n  ...\n</Grid>\n```\n\n### Responsive — 3-tuple `[mobile, tablet, desktop]`\n\nMatches the Figma grid spec: 4 columns on mobile, 8 on tablet (≥ 640 px), 12 on desktop (≥ 1024 px).\n\n```tsx\n<Grid columns={[4, 8, 12]} gap={['xs', 'sm', 'md']}>\n  ...\n</Grid>\n```",
+      "props": [
+        {
+          "name": "columns",
+          "description": "Number of equal-width columns. Accepts a single value, a `[mobile, desktop]",
+          "options": []
+        },
+        {
+          "name": "gap",
+          "description": "Gap between cells, mapped to `--spacing-*",
+          "options": [
+            "none",
+            "3xs",
+            "xxs",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl",
+            "3xl"
+          ]
+        },
+        {
+          "name": "rowGap",
+          "description": "Separate row gap override. Falls back to `gap",
+          "options": [
+            "none",
+            "3xs",
+            "xxs",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl",
+            "3xl"
+          ]
+        },
+        {
+          "name": "align",
+          "description": "Aligns grid items along the block axis (`align-items`). Defaults to `stretch`.",
+          "options": [
+            "start",
+            "center",
+            "end",
+            "stretch"
+          ]
+        },
+        {
+          "name": "as",
+          "description": "Renders as this HTML element or React component. Defaults to `div`.",
+          "options": []
+        },
+        {
+          "name": "className",
+          "description": "Optional extra CSS class for layout overrides.",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "<Grid columns={3} gap=\"md\" />"
+        },
+        {
+          "name": "Responsive",
+          "jsx": "<Grid mobileColumns={4} tabletColumns={8} desktopColumns={12} mobileGap=\"xs\" tabletGap=\"sm\" desktopGap=\"md\" />"
+        }
+      ]
+    },
+    {
+      "name": "IconButton",
+      "description": "The **IconButton** is an accessible, icon-only button. Because it has no visible label,\n`aria-label` is required.\n\n### Usage\n\n```tsx\nimport { IconButton } from '@gostudent/shared-ui-library';\n\n<IconButton icon={<KebabIcon />} aria-label=\"More options\" />\n```\n\n### Accessibility\n\n- Renders a native `<button>` with a required `aria-label`.\n- Has a visible focus ring via `focus-visible`.\n- Disabled state reduces opacity to 40 % and sets `cursor: not-allowed`.",
+      "props": [
+        {
+          "name": "size",
+          "description": "Button diameter: sm=24px, md=32px, lg=40px.",
+          "options": [
+            "sm",
+            "md",
+            "lg"
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "When true the button is non-interactive.",
+          "options": []
+        },
+        {
+          "name": "color",
+          "description": "Override the icon colour with any CSS color value or token variable (e.g. `var(--color-feedback-negative-icon)`).",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "<IconButton icon={<KebabIcon />} size=\"md\" disabled={false} />"
+        },
+        {
+          "name": "Disabled",
+          "jsx": "<IconButton icon={<KebabIcon />} size=\"md\" disabled={true} />"
+        }
+      ]
+    },
+    {
+      "name": "InputSelect",
+      "description": "Single-select input with a dropdown list.\n\n- Trigger styled as an input field (48 px height, 2 px border, 4 px radius)\n- Chevron rotates 180° when open\n- Selected option shows a checkmark and a distinct background\n- Optional left icon slot (e.g. `GlobeIcon` for language pickers)\n- Closes on **Escape** or **click outside**\n- Full keyboard + ARIA support: `role=\"listbox\"` / `role=\"option\"` / `aria-selected`",
+      "props": [
+        {
+          "name": "options",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "value",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "onChange",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "placeholder",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "icon",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "disabled",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "className",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "aria-label",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "error",
+          "description": "",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "// See \"Default\" story — uses interactive render wrapper"
+        },
+        {
+          "name": "WithSelection",
+          "jsx": "// See \"WithSelection\" story — uses interactive render wrapper"
+        },
+        {
+          "name": "WithIcon",
+          "jsx": "// See \"WithIcon\" story — uses interactive render wrapper"
+        }
+      ]
+    },
+    {
+      "name": "InputText",
+      "description": "A single-line text input field with an optional label, placeholder, tooltip slot, and error message.\n\nSupports all standard HTML `<input>` attributes (type, name, value, onChange, etc.) in addition to its own props.\n\n### Usage\n\n```tsx\nimport { InputText } from '@gostudent/shared-ui-library';\n\n<InputText\n  label=\"Full name (required)\"\n  placeholder=\"Your first and last names\"\n  onChange={(e) => console.log(e.target.value)}\n/>\n\n<InputText\n  label=\"Full name (required)\"\n  error=\"Please enter your name\"\n/>\n```",
+      "props": [
+        {
+          "name": "label",
+          "description": "Label text rendered above the input field.",
+          "options": []
+        },
+        {
+          "name": "placeholder",
+          "description": "Placeholder text shown when the input is empty.",
+          "options": []
+        },
+        {
+          "name": "error",
+          "description": "Error message rendered below the input. Also applies the error border style.",
+          "options": []
+        },
+        {
+          "name": "disabled",
+          "description": "When true, the input is non-interactive. The background and border switch to disabled tokens; text content fades to 40% opacity.",
+          "options": []
+        },
+        {
+          "name": "tooltip",
+          "description": "React node rendered in the 20×20 slot to the right of the label. Intended for a help/info icon.",
+          "options": []
+        },
+        {
+          "name": "size",
+          "description": "Text size of the input. `md",
+          "options": [
+            "md",
+            "lg"
+          ]
+        },
+        {
+          "name": "multiline",
+          "description": "When true, renders a `<textarea>",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "<InputText label=\"Full name (required)\" placeholder=\"Your first and last names\" />"
+        },
+        {
+          "name": "Error",
+          "jsx": "<InputText label=\"Full name (required)\" placeholder=\"Your first and last names\" error=\"Please enter your name\" />"
+        },
+        {
+          "name": "Disabled",
+          "jsx": "<InputText label=\"Full name (required)\" placeholder=\"Input text\" disabled={true} />"
+        }
+      ]
+    },
+    {
+      "name": "MetadataItem",
+      "description": "The **MetadataItem** component pairs a small icon with a text label for displaying\nstructured information such as dates, times, durations, or participant counts.\n\n### Usage\n\n```tsx\nimport { MetadataItem, EventNoteIcon } from '@gostudent/shared-ui-library';\n\n<MetadataItem icon={<EventNoteIcon />}>Mon, 14 Apr 2025</MetadataItem>\n```",
+      "props": [
+        {
+          "name": "children",
+          "description": "Text content displayed next to the icon.",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "<MetadataItem icon={<EventNoteIcon />} children=\"Mon />"
+        }
+      ]
+    },
+    {
+      "name": "Modal",
+      "description": "A primitive overlay dialog. Handles the portal, scrim, focus trap, scroll lock, size variants, and keyboard/click dismissal.\n\nAll content is composed via `children`. Use `labelledBy` to wire up `aria-labelledby` by pointing it at the `id` of your heading element inside children.\n\n### Usage\n\n```tsx\nimport { Modal } from '@gostudent/shared-ui-library';\n\nfunction ConfirmModal({ isOpen, onClose }) {\n  return (\n    <Modal isOpen={isOpen} onClose={onClose} labelledBy=\"confirm-title\">\n      <h2 id=\"confirm-title\">Confirm action</h2>\n      <p>This cannot be undone.</p>\n      <div style={{ display: 'flex', gap: 8 }}>\n        <Button variant=\"secondary\" size=\"md\" onClick={onClose}>Cancel</Button>\n        <Button variant=\"primary\" size=\"md\" onClick={handleConfirm}>Confirm</Button>\n      </div>\n    </Modal>\n  );\n}\n```",
+      "props": [
+        {
+          "name": "isOpen",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "onClose",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "labelledBy",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "dismissable",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "size",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "fullScreenMobile",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "noPadding",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "children",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "className",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "data-testid",
+          "description": "",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "<Modal size=\"sm\" dismissable={true} fullScreenMobile={false} />"
+        },
+        {
+          "name": "PrimaryActionOnly",
+          "jsx": "<Modal size=\"sm\" dismissable={true} />"
+        },
+        {
+          "name": "NoButtons",
+          "jsx": "<Modal size=\"sm\" dismissable={true} />"
+        }
+      ]
+    },
+    {
+      "name": "InlineNotification",
+      "description": "Embedded within the page layout, directly associated with a specific area of content.\nStays visible until the user dismisses it or the condition resolves.\n\nSupports five intent types: `info-neutral`, `info-branded`, `success`, `warning`, `error`.\n\nThe layout is responsive: stacked (mobile) → horizontal single-row (desktop ≥ 1024px).\nUse `stacked` to force the column layout regardless of viewport — useful inside narrow sidebar columns.\n\n### Usage\n\n```tsx\nimport { InlineNotification } from '@gostudent/shared-ui-library';\n\n<InlineNotification\n  type=\"success\"\n  title=\"Changes saved\"\n  message=\"Your profile has been updated successfully.\"\n  onDismiss={() => {}}\n/>\n```",
+      "props": [
+        {
+          "name": "type",
+          "description": "",
+          "options": [
+            "info-neutral",
+            "info-branded",
+            "success",
+            "warning",
+            "error"
+          ]
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "<InlineNotification type=\"info-neutral\" title=\"Notification title\" message=\"This is an informational message.\" />"
+        },
+        {
+          "name": "InfoNeutral",
+          "jsx": "<InlineNotification type=\"info-neutral\" title=\"Notification title\" message=\"This is an informational message.\" actionLink={true} />"
+        },
+        {
+          "name": "InfoBranded",
+          "jsx": "<InlineNotification type=\"info-branded\" title=\"Notification title\" message=\"This is an informational message.\" actionLink={true} />"
+        }
+      ]
+    },
+    {
+      "name": "ToastNotification",
+      "description": "Transient overlay notifications that appear over the page content and auto-dismiss after a set duration (default 5s).\n\nWrap your app (or story) in `<ToastProvider>` and trigger toasts via the `useToast` hook.\n\n### Interaction rules\n- Hovering a toast pauses the auto-dismiss timer\n- Clicking ✕ dismisses immediately\n- New toasts push existing ones down (max 3 visible at once)\n- On mobile: full-width bottom-sheet style\n\n### Usage\n\n```tsx\nimport { ToastProvider, useToast } from '@gostudent/shared-ui-library';\n\nfunction App() {\n  return (\n    <ToastProvider>\n      <MyPage />\n    </ToastProvider>\n  );\n}\n\nfunction MyPage() {\n  const { addToast } = useToast();\n  return (\n    <button onClick={() => addToast({ type: 'success', title: 'Saved', message: 'Your changes have been saved.' })}>\n      Save\n    </button>\n  );\n}\n```",
+      "props": [
+        {
+          "name": "children",
+          "description": "",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "Interactive",
+          "jsx": "// See \"Interactive\" story — uses interactive render wrapper"
+        },
+        {
+          "name": "InteractionRules",
+          "jsx": "// See \"InteractionRules\" story — uses interactive render wrapper"
+        }
+      ]
+    },
+    {
+      "name": "TopBanner",
+      "description": "Full-width persistent notification placed above or below the main navigation bar.\nUsed for high-priority, global announcements (maintenance windows, subscription warnings, system-wide alerts).\n\n- Inline single-line layout, 56px height\n- 5 intent types: `info-neutral`, `info-branded`, `success`, `warning`, `error`\n- `info-branded` uses the Stars icon and branded colours\n- Max 1 banner at a time (usage rule — not enforced by the component)\n- Does not auto-dismiss\n\n### Usage\n\n```tsx\nimport { TopBanner } from '@gostudent/shared-ui-library';\n\n<TopBanner\n  type=\"warning\"\n  title=\"Scheduled maintenance\"\n  message=\"Maintenance on Apr 26, 02:00–04:00 UTC.\"\n  actionLink\n  linkText=\"Learn more\"\n  onDismiss={() => {}}\n/>\n```",
+      "props": [
+        {
+          "name": "type",
+          "description": "",
+          "options": [
+            "info-neutral",
+            "info-branded",
+            "success",
+            "warning",
+            "error"
+          ]
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "<TopBanner type=\"info-neutral\" title=\"Information title\" message=\"This is an informational message.\" actionLink={true} linkText=\"Action link\" />"
+        },
+        {
+          "name": "InfoBranded",
+          "jsx": "<TopBanner type=\"info-branded\" title=\"Information title\" message=\"This is an informational message.\" actionLink={true} linkText=\"Action link\" />"
+        },
+        {
+          "name": "Success",
+          "jsx": "<TopBanner type=\"success\" title=\"Information title\" message=\"This is an informational message.\" actionLink={true} />"
+        }
+      ]
+    },
+    {
+      "name": "SelectionControl",
+      "description": "**SelectionControl** is a controlled button for selectable options. Content is fully\nagnostic — pass anything as `children`. Consumer manages `state` and `onClick`.\n\nIt is designed to cover two usage patterns:\n- **Form-value collection** — consumer holds the selected value in state and sends it to an API (e.g. attendance, mood rating, student pills).\n- **Action / navigation** — click triggers rendering new content or navigating (e.g. tab-like cards). Keep `state=\"default\"` if no persistent pressed state is needed; the component simply acts as a styled button.\n\nDefault padding is `8px`. Override via `style` to match the context:\n- `14px 16px` — emoji\n- `8px 16px` — label-only row\n- `10px 16px` — row with avatar\n- `24px` — large attendance card\n\n### Accessibility\n\n- Root element is `<button type=\"button\">`.\n- `aria-pressed` is `true` when `state` is `\"selected\"` or `\"done\"`, `false` when `\"default\"`.\n- For grouped single-select usage, wrap controls in a `<div role=\"group\" aria-label=\"...\">` so screen readers announce the group boundary.",
+      "props": [
+        {
+          "name": "state",
+          "description": "",
+          "options": [
+            "default",
+            "selected",
+            "done",
+            "done-selected"
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "error",
+          "description": "",
+          "options": []
+        },
+        {
+          "name": "children",
+          "description": "",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "AllStates",
+          "jsx": "// See \"AllStates\" story — uses interactive render wrapper"
+        },
+        {
+          "name": "SingleSelectGroup",
+          "jsx": "// See \"SingleSelectGroup\" story — uses interactive render wrapper"
+        },
+        {
+          "name": "LessonFeedbackExample",
+          "jsx": "// See \"LessonFeedbackExample\" story — uses interactive render wrapper"
+        }
+      ]
+    },
+    {
+      "name": "Skeleton",
+      "description": "Generic loading placeholder with a pulsing animation. Use it to build per-component skeleton screens.\n\n### Usage\n\n```tsx\nimport { Skeleton } from '@gostudent/shared-ui-library';\n\n<Skeleton width=\"60%\" height={20} />\n```",
+      "props": [
+        {
+          "name": "width",
+          "description": "CSS width value or number (px).",
+          "options": [
+            "sm",
+            "md",
+            "lg",
+            "full"
+          ]
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "<Skeleton width=\"100%\" height={20} />"
+        },
+        {
+          "name": "Circle",
+          "jsx": "<Skeleton width={40} height={40} radius=\"full\" />"
+        }
+      ]
+    },
+    {
+      "name": "Stepper",
+      "description": "A progress indicator for multi-step flows. Shows the user where they are in a sequence, how many steps remain, and — optionally — a keyboard hint to advance.\n\nThe component is display-only and full-width; its parent controls horizontal constraints. Progress fill animates smoothly as `currentStep` changes.\n\n### Usage\n\n```tsx\nimport { Stepper } from '@gostudent/shared-ui-library';\n\n<Stepper currentStep={2} totalSteps={4} />\n```\n\n### Accessibility\n\nThe progress bar track has `role=\"progressbar\"` with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` wired to the step props.\n\n### Notes\n\n- Always pass `totalSteps` as a dynamic prop — never hardcode the total.\n- Omit `enterHint` on mobile or touch-only flows where Enter is not meaningful.\n- On the final step the bar fills to exactly 100%.",
+      "props": [
+        {
+          "name": "currentStep",
+          "description": "Current step (1-based). Drives both the step label and the bar fill width.",
+          "options": []
+        },
+        {
+          "name": "totalSteps",
+          "description": "Total number of steps. Pass from a prop or config — never hardcode.",
+          "options": []
+        },
+        {
+          "name": "stepLabel",
+          "description": "Translated step label shown on the left (e.g. t(\\'stepper.label\\",
+          "options": []
+        },
+        {
+          "name": "enterHint",
+          "description": "Translated hint text shown on the right (e.g. \"Press Enter to continue\"). Omit to hide the hint. The ↵ symbol is always appended automatically.",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "<Stepper currentStep={1} totalSteps={4} stepLabel=\"Step 1 of 4\" enterHint=\"Press Enter to continue\" />"
+        },
+        {
+          "name": "Midpoint",
+          "jsx": "<Stepper currentStep={2} totalSteps={4} stepLabel=\"Step 2 of 4\" enterHint=\"Press Enter to continue\" />"
+        },
+        {
+          "name": "AlmostDone",
+          "jsx": "<Stepper currentStep={3} totalSteps={4} stepLabel=\"Step 3 of 4\" enterHint=\"Press Enter to continue\" />"
+        }
+      ]
+    },
+    {
+      "name": "Tabs",
+      "description": "Compound tab component. Use `Tabs` as the root, `TabList` + `Tab` for the navigation bar,\nand `TabPanel` for the content areas. Tabs and panels are connected automatically via `value`.\n\n**Keyboard navigation:** Arrow Left/Right moves between tabs; Home/End jump to first/last.\n\n### Usage\n\n```tsx\nimport { Tabs, Tab, TabList, TabPanel } from '@gostudent/shared-ui-library';\n\n<Tabs defaultValue=\"lessons\">\n  <TabList>\n    <Tab value=\"lessons\">Lessons</Tab>\n    <Tab value=\"students\">Students</Tab>\n  </TabList>\n  <TabPanel value=\"lessons\">Lessons content</TabPanel>\n  <TabPanel value=\"students\">Students content</TabPanel>\n</Tabs>\n```\n\n**Standalone mode** (without `Tabs` wrapper — for custom state management):\n```tsx\n<TabList>\n  <Tab isSelected={active === 0} onClick={() => setActive(0)}>Lessons</Tab>\n  <Tab isSelected={active === 1} onClick={() => setActive(1)}>Students</Tab>\n</TabList>\n```",
+      "props": [
+        {
+          "name": "defaultValue",
+          "description": "Default selected tab value (uncontrolled).",
+          "options": []
+        },
+        {
+          "name": "value",
+          "description": "Controlled selected tab value.",
+          "options": []
+        },
+        {
+          "name": "onChange",
+          "description": "Called with the new value whenever the active tab changes.",
+          "options": []
+        },
+        {
+          "name": "className",
+          "description": "Optional extra class name on the root element.",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "<Tabs defaultValue=\"lessons\" />"
+        },
+        {
+          "name": "FullWidthMobile",
+          "jsx": "<Tabs defaultValue=\"lessons\" />"
+        },
+        {
+          "name": "FullWidth",
+          "jsx": "<Tabs defaultValue=\"lessons\" />"
+        }
+      ]
+    },
+    {
+      "name": "Tag",
+      "description": "The **Tag** component is an agnostic label primitive. It comes in five semantic tones, two shapes (rounded / pill), three sizes, optional leading/trailing icons, and an optional action button.\n\n### Usage\n\n```tsx\nimport { Tag } from '@gostudent/shared-ui-library';\n\n<Tag tone=\"neutral\">Mathematics</Tag>\n<Tag tone=\"success\" bordered>Online</Tag>\n<Tag shape=\"pill\" tone=\"info\">Scheduled</Tag>\n<Tag trailingIcon={<CloseIcon size=\"sm\" />} onAction={() => remove()} actionLabel=\"Remove tag\">Math</Tag>\n```\n\n> **Domain variants** (student/tutor/parent roles, online/offline lesson status) live in the compositions layer:\n> `RoleTag` and `LessonStatusTag`.",
+      "props": [
+        {
+          "name": "tone",
+          "description": "Semantic tone — controls background, text and (when `bordered`) border colour.",
+          "options": [
+            "neutral",
+            "success",
+            "info",
+            "warning",
+            "danger"
+          ]
+        },
+        {
+          "name": "shape",
+          "description": "`pill",
+          "options": [
+            "rounded",
+            "pill"
+          ]
+        },
+        {
+          "name": "size",
+          "description": "Size scale. Accepts a single size or a `[mobile, desktop]",
+          "options": [
+            "sm",
+            "md"
+          ]
+        },
+        {
+          "name": "bordered",
+          "description": "Adds a 1px border using the tone\\'s border colour.",
+          "options": []
+        },
+        {
+          "name": "children",
+          "description": "Tag label text.",
+          "options": []
+        },
+        {
+          "name": "actionLabel",
+          "description": "Required when `onAction",
+          "options": []
+        },
+        {
+          "name": "className",
+          "description": "Optional extra CSS class for layout overrides.",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "<Tag tone=\"neutral\" size=\"md\" children=\"Mathematics\" />"
+        },
+        {
+          "name": "Medium",
+          "jsx": "<Tag size=\"md\" children=\"Mathematics\" />"
+        },
+        {
+          "name": "Small",
+          "jsx": "<Tag size=\"sm\" children=\"Mathematics\" />"
+        }
+      ]
+    },
+    {
+      "name": "Tooltip",
+      "description": "The **Tooltip** component wraps any trigger element and shows a floating label on hover or focus.\n\n### Usage\n\n```tsx\nimport { Tooltip } from '@gostudent/shared-ui-library';\n\n<Tooltip text=\"Lesson is in progress\" placement=\"top\">\n  <svg .../>\n</Tooltip>\n```\n\nSupports an optional `title` (bold) above the body text, matching the Figma spec.",
+      "props": [
+        {
+          "name": "placement",
+          "description": "",
+          "options": [
+            "top",
+            "bottom",
+            "left",
+            "right"
+          ]
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "<Tooltip text=\"I'm such a nice tooltip!\" placement=\"bottom\" />"
+        },
+        {
+          "name": "WithTitle",
+          "jsx": "<Tooltip title=\"Title\" text=\"I'm such a nice tooltip!\" placement=\"bottom\" />"
+        }
+      ]
+    },
+    {
+      "name": "Typography",
+      "description": "The **Typography** component renders styled text with built-in responsive behaviour.\nIt selects a sensible default HTML element for each variant and can be overridden with the `as` prop.\n\n### Usage\n\n```tsx\nimport { Typography } from '@gostudent/shared-ui-library';\n\n<Typography variant=\"heading-h1\">Hello world</Typography>\n<Typography variant=\"body-md\" as=\"span\">Inline text</Typography>\n```",
+      "props": [
+        {
+          "name": "variant",
+          "description": "Typography style variant.",
+          "options": [
+            "heading-h1",
+            "heading-h2",
+            "heading-h3",
+            "heading-h4",
+            "heading-h5",
+            "heading-h6",
+            "subtitle-md",
+            "subtitle-sm",
+            "body-md",
+            "body-sm",
+            "label",
+            "tooltip"
+          ]
+        },
+        {
+          "name": "as",
+          "description": "Override the rendered HTML element (e.g. `span",
+          "options": []
+        },
+        {
+          "name": "children",
+          "description": "Text content.",
+          "options": []
+        }
+      ],
+      "examples": [
+        {
+          "name": "Default",
+          "jsx": "<Typography variant=\"body-md\" children=\"The quick brown fox jumps over the lazy dog.\" />"
+        }
+      ]
+    }
+  ],
+  "icons": {
+    "names": [
+      "ArrowLeftIcon",
+      "ArrowRightIcon",
+      "CancelFilledIcon",
+      "ChevronDownIcon",
+      "ChevronLeftIcon",
+      "ChevronRightIcon",
+      "ClockIcon",
+      "CloseIcon",
+      "DashboardIcon",
+      "DeleteIcon",
+      "EditSquareIcon",
+      "ErrorFilledIcon",
+      "EventNoteIcon",
+      "GlobeIcon",
+      "GroupIcon",
+      "HistoryIcon",
+      "HourglassIcon",
+      "InfoFilledIcon",
+      "InfoIcon",
+      "KebabIcon",
+      "LocationCenterIcon",
+      "LogoutIcon",
+      "MenuIcon",
+      "OfflineIcon",
+      "PlanetIcon",
+      "PlusIcon",
+      "StarsIcon",
+      "TickFilledIcon",
+      "TickIcon",
+      "UploadIcon",
+      "WarningFilledIcon"
+    ],
+    "sizes": [
+      "sm",
+      "md",
+      "lg",
+      "xl",
+      "xxl",
+      "3xl"
+    ],
+    "pixelMap": {
+      "sm": 16,
+      "md": 20,
+      "lg": 24,
+      "xl": 32,
+      "xxl": 40
+    }
+  },
+  "tokens": {
+    "base": {
+      "breakpoint": {
+        "breakpointDesktopScreenWidth": "var(--breakpoint-desktop-screen-width)",
+        "breakpointTabletScreenWidth": "var(--breakpoint-tablet-screen-width)",
+        "breakpointMobileScreenWidth": "var(--breakpoint-mobile-screen-width)",
+        "breakpointLayoutContentMaxWidth": "var(--breakpoint-layout-content-max-width)"
+      },
+      "error": {
+        "error50": "var(--error-50)",
+        "error500": "var(--error-500)",
+        "error700": "var(--error-700)"
+      },
+      "success": {
+        "success50": "var(--success-50)",
+        "success500": "var(--success-500)",
+        "success700": "var(--success-700)"
+      },
+      "warning": {
+        "warning50": "var(--warning-50)",
+        "warning500": "var(--warning-500)",
+        "warning700": "var(--warning-700)"
+      },
+      "color": {
+        "colorBlack": "var(--color-black)",
+        "colorWhite": "var(--color-white)",
+        "colorTransparent": "var(--color-transparent)"
+      },
+      "steel": {
+        "steel50": "var(--steel-50)",
+        "steel100": "var(--steel-100)",
+        "steel200": "var(--steel-200)",
+        "steel300": "var(--steel-300)",
+        "steel400": "var(--steel-400)",
+        "steel500": "var(--steel-500)",
+        "steel600": "var(--steel-600)",
+        "steel700": "var(--steel-700)",
+        "steel800": "var(--steel-800)",
+        "steel900": "var(--steel-900)"
+      },
+      "grey": {
+        "grey50": "var(--grey-50)",
+        "grey100": "var(--grey-100)",
+        "grey200": "var(--grey-200)",
+        "grey300": "var(--grey-300)",
+        "grey400": "var(--grey-400)",
+        "grey500": "var(--grey-500)",
+        "grey600": "var(--grey-600)",
+        "grey700": "var(--grey-700)",
+        "grey800": "var(--grey-800)",
+        "grey900": "var(--grey-900)"
+      },
+      "in": {
+        "inProgressLight": "var(--in-progress-light)",
+        "inProgressDark": "var(--in-progress-dark)"
+      },
+      "spacing": {
+        "spacingXxs": "var(--spacing-xxs)",
+        "spacing3xl": "var(--spacing-3xl)",
+        "spacing2xl": "var(--spacing-2xl)",
+        "spacingXl": "var(--spacing-xl)",
+        "spacingLg": "var(--spacing-lg)",
+        "spacingXs": "var(--spacing-xs)",
+        "spacingMd": "var(--spacing-md)",
+        "spacingSm": "var(--spacing-sm)",
+        "spacing3xs": "var(--spacing-3xs)"
+      },
+      "radius": {
+        "radiusXs": "var(--radius-xs)",
+        "radiusSm": "var(--radius-sm)",
+        "radiusMd": "var(--radius-md)",
+        "radiusLg": "var(--radius-lg)",
+        "radiusXl": "var(--radius-xl)",
+        "radiusFull": "var(--radius-full)"
+      },
+      "border": {
+        "borderSm": "var(--border-sm)",
+        "borderMd": "var(--border-md)",
+        "borderLg": "var(--border-lg)",
+        "borderXs": "var(--border-xs)"
+      },
+      "font": {
+        "fontFamilyWorksans": "var(--font-family-worksans)",
+        "fontWeightRegular": "var(--font-weight-regular)",
+        "fontWeightMedium": "var(--font-weight-medium)",
+        "fontWeightSemiBold": "var(--font-weight-semi-bold)",
+        "fontWeightBold": "var(--font-weight-bold)",
+        "fontWeightExtraBold": "var(--font-weight-extra-bold)",
+        "fontSizeXxs": "var(--font-size-xxs)",
+        "fontSizeXs": "var(--font-size-xs)",
+        "fontSizeMd": "var(--font-size-md)",
+        "fontSizeLg": "var(--font-size-lg)",
+        "fontSizeXl": "var(--font-size-xl)",
+        "fontSize2xl": "var(--font-size-2xl)",
+        "fontSize3xl": "var(--font-size-3xl)",
+        "fontSize4xl": "var(--font-size-4xl)",
+        "fontSizeSm": "var(--font-size-sm)",
+        "fontLineHeightXxs": "var(--font-line-height-xxs)",
+        "fontLineHeightXs": "var(--font-line-height-xs)",
+        "fontLineHeightMd": "var(--font-line-height-md)",
+        "fontLineHeightLg": "var(--font-line-height-lg)",
+        "fontLineHeightXl": "var(--font-line-height-xl)",
+        "fontLineHeight2xl": "var(--font-line-height-2xl)",
+        "fontLineHeight3xl": "var(--font-line-height-3xl)",
+        "fontLineHeight4xl": "var(--font-line-height-4xl)",
+        "fontLineHeightSm": "var(--font-line-height-sm)"
+      },
+      "avatar": {
+        "avatarSm": "var(--avatar-sm)",
+        "avatarMd": "var(--avatar-md)",
+        "avatarLg": "var(--avatar-lg)",
+        "avatarXs": "var(--avatar-xs)"
+      },
+      "icon": {
+        "iconButtonSm": "var(--icon-button-sm)",
+        "iconButtonMd": "var(--icon-button-md)",
+        "iconButtonLg": "var(--icon-button-lg)",
+        "iconSm": "var(--icon-sm)",
+        "iconMd": "var(--icon-md)",
+        "iconLg": "var(--icon-lg)",
+        "iconXl": "var(--icon-xl)",
+        "iconXxl": "var(--icon-xxl)"
+      }
+    },
+    "gs": {
+      "blue": {
+        "blue50": "var(--blue-50)",
+        "blue100": "var(--blue-100)",
+        "blue200": "var(--blue-200)",
+        "blue300": "var(--blue-300)",
+        "blue400": "var(--blue-400)",
+        "blue500": "var(--blue-500)",
+        "blue600": "var(--blue-600)",
+        "blue700": "var(--blue-700)",
+        "blue800": "var(--blue-800)",
+        "blue900": "var(--blue-900)"
+      },
+      "purple": {
+        "purple50": "var(--purple-50)",
+        "purple100": "var(--purple-100)",
+        "purple200": "var(--purple-200)",
+        "purple300": "var(--purple-300)",
+        "purple400": "var(--purple-400)",
+        "purple500": "var(--purple-500)",
+        "purple600": "var(--purple-600)",
+        "purple700": "var(--purple-700)",
+        "purple800": "var(--purple-800)",
+        "purple900": "var(--purple-900)"
+      },
+      "orange": {
+        "orange50": "var(--orange-50)",
+        "orange100": "var(--orange-100)",
+        "orange200": "var(--orange-200)",
+        "orange300": "var(--orange-300)",
+        "orange400": "var(--orange-400)",
+        "orange500": "var(--orange-500)",
+        "orange600": "var(--orange-600)",
+        "orange700": "var(--orange-700)",
+        "orange800": "var(--orange-800)",
+        "orange900": "var(--orange-900)"
+      },
+      "green": {
+        "green50": "var(--green-50)",
+        "green100": "var(--green-100)",
+        "green200": "var(--green-200)",
+        "green300": "var(--green-300)",
+        "green400": "var(--green-400)",
+        "green500": "var(--green-500)",
+        "green600": "var(--green-600)",
+        "green700": "var(--green-700)",
+        "green800": "var(--green-800)",
+        "green900": "var(--green-900)"
+      },
+      "yellow": {
+        "yellow50": "var(--yellow-50)",
+        "yellow100": "var(--yellow-100)",
+        "yellow200": "var(--yellow-200)",
+        "yellow300": "var(--yellow-300)",
+        "yellow400": "var(--yellow-400)",
+        "yellow500": "var(--yellow-500)",
+        "yellow600": "var(--yellow-600)",
+        "yellow700": "var(--yellow-700)",
+        "yellow800": "var(--yellow-800)",
+        "yellow900": "var(--yellow-900)"
+      },
+      "pink": {
+        "pink50": "var(--pink-50)",
+        "pink100": "var(--pink-100)",
+        "pink200": "var(--pink-200)",
+        "pink300": "var(--pink-300)",
+        "pink400": "var(--pink-400)",
+        "pink500": "var(--pink-500)",
+        "pink600": "var(--pink-600)",
+        "pink700": "var(--pink-700)",
+        "pink800": "var(--pink-800)",
+        "pink900": "var(--pink-900)"
+      }
+    },
+    "sk": {
+      "blue": {
+        "blue50": "var(--blue-50)",
+        "blue100": "var(--blue-100)",
+        "blue200": "var(--blue-200)",
+        "blue300": "var(--blue-300)",
+        "blue400": "var(--blue-400)",
+        "blue500": "var(--blue-500)",
+        "blue600": "var(--blue-600)",
+        "blue700": "var(--blue-700)",
+        "blue800": "var(--blue-800)",
+        "blue900": "var(--blue-900)"
+      },
+      "red": {
+        "red50": "var(--red-50)",
+        "red100": "var(--red-100)",
+        "red200": "var(--red-200)",
+        "red300": "var(--red-300)",
+        "red400": "var(--red-400)",
+        "red500": "var(--red-500)",
+        "red600": "var(--red-600)",
+        "red700": "var(--red-700)",
+        "red800": "var(--red-800)",
+        "red900": "var(--red-900)"
+      },
+      "orange": {
+        "orange50": "var(--orange-50)",
+        "orange100": "var(--orange-100)",
+        "orange200": "var(--orange-200)",
+        "orange300": "var(--orange-300)",
+        "orange400": "var(--orange-400)",
+        "orange500": "var(--orange-500)",
+        "orange600": "var(--orange-600)",
+        "orange700": "var(--orange-700)",
+        "orange800": "var(--orange-800)",
+        "orange900": "var(--orange-900)"
+      },
+      "green": {
+        "green50": "var(--green-50)",
+        "green100": "var(--green-100)",
+        "green200": "var(--green-200)",
+        "green300": "var(--green-300)",
+        "green400": "var(--green-400)",
+        "green500": "var(--green-500)",
+        "green600": "var(--green-600)",
+        "green700": "var(--green-700)",
+        "green800": "var(--green-800)",
+        "green900": "var(--green-900)"
+      },
+      "yellow": {
+        "yellow50": "var(--yellow-50)",
+        "yellow100": "var(--yellow-100)",
+        "yellow200": "var(--yellow-200)",
+        "yellow300": "var(--yellow-300)",
+        "yellow400": "var(--yellow-400)",
+        "yellow500": "var(--yellow-500)",
+        "yellow600": "var(--yellow-600)",
+        "yellow700": "var(--yellow-700)",
+        "yellow800": "var(--yellow-800)",
+        "yellow900": "var(--yellow-900)"
+      },
+      "pink": {
+        "pinkPurple50": "var(--pink-purple-50)",
+        "pinkPurple100": "var(--pink-purple-100)",
+        "pinkPurple200": "var(--pink-purple-200)",
+        "pinkPurple300": "var(--pink-purple-300)",
+        "pinkPurple400": "var(--pink-purple-400)",
+        "pinkPurple500": "var(--pink-purple-500)",
+        "pinkPurple600": "var(--pink-purple-600)",
+        "pinkPurple700": "var(--pink-purple-700)",
+        "pinkPurple800": "var(--pink-purple-800)",
+        "pinkPurple900": "var(--pink-purple-900)"
+      },
+      "light": {
+        "lightBlue50": "var(--light-blue-50)",
+        "lightBlue100": "var(--light-blue-100)",
+        "lightBlue200": "var(--light-blue-200)",
+        "lightBlue300": "var(--light-blue-300)",
+        "lightBlue400": "var(--light-blue-400)",
+        "lightBlue500": "var(--light-blue-500)",
+        "lightBlue600": "var(--light-blue-600)",
+        "lightBlue700": "var(--light-blue-700)",
+        "lightBlue800": "var(--light-blue-800)",
+        "lightBlue900": "var(--light-blue-900)"
+      }
+    }
+  }
+}