@salt-ds/core 1.8.0-rc.3 → 1.8.0-rc.4

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltAccordion {\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=Accordion.css.js.map

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

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

package/dist-cjs/accordion/Accordion.js

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var AccordionContext = require('./AccordionContext.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var makePrefixer = require('../utils/makePrefixer.js');
+var useControlled = require('../utils/useControlled.js');
+require('../utils/useFloatingUI.js');
+var useId = require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var Accordion$1 = require('./Accordion.css.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltAccordion");
+const Accordion = React.forwardRef(
+  function Accordion2(props, ref) {
+    const {
+      className,
+      defaultExpanded,
+      expanded: expandedProp,
+      disabled,
+      id: idProp,
+      onToggle,
+      value,
+      ...rest
+    } = props;
+    const id = useId.useId(idProp);
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-accordion",
+      css: Accordion$1,
+      window: targetWindow
+    });
+    const [expanded, setExpanded] = useControlled.useControlled({
+      controlled: expandedProp,
+      default: Boolean(defaultExpanded),
+      name: "Accordion",
+      state: "expanded"
+    });
+    const toggle = (event) => {
+      setExpanded((prev) => !prev);
+      onToggle == null ? void 0 : onToggle(event);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.AccordionContext.Provider, {
+      value: {
+        value,
+        toggle,
+        expanded,
+        disabled: Boolean(disabled),
+        id: id != null ? id : ""
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+        ref,
+        className: clsx.clsx(withBaseName(), className),
+        ...rest
+      })
+    });
+  }
+);
+
+exports.Accordion = Accordion;
+//# sourceMappingURL=Accordion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sources":["../src/accordion/Accordion.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, SyntheticEvent } from \"react\";\nimport { clsx } from \"clsx\";\nimport { AccordionContext } from \"./AccordionContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport accordionCss from \"./Accordion.css\";\nexport interface AccordionProps extends ComponentPropsWithoutRef<\"div\"> {\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   * Callback fired when the accordion is toggled.\n   * @param event\n   */\n  onToggle?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  /**\n   * Whether the accordion is disabled.\n   */\n  disabled?: boolean;\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      id: idProp,\n      onToggle,\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          disabled: Boolean(disabled),\n          id: id ?? \"\",\n        }}\n      >\n        <div ref={ref} className={clsx(withBaseName(), className)} {...rest} />\n      </AccordionContext.Provider>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","Accordion","useId","useWindow","useComponentCssInjection","accordionCss","useControlled","jsx","AccordionContext","clsx"],"mappings":";;;;;;;;;;;;;;;;;;AA+BA,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,EAAI,EAAA,MAAA;AAAA,MACJ,QAAA;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,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,QAC1B,IAAI,EAAM,IAAA,IAAA,GAAA,EAAA,GAAA,EAAA;AAAA,OACZ;AAAA,MAEA,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,GAAA;AAAA,QAAU,SAAW,EAAAE,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QAAI,GAAG,IAAA;AAAA,OAAM,CAAA;AAAA,KACvE,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/accordion/AccordionContext.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var createContext = require('../utils/createContext.js');
+require('../utils/useFloatingUI.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+require('clsx');
+
+const AccordionContext = createContext.createContext(
+  "AccordionContext",
+  {
+    value: "",
+    expanded: false,
+    toggle: () => void 0,
+    disabled: false,
+    id: ""
+  }
+);
+function useAccordion() {
+  return React.useContext(AccordionContext);
+}
+
+exports.AccordionContext = AccordionContext;
+exports.useAccordion = useAccordion;
+//# sourceMappingURL=AccordionContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionContext.js","sources":["../src/accordion/AccordionContext.ts"],"sourcesContent":["import { 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  id: string;\n}\n\nexport const AccordionContext = createContext<AccordionContextValue>(\n  \"AccordionContext\",\n  {\n    value: \"\",\n    expanded: false,\n    toggle: () => undefined,\n    disabled: false,\n    id: \"\",\n  }\n);\n\nexport function useAccordion() {\n  return useContext(AccordionContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;;AAWO,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,EAAI,EAAA,EAAA;AAAA,GACN;AACF,EAAA;AAEO,SAAS,YAAe,GAAA;AAC7B,EAAA,OAAOC,iBAAW,gBAAgB,CAAA,CAAA;AACpC;;;;;"}

package/dist-cjs/accordion/AccordionGroup.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var makePrefixer = require('../utils/makePrefixer.js');
+require('../utils/useFloatingUI.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltAccordionGroup");
+const AccordionGroup = React.forwardRef(
+  function AccordionGroup2(props, ref) {
+    const { className, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: clsx.clsx(withBaseName(), className),
+      ref,
+      ...rest
+    });
+  }
+);
+
+exports.AccordionGroup = AccordionGroup;
+//# sourceMappingURL=AccordionGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionGroup.js","sources":["../src/accordion/AccordionGroup.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\n\nexport type AccordionGroupProps = ComponentPropsWithoutRef<\"div\">;\n\nconst withBaseName = makePrefixer(\"saltAccordionGroup\");\n\nexport const AccordionGroup = forwardRef<HTMLDivElement, AccordionGroupProps>(\n  function AccordionGroup(props, ref) {\n    const { className, ...rest } = props;\n\n    return (\n      <div className={clsx(withBaseName(), className)} ref={ref} {...rest} />\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","AccordionGroup","jsx","clsx"],"mappings":";;;;;;;;;;;;;AAMA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAAC,gBAAA;AAAA,EAC5B,SAASC,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAE/B,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAAW,GAAG,IAAA;AAAA,KAAM,CAAA,CAAA;AAAA,GAEzE;AACF;;;;"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltAccordionHeader {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  padding-block: var(--salt-spacing-50);\n  padding-inline: var(--salt-spacing-100);\n  align-items: center;\n  border: 0;\n  width: 100%;\n  min-height: var(--salt-size-base);\n  background: var(--salt-actionable-secondary-background);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  color: var(--salt-text-primary-foreground);\n  --saltIcon-color: var(--salt-text-primary-foreground);\n  text-align: left;\n}\n\n.saltAccordionHeader:focus-visible {\n  background: var(--salt-actionable-primary-background-hover);\n  outline: var(--salt-focused-outline);\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .saltAccordionHeader:hover {\n    background: var(--salt-actionable-primary-background-hover);\n  }\n}\n\n.saltAccordionHeader:disabled {\n  background: var(--salt-actionable-secondary-background);\n  color: var(--salt-text-primary-foreground-disabled);\n  --saltIcon-fill: var(--salt-text-primary-foreground-disabled);\n}\n\n.saltAccordionHeader-icon {\n  transition: transform var(--salt-duration-instant) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.saltAccordionHeader[aria-expanded=\"true\"] > .saltAccordionHeader-icon {\n  transform: rotate(90deg);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=AccordionHeader.css.js.map

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

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

package/dist-cjs/accordion/AccordionHeader.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var icons = require('@salt-ds/icons');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var makePrefixer = require('../utils/makePrefixer.js');
+require('../utils/useFloatingUI.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var AccordionContext = require('./AccordionContext.js');
+var AccordionHeader$1 = require('./AccordionHeader.css.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltAccordionHeader");
+const AccordionHeader = React.forwardRef(function AccordionHeader2(props, ref) {
+  const { children, className, onClick, ...rest } = props;
+  const { value, expanded, toggle, disabled, id } = AccordionContext.useAccordion();
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-accordion-header",
+    css: AccordionHeader$1,
+    window: targetWindow
+  });
+  const handleClick = (event) => {
+    toggle(event);
+    onClick == null ? void 0 : onClick(event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("button", {
+    ref,
+    className: clsx.clsx(withBaseName(), className),
+    disabled,
+    onClick: handleClick,
+    "aria-expanded": expanded,
+    id: `${id}-header`,
+    "aria-controls": `${id}-panel`,
+    value,
+    ...rest,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {
+        "aria-hidden": "true",
+        className: withBaseName("icon")
+      }),
+      children
+    ]
+  });
+});
+
+exports.AccordionHeader = AccordionHeader;
+//# sourceMappingURL=AccordionHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionHeader.js","sources":["../src/accordion/AccordionHeader.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, MouseEvent } from \"react\";\nimport { clsx } from \"clsx\";\nimport { ChevronRightIcon } from \"@salt-ds/icons\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { makePrefixer } from \"../utils\";\n\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionHeaderCss from \"./AccordionHeader.css\";\n\nexport type AccordionHeaderProps = ComponentPropsWithoutRef<\"button\">;\n\nconst withBaseName = makePrefixer(\"saltAccordionHeader\");\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, disabled, id } = 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(withBaseName(), className)}\n      disabled={disabled}\n      onClick={handleClick}\n      aria-expanded={expanded}\n      id={`${id}-header`}\n      aria-controls={`${id}-panel`}\n      value={value}\n      {...rest}\n    >\n      <ChevronRightIcon aria-hidden=\"true\" className={withBaseName(\"icon\")} />\n      {children}\n    </button>\n  );\n});\n"],"names":["makePrefixer","forwardRef","AccordionHeader","useAccordion","useWindow","useComponentCssInjection","accordionHeaderCss","jsxs","clsx","jsx","ChevronRightIcon"],"mappings":";;;;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,0BAAa,qBAAqB,CAAA,CAAA;AAEhD,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,EAAA,MAAM,EAAE,KAAO,EAAA,QAAA,EAAU,QAAQ,QAAU,EAAA,EAAA,KAAOC,6BAAa,EAAA,CAAA;AAE/D,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,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,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,IACC,GAAG,IAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAAC,sBAAA,EAAA;AAAA,QAAiB,aAAY,EAAA,MAAA;AAAA,QAAO,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAA;AAAA,MACrE,QAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltAccordionPanel {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--salt-duration-perceptible) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.saltAccordionHeader[aria-expanded=\"true\"] + .saltAccordionPanel {\n  grid-template-rows: 1fr;\n}\n\n.saltAccordionPanel-inner {\n  overflow: hidden;\n}\n\n.saltAccordionPanel-content {\n  padding: var(--salt-spacing-200);\n  padding-left: calc(var(--salt-spacing-200) + var(--salt-size-icon));\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=AccordionPanel.css.js.map

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

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

package/dist-cjs/accordion/AccordionPanel.js

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var clsx = require('clsx');
+var makePrefixer = require('../utils/makePrefixer.js');
+require('../utils/useFloatingUI.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var AccordionContext = require('./AccordionContext.js');
+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 targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-accordion-panel",
+      css: AccordionPanel$1,
+      window: targetWindow
+    });
+    const { id, expanded } = AccordionContext.useAccordion();
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
+      ref,
+      className: clsx.clsx(withBaseName(), className),
+      role: "region",
+      id: `${id}-panel`,
+      "aria-labelledby": `${id}-header`,
+      "aria-hidden": !expanded ? "true" : void 0,
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: withBaseName("inner"),
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: withBaseName("content"),
+          children
+        })
+      })
+    });
+  }
+);
+
+exports.AccordionPanel = AccordionPanel;
+//# sourceMappingURL=AccordionPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionPanel.js","sources":["../src/accordion/AccordionPanel.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\n\nimport { makePrefixer } from \"../utils\";\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionPanelCss from \"./AccordionPanel.css\";\n\nexport type AccordionPanelProps = ComponentPropsWithoutRef<\"div\">;\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 } = 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        {...rest}\n      >\n        <div className={withBaseName(\"inner\")}>\n          <div className={withBaseName(\"content\")}>{children}</div>\n        </div>\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","AccordionPanel","useWindow","useComponentCssInjection","accordionPanelCss","useAccordion","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;AAWA,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,QAAS,EAAA,GAAIC,6BAAa,EAAA,CAAA;AAEtC,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,MACjC,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,UAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,UAAI,QAAA;AAAA,SAAS,CAAA;AAAA,OACrD,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/checkbox/Checkbox.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to root component */\n.saltCheckbox {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltCheckbox-disabled {\n  color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltCheckbox-readOnly {\n  color: var(--salt-text-primary-foreground);\n  cursor: var(--salt-selectable-cursor-readonly);\n}\n\n/* Styles applied to the icon component if focused */\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline: var(--saltCheckbox-outline, var(--salt-focused-outline));\n  border-color: var(--salt-selectable-foreground-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-color: var(--salt-status-error-foreground);\n  border-color: var(--salt-status-error-foreground);\n  color: var(--salt-status-error-foreground);\n}\n\n.saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-color: var(--salt-status-warning-foreground);\n  border-color: var(--salt-status-warning-foreground);\n  color: var(--salt-status-warning-foreground);\n}\n\n/* Styles applied to input element */\n.saltCheckbox-input {\n  cursor: inherit;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  z-index: var(--salt-zIndex-default);\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltCheckbox {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltCheckbox-disabled {\n  color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltCheckbox-readOnly {\n  color: var(--salt-text-primary-foreground);\n  cursor: var(--salt-selectable-cursor-readonly);\n}\n\n/* Styles applied to the icon component if focused */\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline: var(--saltCheckbox-outline, var(--salt-focused-outline));\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-color: var(--salt-status-error-foreground);\n  border-color: var(--salt-status-error-foreground);\n  color: var(--salt-status-error-foreground);\n}\n\n.saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-color: var(--salt-status-warning-foreground);\n  border-color: var(--salt-status-warning-foreground);\n  color: var(--salt-status-warning-foreground);\n}\n\n/* Styles applied to input element */\n.saltCheckbox-input {\n  cursor: inherit;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  z-index: var(--salt-zIndex-default);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Checkbox.css.js.map

package/dist-cjs/checkbox/CheckboxIcon.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltCheckboxIcon {\n  --checkbox-size: var(--salt-size-selectable);\n  width: var(--checkbox-size);\n  min-width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  min-height: var(--checkbox-size);\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  position: relative;\n  --saltIcon-color: currentColor;\n  --saltIcon-size: 100%;\n  display: flex;\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  background: var(--salt-container-primary-background-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: calc(var(--checkbox-size) - 6px);\n  height: 2px;\n  background: currentColor;\n  transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n  color: var(--salt-status-error-foreground);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n  color: var(--salt-status-warning-foreground);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  color: var(--salt-text-primary-foreground);\n}\n";
+var css_248z = ".saltCheckboxIcon {\n  --checkbox-size: var(--salt-size-selectable);\n  width: var(--checkbox-size);\n  min-width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  min-height: var(--checkbox-size);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  position: relative;\n  --saltIcon-color: currentColor;\n  --saltIcon-size: 100%;\n  display: flex;\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  background: var(--salt-container-primary-background-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: calc(var(--checkbox-size) - 6px);\n  height: 2px;\n  background: currentColor;\n  transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n  color: var(--salt-status-error-foreground);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n  color: var(--salt-status-warning-foreground);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  color: var(--salt-text-primary-foreground);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=CheckboxIcon.css.js.map

package/dist-cjs/index.js

@@ -2,6 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var AccordionGroup = require('./accordion/AccordionGroup.js');
+var AccordionPanel = require('./accordion/AccordionPanel.js');
+var Accordion = require('./accordion/Accordion.js');
+var AccordionHeader = require('./accordion/AccordionHeader.js');
 var AriaAnnouncerContext = require('./aria-announcer/AriaAnnouncerContext.js');
 var AriaAnnounce = require('./aria-announcer/AriaAnnounce.js');
 var AriaAnnouncerProvider = require('./aria-announcer/AriaAnnouncerProvider.js');
@@ -51,6 +55,9 @@ var Theme = require('./theme/Theme.js');
 var Mode = require('./theme/Mode.js');
 var SaltProvider = require('./salt-provider/SaltProvider.js');
 var SplitLayout = require('./split-layout/SplitLayout.js');
+var ToggleButton = require('./toggle-button/ToggleButton.js');
+var ToggleButtonGroup = require('./toggle-button-group/ToggleButtonGroup.js');
+var ToggleButtonGroupContext = require('./toggle-button-group/ToggleButtonGroupContext.js');
 var Tooltip = require('./tooltip/Tooltip.js');
 var useTooltip = require('./tooltip/useTooltip.js');
 var capitalize = require('./utils/capitalize.js');
@@ -75,6 +82,10 @@ var ViewportProvider = require('./viewport/ViewportProvider.js');
 
 
 
+exports.AccordionGroup = AccordionGroup.AccordionGroup;
+exports.AccordionPanel = AccordionPanel.AccordionPanel;
+exports.Accordion = Accordion.Accordion;
+exports.AccordionHeader = AccordionHeader.AccordionHeader;
 exports.AriaAnnouncerContext = AriaAnnouncerContext.AriaAnnouncerContext;
 exports.AriaAnnounce = AriaAnnounce.AriaAnnounce;
 exports.ARIA_ANNOUNCE_DELAY = AriaAnnouncerProvider.ARIA_ANNOUNCE_DELAY;
@@ -144,6 +155,9 @@ exports.useBreakpoints = SaltProvider.useBreakpoints;
 exports.useDensity = SaltProvider.useDensity;
 exports.useTheme = SaltProvider.useTheme;
 exports.SplitLayout = SplitLayout.SplitLayout;
+exports.ToggleButton = ToggleButton.ToggleButton;
+exports.ToggleButtonGroup = ToggleButtonGroup.ToggleButtonGroup;
+exports.useToggleButtonGroup = ToggleButtonGroupContext.useToggleButtonGroup;
 exports.Tooltip = Tooltip.Tooltip;
 exports.useTooltip = useTooltip.useTooltip;
 exports.capitalize = capitalize.capitalize;

package/dist-cjs/index.js.map

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

package/dist-cjs/radio-button/RadioButton.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to RadioButton container */\n.saltRadioButton {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  cursor: var(--salt-selectable-cursor-hover);\n  position: relative;\n}\n\n/* Styles applied when RadioButton is disabled */\n.saltRadioButton-disabled {\n  color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltRadioButton-readOnly {\n  color: var(--salt-text-primary-foreground);\n  cursor: var(--salt-selectable-cursor-readonly);\n}\n\n/* Styles applied to input component */\n.saltRadioButton-input {\n  cursor: inherit;\n  position: absolute;\n  opacity: 0;\n  top: 0;\n  left: 0;\n  margin: 0;\n  padding: 0;\n  z-index: var(--salt-zIndex-default);\n}\n\n/* Styles applied to icon when :focus-visible */\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n  outline: var(--saltRadioButton-outline, var(--salt-focused-outline));\n  outline-offset: var(--salt-focused-outlineOffset);\n  border-color: var(--salt-selectable-foreground-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltRadioButton-error .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n  outline-color: var(--salt-status-error-foreground);\n  border-color: var(--salt-status-error-foreground);\n  color: var(--salt-status-error-foreground);\n}\n\n.saltRadioButton-warning .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n  outline-color: var(--salt-status-warning-foreground);\n  border-color: var(--salt-status-warning-foreground);\n  color: var(--salt-status-warning-foreground);\n}\n";
+var css_248z = "/* Styles applied to RadioButton container */\n.saltRadioButton {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  cursor: var(--salt-selectable-cursor-hover);\n  position: relative;\n}\n\n/* Styles applied when RadioButton is disabled */\n.saltRadioButton-disabled {\n  color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltRadioButton-readOnly {\n  color: var(--salt-text-primary-foreground);\n  cursor: var(--salt-selectable-cursor-readonly);\n}\n\n/* Styles applied to input component */\n.saltRadioButton-input {\n  cursor: inherit;\n  position: absolute;\n  opacity: 0;\n  top: 0;\n  left: 0;\n  margin: 0;\n  padding: 0;\n  z-index: var(--salt-zIndex-default);\n}\n\n/* Styles applied to icon when :focus-visible */\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n  outline: var(--saltRadioButton-outline, var(--salt-focused-outline));\n  outline-offset: var(--salt-focused-outlineOffset);\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltRadioButton-error .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n  outline-color: var(--salt-status-error-foreground);\n  border-color: var(--salt-status-error-foreground);\n  color: var(--salt-status-error-foreground);\n}\n\n.saltRadioButton-warning .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n  outline-color: var(--salt-status-warning-foreground);\n  border-color: var(--salt-status-warning-foreground);\n  color: var(--salt-status-warning-foreground);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=RadioButton.css.js.map

package/dist-cjs/radio-button/RadioButtonIcon.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to radio button icon */\n.saltRadioButtonIcon {\n  --radioButton-size: var(--salt-size-selectable);\n  width: var(--radioButton-size);\n  height: var(--radioButton-size);\n  min-width: var(--radioButton-size);\n  min-height: var(--radioButton-size);\n  border-radius: 50%;\n\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  --saltIcon-color: currentColor;\n  --saltIcon-size: 100%;\n  display: flex;\n}\n\n.saltRadioButton:hover .saltRadioButtonIcon {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltRadioButtonIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltRadioButtonIcon-disabled,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  background: var(--salt-container-primary-background-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled,\n.saltRadioButton:hover .saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltRadioButtonIcon-error,\n.saltRadioButton:hover .saltRadioButtonIcon-error {\n  color: var(--salt-status-error-foreground);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground);\n}\n\n.saltRadioButtonIcon-warning,\n.saltRadioButton:hover .saltRadioButtonIcon-warning {\n  color: var(--salt-status-warning-foreground);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground);\n}\n\n.saltRadioButtonIcon-readOnly,\n.saltRadioButton:hover .saltRadioButtonIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  color: var(--salt-text-primary-foreground);\n}\n";
+var css_248z = "/* Styles applied to radio button icon */\n.saltRadioButtonIcon {\n  --radioButton-size: var(--salt-size-selectable);\n  width: var(--radioButton-size);\n  height: var(--radioButton-size);\n  min-width: var(--radioButton-size);\n  min-height: var(--radioButton-size);\n  border-radius: 50%;\n\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  --saltIcon-color: currentColor;\n  --saltIcon-size: 100%;\n  display: flex;\n}\n\n.saltRadioButton:hover .saltRadioButtonIcon {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltRadioButtonIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltRadioButtonIcon-disabled,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  background: var(--salt-container-primary-background-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled,\n.saltRadioButton:hover .saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltRadioButtonIcon-error,\n.saltRadioButton:hover .saltRadioButtonIcon-error {\n  color: var(--salt-status-error-foreground);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground);\n}\n\n.saltRadioButtonIcon-warning,\n.saltRadioButton:hover .saltRadioButtonIcon-warning {\n  color: var(--salt-status-warning-foreground);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground);\n}\n\n.saltRadioButtonIcon-readOnly,\n.saltRadioButton:hover .saltRadioButtonIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  color: var(--salt-text-primary-foreground);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=RadioButtonIcon.css.js.map

package/dist-cjs/toggle-button/ToggleButton.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltToggleButton {\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  display: inline-flex;\n  background: var(--salt-actionable-secondary-background);\n  border: 0 solid transparent;\n  border-radius: 0;\n  height: var(--salt-size-base);\n  color: var(--salt-actionable-secondary-foreground);\n  text-transform: var(--salt-actionable-textTransform);\n  font-weight: var(--salt-actionable-secondary-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  text-align: var(--salt-actionable-textAlign);\n  letter-spacing: var(--salt-actionable-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  padding-inline: var(--salt-spacing-100);\n  gap: var(--salt-spacing-50);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground);\n}\n\n.saltToggleButton:hover {\n  background: var(--salt-actionable-secondary-background-hover);\n  color: var(--salt-actionable-secondary-foreground-hover);\n  cursor: var(--salt-actionable-cursor-hover);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltToggleButton:focus-visible {\n  outline: var(--salt-focused-outline);\n  background: var(--salt-actionable-secondary-background-hover);\n  color: var(--salt-actionable-secondary-foreground-hover);\n  cursor: var(--salt-actionable-cursor-hover);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"]:focus-visible {\n  background: var(--salt-actionable-secondary-background-active);\n  color: var(--salt-actionable-secondary-foreground-active);\n  cursor: var(--salt-actionable-cursor-active);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltToggleButton[aria-checked=\"true\"] {\n  background: var(--salt-actionable-secondary-background-active);\n  color: var(--salt-actionable-secondary-foreground-active);\n  cursor: var(--salt-actionable-cursor-active);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltToggleButton:disabled {\n  background: var(--salt-actionable-secondary-background-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\n  color: var(--salt-actionable-secondary-foreground-disabled);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-disabled);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=ToggleButton.css.js.map

package/dist-cjs/toggle-button/ToggleButton.css.js.map

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

package/dist-cjs/toggle-button/ToggleButton.js

@@ -0,0 +1,81 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+require('../toggle-button-group/ToggleButtonGroup.js');
+var ToggleButtonGroupContext = require('../toggle-button-group/ToggleButtonGroupContext.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var makePrefixer = require('../utils/makePrefixer.js');
+var useControlled = require('../utils/useControlled.js');
+require('../utils/useFloatingUI.js');
+var useForkRef = require('../utils/useForkRef.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var ToggleButton$1 = require('./ToggleButton.css.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltToggleButton");
+const ToggleButton = React.forwardRef(
+  function ToggleButton2(props, ref) {
+    const {
+      children,
+      className,
+      disabled: disabledProp,
+      value,
+      onClick,
+      onFocus,
+      onChange,
+      selected: selectedProp,
+      ...rest
+    } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-toggle-button",
+      css: ToggleButton$1,
+      window: targetWindow
+    });
+    const buttonRef = React.useRef(null);
+    const handleRef = useForkRef.useForkRef(ref, buttonRef);
+    const toggleButtonGroup = ToggleButtonGroupContext.useToggleButtonGroup();
+    const toggleButtonGroupSelected = toggleButtonGroup ? toggleButtonGroup.isSelected(value) : selectedProp;
+    const focusable = toggleButtonGroup ? toggleButtonGroup == null ? void 0 : toggleButtonGroup.isFocused(value) : true;
+    const disabled = (toggleButtonGroup == null ? void 0 : toggleButtonGroup.disabled) || disabledProp;
+    const [selected, setSelected] = useControlled.useControlled({
+      controlled: toggleButtonGroupSelected,
+      default: Boolean(selectedProp),
+      name: "ToggleButton",
+      state: "selected"
+    });
+    const handleClick = (event) => {
+      toggleButtonGroup == null ? void 0 : toggleButtonGroup.select(event);
+      setSelected(!selected);
+      onChange == null ? void 0 : onChange(event);
+      onClick == null ? void 0 : onClick(event);
+    };
+    const handleFocus = (event) => {
+      toggleButtonGroup == null ? void 0 : toggleButtonGroup.focus(value);
+      onFocus == null ? void 0 : onFocus(event);
+    };
+    const ariaChecked = selected && !disabled;
+    return /* @__PURE__ */ jsxRuntime.jsx("button", {
+      "aria-checked": ariaChecked,
+      className: clsx.clsx(withBaseName(), className),
+      disabled,
+      role: toggleButtonGroup ? "radio" : "checkbox",
+      ref: handleRef,
+      onClick: handleClick,
+      onFocus: handleFocus,
+      tabIndex: focusable && !disabled ? 0 : -1,
+      value,
+      ...rest,
+      children
+    });
+  }
+);
+
+exports.ToggleButton = ToggleButton;
+//# sourceMappingURL=ToggleButton.js.map

package/dist-cjs/toggle-button/ToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  forwardRef,\n  useRef,\n  MouseEvent,\n  FocusEvent,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useToggleButtonGroup } from \"../toggle-button-group\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nexport interface ToggleButtonProps extends ComponentProps<\"button\"> {\n  selected?: boolean;\n  onChange?: (event: MouseEvent<HTMLButtonElement>) => void;\n  value: string | ReadonlyArray<string> | number | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n  function ToggleButton(props, ref) {\n    const {\n      children,\n      className,\n      disabled: disabledProp,\n      value,\n      onClick,\n      onFocus,\n      onChange,\n      selected: selectedProp,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-toggle-button\",\n      css: toggleButtonCss,\n      window: targetWindow,\n    });\n\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const handleRef = useForkRef(ref, buttonRef);\n\n    const toggleButtonGroup = useToggleButtonGroup();\n\n    const toggleButtonGroupSelected = toggleButtonGroup\n      ? toggleButtonGroup.isSelected(value)\n      : selectedProp;\n    const focusable = toggleButtonGroup\n      ? toggleButtonGroup?.isFocused(value)\n      : true;\n    const disabled = toggleButtonGroup?.disabled || disabledProp;\n\n    const [selected, setSelected] = useControlled({\n      controlled: toggleButtonGroupSelected,\n      default: Boolean(selectedProp),\n      name: \"ToggleButton\",\n      state: \"selected\",\n    });\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      toggleButtonGroup?.select(event);\n      setSelected(!selected);\n      onChange?.(event);\n      onClick?.(event);\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n      toggleButtonGroup?.focus(value);\n      onFocus?.(event);\n    };\n\n    const ariaChecked = selected && !disabled;\n\n    return (\n      <button\n        aria-checked={ariaChecked}\n        className={clsx(withBaseName(), className)}\n        disabled={disabled}\n        role={toggleButtonGroup ? \"radio\" : \"checkbox\"}\n        ref={handleRef}\n        onClick={handleClick}\n        onFocus={handleFocus}\n        tabIndex={focusable && !disabled ? 0 : -1}\n        value={value}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","ToggleButton","useWindow","useComponentCssInjection","toggleButtonCss","useRef","useForkRef","useToggleButtonGroup","useControlled","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;AAqBA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA,CAAA;AAE7C,MAAM,YAAe,GAAAC,gBAAA;AAAA,EAC1B,SAASC,aAAa,CAAA,KAAA,EAAO,GAAK,EAAA;AAChC,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,KAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAU,EAAA,YAAA;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,oBAAA;AAAA,MACR,GAAK,EAAAC,cAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,SAAA,GAAYC,aAA0B,IAAI,CAAA,CAAA;AAChD,IAAM,MAAA,SAAA,GAAYC,qBAAW,CAAA,GAAA,EAAK,SAAS,CAAA,CAAA;AAE3C,IAAA,MAAM,oBAAoBC,6CAAqB,EAAA,CAAA;AAE/C,IAAA,MAAM,yBAA4B,GAAA,iBAAA,GAC9B,iBAAkB,CAAA,UAAA,CAAW,KAAK,CAClC,GAAA,YAAA,CAAA;AACJ,IAAA,MAAM,SAAY,GAAA,iBAAA,GACd,iBAAmB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAA,SAAA,CAAU,KAC7B,CAAA,GAAA,IAAA,CAAA;AACJ,IAAM,MAAA,QAAA,GAAA,CAAW,uDAAmB,QAAY,KAAA,YAAA,CAAA;AAEhD,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,2BAAc,CAAA;AAAA,MAC5C,UAAY,EAAA,yBAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,YAAY,CAAA;AAAA,MAC7B,IAAM,EAAA,cAAA;AAAA,MACN,KAAO,EAAA,UAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,MAAA,iBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAmB,MAAO,CAAA,KAAA,CAAA,CAAA;AAC1B,MAAA,WAAA,CAAY,CAAC,QAAQ,CAAA,CAAA;AACrB,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AACX,MAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACZ,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,MAAA,iBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAmB,KAAM,CAAA,KAAA,CAAA,CAAA;AACzB,MAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACZ,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,YAAY,CAAC,QAAA,CAAA;AAEjC,IAAA,uBACGC,cAAA,CAAA,QAAA,EAAA;AAAA,MACC,cAAc,EAAA,WAAA;AAAA,MACd,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,QAAA;AAAA,MACA,IAAA,EAAM,oBAAoB,OAAU,GAAA,UAAA;AAAA,MACpC,GAAK,EAAA,SAAA;AAAA,MACL,OAAS,EAAA,WAAA;AAAA,MACT,OAAS,EAAA,WAAA;AAAA,MACT,QAAU,EAAA,SAAA,IAAa,CAAC,QAAA,GAAW,CAAI,GAAA,CAAA,CAAA;AAAA,MACvC,KAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

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

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

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

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