welcome-ui 0.32.2 → 1.0.0-beta.10

package/dist/index-CmBs24Im.mjs

@@ -0,0 +1,413 @@
+"use client";
+import i, { useMemo as He, useState as T, useEffect as ce, Fragment as Ne } from "react";
+import de from "downshift";
+import { matchSorter as me } from "match-sorter";
+import { Icon as je, StyledIcon as Ke } from "./Icon.mjs";
+import { ClearButton as qe } from "./ClearButton.mjs";
+import { shouldForwardProp as q, forwardRef as Ge } from "./System.mjs";
+import { c as Le } from "./create-event-rXDe5aCQ.mjs";
+import { d as Ye, F as Je } from "./field-styles-CeV7pnOp.mjs";
+import { StyledTag as Qe, Tag as Xe } from "./Tag.mjs";
+import g, { css as D, system as he, th as u } from "@xstyled/styled-components";
+import { IconWrapper as Oe } from "./Field.mjs";
+import { o as j } from "./overflow-ellipsis-DGV5Kgt-.mjs";
+import { Box as Ue } from "./Box.mjs";
+const Me = 15, et = 15, tt = '<path fill="currentColor" fill-rule="evenodd" d="M50 71a4.399 4.399 0 0 1-2.936-1.119L17.49 43.552a4.468 4.468 0 0 1-.377-6.283 4.416 4.416 0 0 1 6.253-.379l26.278 23.397 26.632-29.81a4.412 4.412 0 0 1 6.253-.338 4.464 4.464 0 0 1 .337 6.283l-29.57 33.1A4.412 4.412 0 0 1 49.998 71Z" clip-rule="evenodd"/>', nt = {
+  width: Me,
+  height: et,
+  block: tt
+}, ot = (e) => /* @__PURE__ */ i.createElement(je, { alt: "Down", content: nt, ...e }), G = "", be = (e) => {
+  if (typeof e == "number")
+    return String(e);
+  if (typeof e == "string") {
+    const t = e.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g);
+    return t && t.map((n) => n.toLowerCase()).join("-");
+  }
+}, fe = (e) => e ? e.label : G, lt = (e) => e.reduce(
+  (t, n) => n.label && t.length > n.label.length ? t : n.label,
+  G
+), it = (e, t, n) => {
+  const l = t.find((a) => e.value === a.value);
+  return l && n ? t.filter((a) => e.value !== a.value) : l ? t : [...t, e];
+}, H = (e, t) => !!t.find((n) => n.value === e), K = (e, t = []) => t.find(
+  (l) => l.label === (e.label || e) || l.value === (e.value || e)
+) || { value: be(e), label: e }, rt = (e, t, n = !1) => {
+  const l = n ? t.flatMap((a) => a.options) : t;
+  return !e && e !== 0 ? [] : Array.isArray(e) ? e.map((a) => K(a, l)) : [K(e, l)];
+}, at = (e, t) => !!t.find((n) => n.value === e.value), st = (e, t) => at(e, t) ? e.value : e.label, ue = (e, t) => {
+  if (e)
+    return e.map((n) => st(n, t));
+}, ct = (e, t) => {
+  if (e)
+    return e.filter(
+      (n) => !t.find((l) => l.value === n.value)
+    );
+}, dt = ({
+  inputValue: e,
+  isMultiple: t,
+  isSearchable: n,
+  options: l,
+  renderItem: a
+}) => {
+  const h = K(e, l);
+  return t ? e : h.label ? n ? h.label : a(h) : G;
+}, ve = g(Oe)``, Ie = g(Ue).withConfig({ shouldForwardProp: q })(
+  ({ disabled: e }) => D`
+    position: relative;
+    ${he}
+    ${ve} {
+      color: ${e ? u("defaultFields.select.disabled.color") : "initial"};
+    }
+  `
+), mt = g.div`
+  position: relative;
+`, pe = g("div").withConfig({ shouldForwardProp: q })(
+  ({ iconPlacement: e, isClearable: t, size: n, transparent: l, variant: a }) => D`
+    position: relative;
+    ${Ye({
+    size: n,
+    variant: a,
+    transparent: l,
+    isClearable: t,
+    iconPlacement: e
+  })};
+    ${j};
+    cursor: pointer;
+    ${he}
+    line-height: 1em;
+
+    br {
+      display: none;
+    }
+
+    &::before {
+      content: attr(data-spacer);
+      visibility: hidden;
+      display: block;
+      height: 0;
+    }
+
+    &:empty {
+      &::after {
+        content: attr(placeholder);
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        ${j};
+        padding: inherit;
+        ${u("defaultFields.placeholder")}
+      }
+      &::before {
+        height: auto;
+      }
+    }
+  `
+), ft = g.ul`
+  ${u("defaultFields.select.default")};
+  ${u("cards.default")};
+  position: absolute;
+  z-index: 2;
+  right: 0;
+  left: 0;
+  margin: 0;
+  margin-top: md;
+  padding: 0;
+  transition: medium;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+
+  &:hover > * {
+    cursor: pointer;
+  }
+`, N = g.li(
+  ({
+    allowUnselectFromList: e,
+    isDisabled: t,
+    isHighlighted: n,
+    isMultiple: l,
+    isSelected: a
+  }) => D`
+    color: beige-70;
+    ${n && u("defaultFields.select.highlighted")};
+    ${a && !l && u("defaultFields.select.selected")};
+    ${a && l && !e && u("defaultFields.select.existing")};
+    ${t && u("defaultFields.select.disabled")};
+    ${j};
+    padding: md;
+    list-style: none;
+    text-decoration: none;
+    font-size: sm;
+    transition: background ${u.transition("medium")};
+  `
+), ut = g.divBox(
+  ({ size: e }) => D`
+    position: absolute;
+    padding: 0;
+    top: 0;
+    bottom: 0;
+    right: ${e === "xs" ? "sm" : "md"};
+    display: flex;
+    gap: xs;
+  `
+), ge = g.button.withConfig({ shouldForwardProp: q })(
+  ({ isOpen: e }) => D`
+    position: relative;
+    height: 100%;
+    padding: 0;
+    outline: none !important; /* important for firefox */
+    appearance: none;
+    cursor: pointer;
+    border: none;
+    background: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    ${Ke} {
+      transform: ${e ? "rotate3d(0, 0, 1, 180deg)" : "rotate3d(0)"};
+      transition: medium;
+    }
+
+    &:not(:last-child) {
+      width: auto;
+    }
+
+    &:disabled {
+      color: ${u("defaultFields.select.disabled.color")};
+    }
+  `
+), pt = g.divBox`
+  margin-top: lg;
+
+  ${/* sc-selector */
+Qe}:not(:last-child) {
+    margin-right: sm;
+    margin-bottom: sm;
+  }
+
+  &:empty {
+    display: none;
+  }
+`;
+function gt(e, t) {
+  return /* @__PURE__ */ i.createElement(pt, { role: "list" }, e.map((n) => /* @__PURE__ */ i.createElement(Xe, { key: n.value, onRemove: () => t(n.value.toString()), role: "listitem" }, n.label)));
+}
+const ht = de.default || de, Rt = Ge(
+  ({
+    allowUnselectFromList: e,
+    autoComplete: t = "off",
+    autoFocus: n,
+    dataTestId: l,
+    disableCloseOnSelect: a,
+    disabled: h,
+    groupsEnabled: x,
+    icon: F,
+    id: L,
+    isClearable: Y,
+    isCreatable: _,
+    isMultiple: d,
+    isSearchable: f,
+    name: J,
+    onBlur: ye,
+    onChange: Q,
+    onClick: X,
+    onCreate: O,
+    onFocus: we,
+    options: c = [],
+    placeholder: U = "Choose from…",
+    renderCreateItem: Ee = (y) => `Create "${y}"`,
+    renderGroupHeader: $e,
+    renderItem: Z = fe,
+    renderMultiple: ke = gt,
+    size: R = "md",
+    transparent: xe,
+    value: M,
+    variant: Se,
+    ...ee
+  }, S) => {
+    const y = He(
+      () => rt(M, c, x),
+      [M, c, x]
+    ), z = !d && y[0] || null, W = z ? z.label : "", [v, B] = T(y), [p, C] = T(W), [V, A] = T(c), [I, w] = T(!1);
+    f = _ || f, ce(() => {
+      var o;
+      n && ((o = S == null ? void 0 : S.current) == null || o.focus(), f && w(!0));
+    }, [f, n, S]), ce(() => {
+      B(y), C(W), A(c);
+    }, [W, c, y]);
+    const Ce = (o) => {
+      if (f && o !== p) {
+        let r = [];
+        x ? r = me(c, o, {
+          // should match on group.label OR group.options.label
+          keys: [(s) => s.label, (s) => s.options.map((E) => E.label)]
+        }) : r = me(c, o, { keys: ["label"] }), C(o), A(r);
+      }
+    }, De = () => {
+      f && !I && w(!0);
+    }, te = (o) => {
+      let r = [];
+      x ? r = ue(
+        o,
+        c.flatMap(($) => $.options)
+      ) : r = ue(o, c);
+      const s = d ? r : r[0], E = Le({ name: J, value: d ? o : o[0] });
+      if (Q && Q(s, E), _) {
+        const $ = ct(o, c);
+        $.length && O && O($[0].label, E);
+      }
+    }, Fe = (o) => {
+      let r, s;
+      !o || o != null && o.disabled ? (r = d ? v : [], s = !0) : (r = d ? it(o, v, e) : [o], s = d), s && C(""), A(c), B(r), te(r), a || w(!1);
+    }, Re = (o) => {
+      const r = v.filter((s) => s.value !== o);
+      B(r), te(r);
+    }, Ve = (o) => {
+      d && o.selectedItem ? C("") : f && o.selectedItem && C(o.selectedItem.label), A(c), w(!1);
+    }, Ae = lt(c), ne = dt({
+      inputValue: p,
+      isMultiple: d,
+      isSearchable: f,
+      options: c,
+      renderItem: Z
+    });
+    return /* @__PURE__ */ i.createElement(
+      ht,
+      {
+        id: L,
+        inputValue: f ? ne : "",
+        isOpen: I,
+        itemToString: fe,
+        onInputValueChange: Ce,
+        onOuterClick: Ve,
+        onSelect: Fe,
+        selectedItem: z
+      },
+      ({
+        clearSelection: o,
+        getInputProps: r,
+        getItemProps: s,
+        getMenuProps: E,
+        getRootProps: $,
+        getToggleButtonProps: Te,
+        highlightedIndex: P
+      }) => {
+        const oe = !!(_ && p && !H(p, v)), _e = I && (V.length || oe), Ze = Y && p, ze = /* @__PURE__ */ i.createElement(ge, { as: "div" }, /* @__PURE__ */ i.createElement(
+          qe,
+          {
+            onClick: o
+          }
+        )), We = /* @__PURE__ */ i.createElement(
+          ge,
+          {
+            "data-testid": l && `${l}-arrow-icon`,
+            disabled: h,
+            isOpen: I,
+            size: R,
+            tabIndex: -1,
+            ...Te({
+              onClick: () => w(!I)
+            })
+          },
+          /* @__PURE__ */ i.createElement(ot, { size: "sm" })
+        ), Be = (k) => {
+          X && X(k), w(!I);
+        }, Pe = $(ee), le = r({
+          autoComplete: t,
+          autoFocus: n,
+          "data-spacer": Ae || U,
+          "data-testid": l,
+          disabled: h,
+          iconPlacement: F ? "both" : "right",
+          id: L,
+          name: J,
+          onBlur: ye,
+          onClick: h ? void 0 : Be,
+          onFocus: we,
+          onKeyDown: De,
+          placeholder: U,
+          ref: S,
+          size: R,
+          tabIndex: 0,
+          variant: I ? "focused" : Se,
+          isClearable: Y,
+          transparent: xe,
+          ...ee
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        }), ie = Je[R];
+        return /* @__PURE__ */ i.createElement(Ie, { ...Pe, disabled: h }, /* @__PURE__ */ i.createElement(mt, null, f ? /* @__PURE__ */ i.createElement(pe, { as: "input", type: "text", ...le }) : /* @__PURE__ */ i.createElement(pe, { ...le }, ne), F && /* @__PURE__ */ i.createElement(ve, { iconPlacement: "left", size: ie }, i.cloneElement(F, { ...F.props, size: ie })), /* @__PURE__ */ i.createElement(ut, { size: R }, Ze && ze, We)), _e && /* @__PURE__ */ i.createElement(ft, { ...E() }, V.reduce(
+          (k, m, re) => {
+            if (x && "options" in m)
+              k.itemsToRender.push(
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                /* @__PURE__ */ i.createElement(Ne, { key: m.label }, $e(m), m.options && m.options.map((b) => {
+                  const ae = k.itemIndex++, se = H(b.value, v);
+                  return /* @__PURE__ */ i.createElement(
+                    N,
+                    {
+                      allowUnselectFromList: e,
+                      isDisabled: b.disabled,
+                      isHighlighted: P === ae,
+                      isMultiple: d,
+                      key: b.value,
+                      ...s({
+                        index: ae,
+                        isSelected: se,
+                        item: b
+                      })
+                    },
+                    Z(b, se)
+                  );
+                }))
+              );
+            else if ("value" in m) {
+              const b = H(m.value, v);
+              k.itemsToRender.push(
+                /* @__PURE__ */ i.createElement(
+                  N,
+                  {
+                    allowUnselectFromList: e,
+                    isDisabled: m.disabled,
+                    isHighlighted: P === re,
+                    isMultiple: d,
+                    key: m.value,
+                    ...s({
+                      index: re,
+                      isSelected: b,
+                      item: m
+                    })
+                  },
+                  Z(m, b)
+                )
+              );
+            }
+            return k;
+          },
+          { itemsToRender: [], itemIndex: 0 }
+        ).itemsToRender, oe && p.length && /* @__PURE__ */ i.createElement(
+          N,
+          {
+            isHighlighted: P === V.length,
+            key: "add",
+            ...s({
+              index: V.length,
+              item: {
+                value: be(p),
+                label: p
+              }
+            })
+          },
+          Ee(p)
+        )), d && ke(v, Re));
+      }
+    );
+  }
+), Vt = Ie;
+export {
+  ot as D,
+  Vt as S,
+  Rt as a
+};

package/dist/index-D3Tnfi3U.mjs

@@ -0,0 +1,83 @@
+"use client";
+import e from "react";
+import { Icon as u } from "./Icon.mjs";
+import { V as g } from "./index-DRa_xux4.mjs";
+import { shouldForwardProp as w, forwardRef as y } from "./System.mjs";
+import { w as b } from "./wrap-children-aq69jtFP.mjs";
+import i, { css as n, th as v, system as x } from "@xstyled/styled-components";
+const C = 15, L = 15, k = '<path fill="currentColor" fill-rule="evenodd" d="M35.9 26.628a2.476 2.476 0 0 1-2.48 2.474 2.476 2.476 0 0 1-2.478-2.474c0-11.852 8.878-21.949 20.648-23.483 4.92-.64 9.877.864 13.604 4.13a17.208 17.208 0 0 1 5.863 12.934 2.476 2.476 0 0 1-2.478 2.475 2.476 2.476 0 0 1-2.479-2.475c0-3.528-1.522-6.887-4.178-9.214a12.279 12.279 0 0 0-9.69-2.942C42.92 9.268 35.9 17.253 35.9 26.628Zm47.606 3.416c-1.585-1.387-3.74-2.02-5.926-1.733l-53.811 7.1C19.412 35.985 16 39.872 16 44.26v45.302c0 2.196.91 4.251 2.496 5.64C19.828 96.369 21.568 97 23.383 97c.343 0 .689-.021 1.036-.068l53.81-7.099C82.588 89.26 86 85.372 86 80.983V35.68c0-2.194-.91-4.25-2.494-5.636Zm-2.463 50.938c0 1.857-1.62 3.7-3.463 3.944l-53.811 7.1c-.772.102-1.486-.091-2.006-.547-.52-.454-.806-1.134-.806-1.916V44.261c0-1.856 1.62-3.7 3.462-3.944l53.81-7.099a3.04 3.04 0 0 1 .4-.026c.62 0 1.18.198 1.61.572.518.456.804 1.136.804 1.916v45.302ZM58.529 49.67c-2.099-1.873-4.873-2.72-7.811-2.386-5.782.656-10.485 5.894-10.485 11.675 0 2.916 1.15 5.545 3.236 7.406 1.152 1.025 2.52 1.707 3.99 2.091v7.1a3.538 3.538 0 0 0 3.54 3.536 3.54 3.54 0 0 0 3.542-3.535v-7.703c4.19-1.851 7.225-6.137 7.225-10.78 0-2.914-1.15-5.545-3.237-7.404Z" clip-rule="evenodd"/>', E = {
+  width: C,
+  height: L,
+  block: k
+}, V = (t) => /* @__PURE__ */ e.createElement(u, { alt: "Lock", content: E, ...t }), s = i("label").withConfig({ shouldForwardProp: w })(
+  ({ required: t }) => n`
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    max-width: 100%;
+    align-items: center;
+    line-height: lg;
+    ${v("labels")};
+    ${x};
+    user-select: none;
+
+    > * {
+      &:not(:last-child) {
+        margin-right: sm;
+      }
+
+      :last-child {
+        ${t && Z};
+      }
+    }
+  `
+), Z = n`
+  &::after {
+    content: '*';
+    margin-left: xs;
+    /* It prevents the element to shift the layout and it allows us to put it properly on top with super */
+    line-height: 0;
+    vertical-align: super;
+    font-size: subtitle-sm;
+    font-weight: bold;
+    color: primary-40;
+  }
+`, _ = i.div`
+  display: inline-flex;
+  margin-right: xs;
+`, $ = y(
+  ({
+    checkableField: t,
+    children: a,
+    dataTestId: c,
+    disabled: l,
+    disabledIcon: o,
+    icon: m,
+    variant: r,
+    withDisabledIcon: h = !0,
+    ...d
+  }, p) => {
+    const f = b(a);
+    return /* @__PURE__ */ e.createElement(
+      s,
+      {
+        "data-testid": c,
+        disabled: l,
+        disabledIcon: o,
+        ref: p,
+        variant: r,
+        ...d
+      },
+      !t && /* @__PURE__ */ e.createElement(g, { icon: m, size: "sm", variant: r }),
+      l && h && /* @__PURE__ */ e.createElement(_, null, o || /* @__PURE__ */ e.createElement(V, { size: "sm" })),
+      f
+    );
+  }
+);
+$.displayName = "Label";
+const D = s;
+export {
+  $ as L,
+  D as S,
+  V as a
+};

package/dist/index-DCOLdphy.mjs

@@ -0,0 +1,184 @@
+"use client";
+import U, { createContext as B, useState as Z, useRef as z, useEffect as D } from "react";
+import { shouldForwardProp as H, forwardRef as O } from "./System.mjs";
+import V, { css as _, th as C, system as W } from "@xstyled/styled-components";
+import { d as q } from "./field-styles-CeV7pnOp.mjs";
+import { n as G, c as I, f as J, _ as K, k as Q, o as X, y as Y, e as E, E as ee, h as te, j as re, a as y, z as ne, b as ae, m as oe } from "./LVA2YJMS-Dm5ieEMw.mjs";
+import { u as ie } from "./KUU7WJ55-bC4FU_j7.mjs";
+import { u as ce } from "./YV4JVR4I-1ezWeCCz.mjs";
+var de = B(!1), se = G(), le = se.useContext, L = "input";
+function F(t, n) {
+  n ? t.indeterminate = !0 : t.indeterminate && (t.indeterminate = !1);
+}
+function ue(t, n) {
+  return t === "input" && (!n || n === "checkbox");
+}
+function A(t) {
+  return Array.isArray(t) ? t.toString() : t;
+}
+var fe = I(
+  function(n) {
+    var c = n, {
+      store: o,
+      name: d,
+      value: a,
+      checked: l,
+      defaultChecked: p
+    } = c, r = K(c, [
+      "store",
+      "name",
+      "value",
+      "checked",
+      "defaultChecked"
+    ]);
+    const x = le();
+    o = o || x;
+    const [g, u] = Z(p ?? !1), f = ce(o, (e) => {
+      if (l !== void 0) return l;
+      if ((e == null ? void 0 : e.value) === void 0) return g;
+      if (a != null) {
+        if (Array.isArray(e.value)) {
+          const m = A(a);
+          return e.value.includes(m);
+        }
+        return e.value === a;
+      }
+      return Array.isArray(e.value) ? !1 : typeof e.value == "boolean" ? e.value : !1;
+    }), b = z(null), R = Q(b, L), i = ue(R, r.type), v = f ? f === "mixed" : void 0, h = f === "mixed" ? !1 : f, S = X(r), [T, N] = Y();
+    D(() => {
+      const e = b.current;
+      e && (F(e, v), !i && (e.checked = h, d !== void 0 && (e.name = d), a !== void 0 && (e.value = `${a}`)));
+    }, [T, v, i, h, d, a]);
+    const w = r.onChange, $ = E((e) => {
+      if (S) {
+        e.stopPropagation(), e.preventDefault();
+        return;
+      }
+      if (F(e.currentTarget, v), i || (e.currentTarget.checked = !e.currentTarget.checked, N()), w == null || w(e), e.defaultPrevented) return;
+      const m = e.currentTarget.checked;
+      u(m), o == null || o.setValue((s) => {
+        if (a == null) return m;
+        const k = A(a);
+        return Array.isArray(s) ? m ? s.includes(k) ? s : [...s, k] : s.filter((M) => M !== k) : s === k ? !1 : k;
+      });
+    }), P = r.onClick, j = E((e) => {
+      P == null || P(e), !e.defaultPrevented && (i || $(e));
+    });
+    return r = ee(
+      r,
+      (e) => /* @__PURE__ */ oe.jsx(de.Provider, { value: h, children: e }),
+      [h]
+    ), r = te(y({
+      role: i ? void 0 : "checkbox",
+      type: i ? "checkbox" : void 0,
+      "aria-checked": f
+    }, r), {
+      ref: re(b, r.ref),
+      onChange: $,
+      onClick: j
+    }), r = ie(y({ clickOnEnter: !i }, r)), ne(y({
+      name: i ? d : void 0,
+      value: i ? a : void 0,
+      checked: h
+    }, r));
+  }
+), he = J(function(n) {
+  const c = fe(n);
+  return ae(L, c);
+});
+const me = V(he).withConfig({
+  shouldForwardProp: H
+})(
+  ({ indeterminate: t, order: n = "-1", size: c, theme: o, variant: d }) => _`
+    ${q({ size: c, variant: d })};
+    ${C("checkboxes.default")}
+    position: relative;
+    padding: 0;
+    order: ${n};
+    cursor: pointer;
+    transition: medium;
+    overflow: hidden;
+    ${W};
+
+    &[aria-checked='true'] {
+      &:not([disabled]) {
+        ${C("checkboxes.checked")};
+      }
+
+      &:not([indeterminate]) {
+        &::after {
+          content: url(${`'data:image/svg+xml; utf8, <svg viewBox="0 0 10 8" xmlns="http://www.w3.org/2000/svg"><path fill="${o.defaultFields.checkableField.checked.color}" d="M7.96171 0.596898C8.24912 0.27893 8.74024 0.25262 9.06024 0.537743C9.37208 0.815607 9.40671 1.28712 9.14514 1.60662L9.11975 1.63611L3.90331 7.40311C3.75365 7.5687 3.54304 7.66003 3.32401 7.66003C3.15017 7.66003 2.98077 7.60235 2.84241 7.49383L2.80848 7.46564L0.943652 5.82577C0.620151 5.54147 0.590221 5.04928 0.877091 4.72749C1.15398 4.41772 1.62383 4.38076 1.94536 4.6368L1.97506 4.66166L3.26156 5.79276L7.96171 0.596898Z" /></svg>'`});
+          position: absolute;
+          top: -2;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          width: 10;
+          margin: auto;
+          text-align: center;
+        }
+      }
+    }
+
+    ${t && _`
+      &:not([disabled]) {
+        ${C("checkboxes.checked")};
+      }
+
+      /* stylelint-disable string-no-newline */
+      &::after {
+        content: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 10 4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.3973 1.76919C0.953776 1.81988 0.634816 2.04775 0.685235 2.49156C0.732149 2.90436 1.08212 3.03624 1.48789 3.03624L8.6029 2.23086C9.04669 2.18017 9.36538 1.9523 9.31469 1.50849C9.26427 1.06468 8.86389 0.917163 8.41956 0.969201C4.90971 1.38026 4.90828 1.36792 1.3973 1.76919Z' fill='${o.defaultFields.checkableField.checked.color}'/%3E%3C/svg%3E");
+        position: absolute;
+        top: -3.5;
+        right: 0;
+        bottom: 0;
+        left: 2;
+        margin: auto;
+      }
+    `}
+
+    &[disabled] {
+      ${C("checkboxes.disabled")}
+
+      &::after {
+        opacity: ${o.defaultFields.checkableField.disabled.opacity};
+      }
+    }
+  `
+), ke = O(
+  ({
+    checked: t = !1,
+    Component: n = me,
+    dataTestId: c,
+    disabled: o,
+    indeterminate: d = !1,
+    name: a,
+    onChange: l,
+    size: p,
+    ...r
+  }, x) => {
+    const g = (u) => {
+      u.target.checked = !u.target.checked, l && l(u);
+    };
+    return /* @__PURE__ */ U.createElement(
+      n,
+      {
+        checked: t,
+        "data-testid": c,
+        disabled: o,
+        id: a,
+        indeterminate: d,
+        name: a,
+        onChange: g,
+        ref: x,
+        size: p,
+        ...r
+      }
+    );
+  }
+);
+ke.displayName = "Checkbox";
+export {
+  he as C,
+  ke as a
+};