@bynder/compact-view 5.2.1 → 5.2.2

package/InterceptorManager.js

@@ -0,0 +1,58 @@
+import n from "./utils6.js";
+class a {
+  constructor() {
+    this.handlers = [];
+  }
+  /**
+   * Add a new interceptor to the stack
+   *
+   * @param {Function} fulfilled The function to handle `then` for a `Promise`
+   * @param {Function} rejected The function to handle `reject` for a `Promise`
+   *
+   * @return {Number} An ID used to remove interceptor later
+   */
+  use(s, h, r) {
+    return this.handlers.push({
+      fulfilled: s,
+      rejected: h,
+      synchronous: r ? r.synchronous : !1,
+      runWhen: r ? r.runWhen : null
+    }), this.handlers.length - 1;
+  }
+  /**
+   * Remove an interceptor from the stack
+   *
+   * @param {Number} id The ID that was returned by `use`
+   *
+   * @returns {Boolean} `true` if the interceptor was removed, `false` otherwise
+   */
+  eject(s) {
+    this.handlers[s] && (this.handlers[s] = null);
+  }
+  /**
+   * Clear all interceptors from the stack
+   *
+   * @returns {void}
+   */
+  clear() {
+    this.handlers && (this.handlers = []);
+  }
+  /**
+   * Iterate over all the registered interceptors
+   *
+   * This method is particularly useful for skipping over any
+   * interceptors that may have become `null` calling `eject`.
+   *
+   * @param {Function} fn The function to call for each interceptor
+   *
+   * @returns {void}
+   */
+  forEach(s) {
+    n.forEach(this.handlers, function(r) {
+      r !== null && s(r);
+    });
+  }
+}
+export {
+  a as default
+};

package/Item.js

@@ -0,0 +1,107 @@
+import { jsxs as C, jsx as o } from "react/jsx-runtime";
+import L, { forwardRef as j } from "react";
+import a, { css as l } from "./styled-components.browser.esm.js";
+import { useFocusRing as O } from "./useFocusRing.js";
+import { textStyles as T } from "./textStyles.js";
+import { token as e } from "./token.js";
+import { Checkbox as w } from "./Checkbox.js";
+import { Thumbnail as B } from "./Thumbnail.js";
+import { useId as M } from "./useId.js";
+import { Switch as $ } from "./Switch.js";
+import { TruncatedText as I } from "./TruncatedText.js";
+import { useItemDragAndDropContext as _ } from "./context10.js";
+import { makeInternalTokens as q } from "./makeInternalTokens.js";
+const me = j(({
+  children: i,
+  subtext: u,
+  switchProps: d,
+  thumbnail: b,
+  rightElements: y,
+  onClick: s,
+  isDisabled: r = !1,
+  isSelected: D = !1,
+  checkedVariant: c,
+  isChecked: v = !1,
+  isIndeterminateCheckbox: S = !1,
+  ...A
+}, R) => {
+  const m = M("list-item-label"), {
+    isFocusVisible: N,
+    focusProps: z
+  } = O(), h = _(), x = L.useRef(null), E = d?.onChange ? "" : $.pointerEventsClassname, F = [w.pointerEventsClassname, E, B.pointerEventsClassname].join(" "), g = typeof s == "function", K = c === "switch" && !!d?.onChange, k = g && !!c && !K, p = g && !r && !k;
+  function P(t) {
+    t.key !== "ArrowDown" && t.key !== "ArrowUp" && t.key !== "ArrowLeft" && t.key !== "ArrowRight" && t.stopPropagation();
+  }
+  return /* @__PURE__ */ C(G, { $isDragging: h?.isDragging ?? !1, $isSelected: D, $isActive: g, tabIndex: p ? 0 : void 0, onClick: g && !r ? s : void 0, onKeyDown: (t) => {
+    p && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), s());
+  }, $isDisabled: r, "aria-disabled": r, className: F, $isFocusVisible: N, ref: R, "aria-labelledby": p ? m : void 0, ...A, ...z, children: [
+    c === "checkbox" && /* @__PURE__ */ o(H, { onClick: (t) => {
+      t.stopPropagation();
+    }, onKeyDown: (t) => {
+      t.stopPropagation();
+    }, children: /* @__PURE__ */ o(w, { isChecked: v, isIndeterminate: S, isDisabled: r, "aria-labelledby": m, onChange: s }) }),
+    b && /* @__PURE__ */ o(J, { $isDisabled: r, children: b }),
+    /* @__PURE__ */ C(Q, { id: m, children: [
+      /* @__PURE__ */ o(I, { children: i }),
+      u ? /* @__PURE__ */ o(V, { $isDisabled: r, children: /* @__PURE__ */ o(I, { children: u }) }) : null
+    ] }),
+    y && /* @__PURE__ */ o(
+      f,
+      {
+        ref: x,
+        onClick: (t) => {
+          x?.current?.querySelectorAll("a, button").length && t.stopPropagation();
+        },
+        onKeyDown: P,
+        children: y
+      }
+    ),
+    c === "switch" && /* @__PURE__ */ o(f, { onClick: (t) => {
+      t.stopPropagation();
+    }, onKeyDown: (t) => {
+      t.stopPropagation();
+    }, children: /* @__PURE__ */ o($, { isChecked: v, isDisabled: r, "aria-labelledby": m, onChange: k ? s : void 0, ...d }) }),
+    h?.dragIndicator && /* @__PURE__ */ o(f, { children: h?.dragIndicator })
+  ] });
+}), {
+  internalTokens: n,
+  declareTokens: U
+} = q({
+  lightTheme: {
+    "list-item-active-background-hover": e.gray25,
+    "list-item-active-background-focus": e.gray25,
+    "list-item-active-background-active": e.gray50,
+    "list-item-right-elements-color": e.gray200,
+    "list-item-right-elements-color-active": e.gray600,
+    "list-item-focus-ring": `inset 0 0 0 2px ${e.gray50}, inset 0 0 0 4px ${e.gray10}`
+  },
+  darkTheme: {
+    "list-item-active-background-hover": e.gray25a,
+    "list-item-active-background-focus": e.gray25a,
+    "list-item-active-background-active": e.gray50a,
+    "list-item-right-elements-color": e.gray200a,
+    "list-item-right-elements-color-active": e.gray600a,
+    "list-item-focus-ring": `inset 0 0 0 2px ${e.gray300a}, inset 0 0 0 4px ${e.gray50}`
+  }
+}), G = a.div.withConfig({
+  displayName: "ItemStyled",
+  componentId: "sc-18m0z46-0"
+})(["", " --list-item-right-elements-color:", ";display:flex;align-items:center;margin-right:calc(", " * -1);margin-left:calc(", " * -1);padding:", " ", ";border-radius:var(--ds-list-item-border-radius-override,", ");color:", ";&:hover{--list-item-concealead-action-opacity:1;--list-item-concealead-action-width:auto;}", " ", " ", ""], U, n["list-item-right-elements-color"], e.spacing4, e.spacing4, e.spacing3, e.spacing4, e.radiusLarge, e.colorText, (i) => i.$isActive && l(["outline:none;cursor:pointer;&&:hover{--list-item-right-elements-color:", ";background:", ";}", " &&:active{background:", ";box-shadow:none;}", ""], n["list-item-right-elements-color-active"], n["list-item-active-background-hover"], i.$isFocusVisible && l(["--list-item-right-elements-color:", ";background:", ";box-shadow:var( --ds-list-item-focus-ring-override,", " );"], n["list-item-right-elements-color-active"], n["list-item-active-background-focus"], n["list-item-focus-ring"]), n["list-item-active-background-active"], i.$isDisabled && l(["color:", ";pointer-events:none;"], e.colorTextDisabled)), (i) => i.$isSelected && l(["--list-item-right-elements-color:", ";&&,&&:hover{background:", ";}"], n["list-item-right-elements-color-active"], n["list-item-active-background-active"]), (i) => i.$isDragging && l(["--list-item-right-elements-color:", ";background:", ";box-shadow:", ";cursor:grabbing;"], n["list-item-right-elements-color-active"], e.gray25, e.elevation4)), H = a.div.withConfig({
+  displayName: "CheckboxContainer",
+  componentId: "sc-18m0z46-1"
+})(["flex:none;margin-right:", ";"], e.spacing4), J = a.div.withConfig({
+  displayName: "ThumbnailContainer",
+  componentId: "sc-18m0z46-2"
+})(["flex:none;margin-right:", ";", ""], e.spacing4, (i) => i.$isDisabled && "opacity: 50%;"), Q = a.div.withConfig({
+  displayName: "Content",
+  componentId: "sc-18m0z46-3"
+})(["", " flex:1;min-width:0;"], T.uiTextM), V = a.div.withConfig({
+  displayName: "Subtext",
+  componentId: "sc-18m0z46-4"
+})(["", " color:", ";"], T.uiTextS, (i) => i.$isDisabled ? e.colorTextDisabled : e.colorTextMuted), f = a.div.withConfig({
+  displayName: "RightElements",
+  componentId: "sc-18m0z46-5"
+})(["display:flex;flex:none;gap:", ";align-items:center;margin-left:", ";color:var(--list-item-right-elements-color);"], e.spacing3, e.spacing4);
+export {
+  me as Item
+};

package/Item2.js

@@ -0,0 +1,14 @@
+import { jsx as n } from "react/jsx-runtime";
+import { Dropdown as p } from "./Dropdown2.js";
+function u({
+  children: o,
+  onClick: r,
+  icon: t,
+  isChecked: m,
+  ...e
+}) {
+  return /* @__PURE__ */ n(p.Item, { onClick: r, icon: t, isChecked: m, role: "option", ...e, children: o });
+}
+export {
+  u as Item
+};

package/Item4.js

@@ -0,0 +1,190 @@
+import { jsx as t, jsxs as E } from "react/jsx-runtime";
+import { useState as F, useContext as V, useEffect as C } from "react";
+import s, { css as H } from "./styled-components.browser.esm.js";
+import { useHover as ee } from "./useHover.js";
+import { useFocusRing as oe } from "./useFocusRing.js";
+import { useLayer as ne } from "react-laag";
+import { IconCheck as te, IconArrowRight as re } from "./index4.js";
+import { textStyles as ie } from "./textStyles.js";
+import { token as e } from "./token.js";
+import { Checkbox as A } from "./Checkbox.js";
+import { useId as I } from "./useId.js";
+import { useKeyDown as L } from "./useKeyDown.js";
+import { Switch as M } from "./Switch.js";
+import { Container as ae } from "./Container2.js";
+import { useDropdownContext as se } from "./context3.js";
+import { ItemContext as R } from "./itemContext.js";
+function Ke({
+  children: n,
+  isDisabled: i,
+  icon: f,
+  checkedVariant: m = "checkmark",
+  checkboxProps: j,
+  isChecked: c = !1,
+  badge: v,
+  onClick: $,
+  submenu: O,
+  role: D,
+  ...N
+}) {
+  const [h, l] = F(!1), [b, x] = F(!1), p = I("dropdown-item"), y = I("dropdown-item-label"), q = I("dropdown-submenu"), r = !!O, {
+    dispatch: d,
+    ...a
+  } = se(), u = a.highlightedItemId === p, W = V(R), {
+    isFocusVisible: P,
+    focusProps: B
+  } = oe(), {
+    hoverProps: z
+  } = ee({
+    onHoverStart: () => {
+      r && l(!0);
+    },
+    onHoverEnd: () => {
+      r && l(!1);
+    }
+  }), T = h && r, {
+    triggerProps: G,
+    layerProps: J,
+    renderLayer: Q
+  } = ne({
+    isOpen: T,
+    auto: !0,
+    placement: "right-start",
+    possiblePlacements: ["right-end", "right-start", "left-start", "left-end"],
+    triggerOffset: -4,
+    onParentClose: () => {
+    }
+  });
+  C(() => {
+    d({
+      type: "add-item",
+      payload: {
+        id: p,
+        parentId: W,
+        isDisabled: i,
+        isSelected: m === "checkmark" ? c : void 0
+      }
+    });
+  }), C(() => {
+    b && d({
+      type: "highlight-submenu"
+    });
+  }, [d, b]), C(() => {
+    a.hasSearch || a.isKeepingFocusOnTrigger || u && document.querySelector("#" + p)?.focus();
+  }, [a.hasSearch, a.isKeepingFocusOnTrigger, p, u]), L("ArrowLeft", (o) => {
+    r && b && (d({
+      type: "highlight-item",
+      payload: p
+    }), l(!1), x(!1), o.preventDefault());
+  }), L("ArrowRight", (o) => {
+    u && r && (l(!0), x(!0), o.preventDefault());
+  });
+  const U = le(m), g = ce(D, m, c), X = g === "menuitemcheckbox" || g === "menuitemradio" || g === "option" ? c : void 0, Y = r ? {
+    "aria-haspopup": !0,
+    "aria-expanded": h,
+    "aria-controls": q
+  } : {};
+  function w(o) {
+    if ($?.(o), !r) {
+      if (g === "menuitemcheckbox") {
+        d({
+          type: "keep-highlight"
+        });
+        return;
+      }
+      a.close();
+    }
+  }
+  function Z(o) {
+    r && (o.key === " " || o.key === "Enter") && ($?.(o), l((_) => {
+      const K = !_;
+      return x(K), K;
+    }), o.preventDefault());
+  }
+  return /* @__PURE__ */ t(R.Provider, { value: p, children: /* @__PURE__ */ E(
+    pe,
+    {
+      ...z,
+      ...G,
+      onClick: (o) => o.stopPropagation(),
+      children: [
+        /* @__PURE__ */ E(
+          k,
+          {
+            disabled: i,
+            "aria-disabled": i,
+            $isChecked: c,
+            "aria-checked": X,
+            "aria-selected": a.hasSearch || a.isKeepingFocusOnTrigger ? u : void 0,
+            role: g,
+            as: N.href ? "a" : "button",
+            onClick: w,
+            tabIndex: -1,
+            id: p,
+            onKeyDown: Z,
+            $isHighlighted: u || P,
+            $isSubmenuOpen: h,
+            className: U,
+            ...Y,
+            ...B,
+            ...N,
+            onMouseEnter: () => r && l(!0),
+            children: [
+              m === "checkbox" && /* @__PURE__ */ t(me, { onClick: (o) => o.stopPropagation(), children: /* @__PURE__ */ t(
+                A,
+                {
+                  ...j,
+                  isChecked: c,
+                  isDisabled: i,
+                  "aria-labelledby": y,
+                  onChange: w
+                }
+              ) }),
+              f && /* @__PURE__ */ t(ue, { children: f }),
+              /* @__PURE__ */ t(de, { id: y, children: n }),
+              m === "checkmark" && c && /* @__PURE__ */ t(S, { children: /* @__PURE__ */ t(te, {}) }),
+              v && /* @__PURE__ */ t(S, { children: v }),
+              m === "switch" && /* @__PURE__ */ t(S, { onClick: (o) => o.stopPropagation(), children: /* @__PURE__ */ t(M, { isChecked: c, isDisabled: i, "aria-labelledby": y, onChange: w }) }),
+              r && /* @__PURE__ */ t(ge, { $isActive: h || P || u, children: /* @__PURE__ */ t(re, {}) })
+            ]
+          }
+        ),
+        T && Q(/* @__PURE__ */ t(fe, { "data-testid": "ds-dropdown-submenu", id: q, ...J, onMouseLeave: () => l(!1), children: O }))
+      ]
+    }
+  ) });
+}
+function ce(n, i, f) {
+  return n || (i === "checkbox" || i === "switch" ? "menuitemcheckbox" : i === "checkmark" && f ? "menuitemradio" : "menuitem");
+}
+function le(n) {
+  return n === "checkbox" ? A.pointerEventsClassname : n === "switch" ? M.pointerEventsClassname : "";
+}
+const pe = s.div.withConfig({
+  displayName: "ItemWrapper",
+  componentId: "sc-10x21qo-0"
+})(["position:relative;"]), k = s.button.withConfig({
+  displayName: "ItemStyled",
+  componentId: "sc-10x21qo-1"
+})(["", " display:flex;align-items:center;box-sizing:border-box;width:100%;height:36px;margin:0;padding:0 ", ";border:none;background:none;color:", ";outline:none;font-family:", ";text-decoration:none;cursor:pointer;", " ", " &:hover{background:", ";color:", ";}&:active{background:", ";color:", ";}&:disabled{background:none;color:", ";cursor:default;}"], ie.uiTextS, e.spacing5, (n) => n.$isChecked ? e.colorText : e.colorTextMuted, e.brandFontStackBase, (n) => n.$isSubmenuOpen && H(["background:", ";color:", ";"], e.gray25, e.gray800), (n) => n.$isHighlighted && H(["background:", ";color:", ";"], e.gray50, e.gray800), e.gray25, e.colorText, e.gray50, e.gray800, e.colorTextDisabled), me = s.span.withConfig({
+  displayName: "CheckboxContainer",
+  componentId: "sc-10x21qo-2"
+})(["display:flex;flex:none;justify-content:center;align-items:center;width:24px;height:24px;margin-right:", ";"], e.spacing3), ue = s.span.withConfig({
+  displayName: "Icon",
+  componentId: "sc-10x21qo-3"
+})(["display:flex;flex:none;justify-content:center;align-items:center;width:24px;height:24px;margin-right:", ";"], e.spacing3), de = s.span.withConfig({
+  displayName: "Label",
+  componentId: "sc-10x21qo-4"
+})(["flex:1;overflow:hidden;min-width:0;text-align:left;text-overflow:ellipsis;white-space:nowrap;"]), S = s.span.withConfig({
+  displayName: "RightContainer",
+  componentId: "sc-10x21qo-5"
+})(["flex:none;margin:0 ", ";&:last-child{margin-right:calc(", " * -1);}"], e.spacing3, e.spacing2), ge = s.span.withConfig({
+  displayName: "SubmenuIconContainer",
+  componentId: "sc-10x21qo-6"
+})(["flex:none;margin-right:calc(", " * -1);margin-left:", ";color:", ";", ":hover,", ":active{color:", ";}"], e.spacing3, e.spacing3, (n) => n.$isActive ? e.gray400 : e.gray200, k, k, e.gray400), fe = s(ae).withConfig({
+  displayName: "SubMenuContainer",
+  componentId: "sc-10x21qo-7"
+})(["margin-top:calc(", " * -1);"], e.spacing3);
+export {
+  Ke as Item
+};

package/Label.js

@@ -0,0 +1,33 @@
+import { jsxs as i, jsx as c } from "react/jsx-runtime";
+import e from "./styled-components.browser.esm.js";
+import { textStyles as a } from "./textStyles.js";
+import { token as o } from "./token.js";
+import { useGroupParent as d } from "./useGroupContext.js";
+function u({
+  children: t,
+  secondaryText: n,
+  htmlFor: r,
+  id: l,
+  ...p
+}) {
+  return d("Label"), /* @__PURE__ */ i(s, { htmlFor: r, id: l, ...p, children: [
+    t,
+    n ? /* @__PURE__ */ i(m, { children: [
+      /* @__PURE__ */ c(h, { children: " " }),
+      n
+    ] }) : null
+  ] });
+}
+const s = e.label.withConfig({
+  displayName: "LabelStyled",
+  componentId: "sc-7rhip3-0"
+})(["", " display:block;margin:0 0 ", ";padding:0;border:none;color:", ";"], a.uiTextM, o.spacing3, o.colorText), m = e.span.withConfig({
+  displayName: "SecondaryText",
+  componentId: "sc-7rhip3-1"
+})(["color:", ";"], o.colorTextMuted), h = e.span.withConfig({
+  displayName: "Space",
+  componentId: "sc-7rhip3-2"
+})(["display:inline-block;width:", ";"], o.spacing3);
+export {
+  u as Label
+};

package/LeftArrow.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
-import t from "styled-components";
-import { IconArrowLeft as i } from "@bynder/icons";
-import { Button as e } from "@bynder/design-system";
+import t from "./styled-components.browser.esm.js";
+import { IconArrowLeft as i } from "./index4.js";
+import { Button as e } from "./Button.js";
 function p(r) {
   return /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o(
     e,

package/List.js

@@ -0,0 +1,25 @@
+import { jsx as n } from "react/jsx-runtime";
+import e from "./styled-components.browser.esm.js";
+import { token as t } from "./token.js";
+import { Divider as p } from "./Divider.js";
+import { ConcealedAction as d } from "./ConcealedAction.js";
+import { Group as s } from "./Group2.js";
+import { Item as c } from "./Item.js";
+function o({
+  children: i,
+  isContained: r = !1,
+  ...m
+}) {
+  return /* @__PURE__ */ n(a, { $isContained: r, ...m, children: i });
+}
+o.Group = s;
+o.Item = c;
+o.Divider = p;
+o.ConcealedAction = d;
+const a = e.div.withConfig({
+  displayName: "ListStyled",
+  componentId: "sc-1cm11o3-0"
+})(["padding:", ";"], (i) => i.$isContained ? `0 ${t.spacing5}` : `${t.spacing3} 0`);
+export {
+  o as List
+};

package/ListItem.js

@@ -0,0 +1,11 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Dropdown as i } from "./Dropdown2.js";
+function n({
+  children: o,
+  ...t
+}) {
+  return /* @__PURE__ */ r(i.ListItem, { ...t, role: "option", children: o });
+}
+export {
+  n as ListItem
+};

package/ListItem2.js

@@ -0,0 +1,58 @@
+import { jsx as s, jsxs as I, Fragment as k } from "react/jsx-runtime";
+import { useEffect as m } from "react";
+import v from "./styled-components.browser.esm.js";
+import { IconCheck as y } from "./index4.js";
+import { token as a } from "./token.js";
+import { useId as S } from "./useId.js";
+import { useDropdownContext as w } from "./context3.js";
+import { List as x } from "./List.js";
+function E({
+  children: p,
+  isDisabled: r,
+  isChecked: t = !1,
+  onClick: g,
+  role: n = "menuitem",
+  rightElements: c,
+  ...u
+}) {
+  const o = S("dropdown-item"), {
+    dispatch: f,
+    ...e
+  } = w(), i = e.highlightedItemId === o;
+  m(() => {
+    f({
+      type: "add-item",
+      payload: {
+        id: o,
+        parentId: void 0,
+        isDisabled: r,
+        isSelected: t
+      }
+    });
+  }), m(() => {
+    e.hasSearch || e.isKeepingFocusOnTrigger || i && document.querySelector("#" + o)?.focus();
+  }, [e.hasSearch, e.isKeepingFocusOnTrigger, o, i]);
+  function l() {
+    g?.(), e.close();
+  }
+  const d = t ? /* @__PURE__ */ s(y, { style: {
+    color: a.gray800
+  } }) : null;
+  return /* @__PURE__ */ s(
+    C,
+    {
+      onClick: (h) => h.stopPropagation(),
+      children: /* @__PURE__ */ s(x.Item, { isSelected: i, isDisabled: r, onClick: l, "aria-disabled": r, "aria-checked": n === "menuitemradio" || n === "option" ? t : void 0, "aria-selected": e.hasSearch || e.isKeepingFocusOnTrigger ? i : void 0, role: n, rightElements: c ? /* @__PURE__ */ I(k, { children: [
+        c,
+        d
+      ] }) : d, id: o, ...u, children: p })
+    }
+  );
+}
+const C = v.div.withConfig({
+  displayName: "ItemWrapper",
+  componentId: "sc-1msckna-0"
+})(["--ds-list-item-border-radius-override:0;--ds-list-item-focus-ring-override:none;padding:0 ", ";"], a.spacing4);
+export {
+  E as ListItem
+};

package/ListItem4.js

@@ -0,0 +1,37 @@
+import { jsxs as e, jsx as c } from "react/jsx-runtime";
+import t from "./styled-components.browser.esm.js";
+import { textStyles as p } from "./textStyles.js";
+import { token as n } from "./token.js";
+import { internalTokens as d } from "./themes3.js";
+function u({
+  children: l,
+  subtext: i,
+  thumbnail: o,
+  rightElements: m,
+  ...r
+}) {
+  return /* @__PURE__ */ e(s, { ...r, children: [
+    o && /* @__PURE__ */ c(a, { children: o }),
+    /* @__PURE__ */ e(f, { children: [
+      l,
+      i ? /* @__PURE__ */ c(h, { children: i }) : null
+    ] }),
+    m
+  ] });
+}
+const s = t.div.withConfig({
+  displayName: "ItemStyled",
+  componentId: "sc-1hpfyv0-0"
+})(["display:flex;gap:", ";align-items:center;margin-inline:calc(", " * -1);padding:", " ", ";"], n.spacing3, n.spacing5, n.spacing3, n.spacing5), a = t.div.withConfig({
+  displayName: "ThumbnailContainer",
+  componentId: "sc-1hpfyv0-1"
+})(["flex:none;"]), f = t.div.withConfig({
+  displayName: "Content",
+  componentId: "sc-1hpfyv0-2"
+})(["", " flex:1;min-width:0;"], p.uiTextM), h = t.div.withConfig({
+  displayName: "Subtext",
+  componentId: "sc-1hpfyv0-3"
+})(["", " color:", ";"], p.uiTextS, d["tooltip-secondary-text-color"]);
+export {
+  u as ListItem
+};

package/MetapropertyFilterContent.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
-import i from "styled-components";
-import { token as o } from "@bynder/design-system";
+import i from "./styled-components.browser.esm.js";
+import { token as o } from "./token.js";
 import "./MetapropertyOption.js";
 i.div`
 	h1 {

package/MetapropertyOption.js

@@ -1,7 +1,6 @@
 import "react/jsx-runtime";
-import { styled as r } from "styled-components";
-import { token as i } from "@bynder/design-system";
-import "@bynder/icons";
+import r from "./styled-components.browser.esm.js";
+import { token as i } from "./token.js";
 import "./Checkbox.styles.js";
 r.span`
 	display: flex;

package/Middleware.js

@@ -0,0 +1,49 @@
+import { RULESET as g, KEYFRAMES as x, DECLARATION as $, WEBKIT as w, MOZ as n, MS as y } from "./Enum.js";
+import { combine as A, replace as u, sizeof as M, match as R, assign as h, filter as E } from "./Utility.js";
+import { copy as i, lift as t } from "./Tokenizer.js";
+import { serialize as S } from "./Serializer.js";
+import { prefix as T } from "./Prefixer.js";
+function B(r) {
+  var o = M(r);
+  return function(f, s, p, d) {
+    for (var c = "", a = 0; a < o; a++)
+      c += r[a](f, s, p, d) || "";
+    return c;
+  };
+}
+function C(r) {
+  return function(o) {
+    o.root || (o = o.return) && r(o);
+  };
+}
+function D(r, o, f, s) {
+  if (r.length > -1 && !r.return)
+    switch (r.type) {
+      case $:
+        r.return = T(r.value, r.length, f);
+        return;
+      case x:
+        return S([i(r, { value: u(r.value, "@", "@" + w) })], s);
+      case g:
+        if (r.length)
+          return A(f = r.props, function(p) {
+            switch (R(p, s = /(::plac\w+|:read-\w+)/)) {
+              // :read-(only|write)
+              case ":read-only":
+              case ":read-write":
+                t(i(r, { props: [u(p, /:(read-\w+)/, ":" + n + "$1")] })), t(i(r, { props: [p] })), h(r, { props: E(f, s) });
+                break;
+              // :placeholder
+              case "::placeholder":
+                t(i(r, { props: [u(p, /:(plac\w+)/, ":" + w + "input-$1")] })), t(i(r, { props: [u(p, /:(plac\w+)/, ":" + n + "$1")] })), t(i(r, { props: [u(p, /:(plac\w+)/, y + "input-$1")] })), t(i(r, { props: [p] })), h(r, { props: E(f, s) });
+                break;
+            }
+            return "";
+          });
+    }
+}
+export {
+  B as middleware,
+  D as prefixer,
+  C as rulesheet
+};

package/Middleware2.js

@@ -0,0 +1,49 @@
+import { RULESET as g, KEYFRAMES as x, DECLARATION as $, WEBKIT as w, MOZ as n, MS as y } from "./Enum.js";
+import { combine as A, replace as u, sizeof as M, match as R, assign as h, filter as E } from "./Utility.js";
+import { copy as i, lift as t } from "./Tokenizer.js";
+import { serialize as S } from "./Serializer.js";
+import { prefix as T } from "./Prefixer.js";
+function B(r) {
+  var o = M(r);
+  return function(f, s, p, d) {
+    for (var c = "", a = 0; a < o; a++)
+      c += r[a](f, s, p, d) || "";
+    return c;
+  };
+}
+function C(r) {
+  return function(o) {
+    o.root || (o = o.return) && r(o);
+  };
+}
+function D(r, o, f, s) {
+  if (r.length > -1 && !r.return)
+    switch (r.type) {
+      case $:
+        r.return = T(r.value, r.length, f);
+        return;
+      case x:
+        return S([i(r, { value: u(r.value, "@", "@" + w) })], s);
+      case g:
+        if (r.length)
+          return A(f = r.props, function(p) {
+            switch (R(p, s = /(::plac\w+|:read-\w+)/)) {
+              // :read-(only|write)
+              case ":read-only":
+              case ":read-write":
+                t(i(r, { props: [u(p, /:(read-\w+)/, ":" + n + "$1")] })), t(i(r, { props: [p] })), h(r, { props: E(f, s) });
+                break;
+              // :placeholder
+              case "::placeholder":
+                t(i(r, { props: [u(p, /:(plac\w+)/, ":" + w + "input-$1")] })), t(i(r, { props: [u(p, /:(plac\w+)/, ":" + n + "$1")] })), t(i(r, { props: [u(p, /:(plac\w+)/, y + "input-$1")] })), t(i(r, { props: [p] })), h(r, { props: E(f, s) });
+                break;
+            }
+            return "";
+          });
+    }
+}
+export {
+  B as middleware,
+  D as prefixer,
+  C as rulesheet
+};