@salt-ds/core 1.30.0 → 1.32.0

package/css/salt-core.css

@@ -51,10 +51,6 @@
 }
 .saltAccordionHeader .saltAccordionHeader-icon {
   height: var(--salt-size-base);
-  transition: transform var(--salt-duration-perceptible) ease-in-out;
-}
-.saltAccordionHeader[aria-expanded=true] > .saltAccordionHeader-icon {
-  transform: rotate(90deg);
 }
 .saltAccordionHeader-error {
   background: var(--salt-status-error-background);
@@ -101,11 +97,14 @@
   overflow: hidden;
 }
 .saltAccordionPanel-content {
-  padding-left: calc(var(--salt-spacing-200) + var(--salt-size-icon));
+  padding-left: var(--salt-spacing-100);
   padding-right: var(--salt-spacing-100);
   padding-top: var(--salt-spacing-300);
   padding-bottom: var(--salt-spacing-300);
 }
+.saltAccordionPanel-indentedContent {
+  padding-left: calc(var(--salt-spacing-200) + var(--salt-size-icon));
+}
 @media (prefers-reduced-motion: reduce) {
   .saltAccordionPanel {
     transition: none;
@@ -341,7 +340,7 @@
   border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));
 }
 .saltButton.saltButton-active:focus-visible,
-.saltButton:focus-visible(:active) {
+.saltButton:focus-visible:active {
   background: var(--saltButton-background-active-hover, var(--button-background));
   color: var(--saltButton-text-color-active-hover, var(--button-text-color));
   border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));
@@ -898,9 +897,13 @@ a:focus .saltCard-interactable.saltCard-disabled {
 
 /* src/dropdown/Dropdown.css */
 .saltDropdown {
+  --dropdown-border: none;
   --dropdown-borderColor: var(--salt-editable-borderColor);
   --dropdown-color: var(--salt-content-primary-foreground);
   --dropdown-cursor: var(--salt-selectable-cursor-hover);
+  --dropdown-borderStyle: var(--salt-editable-borderStyle);
+  --dropdown-outlineColor: var(--salt-focused-outlineColor);
+  --dropdown-borderWidth: var(--salt-size-border);
 }
 .saltDropdown {
   all: unset;
@@ -910,8 +913,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
   background: var(--dropdown-background);
   cursor: var(--dropdown-cursor);
   min-height: var(--salt-size-base);
-  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--dropdown-borderColor);
-  display: flex;
+  border: var(--dropdown-border);
+  border-radius: var(--salt-palette-corner-weak, 0);
+  display: inline-flex;
   align-items: center;
   padding: 0 var(--salt-spacing-100);
   gap: var(--salt-spacing-100);
@@ -921,13 +925,25 @@ a:focus .saltCard-interactable.saltCard-disabled {
   font-weight: var(--salt-text-fontWeight);
   line-height: var(--salt-text-lineHeight);
   letter-spacing: var(--salt-text-letterSpacing);
+  position: relative;
+  overflow: hidden;
 }
 .saltDropdown:hover {
   --dropdown-borderColor: var(--salt-editable-borderColor-hover);
+  --dropdown-borderStyle: var(--salt-editable-borderStyle-hover);
+  --dropdown-background: var(--saltDropdown-background-hover, var(--dropdown-background-hover));
+}
+.saltDropdown:active {
+  --dropdown-background: var(--saltDropdown-background-active, var(--dropdown-background-active));
+  --dropdown-borderColor: var(--salt-editable-borderColor-active);
+  --dropdown-borderWidth: var(--salt-editable-borderWidth-active);
+  --dropdown-borderStyle: var(--salt-editable-borderStyle-active);
 }
-.saltDropdown:focus-visible {
+.saltDropdown:focus {
   outline: var(--salt-focused-outline);
-  --dropdown-borderColor: var(--salt-editable-borderColor-hover);
+  --dropdown-borderColor: var(--salt-editable-borderColor-active);
+  --dropdown-borderWidth: var(--salt-editable-borderWidth-active);
+  --dropdown-borderStyle: var(--salt-editable-borderStyle-active);
 }
 .saltDropdown-content {
   flex: 1;
@@ -942,45 +958,91 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltDropdown-primary {
   --dropdown-background: var(--salt-editable-primary-background);
+  --dropdown-background-active: var(--salt-editable-primary-background-active);
+  --dropdown-background-hover: var(--salt-editable-primary-background-hover);
+  --dropdown-background-disabled: var(--salt-editable-primary-background-disabled);
+  --dropdown-background-readonly: var(--salt-editable-primary-background-readonly);
 }
 .saltDropdown-secondary {
   --dropdown-background: var(--salt-editable-secondary-background);
-}
-.saltDropdown:disabled {
-  --dropdown-background: var(--salt-editable-primary-background-disabled);
+  --dropdown-background-active: var(--salt-editable-secondary-background-active);
+  --dropdown-background-hover: var(--salt-editable-secondary-background-active);
+  --dropdown-background-disabled: var(--salt-editable-secondary-background-disabled);
+  --dropdown-background-readonly: var(--salt-editable-secondary-background-readonly);
+}
+.saltDropdown:disabled,
+.saltDropdown:disabled:active,
+.saltDropdown:disabled:hover,
+.saltDropdown:disabled:focus {
+  --dropdown-background: var(--dropdown-background-disabled);
   --dropdown-borderColor: var(--salt-editable-borderColor-disabled);
   --dropdown-color: var(--salt-content-primary-foreground-disabled);
   --dropdown-cursor: var(--salt-selectable-cursor-disabled);
+  --dropdown-borderWidth: var(--salt-size-border);
 }
 .saltDropdown[aria-readonly=true] {
-  --dropdown-background: var(--salt-editable-primary-background-readonly);
   --dropdown-borderColor: var(--salt-editable-borderColor-readonly);
   --dropdown-color: var(--salt-content-primary-foreground);
   --dropdown-cursor: var(--salt-selectable-cursor-readonly);
+  --dropdown-background: var(--dropdown-background-readonly);
+  --dropdown-borderWidth: var(--salt-size-border);
+}
+.saltDropdown[aria-readonly=true]:hover,
+.saltDropdown[aria-readonly=true]:focus {
+  --dropdown-background: var(--dropdown-background-readonly);
+  --dropdown-borderColor: var(--salt-editable-borderColor-readonly);
 }
-.saltDropdown-error {
+.saltDropdown-error,
+.saltDropdown-error:hover,
+.saltDropdown-error:focus {
   --dropdown-background: var(--salt-status-error-background);
   --dropdown-borderColor: var(--salt-status-error-borderColor);
-}
-.saltDropdown-error .saltDropdown:focus-visible {
+  --dropdown-background-active: var(--salt-status-error-background);
+  --dropdown-background-hover: var(--salt-status-error-background);
+  --dropdown-background-readonly: var(--salt-status-error-background);
   outline-color: var(--salt-status-error-borderColor);
-  --dropdown-borderColor: var(--salt-status-error-borderColor);
 }
-.saltDropdown-warning {
+.saltDropdown-warning,
+.saltDropdown-warning:hover,
+.saltDropdown-warning:focus {
   --dropdown-background: var(--salt-status-warning-background);
   --dropdown-borderColor: var(--salt-status-warning-borderColor);
-}
-.saltDropdown-warning .saltDropdown:focus-visible {
+  --dropdown-background-active: var(--salt-status-warning-background);
+  --dropdown-background-hover: var(--salt-status-warning-background);
+  --dropdown-background-readonly: var(--salt-status-warning-background);
   outline-color: var(--salt-status-warning-borderColor);
-  --dropdown-borderColor: var(--salt-status-warning-borderColor);
 }
-.saltDropdown-success {
+.saltDropdown-success,
+.saltDropdown-success:hover,
+.saltDropdown-success:focus {
   --dropdown-background: var(--salt-status-success-background);
   --dropdown-borderColor: var(--salt-status-success-borderColor);
-}
-.saltDropdown-success .saltDropdown:focus-visible {
+  --dropdown-background-active: var(--salt-status-success-background);
+  --dropdown-background-hover: var(--salt-status-success-background);
+  --dropdown-background-readonly: var(--salt-status-success-background);
   outline-color: var(--salt-status-success-borderColor);
-  --dropdown-borderColor: var(--salt-status-success-borderColor);
+}
+.saltDropdown-activationIndicator {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  position: absolute;
+  border-bottom: var(--dropdown-borderWidth) var(--dropdown-borderStyle) var(--dropdown-borderColor);
+}
+.saltDropdown-bordered {
+  --dropdown-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--dropdown-borderColor);
+  --dropdown-borderWidth: 0;
+}
+.saltDropdown-bordered.saltDropdown:focus,
+.saltDropdown-bordered:active {
+  --dropdown-borderWidth: var(--salt-editable-borderWidth-active);
+}
+.saltDropdown-bordered[aria-readonly=true],
+.saltDropdown-bordered[aria-readonly=true]:hover,
+.saltDropdown[aria-readonly=true]:focus,
+.saltDropdown-bordered.saltDropdown:disabled,
+.saltDropdown-bordered.saltDropdown:disabled:hover {
+  --dropdown-borderWidth: 0;
 }
 
 /* src/file-drop-zone/FileDropZone.css */
@@ -1765,7 +1827,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   overflow-y: auto;
   min-width: 10em;
   position: relative;
-  z-index: var(--salt-zIndex-popout);
+  z-index: var(--salt-zIndex-flyover);
   box-shadow: var(--salt-overlayable-shadow-popout);
   box-sizing: border-box;
 }
@@ -2165,6 +2227,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltOptionList {
   background: var(--salt-container-primary-background);
   border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
+  border-radius: var(--salt-palette-corner-weak, 0);
   overflow: hidden;
   overflow-y: auto;
   position: relative;
@@ -2413,6 +2476,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 
 /* src/pill-input/PillInput.css */
 .saltPillInput {
+  --input-border: none;
   --input-borderColor: var(--salt-editable-borderColor);
   --input-borderStyle: var(--salt-editable-borderStyle);
   --input-outlineColor: var(--salt-focused-outlineColor);
@@ -2431,6 +2495,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
   position: relative;
   width: 100%;
   box-sizing: border-box;
+  border-radius: var(--salt-palette-corner-weak, 0);
+  border: var(--input-border);
+  overflow: hidden;
 }
 .saltPillInput-truncate {
   height: var(--salt-size-base);
@@ -2472,6 +2539,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --input-background-hover: var(--salt-status-error-background);
   --input-borderColor: var(--salt-status-error-borderColor);
   --input-outlineColor: var(--salt-status-error-borderColor);
+  --input-background-readonly: var(--salt-status-error-background);
 }
 .saltPillInput-warning,
 .saltPillInput-warning:hover {
@@ -2480,6 +2548,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --input-background-hover: var(--salt-status-warning-background);
   --input-borderColor: var(--salt-status-warning-borderColor);
   --input-outlineColor: var(--salt-status-warning-borderColor);
+  --input-background-readonly: var(--salt-status-warning-background);
 }
 .saltPillInput-success,
 .saltPillInput-success:hover {
@@ -2488,6 +2557,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --input-background-hover: var(--salt-status-success-background);
   --input-borderColor: var(--salt-status-success-borderColor);
   --input-outlineColor: var(--salt-status-success-borderColor);
+  --input-background-readonly: var(--salt-status-success-background);
 }
 .saltPillInput-input {
   background: none;
@@ -2517,7 +2587,8 @@ a:focus .saltCard-interactable.saltCard-disabled {
   color: var(--salt-content-secondary-foreground);
   font-weight: var(--salt-text-fontWeight-small);
 }
-.saltPillInput-focused {
+.saltPillInput-focused,
+.saltPillInput-focused:hover {
   --input-borderColor: var(--input-outlineColor);
   --input-borderWidth: var(--salt-editable-borderWidth-active);
   outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));
@@ -2556,6 +2627,19 @@ a:focus .saltCard-interactable.saltCard-disabled {
   position: absolute;
   border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);
 }
+.saltPillInput.saltPillInput-bordered {
+  --input-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--input-borderColor);
+  --input-borderWidth: 0;
+}
+.saltPillInput-bordered.saltPillInput-focused,
+.saltPillInput-bordered:active {
+  --input-borderWidth: var(--salt-editable-borderWidth-active);
+}
+.saltPillInput-bordered.saltPillInput-readOnly,
+.saltPillInput-bordered.saltPillInput-disabled:hover,
+.saltPillInput-bordered.saltPillInput-disabled.saltPillInput-focused {
+  --input-borderWidth: 0;
+}
 .saltPillInput-startAdornmentContainer {
   align-items: center;
   display: inline-flex;
@@ -2589,6 +2673,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltPillInput-endAdornmentContainer > .saltButton {
   --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));
   --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
+  --saltButton-borderRadius: var(--salt-palette-corner-weaker);
 }
 .saltPillInput-inputWrapper {
   display: flex;
@@ -2602,6 +2687,12 @@ a:focus .saltCard-interactable.saltCard-disabled {
   overflow-y: auto;
   box-sizing: border-box;
 }
+.saltPillInput-bordered > .saltPillInput-endAdornmentContainer {
+  padding-top: calc(var(--salt-spacing-50) - var(--salt-size-border));
+}
+.saltPillInput-bordered > .saltPillInput-inputWrapper {
+  padding: calc(var(--salt-spacing-50) - var(--salt-size-border)) 0;
+}
 .saltPillInput-pillList {
   display: contents;
 }
@@ -3579,8 +3670,10 @@ label.saltText small,
   --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));
   --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - max(var(--salt-icon-size-base), 12px)) / 2);
   --tooltip-status-borderColor: var(--salt-container-primary-borderColor);
+  --tooltip-padding: calc(var(--salt-spacing-75) - var(--salt-size-border)) var(--salt-spacing-100);
 }
 .saltTooltip {
+  box-sizing: border-box;
   background: var(--tooltip-background);
   border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor));
   border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));
@@ -3593,7 +3686,7 @@ label.saltText small,
   font-weight: var(--saltTooltip-fontWeight, var(--salt-text-fontWeight));
   line-height: var(--saltTooltip-lineHeight, var(--salt-text-lineHeight));
   max-width: var(--saltTooltip-maxWidth, 230px);
-  padding: var(--saltTooltip-padding, var(--salt-spacing-100));
+  padding: var(--saltTooltip-padding, var(--tooltip-padding));
   position: relative;
   text-align: var(--saltTooltip-textAlign, left);
   z-index: var(--tooltip-zIndex);
@@ -3779,5 +3872,25 @@ label.saltText small,
   white-space: nowrap;
   padding-left: var(--salt-spacing-100);
 }
+.saltLinearProgress-indeterminate.saltLinearProgress-bar {
+  position: absolute;
+  left: 0px;
+  bottom: 0px;
+  top: 0px;
+  transform-origin: left center;
+  width: 66%;
+  animation: 1.8s ease-in-out infinite salt-indeterminate-progress-bar;
+}
+@keyframes salt-indeterminate-progress-bar {
+  0% {
+    transform: translateX(-100%);
+  }
+  60% {
+    transform: translateX(155%);
+  }
+  100% {
+    transform: translateX(200%);
+  }
+}
 
-/* src/bc041f09-367d-4fd6-976a-333ff67e34d8.css */
+/* src/3fc4a530-d9f6-45b2-81d2-0f406ea4a6b9.css */

package/dist-cjs/accordion/Accordion.js

@@ -3,11 +3,10 @@
 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 window = require('@salt-ds/window');
+var clsx = require('clsx');
+var React = require('react');
 var makePrefixer = require('../utils/makePrefixer.js');
 var useControlled = require('../utils/useControlled.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
@@ -49,6 +48,7 @@ require('../flex-item/FlexItem.js');
 require('../flex-layout/FlexLayout.js');
 require('../flow-layout/FlowLayout.js');
 require('../form-field/FormField.js');
+require('../form-field-context/FormFieldContext.js');
 require('../status-indicator/StatusIndicator.js');
 require('../text/Text.js');
 require('../text/Code.js');
@@ -57,7 +57,6 @@ require('../text/Headings.js');
 require('../text/Label.js');
 require('../text/TextAction.js');
 require('../text/TextNotation.js');
-require('../form-field-context/FormFieldContext.js');
 require('../grid-item/GridItem.js');
 require('../grid-layout/GridLayout.js');
 require('../input/Input.js');
@@ -68,12 +67,12 @@ require('../link/Link.js');
 require('../link-card/LinkCard.js');
 require('../list-box/ListBox.js');
 require('../list-control/ListControlContext.js');
-require('../menu/MenuContext.js');
 require('@floating-ui/react');
+require('../menu/MenuContext.js');
 require('../menu/MenuItem.js');
 require('../menu/MenuPanel.js');
-require('../menu/MenuTriggerContext.js');
 require('../menu/MenuPanelContext.js');
+require('../menu/MenuTriggerContext.js');
 require('../menu/MenuGroup.js');
 require('../multiline-input/MultilineInput.js');
 require('../navigation-item/NavigationItem.js');
@@ -110,6 +109,7 @@ require('../toggle-button-group/ToggleButtonGroup.js');
 require('../toggle-button-group/ToggleButtonGroupContext.js');
 require('../tooltip/Tooltip.js');
 var Accordion$1 = require('./Accordion.css.js');
+var AccordionContext = require('./AccordionContext.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltAccordion");
 const Accordion = React.forwardRef(
@@ -119,6 +119,7 @@ const Accordion = React.forwardRef(
       defaultExpanded,
       expanded: expandedProp,
       disabled,
+      indicatorSide = "left",
       id: idProp,
       onToggle,
       status,
@@ -147,6 +148,7 @@ const Accordion = React.forwardRef(
         value,
         toggle,
         expanded,
+        indicatorSide,
         disabled: Boolean(disabled),
         id: id != null ? id : "",
         status

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

@@ -1 +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   */\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      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          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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,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,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,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} 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;;;;"}

package/dist-cjs/accordion/AccordionContext.js

@@ -27,9 +27,9 @@ require('../button/Button.js');
 require('../card/Card.js');
 require('../checkbox/Checkbox.js');
 require('../checkbox/CheckboxGroup.js');
+require('@salt-ds/icons');
 require('@salt-ds/styles');
 require('@salt-ds/window');
-require('@salt-ds/icons');
 require('../combo-box/ComboBox.js');
 require('../dialog/Dialog.js');
 require('../dialog/DialogHeader.js');
@@ -48,6 +48,7 @@ require('../flex-item/FlexItem.js');
 require('../flex-layout/FlexLayout.js');
 require('../flow-layout/FlowLayout.js');
 require('../form-field/FormField.js');
+require('../form-field-context/FormFieldContext.js');
 require('../status-indicator/StatusIndicator.js');
 require('../text/Text.js');
 require('../text/Code.js');
@@ -56,7 +57,6 @@ require('../text/Headings.js');
 require('../text/Label.js');
 require('../text/TextAction.js');
 require('../text/TextNotation.js');
-require('../form-field-context/FormFieldContext.js');
 require('../grid-item/GridItem.js');
 require('../grid-layout/GridLayout.js');
 require('../input/Input.js');
@@ -67,12 +67,12 @@ require('../link/Link.js');
 require('../link-card/LinkCard.js');
 require('../list-box/ListBox.js');
 require('../list-control/ListControlContext.js');
-require('../menu/MenuContext.js');
 require('@floating-ui/react');
+require('../menu/MenuContext.js');
 require('../menu/MenuItem.js');
 require('../menu/MenuPanel.js');
-require('../menu/MenuTriggerContext.js');
 require('../menu/MenuPanelContext.js');
+require('../menu/MenuTriggerContext.js');
 require('../menu/MenuGroup.js');
 require('../multiline-input/MultilineInput.js');
 require('../navigation-item/NavigationItem.js');
@@ -116,6 +116,7 @@ const AccordionContext = createContext.createContext(
     expanded: false,
     toggle: () => void 0,
     disabled: false,
+    indicatorSide: "left",
     id: ""
   }
 );

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

@@ -1 +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  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    id: \"\",\n  }\n);\n\nexport function useAccordion() {\n  return useContext(AccordionContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYO,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;;;;;"}
+{"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;;;;;"}

package/dist-cjs/accordion/AccordionGroup.js

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var clsx = require('clsx');
+var React = require('react');
 var makePrefixer = require('../utils/makePrefixer.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
 require('../utils/useId.js');
@@ -26,8 +28,6 @@ require('../button/Button.js');
 require('../card/Card.js');
 require('../checkbox/Checkbox.js');
 require('../checkbox/CheckboxGroup.js');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
 require('@salt-ds/icons');
 require('../combo-box/ComboBox.js');
 require('../dialog/Dialog.js');
@@ -47,6 +47,7 @@ require('../flex-item/FlexItem.js');
 require('../flex-layout/FlexLayout.js');
 require('../flow-layout/FlowLayout.js');
 require('../form-field/FormField.js');
+require('../form-field-context/FormFieldContext.js');
 require('../status-indicator/StatusIndicator.js');
 require('../text/Text.js');
 require('../text/Code.js');
@@ -55,7 +56,6 @@ require('../text/Headings.js');
 require('../text/Label.js');
 require('../text/TextAction.js');
 require('../text/TextNotation.js');
-require('../form-field-context/FormFieldContext.js');
 require('../grid-item/GridItem.js');
 require('../grid-layout/GridLayout.js');
 require('../input/Input.js');
@@ -66,12 +66,12 @@ require('../link/Link.js');
 require('../link-card/LinkCard.js');
 require('../list-box/ListBox.js');
 require('../list-control/ListControlContext.js');
-require('../menu/MenuContext.js');
 require('@floating-ui/react');
+require('../menu/MenuContext.js');
 require('../menu/MenuItem.js');
 require('../menu/MenuPanel.js');
-require('../menu/MenuTriggerContext.js');
 require('../menu/MenuPanelContext.js');
+require('../menu/MenuTriggerContext.js');
 require('../menu/MenuGroup.js');
 require('../multiline-input/MultilineInput.js');
 require('../navigation-item/NavigationItem.js');

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionGroup.js","sources":["../src/accordion/AccordionGroup.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport accordionGroupCss from \"./AccordionGroup.css\";\n\nexport interface AccordionGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The child Accordions to be rendered\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionGroup\");\n\nexport const AccordionGroup = forwardRef<HTMLDivElement, AccordionGroupProps>(\n  function AccordionGroup(props, ref) {\n    const { className, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-accordion-group\",\n      css: accordionGroupCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div className={clsx(withBaseName(), className)} ref={ref} {...rest} />\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","AccordionGroup","useWindow","useComponentCssInjection","accordionGroupCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,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,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,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;;;;"}
+{"version":3,"file":"AccordionGroup.js","sources":["../src/accordion/AccordionGroup.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\";\nimport { makePrefixer } from \"../utils\";\nimport accordionGroupCss from \"./AccordionGroup.css\";\n\nexport interface AccordionGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The child Accordions to be rendered\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionGroup\");\n\nexport const AccordionGroup = forwardRef<HTMLDivElement, AccordionGroupProps>(\n  function AccordionGroup(props, ref) {\n    const { className, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-accordion-group\",\n      css: accordionGroupCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div className={clsx(withBaseName(), className)} ref={ref} {...rest} />\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","AccordionGroup","useWindow","useComponentCssInjection","accordionGroupCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,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,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,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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltAccordionHeader {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  border: 0;\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\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-content-primary-foreground);\n  font-weight: var(--salt-text-fontWeight-strong);\n  text-align: left;\n  cursor: var(--salt-actionable-cursor-hover);\n  box-sizing: border-box;\n}\n\n.saltAccordionHeader:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n}\n\n.saltAccordionHeader:disabled {\n  background: var(--salt-actionable-secondary-background);\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\n}\n\n.saltAccordionHeader-content {\n  padding: var(--salt-spacing-75) 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.saltAccordionHeader .saltAccordionHeader-icon {\n  height: var(--salt-size-base);\n  transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltAccordionHeader[aria-expanded=\"true\"] > .saltAccordionHeader-icon {\n  transform: rotate(90deg);\n}\n\n.saltAccordionHeader-error {\n  background: var(--salt-status-error-background);\n}\n\n.saltAccordionHeader-error:focus-visible {\n  outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader-warning {\n  background: var(--salt-status-warning-background);\n}\n\n.saltAccordionHeader-warning:focus-visible {\n  outline-color: var(--salt-status-warning-borderColor);\n}\n\n.saltAccordionHeader-success {\n  background: var(--salt-status-success-background);\n}\n\n.saltAccordionHeader-success:focus-visible {\n  outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader .saltAccordionHeader-statusIndicator {\n  height: var(--salt-size-base);\n  margin-left: auto;\n}\n";
+var css_248z = ".saltAccordionHeader {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  border: 0;\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\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-content-primary-foreground);\n  font-weight: var(--salt-text-fontWeight-strong);\n  text-align: left;\n  cursor: var(--salt-actionable-cursor-hover);\n  box-sizing: border-box;\n}\n\n.saltAccordionHeader:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n}\n\n.saltAccordionHeader:disabled {\n  background: var(--salt-actionable-secondary-background);\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\n}\n\n.saltAccordionHeader-content {\n  padding: var(--salt-spacing-75) 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.saltAccordionHeader .saltAccordionHeader-icon {\n  height: var(--salt-size-base);\n}\n\n.saltAccordionHeader-error {\n  background: var(--salt-status-error-background);\n}\n\n.saltAccordionHeader-error:focus-visible {\n  outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader-warning {\n  background: var(--salt-status-warning-background);\n}\n\n.saltAccordionHeader-warning:focus-visible {\n  outline-color: var(--salt-status-warning-borderColor);\n}\n\n.saltAccordionHeader-success {\n  background: var(--salt-status-success-background);\n}\n\n.saltAccordionHeader-success:focus-visible {\n  outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader .saltAccordionHeader-statusIndicator {\n  height: var(--salt-size-base);\n  margin-left: auto;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=AccordionHeader.css.js.map