asma-ui-core 3.18.0 → 3.20.0

package/dist/components/inputs/select-autocomplete/StyledSelectAutocomplete.js

@@ -0,0 +1,151 @@
+import { cn as C } from "../../../helpers/cn.js";
+import { ChevronDownIcon as re } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
+import { CloseIcon as le } from "../../icons/close-icon/CloseIcon.js";
+import { CheckIcon as oe } from "../../icons/check-icon/CheckIcon.js";
+import { PlusIconCircle as ae } from "../../icons/plus-icon-circle/PlusIconCircle.js";
+import { StyledChip as ne } from "../../data-display/chip/StyledChip.js";
+import { StyledCheckbox as H } from "../checkbox/base-ui/StyledCheckbox.js";
+import B from "./StyledSelectAutocomplete.module.js";
+import D from "clsx";
+import { createElement as v, useLayoutEffect as se, useRef as ce, useState as z } from "react";
+import { Autocomplete as ie, Paper as de } from "@mui/material";
+import { jsx as l, jsxs as T } from "react/jsx-runtime";
+function Ne({ dataTest: i, autoHeight: m, getOptionLabel: d, wrapperClassName: W, multiple: n, allowSelectAll: _, selectAllLabel: N, className: F, defaultValue: w, isOptionEqualToValue: p, ListboxProps: M, onChange: G, options: f, popupIcon: K, readOnly: h, renderOption: L, renderTags: O, sx: U, value: x, ...V }) {
+  const [k, E] = z("auto"), g = ce(null), o = n === !0 && _ === !0 && !h, A = x !== void 0, b = (e) => Array.isArray(e) ? e : [], [J, Q] = z(() => b(w));
+  se(() => {
+    if (!m) return;
+    const e = g.current?.getBoundingClientRect().height ?? 0, t = g.current?.getBoundingClientRect().top ?? 0, r = window.innerHeight - t - e - 40;
+    E(r > 0 ? r : "auto");
+  }, [m]);
+  const y = m ? {
+    style: { maxHeight: k === "auto" ? "auto" : `${k}px` },
+    ...M
+  } : M, s = (e) => typeof e == "object" && e !== null && "label" in e ? e.label : String(e), X = (e) => typeof e == "object" && e !== null && "disabled" in e && !!e.disabled, I = {
+    padding: 0,
+    "& .MuiAutocomplete-option": { paddingLeft: n ? "12px !important" : "6px !important" }
+  }, Y = y?.sx ? [I, y.sx] : I, $ = o ? b(A ? x : J) : [], c = o ? f.filter((e) => !X(e)) : f, Z = (e, t) => {
+    const r = typeof e == "object" && e !== null;
+    return r !== (typeof t == "object" && t !== null) || !r && typeof e != typeof t ? !1 : p ? p(e, t) : e === t;
+  }, j = o ? c.filter((e) => $.some((t) => Z(e, t))).length : 0, R = o && c.length > 0 && j === c.length, q = o && j > 0 && !R, P = (e, t, r, a) => {
+    o && !A && Q(b(t)), G?.(e, t, r, a);
+  }, ee = (e, t) => {
+    P(e, t ? [...c] : [], t ? "selectOption" : "clear", void 0);
+  }, te = (e, t) => e.map((r, a) => {
+    const u = t({ index: a }), S = d?.(r) ?? s(r);
+    return /* @__PURE__ */ v(ne, {
+      ...u,
+      key: `selected-chip-${S}-${a}`,
+      dataTest: `selected-chip-${S}`,
+      label: S,
+      variant: "outlined"
+    });
+  });
+  return /* @__PURE__ */ l("div", {
+    className: C(B.styledSelectAutocompleteWrapper, W),
+    ref: g,
+    children: /* @__PURE__ */ l(ie, {
+      ...V,
+      multiple: n,
+      defaultValue: o ? void 0 : w,
+      getOptionLabel: d,
+      isOptionEqualToValue: p,
+      ListboxProps: {
+        ...y,
+        sx: Y
+      },
+      className: D("!text-sm", F),
+      onChange: P,
+      options: f,
+      renderTags: O ?? (n ? te : void 0),
+      popupIcon: h ? null : K ?? n ? /* @__PURE__ */ l(ae, {
+        width: 24,
+        height: 24
+      }) : /* @__PURE__ */ l(re, {
+        width: 24,
+        height: 24,
+        className: D(B["select-custom-icon"])
+      }),
+      readOnly: h,
+      "data-testid": i,
+      value: o ? $ : x,
+      PaperComponent: ({ children: e }) => /* @__PURE__ */ T(de, {
+        "data-testid": `paper-${i}`,
+        sx: {
+          padding: "0 !important",
+          marginTop: "0px !important",
+          "& .MuiAutocomplete-option.Mui-focused": { background: "var(--colors-delta-50) !important" },
+          "& li[aria-selected=true]": { background: "var(--colors-gama-50) !important" },
+          "& li[aria-selected=true].MuiAutocomplete-option.Mui-focused": { background: "var(--colors-gama-50) !important" }
+        },
+        children: [o && c.length > 0 && /* @__PURE__ */ T("div", {
+          className: "flex items-center gap-x-[10px] border-[1px] border-b border-solid border-delta-200 bg-delta-50 py-2 pl-3 text-xs",
+          onMouseDown: (t) => t.preventDefault(),
+          role: "presentation",
+          children: [/* @__PURE__ */ l(H, {
+            size: "small",
+            dataTest: `${i}-select-all`,
+            checked: R,
+            indeterminate: q,
+            hideWrapper: !0,
+            onChange: ee,
+            "aria-label": N ?? "Select all"
+          }), /* @__PURE__ */ l("span", {
+            className: "truncate text-[10px] font-semibold uppercase text-delta-600",
+            children: N ?? "Select all"
+          })]
+        }), e]
+      }),
+      renderOption: L ?? ((e, t, { selected: r }) => {
+        const a = e, u = e.id ?? s(t);
+        return n ? /* @__PURE__ */ v("li", {
+          ...a,
+          key: u,
+          className: C(e.className, "flex items-center gap-x-[10px] border-0 border-b border-solid border-delta-200")
+        }, /* @__PURE__ */ l(H, {
+          dataTest: `${i}-${s(t)}-checkbox`,
+          checked: r,
+          size: "small",
+          hideWrapper: !0
+        }), /* @__PURE__ */ l("span", {
+          className: "flex-1 truncate py-2 text-sm text-delta-700",
+          children: d?.(t) ?? s(t)
+        })) : /* @__PURE__ */ v("li", {
+          ...a,
+          key: u,
+          className: C(e.className, "flex items-center gap-x-1")
+        }, /* @__PURE__ */ l("span", {
+          className: "w-5",
+          children: r && /* @__PURE__ */ l(oe, {
+            width: 20,
+            height: 20,
+            style: { color: "var(--colors-gama-500)" }
+          })
+        }), /* @__PURE__ */ l("span", {
+          className: "flex-1 truncate py-2 text-sm text-delta-700",
+          children: d?.(t) ?? s(t)
+        }));
+      }),
+      sx: {
+        ...U,
+        "& .MuiOutlinedInput-notchedOutline": { borderColor: "var(--colors-gama-500) !important" },
+        "& .select-custom-icon": { marginTop: "-0.5px !important" },
+        "& .MuiInputBase-inputSizeSmall": { minHeight: "23px !important" }
+      },
+      slotProps: { clearIndicator: {
+        disableRipple: !0,
+        disableFocusRipple: !0
+      } },
+      clearIcon: /* @__PURE__ */ l("span", {
+        className: "flex min-h-6 min-w-6 cursor-pointer items-center justify-center rounded-full bg-delta-50",
+        children: /* @__PURE__ */ l(le, {
+          width: 20,
+          height: 20,
+          className: "text-delta-700"
+        })
+      })
+    })
+  });
+}
+export {
+  Ne as StyledSelectAutocomplete
+};

package/dist/components/inputs/select-autocomplete/StyledSelectAutocomplete.module.js

@@ -0,0 +1,7 @@
+var e = "_styledSelectAutocompleteWrapper_1ghgt_1", t = {
+  styledSelectAutocompleteWrapper: e,
+  "select-custom-icon": "_select-custom-icon_1ghgt_5"
+};
+export {
+  t as default
+};

package/dist/components/inputs/slider/StyledSlider.js

@@ -0,0 +1,56 @@
+import { ErrorOutlineIcon as c } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
+import { StyledFormHelperText as b } from "../../miscellaneous/StyledFormHelperText.js";
+import e from "clsx";
+import { Slider as n } from "@mui/material";
+import { Fragment as g, jsx as t, jsxs as l } from "react/jsx-runtime";
+var k = ({ dataTest: i, error: a, errorText: d, helperText: o, ...r }) => {
+  const s = (a ?? !1) || (o ?? !1), m = a ? d ?? "Required" : o;
+  return /* @__PURE__ */ l(g, { children: [/* @__PURE__ */ t(n, {
+    ...r,
+    "data-testid": i,
+    slotProps: {
+      ...r.slotProps,
+      thumb: {
+        className: e("h-4 w-4", "before:shadow-none", 'after:h-8 after:w-8 after:content-[""]', r.orientation === "vertical" ? "mb-1 ml-0" : "ml-1", r.disabled ? "bg-delta-200" : "bg-gama-500"),
+        ...r.slotProps?.thumb
+      },
+      rail: {
+        className: "bg-delta-200",
+        ...r.slotProps?.rail
+      },
+      markLabel: {
+        className: e("ml-1 text-sm font-semibold text-delta-600", r.orientation === "vertical" && "mb-1"),
+        ...r.slotProps?.markLabel
+      }
+    },
+    sx: {
+      ...r.sx,
+      "& .MuiSlider-track": {
+        backgroundColor: r.disabled ? "var(--colors-gray-200)" : "var(--colors-gama-500)",
+        borderColor: r.disabled ? "var(--colors-gray-200)" : "var(--colors-gama-500)"
+      },
+      "& .MuiSlider-mark": {
+        backgroundColor: "white",
+        border: "1px solid var(--colors-delta-300)",
+        borderRadius: "50%",
+        height: "8px",
+        width: "8px",
+        "&.MuiSlider-markActive": {
+          backgroundColor: r.disabled ? "var(--colors-gray-200)" : "var(--colors-gama-500)",
+          border: "1px solid",
+          borderColor: r.disabled ? "var(--colors-gray-200)" : "var(--colors-gama-500)",
+          opacity: 1
+        }
+      }
+    }
+  }), s && /* @__PURE__ */ l(b, {
+    className: e("m-0 flex items-center gap-1 pt-1 text-sm", a ? "text-error-500" : "text-delta-600"),
+    children: [a && /* @__PURE__ */ t(c, {
+      width: 20,
+      height: 20
+    }), m]
+  })] });
+};
+export {
+  k as StyledSlider
+};

package/dist/components/inputs/switch/base-ui/StyledSwitch.js

@@ -0,0 +1,57 @@
+import { IconTemplate as x } from "../../../icons/IconTemplate.js";
+import c from "./StyledSwitch.module.js";
+import { forwardRef as N, useState as k } from "react";
+import { jsx as t } from "react/jsx-runtime";
+import { Switch as d } from "@base-ui/react/switch";
+var I = ({ className: e }) => /* @__PURE__ */ t("svg", {
+  viewBox: "0 0 24 24",
+  className: e,
+  fill: "none",
+  children: /* @__PURE__ */ t("rect", {
+    x: "6",
+    y: "10.5",
+    width: "11",
+    height: "3",
+    fill: "currentColor",
+    rx: "0.75"
+  })
+}), b = ({ width: e = 11, height: o = 11, className: n = "", onClick: r, color: a }) => /* @__PURE__ */ t(x, {
+  icon: "fa-solid:check",
+  width: e,
+  height: o,
+  className: n,
+  onClick: r,
+  color: a
+}), P = N(({ checked: e, defaultChecked: o = !1, onChange: n, disabled: r, readOnly: a, required: f, id: s, dataTest: u, ...p }, v) => {
+  const [S, w] = k(o), i = e !== void 0, m = i ? e : S, C = (l) => {
+    i || w(l), n?.({ target: {
+      checked: l,
+      name: s
+    } }, l);
+  }, g = i ? { checked: m } : { defaultChecked: o }, h = c.iconContent;
+  return /* @__PURE__ */ t(d.Root, {
+    ...p,
+    ...g,
+    nativeButton: !0,
+    render: /* @__PURE__ */ t("button", {}),
+    ref: v,
+    className: c.switch,
+    onCheckedChange: C,
+    disabled: r,
+    readOnly: a,
+    required: f,
+    id: s,
+    name: s,
+    "data-testid": u,
+    children: /* @__PURE__ */ t(d.Thumb, {
+      className: c.thumb,
+      children: /* @__PURE__ */ t("span", {
+        className: c.icon,
+        children: m ? /* @__PURE__ */ t(b, { className: h }) : /* @__PURE__ */ t(I, { className: h })
+      })
+    })
+  });
+});
+export {
+  P as StyledSwitch
+};

package/dist/components/inputs/switch/base-ui/StyledSwitch.module.js

@@ -0,0 +1,9 @@
+var _ = "_iconContent_1myey_30", t = "_thumb_1myey_50", e = "_icon_1myey_30", y = {
+  switch: "_switch_1myey_1",
+  iconContent: _,
+  thumb: t,
+  icon: e
+};
+export {
+  y as default
+};

package/dist/components/inputs/textarea/StyledTextarea.js

@@ -0,0 +1,71 @@
+import a from "./StyledTextarea.module.js";
+import { useEffect as q, useId as h, useRef as z } from "react";
+import { Fragment as D, jsx as o, jsxs as l } from "react/jsx-runtime";
+var Q = ({ id: I, variant: f = "active", label: N = "", labelClassName: F = "", description: T = "", value: t = "", minRows: s = 3, maxRows: n = 1 / 0, disabled: g, error: i, errorMessage: A, containerClassName: H = "", className: S = "", maxLength: _ = 1 / 0, counter: j, refLink: B, dataTest: E, counterLimit: d, ...P }) => {
+  const C = z(null), r = B ?? C, c = !!(j && d), x = h(), m = h(), M = h(), y = I ?? M;
+  q(() => {
+    if (r.current) {
+      const e = r.current, p = window.getComputedStyle(e), b = parseFloat(p.paddingBottom);
+      e.style.height = "auto";
+      const u = parseFloat(p.lineHeight), v = parseFloat(p.paddingTop), k = e.scrollHeight - v;
+      Math.ceil(k / u) > n ? e.style.height = `${u * n + v + b}px` : e.style.height = `${e.scrollHeight + b}px`;
+    }
+  }, [
+    r,
+    t,
+    s,
+    n,
+    c
+  ]), n < s && (s = n);
+  const W = i ? "error" : "active", $ = i ? "error" : g ? "disabled" : "active";
+  return /* @__PURE__ */ l("div", {
+    className: `relative flex flex-col gap-1 ${H}`,
+    "data-testid": E,
+    children: [
+      /* @__PURE__ */ o("label", {
+        htmlFor: y,
+        className: `${a.label} ${a[$]} ${F}`,
+        children: N
+      }),
+      /* @__PURE__ */ o("span", {
+        id: x,
+        className: `${a.description} ${a[$]}`,
+        children: i ? A : T
+      }),
+      f === "view_only" ? /* @__PURE__ */ o("div", {
+        className: "pt-3 font-roboto text-sm font-normal text-gray-700",
+        children: t
+      }) : f === "not_editable" ? /* @__PURE__ */ o("div", {
+        className: "rounded bg-gray-200 p-3 font-roboto text-sm font-normal text-gray-700",
+        children: t
+      }) : /* @__PURE__ */ o("textarea", {
+        ...P,
+        "aria-describedby": `${x} ${m}`,
+        "aria-invalid": i,
+        id: y,
+        ref: r,
+        className: `${a.textarea} ${a[W]} ${S} ${c ? "pb-[32px]" : ""}`,
+        wrap: "soft",
+        value: t,
+        disabled: g,
+        maxLength: _
+      }),
+      c && /* @__PURE__ */ l(D, { children: [/* @__PURE__ */ l("div", {
+        className: "pointer-events-none absolute bottom-3 right-3 flex h-[15px] justify-end font-roboto text-[10px]",
+        children: [
+          t.length,
+          "/",
+          d
+        ]
+      }), /* @__PURE__ */ l("div", {
+        id: m,
+        "aria-live": "polite",
+        className: "sr-only",
+        children: [d - t.length, " characters remaining"]
+      })] })
+    ]
+  });
+};
+export {
+  Q as StyledTextarea
+};

package/dist/components/inputs/textarea/StyledTextarea.module.js

@@ -0,0 +1,11 @@
+var a = "_textarea_1p8hl_1", e = "_active_1p8hl_1", _ = "_error_1p8hl_40", r = "_label_1p8hl_80", l = "_disabled_1p8hl_88", t = "_description_1p8hl_93", d = {
+  textarea: a,
+  active: e,
+  error: _,
+  label: r,
+  disabled: l,
+  description: t
+};
+export {
+  d as default
+};

package/dist/components/miscellaneous/StyledFormControl.js

@@ -0,0 +1,23 @@
+import { FormControl as r } from "@mui/material";
+import { jsx as t } from "react/jsx-runtime";
+var l = (o) => /* @__PURE__ */ t(r, {
+  ...o,
+  sx: {
+    ...o.sx,
+    "& label.MuiInputLabel-shrink": {
+      background: "white !important",
+      color: "var(--colors-delta-800) !important"
+    },
+    "& label.MuiInputLabel-shrink.Mui-focused": {
+      background: "white !important",
+      color: "var(--colors-gama-500) !important"
+    },
+    "& label.MuiInputLabel-shrink.Mui-error.Mui-focused": {
+      background: "white !important",
+      color: "var(--colors-red-500) !important"
+    }
+  }
+});
+export {
+  l as StyledFormControl
+};

package/dist/components/miscellaneous/StyledFormControlLabel.js

@@ -0,0 +1,18 @@
+import { FormControlLabel as r } from "@mui/material";
+import { jsx as e } from "react/jsx-runtime";
+var i = ({ sx: o, ...l }) => /* @__PURE__ */ e(r, {
+  ...l,
+  sx: {
+    color: "var(--colors-delta-800)",
+    margin: 0,
+    "& .MuiFormControlLabel-label": {
+      fontSize: "14px",
+      lineHeight: "20px"
+    },
+    "&.Mui-disabled .MuiFormControlLabel-label": { color: "var(--colors-delta-300)" },
+    ...o
+  }
+});
+export {
+  i as StyledFormControlLabel
+};

package/dist/components/miscellaneous/StyledFormGroup.js

@@ -0,0 +1,6 @@
+import { FormGroup as o } from "@mui/material";
+import { jsx as m } from "react/jsx-runtime";
+var e = (r) => /* @__PURE__ */ m(o, { ...r });
+export {
+  e as StyledFormGroup
+};

package/dist/components/miscellaneous/StyledFormHelperText.js

@@ -0,0 +1,6 @@
+import { FormHelperText as e } from "@mui/material";
+import { jsx as o } from "react/jsx-runtime";
+var p = (r) => /* @__PURE__ */ o(e, { ...r });
+export {
+  p as StyledFormHelperText
+};

package/dist/components/miscellaneous/StyledInputLabel.js

@@ -0,0 +1,6 @@
+import { InputLabel as t } from "@mui/material";
+import { jsx as o } from "react/jsx-runtime";
+var m = (r) => /* @__PURE__ */ o(t, { ...r });
+export {
+  m as StyledInputLabel
+};

package/dist/components/navigation/drawer/StyledDrawer.js

@@ -0,0 +1,6 @@
+import { Drawer as o } from "@mui/material";
+import { jsx as e } from "react/jsx-runtime";
+var a = (r) => /* @__PURE__ */ e(o, { ...r });
+export {
+  a as StyledDrawer
+};

package/dist/components/navigation/link/StyledLink.js

@@ -0,0 +1,32 @@
+import l from "./StyledLink.module.js";
+import t from "clsx";
+import "react";
+import { jsxs as i } from "react/jsx-runtime";
+var g = ({ href: d, disabled: k, size: m = "large", dataTest: n, reflink: y, className: r, content: s, contentNode: a, ...c }) => {
+  let e = l["styled-link-large"];
+  switch (m) {
+    case "large":
+      e = l["styled-link-large"];
+      break;
+    case "small":
+      e = l["styled-link-small"];
+      break;
+    case "xs":
+      e = l["styled-link-xs"];
+      break;
+  }
+  return k ? /* @__PURE__ */ i("span", {
+    className: t(l["styled-link"], l["styled-link-disabled"], e, r),
+    children: [s, a]
+  }) : /* @__PURE__ */ i("a", {
+    ...c,
+    "data-testid": n,
+    ref: y,
+    href: d,
+    className: t(l["styled-link"], e, r),
+    children: [s, a]
+  });
+};
+export {
+  g as StyledLink
+};

package/dist/components/navigation/link/StyledLink.module.js

@@ -0,0 +1,10 @@
+var l = {
+  "styled-link": "_styled-link_um6g7_1",
+  "styled-link-disabled": "_styled-link-disabled_um6g7_16",
+  "styled-link-xs": "_styled-link-xs_um6g7_32",
+  "styled-link-small": "_styled-link-small_um6g7_37",
+  "styled-link-large": "_styled-link-large_um6g7_42"
+};
+export {
+  l as default
+};

package/dist/components/navigation/menu/StyledMenu.js

@@ -0,0 +1,14 @@
+import e from "clsx";
+import { Menu as r } from "@mui/material";
+import { jsx as a } from "react/jsx-runtime";
+var d = (s) => /* @__PURE__ */ a(r, {
+  ...s,
+  classes: {
+    paper: e("border border-solid border-delta-300 shadow-[0px_2px_4px_0px_rgba(34,_33,_51,_0.15)]", s.classes?.paper),
+    list: e("py-1", s.classes?.list),
+    ...s.classes
+  }
+});
+export {
+  d as StyledMenu
+};

package/dist/components/navigation/menu/StyledMenuItem.js

@@ -0,0 +1,22 @@
+import o from "clsx";
+import { MenuItem as t } from "@mui/material";
+import { jsx as r } from "react/jsx-runtime";
+var m = (e) => /* @__PURE__ */ r(t, {
+  ...e,
+  classes: {
+    selected: "bg-gama-50",
+    root: o("px-3 py-2.5 hover:bg-delta-50", e.classes?.root),
+    ...e.classes
+  },
+  sx: {
+    "&.Mui-disabled": {
+      pointerEvents: "auto",
+      cursor: "not-allowed",
+      "&:hover": { backgroundColor: "transparent !important" }
+    },
+    ...e.sx
+  }
+});
+export {
+  m as StyledMenuItem
+};

package/dist/components/navigation/menu/StyledMenuList.js

@@ -0,0 +1,6 @@
+import { MenuList as t } from "@mui/material";
+import { jsx as o } from "react/jsx-runtime";
+var m = (r) => /* @__PURE__ */ o(t, { ...r });
+export {
+  m as StyledMenuList
+};

package/dist/components/navigation/tabs/StyledTab.js

@@ -0,0 +1,14 @@
+import { Tab as o } from "@mui/material";
+import { jsx as a } from "react/jsx-runtime";
+var i = (r) => /* @__PURE__ */ a(o, {
+  ...r,
+  sx: {
+    letterSpacing: "normal",
+    "&.MuiTab-textColorPrimary.Mui-selected": { color: "var(--colors-gama-500)" },
+    "&.MuiTab-textColorPrimary": { color: "var(--colors-gray-600)" },
+    "&.MuiTab-textColorPrimary.Mui-disabled": { color: "var(--colors-gray-300)" }
+  }
+});
+export {
+  i as StyledTab
+};

package/dist/components/navigation/tabs/StyledTabs.js

@@ -0,0 +1,63 @@
+import { cn as s } from "../../../helpers/cn.js";
+import { Tabs as e } from "@mui/material";
+import { jsx as l } from "react/jsx-runtime";
+function n(r) {
+  return Array.isArray(r);
+}
+function d(r) {
+  return r != null && !Array.isArray(r);
+}
+var p = {
+  "& .MuiTabs-scroller": { borderBottom: "1px solid var(--colors-delta-200)" },
+  "& .MuiTabs-scrollButtons": {
+    border: "1px solid var(--colors-delta-500)",
+    width: 40,
+    height: 40,
+    borderRadius: "10%",
+    display: "none",
+    justifyContent: "center",
+    alignItems: "center",
+    position: "relative",
+    top: 2,
+    "& svg": {
+      fontSize: 24,
+      color: "var(--colors-delta-700)"
+    },
+    "&:hover": { backgroundColor: "var(--colors-gama-50)" },
+    "&:first-of-type": { marginRight: "8px" },
+    "&:last-of-type": { marginLeft: "8px" },
+    transition: "opacity 0.3s ease, transform 0.3s ease",
+    opacity: 0,
+    transform: "scale(0)"
+  },
+  "& .MuiTabs-scrollButtons.Mui-disabled": { display: "none" },
+  "& .MuiTabs-scrollButtons:not(.Mui-disabled)": {
+    display: "flex",
+    opacity: 1,
+    transform: "scale(1)"
+  }
+}, c = {
+  minHeight: 36,
+  "& .MuiTab-root": {
+    height: 36,
+    minHeight: 36,
+    paddingLeft: "12px",
+    paddingRight: "12px",
+    paddingTop: "8px",
+    paddingBottom: "8px"
+  }
+}, f = ({ className: r, size: t = "default", sx: o, ...i }) => {
+  const a = [p];
+  return t === "small" && a.push(c), n(o) ? a.push(...o) : d(o) && a.push(o), /* @__PURE__ */ l(e, {
+    ...i,
+    className: s("relative rounded-t-lg bg-white px-4", r),
+    TabIndicatorProps: { style: {
+      background: "var(--colors-gama-500)",
+      color: "var(--colors-gama-500)"
+    } },
+    sx: a
+  });
+};
+export {
+  f as StyledTabs
+};

package/dist/components/utils/accordion/base-ui/StyledAccordion.js

@@ -0,0 +1,26 @@
+import { cn as u } from "../../../../helpers/cn.js";
+import s from "./StyledAccordion.module.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+import { Accordion as e } from "@base-ui/react";
+var g = ({ className: c, children: i, expanded: r, defaultExpanded: l, onChange: m, ...n }) => {
+  const o = "item", d = {
+    ...n,
+    type: "single",
+    className: u(s.AccordionRoot, c),
+    onValueChange: (a) => {
+      m?.(a.includes(o));
+    },
+    ...r !== void 0 ? { value: r ? [o] : [] } : { defaultValue: l ? [o] : [] }
+  };
+  return /* @__PURE__ */ t(e.Root, {
+    ...d,
+    children: /* @__PURE__ */ t(e.Item, {
+      value: o,
+      children: i
+    })
+  });
+};
+export {
+  g as StyledAccordion
+};

package/dist/components/utils/accordion/base-ui/StyledAccordion.module.js

@@ -0,0 +1,12 @@
+var r = "_AccordionRoot_wzlmo_1", o = "_Trigger_wzlmo_9", _ = "_Header_wzlmo_18", e = "_TriggerIcon_wzlmo_40", a = "_TriggerIconRight_wzlmo_48", g = "_Panel_wzlmo_56", l = "_Content_wzlmo_67", n = {
+  AccordionRoot: r,
+  Trigger: o,
+  Header: _,
+  TriggerIcon: e,
+  TriggerIconRight: a,
+  Panel: g,
+  Content: l
+};
+export {
+  n as default
+};