@salt-ds/core 1.67.1 → 1.69.0

package/dist-cjs/overlay/OverlayPanel.js

@@ -37,7 +37,8 @@ const OverlayPanel = React.forwardRef(
       context,
       getFloatingProps,
       floating,
-      arrowProps
+      arrowProps,
+      hideArrow
     } = OverlayContext.useOverlayContext();
     const handleRef = useForkRef.useForkRef(floating, ref);
     const { top, left, width, height, position } = floatingStyles;
@@ -65,10 +66,11 @@ const OverlayPanel = React.forwardRef(
             children,
             " "
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          !hideArrow && /* @__PURE__ */ jsxRuntime.jsx(
             react.FloatingArrow,
             {
               ...arrowProps,
+              className: withBaseName("arrow"),
               strokeWidth: 1,
               fill: "var(--overlay-background)",
               stroke: "var(--overlay-borderColor)",

package/dist-cjs/overlay/OverlayPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayPanel.js","sources":["../src/overlay/OverlayPanel.tsx"],"sourcesContent":["import { FloatingArrow } from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { makePrefixer, useFloatingComponent, useForkRef } from \"../utils\";\nimport { useOverlayContext } from \"./OverlayContext\";\nimport overlayPanelCss from \"./OverlayPanel.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanel\");\nexport interface OverlayPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of Overlay Panel\n   */\n  children?: ReactNode;\n}\n\nexport const OverlayPanel = forwardRef<HTMLDivElement, OverlayPanelProps>(\n  function OverlayPanel(props, ref) {\n    const {\n      className,\n      \"aria-labelledby\": ariaLabelledby,\n      children,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-overlay-panel\",\n      css: overlayPanelCss,\n      window: targetWindow,\n    });\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const {\n      openState,\n      floatingStyles,\n      context,\n      getFloatingProps,\n      floating,\n      arrowProps,\n    } = useOverlayContext();\n\n    const handleRef = useForkRef<HTMLDivElement>(floating, ref);\n\n    const { top, left, width, height, position } = floatingStyles;\n\n    return (\n      <FloatingComponent\n        open={openState}\n        className={clsx(withBaseName(), className)}\n        aria-modal=\"true\"\n        {...getFloatingProps()}\n        ref={handleRef}\n        width={width}\n        height={height}\n        top={top}\n        left={left}\n        position={position}\n        focusManagerProps={{\n          context: context,\n          outsideElementsInert: true,\n        }}\n        aria-labelledby={ariaLabelledby}\n      >\n        <div {...rest}> {children} </div>\n        <FloatingArrow\n          {...arrowProps}\n          strokeWidth={1}\n          fill=\"var(--overlay-background)\"\n          stroke=\"var(--overlay-borderColor)\"\n          height={6}\n          width={12}\n        />\n      </FloatingComponent>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","OverlayPanel","useWindow","useComponentCssInjection","overlayPanelCss","useFloatingComponent","useOverlayContext","useForkRef","jsxs","clsx","jsx","FloatingArrow"],"mappings":";;;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA;AAQ7C,MAAM,YAAA,GAAeC,gBAAA;AAAA,EAC1B,SAASC,aAAAA,CAAa,KAAA,EAAO,GAAA,EAAK;AAChC,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,iBAAA,EAAmB,cAAA;AAAA,MACnB,QAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,oBAAA;AAAA,MACR,GAAA,EAAKC,cAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAA,EAAkB,GAAIC,kCAAA,EAAqB;AAE9D,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,cAAA;AAAA,MACA,OAAA;AAAA,MACA,gBAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA,QACEC,gCAAA,EAAkB;AAEtB,IAAA,MAAM,SAAA,GAAYC,qBAAA,CAA2B,QAAA,EAAU,GAAG,CAAA;AAE1D,IAAA,MAAM,EAAE,GAAA,EAAK,IAAA,EAAM,KAAA,EAAO,MAAA,EAAQ,UAAS,GAAI,cAAA;AAE/C,IAAA,uBACEC,eAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,SAAA;AAAA,QACN,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,YAAA,EAAW,MAAA;AAAA,QACV,GAAG,gBAAA,EAAiB;AAAA,QACrB,GAAA,EAAK,SAAA;AAAA,QACL,KAAA;AAAA,QACA,MAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAA;AAAA,QACA,QAAA;AAAA,QACA,iBAAA,EAAmB;AAAA,UACjB,OAAA;AAAA,UACA,oBAAA,EAAsB;AAAA,SACxB;AAAA,QACA,iBAAA,EAAiB,cAAA;AAAA,QAEjB,QAAA,EAAA;AAAA,0BAAAD,eAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,QAAA,EAAA;AAAA,YAAA,GAAA;AAAA,YAAE,QAAA;AAAA,YAAS;AAAA,WAAA,EAAC,CAAA;AAAA,0BAC3BE,cAAA;AAAA,YAACC,mBAAA;AAAA,YAAA;AAAA,cACE,GAAG,UAAA;AAAA,cACJ,WAAA,EAAa,CAAA;AAAA,cACb,IAAA,EAAK,2BAAA;AAAA,cACL,MAAA,EAAO,4BAAA;AAAA,cACP,MAAA,EAAQ,CAAA;AAAA,cACR,KAAA,EAAO;AAAA;AAAA;AACT;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"OverlayPanel.js","sources":["../src/overlay/OverlayPanel.tsx"],"sourcesContent":["import { FloatingArrow } from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { makePrefixer, useFloatingComponent, useForkRef } from \"../utils\";\nimport { useOverlayContext } from \"./OverlayContext\";\nimport overlayPanelCss from \"./OverlayPanel.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanel\");\nexport interface OverlayPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of Overlay Panel\n   */\n  children?: ReactNode;\n}\n\nexport const OverlayPanel = forwardRef<HTMLDivElement, OverlayPanelProps>(\n  function OverlayPanel(props, ref) {\n    const {\n      className,\n      \"aria-labelledby\": ariaLabelledby,\n      children,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-overlay-panel\",\n      css: overlayPanelCss,\n      window: targetWindow,\n    });\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const {\n      openState,\n      floatingStyles,\n      context,\n      getFloatingProps,\n      floating,\n      arrowProps,\n      hideArrow,\n    } = useOverlayContext();\n\n    const handleRef = useForkRef<HTMLDivElement>(floating, ref);\n\n    const { top, left, width, height, position } = floatingStyles;\n\n    return (\n      <FloatingComponent\n        open={openState}\n        className={clsx(withBaseName(), className)}\n        aria-modal=\"true\"\n        {...getFloatingProps()}\n        ref={handleRef}\n        width={width}\n        height={height}\n        top={top}\n        left={left}\n        position={position}\n        focusManagerProps={{\n          context: context,\n          outsideElementsInert: true,\n        }}\n        aria-labelledby={ariaLabelledby}\n      >\n        <div {...rest}> {children} </div>\n        {!hideArrow && (\n          <FloatingArrow\n            {...arrowProps}\n            className={withBaseName(\"arrow\")}\n            strokeWidth={1}\n            fill=\"var(--overlay-background)\"\n            stroke=\"var(--overlay-borderColor)\"\n            height={6}\n            width={12}\n          />\n        )}\n      </FloatingComponent>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","OverlayPanel","useWindow","useComponentCssInjection","overlayPanelCss","useFloatingComponent","useOverlayContext","useForkRef","jsxs","clsx","jsx","FloatingArrow"],"mappings":";;;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA;AAQ7C,MAAM,YAAA,GAAeC,gBAAA;AAAA,EAC1B,SAASC,aAAAA,CAAa,KAAA,EAAO,GAAA,EAAK;AAChC,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,iBAAA,EAAmB,cAAA;AAAA,MACnB,QAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,oBAAA;AAAA,MACR,GAAA,EAAKC,cAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAA,EAAkB,GAAIC,kCAAA,EAAqB;AAE9D,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,cAAA;AAAA,MACA,OAAA;AAAA,MACA,gBAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,QACEC,gCAAA,EAAkB;AAEtB,IAAA,MAAM,SAAA,GAAYC,qBAAA,CAA2B,QAAA,EAAU,GAAG,CAAA;AAE1D,IAAA,MAAM,EAAE,GAAA,EAAK,IAAA,EAAM,KAAA,EAAO,MAAA,EAAQ,UAAS,GAAI,cAAA;AAE/C,IAAA,uBACEC,eAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,SAAA;AAAA,QACN,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,YAAA,EAAW,MAAA;AAAA,QACV,GAAG,gBAAA,EAAiB;AAAA,QACrB,GAAA,EAAK,SAAA;AAAA,QACL,KAAA;AAAA,QACA,MAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAA;AAAA,QACA,QAAA;AAAA,QACA,iBAAA,EAAmB;AAAA,UACjB,OAAA;AAAA,UACA,oBAAA,EAAsB;AAAA,SACxB;AAAA,QACA,iBAAA,EAAiB,cAAA;AAAA,QAEjB,QAAA,EAAA;AAAA,0BAAAD,eAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,QAAA,EAAA;AAAA,YAAA,GAAA;AAAA,YAAE,QAAA;AAAA,YAAS;AAAA,WAAA,EAAC,CAAA;AAAA,UAC1B,CAAC,SAAA,oBACAE,cAAA;AAAA,YAACC,mBAAA;AAAA,YAAA;AAAA,cACE,GAAG,UAAA;AAAA,cACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAC/B,WAAA,EAAa,CAAA;AAAA,cACb,IAAA,EAAK,2BAAA;AAAA,cACL,MAAA,EAAO,4BAAA;AAAA,cACP,MAAA,EAAQ,CAAA;AAAA,cACR,KAAA,EAAO;AAAA;AAAA;AACT;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/pill-input/PillInput.js

@@ -22,6 +22,9 @@ var PillInput$1 = require('./PillInput.css.js');
 var useTruncatePills = require('./useTruncatePills.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltPillInput");
+function isEmptyReadOnlyValue(value) {
+  return value == null || value === "" || Array.isArray(value) && value.length === 0;
+}
 const PillInput = React.forwardRef(function PillInput2({
   "aria-activedescendant": ariaActiveDescendant,
   "aria-expanded": ariaExpanded,
@@ -34,6 +37,7 @@ const PillInput = React.forwardRef(function PillInput2({
   id: idProp,
   inputProps = {},
   inputRef: inputRefProp,
+  name,
   placeholder,
   pills = [],
   onPillRemove,
@@ -77,8 +81,10 @@ const PillInput = React.forwardRef(function PillInput2({
   const validationStatus = formFieldValidationStatus ?? validationStatusProp;
   const [focused, setFocused] = React.useState(false);
   const [focusedPillIndex, setFocusedPillIndex] = React.useState(-1);
-  const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;
-  const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;
+  const isValueEmptyReadOnly = isReadOnly && isEmptyReadOnlyValue(valueProp);
+  const isDefaultValueEmptyReadOnly = isReadOnly && isEmptyReadOnlyValue(defaultValueProp);
+  const controlledValue = valueProp === void 0 ? void 0 : isValueEmptyReadOnly ? emptyReadOnlyMarker : valueProp;
+  const defaultValue = isDefaultValueEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;
   const {
     "aria-describedby": inputDescribedBy,
     "aria-labelledby": inputLabelledBy,
@@ -91,7 +97,7 @@ const PillInput = React.forwardRef(function PillInput2({
   } = inputProps;
   const isRequired = formFieldRequired ? ["required", "asterisk"].includes(formFieldRequired) : inputPropsRequired;
   const [value, setValue] = useControlled.useControlled({
-    controlled: valueProp,
+    controlled: controlledValue,
     default: defaultValue,
     name: "Input",
     state: "value"
@@ -249,6 +255,7 @@ const PillInput = React.forwardRef(function PillInput2({
               className: clsx.clsx(withBaseName("input"), inputProps == null ? void 0 : inputProps.className),
               disabled: isDisabled,
               id,
+              name,
               readOnly: isReadOnly,
               ref: handleInputRef,
               role,

package/dist-cjs/pill-input/PillInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PillInput.js","sources":["../src/pill-input/PillInput.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type ForwardedRef,\n  forwardRef,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  type SyntheticEvent,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  type FormFieldValidationStatus,\n  useFormFieldProps,\n} from \"../form-field-context\";\nimport { Pill } from \"../pill\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled, useForkRef, useId } from \"../utils\";\nimport pillInputCss from \"./PillInput.css\";\nimport { useTruncatePills } from \"./useTruncatePills\";\n\nconst withBaseName = makePrefixer(\"saltPillInput\");\n\nexport interface PillInputProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n    Pick<\n      ComponentPropsWithoutRef<\"input\">,\n      \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n    > {\n  /**\n   * The marker to use in an empty read only Input.\n   * Use `''` to disable this feature. Defaults to '—'.\n   */\n  emptyReadOnlyMarker?: string;\n  /**\n   * End adornment component\n   */\n  endAdornment?: ReactNode;\n  /**\n   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n   */\n  inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\n  /**\n   * Optional ref for the input component\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * The tokens to display in the input.\n   */\n  pills?: string[];\n  onPillRemove?: (event: SyntheticEvent, index: number) => void;\n  /**\n   * Start adornment component\n   */\n  startAdornment?: ReactNode;\n  /**\n   * Alignment of text within container. Defaults to \"left\"\n   */\n  textAlign?: \"left\" | \"center\" | \"right\";\n  /**\n   * Validation status.\n   */\n  validationStatus?: FormFieldValidationStatus;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  hidePillClose?: boolean;\n  truncate?: boolean;\n  /** Styling variant with full border. Defaults to false\n   */\n  bordered?: boolean;\n}\n\nexport const PillInput = forwardRef(function PillInput(\n  {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n    className: classNameProp,\n    disabled,\n    emptyReadOnlyMarker = \"—\",\n    endAdornment,\n    hidePillClose,\n    id: idProp,\n    inputProps = {},\n    inputRef: inputRefProp,\n    placeholder,\n    pills = [],\n    onPillRemove,\n    readOnly: readOnlyProp,\n    role,\n    startAdornment,\n    style,\n    textAlign = \"left\",\n    value: valueProp,\n    defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n    validationStatus: validationStatusProp,\n    variant = \"primary\",\n    truncate,\n    bordered = false,\n    ...other\n  }: PillInputProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  const { OverflowIcon, CloseIcon } = useIcon();\n  useComponentCssInjection({\n    testId: \"salt-pill-input\",\n    css: pillInputCss,\n    window: targetWindow,\n  });\n\n  const {\n    a11yProps: {\n      \"aria-describedby\": formFieldDescribedBy,\n      \"aria-labelledby\": formFieldLabelledBy,\n    } = {},\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n    necessity: formFieldRequired,\n    validationStatus: formFieldValidationStatus,\n  } = useFormFieldProps();\n\n  const restA11yProps = {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n  };\n\n  const isDisabled = disabled || formFieldDisabled;\n  const isReadOnly = readOnlyProp || formFieldReadOnly;\n  const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n  const [focused, setFocused] = useState(false);\n  const [focusedPillIndex, setFocusedPillIndex] = useState(-1);\n\n  const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n  const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n  const {\n    \"aria-describedby\": inputDescribedBy,\n    \"aria-labelledby\": inputLabelledBy,\n    onBlur,\n    onFocus,\n    onChange,\n    required: inputPropsRequired,\n    onKeyDown: inputOnKeyDown,\n    ...restInputProps\n  } = inputProps;\n\n  const isRequired = formFieldRequired\n    ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n    : inputPropsRequired;\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Input\",\n    state: \"value\",\n  });\n\n  const { visiblePills, pillListRef } = useTruncatePills({\n    pills,\n    enable: truncate && pills.length > 0,\n  });\n\n  const id = useId(idProp);\n  const pillListId = `${id}-optionsList`;\n\n  const pillElementsRef = useRef<HTMLElement[]>([]);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleInputRef = useForkRef(inputRef, inputRefProp);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n    setValue(value);\n    onChange?.(event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    const target = event.currentTarget;\n    if (target.selectionStart === 0 && target.selectionEnd === 0) {\n      const lastPillIndex = pills.length - 1;\n      const lastPill = pills[lastPillIndex];\n      if (event.key === \"Backspace\" && lastPill) {\n        event.preventDefault();\n        onPillRemove?.(event, lastPillIndex);\n      } else if (event.key === \"ArrowLeft\") {\n        event.preventDefault();\n        // Move focus to last pill\n        pillElementsRef.current[lastPillIndex]?.focus();\n      }\n    }\n\n    inputOnKeyDown?.(event);\n  };\n\n  const handlePillKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    const target = event.currentTarget;\n    const index = Number(target.dataset.index);\n    if (event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      // Move focus to previous pill\n      pillElementsRef.current[index - 1]?.focus();\n    } else if (event.key === \"ArrowRight\") {\n      event.preventDefault();\n      // Move focus to next pill or input\n      if (index === pills.length - 1) {\n        inputRef?.current?.focus();\n      } else {\n        pillElementsRef.current[index + 1]?.focus();\n      }\n    } else if (event.key === \"Delete\" || event.key === \"Backspace\") {\n      event.preventDefault();\n      onPillRemove?.(event, index);\n\n      if (pills.length === 1) {\n        inputRef.current?.focus();\n      } else if (index === pills.length - 1) {\n        pillElementsRef.current[pills.length - 2]?.focus();\n      } else {\n        pillElementsRef.current[index]?.focus();\n      }\n    }\n  };\n\n  const handlePillClick = (event: MouseEvent<HTMLButtonElement>) => {\n    if (!hidePillClose) {\n      const target = event.currentTarget;\n      const index = Number(target.dataset.index);\n      onPillRemove?.(event, index);\n    }\n    inputRef.current?.focus();\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    onBlur?.(event);\n    setFocused(false);\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setFocused(true);\n  };\n\n  const inputStyle = {\n    \"--input-textAlign\": textAlign,\n    ...style,\n  };\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        withBaseName(variant),\n        {\n          [withBaseName(\"focused\")]: !isDisabled && focused,\n          [withBaseName(\"disabled\")]: isDisabled,\n          [withBaseName(\"readOnly\")]: isReadOnly,\n          [withBaseName(\"truncate\")]: truncate,\n          [withBaseName(validationStatus ?? \"\")]: validationStatus,\n          [withBaseName(\"bordered\")]: bordered,\n        },\n        classNameProp,\n      )}\n      ref={ref}\n      style={inputStyle}\n      {...other}\n    >\n      {startAdornment && (\n        <div className={withBaseName(\"startAdornmentContainer\")}>\n          {startAdornment}\n        </div>\n      )}\n      <div className={withBaseName(\"inputWrapper\")} ref={pillListRef}>\n        <div\n          role=\"list\"\n          className={withBaseName(\"pillList\")}\n          aria-labelledby={clsx(formFieldLabelledBy, pillListId)}\n          aria-label=\"Selected Options\"\n          id={pillListId}\n        >\n          {visiblePills?.map((pill, index) => (\n            <div role=\"listitem\" key={pill}>\n              <Pill\n                data-index={index}\n                disabled={disabled}\n                aria-label={hidePillClose ? pill : `Remove ${pill}`}\n                ref={(element) => {\n                  if (element) {\n                    pillElementsRef.current[index] = element;\n                  } else {\n                    pillElementsRef.current = pillElementsRef.current.filter(\n                      (pillEl) => pillEl !== element,\n                    );\n                  }\n                }}\n                onFocus={() => setFocusedPillIndex(index)}\n                onKeyDown={handlePillKeyDown}\n                onClick={handlePillClick}\n                tabIndex={\n                  focusedPillIndex === -1 || focusedPillIndex === index ? 0 : -1\n                }\n              >\n                {pill}\n                {!hidePillClose && <CloseIcon aria-hidden />}\n              </Pill>\n            </div>\n          ))}\n          {visiblePills.length < pills.length && (\n            <div role=\"listitem\">\n              <div\n                data-overflowindicator\n                className={withBaseName(\"overflowIndicator\")}\n              >\n                <OverflowIcon aria-hidden />\n              </div>\n            </div>\n          )}\n        </div>\n        <input\n          aria-describedby={\n            clsx(formFieldDescribedBy, inputDescribedBy) || undefined\n          }\n          aria-labelledby={\n            clsx(formFieldLabelledBy, inputLabelledBy) || undefined\n          }\n          autoComplete=\"off\"\n          className={clsx(withBaseName(\"input\"), inputProps?.className)}\n          disabled={isDisabled}\n          id={id}\n          readOnly={isReadOnly}\n          ref={handleInputRef}\n          role={role}\n          tabIndex={isDisabled ? -1 : 0}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onFocus={!isDisabled ? handleFocus : undefined}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          value={value}\n          {...restA11yProps}\n          {...restInputProps}\n          required={isRequired}\n        />\n      </div>\n      {!isDisabled && validationStatus && (\n        <div className={withBaseName(\"statusAdornmentContainer\")}>\n          <StatusAdornment status={validationStatus} />\n        </div>\n      )}\n      {endAdornment && (\n        <div className={withBaseName(\"endAdornmentContainer\")}>\n          {endAdornment}\n        </div>\n      )}\n      <div className={withBaseName(\"activationIndicator\")} />\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","PillInput","useWindow","useIcon","useComponentCssInjection","pillInputCss","useFormFieldProps","useState","useControlled","useTruncatePills","useId","useRef","useForkRef","value","jsxs","clsx","jsx","Pill","StatusAdornment"],"mappings":"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"}
+{"version":3,"file":"PillInput.js","sources":["../src/pill-input/PillInput.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type ForwardedRef,\n  forwardRef,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  type SyntheticEvent,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  type FormFieldValidationStatus,\n  useFormFieldProps,\n} from \"../form-field-context\";\nimport { Pill } from \"../pill\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled, useForkRef, useId } from \"../utils\";\nimport pillInputCss from \"./PillInput.css\";\nimport { useTruncatePills } from \"./useTruncatePills\";\n\nconst withBaseName = makePrefixer(\"saltPillInput\");\n\nexport interface PillInputProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n    Pick<\n      ComponentPropsWithoutRef<\"input\">,\n      \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n    > {\n  /**\n   * The marker to use in an empty read only Input.\n   * Use `''` to disable this feature. Defaults to '—'.\n   */\n  emptyReadOnlyMarker?: string;\n  /**\n   * End adornment component\n   */\n  endAdornment?: ReactNode;\n  /**\n   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n   */\n  inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\n  /**\n   * Optional ref for the input component\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * The name applied to the input.\n   */\n  name?: string;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * The tokens to display in the input.\n   */\n  pills?: string[];\n  onPillRemove?: (event: SyntheticEvent, index: number) => void;\n  /**\n   * Start adornment component\n   */\n  startAdornment?: ReactNode;\n  /**\n   * Alignment of text within container. Defaults to \"left\"\n   */\n  textAlign?: \"left\" | \"center\" | \"right\";\n  /**\n   * Validation status.\n   */\n  validationStatus?: FormFieldValidationStatus;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  hidePillClose?: boolean;\n  truncate?: boolean;\n  /** Styling variant with full border. Defaults to false\n   */\n  bordered?: boolean;\n}\n\nfunction isEmptyReadOnlyValue(\n  value: PillInputProps[\"value\"] | PillInputProps[\"defaultValue\"],\n) {\n  return (\n    value == null ||\n    value === \"\" ||\n    (Array.isArray(value) && value.length === 0)\n  );\n}\n\nexport const PillInput = forwardRef(function PillInput(\n  {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n    className: classNameProp,\n    disabled,\n    emptyReadOnlyMarker = \"—\",\n    endAdornment,\n    hidePillClose,\n    id: idProp,\n    inputProps = {},\n    inputRef: inputRefProp,\n    name,\n    placeholder,\n    pills = [],\n    onPillRemove,\n    readOnly: readOnlyProp,\n    role,\n    startAdornment,\n    style,\n    textAlign = \"left\",\n    value: valueProp,\n    defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n    validationStatus: validationStatusProp,\n    variant = \"primary\",\n    truncate,\n    bordered = false,\n    ...other\n  }: PillInputProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  const { OverflowIcon, CloseIcon } = useIcon();\n  useComponentCssInjection({\n    testId: \"salt-pill-input\",\n    css: pillInputCss,\n    window: targetWindow,\n  });\n\n  const {\n    a11yProps: {\n      \"aria-describedby\": formFieldDescribedBy,\n      \"aria-labelledby\": formFieldLabelledBy,\n    } = {},\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n    necessity: formFieldRequired,\n    validationStatus: formFieldValidationStatus,\n  } = useFormFieldProps();\n\n  const restA11yProps = {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n  };\n\n  const isDisabled = disabled || formFieldDisabled;\n  const isReadOnly = readOnlyProp || formFieldReadOnly;\n  const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n  const [focused, setFocused] = useState(false);\n  const [focusedPillIndex, setFocusedPillIndex] = useState(-1);\n\n  const isValueEmptyReadOnly = isReadOnly && isEmptyReadOnlyValue(valueProp);\n  const isDefaultValueEmptyReadOnly =\n    isReadOnly && isEmptyReadOnlyValue(defaultValueProp);\n  const controlledValue =\n    valueProp === undefined\n      ? undefined\n      : isValueEmptyReadOnly\n        ? emptyReadOnlyMarker\n        : valueProp;\n  const defaultValue = isDefaultValueEmptyReadOnly\n    ? emptyReadOnlyMarker\n    : defaultValueProp;\n\n  const {\n    \"aria-describedby\": inputDescribedBy,\n    \"aria-labelledby\": inputLabelledBy,\n    onBlur,\n    onFocus,\n    onChange,\n    required: inputPropsRequired,\n    onKeyDown: inputOnKeyDown,\n    ...restInputProps\n  } = inputProps;\n\n  const isRequired = formFieldRequired\n    ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n    : inputPropsRequired;\n\n  const [value, setValue] = useControlled({\n    controlled: controlledValue,\n    default: defaultValue,\n    name: \"Input\",\n    state: \"value\",\n  });\n\n  const { visiblePills, pillListRef } = useTruncatePills({\n    pills,\n    enable: truncate && pills.length > 0,\n  });\n\n  const id = useId(idProp);\n  const pillListId = `${id}-optionsList`;\n\n  const pillElementsRef = useRef<HTMLElement[]>([]);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleInputRef = useForkRef(inputRef, inputRefProp);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n    setValue(value);\n    onChange?.(event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    const target = event.currentTarget;\n    if (target.selectionStart === 0 && target.selectionEnd === 0) {\n      const lastPillIndex = pills.length - 1;\n      const lastPill = pills[lastPillIndex];\n      if (event.key === \"Backspace\" && lastPill) {\n        event.preventDefault();\n        onPillRemove?.(event, lastPillIndex);\n      } else if (event.key === \"ArrowLeft\") {\n        event.preventDefault();\n        // Move focus to last pill\n        pillElementsRef.current[lastPillIndex]?.focus();\n      }\n    }\n\n    inputOnKeyDown?.(event);\n  };\n\n  const handlePillKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    const target = event.currentTarget;\n    const index = Number(target.dataset.index);\n    if (event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      // Move focus to previous pill\n      pillElementsRef.current[index - 1]?.focus();\n    } else if (event.key === \"ArrowRight\") {\n      event.preventDefault();\n      // Move focus to next pill or input\n      if (index === pills.length - 1) {\n        inputRef?.current?.focus();\n      } else {\n        pillElementsRef.current[index + 1]?.focus();\n      }\n    } else if (event.key === \"Delete\" || event.key === \"Backspace\") {\n      event.preventDefault();\n      onPillRemove?.(event, index);\n\n      if (pills.length === 1) {\n        inputRef.current?.focus();\n      } else if (index === pills.length - 1) {\n        pillElementsRef.current[pills.length - 2]?.focus();\n      } else {\n        pillElementsRef.current[index]?.focus();\n      }\n    }\n  };\n\n  const handlePillClick = (event: MouseEvent<HTMLButtonElement>) => {\n    if (!hidePillClose) {\n      const target = event.currentTarget;\n      const index = Number(target.dataset.index);\n      onPillRemove?.(event, index);\n    }\n    inputRef.current?.focus();\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    onBlur?.(event);\n    setFocused(false);\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setFocused(true);\n  };\n\n  const inputStyle = {\n    \"--input-textAlign\": textAlign,\n    ...style,\n  };\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        withBaseName(variant),\n        {\n          [withBaseName(\"focused\")]: !isDisabled && focused,\n          [withBaseName(\"disabled\")]: isDisabled,\n          [withBaseName(\"readOnly\")]: isReadOnly,\n          [withBaseName(\"truncate\")]: truncate,\n          [withBaseName(validationStatus ?? \"\")]: validationStatus,\n          [withBaseName(\"bordered\")]: bordered,\n        },\n        classNameProp,\n      )}\n      ref={ref}\n      style={inputStyle}\n      {...other}\n    >\n      {startAdornment && (\n        <div className={withBaseName(\"startAdornmentContainer\")}>\n          {startAdornment}\n        </div>\n      )}\n      <div className={withBaseName(\"inputWrapper\")} ref={pillListRef}>\n        <div\n          role=\"list\"\n          className={withBaseName(\"pillList\")}\n          aria-labelledby={clsx(formFieldLabelledBy, pillListId)}\n          aria-label=\"Selected Options\"\n          id={pillListId}\n        >\n          {visiblePills?.map((pill, index) => (\n            <div role=\"listitem\" key={pill}>\n              <Pill\n                data-index={index}\n                disabled={disabled}\n                aria-label={hidePillClose ? pill : `Remove ${pill}`}\n                ref={(element) => {\n                  if (element) {\n                    pillElementsRef.current[index] = element;\n                  } else {\n                    pillElementsRef.current = pillElementsRef.current.filter(\n                      (pillEl) => pillEl !== element,\n                    );\n                  }\n                }}\n                onFocus={() => setFocusedPillIndex(index)}\n                onKeyDown={handlePillKeyDown}\n                onClick={handlePillClick}\n                tabIndex={\n                  focusedPillIndex === -1 || focusedPillIndex === index ? 0 : -1\n                }\n              >\n                {pill}\n                {!hidePillClose && <CloseIcon aria-hidden />}\n              </Pill>\n            </div>\n          ))}\n          {visiblePills.length < pills.length && (\n            <div role=\"listitem\">\n              <div\n                data-overflowindicator\n                className={withBaseName(\"overflowIndicator\")}\n              >\n                <OverflowIcon aria-hidden />\n              </div>\n            </div>\n          )}\n        </div>\n        <input\n          aria-describedby={\n            clsx(formFieldDescribedBy, inputDescribedBy) || undefined\n          }\n          aria-labelledby={\n            clsx(formFieldLabelledBy, inputLabelledBy) || undefined\n          }\n          autoComplete=\"off\"\n          className={clsx(withBaseName(\"input\"), inputProps?.className)}\n          disabled={isDisabled}\n          id={id}\n          name={name}\n          readOnly={isReadOnly}\n          ref={handleInputRef}\n          role={role}\n          tabIndex={isDisabled ? -1 : 0}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onFocus={!isDisabled ? handleFocus : undefined}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          value={value}\n          {...restA11yProps}\n          {...restInputProps}\n          required={isRequired}\n        />\n      </div>\n      {!isDisabled && validationStatus && (\n        <div className={withBaseName(\"statusAdornmentContainer\")}>\n          <StatusAdornment status={validationStatus} />\n        </div>\n      )}\n      {endAdornment && (\n        <div className={withBaseName(\"endAdornmentContainer\")}>\n          {endAdornment}\n        </div>\n      )}\n      <div className={withBaseName(\"activationIndicator\")} />\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","PillInput","useWindow","useIcon","useComponentCssInjection","pillInputCss","useFormFieldProps","useState","useControlled","useTruncatePills","useId","useRef","useForkRef","value","jsxs","clsx","jsx","Pill","StatusAdornment"],"mappings":"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"}

package/dist-cjs/semantic-icon-provider/SemanticIconProvider.js

@@ -17,6 +17,7 @@ const defaultIconMap = {
   CollapseRightIcon: icons.DoubleChevronRightIcon,
   CompletedIcon: icons.SuccessCircleSolidIcon,
   DecreaseIcon: icons.TriangleDownIcon,
+  EntityIcon: icons.BankIcon,
   ErrorIcon: icons.ErrorSolidIcon,
   ErrorStatusAdornment: ErrorAdornment.ErrorAdornmentIcon,
   ExpandGroupIcon: icons.ChevronRightIcon,
@@ -37,7 +38,7 @@ const defaultIconMap = {
   SuccessIcon: icons.SuccessCircleSolidIcon,
   SuccessStatusAdornment: SuccessAdornment.SuccessAdornmentIcon,
   UploadIcon: icons.UploadIcon,
-  UserIcon: icons.UserSolidIcon,
+  UserIcon: icons.UserIcon,
   WarningIcon: icons.WarningSolidIcon,
   WarningStatusAdornment: WarningAdornment.WarningAdornmentIcon
 };

package/dist-cjs/semantic-icon-provider/SemanticIconProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SemanticIconProvider.js","sources":["../src/semantic-icon-provider/SemanticIconProvider.tsx"],"sourcesContent":["import {\n  CalendarIcon,\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n  CloseIcon,\n  DoubleChevronLeftIcon,\n  DoubleChevronRightIcon,\n  ErrorSolidIcon,\n  FavoriteIcon,\n  FavoriteSolidIcon,\n  FavoriteStrongIcon,\n  InfoSolidIcon,\n  LockedIcon,\n  OverflowMenuIcon,\n  ProgressInprogressIcon,\n  StepActiveIcon,\n  StepDefaultIcon,\n  SuccessCircleSolidIcon,\n  TearOutIcon,\n  TriangleDownIcon,\n  TriangleUpIcon,\n  UploadIcon,\n  UserSolidIcon,\n  WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport {\n  createContext,\n  type ElementType,\n  type ReactNode,\n  useContext,\n} from \"react\";\nimport { ErrorAdornmentIcon } from \"../status-adornment/ErrorAdornment\";\nimport { SuccessAdornmentIcon } from \"../status-adornment/SuccessAdornment\";\nimport { WarningAdornmentIcon } from \"../status-adornment/WarningAdornment\";\n\nexport interface SemanticIconMap {\n  ActiveIcon: ElementType;\n  CalendarIcon: ElementType;\n  CloseIcon: ElementType;\n  CollapseGroupIcon: ElementType;\n  CollapseIcon: ElementType;\n  CollapseLeftIcon: ElementType;\n  CollapseRightIcon: ElementType;\n  CompletedIcon: ElementType;\n  DecreaseIcon: ElementType;\n  ErrorIcon: ElementType;\n  ErrorStatusAdornment: ElementType;\n  ExpandGroupIcon: ElementType;\n  ExpandIcon: ElementType;\n  ExternalIcon: ElementType;\n  IncreaseIcon: ElementType;\n  InfoIcon: ElementType;\n  InProgressIcon: ElementType;\n  LockedIcon: ElementType;\n  LevelSeparatorIcon: ElementType;\n  NextIcon: ElementType;\n  OverflowIcon: ElementType;\n  PendingIcon: ElementType;\n  PreviousIcon: ElementType;\n  RatingIcon: ElementType;\n  RatingSelectedIcon: ElementType;\n  RatingUnselectingIcon: ElementType;\n  SuccessIcon: ElementType;\n  SuccessStatusAdornment: ElementType;\n  UploadIcon: ElementType;\n  UserIcon: ElementType;\n  WarningIcon: ElementType;\n  WarningStatusAdornment: ElementType;\n}\n\nexport interface SemanticIconProviderProps {\n  /**\n   * Custom mapping of icon names to components. Overrides default icons if provided.\n   */\n  iconMap?: Partial<SemanticIconMap>;\n\n  /**\n   * Child elements that will use the provided icons.\n   */\n  children: ReactNode;\n}\n\nconst defaultIconMap: SemanticIconMap = {\n  ActiveIcon: StepActiveIcon,\n  CalendarIcon: CalendarIcon,\n  CloseIcon: CloseIcon,\n  CollapseGroupIcon: ChevronDownIcon,\n  CollapseIcon: ChevronUpIcon,\n  CollapseLeftIcon: DoubleChevronLeftIcon,\n  CollapseRightIcon: DoubleChevronRightIcon,\n  CompletedIcon: SuccessCircleSolidIcon,\n  DecreaseIcon: TriangleDownIcon,\n  ErrorIcon: ErrorSolidIcon,\n  ErrorStatusAdornment: ErrorAdornmentIcon,\n  ExpandGroupIcon: ChevronRightIcon,\n  ExpandIcon: ChevronDownIcon,\n  ExternalIcon: TearOutIcon,\n  IncreaseIcon: TriangleUpIcon,\n  InfoIcon: InfoSolidIcon,\n  InProgressIcon: ProgressInprogressIcon,\n  LockedIcon: LockedIcon,\n  LevelSeparatorIcon: ChevronRightIcon,\n  NextIcon: ChevronRightIcon,\n  OverflowIcon: OverflowMenuIcon,\n  PendingIcon: StepDefaultIcon,\n  PreviousIcon: ChevronLeftIcon,\n  RatingIcon: FavoriteIcon,\n  RatingSelectedIcon: FavoriteSolidIcon,\n  RatingUnselectingIcon: FavoriteStrongIcon,\n  SuccessIcon: SuccessCircleSolidIcon,\n  SuccessStatusAdornment: SuccessAdornmentIcon,\n  UploadIcon,\n  UserIcon: UserSolidIcon,\n  WarningIcon: WarningSolidIcon,\n  WarningStatusAdornment: WarningAdornmentIcon,\n};\n\nconst SemanticIconContext = createContext<SemanticIconMap>(defaultIconMap);\n\nexport const SemanticIconProvider = ({\n  iconMap = {},\n  children,\n}: SemanticIconProviderProps) => (\n  <SemanticIconContext.Provider value={{ ...defaultIconMap, ...iconMap }}>\n    {children}\n  </SemanticIconContext.Provider>\n);\n\nexport const useIcon = () => {\n  const context = useContext(SemanticIconContext);\n  return context || defaultIconMap;\n};\n"],"names":["StepActiveIcon","CalendarIcon","CloseIcon","ChevronDownIcon","ChevronUpIcon","DoubleChevronLeftIcon","DoubleChevronRightIcon","SuccessCircleSolidIcon","TriangleDownIcon","ErrorSolidIcon","ErrorAdornmentIcon","ChevronRightIcon","TearOutIcon","TriangleUpIcon","InfoSolidIcon","ProgressInprogressIcon","LockedIcon","OverflowMenuIcon","StepDefaultIcon","ChevronLeftIcon","FavoriteIcon","FavoriteSolidIcon","FavoriteStrongIcon","SuccessAdornmentIcon","UploadIcon","UserSolidIcon","WarningSolidIcon","WarningAdornmentIcon","createContext","jsx","useContext"],"mappings":";;;;;;;;;AAoFA,MAAM,cAAA,GAAkC;AAAA,EACtC,UAAA,EAAYA,oBAAA;AAAA,gBACZC,kBAAA;AAAA,aACAC,eAAA;AAAA,EACA,iBAAA,EAAmBC,qBAAA;AAAA,EACnB,YAAA,EAAcC,mBAAA;AAAA,EACd,gBAAA,EAAkBC,2BAAA;AAAA,EAClB,iBAAA,EAAmBC,4BAAA;AAAA,EACnB,aAAA,EAAeC,4BAAA;AAAA,EACf,YAAA,EAAcC,sBAAA;AAAA,EACd,SAAA,EAAWC,oBAAA;AAAA,EACX,oBAAA,EAAsBC,iCAAA;AAAA,EACtB,eAAA,EAAiBC,sBAAA;AAAA,EACjB,UAAA,EAAYR,qBAAA;AAAA,EACZ,YAAA,EAAcS,iBAAA;AAAA,EACd,YAAA,EAAcC,oBAAA;AAAA,EACd,QAAA,EAAUC,mBAAA;AAAA,EACV,cAAA,EAAgBC,4BAAA;AAAA,cAChBC,gBAAA;AAAA,EACA,kBAAA,EAAoBL,sBAAA;AAAA,EACpB,QAAA,EAAUA,sBAAA;AAAA,EACV,YAAA,EAAcM,sBAAA;AAAA,EACd,WAAA,EAAaC,qBAAA;AAAA,EACb,YAAA,EAAcC,qBAAA;AAAA,EACd,UAAA,EAAYC,kBAAA;AAAA,EACZ,kBAAA,EAAoBC,uBAAA;AAAA,EACpB,qBAAA,EAAuBC,wBAAA;AAAA,EACvB,WAAA,EAAaf,4BAAA;AAAA,EACb,sBAAA,EAAwBgB,qCAAA;AAAA,cACxBC,gBAAA;AAAA,EACA,QAAA,EAAUC,mBAAA;AAAA,EACV,WAAA,EAAaC,sBAAA;AAAA,EACb,sBAAA,EAAwBC;AAC1B,CAAA;AAEA,MAAM,mBAAA,GAAsBC,oBAA+B,cAAc,CAAA;AAElE,MAAM,uBAAuB,CAAC;AAAA,EACnC,UAAU,EAAC;AAAA,EACX;AACF,CAAA,qBACEC,cAAA,CAAC,mBAAA,CAAoB,QAAA,EAApB,EAA6B,KAAA,EAAO,EAAE,GAAG,cAAA,EAAgB,GAAG,OAAA,EAAQ,EAClE,QAAA,EACH;AAGK,MAAM,UAAU,MAAM;AAC3B,EAAA,MAAM,OAAA,GAAUC,iBAAW,mBAAmB,CAAA;AAC9C,EAAA,OAAO,OAAA,IAAW,cAAA;AACpB;;;;;"}
+{"version":3,"file":"SemanticIconProvider.js","sources":["../src/semantic-icon-provider/SemanticIconProvider.tsx"],"sourcesContent":["import {\n  BankIcon,\n  CalendarIcon,\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n  CloseIcon,\n  DoubleChevronLeftIcon,\n  DoubleChevronRightIcon,\n  ErrorSolidIcon,\n  FavoriteIcon,\n  FavoriteSolidIcon,\n  FavoriteStrongIcon,\n  InfoSolidIcon,\n  LockedIcon,\n  OverflowMenuIcon,\n  ProgressInprogressIcon,\n  StepActiveIcon,\n  StepDefaultIcon,\n  SuccessCircleSolidIcon,\n  TearOutIcon,\n  TriangleDownIcon,\n  TriangleUpIcon,\n  UploadIcon,\n  UserIcon,\n  WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport {\n  createContext,\n  type ElementType,\n  type ReactNode,\n  useContext,\n} from \"react\";\nimport { ErrorAdornmentIcon } from \"../status-adornment/ErrorAdornment\";\nimport { SuccessAdornmentIcon } from \"../status-adornment/SuccessAdornment\";\nimport { WarningAdornmentIcon } from \"../status-adornment/WarningAdornment\";\n\nexport interface SemanticIconMap {\n  ActiveIcon: ElementType;\n  CalendarIcon: ElementType;\n  CloseIcon: ElementType;\n  CollapseGroupIcon: ElementType;\n  CollapseIcon: ElementType;\n  CollapseLeftIcon: ElementType;\n  CollapseRightIcon: ElementType;\n  CompletedIcon: ElementType;\n  DecreaseIcon: ElementType;\n  EntityIcon: ElementType;\n  ErrorIcon: ElementType;\n  ErrorStatusAdornment: ElementType;\n  ExpandGroupIcon: ElementType;\n  ExpandIcon: ElementType;\n  ExternalIcon: ElementType;\n  IncreaseIcon: ElementType;\n  InfoIcon: ElementType;\n  InProgressIcon: ElementType;\n  LockedIcon: ElementType;\n  LevelSeparatorIcon: ElementType;\n  NextIcon: ElementType;\n  OverflowIcon: ElementType;\n  PendingIcon: ElementType;\n  PreviousIcon: ElementType;\n  RatingIcon: ElementType;\n  RatingSelectedIcon: ElementType;\n  RatingUnselectingIcon: ElementType;\n  SuccessIcon: ElementType;\n  SuccessStatusAdornment: ElementType;\n  UploadIcon: ElementType;\n  UserIcon: ElementType;\n  WarningIcon: ElementType;\n  WarningStatusAdornment: ElementType;\n}\n\nexport interface SemanticIconProviderProps {\n  /**\n   * Custom mapping of icon names to components. Overrides default icons if provided.\n   */\n  iconMap?: Partial<SemanticIconMap>;\n\n  /**\n   * Child elements that will use the provided icons.\n   */\n  children: ReactNode;\n}\n\nconst defaultIconMap: SemanticIconMap = {\n  ActiveIcon: StepActiveIcon,\n  CalendarIcon: CalendarIcon,\n  CloseIcon: CloseIcon,\n  CollapseGroupIcon: ChevronDownIcon,\n  CollapseIcon: ChevronUpIcon,\n  CollapseLeftIcon: DoubleChevronLeftIcon,\n  CollapseRightIcon: DoubleChevronRightIcon,\n  CompletedIcon: SuccessCircleSolidIcon,\n  DecreaseIcon: TriangleDownIcon,\n  EntityIcon: BankIcon,\n  ErrorIcon: ErrorSolidIcon,\n  ErrorStatusAdornment: ErrorAdornmentIcon,\n  ExpandGroupIcon: ChevronRightIcon,\n  ExpandIcon: ChevronDownIcon,\n  ExternalIcon: TearOutIcon,\n  IncreaseIcon: TriangleUpIcon,\n  InfoIcon: InfoSolidIcon,\n  InProgressIcon: ProgressInprogressIcon,\n  LockedIcon: LockedIcon,\n  LevelSeparatorIcon: ChevronRightIcon,\n  NextIcon: ChevronRightIcon,\n  OverflowIcon: OverflowMenuIcon,\n  PendingIcon: StepDefaultIcon,\n  PreviousIcon: ChevronLeftIcon,\n  RatingIcon: FavoriteIcon,\n  RatingSelectedIcon: FavoriteSolidIcon,\n  RatingUnselectingIcon: FavoriteStrongIcon,\n  SuccessIcon: SuccessCircleSolidIcon,\n  SuccessStatusAdornment: SuccessAdornmentIcon,\n  UploadIcon,\n  UserIcon: UserIcon,\n  WarningIcon: WarningSolidIcon,\n  WarningStatusAdornment: WarningAdornmentIcon,\n};\n\nconst SemanticIconContext = createContext<SemanticIconMap>(defaultIconMap);\n\nexport const SemanticIconProvider = ({\n  iconMap = {},\n  children,\n}: SemanticIconProviderProps) => (\n  <SemanticIconContext.Provider value={{ ...defaultIconMap, ...iconMap }}>\n    {children}\n  </SemanticIconContext.Provider>\n);\n\nexport const useIcon = () => {\n  const context = useContext(SemanticIconContext);\n  return context || defaultIconMap;\n};\n"],"names":["StepActiveIcon","CalendarIcon","CloseIcon","ChevronDownIcon","ChevronUpIcon","DoubleChevronLeftIcon","DoubleChevronRightIcon","SuccessCircleSolidIcon","TriangleDownIcon","BankIcon","ErrorSolidIcon","ErrorAdornmentIcon","ChevronRightIcon","TearOutIcon","TriangleUpIcon","InfoSolidIcon","ProgressInprogressIcon","LockedIcon","OverflowMenuIcon","StepDefaultIcon","ChevronLeftIcon","FavoriteIcon","FavoriteSolidIcon","FavoriteStrongIcon","SuccessAdornmentIcon","UploadIcon","UserIcon","WarningSolidIcon","WarningAdornmentIcon","createContext","jsx","useContext"],"mappings":";;;;;;;;;AAsFA,MAAM,cAAA,GAAkC;AAAA,EACtC,UAAA,EAAYA,oBAAA;AAAA,gBACZC,kBAAA;AAAA,aACAC,eAAA;AAAA,EACA,iBAAA,EAAmBC,qBAAA;AAAA,EACnB,YAAA,EAAcC,mBAAA;AAAA,EACd,gBAAA,EAAkBC,2BAAA;AAAA,EAClB,iBAAA,EAAmBC,4BAAA;AAAA,EACnB,aAAA,EAAeC,4BAAA;AAAA,EACf,YAAA,EAAcC,sBAAA;AAAA,EACd,UAAA,EAAYC,cAAA;AAAA,EACZ,SAAA,EAAWC,oBAAA;AAAA,EACX,oBAAA,EAAsBC,iCAAA;AAAA,EACtB,eAAA,EAAiBC,sBAAA;AAAA,EACjB,UAAA,EAAYT,qBAAA;AAAA,EACZ,YAAA,EAAcU,iBAAA;AAAA,EACd,YAAA,EAAcC,oBAAA;AAAA,EACd,QAAA,EAAUC,mBAAA;AAAA,EACV,cAAA,EAAgBC,4BAAA;AAAA,cAChBC,gBAAA;AAAA,EACA,kBAAA,EAAoBL,sBAAA;AAAA,EACpB,QAAA,EAAUA,sBAAA;AAAA,EACV,YAAA,EAAcM,sBAAA;AAAA,EACd,WAAA,EAAaC,qBAAA;AAAA,EACb,YAAA,EAAcC,qBAAA;AAAA,EACd,UAAA,EAAYC,kBAAA;AAAA,EACZ,kBAAA,EAAoBC,uBAAA;AAAA,EACpB,qBAAA,EAAuBC,wBAAA;AAAA,EACvB,WAAA,EAAahB,4BAAA;AAAA,EACb,sBAAA,EAAwBiB,qCAAA;AAAA,cACxBC,gBAAA;AAAA,YACAC,cAAA;AAAA,EACA,WAAA,EAAaC,sBAAA;AAAA,EACb,sBAAA,EAAwBC;AAC1B,CAAA;AAEA,MAAM,mBAAA,GAAsBC,oBAA+B,cAAc,CAAA;AAElE,MAAM,uBAAuB,CAAC;AAAA,EACnC,UAAU,EAAC;AAAA,EACX;AACF,CAAA,qBACEC,cAAA,CAAC,mBAAA,CAAoB,QAAA,EAApB,EAA6B,KAAA,EAAO,EAAE,GAAG,cAAA,EAAgB,GAAG,OAAA,EAAQ,EAClE,QAAA,EACH;AAGK,MAAM,UAAU,MAAM;AAC3B,EAAA,MAAM,OAAA,GAAUC,iBAAW,mBAAmB,CAAA;AAC9C,EAAA,OAAO,OAAA,IAAW,cAAA;AACpB;;;;;"}

package/dist-cjs/side-panel/SidePanel.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltSidePanel {\n  --saltSidePanel-width: 300px;\n  --sidePanel-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--sidePanel-borderColor, var(--salt-container-primary-borderColor));\n  --saltSidePanel-padding: var(--salt-spacing-300);\n  /* Outer wrapper. Idle: a normal flex column whose width comes from\n     --saltSidePanel-width (supports any CSS length, including %).\n     During enter/exit animation: animates `width` between 0 and the\n     panel width and clips the absolutely-positioned inner via\n     `contain: paint`. The inner uses a JS-resolved px width during\n     animation (--saltSidePanel-animation-width) so percentage widths\n     don't compound against the animating outer. */\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex: none;\n  width: var(--saltSidePanel-width);\n  height: 100%;\n  min-height: 0;\n  align-self: stretch;\n}\n\n.saltSidePanel-primary {\n  --sidePanel-background: var(--salt-container-primary-background);\n  --sidePanel-borderColor: var(--salt-container-primary-borderColor);\n}\n\n.saltSidePanel-secondary {\n  --sidePanel-background: var(--salt-container-secondary-background);\n  --sidePanel-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n.saltSidePanel-tertiary {\n  --sidePanel-background: var(--salt-container-tertiary-background);\n  --sidePanel-borderColor: var(--salt-container-tertiary-borderColor);\n}\n\n.saltSidePanel-none {\n  --sidePanel-background: none;\n  --saltSidePanel-padding: var(--salt-spacing-200);\n}\n\n.saltSidePanel-inner {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  padding: var(--saltSidePanel-padding);\n  width: 100%;\n  background-color: var(--sidePanel-background, var(--salt-container-primary-background));\n}\n\n.saltSidePanel-left .saltSidePanel-inner {\n  border-right: var(--sidePanel-border);\n}\n\n.saltSidePanel-right .saltSidePanel-inner {\n  border-left: var(--sidePanel-border);\n}\n\n.saltSidePanel-none .saltSidePanel-inner {\n  border: none;\n}\n\n/* Animation: outer becomes the gap + clip; inner is absolutely positioned\n   and anchored to the gap's GROWING edge so the leading edge tracks the\n   gap's expansion — content visibly pushes the sibling rather than being\n   revealed in place. Left grows rightward → anchor inner right; right\n   grows leftward → anchor inner left.\n\n   During animation the outer's width is interpolating, so the inner can't\n   rely on --saltSidePanel-width (which may be a percentage that would\n   resolve against the animating outer). Instead the JS layer measures the\n   resolved width once and exposes it as --saltSidePanel-animation-width\n   (a px value) for the inner to use. */\n.saltSidePanel-enterAnimation,\n.saltSidePanel-exitAnimation {\n  contain: paint;\n}\n\n.saltSidePanel-enterAnimation .saltSidePanel-inner,\n.saltSidePanel-exitAnimation .saltSidePanel-inner {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  flex: none;\n  width: var(--saltSidePanel-animation-width, var(--saltSidePanel-width));\n}\n\n.saltSidePanel-left.saltSidePanel-enterAnimation .saltSidePanel-inner,\n.saltSidePanel-left.saltSidePanel-exitAnimation .saltSidePanel-inner {\n  right: 0;\n}\n\n.saltSidePanel-right.saltSidePanel-enterAnimation .saltSidePanel-inner,\n.saltSidePanel-right.saltSidePanel-exitAnimation .saltSidePanel-inner {\n  left: 0;\n}\n\n.saltSidePanel-exitAnimation .saltSidePanel-inner {\n  pointer-events: none;\n}\n\n.saltSidePanel-enterAnimation {\n  animation: saltSidePanel-open var(--salt-duration-perceptible) var(--salt-animation-timing-function);\n}\n\n.saltSidePanel-exitAnimation {\n  animation: saltSidePanel-close var(--salt-duration-perceptible) var(--salt-animation-timing-function) both;\n}\n\n@keyframes saltSidePanel-open {\n  from {\n    width: 0;\n  }\n}\n\n@keyframes saltSidePanel-close {\n  to {\n    width: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .saltSidePanel-enterAnimation,\n  .saltSidePanel-exitAnimation {\n    animation: none;\n  }\n}\n";
+var css_248z = ".saltSidePanel {\n  --saltSidePanel-width: 300px;\n  --sidePanel-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--sidePanel-borderColor, var(--salt-container-bold-borderColor));\n  --saltSidePanel-padding: var(--salt-spacing-300);\n  /* Outer wrapper. Idle: a normal flex column whose width comes from\n     --saltSidePanel-width (supports any CSS length, including %).\n     During enter/exit animation: animates `width` between 0 and the\n     panel width and clips the absolutely-positioned inner via\n     `contain: paint`. The inner uses a JS-resolved px width during\n     animation (--saltSidePanel-animation-width) so percentage widths\n     don't compound against the animating outer. */\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex: none;\n  width: var(--saltSidePanel-width);\n  height: 100%;\n  min-height: 0;\n  align-self: stretch;\n}\n\n.saltSidePanel-primary {\n  --sidePanel-background: var(--salt-container-primary-background);\n  --sidePanel-borderColor: var(--salt-container-bold-borderColor);\n}\n\n.saltSidePanel-secondary {\n  --sidePanel-background: var(--salt-container-secondary-background);\n  --sidePanel-borderColor: var(--salt-container-bold-borderColor);\n}\n\n.saltSidePanel-tertiary {\n  --sidePanel-background: var(--salt-container-tertiary-background);\n  --sidePanel-borderColor: var(--salt-container-bold-borderColor);\n}\n\n.saltSidePanel-none {\n  --sidePanel-background: none;\n  --saltSidePanel-padding: var(--salt-spacing-200);\n}\n\n.saltSidePanel-inner {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  padding: var(--saltSidePanel-padding);\n  width: 100%;\n  background-color: var(--sidePanel-background, var(--salt-container-primary-background));\n}\n\n.saltSidePanel-left .saltSidePanel-inner {\n  border-right: var(--sidePanel-border);\n}\n\n.saltSidePanel-right .saltSidePanel-inner {\n  border-left: var(--sidePanel-border);\n}\n\n.saltSidePanel-none .saltSidePanel-inner {\n  border: none;\n}\n\n/* Animation: outer becomes the gap + clip; inner is absolutely positioned\n   and anchored to the gap's GROWING edge so the leading edge tracks the\n   gap's expansion — content visibly pushes the sibling rather than being\n   revealed in place. Left grows rightward → anchor inner right; right\n   grows leftward → anchor inner left.\n\n   During animation the outer's width is interpolating, so the inner can't\n   rely on --saltSidePanel-width (which may be a percentage that would\n   resolve against the animating outer). Instead the JS layer measures the\n   resolved width once and exposes it as --saltSidePanel-animation-width\n   (a px value) for the inner to use. */\n.saltSidePanel-enterAnimation,\n.saltSidePanel-exitAnimation {\n  contain: paint;\n}\n\n.saltSidePanel-enterAnimation .saltSidePanel-inner,\n.saltSidePanel-exitAnimation .saltSidePanel-inner {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  flex: none;\n  width: var(--saltSidePanel-animation-width, var(--saltSidePanel-width));\n}\n\n.saltSidePanel-left.saltSidePanel-enterAnimation .saltSidePanel-inner,\n.saltSidePanel-left.saltSidePanel-exitAnimation .saltSidePanel-inner {\n  right: 0;\n}\n\n.saltSidePanel-right.saltSidePanel-enterAnimation .saltSidePanel-inner,\n.saltSidePanel-right.saltSidePanel-exitAnimation .saltSidePanel-inner {\n  left: 0;\n}\n\n.saltSidePanel-exitAnimation .saltSidePanel-inner {\n  pointer-events: none;\n}\n\n.saltSidePanel-enterAnimation {\n  animation: saltSidePanel-open var(--salt-duration-perceptible) var(--salt-animation-timing-function);\n}\n\n.saltSidePanel-exitAnimation {\n  animation: saltSidePanel-close var(--salt-duration-perceptible) var(--salt-animation-timing-function) both;\n}\n\n@keyframes saltSidePanel-open {\n  from {\n    width: 0;\n  }\n}\n\n@keyframes saltSidePanel-close {\n  to {\n    width: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .saltSidePanel-enterAnimation,\n  .saltSidePanel-exitAnimation {\n    animation: none;\n  }\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=SidePanel.css.js.map

package/dist-cjs/slider/RangeSlider.js

@@ -28,8 +28,10 @@ const RangeSlider = React.forwardRef(
     marks,
     max = 100,
     min = 0,
+    endName,
     maxLabel,
     minLabel,
+    startName,
     onChange,
     onChangeEnd,
     restrictToMarks = false,
@@ -159,7 +161,8 @@ const RangeSlider = React.forwardRef(
               inputRef: inputRefs[0],
               onFocus: () => handleFocus(0),
               onBlur: () => handleBlur(0),
-              ...thumbProps
+              ...thumbProps,
+              name: startName
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -175,7 +178,8 @@ const RangeSlider = React.forwardRef(
               inputRef: inputRefs[1],
               onFocus: () => handleFocus(1),
               onBlur: () => handleBlur(1),
-              ...thumbProps
+              ...thumbProps,
+              name: endName
             }
           )
         ]

package/dist-cjs/slider/RangeSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.js","sources":["../src/slider/RangeSlider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  forwardRef,\n  type HTMLAttributes,\n  useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useControlled } from \"../utils\";\nimport { SliderThumb } from \"./internal/SliderThumb\";\nimport { SliderTrack } from \"./internal/SliderTrack\";\nimport { useRangeSliderThumb } from \"./internal/useRangeSliderThumb\";\nimport { calculatePercentage, clampRange, toFloat } from \"./internal/utils\";\n\nexport interface RangeSliderProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  /**\n   * Accessible text to announce maximum value label.\n   */\n  accessibleMaxText?: string;\n  /**\n   * Accessible text to announce minimum value label.\n   */\n  accessibleMinText?: string;\n  /**\n   * When minimum and maximum labels are defined, ensure\n   * they are confined within the boundary of the slider.\n   */\n  constrainLabelPosition?: boolean;\n  /**\n   * The number of allowed decimal places\n   * @default 2\n   */\n  decimalPlaces?: number;\n  /**\n   * The default value. Use when the component is not controlled.\n   * @default [min, min + (max - min) / 2]\n   */\n  defaultValue?: [number, number];\n  /**\n   * Disable the slider.\n   */\n  disabled?: boolean;\n  /**\n   * Show visual ticks above the marks.\n   */\n  showTicks?: boolean;\n  /**\n   * A callback to format the display value in the tooltip, min and max labels\n   * and the `aria-valuetext` attribute.\n   */\n  format?: (value: number) => string | number;\n  /**\n   * Marks that are displayed under the track.\n   */\n  marks?: { label: string; value: number }[];\n  /**\n   * Maximum slider value.\n   * @default 10\n   */\n  max?: number;\n  /**\n   * Minimum slider value.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * Label for maximum value.\n   */\n  maxLabel?: string;\n  /**\n   * Label for minimum value.\n   */\n  minLabel?: string;\n  /**\n   * Callback called when slider value is changed.\n   * It provides a generic event and the current value of the slider.\n   */\n  onChange?: (event: Event, value: [number, number]) => void;\n  /**\n   * Callback called when the slider is stopped from being dragged or\n   * its value is changed from the keyboard. It provides a generic\n   * event and the current value of the slider.\n   */\n  onChangeEnd?: (event: Event, value: [number, number]) => void;\n  /**\n   * Restrict slider value to marks only. The step will be ignored.\n   */\n  restrictToMarks?: boolean;\n  /**\n   * Show the slider value in a tooltip when the thumb is hovered.\n   * @default true\n   */\n  showTooltip?: boolean;\n  /**\n   * Minimum interval the slider thumb can move.\n   * @default 1\n   */\n  step?: number;\n  /**\n   * Maximum interval the slider thumb can move when using PageUp and PageDown keys.\n   * @default 2\n   */\n  stepMultiplier?: number;\n  /**\n   * Value of the slider, to be used when in a controlled state.\n   */\n  value?: [number, number];\n}\n\nexport const RangeSlider = forwardRef<HTMLDivElement, RangeSliderProps>(\n  function RangeSlider(\n    {\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-valuetext\": ariaValueText,\n      accessibleMaxText,\n      accessibleMinText,\n      decimalPlaces = 2,\n      disabled: disabledProp = false,\n      format,\n      marks,\n      max = 100,\n      min = 0,\n      maxLabel,\n      minLabel,\n      onChange,\n      onChangeEnd,\n      restrictToMarks = false,\n      showTooltip = true,\n      step = 1,\n      stepMultiplier = 2,\n      value: valueProp,\n      defaultValue = [min, min + (max - min) / 2],\n      ...rest\n    },\n    ref,\n  ) {\n    const [valueState, setValue] = useControlled({\n      controlled: valueProp,\n      default: defaultValue,\n      name: \"RangeSlider\",\n      state: \"value\",\n    });\n    const lastValueRef = useRef<[number, number]>(valueState);\n\n    const {\n      a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n      disabled: formFieldDisabled,\n    } = useFormFieldProps();\n\n    const disabled = formFieldDisabled || disabledProp;\n    const inputRefs = [\n      useRef<HTMLInputElement>(null),\n      useRef<HTMLInputElement>(null),\n    ];\n    const value: [number, number] = clampRange(\n      valueState,\n      max,\n      min,\n      step,\n      decimalPlaces,\n      marks,\n      restrictToMarks,\n    );\n    const progressPercentageStart = calculatePercentage(value[0], max, min);\n    const progressPercentageEnd = calculatePercentage(value[1], max, min);\n\n    const handleInputChange = (\n      event: ChangeEvent<HTMLInputElement>,\n      thumbIndex: number,\n    ) => {\n      const parsedValue = toFloat(event.target.value);\n      const values = preventThumbOverlap(parsedValue, value, thumbIndex);\n      const haveValuesChanged =\n        values[0] !== lastValueRef.current[0] ||\n        values[1] !== lastValueRef.current[1];\n      if (haveValuesChanged) {\n        const values = preventThumbOverlap(parsedValue, value, thumbIndex);\n        setValue(values as [number, number]);\n        onChange?.(event.nativeEvent, values as [number, number]);\n        onChangeEnd?.(event.nativeEvent, values as [number, number]);\n        lastValueRef.current = values;\n      }\n    };\n\n    const {\n      handleBlur,\n      handleFocus,\n      handleKeydownOnThumb,\n      handlePointerDownOnThumb,\n      handlePointerDownOnTrack,\n      isDragging,\n      isFocusVisible,\n      sliderRef,\n      thumbIndexState,\n      preventThumbOverlap,\n    } = useRangeSliderThumb({\n      decimalPlaces,\n      handleInputChange,\n      inputRefs,\n      marks,\n      min,\n      max,\n      step,\n      value,\n      onChange,\n      onChangeEnd,\n      restrictToMarks,\n      setValue,\n      stepMultiplier,\n    });\n\n    const thumbProps = {\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": clsx(formFieldLabelledBy, ariaLabelledBy),\n      \"aria-valuemax\": max,\n      \"aria-valuemin\": min,\n      \"aria-valuetext\": ariaValueText,\n      accessibleMaxText: accessibleMaxText,\n      accessibleMinText: accessibleMinText,\n      disabled: disabled,\n      format: format,\n      max: max,\n      maxLabel: maxLabel,\n      min: min,\n      minLabel: minLabel,\n      restrictToMarks: restrictToMarks,\n      showTooltip: showTooltip,\n      step: step,\n      stepMultiplier: stepMultiplier,\n      sliderValue: value,\n    };\n\n    return (\n      <SliderTrack\n        disabled={disabled}\n        format={format}\n        handlePointerDown={handlePointerDownOnTrack}\n        isDragging={isDragging}\n        isRange\n        marks={marks}\n        min={min}\n        minLabel={minLabel}\n        max={max}\n        maxLabel={maxLabel}\n        progressPercentageRange={[\n          progressPercentageStart,\n          progressPercentageEnd,\n        ]}\n        ref={ref}\n        sliderRef={sliderRef}\n        {...rest}\n      >\n        <SliderThumb\n          index={0}\n          handleInputChange={(event) => handleInputChange(event, 0)}\n          handlePointerDown={(event) => handlePointerDownOnThumb(event, 0)}\n          handleKeydownOnThumb={(event) => handleKeydownOnThumb(event, 0)}\n          offsetPercentage={`${calculatePercentage(value[0], max, min)}%`}\n          trackDragging={isDragging && thumbIndexState === 0}\n          isFocusVisible={isFocusVisible && thumbIndexState === 0}\n          inputRef={inputRefs[0]}\n          onFocus={() => handleFocus(0)}\n          onBlur={() => handleBlur(0)}\n          {...thumbProps}\n        />\n        <SliderThumb\n          index={1}\n          handleInputChange={(event) => handleInputChange(event, 1)}\n          handlePointerDown={(event) => handlePointerDownOnThumb(event, 1)}\n          handleKeydownOnThumb={(event) => handleKeydownOnThumb(event, 1)}\n          offsetPercentage={`${calculatePercentage(value[1], max, min)}%`}\n          trackDragging={isDragging && thumbIndexState === 1}\n          isFocusVisible={isFocusVisible && thumbIndexState === 1}\n          inputRef={inputRefs[1]}\n          onFocus={() => handleFocus(1)}\n          onBlur={() => handleBlur(1)}\n          {...thumbProps}\n        />\n      </SliderTrack>\n    );\n  },\n);\n"],"names":["forwardRef","RangeSlider","useControlled","useRef","useFormFieldProps","clampRange","calculatePercentage","toFloat","values","useRangeSliderThumb","clsx","jsxs","SliderTrack","jsx","SliderThumb"],"mappings":"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"}
+{"version":3,"file":"RangeSlider.js","sources":["../src/slider/RangeSlider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  forwardRef,\n  type HTMLAttributes,\n  useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useControlled } from \"../utils\";\nimport { SliderThumb } from \"./internal/SliderThumb\";\nimport { SliderTrack } from \"./internal/SliderTrack\";\nimport { useRangeSliderThumb } from \"./internal/useRangeSliderThumb\";\nimport { calculatePercentage, clampRange, toFloat } from \"./internal/utils\";\n\nexport interface RangeSliderProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  /**\n   * Accessible text to announce maximum value label.\n   */\n  accessibleMaxText?: string;\n  /**\n   * Accessible text to announce minimum value label.\n   */\n  accessibleMinText?: string;\n  /**\n   * When minimum and maximum labels are defined, ensure\n   * they are confined within the boundary of the slider.\n   */\n  constrainLabelPosition?: boolean;\n  /**\n   * The number of allowed decimal places\n   * @default 2\n   */\n  decimalPlaces?: number;\n  /**\n   * The default value. Use when the component is not controlled.\n   * @default [min, min + (max - min) / 2]\n   */\n  defaultValue?: [number, number];\n  /**\n   * Disable the slider.\n   */\n  disabled?: boolean;\n  /**\n   * Show visual ticks above the marks.\n   */\n  showTicks?: boolean;\n  /**\n   * A callback to format the display value in the tooltip, min and max labels\n   * and the `aria-valuetext` attribute.\n   */\n  format?: (value: number) => string | number;\n  /**\n   * Marks that are displayed under the track.\n   */\n  marks?: { label: string; value: number }[];\n  /**\n   * Maximum slider value.\n   * @default 10\n   */\n  max?: number;\n  /**\n   * Minimum slider value.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * Label for maximum value.\n   */\n  maxLabel?: string;\n  /**\n   * Label for minimum value.\n   */\n  minLabel?: string;\n  /**\n   * The name applied to the start value input.\n   */\n  startName?: string;\n  /**\n   * The name applied to the end value input.\n   */\n  endName?: string;\n  /**\n   * Callback called when slider value is changed.\n   * It provides a generic event and the current value of the slider.\n   */\n  onChange?: (event: Event, value: [number, number]) => void;\n  /**\n   * Callback called when the slider is stopped from being dragged or\n   * its value is changed from the keyboard. It provides a generic\n   * event and the current value of the slider.\n   */\n  onChangeEnd?: (event: Event, value: [number, number]) => void;\n  /**\n   * Restrict slider value to marks only. The step will be ignored.\n   */\n  restrictToMarks?: boolean;\n  /**\n   * Show the slider value in a tooltip when the thumb is hovered.\n   * @default true\n   */\n  showTooltip?: boolean;\n  /**\n   * Minimum interval the slider thumb can move.\n   * @default 1\n   */\n  step?: number;\n  /**\n   * Maximum interval the slider thumb can move when using PageUp and PageDown keys.\n   * @default 2\n   */\n  stepMultiplier?: number;\n  /**\n   * Value of the slider, to be used when in a controlled state.\n   */\n  value?: [number, number];\n}\n\nexport const RangeSlider = forwardRef<HTMLDivElement, RangeSliderProps>(\n  function RangeSlider(\n    {\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-valuetext\": ariaValueText,\n      accessibleMaxText,\n      accessibleMinText,\n      decimalPlaces = 2,\n      disabled: disabledProp = false,\n      format,\n      marks,\n      max = 100,\n      min = 0,\n      endName,\n      maxLabel,\n      minLabel,\n      startName,\n      onChange,\n      onChangeEnd,\n      restrictToMarks = false,\n      showTooltip = true,\n      step = 1,\n      stepMultiplier = 2,\n      value: valueProp,\n      defaultValue = [min, min + (max - min) / 2],\n      ...rest\n    },\n    ref,\n  ) {\n    const [valueState, setValue] = useControlled({\n      controlled: valueProp,\n      default: defaultValue,\n      name: \"RangeSlider\",\n      state: \"value\",\n    });\n    const lastValueRef = useRef<[number, number]>(valueState);\n\n    const {\n      a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n      disabled: formFieldDisabled,\n    } = useFormFieldProps();\n\n    const disabled = formFieldDisabled || disabledProp;\n    const inputRefs = [\n      useRef<HTMLInputElement>(null),\n      useRef<HTMLInputElement>(null),\n    ];\n    const value: [number, number] = clampRange(\n      valueState,\n      max,\n      min,\n      step,\n      decimalPlaces,\n      marks,\n      restrictToMarks,\n    );\n    const progressPercentageStart = calculatePercentage(value[0], max, min);\n    const progressPercentageEnd = calculatePercentage(value[1], max, min);\n\n    const handleInputChange = (\n      event: ChangeEvent<HTMLInputElement>,\n      thumbIndex: number,\n    ) => {\n      const parsedValue = toFloat(event.target.value);\n      const values = preventThumbOverlap(parsedValue, value, thumbIndex);\n      const haveValuesChanged =\n        values[0] !== lastValueRef.current[0] ||\n        values[1] !== lastValueRef.current[1];\n      if (haveValuesChanged) {\n        const values = preventThumbOverlap(parsedValue, value, thumbIndex);\n        setValue(values as [number, number]);\n        onChange?.(event.nativeEvent, values as [number, number]);\n        onChangeEnd?.(event.nativeEvent, values as [number, number]);\n        lastValueRef.current = values;\n      }\n    };\n\n    const {\n      handleBlur,\n      handleFocus,\n      handleKeydownOnThumb,\n      handlePointerDownOnThumb,\n      handlePointerDownOnTrack,\n      isDragging,\n      isFocusVisible,\n      sliderRef,\n      thumbIndexState,\n      preventThumbOverlap,\n    } = useRangeSliderThumb({\n      decimalPlaces,\n      handleInputChange,\n      inputRefs,\n      marks,\n      min,\n      max,\n      step,\n      value,\n      onChange,\n      onChangeEnd,\n      restrictToMarks,\n      setValue,\n      stepMultiplier,\n    });\n\n    const thumbProps = {\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": clsx(formFieldLabelledBy, ariaLabelledBy),\n      \"aria-valuemax\": max,\n      \"aria-valuemin\": min,\n      \"aria-valuetext\": ariaValueText,\n      accessibleMaxText: accessibleMaxText,\n      accessibleMinText: accessibleMinText,\n      disabled: disabled,\n      format: format,\n      max: max,\n      maxLabel: maxLabel,\n      min: min,\n      minLabel: minLabel,\n      restrictToMarks: restrictToMarks,\n      showTooltip: showTooltip,\n      step: step,\n      stepMultiplier: stepMultiplier,\n      sliderValue: value,\n    };\n\n    return (\n      <SliderTrack\n        disabled={disabled}\n        format={format}\n        handlePointerDown={handlePointerDownOnTrack}\n        isDragging={isDragging}\n        isRange\n        marks={marks}\n        min={min}\n        minLabel={minLabel}\n        max={max}\n        maxLabel={maxLabel}\n        progressPercentageRange={[\n          progressPercentageStart,\n          progressPercentageEnd,\n        ]}\n        ref={ref}\n        sliderRef={sliderRef}\n        {...rest}\n      >\n        <SliderThumb\n          index={0}\n          handleInputChange={(event) => handleInputChange(event, 0)}\n          handlePointerDown={(event) => handlePointerDownOnThumb(event, 0)}\n          handleKeydownOnThumb={(event) => handleKeydownOnThumb(event, 0)}\n          offsetPercentage={`${calculatePercentage(value[0], max, min)}%`}\n          trackDragging={isDragging && thumbIndexState === 0}\n          isFocusVisible={isFocusVisible && thumbIndexState === 0}\n          inputRef={inputRefs[0]}\n          onFocus={() => handleFocus(0)}\n          onBlur={() => handleBlur(0)}\n          {...thumbProps}\n          name={startName}\n        />\n        <SliderThumb\n          index={1}\n          handleInputChange={(event) => handleInputChange(event, 1)}\n          handlePointerDown={(event) => handlePointerDownOnThumb(event, 1)}\n          handleKeydownOnThumb={(event) => handleKeydownOnThumb(event, 1)}\n          offsetPercentage={`${calculatePercentage(value[1], max, min)}%`}\n          trackDragging={isDragging && thumbIndexState === 1}\n          isFocusVisible={isFocusVisible && thumbIndexState === 1}\n          inputRef={inputRefs[1]}\n          onFocus={() => handleFocus(1)}\n          onBlur={() => handleBlur(1)}\n          {...thumbProps}\n          name={endName}\n        />\n      </SliderTrack>\n    );\n  },\n);\n"],"names":["forwardRef","RangeSlider","useControlled","useRef","useFormFieldProps","clampRange","calculatePercentage","toFloat","values","useRangeSliderThumb","clsx","jsxs","SliderTrack","jsx","SliderThumb"],"mappings":"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"}

package/dist-cjs/slider/Slider.js

@@ -29,6 +29,7 @@ const Slider = React.forwardRef(function Slider2({
   minLabel,
   max = 100,
   maxLabel,
+  name,
   onChange,
   onChangeEnd,
   restrictToMarks = false,
@@ -134,6 +135,7 @@ const Slider = React.forwardRef(function Slider2({
           minLabel,
           max,
           maxLabel,
+          name,
           offsetPercentage: `${progressPercentage}%`,
           restrictToMarks,
           sliderValue: value,

package/dist-cjs/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../src/slider/Slider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  forwardRef,\n  type HTMLAttributes,\n  useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useControlled } from \"../utils\";\nimport { SliderThumb } from \"./internal/SliderThumb\";\nimport { SliderTrack } from \"./internal/SliderTrack\";\nimport { useSliderThumb } from \"./internal/useSliderThumb\";\nimport { calculatePercentage, clamp, toFloat } from \"./internal/utils\";\n\nexport interface SliderProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  /**\n   * Accessible text to announce maximum value label.\n   */\n  accessibleMaxText?: string;\n  /**\n   * Accessible text to announce minimum value label.\n   */\n  accessibleMinText?: string;\n  /**\n   * When minimum and maximum labels are defined, ensure\n   * they are confined within the boundary of the slider.\n   * @default false\n   */\n  constrainLabelPosition?: boolean;\n  /**\n   * The number of allowed decimal places\n   * @default 2\n   */\n  decimalPlaces?: number;\n  /**\n   * The default value. Use when the component is not controlled.\n   * @default min + (max - min) / 2,\n   */\n  defaultValue?: number;\n  /**\n   * Disable the slider.\n   */\n  disabled?: boolean;\n  /**\n   * A callback to format the display value in the tooltip, min and max labels\n   * and the `aria-valuetext` attribute.\n   */\n  format?: (value: number) => string | number;\n  /**\n   * Marks that are displayed under the track.\n   */\n  marks?: { label: string; value: number }[];\n  /**\n   * Maximum slider value.\n   * @default 10\n   */\n  max?: number;\n  /**\n   * Minimum slider value.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * Label for maximum value.\n   */\n  maxLabel?: string;\n  /**\n   * Label for the minimum value.\n   */\n  minLabel?: string;\n  /**\n   * Callback called when slider value is changed.\n   * It provides a generic event and the current value of the slider.\n   */\n  onChange?: (event: Event, value: number) => void;\n  /**\n   * Callback called when the slider is stopped from being dragged or\n   * its value is changed from the keyboard. It provides a generic\n   * event and the current value of the slider.\n   */\n  onChangeEnd?: (event: Event, value: number) => void;\n  /**\n   * Restrict slider value to marks only. The step will be ignored.\n   */\n  restrictToMarks?: boolean;\n  /**\n   * Show visual ticks above the marks.\n   */\n  showTicks?: boolean;\n  /**\n   * Show the slider value in a tooltip when the thumb is hovered.\n   * @default true\n   */\n  showTooltip?: boolean;\n  /**\n   * Minimum interval the slider thumb can move.\n   * @default 1\n   */\n  step?: number;\n  /**\n   * Maximum interval the slider thumb can move when using PageUp and PageDown keys.\n   * @default 2\n   */\n  stepMultiplier?: number;\n  /**\n   * Value of the slider, to be used when in a controlled state.\n   */\n  value?: number;\n}\n\nexport const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(\n  {\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-valuetext\": ariaValueText,\n    accessibleMaxText,\n    accessibleMinText,\n    decimalPlaces = 2,\n    disabled: disabledProp = false,\n    format,\n    marks,\n    min = 0,\n    minLabel,\n    max = 100,\n    maxLabel,\n    onChange,\n    onChangeEnd,\n    restrictToMarks = false,\n    showTooltip = true,\n    step = 1,\n    stepMultiplier = 2,\n    value: valueProp,\n    defaultValue = min + (max - min) / 2,\n    ...rest\n  },\n  ref,\n) {\n  const [valueState, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Slider\",\n    state: \"value\",\n  });\n  const {\n    a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n    disabled: formFieldDisabled,\n  } = useFormFieldProps();\n\n  const disabled = formFieldDisabled || disabledProp;\n  const inputRef = useRef<HTMLInputElement>(null);\n  const value = clamp(\n    valueState,\n    max,\n    min,\n    step,\n    decimalPlaces,\n    marks,\n    restrictToMarks,\n  );\n  const progressPercentage = calculatePercentage(toFloat(value), max, min);\n  const lastValueRef = useRef<number>(value);\n\n  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const parsedValue = toFloat(event.target.value);\n    if (parsedValue !== lastValueRef.current) {\n      setValue(parsedValue);\n      onChange?.(event.nativeEvent, parsedValue);\n      onChangeEnd?.(event.nativeEvent, parsedValue);\n      lastValueRef.current = parsedValue;\n    }\n  };\n\n  const {\n    handleBlur,\n    handleFocus,\n    handleKeydownOnThumb,\n    handlePointerDownOnThumb,\n    handlePointerDownOnTrack,\n    isDragging,\n    isFocusVisible,\n    sliderRef,\n  } = useSliderThumb({\n    decimalPlaces,\n    handleInputChange,\n    inputRef,\n    marks,\n    min,\n    max,\n    step,\n    value,\n    onChange,\n    onChangeEnd,\n    restrictToMarks,\n    setValue,\n    stepMultiplier,\n  });\n\n  return (\n    <SliderTrack\n      disabled={disabled}\n      format={format}\n      handlePointerDown={handlePointerDownOnTrack}\n      isDragging={isDragging}\n      min={min}\n      minLabel={minLabel}\n      max={max}\n      maxLabel={maxLabel}\n      marks={marks}\n      progressPercentage={progressPercentage}\n      ref={ref}\n      sliderRef={sliderRef}\n      {...rest}\n    >\n      <SliderThumb\n        aria-label={ariaLabel}\n        aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n        aria-valuemax={max}\n        aria-valuemin={min}\n        aria-valuetext={ariaValueText}\n        accessibleMaxText={accessibleMaxText}\n        accessibleMinText={accessibleMinText}\n        disabled={disabled}\n        format={format}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n        handleInputChange={handleInputChange}\n        handlePointerDown={handlePointerDownOnThumb}\n        handleKeydownOnThumb={handleKeydownOnThumb}\n        inputRef={inputRef}\n        isFocusVisible={isFocusVisible}\n        min={min}\n        minLabel={minLabel}\n        max={max}\n        maxLabel={maxLabel}\n        offsetPercentage={`${progressPercentage}%`}\n        restrictToMarks={restrictToMarks}\n        sliderValue={value}\n        showTooltip={showTooltip}\n        step={step}\n        stepMultiplier={stepMultiplier}\n        trackDragging={isDragging}\n      />\n    </SliderTrack>\n  );\n});\n"],"names":["forwardRef","Slider","useControlled","useFormFieldProps","useRef","clamp","calculatePercentage","toFloat","useSliderThumb","jsx","SliderTrack","SliderThumb","clsx"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../src/slider/Slider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  forwardRef,\n  type HTMLAttributes,\n  useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useControlled } from \"../utils\";\nimport { SliderThumb } from \"./internal/SliderThumb\";\nimport { SliderTrack } from \"./internal/SliderTrack\";\nimport { useSliderThumb } from \"./internal/useSliderThumb\";\nimport { calculatePercentage, clamp, toFloat } from \"./internal/utils\";\n\nexport interface SliderProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  /**\n   * Accessible text to announce maximum value label.\n   */\n  accessibleMaxText?: string;\n  /**\n   * Accessible text to announce minimum value label.\n   */\n  accessibleMinText?: string;\n  /**\n   * When minimum and maximum labels are defined, ensure\n   * they are confined within the boundary of the slider.\n   * @default false\n   */\n  constrainLabelPosition?: boolean;\n  /**\n   * The number of allowed decimal places\n   * @default 2\n   */\n  decimalPlaces?: number;\n  /**\n   * The default value. Use when the component is not controlled.\n   * @default min + (max - min) / 2,\n   */\n  defaultValue?: number;\n  /**\n   * Disable the slider.\n   */\n  disabled?: boolean;\n  /**\n   * A callback to format the display value in the tooltip, min and max labels\n   * and the `aria-valuetext` attribute.\n   */\n  format?: (value: number) => string | number;\n  /**\n   * Marks that are displayed under the track.\n   */\n  marks?: { label: string; value: number }[];\n  /**\n   * Maximum slider value.\n   * @default 10\n   */\n  max?: number;\n  /**\n   * Minimum slider value.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * Label for maximum value.\n   */\n  maxLabel?: string;\n  /**\n   * Label for the minimum value.\n   */\n  minLabel?: string;\n  /**\n   * The name applied to the input.\n   */\n  name?: string;\n  /**\n   * Callback called when slider value is changed.\n   * It provides a generic event and the current value of the slider.\n   */\n  onChange?: (event: Event, value: number) => void;\n  /**\n   * Callback called when the slider is stopped from being dragged or\n   * its value is changed from the keyboard. It provides a generic\n   * event and the current value of the slider.\n   */\n  onChangeEnd?: (event: Event, value: number) => void;\n  /**\n   * Restrict slider value to marks only. The step will be ignored.\n   */\n  restrictToMarks?: boolean;\n  /**\n   * Show visual ticks above the marks.\n   */\n  showTicks?: boolean;\n  /**\n   * Show the slider value in a tooltip when the thumb is hovered.\n   * @default true\n   */\n  showTooltip?: boolean;\n  /**\n   * Minimum interval the slider thumb can move.\n   * @default 1\n   */\n  step?: number;\n  /**\n   * Maximum interval the slider thumb can move when using PageUp and PageDown keys.\n   * @default 2\n   */\n  stepMultiplier?: number;\n  /**\n   * Value of the slider, to be used when in a controlled state.\n   */\n  value?: number;\n}\n\nexport const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(\n  {\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-valuetext\": ariaValueText,\n    accessibleMaxText,\n    accessibleMinText,\n    decimalPlaces = 2,\n    disabled: disabledProp = false,\n    format,\n    marks,\n    min = 0,\n    minLabel,\n    max = 100,\n    maxLabel,\n    name,\n    onChange,\n    onChangeEnd,\n    restrictToMarks = false,\n    showTooltip = true,\n    step = 1,\n    stepMultiplier = 2,\n    value: valueProp,\n    defaultValue = min + (max - min) / 2,\n    ...rest\n  },\n  ref,\n) {\n  const [valueState, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Slider\",\n    state: \"value\",\n  });\n  const {\n    a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n    disabled: formFieldDisabled,\n  } = useFormFieldProps();\n\n  const disabled = formFieldDisabled || disabledProp;\n  const inputRef = useRef<HTMLInputElement>(null);\n  const value = clamp(\n    valueState,\n    max,\n    min,\n    step,\n    decimalPlaces,\n    marks,\n    restrictToMarks,\n  );\n  const progressPercentage = calculatePercentage(toFloat(value), max, min);\n  const lastValueRef = useRef<number>(value);\n\n  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const parsedValue = toFloat(event.target.value);\n    if (parsedValue !== lastValueRef.current) {\n      setValue(parsedValue);\n      onChange?.(event.nativeEvent, parsedValue);\n      onChangeEnd?.(event.nativeEvent, parsedValue);\n      lastValueRef.current = parsedValue;\n    }\n  };\n\n  const {\n    handleBlur,\n    handleFocus,\n    handleKeydownOnThumb,\n    handlePointerDownOnThumb,\n    handlePointerDownOnTrack,\n    isDragging,\n    isFocusVisible,\n    sliderRef,\n  } = useSliderThumb({\n    decimalPlaces,\n    handleInputChange,\n    inputRef,\n    marks,\n    min,\n    max,\n    step,\n    value,\n    onChange,\n    onChangeEnd,\n    restrictToMarks,\n    setValue,\n    stepMultiplier,\n  });\n\n  return (\n    <SliderTrack\n      disabled={disabled}\n      format={format}\n      handlePointerDown={handlePointerDownOnTrack}\n      isDragging={isDragging}\n      min={min}\n      minLabel={minLabel}\n      max={max}\n      maxLabel={maxLabel}\n      marks={marks}\n      progressPercentage={progressPercentage}\n      ref={ref}\n      sliderRef={sliderRef}\n      {...rest}\n    >\n      <SliderThumb\n        aria-label={ariaLabel}\n        aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n        aria-valuemax={max}\n        aria-valuemin={min}\n        aria-valuetext={ariaValueText}\n        accessibleMaxText={accessibleMaxText}\n        accessibleMinText={accessibleMinText}\n        disabled={disabled}\n        format={format}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n        handleInputChange={handleInputChange}\n        handlePointerDown={handlePointerDownOnThumb}\n        handleKeydownOnThumb={handleKeydownOnThumb}\n        inputRef={inputRef}\n        isFocusVisible={isFocusVisible}\n        min={min}\n        minLabel={minLabel}\n        max={max}\n        maxLabel={maxLabel}\n        name={name}\n        offsetPercentage={`${progressPercentage}%`}\n        restrictToMarks={restrictToMarks}\n        sliderValue={value}\n        showTooltip={showTooltip}\n        step={step}\n        stepMultiplier={stepMultiplier}\n        trackDragging={isDragging}\n      />\n    </SliderTrack>\n  );\n});\n"],"names":["forwardRef","Slider","useControlled","useFormFieldProps","useRef","clamp","calculatePercentage","toFloat","useSliderThumb","jsx","SliderTrack","SliderThumb","clsx"],"mappings":"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"}

package/dist-cjs/slider/internal/SliderTooltip.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltSliderTooltip {\n  background: var(--salt-container-primary-background);\n  border-color: var(--salt-container-primary-borderColor);\n  border-style: var(--saltTooltip-borderStyle, var(--salt-borderStyle-solid));\n  border-width: var(--saltTooltip-borderWidth, var(--salt-size-fixed-100));\n  border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));\n  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n  bottom: 50%;\n  left: 50%;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  position: absolute;\n  transform: translate(-50%, -50%);\n  text-align: var(--saltTooltip-textAlign, left);\n  user-select: none;\n  visibility: hidden;\n  z-index: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n}\n\n.saltSliderTooltip-visible,\n.saltSliderTooltip:hover {\n  visibility: visible;\n}\n\n.saltSliderTooltip-arrow {\n  fill: var(--salt-container-primary-background);\n  height: var(--salt-size-icon);\n  left: 50%;\n  position: absolute;\n  pointer-events: none;\n  top: 100%;\n  transform: translateX(-50%);\n  stroke: var(--salt-container-primary-borderColor);\n  stroke-width: var(--salt-size-fixed-100);\n  width: var(--salt-size-icon);\n}\n\n.saltSliderTooltip-text {\n  white-space: nowrap;\n}\n";
+var css_248z = ".saltSliderTooltip {\n  background: var(--salt-container-primary-background);\n  border-color: var(--salt-container-bold-borderColor);\n  border-style: var(--saltTooltip-borderStyle, var(--salt-borderStyle-solid));\n  border-width: var(--saltTooltip-borderWidth, var(--salt-size-fixed-100));\n  border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));\n  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n  bottom: 50%;\n  left: 50%;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  position: absolute;\n  transform: translate(-50%, -50%);\n  text-align: var(--saltTooltip-textAlign, left);\n  user-select: none;\n  visibility: hidden;\n  z-index: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n}\n\n.saltSliderTooltip-visible,\n.saltSliderTooltip:hover {\n  visibility: visible;\n}\n\n.saltSliderTooltip-arrow {\n  fill: var(--salt-container-primary-background);\n  height: var(--salt-size-icon);\n  left: 50%;\n  position: absolute;\n  pointer-events: none;\n  top: 100%;\n  transform: translateX(-50%);\n  stroke: var(--salt-container-bold-borderColor);\n  stroke-width: var(--salt-size-fixed-100);\n  width: var(--salt-size-icon);\n}\n\n.saltSliderTooltip-text {\n  white-space: nowrap;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=SliderTooltip.css.js.map

package/dist-cjs/slider/internal/SliderTooltip.js

@@ -54,7 +54,7 @@ const SliderTooltip = ({ value, open }) => {
                 "path",
                 {
                   d: "M0,0 H14 L7,7 Q7,7 7,7 Z",
-                  stroke: "var(--salt-container-primary-borderColor)"
+                  stroke: "var(--salt-container-bold-borderColor)"
                 }
               )
             ]

package/dist-cjs/slider/internal/SliderTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderTooltip.js","sources":["../src/slider/internal/SliderTooltip.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { Text } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport sliderTooltipCss from \"./SliderTooltip.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderTooltip\");\n\ninterface SliderTooltipProps {\n  value: number | string;\n  open?: boolean;\n}\n\nexport const SliderTooltip = ({ value, open }: SliderTooltipProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-slider-tooltip\",\n    css: sliderTooltipCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      aria-hidden\n      className={clsx(withBaseName(), {\n        [withBaseName(\"visible\")]: open,\n      })}\n      data-testid=\"sliderTooltip\"\n    >\n      <svg\n        className={withBaseName(\"arrow\")}\n        aria-hidden=\"true\"\n        viewBox=\"0 1 14 14\"\n      >\n        <path\n          d=\"M0,0 H14 L7,7 Q7,7 7,7 Z\"\n          stroke=\" var(--salt-container-primary-background)\"\n        />\n        <path\n          d=\"M0,0 H14 L7,7 Q7,7 7,7 Z\"\n          stroke=\"var(--salt-container-primary-borderColor)\"\n        />\n      </svg>\n      <Text className={withBaseName(\"text\")}>{value}</Text>\n    </div>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","sliderTooltipCss","jsxs","clsx","jsx","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAO9C,MAAM,aAAA,GAAgB,CAAC,EAAE,KAAA,EAAO,MAAK,KAA0B;AACpE,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,qBAAA;AAAA,IACR,GAAA,EAAKC,eAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG;AAAA,QAC9B,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,OAC5B,CAAA;AAAA,MACD,aAAA,EAAY,eAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,wBAAAD,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAC/B,aAAA,EAAY,MAAA;AAAA,YACZ,OAAA,EAAQ,WAAA;AAAA,YAER,QAAA,EAAA;AAAA,8BAAAE,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CAAA,EAAE,0BAAA;AAAA,kBACF,MAAA,EAAO;AAAA;AAAA,eACT;AAAA,8BACAA,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CAAA,EAAE,0BAAA;AAAA,kBACF,MAAA,EAAO;AAAA;AAAA;AACT;AAAA;AAAA,SACF;AAAA,uCACCC,SAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,MAAM,GAAI,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GAChD;AAEJ;;;;"}
+{"version":3,"file":"SliderTooltip.js","sources":["../src/slider/internal/SliderTooltip.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { Text } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport sliderTooltipCss from \"./SliderTooltip.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderTooltip\");\n\ninterface SliderTooltipProps {\n  value: number | string;\n  open?: boolean;\n}\n\nexport const SliderTooltip = ({ value, open }: SliderTooltipProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-slider-tooltip\",\n    css: sliderTooltipCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      aria-hidden\n      className={clsx(withBaseName(), {\n        [withBaseName(\"visible\")]: open,\n      })}\n      data-testid=\"sliderTooltip\"\n    >\n      <svg\n        className={withBaseName(\"arrow\")}\n        aria-hidden=\"true\"\n        viewBox=\"0 1 14 14\"\n      >\n        <path\n          d=\"M0,0 H14 L7,7 Q7,7 7,7 Z\"\n          stroke=\" var(--salt-container-primary-background)\"\n        />\n        <path\n          d=\"M0,0 H14 L7,7 Q7,7 7,7 Z\"\n          stroke=\"var(--salt-container-bold-borderColor)\"\n        />\n      </svg>\n      <Text className={withBaseName(\"text\")}>{value}</Text>\n    </div>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","sliderTooltipCss","jsxs","clsx","jsx","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAO9C,MAAM,aAAA,GAAgB,CAAC,EAAE,KAAA,EAAO,MAAK,KAA0B;AACpE,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,qBAAA;AAAA,IACR,GAAA,EAAKC,eAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG;AAAA,QAC9B,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,OAC5B,CAAA;AAAA,MACD,aAAA,EAAY,eAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,wBAAAD,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAC/B,aAAA,EAAY,MAAA;AAAA,YACZ,OAAA,EAAQ,WAAA;AAAA,YAER,QAAA,EAAA;AAAA,8BAAAE,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CAAA,EAAE,0BAAA;AAAA,kBACF,MAAA,EAAO;AAAA;AAAA,eACT;AAAA,8BACAA,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CAAA,EAAE,0BAAA;AAAA,kBACF,MAAA,EAAO;AAAA;AAAA;AACT;AAAA;AAAA,SACF;AAAA,uCACCC,SAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,MAAM,GAAI,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GAChD;AAEJ;;;;"}

package/dist-cjs/toast/Toast.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to Toast root element */\n.saltToast {\n  --toast-background: var(--salt-container-primary-background);\n  --toast-borderColor: var(--salt-container-primary-borderColor);\n  --toast-iconColor: var(--salt-content-primary-foreground);\n\n  background: var(--saltToast-background, var(--toast-background));\n  border-color: var(--saltToast-borderColor, var(--toast-borderColor));\n  border-width: var(--saltToast-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--saltToast-borderStyle, var(--salt-borderStyle-solid));\n  border-radius: var(--saltToast-borderRadius, var(--salt-palette-corner, 0));\n\n  box-sizing: border-box;\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  display: flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltToast-padding, var(--salt-spacing-100));\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  margin: 0 var(--salt-spacing-100) var(--salt-spacing-100) var(--salt-spacing-100);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltToast:last-child {\n  margin-bottom: var(--salt-spacing-200);\n}\n\n/* Styles applied to icon */\n.saltToast-iconContainer > .saltIcon {\n  margin-top: calc(var(--salt-spacing-75) + calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2));\n  color: var(--toast-iconColor);\n}\n\n/* Styles applied when state = \"info\" */\n.saltToast-info {\n  --toast-borderColor: var(--salt-status-info-borderColor);\n  --toast-iconColor: var(--salt-status-info-foreground-decorative);\n}\n\n/* Styles applied when state = \"error\" */\n.saltToast-error {\n  --toast-borderColor: var(--salt-status-error-borderColor);\n  --toast-iconColor: var(--salt-status-error-foreground-decorative);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltToast-warning {\n  --toast-borderColor: var(--salt-status-warning-borderColor);\n  --toast-iconColor: var(--salt-status-warning-foreground-decorative);\n}\n\n/* Styles applied when state = \"success\" */\n.saltToast-success {\n  --toast-borderColor: var(--salt-status-success-borderColor);\n  --toast-iconColor: var(--salt-status-success-foreground-decorative);\n}\n";
+var css_248z = "/* Styles applied to Toast root element */\n.saltToast {\n  --toast-background: var(--salt-container-primary-background);\n  --toast-borderColor: var(--salt-container-bold-borderColor);\n  --toast-iconColor: var(--salt-content-primary-foreground);\n\n  background: var(--saltToast-background, var(--toast-background));\n  border-color: var(--saltToast-borderColor, var(--toast-borderColor));\n  border-width: var(--saltToast-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--saltToast-borderStyle, var(--salt-borderStyle-solid));\n  border-radius: var(--saltToast-borderRadius, var(--salt-palette-corner, 0));\n\n  box-sizing: border-box;\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  display: flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltToast-padding, var(--salt-spacing-100));\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  margin: 0 var(--salt-spacing-100) var(--salt-spacing-100) var(--salt-spacing-100);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltToast:last-child {\n  margin-bottom: var(--salt-spacing-200);\n}\n\n/* Styles applied to icon */\n.saltToast-iconContainer > .saltIcon {\n  margin-top: calc(var(--salt-spacing-75) + calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2));\n  color: var(--toast-iconColor);\n}\n\n/* Styles applied when state = \"info\" */\n.saltToast-info {\n  --toast-borderColor: var(--salt-status-info-borderColor);\n  --toast-iconColor: var(--salt-status-info-foreground-decorative);\n}\n\n/* Styles applied when state = \"error\" */\n.saltToast-error {\n  --toast-borderColor: var(--salt-status-error-borderColor);\n  --toast-iconColor: var(--salt-status-error-foreground-decorative);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltToast-warning {\n  --toast-borderColor: var(--salt-status-warning-borderColor);\n  --toast-iconColor: var(--salt-status-warning-foreground-decorative);\n}\n\n/* Styles applied when state = \"success\" */\n.saltToast-success {\n  --toast-borderColor: var(--salt-status-success-borderColor);\n  --toast-iconColor: var(--salt-status-success-foreground-decorative);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Toast.css.js.map

package/dist-cjs/toggle-button-group/ToggleButtonGroup.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltToggleButtonGroup {\n  --toggleButtonGroup-borderWidth: var(--salt-size-fixed-100);\n\n  display: flex;\n  background: var(--salt-container-primary-background);\n  border: var(--toggleButtonGroup-borderWidth) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  width: fit-content;\n  gap: var(--salt-spacing-50);\n  padding: calc(var(--salt-spacing-50) - var(--toggleButtonGroup-borderWidth));\n  flex-direction: row;\n}\n\n.saltToggleButtonGroup-disabled {\n  background: var(--salt-container-primary-background-disabled);\n  border-color: var(--salt-container-primary-borderColor-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltToggleButtonGroup-readOnly {\n  background: var(--salt-container-primary-background);\n  border-color: var(--salt-container-primary-borderColor);\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltToggleButtonGroup .saltToggleButton {\n  border-radius: var(--salt-palette-corner-weaker, 0);\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton {\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n\n.saltToggleButtonGroup-vertical {\n  flex-direction: column;\n}\n\n.saltToggleButtonGroup-vertical .saltToggleButton {\n  justify-content: start;\n}\n";
+var css_248z = ".saltToggleButtonGroup {\n  --toggleButtonGroup-borderWidth: var(--salt-size-fixed-100);\n\n  display: flex;\n  background: var(--salt-container-primary-background);\n  border: var(--toggleButtonGroup-borderWidth) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  width: fit-content;\n  gap: var(--salt-spacing-50);\n  padding: calc(var(--salt-spacing-50) - var(--toggleButtonGroup-borderWidth));\n  flex-direction: row;\n}\n\n.saltToggleButtonGroup-disabled {\n  background: var(--salt-container-primary-background-disabled);\n  border-color: var(--salt-container-bold-borderColor-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltToggleButtonGroup-readOnly {\n  background: var(--salt-container-primary-background);\n  border-color: var(--salt-container-bold-borderColor);\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltToggleButtonGroup .saltToggleButton {\n  border-radius: var(--salt-palette-corner-weaker, 0);\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton {\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n\n.saltToggleButtonGroup-vertical {\n  flex-direction: column;\n}\n\n.saltToggleButtonGroup-vertical .saltToggleButton {\n  justify-content: start;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=ToggleButtonGroup.css.js.map

package/dist-cjs/toggletip/ToggletipPanel.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltToggletipPanel {\n  --toggletip-background: var(--salt-container-primary-background);\n  --toggletip-borderColor: var(--salt-container-primary-borderColor);\n\n  box-sizing: border-box;\n  padding: var(--salt-spacing-100);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--toggletip-borderColor);\n  border-radius: var(--salt-palette-corner-weak);\n\n  background: var(--toggletip-background);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n\n  color: var(--salt-content-primary-foreground);\n  z-index: var(--salt-zIndex-flyover);\n\n  max-width: 45ch;\n  max-height: 100vh;\n}\n\n.saltToggletipPanel-content {\n  max-height: 100%;\n  overflow-y: auto;\n}\n\n.saltToggletipPanel-content:focus-visible {\n  outline-offset: var(--salt-spacing-fixed-100);\n}\n";
+var css_248z = ".saltToggletipPanel {\n  --toggletip-background: var(--salt-container-primary-background);\n  --toggletip-borderColor: var(--salt-container-bold-borderColor);\n\n  box-sizing: border-box;\n  padding: var(--salt-spacing-100);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--toggletip-borderColor);\n  border-radius: var(--salt-palette-corner-weak);\n\n  background: var(--toggletip-background);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n\n  color: var(--salt-content-primary-foreground);\n  z-index: var(--salt-zIndex-flyover);\n\n  max-width: 45ch;\n  max-height: 100vh;\n}\n\n.saltToggletipPanel-content {\n  max-height: 100%;\n  overflow-y: auto;\n}\n\n.saltToggletipPanel-content:focus-visible {\n  outline-offset: var(--salt-spacing-fixed-100);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=ToggletipPanel.css.js.map

package/dist-cjs/toolbar/Toolbar.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltToolbar {\n  box-sizing: border-box;\n  inline-size: 100%;\n  min-width: 0;\n  position: relative;\n}\n\n.saltToolbar-layout {\n  align-items: center;\n  --saltToolbar-band-gap: var(--salt-spacing-100);\n}\n\n.saltToolbar-layout:not([data-centered]) {\n  display: flex;\n  column-gap: var(--saltToolbar-band-gap);\n}\n\n.saltToolbar-layout[data-centered] {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n}\n\n.saltToolbar-band {\n  display: flex;\n  align-items: center;\n  gap: var(--saltToolbar-band-gap);\n  min-width: 0;\n}\n\n.saltToolbar-layout:not([data-centered]) > .saltToolbar-band[data-band-position=\"end\"] {\n  justify-content: flex-end;\n  margin-inline-start: auto;\n}\n\n.saltToolbar-layout[data-centered] > .saltToolbar-band[data-band-position=\"start\"] {\n  grid-column: 1;\n}\n\n.saltToolbar-layout[data-centered] > .saltToolbar-band[data-band-position=\"center\"] {\n  grid-column: 2;\n  justify-content: center;\n}\n\n.saltToolbar-layout[data-centered] > .saltToolbar-band[data-band-position=\"end\"] {\n  grid-column: 3;\n  justify-content: flex-end;\n}\n\n.saltToolbar-fallback {\n  display: flex;\n  align-items: center;\n  gap: var(--salt-spacing-100);\n}\n\n.saltToolbar-layout > * {\n  min-width: 0;\n}\n\n.saltToolbar-primary {\n  --toolbar-background: var(--salt-container-primary-background);\n  --toolbar-borderColor: var(--salt-container-primary-borderColor);\n}\n\n.saltToolbar-secondary {\n  --toolbar-background: var(--salt-container-secondary-background);\n  --toolbar-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n.saltToolbar-tertiary {\n  --toolbar-background: var(--salt-container-tertiary-background);\n  --toolbar-borderColor: var(--salt-container-tertiary-borderColor);\n}\n\n.saltToolbar-bordered {\n  background: var(--saltToolbar-background, var(--toolbar-background));\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--saltToolbar-borderColor, var(--toolbar-borderColor));\n  border-radius: var(--salt-palette-corner, 0);\n  padding: var(--salt-spacing-100);\n}\n\n.saltToolbar-transparent {\n  background: transparent;\n  border: none;\n  padding: 0;\n}\n\n.saltToolbar-measurements {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: absolute;\n  visibility: hidden;\n  pointer-events: none;\n  inset: 0 auto auto 0;\n  block-size: 0;\n  overflow: hidden;\n}\n\n.saltToolbar-measureTrigger {\n  white-space: nowrap;\n}\n";
+var css_248z = ".saltToolbar {\n  box-sizing: border-box;\n  inline-size: 100%;\n  min-width: 0;\n  position: relative;\n}\n\n.saltToolbar-layout {\n  align-items: center;\n  --saltToolbar-band-gap: var(--salt-spacing-100);\n}\n\n.saltToolbar-layout:not([data-centered]) {\n  display: flex;\n  column-gap: var(--saltToolbar-band-gap);\n}\n\n.saltToolbar-layout[data-centered] {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n}\n\n.saltToolbar-band {\n  display: flex;\n  align-items: center;\n  gap: var(--saltToolbar-band-gap);\n  min-width: 0;\n}\n\n.saltToolbar-layout:not([data-centered]) > .saltToolbar-band[data-band-position=\"end\"] {\n  justify-content: flex-end;\n  margin-inline-start: auto;\n}\n\n.saltToolbar-layout[data-centered] > .saltToolbar-band[data-band-position=\"start\"] {\n  grid-column: 1;\n}\n\n.saltToolbar-layout[data-centered] > .saltToolbar-band[data-band-position=\"center\"] {\n  grid-column: 2;\n  justify-content: center;\n}\n\n.saltToolbar-layout[data-centered] > .saltToolbar-band[data-band-position=\"end\"] {\n  grid-column: 3;\n  justify-content: flex-end;\n}\n\n.saltToolbar-fallback {\n  display: flex;\n  align-items: center;\n  gap: var(--salt-spacing-100);\n}\n\n.saltToolbar-layout > * {\n  min-width: 0;\n}\n\n.saltToolbar-primary {\n  --toolbar-background: var(--salt-container-primary-background);\n  --toolbar-borderColor: var(--salt-container-bold-borderColor);\n}\n\n.saltToolbar-secondary {\n  --toolbar-background: var(--salt-container-secondary-background);\n  --toolbar-borderColor: var(--salt-container-bold-borderColor);\n}\n\n.saltToolbar-tertiary {\n  --toolbar-background: var(--salt-container-tertiary-background);\n  --toolbar-borderColor: var(--salt-container-bold-borderColor);\n}\n\n.saltToolbar-bordered {\n  background: var(--saltToolbar-background, var(--toolbar-background));\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--saltToolbar-borderColor, var(--toolbar-borderColor));\n  border-radius: var(--salt-palette-corner, 0);\n  padding: var(--salt-spacing-100);\n}\n\n.saltToolbar-transparent {\n  background: transparent;\n  border: none;\n  padding: 0;\n}\n\n.saltToolbar-measurements {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: absolute;\n  visibility: hidden;\n  pointer-events: none;\n  inset: 0 auto auto 0;\n  block-size: 0;\n  overflow: hidden;\n}\n\n.saltToolbar-measureTrigger {\n  white-space: nowrap;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Toolbar.css.js.map

package/dist-cjs/tooltip/Tooltip.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to root component */\n.saltTooltip {\n  --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background));\n  --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n  /* apply icon margin based on the text line height so it's aligned on all densities */\n  --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2);\n  --tooltip-status-borderColor: var(--salt-container-primary-borderColor);\n  /* Single line height should be size-base */\n  --tooltip-borderWidth: var(--salt-size-fixed-100);\n  --tooltip-padding: calc(var(--salt-spacing-75) - var(--tooltip-borderWidth)) var(--salt-spacing-100);\n}\n\n.saltTooltip {\n  box-sizing: border-box;\n  background: var(--tooltip-background);\n  border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor));\n  border-style: var(--saltTooltip-borderStyle, var(--salt-borderStyle-solid));\n  border-width: var(--saltTooltip-borderWidth, var(--tooltip-borderWidth));\n  border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));\n  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n  color: var(--saltTooltip-text-color, var(--salt-content-primary-foreground));\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltTooltip-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--saltTooltip-fontWeight, var(--salt-text-fontWeight));\n  line-height: var(--saltTooltip-lineHeight, var(--salt-text-lineHeight));\n  max-width: var(--saltTooltip-maxWidth, 60ch);\n  padding: var(--saltTooltip-padding, var(--tooltip-padding));\n  position: relative;\n  text-align: var(--saltTooltip-textAlign, left);\n  z-index: var(--tooltip-zIndex);\n}\n\n/* Styles applied to container */\n.saltTooltip-container {\n  display: flex;\n  align-items: baseline;\n  position: relative;\n}\n\n/* Styles applied to content */\n.saltTooltip-content {\n  overflow: hidden;\n}\n\n/* Styles applied to status indicator */\n.saltTooltip-icon {\n  --saltIcon-margin: var(--tooltip-icon-marginTop) var(--salt-spacing-75) 0 0;\n  vertical-align: top;\n  align-self: flex-start;\n}\n\n/* Styles applied when status = \"info\" */\n.saltTooltip-info {\n  --tooltip-status-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when status = \"error\" */\n.saltTooltip-error {\n  --tooltip-status-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when status = \"warning\" */\n.saltTooltip-warning {\n  --tooltip-status-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when status = \"success\" */\n.saltTooltip-success {\n  --tooltip-status-borderColor: var(--salt-status-success-borderColor);\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltTooltip {\n  --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background));\n  --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n  /* apply icon margin based on the text line height so it's aligned on all densities */\n  --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2);\n  --tooltip-status-borderColor: var(--salt-container-bold-borderColor);\n  /* Single line height should be size-base */\n  --tooltip-borderWidth: var(--salt-size-fixed-100);\n  --tooltip-padding: calc(var(--salt-spacing-75) - var(--tooltip-borderWidth)) var(--salt-spacing-100);\n}\n\n.saltTooltip {\n  box-sizing: border-box;\n  background: var(--tooltip-background);\n  border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor));\n  border-style: var(--saltTooltip-borderStyle, var(--salt-borderStyle-solid));\n  border-width: var(--saltTooltip-borderWidth, var(--tooltip-borderWidth));\n  border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));\n  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n  color: var(--saltTooltip-text-color, var(--salt-content-primary-foreground));\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltTooltip-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--saltTooltip-fontWeight, var(--salt-text-fontWeight));\n  line-height: var(--saltTooltip-lineHeight, var(--salt-text-lineHeight));\n  max-width: var(--saltTooltip-maxWidth, 60ch);\n  padding: var(--saltTooltip-padding, var(--tooltip-padding));\n  position: relative;\n  text-align: var(--saltTooltip-textAlign, left);\n  z-index: var(--tooltip-zIndex);\n}\n\n/* Styles applied to container */\n.saltTooltip-container {\n  display: flex;\n  align-items: baseline;\n  position: relative;\n}\n\n/* Styles applied to content */\n.saltTooltip-content {\n  overflow: hidden;\n}\n\n/* Styles applied to status indicator */\n.saltTooltip-icon {\n  --saltIcon-margin: var(--tooltip-icon-marginTop) var(--salt-spacing-75) 0 0;\n  vertical-align: top;\n  align-self: flex-start;\n}\n\n/* Styles applied when status = \"info\" */\n.saltTooltip-info {\n  --tooltip-status-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when status = \"error\" */\n.saltTooltip-error {\n  --tooltip-status-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when status = \"warning\" */\n.saltTooltip-warning {\n  --tooltip-status-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when status = \"success\" */\n.saltTooltip-success {\n  --tooltip-status-borderColor: var(--salt-status-success-borderColor);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Tooltip.css.js.map

package/dist-cjs/viewport/ViewportProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewportProvider.js","sources":["../src/viewport/ViewportProvider.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext, useState } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils/useIsomorphicLayoutEffect\";\n\nconst ViewportContext = createContext<number | null>(null);\n\ntype ViewportProviderProps = {\n  children?: ReactNode;\n};\n\nconst ViewportProvider = ({ children }: ViewportProviderProps) => {\n  // Get value directly from the ViewportContext so we can detect if the value is null (no inherited ViewportProvider)\n  const existingViewport = useContext(ViewportContext);\n  const [viewport, setViewport] = useState(existingViewport);\n\n  const noExistingViewport = existingViewport === null;\n  const viewportValue = existingViewport || viewport || 0;\n\n  useIsomorphicLayoutEffect(() => {\n    let observer: ResizeObserver | null = null;\n\n    if (noExistingViewport) {\n      observer = new ResizeObserver(\n        (observerEntries: ResizeObserverEntry[]) => {\n          setViewport(observerEntries[0].contentRect.width);\n        },\n      );\n\n      observer.observe(document.body);\n      setViewport(document.body.getBoundingClientRect().width);\n    }\n\n    return () => {\n      if (observer) {\n        observer.disconnect();\n      }\n    };\n  }, [noExistingViewport]);\n\n  return (\n    <ViewportContext.Provider value={viewportValue}>\n      {children}\n    </ViewportContext.Provider>\n  );\n};\n\nconst useViewport = (): number => {\n  const value = useContext(ViewportContext);\n  return value === null ? 0 : value;\n};\n\nexport { ViewportProvider, ViewportContext, useViewport };\n"],"names":["createContext","useContext","useState","useIsomorphicLayoutEffect"],"mappings":";;;;;;AAGA,MAAM,eAAA,GAAkBA,oBAA6B,IAAI;AAMzD,MAAM,gBAAA,GAAmB,CAAC,EAAE,QAAA,EAAS,KAA6B;AAEhE,EAAA,MAAM,gBAAA,GAAmBC,iBAAW,eAAe,CAAA;AACnD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,eAAS,gBAAgB,CAAA;AAEzD,EAAA,MAAM,qBAAqB,gBAAA,KAAqB,IAAA;AAChD,EAAA,MAAM,aAAA,GAAgB,oBAAoB,QAAA,IAAY,CAAA;AAEtD,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,QAAA,GAAkC,IAAA;AAEtC,IAAA,IAAI,kBAAA,EAAoB;AACtB,MAAA,QAAA,GAAW,IAAI,cAAA;AAAA,QACb,CAAC,eAAA,KAA2C;AAC1C,UAAA,WAAA,CAAY,eAAA,CAAgB,CAAC,CAAA,CAAE,WAAA,CAAY,KAAK,CAAA;AAAA,QAClD;AAAA,OACF;AAEA,MAAA,QAAA,CAAS,OAAA,CAAQ,SAAS,IAAI,CAAA;AAC9B,MAAA,WAAA,CAAY,QAAA,CAAS,IAAA,CAAK,qBAAA,EAAsB,CAAE,KAAK,CAAA;AAAA,IACzD;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,QAAA,EAAU;AACZ,QAAA,QAAA,CAAS,UAAA,EAAW;AAAA,MACtB;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,kBAAkB,CAAC,CAAA;AAEvB,EAAA,sCACG,eAAA,CAAgB,QAAA,EAAhB,EAAyB,KAAA,EAAO,eAC9B,QAAA,EACH,CAAA;AAEJ;AAEA,MAAM,cAAc,MAAc;AAChC,EAAA,MAAM,KAAA,GAAQF,iBAAW,eAAe,CAAA;AACxC,EAAA,OAAO,KAAA,KAAU,OAAO,CAAA,GAAI,KAAA;AAC9B;;;;;;"}
+{"version":3,"file":"ViewportProvider.js","sources":["../src/viewport/ViewportProvider.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext, useState } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils/useIsomorphicLayoutEffect\";\n\nconst ViewportContext = createContext<number | null>(null);\n\ntype ViewportProviderProps = {\n  children?: ReactNode;\n};\n\nconst ViewportProvider = ({ children }: ViewportProviderProps) => {\n  // Get value directly from the ViewportContext so we can detect if the value is null (no inherited ViewportProvider)\n  const existingViewport = useContext(ViewportContext);\n  const [viewport, setViewport] = useState(existingViewport);\n\n  const noExistingViewport = existingViewport === null;\n  const viewportValue = existingViewport || viewport || 0;\n\n  useIsomorphicLayoutEffect(() => {\n    let observer: ResizeObserver | null = null;\n\n    if (noExistingViewport) {\n      observer = new ResizeObserver(\n        (observerEntries: ResizeObserverEntry[]) => {\n          setViewport(observerEntries[0].contentRect.width);\n        },\n      );\n\n      observer.observe(document.body);\n      setViewport(document.body.getBoundingClientRect().width);\n    }\n\n    return () => {\n      if (observer) {\n        observer.disconnect();\n      }\n    };\n  }, [noExistingViewport]);\n\n  return (\n    <ViewportContext.Provider value={viewportValue}>\n      {children}\n    </ViewportContext.Provider>\n  );\n};\n\nconst useViewport = (): number => {\n  const value = useContext(ViewportContext);\n  return value === null ? 0 : value;\n};\n\nexport { useViewport, ViewportContext, ViewportProvider };\n"],"names":["createContext","useContext","useState","useIsomorphicLayoutEffect"],"mappings":";;;;;;AAGA,MAAM,eAAA,GAAkBA,oBAA6B,IAAI;AAMzD,MAAM,gBAAA,GAAmB,CAAC,EAAE,QAAA,EAAS,KAA6B;AAEhE,EAAA,MAAM,gBAAA,GAAmBC,iBAAW,eAAe,CAAA;AACnD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,eAAS,gBAAgB,CAAA;AAEzD,EAAA,MAAM,qBAAqB,gBAAA,KAAqB,IAAA;AAChD,EAAA,MAAM,aAAA,GAAgB,oBAAoB,QAAA,IAAY,CAAA;AAEtD,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,QAAA,GAAkC,IAAA;AAEtC,IAAA,IAAI,kBAAA,EAAoB;AACtB,MAAA,QAAA,GAAW,IAAI,cAAA;AAAA,QACb,CAAC,eAAA,KAA2C;AAC1C,UAAA,WAAA,CAAY,eAAA,CAAgB,CAAC,CAAA,CAAE,WAAA,CAAY,KAAK,CAAA;AAAA,QAClD;AAAA,OACF;AAEA,MAAA,QAAA,CAAS,OAAA,CAAQ,SAAS,IAAI,CAAA;AAC9B,MAAA,WAAA,CAAY,QAAA,CAAS,IAAA,CAAK,qBAAA,EAAsB,CAAE,KAAK,CAAA;AAAA,IACzD;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,QAAA,EAAU;AACZ,QAAA,QAAA,CAAS,UAAA,EAAW;AAAA,MACtB;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,kBAAkB,CAAC,CAAA;AAEvB,EAAA,sCACG,eAAA,CAAgB,QAAA,EAAhB,EAAyB,KAAA,EAAO,eAC9B,QAAA,EACH,CAAA;AAEJ;AAEA,MAAM,cAAc,MAAc;AAChC,EAAA,MAAM,KAAA,GAAQF,iBAAW,eAAe,CAAA;AACxC,EAAA,OAAO,KAAA,KAAU,OAAO,CAAA,GAAI,KAAA;AAC9B;;;;;;"}