@pismo/marola 1.0.0-beta.59 → 1.0.0-beta.6

package/dist/components/TextDisplay/TextDisplay.js

@@ -1,51 +1,37 @@
 import '../../assets/TextDisplay.css';
-import { jsxs as f, jsx as d } from "react/jsx-runtime";
-import { c as $ } from "../../clsx-DB4S2d7J.js";
-import { Skeleton as m } from "../Skeleton/Skeleton.js";
-import { Typography as y } from "../Typography/Typography.js";
-const g = "_container_ia8vu_1", e = {
-  container: g,
-  "container--inline": "_container--inline_ia8vu_5"
-}, i = ({
-  label: h,
-  value: x,
-  isLoading: o = !1,
-  "data-testid": t = "TextDisplay",
+import { jsxs as h, jsx as c } from "react/jsx-runtime";
+import { Skeleton as d } from "../Skeleton/Skeleton.js";
+import { Typography as o } from "../Typography/Typography.js";
+const x = "_container_13z5o_1", f = {
+  container: x
+}, $ = ({
+  label: m,
+  value: y,
+  isLoading: e = !1,
+  testId: t = "TextDisplay",
   labelOptions: r,
-  valueOptions: c,
-  inline: a
-}) => {
-  const _ = (r == null ? void 0 : r.color) || (a ? "var(--black-100)" : "var(--gray-90)");
-  return /* @__PURE__ */ f(
-    "div",
+  valueOptions: a
+}) => /* @__PURE__ */ h("div", { className: f.container, children: [
+  /* @__PURE__ */ c(
+    o,
     {
-      className: $([e.container, { [e["container--inline"]]: a }]),
-      "data-testid": `${t}-container`,
-      children: [
-        /* @__PURE__ */ d(
-          y,
-          {
-            color: _,
-            variant: (r == null ? void 0 : r.variant) || "base",
-            "data-testid": `${t}-label`,
-            bold: (r == null ? void 0 : r.bold) ?? a,
-            children: o ? /* @__PURE__ */ d(m, { style: { width: 70, marginBottom: 2 }, "data-testid": `${t}-skeletonLabel` }) : h
-          }
-        ),
-        /* @__PURE__ */ d(
-          y,
-          {
-            bold: (c == null ? void 0 : c.bold) ?? !a,
-            color: (c == null ? void 0 : c.color) || "var(--gray-90)",
-            variant: (c == null ? void 0 : c.variant) || (a ? "base" : "base-lg"),
-            "data-testid": `${t}-value`,
-            children: o ? /* @__PURE__ */ d(m, { style: { width: 100 }, "data-testid": `${t}-skeletonValue` }) : x || "-"
-          }
-        )
-      ]
+      color: (r == null ? void 0 : r.color) || "var(--gray-90)",
+      variant: (r == null ? void 0 : r.variant) || "base",
+      "data-testid": `${t}-label`,
+      children: e ? /* @__PURE__ */ c(d, { style: { width: 70, marginBottom: 2 }, "data-testid": `${t}-skeletonLabel` }) : m
     }
-  );
-};
+  ),
+  /* @__PURE__ */ c(
+    o,
+    {
+      bold: !0,
+      color: (a == null ? void 0 : a.color) || "var(--gray-90)",
+      variant: (a == null ? void 0 : a.variant) || "base-lg",
+      "data-testid": `${t}-value`,
+      children: e ? /* @__PURE__ */ c(d, { style: { width: 100 }, "data-testid": `${t}-skeletonValue` }) : y || "-"
+    }
+  )
+] });
 export {
-  i as TextDisplay
+  $ as TextDisplay
 };

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

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ label, value, isLoading, "data-testid": dataTestId, labelOptions, valueOptions, inline, }: import('./TextDisplay').TextDisplayProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ label, value, isLoading, testId, labelOptions, valueOptions, }: import('./TextDisplay').TextDisplayProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
 };
 export default meta;
@@ -11,4 +11,3 @@ export declare const Simple: Story;
 export declare const WithLoading: Story;
 export declare const Size: Story;
 export declare const Color: Story;
-export declare const Horizontal: Story;

package/dist/components/Toggle/Toggle.js

@@ -1,22 +1,22 @@
-import '../../assets/Toggle.css';
+import '../../assets/Toggle2.css';
 import { jsxs as j, jsx as P } from "react/jsx-runtime";
 import { c as O } from "../../clsx-DB4S2d7J.js";
-import { u as E, b as k, g as v, a as U, _ as H, c as C, P as e, d as M, e as A } from "../../useSlotProps-C_I1kEHr.js";
+import { u as E, b as k, g as v, a as U, _ as q, c as C, P as e, d as H, e as M } from "../../index-CH45lKw7.js";
 import * as F from "react";
-import { u as D } from "../../useControlled-CCMYYdCM.js";
-import { u as L } from "../../useIsFocusVisible-BH4IAdcw.js";
-function W(l) {
+import { u as A } from "../../useControlled-CCMYYdCM.js";
+import { u as D } from "../../useIsFocusVisible-BH4IAdcw.js";
+function L(l) {
   const {
     checked: s,
     defaultChecked: i,
-    disabled: a,
+    disabled: r,
     onBlur: c,
     onChange: h,
     onFocus: n,
     onFocusVisible: u,
-    readOnly: r,
+    readOnly: a,
     required: p
-  } = l, [N, V] = D({
+  } = l, [N, V] = A({
     controlled: s,
     default: !!i,
     name: "Switch",
@@ -29,26 +29,26 @@ function W(l) {
     onBlur: B,
     onFocus: _,
     ref: f
-  } = L(), [y, q] = F.useState(!1);
-  a && y && q(!1), F.useEffect(() => {
+  } = D(), [y, z] = F.useState(!1);
+  r && y && z(!1), F.useEffect(() => {
     b.current = y;
   }, [y, b]);
   const m = F.useRef(null), w = (t) => (o) => {
     var d;
-    m.current || (m.current = o.currentTarget), _(o), b.current === !0 && (q(!0), u == null || u(o)), n == null || n(o), (d = t.onFocus) == null || d.call(t, o);
+    m.current || (m.current = o.currentTarget), _(o), b.current === !0 && (z(!0), u == null || u(o)), n == null || n(o), (d = t.onFocus) == null || d.call(t, o);
   }, T = (t) => (o) => {
     var d;
-    B(o), b.current === !1 && q(!1), c == null || c(o), (d = t.onBlur) == null || d.call(t, o);
+    B(o), b.current === !1 && z(!1), c == null || c(o), (d = t.onBlur) == null || d.call(t, o);
   }, x = E(f, m);
   return {
     checked: N,
-    disabled: !!a,
+    disabled: !!r,
     focusVisible: y,
     getInputProps: (t = {}) => k({
       checked: s,
       defaultChecked: i,
-      disabled: a,
-      readOnly: r,
+      disabled: r,
+      readOnly: a,
       ref: x,
       required: p,
       type: "checkbox",
@@ -60,11 +60,11 @@ function W(l) {
       onBlur: T(t)
     }),
     inputRef: x,
-    readOnly: !!r
+    readOnly: !!a
   };
 }
 const I = "Switch";
-function z(l) {
+function W(l) {
   return v(I, l);
 }
 U(I, ["root", "input", "track", "thumb", "checked", "disabled", "focusVisible", "readOnly"]);
@@ -72,32 +72,32 @@ const G = ["checked", "defaultChecked", "disabled", "onBlur", "onChange", "onFoc
   const {
     checked: s,
     disabled: i,
-    focusVisible: a,
+    focusVisible: r,
     readOnly: c
   } = l;
-  return M({
-    root: ["root", s && "checked", i && "disabled", a && "focusVisible", c && "readOnly"],
+  return H({
+    root: ["root", s && "checked", i && "disabled", r && "focusVisible", c && "readOnly"],
     thumb: ["thumb"],
     input: ["input"],
     track: ["track"]
-  }, A(z));
+  }, M(W));
 }, $ = /* @__PURE__ */ F.forwardRef(function(s, i) {
-  var a, c, h, n;
+  var r, c, h, n;
   const {
     slotProps: u = {},
-    slots: r = {}
-  } = s, p = H(s, G), {
+    slots: a = {}
+  } = s, p = q(s, G), {
     getInputProps: N,
     checked: V,
     disabled: S,
     focusVisible: b,
     readOnly: B
-  } = W(s), _ = k({}, s, {
+  } = L(s), _ = k({}, s, {
     checked: V,
     disabled: S,
     focusVisible: b,
     readOnly: B
-  }), f = J(_), y = (a = r.root) != null ? a : "span", q = C({
+  }), f = J(_), y = (r = a.root) != null ? r : "span", z = C({
     elementType: y,
     externalSlotProps: u.root,
     externalForwardedProps: p,
@@ -106,24 +106,24 @@ const G = ["checked", "defaultChecked", "disabled", "onBlur", "onChange", "onFoc
     },
     ownerState: _,
     className: f.root
-  }), m = (c = r.thumb) != null ? c : "span", w = C({
+  }), m = (c = a.thumb) != null ? c : "span", w = C({
     elementType: m,
     externalSlotProps: u.thumb,
     ownerState: _,
     className: f.thumb
-  }), T = (h = r.input) != null ? h : "input", x = C({
+  }), T = (h = a.input) != null ? h : "input", x = C({
     elementType: T,
     getSlotProps: N,
     externalSlotProps: u.input,
     ownerState: _,
     className: f.input
-  }), R = r.track === null ? () => null : (n = r.track) != null ? n : "span", t = C({
+  }), R = a.track === null ? () => null : (n = a.track) != null ? n : "span", t = C({
     elementType: R,
     externalSlotProps: u.track,
     ownerState: _,
     className: f.track
   });
-  return /* @__PURE__ */ j(y, k({}, q, {
+  return /* @__PURE__ */ j(y, k({}, z, {
     children: [/* @__PURE__ */ P(R, k({}, t)), /* @__PURE__ */ P(m, k({}, w)), /* @__PURE__ */ P(T, k({}, x))]
   }));
 });
@@ -198,51 +198,51 @@ process.env.NODE_ENV !== "production" && ($.propTypes = {
     track: e.oneOfType([e.elementType, e.oneOf([null])])
   })
 });
-const K = "_toggle__label_p0gq9_43", Q = "_toggle_p0gq9_43", X = "_input_p0gq9_89", Y = "_thumb_p0gq9_100", Z = "_track_p0gq9_114", g = {
-  "u-typography-h1": "_u-typography-h1_p0gq9_1",
-  "u-typography-h2": "_u-typography-h2_p0gq9_8",
-  "u-typography-h3": "_u-typography-h3_p0gq9_15",
-  "u-typography-h4": "_u-typography-h4_p0gq9_22",
-  "u-typography-h5": "_u-typography-h5_p0gq9_29",
-  "u-typography-h6": "_u-typography-h6_p0gq9_36",
-  "u-typography-base": "_u-typography-base_p0gq9_43",
+const K = "_toggle__label_1rzg2_43", Q = "_toggle_1rzg2_43", X = "_input_1rzg2_88", Y = "_thumb_1rzg2_99", Z = "_track_1rzg2_113", g = {
+  "u-typography-h1": "_u-typography-h1_1rzg2_1",
+  "u-typography-h2": "_u-typography-h2_1rzg2_8",
+  "u-typography-h3": "_u-typography-h3_1rzg2_15",
+  "u-typography-h4": "_u-typography-h4_1rzg2_22",
+  "u-typography-h5": "_u-typography-h5_1rzg2_29",
+  "u-typography-h6": "_u-typography-h6_1rzg2_36",
+  "u-typography-base": "_u-typography-base_1rzg2_43",
   toggle__label: K,
-  "u-typography-base--xxl": "_u-typography-base--xxl_p0gq9_49",
-  "u-typography-base--xl": "_u-typography-base--xl_p0gq9_53",
-  "u-typography-base--lg": "_u-typography-base--lg_p0gq9_57",
-  "u-typography-base--sm": "_u-typography-base--sm_p0gq9_61",
-  "u-typography-base--bold": "_u-typography-base--bold_p0gq9_65",
-  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_p0gq9_68",
-  "u-typography-base--underlined": "_u-typography-base--underlined_p0gq9_71",
-  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_p0gq9_74",
+  "u-typography-base--xxl": "_u-typography-base--xxl_1rzg2_48",
+  "u-typography-base--xl": "_u-typography-base--xl_1rzg2_52",
+  "u-typography-base--lg": "_u-typography-base--lg_1rzg2_56",
+  "u-typography-base--sm": "_u-typography-base--sm_1rzg2_60",
+  "u-typography-base--bold": "_u-typography-base--bold_1rzg2_64",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1rzg2_67",
+  "u-typography-base--underlined": "_u-typography-base--underlined_1rzg2_70",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1rzg2_73",
   toggle: Q,
-  "toggle__toggle-el-wrapper": "_toggle__toggle-el-wrapper_p0gq9_85",
+  "toggle__toggle-el-wrapper": "_toggle__toggle-el-wrapper_1rzg2_84",
   input: X,
   thumb: Y,
   track: Z,
-  "toggle--focus-visible": "_toggle--focus-visible_p0gq9_124",
-  "toggle--checked": "_toggle--checked_p0gq9_128",
-  "toggle--disabled": "_toggle--disabled_p0gq9_141"
-}, ae = ({
+  "toggle--focus-visible": "_toggle--focus-visible_1rzg2_123",
+  "toggle--checked": "_toggle--checked_1rzg2_127",
+  "toggle--disabled": "_toggle--disabled_1rzg2_140"
+}, re = ({
   label: l,
   checked: s,
   disabled: i,
-  classNameWrapper: a,
+  classNameWrapper: r,
   classNameInput: c,
   "data-testid": h,
   onChange: n,
   classNameLabel: u
 }) => {
-  const r = (p) => {
+  const a = (p) => {
     n == null || n(p);
   };
-  return /* @__PURE__ */ j("div", { className: O(g.toggle, a), "data-testid": h, children: [
+  return /* @__PURE__ */ j("div", { className: O(g.toggle, r), "data-testid": h, children: [
     /* @__PURE__ */ P(
       $,
       {
         checked: s === !0,
         disabled: i,
-        onChange: r,
+        onChange: a,
         "aria-label": l,
         slotProps: {
           root: (p) => ({
@@ -262,5 +262,5 @@ const K = "_toggle__label_p0gq9_43", Q = "_toggle_p0gq9_43", X = "_input_p0gq9_8
   ] });
 };
 export {
-  ae as Toggle
+  re as Toggle
 };

package/dist/components/ToggleGroup/Group.d.ts

@@ -13,8 +13,6 @@ export type ToggleGroupProps = {
      * error and legend append their names e.g. {data-testid}-error and {data-testid}-legend
      * */
     'data-testid'?: string;
-    /** Controls if children items should have same width */
-    equalWidth?: boolean;
 };
 declare const Group: import('react').ForwardRefExoticComponent<ToggleGroupProps & import('react').RefAttributes<HTMLFieldSetElement>>;
 export default Group;

package/dist/components/ToggleGroup/Group.js

@@ -1,9 +1,7 @@
 import "react/jsx-runtime";
 import "react";
-import "../../clsx-DB4S2d7J.js";
 import "../Icon/Icon.js";
-import "../Typography/Typography.js";
-import { G as e } from "../../Group-DspH8hyO.js";
+import { G as i } from "../../Group-B3p31ftp.js";
 export {
-  e as default
+  i as default
 };

package/dist/components/ToggleGroup/Toggle.d.ts

@@ -10,8 +10,6 @@ export type ToggleGroupItemProps<T extends string | number> = {
     onChange: (value: T | '') => void;
     /** Dataset test id only used for tests to reach in and grab the rendered DOM node of the label */
     'data-testid'?: string;
-    /** Controls if component should be disabled */
-    disabled?: boolean;
 };
 declare const Toggle: import('react').ForwardRefExoticComponent<ToggleGroupItemProps<string | number> & import('react').RefAttributes<HTMLInputElement>>;
 export default Toggle;

package/dist/components/ToggleGroup/Toggle.js

@@ -2,20 +2,16 @@ import "react/jsx-runtime";
 import "react";
 import "../../clsx-DB4S2d7J.js";
 import "../Icon/Icon.js";
-import "../Typography/Typography.js";
-import "../Input/Input.js";
-import "../Avatar/Avatar.js";
 import "../Button/Button.js";
-import { T as j } from "../../Toggle-2kIaSHMl.js";
-import "../Dialog/Dialog.js";
+import { T as b } from "../../Toggle-BCgIItCc.js";
+import "../Dialog/Backdrop.js";
+import "../Typography/Typography.js";
 import "../IconButton/IconButton.js";
-import "../InputSearch/InputSearch.js";
 import "../Select/Select.js";
-import "../Popover/Popover.js";
 import "../Table/Table.js";
 import "../Tabs/Tabs.js";
-import "../../Group-DspH8hyO.js";
+import "../../Group-B3p31ftp.js";
 import "../../contexts/SnackbarProvider/SnackbarProvider.js";
 export {
-  j as default
+  b as default
 };

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -1,5 +1,5 @@
-import { T as e } from "../../Toggle-2kIaSHMl.js";
-import { G as p } from "../../Group-DspH8hyO.js";
+import { T as e } from "../../Toggle-BCgIItCc.js";
+import { G as p } from "../../Group-B3p31ftp.js";
 export {
   p as ToggleGroup,
   e as ToggleGroupItem

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

@@ -11,7 +11,6 @@ declare const meta: {
         error?: import('react').ReactNode;
         children: import('react').ReactElement<import('./Toggle.tsx').ToggleGroupItemProps<string | number>, string | import('react').JSXElementConstructor<any>>[];
         'data-testid'?: string | undefined;
-        equalWidth?: boolean | undefined;
         ref?: import('react').LegacyRef<HTMLFieldSetElement> | undefined;
         key?: import('react').Key | null | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
@@ -24,4 +23,3 @@ type Story = StoryObj<typeof meta>;
 export declare const Simple: Story;
 export declare const NoLegend: Story;
 export declare const WithError: Story;
-export declare const ItemsWithEqualWidth: Story;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -14,7 +14,7 @@ export type TooltipProps = {
     onClose?: () => void;
     /** The color of the tooltip */
     theme?: 'white' | 'black';
-    /** The padding applied to the tooltip */
+    /** Dhe padding applied to the tooltip */
     padding?: 'small' | 'normal';
     /** The Position where the tooltip will be display relative to the anchor element */
     position?: PopupPlacement;
@@ -28,8 +28,6 @@ export type TooltipProps = {
     'data-testid'?: string;
     /** Function thats return the HTML Element of target. Important to EllipsisTooltip knows if the node needs or not the ellipsis */
     onTargetCreated?: (e: HTMLElement) => void;
-    /** Disable uses portal (true by default) */
-    disablePortal?: boolean;
 };
 declare const Tooltip: ({ arialRole, children: childrenProp, className, disableHoverListener, onClose, padding, position, open: openProp, theme, title, onTargetCreated, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export { Tooltip };

package/dist/components/Tooltip/Tooltip.js

@@ -2,10 +2,10 @@ import '../../assets/Tooltip.css';
 import { jsx as a, jsxs as v, Fragment as P } from "react/jsx-runtime";
 import * as u from "react";
 import { useRef as R, useState as T, useEffect as E, isValidElement as q, cloneElement as M } from "react";
-import { T as O, P as V } from "../../Popup-Ck3XlWMq.js";
-import { _ as $, b as z, P as l } from "../../useSlotProps-C_I1kEHr.js";
+import { T as O, P as V } from "../../Popup-B6ZSGIEI.js";
+import { _ as $, b as z, P as l } from "../../index-CH45lKw7.js";
 import { c as D } from "../../clsx-DB4S2d7J.js";
-import { C as F } from "../../ClickAwayListener-DbEYZpyh.js";
+import { C as F } from "../../ClickAwayListener-BSW-Nd-y.js";
 function I() {
   const e = u.useContext(O);
   if (!e)
@@ -114,10 +114,10 @@ const B = "_tooltip_1dujm_1", m = {
     /* @__PURE__ */ a(
       V,
       {
-        disablePortal: !0,
         ...N,
         open: j,
         anchor: t == null ? void 0 : t.current,
+        disablePortal: !0,
         style: w,
         role: e,
         placement: f,

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

@@ -22,7 +22,6 @@ declare const meta: {
         style?: import('react').CSSProperties | undefined;
         'data-testid'?: string | undefined;
         onTargetCreated?: ((e: HTMLElement) => void) | undefined;
-        disablePortal?: boolean | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;

package/dist/components/Typography/Typography.js

@@ -1,65 +1,65 @@
 import '../../assets/Typography.css';
-import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as c, useMemo as f } from "react";
-import { bemify as x, getBEMBase as k, getBEMBlock as B } from "../../utils/styleStrings.js";
-import { c as $ } from "../../clsx-DB4S2d7J.js";
+import { jsx as b } from "react/jsx-runtime";
+import { forwardRef as m, useMemo as c } from "react";
+import { bemify as f, getBEMBase as x, getBEMBlock as k } from "../../utils/styleStrings.js";
+import { c as B } from "../../clsx-DB4S2d7J.js";
 const t = {
-  "u-typography-h1": "_u-typography-h1_gn8st_1",
-  "u-typography-h2": "_u-typography-h2_gn8st_8",
-  "u-typography-h3": "_u-typography-h3_gn8st_15",
-  "u-typography-h4": "_u-typography-h4_gn8st_22",
-  "u-typography-h5": "_u-typography-h5_gn8st_29",
-  "u-typography-h6": "_u-typography-h6_gn8st_36",
-  "u-typography-base": "_u-typography-base_gn8st_43",
-  "u-typography-base--xxl": "_u-typography-base--xxl_gn8st_49",
-  "u-typography-base--xl": "_u-typography-base--xl_gn8st_53",
-  "u-typography-base--lg": "_u-typography-base--lg_gn8st_57",
-  "u-typography-base--sm": "_u-typography-base--sm_gn8st_61",
-  "u-typography-base--bold": "_u-typography-base--bold_gn8st_65",
-  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_gn8st_68",
-  "u-typography-base--underlined": "_u-typography-base--underlined_gn8st_71",
-  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_gn8st_74"
-}, E = (e) => {
+  "u-typography-h1": "_u-typography-h1_zizdh_1",
+  "u-typography-h2": "_u-typography-h2_zizdh_8",
+  "u-typography-h3": "_u-typography-h3_zizdh_15",
+  "u-typography-h4": "_u-typography-h4_zizdh_22",
+  "u-typography-h5": "_u-typography-h5_zizdh_29",
+  "u-typography-h6": "_u-typography-h6_zizdh_36",
+  "u-typography-base": "_u-typography-base_zizdh_43",
+  "u-typography-base--xxl": "_u-typography-base--xxl_zizdh_48",
+  "u-typography-base--xl": "_u-typography-base--xl_zizdh_52",
+  "u-typography-base--lg": "_u-typography-base--lg_zizdh_56",
+  "u-typography-base--sm": "_u-typography-base--sm_zizdh_60",
+  "u-typography-base--bold": "_u-typography-base--bold_zizdh_64",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_zizdh_67",
+  "u-typography-base--underlined": "_u-typography-base--underlined_zizdh_70",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_zizdh_73"
+}, $ = (e) => {
   const a = e.toString();
   let r = "base";
   return a.match(/^h[1-6]/) && (r = a), r;
-}, M = c((e, a) => {
+}, E = m((e, a) => {
   const {
     children: r,
-    className: h,
+    className: s,
     underline: y = !1,
-    element: g = "span",
-    bold: n = !1,
-    color: l,
-    variant: u = E(g),
-    strikethrough: s = !1,
-    elementProps: i
-  } = e, b = g, d = f(() => {
-    const o = `u-typography-${x(u)}`, _ = k(o), p = B(o);
-    return $(
-      t[_],
-      { [t[`${o}`]]: o !== _ },
-      h,
-      { [t[`${p}--bold`]]: n },
+    element: u = "span",
+    bold: i = !1,
+    color: d,
+    variant: _ = $(u),
+    strikethrough: h = !1,
+    elementProps: n
+  } = e, l = u, z = c(() => {
+    const o = `u-typography-${f(_)}`, g = x(o), p = k(o);
+    return B(
+      t[g],
+      { [t[`${o}`]]: o !== g },
+      s,
+      { [t[`${p}--bold`]]: i },
       { [t[`${p}--underlined`]]: y },
-      { [t[`${p}--strikethrough`]]: s },
-      { [t[`${p}--strikethrough-underlined`]]: s && s && y }
+      { [t[`${p}--strikethrough`]]: h },
+      { [t[`${p}--strikethrough-underlined`]]: h && h && y }
     );
-  }, [n, h, s, y, u]);
-  return /* @__PURE__ */ m(
-    b,
+  }, [i, s, h, y, _]);
+  return /* @__PURE__ */ b(
+    l,
     {
-      style: { color: l },
+      style: { color: d },
       ref: a,
       "data-testid": e["data-testid"],
-      ...i ?? {},
-      className: d,
+      ...n ?? {},
+      className: z,
       children: r
     }
   );
-}), w = M;
+}), j = E;
 export {
-  w as Text,
-  M as Typography,
-  M as default
+  j as Text,
+  E as Typography,
+  E as default
 };