@pismo/marola 0.0.1-alpha.2 → 0.0.1-alpha.20

package/dist/components/Toggle/Toggle.js

@@ -0,0 +1,266 @@
+import '../../assets/Toggle.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 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 A } from "../../useControlled-CCMYYdCM.js";
+import { u as D } from "../../useIsFocusVisible-BH4IAdcw.js";
+function L(l) {
+  const {
+    checked: s,
+    defaultChecked: i,
+    disabled: r,
+    onBlur: c,
+    onChange: h,
+    onFocus: n,
+    onFocusVisible: u,
+    readOnly: a,
+    required: p
+  } = l, [N, V] = A({
+    controlled: s,
+    default: !!i,
+    name: "Switch",
+    state: "checked"
+  }), S = (t) => (o) => {
+    var d;
+    o.nativeEvent.defaultPrevented || (V(o.target.checked), h == null || h(o), (d = t.onChange) == null || d.call(t, o));
+  }, {
+    isFocusVisibleRef: b,
+    onBlur: B,
+    onFocus: _,
+    ref: f
+  } = 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 && (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 && z(!1), c == null || c(o), (d = t.onBlur) == null || d.call(t, o);
+  }, x = E(f, m);
+  return {
+    checked: N,
+    disabled: !!r,
+    focusVisible: y,
+    getInputProps: (t = {}) => k({
+      checked: s,
+      defaultChecked: i,
+      disabled: r,
+      readOnly: a,
+      ref: x,
+      required: p,
+      type: "checkbox",
+      role: "switch",
+      "aria-checked": s
+    }, t, {
+      onChange: S(t),
+      onFocus: w(t),
+      onBlur: T(t)
+    }),
+    inputRef: x,
+    readOnly: !!a
+  };
+}
+const I = "Switch";
+function W(l) {
+  return v(I, l);
+}
+U(I, ["root", "input", "track", "thumb", "checked", "disabled", "focusVisible", "readOnly"]);
+const G = ["checked", "defaultChecked", "disabled", "onBlur", "onChange", "onFocus", "onFocusVisible", "readOnly", "required", "slotProps", "slots"], J = (l) => {
+  const {
+    checked: s,
+    disabled: i,
+    focusVisible: r,
+    readOnly: c
+  } = l;
+  return H({
+    root: ["root", s && "checked", i && "disabled", r && "focusVisible", c && "readOnly"],
+    thumb: ["thumb"],
+    input: ["input"],
+    track: ["track"]
+  }, M(W));
+}, $ = /* @__PURE__ */ F.forwardRef(function(s, i) {
+  var r, c, h, n;
+  const {
+    slotProps: u = {},
+    slots: a = {}
+  } = s, p = q(s, G), {
+    getInputProps: N,
+    checked: V,
+    disabled: S,
+    focusVisible: b,
+    readOnly: B
+  } = L(s), _ = k({}, s, {
+    checked: V,
+    disabled: S,
+    focusVisible: b,
+    readOnly: B
+  }), f = J(_), y = (r = a.root) != null ? r : "span", z = C({
+    elementType: y,
+    externalSlotProps: u.root,
+    externalForwardedProps: p,
+    additionalProps: {
+      ref: i
+    },
+    ownerState: _,
+    className: f.root
+  }), m = (c = a.thumb) != null ? c : "span", w = C({
+    elementType: m,
+    externalSlotProps: u.thumb,
+    ownerState: _,
+    className: f.thumb
+  }), T = (h = a.input) != null ? h : "input", x = C({
+    elementType: T,
+    getSlotProps: N,
+    externalSlotProps: u.input,
+    ownerState: _,
+    className: f.input
+  }), 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({}, z, {
+    children: [/* @__PURE__ */ P(R, k({}, t)), /* @__PURE__ */ P(m, k({}, w)), /* @__PURE__ */ P(T, k({}, x))]
+  }));
+});
+process.env.NODE_ENV !== "production" && ($.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * If `true`, the component is checked.
+   */
+  checked: e.bool,
+  /**
+   * Class name applied to the root element.
+   */
+  className: e.string,
+  /**
+   * The default checked state. Use when the component is not controlled.
+   */
+  defaultChecked: e.bool,
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: e.bool,
+  /**
+   * @ignore
+   */
+  onBlur: e.func,
+  /**
+   * Callback fired when the state is changed.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+   */
+  onChange: e.func,
+  /**
+   * @ignore
+   */
+  onFocus: e.func,
+  /**
+   * @ignore
+   */
+  onFocusVisible: e.func,
+  /**
+   * If `true`, the component is read only.
+   */
+  readOnly: e.bool,
+  /**
+   * If `true`, the `input` element is required.
+   */
+  required: e.bool,
+  /**
+   * The props used for each slot inside the Switch.
+   * @default {}
+   */
+  slotProps: e.shape({
+    input: e.oneOfType([e.func, e.object]),
+    root: e.oneOfType([e.func, e.object]),
+    thumb: e.oneOfType([e.func, e.object]),
+    track: e.oneOfType([e.func, e.object])
+  }),
+  /**
+   * The components used for each slot inside the Switch.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: e.shape({
+    input: e.elementType,
+    root: e.elementType,
+    thumb: e.elementType,
+    track: e.oneOfType([e.elementType, e.oneOf([null])])
+  })
+});
+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_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_1rzg2_84",
+  input: X,
+  thumb: Y,
+  track: Z,
+  "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: r,
+  classNameInput: c,
+  "data-testid": h,
+  onChange: n,
+  classNameLabel: u
+}) => {
+  const a = (p) => {
+    n == null || n(p);
+  };
+  return /* @__PURE__ */ j("div", { className: O(g.toggle, r), "data-testid": h, children: [
+    /* @__PURE__ */ P(
+      $,
+      {
+        checked: s === !0,
+        disabled: i,
+        onChange: a,
+        "aria-label": l,
+        slotProps: {
+          root: (p) => ({
+            className: O(g["toggle__toggle-el-wrapper"], {
+              [g["toggle--disabled"]]: p.disabled,
+              [g["toggle--focus-visible"]]: p.focusVisible,
+              [g["toggle--checked"]]: p.checked
+            })
+          }),
+          input: { className: O(g.input, c) },
+          thumb: { className: g.thumb },
+          track: { className: g.track }
+        }
+      }
+    ),
+    l && /* @__PURE__ */ P("label", { className: O(g.toggle__label, u), children: l })
+  ] });
+};
+export {
+  re as Toggle
+};

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

@@ -0,0 +1,21 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ label, checked, disabled, classNameWrapper, classNameInput, "data-testid": dataTestId, onChange, classNameLabel, }: import('react').InputHTMLAttributes<HTMLInputElement> & {
+        label?: string | undefined;
+        classNameWrapper?: string | undefined;
+        classNameInput?: string | undefined;
+        classNameLabel?: string | undefined;
+        'data-testid'?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const WithLabel: Story;
+export declare const Disabled: Story;

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

@@ -0,0 +1,29 @@
+import { PopupPlacement } from '@mui/base';
+import { AriaRole, ReactNode } from 'react';
+
+export type TooltipProps = {
+    /** Tooltip reference element. */
+    children: ReactNode;
+    /**  Tooltip title. Zero-length titles string, undefined, null and false are never displayed. */
+    title: ReactNode;
+    /** Should the tooltip be initially open */
+    open?: boolean;
+    /** Disable the hover listener */
+    disableHoverListener?: boolean;
+    /** Function to run when the tooltip is closed */
+    onClose?: () => void;
+    /** The color of the tooltip */
+    theme?: 'white' | 'black';
+    /** Dhe padding applied to the tooltip */
+    padding?: 'small' | 'normal';
+    /** The Position where the tooltip will be display relative to the anchor element */
+    position?: PopupPlacement;
+    /** Accessibility role label */
+    arialRole?: AriaRole;
+    /** Additional classnames to be applied to the tooltip */
+    className?: string;
+    /** Test id */
+    'data-testid'?: string;
+};
+declare const Tooltip: ({ arialRole, children: childrenProp, className, disableHoverListener, onClose, padding, position, open: openProp, theme, title, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export { Tooltip };

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,139 @@
+import '../../assets/Tooltip.css';
+import { jsx as i, jsxs as w, Fragment as S } from "react/jsx-runtime";
+import * as u from "react";
+import { useRef as v, useState as P, useEffect as E, isValidElement as R, cloneElement as q } from "react";
+import { T as M, P as O } from "../../Popup-B6ZSGIEI.js";
+import { _ as V, b as $, P as l } from "../../index-CH45lKw7.js";
+import { c as z } from "../../clsx-DB4S2d7J.js";
+import { C as D } from "../../ClickAwayListener-BSW-Nd-y.js";
+function F() {
+  const n = u.useContext(M);
+  if (!n)
+    throw new Error("Missing transition context");
+  const {
+    registerTransition: e,
+    requestedEnter: r,
+    onExited: o
+  } = n;
+  return u.useEffect(() => e(), [e]), {
+    onExited: o,
+    requestedEnter: r
+  };
+}
+const I = ["children", "className", "enterAnimationName", "enterClassName", "exitAnimationName", "exitClassName"];
+function g(n) {
+  const {
+    children: e,
+    className: r,
+    enterAnimationName: o,
+    enterClassName: c,
+    exitAnimationName: _,
+    exitClassName: f
+  } = n, p = V(n, I), {
+    requestedEnter: d,
+    onExited: a
+  } = F(), s = u.useRef(!0);
+  u.useEffect(() => {
+    d && s.current && (s.current = !1);
+  }, [d]);
+  const t = u.useCallback((h) => {
+    h.animationName === _ ? (a(), s.current = !0) : h.animationName === o && (s.current = !1);
+  }, [a, _, o]);
+  return /* @__PURE__ */ i("div", $({
+    onAnimationEnd: t,
+    className: z(r, d ? c : f)
+  }, p, {
+    children: e
+  }));
+}
+process.env.NODE_ENV !== "production" && (g.propTypes = {
+  children: l.node,
+  className: l.string,
+  enterAnimationName: l.string,
+  enterClassName: l.string,
+  exitAnimationName: l.string,
+  exitClassName: l.string
+});
+const W = "_tooltip_1dujm_1", m = {
+  tooltip: W,
+  "tooltip--small-padding": "_tooltip--small-padding_1dujm_5",
+  "tooltip--normal-padding": "_tooltip--normal-padding_1dujm_8",
+  "tooltip--white-theme": "_tooltip--white-theme_1dujm_11",
+  "tooltip--black-theme": "_tooltip--black-theme_1dujm_15",
+  "tooltip--animation": "_tooltip--animation_1dujm_20",
+  "tooltip--anim-open": "_tooltip--anim-open_1dujm_20",
+  "tooltip--open-animation": "_tooltip--open-animation_1dujm_1",
+  "tooltip--anim-close": "_tooltip--anim-close_1dujm_23",
+  "tooltip--close-animation": "_tooltip--close-animation_1dujm_1"
+}, U = ({
+  arialRole: n,
+  children: e,
+  className: r,
+  disableHoverListener: o,
+  onClose: c,
+  padding: _ = "small",
+  position: f = "bottom",
+  open: p,
+  theme: d = "black",
+  title: a,
+  ...s
+}) => {
+  const t = v(null), [h, N] = P(p || !1);
+  let j = h;
+  E(() => {
+    N(p || !1);
+  }, [p]);
+  const C = R(e) ? e : /* @__PURE__ */ i("span", { children: e });
+  !a && a !== 0 && (j = !1);
+  const b = () => {
+    c == null || c(), !o && N(!1);
+  };
+  E(() => {
+    var A;
+    if (t != null && t.current) {
+      const x = (A = t == null ? void 0 : t.current) == null ? void 0 : A.parentElement;
+      x && (o || (x.onpointerenter = () => N(!0), x.onpointerleave = () => N(!1)));
+    }
+  }, [t, o]);
+  const y = {
+    padding: f.match(/(bottom|top)/) ? ".25rem 0" : "0 .25rem",
+    zIndex: 1
+  }, T = [
+    m.tooltip,
+    m[`tooltip--${d}-theme`],
+    m[`tooltip--${_}-padding`],
+    r || ""
+  ].join(" ").trim(), k = {
+    ...C.props,
+    ref: t
+  };
+  return /* @__PURE__ */ w(S, { children: [
+    q(C, k),
+    /* @__PURE__ */ i(
+      O,
+      {
+        ...s,
+        open: j,
+        anchor: t == null ? void 0 : t.current,
+        disablePortal: !0,
+        style: y,
+        role: n,
+        placement: f,
+        children: /* @__PURE__ */ i(
+          g,
+          {
+            className: m["tooltip--animation"],
+            enterClassName: m["tooltip--anim-open"],
+            exitClassName: m["tooltip--anim-close"],
+            enterAnimationName: "tooltip--open-animation",
+            exitAnimationName: "tooltip--close-animation",
+            children: /* @__PURE__ */ i("div", { className: T, children: /* @__PURE__ */ i(D, { onClickAway: b, children: /* @__PURE__ */ i("div", { children: a }) }) })
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  U as Tooltip
+};

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

@@ -0,0 +1,33 @@
+import { TooltipProps } from './Tooltip.tsx';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ arialRole, children: childrenProp, className, disableHoverListener, onClose, padding, position, open: openProp, theme, title, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+        children: import('react').ReactNode;
+        title: import('react').ReactNode;
+        open?: boolean | undefined;
+        disableHoverListener?: boolean | undefined;
+        onClose?: (() => void) | undefined;
+        theme?: "black" | "white" | undefined;
+        padding?: "small" | "normal" | undefined;
+        position?: import('@floating-ui/utils').Placement | undefined;
+        arialRole?: import('react').AriaRole | undefined;
+        className?: string | undefined;
+        'data-testid'?: string | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const Onclose: Story;
+export declare const InitialOpen: Story;
+export declare const WhiteTheme: Story;
+export declare const DisabledHover: Story;
+export declare const NormalPadding: Story;
+export declare const Positioning: Story;

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

@@ -1,22 +1,33 @@
-import { ComponentType, ElementType, HTMLAttributes, ReactNode } from 'react';
+import { ComponentType, ElementType, HTMLAttributes, LabelHTMLAttributes, ReactNode } from 'react';
 
-export type VariantType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body-large" | "body-medium" | "body" | "body-small" | "body-tiny" | "quote-large" | "quote" | "form-input" | "form-label" | "form-hint" | "form-dropdown" | "table-header" | "table-body" | "table-body-secondary" | "button" | "link";
+export type VariantType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'base-lg' | 'base-xl' | 'base-xxl' | 'base' | 'base-sm';
 export type CommonTypographyHTMLAttributes = HTMLAttributes<HTMLParagraphElement> & HTMLAttributes<HTMLHeadingElement> & HTMLAttributes<HTMLSpanElement> & HTMLAttributes<HTMLTableCellElement>;
 export type TypographyProps = {
+    /** Text or children to display */
     children: ReactNode;
-    elementProps?: HTMLAttributes<CommonTypographyHTMLAttributes>;
-    dataTestId?: string;
+    /** The HTML element to render as on the DOM */
     element?: ElementType;
-    className?: string;
+    /** Style to be visually displayed as  */
     variant?: VariantType;
+    /** Space separated list of CSS classes to apply */
+    className?: string;
+    /** Color to apply */
+    color?: string;
+    /** Whether to apply underline text decoration */
     underline?: boolean;
+    /** Whether to apply strikethrough text decoration */
     strikethrough?: boolean;
+    /** Whether to set a higher 'bold' font weight */
     bold?: boolean;
+    /** Additional props to pass down to native HTML element e.g. dataset attributes  */
+    elementProps?: HTMLAttributes<CommonTypographyHTMLAttributes> & LabelHTMLAttributes<HTMLLabelElement>;
+    /** ID that tests can use to get this component from the DOM */
+    ['data-testid']?: string;
 };
 /**
  * Typography component provide HTML 'element' field (default span) and override
  * element specific styling with 'variant'. 'className' to provide additional
  * styling. elementProps to provide additional HTML element attributes
  */
-export declare const Typography: import('react').ForwardRefExoticComponent<TypographyProps & import("react").RefAttributes<ElementType | ComponentType>>;
+export declare const Typography: import('react').ForwardRefExoticComponent<TypographyProps & import('react').RefAttributes<ElementType | ComponentType>>;
 export default Typography;

package/dist/components/Typography/Typography.js

@@ -1,73 +1,64 @@
 import '../../assets/Typography.css';
-import { jsx as y } from "react/jsx-runtime";
-import { forwardRef as u, useMemo as c } from "react";
-import { c as f } from "../../clsx-DB4S2d7J.js";
-const p = "_h1_111i6_1", g = "_h2_111i6_11", k = "_h3_111i6_21", q = "_h4_111i6_31", T = "_body_111i6_41", w = "_quote_111i6_75", $ = "_form__input_111i6_86", x = "_form__hint_111i6_91", N = "_form__label_111i6_96", S = "_form__dropdown_111i6_101", v = "_table__header_111i6_107", E = "_table__body_111i6_112", V = "_button_111i6_123", r = {
-  h1: p,
-  "h1--bold": "_h1--bold_111i6_7",
-  h2: g,
-  "h2--bold": "_h2--bold_111i6_17",
-  h3: k,
-  "h3--bold": "_h3--bold_111i6_27",
-  h4: q,
-  "h4--bold": "_h4--bold_111i6_37",
-  body: T,
-  "body--large": "_body--large_111i6_46",
-  "body--medium": "_body--medium_111i6_50",
-  "body--small": "_body--small_111i6_54",
-  "body--tiny": "_body--tiny_111i6_58",
-  "body--bold": "_body--bold_111i6_62",
-  "body--strikethrough": "_body--strikethrough_111i6_65",
-  "body--underlined": "_body--underlined_111i6_68",
-  "body--strikethrough-underlined": "_body--strikethrough-underlined_111i6_71",
-  quote: w,
-  "quote--large": "_quote--large_111i6_80",
-  form__input: $,
-  form__hint: x,
-  form__label: N,
-  form__dropdown: S,
-  table__header: v,
-  table__body: E,
-  "table__body--secondary": "_table__body--secondary_111i6_117",
-  button: V
-}, j = (t) => {
-  const _ = t.toString();
-  let o = "body";
-  return _.match(/^h[1-4]/) ? o = _ : _.match(/^h[5-6]/) && (o = "h4"), _ === "th" && (o = "table-header"), _ === "td" && (o = "table-body"), o;
-}, I = (t) => {
-  let _ = t.replace(/form-/g, "form__");
-  return _ = _.replace(/table-/g, "table__"), _ = _.replace(new RegExp("(?<!-)-(?!-)", "g"), "--"), _;
-}, U = u((t, _) => {
+import { jsx as b } from "react/jsx-runtime";
+import { forwardRef as m, useMemo as c } from "react";
+import { bemify as f, getBEMBase as k, getBEMBlock as x } from "../../utils/styleStrings.js";
+import { c as B } from "../../clsx-DB4S2d7J.js";
+const t = {
+  "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 = (a) => {
+  const r = a.toString();
+  let h = "base";
+  return r.match(/^h[1-6]/) && (h = r), h;
+}, T = m((a, r) => {
   const {
-    dataTestId: o,
-    children: s,
-    className: n,
-    underline: l = !1,
-    element: i = "span",
-    bold: a = !1,
-    variant: e = j(i),
-    strikethrough: d = !1,
-    elementProps: b
-  } = t, h = i, m = c(() => f(
-    r[I(e)],
-    n,
-    { [r[`${e}--bold`]]: a },
-    { [r[`${e}--underlined`]]: l },
-    { [r[`${e}--strikethrough`]]: d },
-    { [r[`${e}--strikethrough-underlined`]]: d && d && l }
-  ), [a, n, d, l, e]);
-  return /* @__PURE__ */ y(
-    h,
+    children: h,
+    className: s,
+    underline: y = !1,
+    element: u = "span",
+    bold: i = !1,
+    color: d,
+    variant: g = E(u),
+    strikethrough: o = !1,
+    elementProps: n
+  } = a, l = u, z = c(() => {
+    const e = `u-typography-${f(g)}`, _ = k(e), p = x(e);
+    return console.log("variantBEMified: ", e), B(
+      t[_],
+      { [t[`${e}`]]: e !== _ },
+      s,
+      { [t[`${p}--bold`]]: i },
+      { [t[`${p}--underlined`]]: y },
+      { [t[`${p}--strikethrough`]]: o },
+      { [t[`${p}--strikethrough-underlined`]]: o && o && y }
+    );
+  }, [i, s, o, y, g]);
+  return /* @__PURE__ */ b(
+    l,
     {
-      ref: _,
-      "data-testid": o,
-      ...b != null && b,
-      className: m,
-      children: s
+      style: { color: d },
+      ref: r,
+      "data-testid": a["data-testid"],
+      ...n ?? {},
+      className: z,
+      children: h
     }
   );
 });
 export {
-  U as Typography,
-  U as default
+  T as Typography,
+  T as default
 };