@bynder/compact-view 5.1.3 → 5.1.4

package/AssetList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetList.js","sources":["../../src/views/asset/AssetList.tsx"],"sourcesContent":["import React, { useRef, useState, useEffect } from 'react';\n\nimport { styled } from 'styled-components';\nimport { AssetCard } from './asset-card/AssetCard';\nimport { CardSkeleton } from '@src/common/components/CardSkeleton';\nimport { SelectionMode } from '@src/app-config/appConfig.type';\nimport { DragAction, DragSelect } from '@src/common/components/DragSelect';\nimport { Dimensions, useDimensions } from '@src/common/hooks/useDimensions';\nimport { InfiniteScroll } from '@src/common/components/InfiniteScroll';\nimport { Theme } from '@src/style/Theming';\nimport { useSelection } from '@src/select/SelectionContext';\nimport { Asset, AssetData } from './asset.type';\nimport { useSimilaritySearchStore } from '@src/store/useSimilaritySearchStore';\nimport { useSimilarityAssets } from '@src/api/getSimilarityAssets';\n\ninterface Props {\n\tassets: AssetData;\n\tcount?: number;\n\thasNextPage?: boolean;\n\tisLoading?: boolean;\n\tloadMore?: () => void;\n\tonSelect?: (assets: Asset[]) => void;\n\tonToggle?: (assets: Asset[]) => void;\n\temptyStateElement?: React.ReactElement | null;\n\tselectedAssetIds?: string[];\n\tselectionMode?: SelectionMode;\n\ttheme?: Theme;\n\tchildren?: React.ReactNode;\n}\n\nexport function AssetList({\n\tassets,\n\tcount,\n\thasNextPage = false,\n\tisLoading = false,\n\tloadMore = () => {\n\t\t/** do nothing */\n\t},\n\tonSelect = () => {\n\t\t/** do nothing */\n\t},\n\tonToggle = () => {\n\t\t/** do nothing */\n\t},\n\temptyStateElement = null,\n\tselectedAssetIds = [],\n\tselectionMode = 'MultiSelect',\n\ttheme,\n\tchildren = null,\n}: Props) {\n\tconst nodeRef = useRef<HTMLDivElement>(null);\n\tconst { dimensions } = useDimensions(nodeRef.current);\n\tconst [assetIdsInDragSelectBox, setAssetIdsInDragSelectBox] = useState<string[]>([]);\n\tconst [dragState, setDragState] = useState<DragAction | 'inactive'>('inactive');\n\tconst { clear: clearSelection } = useSelection();\n\n\tconst {\n\t\tsetIsEnabled: setIsSimilaritySearchEnabled,\n\t\tisEnabled: isSimilaritySearchEnabled,\n\t\tsetIsSelected,\n\t} = useSimilaritySearchStore();\n\tconst { resetData, search } = useSimilarityAssets();\n\n\tconst [assetsPerColumn, assetsPerRow] = calculateAssetsInDimensions(count, dimensions);\n\n\tconst hasCheckedSimilarity = useRef(false);\n\n\tuseEffect(() => {\n\t\tif (!hasCheckedSimilarity.current && assets.value && assets.value.length > 0) {\n\t\t\thasCheckedSimilarity.current = true;\n\n\t\t\tconst checkSimilaritySearchAvailability = async () => {\n\t\t\t\tif (assets.value && assets.value.length > 0) {\n\t\t\t\t\tconst firstImageAsset =\n\t\t\t\t\t\tassets.value.find((asset) => asset.__typename === 'Image') ||\n\t\t\t\t\t\tassets.value[0];\n\n\t\t\t\t\tconst isAISearchEnabled = await search([firstImageAsset.databaseId]);\n\t\t\t\t\tsetIsSimilaritySearchEnabled(isAISearchEnabled || false);\n\t\t\t\t}\n\t\t\t};\n\n\t\t\tcheckSimilaritySearchAvailability();\n\t\t}\n\t}, [assets.value, search, setIsSimilaritySearchEnabled]);\n\n\tconst handleSimilaritySearch = (selectedAsset: string[]) => {\n\t\tresetData();\n\t\tsetIsSelected(true);\n\t\tclearSelection();\n\t\tsearch(selectedAsset);\n\t};\n\n\tfunction getAssetById(id: string): Asset | undefined {\n\t\tif (assets.tag === 'Loading' && !assets.value) {\n\t\t\treturn;\n\t\t}\n\n\t\treturn assets.value?.find((asset) => id === asset.id);\n\t}\n\n\tfunction handleDragSelect(assetsToSelect) {\n\t\tsetAssetIdsInDragSelectBox((prevAssets) => [...prevAssets, ...assetsToSelect]);\n\t}\n\n\tfunction handleDragDeselect(assetsToDeselect) {\n\t\tsetAssetIdsInDragSelectBox((prevAssets) =>\n\t\t\tprevAssets.filter((id) => !assetsToDeselect.includes(id)),\n\t\t);\n\t}\n\n\tfunction handleDragStart(action: DragAction) {\n\t\tsetDragState(action);\n\t}\n\n\tfunction handleDragEnd(action: DragAction) {\n\t\tsetDragState('inactive');\n\n\t\tif (assetIdsInDragSelectBox.length) {\n\t\t\t// Typescript is complaining about the type being (Asset | undefined)[]\n\t\t\t// if I simply use .map() and .filter() instead of this foreach solution.\n\t\t\tconst assetIdsInDragBox: Asset[] = [];\n\t\t\tassetIdsInDragSelectBox.forEach((id) => {\n\t\t\t\tconst asset = getAssetById(id);\n\n\t\t\t\tif (asset) {\n\t\t\t\t\tassetIdsInDragBox.push(asset);\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tif (action === 'inverse') {\n\t\t\t\tonToggle(assetIdsInDragBox);\n\t\t\t} else {\n\t\t\t\tonSelect(assetIdsInDragBox);\n\t\t\t}\n\n\t\t\tsetAssetIdsInDragSelectBox([]);\n\t\t}\n\t}\n\n\tfunction isAssetSelected(asset: Asset): boolean {\n\t\tif (\n\t\t\tdragState === 'inverse' &&\n\t\t\tselectedAssetIds.includes(asset.id) &&\n\t\t\tassetIdsInDragSelectBox.includes(asset.id)\n\t\t) {\n\t\t\t// If we are going to inverse the selection\n\t\t\t// this means that an asset will be deselected\n\t\t\t// if it was selected before and is part of the\n\t\t\t// dragselection now.\n\t\t\treturn false;\n\t\t}\n\n\t\treturn selectedAssetIds.includes(asset.id) || assetIdsInDragSelectBox.includes(asset.id);\n\t}\n\n\tfunction makeSelection(clickedAsset: Asset, event: React.MouseEvent) {\n\t\tif (event.shiftKey && selectionMode === 'MultiSelect' && assets.value?.length) {\n\t\t\t// if shift is pressed, select all assets between the previously selected one\n\t\t\t// and the current one.\n\t\t\tconst currentIndex = assets.value.findIndex((asset) => asset.id === clickedAsset.id);\n\t\t\tlet previousIndex = assets.value?.findIndex(\n\t\t\t\t(asset) => asset.id === selectedAssetIds[selectedAssetIds.length - 1],\n\t\t\t);\n\n\t\t\tif (previousIndex === -1) {\n\t\t\t\tpreviousIndex = 0;\n\t\t\t}\n\n\t\t\tif (previousIndex < currentIndex) {\n\t\t\t\tonSelect(assets.value?.slice(previousIndex, currentIndex + 1));\n\t\t\t} else {\n\t\t\t\tonSelect(assets.value.slice(currentIndex, previousIndex + 1));\n\t\t\t}\n\t\t} else {\n\t\t\tonToggle([clickedAsset]);\n\t\t}\n\t}\n\n\treturn (\n\t\t<AssetListContainer\n\t\t\tref={nodeRef}\n\t\t\tdata-drag-select-container\n\t\t\tdata-testid=\"asset-list-container\"\n\t\t>\n\t\t\t{children}\n\n\t\t\t<div className=\"card-list\" role=\"listbox\">\n\t\t\t\t{assets.tag === 'Loading' && !assets.value && (\n\t\t\t\t\t<CardSkeleton rows={assetsPerColumn} columns={assetsPerRow} />\n\t\t\t\t)}\n\n\t\t\t\t{assets.tag === 'Loaded' && assets.value.length === 0 && emptyStateElement}\n\n\t\t\t\t{((assets.tag === 'Loading' && assets.value) || assets.tag === 'Loaded') && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{selectionMode === 'MultiSelect' && (\n\t\t\t\t\t\t\t<DragSelect\n\t\t\t\t\t\t\t\tdragContainer=\"[data-drag-select-container]\"\n\t\t\t\t\t\t\t\tselectionBoxCustomAttr={{\n\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\tzIndex: 1000000,\n\t\t\t\t\t\t\t\t\t\tborderColor: theme?.colorPrimary,\n\t\t\t\t\t\t\t\t\t\tborderWidth: '2px',\n\t\t\t\t\t\t\t\t\t\tborderRadius: '5px',\n\t\t\t\t\t\t\t\t\t\tcolor: 'rgba(0, 34, 51, 0.8)',\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\tonSelect={handleDragSelect}\n\t\t\t\t\t\t\t\tonDeselect={handleDragDeselect}\n\t\t\t\t\t\t\t\tonDragStart={handleDragStart}\n\t\t\t\t\t\t\t\tonDragEnd={handleDragEnd}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<InfiniteScroll\n\t\t\t\t\t\t\thasNextPage={hasNextPage}\n\t\t\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\t\t\tloadMore={loadMore}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{assets.value?.map((asset, index) => (\n\t\t\t\t\t\t\t\t<AssetCard\n\t\t\t\t\t\t\t\t\tisSilimilaritySearchEnabled={isSimilaritySearchEnabled}\n\t\t\t\t\t\t\t\t\tkey={asset.id}\n\t\t\t\t\t\t\t\t\tisSelected={isAssetSelected(asset)}\n\t\t\t\t\t\t\t\t\tisOutlined={isAssetSelected(asset)}\n\t\t\t\t\t\t\t\t\tasset={asset}\n\t\t\t\t\t\t\t\t\tfadeIn={index >= assetsPerColumn * assetsPerRow}\n\t\t\t\t\t\t\t\t\tonClick={(clickedAsset: Asset, event: React.MouseEvent) =>\n\t\t\t\t\t\t\t\t\t\tmakeSelection(clickedAsset, event)\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonSimilaritySearch={handleSimilaritySearch}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</InfiniteScroll>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</AssetListContainer>\n\t);\n}\n\nexport function calculateAssetsInDimensions(\n\tcount: number | undefined,\n\tdimensions: Dimensions | undefined,\n): [number, number] {\n\tif (count !== undefined) {\n\t\treturn [1, count];\n\t}\n\n\tif (!dimensions) {\n\t\treturn [0, 0];\n\t}\n\n\t// Taken from 'w-48' class applied to the Card component's root div\n\tconst cardWidth = 192;\n\n\t/* This value comes from the initial version of this module. The value '172' doesn't occur\n\t * anywhere else in the project, but it appears to be approx. the sum of the image\n\t * height (128px), the title's vertical padding (24px) and the title's line height (21px). My\n\t * guess is that it was taken by inspecting the height of the card component in the browser. */\n\tconst cardHeight = 172;\n\n\t// Taken from 'm-2' class applied to the Card component's root div\n\tconst cardMargin = 8;\n\n\t// Taken from 'px-2' tailwind class applied to 'card-list' class in Styles.css\n\tconst cardListHorizontalPadding = 8;\n\n\tconst assetWidth = cardWidth + 2 * cardMargin;\n\tconst assetHeight = cardHeight + 2 * cardMargin;\n\tconst cardListContainerPadding = 2 * cardListHorizontalPadding;\n\tconst assetsPerColumn = Math.ceil(dimensions.height / assetHeight);\n\tconst assetsPerRow = Math.round((dimensions.width - cardListContainerPadding) / assetWidth);\n\n\treturn [assetsPerColumn, assetsPerRow];\n}\n\nconst AssetListContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex-grow: 1;\n\toverflow-y: auto;\n`;\n"],"names":["AssetList","assets","count","hasNextPage","isLoading","loadMore","onSelect","onToggle","emptyStateElement","selectedAssetIds","selectionMode","theme","children","nodeRef","useRef","dimensions","useDimensions","assetIdsInDragSelectBox","setAssetIdsInDragSelectBox","useState","dragState","setDragState","clearSelection","useSelection","setIsSimilaritySearchEnabled","isSimilaritySearchEnabled","setIsSelected","useSimilaritySearchStore","resetData","search","useSimilarityAssets","assetsPerColumn","assetsPerRow","calculateAssetsInDimensions","hasCheckedSimilarity","useEffect","firstImageAsset","asset","isAISearchEnabled","handleSimilaritySearch","selectedAsset","getAssetById","id","handleDragSelect","assetsToSelect","prevAssets","handleDragDeselect","assetsToDeselect","handleDragStart","action","handleDragEnd","assetIdsInDragBox","isAssetSelected","makeSelection","clickedAsset","event","currentIndex","previousIndex","jsxs","AssetListContainer","CardSkeleton","Fragment","jsx","DragSelect","InfiniteScroll","index","AssetCard","cardWidth","cardHeight","cardMargin","cardListHorizontalPadding","assetWidth","assetHeight","cardListContainerPadding","styled"],"mappings":"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"}

package/AssetTypeItem.js

@@ -0,0 +1,34 @@
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import r from "styled-components";
+import { token as a, Checkbox as l } from "@bynder/design-system";
+import { useAssetFilter as m } from "./AssetFilterContext.js";
+import { getAssetTypeIcon as y, assetTypeToString as s } from "./asset.type.js";
+import { ListItem as f, StyledCheckboxWrapper as h, Content as p } from "./Checkbox.styles.js";
+function $(e) {
+  const n = m(), i = n.assetTypes.includes(e.type);
+  function o() {
+    i ? n.removeAssetType(e.type) : n.addAssetType(e.type);
+  }
+  const c = y(e.type);
+  return /* @__PURE__ */ t(f, { "data-testid": "advanced-options", children: /* @__PURE__ */ t(h, { $isChecked: i, $isLoading: e.isLoading, children: /* @__PURE__ */ t(
+    l,
+    {
+      isChecked: i,
+      onChange: o,
+      "data-testid": `${s(e.type)}-filter`,
+      children: /* @__PURE__ */ d(p, { $isChecked: i, children: [
+        /* @__PURE__ */ t(c, {}),
+        /* @__PURE__ */ t(g, { children: s(e.type) }),
+        /* @__PURE__ */ t("span", { className: "fade-in-down", children: e.count })
+      ] })
+    }
+  ) }) });
+}
+const g = r.div`
+	margin: 1px ${a.spacing3};
+	flex-grow: 1;
+`;
+export {
+  $ as AssetTypeItem
+};
+//# sourceMappingURL=AssetTypeItem.js.map

package/AssetTypeItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetTypeItem.js","sources":["../../src/filter/filters/advanced/AssetTypeItem.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Checkbox, token } from '@bynder/design-system';\n\nimport { useAssetFilter } from '../../AssetFilterContext';\nimport { AssetType, assetTypeToString, getAssetTypeIcon } from '../../../views/asset/asset.type';\nimport {\n\tContent,\n\tListItem,\n\tStyledCheckboxWrapper,\n} from '../../../common/components/Checkbox.styles';\n\nexport function AssetTypeItem(props: { type: AssetType; count: number; isLoading: boolean }) {\n\tconst assetFilterState = useAssetFilter();\n\n\tconst isChecked = assetFilterState.assetTypes.includes(props.type);\n\n\tfunction onClick() {\n\t\tif (isChecked) {\n\t\t\tassetFilterState.removeAssetType(props.type);\n\t\t} else {\n\t\t\tassetFilterState.addAssetType(props.type);\n\t\t}\n\t}\n\n\tconst Icon = getAssetTypeIcon(props.type);\n\n\treturn (\n\t\t<ListItem data-testid=\"advanced-options\">\n\t\t\t<StyledCheckboxWrapper $isChecked={isChecked} $isLoading={props.isLoading}>\n\t\t\t\t<Checkbox\n\t\t\t\t\tisChecked={isChecked}\n\t\t\t\t\tonChange={onClick}\n\t\t\t\t\tdata-testid={`${assetTypeToString(props.type)}-filter`}\n\t\t\t\t>\n\t\t\t\t\t<Content $isChecked={isChecked}>\n\t\t\t\t\t\t<Icon />\n\t\t\t\t\t\t<Label>{assetTypeToString(props.type)}</Label>\n\t\t\t\t\t\t<span className=\"fade-in-down\">{props.count}</span>\n\t\t\t\t\t</Content>\n\t\t\t\t</Checkbox>\n\t\t\t</StyledCheckboxWrapper>\n\t\t</ListItem>\n\t);\n}\n\nconst Label = styled.div`\n\tmargin: 1px ${token.spacing3};\n\tflex-grow: 1;\n`;\n"],"names":["AssetTypeItem","props","assetFilterState","useAssetFilter","isChecked","onClick","Icon","getAssetTypeIcon","jsx","ListItem","StyledCheckboxWrapper","Checkbox","assetTypeToString","jsxs","Content","Label","styled","token"],"mappings":";;;;;;AAYO,SAASA,EAAcC,GAA+D;AAC5F,QAAMC,IAAmBC,EAAA,GAEnBC,IAAYF,EAAiB,WAAW,SAASD,EAAM,IAAI;AAEjE,WAASI,IAAU;AAClB,IAAID,IACHF,EAAiB,gBAAgBD,EAAM,IAAI,IAE3CC,EAAiB,aAAaD,EAAM,IAAI;AAAA,EAE1C;AAEA,QAAMK,IAAOC,EAAiBN,EAAM,IAAI;AAExC,SACC,gBAAAO,EAACC,GAAA,EAAS,eAAY,oBACrB,UAAA,gBAAAD,EAACE,KAAsB,YAAYN,GAAW,YAAYH,EAAM,WAC/D,UAAA,gBAAAO;AAAA,IAACG;AAAA,IAAA;AAAA,MACA,WAAAP;AAAA,MACA,UAAUC;AAAA,MACV,eAAa,GAAGO,EAAkBX,EAAM,IAAI,CAAC;AAAA,MAE7C,UAAA,gBAAAY,EAACC,GAAA,EAAQ,YAAYV,GACpB,UAAA;AAAA,QAAA,gBAAAI,EAACF,GAAA,EAAK;AAAA,QACN,gBAAAE,EAACO,GAAA,EAAO,UAAAH,EAAkBX,EAAM,IAAI,GAAE;AAAA,QACtC,gBAAAO,EAAC,QAAA,EAAK,WAAU,gBAAgB,YAAM,MAAA,CAAM;AAAA,MAAA,EAAA,CAC7C;AAAA,IAAA;AAAA,EAAA,GAEF,EAAA,CACD;AAEF;AAEA,MAAMO,IAAQC,EAAO;AAAA,eACNC,EAAM,QAAQ;AAAA;AAAA;"}

package/AssetsView.js

@@ -0,0 +1,61 @@
+import { jsx as h } from "react/jsx-runtime";
+import { useMemo as y } from "react";
+import { useFilterAssets as A } from "./filterAssets.js";
+import { useConfig as g } from "./ConfigContext.js";
+import { useAssetFilter as T } from "./AssetFilterContext.js";
+import { useOrderingSelectors as F } from "./useOrderingStore.js";
+import { StatefulAssetList as b } from "./StatefulAssetList.js";
+import { useSearchStateByPage as v } from "./useSearchStore.js";
+import { useSimilaritySearchStore as w } from "./useSimilaritySearchStore.js";
+import { useSimilarityAssets as B } from "./getSimilarityAssets.js";
+function k() {
+  const { assetTypes: s, tags: t, isLimited: r, selectedSmartfilterOptions: o } = T(), {
+    isSelected: l,
+    isNLSSelected: m,
+    NLSSearchText: f
+  } = w(), { connection: S } = B(), { value: c } = v("assets"), i = F.use.assets(), {
+    assetFilter: e,
+    assetTypes: a,
+    language: n,
+    noCache: u
+  } = g(), d = y(() => e === void 0 ? {
+    filter: { assetTypes: s, selectedSmartfilterOptions: o, tags: t, isLimited: r },
+    searchTerm: c,
+    orderBy: i,
+    allAssetTypes: a,
+    language: n
+  } : e && e.showToolbar ? {
+    filter: { assetTypes: s, selectedSmartfilterOptions: o, tags: t, isLimited: r },
+    searchTerm: c,
+    orderBy: i,
+    predefinedFilter: e,
+    allAssetTypes: a,
+    language: n
+  } : {
+    filter: { assetTypes: s, selectedSmartfilterOptions: o, tags: t, isLimited: r },
+    predefinedFilter: e,
+    orderBy: i,
+    language: n
+  }, [
+    s,
+    t,
+    r,
+    c,
+    i,
+    e,
+    a,
+    n,
+    o
+  ]), p = A(d, u);
+  return /* @__PURE__ */ h(
+    b,
+    {
+      connection: l || m && !!f ? S : p,
+      showActiveFilters: e === void 0 || e && e.showToolbar
+    }
+  );
+}
+export {
+  k as AssetsView
+};
+//# sourceMappingURL=AssetsView.js.map

package/AssetsView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetsView.js","sources":["../../src/views/asset/AssetsView.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { useFilterAssets } from '@src/api/filterAssets';\nimport { useConfig } from '@src/app-config/ConfigContext';\nimport { useAssetFilter } from '@src/filter/AssetFilterContext';\nimport { useOrderingSelectors } from '@src/store/useOrderingStore';\nimport { StatefulAssetList } from './StatefulAssetList';\nimport { useSearchStateByPage } from '@src/store/useSearchStore';\nimport { useSimilaritySearchStore } from '@src/store/useSimilaritySearchStore';\nimport { useSimilarityAssets } from '@src/api/getSimilarityAssets';\n\nexport function AssetsView() {\n\tconst { assetTypes, tags, isLimited, selectedSmartfilterOptions } = useAssetFilter();\n\tconst {\n\t\tisSelected: isSimilaritySearchSelected,\n\t\tisNLSSelected,\n\t\tNLSSearchText,\n\t} = useSimilaritySearchStore();\n\tconst { connection: similarityConnection } = useSimilarityAssets();\n\n\tconst { value: search } = useSearchStateByPage('assets');\n\tconst ordering = useOrderingSelectors.use.assets();\n\n\tconst {\n\t\tassetFilter: predefinedFilter,\n\t\tassetTypes: allAssetTypes,\n\t\tlanguage,\n\t\tnoCache,\n\t} = useConfig();\n\n\tconst filterAssetArgs = useMemo(() => {\n\t\tif (predefinedFilter === undefined) {\n\t\t\treturn {\n\t\t\t\tfilter: { assetTypes, selectedSmartfilterOptions, tags, isLimited },\n\t\t\t\tsearchTerm: search,\n\t\t\t\torderBy: ordering,\n\t\t\t\tallAssetTypes,\n\t\t\t\tlanguage,\n\t\t\t};\n\t\t} else if (predefinedFilter && predefinedFilter.showToolbar) {\n\t\t\treturn {\n\t\t\t\tfilter: { assetTypes, selectedSmartfilterOptions, tags, isLimited },\n\t\t\t\tsearchTerm: search,\n\t\t\t\torderBy: ordering,\n\t\t\t\tpredefinedFilter,\n\t\t\t\tallAssetTypes,\n\t\t\t\tlanguage,\n\t\t\t};\n\t\t}\n\n\t\treturn {\n\t\t\tfilter: { assetTypes, selectedSmartfilterOptions, tags, isLimited },\n\t\t\tpredefinedFilter,\n\t\t\torderBy: ordering,\n\t\t\tlanguage,\n\t\t};\n\t}, [\n\t\tassetTypes,\n\t\ttags,\n\t\tisLimited,\n\t\tsearch,\n\t\tordering,\n\t\tpredefinedFilter,\n\t\tallAssetTypes,\n\t\tlanguage,\n\t\tselectedSmartfilterOptions,\n\t]);\n\n\tconst connection = useFilterAssets(filterAssetArgs, noCache);\n\n\tconst isAISearchEnabled = isSimilaritySearchSelected || (isNLSSelected && !!NLSSearchText);\n\n\treturn (\n\t\t<StatefulAssetList\n\t\t\tconnection={isAISearchEnabled ? similarityConnection : connection}\n\t\t\tshowActiveFilters={\n\t\t\t\tpredefinedFilter === undefined || (predefinedFilter && predefinedFilter.showToolbar)\n\t\t\t}\n\t\t/>\n\t);\n}\n"],"names":["AssetsView","assetTypes","tags","isLimited","selectedSmartfilterOptions","useAssetFilter","isSimilaritySearchSelected","isNLSSelected","NLSSearchText","useSimilaritySearchStore","similarityConnection","useSimilarityAssets","search","useSearchStateByPage","ordering","useOrderingSelectors","predefinedFilter","allAssetTypes","language","noCache","useConfig","filterAssetArgs","useMemo","connection","useFilterAssets","jsx","StatefulAssetList"],"mappings":";;;;;;;;;;AAWO,SAASA,IAAa;AAC5B,QAAM,EAAE,YAAAC,GAAY,MAAAC,GAAM,WAAAC,GAAW,4BAAAC,EAAA,IAA+BC,EAAA,GAC9D;AAAA,IACL,YAAYC;AAAA,IACZ,eAAAC;AAAA,IACA,eAAAC;AAAA,EAAA,IACGC,EAAA,GACE,EAAE,YAAYC,EAAA,IAAyBC,EAAA,GAEvC,EAAE,OAAOC,MAAWC,EAAqB,QAAQ,GACjDC,IAAWC,EAAqB,IAAI,OAAA,GAEpC;AAAA,IACL,aAAaC;AAAA,IACb,YAAYC;AAAA,IACZ,UAAAC;AAAA,IACA,SAAAC;AAAA,EAAA,IACGC,EAAA,GAEEC,IAAkBC,EAAQ,MAC3BN,MAAqB,SACjB;AAAA,IACN,QAAQ,EAAE,YAAAf,GAAY,4BAAAG,GAA4B,MAAAF,GAAM,WAAAC,EAAA;AAAA,IACxD,YAAYS;AAAA,IACZ,SAASE;AAAA,IACT,eAAAG;AAAA,IACA,UAAAC;AAAA,EAAA,IAESF,KAAoBA,EAAiB,cACxC;AAAA,IACN,QAAQ,EAAE,YAAAf,GAAY,4BAAAG,GAA4B,MAAAF,GAAM,WAAAC,EAAA;AAAA,IACxD,YAAYS;AAAA,IACZ,SAASE;AAAA,IACT,kBAAAE;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,IAIK;AAAA,IACN,QAAQ,EAAE,YAAAjB,GAAY,4BAAAG,GAA4B,MAAAF,GAAM,WAAAC,EAAA;AAAA,IACxD,kBAAAa;AAAA,IACA,SAASF;AAAA,IACT,UAAAI;AAAA,EAAA,GAEC;AAAA,IACFjB;AAAA,IACAC;AAAA,IACAC;AAAA,IACAS;AAAA,IACAE;AAAA,IACAE;AAAA,IACAC;AAAA,IACAC;AAAA,IACAd;AAAA,EAAA,CACA,GAEKmB,IAAaC,EAAgBH,GAAiBF,CAAO;AAI3D,SACC,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,YAJwBpB,KAA+BC,KAAiB,CAAC,CAACC,IAI1CE,IAAuBa;AAAA,MACvD,mBACCP,MAAqB,UAAcA,KAAoBA,EAAiB;AAAA,IAAA;AAAA,EAAA;AAI5E;"}

package/Autocomplete.js

@@ -0,0 +1,148 @@
+import { jsx as o, jsxs as l } from "react/jsx-runtime";
+import { styled as e } from "styled-components";
+import { token as i, Form as c, Flex as s, TruncatedText as y, Input as w } from "@bynder/design-system";
+import { IconCheckCircle as C } from "@bynder/icons";
+import { __ as g } from "./index2.js";
+import "./AssetCard.js";
+import "./AssetList.js";
+import "./Chip.js";
+import "./Dropdown.js";
+import "./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.js";
+import { Spinner as k } from "./Spinner.js";
+const Z = ({
+  metaproperty: t,
+  value: h,
+  onChange: x,
+  onOptionSelect: b,
+  autocompleteOptions: p,
+  isLoading: a,
+  selectedOptions: m
+}) => {
+  const { label: f, name: d, id: n, isMultifilter: $ } = t, u = (r) => {
+    x(n, r);
+  };
+  return /* @__PURE__ */ o(v, { children: /* @__PURE__ */ l(s, { direction: "column", children: [
+    /* @__PURE__ */ o(j, { children: /* @__PURE__ */ l(F, { $isLoading: a, children: [
+      /* @__PURE__ */ o(
+        O,
+        {
+          "data-testid": "metaproperty-title",
+          $isLoading: a,
+          htmlFor: "Project Code",
+          children: /* @__PURE__ */ o(y, { children: f })
+        }
+      ),
+      /* @__PURE__ */ o(
+        w,
+        {
+          id: "Project Code",
+          placeholder: g("Want to search for something?"),
+          value: h,
+          onChange: u,
+          "data-testid": "autocomplete-input"
+        }
+      ),
+      a && /* @__PURE__ */ o(k, { isNotUsingMargin: !0 })
+    ] }) }),
+    /* @__PURE__ */ o(
+      L,
+      {
+        $autocompleteOptions: p[n]?.metapropertyOptions.length,
+        children: p[n] && p[n]?.metapropertyOptions?.length ? /* @__PURE__ */ o(s, { direction: "column", children: p[n]?.metapropertyOptions.map(
+          (r) => /* @__PURE__ */ l(
+            S,
+            {
+              $isLoading: a,
+              $isSelected: !!m[d]?.[r.id],
+              "data-testid": "autocomplete-option",
+              onClick: () => b(
+                d,
+                r,
+                !!$
+              ),
+              children: [
+                r.label,
+                m[d]?.[r.id] ? /* @__PURE__ */ o(P, { className: "fade-in-down", children: /* @__PURE__ */ o(C, {}) }) : null
+              ]
+            },
+            r.id
+          )
+        ) }) : /* @__PURE__ */ o(N, { children: g("Results will appear here") })
+      }
+    )
+  ] }) });
+}, v = e.div`
+	border-right: 1px solid rgba(3, 16, 38, 0.1);
+	min-width: 224px;
+	height: 100%;
+`, j = e(c)`
+	padding: ${i.spacing5};
+	border-bottom: 1px solid rgba(3, 16, 38, 0.1);
+	box-shadow: 0px 0px 1px 0px rgba(3, 16, 38, 0.1), 0px 1px 4px -1px rgba(3, 16, 38, 0.1);
+`, F = e(c.Group)`
+	display: flex;
+	flex-direction: column;
+	gap: ${i.spacing5};
+	padding: 0;
+	position: relative;
+
+	label {
+		margin-bottom: 0;
+	}
+
+	input {
+		color: ${(t) => t.$isLoading ? "rgba(3, 16, 38, 0.46)" : "inherit"} !important;
+		min-width: 220px !important;
+	}
+`, O = e(c.Label)`
+	color: ${(t) => t.$isLoading ? "rgba(3, 16, 38, 0.46)" : "rgba(3, 16, 38, 0.88)"};
+	font-weight: 600;
+`, L = e.div`
+	display: flex;
+	justify-content: ${(t) => t.$autocompleteOptions ? "flex-start" : "center"};
+	align-items: ${(t) => t.$autocompleteOptions ? "flex-start" : "center"};
+	background: ${(t) => t.$autocompleteOptions ? "#fff" : "#f8f8f9"};
+	padding: ${i.spacing3} 0;
+	height: 100%;
+	min-height: 315px;
+`, S = e.div`
+	display: ${(t) => t.$isSelected ? "flex" : "block"};
+	justify-content: ${(t) => t.$isSelected ? "space-between" : "flex-start"};
+	cursor: pointer;
+	padding: ${i.spacing3} ${i.spacing5};
+	color: ${(t) => t.$isLoading ? "rgba(3, 16, 38, 0.46)" : "inherit"};
+
+	&:hover {
+		background-color: rgba(3, 16, 38, 0.03);
+	}
+`, N = e.div`
+	color: rgba(3, 16, 38, 0.46);
+`, P = e.span`
+	display: flex;
+	align-items: center;
+	padding: 0 8px;
+	color: rgba(0, 34, 51, 0.8);
+	background-color: #f7f8f9;
+	border: 1px solid rgba(0, 34, 51, 0.1);
+	border-radius: 16px;
+
+	svg {
+		max-width: ${i.spacing5};
+		max-height: ${i.spacing5};
+		margin-right: ${i.spacing2};
+	}
+`;
+export {
+  Z as Autocomplete
+};
+//# sourceMappingURL=Autocomplete.js.map

package/Autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.js","sources":["../../src/filter/filters/smartfilters/Metaproperties/Autocomplete.tsx"],"sourcesContent":["import React from 'react';\nimport { styled } from 'styled-components';\nimport { Flex, Form, Input, token, TruncatedText } from '@bynder/design-system';\nimport { IconCheckCircle } from '@bynder/icons';\nimport { __ } from '@src/localization';\nimport { AutocompleteOptions } from '@src/api/rest/autocomplete';\nimport { Spinner } from '@src/Components';\nimport {\n\tAutocompleteOption as Options,\n\tSmartfilterSelectedOptionType,\n\tSmartfilterMetaproperty,\n\tAutocompleteOption,\n} from '@src/api/rest/types';\n\ntype Props = {\n\tmetaproperty: SmartfilterMetaproperty;\n\tvalue: string;\n\tonChange: (metapropertyId: string, value: string) => void;\n\tonOptionSelect: (\n\t\tmetapropertyName: string,\n\t\toption: AutocompleteOption,\n\t\tmetapropertyMultifilter: boolean,\n\t) => void;\n\tautocompleteOptions: AutocompleteOptions;\n\tisLoading: boolean;\n\tselectedOptions: Record<string, Record<string, SmartfilterSelectedOptionType>>;\n};\n\nexport const Autocomplete = ({\n\tmetaproperty,\n\tvalue,\n\tonChange,\n\tonOptionSelect,\n\tautocompleteOptions,\n\tisLoading,\n\tselectedOptions,\n}: Props) => {\n\tconst { label, name: metapropertyName, id: metapropertyId, isMultifilter } = metaproperty;\n\tconst handleChange = (inputValue: string) => {\n\t\tonChange(metapropertyId, inputValue);\n\t};\n\n\treturn (\n\t\t<DropdownContentContainer>\n\t\t\t<Flex direction=\"column\">\n\t\t\t\t<FormParent>\n\t\t\t\t\t<FormGroup $isLoading={isLoading}>\n\t\t\t\t\t\t<FormLabel\n\t\t\t\t\t\t\tdata-testid=\"metaproperty-title\"\n\t\t\t\t\t\t\t$isLoading={isLoading}\n\t\t\t\t\t\t\thtmlFor=\"Project Code\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<TruncatedText>{label}</TruncatedText>\n\t\t\t\t\t\t</FormLabel>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tid=\"Project Code\"\n\t\t\t\t\t\t\tplaceholder={__('Want to search for something?')}\n\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\t\t\tdata-testid=\"autocomplete-input\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{isLoading && <Spinner isNotUsingMargin />}\n\t\t\t\t\t</FormGroup>\n\t\t\t\t</FormParent>\n\t\t\t\t<ResultsParent\n\t\t\t\t\t$autocompleteOptions={\n\t\t\t\t\t\tautocompleteOptions[metapropertyId]?.metapropertyOptions.length\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{autocompleteOptions[metapropertyId] &&\n\t\t\t\t\tautocompleteOptions[metapropertyId]?.metapropertyOptions?.length ? (\n\t\t\t\t\t\t<Flex direction=\"column\">\n\t\t\t\t\t\t\t{autocompleteOptions[metapropertyId]?.metapropertyOptions.map(\n\t\t\t\t\t\t\t\t(result: Options) => (\n\t\t\t\t\t\t\t\t\t<AutocompleteOptionElement\n\t\t\t\t\t\t\t\t\t\t$isLoading={isLoading}\n\t\t\t\t\t\t\t\t\t\t$isSelected={\n\t\t\t\t\t\t\t\t\t\t\t!!selectedOptions[metapropertyName]?.[result.id]\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tkey={result.id}\n\t\t\t\t\t\t\t\t\t\tdata-testid=\"autocomplete-option\"\n\t\t\t\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\t\t\t\tonOptionSelect(\n\t\t\t\t\t\t\t\t\t\t\t\tmetapropertyName,\n\t\t\t\t\t\t\t\t\t\t\t\tresult,\n\t\t\t\t\t\t\t\t\t\t\t\t!!isMultifilter,\n\t\t\t\t\t\t\t\t\t\t\t)\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\t\t{result.label}\n\t\t\t\t\t\t\t\t\t\t{selectedOptions[metapropertyName]?.[result.id] ? (\n\t\t\t\t\t\t\t\t\t\t\t<SelectedOption className=\"fade-in-down\">\n\t\t\t\t\t\t\t\t\t\t\t\t<IconCheckCircle />\n\t\t\t\t\t\t\t\t\t\t\t</SelectedOption>\n\t\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t</AutocompleteOptionElement>\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<NoAutocompleteOption>\n\t\t\t\t\t\t\t{__('Results will appear here')}\n\t\t\t\t\t\t</NoAutocompleteOption>\n\t\t\t\t\t)}\n\t\t\t\t</ResultsParent>\n\t\t\t</Flex>\n\t\t</DropdownContentContainer>\n\t);\n};\n\nconst DropdownContentContainer = styled.div`\n\tborder-right: 1px solid rgba(3, 16, 38, 0.1);\n\tmin-width: 224px;\n\theight: 100%;\n`;\n\nconst FormParent = styled(Form)`\n\tpadding: ${token.spacing5};\n\tborder-bottom: 1px solid rgba(3, 16, 38, 0.1);\n\tbox-shadow: 0px 0px 1px 0px rgba(3, 16, 38, 0.1), 0px 1px 4px -1px rgba(3, 16, 38, 0.1);\n`;\n\nconst FormGroup = styled(Form.Group)<{ $isLoading: boolean }>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: ${token.spacing5};\n\tpadding: 0;\n\tposition: relative;\n\n\tlabel {\n\t\tmargin-bottom: 0;\n\t}\n\n\tinput {\n\t\tcolor: ${(p) => (p.$isLoading ? 'rgba(3, 16, 38, 0.46)' : 'inherit')} !important;\n\t\tmin-width: 220px !important;\n\t}\n`;\n\nconst FormLabel = styled(Form.Label)<{ $isLoading: boolean }>`\n\tcolor: ${(p) => (p.$isLoading ? 'rgba(3, 16, 38, 0.46)' : 'rgba(3, 16, 38, 0.88)')};\n\tfont-weight: 600;\n`;\n\nconst ResultsParent = styled.div<{ $autocompleteOptions: boolean }>`\n\tdisplay: flex;\n\tjustify-content: ${(p) => (p.$autocompleteOptions ? 'flex-start' : 'center')};\n\talign-items: ${(p) => (p.$autocompleteOptions ? 'flex-start' : 'center')};\n\tbackground: ${(p) => (p.$autocompleteOptions ? '#fff' : '#f8f8f9')};\n\tpadding: ${token.spacing3} 0;\n\theight: 100%;\n\tmin-height: 315px;\n`;\n\nconst AutocompleteOptionElement = styled.div<{ $isLoading: boolean; $isSelected: boolean }>`\n\tdisplay: ${(p) => (p.$isSelected ? 'flex' : 'block')};\n\tjustify-content: ${(p) => (p.$isSelected ? 'space-between' : 'flex-start')};\n\tcursor: pointer;\n\tpadding: ${token.spacing3} ${token.spacing5};\n\tcolor: ${(p) => (p.$isLoading ? 'rgba(3, 16, 38, 0.46)' : 'inherit')};\n\n\t&:hover {\n\t\tbackground-color: rgba(3, 16, 38, 0.03);\n\t}\n`;\n\nconst NoAutocompleteOption = styled.div`\n\tcolor: rgba(3, 16, 38, 0.46);\n`;\n\nconst SelectedOption = styled.span`\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 0 8px;\n\tcolor: rgba(0, 34, 51, 0.8);\n\tbackground-color: #f7f8f9;\n\tborder: 1px solid rgba(0, 34, 51, 0.1);\n\tborder-radius: 16px;\n\n\tsvg {\n\t\tmax-width: ${token.spacing5};\n\t\tmax-height: ${token.spacing5};\n\t\tmargin-right: ${token.spacing2};\n\t}\n`;\n"],"names":["Autocomplete","metaproperty","value","onChange","onOptionSelect","autocompleteOptions","isLoading","selectedOptions","label","metapropertyName","metapropertyId","isMultifilter","handleChange","inputValue","jsx","DropdownContentContainer","jsxs","Flex","FormParent","FormGroup","FormLabel","TruncatedText","Input","__","Spinner","ResultsParent","result","AutocompleteOptionElement","SelectedOption","IconCheckCircle","NoAutocompleteOption","styled","Form","token","p"],"mappings":"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"}

package/ButtonAction.js

@@ -0,0 +1,14 @@
+import { jsx as r, Fragment as o } from "react/jsx-runtime";
+import { IconCheck as n } from "@bynder/icons";
+import { __ as e } from "./index2.js";
+import { pluralize as m } from "./text.js";
+function s({
+  status: t,
+  numberOfSelectedItems: i
+}) {
+  return t === "Done" ? /* @__PURE__ */ r(n, { "data-testid": "check" }) : t === "Error" ? /* @__PURE__ */ r(o, { children: e("Retry") }) : /* @__PURE__ */ r(o, { children: m(i, e("Add asset"), e("Add assets")) });
+}
+export {
+  s as ButtonAction
+};
+//# sourceMappingURL=ButtonAction.js.map

package/ButtonAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonAction.js","sources":["../../src/select/add-media/ButtonAction.tsx"],"sourcesContent":["import React from 'react';\nimport { IconCheck } from '@bynder/icons';\n\nimport { __ } from '../../localization';\nimport { pluralize } from '../../utils/text';\nimport { State } from './addMedia.type';\n\nexport function ButtonAction({\n\tstatus,\n\tnumberOfSelectedItems,\n}: {\n\tstatus: State['status'];\n\tnumberOfSelectedItems: number;\n}) {\n\tif (status === 'Done') {\n\t\treturn <IconCheck data-testid=\"check\" />;\n\t} else if (status === 'Error') {\n\t\treturn <>{__('Retry')}</>;\n\t}\n\n\treturn <>{pluralize(numberOfSelectedItems, __('Add asset'), __('Add assets'))}</>;\n}\n"],"names":["ButtonAction","status","numberOfSelectedItems","jsx","IconCheck","Fragment","__"],"mappings":";;;;AAOO,SAASA,EAAa;AAAA,EAC5B,QAAAC;AAAA,EACA,uBAAAC;AACD,GAGG;AACF,SAAID,MAAW,SACP,gBAAAE,EAACC,GAAA,EAAU,eAAY,QAAA,CAAQ,IAC5BH,MAAW,UACd,gBAAAE,EAAAE,GAAA,EAAG,UAAAC,EAAG,OAAO,GAAE,IAGhB,gBAAAH,EAAAE,GAAA,EAAG,YAAUH,GAAuBI,EAAG,WAAW,GAAGA,EAAG,YAAY,CAAC,EAAA,CAAE;AAC/E;"}

package/CardSkeleton.js

@@ -0,0 +1,31 @@
+import { jsx as r, Fragment as o, jsxs as a } from "react/jsx-runtime";
+import { styled as d } from "styled-components";
+import { token as l, Card as e } from "@bynder/design-system";
+import { Skeleton as m } from "./Skeleton.js";
+function p(t) {
+  return /* @__PURE__ */ r(o, { children: Array(t.rows * t.columns).fill(void 0).map((i, n) => /* @__PURE__ */ r(
+    c,
+    {
+      "data-testid": "asset-card",
+      children: /* @__PURE__ */ a(e, { children: [
+        /* @__PURE__ */ r(e.Frame, {}),
+        /* @__PURE__ */ r(e.AdditionalInfo, { children: /* @__PURE__ */ r(m, { width: 70 + s(100, n) }) }),
+        t.title
+      ] })
+    },
+    n
+  )) });
+}
+function s(t, i) {
+  return 16807 * ((i + 20) % 2147483647 + 2147483646) % 2147483647 % t;
+}
+const c = d.div`
+	width: 224px;
+	position: relative;
+	margin: ${l.spacing3};
+	align-self: flex-start;
+`;
+export {
+  p as CardSkeleton
+};
+//# sourceMappingURL=CardSkeleton.js.map

package/CardSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardSkeleton.js","sources":["../../src/common/components/CardSkeleton.tsx"],"sourcesContent":["import React from 'react';\nimport { styled } from 'styled-components';\nimport { Card, token } from '@bynder/design-system';\n\nimport { Skeleton } from './Skeleton';\n\ninterface Props {\n\ttitle?: React.ReactNode;\n\trows: number;\n\tcolumns: number;\n}\n\nexport function CardSkeleton(props: Props) {\n\treturn (\n\t\t<>\n\t\t\t{Array(props.rows * props.columns)\n\t\t\t\t.fill(undefined)\n\t\t\t\t.map((value, index) => (\n\t\t\t\t\t<AssetCard\n\t\t\t\t\t\tkey={index} // eslint-disable-line react/no-array-index-key\n\t\t\t\t\t\tdata-testid=\"asset-card\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Frame>{/* empty */}</Card.Frame>\n\n\t\t\t\t\t\t\t<Card.AdditionalInfo>\n\t\t\t\t\t\t\t\t<Skeleton width={70 + randomInteger(100, index)} />\n\t\t\t\t\t\t\t</Card.AdditionalInfo>\n\n\t\t\t\t\t\t\t{props.title}\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</AssetCard>\n\t\t\t\t))}\n\t\t</>\n\t);\n}\n\n/* Stateless Park-Miller PRNG\n *\n * Our own 'random' function is used rather than Math.random to ensure the same value is returned\n * for a specific skeleton item. We don't actually care about randomness, we just want some\n * variation in the appearance of the Skeleton items.\n *\n * If we used Math.random, the width of the Skeleton component will change if React rerenders the\n * component, even if to the user it appears to be the same UI element. */\nfunction randomInteger(max: number, seed: number) {\n\treturn ((16807 * (((seed + 20) % 2147483647) + 2147483646)) % 2147483647) % max;\n}\n\nconst AssetCard = styled.div`\n\twidth: 224px;\n\tposition: relative;\n\tmargin: ${token.spacing3};\n\talign-self: flex-start;\n`;\n"],"names":["CardSkeleton","props","jsx","Fragment","value","index","AssetCard","Card","Skeleton","randomInteger","max","seed","styled","token"],"mappings":";;;;AAYO,SAASA,EAAaC,GAAc;AAC1C,SACC,gBAAAC,EAAAC,GAAA,EACE,UAAA,MAAMF,EAAM,OAAOA,EAAM,OAAO,EAC/B,KAAK,MAAS,EACd,IAAI,CAACG,GAAOC,MACZ,gBAAAH;AAAA,IAACI;AAAA,IAAA;AAAA,MAEA,eAAY;AAAA,MAEZ,4BAACC,GAAA,EACA,UAAA;AAAA,QAAA,gBAAAL,EAACK,EAAK,OAAL,EAAwB;AAAA,QAEzB,gBAAAL,EAACK,EAAK,gBAAL,EACA,UAAA,gBAAAL,EAACM,GAAA,EAAS,OAAO,KAAKC,EAAc,KAAKJ,CAAK,EAAA,CAAG,EAAA,CAClD;AAAA,QAECJ,EAAM;AAAA,MAAA,EAAA,CACR;AAAA,IAAA;AAAA,IAXKI;AAAA,EAAA,CAaN,GACH;AAEF;AAUA,SAASI,EAAcC,GAAaC,GAAc;AACjD,SAAS,UAAWA,IAAO,MAAM,aAAc,cAAe,aAAcD;AAC7E;AAEA,MAAMJ,IAAYM,EAAO;AAAA;AAAA;AAAA,WAGdC,EAAM,QAAQ;AAAA;AAAA;"}

package/Checkbox.styles.js

@@ -0,0 +1,38 @@
+import t from "styled-components";
+import { token as e } from "@bynder/design-system";
+const s = t.div`
+	width: 100%;
+	font-size: ${e.fontSize75};
+	align-items: center;
+	cursor: ${(i) => i.$isLoading && !i.$isChecked ? "wait" : "pointer"};
+	display: ${(i) => i.$isFlex ? "flex" : "block"};
+
+	div:last-of-type {
+		flex-grow: 1;
+	}
+`, a = t.li`
+	padding: ${e.spacing3} ${e.spacing5};
+
+	&:hover {
+		background-color: ${e.gray25};
+	}
+`, r = t.div`
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	color: ${(i) => i.$isChecked ? "inherit" : e.gray500};
+	font-size: ${e.fontSize100};
+	gap: ${e.spacing4};
+`;
+t.span`
+	display: flex;
+	align-items: center;
+	margin: ${e.spacing1} ${e.spacing4} ${e.spacing1} 0;
+	flex-grow: 1;
+`;
+export {
+  r as Content,
+  a as ListItem,
+  s as StyledCheckboxWrapper
+};
+//# sourceMappingURL=Checkbox.styles.js.map

package/Checkbox.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.styles.js","sources":["../../src/common/components/Checkbox.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { token } from '@bynder/design-system';\n\nexport const StyledCheckboxWrapper = styled.div<{\n\t$isLoading?: boolean;\n\t$isChecked: boolean;\n\t$isFlex?: boolean;\n}>`\n\twidth: 100%;\n\tfont-size: ${token.fontSize75};\n\talign-items: center;\n\tcursor: ${(p) => (p.$isLoading && !p.$isChecked ? 'wait' : 'pointer')};\n\tdisplay: ${(p) => (p.$isFlex ? 'flex' : 'block')};\n\n\tdiv:last-of-type {\n\t\tflex-grow: 1;\n\t}\n`;\n\nexport const ListItem = styled.li`\n\tpadding: ${token.spacing3} ${token.spacing5};\n\n\t&:hover {\n\t\tbackground-color: ${token.gray25};\n\t}\n`;\n\nexport const Content = styled.div<{ $isChecked: boolean }>`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tcolor: ${(p) => (p.$isChecked ? 'inherit' : token.gray500)};\n\tfont-size: ${token.fontSize100};\n\tgap: ${token.spacing4};\n`;\n\nexport const Label = styled.span`\n\tdisplay: flex;\n\talign-items: center;\n\tmargin: ${token.spacing1} ${token.spacing4} ${token.spacing1} 0;\n\tflex-grow: 1;\n`;\n"],"names":["StyledCheckboxWrapper","styled","token","p","ListItem","Content"],"mappings":";;AAGO,MAAMA,IAAwBC,EAAO;AAAA;AAAA,cAM9BC,EAAM,UAAU;AAAA;AAAA,WAEnB,CAACC,MAAOA,EAAE,cAAc,CAACA,EAAE,aAAa,SAAS,SAAU;AAAA,YAC1D,CAACA,MAAOA,EAAE,UAAU,SAAS,OAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,GAOpCC,IAAWH,EAAO;AAAA,YACnBC,EAAM,QAAQ,IAAIA,EAAM,QAAQ;AAAA;AAAA;AAAA,sBAGtBA,EAAM,MAAM;AAAA;AAAA,GAIrBG,IAAUJ,EAAO;AAAA;AAAA;AAAA;AAAA,UAIpB,CAACE,MAAOA,EAAE,aAAa,YAAYD,EAAM,OAAQ;AAAA,cAC7CA,EAAM,WAAW;AAAA,QACvBA,EAAM,QAAQ;AAAA;AAGDD,EAAO;AAAA;AAAA;AAAA,WAGjBC,EAAM,QAAQ,IAAIA,EAAM,QAAQ,IAAIA,EAAM,QAAQ;AAAA;AAAA;"}

package/Chip.js

@@ -0,0 +1,43 @@
+import { jsx as o } from "react/jsx-runtime";
+import { styled as r } from "styled-components";
+import { token as n } from "@bynder/design-system";
+import { handleEnter as a } from "./helpers.js";
+function s(i) {
+  return /* @__PURE__ */ o(
+    e,
+    {
+      onClick: i.onClick,
+      onKeyDown: (t) => a(t, i.onClick),
+      role: "button",
+      tabIndex: 0,
+      "data-testid": i["data-testid"],
+      loading: i.loading,
+      active: i.active,
+      children: i.children
+    }
+  );
+}
+const e = r.div`
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	border-radius: calc(infinity * 1px);
+	font-size: ${n.fontSize75};
+	height: ${n.spacing7};
+	padding: 0 ${n.spacing4};
+	transition-property: color, background-color, border-color, opacity;
+	transition-timing-function: linear;
+	transition-duration: 0.05s;
+
+	margin-right: ${n.spacing3};
+	margin-bottom: ${n.spacing3};
+	border: 1px solid rgba(0, 34, 51, 0.1);
+	box-shadow: 0 1px 6px -2px rgba(0, 34, 51, 0.1);
+	cursor: ${({ loading: i, active: t }) => i && !t ? "default" : "pointer"};
+	background-color: ${({ active: i }) => i ? "rgba(0, 34, 51, .05)" : "transparent"};
+`;
+export {
+  s as Chip
+};
+//# sourceMappingURL=Chip.js.map

package/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sources":["../../src/common/components/Chip.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from 'styled-components';\nimport { token } from '@bynder/design-system';\nimport { handleEnter } from '../../accesibility/helpers';\n\ninterface Props {\n\tloading?: boolean;\n\tactive?: boolean;\n\tonClick?: () => void;\n\tchildren: React.ReactNode;\n\t['data-testid']?: string;\n}\n\nexport function Chip(props: Props) {\n\treturn (\n\t\t<ChipContainer\n\t\t\tonClick={props.onClick}\n\t\t\tonKeyDown={(e) => handleEnter(e, props.onClick)}\n\t\t\trole=\"button\"\n\t\t\ttabIndex={0}\n\t\t\tdata-testid={props['data-testid']}\n\t\t\tloading={props.loading}\n\t\t\tactive={props.active}\n\t\t>\n\t\t\t{props.children}\n\t\t</ChipContainer>\n\t);\n}\n\nconst ChipContainer = styled.div<{ loading?: boolean; active?: boolean }>`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-shrink: 0;\n\tborder-radius: calc(infinity * 1px);\n\tfont-size: ${token.fontSize75};\n\theight: ${token.spacing7};\n\tpadding: 0 ${token.spacing4};\n\ttransition-property: color, background-color, border-color, opacity;\n\ttransition-timing-function: linear;\n\ttransition-duration: 0.05s;\n\n\tmargin-right: ${token.spacing3};\n\tmargin-bottom: ${token.spacing3};\n\tborder: 1px solid rgba(0, 34, 51, 0.1);\n\tbox-shadow: 0 1px 6px -2px rgba(0, 34, 51, 0.1);\n\tcursor: ${({ loading, active }) => (loading && !active ? 'default' : 'pointer')};\n\tbackground-color: ${({ active }) => (active ? 'rgba(0, 34, 51, .05)' : 'transparent')};\n`;\n"],"names":["Chip","props","jsx","ChipContainer","e","handleEnter","styled","token","loading","active"],"mappings":";;;;AAcO,SAASA,EAAKC,GAAc;AAClC,SACC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,SAASF,EAAM;AAAA,MACf,WAAW,CAACG,MAAMC,EAAYD,GAAGH,EAAM,OAAO;AAAA,MAC9C,MAAK;AAAA,MACL,UAAU;AAAA,MACV,eAAaA,EAAM,aAAa;AAAA,MAChC,SAASA,EAAM;AAAA,MACf,QAAQA,EAAM;AAAA,MAEb,UAAAA,EAAM;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,MAAME,IAAgBG,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMfC,EAAM,UAAU;AAAA,WACnBA,EAAM,QAAQ;AAAA,cACXA,EAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKXA,EAAM,QAAQ;AAAA,kBACbA,EAAM,QAAQ;AAAA;AAAA;AAAA,WAGrB,CAAC,EAAE,SAAAC,GAAS,QAAAC,EAAA,MAAcD,KAAW,CAACC,IAAS,YAAY,SAAU;AAAA,qBAC3D,CAAC,EAAE,QAAAA,EAAA,MAAcA,IAAS,yBAAyB,aAAc;AAAA;"}

package/CollectionCard.js

@@ -0,0 +1,56 @@
+import { jsx as t, jsxs as g } from "react/jsx-runtime";
+import { styled as s } from "styled-components";
+import { IconOpenInNew as u } from "@bynder/icons";
+import { token as i, Card as n } from "@bynder/design-system";
+import { useSelectionMode as C, useConfig as h } from "./ConfigContext.js";
+import { __ as o } from "./index2.js";
+import { useRouter as x } from "./useRouterStore.js";
+import { useSelection as $ } from "./SelectionContext.js";
+import { pluralize as b } from "./text.js";
+function O({ collection: e, fadeIn: d = !0, isSelected: r, style: l }) {
+  const c = C(), [, m] = x(), p = $(), { hideExternalAccess: f } = h();
+  return /* @__PURE__ */ t(w, { id: e.id, style: l, $fadeIn: d, children: /* @__PURE__ */ g(
+    n,
+    {
+      contextAction: !f && /* @__PURE__ */ t(
+        n.ContextActionButton,
+        {
+          "aria-label": o("Open in new tab"),
+          onClick: () => {
+            window.open(e.url, "_blank");
+          },
+          children: /* @__PURE__ */ t(u, {})
+        }
+      ),
+      selectButtonAriaLabel: r ? o("Deselect") : o("Select"),
+      onSelect: c === "MultiSelect" ? (a) => {
+        a.stopPropagation(), p.toggleCollection(e);
+      } : void 0,
+      isSelected: r,
+      onClick: () => m({ page: "collection", collection: e }),
+      "aria-selected": r,
+      "data-testid": "asset-card",
+      children: [
+        /* @__PURE__ */ t(n.Frame, { children: /* @__PURE__ */ t(n.Images, { children: e.thumbnailUrls.slice(0, 3).map((a) => /* @__PURE__ */ t(n.Img, { src: a, alt: e.name }, a)) }) }),
+        /* @__PURE__ */ t(n.Header, { title: e.name, "data-testid": "asset-name" }),
+        /* @__PURE__ */ t(I, { children: b(e.assetCount, o("{} asset"), o("{} assets")) })
+      ]
+    }
+  ) });
+}
+const w = s.div`
+	width: 224px;
+	position: relative;
+	margin: ${i.spacing3};
+	align-self: flex-start;
+	${(e) => e.$fadeIn ? "animation: var(--fade-in-down);" : ""}
+`, I = s.div`
+	padding: 0 0 ${i.spacing4} ${i.spacing5};
+	margin-top: -${i.spacing2};
+	font-size: ${i.fontSize75};
+	color: rgba(0, 34, 51, 0.5);
+`;
+export {
+  O as CollectionCard
+};
+//# sourceMappingURL=CollectionCard.js.map

package/CollectionCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionCard.js","sources":["../../src/views/collections/CollectionCard.tsx"],"sourcesContent":["import React from 'react';\nimport { styled } from 'styled-components';\nimport { IconOpenInNew } from '@bynder/icons';\nimport { Card, token } from '@bynder/design-system';\n\nimport { useConfig, useSelectionMode } from '../../app-config/ConfigContext';\nimport { __ } from '../../localization';\nimport { useRouter } from '@src/store/useRouterStore';\nimport { useSelection } from '../../select/SelectionContext';\nimport { pluralize } from '../../utils/text';\nimport { Collection as CollectionType } from '../collection/collection.types';\n\ninterface Props {\n\tcollection: CollectionType;\n\tfadeIn?: boolean;\n\tisSelected: boolean;\n\tstyle?: React.CSSProperties;\n}\n\nexport function CollectionCard({ collection, fadeIn = true, isSelected, style }: Props) {\n\tconst selectionMode = useSelectionMode();\n\tconst [, setPage] = useRouter();\n\tconst selectionState = useSelection();\n\tconst { hideExternalAccess } = useConfig();\n\n\treturn (\n\t\t<CollectionCardContainer id={collection.id} style={style} $fadeIn={fadeIn}>\n\t\t\t<Card\n\t\t\t\tcontextAction={\n\t\t\t\t\t!hideExternalAccess && (\n\t\t\t\t\t\t<Card.ContextActionButton\n\t\t\t\t\t\t\taria-label={__('Open in new tab')}\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\twindow.open(collection.url, '_blank');\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<IconOpenInNew />\n\t\t\t\t\t\t</Card.ContextActionButton>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t\tselectButtonAriaLabel={isSelected ? __('Deselect') : __('Select')}\n\t\t\t\tonSelect={\n\t\t\t\t\tselectionMode === 'MultiSelect'\n\t\t\t\t\t\t? (e) => {\n\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\tselectionState.toggleCollection(collection);\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tisSelected={isSelected}\n\t\t\t\tonClick={() => setPage({ page: 'collection', collection })}\n\t\t\t\taria-selected={isSelected}\n\t\t\t\tdata-testid=\"asset-card\"\n\t\t\t>\n\t\t\t\t{/* Image(s) */}\n\t\t\t\t<Card.Frame>\n\t\t\t\t\t<Card.Images>\n\t\t\t\t\t\t{collection.thumbnailUrls.slice(0, 3).map((url) => (\n\t\t\t\t\t\t\t<Card.Img key={url} src={url} alt={collection.name} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t</Card.Images>\n\t\t\t\t</Card.Frame>\n\n\t\t\t\t{/* Name */}\n\t\t\t\t<Card.Header title={collection.name} data-testid=\"asset-name\" />\n\n\t\t\t\t{/* Total count */}\n\t\t\t\t<CollectionCardCount>\n\t\t\t\t\t{pluralize(collection.assetCount, __('{} asset'), __('{} assets'))}\n\t\t\t\t</CollectionCardCount>\n\t\t\t</Card>\n\t\t</CollectionCardContainer>\n\t);\n}\n\nconst CollectionCardContainer = styled.div<{ $fadeIn?: boolean }>`\n\twidth: 224px;\n\tposition: relative;\n\tmargin: ${token.spacing3};\n\talign-self: flex-start;\n\t${(p) => (p.$fadeIn ? `animation: var(--fade-in-down);` : '')}\n`;\n\nconst CollectionCardCount = styled.div`\n\tpadding: 0 0 ${token.spacing4} ${token.spacing5};\n\tmargin-top: -${token.spacing2};\n\tfont-size: ${token.fontSize75};\n\tcolor: rgba(0, 34, 51, 0.5);\n`;\n"],"names":["CollectionCard","collection","fadeIn","isSelected","style","selectionMode","useSelectionMode","setPage","useRouter","selectionState","useSelection","hideExternalAccess","useConfig","CollectionCardContainer","jsxs","Card","jsx","__","IconOpenInNew","e","url","CollectionCardCount","pluralize","styled","token","p"],"mappings":";;;;;;;;;AAmBO,SAASA,EAAe,EAAE,YAAAC,GAAY,QAAAC,IAAS,IAAM,YAAAC,GAAY,OAAAC,KAAgB;AACvF,QAAMC,IAAgBC,EAAA,GAChB,CAAA,EAAGC,CAAO,IAAIC,EAAA,GACdC,IAAiBC,EAAA,GACjB,EAAE,oBAAAC,EAAA,IAAuBC,EAAA;AAE/B,2BACEC,GAAA,EAAwB,IAAIZ,EAAW,IAAI,OAAAG,GAAc,SAASF,GAClE,UAAA,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,eACC,CAACJ,KACA,gBAAAK;AAAA,QAACD,EAAK;AAAA,QAAL;AAAA,UACA,cAAYE,EAAG,iBAAiB;AAAA,UAChC,SAAS,MAAM;AACd,mBAAO,KAAKhB,EAAW,KAAK,QAAQ;AAAA,UACrC;AAAA,UAEA,4BAACiB,GAAA,CAAA,CAAc;AAAA,QAAA;AAAA,MAAA;AAAA,MAIlB,uBAAuBf,IAAac,EAAG,UAAU,IAAIA,EAAG,QAAQ;AAAA,MAChE,UACCZ,MAAkB,gBACf,CAACc,MAAM;AACP,QAAAA,EAAE,gBAAA,GACFV,EAAe,iBAAiBR,CAAU;AAAA,MAC1C,IACA;AAAA,MAEJ,YAAAE;AAAA,MACA,SAAS,MAAMI,EAAQ,EAAE,MAAM,cAAc,YAAAN,GAAY;AAAA,MACzD,iBAAeE;AAAA,MACf,eAAY;AAAA,MAGZ,UAAA;AAAA,QAAA,gBAAAa,EAACD,EAAK,OAAL,EACA,UAAA,gBAAAC,EAACD,EAAK,QAAL,EACC,UAAAd,EAAW,cAAc,MAAM,GAAG,CAAC,EAAE,IAAI,CAACmB,MAC1C,gBAAAJ,EAACD,EAAK,KAAL,EAAmB,KAAKK,GAAK,KAAKnB,EAAW,KAAA,GAA/BmB,CAAqC,CACpD,EAAA,CACF,EAAA,CACD;AAAA,QAGA,gBAAAJ,EAACD,EAAK,QAAL,EAAY,OAAOd,EAAW,MAAM,eAAY,cAAa;AAAA,QAG9D,gBAAAe,EAACK,GAAA,EACC,UAAAC,EAAUrB,EAAW,YAAYgB,EAAG,UAAU,GAAGA,EAAG,WAAW,CAAC,EAAA,CAClE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEF;AAEF;AAEA,MAAMJ,IAA0BU,EAAO;AAAA;AAAA;AAAA,WAG5BC,EAAM,QAAQ;AAAA;AAAA,GAEtB,CAACC,MAAOA,EAAE,UAAU,oCAAoC,EAAG;AAAA,GAGxDJ,IAAsBE,EAAO;AAAA,gBACnBC,EAAM,QAAQ,IAAIA,EAAM,QAAQ;AAAA,gBAChCA,EAAM,QAAQ;AAAA,cAChBA,EAAM,UAAU;AAAA;AAAA;"}

package/CollectionItem.js

@@ -0,0 +1,41 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import t from "styled-components";
+import { IconCollection as m } from "@bynder/icons";
+import { token as i, Thumbnail as a } from "@bynder/design-system";
+import { __ as n } from "./index2.js";
+import { useSelection as s } from "./SelectionContext.js";
+import { pluralize as p } from "./text.js";
+import { SelectedItemContainer as c } from "./SelectedItemContainer.js";
+function z({ collection: o }) {
+  const r = s();
+  return /* @__PURE__ */ l(
+    c,
+    {
+      title: o.name,
+      onRemove: () => r.toggleCollection(o),
+      children: [
+        /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(a, { variant: "clean", icon: /* @__PURE__ */ e(m, {}) }) }),
+        /* @__PURE__ */ e(g, { children: o.name }),
+        /* @__PURE__ */ e(h, { children: p(o.assetCount, n("{} asset"), n("{} assets")) })
+      ]
+    }
+  );
+}
+const f = t.div`
+	margin-right: ${i.spacing4};
+`, g = t.span`
+	width: 160px;
+	margin-right: ${i.spacing3};
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+`, h = t.span`
+	flex-grow: 1;
+	color: rgba(0, 34, 51, 0.5);
+	font-size: ${i.fontSize75};
+	text-align: right;
+`;
+export {
+  z as CollectionItem
+};
+//# sourceMappingURL=CollectionItem.js.map

package/CollectionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionItem.js","sources":["../../src/select/current-selection/CollectionItem.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { IconCollection } from '@bynder/icons';\nimport { Thumbnail, token } from '@bynder/design-system';\n\nimport { __ } from '../../localization';\nimport { Collection } from '../../views/collection/collection.types';\nimport { useSelection } from '../SelectionContext';\nimport { pluralize } from '../../utils/text';\nimport { SelectedItemContainer } from './SelectedItemContainer';\n\nexport function CollectionItem({ collection }: { collection: Collection }) {\n\tconst selectionState = useSelection();\n\n\treturn (\n\t\t<SelectedItemContainer\n\t\t\ttitle={collection.name}\n\t\t\tonRemove={() => selectionState.toggleCollection(collection)}\n\t\t>\n\t\t\t<CollectionThumbnailWrapper>\n\t\t\t\t<Thumbnail variant=\"clean\" icon={<IconCollection />} />\n\t\t\t</CollectionThumbnailWrapper>\n\t\t\t<CollectionName>{collection.name}</CollectionName>\n\t\t\t<CollectionExtensionName>\n\t\t\t\t{pluralize(collection.assetCount, __('{} asset'), __('{} assets'))}\n\t\t\t</CollectionExtensionName>\n\t\t</SelectedItemContainer>\n\t);\n}\n\nconst CollectionThumbnailWrapper = styled.div`\n\tmargin-right: ${token.spacing4};\n`;\n\nconst CollectionName = styled.span`\n\twidth: 160px;\n\tmargin-right: ${token.spacing3};\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n`;\n\nconst CollectionExtensionName = styled.span`\n\tflex-grow: 1;\n\tcolor: rgba(0, 34, 51, 0.5);\n\tfont-size: ${token.fontSize75};\n\ttext-align: right;\n`;\n"],"names":["CollectionItem","collection","selectionState","useSelection","jsxs","SelectedItemContainer","jsx","CollectionThumbnailWrapper","Thumbnail","IconCollection","CollectionName","CollectionExtensionName","pluralize","__","styled","token"],"mappings":";;;;;;;;AAWO,SAASA,EAAe,EAAE,YAAAC,KAA0C;AAC1E,QAAMC,IAAiBC,EAAA;AAEvB,SACC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,OAAOJ,EAAW;AAAA,MAClB,UAAU,MAAMC,EAAe,iBAAiBD,CAAU;AAAA,MAE1D,UAAA;AAAA,QAAA,gBAAAK,EAACC,GAAA,EACA,4BAACC,GAAA,EAAU,SAAQ,SAAQ,MAAM,gBAAAF,EAACG,GAAA,CAAA,CAAe,EAAA,CAAI,EAAA,CACtD;AAAA,QACA,gBAAAH,EAACI,GAAA,EAAgB,UAAAT,EAAW,KAAA,CAAK;AAAA,QACjC,gBAAAK,EAACK,GAAA,EACC,UAAAC,EAAUX,EAAW,YAAYY,EAAG,UAAU,GAAGA,EAAG,WAAW,CAAC,EAAA,CAClE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGH;AAEA,MAAMN,IAA6BO,EAAO;AAAA,iBACzBC,EAAM,QAAQ;AAAA,GAGzBL,IAAiBI,EAAO;AAAA;AAAA,iBAEbC,EAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,GAMzBJ,IAA0BG,EAAO;AAAA;AAAA;AAAA,cAGzBC,EAAM,UAAU;AAAA;AAAA;"}