@lightsparkdev/ui 1.0.17 → 1.1.1

package/dist/chunk-WOKD2LBD.cjs

@@ -0,0 +1,35 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkSFGLEWHWcjs = require('./chunk-SFGLEWHW.cjs');
+
+
+var _chunkB2MHM6CYcjs = require('./chunk-B2MHM6CY.cjs');
+
+
+var _chunkHEMGZE2Gcjs = require('./chunk-HEMGZE2G.cjs');
+
+
+
+
+var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
+
+// src/components/typography/base/Label.tsx
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function LabelString(props) {
+  const _a = getPropDefaults(props), { children } = _a, rest = _chunkZ6EUSUADcjs.__objRest.call(void 0, _a, ["children"]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledLabel, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, rest), { children }));
+}
+function getPropDefaults(props) {
+  return _chunkSFGLEWHWcjs.getPropDefaultsBase.call(void 0, props, { as: props.tag || "span" });
+}
+var StyledLabel = _styled2.default.span`
+  ${({ theme, size, colorProp }) => _chunkHEMGZE2Gcjs.applyTypography.call(void 0, theme, "Label", size, colorProp)}
+  ${_chunkB2MHM6CYcjs.typographyStyles}
+`;
+
+
+
+
+
+exports.LabelString = LabelString; exports.getPropDefaults = getPropDefaults; exports.StyledLabel = StyledLabel;

package/dist/chunk-WW3KFUFD.js

@@ -0,0 +1,68 @@
+import {
+  Icon
+} from "./chunk-YTKSEJHA.js";
+
+// src/components/Loading.tsx
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { jsx } from "@emotion/react/jsx-runtime";
+var loadingKinds = ["primary", "secondary"];
+function Loading({
+  center = true,
+  size = 60,
+  ml = 0,
+  mt = 0,
+  kind = "primary"
+}) {
+  const theme = useTheme();
+  const iconName = resolveLoadingProp(null, kind, "defaultIconName", theme);
+  return /* @__PURE__ */ jsx(LoadingWrapper, { center, ml, mt, children: /* @__PURE__ */ jsx(Rotate, { children: /* @__PURE__ */ jsx(Icon, { name: iconName, width: size }) }) });
+}
+var LoadingWrapper = styled.div`
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+  margin-left: ${({ ml }) => ml}px;
+  margin-top: ${({ mt }) => mt}px;
+
+  ${({ center }) => center && `
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: 0 !important;
+  `}
+`;
+var Rotate = styled.div`
+  display: inline-flex;
+  animation: rotate 0.5s linear infinite;
+
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+function resolveLoadingProp(prop, kind, defaultKey, theme) {
+  var _a;
+  return (
+    /** props may be unset for a given kind but theme defaults always exist,
+     * so this will always resolve a value: */
+    prop || ((_a = theme.loading.kinds[kind]) == null ? void 0 : _a[defaultKey]) || theme.loading[defaultKey]
+  );
+}
+
+export {
+  loadingKinds,
+  Loading,
+  LoadingWrapper
+};

package/dist/chunk-WXN7CK2O.cjs

@@ -0,0 +1,26 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunk6OSTNEFIcjs = require('./chunk-6OSTNEFI.cjs');
+
+
+
+var _chunkUBQ5BC6Mcjs = require('./chunk-UBQ5BC6M.cjs');
+
+
+
+var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
+
+// src/components/typography/Headline.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function Headline(props) {
+  const propsWithDefaults = _chunkUBQ5BC6Mcjs.getPropDefaults.call(void 0, props);
+  let reactNodes = props.children || null;
+  if (props.content) {
+    reactNodes = _chunk6OSTNEFIcjs.toReactNodes.call(void 0, props.content);
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUBQ5BC6Mcjs.StyledHeadline, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, propsWithDefaults), { children: reactNodes }));
+}
+
+
+
+exports.Headline = Headline;

package/dist/chunk-X2BH6NCP.cjs

@@ -0,0 +1,40 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/central/ShapesPlusXSquareCircle.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function ShapesPlusXSquareCircle({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "mask", { id: "path-1-inside-1_2004_2196", fill: "white", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "path",
+          {
+            d: "M7.75 3.75C7.75 3.33579 7.41421 3 7 3C6.58579 3 6.25 3.33579 6.25 3.75H7.75ZM6.25 10.25C6.25 10.6642 6.58579 11 7 11C7.41421 11 7.75 10.6642 7.75 10.25H6.25ZM3.75 6.25C3.33579 6.25 3 6.58579 3 7C3 7.41421 3.33579 7.75 3.75 7.75V6.25ZM10.25 7.75C10.6642 7.75 11 7.41421 11 7C11 6.58579 10.6642 6.25 10.25 6.25V7.75ZM19.8284 15.2322C20.1213 14.9393 20.1213 14.4645 19.8284 14.1716C19.5355 13.8787 19.0607 13.8787 18.7678 14.1716L19.8284 15.2322ZM14.1716 18.7678C13.8787 19.0607 13.8787 19.5355 14.1716 19.8284C14.4645 20.1213 14.9393 20.1213 15.2322 19.8284L14.1716 18.7678ZM15.2322 14.1716C14.9393 13.8787 14.4645 13.8787 14.1716 14.1716C13.8787 14.4645 13.8787 14.9393 14.1716 15.2322L15.2322 14.1716ZM18.7678 19.8284C19.0607 20.1213 19.5355 20.1213 19.8284 19.8284C20.1213 19.5355 20.1213 19.0607 19.8284 18.7678L18.7678 19.8284ZM17 9.5C15.6193 9.5 14.5 8.38071 14.5 7H13C13 9.20914 14.7909 11 17 11V9.5ZM19.5 7C19.5 8.38071 18.3807 9.5 17 9.5V11C19.2091 11 21 9.20914 21 7H19.5ZM17 4.5C18.3807 4.5 19.5 5.61929 19.5 7H21C21 4.79086 19.2091 3 17 3V4.5ZM17 3C14.7909 3 13 4.79086 13 7H14.5C14.5 5.61929 15.6193 4.5 17 4.5V3ZM6.25 3.75V7H7.75V3.75H6.25ZM6.25 7V10.25H7.75V7H6.25ZM3.75 7.75H7V6.25H3.75V7.75ZM7 7.75H10.25V6.25H7V7.75ZM18.7678 14.1716L16.4697 16.4697L17.5303 17.5303L19.8284 15.2322L18.7678 14.1716ZM16.4697 16.4697L14.1716 18.7678L15.2322 19.8284L17.5303 17.5303L16.4697 16.4697ZM14.1716 15.2322L16.4697 17.5303L17.5303 16.4697L15.2322 14.1716L14.1716 15.2322ZM16.4697 17.5303L18.7678 19.8284L19.8284 18.7678L17.5303 16.4697L16.4697 17.5303ZM4.75 14.5H9.25V13H4.75V14.5ZM9.5 14.75V19.25H11V14.75H9.5ZM9.25 19.5H4.75V21H9.25V19.5ZM4.5 19.25V14.75H3V19.25H4.5ZM4.75 19.5C4.61193 19.5 4.5 19.3881 4.5 19.25H3C3 20.2165 3.7835 21 4.75 21V19.5ZM9.5 19.25C9.5 19.3881 9.38807 19.5 9.25 19.5V21C10.2165 21 11 20.2165 11 19.25H9.5ZM9.25 14.5C9.38807 14.5 9.5 14.6119 9.5 14.75H11C11 13.7835 10.2165 13 9.25 13V14.5ZM4.75 13C3.7835 13 3 13.7835 3 14.75H4.5C4.5 14.6119 4.61193 14.5 4.75 14.5V13Z",
+            vectorEffect: "non-scaling-stroke"
+          }
+        ) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "path",
+          {
+            d: "M6.25 4.5H7.75V3H6.25V4.5ZM7.75 9.5H6.25V11H7.75V9.5ZM4.5 7.75V6.25H3V7.75H4.5ZM9.5 6.25V7.75H11V6.25H9.5ZM18.2375 14.7019L19.2981 15.7625L20.3587 14.7019L19.2981 13.6413L18.2375 14.7019ZM15.7625 19.2981L14.7019 18.2375L13.6413 19.2981L14.7019 20.3587L15.7625 19.2981ZM14.7019 15.7625L15.7625 14.7019L14.7019 13.6413L13.6413 14.7019L14.7019 15.7625ZM19.2981 18.2375L18.2375 19.2981L19.2981 20.3587L20.3587 19.2981L19.2981 18.2375ZM14.5 6.25H13V7.75H14.5V6.25ZM17.75 11V9.5H16.25V11H17.75ZM21 6.25H19.5V7.75H21V6.25ZM16.25 3V4.5H17.75V3H16.25ZM6.25 7.75H7.75V6.25H6.25V7.75ZM7.75 7.75V6.25H6.25V7.75H7.75ZM15.9394 17L17 18.0606L18.0606 17L17 15.9394L15.9394 17ZM17 18.0606L18.0606 17L17 15.9394L15.9394 17L17 18.0606ZM10 14.5V13H8.5V14.5H10ZM4 13V14.5H5.5V13H4ZM9.5 20H11V18.5H9.5V20ZM11 14H9.5V15.5H11V14ZM4 19.5V21H5.5V19.5H4ZM10 21V19.5H8.5V21H10ZM4.5 14H3V15.5H4.5V14ZM3 20H4.5V18.5H3V20Z",
+            fill: "currentColor",
+            mask: "url(#path-1-inside-1_2004_2196)",
+            vectorEffect: "non-scaling-stroke"
+          }
+        )
+      ]
+    }
+  );
+}
+
+
+
+exports.ShapesPlusXSquareCircle = ShapesPlusXSquareCircle;

package/dist/chunk-X3B5QLXZ.cjs

@@ -0,0 +1,33 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/central/ArrowBoxRight.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function ArrowBoxRight({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          d: "M14.75 3.75H19.25C19.8023 3.75 20.25 4.19772 20.25 4.75V19.25C20.25 19.8023 19.8023 20.25 19.25 20.25H14.75M15 12H3.75M15 12L11.5 15.5M15 12L11.5 8.5",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin,
+          vectorEffect: "non-scaling-stroke"
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.ArrowBoxRight = ArrowBoxRight;

package/dist/chunk-X77BDZX3.cjs

@@ -0,0 +1,33 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/central/Bell2.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function Bell2({
+  strokeWidth = "2",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          d: "M16 17.25C16 19.4591 14.2091 21.25 12 21.25C9.79086 21.25 8 19.4591 8 17.25M18.4965 8.90897L18.6922 12.7842C18.6994 12.9264 18.7369 13.0655 18.8021 13.192L20.1388 15.7843C20.2119 15.9261 20.25 16.0846 20.25 16.2441C20.25 16.7964 19.8023 17.25 19.25 17.25H4.75C4.19772 17.25 3.75 16.7964 3.75 16.2441C3.75 16.0846 3.78809 15.9261 3.86124 15.7843L5.19789 13.192C5.26314 13.0655 5.30065 12.9264 5.30781 12.7842L5.50355 8.90897C5.6772 5.90951 8.15634 3.5 11.1612 3.5H12.8388C15.8437 3.5 18.3228 5.90951 18.4965 8.90897Z",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin,
+          vectorEffect: "non-scaling-stroke"
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.Bell2 = Bell2;

package/dist/chunk-XK6WXVWL.js

@@ -0,0 +1,35 @@
+import {
+  getPropDefaultsBase
+} from "./chunk-LEMT5P3Z.js";
+import {
+  typographyStyles
+} from "./chunk-YW4BJCOL.js";
+import {
+  applyTypography
+} from "./chunk-J44WQFQT.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-W7FAWX6T.js";
+
+// src/components/typography/base/LabelModerate.tsx
+import styled from "@emotion/styled";
+import { jsx } from "@emotion/react/jsx-runtime";
+function LabelModerateString(props) {
+  const _a = getPropDefaults(props), { children } = _a, rest = __objRest(_a, ["children"]);
+  return /* @__PURE__ */ jsx(StyledLabelModerate, __spreadProps(__spreadValues({}, rest), { children }));
+}
+function getPropDefaults(props) {
+  return getPropDefaultsBase(props, { as: props.tag || "span" });
+}
+var StyledLabelModerate = styled.span`
+  ${({ theme, size, colorProp }) => applyTypography(theme, "Label Moderate", size, colorProp)}
+  ${typographyStyles}
+`;
+
+export {
+  LabelModerateString,
+  getPropDefaults,
+  StyledLabelModerate
+};

package/dist/chunk-XLNNWWCT.cjs

@@ -0,0 +1,394 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkR46DRG52cjs = require('./chunk-R46DRG52.cjs');
+
+
+var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
+
+
+var _chunkSFVPZBMVcjs = require('./chunk-SFVPZBMV.cjs');
+
+
+var _chunk6OSTNEFIcjs = require('./chunk-6OSTNEFI.cjs');
+
+
+
+
+var _chunkXQNOVNF4cjs = require('./chunk-XQNOVNF4.cjs');
+
+
+var _chunk4N5EXQIScjs = require('./chunk-4N5EXQIS.cjs');
+
+
+var _chunkU35SY546cjs = require('./chunk-U35SY546.cjs');
+
+
+var _chunkXUEKQQJVcjs = require('./chunk-XUEKQQJV.cjs');
+
+
+var _chunkK7HWTEGPcjs = require('./chunk-K7HWTEGP.cjs');
+
+
+
+var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
+
+// src/components/Toasts.tsx
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _lodashes = require('lodash-es');
+var _react = require('react');
+var _reactdom = require('react-dom'); var _reactdom2 = _interopRequireDefault(_reactdom);
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+var firstDur = 0.3;
+function Toasts({
+  queue,
+  onHide,
+  fromTop = 29,
+  stackDir = "above",
+  maxVisible = 3,
+  removeExpiredAndNotVisible = true,
+  dedupeConsecutive = true,
+  typography: typographyProp,
+  onClickContentNode
+}) {
+  const queuedToastIds = _react.useRef.call(void 0, /* @__PURE__ */ new Set());
+  const prevToastQueue = _react.useRef.call(void 0, []);
+  const [toastQueue, setToastQueue] = _react.useState.call(void 0, []);
+  const autoHideTimeoutRef = _react.useRef.call(void 0, null);
+  const hidingTimeoutRefs = _react.useRef.call(void 0, {});
+  const nodeRef = _react.useRef.call(void 0, null);
+  const [nodeReady, setNodeReady] = _react.useState.call(void 0, false);
+  const defaultTypography = {
+    type: (typographyProp == null ? void 0 : typographyProp.type) || "Body",
+    size: (typographyProp == null ? void 0 : typographyProp.size) || "ExtraSmall",
+    color: (typographyProp == null ? void 0 : typographyProp.color) || "white"
+  };
+  const hideToast = _react.useCallback.call(void 0, 
+    (id) => {
+      setToastQueue((currentToastQueue) => {
+        const hideToastIndex = currentToastQueue.findIndex((t) => t.id === id);
+        const newToastQueue = currentToastQueue.map((toast, i) => {
+          if (i === hideToastIndex) {
+            return _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, toast), {
+              isActive: false,
+              isHiding: true
+            });
+          }
+          return toast;
+        });
+        return newToastQueue;
+      });
+      const hidingTimeoutRef = hidingTimeoutRefs.current[id];
+      if (hidingTimeoutRef) {
+        clearTimeout(hidingTimeoutRef);
+      }
+      hidingTimeoutRefs.current[id] = setTimeout(() => {
+        setToastQueue((currentToastQueue) => {
+          const newToastQueue = currentToastQueue.filter((t) => t.id !== id);
+          setTimeout(() => onHide(id), 0);
+          hidingTimeoutRefs.current[id] = null;
+          return newToastQueue;
+        });
+      }, firstDur * 1e3);
+      if (autoHideTimeoutRef.current) {
+        clearTimeout(autoHideTimeoutRef.current);
+        autoHideTimeoutRef.current = null;
+      }
+    },
+    [onHide, setToastQueue]
+  );
+  _react.useEffect.call(void 0, () => {
+    const newToastQueueArgs = queue.reduce((acc, toast) => {
+      if (toast.expires < Date.now()) {
+        onHide(toast.id);
+        return acc;
+      }
+      if (!queuedToastIds.current.has(toast.id)) {
+        return [...acc, toast];
+      }
+      return acc;
+    }, []);
+    if (newToastQueueArgs.length) {
+      const newToasts = newToastQueueArgs.reduce((acc, toast) => {
+        if (dedupeConsecutive && acc.length) {
+          const lastToast = acc[acc.length - 1];
+          if (_lodashes.isEqual.call(void 0, toast.content, lastToast.content)) {
+            return acc;
+          }
+        }
+        queuedToastIds.current.add(toast.id);
+        return [
+          ...acc,
+          _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, toast), {
+            isActive: true,
+            isHiding: false
+          })
+        ];
+      }, []);
+      setToastQueue((currentToastQueue) => {
+        const currentToast2 = currentToastQueue[currentToastQueue.length - 1];
+        if (dedupeConsecutive && currentToast2 && _lodashes.isEqual.call(void 0, newToasts[0].content, currentToast2.content)) {
+          return currentToastQueue;
+        }
+        return [...currentToastQueue, ...newToasts];
+      });
+    }
+  }, [queue, hideToast, onHide, dedupeConsecutive]);
+  _react.useEffect.call(void 0, () => {
+    if (prevToastQueue.current.length !== toastQueue.length) {
+      const currentToast2 = toastQueue[toastQueue.length - 1];
+      if (currentToast2 && !currentToast2.isHiding) {
+        if (autoHideTimeoutRef.current) {
+          clearTimeout(autoHideTimeoutRef.current);
+          autoHideTimeoutRef.current = null;
+        }
+        if (currentToast2.duration) {
+          autoHideTimeoutRef.current = setTimeout(() => {
+            hideToast(currentToast2.id);
+          }, currentToast2.duration);
+        }
+      }
+      prevToastQueue.current = toastQueue;
+    }
+  }, [toastQueue, hideToast, onHide]);
+  _react.useEffect.call(void 0, () => {
+    if (!nodeRef.current) {
+      nodeRef.current = document.createElement("div");
+      document.body.appendChild(nodeRef.current);
+    }
+    setNodeReady(true);
+    return () => {
+      if (nodeRef.current) {
+        document.body.removeChild(nodeRef.current);
+        nodeRef.current = null;
+      }
+    };
+  }, []);
+  const currentToastIndex = toastQueue.length - 1;
+  _react.useEffect.call(void 0, () => {
+    if (removeExpiredAndNotVisible) {
+      setToastQueue((currentToastQueue) => {
+        const newToastQueue = currentToastQueue.filter((toast, i) => {
+          const fromCurrent = i === currentToastIndex ? 0 : currentToastIndex - i;
+          return toast.expires > Date.now() || fromCurrent < maxVisible;
+        });
+        return newToastQueue;
+      });
+    }
+  }, [currentToastIndex, maxVisible, removeExpiredAndNotVisible]);
+  const currentToast = toastQueue[currentToastIndex];
+  return nodeReady ? toastQueue.map((toast, i) => {
+    if (!nodeRef.current) {
+      return null;
+    }
+    const fromCurrent = i === currentToastIndex ? 0 : currentToastIndex - i;
+    const movingToCurrent = currentToast.isHiding && i === currentToastIndex - 1;
+    const hidingFromCurrent = currentToast.isHiding ? fromCurrent - 1 : fromCurrent;
+    const nodes = toast.content ? _chunkSFVPZBMVcjs.setDefaultReactNodesTypography.call(void 0, toast.content, {
+      default: defaultTypography
+    }).map((node) => {
+      if (_lodashes.isObject.call(void 0, node) && "typography" in node && node.typography) {
+        const existingOnClick = node.typography.onClick;
+        if (existingOnClick || onClickContentNode) {
+          node.typography.onClick = (e) => {
+            if (existingOnClick) {
+              existingOnClick(e);
+            }
+            if (onClickContentNode) {
+              onClickContentNode(node, toast.id);
+            }
+          };
+        }
+      }
+      return node;
+    }) : null;
+    const contentNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: nodes ? _chunk6OSTNEFIcjs.toReactNodes.call(void 0, nodes) : null });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _reactdom2.default.createPortal(
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        StyledToast,
+        {
+          isActive: toast.isActive,
+          isHiding: toast.isHiding,
+          isVisible: fromCurrent < maxVisible,
+          duration: toast.duration,
+          fromTop: Math.floor(fromTop),
+          isCurrent: i === currentToastIndex,
+          fromCurrent: hidingFromCurrent,
+          currentToastHiding: currentToast.isHiding,
+          maxVisible,
+          activeCount: Math.min(
+            toastQueue.length - (currentToast.isHiding ? 1 : 0),
+            maxVisible
+          ),
+          stackDir: stackDir === "above" ? -1 : 1,
+          movingToCurrent,
+          children: [
+            contentNode,
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _chunkR46DRG52cjs.UnstyledButton,
+              {
+                css: _chunkXQNOVNF4cjs.extend.call(void 0, _chunkXQNOVNF4cjs.flexCenter, {
+                  position: "absolute",
+                  right: "5px",
+                  top: "-1px",
+                  height: "50px",
+                  width: "50px",
+                  outlineColor: `${_chunkK7HWTEGPcjs.colors.white} !important`
+                }),
+                onClick: () => hideToast(toast.id),
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk4N5EXQIScjs.Icon, { name: "Close", width: 9 })
+              }
+            )
+          ]
+        }
+      ),
+      nodeRef.current
+    ) }, toast.id);
+  }) : null;
+}
+var width = 400;
+var beginTopPx = -100;
+var beginHeightPx = 50;
+var minScale = 0.95;
+var StyledToast = _styled2.default.div`
+  position: fixed;
+  z-index: ${_chunkZU72XWNEcjs.z.toast};
+  line-height: ${_chunkXQNOVNF4cjs.pxToRems.call(void 0, 16)};
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  font-weight: 500;
+  background-color: ${({ isCurrent, movingToCurrent }) => isCurrent || movingToCurrent ? _chunkK7HWTEGPcjs.colors.blue43 : _chunkXUEKQQJVcjs.themeOr.call(void 0, "#2A50B2", _chunkK7HWTEGPcjs.colors.blue43)};
+  color: rgba(255, 255, 255, 0);
+  padding: 16px 24px;
+  ${({ duration }) => !duration && "padding-right: 50px;"}
+  ${({ isVisible, isCurrent, movingToCurrent, stackDir }) => {
+  if (!isVisible) {
+    return "";
+  }
+  const sharpOverlayShadow = `0 ${1 * stackDir}px 0px 0px rgba(0, 0, 0, 0.5)`;
+  return isCurrent || movingToCurrent ? `box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.08), ${sharpOverlayShadow};` : `box-shadow: ${sharpOverlayShadow};`;
+}}
+  left: 50%;
+  transform: translateX(-50%);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: calc(100% - ${_chunkU35SY546cjs.standardContentInset.smPx * 2}px);
+
+  max-height: ${beginHeightPx}px;
+  width: 0px;
+  border-radius: 3rem;
+  transition:
+    width 0.25s ${firstDur}s cubic-bezier(0.41, 0.52, 0.38, 1.33),
+    border-radius 0.1s ${firstDur}s linear,
+    color 0.1s ${firstDur * 2.1}s linear,
+    opacity 0.1s linear,
+    transform 0.25s cubic-bezier(0.41, 0.52, 0.38, 1.33),
+    background-color 0.3s linear,
+    max-height 0.2s 0.5s linear;
+  top: ${beginTopPx}px;
+
+  a {
+    text-decoration: underline;
+  }
+
+  button {
+    opacity: ${({ duration }) => duration ? "0" : "1"};
+    transition: opacity 0.1s linear;
+  }
+  &:hover {
+    ${({ duration }) => duration ? "button { opacity: 1; }" : ""}
+  }
+
+  ${({
+  isVisible,
+  fromCurrent,
+  movingToCurrent,
+  activeCount,
+  stackDir,
+  maxVisible,
+  currentToastHiding
+}) => {
+  if (fromCurrent && !movingToCurrent) {
+    if (!isVisible) {
+      fromCurrent = maxVisible - 1;
+    }
+    const secondToastTranslateY = 7;
+    const translateY = stackDir * secondToastTranslateY * Math.pow(fromCurrent, 0.75);
+    const scale = Math.max(
+      1 - (1 - minScale) / activeCount * fromCurrent,
+      0
+    );
+    return `transform: translateX(-50%) translateY(${translateY}px) scale(${scale});`;
+  }
+  return "";
+}}
+
+  ${({ fromTop }) => `
+    /* Animations with different values still interfere with each other if they have the same name.
+       Append the variable value to get a unique name for each animation: */
+    @keyframes slideOut-${fromTop} {
+      0% {
+        top: ${fromTop}px;
+      }
+      100% {
+        top: ${beginTopPx}px;
+      }
+    }
+
+    @keyframes slideIn-${fromTop} {
+      0% {
+        top: ${beginTopPx}px;
+      }
+      100% {
+        top: ${fromTop}px;
+      }
+    }
+  `}
+
+  &:before {
+    ${({ duration }) => duration ? 'content: "";' : ""}
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 0%;
+    background-color: rgba(0, 0, 0, 0.1);
+    z-index: -1;
+    // switch back to minimal state instantly so it's ready for the next notification:
+  }
+
+  ${({ duration }) => duration ? `
+        @keyframes progressBar-${duration} {
+          0% {
+            width: 0%;
+          }
+          100% {
+            width: 100%;
+          }
+        }
+      ` : ""}
+
+  ${({ isActive, duration, isHiding, fromTop, isCurrent }) => isActive ? `
+      width: ${width}px;
+      top: ${fromTop}px;
+      border-radius: 1.3rem;
+      animation: ${firstDur}s cubic-bezier(.25,.15,.59,1.28) 0s slideIn-${fromTop};
+      color: rgba(255, 255, 255, 1);
+      max-height: 100px;
+      &:before {
+        ${isCurrent && duration ? `animation: progressBar-${duration} ${duration / 1e3}s linear;` : ""};
+      }
+      ` : `
+      ${isHiding ? `
+          animation: ${firstDur}s cubic-bezier(.57,-0.43,.78,.81) 0s slideOut-${fromTop};
+          &:before {
+            width: 100%;
+          }
+          ` : ""}
+      top: ${beginTopPx}px;
+    `}
+`;
+
+
+
+exports.Toasts = Toasts;