@salt-ds/lab 1.0.0-alpha.14 → 1.0.0-alpha.16

package/dist-cjs/content-status/internal/StatusIndicator.js

@@ -12,7 +12,6 @@ const withBaseName = core.makePrefixer("saltContentStatus");
 function StatusIndicator({
   status = "info",
   disableAnnouncer,
-  unit,
   value,
   title,
   message,
@@ -31,7 +30,6 @@ function StatusIndicator({
           withBaseName("determinateLoading"),
           circularProgressClassName
         ),
-        unit,
         value,
         ...restCircularProgressProps
       });

package/dist-cjs/content-status/internal/StatusIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicator.js","sources":["../src/content-status/internal/StatusIndicator.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  StatusIndicator as BaseStatusIndicator,\n  StatusIndicatorProps as BaseStatusIndicatorProps,\n  Spinner,\n  SpinnerProps,\n} from \"@salt-ds/core\";\nimport { ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { CircularProgress, CircularProgressProps } from \"../../progress\";\n\nexport interface StatusIndicatorProps\n  extends Pick<SpinnerProps, \"disableAnnouncer\">,\n    Pick<CircularProgressProps, \"unit\" | \"value\"> {\n  title?: string;\n  message?: string;\n  CircularProgressProps?: Partial<CircularProgressProps>;\n  SpinnerProps?: Partial<SpinnerProps>;\n  id?: string;\n  status?: BaseStatusIndicatorProps[\"status\"] | \"loading\";\n}\n\nconst withBaseName = makePrefixer(\"saltContentStatus\");\n\nexport function StatusIndicator({\n  status = \"info\",\n  disableAnnouncer,\n  unit,\n  value,\n  title,\n  message,\n  CircularProgressProps: {\n    className: circularProgressClassName,\n    ...restCircularProgressProps\n  } = {},\n  SpinnerProps: { className: spinnerClassName, ...restSpinnerProps } = {},\n  id,\n}: StatusIndicatorProps): ReactElement {\n  if (status === \"loading\") {\n    if (value !== undefined) {\n      return (\n        <CircularProgress\n          aria-label={title || message}\n          className={clsx(\n            withBaseName(\"determinateLoading\"),\n            circularProgressClassName\n          )}\n          unit={unit}\n          value={value}\n          {...restCircularProgressProps}\n        />\n      );\n    }\n    return (\n      <Spinner\n        className={clsx(withBaseName(\"indeterminateLoading\"), spinnerClassName)}\n        // Announcement of the content status is more useful than completion announcement from spinner\n        completionAnnouncement={null}\n        data-testid={`spinner-${id!}`}\n        disableAnnouncer={disableAnnouncer}\n        {...restSpinnerProps}\n      />\n    );\n  }\n\n  return (\n    <BaseStatusIndicator\n      status={status}\n      data-jpmui-test={`icon-${status}-${id!}`}\n      size={2}\n    />\n  );\n}\n"],"names":["makePrefixer","jsx","CircularProgress","clsx","Spinner","BaseStatusIndicator"],"mappings":";;;;;;;;;;AAuBA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAE9C,SAAS,eAAgB,CAAA;AAAA,EAC9B,MAAS,GAAA,MAAA;AAAA,EACT,gBAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,qBAAuB,EAAA;AAAA,IACrB,SAAW,EAAA,yBAAA;AAAA,IACR,GAAA,yBAAA;AAAA,MACD,EAAC;AAAA,EACL,cAAc,EAAE,SAAA,EAAW,gBAAqB,EAAA,GAAA,gBAAA,KAAqB,EAAC;AAAA,EACtE,EAAA;AACF,CAAuC,EAAA;AACrC,EAAA,IAAI,WAAW,SAAW,EAAA;AACxB,IAAA,IAAI,UAAU,KAAW,CAAA,EAAA;AACvB,MAAA,uBACGC,cAAA,CAAAC,iCAAA,EAAA;AAAA,QACC,cAAY,KAAS,IAAA,OAAA;AAAA,QACrB,SAAW,EAAAC,SAAA;AAAA,UACT,aAAa,oBAAoB,CAAA;AAAA,UACjC,yBAAA;AAAA,SACF;AAAA,QACA,IAAA;AAAA,QACA,KAAA;AAAA,QACC,GAAG,yBAAA;AAAA,OACN,CAAA,CAAA;AAAA,KAEJ;AACA,IAAA,uBACGF,cAAA,CAAAG,YAAA,EAAA;AAAA,MACC,SAAW,EAAAD,SAAA,CAAK,YAAa,CAAA,sBAAsB,GAAG,gBAAgB,CAAA;AAAA,MAEtE,sBAAwB,EAAA,IAAA;AAAA,MACxB,eAAa,CAAW,QAAA,EAAA,EAAA,CAAA,CAAA;AAAA,MACxB,gBAAA;AAAA,MACC,GAAG,gBAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AAEA,EAAA,uBACGF,cAAA,CAAAI,oBAAA,EAAA;AAAA,IACC,MAAA;AAAA,IACA,iBAAA,EAAiB,QAAQ,MAAU,CAAA,CAAA,EAAA,EAAA,CAAA,CAAA;AAAA,IACnC,IAAM,EAAA,CAAA;AAAA,GACR,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"StatusIndicator.js","sources":["../src/content-status/internal/StatusIndicator.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  StatusIndicator as BaseStatusIndicator,\n  StatusIndicatorProps as BaseStatusIndicatorProps,\n  Spinner,\n  SpinnerProps,\n} from \"@salt-ds/core\";\nimport { ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { CircularProgress, CircularProgressProps } from \"../../progress\";\n\nexport interface StatusIndicatorProps\n  extends Pick<SpinnerProps, \"disableAnnouncer\">,\n    Pick<CircularProgressProps, \"value\"> {\n  title?: string;\n  message?: string;\n  CircularProgressProps?: Partial<CircularProgressProps>;\n  SpinnerProps?: Partial<SpinnerProps>;\n  id?: string;\n  status?: BaseStatusIndicatorProps[\"status\"] | \"loading\";\n}\n\nconst withBaseName = makePrefixer(\"saltContentStatus\");\n\nexport function StatusIndicator({\n  status = \"info\",\n  disableAnnouncer,\n  value,\n  title,\n  message,\n  CircularProgressProps: {\n    className: circularProgressClassName,\n    ...restCircularProgressProps\n  } = {},\n  SpinnerProps: { className: spinnerClassName, ...restSpinnerProps } = {},\n  id,\n}: StatusIndicatorProps): ReactElement {\n  if (status === \"loading\") {\n    if (value !== undefined) {\n      return (\n        <CircularProgress\n          aria-label={title || message}\n          className={clsx(\n            withBaseName(\"determinateLoading\"),\n            circularProgressClassName\n          )}\n          value={value}\n          {...restCircularProgressProps}\n        />\n      );\n    }\n    return (\n      <Spinner\n        className={clsx(withBaseName(\"indeterminateLoading\"), spinnerClassName)}\n        // Announcement of the content status is more useful than completion announcement from spinner\n        completionAnnouncement={null}\n        data-testid={`spinner-${id!}`}\n        disableAnnouncer={disableAnnouncer}\n        {...restSpinnerProps}\n      />\n    );\n  }\n\n  return (\n    <BaseStatusIndicator\n      status={status}\n      data-jpmui-test={`icon-${status}-${id!}`}\n      size={2}\n    />\n  );\n}\n"],"names":["makePrefixer","jsx","CircularProgress","clsx","Spinner","BaseStatusIndicator"],"mappings":";;;;;;;;;;AAuBA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAE9C,SAAS,eAAgB,CAAA;AAAA,EAC9B,MAAS,GAAA,MAAA;AAAA,EACT,gBAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,qBAAuB,EAAA;AAAA,IACrB,SAAW,EAAA,yBAAA;AAAA,IACR,GAAA,yBAAA;AAAA,MACD,EAAC;AAAA,EACL,cAAc,EAAE,SAAA,EAAW,gBAAqB,EAAA,GAAA,gBAAA,KAAqB,EAAC;AAAA,EACtE,EAAA;AACF,CAAuC,EAAA;AACrC,EAAA,IAAI,WAAW,SAAW,EAAA;AACxB,IAAA,IAAI,UAAU,KAAW,CAAA,EAAA;AACvB,MAAA,uBACGC,cAAA,CAAAC,iCAAA,EAAA;AAAA,QACC,cAAY,KAAS,IAAA,OAAA;AAAA,QACrB,SAAW,EAAAC,SAAA;AAAA,UACT,aAAa,oBAAoB,CAAA;AAAA,UACjC,yBAAA;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QACC,GAAG,yBAAA;AAAA,OACN,CAAA,CAAA;AAAA,KAEJ;AACA,IAAA,uBACGF,cAAA,CAAAG,YAAA,EAAA;AAAA,MACC,SAAW,EAAAD,SAAA,CAAK,YAAa,CAAA,sBAAsB,GAAG,gBAAgB,CAAA;AAAA,MAEtE,sBAAwB,EAAA,IAAA;AAAA,MACxB,eAAa,CAAW,QAAA,EAAA,EAAA,CAAA,CAAA;AAAA,MACxB,gBAAA;AAAA,MACC,GAAG,gBAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AAEA,EAAA,uBACGF,cAAA,CAAAI,oBAAA,EAAA;AAAA,IACC,MAAA;AAAA,IACA,iBAAA,EAAiB,QAAQ,MAAU,CAAA,CAAA,EAAA,EAAA,CAAA,CAAA;AAAA,IACnC,IAAM,EAAA,CAAA;AAAA,GACR,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/dialog/Dialog.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltDialog {\n  --dialog-background: var(--saltDialog-background, var(--salt-container-primary-background));\n  --dialog-borderBottomWidth: var(--saltDialog-borderBottomWidth, 2px);\n  --dialog-borderColor: var(--saltDialog-borderColor, var(--salt-container-primary-borderColor));\n  --dialog-borderStyle: var(--saltDialog-borderStyle, var(--salt-container-borderStyle));\n  --dialog-borderWidth: var(--saltDialog-borderColor, var(--salt-size-border));\n  --dialog-boxShadow: var(--saltDialog-boxShadow, var(--salt-overlayable-shadow-modal));\n  --dialog-margin: var(--saltDialog-margin, var(--salt-size-container-spacing));\n  --dialog-padding: var(--saltDialog-padding, var(--salt-size-container-spacing));\n}\n\n.saltDialog {\n  background: var(--dialog-background);\n  border-color: var(--dialog-borderColor);\n  border-width: var(--dialog-borderWidth);\n  border-style: var(--dialog-borderStyle);\n  border-bottom-width: var(--dialog-borderBottomWidth);\n  display: flex;\n  flex-direction: column;\n  inset: 0; /* what does this do ? */\n  max-height: 100%;\n  max-width: 100%;\n  overflow: auto;\n  padding: var(--dialog-padding);\n  position: relative;\n  box-shadow: var(--saltDialog-boxShadow, var(--dialog-boxShadow));\n  margin: var(--saltDialog-margin, var(--dialog-margin));\n}\n";
+var css_248z = "/* Styles applied to Dialog component */\n.saltDialog {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--salt-spacing-300);\n  padding-bottom: var(--salt-spacing-300);\n  background: var(--salt-container-primary-background);\n  max-height: 100%;\n  max-width: 100%;\n  box-shadow: var(--salt-overlayable-shadow-modal);\n  z-index: calc(var(--salt-zIndex-appHeader) - 1);\n  overflow-y: auto;\n}\n\n.salt-density-high {\n  --saltDialog-minWidth: 240px;\n}\n\n.salt-density-medium {\n  --saltDialog-minWidth: 320px;\n}\n\n.salt-density-low {\n  --saltDialog-minWidth: 400px;\n}\n\n.salt-density-touch {\n  --saltDialog-minWidth: 480px;\n}\n\n/* Styles applied to Dialog background overlay */\n.saltDialog-overlay {\n  background: var(--salt-overlayable-background);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--salt-spacing-100);\n  z-index: var(--salt-zIndex-modal);\n}\n\n/* Styles applied to Dialog when any status prop is applied */\n.saltDialog-withStatus {\n  border-width: var(--salt-size-border);\n  border-style: var(--salt-container-borderStyle);\n}\n\n/* Styles applied to Dialog when a status=\"info\" */\n.saltDialog-info {\n  border-color: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"error\" */\n.saltDialog-error {\n  border-color: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"warning\" */\n.saltDialog-warning {\n  border-color: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"success\" */\n.saltDialog-success {\n  border-color: var(--salt-status-success-borderColor);\n}\n\n/* Styles applied when the component mounts */\n.saltDialog.saltDialog-enterAnimation {\n  animation: var(--salt-animation-fade-in-center);\n}\n\n/* Styles applied when the component unmounts */\n.saltDialog.saltDialog-exitAnimation {\n  animation: var(--salt-animation-fade-out-back);\n}\n\n@media screen and (min-width: 480px) {\n  .saltDialog {\n    min-width: var(--saltDialog-minWidth);\n  }\n\n  .saltDialog-overlay {\n    padding: var(--salt-spacing-400);\n  }\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Dialog.css.js.map

package/dist-cjs/dialog/Dialog.js

@@ -3,85 +3,82 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var core = require('@salt-ds/core');
-var clsx = require('clsx');
 var React = require('react');
-var DialogContext = require('./internal/DialogContext.js');
-var Scrim = require('../scrim/Scrim.js');
-require('../scrim/ScrimContext.js');
-var WindowContext = require('../window/WindowContext.js');
-require('../window/ElectronWindow.js');
-var Portal = require('../portal/Portal.js');
+var clsx = require('clsx');
+var react = require('@floating-ui/react');
+var core = require('@salt-ds/core');
 var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
+var useDialog = require('./useDialog.js');
 var Dialog$1 = require('./Dialog.css.js');
+var DialogContext = require('./DialogContext.js');
 
 const withBaseName = core.makePrefixer("saltDialog");
 const Dialog = React.forwardRef(function Dialog2(props, ref) {
   const {
-    autoFocusRef,
     children,
     className,
-    height,
-    id,
-    onClose,
-    open: openProp,
+    open = true,
+    onOpenChange,
     status,
-    width,
-    enableBackdropClick,
-    disablePortal,
+    initialFocus,
     ...rest
   } = props;
+  const dialogId = core.useId() || "dialog";
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
     testId: "salt-dialog",
     css: Dialog$1,
     window: targetWindow
   });
-  const Window = WindowContext.useWindow();
-  const [open, setOpen] = React.useState(openProp);
+  const [showComponent, setShowComponent] = React.useState(false);
+  const { floating, context, getFloatingProps } = useDialog.useDialog({
+    open,
+    onOpenChange
+  });
+  const floatingRef = core.useForkRef(floating, ref);
   React.useEffect(() => {
-    setOpen(openProp);
-  }, [openProp]);
-  const dialogId = core.useId();
-  const handleClose = React.useCallback(() => {
-    onClose == null ? void 0 : onClose();
-    setOpen(false);
-  }, [onClose, setOpen]);
-  const handleBackdropClick = React.useCallback(() => {
-    if (enableBackdropClick) {
-      handleClose();
+    if (open && !showComponent) {
+      setShowComponent(true);
     }
-  }, [enableBackdropClick, handleClose]);
-  const contentElementRef = React.useRef(null);
-  const setContentElement = React.useCallback((node) => {
-    contentElementRef.current = node;
-  }, []);
-  if (!open) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogContext.DialogContext.Provider, {
-    value: { status, dialogId, setContentElement },
-    children: /* @__PURE__ */ jsxRuntime.jsx(Portal.Portal, {
-      disablePortal,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Scrim.Scrim, {
-        autoFocusRef,
-        fallbackFocusRef: contentElementRef,
-        open,
-        closeWithEscape: true,
-        onBackDropClick: handleBackdropClick,
-        onClose: handleClose,
-        "aria-labelledby": `${dialogId}-heading`,
-        "aria-describedby": `${dialogId}-body`,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Window, {
-          id,
+  }, [open, showComponent]);
+  const contextValue = React.useMemo(
+    () => ({ dialogId, status }),
+    [dialogId, status]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, {
+    children: showComponent && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingOverlay, {
+      className: withBaseName("overlay"),
+      lockScroll: true,
+      children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingFocusManager, {
+        context,
+        modal: true,
+        initialFocus,
+        children: /* @__PURE__ */ jsxRuntime.jsx(DialogContext.DialogContext.Provider, {
+          value: contextValue,
           children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+            id: dialogId,
+            className: clsx.clsx(
+              withBaseName(),
+              {
+                [withBaseName("enterAnimation")]: open,
+                [withBaseName("exitAnimation")]: !open,
+                [withBaseName("withStatus")]: status,
+                [withBaseName(status)]: status
+              },
+              className
+            ),
+            onAnimationEnd: () => {
+              if (!open && showComponent) {
+                setShowComponent(false);
+              }
+            },
+            ref: floatingRef,
+            "aria-labelledby": `${dialogId}-heading`,
+            "aria-describedby": `${dialogId}-description`,
+            "aria-modal": "true",
+            ...getFloatingProps(),
             ...rest,
-            className: clsx.clsx(withBaseName(), className, {
-              [withBaseName("infoShadow")]: status === "info"
-            }),
-            style: { width },
-            ref,
             children
           })
         })

package/dist-cjs/dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../src/dialog/Dialog.tsx"],"sourcesContent":["import { makePrefixer, useId, ValidationStatus } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  forwardRef,\n  HTMLAttributes,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { DialogContext } from \"./internal/DialogContext\";\nimport { Scrim, ScrimProps } from \"../scrim\";\nimport { useWindow as usePortalWindow } from \"../window\";\nimport { Portal } from \"../portal\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport dialogCss from \"./Dialog.css\";\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\n  autoFocusRef?: ScrimProps[\"autoFocusRef\"];\n  height?: string | number;\n  onClose?: () => void;\n  open?: boolean;\n  status?: ValidationStatus;\n  width?: string | number;\n  enableBackdropClick?: boolean;\n  disablePortal?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltDialog\");\n\n/**\n * The Dialog is a window that contains text and interactive components.\n * By default, Dialog is non-modal, but supports modal behaviour as well.\n */\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n  props,\n  ref\n) {\n  const {\n    autoFocusRef,\n    children,\n    className,\n    height,\n    id,\n    onClose,\n    open: openProp,\n    status,\n    width,\n    enableBackdropClick,\n    disablePortal,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dialog\",\n    css: dialogCss,\n    window: targetWindow,\n  });\n\n  const Window = usePortalWindow();\n  const [open, setOpen] = useState(openProp);\n\n  useEffect(() => {\n    setOpen(openProp);\n  }, [openProp]);\n\n  const dialogId = useId();\n\n  const handleClose = useCallback(() => {\n    onClose?.();\n    setOpen(false);\n  }, [onClose, setOpen]);\n\n  const handleBackdropClick = useCallback(() => {\n    if (enableBackdropClick) {\n      handleClose();\n    }\n  }, [enableBackdropClick, handleClose]);\n\n  const contentElementRef = useRef<HTMLDivElement | null>(null);\n\n  const setContentElement = useCallback((node: HTMLDivElement) => {\n    contentElementRef.current = node;\n  }, []);\n\n  if (!open) {\n    return null;\n  }\n\n  return (\n    <DialogContext.Provider value={{ status, dialogId, setContentElement }}>\n      <Portal disablePortal={disablePortal}>\n        <Scrim\n          autoFocusRef={autoFocusRef}\n          fallbackFocusRef={contentElementRef}\n          open={open}\n          closeWithEscape\n          onBackDropClick={handleBackdropClick}\n          onClose={handleClose}\n          aria-labelledby={`${dialogId}-heading`}\n          aria-describedby={`${dialogId}-body`}\n        >\n          <Window id={id}>\n            <div\n              {...rest}\n              className={clsx(withBaseName(), className, {\n                [withBaseName(\"infoShadow\")]: status === \"info\",\n              })}\n              style={{ width }}\n              ref={ref}\n            >\n              {children}\n            </div>\n          </Window>\n        </Scrim>\n      </Portal>\n    </DialogContext.Provider>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Dialog","useWindow","useComponentCssInjection","dialogCss","usePortalWindow","useState","useEffect","useId","useCallback","useRef","jsx","DialogContext","Portal","Scrim","clsx"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sources":["../src/dialog/Dialog.tsx"],"sourcesContent":["import {\n  forwardRef,\n  HTMLAttributes,\n  useEffect,\n  useMemo,\n  useState,\n  ComponentProps,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n  FloatingFocusManager,\n  FloatingOverlay,\n  FloatingPortal,\n} from \"@floating-ui/react\";\nimport {\n  makePrefixer,\n  useForkRef,\n  useId,\n  ValidationStatus,\n} from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { useDialog } from \"./useDialog\";\nimport dialogCss from \"./Dialog.css\";\nimport { DialogContext } from \"./DialogContext\";\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Status indicator\n   * */\n  status?: ValidationStatus;\n  /**\n   * Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.\n   * Default value is 0 (first tabbable element).\n   * */\n  initialFocus?: ComponentProps<typeof FloatingFocusManager>[\"initialFocus\"];\n}\n\nconst withBaseName = makePrefixer(\"saltDialog\");\n\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n  props,\n  ref\n) {\n  const {\n    children,\n    className,\n    open = true,\n    onOpenChange,\n    status,\n    initialFocus,\n    ...rest\n  } = props;\n  const dialogId = useId() || \"dialog\";\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dialog\",\n    css: dialogCss,\n    window: targetWindow,\n  });\n\n  const [showComponent, setShowComponent] = useState(false);\n\n  const { floating, context, getFloatingProps } = useDialog({\n    open,\n    onOpenChange,\n  });\n\n  const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n  useEffect(() => {\n    if (open && !showComponent) {\n      setShowComponent(true);\n    }\n  }, [open, showComponent]);\n\n  const contextValue = useMemo(\n    () => ({ dialogId, status }),\n    [dialogId, status]\n  );\n\n  return (\n    <FloatingPortal>\n      {showComponent && (\n        <FloatingOverlay className={withBaseName(\"overlay\")} lockScroll>\n          <FloatingFocusManager\n            context={context}\n            modal\n            initialFocus={initialFocus}\n          >\n            <DialogContext.Provider value={contextValue}>\n              <div\n                id={dialogId}\n                className={clsx(\n                  withBaseName(),\n                  {\n                    [withBaseName(\"enterAnimation\")]: open,\n                    [withBaseName(\"exitAnimation\")]: !open,\n                    [withBaseName(\"withStatus\")]: status,\n                    [withBaseName(status as string)]: status,\n                  },\n                  className\n                )}\n                onAnimationEnd={() => {\n                  if (!open && showComponent) {\n                    setShowComponent(false);\n                  }\n                }}\n                ref={floatingRef}\n                aria-labelledby={`${dialogId}-heading`}\n                aria-describedby={`${dialogId}-description`}\n                aria-modal=\"true\"\n                {...getFloatingProps()}\n                {...rest}\n              >\n                {children}\n              </div>\n            </DialogContext.Provider>\n          </FloatingFocusManager>\n        </FloatingOverlay>\n      )}\n    </FloatingPortal>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Dialog","useId","useWindow","useComponentCssInjection","dialogCss","useState","useDialog","useForkRef","useEffect","useMemo","jsx","FloatingPortal","FloatingOverlay","FloatingFocusManager","DialogContext","clsx"],"mappings":"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"}

package/dist-cjs/dialog/DialogActions.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "";
+var css_248z = ".saltDialogActions {\n  padding: var(--salt-spacing-300);\n  padding-bottom: 0;\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--salt-spacing-100);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=DialogActions.css.js.map

package/dist-cjs/dialog/DialogActions.js

@@ -11,23 +11,21 @@ var styles = require('@salt-ds/styles');
 var DialogActions$1 = require('./DialogActions.css.js');
 
 const withBaseName = core.makePrefixer("saltDialogActions");
-const DialogActions = React.forwardRef(
-  function DialogActions2(props, ref) {
-    const targetWindow = window.useWindow();
-    styles.useComponentCssInjection({
-      testId: "salt-dialog-actions",
-      css: DialogActions$1,
-      window: targetWindow
-    });
-    const { className, children, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", {
-      ...rest,
-      className: clsx.clsx(withBaseName(), className),
-      ref,
-      children
-    });
-  }
-);
+const DialogActions = React.forwardRef(function DialogActions2(props, ref) {
+  const { children, className, ...rest } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-dialog-actions",
+    css: DialogActions$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: clsx.clsx(withBaseName(), className),
+    ...rest,
+    ref,
+    children
+  });
+});
 
 exports.DialogActions = DialogActions;
 //# sourceMappingURL=DialogActions.js.map

package/dist-cjs/dialog/DialogActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogActions.js","sources":["../src/dialog/DialogActions.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport dialogActionsCss from \"./DialogActions.css\";\n\nexport interface DialogActionsProps extends HTMLAttributes<HTMLDivElement> {}\n\nconst withBaseName = makePrefixer(\"saltDialogActions\");\n\nexport const DialogActions = forwardRef<HTMLDivElement, DialogActionsProps>(\n  function DialogActions(props, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-actions\",\n      css: dialogActionsCss,\n      window: targetWindow,\n    });\n    const { className, children, ...rest } = props;\n\n    return (\n      <div {...rest} className={clsx(withBaseName(), className)} ref={ref}>\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","DialogActions","useWindow","useComponentCssInjection","dialogActionsCss","jsx","clsx"],"mappings":";;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,eAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AACD,IAAA,MAAM,EAAE,SAAA,EAAW,QAAa,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEzC,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MAAK,GAAG,IAAA;AAAA,MAAM,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MACxD,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"DialogActions.js","sources":["../src/dialog/DialogActions.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport dialogActionsCss from \"./DialogActions.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogActions\");\n\nexport const DialogActions = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement>\n>(function DialogActions(props, ref) {\n  const { children, className, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dialog-actions\",\n    css: dialogActionsCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div className={clsx(withBaseName(), className)} {...rest} ref={ref}>\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","DialogActions","useWindow","useComponentCssInjection","dialogActionsCss","jsx","clsx"],"mappings":";;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAAC,gBAAA,CAG3B,SAASC,cAAAA,CAAc,OAAO,GAAK,EAAA;AACnC,EAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEzC,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAI,GAAG,IAAA;AAAA,IAAM,GAAA;AAAA,IACxD,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/dialog/DialogCloseButton.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltButton.saltDialogCloseButton {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=DialogCloseButton.css.js.map

package/dist-cjs/dialog/DialogCloseButton.css.js.map

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

package/dist-cjs/dialog/DialogCloseButton.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var core = require('@salt-ds/core');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var icons = require('@salt-ds/icons');
+var DialogCloseButton$1 = require('./DialogCloseButton.css.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
+
+const withBaseName = core.makePrefixer("saltDialogCloseButton");
+const DialogCloseButton = React.forwardRef(
+  function DialogCloseButton2({ className, ...rest }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-dialog-close-button",
+      css: DialogCloseButton$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
+      ref,
+      "aria-label": "Close dialog",
+      variant: "secondary",
+      className: clsx__default["default"](withBaseName(), className),
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {})
+    });
+  }
+);
+
+exports.DialogCloseButton = DialogCloseButton;
+//# sourceMappingURL=DialogCloseButton.js.map

package/dist-cjs/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, makePrefixer } from \"@salt-ds/core\";\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":["makePrefixer","forwardRef","DialogCloseButton","useWindow","useComponentCssInjection","dialogCloseButtonCss","jsx","Button","clsx","CloseIcon"],"mappings":";;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA,CAAA;AAElD,MAAM,iBAAoB,GAAAC,gBAAA;AAAA,EAC/B,SAASC,kBAAkB,CAAA,EAAE,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACtD,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,0BAAA;AAAA,MACR,GAAK,EAAAC,mBAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAAC,WAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,YAAW,EAAA,cAAA;AAAA,MACX,OAAQ,EAAA,WAAA;AAAA,MACR,SAAW,EAAAC,wBAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG,IAAA;AAAA,MAEJ,yCAACC,eAAU,EAAA,EAAA,CAAA;AAAA,KACb,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltDialogContent {\n  --dialog-content-fontSize: var(--saltDialog-content-fontSize, var(--salt-text-fontSize));\n  --dialog-content-lineHeight: var(--saltDialog-content-lineHeight, var(--salt-text-lineHeight));\n  --dialog-content-paddingTop: var(--saltDialog-content-paddingTop, calc(var(--salt-size-unit) * 2));\n  --dialog-content-paddingBottom: var(--saltDialog-content-paddingBottom, var(--salt-size-container-spacing));\n  --dialog-content-minHeight: var(--saltDialog-content-minHeight, var(--dialog-content-fontSize));\n  --dialog-content-color: var(--saltDialog-content-color, var(--salt-text-primary-foreground));\n}\n\n.saltDialogContent {\n  flex: 1 1 auto;\n  overflow: visible;\n  font-weight: var(--salt-text-fontWeight);\n  font-size: var(--dialog-content-fontSize);\n  padding-top: var(--dialog-content-paddingTop);\n  padding-bottom: var(--dialog-content-paddingBottom);\n  min-height: var(--dialog-content-minHeight);\n  line-height: var(--dialog-content-lineHeight);\n  color: var(--dialog-content-color);\n}\n\n.saltDialogContent-leftGutter {\n  padding-left: 32px;\n}\n";
+var css_248z = ".saltDialogContent {\n  color: var(--salt-text-primary-foreground);\n  padding-inline: var(--salt-spacing-300);\n  flex: 1 1 auto;\n  min-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  overflow-y: auto;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=DialogContent.css.js.map

package/dist-cjs/dialog/DialogContent.js

@@ -3,41 +3,32 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var core = require('@salt-ds/core');
-var clsx = require('clsx');
 var React = require('react');
-var DialogContext = require('./internal/DialogContext.js');
+var clsx = require('clsx');
+var core = require('@salt-ds/core');
 var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
 var DialogContent$1 = require('./DialogContent.css.js');
+var DialogContext = require('./DialogContext.js');
 
 const withBaseName = core.makePrefixer("saltDialogContent");
-const DialogContent = React.forwardRef(
-  function DialogContent2(props, ref) {
-    const targetWindow = window.useWindow();
-    styles.useComponentCssInjection({
-      testId: "salt-dialog-content",
-      css: DialogContent$1,
-      window: targetWindow
-    });
-    const { children, className, ...rest } = props;
-    const { status, dialogId, setContentElement } = React.useContext(DialogContext.DialogContext);
-    const handleRef = core.useForkRef(ref, setContentElement);
-    return /* @__PURE__ */ jsxRuntime.jsx("div", {
-      ...rest,
-      className: clsx.clsx(
-        withBaseName(),
-        {
-          [withBaseName("leftGutter")]: !!status
-        },
-        className
-      ),
-      id: `${dialogId}-body`,
-      ref: handleRef,
-      children
-    });
-  }
-);
+const DialogContent = React.forwardRef(function DialogContent2(props, ref) {
+  const { children, className, ...rest } = props;
+  const { dialogId } = DialogContext.useDialogContext();
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-dialog-content",
+    css: DialogContent$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    id: `${dialogId}-description`,
+    className: clsx.clsx(withBaseName(), className),
+    ...rest,
+    ref,
+    children
+  });
+});
 
 exports.DialogContent = DialogContent;
 //# sourceMappingURL=DialogContent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DialogContent.js","sources":["../src/dialog/DialogContent.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useContext } from \"react\";\nimport { DialogContext } from \"./internal/DialogContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport dialogContentCss from \"./DialogContent.css\";\n\nexport interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {}\n\nconst withBaseName = makePrefixer(\"saltDialogContent\");\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n  function DialogContent(props, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-content\",\n      css: dialogContentCss,\n      window: targetWindow,\n    });\n\n    const { children, className, ...rest } = props;\n    const { status, dialogId, setContentElement } = useContext(DialogContext);\n\n    const handleRef = useForkRef(ref, setContentElement);\n\n    return (\n      <div\n        {...rest}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"leftGutter\")]: !!status,\n          },\n          className\n        )}\n        id={`${dialogId}-body`}\n        ref={handleRef}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","DialogContent","useWindow","useComponentCssInjection","dialogContentCss","useContext","DialogContext","useForkRef","jsx","clsx"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,eAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACzC,IAAA,MAAM,EAAE,MAAQ,EAAA,QAAA,EAAU,iBAAkB,EAAA,GAAIC,iBAAWC,2BAAa,CAAA,CAAA;AAExE,IAAM,MAAA,SAAA,GAAYC,eAAW,CAAA,GAAA,EAAK,iBAAiB,CAAA,CAAA;AAEnD,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,CAAC,CAAC,MAAA;AAAA,SAClC;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,IAAI,CAAG,EAAA,QAAA,CAAA,KAAA,CAAA;AAAA,MACP,GAAK,EAAA,SAAA;AAAA,MAEJ,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"DialogContent.js","sources":["../src/dialog/DialogContent.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport dialogContentCss from \"./DialogContent.css\";\nimport { useDialogContext } from \"./DialogContext\";\n\nconst withBaseName = makePrefixer(\"saltDialogContent\");\n\nexport const DialogContent = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement>\n>(function DialogContent(props, ref) {\n  const { children, className, ...rest } = props;\n  const { dialogId } = useDialogContext();\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dialog-content\",\n    css: dialogContentCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      id={`${dialogId!}-description`}\n      className={clsx(withBaseName(), className)}\n      {...rest}\n      ref={ref}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","DialogContent","useDialogContext","useWindow","useComponentCssInjection","dialogContentCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAAC,gBAAA,CAG3B,SAASC,cAAAA,CAAc,OAAO,GAAK,EAAA;AACnC,EAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACzC,EAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,8BAAiB,EAAA,CAAA;AAEtC,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,IAAI,CAAG,EAAA,QAAA,CAAA,YAAA,CAAA;AAAA,IACP,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACxC,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,IAEC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/dialog/{internal/DialogContext.js → DialogContext.js}

@@ -5,6 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 
 const DialogContext = React.createContext({});
+const useDialogContext = () => {
+  return React.useContext(DialogContext);
+};
 
 exports.DialogContext = DialogContext;
+exports.useDialogContext = useDialogContext;
 //# sourceMappingURL=DialogContext.js.map

package/dist-cjs/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 \"@salt-ds/core\";\n\nexport const DialogContext = createContext<{\n  dialogId?: string;\n  status?: ValidationStatus;\n}>({});\n\nexport const useDialogContext = () => {\n  return useContext(DialogContext);\n};\n"],"names":["createContext","useContext"],"mappings":";;;;;;AAGa,MAAA,aAAA,GAAgBA,mBAG1B,CAAA,EAAE,EAAA;AAEE,MAAM,mBAAmB,MAAM;AACpC,EAAA,OAAOC,iBAAW,aAAa,CAAA,CAAA;AACjC;;;;;"}

package/dist-cjs/dialog/DialogTitle.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltDialogTitle {\n  --dialog-closeButton-padding: var(--saltDialog-closeButton-padding, var(--salt-size-unit));\n  --dialog-closeButton-offset: var(--saltDialog-closeButton-offset, calc(var(--dialog-padding) * -1));\n\n  --dialog-title-icon-marginRight: var(--saltDialog-title-icon-marginRight, var(--salt-spacing-100));\n}\n\n.saltDialogTitle {\n  display: flex;\n  flex: 0 0 auto;\n  min-height: 16px;\n  position: relative;\n  margin: 0;\n}\n\n.saltDialogTitle-close {\n  position: absolute;\n  padding-top: var(--dialog-closeButton-padding);\n  padding-bottom: var(--dialog-closeButton-padding);\n  right: var(--dialog-closeButton-offset);\n  top: var(--dialog-closeButton-offset);\n}\n\n.saltDialogTitle .saltDialogTitle-statusIndicator {\n  min-height: var(--salt-text-h1-lineHeight);\n  margin-right: var(--dialog-title-icon-marginRight);\n}\n\n.saltDialogTitle-text {\n  margin: 0;\n}\n";
+var css_248z = "/* Styles applied to the root element */\n.saltDialogTitle {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  padding-bottom: var(--salt-spacing-100);\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n  margin: 0;\n}\n\n/* Styles applied to the status indicator icon overriding its default size */\n.saltDialogTitle .saltStatusIndicator.saltIcon {\n  --icon-size: var(--salt-text-h2-lineHeight);\n}\n\n/* Styles applied to DialogTitle when accent={true} */\n.saltDialogTitle-withAccent {\n  position: relative;\n}\n\n.saltDialogTitle-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.saltDialogTitle-error::before {\n  background: var(--salt-status-error-borderColor);\n}\n\n.saltDialogTitle-info::before {\n  background: var(--salt-status-info-borderColor);\n}\n\n.saltDialogTitle-success::before {\n  background: var(--salt-status-success-borderColor);\n}\n\n.saltDialogTitle-warning::before {\n  background: var(--salt-status-warning-borderColor);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=DialogTitle.css.js.map

package/dist-cjs/dialog/DialogTitle.js

@@ -3,53 +3,52 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var core = require('@salt-ds/core');
-var icons = require('@salt-ds/icons');
 var clsx = require('clsx');
-var React = require('react');
-var DialogContext = require('./internal/DialogContext.js');
+var core = require('@salt-ds/core');
+var DialogContext = require('./DialogContext.js');
 var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
 var DialogTitle$1 = require('./DialogTitle.css.js');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
+
 const withBaseName = core.makePrefixer("saltDialogTitle");
-const DialogTitle = React.forwardRef(
-  function DialogTitle2(props, ref) {
-    const targetWindow = window.useWindow();
-    styles.useComponentCssInjection({
-      testId: "salt-dialog-title",
-      css: DialogTitle$1,
-      window: targetWindow
-    });
-    const { children, className, onClose, ...rest } = props;
-    const { status, dialogId } = React.useContext(DialogContext.DialogContext);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: clsx.clsx(withBaseName(), className),
-      ref,
-      ...rest,
-      children: [
-        onClose && /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
-          className: withBaseName("close"),
-          onClick: onClose,
-          variant: "secondary",
-          children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {
-            "aria-label": "close dialog",
-            className: withBaseName("closeIcon")
-          })
-        }),
-        status && /* @__PURE__ */ jsxRuntime.jsx(core.StatusIndicator, {
-          className: withBaseName("statusIndicator"),
-          status
-        }),
-        /* @__PURE__ */ jsxRuntime.jsx(core.H1, {
-          id: `${dialogId}-heading`,
-          className: withBaseName("text"),
-          children
-        })
-      ]
-    });
-  }
-);
+const DialogTitle = ({
+  children,
+  className,
+  accent,
+  status: statusProp,
+  ...rest
+}) => {
+  const { dialogId, status: statusContext } = DialogContext.useDialogContext();
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-dialog-title",
+    css: DialogTitle$1,
+    window: targetWindow
+  });
+  const status = statusProp || statusContext;
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.H2, {
+    id: `${dialogId}-heading`,
+    className: clsx__default["default"](
+      withBaseName(),
+      {
+        [withBaseName("withAccent")]: accent && !status,
+        [withBaseName(status)]: !!status
+      },
+      className
+    ),
+    ...rest,
+    children: [
+      status && /* @__PURE__ */ jsxRuntime.jsx(core.StatusIndicator, {
+        status
+      }),
+      children
+    ]
+  });
+};
 
 exports.DialogTitle = DialogTitle;
 //# sourceMappingURL=DialogTitle.js.map

package/dist-cjs/dialog/DialogTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogTitle.js","sources":["../src/dialog/DialogTitle.tsx"],"sourcesContent":["import { Button, H1, makePrefixer, StatusIndicator } from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, SyntheticEvent, useContext } from \"react\";\nimport { DialogContext } from \"./internal/DialogContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport dialogTitleCss from \"./DialogTitle.css\";\n\nexport interface DialogTitleProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Disable the built-in ARIA heading attributes.\n   */\n  disableAria?: boolean;\n  onClose?: (event: SyntheticEvent) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltDialogTitle\");\n\nexport const DialogTitle = forwardRef<HTMLDivElement, DialogTitleProps>(\n  function DialogTitle(props, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-title\",\n      css: dialogTitleCss,\n      window: targetWindow,\n    });\n\n    const { children, className, onClose, ...rest } = props;\n    const { status, dialogId } = useContext(DialogContext);\n\n    return (\n      <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n        {onClose && (\n          <Button\n            className={withBaseName(\"close\")}\n            onClick={onClose}\n            variant=\"secondary\"\n          >\n            <CloseIcon\n              aria-label=\"close dialog\"\n              className={withBaseName(\"closeIcon\")}\n            />\n          </Button>\n        )}\n        {status && (\n          <StatusIndicator\n            className={withBaseName(\"statusIndicator\")}\n            status={status}\n          />\n        )}\n        <H1 id={`${dialogId}-heading`} className={withBaseName(\"text\")}>\n          {children}\n        </H1>\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","DialogTitle","useWindow","useComponentCssInjection","dialogTitleCss","useContext","DialogContext","jsxs","clsx","jsx","Button","CloseIcon","StatusIndicator","H1"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA,CAAA;AAE5C,MAAM,WAAc,GAAAC,gBAAA;AAAA,EACzB,SAASC,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,OAAA,EAAA,GAAY,MAAS,GAAA,KAAA,CAAA;AAClD,IAAA,MAAM,EAAE,MAAA,EAAQ,QAAS,EAAA,GAAIC,iBAAWC,2BAAa,CAAA,CAAA;AAErD,IAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAAW,GAAG,IAAA;AAAA,MAC5D,QAAA,EAAA;AAAA,QAAA,OAAA,oBACEC,cAAA,CAAAC,WAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,OAAS,EAAA,OAAA;AAAA,UACT,OAAQ,EAAA,WAAA;AAAA,UAER,QAAC,kBAAAD,cAAA,CAAAE,eAAA,EAAA;AAAA,YACC,YAAW,EAAA,cAAA;AAAA,YACX,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,WACrC,CAAA;AAAA,SACF,CAAA;AAAA,QAED,0BACEF,cAAA,CAAAG,oBAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,UACzC,MAAA;AAAA,SACF,CAAA;AAAA,wBAEDH,cAAA,CAAAI,OAAA,EAAA;AAAA,UAAG,IAAI,CAAG,EAAA,QAAA,CAAA,QAAA,CAAA;AAAA,UAAoB,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,UAC1D,QAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"DialogTitle.js","sources":["../src/dialog/DialogTitle.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef } from \"react\";\nimport clsx from \"clsx\";\nimport {\n  H2,\n  StatusIndicator,\n  ValidationStatus,\n  makePrefixer,\n} from \"@salt-ds/core\";\nimport { useDialogContext } from \"./DialogContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport dialogTitleCss from \"./DialogTitle.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogTitle\");\n\ninterface DialogTitleProps extends ComponentPropsWithoutRef<\"h2\"> {\n  status?: ValidationStatus;\n  accent?: boolean;\n}\n\nexport const DialogTitle = ({\n  children,\n  className,\n  accent,\n  status: statusProp,\n  ...rest\n}: DialogTitleProps) => {\n  const { dialogId, status: statusContext } = useDialogContext();\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dialog-title\",\n    css: dialogTitleCss,\n    window: targetWindow,\n  });\n\n  const status = statusProp || statusContext;\n\n  return (\n    <H2\n      id={`${dialogId!}-heading`}\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"withAccent\")]: accent && !status,\n          [withBaseName(status!)]: !!status,\n        },\n        className\n      )}\n      {...rest}\n    >\n      {status && <StatusIndicator status={status} />}\n      {children}\n    </H2>\n  );\n};\n"],"names":["makePrefixer","useDialogContext","useWindow","useComponentCssInjection","dialogTitleCss","jsxs","H2","clsx","jsx","StatusIndicator"],"mappings":";;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA,CAAA;AAO5C,MAAM,cAAc,CAAC;AAAA,EAC1B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAQ,EAAA,UAAA;AAAA,EACL,GAAA,IAAA;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,EAAE,QAAA,EAAU,MAAQ,EAAA,aAAA,KAAkBC,8BAAiB,EAAA,CAAA;AAC7D,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,SAAS,UAAc,IAAA,aAAA,CAAA;AAE7B,EAAA,uBACGC,eAAA,CAAAC,OAAA,EAAA;AAAA,IACC,IAAI,CAAG,EAAA,QAAA,CAAA,QAAA,CAAA;AAAA,IACP,SAAW,EAAAC,wBAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,UAAU,CAAC,MAAA;AAAA,QACzC,CAAC,YAAA,CAAa,MAAO,CAAA,GAAI,CAAC,CAAC,MAAA;AAAA,OAC7B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,MAAA,oBAAWC,cAAA,CAAAC,oBAAA,EAAA;AAAA,QAAgB,MAAA;AAAA,OAAgB,CAAA;AAAA,MAC3C,QAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}