@pismo/marola 0.0.1-alpha.12 → 0.0.1-alpha.14

package/dist/components/InputSearch/InputSearch.js

@@ -1,29 +1,34 @@
 import '../../assets/InputSearch.css';
-import { jsx as t } from "react/jsx-runtime";
-import { c as r } from "../../clsx-DB4S2d7J.js";
-import { Icon as p } from "../Icon/Icon.js";
-import { Input as m } from "../Input/Input.js";
-const u = "_inputSearch_8ayrz_1", a = {
-  inputSearch: u
-}, I = ({
-  label: n,
-  placeholder: c,
-  classNameWrapper: s,
-  classNameInputSearch: e,
-  disabled: i,
-  "data-testid": o
-}) => /* @__PURE__ */ t("div", { className: r(a.inputSearch, s), children: /* @__PURE__ */ t(
-  m,
-  {
-    label: n,
-    type: "search",
-    placeholder: c,
-    leftIcon: /* @__PURE__ */ t(p, { icon: "magnifying-glass" }),
-    "data-testid": o,
-    disabled: i,
-    classNameInput: r(a.input, e)
-  }
-) });
+import { jsx as e } from "react/jsx-runtime";
+import { c as m } from "../../clsx-DB4S2d7J.js";
+import { Icon as u } from "../Icon/Icon.js";
+import { Input as p } from "../Input/Input.js";
+const l = "_inputSearch_lmxu2_1", h = {
+  inputSearch: l
+};
+let n;
+const x = ({
+  classNameWrapper: r,
+  triggerDelay: o = 500,
+  value: c,
+  onChange: i = () => {
+  },
+  ...a
+}) => {
+  const s = (t) => {
+    n && clearTimeout(n), n = setTimeout(() => i(t), o);
+  };
+  return /* @__PURE__ */ e("div", { className: m(h.inputSearch, r), children: /* @__PURE__ */ e(
+    p,
+    {
+      type: "search",
+      ...a,
+      leftIcon: /* @__PURE__ */ e(u, { icon: "magnifying-glass" }),
+      defaultValue: c,
+      onChange: (t) => s(t)
+    }
+  ) });
+};
 export {
-  I as InputSearch
+  x as InputSearch
 };

package/dist/components/InputSearch/InputSearch.stories.d.ts

@@ -2,12 +2,28 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ label, placeholder, classNameWrapper, classNameInputSearch, disabled, "data-testid": dataTestId, }: import('react').InputHTMLAttributes<HTMLInputElement> & {
+    component: ({ classNameWrapper, triggerDelay, value, onChange, ...rest }: {
+        triggerDelay?: number | undefined;
+    } & import('react').InputHTMLAttributes<HTMLInputElement> & {
         label?: string | undefined;
-        placeholder?: string | undefined;
+        infoMessage?: string | undefined;
+        errorMessage?: string | undefined;
+        leftIcon?: import('react').ReactNode;
+        rightIcon?: import('react').ReactNode;
+        type?: "search" | "text" | "password" | undefined;
+        hideCharsCounter?: boolean | undefined;
         classNameWrapper?: string | undefined;
-        classNameInputSearch?: string | undefined;
-        'data-testid'?: string | undefined;
+        classNameLabel?: string | undefined;
+        classNameInput?: string | undefined;
+        classNameInfoMessage?: string | undefined;
+        classNameErrorMessage?: string | undefined;
+        classNameCharsCounter?: string | undefined;
+        'data-testid-wrapper'?: string | undefined;
+        'data-testid-label'?: string | undefined;
+        'data-testid-input'?: string | undefined;
+        'data-testid-infoMessage'?: string | undefined;
+        'data-testid-errorMessage'?: string | undefined;
+        'data-testid-charsCounter'?: string | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
@@ -18,5 +34,6 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Simple: Story;
 export declare const WithLabel: Story;
+export declare const WithCustomDelay: Story;
 export declare const WithPlaceholder: Story;
 export declare const Disabled: Story;

package/dist/components/InputSearch/InputSearch.stories.js

@@ -1,25 +1,61 @@
-import { InputSearch as a } from "./InputSearch.js";
-const l = {
+import { jsx as o } from "react/jsx-runtime";
+import { useState as l, useEffect as n } from "react";
+import { InputSearch as t } from "./InputSearch.js";
+const d = {
   title: "Components/InputSearch",
-  component: a,
+  component: t,
   tags: ["autodocs"],
   parameters: {
     layout: "padded"
   }
-}, r = {
-  args: {}
-}, t = {
+}, h = {
+  render: () => {
+    const [e, a] = l(void 0);
+    return n(() => {
+      e !== void 0 && alert("Search triggered after 500 milliseconds");
+    }, [e]), /* @__PURE__ */ o(t, { value: e, onChange: (r) => a(r.target.value) });
+  }
+}, m = {
   name: "With label",
-  args: {
-    label: "Search by name or id"
+  render: () => {
+    const [e, a] = l(void 0);
+    return n(() => {
+      e !== void 0 && alert("Search triggered after 500 milliseconds");
+    }, [e]), /* @__PURE__ */ o(t, { label: "Search by name or id", value: e, onChange: (r) => a(r.target.value) });
+  }
+}, u = {
+  name: "With custom delay",
+  render: () => {
+    const [e, a] = l(void 0);
+    return n(() => {
+      e !== void 0 && alert("Search triggered after 2000 milliseconds");
+    }, [e]), /* @__PURE__ */ o(
+      t,
+      {
+        label: "Search by name or id",
+        value: e,
+        onChange: (r) => a(r.target.value),
+        triggerDelay: 2e3
+      }
+    );
   }
-}, o = {
+}, g = {
   name: "With placeholder",
-  args: {
-    label: "Search",
-    placeholder: "Search by name or id"
+  render: () => {
+    const [e, a] = l(void 0);
+    return n(() => {
+      e !== void 0 && alert("Search triggered after 500 milliseconds");
+    }, [e]), /* @__PURE__ */ o(
+      t,
+      {
+        label: "Search",
+        placeholder: "Search by name or id",
+        value: e,
+        onChange: (r) => a(r.target.value)
+      }
+    );
   }
-}, c = {
+}, S = {
   args: {
     label: "Search",
     placeholder: "Search by name or id",
@@ -28,9 +64,10 @@ const l = {
   }
 };
 export {
-  c as Disabled,
-  r as Simple,
-  t as WithLabel,
-  o as WithPlaceholder,
-  l as default
+  S as Disabled,
+  h as Simple,
+  u as WithCustomDelay,
+  m as WithLabel,
+  g as WithPlaceholder,
+  d as default
 };

package/dist/components/LoadingSpinner/LoadingSpinner.d.ts

@@ -1,7 +1,7 @@
 export interface LoadingSpinnerProps {
     /** Whether to invert colours or not */
     invert?: boolean;
-    /** Space seperated list of CSS classes to apply */
+    /** Space separated list of CSS classes to apply */
     classNames?: string;
 }
 export declare const LoadingSpinner: ({ invert, classNames }: LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/LoadingSpinner/LoadingSpinner.stories.js

@@ -1,6 +1,5 @@
-import '../../assets/global.css';
 import { jsx as t } from "react/jsx-runtime";
-/* empty css                    */
+import "../Chip/Chip.js";
 import "../Button/Button.js";
 import "react";
 import "../Dialog/Backdrop.js";

package/dist/components/Select/Select.stories.js

@@ -1,6 +1,5 @@
-import '../../assets/global.css';
 import { jsxs as l, Fragment as t, jsx as e } from "react/jsx-runtime";
-/* empty css                    */
+import "../Chip/Chip.js";
 import "../Button/Button.js";
 import * as n from "react";
 import "../Dialog/Backdrop.js";

package/dist/components/Table/Table.js

@@ -1,37 +1,37 @@
 import '../../assets/Table.css';
-import { jsxs as w, jsx as r, Fragment as T } from "react/jsx-runtime";
-import * as c from "react";
-import { useState as u } from "react";
+import { jsxs as b, jsx as r, Fragment as v } from "react/jsx-runtime";
+import * as n from "react";
+import { useState as T } from "react";
 import { c as h } from "../../clsx-DB4S2d7J.js";
-import { paginationDefaultTranslations as b, Pagination as g } from "../Pagination/Pagination.js";
-import { sortTooltipDefaultTranslations as x, SortTooltip as q } from "../SortTooltip/SortTooltip.js";
+import { paginationDefaultTranslations as w, Pagination as u } from "../Pagination/Pagination.js";
+import { sortTooltipDefaultTranslations as x, SortTooltip as g } from "../SortTooltip/SortTooltip.js";
 import { TableProvider as N, useTable as C } from "./TableContext.js";
-const L = (l) => /* @__PURE__ */ c.createElement("svg", { width: 7, height: 10, viewBox: "0 0 7 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ c.createElement("g", { clipPath: "url(#clip0_2291_2457)" }, /* @__PURE__ */ c.createElement("path", { d: "M6.41658 3.93794C6.26731 3.93794 6.11798 3.88301 6.00423 3.77314L3.49991 1.35923L0.995768 3.77271C0.767904 3.99243 0.398763 3.99243 0.170898 3.77271C-0.0569661 3.55298 -0.0569661 3.19702 0.170898 2.97729L3.08756 0.164795C3.31543 -0.0549316 3.68457 -0.0549316 3.91243 0.164795L6.8291 2.97729C7.05697 3.19702 7.05697 3.55298 6.8291 3.77271C6.71553 3.88345 6.56605 3.93794 6.41658 3.93794Z", fill: "#1897F3" }), /* @__PURE__ */ c.createElement("path", { opacity: 0.4, d: "M6.41663 5.38022C6.26737 5.38022 6.11804 5.43516 6.00429 5.54502L3.49997 7.95894L0.99528 5.5437C0.767415 5.32397 0.398275 5.32397 0.17041 5.5437C-0.0574544 5.76343 -0.0574544 6.11938 0.17041 6.33911L3.08708 9.15161C3.31494 9.37134 3.68408 9.37134 3.91195 9.15161L6.82861 6.33911C7.05648 6.11938 7.05648 5.76343 6.82861 5.5437C6.71559 5.43472 6.56611 5.38022 6.41663 5.38022Z", fill: "#1897F3" })), /* @__PURE__ */ c.createElement("defs", null, /* @__PURE__ */ c.createElement("clipPath", { id: "clip0_2291_2457" }, /* @__PURE__ */ c.createElement("rect", { width: 7, height: 10, fill: "white" })))), E = "_table_xe8qp_1", v = "_th__wrapper_xe8qp_40", y = "_tr_xe8qp_58", P = "_td_xe8qp_62", t = {
+const L = (l) => /* @__PURE__ */ n.createElement("svg", { width: 7, height: 10, viewBox: "0 0 7 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ n.createElement("g", { clipPath: "url(#clip0_2291_2457)" }, /* @__PURE__ */ n.createElement("path", { d: "M6.41658 3.93794C6.26731 3.93794 6.11798 3.88301 6.00423 3.77314L3.49991 1.35923L0.995768 3.77271C0.767904 3.99243 0.398763 3.99243 0.170898 3.77271C-0.0569661 3.55298 -0.0569661 3.19702 0.170898 2.97729L3.08756 0.164795C3.31543 -0.0549316 3.68457 -0.0549316 3.91243 0.164795L6.8291 2.97729C7.05697 3.19702 7.05697 3.55298 6.8291 3.77271C6.71553 3.88345 6.56605 3.93794 6.41658 3.93794Z", fill: "#1897F3" }), /* @__PURE__ */ n.createElement("path", { opacity: 0.4, d: "M6.41663 5.38022C6.26737 5.38022 6.11804 5.43516 6.00429 5.54502L3.49997 7.95894L0.99528 5.5437C0.767415 5.32397 0.398275 5.32397 0.17041 5.5437C-0.0574544 5.76343 -0.0574544 6.11938 0.17041 6.33911L3.08708 9.15161C3.31494 9.37134 3.68408 9.37134 3.91195 9.15161L6.82861 6.33911C7.05648 6.11938 7.05648 5.76343 6.82861 5.5437C6.71559 5.43472 6.56611 5.38022 6.41663 5.38022Z", fill: "#1897F3" })), /* @__PURE__ */ n.createElement("defs", null, /* @__PURE__ */ n.createElement("clipPath", { id: "clip0_2291_2457" }, /* @__PURE__ */ n.createElement("rect", { width: 7, height: 10, fill: "white" })))), E = "_table_olvxb_1", y = "_th__wrapper_olvxb_40", P = "_tr_olvxb_58", B = "_td_olvxb_62", t = {
   table: E,
-  "table--full-width": "_table--full-width_xe8qp_5",
-  "table--white-theme": "_table--white-theme_xe8qp_8",
-  "table--transparent-theme": "_table--transparent-theme_xe8qp_11",
-  "cell--left-alignment": "_cell--left-alignment_xe8qp_14",
-  "cell--center-alignment": "_cell--center-alignment_xe8qp_18",
-  "cell--right-alignment": "_cell--right-alignment_xe8qp_22",
-  th__wrapper: v,
-  "th__wrapper--pressed": "_th__wrapper--pressed_xe8qp_43",
-  "th__wrapper--clickable": "_th__wrapper--clickable_xe8qp_47",
-  "th__sort-icon-container": "_th__sort-icon-container_xe8qp_50",
-  "tr__row-or-cell--disabled": "_tr__row-or-cell--disabled_xe8qp_58",
-  tr: y,
-  td: P,
-  "tr__row-or-cell--clickable": "_tr__row-or-cell--clickable_xe8qp_67",
-  "td__row-or-cell--clickable": "_td__row-or-cell--clickable_xe8qp_68",
-  "td__row-or-cell--disabled": "_td__row-or-cell--disabled_xe8qp_72",
-  "td-wrapper": "_td-wrapper_xe8qp_76"
-}, B = {
+  "table--full-width": "_table--full-width_olvxb_5",
+  "table--white-theme": "_table--white-theme_olvxb_8",
+  "table--transparent-theme": "_table--transparent-theme_olvxb_11",
+  "cell--left-alignment": "_cell--left-alignment_olvxb_14",
+  "cell--center-alignment": "_cell--center-alignment_olvxb_18",
+  "cell--right-alignment": "_cell--right-alignment_olvxb_22",
+  th__wrapper: y,
+  "th__wrapper--pressed": "_th__wrapper--pressed_olvxb_43",
+  "th__wrapper--clickable": "_th__wrapper--clickable_olvxb_47",
+  "th__sort-icon-container": "_th__sort-icon-container_olvxb_50",
+  "tr__row-or-cell--disabled": "_tr__row-or-cell--disabled_olvxb_58",
+  tr: P,
+  td: B,
+  "tr__row-or-cell--clickable": "_tr__row-or-cell--clickable_olvxb_67",
+  "td__row-or-cell--clickable": "_td__row-or-cell--clickable_olvxb_68",
+  "td__row-or-cell--disabled": "_td__row-or-cell--disabled_olvxb_72",
+  "td-wrapper": "_td-wrapper_olvxb_76"
+}, D = {
   pt: {
-    ...b.pt,
+    ...w.pt,
     ...x.pt
   },
   en: {
-    ...b.en,
+    ...w.en,
     ...x.en
   },
   // example to add a new language translation
@@ -48,75 +48,75 @@ const L = (l) => /* @__PURE__ */ c.createElement("svg", { width: 7, height: 10,
   children: l,
   theme: e = "white",
   fullWidth: a = !0,
-  className: n,
-  paginationProps: _,
-  language: s,
-  translations: o,
+  className: s,
+  paginationProps: o,
+  language: _,
+  translations: c,
   ...m
 }) => {
-  const p = h(
+  const i = h(
     t.table,
     a ? t["table--full-width"] : "",
     t[`table--${e}-theme`],
-    n
-  ), i = s && B[s] || o;
-  return /* @__PURE__ */ w(N, { initialTranslations: i, children: [
-    /* @__PURE__ */ r("table", { ...m, className: p, children: l }),
-    _ && /* @__PURE__ */ r(g, { ..._, t: i })
+    s
+  ), p = _ && D[_] || c;
+  return /* @__PURE__ */ b(N, { initialTranslations: p, children: [
+    /* @__PURE__ */ r("table", { ...m, className: i, children: l }),
+    o && /* @__PURE__ */ r(u, { ...o, t: p })
   ] });
-}, D = ({ children: l, ...e }) => /* @__PURE__ */ r("thead", { ...e, children: l }), F = ({ children: l, ...e }) => /* @__PURE__ */ r("tbody", { ...e, children: l }), M = ({ children: l, onClick: e, disabled: a, className: n, ..._ }) => {
-  const s = h(
+}, F = ({ children: l, ...e }) => /* @__PURE__ */ r("thead", { ...e, children: l }), M = ({ children: l, ...e }) => /* @__PURE__ */ r("tbody", { ...e, children: l }), O = ({ children: l, onClick: e, disabled: a, className: s, ...o }) => {
+  const _ = h(
     t.tr,
     e && !a ? t["tr__row-or-cell--clickable"] : a ? t["tr__row-or-cell--disabled"] : "",
-    n
+    s
   );
-  return /* @__PURE__ */ r("tr", { ..._, className: s, onClick: () => !a && (e == null ? void 0 : e()), children: l });
-}, O = ({ children: l, onClick: e, disabled: a, className: n, align: _ = "left", ...s }) => {
-  const o = h(
+  return /* @__PURE__ */ r("tr", { ...o, className: _, onClick: () => !a && (e == null ? void 0 : e()), children: l });
+}, $ = ({ children: l, onClick: e, disabled: a, className: s, align: o = "left", ..._ }) => {
+  const c = h(
     t.td,
     e && !a ? t["td__row-or-cell--clickable"] : a ? t["td__row-or-cell--disabled"] : "",
-    t[`cell--${_}-alignment`],
-    n
+    t[`cell--${o}-alignment`],
+    s
   );
-  return /* @__PURE__ */ r("td", { ...s, className: o, onClick: () => !a && (e == null ? void 0 : e()), children: /* @__PURE__ */ r("span", { className: t["td-wrapper"], children: l }) });
-}, $ = ({
+  return /* @__PURE__ */ r("td", { ..._, className: c, onClick: () => !a && (e == null ? void 0 : e()), children: /* @__PURE__ */ r("span", { className: t["td-wrapper"], children: l }) });
+}, j = ({
   children: l,
   onSort: e,
   sortType: a,
-  className: n,
-  classNameTooltip: _,
-  align: s = "left",
-  ...o
+  className: s,
+  classNameTooltip: o,
+  align: _ = "left",
+  ...c
 }) => {
-  const { translations: m } = C(), [p, i] = u(!1), f = h(
+  const { translations: m } = C(), [i, p] = T(!1), f = h(
     t.th__wrapper,
-    p ? t["th__wrapper--pressed"] : "",
+    i ? t["th__wrapper--pressed"] : "",
     e ? t["th__wrapper--clickable"] : "",
-    n
+    s
   );
-  return /* @__PURE__ */ r("th", { ...o, className: t[`cell--${s}-alignment`], children: /* @__PURE__ */ w("span", { className: f, onClick: e && (() => i(!p)), children: [
+  return /* @__PURE__ */ r("th", { ...c, className: t[`cell--${_}-alignment`], children: /* @__PURE__ */ b("span", { className: f, onClick: e && (() => p(!i)), children: [
     /* @__PURE__ */ r("span", { children: l }),
-    e && /* @__PURE__ */ w(T, { children: [
+    e && /* @__PURE__ */ b(v, { children: [
       /* @__PURE__ */ r("span", { className: t["th__sort-icon-container"], children: /* @__PURE__ */ r(L, {}) }),
       /* @__PURE__ */ r(
-        q,
+        g,
         {
-          onClose: () => i(!1),
+          onClose: () => p(!1),
           onSort: e,
-          show: p,
+          show: i,
           sortType: a,
-          className: _,
+          className: o,
           t: m
         }
       )
     ] })
   ] }) });
 };
-d.THead = D;
-d.TBody = F;
-d.Tr = M;
-d.Td = O;
-d.Th = $;
+d.THead = F;
+d.TBody = M;
+d.Tr = O;
+d.Td = $;
+d.Th = j;
 export {
   d as Table
 };

package/dist/components/Typography/Typography.d.ts

@@ -9,7 +9,7 @@ export type TypographyProps = {
     element?: ElementType;
     /** Style to be visually displayed as  */
     variant?: VariantType;
-    /** Space seperated list of CSS classes to apply */
+    /** Space separated list of CSS classes to apply */
     className?: string;
     /** Whether to apply underline text decoration */
     underline?: boolean;

package/dist/components/Typography/Typography.js

@@ -1,81 +1,83 @@
 import '../../assets/Typography.css';
-import { jsx as f } from "react/jsx-runtime";
-import { forwardRef as c, useMemo as y } from "react";
-import { bemify as g, getBEMBase as k, getBEMBlock as q } from "../../utils/styleStrings.js";
-import { c as B } from "../../clsx-DB4S2d7J.js";
-const E = "_h1_13r5p_1", $ = "_h2_13r5p_11", w = "_h3_13r5p_21", M = "_h4_13r5p_31", v = "_body_13r5p_41", x = "_quote_13r5p_75", N = "_form__input_13r5p_98", T = "_form__hint_13r5p_103", j = "_form__label_13r5p_108", P = "_form__dropdown_13r5p_113", R = "_table__header_13r5p_131", S = "_table__body_13r5p_136", U = "_button_13r5p_159", _ = {
-  h1: E,
-  "h1--bold": "_h1--bold_13r5p_7",
-  h2: $,
-  "h2--bold": "_h2--bold_13r5p_17",
-  h3: w,
-  "h3--bold": "_h3--bold_13r5p_27",
-  h4: M,
-  "h4--bold": "_h4--bold_13r5p_37",
-  body: v,
-  "body--large": "_body--large_13r5p_46",
-  "body--medium": "_body--medium_13r5p_50",
-  "body--small": "_body--small_13r5p_54",
-  "body--tiny": "_body--tiny_13r5p_58",
-  "body--bold": "_body--bold_13r5p_62",
-  "body--strikethrough": "_body--strikethrough_13r5p_65",
-  "body--underlined": "_body--underlined_13r5p_68",
-  "body--strikethrough-underlined": "_body--strikethrough-underlined_13r5p_71",
-  quote: x,
-  "quote--large": "_quote--large_13r5p_80",
-  "quote--bold": "_quote--bold_13r5p_85",
-  "quote--strikethrough": "_quote--strikethrough_13r5p_88",
-  "quote--underlined": "_quote--underlined_13r5p_91",
-  "quote--strikethrough-underlined": "_quote--strikethrough-underlined_13r5p_94",
-  form__input: N,
-  form__hint: T,
-  form__label: j,
-  form__dropdown: P,
-  "form--bold": "_form--bold_13r5p_118",
-  "form--strikethrough": "_form--strikethrough_13r5p_121",
-  "form--underlined": "_form--underlined_13r5p_124",
-  "form--strikethrough-underlined": "_form--strikethrough-underlined_13r5p_127",
-  table__header: R,
-  table__body: S,
-  "table__body--secondary": "_table__body--secondary_13r5p_141",
-  "table--bold": "_table--bold_13r5p_146",
-  "table--strikethrough": "_table--strikethrough_13r5p_149",
-  "table--underlined": "_table--underlined_13r5p_152",
-  "table--strikethrough-underlined": "_table--strikethrough-underlined_13r5p_155",
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as f, useMemo as y } from "react";
+import { bemify as g, getBEMBase as p, getBEMBlock as q } from "../../utils/styleStrings.js";
+import { c as M } from "../../clsx-DB4S2d7J.js";
+const B = "_h1_1elsk_1", E = "_h2_1elsk_11", S = "_h3_1elsk_21", $ = "_h4_1elsk_31", w = "_body_1elsk_41", v = "_quote_1elsk_75", x = "_form__input_1elsk_98", N = "_form__hint_1elsk_103", T = "_form__label_1elsk_108", j = "_form__dropdown_1elsk_113", P = "_table__header_1elsk_131", R = "_table__body_1elsk_136", U = "_button_1elsk_159", V = "_SM_1elsk_178", t = {
+  h1: B,
+  "h1--bold": "_h1--bold_1elsk_7",
+  h2: E,
+  "h2--bold": "_h2--bold_1elsk_17",
+  h3: S,
+  "h3--bold": "_h3--bold_1elsk_27",
+  h4: $,
+  "h4--bold": "_h4--bold_1elsk_37",
+  body: w,
+  "body--large": "_body--large_1elsk_46",
+  "body--medium": "_body--medium_1elsk_50",
+  "body--small": "_body--small_1elsk_54",
+  "body--tiny": "_body--tiny_1elsk_58",
+  "body--bold": "_body--bold_1elsk_62",
+  "body--strikethrough": "_body--strikethrough_1elsk_65",
+  "body--underlined": "_body--underlined_1elsk_68",
+  "body--strikethrough-underlined": "_body--strikethrough-underlined_1elsk_71",
+  quote: v,
+  "quote--large": "_quote--large_1elsk_80",
+  "quote--bold": "_quote--bold_1elsk_85",
+  "quote--strikethrough": "_quote--strikethrough_1elsk_88",
+  "quote--underlined": "_quote--underlined_1elsk_91",
+  "quote--strikethrough-underlined": "_quote--strikethrough-underlined_1elsk_94",
+  form__input: x,
+  form__hint: N,
+  form__label: T,
+  form__dropdown: j,
+  "form--bold": "_form--bold_1elsk_118",
+  "form--strikethrough": "_form--strikethrough_1elsk_121",
+  "form--underlined": "_form--underlined_1elsk_124",
+  "form--strikethrough-underlined": "_form--strikethrough-underlined_1elsk_127",
+  table__header: P,
+  table__body: R,
+  "table__body--secondary": "_table__body--secondary_1elsk_141",
+  "table--bold": "_table--bold_1elsk_146",
+  "table--strikethrough": "_table--strikethrough_1elsk_149",
+  "table--underlined": "_table--underlined_1elsk_152",
+  "table--strikethrough-underlined": "_table--strikethrough-underlined_1elsk_155",
   button: U,
-  "button--bold": "_button--bold_13r5p_165",
-  "button--strikethrough": "_button--strikethrough_13r5p_168",
-  "button--underlined": "_button--underlined_13r5p_171",
-  "button--strikethrough-underlined": "_button--strikethrough-underlined_13r5p_174"
-}, V = ["form", "table"], W = (e) => {
-  const r = e.toString();
-  let t = "body";
-  return r.match(/^h[1-4]/) ? t = r : r.match(/^h[5-6]/) && (t = "h4"), r === "th" && (t = "table-header"), r === "td" && (t = "table-body"), t;
-}, F = c((e, r) => {
+  "button--bold": "_button--bold_1elsk_165",
+  "button--strikethrough": "_button--strikethrough_1elsk_168",
+  "button--underlined": "_button--underlined_1elsk_171",
+  "button--strikethrough-underlined": "_button--strikethrough-underlined_1elsk_174",
+  SM: V,
+  "SM--bold": "_SM--bold_1elsk_183"
+}, W = ["form", "table"], z = (o) => {
+  const e = o.toString();
+  let _ = "body";
+  return e.match(/^h[1-4]/) ? _ = e : e.match(/^h[5-6]/) && (_ = "h4"), e === "th" && (_ = "table-header"), e === "td" && (_ = "table-body"), _;
+}, G = f((o, e) => {
   const {
-    children: t,
-    className: b,
-    underline: l = !1,
-    element: h = "span",
-    bold: u = !1,
-    variant: i = W(h),
-    strikethrough: o = !1,
-    elementProps: a
-  } = e, p = h, m = y(() => {
-    const d = g(i, V), s = k(d), n = q(d);
-    return B(
-      _[s],
-      { [_[`${d}`]]: d !== s },
-      b,
-      { [_[`${n}--bold`]]: u },
-      { [_[`${n}--underlined`]]: l },
-      { [_[`${n}--strikethrough`]]: o },
-      { [_[`${n}--strikethrough-underlined`]]: o && o && l }
+    children: _,
+    className: n,
+    underline: d = !1,
+    element: b = "span",
+    bold: h = !1,
+    variant: u = z(b),
+    strikethrough: l = !1,
+    elementProps: k
+  } = o, a = b, m = y(() => {
+    const r = g(u, W), i = p(r), s = q(r);
+    return M(
+      t[i],
+      { [t[`${r}`]]: r !== i },
+      n,
+      { [t[`${s}--bold`]]: h },
+      { [t[`${s}--underlined`]]: d },
+      { [t[`${s}--strikethrough`]]: l },
+      { [t[`${s}--strikethrough-underlined`]]: l && l && d }
     );
-  }, [u, b, o, l, i]);
-  return /* @__PURE__ */ f(p, { ref: r, "data-testid": e["data-testid"], ...a ?? {}, className: m, children: t });
+  }, [h, n, l, d, u]);
+  return /* @__PURE__ */ c(a, { ref: e, "data-testid": o["data-testid"], ...k ?? {}, className: m, children: _ });
 });
 export {
-  F as Typography,
-  F as default
+  G as Typography,
+  G as default
 };

package/dist/components/Typography/Typography.stories.js

@@ -1,6 +1,5 @@
-import '../../assets/global.css';
 import { jsx as t } from "react/jsx-runtime";
-/* empty css                    */
+import "../Chip/Chip.js";
 import "../Button/Button.js";
 import "react";
 import "../Dialog/Backdrop.js";