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

package/dist/components/Button/Button.js

@@ -1,52 +1,68 @@
 import '../../assets/Button.css';
-import { jsx as s, jsxs as u } from "react/jsx-runtime";
-import { forwardRef as c, useMemo as h } from "react";
-import { c as v } from "../../clsx-DB4S2d7J.js";
-import { LoadingSpinner as f } from "../LoadingSpinner/LoadingSpinner.js";
-import { B as p } from "../../Button-D--uN90N.js";
-const g = "_h1_nvysm_1", k = "_h2_nvysm_11", q = "_h3_nvysm_21", w = "_h4_nvysm_31", x = "_body_nvysm_41", N = "_quote_nvysm_75", B = "_form__input_nvysm_86", j = "_form__hint_nvysm_91", S = "_form__label_nvysm_96", $ = "_form__dropdown_nvysm_101", C = "_table__header_nvysm_107", L = "_table__body_nvysm_112", M = "_button_nvysm_123", o = {
-  h1: g,
-  "h1--bold": "_h1--bold_nvysm_7",
-  h2: k,
-  "h2--bold": "_h2--bold_nvysm_17",
-  h3: q,
-  "h3--bold": "_h3--bold_nvysm_27",
-  h4: w,
-  "h4--bold": "_h4--bold_nvysm_37",
-  body: x,
-  "body--large": "_body--large_nvysm_46",
-  "body--medium": "_body--medium_nvysm_50",
-  "body--small": "_body--small_nvysm_54",
-  "body--tiny": "_body--tiny_nvysm_58",
-  "body--bold": "_body--bold_nvysm_62",
-  "body--strikethrough": "_body--strikethrough_nvysm_65",
-  "body--underlined": "_body--underlined_nvysm_68",
-  "body--strikethrough-underlined": "_body--strikethrough-underlined_nvysm_71",
-  quote: N,
-  "quote--large": "_quote--large_nvysm_80",
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { forwardRef as m, useMemo as c } from "react";
+import { c as y } from "../../clsx-DB4S2d7J.js";
+import { LoadingSpinner as g } from "../LoadingSpinner/LoadingSpinner.js";
+import { B as f } from "../../Button-B1umG8kJ.js";
+const k = "_h1_2qr61_1", p = "_h2_2qr61_11", w = "_h3_2qr61_21", x = "_h4_2qr61_31", N = "_body_2qr61_41", v = "_quote_2qr61_75", B = "_form__input_2qr61_98", j = "_form__hint_2qr61_103", S = "_form__label_2qr61_108", $ = "_form__dropdown_2qr61_113", C = "_table__header_2qr61_131", L = "_table__body_2qr61_136", M = "_button_2qr61_159", r = {
+  h1: k,
+  "h1--bold": "_h1--bold_2qr61_7",
+  h2: p,
+  "h2--bold": "_h2--bold_2qr61_17",
+  h3: w,
+  "h3--bold": "_h3--bold_2qr61_27",
+  h4: x,
+  "h4--bold": "_h4--bold_2qr61_37",
+  body: N,
+  "body--large": "_body--large_2qr61_46",
+  "body--medium": "_body--medium_2qr61_50",
+  "body--small": "_body--small_2qr61_54",
+  "body--tiny": "_body--tiny_2qr61_58",
+  "body--bold": "_body--bold_2qr61_62",
+  "body--strikethrough": "_body--strikethrough_2qr61_65",
+  "body--underlined": "_body--underlined_2qr61_68",
+  "body--strikethrough-underlined": "_body--strikethrough-underlined_2qr61_71",
+  quote: v,
+  "quote--large": "_quote--large_2qr61_80",
+  "quote--bold": "_quote--bold_2qr61_85",
+  "quote--strikethrough": "_quote--strikethrough_2qr61_88",
+  "quote--underlined": "_quote--underlined_2qr61_91",
+  "quote--strikethrough-underlined": "_quote--strikethrough-underlined_2qr61_94",
   form__input: B,
   form__hint: j,
   form__label: S,
   form__dropdown: $,
+  "form--bold": "_form--bold_2qr61_118",
+  "form--strikethrough": "_form--strikethrough_2qr61_121",
+  "form--underlined": "_form--underlined_2qr61_124",
+  "form--strikethrough-underlined": "_form--strikethrough-underlined_2qr61_127",
   table__header: C,
   table__body: L,
-  "table__body--secondary": "_table__body--secondary_nvysm_117",
+  "table__body--secondary": "_table__body--secondary_2qr61_141",
+  "table--bold": "_table--bold_2qr61_146",
+  "table--strikethrough": "_table--strikethrough_2qr61_149",
+  "table--underlined": "_table--underlined_2qr61_152",
+  "table--strikethrough-underlined": "_table--strikethrough-underlined_2qr61_155",
   button: M,
-  "button--primary": "_button--primary_nvysm_142",
-  "button--secondary": "_button--secondary_nvysm_161",
-  "button--quick": "_button--quick_nvysm_178",
-  "button__loading-container": "_button__loading-container_nvysm_201"
-}, E = c((d, r) => {
-  const { onClick: e, link: m, loading: y, children: n, type: b = "button", disabled: l, className: t, variant: _ = "primary" } = d, a = {
+  "button--bold": "_button--bold_2qr61_165",
+  "button--strikethrough": "_button--strikethrough_2qr61_168",
+  "button--underlined": "_button--underlined_2qr61_171",
+  "button--strikethrough-underlined": "_button--strikethrough-underlined_2qr61_174",
+  "button--primary": "_button--primary_2qr61_190",
+  "button--secondary": "_button--secondary_2qr61_209",
+  "button--quick": "_button--quick_2qr61_226",
+  "button__loading-container": "_button__loading-container_2qr61_249"
+}, E = m((n, d) => {
+  const { onClick: u, link: l, loading: b, children: o, type: i = "button", disabled: h, className: t, variant: _ = "primary" } = n, s = {
     invert: _ === "secondary" || _ === "quick"
-  }, i = h(
-    () => v([o.button, o[`button--${_}`], t]),
+  }, q = c(
+    () => y([r.button, r[`button--${_}`], t]),
     [t, _]
   );
-  return /* @__PURE__ */ s(p, { type: b, href: m, onClick: e, disabled: l, className: i, ref: r, children: y ? /* @__PURE__ */ u("div", { className: o["button__loading-container"], children: [
-    /* @__PURE__ */ s(f, { ...a }),
-    n
-  ] }) : n });
+  return /* @__PURE__ */ e(f, { type: i, href: l, onClick: u, disabled: h, className: q, ref: d, children: b ? /* @__PURE__ */ a("div", { className: r["button__loading-container"], children: [
+    /* @__PURE__ */ e(g, { ...s }),
+    o
+  ] }) : o });
 });
 export {
   E as Button,

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

@@ -0,0 +1,60 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Button').ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+    tags: string[];
+    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+        link: string;
+        loading?: boolean | undefined;
+        disabled?: boolean | undefined;
+        className?: string | undefined;
+        children: import('react').ReactNode;
+        variant?: ("primary" | "secondary" | "quick") | undefined;
+        type?: undefined;
+        onClick?: undefined;
+        ref?: import('react').LegacyRef<HTMLButtonElement> | undefined;
+        key?: import('react').Key | null | undefined;
+    } | {
+        onClick: () => void;
+        type?: "button" | "submit" | "reset" | undefined;
+        loading?: boolean | undefined;
+        disabled?: boolean | undefined;
+        className?: string | undefined;
+        children: import('react').ReactNode;
+        variant?: ("primary" | "secondary" | "quick") | undefined;
+        link?: undefined;
+        ref?: import('react').LegacyRef<HTMLButtonElement> | undefined;
+        key?: import('react').Key | null | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+    argTypes: {
+        onClick: {
+            if: {
+                arg: string;
+                exists: false;
+            };
+        };
+        type: {
+            control: {
+                type: "text";
+            };
+            if: {
+                arg: string;
+                exists: true;
+            };
+        };
+        link: {
+            control: {
+                type: "text";
+            };
+            if: {
+                arg: string;
+                exists: false;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const Link: Story;

package/dist/components/Button/Button.stories.js

@@ -0,0 +1,40 @@
+import '../../assets/global.css';
+import { jsx as t } from "react/jsx-runtime";
+/* empty css                    */
+import { Button as i } from "./Button.js";
+import "react";
+import "../Dialog/Backdrop.js";
+import "../Typography/Typography.js";
+import "../IconButton/IconButton.js";
+import "../Table/Table.js";
+import "../Tabs/Tabs.js";
+const d = {
+  title: "Components/Button",
+  component: i,
+  tags: ["autodocs"],
+  decorators: [
+    (o) => /* @__PURE__ */ t("div", { style: { padding: "1em" }, children: /* @__PURE__ */ t(o, {}) })
+  ],
+  argTypes: {
+    onClick: {
+      if: { arg: "link", exists: !1 }
+    },
+    type: {
+      control: { type: "text" },
+      if: { arg: "onClick", exists: !0 }
+    },
+    link: {
+      control: { type: "text" },
+      if: { arg: "onClick", exists: !1 }
+    }
+  }
+}, k = {
+  args: { children: "Button", onClick: () => alert("Button was clicked!") }
+}, f = {
+  args: { children: "Button", link: "https://marola.pismolabs.io" }
+};
+export {
+  f as Link,
+  k as Simple,
+  d as default
+};

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+
+type CheckboxTheme = 'light' | 'accent';
+type CheckboxSizes = 'small' | 'normal';
+type CheckboxProps = {
+    className?: string;
+    'data-testid'?: string;
+    label?: ReactNode;
+    theme?: CheckboxTheme;
+    size?: CheckboxSizes;
+    isChecked?: boolean;
+    isIndeterminate?: boolean;
+    name?: string;
+    onChange: (checked: boolean) => void;
+};
+declare const Checkbox: ({ className, label, name, theme, size, isChecked, onChange, isIndeterminate, ...rest }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export { Checkbox };

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,48 @@
+import '../../assets/Checkbox.css';
+import { jsxs as v, jsx as c } from "react/jsx-runtime";
+import * as m from "react";
+import { useState as i, useEffect as _ } from "react";
+import { c as p } from "../../clsx-DB4S2d7J.js";
+const u = (e) => /* @__PURE__ */ m.createElement("svg", { width: 14, height: 10, viewBox: "0 0 14 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ m.createElement("path", { d: "M13.7063 0.293438C14.0969 0.684062 14.0969 1.31531 13.7063 1.70594L5.70625 9.70594C5.31563 10.0966 4.68437 10.0966 4.29375 9.70594L0.292875 5.70594C-0.097625 5.31531 -0.097625 4.68406 0.292875 4.29344C0.683437 3.90281 1.31656 3.90281 1.70719 4.29344L4.97188 7.58406L12.2937 0.293438C12.6844 -0.0978125 13.3156 -0.0978125 13.7063 0.293438Z", fill: "#F7F7FC" })), y = "_checkmark_14khe_10", t = {
+  "checkbox-wrapper": "_checkbox-wrapper_14khe_1",
+  checkmark: y,
+  "checkmark--checked": "_checkmark--checked_14khe_22",
+  "checkmark--light-theme": "_checkmark--light-theme_14khe_25",
+  "checkmark--accent-theme": "_checkmark--accent-theme_14khe_32",
+  "checkmark--small-size": "_checkmark--small-size_14khe_39",
+  "checkmark--normal-size": "_checkmark--normal-size_14khe_46"
+}, z = (e) => /* @__PURE__ */ m.createElement("svg", { width: 10, height: 3, viewBox: "0 0 10 3", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ m.createElement("rect", { y: 0.5, width: 10, height: 2, rx: 1, fill: "#1897F3" })), S = ({
+  className: e,
+  label: g,
+  name: l,
+  theme: x = "accent",
+  size: w = "normal",
+  isChecked: h,
+  onChange: f,
+  isIndeterminate: k,
+  ...d
+}) => {
+  const [r, s] = i(h), [a, n] = i(k);
+  _(() => {
+    r !== h && s(h);
+  }, [h]), _(() => {
+    typeof k == "boolean" && n(k);
+  }, [k]);
+  const C = p(t["checkbox-wrapper"], e), b = p(
+    t.checkmark,
+    t[`checkmark--${x}-theme`],
+    t[`checkmark--${w}-size`],
+    (r || a) && t["checkmark--checked"]
+  );
+  return /* @__PURE__ */ v("div", { className: C, onClick: () => {
+    let o = !r;
+    a && (n(!1), o = !0), f(o), s(o);
+  }, ...d, children: [
+    /* @__PURE__ */ c("input", { name: l, type: "checkbox", checked: !a && r, readOnly: !0 }),
+    /* @__PURE__ */ c("span", { className: b, children: a ? /* @__PURE__ */ c(z, {}) : /* @__PURE__ */ c(u, {}) }),
+    /* @__PURE__ */ c("label", { htmlFor: l, children: g })
+  ] });
+};
+export {
+  S as Checkbox
+};

package/dist/components/Dialog/Actions.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { s as t } from "../../Dialog.module-BKWFakxu.js";
+import { s as t } from "../../Dialog.module-CGVM5V_D.js";
 const i = ({ children: s }) => /* @__PURE__ */ o("div", { className: t.dialog__actions, children: s });
 export {
   i as default

package/dist/components/Dialog/Backdrop.d.ts

@@ -2,5 +2,5 @@
 declare const Backdrop: import('react').ForwardRefExoticComponent<{
     open?: boolean | undefined;
     className: string;
-} & import("react").RefAttributes<HTMLDivElement>>;
+} & import('react').RefAttributes<HTMLDivElement>>;
 export default Backdrop;

package/dist/components/Dialog/Backdrop.js

@@ -1,6 +1,6 @@
 import { jsx as a } from "react/jsx-runtime";
 import { forwardRef as t } from "react";
-import { s as e } from "../../Dialog.module-BKWFakxu.js";
+import { s as e } from "../../Dialog.module-CGVM5V_D.js";
 const i = t((o, r) => {
   const { open: m, className: p, ...s } = o;
   return /* @__PURE__ */ a("div", { className: e.dialog__backdrop, ref: r, ...s });

package/dist/components/Dialog/CloseIconButton.js

@@ -1,132 +1,20 @@
-import { jsx as j } from "react/jsx-runtime";
-import { d as C, e as W } from "../../index-BvA1HyDs.js";
-import I from "react";
-import { s as O } from "../../Dialog.module-BKWFakxu.js";
-import { B as P } from "../../Button-D--uN90N.js";
-var N = { exports: {} };
-(function(w, b) {
-  (function(x, y) {
-    w.exports = y(I);
-  })(C, (x) => (() => {
-    var y = { 639: (t) => {
-      t.exports = x;
-    } }, E = {};
-    function s(t) {
-      var o = E[t];
-      if (o !== void 0)
-        return o.exports;
-      var c = E[t] = { exports: {} };
-      return y[t](c, c.exports, s), c.exports;
-    }
-    s.n = (t) => {
-      var o = t && t.__esModule ? () => t.default : () => t;
-      return s.d(o, { a: o }), o;
-    }, s.d = (t, o) => {
-      for (var c in o)
-        s.o(o, c) && !s.o(t, c) && Object.defineProperty(t, c, { enumerable: !0, get: o[c] });
-    }, s.o = (t, o) => Object.prototype.hasOwnProperty.call(t, o), s.r = (t) => {
-      typeof Symbol < "u" && Symbol.toStringTag && Object.defineProperty(t, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(t, "__esModule", { value: !0 });
-    };
-    var _ = {};
-    return (() => {
-      s.r(_), s.d(_, { default: () => B });
-      var t = s(639), o = s.n(t), c = function(i, a, l, r) {
-        return new (l || (l = Promise))(function(p, u) {
-          function h(n) {
-            try {
-              d(r.next(n));
-            } catch (e) {
-              u(e);
-            }
-          }
-          function f(n) {
-            try {
-              d(r.throw(n));
-            } catch (e) {
-              u(e);
-            }
-          }
-          function d(n) {
-            var e;
-            n.done ? p(n.value) : (e = n.value, e instanceof l ? e : new l(function(m) {
-              m(e);
-            })).then(h, f);
-          }
-          d((r = r.apply(i, a || [])).next());
-        });
-      };
-      function T() {
-        return typeof globalThis < "u" && globalThis.WAVES_ICONS_BASE_URL ? globalThis.WAVES_ICONS_BASE_URL : typeof window < "u" && window.WAVES_ICONS_BASE_URL ? window.WAVES_ICONS_BASE_URL : "https://waves-icons.pismolabs.io/bin";
-      }
-      function A(i, a, l) {
-        const r = a && Number.isNaN(Number(a)) ? a : a ? `${a}px` : "1em", p = l || "currentColor", u = { fill: p, color: p, width: r, height: r };
-        return i && Object.keys(u).forEach((h) => {
-          i.setAttribute(h, u[h]);
-        }), i && Object.assign(i.style, u), i;
-      }
-      const B = ({ icon: i, color: a, size: l }) => {
-        const r = (0, t.useRef)(null), [p, u] = (0, t.useState)(null), h = (f) => {
-          const d = A(f, `${l || ""}`, a);
-          r != null && r.current && (r.current.innerHTML = "", r.current.append(d)), u(d);
-        };
-        return (0, t.useEffect)(() => {
-          (function(f, d = !1) {
-            return c(this, void 0, void 0, function* () {
-              return function(n) {
-                return c(this, void 0, void 0, function* () {
-                  return fetch(n, { cache: "force-cache" }).then((e) => e.status >= 200 && e.status <= 299 ? e.text() : Promise.resolve(`
-    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-    <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
-      <!-- Waves Icon Not Found -->
-    </svg>
-  `)).catch(console.error);
-                });
-              }(f.startsWith("http") ? f : function(n, e = "svg", m) {
-                return m || (m = T()), `${m}/${n}.${e}`;
-              }(f)).then((n) => {
-                try {
-                  const e = d ? n : function(m, S) {
-                    S || (S = `
-    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-    <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
-      <!-- Waves Icon Not Found -->
-    </svg>
-  `);
-                    const g = Object.assign(document.createElement("template"), { innerHTML: S }).content.querySelector("svg");
-                    return Array.from(g.attributes).map(({ name: v }) => v).find((v) => {
-                      v.startsWith("on") && g.removeAttribute(v);
-                    }), g.querySelectorAll(["a", "animate", "color-profile", "cursor", "discard", "fedropshadow", "font-face", "font-face-format", "font-face-name", "font-face-src", "font-face-uri", "foreignobject", "hatch", "hatchpath", "mesh", "meshgradient", "meshpatch", "meshrow", "missing-glyph", "script", "set", "solidcolor", "unknown", "use"].join(",")).forEach((v) => {
-                      v.remove();
-                    }), g.setAttribute("data-waves-icon", m), g;
-                  }(f, n);
-                  return Promise.resolve(e);
-                } catch (e) {
-                  return Promise.reject(e);
-                }
-              }).catch(console.error);
-            });
-          })(i).then(h).catch(console.error);
-        }, [i]), (0, t.useEffect)(() => {
-          A(p, `${l || ""}`, a);
-        }, [l, a]), o().createElement("span", { ref: r });
-      };
-    })(), _;
-  })());
-})(N);
-var L = N.exports;
-const R = /* @__PURE__ */ W(L), V = ({ handleOnClose: w, className: b }) => {
-  const x = b != null ? O["dialog__close-icon "] + b : O["dialog__close-icon"];
-  return /* @__PURE__ */ j(
-    P,
+import { jsx as s } from "react/jsx-runtime";
+import { Icon as r } from "../Icon/Icon.js";
+import { s as t } from "../../Dialog.module-CGVM5V_D.js";
+import { B as a } from "../../Button-B1umG8kJ.js";
+const d = ({ handleOnClose: i, className: o }) => {
+  const l = o != null ? t["dialog__close-icon "] + o : t["dialog__close-icon"];
+  return /* @__PURE__ */ s(
+    a,
     {
-      className: x,
+      className: l,
       "aria-description": "Close dialog",
-      onClick: w,
+      onClick: i,
       "data-testid": "dialog-close-button",
-      children: /* @__PURE__ */ j(R, { icon: "fa/duotone/circle-xmark", size: 32, color: "var(--gray-75)" })
+      children: /* @__PURE__ */ s(r, { icon: "circle-xmark", size: 32, color: "var(--gray-75)" })
     }
   );
 };
 export {
-  V as default
+  d as default
 };

package/dist/components/Dialog/Dialog.d.ts

@@ -6,7 +6,7 @@ import { JSXElementConstructor, ReactElement, ReactNode } from 'react';
 
 export type CloseReason = 'backdropClick' | 'escapeKeyDown' | 'closeButtonClick';
 export interface DialogProps extends ModalProps {
-    /** main children content */
+    /** main content */
     children: ReactElement<unknown, string | JSXElementConstructor<unknown>>;
     /** display title label */
     dialogTitle: ReactNode;
@@ -14,7 +14,8 @@ export interface DialogProps extends ModalProps {
     dialogSubtitle?: ReactNode;
     /** if true, show skeleton */
     isLoading?: boolean;
-    onClose: () => void;
+    /** callback for when close is clicked */
+    onClose?: () => void;
 }
 declare const Dialog: ({ children, dialogTitle, dialogSubtitle, isLoading, onClose, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element;
 export { Dialog, DialogTitle, Content, Actions };