gd-design-library 1.1.0 → 1.2.0

package/README.md

@@ -1,6 +1,6 @@
 # GridKit – Grid Dynamics Design System
 
-![](./gridKit_logo.png)
+![GridKit Logo](./gridKit_logo.png)
 
 **GridKit** is the official design system and component library from Grid Dynamics.  
 It provides a set of reusable, accessible, and themeable React UI components designed to accelerate the development of consistent, scalable applications – with a focus on e-commerce and enterprise platforms.
@@ -76,7 +76,7 @@ yarn storybook
 
 ## 🏗️ Project Structure
 
-```
+```bash
 gd-design-system/
 ├── src/
 │   ├── components/

package/ai/README.md

@@ -46,10 +46,28 @@ Practical generation tips (what the model should output)
 - Do not inline the ThemeProvider inside leaf components; provide it at the app root. See Theme provider/hook entries in the schema.
 - Keep imports consolidated to one source: `gd-design-library`.
 
+Specific component rules updates
+
+- Button (icon-only): when `isIcon` is true, pass the icon via `iconStart` and omit `children`. Always provide an accessible `ariaLabel`.
+- Button (state control): Control button states using `className` prop with values like `"active"`, `"hover"`, or combine with `disabled` prop for disabled state. Example: `<Button className="active" justifyContent="start">Press Me</Button>`.
+- Button (Box props): Use Box layout props like `justifyContent="start"`, `padding`, `width`, `height` for flexible layouts. Example: `<Button padding="8px" width="300px" justifyContent="start" iconStart={<Icon name="folder" />}>Custom Styled</Button>`.
+
 API guardrails from the schema/prompt (must-follow)
 
 - Row/Column/Card.Row/Card.Column: use `isWrap` (boolean), NOT `wrap`. **IMPORTANT: `isWrap` defaults to `true`**, use `isWrap={false}` to prevent wrapping.
-- Icon: **ONLY use icon names from the available list**: cross, success, error, warning, info, dot, check, arrowDown, arrowRight, arrowLeft, arrowForward, keyboardArrowDown, keyboardArrowUp, mobileMenu, home, slash, localShipping, favorite, favoriteOutlined, shoppingBag, paymentCard, accountCircle, portrait, deleteOutlined, minus, plus, edit, search, filter, ruler, attachment, upload, folder, folderOpen, contentCopy, fileCopy, eye, volumeUp, send, chat, chatBubble, phone, processing, wifiTethering, star, starOutlined, thumbUp, thumbDown, thumbUpFilled, thumbDownFilled, errorOutline. Do NOT use icons not in this list (e.g., no "settings", "close", "add", "info" icons).
+- Icon: **ONLY use icon names from the IconsList**. Complete list of 51 available icons:
+  - **Status & Feedback**: `cross`, `success`, `error`, `warning`, `info`, `dot`, `check`, `errorOutline`
+  - **Navigation & Arrows**: `arrowDown`, `arrowRight`, `arrowLeft`, `arrowForward`, `keyboardArrowDown`, `keyboardArrowUp`
+  - **UI & Interface**: `mobileMenu`, `home`, `slash`
+  - **E-commerce**: `localShipping`, `favorite`, `favoriteOutlined`, `shoppingBag`, `paymentCard`
+  - **User & Account**: `accountCircle`, `portrait`
+  - **Actions**: `deleteOutlined`, `minus`, `plus`, `edit`, `search`, `filter`, `ruler`
+  - **Files & Documents**: `attachment`, `upload`, `folder`, `folderOpen`, `contentCopy`, `fileCopy`
+  - **Media**: `eye`, `volumeUp`, `send`
+  - **Communication**: `chat`, `chatBubble`, `phone`
+  - **System**: `processing`, `wifiTethering`
+  - **Rating & Feedback**: `star`, `starOutlined`, `thumbUp`, `thumbDown`, `thumbUpFilled`, `thumbDownFilled`
+  - **IMPORTANT**: Do NOT use icon names not in this list (e.g., no "settings", "close", "add", "chevronRight", "expandMore", "infoIcon"). Use only the exact names from IconsList above.
 - Image and Card.Image: `width` and `height` props are numbers only (e.g., `width={96}`), not strings like `"96px"`.
 - Card.Title and other Card subcomponents: `sizeVariant` only accepts `CardSizeVariant.Default` or `CardSizeVariant.Sm`.
 - Counter and Card.Counter: use `initial` (not `value`) for the starting quantity; use `onCounterChange` as the change handler.
@@ -66,12 +84,52 @@ Component catalog
   - Layout: Box, FlexContainer, Column, Row, Wrapper, Scroll, Separator
   - Forms: Form, Input, Select, Search, Label, Textarea, Switch, Toggle, RadioGroup, Slider, InputFile, DragAndDropFiles
   - Feedback & overlays: InlineNotification, Loader, Skeleton, Snackbar, SnackbarManager, Tooltip, Modal, Portal
-  - Navigation & structure: Breadcrumbs, Tabs, Stepper, List, Accordion, Link
+  - Navigation & structure: Breadcrumbs, Tabs, Stepper, List, Accordion (with subcomponents: AccordionItem, AccordionHeader, AccordionContent), Link
   - Display & content: Typography, Button, Icon, Image, Card, Avatar, Carousel, ContentCarousel, Counter, Price, ProgressBar, Rating, ChatContainer, ChatBubble
 - Not part of gd-design-library (do not request/use): Grid, Stack, Alert, Toast, Table, Badge, ButtonGroup, Dropdown, Drawer, Popover, Pagination, Heading, Spinner.
 
+Important component structures:
+
+- **Accordion** requires three subcomponents working together:
+  - `Accordion`: Main wrapper with props for `value`, `defaultValue`, `allowMultipleExpand`, `withSeparator`, `onChange`
+  - `AccordionItem`: Individual item wrapper (MUST have unique `id` prop). **Supports all Box layout props** (margin, padding, width, height, flex, position, gap, overflow, and more)
+  - `AccordionHeader`: Clickable header (use `expandIcon` prop with Icon component, e.g., `<Icon name="keyboardArrowDown" />`)
+  - `AccordionContent`: Collapsible content section
+  - Structure: `<Accordion><AccordionItem id="unique"><AccordionHeader>Title</AccordionHeader><AccordionContent>Content</AccordionContent></AccordionItem></Accordion>`
+  - ALWAYS import: `import { Accordion, AccordionItem, AccordionHeader, AccordionContent } from 'gd-design-library';`
+
 Patterns from stories (grounded tips)
 
+- Accordion:
+  - Structure is mandatory: `<Accordion><AccordionItem id="unique-id"><AccordionHeader expandIcon={<Icon name="keyboardArrowDown" />}><h3>Title</h3></AccordionHeader><AccordionContent><p>Content</p></AccordionContent></AccordionItem></Accordion>`
+  - ALWAYS provide unique `id` prop to each AccordionItem (required for state management)
+  - Use `expandIcon` prop on AccordionHeader with Icon component for visual expand/collapse indicator
+  - Common icon choices from IconsList: `keyboardArrowDown` (default down arrow), `plus` (plus/minus style), `arrowRight` (side arrow), `arrowDown` (simple arrow)
+  - Controlled mode: use `value={expandedIds}` and `onChange={setExpandedIds}` for external state management
+  - Uncontrolled mode: use `defaultValue={["id1", "id2"]}` for initially expanded items
+  - Set `allowMultipleExpand={true}` for settings panels or comparison scenarios where multiple items can be open
+  - Set `allowMultipleExpand={false}` (default) for FAQs or step-by-step guides where only one item should be open
+  - Use `withSeparator={false}` to remove dividers between accordion items
+  - Apply `styles` prop to AccordionItem for custom borders, backgrounds: `styles={{ border: '2px solid #0066cc' }}`
+  - Apply `styles` prop to AccordionHeader for custom header styling: `styles={{ backgroundColor: '#4CAF50', color: 'white' }}`
+  - Apply `styles` prop to AccordionContent for custom content styling: `styles={{ backgroundColor: '#f9f9f9', padding: '24px' }}`
+  - **AccordionItem Box Layout Props** (NEW):
+    - Use `margin` for spacing between items: `margin="16px 0"`
+    - Use `padding` for internal spacing: `padding="20px"`
+    - Use `width` and `maxWidth` for responsive layouts: `width="100%" maxWidth="600px"`
+    - Use `flex` for flexible layouts: `flex="1"` (in flex container)
+    - Use `minWidth` to prevent items from becoming too narrow: `minWidth="200px"`
+    - Use `height`, `minHeight`, `maxHeight` for vertical sizing
+    - Use flexbox props: `flexDirection`, `justifyContent`, `alignItems`, `gap`
+    - Use positioning props: `position`, `top`, `right`, `bottom`, `left`, `zIndex`
+    - Use `overflow` to control content overflow: `overflow="hidden"`
+    - All standard CSS Box props are supported on AccordionItem
+  - For rich headers, wrap complex JSX in divs: `<AccordionHeader><div style={{display: 'flex'}}><Icon name="info" /><h3>Title</h3></div></AccordionHeader>`
+  - Nest accordions by placing Accordion inside AccordionContent for hierarchical data
+  - Use with semantic HTML: wrap header content in h3, h4 tags
+  - Combine with InlineNotification inside AccordionContent for contextual alerts
+  - Use onChange to track analytics, update URLs, or persist preferences to localStorage
+  - Accessibility: ARIA attributes (aria-expanded, aria-controls) are automatically provided by AccordionHeader
 - Textarea:
   - Control resizing with the `resize` prop using the `TextareaResize` enum (e.g., None, Horizontal, Vertical, Both). Prefer `dynamicHeightAdjustment` for auto-growing content.
   - Use `rows` for fixed height or `minHeight`/`maxHeight` for constraints.
@@ -80,7 +138,11 @@ Patterns from stories (grounded tips)
   - Limits and events: `maxLength` to constrain length; `onCustomResize` receives `{ height, width }` when user resizes.
 - Buttons:
   - Variants: `ButtonVariant.Primary | Secondary | Tertiary | Outlined | Text | Inherit`. For icon-only buttons, set `isIcon`.
+  - Icon-only usage: when `isIcon` is true, pass the icon via `iconStart` and omit `children`. Always provide an accessible `ariaLabel`.
   - Rounded: Use `rounded` prop with values: `none | xs | sm | md | lg | xl | round`. Use `round` for circular icon buttons.
+  - Interactive states: Buttons have built-in hover, active (press), and disabled states with smooth transitions. Use `className` for custom CSS classes (e.g., `className="active"`, `className="hover"`, `className="disabled"`) and `styles` prop for inline styles.
+  - State control via className: Control button states using `className` prop with values like `"active"`, `"hover"`, or combine with `disabled` prop for disabled state. Example: `<Button className="active" justifyContent="start">Press Me</Button>`.
+  - Box props: Use Box layout props like `justifyContent="start"` to align button content, and combine with `alignItems`, `gap`, `margin`, `padding`, `width`, `height` for flexible layouts. Button extends Box component props for full layout control. Example: `<Button padding="8px" width="300px" justifyContent="start" iconStart={<Icon name="folder" />}>Custom Styled</Button>`.
 - Forms and labels:
   - Always provide a visible label via the `label` prop or a separate `<Label htmlFor>` paired with the input `name/id`. Wrap controls with `<Form>` and handle submit via `onSubmit`.
 - Layout composition:
@@ -93,17 +155,19 @@ Patterns from stories (grounded tips)
   - Use `Icon name="phone"` for contact, calling, or communication features
   - Combine with `ChatContainer` and `ChatBubble` components for complete chat interfaces
 
-- Complete icon catalog (50+ icons organized by category):
-  - Status & Feedback: `cross`, `success`, `error`, `warning`, `info`, `dot`, `check`, `errorOutline`
-  - Navigation & Direction: `arrowDown`, `arrowRight`, `arrowLeft`, `arrowForward`, `keyboardArrowDown`, `keyboardArrowUp`
-  - UI & Interface: `mobileMenu`, `home`, `slash`
-  - E-commerce & Shopping: `localShipping`, `favorite`, `favoriteOutlined`, `shoppingBag`, `paymentCard`
-  - User & Account: `accountCircle`, `portrait`
-  - Actions & Operations: `deleteOutlined`, `minus`, `plus`, `edit`, `search`, `filter`, `ruler`
-  - File & Document: `attachment`, `upload`, `folder`, `folderOpen`, `contentCopy`, `fileCopy`
-  - Media & Communication: `eye`, `volumeUp`, `send`, `chat`, `chatBubble`, `phone`
-  - System & Technical: `processing`, `wifiTethering`
-  - Rating & Feedback: `star`, `starOutlined`, `thumbUp`, `thumbDown`, `thumbUpFilled`, `thumbDownFilled`
+- Complete icon catalog (51 icons from IconsList, organized by category):
+  - **Status & Feedback** (8): `cross`, `success`, `error`, `warning`, `info`, `dot`, `check`, `errorOutline`
+  - **Navigation & Arrows** (6): `arrowDown`, `arrowRight`, `arrowLeft`, `arrowForward`, `keyboardArrowDown`, `keyboardArrowUp`
+  - **UI & Interface** (3): `mobileMenu`, `home`, `slash`
+  - **E-commerce** (5): `localShipping`, `favorite`, `favoriteOutlined`, `shoppingBag`, `paymentCard`
+  - **User & Account** (2): `accountCircle`, `portrait`
+  - **Actions** (7): `deleteOutlined`, `minus`, `plus`, `edit`, `search`, `filter`, `ruler`
+  - **Files & Documents** (6): `attachment`, `upload`, `folder`, `folderOpen`, `contentCopy`, `fileCopy`
+  - **Media** (3): `eye`, `volumeUp`, `send`
+  - **Communication** (3): `chat`, `chatBubble`, `phone`
+  - **System** (2): `processing`, `wifiTethering`
+  - **Rating & Feedback** (6): `star`, `starOutlined`, `thumbUp`, `thumbDown`, `thumbUpFilled`, `thumbDownFilled`
+  - **CRITICAL**: These are the ONLY valid icon names. Do not invent or use: "add" (use `plus`), "chevronRight" (use `arrowRight`), "expandMore" (use `arrowDown`), "settings", "close", "infoIcon", etc.
 - TextArea component for multi-line text input:
   - Use `Textarea` for detailed information like comments, descriptions, or messages
   - Apply `dynamicHeightAdjustment={true}` for auto-growing text areas
@@ -163,7 +227,7 @@ Patterns from stories (grounded tips)
 
 Example: Correct usage
 
-```
+```typescript
 import { Form, Input, Button, Typography, Box, FlexContainer, Column, Card, Link } from 'gd-design-library';
 
 export function LoginCard() {
@@ -180,7 +244,7 @@ export function LoginCard() {
             </Column>
           </Form>
           <Typography variant="small">
-            Don’t have an account? <Link href="#">Sign up</Link>
+            Don't have an account? <Link href="#">Sign up</Link>
           </Typography>
         </Column>
       </Card>
@@ -189,9 +253,91 @@ export function LoginCard() {
 }
 ```
 
-Incorrect usage (anti-patterns)
+Example: Accordion usage (correct)
+
+```typescript
+import { Accordion, AccordionItem, AccordionHeader, AccordionContent, Icon, Typography } from 'gd-design-library';
+
+export function FAQSection() {
+  return (
+    <Accordion defaultValue={["faq1"]}>
+      <AccordionItem id="faq1">
+        <AccordionHeader expandIcon={<Icon name="keyboardArrowDown" />}>
+          <Typography as="h3" variant="h5">How do I get started?</Typography>
+        </AccordionHeader>
+        <AccordionContent>
+          <Typography variant="body">
+            Follow these steps to begin using the design system in your project.
+          </Typography>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="faq2">
+        <AccordionHeader expandIcon={<Icon name="keyboardArrowDown" />}>
+          <Typography as="h3" variant="h5">What are the pricing options?</Typography>
+        </AccordionHeader>
+        <AccordionContent>
+          <Typography variant="body">
+            We offer three flexible pricing plans to meet your needs.
+          </Typography>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+```
+
+Example: Accordion with Box Layout Props (correct)
+
+```typescript
+import { Accordion, AccordionItem, AccordionHeader, AccordionContent, Icon, Typography } from 'gd-design-library';
 
+export function StyledAccordionSection() {
+  return (
+    <Accordion>
+      <AccordionItem
+        id="item1"
+        margin="16px 0"
+        padding="20px"
+        width="100%"
+        maxWidth="600px"
+        styles={{
+          border: '2px solid #4CAF50',
+          borderRadius: '12px',
+          backgroundColor: '#f1f8f4'
+        }}
+      >
+        <AccordionHeader expandIcon={<Icon name="keyboardArrowDown" />}>
+          <Typography as="h3" variant="h5">Item with Box Props</Typography>
+        </AccordionHeader>
+        <AccordionContent>
+          <Typography variant="body">
+            This AccordionItem uses Box layout props like margin, padding, width, and maxWidth for flexible layout control.
+          </Typography>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem
+        id="item2"
+        flex="1"
+        minWidth="200px"
+        styles={{ border: '1px solid #ddd', borderRadius: '8px' }}
+      >
+        <AccordionHeader expandIcon={<Icon name="keyboardArrowDown" />}>
+          <Typography as="h3" variant="h5">Flex Item</Typography>
+        </AccordionHeader>
+        <AccordionContent>
+          <Typography variant="body">
+            Using flex="1" for flexible width distribution in a flex container.
+          </Typography>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
 ```
+
+Incorrect usage (anti-patterns)
+
+```typescript
 import Button from 'some-ui-lib';
 import { Box } from '@mui/material';
 
@@ -204,6 +350,54 @@ export function Login() {
 }
 ```
 
+Accordion anti-patterns (WRONG - do not do this):
+
+```typescript
+// ❌ WRONG: Missing subcomponents structure
+<Accordion>
+  <div title="Section 1">Content 1</div>
+</Accordion>
+
+// ❌ WRONG: Missing AccordionItem id prop
+<Accordion>
+  <AccordionItem>  {/* Missing required id prop */}
+    <AccordionHeader>Title</AccordionHeader>
+    <AccordionContent>Content</AccordionContent>
+  </AccordionItem>
+</Accordion>
+
+// ❌ WRONG: Using value/title props instead of proper structure
+<Accordion>
+  <AccordionItem value="item1" title="Section 1">
+    Content 1  {/* Missing AccordionContent wrapper */}
+  </AccordionItem>
+</Accordion>
+
+// ❌ WRONG: Missing Icon import for expandIcon
+<Accordion>
+  <AccordionItem id="item1">
+    <AccordionHeader expandIcon="arrow">  {/* String instead of Icon component */}
+      <h3>Title</h3>
+    </AccordionHeader>
+    <AccordionContent>Content</AccordionContent>
+  </AccordionItem>
+</Accordion>
+
+// ✅ CORRECT: Proper structure with all required parts
+import { Accordion, AccordionItem, AccordionHeader, AccordionContent, Icon } from 'gd-design-library';
+
+<Accordion>
+  <AccordionItem id="item1">
+    <AccordionHeader expandIcon={<Icon name="keyboardArrowDown" />}>
+      <h3>Title</h3>
+    </AccordionHeader>
+    <AccordionContent>
+      <p>Content</p>
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
 Troubleshooting and notes
 
 - If a component/prop isn’t recognized, verify it exists in `gd-design-library` exports and the AI schemas under `./ai/schemas/components/*`.

package/ai/schemas/components/Accordion.d.ts

@@ -14,6 +14,68 @@ declare const _default: {
         touchSupport: boolean;
         keyboardSupport: boolean;
         screenReaderSupport: boolean;
+        subcomponents: {
+            AccordionItem: {
+                description: string;
+                props: ({
+                    name: string;
+                    type: string;
+                    description: string;
+                    required: boolean;
+                    default?: undefined;
+                } | {
+                    name: string;
+                    type: string;
+                    description: string;
+                    default: string;
+                    required?: undefined;
+                } | {
+                    name: string;
+                    type: string;
+                    description: string;
+                    required?: undefined;
+                    default?: undefined;
+                })[];
+            };
+            AccordionHeader: {
+                description: string;
+                props: ({
+                    name: string;
+                    type: string;
+                    description: string;
+                    required: boolean;
+                    default?: undefined;
+                } | {
+                    name: string;
+                    type: string;
+                    description: string;
+                    required?: undefined;
+                    default?: undefined;
+                } | {
+                    name: string;
+                    type: string;
+                    description: string;
+                    default: string;
+                    required?: undefined;
+                })[];
+            };
+            AccordionContent: {
+                description: string;
+                props: ({
+                    name: string;
+                    type: string;
+                    description: string;
+                    required: boolean;
+                    default?: undefined;
+                } | {
+                    name: string;
+                    type: string;
+                    description: string;
+                    default: string;
+                    required?: undefined;
+                })[];
+            };
+        };
         props: ({
             name: string;
             type: string;
@@ -58,6 +120,26 @@ declare const _default: {
                 code: string;
                 useCase: string;
             };
+            'Rich Header Content': {
+                code: string;
+                useCase: string;
+            };
+            'Nested Accordions': {
+                code: string;
+                useCase: string;
+            };
+            'Custom Styled Items': {
+                code: string;
+                useCase: string;
+            };
+            'AccordionItem with Box Layout Props': {
+                code: string;
+                useCase: string;
+            };
+            'Flex Layout Accordion Items': {
+                code: string;
+                useCase: string;
+            };
         };
         examples: string[];
         troubleshooting: {
@@ -66,6 +148,8 @@ declare const _default: {
             'State not updating': string;
             'Accessibility issues': string;
             'Performance issues': string;
+            'Icon not rotating': string;
+            'Missing id error': string;
         };
         bestPractices: string[];
     };

package/ai/schemas/components/Button.d.ts

@@ -82,6 +82,18 @@ declare const _default: {
                 code: string;
                 useCase: string;
             };
+            'State Control via className': {
+                code: string;
+                useCase: string;
+            };
+            'Custom Styled with Box Props': {
+                code: string;
+                useCase: string;
+            };
+            'Disabled with Box Props': {
+                code: string;
+                useCase: string;
+            };
         };
         examples: string[];
         troubleshooting: {

package/ai/schemas/components/Column.d.ts

@@ -19,24 +19,24 @@ declare const _default: {
             type: string;
             description: string;
             default: string;
-            enum: string[];
+            enum?: undefined;
         } | {
             name: string;
             type: string;
             description: string;
-            default: number;
-            enum?: undefined;
+            default: string;
+            enum: string[];
         } | {
             name: string;
             type: string;
             description: string;
-            default: boolean;
+            default: number;
             enum?: undefined;
         } | {
             name: string;
             type: string;
             description: string;
-            default: string;
+            default: boolean;
             enum?: undefined;
         } | {
             name: string;

package/ai/schemas/components/InputFile.d.ts

@@ -18,31 +18,43 @@ declare const _default: {
             name: string;
             type: string;
             description: string;
+            default: string;
             enum?: undefined;
-            default?: undefined;
+            required?: undefined;
         } | {
             name: string;
             type: string;
             description: string;
-            enum: string[];
-            default?: undefined;
+            enum: (string | boolean)[];
+            default: string;
+            required?: undefined;
         } | {
             name: string;
             type: string;
             description: string;
             default: boolean;
             enum?: undefined;
+            required?: undefined;
         } | {
             name: string;
             type: string;
             description: string;
-            default: {};
+            default: string;
+            required: boolean;
             enum?: undefined;
         } | {
             name: string;
             type: string;
             description: string;
-            default: string;
+            default?: undefined;
+            enum?: undefined;
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            required: boolean;
+            default?: undefined;
             enum?: undefined;
         })[];
         examples: string[];

package/ai/schemas/components/Menu.d.ts

@@ -0,0 +1,37 @@
+declare const _default: {
+    component: {
+        name: string;
+        import: string;
+        description: string;
+        category: string;
+        complexity: string;
+        accessibility: string;
+        performance: string;
+        dependencies: string[];
+        peerDependencies: string[];
+        bundleSize: string;
+        browserSupport: string;
+        touchSupport: boolean;
+        keyboardSupport: boolean;
+        screenReaderSupport: boolean;
+        props: ({
+            name: string;
+            type: string;
+            description: string;
+            default?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: boolean;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: string;
+        })[];
+        examples: string[];
+    };
+    compositionTips: string[];
+};
+export default _default;

package/ai/schemas/components/Row.d.ts

@@ -15,6 +15,12 @@ declare const _default: {
         keyboardSupport: boolean;
         screenReaderSupport: boolean;
         props: ({
+            name: string;
+            type: string;
+            description: string;
+            default: string;
+            enum?: undefined;
+        } | {
             name: string;
             type: string;
             description: string;
@@ -36,13 +42,7 @@ declare const _default: {
             name: string;
             type: string;
             description: string;
-            enum?: undefined;
             default?: undefined;
-        } | {
-            name: string;
-            type: string;
-            description: string;
-            default: string;
             enum?: undefined;
         })[];
         examples: string[];

package/ai/schemas/components/Scroll.d.ts

@@ -21,6 +21,13 @@ declare const _default: {
             default: string;
             enum: string[];
             required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: boolean;
+            enum?: undefined;
+            required?: undefined;
         } | {
             name: string;
             type: string;

package/ai/schemas/components/Typography.d.ts

@@ -28,27 +28,6 @@ declare const _default: {
             default: string;
             enum?: undefined;
             required?: undefined;
-        } | {
-            name: string;
-            type: string;
-            description: string;
-            default: {};
-            enum?: undefined;
-            required?: undefined;
-        } | {
-            name: string;
-            type: string;
-            description: string;
-            default: never[];
-            enum: string[];
-            required?: undefined;
-        } | {
-            name: string;
-            type: string;
-            description: string;
-            default?: undefined;
-            enum?: undefined;
-            required?: undefined;
         } | {
             name: string;
             type: string;

package/assets/icons/account_circle.d.ts

@@ -1,7 +1,5 @@
-export declare const AccountCircleIcon: ({ width, height, fillSvg, fill, ...rest }: {
+export declare const AccountCircleIcon: ({ fillSvg, fill, ...rest }: {
     [x: string]: any;
-    width?: number | undefined;
-    height?: number | undefined;
     fillSvg?: string | undefined;
     fill?: string | undefined;
 }) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/account_circle.js

@@ -1,17 +1,10 @@
 "use client";
-import { jsx as t } from "@emotion/react/jsx-runtime";
-import { icon as n } from "../../tokens/icon.js";
-import { SizeVariant as c } from "../../types/common.js";
-const {
-  width: l,
-  height: h
-} = n.size[c.Sm], f = ({
-  width: o = l,
-  height: i = h,
-  fillSvg: e = "none",
-  fill: r = "currentColor",
-  ...C
-}) => /* @__PURE__ */ t("svg", { width: o, height: i, viewBox: "0 0 24 24", fill: e, xmlns: "http://www.w3.org/2000/svg", ...C, children: /* @__PURE__ */ t("path", { d: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 5C13.66 5 15 6.34 15 8C15 9.66 13.66 11 12 11C10.34 11 9 9.66 9 8C9 6.34 10.34 5 12 5ZM12 19.2C9.5 19.2 7.29 17.92 6 15.98C6.03 13.99 10 12.9 12 12.9C13.99 12.9 17.97 13.99 18 15.98C16.71 17.92 14.5 19.2 12 19.2Z", fill: r }) });
+import { jsx as C } from "@emotion/react/jsx-runtime";
+const c = ({
+  fillSvg: o = "none",
+  fill: n = "currentColor",
+  ...r
+}) => /* @__PURE__ */ C("svg", { viewBox: "0 0 24 24", fill: o, xmlns: "http://www.w3.org/2000/svg", ...r, children: /* @__PURE__ */ C("path", { d: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 5C13.66 5 15 6.34 15 8C15 9.66 13.66 11 12 11C10.34 11 9 9.66 9 8C9 6.34 10.34 5 12 5ZM12 19.2C9.5 19.2 7.29 17.92 6 15.98C6.03 13.99 10 12.9 12 12.9C13.99 12.9 17.97 13.99 18 15.98C16.71 17.92 14.5 19.2 12 19.2Z", fill: n }) });
 export {
-  f as AccountCircleIcon
+  c as AccountCircleIcon
 };