asma-ui-core 3.18.0 → 3.20.0

package/dist/components/inputs/dynamic-select/components/DynamicInteractiveChipGroup.js

@@ -0,0 +1,125 @@
+import { cn as w } from "../../../../helpers/cn.js";
+import { CloseIcon as j } from "../../../icons/close-icon/CloseIcon.js";
+import { ErrorOutlineIcon as W } from "../../../icons/error-outline-icon/ErrorOutlineIcon.js";
+import { StyledChip as H } from "../../../data-display/chip/StyledChip.js";
+import { StyledInteractiveChip as O } from "../../../data-display/interactive-chip/StyledInteractiveChip.js";
+import { StyledTooltip as J } from "../../../data-display/tooltip/StyledTooltip.js";
+import { StyledButton as M } from "../../button/StyledButton.js";
+import { useWrap as P } from "../helpers/useWrap.js";
+import { Skeleton as y } from "../../../../index.js";
+import { forwardRef as Q } from "react";
+import { jsx as t, jsxs as v } from "react/jsx-runtime";
+var ie = Q((S, I) => {
+  const { options: d, dataTest: V, value: r, readOnly: n, multiple: i, title: N, disabled: T, onChange: f, required: R, error: h, helperText: $, valueKey: q = "value", labelKey: z = "label", renderLabel: o, getOptionTooltip: k, loading: A, size: x, locale: B = "en" } = S, { containerRef: D, wrapDisabled: b } = P({ dependencyList: [d, d.length] }), p = (e) => typeof e == "object" ? e?.[z]?.toString() ?? "" : e?.toString() ?? "", g = (e) => typeof e == "object" ? e?.[q] : e, c = (e) => {
+    const l = g(e);
+    return l == null ? "" : typeof l == "string" || typeof l == "number" || typeof l == "boolean" ? String(l) : e == null ? "" : p(e);
+  }, s = (e, l) => g(e) === g(l), L = i ? Array.isArray(r) && r.length > 0 : r != null, E = (e) => {
+    if (!i) {
+      const a = s(e, r) ? null : e;
+      if (a === null) return;
+      f(a);
+      return;
+    }
+    const l = r ?? [];
+    f(l.find((a) => s(a, e)) ? l.filter((a) => !s(a, e)) : [...l, e]);
+  }, m = n ? d.filter((e) => !!(i ? r?.find((l) => s(l, e)) : s(r, e))) : d, K = m.findIndex((e) => !(typeof e == "object" && e?.disabled) && !n);
+  return /* @__PURE__ */ v("div", {
+    "data-testid": `${V}-dynamic-radio-group`,
+    className: "relative flex flex-col gap-y-1",
+    children: [
+      N && /* @__PURE__ */ t("span", {
+        className: "text-base font-semibold text-delta-800",
+        children: N
+      }),
+      /* @__PURE__ */ t("div", {
+        "aria-hidden": !0,
+        ref: D,
+        className: "pointer-events-none absolute left-0 top-0 flex flex-wrap gap-2 text-sm opacity-0",
+        style: { width: "100%" },
+        children: m.map((e) => /* @__PURE__ */ t(O, {
+          className: "w-fit",
+          readOnly: n,
+          type: i ? "checkbox" : "radio",
+          dataTest: `ic-${c(e)}-hidden`,
+          label: o ? o(e) : p(e)
+        }, c(e)))
+      }),
+      /* @__PURE__ */ t("div", {
+        className: w("flex flex-wrap gap-2", b && "flex-col gap-1"),
+        children: A ? /* @__PURE__ */ v("div", {
+          className: "flex flex-wrap gap-2",
+          children: [
+            /* @__PURE__ */ t(y, { className: "h-[32px] w-[60px]" }),
+            /* @__PURE__ */ t(y, { className: "h-[32px] w-[60px]" }),
+            /* @__PURE__ */ t(y, { className: "h-[32px] w-[60px]" })
+          ]
+        }) : m?.length ? m.map((e, l) => {
+          const a = !!(i ? r?.find((G) => s(G, e)) : s(r, e)), F = k ? k(e) : null;
+          if (n && !a) return null;
+          const u = typeof e == "object" ? !!e?.disabled : !1, C = !u && !n && l === K ? I : void 0;
+          return /* @__PURE__ */ t(J, {
+            title: F,
+            arrow: !0,
+            children: /* @__PURE__ */ t("span", {
+              className: w(u && "cursor-not-allowed"),
+              children: n && !b ? /* @__PURE__ */ t(H, {
+                ref: C,
+                disabled: !!T || u,
+                classes: { root: "min-h-[32px] h-full" },
+                className: "w-fit text-sm",
+                dataTest: `ic-${c(e)}`,
+                label: o ? o(e) : p(e)
+              }) : /* @__PURE__ */ t(O, {
+                ref: C,
+                disabled: !!T || u,
+                classes: b ? {
+                  root: "border-none outline-none bg-transparent w-full flex justify-start h-full min-h-[40px] shadow-none",
+                  label: "block whitespace-normal break-words overflow-visible"
+                } : { root: "min-h-[32px] h-full" },
+                className: "w-fit text-sm",
+                readOnly: n,
+                type: i ? "checkbox" : "radio",
+                dataTest: `ic-${c(e)}`,
+                checked: a,
+                size: x,
+                onClick: () => E(e),
+                label: o ? o(e) : p(e)
+              })
+            })
+          }, c(e));
+        }) : /* @__PURE__ */ t("span", { children: "-" })
+      }),
+      !R && L && !n && /* @__PURE__ */ t(M, {
+        dataTest: "clear-selection-btn",
+        variant: "text",
+        startIcon: x === "medium" ? /* @__PURE__ */ t(j, {
+          height: 24,
+          width: 24,
+          className: "size-6"
+        }) : /* @__PURE__ */ t(j, {
+          height: 20,
+          width: 20,
+          className: "size-5"
+        }),
+        className: "w-fit",
+        size: x,
+        onClick: () => f(i ? [] : null),
+        children: B === "en" ? "Clear selection" : "Fjern valget"
+      }),
+      /* @__PURE__ */ v("div", {
+        className: w("flex items-center gap-1 text-sm/5 text-delta-600", h && "text-error-500"),
+        children: [h && /* @__PURE__ */ t(W, {
+          width: 20,
+          height: 20,
+          className: "min-w-5"
+        }), /* @__PURE__ */ t("span", {
+          className: "line-clamp-1",
+          children: $ ?? (h ? "Required" : void 0)
+        })]
+      })
+    ]
+  });
+});
+export {
+  ie as DynamicInteractiveChipGroup
+};

package/dist/components/inputs/dynamic-select/components/DynamicSelectAutocomplete.js

@@ -0,0 +1,163 @@
+import { cn as D } from "../../../../helpers/cn.js";
+import { LoadingIcon as Q } from "../../../icons/loading-icon/LoadingIcon.js";
+import { CheckIcon as U } from "../../../icons/check-icon/CheckIcon.js";
+import { PlusIconCircle as X } from "../../../icons/plus-icon-circle/PlusIconCircle.js";
+import { StyledChip as j } from "../../../data-display/chip/StyledChip.js";
+import { StyledTooltip as A } from "../../../data-display/tooltip/StyledTooltip.js";
+import { StyledCheckbox as Y } from "../../checkbox/base-ui/StyledCheckbox.js";
+import { StyledInputField as Z } from "../../input-field/StyledInputField.js";
+import { StyledSelectAutocomplete as ee } from "../../select-autocomplete/StyledSelectAutocomplete.js";
+import { DynamicInteractiveChipGroup as te } from "./DynamicInteractiveChipGroup.js";
+import { createElement as L, forwardRef as le, useCallback as b, useState as ae } from "react";
+import { Fragment as V, jsx as l, jsxs as x } from "react/jsx-runtime";
+var ge = le((v, $) => {
+  const [q, w] = ae(!1), { options: y, dataTest: O, value: d, readOnly: u, multiple: n, required: B, onChange: m, size: E, title: S, noOptionsText: z, placeholder: F, disabled: k, helperText: K, disableHelperText: H, error: R, valueKey: I = "value", labelKey: G = "label", renderLabel: i, getOptionTooltip: N, startAdornment: W, autocompleteProps: r, loading: p, maxTags: _ } = v, f = y.length < 11, s = (e) => typeof e == "object" ? e?.[G]?.toString() ?? "" : e?.toString() ?? "", h = b((e) => typeof e == "object" ? e?.[I] : e, [I]), g = b((e, t) => h(e) === h(t), [h]), C = (e) => {
+    const t = h(e);
+    return t == null ? "" : typeof t == "string" || typeof t == "number" || typeof t == "boolean" ? String(t) : e == null ? "" : s(e);
+  }, P = b((e) => {
+    w(!0), r?.onOpen?.(e);
+  }, [r]), J = b((e, t) => {
+    w(!1), r?.onClose?.(e, t);
+  }, [r]);
+  return n && u ? /* @__PURE__ */ l(te, { ...v }) : /* @__PURE__ */ x("div", {
+    className: "flex w-full flex-col gap-y-1",
+    children: [S && /* @__PURE__ */ l("span", {
+      className: "text-base font-semibold text-delta-800",
+      children: S
+    }), /* @__PURE__ */ l(ee, {
+      open: q,
+      onOpen: P,
+      onClose: J,
+      disableCloseOnSelect: n,
+      dataTest: O,
+      disabled: !!k || !!p,
+      noOptionsText: z,
+      loading: p,
+      readOnly: u,
+      value: d,
+      size: E,
+      disableClearable: B,
+      options: y,
+      fullWidth: !0,
+      classes: { listbox: "h-full max-h-[300px]" },
+      getOptionLabel: r?.getOptionLabel ?? s,
+      onChange: (e, t) => {
+        m(t);
+      },
+      filterSelectedOptions: !1,
+      isOptionEqualToValue: r?.isOptionEqualToValue ?? g,
+      autoHeight: !0,
+      multiple: n,
+      renderTags: (e) => {
+        const t = _ ?? y.length, a = e.slice(0, t), c = e.length - t;
+        return /* @__PURE__ */ x("div", {
+          className: "flex flex-wrap gap-2",
+          children: [a.map((o) => /* @__PURE__ */ l(j, {
+            dataTest: `${C(o)}-chip`,
+            readOnly: u,
+            variant: "outlined",
+            label: i ? i(o) : s(o),
+            classes: {
+              root: "h-fit w-fit min-h-[32px]",
+              label: "block whitespace-normal"
+            },
+            disabled: !!k || !!p,
+            onDelete: () => {
+              if (!n) {
+                m(null);
+                return;
+              }
+              m(d.filter((T) => !g(T, o)));
+            }
+          }, C(o))), c > 0 && /* @__PURE__ */ l(j, {
+            dataTest: "remaining-count-tag-chip",
+            label: `+${c}`,
+            variant: "outlined",
+            onClick: P
+          })]
+        });
+      },
+      popupIcon: p ? /* @__PURE__ */ l(Q, {
+        height: 24,
+        width: 24
+      }) : n ? /* @__PURE__ */ l(X, {
+        height: 24,
+        width: 24
+      }) : void 0,
+      renderOption: (e, t) => {
+        const a = typeof t == "object" ? !!t?.disabled : !1, c = N ? N(t) : null;
+        if (n) {
+          const T = !!d?.find((M) => g(M, t));
+          return /* @__PURE__ */ L("li", {
+            ...e,
+            key: e.id,
+            onClick: a ? void 0 : e.onClick,
+            className: D("flex h-full cursor-pointer gap-x-1 bg-white text-sm/5 hover:bg-gama-50", a && "cursor-not-allowed bg-delta-50 hover:bg-delta-50"),
+            "aria-disabled": a
+          }, /* @__PURE__ */ l(A, {
+            arrow: !0,
+            title: c,
+            children: /* @__PURE__ */ x(V, { children: [/* @__PURE__ */ l(Y, {
+              disabled: a,
+              dataTest: `${C(t)}-checkbox`,
+              size: "small",
+              className: "min-w-[36px]",
+              checked: T
+            }), i ? i(t) : /* @__PURE__ */ l("span", {
+              className: "h-fit py-[10px] text-sm text-delta-700",
+              children: s(t)
+            })] })
+          }));
+        }
+        const o = g(d, t);
+        return /* @__PURE__ */ L("li", {
+          ...e,
+          key: e.id,
+          className: D("flex h-full cursor-pointer gap-x-1 px-2 text-sm/5 hover:bg-gama-50", a && "cursor-not-allowed bg-delta-50 hover:bg-delta-50"),
+          onClick: a ? void 0 : e.onClick,
+          "aria-disabled": a
+        }, /* @__PURE__ */ l(A, {
+          arrow: !0,
+          title: c,
+          children: /* @__PURE__ */ x(V, { children: [/* @__PURE__ */ l("span", {
+            className: "h-full w-5 min-w-5 py-[10px]",
+            children: o && /* @__PURE__ */ l(U, {
+              className: "size-5 min-h-5 min-w-5 text-gama-500",
+              height: 20,
+              width: 20
+            })
+          }), i ? i(t) : /* @__PURE__ */ l("span", {
+            className: "py-[10px] text-sm text-delta-700",
+            children: s(t)
+          })] })
+        }));
+      },
+      renderInput: (e) => /* @__PURE__ */ l(Z, {
+        dataTest: `${O}-input-field`,
+        ...e,
+        inputRef: $,
+        error: R,
+        helperText: H ? "" : K ?? " ",
+        variant: "outlined",
+        label: "",
+        placeholder: F,
+        readOnly: u,
+        onKeyDown: f ? (t) => t.preventDefault() : void 0,
+        autoComplete: f ? "off" : "on",
+        InputProps: {
+          ...e.InputProps,
+          startAdornment: W ?? e.InputProps.startAdornment,
+          style: f ? { caretColor: "transparent" } : {}
+        },
+        inputProps: {
+          ...e.inputProps,
+          style: f ? { caretColor: "transparent" } : {}
+        }
+      }),
+      ...r
+    })]
+  });
+});
+export {
+  ge as DynamicSelectAutocomplete
+};

package/dist/components/inputs/dynamic-select/helpers/useWrap.js

@@ -0,0 +1,24 @@
+import { useLayoutEffect as h, useRef as p, useState as b } from "react";
+var m = ({ dependencyList: c = [] }) => {
+  const s = p(null), [l, a] = b(!1);
+  return h(() => {
+    const r = s.current;
+    if (!r) return;
+    const u = () => {
+      const n = Array.from(r.children).some((e) => {
+        const t = e.querySelector(".MuiChip-label");
+        if (!t) return !1;
+        const i = e.querySelector(".MuiButtonBase-root"), f = t.scrollWidth > r.clientWidth, d = i ? t.scrollHeight > i.clientHeight : !1;
+        return f || d;
+      });
+      a((e) => e !== n ? n : e);
+    }, o = new ResizeObserver(u);
+    return o.observe(r), () => o.disconnect();
+  }, [...c]), {
+    wrapDisabled: l,
+    containerRef: s
+  };
+};
+export {
+  m as useWrap
+};

package/dist/components/inputs/input-field/StyledInputField.js

@@ -0,0 +1,77 @@
+import { CloseIcon as s } from "../../icons/close-icon/CloseIcon.js";
+import { ErrorOutlineIcon as p } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
+import { TextField as c } from "@mui/material";
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+var h = ({ allowClear: l, onClear: n, readOnly: t, disabled: u, error: e, helperText: a, dataTest: d, ...r }) => /* @__PURE__ */ o(c, {
+  ...r,
+  "data-testid": d,
+  disabled: (u ?? !1) || (t ?? !1),
+  error: e,
+  helperText: t ? null : e ? /* @__PURE__ */ m("div", {
+    className: "flex items-center gap-1",
+    children: [/* @__PURE__ */ o(p, {
+      width: 20,
+      height: 20,
+      className: "min-w-5"
+    }), a ?? "Required"]
+  }) : a,
+  type: r.type ?? "mui-input",
+  InputProps: {
+    ...r.InputProps,
+    endAdornment: l && r.value ? /* @__PURE__ */ o("div", {
+      role: "button",
+      className: "absolute right-4 z-40 flex items-center justify-center rounded-full p-[2px] duration-300 hover:bg-gama-100",
+      onClick: (i) => {
+        i.stopPropagation(), i.preventDefault(), n?.();
+      },
+      children: /* @__PURE__ */ o(s, {
+        width: 18,
+        height: 18
+      })
+    }) : r.InputProps?.endAdornment
+  },
+  sx: {
+    "& input:-webkit-autofill, & .MuiInputBase-root:has(> input:-webkit-autofill)": { backgroundColor: "#e8f0fe !important" },
+    "& input": { backgroundColor: "transparent" },
+    "& .MuiInputBase-root": { backgroundColor: "transparent" },
+    "& .MuiInputBase-colorPrimary fieldset": { borderColor: "var(--colors-delta-500) !important" },
+    "& .MuiInputBase-colorPrimary.Mui-focused fieldset": { borderColor: "var(--colors-gama-400) !important" },
+    "& .MuiInputBase-colorPrimary.Mui-focused::after": { borderColor: "var(--colors-gama-400) !important" },
+    "& .MuiInputBase-colorPrimary.Mui-focused:hover fieldset": { borderColor: "var(--colors-gama-400) !important" },
+    "& .MuiInputBase-colorPrimary:hover fieldset": {
+      borderColor: "var(--colors-gama-300) !important",
+      borderWidth: "2px !important"
+    },
+    "& .MuiInputBase-colorPrimary.Mui-disabled:hover fieldset": { borderWidth: "1px !important" },
+    "& .MuiInputBase-colorPrimary.Mui-error fieldset": { borderColor: "var(--colors-error-500) !important" },
+    "& .MuiInputBase-colorPrimary.Mui-error:hover fieldset": { borderColor: "var(--colors-error-500) !important" },
+    "& .MuiFormHelperText-root": {
+      fontSize: "14px",
+      marginLeft: 0
+    },
+    "& .MuiFormHelperText-root.Mui-error": { color: "var(--colors-error-500) !important" },
+    "& .MuiInputBase-colorPrimary.Mui-disabled fieldset": { borderColor: "var(--colors-delta-300) !important" },
+    "& label.Mui-focused": { color: "var(--colors-gama-500) !important" },
+    "& label.Mui-error": { color: "var(--colors-error-500) !important" },
+    "& label.Mui-focused.MuiInputLabel-shrink": { color: "var(--colors-gama-500) !important" },
+    "& label.Mui-error.MuiInputLabel-shrink": { color: "var(--colors-error-500) !important" },
+    "& label": { color: "var(--colors-delta-500) !important" },
+    "& label.MuiInputLabel-shrink": { color: "var(--colors-delta-800) !important" },
+    "& label.Mui-disabled": { color: "var(--colors-gray-300) !important" },
+    "& .MuiOutlinedInput-input::placeholder": {
+      color: "var(--colors-delta-500) !important",
+      opacity: "1 !important"
+    },
+    "& .MuiOutlinedInput-input.Mui-disabled": { WebkitTextFillColor: "var(--colors-delta-300) !important" },
+    ...t && {
+      "& .MuiOutlinedInput-input.Mui-disabled": { WebkitTextFillColor: "var(--colors-delta-800) !important" },
+      "& .MuiInputBase-colorPrimary.Mui-disabled": { backgroundColor: "var(--colors-delta-10) !important" },
+      "& .MuiInputBase-colorPrimary.Mui-disabled fieldset": { borderColor: "var(--colors-delta-200) !important" },
+      "& label.Mui-disabled": { color: "var(--colors-gray-800) !important" }
+    },
+    ...r.sx
+  }
+});
+export {
+  h as StyledInputField
+};

package/dist/components/inputs/label/StyledLabel.js

@@ -0,0 +1,13 @@
+import d from "./StyledLabel.module.js";
+import s from "clsx";
+import { jsx as m } from "react/jsx-runtime";
+var o = d["styled-label"], p = ({ children: e, onClick: l, className: t, dataTest: a, style: r }) => /* @__PURE__ */ m("div", {
+  className: s(o, t),
+  style: r,
+  onClick: l,
+  "data-testid": a,
+  children: e
+});
+export {
+  p as StyledLabel
+};

package/dist/components/inputs/label/StyledLabel.module.js

@@ -0,0 +1,4 @@
+var l = { "styled-label": "_styled-label_upf4y_1" };
+export {
+  l as default
+};

package/dist/components/inputs/radio-button/StyledRadio.js

@@ -0,0 +1,17 @@
+import { Radio as r } from "@mui/material";
+import { jsx as a } from "react/jsx-runtime";
+var e = ({ dataTest: o, ...t }) => /* @__PURE__ */ a(r, {
+  ...t,
+  "data-testid": o,
+  sx: {
+    "&": { color: "var(--colors-delta-500)" },
+    "& input": {
+      height: "100% !important",
+      width: "100% !important"
+    },
+    "&.Mui-checked": { color: "var(--colors-gama-500)" }
+  }
+});
+export {
+  e as StyledRadio
+};

package/dist/components/inputs/radio-button/base-ui/StyledRadio.js

@@ -0,0 +1,35 @@
+import { cn as n } from "../../../../helpers/cn.js";
+import e from "./StyledRadio.module.js";
+import { forwardRef as N, useCallback as h, useRef as w } from "react";
+import { jsx as o, jsxs as x } from "react/jsx-runtime";
+import { Radio as i } from "@base-ui/react/radio";
+var I = N(({ value: s, dataTest: l, className: d, size: t = "medium", error: p, disabled: m, ...c }, R) => {
+  const u = n(e.RadioWrapper, e.RadioHover, t === "small" && e["size-small"], d, p && e.Error), f = n(e.Radio, t === "small" && e["size-small"]), r = w(null), v = h((C) => {
+    if (C.stopPropagation(), !r.current) return;
+    const a = document.createElement("span");
+    e.RadioRipple && (a.className = e.RadioRipple), a.addEventListener("animationend", () => {
+      a.remove();
+    }, { once: !0 }), r.current.appendChild(a);
+  }, []);
+  return /* @__PURE__ */ x(i.Root, {
+    ...c,
+    nativeButton: !0,
+    render: /* @__PURE__ */ o("button", {}),
+    ref: R,
+    value: s,
+    "data-testid": l,
+    className: u,
+    disabled: m,
+    onPointerDown: v,
+    children: [/* @__PURE__ */ o("span", {
+      className: e.RadioRippleContainer,
+      ref: r
+    }), /* @__PURE__ */ o("span", {
+      className: f,
+      children: /* @__PURE__ */ o(i.Indicator, { className: e.Indicator })
+    })]
+  });
+});
+export {
+  I as StyledRadio
+};

package/dist/components/inputs/radio-button/base-ui/StyledRadio.module.js

@@ -0,0 +1,14 @@
+var a = "_RadioWrapper_1qjtx_1", _ = "_Radio_1qjtx_1", r = "_RadioRippleContainer_1qjtx_34", i = "_RadioRipple_1qjtx_34", o = "_ripple_1qjtx_1", e = "_RadioHover_1qjtx_68", d = "_Indicator_1qjtx_120", p = {
+  RadioWrapper: a,
+  "size-small": "_size-small_1qjtx_14",
+  Radio: _,
+  RadioRippleContainer: r,
+  RadioRipple: i,
+  ripple: o,
+  RadioHover: e,
+  Indicator: d,
+  Error: "_Error_1qjtx_141"
+};
+export {
+  p as default
+};

package/dist/components/inputs/radio-button/base-ui/StyledRadioGroup.js

@@ -0,0 +1,31 @@
+import { ErrorOutlineIcon as u } from "../../../icons/error-outline-icon/ErrorOutlineIcon.js";
+import { StyledFormHelperText as y } from "../../../miscellaneous/StyledFormHelperText.js";
+import I from "clsx";
+import { forwardRef as R, useId as s } from "react";
+import { jsx as b, jsxs as r } from "react/jsx-runtime";
+import { RadioGroup as v } from "@base-ui/react/radio-group";
+var q = R(({ value: a, defaultValue: l, onValueChange: m, dataTest: c, error: t, errorText: p, helperText: e, children: n, ...f }, x) => {
+  const d = s(), i = s(), o = (t ?? !1) || (e ?? !1), h = t ? p ?? "Required" : e;
+  return /* @__PURE__ */ r(v, {
+    ...f,
+    "data-testid": c,
+    "aria-describedby": o ? t ? i : d : void 0,
+    "aria-invalid": t,
+    ref: x,
+    value: a,
+    defaultValue: l,
+    onValueChange: m,
+    children: [n, o && /* @__PURE__ */ r(y, {
+      id: t ? i : d,
+      role: t ? "alert" : "status",
+      className: I("m-0 flex items-center gap-1 pt-1 text-sm", t ? "text-error-500" : "text-delta-600"),
+      children: [t && /* @__PURE__ */ b(u, {
+        width: 20,
+        height: 20
+      }), h]
+    })]
+  });
+});
+export {
+  q as StyledRadioGroup
+};

package/dist/components/inputs/search-field/StyledSearchField.js

@@ -0,0 +1,68 @@
+import { cn as r } from "../../../helpers/cn.js";
+import { SearchIcon as c } from "../../icons/search-icon/SearchIcon.js";
+import { CloseIcon as d } from "../../icons/close-icon/CloseIcon.js";
+import { StyledInputField as p } from "../input-field/StyledInputField.js";
+import { useState as u } from "react";
+import { jsx as o, jsxs as h } from "react/jsx-runtime";
+var g = ({ value: t, onClear: i, ...e }) => {
+  const [l, s] = u(!1), a = l || t;
+  return /* @__PURE__ */ h("div", {
+    className: "relative w-full",
+    children: [/* @__PURE__ */ o(p, {
+      size: "small",
+      variant: "outlined",
+      value: t,
+      onFocus: () => {
+        s(!0);
+      },
+      onBlur: () => {
+        s(!1);
+      },
+      InputProps: {
+        className: r("transition-[padding] duration-300", a ? "pl-0" : "pl-5"),
+        sx: { "& input": {
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          overflow: "hidden"
+        } },
+        endAdornment: t ? /* @__PURE__ */ o("div", {
+          "data-testid": "styled-search-clear-icon",
+          className: r("cursor-pointer rounded-full bg-delta-50", "flex items-center justify-center", "transform-gpu transition-all duration-300 ease-in-out", t ? "scale-100 opacity-100" : "pointer-events-none scale-75 opacity-0"),
+          style: {
+            width: 24,
+            height: 24,
+            flexShrink: 0
+          },
+          onClick: (n) => {
+            n.preventDefault(), n.stopPropagation(), i?.();
+          },
+          children: /* @__PURE__ */ o(d, {
+            width: 20,
+            height: 20,
+            color: "var(--colors-delta-700)",
+            className: "pointer-events-none"
+          })
+        }) : null
+      },
+      InputLabelProps: { sx: {
+        transform: "translate(34px, 9px) scale(1)",
+        width: a ? void 0 : "calc(100% - 42px)",
+        "&.MuiInputLabel-shrink": { transform: "translate(16px, -9px) scale(0.75)" }
+      } },
+      ...e,
+      sx: {
+        ...e.fullWidth ? { width: "100%" } : { width: 160 },
+        ...e.sx
+      }
+    }), /* @__PURE__ */ o(c, {
+      "data-testid": "styled-search-icon",
+      width: 24,
+      height: 24,
+      className: r("absolute left-2 top-1/2 -translate-y-1/2", "transform-gpu transition-all duration-300 ease-in-out", a ? "pointer-events-none scale-75 opacity-0" : "scale-100 opacity-100", e.error && "top-1/3"),
+      color: "var(--colors-delta-700)"
+    })]
+  });
+};
+export {
+  g as StyledSearchField
+};

package/dist/components/inputs/select/StyledSelect.js

@@ -0,0 +1,50 @@
+import { CloseIcon as u } from "../../icons/close-icon/CloseIcon.js";
+import { ErrorOutlineIcon as m } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
+import { StyledFormHelperText as d } from "../../miscellaneous/StyledFormHelperText.js";
+import c from "clsx";
+import { Select as s } from "@mui/material";
+import { Fragment as p, jsx as e, jsxs as t } from "react/jsx-runtime";
+import { Icon as h } from "@iconify/react";
+var C = ({ dataTest: i, allowClear: l, error: o, errorText: n, ...r }) => /* @__PURE__ */ t(p, { children: [/* @__PURE__ */ e(s, {
+  ...r,
+  "data-testid": i,
+  error: o,
+  value: r.value,
+  IconComponent: ({ className: a }) => /* @__PURE__ */ e(h, {
+    icon: "material-symbols:expand-more-rounded",
+    width: 24,
+    height: 24,
+    className: c(a),
+    style: { marginTop: "-3.5px" }
+  }),
+  endAdornment: l && r.value ? /* @__PURE__ */ e("div", {
+    "data-testid": "select-clear-button",
+    className: "absolute right-8 flex items-center justify-center rounded-full p-[2px] duration-300 hover:bg-gama-100",
+    onClick: () => {
+      r.onChange?.({ target: { value: "" } }, null);
+    },
+    children: /* @__PURE__ */ e(u, {
+      width: 18,
+      height: 18
+    })
+  }) : null,
+  sx: {
+    ".MuiOutlinedInput-notchedOutline": { borderColor: "var(--colors-delta-500) !important" },
+    "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: "var(--colors-gama-500) !important" },
+    "&.MuiFormLabel-root-MuiInputLabel-root .Mui-error": { color: "var(--colors-error-500) !important" },
+    "&.Mui-error .MuiOutlinedInput-notchedOutline": { borderColor: "var(--colors-error-500) !important" },
+    "& .MuiInputBase-colorPrimary.Mui-error fieldset": { borderColor: "var(--colors-error-500) !important" },
+    "&.Mui-focused::after": { borderColor: "var(--colors-gama-400) !important" },
+    "&:hover .MuiOutlinedInput-notchedOutline": { border: "2px solid var(--colors-gama-300) !important" },
+    ...r.sx
+  }
+}), o && /* @__PURE__ */ t(d, {
+  className: "m-0 flex items-center gap-1 pt-1 text-sm text-error-500",
+  children: [/* @__PURE__ */ e(m, {
+    width: 20,
+    height: 20
+  }), n ?? "Required"]
+})] });
+export {
+  C as StyledSelect
+};

package/dist/components/inputs/select/StyledSelectItem.js

@@ -0,0 +1,30 @@
+import { MenuItem as r } from "@mui/material";
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import { Icon as i } from "@iconify/react";
+var a = (e) => /* @__PURE__ */ o(r, {
+  ...e,
+  sx: {
+    "&.MuiMenuItem-root": {
+      fontSize: "14px !important",
+      gap: "4px",
+      px: 1
+    },
+    "&.Mui-selected": { backgroundColor: "var(--colors-gama-50) !important" }
+  },
+  children: [/* @__PURE__ */ t("span", {
+    style: {
+      width: "24px",
+      justifyContent: "center",
+      display: "flex"
+    },
+    children: e.selected && /* @__PURE__ */ t(i, {
+      icon: "mdi:tick",
+      width: 22,
+      height: 22,
+      style: { color: "var(--colors-gama-500)" }
+    })
+  }), /* @__PURE__ */ t("span", { children: e.children })]
+});
+export {
+  a as StyledSelectItem
+};