@salt-ds/core 1.71.0 → 1.73.0

package/dist-cjs/overlay/Overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.js","sources":["../src/overlay/Overlay.tsx"],"sourcesContent":["import {\n  arrow,\n  flip,\n  limitShift,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport { type ReactNode, useMemo, useRef } from \"react\";\nimport { useControlled, useFloatingUI } from \"../utils\";\nimport { OverlayContext, type OverlayContextValue } from \"./OverlayContext\";\n\nexport interface OverlayProps {\n  /**\n   * The content of the Overlay, typically an `OverlayTrigger` and `OverlayPanel`.\n   */\n  children?: ReactNode;\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   * Set the placement of the Overlay component relative to the trigger element. Defaults to `top`.\n   */\n  placement?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  /**\n   * When `true`, the arrow indicator is hidden\n   */\n  hideArrow?: boolean;\n}\n\nexport const Overlay = ({\n  children,\n  open,\n  onOpenChange,\n  placement: placementProp = \"top\",\n  hideArrow = false,\n}: OverlayProps) => {\n  const arrowRef = useRef<SVGSVGElement | null>(null);\n\n  const [openState, setOpenState] = useControlled({\n    controlled: open,\n    default: false,\n    name: \"Overlay\",\n    state: \"open\",\n  });\n\n  const handleOpenChange = (newOpen: boolean) => {\n    setOpenState(newOpen);\n    onOpenChange?.(newOpen);\n  };\n\n  const middleware = useMemo(\n    () => [\n      offset(8),\n      flip(),\n      shift({ limiter: limitShift() }),\n      arrow({ element: arrowRef }),\n    ],\n    [],\n  );\n\n  const { x, y, strategy, context, elements, floating, reference } =\n    useFloatingUI({\n      open: openState,\n      onOpenChange: handleOpenChange,\n      placement: placementProp,\n      middleware,\n    });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useRole(context, { role: \"dialog\" }),\n    useClick(context),\n    useDismiss(context),\n  ]);\n\n  const floatingStyles = useMemo(() => {\n    const floatingElement = elements.floating;\n\n    return {\n      top: y ?? 0,\n      left: x ?? 0,\n      position: strategy,\n      width: floatingElement?.offsetWidth,\n      height: floatingElement?.offsetHeight,\n    };\n  }, [elements.floating, strategy, x, y]);\n\n  const arrowProps = useMemo(\n    () => ({\n      ref: arrowRef,\n      context,\n    }),\n    [context],\n  );\n\n  const contextValue = useMemo<OverlayContextValue>(\n    () => ({\n      openState,\n      floatingStyles,\n      context,\n      arrowProps,\n      hideArrow,\n      floating,\n      reference,\n      getFloatingProps,\n      getReferenceProps,\n    }),\n    [\n      openState,\n      floatingStyles,\n      context,\n      arrowProps,\n      hideArrow,\n      floating,\n      reference,\n      getFloatingProps,\n      getReferenceProps,\n    ],\n  );\n\n  return (\n    <OverlayContext.Provider value={contextValue}>\n      {children}\n    </OverlayContext.Provider>\n  );\n};\n"],"names":["useRef","useControlled","useMemo","offset","flip","shift","limitShift","arrow","useFloatingUI","useInteractions","useRole","useClick","useDismiss","OverlayContext"],"mappings":"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"}
+{"version":3,"file":"Overlay.js","sources":["../src/overlay/Overlay.tsx"],"sourcesContent":["import {\n  arrow,\n  flip,\n  limitShift,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport { type ReactNode, useMemo, useRef, useState } from \"react\";\nimport {\n  type UseFloatingUIProps,\n  useControlled,\n  useFloatingUI,\n} from \"../utils\";\nimport { OverlayContext, type OverlayContextValue } from \"./OverlayContext\";\n\nexport interface OverlayProps {\n  /**\n   * The content of the Overlay, typically an `OverlayTrigger` and `OverlayPanel`.\n   */\n  children?: ReactNode;\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   * Set the placement of the Overlay component relative to the trigger element. Defaults to `top`.\n   */\n  placement?: UseFloatingUIProps[\"placement\"];\n  /**\n   * When `true`, the arrow indicator is hidden\n   */\n  hideArrow?: boolean;\n}\n\nexport const Overlay = ({\n  children,\n  open,\n  onOpenChange,\n  placement: placementProp = \"top\",\n  hideArrow = false,\n}: OverlayProps) => {\n  const arrowRef = useRef<SVGSVGElement | null>(null);\n  const [headerId, setHeaderId] = useState<string | undefined>(undefined);\n  const [descriptionId, setDescriptionId] = useState<string | undefined>(\n    undefined,\n  );\n\n  const [openState, setOpenState] = useControlled({\n    controlled: open,\n    default: false,\n    name: \"Overlay\",\n    state: \"open\",\n  });\n\n  const handleOpenChange = (newOpen: boolean) => {\n    setOpenState(newOpen);\n    onOpenChange?.(newOpen);\n  };\n\n  const middleware = useMemo(\n    () => [\n      offset(8),\n      flip(),\n      shift({ limiter: limitShift() }),\n      arrow({ element: arrowRef }),\n    ],\n    [],\n  );\n\n  const { x, y, strategy, context, elements, floating, reference } =\n    useFloatingUI({\n      open: openState,\n      onOpenChange: handleOpenChange,\n      placement: placementProp,\n      middleware,\n    });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useRole(context, { role: \"dialog\" }),\n    useClick(context),\n    useDismiss(context),\n  ]);\n\n  const floatingStyles = useMemo(() => {\n    const floatingElement = elements.floating;\n\n    return {\n      top: y ?? 0,\n      left: x ?? 0,\n      position: strategy,\n      width: floatingElement?.offsetWidth,\n      height: floatingElement?.offsetHeight,\n    };\n  }, [elements.floating, strategy, x, y]);\n\n  const arrowProps = useMemo(\n    () => ({\n      ref: arrowRef,\n      context,\n    }),\n    [context],\n  );\n\n  const contextValue = useMemo<OverlayContextValue>(\n    () => ({\n      openState,\n      floatingStyles,\n      context,\n      arrowProps,\n      hideArrow,\n      floating,\n      reference,\n      getFloatingProps,\n      getReferenceProps,\n      headerId,\n      setHeaderId,\n      descriptionId,\n      setDescriptionId,\n    }),\n    [\n      openState,\n      floatingStyles,\n      context,\n      arrowProps,\n      hideArrow,\n      floating,\n      reference,\n      getFloatingProps,\n      getReferenceProps,\n      headerId,\n      descriptionId,\n    ],\n  );\n\n  return (\n    <OverlayContext.Provider value={contextValue}>\n      {children}\n    </OverlayContext.Provider>\n  );\n};\n"],"names":["useRef","useState","useControlled","useMemo","offset","flip","shift","limitShift","arrow","useFloatingUI","useInteractions","useRole","useClick","useDismiss","OverlayContext"],"mappings":"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"}

package/dist-cjs/overlay/OverlayContext.js

@@ -28,6 +28,12 @@ const OverlayContext = createContext.createContext(
     },
     getReferenceProps() {
       return {};
+    },
+    headerId: void 0,
+    setHeaderId: () => {
+    },
+    descriptionId: void 0,
+    setDescriptionId: () => {
     }
   }
 );

package/dist-cjs/overlay/OverlayContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayContext.js","sources":["../src/overlay/OverlayContext.ts"],"sourcesContent":["import type {\n  FloatingArrowProps,\n  FloatingContext,\n  ReferenceType,\n  Strategy,\n} from \"@floating-ui/react\";\nimport { type HTMLProps, useContext } from \"react\";\nimport { createContext, type useFloatingUI } from \"../utils\";\n\ntype FloatingReturn = ReturnType<typeof useFloatingUI>;\ntype FloatingStyleProps = {\n  top: number;\n  left: number;\n  position: Strategy;\n  width?: number;\n  height?: number;\n};\n\nexport interface OverlayContextValue {\n  openState: boolean;\n  floatingStyles: FloatingStyleProps;\n  arrowProps: FloatingArrowProps;\n  hideArrow: boolean;\n  context: FloatingContext;\n  reference?: (node: ReferenceType | null) => void;\n  floating?: (node: HTMLElement | null) => void;\n  getFloatingProps: (\n    userProps?: HTMLProps<HTMLElement> | undefined,\n  ) => Record<string, unknown>;\n  getReferenceProps: (\n    userProps?: HTMLProps<Element> | undefined,\n  ) => Record<string, unknown>;\n}\n\nexport const OverlayContext = createContext<OverlayContextValue>(\n  \"OverlayContext\",\n  {\n    openState: false,\n    floatingStyles: {\n      top: 0,\n      left: 0,\n      position: \"\" as Strategy,\n    },\n    context: {} as FloatingContext,\n    arrowProps: {} as FloatingArrowProps,\n    hideArrow: false,\n    reference: {} as FloatingReturn[\"reference\"],\n    floating: {} as FloatingReturn[\"floating\"],\n    getFloatingProps() {\n      return {} as Record<string, unknown>;\n    },\n    getReferenceProps() {\n      return {} as Record<string, unknown>;\n    },\n  },\n);\n\nexport function useOverlayContext() {\n  return useContext(OverlayContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;AAkCO,MAAM,cAAA,GAAiBA,2BAAA;AAAA,EAC5B,gBAAA;AAAA,EACA;AAAA,IACE,SAAA,EAAW,KAAA;AAAA,IACX,cAAA,EAAgB;AAAA,MACd,GAAA,EAAK,CAAA;AAAA,MACL,IAAA,EAAM,CAAA;AAAA,MACN,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,SAAS,EAAC;AAAA,IACV,YAAY,EAAC;AAAA,IACb,SAAA,EAAW,KAAA;AAAA,IACX,WAAW,EAAC;AAAA,IACZ,UAAU,EAAC;AAAA,IACX,gBAAA,GAAmB;AACjB,MAAA,OAAO,EAAC;AAAA,IACV,CAAA;AAAA,IACA,iBAAA,GAAoB;AAClB,MAAA,OAAO,EAAC;AAAA,IACV;AAAA;AAEJ;AAEO,SAAS,iBAAA,GAAoB;AAClC,EAAA,OAAOC,iBAAW,cAAc,CAAA;AAClC;;;;;"}
+{"version":3,"file":"OverlayContext.js","sources":["../src/overlay/OverlayContext.ts"],"sourcesContent":["import type {\n  FloatingArrowProps,\n  FloatingContext,\n  ReferenceType,\n  Strategy,\n} from \"@floating-ui/react\";\nimport { type HTMLProps, useContext } from \"react\";\nimport { createContext, type useFloatingUI } from \"../utils\";\n\ntype FloatingReturn = ReturnType<typeof useFloatingUI>;\ntype FloatingStyleProps = {\n  top: number;\n  left: number;\n  position: Strategy;\n  width?: number;\n  height?: number;\n};\n\nexport interface OverlayContextValue {\n  openState: boolean;\n  floatingStyles: FloatingStyleProps;\n  arrowProps: FloatingArrowProps;\n  hideArrow: boolean;\n  context: FloatingContext;\n  reference?: (node: ReferenceType | null) => void;\n  floating?: (node: HTMLElement | null) => void;\n  getFloatingProps: (\n    userProps?: HTMLProps<HTMLElement> | undefined,\n  ) => Record<string, unknown>;\n  getReferenceProps: (\n    userProps?: HTMLProps<Element> | undefined,\n  ) => Record<string, unknown>;\n  headerId?: string;\n  setHeaderId?: (id: string | undefined) => void;\n  descriptionId?: string;\n  setDescriptionId?: (id: string | undefined) => void;\n}\n\nexport const OverlayContext = createContext<OverlayContextValue>(\n  \"OverlayContext\",\n  {\n    openState: false,\n    floatingStyles: {\n      top: 0,\n      left: 0,\n      position: \"\" as Strategy,\n    },\n    context: {} as FloatingContext,\n    arrowProps: {} as FloatingArrowProps,\n    hideArrow: false,\n    reference: {} as FloatingReturn[\"reference\"],\n    floating: {} as FloatingReturn[\"floating\"],\n    getFloatingProps() {\n      return {} as Record<string, unknown>;\n    },\n    getReferenceProps() {\n      return {} as Record<string, unknown>;\n    },\n    headerId: undefined,\n    setHeaderId: () => {},\n    descriptionId: undefined,\n    setDescriptionId: () => {},\n  },\n);\n\nexport function useOverlayContext() {\n  return useContext(OverlayContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;AAsCO,MAAM,cAAA,GAAiBA,2BAAA;AAAA,EAC5B,gBAAA;AAAA,EACA;AAAA,IACE,SAAA,EAAW,KAAA;AAAA,IACX,cAAA,EAAgB;AAAA,MACd,GAAA,EAAK,CAAA;AAAA,MACL,IAAA,EAAM,CAAA;AAAA,MACN,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,SAAS,EAAC;AAAA,IACV,YAAY,EAAC;AAAA,IACb,SAAA,EAAW,KAAA;AAAA,IACX,WAAW,EAAC;AAAA,IACZ,UAAU,EAAC;AAAA,IACX,gBAAA,GAAmB;AACjB,MAAA,OAAO,EAAC;AAAA,IACV,CAAA;AAAA,IACA,iBAAA,GAAoB;AAClB,MAAA,OAAO,EAAC;AAAA,IACV,CAAA;AAAA,IACA,QAAA,EAAU,MAAA;AAAA,IACV,aAAa,MAAM;AAAA,IAAC,CAAA;AAAA,IACpB,aAAA,EAAe,MAAA;AAAA,IACf,kBAAkB,MAAM;AAAA,IAAC;AAAA;AAE7B;AAEO,SAAS,iBAAA,GAAoB;AAClC,EAAA,OAAOC,iBAAW,cAAc,CAAA;AAClC;;;;;"}

package/dist-cjs/overlay/OverlayFooter.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltOverlayFooter {\n  padding: var(--saltOverlay-footer-padding, var(--salt-spacing-100));\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--salt-spacing-100);\n  flex-shrink: 0;\n  box-sizing: border-box;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=OverlayFooter.css.js.map

package/dist-cjs/overlay/OverlayFooter.css.js.map

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

package/dist-cjs/overlay/OverlayFooter.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var React = require('react');
+var makePrefixer = require('../utils/makePrefixer.js');
+require('../utils/useFloatingUI/useFloatingUI.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var OverlayFooter$1 = require('./OverlayFooter.css.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltOverlayFooter");
+const OverlayFooter = React.forwardRef(
+  function OverlayFooter2(props, ref) {
+    const { className, ...rest } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-overlay-footer",
+      css: OverlayFooter$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx.clsx(withBaseName(), className), ...rest });
+  }
+);
+
+exports.OverlayFooter = OverlayFooter;
+//# sourceMappingURL=OverlayFooter.js.map

package/dist-cjs/overlay/OverlayFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayFooter.js","sources":["../src/overlay/OverlayFooter.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 overlayFooterCss from \"./OverlayFooter.css\";\n\nexport interface OverlayFooterProps extends ComponentPropsWithoutRef<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltOverlayFooter\");\n\nexport const OverlayFooter = forwardRef<HTMLDivElement, OverlayFooterProps>(\n  function OverlayFooter(props, ref) {\n    const { className, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-overlay-footer\",\n      css: overlayFooterCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div ref={ref} className={clsx(withBaseName(), className)} {...rest} />\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","OverlayFooter","useWindow","useComponentCssInjection","overlayFooterCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAE9C,MAAM,aAAA,GAAgBC,gBAAA;AAAA,EAC3B,SAASC,cAAAA,CAAc,KAAA,EAAO,GAAA,EAAK;AACjC,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAE/B,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,qBAAA;AAAA,MACR,GAAA,EAAKC,eAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,SAAA,EAAWC,SAAA,CAAK,cAAa,EAAG,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,CAAA;AAAA,EAEzE;AACF;;;;"}

package/dist-cjs/overlay/OverlayHeader.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltOverlayHeader {\n  padding: var(--salt-spacing-100);\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: stretch;\n  gap: var(--salt-spacing-100);\n  box-sizing: border-box;\n}\n\n.saltOverlayHeader-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-h4-lineHeight)) / 2);\n  align-items: flex-start;\n}\n\n.saltOverlayHeader-header {\n  margin: 0;\n}\n\n.saltOverlayHeader-actionsContainer {\n  align-self: flex-start;\n}\n\n/* Overrides */\n.saltOverlayHeader ~ .saltOverlayPanelContent {\n  padding-top: 0;\n}\n";
+var css_248z = ".saltOverlayHeader {\n  padding: var(--saltOverlay-header-padding, var(--salt-spacing-100));\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: stretch;\n  gap: var(--salt-spacing-100);\n  flex-shrink: 0;\n  box-sizing: border-box;\n}\n\n.saltOverlayHeader-container {\n  flex-grow: 1;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-50);\n  align-items: flex-start;\n}\n\n.saltOverlayHeader-withActions .saltOverlayHeader-container {\n  padding-top: calc((var(--salt-size-base) - var(--salt-text-h4-lineHeight)) / 2);\n}\n\n.saltOverlayHeader-header {\n  margin: 0;\n}\n\n.saltOverlayHeader-actionsContainer {\n  align-self: flex-start;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=OverlayHeader.css.js.map

package/dist-cjs/overlay/OverlayHeader.js

@@ -7,16 +7,20 @@ var clsx = require('clsx');
 var React = require('react');
 require('../text/Code.js');
 require('../text/Display.js');
+require('../text/Editorial.js');
+require('../text/Eyebrow.js');
 var Headings = require('../text/Headings.js');
 require('../text/Label.js');
 var Text = require('../text/Text.js');
 require('../text/TextAction.js');
 require('../text/TextNotation.js');
 var makePrefixer = require('../utils/makePrefixer.js');
+var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
-require('../utils/useId.js');
+var useId = require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
+var OverlayContext = require('./OverlayContext.js');
 var OverlayHeader$1 = require('./OverlayHeader.css.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltOverlayHeader");
@@ -29,16 +33,54 @@ const OverlayHeader = React.forwardRef(
       window: targetWindow
     });
     const { className, description, header, actions, preheader, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(withBaseName(), className), ...rest, ref, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: withBaseName("container"), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Headings.H2, { styleAs: "h4", className: withBaseName("header"), children: [
-          preheader && /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { color: "primary", children: preheader }),
-          header
-        ] }),
-        description && /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { color: "secondary", className: withBaseName("description"), children: description })
-      ] }),
-      actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("actionsContainer"), children: actions })
-    ] });
+    const { setHeaderId, setDescriptionId } = OverlayContext.useOverlayContext();
+    const headingId = useId.useId();
+    const descriptionId = useId.useId();
+    const hasHeading = Boolean(header || preheader);
+    const hasDescription = Boolean(description);
+    const hasActions = Boolean(actions);
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+      setHeaderId == null ? void 0 : setHeaderId(hasHeading ? headingId : void 0);
+      return () => {
+        setHeaderId == null ? void 0 : setHeaderId(void 0);
+      };
+    }, [hasHeading, headingId, setHeaderId]);
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+      setDescriptionId == null ? void 0 : setDescriptionId(hasDescription ? descriptionId : void 0);
+      return () => {
+        setDescriptionId == null ? void 0 : setDescriptionId(void 0);
+      };
+    }, [hasDescription, descriptionId, setDescriptionId]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: clsx.clsx(
+          withBaseName(),
+          { [withBaseName("withActions")]: hasActions },
+          className
+        ),
+        ...rest,
+        ref,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: withBaseName("container"), children: [
+            hasHeading && /* @__PURE__ */ jsxRuntime.jsxs(Headings.H2, { id: headingId, styleAs: "h4", className: withBaseName("header"), children: [
+              preheader && /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { color: "primary", children: preheader }),
+              header
+            ] }),
+            description && /* @__PURE__ */ jsxRuntime.jsx(
+              Text.Text,
+              {
+                id: descriptionId,
+                color: "secondary",
+                className: withBaseName("description"),
+                children: description
+              }
+            )
+          ] }),
+          hasActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("actionsContainer"), children: actions })
+        ]
+      }
+    );
   }
 );
 

package/dist-cjs/overlay/OverlayHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayHeader.js","sources":["../src/overlay/OverlayHeader.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 } from \"../utils\";\n\nimport overlayHeaderCss from \"./OverlayHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayHeader\");\n\nexport interface OverlayHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\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   * Header text\n   */\n  header?: ReactNode;\n  /**\n   * Preheader text is displayed just above the header\n   **/\n  preheader?: ReactNode;\n}\n\nexport const OverlayHeader = forwardRef<HTMLDivElement, OverlayHeaderProps>(\n  function OverlayHeader(props, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-overlay-header\",\n      css: overlayHeaderCss,\n      window: targetWindow,\n    });\n\n    const { className, description, header, actions, preheader, ...rest } =\n      props;\n\n    return (\n      <div className={clsx(withBaseName(), className)} {...rest} ref={ref}>\n        <div className={withBaseName(\"container\")}>\n          <H2 styleAs=\"h4\" className={withBaseName(\"header\")}>\n            {preheader && <Text color=\"primary\">{preheader}</Text>}\n            {header}\n          </H2>\n          {description && (\n            <Text color=\"secondary\" className={withBaseName(\"description\")}>\n              {description}\n            </Text>\n          )}\n        </div>\n        {actions && (\n          <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","OverlayHeader","useWindow","useComponentCssInjection","overlayHeaderCss","jsxs","clsx","H2","jsx","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAqB9C,MAAM,aAAA,GAAgBC,gBAAA;AAAA,EAC3B,SAASC,cAAAA,CAAc,KAAA,EAAO,GAAA,EAAK;AACjC,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,qBAAA;AAAA,MACR,GAAA,EAAKC,eAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,WAAW,WAAA,EAAa,MAAA,EAAQ,SAAS,SAAA,EAAW,GAAG,MAAK,GAClE,KAAA;AAEF,IAAA,uBACEC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,SAAA,CAAK,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,GAAA,EACzD,QAAA,EAAA;AAAA,sBAAAD,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,WAAW,CAAA,EACtC,QAAA,EAAA;AAAA,wBAAAA,eAAA,CAACE,eAAG,OAAA,EAAQ,IAAA,EAAK,SAAA,EAAW,YAAA,CAAa,QAAQ,CAAA,EAC9C,QAAA,EAAA;AAAA,UAAA,SAAA,oBAAaC,cAAA,CAACC,SAAA,EAAA,EAAK,KAAA,EAAM,SAAA,EAAW,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,UAC9C;AAAA,SAAA,EACH,CAAA;AAAA,QACC,WAAA,mCACEA,SAAA,EAAA,EAAK,KAAA,EAAM,aAAY,SAAA,EAAW,YAAA,CAAa,aAAa,CAAA,EAC1D,QAAA,EAAA,WAAA,EACH;AAAA,OAAA,EAEJ,CAAA;AAAA,MACC,2BACCD,cAAA,CAAC,KAAA,EAAA,EAAI,WAAW,YAAA,CAAa,kBAAkB,GAAI,QAAA,EAAA,OAAA,EAAQ;AAAA,KAAA,EAE/D,CAAA;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"OverlayHeader.js","sources":["../src/overlay/OverlayHeader.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 { useOverlayContext } from \"./OverlayContext\";\nimport overlayHeaderCss from \"./OverlayHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayHeader\");\n\nexport interface OverlayHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\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   * Header text\n   */\n  header?: ReactNode;\n  /**\n   * Preheader text is displayed just above the header\n   **/\n  preheader?: ReactNode;\n}\n\nexport const OverlayHeader = forwardRef<HTMLDivElement, OverlayHeaderProps>(\n  function OverlayHeader(props, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-overlay-header\",\n      css: overlayHeaderCss,\n      window: targetWindow,\n    });\n\n    const { className, description, header, actions, preheader, ...rest } =\n      props;\n\n    const { setHeaderId, setDescriptionId } = useOverlayContext();\n\n    const headingId = useId();\n    const descriptionId = useId();\n    const hasHeading = Boolean(header || preheader);\n    const hasDescription = Boolean(description);\n    const hasActions = Boolean(actions);\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          { [withBaseName(\"withActions\")]: hasActions },\n          className,\n        )}\n        {...rest}\n        ref={ref}\n      >\n        <div className={withBaseName(\"container\")}>\n          {hasHeading && (\n            <H2 id={headingId} styleAs=\"h4\" className={withBaseName(\"header\")}>\n              {preheader && <Text color=\"primary\">{preheader}</Text>}\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        {hasActions && (\n          <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","OverlayHeader","useWindow","useComponentCssInjection","overlayHeaderCss","useOverlayContext","useId","useIsomorphicLayoutEffect","jsxs","clsx","H2","jsx","Text"],"mappings":"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"}

package/dist-cjs/overlay/OverlayPanel.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltOverlayPanel {\n  --overlay-borderColor: var(--saltOverlay-borderColor, var(--salt-container-bold-borderColor));\n  --overlay-background: var(--saltOverlay-background, var(--salt-container-primary-background));\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltOverlay-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--saltOverlay-fontWeight, var(--salt-text-fontWeight));\n  line-height: var(--saltOverlay-lineHeight, var(--salt-text-lineHeight));\n\n  border-color: var(--overlay-borderColor);\n  border-style: var(--saltOverlay-borderStyle, var(--salt-borderStyle-solid));\n  border-width: var(--saltOverlay-borderWidth, var(--salt-size-fixed-100));\n  border-radius: var(--saltOverlay-borderRadius, var(--salt-palette-corner, 0));\n\n  background: var(--overlay-background);\n  box-shadow: var(--saltOverlay-boxShadow, var(--salt-overlayable-shadow-popout));\n\n  color: var(--saltOverlay-text-color, var(--salt-content-primary-foreground));\n  z-index: var(--saltOverlay-zIndex, var(--salt-zIndex-flyover));\n  width: max-content;\n}\n";
+var css_248z = ".saltOverlayPanel {\n  --overlay-borderColor: var(--saltOverlay-borderColor, var(--salt-container-bold-borderColor));\n  --overlay-background: var(--saltOverlay-background, var(--salt-container-primary-background));\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltOverlay-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--saltOverlay-fontWeight, var(--salt-text-fontWeight));\n  line-height: var(--saltOverlay-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--salt-text-letterSpacing);\n\n  border-color: var(--overlay-borderColor);\n  border-style: var(--saltOverlay-borderStyle, var(--salt-borderStyle-solid));\n  border-width: var(--saltOverlay-borderWidth, var(--salt-size-fixed-100));\n  border-radius: var(--saltOverlay-borderRadius, var(--salt-palette-corner, 0));\n\n  background: var(--overlay-background);\n  box-shadow: var(--saltOverlay-boxShadow, var(--salt-overlayable-shadow-popout));\n\n  color: var(--saltOverlay-text-color, var(--salt-content-primary-foreground));\n  z-index: var(--saltOverlay-zIndex, var(--salt-zIndex-flyover));\n  width: max-content;\n  max-width: 100vw;\n  max-height: 100vh;\n  box-sizing: border-box;\n}\n\n.saltOverlayPanel-content {\n  max-width: inherit;\n  max-height: inherit;\n  overflow-y: auto;\n  box-sizing: border-box;\n}\n\n.saltOverlayPanel-content.saltOverlayPanel-sectioned {\n  display: flex;\n  flex-direction: column;\n}\n\n@supports selector(:has(*)) {\n  .saltOverlayPanel-content:has(> .saltOverlayHeader, > .saltOverlayPanelContent, > .saltOverlayFooter) {\n    display: flex;\n    flex-direction: column;\n  }\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=OverlayPanel.css.js.map

package/dist-cjs/overlay/OverlayPanel.js

@@ -12,6 +12,7 @@ var useForkRef = require('../utils/useForkRef.js');
 require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
+var hasOverlaySection = require('./hasOverlaySection.js');
 var OverlayContext = require('./OverlayContext.js');
 var OverlayPanel$1 = require('./OverlayPanel.css.js');
 
@@ -20,7 +21,9 @@ const OverlayPanel = React.forwardRef(
   function OverlayPanel2(props, ref) {
     const {
       className,
+      "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,
+      "aria-describedby": ariaDescribedby,
       children,
       ...rest
     } = props;
@@ -38,9 +41,12 @@ const OverlayPanel = React.forwardRef(
       getFloatingProps,
       floating,
       arrowProps,
-      hideArrow
+      hideArrow,
+      headerId,
+      descriptionId
     } = OverlayContext.useOverlayContext();
     const handleRef = useForkRef.useForkRef(floating, ref);
+    const sectioned = hasOverlaySection.hasOverlaySection(children);
     const { top, left, width, height, position } = floatingStyles;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       FloatingComponent,
@@ -59,13 +65,20 @@ const OverlayPanel = React.forwardRef(
           context,
           outsideElementsInert: true
         },
-        "aria-labelledby": ariaLabelledby,
+        "aria-label": ariaLabel,
+        "aria-labelledby": clsx.clsx(ariaLabelledby, headerId) || void 0,
+        "aria-describedby": clsx.clsx(ariaDescribedby, descriptionId) || void 0,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rest, children: [
-            " ",
-            children,
-            " "
-          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: clsx.clsx(withBaseName("content"), {
+                [withBaseName("sectioned")]: sectioned
+              }),
+              ...rest,
+              children
+            }
+          ),
           !hideArrow && /* @__PURE__ */ jsxRuntime.jsx(
             react.FloatingArrow,
             {

package/dist-cjs/overlay/OverlayPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayPanel.js","sources":["../src/overlay/OverlayPanel.tsx"],"sourcesContent":["import { FloatingArrow } 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 ReactNode,\n} from \"react\";\nimport { makePrefixer, useFloatingComponent, useForkRef } from \"../utils\";\nimport { useOverlayContext } from \"./OverlayContext\";\nimport overlayPanelCss from \"./OverlayPanel.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanel\");\nexport interface OverlayPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of Overlay Panel\n   */\n  children?: ReactNode;\n}\n\nexport const OverlayPanel = forwardRef<HTMLDivElement, OverlayPanelProps>(\n  function OverlayPanel(props, ref) {\n    const {\n      className,\n      \"aria-labelledby\": ariaLabelledby,\n      children,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-overlay-panel\",\n      css: overlayPanelCss,\n      window: targetWindow,\n    });\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const {\n      openState,\n      floatingStyles,\n      context,\n      getFloatingProps,\n      floating,\n      arrowProps,\n      hideArrow,\n    } = useOverlayContext();\n\n    const handleRef = useForkRef<HTMLDivElement>(floating, ref);\n\n    const { top, left, width, height, position } = floatingStyles;\n\n    return (\n      <FloatingComponent\n        open={openState}\n        className={clsx(withBaseName(), className)}\n        aria-modal=\"true\"\n        {...getFloatingProps()}\n        ref={handleRef}\n        width={width}\n        height={height}\n        top={top}\n        left={left}\n        position={position}\n        focusManagerProps={{\n          context: context,\n          outsideElementsInert: true,\n        }}\n        aria-labelledby={ariaLabelledby}\n      >\n        <div {...rest}> {children} </div>\n        {!hideArrow && (\n          <FloatingArrow\n            {...arrowProps}\n            className={withBaseName(\"arrow\")}\n            strokeWidth={1}\n            fill=\"var(--overlay-background)\"\n            stroke=\"var(--overlay-borderColor)\"\n            height={6}\n            width={12}\n          />\n        )}\n      </FloatingComponent>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","OverlayPanel","useWindow","useComponentCssInjection","overlayPanelCss","useFloatingComponent","useOverlayContext","useForkRef","jsxs","clsx","jsx","FloatingArrow"],"mappings":";;;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA;AAQ7C,MAAM,YAAA,GAAeC,gBAAA;AAAA,EAC1B,SAASC,aAAAA,CAAa,KAAA,EAAO,GAAA,EAAK;AAChC,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,iBAAA,EAAmB,cAAA;AAAA,MACnB,QAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,oBAAA;AAAA,MACR,GAAA,EAAKC,cAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAA,EAAkB,GAAIC,kCAAA,EAAqB;AAE9D,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,cAAA;AAAA,MACA,OAAA;AAAA,MACA,gBAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,QACEC,gCAAA,EAAkB;AAEtB,IAAA,MAAM,SAAA,GAAYC,qBAAA,CAA2B,QAAA,EAAU,GAAG,CAAA;AAE1D,IAAA,MAAM,EAAE,GAAA,EAAK,IAAA,EAAM,KAAA,EAAO,MAAA,EAAQ,UAAS,GAAI,cAAA;AAE/C,IAAA,uBACEC,eAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,SAAA;AAAA,QACN,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,YAAA,EAAW,MAAA;AAAA,QACV,GAAG,gBAAA,EAAiB;AAAA,QACrB,GAAA,EAAK,SAAA;AAAA,QACL,KAAA;AAAA,QACA,MAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAA;AAAA,QACA,QAAA;AAAA,QACA,iBAAA,EAAmB;AAAA,UACjB,OAAA;AAAA,UACA,oBAAA,EAAsB;AAAA,SACxB;AAAA,QACA,iBAAA,EAAiB,cAAA;AAAA,QAEjB,QAAA,EAAA;AAAA,0BAAAD,eAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,QAAA,EAAA;AAAA,YAAA,GAAA;AAAA,YAAE,QAAA;AAAA,YAAS;AAAA,WAAA,EAAC,CAAA;AAAA,UAC1B,CAAC,SAAA,oBACAE,cAAA;AAAA,YAACC,mBAAA;AAAA,YAAA;AAAA,cACE,GAAG,UAAA;AAAA,cACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAC/B,WAAA,EAAa,CAAA;AAAA,cACb,IAAA,EAAK,2BAAA;AAAA,cACL,MAAA,EAAO,4BAAA;AAAA,cACP,MAAA,EAAQ,CAAA;AAAA,cACR,KAAA,EAAO;AAAA;AAAA;AACT;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"OverlayPanel.js","sources":["../src/overlay/OverlayPanel.tsx"],"sourcesContent":["import { FloatingArrow } 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 ReactNode,\n} from \"react\";\nimport { makePrefixer, useFloatingComponent, useForkRef } from \"../utils\";\nimport { hasOverlaySection } from \"./hasOverlaySection\";\nimport { useOverlayContext } from \"./OverlayContext\";\nimport overlayPanelCss from \"./OverlayPanel.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanel\");\nexport interface OverlayPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of Overlay Panel\n   */\n  children?: ReactNode;\n}\n\nexport const OverlayPanel = forwardRef<HTMLDivElement, OverlayPanelProps>(\n  function OverlayPanel(props, ref) {\n    const {\n      className,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledby,\n      \"aria-describedby\": ariaDescribedby,\n      children,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-overlay-panel\",\n      css: overlayPanelCss,\n      window: targetWindow,\n    });\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const {\n      openState,\n      floatingStyles,\n      context,\n      getFloatingProps,\n      floating,\n      arrowProps,\n      hideArrow,\n      headerId,\n      descriptionId,\n    } = useOverlayContext();\n\n    const handleRef = useForkRef<HTMLDivElement>(floating, ref);\n\n    const sectioned = hasOverlaySection(children);\n\n    const { top, left, width, height, position } = floatingStyles;\n\n    return (\n      <FloatingComponent\n        open={openState}\n        className={clsx(withBaseName(), className)}\n        aria-modal=\"true\"\n        {...getFloatingProps()}\n        ref={handleRef}\n        width={width}\n        height={height}\n        top={top}\n        left={left}\n        position={position}\n        focusManagerProps={{\n          context: context,\n          outsideElementsInert: true,\n        }}\n        aria-label={ariaLabel}\n        aria-labelledby={clsx(ariaLabelledby, headerId) || undefined}\n        aria-describedby={clsx(ariaDescribedby, descriptionId) || undefined}\n      >\n        <div\n          className={clsx(withBaseName(\"content\"), {\n            [withBaseName(\"sectioned\")]: sectioned,\n          })}\n          {...rest}\n        >\n          {children}\n        </div>\n        {!hideArrow && (\n          <FloatingArrow\n            {...arrowProps}\n            className={withBaseName(\"arrow\")}\n            strokeWidth={1}\n            fill=\"var(--overlay-background)\"\n            stroke=\"var(--overlay-borderColor)\"\n            height={6}\n            width={12}\n          />\n        )}\n      </FloatingComponent>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","OverlayPanel","useWindow","useComponentCssInjection","overlayPanelCss","useFloatingComponent","useOverlayContext","useForkRef","hasOverlaySection","jsxs","clsx","jsx","FloatingArrow"],"mappings":";;;;;;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA;AAQ7C,MAAM,YAAA,GAAeC,gBAAA;AAAA,EAC1B,SAASC,aAAAA,CAAa,KAAA,EAAO,GAAA,EAAK;AAChC,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,YAAA,EAAc,SAAA;AAAA,MACd,iBAAA,EAAmB,cAAA;AAAA,MACnB,kBAAA,EAAoB,eAAA;AAAA,MACpB,QAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,oBAAA;AAAA,MACR,GAAA,EAAKC,cAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAA,EAAkB,GAAIC,kCAAA,EAAqB;AAE9D,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,cAAA;AAAA,MACA,OAAA;AAAA,MACA,gBAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA,QACEC,gCAAA,EAAkB;AAEtB,IAAA,MAAM,SAAA,GAAYC,qBAAA,CAA2B,QAAA,EAAU,GAAG,CAAA;AAE1D,IAAA,MAAM,SAAA,GAAYC,oCAAkB,QAAQ,CAAA;AAE5C,IAAA,MAAM,EAAE,GAAA,EAAK,IAAA,EAAM,KAAA,EAAO,MAAA,EAAQ,UAAS,GAAI,cAAA;AAE/C,IAAA,uBACEC,eAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,SAAA;AAAA,QACN,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,YAAA,EAAW,MAAA;AAAA,QACV,GAAG,gBAAA,EAAiB;AAAA,QACrB,GAAA,EAAK,SAAA;AAAA,QACL,KAAA;AAAA,QACA,MAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAA;AAAA,QACA,QAAA;AAAA,QACA,iBAAA,EAAmB;AAAA,UACjB,OAAA;AAAA,UACA,oBAAA,EAAsB;AAAA,SACxB;AAAA,QACA,YAAA,EAAY,SAAA;AAAA,QACZ,iBAAA,EAAiBA,SAAA,CAAK,cAAA,EAAgB,QAAQ,CAAA,IAAK,MAAA;AAAA,QACnD,kBAAA,EAAkBA,SAAA,CAAK,eAAA,EAAiB,aAAa,CAAA,IAAK,MAAA;AAAA,QAE1D,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAWD,SAAA,CAAK,YAAA,CAAa,SAAS,CAAA,EAAG;AAAA,gBACvC,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG;AAAA,eAC9B,CAAA;AAAA,cACA,GAAG,IAAA;AAAA,cAEH;AAAA;AAAA,WACH;AAAA,UACC,CAAC,SAAA,oBACAC,cAAA;AAAA,YAACC,mBAAA;AAAA,YAAA;AAAA,cACE,GAAG,UAAA;AAAA,cACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAC/B,WAAA,EAAa,CAAA;AAAA,cACb,IAAA,EAAK,2BAAA;AAAA,cACL,MAAA,EAAO,4BAAA;AAAA,cACP,MAAA,EAAQ,CAAA;AAAA,cACR,KAAA,EAAO;AAAA;AAAA;AACT;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/overlay/OverlayPanelCloseButton.js

@@ -15,7 +15,7 @@ require('../viewport/ViewportProvider.js');
 var OverlayPanelCloseButton$1 = require('./OverlayPanelCloseButton.css.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltOverlayPanelCloseButton");
-const OverlayPanelCloseButton = React.forwardRef(function OverlayPanelButton({ className, ...rest }, ref) {
+const OverlayPanelCloseButton = React.forwardRef(function OverlayPanelCloseButton2({ className, ...rest }, ref) {
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
     testId: "salt-overlay-panel-close-button",

package/dist-cjs/overlay/OverlayPanelCloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayPanelCloseButton.js","sources":["../src/overlay/OverlayPanelCloseButton.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\";\nimport overlayPanelCloseButtonCss from \"./OverlayPanelCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanelCloseButton\");\n\nexport const OverlayPanelCloseButton = forwardRef<\n  HTMLButtonElement,\n  ButtonProps\n>(function OverlayPanelButton({ className, ...rest }, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overlay-panel-close-button\",\n    css: overlayPanelCloseButtonCss,\n    window: targetWindow,\n  });\n  const { CloseIcon } = useIcon();\n\n  return (\n    <div className={clsx(withBaseName(), className)}>\n      <Button\n        ref={ref}\n        aria-label=\"Close overlay\"\n        appearance=\"transparent\"\n        className={withBaseName(\"button\")}\n        {...rest}\n      >\n        <CloseIcon aria-hidden />\n      </Button>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","overlayPanelCloseButtonCss","useIcon","clsx","jsx","Button"],"mappings":";;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,6BAA6B,CAAA;AAExD,MAAM,uBAAA,GAA0BC,iBAGrC,SAAS,kBAAA,CAAmB,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AACzD,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,iCAAA;AAAA,IACR,GAAA,EAAKC,yBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AACD,EAAA,MAAM,EAAE,SAAA,EAAU,GAAIC,4BAAA,EAAQ;AAE9B,EAAA,sCACG,KAAA,EAAA,EAAI,SAAA,EAAWC,UAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAC5C,QAAA,kBAAAC,cAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,YAAA,EAAW,eAAA;AAAA,MACX,UAAA,EAAW,aAAA;AAAA,MACX,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,MAC/B,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAAD,cAAA,CAAC,SAAA,EAAA,EAAU,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA,GACzB,EACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"OverlayPanelCloseButton.js","sources":["../src/overlay/OverlayPanelCloseButton.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\";\nimport overlayPanelCloseButtonCss from \"./OverlayPanelCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanelCloseButton\");\n\nexport const OverlayPanelCloseButton = forwardRef<\n  HTMLButtonElement,\n  ButtonProps\n>(function OverlayPanelCloseButton({ className, ...rest }, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overlay-panel-close-button\",\n    css: overlayPanelCloseButtonCss,\n    window: targetWindow,\n  });\n  const { CloseIcon } = useIcon();\n\n  return (\n    <div className={clsx(withBaseName(), className)}>\n      <Button\n        ref={ref}\n        aria-label=\"Close overlay\"\n        appearance=\"transparent\"\n        className={withBaseName(\"button\")}\n        {...rest}\n      >\n        <CloseIcon aria-hidden />\n      </Button>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","OverlayPanelCloseButton","useWindow","useComponentCssInjection","overlayPanelCloseButtonCss","useIcon","clsx","jsx","Button"],"mappings":";;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,6BAA6B,CAAA;AAExD,MAAM,uBAAA,GAA0BC,iBAGrC,SAASC,wBAAAA,CAAwB,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AAC9D,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,iCAAA;AAAA,IACR,GAAA,EAAKC,yBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AACD,EAAA,MAAM,EAAE,SAAA,EAAU,GAAIC,4BAAA,EAAQ;AAE9B,EAAA,sCACG,KAAA,EAAA,EAAI,SAAA,EAAWC,UAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAC5C,QAAA,kBAAAC,cAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,YAAA,EAAW,eAAA;AAAA,MACX,UAAA,EAAW,aAAA;AAAA,MACX,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,MAC/B,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAAD,cAAA,CAAC,SAAA,EAAA,EAAU,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA,GACzB,EACF,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/overlay/OverlayPanelContent.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltOverlayPanelContent {\n  animation: var(--salt-animation-fade-in-center);\n  position: relative;\n  overflow: hidden;\n  padding: var(--saltOverlay-content-padding, var(--salt-spacing-100));\n}\n\n.saltOverlayPanelContent-overflow {\n  padding-right: var(--salt-spacing-100);\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  overflow-y: auto;\n}\n.saltOverlayPanelContent-overflow.saltOverlayPanelContent-scroll-top {\n  border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);\n}\n";
+var css_248z = ".saltOverlayPanelContent {\n  animation: var(--salt-animation-fade-in-center);\n  position: relative;\n  overflow: hidden;\n  padding: var(--saltOverlay-content-padding, var(--salt-spacing-100));\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n}\n\n.saltOverlayHeader ~ .saltOverlayPanelContent {\n  padding-top: 0;\n}\n\n.saltOverlayPanelContent:not(:last-child) {\n  padding-bottom: 0;\n}\n\n.saltOverlayPanelContent-container {\n  flex: 1;\n  min-width: 0;\n}\n\n.saltOverlayPanelContent-overflow {\n  padding-right: var(--salt-spacing-100);\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  overflow-y: auto;\n}\n.saltOverlayPanelContent-overflow.saltOverlayPanelContent-scroll-top {\n  border-top-color: var(--salt-separable-tertiary-borderColor);\n}\n\n.saltOverlayPanelContent-overflow.saltOverlayPanelContent-scroll-bottom {\n  border-bottom-color: var(--salt-separable-tertiary-borderColor);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=OverlayPanelContent.css.js.map

package/dist-cjs/overlay/OverlayPanelContent.js

@@ -5,7 +5,6 @@ var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var clsx = require('clsx');
 var React = require('react');
-var debounce = require('../utils/debounce.js');
 var makePrefixer = require('../utils/makePrefixer.js');
 var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
@@ -30,25 +29,24 @@ const OverlayPanelContent = React.forwardRef(function OverlayPanelContent2(props
   const [isOverflowing, setIsOverflowing] = React.useState(false);
   const divRef = React.useRef(null);
   const containerRef = useForkRef.useForkRef(divRef, ref);
-  const handleScroll = debounce.debounce(() => {
+  const updateScrollState = React.useCallback(() => {
     const container = divRef.current;
     if (!container) return;
-    setScrollBarTop(container.scrollTop > 0);
-    setScrollBarBottom(
-      container.scrollHeight - container.scrollTop - container.clientHeight !== 0
-    );
-  });
-  const checkOverflow = React.useCallback(() => {
-    if (!divRef.current) return;
+    const remainingScroll = container.scrollHeight - container.scrollTop - container.clientHeight;
     setIsOverflowing(
-      divRef.current.scrollHeight > divRef.current.offsetHeight + 1
+      container.scrollHeight > container.offsetHeight + 1
       // var(--salt-size-thickness-100)
     );
+    setScrollBarTop(container.scrollTop > 0);
+    setScrollBarBottom(remainingScroll > 1);
   }, []);
-  useResizeObserver.useResizeObserver({ ref: divRef, onResize: checkOverflow });
+  const handleScroll = () => {
+    targetWindow == null ? void 0 : targetWindow.requestAnimationFrame(updateScrollState);
+  };
+  useResizeObserver.useResizeObserver({ ref: divRef, onResize: updateScrollState });
   useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
-    checkOverflow();
-  }, [checkOverflow]);
+    updateScrollState();
+  }, [updateScrollState]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName(), className), children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {

package/dist-cjs/overlay/OverlayPanelContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayPanelContent.js","sources":["../src/overlay/OverlayPanelContent.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  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  debounce,\n  makePrefixer,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n  useResizeObserver,\n} from \"../utils\";\nimport overlayPanelContentCss from \"./OverlayPanelContent.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanelContent\");\n\nexport interface OverlayPanelContentProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of Overlay Panel Content\n   */\n  children?: ReactNode;\n}\n\nexport const OverlayPanelContent = forwardRef<\n  HTMLDivElement,\n  OverlayPanelContentProps\n>(function OverlayPanelContent(props, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overlay-panel-content\",\n    css: overlayPanelContentCss,\n    window: targetWindow,\n  });\n\n  const { children, className, ...rest } = props;\n  const [scrollBarTop, setScrollBarTop] = useState(false);\n  const [scrollBarBottom, setScrollBarBottom] = useState(true);\n  const [isOverflowing, setIsOverflowing] = useState(false);\n  const divRef = useRef<HTMLDivElement>(null);\n  const containerRef = useForkRef(divRef, ref);\n  const handleScroll = debounce(() => {\n    const container = divRef.current;\n    if (!container) return;\n    setScrollBarTop(container.scrollTop > 0);\n    setScrollBarBottom(\n      container.scrollHeight - container.scrollTop - container.clientHeight !==\n        0,\n    );\n  });\n\n  const checkOverflow = useCallback(() => {\n    if (!divRef.current) return;\n    setIsOverflowing(\n      divRef.current.scrollHeight > divRef.current.offsetHeight + 1, // var(--salt-size-thickness-100)\n    );\n  }, []);\n\n  useResizeObserver({ ref: divRef, onResize: checkOverflow });\n\n  useIsomorphicLayoutEffect(() => {\n    checkOverflow();\n  }, [checkOverflow]);\n\n  return (\n    <div className={clsx(withBaseName(), className)}>\n      <div\n        className={clsx(withBaseName(\"container\"), {\n          [withBaseName(\"overflow\")]: isOverflowing,\n          [withBaseName(\"scroll-top\")]: isOverflowing && scrollBarTop,\n          [withBaseName(\"scroll-bottom\")]: isOverflowing && scrollBarBottom,\n        })}\n        onScrollCapture={handleScroll}\n        {...rest}\n        ref={containerRef}\n      >\n        {children}\n      </div>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","OverlayPanelContent","useWindow","useComponentCssInjection","overlayPanelContentCss","useState","useRef","useForkRef","debounce","useCallback","useResizeObserver","useIsomorphicLayoutEffect","clsx","jsx"],"mappings":";;;;;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,0BAAa,yBAAyB,CAAA;AAUpD,MAAM,mBAAA,GAAsBC,gBAAA,CAGjC,SAASC,oBAAAA,CAAoB,OAAO,GAAA,EAAK;AACzC,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,4BAAA;AAAA,IACR,GAAA,EAAKC,qBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AACzC,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIC,eAAS,KAAK,CAAA;AACtD,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAIA,eAAS,IAAI,CAAA;AAC3D,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIA,eAAS,KAAK,CAAA;AACxD,EAAA,MAAM,MAAA,GAASC,aAAuB,IAAI,CAAA;AAC1C,EAAA,MAAM,YAAA,GAAeC,qBAAA,CAAW,MAAA,EAAQ,GAAG,CAAA;AAC3C,EAAA,MAAM,YAAA,GAAeC,kBAAS,MAAM;AAClC,IAAA,MAAM,YAAY,MAAA,CAAO,OAAA;AACzB,IAAA,IAAI,CAAC,SAAA,EAAW;AAChB,IAAA,eAAA,CAAgB,SAAA,CAAU,YAAY,CAAC,CAAA;AACvC,IAAA,kBAAA;AAAA,MACE,SAAA,CAAU,YAAA,GAAe,SAAA,CAAU,SAAA,GAAY,UAAU,YAAA,KACvD;AAAA,KACJ;AAAA,EACF,CAAC,CAAA;AAED,EAAA,MAAM,aAAA,GAAgBC,kBAAY,MAAM;AACtC,IAAA,IAAI,CAAC,OAAO,OAAA,EAAS;AACrB,IAAA,gBAAA;AAAA,MACE,MAAA,CAAO,OAAA,CAAQ,YAAA,GAAe,MAAA,CAAO,QAAQ,YAAA,GAAe;AAAA;AAAA,KAC9D;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAAC,mCAAA,CAAkB,EAAE,GAAA,EAAK,MAAA,EAAQ,QAAA,EAAU,eAAe,CAAA;AAE1D,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,aAAA,EAAc;AAAA,EAChB,CAAA,EAAG,CAAC,aAAa,CAAC,CAAA;AAElB,EAAA,sCACG,KAAA,EAAA,EAAI,SAAA,EAAWC,UAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAC5C,QAAA,kBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWD,SAAA,CAAK,YAAA,CAAa,WAAW,CAAA,EAAG;AAAA,QACzC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,aAAA;AAAA,QAC5B,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG,aAAA,IAAiB,YAAA;AAAA,QAC/C,CAAC,YAAA,CAAa,eAAe,CAAC,GAAG,aAAA,IAAiB;AAAA,OACnD,CAAA;AAAA,MACD,eAAA,EAAiB,YAAA;AAAA,MAChB,GAAG,IAAA;AAAA,MACJ,GAAA,EAAK,YAAA;AAAA,MAEJ;AAAA;AAAA,GACH,EACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"OverlayPanelContent.js","sources":["../src/overlay/OverlayPanelContent.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  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  makePrefixer,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n  useResizeObserver,\n} from \"../utils\";\nimport overlayPanelContentCss from \"./OverlayPanelContent.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanelContent\");\n\nexport interface OverlayPanelContentProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of Overlay Panel Content\n   */\n  children?: ReactNode;\n}\n\nexport const OverlayPanelContent = forwardRef<\n  HTMLDivElement,\n  OverlayPanelContentProps\n>(function OverlayPanelContent(props, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overlay-panel-content\",\n    css: overlayPanelContentCss,\n    window: targetWindow,\n  });\n\n  const { children, className, ...rest } = props;\n  const [scrollBarTop, setScrollBarTop] = useState(false);\n  const [scrollBarBottom, setScrollBarBottom] = useState(true);\n  const [isOverflowing, setIsOverflowing] = useState(false);\n  const divRef = useRef<HTMLDivElement>(null);\n  const containerRef = useForkRef(divRef, ref);\n\n  const updateScrollState = useCallback(() => {\n    const container = divRef.current;\n    if (!container) return;\n\n    const remainingScroll =\n      container.scrollHeight - container.scrollTop - container.clientHeight;\n    setIsOverflowing(\n      container.scrollHeight > container.offsetHeight + 1, // var(--salt-size-thickness-100)\n    );\n    setScrollBarTop(container.scrollTop > 0);\n    setScrollBarBottom(remainingScroll > 1);\n  }, []);\n\n  const handleScroll = () => {\n    targetWindow?.requestAnimationFrame(updateScrollState);\n  };\n\n  useResizeObserver({ ref: divRef, onResize: updateScrollState });\n\n  useIsomorphicLayoutEffect(() => {\n    updateScrollState();\n  }, [updateScrollState]);\n\n  return (\n    <div className={clsx(withBaseName(), className)}>\n      <div\n        className={clsx(withBaseName(\"container\"), {\n          [withBaseName(\"overflow\")]: isOverflowing,\n          [withBaseName(\"scroll-top\")]: isOverflowing && scrollBarTop,\n          [withBaseName(\"scroll-bottom\")]: isOverflowing && scrollBarBottom,\n        })}\n        onScrollCapture={handleScroll}\n        {...rest}\n        ref={containerRef}\n      >\n        {children}\n      </div>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","OverlayPanelContent","useWindow","useComponentCssInjection","overlayPanelContentCss","useState","useRef","useForkRef","useCallback","useResizeObserver","useIsomorphicLayoutEffect","clsx","jsx"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAeA,0BAAa,yBAAyB,CAAA;AAUpD,MAAM,mBAAA,GAAsBC,gBAAA,CAGjC,SAASC,oBAAAA,CAAoB,OAAO,GAAA,EAAK;AACzC,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,4BAAA;AAAA,IACR,GAAA,EAAKC,qBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AACzC,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIC,eAAS,KAAK,CAAA;AACtD,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAIA,eAAS,IAAI,CAAA;AAC3D,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIA,eAAS,KAAK,CAAA;AACxD,EAAA,MAAM,MAAA,GAASC,aAAuB,IAAI,CAAA;AAC1C,EAAA,MAAM,YAAA,GAAeC,qBAAA,CAAW,MAAA,EAAQ,GAAG,CAAA;AAE3C,EAAA,MAAM,iBAAA,GAAoBC,kBAAY,MAAM;AAC1C,IAAA,MAAM,YAAY,MAAA,CAAO,OAAA;AACzB,IAAA,IAAI,CAAC,SAAA,EAAW;AAEhB,IAAA,MAAM,eAAA,GACJ,SAAA,CAAU,YAAA,GAAe,SAAA,CAAU,YAAY,SAAA,CAAU,YAAA;AAC3D,IAAA,gBAAA;AAAA,MACE,SAAA,CAAU,YAAA,GAAe,SAAA,CAAU,YAAA,GAAe;AAAA;AAAA,KACpD;AACA,IAAA,eAAA,CAAgB,SAAA,CAAU,YAAY,CAAC,CAAA;AACvC,IAAA,kBAAA,CAAmB,kBAAkB,CAAC,CAAA;AAAA,EACxC,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,eAAe,MAAM;AACzB,IAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,qBAAA,CAAsB,iBAAA,CAAA;AAAA,EACtC,CAAA;AAEA,EAAAC,mCAAA,CAAkB,EAAE,GAAA,EAAK,MAAA,EAAQ,QAAA,EAAU,mBAAmB,CAAA;AAE9D,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,iBAAA,EAAkB;AAAA,EACpB,CAAA,EAAG,CAAC,iBAAiB,CAAC,CAAA;AAEtB,EAAA,sCACG,KAAA,EAAA,EAAI,SAAA,EAAWC,UAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAC5C,QAAA,kBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWD,SAAA,CAAK,YAAA,CAAa,WAAW,CAAA,EAAG;AAAA,QACzC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,aAAA;AAAA,QAC5B,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG,aAAA,IAAiB,YAAA;AAAA,QAC/C,CAAC,YAAA,CAAa,eAAe,CAAC,GAAG,aAAA,IAAiB;AAAA,OACnD,CAAA;AAAA,MACD,eAAA,EAAiB,YAAA;AAAA,MAChB,GAAG,IAAA;AAAA,MACJ,GAAA,EAAK,YAAA;AAAA,MAEJ;AAAA;AAAA,GACH,EACF,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/overlay/hasOverlaySection.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var React = require('react');
+var OverlayFooter = require('./OverlayFooter.js');
+var OverlayHeader = require('./OverlayHeader.js');
+var OverlayPanelContent = require('./OverlayPanelContent.js');
+
+const overlaySectionTypes = [OverlayHeader.OverlayHeader, OverlayPanelContent.OverlayPanelContent, OverlayFooter.OverlayFooter];
+function hasOverlaySection(children) {
+  return React.Children.toArray(children).some((child) => {
+    if (!React.isValidElement(child)) return false;
+    if (child.type === React.Fragment) {
+      return hasOverlaySection(
+        child.props.children
+      );
+    }
+    return overlaySectionTypes.some(
+      (sectionType) => child.type === sectionType
+    );
+  });
+}
+
+exports.hasOverlaySection = hasOverlaySection;
+//# sourceMappingURL=hasOverlaySection.js.map

package/dist-cjs/overlay/hasOverlaySection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hasOverlaySection.js","sources":["../src/overlay/hasOverlaySection.ts"],"sourcesContent":["import { Children, Fragment, isValidElement, type ReactNode } from \"react\";\nimport { OverlayFooter } from \"./OverlayFooter\";\nimport { OverlayHeader } from \"./OverlayHeader\";\nimport { OverlayPanelContent } from \"./OverlayPanelContent\";\n\nconst overlaySectionTypes = [OverlayHeader, OverlayPanelContent, OverlayFooter];\n\nexport function hasOverlaySection(children: ReactNode): boolean {\n  return Children.toArray(children).some((child) => {\n    if (!isValidElement(child)) return false;\n\n    if (child.type === Fragment) {\n      return hasOverlaySection(\n        (child.props as { children?: ReactNode }).children,\n      );\n    }\n\n    return overlaySectionTypes.some(\n      (sectionType) => child.type === sectionType,\n    );\n  });\n}\n"],"names":["OverlayHeader","OverlayPanelContent","OverlayFooter","Children","isValidElement","Fragment"],"mappings":";;;;;;;AAKA,MAAM,mBAAA,GAAsB,CAACA,2BAAA,EAAeC,uCAAA,EAAqBC,2BAAa,CAAA;AAEvE,SAAS,kBAAkB,QAAA,EAA8B;AAC9D,EAAA,OAAOC,eAAS,OAAA,CAAQ,QAAQ,CAAA,CAAE,IAAA,CAAK,CAAC,KAAA,KAAU;AAChD,IAAA,IAAI,CAACC,oBAAA,CAAe,KAAK,CAAA,EAAG,OAAO,KAAA;AAEnC,IAAA,IAAI,KAAA,CAAM,SAASC,cAAA,EAAU;AAC3B,MAAA,OAAO,iBAAA;AAAA,QACJ,MAAM,KAAA,CAAmC;AAAA,OAC5C;AAAA,IACF;AAEA,IAAA,OAAO,mBAAA,CAAoB,IAAA;AAAA,MACzB,CAAC,WAAA,KAAgB,KAAA,CAAM,IAAA,KAAS;AAAA,KAClC;AAAA,EACF,CAAC,CAAA;AACH;;;;"}

package/dist-cjs/pagination/CompactPaginator.js

@@ -9,6 +9,8 @@ var Button = require('../button/Button.js');
 var SemanticIconProvider = require('../semantic-icon-provider/SemanticIconProvider.js');
 require('../text/Code.js');
 require('../text/Display.js');
+require('../text/Editorial.js');
+require('../text/Eyebrow.js');
 require('../text/Headings.js');
 require('../text/Label.js');
 var Text = require('../text/Text.js');

package/dist-cjs/pagination/CompactPaginator.js.map

@@ -1 +1 @@
-{"version":3,"file":"CompactPaginator.js","sources":["../src/pagination/CompactPaginator.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 MouseEventHandler,\n} from \"react\";\nimport { Button } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { Text } from \"../text\";\nimport { makePrefixer } from \"../utils\";\nimport compactPaginatorCss from \"./CompactPaginator.css\";\nimport { PageButton } from \"./PageButton\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nconst withBaseName = makePrefixer(\"saltCompactPaginator\");\n\nexport const CompactPaginator = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(function CompactPaginator({ children, className, ...restProps }, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-compact-paginator\",\n    css: compactPaginatorCss,\n    window: targetWindow,\n  });\n\n  const { NextIcon, PreviousIcon } = useIcon();\n\n  const { count, page, onPageChange } = usePaginationContext();\n\n  const onPreviousPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n    onPageChange(event, Math.max(1, page - 1));\n  };\n\n  const onNextPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n    onPageChange(event, Math.min(page + 1, count));\n  };\n\n  const isOnFirstPage = page === 1;\n  const isOnLastPage = page === count;\n\n  return (\n    <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n      <Button\n        appearance=\"transparent\"\n        aria-label=\"Previous Page\"\n        onClick={onPreviousPage}\n        disabled={isOnFirstPage}\n        className={withBaseName(\"arrowButton\")}\n      >\n        <PreviousIcon aria-hidden />\n      </Button>\n      {children ? children : <PageButton page={page} disabled />}\n      <Text as=\"span\" variant=\"secondary\">\n        of\n      </Text>\n      <PageButton page={count} disabled={isOnLastPage} />\n      <Button\n        appearance=\"transparent\"\n        aria-label=\"Next Page\"\n        onClick={onNextPage}\n        disabled={isOnLastPage}\n        className={withBaseName(\"arrowButton\")}\n      >\n        <NextIcon aria-hidden />\n      </Button>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","CompactPaginator","useWindow","useComponentCssInjection","compactPaginatorCss","useIcon","usePaginationContext","jsxs","clsx","jsx","Button","PageButton","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,0BAAa,sBAAsB,CAAA;AAEjD,MAAM,gBAAA,GAAmBC,gBAAA,CAG9B,SAASC,iBAAAA,CAAiB,EAAE,UAAU,SAAA,EAAW,GAAG,SAAA,EAAU,EAAG,GAAA,EAAK;AACtE,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,wBAAA;AAAA,IACR,GAAA,EAAKC,kBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,QAAA,EAAU,YAAA,EAAa,GAAIC,4BAAA,EAAQ;AAE3C,EAAA,MAAM,EAAE,KAAA,EAAO,IAAA,EAAM,YAAA,KAAiBC,yCAAA,EAAqB;AAE3D,EAAA,MAAM,cAAA,GAAuD,CAAC,KAAA,KAAU;AACtE,IAAA,YAAA,CAAa,OAAO,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,IAAA,GAAO,CAAC,CAAC,CAAA;AAAA,EAC3C,CAAA;AAEA,EAAA,MAAM,UAAA,GAAmD,CAAC,KAAA,KAAU;AAClE,IAAA,YAAA,CAAa,OAAO,IAAA,CAAK,GAAA,CAAI,IAAA,GAAO,CAAA,EAAG,KAAK,CAAC,CAAA;AAAA,EAC/C,CAAA;AAEA,EAAA,MAAM,gBAAgB,IAAA,KAAS,CAAA;AAC/B,EAAA,MAAM,eAAe,IAAA,KAAS,KAAA;AAE9B,EAAA,uBACEC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,SAAA,CAAK,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,SAAA,EAAW,GAAA,EAC9D,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAW,aAAA;AAAA,QACX,YAAA,EAAW,eAAA;AAAA,QACX,OAAA,EAAS,cAAA;AAAA,QACT,QAAA,EAAU,aAAA;AAAA,QACV,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,QAErC,QAAA,kBAAAD,cAAA,CAAC,YAAA,EAAA,EAAa,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA,KAC5B;AAAA,IACC,WAAW,QAAA,mBAAWA,cAAA,CAACE,qBAAA,EAAA,EAAW,IAAA,EAAY,UAAQ,IAAA,EAAC,CAAA;AAAA,mCACvDC,SAAA,EAAA,EAAK,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,aAAY,QAAA,EAAA,IAAA,EAEpC,CAAA;AAAA,oBACAH,cAAA,CAACE,qBAAA,EAAA,EAAW,IAAA,EAAM,KAAA,EAAO,UAAU,YAAA,EAAc,CAAA;AAAA,oBACjDF,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAW,aAAA;AAAA,QACX,YAAA,EAAW,WAAA;AAAA,QACX,OAAA,EAAS,UAAA;AAAA,QACT,QAAA,EAAU,YAAA;AAAA,QACV,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,QAErC,QAAA,kBAAAD,cAAA,CAAC,QAAA,EAAA,EAAS,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA;AACxB,GAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"CompactPaginator.js","sources":["../src/pagination/CompactPaginator.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 MouseEventHandler,\n} from \"react\";\nimport { Button } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { Text } from \"../text\";\nimport { makePrefixer } from \"../utils\";\nimport compactPaginatorCss from \"./CompactPaginator.css\";\nimport { PageButton } from \"./PageButton\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nconst withBaseName = makePrefixer(\"saltCompactPaginator\");\n\nexport const CompactPaginator = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(function CompactPaginator({ children, className, ...restProps }, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-compact-paginator\",\n    css: compactPaginatorCss,\n    window: targetWindow,\n  });\n\n  const { NextIcon, PreviousIcon } = useIcon();\n\n  const { count, page, onPageChange } = usePaginationContext();\n\n  const onPreviousPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n    onPageChange(event, Math.max(1, page - 1));\n  };\n\n  const onNextPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n    onPageChange(event, Math.min(page + 1, count));\n  };\n\n  const isOnFirstPage = page === 1;\n  const isOnLastPage = page === count;\n\n  return (\n    <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n      <Button\n        appearance=\"transparent\"\n        aria-label=\"Previous Page\"\n        onClick={onPreviousPage}\n        disabled={isOnFirstPage}\n        className={withBaseName(\"arrowButton\")}\n      >\n        <PreviousIcon aria-hidden />\n      </Button>\n      {children ? children : <PageButton page={page} disabled />}\n      <Text as=\"span\" variant=\"secondary\">\n        of\n      </Text>\n      <PageButton page={count} disabled={isOnLastPage} />\n      <Button\n        appearance=\"transparent\"\n        aria-label=\"Next Page\"\n        onClick={onNextPage}\n        disabled={isOnLastPage}\n        className={withBaseName(\"arrowButton\")}\n      >\n        <NextIcon aria-hidden />\n      </Button>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","CompactPaginator","useWindow","useComponentCssInjection","compactPaginatorCss","useIcon","usePaginationContext","jsxs","clsx","jsx","Button","PageButton","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,0BAAa,sBAAsB,CAAA;AAEjD,MAAM,gBAAA,GAAmBC,gBAAA,CAG9B,SAASC,iBAAAA,CAAiB,EAAE,UAAU,SAAA,EAAW,GAAG,SAAA,EAAU,EAAG,GAAA,EAAK;AACtE,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,wBAAA;AAAA,IACR,GAAA,EAAKC,kBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,QAAA,EAAU,YAAA,EAAa,GAAIC,4BAAA,EAAQ;AAE3C,EAAA,MAAM,EAAE,KAAA,EAAO,IAAA,EAAM,YAAA,KAAiBC,yCAAA,EAAqB;AAE3D,EAAA,MAAM,cAAA,GAAuD,CAAC,KAAA,KAAU;AACtE,IAAA,YAAA,CAAa,OAAO,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,IAAA,GAAO,CAAC,CAAC,CAAA;AAAA,EAC3C,CAAA;AAEA,EAAA,MAAM,UAAA,GAAmD,CAAC,KAAA,KAAU;AAClE,IAAA,YAAA,CAAa,OAAO,IAAA,CAAK,GAAA,CAAI,IAAA,GAAO,CAAA,EAAG,KAAK,CAAC,CAAA;AAAA,EAC/C,CAAA;AAEA,EAAA,MAAM,gBAAgB,IAAA,KAAS,CAAA;AAC/B,EAAA,MAAM,eAAe,IAAA,KAAS,KAAA;AAE9B,EAAA,uBACEC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,SAAA,CAAK,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,SAAA,EAAW,GAAA,EAC9D,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAW,aAAA;AAAA,QACX,YAAA,EAAW,eAAA;AAAA,QACX,OAAA,EAAS,cAAA;AAAA,QACT,QAAA,EAAU,aAAA;AAAA,QACV,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,QAErC,QAAA,kBAAAD,cAAA,CAAC,YAAA,EAAA,EAAa,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA,KAC5B;AAAA,IACC,WAAW,QAAA,mBAAWA,cAAA,CAACE,qBAAA,EAAA,EAAW,IAAA,EAAY,UAAQ,IAAA,EAAC,CAAA;AAAA,mCACvDC,SAAA,EAAA,EAAK,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,aAAY,QAAA,EAAA,IAAA,EAEpC,CAAA;AAAA,oBACAH,cAAA,CAACE,qBAAA,EAAA,EAAW,IAAA,EAAM,KAAA,EAAO,UAAU,YAAA,EAAc,CAAA;AAAA,oBACjDF,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAW,aAAA;AAAA,QACX,YAAA,EAAW,WAAA;AAAA,QACX,OAAA,EAAS,UAAA;AAAA,QACT,QAAA,EAAU,YAAA;AAAA,QACV,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,QAErC,QAAA,kBAAAD,cAAA,CAAC,QAAA,EAAA,EAAS,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA;AACxB,GAAA,EACF,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/pagination/GoToInput.js

@@ -10,6 +10,8 @@ require('../form-field-context/FormFieldContext.js');
 require('../status-indicator/StatusIndicator.js');
 require('../text/Code.js');
 require('../text/Display.js');
+require('../text/Editorial.js');
+require('../text/Eyebrow.js');
 require('../text/Headings.js');
 require('../text/Label.js');
 require('../text/Text.js');

package/dist-cjs/pagination/GoToInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"GoToInput.js","sources":["../src/pagination/GoToInput.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEventHandler,\n  forwardRef,\n  type HTMLAttributes,\n  type KeyboardEventHandler,\n  type Ref,\n  useState,\n} from \"react\";\nimport { FormField, FormFieldLabel } from \"../form-field\";\nimport { Input } from \"../input\";\nimport { makePrefixer } from \"../utils\";\nimport goToInputCss from \"./GoToInput.css\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nconst withBaseName = makePrefixer(\"saltGoToInput\");\nexport interface GoToInputProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Input label.\n   */\n  label?: string;\n  /**\n   * Optional ref for the input component\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * Change input variant.\n   */\n  inputVariant?: \"primary\" | \"secondary\";\n}\n\nexport const GoToInput = forwardRef<HTMLDivElement, GoToInputProps>(\n  function GoToInput(\n    {\n      className,\n      inputRef,\n      inputVariant = \"primary\",\n      label = \"Go to\",\n      ...restProps\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-go-to-input\",\n      css: goToInputCss,\n      window: targetWindow,\n    });\n\n    const { count, onPageChange } = usePaginationContext();\n    const [inputValue, setInputValue] = useState(\"\");\n\n    const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      setInputValue(event.target.value);\n    };\n\n    const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n      if (event.key === \"Enter\") {\n        const pageValue = Number(inputValue);\n        if (\n          !inputValue.startsWith(\"0\") &&\n          !Number.isNaN(pageValue) &&\n          pageValue > 0 &&\n          pageValue <= count\n        ) {\n          onPageChange(event, pageValue);\n        }\n        setInputValue(\"\");\n      }\n    };\n\n    const onBlur = () => {\n      setInputValue(\"\");\n    };\n\n    const widthCh = `${`${count}`.length}ch`;\n\n    return (\n      <FormField\n        labelPlacement=\"left\"\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        {...restProps}\n      >\n        <FormFieldLabel>{label}</FormFieldLabel>\n        <Input\n          className={clsx(withBaseName(\"input\"), {\n            [withBaseName(\"inputDefaultSize\")]: count < 100,\n          })}\n          ref={inputRef}\n          inputProps={{\n            style: { width: widthCh },\n          }}\n          onBlur={onBlur}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n          value={inputValue}\n          textAlign={\"center\"}\n          variant={inputVariant}\n        />\n      </FormField>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","GoToInput","useWindow","useComponentCssInjection","goToInputCss","usePaginationContext","useState","jsxs","FormField","clsx","jsx","FormFieldLabel","Input"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA;AAgB1C,MAAM,SAAA,GAAYC,gBAAA;AAAA,EACvB,SAASC,UAAAA,CACP;AAAA,IACE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAA,GAAe,SAAA;AAAA,IACf,KAAA,GAAQ,OAAA;AAAA,IACR,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,kBAAA;AAAA,MACR,GAAA,EAAKC,WAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,YAAA,EAAa,GAAIC,yCAAA,EAAqB;AACrD,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIC,eAAS,EAAE,CAAA;AAE/C,IAAA,MAAM,QAAA,GAAiD,CAAC,KAAA,KAAU;AAChE,MAAA,aAAA,CAAc,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,IAClC,CAAA;AAEA,IAAA,MAAM,SAAA,GAAoD,CAAC,KAAA,KAAU;AACnE,MAAA,IAAI,KAAA,CAAM,QAAQ,OAAA,EAAS;AACzB,QAAA,MAAM,SAAA,GAAY,OAAO,UAAU,CAAA;AACnC,QAAA,IACE,CAAC,UAAA,CAAW,UAAA,CAAW,GAAG,CAAA,IAC1B,CAAC,MAAA,CAAO,KAAA,CAAM,SAAS,CAAA,IACvB,SAAA,GAAY,CAAA,IACZ,aAAa,KAAA,EACb;AACA,UAAA,YAAA,CAAa,OAAO,SAAS,CAAA;AAAA,QAC/B;AACA,QAAA,aAAA,CAAc,EAAE,CAAA;AAAA,MAClB;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,SAAS,MAAM;AACnB,MAAA,aAAA,CAAc,EAAE,CAAA;AAAA,IAClB,CAAA;AAEA,IAAA,MAAM,OAAA,GAAU,CAAA,EAAG,CAAA,EAAG,KAAK,GAAG,MAAM,CAAA,EAAA,CAAA;AAEpC,IAAA,uBACEC,eAAA;AAAA,MAACC,mBAAA;AAAA,MAAA;AAAA,QACC,cAAA,EAAe,MAAA;AAAA,QACf,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG,SAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAACC,iCAAgB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,0BACvBD,cAAA;AAAA,YAACE,WAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAWH,SAAA,CAAK,YAAA,CAAa,OAAO,CAAA,EAAG;AAAA,gBACrC,CAAC,YAAA,CAAa,kBAAkB,CAAC,GAAG,KAAA,GAAQ;AAAA,eAC7C,CAAA;AAAA,cACD,GAAA,EAAK,QAAA;AAAA,cACL,UAAA,EAAY;AAAA,gBACV,KAAA,EAAO,EAAE,KAAA,EAAO,OAAA;AAAQ,eAC1B;AAAA,cACA,MAAA;AAAA,cACA,QAAA;AAAA,cACA,SAAA;AAAA,cACA,KAAA,EAAO,UAAA;AAAA,cACP,SAAA,EAAW,QAAA;AAAA,cACX,OAAA,EAAS;AAAA;AAAA;AACX;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"GoToInput.js","sources":["../src/pagination/GoToInput.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEventHandler,\n  forwardRef,\n  type HTMLAttributes,\n  type KeyboardEventHandler,\n  type Ref,\n  useState,\n} from \"react\";\nimport { FormField, FormFieldLabel } from \"../form-field\";\nimport { Input } from \"../input\";\nimport { makePrefixer } from \"../utils\";\nimport goToInputCss from \"./GoToInput.css\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nconst withBaseName = makePrefixer(\"saltGoToInput\");\nexport interface GoToInputProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Input label.\n   */\n  label?: string;\n  /**\n   * Optional ref for the input component\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * Change input variant.\n   */\n  inputVariant?: \"primary\" | \"secondary\";\n}\n\nexport const GoToInput = forwardRef<HTMLDivElement, GoToInputProps>(\n  function GoToInput(\n    {\n      className,\n      inputRef,\n      inputVariant = \"primary\",\n      label = \"Go to\",\n      ...restProps\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-go-to-input\",\n      css: goToInputCss,\n      window: targetWindow,\n    });\n\n    const { count, onPageChange } = usePaginationContext();\n    const [inputValue, setInputValue] = useState(\"\");\n\n    const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      setInputValue(event.target.value);\n    };\n\n    const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n      if (event.key === \"Enter\") {\n        const pageValue = Number(inputValue);\n        if (\n          !inputValue.startsWith(\"0\") &&\n          !Number.isNaN(pageValue) &&\n          pageValue > 0 &&\n          pageValue <= count\n        ) {\n          onPageChange(event, pageValue);\n        }\n        setInputValue(\"\");\n      }\n    };\n\n    const onBlur = () => {\n      setInputValue(\"\");\n    };\n\n    const widthCh = `${`${count}`.length}ch`;\n\n    return (\n      <FormField\n        labelPlacement=\"left\"\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        {...restProps}\n      >\n        <FormFieldLabel>{label}</FormFieldLabel>\n        <Input\n          className={clsx(withBaseName(\"input\"), {\n            [withBaseName(\"inputDefaultSize\")]: count < 100,\n          })}\n          ref={inputRef}\n          inputProps={{\n            style: { width: widthCh },\n          }}\n          onBlur={onBlur}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n          value={inputValue}\n          textAlign={\"center\"}\n          variant={inputVariant}\n        />\n      </FormField>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","GoToInput","useWindow","useComponentCssInjection","goToInputCss","usePaginationContext","useState","jsxs","FormField","clsx","jsx","FormFieldLabel","Input"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA;AAgB1C,MAAM,SAAA,GAAYC,gBAAA;AAAA,EACvB,SAASC,UAAAA,CACP;AAAA,IACE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAA,GAAe,SAAA;AAAA,IACf,KAAA,GAAQ,OAAA;AAAA,IACR,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,kBAAA;AAAA,MACR,GAAA,EAAKC,WAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,YAAA,EAAa,GAAIC,yCAAA,EAAqB;AACrD,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIC,eAAS,EAAE,CAAA;AAE/C,IAAA,MAAM,QAAA,GAAiD,CAAC,KAAA,KAAU;AAChE,MAAA,aAAA,CAAc,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,IAClC,CAAA;AAEA,IAAA,MAAM,SAAA,GAAoD,CAAC,KAAA,KAAU;AACnE,MAAA,IAAI,KAAA,CAAM,QAAQ,OAAA,EAAS;AACzB,QAAA,MAAM,SAAA,GAAY,OAAO,UAAU,CAAA;AACnC,QAAA,IACE,CAAC,UAAA,CAAW,UAAA,CAAW,GAAG,CAAA,IAC1B,CAAC,MAAA,CAAO,KAAA,CAAM,SAAS,CAAA,IACvB,SAAA,GAAY,CAAA,IACZ,aAAa,KAAA,EACb;AACA,UAAA,YAAA,CAAa,OAAO,SAAS,CAAA;AAAA,QAC/B;AACA,QAAA,aAAA,CAAc,EAAE,CAAA;AAAA,MAClB;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,SAAS,MAAM;AACnB,MAAA,aAAA,CAAc,EAAE,CAAA;AAAA,IAClB,CAAA;AAEA,IAAA,MAAM,OAAA,GAAU,CAAA,EAAG,CAAA,EAAG,KAAK,GAAG,MAAM,CAAA,EAAA,CAAA;AAEpC,IAAA,uBACEC,eAAA;AAAA,MAACC,mBAAA;AAAA,MAAA;AAAA,QACC,cAAA,EAAe,MAAA;AAAA,QACf,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG,SAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAACC,iCAAgB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,0BACvBD,cAAA;AAAA,YAACE,WAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAWH,SAAA,CAAK,YAAA,CAAa,OAAO,CAAA,EAAG;AAAA,gBACrC,CAAC,YAAA,CAAa,kBAAkB,CAAC,GAAG,KAAA,GAAQ;AAAA,eAC7C,CAAA;AAAA,cACD,GAAA,EAAK,QAAA;AAAA,cACL,UAAA,EAAY;AAAA,gBACV,KAAA,EAAO,EAAE,KAAA,EAAO,OAAA;AAAQ,eAC1B;AAAA,cACA,MAAA;AAAA,cACA,QAAA;AAAA,cACA,SAAA;AAAA,cACA,KAAA,EAAO,UAAA;AAAA,cACP,SAAA,EAAW,QAAA;AAAA,cACX,OAAA,EAAS;AAAA;AAAA;AACX;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/pill/PillCheckIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"PillCheckIcon.js","sources":["../src/pill/PillCheckIcon.tsx"],"sourcesContent":["import { CheckmarkIcon, CheckmarkSolidIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\nimport pillCheckIcon from \"./PillCheckIcon.css\";\n\nexport interface PillCheckIconProps {\n  checked?: boolean;\n  className?: string;\n  disabled?: boolean;\n  active?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltPillCheckIcon\");\n\nexport const PillCheckIcon = ({\n  className,\n  checked = false,\n  disabled = false,\n  active = false,\n}: PillCheckIconProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-pill-check-icon\",\n    css: pillCheckIcon,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"checked\")]: checked,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"active\")]: active,\n        },\n        className,\n      )}\n    >\n      {checked &&\n        (active ? (\n          <CheckmarkIcon className={withBaseName(\"icon\")} />\n        ) : (\n          <CheckmarkSolidIcon className={withBaseName(\"solidIcon\")} />\n        ))}\n    </div>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","pillCheckIcon","jsx","clsx","CheckmarkIcon","CheckmarkSolidIcon"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAE9C,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,QAAA,GAAW,KAAA;AAAA,EACX,MAAA,GAAS;AACX,CAAA,KAAuC;AACrC,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,sBAAA;AAAA,IACR,GAAA,EAAKC,eAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,MAAA;AAAA,MACZ,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,OAAA;AAAA,UAC3B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG;AAAA,SAC5B;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA,OAAA,KACE,MAAA,mBACCD,cAAA,CAACE,mBAAA,EAAA,EAAc,WAAW,YAAA,CAAa,MAAM,CAAA,EAAG,CAAA,mBAEhDF,cAAA,CAACG,wBAAA,EAAA,EAAmB,SAAA,EAAW,YAAA,CAAa,WAAW,CAAA,EAAG,CAAA;AAAA;AAAA,GAEhE;AAEJ;;;;"}
+{"version":3,"file":"PillCheckIcon.js","sources":["../src/pill/PillCheckIcon.tsx"],"sourcesContent":["import { CheckmarkIcon, CheckmarkSolidIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { ReactElement } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport pillCheckIcon from \"./PillCheckIcon.css\";\n\nexport interface PillCheckIconProps {\n  checked?: boolean;\n  className?: string;\n  disabled?: boolean;\n  active?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltPillCheckIcon\");\n\nexport const PillCheckIcon = ({\n  className,\n  checked = false,\n  disabled = false,\n  active = false,\n}: PillCheckIconProps): ReactElement => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-pill-check-icon\",\n    css: pillCheckIcon,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"checked\")]: checked,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"active\")]: active,\n        },\n        className,\n      )}\n    >\n      {checked &&\n        (active ? (\n          <CheckmarkIcon className={withBaseName(\"icon\")} />\n        ) : (\n          <CheckmarkSolidIcon className={withBaseName(\"solidIcon\")} />\n        ))}\n    </div>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","pillCheckIcon","jsx","clsx","CheckmarkIcon","CheckmarkSolidIcon"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAE9C,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,QAAA,GAAW,KAAA;AAAA,EACX,MAAA,GAAS;AACX,CAAA,KAAwC;AACtC,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,sBAAA;AAAA,IACR,GAAA,EAAKC,eAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,MAAA;AAAA,MACZ,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,OAAA;AAAA,UAC3B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG;AAAA,SAC5B;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA,OAAA,KACE,MAAA,mBACCD,cAAA,CAACE,mBAAA,EAAA,EAAc,WAAW,YAAA,CAAa,MAAM,CAAA,EAAG,CAAA,mBAEhDF,cAAA,CAACG,wBAAA,EAAA,EAAmB,SAAA,EAAW,YAAA,CAAa,WAAW,CAAA,EAAG,CAAA;AAAA;AAAA,GAEhE;AAEJ;;;;"}