@pismo/marola 0.0.1-alpha.32 → 0.0.1-alpha.5

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

@@ -1,33 +0,0 @@
-import { PopupPlacement } from '@mui/base';
-import { AriaRole, CSSProperties, 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;
-    /** Additional styles to be applied to the tooltip */
-    style?: CSSProperties;
-    /** Test id */
-    '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;
-};
-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

@@ -1,141 +1 @@
-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-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-BSW-Nd-y.js";
-function I() {
-  const e = u.useContext(O);
-  if (!e)
-    throw new Error("Missing transition context");
-  const {
-    registerTransition: o,
-    requestedEnter: r,
-    onExited: n
-  } = e;
-  return u.useEffect(() => o(), [o]), {
-    onExited: n,
-    requestedEnter: r
-  };
-}
-const W = ["children", "className", "enterAnimationName", "enterClassName", "exitAnimationName", "exitClassName"];
-function b(e) {
-  const {
-    children: o,
-    className: r,
-    enterAnimationName: n,
-    enterClassName: c,
-    exitAnimationName: _,
-    exitClassName: f
-  } = e, p = $(e, W), {
-    requestedEnter: d,
-    onExited: s
-  } = I(), i = u.useRef(!0);
-  u.useEffect(() => {
-    d && i.current && (i.current = !1);
-  }, [d]);
-  const N = u.useCallback((t) => {
-    t.animationName === _ ? (s(), i.current = !0) : t.animationName === n && (i.current = !1);
-  }, [s, _, n]);
-  return /* @__PURE__ */ a("div", z({
-    onAnimationEnd: N,
-    className: D(r, d ? c : f)
-  }, p, {
-    children: o
-  }));
-}
-process.env.NODE_ENV !== "production" && (b.propTypes = {
-  children: l.node,
-  className: l.string,
-  enterAnimationName: l.string,
-  enterClassName: l.string,
-  exitAnimationName: l.string,
-  exitClassName: l.string
-});
-const B = "_tooltip_1dujm_1", m = {
-  tooltip: B,
-  "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"
-}, X = ({
-  arialRole: e,
-  children: o,
-  className: r,
-  disableHoverListener: n,
-  onClose: c,
-  padding: _ = "small",
-  position: f = "bottom",
-  open: p,
-  theme: d = "black",
-  title: s,
-  onTargetCreated: i,
-  ...N
-}) => {
-  const t = R(null), [y, h] = T(p || !1);
-  let j = y;
-  E(() => {
-    h(p || !1);
-  }, [p]);
-  const A = q(o) ? o : /* @__PURE__ */ a("span", { children: o });
-  !s && s !== 0 && (j = !1);
-  const k = () => {
-    c == null || c(), !n && h(!1);
-  };
-  E(() => {
-    var C;
-    if (t != null && t.current) {
-      i == null || i(t == null ? void 0 : t.current);
-      const x = (C = t == null ? void 0 : t.current) == null ? void 0 : C.parentElement;
-      x && (n || (x.onpointerenter = () => h(!0), x.onpointerleave = () => h(!1)));
-    }
-  }, [t, n]);
-  const w = {
-    padding: f.match(/(bottom|top)/) ? ".25rem 0" : "0 .25rem",
-    zIndex: 1
-  }, S = [
-    m.tooltip,
-    m[`tooltip--${d}-theme`],
-    m[`tooltip--${_}-padding`],
-    r || ""
-  ].join(" ").trim(), g = {
-    ...A.props,
-    ref: t
-  };
-  return /* @__PURE__ */ v(P, { children: [
-    M(A, g),
-    /* @__PURE__ */ a(
-      V,
-      {
-        ...N,
-        open: j,
-        anchor: t == null ? void 0 : t.current,
-        disablePortal: !0,
-        style: w,
-        role: e,
-        placement: f,
-        children: /* @__PURE__ */ a(
-          b,
-          {
-            className: m["tooltip--animation"],
-            enterClassName: m["tooltip--anim-open"],
-            exitClassName: m["tooltip--anim-close"],
-            enterAnimationName: "tooltip--open-animation",
-            exitAnimationName: "tooltip--close-animation",
-            children: /* @__PURE__ */ a("div", { className: S, children: /* @__PURE__ */ a(F, { onClickAway: k, children: /* @__PURE__ */ a("div", { children: s }) }) })
-          }
-        )
-      }
-    )
-  ] });
-};
-export {
-  X as Tooltip
-};
+

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,64 @@
 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 k, useMemo as u } from "react";
+import { c } from "../../clsx-DB4S2d7J.js";
+const v = "_h1_nv7ki_1", f = "_h2_nv7ki_11", p = "_h3_nv7ki_21", g = "_h4_nv7ki_31", q = "_body_nv7ki_41", T = "_quote_nv7ki_75", $ = "_form__input_nv7ki_86", w = "_form__hint_nv7ki_91", x = "_form__label_nv7ki_96", N = "_form__dropdown_nv7ki_101", S = "_table__header_nv7ki_107", E = "_table__body_nv7ki_112", V = "_button_nv7ki_123", n = {
+  h1: v,
+  "h1--bold": "_h1--bold_nv7ki_7",
+  h2: f,
+  "h2--bold": "_h2--bold_nv7ki_17",
+  h3: p,
+  "h3--bold": "_h3--bold_nv7ki_27",
+  h4: g,
+  "h4--bold": "_h4--bold_nv7ki_37",
+  body: q,
+  "body--large": "_body--large_nv7ki_46",
+  "body--medium": "_body--medium_nv7ki_50",
+  "body--small": "_body--small_nv7ki_54",
+  "body--tiny": "_body--tiny_nv7ki_58",
+  "body--bold": "_body--bold_nv7ki_62",
+  "body--strikethrough": "_body--strikethrough_nv7ki_65",
+  "body--underlined": "_body--underlined_nv7ki_68",
+  "body--strikethrough-underlined": "_body--strikethrough-underlined_nv7ki_71",
+  quote: T,
+  "quote--large": "_quote--large_nv7ki_80",
+  form__input: $,
+  form__hint: w,
+  form__label: x,
+  form__dropdown: N,
+  table__header: S,
+  table__body: E,
+  "table__body--secondary": "_table__body--secondary_nv7ki_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"), "--"), _;
+}, R = k((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: d = !1,
+    element: i = "span",
+    bold: a = !1,
+    variant: t = j(i),
+    strikethrough: r = !1,
+    elementProps: s
+  } = e, h = i, m = u(() => c(
+    n[z(t)],
     l,
-    {
-      style: { color: d },
-      ref: a,
-      "data-testid": e["data-testid"],
-      ...n ?? {},
-      className: z,
-      children: r
-    }
-  );
+    { [n[`${t}--bold`]]: a },
+    { [n[`${t}--underlined`]]: d },
+    { [n[`${t}--strikethrough`]]: r },
+    { [n[`${t}--strikethrough-underlined`]]: r && r && d }
+  ), [a, l, r, d, t]);
+  return /* @__PURE__ */ y(h, { ref: _, "data-testid": o, ...s != null && s, className: m, children: b });
 });
 export {
-  T as Typography,
-  T as default
+  R as Typography,
+  R as default
 };