@bynder/compact-view 5.2.1 → 5.2.2

package/DatDropdownItem.js

@@ -1,25 +1,26 @@
-import { jsxs as u, Fragment as d, jsx as i } from "react/jsx-runtime";
-import { useState as p, useEffect as g } from "react";
-import b from "styled-components";
-import { IconArrowRight as w, IconCrop as x } from "@bynder/icons";
-import { List as s, Thumbnail as l } from "@bynder/design-system";
+import { jsxs as u, Fragment as p, jsx as i } from "react/jsx-runtime";
+import { useState as d, useEffect as g } from "react";
+import b from "./styled-components.browser.esm.js";
+import { IconArrowRight as w, IconCrop as x } from "./index4.js";
+import { List as l } from "./List.js";
+import { Thumbnail as s } from "./Thumbnail.js";
 import { useDat as D } from "./useDatStore.js";
-function L({ transformBaseUrl: r, asset: e, toggleDropdown: f }) {
-  const { transformation: t, openDat: c } = D(), [h, m] = p(), n = t?.preset?.content?.io?.length ?? 0;
+function S({ transformBaseUrl: n, asset: m, toggleDropdown: f }) {
+  const { transformation: t, openDat: c } = D(), [h, e] = d(), o = t?.preset?.content?.io?.length ?? 0;
   return g(() => {
     if (t?.url) {
-      const { url: o } = t, a = "io=transform:fill,width:40,height:40";
-      o.includes("io=transform:fill") && m(
-        o.replace(/io=transform:fill,width:[0-9]+,height:[0-9]+/, a)
-      ), m(`${o}&${a}`);
+      const { url: r } = t, a = "io=transform:fill,width:40,height:40";
+      r.includes("io=transform:fill") && e(
+        r.replace(/io=transform:fill,width:[0-9]+,height:[0-9]+/, a)
+      ), e(`${r}&${a}`);
     }
-  }, [t]), r ? /* @__PURE__ */ u(d, { children: [
-    /* @__PURE__ */ i(s.Divider, {}),
+  }, [t]), n ? /* @__PURE__ */ u(p, { children: [
+    /* @__PURE__ */ i(l.Divider, {}),
     /* @__PURE__ */ i(
       I,
       {
-        thumbnail: !t || n === 0 ? /* @__PURE__ */ i(l, { icon: /* @__PURE__ */ i(x, {}), "data-testid": "crop-icon" }) : /* @__PURE__ */ i(
-          l,
+        thumbnail: !t || o === 0 ? /* @__PURE__ */ i(s, { icon: /* @__PURE__ */ i(x, {}), "data-testid": "crop-icon" }) : /* @__PURE__ */ i(
+          s,
           {
             variant: "content",
             imageUrl: h,
@@ -28,19 +29,19 @@ function L({ transformBaseUrl: r, asset: e, toggleDropdown: f }) {
         ),
         rightElements: /* @__PURE__ */ i(w, {}),
         onClick: () => {
-          f(), c(r, e, e.name);
+          f(), c(n, m, m.name);
         },
-        subtext: t && n > 0 ? `${n} transformation${n === 1 ? "" : "s"}` : "",
+        subtext: t && o > 0 ? `${o} transformation${o === 1 ? "" : "s"}` : "",
         children: "New transformation"
       }
     )
   ] }) : null;
 }
-const I = b(s.Item)`
+const I = b(l.Item)`
 	max-width: 100%;
 	width: 340px;
 	margin-left: 0;
 `;
 export {
-  L as DatDropdownItem
+  S as DatDropdownItem
 };

package/DesignSystemContext.js

@@ -1,11 +1,11 @@
 import { jsx as e } from "react/jsx-runtime";
-import { StyleSheetManager as o } from "styled-components";
-import { DesignSystemProvider as i } from "@bynder/design-system";
+import { StyleSheetManager as o } from "./styled-components.browser.esm.js";
+import { DesignSystemProvider as i } from "./DesignSystemProvider.js";
 import { useRootElement as n } from "./RootElementContext.js";
-function a(r) {
+function l(r) {
   const t = n();
   return /* @__PURE__ */ e(o, { target: t, children: /* @__PURE__ */ e(i, { zIndexBase: 1e6, children: r.children }) });
 }
 export {
-  a as DesignSystemProvider
+  l as DesignSystemProvider
 };

package/DesignSystemProvider.js

@@ -0,0 +1,29 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import u, { useMemo as f } from "react";
+import { ThemeStyles as l } from "./theme.js";
+import { Button as a } from "./Button.js";
+import { LocalizationProvider as p } from "./localization.js";
+const t = 10001, v = u.createContext({
+  zIndexBase: t
+});
+function D({
+  children: n,
+  noTheme: i,
+  zIndexBase: r = t,
+  buttonVersion: m = "modern",
+  dateFnsLocale: o,
+  locale: s = "en-US"
+}) {
+  const c = f(() => ({
+    zIndexBase: r,
+    dateFnsLocale: o
+  }), [o, r]);
+  return /* @__PURE__ */ e(v.Provider, { value: c, children: /* @__PURE__ */ e(p, { locale: s, children: /* @__PURE__ */ d(a.VersionProvider, { value: m, children: [
+    !i && /* @__PURE__ */ e(l, {}),
+    n
+  ] }) }) });
+}
+export {
+  v as DesignSystemContext,
+  D as DesignSystemProvider
+};

package/DirectionSelect.js

@@ -1,12 +1,13 @@
-import { jsx as o } from "react/jsx-runtime";
-import n from "styled-components";
-import { IconSortOrder as l } from "@bynder/icons";
-import { Button as m, token as t } from "@bynder/design-system";
+import { jsx as e } from "react/jsx-runtime";
+import n from "./styled-components.browser.esm.js";
+import { IconSortOrder as m } from "./index4.js";
+import { Button as l } from "./Button.js";
+import { token as t } from "./token.js";
 import { __ as r } from "./index2.js";
-import { useOrderingByPage as g } from "./useOrderingStore.js";
-import { useRouterSelectors as f } from "./useRouterStore.js";
-function b({ nlSearch: e = !1 }) {
-  const c = f.use.page(), [i, s] = g(c.page), d = {
+import { useOrderingByPage as f } from "./useOrderingStore.js";
+import { useRouterSelectors as g } from "./useRouterStore.js";
+function k({ nlSearch: o = !1 }) {
+  const c = g.use.page(), [i, s] = f(c.page), d = {
     ASC: r("Ascending"),
     DESC: r("Descending")
   }, p = {
@@ -16,27 +17,27 @@ function b({ nlSearch: e = !1 }) {
   function a() {
     s({ field: i.field, direction: p[i.direction] });
   }
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ e(
     S,
     {
       variant: "clean",
       isSmall: !0,
       title: d[i.direction],
       onClick: a,
-      icon: /* @__PURE__ */ o(u, { $isAscending: i.direction === "ASC" }),
-      isDisabled: e
+      icon: /* @__PURE__ */ e(u, { $isAscending: i.direction === "ASC" }),
+      isDisabled: o
     }
   );
 }
-const S = n(m)`
+const S = n(l)`
 	border-radius: 5px 0 0 5px;
 	border: 1px solid #d9dee1;
 	height: 42px;
-`, u = n(l)`
+`, u = n(m)`
 	width: ${t.spacing6};
 	height: ${t.spacing6};
-	${(e) => e.$isAscending && "transform: scaleY(-1)"}
+	${(o) => o.$isAscending && "transform: scaleY(-1)"}
 `;
 export {
-  b as DirectionSelect
+  k as DirectionSelect
 };

package/Divider.js

@@ -0,0 +1,21 @@
+import { jsx as n } from "react/jsx-runtime";
+import r from "./styled-components.browser.esm.js";
+import { token as i } from "./token.js";
+function p({
+  direction: t = "horizontal",
+  ...o
+}) {
+  return t === "horizontal" ? /* @__PURE__ */ n(a, { ...o }) : /* @__PURE__ */ n(e, { role: "separator", ...o });
+}
+const a = r.hr.withConfig({
+  displayName: "HorizontalDivider",
+  componentId: "sc-galaug-0"
+})(["box-sizing:content-box;height:1px;margin:0;padding:", " 0;border:none;background:", ";background-clip:content-box;"], i.spacing3, i.gray100a), e = r.div.withConfig({
+  displayName: "VerticalDivider",
+  componentId: "sc-galaug-1"
+})(["box-sizing:content-box;width:1px;min-height:100%;margin:0;padding:0 ", ";background:", ";background-clip:content-box;"], i.spacing2, i.gray100a);
+export {
+  p as Divider,
+  a as HorizontalDivider,
+  e as VerticalDivider
+};

package/DomainInput.js

@@ -1,38 +1,39 @@
 import { jsx as n } from "react/jsx-runtime";
-import t from "styled-components";
-import { token as m, InputField as h } from "@bynder/design-system";
+import r from "./styled-components.browser.esm.js";
+import { InputField as m } from "./InputField.js";
+import { token as h } from "./token.js";
 import { Spinner as c } from "./Spinner.js";
-import { __ as o } from "./index2.js";
-function C({ status: i, isReadOnly: e, value: r, onChange: a, onSubmit: l }) {
+import { __ as e } from "./index2.js";
+function D({ status: i, isReadOnly: o, value: t, onChange: a, onSubmit: l }) {
   function d(p) {
     i === "valid" && p.keyCode === 13 && l();
   }
   return /* @__PURE__ */ n(g, { children: /* @__PURE__ */ n(
-    h,
+    m,
     {
       type: "url",
-      value: r,
+      value: t,
       placeholder: "yourdomain.bynder.com",
-      label: o("Enter the portal domain"),
+      label: e("Enter the portal domain"),
       onChange: a,
       onKeyDown: d,
       isInvalid: i === "invalid",
-      helperText: i === "invalid" && o("This portal domain does not exist"),
-      hasClearButton: i !== "validating" && !e,
+      helperText: i === "invalid" && e("This portal domain does not exist"),
+      hasClearButton: i !== "validating" && !o,
       iconRight: i === "validating" ? /* @__PURE__ */ n(v, { role: "alert", "aria-live": "polite", children: /* @__PURE__ */ n(c, { isRelative: !0, isNotUsingMargin: !0 }) }) : void 0,
-      isDisabled: e,
+      isDisabled: o,
       "data-testid": "login-input"
     }
   ) });
 }
-const g = t.div`
-	margin: ${m.spacing4} 0;
+const g = r.div`
+	margin: ${h.spacing4} 0;
 	width: 320px;
-`, v = t.div`
+`, v = r.div`
 	height: 100%;
 	display: flex;
 	align-items: center;
 `;
 export {
-  C as DomainInput
+  D as DomainInput
 };

package/DragRange.js

@@ -0,0 +1,25 @@
+import { jsx as d } from "react/jsx-runtime";
+import g from "./styled-components.browser.esm.js";
+function f({
+  max: t,
+  min: n,
+  onKeyDown: o,
+  onMouseDown: i,
+  value: e
+}) {
+  function r(a) {
+    return (a - n) / (t - n) * 100;
+  }
+  return /* @__PURE__ */ d(s, { $left: r(e[0]), $width: r(e[1]) - r(e[0]), role: "presentation", "data-testid": "ds-slider-drag-range", onKeyDown: o, onMouseDown: i });
+}
+const s = g.div.withConfig({
+  displayName: "StyledDragRange",
+  componentId: "sc-1mv2tts-0"
+})(["position:absolute;left:", "%;width:", "%;height:100%;cursor:pointer;"], ({
+  $left: t
+}) => t, ({
+  $width: t
+}) => t);
+export {
+  f as DragRange
+};

package/DragSelect.js

@@ -1,8 +1,8 @@
 import { jsx as Y } from "react/jsx-runtime";
 import j, { useState as T, useRef as I, useEffect as f, useCallback as w } from "react";
 import { createPortal as z } from "react-dom";
-import { useDebounce as q } from "use-debounce";
-import { token as G } from "@bynder/design-system";
+import { useDebounce as q } from "./index.module2.js";
+import { token as G } from "./token.js";
 import { useRootElement as H } from "./RootElementContext.js";
 const L = {
   x: null,
@@ -18,7 +18,7 @@ const L = {
   const [E, R] = T(L), [d, D] = T(L), [C] = q(d, W, {
     leading: !0,
     maxWait: W
-  }), [M, $] = T(), o = H(), O = j.useMemo(
+  }), [_, $] = T(), o = H(), O = j.useMemo(
     () => ee(
       E,
       C,
@@ -43,12 +43,12 @@ const L = {
   }), []);
   const p = ({ shiftKey: t, metaKey: s }) => {
     const r = t || s ? "inverse" : "select";
-    B.current = { shiftKey: t, metaKey: s }, i.current && r !== M && $(r);
+    B.current = { shiftKey: t, metaKey: s }, i.current && r !== _ && $(r);
   };
   f(() => {
     let t;
-    return typeof h == "function" && i.current ? (p(B.current), h(M ?? "select")) : typeof u == "function" && !i.current && (t = setTimeout(() => u(M ?? "select"), Q)), () => clearTimeout(t);
-  }, [i.current, M]);
+    return typeof h == "function" && i.current ? (p(B.current), h(_ ?? "select")) : typeof u == "function" && !i.current && (t = setTimeout(() => u(_ ?? "select"), Q)), () => clearTimeout(t);
+  }, [i.current, _]);
   const A = (t) => {
     c.current = t, R(t), b();
   }, k = (t) => {
@@ -61,16 +61,16 @@ const L = {
       x: s,
       y: t
     });
-  }, []), _ = w(() => {
-    o.removeEventListener("mousemove", S), o.removeEventListener("mouseup", _), A(L), k(L);
+  }, []), M = w(() => {
+    o.removeEventListener("mousemove", S), o.removeEventListener("mouseup", M), A(L), k(L);
   }, [S, o]), P = w(
     ({ clientY: t, clientX: s, button: r }) => {
-      r === K && (o.addEventListener("mousemove", S), o.addEventListener("mouseup", _), A({
+      r === K && (o.addEventListener("mousemove", S), o.addEventListener("mouseup", M), A({
         x: s,
         y: t
       }));
     },
-    [S, _, o]
+    [S, M, o]
     // eslint-disable-line react-hooks/exhaustive-deps
   );
   f(() => {
@@ -78,7 +78,7 @@ const L = {
     return t && (oe(o), t.addEventListener("mousedown", P)), () => {
       t && (t.removeEventListener("mousedown", P), re(o));
     };
-  }, [n, P, S, _, o]), f(() => {
+  }, [n, P, S, M, o]), f(() => {
     const t = o.querySelectorAll(`[${J}]`), s = Array.from(t).reduce((r, a) => {
       const X = ne(a);
       return a instanceof HTMLElement && te(X, N) && a.dataset.dragSelectId && r.push(a.dataset.dragSelectId), r;

package/Dropdown.js

@@ -1,12 +1,13 @@
-import { jsxs as l, Fragment as w, jsx as i } from "react/jsx-runtime";
+import { jsxs as c, Fragment as w, jsx as i } from "react/jsx-runtime";
 import { useState as h, useRef as D, useMemo as $ } from "react";
-import r from "styled-components";
-import { token as v, Button as x } from "@bynder/design-system";
+import r from "./styled-components.browser.esm.js";
+import { Button as v } from "./Button.js";
+import { token as x } from "./token.js";
 import { DropdownContent as C } from "./DropdownContent.js";
 import { useAssetFilter as A } from "./AssetFilterContext.js";
-function N({
+function O({
   buttonKind: t = "clean",
-  direction: c = "Down",
+  direction: l = "Down",
   isSmall: m,
   fadeIn: f,
   isMetapropertyDropdown: u,
@@ -15,9 +16,9 @@ function N({
   const a = A(), s = b(), [e, p] = h(!1), d = D(null), o = () => {
     p((g) => !g), a.setDropdownState(!a.isDropdownActive);
   };
-  return /* @__PURE__ */ l(w, { children: [
-    /* @__PURE__ */ i(I, { $fadeIn: !!f, children: /* @__PURE__ */ l(
-      x,
+  return /* @__PURE__ */ c(w, { children: [
+    /* @__PURE__ */ i(I, { $fadeIn: !!f, children: /* @__PURE__ */ c(
+      v,
       {
         variant: t,
         isSmall: m,
@@ -40,7 +41,7 @@ function N({
       {
         isPaddingContent: n.isPaddingContent,
         onClickOutside: o,
-        direction: c,
+        direction: l,
         target: d,
         id: s,
         isMetapropertyDropdown: u,
@@ -59,7 +60,7 @@ const I = r.div`
 	text-transform: inherit;
 	${(t) => t.$fadeIn ? "animation: var(--fade-in-down);" : ""}
 `, S = r.i`
-	margin-left: ${v.spacing3};
+	margin-left: ${x.spacing3};
 	transition: transform 200ms;
 	${(t) => t.$active ? "transform: rotate(180deg);" : ""}
 `, k = r.span`
@@ -67,5 +68,5 @@ const I = r.div`
 	align-items: center;
 `;
 export {
-  N as Dropdown
+  O as Dropdown
 };

package/Dropdown2.js

@@ -0,0 +1,169 @@
+import { jsx as g, jsxs as P } from "react/jsx-runtime";
+import { useReducer as B, useRef as y, useEffect as I, useCallback as F, useMemo as W } from "react";
+import { useLayer as j, mergeRefs as O } from "react-laag";
+import { useKeyDown as n } from "./useKeyDown.js";
+import { useId as K } from "./useId.js";
+import { Arrow as N } from "./Arrow.js";
+import { Container as U } from "./Container2.js";
+import { Item as V } from "./Item4.js";
+import { SectionTitle as q } from "./SectionTitle.js";
+import { DropdownContext as _ } from "./context3.js";
+import { getUseLayerOptions as z } from "./getUseLayerOptions.js";
+import { reducer as G, initialState as J } from "./state.js";
+import { SelectButtonText as Q } from "./SelectButtonText.js";
+import { Divider as X } from "./Divider.js";
+import { SearchInput as Y } from "./SearchInput2.js";
+import { Text as Z } from "./Text22.js";
+import { useScrollHighlightedIntoView as $ } from "./useScrollHighlightedIntoView.js";
+import { ListItem as ee } from "./ListItem2.js";
+import { getFirstShadowElement as te, isInShadow as re } from "./shadowdom2.js";
+import { useOffset as ie, OffsetContext as oe } from "./OffsetContext.js";
+import { calculateContainerMaxHeight as ne } from "./calculateContainerMaxHeight.js";
+function i({
+  children: x,
+  trigger: w,
+  position: c = "bottom-left",
+  isClosedOnScroll: m = !1,
+  isKeepingFocusOnTrigger: f = !1,
+  containerRef: S,
+  onOpen: v,
+  onClose: D,
+  minWidth: T,
+  role: C,
+  noMaxHeight: E = !1,
+  ...L
+}) {
+  const [e, r] = B(G, J), l = y(!0), s = y(), p = K("dropdown-menu");
+  I(() => {
+    if (l.current) {
+      l.current = !1;
+      return;
+    }
+    e.isOpen ? (r({
+      type: "highlight-current-item"
+    }), v?.()) : D?.();
+  }, [e.isOpen]), $(e.highlightedItemId, e.hasSearch);
+  const o = F(() => {
+    e.isOpen && (r({
+      type: "close"
+    }), s?.current?.focus());
+  }, [e.isOpen]);
+  I(() => {
+    function t() {
+      o();
+    }
+    if (m && e.isOpen)
+      return document.addEventListener("scroll", t), () => {
+        document.removeEventListener("scroll", t);
+      };
+  }, [m, o, e.isOpen]), n("Tab", () => {
+    e.isOpen && o();
+  }), n("Escape", () => {
+    e.isOpen && o();
+  }), n("Enter", (t) => {
+    e.isOpen && e.highlightedItemId && (document.querySelector("#" + e.highlightedItemId)?.click(), t.preventDefault());
+  }), n("ArrowDown", (t) => {
+    e.isOpen && (r({
+      type: "highlight-next"
+    }), t.preventDefault());
+  }), n("ArrowUp", (t) => {
+    e.isOpen && (r({
+      type: "highlight-previous"
+    }), t.preventDefault());
+  });
+  const k = W(() => ({
+    dispatch: r,
+    close: o,
+    highlightedItemId: e.highlightedItemId,
+    hasSearch: e.hasSearch,
+    isKeepingFocusOnTrigger: f,
+    menuId: p
+  }), [o, f, e.hasSearch, e.highlightedItemId, p]), h = ie(), d = 16, {
+    renderLayer: R,
+    triggerProps: {
+      ref: A
+    },
+    layerProps: a,
+    triggerBounds: u
+  } = j({
+    isOpen: e.isOpen,
+    /**
+     * Until https://github.com/everweij/react-laag/issues/84 is fixed,
+     * we can't use the onOutsideClick option in the Shadow DOM.
+     */
+    onOutsideClick: re(s.current) ? void 0 : () => r({
+      type: "close"
+    }),
+    onParentClose() {
+      r({
+        type: "close"
+      });
+    },
+    onDisappear: (t) => {
+      t === "full" && r({
+        type: "close"
+      });
+    },
+    triggerOffset: h,
+    containerOffset: d,
+    auto: !0,
+    container: te(s.current),
+    ...z(c)
+  }), b = c === "bottom" ? {
+    width: u?.width,
+    minWidth: "initial",
+    maxWidth: "initial"
+  } : {};
+  function H(t) {
+    (t.key === " " || t.key === "Enter") && (t.preventDefault(), r({
+      type: "toggle-from-keyboard"
+    }));
+  }
+  const M = ne(E, u, {
+    triggerOffset: h,
+    containerOffset: d
+  });
+  return /* @__PURE__ */ g(_.Provider, { value: k, children: /* @__PURE__ */ P("div", { ...L, children: [
+    w({
+      isOpen: e.isOpen,
+      onClick: () => {
+        r({
+          type: "toggle"
+        });
+      },
+      "aria-haspopup": !0,
+      "aria-expanded": e.isOpen,
+      "aria-controls": p,
+      "aria-activedescendant": e.highlightedItemId || void 0,
+      onKeyDown: H,
+      ref: O(A, s)
+    }, {
+      open: () => {
+        r({
+          type: "open"
+        });
+      },
+      close: () => {
+        r({
+          type: "close"
+        });
+      }
+    }),
+    e.isOpen && R(/* @__PURE__ */ g(U, { id: p, ...a, ref: O(a.ref, S), style: {
+      ...a.style,
+      ...b
+    }, minWidth: T, role: C, dynamicMaxHeight: M, children: x }))
+  ] }) });
+}
+i.Divider = X;
+i.Item = V;
+i.ListItem = ee;
+i.SectionTitle = q;
+i.Arrow = N;
+i.SelectButtonText = Q;
+i.SearchInput = Y;
+i.Text = Z;
+i.OffsetContext = oe;
+export {
+  i as Dropdown
+};

package/DropdownContent.js

@@ -1,8 +1,8 @@
 import { jsx as L } from "react/jsx-runtime";
 import { useRef as O, useState as l, useLayoutEffect as g } from "react";
 import { createPortal as P } from "react-dom";
-import { styled as S } from "styled-components";
-import { token as m } from "@bynder/design-system";
+import S from "./styled-components.browser.esm.js";
+import { token as m } from "./token.js";
 import { useClickOutside as z } from "./useClickOutside.js";
 import { useRootElement as V } from "./RootElementContext.js";
 import { concatClasses as j } from "./class.js";

package/DropdownListItem.js

@@ -1,7 +1,7 @@
 import { jsx as n, jsxs as e } from "react/jsx-runtime";
-import { styled as r } from "styled-components";
-import { token as o } from "@bynder/design-system";
-import { IconCheck as a } from "@bynder/icons";
+import r from "./styled-components.browser.esm.js";
+import { token as o } from "./token.js";
+import { IconCheck as a } from "./index4.js";
 function m({ selected: i = !1, ...t }) {
   return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ e(
     c,

package/Enum.js

@@ -0,0 +1,12 @@
+var r = "-ms-", a = "-moz-", v = "-webkit-", E = "comm", e = "rule", m = "decl", M = "@import", R = "@keyframes", T = "@layer";
+export {
+  E as COMMENT,
+  m as DECLARATION,
+  M as IMPORT,
+  R as KEYFRAMES,
+  T as LAYER,
+  a as MOZ,
+  r as MS,
+  e as RULESET,
+  v as WEBKIT
+};

package/ErrorMessage.js

@@ -1,39 +1,40 @@
-import { jsxs as e, Fragment as c, jsx as r } from "react/jsx-runtime";
-import i from "styled-components";
-import { token as n, Button as a } from "@bynder/design-system";
-import { __ as t } from "./index2.js";
+import { jsxs as e, Fragment as c, jsx as n } from "react/jsx-runtime";
+import i from "./styled-components.browser.esm.js";
+import { Button as a } from "./Button.js";
+import { token as t } from "./token.js";
+import { __ as r } from "./index2.js";
 import { ErrorIcon as s } from "./ErrorIcon.js";
-function u(o) {
+function S(o) {
   return /* @__PURE__ */ e(c, { children: [
-    /* @__PURE__ */ r(s, {}),
-    /* @__PURE__ */ r(l, { children: t("Oops! Something went wrong") }),
-    /* @__PURE__ */ r(p, { children: t("Please try again or get in contact with our customer support.") }),
+    /* @__PURE__ */ n(s, {}),
+    /* @__PURE__ */ n(l, { children: r("Oops! Something went wrong") }),
+    /* @__PURE__ */ n(p, { children: r("Please try again or get in contact with our customer support.") }),
     /* @__PURE__ */ e(m, { children: [
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ n(
         a,
         {
           variant: "secondary",
-          title: t("Send report"),
+          title: r("Send report"),
           onClick: o.onClickSend,
           isDisabled: o.isReportSent,
-          children: o.isReportSent ? t("Report sent") : t("Send report...")
+          children: o.isReportSent ? r("Report sent") : r("Send report...")
         }
       ),
-      /* @__PURE__ */ r(a, { variant: "primary", title: t("Try again"), onClick: o.onClickRetry, children: t("Try again") })
+      /* @__PURE__ */ n(a, { variant: "primary", title: r("Try again"), onClick: o.onClickRetry, children: r("Try again") })
     ] })
   ] });
 }
 const l = i.h1`
-	margin-top: ${n.spacing8};
-	font-size: ${n.fontSize400};
+	margin-top: ${t.spacing8};
+	font-size: ${t.fontSize400};
 `, p = i.span`
-	margin-top: ${n.spacing5};
-	color: ${n.colorTextDisabled};
+	margin-top: ${t.spacing5};
+	color: ${t.colorTextDisabled};
 `, m = i.div`
-	margin-top: ${n.spacing7};
+	margin-top: ${t.spacing7};
 	display: flex;
-	gap: ${n.spacing3};
+	gap: ${t.spacing3};
 `;
 export {
-  u as ErrorMessage
+  S as ErrorMessage
 };