@pismo/marola 1.0.29 → 1.1.1

package/dist/components/Button/Button.js

@@ -1,66 +1,90 @@
-import { jsx as p, jsxs as l } from "react/jsx-runtime";
-import { forwardRef as x, useMemo as c } from "react";
-import { c as v } from "../../clsx-DB4S2d7J.js";
-import { LoadingSpinner as m } from "../LoadingSpinner/LoadingSpinner.js";
-import { B as f } from "../../Button-BAljjMv3.js";
-import '../../assets/Button.css';const k = "_button_dxo5v_57", t = {
-  "u-typography-h1": "_u-typography-h1_dxo5v_1",
-  "u-typography-h2": "_u-typography-h2_dxo5v_8",
-  "u-typography-h3": "_u-typography-h3_dxo5v_15",
-  "u-typography-h4": "_u-typography-h4_dxo5v_22",
-  "u-typography-h5": "_u-typography-h5_dxo5v_29",
-  "u-typography-h6": "_u-typography-h6_dxo5v_36",
-  "u-typography-base": "_u-typography-base_dxo5v_43",
-  "u-typography-base--xxl": "_u-typography-base--xxl_dxo5v_49",
-  "u-typography-base--xl": "_u-typography-base--xl_dxo5v_53",
-  "u-typography-base--lg": "_u-typography-base--lg_dxo5v_57",
-  button: k,
-  "u-typography-base--sm": "_u-typography-base--sm_dxo5v_61",
-  "u-typography-base--bold": "_u-typography-base--bold_dxo5v_65",
-  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_dxo5v_68",
-  "u-typography-base--underlined": "_u-typography-base--underlined_dxo5v_71",
-  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_dxo5v_74",
-  "button--primary": "_button--primary_dxo5v_86",
-  "button--secondary": "_button--secondary_dxo5v_101",
-  "button--quick": "_button--quick_dxo5v_118",
-  "button__loading-container": "_button__loading-container_dxo5v_138"
-}, S = x((y, _) => {
+import { jsx as _, jsxs as m } from "react/jsx-runtime";
+import { forwardRef as c, useMemo as f } from "react";
+import { c as k } from "../../clsx-DB4S2d7J.js";
+import { LoadingSpinner as x } from "../LoadingSpinner/LoadingSpinner.js";
+import { B as q } from "../../Button-BAljjMv3.js";
+import '../../assets/Button.css';const B = "_button_1wddv_43", d = {
+  "u-typography-h1": "_u-typography-h1_1wddv_1",
+  "u-typography-h2": "_u-typography-h2_1wddv_8",
+  "u-typography-h3": "_u-typography-h3_1wddv_15",
+  "u-typography-h4": "_u-typography-h4_1wddv_22",
+  "u-typography-h5": "_u-typography-h5_1wddv_29",
+  "u-typography-h6": "_u-typography-h6_1wddv_36",
+  "u-typography-base": "_u-typography-base_1wddv_43",
+  button: B,
+  "u-typography-base--xxl": "_u-typography-base--xxl_1wddv_49",
+  "u-typography-base--xl": "_u-typography-base--xl_1wddv_53",
+  "u-typography-base--lg": "_u-typography-base--lg_1wddv_57",
+  "button--large": "_button--large_1wddv_57",
+  "u-typography-base--sm": "_u-typography-base--sm_1wddv_61",
+  "u-typography-base--bold": "_u-typography-base--bold_1wddv_65",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1wddv_68",
+  "u-typography-base--underlined": "_u-typography-base--underlined_1wddv_71",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1wddv_74",
+  "button--small": "_button--small_1wddv_93",
+  "button--round": "_button--round_1wddv_96",
+  "button--primary": "_button--primary_1wddv_99",
+  "button--primary--danger": "_button--primary--danger_1wddv_118",
+  "button--default": "_button--default_1wddv_130",
+  "button--default--danger": "_button--default--danger_1wddv_151",
+  "button--dashed": "_button--dashed_1wddv_163",
+  "button--dashed--danger": "_button--dashed--danger_1wddv_184",
+  "button--link": "_button--link_1wddv_196",
+  "button--link--danger": "_button--link--danger_1wddv_213",
+  "button--text": "_button--text_1wddv_223",
+  "button--text--danger": "_button--text--danger_1wddv_239",
+  "button--secondary": "_button--secondary_1wddv_254",
+  "button--quick": "_button--quick_1wddv_271",
+  "button__loading-container": "_button__loading-container_1wddv_291"
+}, P = c((e, p) => {
   const {
-    onClick: u,
-    link: e,
-    loading: n,
-    children: a,
-    type: s = "button",
+    onClick: s,
+    link: y,
+    children: o,
+    type: b = "button",
     disabled: h,
-    className: r,
-    variant: o = "primary",
-    muiButtonBaseProps: d,
-    "data-testid": g
-  } = y, i = {
-    invert: o === "secondary" || o === "quick"
-  }, b = c(
-    () => v([t.button, t[`button--${o}`], r]),
-    [r, o]
+    loading: g,
+    className: a,
+    size: n = "medium",
+    variant: t = "default",
+    shape: r = "square",
+    danger: u,
+    muiButtonBaseProps: i,
+    "data-testid": l
+  } = e, v = {
+    invert: t !== "primary"
+  };
+  (t === "quick" || t === "secondary") && (r !== "square" || n !== "medium" || u) && console.error("Secondary and Quick variants do not support shape, size or danger props");
+  const w = f(
+    () => k([
+      d.button,
+      d[`button--${t}`],
+      d[`button--${n}`],
+      d[`button--${r}`],
+      u && d[`button--${t}--danger`],
+      a
+    ]),
+    [a, t]
   );
-  return /* @__PURE__ */ p(
-    f,
+  return /* @__PURE__ */ _(
+    q,
     {
-      type: s,
-      href: e,
-      onClick: u,
+      type: b,
+      href: y,
+      onClick: s,
       disabled: h,
-      className: b,
-      ref: _,
-      "data-testid": g,
-      ...d ?? {},
-      children: n ? /* @__PURE__ */ l("div", { className: t["button__loading-container"], children: [
-        /* @__PURE__ */ p(m, { ...i }),
-        a
-      ] }) : a
+      className: w,
+      ref: p,
+      "data-testid": l,
+      ...i ?? {},
+      children: g ? /* @__PURE__ */ m("div", { className: d["button__loading-container"], children: [
+        /* @__PURE__ */ _(x, { ...v }),
+        o
+      ] }) : o
     }
   );
 });
 export {
-  S as Button,
-  S as default
+  P as Button,
+  P as default
 };

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

@@ -1,8 +1,9 @@
+import { ButtonProps } from '../../main';
 import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<import('./Button').ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+    component: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
     tags: string[];
     parameters: {
         layout: string;
@@ -11,8 +12,15 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Primary: Story;
-export declare const PrimaryDisabled: Story;
-export declare const Secondary: Story;
-export declare const SecondaryDisabled: Story;
+export declare const Default: Story;
+export declare const Dashed: Story;
+export declare const Text: Story;
+export declare const Link: Story;
 export declare const Quick: Story;
-export declare const QuickDisabled: Story;
+export declare const Secondary: Story;
+export declare const Danger: Story;
+export declare const Disabled: Story;
+export declare const WithIcon: Story;
+export declare const WithIconDanger: Story;
+export declare const WithAction: Story;
+export declare const Loading: Story;

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

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

package/dist/components/Calendar/Calendar.js

@@ -1,37 +1,37 @@
 import { jsx as s, jsxs as k } from "react/jsx-runtime";
 import { c as v } from "../../clsx-DB4S2d7J.js";
-import '../../assets/Calendar.css';const _ = {
-  "calendar-wrapper": "_calendar-wrapper_1ku17_1",
-  "mode-view": "_mode-view_1ku17_1",
-  "calendar-day": "_calendar-day_1ku17_7",
-  "day-number": "_day-number_1ku17_12",
-  "day-id": "_day-id_1ku17_18",
-  "day-active": "_day-active_1ku17_28",
-  "mode-edit": "_mode-edit_1ku17_33",
-  "day-checkbox": "_day-checkbox_1ku17_51"
-}, f = ({ days: t = [], onChangeDay: l, mode: o = "view", totalDays: e = 28, className: m, ...p }) => {
+import '../../assets/Calendar.css';const c = {
+  "calendar-wrapper": "_calendar-wrapper_1cyku_1",
+  "mode-view": "_mode-view_1cyku_1",
+  "calendar-day": "_calendar-day_1cyku_7",
+  "day-number": "_day-number_1cyku_12",
+  "day-id": "_day-id_1cyku_18",
+  "day-active": "_day-active_1cyku_28",
+  "mode-edit": "_mode-edit_1cyku_33",
+  "day-checkbox": "_day-checkbox_1cyku_51"
+}, b = ({ days: t = [], onChangeDay: l, mode: o = "view", totalDays: e = 28, className: m, ...p }) => {
   const u = (a, d) => {
     let r = [...t];
-    d !== void 0 ? a.active || a.id ? r[d] = a : r.splice(d, 1) : a.active && r.push(a), r = r.sort((c, i) => c.day - i.day), l == null || l({
+    d !== void 0 ? a.active || a.id ? r[d] = a : r.splice(d, 1) : a.active && r.push(a), r = r.sort((_, i) => _.day - i.day), l == null || l({
       changedDay: a,
       changedDayIndex: d,
       selectedDays: r
     });
   };
-  return /* @__PURE__ */ s("div", { className: v(_["calendar-wrapper"], _[`mode-${o}`], m), ...p, children: new Array(e).fill(null).map((a, d) => {
-    const r = d + 1, c = t.findIndex((n) => n.day === r), i = c >= 0 ? t[c] : void 0;
+  return /* @__PURE__ */ s("div", { className: v(c["calendar-wrapper"], c[`mode-${o}`], m), ...p, children: new Array(e).fill(null).map((a, d) => {
+    const r = d + 1, _ = t.findIndex((n) => n.day === r), i = _ >= 0 ? t[_] : void 0;
     return /* @__PURE__ */ k(
       "div",
       {
-        className: v(_["calendar-day"], (i == null ? void 0 : i.active) && _["day-active"]),
+        className: v(c["calendar-day"], (i == null ? void 0 : i.active) && c["day-active"]),
         onClick: o === "edit" ? () => u(
           { day: r, id: i == null ? void 0 : i.id, active: !(i != null && i.active) },
-          c >= 0 ? c : void 0
+          _ >= 0 ? _ : void 0
         ) : void 0,
         children: [
-          /* @__PURE__ */ s("span", { className: _["day-checkbox"] }),
-          /* @__PURE__ */ s("span", { className: _["day-number"], children: String(r).padStart(2, "0") }),
-          o === "view" && /* @__PURE__ */ s("span", { className: _["day-id"], children: i != null && i.id && (i != null && i.active) ? `ID: ${i == null ? void 0 : i.id}` : "" })
+          /* @__PURE__ */ s("span", { className: c["day-checkbox"] }),
+          /* @__PURE__ */ s("span", { className: c["day-number"], children: String(r).padStart(2, "0") }),
+          o === "view" && /* @__PURE__ */ s("span", { className: c["day-id"], children: i != null && i.id && (i != null && i.active) ? `ID: ${i == null ? void 0 : i.id}` : "" })
         ]
       },
       d
@@ -39,5 +39,5 @@ import '../../assets/Calendar.css';const _ = {
   }) });
 };
 export {
-  f as Calendar
+  b as Calendar
 };

package/dist/components/Description/Description.js

@@ -1,60 +1,60 @@
-import { jsxs as u, jsx as t } from "react/jsx-runtime";
-import { c as g } from "../../clsx-DB4S2d7J.js";
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { c as u } from "../../clsx-DB4S2d7J.js";
 import { Skeleton as y } from "../Skeleton/Skeleton.js";
 import { Typography as _ } from "../Typography/Typography.js";
-import '../../assets/Description.css';const l = "_container_he0z3_78", a = {
-  "u-typography-h1": "_u-typography-h1_he0z3_1",
-  "u-typography-h2": "_u-typography-h2_he0z3_8",
-  "u-typography-h3": "_u-typography-h3_he0z3_15",
-  "u-typography-h4": "_u-typography-h4_he0z3_22",
-  "u-typography-h5": "_u-typography-h5_he0z3_29",
-  "u-typography-h6": "_u-typography-h6_he0z3_36",
-  "u-typography-base": "_u-typography-base_he0z3_43",
-  "u-typography-base--xxl": "_u-typography-base--xxl_he0z3_49",
-  "u-typography-base--xl": "_u-typography-base--xl_he0z3_53",
-  "u-typography-base--lg": "_u-typography-base--lg_he0z3_57",
-  "u-typography-base--sm": "_u-typography-base--sm_he0z3_61",
-  "u-typography-base--bold": "_u-typography-base--bold_he0z3_65",
-  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_he0z3_68",
-  "u-typography-base--underlined": "_u-typography-base--underlined_he0z3_71",
-  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_he0z3_74",
-  container: l,
-  "container--text": "_container--text_he0z3_82",
-  "container--inline": "_container--inline_he0z3_85"
+import '../../assets/Description.css';const g = "_container_1hzzl_78", e = {
+  "u-typography-h1": "_u-typography-h1_1hzzl_1",
+  "u-typography-h2": "_u-typography-h2_1hzzl_8",
+  "u-typography-h3": "_u-typography-h3_1hzzl_15",
+  "u-typography-h4": "_u-typography-h4_1hzzl_22",
+  "u-typography-h5": "_u-typography-h5_1hzzl_29",
+  "u-typography-h6": "_u-typography-h6_1hzzl_36",
+  "u-typography-base": "_u-typography-base_1hzzl_43",
+  "u-typography-base--xxl": "_u-typography-base--xxl_1hzzl_49",
+  "u-typography-base--xl": "_u-typography-base--xl_1hzzl_53",
+  "u-typography-base--lg": "_u-typography-base--lg_1hzzl_57",
+  "u-typography-base--sm": "_u-typography-base--sm_1hzzl_61",
+  "u-typography-base--bold": "_u-typography-base--bold_1hzzl_65",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1hzzl_68",
+  "u-typography-base--underlined": "_u-typography-base--underlined_1hzzl_71",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1hzzl_74",
+  container: g,
+  "container--text": "_container--text_1hzzl_82",
+  "container--inline": "_container--inline_1hzzl_85"
 }, m = ({
-  label: s,
-  value: n,
+  label: l,
+  value: s,
   isLoading: r,
   color: h = "var(--gray-95)",
-  "data-testid": e = "Description",
+  "data-testid": t = "Description",
   inline: p,
-  labelVariant: i = "base",
+  labelVariant: n = "base",
   valueVariant: o
-}) => /* @__PURE__ */ u(
+}) => /* @__PURE__ */ i(
   "div",
   {
-    className: g([a.container, { [a["container--inline"]]: p }]),
-    "data-testid": `${e}-container`,
+    className: u([e.container, { [e["container--inline"]]: p }]),
+    "data-testid": `${t}-container`,
     children: [
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ a(
         _,
         {
           color: h,
-          className: a["container--text"],
-          variant: i,
-          "data-testid": `${e}-label`,
-          children: r ? /* @__PURE__ */ t(y, { style: { width: 70, marginBottom: 2 }, "data-testid": `${e}-skeletonLabel` }) : s
+          className: e["container--text"],
+          variant: n,
+          "data-testid": `${t}-label`,
+          children: r ? /* @__PURE__ */ a(y, { style: { width: 70, marginBottom: 2 }, "data-testid": `${t}-skeletonLabel` }) : l
         }
       ),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ a(
         _,
         {
-          className: a["container--text"],
+          className: e["container--text"],
           bold: !0,
           color: h,
           variant: o || (p ? "base" : "base-lg"),
-          "data-testid": `${e}-value`,
-          children: r ? /* @__PURE__ */ t(y, { style: { width: 100 }, "data-testid": `${e}-skeletonValue` }) : n || "-"
+          "data-testid": `${t}-value`,
+          children: r ? /* @__PURE__ */ a(y, { style: { width: 100 }, "data-testid": `${t}-skeletonValue` }) : s || "-"
         }
       )
     ]

package/dist/components/Dialog/Actions.js

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

package/dist/components/Dialog/Backdrop.js

@@ -1,7 +1,7 @@
 import { jsx as a } from "react/jsx-runtime";
 import { forwardRef as s } from "react";
 import { c as t } from "../../clsx-DB4S2d7J.js";
-import { s as m } from "../../Dialog.module-BFRHcF1J.js";
+import { s as m } from "../../Dialog.module-BlXtafuW.js";
 const l = s(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   ({ ownerState: e, ...r }, o) => /* @__PURE__ */ a("div", { ...r, className: t(m.dialog__backdrop, r.className), ref: o })

package/dist/components/Dialog/CloseIconButton.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { Icon as i } from "../Icon/Icon.js";
-import { s as r } from "../../Dialog.module-BFRHcF1J.js";
+import { s as r } from "../../Dialog.module-BlXtafuW.js";
 import { B as s } from "../../Button-BAljjMv3.js";
 const n = ({ handleOnClose: t }) => /* @__PURE__ */ o(
   s,

package/dist/components/Dialog/Dialog.js

@@ -4,7 +4,7 @@ import ie from "./Actions.js";
 import ae from "./Backdrop.js";
 import le from "./CloseIconButton.js";
 import ce from "./Content.js";
-import { s as z } from "../../Dialog.module-BFRHcF1J.js";
+import { s as z } from "../../Dialog.module-BlXtafuW.js";
 import ee from "./DialogTitle.js";
 import { u as te, P as i, f as de, b as C, g as ue, a as fe, _ as pe, c as G, d as be, e as he } from "../../useSlotProps-C_I1kEHr.js";
 import * as f from "react";

package/dist/components/Dialog/DialogTitle.js

@@ -1,7 +1,7 @@
 import { jsxs as l, Fragment as s, jsx as e } from "react/jsx-runtime";
 import { Icon as d } from "../Icon/Icon.js";
 import { Typography as i } from "../Typography/Typography.js";
-import { s as r } from "../../Dialog.module-BFRHcF1J.js";
+import { s as r } from "../../Dialog.module-BlXtafuW.js";
 const g = ({ title: o, subTitle: t, icon: a }) => /* @__PURE__ */ l(s, { children: [
   /* @__PURE__ */ l(
     i,

package/dist/components/PageHeader/PageHeader.js

@@ -1,103 +1,124 @@
-import { jsxs as _, jsx as a, Fragment as l } from "react/jsx-runtime";
+import { jsx as e, jsxs as _, Fragment as h } from "react/jsx-runtime";
 import { useMemo as I } from "react";
-import { c as b } from "../../clsx-DB4S2d7J.js";
-import { Icon as T } from "../Icon/Icon.js";
+import { c as g } from "../../clsx-DB4S2d7J.js";
+import { Icon as P } from "../Icon/Icon.js";
 import { IconButton as $ } from "../IconButton/IconButton.js";
-import '../../assets/PageHeader.css';const q = "_title_7yb9o_22", F = "_subtitle_7yb9o_43", e = {
-  "u-typography-h1": "_u-typography-h1_7yb9o_1",
-  "u-typography-h2": "_u-typography-h2_7yb9o_8",
-  "u-typography-h3": "_u-typography-h3_7yb9o_15",
-  "u-typography-h4": "_u-typography-h4_7yb9o_22",
-  "page-header__main-left-content": "_page-header__main-left-content_7yb9o_22",
-  title: q,
-  "u-typography-h5": "_u-typography-h5_7yb9o_29",
-  "u-typography-h6": "_u-typography-h6_7yb9o_36",
-  "u-typography-base": "_u-typography-base_7yb9o_43",
-  subtitle: F,
-  "u-typography-base--xxl": "_u-typography-base--xxl_7yb9o_49",
-  "u-typography-base--xl": "_u-typography-base--xl_7yb9o_53",
-  "u-typography-base--lg": "_u-typography-base--lg_7yb9o_57",
-  "u-typography-base--sm": "_u-typography-base--sm_7yb9o_61",
-  "u-typography-base--bold": "_u-typography-base--bold_7yb9o_65",
-  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_7yb9o_68",
-  "u-typography-base--underlined": "_u-typography-base--underlined_7yb9o_71",
-  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_7yb9o_74",
-  "page-header": "_page-header_7yb9o_22",
-  "page-header__top-content": "_page-header__top-content_7yb9o_87",
-  "page-header__main-content": "_page-header__main-content_7yb9o_90",
-  "page-header__bottom-content": "_page-header__bottom-content_7yb9o_90",
-  "page-header__breadcrumb": "_page-header__breadcrumb_7yb9o_107",
-  "page-header__breadcrumb__separator": "_page-header__breadcrumb__separator_7yb9o_118",
-  "header-bubble": "_header-bubble_7yb9o_141",
-  "header-bubble--container": "_header-bubble--container_7yb9o_144",
-  "header-bubble--container--full": "_header-bubble--container--full_7yb9o_152",
-  "page-header__main-right-content": "_page-header__main-right-content_7yb9o_155",
-  "header-bubble-margin": "_header-bubble-margin_7yb9o_163"
+import { Text as y } from "../Typography/Typography.js";
+import '../../assets/PageHeader.css';const a = {
+  "u-typography-h1": "_u-typography-h1_bamb5_1",
+  "u-typography-h2": "_u-typography-h2_bamb5_8",
+  "u-typography-h3": "_u-typography-h3_bamb5_15",
+  "u-typography-h4": "_u-typography-h4_bamb5_22",
+  "u-typography-h5": "_u-typography-h5_bamb5_29",
+  "u-typography-h6": "_u-typography-h6_bamb5_36",
+  "u-typography-base": "_u-typography-base_bamb5_43",
+  "u-typography-base--xxl": "_u-typography-base--xxl_bamb5_49",
+  "u-typography-base--xl": "_u-typography-base--xl_bamb5_53",
+  "u-typography-base--lg": "_u-typography-base--lg_bamb5_57",
+  "u-typography-base--sm": "_u-typography-base--sm_bamb5_61",
+  "u-typography-base--bold": "_u-typography-base--bold_bamb5_65",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_bamb5_68",
+  "u-typography-base--underlined": "_u-typography-base--underlined_bamb5_71",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_bamb5_74",
+  "page-header": "_page-header_bamb5_78",
+  "page-header__main-content": "_page-header__main-content_bamb5_82",
+  "page-header__bottom-content": "_page-header__bottom-content_bamb5_89",
+  "page-header__breadcrumb": "_page-header__breadcrumb_bamb5_94",
+  "page-header__breadcrumb__separator": "_page-header__breadcrumb__separator_bamb5_122",
+  "page-header__right-children-wrapper": "_page-header__right-children-wrapper_bamb5_128",
+  "header-bubble": "_header-bubble_bamb5_134",
+  "header-bubble--container": "_header-bubble--container_bamb5_137",
+  "header-bubble--container--full": "_header-bubble--container--full_bamb5_145",
+  "header-bubble-margin": "_header-bubble-margin_bamb5_149"
 }, E = ({
   title: n,
-  subtitle: c,
-  rightChildren: y,
-  bottomChildren: h,
-  classNameWrapper: m,
-  classNameTitle: k,
-  classNameSubtitle: N,
-  headerBubble: r,
-  fullWidthHeaderBubble: f,
+  subtitle: i,
+  rightChildren: p,
+  bottomChildren: l,
+  classNameWrapper: k,
+  classNameTitle: N,
+  classNameSubtitle: f,
+  headerBubble: b,
+  fullWidthHeaderBubble: x,
   "data-testid-wrapper": v,
-  "data-testid-title": x,
-  "data-testid-subtitle": C,
-  "data-testid-header-bubble": L,
-  ...w
+  "data-testid-title": w,
+  "data-testid-subtitle": L,
+  "data-testid-header-bubble": C,
+  ...T
 }) => {
   const {
-    breadcrumb: s,
-    backLinkText: d,
-    onBackLinkClick: p,
+    breadcrumb: r,
+    backLinkText: s,
+    onBackLinkClick: d,
     classNameBackLink: u,
-    "data-testid-backLink": g,
-    ...j
-  } = w;
-  r && (n || c || h) && 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 B = b([e["page-header"], m]), H = I(() => {
+    "data-testid-backLink": m,
+    ...B
+  } = T;
+  b && (n || i || l) && console.error("headerBubble prop can not be used with title, subtitle or bottomChildren"), !b && !n && console.error("title prop is required when not using headerBubble"), (s || d) && console.error("backLinkText and onBackLinkClick props are deprecated. Please use breadcrumb instead");
+  const j = g([a["page-header"], k]), H = I(() => {
     const o = [];
-    return d && p && o.push({
-      label: d,
+    return s && d && o.push({
+      label: s,
       className: u,
-      "data-testid": g,
-      onClick: p
-    }), s && o.push(...s), /* @__PURE__ */ _("div", { className: e["page-header__top-content"], children: [
-      /* @__PURE__ */ a("div", { className: e["page-header__breadcrumb"], children: o.map((t, i) => /* @__PURE__ */ a(
-        $,
-        {
-          icon: i === 0 ? /* @__PURE__ */ a(T, { icon: "house-blank" }) : /* @__PURE__ */ a("span", { className: e["page-header__breadcrumb__separator"], children: "/" }),
-          onClick: () => t.onClick && t.onClick(),
-          className: t.className,
-          "data-testid": t["data-testid"],
-          disabled: o.length === 1 ? !1 : i === o.length - 1,
-          children: t.label
-        },
-        `${t.label}_${i}`
-      )) }),
-      y && /* @__PURE__ */ a("div", { className: e["page-header__main-right-content"], children: y })
-    ] });
-  }, [s, d, u, g, p]);
-  return /* @__PURE__ */ _(l, { children: [
-    /* @__PURE__ */ _("div", { className: B, "data-testid": v, ...j, children: [
-      H,
-      /* @__PURE__ */ a("div", { className: e["page-header__main-content"], children: /* @__PURE__ */ a("div", { className: e["page-header__main-left-content"], children: r ? /* @__PURE__ */ a(l, { children: /* @__PURE__ */ a("div", { className: e["header-bubble"], children: /* @__PURE__ */ a(
-        "div",
-        {
-          className: f ? b(e["header-bubble--container"], e["header-bubble--container--full"]) : e["header-bubble--container"],
-          "data-testid": L,
-          children: r
-        }
-      ) }) }) : /* @__PURE__ */ _(l, { children: [
-        /* @__PURE__ */ a("h1", { className: b(e.title, k), "data-testid": x, children: n }),
-        /* @__PURE__ */ a("h2", { className: b(e.subtitle, N), "data-testid": C, children: c })
-      ] }) }) }),
-      h && /* @__PURE__ */ a("div", { className: e["page-header__bottom-content"], children: h })
+      "data-testid": m,
+      onClick: d
+    }), r && o.push(...r), /* @__PURE__ */ e("div", { className: a["page-header__breadcrumb"], children: o.map((t, c) => /* @__PURE__ */ e(
+      $,
+      {
+        icon: c === 0 ? /* @__PURE__ */ e(P, { icon: "house-blank" }) : /* @__PURE__ */ e("span", { className: a["page-header__breadcrumb__separator"], children: "/" }),
+        onClick: () => t.onClick && t.onClick(),
+        className: t.className,
+        "data-testid": t["data-testid"],
+        disabled: o.length === 1 ? !1 : c === o.length - 1,
+        children: t.label
+      },
+      `${t.label}_${c}`
+    )) });
+  }, [r, s, u, m, d]);
+  return /* @__PURE__ */ _(h, { children: [
+    /* @__PURE__ */ _("div", { className: j, "data-testid": v, ...B, children: [
+      /* @__PURE__ */ _("div", { className: a["page-header__main-content"], children: [
+        /* @__PURE__ */ _("div", { className: a["page-header__right-children-wrapper"], children: [
+          r && H,
+          r && p && /* @__PURE__ */ e(h, { children: p })
+        ] }),
+        /* @__PURE__ */ _("div", { className: a["page-header__right-children-wrapper"], children: [
+          /* @__PURE__ */ e(
+            y,
+            {
+              variant: "h4",
+              element: "h1",
+              color: "var(--colors-neutral-text-color-text)",
+              className: N,
+              "data-testid": w,
+              children: n
+            }
+          ),
+          !r && p && /* @__PURE__ */ e(h, { children: p })
+        ] }),
+        /* @__PURE__ */ e(
+          y,
+          {
+            variant: "base",
+            element: "p",
+            color: "var(--colors-neutral-text-color-text)",
+            className: f,
+            "data-testid": L,
+            children: i
+          }
+        ),
+        b && /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e("div", { className: a["header-bubble"], children: /* @__PURE__ */ e(
+          "div",
+          {
+            className: x ? g(a["header-bubble--container"], a["header-bubble--container--full"]) : a["header-bubble--container"],
+            "data-testid": C,
+            children: b
+          }
+        ) }) })
+      ] }),
+      l && /* @__PURE__ */ e("div", { className: a["page-header__bottom-content"], children: l })
     ] }),
-    r && /* @__PURE__ */ a("div", { className: e["header-bubble-margin"] })
+    b && /* @__PURE__ */ e("div", { className: a["header-bubble-margin"] })
   ] });
 };
 export {