@salt-ds/core 1.18.1 → 1.20.0

package/dist-es/dialog/DialogCloseButton.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { Button } from '../button/Button.js';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { CloseIcon } from '@salt-ds/icons';
+import css_248z from './DialogCloseButton.css.js';
+
+const withBaseName = makePrefixer("saltDialogCloseButton");
+const DialogCloseButton = forwardRef(
+  function DialogCloseButton2({ className, ...rest }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-dialog-close-button",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx(Button, {
+      ref,
+      "aria-label": "Close dialog",
+      variant: "secondary",
+      className: clsx(withBaseName(), className),
+      ...rest,
+      children: /* @__PURE__ */ jsx(CloseIcon, {})
+    });
+  }
+);
+
+export { DialogCloseButton };
+//# sourceMappingURL=DialogCloseButton.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,4 @@
+var css_248z = ".saltDialogContent {\n  color: var(--salt-content-primary-foreground);\n  min-height: var(--salt-text-lineHeight);\n  overflow-y: auto;\n  background: var(--salt-container-primary-background);\n  padding-bottom: var(--salt-spacing-50);\n\n  margin-left: var(--salt-spacing-200);\n  margin-right: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n  padding-left: var(--salt-spacing-100);\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;\n  box-shadow: none;\n}\n\n.saltDialogContent-scroll {\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n  box-shadow: var(--salt-overlayable-shadow-scroll);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=DialogContent.css.js.map

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

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

package/dist-es/dialog/DialogContent.js

@@ -0,0 +1,45 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import { clsx } from 'clsx';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './DialogContent.css.js';
+
+const withBaseName = makePrefixer("saltDialogContent");
+const DialogContent = forwardRef(
+  function DialogContent2(props, ref) {
+    const { children, className, ...rest } = props;
+    const [scrollTop, setScrollTop] = useState(0);
+    const handleScroll = (event) => {
+      setScrollTop(event.currentTarget.scrollTop);
+    };
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-dialog-content",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        /* @__PURE__ */ jsx("div", {
+          className: clsx({ [withBaseName("scroll")]: scrollTop > 0 })
+        }),
+        /* @__PURE__ */ jsx("div", {
+          className: clsx(withBaseName(), className),
+          onScroll: handleScroll,
+          ...rest,
+          ref,
+          children
+        })
+      ]
+    });
+  }
+);
+
+export { DialogContent };
+//# sourceMappingURL=DialogContent.js.map

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

@@ -0,0 +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;;;;"}

package/dist-es/dialog/DialogContext.js

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+const DialogContext = createContext({
+  status: void 0,
+  id: ""
+});
+const useDialogContext = () => {
+  return useContext(DialogContext);
+};
+
+export { DialogContext, useDialogContext };
+//# sourceMappingURL=DialogContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogContext.js","sources":["../src/dialog/DialogContext.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport { ValidationStatus } from \"../status-indicator\";\n\nexport const DialogContext = createContext<{\n  status?: ValidationStatus;\n  id: string | undefined;\n}>({\n  status: undefined,\n  id: \"\",\n});\n\nexport const useDialogContext = () => {\n  return useContext(DialogContext);\n};\n"],"names":[],"mappings":";;AAGO,MAAM,gBAAgB,aAG1B,CAAA;AAAA,EACD,MAAQ,EAAA,KAAA,CAAA;AAAA,EACR,EAAI,EAAA,EAAA;AACN,CAAC,EAAA;AAEM,MAAM,mBAAmB,MAAM;AACpC,EAAA,OAAO,WAAW,aAAa,CAAA,CAAA;AACjC;;;;"}

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

@@ -0,0 +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";
+
+export { css_248z as default };
+//# sourceMappingURL=DialogHeader.css.js.map

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

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

package/dist-es/dialog/DialogHeader.js

@@ -0,0 +1,71 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { StatusIndicator } from '../status-indicator/StatusIndicator.js';
+import { Text } from '../text/Text.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 { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { useDialogContext } from './DialogContext.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+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)]: !!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
+          })
+        ]
+      })
+    ]
+  });
+};
+
+export { DialogHeader };
+//# sourceMappingURL=DialogHeader.js.map

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

@@ -0,0 +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\ninterface DialogTitleProps 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  className?: string;\n}\n\nexport const DialogHeader = ({\n  className,\n  header,\n  preheader,\n  disableAccent,\n  status: statusProp,\n  ...rest\n}: DialogTitleProps) => {\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 as ValidationStatus);\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;AAsB7C,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,CAAwB,KAAA;AACtB,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,UAAe,IAAA,IAAA,GAAA,UAAA,GAAA,aAAA,CAAA;AAE9B,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,MAAM,CAAA,GAAI,CAAC,CAAC,MAAA;AAAA,OAC5B;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;;;;"}

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

@@ -0,0 +1,4 @@
+var css_248z = "/* Styles applied to Drawer component */\n.saltDrawer {\n  background: var(--drawer-background);\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  max-width: 100%;\n  overflow: auto;\n  padding: var(--salt-spacing-300);\n  box-shadow: var(--salt-overlayable-shadow-modal);\n  z-index: var(--salt-zIndex-drawer);\n  position: fixed;\n  top: 0;\n  box-sizing: border-box;\n}\n\n/* Styles applied when variant = \"primary\" */\n.saltDrawer-primary {\n  --drawer-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied when variant = \"secondary\" */\n.saltDrawer-secondary {\n  --drawer-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied when position = \"top\" */\n.saltDrawer-top {\n  left: 0;\n  right: 0;\n  bottom: auto;\n}\n\n/* Styles applied when position = \"top\" and the component mounts */\n.saltDrawer-top.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-bottom);\n}\n\n/* Styles applied when position = \"top\" and the component unmounts */\n.saltDrawer-top.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-bottom);\n}\n\n/* Styles applied when position = \"right\" */\n.saltDrawer-right {\n  left: auto;\n  right: 0;\n  height: 100%;\n}\n\n/* Styles applied when position = \"right\" and the component mounts */\n.saltDrawer-right.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-right);\n}\n\n/* Styles applied when position = \"right\" and the component unmounts */\n.saltDrawer-right.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-right);\n}\n\n/* Styles applied when position = \"left\" */\n.saltDrawer-left {\n  left: 0;\n  right: auto;\n  height: 100%;\n}\n\n/* Styles applied when position = \"left\" and the component mounts */\n.saltDrawer-left.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-left);\n}\n\n/* Styles applied when position = \"left\" and the component unmounts */\n.saltDrawer-left.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-left);\n}\n\n/* Styles applied when position = \"bottom\" */\n.saltDrawer-bottom {\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: auto;\n}\n\n/* Styles applied when position = \"bottom\" and the component mounts */\n.saltDrawer-bottom.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-top);\n}\n\n/* Styles applied when position = \"bottom\" and the component unmounts */\n.saltDrawer-bottom.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-top);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Drawer.css.js.map

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

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

package/dist-es/drawer/Drawer.js

@@ -0,0 +1,106 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect } from 'react';
+import { clsx } from 'clsx';
+import { useInteractions, useClick, useDismiss } from '@floating-ui/react';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import { useFloatingComponent, useFloatingUI } from '../utils/useFloatingUI/useFloatingUI.js';
+import { useForkRef } from '../utils/useForkRef.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { Scrim } from '../scrim/Scrim.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './Drawer.css.js';
+
+const ConditionalScrimWrapper = ({
+  condition,
+  children
+}) => {
+  return condition ? /* @__PURE__ */ jsxs(Scrim, {
+    fixed: true,
+    children: [
+      " ",
+      children,
+      " "
+    ]
+  }) : /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      children,
+      " "
+    ]
+  });
+};
+const withBaseName = makePrefixer("saltDrawer");
+const Drawer = forwardRef(function Drawer2(props, ref) {
+  var _a, _b;
+  const {
+    children,
+    className,
+    position = "left",
+    open = false,
+    onOpenChange,
+    variant = "primary",
+    disableDismiss,
+    disableScrim,
+    ...rest
+  } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-drawer",
+    css: css_248z,
+    window: targetWindow
+  });
+  const [showComponent, setShowComponent] = useState(false);
+  const { Component: FloatingComponent } = useFloatingComponent();
+  const { context, floating, elements } = useFloatingUI({
+    open,
+    onOpenChange
+  });
+  const { getFloatingProps } = useInteractions([
+    useClick(context),
+    useDismiss(context, { enabled: !disableDismiss })
+  ]);
+  const handleRef = useForkRef(floating, ref);
+  useEffect(() => {
+    if (open && !showComponent) {
+      setShowComponent(true);
+    }
+    if (!open && showComponent) {
+      const animate = setTimeout(() => {
+        setShowComponent(false);
+      }, 300);
+      return () => clearTimeout(animate);
+    }
+  }, [open, showComponent, setShowComponent]);
+  return /* @__PURE__ */ jsx(ConditionalScrimWrapper, {
+    condition: open && !disableScrim,
+    children: /* @__PURE__ */ jsx(FloatingComponent, {
+      open: showComponent,
+      ref: handleRef,
+      role: "dialog",
+      width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
+      height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight,
+      "aria-modal": "true",
+      focusManagerProps: {
+        context
+      },
+      className: clsx(
+        withBaseName(),
+        withBaseName(position),
+        {
+          [withBaseName("enterAnimation")]: open,
+          [withBaseName("exitAnimation")]: !open,
+          [withBaseName(variant)]: variant
+        },
+        className
+      ),
+      ...getFloatingProps(),
+      ...rest,
+      children
+    })
+  });
+});
+
+export { Drawer };
+//# sourceMappingURL=Drawer.js.map

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

@@ -0,0 +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":";;;;;;;;;;;;;;;AAwBA,MAAM,0BAA0B,CAAC;AAAA,EAC/B,SAAA;AAAA,EACA,QAAA;AACF,CAAoC,KAAA;AAClC,EAAA,OAAO,4BAAa,IAAA,CAAA,KAAA,EAAA;AAAA,IAAM,KAAK,EAAA,IAAA;AAAA,IAAC,QAAA,EAAA;AAAA,MAAA,GAAA;AAAA,MAAE,QAAA;AAAA,MAAS,GAAA;AAAA,KAAA;AAAA,GAAC,CAAW,mBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,IAAG,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MAAS,GAAA;AAAA,KAAA;AAAA,GAAC,CAAA,CAAA;AACtE,CAAA,CAAA;AA6BA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA,CAAA;AAEvC,MAAM,MAAS,GAAA,UAAA,CAAwC,SAASA,OAAAA,CACrE,OACA,GACA,EAAA;AA/DF,EAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAgEE,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,MAAA;AAAA,IACX,IAAO,GAAA,KAAA;AAAA,IACP,YAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACV,cAAA;AAAA,IACA,YAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AACxD,EAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,oBAAqB,EAAA,CAAA;AAE9D,EAAA,MAAM,EAAE,OAAA,EAAS,QAAU,EAAA,QAAA,KAAa,aAAc,CAAA;AAAA,IACpD,IAAA;AAAA,IACA,YAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,gBAAiB,EAAA,GAAI,eAAgB,CAAA;AAAA,IAC3C,SAAS,OAAO,CAAA;AAAA,IAChB,WAAW,OAAS,EAAA,EAAE,OAAS,EAAA,CAAC,gBAAgB,CAAA;AAAA,GACjD,CAAA,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,UAA2B,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE1D,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,IAAA,IAAQ,CAAC,aAAe,EAAA;AAC1B,MAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AAAA,KACvB;AAEA,IAAI,IAAA,CAAC,QAAQ,aAAe,EAAA;AAC1B,MAAM,MAAA,OAAA,GAAU,WAAW,MAAM;AAC/B,QAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AAAA,SACrB,GAAG,CAAA,CAAA;AACN,MAAO,OAAA,MAAM,aAAa,OAAO,CAAA,CAAA;AAAA,KACnC;AAAA,GACC,EAAA,CAAC,IAAM,EAAA,aAAA,EAAe,gBAAgB,CAAC,CAAA,CAAA;AAE1C,EAAA,uBACG,GAAA,CAAA,uBAAA,EAAA;AAAA,IAAwB,SAAA,EAAW,QAAQ,CAAC,YAAA;AAAA,IAC3C,QAAC,kBAAA,GAAA,CAAA,iBAAA,EAAA;AAAA,MACC,IAAM,EAAA,aAAA;AAAA,MACN,GAAK,EAAA,SAAA;AAAA,MACL,IAAM,EAAA,QAAA;AAAA,MACN,KAAA,EAAA,CAAO,EAAS,GAAA,QAAA,CAAA,QAAA,KAAT,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAA;AAAA,MAC1B,MAAA,EAAA,CAAQ,EAAS,GAAA,QAAA,CAAA,QAAA,KAAT,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,YAAA;AAAA,MAC3B,YAAW,EAAA,MAAA;AAAA,MACX,iBAAmB,EAAA;AAAA,QACjB,OAAA;AAAA,OACF;AAAA,MACA,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,QAAQ,CAAA;AAAA,QACrB;AAAA,UACE,CAAC,YAAa,CAAA,gBAAgB,CAAI,GAAA,IAAA;AAAA,UAClC,CAAC,YAAA,CAAa,eAAe,CAAA,GAAI,CAAC,IAAA;AAAA,UAClC,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,OAAA;AAAA,SAC3B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,gBAAiB,EAAA;AAAA,MACpB,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,4 @@
+var css_248z = ".saltDrawerCloseButton-container {\n  position: relative;\n  display: flex;\n  justify-content: flex-end;\n}\n\n.saltButton-secondary.saltDrawerCloseButton {\n  position: fixed;\n  margin-top: calc(var(--salt-spacing-300) * -1);\n  margin-right: calc(var(--salt-spacing-300) * -1);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=DrawerCloseButton.css.js.map

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

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

package/dist-es/drawer/DrawerCloseButton.js

@@ -0,0 +1,41 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { Button } from '../button/Button.js';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { CloseIcon } from '@salt-ds/icons';
+import css_248z from './DrawerCloseButton.css.js';
+
+const withBaseName = makePrefixer("saltDrawerCloseButton");
+const DrawerCloseButton = forwardRef(
+  function DrawerCloseButton2({ className, ...rest }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-drawer-close-button",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx("div", {
+      className: withBaseName("container"),
+      children: /* @__PURE__ */ jsx(Button, {
+        ref,
+        "aria-label": "Close Drawer",
+        variant: "secondary",
+        className: clsx(withBaseName(), className),
+        ...rest,
+        children: /* @__PURE__ */ jsx(CloseIcon, {
+          "aria-hidden": true
+        })
+      })
+    });
+  }
+);
+
+export { DrawerCloseButton };
+//# sourceMappingURL=DrawerCloseButton.js.map

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

@@ -0,0 +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;;;;"}

package/dist-es/file-drop-zone/FileDropZone.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltFileDropZone {\n  color: var(--saltFileDropZone-text-color, var(--salt-text-primary-foreground));\n  display: inline-flex;\n  background: var(--saltFileDropZone-background, var(--salt-container-primary-background));\n  text-align: center;\n  align-items: center;\n  justify-content: center;\n  border: var(--saltFileDropZone-border, var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor));\n  flex-direction: column;\n  padding: var(--salt-spacing-200);\n  gap: var(--salt-spacing-200);\n  width: 100%;\n  font-size: var(--saltFileDropZone-fontSize, var(--salt-text-fontSize));\n  font-family: var(--saltFileDropZone-fontFamily, var(--salt-text-fontFamily));\n  line-height: var(--saltFileDropZone-lineHeight, var(--salt-text-lineHeight));\n  box-sizing: border-box;\n}\n\n.saltFileDropZone-active {\n  background: var(--salt-target-background-hover);\n  border: var(--salt-size-border-strong) var(--salt-target-borderStyle-hover) var(--salt-target-borderColor-hover);\n}\n\n/* Styles applied if `status=\"error\" */\n.saltFileDropZone-error {\n  border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-error-borderColor);\n}\n\n/* Styles applied if `status=\"success\" */\n.saltFileDropZone-success {\n  border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-success-borderColor);\n}\n\n.saltFileDropZone .input-hidden {\n  display: none;\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n  background: var(--salt-container-primary-background-disabled);\n  border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor-disabled);\n  cursor: var(--salt-target-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n";
+var css_248z = ".saltFileDropZone {\n  color: var(--saltFileDropZone-text-color, var(--salt-text-primary-foreground));\n  display: inline-flex;\n  background: var(--saltFileDropZone-background, var(--salt-container-primary-background));\n  text-align: center;\n  align-items: center;\n  justify-content: center;\n  border: var(--saltFileDropZone-border, var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor));\n  border-radius: var(--saltFileDropZone-borderRadius, var(--salt-palette-corner, 0));\n  flex-direction: column;\n  padding: var(--salt-spacing-200);\n  gap: var(--salt-spacing-200);\n  width: 100%;\n  font-size: var(--saltFileDropZone-fontSize, var(--salt-text-fontSize));\n  font-family: var(--saltFileDropZone-fontFamily, var(--salt-text-fontFamily));\n  line-height: var(--saltFileDropZone-lineHeight, var(--salt-text-lineHeight));\n  box-sizing: border-box;\n}\n\n.saltFileDropZone-active {\n  background: var(--salt-target-background-hover);\n  border: var(--salt-size-border-strong) var(--salt-target-borderStyle-hover) var(--salt-target-borderColor-hover);\n}\n\n/* Styles applied if `status=\"error\" */\n.saltFileDropZone-error {\n  border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-error-borderColor);\n}\n\n/* Styles applied if `status=\"success\" */\n.saltFileDropZone-success {\n  border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-success-borderColor);\n}\n\n.saltFileDropZone .input-hidden {\n  display: none;\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n  background: var(--salt-container-primary-background-disabled);\n  border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor-disabled);\n  cursor: var(--salt-target-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=FileDropZone.css.js.map

package/dist-es/index.js

@@ -22,6 +22,14 @@ export { InteractableCard } from './card/InteractableCard.js';
 export { Checkbox } from './checkbox/Checkbox.js';
 export { CheckboxGroup } from './checkbox/CheckboxGroup.js';
 export { CheckboxIcon } from './checkbox/CheckboxIcon.js';
+export { ConditionalScrimWrapper, Dialog } from './dialog/Dialog.js';
+export { DialogHeader } from './dialog/DialogHeader.js';
+export { DialogActions } from './dialog/DialogActions.js';
+export { DialogContent } from './dialog/DialogContent.js';
+export { DialogContext, useDialogContext } from './dialog/DialogContext.js';
+export { DialogCloseButton } from './dialog/DialogCloseButton.js';
+export { Drawer } from './drawer/Drawer.js';
+export { DrawerCloseButton } from './drawer/DrawerCloseButton.js';
 export { FileDropZone } from './file-drop-zone/FileDropZone.js';
 export { FileDropZoneIcon } from './file-drop-zone/FileDropZoneIcon.js';
 export { FileDropZoneTrigger } from './file-drop-zone/FileDropZoneTrigger.js';
@@ -37,6 +45,7 @@ export { GRID_ALIGNMENT_BASE, GridItem } from './grid-item/GridItem.js';
 export { GridLayout } from './grid-layout/GridLayout.js';
 export { Input } from './input/Input.js';
 export { Link } from './link/Link.js';
+export { LinkCard } from './link-card/LinkCard.js';
 export { MultilineInput } from './multiline-input/MultilineInput.js';
 export { NavigationItem } from './navigation-item/NavigationItem.js';
 export { Pagination } from './pagination/Pagination.js';
@@ -66,9 +75,10 @@ export { TextAction } from './text/TextAction.js';
 export { DensityValues } from './theme/Density.js';
 export { getCharacteristicValue } from './theme/Theme.js';
 export { ModeValues } from './theme/Mode.js';
+export { UNSTABLE_CornerValues } from './theme/Corner.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 { BreakpointContext, DEFAULT_DENSITY, DensityContext, SaltProvider, ThemeContext, UNSTABLE_SaltProviderNext, useBreakpoints, useDensity, useTheme } from './salt-provider/SaltProvider.js';
 export { SplitLayout } from './split-layout/SplitLayout.js';
 export { Switch } from './switch/Switch.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/link/Link.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltLink {\n  --link-color-hover: var(--saltLink-color-hover, var(--salt-content-foreground-hover));\n  --link-color-active: var(--saltLink-color-active, var(--salt-content-foreground-active));\n  --link-color-visited: var(--saltLink-color-visited, var(--salt-content-foreground-visited));\n  /* When focused, we also want hover style */\n  --link-color-focus: var(--saltLink-color-focus, var(--link-color-hover));\n\n  --link-textDecoration: var(--salt-navigable-textDecoration);\n  --link-textDecoration-hover: var(--salt-navigable-textDecoration-hover);\n\n  --link-fontFamily: var(--salt-text-fontFamily);\n  --link-focus-outline: var(--salt-focused-outline);\n}\n\n/* Main css class */\n.saltLink {\n  color: var(--link-color);\n  letter-spacing: 0px;\n  text-decoration: var(--link-textDecoration);\n  font-family: var(--link-fontFamily);\n}\n\n/* Primary variant */\n.saltText-primary {\n  --link-color: var(--salt-content-primary-foreground);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n  --link-color: var(--salt-content-secondary-foreground);\n}\n\n/* External link's icon */\n.saltLink-icon {\n  margin-left: var(--salt-size-adornmentGap);\n  margin-bottom: -2px;\n}\n\n/* Set color for visited link */\n.saltLink:visited {\n  color: var(--link-color-visited);\n}\n\n/* Set color for hovered link */\n.saltLink:hover {\n  color: var(--link-color-hover);\n  text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Set color for active link */\n.saltLink:active {\n  color: var(--link-color-active);\n}\n\n/* Set color for focused link */\n.saltLink:focus {\n  outline: var(--link-focus-outline);\n  color: var(--link-color-focus);\n  text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Class for ADA content */\n.saltLink-externalLinkADA {\n  display: block;\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  top: 0px;\n  left: 0px;\n  opacity: 0;\n}\n";
+var css_248z = ".saltLink {\n  --link-color-hover: var(--saltLink-color-hover, var(--salt-content-foreground-hover));\n  --link-color-active: var(--saltLink-color-active, var(--salt-content-foreground-active));\n  --link-color-visited: var(--saltLink-color-visited, var(--salt-content-foreground-visited));\n  /* When focused, we also want hover style */\n  --link-color-focus: var(--saltLink-color-focus, var(--link-color-hover));\n\n  --link-textDecoration: var(--salt-navigable-textDecoration);\n  --link-textDecoration-hover: var(--salt-navigable-textDecoration-hover);\n\n  --link-fontFamily: var(--salt-text-fontFamily);\n  --link-focus-outline: var(--salt-focused-outline);\n}\n\n/* Main css class */\n.saltLink {\n  color: var(--link-color);\n  letter-spacing: var(--salt-text-letterSpacing);\n  text-decoration: var(--link-textDecoration);\n  font-family: var(--link-fontFamily);\n}\n\n/* Primary variant */\n.saltText-primary {\n  --link-color: var(--salt-content-primary-foreground);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n  --link-color: var(--salt-content-secondary-foreground);\n}\n\n/* External link's icon */\n.saltLink .saltLink-icon {\n  margin-left: var(--salt-spacing-75);\n  margin-bottom: -2px;\n}\n\n/* Set color for visited link */\n.saltLink:visited {\n  color: var(--link-color-visited);\n}\n\n/* Set color for hovered link */\n.saltLink:hover {\n  color: var(--link-color-hover);\n  text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Set color for active link */\n.saltLink:active {\n  color: var(--link-color-active);\n}\n\n/* Set color for focused link */\n.saltLink:focus {\n  outline: var(--link-focus-outline);\n  color: var(--link-color-focus);\n  text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Class for ADA content */\n.saltLink-externalLinkADA {\n  display: block;\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  top: 0px;\n  left: 0px;\n  opacity: 0;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Link.css.js.map

package/dist-es/link-card/LinkCard.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Styles applied to LinkCard */\n.saltLinkCard {\n  border-width: var(--saltLinkCard-borderWidth, var(--salt-size-border));\n  border-style: var(--saltLinkCard-borderStyle, var(--salt-container-borderStyle));\n  border-radius: var(--saltLinkCard-borderRadius, 0);\n  display: block;\n  padding: var(--saltLinkCard-padding, var(--salt-spacing-200));\n  position: relative;\n  text-decoration: none;\n  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n}\n\n/* Styles applied to LinkCard when variant=\"primary\" */\n.saltLinkCard-primary {\n  background: var(--saltLinkCard-background, var(--salt-container-primary-background));\n  border-color: var(--salt-container-primary-borderColor);\n  --linkCard-accent-color: var(--salt-container-primary-borderColor);\n}\n\n/* Styles applied to LinkCard when variant=\"secondary\" */\n.saltLinkCard-secondary {\n  background: var(--saltLinkCard-background, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-secondary-borderColor);\n  --linkCard-accent-color: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied to create accent */\n.saltLinkCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltLinkCard-accent-color, var(--linkCard-accent-color));\n}\n\n/* Styles applied to LinkCard if `accent=\"bottom\"` (default) */\n.saltLinkCard-accentBottom::after {\n  left: calc(-1 * var(--salt-size-border));\n  bottom: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-accent);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to LinkCard if `accent=\"left\"` */\n.saltLinkCard-accentLeft::after {\n  left: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-accent);\n}\n\n/* Styles applied to LinkCard if `accent=\"top\"` */\n.saltLinkCard-accentTop::after {\n  left: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-accent);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to LinkCard if `accent=\"right\"` */\n.saltLinkCard-accentRight::after {\n  right: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-accent);\n}\n\n/* Styles applied to LinkCard on focus */\n.saltLinkCard:focus-visible {\n  cursor: var(--salt-selectable-cursor-hover);\n  box-shadow: var(--salt-overlayable-shadow-hover);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n  --linkCard-accent-color: var(--salt-selectable-foreground-hover);\n}\n\n/* Styles applied on hover state to LinkCard */\n.saltLinkCard:hover {\n  cursor: var(--salt-selectable-cursor-hover);\n  box-shadow: var(--salt-overlayable-shadow-hover);\n  --linkCard-accent-color: var(--salt-selectable-foreground-hover);\n}\n\n/* Styles applied on active state to LinkCard */\n.saltLinkCard:active {\n  cursor: var(--salt-selectable-cursor-active);\n  border-color: var(--salt-selectable-borderColor-selected);\n  box-shadow: var(--salt-overlayable-shadow);\n  --linkCard-accent-color: var(--salt-selectable-foreground-selected);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=LinkCard.css.js.map

package/dist-es/link-card/LinkCard.css.js.map

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

package/dist-es/link-card/LinkCard.js

@@ -0,0 +1,50 @@
+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 { capitalize } from '../utils/capitalize.js';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import css_248z from './LinkCard.css.js';
+
+const withBaseName = makePrefixer("saltLinkCard");
+const LinkCard = forwardRef(
+  function LinkCard2(props, ref) {
+    const {
+      accent,
+      children,
+      className,
+      href,
+      variant = "primary",
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-link-card",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx("a", {
+      className: clsx(
+        withBaseName(),
+        withBaseName(variant),
+        {
+          [withBaseName("accent")]: accent,
+          [withBaseName(`accent${capitalize(accent != null ? accent : "")}`)]: accent
+        },
+        className
+      ),
+      href,
+      ...rest,
+      ref,
+      children
+    });
+  }
+);
+
+export { LinkCard };
+//# sourceMappingURL=LinkCard.js.map

package/dist-es/link-card/LinkCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkCard.js","sources":["../src/link-card/LinkCard.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport linkCardCss from \"./LinkCard.css\";\n\nconst withBaseName = makePrefixer(\"saltLinkCard\");\n\nexport interface LinkCardProps extends ComponentPropsWithoutRef<\"a\"> {\n  /**\n   * If provided an accent is shown in the specified position.\n   */\n  accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * Styling variant; defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n}\n\nexport const LinkCard = forwardRef<HTMLAnchorElement, LinkCardProps>(\n  function LinkCard(props, ref) {\n    const {\n      accent,\n      children,\n      className,\n      href,\n      variant = \"primary\",\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-link-card\",\n      css: linkCardCss,\n      window: targetWindow,\n    });\n\n    return (\n      <a\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"accent\")]: accent,\n            [withBaseName(`accent${capitalize(accent ?? \"\")}`)]: accent,\n          },\n          className\n        )}\n        href={href}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n      </a>\n    );\n  }\n);\n"],"names":["LinkCard","linkCardCss"],"mappings":";;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AAazC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SAAS,CAAA,KAAA,EAAO,GAAK,EAAA;AAC5B,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAU,GAAA,SAAA;AAAA,MACP,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,GAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,OAAO,CAAA;AAAA,QACpB;AAAA,UACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,UAC1B,CAAC,YAAa,CAAA,CAAA,MAAA,EAAS,WAAW,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAE,GAAG,CAAI,GAAA,MAAA;AAAA,SACvD;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,IAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEC,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/multiline-input/MultilineInput.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Style applied to the root element */\n.saltMultilineInput {\n  --multilineInput-borderColor: var(--salt-editable-borderColor);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle);\n  --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n  --multilineInput-border: none;\n  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--multilineInput-background);\n  border: var(--multilineInput-border);\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  height: auto;\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--salt-size-base);\n  min-width: 4em;\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  position: relative;\n  width: 100%;\n}\n\n/* Style applied on hover */\n.saltMultilineInput:hover {\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-hover);\n  --multilineInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--multilineInput-background-hover);\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Style applied when active */\n.saltMultilineInput:active {\n  --multilineInput-borderColor: var(--salt-editable-borderColor-active);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-active);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--multilineInput-background-active);\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltMultilineInput-primary {\n  --multilineInput-background: var(--salt-editable-primary-background);\n  --multilineInput-background-active: var(--salt-editable-primary-background-active);\n  --multilineInput-background-hover: var(--salt-editable-primary-background-hover);\n  --multilineInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltMultilineInput-secondary {\n  --multilineInput-background: var(--salt-editable-secondary-background);\n  --multilineInput-background-active: var(--salt-editable-secondary-background-active);\n  --multilineInput-background-hover: var(--salt-editable-secondary-background-active);\n  --multilineInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltMultilineInput-error,\n.saltMultilineInput-error:hover {\n  --multilineInput-background: var(--salt-status-error-background);\n  --multilineInput-background-active: var(--salt-status-error-background);\n  --multilineInput-background-hover: var(--salt-status-error-background);\n  --multilineInput-borderColor: var(--salt-status-error-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltMultilineInput-warning,\n.saltMultilineInput-warning:hover {\n  --multilineInput-background: var(--salt-status-warning-background);\n  --multilineInput-background-active: var(--salt-status-warning-background);\n  --multilineInput-background-hover: var(--salt-status-warning-background);\n  --multilineInput-borderColor: var(--salt-status-warning-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltMultilineInput-success,\n.saltMultilineInput-success:hover {\n  --multilineInput-background: var(--salt-status-success-background);\n  --multilineInput-background-active: var(--salt-status-success-background);\n  --multilineInput-background-hover: var(--salt-status-success-background);\n  --multilineInput-borderColor: var(--salt-status-success-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n.saltMultilineInput.saltMultilineInput-withAdornmentRow {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n/* Style applied to inner textarea element */\n.saltMultilineInput-textarea {\n  background: none;\n  border: none;\n  box-sizing: border-box;\n  color: inherit;\n  cursor: inherit;\n  flex-grow: 1;\n  font: inherit;\n  letter-spacing: 0;\n  line-height: var(--salt-text-lineHeight);\n  margin: var(--salt-spacing-75) 0;\n  min-width: 0;\n  min-height: 0;\n  resize: vertical;\n  padding: 0;\n}\n\n/* Style applied to placeholder */\n.saltMultilineInput-textarea::placeholder {\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Reset in the  class */\n.saltMultilineInput-textarea:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltMultilineInput-textarea::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Styling when focused */\n.saltMultilineInput-focused {\n  --multilineInput-borderColor: var(--multilineInput-outlineColor);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--multilineInput-outlineColor);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltMultilineInput-readOnly,\n.saltMultilineInput-readOnly:active,\n.saltMultilineInput-readOnly:hover {\n  --multilineInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  background: var(--multilineInput-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Style applied to selected text if `disabled={true}` */\n.saltMultilineInput-disabled .saltMultilineInput-textarea::selection {\n  background: none;\n}\n\n/* Style applied when `disabled={true}` */\n.saltMultilineInput-disabled,\n.saltMultilineInput-disabled:hover,\n.saltMultilineInput-disabled:active {\n  --multilineInput-borderColor: var(--salt-editable-borderColor-disabled);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  background: var(--multilineInput-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Style for activation indicator */\n.saltMultilineInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--multilineInput-activationIndicator-borderWidth) var(--multilineInput-borderStyle) var(--multilineInput-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltMultilineInput.saltMultilineInput-bordered {\n  --multilineInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--multilineInput-borderColor);\n  --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied if active or focused when `bordered={true}` */\n.saltMultilineInput-bordered:active,\n.saltMultilineInput-bordered.saltMultilineInput-focused {\n  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput-readOnly:hover,\n.saltMultilineInput-bordered.saltMultilineInput-disabled:hover {\n  --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied to adornment containers */\n.saltMultilineInput-endAdornmentContainer,\n.saltMultilineInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to start adornment container */\n.saltMultilineInput-startAdornmentContainer {\n  align-self: self-start;\n  padding-right: var(--salt-spacing-100);\n}\n\n/* Style applied to suffix adornment container */\n.saltMultilineInput-suffixAdornments {\n  align-self: self-end;\n}\n\n/* Style applied to suffix adornment container when end adornments are provided */\n.saltMultilineInput-withAdornmentRow .saltMultilineInput-suffixAdornments {\n  display: inline-flex;\n  flex-basis: 100%;\n  justify-content: flex-end;\n}\n\n/* Style applied to end adornment container */\n.saltMultilineInput-endAdornmentContainer {\n  padding-left: var(--salt-spacing-100);\n}\n\n/* Style applied to status adornment container */\n.saltMultilineInput-statusAdornmentContainer {\n  align-self: self-end;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n}\n\n/* Style applied to button start adornment if first child */\n.saltMultilineInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-readOnly .saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: 0;\n}\n\n/* Styles for button adornment */\n.saltMultilineInput-startAdornmentContainer > .saltButton,\n.saltMultilineInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: var(--salt-spacing-50);\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltMultilineInput {\n  --multilineInput-borderColor: var(--salt-editable-borderColor);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle);\n  --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n  --multilineInput-border: none;\n  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--multilineInput-background);\n  border: var(--multilineInput-border);\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  height: auto;\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--salt-size-base);\n  min-width: 4em;\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* Style applied on hover */\n.saltMultilineInput:hover {\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-hover);\n  --multilineInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--multilineInput-background-hover);\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Style applied when active */\n.saltMultilineInput:active {\n  --multilineInput-borderColor: var(--salt-editable-borderColor-active);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-active);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--multilineInput-background-active);\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltMultilineInput-primary {\n  --multilineInput-background: var(--salt-editable-primary-background);\n  --multilineInput-background-active: var(--salt-editable-primary-background-active);\n  --multilineInput-background-hover: var(--salt-editable-primary-background-hover);\n  --multilineInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltMultilineInput-secondary {\n  --multilineInput-background: var(--salt-editable-secondary-background);\n  --multilineInput-background-active: var(--salt-editable-secondary-background-active);\n  --multilineInput-background-hover: var(--salt-editable-secondary-background-active);\n  --multilineInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltMultilineInput-error,\n.saltMultilineInput-error:hover {\n  --multilineInput-background: var(--salt-status-error-background);\n  --multilineInput-background-active: var(--salt-status-error-background);\n  --multilineInput-background-hover: var(--salt-status-error-background);\n  --multilineInput-borderColor: var(--salt-status-error-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltMultilineInput-warning,\n.saltMultilineInput-warning:hover {\n  --multilineInput-background: var(--salt-status-warning-background);\n  --multilineInput-background-active: var(--salt-status-warning-background);\n  --multilineInput-background-hover: var(--salt-status-warning-background);\n  --multilineInput-borderColor: var(--salt-status-warning-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltMultilineInput-success,\n.saltMultilineInput-success:hover {\n  --multilineInput-background: var(--salt-status-success-background);\n  --multilineInput-background-active: var(--salt-status-success-background);\n  --multilineInput-background-hover: var(--salt-status-success-background);\n  --multilineInput-borderColor: var(--salt-status-success-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n.saltMultilineInput.saltMultilineInput-withAdornmentRow {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n/* Style applied to inner textarea element */\n.saltMultilineInput-textarea {\n  background: none;\n  border: none;\n  box-sizing: border-box;\n  color: inherit;\n  cursor: inherit;\n  flex-grow: 1;\n  font: inherit;\n  letter-spacing: 0;\n  line-height: var(--salt-text-lineHeight);\n  margin: var(--salt-spacing-75) 0;\n  min-width: 0;\n  min-height: 0;\n  resize: vertical;\n  padding: 0;\n}\n\n/* Style applied to placeholder */\n.saltMultilineInput-textarea::placeholder {\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Reset in the  class */\n.saltMultilineInput-textarea:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltMultilineInput-textarea::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Styling when focused */\n.saltMultilineInput-focused {\n  --multilineInput-borderColor: var(--multilineInput-outlineColor);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--multilineInput-outlineColor);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltMultilineInput-readOnly,\n.saltMultilineInput-readOnly:active,\n.saltMultilineInput-readOnly:hover {\n  --multilineInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  background: var(--multilineInput-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Style applied to selected text if `disabled={true}` */\n.saltMultilineInput-disabled .saltMultilineInput-textarea::selection {\n  background: none;\n}\n\n/* Style applied when `disabled={true}` */\n.saltMultilineInput-disabled,\n.saltMultilineInput-disabled:hover,\n.saltMultilineInput-disabled:active {\n  --multilineInput-borderColor: var(--salt-editable-borderColor-disabled);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  background: var(--multilineInput-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Style for activation indicator */\n.saltMultilineInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--multilineInput-activationIndicator-borderWidth) var(--multilineInput-borderStyle) var(--multilineInput-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltMultilineInput.saltMultilineInput-bordered {\n  --multilineInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--multilineInput-borderColor);\n  --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied if active or focused when `bordered={true}` */\n.saltMultilineInput-bordered:active,\n.saltMultilineInput-bordered.saltMultilineInput-focused {\n  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput-readOnly:hover,\n.saltMultilineInput-bordered.saltMultilineInput-disabled:hover {\n  --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied to adornment containers */\n.saltMultilineInput-endAdornmentContainer,\n.saltMultilineInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to start adornment container */\n.saltMultilineInput-startAdornmentContainer {\n  align-self: self-start;\n  padding-right: var(--salt-spacing-100);\n}\n\n/* Style applied to suffix adornment container */\n.saltMultilineInput-suffixAdornments {\n  align-self: self-end;\n}\n\n/* Style applied to suffix adornment container when end adornments are provided */\n.saltMultilineInput-withAdornmentRow .saltMultilineInput-suffixAdornments {\n  display: inline-flex;\n  flex-basis: 100%;\n  justify-content: flex-end;\n}\n\n/* Style applied to end adornment container */\n.saltMultilineInput-endAdornmentContainer {\n  padding-left: var(--salt-spacing-100);\n}\n\n/* Style applied to status adornment container */\n.saltMultilineInput-statusAdornmentContainer {\n  align-self: self-end;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n}\n\n/* Style applied to button start adornment if first child */\n.saltMultilineInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-readOnly .saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: 0;\n}\n\n/* Styles for button adornment */\n.saltMultilineInput-startAdornmentContainer > .saltButton,\n.saltMultilineInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: var(--salt-spacing-50);\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=MultilineInput.css.js.map