@salt-ds/lab 1.0.0-alpha.0

package/dist-es/packages/lab/src/spinner/svgSpinners/SpinnerSmall.js

@@ -0,0 +1,67 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const baseName = "saltSvgSpinner";
+const SpinnerSmall = (props) => /* @__PURE__ */ jsxs("svg", {
+  className: `${baseName}-spinner`,
+  viewBox: "0 0 12 12",
+  ...props,
+  children: [
+    /* @__PURE__ */ jsxs("defs", {
+      children: [
+        /* @__PURE__ */ jsxs("linearGradient", {
+          id: `${props.id}-1`,
+          x1: "50%",
+          x2: "100%",
+          y1: "0%",
+          y2: "50%",
+          children: [
+            /* @__PURE__ */ jsx("stop", {
+              className: `${baseName}-gradientStop1`,
+              offset: "0%"
+            }),
+            /* @__PURE__ */ jsx("stop", {
+              className: `${baseName}-gradientStop2`,
+              offset: "100%",
+              stopOpacity: "0"
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs("linearGradient", {
+          id: `${props.id}-2`,
+          x1: "100%",
+          x2: "0%",
+          y1: "100%",
+          y2: "100%",
+          children: [
+            /* @__PURE__ */ jsx("stop", {
+              className: `${baseName}-gradientStop3`,
+              offset: "0%"
+            }),
+            /* @__PURE__ */ jsx("stop", {
+              className: `${baseName}-gradientStop4`,
+              offset: "100%"
+            })
+          ]
+        })
+      ]
+    }),
+    /* @__PURE__ */ jsxs("g", {
+      fill: "none",
+      fillRule: "evenodd",
+      strokeWidth: "1",
+      children: [
+        /* @__PURE__ */ jsx("path", {
+          d: "M2,6 L2,6 L0,6 C0,9.313 2.687,12 6,12 L6,10 C3.794,10 2,8.206 2,6",
+          fill: `url(#${props.id}-1)`
+        }),
+        /* @__PURE__ */ jsx("path", {
+          d: "M2,6 C2,3.794 3.794,2 6,2 C8.206,2 10,3.794 10,6 L12,6 C12,2.686 9.314,0 6,0 C2.687,0 0,2.686 0,6 L2,6 Z",
+          fill: `url(#${props.id}-2)`
+        })
+      ]
+    })
+  ]
+});
+
+export { SpinnerSmall };
+//# sourceMappingURL=SpinnerSmall.js.map

package/dist-es/packages/lab/src/spinner/svgSpinners/SpinnerSmall.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerSmall.js","sources":["../src/spinner/svgSpinners/SpinnerSmall.tsx"],"sourcesContent":["import { SVGAttributes } from \"react\";\n\nconst baseName = \"saltSvgSpinner\";\n\nexport const SpinnerSmall = (props: SVGAttributes<SVGSVGElement>) => (\n  <svg className={`${baseName}-spinner`} viewBox=\"0 0 12 12\" {...props}>\n    <defs>\n      <linearGradient id={`${props.id}-1`} x1=\"50%\" x2=\"100%\" y1=\"0%\" y2=\"50%\">\n        <stop className={`${baseName}-gradientStop1`} offset=\"0%\" />\n        <stop\n          className={`${baseName}-gradientStop2`}\n          offset=\"100%\"\n          stopOpacity=\"0\"\n        />\n      </linearGradient>\n      <linearGradient\n        id={`${props.id}-2`}\n        x1=\"100%\"\n        x2=\"0%\"\n        y1=\"100%\"\n        y2=\"100%\"\n      >\n        <stop className={`${baseName}-gradientStop3`} offset=\"0%\" />\n        <stop className={`${baseName}-gradientStop4`} offset=\"100%\" />\n      </linearGradient>\n    </defs>\n    <g fill=\"none\" fillRule=\"evenodd\" strokeWidth=\"1\">\n      <path\n        d=\"M2,6 L2,6 L0,6 C0,9.313 2.687,12 6,12 L6,10 C3.794,10 2,8.206 2,6\"\n        fill={`url(#${props.id}-1)`}\n      />\n      <path\n        d=\"M2,6 C2,3.794 3.794,2 6,2 C8.206,2 10,3.794 10,6 L12,6 C12,2.686 9.314,0 6,0 C2.687,0 0,2.686 0,6 L2,6 Z\"\n        fill={`url(#${props.id}-2)`}\n      />\n    </g>\n  </svg>\n);\n"],"names":[],"mappings":";;AAEA,MAAM,QAAW,GAAA,gBAAA,CAAA;AAEJ,MAAA,YAAA,GAAe,CAAC,KAAA,qBAC1B,IAAA,CAAA,KAAA,EAAA;AAAA,EAAI,WAAW,CAAG,EAAA,QAAA,CAAA,QAAA,CAAA;AAAA,EAAoB,OAAQ,EAAA,WAAA;AAAA,EAAa,GAAG,KAAA;AAAA,EAC7D,QAAA,EAAA;AAAA,oBAAC,IAAA,CAAA,MAAA,EAAA;AAAA,MACC,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,gBAAA,EAAA;AAAA,UAAe,EAAA,EAAI,GAAG,KAAM,CAAA,EAAA,CAAA,EAAA,CAAA;AAAA,UAAQ,EAAG,EAAA,KAAA;AAAA,UAAM,EAAG,EAAA,MAAA;AAAA,UAAO,EAAG,EAAA,IAAA;AAAA,UAAK,EAAG,EAAA,KAAA;AAAA,UACjE,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,cAAK,WAAW,CAAG,EAAA,QAAA,CAAA,cAAA,CAAA;AAAA,cAA0B,MAAO,EAAA,IAAA;AAAA,aAAK,CAAA;AAAA,4BACzD,GAAA,CAAA,MAAA,EAAA;AAAA,cACC,WAAW,CAAG,EAAA,QAAA,CAAA,cAAA,CAAA;AAAA,cACd,MAAO,EAAA,MAAA;AAAA,cACP,WAAY,EAAA,GAAA;AAAA,aACd,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,wBACC,IAAA,CAAA,gBAAA,EAAA;AAAA,UACC,EAAA,EAAI,GAAG,KAAM,CAAA,EAAA,CAAA,EAAA,CAAA;AAAA,UACb,EAAG,EAAA,MAAA;AAAA,UACH,EAAG,EAAA,IAAA;AAAA,UACH,EAAG,EAAA,MAAA;AAAA,UACH,EAAG,EAAA,MAAA;AAAA,UAEH,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,cAAK,WAAW,CAAG,EAAA,QAAA,CAAA,cAAA,CAAA;AAAA,cAA0B,MAAO,EAAA,IAAA;AAAA,aAAK,CAAA;AAAA,4BACzD,GAAA,CAAA,MAAA,EAAA;AAAA,cAAK,WAAW,CAAG,EAAA,QAAA,CAAA,cAAA,CAAA;AAAA,cAA0B,MAAO,EAAA,MAAA;AAAA,aAAO,CAAA;AAAA,WAAA;AAAA,SAC9D,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,oBACC,IAAA,CAAA,GAAA,EAAA;AAAA,MAAE,IAAK,EAAA,MAAA;AAAA,MAAO,QAAS,EAAA,SAAA;AAAA,MAAU,WAAY,EAAA,GAAA;AAAA,MAC5C,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,CAAE,EAAA,mEAAA;AAAA,UACF,IAAA,EAAM,QAAQ,KAAM,CAAA,EAAA,CAAA,GAAA,CAAA;AAAA,SACtB,CAAA;AAAA,wBACC,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,CAAE,EAAA,0GAAA;AAAA,UACF,IAAA,EAAM,QAAQ,KAAM,CAAA,EAAA,CAAA,GAAA,CAAA;AAAA,SACtB,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAAA;AAAA,CACF;;;;"}

package/dist-es/packages/lab/src/spinner/svgSpinners/index.js

@@ -0,0 +1,17 @@
+import { SpinnerSmall } from './SpinnerSmall.js';
+import { SpinnerMedium } from './SpinnerMedium.js';
+import { SpinnerLarge } from './SpinnerLarge.js';
+
+const getSvgSpinner = (size) => {
+  switch (size) {
+    case "small":
+      return SpinnerSmall;
+    case "large":
+      return SpinnerLarge;
+    default:
+      return SpinnerMedium;
+  }
+};
+
+export { getSvgSpinner };
+//# sourceMappingURL=index.js.map

package/dist-es/packages/lab/src/spinner/svgSpinners/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/spinner/svgSpinners/index.ts"],"sourcesContent":["import { SpinnerSmall } from \"./SpinnerSmall\";\nimport { SpinnerMedium } from \"./SpinnerMedium\";\nimport { SpinnerLarge } from \"./SpinnerLarge\";\n\nexport const getSvgSpinner = (size: string) => {\n  switch (size) {\n    case \"small\":\n      return SpinnerSmall;\n    case \"large\":\n      return SpinnerLarge;\n    default:\n      return SpinnerMedium;\n  }\n};\n"],"names":[],"mappings":";;;;AAIa,MAAA,aAAA,GAAgB,CAAC,IAAiB,KAAA;AAC7C,EAAQ,QAAA,IAAA;AAAA,IACD,KAAA,OAAA;AACH,MAAO,OAAA,YAAA,CAAA;AAAA,IACJ,KAAA,OAAA;AACH,MAAO,OAAA,YAAA,CAAA;AAAA,IAAA;AAEP,MAAO,OAAA,aAAA,CAAA;AAAA,GAAA;AAEb;;;;"}

package/dist-es/packages/lab/src/split-layout/SplitLayout.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = "/* Style applied to the separator */\n.saltSplitLayout-separator {\n  --saltFlexLayout-gap: calc(var(--salt-size-unit) * var(--saltFlexLayout-gap-multiplier) + var(--saltFlexLayout-separator));\n}\n\n.saltSplitLayout-separator > *:first-child::after,\n.saltSplitLayout-separator > *:last-child::before,\n.saltSplitLayout-separator-center::after {\n  background-color: var(--salt-separable-secondary-borderColor);\n  width: var(--saltFlexLayout-separator);\n  top: 0;\n  height: 100%;\n}\n\n.saltSplitLayout-separator-start > *:first-child::after {\n  content: \"\";\n  right: calc(var(--saltFlexLayout-separator) * -1);\n}\n\n.saltSplitLayout-separator-end > *:last-child::before {\n  content: \"\";\n  right: calc(var(--saltFlexLayout-separator) * -1);\n}\n.saltSplitLayout-separator-center {\n  position: relative;\n}\n.saltSplitLayout-separator-center::after {\n  position: absolute;\n  content: \"\";\n  right: calc(var(--saltFlexLayout-separator) * -1);\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=SplitLayout.css.js.map

package/dist-es/packages/lab/src/split-layout/SplitLayout.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitLayout.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist-es/packages/lab/src/split-layout/SplitLayout.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { FlexItem, FlexLayout } from '@salt-ds/core';
+import './SplitLayout.css.js';
+
+const SplitItem = forwardRef(function SplitItem2({ children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(FlexItem, {
+    ...rest,
+    ref,
+    children
+  });
+});
+const SplitLayout = forwardRef(
+  function SplitLayout2({ align, leftSplitItem, rightSplitItem, wrap = true, gap, ...rest }, ref) {
+    return /* @__PURE__ */ jsxs(FlexLayout, {
+      align,
+      direction: "row",
+      ref,
+      wrap,
+      gap,
+      justify: "space-between",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(SplitItem, {
+          children: leftSplitItem
+        }),
+        /* @__PURE__ */ jsx(SplitItem, {
+          children: rightSplitItem
+        })
+      ]
+    });
+  }
+);
+
+export { SplitLayout };
+//# sourceMappingURL=SplitLayout.js.map

package/dist-es/packages/lab/src/split-layout/SplitLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitLayout.js","sources":["../src/split-layout/SplitLayout.tsx"],"sourcesContent":["import { forwardRef, ReactNode, HTMLAttributes, ElementType } from \"react\";\nimport {\n  FlexLayout,\n  FlexLayoutProps,\n  FlexItem,\n  FlexItemProps,\n} from \"@salt-ds/core\";\nimport \"./SplitLayout.css\";\n\nexport interface SplitItemProps extends FlexItemProps<ElementType> {\n  /**\n   * A list of items. Required to have some children.\n   */\n  children: ReactNode;\n}\n\nexport interface SplitLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Defines the default behavior for how flex items are laid out along the cross axis on the current line.\n   */\n  align?: FlexLayoutProps<ElementType>[\"align\"];\n  /**\n   * Allow the items to wrap as needed, default is true.\n   */\n  wrap?: FlexLayoutProps<ElementType>[\"wrap\"];\n  /**\n   * Controls the space between items.\n   */\n  gap?: FlexLayoutProps<ElementType>[\"gap\"];\n  /**\n   * Parent component to be rendered\n   */\n  leftSplitItem: ReactNode;\n  /**\n   * Child component to be rendered\n   */\n  rightSplitItem: ReactNode;\n}\n\nconst SplitItem = forwardRef<HTMLDivElement, SplitItemProps>(function SplitItem(\n  { children, ...rest },\n  ref\n) {\n  return (\n    <FlexItem {...rest} ref={ref}>\n      {children}\n    </FlexItem>\n  );\n});\n\nexport const SplitLayout = forwardRef<HTMLDivElement, SplitLayoutProps>(\n  function SplitLayout(\n    { align, leftSplitItem, rightSplitItem, wrap = true, gap, ...rest },\n    ref\n  ) {\n    return (\n      <FlexLayout\n        align={align}\n        direction=\"row\"\n        ref={ref}\n        wrap={wrap}\n        gap={gap}\n        justify=\"space-between\"\n        {...rest}\n      >\n        <SplitItem>{leftSplitItem}</SplitItem>\n        <SplitItem>{rightSplitItem}</SplitItem>\n      </FlexLayout>\n    );\n  }\n);\n"],"names":["SplitItem","SplitLayout"],"mappings":";;;;;AAuCA,MAAM,SAAA,GAAY,WAA2C,SAASA,UAAAA,CACpE,EAAE,QAAa,EAAA,GAAA,IAAA,IACf,GACA,EAAA;AACA,EAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,IAAU,GAAG,IAAA;AAAA,IAAM,GAAA;AAAA,IACjB,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC,CAAA,CAAA;AAEM,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASC,YACP,CAAA,EAAE,KAAO,EAAA,aAAA,EAAe,cAAgB,EAAA,IAAA,GAAO,IAAM,EAAA,GAAA,EAAA,GAAQ,IAAK,EAAA,EAClE,GACA,EAAA;AACA,IAAA,uBACG,IAAA,CAAA,UAAA,EAAA;AAAA,MACC,KAAA;AAAA,MACA,SAAU,EAAA,KAAA;AAAA,MACV,GAAA;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,OAAQ,EAAA,eAAA;AAAA,MACP,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,SAAA,EAAA;AAAA,UAAW,QAAA,EAAA,aAAA;AAAA,SAAc,CAAA;AAAA,wBACzB,GAAA,CAAA,SAAA,EAAA;AAAA,UAAW,QAAA,EAAA,cAAA;AAAA,SAAe,CAAA;AAAA,OAAA;AAAA,KAC7B,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/stepper-input/StepperInput.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".salt-density-medium {\n  --stepperInput-adornment-container-top: -2px;\n  --stepperInput-button-height: 12px;\n  --stepperInput-button-margin: 2px;\n  --stepperInput-button-width: 24px;\n  --stepperInput-input-maxHeight: 28px;\n  --stepperInput-secondary-button-height: 26px;\n  --stepperInput-secondary-button-width: 26px;\n  --stepperInput-secondary-button-marginRight: 2px;\n}\n\n.salt-density-touch {\n  --stepperInput-adornment-container-top: 0;\n  --stepperInput-button-height: 16px;\n  --stepperInput-button-margin: 4px;\n  --stepperInput-button-width: 36px;\n  --stepperInput-secondary-button-height: 36px;\n  --stepperInput-secondary-button-width: 36px;\n  --stepperInput-secondary-button-marginRight: 4px;\n}\n\n.salt-density-low {\n  --stepperInput-adornment-container-top: 0;\n  --stepperInput-button-height: 12px;\n  --stepperInput-button-margin: 4px;\n  --stepperInput-button-width: 28px;\n  --stepperInput-secondary-button-height: 28px;\n  --stepperInput-secondary-button-width: 28px;\n  --stepperInput-secondary-button-marginRight: 4px;\n}\n\n.salt-density-high {\n  --stepperInput-adornment-container-top: -2px;\n  --stepperInput-button-height: 8px;\n  --stepperInput-button-margin: 2px;\n  --stepperInput-button-width: 16px;\n  --stepperInput-input-maxHeight: 20px;\n  --stepperInput-secondary-button-height: 18px;\n  --stepperInput-secondary-button-width: 18px;\n  --stepperInput-secondary-button-marginRight: 2px;\n}\n\n/* Styles applied to adornment container */\n.saltStepperInput-adornmentContainer {\n  display: flex;\n  position: relative;\n  top: var(--saltStepperInput-adornment-container-top, var(--stepperInput-adornment-container-top));\n}\n\n/* Styles applied to refresh button */\n.saltStepperInput-secondaryButton {\n  --saltButton-height: var(--stepperInput-secondary-button-height);\n  --saltButton-margin: var(--stepperInput-button-margin) var(--stepperInput-secondary-button-marginRight) var(--stepperInput-button-margin) var(--stepperInput-button-margin);\n  --saltButton-width: var(--stepperInput-secondary-button-width);\n}\n\n.saltStepperInput-hideSecondaryButton {\n  visibility: hidden;\n}\n\n/* Styles applied to stepper buttons container */\n.saltStepperInput-buttonContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n/* Styles applied to stepper buttons */\n.saltStepperInput-stepperButton {\n  --saltButton-height: var(--stepperInput-button-height);\n  --saltButton-margin: var(--stepperInput-button-margin);\n  --saltButton-width: var(--stepperInput-button-width);\n}\n\n/* Styles applied to increment button */\n.saltStepperInput-increment {\n}\n\n/* Styles applied to decrement button */\n.saltStepperInput-decrement {\n  margin-top: 0;\n}\n\n/* Styles applied to stepper button icon */\n.saltStepperInput-stepperButtonIcon {\n}\n\n/* Styles applied to input component */\n.saltStepperInput-input {\n  max-height: var(--saltStepperInput-maxHeight, unset);\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=StepperInput.css.js.map

package/dist-es/packages/lab/src/stepper-input/StepperInput.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperInput.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist-es/packages/lab/src/stepper-input/StepperInput.js

@@ -0,0 +1,110 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cx from 'classnames';
+import { forwardRef, useRef } from 'react';
+import { makePrefixer, Button } from '@salt-ds/core';
+import { RefreshIcon, TriangleUpIcon, TriangleDownIcon } from '@salt-ds/icons';
+import { Input } from '../input/Input.js';
+import '../input/StaticInputAdornment.js';
+import { useStepperInput } from './useStepperInput.js';
+import './StepperInput.css.js';
+import { useActivationIndicatorPosition } from './internal/useActivationIndicatorPosition.js';
+
+const withBaseName = makePrefixer("saltStepperInput");
+const StepperInput = forwardRef(
+  function StepperInput2(props, ref) {
+    const {
+      ButtonProps: ButtonPropsProp,
+      InputProps: InputPropsProp,
+      textAlign = "left",
+      className,
+      showRefreshButton = false
+    } = props;
+    const adornmentRef = useRef(null);
+    const inputRef = useRef(null);
+    const {
+      decrementButtonDown,
+      getButtonIcon,
+      getButtonProps,
+      getInputProps,
+      incrementButtonDown,
+      isAtMax,
+      isAtMin,
+      refreshCurrentValue,
+      stepperDirection,
+      valuesHaveDiverged
+    } = useStepperInput(props, inputRef);
+    useActivationIndicatorPosition(
+      adornmentRef,
+      valuesHaveDiverged() || showRefreshButton
+    );
+    const endAdornment = /* @__PURE__ */ jsxs("div", {
+      className: withBaseName("adornmentContainer"),
+      ref: adornmentRef,
+      children: [
+        /* @__PURE__ */ jsx(Button, {
+          "aria-label": "Refresh default value",
+          className: cx(withBaseName("secondaryButton"), {
+            [withBaseName("hideSecondaryButton")]: !(showRefreshButton || valuesHaveDiverged())
+          }),
+          onClick: refreshCurrentValue,
+          variant: "secondary",
+          children: /* @__PURE__ */ jsx(RefreshIcon, {
+            "aria-label": "refresh"
+          })
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          className: withBaseName("buttonContainer"),
+          children: [
+            /* @__PURE__ */ jsx(Button, {
+              className: cx(
+                withBaseName("stepperButton"),
+                withBaseName("increment"),
+                {
+                  active: incrementButtonDown
+                }
+              ),
+              disabled: isAtMax(),
+              ...getButtonProps(stepperDirection.INCREMENT, ButtonPropsProp),
+              children: /* @__PURE__ */ jsx(TriangleUpIcon, {
+                className: withBaseName("stepperButtonIcon"),
+                "aria-label": getButtonIcon(stepperDirection.INCREMENT)
+              })
+            }),
+            /* @__PURE__ */ jsx(Button, {
+              className: cx(
+                withBaseName("stepperButton"),
+                withBaseName("decrement"),
+                {
+                  active: decrementButtonDown
+                }
+              ),
+              disabled: isAtMin(),
+              ...getButtonProps(stepperDirection.DECREMENT, ButtonPropsProp),
+              children: /* @__PURE__ */ jsx(TriangleDownIcon, {
+                className: withBaseName("stepperButtonIcon"),
+                "aria-label": getButtonIcon(stepperDirection.DECREMENT)
+              })
+            })
+          ]
+        })
+      ]
+    });
+    return /* @__PURE__ */ jsx("div", {
+      className: cx(withBaseName(), className),
+      onBlur: props.onBlur,
+      onFocus: props.onFocus,
+      ref,
+      children: /* @__PURE__ */ jsx(Input, {
+        className: withBaseName("input"),
+        endAdornment,
+        highlightOnFocus: true,
+        ref: inputRef,
+        textAlign,
+        ...getInputProps(InputPropsProp)
+      })
+    });
+  }
+);
+
+export { StepperInput };
+//# sourceMappingURL=StepperInput.js.map

package/dist-es/packages/lab/src/stepper-input/StepperInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperInput.js","sources":["../src/stepper-input/StepperInput.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport React, { forwardRef, ReactNode, useRef } from \"react\";\nimport { makePrefixer, Button, ButtonProps } from \"@salt-ds/core\";\nimport { RefreshIcon, TriangleDownIcon, TriangleUpIcon } from \"@salt-ds/icons\";\nimport { Input, InputProps } from \"../input\";\nimport { useStepperInput } from \"./useStepperInput\";\n\nimport \"./StepperInput.css\";\n\nimport { useActivationIndicatorPosition } from \"./internal/useActivationIndicatorPosition\";\n\nconst withBaseName = makePrefixer(\"saltStepperInput\");\n\nexport interface StepperInputProps {\n  ButtonProps?: Partial<ButtonProps>;\n  InputProps?: Partial<InputProps>;\n  block?: number;\n  className?: string;\n  decimalPlaces?: number;\n  defaultValue?: number;\n  liveValue?: number;\n  max?: number;\n  min?: number;\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;\n  onChange?: (changedValue: number | string) => void;\n  showRefreshButton?: boolean;\n  step?: number;\n  textAlign?: \"center\" | \"left\" | \"right\";\n  value?: number | string;\n}\n\nexport const StepperInput = forwardRef<HTMLDivElement, StepperInputProps>(\n  function StepperInput(props, ref) {\n    const {\n      ButtonProps: ButtonPropsProp,\n      InputProps: InputPropsProp,\n      textAlign = \"left\",\n      className,\n      showRefreshButton = false,\n    } = props;\n\n    const adornmentRef = useRef<HTMLDivElement | null>(null);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const {\n      decrementButtonDown,\n      getButtonIcon,\n      getButtonProps,\n      getInputProps,\n      incrementButtonDown,\n      isAtMax,\n      isAtMin,\n      refreshCurrentValue,\n      stepperDirection,\n      valuesHaveDiverged,\n    } = useStepperInput(props, inputRef);\n\n    useActivationIndicatorPosition(\n      adornmentRef,\n      valuesHaveDiverged() || showRefreshButton\n    );\n\n    const endAdornment: ReactNode = (\n      <div className={withBaseName(\"adornmentContainer\")} ref={adornmentRef}>\n        <Button\n          aria-label=\"Refresh default value\"\n          className={classnames(withBaseName(\"secondaryButton\"), {\n            // Refresh button is always rendered and has its visibility toggled to\n            // avoid component width changing.\n            [withBaseName(\"hideSecondaryButton\")]: !(\n              showRefreshButton || valuesHaveDiverged()\n            ),\n          })}\n          onClick={refreshCurrentValue}\n          variant=\"secondary\"\n        >\n          <RefreshIcon aria-label=\"refresh\" />\n        </Button>\n        <div className={withBaseName(\"buttonContainer\")}>\n          <Button\n            className={classnames(\n              withBaseName(\"stepperButton\"),\n              withBaseName(\"increment\"),\n              {\n                active: incrementButtonDown,\n              }\n            )}\n            disabled={isAtMax()}\n            {...getButtonProps(stepperDirection.INCREMENT, ButtonPropsProp)}\n          >\n            <TriangleUpIcon\n              className={withBaseName(\"stepperButtonIcon\")}\n              aria-label={getButtonIcon(stepperDirection.INCREMENT)}\n            />\n          </Button>\n          <Button\n            className={classnames(\n              withBaseName(\"stepperButton\"),\n              withBaseName(\"decrement\"),\n              {\n                active: decrementButtonDown,\n              }\n            )}\n            disabled={isAtMin()}\n            {...getButtonProps(stepperDirection.DECREMENT, ButtonPropsProp)}\n          >\n            <TriangleDownIcon\n              className={withBaseName(\"stepperButtonIcon\")}\n              aria-label={getButtonIcon(stepperDirection.DECREMENT)}\n            />\n          </Button>\n        </div>\n      </div>\n    );\n\n    return (\n      <div\n        className={classnames(withBaseName(), className)}\n        onBlur={props.onBlur}\n        onFocus={props.onFocus}\n        ref={ref}\n      >\n        <Input\n          className={withBaseName(\"input\")}\n          endAdornment={endAdornment}\n          highlightOnFocus\n          ref={inputRef}\n          textAlign={textAlign}\n          {...getInputProps(InputPropsProp)}\n        />\n      </div>\n    );\n  }\n);\n"],"names":["StepperInput","classnames"],"mappings":"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"}

package/dist-es/packages/lab/src/stepper-input/internal/useActivationIndicatorPosition.js

@@ -0,0 +1,34 @@
+import { useDensity, useIsomorphicLayoutEffect } from '@salt-ds/core';
+import '../../form-field-context/FormFieldContext.js';
+import { useFormFieldProps } from '../../form-field-context/useFormFieldProps.js';
+
+const refreshButtonWidth = {
+  touch: 36,
+  low: 28,
+  medium: 24,
+  high: 12
+};
+function useActivationIndicatorPosition(adornmentRef, refreshButtonVisible) {
+  const formFieldProps = useFormFieldProps();
+  const { ref: formFieldRef } = formFieldProps;
+  const density = useDensity();
+  useIsomorphicLayoutEffect(() => {
+    let offset;
+    if (adornmentRef && adornmentRef.current !== null) {
+      const marginAdjustment = density === "high" || density === "medium" ? 2 : 4;
+      const secondaryButtonAdjustment = refreshButtonVisible ? 0 : refreshButtonWidth[density];
+      offset = adornmentRef.current.getBoundingClientRect().width - marginAdjustment - secondaryButtonAdjustment;
+    }
+    if (formFieldRef && formFieldRef.current && offset) {
+      const activationIndicator = formFieldRef.current.getElementsByClassName(
+        "saltFormActivationIndicator-icon"
+      );
+      if (activationIndicator.length > 0) {
+        activationIndicator[0].style.transform = `translateX(-${offset}px)`;
+      }
+    }
+  });
+}
+
+export { useActivationIndicatorPosition };
+//# sourceMappingURL=useActivationIndicatorPosition.js.map

package/dist-es/packages/lab/src/stepper-input/internal/useActivationIndicatorPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useActivationIndicatorPosition.js","sources":["../src/stepper-input/internal/useActivationIndicatorPosition.ts"],"sourcesContent":["import { useDensity, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useFormFieldProps } from \"../../form-field-context\";\nimport { MutableRefObject } from \"react\";\n\nconst refreshButtonWidth = {\n  touch: 36,\n  low: 28,\n  medium: 24,\n  high: 12,\n};\n\n// The activation indicator icon is absolutely positioned by FormField,\n// and must be offset to accommodate the end adornment added by Stepper Input.\n// Ideally, we should be able to provide an 'activationIndicator' class to FormField to\n// override its default positioning instead of directly repositioning it via its ref.\nexport function useActivationIndicatorPosition(\n  adornmentRef: MutableRefObject<HTMLDivElement | null>,\n  refreshButtonVisible: boolean\n) {\n  const formFieldProps = useFormFieldProps();\n  const { ref: formFieldRef } = formFieldProps;\n  const density = useDensity();\n\n  useIsomorphicLayoutEffect(() => {\n    let offset;\n    if (adornmentRef && adornmentRef.current !== null) {\n      const marginAdjustment =\n        density === \"high\" || density === \"medium\" ? 2 : 4;\n\n      const secondaryButtonAdjustment = refreshButtonVisible\n        ? 0\n        : refreshButtonWidth[density];\n\n      offset =\n        adornmentRef.current.getBoundingClientRect().width -\n        marginAdjustment -\n        secondaryButtonAdjustment;\n    }\n    if (formFieldRef && formFieldRef.current && offset) {\n      const activationIndicator = formFieldRef.current.getElementsByClassName(\n        \"saltFormActivationIndicator-icon\"\n      ) as HTMLCollectionOf<HTMLElement>;\n      if (activationIndicator.length > 0) {\n        activationIndicator[0].style.transform = `translateX(-${offset}px)`;\n      }\n    }\n  });\n}\n"],"names":[],"mappings":";;;;AAIA,MAAM,kBAAqB,GAAA;AAAA,EACzB,KAAO,EAAA,EAAA;AAAA,EACP,GAAK,EAAA,EAAA;AAAA,EACL,MAAQ,EAAA,EAAA;AAAA,EACR,IAAM,EAAA,EAAA;AACR,CAAA,CAAA;AAMgB,SAAA,8BAAA,CACd,cACA,oBACA,EAAA;AACA,EAAA,MAAM,iBAAiB,iBAAkB,EAAA,CAAA;AACzC,EAAM,MAAA,EAAE,GAAK,EAAA,YAAA,EAAiB,GAAA,cAAA,CAAA;AAC9B,EAAA,MAAM,UAAU,UAAW,EAAA,CAAA;AAE3B,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,MAAA,CAAA;AACJ,IAAI,IAAA,YAAA,IAAgB,YAAa,CAAA,OAAA,KAAY,IAAM,EAAA;AACjD,MAAA,MAAM,gBACJ,GAAA,OAAA,KAAY,MAAU,IAAA,OAAA,KAAY,WAAW,CAAI,GAAA,CAAA,CAAA;AAEnD,MAAM,MAAA,yBAAA,GAA4B,oBAC9B,GAAA,CAAA,GACA,kBAAmB,CAAA,OAAA,CAAA,CAAA;AAEvB,MAAA,MAAA,GACE,YAAa,CAAA,OAAA,CAAQ,qBAAsB,EAAA,CAAE,QAC7C,gBACA,GAAA,yBAAA,CAAA;AAAA,KACJ;AACA,IAAI,IAAA,YAAA,IAAgB,YAAa,CAAA,OAAA,IAAW,MAAQ,EAAA;AAClD,MAAM,MAAA,mBAAA,GAAsB,aAAa,OAAQ,CAAA,sBAAA;AAAA,QAC/C,kCAAA;AAAA,OACF,CAAA;AACA,MAAI,IAAA,mBAAA,CAAoB,SAAS,CAAG,EAAA;AAClC,QAAoB,mBAAA,CAAA,CAAA,CAAA,CAAG,KAAM,CAAA,SAAA,GAAY,CAAe,YAAA,EAAA,MAAA,CAAA,GAAA,CAAA,CAAA;AAAA,OAC1D;AAAA,KACF;AAAA,GACD,CAAA,CAAA;AACH;;;;"}

package/dist-es/packages/lab/src/stepper-input/internal/useDynamicAriaLabel.js

@@ -0,0 +1,72 @@
+import { useState, useEffect } from 'react';
+import { useAriaAnnouncer } from '@salt-ds/core';
+
+const useDynamicAriaLabel = (appendLabel, hasLiveValue, inputRef, value, valuesHaveDiverged) => {
+  const [hasAnnounced, setHasAnnounced] = useState(false);
+  const { announce } = useAriaAnnouncer();
+  useEffect(() => {
+    var _a;
+    function applyAriaMessage(ariaLabel) {
+      var _a2, _b, _c, _d;
+      if (!ariaLabel.includes(appendLabel)) {
+        (_a2 = inputRef.current) == null ? void 0 : _a2.setAttribute(
+          "aria-label",
+          `${ariaLabel}${appendLabel}`
+        );
+      }
+      const currentId = ((_b = inputRef.current) == null ? void 0 : _b.getAttribute("id")) || "";
+      const labelledBy = ((_c = inputRef.current) == null ? void 0 : _c.getAttribute("aria-labelledby")) || "";
+      if (!labelledBy.includes(currentId)) {
+        (_d = inputRef.current) == null ? void 0 : _d.setAttribute(
+          "aria-labelledby",
+          `${labelledBy} ${currentId}`
+        );
+      }
+    }
+    function removeAriaMessage(ariaLabel) {
+      var _a2, _b, _c, _d, _e;
+      const replacementAria = ariaLabel == null ? void 0 : ariaLabel.replace(appendLabel, "");
+      if (replacementAria !== void 0) {
+        (_a2 = inputRef.current) == null ? void 0 : _a2.setAttribute("aria-label", replacementAria);
+      }
+      const replacementLabelledBy = (_d = (_b = inputRef.current) == null ? void 0 : _b.getAttribute("aria-labelledby")) == null ? void 0 : _d.replace(` ${(_c = inputRef.current) == null ? void 0 : _c.getAttribute("id")}`, "");
+      if (replacementLabelledBy !== void 0) {
+        (_e = inputRef.current) == null ? void 0 : _e.setAttribute(
+          "aria-labelledby",
+          replacementLabelledBy
+        );
+      }
+    }
+    if (hasLiveValue) {
+      const ariaLabel = ((_a = inputRef.current) == null ? void 0 : _a.getAttribute("aria-label")) || "";
+      if (valuesHaveDiverged()) {
+        applyAriaMessage(ariaLabel);
+      } else {
+        removeAriaMessage(ariaLabel);
+      }
+    }
+  }, [appendLabel, inputRef, hasLiveValue, valuesHaveDiverged, value]);
+  useEffect(() => {
+    var _a;
+    if (hasLiveValue && valuesHaveDiverged()) {
+      if (inputRef.current !== document.activeElement && !hasAnnounced) {
+        announce("");
+        announce(`${(_a = inputRef.current) == null ? void 0 : _a.getAttribute("aria-label")}`);
+        setHasAnnounced(true);
+      }
+    }
+  }, [
+    announce,
+    appendLabel,
+    hasAnnounced,
+    inputRef,
+    hasLiveValue,
+    setHasAnnounced,
+    valuesHaveDiverged,
+    value
+  ]);
+  return { setHasAnnounced };
+};
+
+export { useDynamicAriaLabel };
+//# sourceMappingURL=useDynamicAriaLabel.js.map

package/dist-es/packages/lab/src/stepper-input/internal/useDynamicAriaLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDynamicAriaLabel.js","sources":["../src/stepper-input/internal/useDynamicAriaLabel.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useAriaAnnouncer } from \"@salt-ds/core\";\n\n// Dynamically append a string to aria-label if the component\n// is controlled and the display value can be refreshed\nexport const useDynamicAriaLabel = (\n  appendLabel: string,\n  hasLiveValue: boolean,\n  inputRef: React.MutableRefObject<HTMLInputElement | null>,\n  value: number | string | undefined,\n  valuesHaveDiverged: () => boolean\n) => {\n  const [hasAnnounced, setHasAnnounced] = useState(false);\n  const { announce } = useAriaAnnouncer();\n\n  useEffect(() => {\n    function applyAriaMessage(ariaLabel: string) {\n      // Don't append the message again if it's already part of the string\n      if (!ariaLabel.includes(appendLabel)) {\n        inputRef.current?.setAttribute(\n          \"aria-label\",\n          `${ariaLabel}${appendLabel}`\n        );\n      }\n\n      const currentId = inputRef.current?.getAttribute(\"id\") || \"\";\n      const labelledBy =\n        inputRef.current?.getAttribute(\"aria-labelledby\") || \"\";\n\n      if (!labelledBy.includes(currentId)) {\n        inputRef.current?.setAttribute(\n          \"aria-labelledby\",\n          `${labelledBy} ${currentId}`\n        );\n      }\n    }\n\n    function removeAriaMessage(ariaLabel: string) {\n      const replacementAria = ariaLabel?.replace(appendLabel, \"\");\n      if (replacementAria !== undefined) {\n        inputRef.current?.setAttribute(\"aria-label\", replacementAria);\n      }\n\n      const replacementLabelledBy = inputRef.current\n        ?.getAttribute(\"aria-labelledby\")\n        ?.replace(` ${inputRef.current?.getAttribute(\"id\")}`, \"\");\n\n      if (replacementLabelledBy !== undefined) {\n        inputRef.current?.setAttribute(\n          \"aria-labelledby\",\n          replacementLabelledBy\n        );\n      }\n    }\n\n    if (hasLiveValue) {\n      const ariaLabel = inputRef.current?.getAttribute(\"aria-label\") || \"\";\n      if (valuesHaveDiverged()) {\n        applyAriaMessage(ariaLabel);\n      } else {\n        removeAriaMessage(ariaLabel);\n      }\n    }\n  }, [appendLabel, inputRef, hasLiveValue, valuesHaveDiverged, value]);\n\n  useEffect(() => {\n    if (hasLiveValue && valuesHaveDiverged()) {\n      // Screen readers will automatically announce updates when the dynamic `aria-label`\n      // changes and the component has focus. When the component *does not* have\n      // focus we should announce only once for the first value update\n      if (inputRef.current !== document.activeElement && !hasAnnounced) {\n        // Empty announcement required until a fix is in place for announcer\n        announce(\"\");\n        announce(`${inputRef.current?.getAttribute(\"aria-label\")}`);\n\n        // We only want to announce on the first value change, but this flag\n        // is reset when the input receives focus\n        setHasAnnounced(true);\n      }\n    }\n  }, [\n    announce,\n    appendLabel,\n    hasAnnounced,\n    inputRef,\n    hasLiveValue,\n    setHasAnnounced,\n    valuesHaveDiverged,\n    value,\n  ]);\n\n  return { setHasAnnounced };\n};\n"],"names":["_a"],"mappings":"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"}

package/dist-es/packages/lab/src/stepper-input/internal/useInterval.js

@@ -0,0 +1,23 @@
+import { useRef, useEffect } from 'react';
+
+function useInterval(callback, delay) {
+  const savedCallback = useRef(null);
+  useEffect(() => {
+    savedCallback.current = callback;
+  });
+  useEffect(() => {
+    function tick() {
+      if (savedCallback.current !== null) {
+        savedCallback.current();
+      }
+    }
+    if (delay !== null) {
+      const id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+    return;
+  }, [delay]);
+}
+
+export { useInterval };
+//# sourceMappingURL=useInterval.js.map

package/dist-es/packages/lab/src/stepper-input/internal/useInterval.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInterval.js","sources":["../src/stepper-input/internal/useInterval.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\ntype IntervalFunction = () => unknown | void;\n\n// https://gist.github.com/iamBevan/171cce94431b8c95206086252ce0c6c7\nfunction useInterval(callback: IntervalFunction, delay: number | null) {\n  const savedCallback = useRef<IntervalFunction | null>(null);\n\n  useEffect(() => {\n    savedCallback.current = callback;\n  });\n\n  useEffect(() => {\n    function tick() {\n      if (savedCallback.current !== null) {\n        savedCallback.current();\n      }\n    }\n\n    if (delay !== null) {\n      const id = setInterval(tick, delay);\n      return () => clearInterval(id);\n    }\n    return;\n  }, [delay]);\n}\n\nexport { useInterval };\n"],"names":[],"mappings":";;AAKA,SAAS,WAAA,CAAY,UAA4B,KAAsB,EAAA;AACrE,EAAM,MAAA,aAAA,GAAgB,OAAgC,IAAI,CAAA,CAAA;AAE1D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,aAAA,CAAc,OAAU,GAAA,QAAA,CAAA;AAAA,GACzB,CAAA,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,SAAS,IAAO,GAAA;AACd,MAAI,IAAA,aAAA,CAAc,YAAY,IAAM,EAAA;AAClC,QAAA,aAAA,CAAc,OAAQ,EAAA,CAAA;AAAA,OACxB;AAAA,KACF;AAEA,IAAA,IAAI,UAAU,IAAM,EAAA;AAClB,MAAM,MAAA,EAAA,GAAK,WAAY,CAAA,IAAA,EAAM,KAAK,CAAA,CAAA;AAClC,MAAO,OAAA,MAAM,cAAc,EAAE,CAAA,CAAA;AAAA,KAC/B;AACA,IAAA,OAAA;AAAA,GACF,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AACZ;;;;"}

package/dist-es/packages/lab/src/stepper-input/internal/useSpinner.js

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+import { useInterval } from './useInterval.js';
+
+const INTERVAL_DELAY = 300;
+function useSpinner(activationFn, isAtLimit) {
+  const [buttonDown, setButtonDown] = useState(false);
+  const cancelInterval = () => setButtonDown(false);
+  useEffect(() => {
+    if (isAtLimit)
+      setButtonDown(false);
+  }, [isAtLimit]);
+  useEffect(() => {
+    window.addEventListener("keyup", cancelInterval);
+    window.addEventListener("mouseup", cancelInterval);
+    return () => {
+      window.removeEventListener("keyup", cancelInterval);
+      window.removeEventListener("mouseup", cancelInterval);
+    };
+  }, []);
+  const activate = () => {
+    activationFn();
+    setButtonDown(true);
+  };
+  useInterval(activationFn, buttonDown ? INTERVAL_DELAY : null);
+  return { activate, buttonDown };
+}
+
+export { useSpinner };
+//# sourceMappingURL=useSpinner.js.map

package/dist-es/packages/lab/src/stepper-input/internal/useSpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSpinner.js","sources":["../src/stepper-input/internal/useSpinner.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport { useInterval } from \"./useInterval\";\n\nconst INTERVAL_DELAY = 300;\n\nfunction useSpinner(activationFn: () => void, isAtLimit: boolean) {\n  const [buttonDown, setButtonDown] = useState(false);\n\n  const cancelInterval = () => setButtonDown(false);\n\n  useEffect(() => {\n    if (isAtLimit) setButtonDown(false);\n  }, [isAtLimit]);\n\n  useEffect(() => {\n    window.addEventListener(\"keyup\", cancelInterval);\n    window.addEventListener(\"mouseup\", cancelInterval);\n    return () => {\n      window.removeEventListener(\"keyup\", cancelInterval);\n      window.removeEventListener(\"mouseup\", cancelInterval);\n    };\n  }, []);\n\n  const activate = () => {\n    activationFn();\n    setButtonDown(true);\n  };\n\n  useInterval(activationFn, buttonDown ? INTERVAL_DELAY : null);\n\n  return { activate, buttonDown };\n}\n\nexport { useSpinner };\n"],"names":[],"mappings":";;;AAIA,MAAM,cAAiB,GAAA,GAAA,CAAA;AAEvB,SAAS,UAAA,CAAW,cAA0B,SAAoB,EAAA;AAChE,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAElD,EAAM,MAAA,cAAA,GAAiB,MAAM,aAAA,CAAc,KAAK,CAAA,CAAA;AAEhD,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,SAAA;AAAW,MAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AAAA,GACpC,EAAG,CAAC,SAAS,CAAC,CAAA,CAAA;AAEd,EAAA,SAAA,CAAU,MAAM;AACd,IAAO,MAAA,CAAA,gBAAA,CAAiB,SAAS,cAAc,CAAA,CAAA;AAC/C,IAAO,MAAA,CAAA,gBAAA,CAAiB,WAAW,cAAc,CAAA,CAAA;AACjD,IAAA,OAAO,MAAM;AACX,MAAO,MAAA,CAAA,mBAAA,CAAoB,SAAS,cAAc,CAAA,CAAA;AAClD,MAAO,MAAA,CAAA,mBAAA,CAAoB,WAAW,cAAc,CAAA,CAAA;AAAA,KACtD,CAAA;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,WAAW,MAAM;AACrB,IAAa,YAAA,EAAA,CAAA;AACb,IAAA,aAAA,CAAc,IAAI,CAAA,CAAA;AAAA,GACpB,CAAA;AAEA,EAAY,WAAA,CAAA,YAAA,EAAc,UAAa,GAAA,cAAA,GAAiB,IAAI,CAAA,CAAA;AAE5D,EAAO,OAAA,EAAE,UAAU,UAAW,EAAA,CAAA;AAChC;;;;"}