@salt-ds/core 1.33.0 → 1.34.0

package/css/salt-core.css

@@ -99,8 +99,8 @@
 .saltAccordionPanel-content {
   padding-left: var(--salt-spacing-100);
   padding-right: var(--salt-spacing-100);
-  padding-top: var(--salt-spacing-300);
-  padding-bottom: var(--salt-spacing-300);
+  padding-top: var(--salt-spacing-100);
+  padding-bottom: var(--salt-spacing-150);
 }
 .saltAccordionPanel-indentedContent {
   padding-left: calc(var(--salt-spacing-200) + var(--salt-size-icon));
@@ -393,6 +393,11 @@
   border-color: var(--salt-container-secondary-borderColor);
   --card-accent-color: var(--salt-container-secondary-borderColor);
 }
+.saltCard-tertiary {
+  background: var(--saltCard-background, var(--salt-container-tertiary-background));
+  border-color: var(--salt-container-tertiary-borderColor);
+  --card-accent-color: var(--salt-container-tertiary-borderColor);
+}
 .saltCard-accent::after {
   content: "";
   position: absolute;
@@ -1179,6 +1184,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   line-height: var(--salt-text-lineHeight);
 }
 .saltFormField-labelTop {
+  gap: var(--salt-spacing-75);
   grid-template-areas: "label" "controls";
 }
 .saltFormField-labelTop .saltFormFieldHelperText {
@@ -1502,6 +1508,11 @@ a:focus .saltCard-interactable.saltCard-disabled {
   border-color: var(--salt-container-secondary-borderColor);
   --card-accent-color: var(--salt-container-secondary-borderColor);
 }
+.saltInteractableCard-tertiary {
+  background: var(--saltInteractableCard-background, var(--salt-container-tertiary-background));
+  border-color: var(--salt-container-tertiary-borderColor);
+  --card-accent-color: var(--salt-container-tertiary-borderColor);
+}
 .saltInteractableCard-accent::after {
   content: "";
   position: absolute;
@@ -1674,6 +1685,11 @@ a:focus .saltCard-interactable.saltCard-disabled {
   border-color: var(--salt-container-secondary-borderColor);
   --linkCard-accent-color: var(--salt-container-secondary-borderColor);
 }
+.saltLinkCard-tertiary {
+  background: var(--saltLinkCard-background, var(--salt-container-tertiary-background));
+  border-color: var(--salt-container-tertiary-borderColor);
+  --linkCard-accent-color: var(--salt-container-tertiary-borderColor);
+}
 .saltLinkCard-accent::after {
   content: "";
   position: absolute;
@@ -2176,27 +2192,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltOption[aria-selected=true] {
   z-index: var(--salt-zIndex-default);
   background: var(--salt-selectable-background-selected);
-}
-.saltOption[aria-selected=true]::after {
-  content: "";
-  display: block;
-  position: absolute;
-  top: -1px;
-  bottom: -1px;
-  left: 0;
-  width: 100%;
-}
-.saltOption[aria-selected=true]::after {
-  border-top: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
-  border-bottom: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
-}
-.saltOption[aria-selected=true]:first-of-type::before {
-  border-top: unset;
-  top: 0;
-}
-.saltOption[aria-selected=true]:last-of-type::before {
-  border-bottom: unset;
-  bottom: 0;
+  box-shadow:
+    calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover),
+    calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected),
+    0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);
 }
 .saltOption[aria-disabled=true] {
   color: var(--salt-content-primary-foreground-disabled);
@@ -2341,6 +2340,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltPageButton:hover,
 .saltPageButton:focus-visible {
+  --saltButton-text-color-hover: var(--salt-content-primary-foreground);
   --saltButton-background-hover: var(--salt-selectable-background-hover);
 }
 .saltPageButton:disabled {
@@ -2392,6 +2392,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltPanel-secondary.saltPanel {
   --panel-background: var(--salt-container-secondary-background);
 }
+.saltPanel-tertiary.saltPanel {
+  --panel-background: var(--salt-container-tertiary-background);
+}
 .saltPanel {
   background: var(--saltPanel-background, var(--panel-background));
   color: var(--saltPanel-color, initial);
@@ -3894,4 +3897,4 @@ label.saltText small,
   }
 }
 
-/* src/d2dc509c-469f-44b5-8784-1c26d9a0aad8.css */
+/* src/dff5db70-591c-4470-81bd-0e7a0db50a3c.css */

package/dist-cjs/accordion/Accordion.js

@@ -127,6 +127,8 @@ const Accordion = React.forwardRef(
       ...rest
     } = props;
     const id = useId.useId(idProp);
+    const [headerId, setHeaderId] = React.useState(`${id}-header`);
+    const [panelId, setPanelId] = React.useState(`${id}-panel`);
     const targetWindow = window.useWindow();
     styles.useComponentCssInjection({
       testId: "salt-accordion",
@@ -150,7 +152,10 @@ const Accordion = React.forwardRef(
         expanded,
         indicatorSide,
         disabled: Boolean(disabled),
-        id: id != null ? id : "",
+        headerId,
+        setHeaderId,
+        panelId,
+        setPanelId,
         status
       },
       children: /* @__PURE__ */ jsxRuntime.jsx("div", {

package/dist-cjs/accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../src/accordion/Accordion.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type SyntheticEvent,\n  forwardRef,\n} from \"react\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport accordionCss from \"./Accordion.css\";\nimport { AccordionContext } from \"./AccordionContext\";\nexport interface AccordionProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onToggle\"> {\n  /**\n   * AccordionGroup value.\n   */\n  value: string;\n  /**\n   * Whether the accordion is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Whether the accordion is expanded by default.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Side to align the Accordion's indicator. Defaults to `left`.\n   */\n  indicatorSide?: \"left\" | \"right\";\n  /**\n   * Callback fired when the accordion is toggled.\n   */\n  onToggle?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  /**\n   * Whether the accordion is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The status of the accordion.\n   */\n  status?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltAccordion\");\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n  function Accordion(props, ref) {\n    const {\n      className,\n      defaultExpanded,\n      expanded: expandedProp,\n      disabled,\n      indicatorSide = \"left\",\n      id: idProp,\n      onToggle,\n      status,\n      value,\n      ...rest\n    } = props;\n\n    const id = useId(idProp);\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-accordion\",\n      css: accordionCss,\n      window: targetWindow,\n    });\n\n    const [expanded, setExpanded] = useControlled({\n      controlled: expandedProp,\n      default: Boolean(defaultExpanded),\n      name: \"Accordion\",\n      state: \"expanded\",\n    });\n\n    const toggle = (event: SyntheticEvent<HTMLButtonElement>) => {\n      setExpanded((prev) => !prev);\n      onToggle?.(event);\n    };\n\n    return (\n      <AccordionContext.Provider\n        value={{\n          value,\n          toggle,\n          expanded,\n          indicatorSide,\n          disabled: Boolean(disabled),\n          id: id ?? \"\",\n          status,\n        }}\n      >\n        <div\n          ref={ref}\n          className={clsx(\n            withBaseName(),\n            { [withBaseName(status ?? \"\")]: status },\n            className,\n          )}\n          {...rest}\n        />\n      </AccordionContext.Provider>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Accordion","useId","useWindow","useComponentCssInjection","accordionCss","useControlled","jsx","AccordionContext","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,QAAA;AAAA,MACA,aAAgB,GAAA,MAAA;AAAA,MAChB,EAAI,EAAA,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA,EAAA,GAAKC,YAAM,MAAM,CAAA,CAAA;AACvB,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,2BAAc,CAAA;AAAA,MAC5C,UAAY,EAAA,YAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,eAAe,CAAA;AAAA,MAChC,IAAM,EAAA,WAAA;AAAA,MACN,KAAO,EAAA,UAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAAS,CAAC,KAA6C,KAAA;AAC3D,MAAY,WAAA,CAAA,CAAC,IAAS,KAAA,CAAC,IAAI,CAAA,CAAA;AAC3B,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb,CAAA;AAEA,IACE,uBAAAC,cAAA,CAACC,kCAAiB,QAAjB,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,KAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,aAAA;AAAA,QACA,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,QAC1B,IAAI,EAAM,IAAA,IAAA,GAAA,EAAA,GAAA,EAAA;AAAA,QACV,MAAA;AAAA,OACF;AAAA,MAEA,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAAE,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,EAAE,CAAC,YAAA,CAAa,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAE,IAAI,MAAO,EAAA;AAAA,UACvC,SAAA;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,OACN,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"Accordion.js","sources":["../src/accordion/Accordion.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type SyntheticEvent,\n  forwardRef,\n  useState,\n} from \"react\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport accordionCss from \"./Accordion.css\";\nimport { AccordionContext } from \"./AccordionContext\";\nexport interface AccordionProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onToggle\"> {\n  /**\n   * AccordionGroup value.\n   */\n  value: string;\n  /**\n   * Whether the accordion is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Whether the accordion is expanded by default.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Side to align the Accordion's indicator. Defaults to `left`.\n   */\n  indicatorSide?: \"left\" | \"right\";\n  /**\n   * Callback fired when the accordion is toggled.\n   */\n  onToggle?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  /**\n   * Whether the accordion is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The status of the accordion.\n   */\n  status?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltAccordion\");\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n  function Accordion(props, ref) {\n    const {\n      className,\n      defaultExpanded,\n      expanded: expandedProp,\n      disabled,\n      indicatorSide = \"left\",\n      id: idProp,\n      onToggle,\n      status,\n      value,\n      ...rest\n    } = props;\n\n    const id = useId(idProp);\n    const [headerId, setHeaderId] = useState(`${id}-header`);\n    const [panelId, setPanelId] = useState(`${id}-panel`);\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-accordion\",\n      css: accordionCss,\n      window: targetWindow,\n    });\n\n    const [expanded, setExpanded] = useControlled({\n      controlled: expandedProp,\n      default: Boolean(defaultExpanded),\n      name: \"Accordion\",\n      state: \"expanded\",\n    });\n\n    const toggle = (event: SyntheticEvent<HTMLButtonElement>) => {\n      setExpanded((prev) => !prev);\n      onToggle?.(event);\n    };\n\n    return (\n      <AccordionContext.Provider\n        value={{\n          value,\n          toggle,\n          expanded,\n          indicatorSide,\n          disabled: Boolean(disabled),\n          headerId,\n          setHeaderId,\n          panelId,\n          setPanelId,\n          status,\n        }}\n      >\n        <div\n          ref={ref}\n          className={clsx(\n            withBaseName(),\n            { [withBaseName(status ?? \"\")]: status },\n            className,\n          )}\n          {...rest}\n        />\n      </AccordionContext.Provider>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Accordion","useId","useState","useWindow","useComponentCssInjection","accordionCss","useControlled","jsx","AccordionContext","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,QAAA;AAAA,MACA,aAAgB,GAAA,MAAA;AAAA,MAChB,EAAI,EAAA,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA,EAAA,GAAKC,YAAM,MAAM,CAAA,CAAA;AACvB,IAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAAC,cAAA,CAAS,GAAG,EAAW,CAAA,OAAA,CAAA,CAAA,CAAA;AACvD,IAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAAA,cAAA,CAAS,GAAG,EAAU,CAAA,MAAA,CAAA,CAAA,CAAA;AAEpD,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,2BAAc,CAAA;AAAA,MAC5C,UAAY,EAAA,YAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,eAAe,CAAA;AAAA,MAChC,IAAM,EAAA,WAAA;AAAA,MACN,KAAO,EAAA,UAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAAS,CAAC,KAA6C,KAAA;AAC3D,MAAY,WAAA,CAAA,CAAC,IAAS,KAAA,CAAC,IAAI,CAAA,CAAA;AAC3B,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb,CAAA;AAEA,IACE,uBAAAC,cAAA,CAACC,kCAAiB,QAAjB,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,KAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,aAAA;AAAA,QACA,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,QAC1B,QAAA;AAAA,QACA,WAAA;AAAA,QACA,OAAA;AAAA,QACA,UAAA;AAAA,QACA,MAAA;AAAA,OACF;AAAA,MAEA,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAAE,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,EAAE,CAAC,YAAA,CAAa,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAE,IAAI,MAAO,EAAA;AAAA,UACvC,SAAA;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,OACN,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/accordion/AccordionContext.js

@@ -117,7 +117,10 @@ const AccordionContext = createContext.createContext(
     toggle: () => void 0,
     disabled: false,
     indicatorSide: "left",
-    id: ""
+    headerId: "",
+    setHeaderId: () => void 0,
+    panelId: "",
+    setPanelId: () => void 0
   }
 );
 function useAccordion() {

package/dist-cjs/accordion/AccordionContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionContext.js","sources":["../src/accordion/AccordionContext.ts"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport interface AccordionContextValue {\n  value: string;\n  expanded: boolean;\n  toggle: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  disabled: boolean;\n  indicatorSide: \"left\" | \"right\";\n  id: string;\n  status?: \"error\" | \"warning\" | \"success\";\n}\n\nexport const AccordionContext = createContext<AccordionContextValue>(\n  \"AccordionContext\",\n  {\n    value: \"\",\n    expanded: false,\n    toggle: () => undefined,\n    disabled: false,\n    indicatorSide: \"left\",\n    id: \"\",\n  },\n);\n\nexport function useAccordion() {\n  return useContext(AccordionContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAM,gBAAmB,GAAAA,2BAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,KAAO,EAAA,EAAA;AAAA,IACP,QAAU,EAAA,KAAA;AAAA,IACV,QAAQ,MAAM,KAAA,CAAA;AAAA,IACd,QAAU,EAAA,KAAA;AAAA,IACV,aAAe,EAAA,MAAA;AAAA,IACf,EAAI,EAAA,EAAA;AAAA,GACN;AACF,EAAA;AAEO,SAAS,YAAe,GAAA;AAC7B,EAAA,OAAOC,iBAAW,gBAAgB,CAAA,CAAA;AACpC;;;;;"}
+{"version":3,"file":"AccordionContext.js","sources":["../src/accordion/AccordionContext.ts"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport interface AccordionContextValue {\n  value: string;\n  expanded: boolean;\n  toggle: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  disabled: boolean;\n  indicatorSide: \"left\" | \"right\";\n  headerId: string;\n  setHeaderId: (id: string) => void;\n  panelId: string;\n  setPanelId: (id: string) => void;\n  status?: \"error\" | \"warning\" | \"success\";\n}\n\nexport const AccordionContext = createContext<AccordionContextValue>(\n  \"AccordionContext\",\n  {\n    value: \"\",\n    expanded: false,\n    toggle: () => undefined,\n    disabled: false,\n    indicatorSide: \"left\",\n    headerId: \"\",\n    setHeaderId: () => undefined,\n    panelId: \"\",\n    setPanelId: () => undefined,\n  },\n);\n\nexport function useAccordion() {\n  return useContext(AccordionContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAM,gBAAmB,GAAAA,2BAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,KAAO,EAAA,EAAA;AAAA,IACP,QAAU,EAAA,KAAA;AAAA,IACV,QAAQ,MAAM,KAAA,CAAA;AAAA,IACd,QAAU,EAAA,KAAA;AAAA,IACV,aAAe,EAAA,MAAA;AAAA,IACf,QAAU,EAAA,EAAA;AAAA,IACV,aAAa,MAAM,KAAA,CAAA;AAAA,IACnB,OAAS,EAAA,EAAA;AAAA,IACT,YAAY,MAAM,KAAA,CAAA;AAAA,GACpB;AACF,EAAA;AAEO,SAAS,YAAe,GAAA;AAC7B,EAAA,OAAOC,iBAAW,gBAAgB,CAAA,CAAA;AACpC;;;;;"}

package/dist-cjs/accordion/AccordionHeader.js

@@ -12,6 +12,7 @@ var StatusIndicator = require('../status-indicator/StatusIndicator.js');
 var makePrefixer = require('../utils/makePrefixer.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
 require('../utils/useId.js');
+var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
 require('./AccordionGroup.js');
@@ -124,8 +125,18 @@ function ExpansionIcon({ expanded }) {
   });
 }
 const AccordionHeader = React.forwardRef(function AccordionHeader2(props, ref) {
-  const { children, className, onClick, ...rest } = props;
-  const { value, expanded, toggle, indicatorSide, disabled, id, status } = AccordionContext.useAccordion();
+  const { children, className, onClick, id, ...rest } = props;
+  const {
+    value,
+    expanded,
+    toggle,
+    indicatorSide,
+    disabled,
+    headerId,
+    panelId,
+    setHeaderId,
+    status
+  } = AccordionContext.useAccordion();
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
     testId: "salt-accordion-header",
@@ -136,6 +147,11 @@ const AccordionHeader = React.forwardRef(function AccordionHeader2(props, ref) {
     toggle(event);
     onClick == null ? void 0 : onClick(event);
   };
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    if (id) {
+      setHeaderId(id);
+    }
+  }, [id]);
   return /* @__PURE__ */ jsxRuntime.jsxs("button", {
     ref,
     className: clsx.clsx(
@@ -146,8 +162,8 @@ const AccordionHeader = React.forwardRef(function AccordionHeader2(props, ref) {
     disabled,
     onClick: handleClick,
     "aria-expanded": expanded,
-    id: `${id}-header`,
-    "aria-controls": `${id}-panel`,
+    id: headerId,
+    "aria-controls": panelId,
     value,
     type: "button",
     ...rest,

package/dist-cjs/accordion/AccordionHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHeader.js","sources":["../src/accordion/AccordionHeader.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport { StatusIndicator } from \"../status-indicator\";\n\nimport { makePrefixer } from \"../utils\";\n\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionHeaderCss from \"./AccordionHeader.css\";\n\nexport interface AccordionHeaderProps\n  extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * The content of the Accordion Header\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionHeader\");\n\nfunction ExpansionIcon({ expanded }: { expanded: boolean }) {\n  if (expanded) {\n    return <ChevronUpIcon aria-hidden className={withBaseName(\"icon\")} />;\n  }\n\n  return <ChevronDownIcon aria-hidden className={withBaseName(\"icon\")} />;\n}\n\nexport const AccordionHeader = forwardRef<\n  HTMLButtonElement,\n  AccordionHeaderProps\n>(function AccordionHeader(props, ref) {\n  const { children, className, onClick, ...rest } = props;\n  const { value, expanded, toggle, indicatorSide, disabled, id, status } =\n    useAccordion();\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-accordion-header\",\n    css: accordionHeaderCss,\n    window: targetWindow,\n  });\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    toggle(event);\n    onClick?.(event);\n  };\n\n  return (\n    <button\n      ref={ref}\n      className={clsx(\n        withBaseName(),\n        { [withBaseName(status ?? \"\")]: status },\n        className,\n      )}\n      disabled={disabled}\n      onClick={handleClick}\n      aria-expanded={expanded}\n      id={`${id}-header`}\n      aria-controls={`${id}-panel`}\n      value={value}\n      type=\"button\"\n      {...rest}\n    >\n      {indicatorSide === \"left\" && <ExpansionIcon expanded={expanded} />}\n      <span className={withBaseName(\"content\")}>{children}</span>\n      {status && (\n        <StatusIndicator\n          className={withBaseName(\"statusIndicator\")}\n          status={status}\n        />\n      )}\n      {indicatorSide === \"right\" && <ExpansionIcon expanded={expanded} />}\n    </button>\n  );\n});\n"],"names":["makePrefixer","jsx","ChevronUpIcon","ChevronDownIcon","forwardRef","AccordionHeader","useAccordion","useWindow","useComponentCssInjection","accordionHeaderCss","jsxs","clsx","StatusIndicator"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAM,YAAA,GAAeA,0BAAa,qBAAqB,CAAA,CAAA;AAEvD,SAAS,aAAA,CAAc,EAAE,QAAA,EAAmC,EAAA;AAC1D,EAAA,IAAI,QAAU,EAAA;AACZ,IAAA,uBAAQC,cAAA,CAAAC,mBAAA,EAAA;AAAA,MAAc,aAAW,EAAA,IAAA;AAAA,MAAC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,KAAG,CAAA,CAAA;AAAA,GACrE;AAEA,EAAA,uBAAQD,cAAA,CAAAE,qBAAA,EAAA;AAAA,IAAgB,aAAW,EAAA,IAAA;AAAA,IAAC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,GAAG,CAAA,CAAA;AACvE,CAAA;AAEO,MAAM,eAAkB,GAAAC,gBAAA,CAG7B,SAASC,gBAAAA,CAAgB,OAAO,GAAK,EAAA;AACrC,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,OAAA,EAAA,GAAY,MAAS,GAAA,KAAA,CAAA;AAClD,EAAM,MAAA,EAAE,OAAO,QAAU,EAAA,MAAA,EAAQ,eAAe,QAAU,EAAA,EAAA,EAAI,MAAO,EAAA,GACnEC,6BAAa,EAAA,CAAA;AAEf,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,iBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,MAAA,CAAO,KAAK,CAAA,CAAA;AACZ,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAA,uBACGC,eAAA,CAAA,QAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,EAAE,CAAC,YAAA,CAAa,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAE,IAAI,MAAO,EAAA;AAAA,MACvC,SAAA;AAAA,KACF;AAAA,IACA,QAAA;AAAA,IACA,OAAS,EAAA,WAAA;AAAA,IACT,eAAe,EAAA,QAAA;AAAA,IACf,IAAI,CAAG,EAAA,EAAA,CAAA,OAAA,CAAA;AAAA,IACP,iBAAe,CAAG,EAAA,EAAA,CAAA,MAAA,CAAA;AAAA,IAClB,KAAA;AAAA,IACA,IAAK,EAAA,QAAA;AAAA,IACJ,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,aAAA,KAAkB,0BAAWV,cAAA,CAAA,aAAA,EAAA;AAAA,QAAc,QAAA;AAAA,OAAoB,CAAA;AAAA,sBAC/DA,cAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,QAAI,QAAA;AAAA,OAAS,CAAA;AAAA,MACnD,0BACEA,cAAA,CAAAW,+BAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,QACzC,MAAA;AAAA,OACF,CAAA;AAAA,MAED,aAAA,KAAkB,2BAAYX,cAAA,CAAA,aAAA,EAAA;AAAA,QAAc,QAAA;AAAA,OAAoB,CAAA;AAAA,KAAA;AAAA,GACnE,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"AccordionHeader.js","sources":["../src/accordion/AccordionHeader.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport { StatusIndicator } from \"../status-indicator\";\n\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"../utils\";\n\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionHeaderCss from \"./AccordionHeader.css\";\n\nexport interface AccordionHeaderProps\n  extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * The content of the Accordion Header\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionHeader\");\n\nfunction ExpansionIcon({ expanded }: { expanded: boolean }) {\n  if (expanded) {\n    return <ChevronUpIcon aria-hidden className={withBaseName(\"icon\")} />;\n  }\n\n  return <ChevronDownIcon aria-hidden className={withBaseName(\"icon\")} />;\n}\n\nexport const AccordionHeader = forwardRef<\n  HTMLButtonElement,\n  AccordionHeaderProps\n>(function AccordionHeader(props, ref) {\n  const { children, className, onClick, id, ...rest } = props;\n  const {\n    value,\n    expanded,\n    toggle,\n    indicatorSide,\n    disabled,\n    headerId,\n    panelId,\n    setHeaderId,\n    status,\n  } = useAccordion();\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-accordion-header\",\n    css: accordionHeaderCss,\n    window: targetWindow,\n  });\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    toggle(event);\n    onClick?.(event);\n  };\n\n  useIsomorphicLayoutEffect(() => {\n    if (id) {\n      setHeaderId(id);\n    }\n  }, [id]);\n\n  return (\n    <button\n      ref={ref}\n      className={clsx(\n        withBaseName(),\n        { [withBaseName(status ?? \"\")]: status },\n        className,\n      )}\n      disabled={disabled}\n      onClick={handleClick}\n      aria-expanded={expanded}\n      id={headerId}\n      aria-controls={panelId}\n      value={value}\n      type=\"button\"\n      {...rest}\n    >\n      {indicatorSide === \"left\" && <ExpansionIcon expanded={expanded} />}\n      <span className={withBaseName(\"content\")}>{children}</span>\n      {status && (\n        <StatusIndicator\n          className={withBaseName(\"statusIndicator\")}\n          status={status}\n        />\n      )}\n      {indicatorSide === \"right\" && <ExpansionIcon expanded={expanded} />}\n    </button>\n  );\n});\n"],"names":["makePrefixer","jsx","ChevronUpIcon","ChevronDownIcon","forwardRef","AccordionHeader","useAccordion","useWindow","useComponentCssInjection","accordionHeaderCss","useIsomorphicLayoutEffect","jsxs","clsx","StatusIndicator"],"mappings":"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"}

package/dist-cjs/accordion/AccordionPanel.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltAccordionPanel {\n  display: grid;\n  transition: grid-template-rows var(--salt-duration-perceptible) ease-in-out, opacity var(--salt-duration-perceptible) ease-in-out, visibility var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltAccordionPanel[aria-hidden=\"true\"] {\n  grid-template-rows: 0fr;\n  opacity: 0;\n  visibility: hidden;\n}\n\n.saltAccordionPanel {\n  grid-template-rows: 1fr;\n  opacity: 1;\n  visibility: visible;\n}\n\n.saltAccordionPanel-inner {\n  overflow: hidden;\n}\n\n.saltAccordionPanel-content {\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  padding-top: var(--salt-spacing-300);\n  padding-bottom: var(--salt-spacing-300);\n}\n\n.saltAccordionPanel-indentedContent {\n  padding-left: calc(var(--salt-spacing-200) + var(--salt-size-icon));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .saltAccordionPanel {\n    transition: none;\n  }\n}\n";
+var css_248z = ".saltAccordionPanel {\n  display: grid;\n  transition: grid-template-rows var(--salt-duration-perceptible) ease-in-out, opacity var(--salt-duration-perceptible) ease-in-out, visibility var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltAccordionPanel[aria-hidden=\"true\"] {\n  grid-template-rows: 0fr;\n  opacity: 0;\n  visibility: hidden;\n}\n\n.saltAccordionPanel {\n  grid-template-rows: 1fr;\n  opacity: 1;\n  visibility: visible;\n}\n\n.saltAccordionPanel-inner {\n  overflow: hidden;\n}\n\n.saltAccordionPanel-content {\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  padding-top: var(--salt-spacing-100);\n  padding-bottom: var(--salt-spacing-150);\n}\n\n.saltAccordionPanel-indentedContent {\n  padding-left: calc(var(--salt-spacing-200) + var(--salt-size-icon));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .saltAccordionPanel {\n    transition: none;\n  }\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=AccordionPanel.css.js.map

package/dist-cjs/accordion/AccordionPanel.js

@@ -10,6 +10,7 @@ var React = require('react');
 var makePrefixer = require('../utils/makePrefixer.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
 require('../utils/useId.js');
+var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
 require('./AccordionGroup.js');
@@ -113,20 +114,25 @@ var AccordionPanel$1 = require('./AccordionPanel.css.js');
 const withBaseName = makePrefixer.makePrefixer("saltAccordionPanel");
 const AccordionPanel = React.forwardRef(
   function AccordionPanel2(props, ref) {
-    const { children, className, ...rest } = props;
+    const { children, className, id, ...rest } = props;
     const targetWindow = window.useWindow();
     styles.useComponentCssInjection({
       testId: "salt-accordion-panel",
       css: AccordionPanel$1,
       window: targetWindow
     });
-    const { id, expanded, indicatorSide } = AccordionContext.useAccordion();
+    const { headerId, panelId, setPanelId, expanded, indicatorSide } = AccordionContext.useAccordion();
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+      if (id) {
+        setPanelId(id);
+      }
+    }, [id]);
     return /* @__PURE__ */ jsxRuntime.jsx("div", {
       ref,
       className: clsx.clsx(withBaseName(), className),
       role: "region",
-      id: `${id}-panel`,
-      "aria-labelledby": `${id}-header`,
+      id: panelId,
+      "aria-labelledby": headerId,
       "aria-hidden": !expanded ? "true" : void 0,
       hidden: !expanded,
       ...rest,

package/dist-cjs/accordion/AccordionPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanel.js","sources":["../src/accordion/AccordionPanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { makePrefixer } from \"../utils\";\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionPanelCss from \"./AccordionPanel.css\";\n\nexport interface AccordionPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of the Accordion Panel\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionPanel\");\n\nexport const AccordionPanel = forwardRef<HTMLDivElement, AccordionPanelProps>(\n  function AccordionPanel(props, ref) {\n    const { children, className, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-accordion-panel\",\n      css: accordionPanelCss,\n      window: targetWindow,\n    });\n\n    const { id, expanded, indicatorSide } = useAccordion();\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(withBaseName(), className)}\n        role=\"region\"\n        id={`${id}-panel`}\n        aria-labelledby={`${id}-header`}\n        aria-hidden={!expanded ? \"true\" : undefined}\n        hidden={!expanded}\n        {...rest}\n      >\n        <div className={withBaseName(\"inner\")}>\n          <div\n            className={clsx(withBaseName(\"content\"), {\n              [withBaseName(\"indentedContent\")]: indicatorSide === \"left\",\n            })}\n          >\n            {children}\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","AccordionPanel","useWindow","useComponentCssInjection","accordionPanelCss","useAccordion","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAAC,gBAAA;AAAA,EAC5B,SAASC,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEzC,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,gBAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,EAAA,EAAI,QAAU,EAAA,aAAA,KAAkBC,6BAAa,EAAA,CAAA;AAErD,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,IAAK,EAAA,QAAA;AAAA,MACL,IAAI,CAAG,EAAA,EAAA,CAAA,MAAA,CAAA;AAAA,MACP,mBAAiB,CAAG,EAAA,EAAA,CAAA,OAAA,CAAA;AAAA,MACpB,aAAA,EAAa,CAAC,QAAA,GAAW,MAAS,GAAA,KAAA,CAAA;AAAA,MAClC,QAAQ,CAAC,QAAA;AAAA,MACR,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAClC,QAAC,kBAAAA,cAAA,CAAA,KAAA,EAAA;AAAA,UACC,SAAW,EAAAC,SAAA,CAAK,YAAa,CAAA,SAAS,CAAG,EAAA;AAAA,YACvC,CAAC,YAAA,CAAa,iBAAiB,CAAA,GAAI,aAAkB,KAAA,MAAA;AAAA,WACtD,CAAA;AAAA,UAEA,QAAA;AAAA,SACH,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"AccordionPanel.js","sources":["../src/accordion/AccordionPanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"../utils\";\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionPanelCss from \"./AccordionPanel.css\";\n\nexport interface AccordionPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of the Accordion Panel\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionPanel\");\n\nexport const AccordionPanel = forwardRef<HTMLDivElement, AccordionPanelProps>(\n  function AccordionPanel(props, ref) {\n    const { children, className, id, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-accordion-panel\",\n      css: accordionPanelCss,\n      window: targetWindow,\n    });\n\n    const { headerId, panelId, setPanelId, expanded, indicatorSide } =\n      useAccordion();\n\n    useIsomorphicLayoutEffect(() => {\n      if (id) {\n        setPanelId(id);\n      }\n    }, [id]);\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(withBaseName(), className)}\n        role=\"region\"\n        id={panelId}\n        aria-labelledby={headerId}\n        aria-hidden={!expanded ? \"true\" : undefined}\n        hidden={!expanded}\n        {...rest}\n      >\n        <div className={withBaseName(\"inner\")}>\n          <div\n            className={clsx(withBaseName(\"content\"), {\n              [withBaseName(\"indentedContent\")]: indicatorSide === \"left\",\n            })}\n          >\n            {children}\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","AccordionPanel","useWindow","useComponentCssInjection","accordionPanelCss","useAccordion","useIsomorphicLayoutEffect","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAAC,gBAAA;AAAA,EAC5B,SAASC,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,EAAA,EAAA,GAAO,MAAS,GAAA,KAAA,CAAA;AAE7C,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,gBAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,QAAU,EAAA,OAAA,EAAS,YAAY,QAAU,EAAA,aAAA,KAC/CC,6BAAa,EAAA,CAAA;AAEf,IAAAC,mDAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,EAAI,EAAA;AACN,QAAA,UAAA,CAAW,EAAE,CAAA,CAAA;AAAA,OACf;AAAA,KACF,EAAG,CAAC,EAAE,CAAC,CAAA,CAAA;AAEP,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,IAAK,EAAA,QAAA;AAAA,MACL,EAAI,EAAA,OAAA;AAAA,MACJ,iBAAiB,EAAA,QAAA;AAAA,MACjB,aAAA,EAAa,CAAC,QAAA,GAAW,MAAS,GAAA,KAAA,CAAA;AAAA,MAClC,QAAQ,CAAC,QAAA;AAAA,MACR,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAClC,QAAC,kBAAAA,cAAA,CAAA,KAAA,EAAA;AAAA,UACC,SAAW,EAAAC,SAAA,CAAK,YAAa,CAAA,SAAS,CAAG,EAAA;AAAA,YACvC,CAAC,YAAA,CAAa,iBAAiB,CAAA,GAAI,aAAkB,KAAA,MAAA;AAAA,WACtD,CAAA;AAAA,UAEA,QAAA;AAAA,SACH,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/card/Card.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to the root element */\n.saltCard {\n  border-width: var(--saltCard-borderWidth, var(--salt-size-border));\n  border-style: var(--salt-container-borderStyle);\n  padding: var(--saltCard-padding, var(--salt-spacing-200));\n  position: relative;\n  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n  box-sizing: border-box;\n  border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0));\n}\n\n.saltCard-primary {\n  background: var(--saltCard-background, var(--salt-container-primary-background));\n  border-color: var(--salt-container-primary-borderColor);\n  --card-accent-color: var(--salt-container-primary-borderColor);\n}\n\n.saltCard-secondary {\n  background: var(--saltCard-background, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-secondary-borderColor);\n  --card-accent-color: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied to create accent */\n.saltCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to Card if `accent=\"bottom\"` (default) */\n.saltCard-accentBottom::after {\n  left: calc(-1 * var(--salt-size-border));\n  bottom: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-bar);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to Card if `accent=\"left\"` */\n.saltCard-accentLeft::after {\n  left: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to Card if `accent=\"top\"` */\n.saltCard-accentTop::after {\n  left: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-bar);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to Card if `accent=\"right\"` */\n.saltCard-accentRight::after {\n  right: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-bar);\n}\n\n/*\n * **Deprecated:** The following styles are deprecated\n *  Use Interactable Card component instead\n *  for interactable styling\n */\n\n/* **Deprecated:** Styles applied if `interactable={true}` */\n.saltCard-interactable {\n  display: block;\n  transition: none;\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` */\na:focus .saltCard-interactable,\n.saltCard-interactable:hover {\n  box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n  cursor: var(--saltCard-cursor-hover, var(--salt-selectable-cursor-hover));\n  position: relative;\n}\n\n/* **Deprecated:** Styles applied on active state if `interactable={true}` */\n.saltCard-interactable:active {\n  box-shadow: var(--saltCard-boxShadow-active, var(--salt-overlayable-shadow-hover));\n  outline: var(--salt-focused-outline);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` and `disabled={true}` */\na:focus .saltCard-interactable.saltCard-disabled,\n.saltCard-interactable.saltCard-disabled:hover,\n.saltCard-interactable.saltCard-disabled:active {\n  box-shadow: var(--saltCard-boxShadow-disabled, var(--salt-overlayable-shadow));\n}\n\n/* **Deprecated:** Styles applied if `disabled={true}` */\n.saltCard-disabled,\n.saltCard-disabled.saltCard-interactable,\na:focus .saltCard-interactable.saltCard-disabled {\n  border-color: var(--salt-container-primary-borderColor-disabled);\n  color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));\n  cursor: var(--saltCard-cursor-disabled, var(--salt-selectable-cursor-disabled));\n  outline: none;\n}\n\n/* **Deprecated:** Styles applied to nested divs if `disabled={true}` */\n.saltCard-disabled div {\n  pointer-events: none;\n}\n\n/* Styles applied if `hoverable` is set */\n@media (hover: hover) {\n  .saltCard-hoverable:hover {\n    box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n    --card-accent-color: var(--salt-selectable-foreground-hover);\n  }\n}\n";
+var css_248z = "/* Styles applied to the root element */\n.saltCard {\n  border-width: var(--saltCard-borderWidth, var(--salt-size-border));\n  border-style: var(--salt-container-borderStyle);\n  padding: var(--saltCard-padding, var(--salt-spacing-200));\n  position: relative;\n  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n  box-sizing: border-box;\n  border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0));\n}\n\n.saltCard-primary {\n  background: var(--saltCard-background, var(--salt-container-primary-background));\n  border-color: var(--salt-container-primary-borderColor);\n  --card-accent-color: var(--salt-container-primary-borderColor);\n}\n\n.saltCard-secondary {\n  background: var(--saltCard-background, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-secondary-borderColor);\n  --card-accent-color: var(--salt-container-secondary-borderColor);\n}\n\n.saltCard-tertiary {\n  background: var(--saltCard-background, var(--salt-container-tertiary-background));\n  border-color: var(--salt-container-tertiary-borderColor);\n  --card-accent-color: var(--salt-container-tertiary-borderColor);\n}\n\n/* Styles applied to create accent */\n.saltCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to Card if `accent=\"bottom\"` (default) */\n.saltCard-accentBottom::after {\n  left: calc(-1 * var(--salt-size-border));\n  bottom: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-bar);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to Card if `accent=\"left\"` */\n.saltCard-accentLeft::after {\n  left: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to Card if `accent=\"top\"` */\n.saltCard-accentTop::after {\n  left: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-bar);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to Card if `accent=\"right\"` */\n.saltCard-accentRight::after {\n  right: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-bar);\n}\n\n/*\n * **Deprecated:** The following styles are deprecated\n *  Use Interactable Card component instead\n *  for interactable styling\n */\n\n/* **Deprecated:** Styles applied if `interactable={true}` */\n.saltCard-interactable {\n  display: block;\n  transition: none;\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` */\na:focus .saltCard-interactable,\n.saltCard-interactable:hover {\n  box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n  cursor: var(--saltCard-cursor-hover, var(--salt-selectable-cursor-hover));\n  position: relative;\n}\n\n/* **Deprecated:** Styles applied on active state if `interactable={true}` */\n.saltCard-interactable:active {\n  box-shadow: var(--saltCard-boxShadow-active, var(--salt-overlayable-shadow-hover));\n  outline: var(--salt-focused-outline);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` and `disabled={true}` */\na:focus .saltCard-interactable.saltCard-disabled,\n.saltCard-interactable.saltCard-disabled:hover,\n.saltCard-interactable.saltCard-disabled:active {\n  box-shadow: var(--saltCard-boxShadow-disabled, var(--salt-overlayable-shadow));\n}\n\n/* **Deprecated:** Styles applied if `disabled={true}` */\n.saltCard-disabled,\n.saltCard-disabled.saltCard-interactable,\na:focus .saltCard-interactable.saltCard-disabled {\n  border-color: var(--salt-container-primary-borderColor-disabled);\n  color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));\n  cursor: var(--saltCard-cursor-disabled, var(--salt-selectable-cursor-disabled));\n  outline: none;\n}\n\n/* **Deprecated:** Styles applied to nested divs if `disabled={true}` */\n.saltCard-disabled div {\n  pointer-events: none;\n}\n\n/* Styles applied if `hoverable` is set */\n@media (hover: hover) {\n  .saltCard-hoverable:hover {\n    box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n    --card-accent-color: var(--salt-selectable-foreground-hover);\n  }\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Card.css.js.map

package/dist-cjs/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../src/card/Card.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport cardCss from \"./Card.css\";\n\nconst withBaseName = makePrefixer(\"saltCard\");\nexport interface CardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If provided an accent is shown in the specified position.\n   */\n  accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * **Deprecated:** Use the InteractableCard component instead\n   *\n   * If `true`, the card will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the card will have hover styling.\n   */\n  hoverable?: boolean;\n  /**\n   * **Deprecated:** Use the InteractableCard component instead\n   *\n   * If `true`, interactive styles will be applied to `Card`. These styles give prominence to certain content\n   * on the page.\n   */\n  interactable?: boolean;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  function Card(props, ref) {\n    const {\n      accent,\n      children,\n      className,\n      disabled,\n      interactable,\n      hoverable,\n      variant = \"primary\",\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-card\",\n      css: cardCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"accent\")]: accent,\n            [withBaseName(`accent${capitalize(accent || \"\")}`)]: accent,\n            [withBaseName(\"hoverable\")]: hoverable,\n            /* **Deprecated:** InteractableCard should be used instead for these features */\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"interactable\")]: interactable,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Card","useWindow","useComponentCssInjection","cardCss","jsx","clsx","capitalize"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA,CAAA;AA6BrC,MAAM,IAAO,GAAAC,gBAAA;AAAA,EAClB,SAASC,KAAK,CAAA,KAAA,EAAO,GAAK,EAAA;AACxB,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAU,GAAA,SAAA;AAAA,MACP,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,WAAA;AAAA,MACR,GAAK,EAAAC,MAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,OAAO,CAAA;AAAA,QACpB;AAAA,UACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,UAC1B,CAAC,YAAa,CAAA,CAAA,MAAA,EAASC,sBAAW,MAAU,IAAA,EAAE,GAAG,CAAI,GAAA,MAAA;AAAA,UACrD,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,SAAA;AAAA,UAE7B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,YAAA;AAAA,SAClC;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"Card.js","sources":["../src/card/Card.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport cardCss from \"./Card.css\";\n\nconst withBaseName = makePrefixer(\"saltCard\");\nexport interface CardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If provided an accent is shown in the specified position.\n   */\n  accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * **Deprecated:** Use the InteractableCard component instead\n   *\n   * If `true`, the card will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the card will have hover styling.\n   */\n  hoverable?: boolean;\n  /**\n   * **Deprecated:** Use the InteractableCard component instead\n   *\n   * If `true`, interactive styles will be applied to `Card`. These styles give prominence to certain content\n   * on the page.\n   */\n  interactable?: boolean;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  function Card(props, ref) {\n    const {\n      accent,\n      children,\n      className,\n      disabled,\n      interactable,\n      hoverable,\n      variant = \"primary\",\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-card\",\n      css: cardCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"accent\")]: accent,\n            [withBaseName(`accent${capitalize(accent || \"\")}`)]: accent,\n            [withBaseName(\"hoverable\")]: hoverable,\n            /* **Deprecated:** InteractableCard should be used instead for these features */\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"interactable\")]: interactable,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Card","useWindow","useComponentCssInjection","cardCss","jsx","clsx","capitalize"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA,CAAA;AA6BrC,MAAM,IAAO,GAAAC,gBAAA;AAAA,EAClB,SAASC,KAAK,CAAA,KAAA,EAAO,GAAK,EAAA;AACxB,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAU,GAAA,SAAA;AAAA,MACP,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,WAAA;AAAA,MACR,GAAK,EAAAC,MAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,OAAO,CAAA;AAAA,QACpB;AAAA,UACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,UAC1B,CAAC,YAAa,CAAA,CAAA,MAAA,EAASC,sBAAW,MAAU,IAAA,EAAE,GAAG,CAAI,GAAA,MAAA;AAAA,UACrD,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,SAAA;AAAA,UAE7B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,YAAA;AAAA,SAClC;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/combo-box/ComboBox.js

@@ -215,8 +215,9 @@ const ComboBox = React.forwardRef(function ComboBox2(props, ref) {
       (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
     }
   };
+  const hasValidChildren = React.Children.toArray(children).filter(Boolean).length > 0;
   const { x, y, strategy, elements, floating, reference, context } = useFloatingUI.useFloatingUI({
-    open: openState && !readOnly && React.Children.count(children) > 0,
+    open: openState && !readOnly && hasValidChildren,
     onOpenChange: handleOpenChange,
     placement: "bottom-start",
     strategy: "fixed",
@@ -402,7 +403,7 @@ const ComboBox = React.forwardRef(function ComboBox2(props, ref) {
         endAdornment: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [
             endAdornment,
-            !readOnly ? /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+            !readOnly && hasValidChildren ? /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
               "aria-labelledby": clsx.clsx(buttonId, formFieldLabelledBy),
               "aria-label": "Show options",
               "aria-expanded": openState,
@@ -451,7 +452,7 @@ const ComboBox = React.forwardRef(function ComboBox2(props, ref) {
         emptyReadOnlyMarker: readOnly && selectedState.length > 0 ? "" : void 0
       }),
       /* @__PURE__ */ jsxRuntime.jsx(OptionList.OptionList, {
-        open: (openState || focusedState) && !readOnly && React.Children.count(children) > 0,
+        open: (openState || focusedState) && !readOnly && hasValidChildren,
         collapsed: !openState,
         ref: handleListRef,
         id: listId,

package/dist-cjs/combo-box/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","sources":["../src/combo-box/ComboBox.tsx"],"sourcesContent":["import {\n  flip,\n  offset,\n  size,\n  useClick,\n  useDismiss,\n  useFocus,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  Children,\n  type FocusEvent,\n  type ForwardedRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  type SyntheticEvent,\n  forwardRef,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { Button } from \"../button\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport {\n  ListControlContext,\n  type OptionValue,\n} from \"../list-control/ListControlContext\";\nimport { defaultValueToString } from \"../list-control/ListControlState\";\nimport { OptionList } from \"../option/OptionList\";\nimport { PillInput, type PillInputProps } from \"../pill-input\";\nimport {\n  type UseFloatingUIProps,\n  makePrefixer,\n  useFloatingUI,\n  useForkRef,\n  useId,\n} from \"../utils\";\nimport comboBoxCss from \"./ComboBox.css\";\nimport { type UseComboBoxProps, useComboBox } from \"./useComboBox\";\n\nexport type ComboBoxProps<Item = string> = {\n  /**\n   * The options to display in the combo box.\n   */\n  children?: ReactNode;\n  /**\n   * If true, options will be selected on tab key press.\n   */\n  selectOnTab?: boolean;\n} & UseComboBoxProps<Item> &\n  PillInputProps;\n\nconst withBaseName = makePrefixer(\"saltComboBox\");\n\nexport const ComboBox = forwardRef(function ComboBox<Item>(\n  props: ComboBoxProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    children,\n    className,\n    disabled: disabledProp,\n    endAdornment,\n    readOnly: readOnlyProp,\n    multiselect,\n    selectOnTab = !multiselect,\n    onSelectionChange,\n    selected,\n    defaultSelected,\n    defaultOpen,\n    onOpenChange,\n    onChange,\n    open,\n    inputProps: inputPropsProp,\n    variant = \"primary\",\n    onKeyDown,\n    onFocus,\n    onBlur,\n    value,\n    defaultValue,\n    valueToString = defaultValueToString,\n    truncate,\n    bordered = false,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-combo-box\",\n    css: comboBoxCss,\n    window: targetWindow,\n  });\n\n  const {\n    a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n  } = useFormFieldProps();\n\n  const disabled = Boolean(disabledProp) || formFieldDisabled;\n  const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const listControl = useComboBox<Item>({\n    open,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    value,\n    defaultValue,\n    disabled,\n    readOnly,\n    valueToString,\n  });\n\n  const {\n    activeState,\n    setActive,\n    openState,\n    setOpen,\n    openKey,\n    getIndexOfOption,\n    getOptionsMatching,\n    getFirstOption,\n    getLastOption,\n    getOptionAfter,\n    getOptionBefore,\n    getOptionPageAbove,\n    getOptionPageBelow,\n    selectedState,\n    select,\n    clear,\n    focusVisibleState,\n    setFocusVisibleState,\n    focusedState,\n    setFocusedState,\n    listRef,\n    valueState,\n    setValueState,\n    removePill,\n  } = listControl;\n\n  const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n    newOpen,\n    _event,\n    reason,\n  ) => {\n    const focusNotBlur = reason === \"focus\" && newOpen;\n    if (reason === \"focus\") {\n      setFocusedState(newOpen);\n    }\n\n    if (reason === \"focus\" && !newOpen) {\n      setFocusVisibleState(false);\n    }\n\n    if (readOnly || focusNotBlur) return;\n    setOpen(newOpen);\n\n    if (newOpen) {\n      inputRef.current?.focus();\n    }\n  };\n\n  const { x, y, strategy, elements, floating, reference, context } =\n    useFloatingUI({\n      open: openState && !readOnly && Children.count(children) > 0,\n      onOpenChange: handleOpenChange,\n      placement: \"bottom-start\",\n      strategy: \"fixed\",\n      middleware: [\n        offset(1),\n        size({\n          apply({ rects, elements, availableHeight }) {\n            Object.assign(elements.floating.style, {\n              minWidth: `${rects.reference.width}px`,\n              maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n            });\n          },\n        }),\n        flip({ fallbackStrategy: \"initialPlacement\" }),\n      ],\n    });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useDismiss(context),\n    useFocus(context),\n    useClick(context, { keyboardHandlers: false, toggle: false }),\n  ]);\n\n  const handleRef = useForkRef<HTMLDivElement>(reference, ref);\n\n  const handleButtonClick = (event: MouseEvent<HTMLButtonElement>) => {\n    if (!readOnly) {\n      event.stopPropagation();\n      setFocusVisibleState(false);\n      setOpen(!openState, \"manual\");\n    }\n  };\n\n  const handleButtonFocus = () => {\n    inputRef.current?.focus();\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (readOnly) {\n      return;\n    }\n\n    if (!openState) {\n      if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n        setOpen(true, undefined, event.key);\n        return;\n      }\n    }\n\n    const activeOption = activeState ?? getFirstOption()?.data;\n\n    let newActive: { data: OptionValue<Item>; element: HTMLElement } | null =\n      null;\n    switch (event.key) {\n      case \"ArrowDown\":\n        newActive = getOptionAfter(activeOption) ?? getLastOption();\n        break;\n      case \"ArrowUp\":\n        newActive = getOptionBefore(activeOption) ?? getFirstOption();\n        break;\n      case \"Home\":\n        newActive = getFirstOption();\n        break;\n      case \"End\":\n        newActive = getLastOption();\n        break;\n      case \"PageUp\":\n        newActive = getOptionPageAbove(activeOption);\n        break;\n      case \"PageDown\":\n        newActive = getOptionPageBelow(activeOption);\n        break;\n      case \"Enter\":\n        if (openState && activeState?.disabled) {\n          event.preventDefault();\n          return;\n        }\n\n        if (!openState || !activeState) {\n          return;\n        }\n\n        select(event, activeState);\n\n        if (!multiselect) {\n          event.preventDefault();\n        }\n\n        break;\n      case \"Tab\":\n        if (\n          openState &&\n          selectOnTab &&\n          activeState &&\n          !activeState?.disabled &&\n          !selectedState.includes(activeState?.value)\n        ) {\n          select(event, activeState);\n        }\n        break;\n    }\n\n    if (newActive) {\n      setFocusVisibleState(true);\n    }\n\n    if (newActive && newActive.data.id !== activeState?.id) {\n      event.preventDefault();\n      setActive(newActive.data);\n    }\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    setFocusedState(true);\n    onFocus?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    event.persist();\n    onBlur?.(event);\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n\n    if (!openState) {\n      setOpen(true, \"input\");\n    }\n\n    if (value === \"\" && !multiselect) {\n      clear(event);\n    }\n\n    setValueState(value);\n\n    // Wait for the filter to happen\n    queueMicrotask(() => {\n      if (value !== \"\") {\n        const newOption = getFirstOption();\n        if (newOption) {\n          setActive(newOption.data);\n        }\n      } else {\n        setActive(undefined);\n      }\n    });\n\n    onChange?.(event);\n  };\n\n  const handlePillRemove = (event: SyntheticEvent, index: number) => {\n    event.stopPropagation();\n    const removed = selectedState[index];\n    removePill(event, removed);\n  };\n\n  const handleListMouseOver = () => {\n    setFocusVisibleState(false);\n  };\n\n  const handleListMouseLeave = () => {\n    setActive(undefined);\n  };\n\n  const handleFocusInput = () => {\n    inputRef.current?.focus();\n  };\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: We only want this to run when the list's openState or the displayed options change.\n  useEffect(() => {\n    // We check the active index because the active item may have been removed\n    const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n    let newActive = undefined;\n\n    // If the active item is still in the list, we don't need to do anything\n    if (activeIndex > -1) {\n      return;\n    }\n\n    // If the list is closed we should clear the active item\n    if (!openState) {\n      setActive(undefined);\n      return;\n    }\n\n    // If we have selected an item, we should make that the active item\n    if (selectedState.length > 0) {\n      newActive = getOptionsMatching(\n        (option) => option.value === selectedState[0],\n      ).pop();\n    }\n\n    // If we still don't have an active item, we should check if the list has been opened with the keyboard\n    if (!newActive) {\n      if (openKey.current === \"ArrowDown\") {\n        newActive = getFirstOption();\n        setFocusVisibleState(true);\n      } else if (openKey.current === \"ArrowUp\") {\n        newActive = getLastOption();\n        setFocusVisibleState(true);\n      }\n    }\n\n    // If we still don't have an active item, we should just select the first item\n    if (!newActive) {\n      newActive = getFirstOption();\n    }\n\n    setActive(newActive?.data);\n  }, [openState, children]);\n\n  const buttonId = useId();\n  const listId = useId();\n\n  const handleListRef = useForkRef<HTMLDivElement>(listRef, floating);\n\n  return (\n    <ListControlContext.Provider value={listControl}>\n      <PillInput\n        // Ensures that the field is focused when you don't directly click on the input.\n        tabIndex={!disabled ? -1 : undefined}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"focused\")]: focusedState,\n            [withBaseName(\"focusVisible\")]: focusVisibleState,\n          },\n          className,\n        )}\n        endAdornment={\n          <>\n            {endAdornment}\n            {!readOnly ? (\n              <Button\n                aria-labelledby={clsx(buttonId, formFieldLabelledBy)}\n                aria-label=\"Show options\"\n                aria-expanded={openState}\n                aria-controls={openState ? listId : undefined}\n                aria-haspopup=\"listbox\"\n                disabled={disabled}\n                variant=\"secondary\"\n                onClick={handleButtonClick}\n                onFocus={handleButtonFocus}\n                tabIndex={-1}\n              >\n                {openState ? (\n                  <ChevronUpIcon aria-hidden />\n                ) : (\n                  <ChevronDownIcon aria-hidden />\n                )}\n              </Button>\n            ) : undefined}\n          </>\n        }\n        onChange={handleChange}\n        role=\"combobox\"\n        disabled={disabled}\n        readOnly={readOnly}\n        inputProps={{\n          role: \"combobox\",\n          \"aria-expanded\": openState,\n          \"aria-multiselectable\": multiselect,\n          \"aria-controls\": openState ? listId : undefined,\n          onKeyDown: handleKeyDown,\n          ...inputPropsProp,\n        }}\n        aria-activedescendant={activeState?.id}\n        variant={variant}\n        inputRef={inputRef}\n        value={valueState}\n        ref={handleRef}\n        bordered={bordered}\n        {...getReferenceProps({\n          onBlur: handleBlur,\n          onFocus: handleFocus,\n          ...rest,\n        })}\n        pills={\n          multiselect ? selectedState.map((item) => valueToString(item)) : []\n        }\n        truncate={truncate && !focusedState && !openState}\n        onPillRemove={handlePillRemove}\n        hidePillClose={!focusedState || readOnly}\n        emptyReadOnlyMarker={\n          readOnly && selectedState.length > 0 ? \"\" : undefined\n        }\n      />\n      <OptionList\n        open={\n          (openState || focusedState) &&\n          !readOnly &&\n          Children.count(children) > 0\n        }\n        collapsed={!openState}\n        ref={handleListRef}\n        id={listId}\n        tabIndex={-1}\n        {...getFloatingProps({\n          onMouseOver: handleListMouseOver,\n          onFocus: handleFocusInput,\n          onClick: handleFocusInput,\n          onMouseLeave: handleListMouseLeave,\n        })}\n        left={x ?? 0}\n        top={y ?? 0}\n        position={strategy}\n        width={elements.floating?.offsetWidth}\n        height={elements.floating?.offsetHeight}\n      >\n        {children}\n      </OptionList>\n    </ListControlContext.Provider>\n  );\n}) as <Item = string>(\n  props: ComboBoxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => JSX.Element;\n"],"names":["makePrefixer","forwardRef","ComboBox","defaultValueToString","useWindow","useComponentCssInjection","comboBoxCss","useFormFieldProps","useRef","useComboBox","_a","useFloatingUI","Children","offset","size","elements","flip","useInteractions","useDismiss","useFocus","useClick","useForkRef","_b","value","useEffect","useId","jsxs","ListControlContext","jsx","PillInput","clsx","Fragment","Button","ChevronUpIcon","ChevronDownIcon","OptionList"],"mappings":"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"}
+{"version":3,"file":"ComboBox.js","sources":["../src/combo-box/ComboBox.tsx"],"sourcesContent":["import {\n  flip,\n  offset,\n  size,\n  useClick,\n  useDismiss,\n  useFocus,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  Children,\n  type FocusEvent,\n  type ForwardedRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  type SyntheticEvent,\n  forwardRef,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { Button } from \"../button\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport {\n  ListControlContext,\n  type OptionValue,\n} from \"../list-control/ListControlContext\";\nimport { defaultValueToString } from \"../list-control/ListControlState\";\nimport { OptionList } from \"../option/OptionList\";\nimport { PillInput, type PillInputProps } from \"../pill-input\";\nimport {\n  type UseFloatingUIProps,\n  makePrefixer,\n  useFloatingUI,\n  useForkRef,\n  useId,\n} from \"../utils\";\nimport comboBoxCss from \"./ComboBox.css\";\nimport { type UseComboBoxProps, useComboBox } from \"./useComboBox\";\n\nexport type ComboBoxProps<Item = string> = {\n  /**\n   * The options to display in the combo box.\n   */\n  children?: ReactNode;\n  /**\n   * If true, options will be selected on tab key press.\n   */\n  selectOnTab?: boolean;\n} & UseComboBoxProps<Item> &\n  PillInputProps;\n\nconst withBaseName = makePrefixer(\"saltComboBox\");\n\nexport const ComboBox = forwardRef(function ComboBox<Item>(\n  props: ComboBoxProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    children,\n    className,\n    disabled: disabledProp,\n    endAdornment,\n    readOnly: readOnlyProp,\n    multiselect,\n    selectOnTab = !multiselect,\n    onSelectionChange,\n    selected,\n    defaultSelected,\n    defaultOpen,\n    onOpenChange,\n    onChange,\n    open,\n    inputProps: inputPropsProp,\n    variant = \"primary\",\n    onKeyDown,\n    onFocus,\n    onBlur,\n    value,\n    defaultValue,\n    valueToString = defaultValueToString,\n    truncate,\n    bordered = false,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-combo-box\",\n    css: comboBoxCss,\n    window: targetWindow,\n  });\n\n  const {\n    a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n  } = useFormFieldProps();\n\n  const disabled = Boolean(disabledProp) || formFieldDisabled;\n  const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const listControl = useComboBox<Item>({\n    open,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    value,\n    defaultValue,\n    disabled,\n    readOnly,\n    valueToString,\n  });\n\n  const {\n    activeState,\n    setActive,\n    openState,\n    setOpen,\n    openKey,\n    getIndexOfOption,\n    getOptionsMatching,\n    getFirstOption,\n    getLastOption,\n    getOptionAfter,\n    getOptionBefore,\n    getOptionPageAbove,\n    getOptionPageBelow,\n    selectedState,\n    select,\n    clear,\n    focusVisibleState,\n    setFocusVisibleState,\n    focusedState,\n    setFocusedState,\n    listRef,\n    valueState,\n    setValueState,\n    removePill,\n  } = listControl;\n\n  const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n    newOpen,\n    _event,\n    reason,\n  ) => {\n    const focusNotBlur = reason === \"focus\" && newOpen;\n    if (reason === \"focus\") {\n      setFocusedState(newOpen);\n    }\n\n    if (reason === \"focus\" && !newOpen) {\n      setFocusVisibleState(false);\n    }\n\n    if (readOnly || focusNotBlur) return;\n    setOpen(newOpen);\n\n    if (newOpen) {\n      inputRef.current?.focus();\n    }\n  };\n\n  const hasValidChildren =\n    Children.toArray(children).filter(Boolean).length > 0;\n\n  const { x, y, strategy, elements, floating, reference, context } =\n    useFloatingUI({\n      open: openState && !readOnly && hasValidChildren,\n      onOpenChange: handleOpenChange,\n      placement: \"bottom-start\",\n      strategy: \"fixed\",\n      middleware: [\n        offset(1),\n        size({\n          apply({ rects, elements, availableHeight }) {\n            Object.assign(elements.floating.style, {\n              minWidth: `${rects.reference.width}px`,\n              maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n            });\n          },\n        }),\n        flip({ fallbackStrategy: \"initialPlacement\" }),\n      ],\n    });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useDismiss(context),\n    useFocus(context),\n    useClick(context, { keyboardHandlers: false, toggle: false }),\n  ]);\n\n  const handleRef = useForkRef<HTMLDivElement>(reference, ref);\n\n  const handleButtonClick = (event: MouseEvent<HTMLButtonElement>) => {\n    if (!readOnly) {\n      event.stopPropagation();\n      setFocusVisibleState(false);\n      setOpen(!openState, \"manual\");\n    }\n  };\n\n  const handleButtonFocus = () => {\n    inputRef.current?.focus();\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (readOnly) {\n      return;\n    }\n\n    if (!openState) {\n      if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n        setOpen(true, undefined, event.key);\n        return;\n      }\n    }\n\n    const activeOption = activeState ?? getFirstOption()?.data;\n\n    let newActive: { data: OptionValue<Item>; element: HTMLElement } | null =\n      null;\n    switch (event.key) {\n      case \"ArrowDown\":\n        newActive = getOptionAfter(activeOption) ?? getLastOption();\n        break;\n      case \"ArrowUp\":\n        newActive = getOptionBefore(activeOption) ?? getFirstOption();\n        break;\n      case \"Home\":\n        newActive = getFirstOption();\n        break;\n      case \"End\":\n        newActive = getLastOption();\n        break;\n      case \"PageUp\":\n        newActive = getOptionPageAbove(activeOption);\n        break;\n      case \"PageDown\":\n        newActive = getOptionPageBelow(activeOption);\n        break;\n      case \"Enter\":\n        if (openState && activeState?.disabled) {\n          event.preventDefault();\n          return;\n        }\n\n        if (!openState || !activeState) {\n          return;\n        }\n\n        select(event, activeState);\n\n        if (!multiselect) {\n          event.preventDefault();\n        }\n\n        break;\n      case \"Tab\":\n        if (\n          openState &&\n          selectOnTab &&\n          activeState &&\n          !activeState?.disabled &&\n          !selectedState.includes(activeState?.value)\n        ) {\n          select(event, activeState);\n        }\n        break;\n    }\n\n    if (newActive) {\n      setFocusVisibleState(true);\n    }\n\n    if (newActive && newActive.data.id !== activeState?.id) {\n      event.preventDefault();\n      setActive(newActive.data);\n    }\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    setFocusedState(true);\n    onFocus?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    event.persist();\n    onBlur?.(event);\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n\n    if (!openState) {\n      setOpen(true, \"input\");\n    }\n\n    if (value === \"\" && !multiselect) {\n      clear(event);\n    }\n\n    setValueState(value);\n\n    // Wait for the filter to happen\n    queueMicrotask(() => {\n      if (value !== \"\") {\n        const newOption = getFirstOption();\n        if (newOption) {\n          setActive(newOption.data);\n        }\n      } else {\n        setActive(undefined);\n      }\n    });\n\n    onChange?.(event);\n  };\n\n  const handlePillRemove = (event: SyntheticEvent, index: number) => {\n    event.stopPropagation();\n    const removed = selectedState[index];\n    removePill(event, removed);\n  };\n\n  const handleListMouseOver = () => {\n    setFocusVisibleState(false);\n  };\n\n  const handleListMouseLeave = () => {\n    setActive(undefined);\n  };\n\n  const handleFocusInput = () => {\n    inputRef.current?.focus();\n  };\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: We only want this to run when the list's openState or the displayed options change.\n  useEffect(() => {\n    // We check the active index because the active item may have been removed\n    const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n    let newActive = undefined;\n\n    // If the active item is still in the list, we don't need to do anything\n    if (activeIndex > -1) {\n      return;\n    }\n\n    // If the list is closed we should clear the active item\n    if (!openState) {\n      setActive(undefined);\n      return;\n    }\n\n    // If we have selected an item, we should make that the active item\n    if (selectedState.length > 0) {\n      newActive = getOptionsMatching(\n        (option) => option.value === selectedState[0],\n      ).pop();\n    }\n\n    // If we still don't have an active item, we should check if the list has been opened with the keyboard\n    if (!newActive) {\n      if (openKey.current === \"ArrowDown\") {\n        newActive = getFirstOption();\n        setFocusVisibleState(true);\n      } else if (openKey.current === \"ArrowUp\") {\n        newActive = getLastOption();\n        setFocusVisibleState(true);\n      }\n    }\n\n    // If we still don't have an active item, we should just select the first item\n    if (!newActive) {\n      newActive = getFirstOption();\n    }\n\n    setActive(newActive?.data);\n  }, [openState, children]);\n\n  const buttonId = useId();\n  const listId = useId();\n\n  const handleListRef = useForkRef<HTMLDivElement>(listRef, floating);\n\n  return (\n    <ListControlContext.Provider value={listControl}>\n      <PillInput\n        // Ensures that the field is focused when you don't directly click on the input.\n        tabIndex={!disabled ? -1 : undefined}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"focused\")]: focusedState,\n            [withBaseName(\"focusVisible\")]: focusVisibleState,\n          },\n          className,\n        )}\n        endAdornment={\n          <>\n            {endAdornment}\n            {!readOnly && hasValidChildren ? (\n              <Button\n                aria-labelledby={clsx(buttonId, formFieldLabelledBy)}\n                aria-label=\"Show options\"\n                aria-expanded={openState}\n                aria-controls={openState ? listId : undefined}\n                aria-haspopup=\"listbox\"\n                disabled={disabled}\n                variant=\"secondary\"\n                onClick={handleButtonClick}\n                onFocus={handleButtonFocus}\n                tabIndex={-1}\n              >\n                {openState ? (\n                  <ChevronUpIcon aria-hidden />\n                ) : (\n                  <ChevronDownIcon aria-hidden />\n                )}\n              </Button>\n            ) : undefined}\n          </>\n        }\n        onChange={handleChange}\n        role=\"combobox\"\n        disabled={disabled}\n        readOnly={readOnly}\n        inputProps={{\n          role: \"combobox\",\n          \"aria-expanded\": openState,\n          \"aria-multiselectable\": multiselect,\n          \"aria-controls\": openState ? listId : undefined,\n          onKeyDown: handleKeyDown,\n          ...inputPropsProp,\n        }}\n        aria-activedescendant={activeState?.id}\n        variant={variant}\n        inputRef={inputRef}\n        value={valueState}\n        ref={handleRef}\n        bordered={bordered}\n        {...getReferenceProps({\n          onBlur: handleBlur,\n          onFocus: handleFocus,\n          ...rest,\n        })}\n        pills={\n          multiselect ? selectedState.map((item) => valueToString(item)) : []\n        }\n        truncate={truncate && !focusedState && !openState}\n        onPillRemove={handlePillRemove}\n        hidePillClose={!focusedState || readOnly}\n        emptyReadOnlyMarker={\n          readOnly && selectedState.length > 0 ? \"\" : undefined\n        }\n      />\n      <OptionList\n        open={(openState || focusedState) && !readOnly && hasValidChildren}\n        collapsed={!openState}\n        ref={handleListRef}\n        id={listId}\n        tabIndex={-1}\n        {...getFloatingProps({\n          onMouseOver: handleListMouseOver,\n          onFocus: handleFocusInput,\n          onClick: handleFocusInput,\n          onMouseLeave: handleListMouseLeave,\n        })}\n        left={x ?? 0}\n        top={y ?? 0}\n        position={strategy}\n        width={elements.floating?.offsetWidth}\n        height={elements.floating?.offsetHeight}\n      >\n        {children}\n      </OptionList>\n    </ListControlContext.Provider>\n  );\n}) as <Item = string>(\n  props: ComboBoxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => JSX.Element;\n"],"names":["makePrefixer","forwardRef","ComboBox","defaultValueToString","useWindow","useComponentCssInjection","comboBoxCss","useFormFieldProps","useRef","useComboBox","_a","Children","useFloatingUI","offset","size","elements","flip","useInteractions","useDismiss","useFocus","useClick","useForkRef","_b","value","useEffect","useId","jsxs","ListControlContext","jsx","PillInput","clsx","Fragment","Button","ChevronUpIcon","ChevronDownIcon","OptionList"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA,CAAA;AAEzC,MAAM,QAAW,GAAAC,gBAAA,CAAW,SAASC,SAAAA,CAC1C,OACA,GACA,EAAA;AA/DF,EAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAgEE,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,YAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,WAAA;AAAA,IACA,cAAc,CAAC,WAAA;AAAA,IACf,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,eAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAY,EAAA,cAAA;AAAA,IACZ,OAAU,GAAA,SAAA;AAAA,IACV,SAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA,YAAA;AAAA,IACA,aAAgB,GAAAC,qCAAA;AAAA,IAChB,QAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACR,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,SAAW,EAAA,EAAE,iBAAmB,EAAA,mBAAA,KAAwB,EAAC;AAAA,IACzD,QAAU,EAAA,iBAAA;AAAA,IACV,QAAU,EAAA,iBAAA;AAAA,MACRC,mCAAkB,EAAA,CAAA;AAEtB,EAAM,MAAA,QAAA,GAAW,OAAQ,CAAA,YAAY,CAAK,IAAA,iBAAA,CAAA;AAC1C,EAAM,MAAA,QAAA,GAAW,OAAQ,CAAA,YAAY,CAAK,IAAA,iBAAA,CAAA;AAC1C,EAAM,MAAA,QAAA,GAAWC,aAAyB,IAAI,CAAA,CAAA;AAE9C,EAAA,MAAM,cAAcC,uBAAkB,CAAA;AAAA,IACpC,IAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,KAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,aAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,WAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,gBAAA;AAAA,IACA,kBAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,cAAA;AAAA,IACA,eAAA;AAAA,IACA,kBAAA;AAAA,IACA,kBAAA;AAAA,IACA,aAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA,iBAAA;AAAA,IACA,oBAAA;AAAA,IACA,YAAA;AAAA,IACA,eAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,UAAA;AAAA,GACE,GAAA,WAAA,CAAA;AAEJ,EAAA,MAAM,gBAAuD,GAAA,CAC3D,OACA,EAAA,MAAA,EACA,MACG,KAAA;AA3JP,IAAAC,IAAAA,GAAAA,CAAAA;AA4JI,IAAM,MAAA,YAAA,GAAe,WAAW,OAAW,IAAA,OAAA,CAAA;AAC3C,IAAA,IAAI,WAAW,OAAS,EAAA;AACtB,MAAA,eAAA,CAAgB,OAAO,CAAA,CAAA;AAAA,KACzB;AAEA,IAAI,IAAA,MAAA,KAAW,OAAW,IAAA,CAAC,OAAS,EAAA;AAClC,MAAA,oBAAA,CAAqB,KAAK,CAAA,CAAA;AAAA,KAC5B;AAEA,IAAA,IAAI,QAAY,IAAA,YAAA;AAAc,MAAA,OAAA;AAC9B,IAAA,OAAA,CAAQ,OAAO,CAAA,CAAA;AAEf,IAAA,IAAI,OAAS,EAAA;AACX,MAAA,CAAAA,GAAA,GAAA,QAAA,CAAS,OAAT,KAAA,IAAA,GAAA,KAAA,CAAA,GAAAA,GAAkB,CAAA,KAAA,EAAA,CAAA;AAAA,KACpB;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,gBAAA,GACJC,eAAS,OAAQ,CAAA,QAAQ,EAAE,MAAO,CAAA,OAAO,EAAE,MAAS,GAAA,CAAA,CAAA;AAEtD,EAAM,MAAA,EAAE,GAAG,CAAG,EAAA,QAAA,EAAU,UAAU,QAAU,EAAA,SAAA,EAAW,OAAQ,EAAA,GAC7DC,2BAAc,CAAA;AAAA,IACZ,IAAA,EAAM,SAAa,IAAA,CAAC,QAAY,IAAA,gBAAA;AAAA,IAChC,YAAc,EAAA,gBAAA;AAAA,IACd,SAAW,EAAA,cAAA;AAAA,IACX,QAAU,EAAA,OAAA;AAAA,IACV,UAAY,EAAA;AAAA,MACVC,aAAO,CAAC,CAAA;AAAA,MACRC,UAAK,CAAA;AAAA,QACH,MAAM,EAAE,KAAA,EAAO,QAAAC,EAAAA,SAAAA,EAAU,iBAAmB,EAAA;AAC1C,UAAO,MAAA,CAAA,MAAA,CAAOA,SAAS,CAAA,QAAA,CAAS,KAAO,EAAA;AAAA,YACrC,QAAA,EAAU,CAAG,EAAA,KAAA,CAAM,SAAU,CAAA,KAAA,CAAA,EAAA,CAAA;AAAA,YAC7B,WAAW,CAAY,SAAA,EAAA,eAAA,CAAA,2FAAA,CAAA;AAAA,WACxB,CAAA,CAAA;AAAA,SACH;AAAA,OACD,CAAA;AAAA,MACDC,UAAK,CAAA,EAAE,gBAAkB,EAAA,kBAAA,EAAoB,CAAA;AAAA,KAC/C;AAAA,GACD,CAAA,CAAA;AAEH,EAAA,MAAM,EAAE,iBAAA,EAAmB,gBAAiB,EAAA,GAAIC,qBAAgB,CAAA;AAAA,IAC9DC,iBAAW,OAAO,CAAA;AAAA,IAClBC,eAAS,OAAO,CAAA;AAAA,IAChBC,eAAS,OAAS,EAAA,EAAE,kBAAkB,KAAO,EAAA,MAAA,EAAQ,OAAO,CAAA;AAAA,GAC7D,CAAA,CAAA;AAED,EAAM,MAAA,SAAA,GAAYC,qBAA2B,CAAA,SAAA,EAAW,GAAG,CAAA,CAAA;AAE3D,EAAM,MAAA,iBAAA,GAAoB,CAAC,KAAyC,KAAA;AAClE,IAAA,IAAI,CAAC,QAAU,EAAA;AACb,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,MAAA,oBAAA,CAAqB,KAAK,CAAA,CAAA;AAC1B,MAAQ,OAAA,CAAA,CAAC,WAAW,QAAQ,CAAA,CAAA;AAAA,KAC9B;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,oBAAoB,MAAM;AApNlC,IAAAX,IAAAA,GAAAA,CAAAA;AAqNI,IAAA,CAAAA,GAAA,GAAA,QAAA,CAAS,OAAT,KAAA,IAAA,GAAA,KAAA,CAAA,GAAAA,GAAkB,CAAA,KAAA,EAAA,CAAA;AAAA,GACpB,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,KAA2C,KAAA;AAxNpE,IAAA,IAAAA,KAAAY,GAAA,EAAA,EAAA,CAAA;AAyNI,IAAY,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,KAAA,CAAA,CAAA;AAEZ,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,CAAC,SAAW,EAAA;AACd,MAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,WAAe,IAAA,KAAA,CAAM,QAAQ,SAAW,EAAA;AACxD,QAAQ,OAAA,CAAA,IAAA,EAAM,KAAW,CAAA,EAAA,KAAA,CAAM,GAAG,CAAA,CAAA;AAClC,QAAA,OAAA;AAAA,OACF;AAAA,KACF;AAEA,IAAA,MAAM,eAAe,WAAeZ,IAAAA,IAAAA,GAAAA,WAAAA,GAAAA,CAAAA,GAAAA,GAAA,cAAe,EAAA,KAAf,gBAAAA,GAAkB,CAAA,IAAA,CAAA;AAEtD,IAAA,IAAI,SACF,GAAA,IAAA,CAAA;AACF,IAAA,QAAQ,KAAM,CAAA,GAAA;AAAA,MACP,KAAA,WAAA;AACH,QAAA,SAAA,GAAA,CAAYY,MAAA,cAAe,CAAA,YAAY,CAA3B,KAAA,IAAA,GAAAA,MAAgC,aAAc,EAAA,CAAA;AAC1D,QAAA,MAAA;AAAA,MACG,KAAA,SAAA;AACH,QAAA,SAAA,GAAA,CAAY,EAAgB,GAAA,eAAA,CAAA,YAAY,CAA5B,KAAA,IAAA,GAAA,EAAA,GAAiC,cAAe,EAAA,CAAA;AAC5D,QAAA,MAAA;AAAA,MACG,KAAA,MAAA;AACH,QAAA,SAAA,GAAY,cAAe,EAAA,CAAA;AAC3B,QAAA,MAAA;AAAA,MACG,KAAA,KAAA;AACH,QAAA,SAAA,GAAY,aAAc,EAAA,CAAA;AAC1B,QAAA,MAAA;AAAA,MACG,KAAA,QAAA;AACH,QAAA,SAAA,GAAY,mBAAmB,YAAY,CAAA,CAAA;AAC3C,QAAA,MAAA;AAAA,MACG,KAAA,UAAA;AACH,QAAA,SAAA,GAAY,mBAAmB,YAAY,CAAA,CAAA;AAC3C,QAAA,MAAA;AAAA,MACG,KAAA,OAAA;AACH,QAAI,IAAA,SAAA,KAAa,2CAAa,QAAU,CAAA,EAAA;AACtC,UAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,UAAA,OAAA;AAAA,SACF;AAEA,QAAI,IAAA,CAAC,SAAa,IAAA,CAAC,WAAa,EAAA;AAC9B,UAAA,OAAA;AAAA,SACF;AAEA,QAAA,MAAA,CAAO,OAAO,WAAW,CAAA,CAAA;AAEzB,QAAA,IAAI,CAAC,WAAa,EAAA;AAChB,UAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AAAA,SACvB;AAEA,QAAA,MAAA;AAAA,MACG,KAAA,KAAA;AACH,QACE,IAAA,SAAA,IACA,WACA,IAAA,WAAA,IACA,EAAC,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAa,QACd,CAAA,IAAA,CAAC,aAAc,CAAA,QAAA,CAAS,WAAa,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAA,KAAK,CAC1C,EAAA;AACA,UAAA,MAAA,CAAO,OAAO,WAAW,CAAA,CAAA;AAAA,SAC3B;AACA,QAAA,MAAA;AAAA,KAAA;AAGJ,IAAA,IAAI,SAAW,EAAA;AACb,MAAA,oBAAA,CAAqB,IAAI,CAAA,CAAA;AAAA,KAC3B;AAEA,IAAA,IAAI,SAAa,IAAA,SAAA,CAAU,IAAK,CAAA,EAAA,MAAO,2CAAa,EAAI,CAAA,EAAA;AACtD,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAA,SAAA,CAAU,UAAU,IAAI,CAAA,CAAA;AAAA,KAC1B;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAwC,KAAA;AAC3D,IAAA,eAAA,CAAgB,IAAI,CAAA,CAAA;AACpB,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAM,MAAA,UAAA,GAAa,CAAC,KAAwC,KAAA;AAC1D,IAAA,KAAA,CAAM,OAAQ,EAAA,CAAA;AACd,IAAS,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACX,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAMC,MAAAA,MAAAA,GAAQ,MAAM,MAAO,CAAA,KAAA,CAAA;AAE3B,IAAA,IAAI,CAAC,SAAW,EAAA;AACd,MAAA,OAAA,CAAQ,MAAM,OAAO,CAAA,CAAA;AAAA,KACvB;AAEA,IAAIA,IAAAA,MAAAA,KAAU,EAAM,IAAA,CAAC,WAAa,EAAA;AAChC,MAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AAAA,KACb;AAEA,IAAA,aAAA,CAAcA,MAAK,CAAA,CAAA;AAGnB,IAAA,cAAA,CAAe,MAAM;AACnB,MAAA,IAAIA,WAAU,EAAI,EAAA;AAChB,QAAA,MAAM,YAAY,cAAe,EAAA,CAAA;AACjC,QAAA,IAAI,SAAW,EAAA;AACb,UAAA,SAAA,CAAU,UAAU,IAAI,CAAA,CAAA;AAAA,SAC1B;AAAA,OACK,MAAA;AACL,QAAA,SAAA,CAAU,KAAS,CAAA,CAAA,CAAA;AAAA,OACrB;AAAA,KACD,CAAA,CAAA;AAED,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAM,MAAA,gBAAA,GAAmB,CAAC,KAAA,EAAuB,KAAkB,KAAA;AACjE,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,IAAA,MAAM,UAAU,aAAc,CAAA,KAAA,CAAA,CAAA;AAC9B,IAAA,UAAA,CAAW,OAAO,OAAO,CAAA,CAAA;AAAA,GAC3B,CAAA;AAEA,EAAA,MAAM,sBAAsB,MAAM;AAChC,IAAA,oBAAA,CAAqB,KAAK,CAAA,CAAA;AAAA,GAC5B,CAAA;AAEA,EAAA,MAAM,uBAAuB,MAAM;AACjC,IAAA,SAAA,CAAU,KAAS,CAAA,CAAA,CAAA;AAAA,GACrB,CAAA;AAEA,EAAA,MAAM,mBAAmB,MAAM;AAzVjC,IAAAb,IAAAA,GAAAA,CAAAA;AA0VI,IAAA,CAAAA,GAAA,GAAA,QAAA,CAAS,OAAT,KAAA,IAAA,GAAA,KAAA,CAAA,GAAAA,GAAkB,CAAA,KAAA,EAAA,CAAA;AAAA,GACpB,CAAA;AAGA,EAAAc,eAAA,CAAU,MAAM;AAEd,IAAA,MAAM,WAAc,GAAA,WAAA,GAAc,gBAAiB,CAAA,WAAW,CAAI,GAAA,CAAA,CAAA,CAAA;AAClE,IAAA,IAAI,SAAY,GAAA,KAAA,CAAA,CAAA;AAGhB,IAAA,IAAI,cAAc,CAAI,CAAA,EAAA;AACpB,MAAA,OAAA;AAAA,KACF;AAGA,IAAA,IAAI,CAAC,SAAW,EAAA;AACd,MAAA,SAAA,CAAU,KAAS,CAAA,CAAA,CAAA;AACnB,MAAA,OAAA;AAAA,KACF;AAGA,IAAI,IAAA,aAAA,CAAc,SAAS,CAAG,EAAA;AAC5B,MAAY,SAAA,GAAA,kBAAA;AAAA,QACV,CAAC,MAAA,KAAW,MAAO,CAAA,KAAA,KAAU,aAAc,CAAA,CAAA,CAAA;AAAA,QAC3C,GAAI,EAAA,CAAA;AAAA,KACR;AAGA,IAAA,IAAI,CAAC,SAAW,EAAA;AACd,MAAI,IAAA,OAAA,CAAQ,YAAY,WAAa,EAAA;AACnC,QAAA,SAAA,GAAY,cAAe,EAAA,CAAA;AAC3B,QAAA,oBAAA,CAAqB,IAAI,CAAA,CAAA;AAAA,OAC3B,MAAA,IAAW,OAAQ,CAAA,OAAA,KAAY,SAAW,EAAA;AACxC,QAAA,SAAA,GAAY,aAAc,EAAA,CAAA;AAC1B,QAAA,oBAAA,CAAqB,IAAI,CAAA,CAAA;AAAA,OAC3B;AAAA,KACF;AAGA,IAAA,IAAI,CAAC,SAAW,EAAA;AACd,MAAA,SAAA,GAAY,cAAe,EAAA,CAAA;AAAA,KAC7B;AAEA,IAAA,SAAA,CAAU,uCAAW,IAAI,CAAA,CAAA;AAAA,GACxB,EAAA,CAAC,SAAW,EAAA,QAAQ,CAAC,CAAA,CAAA;AAExB,EAAA,MAAM,WAAWC,WAAM,EAAA,CAAA;AACvB,EAAA,MAAM,SAASA,WAAM,EAAA,CAAA;AAErB,EAAM,MAAA,aAAA,GAAgBJ,qBAA2B,CAAA,OAAA,EAAS,QAAQ,CAAA,CAAA;AAElE,EACE,uBAAAK,eAAA,CAACC,sCAAmB,QAAnB,EAAA;AAAA,IAA4B,KAAO,EAAA,WAAA;AAAA,IAClC,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAAC,mBAAA,EAAA;AAAA,QAEC,QAAA,EAAU,CAAC,QAAA,GAAW,CAAK,CAAA,GAAA,KAAA,CAAA;AAAA,QAC3B,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,YAAA;AAAA,YAC3B,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,iBAAA;AAAA,WAClC;AAAA,UACA,SAAA;AAAA,SACF;AAAA,QACA,YACE,kBAAAJ,eAAA,CAAAK,mBAAA,EAAA;AAAA,UACG,QAAA,EAAA;AAAA,YAAA,YAAA;AAAA,YACA,CAAC,QAAY,IAAA,gBAAA,mBACXH,cAAA,CAAAI,aAAA,EAAA;AAAA,cACC,iBAAA,EAAiBF,SAAK,CAAA,QAAA,EAAU,mBAAmB,CAAA;AAAA,cACnD,YAAW,EAAA,cAAA;AAAA,cACX,eAAe,EAAA,SAAA;AAAA,cACf,eAAA,EAAe,YAAY,MAAS,GAAA,KAAA,CAAA;AAAA,cACpC,eAAc,EAAA,SAAA;AAAA,cACd,QAAA;AAAA,cACA,OAAQ,EAAA,WAAA;AAAA,cACR,OAAS,EAAA,iBAAA;AAAA,cACT,OAAS,EAAA,iBAAA;AAAA,cACT,QAAU,EAAA,CAAA,CAAA;AAAA,cAET,sCACEF,cAAA,CAAAK,mBAAA,EAAA;AAAA,gBAAc,aAAW,EAAA,IAAA;AAAA,eAAC,oBAE1BL,cAAA,CAAAM,qBAAA,EAAA;AAAA,gBAAgB,aAAW,EAAA,IAAA;AAAA,eAAC,CAAA;AAAA,aAEjC,CACE,GAAA,KAAA,CAAA;AAAA,WAAA;AAAA,SACN,CAAA;AAAA,QAEF,QAAU,EAAA,YAAA;AAAA,QACV,IAAK,EAAA,UAAA;AAAA,QACL,QAAA;AAAA,QACA,QAAA;AAAA,QACA,UAAY,EAAA;AAAA,UACV,IAAM,EAAA,UAAA;AAAA,UACN,eAAiB,EAAA,SAAA;AAAA,UACjB,sBAAwB,EAAA,WAAA;AAAA,UACxB,eAAA,EAAiB,YAAY,MAAS,GAAA,KAAA,CAAA;AAAA,UACtC,SAAW,EAAA,aAAA;AAAA,UACX,GAAG,cAAA;AAAA,SACL;AAAA,QACA,yBAAuB,WAAa,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAA,EAAA;AAAA,QACpC,OAAA;AAAA,QACA,QAAA;AAAA,QACA,KAAO,EAAA,UAAA;AAAA,QACP,GAAK,EAAA,SAAA;AAAA,QACL,QAAA;AAAA,QACC,GAAG,iBAAkB,CAAA;AAAA,UACpB,MAAQ,EAAA,UAAA;AAAA,UACR,OAAS,EAAA,WAAA;AAAA,UACT,GAAG,IAAA;AAAA,SACJ,CAAA;AAAA,QACD,KAAA,EACE,WAAc,GAAA,aAAA,CAAc,GAAI,CAAA,CAAC,SAAS,aAAc,CAAA,IAAI,CAAC,CAAA,GAAI,EAAC;AAAA,QAEpE,QAAU,EAAA,QAAA,IAAY,CAAC,YAAA,IAAgB,CAAC,SAAA;AAAA,QACxC,YAAc,EAAA,gBAAA;AAAA,QACd,aAAA,EAAe,CAAC,YAAgB,IAAA,QAAA;AAAA,QAChC,mBACE,EAAA,QAAA,IAAY,aAAc,CAAA,MAAA,GAAS,IAAI,EAAK,GAAA,KAAA,CAAA;AAAA,OAEhD,CAAA;AAAA,sBACCN,cAAA,CAAAO,qBAAA,EAAA;AAAA,QACC,IAAO,EAAA,CAAA,SAAA,IAAa,YAAiB,KAAA,CAAC,QAAY,IAAA,gBAAA;AAAA,QAClD,WAAW,CAAC,SAAA;AAAA,QACZ,GAAK,EAAA,aAAA;AAAA,QACL,EAAI,EAAA,MAAA;AAAA,QACJ,QAAU,EAAA,CAAA,CAAA;AAAA,QACT,GAAG,gBAAiB,CAAA;AAAA,UACnB,WAAa,EAAA,mBAAA;AAAA,UACb,OAAS,EAAA,gBAAA;AAAA,UACT,OAAS,EAAA,gBAAA;AAAA,UACT,YAAc,EAAA,oBAAA;AAAA,SACf,CAAA;AAAA,QACD,MAAM,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,CAAA;AAAA,QACX,KAAK,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,CAAA;AAAA,QACV,QAAU,EAAA,QAAA;AAAA,QACV,KAAA,EAAA,CAAO,EAAS,GAAA,QAAA,CAAA,QAAA,KAAT,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAA;AAAA,QAC1B,MAAA,EAAA,CAAQ,EAAS,GAAA,QAAA,CAAA,QAAA,KAAT,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,YAAA;AAAA,QAE1B,QAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/form-field/FormField.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltFormField {\n  display: inline-grid;\n  position: relative;\n  gap: var(--salt-spacing-100);\n  text-align: left;\n  width: var(--saltFormField-width, 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.saltFormField-labelTop {\n  grid-template-areas:\n    \"label\"\n    \"controls\";\n}\n\n.saltFormField-labelTop .saltFormFieldHelperText {\n  grid-area: 3 / 1;\n}\n\n.saltFormField-labelLeft {\n  align-self: center;\n  grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr;\n  grid-template-areas: \"label controls\";\n}\n\n.saltFormField-labelRight {\n  align-self: center;\n  grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr;\n  grid-template-areas: \"label controls\";\n}\n\n.saltFormField-labelLeft .saltFormFieldHelperText,\n.saltFormField-labelRight .saltFormFieldHelperText {\n  grid-area: 2 / 2;\n}\n\n.saltFormField-labelRight .saltFormFieldLabel,\n.saltFormField-labelLeft .saltFormFieldLabel {\n  padding-top: var(--salt-spacing-100);\n}\n\n.saltFormField-labelRight .saltFormFieldLabel {\n  text-align: right;\n}\n\n.saltFormField-controls {\n  align-items: center;\n  display: grid;\n  grid-auto-columns: minmax(0, 1fr);\n  grid-auto-flow: column;\n  grid-column-gap: var(--salt-spacing-100);\n}\n\n.saltFormFieldLabel {\n  grid-area: label;\n}\n\n.saltFormFieldHelperText {\n  grid-area: helperText;\n}\n\n.saltFormField-disabled {\n  --saltInput-outline: none;\n  --saltCheckbox-outline: none;\n  --saltRadioButton-outline: none;\n}\n";
+var css_248z = ".saltFormField {\n  display: inline-grid;\n  position: relative;\n  gap: var(--salt-spacing-100);\n  text-align: left;\n  width: var(--saltFormField-width, 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.saltFormField-labelTop {\n  gap: var(--salt-spacing-75);\n  grid-template-areas:\n    \"label\"\n    \"controls\";\n}\n\n.saltFormField-labelTop .saltFormFieldHelperText {\n  grid-area: 3 / 1;\n}\n\n.saltFormField-labelLeft {\n  align-self: center;\n  grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr;\n  grid-template-areas: \"label controls\";\n}\n\n.saltFormField-labelRight {\n  align-self: center;\n  grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr;\n  grid-template-areas: \"label controls\";\n}\n\n.saltFormField-labelLeft .saltFormFieldHelperText,\n.saltFormField-labelRight .saltFormFieldHelperText {\n  grid-area: 2 / 2;\n}\n\n.saltFormField-labelRight .saltFormFieldLabel,\n.saltFormField-labelLeft .saltFormFieldLabel {\n  padding-top: var(--salt-spacing-100);\n}\n\n.saltFormField-labelRight .saltFormFieldLabel {\n  text-align: right;\n}\n\n.saltFormField-controls {\n  align-items: center;\n  display: grid;\n  grid-auto-columns: minmax(0, 1fr);\n  grid-auto-flow: column;\n  grid-column-gap: var(--salt-spacing-100);\n}\n\n.saltFormFieldLabel {\n  grid-area: label;\n}\n\n.saltFormFieldHelperText {\n  grid-area: helperText;\n}\n\n.saltFormField-disabled {\n  --saltInput-outline: none;\n  --saltCheckbox-outline: none;\n  --saltRadioButton-outline: none;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=FormField.css.js.map

package/dist-cjs/form-field/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { ForwardedRef, type HTMLAttributes, forwardRef } from \"react\";\nimport { type A11yValueProps, FormFieldContext } from \"../form-field-context\";\nimport { capitalize, makePrefixer, useId } from \"../utils\";\n\nimport formFieldCss from \"./FormField.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\" | \"right\";\n\nexport interface FormFieldProps\n  extends HTMLAttributes<HTMLDivElement>,\n    A11yValueProps {\n  /**\n   * Disabled prop\n   */\n  disabled?: boolean;\n  /**\n   * Location of the label, values: 'top' (default) or 'left'\n   */\n  labelPlacement?: FormFieldLabelPlacement;\n  /**\n   * Readonly prop\n   */\n  readOnly?: boolean;\n  /**\n   * Optional id prop\n   *\n   * Used as suffix of FormFieldLabel id: `label-{id}`\n   * Used as suffix of FormFieldHelperText id: `helperText-{id}`\n   */\n  id?: string;\n  /**\n   * Displays necessity on label\n   */\n  necessity?: \"required\" | \"optional\" | \"asterisk\";\n  /**\n   * Validation status\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(\n  (\n    {\n      children,\n      className,\n      disabled = false,\n      id: idProp,\n      labelPlacement = \"top\",\n      necessity,\n      readOnly = false,\n      validationStatus,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-form-field\",\n      css: formFieldCss,\n      window: targetWindow,\n    });\n\n    const formId = useId(idProp);\n\n    const labelId = formId ? `label-${formId}` : undefined;\n    const helperTextId = formId ? `helperText-${formId}` : undefined;\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(`label${capitalize(labelPlacement)}`)]:\n              labelPlacement,\n          },\n          className,\n        )}\n        {...restProps}\n      >\n        <FormFieldContext.Provider\n          value={{\n            a11yProps: {\n              \"aria-labelledby\": labelId,\n              \"aria-describedby\": helperTextId,\n            },\n            disabled,\n            necessity,\n            readOnly,\n            validationStatus,\n          }}\n        >\n          {children}\n        </FormFieldContext.Provider>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","formFieldCss","useId","jsx","clsx","capitalize","FormFieldContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,EAAI,EAAA,MAAA;AAAA,IACJ,cAAiB,GAAA,KAAA;AAAA,IACjB,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,gBAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAASC,YAAM,MAAM,CAAA,CAAA;AAE3B,IAAM,MAAA,OAAA,GAAU,MAAS,GAAA,CAAA,MAAA,EAAS,MAAW,CAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AAC7C,IAAM,MAAA,YAAA,GAAe,MAAS,GAAA,CAAA,WAAA,EAAc,MAAW,CAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AAEvD,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,CAAA,KAAA,EAAQC,qBAAW,CAAA,cAAc,GAAG,CAChD,GAAA,cAAA;AAAA,SACJ;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,kBAAAF,cAAA,CAACG,kCAAiB,QAAjB,EAAA;AAAA,QACC,KAAO,EAAA;AAAA,UACL,SAAW,EAAA;AAAA,YACT,iBAAmB,EAAA,OAAA;AAAA,YACnB,kBAAoB,EAAA,YAAA;AAAA,WACtB;AAAA,UACA,QAAA;AAAA,UACA,SAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,SACF;AAAA,QAEC,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { ForwardedRef, type HTMLAttributes, forwardRef } from \"react\";\nimport { type A11yValueProps, FormFieldContext } from \"../form-field-context\";\nimport { capitalize, makePrefixer, useId } from \"../utils\";\n\nimport formFieldCss from \"./FormField.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\" | \"right\";\n\nexport interface FormFieldProps\n  extends HTMLAttributes<HTMLDivElement>,\n    A11yValueProps {\n  /**\n   * If `true`, the field will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Location of the label relative to the control.\n   *\n   * Either 'top', 'left', or 'right'`.\n   */\n  labelPlacement?: FormFieldLabelPlacement;\n  /**\n   * If `true`, the field will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * Optional id prop\n   *\n   * Used as suffix of FormFieldLabel id: `label-{id}`\n   * Used as suffix of FormFieldHelperText id: `helperText-{id}`\n   */\n  id?: string;\n  /**\n   * Displays necessity on label\n   */\n  necessity?: \"required\" | \"optional\" | \"asterisk\";\n  /**\n   * Validation status\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(\n  (\n    {\n      children,\n      className,\n      disabled = false,\n      id: idProp,\n      labelPlacement = \"top\",\n      necessity,\n      readOnly = false,\n      validationStatus,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-form-field\",\n      css: formFieldCss,\n      window: targetWindow,\n    });\n\n    const formId = useId(idProp);\n\n    const labelId = formId ? `label-${formId}` : undefined;\n    const helperTextId = formId ? `helperText-${formId}` : undefined;\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(`label${capitalize(labelPlacement)}`)]:\n              labelPlacement,\n          },\n          className,\n        )}\n        {...restProps}\n      >\n        <FormFieldContext.Provider\n          value={{\n            a11yProps: {\n              \"aria-labelledby\": labelId,\n              \"aria-describedby\": helperTextId,\n            },\n            disabled,\n            necessity,\n            readOnly,\n            validationStatus,\n          }}\n        >\n          {children}\n        </FormFieldContext.Provider>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","formFieldCss","useId","jsx","clsx","capitalize","FormFieldContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,EAAI,EAAA,MAAA;AAAA,IACJ,cAAiB,GAAA,KAAA;AAAA,IACjB,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,gBAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAASC,YAAM,MAAM,CAAA,CAAA;AAE3B,IAAM,MAAA,OAAA,GAAU,MAAS,GAAA,CAAA,MAAA,EAAS,MAAW,CAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AAC7C,IAAM,MAAA,YAAA,GAAe,MAAS,GAAA,CAAA,WAAA,EAAc,MAAW,CAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AAEvD,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,CAAA,KAAA,EAAQC,qBAAW,CAAA,cAAc,GAAG,CAChD,GAAA,cAAA;AAAA,SACJ;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,kBAAAF,cAAA,CAACG,kCAAiB,QAAjB,EAAA;AAAA,QACC,KAAO,EAAA;AAAA,UACL,SAAW,EAAA;AAAA,YACT,iBAAmB,EAAA,OAAA;AAAA,YACnB,kBAAoB,EAAA,YAAA;AAAA,WACtB;AAAA,UACA,QAAA;AAAA,UACA,SAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,SACF;AAAA,QAEC,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/form-field/FormFieldHelperText.js

@@ -141,8 +141,8 @@ const FormFieldHelperText = ({
       /* @__PURE__ */ jsxRuntime.jsx(Text.Text, {
         disabled,
         id: a11yProps == null ? void 0 : a11yProps["aria-describedby"],
-        variant: "secondary",
         styleAs: "label",
+        color: validationStatus != null ? validationStatus : "secondary",
         ...restProps,
         children
       })

package/dist-cjs/form-field/FormFieldHelperText.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldHelperText.js","sources":["../src/form-field/FormFieldHelperText.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusIndicator } from \"../status-indicator\";\nimport { Text, type TextProps } from \"../text\";\nimport { makePrefixer } from \"../utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport formFieldHelperTextCss from \"./FormFieldHelperText.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldHelperText\");\n\nexport const FormFieldHelperText = ({\n  className,\n  children,\n  ...restProps\n}: Omit<TextProps<\"label\">, \"variant\" | \"styleAs\">) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-field-helper-text\",\n    css: formFieldHelperTextCss,\n    window: targetWindow,\n  });\n\n  const { a11yProps, disabled, readOnly, validationStatus } =\n    useFormFieldProps();\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        { [withBaseName(\"withValidation\")]: validationStatus },\n        className,\n      )}\n    >\n      {!disabled && !readOnly && validationStatus && (\n        <StatusIndicator status={validationStatus} />\n      )}\n      <Text\n        disabled={disabled}\n        id={a11yProps?.[\"aria-describedby\"]}\n        variant=\"secondary\"\n        styleAs=\"label\"\n        {...restProps}\n      >\n        {children}\n      </Text>\n    </div>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","formFieldHelperTextCss","useFormFieldProps","jsxs","clsx","jsx","StatusIndicator","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,yBAAyB,CAAA,CAAA;AAEpD,MAAM,sBAAsB,CAAC;AAAA,EAClC,SAAA;AAAA,EACA,QAAA;AAAA,EACG,GAAA,SAAA;AACL,CAAuD,KAAA;AACrD,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,6BAAA;AAAA,IACR,GAAK,EAAAC,qBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,QAAU,EAAA,gBAAA,KACrCC,mCAAkB,EAAA,CAAA;AAEpB,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAAC,wBAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,EAAE,CAAC,YAAa,CAAA,gBAAgB,IAAI,gBAAiB,EAAA;AAAA,MACrD,SAAA;AAAA,KACF;AAAA,IAEC,QAAA,EAAA;AAAA,MAAA,CAAC,QAAY,IAAA,CAAC,QAAY,IAAA,gBAAA,oBACxBC,cAAA,CAAAC,+BAAA,EAAA;AAAA,QAAgB,MAAQ,EAAA,gBAAA;AAAA,OAAkB,CAAA;AAAA,sBAE5CD,cAAA,CAAAE,SAAA,EAAA;AAAA,QACC,QAAA;AAAA,QACA,IAAI,SAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,kBAAA,CAAA;AAAA,QAChB,OAAQ,EAAA,WAAA;AAAA,QACR,OAAQ,EAAA,OAAA;AAAA,QACP,GAAG,SAAA;AAAA,QAEH,QAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FormFieldHelperText.js","sources":["../src/form-field/FormFieldHelperText.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusIndicator } from \"../status-indicator\";\nimport { Text, type TextProps } from \"../text\";\nimport { makePrefixer } from \"../utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport formFieldHelperTextCss from \"./FormFieldHelperText.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldHelperText\");\n\nexport const FormFieldHelperText = ({\n  className,\n  children,\n  ...restProps\n}: Omit<TextProps<\"label\">, \"variant\" | \"styleAs\">) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-field-helper-text\",\n    css: formFieldHelperTextCss,\n    window: targetWindow,\n  });\n\n  const { a11yProps, disabled, readOnly, validationStatus } =\n    useFormFieldProps();\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        { [withBaseName(\"withValidation\")]: validationStatus },\n        className,\n      )}\n    >\n      {!disabled && !readOnly && validationStatus && (\n        <StatusIndicator status={validationStatus} />\n      )}\n      <Text\n        disabled={disabled}\n        id={a11yProps?.[\"aria-describedby\"]}\n        styleAs=\"label\"\n        color={validationStatus ?? \"secondary\"}\n        {...restProps}\n      >\n        {children}\n      </Text>\n    </div>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","formFieldHelperTextCss","useFormFieldProps","jsxs","clsx","jsx","StatusIndicator","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,yBAAyB,CAAA,CAAA;AAEpD,MAAM,sBAAsB,CAAC;AAAA,EAClC,SAAA;AAAA,EACA,QAAA;AAAA,EACG,GAAA,SAAA;AACL,CAAuD,KAAA;AACrD,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,6BAAA;AAAA,IACR,GAAK,EAAAC,qBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,QAAU,EAAA,gBAAA,KACrCC,mCAAkB,EAAA,CAAA;AAEpB,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAAC,wBAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,EAAE,CAAC,YAAa,CAAA,gBAAgB,IAAI,gBAAiB,EAAA;AAAA,MACrD,SAAA;AAAA,KACF;AAAA,IAEC,QAAA,EAAA;AAAA,MAAA,CAAC,QAAY,IAAA,CAAC,QAAY,IAAA,gBAAA,oBACxBC,cAAA,CAAAC,+BAAA,EAAA;AAAA,QAAgB,MAAQ,EAAA,gBAAA;AAAA,OAAkB,CAAA;AAAA,sBAE5CD,cAAA,CAAAE,SAAA,EAAA;AAAA,QACC,QAAA;AAAA,QACA,IAAI,SAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,kBAAA,CAAA;AAAA,QAChB,OAAQ,EAAA,OAAA;AAAA,QACR,OAAO,gBAAoB,IAAA,IAAA,GAAA,gBAAA,GAAA,WAAA;AAAA,QAC1B,GAAG,SAAA;AAAA,QAEH,QAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}