gd-design-library 1.0.2 → 1.2.0

package/llms.txt

@@ -39,18 +39,21 @@ Each component has:
 #### 3. Available Components (47+ total)
 
 **Theme & Context:**
-- [ThemeProvider](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/providers-themeprovider--docs) - Context provider for theme support and configuration
+- [Dynamic Theme Switching in a Component Library](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/theme-tokens-dynamic-theme-switching--docs) - Comprehensive Guide for Implementation, Accessibility, Logging, and Best Practices
+- [GridKit Theme & Design Tokens](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/theme-tokens-design-tokens-overview--docs) - Comprehensive Guide for Implementation, Accessibility, Logging, and Best Practices
 - useTheme - Hook for accessing and managing themes programmatically
 
 **Layout Components:**
 - [Box](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/atoms-box--docs) - Foundational layout primitive with flexbox support, focus management, and interaction states. Base component for Card and other containers
 - [FlexContainer](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/layout-structure-flexcontainer--docs) - Flexible container with CSS flexbox properties and responsive design
 - [Column](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/layout-structure-column--docs) - Vertical layout container with alignment and spacing controls
+  - As prop: Use `as="main"` or `as="section"` for semantic HTML and better accessibility. Example: `<Column as="main" gutter={16}>...</Column>`
 - [Row](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/layout-structure-row--docs) - Horizontal layout container with flexible item distribution
+  - As prop: Use `as="nav"` or `as="header"` for semantic HTML and better accessibility. Example: `<Row as="nav" justify="space-between">...</Row>`
 - [Wrapper](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/molecules-wrapper--docs) - Generic wrapper component for content organization
 - [Scroll](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/molecules-scroll--docs) - Scrollable container with customizable scroll behavior
 - [Separator](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/atoms-separator--docs) - Visual separator element for content division
-- [ChatContainer](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/layout-structure-chatcontainer--docs) - Specialized container for chat interface layouts
+- [ChatContainer](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/layout-structure-chatcontainer--docs) - Specialized layout component for chat interfaces with collapsible sidebar, minified sidebar state, and imperative ref controls
 
 **Form Components:**
 - [Form](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/molecules-form--docs) - Semantic form wrapper with validation and event handling
@@ -68,7 +71,7 @@ Each component has:
 
 **Feedback & Overlays:**
 - [InlineNotification](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/molecules-inlinenotification--docs) - Inline status messages and alerts
-- [Loader](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/atoms-loader--docs) - Loading indicator with multiple animation styles
+- [Loader](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/atoms-loader--docs) - Loading indicator with multiple animation styles (circle, dots), size variants (xs-xl), wrapper variants (inline, section, fullPage), and rounded border support. Note: rounded prop only applies to "dots" animation type, not "circle"
 - [Skeleton](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/atoms-skeleton--docs) - Content placeholder for loading states
 - [Snackbar](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/molecules-snackbar--docs) - Toast notifications with auto-dismiss
 - SnackbarManager - Snackbar management system for multiple notifications
@@ -81,16 +84,29 @@ Each component has:
 - [Tabs](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/organisms-tabs--docs) - Tab navigation component with keyboard support
 - [Stepper](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/organisms-stepper--docs) - Step-by-step navigation indicator
 - [List](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/molecules-list--docs) - List container component with flexible item rendering
-- [Accordion](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/organisms-accordion--docs) - Collapsible content sections with animation
+- [Accordion](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/organisms-accordion--docs) - Collapsible content sections with animation. Built with subcomponents: AccordionItem (wrapper with unique id), AccordionHeader (clickable header with optional expandIcon), AccordionContent (collapsible content). Supports controlled/uncontrolled modes, multiple expand, and custom styling per subcomponent
+  - [AccordionItem](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/organisms-accordion-accordionitem--docs) - Individual accordion item wrapper (requires unique id prop). **Supports all Box layout props** including margin, padding, width, height, flex, position, and more for flexible layout control
+  - [AccordionHeader](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/organisms-accordion-accordionheader--docs) - Clickable header with optional expandIcon and rich content support
+  - [AccordionContent](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/organisms-accordion-accordioncontent--docs) - Collapsible content section with smooth animations
 - [Link](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/molecules-link--docs) - Navigation link component with external link support
 - [Dropdown](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/molecules-dropdown--docs) - Dropdown menu container with positioning
 - [DropdownItem](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/molecules-dropdownitem--docs) - Individual dropdown menu item
-- [Menu](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/molecules-menu--docs) - Menu component for navigation and actions
+- [Menu](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/molecules-menu--docs) - Menu component for navigation and actions with accurate corner positioning, ref API for programmatic control (open, close), closeOnSelect prop for multi-select scenarios, placement prop for explicit positioning, and full Box layout support.
+  - Ref API: Use `ref.open(event.target)` and `ref.close(event.target)` for programmatic control. Pass `event.target` as the parameter to identify API-controlled interactions, which helps distinguish programmatic control from user interactions. Access current state via `ref.isOpen`, `ref.selectedValue`. Example: `<Button onClick={(e) => menuRef.current?.open(e.target)}>Open Menu</Button>`.
+  - Close on select: Set `closeOnSelect={false}` to keep menu open after selecting items, useful for multiple selections.
+  - Placement: Use `placement="top-left"`, `placement="top-right"`, `placement="bottom-left"`, or `placement="bottom-right"` to explicitly set menu position relative to trigger edges. Defaults to `"bottom-right"` if not specified. Placement provides accurate corner positioning aligned to trigger edges.
+  - Positioning: Menu uses absolute positioning with viewport-based coordinate calculations that account for scroll position, ensuring accurate placement in Portal-rendered content.
+  - Box props: Full Box component props support for flexible layout control - use `margin`, `padding`, `position`, `flex`, `gap`, `width`, `height`, `minWidth`, `minHeight`, `maxWidth`, `maxHeight`, `display`, `overflow`, `zIndex`, and more for precise positioning and spacing. Example: `<Menu padding="16px" marginTop="8px" content={menuItems}>Menu</Menu>` or `<Menu width="200px" maxHeight="300px" overflow="auto" content={menuItems}>Menu</Menu>`.
 
 **Display & Content:**
 - [Typography](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/atoms-typography--docs) - Text component with hierarchical variants and styling
 - [Button](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/molecules-button--docs) - Interactive button with multiple styles and states
-- [Icon](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/atoms-icon--docs) - Icon component with 50+ built-in icons and custom support
+  - Icon-only usage: when using `isIcon`, pass the icon via `iconStart` and omit `children`. Always provide `ariaLabel`.
+  - Interactive states: 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.
+  - 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.
+- [Icon](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/atoms-icon--docs) - Icon component with 51 built-in icons from IconsList. **CRITICAL: Use ONLY these exact icon names**: 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, processing, eye, attachment, upload, folder, folderOpen, wifiTethering, contentCopy, thumbUp, thumbDown, fileCopy, send, thumbUpFilled, thumbDownFilled, chat, chatBubble, phone, star, starOutlined, errorOutline, volumeUp. Do NOT use: "add" (use plus), "chevronRight" (use arrowRight), "expandMore" (use arrowDown), "close" (use cross), "settings", "infoIcon", or any other invented names
+  - Box props: Icon supports full Box component props for flexible layout control. Use `margin`, `padding`, `position`, `flex`, `gap`, and more for precise positioning and spacing. Example: `<Icon name="check" marginRight="12px" />` or `<Icon name="search" position="absolute" top="10px" right="10px" />`
 - [Image](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/molecules-image--docs) - Image component with optimization and fallback handling
 - [Card](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/templates-card--docs) - Content container with subcomponents, layout variants, and interactive hover effects. Built on Box with support for withShadowHover
 - [Avatar](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/organisms-avatar--docs) - User avatar component with fallback and badge support
@@ -142,21 +158,25 @@ const fullPrompt = `${CLAUDE_GRIDKIT_SYSTEM_PROMPT}\n\nTask: Create a dashboard
 ### Storybook Resources
 
 **Instructions & Getting Started:**
-- [Introduction](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/introduction--docs) - Overview of the GridKit Design System and component library architecture
-- [Installation](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/installation--docs) - Step-by-step guide for integrating the design system into projects
-- [Usage Guidelines](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/usage--docs) - Best practices for implementing components and maintaining consistency
-- [Contributing](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/contributing--docs) - Guidelines for contributing to the design system and component development
+- [Introduction](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/introduction-welcome--docs) - Overview of the GridKit Design System and component library architecture
+- [Installation](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/introduction-getting-started--docs) - Step-by-step guide for integrating the design system into projects
+- [Theme Tokens Usage](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/introduction-theme-tokens-usage--docs) - Approaches to using theme tokens in your components.
+- [Logging and Debugging](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/introduction-logging-and-debugging--docs) - Guidelines for logging, includes a flexible, non-intrusive logging system that allows you to monitor component behavior, debug issues, and integrate with your existing logging infrastructure.
+- [Usage Guidelines](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/patterns-best-practices-ux-ui-design-patterns-and-best-practices--docs) - Best practices for implementing components and maintaining consistency
+- [Contributing](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/introduction-feedback-contribution--docs) - Guidelines for contributing to the design system and component development
 
 **Theme & Tokens:**
-- [Theme Overview](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/theme-overview--docs) - Comprehensive guide to the theming system and customization options
-- [Color Tokens](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/theme-colors--docs) - Complete color palette with semantic naming and usage guidelines
-- [Typography Tokens](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/theme-typography--docs) - Font scales, weights, and text styling tokens for consistent typography
-- [Spacing Tokens](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/theme-spacing--docs) - Spacing scale and layout tokens for consistent margins, padding, and gaps
-- [Breakpoint Tokens](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/theme-breakpoints--docs) - Responsive breakpoint definitions for mobile-first design
-- [Shadow Tokens](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/theme-shadows--docs) - Elevation and shadow tokens for depth and visual hierarchy
-- [Border Tokens](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/theme-borders--docs) - Border radius, width, and style tokens for consistent component styling
-- [Animation Tokens](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/theme-animations--docs) - Motion and transition tokens for smooth user interactions
-- [Theme Customization](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/theme-customization--docs) - Guide for creating custom themes and extending the design system
+- [Theme Overview](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/theme-tokens-theme--docs) - Comprehensive guide to the theming system and customization options
+- [Color Tokens](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/theme-tokens-colors--docs) - Complete color palette with semantic naming and usage guidelines
+- [Typography Tokens](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/theme-tokens-fonts--docs) - Font scales, weights, and text styling tokens for consistent typography
+- [Spacing Tokens](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/theme-tokens-spacing--docs) - Spacing scale and layout tokens for consistent margins, padding, and gaps
+- [Radius Tokens](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/theme-tokens-radius--docs) - Border radius tokens for consistent component styling
+- [Breakpoint Tokens](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/theme-tokens-breakpoints--docs) - Responsive breakpoint definitions for mobile-first design
+- [Shadow Tokens](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/theme-tokens-shadows--docs) - Elevation and shadow tokens for depth and visual hierarchy
+- [Animation Tokens](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/theme-tokens-animations--docs) - Motion and transition tokens for smooth user interactions
+- [Values Tokens](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/theme-tokens-values--docs) - Miscellaneous value tokens for various UI properties
+- [zIndex Tokens](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/theme-tokens-zindex--docs) - zIndex tokens for controlling visual stacking order
+- [Theme Customization](https://storybook.cto-rnd-system-design.griddynamics.net/?path=/docs/introduction-getting-started--docs) - Guide for creating custom themes and extending the design system
 
 ### Support
 - Component schemas provide comprehensive prop documentation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gd-design-library",
-  "version": "1.0.2",
+  "version": "1.2.0",
   "license": "MIT",
   "type": "module",
   "main": "./index.js",

package/tokens/accordion.d.ts

@@ -1,16 +1,16 @@
-import { TextAlign } from '../types';
 export declare const accordion: {
     header: {
         default: {
             width: string;
-            textAlign: TextAlign;
+            textAlign: string;
             cursor: string;
-            border: number;
+            border: string;
             backgroundColor: (theme: Record<symbol, unknown>) => string;
             paddingTop: (theme: Record<symbol, unknown>) => string;
             paddingBottom: (theme: Record<symbol, unknown>) => string;
             display: string;
             alignItems: string;
+            justifyContent: string;
             ':first-of-type': {
                 flex: string;
             };
@@ -48,6 +48,12 @@ export declare const accordion: {
             };
         };
     };
+    itemNoSeparator: {
+        default: {
+            position: string;
+            padding: (theme: Record<symbol, unknown>) => string;
+        };
+    };
     icon: {
         default: {
             transition: (theme: Record<symbol, unknown>) => string;

package/tokens/accordion.js

@@ -1,20 +1,17 @@
-import { flexAlignItems as o, display as t } from "./display.js";
-import { cursors as a } from "./cursors.js";
-import { borders as i } from "./borders.js";
 import { get as n } from "../utils/helpers.js";
-import { TextAlign as r } from "../types/typography.js";
-const g = {
+const o = {
   header: {
     default: {
       width: "100%",
-      textAlign: r.Left,
-      cursor: a.pointer,
-      border: i.none,
+      textAlign: "left",
+      cursor: "pointer",
+      border: "0",
       backgroundColor: (e) => n(e, "colors.transparent", "theme.colors.transparent"),
       paddingTop: (e) => n(e, "spacing.md", "theme.spacing.md"),
       paddingBottom: (e) => n(e, "spacing.md", "theme.spacing.md"),
-      display: t.flex,
-      alignItems: o.center,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
       ":first-of-type": {
         flex: "1"
       }
@@ -52,6 +49,12 @@ const g = {
       }
     }
   },
+  itemNoSeparator: {
+    default: {
+      position: "relative",
+      padding: (e) => n(e, "spacing.none", "theme.spacing.none")
+    }
+  },
   icon: {
     default: {
       transition: (e) => n(e, "values.transitions.accordion.icon", "theme.values.transitions.accordion.icon")
@@ -65,5 +68,5 @@ const g = {
   }
 };
 export {
-  g as accordion
+  o as accordion
 };

package/tokens/button.d.ts

@@ -59,43 +59,41 @@ export declare const button: {
     primary: {
         color: (theme: Record<symbol, unknown>) => string;
         background: (theme: Record<symbol, unknown>) => string;
-        '&:hover': {
+        '&:hover, &.hover': {
             background: (theme: Record<symbol, unknown>) => string;
         };
-        '&:active': {
+        '&:active, &.active': {
             background: (theme: Record<symbol, unknown>) => string;
         };
-        '&:disabled': {
+        '&:disabled, &.disabled': {
             background: (theme: Record<symbol, unknown>) => string;
         };
     };
     secondary: {
         color: (theme: Record<symbol, unknown>) => string;
         background: (theme: Record<symbol, unknown>) => string;
-        '&:hover': {
+        '&:hover, &.hover': {
             background: (theme: Record<symbol, unknown>) => string;
             color: (theme: Record<symbol, unknown>) => string;
         };
-        '&:active': {
+        '&:active, &.active': {
             color: (theme: Record<symbol, unknown>) => string;
             background: (theme: Record<symbol, unknown>) => string;
         };
-        '&:disabled': {
+        '&:disabled, &.disabled': {
             background: (theme: Record<symbol, unknown>) => string;
         };
     };
     tertiary: {
         background: string;
         color: (theme: Record<symbol, unknown>) => string;
-        '&:hover': {
-            color: (theme: Record<symbol, unknown>) => string;
+        '&:hover, &.hover': {
             background: (theme: Record<symbol, unknown>) => string;
         };
-        '&:active': {
-            color: (theme: Record<symbol, unknown>) => string;
+        '&:active, &.active': {
             background: (theme: Record<symbol, unknown>) => string;
         };
-        '&:disabled': {
+        '&:disabled, &.disabled': {
             background: string;
         };
     };
@@ -103,14 +101,14 @@ export declare const button: {
         background: string;
         color: (theme: Record<symbol, unknown>) => string;
         border: (theme: Record<symbol, unknown>) => string;
-        '&:hover': {
+        '&:hover, &.hover': {
             background: (theme: Record<symbol, unknown>) => string;
         };
-        '&:active': {
+        '&:active, &.active': {
             color: (theme: Record<symbol, unknown>) => string;
             background: (theme: Record<symbol, unknown>) => string;
         };
-        '&:disabled': {
+        '&:disabled, &.disabled': {
             background: string;
             borderColor: (theme: Record<symbol, unknown>) => string;
         };
@@ -118,19 +116,19 @@ export declare const button: {
     text: {
         background: string;
         color: (theme: Record<symbol, unknown>) => string;
-        '&:hover': {
+        '&:hover, &.hover': {
             color: (theme: Record<symbol, unknown>) => string;
         };
-        '&:active': {
+        '&:active, &.active': {
             color: (theme: Record<symbol, unknown>) => string;
         };
     };
     inherit: {
         fontWeight: string;
-        '&:hover': {};
-        '&:not(:disabled):active': {
+        '&:not(:disabled):active, &.active': {
             transform: string;
         };
-        '&:disabled': {};
+        '&:hover, &.hover': {};
+        '&:disabled, &.disabled': {};
     };
 };

package/tokens/button.js

@@ -1,37 +1,37 @@
 import { borders as t } from "./borders.js";
-import { getFocusStyles as c } from "./utils.js";
-import { get as e } from "../utils/helpers.js";
+import { getFocusStyles as a } from "./utils.js";
+import { get as o } from "../utils/helpers.js";
 const d = {
   default: {
     border: 0,
     outline: 0,
-    fontWeight: (o) => e(o, "font.weight.medium", "theme.font.weight.medium"),
-    padding: (o) => {
-      const r = e(o, "spacing.sm", "theme.spacing.sm"), l = e(o, "spacing.md", "theme.spacing.md");
+    fontWeight: (e) => o(e, "font.weight.medium", "theme.font.weight.medium"),
+    padding: (e) => {
+      const r = o(e, "spacing.sm", "theme.spacing.sm"), l = o(e, "spacing.md", "theme.spacing.md");
       return r && l ? `${r} ${l}` : "theme.spacing.sm theme.spacing.lg";
     },
     display: "flex",
     alignItems: "center",
-    gap: (o) => e(o, "spacing.sm", "theme.spacing.sm"),
-    transition: (o) => e(o, "values.transitions.button.default", "theme.values.transitions.button.default"),
+    gap: (e) => o(e, "spacing.sm", "theme.spacing.sm"),
+    transition: (e) => o(e, "values.transitions.button.default", "theme.values.transitions.button.default"),
     cursor: "pointer",
-    "&:focus-visible": (o) => c({
+    "&:focus-visible": (e) => a({
       inset: "-4px",
       border: t.generic({
         width: "2px",
-        color: e(o, "colors.border.focus", "theme.colors.border.focus")
+        color: o(e, "colors.border.focus", "theme.colors.border.focus")
       })
     }),
     "&:disabled, &:disabled *": {
       cursor: "default",
-      color: (o) => e(o, "colors.text.disabled", "theme.colors.text.disabled")
+      color: (e) => o(e, "colors.text.disabled", "theme.colors.text.disabled")
     }
   },
   attrs: {
     rounded: "none"
   },
   icon: {
-    padding: (o) => e(o, "spacing.sm", "theme.spacing.sm"),
+    padding: (e) => o(e, "spacing.sm", "theme.spacing.sm"),
     "& span": {
       display: "flex",
       justifyContent: "center",
@@ -57,84 +57,82 @@ const d = {
     default: {}
   },
   primary: {
-    color: (o) => e(o, "colors.text.black", "theme.colors.text.black"),
-    background: (o) => e(o, "colors.bg.fill.primary", "theme.colors.bg.fill.primary"),
-    "&:hover": {
-      background: (o) => e(o, "colors.bg.fill.secondary", "theme.colors.bg.fill.secondary")
+    color: (e) => o(e, "colors.text.black", "theme.colors.text.black"),
+    background: (e) => o(e, "colors.bg.fill.primary", "theme.colors.bg.fill.primary"),
+    "&:hover, &.hover": {
+      background: (e) => o(e, "colors.bg.fill.secondary", "theme.colors.bg.fill.secondary")
     },
-    "&:active": {
-      background: (o) => e(o, "colors.bg.fill.warning.primary.default", e(o, "colors.bg.fill.warning.primary.default", "theme.colors.bg.fill.warning.primary.default"))
+    "&:active, &.active": {
+      background: (e) => o(e, "colors.bg.fill.warning.primary.default", o(e, "colors.bg.fill.warning.primary.default", "theme.colors.bg.fill.warning.primary.default"))
     },
-    "&:disabled": {
-      background: (o) => e(o, "colors.bg.fill.disabled", "theme.colors.bg.fill.disabled")
+    "&:disabled, &.disabled": {
+      background: (e) => o(e, "colors.bg.fill.disabled", "theme.colors.bg.fill.disabled")
     }
   },
   secondary: {
-    color: (o) => e(o, "colors.text.default", "theme.colors.text.default"),
-    background: (o) => e(o, "colors.bg.fill.hover", "theme.colors.bg.fill.hover"),
-    "&:hover": {
-      background: (o) => e(o, "colors.bg.fill.primary", "theme.colors.bg.fill.primary"),
-      color: (o) => e(o, "colors.text.black", "theme.colors.text.black")
+    color: (e) => o(e, "colors.text.default", "theme.colors.text.default"),
+    background: (e) => o(e, "colors.bg.fill.hover", "theme.colors.bg.fill.hover"),
+    "&:hover, &.hover": {
+      background: (e) => o(e, "colors.bg.fill.primary", "theme.colors.bg.fill.primary"),
+      color: (e) => o(e, "colors.text.black", "theme.colors.text.black")
     },
-    "&:active": {
-      color: (o) => e(o, "colors.text.black", "theme.colors.text.black"),
-      background: (o) => e(o, "colors.bg.fill.secondary", "theme.colors.bg.fill.secondary")
+    "&:active, &.active": {
+      color: (e) => o(e, "colors.text.black", "theme.colors.text.black"),
+      background: (e) => o(e, "colors.bg.fill.secondary", "theme.colors.bg.fill.secondary")
     },
-    "&:disabled": {
-      background: (o) => e(o, "colors.bg.fill.disabled", "theme.colors.bg.fill.disabled")
+    "&:disabled, &.disabled": {
+      background: (e) => o(e, "colors.bg.fill.disabled", "theme.colors.bg.fill.disabled")
     }
   },
   tertiary: {
     background: "transparent",
-    color: (o) => e(o, "colors.text.default", "theme.colors.text.default"),
-    "&:hover": {
-      color: (o) => e(o, "colors.text.black", "theme.colors.text.black"),
-      background: (o) => e(o, "colors.bg.fill.hover", "theme.colors.bg.fill.hover")
+    color: (e) => o(e, "colors.text.default", "theme.colors.text.default"),
+    "&:hover, &.hover": {
+      background: (e) => o(e, "colors.bg.fill.hover", "theme.colors.bg.fill.hover")
     },
-    "&:active": {
-      color: (o) => e(o, "colors.text.black", "theme.colors.text.black"),
-      background: (o) => e(o, "colors.bg.fill.primary", "theme.colors.bg.fill.primary")
+    "&:active, &.active": {
+      background: (e) => o(e, "colors.bg.fill.primary", "theme.colors.bg.fill.primary")
     },
-    "&:disabled": {
+    "&:disabled, &.disabled": {
       background: "transparent"
     }
   },
   outlined: {
     background: "transparent",
-    color: (o) => e(o, "colors.text.default", "theme.colors.text.default"),
-    border: (o) => t.generic({
-      width: e(o, "values.borderThin", "theme.values.borderThin"),
-      color: e(o, "colors.border.black", "theme.colors.border.black")
+    color: (e) => o(e, "colors.text.default", "theme.colors.text.default"),
+    border: (e) => t.generic({
+      width: o(e, "values.borderThin", "theme.values.borderThin"),
+      color: o(e, "colors.border.black", "theme.colors.border.black")
     }),
-    "&:hover": {
-      background: (o) => e(o, "colors.bg.fill.hover", "theme.colors.bg.fill.hover")
+    "&:hover, &.hover": {
+      background: (e) => o(e, "colors.bg.fill.hover", "theme.colors.bg.fill.hover")
     },
-    "&:active": {
-      color: (o) => e(o, "colors.text.black", "theme.colors.text.black"),
-      background: (o) => e(o, "colors.bg.fill.primary", "theme.colors.bg.fill.primary")
+    "&:active, &.active": {
+      color: (e) => o(e, "colors.text.black", "theme.colors.text.black"),
+      background: (e) => o(e, "colors.bg.fill.primary", "theme.colors.bg.fill.primary")
     },
-    "&:disabled": {
+    "&:disabled, &.disabled": {
       background: "transparent",
-      borderColor: (o) => e(o, "colors.border.disabled", "theme.colors.border.disabled")
+      borderColor: (e) => o(e, "colors.border.disabled", "theme.colors.border.disabled")
     }
   },
   text: {
     background: "transparent",
-    color: (o) => e(o, "colors.text.default", "theme.colors.text.default"),
-    "&:hover": {
-      color: (o) => e(o, "colors.text.primary", "theme.colors.text.primary")
+    color: (e) => o(e, "colors.text.default", "theme.colors.text.default"),
+    "&:hover, &.hover": {
+      color: (e) => o(e, "colors.text.primary", "theme.colors.text.primary")
     },
-    "&:active": {
-      color: (o) => e(o, "colors.text.secondary", "theme.colors.text.secondary")
+    "&:active, &.active": {
+      color: (e) => o(e, "colors.text.secondary", "theme.colors.text.secondary")
     }
   },
   inherit: {
     fontWeight: "inherit",
-    "&:hover": {},
-    "&:not(:disabled):active": {
+    "&:not(:disabled):active, &.active": {
       transform: "none"
     },
-    "&:disabled": {}
+    "&:hover, &.hover": {},
+    "&:disabled, &.disabled": {}
   }
 };
 export {

package/tokens/card.d.ts

@@ -1,4 +1,3 @@
-import { FlexDirection } from '../types';
 /**
  * Card component tokens
  * Base styles (display flex, focus-visible) are now handled by the Box component
@@ -48,7 +47,7 @@ export declare const card: {
             };
             sm: (theme: Record<symbol, unknown>) => {
                 color: string;
-                flexDirection: FlexDirection;
+                flexDirection: string;
                 fontSize: string;
                 fontWeight: string;
                 lineHeight: string;
@@ -63,7 +62,7 @@ export declare const card: {
             };
             sm: (theme: Record<symbol, unknown>) => {
                 color: string;
-                flexDirection: FlexDirection;
+                flexDirection: string;
                 fontSize: string;
                 fontWeight: string;
                 lineHeight: string;