@pismo/marola 0.0.1-alpha.17 → 0.0.1-alpha.18

package/dist/components/Tooltip/Tooltip.js

@@ -1,53 +1,52 @@
 import '../../assets/Tooltip.css';
-import { jsx as a } from "react/jsx-runtime";
-import * as d from "react";
-import { useRef as k, useState as E, useEffect as w } from "react";
-import { T as v, P } from "../../Popup-DwaWJ3ye.js";
-import { _ as S, a as q } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
-import { P as l } from "../../index-CtPvew6C.js";
-import { c as M } from "../../clsx-DB4S2d7J.js";
-import { C as O } from "../../ClickAwayListener-hSFuUJnv.js";
-function $() {
-  const n = d.useContext(v);
+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: i,
-    requestedEnter: t,
+    registerTransition: e,
+    requestedEnter: r,
     onExited: o
   } = n;
-  return d.useEffect(() => i(), [i]), {
+  return u.useEffect(() => e(), [e]), {
     onExited: o,
-    requestedEnter: t
+    requestedEnter: r
   };
 }
-const z = ["children", "className", "enterAnimationName", "enterClassName", "exitAnimationName", "exitClassName"];
-function A(n) {
+const I = ["children", "className", "enterAnimationName", "enterClassName", "exitAnimationName", "exitClassName"];
+function g(n) {
   const {
-    children: i,
-    className: t,
+    children: e,
+    className: r,
     enterAnimationName: o,
-    enterClassName: f,
-    exitAnimationName: p,
-    exitClassName: x
-  } = n, h = S(n, z), {
-    requestedEnter: c,
-    onExited: s
-  } = $(), m = d.useRef(!0);
-  d.useEffect(() => {
-    c && m.current && (m.current = !1);
-  }, [c]);
-  const e = d.useCallback((u) => {
-    u.animationName === p ? (s(), m.current = !0) : u.animationName === o && (m.current = !1);
-  }, [s, p, o]);
-  return /* @__PURE__ */ a("div", q({
-    onAnimationEnd: e,
-    className: M(t, c ? f : x)
-  }, h, {
-    children: i
+    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" && (A.propTypes = {
+process.env.NODE_ENV !== "production" && (g.propTypes = {
   children: l.node,
   className: l.string,
   enterAnimationName: l.string,
@@ -55,8 +54,8 @@ process.env.NODE_ENV !== "production" && (A.propTypes = {
   exitAnimationName: l.string,
   exitClassName: l.string
 });
-const D = "_tooltip_1dujm_1", r = {
-  tooltip: D,
+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",
@@ -66,62 +65,75 @@ const D = "_tooltip_1dujm_1", r = {
   "tooltip--open-animation": "_tooltip--open-animation_1dujm_1",
   "tooltip--anim-close": "_tooltip--anim-close_1dujm_23",
   "tooltip--close-animation": "_tooltip--close-animation_1dujm_1"
-}, K = ({
-  children: n,
-  show: i,
-  anchorRef: t,
-  onClose: o,
-  arialRole: f,
-  position: p = "bottom",
-  theme: x = "black",
-  padding: h = "small",
-  className: c,
-  disableHoverListener: s,
-  ...m
+}, 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 e = k(null), [u, g] = E(i || !1), [C, j] = E(t || null);
-  w(() => {
-    var _;
-    if (!t && (e != null && e.current)) {
-      const N = (_ = e == null ? void 0 : e.current) == null ? void 0 : _.parentElement;
-      N && (s || (N.onpointerenter = () => g(!0), N.onpointerleave = () => g(!1)), j(N));
+  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)));
     }
-  }, [e, s, t]);
-  const y = (_) => {
-    t != null && t.contains(_.target) || (o == null || o(), !s && g(!1));
-  }, T = {
-    padding: p.match(/(bottom|top)/) ? ".25rem 0" : "0 .25rem",
+  }, [t, o]);
+  const y = {
+    padding: f.match(/(bottom|top)/) ? ".25rem 0" : "0 .25rem",
     zIndex: 1
-  }, b = [
-    r.tooltip,
-    r[`tooltip--${x}-theme`],
-    r[`tooltip--${h}-padding`],
-    c || ""
-  ].join(" ").trim();
-  return /* @__PURE__ */ a("span", { ref: e, children: /* @__PURE__ */ a(
-    P,
-    {
-      ...m,
-      open: i || u,
-      anchor: C,
-      disablePortal: !0,
-      style: T,
-      role: f,
-      placement: p,
-      children: /* @__PURE__ */ a(
-        A,
-        {
-          className: r["tooltip--animation"],
-          enterClassName: r["tooltip--anim-open"],
-          exitClassName: r["tooltip--anim-close"],
-          enterAnimationName: "tooltip--open-animation",
-          exitAnimationName: "tooltip--close-animation",
-          children: /* @__PURE__ */ a("div", { className: b, children: /* @__PURE__ */ a(O, { onClickAway: y, children: /* @__PURE__ */ a("div", { children: n }) }) })
-        }
-      )
-    }
-  ) });
+  }, 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 {
-  K as Tooltip
+  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

@@ -11,6 +11,8 @@ export type TypographyProps = {
     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 */

package/dist/components/Typography/Typography.js

@@ -1,18 +1,18 @@
 import '../../assets/Typography.css';
-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,
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as y, useMemo as g } from "react";
+import { bemify as p, getBEMBase as q, getBEMBlock as M } from "../../utils/styleStrings.js";
+import { c as B } from "../../clsx-DB4S2d7J.js";
+const E = "_h1_1elsk_1", S = "_h2_1elsk_11", $ = "_h3_1elsk_21", w = "_h4_1elsk_31", v = "_body_1elsk_41", x = "_quote_1elsk_75", N = "_form__input_1elsk_98", T = "_form__hint_1elsk_103", j = "_form__label_1elsk_108", P = "_form__dropdown_1elsk_113", R = "_table__header_1elsk_131", U = "_table__body_1elsk_136", V = "_button_1elsk_159", W = "_SM_1elsk_178", t = {
+  h1: E,
   "h1--bold": "_h1--bold_1elsk_7",
-  h2: E,
+  h2: S,
   "h2--bold": "_h2--bold_1elsk_17",
-  h3: S,
+  h3: $,
   "h3--bold": "_h3--bold_1elsk_27",
-  h4: $,
+  h4: w,
   "h4--bold": "_h4--bold_1elsk_37",
-  body: w,
+  body: v,
   "body--large": "_body--large_1elsk_46",
   "body--medium": "_body--medium_1elsk_50",
   "body--small": "_body--small_1elsk_54",
@@ -21,51 +21,52 @@ const B = "_h1_1elsk_1", E = "_h2_1elsk_11", S = "_h3_1elsk_21", $ = "_h4_1elsk_
   "body--strikethrough": "_body--strikethrough_1elsk_65",
   "body--underlined": "_body--underlined_1elsk_68",
   "body--strikethrough-underlined": "_body--strikethrough-underlined_1elsk_71",
-  quote: v,
+  quote: x,
   "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__input: N,
+  form__hint: T,
+  form__label: j,
+  form__dropdown: P,
   "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__header: R,
+  table__body: U,
   "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: V,
   "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: W,
   "SM--bold": "_SM--bold_1elsk_183"
-}, W = ["form", "table"], z = (o) => {
+}, z = ["form", "table"], A = (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) => {
+}, H = y((o, e) => {
   const {
     children: _,
     className: n,
     underline: d = !1,
     element: b = "span",
     bold: h = !1,
-    variant: u = z(b),
+    color: k,
+    variant: u = A(b),
     strikethrough: l = !1,
-    elementProps: k
-  } = o, a = b, m = y(() => {
-    const r = g(u, W), i = p(r), s = q(r);
-    return M(
+    elementProps: a
+  } = o, m = b, c = g(() => {
+    const r = p(u, z), i = q(r), s = M(r);
+    return B(
       t[i],
       { [t[`${r}`]]: r !== i },
       n,
@@ -75,9 +76,19 @@ const B = "_h1_1elsk_1", E = "_h2_1elsk_11", S = "_h3_1elsk_21", $ = "_h4_1elsk_
       { [t[`${s}--strikethrough-underlined`]]: l && l && d }
     );
   }, [h, n, l, d, u]);
-  return /* @__PURE__ */ c(a, { ref: e, "data-testid": o["data-testid"], ...k ?? {}, className: m, children: _ });
+  return /* @__PURE__ */ f(
+    m,
+    {
+      style: { color: k },
+      ref: e,
+      "data-testid": o["data-testid"],
+      ...a ?? {},
+      className: c,
+      children: _
+    }
+  );
 });
 export {
-  G as Typography,
-  G as default
+  H as Typography,
+  H as default
 };

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

@@ -17,6 +17,7 @@ declare const meta: {
         element?: import('react').ElementType | undefined;
         variant?: import('./Typography').VariantType | undefined;
         className?: string | undefined;
+        color?: string | undefined;
         underline?: boolean | undefined;
         strikethrough?: boolean | undefined;
         bold?: boolean | undefined;