@flamingo-stack/openframe-frontend-core 0.0.765 → 0.0.766

package/dist/{chunk-63N4FN5V.cjs → chunk-SETFUCZA.cjs}

@@ -7,10 +7,10 @@ var _chunkS5C3OZCOcjs = require('./chunk-S5C3OZCO.cjs');
 var _chunk4IYNDV3Gcjs = require('./chunk-4IYNDV3G.cjs');
 
 
-var _chunk2QMBXGMQcjs = require('./chunk-2QMBXGMQ.cjs');
+var _chunkTF5D5MNOcjs = require('./chunk-TF5D5MNO.cjs');
 
 
-var _chunk3ATAYP36cjs = require('./chunk-3ATAYP36.cjs');
+var _chunk65VVJSQZcjs = require('./chunk-65VVJSQZ.cjs');
 
 // src/components/features/video-center-badge.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -27,7 +27,7 @@ function VideoPlayBadge({ size = "md", className }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "div",
     {
-      className: _chunk3ATAYP36cjs.cn.call(void 0, 
+      className: _chunk65VVJSQZcjs.cn.call(void 0, 
         "pointer-events-none flex items-center justify-center text-ods-text-primary transition-colors",
         // Accent on card hover. These glyphs are pointer-events-none by design,
         // so they can never resolve their own :hover — they key off the host
@@ -47,7 +47,7 @@ function CardHoverPlay({ size = "md", className }) {
     "span",
     {
       "aria-hidden": "true",
-      className: _chunk3ATAYP36cjs.cn.call(void 0, 
+      className: _chunk65VVJSQZcjs.cn.call(void 0, 
         "pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-200",
         "group-focus-within:opacity-100 group-hover:opacity-100",
         className
@@ -62,7 +62,7 @@ function VideoUnmuteGlyph({ size = "md", className }) {
     {
       size: SIZES[size],
       color: "currentColor",
-      className: _chunk3ATAYP36cjs.cn.call(void 0, "transition-colors group-hover/card:text-ods-accent", className),
+      className: _chunk65VVJSQZcjs.cn.call(void 0, "transition-colors group-hover/card:text-ods-accent", className),
       style: { filter: GLYPH_SHADOW }
     }
   );
@@ -111,9 +111,9 @@ function VideoErrorOverlay({
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "absolute inset-0 z-10 flex flex-col items-center justify-center gap-[var(--spacing-system-sf)] bg-ods-overlay p-[var(--spacing-system-lf)] text-center", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-ods-text-secondary text-h6", children: "This video failed to play." }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-[var(--spacing-system-sf)]", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2QMBXGMQcjs.Button, { variant: "outline", size: "small", onClick: onRetry, children: "Try again" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTF5D5MNOcjs.Button, { variant: "outline", size: "small", onClick: onRetry, children: "Try again" }),
       watchOnYouTubeId ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunk2QMBXGMQcjs.Button,
+        _chunkTF5D5MNOcjs.Button,
         {
           variant: "transparent",
           size: "small",

package/dist/{chunk-2QMBXGMQ.cjs → chunk-TF5D5MNO.cjs}

@@ -4,58 +4,20 @@
 var _chunkV45KLJQPcjs = require('./chunk-V45KLJQP.cjs');
 
 
-var _chunk3ATAYP36cjs = require('./chunk-3ATAYP36.cjs');
+
+
+
+
+
+
+var _chunk65VVJSQZcjs = require('./chunk-65VVJSQZ.cjs');
 
 // src/components/ui/button/button.tsx
 var _reactslot = require('@radix-ui/react-slot');
 var _classvarianceauthority = require('class-variance-authority');
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-
-// src/components/ui/button/button-styles.ts
-var buttonSurfaceClasses = {
-  accent: "bg-ods-accent text-ods-text-on-accent hover:bg-ods-accent-hover active:bg-ods-accent-active disabled:bg-ods-disabled aria-disabled:bg-ods-disabled",
-  outline: "bg-ods-card text-ods-text-primary hover:bg-ods-bg-hover active:bg-ods-bg-active disabled:bg-ods-card disabled:text-ods-text-disabled aria-disabled:bg-ods-card aria-disabled:text-ods-text-disabled",
-  transparent: "bg-transparent text-ods-text-primary hover:bg-ods-bg-hover active:bg-ods-bg-active disabled:bg-transparent disabled:text-ods-text-disabled aria-disabled:bg-transparent aria-disabled:text-ods-text-disabled",
-  destructive: "bg-ods-error text-ods-text-on-accent hover:bg-ods-error-hover active:bg-ods-error-active disabled:bg-ods-disabled aria-disabled:bg-ods-disabled",
-  warning: "bg-ods-warning text-ods-text-on-accent hover:bg-ods-warning-hover active:bg-ods-warning-active disabled:bg-ods-disabled aria-disabled:bg-ods-disabled",
-  // The page's colours swapped: light on a dark theme, dark on a light one. A
-  // strong action that must NOT be the accent, for a surface that already
-  // holds the one accent call to action (an "Approve" inside a product demo).
-  inverted: "bg-ods-text-primary text-ods-bg hover:bg-ods-text-secondary active:bg-ods-text-secondary disabled:bg-ods-disabled aria-disabled:bg-ods-disabled",
-  // A self-contained glyph (play badge, unmute glyph) that already carries its
-  // own scrim: no button surface at all, in any state. Distinct from
-  // `transparent`, whose hover/active fills would paint a rectangle behind the
-  // glyph — which is why call sites were undoing them with
-  // `hover:bg-transparent active:bg-transparent`.
-  glyph: "bg-transparent text-ods-text-primary hover:bg-transparent active:bg-transparent disabled:bg-transparent disabled:text-ods-text-disabled aria-disabled:bg-transparent aria-disabled:text-ods-text-disabled",
-  // A quiet inline text action (a "Show all" / "Show less" disclosure, a
-  // secondary "Clear" beside a field): secondary text that takes the accent on
-  // hover, and no surface in any state. Promoted to a variant because the
-  // disclosure toggle was a primitive <button> restating these classes. Pair
-  // with size="compact" and noPaddingX so the label aligns with the text above.
-  link: "bg-transparent text-ods-text-secondary hover:bg-transparent hover:text-ods-accent active:bg-transparent active:text-ods-accent-active disabled:bg-transparent disabled:text-ods-text-disabled aria-disabled:bg-transparent aria-disabled:text-ods-text-disabled",
-  // Chrome that sits ON media (video cards, image lightboxes): a scrim disc so
-  // the glyph stays legible over an arbitrary frame. Promoted to a variant
-  // because the walkthrough card, its theater and the bite cards were each
-  // stacking the same classes at the call site.
-  overlay: "rounded-full bg-ods-overlay text-ods-text-primary backdrop-blur-sm hover:text-ods-accent active:text-ods-accent-active disabled:text-ods-text-disabled aria-disabled:text-ods-text-disabled"
-};
-var outlineBorderClasses = "border border-ods-border hover:border-ods-border-hover active:border-ods-border-active disabled:border-ods-border aria-disabled:border-ods-border";
-var splitGlyphSizeClasses = "[&_svg]:h-4 [&_svg]:w-4 md:[&_svg]:h-6 md:[&_svg]:w-6";
-var splitGlyphSizeBySize = {
-  default: splitGlyphSizeClasses,
-  small: "[&_svg]:h-4 [&_svg]:w-4"
-};
-var splitDividerColorClasses = {
-  accent: "border-ods-accent-active",
-  outline: "border-ods-border",
-  transparent: "border-ods-border",
-  destructive: "border-ods-error-active",
-  warning: "border-ods-warning-active"
-};
-
-// src/components/ui/button/button.tsx
 var _jsxruntime = require('react/jsx-runtime');
+var BUTTON_ICON_SM_SIZE = "2rem";
 var buttonVariants = _classvarianceauthority.cva.call(void 0, 
   [
     "relative inline-flex items-center justify-center gap-[var(--spacing-system-xsf)]",
@@ -68,56 +30,17 @@ var buttonVariants = _classvarianceauthority.cva.call(void 0,
   {
     variants: {
       variant: {
-        accent: buttonSurfaceClasses.accent,
-        outline: _chunk3ATAYP36cjs.cn.call(void 0, buttonSurfaceClasses.outline, outlineBorderClasses),
-        transparent: buttonSurfaceClasses.transparent,
-        destructive: buttonSurfaceClasses.destructive,
-        warning: buttonSurfaceClasses.warning,
-        inverted: buttonSurfaceClasses.inverted,
-        glyph: buttonSurfaceClasses.glyph,
-        overlay: buttonSurfaceClasses.overlay,
-        link: buttonSurfaceClasses.link
-      },
-      size: {
-        default: "h-11 px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)] text-h3 md:h-12",
-        small: "h-6 p-[var(--spacing-system-xs)] text-h5 md:h-8",
-        // The CHILD is the affordance (a badge, a chip, a thumbnail): the button
-        // contributes the hit target, the focus ring and the keyboard/ARIA
-        // semantics, and NO box of its own. Without this, call sites reached for
-        // a `className="h-auto p-0"` override to cancel the default box.
-        wrap: "h-auto p-0",
-        "small-legacy": "h-10 px-[var(--spacing-system-m)] py-[var(--spacing-system-xs)] text-[14px] font-bold",
-        // Temporary alias for "small" — deprecated; grep size="small-legacy" (lib + hub) and migrate the remaining consumers before removal
-        // 24px pill for slim strips (announcement/promo bars, inline banner
-        // actions — Primer banner / Polaris banner / Vercel-bar convention).
-        // The label matches the strip's MESSAGE type ramp exactly (DM Sans
-        // regular, 13px -> md:14px, snug leading — the announcement bar's
-        // subtitle styling): in-strip CTAs must never read louder than the
-        // message beside them, so this deliberately uses neither the
-        // mono-uppercase control style of "small" nor a heavier weight.
-        // Pinned h-6 across breakpoints (24px = the WCAG 2.5.8 target-size
-        // floor) with horizontal-dominant padding and a 14px glyph.
-        compact: "h-6 px-[var(--spacing-system-sf)] py-0 font-normal text-h6 [&_svg]:h-3.5 [&_svg]:w-3.5",
-        icon: "h-11 w-11 p-[var(--spacing-system-sf)] md:h-12 md:w-12 [&_svg]:h-4 [&_svg]:w-4 md:[&_svg]:h-6 md:[&_svg]:w-6",
-        // Quiet 32px icon target with a 16px glyph, fixed across breakpoints
-        // (Carbon ghost sm / Primer medium / shadcn icon-sm all pin 32px;
-        // ≥ the 24px WCAG 2.5.8 target floor). For icon actions that read as
-        // metadata rather than CTAs — author-page social rows, share rows.
-        // Pair with variant="transparent" for the ghost treatment.
-        "icon-sm": "h-8 w-8 p-[var(--spacing-system-xxs)] [&_svg]:h-4 [&_svg]:w-4",
-        // 20px inline glyph for affordances that sit INSIDE a line of text —
-        // an info hint beside a badge, a copy glyph after an id. `icon-sm`'s
-        // 32px target is correct for a metadata row but visually swamps a
-        // 10px badge or a 14px label, so hosts were reaching for className
-        // overrides to shrink it. Below the WCAG 2.5.8 target floor on purpose:
-        // this is only for glyphs whose information is ALSO available another
-        // way (tooltip content mirrored into an aria-describedby node), never
-        // for a sole means of performing an action.
-        "icon-inline": "h-5 min-h-0 w-5 min-w-0 shrink-0 p-0 [&_svg]:h-3.5 [&_svg]:w-3.5",
-        // Bare 56px media glyph (play / unmute over video). A size variant so
-        // hosts stop re-implementing a <button> to escape the 20px svg cap.
-        "icon-glyph": "h-14 w-14 p-0 [&_svg]:h-14 [&_svg]:w-14"
+        accent: _chunk65VVJSQZcjs.buttonSurfaceClasses.accent,
+        outline: _chunk65VVJSQZcjs.cn.call(void 0, _chunk65VVJSQZcjs.buttonSurfaceClasses.outline, _chunk65VVJSQZcjs.outlineBorderClasses),
+        transparent: _chunk65VVJSQZcjs.buttonSurfaceClasses.transparent,
+        destructive: _chunk65VVJSQZcjs.buttonSurfaceClasses.destructive,
+        warning: _chunk65VVJSQZcjs.buttonSurfaceClasses.warning,
+        inverted: _chunk65VVJSQZcjs.buttonSurfaceClasses.inverted,
+        glyph: _chunk65VVJSQZcjs.buttonSurfaceClasses.glyph,
+        overlay: _chunk65VVJSQZcjs.buttonSurfaceClasses.overlay,
+        link: _chunk65VVJSQZcjs.buttonSurfaceClasses.link
       },
+      size: _chunk65VVJSQZcjs.BUTTON_SIZE_CLASS,
       // Label typography axis (Figma 133-740). `bold` is the classic h3-bold
       // label; `regular` swaps the DEFAULT size's label to the h4 step
       // (DM Sans 500, neutral tracking) — added for navigation buttons.
@@ -172,11 +95,11 @@ var splitShellVariants = _classvarianceauthority.cva.call(void 0,
   {
     variants: {
       variant: {
-        accent: buttonSurfaceClasses.accent,
-        outline: _chunk3ATAYP36cjs.cn.call(void 0, buttonSurfaceClasses.outline, outlineBorderClasses),
-        transparent: buttonSurfaceClasses.transparent,
-        destructive: buttonSurfaceClasses.destructive,
-        warning: buttonSurfaceClasses.warning
+        accent: _chunk65VVJSQZcjs.buttonSurfaceClasses.accent,
+        outline: _chunk65VVJSQZcjs.cn.call(void 0, _chunk65VVJSQZcjs.buttonSurfaceClasses.outline, _chunk65VVJSQZcjs.outlineBorderClasses),
+        transparent: _chunk65VVJSQZcjs.buttonSurfaceClasses.transparent,
+        destructive: _chunk65VVJSQZcjs.buttonSurfaceClasses.destructive,
+        warning: _chunk65VVJSQZcjs.buttonSurfaceClasses.warning
       },
       size: {
         default: "h-12",
@@ -205,7 +128,7 @@ var splitSlotVariants = _classvarianceauthority.cva.call(void 0,
         main: "gap-[var(--spacing-system-xsf)]",
         icon: "border-l"
       },
-      size: splitGlyphSizeBySize,
+      size: _chunk65VVJSQZcjs.splitGlyphSizeBySize,
       variant: { accent: "", outline: "", transparent: "", destructive: "", warning: "" },
       fullWidth: { true: "", false: "" }
     },
@@ -225,26 +148,26 @@ var splitSlotVariants = _classvarianceauthority.cva.call(void 0,
       {
         slot: "icon",
         variant: "accent",
-        class: _chunk3ATAYP36cjs.cn.call(void 0, 
-          splitDividerColorClasses.accent,
+        class: _chunk65VVJSQZcjs.cn.call(void 0, 
+          _chunk65VVJSQZcjs.splitDividerColorClasses.accent,
           "group-disabled:border-ods-disabled group-aria-disabled:border-ods-disabled"
         )
       },
-      { slot: "icon", variant: "outline", class: splitDividerColorClasses.outline },
-      { slot: "icon", variant: "transparent", class: splitDividerColorClasses.transparent },
+      { slot: "icon", variant: "outline", class: _chunk65VVJSQZcjs.splitDividerColorClasses.outline },
+      { slot: "icon", variant: "transparent", class: _chunk65VVJSQZcjs.splitDividerColorClasses.transparent },
       {
         slot: "icon",
         variant: "destructive",
-        class: _chunk3ATAYP36cjs.cn.call(void 0, 
-          splitDividerColorClasses.destructive,
+        class: _chunk65VVJSQZcjs.cn.call(void 0, 
+          _chunk65VVJSQZcjs.splitDividerColorClasses.destructive,
           "group-disabled:border-ods-disabled group-aria-disabled:border-ods-disabled"
         )
       },
       {
         slot: "icon",
         variant: "warning",
-        class: _chunk3ATAYP36cjs.cn.call(void 0, 
-          splitDividerColorClasses.warning,
+        class: _chunk65VVJSQZcjs.cn.call(void 0, 
+          _chunk65VVJSQZcjs.splitDividerColorClasses.warning,
           "group-disabled:border-ods-disabled group-aria-disabled:border-ods-disabled"
         )
       }
@@ -291,11 +214,11 @@ var Button = _react2.default.forwardRef(function ButtonImpl({
   if (useSplitLayout) {
     const safeSize = _nullishCoalesce(size, () => ( "default"));
     const safeVariant = _nullishCoalesce(variant, () => ( "accent"));
-    const shellClasses = _chunk3ATAYP36cjs.cn.call(void 0, splitShellVariants({ variant: safeVariant, size: safeSize, font, fullWidth }), className);
+    const shellClasses = _chunk65VVJSQZcjs.cn.call(void 0, splitShellVariants({ variant: safeVariant, size: safeSize, font, fullWidth }), className);
     const mainSlotClass = splitSlotVariants({ slot: "main", size: safeSize, variant: safeVariant, fullWidth });
     const iconSlotClass = splitSlotVariants({ slot: "icon", size: safeSize, variant: safeVariant });
     const splitContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: _chunk3ATAYP36cjs.cn.call(void 0, "contents", loading && "invisible"), children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: _chunk65VVJSQZcjs.cn.call(void 0, "contents", loading && "invisible"), children: [
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: mainSlotClass, children: [
           leftIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "inline-flex items-center", children: leftIcon }),
           children,
@@ -311,9 +234,9 @@ var Button = _react2.default.forwardRef(function ButtonImpl({
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "span",
         {
-          className: _chunk3ATAYP36cjs.cn.call(void 0, 
+          className: _chunk65VVJSQZcjs.cn.call(void 0, 
             "absolute inset-0 inline-flex items-center justify-center text-ods-text-primary",
-            splitGlyphSizeBySize[safeSize]
+            _chunk65VVJSQZcjs.splitGlyphSizeBySize[safeSize]
           ),
           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, {})
         }
@@ -326,7 +249,7 @@ var Button = _react2.default.forwardRef(function ButtonImpl({
           href,
           download,
           prefetch: false,
-          className: _chunk3ATAYP36cjs.cn.call(void 0, shellClasses, isDisabled && "pointer-events-none"),
+          className: _chunk65VVJSQZcjs.cn.call(void 0, shellClasses, isDisabled && "pointer-events-none"),
           onClick,
           "aria-label": props["aria-label"],
           children: splitContent
@@ -350,7 +273,7 @@ var Button = _react2.default.forwardRef(function ButtonImpl({
           "aria-label": props["aria-label"],
           "aria-disabled": isDisabled || void 0,
           tabIndex: isDisabled ? -1 : void 0,
-          className: _chunk3ATAYP36cjs.cn.call(void 0, shellClasses, isDisabled && "pointer-events-none"),
+          className: _chunk65VVJSQZcjs.cn.call(void 0, shellClasses, isDisabled && "pointer-events-none"),
           onClick: splitAnchor.onClick,
           children: splitContent
         }
@@ -358,12 +281,12 @@ var Button = _react2.default.forwardRef(function ButtonImpl({
     }
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { ref, className: shellClasses, disabled: isDisabled, onClick, ...props, children: splitContent });
   }
-  const classes = _chunk3ATAYP36cjs.cn.call(void 0, buttonVariants({ variant, size, font, fullWidth, noPaddingX, attach }), className);
+  const classes = _chunk65VVJSQZcjs.cn.call(void 0, buttonVariants({ variant, size, font, fullWidth, noPaddingX, attach }), className);
   if (asChild) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactslot.Slot, { ref, className: classes, ...props, children });
   }
   const content = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: _chunk3ATAYP36cjs.cn.call(void 0, "contents", loading && "invisible"), children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: _chunk65VVJSQZcjs.cn.call(void 0, "contents", loading && "invisible"), children: [
       leftIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "inline-flex items-center", children: leftIcon }),
       children,
       rightIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "inline-flex items-center", children: rightIcon })
@@ -377,7 +300,7 @@ var Button = _react2.default.forwardRef(function ButtonImpl({
         href,
         download,
         prefetch: false,
-        className: _chunk3ATAYP36cjs.cn.call(void 0, classes, isDisabled && "pointer-events-none"),
+        className: _chunk65VVJSQZcjs.cn.call(void 0, classes, isDisabled && "pointer-events-none"),
         onClick,
         "aria-label": props["aria-label"],
         children: content
@@ -401,7 +324,7 @@ var Button = _react2.default.forwardRef(function ButtonImpl({
         "aria-label": props["aria-label"],
         "aria-disabled": isDisabled || void 0,
         tabIndex: isDisabled ? -1 : void 0,
-        className: _chunk3ATAYP36cjs.cn.call(void 0, classes, isDisabled && "pointer-events-none"),
+        className: _chunk65VVJSQZcjs.cn.call(void 0, classes, isDisabled && "pointer-events-none"),
         onClick: anchor.onClick,
         children: content
       }
@@ -411,10 +334,189 @@ var Button = _react2.default.forwardRef(function ButtonImpl({
 });
 Button.displayName = "Button";
 
+// src/components/ui/button/split-button.tsx
+
+
+
+var splitHalfBase = [
+  "relative inline-flex items-center justify-center gap-[var(--spacing-system-xsf)]",
+  "whitespace-nowrap transition-colors duration-200",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus focus-visible:z-10",
+  "disabled:pointer-events-none",
+  "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+];
+var splitHalfVariants = _classvarianceauthority.cva.call(void 0, splitHalfBase, {
+  variants: {
+    variant: {
+      accent: _chunk65VVJSQZcjs.buttonSurfaceClasses.accent,
+      outline: _chunk65VVJSQZcjs.buttonSurfaceClasses.outline,
+      // Outline border lives in compoundVariants so we can omit the seam edge.
+      transparent: _chunk65VVJSQZcjs.buttonSurfaceClasses.transparent,
+      destructive: _chunk65VVJSQZcjs.buttonSurfaceClasses.destructive,
+      warning: _chunk65VVJSQZcjs.buttonSurfaceClasses.warning
+    },
+    size: {
+      default: `h-10 px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)] text-h3 md:h-12 ${_chunk65VVJSQZcjs.splitGlyphSizeClasses}`,
+      small: "h-6 px-[var(--spacing-system-xs)] text-h5 md:h-8 [&_svg]:h-3 [&_svg]:w-3 md:[&_svg]:h-4 md:[&_svg]:w-4"
+    },
+    side: { main: "", icon: "" },
+    soloOnMobile: { true: "", false: "" }
+  },
+  compoundVariants: [
+    // Rounded corners + per-variant seam. The icon-side's left border is the divider.
+    { variant: "accent", side: "main", class: "rounded-l-md" },
+    {
+      variant: "accent",
+      side: "icon",
+      class: _chunk65VVJSQZcjs.cn.call(void 0, 
+        "rounded-r-md border-l",
+        _chunk65VVJSQZcjs.splitDividerColorClasses.accent,
+        "disabled:border-ods-disabled aria-disabled:border-ods-disabled"
+      )
+    },
+    { variant: "destructive", side: "main", class: "rounded-l-md" },
+    {
+      variant: "destructive",
+      side: "icon",
+      class: _chunk65VVJSQZcjs.cn.call(void 0, 
+        "rounded-r-md border-l",
+        _chunk65VVJSQZcjs.splitDividerColorClasses.destructive,
+        "disabled:border-ods-disabled aria-disabled:border-ods-disabled"
+      )
+    },
+    { variant: "warning", side: "main", class: "rounded-l-md" },
+    {
+      variant: "warning",
+      side: "icon",
+      class: _chunk65VVJSQZcjs.cn.call(void 0, 
+        "rounded-r-md border-l",
+        _chunk65VVJSQZcjs.splitDividerColorClasses.warning,
+        "disabled:border-ods-disabled aria-disabled:border-ods-disabled"
+      )
+    },
+    { variant: "outline", side: "main", class: "rounded-l-md border-y border-l border-ods-border" },
+    { variant: "outline", side: "icon", class: "rounded-r-md border border-ods-border" },
+    { variant: "transparent", side: "main", class: "rounded-md" },
+    { variant: "transparent", side: "icon", class: _chunk65VVJSQZcjs.cn.call(void 0, "rounded-md", _chunk65VVJSQZcjs.splitDividerColorClasses.transparent) },
+    // Icon half: per Figma, narrower than main height (default: 40×48; small: 32×32).
+    { side: "icon", size: "default", class: "w-10 px-0" },
+    { side: "icon", size: "small", class: "w-6 px-0 md:w-8" },
+    { side: "icon", soloOnMobile: true, class: "max-md:hidden" },
+    { side: "main", soloOnMobile: true, class: "max-md:rounded-r-md" },
+    { variant: "outline", side: "main", soloOnMobile: true, class: "max-md:border-r" }
+  ],
+  defaultVariants: { variant: "accent", size: "default", side: "main", soloOnMobile: false }
+});
+function Half({
+  variant,
+  size,
+  side,
+  soloOnMobile,
+  href,
+  openInNewTab,
+  prefetch,
+  onClick,
+  disabled,
+  grow,
+  type = "button",
+  ariaLabel,
+  children
+}) {
+  const classes = _chunk65VVJSQZcjs.cn.call(void 0, splitHalfVariants({ variant, size, side, soloOnMobile }), grow && "flex-1");
+  if (href) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkV45KLJQPcjs.next_link_default,
+      {
+        href,
+        prefetch,
+        target: openInNewTab ? "_blank" : void 0,
+        rel: openInNewTab ? "noopener noreferrer" : void 0,
+        "aria-disabled": disabled || void 0,
+        tabIndex: disabled ? -1 : void 0,
+        "aria-label": ariaLabel,
+        className: _chunk65VVJSQZcjs.cn.call(void 0, classes, disabled && "pointer-events-none"),
+        onClick,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { type, className: classes, disabled, "aria-label": ariaLabel, onClick, children });
+}
+var SplitButton = _react2.default.forwardRef(function SplitButtonImpl({
+  variant = "accent",
+  size = "default",
+  fullWidth = false,
+  className,
+  children,
+  onClick,
+  href,
+  openInNewTab,
+  prefetch,
+  leftIcon,
+  rightIcon,
+  disabled,
+  mainDisabled,
+  type,
+  iconAction,
+  "aria-label": ariaLabel,
+  groupAriaLabel
+}, ref) {
+  const soloOnMobile = !!iconAction.openInNewTab;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      ref,
+      role: "group",
+      "aria-label": groupAriaLabel,
+      className: _chunk65VVJSQZcjs.cn.call(void 0, "inline-flex items-stretch", fullWidth && "w-full", className),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          Half,
+          {
+            variant,
+            size,
+            side: "main",
+            soloOnMobile,
+            href,
+            openInNewTab,
+            prefetch,
+            onClick,
+            disabled: disabled || mainDisabled,
+            grow: fullWidth,
+            type,
+            ariaLabel,
+            children: [
+              leftIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "inline-flex items-center", children: leftIcon }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children }),
+              rightIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "inline-flex items-center", children: rightIcon })
+            ]
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          Half,
+          {
+            variant,
+            size,
+            side: "icon",
+            soloOnMobile,
+            href: iconAction.href,
+            openInNewTab: iconAction.openInNewTab,
+            prefetch: iconAction.prefetch,
+            onClick: iconAction.onClick,
+            disabled: disabled || iconAction.disabled,
+            ariaLabel: iconAction["aria-label"],
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "inline-flex items-center", children: iconAction.icon })
+          }
+        )
+      ]
+    }
+  );
+});
+SplitButton.displayName = "SplitButton";
 
 
 
 
 
 
-exports.buttonSurfaceClasses = buttonSurfaceClasses; exports.splitGlyphSizeClasses = splitGlyphSizeClasses; exports.splitDividerColorClasses = splitDividerColorClasses; exports.buttonVariants = buttonVariants; exports.Button = Button;
+exports.BUTTON_ICON_SM_SIZE = BUTTON_ICON_SM_SIZE; exports.buttonVariants = buttonVariants; exports.Button = Button; exports.SplitButton = SplitButton;

package/dist/{chunk-NET74KSQ.cjs → chunk-TZ4GKUO2.cjs}

@@ -5,10 +5,10 @@ var _chunkASMNNSUQcjs = require('./chunk-ASMNNSUQ.cjs');
 
 
 
-var _chunkR3TWQ3ZJcjs = require('./chunk-R3TWQ3ZJ.cjs');
+var _chunk5P4TDV7Vcjs = require('./chunk-5P4TDV7V.cjs');
 
 
-var _chunk3ATAYP36cjs = require('./chunk-3ATAYP36.cjs');
+var _chunk65VVJSQZcjs = require('./chunk-65VVJSQZ.cjs');
 
 // src/utils/visitor-os.ts
 var DESKTOP_OSES = ["mac", "windows", "linux"];
@@ -71,9 +71,9 @@ function useVisitorOs() {
 // src/utils/platform-config.tsx
 
 function renderPlatformIcon(platformName, className) {
-  return _react.createElement.call(void 0, _chunkR3TWQ3ZJcjs.PlatformMark, {
+  return _react.createElement.call(void 0, _chunk5P4TDV7Vcjs.PlatformMark, {
     platform: platformName,
-    className: _chunk3ATAYP36cjs.cn.call(void 0, className, _chunkR3TWQ3ZJcjs.getPlatformBrandClasses.call(void 0, platformName).accentText)
+    className: _chunk65VVJSQZcjs.cn.call(void 0, className, _chunk5P4TDV7Vcjs.getPlatformBrandClasses.call(void 0, platformName).accentText)
   });
 }
 var platformIcons = {
@@ -113,7 +113,7 @@ function getPlatformIconComponent(platformName, className = "h-6 w-6") {
   return renderPlatformIcon(platformName, className);
 }
 function getPlatformColorClass(platformName) {
-  return _chunkR3TWQ3ZJcjs.getPlatformBrandClasses.call(void 0, platformName).accentBg;
+  return _chunk5P4TDV7Vcjs.getPlatformBrandClasses.call(void 0, platformName).accentBg;
 }
 
 // src/utils/access-code-client.ts