@pismo/marola 1.0.0-beta.5 → 1.0.0-beta.50

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pismo/marola",
   "description": "CDX tribe component library",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.50",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -34,22 +34,29 @@
     "prebuild": "yarn export-files & yarn generate-icon-types",
     "build": "tsc --p ./tsconfig-build.json && vite build && mv ./dist/assets/marola.css ./dist",
     "postbuild": "storybook build --disable-telemetry --output-dir build",
-    "storybook": "storybook dev -p 6006"
+    "storybook": "storybook dev -p 6006",
+    "prepare": "husky"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "^19.2.2",
     "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
-    "@storybook/addon-a11y": "^8.0.8",
-    "@storybook/addon-essentials": "^8.0.8",
-    "@storybook/addon-interactions": "^8.0.8",
-    "@storybook/addon-links": "^8.0.8",
-    "@storybook/blocks": "^8.0.8",
-    "@storybook/react": "^8.0.8",
-    "@storybook/react-vite": "^8.0.8",
-    "@storybook/test": "^8.0.8",
+    "@storybook/addon-a11y": "^8.3.4",
+    "@storybook/addon-essentials": "^8.3.4",
+    "@storybook/addon-interactions": "^8.3.4",
+    "@storybook/addon-links": "^8.3.4",
+    "@storybook/blocks": "^8.3.4",
+    "@storybook/manager-api": "^8.3.4",
+    "@storybook/preview-api": "^8.3.4",
+    "@storybook/react": "^8.3.4",
+    "@storybook/react-vite": "^8.3.4",
+    "@storybook/test": "^8.3.4",
+    "@storybook/theming": "^8.3.4",
+    "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^15.0.5",
     "@types/node": "^20.12.2",
     "@types/react": "^18.2.66",
@@ -57,6 +64,7 @@
     "@typescript-eslint/eslint-plugin": "^7.6.0",
     "@typescript-eslint/parser": "^7.6.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^1.4.0",
     "clsx": "^2.1.0",
     "commitlint": "^19.2.1",
     "cypress": "^13.8.1",
@@ -66,15 +74,16 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-simple-import-sort": "^12.0.0",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "^0.9.0",
     "glob": "^10.3.14",
     "husky": "^9.0.11",
     "jsdom": "^24.0.0",
+    "lint-staged": "^15.2.7",
     "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.72.0",
-    "storybook": "^8.0.8",
+    "storybook": "^8.3.4",
     "stylelint": "^16.3.1",
     "stylelint-config-recess-order": "^5.0.0",
     "stylelint-config-standard-scss": "^13.1.0",

package/dist/Dialog.module-DFEmFdYT.js

@@ -1,30 +0,0 @@
-import './assets/Dialog.css';
-const _ = "_dialog__subtitle_yi7uo_52", o = "_dialog_yi7uo_52", a = "_dialog__backdrop_yi7uo_87", y = "_dialog__panel_yi7uo_95", i = "_dialog__title_yi7uo_56", p = "_dialog__divider_yi7uo_121", t = "_dialog__actions_yi7uo_134", u = {
-  "u-typography-h1": "_u-typography-h1_yi7uo_1",
-  "u-typography-h2": "_u-typography-h2_yi7uo_8",
-  "u-typography-h3": "_u-typography-h3_yi7uo_15",
-  "u-typography-h4": "_u-typography-h4_yi7uo_22",
-  "u-typography-h5": "_u-typography-h5_yi7uo_29",
-  "u-typography-h6": "_u-typography-h6_yi7uo_36",
-  "u-typography-base": "_u-typography-base_yi7uo_43",
-  "u-typography-base--xxl": "_u-typography-base--xxl_yi7uo_48",
-  "u-typography-base--xl": "_u-typography-base--xl_yi7uo_52",
-  dialog__subtitle: _,
-  "u-typography-base--lg": "_u-typography-base--lg_yi7uo_56",
-  "dialog__title--small": "_dialog__title--small_yi7uo_56",
-  "u-typography-base--sm": "_u-typography-base--sm_yi7uo_60",
-  "u-typography-base--bold": "_u-typography-base--bold_yi7uo_64",
-  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_yi7uo_67",
-  "u-typography-base--underlined": "_u-typography-base--underlined_yi7uo_70",
-  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_yi7uo_73",
-  dialog: o,
-  dialog__backdrop: a,
-  dialog__panel: y,
-  dialog__title: i,
-  dialog__divider: p,
-  "dialog__close-icon": "_dialog__close-icon_yi7uo_125",
-  dialog__actions: t
-};
-export {
-  u as s
-};

package/dist/Group-B3p31ftp.js

@@ -1,26 +0,0 @@
-import './assets/Group.css';
-import { jsxs as g, jsx as t } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import { Icon as n } from "./components/Icon/Icon.js";
-const c = "_toggle__input_wlkvp_1", p = "_toggle__label_wlkvp_8", o = {
-  toggle__input: c,
-  toggle__label: p,
-  "toggle__label--selected": "_toggle__label--selected_wlkvp_15",
-  "toggle-group__fieldset": "_toggle-group__fieldset_wlkvp_20",
-  "toggle-group__options": "_toggle-group__options_wlkvp_25",
-  "toggle-group__error": "_toggle-group__error_wlkvp_29"
-}, f = i((e, r) => {
-  const { children: s, legend: l, error: _ } = e, d = e["data-testid"] ? `${e["data-testid"]}-legend` : void 0, a = e["data-testid"] ? `${e["data-testid"]}-error` : void 0;
-  return /* @__PURE__ */ g("fieldset", { ref: r, "data-testid": e["data-testid"], className: o["toggle-group__fieldset"], children: [
-    l && /* @__PURE__ */ t("legend", { "data-testid": d, children: l }),
-    /* @__PURE__ */ t("div", { className: o["toggle-group__options"], children: s }),
-    _ && /* @__PURE__ */ g("div", { className: o["toggle-group__error"], "data-testid": a, children: [
-      /* @__PURE__ */ t(n, { icon: "circle-exclamation", size: 24, color: "var(--alert)" }),
-      _
-    ] })
-  ] });
-});
-export {
-  f as G,
-  o as s
-};

package/dist/SelectButton-K3OIfR5m.js

@@ -1,61 +0,0 @@
-import './assets/SelectButton.css';
-import { jsxs as l, jsx as _ } from "react/jsx-runtime";
-import * as o from "react";
-import { forwardRef as u } from "react";
-import { c as b } from "./clsx-DB4S2d7J.js";
-import { Typography as y } from "./components/Typography/Typography.js";
-const g = "_select__listbox__option__text_11qky_64", x = "_select_11qky_64", d = "_select__popup_11qky_80", k = "_select__listbox_11qky_64", q = "_select__listbox__option_11qky_64", m = "_select__listbox__option__icon_11qky_101", w = "_select__list__option__icon_11qky_122", e = {
-  "u-typography-h1": "_u-typography-h1_11qky_1",
-  "u-typography-h2": "_u-typography-h2_11qky_8",
-  "u-typography-h3": "_u-typography-h3_11qky_15",
-  "u-typography-h4": "_u-typography-h4_11qky_22",
-  "u-typography-h5": "_u-typography-h5_11qky_29",
-  "u-typography-h6": "_u-typography-h6_11qky_36",
-  "u-typography-base": "_u-typography-base_11qky_43",
-  "u-typography-base--xxl": "_u-typography-base--xxl_11qky_48",
-  "u-typography-base--xl": "_u-typography-base--xl_11qky_52",
-  "u-typography-base--lg": "_u-typography-base--lg_11qky_56",
-  "u-typography-base--sm": "_u-typography-base--sm_11qky_60",
-  "u-typography-base--bold": "_u-typography-base--bold_11qky_64",
-  select__listbox__option__text: g,
-  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_11qky_67",
-  "u-typography-base--underlined": "_u-typography-base--underlined_11qky_70",
-  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_11qky_73",
-  select: x,
-  select__popup: d,
-  select__listbox: k,
-  select__listbox__option: q,
-  select__listbox__option__icon: m,
-  "select__listbox__option--disabled": "_select__listbox__option--disabled_11qky_105",
-  "select__listbox__option--selected": "_select__listbox__option--selected_11qky_114",
-  select__list__option__icon: w,
-  "select-button": "_select-button_11qky_127",
-  "base-Select-popup": "_base-Select-popup_11qky_145",
-  "select-button__text": "_select-button__text_11qky_148",
-  "select-button__icon": "_select-button__icon_11qky_157",
-  "select-button--active": "_select-button--active_11qky_163"
-}, C = (t) => /* @__PURE__ */ o.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ o.createElement("path", { d: "M2.11104 4.9999C2.36691 4.9999 2.62291 5.09756 2.81791 5.29287L8.11104 10.5843L13.4048 5.29053C13.7954 4.8999 14.4282 4.8999 14.8188 5.29053C15.2095 5.68115 15.2095 6.31396 14.8188 6.70459L8.81885 12.7046C8.42822 13.0952 7.79541 13.0952 7.40479 12.7046L1.40479 6.70459C1.01416 6.31396 1.01416 5.68115 1.40479 5.29053C1.59854 5.09678 1.85479 4.9999 2.11104 4.9999Z", fill: "currentColor" })), f = (t) => /* @__PURE__ */ o.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ o.createElement("path", { d: "M13.8889 11C13.633 11 13.377 10.9023 13.182 10.707L7.8889 5.41563L2.59515 10.7094C2.20453 11.1 1.57172 11.1 1.18109 10.7094C0.790466 10.3188 0.790466 9.68594 1.18109 9.29532L7.18109 3.29532C7.57172 2.90469 8.20453 2.90469 8.59515 3.29532L14.5952 9.29532C14.9858 9.68594 14.9858 10.3188 14.5952 10.7094C14.4014 10.9031 14.1452 11 13.8889 11Z", fill: "#3F3D4B", fillOpacity: 0.88 })), E = u((t, a) => {
-  const { children: c, disabled: i, className: n, "data-testid": r, prefix: s, onClick: h } = t, p = t["aria-expanded"];
-  return /* @__PURE__ */ l(
-    "button",
-    {
-      className: b(n, p ? e["select-button--active"] : "", e["select-button"]),
-      type: "button",
-      onClick: h,
-      disabled: i,
-      "data-testid": r,
-      ref: a,
-      children: [
-        /* @__PURE__ */ l("span", { className: e["select-button__text"], children: [
-          s && /* @__PURE__ */ _(y, { children: s }),
-          /* @__PURE__ */ _(y, { children: c })
-        ] }),
-        /* @__PURE__ */ _("span", { className: e["select-button__icon"], children: p ? /* @__PURE__ */ _(f, {}) : /* @__PURE__ */ _(C, {}) })
-      ]
-    }
-  );
-});
-export {
-  E as S,
-  e as s
-};

package/dist/Toggle-BCgIItCc.js

@@ -1,142 +0,0 @@
-import './assets/Toggle.css';
-import { jsx as p, jsxs as u } from "react/jsx-runtime";
-import { forwardRef as d, cloneElement as m } from "react";
-import { c as n } from "./clsx-DB4S2d7J.js";
-import { Icon as b } from "./components/Icon/Icon.js";
-import "./components/Button/Button.js";
-import "./components/Dialog/Backdrop.js";
-import { Typography as k } from "./components/Typography/Typography.js";
-import "./components/IconButton/IconButton.js";
-import "./components/Select/Select.js";
-import { Skeleton as f } from "./components/Skeleton/Skeleton.js";
-import "./components/Table/Table.js";
-import "./components/Tabs/Tabs.js";
-import { s as h } from "./Group-B3p31ftp.js";
-import "./contexts/SnackbarProvider/SnackbarProvider.js";
-import { B as x } from "./Button-2b1peDFT.js";
-const C = "_chip_ccpk4_60", N = "_chip__adornment_ccpk4_114", v = "_chip__remove_ccpk4_119", s = {
-  "u-typography-h1": "_u-typography-h1_ccpk4_1",
-  "u-typography-h2": "_u-typography-h2_ccpk4_8",
-  "u-typography-h3": "_u-typography-h3_ccpk4_15",
-  "u-typography-h4": "_u-typography-h4_ccpk4_22",
-  "u-typography-h5": "_u-typography-h5_ccpk4_29",
-  "u-typography-h6": "_u-typography-h6_ccpk4_36",
-  "u-typography-base": "_u-typography-base_ccpk4_43",
-  "u-typography-base--xxl": "_u-typography-base--xxl_ccpk4_48",
-  "u-typography-base--xl": "_u-typography-base--xl_ccpk4_52",
-  "u-typography-base--lg": "_u-typography-base--lg_ccpk4_56",
-  "u-typography-base--sm": "_u-typography-base--sm_ccpk4_60",
-  chip: C,
-  "u-typography-base--bold": "_u-typography-base--bold_ccpk4_64",
-  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_ccpk4_67",
-  "u-typography-base--underlined": "_u-typography-base--underlined_ccpk4_70",
-  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_ccpk4_73",
-  "chip--button": "_chip--button_ccpk4_89",
-  "chip--outlined": "_chip--outlined_ccpk4_102",
-  "chip--contained": "_chip--contained_ccpk4_108",
-  chip__adornment: N,
-  chip__remove: v,
-  "chip__remove--disabled": "_chip__remove--disabled_ccpk4_130",
-  "chip-loading": "_chip-loading_ccpk4_134"
-}, T = d((a, t) => {
-  const { children: c, onClickContent: e, disabled: r, className: i, variant: l } = a;
-  let o = n(
-    s.chip,
-    { [s["chip--outlined"]]: l === "outlined" },
-    { [s["chip--contained"]]: l === "contained" },
-    i
-  );
-  return e ? (o += ` ${s["chip--button"]}`, /* @__PURE__ */ p(
-    x,
-    {
-      onClick: e,
-      disabled: r,
-      "data-testid": a["data-testid"],
-      ref: t,
-      className: o,
-      children: c
-    }
-  )) : /* @__PURE__ */ p("span", { "data-testid": a["data-testid"], ref: t, className: o, children: c });
-}), A = (a) => {
-  const { icon: t, disabled: c = !1, className: e } = a;
-  if (t) {
-    const r = n(s.chip__adornment, e), i = c ? m(t, { color: "rgb(var(--gray-95-rgb), 0.4)" }) : t;
-    return /* @__PURE__ */ p("span", { className: r, children: i });
-  }
-  return null;
-}, G = d((a, t) => {
-  const {
-    label: c,
-    className: e,
-    onClickContent: r,
-    leftAdornment: i,
-    loading: l = !1,
-    disabled: o = !1,
-    variant: g = "default",
-    onClickRemove: y
-  } = a;
-  return l ? /* @__PURE__ */ p(
-    f,
-    {
-      className: n(s["chip-loading"], a["className-skeleton"]),
-      "data-testid": a["data-testid-skeleton"]
-    }
-  ) : /* @__PURE__ */ u(
-    T,
-    {
-      ref: t,
-      "data-testid": a["data-testid"],
-      onClickContent: r,
-      disabled: o,
-      className: e,
-      variant: g,
-      children: [
-        i && /* @__PURE__ */ p(A, { ...i, disabled: o }),
-        c,
-        y && /* @__PURE__ */ p(
-          "span",
-          {
-            className: n(s.chip__remove, { [s["chip__remove--disabled"]]: o }),
-            role: "button",
-            tabIndex: o ? -1 : 0,
-            "aria-label": "remove",
-            onClick: (_) => {
-              _ == null || _.stopPropagation(), _ == null || _.nativeEvent.stopImmediatePropagation(), y();
-            },
-            "aria-disabled": o,
-            children: /* @__PURE__ */ p(b, { icon: "circle-xmark", size: "1.125rem", color: "rgba(var(--gray-95-rgb), 0.45)" })
-          }
-        )
-      ]
-    }
-  );
-}), H = d((a, t) => {
-  const { text: c, isSelected: e = !1, value: r, onChange: i } = a;
-  return /* @__PURE__ */ u(
-    "label",
-    {
-      className: n([h.toggle__label], { [h["toggle__label--selected"]]: e }),
-      "data-testid": a["data-testid"],
-      children: [
-        /* @__PURE__ */ p(
-          "input",
-          {
-            className: n([h.toggle__input]),
-            type: "radio",
-            ref: t,
-            value: r.toString(),
-            onChange: () => i(r),
-            role: "radio",
-            checked: e,
-            "aria-checked": e
-          }
-        ),
-        /* @__PURE__ */ p(k, { bold: !0, children: c })
-      ]
-    }
-  );
-});
-export {
-  G as C,
-  H as T
-};

package/dist/useCompoundItem-D1iRfg8D.js

@@ -1,84 +0,0 @@
-import * as o from "react";
-import { u as g } from "./useEnhancedEffect-CJGo-L3B.js";
-let I = 0;
-function x(e) {
-  const [n, t] = o.useState(e), u = e || n;
-  return o.useEffect(() => {
-    n == null && (I += 1, t(`mui-${I}`));
-  }, [n]), u;
-}
-const p = o.useId;
-function y(e) {
-  if (p !== void 0) {
-    const n = p();
-    return e ?? n;
-  }
-  return x(e);
-}
-const b = /* @__PURE__ */ o.createContext(null);
-process.env.NODE_ENV !== "production" && (b.displayName = "CompoundComponentContext");
-function S(e) {
-  const n = Array.from(e.keys()).map((t) => {
-    const u = e.get(t);
-    return {
-      key: t,
-      subitem: u
-    };
-  });
-  return n.sort((t, u) => {
-    const s = t.subitem.ref.current, r = u.subitem.ref.current;
-    return s === null || r === null || s === r ? 0 : s.compareDocumentPosition(r) & Node.DOCUMENT_POSITION_PRECEDING ? 1 : -1;
-  }), new Map(n.map((t) => [t.key, t.subitem]));
-}
-function E() {
-  const [e, n] = o.useState(/* @__PURE__ */ new Map()), t = o.useRef(/* @__PURE__ */ new Set()), u = o.useCallback(function(a) {
-    t.current.delete(a), n((m) => {
-      const c = new Map(m);
-      return c.delete(a), c;
-    });
-  }, []), s = o.useCallback(function(a, m) {
-    let c;
-    return typeof a == "function" ? c = a(t.current) : c = a, t.current.add(c), n((C) => {
-      const l = new Map(C);
-      return l.set(c, m), l;
-    }), {
-      id: c,
-      deregister: () => u(c)
-    };
-  }, [u]), r = o.useMemo(() => S(e), [e]), i = o.useCallback(function(a) {
-    return Array.from(r.keys()).indexOf(a);
-  }, [r]);
-  return {
-    contextValue: o.useMemo(() => ({
-      getItemIndex: i,
-      registerItem: s,
-      totalSubitemCount: e.size
-    }), [i, s, e.size]),
-    subitems: r
-  };
-}
-function N(e, n) {
-  const t = o.useContext(b);
-  if (t === null)
-    throw new Error("useCompoundItem must be used within a useCompoundParent");
-  const {
-    registerItem: u
-  } = t, [s, r] = o.useState(typeof e == "function" ? void 0 : e);
-  return g(() => {
-    const {
-      id: i,
-      deregister: d
-    } = u(e, n);
-    return r(i), d;
-  }, [u, n, e]), {
-    id: s,
-    index: s !== void 0 ? t.getItemIndex(s) : -1,
-    totalItemCount: t.totalSubitemCount
-  };
-}
-export {
-  b as C,
-  N as a,
-  E as b,
-  y as u
-};

package/dist/useEventCallback-xTG9piMa.js

@@ -1,45 +0,0 @@
-import { P as a } from "./index-CH45lKw7.js";
-import * as c from "react";
-import { u as m } from "./useEnhancedEffect-CJGo-L3B.js";
-function s(e, n) {
-  return process.env.NODE_ENV === "production" ? () => null : function(...o) {
-    return e(...o) || n(...o);
-  };
-}
-function d(e) {
-  const {
-    prototype: n = {}
-  } = e;
-  return !!n.isReactComponent;
-}
-function f(e, n, t, o, l) {
-  const u = e[n], p = l || n;
-  if (u == null || // When server-side rendering React doesn't warn either.
-  // This is not an accurate check for SSR.
-  // This is only in place for Emotion compat.
-  // TODO: Revisit once https://github.com/facebook/react/issues/20047 is resolved.
-  typeof window > "u")
-    return null;
-  let r;
-  const i = u.type;
-  return typeof i == "function" && !d(i) && (r = "Did you accidentally use a plain function component for an element instead?"), r !== void 0 ? new Error(`Invalid ${o} \`${p}\` supplied to \`${t}\`. Expected an element that can hold a ref. ${r} For more information see https://mui.com/r/caveat-with-refs-guide`) : null;
-}
-const y = s(a.element, f);
-y.isRequired = s(a.element.isRequired, f);
-function E(e) {
-  return e && e.ownerDocument || document;
-}
-function h(e) {
-  const n = c.useRef(e);
-  return m(() => {
-    n.current = e;
-  }), c.useRef((...t) => (
-    // @ts-expect-error hide `this`
-    (0, n.current)(...t)
-  )).current;
-}
-export {
-  y as e,
-  E as o,
-  h as u
-};