@bynder/compact-view 5.2.0 → 5.2.2

package/Group2.js

@@ -0,0 +1,26 @@
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import c from "./styled-components.browser.esm.js";
+import { token as e } from "./token.js";
+import { useId as a } from "./useId.js";
+function u({
+  title: n,
+  action: t,
+  children: d,
+  ...s
+}) {
+  const i = a("list-group-header");
+  return /* @__PURE__ */ r("div", { ...s, children: [
+    /* @__PURE__ */ r(p, { children: [
+      /* @__PURE__ */ o("span", { id: i, children: n }),
+      t
+    ] }),
+    /* @__PURE__ */ o("div", { "aria-describedby": i, children: d })
+  ] });
+}
+const p = c.div.withConfig({
+  displayName: "Header",
+  componentId: "sc-g7ra3w-0"
+})(["display:flex;justify-content:space-between;align-items:center;padding:", " 0 ", ";color:", ";"], e.spacing3, e.spacing2, e.colorText);
+export {
+  u as Group
+};

package/Header.js

@@ -39,4 +39,3 @@ function n() {
 export {
   n as Header
 };
-//# sourceMappingURL=Header.js.map

package/Header2.js

@@ -0,0 +1,43 @@
+import { jsxs as p, jsx as i } from "react/jsx-runtime";
+import r from "./styled-components.browser.esm.js";
+import { TruncatedText as l } from "./TruncatedText.js";
+import { textStyles as c } from "./textStyles.js";
+import { token as t } from "./token.js";
+import { useCardContext as g } from "./context.js";
+function N({
+  thumbnail: n,
+  title: e,
+  detail: o,
+  icon: a,
+  isNotTruncated: d = !1,
+  ...m
+}) {
+  const {
+    cardTitleId: s
+  } = g();
+  return /* @__PURE__ */ p(h, { ...m, children: [
+    n ? /* @__PURE__ */ i(f, { children: n }) : null,
+    /* @__PURE__ */ i(u, { id: s, children: d ? e : /* @__PURE__ */ i(l, { children: e }) }),
+    o ? /* @__PURE__ */ i(w, { children: d ? o : /* @__PURE__ */ i(l, { children: o }) }) : null,
+    a ? /* @__PURE__ */ i(x, { children: a }) : null
+  ] });
+}
+const h = r.div.withConfig({
+  displayName: "HeaderStyled",
+  componentId: "sc-1o0trsi-0"
+})(["display:grid;grid-template-areas:'thumbnail title icon' 'thumbnail detail icon';grid-template-columns:auto 1fr auto;padding:var(--card-content-padding);"]), f = r.div.withConfig({
+  displayName: "ThumbnailContainer",
+  componentId: "sc-1o0trsi-1"
+})(["grid-area:thumbnail;margin-top:2px;margin-right:", ";"], t.spacing4), u = r.div.withConfig({
+  displayName: "Title",
+  componentId: "sc-1o0trsi-2"
+})(["", " grid-area:title;min-width:0;color:", ";overflow-wrap:break-word;"], c.uiTextM, t.colorText), w = r.div.withConfig({
+  displayName: "Detail",
+  componentId: "sc-1o0trsi-3"
+})(["", " grid-area:detail;min-width:0;margin-top:", ";color:", ";overflow-wrap:break-word;"], c.uiTextS, t.spacing2, t.colorTextMuted), x = r.div.withConfig({
+  displayName: "IconContainer",
+  componentId: "sc-1o0trsi-4"
+})(["z-index:2;display:grid;grid-area:icon;align-items:center;margin-left:", ";color:", ";"], t.spacing2, t.gray600);
+export {
+  N as Header
+};

package/Header22.js

@@ -0,0 +1,15 @@
+import { jsx as i } from "react/jsx-runtime";
+import { Box as m } from "./Box.js";
+import { Item as c } from "./Item.js";
+function x({
+  rightElements: r,
+  subtext: o,
+  thumbnail: d,
+  title: n,
+  ...p
+}) {
+  return /* @__PURE__ */ i(m, { paddingBlock: "3", paddingInline: "6", ...p, children: (r || o || d || n) && /* @__PURE__ */ i(c, { thumbnail: d, rightElements: r, subtext: o, children: n }) });
+}
+export {
+  x as Header
+};

package/HelperText.js

@@ -0,0 +1,26 @@
+import { jsxs as p, jsx as l } from "react/jsx-runtime";
+import o from "./styled-components.browser.esm.js";
+import { textStyles as s } from "./textStyles.js";
+import { token as t } from "./token.js";
+import { useGroupParent as a } from "./useGroupContext.js";
+function h({
+  icon: e,
+  isInvalid: n,
+  children: i,
+  ...r
+}) {
+  return a("HelperText"), /* @__PURE__ */ p(d, { $isInvalid: n, $hasIcon: !!e, ...r, children: [
+    e && /* @__PURE__ */ l(m, { children: e }),
+    i
+  ] });
+}
+const d = o.div.withConfig({
+  displayName: "HelperTextStyled",
+  componentId: "sc-16g18nz-0"
+})(["", " display:flex;align-items:center;margin-top:", ";padding-top:", ";color:", ";"], s.uiTextS, t.spacing2, (e) => e.$hasIcon ? "2px" : "0", (e) => e.$isInvalid ? t.red500 : t.colorTextMuted), m = o.div.withConfig({
+  displayName: "Icon",
+  componentId: "sc-16g18nz-1"
+})(["flex:none;align-self:flex-start;margin-top:-2px;margin-right:", ";"], t.spacing2);
+export {
+  h as HelperText
+};

package/HorizontalScroll.js

@@ -1,11 +1,11 @@
 import { jsxs as x, jsx as n } from "react/jsx-runtime";
 import { useState as g, useRef as b, useEffect as f } from "react";
-import { styled as d } from "styled-components";
-import { token as h } from "@bynder/design-system";
+import d from "./styled-components.browser.esm.js";
+import { token as h } from "./token.js";
 import { useDimensions as p } from "./useDimensions.js";
 import { RightArrow as A } from "./RightArrow.js";
 import { LeftArrow as $ } from "./LeftArrow.js";
-function W(r) {
+function j(r) {
   const [e, c] = g(0), t = b(null), { dimensions: s, remeasure: m } = p(t.current), o = t.current !== null ? t.current.scrollWidth - t.current.clientWidth : 0, l = s !== void 0 ? Math.ceil(s.width) < s.scrollWidth : !1;
   f(() => {
     m(t.current);
@@ -46,6 +46,5 @@ const z = d.div`
 	transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.15);
 `;
 export {
-  W as HorizontalScroll
+  j as HorizontalScroll
 };
-//# sourceMappingURL=HorizontalScroll.js.map

package/HttpHandler.js

@@ -0,0 +1,74 @@
+import { devUtils as n } from "./devUtils.js";
+import { isStringEqual as i } from "./isStringEqual.js";
+import { getStatusCodeColor as c } from "./getStatusCodeColor.js";
+import { getTimestamp as u } from "./getTimestamp.js";
+import { serializeRequest as m } from "./serializeRequest.js";
+import { serializeResponse as l } from "./serializeResponse.js";
+import { matchRequestUrl as h } from "./matchRequestUrl.js";
+import { toPublicUrl as p } from "./toPublicUrl.js";
+import { getAllRequestCookies as d } from "./getRequestCookies.js";
+import { cleanUrl as f, getSearchParams as R } from "./cleanUrl.js";
+import { RequestHandler as q } from "./RequestHandler.js";
+var g = /* @__PURE__ */ ((t) => (t.HEAD = "HEAD", t.GET = "GET", t.POST = "POST", t.PUT = "PUT", t.PATCH = "PATCH", t.OPTIONS = "OPTIONS", t.DELETE = "DELETE", t))(g || {});
+class A extends q {
+  constructor(e, r, o, s) {
+    super({
+      info: {
+        header: `${e} ${r}`,
+        path: r,
+        method: e
+      },
+      resolver: o,
+      options: s
+    }), this.checkRedundantQueryParameters();
+  }
+  checkRedundantQueryParameters() {
+    const { method: e, path: r } = this.info;
+    if (r instanceof RegExp || f(r) === r)
+      return;
+    R(r).forEach((a, P) => {
+    }), n.warn(
+      `Found a redundant usage of query parameters in the request handler URL for "${e} ${r}". Please match against a path instead and access query parameters using "new URL(request.url).searchParams" instead. Learn more: https://mswjs.io/docs/recipes/query-parameters`
+    );
+  }
+  async parse(e) {
+    var r;
+    const o = new URL(e.request.url), s = h(
+      o,
+      this.info.path,
+      (r = e.resolutionContext) == null ? void 0 : r.baseUrl
+    ), a = d(e.request);
+    return {
+      match: s,
+      cookies: a
+    };
+  }
+  predicate(e) {
+    const r = this.matchMethod(e.request.method), o = e.parsedResult.match.matches;
+    return r && o;
+  }
+  matchMethod(e) {
+    return this.info.method instanceof RegExp ? this.info.method.test(e) : i(this.info.method, e);
+  }
+  extendResolverArgs(e) {
+    var r;
+    return {
+      params: ((r = e.parsedResult.match) == null ? void 0 : r.params) || {},
+      cookies: e.parsedResult.cookies
+    };
+  }
+  async log(e) {
+    const r = p(e.request.url), o = await m(e.request), s = await l(e.response), a = c(s.status);
+    console.groupCollapsed(
+      n.formatMessage(
+        `${u()} ${e.request.method} ${r} (%c${s.status} ${s.statusText}%c)`
+      ),
+      `color:${a}`,
+      "color:inherit"
+    ), console.log("Request", o), console.log("Handler:", this), console.log("Response", s), console.groupEnd();
+  }
+}
+export {
+  A as HttpHandler,
+  g as HttpMethods
+};

package/HttpResponse.js

@@ -0,0 +1,85 @@
+import { normalizeResponseInit as s, decorateResponse as a } from "./decorators.js";
+class r extends Response {
+  constructor(t, n) {
+    const e = s(n);
+    super(t, e), a(this, e);
+  }
+  /**
+   * Create a `Response` with a `Content-Type: "text/plain"` body.
+   * @example
+   * HttpResponse.text('hello world')
+   * HttpResponse.text('Error', { status: 500 })
+   */
+  static text(t, n) {
+    const e = s(n);
+    return e.headers.has("Content-Type") || e.headers.set("Content-Type", "text/plain"), e.headers.has("Content-Length") || e.headers.set(
+      "Content-Length",
+      t ? new Blob([t]).size.toString() : "0"
+    ), new r(t, e);
+  }
+  /**
+   * Create a `Response` with a `Content-Type: "application/json"` body.
+   * @example
+   * HttpResponse.json({ firstName: 'John' })
+   * HttpResponse.json({ error: 'Not Authorized' }, { status: 401 })
+   */
+  static json(t, n) {
+    const e = s(n);
+    e.headers.has("Content-Type") || e.headers.set("Content-Type", "application/json");
+    const o = JSON.stringify(t);
+    return e.headers.has("Content-Length") || e.headers.set(
+      "Content-Length",
+      o ? new Blob([o]).size.toString() : "0"
+    ), new r(
+      o,
+      e
+    );
+  }
+  /**
+   * Create a `Response` with a `Content-Type: "application/xml"` body.
+   * @example
+   * HttpResponse.xml(`<user name="John" />`)
+   * HttpResponse.xml(`<article id="abc-123" />`, { status: 201 })
+   */
+  static xml(t, n) {
+    const e = s(n);
+    return e.headers.has("Content-Type") || e.headers.set("Content-Type", "text/xml"), new r(t, e);
+  }
+  /**
+   * Create a `Response` with a `Content-Type: "text/html"` body.
+   * @example
+   * HttpResponse.html(`<p class="author">Jane Doe</p>`)
+   * HttpResponse.html(`<main id="abc-123">Main text</main>`, { status: 201 })
+   */
+  static html(t, n) {
+    const e = s(n);
+    return e.headers.has("Content-Type") || e.headers.set("Content-Type", "text/html"), new r(t, e);
+  }
+  /**
+   * Create a `Response` with an `ArrayBuffer` body.
+   * @example
+   * const buffer = new ArrayBuffer(3)
+   * const view = new Uint8Array(buffer)
+   * view.set([1, 2, 3])
+   *
+   * HttpResponse.arrayBuffer(buffer)
+   */
+  static arrayBuffer(t, n) {
+    const e = s(n);
+    return t && !e.headers.has("Content-Length") && e.headers.set("Content-Length", t.byteLength.toString()), new r(t, e);
+  }
+  /**
+   * Create a `Response` with a `FormData` body.
+   * @example
+   * const data = new FormData()
+   * data.set('name', 'Alice')
+   *
+   * HttpResponse.formData(data)
+   */
+  static formData(t, n) {
+    return new r(t, s(n));
+  }
+}
+export {
+  r as HttpResponse
+};

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;
@@ -23,4 +23,3 @@ const d = a.div`
 export {
   u as InfiniteScroll
 };
-//# sourceMappingURL=InfiniteScroll.js.map

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