@salt-ds/lab 1.0.0-alpha.3 → 1.0.0-alpha.30

package/dist-cjs/overlay/Overlay.js

@@ -0,0 +1,108 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var OverlayContext = require('./OverlayContext.js');
+var core = require('@salt-ds/core');
+var react = require('@floating-ui/react');
+
+const Overlay = React.forwardRef(
+  function Overlay2(props, ref) {
+    const {
+      children,
+      open,
+      onOpenChange,
+      placement: placementProp = "top",
+      id: idProp,
+      onClose,
+      ...rest
+    } = props;
+    const id = core.useId(idProp);
+    const arrowRef = React.useRef(null);
+    const [openState, setOpenState] = core.useControlled({
+      controlled: open,
+      default: false,
+      name: "Overlay",
+      state: "open"
+    });
+    const {
+      x,
+      y,
+      strategy,
+      context,
+      elements,
+      floating,
+      reference,
+      middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
+      placement
+    } = core.useFloatingUI({
+      open: openState,
+      onOpenChange: setOpenState,
+      placement: placementProp,
+      middleware: [
+        react.offset(11),
+        react.flip(),
+        react.shift({ limiter: react.limitShift() }),
+        react.arrow({ element: arrowRef })
+      ]
+    });
+    const { getReferenceProps, getFloatingProps } = react.useInteractions([
+      react.useRole(context, { role: "dialog" }),
+      react.useClick(context),
+      react.useDismiss(context)
+    ]);
+    const floatingStyles = React.useMemo(() => {
+      var _a, _b;
+      return {
+        top: y != null ? y : 0,
+        left: x != null ? x : 0,
+        position: strategy,
+        width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
+        height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight
+      };
+    }, [elements.floating, strategy, x, y]);
+    const setOpen = (event, newOpen) => {
+      setOpenState(newOpen);
+      onOpenChange == null ? void 0 : onOpenChange(event, newOpen);
+    };
+    const arrowProps = {
+      ref: arrowRef,
+      context,
+      style: {
+        position: strategy,
+        left: arrowX != null ? arrowX : 0,
+        top: arrowY != null ? arrowY : 0
+      }
+    };
+    const handleCloseButton = (event) => {
+      setOpen(event, false);
+      onClose == null ? void 0 : onClose(event);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(OverlayContext.OverlayContext.Provider, {
+      value: {
+        id: id != null ? id : "",
+        openState,
+        setOpen,
+        floatingStyles,
+        placement,
+        context,
+        arrowProps,
+        floating,
+        reference,
+        handleCloseButton,
+        getFloatingProps,
+        getReferenceProps
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+        ref,
+        ...rest,
+        children
+      })
+    });
+  }
+);
+
+exports.Overlay = Overlay;
+//# sourceMappingURL=Overlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.js","sources":["../src/overlay/Overlay.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  SyntheticEvent,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { OverlayContext } from \"./OverlayContext\";\nimport { useControlled, useFloatingUI, useId } from \"@salt-ds/core\";\nimport {\n  flip,\n  offset,\n  shift,\n  limitShift,\n  arrow,\n  useClick,\n  useDismiss,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\n\nexport interface OverlayProps extends ComponentPropsWithoutRef<\"div\"> {\n  open?: boolean;\n  onOpenChange?: (event: SyntheticEvent, newOpen: boolean) => void;\n  /*\n   * Set the placement of the Overlay component relative to the trigger element. Defaults to `top`.\n   */\n  placement?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  /*\n   * Use in controlled version to close Overlay.\n   */\n  onClose?: (event: SyntheticEvent) => void;\n}\n\nexport const Overlay = forwardRef<HTMLDivElement, OverlayProps>(\n  function Overlay(props, ref) {\n    const {\n      children,\n      open,\n      onOpenChange,\n      placement: placementProp = \"top\",\n      id: idProp,\n      onClose,\n      ...rest\n    } = props;\n\n    const id = useId(idProp);\n    const arrowRef = useRef<SVGSVGElement | null>(null);\n\n    const [openState, setOpenState] = useControlled({\n      controlled: open,\n      default: false,\n      name: \"Overlay\",\n      state: \"open\",\n    });\n\n    const {\n      x,\n      y,\n      strategy,\n      context,\n      elements,\n      floating,\n      reference,\n      middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n      placement,\n    } = useFloatingUI({\n      open: openState,\n      onOpenChange: setOpenState,\n      placement: placementProp,\n      middleware: [\n        offset(11),\n        flip(),\n        shift({ limiter: limitShift() }),\n        arrow({ element: arrowRef }),\n      ],\n    });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n      useRole(context, { role: \"dialog\" }),\n      useClick(context),\n      useDismiss(context),\n    ]);\n\n    const floatingStyles = useMemo(() => {\n      return {\n        top: y ?? 0,\n        left: x ?? 0,\n        position: strategy,\n        width: elements.floating?.offsetWidth,\n        height: elements.floating?.offsetHeight,\n      };\n    }, [elements.floating, strategy, x, y]);\n\n    const setOpen = (event: SyntheticEvent, newOpen: boolean) => {\n      setOpenState(newOpen);\n      onOpenChange?.(event, newOpen);\n    };\n\n    const arrowProps = {\n      ref: arrowRef,\n      context,\n      style: {\n        position: strategy,\n        left: arrowX ?? 0,\n        top: arrowY ?? 0,\n      },\n    };\n\n    const handleCloseButton = (event: SyntheticEvent) => {\n      setOpen(event, false);\n      onClose?.(event);\n    };\n\n    return (\n      <OverlayContext.Provider\n        value={{\n          id: id ?? \"\",\n          openState,\n          setOpen,\n          floatingStyles,\n          placement,\n          context,\n          arrowProps,\n          floating,\n          reference,\n          handleCloseButton,\n          getFloatingProps,\n          getReferenceProps,\n        }}\n      >\n        <div ref={ref} {...rest}>\n          {children}\n        </div>\n      </OverlayContext.Provider>\n    );\n  }\n);\n"],"names":["forwardRef","Overlay","useId","useRef","useControlled","useFloatingUI","offset","flip","shift","limitShift","arrow","useInteractions","useRole","useClick","useDismiss","useMemo","jsx","OverlayContext"],"mappings":"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"}

package/dist-cjs/overlay/OverlayContext.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@salt-ds/core');
+var React = require('react');
+
+const OverlayContext = core.createContext(
+  "OverlayContext",
+  {
+    id: "",
+    openState: false,
+    setOpen() {
+      return void 0;
+    },
+    floatingStyles: {
+      top: 0,
+      left: 0,
+      position: ""
+    },
+    placement: "",
+    context: {},
+    arrowProps: {},
+    handleCloseButton() {
+      return void 0;
+    },
+    reference: {},
+    floating: {},
+    getFloatingProps() {
+      return {};
+    },
+    getReferenceProps() {
+      return {};
+    }
+  }
+);
+function useOverlayContext() {
+  return React.useContext(OverlayContext);
+}
+
+exports.OverlayContext = OverlayContext;
+exports.useOverlayContext = useOverlayContext;
+//# sourceMappingURL=OverlayContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayContext.js","sources":["../src/overlay/OverlayContext.ts"],"sourcesContent":["import {\n  FloatingArrowProps,\n  FloatingContext,\n  Placement,\n  ReferenceType,\n  Strategy,\n} from \"@floating-ui/react\";\nimport { createContext, useFloatingUI } from \"@salt-ds/core\";\nimport { SyntheticEvent, useContext } from \"react\";\n\ntype FloatingReturn = ReturnType<typeof useFloatingUI>;\ntype FloatingStyleProps = {\n  top: number;\n  left: number;\n  position: Strategy;\n  width?: number;\n  height?: number;\n};\n\nexport interface OverlayContextValue {\n  id: string;\n  openState: boolean;\n  setOpen: (event: SyntheticEvent, newOpen: boolean) => void;\n  floatingStyles: FloatingStyleProps;\n  placement: Placement;\n  arrowProps: FloatingArrowProps;\n  context: FloatingContext;\n  reference?: (node: ReferenceType | null) => void;\n  floating?: (node: HTMLElement | null) => void;\n  handleCloseButton: (event: SyntheticEvent) => void;\n  getFloatingProps: (\n    userProps?: React.HTMLProps<HTMLElement> | undefined\n  ) => Record<string, unknown>;\n  getReferenceProps: (\n    userProps?: React.HTMLProps<Element> | undefined\n  ) => Record<string, unknown>;\n}\n\nexport const OverlayContext = createContext<OverlayContextValue>(\n  \"OverlayContext\",\n  {\n    id: \"\",\n    openState: false,\n    setOpen() {\n      return undefined;\n    },\n    floatingStyles: {\n      top: 0,\n      left: 0,\n      position: \"\" as Strategy,\n    },\n    placement: \"\" as Placement,\n    context: {} as FloatingContext,\n    arrowProps: {} as FloatingArrowProps,\n    handleCloseButton() {\n      return undefined;\n    },\n    reference: {} as FloatingReturn[\"reference\"],\n    floating: {} as FloatingReturn[\"floating\"],\n    getFloatingProps() {\n      return {} as Record<string, unknown>;\n    },\n    getReferenceProps() {\n      return {} as Record<string, unknown>;\n    },\n  }\n);\n\nexport function useOverlayContext() {\n  return useContext(OverlayContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;AAsCO,MAAM,cAAiB,GAAAA,kBAAA;AAAA,EAC5B,gBAAA;AAAA,EACA;AAAA,IACE,EAAI,EAAA,EAAA;AAAA,IACJ,SAAW,EAAA,KAAA;AAAA,IACX,OAAU,GAAA;AACR,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAAA,IACA,cAAgB,EAAA;AAAA,MACd,GAAK,EAAA,CAAA;AAAA,MACL,IAAM,EAAA,CAAA;AAAA,MACN,QAAU,EAAA,EAAA;AAAA,KACZ;AAAA,IACA,SAAW,EAAA,EAAA;AAAA,IACX,SAAS,EAAC;AAAA,IACV,YAAY,EAAC;AAAA,IACb,iBAAoB,GAAA;AAClB,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAAA,IACA,WAAW,EAAC;AAAA,IACZ,UAAU,EAAC;AAAA,IACX,gBAAmB,GAAA;AACjB,MAAA,OAAO,EAAC,CAAA;AAAA,KACV;AAAA,IACA,iBAAoB,GAAA;AAClB,MAAA,OAAO,EAAC,CAAA;AAAA,KACV;AAAA,GACF;AACF,EAAA;AAEO,SAAS,iBAAoB,GAAA;AAClC,EAAA,OAAOC,iBAAW,cAAc,CAAA,CAAA;AAClC;;;;;"}

package/dist-cjs/overlay/OverlayPanel.js

@@ -0,0 +1,64 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var OverlayContext = require('./OverlayContext.js');
+var react = require('@floating-ui/react');
+var OverlayPanelBase = require('./OverlayPanelBase.js');
+
+const withBaseName = core.makePrefixer("saltOverlayPanel");
+const OverlayPanel = React.forwardRef(
+  function OverlayPanel2(props, ref) {
+    const { className, ...rest } = props;
+    const { Component: FloatingComponent } = core.useFloatingComponent();
+    const {
+      id,
+      openState,
+      floatingStyles,
+      placement,
+      context,
+      getFloatingProps,
+      floating
+    } = OverlayContext.useOverlayContext();
+    const handleRef = core.useForkRef(floating, ref);
+    const { top, left, width, height, position } = floatingStyles;
+    const getOverlayProps = () => {
+      return getFloatingProps({
+        "data-placement": placement,
+        ref: floating,
+        id: `${id}-panel`
+      });
+    };
+    if (!openState)
+      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingOverlay, {
+      children: /* @__PURE__ */ jsxRuntime.jsx(FloatingComponent, {
+        open: openState,
+        className: clsx.clsx(withBaseName(), className),
+        "aria-modal": "true",
+        "aria-labelledby": `${id}-header`,
+        "aria-describedby": `${id}-content`,
+        ...getOverlayProps(),
+        ref: handleRef,
+        width,
+        height,
+        top,
+        left,
+        position,
+        focusManagerProps: {
+          context
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(OverlayPanelBase.OverlayPanelBase, {
+          ...rest
+        })
+      })
+    });
+  }
+);
+
+exports.OverlayPanel = OverlayPanel;
+//# sourceMappingURL=OverlayPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayPanel.js","sources":["../src/overlay/OverlayPanel.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  ForwardedRef,\n  forwardRef,\n  HTMLProps,\n} from \"react\";\nimport { makePrefixer, useFloatingComponent, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { useOverlayContext } from \"./OverlayContext\";\nimport { FloatingOverlay } from \"@floating-ui/react\";\nimport { OverlayPanelBase } from \"./OverlayPanelBase\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanel\");\n\nexport interface OverlayPanelProps extends ComponentPropsWithoutRef<\"div\"> {}\n\nexport const OverlayPanel = forwardRef<HTMLDivElement, OverlayPanelProps>(\n  function OverlayPanel(props, ref: ForwardedRef<HTMLDivElement>) {\n    const { className, ...rest } = props;\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const {\n      id,\n      openState,\n      floatingStyles,\n      placement,\n      context,\n      getFloatingProps,\n      floating,\n    } = useOverlayContext();\n\n    const handleRef = useForkRef<HTMLDivElement>(floating, ref);\n\n    const { top, left, width, height, position } = floatingStyles;\n\n    const getOverlayProps = (): HTMLProps<HTMLDivElement> => {\n      return getFloatingProps({\n        // @ts-ignore data-placement does not exist\n        \"data-placement\": placement,\n        ref: floating,\n        id: `${id}-panel`,\n      });\n    };\n\n    if (!openState) return <></>;\n\n    return (\n      <FloatingOverlay>\n        <FloatingComponent\n          open={openState}\n          className={clsx(withBaseName(), className)}\n          aria-modal=\"true\"\n          aria-labelledby={`${id}-header`}\n          aria-describedby={`${id}-content`}\n          {...getOverlayProps()}\n          ref={handleRef}\n          width={width}\n          height={height}\n          top={top}\n          left={left}\n          position={position}\n          focusManagerProps={{\n            context: context,\n          }}\n        >\n          <OverlayPanelBase {...rest} />\n        </FloatingComponent>\n      </FloatingOverlay>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","OverlayPanel","useFloatingComponent","useOverlayContext","useForkRef","jsx","Fragment","FloatingOverlay","clsx","OverlayPanelBase"],"mappings":";;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA,CAAA;AAI7C,MAAM,YAAe,GAAAC,gBAAA;AAAA,EAC1B,SAASC,aAAa,CAAA,KAAA,EAAO,GAAmC,EAAA;AAC9D,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAE/B,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAIC,yBAAqB,EAAA,CAAA;AAE9D,IAAM,MAAA;AAAA,MACJ,EAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA;AAAA,MACA,gBAAA;AAAA,MACA,QAAA;AAAA,QACEC,gCAAkB,EAAA,CAAA;AAEtB,IAAM,MAAA,SAAA,GAAYC,eAA2B,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE1D,IAAA,MAAM,EAAE,GAAK,EAAA,IAAA,EAAM,KAAO,EAAA,MAAA,EAAQ,UAAa,GAAA,cAAA,CAAA;AAE/C,IAAA,MAAM,kBAAkB,MAAiC;AACvD,MAAA,OAAO,gBAAiB,CAAA;AAAA,QAEtB,gBAAkB,EAAA,SAAA;AAAA,QAClB,GAAK,EAAA,QAAA;AAAA,QACL,IAAI,CAAG,EAAA,EAAA,CAAA,MAAA,CAAA;AAAA,OACR,CAAA,CAAA;AAAA,KACH,CAAA;AAEA,IAAA,IAAI,CAAC,SAAA;AAAW,MAAA,uBAASC,cAAA,CAAAC,mBAAA,EAAA,EAAA,CAAA,CAAA;AAEzB,IAAA,uBACGD,cAAA,CAAAE,qBAAA,EAAA;AAAA,MACC,QAAC,kBAAAF,cAAA,CAAA,iBAAA,EAAA;AAAA,QACC,IAAM,EAAA,SAAA;AAAA,QACN,SAAW,EAAAG,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,YAAW,EAAA,MAAA;AAAA,QACX,mBAAiB,CAAG,EAAA,EAAA,CAAA,OAAA,CAAA;AAAA,QACpB,oBAAkB,CAAG,EAAA,EAAA,CAAA,QAAA,CAAA;AAAA,QACpB,GAAG,eAAgB,EAAA;AAAA,QACpB,GAAK,EAAA,SAAA;AAAA,QACL,KAAA;AAAA,QACA,MAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAA;AAAA,QACA,QAAA;AAAA,QACA,iBAAmB,EAAA;AAAA,UACjB,OAAA;AAAA,SACF;AAAA,QAEA,QAAC,kBAAAH,cAAA,CAAAI,iCAAA,EAAA;AAAA,UAAkB,GAAG,IAAA;AAAA,SAAM,CAAA;AAAA,OAC9B,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/overlay/OverlayPanelBase.js

@@ -0,0 +1,65 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@floating-ui/react');
+var Overlay = require('./Overlay.css.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var core = require('@salt-ds/core');
+var icons = require('@salt-ds/icons');
+var OverlayContext = require('./OverlayContext.js');
+var clsx = require('clsx');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
+
+const withBaseName = core.makePrefixer("saltOverlayPanelBase");
+const OverlayPanelBase = (props) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-overlay",
+    css: Overlay,
+    window: targetWindow
+  });
+  const { arrowProps, handleCloseButton } = OverlayContext.useOverlayContext();
+  const { children, className, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        className: clsx__default["default"](withBaseName("container"), className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
+            onClick: handleCloseButton,
+            variant: "secondary",
+            className: withBaseName("closeButton"),
+            "aria-label": "Close Overlay",
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {
+              "aria-hidden": true
+            })
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", {
+            className: withBaseName("content"),
+            children
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.FloatingArrow, {
+        ...arrowProps,
+        strokeWidth: 1,
+        fill: "var(--overlay-background)",
+        stroke: "var(--overlay-borderColor)",
+        style: {
+          height: "calc(var(--salt-size-adornment) + 6px)",
+          width: "calc(var(--salt-size-adornment) + 8px)"
+        }
+      })
+    ]
+  });
+};
+
+exports.OverlayPanelBase = OverlayPanelBase;
+//# sourceMappingURL=OverlayPanelBase.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayPanelBase.js","sources":["../src/overlay/OverlayPanelBase.tsx"],"sourcesContent":["import { FloatingArrow } from \"@floating-ui/react\";\n\nimport overlayCss from \"./Overlay.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { Button, makePrefixer } from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport { ComponentPropsWithoutRef } from \"react\";\nimport { useOverlayContext } from \"./OverlayContext\";\nimport clsx from \"clsx\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanelBase\");\n\n// OverlayPanelBase component needed for CSS style injection\nexport const OverlayPanelBase = (props: ComponentPropsWithoutRef<\"div\">) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overlay\",\n    css: overlayCss,\n    window: targetWindow,\n  });\n\n  const { arrowProps, handleCloseButton } = useOverlayContext();\n  const { children, className, ...rest } = props;\n\n  return (\n    <>\n      <div className={clsx(withBaseName(\"container\"), className)} {...rest}>\n        <Button\n          onClick={handleCloseButton}\n          variant=\"secondary\"\n          className={withBaseName(\"closeButton\")}\n          aria-label=\"Close Overlay\"\n        >\n          <CloseIcon aria-hidden />\n        </Button>\n        <div className={withBaseName(\"content\")}>{children}</div>\n      </div>\n\n      <FloatingArrow\n        {...arrowProps}\n        strokeWidth={1}\n        fill=\"var(--overlay-background)\"\n        stroke=\"var(--overlay-borderColor)\"\n        style={{\n          height: \"calc(var(--salt-size-adornment) + 6px)\", // FIXME: +6px to account for Floating UI's FloatingArrow positioning calculation\n          width: \"calc(var(--salt-size-adornment) + 8px)\", // FIXME: +8px to account for Floating UI's FloatingArrow positioning calculation\n        }}\n      />\n    </>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","overlayCss","useOverlayContext","jsxs","Fragment","clsx","jsx","Button","CloseIcon","FloatingArrow"],"mappings":";;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,sBAAsB,CAAA,CAAA;AAG3C,MAAA,gBAAA,GAAmB,CAAC,KAA2C,KAAA;AAC1E,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAAC,OAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,UAAA,EAAY,iBAAkB,EAAA,GAAIC,gCAAkB,EAAA,CAAA;AAC5D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEzC,EACE,uBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAACD,eAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAW,EAAAE,wBAAA,CAAK,YAAa,CAAA,WAAW,GAAG,SAAS,CAAA;AAAA,QAAI,GAAG,IAAA;AAAA,QAC9D,QAAA,EAAA;AAAA,0BAACC,cAAA,CAAAC,WAAA,EAAA;AAAA,YACC,OAAS,EAAA,iBAAA;AAAA,YACT,OAAQ,EAAA,WAAA;AAAA,YACR,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,YACrC,YAAW,EAAA,eAAA;AAAA,YAEX,QAAC,kBAAAD,cAAA,CAAAE,eAAA,EAAA;AAAA,cAAU,aAAW,EAAA,IAAA;AAAA,aAAC,CAAA;AAAA,WACzB,CAAA;AAAA,0BACCF,cAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,YAAI,QAAA;AAAA,WAAS,CAAA;AAAA,SAAA;AAAA,OACrD,CAAA;AAAA,sBAECA,cAAA,CAAAG,mBAAA,EAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,WAAa,EAAA,CAAA;AAAA,QACb,IAAK,EAAA,2BAAA;AAAA,QACL,MAAO,EAAA,4BAAA;AAAA,QACP,KAAO,EAAA;AAAA,UACL,MAAQ,EAAA,wCAAA;AAAA,UACR,KAAO,EAAA,wCAAA;AAAA,SACT;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/overlay/OverlayTrigger.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@salt-ds/core');
+var OverlayContext = require('./OverlayContext.js');
+
+function OverlayTrigger(props) {
+  const { children } = props;
+  const { setOpen, reference, getReferenceProps, id } = OverlayContext.useOverlayContext();
+  const triggerRef = core.useForkRef(
+    React.isValidElement(children) ? children.ref : null,
+    reference
+  );
+  if (!children || !React.isValidElement(children)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children
+    });
+  }
+  const handleClick = (event) => {
+    setOpen(event, true);
+  };
+  const getTriggerProps = () => getReferenceProps({
+    ref: reference,
+    onClick: handleClick,
+    id: `${id}-trigger`,
+    "aria-controls": `${id}-panel`
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: React.cloneElement(children, {
+      ...core.mergeProps(getTriggerProps(), children.props),
+      ref: triggerRef
+    })
+  });
+}
+
+exports.OverlayTrigger = OverlayTrigger;
+//# sourceMappingURL=OverlayTrigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayTrigger.js","sources":["../src/overlay/OverlayTrigger.tsx"],"sourcesContent":["import { cloneElement, isValidElement, ReactNode, MouseEvent } from \"react\";\nimport { mergeProps, useForkRef } from \"@salt-ds/core\";\nimport { useOverlayContext } from \"./OverlayContext\";\n\nexport interface OverlayTriggerProps {\n  children?: ReactNode;\n}\n\nexport function OverlayTrigger(props: OverlayTriggerProps) {\n  const { children } = props;\n\n  const { setOpen, reference, getReferenceProps, id } = useOverlayContext();\n\n  const triggerRef = useForkRef(\n    // @ts-ignore error TS2339 missing property ref\n    isValidElement(children) ? children.ref : null,\n    reference\n  );\n\n  if (!children || !isValidElement(children)) {\n    return <>{children}</>;\n  }\n  const handleClick = (event: MouseEvent) => {\n    setOpen(event, true);\n  };\n\n  const getTriggerProps = () =>\n    getReferenceProps({\n      ref: reference,\n      onClick: handleClick,\n      id: `${id}-trigger`,\n      \"aria-controls\": `${id}-panel`,\n    });\n\n  return (\n    <>\n      {cloneElement(children, {\n        ...mergeProps(getTriggerProps(), children.props),\n        ref: triggerRef,\n      })}\n    </>\n  );\n}\n"],"names":["useOverlayContext","useForkRef","isValidElement","jsx","Fragment","mergeProps"],"mappings":";;;;;;;;;AAQO,SAAS,eAAe,KAA4B,EAAA;AACzD,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA,CAAA;AAErB,EAAA,MAAM,EAAE,OAAS,EAAA,SAAA,EAAW,iBAAmB,EAAA,EAAA,KAAOA,gCAAkB,EAAA,CAAA;AAExE,EAAA,MAAM,UAAa,GAAAC,eAAA;AAAA,IAEjBC,oBAAe,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,GAAM,GAAA,IAAA;AAAA,IAC1C,SAAA;AAAA,GACF,CAAA;AAEA,EAAA,IAAI,CAAC,QAAA,IAAY,CAACA,oBAAA,CAAe,QAAQ,CAAG,EAAA;AAC1C,IAAO,uBAAAC,cAAA,CAAAC,mBAAA,EAAA;AAAA,MAAG,QAAA;AAAA,KAAS,CAAA,CAAA;AAAA,GACrB;AACA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAsB,KAAA;AACzC,IAAA,OAAA,CAAQ,OAAO,IAAI,CAAA,CAAA;AAAA,GACrB,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,MACtB,iBAAkB,CAAA;AAAA,IAChB,GAAK,EAAA,SAAA;AAAA,IACL,OAAS,EAAA,WAAA;AAAA,IACT,IAAI,CAAG,EAAA,EAAA,CAAA,QAAA,CAAA;AAAA,IACP,iBAAiB,CAAG,EAAA,EAAA,CAAA,MAAA,CAAA;AAAA,GACrB,CAAA,CAAA;AAEH,EACE,uBAAAD,cAAA,CAAAC,mBAAA,EAAA;AAAA,IACG,6BAAa,QAAU,EAAA;AAAA,MACtB,GAAGC,eAAA,CAAW,eAAgB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,MAC/C,GAAK,EAAA,UAAA;AAAA,KACN,CAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/parent-child-item/ParentChildItem.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltParentChildItem-slide-top {\n  animation: var(--salt-animation-slide-in-top);\n}\n.saltParentChildItem-slide-bottom {\n  animation: var(--salt-animation-slide-in-bottom);\n}\n.saltParentChildItem-slide-left {\n  animation: var(--salt-animation-slide-in-left);\n}\n.saltParentChildItem-slide-right {\n  animation: var(--salt-animation-slide-in-right);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=ParentChildItem.css.js.map

package/dist-cjs/parent-child-item/ParentChildItem.css.js.map

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

package/dist-cjs/parent-child-item/ParentChildItem.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var core = require('@salt-ds/core');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var ParentChildItem$1 = require('./ParentChildItem.css.js');
+
+const withBaseName = core.makePrefixer("saltParentChildItem");
+const ParentChildItem = React.forwardRef(
+  function ParentChildItem2({
+    disableAnimations = false,
+    direction,
+    isStacked,
+    children,
+    className,
+    ...rest
+  }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-parent-child-item",
+      css: ParentChildItem$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(core.FlexItem, {
+      className: clsx.clsx(
+        withBaseName(),
+        {
+          ...direction && {
+            [withBaseName(`slide-${direction}`)]: !disableAnimations
+          },
+          "saltFlexItem-stacked": isStacked
+        },
+        className
+      ),
+      ref,
+      ...rest,
+      children
+    });
+  }
+);
+
+exports.ParentChildItem = ParentChildItem;
+//# sourceMappingURL=ParentChildItem.js.map

package/dist-cjs/parent-child-item/ParentChildItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParentChildItem.js","sources":["../src/parent-child-item/ParentChildItem.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n  FlexItem,\n  flexItemAlignment,\n  makePrefixer,\n  ResponsiveProp,\n} from \"@salt-ds/core\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport parentChildItemCss from \"./ParentChildItem.css\";\n\nexport type SlideDirection = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface ParentChildItemProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Allows the alignment specified by parent to be overridden for individual items, default is \"start\".\n   */\n  align?: flexItemAlignment;\n  /**\n   * Disable all animations.\n   */\n  disableAnimations?: boolean;\n  /**\n   * Direction for slide animations.\n   */\n  direction?: SlideDirection;\n  /**\n   * Defines the ability for an item to grow x times more compared to it's siblings, default is 0.\n   */\n  grow?: ResponsiveProp<number>;\n  /**\n   * Determines whether the component is stacked\n   */\n  isStacked?: boolean;\n  /**\n   * Defines the ability for an item to shrink x times more compared to it's siblings, default is 1.\n\n   */\n  shrink?: ResponsiveProp<number>;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildItem\");\nexport const ParentChildItem = forwardRef<HTMLDivElement, ParentChildItemProps>(\n  function ParentChildItem(\n    {\n      disableAnimations = false,\n      direction,\n      isStacked,\n      children,\n      className,\n      ...rest\n    },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-parent-child-item\",\n      css: parentChildItemCss,\n      window: targetWindow,\n    });\n\n    return (\n      <FlexItem\n        className={clsx(\n          withBaseName(),\n          {\n            ...(direction && {\n              [withBaseName(`slide-${direction}`)]: !disableAnimations,\n            }),\n            \"saltFlexItem-stacked\": isStacked,\n          },\n          className\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </FlexItem>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","ParentChildItem","useWindow","useComponentCssInjection","parentChildItemCss","jsx","FlexItem","clsx"],"mappings":";;;;;;;;;;;;AA4CA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA,CAAA;AAChD,MAAM,eAAkB,GAAAC,gBAAA;AAAA,EAC7B,SAASC,gBACP,CAAA;AAAA,IACE,iBAAoB,GAAA,KAAA;AAAA,IACpB,SAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,wBAAA;AAAA,MACR,GAAK,EAAAC,iBAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAAC,aAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,GAAI,SAAa,IAAA;AAAA,YACf,CAAC,YAAA,CAAa,CAAS,MAAA,EAAA,SAAA,CAAA,CAAW,IAAI,CAAC,iBAAA;AAAA,WACzC;AAAA,UACA,sBAAwB,EAAA,SAAA;AAAA,SAC1B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/parent-child-layout/ParentChildLayout.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltParentChildLayout {\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=ParentChildLayout.css.js.map

package/dist-cjs/parent-child-layout/ParentChildLayout.css.js.map

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

package/dist-cjs/parent-child-layout/ParentChildLayout.js

@@ -0,0 +1,87 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var React = require('react');
+var ParentChildItem = require('../parent-child-item/ParentChildItem.js');
+var useIsViewportLargerThanBreakpoint = require('../utils/useIsViewportLargerThanBreakpoint.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var ParentChildLayout$1 = require('./ParentChildLayout.css.js');
+
+const withBaseName = core.makePrefixer("saltParentChildLayout");
+const getDirection = (orientation, stackedViewElement) => {
+  let direction = "right";
+  if (orientation === "horizontal") {
+    if (stackedViewElement === "parent") {
+      direction = "left";
+    } else {
+      direction = "right";
+    }
+  } else {
+    if (stackedViewElement === "parent") {
+      direction = "bottom";
+    } else {
+      direction = "top";
+    }
+  }
+  return direction;
+};
+const ParentChildLayout = React.forwardRef(function ParentChildLayout2({
+  stackedAtBreakpoint = "sm",
+  stackedViewElement = "parent",
+  disableAnimations = false,
+  parent,
+  child,
+  className,
+  orientation = "horizontal",
+  ...rest
+}, ref) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-parent-child-layout",
+    css: ParentChildLayout$1,
+    window: targetWindow
+  });
+  const stackedView = useIsViewportLargerThanBreakpoint.useIsViewportLargerThanBreakpoint(stackedAtBreakpoint);
+  const parentChildDirection = getDirection(orientation, stackedViewElement);
+  const stackedViewChildren = {
+    parent: /* @__PURE__ */ jsxRuntime.jsx(ParentChildItem.ParentChildItem, {
+      disableAnimations,
+      direction: parentChildDirection,
+      isStacked: stackedView,
+      children: parent
+    }),
+    child: /* @__PURE__ */ jsxRuntime.jsx(ParentChildItem.ParentChildItem, {
+      disableAnimations,
+      direction: parentChildDirection,
+      isStacked: stackedView,
+      children: child
+    })
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(core.FlexLayout, {
+    className: clsx.clsx(withBaseName(), className),
+    ref,
+    ...rest,
+    children: stackedView ? stackedViewChildren[stackedViewElement] : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ParentChildItem.ParentChildItem, {
+          grow: 0,
+          disableAnimations,
+          children: parent
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(ParentChildItem.ParentChildItem, {
+          grow: 2,
+          disableAnimations,
+          children: child
+        })
+      ]
+    })
+  });
+});
+
+exports.ParentChildLayout = ParentChildLayout;
+//# sourceMappingURL=ParentChildLayout.js.map

package/dist-cjs/parent-child-layout/ParentChildLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParentChildLayout.js","sources":["../src/parent-child-layout/ParentChildLayout.tsx"],"sourcesContent":["import {\n  Breakpoints,\n  FlexLayout,\n  FlexLayoutProps,\n  makePrefixer,\n} from \"@salt-ds/core\";\n\nimport { clsx } from \"clsx\";\nimport { ElementType, forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { ParentChildItem, SlideDirection } from \"../parent-child-item\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport parentChildLayoutCss from \"./ParentChildLayout.css\";\n\nexport type StackedViewElement = \"parent\" | \"child\";\n\ntype Orientation = \"horizontal\" | \"vertical\";\n\nexport interface ParentChildLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Breakpoint at which the parent and child will stack.\n   */\n  stackedAtBreakpoint?: keyof Breakpoints;\n  /**\n   * Change element that is displayed when in staked view.\n   */\n  stackedViewElement?: StackedViewElement;\n  /**\n   * Disable all animations.\n   */\n  disableAnimations?: boolean;\n  /**\n   * Orientation for slide animations.\n   */\n  orientation?: Orientation;\n  /**\n   * Controls the space between columns.\n   */\n  gap?: FlexLayoutProps<ElementType>[\"gap\"];\n  /**\n   * Parent component to be rendered\n   */\n  parent: ReactNode;\n  /**\n   * Child component to be rendered\n   */\n  child: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildLayout\");\n\nconst getDirection = (\n  orientation: Orientation,\n  stackedViewElement: StackedViewElement\n) => {\n  let direction: SlideDirection = \"right\";\n\n  if (orientation === \"horizontal\") {\n    if (stackedViewElement === \"parent\") {\n      direction = \"left\";\n    } else {\n      direction = \"right\";\n    }\n  } else {\n    if (stackedViewElement === \"parent\") {\n      direction = \"bottom\";\n    } else {\n      direction = \"top\";\n    }\n  }\n\n  return direction;\n};\n\nexport const ParentChildLayout = forwardRef<\n  HTMLDivElement,\n  ParentChildLayoutProps\n>(function ParentChildLayout(\n  {\n    stackedAtBreakpoint = \"sm\",\n    stackedViewElement = \"parent\",\n    disableAnimations = false,\n    parent,\n    child,\n    className,\n    orientation = \"horizontal\",\n    ...rest\n  },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-parent-child-layout\",\n    css: parentChildLayoutCss,\n    window: targetWindow,\n  });\n\n  const stackedView = useIsViewportLargerThanBreakpoint(stackedAtBreakpoint);\n\n  const parentChildDirection = getDirection(orientation, stackedViewElement);\n\n  const stackedViewChildren = {\n    parent: (\n      <ParentChildItem\n        disableAnimations={disableAnimations}\n        direction={parentChildDirection}\n        isStacked={stackedView}\n      >\n        {parent}\n      </ParentChildItem>\n    ),\n    child: (\n      <ParentChildItem\n        disableAnimations={disableAnimations}\n        direction={parentChildDirection}\n        isStacked={stackedView}\n      >\n        {child}\n      </ParentChildItem>\n    ),\n  };\n\n  return (\n    <FlexLayout className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n      {stackedView ? (\n        stackedViewChildren[stackedViewElement]\n      ) : (\n        <>\n          <ParentChildItem grow={0} disableAnimations={disableAnimations}>\n            {parent}\n          </ParentChildItem>\n          <ParentChildItem grow={2} disableAnimations={disableAnimations}>\n            {child}\n          </ParentChildItem>\n        </>\n      )}\n    </FlexLayout>\n  );\n});\n"],"names":["makePrefixer","forwardRef","ParentChildLayout","useWindow","useComponentCssInjection","parentChildLayoutCss","useIsViewportLargerThanBreakpoint","jsx","ParentChildItem","FlexLayout","clsx","jsxs","Fragment"],"mappings":";;;;;;;;;;;;;;AAoDA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA,CAAA;AAEzD,MAAM,YAAA,GAAe,CACnB,WAAA,EACA,kBACG,KAAA;AACH,EAAA,IAAI,SAA4B,GAAA,OAAA,CAAA;AAEhC,EAAA,IAAI,gBAAgB,YAAc,EAAA;AAChC,IAAA,IAAI,uBAAuB,QAAU,EAAA;AACnC,MAAY,SAAA,GAAA,MAAA,CAAA;AAAA,KACP,MAAA;AACL,MAAY,SAAA,GAAA,OAAA,CAAA;AAAA,KACd;AAAA,GACK,MAAA;AACL,IAAA,IAAI,uBAAuB,QAAU,EAAA;AACnC,MAAY,SAAA,GAAA,QAAA,CAAA;AAAA,KACP,MAAA;AACL,MAAY,SAAA,GAAA,KAAA,CAAA;AAAA,KACd;AAAA,GACF;AAEA,EAAO,OAAA,SAAA,CAAA;AACT,CAAA,CAAA;AAEa,MAAA,iBAAA,GAAoBC,gBAG/B,CAAA,SAASC,kBACT,CAAA;AAAA,EACE,mBAAsB,GAAA,IAAA;AAAA,EACtB,kBAAqB,GAAA,QAAA;AAAA,EACrB,iBAAoB,GAAA,KAAA;AAAA,EACpB,MAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAc,GAAA,YAAA;AAAA,EACX,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAcC,oEAAkC,mBAAmB,CAAA,CAAA;AAEzE,EAAM,MAAA,oBAAA,GAAuB,YAAa,CAAA,WAAA,EAAa,kBAAkB,CAAA,CAAA;AAEzE,EAAA,MAAM,mBAAsB,GAAA;AAAA,IAC1B,wBACGC,cAAA,CAAAC,+BAAA,EAAA;AAAA,MACC,iBAAA;AAAA,MACA,SAAW,EAAA,oBAAA;AAAA,MACX,SAAW,EAAA,WAAA;AAAA,MAEV,QAAA,EAAA,MAAA;AAAA,KACH,CAAA;AAAA,IAEF,uBACGD,cAAA,CAAAC,+BAAA,EAAA;AAAA,MACC,iBAAA;AAAA,MACA,SAAW,EAAA,oBAAA;AAAA,MACX,SAAW,EAAA,WAAA;AAAA,MAEV,QAAA,EAAA,KAAA;AAAA,KACH,CAAA;AAAA,GAEJ,CAAA;AAEA,EAAA,uBACGD,cAAA,CAAAE,eAAA,EAAA;AAAA,IAAW,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAG,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IACnE,QAAA,EAAA,WAAA,GACC,oBAAoB,kBAEpB,CAAA,mBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAACL,cAAA,CAAAC,+BAAA,EAAA;AAAA,UAAgB,IAAM,EAAA,CAAA;AAAA,UAAG,iBAAA;AAAA,UACvB,QAAA,EAAA,MAAA;AAAA,SACH,CAAA;AAAA,wBACCD,cAAA,CAAAC,+BAAA,EAAA;AAAA,UAAgB,IAAM,EAAA,CAAA;AAAA,UAAG,iBAAA;AAAA,UACvB,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/progress/CircularProgress/CircularProgress.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltCircularProgress {\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  position: relative;\n}\n\n.saltCircularProgress-progressValue {\n  align-items: center;\n  color: var(--salt-content-primary-foreground);\n  display: flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-strong);\n  height: 100%;\n  justify-content: center;\n  left: 0;\n  position: absolute;\n  width: 100%;\n}\n\n.saltCircularProgress-track {\n  inline-size: calc(var(--salt-size-base) * 3);\n  block-size: calc(var(--salt-size-base) * 3);\n  border-style: var(--salt-track-borderStyle);\n  border-width: var(--salt-size-bar-small);\n  border-radius: calc(var(--salt-size-base) * 3);\n  border-color: var(--salt-palette-neutral-secondary-border);\n}\n\n.saltCircularProgress-bar {\n  inline-size: calc(var(--salt-size-base) * 3);\n  block-size: calc(var(--salt-size-base) * 3);\n  border-style: var(--salt-track-borderStyle);\n  border-width: var(--salt-size-bar-strong);\n  border-radius: calc(var(--salt-size-base) * 3);\n  border-color: var(--salt-accent-background);\n}\n\n.saltCircularProgress-bars {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  inline-size: 100%;\n  block-size: 100%;\n}\n\n.saltCircularProgress-barOverlayRight,\n.saltCircularProgress-barOverlayLeft {\n  inline-size: 50%;\n  block-size: 100%;\n  transform-origin: 100% center;\n  transform: rotate(180deg);\n  overflow: hidden;\n  position: absolute;\n}\n\n.saltCircularProgress-barSubOverlayRight,\n.saltCircularProgress-barSubOverlayLeft {\n  inline-size: 100%;\n  block-size: 100%;\n  transform-origin: 100% center;\n  overflow: hidden;\n  transform: rotate(-180deg);\n}\n\n.saltCircularProgress-barOverlayLeft {\n  transform: rotate(0deg);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=CircularProgress.css.js.map

package/dist-cjs/progress/CircularProgress/CircularProgress.css.js.map

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