@bynder/compact-view 5.2.0 → 5.2.2

package/Card.js

@@ -0,0 +1,84 @@
+import { jsx as t, jsxs as M } from "react/jsx-runtime";
+import { useMemo as j } from "react";
+import s, { css as c } from "./styled-components.browser.esm.js";
+import { IconCheck as F } from "./index4.js";
+import { token as r } from "./token.js";
+import { Frame as z } from "./Frame.js";
+import { CardContext as S } from "./context.js";
+import { Header as K } from "./Header2.js";
+import { AdditionalInfo as N } from "./AdditionalInfo.js";
+import { ContextActionButton as W } from "./ContextActionButton.js";
+import { Images as B, Img as D } from "./Images.js";
+import { FilePlaceholder as H } from "./FilePlaceholder.js";
+import { useId as O } from "./useId.js";
+import { IconPlaceholder as T } from "./IconPlaceholder.js";
+import { Stats as V } from "./Stats.js";
+import { StatsItem as q } from "./StatsItem.js";
+const E = 224;
+function a({
+  children: o,
+  variant: l = "outlined",
+  isSelected: d = !1,
+  isSelectButtonSelected: m,
+  contextAction: h,
+  onClick: v,
+  onSelect: n,
+  as: y = "button",
+  href: x,
+  to: w,
+  noMinWidth: $,
+  selectButtonAriaLabel: C,
+  hideSelectButton: u = !1,
+  "aria-label": f,
+  isDisabled: e = !1,
+  ...I
+}) {
+  const b = O("card-title"), k = j(() => ({
+    variant: l,
+    isSelected: d,
+    cardTitleId: b
+  }), [d, l, b]);
+  function P(i) {
+    if (e)
+      return;
+    const A = i.metaKey || i.ctrlKey || i.shiftKey;
+    if (n && (A || u)) {
+      n(i), i.preventDefault();
+      return;
+    }
+    v?.(i);
+  }
+  const p = e ? "div" : y;
+  return /* @__PURE__ */ t(S.Provider, { value: k, children: /* @__PURE__ */ M(G, { $variant: l, $isSelected: m || d, $noMinWidth: $, $isDisabled: e, ...I, children: [
+    /* @__PURE__ */ t(g, { as: p, to: e ? void 0 : w, href: p === "a" ? x : void 0, type: p === "button" ? "button" : void 0, onClick: P, "aria-labelledby": f ? void 0 : b, "aria-label": f, $isDisabled: e, children: o }),
+    h && !e ? /* @__PURE__ */ t(Q, { children: h }) : null,
+    n && !u ? /* @__PURE__ */ t(J, { type: "button", $isSelected: m ?? d, onClick: n, "aria-label": C, disabled: e, $isDisabled: e, "data-testid": "ds-card-select-button", children: /* @__PURE__ */ t(F, {}) }) : null
+  ] }) });
+}
+a.Frame = z;
+a.Header = K;
+a.AdditionalInfo = N;
+a.ContextActionButton = W;
+a.Images = B;
+a.Img = D;
+a.FilePlaceholder = H;
+a.IconPlaceholder = T;
+a.Stats = V;
+a.StatsItem = q;
+const g = s.button.withConfig({
+  displayName: "MainAction",
+  componentId: "sc-ji6een-0"
+})(["display:block;box-sizing:border-box;width:100%;padding:0;border:none;background:none;font:inherit;text-align:left;text-decoration:none;cursor:", ";"], (o) => o.$isDisabled ? "default" : "pointer"), G = s.div.withConfig({
+  displayName: "Container",
+  componentId: "sc-ji6een-1"
+})(["--card-border-radius:", ";--card-inner-border-color:", ";--card-inner-border-width:1px;--card-selected-border-color:", ";--card-selected-border-width:2px;--card-elevation:", ";--card-frame-overlay-color:transparent;--card-actions-opacity:0;&:hover{--card-frame-overlay-color:", ";--card-inner-border-color:", ";--card-actions-opacity:1;}&:has(", ":active){--card-frame-overlay-color:", ";--card-inner-border-color:", ";--card-elevation:0 0 0 transparent;}&:focus-within{--card-actions-opacity:1;}", " position:relative;box-sizing:border-box;min-width:", ";border-radius:var(--card-border-radius);background:", ";box-shadow:var(--card-box-shadow);pointer-events:", ";"], r.radiusBase, r.gray200a, (o) => o.$isDisabled ? r.gray400 : r.brandPrimary500, (o) => o.$isDisabled ? "0 0 0 transparent" : r.elevation1, r.gray100a, r.gray300a, g, r.gray200a, r.gray300a, (o) => o.$variant === "outlined" ? c(["--card-frame-border-radius:var(--card-border-radius) var(--card-border-radius) 0 0;--card-box-shadow:var(--card-elevation),inset 0 0 0 var(--card-inner-border-width) var(--card-inner-border-color);--card-frame-border-bottom-width:0;--card-content-padding:", " ", ";&:hover{--card-elevation:", ";}", ""], r.spacing4, r.spacing5, r.elevation2, o.$isSelected ? c(["--card-inner-border-width:var(--card-selected-border-width);--card-inner-border-color:var(--card-selected-border-color);&:hover{--card-inner-border-color:var(--card-selected-border-color);}"]) : "") : c(["--card-frame-border-radius:var(--card-border-radius);--card-box-shadow:none;--card-frame-border-bottom-width:1px;--card-content-padding:", " 0;"], r.spacing3), (o) => o.$noMinWidth ? "auto" : `${E}px`, r.gray10, (o) => o.$isDisabled ? "none" : "initial"), J = s.button.withConfig({
+  displayName: "SelectButton",
+  componentId: "sc-ji6een-2"
+})(["position:absolute;top:", ";right:", ";z-index:2;display:grid;place-items:center;box-sizing:border-box;width:32px;height:32px;padding:0;border:2px solid rgb(", " / 80%);border-radius:", ";background:none;color:transparent;opacity:", ";cursor:pointer;pointer-events:", ";&:hover{border-color:", ";}&:active{border-width:3px;border-color:", ";}", ""], r.spacing4, r.spacing4, r["white-rgb"], r.radiusCircle, (o) => o.$isSelected ? "1" : "var(--card-actions-opacity)", (o) => o.$isDisabled ? "none" : "initial", r.white, r.white, (o) => o.$isSelected && c(["border:none;background:", ";color:", ";&:hover{background:", ";box-shadow:", ";}&:active{background:", ";box-shadow:none;}"], o.$isDisabled ? r.gray400 : r.brandPrimary500, r.white, r.brandPrimary600, r.elevation1, r.brandPrimary700)), Q = s.div.withConfig({
+  displayName: "ActionContainer",
+  componentId: "sc-ji6een-3"
+})(["position:absolute;top:", ";left:", ";z-index:2;opacity:var(--card-actions-opacity);"], r.spacing4, r.spacing4);
+export {
+  a as Card,
+  E as cardMinWidth
+};

package/CardSkeleton.js

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

package/Checkbox.js

@@ -0,0 +1,85 @@
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import r, { css as d } from "./styled-components.browser.esm.js";
+import { useFocusRing as $ } from "./useFocusRing.js";
+import { Checkmark as I } from "./Checkmark.js";
+import { textStyles as C } from "./textStyles.js";
+import { token as o } from "./token.js";
+import { makeInternalTokens as v } from "./makeInternalTokens.js";
+const s = "ds-checkbox__pointer-events-wrapper";
+function w({
+  isChecked: e = !1,
+  isDisabled: i = !1,
+  isIndeterminate: c = !1,
+  inputProps: f,
+  subtext: l,
+  children: b,
+  onChange: p = () => {
+  },
+  // eslint-disable-line @typescript-eslint/no-empty-function
+  id: k,
+  "aria-label": m,
+  "aria-labelledby": x,
+  ...u
+}) {
+  const {
+    isFocusVisible: g,
+    focusProps: y
+  } = $();
+  return /* @__PURE__ */ t(D, { $isIndeterminate: c, $isDisabled: i, $isChecked: e, className: s, ...u, children: [
+    /* @__PURE__ */ a(P, { type: "checkbox", ref: (h) => {
+      h && (h.indeterminate = c);
+    }, "aria-checked": c ? "mixed" : e, disabled: i, checked: e, onChange: p, id: k, "aria-label": m, "aria-labelledby": x, ...y, ...f }),
+    /* @__PURE__ */ a(N, { children: /* @__PURE__ */ t(M, { $isFocusVisible: g, $isIndeterminate: c, $isDisabled: i, $isChecked: e, children: [
+      e && /* @__PURE__ */ a(I, {}),
+      c && /* @__PURE__ */ a(S, {})
+    ] }) }),
+    b && /* @__PURE__ */ t(F, { $isDisabled: i, children: [
+      b,
+      l && /* @__PURE__ */ a(R, { $isDisabled: i, children: l })
+    ] })
+  ] });
+}
+w.pointerEventsClassname = s;
+const {
+  internalTokens: n,
+  declareTokens: T
+} = v({
+  lightTheme: {
+    "checkbox-border-unchecked": o.gray300,
+    "checkbox-border-unchecked-hover": o.gray500,
+    "checkbox-border-unchecked-focus": o.gray500,
+    "checkbox-fill-disabled": o.gray100,
+    "checkbox-checkmark-color-disabled": o.gray500
+  },
+  darkTheme: {
+    "checkbox-border-unchecked": o.gray300a,
+    "checkbox-border-unchecked-hover": o.gray500a,
+    "checkbox-border-unchecked-focus": o.gray500a,
+    "checkbox-fill-disabled": o.gray100a,
+    "checkbox-checkmark-color-disabled": o.gray500a
+  }
+}), D = r.label.withConfig({
+  displayName: "Container",
+  componentId: "sc-b4faes-0"
+})(["", " ", " display:flex;align-items:flex-start;margin:0;padding:", " 0;cursor:", ";user-select:none;"], T, C.uiTextM, o.spacing1, (e) => !e.$isDisabled && "pointer"), N = r.div.withConfig({
+  displayName: "IndicatorPosition",
+  componentId: "sc-b4faes-1"
+})(["display:flex;flex:none;align-items:center;&::before{content:'​';}"]), M = r.div.withConfig({
+  displayName: "Indicator",
+  componentId: "sc-b4faes-2"
+})(["position:relative;display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:16px;height:16px;border:2px solid ", ";border-radius:", ";background-color:transparent;&::before{content:'';position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;border:", " solid transparent;border-radius:calc( ", " + 3px );}", " ", " ", " ", " ", ":hover &&,", ":focus-visible &&{", " background-color:", ";}"], n["checkbox-border-unchecked"], o.radiusMedium, o.focusRingWidth, o.radiusMedium, (e) => e.$isFocusVisible && d(["border-color:", ";&::before{border-color:", ";}"], n["checkbox-border-unchecked-focus"], e.$isChecked || e.$isIndeterminate ? o.focusRingColorPrimary : o.focusRingColorSecondary), (e) => e.$isChecked && d(["border-color:transparent;background-color:", ";fill:#fff;"], o.blue500), (e) => e.$isIndeterminate && d(["border-color:transparent;background-color:", ";"], o.blue500), (e) => e.$isDisabled && d(["border-color:transparent;background-color:", ";fill:", ";"], n["checkbox-fill-disabled"], n["checkbox-checkmark-color-disabled"]), "." + s, "." + s, (e) => !e.$isChecked && !e.$isIndeterminate && !e.$isDisabled && `border-color: ${n["checkbox-border-unchecked-hover"]};`, (e) => (e.$isChecked || e.$isIndeterminate) && !e.$isDisabled ? o.blue600 : void 0), P = r.input.withConfig({
+  displayName: "Input",
+  componentId: "sc-b4faes-3"
+})(["position:relative;overflow:hidden;clip:rect(0,0,0,0);width:1px;height:1px;margin:0 -1px -1px 0;padding:0;border:0;white-space:nowrap;clip-path:inset(50%);"]), S = r.div.withConfig({
+  displayName: "IndeterminateMark",
+  componentId: "sc-b4faes-4"
+})(["width:8px;height:2px;border-radius:", ";background-color:", ";"], o.radiusPill, o.white), F = r.div.withConfig({
+  displayName: "Label",
+  componentId: "sc-b4faes-5"
+})(["display:block;margin-left:8px;color:", ";"], (e) => e.$isDisabled ? o.colorTextDisabled : o.colorText), R = r.span.withConfig({
+  displayName: "SubtextHolder",
+  componentId: "sc-b4faes-6"
+})(["display:block;color:", ";font-size:", ";"], (e) => e.$isDisabled ? o.colorTextDisabled : o.colorTextMuted, o.fontSize75);
+export {
+  w as Checkbox
+};

package/Checkbox.styles.js

@@ -1,5 +1,5 @@
-import t from "styled-components";
-import { token as e } from "@bynder/design-system";
+import t from "./styled-components.browser.esm.js";
+import { token as e } from "./token.js";
 const s = t.div`
 	width: 100%;
 	font-size: ${e.fontSize75};
@@ -35,4 +35,3 @@ export {
   a as ListItem,
   s as StyledCheckboxWrapper
 };
-//# sourceMappingURL=Checkbox.styles.js.map

package/Checkmark.js

@@ -0,0 +1,7 @@
+import { jsx as t } from "react/jsx-runtime";
+function h() {
+  return /* @__PURE__ */ t("svg", { width: "12", height: "12", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ t("path", { d: "M1.793 5.621a1 1 0 000 1.415l2.121 2.12a.995.995 0 00.773.292.996.996 0 00.641-.291l4.95-4.95a1 1 0 00-1.414-1.414L4.621 7.036 3.207 5.62a1 1 0 00-1.414 0z" }) });
+}
+export {
+  h as Checkmark
+};

package/Chip.js

@@ -1,43 +1,72 @@
-import { jsx as o } from "react/jsx-runtime";
-import { styled as r } from "styled-components";
-import { token as n } from "@bynder/design-system";
-import { handleEnter as a } from "./helpers.js";
-function s(i) {
-  return /* @__PURE__ */ o(
-    e,
-    {
-      onClick: i.onClick,
-      onKeyDown: (t) => a(t, i.onClick),
-      role: "button",
-      tabIndex: 0,
-      "data-testid": i["data-testid"],
-      loading: i.loading,
-      active: i.active,
-      children: i.children
-    }
-  );
-}
-const e = r.div`
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	flex-shrink: 0;
-	border-radius: calc(infinity * 1px);
-	font-size: ${n.fontSize75};
-	height: ${n.spacing7};
-	padding: 0 ${n.spacing4};
-	transition-property: color, background-color, border-color, opacity;
-	transition-timing-function: linear;
-	transition-duration: 0.05s;
-
-	margin-right: ${n.spacing3};
-	margin-bottom: ${n.spacing3};
-	border: 1px solid rgba(0, 34, 51, 0.1);
-	box-shadow: 0 1px 6px -2px rgba(0, 34, 51, 0.1);
-	cursor: ${({ loading: i, active: t }) => i && !t ? "default" : "pointer"};
-	background-color: ${({ active: i }) => i ? "rgba(0, 34, 51, .05)" : "transparent"};
-`;
+import { jsxs as C, jsx as n } from "react/jsx-runtime";
+import { forwardRef as T } from "react";
+import d, { css as e } from "./styled-components.browser.esm.js";
+import { useFocusRing as $ } from "./useFocusRing.js";
+import { IconCancel as q } from "./index4.js";
+import { token as o } from "./token.js";
+import { textStyles as u } from "./textStyles.js";
+import { makeInternalTokens as I } from "./makeInternalTokens.js";
+import { TruncatedText as S } from "./TruncatedText.js";
+const H = T(({
+  size: a = "m",
+  isDisabled: t = !1,
+  thumbnail: p,
+  children: m,
+  icon: g,
+  onClick: s,
+  onDelete: i,
+  ...f
+}, k) => {
+  const {
+    isFocusVisible: y,
+    focusProps: w
+  } = $();
+  function x(c) {
+    s && c.key === "Enter" ? (c.preventDefault(), s()) : i && (c.key === "Backspace" || c.key === "Delete") && i();
+  }
+  function v(c) {
+    c.stopPropagation(), i && i();
+  }
+  const h = !!(s || i);
+  return /* @__PURE__ */ C(D, { $size: a, $isDisabled: t, disabled: t && h, "aria-disabled": t, onClick: s, onKeyDown: x, $isFocusVisible: y, as: h ? "button" : "span", ref: k, ...w, ...f, children: [
+    p && /* @__PURE__ */ n(l, { children: p }),
+    g && /* @__PURE__ */ n(j, { children: g }),
+    /* @__PURE__ */ n(S, { children: m }),
+    i && /* @__PURE__ */ n(b, { $isDisabled: t, onClick: v, "data-testid": "ds-chip-delete-button", children: /* @__PURE__ */ n(q, { size: "18px" }) })
+  ] });
+}), {
+  internalTokens: r,
+  declareTokens: B
+} = I({
+  lightTheme: {
+    "chip-background-color": o.gray50,
+    "chip-background-color-disabled": o.gray25,
+    "chip-background-color-hover": o.gray75,
+    "chip-background-color-active": o.gray100,
+    "chip-background-color-focus": o.gray25,
+    "chip-shadow-focus": o.elevationStatic
+  },
+  darkTheme: {
+    "chip-background-color": o.gray50a,
+    "chip-background-color-disabled": o.gray25a,
+    "chip-background-color-hover": o.gray75a,
+    "chip-background-color-active": o.gray100a,
+    "chip-background-color-focus": "transparent",
+    "chip-shadow-focus": `0 0 0 1px ${o.gray200a}`
+  }
+}), b = d.span.withConfig({
+  displayName: "DeleteButton",
+  componentId: "sc-qqweaw-0"
+})(["display:flex;justify-content:center;align-items:center;width:24px;height:24px;margin:0 calc(", " * -1) 0 ", ";padding:0;border:0;border-radius:", ";background:none;color:", ";outline:0;cursor:pointer;&:hover{background:", ";color:", ";}&:active{background:", ";}"], o.spacing3, o.spacing3, o.radiusCircle, (a) => a.$isDisabled ? o.gray400 : o.gray600, o.gray50a, o.gray800, o.gray100a), D = d.button.withConfig({
+  displayName: "ChipStyled",
+  componentId: "sc-qqweaw-1"
+})(["", " display:inline-flex;align-items:center;max-width:100%;border:0;border-radius:", ";background-color:", ";color:", ";outline:none;font-family:", ";white-space:nowrap;", ";", ";", ";", ";", ";"], B, o.radiusPill, r["chip-background-color"], o.colorText, o.brandFontStackBase, (a) => a.onClick && e(["cursor:pointer;&:hover{background-color:", ";", "{color:", ";}}&:active{background-color:", ";}"], r["chip-background-color-hover"], b, o.gray800, r["chip-background-color-active"]), (a) => a.$isFocusVisible && e(["background:", ";box-shadow:inset ", ";outline:0;"], r["chip-background-color-focus"], r["chip-shadow-focus"]), (a) => a.$size === "m" && z, (a) => a.$size === "s" && F, (a) => a.$isDisabled && N), l = d.div.withConfig({
+  displayName: "ThumbnailContainer",
+  componentId: "sc-qqweaw-2"
+})(["display:block;"]), F = e(["", " height:32px;padding:0 12px;", "{margin:0 ", " 0 calc(", " * -1);}"], u.uiTextS, l, o.spacing3, o.spacing3), z = e(["", " height:40px;padding:0 16px;", "{margin:0 ", " 0 calc(", " * -1);}"], u.uiTextM, l, o.spacing3, o.spacing4), N = e(["background-color:", ";color:", ";pointer-events:none;"], r["chip-background-color-disabled"], o.colorTextDisabled), j = d.div.withConfig({
+  displayName: "IconContainer",
+  componentId: "sc-qqweaw-3"
+})(["width:24px;height:24px;margin-left:calc(", " * -1);padding:0 ", " 0 0;"], o.spacing2, o.spacing3);
 export {
-  s as Chip
+  H as Chip
 };
-//# sourceMappingURL=Chip.js.map

package/Chip2.js

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

package/CollectionCard.js

@@ -1,14 +1,15 @@
 import { jsx as t, jsxs as g } from "react/jsx-runtime";
-import { styled as s } from "styled-components";
-import { IconOpenInNew as u } from "@bynder/icons";
-import { token as i, Card as n } from "@bynder/design-system";
+import s from "./styled-components.browser.esm.js";
+import { IconOpenInNew as u } from "./index4.js";
+import { Card as n } from "./Card.js";
+import { token as i } from "./token.js";
 import { useSelectionMode as C, useConfig as h } from "./ConfigContext.js";
 import { __ as o } from "./index2.js";
 import { useRouter as x } from "./useRouterStore.js";
 import { useSelection as $ } from "./SelectionContext.js";
 import { pluralize as b } from "./text.js";
-function O({ collection: e, fadeIn: d = !0, isSelected: r, style: l }) {
-  const c = C(), [, m] = x(), p = $(), { hideExternalAccess: f } = h();
+function P({ collection: e, fadeIn: d = !0, isSelected: r, style: l }) {
+  const m = C(), [, c] = x(), p = $(), { hideExternalAccess: f } = h();
   return /* @__PURE__ */ t(w, { id: e.id, style: l, $fadeIn: d, children: /* @__PURE__ */ g(
     n,
     {
@@ -23,11 +24,11 @@ function O({ collection: e, fadeIn: d = !0, isSelected: r, style: l }) {
         }
       ),
       selectButtonAriaLabel: r ? o("Deselect") : o("Select"),
-      onSelect: c === "MultiSelect" ? (a) => {
+      onSelect: m === "MultiSelect" ? (a) => {
         a.stopPropagation(), p.toggleCollection(e);
       } : void 0,
       isSelected: r,
-      onClick: () => m({ page: "collection", collection: e }),
+      onClick: () => c({ page: "collection", collection: e }),
       "aria-selected": r,
       "data-testid": "asset-card",
       children: [
@@ -51,6 +52,5 @@ const w = s.div`
 	color: rgba(0, 34, 51, 0.5);
 `;
 export {
-  O as CollectionCard
+  P as CollectionCard
 };
-//# sourceMappingURL=CollectionCard.js.map

package/CollectionItem.js

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

package/CollectionList.js

@@ -1,7 +1,7 @@
 import { jsxs as h, jsx as t } from "react/jsx-runtime";
 import { useState as S } from "react";
-import { styled as v } from "styled-components";
-import { token as r } from "@bynder/design-system";
+import v from "./styled-components.browser.esm.js";
+import { token as r } from "./token.js";
 import { CardSkeleton as C } from "./CardSkeleton.js";
 import { CollectionCard as L } from "./CollectionCard.js";
 import { useDimensions as x } from "./useDimensions.js";
@@ -50,4 +50,3 @@ const R = v.div`
 export {
   E as CollectionList
 };
-//# sourceMappingURL=CollectionList.js.map

package/CollectionView.js

@@ -1,6 +1,6 @@
 import { jsxs as e, Fragment as b, jsx as y } from "react/jsx-runtime";
-import { styled as i } from "styled-components";
-import { token as t } from "@bynder/design-system";
+import i from "./styled-components.browser.esm.js";
+import { token as t } from "./token.js";
 import { useConfig as A } from "./ConfigContext.js";
 import { useOrderingSelectors as k } from "./useOrderingStore.js";
 import { useRouter as v } from "./useRouterStore.js";
@@ -70,4 +70,3 @@ const T = i.nav`
 export {
   K as CollectionView
 };
-//# sourceMappingURL=CollectionView.js.map

package/CollectionsView.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
 import { useEffect as m } from "react";
-import { styled as i } from "styled-components";
-import { token as t } from "@bynder/design-system";
+import i from "./styled-components.browser.esm.js";
+import { token as t } from "./token.js";
 import { useConfig as f } from "./ConfigContext.js";
 import { useOrderingSelectors as d } from "./useOrderingStore.js";
 import { Oops as p } from "./Oops.js";
@@ -22,8 +22,8 @@ function O() {
   );
   return m(() => {
     o.isLoading || s(!1);
-  }, [o.isLoading]), o.data.tag === "Failure" ? /* @__PURE__ */ e(p, { error: new Error(o.data.value), onRetry: o.executeQuery }) : /* @__PURE__ */ r(y, { "data-testid": "collections-view-container", children: [
-    /* @__PURE__ */ r(h, { children: [
+  }, [o.isLoading]), o.data.tag === "Failure" ? /* @__PURE__ */ e(p, { error: new Error(o.data.value), onRetry: o.executeQuery }) : /* @__PURE__ */ r(h, { "data-testid": "collections-view-container", children: [
+    /* @__PURE__ */ r(y, { children: [
       o.data.value && /* @__PURE__ */ e(E, { children: C(
         o.data.value.collections.totalCount,
         n("{} collection"),
@@ -36,12 +36,12 @@ function O() {
     /* @__PURE__ */ e(x, { connection: o })
   ] });
 }
-const y = i.div`
+const h = i.div`
 	display: flex;
 	flex-direction: column;
 	flex-grow: 1;
 	overflow-y: auto;
-`, h = i.div`
+`, y = i.div`
 	display: flex;
 	align-items: center;
 	padding: ${t.spacing5} ${t.spacing5} ${t.spacing3} ${t.spacing5};
@@ -55,4 +55,3 @@ const y = i.div`
 export {
   O as CollectionsView
 };
-//# sourceMappingURL=CollectionsView.js.map

package/ColorHexInput.js

@@ -0,0 +1,31 @@
+import { jsx as f } from "react/jsx-runtime";
+import { useState as l, useEffect as m } from "react";
+import { Input as p } from "./Input.js";
+import { Thumbnail as c } from "./Thumbnail.js";
+import { isValidHexValue as s } from "./isValidHexValue.js";
+import { makeHexWithOpacity as u } from "./makeHexWithOpacity.js";
+function y({
+  value: o,
+  onChange: e,
+  opacity: n
+}) {
+  const [i, t] = l(o);
+  return m(() => {
+    t(o);
+  }, [o]), /* @__PURE__ */ f(p, { maxLength: 7, icon: /* @__PURE__ */ f(c, { variant: "content", backgroundColor: typeof n > "u" ? o : u({
+    color: o,
+    opacity: n
+  }), shape: "circle", size: "xs" }), value: i, onChange: (a) => {
+    const r = x(a);
+    t(r), (s(r) || r.length === 0) && e(r);
+  }, onBlur: () => {
+    i !== o && (e(o), t(o));
+  }, placeholder: "#ffffff", "aria-label": "Hex" });
+}
+function x(o) {
+  const e = "#" + o.replace(/([^0-9A-F]+)/gi, "");
+  return e.length === 1 ? "" : e;
+}
+export {
+  y as ColorHexInput
+};