@salt-ds/core 1.69.0 → 1.71.0

package/dist-es/drawer/Drawer.js

@@ -3,15 +3,17 @@ import { useInteractions, useClick, useDismiss } from '@floating-ui/react';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
-import { forwardRef, useState, useEffect } from 'react';
+import { forwardRef, useState, useEffect, useMemo } from 'react';
 import { Scrim } from '../scrim/Scrim.js';
 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 { useId } from '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
 import css_248z from './Drawer.css.js';
+import { DrawerContext } from './DrawerContext.js';
+import { hasDrawerSection } from './hasDrawerSection.js';
 
 const ConditionalScrimWrapper = ({
   condition,
@@ -40,6 +42,9 @@ const Drawer = forwardRef(
       disableDismiss,
       disableScrim,
       initialFocus,
+      id,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
       ...rest
     } = props;
     const targetWindow = useWindow();
@@ -48,7 +53,13 @@ const Drawer = forwardRef(
       css: css_248z,
       window: targetWindow
     });
+    const drawerId = useId(id);
+    const sectioned = hasDrawerSection(children);
     const [showComponent, setShowComponent] = useState(false);
+    const [headerId, setHeaderId] = useState(void 0);
+    const [descriptionId, setDescriptionId] = useState(
+      void 0
+    );
     const { Component: FloatingComponent } = useFloatingComponent();
     const { context, floating, elements } = useFloatingUI({
       open: showComponent,
@@ -56,7 +67,7 @@ const Drawer = forwardRef(
     });
     const { getFloatingProps } = useInteractions([
       useClick(context),
-      useDismiss(context, { enabled: !disableDismiss })
+      useDismiss(context, { outsidePress: !disableDismiss })
     ]);
     const handleRef = useForkRef(floating, ref);
     useEffect(() => {
@@ -70,15 +81,28 @@ const Drawer = forwardRef(
         return () => clearTimeout(animate);
       }
     }, [open, showComponent]);
-    return /* @__PURE__ */ jsx(ConditionalScrimWrapper, { condition: showComponent && !disableScrim, children: /* @__PURE__ */ jsx(
+    const contextValue = useMemo(
+      () => ({
+        drawerId,
+        headerId,
+        setHeaderId,
+        descriptionId,
+        setDescriptionId
+      }),
+      [drawerId, headerId, descriptionId]
+    );
+    return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(ConditionalScrimWrapper, { condition: showComponent && !disableScrim, children: /* @__PURE__ */ jsx(
       FloatingComponent,
       {
+        id: drawerId,
         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",
+        "aria-labelledby": clsx(ariaLabelledBy, headerId) || void 0,
+        "aria-describedby": clsx(ariaDescribedBy, descriptionId) || void 0,
         focusManagerProps: {
           context,
           initialFocus,
@@ -90,7 +114,8 @@ const Drawer = forwardRef(
           {
             [withBaseName("enterAnimation")]: open,
             [withBaseName("exitAnimation")]: !open,
-            [withBaseName(variant)]: variant
+            [withBaseName(variant)]: variant,
+            [withBaseName("sectioned")]: sectioned
           },
           className
         ),
@@ -98,7 +123,7 @@ const Drawer = forwardRef(
         ...rest,
         children
       }
-    ) });
+    ) }) });
   }
 );
 

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.tsx"],"sourcesContent":["import {\n  type FloatingFocusManager,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type PropsWithChildren,\n  useEffect,\n  useState,\n} from \"react\";\nimport { Scrim } from \"../scrim\";\nimport {\n  makePrefixer,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n} from \"../utils\";\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\" | \"tertiary\";\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   * 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?: ComponentPropsWithoutRef<\n    typeof FloatingFocusManager\n  >[\"initialFocus\"];\n}\n\nconst withBaseName = makePrefixer(\"saltDrawer\");\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n  function Drawer(props, ref) {\n    const {\n      children,\n      className,\n      position = \"left\",\n      open = false,\n      onOpenChange,\n      variant = \"primary\",\n      disableDismiss,\n      disableScrim,\n      initialFocus,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-drawer\",\n      css: drawerCss,\n      window: targetWindow,\n    });\n\n    const [showComponent, setShowComponent] = useState(false);\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const { context, floating, elements } = useFloatingUI({\n      open: showComponent,\n      onOpenChange,\n    });\n\n    const { getFloatingProps } = useInteractions([\n      useClick(context),\n      useDismiss(context, { enabled: !disableDismiss }),\n    ]);\n\n    const handleRef = useForkRef<HTMLDivElement>(floating, ref);\n\n    useEffect(() => {\n      if (open && !showComponent) {\n        setShowComponent(true);\n      }\n\n      if (!open && showComponent) {\n        const animate = setTimeout(() => {\n          setShowComponent(false);\n        }, 300); // var(--salt-duration-perceptible)\n        return () => clearTimeout(animate);\n      }\n    }, [open, showComponent]);\n\n    return (\n      <ConditionalScrimWrapper condition={showComponent && !disableScrim}>\n        <FloatingComponent\n          open={showComponent}\n          ref={handleRef}\n          role={\"dialog\"}\n          width={elements.floating?.offsetWidth}\n          height={elements.floating?.offsetHeight}\n          aria-modal=\"true\"\n          focusManagerProps={{\n            context: context,\n            initialFocus,\n            outsideElementsInert: true,\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);\n"],"names":["Drawer","drawerCss"],"mappings":"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"}
+{"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.tsx"],"sourcesContent":["import {\n  type FloatingFocusManager,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type PropsWithChildren,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { Scrim } from \"../scrim\";\nimport {\n  makePrefixer,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n  useId,\n} from \"../utils\";\nimport drawerCss from \"./Drawer.css\";\nimport { DrawerContext } from \"./DrawerContext\";\nimport { hasDrawerSection } from \"./hasDrawerSection\";\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\" | \"tertiary\";\n  /**\n   * Prevent the drawer closing on click away\n   * */\n  disableDismiss?: boolean;\n  /**\n   * Prevent Scrim from rendering\n   * */\n  disableScrim?: boolean;\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?: ComponentPropsWithoutRef<\n    typeof FloatingFocusManager\n  >[\"initialFocus\"];\n}\n\nconst withBaseName = makePrefixer(\"saltDrawer\");\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n  function Drawer(props, ref) {\n    const {\n      children,\n      className,\n      position = \"left\",\n      open = false,\n      onOpenChange,\n      variant = \"primary\",\n      disableDismiss,\n      disableScrim,\n      initialFocus,\n      id,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\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 drawerId = useId(id);\n\n    const sectioned = hasDrawerSection(children);\n\n    const [showComponent, setShowComponent] = useState(false);\n    const [headerId, setHeaderId] = useState<string | undefined>(undefined);\n    const [descriptionId, setDescriptionId] = useState<string | undefined>(\n      undefined,\n    );\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const { context, floating, elements } = useFloatingUI({\n      open: showComponent,\n      onOpenChange,\n    });\n\n    const { getFloatingProps } = useInteractions([\n      useClick(context),\n      useDismiss(context, { outsidePress: !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]);\n\n    const contextValue = useMemo(\n      () => ({\n        drawerId,\n        headerId,\n        setHeaderId,\n        descriptionId,\n        setDescriptionId,\n      }),\n      [drawerId, headerId, descriptionId],\n    );\n\n    return (\n      <DrawerContext.Provider value={contextValue}>\n        <ConditionalScrimWrapper condition={showComponent && !disableScrim}>\n          <FloatingComponent\n            id={drawerId}\n            open={showComponent}\n            ref={handleRef}\n            role={\"dialog\"}\n            width={elements.floating?.offsetWidth}\n            height={elements.floating?.offsetHeight}\n            aria-modal=\"true\"\n            aria-labelledby={clsx(ariaLabelledBy, headerId) || undefined}\n            aria-describedby={clsx(ariaDescribedBy, descriptionId) || undefined}\n            focusManagerProps={{\n              context: context,\n              initialFocus,\n              outsideElementsInert: true,\n            }}\n            className={clsx(\n              withBaseName(),\n              withBaseName(position),\n              {\n                [withBaseName(\"enterAnimation\")]: open,\n                [withBaseName(\"exitAnimation\")]: !open,\n                [withBaseName(variant)]: variant,\n                [withBaseName(\"sectioned\")]: sectioned,\n              },\n              className,\n            )}\n            {...getFloatingProps()}\n            {...rest}\n          >\n            {children}\n          </FloatingComponent>\n        </ConditionalScrimWrapper>\n      </DrawerContext.Provider>\n    );\n  },\n);\n"],"names":["Drawer","drawerCss"],"mappings":"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"}

package/dist-es/drawer/DrawerCloseButton.js

@@ -26,7 +26,7 @@ const DrawerCloseButton = forwardRef(
       Button,
       {
         ref,
-        "aria-label": "Close Drawer",
+        "aria-label": "Close drawer",
         appearance: "transparent",
         className: clsx(withBaseName(), className),
         ...rest,

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerCloseButton.js","sources":["../src/drawer/DrawerCloseButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { Button, type ButtonProps } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\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    const { CloseIcon } = useIcon();\n\n    return (\n      <div className={withBaseName(\"container\")}>\n        <Button\n          ref={ref}\n          aria-label=\"Close Drawer\"\n          appearance=\"transparent\"\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;AAElD,MAAM,iBAAA,GAAoB,UAAA;AAAA,EAC/B,SAASA,kBAAAA,CAAkB,EAAE,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AACtD,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,0BAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AACD,IAAA,MAAM,EAAE,SAAA,EAAU,GAAI,OAAA,EAAQ;AAE9B,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,WAAW,CAAA,EACtC,QAAA,kBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,YAAA,EAAW,cAAA;AAAA,QACX,UAAA,EAAW,aAAA;AAAA,QACX,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA,KACzB,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"DrawerCloseButton.js","sources":["../src/drawer/DrawerCloseButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { Button, type ButtonProps } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\n\nimport drawerCloseButtonCss from \"./DrawerCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltDrawerCloseButton\");\n\n/**\n * @deprecated since 1.71.0. Use `Button` in `DrawerHeader`'s `actions` instead.\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    const { CloseIcon } = useIcon();\n\n    return (\n      <div className={withBaseName(\"container\")}>\n        <Button\n          ref={ref}\n          aria-label=\"Close drawer\"\n          appearance=\"transparent\"\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;AAKlD,MAAM,iBAAA,GAAoB,UAAA;AAAA,EAC/B,SAASA,kBAAAA,CAAkB,EAAE,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AACtD,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,0BAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AACD,IAAA,MAAM,EAAE,SAAA,EAAU,GAAI,OAAA,EAAQ;AAE9B,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,WAAW,CAAA,EACtC,QAAA,kBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,YAAA,EAAW,cAAA;AAAA,QACX,UAAA,EAAW,aAAA;AAAA,QACX,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA,KACzB,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}

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

@@ -0,0 +1,4 @@
+var css_248z = ".saltDrawerContent {\n  color: var(--salt-content-primary-foreground);\n  padding: 0 var(--salt-spacing-300);\n  flex: 1 1 auto;\n  min-height: var(--salt-text-lineHeight);\n  display: flex;\n  box-sizing: border-box;\n}\n\n.saltDrawerContent:first-child {\n  padding-top: var(--salt-spacing-300);\n}\n\n.saltDrawerContent:last-child {\n  padding-bottom: var(--salt-spacing-300);\n}\n\n.saltDrawerContent-inner {\n  flex: 1;\n  min-width: 0;\n  overflow-y: auto;\n  border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n  box-sizing: border-box;\n}\n\n.saltDrawerContent-inner:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n}\n\n.saltDrawerContent-inner.saltDrawerContent-scrollTop {\n  border-top-color: var(--salt-separable-tertiary-borderColor);\n}\n\n.saltDrawerContent-inner.saltDrawerContent-scrollBottom {\n  border-bottom-color: var(--salt-separable-tertiary-borderColor);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=DrawerContent.css.js.map

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

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

package/dist-es/drawer/DrawerContent.js

@@ -0,0 +1,73 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useRef, useState, useCallback } from 'react';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import { useResizeObserver } from '../utils/useResizeObserver.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import css_248z from './DrawerContent.css.js';
+import { useDrawerContext } from './DrawerContext.js';
+
+const withBaseName = makePrefixer("saltDrawerContent");
+const DrawerContent = forwardRef(
+  function DrawerContent2(props, ref) {
+    const { children, className, onScroll, onScrollCapture, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-drawer-content",
+      css: css_248z,
+      window: targetWindow
+    });
+    const { drawerId, headerId } = useDrawerContext();
+    const scrollRef = useRef(null);
+    const [isOverflowing, setIsOverflowing] = useState(false);
+    const [canScrollUp, setCanScrollUp] = useState(false);
+    const [canScrollDown, setCanScrollDown] = useState(false);
+    const readScrollPosition = useCallback(() => {
+      const container = scrollRef.current;
+      if (!container) return;
+      const overflowingY = container.scrollHeight > container.clientHeight;
+      setIsOverflowing(
+        overflowingY || container.scrollWidth > container.clientWidth
+      );
+      setCanScrollUp(overflowingY && container.scrollTop > 0);
+      setCanScrollDown(
+        overflowingY && container.scrollHeight - container.scrollTop - container.clientHeight > 1
+      );
+    }, []);
+    const handleScrollCapture = (event) => {
+      targetWindow == null ? void 0 : targetWindow.requestAnimationFrame(readScrollPosition);
+      onScrollCapture == null ? void 0 : onScrollCapture(event);
+    };
+    useResizeObserver({ ref: scrollRef, onResize: readScrollPosition });
+    useIsomorphicLayoutEffect(() => {
+      readScrollPosition();
+    }, [readScrollPosition]);
+    return /* @__PURE__ */ jsx("div", { ref, className: clsx(withBaseName(), className), ...rest, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrollRef,
+        className: clsx(withBaseName("inner"), {
+          [withBaseName("scrollTop")]: canScrollUp,
+          [withBaseName("scrollBottom")]: canScrollDown
+        }),
+        onScroll,
+        onScrollCapture: handleScrollCapture,
+        ...isOverflowing && {
+          tabIndex: 0,
+          role: "region",
+          "aria-labelledby": headerId ?? drawerId
+        },
+        children
+      }
+    ) });
+  }
+);
+
+export { DrawerContent };
+//# sourceMappingURL=DrawerContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerContent.js","sources":["../src/drawer/DrawerContent.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type UIEventHandler,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  makePrefixer,\n  useIsomorphicLayoutEffect,\n  useResizeObserver,\n} from \"../utils\";\nimport drawerContentCss from \"./DrawerContent.css\";\nimport { useDrawerContext } from \"./DrawerContext\";\n\nconst withBaseName = makePrefixer(\"saltDrawerContent\");\n\nexport type DrawerContentProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(\n  function DrawerContent(props, ref) {\n    const { children, className, onScroll, onScrollCapture, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-drawer-content\",\n      css: drawerContentCss,\n      window: targetWindow,\n    });\n\n    const { drawerId, headerId } = useDrawerContext();\n\n    const scrollRef = useRef<HTMLDivElement>(null);\n    const [isOverflowing, setIsOverflowing] = useState(false);\n    const [canScrollUp, setCanScrollUp] = useState(false);\n    const [canScrollDown, setCanScrollDown] = useState(false);\n\n    const readScrollPosition = useCallback(() => {\n      const container = scrollRef.current;\n      if (!container) return;\n\n      const overflowingY = container.scrollHeight > container.clientHeight;\n      setIsOverflowing(\n        overflowingY || container.scrollWidth > container.clientWidth,\n      );\n      setCanScrollUp(overflowingY && container.scrollTop > 0);\n      setCanScrollDown(\n        overflowingY &&\n          container.scrollHeight -\n            container.scrollTop -\n            container.clientHeight >\n            1,\n      );\n    }, []);\n\n    const handleScrollCapture: UIEventHandler<HTMLDivElement> = (event) => {\n      targetWindow?.requestAnimationFrame(readScrollPosition);\n      onScrollCapture?.(event);\n    };\n\n    useResizeObserver({ ref: scrollRef, onResize: readScrollPosition });\n\n    useIsomorphicLayoutEffect(() => {\n      readScrollPosition();\n    }, [readScrollPosition]);\n\n    return (\n      <div ref={ref} className={clsx(withBaseName(), className)} {...rest}>\n        <div\n          ref={scrollRef}\n          className={clsx(withBaseName(\"inner\"), {\n            [withBaseName(\"scrollTop\")]: canScrollUp,\n            [withBaseName(\"scrollBottom\")]: canScrollDown,\n          })}\n          onScroll={onScroll}\n          onScrollCapture={handleScrollCapture}\n          {...(isOverflowing && {\n            tabIndex: 0,\n            role: \"region\",\n            \"aria-labelledby\": headerId ?? drawerId,\n          })}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["DrawerContent","drawerContentCss"],"mappings":";;;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAI9C,MAAM,aAAA,GAAgB,UAAA;AAAA,EAC3B,SAASA,cAAAA,CAAc,KAAA,EAAO,GAAA,EAAK;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,UAAU,eAAA,EAAiB,GAAG,MAAK,GAAI,KAAA;AAEpE,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,qBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,QAAA,EAAS,GAAI,gBAAA,EAAiB;AAEhD,IAAA,MAAM,SAAA,GAAY,OAAuB,IAAI,CAAA;AAC7C,IAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA;AACxD,IAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA;AACpD,IAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA;AAExD,IAAA,MAAM,kBAAA,GAAqB,YAAY,MAAM;AAC3C,MAAA,MAAM,YAAY,SAAA,CAAU,OAAA;AAC5B,MAAA,IAAI,CAAC,SAAA,EAAW;AAEhB,MAAA,MAAM,YAAA,GAAe,SAAA,CAAU,YAAA,GAAe,SAAA,CAAU,YAAA;AACxD,MAAA,gBAAA;AAAA,QACE,YAAA,IAAgB,SAAA,CAAU,WAAA,GAAc,SAAA,CAAU;AAAA,OACpD;AACA,MAAA,cAAA,CAAe,YAAA,IAAgB,SAAA,CAAU,SAAA,GAAY,CAAC,CAAA;AACtD,MAAA,gBAAA;AAAA,QACE,gBACE,SAAA,CAAU,YAAA,GACR,SAAA,CAAU,SAAA,GACV,UAAU,YAAA,GACV;AAAA,OACN;AAAA,IACF,CAAA,EAAG,EAAE,CAAA;AAEL,IAAA,MAAM,mBAAA,GAAsD,CAAC,KAAA,KAAU;AACrE,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,qBAAA,CAAsB,kBAAA,CAAA;AACpC,MAAA,eAAA,IAAA,IAAA,GAAA,MAAA,GAAA,eAAA,CAAkB,KAAA,CAAA;AAAA,IACpB,CAAA;AAEA,IAAA,iBAAA,CAAkB,EAAE,GAAA,EAAK,SAAA,EAAW,QAAA,EAAU,oBAAoB,CAAA;AAElE,IAAA,yBAAA,CAA0B,MAAM;AAC9B,MAAA,kBAAA,EAAmB;AAAA,IACrB,CAAA,EAAG,CAAC,kBAAkB,CAAC,CAAA;AAEvB,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,SAAA,EAAW,IAAA,CAAK,cAAa,EAAG,SAAS,CAAA,EAAI,GAAG,IAAA,EAC7D,QAAA,kBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,SAAA;AAAA,QACL,SAAA,EAAW,IAAA,CAAK,YAAA,CAAa,OAAO,CAAA,EAAG;AAAA,UACrC,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,WAAA;AAAA,UAC7B,CAAC,YAAA,CAAa,cAAc,CAAC,GAAG;AAAA,SACjC,CAAA;AAAA,QACD,QAAA;AAAA,QACA,eAAA,EAAiB,mBAAA;AAAA,QAChB,GAAI,aAAA,IAAiB;AAAA,UACpB,QAAA,EAAU,CAAA;AAAA,UACV,IAAA,EAAM,QAAA;AAAA,UACN,mBAAmB,QAAA,IAAY;AAAA,SACjC;AAAA,QAEC;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}

package/dist-es/drawer/DrawerContext.js

@@ -0,0 +1,27 @@
+import { useContext } from 'react';
+import { createContext } from '../utils/createContext.js';
+import 'clsx';
+import 'react/jsx-runtime';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+
+const DrawerContext = createContext(
+  "DrawerContext",
+  {
+    drawerId: void 0,
+    headerId: void 0,
+    setHeaderId: () => {
+    },
+    descriptionId: void 0,
+    setDescriptionId: () => {
+    }
+  }
+);
+const useDrawerContext = () => {
+  return useContext(DrawerContext);
+};
+
+export { DrawerContext, useDrawerContext };
+//# sourceMappingURL=DrawerContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerContext.js","sources":["../src/drawer/DrawerContext.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport interface DrawerContextValue {\n  drawerId?: string;\n  headerId?: string;\n  setHeaderId?: (id: string | undefined) => void;\n  descriptionId?: string;\n  setDescriptionId?: (id: string | undefined) => void;\n}\n\nexport const DrawerContext = createContext<DrawerContextValue>(\n  \"DrawerContext\",\n  {\n    drawerId: undefined,\n    headerId: undefined,\n    setHeaderId: () => {},\n    descriptionId: undefined,\n    setDescriptionId: () => {},\n  },\n);\n\nexport const useDrawerContext = () => {\n  return useContext(DrawerContext);\n};\n"],"names":[],"mappings":";;;;;;;;;AAWO,MAAM,aAAA,GAAgB,aAAA;AAAA,EAC3B,eAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU,MAAA;AAAA,IACV,QAAA,EAAU,MAAA;AAAA,IACV,aAAa,MAAM;AAAA,IAAC,CAAA;AAAA,IACpB,aAAA,EAAe,MAAA;AAAA,IACf,kBAAkB,MAAM;AAAA,IAAC;AAAA;AAE7B;AAEO,MAAM,mBAAmB,MAAM;AACpC,EAAA,OAAO,WAAW,aAAa,CAAA;AACjC;;;;"}

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

@@ -0,0 +1,4 @@
+var css_248z = ".saltDrawerFooter {\n  padding: var(--salt-spacing-300);\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: var(--salt-spacing-100);\n  flex-shrink: 0;\n  box-sizing: border-box;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=DrawerFooter.css.js.map

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

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

package/dist-es/drawer/DrawerFooter.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from '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 css_248z from './DrawerFooter.css.js';
+
+const withBaseName = makePrefixer("saltDrawerFooter");
+const DrawerFooter = forwardRef(
+  function DrawerFooter2(props, ref) {
+    const { className, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-drawer-footer",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx("div", { className: clsx(withBaseName(), className), ref, ...rest });
+  }
+);
+
+export { DrawerFooter };
+//# sourceMappingURL=DrawerFooter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerFooter.js","sources":["../src/drawer/DrawerFooter.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport drawerFooterCss from \"./DrawerFooter.css\";\n\nconst withBaseName = makePrefixer(\"saltDrawerFooter\");\n\nexport type DrawerFooterProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const DrawerFooter = forwardRef<HTMLDivElement, DrawerFooterProps>(\n  function DrawerFooter(props, ref) {\n    const { className, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-drawer-footer\",\n      css: drawerFooterCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div className={clsx(withBaseName(), className)} ref={ref} {...rest} />\n    );\n  },\n);\n"],"names":["DrawerFooter","drawerFooterCss"],"mappings":";;;;;;;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAI7C,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,SAASA,aAAAA,CAAa,KAAA,EAAO,GAAA,EAAK;AAChC,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAE/B,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,oBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,YAAA,IAAgB,SAAS,CAAA,EAAG,GAAA,EAAW,GAAG,IAAA,EAAM,CAAA;AAAA,EAEzE;AACF;;;;"}

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

@@ -0,0 +1,4 @@
+var css_248z = ".saltDrawerHeader {\n  padding: var(--salt-spacing-300);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  flex-shrink: 0;\n  box-sizing: border-box;\n}\n\n.saltDrawerHeader-header {\n  margin: 0;\n}\n\n.saltDrawerHeader-container {\n  flex-grow: 1;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-50);\n  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);\n  align-items: flex-start;\n  min-width: 0;\n  word-break: break-word;\n}\n\n.saltDrawerHeader-header > .saltText {\n  display: block;\n  margin: 0;\n}\n\n.saltDrawerHeader-actionsContainer {\n  align-self: flex-start;\n  display: flex;\n}\n\n.saltDrawerHeader-withAccent {\n  position: relative;\n}\n\n.saltDrawerHeader-withAccent::before {\n  content: \"\";\n  position: absolute;\n  top: var(--salt-spacing-300);\n  bottom: var(--salt-spacing-300);\n  left: 0;\n  width: var(--salt-size-bar);\n  background: var(--salt-sentiment-accent-background);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=DrawerHeader.css.js.map

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

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

package/dist-es/drawer/DrawerHeader.js

@@ -0,0 +1,93 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import '../text/Code.js';
+import '../text/Display.js';
+import { H2 } from '../text/Headings.js';
+import '../text/Label.js';
+import { Text } from '../text/Text.js';
+import '../text/TextAction.js';
+import '../text/TextNotation.js';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import { useId } from '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { useDrawerContext } from './DrawerContext.js';
+import css_248z from './DrawerHeader.css.js';
+
+const withBaseName = makePrefixer("saltDrawerHeader");
+const DrawerHeader = forwardRef(
+  function DrawerHeader2(props, ref) {
+    const {
+      actions,
+      className,
+      description,
+      disableAccent,
+      header,
+      preheader,
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-drawer-header",
+      css: css_248z,
+      window: targetWindow
+    });
+    const { setHeaderId, setDescriptionId } = useDrawerContext();
+    const headingId = useId();
+    const descriptionId = useId();
+    const hasHeading = Boolean(header || preheader);
+    const hasDescription = Boolean(description);
+    useIsomorphicLayoutEffect(() => {
+      setHeaderId == null ? void 0 : setHeaderId(hasHeading ? headingId : void 0);
+      return () => {
+        setHeaderId == null ? void 0 : setHeaderId(void 0);
+      };
+    }, [hasHeading, headingId, setHeaderId]);
+    useIsomorphicLayoutEffect(() => {
+      setDescriptionId == null ? void 0 : setDescriptionId(hasDescription ? descriptionId : void 0);
+      return () => {
+        setDescriptionId == null ? void 0 : setDescriptionId(void 0);
+      };
+    }, [hasDescription, descriptionId, setDescriptionId]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(
+          withBaseName(),
+          {
+            [withBaseName("withAccent")]: !disableAccent
+          },
+          className
+        ),
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: withBaseName("container"), children: [
+            hasHeading && /* @__PURE__ */ jsxs(H2, { id: headingId, className: withBaseName("header"), children: [
+              preheader && /* @__PURE__ */ jsx(Text, { as: "span", color: "primary", children: preheader }),
+              header
+            ] }),
+            description && /* @__PURE__ */ jsx(
+              Text,
+              {
+                id: descriptionId,
+                color: "secondary",
+                className: withBaseName("description"),
+                children: description
+              }
+            )
+          ] }),
+          actions && /* @__PURE__ */ jsx("div", { className: withBaseName("actionsContainer"), children: actions })
+        ]
+      }
+    );
+  }
+);
+
+export { DrawerHeader };
+//# sourceMappingURL=DrawerHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerHeader.js","sources":["../src/drawer/DrawerHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer, useId, useIsomorphicLayoutEffect } from \"../utils\";\nimport { useDrawerContext } from \"./DrawerContext\";\nimport drawerHeaderCss from \"./DrawerHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltDrawerHeader\");\n\nexport interface DrawerHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Hides the accent bar in the Drawer Header. Defaults to `false`.\n   */\n  disableAccent?: boolean;\n  /**\n   * Displays the header at the top of the Drawer\n   */\n  header?: ReactNode;\n  /**\n   * Displays the preheader just above the header\n   **/\n  preheader?: ReactNode;\n  /**\n   * Description text is displayed just below the header\n   **/\n  description?: ReactNode;\n  /**\n   * Actions to be displayed in header\n   */\n  actions?: ReactNode;\n}\n\nexport const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(\n  function DrawerHeader(props, ref) {\n    const {\n      actions,\n      className,\n      description,\n      disableAccent,\n      header,\n      preheader,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-drawer-header\",\n      css: drawerHeaderCss,\n      window: targetWindow,\n    });\n\n    const { setHeaderId, setDescriptionId } = useDrawerContext();\n    const headingId = useId();\n    const descriptionId = useId();\n    const hasHeading = Boolean(header || preheader);\n    const hasDescription = Boolean(description);\n\n    useIsomorphicLayoutEffect(() => {\n      setHeaderId?.(hasHeading ? headingId : undefined);\n\n      return () => {\n        setHeaderId?.(undefined);\n      };\n    }, [hasHeading, headingId, setHeaderId]);\n\n    useIsomorphicLayoutEffect(() => {\n      setDescriptionId?.(hasDescription ? descriptionId : undefined);\n\n      return () => {\n        setDescriptionId?.(undefined);\n      };\n    }, [hasDescription, descriptionId, setDescriptionId]);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"withAccent\")]: !disableAccent,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <div className={withBaseName(\"container\")}>\n          {hasHeading && (\n            <H2 id={headingId} className={withBaseName(\"header\")}>\n              {preheader && (\n                <Text as=\"span\" color=\"primary\">\n                  {preheader}\n                </Text>\n              )}\n              {header}\n            </H2>\n          )}\n          {description && (\n            <Text\n              id={descriptionId}\n              color=\"secondary\"\n              className={withBaseName(\"description\")}\n            >\n              {description}\n            </Text>\n          )}\n        </div>\n        {actions && (\n          <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["DrawerHeader","drawerHeaderCss"],"mappings":"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"}

package/dist-es/drawer/hasDrawerSection.js

@@ -0,0 +1,20 @@
+import { Children, isValidElement, Fragment } from 'react';
+import { DrawerContent } from './DrawerContent.js';
+import { DrawerFooter } from './DrawerFooter.js';
+import { DrawerHeader } from './DrawerHeader.js';
+
+const drawerSectionTypes = [DrawerHeader, DrawerContent, DrawerFooter];
+function hasDrawerSection(children) {
+  return Children.toArray(children).some((child) => {
+    if (!isValidElement(child)) return false;
+    if (child.type === Fragment) {
+      return hasDrawerSection(
+        child.props.children
+      );
+    }
+    return drawerSectionTypes.some((sectionType) => child.type === sectionType);
+  });
+}
+
+export { hasDrawerSection };
+//# sourceMappingURL=hasDrawerSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hasDrawerSection.js","sources":["../src/drawer/hasDrawerSection.ts"],"sourcesContent":["import { Children, Fragment, isValidElement, type ReactNode } from \"react\";\nimport { DrawerContent } from \"./DrawerContent\";\nimport { DrawerFooter } from \"./DrawerFooter\";\nimport { DrawerHeader } from \"./DrawerHeader\";\n\nconst drawerSectionTypes = [DrawerHeader, DrawerContent, DrawerFooter];\n\nexport function hasDrawerSection(children: ReactNode): boolean {\n  return Children.toArray(children).some((child) => {\n    if (!isValidElement(child)) return false;\n\n    if (child.type === Fragment) {\n      return hasDrawerSection(\n        (child.props as { children?: ReactNode }).children,\n      );\n    }\n\n    return drawerSectionTypes.some((sectionType) => child.type === sectionType);\n  });\n}\n"],"names":[],"mappings":";;;;;AAKA,MAAM,kBAAA,GAAqB,CAAC,YAAA,EAAc,aAAA,EAAe,YAAY,CAAA;AAE9D,SAAS,iBAAiB,QAAA,EAA8B;AAC7D,EAAA,OAAO,SAAS,OAAA,CAAQ,QAAQ,CAAA,CAAE,IAAA,CAAK,CAAC,KAAA,KAAU;AAChD,IAAA,IAAI,CAAC,cAAA,CAAe,KAAK,CAAA,EAAG,OAAO,KAAA;AAEnC,IAAA,IAAI,KAAA,CAAM,SAAS,QAAA,EAAU;AAC3B,MAAA,OAAO,gBAAA;AAAA,QACJ,MAAM,KAAA,CAAmC;AAAA,OAC5C;AAAA,IACF;AAEA,IAAA,OAAO,mBAAmB,IAAA,CAAK,CAAC,WAAA,KAAgB,KAAA,CAAM,SAAS,WAAW,CAAA;AAAA,EAC5E,CAAC,CAAA;AACH;;;;"}

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

@@ -1,4 +1,4 @@
-var css_248z = ".saltFormField {\n  display: inline-grid;\n  position: relative;\n  gap: var(--salt-spacing-100);\n  text-align: left;\n  width: var(--saltFormField-width, 100%);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltFormField-labelTop {\n  gap: var(--salt-spacing-75);\n  grid-auto-rows: min-content;\n  grid-template-areas:\n    \"label\"\n    \"controls\";\n}\n\n.saltFormField-labelTop .saltFormFieldHelperText {\n  grid-area: 3 / 1;\n}\n\n.saltFormField-labelLeft {\n  grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr;\n  grid-template-areas: \"label controls\";\n}\n\n.saltFormField-labelRight {\n  grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr;\n  grid-template-areas: \"label controls\";\n}\n\n.saltFormField-labelLeft .saltFormFieldHelperText,\n.saltFormField-labelRight .saltFormFieldHelperText {\n  grid-area: 2 / 2;\n}\n\n.saltFormField-labelRight .saltFormFieldLabel,\n.saltFormField-labelLeft .saltFormFieldLabel {\n  padding-top: var(--salt-spacing-100);\n}\n\n.saltFormField-labelRight .saltFormFieldLabel {\n  text-align: right;\n}\n\n.saltFormField-controls {\n  align-items: center;\n  display: grid;\n  grid-auto-columns: minmax(0, 1fr);\n  grid-auto-flow: column;\n  grid-column-gap: var(--salt-spacing-100);\n}\n\n.saltFormFieldLabel {\n  grid-area: label;\n}\n\n.saltFormFieldHelperText {\n  grid-area: helperText;\n}\n\n.saltFormField-disabled {\n  --saltInput-outline: none;\n  --saltCheckbox-outline: none;\n  --saltRadioButton-outline: none;\n}\n\n@supports selector(:has(*)) {\n  .saltFormField:not(:has(.saltFormFieldLabel)) {\n    grid-template-areas: \"controls\";\n  }\n}\n";
+var css_248z = ".saltFormField {\n  display: inline-grid;\n  position: relative;\n  gap: var(--salt-spacing-100);\n  text-align: left;\n  width: var(--saltFormField-width, 100%);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltFormField-labelTop {\n  gap: var(--salt-spacing-75);\n  grid-auto-rows: min-content;\n  grid-template-areas:\n    \"label\"\n    \"controls\";\n}\n\n.saltFormField-labelTop.saltFormField-hasControls {\n  align-content: start;\n  grid-template-rows: min-content minmax(var(--salt-size-base), auto);\n}\n\n.saltFormField-labelTop .saltFormFieldHelperText {\n  grid-area: 3 / 1;\n}\n\n.saltFormField-labelLeft {\n  grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr;\n  grid-template-areas: \"label controls\";\n}\n\n.saltFormField-labelLeft.saltFormField-hasControls {\n  grid-template-rows: minmax(var(--salt-size-base), auto);\n}\n\n.saltFormField-labelRight {\n  grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr;\n  grid-template-areas: \"label controls\";\n}\n\n.saltFormField-labelRight.saltFormField-hasControls {\n  grid-template-rows: minmax(var(--salt-size-base), auto);\n}\n\n.saltFormField-labelLeft .saltFormFieldHelperText,\n.saltFormField-labelRight .saltFormFieldHelperText {\n  grid-area: 2 / 2;\n}\n\n.saltFormField-labelRight .saltFormFieldLabel,\n.saltFormField-labelLeft .saltFormFieldLabel {\n  padding-top: var(--salt-spacing-100);\n}\n\n.saltFormField-labelRight .saltFormFieldLabel {\n  text-align: right;\n}\n\n.saltFormFieldLabel {\n  grid-area: label;\n}\n\n.saltFormFieldHelperText {\n  grid-area: helperText;\n}\n\n.saltFormField-labelTop > :not(.saltFormFieldLabel):not(.saltFormFieldHelperText) {\n  align-self: center;\n}\n\n.saltFormField-disabled {\n  --saltInput-outline: none;\n  --saltCheckbox-outline: none;\n  --saltRadioButton-outline: none;\n}\n\n@supports selector(:has(*)) {\n  .saltFormField:not(:has(.saltFormFieldLabel)) {\n    grid-template-areas: \"controls\";\n  }\n\n  .saltFormField-hasControls:not(:has(.saltFormFieldLabel)) {\n    grid-template-rows: minmax(var(--salt-size-base), auto);\n  }\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=FormField.css.js.map

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

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
-import { forwardRef, useRef } from 'react';
+import { forwardRef, useRef, Children, isValidElement, Fragment } from 'react';
 import { FormFieldContext } from '../form-field-context/FormFieldContext.js';
 import { capitalize } from '../utils/capitalize.js';
 import { makePrefixer } from '../utils/makePrefixer.js';
@@ -12,8 +12,21 @@ import { useId } from '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
 import css_248z from './FormField.css.js';
+import { FormFieldHelperText } from './FormFieldHelperText.js';
+import { FormFieldLabel } from './FormFieldLabel.js';
 
 const withBaseName = makePrefixer("saltFormField");
+function hasFormFieldControls(children) {
+  return Children.toArray(children).some((child) => {
+    if (!isValidElement(child)) {
+      return true;
+    }
+    if (child.type === Fragment) {
+      return hasFormFieldControls(child.props.children);
+    }
+    return child.type !== FormFieldLabel && child.type !== FormFieldHelperText;
+  });
+}
 const FormField = forwardRef(
   ({
     children,
@@ -35,6 +48,7 @@ const FormField = forwardRef(
     const formFieldRef = useRef(null);
     const handleRef = useForkRef(ref, formFieldRef);
     const formId = useId(idProp);
+    const hasControls = hasFormFieldControls(children);
     const labelId = formId ? `label-${formId}` : void 0;
     const helperTextId = formId ? `helperText-${formId}` : void 0;
     return /* @__PURE__ */ jsx(
@@ -45,6 +59,7 @@ const FormField = forwardRef(
           withBaseName(),
           {
             [withBaseName("disabled")]: disabled,
+            [withBaseName("hasControls")]: hasControls,
             [withBaseName(`label${capitalize(labelPlacement)}`)]: labelPlacement
           },
           className

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

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, useRef } from \"react\";\nimport {\n  type A11yValueProps,\n  FormFieldContext,\n  type FormFieldValidationStatus,\n} from \"../form-field-context\";\nimport { capitalize, makePrefixer, useForkRef, useId } from \"../utils\";\n\nimport formFieldCss from \"./FormField.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\" | \"right\";\n\nexport interface FormFieldProps\n  extends HTMLAttributes<HTMLDivElement>,\n    A11yValueProps {\n  /**\n   * If `true`, the field will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Location of the label relative to the control.\n   *\n   * Either 'top', 'left', or 'right'`.\n   */\n  labelPlacement?: FormFieldLabelPlacement;\n  /**\n   * If `true`, the field will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * Optional id prop\n   *\n   * Used as suffix of FormFieldLabel id: `label-{id}`\n   * Used as suffix of FormFieldHelperText id: `helperText-{id}`\n   */\n  id?: string;\n  /**\n   * Displays necessity on label\n   */\n  necessity?: \"required\" | \"optional\" | \"asterisk\";\n  /**\n   * Validation status\n   */\n  validationStatus?: FormFieldValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(\n  (\n    {\n      children,\n      className,\n      disabled = false,\n      id: idProp,\n      labelPlacement = \"top\",\n      necessity,\n      readOnly = false,\n      validationStatus,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-form-field\",\n      css: formFieldCss,\n      window: targetWindow,\n    });\n\n    const formFieldRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(ref, formFieldRef);\n\n    const formId = useId(idProp);\n\n    const labelId = formId ? `label-${formId}` : undefined;\n    const helperTextId = formId ? `helperText-${formId}` : undefined;\n\n    return (\n      <div\n        ref={handleRef}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(`label${capitalize(labelPlacement)}`)]:\n              labelPlacement,\n          },\n          className,\n        )}\n        {...restProps}\n      >\n        <FormFieldContext.Provider\n          value={{\n            a11yProps: {\n              \"aria-labelledby\": labelId,\n              \"aria-describedby\": helperTextId,\n            },\n            disabled,\n            necessity,\n            readOnly,\n            validationStatus,\n            formFieldRef,\n          }}\n        >\n          {children}\n        </FormFieldContext.Provider>\n      </div>\n    );\n  },\n);\n"],"names":["formFieldCss"],"mappings":";;;;;;;;;;;;;;;AAiDA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAE1C,MAAM,SAAA,GAAY,UAAA;AAAA,EACvB,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,EAAA,EAAI,MAAA;AAAA,IACJ,cAAA,GAAiB,KAAA;AAAA,IACjB,SAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,gBAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,iBAAA;AAAA,MACR,GAAA,EAAKA,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,YAAA,GAAe,OAAuB,IAAI,CAAA;AAChD,IAAA,MAAM,SAAA,GAAY,UAAA,CAAW,GAAA,EAAK,YAAY,CAAA;AAE9C,IAAA,MAAM,MAAA,GAAS,MAAM,MAAM,CAAA;AAE3B,IAAA,MAAM,OAAA,GAAU,MAAA,GAAS,CAAA,MAAA,EAAS,MAAM,CAAA,CAAA,GAAK,MAAA;AAC7C,IAAA,MAAM,YAAA,GAAe,MAAA,GAAS,CAAA,WAAA,EAAc,MAAM,CAAA,CAAA,GAAK,MAAA;AAEvD,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,SAAA;AAAA,QACL,SAAA,EAAW,IAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,aAAa,CAAA,KAAA,EAAQ,UAAA,CAAW,cAAc,CAAC,CAAA,CAAE,CAAC,GACjD;AAAA,WACJ;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,SAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA;AAAA,UAAC,gBAAA,CAAiB,QAAA;AAAA,UAAjB;AAAA,YACC,KAAA,EAAO;AAAA,cACL,SAAA,EAAW;AAAA,gBACT,iBAAA,EAAmB,OAAA;AAAA,gBACnB,kBAAA,EAAoB;AAAA,eACtB;AAAA,cACA,QAAA;AAAA,cACA,SAAA;AAAA,cACA,QAAA;AAAA,cACA,gBAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC;AAAA;AAAA;AACH;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  Fragment,\n  forwardRef,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n  useRef,\n} from \"react\";\nimport {\n  type A11yValueProps,\n  FormFieldContext,\n  type FormFieldValidationStatus,\n} from \"../form-field-context\";\nimport { capitalize, makePrefixer, useForkRef, useId } from \"../utils\";\n\nimport formFieldCss from \"./FormField.css\";\nimport { FormFieldHelperText } from \"./FormFieldHelperText\";\nimport { FormFieldLabel } from \"./FormFieldLabel\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\" | \"right\";\n\nexport interface FormFieldProps\n  extends HTMLAttributes<HTMLDivElement>,\n    A11yValueProps {\n  /**\n   * If `true`, the field will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Location of the label relative to the control.\n   *\n   * Either 'top', 'left', or 'right'`.\n   */\n  labelPlacement?: FormFieldLabelPlacement;\n  /**\n   * If `true`, the field will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * Optional id prop\n   *\n   * Used as suffix of FormFieldLabel id: `label-{id}`\n   * Used as suffix of FormFieldHelperText id: `helperText-{id}`\n   */\n  id?: string;\n  /**\n   * Displays necessity on label\n   */\n  necessity?: \"required\" | \"optional\" | \"asterisk\";\n  /**\n   * Validation status\n   */\n  validationStatus?: FormFieldValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nfunction hasFormFieldControls(children: ReactNode): boolean {\n  return Children.toArray(children).some((child) => {\n    if (!isValidElement<{ children?: ReactNode }>(child)) {\n      return true;\n    }\n\n    if (child.type === Fragment) {\n      return hasFormFieldControls(child.props.children);\n    }\n\n    return child.type !== FormFieldLabel && child.type !== FormFieldHelperText;\n  });\n}\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(\n  (\n    {\n      children,\n      className,\n      disabled = false,\n      id: idProp,\n      labelPlacement = \"top\",\n      necessity,\n      readOnly = false,\n      validationStatus,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-form-field\",\n      css: formFieldCss,\n      window: targetWindow,\n    });\n\n    const formFieldRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(ref, formFieldRef);\n\n    const formId = useId(idProp);\n    const hasControls = hasFormFieldControls(children);\n\n    const labelId = formId ? `label-${formId}` : undefined;\n    const helperTextId = formId ? `helperText-${formId}` : undefined;\n\n    return (\n      <div\n        ref={handleRef}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"hasControls\")]: hasControls,\n            [withBaseName(`label${capitalize(labelPlacement)}`)]:\n              labelPlacement,\n          },\n          className,\n        )}\n        {...restProps}\n      >\n        <FormFieldContext.Provider\n          value={{\n            a11yProps: {\n              \"aria-labelledby\": labelId,\n              \"aria-describedby\": helperTextId,\n            },\n            disabled,\n            necessity,\n            readOnly,\n            validationStatus,\n            formFieldRef,\n          }}\n        >\n          {children}\n        </FormFieldContext.Provider>\n      </div>\n    );\n  },\n);\n"],"names":["formFieldCss"],"mappings":";;;;;;;;;;;;;;;;;AA2DA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAEjD,SAAS,qBAAqB,QAAA,EAA8B;AAC1D,EAAA,OAAO,SAAS,OAAA,CAAQ,QAAQ,CAAA,CAAE,IAAA,CAAK,CAAC,KAAA,KAAU;AAChD,IAAA,IAAI,CAAC,cAAA,CAAyC,KAAK,CAAA,EAAG;AACpD,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,IAAI,KAAA,CAAM,SAAS,QAAA,EAAU;AAC3B,MAAA,OAAO,oBAAA,CAAqB,KAAA,CAAM,KAAA,CAAM,QAAQ,CAAA;AAAA,IAClD;AAEA,IAAA,OAAO,KAAA,CAAM,IAAA,KAAS,cAAA,IAAkB,KAAA,CAAM,IAAA,KAAS,mBAAA;AAAA,EACzD,CAAC,CAAA;AACH;AAEO,MAAM,SAAA,GAAY,UAAA;AAAA,EACvB,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,EAAA,EAAI,MAAA;AAAA,IACJ,cAAA,GAAiB,KAAA;AAAA,IACjB,SAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,gBAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,iBAAA;AAAA,MACR,GAAA,EAAKA,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,YAAA,GAAe,OAAuB,IAAI,CAAA;AAChD,IAAA,MAAM,SAAA,GAAY,UAAA,CAAW,GAAA,EAAK,YAAY,CAAA;AAE9C,IAAA,MAAM,MAAA,GAAS,MAAM,MAAM,CAAA;AAC3B,IAAA,MAAM,WAAA,GAAc,qBAAqB,QAAQ,CAAA;AAEjD,IAAA,MAAM,OAAA,GAAU,MAAA,GAAS,CAAA,MAAA,EAAS,MAAM,CAAA,CAAA,GAAK,MAAA;AAC7C,IAAA,MAAM,YAAA,GAAe,MAAA,GAAS,CAAA,WAAA,EAAc,MAAM,CAAA,CAAA,GAAK,MAAA;AAEvD,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,SAAA;AAAA,QACL,SAAA,EAAW,IAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,aAAa,CAAC,GAAG,WAAA;AAAA,YAC/B,CAAC,aAAa,CAAA,KAAA,EAAQ,UAAA,CAAW,cAAc,CAAC,CAAA,CAAE,CAAC,GACjD;AAAA,WACJ;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,SAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA;AAAA,UAAC,gBAAA,CAAiB,QAAA;AAAA,UAAjB;AAAA,YACC,KAAA,EAAO;AAAA,cACL,SAAA,EAAW;AAAA,gBACT,iBAAA,EAAmB,OAAA;AAAA,gBACnB,kBAAA,EAAoB;AAAA,eACtB;AAAA,cACA,QAAA;AAAA,cACA,SAAA;AAAA,cACA,QAAA;AAAA,cACA,gBAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC;AAAA;AAAA;AACH;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

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

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

package/dist-es/index.js

@@ -42,6 +42,9 @@ export { DialogHeader } from './dialog/DialogHeader.js';
 export { Divider } from './divider/Divider.js';
 export { Drawer } from './drawer/Drawer.js';
 export { DrawerCloseButton } from './drawer/DrawerCloseButton.js';
+export { DrawerContent } from './drawer/DrawerContent.js';
+export { DrawerFooter } from './drawer/DrawerFooter.js';
+export { DrawerHeader } from './drawer/DrawerHeader.js';
 export { Dropdown } from './dropdown/Dropdown.js';
 export { FileDropZone } from './file-drop-zone/FileDropZone.js';
 export { FileDropZoneIcon } from './file-drop-zone/FileDropZoneIcon.js';
@@ -62,6 +65,7 @@ export { InteractableCardGroup } from './interactable-card/InteractableCardGroup
 export { InteractableCardGroupContext, useInteractableCardGroup } from './interactable-card/InteractableCardGroupContext.js';
 export { Kbd } from './kbd/Kbd.js';
 export { Link } from './link/Link.js';
+export { LinkButton } from './link-button/LinkButton.js';
 export { LinkCard } from './link-card/LinkCard.js';
 export { ListBox } from './list-box/ListBox.js';
 export { useListControlContext } from './list-control/ListControlContext.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}