@pismo/marola 1.0.0-beta.55 → 1.0.0-beta.56

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 (7) hide show
  1. package/dist/assets/PageHeader.css +1 -1
  2. package/dist/components/PageHeader/PageHeader.d.ts +6 -2
  3. package/dist/components/PageHeader/PageHeader.js +79 -72
  4. package/dist/components/PageHeader/PageHeader.stories.d.ts +3 -1
  5. package/dist/components/PageHeader/PageHeader.test.d.ts +1 -0
  6. package/dist/marola.css +1 -1
  7. package/package.json +1 -1
package/dist/assets/PageHeader.css CHANGED
@@ -1 +1 @@
1
- ._u-typography-h1_1qpkd_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_1qpkd_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_1qpkd_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_1qpkd_22,._page-header__main-left-content_1qpkd_22 ._title_1qpkd_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_1qpkd_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_1qpkd_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_1qpkd_43,._page-header__main-left-content_1qpkd_22 ._subtitle_1qpkd_43{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_1qpkd_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_1qpkd_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_1qpkd_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_1qpkd_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_1qpkd_65,._page-header__main-left-content_1qpkd_22 ._title_1qpkd_22{font-weight:var(--base-bold)}._u-typography-base--strikethrough_1qpkd_68{text-decoration:line-through}._u-typography-base--underlined_1qpkd_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_1qpkd_74{text-decoration:underline line-through}._page-header_1qpkd_22{display:flex;flex-direction:column;justify-content:center;width:100%;min-height:7.375rem;background:var(--cream);-webkit-font-smoothing:antialiased!important}._page-header_1qpkd_22:has(._page-header__top-content_1qpkd_87){justify-content:flex-start}._page-header__top-content_1qpkd_87,._page-header__main-content_1qpkd_90,._page-header__bottom-content_1qpkd_90{width:64rem;max-width:100%;margin:0 auto}._page-header__top-content_1qpkd_87{padding:1rem 0 .5rem}._page-header__top-content_1qpkd_87 button{width:fit-content;height:1.125rem;padding:0;line-height:1.125rem}._page-header__breadcrumb_1qpkd_104{display:flex;gap:.25rem;align-items:center}._page-header__breadcrumb__separator_1qpkd_109{height:1.125rem;padding:0;margin-right:-.25rem;line-height:1.125rem}._page-header__main-content_1qpkd_90{display:flex}._page-header__main-left-content_1qpkd_22{display:flex;flex:1;flex-direction:column;justify-content:center}._page-header__main-left-content_1qpkd_22 ._title_1qpkd_22,._page-header__main-left-content_1qpkd_22 ._subtitle_1qpkd_43{display:block;width:100%;padding:0;margin:0;color:var(--gray-90)}._page-header__main-right-content_1qpkd_132{display:flex;align-items:center;margin-bottom:1.125rem}._page-header__bottom-content_1qpkd_90{margin-top:.8125rem}
1
+ ._u-typography-h1_13xad_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_13xad_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_13xad_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_13xad_22,._page-header__main-left-content_13xad_22 ._title_13xad_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_13xad_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_13xad_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_13xad_43,._page-header__main-left-content_13xad_22 ._subtitle_13xad_43{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_13xad_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_13xad_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_13xad_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_13xad_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_13xad_65,._page-header__main-left-content_13xad_22 ._title_13xad_22{font-weight:var(--base-bold)}._u-typography-base--strikethrough_13xad_68{text-decoration:line-through}._u-typography-base--underlined_13xad_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_13xad_74{text-decoration:underline line-through}._page-header_13xad_22{display:flex;flex-direction:column;justify-content:center;width:100%;min-height:7.375rem;background:var(--cream);-webkit-font-smoothing:antialiased!important}._page-header_13xad_22:has(._page-header__top-content_13xad_87){justify-content:flex-start}._page-header__top-content_13xad_87,._page-header__main-content_13xad_90,._page-header__bottom-content_13xad_90{width:64rem;max-width:100%;margin:0 auto}._page-header__top-content_13xad_87{padding:1rem 0 .5rem}._page-header__top-content_13xad_87 button{width:fit-content;height:1.125rem;padding:0;line-height:1.125rem}._page-header__breadcrumb_13xad_104{display:flex;gap:.25rem;align-items:center}._page-header__breadcrumb__separator_13xad_109{height:1.125rem;padding:0;margin-right:-.25rem;line-height:1.125rem}._page-header__main-content_13xad_90{position:relative;display:flex}._page-header__main-left-content_13xad_22{display:flex;flex:1;flex-direction:column;justify-content:center}._page-header__main-left-content_13xad_22 ._title_13xad_22,._page-header__main-left-content_13xad_22 ._subtitle_13xad_43{display:block;width:100%;padding:0;margin:0;color:var(--gray-90)}._page-header__main-left-content_13xad_22 ._account-header_13xad_133{flex:1}._page-header__main-left-content_13xad_22 ._account-header--container_13xad_136{position:absolute;max-width:80%;height:5.75rem;background-color:var(--white-100);border:1px solid var(--border-secondary);border-radius:8px}._page-header__main-right-content_13xad_144{display:flex;align-items:center;margin-bottom:1.125rem}._page-header__bottom-content_13xad_90{margin-top:.8125rem}._account-header-margin_13xad_153{margin-bottom:16px}
package/dist/components/PageHeader/PageHeader.d.ts CHANGED
@@ -17,9 +17,11 @@ type LastBreadcrumbItem = Omit<BreadcrumbItem, 'onClick'> & {
17
17
  };
18
18
  type PageHeaderCommonProps = {
19
19
  /** Title text */
20
- title: string;
20
+ title?: string;
21
21
  /** Subtitle text */
22
22
  subtitle?: string;
23
+ /** component to be rendered in the place of title and subtitle */
24
+ headerBubble?: ReactNode;
23
25
  /** Back link text
24
26
  * @deprecated Use breadcrumb prop instead.
25
27
  */
@@ -55,6 +57,8 @@ type PageHeaderCommonProps = {
55
57
  'data-testid-title'?: string;
56
58
  /** Id to be applied as `data-testid` on the subtitle element */
57
59
  'data-testid-subtitle'?: string;
60
+ /** Id to be applied as `data-testid` on the headerBubble element */
61
+ 'data-testid-account-header'?: string;
58
62
  breadcrumb?: never;
59
63
  };
60
64
  type PageHeaderWithBreadcrumb = Omit<PageHeaderCommonProps, 'backLinkText' | 'onBackLinkClick' | 'classNameBackLink' | 'data-testid-backLink' | 'breadcrumb'> & {
@@ -62,5 +66,5 @@ type PageHeaderWithBreadcrumb = Omit<PageHeaderCommonProps, 'backLinkText' | 'on
62
66
  breadcrumb?: [...BreadcrumbItem[], LastBreadcrumbItem];
63
67
  };
64
68
  export type PageHeaderProps = RequireAllOrNone<PageHeaderCommonProps, 'backLinkText' | 'onBackLinkClick'> | PageHeaderWithBreadcrumb;
65
- export declare const PageHeader: ({ title, subtitle, rightChildren, bottomChildren, classNameWrapper, classNameTitle, classNameSubtitle, "data-testid-wrapper": wrapperTestId, "data-testid-title": titleTestId, "data-testid-subtitle": subtitleTestId, ...props }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
69
+ export declare const PageHeader: ({ title, subtitle, rightChildren, bottomChildren, classNameWrapper, classNameTitle, classNameSubtitle, headerBubble, "data-testid-wrapper": wrapperTestId, "data-testid-title": titleTestId, "data-testid-subtitle": subtitleTestId, "data-testid-account-header": headerBubbleTestId, ...props }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
66
70
  export {};
package/dist/components/PageHeader/PageHeader.js CHANGED
@@ -1,87 +1,94 @@
1
1
  import '../../assets/PageHeader.css';
2
- import { jsx as a, jsxs as o } from "react/jsx-runtime";
3
- import { useMemo as L } from "react";
4
- import { c as h } from "../../clsx-DB4S2d7J.js";
5
- import { Icon as B } from "../Icon/Icon.js";
6
- import { IconButton as C } from "../IconButton/IconButton.js";
7
- const j = "_title_1qpkd_22", w = "_subtitle_1qpkd_43", e = {
8
- "u-typography-h1": "_u-typography-h1_1qpkd_1",
9
- "u-typography-h2": "_u-typography-h2_1qpkd_8",
10
- "u-typography-h3": "_u-typography-h3_1qpkd_15",
11
- "u-typography-h4": "_u-typography-h4_1qpkd_22",
12
- "page-header__main-left-content": "_page-header__main-left-content_1qpkd_22",
13
- title: j,
14
- "u-typography-h5": "_u-typography-h5_1qpkd_29",
15
- "u-typography-h6": "_u-typography-h6_1qpkd_36",
16
- "u-typography-base": "_u-typography-base_1qpkd_43",
17
- subtitle: w,
18
- "u-typography-base--xxl": "_u-typography-base--xxl_1qpkd_49",
19
- "u-typography-base--xl": "_u-typography-base--xl_1qpkd_53",
20
- "u-typography-base--lg": "_u-typography-base--lg_1qpkd_57",
21
- "u-typography-base--sm": "_u-typography-base--sm_1qpkd_61",
22
- "u-typography-base--bold": "_u-typography-base--bold_1qpkd_65",
23
- "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1qpkd_68",
24
- "u-typography-base--underlined": "_u-typography-base--underlined_1qpkd_71",
25
- "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1qpkd_74",
26
- "page-header": "_page-header_1qpkd_22",
27
- "page-header__top-content": "_page-header__top-content_1qpkd_87",
28
- "page-header__main-content": "_page-header__main-content_1qpkd_90",
29
- "page-header__bottom-content": "_page-header__bottom-content_1qpkd_90",
30
- "page-header__breadcrumb": "_page-header__breadcrumb_1qpkd_104",
31
- "page-header__breadcrumb__separator": "_page-header__breadcrumb__separator_1qpkd_109",
32
- "page-header__main-right-content": "_page-header__main-right-content_1qpkd_132"
33
- }, P = ({
34
- title: g,
35
- subtitle: y,
36
- rightChildren: n,
37
- bottomChildren: c,
38
- classNameWrapper: u,
39
- classNameTitle: b,
2
+ import { jsx as a, Fragment as i, jsxs as l } from "react/jsx-runtime";
3
+ import { useMemo as H } from "react";
4
+ import { c as d } from "../../clsx-DB4S2d7J.js";
5
+ import { Icon as I } from "../Icon/Icon.js";
6
+ import { IconButton as T } from "../IconButton/IconButton.js";
7
+ const $ = "_title_13xad_22", q = "_subtitle_13xad_43", e = {
8
+ "u-typography-h1": "_u-typography-h1_13xad_1",
9
+ "u-typography-h2": "_u-typography-h2_13xad_8",
10
+ "u-typography-h3": "_u-typography-h3_13xad_15",
11
+ "u-typography-h4": "_u-typography-h4_13xad_22",
12
+ "page-header__main-left-content": "_page-header__main-left-content_13xad_22",
13
+ title: $,
14
+ "u-typography-h5": "_u-typography-h5_13xad_29",
15
+ "u-typography-h6": "_u-typography-h6_13xad_36",
16
+ "u-typography-base": "_u-typography-base_13xad_43",
17
+ subtitle: q,
18
+ "u-typography-base--xxl": "_u-typography-base--xxl_13xad_49",
19
+ "u-typography-base--xl": "_u-typography-base--xl_13xad_53",
20
+ "u-typography-base--lg": "_u-typography-base--lg_13xad_57",
21
+ "u-typography-base--sm": "_u-typography-base--sm_13xad_61",
22
+ "u-typography-base--bold": "_u-typography-base--bold_13xad_65",
23
+ "u-typography-base--strikethrough": "_u-typography-base--strikethrough_13xad_68",
24
+ "u-typography-base--underlined": "_u-typography-base--underlined_13xad_71",
25
+ "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_13xad_74",
26
+ "page-header": "_page-header_13xad_22",
27
+ "page-header__top-content": "_page-header__top-content_13xad_87",
28
+ "page-header__main-content": "_page-header__main-content_13xad_90",
29
+ "page-header__bottom-content": "_page-header__bottom-content_13xad_90",
30
+ "page-header__breadcrumb": "_page-header__breadcrumb_13xad_104",
31
+ "page-header__breadcrumb__separator": "_page-header__breadcrumb__separator_13xad_109",
32
+ "account-header": "_account-header_13xad_133",
33
+ "account-header--container": "_account-header--container_13xad_136",
34
+ "page-header__main-right-content": "_page-header__main-right-content_13xad_144",
35
+ "account-header-margin": "_account-header-margin_13xad_153"
36
+ }, D = ({
37
+ title: n,
38
+ subtitle: g,
39
+ rightChildren: u,
40
+ bottomChildren: o,
41
+ classNameWrapper: y,
42
+ classNameTitle: x,
40
43
  classNameSubtitle: k,
41
- "data-testid-wrapper": m,
42
- "data-testid-title": q,
43
- "data-testid-subtitle": N,
44
- ...f
44
+ headerBubble: r,
45
+ "data-testid-wrapper": N,
46
+ "data-testid-title": f,
47
+ "data-testid-subtitle": v,
48
+ "data-testid-account-header": C,
49
+ ...L
45
50
  }) => {
46
51
  const {
47
- breadcrumb: _,
48
- backLinkText: r,
49
- onBackLinkClick: d,
50
- classNameBackLink: i,
51
- "data-testid-backLink": l,
52
- ...x
53
- } = f, v = L(() => {
54
- const p = [];
55
- return r && d && p.push({
56
- label: r,
57
- className: i,
58
- "data-testid": l,
59
- onClick: d
60
- }), _ && p.push(..._), /* @__PURE__ */ a("div", { className: e["page-header__top-content"], children: /* @__PURE__ */ a("div", { className: e["page-header__breadcrumb"], children: p.map((t, s) => /* @__PURE__ */ a(
61
- C,
52
+ breadcrumb: h,
53
+ backLinkText: p,
54
+ onBackLinkClick: s,
55
+ classNameBackLink: m,
56
+ "data-testid-backLink": b,
57
+ ...w
58
+ } = L;
59
+ r && (n || g || o) && console.error("headerBubble prop can not be used with title, subtitle or bottomChildren"), !r && !n && console.error("title prop is required when not using headerBubble");
60
+ const j = r ? d([e["page-header"], y, e["account-header-margin"]]) : d([e["page-header"], y]), B = H(() => {
61
+ const _ = [];
62
+ return p && s && _.push({
63
+ label: p,
64
+ className: m,
65
+ "data-testid": b,
66
+ onClick: s
67
+ }), h && _.push(...h), /* @__PURE__ */ a("div", { className: e["page-header__top-content"], children: /* @__PURE__ */ a("div", { className: e["page-header__breadcrumb"], children: _.map((t, c) => /* @__PURE__ */ a(
68
+ T,
62
69
  {
63
- icon: s === 0 ? /* @__PURE__ */ a(B, { icon: "arrow-left" }) : /* @__PURE__ */ a("span", { className: e["page-header__breadcrumb__separator"], children: "/" }),
70
+ icon: c === 0 ? /* @__PURE__ */ a(I, { icon: "arrow-left" }) : /* @__PURE__ */ a("span", { className: e["page-header__breadcrumb__separator"], children: "/" }),
64
71
  onClick: () => t.onClick && t.onClick(),
65
72
  className: t.className,
66
73
  "data-testid": t["data-testid"],
67
- disabled: p.length === 1 ? !1 : s === p.length - 1,
74
+ disabled: _.length === 1 ? !1 : c === _.length - 1,
68
75
  children: t.label
69
76
  },
70
- `${t.label}_${s}`
77
+ `${t.label}_${c}`
71
78
  )) }) });
72
- }, [_, r, i, l, d]);
73
- return /* @__PURE__ */ o("div", { className: h([e["page-header"], u]), "data-testid": m, ...x, children: [
74
- v,
75
- /* @__PURE__ */ o("div", { className: e["page-header__main-content"], children: [
76
- /* @__PURE__ */ o("div", { className: e["page-header__main-left-content"], children: [
77
- /* @__PURE__ */ a("h1", { className: h(e.title, b), "data-testid": q, children: g }),
78
- /* @__PURE__ */ a("h2", { className: h(e.subtitle, k), "data-testid": N, children: y })
79
- ] }),
80
- n && /* @__PURE__ */ a("div", { className: e["page-header__main-right-content"], children: n })
79
+ }, [h, p, m, b, s]);
80
+ return /* @__PURE__ */ a(i, { children: /* @__PURE__ */ l("div", { className: j, "data-testid": N, ...w, children: [
81
+ B,
82
+ /* @__PURE__ */ l("div", { className: e["page-header__main-content"], children: [
83
+ /* @__PURE__ */ a("div", { className: e["page-header__main-left-content"], children: r ? /* @__PURE__ */ a(i, { children: /* @__PURE__ */ a("div", { className: e["account-header"], children: /* @__PURE__ */ a("div", { className: e["account-header--container"], "data-testid": C, children: r }) }) }) : /* @__PURE__ */ l(i, { children: [
84
+ /* @__PURE__ */ a("h1", { className: d(e.title, x), "data-testid": f, children: n }),
85
+ /* @__PURE__ */ a("h2", { className: d(e.subtitle, k), "data-testid": v, children: g })
86
+ ] }) }),
87
+ u && /* @__PURE__ */ a("div", { className: e["page-header__main-right-content"], children: u })
81
88
  ] }),
82
- c && /* @__PURE__ */ a("div", { className: e["page-header__bottom-content"], children: c })
83
- ] });
89
+ o && /* @__PURE__ */ a("div", { className: e["page-header__bottom-content"], children: o })
90
+ ] }) });
84
91
  };
85
92
  export {
86
- P as PageHeader
93
+ D as PageHeader
87
94
  };
package/dist/components/PageHeader/PageHeader.stories.d.ts CHANGED
@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
5
- component: ({ title, subtitle, rightChildren, bottomChildren, classNameWrapper, classNameTitle, classNameSubtitle, "data-testid-wrapper": wrapperTestId, "data-testid-title": titleTestId, "data-testid-subtitle": subtitleTestId, ...props }: import('./PageHeader').PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
5
+ component: ({ title, subtitle, rightChildren, bottomChildren, classNameWrapper, classNameTitle, classNameSubtitle, headerBubble, "data-testid-wrapper": wrapperTestId, "data-testid-title": titleTestId, "data-testid-subtitle": subtitleTestId, "data-testid-account-header": headerBubbleTestId, ...props }: import('./PageHeader').PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
6
6
  tags: string[];
7
7
  };
8
8
  export default meta;
@@ -12,3 +12,5 @@ export declare const WithBackLink: Story;
12
12
  export declare const WithBreadcrumb: Story;
13
13
  export declare const WithRightChildren: Story;
14
14
  export declare const WithBottomChildren: Story;
15
+ export declare const WithHeaderBubble: Story;
16
+ export declare const WithLargeHeaderBubble: Story;
package/dist/components/PageHeader/PageHeader.test.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
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}: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}: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}
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}: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}: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}
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.0-beta.55",
4
+ "version": "1.0.0-beta.56",
5
5
  "type": "module",
6
6
  "main": "dist/main.js",
7
7
  "types": "dist/main.d.ts",