@bynder/compact-view 5.2.1 → 5.2.2

package/Smartfilters_new.js

@@ -1,18 +1,21 @@
-import { jsx as o, Fragment as T, jsxs as C } from "react/jsx-runtime";
-import { useState as p, useRef as m, useEffect as q } from "react";
-import { styled as f } from "styled-components";
-import { Box as G, token as w, Flex as J, Button as K } from "@bynder/design-system";
-import { IconArrowLeft as Q, IconArrowRight as Y } from "@bynder/icons";
+import { jsx as n, Fragment as T, jsxs as C } from "react/jsx-runtime";
+import { useState as u, useRef as m, useEffect as q } from "react";
+import f from "./styled-components.browser.esm.js";
+import { Box as G } from "./Box.js";
+import { Button as J } from "./Button.js";
+import { Flex as K } from "./Flex.js";
+import { token as w } from "./token.js";
+import { IconArrowLeft as Q, IconArrowRight as Y } from "./index4.js";
 import { useConfig as Z } from "./ConfigContext.js";
 import { useAssetFilter as tt } from "./AssetFilterContext.js";
 import { Dropdown as et } from "./Dropdown.js";
 import { Autocomplete as rt } from "./Autocomplete_new.js";
-import { SmartFilterSelect as nt } from "./SmartFilterSelect_new.js";
-import { getAutocompleteOptions as ot } from "./autocomplete.js";
+import { SmartFilterSelect as ot } from "./SmartFilterSelect_new.js";
+import { getAutocompleteOptions as nt } from "./autocomplete.js";
 import { useAuth as it } from "./LoginContext.js";
 import { debounceAsync as st } from "./asyncDebounce.js";
-const Ot = ({ filterData: l }) => {
-  const i = tt(), b = it(), { language: y } = Z(), $ = lt(l), [L, D] = p({}), [X, A] = p(), [I, M] = p({}), [g, d] = p(0), [c, P] = p(0), [O, F] = p(!1), a = m(null), x = m(!1), u = m(null), h = m(null), S = m({});
+const Ct = ({ filterData: l }) => {
+  const i = tt(), b = it(), { language: y } = Z(), k = lt(l), [L, D] = u({}), [X, A] = u(), [I, M] = u({}), [g, d] = u(0), [c, P] = u(0), [O, F] = u(!1), a = m(null), x = m(!1), p = m(null), h = m(null), S = m({});
   q(() => {
     a.current && P(a.current.scrollWidth - a.current.clientWidth), i.isDropdownActive || (D({}), A({}));
   }, [l, a, i]);
@@ -29,21 +32,21 @@ const Ot = ({ filterData: l }) => {
       return t <= c - 100 ? t : c;
     });
   }
-  const N = async (e, t, n) => {
+  const N = async (e, t, o) => {
     let s;
     M((r) => ({
       ...r,
       [t]: !0
-    })), e.length >= 2 && (s = await ot({
+    })), e.length >= 2 && (s = await nt({
       metapropertyId: t,
       auth: b,
       searchTerm: e,
-      page: n
+      page: o
     })), A((r) => ({
       ...r,
       [t]: s ? {
         ...s,
-        metapropertyOptions: n > 1 ? [
+        metapropertyOptions: o > 1 ? [
           ...r?.[t]?.metapropertyOptions || [],
           ...s.metapropertyOptions
         ] : s.metapropertyOptions
@@ -52,36 +55,36 @@ const Ot = ({ filterData: l }) => {
       ...r,
       [t]: !1
     }));
-  }, W = (e) => (S.current[e] || (S.current[e] = st(N, 500)), S.current[e]), v = (e, t, n) => {
-    i.selectSmartfilterOption(e, t, n);
-  }, j = (e, t, n) => {
+  }, W = (e) => (S.current[e] || (S.current[e] = st(N, 500)), S.current[e]), v = (e, t, o) => {
+    i.selectSmartfilterOption(e, t, o);
+  }, _ = (e, t, o) => {
     D((r) => ({
       ...r,
       [e]: t
-    })), W(e)(t, e, n);
+    })), W(e)(t, e, o);
+  }, j = (e) => {
+    p.current = e.clientX, x.current = !1, F(!0);
   }, B = (e) => {
-    u.current = e.clientX, x.current = !1, F(!0);
-  }, H = (e) => {
     if (x.current) {
       e.preventDefault();
-      const t = (n) => {
-        n.stopPropagation(), document.removeEventListener("click", t, !0);
+      const t = (o) => {
+        o.stopPropagation(), document.removeEventListener("click", t, !0);
       };
       document.addEventListener("click", t, {
         capture: !0,
         once: !0
       });
     }
-    u.current = null, h.current = null, F(!1);
-  }, V = (e) => {
-    if (!O || !a.current || !u.current) return;
-    e.preventDefault(), h.current === null && (h.current = g), u.current && Math.abs(e.clientX - u.current) > 5 && (x.current = !0);
-    const t = (e.clientX - u.current) * -1 + h.current;
+    p.current = null, h.current = null, F(!1);
+  }, H = (e) => {
+    if (!O || !a.current || !p.current) return;
+    e.preventDefault(), h.current === null && (h.current = g), p.current && Math.abs(e.clientX - p.current) > 5 && (x.current = !0);
+    const t = (e.clientX - p.current) * -1 + h.current;
     return t <= 16 ? d(0) : t + 16 < c ? d(t) : d(c);
   };
-  return /* @__PURE__ */ o(T, { children: $.map((e) => {
-    const t = e.smartfilter, n = e.metapropertyFilters;
-    return /* @__PURE__ */ o(
+  return /* @__PURE__ */ n(T, { children: k.map((e) => {
+    const t = e.smartfilter, o = e.metapropertyFilters;
+    return /* @__PURE__ */ n(
       et,
       {
         title: t.labels[y] || t.labels.en_US,
@@ -93,33 +96,33 @@ const Ot = ({ filterData: l }) => {
           ct,
           {
             ref: a,
-            onMouseDown: B,
-            onMouseUp: H,
-            onMouseMove: V,
+            onMouseDown: j,
+            onMouseUp: B,
+            onMouseMove: H,
             children: [
-              /* @__PURE__ */ o(
+              /* @__PURE__ */ n(
                 at,
                 {
                   $scroll: g,
                   "data-testid": "metaproperty-dropdown-content",
                   $isDragging: O,
-                  children: n.map((s) => {
+                  children: o.map((s) => {
                     const r = s.metaproperty;
                     if (!i.existingFilters?.[r.name] || r.type !== "autocomplete" && (r.type !== "smart-single" && r.type !== "select" || r.options.length === 0))
                       return null;
-                    const _ = r.type === "autocomplete" ? /* @__PURE__ */ o(
+                    const V = r.type === "autocomplete" ? /* @__PURE__ */ n(
                       rt,
                       {
                         metaproperty: r,
                         value: L[r.id] || "",
-                        onChange: j,
+                        onChange: _,
                         onOptionSelect: v,
                         autocompleteOptions: X || {},
                         isLoading: I[r.id] || !1,
                         selectedOptions: i.selectedSmartfilterOptions || {}
                       }
-                    ) : /* @__PURE__ */ o(
-                      nt,
+                    ) : /* @__PURE__ */ n(
+                      ot,
                       {
                         metaproperty: r,
                         smartfilterId: t.id,
@@ -129,26 +132,26 @@ const Ot = ({ filterData: l }) => {
                         metapropertyCursor: s.metadata.nextCursorMark
                       }
                     );
-                    return /* @__PURE__ */ o(ut, { children: _ }, r.id);
+                    return /* @__PURE__ */ n(pt, { children: V }, r.id);
                   })
                 }
               ),
-              /* @__PURE__ */ C(pt, { direction: "row", justifyContent: "flex-end", children: [
-                /* @__PURE__ */ o(
-                  k,
+              /* @__PURE__ */ C(ut, { direction: "row", justifyContent: "flex-end", children: [
+                /* @__PURE__ */ n(
+                  $,
                   {
                     title: "Previous",
-                    icon: /* @__PURE__ */ o(Q, {}),
+                    icon: /* @__PURE__ */ n(Q, {}),
                     onClick: z,
                     "data-testid": "left-arrow",
                     isDisabled: R
                   }
                 ),
-                /* @__PURE__ */ o(
-                  k,
+                /* @__PURE__ */ n(
+                  $,
                   {
                     title: "Next",
-                    icon: /* @__PURE__ */ o(Y, {}),
+                    icon: /* @__PURE__ */ n(Y, {}),
                     onClick: E,
                     "data-testid": "right-arrow",
                     isDisabled: !U
@@ -177,14 +180,14 @@ const ct = f.div`
 	transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.15);
 	width: fit-content;
 	cursor: ${(l) => l.$isDragging ? "grabbing" : "default"};
-`, ut = f(G)`
+`, pt = f(G)`
 	border-right: 1px solid rgba(3, 16, 38, 0.1);
 	max-width: 300px;
-`, pt = f(J)`
+`, ut = f(K)`
 	padding: ${w.spacing3};
 	border-top: 1px solid rgba(3, 16, 38, 0.1);
 	gap: ${w.spacing3};
-`, k = f(K)`
+`, $ = f(J)`
 	padding: ${w.spacing3};
 	border-radius: 6px;
 	border: 1px solid rgba(3, 16, 38, 0.1);
@@ -192,5 +195,5 @@ const ct = f.div`
 	cursor: pointer;
 `;
 export {
-  Ot as Smartfilter
+  Ct as Smartfilter
 };

package/Spinner.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import { styled as r } from "styled-components";
-import { token as n } from "@bynder/design-system";
+import r from "./styled-components.browser.esm.js";
+import { token as n } from "./token.js";
 function g(i) {
   return /* @__PURE__ */ e(
     s,

package/Spinner2.js

@@ -0,0 +1,15 @@
+import { jsx as t } from "react/jsx-runtime";
+import e, { keyframes as r } from "./styled-components.browser.esm.js";
+function h(o) {
+  return /* @__PURE__ */ t(n, { viewBox: "0 0 24 24", "aria-hidden": "true", ...o, children: /* @__PURE__ */ t(a, { cx: "12", cy: "12", r: "8", fill: "none", strokeWidth: "3" }) });
+}
+const s = r(["100%{transform:rotate(360deg);}"]), i = r(["0%{stroke-dasharray:1,100;stroke-dashoffset:0;}50%{stroke-dasharray:80,100;stroke-dashoffset:-20;}100%{stroke-dasharray:80,100;stroke-dashoffset:-48;}"]), n = e.svg.withConfig({
+  displayName: "Svg",
+  componentId: "sc-16b0hpm-0"
+})(["width:24px;height:24px;animation:", " 1s linear infinite;"], s), a = e.circle.withConfig({
+  displayName: "Circle",
+  componentId: "sc-16b0hpm-1"
+})(["stroke:currentcolor;animation:", " 1.5s ease-in-out infinite;stroke-linecap:round;"], i);
+export {
+  h as Spinner
+};

package/StatefulAssetList.js

@@ -1,8 +1,8 @@
 import { jsx as t, jsxs as F } from "react/jsx-runtime";
 import { useEffect as c } from "react";
-import { styled as f } from "styled-components";
-import { token as i } from "@bynder/design-system";
-import { IconErrorOutline as N } from "@bynder/icons";
+import f from "./styled-components.browser.esm.js";
+import { token as i } from "./token.js";
+import { IconErrorOutline as N } from "./index4.js";
 import { __ as m } from "./index2.js";
 import { NoResults as I } from "./NoResults.js";
 import { useAssetFilter as _ } from "./AssetFilterContext.js";
@@ -13,16 +13,16 @@ import { ActiveFilters as P } from "./ActiveFilters.js";
 import { pluralize as $ } from "./text.js";
 import { AssetList as b } from "./AssetList.js";
 import { DirectionSelect as j } from "./DirectionSelect.js";
-import { FieldSelect as k } from "./FieldSelect.js";
-import { Tooltip as z } from "./Tooltip.js";
-import { useSearchStore as B } from "./useSearchStore.js";
-import { useSimilaritySearchStore as H } from "./useSimilaritySearchStore.js";
+import { FieldSelect as U } from "./FieldSelect.js";
+import { Tooltip as k } from "./Tooltip.js";
+import { useSearchStore as z } from "./useSearchStore.js";
+import { useSimilaritySearchStore as B } from "./useSimilaritySearchStore.js";
 function ce(e) {
-  const { data: s, isLoading: r, loadMore: g, hasNextPage: p, executeQuery: d } = e.connection, { setIsLoading: S, setSearch: a } = B(), l = w(), A = D(), { selectAssets: h, toggleAssets: v, setAllAssets: L } = R(), x = _(), {
+  const { data: s, isLoading: r, loadMore: g, hasNextPage: p, executeQuery: d } = e.connection, { setIsLoading: S, setSearch: a } = z(), l = w(), A = D(), { selectAssets: h, toggleAssets: v, setAllAssets: L } = R(), x = _(), {
     isNLSSelected: E,
     NLSSearchText: y,
     isSelected: C
-  } = H();
+  } = B();
   if (c(() => {
     r || S(!1);
   }, [r]), c(() => {
@@ -46,18 +46,18 @@ function ce(e) {
       onSelect: h,
       onToggle: v,
       emptyStateElement: /* @__PURE__ */ t(I, { onReset: T }),
-      children: /* @__PURE__ */ F(O, { children: [
-        o !== void 0 && /* @__PURE__ */ t(U, { "data-testid": "assets-amount", children: $(o, m("{} asset"), m("{} assets")) }, o),
+      children: /* @__PURE__ */ F(H, { children: [
+        o !== void 0 && /* @__PURE__ */ t(O, { "data-testid": "assets-amount", children: $(o, m("{} asset"), m("{} assets")) }, o),
         e.showActiveFilters && /* @__PURE__ */ t(P, {}),
         /* @__PURE__ */ t(
-          k,
+          U,
           {
             options: n ? ["NL_SEARCH"] : ["CREATED_AT", "PUBLISHED_AT", "UPDATED_AT", "NAME"]
           }
         ),
         /* @__PURE__ */ t(j, { nlSearch: n }),
         n && /* @__PURE__ */ t(
-          z,
+          k,
           {
             text: `You cannot change the sorting criteria while a Visual Similarity filter
 							is being applied`,
@@ -83,13 +83,13 @@ function u(e) {
     value: e.value.searchAssets.assets.nodes
   };
 }
-const O = f.div`
+const H = f.div`
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	z-index: 10;
 	padding: ${i.spacing5} ${i.spacing5} ${i.spacing3} ${i.spacing5};
-`, U = f.span`
+`, O = f.span`
 	color: rgba(0, 34, 51, 0.5);
 	flex-shrink: 0;
 	animation: fade-in-down 0.15s ease-out;

package/Stats.js

@@ -0,0 +1,16 @@
+import { jsx as a } from "react/jsx-runtime";
+import r from "./styled-components.browser.esm.js";
+import { token as t } from "./token.js";
+function s({
+  children: o,
+  ...p
+}) {
+  return /* @__PURE__ */ a(n, { ...p, children: o });
+}
+const n = r.div.withConfig({
+  displayName: "StatsStyled",
+  componentId: "sc-1pp7wmq-0"
+})(["display:flex;flex-wrap:wrap;row-gap:", ";column-gap:", ";padding:var(--card-content-padding);border-top:1px solid ", ";"], t.spacing4, t.spacing5, t.gray100a);
+export {
+  s as Stats
+};

package/StatsItem.js

@@ -0,0 +1,23 @@
+import { jsx as o, jsxs as l } from "react/jsx-runtime";
+import p from "./styled-components.browser.esm.js";
+import { Tooltip as s } from "./Tooltip2.js";
+import { token as e } from "./token.js";
+import { textStyles as a } from "./textStyles.js";
+function y({
+  icon: i,
+  children: t,
+  title: m,
+  ...n
+}) {
+  return t && t.toString().length > 3, /* @__PURE__ */ o(s, { content: m, timing: "delay", children: (r) => /* @__PURE__ */ l(c, { ...n, ...r, children: [
+    /* @__PURE__ */ o("div", { children: i }),
+    t ? /* @__PURE__ */ o("span", { children: t }) : null
+  ] }) });
+}
+const c = p.div.withConfig({
+  displayName: "StatItemStyled",
+  componentId: "sc-1f3t5ym-0"
+})(["", " display:flex;column-gap:", ";align-items:center;color:", ";"], a.uiTextS, e.spacing2, e.colorTextMuted);
+export {
+  y as StatsItem
+};

package/Status.js

@@ -0,0 +1,32 @@
+import { jsx as t } from "react/jsx-runtime";
+import { token as r } from "./token.js";
+import { SvgIcon as i } from "./styles2.js";
+const o = {
+  online: a,
+  offline: c,
+  inactive: l
+};
+function s({
+  type: n
+}) {
+  const e = o[n];
+  return /* @__PURE__ */ t(e, { "data-thumbnail-status": !0 });
+}
+function a({
+  ...n
+}) {
+  return /* @__PURE__ */ t(i, { viewBox: "0 0 24 24", "aria-hidden": "true", fill: r.teal500, ...n, children: /* @__PURE__ */ t("path", { d: "M 0 12 C 0 5.371094 5.371094 0 12 0 C 18.628906 0 24 5.371094 24 12 C 24 18.628906 18.628906 24 12 24 C 5.371094 24 0 18.628906 0 12 Z M 0 12 " }) });
+}
+function c({
+  ...n
+}) {
+  return /* @__PURE__ */ t(i, { viewBox: "0 0 24 24", "aria-hidden": "true", fill: r.gray400, ...n, children: /* @__PURE__ */ t("path", { d: "M 0 12 C 0 5.371094 5.371094 0 12 0 C 18.628906 0 24 5.371094 24 12 C 24 18.628906 18.628906 24 12 24 C 5.371094 24 0 18.628906 0 12 Z M 0 12 " }) });
+}
+function l({
+  ...n
+}) {
+  return /* @__PURE__ */ t(i, { viewBox: "0 0 24 24", "aria-hidden": "true", fill: "transparent", ...n, children: /* @__PURE__ */ t("circle", { cx: "12", cy: "12", r: "9", stroke: r.gray400, strokeWidth: "4" }) });
+}
+export {
+  s as Status
+};

package/Switch.js

@@ -0,0 +1,82 @@
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { useFocusRing as k } from "./useFocusRing.js";
+import t, { css as h } from "./styled-components.browser.esm.js";
+import { textStyles as y } from "./textStyles.js";
+import { token as o } from "./token.js";
+import { makeInternalTokens as $ } from "./makeInternalTokens.js";
+const l = "ds-switch__pointer-events-wrapper";
+function v({
+  children: i,
+  isChecked: b,
+  isDisabled: n,
+  inputProps: p,
+  onChange: g = () => {
+  },
+  // eslint-disable-line @typescript-eslint/no-empty-function
+  subtext: s,
+  "aria-label": f,
+  "aria-labelledby": u,
+  ...m
+}) {
+  const {
+    isFocusVisible: w,
+    focusProps: x
+  } = k();
+  return /* @__PURE__ */ d(D, { $hasSubtext: !!s, $isDisabled: n, className: l, ...m, children: [
+    i && /* @__PURE__ */ d(S, { children: [
+      i,
+      s ? /* @__PURE__ */ r(z, { $isDisabled: n, children: s }) : null
+    ] }),
+    /* @__PURE__ */ r(I, { children: /* @__PURE__ */ d(c, { children: [
+      /* @__PURE__ */ r("input", { role: "switch", type: "checkbox", disabled: n, onChange: g, checked: b, "aria-checked": b, "aria-label": f, "aria-labelledby": u, ...x, ...p }),
+      /* @__PURE__ */ r(C, { "aria-hidden": "true", $isDisabled: n, $isFocusVisible: w })
+    ] }) })
+  ] });
+}
+v.pointerEventsClassname = l;
+const {
+  internalTokens: e,
+  declareTokens: T
+} = $({
+  lightTheme: {
+    "switch-indicator-background-off": o.gray75,
+    "switch-indicator-background-off-hover": o.gray100,
+    "switch-indicator-handle-box-shadow": o.elevation2,
+    "switch-focus-ring-color": o.gray200,
+    "switch-indicator-background-off-disabled": o.gray100,
+    "switch-indicator-handle-color-off-disabled": o.gray50,
+    "switch-indicator-background-on-disabled": o.gray400,
+    "switch-indicator-handle-color-on-disabled": o.gray100
+  },
+  darkTheme: {
+    "switch-indicator-background-off": o.gray75a,
+    "switch-indicator-background-off-hover": o.gray100a,
+    "switch-indicator-handle-box-shadow": "none",
+    "switch-focus-ring-color": o.gray200a,
+    "switch-indicator-background-off-disabled": o.gray100a,
+    "switch-indicator-handle-color-off-disabled": o.gray200a,
+    "switch-indicator-background-on-disabled": o.gray400a,
+    "switch-indicator-handle-color-on-disabled": o.gray200a
+  }
+}), D = t.label.withConfig({
+  displayName: "SwitchStyled",
+  componentId: "sc-13zxk6h-0"
+})(["", " ", " display:flex;align-items:", ";margin:0;padding:", " 0;color:", ";cursor:", ";user-select:none;"], T, y.uiTextM, (i) => i.$hasSubtext ? "center" : "baseline", o.spacing1, o.colorText, (i) => !i.$isDisabled && "pointer"), S = t.span.withConfig({
+  displayName: "Label",
+  componentId: "sc-13zxk6h-1"
+})(["align-self:center;margin-right:", ";"], o.spacing4), z = t.span.withConfig({
+  displayName: "SubtextHolder",
+  componentId: "sc-13zxk6h-2"
+})(["display:block;color:", ";font-size:", ";"], (i) => i.$isDisabled ? o.colorTextDisabled : o.colorTextMuted, o.fontSize75), I = t.span.withConfig({
+  displayName: "ToggleAlignment",
+  componentId: "sc-13zxk6h-3"
+})(["position:static !important;margin-left:auto;&::before{content:'\\200B';display:inline-block;vertical-align:middle;}"]), c = t.span.withConfig({
+  displayName: "Toggle",
+  componentId: "sc-13zxk6h-4"
+})(["position:relative !important;display:inline-block;vertical-align:middle;width:36px;height:22px;input{position:absolute;opacity:0;}"]), a = "." + l, C = t.span.withConfig({
+  displayName: "Indicator",
+  componentId: "sc-13zxk6h-5"
+})(["position:absolute !important;top:0;right:0;bottom:0;left:0;box-sizing:border-box;width:100%;height:100%;border-radius:", ";background:", ";cursor:", ";transition:0.2s;&::before{content:'';position:absolute;right:calc(100% - 20px);bottom:2px;left:2px;height:18px;border-radius:50%;background-color:", ";box-shadow:", ";transition:0.2s;}", " input:checked + &&{background-color:", ";opacity:", ";&::before{right:2px;left:calc(100% - 20px);background-color:", ";}}", " ", ":hover &&,", ":focus-visible &&{background-color:", ";}", ":hover input:checked + &&,", ":focus-visible input:checked + &&{background-color:", ";}", ""], o.radiusPill, (i) => i.$isDisabled ? e["switch-indicator-background-off-disabled"] : e["switch-indicator-background-off"], (i) => !i.$isDisabled && "pointer", (i) => i.$isDisabled ? e["switch-indicator-handle-color-off-disabled"] : o.white, e["switch-indicator-handle-box-shadow"], c, (i) => i.$isDisabled ? e["switch-indicator-background-on-disabled"] : o.blue500, (i) => i.$isDisabled ? "0.5" : "1", (i) => i.$isDisabled ? e["switch-indicator-handle-color-on-disabled"] : o.white, (i) => !i.$isDisabled && h(["", ":active input + &&::before{right:calc(100% - 24px);left:2px;border-radius:9px;}", ":active input:checked + &&::before{right:2px;left:calc(100% - 24px);}"], a, a), a, a, (i) => !i.$isDisabled && e["switch-indicator-background-off-hover"], a, a, (i) => !i.$isDisabled && o.blue600, (i) => i.$isFocusVisible && h(["", " input + &&{background-color:", ";&::after{content:'';position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border:2px solid ", ";border-radius:100px;}}", " input:checked + &&::after{border-color:", ";}"], c, o.gray100, e["switch-focus-ring-color"], c, o.blue500));
+export {
+  v as Switch
+};

package/SwitchNLS.js

@@ -1,13 +1,16 @@
 import { jsxs as l, jsx as i } from "react/jsx-runtime";
-import r from "styled-components";
-import { token as e, textStyles as s, TruncatedText as c, Switch as f } from "@bynder/design-system";
-import { IconSmart as m } from "@bynder/icons";
+import o from "./styled-components.browser.esm.js";
+import { Switch as m } from "./Switch.js";
+import { TruncatedText as c } from "./TruncatedText.js";
+import { token as r } from "./token.js";
+import { textStyles as s } from "./textStyles.js";
+import { IconSmart as f } from "./index4.js";
 import { __ as d } from "./index2.js";
-const C = ({ isNLSSearchOn: n, setIsNLSSearchOn: o }) => {
+const j = ({ isNLSSearchOn: e, setIsNLSSearchOn: n }) => {
   const a = (t) => {
-    t && t.currentTarget !== t.target || (t?.stopPropagation(), o(!n));
+    t && t.currentTarget !== t.target || (t?.stopPropagation(), n(!e));
   }, g = () => {
-    o(!n);
+    n(!e);
   };
   return /* @__PURE__ */ l(
     p,
@@ -19,15 +22,15 @@ const C = ({ isNLSSearchOn: n, setIsNLSSearchOn: o }) => {
       tabIndex: 0,
       "data-testid": "switch-nls-container",
       children: [
-        /* @__PURE__ */ i(h, { children: /* @__PURE__ */ i(m, {}) }),
+        /* @__PURE__ */ i(h, { children: /* @__PURE__ */ i(f, {}) }),
         /* @__PURE__ */ l(u, { id: "labelId", children: [
           /* @__PURE__ */ i(c, { children: d("Use natural language search") }),
           /* @__PURE__ */ i(x, { children: /* @__PURE__ */ i(c, { children: d("Find images by describing them") }) })
         ] }),
         /* @__PURE__ */ i(b, { children: /* @__PURE__ */ i(
-          f,
+          m,
           {
-            isChecked: n,
+            isChecked: e,
             "aria-labelledby": "labelId",
             onChange: g
           }
@@ -35,14 +38,14 @@ const C = ({ isNLSSearchOn: n, setIsNLSSearchOn: o }) => {
       ]
     }
   );
-}, p = r.div`
+}, p = o.div`
 	display: flex;
 
 	align-items: flex-start;
-	margin: ${e.spacing3};
-	padding: ${e.spacing3};
+	margin: ${r.spacing3};
+	padding: ${r.spacing3};
 	background-color: #f3f2fd;
-	border-radius: ${e.radiusLarge};
+	border-radius: ${r.radiusLarge};
 
 	&:hover {
 		background-color: #eeedfc;
@@ -52,28 +55,28 @@ const C = ({ isNLSSearchOn: n, setIsNLSSearchOn: o }) => {
 	&:active {
 		background-color: #f3f2fd;
 	}
-`, h = r.div`
+`, h = o.div`
 	flex: none;
-	margin-right: ${e.spacing4};
-	color: ${e.purple500};
-`, u = r.div`
+	margin-right: ${r.spacing4};
+	color: ${r.purple500};
+`, u = o.div`
 	${s.uiTextM}
 
 	flex: 1;
 	min-width: 0;
 	font-weight: 400;
 	color: #031026;
-`, x = r.div`
+`, x = o.div`
 	${s.uiTextS}
 
-	color: ${e.colorTextMuted};
-`, b = r.div`
+	color: ${r.colorTextMuted};
+`, b = o.div`
 	display: flex;
 	flex: none;
-	gap: ${e.spacing3};
+	gap: ${r.spacing3};
 	align-items: center;
-	margin-left: ${e.spacing4};
+	margin-left: ${r.spacing4};
 `;
 export {
-  C as SwitchNLS
+  j as SwitchNLS
 };

package/Tabs2.js

@@ -0,0 +1,10 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Box as d } from "./Box.js";
+function n({
+  children: o
+}) {
+  return /* @__PURE__ */ t(d, { paddingTop: "6", paddingRight: "6", paddingBottom: "3", paddingLeft: "6", children: o });
+}
+export {
+  n as Tabs
+};

package/TagItem.js

@@ -1,29 +1,29 @@
 import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import { styled as n } from "styled-components";
-import { token as s } from "@bynder/design-system";
-import { Chip as l } from "./Chip.js";
-import { useAssetFilter as r } from "./AssetFilterContext.js";
+import n from "./styled-components.browser.esm.js";
+import { token as s } from "./token.js";
+import { Chip as r } from "./Chip2.js";
+import { useAssetFilter as g } from "./AssetFilterContext.js";
 function x(t) {
-  const e = r(), i = e.tags.includes(t.tag.name);
+  const e = g(), i = e.tags.includes(t.tag.name);
   function o() {
     i ? e.removeTag(t.tag.name) : t.isLoading || e.addTag(t.tag.name);
   }
   return /* @__PURE__ */ m(
-    l,
+    r,
     {
       loading: t.isLoading,
       active: i,
       onClick: o,
       "data-testid": "tag-item",
       children: [
-        /* @__PURE__ */ a(g, { children: t.tag.name }),
+        /* @__PURE__ */ a(l, { children: t.tag.name }),
         /* @__PURE__ */ a(c, { children: t.tag.assetCount })
       ]
     },
     t.tag.id
   );
 }
-const g = n.span`
+const l = n.span`
 	max-with: 128px;
 	overflow: hidden;
 	text-overflow: ellipsis;