@discourser/design-system 0.15.1 → 0.17.0

package/dist/preset/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/preset/index.ts"],"names":[],"mappings":"AA2DA,eAAO,MAAM,qBAAqB,gCA+IhC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/preset/index.ts"],"names":[],"mappings":"AA8DA,eAAO,MAAM,qBAAqB,gCAkJhC,CAAC"}

package/dist/preset/index.js

@@ -1,4 +1,4 @@
-export { discourserPandaPreset } from '../chunk-SBKRSXSZ.js';
+export { discourserPandaPreset } from '../chunk-SNUJBT5R.js';
 import '../chunk-WR5Z5QMQ.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/preset/recipes/accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/preset/recipes/accordion.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,0CAwFpB,CAAA"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/preset/recipes/accordion.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,0CA2FpB,CAAA"}

package/dist/preset/recipes/breadcrumb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/preset/recipes/breadcrumb.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,0CA0ErB,CAAA"}
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/preset/recipes/breadcrumb.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,0CA0GrB,CAAC"}

package/dist/preset/recipes/content-card.d.ts

@@ -0,0 +1,2 @@
+export declare const contentCard: import("@pandacss/dev").SlotRecipeConfig;
+//# sourceMappingURL=content-card.d.ts.map

package/dist/preset/recipes/content-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-card.d.ts","sourceRoot":"","sources":["../../../src/preset/recipes/content-card.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,0CAyHtB,CAAC"}

package/dist/preset/recipes/index.d.ts

@@ -8,6 +8,7 @@ export * from './accordion';
 export * from './drawer';
 export * from './tabs';
 export * from './breadcrumb';
+export * from './navigation-menu';
 export * from './switch';
 export * from './checkbox';
 export * from './radio-group';
@@ -26,6 +27,9 @@ export * from './tooltip';
 export * from './heading';
 export * from './absolute-center';
 export * from './group';
+export * from './stepper';
+export * from './content-card';
 export * from './scenario-card';
 export * from './scenario-queue';
+export * from './scenario-settings';
 //# sourceMappingURL=index.d.ts.map

package/dist/preset/recipes/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/preset/recipes/index.ts"],"names":[],"mappings":"AACA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AAGxB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AAGvB,cAAc,cAAc,CAAC;AAG7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AAGzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AAGxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAG1B,cAAc,WAAW,CAAC;AAG1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AAGxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/preset/recipes/index.ts"],"names":[],"mappings":"AACA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AAGxB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AAGvB,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAGlC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AAGzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AAGxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAG1B,cAAc,WAAW,CAAC;AAG1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AAGxB,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC"}

package/dist/preset/recipes/navigation-menu.d.ts

@@ -0,0 +1,2 @@
+export declare const navigationMenu: import("@pandacss/dev").SlotRecipeConfig;
+//# sourceMappingURL=navigation-menu.d.ts.map

package/dist/preset/recipes/navigation-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu.d.ts","sourceRoot":"","sources":["../../../src/preset/recipes/navigation-menu.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,0CA8FzB,CAAC"}

package/dist/preset/recipes/scenario-settings.d.ts

@@ -0,0 +1,2 @@
+export declare const scenarioSettings: import("@pandacss/dev").SlotRecipeConfig;
+//# sourceMappingURL=scenario-settings.d.ts.map

package/dist/preset/recipes/scenario-settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scenario-settings.d.ts","sourceRoot":"","sources":["../../../src/preset/recipes/scenario-settings.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,0CAmL3B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@discourser/design-system",
-  "version": "0.15.1",
+  "version": "0.17.0",
   "description": "Aesthetic-agnostic design system with Panda CSS and Ark UI",
   "type": "module",
   "publishConfig": {
@@ -150,13 +150,29 @@
       "types": "./src/components/Stepper/index.ts",
       "import": "./src/components/Stepper/index.ts"
     },
+    "./NavigationMenu": {
+      "types": "./src/components/NavigationMenu/index.ts",
+      "import": "./src/components/NavigationMenu/index.ts"
+    },
     "./ScenarioQueue": {
       "types": "./src/components/ScenarioQueue/index.ts",
       "import": "./src/components/ScenarioQueue/index.ts"
     },
+    "./ScenarioSettings": {
+      "types": "./src/components/ScenarioSettings/index.ts",
+      "import": "./src/components/ScenarioSettings/index.ts"
+    },
     "./Breadcrumb": {
       "types": "./src/components/Breadcrumb.tsx",
       "import": "./src/components/Breadcrumb.tsx"
+    },
+    "./ContentCard": {
+      "types": "./src/components/ContentCard/index.ts",
+      "import": "./src/components/ContentCard/index.ts"
+    },
+    "./figma-codex": {
+      "import": "./dist/figma-codex.json",
+      "require": "./dist/figma-codex.json"
     }
   },
   "files": [
@@ -165,7 +181,7 @@
   ],
   "scripts": {
     "dev": "pnpm docs:generate && storybook dev -p 6006",
-    "build": "pnpm build:panda && pnpm typecheck && pnpm build:lib && pnpm build:types",
+    "build": "pnpm build:panda && pnpm typecheck && pnpm build:lib && pnpm build:types && pnpm codex:generate",
     "build:panda": "panda codegen",
     "build:css": "panda cssgen --outfile dist/styles.css",
     "build:lib": "tsup",
@@ -190,6 +206,10 @@
     "verify:lint": "pnpm lint",
     "verify:test": "pnpm test run",
     "verify:build": "pnpm build",
+    "codex:generate": "tsx src/figma-codex/generate.ts",
+    "codex:watch": "tsx --watch src/figma-codex/generate.ts",
+    "figma:connect": "figma connect publish",
+    "figma:connect:dry": "figma connect publish --dry-run",
     "changeset": "changeset",
     "version": "changeset version",
     "ci:version": "pnpm exec changeset version",
@@ -209,6 +229,7 @@
     "@changesets/changelog-github": "^0.5.2",
     "@changesets/cli": "^2.29.8",
     "@eslint/js": "^9.39.2",
+    "@figma/code-connect": "^1.4.1",
     "@material/material-color-utilities": "^0.3.0",
     "@pandacss/dev": "^1.8.1",
     "@storybook/addon-a11y": "^10.2.8",
@@ -267,6 +288,9 @@
     ],
     "*.{json,md}": [
       "prettier --write"
+    ],
+    "*.figma.tsx": [
+      "tsx src/figma-codex/generate.ts"
     ]
   }
 }

package/src/components/Accordion.figma.tsx

@@ -0,0 +1,20 @@
+import figma from '@figma/code-connect';
+import * as Accordion from './Accordion';
+
+figma.connect(
+  Accordion.Root,
+  'https://www.figma.com/design/GaHmFfmvO4loUzuZS4TgEz/Discourser.AI--V1?node-id=38-8232',
+  {
+    example: () => (
+      <Accordion.Root collapsible>
+        <Accordion.Item value="item-1">
+          <Accordion.ItemTrigger>
+            <span>Trigger</span>
+            <Accordion.ItemIndicator />
+          </Accordion.ItemTrigger>
+          <Accordion.ItemContent>Content</Accordion.ItemContent>
+        </Accordion.Item>
+      </Accordion.Root>
+    ),
+  },
+);

package/src/components/Breadcrumb.figma.tsx

@@ -0,0 +1,18 @@
+import figma from '@figma/code-connect'
+import * as Breadcrumb from './Breadcrumb'
+
+figma.connect(Breadcrumb.Root, 'https://www.figma.com/design/GaHmFfmvO4loUzuZS4TgEz/Discourser.AI--V1?node-id=38-7978', {
+  example: () => (
+    <Breadcrumb.Root>
+      <Breadcrumb.List>
+        <Breadcrumb.Item>
+          <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
+        </Breadcrumb.Item>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Item>
+          <Breadcrumb.CurrentLink>Current</Breadcrumb.CurrentLink>
+        </Breadcrumb.Item>
+      </Breadcrumb.List>
+    </Breadcrumb.Root>
+  ),
+})

package/src/components/Breadcrumb.tsx

@@ -1,34 +1,52 @@
-'use client'
-import { ark } from '@ark-ui/react/factory'
-import type { ComponentProps } from 'react'
-import { createStyleContext } from 'styled-system/jsx'
-import { breadcrumb } from 'styled-system/recipes'
+'use client';
+import { ark } from '@ark-ui/react/factory';
+import type { ComponentProps } from 'react';
+import { createStyleContext } from 'styled-system/jsx';
+import { breadcrumb } from 'styled-system/recipes';
 
 const ChevronRightIcon = () => (
-  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
     <path d="m9 18 6-6-6-6"></path>
   </svg>
-)
+);
 
-const { withProvider, withContext } = createStyleContext(breadcrumb)
+const { withProvider, withContext } = createStyleContext(breadcrumb);
 
-export type RootProps = ComponentProps<typeof Root>
+export type RootProps = ComponentProps<typeof Root>;
 
-export const Root = withProvider(ark.nav, 'root', { defaultProps: { 'aria-label': 'breadcrumb' } })
-export const List = withContext(ark.ol, 'list')
-export const Item = withContext(ark.li, 'item')
-export const Link = withContext(ark.a, 'link')
+export const Root = withProvider(ark.nav, 'root', {
+  defaultProps: { 'aria-label': 'breadcrumb' },
+});
+export const List = withContext(ark.ol, 'list');
+export const Item = withContext(ark.li, 'item');
+export const Link = withContext(ark.a, 'link');
 export const Ellipsis = withContext(ark.li, 'ellipsis', {
   defaultProps: {
     role: 'presentation',
     'aria-hidden': true,
     children: '...',
   },
-})
+});
 
 export const Separator = withContext(ark.li, 'separator', {
   defaultProps: {
     'aria-hidden': true,
     children: <ChevronRightIcon />,
   },
-})
+});
+
+/** The current/active page crumb — renders as a span (not a link) with aria-current="page" */
+export const CurrentLink = withContext(ark.span, 'link', {
+  defaultProps: {
+    'aria-current': 'page',
+  },
+});

package/src/components/ContentCard/ContentCard.figma.tsx

@@ -0,0 +1,21 @@
+import figma from '@figma/code-connect'
+import * as ContentCard from './index'
+
+figma.connect(ContentCard.Root, 'https://www.figma.com/design/GaHmFfmvO4loUzuZS4TgEz/Discourser.AI--V1?node-id=478-5957', {
+  example: () => (
+    <ContentCard.Root>
+      <ContentCard.Header>
+        <ContentCard.Title>Title</ContentCard.Title>
+        <ContentCard.BadgeBar>badges</ContentCard.BadgeBar>
+      </ContentCard.Header>
+      <ContentCard.Body>Content</ContentCard.Body>
+      <ContentCard.Separator />
+      <ContentCard.Section>
+        <ContentCard.SectionTitle>Section</ContentCard.SectionTitle>
+        <ContentCard.List>
+          <ContentCard.ListItem>Item</ContentCard.ListItem>
+        </ContentCard.List>
+      </ContentCard.Section>
+    </ContentCard.Root>
+  ),
+})

package/src/components/ContentCard/ContentCard.test.tsx

@@ -0,0 +1,197 @@
+/* global describe, it, expect */
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import * as ContentCard from './ContentCard'
+import { Badge } from '../Badge'
+
+function renderDefault() {
+  return render(
+    <ContentCard.Root>
+      <ContentCard.Header>
+        <ContentCard.Title>UX Research &amp; Design Interview</ContentCard.Title>
+        <ContentCard.BadgeBar>
+          <Badge colorPalette="primary" variant="subtle">Beginner</Badge>
+          <Badge colorPalette="neutral" variant="subtle">Professional</Badge>
+        </ContentCard.BadgeBar>
+      </ContentCard.Header>
+      <ContentCard.Body>
+        <p>Practice explaining your UX research process.</p>
+      </ContentCard.Body>
+      <ContentCard.Separator />
+      <ContentCard.Section>
+        <ContentCard.SectionTitle>Sample Questions:</ContentCard.SectionTitle>
+        <ContentCard.List>
+          <ContentCard.ListItem>Walk me through your research methodology.</ContentCard.ListItem>
+          <ContentCard.ListItem>Describe a challenging project you worked on.</ContentCard.ListItem>
+        </ContentCard.List>
+      </ContentCard.Section>
+      <ContentCard.Section>
+        <ContentCard.SectionTitle>Topics Covered:</ContentCard.SectionTitle>
+      </ContentCard.Section>
+    </ContentCard.Root>,
+  )
+}
+
+describe('ContentCard', () => {
+  describe('Rendering', () => {
+    it('renders root container', () => {
+      const { container } = renderDefault()
+      expect(container.firstChild).toBeDefined()
+    })
+
+    it('renders title as h2 element', () => {
+      renderDefault()
+      const title = screen.getByRole('heading', { level: 2 })
+      expect(title.textContent).toBe('UX Research & Design Interview')
+    })
+
+    it('renders badge bar with children', () => {
+      renderDefault()
+      expect(screen.getByText('Beginner')).toBeDefined()
+      expect(screen.getByText('Professional')).toBeDefined()
+    })
+
+    it('renders body content', () => {
+      renderDefault()
+      expect(screen.getByText('Practice explaining your UX research process.')).toBeDefined()
+    })
+
+    it('renders sections with section titles as h3', () => {
+      renderDefault()
+      const sectionTitles = screen.getAllByRole('heading', { level: 3 })
+      expect(sectionTitles.length).toBe(2)
+      expect(sectionTitles[0].textContent).toBe('Sample Questions:')
+      expect(sectionTitles[1].textContent).toBe('Topics Covered:')
+    })
+
+    it('renders separator as hr element', () => {
+      const { container } = renderDefault()
+      expect(container.querySelector('hr')).toBeDefined()
+    })
+
+    it('renders list with list items', () => {
+      renderDefault()
+      const items = screen.getAllByRole('listitem')
+      expect(items.length).toBeGreaterThanOrEqual(2)
+      expect(screen.getByText('Walk me through your research methodology.')).toBeDefined()
+    })
+  })
+
+  describe('Variants', () => {
+    it('applies outline variant by default', () => {
+      const { container } = renderDefault()
+      const root = container.firstChild as HTMLElement
+      expect(root.className).toContain('content-card')
+    })
+
+    it('applies elevated variant when specified', () => {
+      const { container } = render(
+        <ContentCard.Root variant="elevated">
+          <ContentCard.Title>Elevated</ContentCard.Title>
+        </ContentCard.Root>,
+      )
+      expect(container.firstChild).toBeDefined()
+    })
+
+    it('applies flat variant when specified', () => {
+      const { container } = render(
+        <ContentCard.Root variant="flat">
+          <ContentCard.Title>Flat</ContentCard.Title>
+        </ContentCard.Root>,
+      )
+      expect(container.firstChild).toBeDefined()
+    })
+
+    it('applies size md by default', () => {
+      const { container } = renderDefault()
+      expect(container.firstChild).toBeDefined()
+    })
+
+    it('applies size sm when specified', () => {
+      const { container } = render(
+        <ContentCard.Root size="sm">
+          <ContentCard.Title>Small</ContentCard.Title>
+        </ContentCard.Root>,
+      )
+      expect(container.firstChild).toBeDefined()
+    })
+  })
+
+  describe('Composition', () => {
+    it('renders Badge components inside BadgeBar', () => {
+      render(
+        <ContentCard.Root>
+          <ContentCard.BadgeBar>
+            <Badge colorPalette="primary" variant="subtle">Tag 1</Badge>
+            <Badge colorPalette="neutral" variant="subtle">Tag 2</Badge>
+          </ContentCard.BadgeBar>
+        </ContentCard.Root>,
+      )
+      expect(screen.getByText('Tag 1')).toBeDefined()
+      expect(screen.getByText('Tag 2')).toBeDefined()
+    })
+
+    it('renders arbitrary content in Body slot', () => {
+      render(
+        <ContentCard.Root>
+          <ContentCard.Body>
+            <p data-testid="custom-content">Custom paragraph</p>
+          </ContentCard.Body>
+        </ContentCard.Root>,
+      )
+      expect(screen.getByTestId('custom-content')).toBeDefined()
+    })
+
+    it('renders multiple Sections', () => {
+      render(
+        <ContentCard.Root>
+          <ContentCard.Section>
+            <ContentCard.SectionTitle>Section 1</ContentCard.SectionTitle>
+          </ContentCard.Section>
+          <ContentCard.Section>
+            <ContentCard.SectionTitle>Section 2</ContentCard.SectionTitle>
+          </ContentCard.Section>
+        </ContentCard.Root>,
+      )
+      const headings = screen.getAllByRole('heading', { level: 3 })
+      expect(headings.length).toBe(2)
+    })
+
+    it('renders Separator between sections', () => {
+      const { container } = render(
+        <ContentCard.Root>
+          <ContentCard.Body><p>Body</p></ContentCard.Body>
+          <ContentCard.Separator />
+          <ContentCard.Section>
+            <ContentCard.SectionTitle>Section</ContentCard.SectionTitle>
+          </ContentCard.Section>
+        </ContentCard.Root>,
+      )
+      expect(container.querySelector('hr')).toBeDefined()
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('Title renders as h2 for proper heading hierarchy', () => {
+      renderDefault()
+      expect(screen.getByRole('heading', { level: 2 })).toBeDefined()
+    })
+
+    it('SectionTitle renders as h3 for proper heading hierarchy', () => {
+      renderDefault()
+      const h3s = screen.getAllByRole('heading', { level: 3 })
+      expect(h3s.length).toBeGreaterThan(0)
+    })
+
+    it('List renders as ul with li children', () => {
+      const { container } = renderDefault()
+      expect(container.querySelector('ul')).toBeDefined()
+      expect(container.querySelector('li')).toBeDefined()
+    })
+
+    it('Separator renders as hr', () => {
+      const { container } = renderDefault()
+      expect(container.querySelector('hr')).toBeDefined()
+    })
+  })
+})

package/src/components/ContentCard/ContentCard.tsx

@@ -0,0 +1,19 @@
+'use client';
+import { ark } from '@ark-ui/react/factory';
+import type { ComponentProps } from 'react';
+import { createStyleContext } from 'styled-system/jsx';
+import { contentCard } from 'styled-system/recipes';
+
+const { withProvider, withContext } = createStyleContext(contentCard);
+
+export type RootProps = ComponentProps<typeof Root>;
+export const Root = withProvider(ark.div, 'root');
+export const Header = withContext(ark.div, 'header');
+export const Title = withContext(ark.h2, 'title');
+export const BadgeBar = withContext(ark.div, 'badgeBar');
+export const Body = withContext(ark.div, 'body');
+export const Section = withContext(ark.section, 'section');
+export const SectionTitle = withContext(ark.h3, 'sectionTitle');
+export const Separator = withContext(ark.hr, 'separator');
+export const List = withContext(ark.ul, 'list');
+export const ListItem = withContext(ark.li, 'listItem');

package/src/components/ContentCard/index.ts

@@ -0,0 +1,13 @@
+export {
+  Root,
+  Header,
+  Title,
+  BadgeBar,
+  Body,
+  Section,
+  SectionTitle,
+  Separator,
+  List,
+  ListItem,
+  type RootProps,
+} from './ContentCard';

package/src/components/Header.figma.tsx

@@ -0,0 +1,25 @@
+import figma from '@figma/code-connect';
+import { Header } from './Header';
+
+// Figma size values → DDS heading recipe sizes
+figma.connect(
+  Header,
+  'https://www.figma.com/design/GaHmFfmvO4loUzuZS4TgEz/Discourser.AI--V1?node-id=485-4697',
+  {
+    props: {
+      size: figma.enum('size', {
+        xSm: 'xs',
+        Mdm: 'md',
+        Lg: 'lg',
+        xLg: 'xl',
+        '2xLg': '2xl',
+        '3xLg': '3xl',
+        '4xLg': '4xl',
+        '5xLg': '5xl',
+        '6xLg': '6xl',
+        '7xlg': '7xl',
+      }),
+    },
+    example: ({ size }) => <Header size={size}>Heading Text</Header>,
+  },
+);

package/src/components/{Heading.tsx → Header.tsx}

@@ -5,5 +5,5 @@ import type { StyledComponent } from 'styled-system/types'
 
 type Props = HeadingVariantProps & { as?: ElementType };
 
-export type HeadingProps = ComponentProps<typeof Heading>;
-export const Heading = styled('h2', heading) as StyledComponent<'h2', Props>;
+export type HeadingProps = ComponentProps<typeof Header>;
+export const Header = styled('h2', heading) as StyledComponent<'h2', Props>;

package/src/components/Icons/AccountIcon.tsx

@@ -0,0 +1,26 @@
+import { ark } from '@ark-ui/react/factory';
+import type { ComponentProps } from 'react';
+import { styled } from 'styled-system/jsx';
+
+const StyledSvg = styled(ark.svg);
+
+export type AccountIconProps = ComponentProps<typeof StyledSvg>;
+
+export const AccountIcon = (props: AccountIconProps) => (
+  <StyledSvg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path
+      d="M10 10.8333C12.3012 10.8333 14.1667 8.96785 14.1667 6.66667C14.1667 4.36548 12.3012 2.5 10 2.5C7.69885 2.5 5.83337 4.36548 5.83337 6.66667C5.83337 8.96785 7.69885 10.8333 10 10.8333ZM10 10.8333C11.7682 10.8333 13.4638 11.5357 14.7141 12.786C15.9643 14.0362 16.6667 15.7319 16.6667 17.5M10 10.8333C8.23193 10.8333 6.53624 11.5357 5.286 12.786C4.03575 14.0362 3.33337 15.7319 3.33337 17.5"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </StyledSvg>
+);

package/src/components/Icons/ChevronUpIcon.tsx

@@ -0,0 +1,24 @@
+import { ark } from '@ark-ui/react/factory';
+import type { ComponentProps } from 'react';
+import { styled } from 'styled-system/jsx';
+
+const StyledSvg = styled(ark.svg);
+
+export type ChevronUpIconProps = ComponentProps<typeof StyledSvg>;
+
+export const ChevronUpIcon = (props: ChevronUpIconProps) => (
+  <StyledSvg
+    viewBox="0 0 24 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path
+      transform="translate(-521, -1202)"
+      d="M544.345,1213.39 L534.615,1202.6 C534.167,1202.15 533.57,1201.95 532.984,1201.99 C532.398,1201.95 531.802,1202.15 531.354,1202.6 L521.624,1213.39 C520.797,1214.22 520.797,1215.57 521.624,1216.4 C522.452,1217.23 523.793,1217.23 524.621,1216.4 L532.984,1207.13 L541.349,1216.4 C542.176,1217.23 543.518,1217.23 544.345,1216.4 C545.172,1215.57 545.172,1214.22 544.345,1213.39"
+      fill="currentColor"
+    />
+  </StyledSvg>
+);

package/src/components/Icons/ClockIcon.tsx

@@ -1,10 +1,10 @@
-import { ark } from '@ark-ui/react/factory'
-import type { ComponentProps } from 'react'
-import { styled } from 'styled-system/jsx'
+import { ark } from '@ark-ui/react/factory';
+import type { ComponentProps } from 'react';
+import { styled } from 'styled-system/jsx';
 
-const StyledSvg = styled(ark.svg)
+const StyledSvg = styled(ark.svg);
 
-export type ClockIconProps = ComponentProps<typeof StyledSvg>
+export type ClockIconProps = ComponentProps<typeof StyledSvg>;
 
 export const ClockIcon = (props: ClockIconProps) => (
   <StyledSvg
@@ -37,4 +37,4 @@ export const ClockIcon = (props: ClockIconProps) => (
       strokeLinejoin="round"
     />
   </StyledSvg>
-)
+);