@jackcrane/ui 0.1.13 → 0.1.15

package/dist/jcui.cjs.js

@@ -113,7 +113,8 @@
 ._secondary_105y0_116:active {
   --button-bg: var(--secondary-color-300);
 }
-._chamfer_1o5rm_1 {
+._chamfer_1unae_1,
+.jcui_chamfer {
   --bt: var(--border-thickness);
   --cd: var(--chamfer-distance);
   --chamfer-color: var(--border-accent-color);
@@ -124,18 +125,24 @@
     --cd 180ms ease,
     background-color 180ms ease;
 }
-._chamfer_1o5rm_1:not(._disabled_1o5rm_15):hover {
+._chamfer_1unae_1:not(._disabled_1unae_16):hover,
+.jcui_chamfer:not(.jcui_disabled):hover {
   --cd: calc(var(--chamfer-distance) * 1.5);
 }
-._chamfer_1o5rm_1:active,
-div._chamfer_1o5rm_1:focus-within {
+._chamfer_1unae_1:active,
+div._chamfer_1unae_1:focus-within,
+.jcui_chamfer:active,
+div.jcui_chamfer:focus-within {
   --cd: calc(var(--chamfer-distance) * 1.75);
 }
-._chamfer_1o5rm_1:not(._disabled_1o5rm_15):active,
-div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
+._chamfer_1unae_1:not(._disabled_1unae_16):active,
+div._chamfer_1unae_1:not(._disabled_1unae_16):focus-within,
+.jcui_chamfer:not(.jcui_disabled):active,
+div.jcui_chamfer:not(.jcui_disabled):focus-within {
   --cd: calc(var(--chamfer-distance) * 1.75);
 }
-._chamfer_1o5rm_1::before {
+._chamfer_1unae_1::before,
+.jcui_chamfer::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -162,24 +169,25 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
 /* ========================= */
 /* Hover-only variant        */
 /* ========================= */
-._chamferOnHover_1o5rm_60 {
+._chamferOnHover_1unae_67 {
   border: none;
 }
-._chamferOnHover_1o5rm_60::before {
+._chamferOnHover_1unae_67::before {
   opacity: 0;
 }
 /* Enable effects only on hover / focus / active */
-._chamferOnHover_1o5rm_60:hover,
-._chamferOnHover_1o5rm_60:focus-within,
-._chamferOnHover_1o5rm_60:active {
+._chamferOnHover_1unae_67:hover,
+._chamferOnHover_1unae_67:focus-within,
+._chamferOnHover_1unae_67:active {
   border: var(--bt) solid var(--border-color);
 }
-._chamferOnHover_1o5rm_60:hover::before,
-._chamferOnHover_1o5rm_60:focus-within::before,
-._chamferOnHover_1o5rm_60:active::before {
+._chamferOnHover_1unae_67:hover::before,
+._chamferOnHover_1unae_67:focus-within::before,
+._chamferOnHover_1unae_67:active::before {
   opacity: 1;
 }
-._hatch_owfoz_1 {
+._hatch_rrcdt_1,
+.jcui_hatch {
   --bc: var(--border-color);
   --bg: transparent;
   --stripe: var(--border-thickness);
@@ -1089,6 +1097,185 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
 ._secondary_1u214_129:hover {
   --select-bg: var(--secondary-color-200);
 }
+@property --segment-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --segment-item-hover-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --segment-item-active-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --segment-item-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: inherit;
+}
+@property --segment-item-active-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: inherit;
+}
+._root_1dix2_31 {
+  --segment-bg: var(--body-bg);
+  --segment-item-hover-bg: var(--secondary-color-100);
+  --segment-item-active-bg: var(--secondary-color-300);
+  --segment-item-color: var(--body-color);
+  --segment-item-active-color: var(--body-color);
+  --button-bg: var(--segment-bg);
+  display: inline-flex;
+  align-items: stretch;
+  justify-content: flex-start;
+  background-color: var(--segment-bg);
+  color: var(--segment-item-color);
+}
+._item_1dix2_46 {
+  all: unset;
+  box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  line-height: 1;
+  padding: 0.5rem 1rem;
+  color: var(--segment-item-color);
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border-top: var(--border-thickness) solid var(--border-color);
+  border-bottom: var(--border-thickness) solid var(--border-color);
+  border-left: var(--border-thickness) solid var(--border-color);
+  margin-right: calc(-1 * var(--border-thickness));
+}
+._item_1dix2_46:last-child {
+  border-right: var(--border-thickness) solid var(--border-color);
+  margin-right: 0;
+}
+._item_1dix2_46:hover {
+  background-color: var(--segment-item-hover-bg);
+}
+._item_1dix2_46:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 1px var(--border-accent-color);
+}
+._item_1dix2_46[data-state="on"] {
+  background-color: var(--segment-item-active-bg);
+  color: var(--segment-item-active-color);
+  z-index: 1;
+}
+._chamferEnabled_1dix2_86 ._item_1dix2_46[data-state="on"]::after {
+  content: "";
+  position: absolute;
+  top: calc(-1 * var(--border-thickness));
+  right: 0;
+  bottom: calc(-1 * var(--border-thickness));
+  left: calc(-1 * var(--border-thickness));
+  pointer-events: none;
+  --bt: var(--border-thickness);
+  --cd: var(--chamfer-distance);
+  --chamfer-color: var(--border-accent-color);
+  background:
+    linear-gradient(var(--chamfer-color), var(--chamfer-color)) left top /
+      var(--cd) var(--bt) no-repeat,
+    linear-gradient(var(--chamfer-color), var(--chamfer-color)) left top /
+      var(--bt) var(--cd) no-repeat,
+    linear-gradient(var(--chamfer-color), var(--chamfer-color)) right top /
+      var(--cd) var(--bt) no-repeat,
+    linear-gradient(var(--chamfer-color), var(--chamfer-color)) right top /
+      var(--bt) var(--cd) no-repeat,
+    linear-gradient(var(--chamfer-color), var(--chamfer-color)) right bottom /
+      var(--cd) var(--bt) no-repeat,
+    linear-gradient(var(--chamfer-color), var(--chamfer-color)) right bottom /
+      var(--bt) var(--cd) no-repeat,
+    linear-gradient(var(--chamfer-color), var(--chamfer-color)) left bottom /
+      var(--cd) var(--bt) no-repeat,
+    linear-gradient(var(--chamfer-color), var(--chamfer-color)) left bottom /
+      var(--bt) var(--cd) no-repeat;
+}
+._chamferEnabled_1dix2_86 ._item_1dix2_46[data-state="on"]:last-child::after {
+  right: calc(-1 * var(--border-thickness));
+}
+._item_1dix2_46[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+._large_1dix2_126 ._item_1dix2_46 {
+  font-size: 1.25rem;
+  padding: 0.75rem 1.25rem;
+}
+._small_1dix2_131 ._item_1dix2_46 {
+  font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+}
+._disabled_1dix2_136 {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+._itemDisabled_1dix2_141 {
+  cursor: not-allowed;
+}
+/* Variants */
+._primary_1dix2_147 {
+  --segment-bg: var(--primary-color-100);
+  --border-color: var(--primary-color-300);
+  --border-accent-color: var(--primary-color-600);
+  --segment-item-hover-bg: var(--primary-color-200);
+  --segment-item-active-bg: var(--primary-color-300);
+  --segment-item-color: var(--primary-color-800);
+  --segment-item-active-color: var(--primary-color-900);
+}
+._secondary_1dix2_157 {
+  --segment-bg: var(--secondary-color-100);
+  --border-color: var(--secondary-color-300);
+  --border-accent-color: var(--secondary-color-600);
+  --segment-item-hover-bg: var(--secondary-color-200);
+  --segment-item-active-bg: var(--secondary-color-300);
+  --segment-item-color: var(--secondary-color-800);
+  --segment-item-active-color: var(--secondary-color-900);
+}
+._success_1dix2_167 {
+  --segment-bg: var(--success-color-100);
+  --border-color: var(--success-color-300);
+  --border-accent-color: var(--success-color-600);
+  --segment-item-hover-bg: var(--success-color-200);
+  --segment-item-active-bg: var(--success-color-300);
+  --segment-item-color: var(--success-color-800);
+  --segment-item-active-color: var(--success-color-900);
+}
+._warning_1dix2_177 {
+  --segment-bg: var(--warning-color-100);
+  --border-color: var(--warning-color-300);
+  --border-accent-color: var(--warning-color-600);
+  --segment-item-hover-bg: var(--warning-color-200);
+  --segment-item-active-bg: var(--warning-color-300);
+  --segment-item-color: var(--warning-color-800);
+  --segment-item-active-color: var(--warning-color-900);
+}
+._danger_1dix2_187 {
+  --segment-bg: var(--danger-color-100);
+  --border-color: var(--danger-color-300);
+  --border-accent-color: var(--danger-color-600);
+  --segment-item-hover-bg: var(--danger-color-200);
+  --segment-item-active-bg: var(--danger-color-300);
+  --segment-item-color: var(--danger-color-800);
+  --segment-item-active-color: var(--danger-color-900);
+}
+._info_1dix2_197 {
+  --segment-bg: var(--info-color-100);
+  --border-color: var(--info-color-300);
+  --border-accent-color: var(--info-color-600);
+  --segment-item-hover-bg: var(--info-color-200);
+  --segment-item-active-bg: var(--info-color-300);
+  --segment-item-color: var(--info-color-800);
+  --segment-item-active-color: var(--info-color-900);
+}
 @property --dropdown-bg {
   syntax: "<color>";
   inherits: true;
@@ -2242,37 +2429,37 @@ function clsx() {
 }
 const button = "_button_105y0_7";
 const pageBackground$4 = "_pageBackground_105y0_24";
-const large$7 = "_large_105y0_34";
-const small$7 = "_small_105y0_39";
-const disabled$7 = "_disabled_105y0_44";
-const primary$9 = "_primary_105y0_51";
-const success$9 = "_success_105y0_64";
-const warning$9 = "_warning_105y0_77";
-const danger$9 = "_danger_105y0_90";
-const info$9 = "_info_105y0_103";
-const secondary$9 = "_secondary_105y0_116";
-const styles$c = {
+const large$8 = "_large_105y0_34";
+const small$8 = "_small_105y0_39";
+const disabled$8 = "_disabled_105y0_44";
+const primary$a = "_primary_105y0_51";
+const success$a = "_success_105y0_64";
+const warning$a = "_warning_105y0_77";
+const danger$a = "_danger_105y0_90";
+const info$a = "_info_105y0_103";
+const secondary$a = "_secondary_105y0_116";
+const styles$d = {
   button,
   pageBackground: pageBackground$4,
-  large: large$7,
-  small: small$7,
-  disabled: disabled$7,
-  primary: primary$9,
-  success: success$9,
-  warning: warning$9,
-  danger: danger$9,
-  info: info$9,
-  secondary: secondary$9
+  large: large$8,
+  small: small$8,
+  disabled: disabled$8,
+  primary: primary$a,
+  success: success$a,
+  warning: warning$a,
+  danger: danger$a,
+  info: info$a,
+  secondary: secondary$a
 };
-const chamfer$1 = "_chamfer_1o5rm_1";
-const disabled$6 = "_disabled_1o5rm_15";
-const chamferOnHover = "_chamferOnHover_1o5rm_60";
+const chamfer$1 = "_chamfer_1unae_1";
+const disabled$7 = "_disabled_1unae_16";
+const chamferOnHover = "_chamferOnHover_1unae_67";
 const chamferStyles = {
   chamfer: chamfer$1,
-  disabled: disabled$6,
+  disabled: disabled$7,
   chamferOnHover
 };
-const hatch$1 = "_hatch_owfoz_1";
+const hatch$1 = "_hatch_rrcdt_1";
 const hatchStyles = {
   hatch: hatch$1
 };
@@ -2284,10 +2471,10 @@ const ThemeContext = React.createContext({
 });
 const useJCUITheme = () => React.useContext(ThemeContext);
 const loader = "_loader_1y0fe_1";
-const styles$b = {
+const styles$c = {
   loader
 };
-const Loader = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$b.loader, ...props });
+const Loader = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$c.loader, ...props });
 function Button({
   children: children2,
   variant,
@@ -2301,15 +2488,15 @@ function Button({
     "button",
     {
       className: clsx(
-        styles$c.button,
-        !variant && styles$c.pageBackground,
-        styles$c[variant],
+        styles$d.button,
+        !variant && styles$d.pageBackground,
+        styles$d[variant],
         chamfer2 && chamferStyles.chamfer,
-        size2 === "large" && styles$c.large,
-        size2 === "small" && styles$c.small,
+        size2 === "large" && styles$d.large,
+        size2 === "small" && styles$d.small,
         disabled2 && chamferStyles.disabled,
         disabled2 && hatchStyles.hatch,
-        disabled2 && styles$c.disabled
+        disabled2 && styles$d.disabled
       ),
       disabled: disabled2,
       ...props,
@@ -2422,28 +2609,28 @@ const pageBackground$3 = "_pageBackground_et6fi_11";
 const title$1 = "_title_et6fi_18";
 const body$1 = "_body_et6fi_25";
 const footer$1 = "_footer_et6fi_30";
-const large$6 = "_large_et6fi_37";
-const small$6 = "_small_et6fi_43";
-const primary$8 = "_primary_et6fi_51";
-const success$8 = "_success_et6fi_58";
-const warning$8 = "_warning_et6fi_65";
-const danger$8 = "_danger_et6fi_72";
-const info$8 = "_info_et6fi_79";
-const secondary$8 = "_secondary_et6fi_86";
-const styles$a = {
+const large$7 = "_large_et6fi_37";
+const small$7 = "_small_et6fi_43";
+const primary$9 = "_primary_et6fi_51";
+const success$9 = "_success_et6fi_58";
+const warning$9 = "_warning_et6fi_65";
+const danger$9 = "_danger_et6fi_72";
+const info$9 = "_info_et6fi_79";
+const secondary$9 = "_secondary_et6fi_86";
+const styles$b = {
   card,
   pageBackground: pageBackground$3,
   title: title$1,
   body: body$1,
   footer: footer$1,
-  large: large$6,
-  small: small$6,
-  primary: primary$8,
-  success: success$8,
-  warning: warning$8,
-  danger: danger$8,
-  info: info$8,
-  secondary: secondary$8
+  large: large$7,
+  small: small$7,
+  primary: primary$9,
+  success: success$9,
+  warning: warning$9,
+  danger: danger$9,
+  info: info$9,
+  secondary: secondary$9
 };
 function Card({
   children: children2,
@@ -2460,21 +2647,21 @@ function Card({
     "div",
     {
       className: classNames(
-        styles$a.card,
-        !variant && styles$a.pageBackground,
-        styles$a[variant],
+        styles$b.card,
+        !variant && styles$b.pageBackground,
+        styles$b[variant],
         chamfer2 && chamferStyles.chamfer,
-        size2 === "large" && styles$a.large,
-        size2 === "small" && styles$a.small
+        size2 === "large" && styles$b.large,
+        size2 === "small" && styles$b.small
       ),
       ...props,
       children: [
-        title2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classNames(styles$a.title, hatchStyles.hatch), children: title2 }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$a.body, children: children2 }),
+        title2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classNames(styles$b.title, hatchStyles.hatch), children: title2 }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$b.body, children: children2 }),
         footerHeight > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            className: classNames(hatchStyles.hatch, styles$a.footer),
+            className: classNames(hatchStyles.hatch, styles$b.footer),
             style: { flexBasis: footerHeight },
             children: footer2
           }
@@ -3205,34 +3392,34 @@ function getState$2(checked) {
   return isIndeterminate$1(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
 }
 const wrapper$1 = "_wrapper_178xv_25";
-const disabled$5 = "_disabled_178xv_34";
-const root$3 = "_root_178xv_39";
+const disabled$6 = "_disabled_178xv_34";
+const root$4 = "_root_178xv_39";
 const indicator$1 = "_indicator_178xv_76";
-const large$5 = "_large_178xv_94";
-const small$5 = "_small_178xv_99";
+const large$6 = "_large_178xv_94";
+const small$6 = "_small_178xv_99";
 const disabledBox = "_disabledBox_178xv_104";
 const label$3 = "_label_178xv_109";
-const primary$7 = "_primary_178xv_117";
-const secondary$7 = "_secondary_178xv_126";
-const success$7 = "_success_178xv_135";
-const warning$7 = "_warning_178xv_144";
-const danger$7 = "_danger_178xv_153";
-const info$7 = "_info_178xv_162";
-const styles$9 = {
+const primary$8 = "_primary_178xv_117";
+const secondary$8 = "_secondary_178xv_126";
+const success$8 = "_success_178xv_135";
+const warning$8 = "_warning_178xv_144";
+const danger$8 = "_danger_178xv_153";
+const info$8 = "_info_178xv_162";
+const styles$a = {
   wrapper: wrapper$1,
-  disabled: disabled$5,
-  root: root$3,
+  disabled: disabled$6,
+  root: root$4,
   indicator: indicator$1,
-  large: large$5,
-  small: small$5,
+  large: large$6,
+  small: small$6,
   disabledBox,
   label: label$3,
-  primary: primary$7,
-  secondary: secondary$7,
-  success: success$7,
-  warning: warning$7,
-  danger: danger$7,
-  info: info$7
+  primary: primary$8,
+  secondary: secondary$8,
+  success: success$8,
+  warning: warning$8,
+  danger: danger$8,
+  info: info$8
 };
 const CheckIcon = () => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", fill: "none", role: "presentation", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
   "polyline",
@@ -3255,32 +3442,32 @@ function Checkbox({
   ...props
 }) {
   const labelContent = label2 ?? children2;
-  const variantClass = variant && styles$9[variant];
-  const sizeClass = size2 === "large" ? styles$9.large : size2 === "small" ? styles$9.small : null;
+  const variantClass = variant && styles$a[variant];
+  const sizeClass = size2 === "large" ? styles$a.large : size2 === "small" ? styles$a.small : null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "label",
     {
-      className: clsx(styles$9.wrapper, variantClass, disabled2 && styles$9.disabled),
+      className: clsx(styles$a.wrapper, variantClass, disabled2 && styles$a.disabled),
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           Checkbox$1,
           {
             className: clsx(
-              styles$9.root,
+              styles$a.root,
               variantClass,
               sizeClass,
               chamfer2 && chamferStyles.chamfer,
               disabled2 && chamferStyles.disabled,
               disabled2 && hatchStyles.hatch,
-              disabled2 && styles$9.disabledBox,
+              disabled2 && styles$a.disabledBox,
               className
             ),
             disabled: disabled2,
             ...props,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckboxIndicator, { className: styles$9.indicator, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIcon, {}) })
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckboxIndicator, { className: styles$a.indicator, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIcon, {}) })
           }
         ),
-        labelContent && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$9.label, children: labelContent })
+        labelContent && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$a.label, children: labelContent })
       ]
     }
   );
@@ -4730,13 +4917,13 @@ function* selection_iterator() {
     }
   }
 }
-var root$2 = [null];
+var root$3 = [null];
 function Selection$1(groups, parents) {
   this._groups = groups;
   this._parents = parents;
 }
 function selection() {
-  return new Selection$1([[document.documentElement]], root$2);
+  return new Selection$1([[document.documentElement]], root$3);
 }
 function selection_selection() {
   return this;
@@ -4780,7 +4967,7 @@ Selection$1.prototype = selection.prototype = {
   [Symbol.iterator]: selection_iterator
 };
 function select(selector2) {
-  return typeof selector2 === "string" ? new Selection$1([[document.querySelector(selector2)]], [document.documentElement]) : new Selection$1([[selector2]], root$2);
+  return typeof selector2 === "string" ? new Selection$1([[document.querySelector(selector2)]], [document.documentElement]) : new Selection$1([[selector2]], root$3);
 }
 function sourceEvent(event) {
   let sourceEvent2;
@@ -14130,7 +14317,7 @@ let nextClipId = 0;
 function getClipId() {
   return `plot-clip-${++nextClipId}`;
 }
-function styles$8(mark, {
+function styles$9(mark, {
   title: title2,
   href,
   ariaLabel: variaLabel,
@@ -14496,7 +14683,7 @@ class Mark {
     this.facetAnchor = maybeFacetAnchor(facetAnchor);
     channels = maybeNamed(channels);
     if (extraChannels !== void 0) channels = { ...maybeChannels(extraChannels), ...channels };
-    if (defaults2 !== void 0) channels = { ...styles$8(this, options, defaults2), ...channels };
+    if (defaults2 !== void 0) channels = { ...styles$9(this, options, defaults2), ...channels };
     this.channels = Object.fromEntries(
       Object.entries(channels).map(([name, channel]) => {
         if (isOptions(channel.value)) {
@@ -19524,29 +19711,29 @@ const RadarChart = ({
 };
 const input$1 = "_input_1ymvl_7";
 const pageBackground$2 = "_pageBackground_1ymvl_24";
-const large$4 = "_large_1ymvl_38";
-const small$4 = "_small_1ymvl_43";
-const disabled$4 = "_disabled_1ymvl_48";
-const primary$6 = "_primary_1ymvl_55";
-const success$6 = "_success_1ymvl_64";
-const warning$6 = "_warning_1ymvl_72";
-const danger$6 = "_danger_1ymvl_80";
-const info$6 = "_info_1ymvl_88";
-const secondary$6 = "_secondary_1ymvl_97";
+const large$5 = "_large_1ymvl_38";
+const small$5 = "_small_1ymvl_43";
+const disabled$5 = "_disabled_1ymvl_48";
+const primary$7 = "_primary_1ymvl_55";
+const success$7 = "_success_1ymvl_64";
+const warning$7 = "_warning_1ymvl_72";
+const danger$7 = "_danger_1ymvl_80";
+const info$7 = "_info_1ymvl_88";
+const secondary$7 = "_secondary_1ymvl_97";
 const field = "_field_1ymvl_106";
 const label$2 = "_label_1ymvl_112";
-const styles$7 = {
+const styles$8 = {
   input: input$1,
   pageBackground: pageBackground$2,
-  large: large$4,
-  small: small$4,
-  disabled: disabled$4,
-  primary: primary$6,
-  success: success$6,
-  warning: warning$6,
-  danger: danger$6,
-  info: info$6,
-  secondary: secondary$6,
+  large: large$5,
+  small: small$5,
+  disabled: disabled$5,
+  primary: primary$7,
+  success: success$7,
+  warning: warning$7,
+  danger: danger$7,
+  info: info$7,
+  secondary: secondary$7,
   field,
   label: label$2
 };
@@ -19559,28 +19746,28 @@ function Input({
   ...props
 }) {
   const inputId = React.useId();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$7.field, children: [
-    label2 && /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: styles$7.label, htmlFor: inputId, children: label2 }),
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$8.field, children: [
+    label2 && /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: styles$8.label, htmlFor: inputId, children: label2 }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
         className: classNames(
           chamfer2 && chamferStyles.chamfer,
-          !variant && styles$7.pageBackground,
-          styles$7[variant]
+          !variant && styles$8.pageBackground,
+          styles$8[variant]
         ),
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "input",
           {
             id: inputId,
             className: classNames(
-              styles$7.input,
-              !variant && styles$7.pageBackground,
-              styles$7[variant],
-              size2 === "large" && styles$7.large,
-              size2 === "small" && styles$7.small,
+              styles$8.input,
+              !variant && styles$8.pageBackground,
+              styles$8[variant],
+              size2 === "large" && styles$8.large,
+              size2 === "small" && styles$8.small,
               disabled2 && chamferStyles.disabled,
-              disabled2 && styles$7.disabled,
+              disabled2 && styles$8.disabled,
               disabled2 && hatchStyles.hatch
             ),
             disabled: disabled2,
@@ -19595,7 +19782,7 @@ function Input({
     )
   ] });
 }
-const root$1 = "_root_i158m_7";
+const root$2 = "_root_i158m_7";
 const label$1 = "_label_i158m_14";
 const dropzone = "_dropzone_i158m_18";
 const pageBackground$1 = "_pageBackground_i158m_42";
@@ -19619,19 +19806,19 @@ const customFile = "_customFile_i158m_182";
 const removeButton = "_removeButton_i158m_195";
 const trashIcon = "_trashIcon_i158m_222";
 const trashLid = "_trashLid_i158m_227";
-const large$3 = "_large_i158m_249";
-const small$3 = "_small_i158m_258";
+const large$4 = "_large_i158m_249";
+const small$4 = "_small_i158m_258";
 const hasFiles = "_hasFiles_i158m_271";
 const dragging = "_dragging_i158m_275";
-const disabled$3 = "_disabled_i158m_280";
-const primary$5 = "_primary_i158m_285";
-const success$5 = "_success_i158m_297";
-const warning$5 = "_warning_i158m_309";
-const danger$5 = "_danger_i158m_321";
-const info$5 = "_info_i158m_333";
-const secondary$5 = "_secondary_i158m_345";
-const styles$6 = {
-  root: root$1,
+const disabled$4 = "_disabled_i158m_280";
+const primary$6 = "_primary_i158m_285";
+const success$6 = "_success_i158m_297";
+const warning$6 = "_warning_i158m_309";
+const danger$6 = "_danger_i158m_321";
+const info$6 = "_info_i158m_333";
+const secondary$6 = "_secondary_i158m_345";
+const styles$7 = {
+  root: root$2,
   label: label$1,
   dropzone,
   pageBackground: pageBackground$1,
@@ -19655,17 +19842,17 @@ const styles$6 = {
   removeButton,
   trashIcon,
   trashLid,
-  large: large$3,
-  small: small$3,
+  large: large$4,
+  small: small$4,
   hasFiles,
   dragging,
-  disabled: disabled$3,
-  primary: primary$5,
-  success: success$5,
-  warning: warning$5,
-  danger: danger$5,
-  info: info$5,
-  secondary: secondary$5
+  disabled: disabled$4,
+  primary: primary$6,
+  success: success$6,
+  warning: warning$6,
+  danger: danger$6,
+  info: info$6,
+  secondary: secondary$6
 };
 const normalizeFiles = (value, multiple = false) => {
   if (!value) {
@@ -19768,9 +19955,9 @@ const TrashIcon = () => /* @__PURE__ */ jsxRuntimeExports.jsxs(
     fill: "none",
     role: "presentation",
     "aria-hidden": true,
-    className: styles$6.trashIcon,
+    className: styles$7.trashIcon,
     children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { className: styles$6.trashLid, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { className: styles$7.trashLid, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "path",
           {
@@ -20009,23 +20196,23 @@ const FileUpload = React.forwardRef(function FileUpload2({
   const selectedSummary = selectedFiles.length > 0 ? `${selectedFiles.length} file${selectedFiles.length === 1 ? "" : "s"} selected` : placeholder;
   const dropzoneIcon2 = icon2 ?? /* @__PURE__ */ jsxRuntimeExports.jsx(UploadIcon, {});
   const fileFallbackIcon = icon2 ?? /* @__PURE__ */ jsxRuntimeExports.jsx(FileIcon, {});
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$6.root, className), children: [
-    label2 && /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: styles$6.label, htmlFor: inputId, children: label2 }),
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$7.root, className), children: [
+    label2 && /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: styles$7.label, htmlFor: inputId, children: label2 }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
         className: clsx(
-          styles$6.dropzone,
-          !variant && styles$6.pageBackground,
-          variant && styles$6[variant],
+          styles$7.dropzone,
+          !variant && styles$7.pageBackground,
+          variant && styles$7[variant],
           chamfer2 && chamferStyles.chamfer,
-          size2 === "large" && styles$6.large,
-          size2 === "small" && styles$6.small,
-          disabled2 && styles$6.disabled,
+          size2 === "large" && styles$7.large,
+          size2 === "small" && styles$7.small,
+          disabled2 && styles$7.disabled,
           disabled2 && chamferStyles.disabled,
           disabled2 && hatchStyles.hatch,
-          isDragging && styles$6.dragging,
-          selectedFiles.length > 0 && styles$6.hasFiles,
+          isDragging && styles$7.dragging,
+          selectedFiles.length > 0 && styles$7.hasFiles,
           dropzoneClassName
         ),
         onClick: handleDropzoneClick,
@@ -20043,34 +20230,34 @@ const FileUpload = React.forwardRef(function FileUpload2({
             {
               ref: setInputNode,
               id: inputId,
-              className: styles$6.input,
+              className: styles$7.input,
               type: "file",
               disabled: disabled2,
               ...inputProps,
               onChange: handleInputChange
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$6.dropzoneContent, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$6.dropzoneIcon, "aria-hidden": true, children: dropzoneIcon2 }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$6.dropzoneText, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$6.dropzoneTitle, children: selectedSummary }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$6.dropzoneHint, children: hintText })
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$7.dropzoneContent, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$7.dropzoneIcon, "aria-hidden": true, children: dropzoneIcon2 }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$7.dropzoneText, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$7.dropzoneTitle, children: selectedSummary }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$7.dropzoneHint, children: hintText })
             ] })
           ] }),
           children2
         ]
       }
     ),
-    helperText2 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: styles$6.helperText, children: helperText2 }),
-    showFileList && selectedFiles.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$6.fileList, children: previewItems.map((item2, index2) => {
+    helperText2 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: styles$7.helperText, children: helperText2 }),
+    showFileList && selectedFiles.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$7.fileList, children: previewItems.map((item2, index2) => {
       if (renderFile) {
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$6.customFileRow, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$6.customFile, children: renderFile(item2.file, index2) }),
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$7.customFileRow, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$7.customFile, children: renderFile(item2.file, index2) }),
           removable && /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
             {
               type: "button",
-              className: styles$6.removeButton,
+              className: styles$7.removeButton,
               onClick: (event) => handleRemoveFile(index2, event),
               "aria-label": `Remove ${item2.name}`,
               disabled: disabled2,
@@ -20079,26 +20266,26 @@ const FileUpload = React.forwardRef(function FileUpload2({
           )
         ] }, `${item2.name}-${index2}`);
       }
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$6.fileItem, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$6.fileInfo, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$6.filePreview, "aria-hidden": true, children: item2.previewUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$7.fileItem, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$7.fileInfo, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$7.filePreview, "aria-hidden": true, children: item2.previewUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             "img",
             {
-              className: styles$6.filePreviewImage,
+              className: styles$7.filePreviewImage,
               src: item2.previewUrl,
               alt: ""
             }
           ) : fileFallbackIcon }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$6.fileMeta, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$6.fileName, children: item2.name }),
-            item2.sizeText && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$6.fileSize, children: item2.sizeText })
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$7.fileMeta, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$7.fileName, children: item2.name }),
+            item2.sizeText && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$7.fileSize, children: item2.sizeText })
           ] })
         ] }),
         removable && /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
             type: "button",
-            className: styles$6.removeButton,
+            className: styles$7.removeButton,
             onClick: (event) => handleRemoveFile(index2, event),
             "aria-label": `Remove ${item2.name}`,
             disabled: disabled2,
@@ -20297,7 +20484,7 @@ var RovingFocusGroupImpl = React__namespace.forwardRef((props, forwardedRef) =>
     }
   );
 });
-var ITEM_NAME$4 = "RovingFocusGroupItem";
+var ITEM_NAME$5 = "RovingFocusGroupItem";
 var RovingFocusGroupItem = React__namespace.forwardRef(
   (props, forwardedRef) => {
     const {
@@ -20310,7 +20497,7 @@ var RovingFocusGroupItem = React__namespace.forwardRef(
     } = props;
     const autoId = useId();
     const id2 = tabStopId || autoId;
-    const context = useRovingFocusContext(ITEM_NAME$4, __scopeRovingFocusGroup);
+    const context = useRovingFocusContext(ITEM_NAME$5, __scopeRovingFocusGroup);
     const isCurrentTabStop = context.currentTabStopId === id2;
     const getItems = useCollection$2(__scopeRovingFocusGroup);
     const { onFocusableItemAdd, onFocusableItemRemove, currentTabStopId } = context;
@@ -20367,7 +20554,7 @@ var RovingFocusGroupItem = React__namespace.forwardRef(
     );
   }
 );
-RovingFocusGroupItem.displayName = ITEM_NAME$4;
+RovingFocusGroupItem.displayName = ITEM_NAME$5;
 var MAP_KEY_TO_FOCUS_INTENT = {
   ArrowLeft: "prev",
   ArrowUp: "prev",
@@ -20537,7 +20724,7 @@ var [createRadioGroupContext] = createContextScope(RADIO_GROUP_NAME$2, [
   createRovingFocusGroupScope,
   createRadioScope
 ]);
-var useRovingFocusGroupScope$1 = createRovingFocusGroupScope();
+var useRovingFocusGroupScope$2 = createRovingFocusGroupScope();
 var useRadioScope = createRadioScope();
 var [RadioGroupProvider$1, useRadioGroupContext$1] = createRadioGroupContext(RADIO_GROUP_NAME$2);
 var RadioGroup$2 = React__namespace.forwardRef(
@@ -20555,7 +20742,7 @@ var RadioGroup$2 = React__namespace.forwardRef(
       onValueChange,
       ...groupProps
     } = props;
-    const rovingFocusGroupScope = useRovingFocusGroupScope$1(__scopeRadioGroup);
+    const rovingFocusGroupScope = useRovingFocusGroupScope$2(__scopeRadioGroup);
     const direction = useDirection(dir);
     const [value, setValue] = useControllableState({
       prop: valueProp,
@@ -20599,13 +20786,13 @@ var RadioGroup$2 = React__namespace.forwardRef(
   }
 );
 RadioGroup$2.displayName = RADIO_GROUP_NAME$2;
-var ITEM_NAME$3 = "RadioGroupItem";
+var ITEM_NAME$4 = "RadioGroupItem";
 var RadioGroupItem = React__namespace.forwardRef(
   (props, forwardedRef) => {
     const { __scopeRadioGroup, disabled: disabled2, ...itemProps } = props;
-    const context = useRadioGroupContext$1(ITEM_NAME$3, __scopeRadioGroup);
+    const context = useRadioGroupContext$1(ITEM_NAME$4, __scopeRadioGroup);
     const isDisabled = context.disabled || disabled2;
-    const rovingFocusGroupScope = useRovingFocusGroupScope$1(__scopeRadioGroup);
+    const rovingFocusGroupScope = useRovingFocusGroupScope$2(__scopeRadioGroup);
     const radioScope = useRadioScope(__scopeRadioGroup);
     const ref = React__namespace.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, ref);
@@ -20655,7 +20842,7 @@ var RadioGroupItem = React__namespace.forwardRef(
     );
   }
 );
-RadioGroupItem.displayName = ITEM_NAME$3;
+RadioGroupItem.displayName = ITEM_NAME$4;
 var INDICATOR_NAME2 = "RadioGroupIndicator";
 var RadioGroupIndicator = React__namespace.forwardRef(
   (props, forwardedRef) => {
@@ -20665,49 +20852,49 @@ var RadioGroupIndicator = React__namespace.forwardRef(
   }
 );
 RadioGroupIndicator.displayName = INDICATOR_NAME2;
-var Root2$3 = RadioGroup$2;
-var Item2$2 = RadioGroupItem;
+var Root2$4 = RadioGroup$2;
+var Item2$3 = RadioGroupItem;
 var Indicator = RadioGroupIndicator;
 const group = "_group_hpxu6_19";
 const wrapper = "_wrapper_hpxu6_25";
-const disabled$2 = "_disabled_hpxu6_34";
-const root = "_root_hpxu6_39";
+const disabled$3 = "_disabled_hpxu6_34";
+const root$1 = "_root_hpxu6_39";
 const indicator = "_indicator_hpxu6_72";
 const dot = "_dot_hpxu6_81";
-const large$2 = "_large_hpxu6_88";
-const small$2 = "_small_hpxu6_93";
+const large$3 = "_large_hpxu6_88";
+const small$3 = "_small_hpxu6_93";
 const disabledDot = "_disabledDot_hpxu6_98";
 const label = "_label_hpxu6_102";
 const chamfer = "_chamfer_hpxu6_107";
-const primary$4 = "_primary_hpxu6_112";
-const secondary$4 = "_secondary_hpxu6_121";
-const success$4 = "_success_hpxu6_130";
-const warning$4 = "_warning_hpxu6_139";
-const danger$4 = "_danger_hpxu6_148";
-const info$4 = "_info_hpxu6_157";
-const styles$5 = {
+const primary$5 = "_primary_hpxu6_112";
+const secondary$5 = "_secondary_hpxu6_121";
+const success$5 = "_success_hpxu6_130";
+const warning$5 = "_warning_hpxu6_139";
+const danger$5 = "_danger_hpxu6_148";
+const info$5 = "_info_hpxu6_157";
+const styles$6 = {
   group,
   wrapper,
-  disabled: disabled$2,
-  root,
+  disabled: disabled$3,
+  root: root$1,
   indicator,
   dot,
-  large: large$2,
-  small: small$2,
+  large: large$3,
+  small: small$3,
   disabledDot,
   label,
   chamfer,
-  primary: primary$4,
-  secondary: secondary$4,
-  success: success$4,
-  warning: warning$4,
-  danger: danger$4,
-  info: info$4
+  primary: primary$5,
+  secondary: secondary$5,
+  success: success$5,
+  warning: warning$5,
+  danger: danger$5,
+  info: info$5
 };
 const RadioGroup$1 = ({ className, children: children2, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  Root2$3,
+  Root2$4,
   {
-    className: clsx(styles$5.group, className),
+    className: clsx(styles$6.group, className),
     ...props,
     children: children2
   }
@@ -20722,33 +20909,33 @@ function Radio({
   className,
   ...props
 }) {
-  const variantClass = variant && styles$5[variant];
-  const sizeClass = size2 === "large" ? styles$5.large : size2 === "small" ? styles$5.small : null;
+  const variantClass = variant && styles$6[variant];
+  const sizeClass = size2 === "large" ? styles$6.large : size2 === "small" ? styles$6.small : null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "label",
     {
-      className: clsx(styles$5.wrapper, variantClass, disabled2 && styles$5.disabled),
+      className: clsx(styles$6.wrapper, variantClass, disabled2 && styles$6.disabled),
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Item2$2,
+          Item2$3,
           {
             className: clsx(
-              styles$5.root,
+              styles$6.root,
               variantClass,
               sizeClass,
               chamfer2 && chamferStyles.chamfer,
               disabled2 && chamferStyles.disabled,
               disabled2 && hatchStyles.hatch,
-              disabled2 && styles$5.disabledDot,
+              disabled2 && styles$6.disabledDot,
               className
             ),
             value,
             disabled: disabled2,
             ...props,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Indicator, { className: styles$5.indicator, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$5.dot }) })
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Indicator, { className: styles$6.indicator, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$6.dot }) })
           }
         ),
-        label2 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$5.label, children: label2 })
+        label2 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$6.label, children: label2 })
       ]
     }
   );
@@ -23070,7 +23257,7 @@ const arrow$2 = (options, deps) => ({
   ...arrow$1(options),
   options: [options, deps]
 });
-var NAME$1 = "Arrow";
+var NAME$2 = "Arrow";
 var Arrow$1 = React__namespace.forwardRef((props, forwardedRef) => {
   const { children: children2, width = 10, height = 5, ...arrowProps } = props;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -23086,7 +23273,7 @@ var Arrow$1 = React__namespace.forwardRef((props, forwardedRef) => {
     }
   );
 });
-Arrow$1.displayName = NAME$1;
+Arrow$1.displayName = NAME$2;
 var Root$1 = Arrow$1;
 var POPPER_NAME = "Popper";
 var [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);
@@ -23353,7 +23540,7 @@ function getSideAndAlignFromPlacement(placement) {
   const [side, align = "center"] = placement.split("-");
   return [side, align];
 }
-var Root2$2 = Popper;
+var Root2$3 = Popper;
 var Anchor = PopperAnchor;
 var Content$1 = PopperContent;
 var Arrow = PopperArrow;
@@ -23379,7 +23566,7 @@ var VISUALLY_HIDDEN_STYLES = Object.freeze({
   whiteSpace: "nowrap",
   wordWrap: "normal"
 });
-var NAME = "VisuallyHidden";
+var NAME$1 = "VisuallyHidden";
 var VisuallyHidden = React__namespace.forwardRef(
   (props, forwardedRef) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -23392,7 +23579,7 @@ var VisuallyHidden = React__namespace.forwardRef(
     );
   }
 );
-VisuallyHidden.displayName = NAME;
+VisuallyHidden.displayName = NAME$1;
 var getDefaultParent = function(originalTarget) {
   if (typeof document === "undefined") {
     return null;
@@ -24221,7 +24408,7 @@ var Select = (props) => {
   const isFormControl = trigger2 ? form || !!trigger2.closest("form") : true;
   const [nativeOptionsSet, setNativeOptionsSet] = React__namespace.useState(/* @__PURE__ */ new Set());
   const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Root2$2, { ...popperScope, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Root2$3, { ...popperScope, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     SelectProvider,
     {
       required,
@@ -24938,8 +25125,8 @@ var SelectLabel = React__namespace.forwardRef(
   }
 );
 SelectLabel.displayName = LABEL_NAME$2;
-var ITEM_NAME$2 = "SelectItem";
-var [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME$2);
+var ITEM_NAME$3 = "SelectItem";
+var [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME$3);
 var SelectItem = React__namespace.forwardRef(
   (props, forwardedRef) => {
     const {
@@ -24949,8 +25136,8 @@ var SelectItem = React__namespace.forwardRef(
       textValue: textValueProp,
       ...itemProps
     } = props;
-    const context = useSelectContext(ITEM_NAME$2, __scopeSelect);
-    const contentContext = useSelectContentContext(ITEM_NAME$2, __scopeSelect);
+    const context = useSelectContext(ITEM_NAME$3, __scopeSelect);
+    const contentContext = useSelectContentContext(ITEM_NAME$3, __scopeSelect);
     const isSelected = context.value === value;
     const [textValue, setTextValue] = React__namespace.useState(textValueProp ?? "");
     const [isFocused, setIsFocused] = React__namespace.useState(false);
@@ -25040,7 +25227,7 @@ var SelectItem = React__namespace.forwardRef(
     );
   }
 );
-SelectItem.displayName = ITEM_NAME$2;
+SelectItem.displayName = ITEM_NAME$3;
 var ITEM_TEXT_NAME = "SelectItemText";
 var SelectItemText = React__namespace.forwardRef(
   (props, forwardedRef) => {
@@ -25286,7 +25473,7 @@ function findNextItem(items, search, currentItem) {
 function wrapArray$1(array2, startIndex) {
   return array2.map((_2, index2) => array2[(startIndex + index2) % array2.length]);
 }
-var Root2$1 = Select;
+var Root2$2 = Select;
 var Trigger$2 = SelectTrigger;
 var Value = SelectValue;
 var Icon = SelectIcon;
@@ -25296,32 +25483,32 @@ var Viewport = SelectViewport;
 var Item = SelectItem;
 var ItemText = SelectItemText;
 const trigger$1 = "_trigger_1u214_7";
-const large$1 = "_large_1u214_31";
-const small$1 = "_small_1u214_36";
-const disabled$1 = "_disabled_1u214_41";
+const large$2 = "_large_1u214_31";
+const small$2 = "_small_1u214_36";
+const disabled$2 = "_disabled_1u214_41";
 const icon$1 = "_icon_1u214_46";
 const content$3 = "_content_1u214_52";
-const item$1 = "_item_1u214_57";
-const primary$3 = "_primary_1u214_79";
-const success$3 = "_success_1u214_89";
-const warning$3 = "_warning_1u214_99";
-const danger$3 = "_danger_1u214_109";
-const info$3 = "_info_1u214_119";
-const secondary$3 = "_secondary_1u214_129";
-const styles$4 = {
+const item$2 = "_item_1u214_57";
+const primary$4 = "_primary_1u214_79";
+const success$4 = "_success_1u214_89";
+const warning$4 = "_warning_1u214_99";
+const danger$4 = "_danger_1u214_109";
+const info$4 = "_info_1u214_119";
+const secondary$4 = "_secondary_1u214_129";
+const styles$5 = {
   trigger: trigger$1,
-  large: large$1,
-  small: small$1,
-  disabled: disabled$1,
+  large: large$2,
+  small: small$2,
+  disabled: disabled$2,
   icon: icon$1,
   content: content$3,
-  item: item$1,
-  primary: primary$3,
-  success: success$3,
-  warning: warning$3,
-  danger: danger$3,
-  info: info$3,
-  secondary: secondary$3
+  item: item$2,
+  primary: primary$4,
+  success: success$4,
+  warning: warning$4,
+  danger: danger$4,
+  info: info$4,
+  secondary: secondary$4
 };
 function SelectInput({
   options,
@@ -25334,7 +25521,7 @@ function SelectInput({
   loading = false
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    Root2$1,
+    Root2$2,
     {
       value,
       onValueChange,
@@ -25344,18 +25531,18 @@ function SelectInput({
           Trigger$2,
           {
             className: clsx(
-              styles$4.trigger,
-              styles$4[variant],
+              styles$5.trigger,
+              styles$5[variant],
               chamfer2 && chamferStyles.chamfer,
-              size2 === "large" && styles$4.large,
-              size2 === "small" && styles$4.small,
-              disabled2 && styles$4.disabled,
+              size2 === "large" && styles$5.large,
+              size2 === "small" && styles$5.small,
+              disabled2 && styles$5.disabled,
               disabled2 && hatchStyles.hatch
               // loading && styles.disabled
             ),
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(Value, {}),
-              loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: styles$4.icon, children: "▾" })
+              loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: styles$5.icon, children: "▾" })
             ]
           }
         ),
@@ -25363,7 +25550,7 @@ function SelectInput({
           Content2$2,
           {
             className: classNames(
-              styles$4.content,
+              styles$5.content,
               chamfer2 && chamferStyles.chamfer
             ),
             sideOffset: 6,
@@ -25372,7 +25559,7 @@ function SelectInput({
               {
                 value: opt.value,
                 disabled: opt.disabled,
-                className: styles$4.item,
+                className: styles$5.item,
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(ItemText, { children: opt.label })
               },
               opt.value
@@ -25383,6 +25570,278 @@ function SelectInput({
     }
   );
 }
+var NAME = "Toggle";
+var Toggle = React__namespace.forwardRef((props, forwardedRef) => {
+  const { pressed: pressedProp, defaultPressed, onPressedChange, ...buttonProps } = props;
+  const [pressed, setPressed] = useControllableState({
+    prop: pressedProp,
+    onChange: onPressedChange,
+    defaultProp: defaultPressed ?? false,
+    caller: NAME
+  });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Primitive.button,
+    {
+      type: "button",
+      "aria-pressed": pressed,
+      "data-state": pressed ? "on" : "off",
+      "data-disabled": props.disabled ? "" : void 0,
+      ...buttonProps,
+      ref: forwardedRef,
+      onClick: composeEventHandlers(props.onClick, () => {
+        if (!props.disabled) {
+          setPressed(!pressed);
+        }
+      })
+    }
+  );
+});
+Toggle.displayName = NAME;
+var TOGGLE_GROUP_NAME = "ToggleGroup";
+var [createToggleGroupContext] = createContextScope(TOGGLE_GROUP_NAME, [
+  createRovingFocusGroupScope
+]);
+var useRovingFocusGroupScope$1 = createRovingFocusGroupScope();
+var ToggleGroup = React.forwardRef((props, forwardedRef) => {
+  const { type, ...toggleGroupProps } = props;
+  if (type === "single") {
+    const singleProps = toggleGroupProps;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(ToggleGroupImplSingle, { ...singleProps, ref: forwardedRef });
+  }
+  if (type === "multiple") {
+    const multipleProps = toggleGroupProps;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(ToggleGroupImplMultiple, { ...multipleProps, ref: forwardedRef });
+  }
+  throw new Error(`Missing prop \`type\` expected on \`${TOGGLE_GROUP_NAME}\``);
+});
+ToggleGroup.displayName = TOGGLE_GROUP_NAME;
+var [ToggleGroupValueProvider, useToggleGroupValueContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
+var ToggleGroupImplSingle = React.forwardRef((props, forwardedRef) => {
+  const {
+    value: valueProp,
+    defaultValue,
+    onValueChange = () => {
+    },
+    ...toggleGroupSingleProps
+  } = props;
+  const [value, setValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue ?? "",
+    onChange: onValueChange,
+    caller: TOGGLE_GROUP_NAME
+  });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ToggleGroupValueProvider,
+    {
+      scope: props.__scopeToggleGroup,
+      type: "single",
+      value: React.useMemo(() => value ? [value] : [], [value]),
+      onItemActivate: setValue,
+      onItemDeactivate: React.useCallback(() => setValue(""), [setValue]),
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(ToggleGroupImpl, { ...toggleGroupSingleProps, ref: forwardedRef })
+    }
+  );
+});
+var ToggleGroupImplMultiple = React.forwardRef((props, forwardedRef) => {
+  const {
+    value: valueProp,
+    defaultValue,
+    onValueChange = () => {
+    },
+    ...toggleGroupMultipleProps
+  } = props;
+  const [value, setValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue ?? [],
+    onChange: onValueChange,
+    caller: TOGGLE_GROUP_NAME
+  });
+  const handleButtonActivate = React.useCallback(
+    (itemValue) => setValue((prevValue = []) => [...prevValue, itemValue]),
+    [setValue]
+  );
+  const handleButtonDeactivate = React.useCallback(
+    (itemValue) => setValue((prevValue = []) => prevValue.filter((value2) => value2 !== itemValue)),
+    [setValue]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ToggleGroupValueProvider,
+    {
+      scope: props.__scopeToggleGroup,
+      type: "multiple",
+      value,
+      onItemActivate: handleButtonActivate,
+      onItemDeactivate: handleButtonDeactivate,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(ToggleGroupImpl, { ...toggleGroupMultipleProps, ref: forwardedRef })
+    }
+  );
+});
+ToggleGroup.displayName = TOGGLE_GROUP_NAME;
+var [ToggleGroupContext, useToggleGroupContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
+var ToggleGroupImpl = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeToggleGroup,
+      disabled: disabled2 = false,
+      rovingFocus = true,
+      orientation,
+      dir,
+      loop = true,
+      ...toggleGroupProps
+    } = props;
+    const rovingFocusGroupScope = useRovingFocusGroupScope$1(__scopeToggleGroup);
+    const direction = useDirection(dir);
+    const commonProps = { role: "group", dir: direction, ...toggleGroupProps };
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(ToggleGroupContext, { scope: __scopeToggleGroup, rovingFocus, disabled: disabled2, children: rovingFocus ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Root$2,
+      {
+        asChild: true,
+        ...rovingFocusGroupScope,
+        orientation,
+        dir: direction,
+        loop,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Primitive.div, { ...commonProps, ref: forwardedRef })
+      }
+    ) : /* @__PURE__ */ jsxRuntimeExports.jsx(Primitive.div, { ...commonProps, ref: forwardedRef }) });
+  }
+);
+var ITEM_NAME$2 = "ToggleGroupItem";
+var ToggleGroupItem = React.forwardRef(
+  (props, forwardedRef) => {
+    const valueContext = useToggleGroupValueContext(ITEM_NAME$2, props.__scopeToggleGroup);
+    const context = useToggleGroupContext(ITEM_NAME$2, props.__scopeToggleGroup);
+    const rovingFocusGroupScope = useRovingFocusGroupScope$1(props.__scopeToggleGroup);
+    const pressed = valueContext.value.includes(props.value);
+    const disabled2 = context.disabled || props.disabled;
+    const commonProps = { ...props, pressed, disabled: disabled2 };
+    const ref = React.useRef(null);
+    return context.rovingFocus ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Item$1,
+      {
+        asChild: true,
+        ...rovingFocusGroupScope,
+        focusable: !disabled2,
+        active: pressed,
+        ref,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(ToggleGroupItemImpl, { ...commonProps, ref: forwardedRef })
+      }
+    ) : /* @__PURE__ */ jsxRuntimeExports.jsx(ToggleGroupItemImpl, { ...commonProps, ref: forwardedRef });
+  }
+);
+ToggleGroupItem.displayName = ITEM_NAME$2;
+var ToggleGroupItemImpl = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeToggleGroup, value, ...itemProps } = props;
+    const valueContext = useToggleGroupValueContext(ITEM_NAME$2, __scopeToggleGroup);
+    const singleProps = { role: "radio", "aria-checked": props.pressed, "aria-pressed": void 0 };
+    const typeProps = valueContext.type === "single" ? singleProps : void 0;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Toggle,
+      {
+        ...typeProps,
+        ...itemProps,
+        ref: forwardedRef,
+        onPressedChange: (pressed) => {
+          if (pressed) {
+            valueContext.onItemActivate(value);
+          } else {
+            valueContext.onItemDeactivate(value);
+          }
+        }
+      }
+    );
+  }
+);
+var Root2$1 = ToggleGroup;
+var Item2$2 = ToggleGroupItem;
+const root = "_root_1dix2_31";
+const item$1 = "_item_1dix2_46";
+const chamferEnabled = "_chamferEnabled_1dix2_86";
+const large$1 = "_large_1dix2_126";
+const small$1 = "_small_1dix2_131";
+const disabled$1 = "_disabled_1dix2_136";
+const itemDisabled = "_itemDisabled_1dix2_141";
+const primary$3 = "_primary_1dix2_147";
+const secondary$3 = "_secondary_1dix2_157";
+const success$3 = "_success_1dix2_167";
+const warning$3 = "_warning_1dix2_177";
+const danger$3 = "_danger_1dix2_187";
+const info$3 = "_info_1dix2_197";
+const styles$4 = {
+  root,
+  item: item$1,
+  chamferEnabled,
+  large: large$1,
+  small: small$1,
+  disabled: disabled$1,
+  itemDisabled,
+  primary: primary$3,
+  secondary: secondary$3,
+  success: success$3,
+  warning: warning$3,
+  danger: danger$3,
+  info: info$3
+};
+function SegmentedControl({
+  options = [],
+  value,
+  defaultValue,
+  onValueChange,
+  allowEmpty = false,
+  variant,
+  size: size2,
+  disabled: disabled2,
+  chamfer: chamfer2 = true,
+  className,
+  itemClassName,
+  ...props
+}) {
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = React.useState(defaultValue ?? "");
+  const selectedValue = isControlled ? value : internalValue;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Root2$1,
+    {
+      type: "single",
+      value: selectedValue,
+      onValueChange: (nextValue) => {
+        if (!allowEmpty && !nextValue) {
+          return;
+        }
+        if (!isControlled) {
+          setInternalValue(nextValue);
+        }
+        onValueChange?.(nextValue);
+      },
+      disabled: disabled2,
+      className: clsx(
+        styles$4.root,
+        styles$4[variant],
+        chamfer2 && styles$4.chamferEnabled,
+        size2 === "large" && styles$4.large,
+        size2 === "small" && styles$4.small,
+        disabled2 && hatchStyles.hatch,
+        disabled2 && styles$4.disabled,
+        className
+      ),
+      ...props,
+      children: options.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Item2$2,
+        {
+          value: option.value,
+          disabled: disabled2 || option.disabled,
+          className: clsx(
+            styles$4.item,
+            (disabled2 || option.disabled) && styles$4.itemDisabled,
+            itemClassName
+          ),
+          children: option.label
+        },
+        option.value
+      ))
+    }
+  );
+}
 var SELECTION_KEYS = ["Enter", " "];
 var FIRST_KEYS = ["ArrowDown", "PageUp", "Home"];
 var LAST_KEYS = ["ArrowUp", "PageDown", "End"];
@@ -25427,7 +25886,7 @@ var Menu = (props) => {
       document.removeEventListener("pointermove", handlePointer, { capture: true });
     };
   }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Root2$2, { ...popperScope, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Root2$3, { ...popperScope, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     MenuProvider,
     {
       scope: __scopeMenu,
@@ -27783,6 +28242,7 @@ exports.Loader = Loader;
 exports.RadarChart = RadarChart;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup$1;
+exports.SegmentedControl = SegmentedControl;
 exports.Select = SelectInput;
 exports.toast = toast;
 exports.useJCUITheme = useJCUITheme;