@orfium/ictinus 5.43.0 → 5.43.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @orfium/ictinus
 
+## 5.43.2
+
+### Patch Changes
+
+- 6490de2: fix imports
+
+## 5.43.1
+
+### Patch Changes
+
+- f2ec1d7: data table alpha
+
 ## 5.43.0
 
 ### Minor Changes

package/dist/components/Avatar/Avatar.js

@@ -1,7 +1,7 @@
 import { jsx as m } from "@emotion/react/jsx-runtime";
-import { forwardRef as s, useMemo as v } from "react";
-import u from "./assets/user-avatar.svg.js";
-import { iconStyles as p, avatarStyle as d } from "./Avatar.style.js";
+import { forwardRef as s, useMemo as u } from "react";
+import { iconStyles as v, avatarStyle as p } from "./Avatar.style.js";
+import { UserAvatar as d } from "./UserAvatar.js";
 const y = s(({
   src: t = "",
   size: a = 1,
@@ -10,11 +10,11 @@ const y = s(({
   dataTestPrefixId: f = "",
   children: e
 }, i) => {
-  const n = v(() => t ? /* @__PURE__ */ m("img", { src: t }) : !t && e ? e : /* @__PURE__ */ m(u, { css: p({
+  const n = u(() => t ? /* @__PURE__ */ m("img", { src: t }) : !t && e ? e : /* @__PURE__ */ m(d, { css: v({
     size: a,
     color: r
   }) }), [e, r, a, t]);
-  return /* @__PURE__ */ m("div", { ref: i, className: o, css: d({
+  return /* @__PURE__ */ m("div", { ref: i, className: o, css: p({
     size: a,
     color: r
   }), "data-testid": `${f}_avatar`, children: n });

package/dist/components/Avatar/UserAvatar.js

@@ -0,0 +1,11 @@
+import { jsx as r, jsxs as o } from "@emotion/react/jsx-runtime";
+import { Box as t } from "../../vanilla/Box/Box.js";
+function i(C) {
+  return /* @__PURE__ */ r(t, { asChild: !0, ...C, children: /* @__PURE__ */ o("svg", { viewBox: "0 0 14 17", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ r("path", { d: "M6.96625 6.55647C8.77677 6.55647 10.2445 5.08876 10.2445 3.27824C10.2445 1.46772 8.77677 0 6.96625 0C5.15573 0 3.68801 1.46772 3.68801 3.27824C3.68801 5.08876 5.15573 6.55647 6.96625 6.55647Z", fill: "currentColor" }),
+    /* @__PURE__ */ r("path", { d: "M0 12.2113C0 12.1401 0.0171683 12.0699 0.0515269 12.0076C1.31285 9.7198 3.95046 8.09435 7 8.09435C10.0495 8.09435 12.6872 9.7198 13.9485 12.0076C13.9828 12.0699 14 12.1401 14 12.2113C14 12.2824 13.9828 12.3528 13.9483 12.4151C12.687 14.6941 10.0518 16.0044 7.00244 16.0044C3.95304 16.0044 1.31314 14.6941 0.0516988 12.4151C0.0172363 12.3528 0 12.2824 0 12.2113Z", fill: "currentColor" })
+  ] }) });
+}
+export {
+  i as UserAvatar
+};

package/dist/components/Button/Button.js

@@ -1,29 +1,29 @@
-import { jsx as r, jsxs as u, Fragment as h } from "@emotion/react/jsx-runtime";
-import y from "react";
-import { BUTTON_COLOR as c } from "../ButtonBase/constants.js";
-import x from "../ButtonBase/ButtonBase.js";
-import { buttonSpanStyle as B } from "./Button.style.js";
-import N from "../Avatar/Avatar.js";
-import s from "../Icon/Icon.js";
-const R = y.forwardRef((a, l) => {
+import { jsxs as y, jsx as o } from "@emotion/react/jsx-runtime";
+import h from "react";
+import { BUTTON_ICON_COLOR as n } from "../ButtonBase/constants.js";
+import B from "../ButtonBase/ButtonBase.js";
+import C from "../Avatar/Avatar.js";
+import { Icon as s } from "../../icon/Icon.js";
+import { Text as N } from "../../vanilla/Text/Text.js";
+const x = h.forwardRef((a, l) => {
   const {
-    type: t = "primary",
+    type: r = "primary",
     size: p = "normal",
-    iconLeftName: e,
-    iconRightName: n,
-    avatar: o,
-    children: i,
+    iconLeftName: i,
+    iconRightName: m,
+    avatar: t,
+    children: f,
     onClick: d,
-    isLoading: f
-  } = a, m = ["primary", "secondary", "tertiary"].includes(t) && o;
-  return /* @__PURE__ */ r(x, { ...a, ref: l, isLoading: f, onClick: d, children: /* @__PURE__ */ r("span", { css: B(), children: p === "compact" ? /* @__PURE__ */ r("span", { children: i }) : /* @__PURE__ */ u(h, { children: [
-    m && /* @__PURE__ */ r(N, { src: o?.src, children: o?.label }),
-    e && !m && /* @__PURE__ */ r(s, { name: e, color: c[t].text }),
-    /* @__PURE__ */ r("span", { children: i }),
-    n && /* @__PURE__ */ r(s, { name: n, color: c[t].text })
-  ] }) }) });
+    isLoading: u
+  } = a, e = ["primary", "secondary", "tertiary"].includes(r) && t, c = p === "compact" ? "sm" : "md";
+  return /* @__PURE__ */ y(B, { ...a, ref: l, isLoading: u, onClick: d, children: [
+    e && /* @__PURE__ */ o(C, { src: t?.src, children: t?.label }),
+    i && !e && /* @__PURE__ */ o(s, { name: i, color: n[r], size: c }),
+    /* @__PURE__ */ o(N, { children: f }),
+    m && /* @__PURE__ */ o(s, { name: m, color: n[r], size: c })
+  ] });
 });
-R.displayName = "Button";
+x.displayName = "Button";
 export {
-  R as default
+  x as default
 };

package/dist/components/ButtonBase/ButtonBase.js

@@ -2,11 +2,11 @@ import { jsxs as x, jsx as i } from "@emotion/react/jsx-runtime";
 import { omit as N } from "lodash-es";
 import T from "react";
 import { generateTestDataId as g } from "../../utils/helpers.js";
-import { buttonWrapperStyle as k, buttonBaseStyle as L } from "./ButtonBase.style.js";
-import { useSlotProps as R } from "../utils/Slots.js";
-import S from "../Button/ButtonLoader/ButtonLoader.js";
+import k from "../Button/ButtonLoader/ButtonLoader.js";
+import { useSlotProps as L } from "../utils/Slots.js";
+import { buttonWrapperStyle as R, buttonBaseStyle as S } from "./ButtonBase.style.js";
 const j = T.forwardRef((t, n) => {
-  t = R(t, "button");
+  t = L(t, "button");
   const {
     type: m = "primary",
     size: d = "normal",
@@ -24,22 +24,35 @@ const j = T.forwardRef((t, n) => {
     sx: y,
     ...I
   } = t, r = `${p}button`;
-  return /* @__PURE__ */ x("div", { css: k({
+  return /* @__PURE__ */ x("div", { css: R({
     isBlock: o
   }), children: [
-    a && !e && /* @__PURE__ */ i(S, { dataTestId: r }),
-    /* @__PURE__ */ i("button", { ...N(I, ["avatar", "iconRightName", "iconLeftName", "iconName"]), ref: n, type: B, "data-testid": g(r, u), css: L({
-      type: m,
-      size: d,
-      isLoading: a,
-      isBlock: o,
-      isDisabled: e,
-      isIconButton: l,
-      shape: f,
-      sx: y
-    }), onClick: (h) => {
-      s && s(h);
-    }, onBlur: b, disabled: e, children: c })
+    a && !e && /* @__PURE__ */ i(k, { dataTestId: r }),
+    /* @__PURE__ */ i(
+      "button",
+      {
+        ...N(I, ["avatar", "iconRightName", "iconLeftName", "iconName"]),
+        ref: n,
+        type: B,
+        "data-testid": g(r, u),
+        css: S({
+          type: m,
+          size: d,
+          isLoading: a,
+          isBlock: o,
+          isDisabled: e,
+          isIconButton: l,
+          shape: f,
+          sx: y
+        }),
+        onClick: (h) => {
+          s && s(h);
+        },
+        onBlur: b,
+        disabled: e,
+        children: c
+      }
+    )
   ] });
 });
 j.displayName = "ButtonBase";

package/dist/components/ButtonBase/ButtonBase.style.js

@@ -1,61 +1,63 @@
 import { css as d } from "@emotion/react";
-import { vars as o } from "@orfium/tokens";
+import { vars as r } from "@orfium/tokens";
 import { generateStylesFromTokens as f } from "../Typography/utils.js";
 import { BUTTON_COLOR as t, typographySizes as v } from "./constants.js";
-const i = {
+const n = {
   compact: {
-    size: o.sizing[7],
-    padding: `${o.spacing[0]} ${o.spacing[4]} ${o.spacing[0]} ${o.spacing[4]}`
+    size: r.sizing[7],
+    padding: `${r.spacing[0]} ${r.spacing[4]} ${r.spacing[0]} ${r.spacing[4]}`
   },
   normal: {
-    size: o.sizing[9],
-    padding: `${o.spacing[0]} ${o.spacing[6]} ${o.spacing[0]} ${o.spacing[6]}`
+    size: r.sizing[9],
+    padding: `${r.spacing[0]} ${r.spacing[6]} ${r.spacing[0]} ${r.spacing[6]}`
   }
 }, $ = ({
-  isBlock: r
+  isBlock: o
 }) => /* @__PURE__ */ d({
   position: "relative",
-  width: r ? "100%" : "fit-content"
+  width: o ? "100%" : "fit-content"
 }, "", ""), C = ({
-  type: r = "primary",
+  type: o = "primary",
   size: e = "normal",
   isBlock: l,
-  isLoading: n,
+  isLoading: a,
   isDisabled: c,
-  isIconButton: a,
+  isIconButton: i,
   shape: g,
   sx: p
 }) => (s) => {
   const u = () => {
     if (l) return "100%";
-    if (a) return i[e].size;
+    if (i) return n[e].size;
   }, b = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    color: t[r].text,
+    flexShrink: 0,
+    gap: r.spacing[4],
+    color: t[o].text,
     width: u(),
-    height: i[e].size,
-    backgroundColor: t[r][n ? "activeFill" : "defaultFill"],
-    padding: i[e].padding,
-    borderRadius: a && g === "circle" ? o["border-radius"][7] : o["border-radius"][2],
+    height: n[e].size,
+    backgroundColor: t[o][a ? "activeFill" : "defaultFill"],
+    padding: i ? 0 : n[e].padding,
+    borderRadius: i && g === "circle" ? r["border-radius"][7] : r["border-radius"][2],
     border: "none",
     cursor: "pointer",
     transition: "background-color,border 150ms linear",
     ":focus-visible:not(:disabled)": {
-      backgroundColor: t[r].hoverFill
+      backgroundColor: t[o].hoverFill
     },
     ":disabled": {
       opacity: s.tokens.disabledState.get("default"),
       cursor: "not-allowed"
     },
     ":hover:not(:disabled)": {
-      backgroundColor: t[r].hoverFill
+      backgroundColor: t[o].hoverFill
     },
     ':active:not(:disabled), &[aria-expanded="true"]': {
-      backgroundColor: t[r].activeFill
+      backgroundColor: t[o].activeFill
     }
-  }, m = n && !c ? {
+  }, m = a && !c ? {
     pointerEvents: "none"
   } : {};
   return /* @__PURE__ */ d(f(s.tokens.typography.get(v[e])), ";", b, ";", m, ";", p?.container, ";", "");

package/dist/components/ButtonBase/constants.js

@@ -25,10 +25,16 @@ const r = {
     text: t.color.text.default.error
   }
 }, l = {
+  primary: "inverted.primary",
+  secondary: "active",
+  tertiary: "active",
+  danger: "error"
+}, a = {
   normal: "normal.label02",
   compact: "normal.label03"
 };
 export {
   r as BUTTON_COLOR,
-  l as typographySizes
+  l as BUTTON_ICON_COLOR,
+  a as typographySizes
 };

package/dist/components/Controls/CheckBox/CheckBox.js

@@ -1,44 +1,43 @@
 import { jsxs as d, jsx as t } from "@emotion/react/jsx-runtime";
-import $ from "react";
-import { Checkbox as u } from "react-aria-components";
-import { vars as m } from "@orfium/tokens";
-import { checkboxWrapperStyles as C, checkboxStyles as I } from "./CheckBox.style.js";
-import s from "../../Box/Box.js";
-import T from "../../Icon/Icon.js";
-import g from "../ControlLabel/ControlLabelText.js";
-import y from "../ControlLabel/ControlHelpText.js";
-const j = $.forwardRef((p, f) => {
+import _ from "react";
+import { Checkbox as $ } from "react-aria-components";
+import { checkboxWrapperStyles as u, checkboxStyles as C } from "./CheckBox.style.js";
+import l from "../../Box/Box.js";
+import { Icon as y } from "../../../icon/Icon.js";
+import I from "../ControlLabel/ControlLabelText.js";
+import T from "../ControlLabel/ControlHelpText.js";
+const g = _.forwardRef((m, p) => {
   const {
-    id: x,
+    id: f,
     value: e,
-    isSelected: a,
+    isSelected: s,
     onChange: h,
-    isIndeterminate: o,
-    isDisabled: l,
-    labelConfig: b = {},
+    isIndeterminate: i,
+    isDisabled: a,
+    labelConfig: x = {},
     dataTestPrefixId: r = "ictinus",
     children: n
-  } = p, {
-    placement: i = "right",
-    size: k = "normal",
+  } = m, {
+    placement: o = "right",
+    size: b = "normal",
     helpText: c,
-    sx: _
-  } = b;
-  return /* @__PURE__ */ d("div", { css: C({
-    sx: _
+    sx: k
+  } = x;
+  return /* @__PURE__ */ d("div", { css: u({
+    sx: k
   }), children: [
-    /* @__PURE__ */ t(u, { id: x, css: I(), isSelected: a, onChange: h, isIndeterminate: o, isDisabled: l, value: e, ref: f, "data-testid": `${r}${e ? `_${e}` : ""}_checkbox`, children: /* @__PURE__ */ d(s, { display: "flex", alignItems: "center", gap: "5", flexDirection: i === "left" ? "row-reverse" : "row", justifyContent: i === "left" ? "space-between" : "unset", children: [
-      /* @__PURE__ */ t(s, { "data-role": "checkbox-icon", children: /* @__PURE__ */ t(T, { name: o ? "minus" : "check", size: m.sizing[5], color: m.color.text.inverted.primary, dataTestId: `${r}${e ? `_${e}` : ""}_${o ? "minus" : a ? "checkmark" : "unselected"}` }) }),
-      n && /* @__PURE__ */ t(g, { size: k, dataTestPrefixId: `${r}_checkbox_${e?.split(" ").join("_")}`, children: n })
+    /* @__PURE__ */ t($, { id: f, css: C(), isSelected: s, onChange: h, isIndeterminate: i, isDisabled: a, value: e, ref: p, "data-testid": `${r}${e ? `_${e}` : ""}_checkbox`, children: /* @__PURE__ */ d(l, { display: "flex", alignItems: "center", gap: "5", flexDirection: o === "left" ? "row-reverse" : "row", justifyContent: o === "left" ? "space-between" : "unset", children: [
+      /* @__PURE__ */ t(l, { "data-role": "checkbox-icon", children: /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(y, { name: i ? "minus" : "check", size: "md", color: "inverted.primary", "data-testid": `${r}${e ? `_${e}` : ""}_${i ? "minus" : s ? "checkmark" : "unselected"}` }) }) }),
+      n && /* @__PURE__ */ t(I, { size: b, dataTestPrefixId: `${r}_checkbox_${e?.split(" ").join("_")}`, children: n })
     ] }) }),
-    c && /* @__PURE__ */ t(s, { ...i === "left" ? {
+    c && /* @__PURE__ */ t(l, { ...o === "left" ? {
       pr: "9"
     } : {
       pl: "9"
-    }, "data-disabled": l, children: /* @__PURE__ */ t(y, { helpText: c, dataTestPrefixId: `${r}_checkbox_${e?.split(" ").join("_")}`, children: c }) })
+    }, "data-disabled": a, children: /* @__PURE__ */ t(T, { helpText: c, dataTestPrefixId: `${r}_checkbox_${e?.split(" ").join("_")}`, children: c }) })
   ] });
 });
-j.displayName = "CheckBox";
+g.displayName = "CheckBox";
 export {
-  j as default
+  g as default
 };

package/dist/components/Controls/CheckBox/CheckBox.style.js

@@ -1,8 +1,8 @@
-import { css as t } from "@emotion/react";
+import { css as r } from "@emotion/react";
 import { vars as o } from "@orfium/tokens";
 const d = ({
-  sx: r
-}) => (e) => /* @__PURE__ */ t("width:fit-content;[data-disabled]{opacity:", e.tokens.disabledState.get("default"), ";cursor:not-allowed;}", r, ";", ""), s = () => (r) => /* @__PURE__ */ t("display:block;cursor:pointer;position:relative;[data-role='checkbox-icon']>div{transition:all 0.2s;width:", o.sizing[5], ";height:", o.sizing[5], ";align-items:center;box-sizing:border-box;border:", o["border-width"][2], " solid ", o.color["border-color"].interactive.default, ";border-radius:", o["border-radius"][2], ";}svg{visibility:hidden;opacity:0;}&[data-hovered='true'],&[data-focus-visible='true']{[data-role='checkbox-icon']{transition:all 0.2s;background:", r.tokens.state.get("backgroundColor.hover"), ";box-shadow:0px 0px 0px 8px ", r.tokens.state.get("backgroundColor.hover"), ";border-radius:100%;}}&[data-selected='true'],&[data-indeterminate='true']{[data-role='checkbox-icon']>div{transition:all 0.2s;border-color:", o.color["border-color"].decorative.transparent, ";background:", o.color.palette.primary.base, ";}svg{visibility:visible;opacity:1;transition:all 0.2s;}}&[data-disabled='true']{opacity:", r.tokens.disabledState.get("default"), ";cursor:not-allowed;&:hover{background:none;box-shadow:none;}}", "");
+  sx: e
+}) => (t) => /* @__PURE__ */ r("width:fit-content;[data-disabled]{opacity:", t.tokens.disabledState.get("default"), ";cursor:not-allowed;}", e, ";", ""), s = () => (e) => /* @__PURE__ */ r("display:block;cursor:pointer;position:relative;[data-role='checkbox-icon']>div{transition:all 0.2s;width:", o.sizing[5], ";height:", o.sizing[5], ";align-items:center;box-sizing:border-box;display:flex;border:", o["border-width"][2], " solid ", o.color["border-color"].interactive.default, ";border-radius:", o["border-radius"][2], ";}svg{visibility:hidden;opacity:0;}&[data-hovered='true'],&[data-focus-visible='true']{[data-role='checkbox-icon']{transition:all 0.2s;background:", e.tokens.state.get("backgroundColor.hover"), ";box-shadow:0px 0px 0px 8px ", e.tokens.state.get("backgroundColor.hover"), ";border-radius:100%;}}&[data-selected='true'],&[data-indeterminate='true']{[data-role='checkbox-icon']>div{transition:all 0.2s;border-color:", o.color["border-color"].decorative.transparent, ";background:", o.color.palette.primary.base, ";}svg{visibility:visible;opacity:1;transition:all 0.2s;}}&[data-disabled='true']{opacity:", e.tokens.disabledState.get("default"), ";cursor:not-allowed;&:hover{background:none;box-shadow:none;}}", "");
 export {
   s as checkboxStyles,
   d as checkboxWrapperStyles

package/dist/components/DatePicker/constants.js

@@ -1,8 +1,8 @@
 import { currentDay as t } from "./utils.js";
-const s = "Apply", d = "Clear All", o = "Select Date", r = "Enter Date Range", c = {
+const s = "Apply", e = "Clear All", l = "Select Date", o = "Enter Date Range", A = {
   from: void 0,
   to: void 0
-}, l = [{
+}, E = [{
   value: "last-7-days",
   label: "Last 7 days",
   dates: [t.subtract(7, "day"), t]
@@ -14,15 +14,12 @@ const s = "Apply", d = "Clear All", o = "Select Date", r = "Enter Date Range", c
   value: "custom",
   label: "Custom",
   dates: [t]
-}], a = t;
-a.toDate(), a.subtract(1, "day").toDate(), a.subtract(2, "day").toDate(), a.subtract(4, "day").toDate();
-a.subtract(7, "day").toDate(), a.add(7, "day").toDate(), a.subtract(7, "day").toDate(), a.add(7, "day").toDate();
+}];
 export {
   s as APPLY,
-  l as CALENDAR_DEFAULT_OPTIONS,
-  d as CLEAR_ALL,
-  o as DATE_PICKER_LABEL,
-  r as DATE_RANGE_PICKER_LABEL,
-  c as EMPTY_STATE,
-  a as mockDate
+  E as CALENDAR_DEFAULT_OPTIONS,
+  e as CLEAR_ALL,
+  l as DATE_PICKER_LABEL,
+  o as DATE_RANGE_PICKER_LABEL,
+  A as EMPTY_STATE
 };

package/dist/components/DatePicker/utils.js

@@ -1,11 +1,10 @@
 import o from "../../utils/date.js";
-import "../../node_modules/.pnpm/@testing-library_react@14.3.1_@types_react@18.3.24_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@testing-library/react/dist/@testing-library/react.esm.js";
 o("11-03-2020 12:00:00");
-const r = (t) => t, n = r(o()), f = (t) => ({
+const r = (t) => t, f = r(o()), i = (t) => ({
   from: t.from ? o(t.from) : void 0,
   to: t.to ? o(t.to) : void 0
 });
 export {
-  n as currentDay,
-  f as initDates
+  f as currentDay,
+  i as initDates
 };

package/dist/components/Filter/components/FilterButton/FilterButton.js

@@ -32,7 +32,7 @@ const T = d.forwardRef((c, f) => {
     isDisabled: r
   }), type: "button", ref: f, onClick: u, disabled: r, "data-testid": `${o}_filter_button`, "data-active": e, ..._, children: [
     /* @__PURE__ */ i("div", { css: I, "data-testid": `${o}_filter_label`, children: p }),
-    l && !e && /* @__PURE__ */ a(g, { css: P, color: "blue", dataTestPrefixId: `${o}_${l}_more_filters`, children: [
+    l > 0 && !e && /* @__PURE__ */ a(g, { css: P, color: "blue", dataTestPrefixId: `${o}_${l}_more_filters`, children: [
       "+",
       l
     ] }),

package/dist/components/IconButton/IconButton.js

@@ -1,20 +1,19 @@
 import { jsx as r } from "@emotion/react/jsx-runtime";
-import s from "react";
-import { vars as f } from "@orfium/tokens";
-import p from "../ButtonBase/ButtonBase.js";
-import { BUTTON_COLOR as d } from "../ButtonBase/constants.js";
-import l from "../Icon/Icon.js";
-const u = s.forwardRef((o, e) => {
+import c from "react";
+import s from "../ButtonBase/ButtonBase.js";
+import { BUTTON_ICON_COLOR as f } from "../ButtonBase/constants.js";
+import { Icon as d } from "../../icon/Icon.js";
+const p = c.forwardRef((o, e) => {
   const {
-    iconName: i,
-    size: n = "normal",
-    type: a = "primary",
-    shape: c = "circle",
+    iconName: a,
+    size: m = "normal",
+    type: i = "primary",
+    shape: n = "circle",
     dataTestPrefixId: t
-  } = o, m = d[a].text;
-  return /* @__PURE__ */ r(p, { ...o, ref: e, isIconButton: !0, shape: c, dataTestPrefixId: t ? `${t}-icon-` : "icon-", children: /* @__PURE__ */ r(l, { size: f.sizing[n === "compact" ? "4" : "5"], name: i, color: m }) });
+  } = o;
+  return /* @__PURE__ */ r(s, { ...o, ref: e, isIconButton: !0, shape: n, dataTestPrefixId: t ? `${t}-icon-` : "icon-", children: /* @__PURE__ */ r(d, { size: m === "compact" ? "sm" : "md", name: a, color: f[i] }) });
 });
-u.displayName = "IconButton";
+p.displayName = "IconButton";
 export {
-  u as default
+  p as default
 };

package/dist/components/Table/constants.js

@@ -1,11 +1,10 @@
-import "@emotion/react/jsx-runtime";
-const e = 52, n = 44, o = {
+const t = 52, e = 44, n = {
   left: "flex-start",
   center: "center",
   right: "flex-end"
 };
 export {
-  n as ACTIONS_BAR_HEIGHT,
-  e as ACTIONS_CELL_WIDTH,
-  o as contentAlignToFlex
+  e as ACTIONS_BAR_HEIGHT,
+  t as ACTIONS_CELL_WIDTH,
+  n as contentAlignToFlex
 };

package/dist/components/TextField/TextField.js

@@ -5,21 +5,21 @@ import $ from "../../hooks/useFieldUtils.js";
 import { omit as j } from "lodash-es";
 import I, { useRef as w } from "react";
 import A from "react-fast-compare";
-import B from "react-input-mask";
+import B from "@mona-health/react-input-mask";
 import { generateUniqueID as L } from "../../utils/helpers.js";
 import { suffixContainerStyle as S } from "./TextField.style.js";
 import E from "../TextInputBase/TextInputBase.js";
 import K from "../Label/Label.js";
-var U = {
+var P = {
   name: "36bnqj",
   styles: "display:flex;flex:1"
 };
-const T = I.forwardRef((s, v) => {
+const T = I.forwardRef((o, v) => {
   const {
     id: b,
     suffix: C = null,
     label: l,
-    placeholder: o = "",
+    placeholder: s = "",
     size: i = "normal",
     isRequired: n = !1,
     isDisabled: a,
@@ -29,13 +29,13 @@ const T = I.forwardRef((s, v) => {
     },
     onInput: c,
     isMulti: M = !1,
-    tags: R = [],
-    onMultiValueDelete: k,
-    onMultiValueClearAll: F = () => null,
+    tags: k = [],
+    onMultiValueDelete: F,
+    onMultiValueClearAll: R = () => null,
     mask: x,
     sx: q,
     ...e
-  } = s, d = w(b || L("textfield_")).current, {
+  } = o, d = w(b || L("textfield_")).current, {
     isLocked: u,
     hintMessageId: m,
     handleContainerClick: O,
@@ -49,44 +49,37 @@ const T = I.forwardRef((s, v) => {
     isDisabled: a,
     ref: v
   }), y = {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     readOnly: u || D,
     css: g({
       label: l,
-      placeholder: o,
+      placeholder: s,
       isLocked: u,
       isDisabled: a,
       size: i
     }),
     ...i === "normal" ? {
-      placeholder: o ? `${o} ${n ? "*" : ""}` : l
+      placeholder: s ? `${s} ${n ? "*" : ""}` : l
     } : {
       placeholder: " "
     },
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     required: n,
     id: d,
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     disabled: a || u,
     onInput: c,
     "data-testid": e.dataTestId ? `input_${e.dataTestId}` : "input",
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     "aria-invalid": r?.type === "error",
     "aria-describedby": m,
     ...j(e, "dataTestId")
   };
-  return /* @__PURE__ */ t("div", { onClick: O, children: M ? /* @__PURE__ */ t(_, { ...s, isTextfield: !0, onOptionDelete: k, onClearAllOptions: F, label: l, onInput: c, onKeyDown: e.onKeyDown, selectedOptions: R, value: e.value, status: {
+  return /* @__PURE__ */ t("div", { onClick: O, children: M ? /* @__PURE__ */ t(_, { ...o, isTextfield: !0, onOptionDelete: F, onClearAllOptions: R, label: l, onInput: c, onKeyDown: e.onKeyDown, selectedOptions: k, value: e.value, status: {
     ...r,
     id: m
-  }, ref: p }) : /* @__PURE__ */ h(E, { ...s, status: {
+  }, ref: p }) : /* @__PURE__ */ h(E, { ...o, status: {
     ...r,
     id: m
   }, sx: q, children: [
-    /* @__PURE__ */ h("div", { css: U, children: [
-      x ? (
-        // @ts-expect-error - too complex
-        /* @__PURE__ */ t(B, { ...y, mask: x, maskChar: " ", inputRef: p, dangerouslySetInnerHTML: void 0 })
-      ) : /* @__PURE__ */ t("input", { ...y, ref: p }),
+    /* @__PURE__ */ h("div", { css: P, children: [
+      x ? /* @__PURE__ */ t(B, { ...y, ref: p, mask: x, maskPlaceholder: " ", dangerouslySetInnerHTML: void 0 }) : /* @__PURE__ */ t("input", { ...y, ref: p }),
       /* @__PURE__ */ t(K, { htmlFor: d, label: l, size: i, isRequired: n, isAnimated: !!e.value, hasError: !a && r?.type === "error" })
     ] }),
     f && /* @__PURE__ */ t("div", { "aria-hidden": !f, css: S({