@fanvue/ui 3.19.1 → 3.20.0

package/dist/cjs/components/ButtonStack/ButtonStack.cjs

@@ -0,0 +1,44 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const ButtonStack = React__namespace.forwardRef(
+  ({ direction = "horizontal", className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn.cn(
+          "flex gap-2",
+          direction === "horizontal" && "flex-row [&>*]:min-w-0 [&>*]:flex-1",
+          direction === "vertical" && "flex-col [&>*]:w-full",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+ButtonStack.displayName = "ButtonStack";
+exports.ButtonStack = ButtonStack;
+//# sourceMappingURL=ButtonStack.cjs.map

package/dist/cjs/components/ButtonStack/ButtonStack.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonStack.cjs","sources":["../../../../src/components/ButtonStack/ButtonStack.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Layout orientation of the buttons within a {@link ButtonStack}. */\nexport type ButtonStackDirection = \"horizontal\" | \"vertical\";\n\nexport interface ButtonStackProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Layout orientation. `horizontal` places buttons side by side with equal\n   * widths for primary + secondary action pairs; `vertical` stacks them\n   * full-width for mobile screens and narrow panels.\n   * @default \"horizontal\"\n   */\n  direction?: ButtonStackDirection;\n  /** Buttons to arrange — typically two {@link Button} elements. */\n  children: React.ReactNode;\n}\n\n/**\n * A layout helper that arranges action buttons either side by side\n * (`horizontal`) or stacked (`vertical`). Compose it with {@link Button}\n * children rather than reimplementing button styles.\n *\n * In `horizontal` mode each child stretches to an equal width; in `vertical`\n * mode each child spans the full width of the container. Buttons keep their\n * own sizing, so pass a matching `size` to each child for consistent heights.\n *\n * @example\n * ```tsx\n * <ButtonStack direction=\"horizontal\">\n *   <Button variant=\"outline\">Cancel</Button>\n *   <Button variant=\"primary\">Confirm</Button>\n * </ButtonStack>\n * ```\n */\nexport const ButtonStack = React.forwardRef<HTMLDivElement, ButtonStackProps>(\n  ({ direction = \"horizontal\", className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex gap-2\",\n          direction === \"horizontal\" && \"flex-row [&>*]:min-w-0 [&>*]:flex-1\",\n          direction === \"vertical\" && \"flex-col [&>*]:w-full\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nButtonStack.displayName = \"ButtonStack\";\n"],"names":["React","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAmCO,MAAM,cAAcA,iBAAM;AAAA,EAC/B,CAAC,EAAE,YAAY,cAAc,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AACpE,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,cAAc,gBAAgB;AAAA,UAC9B,cAAc,cAAc;AAAA,UAC5B;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,YAAY,cAAc;;"}

package/dist/cjs/components/Card/Card.cjs

@@ -21,35 +21,62 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const VARIANT_CLASSES = {
+const CardContext = React__namespace.createContext({
+  hierarchy: "primary",
+  type: "default"
+});
+const useCardContext = () => React__namespace.useContext(CardContext);
+const LEGACY_VARIANT_CLASSES = {
   outlined: "border border-neutral-alphas-200 bg-surface-primary shadow-sm",
   elevated: "border border-neutral-alphas-200 bg-surface-primary shadow-md",
   filled: "bg-surface-secondary",
   ghost: "bg-transparent"
 };
+const HIERARCHY_CLASSES = {
+  primary: "rounded-lg border border-border-primary bg-surface-primary",
+  secondary: "rounded-md border border-border-strong bg-surface-secondary shadow-sm"
+};
+const INTERACTIVE_CLASSES = "isolate cursor-pointer after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:bg-content-primary after:opacity-0 after:transition-opacity after:content-[''] hover:after:opacity-5";
 const Card = React__namespace.forwardRef(
-  ({ className, variant = "outlined", fullWidth = true, noPadding = false, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+  ({
+    className,
+    hierarchy = "primary",
+    type = "default",
+    interactive = false,
+    variant,
+    fullWidth = true,
+    noPadding = false,
+    children,
+    ...props
+  }, ref) => {
+    const isLegacy = variant !== void 0;
+    const padding = noPadding ? void 0 : isLegacy ? "p-4" : hierarchy === "secondary" ? "p-4" : "p-6";
+    const contextValue = React__namespace.useMemo(
+      () => ({ hierarchy, type }),
+      [hierarchy, type]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(CardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         className: cn.cn(
-          "flex flex-col overflow-hidden rounded-md",
-          !noPadding && "p-4",
+          "relative flex flex-col overflow-hidden",
+          isLegacy ? cn.cn("rounded-md", LEGACY_VARIANT_CLASSES[variant]) : HIERARCHY_CLASSES[hierarchy],
+          padding,
           fullWidth && "w-full",
-          VARIANT_CLASSES[variant],
+          interactive && INTERACTIVE_CLASSES,
           className
         ),
         ...props,
         children
       }
-    );
+    ) });
   }
 );
 Card.displayName = "Card";
 const CardHeader = React__namespace.forwardRef(
   ({ className, action, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn.cn("flex items-start gap-3", className), ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn.cn("flex min-h-8 items-center gap-2", className), ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children }),
       action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: action })
     ] });
@@ -58,11 +85,16 @@ const CardHeader = React__namespace.forwardRef(
 CardHeader.displayName = "CardHeader";
 const CardTitle = React__namespace.forwardRef(
   ({ className, children, ...props }, ref) => {
+    const { hierarchy } = useCardContext();
     return /* @__PURE__ */ jsxRuntime.jsx(
       "h3",
       {
         ref,
-        className: cn.cn("typography-body-default-16px-semibold text-content-primary", className),
+        className: cn.cn(
+          hierarchy === "secondary" ? "typography-body-small-14px-regular" : "typography-header-heading-xs",
+          "text-content-primary",
+          className
+        ),
         ...props,
         children
       }
@@ -86,13 +118,15 @@ const CardDescription = React__namespace.forwardRef(
 CardDescription.displayName = "CardDescription";
 const CardContent = React__namespace.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn.cn("flex-1 py-4", className), ...props, children });
+    const { type } = useCardContext();
+    const padding = type === "container" ? void 0 : type === "header-only" ? "pt-6" : "py-6";
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn.cn("flex-1", padding, className), ...props, children });
   }
 );
 CardContent.displayName = "CardContent";
 const CardFooter = React__namespace.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn.cn("flex items-center gap-3", className), ...props, children });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn.cn("flex w-full items-center gap-2", className), ...props, children });
   }
 );
 CardFooter.displayName = "CardFooter";

package/dist/cjs/components/Card/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Visual style variant of the card. */\nexport type CardVariant = \"outlined\" | \"elevated\" | \"filled\" | \"ghost\";\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Visual style variant of the card. @default \"outlined\" */\n  variant?: CardVariant;\n  /** When `true`, the card will take the full width of its container. @default true */\n  fullWidth?: boolean;\n  /** When `true`, removes all internal padding. @default false */\n  noPadding?: boolean;\n}\n\nexport interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Icon element displayed at the trailing end of the header. */\n  action?: React.ReactNode;\n}\n\nexport interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}\n\nexport interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nexport interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst VARIANT_CLASSES: Record<CardVariant, string> = {\n  outlined: \"border border-neutral-alphas-200 bg-surface-primary shadow-sm\",\n  elevated: \"border border-neutral-alphas-200 bg-surface-primary shadow-md\",\n  filled: \"bg-surface-secondary\",\n  ghost: \"bg-transparent\",\n};\n\n/**\n * A composable card component with multiple visual variants. Use with\n * {@link CardHeader}, {@link CardTitle}, {@link CardDescription},\n * {@link CardContent}, and {@link CardFooter} for structured layouts.\n *\n * @example\n * ```tsx\n * <Card variant=\"outlined\">\n *   <CardHeader action={<HomeIcon className=\"size-5\" />}>\n *     <CardTitle>Card title</CardTitle>\n *     <CardDescription>Card description text</CardDescription>\n *   </CardHeader>\n *   <CardContent>Content goes here</CardContent>\n *   <CardFooter>\n *     <Button variant=\"secondary\">Label</Button>\n *     <Button variant=\"primary\">Label</Button>\n *   </CardFooter>\n * </Card>\n * ```\n */\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n  (\n    { className, variant = \"outlined\", fullWidth = true, noPadding = false, children, ...props },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex flex-col overflow-hidden rounded-md\",\n          !noPadding && \"p-4\",\n          fullWidth && \"w-full\",\n          VARIANT_CLASSES[variant],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nCard.displayName = \"Card\";\n\n/**\n * Header section of a {@link Card}. Renders a flex row with text content\n * on the left and an optional trailing action element (e.g. icon) on the right.\n */\nexport const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n  ({ className, action, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex items-start gap-3\", className)} {...props}>\n        <div className=\"min-w-0 flex-1\">{children}</div>\n        {action && <div className=\"shrink-0\">{action}</div>}\n      </div>\n    );\n  },\n);\nCardHeader.displayName = \"CardHeader\";\n\n/** Title element rendered inside a {@link CardHeader}. */\nexport const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <h3\n        ref={ref}\n        className={cn(\"typography-body-default-16px-semibold text-content-primary\", className)}\n        {...props}\n      >\n        {children}\n      </h3>\n    );\n  },\n);\nCardTitle.displayName = \"CardTitle\";\n\n/** Description text rendered below the {@link CardTitle} inside a {@link CardHeader}. */\nexport const CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <p\n        ref={ref}\n        className={cn(\"typography-description-12px-regular text-content-secondary\", className)}\n        {...props}\n      >\n        {children}\n      </p>\n    );\n  },\n);\nCardDescription.displayName = \"CardDescription\";\n\n/** Flexible content area of a {@link Card}. Adds vertical padding between header and footer. */\nexport const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex-1 py-4\", className)} {...props}>\n        {children}\n      </div>\n    );\n  },\n);\nCardContent.displayName = \"CardContent\";\n\n/** Footer section of a {@link Card}. Renders children in a horizontal row with a gap. */\nexport const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex items-center gap-3\", className)} {...props}>\n        {children}\n      </div>\n    );\n  },\n);\nCardFooter.displayName = \"CardFooter\";\n"],"names":["React","jsx","cn","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAM,kBAA+C;AAAA,EACnD,UAAU;AAAA,EACV,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AACT;AAsBO,MAAM,OAAOA,iBAAM;AAAA,EACxB,CACE,EAAE,WAAW,UAAU,YAAY,YAAY,MAAM,YAAY,OAAO,UAAU,GAAG,MAAA,GACrF,QACG;AACH,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,CAAC,aAAa;AAAA,UACd,aAAa;AAAA,UACb,gBAAgB,OAAO;AAAA,UACvB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,KAAK,cAAc;AAMZ,MAAM,aAAaF,iBAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,QAAQ,UAAU,GAAG,MAAA,GAAS,QAAQ;AAClD,WACEG,gCAAC,SAAI,KAAU,WAAWD,MAAG,0BAA0B,SAAS,GAAI,GAAG,OACrE,UAAA;AAAA,MAAAD,2BAAAA,IAAC,OAAA,EAAI,WAAU,kBAAkB,SAAA,CAAS;AAAA,MACzC,UAAUA,2BAAAA,IAAC,OAAA,EAAI,WAAU,YAAY,UAAA,OAAA,CAAO;AAAA,IAAA,GAC/C;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAGlB,MAAM,YAAYD,iBAAM;AAAA,EAC7B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,8DAA8D,SAAS;AAAA,QACpF,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,UAAU,cAAc;AAGjB,MAAM,kBAAkBF,iBAAM;AAAA,EACnC,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,8DAA8D,SAAS;AAAA,QACpF,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,gBAAgB,cAAc;AAGvB,MAAM,cAAcF,iBAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,+BAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,eAAe,SAAS,GAAI,GAAG,OACzD,SAAA,CACH;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;AAGnB,MAAM,aAAaF,iBAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACEC,+BAAC,OAAA,EAAI,KAAU,WAAWC,GAAAA,GAAG,2BAA2B,SAAS,GAAI,GAAG,OACrE,SAAA,CACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;;;;;;;"}
+{"version":3,"file":"Card.cjs","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Visual hierarchy of the card. Primary is for prominent, content-carrying cards; secondary for supporting cards within denser layouts. */\nexport type CardHierarchy = \"primary\" | \"secondary\";\n\n/** Structural type of the card. `default` has header, content and footer; `header-only` drops the footer; `container` is a bare surface. */\nexport type CardType = \"default\" | \"header-only\" | \"container\";\n\n/**\n * Legacy visual style variant.\n * @deprecated Use {@link CardHierarchy} via the `hierarchy` prop instead. Retained for backwards compatibility.\n */\nexport type CardVariant = \"outlined\" | \"elevated\" | \"filled\" | \"ghost\";\n\ninterface CardContextValue {\n  hierarchy: CardHierarchy;\n  type: CardType;\n}\n\nconst CardContext = React.createContext<CardContextValue>({\n  hierarchy: \"primary\",\n  type: \"default\",\n});\n\nconst useCardContext = () => React.useContext(CardContext);\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Visual hierarchy of the card. @default \"primary\" */\n  hierarchy?: CardHierarchy;\n  /** Structural type of the card. @default \"default\" */\n  type?: CardType;\n  /** When `true`, applies the hover treatment for clickable cards. @default false */\n  interactive?: boolean;\n  /**\n   * Legacy visual style variant.\n   * @deprecated Use `hierarchy` instead. When set, the card keeps its legacy V1 appearance for backwards compatibility.\n   */\n  variant?: CardVariant;\n  /** When `true`, the card will take the full width of its container. @default true */\n  fullWidth?: boolean;\n  /** When `true`, removes all internal padding. @default false */\n  noPadding?: boolean;\n}\n\nexport interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Icon element displayed at the trailing end of the header. */\n  action?: React.ReactNode;\n}\n\nexport interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}\n\nexport interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nexport interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst LEGACY_VARIANT_CLASSES: Record<CardVariant, string> = {\n  outlined: \"border border-neutral-alphas-200 bg-surface-primary shadow-sm\",\n  elevated: \"border border-neutral-alphas-200 bg-surface-primary shadow-md\",\n  filled: \"bg-surface-secondary\",\n  ghost: \"bg-transparent\",\n};\n\nconst HIERARCHY_CLASSES: Record<CardHierarchy, string> = {\n  primary: \"rounded-lg border border-border-primary bg-surface-primary\",\n  secondary: \"rounded-md border border-border-strong bg-surface-secondary shadow-sm\",\n};\n\nconst INTERACTIVE_CLASSES =\n  \"isolate cursor-pointer after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:bg-content-primary after:opacity-0 after:transition-opacity after:content-[''] hover:after:opacity-5\";\n\n/**\n * A composable card component built on the V2 design system. Compose it with\n * {@link CardHeader}, {@link CardTitle}, {@link CardDescription},\n * {@link CardContent}, and {@link CardFooter} for structured layouts.\n *\n * The `hierarchy` prop drives the surface treatment (Primary vs Secondary) and\n * the `type` prop drives the internal spacing (Default / Header Only / Container).\n *\n * @example\n * ```tsx\n * <Card hierarchy=\"primary\">\n *   <CardHeader action={<HomeIcon className=\"size-5\" />}>\n *     <CardTitle>Card title</CardTitle>\n *     <CardDescription>Card description text</CardDescription>\n *   </CardHeader>\n *   <CardContent>Content goes here</CardContent>\n *   <CardFooter>\n *     <Button variant=\"secondary\">Label</Button>\n *     <Button variant=\"primary\">Label</Button>\n *   </CardFooter>\n * </Card>\n * ```\n */\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      className,\n      hierarchy = \"primary\",\n      type = \"default\",\n      interactive = false,\n      variant,\n      fullWidth = true,\n      noPadding = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const isLegacy = variant !== undefined;\n    const padding = noPadding\n      ? undefined\n      : isLegacy\n        ? \"p-4\"\n        : hierarchy === \"secondary\"\n          ? \"p-4\"\n          : \"p-6\";\n\n    const contextValue = React.useMemo<CardContextValue>(\n      () => ({ hierarchy, type }),\n      [hierarchy, type],\n    );\n\n    return (\n      <CardContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          className={cn(\n            \"relative flex flex-col overflow-hidden\",\n            isLegacy\n              ? cn(\"rounded-md\", LEGACY_VARIANT_CLASSES[variant])\n              : HIERARCHY_CLASSES[hierarchy],\n            padding,\n            fullWidth && \"w-full\",\n            interactive && INTERACTIVE_CLASSES,\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </CardContext.Provider>\n    );\n  },\n);\nCard.displayName = \"Card\";\n\n/**\n * Header section of a {@link Card}. Renders a flex row with text content\n * on the left and an optional trailing action element (e.g. icon) on the right.\n */\nexport const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n  ({ className, action, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex min-h-8 items-center gap-2\", className)} {...props}>\n        <div className=\"min-w-0 flex-1\">{children}</div>\n        {action && <div className=\"shrink-0\">{action}</div>}\n      </div>\n    );\n  },\n);\nCardHeader.displayName = \"CardHeader\";\n\n/** Title element rendered inside a {@link CardHeader}. Adapts its type scale to the card `hierarchy`. */\nexport const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(\n  ({ className, children, ...props }, ref) => {\n    const { hierarchy } = useCardContext();\n    return (\n      <h3\n        ref={ref}\n        className={cn(\n          hierarchy === \"secondary\"\n            ? \"typography-body-small-14px-regular\"\n            : \"typography-header-heading-xs\",\n          \"text-content-primary\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </h3>\n    );\n  },\n);\nCardTitle.displayName = \"CardTitle\";\n\n/** Description text rendered below the {@link CardTitle} inside a {@link CardHeader}. */\nexport const CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <p\n        ref={ref}\n        className={cn(\"typography-description-12px-regular text-content-secondary\", className)}\n        {...props}\n      >\n        {children}\n      </p>\n    );\n  },\n);\nCardDescription.displayName = \"CardDescription\";\n\n/**\n * Flexible content area of a {@link Card}. Its vertical padding follows the card\n * `type`: `default` pads top and bottom, `header-only` pads only the top, and\n * `container` removes the built-in padding entirely.\n */\nexport const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n  ({ className, children, ...props }, ref) => {\n    const { type } = useCardContext();\n    const padding = type === \"container\" ? undefined : type === \"header-only\" ? \"pt-6\" : \"py-6\";\n    return (\n      <div ref={ref} className={cn(\"flex-1\", padding, className)} {...props}>\n        {children}\n      </div>\n    );\n  },\n);\nCardContent.displayName = \"CardContent\";\n\n/** Footer section of a {@link Card}. Renders children in a horizontal row with a gap. */\nexport const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex w-full items-center gap-2\", className)} {...props}>\n        {children}\n      </div>\n    );\n  },\n);\nCardFooter.displayName = \"CardFooter\";\n"],"names":["React","jsx","cn","jsxs"],"mappings":"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"}

package/dist/cjs/components/CriticalBanner/CriticalBanner.cjs

@@ -0,0 +1,109 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const Button = require("../Button/Button.cjs");
+const WarningIcon = require("../Icons/WarningIcon.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function CriticalBannerCta({
+  ctaLabel,
+  ctaProps
+}) {
+  const isDisabled = ctaProps?.disabled ?? false;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button.Button,
+    {
+      variant: "white",
+      size: "40",
+      ...ctaProps,
+      className: cn.cn(
+        !isDisabled && "text-alerts-critical-banner-background hover:text-alerts-critical-banner-background active:text-alerts-critical-banner-background",
+        ctaProps?.className
+      ),
+      children: ctaLabel
+    }
+  );
+}
+const CriticalBanner = React__namespace.forwardRef(
+  ({
+    className,
+    children,
+    layout = "trailing",
+    title,
+    icon,
+    ctaLabel,
+    ctaProps,
+    action,
+    role = "alert",
+    ...props
+  }, ref) => {
+    const isUnder = layout === "under";
+    const cta = action ?? (ctaLabel !== void 0 && ctaLabel !== null && ctaLabel !== false ? /* @__PURE__ */ jsxRuntime.jsx(CriticalBannerCta, { ctaLabel, ctaProps }) : null);
+    const iconNode = /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-alerts-critical-banner-icons", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(WarningIcon.WarningIcon, { filled: true, size: 32 }) });
+    const textColumn = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-1 break-words pt-1 text-alerts-critical-banner-content", children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-header-heading-xs", children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-body-default-16px-regular", children })
+    ] });
+    if (isUnder) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          role,
+          className: cn.cn(
+            "flex w-full min-w-[260px] items-start gap-4 rounded-md bg-alerts-critical-banner-background p-6",
+            className
+          ),
+          ...props,
+          children: [
+            iconNode,
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col items-start gap-6", children: [
+              textColumn,
+              cta !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: cta })
+            ] })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        role,
+        className: cn.cn(
+          "flex w-full min-w-[260px] items-center gap-6 rounded-md bg-alerts-critical-banner-background p-6",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-4", children: [
+            iconNode,
+            textColumn
+          ] }),
+          cta !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: cta })
+        ]
+      }
+    );
+  }
+);
+CriticalBanner.displayName = "CriticalBanner";
+exports.CriticalBanner = CriticalBanner;
+//# sourceMappingURL=CriticalBanner.cjs.map

package/dist/cjs/components/CriticalBanner/CriticalBanner.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CriticalBanner.cjs","sources":["../../../../src/components/CriticalBanner/CriticalBanner.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button, type ButtonProps } from \"../Button/Button\";\nimport { WarningIcon } from \"../Icons/WarningIcon\";\n\n/**\n * Placement of the call-to-action relative to the message.\n *\n * - `\"trailing\"` keeps the action inline, aligned to the end of the banner.\n * - `\"under\"` stacks the action beneath the message (use when the CTA label is\n *   too long to sit comfortably on the same line).\n */\nexport type CriticalBannerLayout = \"trailing\" | \"under\";\n\nexport interface CriticalBannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Body copy describing the blocking situation. */\n  children: React.ReactNode;\n  /** Placement of the call-to-action relative to the message. @default \"trailing\" */\n  layout?: CriticalBannerLayout;\n  /** Optional bold heading shown above the body copy. */\n  title?: React.ReactNode;\n  /** Leading icon. Overrides the default filled warning icon. */\n  icon?: React.ReactNode;\n  /** Label for the built-in white call-to-action button. Ignored when `action` is set. */\n  ctaLabel?: React.ReactNode;\n  /**\n   * Props forwarded to the built-in call-to-action button (e.g. `onClick`).\n   * `asChild` is intentionally excluded — the built-in CTA renders `ctaLabel`\n   * as text; for a link or fully custom element use the `action` prop instead.\n   */\n  ctaProps?: Omit<ButtonProps, \"variant\" | \"size\" | \"children\" | \"asChild\">;\n  /** Custom action node rendered in place of the built-in call-to-action button. */\n  action?: React.ReactNode;\n}\n\nfunction CriticalBannerCta({\n  ctaLabel,\n  ctaProps,\n}: {\n  ctaLabel: React.ReactNode;\n  ctaProps?: CriticalBannerProps[\"ctaProps\"];\n}) {\n  // Only tint the label red for enabled states; when disabled, let Button keep\n  // its own `text-content-disabled` treatment instead of overriding it.\n  const isDisabled = ctaProps?.disabled ?? false;\n  return (\n    <Button\n      variant=\"white\"\n      size=\"40\"\n      {...ctaProps}\n      className={cn(\n        !isDisabled &&\n          \"text-alerts-critical-banner-background hover:text-alerts-critical-banner-background active:text-alerts-critical-banner-background\",\n        ctaProps?.className,\n      )}\n    >\n      {ctaLabel}\n    </Button>\n  );\n}\n\n/**\n * A full-width, high-priority banner reserved for situations that block or\n * significantly impact a user's ability to use the platform — account\n * suspensions, blocking payment failures, identity verification requirements,\n * or critical security notices. It sits at the very top of a page and is\n * intentionally disruptive, so use it sparingly; for non-blocking messaging use\n * {@link Alert} or {@link Banner} instead.\n *\n * Renders with `role=\"alert\"` so assistive technology conveys its urgency;\n * override `role` for a less assertive treatment when appropriate.\n *\n * @example\n * ```tsx\n * <CriticalBanner\n *   title=\"Payment failed\"\n *   layout=\"trailing\"\n *   ctaLabel=\"Update payment\"\n *   ctaProps={{ onClick: handleUpdate }}\n * >\n *   We couldn't process your last payment. Update your details to keep your account active.\n * </CriticalBanner>\n * ```\n */\nexport const CriticalBanner = React.forwardRef<HTMLDivElement, CriticalBannerProps>(\n  (\n    {\n      className,\n      children,\n      layout = \"trailing\",\n      title,\n      icon,\n      ctaLabel,\n      ctaProps,\n      action,\n      role = \"alert\",\n      ...props\n    },\n    ref,\n  ) => {\n    const isUnder = layout === \"under\";\n\n    const cta =\n      action ??\n      (ctaLabel !== undefined && ctaLabel !== null && ctaLabel !== false ? (\n        <CriticalBannerCta ctaLabel={ctaLabel} ctaProps={ctaProps} />\n      ) : null);\n\n    const iconNode = (\n      <span className=\"shrink-0 text-alerts-critical-banner-icons\" aria-hidden=\"true\">\n        {icon ?? <WarningIcon filled size={32} />}\n      </span>\n    );\n\n    const textColumn = (\n      <div className=\"flex min-w-0 flex-col gap-1 break-words pt-1 text-alerts-critical-banner-content\">\n        {title && <div className=\"typography-header-heading-xs\">{title}</div>}\n        <div className=\"typography-body-default-16px-regular\">{children}</div>\n      </div>\n    );\n\n    if (isUnder) {\n      return (\n        <div\n          ref={ref}\n          role={role}\n          className={cn(\n            \"flex w-full min-w-[260px] items-start gap-4 rounded-md bg-alerts-critical-banner-background p-6\",\n            className,\n          )}\n          {...props}\n        >\n          {iconNode}\n          <div className=\"flex min-w-0 flex-1 flex-col items-start gap-6\">\n            {textColumn}\n            {cta !== null && <div className=\"shrink-0\">{cta}</div>}\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        role={role}\n        className={cn(\n          \"flex w-full min-w-[260px] items-center gap-6 rounded-md bg-alerts-critical-banner-background p-6\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"flex min-w-0 flex-1 items-start gap-4\">\n          {iconNode}\n          {textColumn}\n        </div>\n        {cta !== null && <div className=\"shrink-0\">{cta}</div>}\n      </div>\n    );\n  },\n);\n\nCriticalBanner.displayName = \"CriticalBanner\";\n"],"names":["jsx","Button","cn","React","WarningIcon","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AACF,GAGG;AAGD,QAAM,aAAa,UAAU,YAAY;AACzC,SACEA,2BAAAA;AAAAA,IAACC,OAAAA;AAAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,WAAWC,GAAAA;AAAAA,QACT,CAAC,cACC;AAAA,QACF,UAAU;AAAA,MAAA;AAAA,MAGX,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAyBO,MAAM,iBAAiBC,iBAAM;AAAA,EAClC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,UAAU,WAAW;AAE3B,UAAM,MACJ,WACC,aAAa,UAAa,aAAa,QAAQ,aAAa,QAC3DH,2BAAAA,IAAC,mBAAA,EAAkB,UAAoB,SAAA,CAAoB,IACzD;AAEN,UAAM,WACJA,2BAAAA,IAAC,QAAA,EAAK,WAAU,8CAA6C,eAAY,QACtE,UAAA,QAAQA,2BAAAA,IAACI,YAAAA,aAAA,EAAY,QAAM,MAAC,MAAM,IAAI,GACzC;AAGF,UAAM,aACJC,2BAAAA,KAAC,OAAA,EAAI,WAAU,oFACZ,UAAA;AAAA,MAAA,SAASL,2BAAAA,IAAC,OAAA,EAAI,WAAU,gCAAgC,UAAA,OAAM;AAAA,MAC/DA,2BAAAA,IAAC,OAAA,EAAI,WAAU,wCAAwC,SAAA,CAAS;AAAA,IAAA,GAClE;AAGF,QAAI,SAAS;AACX,aACEK,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,WAAWH,GAAAA;AAAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,UAED,GAAG;AAAA,UAEH,UAAA;AAAA,YAAA;AAAA,YACDG,2BAAAA,KAAC,OAAA,EAAI,WAAU,kDACZ,UAAA;AAAA,cAAA;AAAA,cACA,QAAQ,QAAQL,2BAAAA,IAAC,OAAA,EAAI,WAAU,YAAY,UAAA,IAAA,CAAI;AAAA,YAAA,EAAA,CAClD;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN;AAEA,WACEK,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAWH,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAG,2BAAAA,KAAC,OAAA,EAAI,WAAU,yCACZ,UAAA;AAAA,YAAA;AAAA,YACA;AAAA,UAAA,GACH;AAAA,UACC,QAAQ,QAAQL,2BAAAA,IAAC,OAAA,EAAI,WAAU,YAAY,UAAA,IAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGtD;AACF;AAEA,eAAe,cAAc;;"}

package/dist/cjs/index.cjs

@@ -19,6 +19,7 @@ const BottomNavigation = require("./components/BottomNavigation/BottomNavigation
 const BottomNavigationAction = require("./components/BottomNavigation/BottomNavigationAction.cjs");
 const Breadcrumb = require("./components/Breadcrumb/Breadcrumb.cjs");
 const Button = require("./components/Button/Button.cjs");
+const ButtonStack = require("./components/ButtonStack/ButtonStack.cjs");
 const Card = require("./components/Card/Card.cjs");
 const ChatInput = require("./components/ChatInput/ChatInput.cjs");
 const ChatMessage = require("./components/ChatMessage/ChatMessage.cjs");
@@ -28,6 +29,7 @@ const Count = require("./components/Count/Count.cjs");
 const CreatorCard = require("./components/CreatorCard/CreatorCard.cjs");
 const CreatorCover = require("./components/CreatorCover/CreatorCover.cjs");
 const CreatorTile = require("./components/CreatorTile/CreatorTile.cjs");
+const CriticalBanner = require("./components/CriticalBanner/CriticalBanner.cjs");
 const CyclingText = require("./components/CyclingText/CyclingText.cjs");
 const Dialog = require("./components/Dialog/Dialog.cjs");
 const Divider = require("./components/Divider/Divider.cjs");
@@ -289,6 +291,7 @@ exports.BreadcrumbList = Breadcrumb.BreadcrumbList;
 exports.BreadcrumbPage = Breadcrumb.BreadcrumbPage;
 exports.BreadcrumbSeparator = Breadcrumb.BreadcrumbSeparator;
 exports.Button = Button.Button;
+exports.ButtonStack = ButtonStack.ButtonStack;
 exports.Card = Card.Card;
 exports.CardContent = Card.CardContent;
 exports.CardDescription = Card.CardDescription;
@@ -303,6 +306,7 @@ exports.Count = Count.Count;
 exports.CreatorCard = CreatorCard.CreatorCard;
 exports.CreatorCover = CreatorCover.CreatorCover;
 exports.CreatorTile = CreatorTile.CreatorTile;
+exports.CriticalBanner = CriticalBanner.CriticalBanner;
 exports.CyclingText = CyclingText.CyclingText;
 exports.Dialog = Dialog.Dialog;
 exports.DialogBody = Dialog.DialogBody;

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/ButtonStack/ButtonStack.mjs

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const ButtonStack = React.forwardRef(
+  ({ direction = "horizontal", className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex gap-2",
+          direction === "horizontal" && "flex-row [&>*]:min-w-0 [&>*]:flex-1",
+          direction === "vertical" && "flex-col [&>*]:w-full",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+ButtonStack.displayName = "ButtonStack";
+export {
+  ButtonStack
+};
+//# sourceMappingURL=ButtonStack.mjs.map

package/dist/components/ButtonStack/ButtonStack.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonStack.mjs","sources":["../../../src/components/ButtonStack/ButtonStack.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Layout orientation of the buttons within a {@link ButtonStack}. */\nexport type ButtonStackDirection = \"horizontal\" | \"vertical\";\n\nexport interface ButtonStackProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Layout orientation. `horizontal` places buttons side by side with equal\n   * widths for primary + secondary action pairs; `vertical` stacks them\n   * full-width for mobile screens and narrow panels.\n   * @default \"horizontal\"\n   */\n  direction?: ButtonStackDirection;\n  /** Buttons to arrange — typically two {@link Button} elements. */\n  children: React.ReactNode;\n}\n\n/**\n * A layout helper that arranges action buttons either side by side\n * (`horizontal`) or stacked (`vertical`). Compose it with {@link Button}\n * children rather than reimplementing button styles.\n *\n * In `horizontal` mode each child stretches to an equal width; in `vertical`\n * mode each child spans the full width of the container. Buttons keep their\n * own sizing, so pass a matching `size` to each child for consistent heights.\n *\n * @example\n * ```tsx\n * <ButtonStack direction=\"horizontal\">\n *   <Button variant=\"outline\">Cancel</Button>\n *   <Button variant=\"primary\">Confirm</Button>\n * </ButtonStack>\n * ```\n */\nexport const ButtonStack = React.forwardRef<HTMLDivElement, ButtonStackProps>(\n  ({ direction = \"horizontal\", className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex gap-2\",\n          direction === \"horizontal\" && \"flex-row [&>*]:min-w-0 [&>*]:flex-1\",\n          direction === \"vertical\" && \"flex-col [&>*]:w-full\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nButtonStack.displayName = \"ButtonStack\";\n"],"names":[],"mappings":";;;;AAmCO,MAAM,cAAc,MAAM;AAAA,EAC/B,CAAC,EAAE,YAAY,cAAc,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AACpE,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,cAAc,gBAAgB;AAAA,UAC9B,cAAc,cAAc;AAAA,UAC5B;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,YAAY,cAAc;"}

package/dist/components/Card/Card.mjs

@@ -2,35 +2,62 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../utils/cn.mjs";
-const VARIANT_CLASSES = {
+const CardContext = React.createContext({
+  hierarchy: "primary",
+  type: "default"
+});
+const useCardContext = () => React.useContext(CardContext);
+const LEGACY_VARIANT_CLASSES = {
   outlined: "border border-neutral-alphas-200 bg-surface-primary shadow-sm",
   elevated: "border border-neutral-alphas-200 bg-surface-primary shadow-md",
   filled: "bg-surface-secondary",
   ghost: "bg-transparent"
 };
+const HIERARCHY_CLASSES = {
+  primary: "rounded-lg border border-border-primary bg-surface-primary",
+  secondary: "rounded-md border border-border-strong bg-surface-secondary shadow-sm"
+};
+const INTERACTIVE_CLASSES = "isolate cursor-pointer after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:bg-content-primary after:opacity-0 after:transition-opacity after:content-[''] hover:after:opacity-5";
 const Card = React.forwardRef(
-  ({ className, variant = "outlined", fullWidth = true, noPadding = false, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
+  ({
+    className,
+    hierarchy = "primary",
+    type = "default",
+    interactive = false,
+    variant,
+    fullWidth = true,
+    noPadding = false,
+    children,
+    ...props
+  }, ref) => {
+    const isLegacy = variant !== void 0;
+    const padding = noPadding ? void 0 : isLegacy ? "p-4" : hierarchy === "secondary" ? "p-4" : "p-6";
+    const contextValue = React.useMemo(
+      () => ({ hierarchy, type }),
+      [hierarchy, type]
+    );
+    return /* @__PURE__ */ jsx(CardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         className: cn(
-          "flex flex-col overflow-hidden rounded-md",
-          !noPadding && "p-4",
+          "relative flex flex-col overflow-hidden",
+          isLegacy ? cn("rounded-md", LEGACY_VARIANT_CLASSES[variant]) : HIERARCHY_CLASSES[hierarchy],
+          padding,
           fullWidth && "w-full",
-          VARIANT_CLASSES[variant],
+          interactive && INTERACTIVE_CLASSES,
           className
         ),
         ...props,
         children
       }
-    );
+    ) });
   }
 );
 Card.displayName = "Card";
 const CardHeader = React.forwardRef(
   ({ className, action, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex items-start gap-3", className), ...props, children: [
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex min-h-8 items-center gap-2", className), ...props, children: [
       /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children }),
       action && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action })
     ] });
@@ -39,11 +66,16 @@ const CardHeader = React.forwardRef(
 CardHeader.displayName = "CardHeader";
 const CardTitle = React.forwardRef(
   ({ className, children, ...props }, ref) => {
+    const { hierarchy } = useCardContext();
     return /* @__PURE__ */ jsx(
       "h3",
       {
         ref,
-        className: cn("typography-body-default-16px-semibold text-content-primary", className),
+        className: cn(
+          hierarchy === "secondary" ? "typography-body-small-14px-regular" : "typography-header-heading-xs",
+          "text-content-primary",
+          className
+        ),
         ...props,
         children
       }
@@ -67,13 +99,15 @@ const CardDescription = React.forwardRef(
 CardDescription.displayName = "CardDescription";
 const CardContent = React.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex-1 py-4", className), ...props, children });
+    const { type } = useCardContext();
+    const padding = type === "container" ? void 0 : type === "header-only" ? "pt-6" : "py-6";
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex-1", padding, className), ...props, children });
   }
 );
 CardContent.displayName = "CardContent";
 const CardFooter = React.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center gap-3", className), ...props, children });
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex w-full items-center gap-2", className), ...props, children });
   }
 );
 CardFooter.displayName = "CardFooter";

package/dist/components/Card/Card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.mjs","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Visual style variant of the card. */\nexport type CardVariant = \"outlined\" | \"elevated\" | \"filled\" | \"ghost\";\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Visual style variant of the card. @default \"outlined\" */\n  variant?: CardVariant;\n  /** When `true`, the card will take the full width of its container. @default true */\n  fullWidth?: boolean;\n  /** When `true`, removes all internal padding. @default false */\n  noPadding?: boolean;\n}\n\nexport interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Icon element displayed at the trailing end of the header. */\n  action?: React.ReactNode;\n}\n\nexport interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}\n\nexport interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nexport interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst VARIANT_CLASSES: Record<CardVariant, string> = {\n  outlined: \"border border-neutral-alphas-200 bg-surface-primary shadow-sm\",\n  elevated: \"border border-neutral-alphas-200 bg-surface-primary shadow-md\",\n  filled: \"bg-surface-secondary\",\n  ghost: \"bg-transparent\",\n};\n\n/**\n * A composable card component with multiple visual variants. Use with\n * {@link CardHeader}, {@link CardTitle}, {@link CardDescription},\n * {@link CardContent}, and {@link CardFooter} for structured layouts.\n *\n * @example\n * ```tsx\n * <Card variant=\"outlined\">\n *   <CardHeader action={<HomeIcon className=\"size-5\" />}>\n *     <CardTitle>Card title</CardTitle>\n *     <CardDescription>Card description text</CardDescription>\n *   </CardHeader>\n *   <CardContent>Content goes here</CardContent>\n *   <CardFooter>\n *     <Button variant=\"secondary\">Label</Button>\n *     <Button variant=\"primary\">Label</Button>\n *   </CardFooter>\n * </Card>\n * ```\n */\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n  (\n    { className, variant = \"outlined\", fullWidth = true, noPadding = false, children, ...props },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex flex-col overflow-hidden rounded-md\",\n          !noPadding && \"p-4\",\n          fullWidth && \"w-full\",\n          VARIANT_CLASSES[variant],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nCard.displayName = \"Card\";\n\n/**\n * Header section of a {@link Card}. Renders a flex row with text content\n * on the left and an optional trailing action element (e.g. icon) on the right.\n */\nexport const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n  ({ className, action, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex items-start gap-3\", className)} {...props}>\n        <div className=\"min-w-0 flex-1\">{children}</div>\n        {action && <div className=\"shrink-0\">{action}</div>}\n      </div>\n    );\n  },\n);\nCardHeader.displayName = \"CardHeader\";\n\n/** Title element rendered inside a {@link CardHeader}. */\nexport const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <h3\n        ref={ref}\n        className={cn(\"typography-body-default-16px-semibold text-content-primary\", className)}\n        {...props}\n      >\n        {children}\n      </h3>\n    );\n  },\n);\nCardTitle.displayName = \"CardTitle\";\n\n/** Description text rendered below the {@link CardTitle} inside a {@link CardHeader}. */\nexport const CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <p\n        ref={ref}\n        className={cn(\"typography-description-12px-regular text-content-secondary\", className)}\n        {...props}\n      >\n        {children}\n      </p>\n    );\n  },\n);\nCardDescription.displayName = \"CardDescription\";\n\n/** Flexible content area of a {@link Card}. Adds vertical padding between header and footer. */\nexport const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex-1 py-4\", className)} {...props}>\n        {children}\n      </div>\n    );\n  },\n);\nCardContent.displayName = \"CardContent\";\n\n/** Footer section of a {@link Card}. Renders children in a horizontal row with a gap. */\nexport const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex items-center gap-3\", className)} {...props}>\n        {children}\n      </div>\n    );\n  },\n);\nCardFooter.displayName = \"CardFooter\";\n"],"names":[],"mappings":";;;;AA4BA,MAAM,kBAA+C;AAAA,EACnD,UAAU;AAAA,EACV,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AACT;AAsBO,MAAM,OAAO,MAAM;AAAA,EACxB,CACE,EAAE,WAAW,UAAU,YAAY,YAAY,MAAM,YAAY,OAAO,UAAU,GAAG,MAAA,GACrF,QACG;AACH,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,CAAC,aAAa;AAAA,UACd,aAAa;AAAA,UACb,gBAAgB,OAAO;AAAA,UACvB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,KAAK,cAAc;AAMZ,MAAM,aAAa,MAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,QAAQ,UAAU,GAAG,MAAA,GAAS,QAAQ;AAClD,WACE,qBAAC,SAAI,KAAU,WAAW,GAAG,0BAA0B,SAAS,GAAI,GAAG,OACrE,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,kBAAkB,SAAA,CAAS;AAAA,MACzC,UAAU,oBAAC,OAAA,EAAI,WAAU,YAAY,UAAA,OAAA,CAAO;AAAA,IAAA,GAC/C;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAGlB,MAAM,YAAY,MAAM;AAAA,EAC7B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,8DAA8D,SAAS;AAAA,QACpF,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,UAAU,cAAc;AAGjB,MAAM,kBAAkB,MAAM;AAAA,EACnC,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,8DAA8D,SAAS;AAAA,QACpF,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,gBAAgB,cAAc;AAGvB,MAAM,cAAc,MAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACE,oBAAC,OAAA,EAAI,KAAU,WAAW,GAAG,eAAe,SAAS,GAAI,GAAG,OACzD,SAAA,CACH;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;AAGnB,MAAM,aAAa,MAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACE,oBAAC,OAAA,EAAI,KAAU,WAAW,GAAG,2BAA2B,SAAS,GAAI,GAAG,OACrE,SAAA,CACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;"}
+{"version":3,"file":"Card.mjs","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Visual hierarchy of the card. Primary is for prominent, content-carrying cards; secondary for supporting cards within denser layouts. */\nexport type CardHierarchy = \"primary\" | \"secondary\";\n\n/** Structural type of the card. `default` has header, content and footer; `header-only` drops the footer; `container` is a bare surface. */\nexport type CardType = \"default\" | \"header-only\" | \"container\";\n\n/**\n * Legacy visual style variant.\n * @deprecated Use {@link CardHierarchy} via the `hierarchy` prop instead. Retained for backwards compatibility.\n */\nexport type CardVariant = \"outlined\" | \"elevated\" | \"filled\" | \"ghost\";\n\ninterface CardContextValue {\n  hierarchy: CardHierarchy;\n  type: CardType;\n}\n\nconst CardContext = React.createContext<CardContextValue>({\n  hierarchy: \"primary\",\n  type: \"default\",\n});\n\nconst useCardContext = () => React.useContext(CardContext);\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Visual hierarchy of the card. @default \"primary\" */\n  hierarchy?: CardHierarchy;\n  /** Structural type of the card. @default \"default\" */\n  type?: CardType;\n  /** When `true`, applies the hover treatment for clickable cards. @default false */\n  interactive?: boolean;\n  /**\n   * Legacy visual style variant.\n   * @deprecated Use `hierarchy` instead. When set, the card keeps its legacy V1 appearance for backwards compatibility.\n   */\n  variant?: CardVariant;\n  /** When `true`, the card will take the full width of its container. @default true */\n  fullWidth?: boolean;\n  /** When `true`, removes all internal padding. @default false */\n  noPadding?: boolean;\n}\n\nexport interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Icon element displayed at the trailing end of the header. */\n  action?: React.ReactNode;\n}\n\nexport interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}\n\nexport interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nexport interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst LEGACY_VARIANT_CLASSES: Record<CardVariant, string> = {\n  outlined: \"border border-neutral-alphas-200 bg-surface-primary shadow-sm\",\n  elevated: \"border border-neutral-alphas-200 bg-surface-primary shadow-md\",\n  filled: \"bg-surface-secondary\",\n  ghost: \"bg-transparent\",\n};\n\nconst HIERARCHY_CLASSES: Record<CardHierarchy, string> = {\n  primary: \"rounded-lg border border-border-primary bg-surface-primary\",\n  secondary: \"rounded-md border border-border-strong bg-surface-secondary shadow-sm\",\n};\n\nconst INTERACTIVE_CLASSES =\n  \"isolate cursor-pointer after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:bg-content-primary after:opacity-0 after:transition-opacity after:content-[''] hover:after:opacity-5\";\n\n/**\n * A composable card component built on the V2 design system. Compose it with\n * {@link CardHeader}, {@link CardTitle}, {@link CardDescription},\n * {@link CardContent}, and {@link CardFooter} for structured layouts.\n *\n * The `hierarchy` prop drives the surface treatment (Primary vs Secondary) and\n * the `type` prop drives the internal spacing (Default / Header Only / Container).\n *\n * @example\n * ```tsx\n * <Card hierarchy=\"primary\">\n *   <CardHeader action={<HomeIcon className=\"size-5\" />}>\n *     <CardTitle>Card title</CardTitle>\n *     <CardDescription>Card description text</CardDescription>\n *   </CardHeader>\n *   <CardContent>Content goes here</CardContent>\n *   <CardFooter>\n *     <Button variant=\"secondary\">Label</Button>\n *     <Button variant=\"primary\">Label</Button>\n *   </CardFooter>\n * </Card>\n * ```\n */\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      className,\n      hierarchy = \"primary\",\n      type = \"default\",\n      interactive = false,\n      variant,\n      fullWidth = true,\n      noPadding = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const isLegacy = variant !== undefined;\n    const padding = noPadding\n      ? undefined\n      : isLegacy\n        ? \"p-4\"\n        : hierarchy === \"secondary\"\n          ? \"p-4\"\n          : \"p-6\";\n\n    const contextValue = React.useMemo<CardContextValue>(\n      () => ({ hierarchy, type }),\n      [hierarchy, type],\n    );\n\n    return (\n      <CardContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          className={cn(\n            \"relative flex flex-col overflow-hidden\",\n            isLegacy\n              ? cn(\"rounded-md\", LEGACY_VARIANT_CLASSES[variant])\n              : HIERARCHY_CLASSES[hierarchy],\n            padding,\n            fullWidth && \"w-full\",\n            interactive && INTERACTIVE_CLASSES,\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </CardContext.Provider>\n    );\n  },\n);\nCard.displayName = \"Card\";\n\n/**\n * Header section of a {@link Card}. Renders a flex row with text content\n * on the left and an optional trailing action element (e.g. icon) on the right.\n */\nexport const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n  ({ className, action, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex min-h-8 items-center gap-2\", className)} {...props}>\n        <div className=\"min-w-0 flex-1\">{children}</div>\n        {action && <div className=\"shrink-0\">{action}</div>}\n      </div>\n    );\n  },\n);\nCardHeader.displayName = \"CardHeader\";\n\n/** Title element rendered inside a {@link CardHeader}. Adapts its type scale to the card `hierarchy`. */\nexport const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(\n  ({ className, children, ...props }, ref) => {\n    const { hierarchy } = useCardContext();\n    return (\n      <h3\n        ref={ref}\n        className={cn(\n          hierarchy === \"secondary\"\n            ? \"typography-body-small-14px-regular\"\n            : \"typography-header-heading-xs\",\n          \"text-content-primary\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </h3>\n    );\n  },\n);\nCardTitle.displayName = \"CardTitle\";\n\n/** Description text rendered below the {@link CardTitle} inside a {@link CardHeader}. */\nexport const CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <p\n        ref={ref}\n        className={cn(\"typography-description-12px-regular text-content-secondary\", className)}\n        {...props}\n      >\n        {children}\n      </p>\n    );\n  },\n);\nCardDescription.displayName = \"CardDescription\";\n\n/**\n * Flexible content area of a {@link Card}. Its vertical padding follows the card\n * `type`: `default` pads top and bottom, `header-only` pads only the top, and\n * `container` removes the built-in padding entirely.\n */\nexport const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n  ({ className, children, ...props }, ref) => {\n    const { type } = useCardContext();\n    const padding = type === \"container\" ? undefined : type === \"header-only\" ? \"pt-6\" : \"py-6\";\n    return (\n      <div ref={ref} className={cn(\"flex-1\", padding, className)} {...props}>\n        {children}\n      </div>\n    );\n  },\n);\nCardContent.displayName = \"CardContent\";\n\n/** Footer section of a {@link Card}. Renders children in a horizontal row with a gap. */\nexport const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"flex w-full items-center gap-2\", className)} {...props}>\n        {children}\n      </div>\n    );\n  },\n);\nCardFooter.displayName = \"CardFooter\";\n"],"names":[],"mappings":";;;;AAoBA,MAAM,cAAc,MAAM,cAAgC;AAAA,EACxD,WAAW;AAAA,EACX,MAAM;AACR,CAAC;AAED,MAAM,iBAAiB,MAAM,MAAM,WAAW,WAAW;AAiCzD,MAAM,yBAAsD;AAAA,EAC1D,UAAU;AAAA,EACV,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,MAAM,oBAAmD;AAAA,EACvD,SAAS;AAAA,EACT,WAAW;AACb;AAEA,MAAM,sBACJ;AAyBK,MAAM,OAAO,MAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,cAAc;AAAA,IACd;AAAA,IACA,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,WAAW,YAAY;AAC7B,UAAM,UAAU,YACZ,SACA,WACE,QACA,cAAc,cACZ,QACA;AAER,UAAM,eAAe,MAAM;AAAA,MACzB,OAAO,EAAE,WAAW;MACpB,CAAC,WAAW,IAAI;AAAA,IAAA;AAGlB,WACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,cAC3B,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,WACI,GAAG,cAAc,uBAAuB,OAAO,CAAC,IAChD,kBAAkB,SAAS;AAAA,UAC/B;AAAA,UACA,aAAa;AAAA,UACb,eAAe;AAAA,UACf;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;AAMZ,MAAM,aAAa,MAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,QAAQ,UAAU,GAAG,MAAA,GAAS,QAAQ;AAClD,WACE,qBAAC,SAAI,KAAU,WAAW,GAAG,mCAAmC,SAAS,GAAI,GAAG,OAC9E,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,kBAAkB,SAAA,CAAS;AAAA,MACzC,UAAU,oBAAC,OAAA,EAAI,WAAU,YAAY,UAAA,OAAA,CAAO;AAAA,IAAA,GAC/C;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAGlB,MAAM,YAAY,MAAM;AAAA,EAC7B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,UAAM,EAAE,UAAA,IAAc,eAAA;AACtB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT,cAAc,cACV,uCACA;AAAA,UACJ;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,UAAU,cAAc;AAGjB,MAAM,kBAAkB,MAAM;AAAA,EACnC,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,8DAA8D,SAAS;AAAA,QACpF,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,gBAAgB,cAAc;AAOvB,MAAM,cAAc,MAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,UAAM,EAAE,KAAA,IAAS,eAAA;AACjB,UAAM,UAAU,SAAS,cAAc,SAAY,SAAS,gBAAgB,SAAS;AACrF,WACE,oBAAC,OAAA,EAAI,KAAU,WAAW,GAAG,UAAU,SAAS,SAAS,GAAI,GAAG,OAC7D,SAAA,CACH;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;AAGnB,MAAM,aAAa,MAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,WACE,oBAAC,OAAA,EAAI,KAAU,WAAW,GAAG,kCAAkC,SAAS,GAAI,GAAG,OAC5E,SAAA,CACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;"}

package/dist/components/CriticalBanner/CriticalBanner.mjs

@@ -0,0 +1,92 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+import { Button } from "../Button/Button.mjs";
+import { WarningIcon } from "../Icons/WarningIcon.mjs";
+function CriticalBannerCta({
+  ctaLabel,
+  ctaProps
+}) {
+  const isDisabled = ctaProps?.disabled ?? false;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "white",
+      size: "40",
+      ...ctaProps,
+      className: cn(
+        !isDisabled && "text-alerts-critical-banner-background hover:text-alerts-critical-banner-background active:text-alerts-critical-banner-background",
+        ctaProps?.className
+      ),
+      children: ctaLabel
+    }
+  );
+}
+const CriticalBanner = React.forwardRef(
+  ({
+    className,
+    children,
+    layout = "trailing",
+    title,
+    icon,
+    ctaLabel,
+    ctaProps,
+    action,
+    role = "alert",
+    ...props
+  }, ref) => {
+    const isUnder = layout === "under";
+    const cta = action ?? (ctaLabel !== void 0 && ctaLabel !== null && ctaLabel !== false ? /* @__PURE__ */ jsx(CriticalBannerCta, { ctaLabel, ctaProps }) : null);
+    const iconNode = /* @__PURE__ */ jsx("span", { className: "shrink-0 text-alerts-critical-banner-icons", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsx(WarningIcon, { filled: true, size: 32 }) });
+    const textColumn = /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1 break-words pt-1 text-alerts-critical-banner-content", children: [
+      title && /* @__PURE__ */ jsx("div", { className: "typography-header-heading-xs", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "typography-body-default-16px-regular", children })
+    ] });
+    if (isUnder) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          role,
+          className: cn(
+            "flex w-full min-w-[260px] items-start gap-4 rounded-md bg-alerts-critical-banner-background p-6",
+            className
+          ),
+          ...props,
+          children: [
+            iconNode,
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col items-start gap-6", children: [
+              textColumn,
+              cta !== null && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: cta })
+            ] })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role,
+        className: cn(
+          "flex w-full min-w-[260px] items-center gap-6 rounded-md bg-alerts-critical-banner-background p-6",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-4", children: [
+            iconNode,
+            textColumn
+          ] }),
+          cta !== null && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: cta })
+        ]
+      }
+    );
+  }
+);
+CriticalBanner.displayName = "CriticalBanner";
+export {
+  CriticalBanner
+};
+//# sourceMappingURL=CriticalBanner.mjs.map

package/dist/components/CriticalBanner/CriticalBanner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CriticalBanner.mjs","sources":["../../../src/components/CriticalBanner/CriticalBanner.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button, type ButtonProps } from \"../Button/Button\";\nimport { WarningIcon } from \"../Icons/WarningIcon\";\n\n/**\n * Placement of the call-to-action relative to the message.\n *\n * - `\"trailing\"` keeps the action inline, aligned to the end of the banner.\n * - `\"under\"` stacks the action beneath the message (use when the CTA label is\n *   too long to sit comfortably on the same line).\n */\nexport type CriticalBannerLayout = \"trailing\" | \"under\";\n\nexport interface CriticalBannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Body copy describing the blocking situation. */\n  children: React.ReactNode;\n  /** Placement of the call-to-action relative to the message. @default \"trailing\" */\n  layout?: CriticalBannerLayout;\n  /** Optional bold heading shown above the body copy. */\n  title?: React.ReactNode;\n  /** Leading icon. Overrides the default filled warning icon. */\n  icon?: React.ReactNode;\n  /** Label for the built-in white call-to-action button. Ignored when `action` is set. */\n  ctaLabel?: React.ReactNode;\n  /**\n   * Props forwarded to the built-in call-to-action button (e.g. `onClick`).\n   * `asChild` is intentionally excluded — the built-in CTA renders `ctaLabel`\n   * as text; for a link or fully custom element use the `action` prop instead.\n   */\n  ctaProps?: Omit<ButtonProps, \"variant\" | \"size\" | \"children\" | \"asChild\">;\n  /** Custom action node rendered in place of the built-in call-to-action button. */\n  action?: React.ReactNode;\n}\n\nfunction CriticalBannerCta({\n  ctaLabel,\n  ctaProps,\n}: {\n  ctaLabel: React.ReactNode;\n  ctaProps?: CriticalBannerProps[\"ctaProps\"];\n}) {\n  // Only tint the label red for enabled states; when disabled, let Button keep\n  // its own `text-content-disabled` treatment instead of overriding it.\n  const isDisabled = ctaProps?.disabled ?? false;\n  return (\n    <Button\n      variant=\"white\"\n      size=\"40\"\n      {...ctaProps}\n      className={cn(\n        !isDisabled &&\n          \"text-alerts-critical-banner-background hover:text-alerts-critical-banner-background active:text-alerts-critical-banner-background\",\n        ctaProps?.className,\n      )}\n    >\n      {ctaLabel}\n    </Button>\n  );\n}\n\n/**\n * A full-width, high-priority banner reserved for situations that block or\n * significantly impact a user's ability to use the platform — account\n * suspensions, blocking payment failures, identity verification requirements,\n * or critical security notices. It sits at the very top of a page and is\n * intentionally disruptive, so use it sparingly; for non-blocking messaging use\n * {@link Alert} or {@link Banner} instead.\n *\n * Renders with `role=\"alert\"` so assistive technology conveys its urgency;\n * override `role` for a less assertive treatment when appropriate.\n *\n * @example\n * ```tsx\n * <CriticalBanner\n *   title=\"Payment failed\"\n *   layout=\"trailing\"\n *   ctaLabel=\"Update payment\"\n *   ctaProps={{ onClick: handleUpdate }}\n * >\n *   We couldn't process your last payment. Update your details to keep your account active.\n * </CriticalBanner>\n * ```\n */\nexport const CriticalBanner = React.forwardRef<HTMLDivElement, CriticalBannerProps>(\n  (\n    {\n      className,\n      children,\n      layout = \"trailing\",\n      title,\n      icon,\n      ctaLabel,\n      ctaProps,\n      action,\n      role = \"alert\",\n      ...props\n    },\n    ref,\n  ) => {\n    const isUnder = layout === \"under\";\n\n    const cta =\n      action ??\n      (ctaLabel !== undefined && ctaLabel !== null && ctaLabel !== false ? (\n        <CriticalBannerCta ctaLabel={ctaLabel} ctaProps={ctaProps} />\n      ) : null);\n\n    const iconNode = (\n      <span className=\"shrink-0 text-alerts-critical-banner-icons\" aria-hidden=\"true\">\n        {icon ?? <WarningIcon filled size={32} />}\n      </span>\n    );\n\n    const textColumn = (\n      <div className=\"flex min-w-0 flex-col gap-1 break-words pt-1 text-alerts-critical-banner-content\">\n        {title && <div className=\"typography-header-heading-xs\">{title}</div>}\n        <div className=\"typography-body-default-16px-regular\">{children}</div>\n      </div>\n    );\n\n    if (isUnder) {\n      return (\n        <div\n          ref={ref}\n          role={role}\n          className={cn(\n            \"flex w-full min-w-[260px] items-start gap-4 rounded-md bg-alerts-critical-banner-background p-6\",\n            className,\n          )}\n          {...props}\n        >\n          {iconNode}\n          <div className=\"flex min-w-0 flex-1 flex-col items-start gap-6\">\n            {textColumn}\n            {cta !== null && <div className=\"shrink-0\">{cta}</div>}\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        role={role}\n        className={cn(\n          \"flex w-full min-w-[260px] items-center gap-6 rounded-md bg-alerts-critical-banner-background p-6\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"flex min-w-0 flex-1 items-start gap-4\">\n          {iconNode}\n          {textColumn}\n        </div>\n        {cta !== null && <div className=\"shrink-0\">{cta}</div>}\n      </div>\n    );\n  },\n);\n\nCriticalBanner.displayName = \"CriticalBanner\";\n"],"names":[],"mappings":";;;;;;AAmCA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AACF,GAGG;AAGD,QAAM,aAAa,UAAU,YAAY;AACzC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,CAAC,cACC;AAAA,QACF,UAAU;AAAA,MAAA;AAAA,MAGX,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAyBO,MAAM,iBAAiB,MAAM;AAAA,EAClC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,UAAU,WAAW;AAE3B,UAAM,MACJ,WACC,aAAa,UAAa,aAAa,QAAQ,aAAa,QAC3D,oBAAC,mBAAA,EAAkB,UAAoB,SAAA,CAAoB,IACzD;AAEN,UAAM,WACJ,oBAAC,QAAA,EAAK,WAAU,8CAA6C,eAAY,QACtE,UAAA,QAAQ,oBAAC,aAAA,EAAY,QAAM,MAAC,MAAM,IAAI,GACzC;AAGF,UAAM,aACJ,qBAAC,OAAA,EAAI,WAAU,oFACZ,UAAA;AAAA,MAAA,SAAS,oBAAC,OAAA,EAAI,WAAU,gCAAgC,UAAA,OAAM;AAAA,MAC/D,oBAAC,OAAA,EAAI,WAAU,wCAAwC,SAAA,CAAS;AAAA,IAAA,GAClE;AAGF,QAAI,SAAS;AACX,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,UAED,GAAG;AAAA,UAEH,UAAA;AAAA,YAAA;AAAA,YACD,qBAAC,OAAA,EAAI,WAAU,kDACZ,UAAA;AAAA,cAAA;AAAA,cACA,QAAQ,QAAQ,oBAAC,OAAA,EAAI,WAAU,YAAY,UAAA,IAAA,CAAI;AAAA,YAAA,EAAA,CAClD;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,yCACZ,UAAA;AAAA,YAAA;AAAA,YACA;AAAA,UAAA,GACH;AAAA,UACC,QAAQ,QAAQ,oBAAC,OAAA,EAAI,WAAU,YAAY,UAAA,IAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGtD;AACF;AAEA,eAAe,cAAc;"}

package/dist/index.d.ts

@@ -998,6 +998,40 @@ export declare interface ButtonProps extends React_2.ButtonHTMLAttributes<HTMLBu
 /** Button height in pixels. */
 export declare type ButtonSize = "48" | "40" | "32" | "24";
 
+/**
+ * A layout helper that arranges action buttons either side by side
+ * (`horizontal`) or stacked (`vertical`). Compose it with {@link Button}
+ * children rather than reimplementing button styles.
+ *
+ * In `horizontal` mode each child stretches to an equal width; in `vertical`
+ * mode each child spans the full width of the container. Buttons keep their
+ * own sizing, so pass a matching `size` to each child for consistent heights.
+ *
+ * @example
+ * ```tsx
+ * <ButtonStack direction="horizontal">
+ *   <Button variant="outline">Cancel</Button>
+ *   <Button variant="primary">Confirm</Button>
+ * </ButtonStack>
+ * ```
+ */
+export declare const ButtonStack: React_2.ForwardRefExoticComponent<ButtonStackProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Layout orientation of the buttons within a {@link ButtonStack}. */
+export declare type ButtonStackDirection = "horizontal" | "vertical";
+
+export declare interface ButtonStackProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Layout orientation. `horizontal` places buttons side by side with equal
+     * widths for primary + secondary action pairs; `vertical` stacks them
+     * full-width for mobile screens and narrow panels.
+     * @default "horizontal"
+     */
+    direction?: ButtonStackDirection;
+    /** Buttons to arrange — typically two {@link Button} elements. */
+    children: React_2.ReactNode;
+}
+
 /** Visual style variant of the button. */
 export declare type ButtonVariant = "primary" | "secondary" | "tertiary" | "outline" | "link" | "brand" | "destructive" | "white" | "alwaysBlack" | "ai" | "tertiaryDestructive" | "text";
 
@@ -1032,13 +1066,16 @@ export declare const CameraIcon: React_2.ForwardRefExoticComponent<React_2.SVGAt
 } & React_2.RefAttributes<SVGSVGElement>>;
 
 /**
- * A composable card component with multiple visual variants. Use with
+ * A composable card component built on the V2 design system. Compose it with
  * {@link CardHeader}, {@link CardTitle}, {@link CardDescription},
  * {@link CardContent}, and {@link CardFooter} for structured layouts.
  *
+ * The `hierarchy` prop drives the surface treatment (Primary vs Secondary) and
+ * the `type` prop drives the internal spacing (Default / Header Only / Container).
+ *
  * @example
  * ```tsx
- * <Card variant="outlined">
+ * <Card hierarchy="primary">
  *   <CardHeader action={<HomeIcon className="size-5" />}>
  *     <CardTitle>Card title</CardTitle>
  *     <CardDescription>Card description text</CardDescription>
@@ -1053,7 +1090,11 @@ export declare const CameraIcon: React_2.ForwardRefExoticComponent<React_2.SVGAt
  */
 export declare const Card: React_2.ForwardRefExoticComponent<CardProps & React_2.RefAttributes<HTMLDivElement>>;
 
-/** Flexible content area of a {@link Card}. Adds vertical padding between header and footer. */
+/**
+ * Flexible content area of a {@link Card}. Its vertical padding follows the card
+ * `type`: `default` pads top and bottom, `header-only` pads only the top, and
+ * `container` removes the built-in padding entirely.
+ */
 export declare const CardContent: React_2.ForwardRefExoticComponent<CardContentProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare interface CardContentProps extends React_2.HTMLAttributes<HTMLDivElement> {
@@ -1082,6 +1123,9 @@ export declare interface CardHeaderProps extends React_2.HTMLAttributes<HTMLDivE
     action?: React_2.ReactNode;
 }
 
+/** Visual hierarchy of the card. Primary is for prominent, content-carrying cards; secondary for supporting cards within denser layouts. */
+export declare type CardHierarchy = "primary" | "secondary";
+
 /**
  * Card icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
  *
@@ -1096,7 +1140,16 @@ export declare const CardIcon: React_2.ForwardRefExoticComponent<BaseIconProps &
 export declare type CardIconProps = BaseIconProps;
 
 export declare interface CardProps extends React_2.HTMLAttributes<HTMLDivElement> {
-    /** Visual style variant of the card. @default "outlined" */
+    /** Visual hierarchy of the card. @default "primary" */
+    hierarchy?: CardHierarchy;
+    /** Structural type of the card. @default "default" */
+    type?: CardType;
+    /** When `true`, applies the hover treatment for clickable cards. @default false */
+    interactive?: boolean;
+    /**
+     * Legacy visual style variant.
+     * @deprecated Use `hierarchy` instead. When set, the card keeps its legacy V1 appearance for backwards compatibility.
+     */
     variant?: CardVariant;
     /** When `true`, the card will take the full width of its container. @default true */
     fullWidth?: boolean;
@@ -1104,13 +1157,19 @@ export declare interface CardProps extends React_2.HTMLAttributes<HTMLDivElement
     noPadding?: boolean;
 }
 
-/** Title element rendered inside a {@link CardHeader}. */
+/** Title element rendered inside a {@link CardHeader}. Adapts its type scale to the card `hierarchy`. */
 export declare const CardTitle: React_2.ForwardRefExoticComponent<CardTitleProps & React_2.RefAttributes<HTMLHeadingElement>>;
 
 export declare interface CardTitleProps extends React_2.HTMLAttributes<HTMLHeadingElement> {
 }
 
-/** Visual style variant of the card. */
+/** Structural type of the card. `default` has header, content and footer; `header-only` drops the footer; `container` is a bare surface. */
+export declare type CardType = "default" | "header-only" | "container";
+
+/**
+ * Legacy visual style variant.
+ * @deprecated Use {@link CardHierarchy} via the `hierarchy` prop instead. Retained for backwards compatibility.
+ */
 export declare type CardVariant = "outlined" | "elevated" | "filled" | "ghost";
 
 /**
@@ -1819,6 +1878,61 @@ export declare interface CreatorTileProps extends React_2.HTMLAttributes<HTMLDiv
     aspectRatio?: CreatorTileAspectRatio;
 }
 
+/**
+ * A full-width, high-priority banner reserved for situations that block or
+ * significantly impact a user's ability to use the platform — account
+ * suspensions, blocking payment failures, identity verification requirements,
+ * or critical security notices. It sits at the very top of a page and is
+ * intentionally disruptive, so use it sparingly; for non-blocking messaging use
+ * {@link Alert} or {@link Banner} instead.
+ *
+ * Renders with `role="alert"` so assistive technology conveys its urgency;
+ * override `role` for a less assertive treatment when appropriate.
+ *
+ * @example
+ * ```tsx
+ * <CriticalBanner
+ *   title="Payment failed"
+ *   layout="trailing"
+ *   ctaLabel="Update payment"
+ *   ctaProps={{ onClick: handleUpdate }}
+ * >
+ *   We couldn't process your last payment. Update your details to keep your account active.
+ * </CriticalBanner>
+ * ```
+ */
+export declare const CriticalBanner: React_2.ForwardRefExoticComponent<CriticalBannerProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Placement of the call-to-action relative to the message.
+ *
+ * - `"trailing"` keeps the action inline, aligned to the end of the banner.
+ * - `"under"` stacks the action beneath the message (use when the CTA label is
+ *   too long to sit comfortably on the same line).
+ */
+export declare type CriticalBannerLayout = "trailing" | "under";
+
+export declare interface CriticalBannerProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Body copy describing the blocking situation. */
+    children: React_2.ReactNode;
+    /** Placement of the call-to-action relative to the message. @default "trailing" */
+    layout?: CriticalBannerLayout;
+    /** Optional bold heading shown above the body copy. */
+    title?: React_2.ReactNode;
+    /** Leading icon. Overrides the default filled warning icon. */
+    icon?: React_2.ReactNode;
+    /** Label for the built-in white call-to-action button. Ignored when `action` is set. */
+    ctaLabel?: React_2.ReactNode;
+    /**
+     * Props forwarded to the built-in call-to-action button (e.g. `onClick`).
+     * `asChild` is intentionally excluded — the built-in CTA renders `ctaLabel`
+     * as text; for a link or fully custom element use the `action` prop instead.
+     */
+    ctaProps?: Omit<ButtonProps, "variant" | "size" | "children" | "asChild">;
+    /** Custom action node rendered in place of the built-in call-to-action button. */
+    action?: React_2.ReactNode;
+}
+
 /**
  * Cross Circle icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
  *

package/dist/index.mjs

@@ -17,6 +17,7 @@ import { BottomNavigation } from "./components/BottomNavigation/BottomNavigation
 import { BottomNavigationAction } from "./components/BottomNavigation/BottomNavigationAction.mjs";
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./components/Breadcrumb/Breadcrumb.mjs";
 import { Button } from "./components/Button/Button.mjs";
+import { ButtonStack } from "./components/ButtonStack/ButtonStack.mjs";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./components/Card/Card.mjs";
 import { ChatInput } from "./components/ChatInput/ChatInput.mjs";
 import { ChatMessage } from "./components/ChatMessage/ChatMessage.mjs";
@@ -26,6 +27,7 @@ import { Count } from "./components/Count/Count.mjs";
 import { CreatorCard } from "./components/CreatorCard/CreatorCard.mjs";
 import { CreatorCover } from "./components/CreatorCover/CreatorCover.mjs";
 import { CreatorTile } from "./components/CreatorTile/CreatorTile.mjs";
+import { CriticalBanner } from "./components/CriticalBanner/CriticalBanner.mjs";
 import { CyclingText } from "./components/CyclingText/CyclingText.mjs";
 import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger } from "./components/Dialog/Dialog.mjs";
 import { Divider } from "./components/Divider/Divider.mjs";
@@ -299,6 +301,7 @@ export {
   BreadcrumbSeparator,
   BulbIcon,
   Button,
+  ButtonStack,
   Calendar2Icon,
   CalendarIcon,
   CameraIcon,
@@ -334,6 +337,7 @@ export {
   CreatorCard,
   CreatorCover,
   CreatorTile,
+  CriticalBanner,
   CrossCircleIcon,
   CrossIcon,
   CrownIcon,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fanvue/ui",
-  "version": "3.19.1",
+  "version": "3.20.0",
   "description": "React component library built with Tailwind CSS for Fanvue ecosystem",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -133,8 +133,8 @@
     "@types/react": "19.2.9",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "5.1.2",
-    "@vitest/browser-playwright": "4.1.8",
-    "@vitest/coverage-v8": "4.1.8",
+    "@vitest/browser-playwright": "4.1.10",
+    "@vitest/coverage-v8": "4.1.10",
     "autoprefixer": "10.4.23",
     "axe-core": "4.11.1",
     "chromatic": "13.3.5",
@@ -151,12 +151,12 @@
     "size-limit": "12.0.0",
     "storybook": "10.2.13",
     "style-dictionary": "4.2.0",
-    "svgo": "4.0.1",
+    "svgo": "4.0.2",
     "tailwindcss": "4.1.18",
     "typescript": "5.9.3",
     "vite": "7.3.5",
     "vite-plugin-dts": "4.5.4",
-    "vitest": "4.1.8",
+    "vitest": "4.1.10",
     "vitest-axe": "1.0.0-pre.3"
   },
   "pnpm": {
@@ -165,6 +165,7 @@
       "lodash-es": ">=4.18.0",
       "minimatch": ">=10.2.3",
       "ajv": ">=8.18.0",
+      "fast-uri": ">=3.1.4",
       "brace-expansion": ">=5.0.7",
       "yaml": ">=2.8.3",
       "postcss": ">=8.5.10",