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

package/dist-cjs/button/Button.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to the root element if variant=\"cta\" */\n.saltButton-cta {\n  --button-background: var(--salt-actionable-cta-background);\n  --button-background-active: var(--salt-actionable-cta-background-active);\n  --button-background-disabled: var(--salt-actionable-cta-background-disabled);\n  --button-background-hover: var(--salt-actionable-cta-background-hover);\n  --button-fontWeight: var(--salt-actionable-cta-fontWeight);\n  --button-text-color: var(--salt-actionable-cta-foreground);\n  --button-text-color-active: var(--salt-actionable-cta-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-cta-foreground-hover);\n}\n\n/* Icon API in \"CTA\" variant @ignore */\n.saltButton-cta {\n  --saltIcon-color: var(--salt-actionable-cta-foreground);\n}\n.saltButton-cta:hover {\n  --saltIcon-color: var(--salt-actionable-cta-foreground-hover);\n}\n.saltButton-cta:active,\n.saltButton-cta.saltButton-active {\n  --saltIcon-color: var(--salt-actionable-cta-foreground-active);\n}\n.saltButton-cta.saltButton-disabled {\n  --saltIcon-color: var(--salt-actionable-cta-foreground-disabled);\n}\n\n/* Styles applied to the root element if variant=\"primary\" (or no variant specified) */\n.saltButton-primary {\n  --button-background: var(--salt-actionable-primary-background);\n  --button-background-active: var(--salt-actionable-primary-background-active);\n  --button-background-disabled: var(--salt-actionable-primary-background-disabled);\n  --button-background-hover: var(--salt-actionable-primary-background-hover);\n  --button-fontWeight: var(--salt-actionable-primary-fontWeight);\n  --button-text-color: var(--salt-actionable-primary-foreground);\n  --button-text-color-active: var(--salt-actionable-primary-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-primary-foreground-hover);\n}\n\n/* Icon API in \"primary\" variant @ignore */\n.saltButton-primary {\n  --saltIcon-color: var(--salt-actionable-primary-foreground);\n}\n.saltButton-primary:hover {\n  --saltIcon-color: var(--salt-actionable-primary-foreground-hover);\n}\n.saltButton-primary:active,\n.saltButton-primary.saltButton-active {\n  --saltIcon-color: var(--salt-actionable-primary-foreground-active);\n}\n.saltButton-primary.saltButton-disabled {\n  --saltIcon-color: var(--salt-actionable-primary-foreground-disabled);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltButton-secondary {\n  --button-background: var(--salt-actionable-secondary-background);\n  --button-background-active: var(--salt-actionable-secondary-background-active);\n  --button-background-disabled: var(--salt-actionable-secondary-background-disabled);\n  --button-background-hover: var(--salt-actionable-secondary-background-hover);\n  --button-fontWeight: var(--salt-actionable-secondary-fontWeight);\n  --button-text-color: var(--salt-actionable-secondary-foreground);\n  --button-text-color-active: var(--salt-actionable-secondary-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-secondary-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-secondary-foreground-hover);\n}\n\n/* Icon API in \"secondary\" variant @ignore */\n.saltButton-secondary {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground);\n}\n\n.saltButton-secondary:hover {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n.saltButton-secondary:active,\n.saltButton-secondary.saltButton-active {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n.saltButton-secondary.saltButton-disabled {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-disabled);\n}\n\n.saltButton {\n  align-items: var(--saltButton-alignItems, center);\n  appearance: none;\n  background: var(--saltButton-background, var(--button-background));\n  border-color: var(--saltButton-borderColor, transparent);\n  border-style: var(--saltButton-borderStyle, solid);\n  border-width: var(--saltButton-borderWidth, 0);\n  border-radius: var(--saltButton-borderRadius, 0);\n  color: var(--saltButton-text-color, var(--button-text-color));\n  cursor: var(--saltButton-cursor, pointer);\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  justify-content: var(--saltButton-justifyContent, center);\n  font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n  font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n  line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--saltButton-letterSpacing, var(--salt-actionable-letterSpacing));\n  text-transform: var(--saltButton-textTransform, var(--salt-actionable-textTransform));\n  padding: 0 var(--saltButton-padding, var(--salt-size-unit));\n  margin: var(--saltButton-margin, 0);\n  height: var(--saltButton-height, var(--salt-size-base));\n  min-width: var(--saltButton-minWidth, unset);\n  min-height: 0;\n  position: relative;\n  text-align: var(--saltButton-textAlign, var(--salt-actionable-textAlign));\n  text-decoration: none;\n  transition: none;\n  user-select: none;\n  width: var(--saltButton-width, auto);\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n  /* Styles applied to align children*/\n  font-weight: var(--saltButton-fontWeight, var(--button-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible(:active) {\n  background: var(--saltButton-background-active-hover, var(--button-background));\n  color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n}\n\n/* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n.saltButton:hover {\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n  background: var(--saltButton-background-active, var(--button-background-active));\n  color: var(--saltButton-text-color-active, var(--button-text-color-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n  /* Overrides to apply the disabled style when the button is focusable while also disabled */\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:hover {\n  background: var(--saltButton-background-disabled, var(--button-background-disabled));\n  color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));\n  cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled));\n}\n\n.saltButton[href] {\n  display: inline-flex;\n}\n";
+var css_248z = "/* Styles applied to the root element if variant=\"cta\" */\n.saltButton-cta {\n  --button-background: var(--salt-actionable-cta-background);\n  --button-background-active: var(--salt-actionable-cta-background-active);\n  --button-background-disabled: var(--salt-actionable-cta-background-disabled);\n  --button-background-hover: var(--salt-actionable-cta-background-hover);\n  --button-fontWeight: var(--salt-actionable-cta-fontWeight);\n  --button-text-color: var(--salt-actionable-cta-foreground);\n  --button-text-color-active: var(--salt-actionable-cta-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-cta-foreground-hover);\n}\n\n/* Icon API in \"CTA\" variant @ignore */\n.saltButton-cta {\n  --saltIcon-color: var(--salt-actionable-cta-foreground);\n}\n.saltButton-cta:hover {\n  --saltIcon-color: var(--salt-actionable-cta-foreground-hover);\n}\n.saltButton-cta:active,\n.saltButton-cta.saltButton-active {\n  --saltIcon-color: var(--salt-actionable-cta-foreground-active);\n}\n.saltButton-cta.saltButton-disabled {\n  --saltIcon-color: var(--salt-actionable-cta-foreground-disabled);\n}\n\n/* Styles applied to the root element if variant=\"primary\" (or no variant specified) */\n.saltButton-primary {\n  --button-background: var(--salt-actionable-primary-background);\n  --button-background-active: var(--salt-actionable-primary-background-active);\n  --button-background-disabled: var(--salt-actionable-primary-background-disabled);\n  --button-background-hover: var(--salt-actionable-primary-background-hover);\n  --button-fontWeight: var(--salt-actionable-primary-fontWeight);\n  --button-text-color: var(--salt-actionable-primary-foreground);\n  --button-text-color-active: var(--salt-actionable-primary-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-primary-foreground-hover);\n}\n\n/* Icon API in \"primary\" variant @ignore */\n.saltButton-primary {\n  --saltIcon-color: var(--salt-actionable-primary-foreground);\n}\n.saltButton-primary:hover {\n  --saltIcon-color: var(--salt-actionable-primary-foreground-hover);\n}\n.saltButton-primary:active,\n.saltButton-primary.saltButton-active {\n  --saltIcon-color: var(--salt-actionable-primary-foreground-active);\n}\n.saltButton-primary.saltButton-disabled {\n  --saltIcon-color: var(--salt-actionable-primary-foreground-disabled);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltButton-secondary {\n  --button-background: var(--salt-actionable-secondary-background);\n  --button-background-active: var(--salt-actionable-secondary-background-active);\n  --button-background-disabled: var(--salt-actionable-secondary-background-disabled);\n  --button-background-hover: var(--salt-actionable-secondary-background-hover);\n  --button-fontWeight: var(--salt-actionable-secondary-fontWeight);\n  --button-text-color: var(--salt-actionable-secondary-foreground);\n  --button-text-color-active: var(--salt-actionable-secondary-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-secondary-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-secondary-foreground-hover);\n}\n\n/* Icon API in \"secondary\" variant @ignore */\n.saltButton-secondary {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground);\n}\n\n.saltButton-secondary:hover {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n.saltButton-secondary:active,\n.saltButton-secondary.saltButton-active {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n.saltButton-secondary.saltButton-disabled {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-disabled);\n}\n\n.saltButton {\n  align-items: var(--saltButton-alignItems, center);\n  appearance: none;\n  background: var(--saltButton-background, var(--button-background));\n  border-color: var(--saltButton-borderColor, transparent);\n  border-style: var(--saltButton-borderStyle, solid);\n  border-width: var(--saltButton-borderWidth, 0);\n  border-radius: var(--saltButton-borderRadius, 0);\n  color: var(--saltButton-text-color, var(--button-text-color));\n  cursor: var(--saltButton-cursor, pointer);\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  justify-content: var(--saltButton-justifyContent, center);\n  font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n  font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n  line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--saltButton-letterSpacing, var(--salt-actionable-letterSpacing));\n  text-transform: var(--saltButton-textTransform, var(--salt-actionable-textTransform));\n  padding: 0 var(--saltButton-padding, var(--salt-size-unit));\n  margin: var(--saltButton-margin, 0);\n  height: var(--saltButton-height, var(--salt-size-base));\n  min-width: var(--saltButton-minWidth, unset);\n  min-height: 0;\n  position: relative;\n  text-align: var(--saltButton-textAlign, var(--salt-actionable-textAlign));\n  text-decoration: none;\n  transition: none;\n  width: var(--saltButton-width, auto);\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n  /* Styles applied to align children*/\n  font-weight: var(--saltButton-fontWeight, var(--button-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible(:active) {\n  background: var(--saltButton-background-active-hover, var(--button-background));\n  color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n}\n\n/* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n.saltButton:hover {\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n  background: var(--saltButton-background-active, var(--button-background-active));\n  color: var(--saltButton-text-color-active, var(--button-text-color-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n  /* Overrides to apply the disabled style when the button is focusable while also disabled */\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:hover {\n  background: var(--saltButton-background-disabled, var(--button-background-disabled));\n  color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));\n  cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled));\n}\n\n.saltButton[href] {\n  display: inline-flex;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Button.css.js.map

package/dist-cjs/checkbox/CheckboxGroup.js

@@ -55,8 +55,8 @@ const CheckboxGroup = React.forwardRef(function CheckboxGroup2({
     state: "checkedValues"
   });
   const handleChange = (event) => {
+    const name2 = event.target.value;
     setCheckedValues((oldValues = []) => {
-      const name2 = event.target.value;
       const isSelected = oldValues.includes(name2);
       return isSelected ? oldValues.filter((value) => value !== name2) : oldValues.concat(name2);
     });

package/dist-cjs/checkbox/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","sources":["../src/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEvent,\n  ChangeEventHandler,\n  ComponentPropsWithoutRef,\n  forwardRef,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { CheckboxGroupContext } from \"./internal/CheckboxGroupContext\";\nimport checkboxGroupCss from \"./CheckboxGroup.css\";\n\nexport interface CheckboxGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"fieldset\">, \"onChange\"> {\n  /**\n   * The current checked options.\n   */\n  checkedValues?: string[];\n  /**\n   * The default selected options for un-controlled component.\n   */\n  defaultCheckedValues?: string[];\n  /**\n   * Display group of elements in a compact row.\n   */\n  direction?: \"horizontal\" | \"vertical\";\n  /**\n   * Disable the Checkbox group\n   */\n  disabled?: boolean;\n  /**\n   * The name used to reference the value of the control.\n   */\n  name?: string;\n  /**\n   * Callback fired when a checkbox is clicked.\n   * `event.target.value` returns the value of the checkbox that was clicked.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * Only for horizontal direction. When `true` the text in radio button label will wrap to fit within the container. Otherwise, the checkboxes will wrap onto the next line.\n   */\n  wrap?: boolean;\n  /**\n   * Validation status.\n   */\n  validationStatus?: AdornmentValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxGroup\");\n\nexport const CheckboxGroup = forwardRef<\n  HTMLFieldSetElement,\n  CheckboxGroupProps\n>(function CheckboxGroup(\n  {\n    checkedValues: checkedValuesProp,\n    defaultCheckedValues = [],\n    children,\n    className,\n    disabled: disabledProp,\n    direction = \"vertical\",\n    name,\n    onChange,\n    readOnly: readOnlyProp,\n    wrap,\n    validationStatus: validationStatusProp,\n    ...other\n  },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-checkbox-group\",\n    css: checkboxGroupCss,\n    window: targetWindow,\n  });\n\n  const {\n    a11yProps,\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n    validationStatus: formFieldValidationStatus,\n  } = useFormFieldProps();\n\n  const disabled = formFieldDisabled ?? disabledProp;\n  const readOnly = formFieldReadOnly ?? readOnlyProp;\n  const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n  const [checkedValues, setCheckedValues] = useControlled({\n    controlled: checkedValuesProp,\n    default: defaultCheckedValues,\n    name: \"CheckboxGroup\",\n    state: \"checkedValues\",\n  });\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setCheckedValues((oldValues: string[] = []) => {\n      const name = event.target.value;\n      const isSelected = oldValues.includes(name);\n\n      return isSelected\n        ? oldValues.filter((value) => value !== name)\n        : oldValues.concat(name);\n    });\n\n    onChange?.(event);\n  };\n\n  return (\n    <fieldset\n      className={clsx(\n        withBaseName(),\n        withBaseName(direction),\n        {\n          [withBaseName(\"noWrap\")]: !wrap,\n        },\n        className\n      )}\n      ref={ref}\n      {...other}\n    >\n      <CheckboxGroupContext.Provider\n        value={{\n          a11yProps,\n          disabled,\n          name,\n          onChange: handleChange,\n          checkedValues,\n          readOnly,\n          validationStatus,\n        }}\n      >\n        {children}\n      </CheckboxGroupContext.Provider>\n    </fieldset>\n  );\n});\n"],"names":["makePrefixer","forwardRef","CheckboxGroup","useWindow","useComponentCssInjection","checkboxGroupCss","useFormFieldProps","useControlled","name","jsx","clsx","CheckboxGroupContext"],"mappings":";;;;;;;;;;;;;;;;;;;;AAwDA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA,CAAA;AAExC,MAAA,aAAA,GAAgBC,gBAG3B,CAAA,SAASC,cACT,CAAA;AAAA,EACE,aAAe,EAAA,iBAAA;AAAA,EACf,uBAAuB,EAAC;AAAA,EACxB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,SAAY,GAAA,UAAA;AAAA,EACZ,IAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,IAAA;AAAA,EACA,gBAAkB,EAAA,oBAAA;AAAA,EACf,GAAA,KAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,QAAU,EAAA,iBAAA;AAAA,IACV,QAAU,EAAA,iBAAA;AAAA,IACV,gBAAkB,EAAA,yBAAA;AAAA,MAChBC,mCAAkB,EAAA,CAAA;AAEtB,EAAA,MAAM,WAAW,iBAAqB,IAAA,IAAA,GAAA,iBAAA,GAAA,YAAA,CAAA;AACtC,EAAA,MAAM,WAAW,iBAAqB,IAAA,IAAA,GAAA,iBAAA,GAAA,YAAA,CAAA;AACtC,EAAA,MAAM,mBAAmB,yBAA6B,IAAA,IAAA,GAAA,yBAAA,GAAA,oBAAA,CAAA;AAEtD,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIC,2BAAc,CAAA;AAAA,IACtD,UAAY,EAAA,iBAAA;AAAA,IACZ,OAAS,EAAA,oBAAA;AAAA,IACT,IAAM,EAAA,eAAA;AAAA,IACN,KAAO,EAAA,eAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAiB,gBAAA,CAAA,CAAC,SAAsB,GAAA,EAAO,KAAA;AAC7C,MAAMC,MAAAA,KAAAA,GAAO,MAAM,MAAO,CAAA,KAAA,CAAA;AAC1B,MAAM,MAAA,UAAA,GAAa,SAAU,CAAA,QAAA,CAASA,KAAI,CAAA,CAAA;AAE1C,MAAO,OAAA,UAAA,GACH,SAAU,CAAA,MAAA,CAAO,CAAC,KAAA,KAAU,UAAUA,KAAI,CAAA,GAC1C,SAAU,CAAA,MAAA,CAAOA,KAAI,CAAA,CAAA;AAAA,KAC1B,CAAA,CAAA;AAED,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,uBACGC,cAAA,CAAA,UAAA,EAAA;AAAA,IACC,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,aAAa,SAAS,CAAA;AAAA,MACtB;AAAA,QACE,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,CAAC,IAAA;AAAA,OAC7B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,GAAA;AAAA,IACC,GAAG,KAAA;AAAA,IAEJ,QAAA,kBAAAD,cAAA,CAACE,0CAAqB,QAArB,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,SAAA;AAAA,QACA,QAAA;AAAA,QACA,IAAA;AAAA,QACA,QAAU,EAAA,YAAA;AAAA,QACV,aAAA;AAAA,QACA,QAAA;AAAA,QACA,gBAAA;AAAA,OACF;AAAA,MAEC,QAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"CheckboxGroup.js","sources":["../src/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEvent,\n  ChangeEventHandler,\n  ComponentPropsWithoutRef,\n  forwardRef,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { CheckboxGroupContext } from \"./internal/CheckboxGroupContext\";\nimport checkboxGroupCss from \"./CheckboxGroup.css\";\n\nexport interface CheckboxGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"fieldset\">, \"onChange\"> {\n  /**\n   * The current checked options.\n   */\n  checkedValues?: string[];\n  /**\n   * The default selected options for un-controlled component.\n   */\n  defaultCheckedValues?: string[];\n  /**\n   * Display group of elements in a compact row.\n   */\n  direction?: \"horizontal\" | \"vertical\";\n  /**\n   * Disable the Checkbox group\n   */\n  disabled?: boolean;\n  /**\n   * The name used to reference the value of the control.\n   */\n  name?: string;\n  /**\n   * Callback fired when a checkbox is clicked.\n   * `event.target.value` returns the value of the checkbox that was clicked.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * Only for horizontal direction. When `true` the text in radio button label will wrap to fit within the container. Otherwise, the checkboxes will wrap onto the next line.\n   */\n  wrap?: boolean;\n  /**\n   * Validation status.\n   */\n  validationStatus?: AdornmentValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxGroup\");\n\nexport const CheckboxGroup = forwardRef<\n  HTMLFieldSetElement,\n  CheckboxGroupProps\n>(function CheckboxGroup(\n  {\n    checkedValues: checkedValuesProp,\n    defaultCheckedValues = [],\n    children,\n    className,\n    disabled: disabledProp,\n    direction = \"vertical\",\n    name,\n    onChange,\n    readOnly: readOnlyProp,\n    wrap,\n    validationStatus: validationStatusProp,\n    ...other\n  },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-checkbox-group\",\n    css: checkboxGroupCss,\n    window: targetWindow,\n  });\n\n  const {\n    a11yProps,\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n    validationStatus: formFieldValidationStatus,\n  } = useFormFieldProps();\n\n  const disabled = formFieldDisabled ?? disabledProp;\n  const readOnly = formFieldReadOnly ?? readOnlyProp;\n  const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n  const [checkedValues, setCheckedValues] = useControlled({\n    controlled: checkedValuesProp,\n    default: defaultCheckedValues,\n    name: \"CheckboxGroup\",\n    state: \"checkedValues\",\n  });\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const name = event.target.value;\n    setCheckedValues((oldValues: string[] = []) => {\n      const isSelected = oldValues.includes(name);\n\n      return isSelected\n        ? oldValues.filter((value) => value !== name)\n        : oldValues.concat(name);\n    });\n\n    onChange?.(event);\n  };\n\n  return (\n    <fieldset\n      className={clsx(\n        withBaseName(),\n        withBaseName(direction),\n        {\n          [withBaseName(\"noWrap\")]: !wrap,\n        },\n        className\n      )}\n      ref={ref}\n      {...other}\n    >\n      <CheckboxGroupContext.Provider\n        value={{\n          a11yProps,\n          disabled,\n          name,\n          onChange: handleChange,\n          checkedValues,\n          readOnly,\n          validationStatus,\n        }}\n      >\n        {children}\n      </CheckboxGroupContext.Provider>\n    </fieldset>\n  );\n});\n"],"names":["makePrefixer","forwardRef","CheckboxGroup","useWindow","useComponentCssInjection","checkboxGroupCss","useFormFieldProps","useControlled","name","jsx","clsx","CheckboxGroupContext"],"mappings":";;;;;;;;;;;;;;;;;;;;AAwDA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA,CAAA;AAExC,MAAA,aAAA,GAAgBC,gBAG3B,CAAA,SAASC,cACT,CAAA;AAAA,EACE,aAAe,EAAA,iBAAA;AAAA,EACf,uBAAuB,EAAC;AAAA,EACxB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,SAAY,GAAA,UAAA;AAAA,EACZ,IAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,IAAA;AAAA,EACA,gBAAkB,EAAA,oBAAA;AAAA,EACf,GAAA,KAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,QAAU,EAAA,iBAAA;AAAA,IACV,QAAU,EAAA,iBAAA;AAAA,IACV,gBAAkB,EAAA,yBAAA;AAAA,MAChBC,mCAAkB,EAAA,CAAA;AAEtB,EAAA,MAAM,WAAW,iBAAqB,IAAA,IAAA,GAAA,iBAAA,GAAA,YAAA,CAAA;AACtC,EAAA,MAAM,WAAW,iBAAqB,IAAA,IAAA,GAAA,iBAAA,GAAA,YAAA,CAAA;AACtC,EAAA,MAAM,mBAAmB,yBAA6B,IAAA,IAAA,GAAA,yBAAA,GAAA,oBAAA,CAAA;AAEtD,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIC,2BAAc,CAAA;AAAA,IACtD,UAAY,EAAA,iBAAA;AAAA,IACZ,OAAS,EAAA,oBAAA;AAAA,IACT,IAAM,EAAA,eAAA;AAAA,IACN,KAAO,EAAA,eAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAMC,MAAAA,KAAAA,GAAO,MAAM,MAAO,CAAA,KAAA,CAAA;AAC1B,IAAiB,gBAAA,CAAA,CAAC,SAAsB,GAAA,EAAO,KAAA;AAC7C,MAAM,MAAA,UAAA,GAAa,SAAU,CAAA,QAAA,CAASA,KAAI,CAAA,CAAA;AAE1C,MAAO,OAAA,UAAA,GACH,SAAU,CAAA,MAAA,CAAO,CAAC,KAAA,KAAU,UAAUA,KAAI,CAAA,GAC1C,SAAU,CAAA,MAAA,CAAOA,KAAI,CAAA,CAAA;AAAA,KAC1B,CAAA,CAAA;AAED,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,uBACGC,cAAA,CAAA,UAAA,EAAA;AAAA,IACC,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,aAAa,SAAS,CAAA;AAAA,MACtB;AAAA,QACE,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,CAAC,IAAA;AAAA,OAC7B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,GAAA;AAAA,IACC,GAAG,KAAA;AAAA,IAEJ,QAAA,kBAAAD,cAAA,CAACE,0CAAqB,QAArB,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,SAAA;AAAA,QACA,QAAA;AAAA,QACA,IAAA;AAAA,QACA,QAAU,EAAA,YAAA;AAAA,QACV,aAAA;AAAA,QACA,QAAA;AAAA,QACA,gBAAA;AAAA,OACF;AAAA,MAEC,QAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltFormFieldLabel.saltText {\n  font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong));\n  width: 100%;\n}\n\n.saltFormFieldLabel:hover + .saltFormField-controls * {\n  --input-borderColor: var(--input-borderColor-hover);\n}\n\n.saltFormField-labelLeft .saltFormFieldLabel.saltText {\n  align-self: baseline;\n  padding-top: var(--salt-spacing-100);\n}\n\n.saltFormFieldLabel-necessityLabel {\n  font-weight: var(--salt-text-fontWeight);\n  font-style: var(--salt-editable-help-fontStyle);\n}\n\n.saltFormFieldLabel-pronounced.saltText {\n  color: var(--salt-text-primary-foreground);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n";
+var css_248z = ".saltFormFieldLabel.saltText {\n  font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong));\n  width: 100%;\n}\n\n.saltFormFieldLabel:hover + .saltFormField-controls * {\n  --input-borderColor: var(--input-borderColor-hover);\n}\n\n.saltFormField-labelLeft .saltFormFieldLabel.saltText {\n  align-self: baseline;\n  padding-top: var(--salt-spacing-100);\n}\n\n.saltFormFieldLabel-necessityLabel {\n  font-weight: var(--salt-text-fontWeight);\n  font-style: var(--salt-editable-help-fontStyle);\n}\n\n.saltFormFieldLabel-sentence.saltText {\n  color: var(--salt-text-primary-foreground);\n  font-size: var(--salt-text-fontSize);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=FormFieldLabel.css.js.map

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

@@ -25,7 +25,7 @@ const withBaseName = makePrefixer.makePrefixer("saltFormFieldLabel");
 const FormFieldLabel = ({
   className,
   children,
-  pronounced = false,
+  intent = "label",
   ...restProps
 }) => {
   const { a11yProps, disabled, necessity } = useFormFieldProps.useFormFieldProps();
@@ -38,11 +38,7 @@ const FormFieldLabel = ({
   const necessityLabel = necessity ? necessity === "asterisk" ? "*" : ` (${capitalize.capitalize(necessity)})` : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(Label.Label, {
     as: "label",
-    className: clsx.clsx(
-      withBaseName(),
-      { [withBaseName("pronounced")]: pronounced },
-      className
-    ),
+    className: clsx.clsx(withBaseName(), withBaseName(intent), className),
     id: a11yProps == null ? void 0 : a11yProps["aria-labelledby"],
     disabled,
     variant: "secondary",

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

@@ -1 +1 @@
-{"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field/FormFieldLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Label, TextProps } from \"../text\";\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport formFieldLabelCss from \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\n\nexport const FormFieldLabel = ({\n  className,\n  children,\n  pronounced = false,\n  ...restProps\n}: Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> & {\n  pronounced?: boolean;\n}) => {\n  const { a11yProps, disabled, necessity } = useFormFieldProps();\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-field-label\",\n    css: formFieldLabelCss,\n    window: targetWindow,\n  });\n\n  const necessityLabel = necessity\n    ? necessity === \"asterisk\"\n      ? \"*\"\n      : ` (${capitalize(necessity)})`\n    : undefined;\n\n  return (\n    <Label\n      as=\"label\"\n      className={clsx(\n        withBaseName(),\n        { [withBaseName(\"pronounced\")]: pronounced },\n        className\n      )}\n      id={a11yProps?.[\"aria-labelledby\"]}\n      disabled={disabled}\n      variant=\"secondary\"\n      {...restProps}\n    >\n      {children}\n      {necessityLabel && (\n        <span className={withBaseName(\"necessityLabel\")}>{necessityLabel}</span>\n      )}\n    </Label>\n  );\n};\n"],"names":["makePrefixer","useFormFieldProps","useWindow","useComponentCssInjection","formFieldLabelCss","capitalize","jsxs","Label","clsx","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAa,GAAA,KAAA;AAAA,EACV,GAAA,SAAA;AACL,CAEM,KAAA;AACJ,EAAA,MAAM,EAAE,SAAA,EAAW,QAAU,EAAA,SAAA,KAAcC,mCAAkB,EAAA,CAAA;AAC7D,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,cAAA,GAAiB,YACnB,SAAc,KAAA,UAAA,GACZ,MACA,CAAK,EAAA,EAAAC,qBAAA,CAAW,SAAS,CAC3B,CAAA,CAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AAEJ,EAAA,uBACGC,eAAA,CAAAC,WAAA,EAAA;AAAA,IACC,EAAG,EAAA,OAAA;AAAA,IACH,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,EAAE,CAAC,YAAa,CAAA,YAAY,IAAI,UAAW,EAAA;AAAA,MAC3C,SAAA;AAAA,KACF;AAAA,IACA,IAAI,SAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,iBAAA,CAAA;AAAA,IAChB,QAAA;AAAA,IACA,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,SAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,kCACEC,cAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,QAAI,QAAA,EAAA,cAAA;AAAA,OAAe,CAAA;AAAA,KAAA;AAAA,GAErE,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field/FormFieldLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Label, TextProps } from \"../text\";\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport formFieldLabelCss from \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\n\nexport interface FormFieldLabelProps\n  extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {\n  /**\n   * Intent for the label.\n   *\n   * Defaults to \"label\"\n   * Using \"sentence\" gives more prominent styling\n   */\n  intent?: \"label\" | \"sentence\";\n}\n\nexport const FormFieldLabel = ({\n  className,\n  children,\n  intent = \"label\",\n  ...restProps\n}: FormFieldLabelProps) => {\n  const { a11yProps, disabled, necessity } = useFormFieldProps();\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-field-label\",\n    css: formFieldLabelCss,\n    window: targetWindow,\n  });\n\n  const necessityLabel = necessity\n    ? necessity === \"asterisk\"\n      ? \"*\"\n      : ` (${capitalize(necessity)})`\n    : undefined;\n\n  return (\n    <Label\n      as=\"label\"\n      className={clsx(withBaseName(), withBaseName(intent), className)}\n      id={a11yProps?.[\"aria-labelledby\"]}\n      disabled={disabled}\n      variant=\"secondary\"\n      {...restProps}\n    >\n      {children}\n      {necessityLabel && (\n        <span className={withBaseName(\"necessityLabel\")}>{necessityLabel}</span>\n      )}\n    </Label>\n  );\n};\n"],"names":["makePrefixer","useFormFieldProps","useWindow","useComponentCssInjection","formFieldLabelCss","capitalize","jsxs","Label","clsx","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA,CAAA;AAa/C,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAS,GAAA,OAAA;AAAA,EACN,GAAA,SAAA;AACL,CAA2B,KAAA;AACzB,EAAA,MAAM,EAAE,SAAA,EAAW,QAAU,EAAA,SAAA,KAAcC,mCAAkB,EAAA,CAAA;AAC7D,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,cAAA,GAAiB,YACnB,SAAc,KAAA,UAAA,GACZ,MACA,CAAK,EAAA,EAAAC,qBAAA,CAAW,SAAS,CAC3B,CAAA,CAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AAEJ,EAAA,uBACGC,eAAA,CAAAC,WAAA,EAAA;AAAA,IACC,EAAG,EAAA,OAAA;AAAA,IACH,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,IAC/D,IAAI,SAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,iBAAA,CAAA;AAAA,IAChB,QAAA;AAAA,IACA,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,SAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,kCACEC,cAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,QAAI,QAAA,EAAA,cAAA;AAAA,OAAe,CAAA;AAAA,KAAA;AAAA,GAErE,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/index.js

@@ -53,6 +53,8 @@ var Label = require('./text/Label.js');
 var Density = require('./theme/Density.js');
 var Theme = require('./theme/Theme.js');
 var Mode = require('./theme/Mode.js');
+var Toast = require('./toast/Toast.js');
+var ToastContent = require('./toast/ToastContent.js');
 var SaltProvider = require('./salt-provider/SaltProvider.js');
 var SplitLayout = require('./split-layout/SplitLayout.js');
 var ToggleButton = require('./toggle-button/ToggleButton.js');
@@ -146,6 +148,8 @@ exports.Label = Label.Label;
 exports.DensityValues = Density.DensityValues;
 exports.getCharacteristicValue = Theme.getCharacteristicValue;
 exports.ModeValues = Mode.ModeValues;
+exports.Toast = Toast.Toast;
+exports.ToastContent = ToastContent.ToastContent;
 exports.BreakpointContext = SaltProvider.BreakpointContext;
 exports.DEFAULT_DENSITY = SaltProvider.DEFAULT_DENSITY;
 exports.DensityContext = SaltProvider.DensityContext;

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/input/Input.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Style applied to the root element */\n.saltInput {\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderStyle: var(--salt-editable-borderStyle);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n  --input-borderWidth: var(--salt-size-border);\n  --input-paddingLeft: var(--salt-spacing-100);\n\n  align-items: center;\n  background: var(--saltInput-background, var(--input-background));\n  color: var(--saltInput-color, var(--salt-text-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n  height: var(--saltInput-height, var(--salt-size-base));\n  line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltInput-minWidth, 4em);\n  padding-left: var(--saltInput-paddingLeft, var(--input-paddingLeft));\n  padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n}\n\n.saltInput:hover {\n  --input-borderStyle: var(--salt-editable-borderStyle-hover);\n  --input-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--saltInput-background-hover, var(--input-background-hover));\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltInput:active {\n  --input-borderColor: var(--salt-editable-borderColor-active);\n  --input-borderStyle: var(--salt-editable-borderStyle-active);\n  --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--saltInput-background-active, var(--input-background-active));\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInput-primary {\n  --input-background: var(--salt-editable-primary-background);\n  --input-background-active: var(--salt-editable-primary-background-active);\n  --input-background-hover: var(--salt-editable-primary-background-hover);\n  --input-background-disabled: var(--salt-editable-primary-background-disabled);\n  --input-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInput-secondary {\n  --input-background: var(--salt-editable-secondary-background);\n  --input-background-active: var(--salt-editable-secondary-background-active);\n  --input-background-hover: var(--salt-editable-secondary-background-active);\n  --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInput-error,\n.saltInput-error:hover {\n  --input-background: var(--salt-status-error-background);\n  --input-background-active: var(--salt-status-error-background);\n  --input-background-hover: var(--salt-status-error-background);\n  --input-borderColor: var(--salt-status-error-borderColor);\n  --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInput-warning,\n.saltInput-warning:hover {\n  --input-background: var(--salt-status-warning-background);\n  --input-background-active: var(--salt-status-warning-background);\n  --input-background-hover: var(--salt-status-warning-background);\n  --input-borderColor: var(--salt-status-warning-borderColor);\n  --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInput-success,\n.saltInput-success:hover {\n  --input-background: var(--salt-status-success-background);\n  --input-background-active: var(--salt-status-success-background);\n  --input-background-hover: var(--salt-status-success-background);\n  --input-borderColor: var(--salt-status-success-borderColor);\n  --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner input component */\n.saltInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--input-textAlign);\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltInput-input::selection {\n  background: var(--salt-text-background-selected);\n}\n\n/* Styling when focused */\n.saltInput-focused {\n  --input-borderColor: var(--input-outlineColor);\n  --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInput.saltInput-readOnly {\n  --input-borderColor: var(--salt-editable-borderColor-readonly);\n  --input-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --input-paddingLeft: 0;\n\n  background: var(--input-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` */\n.saltInput-focused.saltInput-readOnly,\n.saltInput-focused.saltInput-disabled {\n  --input-borderWidth: var(--salt-size-border);\n  outline: none;\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInput-disabled .saltInput-input::selection {\n  background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInput.saltInput-disabled,\n.saltInput.saltInput-disabled:hover,\n.saltInput.saltInput-disabled:active {\n  --input-borderColor: var(--salt-editable-borderColor-disabled);\n  --input-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --input-borderWidth: var(--salt-size-border);\n\n  background: var(--input-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--saltInput-color-disabled, var(--salt-text-primary-foreground-disabled));\n}\n\n.saltInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);\n}\n\n/* Style applied to start adornments */\n.saltInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n.saltInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n.saltInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput .saltButton {\n  --saltButton-padding: 0;\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-50));\n  --saltButton-width: calc(var(--salt-size-base) - var(--salt-spacing-50));\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltInput {\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderStyle: var(--salt-editable-borderStyle);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n  --input-borderWidth: var(--salt-size-border);\n  --input-paddingLeft: var(--salt-spacing-100);\n\n  align-items: center;\n  background: var(--saltInput-background, var(--input-background));\n  color: var(--saltInput-color, var(--salt-text-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n  height: var(--saltInput-height, var(--salt-size-base));\n  line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltInput-minWidth, 4em);\n  padding-left: var(--saltInput-paddingLeft, var(--input-paddingLeft));\n  padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n}\n\n.saltInput:hover {\n  --input-borderStyle: var(--salt-editable-borderStyle-hover);\n  --input-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--saltInput-background-hover, var(--input-background-hover));\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltInput:active {\n  --input-borderColor: var(--salt-editable-borderColor-active);\n  --input-borderStyle: var(--salt-editable-borderStyle-active);\n  --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--saltInput-background-active, var(--input-background-active));\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInput-primary {\n  --input-background: var(--salt-editable-primary-background);\n  --input-background-active: var(--salt-editable-primary-background-active);\n  --input-background-hover: var(--salt-editable-primary-background-hover);\n  --input-background-disabled: var(--salt-editable-primary-background-disabled);\n  --input-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInput-secondary {\n  --input-background: var(--salt-editable-secondary-background);\n  --input-background-active: var(--salt-editable-secondary-background-active);\n  --input-background-hover: var(--salt-editable-secondary-background-active);\n  --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInput-error,\n.saltInput-error:hover {\n  --input-background: var(--salt-status-error-background);\n  --input-background-active: var(--salt-status-error-background);\n  --input-background-hover: var(--salt-status-error-background);\n  --input-borderColor: var(--salt-status-error-borderColor);\n  --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInput-warning,\n.saltInput-warning:hover {\n  --input-background: var(--salt-status-warning-background);\n  --input-background-active: var(--salt-status-warning-background);\n  --input-background-hover: var(--salt-status-warning-background);\n  --input-borderColor: var(--salt-status-warning-borderColor);\n  --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInput-success,\n.saltInput-success:hover {\n  --input-background: var(--salt-status-success-background);\n  --input-background-active: var(--salt-status-success-background);\n  --input-background-hover: var(--salt-status-success-background);\n  --input-borderColor: var(--salt-status-success-borderColor);\n  --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner input component */\n.saltInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--input-textAlign);\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltInput-input::selection {\n  background: var(--salt-text-background-selected);\n}\n\n/* Style applied to placeholder text */\n.saltInput-input::placeholder {\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltInput-focused {\n  --input-borderColor: var(--input-outlineColor);\n  --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInput.saltInput-readOnly {\n  --input-borderColor: var(--salt-editable-borderColor-readonly);\n  --input-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --input-borderWidth: var(--salt-size-border);\n  --input-paddingLeft: 0;\n\n  background: var(--input-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` */\n.saltInput-focused.saltInput-readOnly,\n.saltInput-focused.saltInput-disabled {\n  --input-borderWidth: var(--salt-size-border);\n  outline: none;\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInput-disabled .saltInput-input::selection {\n  background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInput.saltInput-disabled,\n.saltInput.saltInput-disabled:hover,\n.saltInput.saltInput-disabled:active {\n  --input-borderColor: var(--salt-editable-borderColor-disabled);\n  --input-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --input-borderWidth: var(--salt-size-border);\n\n  background: var(--input-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--saltInput-color-disabled, var(--salt-text-primary-foreground-disabled));\n}\n\n.saltInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);\n}\n\n/* Style applied to start adornments */\n.saltInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n.saltInput-readOnly .saltInput-startAdornmentContainer {\n  margin-left: var(--salt-spacing-50);\n}\n\n.saltInput-startAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n.saltInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n.saltInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput .saltButton {\n  --saltButton-padding: 0;\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-width: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Input.css.js.map

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = "/* Styles applied to Toast root element */\n.saltToast {\n  --toast-background: var(--salt-container-primary-background);\n\n  background: var(--saltToast-background, var(--toast-background));\n  border-color: var(--saltToast-borderColor, var(--toast-borderColor));\n  border-width: var(--saltToast-borderWidth, var(--salt-size-border));\n  border-style: var(--saltToast-borderStyle, var(--salt-container-borderStyle));\n\n  box-sizing: border-box;\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  display: inline-flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltToast-padding, var(--salt-spacing-100));\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n}\n\n/* Styles applied to icon */\n.saltToast-icon.saltIcon {\n  margin: calc(var(--salt-spacing-75) + 2px) 0 var(--salt-spacing-75) 0;\n}\n.salt-density-high.saltToast-icon.saltIcon {\n  margin: calc(var(--salt-spacing-75) + 1px) 0 var(--salt-spacing-75) 0;\n}\n\n/* Styles applied when state = \"info\" */\n.saltToast-info {\n  --toast-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when state = \"error\" */\n.saltToast-error {\n  --toast-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltToast-warning {\n  --toast-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when state = \"success\" */\n.saltToast-success {\n  --toast-borderColor: var(--salt-status-success-borderColor);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=Toast.css.js.map

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

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

package/dist-cjs/toast/Toast.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var React = require('react');
+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 StatusIndicator = require('../status-indicator/StatusIndicator.js');
+var Toast$1 = require('./Toast.css.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltToast");
+const Toast = React.forwardRef(function Toast2(props, ref) {
+  const { children, className, status = "info", ...rest } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-toast",
+    css: Toast$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    className: clsx.clsx(withBaseName(), withBaseName(status), className),
+    role: "alert",
+    ...rest,
+    ref,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator.StatusIndicator, {
+        status,
+        className: withBaseName("icon")
+      }),
+      children
+    ]
+  });
+});
+
+exports.Toast = Toast;
+//# sourceMappingURL=Toast.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sources":["../src/toast/Toast.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer } from \"../utils\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\n\nimport toastCss from \"./Toast.css\";\n\nconst withBaseName = makePrefixer(\"saltToast\");\n\nexport interface ToastProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   *  A string to determine the current state of the Toast.\n   */\n  status?: ValidationStatus;\n}\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n  props,\n  ref\n) {\n  const { children, className, status = \"info\", ...rest } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-toast\",\n    css: toastCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      className={clsx(withBaseName(), withBaseName(status), className)}\n      role=\"alert\"\n      {...rest}\n      ref={ref}\n    >\n      <StatusIndicator status={status} className={withBaseName(\"icon\")} />\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Toast","useWindow","useComponentCssInjection","toastCss","jsxs","clsx","jsx","StatusIndicator"],"mappings":";;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,WAAW,CAAA,CAAA;AAStC,MAAM,KAAQ,GAAAC,gBAAA,CAAuC,SAASC,MAAAA,CACnE,OACA,GACA,EAAA;AACA,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,MAAS,GAAA,MAAA,EAAA,GAAW,MAAS,GAAA,KAAA,CAAA;AAC1D,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,OAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACC,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,IAC/D,IAAK,EAAA,OAAA;AAAA,IACJ,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,IAEA,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAAC,+BAAA,EAAA;AAAA,QAAgB,MAAA;AAAA,QAAgB,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAA;AAAA,MACjE,QAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = "/* Styles applied to ToastContent */\n.saltToastContent {\n  flex: 1 0;\n  margin: var(--salt-spacing-75) 0;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=ToastContent.css.js.map

package/dist-cjs/toast/ToastContent.css.js.map

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

package/dist-cjs/toast/ToastContent.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var React = require('react');
+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 ToastContent$1 = require('./ToastContent.css.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltToastContent");
+const ToastContent = React.forwardRef(function ToastContent2({ children, className, ...restProps }, ref) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-toast-content",
+    css: ToastContent$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: clsx.clsx(withBaseName(), className),
+    ...restProps,
+    ref,
+    children
+  });
+});
+
+exports.ToastContent = ToastContent;
+//# sourceMappingURL=ToastContent.js.map

package/dist-cjs/toast/ToastContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastContent.js","sources":["../src/toast/ToastContent.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer } from \"../utils\";\n\nimport toastContentCss from \"./ToastContent.css\";\n\nconst withBaseName = makePrefixer(\"saltToastContent\");\n\nexport const ToastContent = forwardRef(function ToastContent(\n  { children, className, ...restProps }: ComponentPropsWithoutRef<\"div\">,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-toast-content\",\n    css: toastContentCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","ToastContent","useWindow","useComponentCssInjection","toastContentCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA,CAAA;AAEvC,MAAA,YAAA,GAAeC,iBAAW,SAASC,aAAAA,CAC9C,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,SAAU,EAAA,EACpC,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAI,GAAG,SAAA;AAAA,IAAW,GAAA;AAAA,IAC7D,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/button/Button.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to the root element if variant=\"cta\" */\n.saltButton-cta {\n  --button-background: var(--salt-actionable-cta-background);\n  --button-background-active: var(--salt-actionable-cta-background-active);\n  --button-background-disabled: var(--salt-actionable-cta-background-disabled);\n  --button-background-hover: var(--salt-actionable-cta-background-hover);\n  --button-fontWeight: var(--salt-actionable-cta-fontWeight);\n  --button-text-color: var(--salt-actionable-cta-foreground);\n  --button-text-color-active: var(--salt-actionable-cta-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-cta-foreground-hover);\n}\n\n/* Icon API in \"CTA\" variant @ignore */\n.saltButton-cta {\n  --saltIcon-color: var(--salt-actionable-cta-foreground);\n}\n.saltButton-cta:hover {\n  --saltIcon-color: var(--salt-actionable-cta-foreground-hover);\n}\n.saltButton-cta:active,\n.saltButton-cta.saltButton-active {\n  --saltIcon-color: var(--salt-actionable-cta-foreground-active);\n}\n.saltButton-cta.saltButton-disabled {\n  --saltIcon-color: var(--salt-actionable-cta-foreground-disabled);\n}\n\n/* Styles applied to the root element if variant=\"primary\" (or no variant specified) */\n.saltButton-primary {\n  --button-background: var(--salt-actionable-primary-background);\n  --button-background-active: var(--salt-actionable-primary-background-active);\n  --button-background-disabled: var(--salt-actionable-primary-background-disabled);\n  --button-background-hover: var(--salt-actionable-primary-background-hover);\n  --button-fontWeight: var(--salt-actionable-primary-fontWeight);\n  --button-text-color: var(--salt-actionable-primary-foreground);\n  --button-text-color-active: var(--salt-actionable-primary-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-primary-foreground-hover);\n}\n\n/* Icon API in \"primary\" variant @ignore */\n.saltButton-primary {\n  --saltIcon-color: var(--salt-actionable-primary-foreground);\n}\n.saltButton-primary:hover {\n  --saltIcon-color: var(--salt-actionable-primary-foreground-hover);\n}\n.saltButton-primary:active,\n.saltButton-primary.saltButton-active {\n  --saltIcon-color: var(--salt-actionable-primary-foreground-active);\n}\n.saltButton-primary.saltButton-disabled {\n  --saltIcon-color: var(--salt-actionable-primary-foreground-disabled);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltButton-secondary {\n  --button-background: var(--salt-actionable-secondary-background);\n  --button-background-active: var(--salt-actionable-secondary-background-active);\n  --button-background-disabled: var(--salt-actionable-secondary-background-disabled);\n  --button-background-hover: var(--salt-actionable-secondary-background-hover);\n  --button-fontWeight: var(--salt-actionable-secondary-fontWeight);\n  --button-text-color: var(--salt-actionable-secondary-foreground);\n  --button-text-color-active: var(--salt-actionable-secondary-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-secondary-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-secondary-foreground-hover);\n}\n\n/* Icon API in \"secondary\" variant @ignore */\n.saltButton-secondary {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground);\n}\n\n.saltButton-secondary:hover {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n.saltButton-secondary:active,\n.saltButton-secondary.saltButton-active {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n.saltButton-secondary.saltButton-disabled {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-disabled);\n}\n\n.saltButton {\n  align-items: var(--saltButton-alignItems, center);\n  appearance: none;\n  background: var(--saltButton-background, var(--button-background));\n  border-color: var(--saltButton-borderColor, transparent);\n  border-style: var(--saltButton-borderStyle, solid);\n  border-width: var(--saltButton-borderWidth, 0);\n  border-radius: var(--saltButton-borderRadius, 0);\n  color: var(--saltButton-text-color, var(--button-text-color));\n  cursor: var(--saltButton-cursor, pointer);\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  justify-content: var(--saltButton-justifyContent, center);\n  font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n  font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n  line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--saltButton-letterSpacing, var(--salt-actionable-letterSpacing));\n  text-transform: var(--saltButton-textTransform, var(--salt-actionable-textTransform));\n  padding: 0 var(--saltButton-padding, var(--salt-size-unit));\n  margin: var(--saltButton-margin, 0);\n  height: var(--saltButton-height, var(--salt-size-base));\n  min-width: var(--saltButton-minWidth, unset);\n  min-height: 0;\n  position: relative;\n  text-align: var(--saltButton-textAlign, var(--salt-actionable-textAlign));\n  text-decoration: none;\n  transition: none;\n  user-select: none;\n  width: var(--saltButton-width, auto);\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n  /* Styles applied to align children*/\n  font-weight: var(--saltButton-fontWeight, var(--button-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible(:active) {\n  background: var(--saltButton-background-active-hover, var(--button-background));\n  color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n}\n\n/* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n.saltButton:hover {\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n  background: var(--saltButton-background-active, var(--button-background-active));\n  color: var(--saltButton-text-color-active, var(--button-text-color-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n  /* Overrides to apply the disabled style when the button is focusable while also disabled */\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:hover {\n  background: var(--saltButton-background-disabled, var(--button-background-disabled));\n  color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));\n  cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled));\n}\n\n.saltButton[href] {\n  display: inline-flex;\n}\n";
+var css_248z = "/* Styles applied to the root element if variant=\"cta\" */\n.saltButton-cta {\n  --button-background: var(--salt-actionable-cta-background);\n  --button-background-active: var(--salt-actionable-cta-background-active);\n  --button-background-disabled: var(--salt-actionable-cta-background-disabled);\n  --button-background-hover: var(--salt-actionable-cta-background-hover);\n  --button-fontWeight: var(--salt-actionable-cta-fontWeight);\n  --button-text-color: var(--salt-actionable-cta-foreground);\n  --button-text-color-active: var(--salt-actionable-cta-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-cta-foreground-hover);\n}\n\n/* Icon API in \"CTA\" variant @ignore */\n.saltButton-cta {\n  --saltIcon-color: var(--salt-actionable-cta-foreground);\n}\n.saltButton-cta:hover {\n  --saltIcon-color: var(--salt-actionable-cta-foreground-hover);\n}\n.saltButton-cta:active,\n.saltButton-cta.saltButton-active {\n  --saltIcon-color: var(--salt-actionable-cta-foreground-active);\n}\n.saltButton-cta.saltButton-disabled {\n  --saltIcon-color: var(--salt-actionable-cta-foreground-disabled);\n}\n\n/* Styles applied to the root element if variant=\"primary\" (or no variant specified) */\n.saltButton-primary {\n  --button-background: var(--salt-actionable-primary-background);\n  --button-background-active: var(--salt-actionable-primary-background-active);\n  --button-background-disabled: var(--salt-actionable-primary-background-disabled);\n  --button-background-hover: var(--salt-actionable-primary-background-hover);\n  --button-fontWeight: var(--salt-actionable-primary-fontWeight);\n  --button-text-color: var(--salt-actionable-primary-foreground);\n  --button-text-color-active: var(--salt-actionable-primary-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-primary-foreground-hover);\n}\n\n/* Icon API in \"primary\" variant @ignore */\n.saltButton-primary {\n  --saltIcon-color: var(--salt-actionable-primary-foreground);\n}\n.saltButton-primary:hover {\n  --saltIcon-color: var(--salt-actionable-primary-foreground-hover);\n}\n.saltButton-primary:active,\n.saltButton-primary.saltButton-active {\n  --saltIcon-color: var(--salt-actionable-primary-foreground-active);\n}\n.saltButton-primary.saltButton-disabled {\n  --saltIcon-color: var(--salt-actionable-primary-foreground-disabled);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltButton-secondary {\n  --button-background: var(--salt-actionable-secondary-background);\n  --button-background-active: var(--salt-actionable-secondary-background-active);\n  --button-background-disabled: var(--salt-actionable-secondary-background-disabled);\n  --button-background-hover: var(--salt-actionable-secondary-background-hover);\n  --button-fontWeight: var(--salt-actionable-secondary-fontWeight);\n  --button-text-color: var(--salt-actionable-secondary-foreground);\n  --button-text-color-active: var(--salt-actionable-secondary-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-secondary-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-secondary-foreground-hover);\n}\n\n/* Icon API in \"secondary\" variant @ignore */\n.saltButton-secondary {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground);\n}\n\n.saltButton-secondary:hover {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n.saltButton-secondary:active,\n.saltButton-secondary.saltButton-active {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n.saltButton-secondary.saltButton-disabled {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-disabled);\n}\n\n.saltButton {\n  align-items: var(--saltButton-alignItems, center);\n  appearance: none;\n  background: var(--saltButton-background, var(--button-background));\n  border-color: var(--saltButton-borderColor, transparent);\n  border-style: var(--saltButton-borderStyle, solid);\n  border-width: var(--saltButton-borderWidth, 0);\n  border-radius: var(--saltButton-borderRadius, 0);\n  color: var(--saltButton-text-color, var(--button-text-color));\n  cursor: var(--saltButton-cursor, pointer);\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  justify-content: var(--saltButton-justifyContent, center);\n  font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n  font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n  line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--saltButton-letterSpacing, var(--salt-actionable-letterSpacing));\n  text-transform: var(--saltButton-textTransform, var(--salt-actionable-textTransform));\n  padding: 0 var(--saltButton-padding, var(--salt-size-unit));\n  margin: var(--saltButton-margin, 0);\n  height: var(--saltButton-height, var(--salt-size-base));\n  min-width: var(--saltButton-minWidth, unset);\n  min-height: 0;\n  position: relative;\n  text-align: var(--saltButton-textAlign, var(--salt-actionable-textAlign));\n  text-decoration: none;\n  transition: none;\n  width: var(--saltButton-width, auto);\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n  /* Styles applied to align children*/\n  font-weight: var(--saltButton-fontWeight, var(--button-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible(:active) {\n  background: var(--saltButton-background-active-hover, var(--button-background));\n  color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n}\n\n/* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n.saltButton:hover {\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n  background: var(--saltButton-background-active, var(--button-background-active));\n  color: var(--saltButton-text-color-active, var(--button-text-color-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n  /* Overrides to apply the disabled style when the button is focusable while also disabled */\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:hover {\n  background: var(--saltButton-background-disabled, var(--button-background-disabled));\n  color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));\n  cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled));\n}\n\n.saltButton[href] {\n  display: inline-flex;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Button.css.js.map

package/dist-es/checkbox/CheckboxGroup.js

@@ -51,8 +51,8 @@ const CheckboxGroup = forwardRef(function CheckboxGroup2({
     state: "checkedValues"
   });
   const handleChange = (event) => {
+    const name2 = event.target.value;
     setCheckedValues((oldValues = []) => {
-      const name2 = event.target.value;
       const isSelected = oldValues.includes(name2);
       return isSelected ? oldValues.filter((value) => value !== name2) : oldValues.concat(name2);
     });

package/dist-es/checkbox/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","sources":["../src/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEvent,\n  ChangeEventHandler,\n  ComponentPropsWithoutRef,\n  forwardRef,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { CheckboxGroupContext } from \"./internal/CheckboxGroupContext\";\nimport checkboxGroupCss from \"./CheckboxGroup.css\";\n\nexport interface CheckboxGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"fieldset\">, \"onChange\"> {\n  /**\n   * The current checked options.\n   */\n  checkedValues?: string[];\n  /**\n   * The default selected options for un-controlled component.\n   */\n  defaultCheckedValues?: string[];\n  /**\n   * Display group of elements in a compact row.\n   */\n  direction?: \"horizontal\" | \"vertical\";\n  /**\n   * Disable the Checkbox group\n   */\n  disabled?: boolean;\n  /**\n   * The name used to reference the value of the control.\n   */\n  name?: string;\n  /**\n   * Callback fired when a checkbox is clicked.\n   * `event.target.value` returns the value of the checkbox that was clicked.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * Only for horizontal direction. When `true` the text in radio button label will wrap to fit within the container. Otherwise, the checkboxes will wrap onto the next line.\n   */\n  wrap?: boolean;\n  /**\n   * Validation status.\n   */\n  validationStatus?: AdornmentValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxGroup\");\n\nexport const CheckboxGroup = forwardRef<\n  HTMLFieldSetElement,\n  CheckboxGroupProps\n>(function CheckboxGroup(\n  {\n    checkedValues: checkedValuesProp,\n    defaultCheckedValues = [],\n    children,\n    className,\n    disabled: disabledProp,\n    direction = \"vertical\",\n    name,\n    onChange,\n    readOnly: readOnlyProp,\n    wrap,\n    validationStatus: validationStatusProp,\n    ...other\n  },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-checkbox-group\",\n    css: checkboxGroupCss,\n    window: targetWindow,\n  });\n\n  const {\n    a11yProps,\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n    validationStatus: formFieldValidationStatus,\n  } = useFormFieldProps();\n\n  const disabled = formFieldDisabled ?? disabledProp;\n  const readOnly = formFieldReadOnly ?? readOnlyProp;\n  const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n  const [checkedValues, setCheckedValues] = useControlled({\n    controlled: checkedValuesProp,\n    default: defaultCheckedValues,\n    name: \"CheckboxGroup\",\n    state: \"checkedValues\",\n  });\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setCheckedValues((oldValues: string[] = []) => {\n      const name = event.target.value;\n      const isSelected = oldValues.includes(name);\n\n      return isSelected\n        ? oldValues.filter((value) => value !== name)\n        : oldValues.concat(name);\n    });\n\n    onChange?.(event);\n  };\n\n  return (\n    <fieldset\n      className={clsx(\n        withBaseName(),\n        withBaseName(direction),\n        {\n          [withBaseName(\"noWrap\")]: !wrap,\n        },\n        className\n      )}\n      ref={ref}\n      {...other}\n    >\n      <CheckboxGroupContext.Provider\n        value={{\n          a11yProps,\n          disabled,\n          name,\n          onChange: handleChange,\n          checkedValues,\n          readOnly,\n          validationStatus,\n        }}\n      >\n        {children}\n      </CheckboxGroupContext.Provider>\n    </fieldset>\n  );\n});\n"],"names":["CheckboxGroup","checkboxGroupCss","name"],"mappings":";;;;;;;;;;;;;;;;AAwDA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAExC,MAAA,aAAA,GAAgB,UAG3B,CAAA,SAASA,cACT,CAAA;AAAA,EACE,aAAe,EAAA,iBAAA;AAAA,EACf,uBAAuB,EAAC;AAAA,EACxB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,SAAY,GAAA,UAAA;AAAA,EACZ,IAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,IAAA;AAAA,EACA,gBAAkB,EAAA,oBAAA;AAAA,EACf,GAAA,KAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,QAAU,EAAA,iBAAA;AAAA,IACV,QAAU,EAAA,iBAAA;AAAA,IACV,gBAAkB,EAAA,yBAAA;AAAA,MAChB,iBAAkB,EAAA,CAAA;AAEtB,EAAA,MAAM,WAAW,iBAAqB,IAAA,IAAA,GAAA,iBAAA,GAAA,YAAA,CAAA;AACtC,EAAA,MAAM,WAAW,iBAAqB,IAAA,IAAA,GAAA,iBAAA,GAAA,YAAA,CAAA;AACtC,EAAA,MAAM,mBAAmB,yBAA6B,IAAA,IAAA,GAAA,yBAAA,GAAA,oBAAA,CAAA;AAEtD,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,aAAc,CAAA;AAAA,IACtD,UAAY,EAAA,iBAAA;AAAA,IACZ,OAAS,EAAA,oBAAA;AAAA,IACT,IAAM,EAAA,eAAA;AAAA,IACN,KAAO,EAAA,eAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAiB,gBAAA,CAAA,CAAC,SAAsB,GAAA,EAAO,KAAA;AAC7C,MAAMC,MAAAA,KAAAA,GAAO,MAAM,MAAO,CAAA,KAAA,CAAA;AAC1B,MAAM,MAAA,UAAA,GAAa,SAAU,CAAA,QAAA,CAASA,KAAI,CAAA,CAAA;AAE1C,MAAO,OAAA,UAAA,GACH,SAAU,CAAA,MAAA,CAAO,CAAC,KAAA,KAAU,UAAUA,KAAI,CAAA,GAC1C,SAAU,CAAA,MAAA,CAAOA,KAAI,CAAA,CAAA;AAAA,KAC1B,CAAA,CAAA;AAED,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,aAAa,SAAS,CAAA;AAAA,MACtB;AAAA,QACE,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,CAAC,IAAA;AAAA,OAC7B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,GAAA;AAAA,IACC,GAAG,KAAA;AAAA,IAEJ,QAAA,kBAAA,GAAA,CAAC,qBAAqB,QAArB,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,SAAA;AAAA,QACA,QAAA;AAAA,QACA,IAAA;AAAA,QACA,QAAU,EAAA,YAAA;AAAA,QACV,aAAA;AAAA,QACA,QAAA;AAAA,QACA,gBAAA;AAAA,OACF;AAAA,MAEC,QAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"CheckboxGroup.js","sources":["../src/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEvent,\n  ChangeEventHandler,\n  ComponentPropsWithoutRef,\n  forwardRef,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { CheckboxGroupContext } from \"./internal/CheckboxGroupContext\";\nimport checkboxGroupCss from \"./CheckboxGroup.css\";\n\nexport interface CheckboxGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"fieldset\">, \"onChange\"> {\n  /**\n   * The current checked options.\n   */\n  checkedValues?: string[];\n  /**\n   * The default selected options for un-controlled component.\n   */\n  defaultCheckedValues?: string[];\n  /**\n   * Display group of elements in a compact row.\n   */\n  direction?: \"horizontal\" | \"vertical\";\n  /**\n   * Disable the Checkbox group\n   */\n  disabled?: boolean;\n  /**\n   * The name used to reference the value of the control.\n   */\n  name?: string;\n  /**\n   * Callback fired when a checkbox is clicked.\n   * `event.target.value` returns the value of the checkbox that was clicked.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * Only for horizontal direction. When `true` the text in radio button label will wrap to fit within the container. Otherwise, the checkboxes will wrap onto the next line.\n   */\n  wrap?: boolean;\n  /**\n   * Validation status.\n   */\n  validationStatus?: AdornmentValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxGroup\");\n\nexport const CheckboxGroup = forwardRef<\n  HTMLFieldSetElement,\n  CheckboxGroupProps\n>(function CheckboxGroup(\n  {\n    checkedValues: checkedValuesProp,\n    defaultCheckedValues = [],\n    children,\n    className,\n    disabled: disabledProp,\n    direction = \"vertical\",\n    name,\n    onChange,\n    readOnly: readOnlyProp,\n    wrap,\n    validationStatus: validationStatusProp,\n    ...other\n  },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-checkbox-group\",\n    css: checkboxGroupCss,\n    window: targetWindow,\n  });\n\n  const {\n    a11yProps,\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n    validationStatus: formFieldValidationStatus,\n  } = useFormFieldProps();\n\n  const disabled = formFieldDisabled ?? disabledProp;\n  const readOnly = formFieldReadOnly ?? readOnlyProp;\n  const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n  const [checkedValues, setCheckedValues] = useControlled({\n    controlled: checkedValuesProp,\n    default: defaultCheckedValues,\n    name: \"CheckboxGroup\",\n    state: \"checkedValues\",\n  });\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const name = event.target.value;\n    setCheckedValues((oldValues: string[] = []) => {\n      const isSelected = oldValues.includes(name);\n\n      return isSelected\n        ? oldValues.filter((value) => value !== name)\n        : oldValues.concat(name);\n    });\n\n    onChange?.(event);\n  };\n\n  return (\n    <fieldset\n      className={clsx(\n        withBaseName(),\n        withBaseName(direction),\n        {\n          [withBaseName(\"noWrap\")]: !wrap,\n        },\n        className\n      )}\n      ref={ref}\n      {...other}\n    >\n      <CheckboxGroupContext.Provider\n        value={{\n          a11yProps,\n          disabled,\n          name,\n          onChange: handleChange,\n          checkedValues,\n          readOnly,\n          validationStatus,\n        }}\n      >\n        {children}\n      </CheckboxGroupContext.Provider>\n    </fieldset>\n  );\n});\n"],"names":["CheckboxGroup","checkboxGroupCss","name"],"mappings":";;;;;;;;;;;;;;;;AAwDA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAExC,MAAA,aAAA,GAAgB,UAG3B,CAAA,SAASA,cACT,CAAA;AAAA,EACE,aAAe,EAAA,iBAAA;AAAA,EACf,uBAAuB,EAAC;AAAA,EACxB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,SAAY,GAAA,UAAA;AAAA,EACZ,IAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,IAAA;AAAA,EACA,gBAAkB,EAAA,oBAAA;AAAA,EACf,GAAA,KAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,QAAU,EAAA,iBAAA;AAAA,IACV,QAAU,EAAA,iBAAA;AAAA,IACV,gBAAkB,EAAA,yBAAA;AAAA,MAChB,iBAAkB,EAAA,CAAA;AAEtB,EAAA,MAAM,WAAW,iBAAqB,IAAA,IAAA,GAAA,iBAAA,GAAA,YAAA,CAAA;AACtC,EAAA,MAAM,WAAW,iBAAqB,IAAA,IAAA,GAAA,iBAAA,GAAA,YAAA,CAAA;AACtC,EAAA,MAAM,mBAAmB,yBAA6B,IAAA,IAAA,GAAA,yBAAA,GAAA,oBAAA,CAAA;AAEtD,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,aAAc,CAAA;AAAA,IACtD,UAAY,EAAA,iBAAA;AAAA,IACZ,OAAS,EAAA,oBAAA;AAAA,IACT,IAAM,EAAA,eAAA;AAAA,IACN,KAAO,EAAA,eAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAMC,MAAAA,KAAAA,GAAO,MAAM,MAAO,CAAA,KAAA,CAAA;AAC1B,IAAiB,gBAAA,CAAA,CAAC,SAAsB,GAAA,EAAO,KAAA;AAC7C,MAAM,MAAA,UAAA,GAAa,SAAU,CAAA,QAAA,CAASA,KAAI,CAAA,CAAA;AAE1C,MAAO,OAAA,UAAA,GACH,SAAU,CAAA,MAAA,CAAO,CAAC,KAAA,KAAU,UAAUA,KAAI,CAAA,GAC1C,SAAU,CAAA,MAAA,CAAOA,KAAI,CAAA,CAAA;AAAA,KAC1B,CAAA,CAAA;AAED,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,aAAa,SAAS,CAAA;AAAA,MACtB;AAAA,QACE,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,CAAC,IAAA;AAAA,OAC7B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,GAAA;AAAA,IACC,GAAG,KAAA;AAAA,IAEJ,QAAA,kBAAA,GAAA,CAAC,qBAAqB,QAArB,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,SAAA;AAAA,QACA,QAAA;AAAA,QACA,IAAA;AAAA,QACA,QAAU,EAAA,YAAA;AAAA,QACV,aAAA;AAAA,QACA,QAAA;AAAA,QACA,gBAAA;AAAA,OACF;AAAA,MAEC,QAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/form-field/FormFieldLabel.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltFormFieldLabel.saltText {\n  font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong));\n  width: 100%;\n}\n\n.saltFormFieldLabel:hover + .saltFormField-controls * {\n  --input-borderColor: var(--input-borderColor-hover);\n}\n\n.saltFormField-labelLeft .saltFormFieldLabel.saltText {\n  align-self: baseline;\n  padding-top: var(--salt-spacing-100);\n}\n\n.saltFormFieldLabel-necessityLabel {\n  font-weight: var(--salt-text-fontWeight);\n  font-style: var(--salt-editable-help-fontStyle);\n}\n\n.saltFormFieldLabel-pronounced.saltText {\n  color: var(--salt-text-primary-foreground);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n";
+var css_248z = ".saltFormFieldLabel.saltText {\n  font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong));\n  width: 100%;\n}\n\n.saltFormFieldLabel:hover + .saltFormField-controls * {\n  --input-borderColor: var(--input-borderColor-hover);\n}\n\n.saltFormField-labelLeft .saltFormFieldLabel.saltText {\n  align-self: baseline;\n  padding-top: var(--salt-spacing-100);\n}\n\n.saltFormFieldLabel-necessityLabel {\n  font-weight: var(--salt-text-fontWeight);\n  font-style: var(--salt-editable-help-fontStyle);\n}\n\n.saltFormFieldLabel-sentence.saltText {\n  color: var(--salt-text-primary-foreground);\n  font-size: var(--salt-text-fontSize);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=FormFieldLabel.css.js.map

package/dist-es/form-field/FormFieldLabel.js

@@ -21,7 +21,7 @@ const withBaseName = makePrefixer("saltFormFieldLabel");
 const FormFieldLabel = ({
   className,
   children,
-  pronounced = false,
+  intent = "label",
   ...restProps
 }) => {
   const { a11yProps, disabled, necessity } = useFormFieldProps();
@@ -34,11 +34,7 @@ const FormFieldLabel = ({
   const necessityLabel = necessity ? necessity === "asterisk" ? "*" : ` (${capitalize(necessity)})` : void 0;
   return /* @__PURE__ */ jsxs(Label, {
     as: "label",
-    className: clsx(
-      withBaseName(),
-      { [withBaseName("pronounced")]: pronounced },
-      className
-    ),
+    className: clsx(withBaseName(), withBaseName(intent), className),
     id: a11yProps == null ? void 0 : a11yProps["aria-labelledby"],
     disabled,
     variant: "secondary",

package/dist-es/form-field/FormFieldLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field/FormFieldLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Label, TextProps } from \"../text\";\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport formFieldLabelCss from \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\n\nexport const FormFieldLabel = ({\n  className,\n  children,\n  pronounced = false,\n  ...restProps\n}: Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> & {\n  pronounced?: boolean;\n}) => {\n  const { a11yProps, disabled, necessity } = useFormFieldProps();\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-field-label\",\n    css: formFieldLabelCss,\n    window: targetWindow,\n  });\n\n  const necessityLabel = necessity\n    ? necessity === \"asterisk\"\n      ? \"*\"\n      : ` (${capitalize(necessity)})`\n    : undefined;\n\n  return (\n    <Label\n      as=\"label\"\n      className={clsx(\n        withBaseName(),\n        { [withBaseName(\"pronounced\")]: pronounced },\n        className\n      )}\n      id={a11yProps?.[\"aria-labelledby\"]}\n      disabled={disabled}\n      variant=\"secondary\"\n      {...restProps}\n    >\n      {children}\n      {necessityLabel && (\n        <span className={withBaseName(\"necessityLabel\")}>{necessityLabel}</span>\n      )}\n    </Label>\n  );\n};\n"],"names":["formFieldLabelCss"],"mappings":";;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAa,GAAA,KAAA;AAAA,EACV,GAAA,SAAA;AACL,CAEM,KAAA;AACJ,EAAA,MAAM,EAAE,SAAA,EAAW,QAAU,EAAA,SAAA,KAAc,iBAAkB,EAAA,CAAA;AAC7D,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,cAAA,GAAiB,YACnB,SAAc,KAAA,UAAA,GACZ,MACA,CAAK,EAAA,EAAA,UAAA,CAAW,SAAS,CAC3B,CAAA,CAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AAEJ,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,EAAG,EAAA,OAAA;AAAA,IACH,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,EAAE,CAAC,YAAa,CAAA,YAAY,IAAI,UAAW,EAAA;AAAA,MAC3C,SAAA;AAAA,KACF;AAAA,IACA,IAAI,SAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,iBAAA,CAAA;AAAA,IAChB,QAAA;AAAA,IACA,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,SAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,kCACE,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,QAAI,QAAA,EAAA,cAAA;AAAA,OAAe,CAAA;AAAA,KAAA;AAAA,GAErE,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field/FormFieldLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Label, TextProps } from \"../text\";\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport formFieldLabelCss from \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\n\nexport interface FormFieldLabelProps\n  extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {\n  /**\n   * Intent for the label.\n   *\n   * Defaults to \"label\"\n   * Using \"sentence\" gives more prominent styling\n   */\n  intent?: \"label\" | \"sentence\";\n}\n\nexport const FormFieldLabel = ({\n  className,\n  children,\n  intent = \"label\",\n  ...restProps\n}: FormFieldLabelProps) => {\n  const { a11yProps, disabled, necessity } = useFormFieldProps();\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-field-label\",\n    css: formFieldLabelCss,\n    window: targetWindow,\n  });\n\n  const necessityLabel = necessity\n    ? necessity === \"asterisk\"\n      ? \"*\"\n      : ` (${capitalize(necessity)})`\n    : undefined;\n\n  return (\n    <Label\n      as=\"label\"\n      className={clsx(withBaseName(), withBaseName(intent), className)}\n      id={a11yProps?.[\"aria-labelledby\"]}\n      disabled={disabled}\n      variant=\"secondary\"\n      {...restProps}\n    >\n      {children}\n      {necessityLabel && (\n        <span className={withBaseName(\"necessityLabel\")}>{necessityLabel}</span>\n      )}\n    </Label>\n  );\n};\n"],"names":["formFieldLabelCss"],"mappings":";;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAa/C,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAS,GAAA,OAAA;AAAA,EACN,GAAA,SAAA;AACL,CAA2B,KAAA;AACzB,EAAA,MAAM,EAAE,SAAA,EAAW,QAAU,EAAA,SAAA,KAAc,iBAAkB,EAAA,CAAA;AAC7D,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,cAAA,GAAiB,YACnB,SAAc,KAAA,UAAA,GACZ,MACA,CAAK,EAAA,EAAA,UAAA,CAAW,SAAS,CAC3B,CAAA,CAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AAEJ,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,EAAG,EAAA,OAAA;AAAA,IACH,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,IAC/D,IAAI,SAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,iBAAA,CAAA;AAAA,IAChB,QAAA;AAAA,IACA,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,SAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,kCACE,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,QAAI,QAAA,EAAA,cAAA;AAAA,OAAe,CAAA;AAAA,KAAA;AAAA,GAErE,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/index.js

@@ -49,6 +49,8 @@ export { Label } from './text/Label.js';
 export { DensityValues } from './theme/Density.js';
 export { getCharacteristicValue } from './theme/Theme.js';
 export { ModeValues } from './theme/Mode.js';
+export { Toast } from './toast/Toast.js';
+export { ToastContent } from './toast/ToastContent.js';
 export { BreakpointContext, DEFAULT_DENSITY, DensityContext, SaltProvider, ThemeContext, useBreakpoints, useDensity, useTheme } from './salt-provider/SaltProvider.js';
 export { SplitLayout } from './split-layout/SplitLayout.js';
 export { ToggleButton } from './toggle-button/ToggleButton.js';

package/dist-es/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-es/input/Input.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Style applied to the root element */\n.saltInput {\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderStyle: var(--salt-editable-borderStyle);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n  --input-borderWidth: var(--salt-size-border);\n  --input-paddingLeft: var(--salt-spacing-100);\n\n  align-items: center;\n  background: var(--saltInput-background, var(--input-background));\n  color: var(--saltInput-color, var(--salt-text-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n  height: var(--saltInput-height, var(--salt-size-base));\n  line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltInput-minWidth, 4em);\n  padding-left: var(--saltInput-paddingLeft, var(--input-paddingLeft));\n  padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n}\n\n.saltInput:hover {\n  --input-borderStyle: var(--salt-editable-borderStyle-hover);\n  --input-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--saltInput-background-hover, var(--input-background-hover));\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltInput:active {\n  --input-borderColor: var(--salt-editable-borderColor-active);\n  --input-borderStyle: var(--salt-editable-borderStyle-active);\n  --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--saltInput-background-active, var(--input-background-active));\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInput-primary {\n  --input-background: var(--salt-editable-primary-background);\n  --input-background-active: var(--salt-editable-primary-background-active);\n  --input-background-hover: var(--salt-editable-primary-background-hover);\n  --input-background-disabled: var(--salt-editable-primary-background-disabled);\n  --input-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInput-secondary {\n  --input-background: var(--salt-editable-secondary-background);\n  --input-background-active: var(--salt-editable-secondary-background-active);\n  --input-background-hover: var(--salt-editable-secondary-background-active);\n  --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInput-error,\n.saltInput-error:hover {\n  --input-background: var(--salt-status-error-background);\n  --input-background-active: var(--salt-status-error-background);\n  --input-background-hover: var(--salt-status-error-background);\n  --input-borderColor: var(--salt-status-error-borderColor);\n  --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInput-warning,\n.saltInput-warning:hover {\n  --input-background: var(--salt-status-warning-background);\n  --input-background-active: var(--salt-status-warning-background);\n  --input-background-hover: var(--salt-status-warning-background);\n  --input-borderColor: var(--salt-status-warning-borderColor);\n  --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInput-success,\n.saltInput-success:hover {\n  --input-background: var(--salt-status-success-background);\n  --input-background-active: var(--salt-status-success-background);\n  --input-background-hover: var(--salt-status-success-background);\n  --input-borderColor: var(--salt-status-success-borderColor);\n  --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner input component */\n.saltInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--input-textAlign);\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltInput-input::selection {\n  background: var(--salt-text-background-selected);\n}\n\n/* Styling when focused */\n.saltInput-focused {\n  --input-borderColor: var(--input-outlineColor);\n  --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInput.saltInput-readOnly {\n  --input-borderColor: var(--salt-editable-borderColor-readonly);\n  --input-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --input-paddingLeft: 0;\n\n  background: var(--input-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` */\n.saltInput-focused.saltInput-readOnly,\n.saltInput-focused.saltInput-disabled {\n  --input-borderWidth: var(--salt-size-border);\n  outline: none;\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInput-disabled .saltInput-input::selection {\n  background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInput.saltInput-disabled,\n.saltInput.saltInput-disabled:hover,\n.saltInput.saltInput-disabled:active {\n  --input-borderColor: var(--salt-editable-borderColor-disabled);\n  --input-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --input-borderWidth: var(--salt-size-border);\n\n  background: var(--input-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--saltInput-color-disabled, var(--salt-text-primary-foreground-disabled));\n}\n\n.saltInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);\n}\n\n/* Style applied to start adornments */\n.saltInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n.saltInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n.saltInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput .saltButton {\n  --saltButton-padding: 0;\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-50));\n  --saltButton-width: calc(var(--salt-size-base) - var(--salt-spacing-50));\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltInput {\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderStyle: var(--salt-editable-borderStyle);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n  --input-borderWidth: var(--salt-size-border);\n  --input-paddingLeft: var(--salt-spacing-100);\n\n  align-items: center;\n  background: var(--saltInput-background, var(--input-background));\n  color: var(--saltInput-color, var(--salt-text-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n  height: var(--saltInput-height, var(--salt-size-base));\n  line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltInput-minWidth, 4em);\n  padding-left: var(--saltInput-paddingLeft, var(--input-paddingLeft));\n  padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n}\n\n.saltInput:hover {\n  --input-borderStyle: var(--salt-editable-borderStyle-hover);\n  --input-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--saltInput-background-hover, var(--input-background-hover));\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltInput:active {\n  --input-borderColor: var(--salt-editable-borderColor-active);\n  --input-borderStyle: var(--salt-editable-borderStyle-active);\n  --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--saltInput-background-active, var(--input-background-active));\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInput-primary {\n  --input-background: var(--salt-editable-primary-background);\n  --input-background-active: var(--salt-editable-primary-background-active);\n  --input-background-hover: var(--salt-editable-primary-background-hover);\n  --input-background-disabled: var(--salt-editable-primary-background-disabled);\n  --input-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInput-secondary {\n  --input-background: var(--salt-editable-secondary-background);\n  --input-background-active: var(--salt-editable-secondary-background-active);\n  --input-background-hover: var(--salt-editable-secondary-background-active);\n  --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInput-error,\n.saltInput-error:hover {\n  --input-background: var(--salt-status-error-background);\n  --input-background-active: var(--salt-status-error-background);\n  --input-background-hover: var(--salt-status-error-background);\n  --input-borderColor: var(--salt-status-error-borderColor);\n  --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInput-warning,\n.saltInput-warning:hover {\n  --input-background: var(--salt-status-warning-background);\n  --input-background-active: var(--salt-status-warning-background);\n  --input-background-hover: var(--salt-status-warning-background);\n  --input-borderColor: var(--salt-status-warning-borderColor);\n  --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInput-success,\n.saltInput-success:hover {\n  --input-background: var(--salt-status-success-background);\n  --input-background-active: var(--salt-status-success-background);\n  --input-background-hover: var(--salt-status-success-background);\n  --input-borderColor: var(--salt-status-success-borderColor);\n  --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner input component */\n.saltInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--input-textAlign);\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltInput-input::selection {\n  background: var(--salt-text-background-selected);\n}\n\n/* Style applied to placeholder text */\n.saltInput-input::placeholder {\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltInput-focused {\n  --input-borderColor: var(--input-outlineColor);\n  --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInput.saltInput-readOnly {\n  --input-borderColor: var(--salt-editable-borderColor-readonly);\n  --input-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --input-borderWidth: var(--salt-size-border);\n  --input-paddingLeft: 0;\n\n  background: var(--input-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` */\n.saltInput-focused.saltInput-readOnly,\n.saltInput-focused.saltInput-disabled {\n  --input-borderWidth: var(--salt-size-border);\n  outline: none;\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInput-disabled .saltInput-input::selection {\n  background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInput.saltInput-disabled,\n.saltInput.saltInput-disabled:hover,\n.saltInput.saltInput-disabled:active {\n  --input-borderColor: var(--salt-editable-borderColor-disabled);\n  --input-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --input-borderWidth: var(--salt-size-border);\n\n  background: var(--input-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--saltInput-color-disabled, var(--salt-text-primary-foreground-disabled));\n}\n\n.saltInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);\n}\n\n/* Style applied to start adornments */\n.saltInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n.saltInput-readOnly .saltInput-startAdornmentContainer {\n  margin-left: var(--salt-spacing-50);\n}\n\n.saltInput-startAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n.saltInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n.saltInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput .saltButton {\n  --saltButton-padding: 0;\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-width: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Input.css.js.map

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

@@ -0,0 +1,4 @@
+var css_248z = "/* Styles applied to Toast root element */\n.saltToast {\n  --toast-background: var(--salt-container-primary-background);\n\n  background: var(--saltToast-background, var(--toast-background));\n  border-color: var(--saltToast-borderColor, var(--toast-borderColor));\n  border-width: var(--saltToast-borderWidth, var(--salt-size-border));\n  border-style: var(--saltToast-borderStyle, var(--salt-container-borderStyle));\n\n  box-sizing: border-box;\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  display: inline-flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltToast-padding, var(--salt-spacing-100));\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n}\n\n/* Styles applied to icon */\n.saltToast-icon.saltIcon {\n  margin: calc(var(--salt-spacing-75) + 2px) 0 var(--salt-spacing-75) 0;\n}\n.salt-density-high.saltToast-icon.saltIcon {\n  margin: calc(var(--salt-spacing-75) + 1px) 0 var(--salt-spacing-75) 0;\n}\n\n/* Styles applied when state = \"info\" */\n.saltToast-info {\n  --toast-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when state = \"error\" */\n.saltToast-error {\n  --toast-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltToast-warning {\n  --toast-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when state = \"success\" */\n.saltToast-success {\n  --toast-borderColor: var(--salt-status-success-borderColor);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Toast.css.js.map

package/dist-es/toast/Toast.css.js.map

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

package/dist-es/toast/Toast.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { StatusIndicator } from '../status-indicator/StatusIndicator.js';
+import css_248z from './Toast.css.js';
+
+const withBaseName = makePrefixer("saltToast");
+const Toast = forwardRef(function Toast2(props, ref) {
+  const { children, className, status = "info", ...rest } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-toast",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxs("div", {
+    className: clsx(withBaseName(), withBaseName(status), className),
+    role: "alert",
+    ...rest,
+    ref,
+    children: [
+      /* @__PURE__ */ jsx(StatusIndicator, {
+        status,
+        className: withBaseName("icon")
+      }),
+      children
+    ]
+  });
+});
+
+export { Toast };
+//# sourceMappingURL=Toast.js.map

package/dist-es/toast/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sources":["../src/toast/Toast.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer } from \"../utils\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\n\nimport toastCss from \"./Toast.css\";\n\nconst withBaseName = makePrefixer(\"saltToast\");\n\nexport interface ToastProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   *  A string to determine the current state of the Toast.\n   */\n  status?: ValidationStatus;\n}\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n  props,\n  ref\n) {\n  const { children, className, status = \"info\", ...rest } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-toast\",\n    css: toastCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      className={clsx(withBaseName(), withBaseName(status), className)}\n      role=\"alert\"\n      {...rest}\n      ref={ref}\n    >\n      <StatusIndicator status={status} className={withBaseName(\"icon\")} />\n      {children}\n    </div>\n  );\n});\n"],"names":["Toast","toastCss"],"mappings":";;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,WAAW,CAAA,CAAA;AAStC,MAAM,KAAQ,GAAA,UAAA,CAAuC,SAASA,MAAAA,CACnE,OACA,GACA,EAAA;AACA,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,MAAS,GAAA,MAAA,EAAA,GAAW,MAAS,GAAA,KAAA,CAAA;AAC1D,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,IAC/D,IAAK,EAAA,OAAA;AAAA,IACJ,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,IAEA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,eAAA,EAAA;AAAA,QAAgB,MAAA;AAAA,QAAgB,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAA;AAAA,MACjE,QAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/toast/ToastContent.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Styles applied to ToastContent */\n.saltToastContent {\n  flex: 1 0;\n  margin: var(--salt-spacing-75) 0;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=ToastContent.css.js.map

package/dist-es/toast/ToastContent.css.js.map

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

package/dist-es/toast/ToastContent.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import css_248z from './ToastContent.css.js';
+
+const withBaseName = makePrefixer("saltToastContent");
+const ToastContent = forwardRef(function ToastContent2({ children, className, ...restProps }, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-toast-content",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx("div", {
+    className: clsx(withBaseName(), className),
+    ...restProps,
+    ref,
+    children
+  });
+});
+
+export { ToastContent };
+//# sourceMappingURL=ToastContent.js.map

package/dist-es/toast/ToastContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastContent.js","sources":["../src/toast/ToastContent.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer } from \"../utils\";\n\nimport toastContentCss from \"./ToastContent.css\";\n\nconst withBaseName = makePrefixer(\"saltToastContent\");\n\nexport const ToastContent = forwardRef(function ToastContent(\n  { children, className, ...restProps }: ComponentPropsWithoutRef<\"div\">,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-toast-content\",\n    css: toastContentCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n      {children}\n    </div>\n  );\n});\n"],"names":["ToastContent","toastContentCss"],"mappings":";;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAEvC,MAAA,YAAA,GAAe,WAAW,SAASA,aAAAA,CAC9C,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,SAAU,EAAA,EACpC,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAI,GAAG,SAAA;AAAA,IAAW,GAAA;AAAA,IAC7D,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-types/form-field/FormFieldLabel.d.ts

@@ -1,5 +1,12 @@
 /// <reference types="react" />
 import { TextProps } from "../text";
-export declare const FormFieldLabel: ({ className, children, pronounced, ...restProps }: Omit<TextProps<"label">, "variant" | "styleAs"> & {
-    pronounced?: boolean | undefined;
-}) => JSX.Element;
+export interface FormFieldLabelProps extends Omit<TextProps<"label">, "variant" | "styleAs"> {
+    /**
+     * Intent for the label.
+     *
+     * Defaults to "label"
+     * Using "sentence" gives more prominent styling
+     */
+    intent?: "label" | "sentence";
+}
+export declare const FormFieldLabel: ({ className, children, intent, ...restProps }: FormFieldLabelProps) => JSX.Element;

package/dist-types/index.d.ts

@@ -25,6 +25,7 @@ export * from "./status-adornment";
 export * from "./status-indicator";
 export * from "./text";
 export * from "./theme";
+export * from "./toast";
 export * from "./salt-provider";
 export * from "./split-layout";
 export * from "./toggle-button";

package/dist-types/toast/Toast.d.ts

@@ -0,0 +1,9 @@
+import { ComponentPropsWithoutRef } from "react";
+import { ValidationStatus } from "../status-indicator";
+export interface ToastProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     *  A string to determine the current state of the Toast.
+     */
+    status?: ValidationStatus;
+}
+export declare const Toast: import("react").ForwardRefExoticComponent<ToastProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/toast/ToastContent.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ToastContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/toast/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Toast";
+export * from "./ToastContent";

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@salt-ds/core",
-  "version": "1.8.0-rc.4",
+  "version": "1.8.0-rc.5",
   "license": "Apache-2.0",
   "main": "dist-cjs/index.js",
   "sideEffects": false,
   "peerDependencies": {
-    "@types/react": ">=16.8.6",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "@types/react": ">=16.14.0",
+    "react": ">=16.14.0",
+    "react-dom": ">=16.14.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -23,9 +23,9 @@
   "dependencies": {
     "clsx": "^2.0.0",
     "@floating-ui/react": "^0.23.0",
-    "@salt-ds/window": "^0.1.0",
-    "@salt-ds/styles": "^0.1.0",
-    "@salt-ds/icons": "^1.5.0"
+    "@salt-ds/window": "^0.1.1",
+    "@salt-ds/styles": "^0.1.1",
+    "@salt-ds/icons": "^1.5.1"
   },
   "files": [
     "dist-cjs",