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

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

@@ -2,4 +2,4 @@
  * This file is automatically generated. Any changes will be lost.
  * run "yarn generate-icon-types" or "yarn build" to regenerate it.
  */
-export type IconName = 'arrow-down-arrow-up' | 'arrow-down-z-a' | 'arrow-left' | 'arrows-rotate' | 'badge-check' | 'bell' | 'building-columns' | 'calendar-days' | 'check-double' | 'chevron-down' | 'chevron-up' | 'circle-arrow-right' | 'circle-check' | 'circle-check-outline' | 'circle-exclamation' | 'circle-exclamation-outline' | 'circle-info' | 'circle-xmark' | 'circle-xmark-outline' | 'coins' | 'credit-card' | 'credit-card-blank' | 'credit-card-front' | 'empty-set' | 'eye' | 'eye-slash' | 'filter-list' | 'folder-magnifying-glass' | 'grid-horizontal' | 'house-blank' | 'list' | 'loader' | 'lock-keyhole' | 'logo' | 'magnifying-glass' | 'money-bill-trend-up' | 'money-bills' | 'paste' | 'pen-to-square' | 'piggy-bank' | 'rectangle-history' | 'rotate' | 'trash' | 'trash-can' | 'upload' | 'user' | 'user-group' | 'user-tie' | 'user-tie-hair' | 'user-vneck' | 'wallet' | 'warehouse-full' | 'xmark';
+export type IconName = 'arrow-down-arrow-up' | 'arrow-down-z-a' | 'arrow-left' | 'arrow-right-to-arc' | 'arrows-rotate' | 'badge-check' | 'bell' | 'building-columns' | 'calendar-days' | 'check-double' | 'chevron-down' | 'chevron-up' | 'circle-arrow-right' | 'circle-check' | 'circle-check-outline' | 'circle-exclamation' | 'circle-exclamation-outline' | 'circle-info' | 'circle-xmark' | 'circle-xmark-outline' | 'coins' | 'credit-card' | 'credit-card-blank' | 'credit-card-front' | 'ellipsis-vertical' | 'empty-set' | 'eye' | 'eye-slash' | 'filter-list' | 'folder-magnifying-glass' | 'grid-horizontal' | 'house-blank' | 'list' | 'loader' | 'lock-keyhole' | 'lock-keyhole-open' | 'logo' | 'magnifying-glass' | 'map-location-dot' | 'mobile-screen-button' | 'money-bill-transfer' | 'money-bill-trend-up' | 'money-bills' | 'notes-medical' | 'paste' | 'pen-to-square' | 'piggy-bank' | 'rectangle-history' | 'rectangle-history-circle-user' | 'rotate' | 'server' | 'sidebar' | 'trash' | 'trash-can' | 'upload' | 'user' | 'user-gear' | 'user-group' | 'user-tie' | 'user-tie-hair' | 'user-vneck' | 'users' | 'wallet' | 'warehouse-full' | 'xmark';

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

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: ({ invert, classNames }: import('./LoadingSpinner').LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
-    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         invert?: boolean | undefined;
         classNames?: string | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];

package/dist/components/PageHeader/PageHeader.d.ts

@@ -17,9 +17,11 @@ type LastBreadcrumbItem = Omit<BreadcrumbItem, 'onClick'> & {
 };
 type PageHeaderCommonProps = {
     /** Title text */
-    title: string;
+    title?: string;
     /** Subtitle text */
     subtitle?: string;
+    /** component to be rendered in the place of title and subtitle */
+    headerBubble?: ReactNode;
     /** Back link text
      * @deprecated Use breadcrumb prop instead.
      */
@@ -55,6 +57,8 @@ type PageHeaderCommonProps = {
     'data-testid-title'?: string;
     /** Id to be applied as `data-testid` on the subtitle element */
     'data-testid-subtitle'?: string;
+    /** Id to be applied as `data-testid` on the headerBubble element */
+    'data-testid-account-header'?: string;
     breadcrumb?: never;
 };
 type PageHeaderWithBreadcrumb = Omit<PageHeaderCommonProps, 'backLinkText' | 'onBackLinkClick' | 'classNameBackLink' | 'data-testid-backLink' | 'breadcrumb'> & {
@@ -62,5 +66,5 @@ type PageHeaderWithBreadcrumb = Omit<PageHeaderCommonProps, 'backLinkText' | 'on
     breadcrumb?: [...BreadcrumbItem[], LastBreadcrumbItem];
 };
 export type PageHeaderProps = RequireAllOrNone<PageHeaderCommonProps, 'backLinkText' | 'onBackLinkClick'> | PageHeaderWithBreadcrumb;
-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;
+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;
 export {};

package/dist/components/PageHeader/PageHeader.js

@@ -1,87 +1,94 @@
 import '../../assets/PageHeader.css';
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { useMemo as L } from "react";
-import { c as h } from "../../clsx-DB4S2d7J.js";
-import { Icon as B } from "../Icon/Icon.js";
-import { IconButton as C } from "../IconButton/IconButton.js";
-const j = "_title_1qpkd_22", w = "_subtitle_1qpkd_43", e = {
-  "u-typography-h1": "_u-typography-h1_1qpkd_1",
-  "u-typography-h2": "_u-typography-h2_1qpkd_8",
-  "u-typography-h3": "_u-typography-h3_1qpkd_15",
-  "u-typography-h4": "_u-typography-h4_1qpkd_22",
-  "page-header__main-left-content": "_page-header__main-left-content_1qpkd_22",
-  title: j,
-  "u-typography-h5": "_u-typography-h5_1qpkd_29",
-  "u-typography-h6": "_u-typography-h6_1qpkd_36",
-  "u-typography-base": "_u-typography-base_1qpkd_43",
-  subtitle: w,
-  "u-typography-base--xxl": "_u-typography-base--xxl_1qpkd_49",
-  "u-typography-base--xl": "_u-typography-base--xl_1qpkd_53",
-  "u-typography-base--lg": "_u-typography-base--lg_1qpkd_57",
-  "u-typography-base--sm": "_u-typography-base--sm_1qpkd_61",
-  "u-typography-base--bold": "_u-typography-base--bold_1qpkd_65",
-  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1qpkd_68",
-  "u-typography-base--underlined": "_u-typography-base--underlined_1qpkd_71",
-  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1qpkd_74",
-  "page-header": "_page-header_1qpkd_22",
-  "page-header__top-content": "_page-header__top-content_1qpkd_87",
-  "page-header__main-content": "_page-header__main-content_1qpkd_90",
-  "page-header__bottom-content": "_page-header__bottom-content_1qpkd_90",
-  "page-header__breadcrumb": "_page-header__breadcrumb_1qpkd_104",
-  "page-header__breadcrumb__separator": "_page-header__breadcrumb__separator_1qpkd_109",
-  "page-header__main-right-content": "_page-header__main-right-content_1qpkd_132"
-}, P = ({
-  title: g,
-  subtitle: y,
-  rightChildren: n,
-  bottomChildren: c,
-  classNameWrapper: u,
-  classNameTitle: b,
+import { jsx as a, Fragment as i, jsxs as l } from "react/jsx-runtime";
+import { useMemo as H } from "react";
+import { c as d } from "../../clsx-DB4S2d7J.js";
+import { Icon as I } from "../Icon/Icon.js";
+import { IconButton as T } from "../IconButton/IconButton.js";
+const $ = "_title_13xad_22", q = "_subtitle_13xad_43", e = {
+  "u-typography-h1": "_u-typography-h1_13xad_1",
+  "u-typography-h2": "_u-typography-h2_13xad_8",
+  "u-typography-h3": "_u-typography-h3_13xad_15",
+  "u-typography-h4": "_u-typography-h4_13xad_22",
+  "page-header__main-left-content": "_page-header__main-left-content_13xad_22",
+  title: $,
+  "u-typography-h5": "_u-typography-h5_13xad_29",
+  "u-typography-h6": "_u-typography-h6_13xad_36",
+  "u-typography-base": "_u-typography-base_13xad_43",
+  subtitle: q,
+  "u-typography-base--xxl": "_u-typography-base--xxl_13xad_49",
+  "u-typography-base--xl": "_u-typography-base--xl_13xad_53",
+  "u-typography-base--lg": "_u-typography-base--lg_13xad_57",
+  "u-typography-base--sm": "_u-typography-base--sm_13xad_61",
+  "u-typography-base--bold": "_u-typography-base--bold_13xad_65",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_13xad_68",
+  "u-typography-base--underlined": "_u-typography-base--underlined_13xad_71",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_13xad_74",
+  "page-header": "_page-header_13xad_22",
+  "page-header__top-content": "_page-header__top-content_13xad_87",
+  "page-header__main-content": "_page-header__main-content_13xad_90",
+  "page-header__bottom-content": "_page-header__bottom-content_13xad_90",
+  "page-header__breadcrumb": "_page-header__breadcrumb_13xad_104",
+  "page-header__breadcrumb__separator": "_page-header__breadcrumb__separator_13xad_109",
+  "account-header": "_account-header_13xad_133",
+  "account-header--container": "_account-header--container_13xad_136",
+  "page-header__main-right-content": "_page-header__main-right-content_13xad_144",
+  "account-header-margin": "_account-header-margin_13xad_153"
+}, D = ({
+  title: n,
+  subtitle: g,
+  rightChildren: u,
+  bottomChildren: o,
+  classNameWrapper: y,
+  classNameTitle: x,
   classNameSubtitle: k,
-  "data-testid-wrapper": m,
-  "data-testid-title": q,
-  "data-testid-subtitle": N,
-  ...f
+  headerBubble: r,
+  "data-testid-wrapper": N,
+  "data-testid-title": f,
+  "data-testid-subtitle": v,
+  "data-testid-account-header": C,
+  ...L
 }) => {
   const {
-    breadcrumb: _,
-    backLinkText: r,
-    onBackLinkClick: d,
-    classNameBackLink: i,
-    "data-testid-backLink": l,
-    ...x
-  } = f, v = L(() => {
-    const p = [];
-    return r && d && p.push({
-      label: r,
-      className: i,
-      "data-testid": l,
-      onClick: d
-    }), _ && 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(
-      C,
+    breadcrumb: h,
+    backLinkText: p,
+    onBackLinkClick: s,
+    classNameBackLink: m,
+    "data-testid-backLink": b,
+    ...w
+  } = L;
+  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");
+  const j = r ? d([e["page-header"], y, e["account-header-margin"]]) : d([e["page-header"], y]), B = H(() => {
+    const _ = [];
+    return p && s && _.push({
+      label: p,
+      className: m,
+      "data-testid": b,
+      onClick: s
+    }), 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(
+      T,
       {
-        icon: s === 0 ? /* @__PURE__ */ a(B, { icon: "arrow-left" }) : /* @__PURE__ */ a("span", { className: e["page-header__breadcrumb__separator"], children: "/" }),
+        icon: c === 0 ? /* @__PURE__ */ a(I, { icon: "arrow-left" }) : /* @__PURE__ */ a("span", { className: e["page-header__breadcrumb__separator"], children: "/" }),
         onClick: () => t.onClick && t.onClick(),
         className: t.className,
         "data-testid": t["data-testid"],
-        disabled: p.length === 1 ? !1 : s === p.length - 1,
+        disabled: _.length === 1 ? !1 : c === _.length - 1,
         children: t.label
       },
-      `${t.label}_${s}`
+      `${t.label}_${c}`
     )) }) });
-  }, [_, r, i, l, d]);
-  return /* @__PURE__ */ o("div", { className: h([e["page-header"], u]), "data-testid": m, ...x, children: [
-    v,
-    /* @__PURE__ */ o("div", { className: e["page-header__main-content"], children: [
-      /* @__PURE__ */ o("div", { className: e["page-header__main-left-content"], children: [
-        /* @__PURE__ */ a("h1", { className: h(e.title, b), "data-testid": q, children: g }),
-        /* @__PURE__ */ a("h2", { className: h(e.subtitle, k), "data-testid": N, children: y })
-      ] }),
-      n && /* @__PURE__ */ a("div", { className: e["page-header__main-right-content"], children: n })
+  }, [h, p, m, b, s]);
+  return /* @__PURE__ */ a(i, { children: /* @__PURE__ */ l("div", { className: j, "data-testid": N, ...w, children: [
+    B,
+    /* @__PURE__ */ l("div", { className: e["page-header__main-content"], children: [
+      /* @__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: [
+        /* @__PURE__ */ a("h1", { className: d(e.title, x), "data-testid": f, children: n }),
+        /* @__PURE__ */ a("h2", { className: d(e.subtitle, k), "data-testid": v, children: g })
+      ] }) }),
+      u && /* @__PURE__ */ a("div", { className: e["page-header__main-right-content"], children: u })
     ] }),
-    c && /* @__PURE__ */ a("div", { className: e["page-header__bottom-content"], children: c })
-  ] });
+    o && /* @__PURE__ */ a("div", { className: e["page-header__bottom-content"], children: o })
+  ] }) });
 };
 export {
-  P as PageHeader
+  D as PageHeader
 };

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

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    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;
+    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;
     tags: string[];
 };
 export default meta;
@@ -12,3 +12,5 @@ export declare const WithBackLink: Story;
 export declare const WithBreadcrumb: Story;
 export declare const WithRightChildren: Story;
 export declare const WithBottomChildren: Story;
+export declare const WithHeaderBubble: Story;
+export declare const WithLargeHeaderBubble: Story;

package/dist/components/PageHeader/PageHeader.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -25,7 +25,7 @@ declare const meta: {
         };
     };
     tags: string[];
-    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         [x: string]: any;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };

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

@@ -5,7 +5,7 @@ declare const meta: {
     title: string;
     component: ({ snackbarMessage, variant, autoHideDuration, open, onClose, onClosed, classNameWrapper, "data-testid": dataTestId, }: SnackbarProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
-    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         accept?: string | undefined;
         alt?: string | undefined;
         autoComplete?: import('react').HTMLInputAutoCompleteAttribute | undefined;

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

@@ -6,7 +6,7 @@ declare const meta: {
     title: string;
     component: import('react').ForwardRefExoticComponent<ToggleGroupProps & import('react').RefAttributes<HTMLFieldSetElement>>;
     tags: string[];
-    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         legend?: import('react').ReactNode;
         error?: import('react').ReactNode;
         children: import('react').ReactElement<import('./Toggle.tsx').ToggleGroupItemProps<string | number>, string | import('react').JSXElementConstructor<any>>[];

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

@@ -8,7 +8,7 @@ declare const meta: {
     parameters: {
         layout: string;
     };
-    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         children: import('react').ReactNode;
         title: import('react').ReactNode;
         open?: boolean | undefined;

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

@@ -12,7 +12,7 @@ declare const meta: {
             };
         };
     };
-    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         children: import('react').ReactNode;
         element?: import('react').ElementType | undefined;
         variant?: import('./Typography').VariantType | undefined;

package/dist/contexts/SnackbarProvider/SnackbarProvider.stories.d.ts

@@ -12,7 +12,7 @@ declare const meta: {
         };
     };
     tags: string[];
-    decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+    decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         [x: string]: any;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };

package/dist/marola.css

@@ -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}
+: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

@@ -1,7 +1,7 @@
 {
   "name": "@pismo/marola",
   "description": "CDX tribe component library",
-  "version": "1.0.0-beta.54",
+  "version": "1.0.0-beta.56",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",