@bynder/compact-view 5.1.3 → 5.1.4

package/DirectionSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DirectionSelect.js","sources":["../../src/order/DirectionSelect.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { IconSortOrder } from '@bynder/icons';\nimport { Button, token } from '@bynder/design-system';\n\nimport { __ } from '../localization';\nimport { Direction, useOrderingByPage } from '@src/store/useOrderingStore';\nimport { useRouterSelectors } from '@src/store/useRouterStore';\n\nexport function DirectionSelect({ nlSearch = false }: { nlSearch?: boolean }) {\n\tconst page = useRouterSelectors.use.page();\n\tconst [ordering, setOrdering] = useOrderingByPage(page.page);\n\n\tconst titleOfDirectionMap = {\n\t\tASC: __('Ascending'),\n\t\tDESC: __('Descending'),\n\t};\n\n\tconst oppositeDirectionMap: Record<Direction, Direction> = {\n\t\tASC: 'DESC',\n\t\tDESC: 'ASC',\n\t};\n\n\tfunction handleClick() {\n\t\tsetOrdering({ field: ordering.field, direction: oppositeDirectionMap[ordering.direction] });\n\t}\n\n\treturn (\n\t\t<SortButton\n\t\t\tvariant=\"clean\"\n\t\t\tisSmall\n\t\t\ttitle={titleOfDirectionMap[ordering.direction]}\n\t\t\tonClick={handleClick}\n\t\t\ticon={<SortIcon $isAscending={ordering.direction === 'ASC'} />}\n\t\t\tisDisabled={nlSearch}\n\t\t/>\n\t);\n}\n\nconst SortButton = styled(Button)`\n\tborder-radius: 5px 0 0 5px;\n\tborder: 1px solid #d9dee1;\n\theight: 42px;\n`;\n\nconst SortIcon = styled(IconSortOrder)<{ $isAscending: boolean }>`\n\twidth: ${token.spacing6};\n\theight: ${token.spacing6};\n\t${(p) => p.$isAscending && `transform: scaleY(-1)`}\n`;\n"],"names":["DirectionSelect","nlSearch","page","useRouterSelectors","ordering","setOrdering","useOrderingByPage","titleOfDirectionMap","__","oppositeDirectionMap","handleClick","jsx","SortButton","SortIcon","styled","Button","IconSortOrder","token","p"],"mappings":";;;;;;;AASO,SAASA,EAAgB,EAAE,UAAAC,IAAW,MAAiC;AAC7E,QAAMC,IAAOC,EAAmB,IAAI,KAAA,GAC9B,CAACC,GAAUC,CAAW,IAAIC,EAAkBJ,EAAK,IAAI,GAErDK,IAAsB;AAAA,IAC3B,KAAKC,EAAG,WAAW;AAAA,IACnB,MAAMA,EAAG,YAAY;AAAA,EAAA,GAGhBC,IAAqD;AAAA,IAC1D,KAAK;AAAA,IACL,MAAM;AAAA,EAAA;AAGP,WAASC,IAAc;AACtB,IAAAL,EAAY,EAAE,OAAOD,EAAS,OAAO,WAAWK,EAAqBL,EAAS,SAAS,GAAG;AAAA,EAC3F;AAEA,SACC,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,SAAQ;AAAA,MACR,SAAO;AAAA,MACP,OAAOL,EAAoBH,EAAS,SAAS;AAAA,MAC7C,SAASM;AAAA,MACT,MAAM,gBAAAC,EAACE,GAAA,EAAS,cAAcT,EAAS,cAAc,OAAO;AAAA,MAC5D,YAAYH;AAAA,IAAA;AAAA,EAAA;AAGf;AAEA,MAAMW,IAAaE,EAAOC,CAAM;AAAA;AAAA;AAAA;AAAA,GAM1BF,IAAWC,EAAOE,CAAa;AAAA,UAC3BC,EAAM,QAAQ;AAAA,WACbA,EAAM,QAAQ;AAAA,GACtB,CAACC,MAAMA,EAAE,gBAAgB,uBAAuB;AAAA;"}

package/DocumentIcon.js

@@ -0,0 +1,69 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+function r() {
+  return /* @__PURE__ */ i("svg", { viewBox: "0 5 60 82", className: "h-20", children: [
+    /* @__PURE__ */ i("defs", { children: [
+      /* @__PURE__ */ i(
+        "filter",
+        {
+          x: "-1.7%",
+          y: "-1.2%",
+          width: "103.3%",
+          height: "105%",
+          filterUnits: "objectBoundingBox",
+          id: "prefix__a",
+          children: [
+            /* @__PURE__ */ e("feOffset", { dy: "2", in: "SourceAlpha", result: "shadowOffsetOuter1" }),
+            /* @__PURE__ */ e(
+              "feColorMatrix",
+              {
+                values: "0 0 0 0 0 0 0 0 0 0.133333333 0 0 0 0 0.2 0 0 0 0.05 0",
+                in: "shadowOffsetOuter1"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ i(
+        "filter",
+        {
+          x: "-5%",
+          y: "-5%",
+          width: "110%",
+          height: "120%",
+          filterUnits: "objectBoundingBox",
+          id: "prefix__c",
+          children: [
+            /* @__PURE__ */ e("feOffset", { dy: "2", in: "SourceAlpha", result: "shadowOffsetOuter1" }),
+            /* @__PURE__ */ e(
+              "feColorMatrix",
+              {
+                values: "0 0 0 0 0 0 0 0 0 0.133333333 0 0 0 0 0.2 0 0 0 0.05 0",
+                in: "shadowOffsetOuter1"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M5 5h35l20 20v55a5 5 0 01-5 5H5a5 5 0 01-5-5V10a5 5 0 015-5z",
+          id: "prefix__b"
+        }
+      ),
+      /* @__PURE__ */ e("path", { d: "M40 5l20 20H45a5 5 0 01-5-5V5z", id: "prefix__d" })
+    ] }),
+    /* @__PURE__ */ i("g", { fill: "none", fillRule: "evenodd", children: [
+      /* @__PURE__ */ e("use", { fill: "#000", filter: "url(#prefix__a)", xlinkHref: "#prefix__b" }),
+      /* @__PURE__ */ e("use", { fill: "#FFF", xlinkHref: "#prefix__b" }),
+      /* @__PURE__ */ i("g", { fillRule: "nonzero", children: [
+        /* @__PURE__ */ e("use", { fill: "#000", filter: "url(#prefix__c)", xlinkHref: "#prefix__d" }),
+        /* @__PURE__ */ e("use", { fill: "#FFF", xlinkHref: "#prefix__d" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  r as DocumentIcon
+};
+//# sourceMappingURL=DocumentIcon.js.map

package/DocumentIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentIcon.js","sources":["../../src/common/components/DocumentIcon.tsx"],"sourcesContent":["import React from 'react';\n\nexport function DocumentIcon() {\n\treturn (\n\t\t<svg viewBox=\"0 5 60 82\" className=\"h-20\">\n\t\t\t<defs>\n\t\t\t\t<filter\n\t\t\t\t\tx=\"-1.7%\"\n\t\t\t\t\ty=\"-1.2%\"\n\t\t\t\t\twidth=\"103.3%\"\n\t\t\t\t\theight=\"105%\"\n\t\t\t\t\tfilterUnits=\"objectBoundingBox\"\n\t\t\t\t\tid=\"prefix__a\"\n\t\t\t\t>\n\t\t\t\t\t<feOffset dy=\"2\" in=\"SourceAlpha\" result=\"shadowOffsetOuter1\" />\n\t\t\t\t\t<feColorMatrix\n\t\t\t\t\t\tvalues=\"0 0 0 0 0 0 0 0 0 0.133333333 0 0 0 0 0.2 0 0 0 0.05 0\"\n\t\t\t\t\t\tin=\"shadowOffsetOuter1\"\n\t\t\t\t\t/>\n\t\t\t\t</filter>\n\t\t\t\t<filter\n\t\t\t\t\tx=\"-5%\"\n\t\t\t\t\ty=\"-5%\"\n\t\t\t\t\twidth=\"110%\"\n\t\t\t\t\theight=\"120%\"\n\t\t\t\t\tfilterUnits=\"objectBoundingBox\"\n\t\t\t\t\tid=\"prefix__c\"\n\t\t\t\t>\n\t\t\t\t\t<feOffset dy=\"2\" in=\"SourceAlpha\" result=\"shadowOffsetOuter1\" />\n\t\t\t\t\t<feColorMatrix\n\t\t\t\t\t\tvalues=\"0 0 0 0 0 0 0 0 0 0.133333333 0 0 0 0 0.2 0 0 0 0.05 0\"\n\t\t\t\t\t\tin=\"shadowOffsetOuter1\"\n\t\t\t\t\t/>\n\t\t\t\t</filter>\n\t\t\t\t<path\n\t\t\t\t\td=\"M5 5h35l20 20v55a5 5 0 01-5 5H5a5 5 0 01-5-5V10a5 5 0 015-5z\"\n\t\t\t\t\tid=\"prefix__b\"\n\t\t\t\t/>\n\t\t\t\t<path d=\"M40 5l20 20H45a5 5 0 01-5-5V5z\" id=\"prefix__d\" />\n\t\t\t</defs>\n\t\t\t<g fill=\"none\" fillRule=\"evenodd\">\n\t\t\t\t<use fill=\"#000\" filter=\"url(#prefix__a)\" xlinkHref=\"#prefix__b\" />\n\t\t\t\t<use fill=\"#FFF\" xlinkHref=\"#prefix__b\" />\n\t\t\t\t<g fillRule=\"nonzero\">\n\t\t\t\t\t<use fill=\"#000\" filter=\"url(#prefix__c)\" xlinkHref=\"#prefix__d\" />\n\t\t\t\t\t<use fill=\"#FFF\" xlinkHref=\"#prefix__d\" />\n\t\t\t\t</g>\n\t\t\t</g>\n\t\t</svg>\n\t);\n}\n"],"names":["DocumentIcon","jsxs","jsx"],"mappings":";AAEO,SAASA,IAAe;AAC9B,SACC,gBAAAC,EAAC,OAAA,EAAI,SAAQ,aAAY,WAAU,QAClC,UAAA;AAAA,IAAA,gBAAAA,EAAC,QAAA,EACA,UAAA;AAAA,MAAA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,GAAE;AAAA,UACF,GAAE;AAAA,UACF,OAAM;AAAA,UACN,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,IAAG;AAAA,UAEH,UAAA;AAAA,YAAA,gBAAAC,EAAC,cAAS,IAAG,KAAI,IAAG,eAAc,QAAO,sBAAqB;AAAA,YAC9D,gBAAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACA,QAAO;AAAA,gBACP,IAAG;AAAA,cAAA;AAAA,YAAA;AAAA,UACJ;AAAA,QAAA;AAAA,MAAA;AAAA,MAED,gBAAAD;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,GAAE;AAAA,UACF,GAAE;AAAA,UACF,OAAM;AAAA,UACN,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,IAAG;AAAA,UAEH,UAAA;AAAA,YAAA,gBAAAC,EAAC,cAAS,IAAG,KAAI,IAAG,eAAc,QAAO,sBAAqB;AAAA,YAC9D,gBAAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACA,QAAO;AAAA,gBACP,IAAG;AAAA,cAAA;AAAA,YAAA;AAAA,UACJ;AAAA,QAAA;AAAA,MAAA;AAAA,MAED,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,GAAE;AAAA,UACF,IAAG;AAAA,QAAA;AAAA,MAAA;AAAA,MAEJ,gBAAAA,EAAC,QAAA,EAAK,GAAE,kCAAiC,IAAG,YAAA,CAAY;AAAA,IAAA,GACzD;AAAA,IACA,gBAAAD,EAAC,KAAA,EAAE,MAAK,QAAO,UAAS,WACvB,UAAA;AAAA,MAAA,gBAAAC,EAAC,SAAI,MAAK,QAAO,QAAO,mBAAkB,WAAU,cAAa;AAAA,MACjE,gBAAAA,EAAC,OAAA,EAAI,MAAK,QAAO,WAAU,cAAa;AAAA,MACxC,gBAAAD,EAAC,KAAA,EAAE,UAAS,WACX,UAAA;AAAA,QAAA,gBAAAC,EAAC,SAAI,MAAK,QAAO,QAAO,mBAAkB,WAAU,cAAa;AAAA,QACjE,gBAAAA,EAAC,OAAA,EAAI,MAAK,QAAO,WAAU,aAAA,CAAa;AAAA,MAAA,EAAA,CACzC;AAAA,IAAA,EAAA,CACD;AAAA,EAAA,GACD;AAEF;"}

package/DomainInput.js

@@ -0,0 +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 { Spinner as c } from "./Spinner.js";
+import { __ as o } from "./index2.js";
+function C({ status: i, isReadOnly: e, value: r, onChange: a, onSubmit: l }) {
+  function d(p) {
+    i === "valid" && p.keyCode === 13 && l();
+  }
+  return /* @__PURE__ */ n(g, { children: /* @__PURE__ */ n(
+    h,
+    {
+      type: "url",
+      value: r,
+      placeholder: "yourdomain.bynder.com",
+      label: o("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,
+      iconRight: i === "validating" ? /* @__PURE__ */ n(v, { role: "alert", "aria-live": "polite", children: /* @__PURE__ */ n(c, { isRelative: !0, isNotUsingMargin: !0 }) }) : void 0,
+      isDisabled: e,
+      "data-testid": "login-input"
+    }
+  ) });
+}
+const g = t.div`
+	margin: ${m.spacing4} 0;
+	width: 320px;
+`, v = t.div`
+	height: 100%;
+	display: flex;
+	align-items: center;
+`;
+export {
+  C as DomainInput
+};
+//# sourceMappingURL=DomainInput.js.map

package/DomainInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DomainInput.js","sources":["../../src/login/components/DomainInput.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { InputField, token } from '@bynder/design-system';\n\nimport { Spinner } from '../../common/components/Spinner';\nimport { __ } from '../../localization';\nimport { DomainStatus } from '../useAccountDomain';\n\ninterface Props {\n\tvalue: string;\n\tisReadOnly: boolean;\n\tstatus: DomainStatus;\n\tonSubmit: () => void;\n\tonChange: (value: string) => void;\n}\n\nexport function DomainInput({ status, isReadOnly, value, onChange, onSubmit }: Props) {\n\tfunction handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n\t\tif (status === 'valid' && event.keyCode === 13) {\n\t\t\tonSubmit();\n\t\t}\n\t}\n\n\treturn (\n\t\t<Container>\n\t\t\t<InputField\n\t\t\t\ttype=\"url\"\n\t\t\t\tvalue={value}\n\t\t\t\tplaceholder=\"yourdomain.bynder.com\"\n\t\t\t\tlabel={__('Enter the portal domain')}\n\t\t\t\tonChange={onChange}\n\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\tisInvalid={status === 'invalid'}\n\t\t\t\thelperText={status === 'invalid' && __('This portal domain does not exist')}\n\t\t\t\thasClearButton={status !== 'validating' && !isReadOnly}\n\t\t\t\ticonRight={\n\t\t\t\t\tstatus === 'validating' ? (\n\t\t\t\t\t\t<LoadingContainer role=\"alert\" aria-live=\"polite\">\n\t\t\t\t\t\t\t<Spinner isRelative isNotUsingMargin />\n\t\t\t\t\t\t</LoadingContainer>\n\t\t\t\t\t) : undefined\n\t\t\t\t}\n\t\t\t\tisDisabled={isReadOnly}\n\t\t\t\tdata-testid=\"login-input\"\n\t\t\t/>\n\t\t</Container>\n\t);\n}\n\nconst Container = styled.div`\n\tmargin: ${token.spacing4} 0;\n\twidth: 320px;\n`;\n\nconst LoadingContainer = styled.div`\n\theight: 100%;\n\tdisplay: flex;\n\talign-items: center;\n`;\n// margin-top: -${token.spacing4};\n"],"names":["DomainInput","status","isReadOnly","value","onChange","onSubmit","handleKeyDown","event","Container","jsx","InputField","__","LoadingContainer","Spinner","styled","token"],"mappings":";;;;;AAgBO,SAASA,EAAY,EAAE,QAAAC,GAAQ,YAAAC,GAAY,OAAAC,GAAO,UAAAC,GAAU,UAAAC,KAAmB;AACrF,WAASC,EAAcC,GAA8C;AACpE,IAAIN,MAAW,WAAWM,EAAM,YAAY,MAC3CF,EAAA;AAAA,EAEF;AAEA,2BACEG,GAAA,EACA,UAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,MAAK;AAAA,MACL,OAAAP;AAAA,MACA,aAAY;AAAA,MACZ,OAAOQ,EAAG,yBAAyB;AAAA,MACnC,UAAAP;AAAA,MACA,WAAWE;AAAA,MACX,WAAWL,MAAW;AAAA,MACtB,YAAYA,MAAW,aAAaU,EAAG,mCAAmC;AAAA,MAC1E,gBAAgBV,MAAW,gBAAgB,CAACC;AAAA,MAC5C,WACCD,MAAW,eACV,gBAAAQ,EAACG,GAAA,EAAiB,MAAK,SAAQ,aAAU,UACxC,UAAA,gBAAAH,EAACI,KAAQ,YAAU,IAAC,kBAAgB,GAAA,CAAC,GACtC,IACG;AAAA,MAEL,YAAYX;AAAA,MACZ,eAAY;AAAA,IAAA;AAAA,EAAA,GAEd;AAEF;AAEA,MAAMM,IAAYM,EAAO;AAAA,WACdC,EAAM,QAAQ;AAAA;AAAA,GAInBH,IAAmBE,EAAO;AAAA;AAAA;AAAA;AAAA;"}

package/DragSelect.js

@@ -0,0 +1,144 @@
+import { jsx as j } from "react/jsx-runtime";
+import z, { useState as T, useRef as S, useEffect as f, useCallback as x } from "react";
+import { createPortal as G } from "react-dom";
+import { useDebounce as W } from "use-debounce";
+import { useRootElement as H } from "./RootElementContext.js";
+const L = {
+  x: null,
+  y: null
+}, K = 0, J = "data-drag-select-id", O = "drag-select-container", V = 10, $ = 50, Q = 10, de = ({
+  dragContainer: n,
+  selectionBoxCustomAttr: e,
+  onSelect: m,
+  onDeselect: l,
+  onDragStart: h,
+  onDragEnd: u
+}) => {
+  const [E, R] = T(L), [d, D] = T(L), [C] = W(d, V, {
+    leading: !0,
+    maxWait: V
+  }), [M, X] = T(), o = H(), w = z.useMemo(
+    () => Z(
+      E,
+      C,
+      o.querySelector(".cv-root")
+    ),
+    [E, C, o]
+  ), [N] = W(
+    w,
+    $,
+    {
+      leading: !1,
+      maxWait: $
+    }
+  ), [v, Y] = T([]), y = se(v), c = S(E), g = S(d), i = S(
+    c.current.x !== null && c.current.y !== null && g.current.x !== null && g.current.y !== null
+  ), B = S({
+    shiftKey: !1,
+    metaKey: !1
+  });
+  f(() => (document.addEventListener("keydown", p, !1), document.addEventListener("keyup", p, !1), () => {
+    document.removeEventListener("keydown", p, !1), document.removeEventListener("keyup", p, !1);
+  }), []);
+  const p = ({ shiftKey: t, metaKey: r }) => {
+    const s = t || r ? "inverse" : "select";
+    B.current = { shiftKey: t, metaKey: r }, i.current && s !== M && X(s);
+  };
+  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]);
+  const A = (t) => {
+    c.current = t, R(t), k();
+  }, U = (t) => {
+    g.current = t, D(t), k();
+  }, k = () => {
+    i.current = c.current.x !== null && c.current.y !== null && g.current.x !== null && g.current.y !== null;
+  }, I = x(({ clientY: t, clientX: r }) => {
+    const s = c.current.x !== null, a = Math.abs(c.current.x ?? 0 - r) >= 1 || Math.abs(c.current.y ?? 0 - t) >= 1;
+    !s || !a || U({
+      x: r,
+      y: t
+    });
+  }, []), _ = x(() => {
+    o.removeEventListener("mousemove", I), o.removeEventListener("mouseup", _), A(L), U(L);
+  }, [I, o]), P = x(
+    ({ clientY: t, clientX: r, button: s }) => {
+      s === K && (o.addEventListener("mousemove", I), o.addEventListener("mouseup", _), A({
+        x: r,
+        y: t
+      }));
+    },
+    [I, _, o]
+    // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  f(() => {
+    const t = o.querySelector(n);
+    return t && (ne(o), t.addEventListener("mousedown", P)), () => {
+      t && (t.removeEventListener("mousedown", P), oe(o));
+    };
+  }, [n, P, I, _, o]), f(() => {
+    const t = o.querySelectorAll(`[${J}]`), r = Array.from(t).reduce((s, a) => {
+      const b = te(a);
+      return a instanceof HTMLElement && ee(b, N) && a.dataset.dragSelectId && s.push(a.dataset.dragSelectId), s;
+    }, []);
+    Y(r);
+  }, [N, o]), f(() => {
+    if (!y || y === v || !i.current)
+      return;
+    const t = v.filter((s) => !y.includes(s)), r = y.filter(
+      (s) => !v.includes(s)
+    );
+    t.length && m(t), r.length && l(r);
+  }, [v, y, m, l, i]);
+  const q = o.querySelector(`#${O}`);
+  return !i.current || !q ? null : G(
+    /* @__PURE__ */ j(
+      "div",
+      {
+        ...e,
+        style: e.style ? {
+          ...F,
+          ...e.style,
+          ...w
+        } : { ...F, ...w },
+        "data-testid": "drag-selection"
+      }
+    ),
+    q
+  );
+}, F = { position: "absolute", zIndex: 100 }, Z = (n, e, m) => {
+  if (!n.x || !n.y || !e.x || !e.y || !m)
+    return { left: 0, top: 0, height: 0, width: 0 };
+  const l = m.getBoundingClientRect(), h = Math.max(e.x, 0);
+  let u = Math.min(n.x, h);
+  u = Math.max(u, l.left + 4);
+  const E = Math.min(n.y, e.y), R = Math.abs(e.y - n.y);
+  let d = Math.abs(h - n.x);
+  const D = l.width + l.left - u - 4;
+  return d = Math.min(d, D), { left: u, top: E, height: R, width: d };
+}, ee = (n, e) => n.left <= e.left + e.width && n.left + n.width >= e.left && n.top <= e.top + e.height && n.top + n.height >= e.top, te = (n) => {
+  const e = n.getBoundingClientRect();
+  return {
+    left: e.left,
+    top: e.top + window.scrollY,
+    height: e.height,
+    width: e.width
+  };
+}, ne = (n) => {
+  const e = document.createElement("div");
+  e.id = O, n.appendChild(e);
+}, oe = (n) => {
+  const e = n.querySelector(`#${O}`);
+  e && e.remove();
+}, se = (n) => {
+  const e = S();
+  return f(() => {
+    e.current = n;
+  }), e.current;
+};
+export {
+  de as DragSelect,
+  Z as getSelectionBoxRect
+};
+//# sourceMappingURL=DragSelect.js.map

package/DragSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragSelect.js","sources":["../../src/common/components/DragSelect.tsx"],"sourcesContent":["/*\n *  This component is adapted from the DragSelect component used in the flagship application:\n *  https://github.com/Bynder/paramount/blob/1aef68acaccf837e018856a47f2329ccb6ad1c1f/src/common/components/DragSelect.tsx\n *\n *  The only changes that were made was adding the 'useRootElement' hook and then using that root instead of the 'document'\n *  object when querying for elements and adding event listeners.\n */\n\nimport React, { useState, useEffect, useCallback, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useDebounce } from 'use-debounce';\n\nimport { useRootElement } from '../../style/RootElementContext';\n\nexport type DragAction = 'select' | 'inverse';\n\ntype Rect = {\n\tleft: number;\n\ttop: number;\n\theight: number;\n\twidth: number;\n};\n\ntype Position = {\n\tx: number | null;\n\ty: number | null;\n};\n\nconst INITIAL_POSITION: Position = {\n\tx: null,\n\ty: null,\n};\n\nconst LEFT_MOUSE_BUTTON_ID = 0;\nconst DATA_ATTRIBUTE_ID = 'data-drag-select-id';\nconst CONTAINER_DIV_ID = 'drag-select-container';\nconst DRAW_SELECTION_BOX_DEBOUNCE_MS = 10;\nconst CALCULATE_INTERSECTIONS_DEBOUNCE_MS = 50;\nconst POST_DRAG_DELAY_MS = 10;\n\ntype Props = {\n\tdragContainer: string;\n\tselectionBoxCustomAttr: React.HTMLAttributes<HTMLElement>;\n\tonSelect: (selectedIds: string[]) => void;\n\tonDeselect: (deselectedIds: string[]) => void;\n\tonDragStart?: (action: DragAction) => void;\n\tonDragEnd?: (action: DragAction) => void;\n};\n\nexport const DragSelect = ({\n\tdragContainer,\n\tselectionBoxCustomAttr,\n\tonSelect,\n\tonDeselect,\n\tonDragStart,\n\tonDragEnd,\n}: Props) => {\n\tconst [startPosition, setStartPosition] = useState<Position>(INITIAL_POSITION);\n\tconst [endPosition, setEndPosition] = useState<Position>(INITIAL_POSITION);\n\tconst [debouncedEndPosition] = useDebounce(endPosition, DRAW_SELECTION_BOX_DEBOUNCE_MS, {\n\t\tleading: true,\n\t\tmaxWait: DRAW_SELECTION_BOX_DEBOUNCE_MS,\n\t});\n\tconst [action, setAction] = useState<DragAction>();\n\tconst root = useRootElement();\n\n\tconst selectionBoxRect = React.useMemo(\n\t\t() =>\n\t\t\tgetSelectionBoxRect(\n\t\t\t\tstartPosition,\n\t\t\t\tdebouncedEndPosition,\n\t\t\t\troot.querySelector('.cv-root'),\n\t\t\t),\n\t\t[startPosition, debouncedEndPosition, root],\n\t);\n\n\tconst [debouncedSelectionBoxRect] = useDebounce(\n\t\tselectionBoxRect,\n\t\tCALCULATE_INTERSECTIONS_DEBOUNCE_MS,\n\t\t{\n\t\t\tleading: false,\n\t\t\tmaxWait: CALCULATE_INTERSECTIONS_DEBOUNCE_MS,\n\t\t},\n\t);\n\tconst [selectedIds, setSelectedIds] = useState<string[]>([]);\n\tconst prevSelectedIds = usePrevious(selectedIds);\n\n\t// Using ref because state is not accessible in onMouseMove,\n\t// keydown & keyup event callbacks.\n\tconst startPositionRef = useRef(startPosition);\n\tconst endPositionRef = useRef(endPosition);\n\tconst isSelectionBoxVisible = useRef<boolean>(\n\t\tstartPositionRef.current.x !== null &&\n\t\t\tstartPositionRef.current.y !== null &&\n\t\t\tendPositionRef.current.x !== null &&\n\t\t\tendPositionRef.current.y !== null,\n\t);\n\tconst keysPressed = useRef({\n\t\tshiftKey: false,\n\t\tmetaKey: false,\n\t});\n\n\tuseEffect(() => {\n\t\tdocument.addEventListener('keydown', onKeyInteraction, false);\n\t\tdocument.addEventListener('keyup', onKeyInteraction, false);\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('keydown', onKeyInteraction, false);\n\t\t\tdocument.removeEventListener('keyup', onKeyInteraction, false);\n\t\t};\n\t}, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n\tconst onKeyInteraction = ({ shiftKey, metaKey }: KeyboardEvent) => {\n\t\tconst newAction = shiftKey || metaKey ? 'inverse' : 'select';\n\t\tkeysPressed.current = { shiftKey, metaKey };\n\n\t\t// We only want to set action if we are currently dragging\n\t\t// and the action has changed.\n\t\tif (isSelectionBoxVisible.current && newAction !== action) {\n\t\t\tsetAction(newAction);\n\t\t}\n\t};\n\tuseEffect(() => {\n\t\tlet timeoutFunc;\n\n\t\tif (typeof onDragStart === 'function' && isSelectionBoxVisible.current) {\n\t\t\t// Check if keys were pressed before we started dragging\n\t\t\tonKeyInteraction(keysPressed.current as KeyboardEvent);\n\t\t\tonDragStart(action ?? 'select');\n\t\t} else if (typeof onDragEnd === 'function' && !isSelectionBoxVisible.current) {\n\t\t\ttimeoutFunc = setTimeout(() => onDragEnd(action ?? 'select'), POST_DRAG_DELAY_MS);\n\t\t}\n\n\t\treturn () => clearTimeout(timeoutFunc);\n\t\t// onDragStart and onDragEnd are external functions which should not trigger the effect.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [isSelectionBoxVisible.current, action]);\n\n\tconst updateStartPosition = (position: Position) => {\n\t\tstartPositionRef.current = position;\n\t\tsetStartPosition(position);\n\t\tupdateIsSelectionBoxVisible();\n\t};\n\n\tconst updateEndPosition = (position: Position) => {\n\t\tendPositionRef.current = position;\n\t\tsetEndPosition(position);\n\t\tupdateIsSelectionBoxVisible();\n\t};\n\n\tconst updateIsSelectionBoxVisible = () => {\n\t\tisSelectionBoxVisible.current =\n\t\t\tstartPositionRef.current.x !== null &&\n\t\t\tstartPositionRef.current.y !== null &&\n\t\t\tendPositionRef.current.x !== null &&\n\t\t\tendPositionRef.current.y !== null;\n\t};\n\n\tconst onMouseMove = useCallback(({ clientY, clientX }: MouseEvent) => {\n\t\tconst hasStartPosition = startPositionRef.current.x !== null;\n\t\tconst isDragging =\n\t\t\tMath.abs(startPositionRef.current.x ?? 0 - clientX) >= 1 ||\n\t\t\tMath.abs(startPositionRef.current.y ?? 0 - clientY) >= 1;\n\n\t\tif (!hasStartPosition || !isDragging) {\n\t\t\treturn;\n\t\t}\n\n\t\tupdateEndPosition({\n\t\t\tx: clientX,\n\t\t\ty: clientY,\n\t\t});\n\t}, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n\tconst onMouseUp = useCallback(() => {\n\t\troot.removeEventListener('mousemove', onMouseMove);\n\t\troot.removeEventListener('mouseup', onMouseUp);\n\n\t\tupdateStartPosition(INITIAL_POSITION);\n\t\tupdateEndPosition(INITIAL_POSITION);\n\t}, [onMouseMove, root]); // eslint-disable-line react-hooks/exhaustive-deps\n\n\tconst onMouseDown = useCallback(\n\t\t({ clientY, clientX, button }: MouseEvent) => {\n\t\t\tif (button === LEFT_MOUSE_BUTTON_ID) {\n\t\t\t\troot.addEventListener('mousemove', onMouseMove);\n\t\t\t\troot.addEventListener('mouseup', onMouseUp);\n\n\t\t\t\tupdateStartPosition({\n\t\t\t\t\tx: clientX,\n\t\t\t\t\ty: clientY,\n\t\t\t\t});\n\t\t\t}\n\t\t},\n\t\t[onMouseMove, onMouseUp, root], // eslint-disable-line react-hooks/exhaustive-deps\n\t);\n\n\tuseEffect(() => {\n\t\tconst dragContainerElement = root.querySelector(dragContainer);\n\n\t\tif (dragContainerElement) {\n\t\t\tcreateMountingDiv(root);\n\t\t\tdragContainerElement.addEventListener('mousedown', onMouseDown);\n\t\t}\n\n\t\treturn () => {\n\t\t\tif (dragContainerElement) {\n\t\t\t\tdragContainerElement.removeEventListener('mousedown', onMouseDown);\n\t\t\t\tremoveMountingDiv(root);\n\t\t\t}\n\t\t};\n\t}, [dragContainer, onMouseDown, onMouseMove, onMouseUp, root]);\n\n\tuseEffect(() => {\n\t\tconst selectableBoxes = root.querySelectorAll(`[${DATA_ATTRIBUTE_ID}]`);\n\t\tconst _selectedIds = Array.from(selectableBoxes).reduce((boxes: string[], box: Element) => {\n\t\t\tconst selectableBoxRect = getAbsoluteBoundingClientRect(box);\n\n\t\t\tif (\n\t\t\t\tbox instanceof HTMLElement &&\n\t\t\t\tboxesIntersect(selectableBoxRect, debouncedSelectionBoxRect) &&\n\t\t\t\tbox.dataset.dragSelectId\n\t\t\t) {\n\t\t\t\tboxes.push(box.dataset.dragSelectId);\n\t\t\t}\n\n\t\t\treturn boxes;\n\t\t}, []);\n\n\t\tsetSelectedIds(_selectedIds);\n\t}, [debouncedSelectionBoxRect, root]);\n\n\tuseEffect(() => {\n\t\tif (!prevSelectedIds || prevSelectedIds === selectedIds || !isSelectionBoxVisible.current) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst addedIds = selectedIds.filter((selectedId) => !prevSelectedIds.includes(selectedId));\n\t\tconst removedIds = prevSelectedIds.filter(\n\t\t\t(prevSelectedId) => !selectedIds.includes(prevSelectedId),\n\t\t);\n\n\t\tif (addedIds.length) {\n\t\t\tonSelect(addedIds);\n\t\t}\n\n\t\tif (removedIds.length) {\n\t\t\tonDeselect(removedIds);\n\t\t}\n\t}, [selectedIds, prevSelectedIds, onSelect, onDeselect, isSelectionBoxVisible]);\n\n\tconst containerDiv = root.querySelector(`#${CONTAINER_DIV_ID}`);\n\n\tif (!isSelectionBoxVisible.current || !containerDiv) return null;\n\n\treturn createPortal(\n\t\t<div\n\t\t\t{...selectionBoxCustomAttr}\n\t\t\tstyle={\n\t\t\t\tselectionBoxCustomAttr.style\n\t\t\t\t\t? {\n\t\t\t\t\t\t\t...SELECTION_BOX_STYLE,\n\t\t\t\t\t\t\t...selectionBoxCustomAttr.style,\n\t\t\t\t\t\t\t...selectionBoxRect,\n\t\t\t\t\t  }\n\t\t\t\t\t: { ...SELECTION_BOX_STYLE, ...selectionBoxRect }\n\t\t\t}\n\t\t\tdata-testid=\"drag-selection\"\n\t\t/>,\n\t\tcontainerDiv,\n\t);\n};\n\nexport const makeSelectable = ({ id }: { id: string }) => ({\n\t[DATA_ATTRIBUTE_ID]: id,\n});\n\nconst SELECTION_BOX_STYLE: React.CSSProperties = { position: 'absolute', zIndex: 100 };\n\nexport const getSelectionBoxRect = (\n\tstart: Position,\n\tend: Position,\n\trootElement: Element | null,\n): Rect => {\n\tif (!start.x || !start.y || !end.x || !end.y || !rootElement) {\n\t\treturn { left: 0, top: 0, height: 0, width: 0 };\n\t}\n\n\tconst rootRect = rootElement.getBoundingClientRect();\n\n\tconst endX = Math.max(end.x, 0);\n\tlet left = Math.min(start.x, endX);\n\tleft = Math.max(left, rootRect.left + 4);\n\n\tconst top = Math.min(start.y, end.y);\n\tconst height = Math.abs(end.y - start.y);\n\n\tlet width = Math.abs(endX - start.x);\n\tconst maxWidth = rootRect.width + rootRect.left - left - 4;\n\twidth = Math.min(width, maxWidth);\n\n\treturn { left, top, height, width };\n};\n\nconst boxesIntersect = (boxA: Rect, boxB: Rect) =>\n\tboxA.left <= boxB.left + boxB.width &&\n\tboxA.left + boxA.width >= boxB.left &&\n\tboxA.top <= boxB.top + boxB.height &&\n\tboxA.top + boxA.height >= boxB.top;\n\nconst getAbsoluteBoundingClientRect = (element: Element): Rect => {\n\tconst rect = element.getBoundingClientRect();\n\n\treturn {\n\t\tleft: rect.left,\n\t\ttop: rect.top + window.scrollY,\n\t\theight: rect.height,\n\t\twidth: rect.width,\n\t};\n};\n\nconst createMountingDiv = (root: Element) => {\n\tconst mountingDiv = document.createElement('div');\n\tmountingDiv.id = CONTAINER_DIV_ID;\n\troot.appendChild(mountingDiv);\n};\n\nconst removeMountingDiv = (root: Element) => {\n\tconst mountingDiv = root.querySelector(`#${CONTAINER_DIV_ID}`);\n\n\tif (mountingDiv) {\n\t\tmountingDiv.remove();\n\t}\n};\n\nconst usePrevious = <T extends unknown>(value: T): T | undefined => {\n\tconst ref = useRef<T>();\n\tuseEffect(() => {\n\t\tref.current = value;\n\t});\n\n\treturn ref.current;\n};\n"],"names":["INITIAL_POSITION","LEFT_MOUSE_BUTTON_ID","DATA_ATTRIBUTE_ID","CONTAINER_DIV_ID","DRAW_SELECTION_BOX_DEBOUNCE_MS","CALCULATE_INTERSECTIONS_DEBOUNCE_MS","POST_DRAG_DELAY_MS","DragSelect","dragContainer","selectionBoxCustomAttr","onSelect","onDeselect","onDragStart","onDragEnd","startPosition","setStartPosition","useState","endPosition","setEndPosition","debouncedEndPosition","useDebounce","action","setAction","root","useRootElement","selectionBoxRect","React","getSelectionBoxRect","debouncedSelectionBoxRect","selectedIds","setSelectedIds","prevSelectedIds","usePrevious","startPositionRef","useRef","endPositionRef","isSelectionBoxVisible","keysPressed","useEffect","onKeyInteraction","shiftKey","metaKey","newAction","timeoutFunc","updateStartPosition","position","updateIsSelectionBoxVisible","updateEndPosition","onMouseMove","useCallback","clientY","clientX","hasStartPosition","isDragging","onMouseUp","onMouseDown","button","dragContainerElement","createMountingDiv","removeMountingDiv","selectableBoxes","_selectedIds","boxes","box","selectableBoxRect","getAbsoluteBoundingClientRect","boxesIntersect","addedIds","selectedId","removedIds","prevSelectedId","containerDiv","createPortal","jsx","SELECTION_BOX_STYLE","start","end","rootElement","rootRect","endX","left","top","height","width","maxWidth","boxA","boxB","element","rect","mountingDiv","value","ref"],"mappings":"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"}

package/Dropdown.js

@@ -0,0 +1,72 @@
+import { jsxs as l, 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 { DropdownContent as C } from "./DropdownContent.js";
+import { useAssetFilter as A } from "./AssetFilterContext.js";
+function N({
+  buttonKind: t = "clean",
+  direction: c = "Down",
+  isSmall: m,
+  fadeIn: f,
+  isMetapropertyDropdown: u,
+  ...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,
+      {
+        variant: t,
+        isSmall: m,
+        onClick: o,
+        ref: d,
+        isDisabled: n.disabled,
+        isPressed: e,
+        "aria-haspopup": !0,
+        "aria-expanded": e,
+        "aria-controls": s,
+        "data-testid": "button",
+        children: [
+          /* @__PURE__ */ i(k, { title: n.alt, children: n.title }),
+          /* @__PURE__ */ i(S, { $active: e, className: "fa fa-caret-down" })
+        ]
+      }
+    ) }),
+    e && /* @__PURE__ */ i(
+      C,
+      {
+        isPaddingContent: n.isPaddingContent,
+        onClickOutside: o,
+        direction: c,
+        target: d,
+        id: s,
+        isMetapropertyDropdown: u,
+        children: n.children(o)
+      }
+    )
+  ] });
+}
+function b() {
+  return $(
+    () => `dropdownmenu-${Date.now()}-${Math.random().toString(36).substring(2)}`,
+    []
+  );
+}
+const I = r.div`
+	text-transform: inherit;
+	${(t) => t.$fadeIn ? "animation: var(--fade-in-down);" : ""}
+`, S = r.i`
+	margin-left: ${v.spacing3};
+	transition: transform 200ms;
+	${(t) => t.$active ? "transform: rotate(180deg);" : ""}
+`, k = r.span`
+	display: inline-flex;
+	align-items: center;
+`;
+export {
+  N as Dropdown
+};
+//# sourceMappingURL=Dropdown.js.map

package/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sources":["../../src/common/components/dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { Button, token } from '@bynder/design-system';\nimport { DropdownContent } from './DropdownContent';\nimport { useAssetFilter } from '@src/filter/AssetFilterContext';\n\ninterface Props {\n\tclassName?: string;\n\tfadeIn?: boolean;\n\tbuttonKind?: 'clean' | 'secondary';\n\tisSmall?: boolean;\n\tdirection?: 'Down' | 'Up';\n\ttitle: React.ReactNode;\n\talt?: string;\n\tdisabled?: boolean;\n\tisPaddingContent?: boolean;\n\tisMetapropertyDropdown?: boolean;\n\tchildren: (toggle: () => void) => React.ReactNode;\n}\n\nexport function Dropdown({\n\tbuttonKind = 'clean',\n\tdirection = 'Down',\n\tisSmall,\n\tfadeIn,\n\tisMetapropertyDropdown,\n\t...props\n}: Props) {\n\tconst assetFilterState = useAssetFilter();\n\n\tconst menuId = useId();\n\tconst [active, setActive] = useState(false);\n\tconst target = useRef<HTMLButtonElement | null>(null);\n\tconst toggle = () => {\n\t\tsetActive((prevActive) => !prevActive);\n\t\tassetFilterState.setDropdownState(!assetFilterState.isDropdownActive);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<AnimationWrapper $fadeIn={Boolean(fadeIn)}>\n\t\t\t\t<Button\n\t\t\t\t\tvariant={buttonKind}\n\t\t\t\t\tisSmall={isSmall}\n\t\t\t\t\tonClick={toggle}\n\t\t\t\t\tref={target}\n\t\t\t\t\tisDisabled={props.disabled}\n\t\t\t\t\tisPressed={active}\n\t\t\t\t\taria-haspopup\n\t\t\t\t\taria-expanded={active}\n\t\t\t\t\taria-controls={menuId}\n\t\t\t\t\tdata-testid=\"button\"\n\t\t\t\t>\n\t\t\t\t\t<DropdownTitle title={props.alt}>{props.title}</DropdownTitle>\n\t\t\t\t\t<CaretDownArrow $active={active} className=\"fa fa-caret-down\" />\n\t\t\t\t</Button>\n\t\t\t</AnimationWrapper>\n\n\t\t\t{active && (\n\t\t\t\t<DropdownContent\n\t\t\t\t\tisPaddingContent={props.isPaddingContent}\n\t\t\t\t\tonClickOutside={toggle}\n\t\t\t\t\tdirection={direction}\n\t\t\t\t\ttarget={target}\n\t\t\t\t\tid={menuId}\n\t\t\t\t\tisMetapropertyDropdown={isMetapropertyDropdown}\n\t\t\t\t>\n\t\t\t\t\t{props.children(toggle)}\n\t\t\t\t</DropdownContent>\n\t\t\t)}\n\t\t</>\n\t);\n}\n\nfunction useId(): string {\n\treturn useMemo(\n\t\t() => `dropdownmenu-${Date.now()}-${Math.random().toString(36).substring(2)}`,\n\t\t[],\n\t);\n}\n\nconst AnimationWrapper = styled.div<{ $fadeIn: boolean }>`\n\ttext-transform: inherit;\n\t${(p) => (p.$fadeIn ? `animation: var(--fade-in-down);` : '')}\n`;\n\nconst CaretDownArrow = styled.i<{ $active?: boolean }>`\n\tmargin-left: ${token.spacing3};\n\ttransition: transform 200ms;\n\t${(p) => (p.$active ? 'transform: rotate(180deg);' : '')}\n`;\n\nconst DropdownTitle = styled.span`\n\tdisplay: inline-flex;\n\talign-items: center;\n`;\n"],"names":["Dropdown","buttonKind","direction","isSmall","fadeIn","isMetapropertyDropdown","props","assetFilterState","useAssetFilter","menuId","useId","active","setActive","useState","target","useRef","toggle","prevActive","jsxs","Fragment","jsx","AnimationWrapper","Button","DropdownTitle","CaretDownArrow","DropdownContent","useMemo","styled","p","token"],"mappings":";;;;;;AAoBO,SAASA,EAAS;AAAA,EACxB,YAAAC,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,GAAGC;AACJ,GAAU;AACT,QAAMC,IAAmBC,EAAA,GAEnBC,IAASC,EAAA,GACT,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpCC,IAASC,EAAiC,IAAI,GAC9CC,IAAS,MAAM;AACpB,IAAAJ,EAAU,CAACK,MAAe,CAACA,CAAU,GACrCV,EAAiB,iBAAiB,CAACA,EAAiB,gBAAgB;AAAA,EACrE;AAEA,SACC,gBAAAW,EAAAC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAiB,SAAS,EAAQjB,GAClC,UAAA,gBAAAc;AAAA,MAACI;AAAA,MAAA;AAAA,QACA,SAASrB;AAAA,QACT,SAAAE;AAAA,QACA,SAASa;AAAA,QACT,KAAKF;AAAA,QACL,YAAYR,EAAM;AAAA,QAClB,WAAWK;AAAA,QACX,iBAAa;AAAA,QACb,iBAAeA;AAAA,QACf,iBAAeF;AAAA,QACf,eAAY;AAAA,QAEZ,UAAA;AAAA,UAAA,gBAAAW,EAACG,GAAA,EAAc,OAAOjB,EAAM,KAAM,YAAM,OAAM;AAAA,UAC9C,gBAAAc,EAACI,GAAA,EAAe,SAASb,GAAQ,WAAU,mBAAA,CAAmB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEhE;AAAA,IAECA,KACA,gBAAAS;AAAA,MAACK;AAAA,MAAA;AAAA,QACA,kBAAkBnB,EAAM;AAAA,QACxB,gBAAgBU;AAAA,QAChB,WAAAd;AAAA,QACA,QAAAY;AAAA,QACA,IAAIL;AAAA,QACJ,wBAAAJ;AAAA,QAEC,UAAAC,EAAM,SAASU,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EACvB,GAEF;AAEF;AAEA,SAASN,IAAgB;AACxB,SAAOgB;AAAA,IACN,MAAM,gBAAgB,KAAK,IAAA,CAAK,IAAI,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,UAAU,CAAC,CAAC;AAAA,IAC3E,CAAA;AAAA,EAAC;AAEH;AAEA,MAAML,IAAmBM,EAAO;AAAA;AAAA,GAE7B,CAACC,MAAOA,EAAE,UAAU,oCAAoC,EAAG;AAAA,GAGxDJ,IAAiBG,EAAO;AAAA,gBACdE,EAAM,QAAQ;AAAA;AAAA,GAE3B,CAACD,MAAOA,EAAE,UAAU,+BAA+B,EAAG;AAAA,GAGnDL,IAAgBI,EAAO;AAAA;AAAA;AAAA;"}

package/DropdownContent.js

@@ -0,0 +1,59 @@
+import { jsx as b } from "react/jsx-runtime";
+import { useRef as W, useState as y, useLayoutEffect as R } from "react";
+import { createPortal as D } from "react-dom";
+import { styled as H } from "styled-components";
+import { token as k } from "@bynder/design-system";
+import { useClickOutside as O } from "./useClickOutside.js";
+import { useRootElement as P } from "./RootElementContext.js";
+import { concatClasses as S } from "./class.js";
+function U(t) {
+  const n = W(null), [, d] = y(0);
+  O([t.target, n], t.onClickOutside);
+  const i = !!document.querySelector("#compactViewContainer");
+  R(() => {
+    d(
+      t.target.current !== null ? t.target.current.getBoundingClientRect().x : 0
+    );
+  }, [t.target]);
+  const c = P();
+  if (c === null || t.target.current === null)
+    return null;
+  const a = () => t.isMetapropertyDropdown ? i ? "39%" : o < 1120 ? u : 1120 : 300, s = () => {
+    const v = n.current && r + n.current.clientWidth > o ? void 0 : r;
+    return i ? "initial" : v;
+  }, e = t.target.current.getBoundingClientRect(), r = e.x, o = window.innerWidth - 32, u = o - 16, l = 280, m = a(), g = 600, f = s(), x = n.current && r + n.current.clientWidth > o ? 24 : void 0, h = t.direction === "Down" ? e.top + e.height : void 0, w = t.direction === "Up" ? window.innerHeight - e.top : void 0, C = {
+    left: f,
+    right: x,
+    top: h,
+    bottom: w,
+    minWidth: l,
+    maxWidth: m,
+    maxHeight: g
+  }, p = S("cv-root cv-dropdown");
+  return D(
+    /* @__PURE__ */ b(
+      B,
+      {
+        role: "menu",
+        id: t.id,
+        className: p,
+        ref: n,
+        style: C,
+        isPaddingContent: t.isPaddingContent,
+        children: t.children
+      }
+    ),
+    c
+  );
+}
+const B = H.div`
+	padding: ${({ isPaddingContent: t }) => t ? `${k.spacing3} 0` : "0"};
+	user-select: none;
+	border-radius: 6px;
+	border: 1px solid rgba(3, 16, 38, 0.17);
+	box-shadow: 0px 0px 1px 0px rgba(3, 16, 38, 0.1), 0px 8px 12px -2px rgba(3, 16, 38, 0.1);
+`;
+export {
+  U as DropdownContent
+};
+//# sourceMappingURL=DropdownContent.js.map

package/DropdownContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownContent.js","sources":["../../src/common/components/dropdown/DropdownContent.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { styled } from 'styled-components';\nimport { token } from '@bynder/design-system';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { useRootElement } from '../../../style/RootElementContext';\nimport { concatClasses } from '../../../utils/class';\n\ninterface DropdownContentProps {\n\tonClickOutside: () => void;\n\tdirection: 'Down' | 'Up';\n\ttarget: React.MutableRefObject<Element | null>;\n\tchildren: React.ReactNode;\n\tid: string;\n\tisPaddingContent?: boolean;\n\tisMetapropertyDropdown?: boolean;\n}\n\nexport function DropdownContent(props: DropdownContentProps) {\n\tconst overlay = useRef<HTMLDivElement | null>(null);\n\tconst [, setState] = useState(0.0);\n\n\tuseClickOutside([props.target, overlay], props.onClickOutside);\n\n\tconst isCompactViewContainer = !!document.querySelector('#compactViewContainer');\n\n\t// Hack to force recalculation of position after dropdown button rerenders\n\tuseLayoutEffect(() => {\n\t\tsetState(\n\t\t\tprops.target.current !== null ? props.target.current.getBoundingClientRect().x : 0.0,\n\t\t);\n\t}, [props.target]);\n\n\tconst root = useRootElement();\n\n\tif (root === null || props.target.current === null) {\n\t\treturn null;\n\t}\n\n\tconst maxWidthHandler = () => {\n\t\tif (!props.isMetapropertyDropdown) {\n\t\t\treturn 300;\n\t\t}\n\n\t\tif (isCompactViewContainer) {\n\t\t\treturn '39%';\n\t\t}\n\n\t\t// 1120 is max size of dropdown element per designs\n\t\treturn viewportWidth < 1120 ? viewportWidthOffset : 1120;\n\t};\n\n\tconst leftHandler = () => {\n\t\tconst left =\n\t\t\toverlay.current && x + overlay.current.clientWidth > viewportWidth ? undefined : x;\n\n\t\treturn isCompactViewContainer ? 'initial' : left;\n\t};\n\n\tconst boundingRect = props.target.current.getBoundingClientRect();\n\tconst x = boundingRect.x;\n\t// 32 is the padding around the root element\n\tconst viewportWidth = window.innerWidth - 32;\n\t// 16px is to account for offset from edge of modal. Designs have it at 8px on each side.\n\tconst viewportWidthOffset = viewportWidth - 16;\n\n\tconst minWidth = 280;\n\tconst maxWidth = maxWidthHandler();\n\tconst maxHeight = 600;\n\n\tconst left = leftHandler();\n\t// 24 is padding around modal (16px) + 8px from the designs as the dropdown is offset from the edge\n\tconst right =\n\t\toverlay.current && x + overlay.current.clientWidth > viewportWidth ? 24 : undefined;\n\n\tconst top = props.direction === 'Down' ? boundingRect.top + boundingRect.height : undefined;\n\tconst bottom = props.direction === 'Up' ? window.innerHeight - boundingRect.top : undefined;\n\n\tconst style: React.CSSProperties = {\n\t\tleft,\n\t\tright,\n\t\ttop,\n\t\tbottom,\n\t\tminWidth,\n\t\tmaxWidth,\n\t\tmaxHeight,\n\t};\n\tconst className = concatClasses('cv-root cv-dropdown');\n\n\treturn createPortal(\n\t\t<DropdownContentContainer\n\t\t\trole=\"menu\"\n\t\t\tid={props.id}\n\t\t\tclassName={className}\n\t\t\tref={overlay}\n\t\t\tstyle={style}\n\t\t\tisPaddingContent={props.isPaddingContent}\n\t\t>\n\t\t\t{props.children}\n\t\t</DropdownContentContainer>,\n\t\troot,\n\t);\n}\n\nconst DropdownContentContainer = styled.div<{ isPaddingContent?: boolean }>`\n\tpadding: ${({ isPaddingContent }) => (isPaddingContent ? `${token.spacing3} 0` : '0')};\n\tuser-select: none;\n\tborder-radius: 6px;\n\tborder: 1px solid rgba(3, 16, 38, 0.17);\n\tbox-shadow: 0px 0px 1px 0px rgba(3, 16, 38, 0.1), 0px 8px 12px -2px rgba(3, 16, 38, 0.1);\n`;\n"],"names":["DropdownContent","props","overlay","useRef","setState","useState","useClickOutside","isCompactViewContainer","useLayoutEffect","root","useRootElement","maxWidthHandler","viewportWidth","viewportWidthOffset","leftHandler","left","x","boundingRect","minWidth","maxWidth","maxHeight","right","top","bottom","style","className","concatClasses","createPortal","jsx","DropdownContentContainer","styled","isPaddingContent","token"],"mappings":";;;;;;;;AAmBO,SAASA,EAAgBC,GAA6B;AAC5D,QAAMC,IAAUC,EAA8B,IAAI,GAC5C,GAAGC,CAAQ,IAAIC,EAAS,CAAG;AAEjC,EAAAC,EAAgB,CAACL,EAAM,QAAQC,CAAO,GAAGD,EAAM,cAAc;AAE7D,QAAMM,IAAyB,CAAC,CAAC,SAAS,cAAc,uBAAuB;AAG/E,EAAAC,EAAgB,MAAM;AACrB,IAAAJ;AAAA,MACCH,EAAM,OAAO,YAAY,OAAOA,EAAM,OAAO,QAAQ,sBAAA,EAAwB,IAAI;AAAA,IAAA;AAAA,EAEnF,GAAG,CAACA,EAAM,MAAM,CAAC;AAEjB,QAAMQ,IAAOC,EAAA;AAEb,MAAID,MAAS,QAAQR,EAAM,OAAO,YAAY;AAC7C,WAAO;AAGR,QAAMU,IAAkB,MAClBV,EAAM,yBAIPM,IACI,QAIDK,IAAgB,OAAOC,IAAsB,OAR5C,KAWHC,IAAc,MAAM;AACzB,UAAMC,IACLb,EAAQ,WAAWc,IAAId,EAAQ,QAAQ,cAAcU,IAAgB,SAAYI;AAElF,WAAOT,IAAyB,YAAYQ;AAAAA,EAC7C,GAEME,IAAehB,EAAM,OAAO,QAAQ,sBAAA,GACpCe,IAAIC,EAAa,GAEjBL,IAAgB,OAAO,aAAa,IAEpCC,IAAsBD,IAAgB,IAEtCM,IAAW,KACXC,IAAWR,EAAA,GACXS,IAAY,KAEZL,IAAOD,EAAA,GAEPO,IACLnB,EAAQ,WAAWc,IAAId,EAAQ,QAAQ,cAAcU,IAAgB,KAAK,QAErEU,IAAMrB,EAAM,cAAc,SAASgB,EAAa,MAAMA,EAAa,SAAS,QAC5EM,IAAStB,EAAM,cAAc,OAAO,OAAO,cAAcgB,EAAa,MAAM,QAE5EO,IAA6B;AAAA,IAClC,MAAAT;AAAA,IACA,OAAAM;AAAA,IACA,KAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAL;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,GAEKK,IAAYC,EAAc,qBAAqB;AAErD,SAAOC;AAAA,IACN,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,MAAK;AAAA,QACL,IAAI5B,EAAM;AAAA,QACV,WAAAwB;AAAA,QACA,KAAKvB;AAAA,QACL,OAAAsB;AAAA,QACA,kBAAkBvB,EAAM;AAAA,QAEvB,UAAAA,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,IAERQ;AAAA,EAAA;AAEF;AAEA,MAAMoB,IAA2BC,EAAO;AAAA,YAC5B,CAAC,EAAE,kBAAAC,EAAA,MAAwBA,IAAmB,GAAGC,EAAM,QAAQ,OAAO,GAAI;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/DropdownListItem.js

@@ -0,0 +1,52 @@
+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";
+function m({ selected: i = !1, ...t }) {
+  return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ e(
+    c,
+    {
+      type: "button",
+      onClick: t.onClick,
+      role: "menuitemradio",
+      "aria-checked": i,
+      tabIndex: -1,
+      "data-testid": "dropdown-list-item",
+      $isSelected: i,
+      $isFieldSelect: t.isFieldSelect,
+      children: [
+        t.children,
+        i && /* @__PURE__ */ n(l, {})
+      ]
+    }
+  ) });
+}
+const c = r.button`
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+	width: 100%;
+	color: ${(i) => i.$isSelected ? "rgba(0, 34, 51, 0.8);" : "rgba(0, 34, 51, 0.5)"};
+	text-align: left;
+	transition-property: color, background-color, border-color, opacity;
+	transition-timing-function: linear;
+	transition-duration: 0.05s;
+	border: 0 solid rgba(0, 34, 51, 0.1);
+	background-color: transparent;
+	font-size: ${o.fontSize75};
+	padding: ${(i) => i.$isFieldSelect ? `1px ${o.spacing5}` : `${o.spacing3} ${o.spacing4}`};
+
+	&:hover {
+		color: rgba(0, 34, 51, 0.8);
+		background-color: rgba(0, 34, 51, 0.03);
+	}
+`, l = r(a)`
+	margin-left: ${o.spacing4};
+	height: ${o.spacing6};
+	width: ${o.spacing6};
+	animation: fade-in 150ms ease-out;
+`;
+export {
+  m as DropdownListItem
+};
+//# sourceMappingURL=DropdownListItem.js.map

package/DropdownListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownListItem.js","sources":["../../src/common/components/dropdown/DropdownListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { styled } from 'styled-components';\nimport { token } from '@bynder/design-system';\nimport { IconCheck } from '@bynder/icons';\n\ninterface ListItemProps {\n\tclassName?: string;\n\tonClick?: () => void;\n\tselected?: boolean;\n\tchildren: React.ReactNode;\n\tisFieldSelect?: boolean;\n}\n\nexport function DropdownListItem({ selected = false, ...props }: ListItemProps) {\n\treturn (\n\t\t<li>\n\t\t\t<DropdownButton\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={props.onClick}\n\t\t\t\trole=\"menuitemradio\"\n\t\t\t\taria-checked={selected}\n\t\t\t\ttabIndex={-1}\n\t\t\t\tdata-testid=\"dropdown-list-item\"\n\t\t\t\t$isSelected={selected}\n\t\t\t\t$isFieldSelect={props.isFieldSelect}\n\t\t\t>\n\t\t\t\t{props.children}\n\n\t\t\t\t{selected && <CheckIcon />}\n\t\t\t</DropdownButton>\n\t\t</li>\n\t);\n}\n\nconst DropdownButton = styled.button<{ $isSelected: boolean; $isFieldSelect?: boolean }>`\n\tdisplay: flex;\n\talign-items: center;\n\tcursor: pointer;\n\twidth: 100%;\n\tcolor: ${(p) => (p.$isSelected ? 'rgba(0, 34, 51, 0.8);' : 'rgba(0, 34, 51, 0.5)')};\n\ttext-align: left;\n\ttransition-property: color, background-color, border-color, opacity;\n\ttransition-timing-function: linear;\n\ttransition-duration: 0.05s;\n\tborder: 0 solid rgba(0, 34, 51, 0.1);\n\tbackground-color: transparent;\n\tfont-size: ${token.fontSize75};\n\tpadding: ${(p) =>\n\t\tp.$isFieldSelect ? `1px ${token.spacing5}` : `${token.spacing3} ${token.spacing4}`};\n\n\t&:hover {\n\t\tcolor: rgba(0, 34, 51, 0.8);\n\t\tbackground-color: rgba(0, 34, 51, 0.03);\n\t}\n`;\n\nconst CheckIcon = styled(IconCheck)`\n\tmargin-left: ${token.spacing4};\n\theight: ${token.spacing6};\n\twidth: ${token.spacing6};\n\tanimation: fade-in 150ms ease-out;\n`;\n"],"names":["DropdownListItem","selected","props","jsxs","DropdownButton","CheckIcon","styled","p","token","IconCheck"],"mappings":";;;;AAaO,SAASA,EAAiB,EAAE,UAAAC,IAAW,IAAO,GAAGC,KAAwB;AAC/E,2BACE,MAAA,EACA,UAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,MAAK;AAAA,MACL,SAASF,EAAM;AAAA,MACf,MAAK;AAAA,MACL,gBAAcD;AAAA,MACd,UAAU;AAAA,MACV,eAAY;AAAA,MACZ,aAAaA;AAAA,MACb,gBAAgBC,EAAM;AAAA,MAErB,UAAA;AAAA,QAAAA,EAAM;AAAA,QAEND,uBAAaI,GAAA,CAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAE1B;AAEF;AAEA,MAAMD,IAAiBE,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,UAKpB,CAACC,MAAOA,EAAE,cAAc,0BAA0B,sBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAOrEC,EAAM,UAAU;AAAA,YAClB,CAACD,MACXA,EAAE,iBAAiB,OAAOC,EAAM,QAAQ,KAAK,GAAGA,EAAM,QAAQ,IAAIA,EAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ9EH,IAAYC,EAAOG,CAAS;AAAA,gBAClBD,EAAM,QAAQ;AAAA,WACnBA,EAAM,QAAQ;AAAA,UACfA,EAAM,QAAQ;AAAA;AAAA;"}

package/ErrorIcon.js

@@ -0,0 +1,48 @@
+import { jsxs as i, jsx as l } from "react/jsx-runtime";
+function e() {
+  return /* @__PURE__ */ i("svg", { width: "190", height: "130", children: [
+    /* @__PURE__ */ i("defs", { children: [
+      /* @__PURE__ */ i("linearGradient", { id: "prefix__b", x1: "100%", x2: "25.598%", y1: "11.782%", y2: "100%", children: [
+        /* @__PURE__ */ l("stop", { offset: "0%", stopColor: "#F8FAFC" }),
+        /* @__PURE__ */ l("stop", { offset: "100%", stopColor: "#EFF2F4" })
+      ] }),
+      /* @__PURE__ */ l("rect", { id: "prefix__a", width: "190", height: "130", rx: "3" })
+    ] }),
+    /* @__PURE__ */ i("g", { fill: "none", fillRule: "evenodd", children: [
+      /* @__PURE__ */ l("mask", { id: "prefix__c", fill: "#fff", children: /* @__PURE__ */ l("use", { xlinkHref: "#prefix__a" }) }),
+      /* @__PURE__ */ l("use", { fill: "url(#prefix__b)", xlinkHref: "#prefix__a" }),
+      /* @__PURE__ */ i("g", { mask: "url(#prefix__c)", children: [
+        /* @__PURE__ */ l(
+          "path",
+          {
+            fill: "#F5A623",
+            d: "M100.296 45.951l23.01 43.23A6 6 0 01118.009 98H71.991a6 6 0 01-5.297-8.82l23.01-43.229a6 6 0 0110.592 0z"
+          }
+        ),
+        /* @__PURE__ */ l(
+          "path",
+          {
+            fill: "#FFF",
+            fillRule: "nonzero",
+            d: "M93.21 60h3.58a2 2 0 011.99 2.199l-1.6 16A2 2 0 0195.19 80h-.38a2 2 0 01-1.99-1.801l-1.6-16A2 2 0 0193.21 60zM95 84a3 3 0 110 6 3 3 0 010-6z"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ l(
+        "path",
+        {
+          fill: "#EEF1F3",
+          d: "M3 0h184a3 3 0 013 3v13H0V3a3 3 0 013-3z",
+          mask: "url(#prefix__c)"
+        }
+      ),
+      /* @__PURE__ */ l("circle", { cx: "11", cy: "8", r: "3", fill: "#023", fillOpacity: "0.1", mask: "url(#prefix__c)" }),
+      /* @__PURE__ */ l("circle", { cx: "20", cy: "8", r: "3", fill: "#023", fillOpacity: "0.1", mask: "url(#prefix__c)" }),
+      /* @__PURE__ */ l("circle", { cx: "29", cy: "8", r: "3", fill: "#023", fillOpacity: "0.1", mask: "url(#prefix__c)" })
+    ] })
+  ] });
+}
+export {
+  e as ErrorIcon
+};
+//# sourceMappingURL=ErrorIcon.js.map

package/ErrorIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorIcon.js","sources":["../../src/error-handling/ErrorIcon.tsx"],"sourcesContent":["import React from 'react';\n\nexport function ErrorIcon() {\n\treturn (\n\t\t<svg width=\"190\" height=\"130\">\n\t\t\t<defs>\n\t\t\t\t<linearGradient id=\"prefix__b\" x1=\"100%\" x2=\"25.598%\" y1=\"11.782%\" y2=\"100%\">\n\t\t\t\t\t<stop offset=\"0%\" stopColor=\"#F8FAFC\" />\n\t\t\t\t\t<stop offset=\"100%\" stopColor=\"#EFF2F4\" />\n\t\t\t\t</linearGradient>\n\t\t\t\t<rect id=\"prefix__a\" width=\"190\" height=\"130\" rx=\"3\" />\n\t\t\t</defs>\n\t\t\t<g fill=\"none\" fillRule=\"evenodd\">\n\t\t\t\t<mask id=\"prefix__c\" fill=\"#fff\">\n\t\t\t\t\t<use xlinkHref=\"#prefix__a\" />\n\t\t\t\t</mask>\n\t\t\t\t<use fill=\"url(#prefix__b)\" xlinkHref=\"#prefix__a\" />\n\t\t\t\t<g mask=\"url(#prefix__c)\">\n\t\t\t\t\t<path\n\t\t\t\t\t\tfill=\"#F5A623\"\n\t\t\t\t\t\td=\"M100.296 45.951l23.01 43.23A6 6 0 01118.009 98H71.991a6 6 0 01-5.297-8.82l23.01-43.229a6 6 0 0110.592 0z\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\tfill=\"#FFF\"\n\t\t\t\t\t\tfillRule=\"nonzero\"\n\t\t\t\t\t\td=\"M93.21 60h3.58a2 2 0 011.99 2.199l-1.6 16A2 2 0 0195.19 80h-.38a2 2 0 01-1.99-1.801l-1.6-16A2 2 0 0193.21 60zM95 84a3 3 0 110 6 3 3 0 010-6z\"\n\t\t\t\t\t/>\n\t\t\t\t</g>\n\t\t\t\t<path\n\t\t\t\t\tfill=\"#EEF1F3\"\n\t\t\t\t\td=\"M3 0h184a3 3 0 013 3v13H0V3a3 3 0 013-3z\"\n\t\t\t\t\tmask=\"url(#prefix__c)\"\n\t\t\t\t/>\n\t\t\t\t<circle cx=\"11\" cy=\"8\" r=\"3\" fill=\"#023\" fillOpacity=\"0.1\" mask=\"url(#prefix__c)\" />\n\t\t\t\t<circle cx=\"20\" cy=\"8\" r=\"3\" fill=\"#023\" fillOpacity=\"0.1\" mask=\"url(#prefix__c)\" />\n\t\t\t\t<circle cx=\"29\" cy=\"8\" r=\"3\" fill=\"#023\" fillOpacity=\"0.1\" mask=\"url(#prefix__c)\" />\n\t\t\t</g>\n\t\t</svg>\n\t);\n}\n"],"names":["ErrorIcon","jsxs","jsx"],"mappings":";AAEO,SAASA,IAAY;AAC3B,SACC,gBAAAC,EAAC,OAAA,EAAI,OAAM,OAAM,QAAO,OACvB,UAAA;AAAA,IAAA,gBAAAA,EAAC,QAAA,EACA,UAAA;AAAA,MAAA,gBAAAA,EAAC,kBAAA,EAAe,IAAG,aAAY,IAAG,QAAO,IAAG,WAAU,IAAG,WAAU,IAAG,QACrE,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAK,QAAO,MAAK,WAAU,WAAU;AAAA,QACtC,gBAAAA,EAAC,QAAA,EAAK,QAAO,QAAO,WAAU,UAAA,CAAU;AAAA,MAAA,GACzC;AAAA,MACA,gBAAAA,EAAC,UAAK,IAAG,aAAY,OAAM,OAAM,QAAO,OAAM,IAAG,IAAA,CAAI;AAAA,IAAA,GACtD;AAAA,IACA,gBAAAD,EAAC,KAAA,EAAE,MAAK,QAAO,UAAS,WACvB,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAA,EAAK,IAAG,aAAY,MAAK,QACzB,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,aAAA,CAAa,EAAA,CAC7B;AAAA,MACA,gBAAAA,EAAC,OAAA,EAAI,MAAK,mBAAkB,WAAU,cAAa;AAAA,MACnD,gBAAAD,EAAC,KAAA,EAAE,MAAK,mBACP,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,MAAK;AAAA,YACL,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,MAAK;AAAA,YACL,UAAS;AAAA,YACT,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,GACD;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,MAAK;AAAA,UACL,GAAE;AAAA,UACF,MAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAEN,gBAAAA,EAAC,UAAA,EAAO,IAAG,MAAK,IAAG,KAAI,GAAE,KAAI,MAAK,QAAO,aAAY,OAAM,MAAK,mBAAkB;AAAA,MAClF,gBAAAA,EAAC,UAAA,EAAO,IAAG,MAAK,IAAG,KAAI,GAAE,KAAI,MAAK,QAAO,aAAY,OAAM,MAAK,mBAAkB;AAAA,MAClF,gBAAAA,EAAC,UAAA,EAAO,IAAG,MAAK,IAAG,KAAI,GAAE,KAAI,MAAK,QAAO,aAAY,OAAM,MAAK,kBAAA,CAAkB;AAAA,IAAA,EAAA,CACnF;AAAA,EAAA,GACD;AAEF;"}

package/ErrorMessage.js

@@ -0,0 +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 { ErrorIcon as s } from "./ErrorIcon.js";
+function u(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__ */ e(m, { children: [
+      /* @__PURE__ */ r(
+        a,
+        {
+          variant: "secondary",
+          title: t("Send report"),
+          onClick: o.onClickSend,
+          isDisabled: o.isReportSent,
+          children: o.isReportSent ? t("Report sent") : t("Send report...")
+        }
+      ),
+      /* @__PURE__ */ r(a, { variant: "primary", title: t("Try again"), onClick: o.onClickRetry, children: t("Try again") })
+    ] })
+  ] });
+}
+const l = i.h1`
+	margin-top: ${n.spacing8};
+	font-size: ${n.fontSize400};
+`, p = i.span`
+	margin-top: ${n.spacing5};
+	color: ${n.colorTextDisabled};
+`, m = i.div`
+	margin-top: ${n.spacing7};
+	display: flex;
+	gap: ${n.spacing3};
+`;
+export {
+  u as ErrorMessage
+};
+//# sourceMappingURL=ErrorMessage.js.map