silver-ui 0.4.0 → 0.6.0

package/dist/{chunk-VQ7U3ASC.js → chunk-S4IHNNA2.js}

@@ -1,11 +1,107 @@
-import { VisuallyHidden } from './chunk-7BSFKG7N.js';
+import { VisuallyHidden } from './chunk-V2V5TTTL.js';
 import { mergeRefs } from './chunk-SGLIDI6R.js';
-import { Icon } from './chunk-7T3SWOY7.js';
-import { css } from './chunk-OD4DHHZH.js';
+import { Icon } from './chunk-IUW777WZ.js';
+import { sva } from './chunk-IAVZKGZS.js';
 import { cx } from './chunk-PPNETWIP.js';
 import { createContext, useRef, useCallback, useMemo, use } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
+// src/components/SegmentedControl/SegmentedControl.recipe.ts
+var segmentedControlRecipe = sva({
+  slots: ["root", "item", "icon"],
+  base: {
+    root: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "0.5",
+      p: "0.5",
+      bg: "surface.gray",
+      borderRadius: "md"
+    },
+    item: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "1",
+      borderWidth: 0,
+      borderStyle: "none",
+      bg: "transparent",
+      color: "fg.muted",
+      cursor: "pointer",
+      fontFamily: "body",
+      fontWeight: "medium",
+      lineHeight: "normal",
+      transitionProperty: "background-color, color, box-shadow",
+      transitionDuration: "fast",
+      transitionTimingFunction: "default",
+      _hover: {
+        bg: "bg.subtle"
+      },
+      _focusVisible: {
+        outlineWidth: "focus",
+        outlineStyle: "solid",
+        outlineColor: "primary",
+        outlineOffset: "focusOffset"
+      }
+    },
+    icon: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0
+    }
+  },
+  variants: {
+    size: {
+      sm: { item: { h: "7", px: "2", borderRadius: "sm", fontSize: "sm" } },
+      md: { item: { h: "9", px: "3", borderRadius: "sm", fontSize: "sm" } },
+      lg: { item: { h: "11", px: "3", borderRadius: "md", fontSize: "md" } }
+    },
+    layout: {
+      hug: {},
+      fill: {
+        root: { display: "flex", w: "full" },
+        item: { flex: 1 }
+      }
+    },
+    isSelected: {
+      true: {
+        item: {
+          bg: "bg",
+          color: "fg",
+          fontWeight: "semibold",
+          boxShadow: "sm",
+          _hover: {
+            bg: "bg"
+          }
+        }
+      },
+      false: {}
+    },
+    isDisabled: {
+      true: {
+        root: {
+          opacity: 0.5,
+          pointerEvents: "none"
+        },
+        item: {
+          color: "fg.disabled",
+          cursor: "default",
+          _hover: {
+            bg: "transparent"
+          }
+        }
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    layout: "hug",
+    isSelected: false,
+    isDisabled: false
+  }
+});
 var SegmentedControlContext = createContext(null);
 SegmentedControlContext.displayName = "SegmentedControlContext";
 function useSegmentedControlContext() {
@@ -17,24 +113,6 @@ function useSegmentedControlContext() {
   }
   return context;
 }
-var styles = {
-  root: css({
-    display: "inline-flex",
-    alignItems: "center",
-    gap: "0.5",
-    p: "0.5",
-    bg: "surface.gray",
-    borderRadius: "md"
-  }),
-  fill: css({
-    display: "flex",
-    w: "full"
-  }),
-  disabled: css({
-    opacity: 0.5,
-    pointerEvents: "none"
-  })
-};
 function SegmentedControl({
   children,
   className,
@@ -59,6 +137,7 @@ function SegmentedControl({
     () => ({ isDisabled, layout, onChange: handleChange, size, value }),
     [handleChange, isDisabled, layout, size, value]
   );
+  const classes = segmentedControlRecipe({ isDisabled, layout });
   const handleKeyDown = useCallback(
     (event) => {
       if (isDisabled) {
@@ -114,12 +193,7 @@ function SegmentedControl({
       "aria-disabled": isDisabled || void 0,
       "aria-label": label,
       "aria-orientation": "horizontal",
-      className: cx(
-        styles.root,
-        layout === "fill" ? styles.fill : void 0,
-        isDisabled ? styles.disabled : void 0,
-        className
-      ),
+      className: cx(classes.root, className),
       "data-testid": dataTestId,
       onKeyDown: handleKeyDown,
       ref: mergeRefs(ref, containerRef),
@@ -131,79 +205,6 @@ function SegmentedControl({
   ) });
 }
 SegmentedControl.displayName = "SegmentedControl";
-var styles2 = {
-  item: css({
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "1",
-    borderWidth: 0,
-    borderStyle: "none",
-    bg: "transparent",
-    color: "fg.muted",
-    cursor: "pointer",
-    fontFamily: "body",
-    fontWeight: "medium",
-    lineHeight: "normal",
-    transitionProperty: "background-color, color, box-shadow",
-    transitionDuration: "fast",
-    transitionTimingFunction: "default",
-    _hover: {
-      bg: "bg.subtle"
-    },
-    _focusVisible: {
-      outlineWidth: "focus",
-      outlineStyle: "solid",
-      outlineColor: "primary",
-      outlineOffset: "focusOffset"
-    }
-  }),
-  selected: css({
-    bg: "bg",
-    color: "fg",
-    fontWeight: "semibold",
-    boxShadow: "sm",
-    _hover: {
-      bg: "bg"
-    }
-  }),
-  disabled: css({
-    color: "fg.disabled",
-    cursor: "default",
-    _hover: {
-      bg: "transparent"
-    }
-  }),
-  fill: css({
-    flex: 1
-  }),
-  icon: css({
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexShrink: 0
-  }),
-  size: {
-    sm: css({
-      h: "7",
-      px: "2",
-      borderRadius: "sm",
-      fontSize: "sm"
-    }),
-    md: css({
-      h: "9",
-      px: "3",
-      borderRadius: "sm",
-      fontSize: "sm"
-    }),
-    lg: css({
-      h: "11",
-      px: "3",
-      borderRadius: "md",
-      fontSize: "md"
-    })
-  }
-};
 function SegmentedControlItem({
   className,
   "data-testid": dataTestId,
@@ -218,20 +219,19 @@ function SegmentedControlItem({
   const context = useSegmentedControlContext();
   const isSelected = context.value === value;
   const isItemDisabled = context.isDisabled || isDisabled;
+  const classes = segmentedControlRecipe({
+    size: context.size,
+    layout: context.layout,
+    isSelected,
+    isDisabled: isItemDisabled
+  });
   return /* @__PURE__ */ jsxs(
     "button",
     {
       "aria-checked": isSelected,
       "aria-disabled": isItemDisabled || void 0,
       "aria-label": isLabelHidden ? label : void 0,
-      className: cx(
-        styles2.item,
-        styles2.size[context.size],
-        context.layout === "fill" ? styles2.fill : void 0,
-        isSelected ? styles2.selected : void 0,
-        isItemDisabled ? styles2.disabled : void 0,
-        className
-      ),
+      className: cx(classes.item, className),
       "data-testid": dataTestId,
       "data-value": value,
       onClick: () => {
@@ -245,7 +245,7 @@ function SegmentedControlItem({
       tabIndex: isSelected ? 0 : -1,
       type: "button",
       children: [
-        icon != null ? /* @__PURE__ */ jsx("span", { className: styles2.icon, children: /* @__PURE__ */ jsx(Icon, { icon, size: context.size }) }) : null,
+        icon != null ? /* @__PURE__ */ jsx("span", { className: classes.icon, children: /* @__PURE__ */ jsx(Icon, { icon, size: context.size }) }) : null,
         isLabelHidden ? /* @__PURE__ */ jsx(VisuallyHidden, { children: label }) : label
       ]
     }
@@ -254,5 +254,5 @@ function SegmentedControlItem({
 SegmentedControlItem.displayName = "SegmentedControlItem";
 
 export { SegmentedControl, SegmentedControlItem };
-//# sourceMappingURL=chunk-VQ7U3ASC.js.map
-//# sourceMappingURL=chunk-VQ7U3ASC.js.map
+//# sourceMappingURL=chunk-S4IHNNA2.js.map
+//# sourceMappingURL=chunk-S4IHNNA2.js.map

package/dist/chunk-S4IHNNA2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SegmentedControl/SegmentedControl.recipe.ts","../src/components/SegmentedControl/SegmentedControlContext.ts","../src/components/SegmentedControl/SegmentedControl.tsx","../src/components/SegmentedControl/SegmentedControlItem.tsx"],"names":["jsx"],"mappings":";;;;;;;;;AAEO,IAAM,yBAAyB,GAAA,CAAI;AAAA,EACxC,KAAA,EAAO,CAAC,MAAA,EAAQ,MAAA,EAAQ,MAAM,CAAA;AAAA,EAC9B,IAAA,EAAM;AAAA,IACJ,IAAA,EAAM;AAAA,MACJ,OAAA,EAAS,aAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,GAAA,EAAK,KAAA;AAAA,MACL,CAAA,EAAG,KAAA;AAAA,MACH,EAAA,EAAI,cAAA;AAAA,MACJ,YAAA,EAAc;AAAA,KAChB;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,OAAA,EAAS,aAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,cAAA,EAAgB,QAAA;AAAA,MAChB,GAAA,EAAK,GAAA;AAAA,MACL,WAAA,EAAa,CAAA;AAAA,MACb,WAAA,EAAa,MAAA;AAAA,MACb,EAAA,EAAI,aAAA;AAAA,MACJ,KAAA,EAAO,UAAA;AAAA,MACP,MAAA,EAAQ,SAAA;AAAA,MACR,UAAA,EAAY,MAAA;AAAA,MACZ,UAAA,EAAY,QAAA;AAAA,MACZ,UAAA,EAAY,QAAA;AAAA,MACZ,kBAAA,EAAoB,qCAAA;AAAA,MACpB,kBAAA,EAAoB,MAAA;AAAA,MACpB,wBAAA,EAA0B,SAAA;AAAA,MAC1B,MAAA,EAAQ;AAAA,QACN,EAAA,EAAI;AAAA,OACN;AAAA,MACA,aAAA,EAAe;AAAA,QACb,YAAA,EAAc,OAAA;AAAA,QACd,YAAA,EAAc,OAAA;AAAA,QACd,YAAA,EAAc,SAAA;AAAA,QACd,aAAA,EAAe;AAAA;AACjB,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,OAAA,EAAS,aAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,cAAA,EAAgB,QAAA;AAAA,MAChB,UAAA,EAAY;AAAA;AACd,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,EAAC,IAAA,EAAM,EAAC,CAAA,EAAG,GAAA,EAAK,EAAA,EAAI,GAAA,EAAK,YAAA,EAAc,IAAA,EAAM,QAAA,EAAU,IAAA,EAAI,EAAC;AAAA,MAChE,EAAA,EAAI,EAAC,IAAA,EAAM,EAAC,CAAA,EAAG,GAAA,EAAK,EAAA,EAAI,GAAA,EAAK,YAAA,EAAc,IAAA,EAAM,QAAA,EAAU,IAAA,EAAI,EAAC;AAAA,MAChE,EAAA,EAAI,EAAC,IAAA,EAAM,EAAC,CAAA,EAAG,IAAA,EAAM,EAAA,EAAI,GAAA,EAAK,YAAA,EAAc,IAAA,EAAM,QAAA,EAAU,IAAA,EAAI;AAAC,KACnE;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,KAAK,EAAC;AAAA,MACN,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM,EAAC,OAAA,EAAS,MAAA,EAAQ,GAAG,MAAA,EAAM;AAAA,QACjC,IAAA,EAAM,EAAC,IAAA,EAAM,CAAA;AAAC;AAChB,KACF;AAAA,IACA,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM;AAAA,UACJ,EAAA,EAAI,IAAA;AAAA,UACJ,KAAA,EAAO,IAAA;AAAA,UACP,UAAA,EAAY,UAAA;AAAA,UACZ,SAAA,EAAW,IAAA;AAAA,UACX,MAAA,EAAQ;AAAA,YACN,EAAA,EAAI;AAAA;AACN;AACF,OACF;AAAA,MACA,OAAO;AAAC,KACV;AAAA,IACA,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM;AAAA,UACJ,OAAA,EAAS,GAAA;AAAA,UACT,aAAA,EAAe;AAAA,SACjB;AAAA,QACA,IAAA,EAAM;AAAA,UACJ,KAAA,EAAO,aAAA;AAAA,UACP,MAAA,EAAQ,SAAA;AAAA,UACR,MAAA,EAAQ;AAAA,YACN,EAAA,EAAI;AAAA;AACN;AACF,OACF;AAAA,MACA,OAAO;AAAC;AACV,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,IAAA;AAAA,IACN,MAAA,EAAQ,KAAA;AAAA,IACR,UAAA,EAAY,KAAA;AAAA,IACZ,UAAA,EAAY;AAAA;AAEhB,CAAC,CAAA;ACnFM,IAAM,uBAAA,GACX,cAAmD,IAAI,CAAA;AAEzD,uBAAA,CAAwB,WAAA,GAAc,yBAAA;AAE/B,SAAS,0BAAA,GAA2D;AACzE,EAAA,MAAM,OAAA,GAAU,IAAI,uBAAuB,CAAA;AAC3C,EAAA,IAAI,WAAW,IAAA,EAAM;AACnB,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA,EACF;AACA,EAAA,OAAO,OAAA;AACT;ACkDO,SAAS,gBAAA,CAAiD;AAAA,EAC/D,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,UAAA,GAAa,KAAA;AAAA,EACb,KAAA;AAAA,EACA,MAAA,GAAS,KAAA;AAAA,EACT,QAAA;AAAA,EACA,GAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,KAAA;AAAA,EACA;AACF,CAAA,EAAqD;AACnD,EAAA,MAAM,YAAA,GAAe,OAAuB,IAAI,CAAA;AAChD,EAAA,MAAM,YAAA,GAAe,WAAA;AAAA,IACnB,CAAC,SAAA,KAAsB;AACrB,MAAA,QAAA,CAAS,SAAmB,CAAA;AAAA,IAC9B,CAAA;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AACA,EAAA,MAAM,YAAA,GAAe,OAAA;AAAA,IACnB,OAAO,EAAC,UAAA,EAAY,QAAQ,QAAA,EAAU,YAAA,EAAc,MAAM,KAAA,EAAK,CAAA;AAAA,IAC/D,CAAC,YAAA,EAAc,UAAA,EAAY,MAAA,EAAQ,MAAM,KAAK;AAAA,GAChD;AACA,EAAA,MAAM,OAAA,GAAU,sBAAA,CAAuB,EAAC,UAAA,EAAY,QAAO,CAAA;AAE3D,EAAA,MAAM,aAAA,GAAgB,WAAA;AAAA,IACpB,CAAC,KAAA,KAAyC;AACxC,MAAA,IAAI,UAAA,EAAY;AACd,QAAA;AAAA,MACF;AAEA,MAAA,MAAM,YAAY,YAAA,CAAa,OAAA;AAC/B,MAAA,IAAI,aAAa,IAAA,EAAM;AACrB,QAAA;AAAA,MACF;AAEA,MAAA,MAAM,QAAQ,KAAA,CAAM,IAAA;AAAA,QAClB,SAAA,CAAU,gBAAA;AAAA,UACR;AAAA;AACF,OACF;AAEA,MAAA,IAAI,KAAA,CAAM,WAAW,CAAA,EAAG;AACtB,QAAA;AAAA,MACF;AAEA,MAAA,MAAM,eAAe,KAAA,CAAM,SAAA;AAAA,QACzB,CAAA,IAAA,KAAQ,SAAS,QAAA,CAAS;AAAA,OAC5B;AACA,MAAA,IAAI,SAAA;AAEJ,MAAA,QAAQ,MAAM,GAAA;AAAK,QACjB,KAAK,YAAA;AAAA,QACL,KAAK,WAAA;AACH,UAAA,SAAA,GACE,YAAA,KAAiB,EAAA,GAAK,CAAA,GAAA,CAAK,YAAA,GAAe,KAAK,KAAA,CAAM,MAAA;AACvD,UAAA;AAAA,QACF,KAAK,WAAA;AAAA,QACL,KAAK,SAAA;AACH,UAAA,SAAA,GACE,YAAA,KAAiB,KACb,KAAA,CAAM,MAAA,GAAS,KACd,YAAA,GAAe,CAAA,GAAI,KAAA,CAAM,MAAA,IAAU,KAAA,CAAM,MAAA;AAChD,UAAA;AAAA,QACF,KAAK,MAAA;AACH,UAAA,SAAA,GAAY,CAAA;AACZ,UAAA;AAAA,QACF,KAAK,KAAA;AACH,UAAA,SAAA,GAAY,MAAM,MAAA,GAAS,CAAA;AAC3B,UAAA;AAAA,QACF;AACE,UAAA;AAAA;AAGJ,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,MAAM,QAAA,GAAW,MAAM,SAAS,CAAA;AAChC,MAAA,QAAA,CAAS,KAAA,EAAM;AACf,MAAA,MAAM,SAAA,GAAY,SAAS,OAAA,CAAQ,KAAA;AACnC,MAAA,IAAI,aAAa,IAAA,EAAM;AACrB,QAAA,YAAA,CAAa,SAAS,CAAA;AAAA,MACxB;AAAA,IACF,CAAA;AAAA,IACA,CAAC,cAAc,UAAU;AAAA,GAC3B;AAEA,EAAA,uBACE,GAAA,CAAC,uBAAA,EAAA,EAAwB,KAAA,EAAO,YAAA,EAC9B,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,iBAAe,UAAA,IAAc,MAAA;AAAA,MAC7B,YAAA,EAAY,KAAA;AAAA,MACZ,kBAAA,EAAiB,YAAA;AAAA,MACjB,SAAA,EAAW,EAAA,CAAG,OAAA,CAAQ,IAAA,EAAM,SAAS,CAAA;AAAA,MACrC,aAAA,EAAa,UAAA;AAAA,MACb,SAAA,EAAW,aAAA;AAAA,MACX,GAAA,EAAK,SAAA,CAAU,GAAA,EAAK,YAAY,CAAA;AAAA,MAChC,IAAA,EAAK,YAAA;AAAA,MACL,KAAA;AAAA,MACA,QAAA,EAAU,EAAA;AAAA,MACT;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;AAEA,gBAAA,CAAiB,WAAA,GAAc,kBAAA;AClIxB,SAAS,oBAAA,CAAqD;AAAA,EACnE,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,IAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb,aAAA,GAAgB,KAAA;AAAA,EAChB,KAAA;AAAA,EACA,GAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,EAAyD;AACvD,EAAA,MAAM,UAAU,0BAAA,EAA2B;AAC3C,EAAA,MAAM,UAAA,GAAa,QAAQ,KAAA,KAAU,KAAA;AACrC,EAAA,MAAM,cAAA,GAAiB,QAAQ,UAAA,IAAc,UAAA;AAC7C,EAAA,MAAM,UAAU,sBAAA,CAAuB;AAAA,IACrC,MAAM,OAAA,CAAQ,IAAA;AAAA,IACd,QAAQ,OAAA,CAAQ,MAAA;AAAA,IAChB,UAAA;AAAA,IACA,UAAA,EAAY;AAAA,GACb,CAAA;AAED,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,cAAA,EAAc,UAAA;AAAA,MACd,iBAAe,cAAA,IAAkB,MAAA;AAAA,MACjC,YAAA,EAAY,gBAAgB,KAAA,GAAQ,MAAA;AAAA,MACpC,SAAA,EAAW,EAAA,CAAG,OAAA,CAAQ,IAAA,EAAM,SAAS,CAAA;AAAA,MACrC,aAAA,EAAa,UAAA;AAAA,MACb,YAAA,EAAY,KAAA;AAAA,MACZ,SAAS,MAAM;AACb,QAAA,IAAI,CAAC,cAAA,IAAkB,CAAC,UAAA,EAAY;AAClC,UAAA,OAAA,CAAQ,SAAS,KAAK,CAAA;AAAA,QACxB;AAAA,MACF,CAAA;AAAA,MACA,GAAA;AAAA,MACA,IAAA,EAAK,OAAA;AAAA,MACL,KAAA;AAAA,MACA,QAAA,EAAU,aAAa,CAAA,GAAI,EAAA;AAAA,MAC3B,IAAA,EAAK,QAAA;AAAA,MACJ,QAAA,EAAA;AAAA,QAAA,IAAA,IAAQ,IAAA,mBACPA,GAAAA,CAAC,MAAA,EAAA,EAAK,WAAW,OAAA,CAAQ,IAAA,EACvB,QAAA,kBAAAA,GAAAA,CAAC,QAAK,IAAA,EAAY,IAAA,EAAM,OAAA,CAAQ,IAAA,EAAM,GACxC,CAAA,GACE,IAAA;AAAA,QACH,aAAA,mBAAgBA,GAAAA,CAAC,cAAA,EAAA,EAAgB,iBAAM,CAAA,GAAoB;AAAA;AAAA;AAAA,GAC9D;AAEJ;AAEA,oBAAA,CAAqB,WAAA,GAAc,sBAAA","file":"chunk-S4IHNNA2.js","sourcesContent":["import {sva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const segmentedControlRecipe = sva({\n  slots: ['root', 'item', 'icon'],\n  base: {\n    root: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: '0.5',\n      p: '0.5',\n      bg: 'surface.gray',\n      borderRadius: 'md',\n    },\n    item: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: '1',\n      borderWidth: 0,\n      borderStyle: 'none',\n      bg: 'transparent',\n      color: 'fg.muted',\n      cursor: 'pointer',\n      fontFamily: 'body',\n      fontWeight: 'medium',\n      lineHeight: 'normal',\n      transitionProperty: 'background-color, color, box-shadow',\n      transitionDuration: 'fast',\n      transitionTimingFunction: 'default',\n      _hover: {\n        bg: 'bg.subtle',\n      },\n      _focusVisible: {\n        outlineWidth: 'focus',\n        outlineStyle: 'solid',\n        outlineColor: 'primary',\n        outlineOffset: 'focusOffset',\n      },\n    },\n    icon: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n    },\n  },\n  variants: {\n    size: {\n      sm: {item: {h: '7', px: '2', borderRadius: 'sm', fontSize: 'sm'}},\n      md: {item: {h: '9', px: '3', borderRadius: 'sm', fontSize: 'sm'}},\n      lg: {item: {h: '11', px: '3', borderRadius: 'md', fontSize: 'md'}},\n    },\n    layout: {\n      hug: {},\n      fill: {\n        root: {display: 'flex', w: 'full'},\n        item: {flex: 1},\n      },\n    },\n    isSelected: {\n      true: {\n        item: {\n          bg: 'bg',\n          color: 'fg',\n          fontWeight: 'semibold',\n          boxShadow: 'sm',\n          _hover: {\n            bg: 'bg',\n          },\n        },\n      },\n      false: {},\n    },\n    isDisabled: {\n      true: {\n        root: {\n          opacity: 0.5,\n          pointerEvents: 'none',\n        },\n        item: {\n          color: 'fg.disabled',\n          cursor: 'default',\n          _hover: {\n            bg: 'transparent',\n          },\n        },\n      },\n      false: {},\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    layout: 'hug',\n    isSelected: false,\n    isDisabled: false,\n  },\n});\n\nexport type SegmentedControlVariants = RecipeVariantProps<\n  typeof segmentedControlRecipe\n>;\n","import {createContext, use} from 'react';\n\nexport type SegmentedControlLayout = 'fill' | 'hug';\nexport type SegmentedControlSize = 'lg' | 'md' | 'sm';\n\nexport interface SegmentedControlContextValue {\n  isDisabled: boolean;\n  layout: SegmentedControlLayout;\n  onChange: (value: string) => void;\n  size: SegmentedControlSize;\n  value: string;\n}\n\nexport const SegmentedControlContext =\n  createContext<SegmentedControlContextValue | null>(null);\n\nSegmentedControlContext.displayName = 'SegmentedControlContext';\n\nexport function useSegmentedControlContext(): SegmentedControlContextValue {\n  const context = use(SegmentedControlContext);\n  if (context == null) {\n    throw new Error(\n      'SegmentedControlItem must be used within a SegmentedControl.',\n    );\n  }\n  return context;\n}\n","import {\n  useCallback,\n  useMemo,\n  useRef,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {segmentedControlRecipe} from 'components/SegmentedControl/SegmentedControl.recipe';\nimport {\n  SegmentedControlContext,\n  type SegmentedControlLayout,\n  type SegmentedControlSize,\n} from 'components/SegmentedControl/SegmentedControlContext';\nimport {cx} from 'internal/cx';\nimport {mergeRefs} from 'internal/mergeRefs';\n\nexport interface SegmentedControlProps<TValue extends string = string> {\n  /**\n   * SegmentedControlItem children.\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Whether the entire control is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Accessible label for the radio group.\n   */\n  label: string;\n  /**\n   * Segment layout mode.\n   * @default 'hug'\n   */\n  layout?: SegmentedControlLayout;\n  /**\n   * Called when a segment is selected.\n   */\n  onChange: (value: TValue) => void;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Control size.\n   * @default 'md'\n   */\n  size?: SegmentedControlSize;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n  /**\n   * Current selected value.\n   */\n  value: TValue;\n}\n\n/**\n * Segmented toggle control for selecting one option from a small set.\n *\n * Rendered as a radio group (`role=\"radiogroup\"`), so reach for it when picking\n * a value — filters, settings, or view modes whose content you render yourself.\n * If selecting an option should show or hide associated content panels, use\n * {@link Tabs} instead.\n */\nexport function SegmentedControl<TValue extends string = string>({\n  children,\n  className,\n  'data-testid': dataTestId,\n  isDisabled = false,\n  label,\n  layout = 'hug',\n  onChange,\n  ref,\n  size = 'md',\n  style,\n  value,\n}: SegmentedControlProps<TValue>): React.JSX.Element {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const handleChange = useCallback(\n    (nextValue: string) => {\n      onChange(nextValue as TValue);\n    },\n    [onChange],\n  );\n  const contextValue = useMemo(\n    () => ({isDisabled, layout, onChange: handleChange, size, value}),\n    [handleChange, isDisabled, layout, size, value],\n  );\n  const classes = segmentedControlRecipe({isDisabled, layout});\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (isDisabled) {\n        return;\n      }\n\n      const container = containerRef.current;\n      if (container == null) {\n        return;\n      }\n\n      const items = Array.from(\n        container.querySelectorAll<HTMLButtonElement>(\n          '[role=\"radio\"]:not([aria-disabled=\"true\"])',\n        ),\n      );\n\n      if (items.length === 0) {\n        return;\n      }\n\n      const currentIndex = items.findIndex(\n        item => item === document.activeElement,\n      );\n      let nextIndex: number;\n\n      switch (event.key) {\n        case 'ArrowRight':\n        case 'ArrowDown':\n          nextIndex =\n            currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;\n          break;\n        case 'ArrowLeft':\n        case 'ArrowUp':\n          nextIndex =\n            currentIndex === -1\n              ? items.length - 1\n              : (currentIndex - 1 + items.length) % items.length;\n          break;\n        case 'Home':\n          nextIndex = 0;\n          break;\n        case 'End':\n          nextIndex = items.length - 1;\n          break;\n        default:\n          return;\n      }\n\n      event.preventDefault();\n      const nextItem = items[nextIndex];\n      nextItem.focus();\n      const nextValue = nextItem.dataset.value;\n      if (nextValue != null) {\n        handleChange(nextValue);\n      }\n    },\n    [handleChange, isDisabled],\n  );\n\n  return (\n    <SegmentedControlContext value={contextValue}>\n      <div\n        aria-disabled={isDisabled || undefined}\n        aria-label={label}\n        aria-orientation=\"horizontal\"\n        className={cx(classes.root, className)}\n        data-testid={dataTestId}\n        onKeyDown={handleKeyDown}\n        ref={mergeRefs(ref, containerRef)}\n        role=\"radiogroup\"\n        style={style}\n        tabIndex={-1}>\n        {children}\n      </div>\n    </SegmentedControlContext>\n  );\n}\n\nSegmentedControl.displayName = 'SegmentedControl';\n","import type {CSSProperties, Ref} from 'react';\nimport {Icon, type IconComponent} from 'components/Icon';\nimport {segmentedControlRecipe} from 'components/SegmentedControl/SegmentedControl.recipe';\nimport {useSegmentedControlContext} from 'components/SegmentedControl/SegmentedControlContext';\nimport {VisuallyHidden} from 'internal/VisuallyHidden';\nimport {cx} from 'internal/cx';\n\nexport interface SegmentedControlItemProps<TValue extends string = string> {\n  /**\n   * Additional CSS class names applied to the segment.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the segment.\n   */\n  'data-testid'?: string;\n  /**\n   * Icon element displayed before the label.\n   */\n  icon?: IconComponent;\n  /**\n   * Whether this segment is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether to visually hide the label.\n   * @default false\n   */\n  isLabelHidden?: boolean;\n  /**\n   * Accessible and visible label for the segment.\n   */\n  label: string;\n  /**\n   * Ref forwarded to the segment button.\n   */\n  ref?: Ref<HTMLButtonElement>;\n  /**\n   * Inline styles applied to the segment.\n   */\n  style?: CSSProperties;\n  /**\n   * Unique value represented by this segment.\n   */\n  value: TValue;\n}\n\n/**\n * Individual segment within a `SegmentedControl`.\n */\nexport function SegmentedControlItem<TValue extends string = string>({\n  className,\n  'data-testid': dataTestId,\n  icon,\n  isDisabled = false,\n  isLabelHidden = false,\n  label,\n  ref,\n  style,\n  value,\n}: SegmentedControlItemProps<TValue>): React.JSX.Element {\n  const context = useSegmentedControlContext();\n  const isSelected = context.value === value;\n  const isItemDisabled = context.isDisabled || isDisabled;\n  const classes = segmentedControlRecipe({\n    size: context.size,\n    layout: context.layout,\n    isSelected,\n    isDisabled: isItemDisabled,\n  });\n\n  return (\n    <button\n      aria-checked={isSelected}\n      aria-disabled={isItemDisabled || undefined}\n      aria-label={isLabelHidden ? label : undefined}\n      className={cx(classes.item, className)}\n      data-testid={dataTestId}\n      data-value={value}\n      onClick={() => {\n        if (!isItemDisabled && !isSelected) {\n          context.onChange(value);\n        }\n      }}\n      ref={ref}\n      role=\"radio\"\n      style={style}\n      tabIndex={isSelected ? 0 : -1}\n      type=\"button\">\n      {icon != null ? (\n        <span className={classes.icon}>\n          <Icon icon={icon} size={context.size} />\n        </span>\n      ) : null}\n      {isLabelHidden ? <VisuallyHidden>{label}</VisuallyHidden> : label}\n    </button>\n  );\n}\n\nSegmentedControlItem.displayName = 'SegmentedControlItem';\n"]}

package/dist/{chunk-MI5QU37D.js → chunk-S4WWBV4N.js}

@@ -1,44 +1,29 @@
-import { VisuallyHidden } from './chunk-7BSFKG7N.js';
-import { Tooltip } from './chunk-3CJC4QE6.js';
-import { Icon } from './chunk-7T3SWOY7.js';
+import { useRel, getAriaLabel } from './chunk-5FQKELP6.js';
+import { VisuallyHidden } from './chunk-V2V5TTTL.js';
+import { Tooltip } from './chunk-KWZMXX4F.js';
+import { ActionElement, LinkContext } from './chunk-PG4CZRTU.js';
+import { Icon } from './chunk-IUW777WZ.js';
 import { cva } from './chunk-FMEIPGUP.js';
 import { css } from './chunk-OD4DHHZH.js';
 import { cx } from './chunk-PPNETWIP.js';
 import { ExternalLink } from 'lucide-react';
-import { createContext, useMemo, use } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-
-function getAriaLabel(label, opensInNewTab) {
-  if (!opensInNewTab) {
-    return label;
-  }
-  return label != null ? `${label} (opens in new tab)` : void 0;
-}
-function useRel({
-  isExternalLink = false,
-  target,
-  rel
-}) {
-  return useMemo(() => {
-    if (!isExternalLink && target !== "_blank") {
-      return rel;
-    }
-    const relValues = new Set((rel ?? "").split(/\s+/).filter(Boolean));
-    relValues.add("noopener");
-    relValues.add("noreferrer");
-    return Array.from(relValues).join(" ");
-  }, [isExternalLink, target, rel]);
-}
+import { useMemo } from 'react';
 
 // src/components/Link/Link.recipe.ts
 var linkRecipe = cva({
   base: {
     display: "inline-flex",
+    appearance: "none",
     alignItems: "center",
+    padding: 0,
+    border: 0,
+    background: "none",
     gap: "1",
     fontFamily: "body",
     fontWeight: "inherit",
     lineHeight: "normal",
+    textAlign: "inherit",
     textDecoration: "none",
     cursor: "pointer",
     transitionProperty: "color, text-decoration-color, opacity",
@@ -112,14 +97,6 @@ var linkRecipe = cva({
     hasUnderline: false
   }
 });
-var LinkContext = createContext(null);
-LinkContext.displayName = "LinkContext";
-
-// src/components/Link/useLinkComponent.ts
-function useLinkComponent(as) {
-  const context = use(LinkContext);
-  return as ?? context?.component ?? "a";
-}
 function Link({
   "aria-controls": ariaControls,
   "aria-current": ariaCurrent,
@@ -152,11 +129,9 @@ function Link({
   children,
   onClick
 }) {
-  const Component = useLinkComponent(as);
-  const href = hrefFromProps ?? "#";
-  const isFallbackHref = hrefFromProps == null;
+  const renderAsLink = hrefFromProps != null;
   const target = targetFromProps ?? (isExternalLink ? "_blank" : void 0);
-  const opensInNewTab = target === "_blank";
+  const opensInNewTab = renderAsLink && target === "_blank";
   const rel = useRel({ isExternalLink, target, rel: relFromProps });
   const ariaAttrs = {
     "aria-controls": ariaControls,
@@ -173,31 +148,30 @@ function Link({
     "aria-roledescription": ariaRoledescription
   };
   const handleClick = (event) => {
-    if (isDisabled || isFallbackHref) {
-      event.preventDefault();
-    }
     if (isDisabled) {
+      event.preventDefault();
       return;
     }
     onClick?.(event);
   };
   const element = /* @__PURE__ */ jsxs(
-    Component,
+    ActionElement,
     {
       ...ariaAttrs,
       "aria-disabled": isDisabled || void 0,
       "aria-label": getAriaLabel(label, opensInNewTab),
+      as,
       className: cx(linkRecipe({ color, hasUnderline, size, weight }), className),
       "data-testid": dataTestId,
-      href: isDisabled ? void 0 : href,
+      href: isDisabled ? void 0 : hrefFromProps,
+      isDisabled: !renderAsLink ? isDisabled : void 0,
+      isLink: renderAsLink,
       onClick: handleClick,
       ref,
-      rel: isDisabled ? void 0 : rel,
-      role: isDisabled && hrefFromProps != null ? "link" : void 0,
+      rel: !isDisabled && renderAsLink ? rel : void 0,
       style,
       tabIndex: isDisabled ? -1 : void 0,
-      target: isDisabled ? void 0 : target,
-      to: isDisabled ? void 0 : Component === "a" ? void 0 : href,
+      target: !isDisabled && renderAsLink ? target : void 0,
       children: [
         children,
         opensInNewTab && label == null ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -231,6 +205,6 @@ function LinkProvider({
 }
 LinkProvider.displayName = "LinkProvider";
 
-export { Link, LinkProvider, getAriaLabel, useLinkComponent, useRel };
-//# sourceMappingURL=chunk-MI5QU37D.js.map
-//# sourceMappingURL=chunk-MI5QU37D.js.map
+export { Link, LinkProvider };
+//# sourceMappingURL=chunk-S4WWBV4N.js.map
+//# sourceMappingURL=chunk-S4WWBV4N.js.map

package/dist/chunk-S4WWBV4N.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Link/Link.recipe.ts","../src/components/Link/Link.tsx","../src/components/Link/LinkProvider.tsx"],"names":["jsx"],"mappings":"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","file":"chunk-S4WWBV4N.js","sourcesContent":["import {cva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const linkRecipe = cva({\n  base: {\n    display: 'inline-flex',\n    appearance: 'none',\n    alignItems: 'center',\n    padding: 0,\n    border: 0,\n    background: 'none',\n    gap: '1',\n    fontFamily: 'body',\n    fontWeight: 'inherit',\n    lineHeight: 'normal',\n    textAlign: 'inherit',\n    textDecoration: 'none',\n    cursor: 'pointer',\n    transitionProperty: 'color, text-decoration-color, opacity',\n    transitionDuration: 'fast',\n    transitionTimingFunction: 'default',\n    _hover: {\n      textDecoration: 'underline',\n    },\n    _focusVisible: {\n      outlineWidth: 'focus',\n      outlineStyle: 'solid',\n      outlineColor: 'primary',\n      outlineOffset: 'focusOffset',\n    },\n    '&[aria-disabled=\"true\"]': {\n      cursor: 'not-allowed',\n      opacity: 0.5,\n    },\n  },\n  variants: {\n    size: {\n      xs: {fontSize: 'xs'},\n      sm: {fontSize: 'sm'},\n      md: {fontSize: 'md'},\n      lg: {fontSize: 'lg'},\n      xl: {fontSize: 'xl'},\n      '2xl': {fontSize: '2xl'},\n      '3xl': {fontSize: '3xl'},\n      '4xl': {fontSize: '4xl'},\n      '5xl': {fontSize: '5xl'},\n      '6xl': {fontSize: '6xl'},\n      inherit: {fontSize: 'inherit'},\n    },\n    color: {\n      primary: {\n        color: 'fg',\n      },\n      secondary: {\n        color: 'fg.muted',\n      },\n      disabled: {\n        color: 'fg.disabled',\n      },\n      placeholder: {\n        color: 'fg.muted',\n      },\n      active: {\n        color: 'primary',\n      },\n      inherit: {\n        color: 'inherit',\n      },\n    },\n    weight: {\n      normal: {fontWeight: 'normal'},\n      medium: {fontWeight: 'medium'},\n      semibold: {fontWeight: 'semibold'},\n      bold: {fontWeight: 'bold'},\n      inherit: {fontWeight: 'inherit'},\n    },\n    hasUnderline: {\n      true: {\n        textDecoration: 'underline',\n      },\n      false: {},\n    },\n  },\n  defaultVariants: {\n    color: 'active',\n    size: 'md',\n    hasUnderline: false,\n  },\n});\n\nexport type LinkVariants = RecipeVariantProps<typeof linkRecipe>;\n","import {ExternalLink} from 'lucide-react';\nimport type {CSSProperties, MouseEventHandler, ReactNode, Ref} from 'react';\nimport {Icon} from 'components/Icon';\nimport {linkRecipe} from 'components/Link/Link.recipe';\nimport type {LinkComponent} from 'components/Link/types';\nimport type {TextColor, TextSize, TextWeight} from 'components/Text';\nimport {Tooltip} from 'components/Tooltip';\nimport {VisuallyHidden} from 'internal';\nimport {ActionElement} from 'internal/ActionElement';\nimport {cx} from 'internal/cx';\nimport {getAriaLabel, useRel} from 'internal/linkAccessibility';\nimport {css} from 'styled-system/css';\n\n/**\n * A polymorphic link component with built-in accessibility, external link handling,\n * and router integration via LinkProvider. Supports custom link components (e.g.\n * React Router's Link) through the `as` prop or a parent `LinkProvider`.\n */\nexport interface LinkProps {\n  /**\n   * Identifies the element(s) whose contents are controlled by the link.\n   */\n  'aria-controls'?: string;\n  /**\n   * Indicates the current item in a set (e.g. current page in navigation).\n   */\n  'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true';\n  /**\n   * Identifies the element(s) that describe the link.\n   */\n  'aria-describedby'?: string;\n  /**\n   * Accessible description for the link.\n   */\n  'aria-description'?: string;\n  /**\n   * Identifies the element that provides a detailed description.\n   */\n  'aria-details'?: string;\n  /**\n   * Indicates whether a controlled element is expanded or collapsed.\n   */\n  'aria-expanded'?: boolean;\n  /**\n   * Indicates the link opens an interactive popup element.\n   */\n  'aria-haspopup'?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';\n  /**\n   * Indicates whether the element is exposed to the accessibility API.\n   */\n  'aria-hidden'?: boolean;\n  /**\n   * Keyboard shortcuts that activate or focus the link.\n   */\n  'aria-keyshortcuts'?: string;\n  /**\n   * Identifies the element(s) that label the link.\n   */\n  'aria-labelledby'?: string;\n  /**\n   * Identifies element(s) owned by the link that are not DOM children.\n   */\n  'aria-owns'?: string;\n  /**\n   * Human-readable description of the role of the link.\n   */\n  'aria-roledescription'?: string;\n  /**\n   * Custom element type to render instead of `<a>`. Useful for integrating with routers.\n   * If you want to set this globally, use LinkProvider at the top level of your app.\n   */\n  as?: LinkComponent;\n  /**\n   * Link content.\n   */\n  children: ReactNode;\n  /**\n   * Optionally, rendering by setting the className.\n   */\n  className?: string;\n  /**\n   * Color variant controlling the link text color. Default is `active`.\n   */\n  color?: TextColor;\n  /**\n   * Test id applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Show a persistent underline on the link text.\n   */\n  hasUnderline?: boolean;\n  /**\n   * URL destination. Custom link components receive this as both `href` and\n   * `to` so router links and anchor-like links can share the same Silver UI API.\n   * When omitted, Link renders as a native `<button>`.\n   */\n  href?: string;\n  /**\n   * Visually and functionally disable the link. Prevents navigation and removes from tab order.\n   */\n  isDisabled?: boolean;\n  /**\n   * Mark as an external link. Adds an icon and rel=\"noopener noreferrer\".\n   * Defaults target to \"_blank\" unless target is set explicitly.\n   */\n  isExternalLink?: boolean;\n  /**\n   * Accessible label (aria-label). It is recommended to set this if your link does not contain sufficient text to make its purpose clear.\n   */\n  label?: string;\n  /**\n   * Click handler. Not called when the link is disabled.\n   */\n  onClick?: MouseEventHandler<HTMLElement>;\n  /**\n   * Ref forwarded to the underlying anchor or button element.\n   */\n  ref?: Ref<HTMLElement>;\n  /**\n   * HTML rel attribute.\n   */\n  rel?: string;\n  /**\n   * Font size variant. Default is `md`.\n   */\n  size?: TextSize;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n  /**\n   * HTML target attribute.\n   */\n  target?: string;\n  /**\n   * Tooltip text shown on hover.\n   */\n  tooltip?: string;\n  /**\n   * Font weight variant. Default is inherited from parent styles.\n   */\n  weight?: TextWeight;\n}\n\nexport function Link({\n  'aria-controls': ariaControls,\n  'aria-current': ariaCurrent,\n  'aria-description': ariaDescription,\n  'aria-describedby': ariaDescribedby,\n  'aria-details': ariaDetails,\n  'aria-expanded': ariaExpanded,\n  'aria-haspopup': ariaHaspopup,\n  'aria-hidden': ariaHidden,\n  'aria-keyshortcuts': ariaKeyshortcuts,\n  'aria-labelledby': ariaLabelledby,\n  'aria-owns': ariaOwns,\n  'aria-roledescription': ariaRoledescription,\n  as,\n  label,\n  href: hrefFromProps,\n  hasUnderline = false,\n  isDisabled = false,\n  isExternalLink = false,\n  target: targetFromProps,\n  rel: relFromProps,\n  size,\n  tooltip,\n  color,\n  weight,\n  className,\n  'data-testid': dataTestId,\n  style,\n  ref,\n  children,\n  onClick,\n}: LinkProps): React.JSX.Element {\n  const renderAsLink = hrefFromProps != null;\n  const target = targetFromProps ?? (isExternalLink ? '_blank' : undefined);\n  const opensInNewTab = renderAsLink && target === '_blank';\n  const rel = useRel({isExternalLink, target, rel: relFromProps});\n\n  const ariaAttrs = {\n    'aria-controls': ariaControls,\n    'aria-current': ariaCurrent,\n    'aria-description': ariaDescription,\n    'aria-describedby': ariaDescribedby,\n    'aria-details': ariaDetails,\n    'aria-expanded': ariaExpanded,\n    'aria-haspopup': ariaHaspopup,\n    'aria-hidden': ariaHidden,\n    'aria-keyshortcuts': ariaKeyshortcuts,\n    'aria-labelledby': ariaLabelledby,\n    'aria-owns': ariaOwns,\n    'aria-roledescription': ariaRoledescription,\n  };\n\n  const handleClick: MouseEventHandler<HTMLElement> = event => {\n    if (isDisabled) {\n      event.preventDefault();\n      return;\n    }\n\n    onClick?.(event);\n  };\n\n  const element = (\n    <ActionElement\n      {...ariaAttrs}\n      aria-disabled={isDisabled || undefined}\n      aria-label={getAriaLabel(label, opensInNewTab)}\n      as={as}\n      className={cx(linkRecipe({color, hasUnderline, size, weight}), className)}\n      data-testid={dataTestId}\n      href={isDisabled ? undefined : hrefFromProps}\n      isDisabled={!renderAsLink ? isDisabled : undefined}\n      isLink={renderAsLink}\n      onClick={handleClick}\n      ref={ref}\n      rel={!isDisabled && renderAsLink ? rel : undefined}\n      style={style}\n      tabIndex={isDisabled ? -1 : undefined}\n      target={!isDisabled && renderAsLink ? target : undefined}>\n      {children}\n      {opensInNewTab && label == null ? (\n        <>\n          {' '}\n          <VisuallyHidden>(opens in new tab)</VisuallyHidden>\n        </>\n      ) : null}\n      {isExternalLink ? (\n        <span aria-hidden=\"true\" className={styles.externalLink}>\n          <Icon icon={ExternalLink} size=\"sm\" />\n        </span>\n      ) : null}\n    </ActionElement>\n  );\n\n  if (tooltip != null) {\n    return <Tooltip content={tooltip}>{element}</Tooltip>;\n  }\n\n  return element;\n}\n\nLink.displayName = 'Link';\n\nconst styles = {\n  externalLink: css({\n    display: 'inline-flex',\n    flexShrink: 0,\n    fontSize: '0.875em',\n    lineHeight: 1,\n  }),\n};\n","import {useMemo, type ReactNode} from 'react';\nimport {LinkContext} from 'components/Link/LinkContext';\nimport type {LinkComponent} from 'components/Link/types';\n\nexport interface LinkProviderProps {\n  children: ReactNode;\n  component: LinkComponent;\n}\n\nexport function LinkProvider({\n  component,\n  children,\n}: LinkProviderProps): React.JSX.Element {\n  const value = useMemo(() => ({component}), [component]);\n\n  return <LinkContext value={value}>{children}</LinkContext>;\n}\n\nLinkProvider.displayName = 'LinkProvider';\n"]}

package/dist/{chunk-RLOGQBFD.js → chunk-SEDUAMDW.js}

@@ -1,9 +1,9 @@
 import { fieldRecipe } from './chunk-U7ALNPFJ.js';
-import { Text } from './chunk-QRFDPG34.js';
-import { VisuallyHidden } from './chunk-7BSFKG7N.js';
-import { Tooltip } from './chunk-3CJC4QE6.js';
+import { VisuallyHidden } from './chunk-V2V5TTTL.js';
+import { Text } from './chunk-NXTDP6AX.js';
+import { Tooltip } from './chunk-KWZMXX4F.js';
 import { isReactNode } from './chunk-2PSZAWLC.js';
-import { Icon } from './chunk-7T3SWOY7.js';
+import { Icon } from './chunk-IUW777WZ.js';
 import { cx } from './chunk-PPNETWIP.js';
 import { Info } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -112,5 +112,5 @@ function Field({
 Field.displayName = "Field";
 
 export { Field, getNecessity };
-//# sourceMappingURL=chunk-RLOGQBFD.js.map
-//# sourceMappingURL=chunk-RLOGQBFD.js.map
+//# sourceMappingURL=chunk-SEDUAMDW.js.map
+//# sourceMappingURL=chunk-SEDUAMDW.js.map

package/dist/chunk-SEDUAMDW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Field/Field.tsx"],"names":[],"mappings":"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","file":"chunk-SEDUAMDW.js","sourcesContent":["import {Info} from 'lucide-react';\nimport type {CSSProperties, ReactNode, Ref} from 'react';\nimport {fieldRecipe} from 'components/Field/Field.recipe';\nimport type {InputStatusType} from 'components/Field/types';\nimport {Icon, type IconComponent} from 'components/Icon';\nimport {Text} from 'components/Text';\nimport {Tooltip} from 'components/Tooltip';\nimport {VisuallyHidden} from 'internal/VisuallyHidden';\nimport {cx} from 'internal/cx';\nimport isReactNode from 'internal/isReactNode';\n\nexport type FieldStatusVariant = 'attached' | 'detached';\n\nexport interface FieldStatus {\n  /**\n   * Optional status text displayed below the input.\n   */\n  message?: string;\n  /**\n   * Status message ID used by `aria-describedby`.\n   */\n  messageID?: string;\n  /**\n   * Validation state for the field.\n   */\n  type: InputStatusType;\n}\n\ninterface FieldBaseProps {\n  /**\n   * The form control rendered inside the field.\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Supporting text rendered between the label and control.\n   */\n  description?: ReactNode;\n  /**\n   * ID for the description element.\n   */\n  descriptionID?: string;\n  /**\n   * ID of the associated control.\n   */\n  inputId: string;\n  /**\n   * Whether the associated control is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether to visually hide the label and description.\n   * @default false\n   */\n  isLabelHidden?: boolean;\n  /**\n   * Field label text.\n   */\n  label: string;\n  /**\n   * HTML element used for the label. Use 'span' for group controls\n   * (e.g., radiogroup) where `htmlFor` cannot target a labelable element.\n   * @default 'label'\n   */\n  labelAs?: 'label' | 'span';\n  /**\n   * Optional icon shown before the label.\n   */\n  labelIcon?: IconComponent;\n  /**\n   * ID applied to the label element, useful for `aria-labelledby`.\n   */\n  labelId?: string;\n  /**\n   * Tooltip content shown next to the label.\n   */\n  labelTooltip?: ReactNode;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Validation status displayed below the control.\n   */\n  status?: FieldStatus;\n  /**\n   * How the status message is positioned.\n   * @default 'attached'\n   */\n  statusVariant?: FieldStatusVariant;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n}\n\n/**\n * Controls whether a field displays an \"Optional\" or \"Required\" indicator.\n * The two options are mutually exclusive — a field cannot be both optional\n * and required at the same time. TypeScript enforces this at the type level.\n */\nexport type FieldNecessity =\n  | {isOptional?: false; isRequired?: false}\n  | {isOptional: true; isRequired?: false}\n  | {isOptional?: false; isRequired: true};\n\nexport type FieldProps = FieldBaseProps & FieldNecessity;\n\n/**\n * Narrows individually-typed `isOptional`/`isRequired` values back into\n * a valid `FieldNecessity` union member. Useful when forwarding necessity\n * props that were destructured from a component's own props (which widens\n * the discriminated union to `boolean | undefined`).\n */\nexport function getNecessity(\n  isOptional: boolean | undefined,\n  isRequired: boolean | undefined,\n): FieldNecessity {\n  if (isOptional === true) {\n    return {isOptional: true};\n  }\n  if (isRequired === true) {\n    return {isRequired: true};\n  }\n  return {};\n}\n\n/**\n * A form field wrapper that renders a label, description, control slot, and validation status.\n */\nexport function Field({\n  children,\n  label,\n  isLabelHidden = false,\n  description,\n  inputId,\n  descriptionID,\n  isOptional = false,\n  isRequired = false,\n  isDisabled = false,\n  labelAs: LabelComponent = 'label',\n  labelIcon,\n  labelId,\n  labelTooltip,\n  status,\n  statusVariant = 'attached',\n  className,\n  'data-testid': dataTestId,\n  style,\n  ref,\n}: FieldProps): React.JSX.Element {\n  const resolvedDescriptionID =\n    descriptionID ??\n    (isReactNode(description) ? `${inputId}-description` : undefined);\n  const resolvedStatusID =\n    status?.messageID ??\n    (status?.message != null ? `${inputId}-status` : undefined);\n  const statusText = isOptional ? 'Optional' : isRequired ? 'Required' : null;\n  const classes = fieldRecipe({\n    isDisabled,\n    statusType: status?.type,\n    statusVariant,\n  });\n  const labelNode = (\n    <LabelComponent\n      className={classes.label}\n      {...(LabelComponent === 'label' ? {htmlFor: inputId} : undefined)}\n      id={labelId}>\n      {labelIcon != null ? (\n        <Icon color=\"secondary\" icon={labelIcon} size=\"sm\" />\n      ) : null}\n      <Text as=\"span\" color=\"inherit\" type=\"label\">\n        {label}\n      </Text>\n      {statusText != null ? (\n        <Text as=\"span\" className={classes.indicator} type=\"supporting\">\n          <span aria-hidden=\"true\"> · </span>\n          {statusText}\n        </Text>\n      ) : null}\n      {isReactNode(labelTooltip) ? (\n        <Tooltip content={labelTooltip}>\n          <span className={classes.tooltipIcon}>\n            <Icon icon={Info} size=\"sm\" />\n          </span>\n        </Tooltip>\n      ) : null}\n    </LabelComponent>\n  );\n  const descriptionNode = isReactNode(description) ? (\n    <Text\n      as=\"span\"\n      color=\"secondary\"\n      id={resolvedDescriptionID}\n      type=\"supporting\">\n      {description}\n    </Text>\n  ) : null;\n  const statusNode =\n    status?.message != null ? (\n      <div\n        aria-live={status.type === 'error' ? 'assertive' : 'polite'}\n        className={classes.status}\n        id={resolvedStatusID}\n        role={status.type === 'error' ? 'alert' : 'status'}>\n        {status.message}\n      </div>\n    ) : null;\n\n  return (\n    <div\n      className={cx(classes.root, className)}\n      data-testid={dataTestId}\n      ref={ref}\n      style={style}>\n      {isLabelHidden ? (\n        <VisuallyHidden>\n          {labelNode}\n          {descriptionNode}\n        </VisuallyHidden>\n      ) : (\n        <>\n          {labelNode}\n          {descriptionNode}\n        </>\n      )}\n      {statusVariant === 'attached' ? (\n        <div className={classes.inputWrapper}>\n          {children}\n          {statusNode}\n        </div>\n      ) : (\n        <>\n          {children}\n          {statusNode}\n        </>\n      )}\n    </div>\n  );\n}\n\nField.displayName = 'Field';\n"]}

package/dist/{chunk-SUH62Z64.js → chunk-SHARVIUI.js}

@@ -36,5 +36,5 @@ function NavIcon({
 NavIcon.displayName = "NavIcon";
 
 export { NavIcon };
-//# sourceMappingURL=chunk-SUH62Z64.js.map
-//# sourceMappingURL=chunk-SUH62Z64.js.map
+//# sourceMappingURL=chunk-SHARVIUI.js.map
+//# sourceMappingURL=chunk-SHARVIUI.js.map

package/dist/chunk-SHARVIUI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavIcon/NavIcon.tsx"],"names":[],"mappings":";;;;AA2BA,IAAM,MAAA,GAAS;AAAA,EACb,MAAM,GAAA,CAAI;AAAA,IACR,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,cAAA,EAAgB,QAAA;AAAA,IAChB,YAAA,EAAc,MAAA;AAAA,IACd,EAAA,EAAI,SAAA;AAAA,IACJ,KAAA,EAAO,cAAA;AAAA,IACP,UAAA,EAAY,CAAA;AAAA,IACZ,CAAA,EAAG,cAAA;AAAA,IACH,CAAA,EAAG;AAAA,GACJ;AACH,CAAA;AAMO,SAAS,OAAA,CAAQ;AAAA,EACtB,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,IAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA,EAAoC;AAClC,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,IAAA,EAAM,SAAS,CAAA;AAAA,MACpC,aAAA,EAAa,UAAA;AAAA,MACb,GAAA;AAAA,MACA,KAAA;AAAA,MACC,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"chunk-SHARVIUI.js","sourcesContent":["import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {cx} from 'internal/cx';\nimport {css} from 'styled-system/css';\n\nexport interface NavIconProps {\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * The icon element to render inside the circular background.\n   */\n  icon: ReactNode;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLSpanElement>;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n}\n\nconst styles = {\n  base: css({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: 'full',\n    bg: 'primary',\n    color: 'fg.onPrimary',\n    flexShrink: 0,\n    w: 'component.sm',\n    h: 'component.sm',\n  }),\n};\n\n/**\n * Circular icon container for navigation headers.\n * Wraps an icon with a circular accent-colored background.\n */\nexport function NavIcon({\n  className,\n  'data-testid': dataTestId,\n  icon,\n  ref,\n  style,\n}: NavIconProps): React.JSX.Element {\n  return (\n    <span\n      className={cx(styles.base, className)}\n      data-testid={dataTestId}\n      ref={ref}\n      style={style}>\n      {icon}\n    </span>\n  );\n}\n\nNavIcon.displayName = 'NavIcon';\n"]}