@salt-ds/lab 1.0.0-alpha.2 → 1.0.0-alpha.21

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

@@ -0,0 +1,4 @@
+var css_248z = "";
+
+export { css_248z as default };
+//# sourceMappingURL=MenuButton.css.js.map

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

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

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

@@ -0,0 +1,51 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useCallback } from 'react';
+import { CascadingMenu } from '../cascading-menu/CascadingMenu.js';
+import { MenuButtonTrigger } from './MenuButtonTrigger.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './MenuButton.css.js';
+
+const MenuButton = forwardRef(
+  function MenuButton2({ variant = "secondary", CascadingMenuProps: CascadingMenuProps2 = {}, children, ...restProps }, ref) {
+    const {
+      initialSource = { menuItems: [] },
+      onOpen,
+      onClose,
+      ...restMenuProps
+    } = CascadingMenuProps2;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-menu-button",
+      css: css_248z,
+      window: targetWindow
+    });
+    const [isMenuOpen, setMenuOpen] = useState(false);
+    const handleOpen = useCallback(() => {
+      setMenuOpen(true);
+      onOpen && onOpen();
+    }, [onOpen]);
+    const handleClose = useCallback(() => {
+      setMenuOpen(false);
+      onClose && 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
+      })
+    });
+  }
+);
+
+export { MenuButton };
+//# sourceMappingURL=MenuButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButton.js","sources":["../src/menu-button/MenuButton.tsx"],"sourcesContent":["import { forwardRef, ReactNode, useCallback, useState } from \"react\";\nimport { ButtonProps } from \"@salt-ds/core\";\nimport { CascadingMenu, CascadingMenuProps } from \"../cascading-menu\";\nimport { MenuButtonTrigger } from \"./MenuButtonTrigger\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\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 && onOpen();\n    }, [onOpen]);\n\n    const handleClose = useCallback(() => {\n      setMenuOpen(false);\n      onClose && 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","CascadingMenuProps","menuButtonCss"],"mappings":";;;;;;;;AAgBO,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WAAAA,CACP,EAAE,OAAA,GAAU,WAAa,EAAA,kBAAA,EAAAC,mBAAqB,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,KACDA,GAAAA,mBAAAA,CAAAA;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,IAAU,MAAO,EAAA,CAAA;AAAA,KACnB,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,IAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,MAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AACjB,MAAA,OAAA,IAAW,OAAQ,EAAA,CAAA;AAAA,KACrB,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;;;;"}

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

@@ -0,0 +1,4 @@
+var css_248z = ".saltMenuButtonTrigger {\n  --menuButton-trigger-open-color: var(--saltMenuButton-trigger-open-color, var(--salt-actionable-primary-foreground-active));\n}\n\n.saltMenuButtonTrigger {\n  display: inline-flex;\n  line-height: 1;\n}\n\n.saltMenuButtonTrigger-buttonOpen {\n  background: var(--saltMenuButton-trigger-open-background, var(--salt-actionable-primary-background-active));\n  color: var(--menuButton-trigger-open-color);\n}\n\n.saltMenuButtonTrigger-buttonOpen:not(:hover) .saltMenuButtonTrigger-caretIcon {\n  color: var(--menuButton-trigger-open-color);\n}\n\n.saltMenuButtonTrigger-buttonOpen:not(:hover) .saltMenuButtonTrigger-icon {\n  color: var(--menuButton-trigger-open-color);\n}\n\n.saltMenuButtonTrigger-icon {\n}\n\n.saltMenuButtonTrigger-caretIcon {\n  --saltIcon-margin: 0 0 0 var(--salt-size-unit);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=MenuButtonTrigger.css.js.map

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

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

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

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import { makePrefixer, Button } from '@salt-ds/core';
+import { ChevronDownIcon } from '@salt-ds/icons';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './MenuButtonTrigger.css.js';
+
+const withBaseName = makePrefixer("saltMenuButtonTrigger");
+const MenuButtonTrigger = forwardRef(function MenuButtonTrigger2({ className, hideCaret, isMenuOpen, children, ...rest }, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-menu-button-trigger",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxs(Button, {
+    ref,
+    className: clsx(withBaseName(), className, {
+      [withBaseName("buttonOpen")]: isMenuOpen
+    }),
+    "data-testid": "menu-button-trigger",
+    ...rest,
+    children: [
+      children,
+      !hideCaret && /* @__PURE__ */ jsx(ChevronDownIcon, {
+        className: withBaseName("caretIcon"),
+        "data-testid": "menu-button-trigger-caret"
+      })
+    ]
+  });
+});
+
+export { MenuButtonTrigger };
+//# sourceMappingURL=MenuButtonTrigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButtonTrigger.js","sources":["../src/menu-button/MenuButtonTrigger.tsx"],"sourcesContent":["import { forwardRef, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { ChevronDownIcon } from \"@salt-ds/icons\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\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\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        <ChevronDownIcon\n          className={withBaseName(\"caretIcon\")}\n          data-testid=\"menu-button-trigger-caret\"\n        />\n      )}\n    </Button>\n  );\n});\n"],"names":["MenuButtonTrigger","menuButtonTrigger"],"mappings":";;;;;;;;;AAUA,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;AAED,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,eAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,QACnC,aAAY,EAAA,2BAAA;AAAA,OACd,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,4 @@
+var css_248z = ".saltMetric {\n  display: flex;\n  align-items: flex-start;\n  padding: 0px;\n  color: var(--saltMetric-color, var(--salt-text-primary-foreground));\n}\n\n.saltMetric-orientation-horizontal {\n  flex-direction: row;\n  gap: var(--metric-horizontal-gap, 16px);\n  margin-top: var(--metric-horizontal-marginTop, 0px);\n}\n\n.saltMetric-orientation-vertical {\n  flex-direction: column;\n  justify-content: center;\n}\n\n.saltMetric-orientation-vertical.saltMetric-align-center {\n  align-items: center;\n}\n.saltMetric-orientation-vertical.saltMetric-align-right {\n  align-items: flex-end;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Metric.css.js.map

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

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

package/dist-es/metric/Metric.js

@@ -0,0 +1,82 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useId } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { forwardRef, useMemo } from 'react';
+import { MetricContextProvider } from './internal/MetricContext.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './Metric.css.js';
+
+const withBaseName = makePrefixer("saltMetric");
+const Metric = forwardRef(function Metric2({
+  className,
+  children,
+  direction,
+  showIndicator,
+  align = "left",
+  orientation = "vertical",
+  indicatorPosition = "end",
+  headingAriaLevel = 2,
+  id: idProp,
+  size = "medium",
+  ...restProps
+}, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-metric",
+    css: css_248z,
+    window: targetWindow
+  });
+  const id = useId(idProp);
+  const titleId = `metric-title-${id}`;
+  const subtitleId = `metric-subtitle-${id}`;
+  const valueId = `metric-value-${id}`;
+  const value = useMemo(
+    () => ({
+      align,
+      direction,
+      orientation,
+      showIndicator,
+      indicatorPosition,
+      headingAriaLevel,
+      size,
+      titleId,
+      subtitleId,
+      valueId
+    }),
+    [
+      align,
+      direction,
+      orientation,
+      showIndicator,
+      indicatorPosition,
+      headingAriaLevel,
+      size,
+      titleId,
+      subtitleId,
+      valueId
+    ]
+  );
+  return /* @__PURE__ */ jsx(MetricContextProvider, {
+    value,
+    children: /* @__PURE__ */ jsx("div", {
+      ...restProps,
+      className: clsx(
+        withBaseName(),
+        withBaseName(`size-${size}`),
+        {
+          [withBaseName(`direction-${direction}`)]: direction,
+          [withBaseName(`orientation-${orientation}`)]: orientation,
+          [withBaseName(`align-${align}`)]: align
+        },
+        className
+      ),
+      id,
+      ref,
+      children
+    })
+  });
+});
+
+export { Metric };
+//# sourceMappingURL=Metric.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Metric.js","sources":["../src/metric/Metric.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useMemo } from \"react\";\nimport { MetricContextProvider, MetricContextValue } from \"./internal\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\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;;;;"}

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

@@ -0,0 +1,4 @@
+var css_248z = ".saltMetricContent {\n  display: flex;\n  flex-direction: column;\n  margin-top: var(--metric-content-marginTop, 0px);\n}\n\n.saltMetricContent-value-container {\n  align-items: baseline;\n  display: flex;\n  flex-direction: row;\n  gap: calc(var(--salt-size-unit) / 2);\n  margin-top: var(--metric-content-valueContainer-marginTop, 0px);\n}\n\n.saltMetric-direction-up .saltMetricContent-indicator {\n  fill: var(--salt-status-positive-foreground);\n}\n.saltMetric-direction-up .saltMetricContent-subvalue {\n  color: var(--salt-status-positive-foreground);\n}\n\n.saltMetric-direction-down .saltMetricContent-indicator {\n  fill: var(--salt-status-negative-foreground);\n}\n.saltMetric-direction-down .saltMetricContent-subvalue {\n  color: var(--salt-status-negative-foreground);\n}\n\n.saltMetricContent-subvalue {\n  margin-top: var(--metric-content-subvalue-marginTop, 0px);\n}\n\n.saltMetric-align-left .saltMetricContent {\n  text-align: left;\n}\n\n.saltMetric-align-center .saltMetricContent {\n  align-items: center;\n  text-align: center;\n}\n\n.saltMetric-align-right .saltMetricContent {\n  align-items: flex-end;\n  text-align: right;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=MetricContent.css.js.map

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

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

package/dist-es/metric/MetricContent.js

@@ -0,0 +1,88 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, Text, Display3, Display2, Display1 } from '@salt-ds/core';
+import { ArrowDownIcon, ArrowUpIcon } from '@salt-ds/icons';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { useMetricContext } from './internal/MetricContext.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './MetricContent.css.js';
+
+const iconComponentMap = {
+  down: ArrowDownIcon,
+  up: ArrowUpIcon
+};
+const withBaseName = makePrefixer("saltMetricContent");
+const MetricContent = forwardRef(
+  function MetricContent2({
+    IndicatorIconProps,
+    IndicatorIconComponent,
+    className,
+    value,
+    subvalue,
+    ...restProps
+  }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-metric-content",
+      css: css_248z,
+      window: targetWindow
+    });
+    const {
+      direction,
+      showIndicator,
+      indicatorPosition,
+      size = "medium",
+      valueId,
+      titleId,
+      subtitleId
+    } = useMetricContext();
+    const iconSize = size === "large" ? 2 : 1;
+    const valueComponentMap = {
+      small: Display3,
+      medium: Display2,
+      large: Display1
+    };
+    const ValueComponent = valueComponentMap[size];
+    const iconProps = {
+      "aria-label": direction,
+      className: withBaseName("indicator"),
+      name: direction ? `movement-${direction}` : "",
+      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: [
+            indicatorPosition === "start" && icon,
+            /* @__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
+        })
+      ]
+    });
+  }
+);
+
+export { MetricContent };
+//# sourceMappingURL=MetricContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MetricContent.js","sources":["../src/metric/MetricContent.tsx"],"sourcesContent":["import {\n  Display1,\n  Display2,\n  Display3,\n  makePrefixer,\n  Text,\n} from \"@salt-ds/core\";\nimport { ArrowDownIcon, ArrowUpIcon, IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { ComponentType, forwardRef, HTMLAttributes } from \"react\";\nimport { useMetricContext } from \"./internal\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\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;;;;"}

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

@@ -0,0 +1,4 @@
+var css_248z = ".saltMetricHeader {\n  --metric-title-color: var(--salt-text-primary-foreground);\n  --metric-subtitle-color: var(--salt-text-secondary-foreground);\n}\n\n.saltMetricHeader {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: calc(var(--salt-size-unit) * 0.25);\n}\n\n.saltMetric-orientation-horizontal.saltMetric-size-small .saltMetricHeader {\n  padding-top: 4px;\n}\n.saltMetric-orientation-horizontal.saltMetric-size-medium .saltMetricHeader {\n  padding-top: 8px;\n}\n.saltMetric-orientation-horizontal.saltMetric-size-large .saltMetricHeader {\n  padding-top: 14px;\n}\n\n.saltMetricHeader-title {\n  color: var(--metric-title-color);\n}\n\n.saltMetricHeader-subtitle {\n  color: var(--metric-subtitle-color);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n.saltMetric-align-center .saltMetricHeader {\n  align-items: center;\n}\n\n.saltMetric-align-right .saltMetricHeader {\n  align-items: flex-end;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=MetricHeader.css.js.map

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

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

package/dist-es/metric/MetricHeader.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { makePrefixer, Text, Link } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { forwardRef, useCallback } from 'react';
+import { useMetricContext } from './internal/MetricContext.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './MetricHeader.css.js';
+
+const withBaseName = makePrefixer("saltMetricHeader");
+const MetricHeader = forwardRef(
+  function MetricHeader2({ SubtitleLinkProps, className, title, subtitle, ...restProps }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-metric-header",
+      css: css_248z,
+      window: targetWindow
+    });
+    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 (SubtitleLinkProps) {
+        const { href = "", ...restLinkProps } = SubtitleLinkProps;
+        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, {
+          styleAs: "h4",
+          className: withBaseName("title"),
+          "data-testid": "metric-title",
+          id: titleId,
+          role: "heading",
+          "aria-level": headingAriaLevel,
+          children: title
+        }),
+        renderSubtitle()
+      ]
+    });
+  }
+);
+
+export { MetricHeader };
+//# sourceMappingURL=MetricHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MetricHeader.js","sources":["../src/metric/MetricHeader.tsx"],"sourcesContent":["import { Link, LinkProps, makePrefixer, Text } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useCallback } from \"react\";\nimport { useMetricContext } from \"./internal\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\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;;;;"}

package/dist-es/navigation-item/ConditionalWrapper.js

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { Button, Link } from '@salt-ds/core';
+
+const ConditionalWrapper = ({
+  children,
+  className,
+  parent,
+  expanded,
+  onExpand,
+  active,
+  href
+}) => {
+  const handleExpand = (event) => {
+    event.stopPropagation();
+    onExpand == null ? void 0 : onExpand(event);
+  };
+  return parent ? /* @__PURE__ */ jsx(Button, {
+    "aria-label": "expand",
+    variant: "secondary",
+    "aria-expanded": expanded,
+    className,
+    onClick: handleExpand,
+    children
+  }) : /* @__PURE__ */ jsx(Link, {
+    "aria-current": active ? "page" : void 0,
+    href,
+    className,
+    children
+  });
+};
+
+export { ConditionalWrapper };
+//# sourceMappingURL=ConditionalWrapper.js.map

package/dist-es/navigation-item/ConditionalWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionalWrapper.js","sources":["../src/navigation-item/ConditionalWrapper.tsx"],"sourcesContent":["import { MouseEvent, ReactNode } from \"react\";\nimport { Link, Button } from \"@salt-ds/core\";\nimport { NavigationItemProps } from \"./NavigationItem\";\n\ninterface ConditionalWrapperProps\n  extends Pick<\n    NavigationItemProps,\n    \"parent\" | \"expanded\" | \"onExpand\" | \"active\" | \"href\"\n  > {\n  children: ReactNode;\n  className: string;\n}\n\nexport const ConditionalWrapper = ({\n  children,\n  className,\n  parent,\n  expanded,\n  onExpand,\n  active,\n  href,\n}: ConditionalWrapperProps) => {\n  const handleExpand = (event: MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n    onExpand?.(event);\n  };\n\n  return parent ? (\n    <Button\n      aria-label=\"expand\"\n      variant=\"secondary\"\n      aria-expanded={expanded}\n      className={className}\n      onClick={handleExpand}\n    >\n      {children}\n    </Button>\n  ) : (\n    <Link\n      aria-current={active ? \"page\" : undefined}\n      href={href}\n      className={className}\n    >\n      {children}\n    </Link>\n  );\n};\n"],"names":[],"mappings":";;;AAaO,MAAM,qBAAqB,CAAC;AAAA,EACjC,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AACF,CAA+B,KAAA;AAC7B,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,OAAO,yBACJ,GAAA,CAAA,MAAA,EAAA;AAAA,IACC,YAAW,EAAA,QAAA;AAAA,IACX,OAAQ,EAAA,WAAA;AAAA,IACR,eAAe,EAAA,QAAA;AAAA,IACf,SAAA;AAAA,IACA,OAAS,EAAA,YAAA;AAAA,IAER,QAAA;AAAA,GACH,oBAEC,GAAA,CAAA,IAAA,EAAA;AAAA,IACC,cAAA,EAAc,SAAS,MAAS,GAAA,KAAA,CAAA;AAAA,IAChC,IAAA;AAAA,IACA,SAAA;AAAA,IAEC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/navigation-item/ExpansionIcon.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { ChevronDownIcon, ChevronRightIcon } from '@salt-ds/icons';
+
+const iconExpansionMap = {
+  vertical: {
+    expanded: ChevronDownIcon,
+    collapsed: ChevronRightIcon
+  },
+  horizontal: {
+    expanded: ChevronDownIcon,
+    collapsed: ChevronDownIcon
+  }
+};
+function ExpansionIcon({
+  expanded = false,
+  orientation = "horizontal",
+  className
+}) {
+  const Icon = iconExpansionMap[orientation][expanded ? "expanded" : "collapsed"];
+  return /* @__PURE__ */ jsx(Icon, {
+    "aria-hidden": "true",
+    className
+  });
+}
+
+export { ExpansionIcon };
+//# sourceMappingURL=ExpansionIcon.js.map

package/dist-es/navigation-item/ExpansionIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpansionIcon.js","sources":["../src/navigation-item/ExpansionIcon.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { NavigationItemProps } from \"./NavigationItem\";\n\nconst iconExpansionMap = {\n  vertical: {\n    expanded: ChevronDownIcon,\n    collapsed: ChevronRightIcon,\n  },\n  horizontal: {\n    expanded: ChevronDownIcon,\n    collapsed: ChevronDownIcon,\n  },\n};\n\nexport function ExpansionIcon({\n  expanded = false,\n  orientation = \"horizontal\",\n  className,\n}: Pick<NavigationItemProps, \"expanded\" | \"orientation\" | \"className\">) {\n  const Icon =\n    iconExpansionMap[orientation][expanded ? \"expanded\" : \"collapsed\"];\n  return <Icon aria-hidden=\"true\" className={className} />;\n}\n"],"names":[],"mappings":";;;AAGA,MAAM,gBAAmB,GAAA;AAAA,EACvB,QAAU,EAAA;AAAA,IACR,QAAU,EAAA,eAAA;AAAA,IACV,SAAW,EAAA,gBAAA;AAAA,GACb;AAAA,EACA,UAAY,EAAA;AAAA,IACV,QAAU,EAAA,eAAA;AAAA,IACV,SAAW,EAAA,eAAA;AAAA,GACb;AACF,CAAA,CAAA;AAEO,SAAS,aAAc,CAAA;AAAA,EAC5B,QAAW,GAAA,KAAA;AAAA,EACX,WAAc,GAAA,YAAA;AAAA,EACd,SAAA;AACF,CAAwE,EAAA;AACtE,EAAA,MAAM,IACJ,GAAA,gBAAA,CAAiB,WAAa,CAAA,CAAA,QAAA,GAAW,UAAa,GAAA,WAAA,CAAA,CAAA;AACxD,EAAA,uBAAQ,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,aAAY,EAAA,MAAA;AAAA,IAAO,SAAA;AAAA,GAAsB,CAAA,CAAA;AACxD;;;;"}

package/dist-es/navigation-item/NavigationItem.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Vars applied to root NavigationItem component */\n.saltNavigationItem {\n  --navigationItem-color: var(--salt-text-primary-foreground);\n  --navigationItem-fill: var(--salt-text-primary-foreground);\n  --navigationItem-bar-inset: var(--salt-spacing-25);\n  --navigationItem-bar-size: var(--salt-size-indicator);\n  --navigationItem-indicator-background: var(--salt-navigable-indicator-active);\n  --navigationItem-gap: var(--salt-spacing-100);\n}\n\n/* Vars applied to NavigationItem component when active */\n.saltNavigationItem-active,\n.saltNavigationItem-rootItem {\n  --navigationItem-fontWeight: var(--salt-text-fontWeight-strong);\n}\n\n/* Vars applied to NavigationItem component when  blur active */\n.saltNavigationItem-blurActive,\n.saltNavigationItem-active.saltNavigationItem-nested {\n  --navigationItem-fontWeight: var(--salt-text-fontWeight);\n}\n\n/* Styles applied to NavigationItem wrapper */\n.saltNavigationItem-wrapper {\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: var(--navigationItem-gap);\n  font-weight: var(--navigationItem-fontWeight);\n  text-decoration: none;\n  /* Hover off animation */\n  transition: all var(--salt-duration-instant) ease-in-out;\n}\n\n/* Styles applied to NavigationItem link */\n.saltNavigationItem-wrapper.saltLink {\n  --link-textDecoration: none;\n}\n\n/* Styles applied to NavigationItem icon */\n.saltNavigationItem-wrapper .saltIcon {\n  fill: var(--navigationItem-fill);\n  top: var(--salt-size-border);\n}\n\n/* Styles applied to NavigationItem Badge */\n.saltNavigationItem-label .saltBadge {\n  margin-left: auto;\n}\n\n/* Styles applied to root NavigationItem component */\n.saltNavigationItem {\n  margin: 0 var(--navigationItem-gap);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-wrapper.saltNavigationItem-horizontal {\n  min-height: calc(var(--salt-size-base) + var(--navigationItem-gap) + var(--navigationItem-gap));\n  padding: calc(var(--navigationItem-gap) + var(--navigationItem-bar-inset)) 0 var(--navigationItem-gap) 0;\n  width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-wrapper.saltNavigationItem-vertical {\n  min-height: calc(var(--salt-size-base));\n  padding-left: calc(var(--salt-spacing-300) + var(--navigationItem-bar-inset));\n  padding-right: var(--navigationItem-gap);\n  margin: var(--salt-spacing-50) 0;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-wrapper .saltNavigationItem-label {\n  --link-color-visited: var(--navigationItem-color);\n  --link-color-hover: var(--navigationItem-color);\n\n  color: var(--navigationItem-color);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  padding-left: calc(var(--saltNavigationItem-level, 0) * var(--navigationItem-gap));\n  flex: 1;\n  text-align: left;\n  display: flex;\n  align-items: baseline;\n  gap: var(--navigationItem-gap);\n}\n\n/* Styles applied when level is not 0 */\n.saltNavigationItem-wrapper.saltNavigationItem-nested {\n  padding-left: calc(var(--salt-size-icon) + var(--salt-spacing-400));\n}\n\n/* Styles applied to expand button */\n.saltNavigationItem-wrapper.saltNavigationItem-expandButton {\n  --saltButton-background-hover: none;\n  --saltButton-background-active: none;\n  --saltButton-textTransform: none;\n  --saltButton-width: 100%;\n  --saltButton-letterSpacing: none;\n\n  gap: var(--navigationItem-gap);\n  /* Required to match link's outline offset */\n  outline-offset: var(--salt-size-border);\n}\n\n/* Styles applied to expand icon */\n.saltNavigationItem-wrapper .saltNavigationItem-expandIcon {\n  --saltIcon-color: var(--navigationItem-fill);\n\n  top: 0;\n}\n\n/* Styles applied to NavigationItem when focus is visible */\n.saltNavigationItem-wrapper:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to NavigationItem when when orientation = \"horizontal\" and focus is visible */\n.saltNavigationItem-horizontal:focus-visible {\n  border-right: var(--navigationItem-gap) solid transparent;\n  border-left: var(--navigationItem-gap) solid transparent;\n  margin: 0 calc(var(--navigationItem-gap) * -1);\n}\n\n/* Styles applied to NavigationItem for non-keyboard focus */\n.saltNavigationItem-wrapper:focus:not(:focus-visible) {\n  outline: 0;\n}\n\n/* Styles applied to activation line */\n.saltNavigationItem-wrapper::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n}\n\n/* Styles applied to activation line when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal::after {\n  width: 100%;\n  height: var(--navigationItem-bar-size);\n  top: var(--navigationItem-bar-inset);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavigationItem-vertical::after {\n  width: var(--navigationItem-bar-size);\n  left: var(--navigationItem-bar-inset);\n  top: var(--navigationItem-bar-inset);\n  height: calc(100% - var(--salt-spacing-50));\n}\n\n/* Styles applied to activation line on hover  */\n.saltNavigationItem-wrapper:hover::after,\n.saltNavigationItem-wrapper:focus-visible::after {\n  background: var(--salt-navigable-indicator-hover);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavigationItem-wrapper.saltNavigationItem-active::after,\n.saltNavigationItem-wrapper.saltNavigationItem-active:hover::after,\n.saltNavigationItem-wrapper.saltNavigationItem-active:focus::after {\n  background: var(--navigationItem-indicator-background);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=NavigationItem.css.js.map

package/dist-es/navigation-item/NavigationItem.css.js.map

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

package/dist-es/navigation-item/NavigationItem.js

@@ -0,0 +1,77 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { makePrefixer } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { ExpansionIcon } from './ExpansionIcon.js';
+import { ConditionalWrapper } from './ConditionalWrapper.js';
+import css_248z from './NavigationItem.css.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+
+const withBaseName = makePrefixer("saltNavigationItem");
+const NavigationItem = forwardRef(
+  function NavigationItem2(props, ref) {
+    const {
+      active,
+      blurActive,
+      children,
+      className,
+      expanded = false,
+      orientation = "horizontal",
+      parent,
+      level = 0,
+      onExpand,
+      href,
+      style: styleProp,
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-navigation-item",
+      css: css_248z,
+      window: targetWindow
+    });
+    const style = {
+      ...styleProp,
+      "--saltNavigationItem-level": `${level}`
+    };
+    return /* @__PURE__ */ jsx("div", {
+      ref,
+      style,
+      className: clsx(withBaseName(), className),
+      ...rest,
+      children: /* @__PURE__ */ jsxs(ConditionalWrapper, {
+        className: clsx(
+          withBaseName("wrapper"),
+          {
+            [withBaseName("active")]: active || blurActive,
+            [withBaseName("blurActive")]: blurActive && level !== 0,
+            [withBaseName("nested")]: level !== 0,
+            [withBaseName("rootItem")]: level === 0,
+            [withBaseName("expandButton")]: parent
+          },
+          withBaseName(orientation)
+        ),
+        parent,
+        expanded,
+        onExpand,
+        active,
+        href,
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: withBaseName("label"),
+            children
+          }),
+          parent && /* @__PURE__ */ jsx(ExpansionIcon, {
+            expanded,
+            orientation,
+            className: withBaseName("expandIcon")
+          })
+        ]
+      })
+    });
+  }
+);
+
+export { NavigationItem };
+//# sourceMappingURL=NavigationItem.js.map

package/dist-es/navigation-item/NavigationItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, MouseEventHandler } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\nimport { ConditionalWrapper } from \"./ConditionalWrapper\";\n\nimport navigationItemCss from \"./NavigationItem.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Whether the navigation item is active.\n   */\n  active?: boolean;\n  /**\n   * Whether the nested group is collapsed and there is an active nested item within it.\n   */\n  blurActive?: boolean;\n  /**\n   * Whether the navigation item is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Level of nesting.\n   */\n  level?: number;\n  /**\n   * The orientation of the navigation item.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * Whether the navigation item is a parent with nested items.\n   */\n  parent?: boolean;\n  /**\n   * Action to be triggered when the navigation item is expanded.\n   */\n  onExpand?: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Href to be passed to the Link element.\n   */\n  href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n  function NavigationItem(props, ref) {\n    const {\n      active,\n      blurActive,\n      children,\n      className,\n      expanded = false,\n      orientation = \"horizontal\",\n      parent,\n      level = 0,\n      onExpand,\n      href,\n      style: styleProp,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-navigation-item\",\n      css: navigationItemCss,\n      window: targetWindow,\n    });\n\n    const style = {\n      ...styleProp,\n      \"--saltNavigationItem-level\": `${level}`,\n    };\n\n    return (\n      <div\n        ref={ref}\n        style={style}\n        className={clsx(withBaseName(), className)}\n        {...rest}\n      >\n        <ConditionalWrapper\n          className={clsx(\n            withBaseName(\"wrapper\"),\n            {\n              [withBaseName(\"active\")]: active || blurActive,\n              [withBaseName(\"blurActive\")]: blurActive && level !== 0,\n              [withBaseName(\"nested\")]: level !== 0,\n              [withBaseName(\"rootItem\")]: level === 0,\n              [withBaseName(\"expandButton\")]: parent,\n            },\n            withBaseName(orientation)\n          )}\n          parent={parent}\n          expanded={expanded}\n          onExpand={onExpand}\n          active={active}\n          href={href}\n        >\n          <span className={withBaseName(\"label\")}>{children}</span>\n          {parent && (\n            <ExpansionIcon\n              expanded={expanded}\n              orientation={orientation}\n              className={withBaseName(\"expandIcon\")}\n            />\n          )}\n        </ConditionalWrapper>\n      </div>\n    );\n  }\n);\n"],"names":["NavigationItem","navigationItemCss"],"mappings":";;;;;;;;;;AA6CA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAW,GAAA,KAAA;AAAA,MACX,WAAc,GAAA,YAAA;AAAA,MACd,MAAA;AAAA,MACA,KAAQ,GAAA,CAAA;AAAA,MACR,QAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACJ,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,KAAQ,GAAA;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,8BAA8B,CAAG,EAAA,KAAA,CAAA,CAAA;AAAA,KACnC,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,IAAA,CAAA,kBAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,aAAa,SAAS,CAAA;AAAA,UACtB;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,MAAU,IAAA,UAAA;AAAA,YACpC,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,cAAc,KAAU,KAAA,CAAA;AAAA,YACtD,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,KAAU,KAAA,CAAA;AAAA,YACpC,CAAC,YAAA,CAAa,UAAU,CAAA,GAAI,KAAU,KAAA,CAAA;AAAA,YACtC,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,MAAA;AAAA,WAClC;AAAA,UACA,aAAa,WAAW,CAAA;AAAA,SAC1B;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,MAAA;AAAA,QACA,IAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAAI,QAAA;AAAA,WAAS,CAAA;AAAA,UACjD,0BACE,GAAA,CAAA,aAAA,EAAA;AAAA,YACC,QAAA;AAAA,YACA,WAAA;AAAA,YACA,SAAA,EAAW,aAAa,YAAY,CAAA;AAAA,WACtC,CAAA;AAAA,SAAA;AAAA,OAEJ,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

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

@@ -0,0 +1,4 @@
+var css_248z = "/* Experimental - Overlay css variable API */\n.saltOverlay {\n  --overlay-text-color: var(--salt-text-primary-foreground);\n  --overlay-spacing: var(--salt-size-unit);\n  --overlay-fontSize: var(--salt-text-fontSize);\n  --overlay-background: var(--salt-container-primary-background);\n  --overlay-borderColor: var(--salt-container-primary-borderColor);\n  /* TODO: z-index audit, provide z index here or rely on popper */\n  --overlay-zindex: var(--salt-zIndex-flyover);\n}\n\n.saltOverlay-secondary.saltOverlay {\n  --overlay-background: var(--salt-container-secondary-background);\n  --overlay-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n.saltOverlay-content {\n  display: flex;\n  padding: calc(var(--overlay-spacing) * 2);\n  font-size: var(--overlay-fontSize);\n\n  border: 1px solid var(--overlay-borderColor);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  line-height: var(--salt-text-lineHeight);\n  background: var(--overlay-background);\n  color: var(--overlay-text-color);\n  position: relative;\n  opacity: 1;\n  overflow: visible;\n  z-index: var(--overlay-zindex);\n}\n\n.saltOverlay-arrow,\n.saltOverlay-arrow::after {\n  border: 8px solid transparent;\n  position: absolute;\n}\n\n.saltOverlay-arrow::after {\n  content: \"\";\n}\n\n.saltOverlay[data-placement^=\"top\"] .saltOverlay-arrow {\n  border-top-color: var(--overlay-borderColor);\n  bottom: -17px;\n}\n\n.saltOverlay[data-placement^=\"bottom\"] .saltOverlay-arrow {\n  border-bottom-color: var(--overlay-borderColor);\n  top: -17px;\n}\n\n.saltOverlay[data-placement^=\"left\"] .saltOverlay-arrow {\n  border-left-color: var(--overlay-borderColor);\n  right: -17px;\n}\n\n.saltOverlay[data-placement^=\"right\"] .saltOverlay-arrow {\n  border-right-color: var(--overlay-borderColor);\n  left: -17px;\n}\n\n.saltOverlay[data-placement^=\"top\"] .saltOverlay-arrow::after {\n  border-top-color: var(--overlay-background);\n  bottom: -7px;\n  left: calc(100% - 8px);\n}\n\n.saltOverlay[data-placement^=\"bottom\"] .saltOverlay-arrow::after {\n  border-bottom-color: var(--overlay-background);\n  top: -7px;\n  left: calc(100% - 8px);\n}\n\n.saltOverlay[data-placement^=\"left\"] .saltOverlay-arrow::after {\n  border-left-color: var(--overlay-background);\n  right: -7px;\n  top: calc(100% - 8px);\n}\n\n.saltOverlay[data-placement^=\"right\"] .saltOverlay-arrow::after {\n  border-right-color: var(--overlay-background);\n  left: -7px;\n  top: calc(100% - 8px);\n}\n\n/* Close Button */\n.saltOverlay-close {\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: var(--salt-zIndex-default);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Overlay.css.js.map

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

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