@bynder/compact-view 5.1.3 → 5.1.4

package/CollectionList.js

@@ -0,0 +1,53 @@
+import { jsxs as h, jsx as t } from "react/jsx-runtime";
+import { useState as S } from "react";
+import { styled as v } from "styled-components";
+import { token as r } from "@bynder/design-system";
+import { CardSkeleton as C } from "./CardSkeleton.js";
+import { CollectionCard as L } from "./CollectionCard.js";
+import { useDimensions as x } from "./useDimensions.js";
+import { InfiniteScroll as I } from "./InfiniteScroll.js";
+import { NoResults as N } from "./NoResults.js";
+import { useSelectedCollectionIds as k } from "./SelectionContext.js";
+import { nbsp as w } from "./text.js";
+import { useSearchStore as M } from "./useSearchStore.js";
+function E(l) {
+  const [d, a] = S(null), { dimensions: i } = x(d), c = k(), { setSearch: m } = M(), { data: o, isLoading: f, loadMore: u, hasNextPage: p } = l.connection, n = i !== void 0 ? Math.ceil(i.height / 184) : 0, s = i !== void 0 ? Math.round((i.width - 32) / 204) : 0;
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      role: "listbox",
+      className: "card-list",
+      ref: (e) => {
+        a(e);
+      },
+      children: [
+        (o.tag === "Failure" || o.tag === "Loading" && !o.value) && /* @__PURE__ */ t(
+          C,
+          {
+            rows: n,
+            columns: s,
+            title: /* @__PURE__ */ t(R, { children: w })
+          }
+        ),
+        o.tag === "Loaded" && o.value?.collections.nodes.length === 0 && /* @__PURE__ */ t(N, { onReset: () => m("collections", "") }),
+        (o.tag === "Loading" && !!o.value || o.tag === "Loaded" && o.value.collections.nodes.length > 0) && /* @__PURE__ */ t(I, { hasNextPage: p, isLoading: f, loadMore: u, children: o.value?.collections.nodes.map((e, g) => /* @__PURE__ */ t(
+          L,
+          {
+            isSelected: c.includes(e.id),
+            collection: e,
+            fadeIn: g >= n * s
+          },
+          e.id
+        )) })
+      ]
+    }
+  );
+}
+const R = v.div`
+	margin-top: ${r.spacing3};
+	font-size: ${r.fontSize75};
+`;
+export {
+  E as CollectionList
+};
+//# sourceMappingURL=CollectionList.js.map

package/CollectionList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionList.js","sources":["../../src/views/collections/CollectionList.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { styled } from 'styled-components';\nimport { token } from '@bynder/design-system';\nimport { CardSkeleton } from '../../common/components/CardSkeleton';\nimport { CollectionCard } from './CollectionCard';\nimport { useDimensions } from '../../common/hooks/useDimensions';\nimport { InfiniteScroll } from '../../common/components/InfiniteScroll';\nimport { NoResults } from '../../common/components/NoResults';\nimport { useSelectedCollectionIds } from '../../select/SelectionContext';\nimport { nbsp } from '../../utils/text';\nimport { Connection } from '../../api/graphql.types';\nimport { GraphqlResponse as GraphqlCollections } from '../../api/getCollections';\nimport { useSearchStore } from '@src/store/useSearchStore';\n\ninterface Props {\n\tconnection: Connection<GraphqlCollections>;\n}\n\nexport function CollectionList(props: Props) {\n\tconst [node, setNode] = useState<HTMLDivElement | null>(null);\n\tconst { dimensions } = useDimensions(node);\n\tconst selectedIds = useSelectedCollectionIds();\n\tconst { setSearch } = useSearchStore();\n\n\tconst { data, isLoading, loadMore, hasNextPage } = props.connection;\n\n\tconst count = dimensions !== undefined ? Math.ceil(dimensions.height / 184) : 0;\n\tconst collectionsPerRow =\n\t\tdimensions !== undefined ? Math.round((dimensions.width - 32) / 204) : 0;\n\n\treturn (\n\t\t<div\n\t\t\trole=\"listbox\"\n\t\t\tclassName=\"card-list\"\n\t\t\tref={(el) => {\n\t\t\t\tsetNode(el);\n\t\t\t}}\n\t\t>\n\t\t\t{(data.tag === 'Failure' || (data.tag === 'Loading' && !data.value)) && (\n\t\t\t\t<CardSkeleton\n\t\t\t\t\trows={count}\n\t\t\t\t\tcolumns={collectionsPerRow}\n\t\t\t\t\t// Empty row to match height with \"[n] files\"\n\t\t\t\t\ttitle={<CardSkeletonTitle>{nbsp}</CardSkeletonTitle>}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{data.tag === 'Loaded' && data.value?.collections.nodes.length === 0 && (\n\t\t\t\t<NoResults onReset={() => setSearch('collections', '')} />\n\t\t\t)}\n\n\t\t\t{((data.tag === 'Loading' && !!data.value) ||\n\t\t\t\t(data.tag === 'Loaded' && data.value.collections.nodes.length > 0)) && (\n\t\t\t\t<InfiniteScroll hasNextPage={hasNextPage} isLoading={isLoading} loadMore={loadMore}>\n\t\t\t\t\t{data.value?.collections.nodes.map((collection, index) => (\n\t\t\t\t\t\t<CollectionCard\n\t\t\t\t\t\t\tkey={collection.id}\n\t\t\t\t\t\t\tisSelected={selectedIds.includes(collection.id)}\n\t\t\t\t\t\t\tcollection={collection}\n\t\t\t\t\t\t\tfadeIn={index >= count * collectionsPerRow}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</InfiniteScroll>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nconst CardSkeletonTitle = styled.div`\n\tmargin-top: ${token.spacing3};\n\tfont-size: ${token.fontSize75};\n`;\n"],"names":["CollectionList","props","node","setNode","useState","dimensions","useDimensions","selectedIds","useSelectedCollectionIds","setSearch","useSearchStore","data","isLoading","loadMore","hasNextPage","count","collectionsPerRow","jsxs","el","jsx","CardSkeleton","CardSkeletonTitle","nbsp","NoResults","InfiniteScroll","collection","index","CollectionCard","styled","token"],"mappings":";;;;;;;;;;;;AAmBO,SAASA,EAAeC,GAAc;AAC5C,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAgC,IAAI,GACtD,EAAE,YAAAC,EAAA,IAAeC,EAAcJ,CAAI,GACnCK,IAAcC,EAAA,GACd,EAAE,WAAAC,EAAA,IAAcC,EAAA,GAEhB,EAAE,MAAAC,GAAM,WAAAC,GAAW,UAAAC,GAAU,aAAAC,EAAA,IAAgBb,EAAM,YAEnDc,IAAQV,MAAe,SAAY,KAAK,KAAKA,EAAW,SAAS,GAAG,IAAI,GACxEW,IACLX,MAAe,SAAY,KAAK,OAAOA,EAAW,QAAQ,MAAM,GAAG,IAAI;AAExE,SACC,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,MAAK;AAAA,MACL,WAAU;AAAA,MACV,KAAK,CAACC,MAAO;AACZ,QAAAf,EAAQe,CAAE;AAAA,MACX;AAAA,MAEE,UAAA;AAAA,SAAAP,EAAK,QAAQ,aAAcA,EAAK,QAAQ,aAAa,CAACA,EAAK,UAC5D,gBAAAQ;AAAA,UAACC;AAAA,UAAA;AAAA,YACA,MAAML;AAAA,YACN,SAASC;AAAA,YAET,OAAO,gBAAAG,EAACE,GAAA,EAAmB,UAAAC,EAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QAIjCX,EAAK,QAAQ,YAAYA,EAAK,OAAO,YAAY,MAAM,WAAW,KAClE,gBAAAQ,EAACI,KAAU,SAAS,MAAMd,EAAU,eAAe,EAAE,GAAG;AAAA,SAGtDE,EAAK,QAAQ,aAAa,CAAC,CAACA,EAAK,SAClCA,EAAK,QAAQ,YAAYA,EAAK,MAAM,YAAY,MAAM,SAAS,MAChE,gBAAAQ,EAACK,GAAA,EAAe,aAAAV,GAA0B,WAAAF,GAAsB,UAAAC,GAC9D,UAAAF,EAAK,OAAO,YAAY,MAAM,IAAI,CAACc,GAAYC,MAC/C,gBAAAP;AAAA,UAACQ;AAAA,UAAA;AAAA,YAEA,YAAYpB,EAAY,SAASkB,EAAW,EAAE;AAAA,YAC9C,YAAAA;AAAA,YACA,QAAQC,KAASX,IAAQC;AAAA,UAAA;AAAA,UAHpBS,EAAW;AAAA,QAAA,CAKjB,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIJ;AAEA,MAAMJ,IAAoBO,EAAO;AAAA,eAClBC,EAAM,QAAQ;AAAA,cACfA,EAAM,UAAU;AAAA;"}

package/CollectionView.js

@@ -0,0 +1,73 @@
+import { jsxs as e, Fragment as b, jsx as y } from "react/jsx-runtime";
+import { styled as i } from "styled-components";
+import { token as t } from "@bynder/design-system";
+import { useConfig as A } from "./ConfigContext.js";
+import { useOrderingSelectors as k } from "./useOrderingStore.js";
+import { useRouter as v } from "./useRouterStore.js";
+import { useFilterAssets as w } from "./filterAssets.js";
+import { __ as x } from "./index2.js";
+import { StatefulAssetList as F } from "./StatefulAssetList.js";
+import { useAssetFilter as L } from "./AssetFilterContext.js";
+import { useSearchStateByPage as V } from "./useSearchStore.js";
+import { useSimilaritySearchStore as B } from "./useSimilaritySearchStore.js";
+import { useSimilarityAssets as N } from "./getSimilarityAssets.js";
+function K(o) {
+  const { value: n } = V("collection"), [, r] = v(), c = k.use.collection(), { language: s, noCache: l } = A(), { assetTypes: a, tags: m, isLimited: u, selectedSmartfilterOptions: d } = L(), {
+    isSelected: p,
+    isNLSSelected: f,
+    NLSSearchText: g
+  } = B(), { connection: S } = N(), h = w(
+    {
+      collection: o.collection,
+      filter: { assetTypes: a, selectedSmartfilterOptions: d, tags: m, isLimited: u },
+      searchTerm: n,
+      orderBy: c,
+      language: s
+    },
+    l
+  ), C = p || f && g;
+  return /* @__PURE__ */ e(b, { children: [
+    /* @__PURE__ */ e(T, { "data-testid": "collection-toolbar", children: [
+      /* @__PURE__ */ e(
+        $,
+        {
+          onClick: () => r({ page: "collections" }),
+          type: "button",
+          children: [
+            x("Collections"),
+            " / "
+          ]
+        }
+      ),
+      /* @__PURE__ */ e("span", { children: [
+        " ",
+        o.collection.name,
+        " "
+      ] })
+    ] }),
+    /* @__PURE__ */ y(
+      F,
+      {
+        connection: C ? S : h,
+        totalCount: o.collection.assetCount,
+        showActiveFilters: !0
+      }
+    )
+  ] });
+}
+const T = i.nav`
+	padding: ${t.spacing5} ${t.spacing5};
+`, $ = i.button`
+	cursor: pointer;
+	user-select: none;
+	color: rgba(0, 34, 51, 0.5);
+	background-color: transparent;
+	background-image: none;
+	border: 0 solid rgba(0, 34, 51, 0.1);
+	font-size: ${t.fontSize100};
+	padding: 0;
+`;
+export {
+  K as CollectionView
+};
+//# sourceMappingURL=CollectionView.js.map

package/CollectionView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionView.js","sources":["../../src/views/collection/CollectionView.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from 'styled-components';\nimport { token } from '@bynder/design-system';\nimport { useConfig } from '@src/app-config/ConfigContext';\nimport { useOrderingSelectors } from '@src/store/useOrderingStore';\nimport { useRouter } from '@src/store/useRouterStore';\nimport { Collection } from './collection.types';\nimport { useFilterAssets } from '@src/api/filterAssets';\nimport { __ } from '@src/localization';\nimport { StatefulAssetList } from '../asset/StatefulAssetList';\nimport { useAssetFilter } from '@src/filter/AssetFilterContext';\nimport { useSearchStateByPage } from '@src/store/useSearchStore';\nimport { useSimilaritySearchStore } from '@src/store/useSimilaritySearchStore';\nimport { useSimilarityAssets } from '@src/api/getSimilarityAssets';\n\ninterface Props {\n\tcollection: Collection;\n}\n\nexport function CollectionView(props: Props) {\n\tconst { value: searchValue } = useSearchStateByPage('collection');\n\tconst [, setPage] = useRouter();\n\tconst ordering = useOrderingSelectors.use.collection();\n\tconst { language, noCache } = useConfig();\n\tconst { assetTypes, tags, isLimited, selectedSmartfilterOptions } = useAssetFilter();\n\n\tconst {\n\t\tisSelected: isSimilaritySearchSelected,\n\t\tisNLSSelected,\n\t\tNLSSearchText,\n\t} = useSimilaritySearchStore();\n\tconst { connection: similarityConnection } = useSimilarityAssets();\n\n\tconst connection = useFilterAssets(\n\t\t{\n\t\t\tcollection: props.collection,\n\t\t\tfilter: { assetTypes, selectedSmartfilterOptions, tags, isLimited },\n\t\t\tsearchTerm: searchValue,\n\t\t\torderBy: ordering,\n\t\t\tlanguage,\n\t\t},\n\t\tnoCache,\n\t);\n\n\tconst isAISearchEnabled = isSimilaritySearchSelected || (isNLSSelected && NLSSearchText);\n\n\treturn (\n\t\t<>\n\t\t\t<CollectionViewNav data-testid=\"collection-toolbar\">\n\t\t\t\t<CollectionViewButton\n\t\t\t\t\tonClick={() => setPage({ page: 'collections' })}\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t>\n\t\t\t\t\t{__('Collections')}\n\t\t\t\t\t{' / '}\n\t\t\t\t</CollectionViewButton>\n\t\t\t\t<span> {props.collection.name} </span>\n\t\t\t</CollectionViewNav>\n\n\t\t\t<StatefulAssetList\n\t\t\t\tconnection={isAISearchEnabled ? similarityConnection : connection}\n\t\t\t\ttotalCount={props.collection.assetCount}\n\t\t\t\tshowActiveFilters\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nconst CollectionViewNav = styled.nav`\n\tpadding: ${token.spacing5} ${token.spacing5};\n`;\n\nconst CollectionViewButton = styled.button`\n\tcursor: pointer;\n\tuser-select: none;\n\tcolor: rgba(0, 34, 51, 0.5);\n\tbackground-color: transparent;\n\tbackground-image: none;\n\tborder: 0 solid rgba(0, 34, 51, 0.1);\n\tfont-size: ${token.fontSize100};\n\tpadding: 0;\n`;\n"],"names":["CollectionView","props","searchValue","useSearchStateByPage","setPage","useRouter","ordering","useOrderingSelectors","language","noCache","useConfig","assetTypes","tags","isLimited","selectedSmartfilterOptions","useAssetFilter","isSimilaritySearchSelected","isNLSSelected","NLSSearchText","useSimilaritySearchStore","similarityConnection","useSimilarityAssets","connection","useFilterAssets","isAISearchEnabled","jsxs","Fragment","CollectionViewNav","CollectionViewButton","__","jsx","StatefulAssetList","styled","token"],"mappings":";;;;;;;;;;;;;AAoBO,SAASA,EAAeC,GAAc;AAC5C,QAAM,EAAE,OAAOC,MAAgBC,EAAqB,YAAY,GAC1D,CAAA,EAAGC,CAAO,IAAIC,EAAA,GACdC,IAAWC,EAAqB,IAAI,WAAA,GACpC,EAAE,UAAAC,GAAU,SAAAC,EAAA,IAAYC,EAAA,GACxB,EAAE,YAAAC,GAAY,MAAAC,GAAM,WAAAC,GAAW,4BAAAC,EAAA,IAA+BC,EAAA,GAE9D;AAAA,IACL,YAAYC;AAAA,IACZ,eAAAC;AAAA,IACA,eAAAC;AAAA,EAAA,IACGC,EAAA,GACE,EAAE,YAAYC,EAAA,IAAyBC,EAAA,GAEvCC,IAAaC;AAAA,IAClB;AAAA,MACC,YAAYtB,EAAM;AAAA,MAClB,QAAQ,EAAE,YAAAU,GAAY,4BAAAG,GAA4B,MAAAF,GAAM,WAAAC,EAAA;AAAA,MACxD,YAAYX;AAAA,MACZ,SAASI;AAAA,MACT,UAAAE;AAAA,IAAA;AAAA,IAEDC;AAAA,EAAA,GAGKe,IAAoBR,KAA+BC,KAAiBC;AAE1E,SACC,gBAAAO,EAAAC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAD,EAACE,GAAA,EAAkB,eAAY,sBAC9B,UAAA;AAAA,MAAA,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UACA,SAAS,MAAMxB,EAAQ,EAAE,MAAM,eAAe;AAAA,UAC9C,MAAK;AAAA,UAEJ,UAAA;AAAA,YAAAyB,EAAG,aAAa;AAAA,YAChB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,wBAED,QAAA,EAAK,UAAA;AAAA,QAAA;AAAA,QAAE5B,EAAM,WAAW;AAAA,QAAK;AAAA,MAAA,EAAA,CAAC;AAAA,IAAA,GAChC;AAAA,IAEA,gBAAA6B;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,YAAYP,IAAoBJ,IAAuBE;AAAA,QACvD,YAAYrB,EAAM,WAAW;AAAA,QAC7B,mBAAiB;AAAA,MAAA;AAAA,IAAA;AAAA,EAClB,GACD;AAEF;AAEA,MAAM0B,IAAoBK,EAAO;AAAA,YACrBC,EAAM,QAAQ,IAAIA,EAAM,QAAQ;AAAA,GAGtCL,IAAuBI,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAOtBC,EAAM,WAAW;AAAA;AAAA;"}

package/CollectionsView.js

@@ -0,0 +1,58 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { useEffect as m } from "react";
+import { styled as i } from "styled-components";
+import { token as t } from "@bynder/design-system";
+import { useConfig as f } from "./ConfigContext.js";
+import { useOrderingSelectors as d } from "./useOrderingStore.js";
+import { Oops as p } from "./Oops.js";
+import { DirectionSelect as u } from "./DirectionSelect.js";
+import { FieldSelect as g } from "./FieldSelect.js";
+import { pluralize as C } from "./text.js";
+import { __ as n } from "./index2.js";
+import { CollectionList as x } from "./CollectionList.js";
+import { useGetCollections as w } from "./getCollections.js";
+import { useSearchStateByPage as v } from "./useSearchStore.js";
+function O() {
+  const { value: l, setIsLoading: s } = v("collections"), a = d.use.collections(), { noCache: c } = f(), o = w(
+    {
+      searchTerm: l,
+      orderBy: a
+    },
+    c
+  );
+  return m(() => {
+    o.isLoading || s(!1);
+  }, [o.isLoading]), o.data.tag === "Failure" ? /* @__PURE__ */ e(p, { error: new Error(o.data.value), onRetry: o.executeQuery }) : /* @__PURE__ */ r(y, { "data-testid": "collections-view-container", children: [
+    /* @__PURE__ */ r(h, { children: [
+      o.data.value && /* @__PURE__ */ e(E, { children: C(
+        o.data.value.collections.totalCount,
+        n("{} collection"),
+        n("{} collections")
+      ) }),
+      !o.data.value && /* @__PURE__ */ e("span", { className: "flex-grow" }),
+      /* @__PURE__ */ e(g, { options: ["CREATED_AT", "NAME"] }),
+      /* @__PURE__ */ e(u, {})
+    ] }),
+    /* @__PURE__ */ e(x, { connection: o })
+  ] });
+}
+const y = i.div`
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	overflow-y: auto;
+`, h = i.div`
+	display: flex;
+	align-items: center;
+	padding: ${t.spacing5} ${t.spacing5} ${t.spacing3} ${t.spacing5};
+	z-index: 10;
+`, E = i.span`
+	color: rgba(0, 34, 51, 0.5);
+	flex-shrink: 0;
+	flex-grow: 1;
+	animation: fade-in-down 0.15s ease-out;
+`;
+export {
+  O as CollectionsView
+};
+//# sourceMappingURL=CollectionsView.js.map

package/CollectionsView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionsView.js","sources":["../../src/views/collections/CollectionsView.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport { styled } from 'styled-components';\nimport { token } from '@bynder/design-system';\nimport { useConfig } from '@src/app-config/ConfigContext';\nimport { useOrderingSelectors } from '@src/store/useOrderingStore';\nimport { Oops } from '../../error-handling/Oops';\nimport { DirectionSelect } from '../../order/DirectionSelect';\nimport { FieldSelect } from '../../order/FieldSelect';\nimport { pluralize } from '../../utils/text';\nimport { __ } from '../../localization';\nimport { CollectionList } from './CollectionList';\nimport { useGetCollections } from '../../api/getCollections';\nimport { useSearchStateByPage } from '@src/store/useSearchStore';\n\nexport function CollectionsView() {\n\tconst { value: searchTerm, setIsLoading } = useSearchStateByPage('collections');\n\tconst ordering = useOrderingSelectors.use.collections();\n\tconst { noCache } = useConfig();\n\n\tconst connection = useGetCollections(\n\t\t{\n\t\t\tsearchTerm,\n\t\t\torderBy: ordering,\n\t\t},\n\t\tnoCache,\n\t);\n\n\tuseEffect(() => {\n\t\tif (!connection.isLoading) {\n\t\t\tsetIsLoading(false);\n\t\t}\n\t}, [connection.isLoading]); // eslint-disable-line\n\n\tif (connection.data.tag === 'Failure') {\n\t\treturn <Oops error={new Error(connection.data.value)} onRetry={connection.executeQuery} />;\n\t}\n\n\treturn (\n\t\t<CollectionsViewContainer data-testid=\"collections-view-container\">\n\t\t\t<CollectionsViewContent>\n\t\t\t\t{connection.data.value && (\n\t\t\t\t\t<CollectionsViewCount>\n\t\t\t\t\t\t{pluralize(\n\t\t\t\t\t\t\tconnection.data.value.collections.totalCount,\n\t\t\t\t\t\t\t__('{} collection'),\n\t\t\t\t\t\t\t__('{} collections'),\n\t\t\t\t\t\t)}\n\t\t\t\t\t</CollectionsViewCount>\n\t\t\t\t)}\n\n\t\t\t\t{!connection.data.value && <span className=\"flex-grow\" />}\n\n\t\t\t\t<FieldSelect options={['CREATED_AT', 'NAME']} />\n\t\t\t\t<DirectionSelect />\n\t\t\t</CollectionsViewContent>\n\n\t\t\t<CollectionList connection={connection} />\n\t\t</CollectionsViewContainer>\n\t);\n}\n\nconst CollectionsViewContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex-grow: 1;\n\toverflow-y: auto;\n`;\n\nconst CollectionsViewContent = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: ${token.spacing5} ${token.spacing5} ${token.spacing3} ${token.spacing5};\n\tz-index: 10;\n`;\n\nconst CollectionsViewCount = styled.span`\n\tcolor: rgba(0, 34, 51, 0.5);\n\tflex-shrink: 0;\n\tflex-grow: 1;\n\tanimation: fade-in-down 0.15s ease-out;\n`;\n"],"names":["CollectionsView","searchTerm","setIsLoading","useSearchStateByPage","ordering","useOrderingSelectors","noCache","useConfig","connection","useGetCollections","useEffect","jsx","Oops","jsxs","CollectionsViewContainer","CollectionsViewContent","CollectionsViewCount","pluralize","__","FieldSelect","DirectionSelect","CollectionList","styled","token"],"mappings":";;;;;;;;;;;;;;AAeO,SAASA,IAAkB;AACjC,QAAM,EAAE,OAAOC,GAAY,cAAAC,EAAA,IAAiBC,EAAqB,aAAa,GACxEC,IAAWC,EAAqB,IAAI,YAAA,GACpC,EAAE,SAAAC,EAAA,IAAYC,EAAA,GAEdC,IAAaC;AAAA,IAClB;AAAA,MACC,YAAAR;AAAA,MACA,SAASG;AAAA,IAAA;AAAA,IAEVE;AAAA,EAAA;AASD,SANAI,EAAU,MAAM;AACf,IAAKF,EAAW,aACfN,EAAa,EAAK;AAAA,EAEpB,GAAG,CAACM,EAAW,SAAS,CAAC,GAErBA,EAAW,KAAK,QAAQ,YACpB,gBAAAG,EAACC,GAAA,EAAK,OAAO,IAAI,MAAMJ,EAAW,KAAK,KAAK,GAAG,SAASA,EAAW,aAAA,CAAc,IAIxF,gBAAAK,EAACC,GAAA,EAAyB,eAAY,8BACrC,UAAA;AAAA,IAAA,gBAAAD,EAACE,GAAA,EACC,UAAA;AAAA,MAAAP,EAAW,KAAK,SAChB,gBAAAG,EAACK,GAAA,EACC,UAAAC;AAAA,QACAT,EAAW,KAAK,MAAM,YAAY;AAAA,QAClCU,EAAG,eAAe;AAAA,QAClBA,EAAG,gBAAgB;AAAA,MAAA,GAErB;AAAA,MAGA,CAACV,EAAW,KAAK,SAAS,gBAAAG,EAAC,QAAA,EAAK,WAAU,aAAY;AAAA,wBAEtDQ,GAAA,EAAY,SAAS,CAAC,cAAc,MAAM,GAAG;AAAA,wBAC7CC,GAAA,CAAA,CAAgB;AAAA,IAAA,GAClB;AAAA,IAEA,gBAAAT,EAACU,KAAe,YAAAb,EAAA,CAAwB;AAAA,EAAA,GACzC;AAEF;AAEA,MAAMM,IAA2BQ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOlCP,IAAyBO,EAAO;AAAA;AAAA;AAAA,YAG1BC,EAAM,QAAQ,IAAIA,EAAM,QAAQ,IAAIA,EAAM,QAAQ,IAAIA,EAAM,QAAQ;AAAA;AAAA,GAI1EP,IAAuBM,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/ConfigContext.js

@@ -0,0 +1,18 @@
+import { createContext as n, useContext as c } from "react";
+const i = {
+  assetTypes: [],
+  language: "en_US",
+  onSuccess: (o, { selectedFile: s }) => console.log(o, s),
+  // eslint-disable-line no-console
+  selectionMode: "MultiSelect",
+  hideExternalAccess: !1
+}, t = n(i), r = t.Provider, e = () => c(t), d = () => e().assetFilter, u = () => e().selectionMode, a = () => e().hideSwitch;
+export {
+  r as ConfigProvider,
+  i as defaultConfig,
+  d as useAssetFilter,
+  e as useConfig,
+  a as useHideSwitch,
+  u as useSelectionMode
+};
+//# sourceMappingURL=ConfigContext.js.map

package/ConfigContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigContext.js","sources":["../../src/app-config/ConfigContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport { File } from '../select/file.type';\nimport { Config as ProvidedConfig, SelectionMode } from './appConfig.type';\n\ntype Config =\n\t// Required config options\n\tRequired<Pick<ProvidedConfig, 'language' | 'onSuccess' | 'assetTypes'>> &\n\t\t// Non-required options\n\t\tPick<\n\t\t\tProvidedConfig,\n\t\t\t| 'assetFieldSelection'\n\t\t\t| 'assetFilter'\n\t\t\t| 'hideExternalAccess'\n\t\t\t| 'theme'\n\t\t\t| 'mode'\n\t\t\t| 'hideSwitch'\n\t\t\t| '__shouldAddOriginal__'\n\t\t\t| 'noCache'\n\t\t\t| 'selectAllOption'\n\t\t> & {\n\t\t\t// renamed option\n\t\t\tselectionMode: SelectionMode;\n\t\t};\n\nexport const defaultConfig: Config = {\n\tassetTypes: [],\n\tlanguage: 'en_US',\n\tonSuccess: (assets: unknown[], { selectedFile }: { selectedFile?: File }) =>\n\t\tconsole.log(assets, selectedFile), // eslint-disable-line no-console\n\tselectionMode: 'MultiSelect',\n\thideExternalAccess: false,\n};\n\nconst ConfigContext = createContext(defaultConfig);\n\nexport const ConfigProvider = ConfigContext.Provider;\nexport const useConfig = () => useContext(ConfigContext);\nexport const useTheme = () => useConfig().theme;\nexport const useAssetFilter = () => useConfig().assetFilter;\nexport const useSelectionMode = () => useConfig().selectionMode;\nexport const useHideSwitch = () => useConfig().hideSwitch;\n"],"names":["defaultConfig","assets","selectedFile","ConfigContext","createContext","ConfigProvider","useConfig","useContext","useAssetFilter","useSelectionMode","useHideSwitch"],"mappings":";AAyBO,MAAMA,IAAwB;AAAA,EACpC,YAAY,CAAA;AAAA,EACZ,UAAU;AAAA,EACV,WAAW,CAACC,GAAmB,EAAE,cAAAC,QAChC,QAAQ,IAAID,GAAQC,CAAY;AAAA;AAAA,EACjC,eAAe;AAAA,EACf,oBAAoB;AACrB,GAEMC,IAAgBC,EAAcJ,CAAa,GAEpCK,IAAiBF,EAAc,UAC/BG,IAAY,MAAMC,EAAWJ,CAAa,GAE1CK,IAAiB,MAAMF,IAAY,aACnCG,IAAmB,MAAMH,IAAY,eACrCI,IAAgB,MAAMJ,IAAY;"}

package/ConnectButton.js

@@ -0,0 +1,20 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Button as n } from "@bynder/design-system";
+import { __ as o } from "./index2.js";
+function e(i) {
+  return /* @__PURE__ */ t(
+    n,
+    {
+      variant: "primary",
+      isDisabled: !i.isValidDomain || i.isSubmitting,
+      onClick: i.onClick,
+      isLoading: i.isSubmitting,
+      "data-testid": "login-button",
+      children: o("Connect")
+    }
+  );
+}
+export {
+  e as ConnectButton
+};
+//# sourceMappingURL=ConnectButton.js.map

package/ConnectButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectButton.js","sources":["../../src/login/components/ConnectButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Button } from '@bynder/design-system';\n\nimport { __ } from '../../localization';\n\nexport function ConnectButton(props: {\n\tisValidDomain: boolean;\n\tisSubmitting: boolean;\n\tonClick: () => void;\n}) {\n\treturn (\n\t\t<Button\n\t\t\tvariant=\"primary\"\n\t\t\tisDisabled={!props.isValidDomain || props.isSubmitting}\n\t\t\tonClick={props.onClick}\n\t\t\tisLoading={props.isSubmitting}\n\t\t\tdata-testid=\"login-button\"\n\t\t>\n\t\t\t{__('Connect')}\n\t\t</Button>\n\t);\n}\n"],"names":["ConnectButton","props","jsx","Button"],"mappings":";;;AAKO,SAASA,EAAcC,GAI3B;AACF,SACC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,SAAQ;AAAA,MACR,YAAY,CAACF,EAAM,iBAAiBA,EAAM;AAAA,MAC1C,SAASA,EAAM;AAAA,MACf,WAAWA,EAAM;AAAA,MACjB,eAAY;AAAA,MAEX,YAAG,SAAS;AAAA,IAAA;AAAA,EAAA;AAGhB;"}

package/Container.js

@@ -0,0 +1,52 @@
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import n from "styled-components";
+import { IconCancel as l } from "@bynder/icons";
+import { token as t, Button as c } from "@bynder/design-system";
+import { useModalContext as s } from "./Modal.js";
+import { __ as a } from "./index2.js";
+function C(i) {
+  const e = s();
+  return /* @__PURE__ */ r(
+    d,
+    {
+      className: "cv-root",
+      style: {
+        minHeight: 320
+      },
+      children: [
+        e !== null && /* @__PURE__ */ o(m, { children: /* @__PURE__ */ o(
+          c,
+          {
+            variant: "clean",
+            onClick: e.onClose,
+            title: a("Close"),
+            icon: /* @__PURE__ */ o(l, {})
+          }
+        ) }),
+        /* @__PURE__ */ o(p, { children: i.children })
+      ]
+    }
+  );
+}
+const d = n.div`
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	background-color: ${t.gray10};
+`, m = n.div`
+	position: absolute;
+	top: ${t.spacing4};
+	right: ${t.spacing5};
+`, p = n.div`
+	display: flex;
+	flex-direction: column;
+	font-size: ${t.fontSize300};
+`;
+export {
+  C as Container
+};
+//# sourceMappingURL=Container.js.map

package/Container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.js","sources":["../../src/login/components/Container.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { IconCancel } from '@bynder/icons';\nimport { Button, token } from '@bynder/design-system';\n\nimport { useModalContext } from '../../common/components/Modal';\nimport { __ } from '../../localization';\n\nexport function Container(props: { children: React.ReactNode }) {\n\tconst modal = useModalContext();\n\n\treturn (\n\t\t<StyledContainer\n\t\t\tclassName=\"cv-root\"\n\t\t\tstyle={{\n\t\t\t\tminHeight: 320,\n\t\t\t}}\n\t\t>\n\t\t\t{modal !== null && (\n\t\t\t\t<StyledButtonWrapper>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"clean\"\n\t\t\t\t\t\tonClick={modal.onClose}\n\t\t\t\t\t\ttitle={__('Close')}\n\t\t\t\t\t\ticon={<IconCancel />}\n\t\t\t\t\t/>\n\t\t\t\t</StyledButtonWrapper>\n\t\t\t)}\n\n\t\t\t<StyledWrapper>{props.children}</StyledWrapper>\n\t\t</StyledContainer>\n\t);\n}\n\nconst StyledContainer = styled.div`\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tposition: relative;\n\tbackground-color: ${token.gray10};\n`;\n\nconst StyledButtonWrapper = styled.div`\n\tposition: absolute;\n\ttop: ${token.spacing4};\n\tright: ${token.spacing5};\n`;\n\nconst StyledWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tfont-size: ${token.fontSize300};\n`;\n"],"names":["Container","props","modal","useModalContext","jsxs","StyledContainer","StyledButtonWrapper","jsx","Button","__","IconCancel","StyledWrapper","styled","token"],"mappings":";;;;;;AAQO,SAASA,EAAUC,GAAsC;AAC/D,QAAMC,IAAQC,EAAA;AAEd,SACC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,WAAU;AAAA,MACV,OAAO;AAAA,QACN,WAAW;AAAA,MAAA;AAAA,MAGX,UAAA;AAAA,QAAAH,MAAU,0BACTI,GAAA,EACA,UAAA,gBAAAC;AAAA,UAACC;AAAA,UAAA;AAAA,YACA,SAAQ;AAAA,YACR,SAASN,EAAM;AAAA,YACf,OAAOO,EAAG,OAAO;AAAA,YACjB,wBAAOC,GAAA,CAAA,CAAW;AAAA,UAAA;AAAA,QAAA,GAEpB;AAAA,QAGD,gBAAAH,EAACI,GAAA,EAAe,UAAAV,EAAM,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlC;AAEA,MAAMI,IAAkBO,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAQVC,EAAM,MAAM;AAAA,GAG3BP,IAAsBM,EAAO;AAAA;AAAA,QAE3BC,EAAM,QAAQ;AAAA,UACZA,EAAM,QAAQ;AAAA,GAGlBF,IAAgBC,EAAO;AAAA;AAAA;AAAA,cAGfC,EAAM,WAAW;AAAA;"}

package/ContextAction.js

@@ -0,0 +1,42 @@
+import { jsx as n, jsxs as u } from "react/jsx-runtime";
+import { IconOpenInNew as l, IconCrop as a, IconMore as C } from "@bynder/icons";
+import { Card as i, Dropdown as o } from "@bynder/design-system";
+import { useConfig as p } from "./ConfigContext.js";
+import { __ as w } from "./index2.js";
+function g({ transformBaseUrl: s, portalUrl: r, onOpenDAT: c }) {
+  const { hideExternalAccess: e, selectionMode: d } = p(), t = d === "SingleSelectFile" && s;
+  return !t && e ? null : !t && !e ? /* @__PURE__ */ n(
+    i.ContextActionButton,
+    {
+      "aria-label": w("Open in new tab"),
+      onClick: () => {
+        window.open(r, "_blank");
+      },
+      children: /* @__PURE__ */ n(l, {})
+    }
+  ) : t && e ? /* @__PURE__ */ n(i.ContextActionButton, { "aria-label": "New transformation", onClick: c, children: /* @__PURE__ */ n(a, {}) }) : /* @__PURE__ */ u(
+    o,
+    {
+      trigger: ({ isOpen: m, ...f }) => /* @__PURE__ */ n(i.ContextActionButton, { "aria-label": "Menu", isPressed: m, ...f, children: /* @__PURE__ */ n(C, {}) }),
+      isClosedOnScroll: !0,
+      children: [
+        /* @__PURE__ */ n(
+          o.Item,
+          {
+            icon: /* @__PURE__ */ n(l, {}),
+            onClick: () => {
+              window.open(r, "_blank");
+            },
+            children: "Open asset"
+          }
+        ),
+        /* @__PURE__ */ n(o.Divider, {}),
+        /* @__PURE__ */ n(o.Item, { icon: /* @__PURE__ */ n(a, {}), onClick: c, children: "New transformation" })
+      ]
+    }
+  );
+}
+export {
+  g as ContextAction
+};
+//# sourceMappingURL=ContextAction.js.map

package/ContextAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextAction.js","sources":["../../src/views/asset/asset-card/ContextAction.tsx"],"sourcesContent":["import React from 'react';\nimport { IconCrop, IconMore, IconOpenInNew } from '@bynder/icons';\nimport { Card, Dropdown } from '@bynder/design-system';\nimport { useConfig } from '../../../app-config/ConfigContext';\nimport { __ } from '../../../localization';\n\ninterface Props {\n\ttransformBaseUrl?: string;\n\tportalUrl: string;\n\tonOpenDAT: () => void;\n}\n\nexport function ContextAction({ transformBaseUrl, portalUrl, onOpenDAT }: Props) {\n\tconst { hideExternalAccess, selectionMode } = useConfig();\n\tconst showDat = selectionMode === 'SingleSelectFile' && transformBaseUrl;\n\n\tif (!showDat && hideExternalAccess) return null;\n\n\tif (!showDat && !hideExternalAccess)\n\t\treturn (\n\t\t\t<Card.ContextActionButton\n\t\t\t\taria-label={__('Open in new tab')}\n\t\t\t\tonClick={() => {\n\t\t\t\t\twindow.open(portalUrl, '_blank');\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<IconOpenInNew />\n\t\t\t</Card.ContextActionButton>\n\t\t);\n\n\tif (showDat && hideExternalAccess)\n\t\treturn (\n\t\t\t<Card.ContextActionButton aria-label=\"New transformation\" onClick={onOpenDAT}>\n\t\t\t\t<IconCrop />\n\t\t\t</Card.ContextActionButton>\n\t\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\ttrigger={({ isOpen, ...triggerProps }) => (\n\t\t\t\t<Card.ContextActionButton aria-label=\"Menu\" isPressed={isOpen} {...triggerProps}>\n\t\t\t\t\t<IconMore />\n\t\t\t\t</Card.ContextActionButton>\n\t\t\t)}\n\t\t\tisClosedOnScroll\n\t\t>\n\t\t\t<Dropdown.Item\n\t\t\t\ticon={<IconOpenInNew />}\n\t\t\t\tonClick={() => {\n\t\t\t\t\twindow.open(portalUrl, '_blank');\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tOpen asset\n\t\t\t</Dropdown.Item>\n\n\t\t\t<Dropdown.Divider />\n\t\t\t<Dropdown.Item icon={<IconCrop />} onClick={onOpenDAT}>\n\t\t\t\tNew transformation\n\t\t\t</Dropdown.Item>\n\t\t</Dropdown>\n\t);\n}\n"],"names":["ContextAction","transformBaseUrl","portalUrl","onOpenDAT","hideExternalAccess","selectionMode","useConfig","showDat","jsx","Card","__","IconOpenInNew","IconCrop","jsxs","Dropdown","isOpen","triggerProps","IconMore"],"mappings":";;;;;AAYO,SAASA,EAAc,EAAE,kBAAAC,GAAkB,WAAAC,GAAW,WAAAC,KAAoB;AAChF,QAAM,EAAE,oBAAAC,GAAoB,eAAAC,EAAA,IAAkBC,EAAA,GACxCC,IAAUF,MAAkB,sBAAsBJ;AAExD,SAAI,CAACM,KAAWH,IAA2B,OAEvC,CAACG,KAAW,CAACH,IAEf,gBAAAI;AAAA,IAACC,EAAK;AAAA,IAAL;AAAA,MACA,cAAYC,EAAG,iBAAiB;AAAA,MAChC,SAAS,MAAM;AACd,eAAO,KAAKR,GAAW,QAAQ;AAAA,MAChC;AAAA,MAEA,4BAACS,GAAA,CAAA,CAAc;AAAA,IAAA;AAAA,EAAA,IAIdJ,KAAWH,IAEb,gBAAAI,EAACC,EAAK,qBAAL,EAAyB,cAAW,sBAAqB,SAASN,GAClE,UAAA,gBAAAK,EAACI,GAAA,CAAA,CAAS,EAAA,CACX,IAID,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,SAAS,CAAC,EAAE,QAAAC,GAAQ,GAAGC,EAAA,MACtB,gBAAAR,EAACC,EAAK,qBAAL,EAAyB,cAAW,QAAO,WAAWM,GAAS,GAAGC,GAClE,UAAA,gBAAAR,EAACS,KAAS,GACX;AAAA,MAED,kBAAgB;AAAA,MAEhB,UAAA;AAAA,QAAA,gBAAAT;AAAA,UAACM,EAAS;AAAA,UAAT;AAAA,YACA,wBAAOH,GAAA,EAAc;AAAA,YACrB,SAAS,MAAM;AACd,qBAAO,KAAKT,GAAW,QAAQ;AAAA,YAChC;AAAA,YACA,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAID,gBAAAM,EAACM,EAAS,SAAT,EAAiB;AAAA,QAClB,gBAAAN,EAACM,EAAS,MAAT,EAAc,wBAAOF,GAAA,CAAA,CAAS,GAAI,SAAST,GAAW,UAAA,qBAAA,CAEvD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGH;"}

package/Dat/Dat.d.ts

@@ -1,12 +1,2 @@
-import React from 'react';
-import { Transformation } from './types';
-interface Props {
-    transformBaseUrl: string;
-    assetName: string;
-    extension: string;
-    transformation?: Transformation;
-    setTransformation: (transformation?: Transformation) => void;
-    closeDat: () => void;
-}
-export declare function Dat({ transformBaseUrl, assetName, extension, transformation, setTransformation, closeDat, }: Props): React.ReactPortal | null;
-export {};
+import { default as React } from 'react';
+export declare function Dat(): React.ReactPortal | null;

package/Dat/DatDropdownItem.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { Asset } from '../views/asset/asset.type';
 interface Props {
     transformBaseUrl?: string;

package/Dat/index.d.ts

@@ -1,3 +1,2 @@
 export { Dat } from './Dat';
 export { DatDropdownItem } from './DatDropdownItem';
-export { DatProvider, useTransformations } from './DatContext';

package/Dat.js

@@ -0,0 +1,90 @@
+import { jsxs as b, jsx as a } from "react/jsx-runtime";
+import { useState as h, useEffect as C } from "react";
+import { createPortal as T } from "react-dom";
+import y from "styled-components";
+import { token as u, Modal as M, Button as c } from "@bynder/design-system";
+import { DATBuilder as A } from "@bynder/dat-frontend";
+import { useRootElement as P } from "./RootElementContext.js";
+import { useDat as S } from "./useDatStore.js";
+function L() {
+  const l = P(), [r, v] = h(), [i, d] = h(), {
+    datUrl: x,
+    assetName: g,
+    datExtension: k,
+    transformation: t,
+    closeDat: m,
+    setTransformation: f
+  } = S();
+  C(() => {
+    const o = l.querySelector(".cv-root");
+    o && v(o);
+  }, [l]);
+  const s = (o, n) => {
+    o && t && f({ url: o, preset: n, asset: t.asset }), m();
+  }, p = (o, n) => {
+    w(n) && t ? d({ url: o, preset: n, asset: t.asset }) : s(o, n);
+  }, e = () => d(void 0), B = () => {
+    s(i?.url, i?.preset), e();
+  }, D = () => {
+    f(void 0), e(), m();
+  }, w = (o) => o.content.io.length > 0;
+  return r ? T(
+    /* @__PURE__ */ b(U, { children: [
+      /* @__PURE__ */ a(
+        E,
+        {
+          mediaInfo: {
+            extension: k,
+            baseURL: x,
+            name: g,
+            width: 1,
+            height: 1
+          },
+          canViewPresets: !1,
+          canViewTransformations: !0,
+          hideBottomBar: !0,
+          onApply: s,
+          onDone: p,
+          onBack: p,
+          initialTransformations: t?.preset?.content.io
+        }
+      ),
+      /* @__PURE__ */ a(
+        M,
+        {
+          isOpen: !!i,
+          title: "Transformations not yet applied",
+          container: r,
+          onClose: e,
+          actionPrimary: /* @__PURE__ */ a(c, { variant: "primary", onClick: B, children: "Apply transformations" }),
+          actionSecondary: /* @__PURE__ */ a(c, { variant: "secondary", onClick: e, children: "Cancel" }),
+          actionTertiary: /* @__PURE__ */ a(c, { variant: "secondary", onClick: D, children: "Discard changes" }),
+          children: "Transformations not yet applied. Do you want to apply transformations now, or discard changes?"
+        }
+      )
+    ] }),
+    r
+  ) : null;
+}
+const U = y.div`
+	background-color: ${u.white};
+	z-index: 999999;
+	overflow: hidden;
+	border-radius: ${u.radiusBase};
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	box-shadow: 0 2px 12px 0 rgba(0, 34, 51, 0.1);
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+`, E = y(A)`
+	height: 100%;
+	width: 100%;
+`;
+export {
+  L as Dat
+};
+//# sourceMappingURL=Dat.js.map

package/Dat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dat.js","sources":["../../src/Dat/Dat.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport styled from 'styled-components';\nimport { Button, Modal, token } from '@bynder/design-system';\nimport { DATBuilder, Preset } from '@bynder/dat-frontend';\n\nimport { useRootElement } from '../style/RootElementContext';\nimport { Transformation } from './types';\nimport { useDat } from '@src/store/useDatStore';\n\nexport function Dat() {\n\tconst root = useRootElement();\n\tconst [portalDiv, setPortalDiv] = useState<Element>();\n\tconst [backModal, setBackModal] = useState<Transformation | undefined>();\n\n\tconst {\n\t\tdatUrl: transformBaseUrl,\n\t\tassetName,\n\t\tdatExtension: extension,\n\t\ttransformation,\n\t\tcloseDat,\n\t\tsetTransformation,\n\t} = useDat();\n\n\tuseEffect(() => {\n\t\tconst div = root.querySelector('.cv-root');\n\n\t\tif (div) {\n\t\t\tsetPortalDiv(div);\n\t\t}\n\t}, [root]);\n\n\tconst onApply = (url?: string, preset?: Preset) => {\n\t\tif (url && transformation) {\n\t\t\tsetTransformation({ url, preset, asset: transformation.asset });\n\t\t}\n\n\t\tcloseDat();\n\t};\n\n\tconst onDone = (url: string, preset: Preset) => {\n\t\tif (hasActiveChanges(preset) && transformation) {\n\t\t\tsetBackModal({ url, preset, asset: transformation.asset });\n\t\t} else {\n\t\t\tonApply(url, preset);\n\t\t}\n\t};\n\n\tconst closeBackModal = () => setBackModal(undefined);\n\n\tconst applyFromBackModal = () => {\n\t\tonApply(backModal?.url, backModal?.preset);\n\t\tcloseBackModal();\n\t};\n\n\tconst discard = () => {\n\t\tsetTransformation(undefined);\n\t\tcloseBackModal();\n\t\tcloseDat();\n\t};\n\n\tconst hasActiveChanges = (preset: Preset) => preset.content.io.length > 0;\n\n\tif (!portalDiv) return null;\n\n\treturn createPortal(\n\t\t<Container>\n\t\t\t<StyledDatUi\n\t\t\t\tmediaInfo={{\n\t\t\t\t\textension,\n\t\t\t\t\tbaseURL: transformBaseUrl,\n\t\t\t\t\tname: assetName,\n\t\t\t\t\twidth: 1,\n\t\t\t\t\theight: 1,\n\t\t\t\t}}\n\t\t\t\tcanViewPresets={false}\n\t\t\t\tcanViewTransformations\n\t\t\t\thideBottomBar\n\t\t\t\tonApply={onApply}\n\t\t\t\tonDone={onDone}\n\t\t\t\tonBack={onDone}\n\t\t\t\tinitialTransformations={transformation?.preset?.content.io}\n\t\t\t/>\n\n\t\t\t<Modal\n\t\t\t\tisOpen={!!backModal}\n\t\t\t\ttitle=\"Transformations not yet applied\"\n\t\t\t\tcontainer={portalDiv}\n\t\t\t\tonClose={closeBackModal}\n\t\t\t\tactionPrimary={\n\t\t\t\t\t<Button variant=\"primary\" onClick={applyFromBackModal}>\n\t\t\t\t\t\tApply transformations\n\t\t\t\t\t</Button>\n\t\t\t\t}\n\t\t\t\tactionSecondary={\n\t\t\t\t\t<Button variant=\"secondary\" onClick={closeBackModal}>\n\t\t\t\t\t\tCancel\n\t\t\t\t\t</Button>\n\t\t\t\t}\n\t\t\t\tactionTertiary={\n\t\t\t\t\t<Button variant=\"secondary\" onClick={discard}>\n\t\t\t\t\t\tDiscard changes\n\t\t\t\t\t</Button>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\tTransformations not yet applied. Do you want to apply transformations now, or\n\t\t\t\tdiscard changes?\n\t\t\t</Modal>\n\t\t</Container>,\n\t\tportalDiv,\n\t);\n}\n\nconst Container = styled.div`\n\tbackground-color: ${token.white};\n\tz-index: 999999;\n\toverflow: hidden;\n\tborder-radius: ${token.radiusBase};\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: stretch;\n\tbox-shadow: 0 2px 12px 0 rgba(0, 34, 51, 0.1);\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n`;\n\nconst StyledDatUi = styled(DATBuilder)`\n\theight: 100%;\n\twidth: 100%;\n`;\n"],"names":["Dat","root","useRootElement","portalDiv","setPortalDiv","useState","backModal","setBackModal","transformBaseUrl","assetName","extension","transformation","closeDat","setTransformation","useDat","useEffect","div","onApply","url","preset","onDone","hasActiveChanges","closeBackModal","applyFromBackModal","discard","createPortal","Container","jsx","StyledDatUi","Modal","Button","styled","token","DATBuilder"],"mappings":";;;;;;;;AAUO,SAASA,IAAM;AACrB,QAAMC,IAAOC,EAAA,GACP,CAACC,GAAWC,CAAY,IAAIC,EAAA,GAC5B,CAACC,GAAWC,CAAY,IAAIF,EAAA,GAE5B;AAAA,IACL,QAAQG;AAAA,IACR,WAAAC;AAAA,IACA,cAAcC;AAAA,IACd,gBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,mBAAAC;AAAA,EAAA,IACGC,EAAA;AAEJ,EAAAC,EAAU,MAAM;AACf,UAAMC,IAAMf,EAAK,cAAc,UAAU;AAEzC,IAAIe,KACHZ,EAAaY,CAAG;AAAA,EAElB,GAAG,CAACf,CAAI,CAAC;AAET,QAAMgB,IAAU,CAACC,GAAcC,MAAoB;AAClD,IAAID,KAAOP,KACVE,EAAkB,EAAE,KAAAK,GAAK,QAAAC,GAAQ,OAAOR,EAAe,OAAO,GAG/DC,EAAA;AAAA,EACD,GAEMQ,IAAS,CAACF,GAAaC,MAAmB;AAC/C,IAAIE,EAAiBF,CAAM,KAAKR,IAC/BJ,EAAa,EAAE,KAAAW,GAAK,QAAAC,GAAQ,OAAOR,EAAe,OAAO,IAEzDM,EAAQC,GAAKC,CAAM;AAAA,EAErB,GAEMG,IAAiB,MAAMf,EAAa,MAAS,GAE7CgB,IAAqB,MAAM;AAChC,IAAAN,EAAQX,GAAW,KAAKA,GAAW,MAAM,GACzCgB,EAAA;AAAA,EACD,GAEME,IAAU,MAAM;AACrB,IAAAX,EAAkB,MAAS,GAC3BS,EAAA,GACAV,EAAA;AAAA,EACD,GAEMS,IAAmB,CAACF,MAAmBA,EAAO,QAAQ,GAAG,SAAS;AAExE,SAAKhB,IAEEsB;AAAA,sBACLC,GAAA,EACA,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACA,WAAW;AAAA,YACV,WAAAlB;AAAA,YACA,SAASF;AAAA,YACT,MAAMC;AAAA,YACN,OAAO;AAAA,YACP,QAAQ;AAAA,UAAA;AAAA,UAET,gBAAgB;AAAA,UAChB,wBAAsB;AAAA,UACtB,eAAa;AAAA,UACb,SAAAQ;AAAA,UACA,QAAAG;AAAA,UACA,QAAQA;AAAA,UACR,wBAAwBT,GAAgB,QAAQ,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,MAGzD,gBAAAgB;AAAA,QAACE;AAAA,QAAA;AAAA,UACA,QAAQ,CAAC,CAACvB;AAAA,UACV,OAAM;AAAA,UACN,WAAWH;AAAA,UACX,SAASmB;AAAA,UACT,eACC,gBAAAK,EAACG,GAAA,EAAO,SAAQ,WAAU,SAASP,GAAoB,UAAA,yBAEvD;AAAA,UAED,iBACC,gBAAAI,EAACG,GAAA,EAAO,SAAQ,aAAY,SAASR,GAAgB,UAAA,UAErD;AAAA,UAED,gBACC,gBAAAK,EAACG,GAAA,EAAO,SAAQ,aAAY,SAASN,GAAS,UAAA,mBAE9C;AAAA,UAED,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGD,GACD;AAAA,IACArB;AAAA,EAAA,IA9CsB;AAgDxB;AAEA,MAAMuB,IAAYK,EAAO;AAAA,qBACJC,EAAM,KAAK;AAAA;AAAA;AAAA,kBAGdA,EAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAY5BJ,IAAcG,EAAOE,CAAU;AAAA;AAAA;AAAA;"}

package/DatDropdownItem.js

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

package/DatDropdownItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatDropdownItem.js","sources":["../../src/Dat/DatDropdownItem.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { IconCrop, IconArrowRight } from '@bynder/icons';\nimport { List, Thumbnail } from '@bynder/design-system';\nimport { Asset } from '../views/asset/asset.type';\nimport { useDat } from '@src/store/useDatStore';\n\ninterface Props {\n\ttransformBaseUrl?: string;\n\tasset: Asset;\n\ttoggleDropdown: () => void;\n}\n\nexport function DatDropdownItem({ transformBaseUrl, asset, toggleDropdown }: Props) {\n\tconst { transformation, openDat } = useDat();\n\n\tconst [thumbnailUrl, setThumbnailUrl] = useState<string>();\n\tconst transformationAmount = transformation?.preset?.content?.io?.length ?? 0;\n\n\tuseEffect(() => {\n\t\t// Resize url to thumbnail size\n\t\tif (transformation?.url) {\n\t\t\tconst { url } = transformation;\n\t\t\tconst thumbnailSizeParam = 'io=transform:fill,width:40,height:40';\n\n\t\t\tif (url.includes('io=transform:fill')) {\n\t\t\t\tsetThumbnailUrl(\n\t\t\t\t\turl.replace(/io=transform:fill,width:[0-9]+,height:[0-9]+/, thumbnailSizeParam),\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tsetThumbnailUrl(`${url}&${thumbnailSizeParam}`);\n\t\t}\n\t}, [transformation]);\n\n\tif (!transformBaseUrl) return null;\n\n\treturn (\n\t\t<>\n\t\t\t<List.Divider />\n\t\t\t<ListItem\n\t\t\t\tthumbnail={\n\t\t\t\t\t!transformation || transformationAmount === 0 ? (\n\t\t\t\t\t\t<Thumbnail icon={<IconCrop />} data-testid=\"crop-icon\" />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Thumbnail\n\t\t\t\t\t\t\tvariant=\"content\"\n\t\t\t\t\t\t\timageUrl={thumbnailUrl}\n\t\t\t\t\t\t\tdata-testid=\"thumbnail-image\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t\trightElements={<IconArrowRight />}\n\t\t\t\tonClick={() => {\n\t\t\t\t\ttoggleDropdown();\n\t\t\t\t\topenDat(transformBaseUrl, asset, asset.name);\n\t\t\t\t}}\n\t\t\t\tsubtext={\n\t\t\t\t\ttransformation && transformationAmount > 0\n\t\t\t\t\t\t? `${transformationAmount} transformation${\n\t\t\t\t\t\t\t\ttransformationAmount === 1 ? '' : 's'\n\t\t\t\t\t\t  }`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t>\n\t\t\t\tNew transformation\n\t\t\t</ListItem>\n\t\t</>\n\t);\n}\n\nconst ListItem = styled(List.Item)`\n\tmax-width: 100%;\n\twidth: 340px;\n\tmargin-left: 0;\n`;\n"],"names":["DatDropdownItem","transformBaseUrl","asset","toggleDropdown","transformation","openDat","useDat","thumbnailUrl","setThumbnailUrl","useState","transformationAmount","useEffect","url","thumbnailSizeParam","jsxs","Fragment","jsx","List","ListItem","Thumbnail","IconCrop","IconArrowRight","styled"],"mappings":";;;;;;AAaO,SAASA,EAAgB,EAAE,kBAAAC,GAAkB,OAAAC,GAAO,gBAAAC,KAAyB;AACnF,QAAM,EAAE,gBAAAC,GAAgB,SAAAC,EAAA,IAAYC,EAAA,GAE9B,CAACC,GAAcC,CAAe,IAAIC,EAAA,GAClCC,IAAuBN,GAAgB,QAAQ,SAAS,IAAI,UAAU;AAkB5E,SAhBAO,EAAU,MAAM;AAEf,QAAIP,GAAgB,KAAK;AACxB,YAAM,EAAE,KAAAQ,MAAQR,GACVS,IAAqB;AAE3B,MAAID,EAAI,SAAS,mBAAmB,KACnCJ;AAAA,QACCI,EAAI,QAAQ,gDAAgDC,CAAkB;AAAA,MAAA,GAIhFL,EAAgB,GAAGI,CAAG,IAAIC,CAAkB,EAAE;AAAA,IAC/C;AAAA,EACD,GAAG,CAACT,CAAc,CAAC,GAEdH,IAGJ,gBAAAa,EAAAC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,EAAK,SAAL,EAAa;AAAA,IACd,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACA,WACC,CAACd,KAAkBM,MAAyB,IAC3C,gBAAAM,EAACG,GAAA,EAAU,MAAM,gBAAAH,EAACI,GAAA,CAAA,CAAS,GAAI,eAAY,aAAY,IAEvD,gBAAAJ;AAAA,UAACG;AAAA,UAAA;AAAA,YACA,SAAQ;AAAA,YACR,UAAUZ;AAAA,YACV,eAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAIf,iCAAgBc,GAAA,EAAe;AAAA,QAC/B,SAAS,MAAM;AACd,UAAAlB,EAAA,GACAE,EAAQJ,GAAkBC,GAAOA,EAAM,IAAI;AAAA,QAC5C;AAAA,QACA,SACCE,KAAkBM,IAAuB,IACtC,GAAGA,CAAoB,kBACvBA,MAAyB,IAAI,KAAK,GAClC,KACA;AAAA,QAEJ,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED,GACD,IAhC6B;AAkC/B;AAEA,MAAMQ,IAAWI,EAAOL,EAAK,IAAI;AAAA;AAAA;AAAA;AAAA;"}

package/DesignSystemContext.js

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

package/DesignSystemContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesignSystemContext.js","sources":["../../src/style/DesignSystemContext.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheetManager } from 'styled-components';\nimport { DesignSystemProvider as BaseDesignSystemProvider } from '@bynder/design-system';\n\nimport { useRootElement } from './RootElementContext';\n\nexport function DesignSystemProvider(props: { children: React.ReactNode }) {\n\tconst rootElement = useRootElement();\n\n\treturn (\n\t\t<StyleSheetManager target={rootElement}>\n\t\t\t<BaseDesignSystemProvider zIndexBase={1000000}>\n\t\t\t\t{props.children}\n\t\t\t</BaseDesignSystemProvider>\n\t\t</StyleSheetManager>\n\t);\n}\n"],"names":["DesignSystemProvider","props","rootElement","useRootElement","jsx","StyleSheetManager","BaseDesignSystemProvider"],"mappings":";;;;AAMO,SAASA,EAAqBC,GAAsC;AAC1E,QAAMC,IAAcC,EAAA;AAEpB,SACC,gBAAAC,EAACC,GAAA,EAAkB,QAAQH,GAC1B,UAAA,gBAAAE,EAACE,KAAyB,YAAY,KACpC,UAAAL,EAAM,SAAA,CACR,GACD;AAEF;"}

package/DirectionSelect.js

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