@bynder/compact-view 5.1.3 → 5.2.0

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

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,266 @@
+import { jsxs as u, jsx as r, Fragment as B } from "react/jsx-runtime";
+import { useState as $, useRef as U, useEffect as A } from "react";
+import d from "styled-components";
+import { IconAspectRatioOutline as E, IconImage as R, IconCrop as j } from "@bynder/icons";
+import { token as o, Badge as P } from "@bynder/design-system";
+import "./AssetCard.js";
+import "./AssetList.js";
+import "./Chip.js";
+import { Dropdown as V } from "./Dropdown.js";
+import { DropdownListItem as L } 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 N } from "./Skeleton.js";
+import "./Spinner.js";
+import { useConfig as Y } from "./ConfigContext.js";
+import { DropdownContent as H } from "./DropdownContent.js";
+import { logger as M } from "./logger.js";
+import { useAuth as q } from "./LoginContext.js";
+import { isErr as G, isOk as J, ok as Q, err as W } from "./result.type.js";
+import { getAsset as X } from "./getAsset.js";
+import { getDefaultKey as Z, getUrlExtension as tt, splitByCamelCase as v, getHumanReadableFileSize as et } from "./utils2.js";
+import { normalizeFilesResponse as it } from "./normalizeResponse.js";
+import "./Dat.js";
+import { DatDropdownItem as nt } from "./DatDropdownItem.js";
+import { convertAssetIdToBase64 as rt } from "./base64Converter.js";
+import { useDat as ot } from "./useDatStore.js";
+import { useSimilaritySearchStore as st } from "./useSimilaritySearchStore.js";
+async function at(s) {
+  const { asset: l, auth: e, assetFieldSelection: a, noCache: h, isSimilaritySelected: c } = s, m = await X({
+    assetId: c ? rt(l.id) : l.id,
+    auth: e,
+    assetFieldSelection: a,
+    noCache: h
+  });
+  if (J(m) && m.value.files) {
+    const S = it(m.value.files), y = m.value.streamingLinks;
+    return Q({ files: S, databaseId: m.value.databaseId || "", streamingLinks: y });
+  }
+  return W("Error retrieving asset files");
+}
+const b = "Custom transformation", f = "adaptiveVideo";
+function Zt({ asset: s, onChange: l }) {
+  const [e, a] = $({ status: "Loading" }), [h, c] = $(!1), m = U(null), S = q(), { isSelected: y, NLSSearchText: O, isNLSSelected: _ } = st(), {
+    assetFieldSelection: T,
+    noCache: z,
+    defaultImageDerivativeName: x,
+    defaultVideoDerivativeName: C,
+    __shouldAddOriginal__: F
+  } = Y(), { transformation: w } = ot();
+  A(() => {
+    if (w?.url && e.status === "Data") {
+      const i = w.url !== e.files?.transformBaseUrl?.url;
+      D(i ? b : "transformBaseUrl");
+    }
+  }, [w]), A(() => {
+    e.status === "Data" && e.key !== f && c(!1);
+  }, [e]), A(() => {
+    s.id && (a({ status: "Loading" }), l(void 0), at({
+      asset: s,
+      auth: S,
+      assetFieldSelection: T,
+      noCache: z,
+      isSimilaritySelected: y || !!O && _
+    }).then((i) => {
+      if (G(i)) {
+        M.error(i.error), a({ status: "Failure" });
+        return;
+      }
+      const { files: n, streamingLinks: t } = i.value;
+      F && !("original" in n) && (n.original = {
+        url: i.value.databaseId,
+        isFakeOriginal: !0
+      }), t && Object.keys(t).length > 0 && (n[f] = {
+        url: "Adaptive video"
+      });
+      const p = Z(n), g = Object.keys(t || {})[0];
+      a({
+        status: "Data",
+        files: n,
+        key: p,
+        streamingLinks: t,
+        selectedAdaptiveKey: g
+      }), l(p === f && t ? { url: t[g] } : n[p]);
+    }));
+  }, [s.id, S, T]);
+  function D(i, n) {
+    a((t) => {
+      if (t.status !== "Data")
+        return t;
+      const I = { ...t, key: i };
+      let p;
+      if (i === b && w)
+        p = { url: w.url };
+      else if (i === f) {
+        const g = n || t.selectedAdaptiveKey;
+        g && t.streamingLinks && (p = { url: t.streamingLinks[g] }, I.selectedAdaptiveKey = g, c(!n));
+      } else
+        p = t.files[i];
+      return setTimeout(() => l(p)), I;
+    });
+  }
+  const K = (i) => {
+    if (e.status === "Data")
+      return s.__typename === "Image" && x && x in s.files ? x === i : s.__typename === "Video" && C && C in s.files ? C === i : e.key === i;
+  };
+  return /* @__PURE__ */ u(dt, { children: [
+    /* @__PURE__ */ r(
+      V,
+      {
+        title: /* @__PURE__ */ r(
+          lt,
+          {
+            assetFileType: s.__typename,
+            defaultImageDerivativeName: x,
+            defaultVideoDerivativeName: C,
+            state: e
+          }
+        ),
+        buttonKind: "secondary",
+        isPaddingContent: !0,
+        direction: "Up",
+        disabled: e.status === "Loading",
+        children: (i) => e.status === "Data" && /* @__PURE__ */ u(k, { children: [
+          Object.entries(e.files).map(([n, t]) => /* @__PURE__ */ u(
+            L,
+            {
+              selected: K(n),
+              onClick: () => {
+                D(n), n !== f && i();
+              },
+              children: [
+                /* @__PURE__ */ r(mt, { "data-testid": "file-extension", children: n === "transformBaseUrl" ? /* @__PURE__ */ r(pt, {}) : tt(t.url) ?? /* @__PURE__ */ r(ft, {}) }),
+                /* @__PURE__ */ u(ut, { children: [
+                  /* @__PURE__ */ u(gt, { children: [
+                    v(n),
+                    n === f && e.selectedAdaptiveKey && /* @__PURE__ */ r(wt, { children: /* @__PURE__ */ r(P, { isSmall: !0, color: "black-alpha", children: e.selectedAdaptiveKey.toUpperCase() }) })
+                  ] }),
+                  /* @__PURE__ */ u(ht, { children: [
+                    t.width && t.height && `${t.width} x ${t.height} px`,
+                    t.width && t.height && t.fileSize && /* @__PURE__ */ r("span", { children: "•" }),
+                    t.fileSize && et(t.fileSize)
+                  ] })
+                ] })
+              ]
+            },
+            n
+          )),
+          /* @__PURE__ */ r(
+            nt,
+            {
+              transformBaseUrl: e.files?.transformBaseUrl?.url,
+              toggleDropdown: i,
+              asset: s
+            }
+          )
+        ] })
+      }
+    ),
+    e.status === "Data" && e.key === f && /* @__PURE__ */ r(St, { ref: m, children: h && /* @__PURE__ */ r(
+      H,
+      {
+        isPaddingContent: !0,
+        onClickOutside: () => c(!1),
+        direction: "Up",
+        target: m,
+        "data-testid": "streaming-links-dropdown",
+        id: "streaming-links-dropdown",
+        children: /* @__PURE__ */ r(k, { children: Object.keys(e.streamingLinks || {}).map((i) => /* @__PURE__ */ r(
+          L,
+          {
+            selected: e.selectedAdaptiveKey === i,
+            onClick: () => D(f, i),
+            children: i.toUpperCase()
+          },
+          i
+        )) })
+      }
+    ) })
+  ] });
+}
+function lt({
+  assetFileType: s,
+  defaultImageDerivativeName: l,
+  defaultVideoDerivativeName: e,
+  state: a
+}) {
+  const h = (c) => {
+    if (a.status === "Data")
+      return s === "Image" && l && l in a.files ? v(l) : s === "Video" && e && e in a.files ? v(e) : v(c);
+  };
+  return a.status === "Loading" ? /* @__PURE__ */ r(N, { width: 50 }) : a.status === "Data" ? /* @__PURE__ */ u(ct, { children: [
+    a.key === b && /* @__PURE__ */ r(j, {}),
+    h(a.key)
+  ] }) : /* @__PURE__ */ r(B, { children: "Error" });
+}
+const dt = d.div`
+	display: flex;
+	gap: ${o.spacing2};
+	margin-right: ${o.spacing3};
+	text-transform: capitalize;
+	position: relative;
+`, ct = d.div`
+	display: flex;
+	gap: ${o.spacing4};
+	align-items: center;
+`, k = d.ul`
+	max-height: 400px;
+	overflow-y: auto;
+	padding: 0 0 ${o.spacing3} 0;
+	list-style: none;
+	margin: 0;
+`, mt = d.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};
+`, pt = d(E)`
+	height: ${o.spacing6};
+	width: ${o.spacing6};
+`, ft = d(R)`
+	height: ${o.spacing6};
+	width: ${o.spacing6};
+`, ut = d.div`
+	flex-grow: 1;
+	width: 160px;
+`, gt = d.div`
+	text-transform: capitalize;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	color: rgba(0, 34, 51, 0.8);
+`, ht = d.div`
+	font-size: ${o.fontSize75};
+
+	& > span {
+		margin: 0 ${o.spacing3};
+	}
+`, wt = d.span`
+	margin-left: ${o.spacing2};
+	display: inline-flex;
+	vertical-align: middle;
+`, St = d.div`
+	position: absolute;
+	left: -280px;
+	top: 0;
+	z-index: 1000;
+`;
+export {
+  Zt 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 {\n\t\tassetFieldSelection,\n\t\tnoCache,\n\t\tdefaultImageDerivativeName,\n\t\tdefaultVideoDerivativeName,\n\t\t__shouldAddOriginal__,\n\t} = 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\tconst handleDropdownSelectedFileType = (key: string) => {\n\t\tif (state.status === 'Data') {\n\t\t\tif (\n\t\t\t\tasset.__typename === 'Image' &&\n\t\t\t\tdefaultImageDerivativeName &&\n\t\t\t\tdefaultImageDerivativeName in asset.files\n\t\t\t) {\n\t\t\t\treturn defaultImageDerivativeName === key;\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\tasset.__typename === 'Video' &&\n\t\t\t\tdefaultVideoDerivativeName &&\n\t\t\t\tdefaultVideoDerivativeName in asset.files\n\t\t\t) {\n\t\t\t\treturn defaultVideoDerivativeName === key;\n\t\t\t}\n\n\t\t\treturn state.key === key;\n\t\t}\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\tassetFileType={asset.__typename}\n\t\t\t\t\t\tdefaultImageDerivativeName={defaultImageDerivativeName}\n\t\t\t\t\t\tdefaultVideoDerivativeName={defaultVideoDerivativeName}\n\t\t\t\t\t\tstate={state}\n\t\t\t\t\t/>\n\t\t\t\t}\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={handleDropdownSelectedFileType(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({\n\tassetFileType,\n\tdefaultImageDerivativeName,\n\tdefaultVideoDerivativeName,\n\tstate,\n}: {\n\tassetFileType: string;\n\treadonly state: State;\n\tdefaultImageDerivativeName?: string;\n\tdefaultVideoDerivativeName?: string;\n}) {\n\tconst handleContentTitleReturn = (key: string) => {\n\t\tif (state.status === 'Data') {\n\t\t\tif (\n\t\t\t\tassetFileType === 'Image' &&\n\t\t\t\tdefaultImageDerivativeName &&\n\t\t\t\tdefaultImageDerivativeName in state.files\n\t\t\t) {\n\t\t\t\treturn splitByCamelCase(defaultImageDerivativeName);\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\tassetFileType === 'Video' &&\n\t\t\t\tdefaultVideoDerivativeName &&\n\t\t\t\tdefaultVideoDerivativeName in state.files\n\t\t\t) {\n\t\t\t\treturn splitByCamelCase(defaultVideoDerivativeName);\n\t\t\t}\n\n\t\t\treturn splitByCamelCase(key);\n\t\t}\n\t};\n\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{handleContentTitleReturn(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","defaultImageDerivativeName","defaultVideoDerivativeName","__shouldAddOriginal__","useConfig","transformation","useDat","useEffect","isTransformed","selectFile","isErr","logger","defaultKey","getDefaultKey","selectedAdaptiveKey","key","adaptiveKey","prevState","newState","fileToSelect","newAdaptiveKey","handleDropdownSelectedFileType","Container","jsx","Dropdown","Title","toggle","ListContainer","file","jsxs","DropdownListItem","TransformImageContainer","AspectRatioIcon","getUrlExtension","ImageIcon","TransformContentContainer","TransformContentTitle","splitByCamelCase","BadgeContainer","Badge","TransformContentSubtitle","getHumanReadableFileSize","DatDropdownItem","PositionedAdaptiveDropdown","DropdownContent","assetFileType","handleContentTitleReturn","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;"}