@viasat/beam-react 2.30.0 → 2.37.0

package/lib/Slider/DualSlider.es.js

@@ -1,12 +1,12 @@
-import { jsxs as t, jsx as a, Fragment as Q } from "react/jsx-runtime";
-import W, { useState as Y, useCallback as A } from "react";
+import { jsxs as d, jsx as a, Fragment as Q } from "react/jsx-runtime";
+import W, { useState as Y, useCallback as k } from "react";
 import { useMergeRefs as Z } from "@floating-ui/react";
-import { s as P } from "../../chunks/slider.module.C__JUl2f.js";
+import { s as A } from "../../chunks/slider.module.C__JUl2f.js";
 import { Label as b } from "../Label/Label.es.js";
 import { SliderTickMarks as rr } from "./Slider.TickMarks.es.js";
 import { SliderValueAxisLabels as er } from "./Slider.ValueAxisLabels.es.js";
 import { SliderError as ir } from "./Slider.Error.es.js";
-import { SliderTextField as k } from "./Slider.TextField.es.js";
+import { SliderTextField as P } from "./Slider.TextField.es.js";
 import { SliderThumb as N } from "./Slider.Thumb.es.js";
 import { useDualSliderLogic as lr } from "./hooks/useDualSliderLogic.es.js";
 import "../../chunks/constants.CKKGf1-i.js";
@@ -15,11 +15,11 @@ import { LabelProvider as ar } from "../Form/contexts/label.context.es.js";
 import { HelperTextProvider as nr } from "../Form/contexts/helperText.context.es.js";
 import "../../chunks/CSSLookup.DOOy1rxJ.js";
 import "../../utils/hooks/useId.es.js";
-import { validateDualSliderDefaultValue as dr } from "./utils/slider.validation.utils.es.js";
-import { clientXToValue as tr, calculatePercentage as C } from "./utils/slider.rendering.utils.es.js";
+import { validateDualSliderDefaultValue as tr } from "./utils/slider.validation.utils.es.js";
+import { clientXToValue as dr, calculatePercentage as C } from "./utils/slider.rendering.utils.es.js";
 import { DEFAULT_TEXT_FIELD_WIDTH as mr, toCqw as w } from "./slider.constants.es.js";
 import { useSliderFormReset as or, useSliderPointerEvents as ur } from "./hooks/useSliderEvents.es.js";
-const Pr = W.forwardRef(
+const Ar = W.forwardRef(
   function({
     base: r,
     value: B,
@@ -37,7 +37,7 @@ const Pr = W.forwardRef(
     onChange: H,
     ...X
   }, j) {
-    const U = Z([r.containerRef, j]), x = dr(
+    const U = Z([r.containerRef, j]), x = tr(
       _,
       r.normalizedMin,
       r.normalizedMax
@@ -74,17 +74,17 @@ const Pr = W.forwardRef(
         l
       ]
     );
-    const G = A(
+    const G = k(
       (e) => {
         if (r.disabled || r.readOnly) return;
         const [u, f] = i, p = Math.abs(e - u), M = Math.abs(e - f);
         p < M ? l([e, f]) : l([u, e]);
       },
       [r.disabled, r.readOnly, l, i]
-    ), V = A(
+    ), V = k(
       (e, u) => {
         if (r.disabled || r.readOnly || !r.trackRef.current) return;
-        const f = r.trackRef.current.getBoundingClientRect(), [p, M] = r.normalizedRange, d = tr(
+        const f = r.trackRef.current.getBoundingClientRect(), [p, M] = r.normalizedRange, t = dr(
           e,
           f,
           p,
@@ -92,12 +92,12 @@ const Pr = W.forwardRef(
           r.isRTL
         ), [v, h] = i;
         if (u === "left")
-          l([d, h]);
+          l([t, h]);
         else if (u === "right")
-          l([v, d]);
+          l([v, t]);
         else {
-          const J = Math.abs(d - v), K = Math.abs(d - h);
-          J < K ? (l([d, h]), o("left")) : (l([v, d]), o("right"));
+          const J = Math.abs(t - v), K = Math.abs(t - h);
+          J < K ? (l([t, h]), o("left")) : (l([v, t]), o("right"));
         }
       },
       [
@@ -105,6 +105,7 @@ const Pr = W.forwardRef(
         r.readOnly,
         r.normalizedRange,
         r.isRTL,
+        r.trackRef,
         l,
         i
       ]
@@ -118,7 +119,7 @@ const Pr = W.forwardRef(
       ]
     );
     const [E, O] = r.normalizedRange, I = C(i[0], E, O), $ = C(i[1], E, O);
-    return /* @__PURE__ */ t("div", { ref: U, className: r.classNames.container, ...X, children: [
+    return /* @__PURE__ */ d("div", { ref: U, className: r.classNames.container, ...X, children: [
       /* @__PURE__ */ a(
         ar,
         {
@@ -129,16 +130,16 @@ const Pr = W.forwardRef(
           children: r.label && typeof r.label == "string" ? /* @__PURE__ */ a(b, { children: r.label }) : r.label
         }
       ),
-      /* @__PURE__ */ t("div", { className: r.classNames.contentContainer, role: "group", children: [
+      /* @__PURE__ */ d("div", { className: r.classNames.contentContainer, role: "group", children: [
         T && /* @__PURE__ */ a(
           "div",
           {
-            className: P[`${r.bem.subElementClassPrefix}content-before`],
+            className: A[`${r.bem.subElementClassPrefix}content-before`],
             children: T
           }
         ),
         R && /* @__PURE__ */ a(
-          k,
+          P,
           {
             value: i[0],
             readOnly: r.readOnly,
@@ -157,8 +158,8 @@ const Pr = W.forwardRef(
             ariaLabel: r.isRTL ? r.aria.label ? `${r.aria.label} (maximum)` : "Maximum value" : r.aria.label ? `${r.aria.label} (minimum)` : "Minimum value"
           }
         ),
-        /* @__PURE__ */ t("div", { style: { width: "100%" }, children: [
-          /* @__PURE__ */ t(
+        /* @__PURE__ */ d("div", { style: { width: "100%" }, children: [
+          /* @__PURE__ */ d(
             "div",
             {
               ref: r.trackRef,
@@ -259,7 +260,7 @@ const Pr = W.forwardRef(
           )
         ] }),
         R && /* @__PURE__ */ a(
-          k,
+          P,
           {
             value: i[1],
             readOnly: r.readOnly,
@@ -281,12 +282,12 @@ const Pr = W.forwardRef(
         D && /* @__PURE__ */ a(
           "div",
           {
-            className: P[`${r.bem.subElementClassPrefix}content-after`],
+            className: A[`${r.bem.subElementClassPrefix}content-after`],
             children: D
           }
         )
       ] }),
-      r.name && /* @__PURE__ */ t(Q, { children: [
+      r.name && /* @__PURE__ */ d(Q, { children: [
         /* @__PURE__ */ a(
           "input",
           {
@@ -309,7 +310,7 @@ const Pr = W.forwardRef(
           }
         )
       ] }),
-      /* @__PURE__ */ t(nr, { ctxId: r.ids.helperText, ctxDisabled: r.disabled, children: [
+      /* @__PURE__ */ d(nr, { ctxId: r.ids.helperText, ctxDisabled: r.disabled, children: [
         q,
         /* @__PURE__ */ a(ir, { error: r.error, errorId: r.ids.error })
       ] }),
@@ -318,6 +319,6 @@ const Pr = W.forwardRef(
   }
 );
 export {
-  Pr as DualSlider,
-  Pr as default
+  Ar as DualSlider,
+  Ar as default
 };

package/lib/Slider/SingleSlider.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),a=require("react"),B=require("@floating-ui/react"),R=require("../../chunks/slider.module.hYyjcVRE.js"),H=require("../Label/Label.cjs.js"),X=require("./Slider.TickMarks.cjs.js"),W=require("./Slider.ValueAxisLabels.cjs.js"),$=require("./Slider.Error.cjs.js"),Q=require("./Slider.TextField.cjs.js"),U=require("./Slider.Thumb.cjs.js"),Z=require("./hooks/useSingleSliderLogic.cjs.js");require("../../chunks/constants.hwjHOsvT.js");require("../../chunks/form.context.hesWPMlU.js");const G=require("../Form/contexts/label.context.cjs.js"),J=require("../Form/contexts/helperText.context.cjs.js");require("../../chunks/CSSLookup.DESAWWRT.js");require("../../utils/hooks/useId.cjs.js");const K=require("./utils/slider.validation.utils.cjs.js"),v=require("./utils/slider.rendering.utils.cjs.js"),c=require("./slider.constants.cjs.js"),h=require("./hooks/useSliderEvents.cjs.js"),q=a.forwardRef(function({base:e,value:L,defaultValue:p,marksSource:y="none",restrictToValueAxis:u=!1,showTextField:M=!1,textFieldWidth:z=c.DEFAULT_TEXT_FIELD_WIDTH,persistentTooltip:T=!1,disabledTooltip:j=!1,helperText:k,contentBefore:m,contentAfter:x,onChange:E,...V},A){const C=B.useMergeRefs([e.containerRef,A]),t=K.validateSingleSliderDefaultValue(p,e.normalizedMin,e.normalizedMax),[_,o]=a.useState(!1),{value:n,setValue:l,markValues:g,step:s,getValidValue:d}=Z.useSingleSliderLogic({value:L,defaultValue:t,range:e.normalizedRange,min:e.normalizedMin,max:e.normalizedMax,step:e.normalizedStep,valueAxis:e.valueAxis,restrictToValueAxis:u,onChange:E});h.useSliderFormReset(e.internalInputRef,t??e.normalizedMin??e.normalizedRange[0],i=>l(d(i)),[t,e.normalizedMin,e.normalizedRange,l,d]);const N=a.useCallback(i=>{e.disabled||e.readOnly||l(i)},[e.disabled,e.readOnly,l]),S=a.useCallback(i=>{if(e.disabled||e.readOnly||!e.trackRef.current)return;const I=e.trackRef.current.getBoundingClientRect(),[P,w]=e.normalizedRange,F=v.clientXToValue(i,I,P,w,e.isRTL);l(F),o(!0)},[e.disabled,e.readOnly,e.normalizedRange,e.isRTL,l]);h.useSliderPointerEvents(_,S,()=>o(!1));const[O,D]=e.normalizedRange,f=v.calculatePercentage(Number(n),O,D);return r.jsxs("div",{ref:C,className:e.classNames.container,...V,children:[r.jsx(G.LabelProvider,{ctxHtmlFor:e.ids.input,ctxDisabled:e.disabled,ctxRequired:e.required,ctxId:e.aria.labelledBy,children:e.label&&typeof e.label=="string"?r.jsx(H.Label,{children:e.label}):e.label}),r.jsxs("div",{className:e.classNames.contentContainer,role:"group",children:[m&&r.jsx("div",{className:R.styles[`${e.bem.subElementClassPrefix}content-before`],children:m}),r.jsxs("div",{style:{width:"100%"},children:[r.jsxs("div",{ref:e.trackRef,className:e.classNames.track,onPointerDown:i=>{e.disabled||e.readOnly||S(i.clientX)},children:[r.jsx("div",{className:e.classNames.fill,style:{[e.bem.variable("min-percentage")]:c.ZERO_CQW,[e.bem.variable("max-percentage")]:c.toCqw(f)}}),r.jsx(X.SliderTickMarks,{valueAxis:e.valueAxis,markValues:g,range:e.normalizedRange,step:s,marksSource:y}),r.jsx(U.SliderThumb,{isRTL:e.isRTL,error:e.hasError,isDragging:_,setIsDragging:o,currentPercentage:f,disabled:e.disabled,readOnly:e.readOnly,value:n,range:e.normalizedRange,min:e.normalizedMin,max:e.normalizedMax,step:s,persistentTooltip:T,disabledTooltip:j,getValidValue:d,setValue:l,ariaLabelledby:e.aria.labelledBy,ariaLabel:e.aria.label,valueAxis:e.valueAxis,restrictToValueAxis:u})]}),r.jsx(W.SliderValueAxisLabels,{valueAxis:e.valueAxis,markValues:g,range:e.normalizedRange,showValueAxisLabels:e.showValueAxisLabels,onMarkClick:N,isRTL:e.isRTL})]}),M&&r.jsx(Q.SliderTextField,{value:n,readOnly:e.readOnly,disabled:e.disabled,error:e.hasError,getValidValue:d,setValue:l,textFieldWidth:z,min:e.normalizedMin,max:e.normalizedMax,step:s,errorId:e.ids.error,ariaLabelledby:e.aria.labelledBy,ariaLabel:e.aria.label}),x&&r.jsx("div",{className:R.styles[`${e.bem.subElementClassPrefix}content-after`],children:x})]}),e.name&&r.jsx("input",{type:"hidden",ref:e.internalInputRef,id:e.ids.input,name:e.name,value:n,disabled:e.disabled}),r.jsxs(J.HelperTextProvider,{ctxId:e.ids.helperText,ctxDisabled:e.disabled,children:[k,r.jsx($.SliderError,{error:e.error,errorId:e.ids.error})]}),e.showErrors(e.ids.validationErrors)]})});exports.SingleSlider=q;exports.default=q;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),a=require("react"),B=require("@floating-ui/react"),R=require("../../chunks/slider.module.hYyjcVRE.js"),H=require("../Label/Label.cjs.js"),X=require("./Slider.TickMarks.cjs.js"),W=require("./Slider.ValueAxisLabels.cjs.js"),$=require("./Slider.Error.cjs.js"),Q=require("./Slider.TextField.cjs.js"),U=require("./Slider.Thumb.cjs.js"),Z=require("./hooks/useSingleSliderLogic.cjs.js");require("../../chunks/constants.hwjHOsvT.js");require("../../chunks/form.context.hesWPMlU.js");const G=require("../Form/contexts/label.context.cjs.js"),J=require("../Form/contexts/helperText.context.cjs.js");require("../../chunks/CSSLookup.DESAWWRT.js");require("../../utils/hooks/useId.cjs.js");const K=require("./utils/slider.validation.utils.cjs.js"),v=require("./utils/slider.rendering.utils.cjs.js"),c=require("./slider.constants.cjs.js"),h=require("./hooks/useSliderEvents.cjs.js"),q=a.forwardRef(function({base:e,value:L,defaultValue:p,marksSource:y="none",restrictToValueAxis:u=!1,showTextField:M=!1,textFieldWidth:z=c.DEFAULT_TEXT_FIELD_WIDTH,persistentTooltip:T=!1,disabledTooltip:k=!1,helperText:j,contentBefore:m,contentAfter:x,onChange:E,...V},A){const C=B.useMergeRefs([e.containerRef,A]),t=K.validateSingleSliderDefaultValue(p,e.normalizedMin,e.normalizedMax),[_,o]=a.useState(!1),{value:n,setValue:l,markValues:g,step:s,getValidValue:d}=Z.useSingleSliderLogic({value:L,defaultValue:t,range:e.normalizedRange,min:e.normalizedMin,max:e.normalizedMax,step:e.normalizedStep,valueAxis:e.valueAxis,restrictToValueAxis:u,onChange:E});h.useSliderFormReset(e.internalInputRef,t??e.normalizedMin??e.normalizedRange[0],i=>l(d(i)),[t,e.normalizedMin,e.normalizedRange,l,d]);const N=a.useCallback(i=>{e.disabled||e.readOnly||l(i)},[e.disabled,e.readOnly,l]),S=a.useCallback(i=>{if(e.disabled||e.readOnly||!e.trackRef.current)return;const I=e.trackRef.current.getBoundingClientRect(),[P,w]=e.normalizedRange,F=v.clientXToValue(i,I,P,w,e.isRTL);l(F),o(!0)},[e.disabled,e.readOnly,e.normalizedRange,e.isRTL,e.trackRef,l]);h.useSliderPointerEvents(_,S,()=>o(!1));const[O,D]=e.normalizedRange,f=v.calculatePercentage(Number(n),O,D);return r.jsxs("div",{ref:C,className:e.classNames.container,...V,children:[r.jsx(G.LabelProvider,{ctxHtmlFor:e.ids.input,ctxDisabled:e.disabled,ctxRequired:e.required,ctxId:e.aria.labelledBy,children:e.label&&typeof e.label=="string"?r.jsx(H.Label,{children:e.label}):e.label}),r.jsxs("div",{className:e.classNames.contentContainer,role:"group",children:[m&&r.jsx("div",{className:R.styles[`${e.bem.subElementClassPrefix}content-before`],children:m}),r.jsxs("div",{style:{width:"100%"},children:[r.jsxs("div",{ref:e.trackRef,className:e.classNames.track,onPointerDown:i=>{e.disabled||e.readOnly||S(i.clientX)},children:[r.jsx("div",{className:e.classNames.fill,style:{[e.bem.variable("min-percentage")]:c.ZERO_CQW,[e.bem.variable("max-percentage")]:c.toCqw(f)}}),r.jsx(X.SliderTickMarks,{valueAxis:e.valueAxis,markValues:g,range:e.normalizedRange,step:s,marksSource:y}),r.jsx(U.SliderThumb,{isRTL:e.isRTL,error:e.hasError,isDragging:_,setIsDragging:o,currentPercentage:f,disabled:e.disabled,readOnly:e.readOnly,value:n,range:e.normalizedRange,min:e.normalizedMin,max:e.normalizedMax,step:s,persistentTooltip:T,disabledTooltip:k,getValidValue:d,setValue:l,ariaLabelledby:e.aria.labelledBy,ariaLabel:e.aria.label,valueAxis:e.valueAxis,restrictToValueAxis:u})]}),r.jsx(W.SliderValueAxisLabels,{valueAxis:e.valueAxis,markValues:g,range:e.normalizedRange,showValueAxisLabels:e.showValueAxisLabels,onMarkClick:N,isRTL:e.isRTL})]}),M&&r.jsx(Q.SliderTextField,{value:n,readOnly:e.readOnly,disabled:e.disabled,error:e.hasError,getValidValue:d,setValue:l,textFieldWidth:z,min:e.normalizedMin,max:e.normalizedMax,step:s,errorId:e.ids.error,ariaLabelledby:e.aria.labelledBy,ariaLabel:e.aria.label}),x&&r.jsx("div",{className:R.styles[`${e.bem.subElementClassPrefix}content-after`],children:x})]}),e.name&&r.jsx("input",{type:"hidden",ref:e.internalInputRef,id:e.ids.input,name:e.name,value:n,disabled:e.disabled}),r.jsxs(J.HelperTextProvider,{ctxId:e.ids.helperText,ctxDisabled:e.disabled,children:[j,r.jsx($.SliderError,{error:e.error,errorId:e.ids.error})]}),e.showErrors(e.ids.validationErrors)]})});exports.SingleSlider=q;exports.default=q;

package/lib/Slider/SingleSlider.es.js

@@ -85,7 +85,7 @@ const kr = F.forwardRef(function({
       );
       l(_), o(!0);
     },
-    [r.disabled, r.readOnly, r.normalizedRange, r.isRTL, l]
+    [r.disabled, r.readOnly, r.normalizedRange, r.isRTL, r.trackRef, l]
   );
   ir(s, p, () => o(!1));
   const [D, O] = r.normalizedRange, x = Y(Number(a), D, O);

package/lib/Slider/Slider.es.js

@@ -1,9 +1,9 @@
 import { jsx as i } from "react/jsx-runtime";
-import D from "react";
+import { forwardRef as D } from "react";
 import { SingleSlider as L } from "./SingleSlider.es.js";
-import { DualSlider as R } from "./DualSlider.es.js";
-import { useSliderBase as g } from "./hooks/useSliderBase.es.js";
-const w = D.forwardRef(
+import { DualSlider as g } from "./DualSlider.es.js";
+import { useSliderBase as w } from "./hooks/useSliderBase.es.js";
+const B = D(
   function(a, e) {
     const {
       name: o,
@@ -11,10 +11,10 @@ const w = D.forwardRef(
       disabled: t,
       readOnly: d,
       required: n,
-      className: u,
-      range: m,
-      step: f,
-      min: b,
+      className: m,
+      range: u,
+      step: b,
+      min: f,
       max: c,
       label: y,
       valueAxis: S,
@@ -23,17 +23,17 @@ const w = D.forwardRef(
       "aria-label": x,
       "aria-labelledby": v,
       ...r
-    } = a, l = g(
+    } = a, l = w(
       {
         name: o,
         validationRules: s,
         disabled: t,
         readOnly: d,
         required: n,
-        className: u,
-        range: m,
-        step: f,
-        min: b,
+        className: m,
+        range: u,
+        step: b,
+        min: f,
         max: c,
         label: y,
         valueAxis: S,
@@ -45,7 +45,7 @@ const w = D.forwardRef(
       e
     );
     return Array.isArray(a.value) || Array.isArray(a.defaultValue) ? /* @__PURE__ */ i(
-      R,
+      g,
       {
         ref: e,
         base: l,
@@ -60,8 +60,8 @@ const w = D.forwardRef(
       }
     );
   }
-), C = w;
+), N = B;
 export {
-  C as Slider,
-  C as default
+  N as Slider,
+  N as default
 };

package/lib/Slider/hooks/useDualSliderLogic.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),n=require("../utils/sliderLogic.utils.cjs.js");function D({value:g,defaultValue:S,range:[f,k],min:l,max:e,step:a,valueAxis:C,restrictToValueAxis:b=!1,onChange:d,minGap:h}){const o=h??a,r=c.useMemo(()=>n.calculateMarkValues(C,f,k),[C,f,k]),_=c.useCallback(u=>n.getClosestMark(u,r,l,e),[r,l,e]),F=c.useCallback(u=>n.getClosestStep(u,l,e,a),[l,e,a]),i=c.useCallback(u=>n.getValidValue(u,b,r,l,e,a),[b,r,l,e,a]),V=g!==void 0,L=()=>S!==void 0?S:[l,e],[q,w]=c.useState(L()),M=V?g:q,y=c.useCallback(u=>{let[t,s]=u;t=i(t),s=i(s),s-t<o&&(t!==M[0]?t=Math.min(t,s-o):s=Math.max(s,t+o)),t=Math.max(l,Math.min(t,e-o)),s=Math.max(t+o,Math.min(s,e));const v=[t,s];V||w(v),d&&d(v)},[i,V,d,M,o,l,e]);return{value:M,setValue:y,markValues:r,getClosestMark:_,getClosestStep:F,getValidValue:i,min:l,max:e,step:a}}exports.useDualSliderLogic=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),n=require("../utils/sliderLogic.utils.cjs.js");function D({value:d,defaultValue:g,range:[S,f],min:l,max:e,step:a,valueAxis:k,restrictToValueAxis:C=!1,onChange:M,minGap:h}){const o=h??a,r=c.useMemo(()=>n.calculateMarkValues(k,S,f),[k,S,f]),_=c.useCallback(u=>n.getClosestMark(u,r,l,e),[r,l,e]),F=c.useCallback(u=>n.getClosestStep(u,l,e,a),[l,e,a]),i=c.useCallback(u=>n.getValidValue(u,C,r,l,e,a),[C,r,l,e,a]),b=d!==void 0,L=()=>g!==void 0?g:[l,e],[q,w]=c.useState(L()),V=d!==void 0?d:q,y=c.useCallback(u=>{let[t,s]=u;t=i(t),s=i(s),s-t<o&&(t!==V[0]?t=Math.min(t,s-o):s=Math.max(s,t+o)),t=Math.max(l,Math.min(t,e-o)),s=Math.max(t+o,Math.min(s,e));const v=[t,s];b||w(v),M&&M(v)},[i,b,M,V,o,l,e]);return{value:V,setValue:y,markValues:r,getClosestMark:_,getClosestStep:F,getValidValue:i,min:l,max:e,step:a}}exports.useDualSliderLogic=D;

package/lib/Slider/hooks/useDualSliderLogic.es.js

@@ -1,20 +1,20 @@
 import { useMemo as I, useCallback as n, useState as L } from "react";
 import { calculateMarkValues as U, getClosestMark as j, getClosestStep as q, getValidValue as y } from "../utils/sliderLogic.utils.es.js";
 function H({
-  value: f,
-  defaultValue: d,
-  range: [g, k],
+  value: i,
+  defaultValue: f,
+  range: [d, g],
   min: l,
   max: e,
   step: a,
-  valueAxis: C,
-  restrictToValueAxis: S = !1,
+  valueAxis: k,
+  restrictToValueAxis: v = !1,
   onChange: V,
   minGap: h
 }) {
   const r = h ?? a, u = I(
-    () => U(C, g, k),
-    [C, g, k]
+    () => U(k, d, g),
+    [k, d, g]
   ), F = n(
     (s) => j(s, u, l, e),
     [u, l, e]
@@ -22,20 +22,20 @@ function H({
     (s) => q(s, l, e, a),
     [l, e, a]
   ), c = n(
-    (s) => y(s, S, u, l, e, a),
-    [S, u, l, e, a]
-  ), i = f !== void 0, w = () => d !== void 0 ? d : [l, e], [b, D] = L(
+    (s) => y(s, v, u, l, e, a),
+    [v, u, l, e, a]
+  ), C = i !== void 0, w = () => f !== void 0 ? f : [l, e], [b, D] = L(
     w()
-  ), M = i ? f : b, G = n(
+  ), M = i !== void 0 ? i : b, G = n(
     (s) => {
       let [t, o] = s;
       t = c(t), o = c(o), o - t < r && (t !== M[0] ? t = Math.min(t, o - r) : o = Math.max(o, t + r)), t = Math.max(l, Math.min(t, e - r)), o = Math.max(t + r, Math.min(o, e));
-      const v = [t, o];
-      i || D(v), V && V(v);
+      const S = [t, o];
+      C || D(S), V && V(S);
     },
     [
       c,
-      i,
+      C,
       V,
       M,
       r,

package/lib/Slider/hooks/useSingleSliderLogic.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),r=require("../utils/sliderLogic.utils.cjs.js");function q({value:d,defaultValue:g,range:[n,S],min:e,max:l,step:o,valueAxis:V,restrictToValueAxis:k=!1,onChange:c}){const u=s.useMemo(()=>r.calculateMarkValues(V,n,S),[V,n,S]),b=s.useCallback(t=>r.getClosestMark(t,u,e,l),[u,e,l]),f=s.useCallback(t=>r.getClosestStep(t,e,l,o),[e,l,o]),a=s.useCallback(t=>r.getValidValue(t,k,u,e,l,o),[k,u,e,l,o]),i=d!==void 0,v=()=>g!==void 0?g:e,[M,_]=s.useState(v()),F=i?d:M,L=s.useCallback(t=>{const C=a(t);i||_(C),c&&c(C)},[a,i,c]);return{value:F,setValue:L,markValues:u,getClosestMark:b,getClosestStep:f,getValidValue:a,min:e,max:l,step:o}}exports.useSingleSliderLogic=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),r=require("../utils/sliderLogic.utils.cjs.js");function q({value:c,defaultValue:d,range:[g,n],min:e,max:l,step:o,valueAxis:S,restrictToValueAxis:V=!1,onChange:a}){const u=s.useMemo(()=>r.calculateMarkValues(S,g,n),[S,g,n]),b=s.useCallback(t=>r.getClosestMark(t,u,e,l),[u,e,l]),v=s.useCallback(t=>r.getClosestStep(t,e,l,o),[e,l,o]),i=s.useCallback(t=>r.getValidValue(t,V,u,e,l,o),[V,u,e,l,o]),k=c!==void 0,f=()=>d!==void 0?d:e,[M,_]=s.useState(f()),F=c!==void 0?c:M,L=s.useCallback(t=>{const C=i(t);k||_(C),a&&a(C)},[i,k,a]);return{value:F,setValue:L,markValues:u,getClosestMark:b,getClosestStep:v,getValidValue:i,min:e,max:l,step:o}}exports.useSingleSliderLogic=q;

package/lib/Slider/hooks/useSingleSliderLogic.es.js

@@ -1,36 +1,36 @@
 import { useMemo as I, useCallback as r, useState as L } from "react";
 import { calculateMarkValues as U, getClosestMark as j, getClosestStep as q, getValidValue as w } from "../utils/sliderLogic.utils.es.js";
 function B({
-  value: V,
-  defaultValue: d,
-  range: [g, i],
+  value: u,
+  defaultValue: V,
+  range: [d, g],
   min: e,
   max: t,
   step: o,
-  valueAxis: n,
-  restrictToValueAxis: S = !1,
-  onChange: u
+  valueAxis: i,
+  restrictToValueAxis: n = !1,
+  onChange: a
 }) {
   const s = I(
-    () => U(n, g, i),
-    [n, g, i]
+    () => U(i, d, g),
+    [i, d, g]
   ), k = r(
     (l) => j(l, s, e, t),
     [s, e, t]
   ), C = r(
     (l) => q(l, e, t, o),
     [e, t, o]
-  ), a = r(
-    (l) => w(l, S, s, e, t, o),
-    [S, s, e, t, o]
-  ), c = V !== void 0, v = () => d !== void 0 ? d : e, [F, M] = L(
+  ), c = r(
+    (l) => w(l, n, s, e, t, o),
+    [n, s, e, t, o]
+  ), S = u !== void 0, v = () => V !== void 0 ? V : e, [F, M] = L(
     v()
-  ), p = c ? V : F, b = r(
+  ), p = u !== void 0 ? u : F, b = r(
     (l) => {
-      const f = a(l);
-      c || M(f), u && u(f);
+      const f = c(l);
+      S || M(f), a && a(f);
     },
-    [a, c, u]
+    [c, S, a]
   );
   return {
     value: p,
@@ -38,7 +38,7 @@ function B({
     markValues: s,
     getClosestMark: k,
     getClosestStep: C,
-    getValidValue: a,
+    getValidValue: c,
     min: e,
     max: t,
     step: o

package/lib/Tabs/Tabs.Group.d.ts

@@ -1,7 +1,7 @@
-import { default as React, ReactElement } from 'react';
+import { ComponentPropsWithoutRef, ReactElement } from 'react';
 import { Box } from '../Box/Box';
 import { TabsItemProps } from './Tabs.Item';
-export interface TabsGroupProps extends React.ComponentPropsWithoutRef<typeof Box> {
+export interface TabsGroupProps extends ComponentPropsWithoutRef<typeof Box> {
     /**
      * Specify the items for the group
      */

package/lib/Tabs/Tabs.Item.d.ts

@@ -1,5 +1,5 @@
-import { default as React } from 'react';
-export interface TabsItemProps extends React.ComponentPropsWithoutRef<'div'> {
+import { default as React, ComponentPropsWithoutRef } from 'react';
+export interface TabsItemProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Specify the value of the item
      */

package/lib/Tabs/Tabs.Panel.d.ts

@@ -1,5 +1,5 @@
-import { default as React } from 'react';
-export interface TabsPanelProps extends React.ComponentPropsWithoutRef<'div'> {
+import { default as React, ComponentPropsWithoutRef } from 'react';
+export interface TabsPanelProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Specify the value of the panel
      */

package/lib/Text/Text.d.ts

@@ -1,7 +1,7 @@
-import { default as React } from 'react';
+import { default as React, HTMLAttributes } from 'react';
 import { TextAlignment, TextColor, TextKind, TextWordBreak } from '@viasat/beam-shared/components/text';
 import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
-export interface TextProps extends React.HTMLAttributes<HTMLElement> {
+export interface TextProps extends HTMLAttributes<HTMLElement> {
     /**
      * The text content
      */

package/lib/Text/Text.es.js

@@ -1,10 +1,10 @@
 import "../../assets/Text.css";
 import { jsx as I } from "react/jsx-runtime";
-import _ from "clsx";
-import A from "react";
-import { p as P, t as E } from "../../chunks/constants.CKKGf1-i.js";
-import { g as N } from "../../chunks/classNames.BTJmrO_L.js";
-const d = `${P}sem-typo-`, T = "compact-", k = {
+import A from "clsx";
+import { forwardRef as P } from "react";
+import { p as E, t as N } from "../../chunks/constants.CKKGf1-i.js";
+import { g as T } from "../../chunks/classNames.BTJmrO_L.js";
+const d = `${E}sem-typo-`, _ = "compact-", k = {
   // defaults
   "heading-6xl": "h1",
   "heading-5xl": "h2",
@@ -124,7 +124,7 @@ const d = `${P}sem-typo-`, T = "compact-", k = {
   "bm-text--expressiveStronger": "bm-text--expressiveStronger",
   "bm-text--expressiveInverse": "bm-text--expressiveInverse",
   "bm-text--expressiveInverseStronger": "bm-text--expressiveInverseStronger"
-}, { baseClassNamePrefix: C, classModifierPrefix: t } = N("text"), M = A.forwardRef(
+}, { baseClassNamePrefix: C, classModifierPrefix: t } = T("text"), M = P(
   ({
     kind: m = "body-md",
     color: b,
@@ -142,19 +142,19 @@ const d = `${P}sem-typo-`, T = "compact-", k = {
     children: c,
     className: v,
     ...f
-  }, u) => {
-    const $ = x || k[m], p = !m.includes("body");
+  }, $) => {
+    const u = x || k[m], p = !m.includes("body");
     s && p && console.warn(
       "The `bold` prop is not supported for heading, label or detail `kind` variants. Use the `bold` for body `kind` variants."
     );
-    const S = _(
+    const S = A(
       e[C],
-      a && E(a),
+      a && N(a),
       // no need to redo typography tokens, fonts are already defined in typography.classes.css
       m && e[`${d}${m}`],
       // no need to redo compact typography tokens, if a font does not support compact, this class will
       // not exist and therefore not be applied
-      i && e[`${d}${T}${m}`],
+      i && e[`${d}${_}${m}`],
       s && !p && e[`${t}body-bold`],
       b && e[`${t}${b}`],
       o && e[`${t}${o}`],
@@ -166,7 +166,7 @@ const d = `${P}sem-typo-`, T = "compact-", k = {
       h && e[`${t}italic`],
       v
     );
-    return /* @__PURE__ */ I($, { ref: u, className: S, ...f, children: c });
+    return /* @__PURE__ */ I(u, { ref: $, className: S, ...f, children: c });
   }
 );
 M.displayName = "Text";

package/lib/_Options/Option.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react/jsx-runtime"),t=require("react"),d=require("./Option.context.cjs.js"),x=require("../../utils/functions.cjs.js"),f=({className:g,label:i,value:m,children:o,...u})=>{const s=t.useMemo(()=>i??x.extractTextFromReactNode(o),[i,o]),n=m??s,{selectOption:c,deselectOption:r,registerOption:l,unregisterOption:a,setOptionProps:p}=d.useOptionsContext(),e=t.useMemo(()=>Symbol("OptionId"),[]),O=t.useCallback(_=>{_?c(e):r(e)},[r,e,c]);return t.useLayoutEffect(()=>(l(e),()=>a(e)),[e,l,a]),t.useEffect(()=>{p(e,{...u,label:s,value:n,children:o,onSelectionChange:O})},[o,e,s,O,u,p,n]),b.jsx("option",{value:n,children:s})};exports.Option=f;exports.default=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react/jsx-runtime"),s=require("react"),g=require("./Option.context.cjs.js"),m=require("./OptionGroup.context.cjs.js"),q=require("../../utils/functions.cjs.js"),v=require("../../utils/hooks/useId.cjs.js"),d=({className:C,label:u,value:f,children:t,...i})=>{const o=s.useMemo(()=>u??q.extractTextFromReactNode(t),[u,t]),n=f??o,{selectOption:r,deselectOption:c,registerOption:l,unregisterOption:a,setOptionProps:p}=g.useOptionsContext(),{groupId:O}=m.useOptionGroupContext(),e=v.useId()??"",_=s.useCallback(x=>{x?r(e):c(e)},[c,e,r]);return s.useLayoutEffect(()=>(l(e,O),()=>a(e)),[e,O,l,a]),s.useEffect(()=>{p(e,{...i,label:o,value:n,children:t,onSelectionChange:_})},[t,e,o,_,i,p,n]),b.jsx("option",{value:n,children:o})};exports.Option=d;exports.default=d;

package/lib/_Options/Option.context.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),h=r.createContext(null),P=h.Provider,S=()=>{const o=r.useContext(h);if(!o)throw new Error("useOptionsContext must be used within an OptionsProvider");return o},I=o=>Array.isArray(o)?o:o!==void 0?[o]:[],V=(o,c,u)=>{const p=r.useRef(void 0),[i,O]=r.useState(()=>new Map),[a,C]=r.useState(()=>[]),g=r.useRef(i);g.current=i;const l=r.useMemo(()=>I(o),[o]),d=r.useRef(l);d.current=l,r.useMemo(()=>{if(!l.length)p.current=void 0;else{const n=l[l.length-1],t=a.map(e=>i.get(e)).findIndex(e=>(e==null?void 0:e.value)===n);p.current=t}},[l,a,i]);const x=r.useCallback(n=>{const t=g.current.get(n),e=t==null?void 0:t.value,s=d.current;t&&e&&c(u?[...s.filter(f=>f!==e),e]:e)},[u,c]),b=r.useCallback(n=>{const t=g.current.get(n),e=t==null?void 0:t.value,s=d.current;if(t&&e)if(u){if(!s.includes(e))return;c(s.filter(f=>f!==e))}else return},[u,c]),m=r.useCallback(n=>{if(!u||n===void 0)return;const e=I(n)[0];if(!e)return;const s=d.current;s.includes(e)&&c(s.filter(f=>f!==e))},[u,c]),M=r.useCallback(n=>C(t=>[...t,n]),[C]),v=r.useCallback(n=>{C(t=>t.filter(e=>e!==n)),O(t=>{const e=new Map(t);return e.delete(n),e})},[O,C]),w=r.useCallback((n,t)=>O(e=>{const s=new Map(e);return s.set(n,t),s}),[O]),y=r.useMemo(()=>({setValue:c,registerOption:M,unregisterOption:v,setOptionProps:w,selectOption:x,deselectOption:b}),[c,M,v,w,x,b]),k=r.useMemo(()=>{if(!o||!i.size)return[];const n=Array.from(i.values()),t=new Map(n.map(e=>[e.value,e]));return d.current.length===0?[]:d.current.map(e=>t.get(e)).filter(Boolean)},[o,i]),R=r.useCallback(n=>g.current.get(n),[]),z=r.useCallback(n=>{const t=a[n];if(t)return R(t)},[R,a]);return r.useMemo(()=>({optionsContext:y,selectedOptionsProps:k,optionIds:a,optionsProps:i,deselectOptionValue:m,indexOfLastSelectedOptionRef:p,getOptionByIndex:z}),[y,m,a,i,k,p,z])};exports.OptionsProvider=P;exports.useCreateOptionsContext=V;exports.useOptionsContext=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),V=r.createContext(null),D=V.Provider,L=()=>{const o=r.useContext(V);if(!o)throw new Error("useOptionsContext must be used within an OptionsProvider");return o},z=o=>Array.isArray(o)?o:o!==void 0?[o]:[],F=(o,u,a)=>{const g=r.useRef(void 0),[c,M]=r.useState(()=>new Map),[i,k]=r.useState(()=>[]),[A,w]=r.useState(()=>new Map),[C,b]=r.useState(()=>new Map),[x,d]=r.useState(()=>[]),O=r.useRef(c);O.current=c;const l=r.useMemo(()=>z(o),[o]),p=r.useRef(l);p.current=l,r.useMemo(()=>{if(!l.length)g.current=void 0;else{const n=l[l.length-1],t=i.map(e=>c.get(e)).findIndex(e=>(e==null?void 0:e.value)===n);g.current=t}},[l,i,c]);const m=r.useCallback(n=>{const t=O.current.get(n),e=t==null?void 0:t.value,s=p.current;t&&e&&u(a?[...s.filter(f=>f!==e),e]:e)},[a,u]),y=r.useCallback(n=>{const t=O.current.get(n),e=t==null?void 0:t.value,s=p.current;if(t&&e)if(a){if(!s.includes(e))return;u(s.filter(f=>f!==e))}else return},[a,u]),B=r.useCallback(n=>{if(!a||n===void 0)return;const e=z(n)[0];if(!e)return;const s=p.current;s.includes(e)&&u(s.filter(f=>f!==e))},[a,u]),v=r.useCallback((n,t)=>{k(e=>[...e,n]),b(e=>{const s=new Map(e);return s.set(n,t),s}),t===null&&d(e=>[...e,{kind:"option",id:n}])},[]),S=r.useCallback(n=>{k(t=>t.filter(e=>e!==n)),M(t=>{const e=new Map(t);return e.delete(n),e}),b(t=>{const e=new Map(t);return e.delete(n),e}),d(t=>t.filter(e=>!(e.kind==="option"&&e.id===n)))},[]),h=r.useCallback((n,t)=>M(e=>{const s=new Map(e);return s.set(n,t),s}),[]),I=r.useCallback(n=>{d(t=>[...t,{kind:"group",id:n}])},[]),P=r.useCallback(n=>{w(t=>{const e=new Map(t);return e.delete(n),e}),d(t=>t.filter(e=>!(e.kind==="group"&&e.id===n)))},[]),G=r.useCallback((n,t)=>w(e=>{const s=new Map(e);return s.set(n,t),s}),[]),E=r.useMemo(()=>({setValue:u,registerOption:v,unregisterOption:S,setOptionProps:h,selectOption:m,deselectOption:y,registerGroup:I,unregisterGroup:P,setGroupProps:G}),[u,v,S,h,m,y,I,P,G]),T=r.useMemo(()=>{if(!o||!c.size)return[];const n=Array.from(c.values()),t=new Map(n.map(e=>[e.value,e]));return p.current.length===0?[]:p.current.map(e=>t.get(e)).filter(Boolean)},[o,c]),R=r.useCallback(n=>O.current.get(n),[]),j=r.useCallback(n=>{const t=i[n];if(t)return R(t)},[R,i]),q=r.useMemo(()=>{const n=new Map;return x.forEach(t=>{t.kind==="group"&&n.set(t.id,[])}),i.forEach(t=>{const e=C.get(t);if(e!=null){const s=n.get(e);s&&s.push(t)}}),n},[x,i,C]);return{optionsContext:E,selectedOptionsProps:T,optionIds:i,optionsProps:c,deselectOptionValue:B,indexOfLastSelectedOptionRef:g,getOptionByIndex:j,structureIds:x,groupsProps:A,optionGroupOf:C,optionIdsByGroup:q}};exports.OptionsProvider=D;exports.useCreateOptionsContext=F;exports.useOptionsContext=L;

package/lib/_Options/Option.context.d.ts

@@ -1,11 +1,22 @@
 import { SelectHTMLAttributes } from 'react';
-import { OptionProps } from './Option.types';
+import { OptionGroupProps, OptionProps } from './Option.types';
+export type StructureNode = {
+    kind: 'option';
+    id: string;
+} | {
+    kind: 'group';
+    id: string;
+};
 interface OptionsContextValue {
-    selectOption: (id: symbol) => void;
-    deselectOption: (id: symbol) => void;
-    registerOption: (id: symbol) => void;
-    unregisterOption: (id: symbol) => void;
-    setOptionProps: (id: symbol, optionProps: OptionProps) => void;
+    selectOption: (id: string) => void;
+    deselectOption: (id: string) => void;
+    /** Register an Option. Pass `null` for `groupId` when the Option is rendered at the root (not inside any OptionGroup). */
+    registerOption: (id: string, groupId: string | null) => void;
+    unregisterOption: (id: string) => void;
+    setOptionProps: (id: string, optionProps: OptionProps) => void;
+    registerGroup: (id: string) => void;
+    unregisterGroup: (id: string) => void;
+    setGroupProps: (id: string, groupProps: OptionGroupProps) => void;
 }
 export declare const OptionsProvider: import('react').Provider<OptionsContextValue | null>;
 export declare const useOptionsContext: () => OptionsContextValue;
@@ -13,17 +24,24 @@ type ValueType = SelectHTMLAttributes<HTMLSelectElement>['value'];
 export declare const useCreateOptionsContext: (value: ValueType, setValue: (value: ValueType) => void, multiple: boolean) => {
     optionsContext: {
         setValue: (value: ValueType) => void;
-        registerOption: (id: symbol) => void;
-        unregisterOption: (id: symbol) => void;
-        setOptionProps: (id: symbol, optionProps: OptionProps) => void;
-        selectOption: (id: symbol) => void;
-        deselectOption: (id: symbol) => void;
+        registerOption: (id: string, groupId: string | null) => void;
+        unregisterOption: (id: string) => void;
+        setOptionProps: (id: string, optionProps: OptionProps) => void;
+        selectOption: (id: string) => void;
+        deselectOption: (id: string) => void;
+        registerGroup: (id: string) => void;
+        unregisterGroup: (id: string) => void;
+        setGroupProps: (id: string, groupProps: OptionGroupProps) => void;
     };
     selectedOptionsProps: OptionProps[];
-    optionIds: symbol[];
-    optionsProps: Map<symbol, OptionProps>;
+    optionIds: string[];
+    optionsProps: Map<string, OptionProps>;
     deselectOptionValue: (value: ValueType) => void;
     indexOfLastSelectedOptionRef: import('react').MutableRefObject<number | undefined>;
     getOptionByIndex: (index: number) => OptionProps | undefined;
+    structureIds: StructureNode[];
+    groupsProps: Map<string, OptionGroupProps>;
+    optionGroupOf: Map<string, string | null>;
+    optionIdsByGroup: Map<string, string[]>;
 };
 export {};