@pismo/marola 1.0.28 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/assets/Button.css +1 -1
  2. package/dist/assets/Snackbar.css +1 -1
  3. package/dist/components/Button/Button.d.ts +9 -1
  4. package/dist/components/Button/Button.js +82 -58
  5. package/dist/components/Button/Button.stories.d.ts +13 -5
  6. package/dist/components/Button/Button.test.d.ts +1 -0
  7. package/dist/components/Snackbar/Snackbar.d.ts +1 -1
  8. package/dist/components/Snackbar/Snackbar.js +102 -101
  9. package/dist/components/Snackbar/Snackbar.stories.d.ts +1 -0
  10. package/dist/marola.css +1 -1
  11. package/package.json +1 -1
package/dist/assets/Button.css CHANGED
@@ -1 +1 @@
1
- ._u-typography-h1_dxo5v_1{font-size:var(--heading-font-size-1);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-1);margin:0}._u-typography-h2_dxo5v_8{font-size:var(--heading-font-size-2);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-2);margin:0}._u-typography-h3_dxo5v_15{font-size:var(--heading-font-size-3);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-3);margin:0}._u-typography-h4_dxo5v_22{font-size:var(--heading-font-size-4);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-4);margin:0}._u-typography-h5_dxo5v_29{font-size:var(--heading-font-size-5);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-5);margin:0}._u-typography-h6_dxo5v_36{font-size:var(--heading-font-size-6);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-6);margin:0}._u-typography-base_dxo5v_43{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_dxo5v_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_dxo5v_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_dxo5v_57,._button_dxo5v_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_dxo5v_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_dxo5v_65{font-weight:var(--base-bold)}._u-typography-base--strikethrough_dxo5v_68{text-decoration:line-through}._u-typography-base--underlined_dxo5v_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_dxo5v_74{text-decoration:underline line-through}._button_dxo5v_57{height:2.5rem;padding:0 35px;font-weight:700;cursor:pointer;border:none;border-radius:100px}._button--primary_dxo5v_86{color:var(--white-100);background-color:var(--accent)}._button--primary_dxo5v_86:hover{background-color:var(--hover)}._button--primary_dxo5v_86:active{background-color:var(--active)}._button--primary_dxo5v_86:disabled{color:rgb(var(--black-100-rgb),.25);cursor:default;background-color:rgb(var(--black-100-rgb),.04)}._button--secondary_dxo5v_101{color:var(--accent);background-color:var(--white-100)}._button--secondary_dxo5v_101:hover{color:var(--accent-dark);background-color:var(--gray-5)}._button--secondary_dxo5v_101:active{color:var(--accent-light);background-color:initial}._button--secondary_dxo5v_101:disabled{color:var(--black-25);cursor:default;background-color:initial}._button--quick_dxo5v_118{height:2rem;padding:0 1rem;color:var(--accent);background-color:rgb(var(--accent-rgb),.05);border-radius:6px}._button--quick_dxo5v_118:hover{color:var(--accent-dark);background-color:rgb(var(--accent-rgb),.1)}._button--quick_dxo5v_118:active{color:var(--accent-light);background-color:rgb(var(--accent-rgb),.05)}._button--quick_dxo5v_118:disabled{color:var(--gray-50);cursor:default;background-color:var(--gray-10)}._button__loading-container_dxo5v_138{display:flex;gap:8px;align-items:center}
1
+ ._u-typography-h1_531rm_1{font-size:var(--heading-font-size-1);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-1);margin:0}._u-typography-h2_531rm_8{font-size:var(--heading-font-size-2);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-2);margin:0}._u-typography-h3_531rm_15{font-size:var(--heading-font-size-3);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-3);margin:0}._u-typography-h4_531rm_22{font-size:var(--heading-font-size-4);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-4);margin:0}._u-typography-h5_531rm_29{font-size:var(--heading-font-size-5);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-5);margin:0}._u-typography-h6_531rm_36{font-size:var(--heading-font-size-6);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-6);margin:0}._u-typography-base_531rm_43,._button_531rm_43{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_531rm_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_531rm_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_531rm_57,._button--large_531rm_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_531rm_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_531rm_65{font-weight:var(--base-bold)}._u-typography-base--strikethrough_531rm_68{text-decoration:line-through}._u-typography-base--underlined_531rm_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_531rm_74{text-decoration:underline line-through}._button_531rm_43{display:flex;align-items:center;justify-content:center;height:32px;padding:0 15px;font-weight:700;cursor:pointer;border:none;border-radius:6px}._button--large_531rm_57{height:40px}._button--small_531rm_92{height:24px}._button--round_531rm_95{border-radius:9999px}._button--primary_531rm_98{color:var(--white-100);background-color:var(--colors-brand-primary-color-primary);border:1px solid var(--colors-brand-primary-color-primary)}._button--primary_531rm_98:hover{background-color:var(--colors-brand-primary-color-primary-border-hover);border:1px solid var(--colors-brand-primary-color-primary-border-hover)}._button--primary_531rm_98:active{background-color:var(--colors-brand-primary-color-primary-active);border:1px solid var(--colors-brand-primary-color-primary-active)}._button--primary_531rm_98:disabled{color:var(--colors-neutral-text-color-text-quaternary);cursor:default;background-color:rgb(var(--black-100-rgb),.04);border:1px solid var(--colors-neutral-border-color-border)}._button--primary--danger_531rm_117{background-color:var(--colors-brand-error-color-error);border:1px solid var(--colors-brand-error-color-error)}._button--primary--danger_531rm_117:hover{background-color:var(--colors-brand-error-color-error-hover);border:1px solid var(--colors-brand-error-color-error-hover)}._button--primary--danger_531rm_117:active{background-color:var(--colors-brand-error-color-error-active);border:1px solid var(--colors-brand-error-color-error-active)}._button--default_531rm_129{color:var(--colors-neutral-text-color-text);background-color:var(--white-100);border:1px solid var(--colors-neutral-border-color-border)}._button--default_531rm_129:hover{color:var(--colors-brand-primary-color-primary-border-hover);background-color:var(--white-100);border:1px solid var(--colors-brand-primary-color-primary-border-hover)}._button--default_531rm_129:active{color:var(--colors-brand-primary-color-primary-active);background-color:initial;border:1px solid var(--colors-brand-primary-color-primary-active)}._button--default_531rm_129:disabled{color:var(--colors-neutral-text-color-text-quaternary);cursor:default;background-color:rgb(var(--black-100-rgb),.04);border:1px solid var(--colors-neutral-border-color-border)}._button--default--danger_531rm_150{color:var(--colors-brand-error-color-error);border:1px solid var(--colors-brand-error-color-error)}._button--default--danger_531rm_150:hover{color:var(--colors-brand-error-color-error-hover);border:1px solid var(--colors-brand-error-color-error-hover)}._button--default--danger_531rm_150:active{color:var(--colors-brand-error-color-error-active);border:1px solid var(--colors-brand-error-color-error-active)}._button--dashed_531rm_162{color:var(--colors-neutral-text-color-text);background-color:var(--white-100);border:1px dashed var(--colors-neutral-border-color-border)}._button--dashed_531rm_162:hover{color:var(--colors-brand-primary-color-primary-border-hover);background-color:var(--white-100);border:1px dashed var(--colors-brand-primary-color-primary-border-hover)}._button--dashed_531rm_162:active{color:var(--colors-brand-primary-color-primary-active);background-color:initial;border:1px dashed var(--colors-brand-primary-color-primary-active)}._button--dashed_531rm_162:disabled{color:var(--colors-neutral-text-color-text-quaternary);cursor:default;background-color:rgb(var(--black-100-rgb),.04);border:1px dashed var(--colors-neutral-border-color-border)}._button--dashed--danger_531rm_183{color:var(--colors-brand-error-color-error);border:1px dashed var(--colors-brand-error-color-error)}._button--dashed--danger_531rm_183:hover{color:var(--colors-brand-error-color-error-hover);border:1px dashed var(--colors-brand-error-color-error-hover)}._button--dashed--danger_531rm_183:active{color:var(--colors-brand-error-color-error-active);border:1px dashed var(--colors-brand-error-color-error-active)}._button--link_531rm_195{color:var(--colors-base-blue-6);background-color:transparent;border:none}._button--link_531rm_195:hover{color:var(--colors-brand-primary-color-primary-border-hover)}._button--link_531rm_195:active{color:var(--accent-light);background-color:initial}._button--link_531rm_195:disabled{color:var(--colors-neutral-text-color-text-quaternary);cursor:default;background-color:initial}._button--link--danger_531rm_212{color:var(--colors-brand-error-color-error);background-color:transparent}._button--link--danger_531rm_212:hover{color:var(--colors-brand-error-color-error-hover)}._button--link--danger_531rm_212:active{color:var(--colors-brand-error-color-error-active)}._button--text_531rm_222{color:var(--colors-neutral-text-color-text);background-color:transparent}._button--text_531rm_222:hover{background-color:rgb(var(--black-100-rgb),.06)}._button--text_531rm_222:active{color:var(--colors-neutral-text-color-text);background-color:rgb(var(--black-100-rgb),.15)}._button--text_531rm_222:disabled{color:var(--colors-neutral-text-color-text-quaternary);cursor:default;background-color:initial}._button--text--danger_531rm_238{color:var(--colors-brand-error-color-error);background-color:transparent;border:1px solid transparent}._button--text--danger_531rm_238:hover{color:var(--colors-brand-error-color-error-hover);background-color:var(--colors-brand-error-color-error-bg);border:1px solid var(--colors-brand-error-color-error-bg)}._button--text--danger_531rm_238:active{color:var(--colors-brand-error-color-error-active);background-color:var(--colors-brand-error-color-error-bg);border:1px solid var(--colors-brand-error-color-error-hover)}._button--secondary_531rm_253{color:var(--accent);background-color:var(--white-100)}._button--secondary_531rm_253:hover{color:var(--accent-dark);background-color:var(--gray-5)}._button--secondary_531rm_253:active{color:var(--accent-light);background-color:initial}._button--secondary_531rm_253:disabled{color:var(--black-25);cursor:default;background-color:initial}._button--quick_531rm_270{height:2rem;padding:0 1rem;color:var(--accent);background-color:rgb(var(--accent-rgb),.05);border-radius:6px}._button--quick_531rm_270:hover{color:var(--accent-dark);background-color:rgb(var(--accent-rgb),.1)}._button--quick_531rm_270:active{color:var(--accent-light);background-color:rgb(var(--accent-rgb),.05)}._button--quick_531rm_270:disabled{color:var(--gray-50);cursor:default;background-color:var(--gray-10)}._button__loading-container_531rm_290{display:flex;gap:8px;align-items:center}
package/dist/assets/Snackbar.css CHANGED
@@ -1 +1 @@
1
- ._snackbar_8unab_2{display:block;width:40.5rem;margin:0 auto}@keyframes _bottomToTop_8unab_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}._snackbar__snackbar-el-wrapper_8unab_15{position:fixed;bottom:1rem;z-index:5500}._snackbar--content_8unab_20{display:flex;align-items:center;justify-content:space-between;width:40.5rem;height:3.5rem;padding:var(--size-base-size-sm) var(--size-base-size);overflow:hidden;border-spacing:2px;border-style:solid;border-radius:var(--border-radius-border-radius)}._snackbar_8unab_2:has(._snackbar--success_8unab_32) ._snackbar--content_8unab_20{background:var(--colors-brand-success-color-success-bg);border-color:var(--colors-brand-success-color-success-border)}._snackbar_8unab_2:has(._snackbar--error_8unab_36) ._snackbar--content_8unab_20{background:var(--colors-brand-error-color-error-bg);border-color:var(--colors-brand-error-color-error-border)}._snackbar_8unab_2:has(._snackbar--warning_8unab_40) ._snackbar--content_8unab_20{background:var(--colors-brand-warning-color-warning-bg);border-color:var(--colors-brand-warning-color-warning-border)}._snackbar--action_8unab_44{position:absolute;top:1rem;right:1rem;padding:0;margin:0;cursor:pointer;background:none;border:none}
1
+ ._snackbar_14f4w_2{display:block;width:40.5rem;margin:0 auto}@keyframes _bottomToTop_14f4w_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}._snackbar__snackbar-el-wrapper_14f4w_15{position:fixed;bottom:1rem;z-index:5500}._snackbar--content_14f4w_20{display:flex;gap:1rem;align-items:center;justify-content:space-between;width:40.5rem;min-height:3.5rem;padding:var(--size-base-size-sm) var(--size-base-size);overflow:hidden;border-spacing:2px;border-style:solid;border-radius:var(--border-radius-border-radius)}._snackbar--message_14f4w_33{flex:1;word-break:break-word}._snackbar_14f4w_2:has(._snackbar--success_14f4w_37) ._snackbar--content_14f4w_20{background:var(--colors-brand-success-color-success-bg);border-color:var(--colors-brand-success-color-success-border)}._snackbar_14f4w_2:has(._snackbar--error_14f4w_41) ._snackbar--content_14f4w_20{background:var(--colors-brand-error-color-error-bg);border-color:var(--colors-brand-error-color-error-border)}._snackbar_14f4w_2:has(._snackbar--warning_14f4w_45) ._snackbar--content_14f4w_20{background:var(--colors-brand-warning-color-warning-bg);border-color:var(--colors-brand-warning-color-warning-border)}._snackbar--action_14f4w_49{all:unset;display:inline-flex;cursor:pointer}
package/dist/components/Button/Button.d.ts CHANGED
@@ -2,7 +2,9 @@ import { Either } from '../../types/helpers';
2
2
  import { ButtonOwnProps as MUIButtonBaseProps } from '@mui/base';
3
3
  import { ReactNode } from 'react';
4
4
 
5
- type Variant = 'primary' | 'secondary' | 'quick';
5
+ type Variant = 'primary' | 'default' | 'dashed' | 'text' | 'link' | 'quick' | 'secondary';
6
+ type ButtonSize = 'large' | 'medium' | 'small';
7
+ type ButtonShape = 'round' | 'square';
6
8
  type ButtonCoreProps = {
7
9
  /** Button to display and act in a loading state */
8
10
  loading?: boolean;
@@ -14,6 +16,12 @@ type ButtonCoreProps = {
14
16
  children: ReactNode;
15
17
  /** alternative style to use*/
16
18
  variant?: Variant;
19
+ /** alternative shape to use */
20
+ shape?: ButtonShape;
21
+ /** alternative style to use*/
22
+ size?: ButtonSize;
23
+ /** set danger button */
24
+ danger?: boolean;
17
25
  /** mui base button props */
18
26
  muiButtonBaseProps?: MUIButtonBaseProps;
19
27
  /** Id to be applied as `data-testid` on the container element */
package/dist/components/Button/Button.js CHANGED
@@ -1,67 +1,91 @@
1
1
  import '../../assets/Button.css';
2
- import { jsx as p, jsxs as l } from "react/jsx-runtime";
3
- import { forwardRef as x, useMemo as c } from "react";
4
- import { c as v } from "../../clsx-DB4S2d7J.js";
5
- import { LoadingSpinner as m } from "../LoadingSpinner/LoadingSpinner.js";
6
- import { B as f } from "../../Button-BAljjMv3.js";
7
- const k = "_button_dxo5v_57", t = {
8
- "u-typography-h1": "_u-typography-h1_dxo5v_1",
9
- "u-typography-h2": "_u-typography-h2_dxo5v_8",
10
- "u-typography-h3": "_u-typography-h3_dxo5v_15",
11
- "u-typography-h4": "_u-typography-h4_dxo5v_22",
12
- "u-typography-h5": "_u-typography-h5_dxo5v_29",
13
- "u-typography-h6": "_u-typography-h6_dxo5v_36",
14
- "u-typography-base": "_u-typography-base_dxo5v_43",
15
- "u-typography-base--xxl": "_u-typography-base--xxl_dxo5v_49",
16
- "u-typography-base--xl": "_u-typography-base--xl_dxo5v_53",
17
- "u-typography-base--lg": "_u-typography-base--lg_dxo5v_57",
18
- button: k,
19
- "u-typography-base--sm": "_u-typography-base--sm_dxo5v_61",
20
- "u-typography-base--bold": "_u-typography-base--bold_dxo5v_65",
21
- "u-typography-base--strikethrough": "_u-typography-base--strikethrough_dxo5v_68",
22
- "u-typography-base--underlined": "_u-typography-base--underlined_dxo5v_71",
23
- "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_dxo5v_74",
24
- "button--primary": "_button--primary_dxo5v_86",
25
- "button--secondary": "_button--secondary_dxo5v_101",
26
- "button--quick": "_button--quick_dxo5v_118",
27
- "button__loading-container": "_button__loading-container_dxo5v_138"
28
- }, S = x((y, _) => {
2
+ import { jsx as e, jsxs as f } from "react/jsx-runtime";
3
+ import { forwardRef as k, useMemo as x } from "react";
4
+ import { c as q } from "../../clsx-DB4S2d7J.js";
5
+ import { LoadingSpinner as B } from "../LoadingSpinner/LoadingSpinner.js";
6
+ import { B as $ } from "../../Button-BAljjMv3.js";
7
+ const v = "_button_531rm_43", r = {
8
+ "u-typography-h1": "_u-typography-h1_531rm_1",
9
+ "u-typography-h2": "_u-typography-h2_531rm_8",
10
+ "u-typography-h3": "_u-typography-h3_531rm_15",
11
+ "u-typography-h4": "_u-typography-h4_531rm_22",
12
+ "u-typography-h5": "_u-typography-h5_531rm_29",
13
+ "u-typography-h6": "_u-typography-h6_531rm_36",
14
+ "u-typography-base": "_u-typography-base_531rm_43",
15
+ button: v,
16
+ "u-typography-base--xxl": "_u-typography-base--xxl_531rm_49",
17
+ "u-typography-base--xl": "_u-typography-base--xl_531rm_53",
18
+ "u-typography-base--lg": "_u-typography-base--lg_531rm_57",
19
+ "button--large": "_button--large_531rm_57",
20
+ "u-typography-base--sm": "_u-typography-base--sm_531rm_61",
21
+ "u-typography-base--bold": "_u-typography-base--bold_531rm_65",
22
+ "u-typography-base--strikethrough": "_u-typography-base--strikethrough_531rm_68",
23
+ "u-typography-base--underlined": "_u-typography-base--underlined_531rm_71",
24
+ "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_531rm_74",
25
+ "button--small": "_button--small_531rm_92",
26
+ "button--round": "_button--round_531rm_95",
27
+ "button--primary": "_button--primary_531rm_98",
28
+ "button--primary--danger": "_button--primary--danger_531rm_117",
29
+ "button--default": "_button--default_531rm_129",
30
+ "button--default--danger": "_button--default--danger_531rm_150",
31
+ "button--dashed": "_button--dashed_531rm_162",
32
+ "button--dashed--danger": "_button--dashed--danger_531rm_183",
33
+ "button--link": "_button--link_531rm_195",
34
+ "button--link--danger": "_button--link--danger_531rm_212",
35
+ "button--text": "_button--text_531rm_222",
36
+ "button--text--danger": "_button--text--danger_531rm_238",
37
+ "button--secondary": "_button--secondary_531rm_253",
38
+ "button--quick": "_button--quick_531rm_270",
39
+ "button__loading-container": "_button__loading-container_531rm_290"
40
+ }, w = k((p, s) => {
29
41
  const {
30
- onClick: u,
31
- link: e,
32
- loading: n,
33
- children: a,
34
- type: s = "button",
35
- disabled: h,
36
- className: r,
37
- variant: o = "primary",
38
- muiButtonBaseProps: d,
39
- "data-testid": g
40
- } = y, i = {
41
- invert: o === "secondary" || o === "quick"
42
- }, b = c(
43
- () => v([t.button, t[`button--${o}`], r]),
44
- [r, o]
42
+ onClick: y,
43
+ link: d,
44
+ children: o,
45
+ type: b = "button",
46
+ disabled: m,
47
+ loading: h,
48
+ className: a,
49
+ size: n = "medium",
50
+ variant: t = "default",
51
+ shape: u = "square",
52
+ danger: _,
53
+ muiButtonBaseProps: g,
54
+ "data-testid": i
55
+ } = p, l = {
56
+ invert: t !== "primary"
57
+ };
58
+ (t === "quick" || t === "secondary") && (u !== "square" || n !== "medium" || _) && console.error("Secondary and Quick variants do not support shape, size or danger props");
59
+ const c = x(
60
+ () => q([
61
+ r.button,
62
+ r[`button--${t}`],
63
+ r[`button--${n}`],
64
+ r[`button--${u}`],
65
+ _ && r[`button--${t}--danger`],
66
+ a
67
+ ]),
68
+ [a, t]
45
69
  );
46
- return /* @__PURE__ */ p(
47
- f,
70
+ return /* @__PURE__ */ e(
71
+ $,
48
72
  {
49
- type: s,
50
- href: e,
51
- onClick: u,
52
- disabled: h,
53
- className: b,
54
- ref: _,
55
- "data-testid": g,
56
- ...d ?? {},
57
- children: n ? /* @__PURE__ */ l("div", { className: t["button__loading-container"], children: [
58
- /* @__PURE__ */ p(m, { ...i }),
59
- a
60
- ] }) : a
73
+ type: b,
74
+ href: d,
75
+ onClick: y,
76
+ disabled: m,
77
+ className: c,
78
+ ref: s,
79
+ "data-testid": i,
80
+ ...g ?? {},
81
+ children: h ? /* @__PURE__ */ f("div", { className: r["button__loading-container"], children: [
82
+ /* @__PURE__ */ e(B, { ...l }),
83
+ o
84
+ ] }) : o
61
85
  }
62
86
  );
63
87
  });
64
88
  export {
65
- S as Button,
66
- S as default
89
+ w as Button,
90
+ w as default
67
91
  };
package/dist/components/Button/Button.stories.d.ts CHANGED
@@ -1,8 +1,9 @@
1
+ import { ButtonProps } from '../../main';
1
2
  import { StoryObj } from '@storybook/react';
2
3
 
3
4
  declare const meta: {
4
5
  title: string;
5
- component: import('react').ForwardRefExoticComponent<import('./Button').ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
6
+ component: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
6
7
  tags: string[];
7
8
  parameters: {
8
9
  layout: string;
@@ -11,8 +12,15 @@ declare const meta: {
11
12
  export default meta;
12
13
  type Story = StoryObj<typeof meta>;
13
14
  export declare const Primary: Story;
14
- export declare const PrimaryDisabled: Story;
15
- export declare const Secondary: Story;
16
- export declare const SecondaryDisabled: Story;
15
+ export declare const Default: Story;
16
+ export declare const Dashed: Story;
17
+ export declare const Text: Story;
18
+ export declare const Link: Story;
17
19
  export declare const Quick: Story;
18
- export declare const QuickDisabled: Story;
20
+ export declare const Secondary: Story;
21
+ export declare const Danger: Story;
22
+ export declare const Disabled: Story;
23
+ export declare const WithIcon: Story;
24
+ export declare const WithIconDanger: Story;
25
+ export declare const WithAction: Story;
26
+ export declare const Loading: Story;
package/dist/components/Button/Button.test.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/components/Snackbar/Snackbar.d.ts CHANGED
@@ -10,7 +10,7 @@ export type SnackbarProps = InputHTMLAttributes<HTMLInputElement> & {
10
10
  open?: boolean;
11
11
  /** ID that tests can use to get this component from the DOM */
12
12
  'data-testid'?: string;
13
- /** Space seperated list of CSS classes to apply */
13
+ /** Space separated list of CSS classes to apply */
14
14
  classNameWrapper?: string;
15
15
  /** Duration of visibility */
16
16
  autoHideDuration?: number;
package/dist/components/Snackbar/Snackbar.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import '../../assets/Snackbar.css';
2
2
  import { jsx as h, jsxs as Y } from "react/jsx-runtime";
3
- import * as w from "react";
4
- import C, { useState as V, useRef as X } from "react";
5
- import { c as S } from "../../clsx-DB4S2d7J.js";
3
+ import * as N from "react";
4
+ import S, { useState as V, useRef as X } from "react";
5
+ import { c as R } from "../../clsx-DB4S2d7J.js";
6
6
  import { Icon as K } from "../Icon/Icon.js";
7
7
  import { Text as $ } from "../Typography/Typography.js";
8
- import { g as z, a as J, b as R, f as H, _ as j, c as U, P as n, d as Q, e as Z } from "../../useSlotProps-C_I1kEHr.js";
8
+ import { g as z, a as J, b as D, f as H, _ as j, c as U, P as n, d as Q, e as Z } from "../../useSlotProps-C_I1kEHr.js";
9
9
  import { u as ee } from "../../useTimeout-DxF9kiZL.js";
10
10
  import { u as I } from "../../useEventCallback-BAQJJ3ye.js";
11
11
  import { C as B } from "../../ClickAwayListener-DbEYZpyh.js";
@@ -23,58 +23,58 @@ function ne(u = {}) {
23
23
  open: t,
24
24
  resumeHideDuration: e
25
25
  } = u, o = ee();
26
- w.useEffect(() => {
26
+ N.useEffect(() => {
27
27
  if (!t)
28
28
  return;
29
- function l(c) {
30
- c.defaultPrevented || (c.key === "Escape" || c.key === "Esc") && (r == null || r(c, "escapeKeyDown"));
29
+ function c(l) {
30
+ l.defaultPrevented || (l.key === "Escape" || l.key === "Esc") && (r == null || r(l, "escapeKeyDown"));
31
31
  }
32
- return document.addEventListener("keydown", l), () => {
33
- document.removeEventListener("keydown", l);
32
+ return document.addEventListener("keydown", c), () => {
33
+ document.removeEventListener("keydown", c);
34
34
  };
35
35
  }, [t, r]);
36
- const a = I((l, c) => {
37
- r == null || r(l, c);
38
- }), d = I((l) => {
39
- !r || l == null || o.start(l, () => {
36
+ const a = I((c, l) => {
37
+ r == null || r(c, l);
38
+ }), d = I((c) => {
39
+ !r || c == null || o.start(c, () => {
40
40
  a(null, "timeout");
41
41
  });
42
42
  });
43
- w.useEffect(() => (t && d(s), o.clear), [t, s, d, o]);
44
- const m = (l) => {
45
- r == null || r(l, "clickaway");
46
- }, p = o.clear, E = w.useCallback(() => {
43
+ N.useEffect(() => (t && d(s), o.clear), [t, s, d, o]);
44
+ const m = (c) => {
45
+ r == null || r(c, "clickaway");
46
+ }, p = o.clear, E = N.useCallback(() => {
47
47
  s != null && d(e ?? s * 0.5);
48
- }, [s, e, d]), x = (l) => (c) => {
49
- const f = l.onBlur;
50
- f == null || f(c), E();
51
- }, O = (l) => (c) => {
52
- const f = l.onFocus;
53
- f == null || f(c), p();
54
- }, T = (l) => (c) => {
55
- const f = l.onMouseEnter;
56
- f == null || f(c), p();
57
- }, N = (l) => (c) => {
58
- const f = l.onMouseLeave;
59
- f == null || f(c), E();
48
+ }, [s, e, d]), b = (c) => (l) => {
49
+ const f = c.onBlur;
50
+ f == null || f(l), E();
51
+ }, g = (c) => (l) => {
52
+ const f = c.onFocus;
53
+ f == null || f(l), p();
54
+ }, w = (c) => (l) => {
55
+ const f = c.onMouseEnter;
56
+ f == null || f(l), p();
57
+ }, O = (c) => (l) => {
58
+ const f = c.onMouseLeave;
59
+ f == null || f(l), E();
60
60
  };
61
- return w.useEffect(() => {
61
+ return N.useEffect(() => {
62
62
  if (!i && t)
63
63
  return window.addEventListener("focus", E), window.addEventListener("blur", p), () => {
64
64
  window.removeEventListener("focus", E), window.removeEventListener("blur", p);
65
65
  };
66
66
  }, [i, t, E, p]), {
67
- getRootProps: (l = {}) => {
68
- const c = R({}, H(u), H(l));
69
- return R({
67
+ getRootProps: (c = {}) => {
68
+ const l = D({}, H(u), H(c));
69
+ return D({
70
70
  // ClickAwayListener adds an `onClick` prop which results in the alert not being announced.
71
71
  // See https://github.com/mui/material-ui/issues/29080
72
72
  role: "presentation"
73
- }, l, c, {
74
- onBlur: x(c),
75
- onFocus: O(c),
76
- onMouseEnter: T(c),
77
- onMouseLeave: N(c)
73
+ }, c, l, {
74
+ onBlur: b(l),
75
+ onFocus: g(l),
76
+ onMouseEnter: w(l),
77
+ onMouseLeave: O(l)
78
78
  });
79
79
  },
80
80
  onClickAway: m
@@ -82,7 +82,7 @@ function ne(u = {}) {
82
82
  }
83
83
  const oe = ["autoHideDuration", "children", "disableWindowBlurListener", "exited", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "slotProps", "slots"], re = () => Q({
84
84
  root: ["root"]
85
- }, Z(te)), q = /* @__PURE__ */ w.forwardRef(function(s, i) {
85
+ }, Z(te)), q = /* @__PURE__ */ N.forwardRef(function(s, i) {
86
86
  const {
87
87
  autoHideDuration: r = null,
88
88
  children: t,
@@ -93,35 +93,35 @@ const oe = ["autoHideDuration", "children", "disableWindowBlurListener", "exited
93
93
  resumeHideDuration: m,
94
94
  slotProps: p = {},
95
95
  slots: E = {}
96
- } = s, x = j(s, oe), O = re(), {
97
- getRootProps: T,
98
- onClickAway: N
99
- } = ne(R({}, s, {
96
+ } = s, b = j(s, oe), g = re(), {
97
+ getRootProps: w,
98
+ onClickAway: O
99
+ } = ne(D({}, s, {
100
100
  autoHideDuration: r,
101
101
  disableWindowBlurListener: e,
102
102
  onClose: a,
103
103
  open: d,
104
104
  resumeHideDuration: m
105
- })), L = s, l = E.root || "div", c = U({
106
- elementType: l,
107
- getSlotProps: T,
108
- externalForwardedProps: x,
105
+ })), L = s, c = E.root || "div", l = U({
106
+ elementType: c,
107
+ getSlotProps: w,
108
+ externalForwardedProps: b,
109
109
  externalSlotProps: p.root,
110
110
  additionalProps: {
111
111
  ref: i
112
112
  },
113
113
  ownerState: L,
114
- className: O.root
114
+ className: g.root
115
115
  }), f = U({
116
116
  elementType: B,
117
117
  externalSlotProps: p.clickAwayListener,
118
118
  additionalProps: {
119
- onClickAway: N
119
+ onClickAway: O
120
120
  },
121
121
  ownerState: L
122
122
  });
123
- return delete f.ownerState, !d && o ? null : /* @__PURE__ */ h(B, R({}, f, {
124
- children: /* @__PURE__ */ h(l, R({}, c, {
123
+ return delete f.ownerState, !d && o ? null : /* @__PURE__ */ h(B, D({}, f, {
124
+ children: /* @__PURE__ */ h(c, D({}, l, {
125
125
  children: t
126
126
  }))
127
127
  }));
@@ -226,22 +226,22 @@ process.env.NODE_ENV !== "production" && n.oneOfType([n.string, n.shape({
226
226
  exitDone: n.string,
227
227
  exitActive: n.string
228
228
  })]);
229
- const G = C.createContext(null);
229
+ const G = S.createContext(null);
230
230
  var ie = function(s) {
231
231
  return s.scrollTop;
232
- }, D = "unmounted", v = "exited", k = "entering", g = "entered", A = "exiting", b = /* @__PURE__ */ function(u) {
232
+ }, C = "unmounted", v = "exited", k = "entering", y = "entered", A = "exiting", x = /* @__PURE__ */ function(u) {
233
233
  se(s, u);
234
234
  function s(r, t) {
235
235
  var e;
236
236
  e = u.call(this, r, t) || this;
237
237
  var o = t, a = o && !o.isMounting ? r.enter : r.appear, d;
238
- return e.appearStatus = null, r.in ? a ? (d = v, e.appearStatus = k) : d = g : r.unmountOnExit || r.mountOnEnter ? d = D : d = v, e.state = {
238
+ return e.appearStatus = null, r.in ? a ? (d = v, e.appearStatus = k) : d = y : r.unmountOnExit || r.mountOnEnter ? d = C : d = v, e.state = {
239
239
  status: d
240
240
  }, e.nextCallback = null, e;
241
241
  }
242
242
  s.getDerivedStateFromProps = function(t, e) {
243
243
  var o = t.in;
244
- return o && e.status === D ? {
244
+ return o && e.status === C ? {
245
245
  status: v
246
246
  } : null;
247
247
  };
@@ -252,7 +252,7 @@ var ie = function(s) {
252
252
  var e = null;
253
253
  if (t !== this.props) {
254
254
  var o = this.state.status;
255
- this.props.in ? o !== k && o !== g && (e = k) : (o === k || o === g) && (e = A);
255
+ this.props.in ? o !== k && o !== y && (e = k) : (o === k || o === y) && (e = A);
256
256
  }
257
257
  this.updateStatus(!1, e);
258
258
  }, i.componentWillUnmount = function() {
@@ -276,13 +276,13 @@ var ie = function(s) {
276
276
  this.performExit();
277
277
  else
278
278
  this.props.unmountOnExit && this.state.status === v && this.setState({
279
- status: D
279
+ status: C
280
280
  });
281
281
  }, i.performEnter = function(t) {
282
- var e = this, o = this.props.enter, a = this.context ? this.context.isMounting : t, d = this.props.nodeRef ? [a] : [P.findDOMNode(this), a], m = d[0], p = d[1], E = this.getTimeouts(), x = a ? E.appear : E.enter;
282
+ var e = this, o = this.props.enter, a = this.context ? this.context.isMounting : t, d = this.props.nodeRef ? [a] : [P.findDOMNode(this), a], m = d[0], p = d[1], E = this.getTimeouts(), b = a ? E.appear : E.enter;
283
283
  if (!t && !o || F.disabled) {
284
284
  this.safeSetState({
285
- status: g
285
+ status: y
286
286
  }, function() {
287
287
  e.props.onEntered(m);
288
288
  });
@@ -291,9 +291,9 @@ var ie = function(s) {
291
291
  this.props.onEnter(m, p), this.safeSetState({
292
292
  status: k
293
293
  }, function() {
294
- e.props.onEntering(m, p), e.onTransitionEnd(x, function() {
294
+ e.props.onEntering(m, p), e.onTransitionEnd(b, function() {
295
295
  e.safeSetState({
296
- status: g
296
+ status: y
297
297
  }, function() {
298
298
  e.props.onEntered(m, p);
299
299
  });
@@ -345,21 +345,21 @@ var ie = function(s) {
345
345
  t != null && setTimeout(this.nextCallback, t);
346
346
  }, i.render = function() {
347
347
  var t = this.state.status;
348
- if (t === D)
348
+ if (t === C)
349
349
  return null;
350
350
  var e = this.props, o = e.children;
351
351
  e.in, e.mountOnEnter, e.unmountOnExit, e.appear, e.enter, e.exit, e.timeout, e.addEndListener, e.onEnter, e.onEntering, e.onEntered, e.onExit, e.onExiting, e.onExited, e.nodeRef;
352
352
  var a = j(e, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
353
353
  return (
354
354
  // allows for nested Transitions
355
- /* @__PURE__ */ C.createElement(G.Provider, {
355
+ /* @__PURE__ */ S.createElement(G.Provider, {
356
356
  value: null
357
- }, typeof o == "function" ? o(t, a) : C.cloneElement(C.Children.only(o), a))
357
+ }, typeof o == "function" ? o(t, a) : S.cloneElement(S.Children.only(o), a))
358
358
  );
359
359
  }, s;
360
- }(C.Component);
361
- b.contextType = G;
362
- b.propTypes = process.env.NODE_ENV !== "production" ? {
360
+ }(S.Component);
361
+ x.contextType = G;
362
+ x.propTypes = process.env.NODE_ENV !== "production" ? {
363
363
  /**
364
364
  * A React reference to DOM element that need to transition:
365
365
  * https://stackoverflow.com/a/51127130/4671932
@@ -528,36 +528,37 @@ b.propTypes = process.env.NODE_ENV !== "production" ? {
528
528
  */
529
529
  onExited: n.func
530
530
  } : {};
531
- function y() {
531
+ function _() {
532
532
  }
533
- b.defaultProps = {
533
+ x.defaultProps = {
534
534
  in: !1,
535
535
  mountOnEnter: !1,
536
536
  unmountOnExit: !1,
537
537
  appear: !1,
538
538
  enter: !0,
539
539
  exit: !0,
540
- onEnter: y,
541
- onEntering: y,
542
- onEntered: y,
543
- onExit: y,
544
- onExiting: y,
545
- onExited: y
540
+ onEnter: _,
541
+ onEntering: _,
542
+ onEntered: _,
543
+ onExit: _,
544
+ onExiting: _,
545
+ onExited: _
546
546
  };
547
- b.UNMOUNTED = D;
548
- b.EXITED = v;
549
- b.ENTERING = k;
550
- b.ENTERED = g;
551
- b.EXITING = A;
552
- const ue = "_snackbar_8unab_2", le = "_bottomToTop_8unab_1", _ = {
547
+ x.UNMOUNTED = C;
548
+ x.EXITED = v;
549
+ x.ENTERING = k;
550
+ x.ENTERED = y;
551
+ x.EXITING = A;
552
+ const ue = "_snackbar_14f4w_2", ce = "_bottomToTop_14f4w_1", T = {
553
553
  snackbar: ue,
554
- "snackbar__snackbar-el-wrapper": "_snackbar__snackbar-el-wrapper_8unab_15",
555
- "snackbar--content": "_snackbar--content_8unab_20",
556
- "snackbar--success": "_snackbar--success_8unab_32",
557
- "snackbar--error": "_snackbar--error_8unab_36",
558
- "snackbar--warning": "_snackbar--warning_8unab_40",
559
- "snackbar--action": "_snackbar--action_8unab_44",
560
- bottomToTop: le
554
+ "snackbar__snackbar-el-wrapper": "_snackbar__snackbar-el-wrapper_14f4w_15",
555
+ "snackbar--content": "_snackbar--content_14f4w_20",
556
+ "snackbar--message": "_snackbar--message_14f4w_33",
557
+ "snackbar--success": "_snackbar--success_14f4w_37",
558
+ "snackbar--error": "_snackbar--error_14f4w_41",
559
+ "snackbar--warning": "_snackbar--warning_14f4w_45",
560
+ "snackbar--action": "_snackbar--action_14f4w_49",
561
+ bottomToTop: ce
561
562
  }, ke = ({
562
563
  snackbarMessage: u,
563
564
  variant: s,
@@ -574,43 +575,43 @@ const ue = "_snackbar_8unab_2", le = "_bottomToTop_8unab_1", _ = {
574
575
  exiting: "translateY(80px)",
575
576
  exited: "translateY(80px)",
576
577
  unmounted: "translateY(80px)"
577
- }, x = () => {
578
+ }, b = () => {
578
579
  m(!1);
579
- }, O = () => {
580
+ }, g = () => {
580
581
  m(!0);
581
582
  };
582
- return /* @__PURE__ */ h("div", { className: S(_.snackbar, o), children: /* @__PURE__ */ h(
583
+ return /* @__PURE__ */ h("div", { className: R(T.snackbar, o), children: /* @__PURE__ */ h(
583
584
  q,
584
585
  {
585
586
  autoHideDuration: i,
586
587
  open: r,
587
- onClose: (T, N) => N !== "clickaway" && (t == null ? void 0 : t()),
588
+ onClose: (w, O) => O !== "clickaway" && (t == null ? void 0 : t()),
588
589
  exited: d,
589
- className: S(_["snackbar__snackbar-el-wrapper"]),
590
+ className: R(T["snackbar__snackbar-el-wrapper"]),
590
591
  children: /* @__PURE__ */ h(
591
- b,
592
+ x,
592
593
  {
593
594
  timeout: { enter: 400, exit: 400 },
594
595
  in: r,
595
596
  appear: !0,
596
597
  unmountOnExit: !0,
597
- onEnter: x,
598
- onExited: O,
598
+ onEnter: b,
599
+ onExited: g,
599
600
  onExit: e,
600
601
  nodeRef: p,
601
- children: (T) => /* @__PURE__ */ Y(
602
+ children: (w) => /* @__PURE__ */ Y(
602
603
  "div",
603
604
  {
604
- className: S(_["snackbar--content"], _[`snackbar--${s}`]),
605
+ className: R(T["snackbar--content"], T[`snackbar--${s}`]),
605
606
  style: {
606
- transform: E[T],
607
+ transform: E[w],
607
608
  transition: "transform 300ms ease"
608
609
  },
609
610
  ref: p,
610
611
  "data-testid": a,
611
612
  children: [
612
- /* @__PURE__ */ h("div", { className: S(_["snackbar--message"]), children: /* @__PURE__ */ h($, { variant: "base-lg", bold: !0, color: "var(--colors-neutral-text-color-text)", children: u }) }),
613
- /* @__PURE__ */ h("div", { className: S(_["snackbar--action"]), children: /* @__PURE__ */ h("a", { onClick: t, children: /* @__PURE__ */ h(K, { icon: "circle-xmark", color: "var(--colors-neutral-text-color-text)", size: "1.5rem" }) }) })
613
+ /* @__PURE__ */ h("div", { className: T["snackbar--message"], children: /* @__PURE__ */ h($, { variant: "base-lg", bold: !0, color: "var(--colors-neutral-text-color-text)", children: u }) }),
614
+ /* @__PURE__ */ h("button", { type: "button", className: R(T["snackbar--action"]), onClick: t, children: /* @__PURE__ */ h(K, { icon: "circle-xmark", color: "var(--colors-neutral-text-color-text)", size: "1.5rem" }) })
614
615
  ]
615
616
  }
616
617
  )
package/dist/components/Snackbar/Snackbar.stories.d.ts CHANGED
@@ -317,3 +317,4 @@ type Story = StoryObj<typeof meta>;
317
317
  export declare const Success: Story;
318
318
  export declare const Error: Story;
319
319
  export declare const Warning: Story;
320
+ export declare const WithALongText: Story;
package/dist/marola.css CHANGED
@@ -1 +1 @@
1
- :root{--secondary-orange: #ffa945;--secondary-orange-rgb: 255, 169, 69;--secondary-orange-dark: #fe8d53;--secondary-orange-dark-rgb: 254, 141, 83;--secondary-orange-light: #525061;--secondary-orange-light-rgb: 82, 80, 97;--secondary-green: #99dec3;--secondary-green-rgb: 153, 222, 195;--secondary-green-dark: #6acbb1;--secondary-green-dark-rgb: 106, 203, 177;--secondary-green-darker: #31aa7e;--secondary-green-darker-rgb: 49, 170, 126;--secondary-green-light: #baedd9;--secondary-green-light-rgb: 186, 237, 217;--accent: #1897f3;--accent-rgb: 24, 151, 243;--accent-dark: #1672c7;--accent-dark-rgb: 22, 114, 199;--accent-light: #4fb1f9;--accent-light-rgb: 79, 177, 249;--accent-lighter: #8ae1fd;--accent-lighter-rgb: 138, 225, 253;--alert: #df4561;--alert-rgb: 223, 69, 97;--alert-dark: #bb2b45;--alert-dark-rgb: 187, 43, 69;--accent-alert-light: #f37c91;--accent-alert-light-rgb: 243, 124, 145;--cream: #fafafa;--cream-rgb: 250, 250, 250;--hover: #42b7ff;--hover-rgb: 66, 183, 255;--active: #0a75cc;--active-rgb: 10, 117, 204;--border: #d9d9d9;--border-rgb: 217, 217, 217;--border-secondary: #f0f0f0;--border-secondary-rgb: 240, 240, 240;--error-background: #fff2f0;--error-background-rgb: 255, 242, 240;--error-border: #ffccc7;--error-border-rgb: 255, 204, 199;--error-text: #d9363e;--error-text-rgb: 217, 54, 62;--success-text: #045440;--success-text-rgb: 4, 84, 64;--warning-text: #874d00;--warning-text-rgb: 135, 77, 0;--warning: #faad14;--warning-rgb: 250, 173, 20;--avatar-background: rgba(63, 61, 75, .2509803922);--avatar-background-rgb: 63, 61, 75}:root{--gray-100: #16161e;--gray-100-rgb: 22, 22, 30;--gray-95: #3f3d4b;--gray-95-rgb: 63, 61, 75;--gray-90: #525061;--gray-90-rgb: 82, 80, 97;--gray-75: #838192;--gray-75-rgb: 131, 129, 146;--gray-50: #bcbac8;--gray-50-rgb: 188, 186, 200;--gray-25: #dbdae2;--gray-25-rgb: 219, 218, 226;--gray-10: #ebeaf0;--gray-10-rgb: 235, 234, 240;--gray-5: #f7f7fc;--gray-5-rgb: 247, 247, 252;--black-100: #000000;--black-100-rgb: 0, 0, 0;--black-75: #616161;--black-75-rgb: 97, 97, 97;--black-50: #838192;--black-50-rgb: 131, 129, 146;--black-25: #bcbac8;--black-25-rgb: 188, 186, 200;--black-10: #ebeaf0;--black-10-rgb: 235, 234, 240;--white-100: #ffffff;--white-100-rgb: 255, 255, 255;--green-1: #f0fff7;--green-1-rgb: 240, 255, 247;--green-3: #a1edcb;--green-3-rgb: 161, 237, 203;--green-6: #28c88f;--green-6-rgb: 40, 200, 143;--blue-1: #e6f9ff;--blue-1-rgb: 230, 249, 255;--blue-3: #94ddff;--blue-3-rgb: 148, 221, 255;--blue-6: #1897f3;--blue-6-rgb: 24, 151, 243;--gold-1: #fffbe6;--gold-1-rgb: 255, 251, 230;--gold-3: #ffe58f;--gold-3-rgb: 255, 229, 143;--gold-6: #faad14;--gold-6-rgb: 250, 173, 20;--magenta-1: #fff0f6;--magenta-1-rgb: 255, 240, 246;--magenta-3: #ffadd2;--magenta-3-rgb: 255, 173, 210;--magenta-6: #eb2f96;--magenta-6-rgb: 235, 47, 150;--cyan-1: #e6fffb;--cyan-1-rgb: 230, 255, 251;--cyan-3: #87e8de;--cyan-3-rgb: 135, 232, 222;--cyan-6: #13c2c2;--cyan-6-rgb: 19, 194, 194;--geek-blue-1: #f0f5ff;--geek-blue-1-rgb: 240, 245, 255;--geek-blue-3: #adc6ff;--geek-blue-3-rgb: 173, 198, 255;--geek-blue-6: #2f54eb;--geek-blue-6-rgb: 47, 84, 235;--lime-1: #fcffe6;--lime-1-rgb: 252, 255, 230;--lime-3: #eaff8f;--lime-3-rgb: 234, 255, 143;--lime-6: #a0d911;--lime-6-rgb: 160, 217, 17;--orange-1: #fffaf0;--orange-1-rgb: 255, 250, 240;--orange-3: #ffe8bf;--orange-3-rgb: 255, 232, 191;--orange-6: #ffa945;--orange-6-rgb: 255, 169, 69;--purple-1: #f9f0ff;--purple-1-rgb: 249, 240, 255;--purple-3: #d3adf7;--purple-3-rgb: 211, 173, 247;--purple-6: #722ed1;--purple-6-rgb: 114, 46, 209;--red-1: #fff0f0;--red-1-rgb: 255, 240, 240;--red-3: #fcbdc3;--red-3-rgb: 252, 189, 195;--red-6: #d53a56;--red-6-rgb: 213, 58, 86;--volcano-1: #fff2e8;--volcano-1-rgb: 255, 242, 232;--volcano-3: #ffbb96;--volcano-3-rgb: 255, 187, 150;--volcano-6: #fa541c;--volcano-6-rgb: 250, 84, 28}:root{--heading-font-weight: 700;--heading-font-size-1: 3.75rem;--heading-line-height-1: 4.875rem;--heading-font-size-2: 3rem;--heading-line-height-2: 4rem;--heading-font-size-3: 2.25rem;--heading-line-height-3: 2.875rem;--heading-font-size-4: 1.875rem;--heading-line-height-4: 2.375rem;--heading-font-size-5: 1.5rem;--heading-line-height-5: 2rem;--heading-font-size-6: 1.25rem;--heading-line-height-6: 1.75rem;--base-font-size: .875rem;--base-line-height: 1.375rem;--base-weight: 400;--base-bold: 700;--base-font-size-sm: .75rem;--base-line-height-sm: 1.25rem;--base-font-size-lg: 1rem;--base-line-height-lg: 1.5rem;--base-font-size-xl: 1.25rem;--base-line-height-xl: 1.75rem;--base-font-size-xxl: 1.5rem;--base-line-height-xxl: 2rem}:root{--heading-font-weight: 700;--heading-font-size-xl: 3.75rem;--heading-line-height-xl: 4.875rem;--heading-font-size-l: 3rem;--heading-line-height-l: 3.9375rem;--heading-font-size: 2.25rem;--heading-line-height: 2.875rem;--heading-font-size-s: 1.5rem;--heading-line-height-s: 2rem;--body-font-size: 1rem;--body-line-height: 1.3125rem;--body-weight: normal;--body-bold: bold;--body-font-size-large: 1.5rem;--body-line-height-large: 1.625rem;--body-font-size-medium: 1.125;--body-line-height-medium: 1rem;--body-font-size-small: .875rem;--body-line-height-small: 1.125rem;--body-font-size-tiny: .75rem;--body-line-height-tiny: 1rem;--quote-font-size-large: 1.5rem;--quote-line-height-large: 2rem;--quote-font-weight-large: normal;--quote-font-size: 1rem;--quote-line-height: 1.3125rem;--quote-font-weight: normal;--form-input-font-size: 1rem;--form-input-line-height: 1.3125rem;--form-input-font-weight: bold;--form-hint-font-size: .875rem;--form-hint-line-height: 1.3125rem;--form-hint-font-weight: normal;--form-label-font-size: .875rem;--form-label-line-height: 1.3125rem;--form-label-font-weight: normal;--form-dropdown-font-size: 1rem;--form-dropdown-line-height: 1.3125rem;--form-dropdown-font-weight: normal;--table-font-size: .875rem;--table-line-height: 1.0625rem;--table-header-font-weight: bold;--table-body-font-weight: normal;--table-body-secondary-line-height: 1.3125rem;--button-font-size: 1rem;--button-line-height: 1.25rem;--button-font-weight: bold;--font-size-small: .75rem;--font-weight-small: 400;--font-line-height-small: 1.25rem;--font-weight-700: 700}:root{--spacing: 8px;--border-radius: 6px;--border-radius-soft: 4px;--transition-soft: .3s;--transition-long: .75s}*{box-sizing:border-box}:root{--border-radius-border-radius: .375rem;--size-base-size: 1rem;--size-base-size-sm: .75rem;--colors-base-green-3: #a1edcb;--colors-brand-success-color-success-border: var(--colors-base-green-3);--colors-base-green-1: #f0fff7;--colors-brand-success-color-success-bg: var(--colors-base-green-1);--colors-brand-error-color-error-border: #ffccc7;--colors-brand-error-color-error-bg: #fff2f0;--colors-base-gold-3: #ffe58f;--colors-brand-warning-color-warning-border: var(--colors-base-gold-3);--colors-base-gold-1: #fffbe6;--colors-brand-warning-color-warning-bg: var(--colors-base-gold-1);--colors-base-blue-3: #94ddff;--colors-brand-primary-color-primary-border: var(--colors-base-blue-3);--colors-brand-info-color-info-border: var(--colors-brand-primary-color-primary-border);--colors-base-blue-1: #e6f9ff;--colors-brand-primary-color-primary-bg: var(--colors-base-blue-1);--colors-brand-info-color-info-bg: var(--colors-brand-primary-color-primary-bg);--colors-base-blue-6: #1897f3;--colors-brand-primary-color-primary: var(--colors-base-blue-6);--colors-base-blue-4: #6bcbff;--colors-brand-primary-color-primary-border-hover: var(--colors-base-blue-4);--colors-neutral-text-color-text: rgba(63, 61, 75, .8784313725);--colors-neutral-text-color-text-tertiary: rgba(63, 61, 75, .4509803922);--colors-neutral-text-color-text-description: var(--colors-neutral-text-color-text-tertiary);--colors-neutral-text-color-text-quaternary: rgba(63, 61, 75, .2509803922);--colors-neutral-text-color-text-disabled: var(--colors-neutral-text-color-text-quaternary);--colors-neutral-fill-color-fill: rgba(0, 0, 0, .1490196078)}
1
+ :root{--secondary-orange: #ffa945;--secondary-orange-rgb: 255, 169, 69;--secondary-orange-dark: #fe8d53;--secondary-orange-dark-rgb: 254, 141, 83;--secondary-orange-light: #525061;--secondary-orange-light-rgb: 82, 80, 97;--secondary-green: #99dec3;--secondary-green-rgb: 153, 222, 195;--secondary-green-dark: #6acbb1;--secondary-green-dark-rgb: 106, 203, 177;--secondary-green-darker: #31aa7e;--secondary-green-darker-rgb: 49, 170, 126;--secondary-green-light: #baedd9;--secondary-green-light-rgb: 186, 237, 217;--accent: #1897f3;--accent-rgb: 24, 151, 243;--accent-dark: #1672c7;--accent-dark-rgb: 22, 114, 199;--accent-light: #4fb1f9;--accent-light-rgb: 79, 177, 249;--accent-lighter: #8ae1fd;--accent-lighter-rgb: 138, 225, 253;--alert: #df4561;--alert-rgb: 223, 69, 97;--alert-dark: #bb2b45;--alert-dark-rgb: 187, 43, 69;--accent-alert-light: #f37c91;--accent-alert-light-rgb: 243, 124, 145;--cream: #fafafa;--cream-rgb: 250, 250, 250;--hover: #42b7ff;--hover-rgb: 66, 183, 255;--active: #0a75cc;--active-rgb: 10, 117, 204;--border: #d9d9d9;--border-rgb: 217, 217, 217;--border-secondary: #f0f0f0;--border-secondary-rgb: 240, 240, 240;--error-background: #fff2f0;--error-background-rgb: 255, 242, 240;--error-border: #ffccc7;--error-border-rgb: 255, 204, 199;--error-text: #d9363e;--error-text-rgb: 217, 54, 62;--success-text: #045440;--success-text-rgb: 4, 84, 64;--warning-text: #874d00;--warning-text-rgb: 135, 77, 0;--warning: #faad14;--warning-rgb: 250, 173, 20;--avatar-background: rgba(63, 61, 75, .2509803922);--avatar-background-rgb: 63, 61, 75}:root{--gray-100: #16161e;--gray-100-rgb: 22, 22, 30;--gray-95: #3f3d4b;--gray-95-rgb: 63, 61, 75;--gray-90: #525061;--gray-90-rgb: 82, 80, 97;--gray-75: #838192;--gray-75-rgb: 131, 129, 146;--gray-50: #bcbac8;--gray-50-rgb: 188, 186, 200;--gray-25: #dbdae2;--gray-25-rgb: 219, 218, 226;--gray-10: #ebeaf0;--gray-10-rgb: 235, 234, 240;--gray-5: #f7f7fc;--gray-5-rgb: 247, 247, 252;--black-100: #000000;--black-100-rgb: 0, 0, 0;--black-75: #616161;--black-75-rgb: 97, 97, 97;--black-50: #838192;--black-50-rgb: 131, 129, 146;--black-25: #bcbac8;--black-25-rgb: 188, 186, 200;--black-10: #ebeaf0;--black-10-rgb: 235, 234, 240;--white-100: #ffffff;--white-100-rgb: 255, 255, 255;--green-1: #f0fff7;--green-1-rgb: 240, 255, 247;--green-3: #a1edcb;--green-3-rgb: 161, 237, 203;--green-6: #28c88f;--green-6-rgb: 40, 200, 143;--blue-1: #e6f9ff;--blue-1-rgb: 230, 249, 255;--blue-3: #94ddff;--blue-3-rgb: 148, 221, 255;--blue-6: #1897f3;--blue-6-rgb: 24, 151, 243;--gold-1: #fffbe6;--gold-1-rgb: 255, 251, 230;--gold-3: #ffe58f;--gold-3-rgb: 255, 229, 143;--gold-6: #faad14;--gold-6-rgb: 250, 173, 20;--magenta-1: #fff0f6;--magenta-1-rgb: 255, 240, 246;--magenta-3: #ffadd2;--magenta-3-rgb: 255, 173, 210;--magenta-6: #eb2f96;--magenta-6-rgb: 235, 47, 150;--cyan-1: #e6fffb;--cyan-1-rgb: 230, 255, 251;--cyan-3: #87e8de;--cyan-3-rgb: 135, 232, 222;--cyan-6: #13c2c2;--cyan-6-rgb: 19, 194, 194;--geek-blue-1: #f0f5ff;--geek-blue-1-rgb: 240, 245, 255;--geek-blue-3: #adc6ff;--geek-blue-3-rgb: 173, 198, 255;--geek-blue-6: #2f54eb;--geek-blue-6-rgb: 47, 84, 235;--lime-1: #fcffe6;--lime-1-rgb: 252, 255, 230;--lime-3: #eaff8f;--lime-3-rgb: 234, 255, 143;--lime-6: #a0d911;--lime-6-rgb: 160, 217, 17;--orange-1: #fffaf0;--orange-1-rgb: 255, 250, 240;--orange-3: #ffe8bf;--orange-3-rgb: 255, 232, 191;--orange-6: #ffa945;--orange-6-rgb: 255, 169, 69;--purple-1: #f9f0ff;--purple-1-rgb: 249, 240, 255;--purple-3: #d3adf7;--purple-3-rgb: 211, 173, 247;--purple-6: #722ed1;--purple-6-rgb: 114, 46, 209;--red-1: #fff0f0;--red-1-rgb: 255, 240, 240;--red-3: #fcbdc3;--red-3-rgb: 252, 189, 195;--red-6: #d53a56;--red-6-rgb: 213, 58, 86;--volcano-1: #fff2e8;--volcano-1-rgb: 255, 242, 232;--volcano-3: #ffbb96;--volcano-3-rgb: 255, 187, 150;--volcano-6: #fa541c;--volcano-6-rgb: 250, 84, 28}:root{--heading-font-weight: 700;--heading-font-size-1: 3.75rem;--heading-line-height-1: 4.875rem;--heading-font-size-2: 3rem;--heading-line-height-2: 4rem;--heading-font-size-3: 2.25rem;--heading-line-height-3: 2.875rem;--heading-font-size-4: 1.875rem;--heading-line-height-4: 2.375rem;--heading-font-size-5: 1.5rem;--heading-line-height-5: 2rem;--heading-font-size-6: 1.25rem;--heading-line-height-6: 1.75rem;--base-font-size: .875rem;--base-line-height: 1.375rem;--base-weight: 400;--base-bold: 700;--base-font-size-sm: .75rem;--base-line-height-sm: 1.25rem;--base-font-size-lg: 1rem;--base-line-height-lg: 1.5rem;--base-font-size-xl: 1.25rem;--base-line-height-xl: 1.75rem;--base-font-size-xxl: 1.5rem;--base-line-height-xxl: 2rem}:root{--heading-font-weight: 700;--heading-font-size-xl: 3.75rem;--heading-line-height-xl: 4.875rem;--heading-font-size-l: 3rem;--heading-line-height-l: 3.9375rem;--heading-font-size: 2.25rem;--heading-line-height: 2.875rem;--heading-font-size-s: 1.5rem;--heading-line-height-s: 2rem;--body-font-size: 1rem;--body-line-height: 1.3125rem;--body-weight: normal;--body-bold: bold;--body-font-size-large: 1.5rem;--body-line-height-large: 1.625rem;--body-font-size-medium: 1.125;--body-line-height-medium: 1rem;--body-font-size-small: .875rem;--body-line-height-small: 1.125rem;--body-font-size-tiny: .75rem;--body-line-height-tiny: 1rem;--quote-font-size-large: 1.5rem;--quote-line-height-large: 2rem;--quote-font-weight-large: normal;--quote-font-size: 1rem;--quote-line-height: 1.3125rem;--quote-font-weight: normal;--form-input-font-size: 1rem;--form-input-line-height: 1.3125rem;--form-input-font-weight: bold;--form-hint-font-size: .875rem;--form-hint-line-height: 1.3125rem;--form-hint-font-weight: normal;--form-label-font-size: .875rem;--form-label-line-height: 1.3125rem;--form-label-font-weight: normal;--form-dropdown-font-size: 1rem;--form-dropdown-line-height: 1.3125rem;--form-dropdown-font-weight: normal;--table-font-size: .875rem;--table-line-height: 1.0625rem;--table-header-font-weight: bold;--table-body-font-weight: normal;--table-body-secondary-line-height: 1.3125rem;--button-font-size: 1rem;--button-line-height: 1.25rem;--button-font-weight: bold;--font-size-small: .75rem;--font-weight-small: 400;--font-line-height-small: 1.25rem;--font-weight-700: 700}:root{--spacing: 8px;--border-radius: 6px;--border-radius-soft: 4px;--transition-soft: .3s;--transition-long: .75s}*{box-sizing:border-box}:root{--border-radius-border-radius: .375rem;--size-base-size: 1rem;--size-base-size-sm: .75rem;--colors-base-green-3: #a1edcb;--colors-brand-success-color-success-border: var(--colors-base-green-3);--colors-base-green-1: #f0fff7;--colors-brand-success-color-success-bg: var(--colors-base-green-1);--colors-brand-error-color-error-border: #ffccc7;--colors-brand-error-color-error-bg: #fff2f0;--colors-brand-error-color-error-hover: #ff7875;--colors-brand-error-color-error-active: #d9363e;--colors-brand-error-color-error: #ff4d4f;--colors-base-gold-3: #ffe58f;--colors-brand-warning-color-warning-border: var(--colors-base-gold-3);--colors-base-gold-1: #fffbe6;--colors-brand-warning-color-warning-bg: var(--colors-base-gold-1);--colors-base-blue-3: #94ddff;--colors-brand-primary-color-primary-border: var(--colors-base-blue-3);--colors-brand-info-color-info-border: var(--colors-brand-primary-color-primary-border);--colors-base-blue-1: #e6f9ff;--colors-brand-primary-color-primary-bg: var(--colors-base-blue-1);--colors-brand-info-color-info-bg: var(--colors-brand-primary-color-primary-bg);--colors-base-blue-6: #1897f3;--colors-brand-primary-color-primary: var(--colors-base-blue-6);--colors-base-blue-4: #6bcbff;--colors-brand-primary-color-primary-border-hover: var(--colors-base-blue-4);--colors-base-blue-7: #0a75cc;--colors-brand-primary-color-primary-active: var(--colors-base-blue-7);--colors-neutral-border-color-border: #d9d9d9;--colors-neutral-text-color-text: rgba(63, 61, 75, .8784313725);--colors-neutral-text-color-text-tertiary: rgba(63, 61, 75, .4509803922);--colors-neutral-text-color-text-description: var(--colors-neutral-text-color-text-tertiary);--colors-neutral-text-color-text-quaternary: rgba(63, 61, 75, .2509803922);--colors-neutral-text-color-text-disabled: var(--colors-neutral-text-color-text-quaternary);--colors-neutral-fill-color-fill: rgba(0, 0, 0, .1490196078)}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pismo/marola",
3
3
  "description": "CDX tribe component library",
4
- "version": "1.0.28",
4
+ "version": "1.1.0",
5
5
  "type": "module",
6
6
  "main": "dist/main.js",
7
7
  "types": "dist/main.d.ts",