@pismo/marola 0.0.1-alpha.31 → 0.0.1-alpha.4

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

@@ -1,33 +1,22 @@
-import { ComponentType, ElementType, HTMLAttributes, LabelHTMLAttributes, ReactNode } from 'react';
+import { ComponentType, ElementType, HTMLAttributes, ReactNode } from 'react';
 
-export type VariantType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'base-lg' | 'base-xl' | 'base-xxl' | 'base' | 'base-sm';
+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 CommonTypographyHTMLAttributes = HTMLAttributes<HTMLParagraphElement> & HTMLAttributes<HTMLHeadingElement> & HTMLAttributes<HTMLSpanElement> & HTMLAttributes<HTMLTableCellElement>;
 export type TypographyProps = {
-    /** Text or children to display */
     children: ReactNode;
-    /** The HTML element to render as on the DOM */
+    elementProps?: HTMLAttributes<CommonTypographyHTMLAttributes>;
+    dataTestId?: string;
     element?: ElementType;
-    /** 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 */
+    variant?: VariantType;
     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,64 +1,73 @@
 import '../../assets/Typography.css';
-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) => {
-  const a = e.toString();
-  let r = "base";
-  return a.match(/^h[1-6]/) && (r = a), r;
-}, T = m((e, a) => {
+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", $ = "_quote_111i6_75", w = "_form__input_111i6_86", S = "_form__hint_111i6_91", x = "_form__label_111i6_96", N = "_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: $,
+  "quote--large": "_quote--large_111i6_80",
+  form__input: w,
+  form__hint: S,
+  form__label: x,
+  form__dropdown: N,
+  table__header: v,
+  table__body: E,
+  "table__body--secondary": "_table__body--secondary_111i6_117",
+  button: V
+}, j = (e) => {
+  const _ = e.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;
+}, z = (e) => {
+  let _ = e.replace(/^([a-z]*)-/, "$1__");
+  return _ = _.replace(new RegExp("(?<!-)-(?!-)", "g"), "--"), console.log("styleString", _), _;
+}, R = u((e, _) => {
   const {
-    children: r,
-    className: s,
-    underline: y = !1,
-    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 = k(o), p = x(o);
-    return B(
-      t[g],
-      { [t[`${o}`]]: o !== g },
-      s,
-      { [t[`${p}--bold`]]: i },
-      { [t[`${p}--underlined`]]: y },
-      { [t[`${p}--strikethrough`]]: h },
-      { [t[`${p}--strikethrough-underlined`]]: h && h && y }
-    );
-  }, [i, s, h, y, _]);
-  return /* @__PURE__ */ b(
+    dataTestId: o,
+    children: b,
+    className: l,
+    underline: n = !1,
+    element: i = "span",
+    bold: a = !1,
+    variant: t = j(i),
+    strikethrough: d = !1,
+    elementProps: s
+  } = e, h = i, m = c(() => f(
+    r[z(t)],
     l,
+    { [r[`${t}--bold`]]: a },
+    { [r[`${t}--underlined`]]: n },
+    { [r[`${t}--strikethrough`]]: d },
+    { [r[`${t}--strikethrough-underlined`]]: d && d && n }
+  ), [a, l, d, n, t]);
+  return /* @__PURE__ */ y(
+    h,
     {
-      style: { color: d },
-      ref: a,
-      "data-testid": e["data-testid"],
-      ...n ?? {},
-      className: z,
-      children: r
+      ref: _,
+      "data-testid": o,
+      ...s != null && s,
+      className: m,
+      children: b
     }
   );
 });
 export {
-  T as Typography,
-  T as default
+  R as Typography,
+  R as default
 };