@bynder/compact-view 5.2.0 → 5.2.2

package/Smartfilters_new.js

@@ -1,21 +1,24 @@
-import { jsx as i, Fragment as T, jsxs as O } from "react/jsx-runtime";
-import { useState as p, useRef as f, useEffect as q } from "react";
-import { styled as m } 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 vt = ({ filterData: l }) => {
-  const s = tt(), b = it(), { language: D } = Z(), $ = lt(l), [L, y] = p({}), [X, A] = p(), [I, M] = p({}), [g, d] = p(0), [c, P] = p(0), [v, F] = p(!1), a = f(null), x = f(!1), u = f(null), h = f(null), S = f({});
+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), s.isDropdownActive || (y({}), A({}));
-  }, [l, a, s]);
+    a.current && P(a.current.scrollWidth - a.current.clientWidth), i.isDropdownActive || (D({}), A({}));
+  }, [l, a, i]);
   const R = g === 0, U = c > 5 && g !== c;
   function z() {
     d((e) => {
@@ -29,119 +32,126 @@ const vt = ({ filterData: l }) => {
       return t <= c - 100 ? t : c;
     });
   }
-  const N = async (e, t) => {
-    let n;
-    M((o) => ({
-      ...o,
+  const N = async (e, t, o) => {
+    let s;
+    M((r) => ({
+      ...r,
       [t]: !0
-    })), e.length >= 2 && (n = await ot({
+    })), e.length >= 2 && (s = await nt({
       metapropertyId: t,
       auth: b,
-      searchTerm: e
-    })), A((o) => ({
-      ...o,
-      [t]: n || null
-    })), M((o) => ({
-      ...o,
+      searchTerm: e,
+      page: o
+    })), A((r) => ({
+      ...r,
+      [t]: s ? {
+        ...s,
+        metapropertyOptions: o > 1 ? [
+          ...r?.[t]?.metapropertyOptions || [],
+          ...s.metapropertyOptions
+        ] : s.metapropertyOptions
+      } : null
+    })), M((r) => ({
+      ...r,
       [t]: !1
     }));
-  }, W = (e) => (S.current[e] || (S.current[e] = st(N, 500)), S.current[e]), C = (e, t, n) => {
-    s.selectSmartfilterOption(e, t, n);
-  }, j = (e, t) => {
-    y((o) => ({
-      ...o,
+  }, 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);
+    })), 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 (!v || !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__ */ i(T, { children: $.map((e) => {
-    const t = e.smartfilter, n = e.metapropertyFilters;
-    return /* @__PURE__ */ i(
+  return /* @__PURE__ */ n(T, { children: k.map((e) => {
+    const t = e.smartfilter, o = e.metapropertyFilters;
+    return /* @__PURE__ */ n(
       et,
       {
-        title: t.labels[D] || t.labels.en_US,
-        alt: t.labels[D] || t.labels.en_US,
+        title: t.labels[y] || t.labels.en_US,
+        alt: t.labels[y] || t.labels.en_US,
         isSmall: !0,
         fadeIn: !0,
         isMetapropertyDropdown: !0,
-        children: () => /* @__PURE__ */ O(
+        children: () => /* @__PURE__ */ C(
           ct,
           {
             ref: a,
-            onMouseDown: B,
-            onMouseUp: H,
-            onMouseMove: V,
+            onMouseDown: j,
+            onMouseUp: B,
+            onMouseMove: H,
             children: [
-              /* @__PURE__ */ i(
+              /* @__PURE__ */ n(
                 at,
                 {
                   $scroll: g,
                   "data-testid": "metaproperty-dropdown-content",
-                  $isDragging: v,
-                  children: n.map((o) => {
-                    const r = o.metaproperty;
-                    if (!s.existingFilters?.[r.name] || r.type !== "autocomplete" && (r.type !== "smart-single" && r.type !== "select" || r.options.length === 0))
+                  $isDragging: O,
+                  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__ */ i(
+                    const V = r.type === "autocomplete" ? /* @__PURE__ */ n(
                       rt,
                       {
                         metaproperty: r,
                         value: L[r.id] || "",
-                        onChange: j,
-                        onOptionSelect: C,
+                        onChange: _,
+                        onOptionSelect: v,
                         autocompleteOptions: X || {},
                         isLoading: I[r.id] || !1,
-                        selectedOptions: s.selectedSmartfilterOptions || {}
+                        selectedOptions: i.selectedSmartfilterOptions || {}
                       }
-                    ) : /* @__PURE__ */ i(
-                      nt,
+                    ) : /* @__PURE__ */ n(
+                      ot,
                       {
                         metaproperty: r,
                         smartfilterId: t.id,
-                        onOptionSelect: C,
-                        selectedOptions: s.selectedSmartfilterOptions || {},
-                        filteredMetaproperty: s.existingFilters?.[r.name],
-                        metapropertyCursor: o.metadata.nextCursorMark
+                        onOptionSelect: v,
+                        selectedOptions: i.selectedSmartfilterOptions || {},
+                        filteredMetaproperty: i.existingFilters?.[r.name],
+                        metapropertyCursor: s.metadata.nextCursorMark
                       }
                     );
-                    return /* @__PURE__ */ i(ut, { children: _ }, r.id);
+                    return /* @__PURE__ */ n(pt, { children: V }, r.id);
                   })
                 }
               ),
-              /* @__PURE__ */ O(pt, { direction: "row", justifyContent: "flex-end", children: [
-                /* @__PURE__ */ i(
-                  k,
+              /* @__PURE__ */ C(ut, { direction: "row", justifyContent: "flex-end", children: [
+                /* @__PURE__ */ n(
+                  $,
                   {
                     title: "Previous",
-                    icon: /* @__PURE__ */ i(Q, {}),
+                    icon: /* @__PURE__ */ n(Q, {}),
                     onClick: z,
                     "data-testid": "left-arrow",
                     isDisabled: R
                   }
                 ),
-                /* @__PURE__ */ i(
-                  k,
+                /* @__PURE__ */ n(
+                  $,
                   {
                     title: "Next",
-                    icon: /* @__PURE__ */ i(Y, {}),
+                    icon: /* @__PURE__ */ n(Y, {}),
                     onClick: E,
                     "data-testid": "right-arrow",
                     isDisabled: !U
@@ -157,27 +167,27 @@ const vt = ({ filterData: l }) => {
   }) });
 };
 function lt(l) {
-  return [...l.filters].sort((s, b) => s.smartfilter.zindex - b.smartfilter.zindex);
+  return [...l.filters].sort((i, b) => i.smartfilter.zindex - b.smartfilter.zindex);
 }
-const ct = m.div`
+const ct = f.div`
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
-`, at = m.div`
+`, at = f.div`
 	display: flex;
 	flex-direction: row;
 	transform: translateX(-${(l) => l.$scroll}px);
 	transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.15);
 	width: fit-content;
 	cursor: ${(l) => l.$isDragging ? "grabbing" : "default"};
-`, ut = m(G)`
+`, pt = f(G)`
 	border-right: 1px solid rgba(3, 16, 38, 0.1);
 	max-width: 300px;
-`, pt = m(J)`
+`, ut = f(K)`
 	padding: ${w.spacing3};
 	border-top: 1px solid rgba(3, 16, 38, 0.1);
 	gap: ${w.spacing3};
-`, k = m(K)`
+`, $ = f(J)`
 	padding: ${w.spacing3};
 	border-radius: 6px;
 	border: 1px solid rgba(3, 16, 38, 0.1);
@@ -185,6 +195,5 @@ const ct = m.div`
 	cursor: pointer;
 `;
 export {
-  vt as Smartfilter
+  Ct as Smartfilter
 };
-//# sourceMappingURL=Smartfilters_new.js.map

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,
@@ -29,4 +29,3 @@ const s = r.div`
 export {
   g as Spinner
 };
-//# sourceMappingURL=Spinner.js.map

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;
@@ -97,4 +97,3 @@ const O = f.div`
 export {
   ce as StatefulAssetList
 };
-//# sourceMappingURL=StatefulAssetList.js.map

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/StoreInitializer.js

@@ -0,0 +1,29 @@
+import { useRef as i, useEffect as s } from "react";
+import { useSearchStore as r } from "./useSearchStore.js";
+import { useOrderingStore as o } from "./useOrderingStore.js";
+import { useDatStore as S } from "./useDatStore.js";
+import { useSimilaritySearchStore as l } from "./useSimilaritySearchStore.js";
+import { useRouterStore as f } from "./useRouterStore.js";
+function n() {
+  o.getState().reset(), S.getState().reset(), r.getState().clear(), l.setState({
+    isEnabled: !1,
+    isSelected: !1,
+    isNLSSelected: !1,
+    NLSSearchText: void 0,
+    similarityAssetsData: { tag: "Loading", value: null }
+  }), f.setState({ page: { page: "assets" } });
+}
+function h({
+  defaultSearchTerm: e,
+  resetOnMount: a = !1
+}) {
+  const t = i(!1);
+  return s(() => {
+    t.current || (a && n(), r.getState().setSearch("assets", e ?? ""), t.current = !0);
+  }, []), s(() => {
+    t.current && r.getState().setSearch("assets", e ?? "");
+  }, [e]), null;
+}
+export {
+  h as StoreInitializer
+};

package/Styles.css.js

@@ -2,4 +2,3 @@ const e = ':host{font-family:SourceSansPro,Source Sans Pro,system-ui,-apple-syst
 export {
   e as default
 };
-//# sourceMappingURL=Styles.css.js.map

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
+};