@bynder/compact-view 5.1.3 → 5.1.4

package/ErrorMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessage.js","sources":["../../src/error-handling/ErrorMessage.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Button, token } from '@bynder/design-system';\n\nimport { __ } from '../localization';\nimport { ErrorIcon } from './ErrorIcon';\n\nexport function ErrorMessage(props: {\n\tisReportSent: boolean;\n\tonClickSend: () => void;\n\tonClickRetry: () => void;\n}) {\n\treturn (\n\t\t<>\n\t\t\t<ErrorIcon />\n\n\t\t\t<Title>{__('Oops! Something went wrong')}</Title>\n\n\t\t\t<Text>{__('Please try again or get in contact with our customer support.')}</Text>\n\n\t\t\t<ButtonContainer>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\ttitle={__('Send report')}\n\t\t\t\t\tonClick={props.onClickSend}\n\t\t\t\t\tisDisabled={props.isReportSent}\n\t\t\t\t>\n\t\t\t\t\t{props.isReportSent ? __('Report sent') : __('Send report...')}\n\t\t\t\t</Button>\n\n\t\t\t\t<Button variant=\"primary\" title={__('Try again')} onClick={props.onClickRetry}>\n\t\t\t\t\t{__('Try again')}\n\t\t\t\t</Button>\n\t\t\t</ButtonContainer>\n\t\t</>\n\t);\n}\n\nconst Title = styled.h1`\n\tmargin-top: ${token.spacing8};\n\tfont-size: ${token.fontSize400};\n`;\n\nconst Text = styled.span`\n\tmargin-top: ${token.spacing5};\n\tcolor: ${token.colorTextDisabled};\n`;\n\nconst ButtonContainer = styled.div`\n\tmargin-top: ${token.spacing7};\n\tdisplay: flex;\n\tgap: ${token.spacing3};\n`;\n"],"names":["ErrorMessage","props","jsxs","Fragment","jsx","ErrorIcon","Title","__","Text","ButtonContainer","Button","styled","token"],"mappings":";;;;;AAOO,SAASA,EAAaC,GAI1B;AACF,SACC,gBAAAC,EAAAC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAU;AAAA,IAEX,gBAAAD,EAACE,GAAA,EAAO,UAAAC,EAAG,4BAA4B,EAAA,CAAE;AAAA,IAEzC,gBAAAH,EAACI,GAAA,EAAM,UAAAD,EAAG,+DAA+D,EAAA,CAAE;AAAA,sBAE1EE,GAAA,EACA,UAAA;AAAA,MAAA,gBAAAL;AAAA,QAACM;AAAA,QAAA;AAAA,UACA,SAAQ;AAAA,UACR,OAAOH,EAAG,aAAa;AAAA,UACvB,SAASN,EAAM;AAAA,UACf,YAAYA,EAAM;AAAA,UAEjB,YAAM,eAAeM,EAAG,aAAa,IAAIA,EAAG,gBAAgB;AAAA,QAAA;AAAA,MAAA;AAAA,MAG9D,gBAAAH,EAACM,GAAA,EAAO,SAAQ,WAAU,OAAOH,EAAG,WAAW,GAAG,SAASN,EAAM,cAC/D,UAAAM,EAAG,WAAW,EAAA,CAChB;AAAA,IAAA,EAAA,CACD;AAAA,EAAA,GACD;AAEF;AAEA,MAAMD,IAAQK,EAAO;AAAA,eACNC,EAAM,QAAQ;AAAA,cACfA,EAAM,WAAW;AAAA,GAGzBJ,IAAOG,EAAO;AAAA,eACLC,EAAM,QAAQ;AAAA,UACnBA,EAAM,iBAAiB;AAAA,GAG3BH,IAAkBE,EAAO;AAAA,eAChBC,EAAM,QAAQ;AAAA;AAAA,QAErBA,EAAM,QAAQ;AAAA;"}

package/FieldSelect.js

@@ -0,0 +1,74 @@
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import t from "styled-components";
+import { token as l } from "@bynder/design-system";
+import { Dropdown as f } from "./Dropdown.js";
+import { __ as i } from "./index2.js";
+import { useOrderingByPage as p } from "./useOrderingStore.js";
+import { useRouterSelectors as g } from "./useRouterStore.js";
+import { DropdownListItem as u } from "./DropdownListItem.js";
+function R({ options: e }) {
+  const d = g.use.page(), [o, a] = p(d.page), s = {
+    CREATED_AT: i("Date added"),
+    NAME: i("Name"),
+    PUBLISHED_AT: i("Date published"),
+    UPDATED_AT: i("Date modified"),
+    NL_SEARCH: i("Similarity")
+  };
+  return /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(
+    f,
+    {
+      title: /* @__PURE__ */ r(
+        D,
+        {
+          stringOfFieldMap: s,
+          orderingField: e[0] === "NL_SEARCH" ? e[0] : o.field
+        }
+      ),
+      alt: i("Order by"),
+      isPaddingContent: !0,
+      disabled: e[0] === "NL_SEARCH",
+      children: (c) => /* @__PURE__ */ r(S, { children: e.map((n) => /* @__PURE__ */ r(
+        h,
+        {
+          selected: o.field === n,
+          onClick: () => {
+            a({ field: n, direction: o.direction }), c();
+          },
+          isFieldSelect: !0,
+          children: /* @__PURE__ */ r(A, { children: s[n] })
+        },
+        s[n]
+      )) })
+    }
+  ) });
+}
+function D({ stringOfFieldMap: e, orderingField: d }) {
+  return /* @__PURE__ */ m("span", { children: [
+    "Order by",
+    " ",
+    /* @__PURE__ */ r(E, { $isDisabled: d === "NL_SEARCH", children: e[d] })
+  ] });
+}
+const S = t.ul`
+	margin: 0;
+	padding: 0;
+	list-style: none;
+`, h = t(u)`
+	font-size: ${l.fontSize75};
+`, A = t.span`
+	flex-grow: 1;
+	min-width: 96px;
+	padding: ${l.spacing3} 0;
+	font-size: ${l.fontSize75};
+`, b = t.div`
+	margin-left: auto;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #d9dee1;
+`, E = t.strong`
+	font-weight: 600;
+	color: ${(e) => e.$isDisabled ? "rgba(0, 34, 51, 0.5)" : "#212c40"};
+`;
+export {
+  R as FieldSelect
+};
+//# sourceMappingURL=FieldSelect.js.map

package/FieldSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldSelect.js","sources":["../../src/order/FieldSelect.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { token } from '@bynder/design-system';\nimport { Dropdown } from '../common/components/dropdown/Dropdown';\nimport { __ } from '../localization';\nimport { Field, useOrderingByPage } from '@src/store/useOrderingStore';\nimport { useRouterSelectors } from '@src/store/useRouterStore';\nimport { DropdownListItem } from '../common/components/dropdown/DropdownListItem';\n\ninterface FieldProps {\n\toptions: Field[];\n}\n\nexport function FieldSelect({ options }: FieldProps) {\n\tconst page = useRouterSelectors.use.page();\n\tconst [ordering, setOrdering] = useOrderingByPage(page.page);\n\n\tconst stringOfFieldMap = {\n\t\tCREATED_AT: __('Date added'),\n\t\tNAME: __('Name'),\n\t\tPUBLISHED_AT: __('Date published'),\n\t\tUPDATED_AT: __('Date modified'),\n\t\tNL_SEARCH: __('Similarity'),\n\t};\n\n\treturn (\n\t\t<Container>\n\t\t\t<Dropdown\n\t\t\t\ttitle={\n\t\t\t\t\t<Title\n\t\t\t\t\t\tstringOfFieldMap={stringOfFieldMap}\n\t\t\t\t\t\torderingField={options[0] === 'NL_SEARCH' ? options[0] : ordering.field}\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\talt={__('Order by')}\n\t\t\t\tisPaddingContent\n\t\t\t\tdisabled={options[0] === 'NL_SEARCH'}\n\t\t\t>\n\t\t\t\t{(toggle) => (\n\t\t\t\t\t<UnorderedList>\n\t\t\t\t\t\t{options.map((option) => (\n\t\t\t\t\t\t\t<DropdownListItems\n\t\t\t\t\t\t\t\tselected={ordering.field === option}\n\t\t\t\t\t\t\t\tkey={stringOfFieldMap[option]}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tsetOrdering({ field: option, direction: ordering.direction });\n\t\t\t\t\t\t\t\t\ttoggle();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tisFieldSelect\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<DropdownTitle>{stringOfFieldMap[option]}</DropdownTitle>\n\t\t\t\t\t\t\t</DropdownListItems>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</UnorderedList>\n\t\t\t\t)}\n\t\t\t</Dropdown>\n\t\t</Container>\n\t);\n}\n\ninterface TitleProps {\n\tstringOfFieldMap: Readonly<{ [key: string]: string }>;\n\torderingField: string;\n}\n\n// eslint-disable-next-line react/no-multi-comp\nfunction Title({ stringOfFieldMap, orderingField }: TitleProps) {\n\treturn (\n\t\t<span>\n\t\t\tOrder by{' '}\n\t\t\t<Strong $isDisabled={orderingField === 'NL_SEARCH'}>\n\t\t\t\t{stringOfFieldMap[orderingField]}\n\t\t\t</Strong>\n\t\t</span>\n\t);\n}\n\nconst UnorderedList = styled.ul`\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n`;\n\nconst DropdownListItems = styled(DropdownListItem)`\n\tfont-size: ${token.fontSize75};\n`;\n\nconst DropdownTitle = styled.span`\n\tflex-grow: 1;\n\tmin-width: 96px;\n\tpadding: ${token.spacing3} 0;\n\tfont-size: ${token.fontSize75};\n`;\n\nconst Container = styled.div`\n\tmargin-left: auto;\n\tborder-radius: 5px 0 0 5px;\n\tborder: 1px solid #d9dee1;\n`;\n\nconst Strong = styled.strong<{ $isDisabled?: boolean }>`\n\tfont-weight: 600;\n\tcolor: ${(p) => (p.$isDisabled ? 'rgba(0, 34, 51, 0.5)' : '#212c40')};\n`;\n"],"names":["FieldSelect","options","page","useRouterSelectors","ordering","setOrdering","useOrderingByPage","stringOfFieldMap","__","Container","jsx","Dropdown","Title","toggle","UnorderedList","option","DropdownListItems","DropdownTitle","orderingField","Strong","styled","DropdownListItem","token","p"],"mappings":";;;;;;;;AAaO,SAASA,EAAY,EAAE,SAAAC,KAAuB;AACpD,QAAMC,IAAOC,EAAmB,IAAI,KAAA,GAC9B,CAACC,GAAUC,CAAW,IAAIC,EAAkBJ,EAAK,IAAI,GAErDK,IAAmB;AAAA,IACxB,YAAYC,EAAG,YAAY;AAAA,IAC3B,MAAMA,EAAG,MAAM;AAAA,IACf,cAAcA,EAAG,gBAAgB;AAAA,IACjC,YAAYA,EAAG,eAAe;AAAA,IAC9B,WAAWA,EAAG,YAAY;AAAA,EAAA;AAG3B,2BACEC,GAAA,EACA,UAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,OACC,gBAAAD;AAAA,QAACE;AAAA,QAAA;AAAA,UACA,kBAAAL;AAAA,UACA,eAAeN,EAAQ,CAAC,MAAM,cAAcA,EAAQ,CAAC,IAAIG,EAAS;AAAA,QAAA;AAAA,MAAA;AAAA,MAGpE,KAAKI,EAAG,UAAU;AAAA,MAClB,kBAAgB;AAAA,MAChB,UAAUP,EAAQ,CAAC,MAAM;AAAA,MAExB,WAACY,MACD,gBAAAH,EAACI,KACC,UAAAb,EAAQ,IAAI,CAACc,MACb,gBAAAL;AAAA,QAACM;AAAA,QAAA;AAAA,UACA,UAAUZ,EAAS,UAAUW;AAAA,UAE7B,SAAS,MAAM;AACd,YAAAV,EAAY,EAAE,OAAOU,GAAQ,WAAWX,EAAS,WAAW,GAC5DS,EAAA;AAAA,UACD;AAAA,UACA,eAAa;AAAA,UAEb,UAAA,gBAAAH,EAACO,GAAA,EAAe,UAAAV,EAAiBQ,CAAM,EAAA,CAAE;AAAA,QAAA;AAAA,QAPpCR,EAAiBQ,CAAM;AAAA,MAAA,CAS7B,EAAA,CACF;AAAA,IAAA;AAAA,EAAA,GAGH;AAEF;AAQA,SAASH,EAAM,EAAE,kBAAAL,GAAkB,eAAAW,KAA6B;AAC/D,2BACE,QAAA,EAAK,UAAA;AAAA,IAAA;AAAA,IACI;AAAA,sBACRC,GAAA,EAAO,aAAaD,MAAkB,aACrC,UAAAX,EAAiBW,CAAa,EAAA,CAChC;AAAA,EAAA,GACD;AAEF;AAEA,MAAMJ,IAAgBM,EAAO;AAAA;AAAA;AAAA;AAAA,GAMvBJ,IAAoBI,EAAOC,CAAgB;AAAA,cACnCC,EAAM,UAAU;AAAA,GAGxBL,IAAgBG,EAAO;AAAA;AAAA;AAAA,YAGjBE,EAAM,QAAQ;AAAA,cACZA,EAAM,UAAU;AAAA,GAGxBb,IAAYW,EAAO;AAAA;AAAA;AAAA;AAAA,GAMnBD,IAASC,EAAO;AAAA;AAAA,UAEZ,CAACG,MAAOA,EAAE,cAAc,yBAAyB,SAAU;AAAA;"}

package/FileSelector.js

@@ -0,0 +1,239 @@
+import { jsxs as p, jsx as n, Fragment as F } from "react/jsx-runtime";
+import { useState as I, useRef as K, useEffect as D } from "react";
+import a from "styled-components";
+import { IconAspectRatioOutline as B, IconImage as U, IconCrop as E } from "@bynder/icons";
+import { token as o, Badge as R } from "@bynder/design-system";
+import "./AssetCard.js";
+import "./AssetList.js";
+import "./Chip.js";
+import { Dropdown as j } from "./Dropdown.js";
+import { DropdownListItem as b } from "./DropdownListItem.js";
+import "./MetapropertyFilterContent.js";
+import "./MetapropertyOption.js";
+import "./SmartFilterContent.js";
+import "./HorizontalScroll.js";
+import "./InfiniteScroll.js";
+import "./Modal.js";
+import "./NoResults.js";
+import "./Oops.js";
+import "./ShadowRoot.js";
+import { Skeleton as _ } from "./Skeleton.js";
+import "./Spinner.js";
+import { useConfig as N } from "./ConfigContext.js";
+import { DropdownContent as P } from "./DropdownContent.js";
+import { logger as V } from "./logger.js";
+import { useAuth as Y } from "./LoginContext.js";
+import { isErr as H, isOk as M, ok as q, err as G } from "./result.type.js";
+import { getAsset as J } from "./getAsset.js";
+import { getDefaultKey as Q, getUrlExtension as W, splitByCamelCase as $, getHumanReadableFileSize as X } from "./utils2.js";
+import { normalizeFilesResponse as Z } from "./normalizeResponse.js";
+import "./Dat.js";
+import { DatDropdownItem as tt } from "./DatDropdownItem.js";
+import { convertAssetIdToBase64 as et } from "./base64Converter.js";
+import { useDat as it } from "./useDatStore.js";
+import { useSimilaritySearchStore as rt } from "./useSimilaritySearchStore.js";
+async function nt(s) {
+  const { asset: m, auth: e, assetFieldSelection: f, noCache: S, isSimilaritySelected: g } = s, l = await J({
+    assetId: g ? et(m.id) : m.id,
+    auth: e,
+    assetFieldSelection: f,
+    noCache: S
+  });
+  if (M(l) && l.value.files) {
+    const w = Z(l.value.files), v = l.value.streamingLinks;
+    return q({ files: w, databaseId: l.value.databaseId || "", streamingLinks: v });
+  }
+  return G("Error retrieving asset files");
+}
+const y = "Custom transformation", c = "adaptiveVideo";
+function Qt({ asset: s, onChange: m }) {
+  const [e, f] = I({ status: "Loading" }), [S, g] = I(!1), l = K(null), w = Y(), { isSelected: v, NLSSearchText: L, isNLSSelected: T } = rt(), { assetFieldSelection: A, noCache: O, __shouldAddOriginal__: z } = N(), { transformation: h } = it();
+  D(() => {
+    if (h?.url && e.status === "Data") {
+      const i = h.url !== e.files?.transformBaseUrl?.url;
+      x(i ? y : "transformBaseUrl");
+    }
+  }, [h]), D(() => {
+    e.status === "Data" && e.key !== c && g(!1);
+  }, [e]), D(() => {
+    s.id && (f({ status: "Loading" }), m(void 0), nt({
+      asset: s,
+      auth: w,
+      assetFieldSelection: A,
+      noCache: O,
+      isSimilaritySelected: v || !!L && T
+    }).then((i) => {
+      if (H(i)) {
+        V.error(i.error), f({ status: "Failure" });
+        return;
+      }
+      const { files: r, streamingLinks: t } = i.value;
+      z && !("original" in r) && (r.original = {
+        url: i.value.databaseId,
+        isFakeOriginal: !0
+      }), t && Object.keys(t).length > 0 && (r[c] = {
+        url: "Adaptive video"
+      });
+      const d = Q(r), u = Object.keys(t || {})[0];
+      f({
+        status: "Data",
+        files: r,
+        key: d,
+        streamingLinks: t,
+        selectedAdaptiveKey: u
+      }), m(d === c && t ? { url: t[u] } : r[d]);
+    }));
+  }, [s.id, w, A]);
+  function x(i, r) {
+    f((t) => {
+      if (t.status !== "Data")
+        return t;
+      const C = { ...t, key: i };
+      let d;
+      if (i === y && h)
+        d = { url: h.url };
+      else if (i === c) {
+        const u = r || t.selectedAdaptiveKey;
+        u && t.streamingLinks && (d = { url: t.streamingLinks[u] }, C.selectedAdaptiveKey = u, g(!r));
+      } else
+        d = t.files[i];
+      return setTimeout(() => m(d)), C;
+    });
+  }
+  return /* @__PURE__ */ p(st, { children: [
+    /* @__PURE__ */ n(
+      j,
+      {
+        title: /* @__PURE__ */ n(ot, { state: e }),
+        buttonKind: "secondary",
+        isPaddingContent: !0,
+        direction: "Up",
+        disabled: e.status === "Loading",
+        children: (i) => e.status === "Data" && /* @__PURE__ */ p(k, { children: [
+          Object.entries(e.files).map(([r, t]) => /* @__PURE__ */ p(
+            b,
+            {
+              selected: e.key === r,
+              onClick: () => {
+                x(r), r !== c && i();
+              },
+              children: [
+                /* @__PURE__ */ n(lt, { "data-testid": "file-extension", children: r === "transformBaseUrl" ? /* @__PURE__ */ n(dt, {}) : W(t.url) ?? /* @__PURE__ */ n(ct, {}) }),
+                /* @__PURE__ */ p(mt, { children: [
+                  /* @__PURE__ */ p(pt, { children: [
+                    $(r),
+                    r === c && e.selectedAdaptiveKey && /* @__PURE__ */ n(gt, { children: /* @__PURE__ */ n(R, { isSmall: !0, color: "black-alpha", children: e.selectedAdaptiveKey.toUpperCase() }) })
+                  ] }),
+                  /* @__PURE__ */ p(ft, { children: [
+                    t.width && t.height && `${t.width} x ${t.height} px`,
+                    t.width && t.height && t.fileSize && /* @__PURE__ */ n("span", { children: "•" }),
+                    t.fileSize && X(t.fileSize)
+                  ] })
+                ] })
+              ]
+            },
+            r
+          )),
+          /* @__PURE__ */ n(
+            tt,
+            {
+              transformBaseUrl: e.files?.transformBaseUrl?.url,
+              toggleDropdown: i,
+              asset: s
+            }
+          )
+        ] })
+      }
+    ),
+    e.status === "Data" && e.key === c && /* @__PURE__ */ n(ut, { ref: l, children: S && /* @__PURE__ */ n(
+      P,
+      {
+        isPaddingContent: !0,
+        onClickOutside: () => g(!1),
+        direction: "Up",
+        target: l,
+        "data-testid": "streaming-links-dropdown",
+        id: "streaming-links-dropdown",
+        children: /* @__PURE__ */ n(k, { children: Object.keys(e.streamingLinks || {}).map((i) => /* @__PURE__ */ n(
+          b,
+          {
+            selected: e.selectedAdaptiveKey === i,
+            onClick: () => x(c, i),
+            children: i.toUpperCase()
+          },
+          i
+        )) })
+      }
+    ) })
+  ] });
+}
+function ot({ state: s }) {
+  return s.status === "Loading" ? /* @__PURE__ */ n(_, { width: 50 }) : s.status === "Data" ? /* @__PURE__ */ p(at, { children: [
+    s.key === y && /* @__PURE__ */ n(E, {}),
+    $(s.key)
+  ] }) : /* @__PURE__ */ n(F, { children: "Error" });
+}
+const st = a.div`
+	display: flex;
+	gap: ${o.spacing2};
+	margin-right: ${o.spacing3};
+	text-transform: capitalize;
+	position: relative;
+`, at = a.div`
+	display: flex;
+	gap: ${o.spacing4};
+	align-items: center;
+`, k = a.ul`
+	max-height: 400px;
+	overflow-y: auto;
+	padding: 0 0 ${o.spacing3} 0;
+	list-style: none;
+	margin: 0;
+`, lt = a.div`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: rgba(0, 34, 51, 0.5);
+	font-size: ${o.fontSize50};
+	height: ${o.spacing8};
+	width: ${o.spacing8};
+	text-transform: uppercase;
+	font-weight: 600;
+	border-radius: 5px;
+	background-color: rgba(0, 34, 51, 0.05);
+	margin-right: ${o.spacing4};
+`, dt = a(B)`
+	height: ${o.spacing6};
+	width: ${o.spacing6};
+`, ct = a(U)`
+	height: ${o.spacing6};
+	width: ${o.spacing6};
+`, mt = a.div`
+	flex-grow: 1;
+	width: 160px;
+`, pt = a.div`
+	text-transform: capitalize;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	color: rgba(0, 34, 51, 0.8);
+`, ft = a.div`
+	font-size: ${o.fontSize75};
+
+	& > span {
+		margin: 0 ${o.spacing3};
+	}
+`, gt = a.span`
+	margin-left: ${o.spacing2};
+	display: inline-flex;
+	vertical-align: middle;
+`, ut = a.div`
+	position: absolute;
+	left: -280px;
+	top: 0;
+	z-index: 1000;
+`;
+export {
+  Qt as FileSelector
+};
+//# sourceMappingURL=FileSelector.js.map

package/FileSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileSelector.js","sources":["../../src/select/FileSelector.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { IconAspectRatioOutline, IconCrop, IconImage } from '@bynder/icons';\nimport { Badge, token } from '@bynder/design-system';\n\nimport { DropdownListItem } from '../Components';\nimport { useConfig } from '../app-config/ConfigContext';\nimport { Dropdown } from '../common/components/dropdown/Dropdown';\nimport { DropdownContent } from '../common/components/dropdown/DropdownContent';\nimport { logger } from '../utils/logger';\nimport { useAuth } from '../login/LoginContext';\nimport { Skeleton } from '../common/components/Skeleton';\nimport { Asset } from '../views/asset/asset.type';\nimport { err, isErr, isOk, ok, Result } from '../auth/result.type';\nimport { File } from './file.type';\nimport { getAsset, StreamingLinks } from '../api/getAsset';\nimport {\n\tgetDefaultKey,\n\tgetHumanReadableFileSize,\n\tgetUrlExtension,\n\tsplitByCamelCase,\n} from './utils';\nimport { normalizeFilesResponse } from '@src/utils/normalizeResponse';\nimport { AuthInformationState } from '../auth/useAuthInformation';\nimport { DatDropdownItem } from '../Dat';\nimport { convertAssetIdToBase64 } from '@src/utils/base64Converter';\nimport { State } from './types';\nimport { useDat } from '@src/store/useDatStore';\nimport { useSimilaritySearchStore } from '@src/store/useSimilaritySearchStore';\n\ntype returnFilesType = {\n\tfiles: Record<string, File>;\n\tdatabaseId: string;\n\tstreamingLinks?: StreamingLinks;\n};\n\nasync function getFiles(options: {\n\tasset: Asset;\n\tauth: AuthInformationState | null;\n\tassetFieldSelection?: string;\n\tisSimilaritySelected: boolean;\n\tnoCache?: boolean;\n}): Promise<Result<returnFilesType, string>> {\n\tconst { asset, auth, assetFieldSelection, noCache, isSimilaritySelected } = options;\n\n\tconst result = await getAsset({\n\t\tassetId: isSimilaritySelected ? convertAssetIdToBase64(asset.id) : asset.id,\n\t\tauth,\n\t\tassetFieldSelection,\n\t\tnoCache,\n\t});\n\n\tif (isOk(result) && result.value.files) {\n\t\tconst files = normalizeFilesResponse(result.value.files);\n\t\tconst streamingLinks = result.value.streamingLinks;\n\n\t\treturn ok({ files, databaseId: result.value.databaseId || '', streamingLinks });\n\t}\n\n\treturn err('Error retrieving asset files');\n}\n\ninterface Props {\n\treadonly asset: Asset;\n\treadonly onChange: (file: File | undefined) => void;\n}\n\nconst TRANSFORMATION_KEY = 'Custom transformation';\nconst ADAPTIVE_VIDEO_KEY = 'adaptiveVideo';\n\nexport function FileSelector({ asset, onChange }: Props) {\n\tconst [state, setState] = useState<State>({ status: 'Loading' });\n\tconst [isStreamingDropdownOpen, setIsStreamingDropdownOpen] = useState(false);\n\tconst dropdownRef = useRef<HTMLDivElement>(null);\n\tconst auth = useAuth();\n\tconst { isSelected, NLSSearchText, isNLSSelected } = useSimilaritySearchStore();\n\tconst { assetFieldSelection, noCache, __shouldAddOriginal__ } = useConfig();\n\tconst { transformation } = useDat();\n\n\tuseEffect(() => {\n\t\tif (transformation?.url && state.status === 'Data') {\n\t\t\tconst isTransformed = transformation.url !== state.files?.transformBaseUrl?.url;\n\t\t\tselectFile(isTransformed ? TRANSFORMATION_KEY : 'transformBaseUrl');\n\t\t}\n\t}, [transformation]); // eslint-disable-line react-hooks/exhaustive-deps\n\n\t// Close dropdown when not on ADAPTIVE_VIDEO_KEY\n\tuseEffect(() => {\n\t\tif (state.status === 'Data' && state.key !== ADAPTIVE_VIDEO_KEY) {\n\t\t\tsetIsStreamingDropdownOpen(false);\n\t\t}\n\t}, [state]);\n\n\tuseEffect(() => {\n\t\tif (!asset.id) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetState({ status: 'Loading' });\n\t\tonChange(undefined);\n\n\t\tgetFiles({\n\t\t\tasset,\n\t\t\tauth,\n\t\t\tassetFieldSelection,\n\t\t\tnoCache,\n\t\t\tisSimilaritySelected: isSelected || (Boolean(NLSSearchText) && isNLSSelected),\n\t\t}).then((result) => {\n\t\t\tif (isErr(result)) {\n\t\t\t\tlogger.error(result.error);\n\t\t\t\tsetState({ status: 'Failure' });\n\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst { files, streamingLinks } = result.value;\n\n\t\t\tif (__shouldAddOriginal__ && !('original' in files)) {\n\t\t\t\tfiles.original = {\n\t\t\t\t\turl: result.value.databaseId,\n\t\t\t\t\tisFakeOriginal: true,\n\t\t\t\t};\n\t\t\t}\n\n\t\t\tconst hasStreamingLinks = streamingLinks && Object.keys(streamingLinks).length > 0;\n\n\t\t\tif (hasStreamingLinks) {\n\t\t\t\tfiles[ADAPTIVE_VIDEO_KEY] = {\n\t\t\t\t\turl: 'Adaptive video',\n\t\t\t\t};\n\t\t\t}\n\n\t\t\tconst defaultKey = getDefaultKey(files) as string;\n\n\t\t\tconst selectedAdaptiveKey = Object.keys(streamingLinks || {})[0];\n\n\t\t\tsetState({\n\t\t\t\tstatus: 'Data',\n\t\t\t\tfiles,\n\t\t\t\tkey: defaultKey,\n\t\t\t\tstreamingLinks,\n\t\t\t\tselectedAdaptiveKey,\n\t\t\t});\n\n\t\t\tif (defaultKey === ADAPTIVE_VIDEO_KEY && streamingLinks) {\n\t\t\t\tonChange({ url: streamingLinks[selectedAdaptiveKey] });\n\t\t\t} else {\n\t\t\t\tonChange(files[defaultKey]);\n\t\t\t}\n\t\t});\n\t}, [asset.id, auth, assetFieldSelection]); // eslint-disable-line react-hooks/exhaustive-deps\n\n\tfunction selectFile(key: string, adaptiveKey?: string) {\n\t\tsetState((prevState) => {\n\t\t\tif (prevState.status !== 'Data') {\n\t\t\t\treturn prevState;\n\t\t\t}\n\n\t\t\tconst newState: State = { ...prevState, key };\n\t\t\tlet fileToSelect: File | undefined;\n\n\t\t\tif (key === TRANSFORMATION_KEY && transformation) {\n\t\t\t\tfileToSelect = { url: transformation.url };\n\t\t\t} else if (key === ADAPTIVE_VIDEO_KEY) {\n\t\t\t\tconst newAdaptiveKey = adaptiveKey || prevState.selectedAdaptiveKey;\n\n\t\t\t\tif (newAdaptiveKey && prevState.streamingLinks) {\n\t\t\t\t\tfileToSelect = { url: prevState.streamingLinks[newAdaptiveKey] };\n\t\t\t\t\tnewState.selectedAdaptiveKey = newAdaptiveKey;\n\n\t\t\t\t\t// Close the dropdown if an adaptive key was selected\n\t\t\t\t\tif (adaptiveKey) {\n\t\t\t\t\t\tsetIsStreamingDropdownOpen(false);\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Open the dropdown if ADAPTIVE_VIDEO_KEY was selected in the main dropdown\n\t\t\t\t\t\tsetIsStreamingDropdownOpen(true);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tfileToSelect = prevState.files[key];\n\t\t\t}\n\n\t\t\tsetTimeout(() => onChange(fileToSelect));\n\n\t\t\treturn newState;\n\t\t});\n\t}\n\n\treturn (\n\t\t<Container>\n\t\t\t<Dropdown\n\t\t\t\ttitle={<Title state={state} />}\n\t\t\t\tbuttonKind=\"secondary\"\n\t\t\t\tisPaddingContent\n\t\t\t\tdirection=\"Up\"\n\t\t\t\tdisabled={state.status === 'Loading'}\n\t\t\t>\n\t\t\t\t{(toggle) =>\n\t\t\t\t\tstate.status === 'Data' && (\n\t\t\t\t\t\t<ListContainer>\n\t\t\t\t\t\t\t{Object.entries(state.files).map(([key, file]) => (\n\t\t\t\t\t\t\t\t<DropdownListItem\n\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\tselected={state.key === key}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tselectFile(key);\n\n\t\t\t\t\t\t\t\t\t\tif (key !== ADAPTIVE_VIDEO_KEY) {\n\t\t\t\t\t\t\t\t\t\t\ttoggle();\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TransformImageContainer data-testid=\"file-extension\">\n\t\t\t\t\t\t\t\t\t\t{key === 'transformBaseUrl' ? (\n\t\t\t\t\t\t\t\t\t\t\t<AspectRatioIcon />\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\tgetUrlExtension(file.url) ?? <ImageIcon />\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</TransformImageContainer>\n\t\t\t\t\t\t\t\t\t<TransformContentContainer>\n\t\t\t\t\t\t\t\t\t\t<TransformContentTitle>\n\t\t\t\t\t\t\t\t\t\t\t{splitByCamelCase(key)}\n\t\t\t\t\t\t\t\t\t\t\t{key === ADAPTIVE_VIDEO_KEY &&\n\t\t\t\t\t\t\t\t\t\t\t\tstate.selectedAdaptiveKey && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<BadgeContainer>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Badge isSmall color=\"black-alpha\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{state.selectedAdaptiveKey.toUpperCase()}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</BadgeContainer>\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</TransformContentTitle>\n\t\t\t\t\t\t\t\t\t\t<TransformContentSubtitle>\n\t\t\t\t\t\t\t\t\t\t\t{file.width &&\n\t\t\t\t\t\t\t\t\t\t\t\tfile.height &&\n\t\t\t\t\t\t\t\t\t\t\t\t`${file.width} x ${file.height} px`}\n\n\t\t\t\t\t\t\t\t\t\t\t{file.width && file.height && file.fileSize && (\n\t\t\t\t\t\t\t\t\t\t\t\t<span>•</span>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t\t\t\t{file.fileSize &&\n\t\t\t\t\t\t\t\t\t\t\t\tgetHumanReadableFileSize(file.fileSize)}\n\t\t\t\t\t\t\t\t\t\t</TransformContentSubtitle>\n\t\t\t\t\t\t\t\t\t</TransformContentContainer>\n\t\t\t\t\t\t\t\t</DropdownListItem>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t<DatDropdownItem\n\t\t\t\t\t\t\t\ttransformBaseUrl={state.files?.transformBaseUrl?.url}\n\t\t\t\t\t\t\t\ttoggleDropdown={toggle}\n\t\t\t\t\t\t\t\tasset={asset}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ListContainer>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t</Dropdown>\n\t\t\t{state.status === 'Data' && state.key === ADAPTIVE_VIDEO_KEY && (\n\t\t\t\t<PositionedAdaptiveDropdown ref={dropdownRef}>\n\t\t\t\t\t{isStreamingDropdownOpen && (\n\t\t\t\t\t\t<DropdownContent\n\t\t\t\t\t\t\tisPaddingContent\n\t\t\t\t\t\t\tonClickOutside={() => setIsStreamingDropdownOpen(false)}\n\t\t\t\t\t\t\tdirection=\"Up\"\n\t\t\t\t\t\t\ttarget={dropdownRef}\n\t\t\t\t\t\t\tdata-testid=\"streaming-links-dropdown\"\n\t\t\t\t\t\t\tid=\"streaming-links-dropdown\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ListContainer>\n\t\t\t\t\t\t\t\t{Object.keys(state.streamingLinks || {}).map((key) => (\n\t\t\t\t\t\t\t\t\t<DropdownListItem\n\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\tselected={state.selectedAdaptiveKey === key}\n\t\t\t\t\t\t\t\t\t\tonClick={() => selectFile(ADAPTIVE_VIDEO_KEY, key)}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{key.toUpperCase()}\n\t\t\t\t\t\t\t\t\t</DropdownListItem>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</ListContainer>\n\t\t\t\t\t\t</DropdownContent>\n\t\t\t\t\t)}\n\t\t\t\t</PositionedAdaptiveDropdown>\n\t\t\t)}\n\t\t</Container>\n\t);\n}\n\n// eslint-disable-next-line react/no-multi-comp\nfunction Title({ state }: { readonly state: State }) {\n\tif (state.status === 'Loading') {\n\t\treturn <Skeleton width={50} />;\n\t} else if (state.status === 'Data') {\n\t\treturn (\n\t\t\t<TitleContainer>\n\t\t\t\t{state.key === TRANSFORMATION_KEY && <IconCrop />}\n\t\t\t\t{splitByCamelCase(state.key)}\n\t\t\t</TitleContainer>\n\t\t);\n\t}\n\n\treturn <>Error</>;\n}\n\nconst Container = styled.div`\n\tdisplay: flex;\n\tgap: ${token.spacing2};\n\tmargin-right: ${token.spacing3};\n\ttext-transform: capitalize;\n\tposition: relative;\n`;\n\nconst TitleContainer = styled.div`\n\tdisplay: flex;\n\tgap: ${token.spacing4};\n\talign-items: center;\n`;\n\nconst ListContainer = styled.ul`\n\tmax-height: 400px;\n\toverflow-y: auto;\n\tpadding: 0 0 ${token.spacing3} 0;\n\tlist-style: none;\n\tmargin: 0;\n`;\n\nconst TransformImageContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcolor: rgba(0, 34, 51, 0.5);\n\tfont-size: ${token.fontSize50};\n\theight: ${token.spacing8};\n\twidth: ${token.spacing8};\n\ttext-transform: uppercase;\n\tfont-weight: 600;\n\tborder-radius: 5px;\n\tbackground-color: rgba(0, 34, 51, 0.05);\n\tmargin-right: ${token.spacing4};\n`;\n\nconst AspectRatioIcon = styled(IconAspectRatioOutline)`\n\theight: ${token.spacing6};\n\twidth: ${token.spacing6};\n`;\n\nconst ImageIcon = styled(IconImage)`\n\theight: ${token.spacing6};\n\twidth: ${token.spacing6};\n`;\n\nconst TransformContentContainer = styled.div`\n\tflex-grow: 1;\n\twidth: 160px;\n`;\n\nconst TransformContentTitle = styled.div`\n\ttext-transform: capitalize;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\tcolor: rgba(0, 34, 51, 0.8);\n`;\n\nconst TransformContentSubtitle = styled.div`\n\tfont-size: ${token.fontSize75};\n\n\t& > span {\n\t\tmargin: 0 ${token.spacing3};\n\t}\n`;\n\nconst BadgeContainer = styled.span`\n\tmargin-left: ${token.spacing2};\n\tdisplay: inline-flex;\n\tvertical-align: middle;\n`;\n\nconst PositionedAdaptiveDropdown = styled.div`\n\tposition: absolute;\n\tleft: -280px;\n\ttop: 0;\n\tz-index: 1000;\n`;\n"],"names":["getFiles","options","asset","auth","assetFieldSelection","noCache","isSimilaritySelected","result","getAsset","convertAssetIdToBase64","isOk","files","normalizeFilesResponse","streamingLinks","ok","err","TRANSFORMATION_KEY","ADAPTIVE_VIDEO_KEY","FileSelector","onChange","state","setState","useState","isStreamingDropdownOpen","setIsStreamingDropdownOpen","dropdownRef","useRef","useAuth","isSelected","NLSSearchText","isNLSSelected","useSimilaritySearchStore","__shouldAddOriginal__","useConfig","transformation","useDat","useEffect","isTransformed","selectFile","isErr","logger","defaultKey","getDefaultKey","selectedAdaptiveKey","key","adaptiveKey","prevState","newState","fileToSelect","newAdaptiveKey","Container","jsx","Dropdown","Title","toggle","ListContainer","file","jsxs","DropdownListItem","TransformImageContainer","AspectRatioIcon","getUrlExtension","ImageIcon","TransformContentContainer","TransformContentTitle","splitByCamelCase","BadgeContainer","Badge","TransformContentSubtitle","getHumanReadableFileSize","DatDropdownItem","PositionedAdaptiveDropdown","DropdownContent","Skeleton","TitleContainer","IconCrop","styled","token","IconAspectRatioOutline","IconImage"],"mappings":"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"}

package/Header.js

@@ -0,0 +1,42 @@
+import { jsxs as a, Fragment as r, jsx as t } from "react/jsx-runtime";
+import { __ as e } from "./index2.js";
+function n() {
+  return /* @__PURE__ */ a(r, { children: [
+    /* @__PURE__ */ t(
+      "svg",
+      {
+        viewBox: "0 0 479.438 361.46",
+        className: "w-10 mb-8",
+        style: { width: 40, marginBottom: 32 },
+        children: /* @__PURE__ */ t(
+          "path",
+          {
+            d: `
+						M365.18 0a114 114 0 00-85.9 38.93l-153.18 153-43.82-43.84a45.18 45.18
+						0 01-11.54-30.75 46.06 46.06 0 0146.34-46.08 44.81 44.81 0 0130.42
+						11.49c2.73 2.42 10.48 10.43 10.48 10.43l48.5-48.51-14-14C172.19 11.43
+						144.48.03 114.3.03 51.24.03 0 51.03 0 114.1a115.08 115.08 0 0028.09
+						75.46l98.35 98.77 205.53-205.5a44.78 44.78 0 0130.58-11.57 46.07 46.07 0
+						0146.06 46.43 45.07 45.07 0 01-11.52 30.5l-136.6 136.57a28.73 28.73 0
+						01-20.83 8.58 28.29 28.29 0 01-20.51-8.92l-10.27-10.16-48.28 48.28 9.88
+						9.72a97.06 97.06 0 0069.38 29.2h.07a96 96 0
+						0069-29.13l142.35-142.67A114.47 114.47 0 00365.18 0z`,
+            fill: "#0af"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ t(
+      "h1",
+      {
+        className: "text-xl mb-2",
+        style: { fontSize: 20, margin: 0, marginBottom: 8, fontWeight: 400 },
+        children: e("Connect your brand portal")
+      }
+    )
+  ] });
+}
+export {
+  n as Header
+};
+//# sourceMappingURL=Header.js.map

package/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sources":["../../src/login/components/Header.tsx"],"sourcesContent":["import React from 'react';\nimport { __ } from '../../localization';\n\nexport function Header() {\n\treturn (\n\t\t<>\n\t\t\t<svg\n\t\t\t\tviewBox=\"0 0 479.438 361.46\"\n\t\t\t\tclassName=\"w-10 mb-8\"\n\t\t\t\tstyle={{ width: 40, marginBottom: 32 }}\n\t\t\t>\n\t\t\t\t<path\n\t\t\t\t\td={`\n\t\t\t\t\t\tM365.18 0a114 114 0 00-85.9 38.93l-153.18 153-43.82-43.84a45.18 45.18\n\t\t\t\t\t\t0 01-11.54-30.75 46.06 46.06 0 0146.34-46.08 44.81 44.81 0 0130.42\n\t\t\t\t\t\t11.49c2.73 2.42 10.48 10.43 10.48 10.43l48.5-48.51-14-14C172.19 11.43\n\t\t\t\t\t\t144.48.03 114.3.03 51.24.03 0 51.03 0 114.1a115.08 115.08 0 0028.09\n\t\t\t\t\t\t75.46l98.35 98.77 205.53-205.5a44.78 44.78 0 0130.58-11.57 46.07 46.07 0\n\t\t\t\t\t\t0146.06 46.43 45.07 45.07 0 01-11.52 30.5l-136.6 136.57a28.73 28.73 0\n\t\t\t\t\t\t01-20.83 8.58 28.29 28.29 0 01-20.51-8.92l-10.27-10.16-48.28 48.28 9.88\n\t\t\t\t\t\t9.72a97.06 97.06 0 0069.38 29.2h.07a96 96 0\n\t\t\t\t\t\t0069-29.13l142.35-142.67A114.47 114.47 0 00365.18 0z`}\n\t\t\t\t\tfill=\"#0af\"\n\t\t\t\t/>\n\t\t\t</svg>\n\n\t\t\t<h1\n\t\t\t\tclassName=\"text-xl mb-2\"\n\t\t\t\tstyle={{ fontSize: 20, margin: 0, marginBottom: 8, fontWeight: 400 }}\n\t\t\t>\n\t\t\t\t{__('Connect your brand portal')}\n\t\t\t</h1>\n\t\t</>\n\t);\n}\n"],"names":["Header","jsxs","Fragment","jsx"],"mappings":";;AAGO,SAASA,IAAS;AACxB,SACC,gBAAAC,EAAAC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,OAAO,EAAE,OAAO,IAAI,cAAc,GAAA;AAAA,QAElC,UAAA,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAUH,MAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,IAGD,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAO,EAAE,UAAU,IAAI,QAAQ,GAAG,cAAc,GAAG,YAAY,IAAA;AAAA,QAE9D,YAAG,2BAA2B;AAAA,MAAA;AAAA,IAAA;AAAA,EAChC,GACD;AAEF;"}

package/HorizontalScroll.js

@@ -0,0 +1,51 @@
+import { jsxs as x, jsx as n } from "react/jsx-runtime";
+import { useState as g, useRef as b, useEffect as f } from "react";
+import { styled as d } from "styled-components";
+import { token as h } from "@bynder/design-system";
+import { useDimensions as p } from "./useDimensions.js";
+import { RightArrow as A } from "./RightArrow.js";
+import { LeftArrow as $ } from "./LeftArrow.js";
+function W(r) {
+  const [e, c] = g(0), t = b(null), { dimensions: s, remeasure: m } = p(t.current), o = t.current !== null ? t.current.scrollWidth - t.current.clientWidth : 0, l = s !== void 0 ? Math.ceil(s.width) < s.scrollWidth : !1;
+  f(() => {
+    m(t.current);
+  }, [r.children, t.current]), f(() => {
+    l || c(0);
+  }, [l]);
+  const u = e === 0, S = o > 5 && e !== o;
+  function w() {
+    c((a) => {
+      const i = Math.max(a - 250, 0);
+      return i >= 100 ? i : 0;
+    });
+  }
+  function v() {
+    c((a) => {
+      const i = Math.min(a + 250, o);
+      return i <= o - 100 ? i : o;
+    });
+  }
+  return /* @__PURE__ */ x(z, { $isActiveFilter: r.isActiveFilter, children: [
+    /* @__PURE__ */ n(C, { ref: t, children: /* @__PURE__ */ n(D, { "data-testid": "horizontal-scrollable-el", $scroll: e, children: r.children }) }),
+    l && /* @__PURE__ */ n($, { isDisabled: u, onClick: w }),
+    l && /* @__PURE__ */ n(A, { isDisabled: !S, onClick: v }),
+    r.static
+  ] });
+}
+const z = d.div`
+	display: inline-flex;
+	flex-grow: 1;
+	overflow: hidden;
+	height: ${h.spacing7};
+	margin-left: ${(r) => r.$isActiveFilter ? h.spacing3 : 0};
+`, C = d.div`
+	overflow: hidden;
+`, D = d.div`
+	display: inline-flex;
+	transform: translateX(-${(r) => r.$scroll}px);
+	transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.15);
+`;
+export {
+  W as HorizontalScroll
+};
+//# sourceMappingURL=HorizontalScroll.js.map

package/HorizontalScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalScroll.js","sources":["../../src/common/components/HorizontalScroll.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport { styled } from 'styled-components';\nimport { token } from '@bynder/design-system';\nimport { useDimensions } from '../hooks/useDimensions';\nimport { RightArrow } from './RightArrow';\nimport { LeftArrow } from './LeftArrow';\n\ninterface Props {\n\tstatic?: React.ReactNode;\n\tchildren: React.ReactNode;\n\tisActiveFilter?: boolean;\n}\n\nexport function HorizontalScroll(props: Props) {\n\tconst [scroll, setScroll] = useState(0);\n\tconst nodeRef = useRef<HTMLDivElement>(null);\n\n\tconst { dimensions, remeasure } = useDimensions(nodeRef.current);\n\n\tconst maxScroll =\n\t\tnodeRef.current !== null ? nodeRef.current.scrollWidth - nodeRef.current.clientWidth : 0;\n\n\tconst showScrollButtons =\n\t\tdimensions !== undefined ? Math.ceil(dimensions.width) < dimensions.scrollWidth : false;\n\n\tuseEffect(() => {\n\t\tremeasure(nodeRef.current);\n\t}, [props.children, nodeRef.current]); // eslint-disable-line react-hooks/exhaustive-deps\n\n\tuseEffect(() => {\n\t\tif (!showScrollButtons) {\n\t\t\tsetScroll(0);\n\t\t}\n\t}, [showScrollButtons]);\n\n\tconst isLeftArrowDisabled = scroll === 0;\n\tconst isRightArrowDisabled = maxScroll > 5 && scroll !== maxScroll;\n\n\tfunction handleLeftScroll() {\n\t\tsetScroll((prevScroll: number) => {\n\t\t\tconst newScroll = Math.max(prevScroll - 250, 0);\n\n\t\t\treturn newScroll >= 100 ? newScroll : 0;\n\t\t});\n\t}\n\n\tfunction handleRightScroll() {\n\t\tsetScroll((prevScroll: number) => {\n\t\t\tconst newScroll = Math.min(prevScroll + 250, maxScroll);\n\n\t\t\treturn newScroll <= maxScroll - 100 ? newScroll : maxScroll;\n\t\t});\n\t}\n\n\treturn (\n\t\t<HorizontalScrollContainer $isActiveFilter={props.isActiveFilter}>\n\t\t\t<HorizontalScrollContentParent ref={nodeRef}>\n\t\t\t\t<HorizontalScrollContent data-testid=\"horizontal-scrollable-el\" $scroll={scroll}>\n\t\t\t\t\t{props.children}\n\t\t\t\t</HorizontalScrollContent>\n\t\t\t</HorizontalScrollContentParent>\n\n\t\t\t{showScrollButtons && (\n\t\t\t\t<LeftArrow isDisabled={isLeftArrowDisabled} onClick={handleLeftScroll} />\n\t\t\t)}\n\t\t\t{showScrollButtons && (\n\t\t\t\t<RightArrow isDisabled={!isRightArrowDisabled} onClick={handleRightScroll} />\n\t\t\t)}\n\n\t\t\t{props.static}\n\t\t</HorizontalScrollContainer>\n\t);\n}\n\nconst HorizontalScrollContainer = styled.div<{ $isActiveFilter?: boolean }>`\n\tdisplay: inline-flex;\n\tflex-grow: 1;\n\toverflow: hidden;\n\theight: ${token.spacing7};\n\tmargin-left: ${(p) => (p.$isActiveFilter ? token.spacing3 : 0)};\n`;\n\nconst HorizontalScrollContentParent = styled.div`\n\toverflow: hidden;\n`;\n\nconst HorizontalScrollContent = styled.div<{ $scroll: number }>`\n\tdisplay: inline-flex;\n\ttransform: translateX(-${(p) => p.$scroll}px);\n\ttransition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.15);\n`;\n"],"names":["HorizontalScroll","props","scroll","setScroll","useState","nodeRef","useRef","dimensions","remeasure","useDimensions","maxScroll","showScrollButtons","useEffect","isLeftArrowDisabled","isRightArrowDisabled","handleLeftScroll","prevScroll","newScroll","handleRightScroll","jsxs","HorizontalScrollContainer","jsx","HorizontalScrollContentParent","HorizontalScrollContent","LeftArrow","RightArrow","styled","token","p"],"mappings":";;;;;;;AAcO,SAASA,EAAiBC,GAAc;AAC9C,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,CAAC,GAChCC,IAAUC,EAAuB,IAAI,GAErC,EAAE,YAAAC,GAAY,WAAAC,EAAA,IAAcC,EAAcJ,EAAQ,OAAO,GAEzDK,IACLL,EAAQ,YAAY,OAAOA,EAAQ,QAAQ,cAAcA,EAAQ,QAAQ,cAAc,GAElFM,IACLJ,MAAe,SAAY,KAAK,KAAKA,EAAW,KAAK,IAAIA,EAAW,cAAc;AAEnF,EAAAK,EAAU,MAAM;AACf,IAAAJ,EAAUH,EAAQ,OAAO;AAAA,EAC1B,GAAG,CAACJ,EAAM,UAAUI,EAAQ,OAAO,CAAC,GAEpCO,EAAU,MAAM;AACf,IAAKD,KACJR,EAAU,CAAC;AAAA,EAEb,GAAG,CAACQ,CAAiB,CAAC;AAEtB,QAAME,IAAsBX,MAAW,GACjCY,IAAuBJ,IAAY,KAAKR,MAAWQ;AAEzD,WAASK,IAAmB;AAC3B,IAAAZ,EAAU,CAACa,MAAuB;AACjC,YAAMC,IAAY,KAAK,IAAID,IAAa,KAAK,CAAC;AAE9C,aAAOC,KAAa,MAAMA,IAAY;AAAA,IACvC,CAAC;AAAA,EACF;AAEA,WAASC,IAAoB;AAC5B,IAAAf,EAAU,CAACa,MAAuB;AACjC,YAAMC,IAAY,KAAK,IAAID,IAAa,KAAKN,CAAS;AAEtD,aAAOO,KAAaP,IAAY,MAAMO,IAAYP;AAAA,IACnD,CAAC;AAAA,EACF;AAEA,SACC,gBAAAS,EAACC,GAAA,EAA0B,iBAAiBnB,EAAM,gBACjD,UAAA;AAAA,IAAA,gBAAAoB,EAACC,GAAA,EAA8B,KAAKjB,GACnC,UAAA,gBAAAgB,EAACE,GAAA,EAAwB,eAAY,4BAA2B,SAASrB,GACvE,UAAAD,EAAM,SAAA,CACR,GACD;AAAA,IAECU,KACA,gBAAAU,EAACG,GAAA,EAAU,YAAYX,GAAqB,SAASE,GAAkB;AAAA,IAEvEJ,KACA,gBAAAU,EAACI,GAAA,EAAW,YAAY,CAACX,GAAsB,SAASI,GAAmB;AAAA,IAG3EjB,EAAM;AAAA,EAAA,GACR;AAEF;AAEA,MAAMmB,IAA4BM,EAAO;AAAA;AAAA;AAAA;AAAA,WAI9BC,EAAM,QAAQ;AAAA,gBACT,CAACC,MAAOA,EAAE,kBAAkBD,EAAM,WAAW,CAAE;AAAA,GAGzDL,IAAgCI,EAAO;AAAA;AAAA,GAIvCH,IAA0BG,EAAO;AAAA;AAAA,0BAEb,CAACE,MAAMA,EAAE,OAAO;AAAA;AAAA;"}

package/InfiniteScroll.js

@@ -0,0 +1,26 @@
+import { jsxs as r, Fragment as o, jsx as t } from "react/jsx-runtime";
+import { useEffect as l } from "react";
+import { useInView as s } from "react-intersection-observer";
+import { styled as a } from "styled-components";
+import { Spinner as f } from "./Spinner.js";
+function u(e) {
+  const [n, i] = s();
+  return l(() => {
+    i && !e.isLoading && e.hasNextPage && e.loadMore();
+  }, [i]), /* @__PURE__ */ r(o, { children: [
+    e.children,
+    e.hasNextPage && /* @__PURE__ */ t(d, { ref: n, "data-testid": "loading-element", children: /* @__PURE__ */ t(f, { isHidden: !i, isRelative: !0 }) })
+  ] });
+}
+const d = a.div`
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	position: relative;
+	height: 128px;
+	width: 100%;
+`;
+export {
+  u as InfiniteScroll
+};
+//# sourceMappingURL=InfiniteScroll.js.map

package/InfiniteScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfiniteScroll.js","sources":["../../src/common/components/InfiniteScroll.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { useInView } from 'react-intersection-observer';\n\nimport { styled } from 'styled-components';\nimport { Spinner } from './Spinner';\n\ninterface Props {\n\tisLoading: boolean;\n\thasNextPage: boolean;\n\tloadMore: () => void;\n\tchildren: React.ReactNode;\n}\n\nexport function InfiniteScroll(props: Props) {\n\tconst [spinnerRef, isInView] = useInView();\n\n\tuseEffect(() => {\n\t\tif (isInView && !props.isLoading && props.hasNextPage) {\n\t\t\tprops.loadMore();\n\t\t}\n\t}, [isInView]); // eslint-disable-line react-hooks/exhaustive-deps\n\n\treturn (\n\t\t<>\n\t\t\t{props.children}\n\n\t\t\t{props.hasNextPage && (\n\t\t\t\t<InfiniteScrollContainer ref={spinnerRef} data-testid=\"loading-element\">\n\t\t\t\t\t<Spinner isHidden={!isInView} isRelative />\n\t\t\t\t</InfiniteScrollContainer>\n\t\t\t)}\n\t\t</>\n\t);\n}\n\nconst InfiniteScrollContainer = styled.div`\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tposition: relative;\n\theight: 128px;\n\twidth: 100%;\n`;\n"],"names":["InfiniteScroll","props","spinnerRef","isInView","useInView","useEffect","jsxs","Fragment","jsx","InfiniteScrollContainer","Spinner","styled"],"mappings":";;;;;AAaO,SAASA,EAAeC,GAAc;AAC5C,QAAM,CAACC,GAAYC,CAAQ,IAAIC,EAAA;AAE/B,SAAAC,EAAU,MAAM;AACf,IAAIF,KAAY,CAACF,EAAM,aAAaA,EAAM,eACzCA,EAAM,SAAA;AAAA,EAER,GAAG,CAACE,CAAQ,CAAC,GAGZ,gBAAAG,EAAAC,GAAA,EACE,UAAA;AAAA,IAAAN,EAAM;AAAA,IAENA,EAAM,eACN,gBAAAO,EAACC,GAAA,EAAwB,KAAKP,GAAY,eAAY,mBACrD,UAAA,gBAAAM,EAACE,KAAQ,UAAU,CAACP,GAAU,YAAU,IAAC,EAAA,CAC1C;AAAA,EAAA,GAEF;AAEF;AAEA,MAAMM,IAA0BE,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/LeftArrow.js

@@ -0,0 +1,31 @@
+import { jsx as o } from "react/jsx-runtime";
+import t from "styled-components";
+import { IconArrowLeft as i } from "@bynder/icons";
+import { Button as e } from "@bynder/design-system";
+function p(r) {
+  return /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o(
+    e,
+    {
+      icon: /* @__PURE__ */ o(i, {}),
+      "aria-label": "Previous",
+      title: "Previous",
+      variant: "clean",
+      isSmall: !0,
+      onClick: r.onClick,
+      "data-testid": "arrow-left",
+      isDisabled: r.isDisabled
+    }
+  ) });
+}
+const a = t.div`
+	z-index: 20;
+	padding: 0;
+	box-shadow: 4px 0 13px 13px #fff;
+	&:hover {
+		box-shadow: 4px 0 13px 13px #fff;
+	}
+`;
+export {
+  p as LeftArrow
+};
+//# sourceMappingURL=LeftArrow.js.map

package/LeftArrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LeftArrow.js","sources":["../../src/common/components/LeftArrow.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { IconArrowLeft } from '@bynder/icons';\nimport { Button } from '@bynder/design-system';\n\nexport function LeftArrow(props: Readonly<{ isDisabled: boolean; onClick: () => void }>) {\n\treturn (\n\t\t<StyledButtonWrapper>\n\t\t\t<Button\n\t\t\t\ticon={<IconArrowLeft />}\n\t\t\t\taria-label=\"Previous\"\n\t\t\t\ttitle=\"Previous\"\n\t\t\t\tvariant=\"clean\"\n\t\t\t\tisSmall\n\t\t\t\tonClick={props.onClick}\n\t\t\t\tdata-testid=\"arrow-left\"\n\t\t\t\tisDisabled={props.isDisabled}\n\t\t\t/>\n\t\t</StyledButtonWrapper>\n\t);\n}\n\nconst StyledButtonWrapper = styled.div`\n\tz-index: 20;\n\tpadding: 0;\n\tbox-shadow: 4px 0 13px 13px #fff;\n\t&:hover {\n\t\tbox-shadow: 4px 0 13px 13px #fff;\n\t}\n`;\n"],"names":["LeftArrow","props","StyledButtonWrapper","jsx","Button","IconArrowLeft","styled"],"mappings":";;;;AAKO,SAASA,EAAUC,GAA+D;AACxF,2BACEC,GAAA,EACA,UAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,wBAAOC,GAAA,EAAc;AAAA,MACrB,cAAW;AAAA,MACX,OAAM;AAAA,MACN,SAAQ;AAAA,MACR,SAAO;AAAA,MACP,SAASJ,EAAM;AAAA,MACf,eAAY;AAAA,MACZ,YAAYA,EAAM;AAAA,IAAA;AAAA,EAAA,GAEpB;AAEF;AAEA,MAAMC,IAAsBI,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/LoginComponent.js

@@ -0,0 +1,32 @@
+import { jsxs as t, jsx as n } from "react/jsx-runtime";
+import { Container as m } from "./Container.js";
+import { Header as o } from "./Header.js";
+import { DomainInput as a } from "./DomainInput.js";
+import { ConnectButton as e } from "./ConnectButton.js";
+function b(i) {
+  return /* @__PURE__ */ t(m, { children: [
+    /* @__PURE__ */ n(o, {}),
+    /* @__PURE__ */ n(
+      a,
+      {
+        value: i.domainValue,
+        isReadOnly: i.isEditable === !1 || i.isSubmitting,
+        onChange: i.onChangeDomain,
+        onSubmit: i.onSubmit,
+        status: i.domainStatus
+      }
+    ),
+    /* @__PURE__ */ n(
+      e,
+      {
+        isValidDomain: i.domainStatus === "valid",
+        isSubmitting: i.isSubmitting,
+        onClick: i.onSubmit
+      }
+    )
+  ] });
+}
+export {
+  b as LoginComponent
+};
+//# sourceMappingURL=LoginComponent.js.map

package/LoginComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoginComponent.js","sources":["../../src/login/LoginComponent.tsx"],"sourcesContent":["import React from 'react';\nimport { DomainStatus } from './useAccountDomain';\nimport { Container } from './components/Container';\nimport { Header } from './components/Header';\nimport { DomainInput } from './components/DomainInput';\nimport { ConnectButton } from './components/ConnectButton';\n\ninterface Props {\n\tdomainValue: string;\n\tdomainStatus: DomainStatus;\n\tonChangeDomain: (value: string) => void;\n\tisSubmitting: boolean;\n\tisEditable: boolean;\n\tonSubmit: () => void;\n}\n\nexport function LoginComponent(props: Props) {\n\treturn (\n\t\t<Container>\n\t\t\t<Header />\n\n\t\t\t<DomainInput\n\t\t\t\tvalue={props.domainValue}\n\t\t\t\tisReadOnly={props.isEditable === false || props.isSubmitting}\n\t\t\t\tonChange={props.onChangeDomain}\n\t\t\t\tonSubmit={props.onSubmit}\n\t\t\t\tstatus={props.domainStatus}\n\t\t\t/>\n\n\t\t\t<ConnectButton\n\t\t\t\tisValidDomain={props.domainStatus === 'valid'}\n\t\t\t\tisSubmitting={props.isSubmitting}\n\t\t\t\tonClick={props.onSubmit}\n\t\t\t/>\n\t\t</Container>\n\t);\n}\n"],"names":["LoginComponent","props","Container","jsx","Header","DomainInput","ConnectButton"],"mappings":";;;;;AAgBO,SAASA,EAAeC,GAAc;AAC5C,2BACEC,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAO;AAAA,IAER,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACA,OAAOJ,EAAM;AAAA,QACb,YAAYA,EAAM,eAAe,MAASA,EAAM;AAAA,QAChD,UAAUA,EAAM;AAAA,QAChB,UAAUA,EAAM;AAAA,QAChB,QAAQA,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,IAGf,gBAAAE;AAAA,MAACG;AAAA,MAAA;AAAA,QACA,eAAeL,EAAM,iBAAiB;AAAA,QACtC,cAAcA,EAAM;AAAA,QACpB,SAASA,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAChB,GACD;AAEF;"}