@donotdev/components 0.0.3 → 0.0.4

package/dist/atomic/CallToAction/index.d.ts

@@ -59,6 +59,11 @@ interface CallToActionOwnProps {
      * @default 'center'
      */
     align?: 'start' | 'center' | 'end';
+    /**
+     * Tone system for background colors (matches Section component)
+     * @default 'base'
+     */
+    tone?: 'base' | 'muted' | 'elevated' | 'contrast' | 'accent';
     /** Additional children (for custom content) */
     children?: ReactNode;
 }

package/dist/atomic/CallToAction/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/CallToAction/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,oBAAoB,CAAC;AAE5B;;GAEG;AACH,UAAU,oBAAoB;IAC5B;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC;IAEjC,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,qEAAqE;IACrE,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B,uEAAuE;IACvE,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAEnC,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,WAAW,GAAG,SAAS,IAC7D,oBAAoB,GAClB,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,oBAAoB,CAAC,CAAC;AAE/D,QAAA,MAAM,YAAY,mIAiDjB,CAAC;AAIF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/CallToAction/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,oBAAoB,CAAC;AAE5B;;GAEG;AACH,UAAU,oBAAoB;IAC5B;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC;IAEjC,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,qEAAqE;IACrE,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B,uEAAuE;IACvE,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAEnC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;IAE7D,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,WAAW,GAAG,SAAS,IAC7D,oBAAoB,GAClB,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,oBAAoB,CAAC,CAAC;AAE/D,QAAA,MAAM,YAAY,mIA+CjB,CAAC;AAIF,eAAe,YAAY,CAAC"}

package/dist/atomic/CallToAction/index.js

@@ -38,14 +38,15 @@ import { createElement, forwardRef, } from 'react';
 import { cn } from '../../utils/helpers';
 import Text, { TEXT_VARIANT } from '../Text';
 import './CallToAction.css';
-const CallToAction = forwardRef(function CallToAction({ as = 'section', title, subtitle, primaryAction, secondaryAction, align = 'center', children, className, ...props }, ref) {
+const CallToAction = forwardRef(function CallToAction({ as = 'section', title, subtitle, primaryAction, secondaryAction, align = 'center', tone = 'base', children, className, ...props }, ref) {
     const Component = as;
     return createElement(Component, {
         ref,
         'aria-label': props['aria-label'] || 'Call to Action',
         className: cn('dndev-cta', className),
+        'data-tone': tone,
         ...props,
-    }, _jsxs("div", { className: "dndev-cta-content", "data-text-align": align, children: [title && (_jsx("h2", { className: "dndev-text-base", "data-level": "h2", children: title })), subtitle && (_jsx(Text, { as: "p", variant: TEXT_VARIANT.MUTED, level: "h3", children: subtitle })), (primaryAction || secondaryAction) && (_jsxs("div", { className: "dndev-cta-actions", children: [primaryAction, secondaryAction] })), children] }));
+    }, _jsxs("div", { className: "dndev-cta-content", "data-text-align": align, children: [title && (_jsx(Text, { as: "h2", style: { fontSize: 'var(--font-size-2xl)' }, children: title })), subtitle && _jsx(Text, { as: "h4", children: subtitle }), (primaryAction || secondaryAction) && (_jsxs("div", { className: "dndev-cta-actions", children: [primaryAction, secondaryAction] })), children] }));
 });
 CallToAction.displayName = 'CallToAction';
 export default CallToAction;

package/dist/atomic/Card/index.d.ts

@@ -10,6 +10,51 @@ import { type VariantProps } from 'class-variance-authority';
 import { surfaceVariants } from '../../utils/variants';
 import type { IconType } from '../../types';
 import type { HTMLAttributes, ReactNode, Ref } from 'react';
+/**
+ * Unified content type for all card components.
+ * - `string` → renders as Text
+ * - `string[]` → renders as List (consumer controls icons via List directly)
+ * - `ReactNode` → passthrough (full control)
+ */
+export type CardContent = string | string[] | ReactNode;
+/**
+ * Converts CardContent to ReactNode.
+ * Use this when rendering CardContent outside of Card component.
+ *
+ * @param content - CardContent to convert
+ * @returns ReactNode ready for rendering
+ *
+ * @example
+ * ```tsx
+ * import { renderCardContent, type CardContent } from '@donotdev/components';
+ *
+ * const MyComponent = ({ content }: { content: CardContent }) => (
+ *   <div>{renderCardContent(content)}</div>
+ * );
+ * ```
+ */
+export declare function renderCardContent(content: CardContent | undefined): ReactNode;
+/**
+ * Renders card header with icon, title, and subtitle.
+ * Groups icon+title+subtitle with no gap (trusts lineHeight).
+ *
+ * @param icon - Optional icon to display inline with title
+ * @param title - Optional title (string or ReactNode for Trans)
+ * @param subtitle - Optional subtitle (string or ReactNode for Trans)
+ * @returns ReactNode ready for rendering
+ *
+ * @example
+ * ```tsx
+ * import { renderCardHeader } from '@donotdev/components';
+ *
+ * // Plain string
+ * const header = renderCardHeader(Zap, 'Lightning Fast', 'Build in minutes');
+ *
+ * // With Trans for rich text
+ * const richHeader = renderCardHeader(Zap, <Trans ns="home" i18nKey="title" />);
+ * ```
+ */
+export declare function renderCardHeader(icon?: IconType, title?: string | ReactNode, subtitle?: string | ReactNode): ReactNode;
 /**
  * Card variant constants - re-exported from shared SURFACE_VARIANT
  * Matches .dndev-surface CSS class
@@ -36,20 +81,31 @@ export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
      * @default false
      */
     asChild?: boolean;
-    /** Optional icon to display next to the title */
+    /** Optional icon to display inline with title */
     icon?: IconType;
-    /** Main title of the card */
+    /** Main title (string or ReactNode for Trans rich text) */
     title?: string | ReactNode;
-    /** Subtitle displayed below the title */
+    /** Subtitle displayed below the title (string or ReactNode for Trans) */
     subtitle?: string | ReactNode;
-    /** Main content of the card */
-    content?: string | ReactNode;
+    /**
+     * Main content - string, string[], or ReactNode.
+     * - string → renders as Text
+     * - string[] → renders as List
+     * - ReactNode → passthrough
+     */
+    content?: CardContent;
     /** Footer content */
     footer?: ReactNode;
     /** Tooltip text */
     tooltip?: string;
     /** Click handler */
     onClick?: () => void;
+    /**
+     * Whether the card is clickable (enables hover styles).
+     * Set to true when wrapped in Link or when onClick is provided.
+     * @default false (auto-detected from onClick)
+     */
+    clickable?: boolean;
     /**
      * Whether the card has elevation/shadow.
      * @default false
@@ -77,6 +133,6 @@ export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
  * @param {CardProps} props - The props for the card
  * @returns {JSX.Element} The rendered card
  */
-declare const Card: ({ className, variant, asChild, icon, title, subtitle, content, footer, children, tooltip, onClick, elevated, style, ref, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
+declare const Card: ({ className, variant, asChild, icon, title, subtitle, content, footer, children, tooltip, onClick, clickable, elevated, style, ref, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
 export default Card;
 //# sourceMappingURL=index.d.ts.map

package/dist/atomic/Card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Card/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAI7D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAKvD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5D;;;GAGG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;CAAkB,CAAC;AAE5C;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC,SAAS,CAAC,CAAC;AAE1E,MAAM,WAAW,SACf,SACE,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC,EACzD,YAAY,CAAC,OAAO,eAAe,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iDAAiD;IACjD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,qBAAqB;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,IAAI,GAAI,qIAgBX,SAAS,4CAgEX,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Card/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAI7D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAOvD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5D;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC;AAExD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,WAAW,GAAG,SAAS,GAAG,SAAS,CAyB7E;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,gBAAgB,CAC9B,IAAI,CAAC,EAAE,QAAQ,EACf,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,EAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,GAC5B,SAAS,CA0BX;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;CAAkB,CAAC;AAE5C;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC,SAAS,CAAC,CAAC;AAE1E,MAAM,WAAW,SACf,SACE,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC,EACzD,YAAY,CAAC,OAAO,eAAe,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iDAAiD;IACjD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,qBAAqB;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,IAAI,GAAI,gJAiBX,SAAS,4CA0CX,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/atomic/Card/index.js

@@ -12,9 +12,66 @@ import {} from 'class-variance-authority';
 import { SURFACE_VARIANT } from '../../utils/constants';
 import { cn, getVariantDataAttrs } from '../../utils/helpers';
 import { surfaceVariants } from '../../utils/variants';
-import IconBox from '../Icons/IconBox';
+import Icon from '../Icons/Icon';
+import List from '../List';
 import Slot from '../Slot';
 import Stack from '../Stack';
+import Text from '../Text';
+/**
+ * Converts CardContent to ReactNode.
+ * Use this when rendering CardContent outside of Card component.
+ *
+ * @param content - CardContent to convert
+ * @returns ReactNode ready for rendering
+ *
+ * @example
+ * ```tsx
+ * import { renderCardContent, type CardContent } from '@donotdev/components';
+ *
+ * const MyComponent = ({ content }: { content: CardContent }) => (
+ *   <div>{renderCardContent(content)}</div>
+ * );
+ * ```
+ */
+export function renderCardContent(content) {
+    if (!content)
+        return null;
+    if (typeof content === 'string') {
+        return (_jsx(Text, { as: "p", level: "small", children: content }));
+    }
+    if (Array.isArray(content)) {
+        if (content.length === 1 && typeof content[0] === 'string') {
+            return (_jsx(Text, { as: "p", level: "small", children: content[0] }));
+        }
+        return (_jsx(List, { items: content, style: { listStyle: 'none', paddingInlineStart: 0 } }));
+    }
+    return content;
+}
+/**
+ * Renders card header with icon, title, and subtitle.
+ * Groups icon+title+subtitle with no gap (trusts lineHeight).
+ *
+ * @param icon - Optional icon to display inline with title
+ * @param title - Optional title (string or ReactNode for Trans)
+ * @param subtitle - Optional subtitle (string or ReactNode for Trans)
+ * @returns ReactNode ready for rendering
+ *
+ * @example
+ * ```tsx
+ * import { renderCardHeader } from '@donotdev/components';
+ *
+ * // Plain string
+ * const header = renderCardHeader(Zap, 'Lightning Fast', 'Build in minutes');
+ *
+ * // With Trans for rich text
+ * const richHeader = renderCardHeader(Zap, <Trans ns="home" i18nKey="title" />);
+ * ```
+ */
+export function renderCardHeader(icon, title, subtitle) {
+    if (!icon && !title && !subtitle)
+        return null;
+    return (_jsxs("div", { className: "dndev-card-header", children: [icon && title ? (_jsxs(Stack, { direction: "row", align: "center", gap: "tight", children: [_jsx(Icon, { icon: icon, ariaHidden: true }), _jsx(Text, { as: "h3", className: "dndev-card-title", children: title })] })) : title ? (_jsx(Text, { as: "h3", className: "dndev-card-title", children: title })) : icon ? (_jsx(Icon, { icon: icon, ariaHidden: true })) : null, subtitle && (_jsx(Text, { as: "h4", className: "dndev-card-subtitle", children: subtitle }))] }));
+}
 /**
  * Card variant constants - re-exported from shared SURFACE_VARIANT
  * Matches .dndev-surface CSS class
@@ -39,36 +96,25 @@ export const CARD_VARIANT = SURFACE_VARIANT;
  * @param {CardProps} props - The props for the card
  * @returns {JSX.Element} The rendered card
  */
-const Card = ({ className, variant, asChild = false, icon, title, subtitle, content, footer, children, tooltip, onClick, elevated, style, ref, ...props }) => {
+const Card = ({ className, variant, asChild = false, icon, title, subtitle, content, footer, children, tooltip, onClick, clickable, elevated, style, ref, ...props }) => {
     const Comp = asChild ? Slot : 'div';
     const variantAttrs = getVariantDataAttrs({ variant });
+    const isClickable = clickable !== undefined ? clickable : !!onClick;
     const cardAttrs = {
         ...variantAttrs,
         'data-role': 'card',
         ...(elevated !== undefined && {
             'data-elevated': elevated ? 'true' : 'false',
         }),
-        ...(onClick && { 'data-clickable': 'true' }),
-    };
-    const hasContent = content || children;
-    const getGridTemplateRows = () => {
-        const rows = [];
-        if (title || icon)
-            rows.push('auto');
-        if (subtitle)
-            rows.push('auto');
-        if (hasContent)
-            rows.push('1fr');
-        if (footer)
-            rows.push('auto');
-        return rows.join(' ') || '1fr';
+        ...(isClickable && { 'data-clickable': 'true' }),
     };
-    // Auto-merge icon + title when both provided (only for string titles)
-    const titleContent = icon && title && typeof title === 'string' ? (_jsxs(Stack, { direction: "row", align: "center", gap: "medium", children: [_jsx(IconBox, { icon: icon }), _jsx("span", { children: title })] })) : (title);
+    const header = renderCardHeader(icon, title, subtitle);
+    const contentNode = renderCardContent(content);
+    const hasContent = contentNode || children;
     return (_jsxs(Comp, { ref: ref, className: cn('dndev-card', surfaceVariants({ variant }), className), style: {
-            gridTemplateRows: getGridTemplateRows(),
             width: '100%',
+            height: '100%',
             ...style,
-        }, ...cardAttrs, onClick: onClick, title: tooltip, ...props, children: [titleContent && _jsx("div", { className: "dndev-card-title", children: titleContent }), subtitle && (_jsx(Stack, { direction: "row", align: "center", className: "dndev-card-subtitle", children: subtitle })), hasContent && (_jsxs(Stack, { gap: "medium", children: [content, children] })), footer && _jsx("div", { children: footer })] }));
+        }, ...cardAttrs, onClick: onClick, title: tooltip, ...props, children: [header, hasContent && (_jsxs("div", { children: [contentNode, children] })), footer && _jsx("div", { children: footer })] }));
 };
 export default Card;

package/dist/atomic/DualCard/index.d.ts

@@ -1,7 +1,8 @@
 import type { ReactNode, HTMLAttributes } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 import { surfaceVariants } from '../../utils/variants';
-import { type GapVariant } from '../List';
+import type { CardContent } from '../Card';
+import type { IconType } from '../../types';
 import './DualCard.css';
 export type DualCardVariant = VariantProps<typeof surfaceVariants>['variant'];
 export interface DualCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'content'>, VariantProps<typeof surfaceVariants> {
@@ -12,37 +13,32 @@ export interface DualCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
     elevated?: boolean;
     /** Click handler */
     onClick?: () => void;
+    /** Left side icon */
+    leftIcon?: IconType;
     /** Left side title */
-    leftTitle?: string | ReactNode;
+    leftTitle?: string;
     /** Left side subtitle */
-    leftSubtitle?: string | ReactNode;
-    /** Left side content - same as FeatureCard: string, array, or ReactNode */
-    leftContent?: string | (string | ReactNode)[] | ReactNode;
+    leftSubtitle?: string;
+    /**
+     * Left side content - string, string[], or ReactNode.
+     * For lists with icons, pass `<List icon={...} items={...} />` directly.
+     */
+    leftContent?: CardContent;
     /** Left side CTA (button, link, etc.) */
     leftCTA?: ReactNode;
+    /** Right side icon */
+    rightIcon?: IconType;
     /** Right side title */
-    rightTitle?: string | ReactNode;
+    rightTitle?: string;
     /** Right side subtitle */
-    rightSubtitle?: string | ReactNode;
-    /** Right side content - same as FeatureCard: string, array, or ReactNode */
-    rightContent?: string | (string | ReactNode)[] | ReactNode;
-    /** Right side CTA (button, link, etc.) */
-    rightCTA?: ReactNode;
-    /**
-     * List density for content rendering (page-level preset)
-     * @default 'default'
-     */
-    listDensity?: 'dense' | 'narrow' | 'default' | 'expressive';
+    rightSubtitle?: string;
     /**
-     * Gap between list items (component-level override)
-     * @default 'none'
+     * Right side content - string, string[], or ReactNode.
+     * For lists with icons, pass `<List icon={...} items={...} />` directly.
      */
-    listGap?: GapVariant;
-    /**
-     * Whether to show bullets in list
-     * @default false
-     */
-    showBullets?: boolean;
+    rightContent?: CardContent;
+    /** Right side CTA (button, link, etc.) */
+    rightCTA?: ReactNode;
 }
 /**
  * DualCard - Two-column card with vertical separator

package/dist/atomic/DualCard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/DualCard/index.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAI7D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAIvD,OAAa,EAAE,KAAK,UAAU,EAAiB,MAAM,SAAS,CAAC;AAI/D,OAAO,gBAAgB,CAAC;AAExB,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC,SAAS,CAAC,CAAC;AAE9E,MAAM,WAAW,aACf,SACE,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC,EACzD,YAAY,CAAC,OAAO,eAAe,CAAC;IACtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sBAAsB;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,yBAAyB;IACzB,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC;IAC1D,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,uBAAuB;IACvB,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,0BAA0B;IAC1B,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC;IAC3D,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,YAAY,CAAC;IAC5D;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,QAAQ,0GAoKb,CAAC;AAIF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/DualCard/index.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAI7D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAKvD,OAAO,KAAK,EAAe,WAAW,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,gBAAgB,CAAC;AAExB,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC,SAAS,CAAC,CAAC;AAE9E,MAAM,WAAW,aACf,SACE,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC,EACzD,YAAY,CAAC,OAAO,eAAe,CAAC;IACtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,sBAAsB;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sBAAsB;IACtB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,uBAAuB;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0BAA0B;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,QAAQ,0GA4Eb,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/dist/atomic/DualCard/index.js

@@ -15,9 +15,7 @@ import { cn, getVariantDataAttrs } from '../../utils/helpers';
 import { surfaceVariants } from '../../utils/variants';
 import Stack from '../Stack';
 import Separator, { SEPARATOR_VARIANT } from '../Separator';
-import Text from '../Text';
-import List, {} from '../List';
-import { Check } from 'lucide-react';
+import { renderCardContent, renderCardHeader } from '../Card';
 import './DualCard.css';
 /**
  * DualCard - Two-column card with vertical separator
@@ -42,49 +40,13 @@ import './DualCard.css';
  * />
  * ```
  */
-const DualCard = forwardRef(({ className, variant, elevated, onClick, leftTitle, leftSubtitle, leftContent, leftCTA, rightTitle, rightSubtitle, rightContent, rightCTA, style, listDensity = 'default', listGap = 'none', showBullets = false, ...props }, ref) => {
+const DualCard = forwardRef(({ className, variant, elevated, onClick, leftIcon, leftTitle, leftSubtitle, leftContent, leftCTA, rightIcon, rightTitle, rightSubtitle, rightContent, rightCTA, style, ...props }, ref) => {
     const variantAttrs = getVariantDataAttrs({ variant });
-    // Convert content to ReactNode (same logic as FeatureCard)
-    // Uses List component for arrays, strips manual bullet characters
-    const convertContent = (content) => {
-        if (!content)
-            return null;
-        if (typeof content === 'string') {
-            return (_jsx(Text, { as: "p", level: "body", children: content }));
-        }
-        if (Array.isArray(content)) {
-            // Strip manual bullet characters (•) if present
-            const cleanContent = content.map((item) => {
-                if (typeof item === 'string') {
-                    return item.replace(/^[\s•\-\*]+/, '').trim();
-                }
-                return item;
-            });
-            // If single string item, render as plain text (not a list)
-            // If multiple items or contains ReactNodes, use List component
-            if (cleanContent.length === 1 && typeof cleanContent[0] === 'string') {
-                return (_jsx(Text, { as: "p", level: "body", children: cleanContent[0] }));
-            }
-            // Convert to ListItem objects with checkmark icons when showBullets is true
-            const listItems = showBullets
-                ? cleanContent.map((item) => {
-                    if (typeof item === 'string') {
-                        return {
-                            icon: _jsx(Check, { size: 16 }),
-                            content: item,
-                        };
-                    }
-                    // If already a ListItem or ReactNode, keep as is
-                    return item;
-                })
-                : cleanContent;
-            return (_jsx(List, { items: listItems, density: listDensity, gap: listGap, style: { listStyle: 'none' } }));
-        }
-        return content;
-    };
-    const leftContentNode = convertContent(leftContent);
-    const rightContentNode = convertContent(rightContent);
-    return (_jsx("div", { ref: ref, className: cn('dndev-dual-card', surfaceVariants({ variant }), className), "data-role": "card", "data-elevated": elevated !== undefined ? (elevated ? 'true' : 'false') : undefined, "data-clickable": onClick ? 'true' : undefined, onClick: onClick, style: style, ...variantAttrs, ...props, children: _jsxs("div", { className: "dndev-dual-card-container", children: [_jsxs("div", { className: "dndev-dual-card-left", children: [leftTitle && (_jsx(Text, { as: "h3", level: "h3", className: "dndev-dual-card-title", children: leftTitle })), leftSubtitle && (_jsx(Text, { as: "p", level: "body", variant: "muted", className: "dndev-dual-card-subtitle", children: leftSubtitle })), leftContentNode && (_jsx("div", { className: "dndev-dual-card-content", children: leftContentNode })), leftCTA && _jsx("div", { className: "dndev-dual-card-cta", children: leftCTA })] }), _jsx(Separator, { orientation: "vertical", variant: SEPARATOR_VARIANT.ACCENT, className: "dndev-dual-card-separator" }), _jsxs("div", { className: "dndev-dual-card-right", children: [rightTitle && (_jsx(Text, { as: "h3", level: "h3", className: "dndev-dual-card-title", children: rightTitle })), rightSubtitle && (_jsx(Text, { as: "p", level: "body", variant: "muted", className: "dndev-dual-card-subtitle", children: rightSubtitle })), rightContentNode && (_jsx("div", { className: "dndev-dual-card-content", children: rightContentNode })), rightCTA && _jsx("div", { className: "dndev-dual-card-cta", children: rightCTA })] })] }) }));
+    const leftHeader = renderCardHeader(leftIcon, leftTitle, leftSubtitle);
+    const leftContentNode = renderCardContent(leftContent);
+    const rightHeader = renderCardHeader(rightIcon, rightTitle, rightSubtitle);
+    const rightContentNode = renderCardContent(rightContent);
+    return (_jsx("div", { ref: ref, className: cn('dndev-dual-card', surfaceVariants({ variant }), className), "data-role": "card", "data-elevated": elevated !== undefined ? (elevated ? 'true' : 'false') : undefined, "data-clickable": onClick ? 'true' : undefined, onClick: onClick, style: style, ...variantAttrs, ...props, children: _jsxs("div", { className: "dndev-dual-card-container", children: [_jsxs("div", { className: "dndev-dual-card-left", children: [leftHeader, leftContentNode && (_jsx("div", { className: "dndev-dual-card-content", children: leftContentNode })), leftCTA && _jsx("div", { className: "dndev-dual-card-cta", children: leftCTA })] }), _jsx(Separator, { orientation: "vertical", variant: SEPARATOR_VARIANT.ACCENT, className: "dndev-dual-card-separator" }), _jsxs("div", { className: "dndev-dual-card-right", children: [rightHeader, rightContentNode && (_jsx("div", { className: "dndev-dual-card-content", children: rightContentNode })), rightCTA && _jsx("div", { className: "dndev-dual-card-cta", children: rightCTA })] })] }) }));
 });
 DualCard.displayName = 'DualCard';
 export default DualCard;

package/dist/atomic/Grid/index.d.ts

@@ -1,37 +1,43 @@
 /**
  * @fileoverview Grid component
- * @description Polymorphic CSS Grid layout primitive.
- * Replaces redundant `div className="dndev-grid ..."` usage.
+ * @description Polymorphic CSS Grid layout primitive with responsive columns.
  *
  * @example
  * ```tsx
- * // Simple 3-column grid (default div)
+ * // Fixed 3-column grid
  * <Grid cols={3} gap="medium">
  *   <Card />
  *   <Card />
  *   <Card />
  * </Grid>
  *
- * // Semantic section with grid layout
- * <Grid as="section" cols={2} aria-label="Features">
- *   <FeatureCard />
- *   <FeatureCard />
+ * // Responsive grid: [mobile, tablet, laptop, desktop]
+ * // 1 col on mobile/tablet, 2 on laptop, 3 on desktop
+ * <Grid cols={[1, 1, 2, 3]} gap="medium">
+ *   <Card />
+ *   <Card />
+ *   <Card />
  * </Grid>
  *
  * // Named grid areas
- * <Grid as="header" areas="left center right" templateColumns="1fr auto 1fr">
- *   <GridArea name="left">{leftContent}</GridArea>
- *   <GridArea name="center">{centerContent}</GridArea>
- *   <GridArea name="right">{rightContent}</GridArea>
+ * <Grid areas="left center right" templateColumns="1fr auto 1fr">
+ *   <GridArea name="left">{left}</GridArea>
+ *   <GridArea name="center">{center}</GridArea>
+ *   <GridArea name="right">{right}</GridArea>
  * </Grid>
  * ```
  *
- * @version 0.0.1
+ * @version 0.0.4
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
 import { type ElementType, type ComponentPropsWithRef, type ReactNode } from 'react';
 import './Grid.css';
+/**
+ * Responsive columns array: [mobile, tablet, laptop, desktop]
+ * @example [1, 1, 2, 3] - 1 col on mobile/tablet, 2 on laptop, 3 on desktop
+ */
+export type ResponsiveCols = [number, number, number, number];
 /**
  * Grid-specific props (layout directives)
  */
@@ -43,29 +49,15 @@ interface GridOwnProps {
      */
     as?: ElementType;
     /**
-     * Number of columns
+     * Number of columns - fixed or responsive
+     * - number: fixed columns (same on all breakpoints)
+     * - [mobile, tablet, laptop, desktop]: responsive columns per breakpoint
      * @default 1
+     * @example 3 - always 3 columns
+     * @example [1, 1, 2, 3] - 1 col mobile/tablet, 2 laptop, 3 desktop
+     * @example [1, 2, 3, 3] - 1 mobile, 2 tablet, 3 laptop/desktop
      */
-    cols?: number;
-    /**
-     * Minimum column width for all layouts
-     * Controls when columns wrap automatically - CSS Grid wraps when container < (cols × minColWidth)
-     * @example "250px", "20rem", "280px"
-     * @default undefined (0px - allows columns to shrink to content size)
-     */
-    minColWidth?: string;
-    /**
-     * Use auto-fit instead of fixed column count
-     * Automatically fits as many columns as possible based on minColWidth
-     * @default false
-     */
-    autoFit?: boolean;
-    /**
-     * Use auto-fill instead of fixed column count
-     * Automatically fills available space with columns based on minColWidth
-     * @default false
-     */
-    autoFill?: boolean;
+    cols?: number | ResponsiveCols;
     /**
      * Spacing between items
      * @default 'medium'

package/dist/atomic/Grid/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Grid/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAIf,OAAO,YAAY,CAAC;AAEpB;;GAEG;AACH,UAAU,YAAY;IACpB;;;;OAIG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE5C;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAE/C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAEjD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,cAAc;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,YAAY,GACjE,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,YAAY,CAAC,CAAC;AAErD;;;;;GAKG;AACH,QAAA,MAAM,IAAI,uHAiET,CAAC;AAIF,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atomic/Grid/index.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAIf,OAAO,YAAY,CAAC;AAEpB;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAE9D;;GAEG;AACH,UAAU,YAAY;IACpB;;;;OAIG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;IAE/B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE5C;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAE/C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAEjD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,cAAc;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,YAAY,GACjE,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,YAAY,CAAC,CAAC;AAErD;;;;;GAKG;AACH,QAAA,MAAM,IAAI,uHA2DT,CAAC;AAIF,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,eAAe,IAAI,CAAC"}

package/dist/atomic/Grid/index.js

@@ -1,33 +1,34 @@
 // packages/components/src/atomic/Grid/index.tsx
 /**
  * @fileoverview Grid component
- * @description Polymorphic CSS Grid layout primitive.
- * Replaces redundant `div className="dndev-grid ..."` usage.
+ * @description Polymorphic CSS Grid layout primitive with responsive columns.
  *
  * @example
  * ```tsx
- * // Simple 3-column grid (default div)
+ * // Fixed 3-column grid
  * <Grid cols={3} gap="medium">
  *   <Card />
  *   <Card />
  *   <Card />
  * </Grid>
  *
- * // Semantic section with grid layout
- * <Grid as="section" cols={2} aria-label="Features">
- *   <FeatureCard />
- *   <FeatureCard />
+ * // Responsive grid: [mobile, tablet, laptop, desktop]
+ * // 1 col on mobile/tablet, 2 on laptop, 3 on desktop
+ * <Grid cols={[1, 1, 2, 3]} gap="medium">
+ *   <Card />
+ *   <Card />
+ *   <Card />
  * </Grid>
  *
  * // Named grid areas
- * <Grid as="header" areas="left center right" templateColumns="1fr auto 1fr">
- *   <GridArea name="left">{leftContent}</GridArea>
- *   <GridArea name="center">{centerContent}</GridArea>
- *   <GridArea name="right">{rightContent}</GridArea>
+ * <Grid areas="left center right" templateColumns="1fr auto 1fr">
+ *   <GridArea name="left">{left}</GridArea>
+ *   <GridArea name="center">{center}</GridArea>
+ *   <GridArea name="right">{right}</GridArea>
  * </Grid>
  * ```
  *
- * @version 0.0.1
+ * @version 0.0.4
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
@@ -41,24 +42,21 @@ import './Grid.css';
  * Polymorphic CSS Grid layout primitive.
  * Can render as any HTML element while maintaining grid layout.
  */
-const Grid = forwardRef(({ as = 'div', cols = 1, gap = GAP_VARIANT.MEDIUM, align = 'stretch', justify = 'stretch', minColWidth, autoFit = false, autoFill = false, areas, templateColumns, className, style, children, ...props }, ref) => {
+const Grid = forwardRef(({ as = 'div', cols = 1, gap = GAP_VARIANT.MEDIUM, align = 'stretch', justify = 'stretch', areas, templateColumns, className, style, children, ...props }, ref) => {
     const Component = as;
-    const getGridTemplateColumns = () => {
-        if (templateColumns)
-            return templateColumns;
-        if (areas)
-            return undefined; // Let CSS handle it if needed
-        if (autoFit) {
-            return `repeat(auto-fit, minmax(min(100%, ${minColWidth || '250px'}), 1fr))`;
-        }
-        if (autoFill) {
-            return `repeat(auto-fill, minmax(min(100%, ${minColWidth || '250px'}), 1fr))`;
-        }
-        return `repeat(${cols}, minmax(${minColWidth || '0'}, 1fr))`;
-    };
+    // Parse cols into responsive values
+    const isResponsive = Array.isArray(cols);
+    const [colsMobile, colsTablet, colsLaptop, colsDesktop] = isResponsive
+        ? cols
+        : [cols, cols, cols, cols];
     const customStyle = {
         display: 'grid',
         width: '100%',
+        // Set CSS custom properties for responsive columns
+        '--grid-cols-mobile': colsMobile,
+        '--grid-cols-tablet': colsTablet,
+        '--grid-cols-laptop': colsLaptop,
+        '--grid-cols-desktop': colsDesktop,
         ...style,
         ...(areas
             ? {
@@ -67,9 +65,7 @@ const Grid = forwardRef(({ as = 'div', cols = 1, gap = GAP_VARIANT.MEDIUM, align
                     : `"${areas}"`,
             }
             : {}),
-        ...(getGridTemplateColumns() && {
-            gridTemplateColumns: getGridTemplateColumns(),
-        }),
+        ...(templateColumns && { gridTemplateColumns: templateColumns }),
     };
     return createElement(Component, {
         ref,
@@ -77,6 +73,7 @@ const Grid = forwardRef(({ as = 'div', cols = 1, gap = GAP_VARIANT.MEDIUM, align
         'data-gap': gap,
         'data-align': align,
         'data-justify': justify,
+        'data-responsive': isResponsive ? 'true' : undefined,
         style: customStyle,
         ...props,
     }, children);