@salt-ds/core 1.21.0 → 1.23.0

package/dist-es/dialog/DialogCloseButton.js

@@ -20,7 +20,6 @@ import '../banner/BannerContent.js';
 import '../border-item/BorderItem.js';
 import '../border-layout/BorderLayout.js';
 import '../card/Card.js';
-import '../card/InteractableCard.js';
 import '../checkbox/Checkbox.js';
 import '../checkbox/CheckboxGroup.js';
 import { useComponentCssInjection } from '@salt-ds/styles';
@@ -28,16 +27,10 @@ import { useWindow } from '@salt-ds/window';
 import { CloseIcon } from '@salt-ds/icons';
 import '../combo-box/ComboBox.js';
 import './Dialog.js';
-import '../status-indicator/StatusIndicator.js';
-import '../text/Text.js';
-import '../text/Display.js';
-import '../text/Headings.js';
-import '../text/Label.js';
-import '../text/TextNotation.js';
-import '../text/TextAction.js';
-import './DialogContext.js';
+import './DialogHeader.js';
 import './DialogActions.js';
 import './DialogContent.js';
+import './DialogContext.js';
 import '../drawer/Drawer.js';
 import '../drawer/DrawerCloseButton.js';
 import '../dropdown/Dropdown.js';
@@ -48,10 +41,21 @@ import '../flex-item/FlexItem.js';
 import '../flex-layout/FlexLayout.js';
 import '../flow-layout/FlowLayout.js';
 import '../form-field/FormField.js';
+import '../status-indicator/StatusIndicator.js';
+import '../text/Text.js';
+import '../text/Code.js';
+import '../text/Display.js';
+import '../text/Headings.js';
+import '../text/Label.js';
+import '../text/TextAction.js';
+import '../text/TextNotation.js';
 import '../form-field-context/FormFieldContext.js';
 import '../grid-item/GridItem.js';
 import '../grid-layout/GridLayout.js';
 import '../input/Input.js';
+import '../interactable-card/InteractableCard.js';
+import '../interactable-card/InteractableCardGroup.js';
+import '../interactable-card/InteractableCardGroupContext.js';
 import '../link/Link.js';
 import '../link-card/LinkCard.js';
 import '../list-control/ListControlContext.js';
@@ -71,6 +75,7 @@ import '../progress/LinearProgress/LinearProgress.js';
 import '../radio-button/RadioButton.js';
 import '../radio-button/RadioButtonGroup.js';
 import '../scrim/Scrim.js';
+import '../segmented-button-group/SegmentedButtonGroup.js';
 import '../spinner/Spinner.js';
 import '../stack-layout/StackLayout.js';
 import '../status-adornment/StatusAdornment.js';
@@ -100,7 +105,9 @@ const DialogCloseButton = forwardRef(
       variant: "secondary",
       className: clsx(withBaseName(), className),
       ...rest,
-      children: /* @__PURE__ */ jsx(CloseIcon, {})
+      children: /* @__PURE__ */ jsx(CloseIcon, {
+        "aria-hidden": true
+      })
     });
   }
 );

package/dist-es/dialog/DialogCloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogCloseButton.js","sources":["../src/dialog/DialogCloseButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport clsx from \"clsx\";\nimport { Button, ButtonProps } from \"../button\";\nimport { makePrefixer } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { CloseIcon } from \"@salt-ds/icons\";\n\nimport dialogCloseButtonCss from \"./DialogCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogCloseButton\");\n\nexport const DialogCloseButton = forwardRef<HTMLButtonElement, ButtonProps>(\n  function DialogCloseButton({ className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-close-button\",\n      css: dialogCloseButtonCss,\n      window: targetWindow,\n    });\n\n    return (\n      <Button\n        ref={ref}\n        aria-label=\"Close dialog\"\n        variant=\"secondary\"\n        className={clsx(withBaseName(), className)}\n        {...rest}\n      >\n        <CloseIcon />\n      </Button>\n    );\n  }\n);\n"],"names":["DialogCloseButton","dialogCloseButtonCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA,CAAA;AAElD,MAAM,iBAAoB,GAAA,UAAA;AAAA,EAC/B,SAASA,kBAAkB,CAAA,EAAE,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACtD,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,0BAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,YAAW,EAAA,cAAA;AAAA,MACX,OAAQ,EAAA,WAAA;AAAA,MACR,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG,IAAA;AAAA,MAEJ,8BAAC,SAAU,EAAA,EAAA,CAAA;AAAA,KACb,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"DialogCloseButton.js","sources":["../src/dialog/DialogCloseButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport clsx from \"clsx\";\nimport { Button, ButtonProps } from \"../button\";\nimport { makePrefixer } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { CloseIcon } from \"@salt-ds/icons\";\n\nimport dialogCloseButtonCss from \"./DialogCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogCloseButton\");\n\nexport const DialogCloseButton = forwardRef<HTMLButtonElement, ButtonProps>(\n  function DialogCloseButton({ className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-close-button\",\n      css: dialogCloseButtonCss,\n      window: targetWindow,\n    });\n\n    return (\n      <Button\n        ref={ref}\n        aria-label=\"Close dialog\"\n        variant=\"secondary\"\n        className={clsx(withBaseName(), className)}\n        {...rest}\n      >\n        <CloseIcon aria-hidden />\n      </Button>\n    );\n  }\n);\n"],"names":["DialogCloseButton","dialogCloseButtonCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA,CAAA;AAElD,MAAM,iBAAoB,GAAA,UAAA;AAAA,EAC/B,SAASA,kBAAkB,CAAA,EAAE,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACtD,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,0BAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,YAAW,EAAA,cAAA;AAAA,MACX,OAAQ,EAAA,WAAA;AAAA,MACR,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA;AAAA,QAAU,aAAW,EAAA,IAAA;AAAA,OAAC,CAAA;AAAA,KACzB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/dialog/DialogContent.js

@@ -20,7 +20,6 @@ import '../border-item/BorderItem.js';
 import '../border-layout/BorderLayout.js';
 import '../button/Button.js';
 import '../card/Card.js';
-import '../card/InteractableCard.js';
 import '../checkbox/Checkbox.js';
 import '../checkbox/CheckboxGroup.js';
 import { useComponentCssInjection } from '@salt-ds/styles';
@@ -28,15 +27,9 @@ import { useWindow } from '@salt-ds/window';
 import '@salt-ds/icons';
 import '../combo-box/ComboBox.js';
 import './Dialog.js';
-import '../status-indicator/StatusIndicator.js';
-import '../text/Text.js';
-import '../text/Display.js';
-import '../text/Headings.js';
-import '../text/Label.js';
-import '../text/TextNotation.js';
-import '../text/TextAction.js';
-import './DialogContext.js';
+import './DialogHeader.js';
 import './DialogActions.js';
+import './DialogContext.js';
 import './DialogCloseButton.js';
 import '../drawer/Drawer.js';
 import '../drawer/DrawerCloseButton.js';
@@ -48,10 +41,21 @@ import '../flex-item/FlexItem.js';
 import '../flex-layout/FlexLayout.js';
 import '../flow-layout/FlowLayout.js';
 import '../form-field/FormField.js';
+import '../status-indicator/StatusIndicator.js';
+import '../text/Text.js';
+import '../text/Code.js';
+import '../text/Display.js';
+import '../text/Headings.js';
+import '../text/Label.js';
+import '../text/TextAction.js';
+import '../text/TextNotation.js';
 import '../form-field-context/FormFieldContext.js';
 import '../grid-item/GridItem.js';
 import '../grid-layout/GridLayout.js';
 import '../input/Input.js';
+import '../interactable-card/InteractableCard.js';
+import '../interactable-card/InteractableCardGroup.js';
+import '../interactable-card/InteractableCardGroupContext.js';
 import '../link/Link.js';
 import '../link-card/LinkCard.js';
 import '../list-control/ListControlContext.js';
@@ -71,6 +75,7 @@ import '../progress/LinearProgress/LinearProgress.js';
 import '../radio-button/RadioButton.js';
 import '../radio-button/RadioButtonGroup.js';
 import '../scrim/Scrim.js';
+import '../segmented-button-group/SegmentedButtonGroup.js';
 import '../spinner/Spinner.js';
 import '../stack-layout/StackLayout.js';
 import '../status-adornment/StatusAdornment.js';

package/dist-es/dialog/DialogContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContent.js","sources":["../src/dialog/DialogContent.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, ReactNode, useState } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport dialogContentCss from \"./DialogContent.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogContent\");\n\nexport interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The content of Dialog Content\n   */\n  children?: ReactNode;\n}\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n  function DialogContent(props, ref) {\n    const { children, className, ...rest } = props;\n    const [scrollTop, setScrollTop] = useState(0);\n\n    const handleScroll = (event: React.UIEvent<HTMLElement>) => {\n      setScrollTop(event.currentTarget.scrollTop);\n    };\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-content\",\n      css: dialogContentCss,\n      window: targetWindow,\n    });\n\n    return (\n      <>\n        <div className={clsx({ [withBaseName(\"scroll\")]: scrollTop > 0 })} />\n        <div\n          className={clsx(withBaseName(), className)}\n          onScroll={handleScroll}\n          {...rest}\n          ref={ref}\n        >\n          {children}\n        </div>\n      </>\n    );\n  }\n);\n"],"names":["DialogContent","dialogContentCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAS9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACzC,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,CAAC,CAAA,CAAA;AAE5C,IAAM,MAAA,YAAA,GAAe,CAAC,KAAsC,KAAA;AAC1D,MAAa,YAAA,CAAA,KAAA,CAAM,cAAc,SAAS,CAAA,CAAA;AAAA,KAC5C,CAAA;AAEA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,KAAK,EAAE,CAAC,aAAa,QAAQ,CAAA,GAAI,SAAY,GAAA,CAAA,EAAG,CAAA;AAAA,SAAG,CAAA;AAAA,wBAClE,GAAA,CAAA,KAAA,EAAA;AAAA,UACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,UACzC,QAAU,EAAA,YAAA;AAAA,UACT,GAAG,IAAA;AAAA,UACJ,GAAA;AAAA,UAEC,QAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"DialogContent.js","sources":["../src/dialog/DialogContent.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, ReactNode, useState } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport dialogContentCss from \"./DialogContent.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogContent\");\n\nexport interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The content of Dialog Content\n   */\n  children?: ReactNode;\n}\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n  function DialogContent(props, ref) {\n    const { children, className, ...rest } = props;\n    const [scrollTop, setScrollTop] = useState(0);\n\n    const handleScroll = (event: React.UIEvent<HTMLElement>) => {\n      setScrollTop(event.currentTarget.scrollTop);\n    };\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-content\",\n      css: dialogContentCss,\n      window: targetWindow,\n    });\n\n    return (\n      <>\n        <div className={clsx({ [withBaseName(\"scroll\")]: scrollTop > 0 })} />\n        <div\n          className={clsx(withBaseName(), className)}\n          onScroll={handleScroll}\n          {...rest}\n          ref={ref}\n        >\n          {children}\n        </div>\n      </>\n    );\n  }\n);\n"],"names":["DialogContent","dialogContentCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAS9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACzC,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,CAAC,CAAA,CAAA;AAE5C,IAAM,MAAA,YAAA,GAAe,CAAC,KAAsC,KAAA;AAC1D,MAAa,YAAA,CAAA,KAAA,CAAM,cAAc,SAAS,CAAA,CAAA;AAAA,KAC5C,CAAA;AAEA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,KAAK,EAAE,CAAC,aAAa,QAAQ,CAAA,GAAI,SAAY,GAAA,CAAA,EAAG,CAAA;AAAA,SAAG,CAAA;AAAA,wBAClE,GAAA,CAAA,KAAA,EAAA;AAAA,UACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,UACzC,QAAU,EAAA,YAAA;AAAA,UACT,GAAG,IAAA;AAAA,UACJ,GAAA;AAAA,UAEC,QAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/dialog/DialogHeader.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to the root element */\n.saltDialogHeader {\n  padding-bottom: var(--salt-spacing-100);\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-100);\n  box-sizing: border-box;\n}\n\n.saltDialogHeader-header {\n  margin: 0;\n}\n\n/* Styles applied to the status indicator icon overriding its default size */\n.saltDialogHeader .saltStatusIndicator.saltIcon {\n  --icon-size: var(--salt-text-h2-lineHeight);\n}\n\n/* Styles applied to DialogTitle when accent={true} */\n.saltDialogHeader-withAccent {\n  position: relative;\n}\n\n.saltDialogHeader-withAccent::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: var(--salt-spacing-100);\n  width: var(--salt-size-accent);\n  background: var(--salt-accent-background);\n}\n\n.saltDialogHeader-error::before {\n  background: var(--salt-status-error-borderColor);\n}\n\n.saltDialogHeader-info::before {\n  background: var(--salt-status-info-borderColor);\n}\n\n.saltDialogHeader-success::before {\n  background: var(--salt-status-success-borderColor);\n}\n\n.saltDialogHeader-warning::before {\n  background: var(--salt-status-warning-borderColor);\n}\n";
+var css_248z = "/* Styles applied to the root element */\n.saltDialogHeader {\n  padding-bottom: var(--salt-spacing-100);\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-100);\n  box-sizing: border-box;\n}\n\n.saltDialogHeader-header {\n  margin: 0;\n}\n\n/* Styles applied to the status indicator icon overriding its default size */\n.saltDialogHeader .saltStatusIndicator.saltIcon {\n  --icon-size: var(--salt-text-h2-lineHeight);\n}\n\n/* Styles applied to DialogHeader when accent={true} */\n.saltDialogHeader-withAccent {\n  position: relative;\n}\n\n.saltDialogHeader-withAccent::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: var(--salt-spacing-100);\n  width: var(--salt-size-accent);\n  background: var(--salt-accent-background);\n}\n\n.saltDialogHeader-error::before {\n  background: var(--salt-status-error-borderColor);\n}\n\n.saltDialogHeader-info::before {\n  background: var(--salt-status-info-borderColor);\n}\n\n.saltDialogHeader-success::before {\n  background: var(--salt-status-success-borderColor);\n}\n\n.saltDialogHeader-warning::before {\n  background: var(--salt-status-warning-borderColor);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=DialogHeader.css.js.map

package/dist-es/dialog/DialogHeader.js

@@ -1,13 +1,14 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import clsx from 'clsx';
 import { StatusIndicator } from '../status-indicator/StatusIndicator.js';
 import { Text } from '../text/Text.js';
+import '../text/Code.js';
 import '../text/Display.js';
 import { H2 } from '../text/Headings.js';
 import '../text/Label.js';
-import '../text/TextNotation.js';
 import '../text/TextAction.js';
-import 'react';
+import '../text/TextNotation.js';
 import { makePrefixer } from '../utils/makePrefixer.js';
 import '../utils/useFloatingUI/useFloatingUI.js';
 import '../utils/useId.js';
@@ -27,7 +28,6 @@ import '../border-item/BorderItem.js';
 import '../border-layout/BorderLayout.js';
 import '../button/Button.js';
 import '../card/Card.js';
-import '../card/InteractableCard.js';
 import '../checkbox/Checkbox.js';
 import '../checkbox/CheckboxGroup.js';
 import { useComponentCssInjection } from '@salt-ds/styles';
@@ -35,10 +35,9 @@ import { useWindow } from '@salt-ds/window';
 import '@salt-ds/icons';
 import '../combo-box/ComboBox.js';
 import './Dialog.js';
-import { useDialogContext } from './DialogContext.js';
-import css_248z from './DialogHeader.css.js';
 import './DialogActions.js';
 import './DialogContent.js';
+import { useDialogContext } from './DialogContext.js';
 import './DialogCloseButton.js';
 import '../drawer/Drawer.js';
 import '../drawer/DrawerCloseButton.js';
@@ -54,6 +53,9 @@ import '../form-field-context/FormFieldContext.js';
 import '../grid-item/GridItem.js';
 import '../grid-layout/GridLayout.js';
 import '../input/Input.js';
+import '../interactable-card/InteractableCard.js';
+import '../interactable-card/InteractableCardGroup.js';
+import '../interactable-card/InteractableCardGroupContext.js';
 import '../link/Link.js';
 import '../link-card/LinkCard.js';
 import '../list-control/ListControlContext.js';
@@ -73,6 +75,7 @@ import '../progress/LinearProgress/LinearProgress.js';
 import '../radio-button/RadioButton.js';
 import '../radio-button/RadioButtonGroup.js';
 import '../scrim/Scrim.js';
+import '../segmented-button-group/SegmentedButtonGroup.js';
 import '../spinner/Spinner.js';
 import '../stack-layout/StackLayout.js';
 import '../status-adornment/StatusAdornment.js';
@@ -85,55 +88,60 @@ import '../toggle-button-group/ToggleButtonGroup.js';
 import '../toggle-button-group/ToggleButtonGroupContext.js';
 import '../tooltip/Tooltip.js';
 import '@floating-ui/react';
+import css_248z from './DialogHeader.css.js';
 
 const withBaseName = makePrefixer("saltDialogHeader");
-const DialogHeader = ({
-  className,
-  header,
-  preheader,
-  disableAccent,
-  status: statusProp,
-  ...rest
-}) => {
-  const { status: statusContext, id } = useDialogContext();
-  const targetWindow = useWindow();
-  useComponentCssInjection({
-    testId: "salt-dialog-header",
-    css: css_248z,
-    window: targetWindow
-  });
-  const status = statusProp != null ? statusProp : statusContext;
-  return /* @__PURE__ */ jsxs("div", {
-    id,
-    className: clsx(
-      withBaseName(),
-      {
-        [withBaseName("withAccent")]: !disableAccent && !status,
-        [withBaseName(status != null ? status : "")]: !!status
-      },
-      className
-    ),
-    ...rest,
-    children: [
-      status && /* @__PURE__ */ jsx(StatusIndicator, {
-        status
-      }),
-      /* @__PURE__ */ jsxs(H2, {
-        className: withBaseName("header"),
-        children: [
-          preheader && /* @__PURE__ */ jsx(Text, {
-            variant: "secondary",
-            className: withBaseName("preheader"),
-            children: preheader
-          }),
-          /* @__PURE__ */ jsx("div", {
-            children: header
-          })
-        ]
-      })
-    ]
-  });
-};
+const DialogHeader = forwardRef(
+  function DialogHeader2(props, ref) {
+    const {
+      className,
+      header,
+      preheader,
+      disableAccent,
+      status: statusProp,
+      ...rest
+    } = props;
+    const { status: statusContext, id } = useDialogContext();
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-dialog-header",
+      css: css_248z,
+      window: targetWindow
+    });
+    const status = statusProp != null ? statusProp : statusContext;
+    return /* @__PURE__ */ jsxs("div", {
+      id,
+      className: clsx(
+        withBaseName(),
+        {
+          [withBaseName("withAccent")]: !disableAccent && !status,
+          [withBaseName(status != null ? status : "")]: !!status
+        },
+        className
+      ),
+      ref,
+      ...rest,
+      children: [
+        status && /* @__PURE__ */ jsx(StatusIndicator, {
+          status
+        }),
+        /* @__PURE__ */ jsxs(H2, {
+          className: withBaseName("header"),
+          children: [
+            preheader && /* @__PURE__ */ jsx(Text, {
+              variant: "secondary",
+              className: withBaseName("preheader"),
+              children: preheader
+            }),
+            /* @__PURE__ */ jsx("div", {
+              children: header
+            })
+          ]
+        })
+      ]
+    });
+  }
+);
 
 export { DialogHeader };
 //# sourceMappingURL=DialogHeader.js.map

package/dist-es/dialog/DialogHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogHeader.js","sources":["../src/dialog/DialogHeader.tsx"],"sourcesContent":["import { ReactNode, ComponentPropsWithoutRef } from \"react\";\nimport clsx from \"clsx\";\nimport { ValidationStatus, StatusIndicator } from \"../status-indicator\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer } from \"../utils\";\nimport { useDialogContext } from \"./DialogContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport dialogTitleCss from \"./DialogHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogHeader\");\n\nexport interface DialogHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The status of the Dialog\n   */\n  status?: ValidationStatus | undefined;\n  /**\n   * Displays the accent bar in the Dialog Title */\n  disableAccent?: boolean;\n  /**\n   * Displays the header at the top of the Dialog\n   */\n  header: ReactNode;\n  /**\n   * Displays the preheader just above the header\n   **/\n  preheader?: ReactNode;\n}\n\nexport const DialogHeader = ({\n  className,\n  header,\n  preheader,\n  disableAccent,\n  status: statusProp,\n  ...rest\n}: DialogHeaderProps) => {\n  const { status: statusContext, id } = useDialogContext();\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dialog-header\",\n    css: dialogTitleCss,\n    window: targetWindow,\n  });\n\n  const status = statusProp ?? statusContext;\n\n  return (\n    <div\n      id={id}\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"withAccent\")]: !disableAccent && !status,\n          [withBaseName(status ?? \"\")]: !!status,\n        },\n        className\n      )}\n      {...rest}\n    >\n      {status && <StatusIndicator status={status} />}\n      <H2 className={withBaseName(\"header\")}>\n        {preheader && (\n          <Text variant=\"secondary\" className={withBaseName(\"preheader\")}>\n            {preheader}\n          </Text>\n        )}\n        <div>{header}</div>\n      </H2>\n    </div>\n  );\n};\n"],"names":["dialogTitleCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAoB7C,MAAM,eAAe,CAAC;AAAA,EAC3B,SAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,MAAQ,EAAA,UAAA;AAAA,EACL,GAAA,IAAA;AACL,CAAyB,KAAA;AACvB,EAAA,MAAM,EAAE,MAAA,EAAQ,aAAe,EAAA,EAAA,KAAO,gBAAiB,EAAA,CAAA;AACvD,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,SAAS,UAAc,IAAA,IAAA,GAAA,UAAA,GAAA,aAAA,CAAA;AAE7B,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,EAAA;AAAA,IACA,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,CAAC,iBAAiB,CAAC,MAAA;AAAA,QACjD,CAAC,YAAa,CAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAU,EAAE,CAAA,GAAI,CAAC,CAAC,MAAA;AAAA,OAClC;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,MAAA,oBAAW,GAAA,CAAA,eAAA,EAAA;AAAA,QAAgB,MAAA;AAAA,OAAgB,CAAA;AAAA,sBAC3C,IAAA,CAAA,EAAA,EAAA;AAAA,QAAG,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,QACjC,QAAA,EAAA;AAAA,UAAA,SAAA,oBACE,GAAA,CAAA,IAAA,EAAA;AAAA,YAAK,OAAQ,EAAA,WAAA;AAAA,YAAY,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,YAC1D,QAAA,EAAA,SAAA;AAAA,WACH,CAAA;AAAA,0BAED,GAAA,CAAA,KAAA,EAAA;AAAA,YAAK,QAAA,EAAA,MAAA;AAAA,WAAO,CAAA;AAAA,SAAA;AAAA,OACf,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DialogHeader.js","sources":["../src/dialog/DialogHeader.tsx"],"sourcesContent":["import { ReactNode, ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport clsx from \"clsx\";\nimport { ValidationStatus, StatusIndicator } from \"../status-indicator\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer } from \"../utils\";\nimport { useDialogContext } from \"./DialogContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport dialogHeaderCss from \"./DialogHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogHeader\");\n\nexport interface DialogHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The status of the Dialog\n   */\n  status?: ValidationStatus | undefined;\n  /**\n   * Displays the accent bar in the Dialog Title */\n  disableAccent?: boolean;\n  /**\n   * Displays the header at the top of the Dialog\n   */\n  header: ReactNode;\n  /**\n   * Displays the preheader just above the header\n   **/\n  preheader?: ReactNode;\n}\n\nexport const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(\n  function DialogHeader(props, ref) {\n    const {\n      className,\n      header,\n      preheader,\n      disableAccent,\n      status: statusProp,\n      ...rest\n    } = props;\n    const { status: statusContext, id } = useDialogContext();\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-header\",\n      css: dialogHeaderCss,\n      window: targetWindow,\n    });\n\n    const status = statusProp ?? statusContext;\n\n    return (\n      <div\n        id={id}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"withAccent\")]: !disableAccent && !status,\n            [withBaseName(status ?? \"\")]: !!status,\n          },\n          className\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {status && <StatusIndicator status={status} />}\n        <H2 className={withBaseName(\"header\")}>\n          {preheader && (\n            <Text variant=\"secondary\" className={withBaseName(\"preheader\")}>\n              {preheader}\n            </Text>\n          )}\n          <div>{header}</div>\n        </H2>\n      </div>\n    );\n  }\n);\n"],"names":["DialogHeader","dialogHeaderCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAoB7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aAAa,CAAA,KAAA,EAAO,GAAK,EAAA;AAChC,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACL,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AACJ,IAAA,MAAM,EAAE,MAAA,EAAQ,aAAe,EAAA,EAAA,KAAO,gBAAiB,EAAA,CAAA;AAEvD,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,SAAS,UAAc,IAAA,IAAA,GAAA,UAAA,GAAA,aAAA,CAAA;AAE7B,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,EAAA;AAAA,MACA,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,CAAC,iBAAiB,CAAC,MAAA;AAAA,UACjD,CAAC,YAAa,CAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAU,EAAE,CAAA,GAAI,CAAC,CAAC,MAAA;AAAA,SAClC;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,MAAA,oBAAW,GAAA,CAAA,eAAA,EAAA;AAAA,UAAgB,MAAA;AAAA,SAAgB,CAAA;AAAA,wBAC3C,IAAA,CAAA,EAAA,EAAA;AAAA,UAAG,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,UACjC,QAAA,EAAA;AAAA,YAAA,SAAA,oBACE,GAAA,CAAA,IAAA,EAAA;AAAA,cAAK,OAAQ,EAAA,WAAA;AAAA,cAAY,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,cAC1D,QAAA,EAAA,SAAA;AAAA,aACH,CAAA;AAAA,4BAED,GAAA,CAAA,KAAA,EAAA;AAAA,cAAK,QAAA,EAAA,MAAA;AAAA,aAAO,CAAA;AAAA,WAAA;AAAA,SACf,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/drawer/Drawer.js

@@ -22,7 +22,6 @@ import '../border-item/BorderItem.js';
 import '../border-layout/BorderLayout.js';
 import '../button/Button.js';
 import '../card/Card.js';
-import '../card/InteractableCard.js';
 import '../checkbox/Checkbox.js';
 import '../checkbox/CheckboxGroup.js';
 import { useComponentCssInjection } from '@salt-ds/styles';
@@ -30,16 +29,10 @@ import { useWindow } from '@salt-ds/window';
 import '@salt-ds/icons';
 import '../combo-box/ComboBox.js';
 import '../dialog/Dialog.js';
-import '../status-indicator/StatusIndicator.js';
-import '../text/Text.js';
-import '../text/Display.js';
-import '../text/Headings.js';
-import '../text/Label.js';
-import '../text/TextNotation.js';
-import '../text/TextAction.js';
-import '../dialog/DialogContext.js';
+import '../dialog/DialogHeader.js';
 import '../dialog/DialogActions.js';
 import '../dialog/DialogContent.js';
+import '../dialog/DialogContext.js';
 import '../dialog/DialogCloseButton.js';
 import './DrawerCloseButton.js';
 import '../dropdown/Dropdown.js';
@@ -50,10 +43,21 @@ import '../flex-item/FlexItem.js';
 import '../flex-layout/FlexLayout.js';
 import '../flow-layout/FlowLayout.js';
 import '../form-field/FormField.js';
+import '../status-indicator/StatusIndicator.js';
+import '../text/Text.js';
+import '../text/Code.js';
+import '../text/Display.js';
+import '../text/Headings.js';
+import '../text/Label.js';
+import '../text/TextAction.js';
+import '../text/TextNotation.js';
 import '../form-field-context/FormFieldContext.js';
 import '../grid-item/GridItem.js';
 import '../grid-layout/GridLayout.js';
 import '../input/Input.js';
+import '../interactable-card/InteractableCard.js';
+import '../interactable-card/InteractableCardGroup.js';
+import '../interactable-card/InteractableCardGroupContext.js';
 import '../link/Link.js';
 import '../link-card/LinkCard.js';
 import '../list-control/ListControlContext.js';
@@ -73,6 +77,7 @@ import '../progress/LinearProgress/LinearProgress.js';
 import '../radio-button/RadioButton.js';
 import '../radio-button/RadioButtonGroup.js';
 import { Scrim } from '../scrim/Scrim.js';
+import '../segmented-button-group/SegmentedButtonGroup.js';
 import '../spinner/Spinner.js';
 import '../stack-layout/StackLayout.js';
 import '../status-adornment/StatusAdornment.js';
@@ -127,7 +132,7 @@ const Drawer = forwardRef(function Drawer2(props, ref) {
   const [showComponent, setShowComponent] = useState(false);
   const { Component: FloatingComponent } = useFloatingComponent();
   const { context, floating, elements } = useFloatingUI({
-    open,
+    open: showComponent,
     onOpenChange
   });
   const { getFloatingProps } = useInteractions([
@@ -147,7 +152,7 @@ const Drawer = forwardRef(function Drawer2(props, ref) {
     }
   }, [open, showComponent, setShowComponent]);
   return /* @__PURE__ */ jsx(ConditionalScrimWrapper, {
-    condition: open && !disableScrim,
+    condition: showComponent && !disableScrim,
     children: /* @__PURE__ */ jsx(FloatingComponent, {
       open: showComponent,
       ref: handleRef,

package/dist-es/drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  useEffect,\n  useState,\n  PropsWithChildren,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useClick, useDismiss, useInteractions } from \"@floating-ui/react\";\nimport {\n  makePrefixer,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n} from \"../utils\";\nimport { Scrim } from \"../scrim\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport drawerCss from \"./Drawer.css\";\n\ninterface ConditionalScrimWrapperProps extends PropsWithChildren {\n  condition: boolean;\n}\n\nconst ConditionalScrimWrapper = ({\n  condition,\n  children,\n}: ConditionalScrimWrapperProps) => {\n  return condition ? <Scrim fixed> {children} </Scrim> : <>{children} </>;\n};\n\nexport interface DrawerProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Defines the drawer position within the screen. Defaults to `left`.\n   */\n  position?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (newOpen: boolean) => void;\n  /**\n   * Change background color palette\n   */\n  variant?: \"primary\" | \"secondary\";\n  /**\n   * Prevent the dialog closing on click away\n   * */\n  disableDismiss?: boolean;\n  /**\n   * Prevent Scrim from rendering\n   * */\n  disableScrim?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltDrawer\");\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(\n  props,\n  ref\n) {\n  const {\n    children,\n    className,\n    position = \"left\",\n    open = false,\n    onOpenChange,\n    variant = \"primary\",\n    disableDismiss,\n    disableScrim,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-drawer\",\n    css: drawerCss,\n    window: targetWindow,\n  });\n\n  const [showComponent, setShowComponent] = useState(false);\n  const { Component: FloatingComponent } = useFloatingComponent();\n\n  const { context, floating, elements } = useFloatingUI({\n    open,\n    onOpenChange,\n  });\n\n  const { getFloatingProps } = useInteractions([\n    useClick(context),\n    useDismiss(context, { enabled: !disableDismiss }),\n  ]);\n\n  const handleRef = useForkRef<HTMLDivElement>(floating, ref);\n\n  useEffect(() => {\n    if (open && !showComponent) {\n      setShowComponent(true);\n    }\n\n    if (!open && showComponent) {\n      const animate = setTimeout(() => {\n        setShowComponent(false);\n      }, 300); // var(--salt-duration-perceptible)\n      return () => clearTimeout(animate);\n    }\n  }, [open, showComponent, setShowComponent]);\n\n  return (\n    <ConditionalScrimWrapper condition={open && !disableScrim}>\n      <FloatingComponent\n        open={showComponent}\n        ref={handleRef}\n        role={\"dialog\"}\n        width={elements.floating?.offsetWidth}\n        height={elements.floating?.offsetHeight}\n        aria-modal=\"true\"\n        focusManagerProps={{\n          context: context,\n        }}\n        className={clsx(\n          withBaseName(),\n          withBaseName(position),\n          {\n            [withBaseName(\"enterAnimation\")]: open,\n            [withBaseName(\"exitAnimation\")]: !open,\n            [withBaseName(variant)]: variant,\n          },\n          className\n        )}\n        {...getFloatingProps()}\n        {...rest}\n      >\n        {children}\n      </FloatingComponent>\n    </ConditionalScrimWrapper>\n  );\n});\n"],"names":["Drawer","drawerCss"],"mappings":"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"}
+{"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  useEffect,\n  useState,\n  PropsWithChildren,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useClick, useDismiss, useInteractions } from \"@floating-ui/react\";\nimport {\n  makePrefixer,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n} from \"../utils\";\nimport { Scrim } from \"../scrim\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport drawerCss from \"./Drawer.css\";\n\ninterface ConditionalScrimWrapperProps extends PropsWithChildren {\n  condition: boolean;\n}\n\nconst ConditionalScrimWrapper = ({\n  condition,\n  children,\n}: ConditionalScrimWrapperProps) => {\n  return condition ? <Scrim fixed> {children} </Scrim> : <>{children} </>;\n};\n\nexport interface DrawerProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Defines the drawer position within the screen. Defaults to `left`.\n   */\n  position?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (newOpen: boolean) => void;\n  /**\n   * Change background color palette\n   */\n  variant?: \"primary\" | \"secondary\";\n  /**\n   * Prevent the dialog closing on click away\n   * */\n  disableDismiss?: boolean;\n  /**\n   * Prevent Scrim from rendering\n   * */\n  disableScrim?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltDrawer\");\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(\n  props,\n  ref\n) {\n  const {\n    children,\n    className,\n    position = \"left\",\n    open = false,\n    onOpenChange,\n    variant = \"primary\",\n    disableDismiss,\n    disableScrim,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-drawer\",\n    css: drawerCss,\n    window: targetWindow,\n  });\n\n  const [showComponent, setShowComponent] = useState(false);\n  const { Component: FloatingComponent } = useFloatingComponent();\n\n  const { context, floating, elements } = useFloatingUI({\n    open: showComponent,\n    onOpenChange,\n  });\n\n  const { getFloatingProps } = useInteractions([\n    useClick(context),\n    useDismiss(context, { enabled: !disableDismiss }),\n  ]);\n\n  const handleRef = useForkRef<HTMLDivElement>(floating, ref);\n\n  useEffect(() => {\n    if (open && !showComponent) {\n      setShowComponent(true);\n    }\n\n    if (!open && showComponent) {\n      const animate = setTimeout(() => {\n        setShowComponent(false);\n      }, 300); // var(--salt-duration-perceptible)\n      return () => clearTimeout(animate);\n    }\n  }, [open, showComponent, setShowComponent]);\n\n  return (\n    <ConditionalScrimWrapper condition={showComponent && !disableScrim}>\n      <FloatingComponent\n        open={showComponent}\n        ref={handleRef}\n        role={\"dialog\"}\n        width={elements.floating?.offsetWidth}\n        height={elements.floating?.offsetHeight}\n        aria-modal=\"true\"\n        focusManagerProps={{\n          context: context,\n        }}\n        className={clsx(\n          withBaseName(),\n          withBaseName(position),\n          {\n            [withBaseName(\"enterAnimation\")]: open,\n            [withBaseName(\"exitAnimation\")]: !open,\n            [withBaseName(variant)]: variant,\n          },\n          className\n        )}\n        {...getFloatingProps()}\n        {...rest}\n      >\n        {children}\n      </FloatingComponent>\n    </ConditionalScrimWrapper>\n  );\n});\n"],"names":["Drawer","drawerCss"],"mappings":"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"}

package/dist-es/drawer/DrawerCloseButton.js

@@ -20,7 +20,6 @@ import '../banner/BannerContent.js';
 import '../border-item/BorderItem.js';
 import '../border-layout/BorderLayout.js';
 import '../card/Card.js';
-import '../card/InteractableCard.js';
 import '../checkbox/Checkbox.js';
 import '../checkbox/CheckboxGroup.js';
 import { useComponentCssInjection } from '@salt-ds/styles';
@@ -28,16 +27,10 @@ import { useWindow } from '@salt-ds/window';
 import { CloseIcon } from '@salt-ds/icons';
 import '../combo-box/ComboBox.js';
 import '../dialog/Dialog.js';
-import '../status-indicator/StatusIndicator.js';
-import '../text/Text.js';
-import '../text/Display.js';
-import '../text/Headings.js';
-import '../text/Label.js';
-import '../text/TextNotation.js';
-import '../text/TextAction.js';
-import '../dialog/DialogContext.js';
+import '../dialog/DialogHeader.js';
 import '../dialog/DialogActions.js';
 import '../dialog/DialogContent.js';
+import '../dialog/DialogContext.js';
 import '../dialog/DialogCloseButton.js';
 import './Drawer.js';
 import '../dropdown/Dropdown.js';
@@ -48,10 +41,21 @@ import '../flex-item/FlexItem.js';
 import '../flex-layout/FlexLayout.js';
 import '../flow-layout/FlowLayout.js';
 import '../form-field/FormField.js';
+import '../status-indicator/StatusIndicator.js';
+import '../text/Text.js';
+import '../text/Code.js';
+import '../text/Display.js';
+import '../text/Headings.js';
+import '../text/Label.js';
+import '../text/TextAction.js';
+import '../text/TextNotation.js';
 import '../form-field-context/FormFieldContext.js';
 import '../grid-item/GridItem.js';
 import '../grid-layout/GridLayout.js';
 import '../input/Input.js';
+import '../interactable-card/InteractableCard.js';
+import '../interactable-card/InteractableCardGroup.js';
+import '../interactable-card/InteractableCardGroupContext.js';
 import '../link/Link.js';
 import '../link-card/LinkCard.js';
 import '../list-control/ListControlContext.js';
@@ -71,6 +75,7 @@ import '../progress/LinearProgress/LinearProgress.js';
 import '../radio-button/RadioButton.js';
 import '../radio-button/RadioButtonGroup.js';
 import '../scrim/Scrim.js';
+import '../segmented-button-group/SegmentedButtonGroup.js';
 import '../spinner/Spinner.js';
 import '../stack-layout/StackLayout.js';
 import '../status-adornment/StatusAdornment.js';

package/dist-es/drawer/DrawerCloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerCloseButton.js","sources":["../src/drawer/DrawerCloseButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport clsx from \"clsx\";\nimport { Button, ButtonProps } from \"../button\";\nimport { makePrefixer } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { CloseIcon } from \"@salt-ds/icons\";\n\nimport drawerCloseButtonCss from \"./DrawerCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltDrawerCloseButton\");\n\nexport const DrawerCloseButton = forwardRef<HTMLButtonElement, ButtonProps>(\n  function DrawerCloseButton({ className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-drawer-close-button\",\n      css: drawerCloseButtonCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div className={withBaseName(\"container\")}>\n        <Button\n          ref={ref}\n          aria-label=\"Close Drawer\"\n          variant=\"secondary\"\n          className={clsx(withBaseName(), className)}\n          {...rest}\n        >\n          <CloseIcon aria-hidden />\n        </Button>\n      </div>\n    );\n  }\n);\n"],"names":["DrawerCloseButton","drawerCloseButtonCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA,CAAA;AAElD,MAAM,iBAAoB,GAAA,UAAA;AAAA,EAC/B,SAASA,kBAAkB,CAAA,EAAE,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACtD,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,0BAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,MACtC,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,QACC,GAAA;AAAA,QACA,YAAW,EAAA,cAAA;AAAA,QACX,OAAQ,EAAA,WAAA;AAAA,QACR,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QAEJ,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA;AAAA,UAAU,aAAW,EAAA,IAAA;AAAA,SAAC,CAAA;AAAA,OACzB,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"DrawerCloseButton.js","sources":["../src/drawer/DrawerCloseButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport clsx from \"clsx\";\nimport { Button, ButtonProps } from \"../button\";\nimport { makePrefixer } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { CloseIcon } from \"@salt-ds/icons\";\n\nimport drawerCloseButtonCss from \"./DrawerCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltDrawerCloseButton\");\n\nexport const DrawerCloseButton = forwardRef<HTMLButtonElement, ButtonProps>(\n  function DrawerCloseButton({ className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-drawer-close-button\",\n      css: drawerCloseButtonCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div className={withBaseName(\"container\")}>\n        <Button\n          ref={ref}\n          aria-label=\"Close Drawer\"\n          variant=\"secondary\"\n          className={clsx(withBaseName(), className)}\n          {...rest}\n        >\n          <CloseIcon aria-hidden />\n        </Button>\n      </div>\n    );\n  }\n);\n"],"names":["DrawerCloseButton","drawerCloseButtonCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA,CAAA;AAElD,MAAM,iBAAoB,GAAA,UAAA;AAAA,EAC/B,SAASA,kBAAkB,CAAA,EAAE,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACtD,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,0BAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,MACtC,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,QACC,GAAA;AAAA,QACA,YAAW,EAAA,cAAA;AAAA,QACX,OAAQ,EAAA,WAAA;AAAA,QACR,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QAEJ,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA;AAAA,UAAU,aAAW,EAAA,IAAA;AAAA,SAAC,CAAA;AAAA,OACzB,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/dropdown/Dropdown.js

@@ -23,23 +23,16 @@ import '../border-item/BorderItem.js';
 import '../border-layout/BorderLayout.js';
 import '../button/Button.js';
 import '../card/Card.js';
-import '../card/InteractableCard.js';
 import '../checkbox/Checkbox.js';
 import '../checkbox/CheckboxGroup.js';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import '../combo-box/ComboBox.js';
 import '../dialog/Dialog.js';
-import '../status-indicator/StatusIndicator.js';
-import '../text/Text.js';
-import '../text/Display.js';
-import '../text/Headings.js';
-import '../text/Label.js';
-import '../text/TextNotation.js';
-import '../text/TextAction.js';
-import '../dialog/DialogContext.js';
+import '../dialog/DialogHeader.js';
 import '../dialog/DialogActions.js';
 import '../dialog/DialogContent.js';
+import '../dialog/DialogContext.js';
 import '../dialog/DialogCloseButton.js';
 import '../drawer/Drawer.js';
 import '../drawer/DrawerCloseButton.js';
@@ -50,11 +43,22 @@ import '../flex-item/FlexItem.js';
 import '../flex-layout/FlexLayout.js';
 import '../flow-layout/FlowLayout.js';
 import '../form-field/FormField.js';
+import '../status-indicator/StatusIndicator.js';
+import '../text/Text.js';
+import '../text/Code.js';
+import '../text/Display.js';
+import '../text/Headings.js';
+import '../text/Label.js';
+import '../text/TextAction.js';
+import '../text/TextNotation.js';
 import '../form-field-context/FormFieldContext.js';
 import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
 import '../grid-item/GridItem.js';
 import '../grid-layout/GridLayout.js';
 import '../input/Input.js';
+import '../interactable-card/InteractableCard.js';
+import '../interactable-card/InteractableCardGroup.js';
+import '../interactable-card/InteractableCardGroupContext.js';
 import '../link/Link.js';
 import '../link-card/LinkCard.js';
 import { ListControlContext } from '../list-control/ListControlContext.js';
@@ -74,6 +78,7 @@ import '../progress/LinearProgress/LinearProgress.js';
 import '../radio-button/RadioButton.js';
 import '../radio-button/RadioButtonGroup.js';
 import '../scrim/Scrim.js';
+import '../segmented-button-group/SegmentedButtonGroup.js';
 import '../spinner/Spinner.js';
 import '../stack-layout/StackLayout.js';
 import { StatusAdornment } from '../status-adornment/StatusAdornment.js';