@salt-ds/lab 1.0.0-alpha.54 → 1.0.0-alpha.56

package/dist-es/localization-provider/LocalizationProvider.js

@@ -0,0 +1,44 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useMemo, useContext } from 'react';
+
+const MIN_DATE = "1900-01-01T00:00:00.000";
+const MAX_DATE = "2099-12-31T00:00:00.000";
+const LocalizationProviderContext = createContext(null);
+if (process.env.NODE_ENV !== "production") {
+  LocalizationProviderContext.displayName = "LocalizationProviderContext";
+}
+const LocalizationProvider = function LocalizationProvider2(props) {
+  const { children, DateAdapter, instance, locale, minDate, maxDate } = props;
+  const dateAdapter = useMemo(() => {
+    return new DateAdapter({
+      locale,
+      instance
+    });
+  }, [DateAdapter, locale]);
+  const defaultDates = useMemo(
+    () => ({
+      minDate: minDate || dateAdapter.date(MIN_DATE),
+      maxDate: maxDate || dateAdapter.date(MAX_DATE)
+    }),
+    [dateAdapter, minDate, maxDate]
+  );
+  const contextValue = useMemo(() => {
+    return {
+      dateAdapter,
+      defaultDates
+    };
+  }, [dateAdapter, defaultDates]);
+  return /* @__PURE__ */ jsx(LocalizationProviderContext.Provider, { value: contextValue, children });
+};
+const useLocalization = () => {
+  const localization = useContext(LocalizationProviderContext);
+  if (!localization) {
+    throw new Error(
+      "useLocalization should be called inside LocalizationProviderContext.Provider"
+    );
+  }
+  return localization;
+};
+
+export { LocalizationProvider, LocalizationProviderContext, useLocalization };
+//# sourceMappingURL=LocalizationProvider.js.map

package/dist-es/localization-provider/LocalizationProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LocalizationProvider.js","sources":["../src/localization-provider/LocalizationProvider.tsx"],"sourcesContent":["import type {\n  DateFrameworkType,\n  SaltDateAdapter,\n} from \"@salt-ds/date-adapters\";\nimport { createContext, useContext, useMemo } from \"react\";\n\nconst MIN_DATE = \"1900-01-01T00:00:00.000\";\nconst MAX_DATE = \"2099-12-31T00:00:00.000\";\n\nexport interface LocalizationProviderValue<TDate extends DateFrameworkType> {\n  defaultDates: {\n    minDate: TDate;\n    maxDate: TDate;\n  };\n  dateAdapter: SaltDateAdapter<TDate>;\n}\n\n/**\n * Props for the LocalizationProvider component.\n *\n * @template TDate - The type of the date object used in the provider.\n * @template TLocale - The type of the locale, defaulting to string.\n */\nexport interface LocalizationProviderProps<\n  TDate extends DateFrameworkType,\n  TLocale = string,\n> {\n  /**\n   * The child components to be rendered within the provider.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * The instance of the date library being used.\n   */\n  instance?: any;\n\n  /**\n   * The date adapter class, which provides methods for date manipulation and formatting.\n   * This should be a constructor for a class implementing the SaltDateAdapter interface.\n   */\n  DateAdapter: new (\n    ...args: any\n  ) => SaltDateAdapter<TDate, TLocale>;\n\n  /**\n   * The locale to be used for date formatting and manipulation.\n   */\n  locale?: TLocale;\n\n  /**\n   * The minimum date allowed for all date selections.\n   * Defaults to January 1, 1900.\n   */\n  minDate?: TDate;\n\n  /**\n   * The maximum date allowed for all date selections.\n   * Defaults to December 31, 2099.\n   */\n  maxDate?: TDate;\n}\n\nexport type LocalizationProviderContext<TDate extends DateFrameworkType> = {\n  [K in keyof LocalizationProviderValue<TDate>]:\n    | LocalizationProviderValue<TDate>[K]\n    | null;\n};\n\nexport const LocalizationProviderContext =\n  createContext<LocalizationProviderValue<any> | null>(null);\n\nif (process.env.NODE_ENV !== \"production\") {\n  LocalizationProviderContext.displayName = \"LocalizationProviderContext\";\n}\n\nexport const LocalizationProvider = function LocalizationProvider<\n  TDate extends DateFrameworkType,\n  TLocale,\n>(props: LocalizationProviderProps<TDate, TLocale>) {\n  const { children, DateAdapter, instance, locale, minDate, maxDate } = props;\n\n  const dateAdapter = useMemo(() => {\n    return new DateAdapter({\n      locale,\n      instance,\n    });\n  }, [DateAdapter, locale]);\n\n  const defaultDates: LocalizationProviderValue<TDate>[\"defaultDates\"] =\n    useMemo(\n      () => ({\n        minDate: minDate || dateAdapter.date(MIN_DATE),\n        maxDate: maxDate || dateAdapter.date(MAX_DATE),\n      }),\n      [dateAdapter, minDate, maxDate],\n    );\n\n  const contextValue: LocalizationProviderValue<TDate> = useMemo(() => {\n    return {\n      dateAdapter,\n      defaultDates,\n    };\n  }, [dateAdapter, defaultDates]);\n\n  return (\n    <LocalizationProviderContext.Provider value={contextValue}>\n      {children}\n    </LocalizationProviderContext.Provider>\n  );\n};\n\n/**\n * Custom hook to access the localization context.\n *\n * This hook provides access to the localization settings and utilities\n * within the `LocalizationProviderContext`. It should be used within a\n * component that is a descendant of `LocalizationProviderContext.Provider`.\n *\n * @template TDate - The type of the date object used in the localization context.\n *\n * @returns The localization provider value, which includes date manipulation and formatting utilities.\n *\n * @throws Will throw an error if the hook is used outside of a `LocalizationProviderContext.Provider`.\n */\nexport const useLocalization = <\n  TDate extends DateFrameworkType,\n>(): LocalizationProviderValue<TDate> => {\n  const localization = useContext(LocalizationProviderContext);\n  if (!localization) {\n    throw new Error(\n      \"useLocalization should be called inside LocalizationProviderContext.Provider\",\n    );\n  }\n  return localization;\n};\n"],"names":["LocalizationProvider"],"mappings":";;;AAMA,MAAM,QAAW,GAAA,yBAAA;AACjB,MAAM,QAAW,GAAA,yBAAA;AA8DJ,MAAA,2BAAA,GACX,cAAqD,IAAI;AAE3D,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,2BAAA,CAA4B,WAAc,GAAA,6BAAA;AAC5C;AAEa,MAAA,oBAAA,GAAuB,SAASA,qBAAAA,CAG3C,KAAkD,EAAA;AAClD,EAAA,MAAM,EAAE,QAAU,EAAA,WAAA,EAAa,UAAU,MAAQ,EAAA,OAAA,EAAS,SAAY,GAAA,KAAA;AAEtE,EAAM,MAAA,WAAA,GAAc,QAAQ,MAAM;AAChC,IAAA,OAAO,IAAI,WAAY,CAAA;AAAA,MACrB,MAAA;AAAA,MACA;AAAA,KACD,CAAA;AAAA,GACA,EAAA,CAAC,WAAa,EAAA,MAAM,CAAC,CAAA;AAExB,EAAA,MAAM,YACJ,GAAA,OAAA;AAAA,IACE,OAAO;AAAA,MACL,OAAS,EAAA,OAAA,IAAW,WAAY,CAAA,IAAA,CAAK,QAAQ,CAAA;AAAA,MAC7C,OAAS,EAAA,OAAA,IAAW,WAAY,CAAA,IAAA,CAAK,QAAQ;AAAA,KAC/C,CAAA;AAAA,IACA,CAAC,WAAa,EAAA,OAAA,EAAS,OAAO;AAAA,GAChC;AAEF,EAAM,MAAA,YAAA,GAAiD,QAAQ,MAAM;AACnE,IAAO,OAAA;AAAA,MACL,WAAA;AAAA,MACA;AAAA,KACF;AAAA,GACC,EAAA,CAAC,WAAa,EAAA,YAAY,CAAC,CAAA;AAE9B,EAAA,2BACG,2BAA4B,CAAA,QAAA,EAA5B,EAAqC,KAAA,EAAO,cAC1C,QACH,EAAA,CAAA;AAEJ;AAeO,MAAM,kBAAkB,MAEU;AACvC,EAAM,MAAA,YAAA,GAAe,WAAW,2BAA2B,CAAA;AAC3D,EAAA,IAAI,CAAC,YAAc,EAAA;AACjB,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA;AAEF,EAAO,OAAA,YAAA;AACT;;;;"}

package/dist-es/logo/Logo.js

@@ -16,11 +16,7 @@ const Logo = forwardRef(
       css: css_248z,
       window: targetWindow
     });
-    return /* @__PURE__ */ jsx("span", {
-      className: clsx(withBaseName(), className),
-      ref,
-      ...rest
-    });
+    return /* @__PURE__ */ jsx("span", { className: clsx(withBaseName(), className), ref, ...rest });
   }
 );
 

package/dist-es/logo/Logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.js","sources":["../src/logo/Logo.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport logoCss from \"./Logo.css\";\n\nexport type LogoProps = ComponentPropsWithoutRef<\"span\">;\n\nconst withBaseName = makePrefixer(\"saltLogo\");\n\nexport const Logo = forwardRef<HTMLSpanElement, LogoProps>(\n  function Logo(props, ref) {\n    const { className, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-logo\",\n      css: logoCss,\n      window: targetWindow,\n    });\n\n    return (\n      <span className={clsx(withBaseName(), className)} ref={ref} {...rest} />\n    );\n  },\n);\n"],"names":["Logo","logoCss"],"mappings":";;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAErC,MAAM,IAAO,GAAA,UAAA;AAAA,EAClB,SAASA,KAAK,CAAA,KAAA,EAAO,GAAK,EAAA;AACxB,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAE/B,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,WAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MAAK,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAAW,GAAG,IAAA;AAAA,KAAM,CAAA,CAAA;AAAA,GAE1E;AACF;;;;"}
+{"version":3,"file":"Logo.js","sources":["../src/logo/Logo.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport logoCss from \"./Logo.css\";\n\nexport type LogoProps = ComponentPropsWithoutRef<\"span\">;\n\nconst withBaseName = makePrefixer(\"saltLogo\");\n\nexport const Logo = forwardRef<HTMLSpanElement, LogoProps>(\n  function Logo(props, ref) {\n    const { className, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-logo\",\n      css: logoCss,\n      window: targetWindow,\n    });\n\n    return (\n      <span className={clsx(withBaseName(), className)} ref={ref} {...rest} />\n    );\n  },\n);\n"],"names":["Logo","logoCss"],"mappings":";;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA;AAErC,MAAM,IAAO,GAAA,UAAA;AAAA,EAClB,SAASA,KAAK,CAAA,KAAA,EAAO,GAAK,EAAA;AACxB,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAE/B,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,WAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,IAAK,CAAA,YAAA,IAAgB,SAAS,CAAA,EAAG,GAAW,EAAA,GAAG,IAAM,EAAA,CAAA;AAAA;AAG5E;;;;"}

package/dist-es/logo/LogoImage.js

@@ -16,12 +16,15 @@ const LogoImage = forwardRef(
       css: css_248z,
       window: targetWindow
     });
-    return /* @__PURE__ */ jsx("img", {
-      ...rest,
-      alt,
-      className: clsx(withBaseName(), className),
-      ref
-    });
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        ...rest,
+        alt,
+        className: clsx(withBaseName(), className),
+        ref
+      }
+    );
   }
 );
 

package/dist-es/logo/LogoImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"LogoImage.js","sources":["../src/logo/LogoImage.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport logoImageCss from \"./LogoImage.css\";\n\nexport interface LogoImageProps\n  extends Omit<ComponentPropsWithoutRef<\"img\">, \"alt\"> {\n  alt: string;\n}\n\nconst withBaseName = makePrefixer(\"saltLogoImage\");\n\nexport const LogoImage = forwardRef<HTMLImageElement, LogoImageProps>(\n  function LogoImage(props, ref) {\n    const { className, alt, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-logo-image\",\n      css: logoImageCss,\n      window: targetWindow,\n    });\n\n    return (\n      <img\n        {...rest}\n        alt={alt}\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n      />\n    );\n  },\n);\n"],"names":["LogoImage","logoImageCss"],"mappings":";;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAA,MAAM,EAAE,SAAA,EAAW,GAAQ,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEpC,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"LogoImage.js","sources":["../src/logo/LogoImage.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport logoImageCss from \"./LogoImage.css\";\n\nexport interface LogoImageProps\n  extends Omit<ComponentPropsWithoutRef<\"img\">, \"alt\"> {\n  alt: string;\n}\n\nconst withBaseName = makePrefixer(\"saltLogoImage\");\n\nexport const LogoImage = forwardRef<HTMLImageElement, LogoImageProps>(\n  function LogoImage(props, ref) {\n    const { className, alt, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-logo-image\",\n      css: logoImageCss,\n      window: targetWindow,\n    });\n\n    return (\n      <img\n        {...rest}\n        alt={alt}\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n      />\n    );\n  },\n);\n"],"names":["LogoImage","logoImageCss"],"mappings":";;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAE1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAA,MAAM,EAAE,SAAA,EAAW,GAAK,EAAA,GAAG,MAAS,GAAA,KAAA;AAEpC,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}

package/dist-es/logo/LogoSeparator.js

@@ -16,11 +16,7 @@ const LogoSeparator = forwardRef(
       css: css_248z,
       window: targetWindow
     });
-    return /* @__PURE__ */ jsx("span", {
-      ...rest,
-      className: clsx(withBaseName(), className),
-      ref
-    });
+    return /* @__PURE__ */ jsx("span", { ...rest, className: clsx(withBaseName(), className), ref });
   }
 );
 

package/dist-es/logo/LogoSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"LogoSeparator.js","sources":["../src/logo/LogoSeparator.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport logoSeparatorCss from \"./LogoSeparator.css\";\n\nexport type LogoSeparatorProps = ComponentPropsWithoutRef<\"span\">;\n\nconst withBaseName = makePrefixer(\"saltLogoSeparator\");\n\nexport const LogoSeparator = forwardRef<HTMLImageElement, LogoSeparatorProps>(\n  function LogoSeparator(props, ref) {\n    const { className, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-logo-separator\",\n      css: logoSeparatorCss,\n      window: targetWindow,\n    });\n\n    return (\n      <span {...rest} className={clsx(withBaseName(), className)} ref={ref} />\n    );\n  },\n);\n"],"names":["LogoSeparator","logoSeparatorCss"],"mappings":";;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAE/B,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MAAM,GAAG,IAAA;AAAA,MAAM,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,KAAU,CAAA,CAAA;AAAA,GAE1E;AACF;;;;"}
+{"version":3,"file":"LogoSeparator.js","sources":["../src/logo/LogoSeparator.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport logoSeparatorCss from \"./LogoSeparator.css\";\n\nexport type LogoSeparatorProps = ComponentPropsWithoutRef<\"span\">;\n\nconst withBaseName = makePrefixer(\"saltLogoSeparator\");\n\nexport const LogoSeparator = forwardRef<HTMLImageElement, LogoSeparatorProps>(\n  function LogoSeparator(props, ref) {\n    const { className, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-logo-separator\",\n      css: logoSeparatorCss,\n      window: targetWindow,\n    });\n\n    return (\n      <span {...rest} className={clsx(withBaseName(), className)} ref={ref} />\n    );\n  },\n);\n"],"names":["LogoSeparator","logoSeparatorCss"],"mappings":";;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAE/B,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAA,GAAA,CAAC,MAAM,EAAA,EAAA,GAAG,IAAM,EAAA,SAAA,EAAW,KAAK,YAAa,EAAA,EAAG,SAAS,CAAA,EAAG,GAAU,EAAA,CAAA;AAAA;AAG5E;;;;"}

package/dist-es/menu-button/MenuButton.js

@@ -29,21 +29,27 @@ const MenuButton = forwardRef(
       setMenuOpen(false);
       onClose == null ? void 0 : onClose();
     }, [onClose]);
-    return /* @__PURE__ */ jsx(CascadingMenu, {
-      initialSource,
-      onClose: handleClose,
-      onOpen: handleOpen,
-      ...restMenuProps,
-      children: /* @__PURE__ */ jsx(MenuButtonTrigger, {
-        "aria-expanded": isMenuOpen,
-        "aria-haspopup": true,
-        isMenuOpen,
-        ref,
-        variant,
-        ...restProps,
-        children
-      })
-    });
+    return /* @__PURE__ */ jsx(
+      CascadingMenu,
+      {
+        initialSource,
+        onClose: handleClose,
+        onOpen: handleOpen,
+        ...restMenuProps,
+        children: /* @__PURE__ */ jsx(
+          MenuButtonTrigger,
+          {
+            "aria-expanded": isMenuOpen,
+            "aria-haspopup": true,
+            isMenuOpen,
+            ref,
+            variant,
+            ...restProps,
+            children
+          }
+        )
+      }
+    );
   }
 );
 

package/dist-es/menu-button/MenuButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.js","sources":["../src/menu-button/MenuButton.tsx"],"sourcesContent":["import type { ButtonProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { type ReactNode, forwardRef, useCallback, useState } from \"react\";\nimport { CascadingMenu, type CascadingMenuProps } from \"../cascading-menu\";\nimport { MenuButtonTrigger } from \"./MenuButtonTrigger\";\n\nimport menuButtonCss from \"./MenuButton.css\";\n\nexport interface MenuButtonProps extends ButtonProps {\n  CascadingMenuProps: CascadingMenuProps;\n  children: ReactNode;\n  className?: string;\n  hideCaret?: boolean;\n}\n\nexport const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(\n  function MenuButton(\n    { variant = \"secondary\", CascadingMenuProps = {}, children, ...restProps },\n    ref,\n  ) {\n    const {\n      initialSource = { menuItems: [] },\n      onOpen,\n      onClose,\n      ...restMenuProps\n    } = CascadingMenuProps;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-menu-button\",\n      css: menuButtonCss,\n      window: targetWindow,\n    });\n\n    const [isMenuOpen, setMenuOpen] = useState(false);\n\n    const handleOpen = useCallback(() => {\n      setMenuOpen(true);\n      onOpen?.();\n    }, [onOpen]);\n\n    const handleClose = useCallback(() => {\n      setMenuOpen(false);\n      onClose?.();\n    }, [onClose]);\n\n    return (\n      <CascadingMenu\n        initialSource={initialSource}\n        onClose={handleClose}\n        onOpen={handleOpen}\n        {...restMenuProps}\n      >\n        <MenuButtonTrigger\n          aria-expanded={isMenuOpen}\n          aria-haspopup\n          isMenuOpen={isMenuOpen}\n          ref={ref}\n          variant={variant}\n          {...restProps}\n        >\n          {children}\n        </MenuButtonTrigger>\n      </CascadingMenu>\n    );\n  },\n);\n"],"names":["MenuButton","menuButtonCss"],"mappings":";;;;;;;;AAgBO,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WACP,CAAA,EAAE,OAAU,GAAA,WAAA,EAAa,kBAAqB,GAAA,EAAI,EAAA,QAAA,EAAA,GAAa,SAAU,EAAA,EACzE,GACA,EAAA;AACA,IAAM,MAAA;AAAA,MACJ,aAAgB,GAAA,EAAE,SAAW,EAAA,EAAG,EAAA;AAAA,MAChC,MAAA;AAAA,MACA,OAAA;AAAA,MACG,GAAA,aAAA;AAAA,KACD,GAAA,kBAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,UAAA,EAAY,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAEhD,IAAM,MAAA,UAAA,GAAa,YAAY,MAAM;AACnC,MAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAChB,MAAA,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,EAAA,CAAA;AAAA,KACF,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,IAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,MAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AACjB,MAAA,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,EAAA,CAAA;AAAA,KACF,EAAG,CAAC,OAAO,CAAC,CAAA,CAAA;AAEZ,IAAA,uBACG,GAAA,CAAA,aAAA,EAAA;AAAA,MACC,aAAA;AAAA,MACA,OAAS,EAAA,WAAA;AAAA,MACT,MAAQ,EAAA,UAAA;AAAA,MACP,GAAG,aAAA;AAAA,MAEJ,QAAC,kBAAA,GAAA,CAAA,iBAAA,EAAA;AAAA,QACC,eAAe,EAAA,UAAA;AAAA,QACf,eAAa,EAAA,IAAA;AAAA,QACb,UAAA;AAAA,QACA,GAAA;AAAA,QACA,OAAA;AAAA,QACC,GAAG,SAAA;AAAA,QAEH,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"MenuButton.js","sources":["../src/menu-button/MenuButton.tsx"],"sourcesContent":["import type { ButtonProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { type ReactNode, forwardRef, useCallback, useState } from \"react\";\nimport { CascadingMenu, type CascadingMenuProps } from \"../cascading-menu\";\nimport { MenuButtonTrigger } from \"./MenuButtonTrigger\";\n\nimport menuButtonCss from \"./MenuButton.css\";\n\nexport interface MenuButtonProps extends ButtonProps {\n  CascadingMenuProps: CascadingMenuProps;\n  children: ReactNode;\n  className?: string;\n  hideCaret?: boolean;\n}\n\nexport const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(\n  function MenuButton(\n    { variant = \"secondary\", CascadingMenuProps = {}, children, ...restProps },\n    ref,\n  ) {\n    const {\n      initialSource = { menuItems: [] },\n      onOpen,\n      onClose,\n      ...restMenuProps\n    } = CascadingMenuProps;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-menu-button\",\n      css: menuButtonCss,\n      window: targetWindow,\n    });\n\n    const [isMenuOpen, setMenuOpen] = useState(false);\n\n    const handleOpen = useCallback(() => {\n      setMenuOpen(true);\n      onOpen?.();\n    }, [onOpen]);\n\n    const handleClose = useCallback(() => {\n      setMenuOpen(false);\n      onClose?.();\n    }, [onClose]);\n\n    return (\n      <CascadingMenu\n        initialSource={initialSource}\n        onClose={handleClose}\n        onOpen={handleOpen}\n        {...restMenuProps}\n      >\n        <MenuButtonTrigger\n          aria-expanded={isMenuOpen}\n          aria-haspopup\n          isMenuOpen={isMenuOpen}\n          ref={ref}\n          variant={variant}\n          {...restProps}\n        >\n          {children}\n        </MenuButtonTrigger>\n      </CascadingMenu>\n    );\n  },\n);\n"],"names":["MenuButton","menuButtonCss"],"mappings":";;;;;;;;AAgBO,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WAAAA,CACP,EAAE,OAAA,GAAU,WAAa,EAAA,kBAAA,GAAqB,EAAC,EAAG,QAAU,EAAA,GAAG,SAAU,EAAA,EACzE,GACA,EAAA;AACA,IAAM,MAAA;AAAA,MACJ,aAAgB,GAAA,EAAE,SAAW,EAAA,EAAG,EAAA;AAAA,MAChC,MAAA;AAAA,MACA,OAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,kBAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,CAAC,UAAA,EAAY,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAEhD,IAAM,MAAA,UAAA,GAAa,YAAY,MAAM;AACnC,MAAA,WAAA,CAAY,IAAI,CAAA;AAChB,MAAA,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,EAAA;AAAA,KACF,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,IAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,MAAA,WAAA,CAAY,KAAK,CAAA;AACjB,MAAA,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,EAAA;AAAA,KACF,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,IACE,uBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,aAAA;AAAA,QACA,OAAS,EAAA,WAAA;AAAA,QACT,MAAQ,EAAA,UAAA;AAAA,QACP,GAAG,aAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA;AAAA,UAAC,iBAAA;AAAA,UAAA;AAAA,YACC,eAAe,EAAA,UAAA;AAAA,YACf,eAAa,EAAA,IAAA;AAAA,YACb,UAAA;AAAA,YACA,GAAA;AAAA,YACA,OAAA;AAAA,YACC,GAAG,SAAA;AAAA,YAEH;AAAA;AAAA;AACH;AAAA,KACF;AAAA;AAGN;;;;"}

package/dist-es/menu-button/MenuButtonTrigger.js

@@ -15,21 +15,27 @@ const MenuButtonTrigger = forwardRef(function MenuButtonTrigger2({ className, hi
     window: targetWindow
   });
   const { ExpandIcon } = useIcon();
-  return /* @__PURE__ */ jsxs(Button, {
-    ref,
-    className: clsx(withBaseName(), className, {
-      [withBaseName("buttonOpen")]: isMenuOpen
-    }),
-    "data-testid": "menu-button-trigger",
-    ...rest,
-    children: [
-      children,
-      !hideCaret && /* @__PURE__ */ jsx(ExpandIcon, {
-        className: withBaseName("caretIcon"),
-        "data-testid": "menu-button-trigger-caret"
-      })
-    ]
-  });
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      ref,
+      className: clsx(withBaseName(), className, {
+        [withBaseName("buttonOpen")]: isMenuOpen
+      }),
+      "data-testid": "menu-button-trigger",
+      ...rest,
+      children: [
+        children,
+        !hideCaret && /* @__PURE__ */ jsx(
+          ExpandIcon,
+          {
+            className: withBaseName("caretIcon"),
+            "data-testid": "menu-button-trigger-caret"
+          }
+        )
+      ]
+    }
+  );
 });
 
 export { MenuButtonTrigger };

package/dist-es/menu-button/MenuButtonTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuButtonTrigger.js","sources":["../src/menu-button/MenuButtonTrigger.tsx"],"sourcesContent":["import { Button, type ButtonProps, makePrefixer, useIcon } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type ReactNode, forwardRef } from \"react\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport menuButtonTrigger from \"./MenuButtonTrigger.css\";\n\nconst withBaseName = makePrefixer(\"saltMenuButtonTrigger\");\n\nexport interface MenuButtonTriggerProps extends ButtonProps {\n  className?: string;\n  hideCaret?: boolean;\n  isMenuOpen?: boolean;\n  children?: ReactNode;\n}\n\nexport const MenuButtonTrigger = forwardRef<\n  HTMLButtonElement,\n  MenuButtonTriggerProps\n>(function MenuButtonTrigger(\n  { className, hideCaret, isMenuOpen, children, ...rest },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-menu-button-trigger\",\n    css: menuButtonTrigger,\n    window: targetWindow,\n  });\n  const { ExpandIcon } = useIcon();\n\n  return (\n    <Button\n      ref={ref}\n      className={clsx(withBaseName(), className, {\n        [withBaseName(\"buttonOpen\")]: isMenuOpen,\n      })}\n      data-testid=\"menu-button-trigger\"\n      {...rest}\n    >\n      {children}\n      {!hideCaret && (\n        <ExpandIcon\n          className={withBaseName(\"caretIcon\")}\n          data-testid=\"menu-button-trigger-caret\"\n        />\n      )}\n    </Button>\n  );\n});\n"],"names":["MenuButtonTrigger","menuButtonTrigger"],"mappings":";;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA,CAAA;AAS5C,MAAA,iBAAA,GAAoB,UAG/B,CAAA,SAASA,kBACT,CAAA,EAAE,SAAW,EAAA,SAAA,EAAW,UAAY,EAAA,QAAA,EAAA,GAAa,IAAK,EAAA,EACtD,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAM,MAAA,EAAE,UAAW,EAAA,GAAI,OAAQ,EAAA,CAAA;AAE/B,EAAA,uBACG,IAAA,CAAA,MAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,MACzC,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,UAAA;AAAA,KAC/B,CAAA;AAAA,IACD,aAAY,EAAA,qBAAA;AAAA,IACX,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,CAAC,6BACC,GAAA,CAAA,UAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,QACnC,aAAY,EAAA,2BAAA;AAAA,OACd,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"MenuButtonTrigger.js","sources":["../src/menu-button/MenuButtonTrigger.tsx"],"sourcesContent":["import { Button, type ButtonProps, makePrefixer, useIcon } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type ReactNode, forwardRef } from \"react\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport menuButtonTrigger from \"./MenuButtonTrigger.css\";\n\nconst withBaseName = makePrefixer(\"saltMenuButtonTrigger\");\n\nexport interface MenuButtonTriggerProps extends ButtonProps {\n  className?: string;\n  hideCaret?: boolean;\n  isMenuOpen?: boolean;\n  children?: ReactNode;\n}\n\nexport const MenuButtonTrigger = forwardRef<\n  HTMLButtonElement,\n  MenuButtonTriggerProps\n>(function MenuButtonTrigger(\n  { className, hideCaret, isMenuOpen, children, ...rest },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-menu-button-trigger\",\n    css: menuButtonTrigger,\n    window: targetWindow,\n  });\n  const { ExpandIcon } = useIcon();\n\n  return (\n    <Button\n      ref={ref}\n      className={clsx(withBaseName(), className, {\n        [withBaseName(\"buttonOpen\")]: isMenuOpen,\n      })}\n      data-testid=\"menu-button-trigger\"\n      {...rest}\n    >\n      {children}\n      {!hideCaret && (\n        <ExpandIcon\n          className={withBaseName(\"caretIcon\")}\n          data-testid=\"menu-button-trigger-caret\"\n        />\n      )}\n    </Button>\n  );\n});\n"],"names":["MenuButtonTrigger","menuButtonTrigger"],"mappings":";;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA;AASlD,MAAM,iBAAoB,GAAA,UAAA,CAG/B,SAASA,kBAAAA,CACT,EAAE,SAAA,EAAW,SAAW,EAAA,UAAA,EAAY,QAAU,EAAA,GAAG,IAAK,EAAA,EACtD,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAM,MAAA,EAAE,UAAW,EAAA,GAAI,OAAQ,EAAA;AAE/B,EACE,uBAAA,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,QACzC,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG;AAAA,OAC/B,CAAA;AAAA,MACD,aAAY,EAAA,qBAAA;AAAA,MACX,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,CAAC,SACA,oBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,YACnC,aAAY,EAAA;AAAA;AAAA;AACd;AAAA;AAAA,GAEJ;AAEJ,CAAC;;;;"}

package/dist-es/metric/Metric.js

@@ -57,9 +57,9 @@ const Metric = forwardRef(function Metric2({
       valueId
     ]
   );
-  return /* @__PURE__ */ jsx(MetricContextProvider, {
-    value,
-    children: /* @__PURE__ */ jsx("div", {
+  return /* @__PURE__ */ jsx(MetricContextProvider, { value, children: /* @__PURE__ */ jsx(
+    "div",
+    {
       ...restProps,
       className: clsx(
         withBaseName(),
@@ -74,8 +74,8 @@ const Metric = forwardRef(function Metric2({
       id,
       ref,
       children
-    })
-  });
+    }
+  ) });
 });
 
 export { Metric };

package/dist-es/metric/Metric.js.map

@@ -1 +1 @@
-{"version":3,"file":"Metric.js","sources":["../src/metric/Metric.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef, useMemo } from \"react\";\nimport { MetricContextProvider, type MetricContextValue } from \"./internal\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport metricCSS from \"./Metric.css\";\n\nconst withBaseName = makePrefixer(\"saltMetric\");\n\nexport interface MetricProps\n  extends MetricContextValue,\n    HTMLAttributes<HTMLDivElement> {\n  /**\n   * The aria-level attribute to be applied to the heading component. The default is 2.\n   *\n   * As an ADA requirement, the heading component should be the first valid component inside the Metric. It is the title\n   * if <MetricHeader/> is placed before <MerticContent/>. It is the main value if <MerticContent/> is placed before <MetricHeader/>.\n   */\n  headingAriaLevel?: number;\n  /**\n   * This prop is used to help implement the accessibility logic.\n   * If you don't provide this prop. It falls back to a randomly generated id.\n   */\n  id?: string;\n}\n\nexport const Metric = forwardRef<HTMLDivElement, MetricProps>(function Metric(\n  {\n    className,\n    children,\n    direction,\n    showIndicator,\n    align = \"left\",\n    orientation = \"vertical\",\n    indicatorPosition = \"end\",\n    headingAriaLevel = 2,\n    id: idProp,\n    size = \"medium\",\n    ...restProps\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-metric\",\n    css: metricCSS,\n    window: targetWindow,\n  });\n\n  const id = useId(idProp);\n  const titleId = `metric-title-${id}`;\n  const subtitleId = `metric-subtitle-${id}`;\n  const valueId = `metric-value-${id}`;\n\n  const value = useMemo(\n    () => ({\n      align,\n      direction,\n      orientation,\n      showIndicator,\n      indicatorPosition,\n      headingAriaLevel,\n      size,\n      titleId,\n      subtitleId,\n      valueId,\n    }),\n    [\n      align,\n      direction,\n      orientation,\n      showIndicator,\n      indicatorPosition,\n      headingAriaLevel,\n      size,\n      titleId,\n      subtitleId,\n      valueId,\n    ],\n  );\n\n  return (\n    <MetricContextProvider value={value}>\n      <div\n        {...restProps}\n        className={clsx(\n          withBaseName(),\n          withBaseName(`size-${size}`),\n          {\n            [withBaseName(`direction-${direction}`)]: direction,\n            [withBaseName(`orientation-${orientation}`)]: orientation,\n            [withBaseName(`align-${align}`)]: align,\n          },\n          className,\n        )}\n        id={id}\n        ref={ref}\n      >\n        {children}\n      </div>\n    </MetricContextProvider>\n  );\n});\n"],"names":["Metric","metricCSS"],"mappings":";;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA,CAAA;AAmBjC,MAAA,MAAA,GAAS,UAAwC,CAAA,SAASA,OACrE,CAAA;AAAA,EACE,SAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,KAAQ,GAAA,MAAA;AAAA,EACR,WAAc,GAAA,UAAA;AAAA,EACd,iBAAoB,GAAA,KAAA;AAAA,EACpB,gBAAmB,GAAA,CAAA;AAAA,EACnB,EAAI,EAAA,MAAA;AAAA,EACJ,IAAO,GAAA,QAAA;AAAA,EACJ,GAAA,SAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AACvB,EAAA,MAAM,UAAU,CAAgB,aAAA,EAAA,EAAA,CAAA,CAAA,CAAA;AAChC,EAAA,MAAM,aAAa,CAAmB,gBAAA,EAAA,EAAA,CAAA,CAAA,CAAA;AACtC,EAAA,MAAM,UAAU,CAAgB,aAAA,EAAA,EAAA,CAAA,CAAA,CAAA;AAEhC,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,OAAO;AAAA,MACL,KAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,KACF,CAAA;AAAA,IACA;AAAA,MACE,KAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,qBAAA,EAAA;AAAA,IAAsB,KAAA;AAAA,IACrB,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,YAAA,CAAa,QAAQ,IAAM,CAAA,CAAA,CAAA;AAAA,QAC3B;AAAA,UACE,CAAC,YAAA,CAAa,CAAa,UAAA,EAAA,SAAA,CAAA,CAAW,CAAI,GAAA,SAAA;AAAA,UAC1C,CAAC,YAAA,CAAa,CAAe,YAAA,EAAA,WAAA,CAAA,CAAa,CAAI,GAAA,WAAA;AAAA,UAC9C,CAAC,YAAA,CAAa,CAAS,MAAA,EAAA,KAAA,CAAA,CAAO,CAAI,GAAA,KAAA;AAAA,SACpC;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,EAAA;AAAA,MACA,GAAA;AAAA,MAEC,QAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Metric.js","sources":["../src/metric/Metric.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef, useMemo } from \"react\";\nimport { MetricContextProvider, type MetricContextValue } from \"./internal\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport metricCSS from \"./Metric.css\";\n\nconst withBaseName = makePrefixer(\"saltMetric\");\n\nexport interface MetricProps\n  extends MetricContextValue,\n    HTMLAttributes<HTMLDivElement> {\n  /**\n   * The aria-level attribute to be applied to the heading component. The default is 2.\n   *\n   * As an ADA requirement, the heading component should be the first valid component inside the Metric. It is the title\n   * if <MetricHeader/> is placed before <MerticContent/>. It is the main value if <MerticContent/> is placed before <MetricHeader/>.\n   */\n  headingAriaLevel?: number;\n  /**\n   * This prop is used to help implement the accessibility logic.\n   * If you don't provide this prop. It falls back to a randomly generated id.\n   */\n  id?: string;\n}\n\nexport const Metric = forwardRef<HTMLDivElement, MetricProps>(function Metric(\n  {\n    className,\n    children,\n    direction,\n    showIndicator,\n    align = \"left\",\n    orientation = \"vertical\",\n    indicatorPosition = \"end\",\n    headingAriaLevel = 2,\n    id: idProp,\n    size = \"medium\",\n    ...restProps\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-metric\",\n    css: metricCSS,\n    window: targetWindow,\n  });\n\n  const id = useId(idProp);\n  const titleId = `metric-title-${id}`;\n  const subtitleId = `metric-subtitle-${id}`;\n  const valueId = `metric-value-${id}`;\n\n  const value = useMemo(\n    () => ({\n      align,\n      direction,\n      orientation,\n      showIndicator,\n      indicatorPosition,\n      headingAriaLevel,\n      size,\n      titleId,\n      subtitleId,\n      valueId,\n    }),\n    [\n      align,\n      direction,\n      orientation,\n      showIndicator,\n      indicatorPosition,\n      headingAriaLevel,\n      size,\n      titleId,\n      subtitleId,\n      valueId,\n    ],\n  );\n\n  return (\n    <MetricContextProvider value={value}>\n      <div\n        {...restProps}\n        className={clsx(\n          withBaseName(),\n          withBaseName(`size-${size}`),\n          {\n            [withBaseName(`direction-${direction}`)]: direction,\n            [withBaseName(`orientation-${orientation}`)]: orientation,\n            [withBaseName(`align-${align}`)]: align,\n          },\n          className,\n        )}\n        id={id}\n        ref={ref}\n      >\n        {children}\n      </div>\n    </MetricContextProvider>\n  );\n});\n"],"names":["Metric","metricCSS"],"mappings":";;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA;AAmBjC,MAAA,MAAA,GAAS,UAAwC,CAAA,SAASA,OACrE,CAAA;AAAA,EACE,SAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,KAAQ,GAAA,MAAA;AAAA,EACR,WAAc,GAAA,UAAA;AAAA,EACd,iBAAoB,GAAA,KAAA;AAAA,EACpB,gBAAmB,GAAA,CAAA;AAAA,EACnB,EAAI,EAAA,MAAA;AAAA,EACJ,IAAO,GAAA,QAAA;AAAA,EACP,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,EAAM,MAAA,OAAA,GAAU,gBAAgB,EAAE,CAAA,CAAA;AAClC,EAAM,MAAA,UAAA,GAAa,mBAAmB,EAAE,CAAA,CAAA;AACxC,EAAM,MAAA,OAAA,GAAU,gBAAgB,EAAE,CAAA,CAAA;AAElC,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,OAAO;AAAA,MACL,KAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KACF,CAAA;AAAA,IACA;AAAA,MACE,KAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EACE,uBAAA,GAAA,CAAC,yBAAsB,KACrB,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,YAAA,CAAa,CAAQ,KAAA,EAAA,IAAI,CAAE,CAAA,CAAA;AAAA,QAC3B;AAAA,UACE,CAAC,YAAa,CAAA,CAAA,UAAA,EAAa,SAAS,CAAA,CAAE,CAAC,GAAG,SAAA;AAAA,UAC1C,CAAC,YAAa,CAAA,CAAA,YAAA,EAAe,WAAW,CAAA,CAAE,CAAC,GAAG,WAAA;AAAA,UAC9C,CAAC,YAAa,CAAA,CAAA,MAAA,EAAS,KAAK,CAAA,CAAE,CAAC,GAAG;AAAA,SACpC;AAAA,QACA;AAAA,OACF;AAAA,MACA,EAAA;AAAA,MACA,GAAA;AAAA,MAEC;AAAA;AAAA,GAEL,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/metric/MetricContent.js

@@ -51,36 +51,40 @@ const MetricContent = forwardRef(
       size: iconSize,
       ...IndicatorIconProps
     };
-    const IconComponent = IndicatorIconComponent != null ? IndicatorIconComponent : direction ? iconComponentMap[direction] : void 0;
-    const icon = showIndicator && IconComponent ? /* @__PURE__ */ jsx(IconComponent, {
-      ...iconProps
-    }) : null;
-    return /* @__PURE__ */ jsxs("div", {
-      ...restProps,
-      className: clsx(withBaseName(), className),
-      "aria-labelledby": `${titleId || ""} ${subtitleId || ""}`,
-      ref,
-      children: [
-        /* @__PURE__ */ jsxs("div", {
-          className: withBaseName("value-container"),
-          children: [
+    const IconComponent = IndicatorIconComponent ?? (direction ? iconComponentMap[direction] : void 0);
+    const icon = showIndicator && IconComponent ? /* @__PURE__ */ jsx(IconComponent, { ...iconProps }) : null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...restProps,
+        className: clsx(withBaseName(), className),
+        "aria-labelledby": `${titleId || ""} ${subtitleId || ""}`,
+        ref,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: withBaseName("value-container"), children: [
             indicatorPosition === "start" && icon,
-            /* @__PURE__ */ jsx(ValueComponent, {
-              "data-testid": "metric-value",
-              id: valueId,
-              className: withBaseName("value"),
-              children: value
-            }),
+            /* @__PURE__ */ jsx(
+              ValueComponent,
+              {
+                "data-testid": "metric-value",
+                id: valueId,
+                className: withBaseName("value"),
+                children: value
+              }
+            ),
             indicatorPosition === "end" && icon
-          ]
-        }),
-        subvalue && /* @__PURE__ */ jsx(Text, {
-          className: withBaseName("subvalue"),
-          "data-testid": "metric-subvalue",
-          children: subvalue
-        })
-      ]
-    });
+          ] }),
+          subvalue && /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: withBaseName("subvalue"),
+              "data-testid": "metric-subvalue",
+              children: subvalue
+            }
+          )
+        ]
+      }
+    );
   }
 );
 

package/dist-es/metric/MetricContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetricContent.js","sources":["../src/metric/MetricContent.tsx"],"sourcesContent":["import {\n  Display1,\n  Display2,\n  Display3,\n  Text,\n  makePrefixer,\n} from \"@salt-ds/core\";\nimport { ArrowDownIcon, ArrowUpIcon, type IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { type ComponentType, type HTMLAttributes, forwardRef } from \"react\";\nimport { useMetricContext } from \"./internal\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport metricContentCss from \"./MetricContent.css\";\n\nexport interface MetricContentProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * These props will be passed to the indicator icon. Use this to render a\n   * custom icon.\n   *\n   * @see `Icon` for a list of valid props.\n   */\n  IndicatorIconProps?: Partial<IconProps>;\n  /**\n   * Replace the default Icon component\n   */\n  IndicatorIconComponent?: ComponentType<IconProps>;\n\n  /**\n   * Other data that may serve as additional information to the main value\n   */\n  subvalue?: string | number;\n  /**\n   * The main value to display in the metric\n   */\n  value: string | number;\n}\n\nconst iconComponentMap = {\n  down: ArrowDownIcon,\n  up: ArrowUpIcon,\n};\n\nconst withBaseName = makePrefixer(\"saltMetricContent\");\n\nexport const MetricContent = forwardRef<HTMLDivElement, MetricContentProps>(\n  function MetricContent(\n    {\n      IndicatorIconProps,\n      IndicatorIconComponent,\n      className,\n      value,\n      subvalue,\n      ...restProps\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-metric-content\",\n      css: metricContentCss,\n      window: targetWindow,\n    });\n\n    const {\n      direction,\n      showIndicator,\n      indicatorPosition,\n      size = \"medium\",\n      valueId,\n      titleId,\n      subtitleId,\n    } = useMetricContext();\n\n    const iconSize = size === \"large\" ? 2 : 1;\n\n    const valueComponentMap = {\n      small: Display3,\n      medium: Display2,\n      large: Display1,\n    };\n    const ValueComponent = valueComponentMap[size];\n\n    const iconProps = {\n      \"aria-label\": direction,\n      className: withBaseName(\"indicator\"),\n      name: direction ? `movement-${direction}` : \"\",\n      size: iconSize,\n      ...IndicatorIconProps,\n    };\n\n    const IconComponent =\n      IndicatorIconComponent ??\n      (direction ? iconComponentMap[direction] : undefined);\n\n    const icon =\n      showIndicator && IconComponent ? <IconComponent {...iconProps} /> : null;\n\n    return (\n      <div\n        {...restProps}\n        className={clsx(withBaseName(), className)}\n        aria-labelledby={`${titleId || \"\"} ${subtitleId || \"\"}`}\n        ref={ref}\n      >\n        <div className={withBaseName(\"value-container\")}>\n          {indicatorPosition === \"start\" && icon}\n          <ValueComponent\n            data-testid=\"metric-value\"\n            id={valueId}\n            className={withBaseName(\"value\")}\n          >\n            {value}\n          </ValueComponent>\n          {indicatorPosition === \"end\" && icon}\n        </div>\n        {subvalue && (\n          <Text\n            className={withBaseName(\"subvalue\")}\n            data-testid=\"metric-subvalue\"\n          >\n            {subvalue}\n          </Text>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["MetricContent","metricContentCss"],"mappings":";;;;;;;;;;AAwCA,MAAM,gBAAmB,GAAA;AAAA,EACvB,IAAM,EAAA,aAAA;AAAA,EACN,EAAI,EAAA,WAAA;AACN,CAAA,CAAA;AAEA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cACP,CAAA;AAAA,IACE,kBAAA;AAAA,IACA,sBAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,IAAO,GAAA,QAAA;AAAA,MACP,OAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,QACE,gBAAiB,EAAA,CAAA;AAErB,IAAM,MAAA,QAAA,GAAW,IAAS,KAAA,OAAA,GAAU,CAAI,GAAA,CAAA,CAAA;AAExC,IAAA,MAAM,iBAAoB,GAAA;AAAA,MACxB,KAAO,EAAA,QAAA;AAAA,MACP,MAAQ,EAAA,QAAA;AAAA,MACR,KAAO,EAAA,QAAA;AAAA,KACT,CAAA;AACA,IAAA,MAAM,iBAAiB,iBAAkB,CAAA,IAAA,CAAA,CAAA;AAEzC,IAAA,MAAM,SAAY,GAAA;AAAA,MAChB,YAAc,EAAA,SAAA;AAAA,MACd,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,MACnC,IAAA,EAAM,SAAY,GAAA,CAAA,SAAA,EAAY,SAAc,CAAA,CAAA,GAAA,EAAA;AAAA,MAC5C,IAAM,EAAA,QAAA;AAAA,MACN,GAAG,kBAAA;AAAA,KACL,CAAA;AAEA,IAAA,MAAM,aACJ,GAAA,sBAAA,IAAA,IAAA,GAAA,sBAAA,GACC,SAAY,GAAA,gBAAA,CAAiB,SAAa,CAAA,GAAA,KAAA,CAAA,CAAA;AAE7C,IAAM,MAAA,IAAA,GACJ,aAAiB,IAAA,aAAA,mBAAiB,GAAA,CAAA,aAAA,EAAA;AAAA,MAAe,GAAG,SAAA;AAAA,KAAW,CAAK,GAAA,IAAA,CAAA;AAEtE,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,iBAAiB,EAAA,CAAA,EAAG,OAAW,IAAA,EAAA,CAAA,CAAA,EAAM,UAAc,IAAA,EAAA,CAAA,CAAA;AAAA,MACnD,GAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,UAC3C,QAAA,EAAA;AAAA,YAAA,iBAAA,KAAsB,OAAW,IAAA,IAAA;AAAA,4BACjC,GAAA,CAAA,cAAA,EAAA;AAAA,cACC,aAAY,EAAA,cAAA;AAAA,cACZ,EAAI,EAAA,OAAA;AAAA,cACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAE9B,QAAA,EAAA,KAAA;AAAA,aACH,CAAA;AAAA,YACC,sBAAsB,KAAS,IAAA,IAAA;AAAA,WAAA;AAAA,SAClC,CAAA;AAAA,QACC,4BACE,GAAA,CAAA,IAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,UAClC,aAAY,EAAA,iBAAA;AAAA,UAEX,QAAA,EAAA,QAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"MetricContent.js","sources":["../src/metric/MetricContent.tsx"],"sourcesContent":["import {\n  Display1,\n  Display2,\n  Display3,\n  Text,\n  makePrefixer,\n} from \"@salt-ds/core\";\nimport { ArrowDownIcon, ArrowUpIcon, type IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { type ComponentType, type HTMLAttributes, forwardRef } from \"react\";\nimport { useMetricContext } from \"./internal\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport metricContentCss from \"./MetricContent.css\";\n\nexport interface MetricContentProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * These props will be passed to the indicator icon. Use this to render a\n   * custom icon.\n   *\n   * @see `Icon` for a list of valid props.\n   */\n  IndicatorIconProps?: Partial<IconProps>;\n  /**\n   * Replace the default Icon component\n   */\n  IndicatorIconComponent?: ComponentType<IconProps>;\n\n  /**\n   * Other data that may serve as additional information to the main value\n   */\n  subvalue?: string | number;\n  /**\n   * The main value to display in the metric\n   */\n  value: string | number;\n}\n\nconst iconComponentMap = {\n  down: ArrowDownIcon,\n  up: ArrowUpIcon,\n};\n\nconst withBaseName = makePrefixer(\"saltMetricContent\");\n\nexport const MetricContent = forwardRef<HTMLDivElement, MetricContentProps>(\n  function MetricContent(\n    {\n      IndicatorIconProps,\n      IndicatorIconComponent,\n      className,\n      value,\n      subvalue,\n      ...restProps\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-metric-content\",\n      css: metricContentCss,\n      window: targetWindow,\n    });\n\n    const {\n      direction,\n      showIndicator,\n      indicatorPosition,\n      size = \"medium\",\n      valueId,\n      titleId,\n      subtitleId,\n    } = useMetricContext();\n\n    const iconSize = size === \"large\" ? 2 : 1;\n\n    const valueComponentMap = {\n      small: Display3,\n      medium: Display2,\n      large: Display1,\n    };\n    const ValueComponent = valueComponentMap[size];\n\n    const iconProps = {\n      \"aria-label\": direction,\n      className: withBaseName(\"indicator\"),\n      name: direction ? `movement-${direction}` : \"\",\n      size: iconSize,\n      ...IndicatorIconProps,\n    };\n\n    const IconComponent =\n      IndicatorIconComponent ??\n      (direction ? iconComponentMap[direction] : undefined);\n\n    const icon =\n      showIndicator && IconComponent ? <IconComponent {...iconProps} /> : null;\n\n    return (\n      <div\n        {...restProps}\n        className={clsx(withBaseName(), className)}\n        aria-labelledby={`${titleId || \"\"} ${subtitleId || \"\"}`}\n        ref={ref}\n      >\n        <div className={withBaseName(\"value-container\")}>\n          {indicatorPosition === \"start\" && icon}\n          <ValueComponent\n            data-testid=\"metric-value\"\n            id={valueId}\n            className={withBaseName(\"value\")}\n          >\n            {value}\n          </ValueComponent>\n          {indicatorPosition === \"end\" && icon}\n        </div>\n        {subvalue && (\n          <Text\n            className={withBaseName(\"subvalue\")}\n            data-testid=\"metric-subvalue\"\n          >\n            {subvalue}\n          </Text>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["MetricContent","metricContentCss"],"mappings":";;;;;;;;;;AAwCA,MAAM,gBAAmB,GAAA;AAAA,EACvB,IAAM,EAAA,aAAA;AAAA,EACN,EAAI,EAAA;AACN,CAAA;AAEA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cACP,CAAA;AAAA,IACE,kBAAA;AAAA,IACA,sBAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,IAAO,GAAA,QAAA;AAAA,MACP,OAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,QACE,gBAAiB,EAAA;AAErB,IAAM,MAAA,QAAA,GAAW,IAAS,KAAA,OAAA,GAAU,CAAI,GAAA,CAAA;AAExC,IAAA,MAAM,iBAAoB,GAAA;AAAA,MACxB,KAAO,EAAA,QAAA;AAAA,MACP,MAAQ,EAAA,QAAA;AAAA,MACR,KAAO,EAAA;AAAA,KACT;AACA,IAAM,MAAA,cAAA,GAAiB,kBAAkB,IAAI,CAAA;AAE7C,IAAA,MAAM,SAAY,GAAA;AAAA,MAChB,YAAc,EAAA,SAAA;AAAA,MACd,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,MACnC,IAAM,EAAA,SAAA,GAAY,CAAY,SAAA,EAAA,SAAS,CAAK,CAAA,GAAA,EAAA;AAAA,MAC5C,IAAM,EAAA,QAAA;AAAA,MACN,GAAG;AAAA,KACL;AAEA,IAAA,MAAM,aACJ,GAAA,sBAAA,KACC,SAAY,GAAA,gBAAA,CAAiB,SAAS,CAAI,GAAA,KAAA,CAAA,CAAA;AAE7C,IAAA,MAAM,OACJ,aAAiB,IAAA,aAAA,uBAAiB,aAAe,EAAA,EAAA,GAAG,WAAW,CAAK,GAAA,IAAA;AAEtE,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,SAAA;AAAA,QACJ,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,mBAAiB,CAAG,EAAA,OAAA,IAAW,EAAE,CAAA,CAAA,EAAI,cAAc,EAAE,CAAA,CAAA;AAAA,QACrD,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,iBAAiB,CAC3C,EAAA,QAAA,EAAA;AAAA,YAAA,iBAAA,KAAsB,OAAW,IAAA,IAAA;AAAA,4BAClC,GAAA;AAAA,cAAC,cAAA;AAAA,cAAA;AAAA,gBACC,aAAY,EAAA,cAAA;AAAA,gBACZ,EAAI,EAAA,OAAA;AAAA,gBACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,gBAE9B,QAAA,EAAA;AAAA;AAAA,aACH;AAAA,YACC,sBAAsB,KAAS,IAAA;AAAA,WAClC,EAAA,CAAA;AAAA,UACC,QACC,oBAAA,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,cAClC,aAAY,EAAA,iBAAA;AAAA,cAEX,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,KAEJ;AAAA;AAGN;;;;"}

package/dist-es/metric/MetricHeader.js

@@ -18,31 +18,27 @@ const MetricHeader = forwardRef(
     });
     const { titleId, subtitleId, headingAriaLevel } = useMetricContext();
     const renderSubtitle = useCallback(() => {
-      if (!subtitle)
-        return null;
-      const subtitleComponent = /* @__PURE__ */ jsx(Text, {
-        id: subtitleId,
-        className: withBaseName("subtitle"),
-        "data-testid": "metric-subtitle",
-        variant: "secondary",
-        children: subtitle
-      });
+      if (!subtitle) return null;
+      const subtitleComponent = /* @__PURE__ */ jsx(
+        Text,
+        {
+          id: subtitleId,
+          className: withBaseName("subtitle"),
+          "data-testid": "metric-subtitle",
+          variant: "secondary",
+          children: subtitle
+        }
+      );
       if (SubtitleLinkProps) {
         const { href = "", ...restLinkProps } = SubtitleLinkProps;
-        return /* @__PURE__ */ jsx(Link, {
-          href,
-          ...restLinkProps,
-          children: subtitleComponent
-        });
+        return /* @__PURE__ */ jsx(Link, { href, ...restLinkProps, children: subtitleComponent });
       }
       return subtitleComponent;
     }, [subtitle, subtitleId, SubtitleLinkProps]);
-    return /* @__PURE__ */ jsxs("div", {
-      ...restProps,
-      className: clsx(withBaseName(), className),
-      ref,
-      children: [
-        /* @__PURE__ */ jsx(Text, {
+    return /* @__PURE__ */ jsxs("div", { ...restProps, className: clsx(withBaseName(), className), ref, children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
           styleAs: "h4",
           className: withBaseName("title"),
           "data-testid": "metric-title",
@@ -50,10 +46,10 @@ const MetricHeader = forwardRef(
           role: "heading",
           "aria-level": headingAriaLevel,
           children: title
-        }),
-        renderSubtitle()
-      ]
-    });
+        }
+      ),
+      renderSubtitle()
+    ] });
   }
 );
 

package/dist-es/metric/MetricHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetricHeader.js","sources":["../src/metric/MetricHeader.tsx"],"sourcesContent":["import { Link, type LinkProps, Text, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef, useCallback } from \"react\";\nimport { useMetricContext } from \"./internal\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport metricHeaderCss from \"./MetricHeader.css\";\n\nexport interface MetricHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * If provided, subtitle will be rendered as a `Link` element with these props.\n   *\n   * @see `Link` for a list of valid props.\n   */\n  SubtitleLinkProps?: Omit<Partial<LinkProps>, \"children\">;\n  /**\n   * Subtitle of the Metric Header\n   */\n  subtitle?: string;\n  /**\n   * Title of the Metric Header\n   */\n  title: string;\n}\n\nconst withBaseName = makePrefixer(\"saltMetricHeader\");\n\nexport const MetricHeader = forwardRef<HTMLDivElement, MetricHeaderProps>(\n  function MetricHeader(\n    { SubtitleLinkProps, className, title, subtitle, ...restProps },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-metric-header\",\n      css: metricHeaderCss,\n      window: targetWindow,\n    });\n\n    const { titleId, subtitleId, headingAriaLevel } = useMetricContext();\n\n    const renderSubtitle = useCallback(() => {\n      if (!subtitle) return null;\n\n      const subtitleComponent = (\n        <Text\n          id={subtitleId}\n          className={withBaseName(\"subtitle\")}\n          data-testid=\"metric-subtitle\"\n          variant=\"secondary\"\n        >\n          {subtitle}\n        </Text>\n      );\n\n      if (SubtitleLinkProps) {\n        const { href = \"\", ...restLinkProps } = SubtitleLinkProps;\n\n        return (\n          <Link href={href} {...restLinkProps}>\n            {subtitleComponent}\n          </Link>\n        );\n      }\n\n      return subtitleComponent;\n    }, [subtitle, subtitleId, SubtitleLinkProps]);\n\n    return (\n      <div {...restProps} className={clsx(withBaseName(), className)} ref={ref}>\n        <Text\n          styleAs=\"h4\"\n          className={withBaseName(\"title\")}\n          data-testid=\"metric-title\"\n          id={titleId}\n          role=\"heading\"\n          aria-level={headingAriaLevel}\n        >\n          {title}\n        </Text>\n        {renderSubtitle()}\n      </div>\n    );\n  },\n);\n"],"names":["MetricHeader","metricHeaderCss"],"mappings":";;;;;;;;;AA2BA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAE7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,cACP,EAAE,iBAAA,EAAmB,WAAW,KAAO,EAAA,QAAA,EAAA,GAAa,SAAU,EAAA,EAC9D,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,OAAA,EAAS,UAAY,EAAA,gBAAA,KAAqB,gBAAiB,EAAA,CAAA;AAEnE,IAAM,MAAA,cAAA,GAAiB,YAAY,MAAM;AACvC,MAAA,IAAI,CAAC,QAAA;AAAU,QAAO,OAAA,IAAA,CAAA;AAEtB,MAAA,MAAM,oCACH,GAAA,CAAA,IAAA,EAAA;AAAA,QACC,EAAI,EAAA,UAAA;AAAA,QACJ,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,QAClC,aAAY,EAAA,iBAAA;AAAA,QACZ,OAAQ,EAAA,WAAA;AAAA,QAEP,QAAA,EAAA,QAAA;AAAA,OACH,CAAA,CAAA;AAGF,MAAA,IAAI,iBAAmB,EAAA;AACrB,QAAA,MAAM,EAAE,IAAA,GAAO,EAAO,EAAA,GAAA,aAAA,EAAkB,GAAA,iBAAA,CAAA;AAExC,QAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,UAAK,IAAA;AAAA,UAAa,GAAG,aAAA;AAAA,UACnB,QAAA,EAAA,iBAAA;AAAA,SACH,CAAA,CAAA;AAAA,OAEJ;AAEA,MAAO,OAAA,iBAAA,CAAA;AAAA,KACN,EAAA,CAAC,QAAU,EAAA,UAAA,EAAY,iBAAiB,CAAC,CAAA,CAAA;AAE5C,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MAAK,GAAG,SAAA;AAAA,MAAW,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAC9D,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,IAAA,EAAA;AAAA,UACC,OAAQ,EAAA,IAAA;AAAA,UACR,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,aAAY,EAAA,cAAA;AAAA,UACZ,EAAI,EAAA,OAAA;AAAA,UACJ,IAAK,EAAA,SAAA;AAAA,UACL,YAAY,EAAA,gBAAA;AAAA,UAEX,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,QACC,cAAe,EAAA;AAAA,OAAA;AAAA,KAClB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"MetricHeader.js","sources":["../src/metric/MetricHeader.tsx"],"sourcesContent":["import { Link, type LinkProps, Text, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef, useCallback } from \"react\";\nimport { useMetricContext } from \"./internal\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport metricHeaderCss from \"./MetricHeader.css\";\n\nexport interface MetricHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * If provided, subtitle will be rendered as a `Link` element with these props.\n   *\n   * @see `Link` for a list of valid props.\n   */\n  SubtitleLinkProps?: Omit<Partial<LinkProps>, \"children\">;\n  /**\n   * Subtitle of the Metric Header\n   */\n  subtitle?: string;\n  /**\n   * Title of the Metric Header\n   */\n  title: string;\n}\n\nconst withBaseName = makePrefixer(\"saltMetricHeader\");\n\nexport const MetricHeader = forwardRef<HTMLDivElement, MetricHeaderProps>(\n  function MetricHeader(\n    { SubtitleLinkProps, className, title, subtitle, ...restProps },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-metric-header\",\n      css: metricHeaderCss,\n      window: targetWindow,\n    });\n\n    const { titleId, subtitleId, headingAriaLevel } = useMetricContext();\n\n    const renderSubtitle = useCallback(() => {\n      if (!subtitle) return null;\n\n      const subtitleComponent = (\n        <Text\n          id={subtitleId}\n          className={withBaseName(\"subtitle\")}\n          data-testid=\"metric-subtitle\"\n          variant=\"secondary\"\n        >\n          {subtitle}\n        </Text>\n      );\n\n      if (SubtitleLinkProps) {\n        const { href = \"\", ...restLinkProps } = SubtitleLinkProps;\n\n        return (\n          <Link href={href} {...restLinkProps}>\n            {subtitleComponent}\n          </Link>\n        );\n      }\n\n      return subtitleComponent;\n    }, [subtitle, subtitleId, SubtitleLinkProps]);\n\n    return (\n      <div {...restProps} className={clsx(withBaseName(), className)} ref={ref}>\n        <Text\n          styleAs=\"h4\"\n          className={withBaseName(\"title\")}\n          data-testid=\"metric-title\"\n          id={titleId}\n          role=\"heading\"\n          aria-level={headingAriaLevel}\n        >\n          {title}\n        </Text>\n        {renderSubtitle()}\n      </div>\n    );\n  },\n);\n"],"names":["MetricHeader","metricHeaderCss"],"mappings":";;;;;;;;;AA2BA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAE7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aACP,CAAA,EAAE,iBAAmB,EAAA,SAAA,EAAW,OAAO,QAAU,EAAA,GAAG,SAAU,EAAA,EAC9D,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,OAAA,EAAS,UAAY,EAAA,gBAAA,KAAqB,gBAAiB,EAAA;AAEnE,IAAM,MAAA,cAAA,GAAiB,YAAY,MAAM;AACvC,MAAI,IAAA,CAAC,UAAiB,OAAA,IAAA;AAEtB,MAAA,MAAM,iBACJ,mBAAA,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA,UAAA;AAAA,UACJ,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,UAClC,aAAY,EAAA,iBAAA;AAAA,UACZ,OAAQ,EAAA,WAAA;AAAA,UAEP,QAAA,EAAA;AAAA;AAAA,OACH;AAGF,MAAA,IAAI,iBAAmB,EAAA;AACrB,QAAA,MAAM,EAAE,IAAA,GAAO,EAAI,EAAA,GAAG,eAAkB,GAAA,iBAAA;AAExC,QAAA,uBACG,GAAA,CAAA,IAAA,EAAA,EAAK,IAAa,EAAA,GAAG,eACnB,QACH,EAAA,iBAAA,EAAA,CAAA;AAAA;AAIJ,MAAO,OAAA,iBAAA;AAAA,KACN,EAAA,CAAC,QAAU,EAAA,UAAA,EAAY,iBAAiB,CAAC,CAAA;AAE5C,IACE,uBAAA,IAAA,CAAC,KAAK,EAAA,EAAA,GAAG,SAAW,EAAA,SAAA,EAAW,KAAK,YAAa,EAAA,EAAG,SAAS,CAAA,EAAG,GAC9D,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,IAAA;AAAA,UACR,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,aAAY,EAAA,cAAA;AAAA,UACZ,EAAI,EAAA,OAAA;AAAA,UACJ,IAAK,EAAA,SAAA;AAAA,UACL,YAAY,EAAA,gBAAA;AAAA,UAEX,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,MACC,cAAe;AAAA,KAClB,EAAA,CAAA;AAAA;AAGN;;;;"}

package/dist-es/metric/internal/MetricContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetricContext.js","sources":["../src/metric/internal/MetricContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport interface MetricContextValue {\n  /**\n   * Text and value alignment.\n   */\n  align?: \"left\" | \"center\" | \"right\";\n  /**\n   * The direction of the main value\n   */\n  direction?: \"up\" | \"down\";\n  /**\n   * The position of the indicator with regards to the main value.\n   */\n  indicatorPosition?: \"start\" | \"end\";\n  /**\n   * The metric orientation (layout flow direction).\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * If 'true', an indicator will be displayed which shows the direction of the main value\n   */\n  showIndicator?: boolean;\n  /**\n   * Set title's heading level. Defaults to 2\n   */\n  headingAriaLevel?: number;\n  /**\n   * Size of the metric value. Defaults to 'medium'\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n}\n\nexport interface MetricContextComponentIds {\n  /**\n   * id of the subtitle\n   */\n  subtitleId?: string;\n  /**\n   * id of the title\n   */\n  titleId?: string;\n  /**\n   * id of the value\n   */\n  valueId?: string;\n}\n\nconst MetricContext = createContext<\n  MetricContextValue & MetricContextComponentIds\n>({});\n\nexport const { Provider: MetricContextProvider } = MetricContext;\nexport const useMetricContext = (): MetricContextValue &\n  MetricContextComponentIds => useContext(MetricContext);\n"],"names":[],"mappings":";;AAgDA,MAAM,aAAA,GAAgB,aAEpB,CAAA,EAAE,CAAA,CAAA;AAES,MAAA,EAAE,QAAU,EAAA,qBAAA,EAA0B,GAAA,cAAA;AACtC,MAAA,gBAAA,GAAmB,MACD,UAAA,CAAW,aAAa;;;;"}
+{"version":3,"file":"MetricContext.js","sources":["../src/metric/internal/MetricContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport interface MetricContextValue {\n  /**\n   * Text and value alignment.\n   */\n  align?: \"left\" | \"center\" | \"right\";\n  /**\n   * The direction of the main value\n   */\n  direction?: \"up\" | \"down\";\n  /**\n   * The position of the indicator with regards to the main value.\n   */\n  indicatorPosition?: \"start\" | \"end\";\n  /**\n   * The metric orientation (layout flow direction).\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * If 'true', an indicator will be displayed which shows the direction of the main value\n   */\n  showIndicator?: boolean;\n  /**\n   * Set title's heading level. Defaults to 2\n   */\n  headingAriaLevel?: number;\n  /**\n   * Size of the metric value. Defaults to 'medium'\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n}\n\nexport interface MetricContextComponentIds {\n  /**\n   * id of the subtitle\n   */\n  subtitleId?: string;\n  /**\n   * id of the title\n   */\n  titleId?: string;\n  /**\n   * id of the value\n   */\n  valueId?: string;\n}\n\nconst MetricContext = createContext<\n  MetricContextValue & MetricContextComponentIds\n>({});\n\nexport const { Provider: MetricContextProvider } = MetricContext;\nexport const useMetricContext = (): MetricContextValue &\n  MetricContextComponentIds => useContext(MetricContext);\n"],"names":[],"mappings":";;AAgDA,MAAM,aAAA,GAAgB,aAEpB,CAAA,EAAE,CAAA;AAES,MAAA,EAAE,QAAU,EAAA,qBAAA,EAA0B,GAAA;AACtC,MAAA,gBAAA,GAAmB,MACD,UAAA,CAAW,aAAa;;;;"}

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

@@ -0,0 +1,4 @@
+var css_248z = ".saltOverlayHeader {\n  padding: var(--salt-spacing-100);\n  width: 100%;\n  align-items: center;\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}\n\n.saltOverlayHeader-header > .saltText {\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";
+
+export { css_248z as default };
+//# sourceMappingURL=OverlayHeader.css.js.map

package/dist-es/overlay/OverlayHeader.css.js.map

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

package/dist-es/overlay/OverlayHeader.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, Text } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import css_248z from './OverlayHeader.css.js';
+
+const withBaseName = makePrefixer("saltOverlayHeader");
+const OverlayHeader = forwardRef(
+  function OverlayHeader2(props, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-overlay-header",
+      css: css_248z,
+      window: targetWindow
+    });
+    const { className, description, header, actions, preheader, ...rest } = props;
+    return /* @__PURE__ */ jsxs("div", { className: clsx(withBaseName(), className), ...rest, ref, children: [
+      /* @__PURE__ */ jsxs("div", { className: withBaseName("container"), children: [
+        /* @__PURE__ */ jsxs("div", { className: withBaseName("header"), children: [
+          preheader && /* @__PURE__ */ jsx(Text, { className: withBaseName("preheader"), children: preheader }),
+          header
+        ] }),
+        description && /* @__PURE__ */ jsx(Text, { color: "secondary", className: withBaseName("description"), children: description })
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: withBaseName("actionsContainer"), children: actions })
+    ] });
+  }
+);
+
+export { OverlayHeader };
+//# sourceMappingURL=OverlayHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayHeader.js","sources":["../src/overlay/OverlayHeader.tsx"],"sourcesContent":["import { Text, makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\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          <div className={withBaseName(\"header\")}>\n            {preheader && (\n              <Text className={withBaseName(\"preheader\")}>{preheader}</Text>\n            )}\n            {header}\n          </div>\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":["OverlayHeader","overlayHeaderCss"],"mappings":";;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAqB9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,WAAW,WAAa,EAAA,MAAA,EAAQ,SAAS,SAAW,EAAA,GAAG,MAC7D,GAAA,KAAA;AAEF,IACE,uBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,IAAK,CAAA,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,GACzD,EAAA,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,WAAW,CACtC,EAAA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,QAAQ,CAClC,EAAA,QAAA,EAAA;AAAA,UAAA,SAAA,wBACE,IAAK,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,WAAW,GAAI,QAAU,EAAA,SAAA,EAAA,CAAA;AAAA,UAExD;AAAA,SACH,EAAA,CAAA;AAAA,QACC,WAAA,wBACE,IAAK,EAAA,EAAA,KAAA,EAAM,aAAY,SAAW,EAAA,YAAA,CAAa,aAAa,CAAA,EAC1D,QACH,EAAA,WAAA,EAAA;AAAA,OAEJ,EAAA,CAAA;AAAA,MACC,2BACE,GAAA,CAAA,KAAA,EAAA,EAAI,WAAW,YAAa,CAAA,kBAAkB,GAAI,QAAQ,EAAA,OAAA,EAAA;AAAA,KAE/D,EAAA,CAAA;AAAA;AAGN;;;;"}

package/dist-es/portal/Portal.js

@@ -13,11 +13,10 @@ const Portal = forwardRef(function Portal2({
   disablePortal = false,
   id = DEFAULT_ID
 }, ref) {
-  var _a;
   const [mounted, setMounted] = useState(false);
   const portalRef = useRef(null);
   const handleRef = useForkRef(getRefFromChildren(children), ref);
-  const container = (_a = getContainer(containerProp)) != null ? _a : document.body;
+  const container = getContainer(containerProp) ?? document.body;
   useIsomorphicLayoutEffect(() => {
     const root = ownerDocument(container).getElementById(id);
     if (root) {
@@ -38,15 +37,11 @@ const Portal = forwardRef(function Portal2({
         ref: handleRef
       });
     }
-    return /* @__PURE__ */ jsx(Fragment, {
-      children
-    });
+    return /* @__PURE__ */ jsx(Fragment, { children });
   }
   if (mounted && portalRef.current && children) {
     return createPortal(
-      /* @__PURE__ */ jsx(SaltProvider, {
-        children
-      }),
+      /* @__PURE__ */ jsx(SaltProvider, { children }),
       portalRef.current
     );
   }