@bynder/compact-view 5.2.1 → 5.2.2

package/HttpStatusCode.js

@@ -0,0 +1,71 @@
+const e = {
+  Continue: 100,
+  SwitchingProtocols: 101,
+  Processing: 102,
+  EarlyHints: 103,
+  Ok: 200,
+  Created: 201,
+  Accepted: 202,
+  NonAuthoritativeInformation: 203,
+  NoContent: 204,
+  ResetContent: 205,
+  PartialContent: 206,
+  MultiStatus: 207,
+  AlreadyReported: 208,
+  ImUsed: 226,
+  MultipleChoices: 300,
+  MovedPermanently: 301,
+  Found: 302,
+  SeeOther: 303,
+  NotModified: 304,
+  UseProxy: 305,
+  Unused: 306,
+  TemporaryRedirect: 307,
+  PermanentRedirect: 308,
+  BadRequest: 400,
+  Unauthorized: 401,
+  PaymentRequired: 402,
+  Forbidden: 403,
+  NotFound: 404,
+  MethodNotAllowed: 405,
+  NotAcceptable: 406,
+  ProxyAuthenticationRequired: 407,
+  RequestTimeout: 408,
+  Conflict: 409,
+  Gone: 410,
+  LengthRequired: 411,
+  PreconditionFailed: 412,
+  PayloadTooLarge: 413,
+  UriTooLong: 414,
+  UnsupportedMediaType: 415,
+  RangeNotSatisfiable: 416,
+  ExpectationFailed: 417,
+  ImATeapot: 418,
+  MisdirectedRequest: 421,
+  UnprocessableEntity: 422,
+  Locked: 423,
+  FailedDependency: 424,
+  TooEarly: 425,
+  UpgradeRequired: 426,
+  PreconditionRequired: 428,
+  TooManyRequests: 429,
+  RequestHeaderFieldsTooLarge: 431,
+  UnavailableForLegalReasons: 451,
+  InternalServerError: 500,
+  NotImplemented: 501,
+  BadGateway: 502,
+  ServiceUnavailable: 503,
+  GatewayTimeout: 504,
+  HttpVersionNotSupported: 505,
+  VariantAlsoNegotiates: 506,
+  InsufficientStorage: 507,
+  LoopDetected: 508,
+  NotExtended: 510,
+  NetworkAuthenticationRequired: 511
+};
+Object.entries(e).forEach(([t, o]) => {
+  e[o] = t;
+});
+export {
+  e as default
+};

package/IconPlaceholder.js

@@ -0,0 +1,18 @@
+import { jsx as i } from "react/jsx-runtime";
+import c from "./styled-components.browser.esm.js";
+import { token as r } from "./token.js";
+function m({
+  children: o,
+  backgroundColor: e = r.gray25,
+  iconColor: n = r.gray400a,
+  ...t
+}) {
+  return /* @__PURE__ */ i(l, { $backgroundColor: e, $iconColor: n, ...t, children: o });
+}
+const l = c.div.withConfig({
+  displayName: "Placeholder",
+  componentId: "sc-1qxxfir-0"
+})(["display:flex;justify-content:center;align-items:center;min-height:100px;background:", ";color:", ";svg{width:48px;height:48px;}"], (o) => o.$backgroundColor, (o) => o.$iconColor);
+export {
+  m as IconPlaceholder
+};

package/Image.js

@@ -0,0 +1,19 @@
+import { jsx as t } from "react/jsx-runtime";
+import i from "./styled-components.browser.esm.js";
+import { token as o } from "./token.js";
+function g({
+  src: r,
+  alt: a = ""
+}) {
+  return /* @__PURE__ */ t(e, { children: /* @__PURE__ */ t(d, { src: r, alt: a, "data-testid": "ds-tooltip-image" }) });
+}
+const e = i.div.withConfig({
+  displayName: "ImageHolder",
+  componentId: "sc-ztsgek-0"
+})(["margin:calc(", " * -1) calc(", " * -1) ", ";"], o.spacing4, o.spacing5, o.spacing3), d = i.img.withConfig({
+  displayName: "StyledImage",
+  componentId: "sc-ztsgek-1"
+})(["vertical-align:top;width:100%;border-bottom:1px solid ", ";border-radius:var(--ds-tooltip-border-radius) var(--ds-tooltip-border-radius) 0 0;"], o.gray100a);
+export {
+  g as Image
+};

package/Images.js

@@ -0,0 +1,30 @@
+import { jsx as n } from "react/jsx-runtime";
+import d from "./styled-components.browser.esm.js";
+import { token as r } from "./token.js";
+function a({
+  children: i,
+  ...t
+}) {
+  return /* @__PURE__ */ n(c, { ...t, children: i });
+}
+const c = d.div.withConfig({
+  displayName: "ImagesStyled",
+  componentId: "sc-yiahyx-0"
+})(["display:grid;grid-template-rows:1fr 1fr;grid-template-columns:3fr 2fr;gap:", ";min-height:10px;&:has(:first-child:last-child){display:flex;}"], r.spacing1);
+function p({
+  src: i,
+  contentResize: t = "fill",
+  alt: e = "",
+  onError: l,
+  ...o
+}) {
+  return /* @__PURE__ */ n(h, { src: i, alt: e, $contentResize: t, onError: l, ...o });
+}
+const h = d.img.withConfig({
+  displayName: "ImgStyled",
+  componentId: "sc-yiahyx-1"
+})(["object-fit:", ";width:100%;height:100%;min-height:0;max-height:410px;&:nth-child(1){grid-row:1 / -1;grid-column:1;}&:nth-child(1):last-child{grid-column:span 2;}&:nth-child(2){grid-row:1;grid-column:2;}&:nth-child(2):last-child{grid-row:span 2;}&:nth-child(3){grid-row:2;grid-column:2;}"], (i) => i.$contentResize === "fill" ? "cover" : "scale-down");
+export {
+  a as Images,
+  p as Img
+};

package/Indicator.js

@@ -0,0 +1,74 @@
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import f, { keyframes as s } from "./styled-components.browser.esm.js";
+import { token as i } from "./token.js";
+import { IconContainer as u, SvgIcon as o } from "./styles2.js";
+const p = {
+  draft: L,
+  error: M,
+  loading: v,
+  negative: g,
+  positive: m
+};
+function B({
+  ...r
+}) {
+  if ("type" in r) {
+    const {
+      type: l,
+      ...C
+    } = r, h = p[l];
+    return /* @__PURE__ */ t(h, { "data-thumbnail-indicator": !0, ...C });
+  }
+  const {
+    backgroundColor: e,
+    iconColor: a,
+    icon: c,
+    ...d
+  } = r;
+  return /* @__PURE__ */ t(u, { $backgroundColor: e || "gray400", $iconColor: a || "white", "data-thumbnail-indicator": !0, ...d, children: c });
+}
+function m({
+  ...r
+}) {
+  return /* @__PURE__ */ n(o, { ...r, viewBox: "0 0 24 24", "aria-hidden": "true", fill: i.teal500, children: [
+    /* @__PURE__ */ t("path", { d: "M 0 12 C 0 5.371094 5.371094 0 12 0 C 18.628906 0 24 5.371094 24 12 C 24 18.628906 18.628906 24 12 24 C 5.371094 24 0 18.628906 0 12 Z M 0 12 " }),
+    /* @__PURE__ */ t("path", { d: "m5.69215,11.43763c-0.58607,0.58607 -0.58607,1.53629 0,2.12236l3.18355,3.18363c0.21978,0.21971 0.49077,0.35703 0.77456,0.41195c0.12714,0.02461 0.25685,0.03272 0.38568,0.02431c0.35044,-0.02311 0.69432,-0.16853 0.96216,-0.43627l7.42831,-7.42836c0.58604,-0.58608 0.58604,-1.53629 0,-2.12238c-0.58604,-0.58607 -1.53631,-0.58607 -2.12235,0l-6.36715,6.36712l-2.12238,-2.12238c-0.58608,-0.58608 -1.53629,-0.58608 -2.12238,0z", fill: "white" })
+  ] });
+}
+function g({
+  ...r
+}) {
+  return /* @__PURE__ */ n(o, { ...r, viewBox: "0 0 24 24", "aria-hidden": "true", fill: i.red400, children: [
+    /* @__PURE__ */ t("path", { d: "M 0 12 C 0 5.371094 5.371094 0 12 0 C 18.628906 0 24 5.371094 24 12 C 24 18.628906 18.628906 24 12 24 C 5.371094 24 0 18.628906 0 12 Z M 0 12 " }),
+    /* @__PURE__ */ t("path", { d: "M 17.304688 6.695312 C 16.71875 6.109375 15.769531 6.109375 15.183594 6.695312 L 12 9.878906 L 8.816406 6.695312 C 8.230469 6.109375 7.28125 6.109375 6.695312 6.695312 C 6.109375 7.28125 6.109375 8.230469 6.695312 8.816406 L 9.878906 12 L 6.695312 15.183594 C 6.109375 15.769531 6.109375 16.71875 6.695312 17.304688 C 7.28125 17.890625 8.230469 17.890625 8.816406 17.304688 L 12 14.121094 L 15.183594 17.304688 C 15.769531 17.890625 16.71875 17.890625 17.304688 17.304688 C 17.890625 16.71875 17.890625 15.769531 17.304688 15.183594 L 14.121094 12 L 17.304688 8.816406 C 17.890625 8.230469 17.890625 7.28125 17.304688 6.695312 Z M 17.304688 6.695312", fill: "white" })
+  ] });
+}
+function M({
+  ...r
+}) {
+  return /* @__PURE__ */ n(o, { ...r, viewBox: "0 0 24 24", "aria-hidden": "true", fill: i.red400, children: [
+    /* @__PURE__ */ t("path", { d: "M 0 12 C 0 5.371094 5.371094 0 12 0 C 18.628906 0 24 5.371094 24 12 C 24 18.628906 18.628906 24 12 24 C 5.371094 24 0 18.628906 0 12 Z M 0 12 " }),
+    /* @__PURE__ */ t("path", { d: "M 13.5 4.5 L 10.5 4.5 L 10.5 13.5 L 13.5 13.5 Z M 13.5 4.5 ", fill: "white" }),
+    /* @__PURE__ */ t("path", { d: "M 13.5 16.5 L 10.5 16.5 L 10.5 19.5 L 13.5 19.5 Z M 13.5 16.5 ", fill: "white" })
+  ] });
+}
+function L({
+  ...r
+}) {
+  return /* @__PURE__ */ n(o, { ...r, viewBox: "0 0 24 24", "aria-hidden": "true", fill: i.gray400, children: [
+    /* @__PURE__ */ t("path", { d: "M 0 12 C 0 5.371094 5.371094 0 12 0 C 18.628906 0 24 5.371094 24 12 C 24 18.628906 18.628906 24 12 24 C 5.371094 24 0 18.628906 0 12 Z M 0 12 " }),
+    /* @__PURE__ */ t("path", { d: "M 7.5 10.5 C 6.671875 10.5 6 11.171875 6 12 C 6 12.828125 6.671875 13.5 7.5 13.5 C 8.328125 13.5 9 12.828125 9 12 C 9 11.171875 8.328125 10.5 7.5 10.5 Z M 10.5 12 C 10.5 11.171875 11.171875 10.5 12 10.5 C 12.828125 10.5 13.5 11.171875 13.5 12 C 13.5 12.828125 12.828125 13.5 12 13.5 C 11.171875 13.5 10.5 12.828125 10.5 12 Z M 15 12 C 15 11.171875 15.671875 10.5 16.5 10.5 C 17.328125 10.5 18 11.171875 18 12 C 18 12.828125 17.328125 13.5 16.5 13.5 C 15.671875 13.5 15 12.828125 15 12 Z M 15 12 ", fill: "white" })
+  ] });
+}
+function v({
+  ...r
+}) {
+  return /* @__PURE__ */ t(o, { ...r, viewBox: "0 0 14 14", "aria-hidden": "true", fill: i.gray400, children: /* @__PURE__ */ t(k, { cx: "7", cy: "7", r: "5", fill: "transparent", strokeWidth: "2" }) });
+}
+const w = s(["0%{transform:rotate(0deg);stroke-dashoffset:6.6;}50%{transform:rotate(720deg);stroke-dashoffset:31.4;}100%{transform:rotate(1080deg);stroke-dashoffset:6.6;}"]), k = f.circle.withConfig({
+  displayName: "SvgSpinner",
+  componentId: "sc-chqga5-0"
+})(["stroke:", ";transform-origin:center;animation:", " 2s linear infinite;stroke-dasharray:31.4;stroke-linecap:round;"], (r) => r.$color || i.gray400, w);
+export {
+  B as Indicator
+};

package/InfiniteScroll.js

@@ -1,18 +1,18 @@
 import { jsxs as r, Fragment as o, jsx as t } from "react/jsx-runtime";
-import { useEffect as l } from "react";
-import { useInView as s } from "react-intersection-observer";
-import { styled as a } from "styled-components";
-import { Spinner as f } from "./Spinner.js";
+import { useEffect as a } from "react";
+import { useInView as f } from "react-intersection-observer";
+import l from "./styled-components.browser.esm.js";
+import { Spinner as s } from "./Spinner.js";
 function u(e) {
-  const [n, i] = s();
-  return l(() => {
+  const [n, i] = f();
+  return a(() => {
     i && !e.isLoading && e.hasNextPage && e.loadMore();
   }, [i]), /* @__PURE__ */ r(o, { children: [
     e.children,
-    e.hasNextPage && /* @__PURE__ */ t(d, { ref: n, "data-testid": "loading-element", children: /* @__PURE__ */ t(f, { isHidden: !i, isRelative: !0 }) })
+    e.hasNextPage && /* @__PURE__ */ t(d, { ref: n, "data-testid": "loading-element", children: /* @__PURE__ */ t(s, { isHidden: !i, isRelative: !0 }) })
   ] });
 }
-const d = a.div`
+const d = l.div`
 	display: flex;
 	justify-content: center;
 	align-items: center;

package/InlineBanner.js

@@ -0,0 +1,51 @@
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import n, { css as e } from "./styled-components.browser.esm.js";
+import { IconError as u, IconWarning as m, IconInfo as v } from "./index4.js";
+import { textStyles as l } from "./textStyles.js";
+import { token as o } from "./token.js";
+const f = {
+  info: /* @__PURE__ */ r(v, {}),
+  warning: /* @__PURE__ */ r(m, {}),
+  error: /* @__PURE__ */ r(u, {}),
+  neutral: null
+};
+function N({
+  children: i,
+  title: c,
+  icon: g,
+  link: a,
+  variant: t = "neutral",
+  ...p
+}) {
+  const d = g || f[t];
+  return /* @__PURE__ */ s(h, { $variant: t, ...p, children: [
+    d && /* @__PURE__ */ r(b, { children: d }),
+    /* @__PURE__ */ s(k, { children: [
+      c && /* @__PURE__ */ r(x, { children: c }),
+      /* @__PURE__ */ r(y, { children: i }),
+      a && /* @__PURE__ */ r(I, { children: a })
+    ] })
+  ] });
+}
+const h = n.div.withConfig({
+  displayName: "InlineBannerStyled",
+  componentId: "sc-7vi6cq-0"
+})(["", " display:flex;align-items:flex-start;padding:", " ", ";border-radius:", ";background:var(--background-color);"], (i) => i.$variant === "info" ? e(["--background-color:", ";--icon-color:", ";--link-color:", ";--link-color-hover:", ";"], o.blue500a10, o.blue500, o.blue600, o.blue700) : i.$variant === "warning" ? e(["--background-color:", ";--icon-color:", ";--link-color:", ";--link-color-hover:", ";"], o.yellow500a10, o.yellow500, o.orange900, o.orange1000) : i.$variant === "error" ? e(["--background-color:", ";--icon-color:", ";--link-color:", ";--link-color-hover:", ";"], o.red500a10, o.red500, o.red600, o.red700) : e(["--background-color:", ";--icon-color:", ";--link-color:", ";--link-color-hover:", ";"], o.gray50, o.gray500, o.blue600, o.blue700), o.spacing4, o.spacing4, o.radiusMedium), b = n.div.withConfig({
+  displayName: "IconHolder",
+  componentId: "sc-7vi6cq-1"
+})(["display:flex;width:24px;height:24px;margin-right:", ";color:var(--icon-color);"], o.spacing3), k = n.div.withConfig({
+  displayName: "TextWrapper",
+  componentId: "sc-7vi6cq-2"
+})(["align-self:center;"]), x = n.div.withConfig({
+  displayName: "TitleHolder",
+  componentId: "sc-7vi6cq-3"
+})(["", " margin-bottom:", ";color:", ";"], l.uiTextM, o.spacing2, o.gray1000), y = n.div.withConfig({
+  displayName: "DescriptionHolder",
+  componentId: "sc-7vi6cq-4"
+})(["", " color:", ";"], l.uiTextS, o.gray800), I = n.div.withConfig({
+  displayName: "LinkHolder",
+  componentId: "sc-7vi6cq-5"
+})(["", " margin-top:", ";a{color:var(--link-color);text-decoration:none;}a:hover{color:var(--link-color-hover);}a:focus-visible{border-radius:2px;box-shadow:0 0 0 2px ", ";outline:none;}"], l.uiTextS, o.spacing2, o.blue500);
+export {
+  N as InlineBanner
+};

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