@bynder/compact-view 5.2.0 → 5.2.2

package/Input.js

@@ -0,0 +1,109 @@
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+import { forwardRef as Y, useState as _, useRef as D } from "react";
+import { IconShow as aa, IconHide as ea, IconClear as ta } from "./index4.js";
+import { InputWrapper as na, LeftItems as ra, IconLeftContainer as ia, PrefixContainer as oa, InputStyled as sa, RightItems as la, SuffixContainer as da, ClearButton as ca, IconRightContainer as pa } from "./Input.styles.js";
+import { InteractiveIcon as ua } from "./InteractiveIcon.js";
+import { useTranslate as fa } from "./useTranslate.js";
+import { Tooltip as ma } from "./Tooltip2.js";
+const Pa = Y(({
+  hasClearButton: I = !1,
+  icon: l,
+  iconRight: d,
+  id: C,
+  name: y,
+  isDisabled: e = !1,
+  isReadOnly: g = !1,
+  isInvalid: c = !1,
+  isSmall: T = !1,
+  onBlur: x,
+  onChange: p,
+  onFocus: P,
+  onKeyDown: v,
+  onClean: R,
+  placeholder: S,
+  type: t = "text",
+  value: u,
+  variant: V = "outlined",
+  "aria-label": $,
+  "aria-labelledby": k,
+  "aria-describedby": B,
+  "aria-haspopup": L,
+  "aria-expanded": j,
+  "aria-controls": O,
+  "aria-autocomplete": q,
+  "aria-activedescendant": H,
+  inputRef: W,
+  maxLength: Z,
+  prefix: f,
+  suffix: m,
+  autoFocus: z = !1,
+  role: A,
+  autoComplete: E = "off",
+  ...h
+}, F) => {
+  const [r, G] = _(!1), J = D(null), b = W || J, {
+    translate: i
+  } = fa();
+  function K(n) {
+    const X = n.currentTarget.value;
+    p?.(X);
+  }
+  const M = I && u.length > 0 && t !== "number" && t !== "password", w = h.clearButtonProps?.["aria-label"] ?? i("input.clear"), N = t === "password" ? r ? "text" : "password" : t;
+  function o() {
+    b?.current?.focus();
+  }
+  function Q() {
+    p?.(""), R?.(), o();
+  }
+  function U() {
+    G((n) => !n), o();
+  }
+  return /* @__PURE__ */ s(na, { ...h, $isDisabled: e, $isInvalid: c, $isSmall: T, onClick: o, ref: F, $variant: V, children: [
+    /* @__PURE__ */ s(ra, { "data-testid": "ds-input-left-items", children: [
+      l && /* @__PURE__ */ a(ia, { children: l }),
+      f && /* @__PURE__ */ a(oa, { children: f })
+    ] }),
+    /* @__PURE__ */ a(
+      sa,
+      {
+        autoComplete: E,
+        autoCorrect: "off",
+        disabled: e,
+        $isDisabled: e,
+        readOnly: g,
+        onBlur: x,
+        onChange: K,
+        onFocus: P,
+        onKeyDown: v,
+        placeholder: S,
+        ref: b,
+        spellCheck: !1,
+        type: N,
+        value: u,
+        "aria-label": $,
+        "aria-labelledby": k,
+        "aria-describedby": B,
+        "aria-haspopup": L,
+        "aria-expanded": j,
+        "aria-controls": O,
+        "aria-autocomplete": q,
+        "aria-activedescendant": H,
+        "aria-invalid": c,
+        role: A,
+        id: C,
+        name: y,
+        maxLength: Z,
+        autoFocus: z
+      }
+    ),
+    /* @__PURE__ */ s(la, { "data-testid": "ds-input-right-items", children: [
+      m && /* @__PURE__ */ a(da, { children: m }),
+      t === "password" && !e && /* @__PURE__ */ a(ua, { "data-testid": "ds-password-visibility-toggle", onClick: () => U(), label: i(r ? "input.hide-password" : "input.show-password"), icon: r ? /* @__PURE__ */ a(aa, {}) : /* @__PURE__ */ a(ea, {}), isTooltipShown: !0 }),
+      M && !e && /* @__PURE__ */ a(ma, { content: w, timing: "delay", children: (n) => /* @__PURE__ */ a(ca, { ...n, onClick: Q, type: "button", "aria-label": w, children: /* @__PURE__ */ a(ta, {}) }) }),
+      d && /* @__PURE__ */ a(pa, { children: d })
+    ] })
+  ] });
+});
+export {
+  Pa as Input
+};

package/Input.styles.js

@@ -0,0 +1,71 @@
+import e, { css as r } from "./styled-components.browser.esm.js";
+import { token as o } from "./token.js";
+import { textStyles as t } from "./textStyles.js";
+import { makeInternalTokens as a } from "./makeInternalTokens.js";
+const {
+  internalTokens: i,
+  declareTokens: d
+} = a({
+  lightTheme: {
+    "input-fill": o.gray10,
+    "input-fill-disabled": o.gray25,
+    "input-border": o.gray100,
+    "input-border-hover": o.gray200,
+    "input-border-focus": o.gray300,
+    "input-border-disabled": o.gray100,
+    "input-shadow-hover": o.elevation1,
+    "input-focus-ring": o.gray100,
+    "input-clean-fill-hover": o.gray25a,
+    "input-clean-fill-focus": o.gray50a
+  },
+  darkTheme: {
+    "input-fill": "transparent",
+    "input-fill-disabled": o.gray50a,
+    "input-border": o.gray200a,
+    "input-border-hover": o.gray300a,
+    "input-border-focus": o.gray400a,
+    "input-border-disabled": o.gray100a,
+    "input-shadow-hover": "none",
+    "input-focus-ring": o.gray300a,
+    "input-clean-fill-hover": o.gray50a,
+    "input-clean-fill-focus": o.gray75a
+  }
+}), u = e.div.withConfig({
+  displayName: "InputWrapper",
+  componentId: "sc-o548d8-0"
+})(["", " ", " display:flex;align-items:center;box-sizing:border-box;width:100%;height:var(--ds-input-height);padding:0 var(--ds-input-side-padding);border:1px solid ", ";border-radius:", ";background:", ";&:hover{border-color:", ";box-shadow:", ";}&:focus-within{border-color:", ";box-shadow:0 0 0 3px ", ";}", ";", ";"], (n) => n.$isSmall ? r(["--ds-input-height:32px;--ds-input-side-padding:", ";--ds-input-icons-gap:", ";"], o.spacing4, o.spacing2) : r(["--ds-input-height:40px;--ds-input-side-padding:", ";--ds-input-icons-gap:", ";"], o.spacing5, o.spacing3), d, (n) => n.$isInvalid ? o.red500 : i["input-border"], o.radiusMedium, i["input-fill"], (n) => n.$isInvalid ? o.red600 : i["input-border-hover"], i["input-shadow-hover"], (n) => n.$isInvalid ? o.red500 : i["input-border-focus"], i["input-focus-ring"], (n) => n.$isDisabled && r(["border-color:", ";background:", ";color:", ";cursor:not-allowed;&:hover{border-color:", ";box-shadow:none;}"], i["input-border-disabled"], i["input-fill-disabled"], o.colorTextMuted, i["input-border-disabled"]), (n) => n.$variant === "clean" && r(["border-color:transparent;box-shadow:none;&:hover{border-color:transparent;background:", ";box-shadow:none;}&:focus-within{border-color:transparent;background:", ";box-shadow:none;}"], i["input-clean-fill-hover"], i["input-clean-fill-focus"])), g = e.input.withConfig({
+  displayName: "InputStyled",
+  componentId: "sc-o548d8-1"
+})(["&&&{flex:1;width:auto;min-width:0;height:100%;margin:0 !important;padding:0 !important;border:0;background:transparent;color:", ";box-shadow:none;outline:none;font-family:", ";", " &::-webkit-inner-spin-button,&::-webkit-outer-spin-button{display:none;margin:0;appearance:none;}&[type='number']{appearance:textfield;}&::placeholder{color:", ";}&:disabled{color:", ";cursor:not-allowed;&::placeholder{color:", ";}}}"], o.colorText, o.brandFontStackBase, t.uiTextM, o.colorTextDisabled, o.colorTextMuted, o.colorTextDisabled), f = e.div.withConfig({
+  displayName: "LeftItems",
+  componentId: "sc-o548d8-2"
+})(["display:flex;gap:var(--ds-input-icons-gap);align-items:center;margin-right:var(--ds-input-icons-gap);&:empty{display:none;}"]), h = e.div.withConfig({
+  displayName: "IconLeftContainer",
+  componentId: "sc-o548d8-3"
+})(["flex:none;margin-left:calc(", " * -1);color:", ";"], o.spacing2, o.colorTextMuted), b = e.div.withConfig({
+  displayName: "PrefixContainer",
+  componentId: "sc-o548d8-4"
+})(["color:", ";"], o.colorTextMuted), m = e.div.withConfig({
+  displayName: "RightItems",
+  componentId: "sc-o548d8-5"
+})(["display:flex;flex:none;gap:var(--ds-input-icons-gap);align-items:center;margin-right:calc(", " * -1);margin-left:var(--ds-input-icons-gap);&:empty{display:none;}"], o.spacing2), y = e.div.withConfig({
+  displayName: "SuffixContainer",
+  componentId: "sc-o548d8-6"
+})(["color:", ";&:last-child{margin-right:", ";}"], o.colorTextMuted, o.spacing2), x = e.div.withConfig({
+  displayName: "IconRightContainer",
+  componentId: "sc-o548d8-7"
+})(["display:grid;flex:none;align-items:center;color:", ";"], o.colorTextMuted), v = e.button.withConfig({
+  displayName: "ClearButton",
+  componentId: "sc-o548d8-8"
+})(["flex:none;padding:0;border:none;background:transparent;color:", ";cursor:pointer;&:hover,&:focus{color:", ";outline:none;}&:active{color:", ";}"], o.gray200a, o.gray300a, o.gray400a);
+export {
+  v as ClearButton,
+  h as IconLeftContainer,
+  x as IconRightContainer,
+  g as InputStyled,
+  u as InputWrapper,
+  f as LeftItems,
+  b as PrefixContainer,
+  m as RightItems,
+  y as SuffixContainer
+};

package/InputContainer.js

@@ -0,0 +1,9 @@
+import a from "./styled-components.browser.esm.js";
+import { token as n } from "./token.js";
+const m = a.div.withConfig({
+  displayName: "InputContainer",
+  componentId: "sc-1gykuec-0"
+})(["display:grid;grid-template-columns:", ";column-gap:", ";align-items:center;padding:0 ", " ", ";"], (i) => i.$hasAlphaChannel ? "minmax(10px, 1fr) 88px" : "minmax(0, 1fr)", n.spacing4, n.spacing5, n.spacing5);
+export {
+  m as InputContainer
+};

package/InputField.js

@@ -0,0 +1,74 @@
+import { jsxs as C, jsx as o } from "react/jsx-runtime";
+import { Form as t } from "./Form.js";
+import { Input as D } from "./Input.js";
+import { useId as d } from "./useId.js";
+function N({
+  label: p,
+  labelSecondaryText: u,
+  helperText: r,
+  helperTextIcon: c,
+  // Common props
+  id: m,
+  name: l,
+  isInvalid: e,
+  // Input props
+  hasClearButton: s,
+  icon: f,
+  iconRight: x,
+  inputRef: I,
+  isDisabled: h,
+  isReadOnly: a,
+  isSmall: b,
+  maxLength: F,
+  onBlur: j,
+  onChange: y,
+  onClean: q,
+  onFocus: G,
+  onKeyDown: H,
+  placeholder: L,
+  type: T,
+  value: g,
+  variant: k,
+  prefix: v,
+  suffix: w,
+  autoFocus: z,
+  ...A
+}) {
+  const B = d("input"), i = m || B, n = d("helper-text");
+  return /* @__PURE__ */ C(t.Group, { ...A, children: [
+    /* @__PURE__ */ o(t.Label, { secondaryText: u, htmlFor: i, children: p }),
+    /* @__PURE__ */ o(
+      D,
+      {
+        hasClearButton: s,
+        icon: f,
+        iconRight: x,
+        inputRef: I,
+        isDisabled: h,
+        isReadOnly: a,
+        isInvalid: e,
+        isSmall: b,
+        maxLength: F,
+        onBlur: j,
+        onChange: y,
+        onClean: q,
+        onFocus: G,
+        onKeyDown: H,
+        placeholder: L,
+        type: T,
+        value: g,
+        variant: k,
+        id: i,
+        name: l,
+        "aria-describedby": r ? n : void 0,
+        prefix: v,
+        suffix: w,
+        autoFocus: z
+      }
+    ),
+    r ? /* @__PURE__ */ o(t.HelperText, { icon: c, isInvalid: e, id: n, children: r }) : null
+  ] });
+}
+export {
+  N as InputField
+};

package/InputRow.js

@@ -0,0 +1,18 @@
+import { jsx as n } from "react/jsx-runtime";
+import r from "./styled-components.browser.esm.js";
+import { token as i } from "./token.js";
+import { useGroupParent as m } from "./useGroupContext.js";
+import { InputWrapper as t } from "./Input.styles.js";
+function w({
+  children: o,
+  ...p
+}) {
+  return m("InputRow"), /* @__PURE__ */ n(e, { ...p, children: o });
+}
+const e = r.div.withConfig({
+  displayName: "InputRowStyled",
+  componentId: "sc-dtc4ax-0"
+})(["display:flex;gap:", ";> *:not(", "){min-width:auto;}> ", "{min-width:0;}"], i.spacing4, t, t);
+export {
+  w as InputRow
+};

package/Inspector.js

@@ -0,0 +1,34 @@
+import { jsx as d } from "react/jsx-runtime";
+import i from "./styled-components.browser.esm.js";
+import { Content as m } from "./Content.js";
+import { Divider as s } from "./Divider.js";
+import { Footer as c } from "./Footer.js";
+import { Header as p } from "./Header22.js";
+import { Tabs as a } from "./Tabs2.js";
+import { token as t } from "./token.js";
+const r = "336px";
+function o({
+  children: e,
+  ...n
+}) {
+  return /* @__PURE__ */ d(f, { ...n, children: e });
+}
+const f = i.div.withConfig({
+  displayName: "InspectorStyled",
+  componentId: "sc-e4iw1f-0"
+})(["display:flex;flex-direction:column;box-sizing:border-box;width:", ";height:100%;border-left:1px solid ", ";background-color:", ";"], r, t.gray100a, t.white), l = i(s).withConfig({
+  displayName: "StyledDivider",
+  componentId: "sc-e4iw1f-1"
+})(["margin-right:calc(", " * -1);margin-left:calc(", " * -1);"], t.spacing6, t.spacing6);
+o.Header = p;
+o.Tabs = a;
+o.Content = m;
+o.Divider = l;
+o.Footer = c;
+o.styles = {
+  width: r,
+  transition: "0.2s ease-in-out"
+};
+export {
+  o as Inspector
+};

package/InteractiveIcon.js

@@ -0,0 +1,28 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { useFocusRing as b } from "./useFocusRing.js";
+import g, { css as h } from "./styled-components.browser.esm.js";
+import { Tooltip as y } from "./Tooltip2.js";
+import { token as o } from "./token.js";
+import { mergeRefs as v } from "./mergeRefs.js";
+const W = u(({
+  icon: r,
+  onClick: s,
+  isTooltipShown: m = !1,
+  label: e,
+  isDisabled: a = !1,
+  tabIndex: n,
+  ...c
+}, d) => {
+  const {
+    isFocusVisible: t,
+    focusProps: p
+  } = b();
+  return m ? /* @__PURE__ */ i(y, { content: e, isOpen: t ? !0 : void 0, children: (l) => /* @__PURE__ */ i(f, { ...c, ...l, ...p, ref: v(d, l.ref), onClick: s, disabled: a, type: "button", "aria-label": e, $isFocusVisible: t, tabIndex: n, children: r }) }) : /* @__PURE__ */ i(f, { ref: d, ...c, ...p, onClick: s, disabled: a, type: "button", "aria-label": e, $isFocusVisible: t, tabIndex: n, children: r });
+}), f = g.button.withConfig({
+  displayName: "InteractiveIconWrapper",
+  componentId: "sc-54wd89-0"
+})(["vertical-align:middle;width:24px;height:24px;padding:0;border:none;background:transparent;color:", ";cursor:pointer;&:hover,&:active{color:", ";}&:disabled{color:", ";cursor:not-allowed;}", ""], o.gray600, o.gray800, o.gray200, (r) => r.$isFocusVisible && h(["border-radius:2px;color:", ";box-shadow:0 0 0 2px ", ";outline:none;"], o.gray800, o.gray200));
+export {
+  W as InteractiveIcon
+};

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