@pismo/marola 0.0.1-alpha.6 → 0.0.1-alpha.8

package/dist/components/Icon/Icon.d.ts

@@ -1,7 +1,18 @@
-export type IconProps = {
-    iconFamily?: string;
-    icon: string;
+export declare const FamilyAndIcons: {
+    readonly 'fa/duotone': readonly ["circle-arrow-right", "eye-slash", "folder-magnifying-glass", "magnifying-glass", "circle-exclamation", "circle-xmark", "xmark"];
+    readonly pi: readonly ["logo"];
+};
+export type IconFamilies = keyof typeof FamilyAndIcons;
+export type IconPropsByIconFamily<T extends IconFamilies> = {
+    iconFamily: T;
+    icon: (typeof FamilyAndIcons)[T][number];
+} | {
+    iconFamily?: never | undefined;
+    icon: (typeof FamilyAndIcons)['fa/duotone'][number];
+};
+export type IconCommonProps = {
     size?: number | string;
     color?: string;
 };
-export declare const Icon: ({ iconFamily, icon, size, color }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export type IconProps<T extends IconFamilies> = IconCommonProps & IconPropsByIconFamily<T>;
+export declare const Icon: <T extends "fa/duotone" | "pi">({ iconFamily, icon, size, color }: IconProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/Icon.js

@@ -1,9 +1,95 @@
-import { jsx as s } from "react/jsx-runtime";
-import { W as e } from "../../react-CGNQ6M5x.js";
-const m = ({ iconFamily: o, icon: n, size: r, color: t }) => {
-  const c = `${o ?? "fa/duotone"}/${n}`;
-  return /* @__PURE__ */ s(e, { icon: c, color: t || "", size: r || "" });
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import * as e from "react";
+const i = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", "data-waves-icon": "fa/duotone/circle-arrow-right", fill: "currentColor", color: "currentColor", width: "1em", height: "1em", style: {
+  fill: "currentcolor",
+  color: "currentcolor",
+  width: "1em",
+  height: "1em"
+}, ...t }, /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("style", null, ".fa-secondary{opacity:.4}")), /* @__PURE__ */ e.createElement("path", { className: "fa-primary", d: "M406.6 278.6l-103.1 103.1c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25L306.8 288H128C110.3 288 96 273.7 96 256s14.31-32 32-32h178.8l-49.38-49.38c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l103.1 103.1C414.6 241.3 416 251.1 416 256C416 260.9 414.6 270.7 406.6 278.6z" }), /* @__PURE__ */ e.createElement("path", { className: "fa-secondary", d: "M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM406.6 278.6l-103.1 103.1c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25L306.8 288H128C110.3 288 96 273.7 96 256s14.31-32 32-32h178.8l-49.38-49.38c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l103.1 103.1C414.6 241.3 416 251.1 416 256C416 260.9 414.6 270.7 406.6 278.6z" })), m = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", "data-waves-icon": "fa/duotone/circle-exclamation", fill: "currentColor", color: "currentColor", width: "1em", height: "1em", style: {
+  fill: "currentcolor",
+  color: "currentcolor",
+  width: "1em",
+  height: "1em"
+}, ...t }, /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("style", null, `
+      .fa-secondary {
+        opacity: .4
+      }
+    `)), /* @__PURE__ */ e.createElement("path", { className: "fa-primary", d: "M256 304c13.25 0 24-10.75 24-24v-128C280 138.8 269.3 128 256 128S232 138.8 232 152v128C232 293.3 242.8 304 256 304zM256 337.1c-17.36 0-31.44 14.08-31.44 31.44C224.6 385.9 238.6 400 256 400s31.44-14.08 31.44-31.44C287.4 351.2 273.4 337.1 256 337.1z" }), /* @__PURE__ */ e.createElement("path", { className: "fa-secondary", d: "M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM232 152C232 138.8 242.8 128 256 128s24 10.75 24 24v128c0 13.25-10.75 24-24 24S232 293.3 232 280V152zM256 400c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 385.9 273.4 400 256 400z" })), C = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", "data-waves-icon": "fa/duotone/circle-xmark", fill: "currentColor", color: "currentColor", width: "1em", height: "1em", style: {
+  fill: "currentcolor",
+  color: "currentcolor",
+  width: "1em",
+  height: "1em"
+}, ...t }, /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("style", null, `
+      .fa-secondary {
+        opacity: .4
+      }
+    `)), /* @__PURE__ */ e.createElement("path", { className: "fa-primary", d: "M255.1 222.1L303 175C312.4 165.7 327.6 165.7 336.1 175C346.3 184.4 346.3 199.6 336.1 208.1L289.9 255.1L336.1 303C346.3 312.4 346.3 327.6 336.1 336.1C327.6 346.3 312.4 346.3 303 336.1L255.1 289.9L208.1 336.1C199.6 346.3 184.4 346.3 175 336.1C165.7 327.6 165.7 312.4 175 303L222.1 255.1L175 208.1C165.7 199.6 165.7 184.4 175 175C184.4 165.7 199.6 165.7 208.1 175L255.1 222.1z" }), /* @__PURE__ */ e.createElement("path", { className: "fa-secondary", d: "M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM175 208.1L222.1 255.1L175 303C165.7 312.4 165.7 327.6 175 336.1C184.4 346.3 199.6 346.3 208.1 336.1L255.1 289.9L303 336.1C312.4 346.3 327.6 346.3 336.1 336.1C346.3 327.6 346.3 312.4 336.1 303L289.9 255.1L336.1 208.1C346.3 199.6 346.3 184.4 336.1 175C327.6 165.7 312.4 165.7 303 175L255.1 222.1L208.1 175C199.6 165.7 184.4 165.7 175 175C165.7 184.4 165.7 199.6 175 208.1V208.1z" })), h = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 512", "data-waves-icon": "fa/duotone/eye-slash", fill: "currentColor", color: "currentColor", width: "1em", height: "1em", style: {
+  fill: "currentcolor",
+  color: "currentcolor",
+  width: "1em",
+  height: "1em"
+}, ...t }, /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("style", null, `
+      .fa-secondary {
+        opacity: .4
+      }
+    `)), /* @__PURE__ */ e.createElement("path", { className: "fa-primary", d: "M5.112 9.196C13.29-1.236 28.37-3.065 38.81 5.112L630.8 469.1C641.2 477.3 643.1 492.4 634.9 502.8C626.7 513.2 611.6 515.1 601.2 506.9L9.196 42.89C-1.236 34.71-3.065 19.63 5.112 9.196V9.196z" }), /* @__PURE__ */ e.createElement("path", { className: "fa-secondary", d: "M446.6 324.7C457.7 304.3 464 280.9 464 256C464 176.5 399.5 112 320 112C282.7 112 248.6 126.2 223.1 149.5L150.7 92.77C195 58.27 251.8 32 320 32C400.8 32 465.5 68.84 512.6 112.6C559.4 156 590.7 207.1 605.5 243.7C608.8 251.6 608.8 260.4 605.5 268.3C592.1 300.6 565.2 346.1 525.6 386.7L446.6 324.7zM313.4 220.3C317.6 211.8 320 202.2 320 192C320 180.5 316.1 169.7 311.6 160.4C314.4 160.1 317.2 160 320 160C373 160 416 202.1 416 256C416 269.7 413.1 282.7 407.1 294.5L313.4 220.3zM320 480C239.2 480 174.5 443.2 127.4 399.4C80.62 355.1 49.34 304 34.46 268.3C31.18 260.4 31.18 251.6 34.46 243.7C44 220.8 60.29 191.2 83.09 161.5L177.4 235.8C176.5 242.4 176 249.1 176 256C176 335.5 240.5 400 320 400C338.7 400 356.6 396.4 373 389.9L446.2 447.5C409.9 467.1 367.8 480 320 480H320z" })), d = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", "data-waves-icon": "fa/duotone/folder-magnifying-glass", fill: "currentColor", color: "currentColor", width: "1em", height: "1em", style: {
+  fill: "currentcolor",
+  color: "currentcolor",
+  width: "1em",
+  height: "1em"
+}, ...t }, /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("style", null, ".fa-secondary{opacity:.4}")), /* @__PURE__ */ e.createElement("path", { className: "fa-primary", d: "M376.1 375l-48.67-48.67C338.1 310.5 344 292 344 272c0-57.44-46.56-104-104-104S136 214.6 136 272s46.56 104 104 104c19.1 0 38.5-5.922 54.36-15.71l48.67 48.67C347.7 413.7 353.8 416 360 416s12.28-2.344 16.97-7.031C386.3 399.6 386.3 384.4 376.1 375zM240 328c-30.88 0-56-25.12-56-56c0-30.88 25.12-56 56-56c30.88 0 56 25.12 56 56C296 302.9 270.9 328 240 328z" }), /* @__PURE__ */ e.createElement("path", { className: "fa-secondary", d: "M464 96h-192l-64-64h-160C21.5 32 0 53.5 0 80v352C0 458.5 21.5 480 48 480h416c26.5 0 48-21.5 48-48v-288C512 117.5 490.5 96 464 96zM376.1 408.1C372.3 413.7 366.2 416 360 416s-12.28-2.344-16.97-7.031l-48.67-48.67C278.5 370.1 259.1 376 240 376c-57.44 0-104-46.56-104-104S182.6 168 240 168s104 46.56 104 104c0 20-5.922 38.5-15.71 54.36l48.67 48.67C386.3 384.4 386.3 399.6 376.1 408.1zM240 216c-30.88 0-56 25.12-56 56c0 30.88 25.12 56 56 56c30.88 0 56-25.12 56-56C296 241.1 270.9 216 240 216z" })), g = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", "data-waves-icon": "fa/duotone/magnifying-glass", fill: "currentColor", color: "currentColor", width: "1em", height: "1em", style: {
+  fill: "currentcolor",
+  color: "currentcolor",
+  width: "1em",
+  height: "1em"
+}, ...t }, /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("style", null, `
+      .fa-secondary {
+        opacity: .4
+      }
+    `)), /* @__PURE__ */ e.createElement("path", { className: "fa-primary", d: "M500.3 443.7l-119.7-119.7c-15.03 22.3-34.26 41.54-56.57 56.57l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7z" }), /* @__PURE__ */ e.createElement("path", { className: "fa-secondary", d: "M207.1 0C93.12 0-.0002 93.13-.0002 208S93.12 416 207.1 416s208-93.13 208-208S322.9 0 207.1 0zM207.1 336c-70.58 0-128-57.42-128-128c0-70.58 57.42-128 128-128s128 57.42 128 128C335.1 278.6 278.6 336 207.1 336z" })), f = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", "data-waves-icon": "fa/duotone/xmark", fill: "currentColor", color: "currentColor", width: "1em", height: "1em", style: {
+  fill: "currentcolor",
+  color: "currentcolor",
+  width: "1em",
+  height: "1em"
+}, ...t }, /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("style", null, `
+      .fa-secondary {
+        opacity: .4
+      }
+    `)), /* @__PURE__ */ e.createElement("path", { className: "fa-secondary", d: "M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z" })), w = (t) => /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 664 652", xmlns: "http://www.w3.org/2000/svg", "data-waves-icon": "pi/logo", fill: "currentColor", color: "currentColor", width: "1em", height: "1em", style: {
+  fill: "currentcolor",
+  color: "currentcolor",
+  width: "1em",
+  height: "1em"
+}, ...t }, /* @__PURE__ */ e.createElement("path", { d: "M391.42 125.965C448.039 184.645 504.938 243.615 565.81 185.331C583.085 168.806 588.671 138.702 583.932 117.95C552.33 -20.4551 366.687 -26.094 284.964 44.5249L285.069 45.0613C321.006 52.9875 356.159 89.4202 391.42 125.965Z" }), /* @__PURE__ */ e.createElement("path", { d: "M522.431 495.702C448.189 455.82 486.69 383.483 525.002 311.503C548.862 266.674 572.648 221.983 569.081 185.356L569.559 185.09C661.976 240.991 713.98 419.291 592.114 492.115C573.842 503.035 543.486 507.025 522.431 495.702V495.702Z" }), /* @__PURE__ */ e.createElement("path", { d: "M213.844 550.355C228.833 467.423 309.526 481.686 389.823 495.879C439.831 504.719 489.685 513.531 523.417 498.82L523.818 499.192C499.211 604.36 345.708 708.916 238.789 615.519C222.757 601.516 209.582 573.878 213.844 550.355Z" }), /* @__PURE__ */ e.createElement("path", { d: "M284.035 48.1638C320.656 124.068 246.989 159.959 173.686 195.673C128.033 217.916 82.5196 240.09 63.8762 271.819L63.3335 271.753C21.4251 172.207 84.1548 -2.6076 225.552 10.1071C246.753 12.0131 273.657 26.6279 284.035 48.1638Z" }), /* @__PURE__ */ e.createElement("path", { d: "M172.699 424.293C161.384 343.54 150.014 262.389 66.5079 273.761C42.819 276.977 20.6057 298.048 12.2415 317.622C-43.5448 448.169 103.33 561.849 210.954 552.754L211.185 552.258C186.77 524.722 179.745 474.585 172.699 424.293Z" })), u = {
+  // icon family / icon name
+  // fa/duotone  / eye-slash
+  "fa/duotone/circle-arrow-right": i,
+  "fa/duotone/eye-slash": h,
+  "fa/duotone/folder-magnifying-glass": d,
+  "fa/duotone/magnifying-glass": g,
+  "fa/duotone/circle-exclamation": m,
+  "fa/duotone/circle-xmark": C,
+  "fa/duotone/xmark": f,
+  "pi/logo": w
+}, v = {
+  "fa/duotone": [
+    "circle-arrow-right",
+    "eye-slash",
+    "folder-magnifying-glass",
+    "magnifying-glass",
+    "circle-exclamation",
+    "circle-xmark",
+    "xmark"
+  ],
+  pi: ["logo"]
+}, y = ({ iconFamily: t, icon: a, size: l, color: n }) => {
+  const r = `${t ?? "fa/duotone"}/${a}`, c = u[r] ?? /* @__PURE__ */ s("span", { title: r, children: [
+    "ERROR ICON ",
+    /* @__PURE__ */ o(y, { icon: "circle-exclamation" })
+  ] });
+  return c && /* @__PURE__ */ o(c, { style: { color: n, height: l, width: l } });
 };
 export {
-  m as Icon
+  v as FamilyAndIcons,
+  y as Icon
 };

package/dist/components/IconButton/IconButton.js

@@ -3,7 +3,7 @@ import { jsx as e, jsxs as s } from "react/jsx-runtime";
 import { forwardRef as q, useMemo as a } from "react";
 import { c } from "../../clsx-DB4S2d7J.js";
 import { LoadingSpinner as m } from "../LoadingSpinner/LoadingSpinner.js";
-import { B as g } from "../../Button-W6tM-_IT.js";
+import { B as g } from "../../Button-B1umG8kJ.js";
 const k = "_h1_8qiyf_1", p = "_h2_8qiyf_11", w = "_h3_8qiyf_21", x = "_h4_8qiyf_31", N = "_body_8qiyf_41", v = "_quote_8qiyf_75", B = "_form__input_8qiyf_98", j = "_form__hint_8qiyf_103", C = "_form__label_8qiyf_108", I = "_form__dropdown_8qiyf_113", L = "_table__header_8qiyf_131", M = "_table__body_8qiyf_136", R = "_button_8qiyf_159", o = {
   h1: k,
   "h1--bold": "_h1--bold_8qiyf_7",

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,44 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+type InputProps = InputHTMLAttributes<HTMLInputElement> & {
+    /** Label text */
+    label?: string;
+    /** Info message text */
+    infoMessage?: string;
+    /** Error message text */
+    errorMessage?: string;
+    /** Left icon element */
+    leftIcon?: ReactNode;
+    /** Right icon element */
+    rightIcon?: ReactNode;
+    /** Input type. Default: text */
+    type?: 'text' | 'password' | 'search';
+    /** Hide the chars counter. Default: false */
+    hideCharsCounter?: boolean;
+    /** CSS classes to be applied on the container element */
+    classNameWrapper?: string;
+    /** CSS classes to be applied on the label element */
+    classNameLabel?: string;
+    /** CSS classes to be applied on the input element */
+    classNameInput?: string;
+    /** CSS classes to be applied on the info message element */
+    classNameInfoMessage?: string;
+    /** CSS classes to be applied on the error message element */
+    classNameErrorMessage?: string;
+    /** CSS classes to be applied on the chars counter element */
+    classNameCharsCounter?: string;
+    /** Id to be applied as `data-testid` on the container element */
+    'data-testid-wrapper'?: string;
+    /** Id to be applied as `data-testid` on the label element */
+    'data-testid-label'?: string;
+    /** Id to be applied as `data-testid` on the input element */
+    'data-testid-input'?: string;
+    /** Id to be applied as `data-testid` on the info message element */
+    'data-testid-infoMessage'?: string;
+    /** Id to be applied as `data-testid` on the error message element */
+    'data-testid-errorMessage'?: string;
+    /** Id to be applied as `data-testid` on the chars counter element */
+    'data-testid-charsCounter'?: string;
+};
+export declare const Input: ({ label, infoMessage, errorMessage, leftIcon, rightIcon, id, disabled, type, maxLength, hideCharsCounter, onChange, classNameWrapper, classNameLabel, classNameInput, classNameInfoMessage, classNameErrorMessage, classNameCharsCounter, "data-testid-wrapper": testIdWrapper, "data-testid-label": testIdLabel, "data-testid-input": testIdInput, "data-testid-infoMessage": testIdInfoMessage, "data-testid-errorMessage": testIdErrorMessage, "data-testid-charsCounter": testIdCharsCounter, ...rest }: InputProps) => import("react/jsx-runtime").JSX.Element;
+export {};