@bynder/compact-view 5.2.1 → 5.2.2

package/Tags.js

@@ -1,14 +1,14 @@
 import { jsx as n, jsxs as a, Fragment as e } from "react/jsx-runtime";
-import { styled as s } from "styled-components";
-import { token as i } from "@bynder/design-system";
-import { IconTag as d } from "@bynder/icons";
+import s from "./styled-components.browser.esm.js";
+import { token as i } from "./token.js";
+import { IconTag as d } from "./index4.js";
 import { Dropdown as p } from "./Dropdown.js";
 import { __ as g } from "./index2.js";
 import { TagItem as c } from "./TagItem.js";
 import { Spinner as m } from "./Spinner.js";
-function j(t) {
-  const o = l(t.tags);
-  return /* @__PURE__ */ n(p, { title: /* @__PURE__ */ n(f, {}), isSmall: !0, fadeIn: !0, children: () => /* @__PURE__ */ a(e, { children: [
+function y(t) {
+  const o = f(t.tags);
+  return /* @__PURE__ */ n(p, { title: /* @__PURE__ */ n(l, {}), isSmall: !0, fadeIn: !0, children: () => /* @__PURE__ */ a(e, { children: [
     t.isLoading && /* @__PURE__ */ n(m, {}),
     /* @__PURE__ */ a(h, { children: [
       " ",
@@ -18,10 +18,10 @@ function j(t) {
     /* @__PURE__ */ n(u, { children: o.map((r) => /* @__PURE__ */ n(c, { tag: r, isLoading: t.isLoading }, r.id)) })
   ] }) });
 }
-function l(t) {
+function f(t) {
   return [...t].sort((o, r) => r.assetCount - o.assetCount);
 }
-function f() {
+function l() {
   return /* @__PURE__ */ a(e, { children: [
     /* @__PURE__ */ n(T, {}),
     /* @__PURE__ */ n("span", { "data-testid": "tags-filter", children: g("Tags") })
@@ -43,5 +43,5 @@ const h = s.h1`
 	width: ${i.spacing6};
 `;
 export {
-  j as Tags
+  y as Tags
 };

package/Text2.js

@@ -0,0 +1,11 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Dropdown as e } from "./Dropdown2.js";
+function n({
+  children: t,
+  ...o
+}) {
+  return /* @__PURE__ */ r(e.Text, { fontSize: "list-item", ...o, children: t });
+}
+export {
+  n as Text
+};

package/Text22.js

@@ -0,0 +1,18 @@
+import { jsx as r } from "react/jsx-runtime";
+import m from "./styled-components.browser.esm.js";
+import { textStyles as e } from "./textStyles.js";
+import { token as o } from "./token.js";
+function s({
+  fontSize: t = "item",
+  children: i,
+  ...n
+}) {
+  return /* @__PURE__ */ r(p, { $fontSize: t, ...n, children: i });
+}
+const p = m.div.withConfig({
+  displayName: "TextStyled",
+  componentId: "sc-15vtjf7-0"
+})(["", " padding:", " ", ";color:", ";"], (t) => t.$fontSize === "item" ? e.uiTextS : e.uiTextM, o.spacing3, o.spacing5, o.gray400);
+export {
+  s as Text
+};

package/Text4.js

@@ -0,0 +1,18 @@
+import { jsx as o } from "react/jsx-runtime";
+import r from "./styled-components.browser.esm.js";
+import { textStyles as e } from "./textStyles.js";
+import { token as i } from "./token.js";
+import { internalTokens as p } from "./themes3.js";
+function f({
+  children: t
+}) {
+  return /* @__PURE__ */ o(n, { children: t });
+}
+const n = r.div.withConfig({
+  displayName: "StyledText",
+  componentId: "sc-juvpf5-0"
+})(["", " padding-block:", ";color:", ";"], e.paragraphS, i.spacing3, p["tooltip-text-color"]);
+export {
+  n as StyledText,
+  f as Text
+};

package/Textarea.js

@@ -0,0 +1,92 @@
+import { jsx as I } from "react/jsx-runtime";
+import { forwardRef as R, useRef as S } from "react";
+import C, { css as O } from "./styled-components.browser.esm.js";
+import { textStyles as z } from "./textStyles.js";
+import { token as e } from "./token.js";
+import { MINIMUM_ROWS as A, MAXIMUM_ROWS as B } from "./normalizeRows.js";
+import { useAutoHeight as D } from "./useAutoHeight.js";
+import { mergeRefs as N } from "./mergeRefs.js";
+import { makeInternalTokens as U } from "./makeInternalTokens.js";
+const J = R(({
+  id: a,
+  isDisabled: l = !1,
+  isReadOnly: d = !1,
+  isInvalid: i = !1,
+  onBlur: s,
+  onChange: o,
+  onFocus: n,
+  onKeyDown: b,
+  placeholder: c,
+  value: f,
+  "aria-label": x,
+  "aria-labelledby": g,
+  "aria-describedby": m,
+  minRows: h = A,
+  maxRows: u = B,
+  maxLength: p,
+  autoFocus: y = !1,
+  ...T
+}, v) => {
+  const t = S(null);
+  D(t, h, u);
+  function k(w) {
+    if (o) {
+      const M = w.currentTarget.value;
+      o(M);
+    }
+  }
+  return /* @__PURE__ */ I(
+    _,
+    {
+      value: f,
+      onChange: k,
+      id: a,
+      disabled: l,
+      readOnly: d,
+      $isInvalid: i,
+      "aria-label": x,
+      "aria-labelledby": g,
+      "aria-describedby": m,
+      onBlur: s,
+      onFocus: n,
+      onKeyDown: b,
+      placeholder: c,
+      autoComplete: "off",
+      autoCorrect: "off",
+      autoFocus: y,
+      ref: N(v, t),
+      maxLength: p,
+      ...T
+    }
+  );
+}), {
+  internalTokens: r,
+  declareTokens: W
+} = U({
+  lightTheme: {
+    "textarea-fill": e.gray10,
+    "textarea-fill-disabled": e.gray25,
+    "textarea-border": e.gray100,
+    "textarea-border-hover": e.gray200,
+    "textarea-border-focus": e.gray300,
+    "textarea-border-disabled": e.gray100,
+    "textarea-shadow-hover": e.elevation1,
+    "textarea-focus-ring": e.gray100
+  },
+  darkTheme: {
+    "textarea-fill": "transparent",
+    "textarea-fill-disabled": e.gray50a,
+    "textarea-border": e.gray200a,
+    "textarea-border-hover": e.gray300a,
+    "textarea-border-focus": e.gray400a,
+    "textarea-border-disabled": e.gray100a,
+    "textarea-shadow-hover": "none",
+    "textarea-focus-ring": e.gray300a
+  }
+}), _ = C.textarea.withConfig({
+  displayName: "TextareaStyled",
+  componentId: "sc-tq6lgg-0"
+})(["&&{", " display:block;box-sizing:border-box;width:100%;margin:0;padding:", " ", ";border:1px solid ", ";border-radius:", ";background:", ";color:", ";outline:none;font-family:", ";resize:none;transition:none;", " &::placeholder{color:", ";}&:hover{border-color:", ";box-shadow:", ";}&:focus{border-color:", ";box-shadow:0 0 0 3px ", ";}&:disabled{border-color:", ";background:", ";color:", ";box-shadow:none;&::placeholder{color:", ";}}", ";}"], W, e.spacing3, e.spacing5, r["textarea-border"], e.radiusBase, r["textarea-fill"], e.colorText, e.brandFontStackBase, z.paragraphM, e.colorTextDisabled, r["textarea-border-hover"], r["textarea-shadow-hover"], r["textarea-border-focus"], r["textarea-focus-ring"], r["textarea-border-disabled"], r["textarea-fill-disabled"], e.colorTextMuted, e.colorTextDisabled, (a) => a.$isInvalid && O(["border-color:", ";&:hover{border-color:", ";}&:focus{border-color:", ";}"], e.red500, e.red600, e.red500));
+export {
+  J as Textarea
+};

package/Theming.js

@@ -1,4 +1,4 @@
-import { css as n, createGlobalStyle as i } from "styled-components";
+import { css as n, createGlobalStyle as i } from "./styled-components.browser.esm.js";
 const c = (o) => ({
   // Button component
   "--componentButtonPrimaryBorderHover": o?.colorButtonPrimaryHover,
@@ -15,15 +15,15 @@ const c = (o) => ({
   "--componentButtonPrimaryFillFocus": o?.colorButtonPrimary
 }), u = i`${n`
 	.cv-root {
-		${(o) => l(o.theme)}
+		${(o) => a(o.theme)}
 	}:
 `}`;
-function l(o) {
+function a(o) {
   const r = c(o);
   return Object.entries(r).map((t) => t.join(":")).join(";") + ";";
 }
 export {
   u as ThemeStyles,
-  l as stringifyTheme,
+  a as stringifyTheme,
   c as themeVariables
 };

package/Thumb.js

@@ -0,0 +1,28 @@
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import { ThumbContainer as p, ThumbCircle as u } from "./styles.js";
+import { Tooltip as d } from "./Tooltip2.js";
+import { getThumbPosition as f } from "./getThumbPosition.js";
+function C({
+  min: t,
+  max: r,
+  value: i,
+  isTooltipOpen: e,
+  inputPosition: s,
+  isInactive: m,
+  isDisabled: o
+}) {
+  const a = f(t, r, i);
+  return /* @__PURE__ */ l(p, { $isInactive: m, $isDisabled: o, style: h(a), "data-testid": "ds-slider-thumb", children: [
+    /* @__PURE__ */ n(u, { $isDisabled: o }),
+    s === "none" && /* @__PURE__ */ n(d, { isOpen: e, content: i, position: "top-center", children: (c) => /* @__PURE__ */ n("div", { ...c }) })
+  ] });
+}
+function h(t) {
+  return {
+    left: t,
+    transform: `translateY(-50%) translateX(calc(${t} * -1))`
+  };
+}
+export {
+  C as Thumb
+};

package/Thumbnail.js

@@ -0,0 +1,91 @@
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
+import s, { css as y } from "./styled-components.browser.esm.js";
+import { token as t } from "./token.js";
+import { pointerEventsClassname as p, Overlay as C } from "./Overlay.js";
+import { GAP as b, INDICATORS_VALUES as I } from "./constants2.js";
+import { Indicator as $ } from "./Indicator.js";
+import { Status as k } from "./Status.js";
+import { useId as S } from "./useId.js";
+function M({
+  size: h = "m",
+  shape: v = "square",
+  variant: n = "clean",
+  icon: z,
+  imageUrl: o,
+  backgroundColor: a,
+  iconColor: l,
+  children: x,
+  ...g
+}) {
+  const d = n === "content", c = n === "clean", w = a ? t[a] || a : c ? t.gray50a : !a && !o ? t.white : "transparent", H = c ? t[l] || l || t.gray600 : void 0, r = v === "circle" ? "50%" : n === "preview" ? "0" : "5px", m = S("thumbnail-mask");
+  return /* @__PURE__ */ e(N, { $size: h, $shape: v, className: p, style: {
+    "--ds-thumbnail-border-radius": r
+  }, ...g, children: [
+    /* @__PURE__ */ e(j, { role: "none", children: [
+      /* @__PURE__ */ e("mask", { id: m, children: [
+        /* @__PURE__ */ i("rect", { fill: "white", x: "0", y: "0", width: "100%", height: "100%", rx: r }),
+        /* @__PURE__ */ i(A, {})
+      ] }),
+      /* @__PURE__ */ e("g", { mask: `url(#${m})`, children: [
+        d && /* @__PURE__ */ i(R, {}),
+        /* @__PURE__ */ i("rect", { fill: w, x: "0", y: "0", width: "100%", height: "100%", rx: r, "data-testid": "ds-thumbnail-fill" }),
+        o && /* @__PURE__ */ i("image", { x: "0", y: "0", width: "100%", height: "100%", preserveAspectRatio: `xMidYMid ${n === "preview" ? "meet" : "slice"}`, xlinkHref: o, "data-testid": "ds-thumbnail-image" }),
+        d && /* @__PURE__ */ i("rect", { fill: "none", x: "0", y: "0", width: "100%", height: "100%", stroke: "rgba(0,0,0,0.1)", strokeWidth: "2", rx: r, "data-testid": "ds-thumbnail-inner-shadow" })
+      ] })
+    ] }),
+    /* @__PURE__ */ e(E, { $iconColor: H, $size: h, "data-testid": "ds-thumbnail-content", children: [
+      z,
+      d && !a && !o && /* @__PURE__ */ i(O, { "data-testid": "ds-thumbnail-no-image-line" })
+    ] }),
+    x
+  ] });
+}
+M.Overlay = C;
+M.pointerEventsClassname = p;
+M.Indicator = $;
+M.Status = k;
+const u = {
+  xs: "24px",
+  s: "32px",
+  m: "40px",
+  l: "64px"
+}, N = s.div.withConfig({
+  displayName: "ThumbnailContainer",
+  componentId: "sc-womslj-0"
+})(["position:relative;flex:none;width:", ";height:", ";&:has([data-thumbnail-status]){", "}&:has([data-thumbnail-indicator]){", "}"], (h) => u[h.$size], (h) => u[h.$size], f("status"), f("indicator"));
+function f(h) {
+  return (v) => {
+    const {
+      radius: n,
+      offset: z
+    } = I[h][v.$shape][v.$size];
+    return y(["--ds-thumbnail-indicator-offset-x:", "px;--ds-thumbnail-indicator-offset-y:", "px;--ds-thumbnail-indicator-radius:", "px;--ds-thumbnail-overlay-indicator-cutout:-webkit-radial-gradient( calc( 100% - ( var(--ds-thumbnail-indicator-radius) - var( --ds-thumbnail-indicator-offset-x ) ) ) calc( 100% - ( var(--ds-thumbnail-indicator-radius) - var( --ds-thumbnail-indicator-offset-y ) ) ),circle,transparent calc(var(--ds-thumbnail-indicator-radius) + ", "px),black 0 );--ds-thumbnail-indicator-color:black;"], z[0], z[1], n, b);
+  };
+}
+const j = s.svg.withConfig({
+  displayName: "Svg",
+  componentId: "sc-womslj-1"
+})(["position:absolute;top:0;left:0;width:100%;height:100%;"]), A = s.circle.withConfig({
+  displayName: "Cutout",
+  componentId: "sc-womslj-2"
+})(["fill:var(--ds-thumbnail-indicator-color,white);cx:calc(100% - var(--ds-thumbnail-indicator-radius) + var(--ds-thumbnail-indicator-offset-x));cy:calc(100% - var(--ds-thumbnail-indicator-radius) + var(--ds-thumbnail-indicator-offset-y));r:calc(var(--ds-thumbnail-indicator-radius) + ", "px);"], b), T = {
+  xs: t.fontSize100,
+  s: t.fontSize200,
+  m: t.fontSize500,
+  l: t.fontSize500
+}, E = s.div.withConfig({
+  displayName: "Content",
+  componentId: "sc-womslj-3"
+})(["position:absolute;inset:0;display:grid;place-items:center;color:", ";font-weight:600;font-size:", ";line-height:1;"], (h) => h.$iconColor, (h) => T[h.$size]), O = s.div.withConfig({
+  displayName: "NoImage",
+  componentId: "sc-womslj-4"
+})(["width:80%;height:2px;border-radius:2px;background:", ";transform:rotate(-45deg);"], t.red500);
+function R() {
+  return /* @__PURE__ */ e("g", { children: [
+    /* @__PURE__ */ i("rect", { height: "64", width: "64", x: "0", y: "0", fill: "#ffffff" }),
+    /* @__PURE__ */ i("path", { fill: "#e9ecee", d: "M0 0h4v4H0zM0 8h4v4H0zM0 16h4v4H0zM0 24h4v4H0zM0 32h4v4H0zM0 40h4v4H0zM0 48h4v4H0zM0 56h4v4H0zM4 4h4v4H4zM4 12h4v4H4zM4 20h4v4H4zM4 28h4v4H4zM4 36h4v4H4zM4 44h4v4H4zM4 52h4v4H4zM4 60h4v4H4zM8 0h4v4H8zM8 8h4v4H8zM8 16h4v4H8zM8 24h4v4H8zM8 32h4v4H8zM8 40h4v4H8zM8 48h4v4H8zM8 56h4v4H8zM12 4h4v4h-4zM12 12h4v4h-4zM12 20h4v4h-4zM12 28h4v4h-4zM12 36h4v4h-4zM12 44h4v4h-4zM12 52h4v4h-4zM12 60h4v4h-4zM16 0h4v4h-4zM16 8h4v4h-4zM16 16h4v4h-4zM16 24h4v4h-4zM16 32h4v4h-4zM16 40h4v4h-4zM16 48h4v4h-4zM16 56h4v4h-4zM20 4h4v4h-4zM20 12h4v4h-4zM20 20h4v4h-4zM20 28h4v4h-4zM20 36h4v4h-4zM20 44h4v4h-4zM20 52h4v4h-4zM20 60h4v4h-4zM24 0h4v4h-4zM24 8h4v4h-4zM24 16h4v4h-4zM24 24h4v4h-4zM24 32h4v4h-4zM24 40h4v4h-4zM24 48h4v4h-4zM24 56h4v4h-4zM28 4h4v4h-4zM28 12h4v4h-4zM28 20h4v4h-4zM28 28h4v4h-4zM28 36h4v4h-4zM28 44h4v4h-4zM28 52h4v4h-4zM28 60h4v4h-4zM32 0h4v4h-4zM32 8h4v4h-4zM32 16h4v4h-4zM32 24h4v4h-4zM32 32h4v4h-4zM32 40h4v4h-4zM32 48h4v4h-4zM32 56h4v4h-4zM36 4h4v4h-4zM36 12h4v4h-4zM36 20h4v4h-4zM36 28h4v4h-4zM36 36h4v4h-4zM36 44h4v4h-4zM36 52h4v4h-4zM36 60h4v4h-4zM40 0h4v4h-4zM40 8h4v4h-4zM40 16h4v4h-4zM40 24h4v4h-4zM40 32h4v4h-4zM40 40h4v4h-4zM40 48h4v4h-4zM40 56h4v4h-4zM44 4h4v4h-4zM44 12h4v4h-4zM44 20h4v4h-4zM44 28h4v4h-4zM44 36h4v4h-4zM44 44h4v4h-4zM44 52h4v4h-4zM44 60h4v4h-4zM48 0h4v4h-4zM48 8h4v4h-4zM48 16h4v4h-4zM48 24h4v4h-4zM48 32h4v4h-4zM48 40h4v4h-4zM48 48h4v4h-4zM48 56h4v4h-4zM52 4h4v4h-4zM52 12h4v4h-4zM52 20h4v4h-4zM52 28h4v4h-4zM52 36h4v4h-4zM52 44h4v4h-4zM52 52h4v4h-4zM52 60h4v4h-4zM56 0h4v4h-4zM56 8h4v4h-4zM56 16h4v4h-4zM56 24h4v4h-4zM56 32h4v4h-4zM56 40h4v4h-4zM56 48h4v4h-4zM56 56h4v4h-4zM60 4h4v4h-4zM60 12h4v4h-4zM60 20h4v4h-4zM60 28h4v4h-4zM60 36h4v4h-4zM60 44h4v4h-4zM60 52h4v4h-4zM60 60h4v4h-4z" })
+  ] });
+}
+export {
+  M as Thumbnail
+};

package/Tokenizer.js

@@ -0,0 +1,147 @@
+import { assign as p, strlen as x, charat as h, trim as j, from as q, substr as z, append as A } from "./Utility.js";
+var u = 1, a = 1, b = 0, r = 0, n = 0, t = "";
+function B(e, c, m, g, k, w, d, v) {
+  return { value: e, root: c, parent: m, type: g, props: k, children: w, line: u, column: a, length: d, return: "", siblings: v };
+}
+function C(e, c) {
+  return p(B("", null, null, "", null, null, 0, e.siblings), e, { length: -e.length }, c);
+}
+function F(e) {
+  for (; e.root; )
+    e = C(e.root, { children: [e] });
+  A(e, e.siblings);
+}
+function G() {
+  return n;
+}
+function H() {
+  return n = r > 0 ? h(t, --r) : 0, a--, n === 10 && (a = 1, u--), n;
+}
+function i() {
+  return n = r < b ? h(t, r++) : 0, a++, n === 10 && (a = 1, u++), n;
+}
+function s() {
+  return h(t, r);
+}
+function D() {
+  return r;
+}
+function l(e, c) {
+  return z(t, e, c);
+}
+function f(e) {
+  switch (e) {
+    // \0 \t \n \r \s whitespace token
+    case 0:
+    case 9:
+    case 10:
+    case 13:
+    case 32:
+      return 5;
+    // ! + , / > @ ~ isolate token
+    case 33:
+    case 43:
+    case 44:
+    case 47:
+    case 62:
+    case 64:
+    case 126:
+    // ; { } breakpoint token
+    case 59:
+    case 123:
+    case 125:
+      return 4;
+    // : accompanied token
+    case 58:
+      return 3;
+    // " ' ( [ opening delimit token
+    case 34:
+    case 39:
+    case 40:
+    case 91:
+      return 2;
+    // ) ] closing delimit token
+    case 41:
+    case 93:
+      return 1;
+  }
+  return 0;
+}
+function I(e) {
+  return u = a = 1, b = x(t = e), r = 0, [];
+}
+function J(e) {
+  return t = "", e;
+}
+function K(e) {
+  return j(l(r - 1, o(e === 91 ? e + 2 : e === 40 ? e + 1 : e)));
+}
+function L(e) {
+  for (; (n = s()) && n < 33; )
+    i();
+  return f(e) > 2 || f(n) > 3 ? "" : " ";
+}
+function M(e, c) {
+  for (; --c && i() && !(n < 48 || n > 102 || n > 57 && n < 65 || n > 70 && n < 97); )
+    ;
+  return l(e, D() + (c < 6 && s() == 32 && i() == 32));
+}
+function o(e) {
+  for (; i(); )
+    switch (n) {
+      // ] ) " '
+      case e:
+        return r;
+      // " '
+      case 34:
+      case 39:
+        e !== 34 && e !== 39 && o(n);
+        break;
+      // (
+      case 40:
+        e === 41 && o(e);
+        break;
+      // \
+      case 92:
+        i();
+        break;
+    }
+  return r;
+}
+function N(e, c) {
+  for (; i() && e + n !== 57; )
+    if (e + n === 84 && s() === 47)
+      break;
+  return "/*" + l(c, r - 1) + "*" + q(e === 47 ? e : i());
+}
+function O(e) {
+  for (; !f(s()); )
+    i();
+  return l(e, r);
+}
+export {
+  I as alloc,
+  D as caret,
+  G as char,
+  n as character,
+  t as characters,
+  a as column,
+  N as commenter,
+  C as copy,
+  J as dealloc,
+  K as delimit,
+  o as delimiter,
+  M as escaping,
+  O as identifier,
+  b as length,
+  F as lift,
+  u as line,
+  i as next,
+  B as node,
+  s as peek,
+  r as position,
+  H as prev,
+  l as slice,
+  f as token,
+  L as whitespace
+};

package/Toolbar.js

@@ -1,8 +1,9 @@
 import { jsxs as n, Fragment as p, jsx as o } from "react/jsx-runtime";
-import m from "styled-components";
-import { IconExitApp as u, IconCancel as f } from "@bynder/icons";
-import { token as i, Button as l } from "@bynder/design-system";
-import { __ as a } from "./index2.js";
+import m from "./styled-components.browser.esm.js";
+import { IconExitApp as u, IconCancel as f } from "./index4.js";
+import { Button as a } from "./Button.js";
+import { token as i } from "./token.js";
+import { __ as l } from "./index2.js";
 import { useIsLoggedIn as g, useAuth as h } from "./LoginContext.js";
 import { useModalContext as x } from "./Modal.js";
 import { SearchInput as C } from "./SearchInput.js";
@@ -10,40 +11,40 @@ import { ViewSwitch as I } from "./ViewSwitch.js";
 import { useAssetFilter as v, useHideSwitch as w } from "./ConfigContext.js";
 function z() {
   const e = g(), t = x(), r = h(), s = v(), d = w(), c = s !== void 0 && !s.showToolbar;
-  return !e && !t && c ? null : /* @__PURE__ */ n(y, { children: [
+  return !e && !t && c ? null : /* @__PURE__ */ n(b, { children: [
     !c && /* @__PURE__ */ n(p, { children: [
       !d && /* @__PURE__ */ o(I, {}),
       /* @__PURE__ */ o(C, {})
     ] }),
-    /* @__PURE__ */ n(b, { children: [
+    /* @__PURE__ */ n(k, { children: [
       e && !r?.hideLogout && /* @__PURE__ */ o(
-        l,
+        a,
         {
           variant: "clean",
           onClick: () => r?.logout(),
           rightIcon: /* @__PURE__ */ o(u, {}),
-          children: a("Log out")
+          children: l("Log out")
         }
       ),
       t && /* @__PURE__ */ o(
-        l,
+        a,
         {
           variant: "clean",
           onClick: () => t.onClose(),
-          title: a("Close"),
+          title: l("Close"),
           icon: /* @__PURE__ */ o(f, {})
         }
       )
     ] })
   ] });
 }
-const y = m.nav`
+const b = m.nav`
 	display: flex;
 	justify-content: space-between;
 	background: ${i.gray10};
 	padding: ${i.spacing4} ${i.spacing4};
 	z-index: 30;
-`, b = m.div`
+`, k = m.div`
 	display: inline-flex;
 	margin-left: auto;
 `;

package/Tooltip.js

@@ -1,6 +1,6 @@
 import { jsxs as l, jsx as c } from "react/jsx-runtime";
-import { styled as o } from "styled-components";
-import { token as r } from "@bynder/design-system";
+import o from "./styled-components.browser.esm.js";
+import { token as r } from "./token.js";
 const b = ({
   text: e,
   position: t = "top",

package/Tooltip2.js

@@ -0,0 +1,111 @@
+import { jsxs as T, Fragment as C, jsx as o } from "react/jsx-runtime";
+import { useHover as O, useLayer as L } from "react-laag";
+import p, { css as P } from "./styled-components.browser.esm.js";
+import { useFocusRing as M } from "./useFocusRing.js";
+import { LightTheme as S, DarkTheme as F } from "./themeContainers.js";
+import { textStyles as m } from "./textStyles.js";
+import { token as r } from "./token.js";
+import { Flex as N } from "./Flex.js";
+import { useZIndex as j } from "./useZIndex.js";
+import { Image as B } from "./Image.js";
+import { Text as H } from "./Text4.js";
+import { ListItem as R } from "./ListItem4.js";
+import { declareTokens as D, internalTokens as a } from "./themes3.js";
+import { useId as E } from "./useId.js";
+function d({
+  position: t = "top-center",
+  timing: e = "instant",
+  size: n = "small",
+  isLightTheme: i = !1,
+  className: f,
+  icon: g,
+  secondaryText: h,
+  badge: y,
+  content: I,
+  ...s
+}) {
+  const [$, b] = O({
+    delayEnter: e === "delay" ? 800 : 0
+  }), {
+    isFocusVisible: v,
+    focusProps: u
+  } = M(), w = j("tooltip"), c = s.isOpen === void 0 ? $ || v : s.isOpen, {
+    triggerProps: x,
+    layerProps: k,
+    renderLayer: z
+  } = L({
+    isOpen: c,
+    auto: !0,
+    snap: !0,
+    placement: V(t),
+    possiblePlacements: W(t),
+    triggerOffset: 8,
+    containerOffset: 8
+  }), l = E("tooltip");
+  return /* @__PURE__ */ T(C, { children: [
+    typeof s.children == "function" ? s.children({
+      ...x,
+      ...b,
+      ...u,
+      "aria-describedby": c ? l : void 0
+    }) : /* @__PURE__ */ o("div", { "aria-describedby": c ? l : void 0, ...x, ...b, ...u, children: s.children }),
+    c && z(/* @__PURE__ */ o(Z, { isLightTheme: i, children: /* @__PURE__ */ o(q, { ...k, $zIndex: w, className: f, $size: n, id: l, role: "tooltip", children: /* @__PURE__ */ T(N, { alignItems: "center", gap: "3", children: [
+      g && /* @__PURE__ */ o(A, { $size: n, children: g }),
+      /* @__PURE__ */ o("div", { children: I }),
+      h && /* @__PURE__ */ o(G, { children: h }),
+      y
+    ] }) }) }))
+  ] });
+}
+function V(t) {
+  return {
+    "top-left": "top-start",
+    "top-center": "top-center",
+    "top-right": "top-end",
+    left: "left-center",
+    right: "right-center",
+    "bottom-left": "bottom-start",
+    "bottom-center": "bottom-center",
+    "bottom-right": "bottom-end"
+  }[t];
+}
+function W(t) {
+  const e = ["top-center", "bottom-center"], n = ["left-center", "right-center"], i = ["top-end", "top-start", "bottom-end", "bottom-start"];
+  return {
+    "top-left": i,
+    "top-center": e,
+    "top-right": i,
+    left: n,
+    right: n,
+    "bottom-left": i,
+    "bottom-center": e,
+    "bottom-right": i
+  }[t];
+}
+function Z({
+  isLightTheme: t,
+  children: e
+}) {
+  return t ? /* @__PURE__ */ o(S, { children: e }) : /* @__PURE__ */ o(F, { children: e });
+}
+d.Image = B;
+d.Text = H;
+d.ListItem = R;
+const q = p.div.withConfig({
+  displayName: "TooltipContainer",
+  componentId: "sc-10x22fh-0"
+})(["--ds-tooltip-border-radius:", ";", " z-index:", ";display:flex;box-sizing:border-box;border-radius:var(--ds-tooltip-border-radius);background:", ";color:", ";box-shadow:", ";word-break:break-word;", ";"], r.radiusBase, D, (t) => t.$zIndex, a["tooltip-background"], a["tooltip-title-color"], a["tooltip-shadow"], (t) => {
+  if (t.$size === "small")
+    return P(["", " max-width:240px;padding:", " ", ";"], m.uiTextS, r.spacing3, r.spacing4);
+  if (t.$size === "medium")
+    return P(["", " max-width:256px;padding:", " ", ";"], m.uiTextM, r.spacing3, r.spacing5);
+}), A = p.span.withConfig({
+  displayName: "IconContainer",
+  componentId: "sc-10x22fh-1"
+})(["display:flex;align-items:center;width:24px;height:24px;margin-block:calc(", " * -1);margin-left:", ";"], r.spacing1, (t) => t.$size === "medium" ? `calc(${r.spacing3} * -1)` : `calc(${r.spacing2} * -1)`), G = p.span.withConfig({
+  displayName: "SecondaryTextContainer",
+  componentId: "sc-10x22fh-2"
+})(["", " color:", ";"], m.uiTextS, a["tooltip-secondary-text-color"]);
+export {
+  d as Tooltip
+};