@plumile/ui 0.1.69 → 0.1.72

package/lib/esm/atomic/molecules/breadcrumb_navigation/BreadcrumbMenuDropdown.js

@@ -8,7 +8,17 @@ import { Link as p } from "@plumile/router";
 //#region src/atomic/molecules/breadcrumb_navigation/BreadcrumbMenuDropdown.tsx
 var m = ({ node: m, menu: h, ariaLabel: g, searchPlaceholder: _, searchAriaLabel: v, emptyLabel: y, emptyMatchesLabel: b }) => {
 	let x = h?.items ?? [];
-	return /* @__PURE__ */ d("div", {
+	return h == null ? /* @__PURE__ */ d("div", {
+		className: o,
+		children: /* @__PURE__ */ d("div", {
+			className: a,
+			children: /* @__PURE__ */ d(p, {
+				to: m.to,
+				className: i,
+				children: m.name
+			})
+		})
+	}) : /* @__PURE__ */ d("div", {
 		className: o,
 		children: /* @__PURE__ */ f("div", {
 			className: a,
@@ -32,7 +42,7 @@ var m = ({ node: m, menu: h, ariaLabel: g, searchPlaceholder: _, searchAriaLabel
 				contentClassName: s,
 				children: /* @__PURE__ */ d(u, {
 					items: x,
-					selectedId: h?.selectedId,
+					selectedId: h.selectedId,
 					searchPlaceholder: _,
 					searchAriaLabel: v,
 					emptyLabel: y,

package/lib/esm/atomic/molecules/breadcrumb_navigation/BreadcrumbMenuDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbMenuDropdown.js","names":[],"sources":["../../../../../src/atomic/molecules/breadcrumb_navigation/BreadcrumbMenuDropdown.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport { Link } from '@plumile/router';\nimport { ChevronDownSvg } from '../../../icons/ChevronDownSvg.js';\nimport { Dropdown } from '../dropdown/Dropdown.js';\nimport { cx } from '../../../theme/tools.js';\n\nimport * as styles from './breadcrumbNavigation.css.js';\nimport { BreadcrumbMenuPopover } from './BreadcrumbMenuPopover.js';\nimport type { BreadcrumbMenuConfig, BreadcrumbNode } from './types.js';\n\ntype Props = {\n  node: BreadcrumbNode;\n  menu?: BreadcrumbMenuConfig;\n  ariaLabel: string;\n  searchPlaceholder: string;\n  searchAriaLabel: string;\n  emptyLabel: string;\n  emptyMatchesLabel: string;\n};\n\nexport const BreadcrumbMenuDropdown = ({\n  node,\n  menu,\n  ariaLabel,\n  searchPlaceholder,\n  searchAriaLabel,\n  emptyLabel,\n  emptyMatchesLabel,\n}: Props): JSX.Element => {\n  const menuItems = menu?.items ?? [];\n\n  return (\n    <div className={styles.breadcrumbSection}>\n      {/* <span className={styles.breadcrumbLabel}>{sectionLabel}</span> */}\n      <div className={styles.breadcrumbNameRow}>\n        <Link to={node.to} className={styles.breadcrumbLink}>\n          {node.name}\n        </Link>\n        <Dropdown\n          trigger={(isOpen) => {\n            return (\n              <button type=\"button\" className={styles.breadcrumbChevronButton}>\n                <ChevronDownSvg\n                  width={14}\n                  height={14}\n                  className={cx(styles.breadcrumbChevron, {\n                    [styles.breadcrumbChevronOpen]: isOpen,\n                  })}\n                />\n              </button>\n            );\n          }}\n          ariaLabel={ariaLabel}\n          placement=\"bottom-start\"\n          matchTriggerWidth={false}\n          contentClassName={styles.popoverPanel}\n        >\n          <BreadcrumbMenuPopover\n            items={menuItems}\n            selectedId={menu?.selectedId}\n            searchPlaceholder={searchPlaceholder}\n            searchAriaLabel={searchAriaLabel}\n            emptyLabel={emptyLabel}\n            emptyMatchesLabel={emptyMatchesLabel}\n          />\n        </Dropdown>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAoBA,IAAa,KAA0B,EACrC,SACA,SACA,cACA,sBACA,oBACA,eACA,2BACwB;CACxB,IAAM,IAAY,GAAM,SAAS,EAAE;AAEnC,QACE,kBAAC,OAAD;EAAK,WAAW;YAEd,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,GAAD;IAAM,IAAI,EAAK;IAAI,WAAW;cAC3B,EAAK;IACD,CAAA,EACP,kBAAC,GAAD;IACE,UAAU,MAEN,kBAAC,UAAD;KAAQ,MAAK;KAAS,WAAW;eAC/B,kBAAC,GAAD;MACE,OAAO;MACP,QAAQ;MACR,WAAW,EAAG,GAA0B,GACrC,IAA+B,GACjC,CAAC;MACF,CAAA;KACK,CAAA;IAGF;IACX,WAAU;IACV,mBAAmB;IACnB,kBAAkB;cAElB,kBAAC,GAAD;KACE,OAAO;KACP,YAAY,GAAM;KACC;KACF;KACL;KACO;KACnB,CAAA;IACO,CAAA,CACP;;EACF,CAAA"}
+{"version":3,"file":"BreadcrumbMenuDropdown.js","names":[],"sources":["../../../../../src/atomic/molecules/breadcrumb_navigation/BreadcrumbMenuDropdown.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport { Link } from '@plumile/router';\nimport { ChevronDownSvg } from '../../../icons/ChevronDownSvg.js';\nimport { Dropdown } from '../dropdown/Dropdown.js';\nimport { cx } from '../../../theme/tools.js';\n\nimport * as styles from './breadcrumbNavigation.css.js';\nimport { BreadcrumbMenuPopover } from './BreadcrumbMenuPopover.js';\nimport type { BreadcrumbMenuConfig, BreadcrumbNode } from './types.js';\n\ntype Props = {\n  node: BreadcrumbNode;\n  menu?: BreadcrumbMenuConfig;\n  ariaLabel: string;\n  searchPlaceholder: string;\n  searchAriaLabel: string;\n  emptyLabel: string;\n  emptyMatchesLabel: string;\n};\n\nexport const BreadcrumbMenuDropdown = ({\n  node,\n  menu,\n  ariaLabel,\n  searchPlaceholder,\n  searchAriaLabel,\n  emptyLabel,\n  emptyMatchesLabel,\n}: Props): JSX.Element => {\n  const menuItems = menu?.items ?? [];\n\n  if (menu == null) {\n    return (\n      <div className={styles.breadcrumbSection}>\n        <div className={styles.breadcrumbNameRow}>\n          <Link to={node.to} className={styles.breadcrumbLink}>\n            {node.name}\n          </Link>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={styles.breadcrumbSection}>\n      {/* <span className={styles.breadcrumbLabel}>{sectionLabel}</span> */}\n      <div className={styles.breadcrumbNameRow}>\n        <Link to={node.to} className={styles.breadcrumbLink}>\n          {node.name}\n        </Link>\n        <Dropdown\n          trigger={(isOpen) => {\n            return (\n              <button type=\"button\" className={styles.breadcrumbChevronButton}>\n                <ChevronDownSvg\n                  width={14}\n                  height={14}\n                  className={cx(styles.breadcrumbChevron, {\n                    [styles.breadcrumbChevronOpen]: isOpen,\n                  })}\n                />\n              </button>\n            );\n          }}\n          ariaLabel={ariaLabel}\n          placement=\"bottom-start\"\n          matchTriggerWidth={false}\n          contentClassName={styles.popoverPanel}\n        >\n          <BreadcrumbMenuPopover\n            items={menuItems}\n            selectedId={menu.selectedId}\n            searchPlaceholder={searchPlaceholder}\n            searchAriaLabel={searchAriaLabel}\n            emptyLabel={emptyLabel}\n            emptyMatchesLabel={emptyMatchesLabel}\n          />\n        </Dropdown>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAoBA,IAAa,KAA0B,EACrC,SACA,SACA,cACA,sBACA,oBACA,eACA,2BACwB;CACxB,IAAM,IAAY,GAAM,SAAS,EAAE;AAcnC,QAZI,KAAQ,OAER,kBAAC,OAAD;EAAK,WAAW;YACd,kBAAC,OAAD;GAAK,WAAW;aACd,kBAAC,GAAD;IAAM,IAAI,EAAK;IAAI,WAAW;cAC3B,EAAK;IACD,CAAA;GACH,CAAA;EACF,CAAA,GAKR,kBAAC,OAAD;EAAK,WAAW;YAEd,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,GAAD;IAAM,IAAI,EAAK;IAAI,WAAW;cAC3B,EAAK;IACD,CAAA,EACP,kBAAC,GAAD;IACE,UAAU,MAEN,kBAAC,UAAD;KAAQ,MAAK;KAAS,WAAW;eAC/B,kBAAC,GAAD;MACE,OAAO;MACP,QAAQ;MACR,WAAW,EAAG,GAA0B,GACrC,IAA+B,GACjC,CAAC;MACF,CAAA;KACK,CAAA;IAGF;IACX,WAAU;IACV,mBAAmB;IACnB,kBAAkB;cAElB,kBAAC,GAAD;KACE,OAAO;KACP,YAAY,EAAK;KACE;KACF;KACL;KACO;KACnB,CAAA;IACO,CAAA,CACP;;EACF,CAAA"}

package/lib/esm/atomic/molecules/breadcrumb_navigation/BreadcrumbNavigation.js

@@ -1,63 +1,52 @@
 import { cx as e } from "../../../theme/tools.js";
-import { useUiTranslation as t } from "../../../i18n/useUiTranslation.js";
-import { SidebarHomeSvg as n } from "../../../icons/SidebarHomeSvg.js";
-import { breadcrumb as r, breadcrumbItem as i, breadcrumbList as a, breadcrumbSeparator as o, homeIcon as s, homeLink as c } from "./breadcrumbNavigation.css.js";
-import { BreadcrumbMenuDropdown as l } from "./BreadcrumbMenuDropdown.js";
-import { jsx as u } from "react/jsx-runtime";
-import { Link as d } from "@plumile/router";
+import { SidebarHomeSvg as t } from "../../../icons/SidebarHomeSvg.js";
+import { breadcrumb as n, breadcrumbItem as r, breadcrumbList as i, breadcrumbSeparator as a, homeIcon as o, homeLink as s } from "./breadcrumbNavigation.css.js";
+import { BreadcrumbMenuDropdown as c } from "./BreadcrumbMenuDropdown.js";
+import { jsx as l } from "react/jsx-runtime";
+import { Link as u } from "@plumile/router";
 //#region src/atomic/molecules/breadcrumb_navigation/BreadcrumbNavigation.tsx
-var f = (f) => {
-	let { organization: p, group: m, project: h, groupMenu: g, projectMenu: _, className: v } = f, { t: y } = t(), b = y("navigation.breadcrumb.empty.matches"), x = y("navigation.breadcrumb.search.groups"), S = y("navigation.breadcrumb.empty.groups"), C = y("navigation.breadcrumb.menu.group"), w = y("navigation.breadcrumb.search.projects"), T = y("navigation.breadcrumb.empty.projects"), E = y("navigation.breadcrumb.menu.project"), D = [];
-	D.push(/* @__PURE__ */ u("li", {
-		className: i,
-		children: /* @__PURE__ */ u(d, {
-			to: p.to,
-			className: c,
-			"aria-label": `Organization: ${p.name}`,
-			children: /* @__PURE__ */ u(n, {
+var d = (d) => {
+	let { root: f, rootAriaLabel: p, items: m = [], className: h } = d, g = [];
+	g.push(/* @__PURE__ */ l("li", {
+		className: r,
+		children: /* @__PURE__ */ l(u, {
+			to: f.to,
+			className: s,
+			"aria-label": p,
+			children: /* @__PURE__ */ l(t, {
 				width: 16,
 				height: 16,
-				className: s
+				className: o
 			})
 		})
-	}, "home")), m != null && D.push(/* @__PURE__ */ u("li", {
-		className: i,
-		children: /* @__PURE__ */ u(l, {
-			node: m,
-			menu: g,
-			ariaLabel: C,
-			searchPlaceholder: x,
-			searchAriaLabel: x,
-			emptyLabel: S,
-			emptyMatchesLabel: b
+	}, "home"));
+	for (let e of m) g.push(/* @__PURE__ */ l("li", {
+		className: r,
+		children: /* @__PURE__ */ l(c, {
+			node: e.node,
+			menu: e.menu,
+			ariaLabel: e.labels?.ariaLabel ?? e.node.name,
+			searchPlaceholder: e.labels?.searchPlaceholder ?? "",
+			searchAriaLabel: e.labels?.searchAriaLabel ?? "",
+			emptyLabel: e.labels?.emptyLabel ?? "",
+			emptyMatchesLabel: e.labels?.emptyMatchesLabel ?? ""
 		})
-	}, "group")), h != null && D.push(/* @__PURE__ */ u("li", {
-		className: i,
-		children: /* @__PURE__ */ u(l, {
-			node: h,
-			menu: _,
-			ariaLabel: E,
-			searchPlaceholder: w,
-			searchAriaLabel: w,
-			emptyLabel: T,
-			emptyMatchesLabel: b
-		})
-	}, "project"));
-	let O = D.flatMap((e, t) => t === 0 ? [e] : [/* @__PURE__ */ u("li", {
-		className: o,
+	}, e.id));
+	let _ = g.flatMap((e, t) => t === 0 ? [e] : [/* @__PURE__ */ l("li", {
+		className: a,
 		"aria-hidden": "true",
 		children: "/"
 	}, `separator-${t}`), e]);
-	return /* @__PURE__ */ u("nav", {
-		className: e(r, v),
+	return /* @__PURE__ */ l("nav", {
+		className: e(n, h),
 		"aria-label": "Breadcrumb",
-		children: /* @__PURE__ */ u("ol", {
-			className: a,
-			children: O
+		children: /* @__PURE__ */ l("ol", {
+			className: i,
+			children: _
 		})
 	});
 };
 //#endregion
-export { f as BreadcrumbNavigation };
+export { d as BreadcrumbNavigation };
 
 //# sourceMappingURL=BreadcrumbNavigation.js.map

package/lib/esm/atomic/molecules/breadcrumb_navigation/BreadcrumbNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbNavigation.js","names":[],"sources":["../../../../../src/atomic/molecules/breadcrumb_navigation/BreadcrumbNavigation.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport { useUiTranslation } from '../../../i18n/useUiTranslation.js';\nimport { Link } from '@plumile/router';\nimport { SidebarHomeSvg } from '../../../icons/SidebarHomeSvg.js';\n\nimport * as styles from './breadcrumbNavigation.css.js';\nimport { cx } from '../../../theme/tools.js';\nimport { BreadcrumbMenuDropdown } from './BreadcrumbMenuDropdown.js';\nimport type { BreadcrumbMenuConfig, BreadcrumbNode } from './types.js';\n\ntype Props = {\n  organization: BreadcrumbNode;\n  group?: BreadcrumbNode | null;\n  project?: BreadcrumbNode | null;\n  groupMenu?: BreadcrumbMenuConfig;\n  projectMenu?: BreadcrumbMenuConfig;\n  className?: string;\n};\n\nexport const BreadcrumbNavigation = (props: Props): JSX.Element => {\n  const { organization, group, project, groupMenu, projectMenu, className } =\n    props;\n  const { t } = useUiTranslation();\n  const emptyMatchesLabel = t('navigation.breadcrumb.empty.matches');\n\n  const groupSearchLabel = t('navigation.breadcrumb.search.groups');\n  const groupEmptyLabel = t('navigation.breadcrumb.empty.groups');\n  const groupMenuAriaLabel = t('navigation.breadcrumb.menu.group');\n\n  const projectSearchLabel = t('navigation.breadcrumb.search.projects');\n  const projectEmptyLabel = t('navigation.breadcrumb.empty.projects');\n  const projectMenuAriaLabel = t('navigation.breadcrumb.menu.project');\n  const breadcrumbItems: JSX.Element[] = [];\n\n  breadcrumbItems.push(\n    <li key=\"home\" className={styles.breadcrumbItem}>\n      <Link\n        to={organization.to}\n        className={styles.homeLink}\n        aria-label={`Organization: ${organization.name}`}\n      >\n        <SidebarHomeSvg width={16} height={16} className={styles.homeIcon} />\n      </Link>\n    </li>,\n  );\n\n  if (group != null) {\n    breadcrumbItems.push(\n      <li key=\"group\" className={styles.breadcrumbItem}>\n        <BreadcrumbMenuDropdown\n          node={group}\n          menu={groupMenu}\n          ariaLabel={groupMenuAriaLabel}\n          searchPlaceholder={groupSearchLabel}\n          searchAriaLabel={groupSearchLabel}\n          emptyLabel={groupEmptyLabel}\n          emptyMatchesLabel={emptyMatchesLabel}\n        />\n      </li>,\n    );\n  }\n\n  if (project != null) {\n    breadcrumbItems.push(\n      <li key=\"project\" className={styles.breadcrumbItem}>\n        <BreadcrumbMenuDropdown\n          node={project}\n          menu={projectMenu}\n          ariaLabel={projectMenuAriaLabel}\n          searchPlaceholder={projectSearchLabel}\n          searchAriaLabel={projectSearchLabel}\n          emptyLabel={projectEmptyLabel}\n          emptyMatchesLabel={emptyMatchesLabel}\n        />\n      </li>,\n    );\n  }\n\n  const breadcrumbsWithSeparators = breadcrumbItems.flatMap((item, index) => {\n    if (index === 0) {\n      return [item];\n    }\n    return [\n      <li\n        key={`separator-${index}`}\n        className={styles.breadcrumbSeparator}\n        aria-hidden=\"true\"\n      >\n        /{/* <ChevronRightSvg width={16} height={16} /> */}\n      </li>,\n      item,\n    ];\n  });\n\n  return (\n    <nav className={cx(styles.breadcrumb, className)} aria-label=\"Breadcrumb\">\n      <ol className={styles.breadcrumbList}>{breadcrumbsWithSeparators}</ol>\n    </nav>\n  );\n};\n\nexport type {\n  BreadcrumbNode,\n  BreadcrumbMenuItem,\n  BreadcrumbMenuConfig,\n} from './types.js';\n"],"mappings":";;;;;;;;AAmBA,IAAa,KAAwB,MAA8B;CACjE,IAAM,EAAE,iBAAc,UAAO,YAAS,cAAW,gBAAa,iBAC5D,GACI,EAAE,SAAM,GAAkB,EAC1B,IAAoB,EAAE,sCAAsC,EAE5D,IAAmB,EAAE,sCAAsC,EAC3D,IAAkB,EAAE,qCAAqC,EACzD,IAAqB,EAAE,mCAAmC,EAE1D,IAAqB,EAAE,wCAAwC,EAC/D,IAAoB,EAAE,uCAAuC,EAC7D,IAAuB,EAAE,qCAAqC,EAC9D,IAAiC,EAAE;AA8BzC,CA5BA,EAAgB,KACd,kBAAC,MAAD;EAAe,WAAW;YACxB,kBAAC,GAAD;GACE,IAAI,EAAa;GACjB,WAAW;GACX,cAAY,iBAAiB,EAAa;aAE1C,kBAAC,GAAD;IAAgB,OAAO;IAAI,QAAQ;IAAI,WAAW;IAAmB,CAAA;GAChE,CAAA;EACJ,EARG,OAQH,CACN,EAEG,KAAS,QACX,EAAgB,KACd,kBAAC,MAAD;EAAgB,WAAW;YACzB,kBAAC,GAAD;GACE,MAAM;GACN,MAAM;GACN,WAAW;GACX,mBAAmB;GACnB,iBAAiB;GACjB,YAAY;GACO;GACnB,CAAA;EACC,EAVG,QAUH,CACN,EAGC,KAAW,QACb,EAAgB,KACd,kBAAC,MAAD;EAAkB,WAAW;YAC3B,kBAAC,GAAD;GACE,MAAM;GACN,MAAM;GACN,WAAW;GACX,mBAAmB;GACnB,iBAAiB;GACjB,YAAY;GACO;GACnB,CAAA;EACC,EAVG,UAUH,CACN;CAGH,IAAM,IAA4B,EAAgB,SAAS,GAAM,MAC3D,MAAU,IACL,CAAC,EAAK,GAER,CACL,kBAAC,MAAD;EAEE,WAAW;EACX,eAAY;YACb;EAEI,EALE,aAAa,IAKf,EACL,EACD,CACD;AAEF,QACE,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAmB,EAAU;EAAE,cAAW;YAC3D,kBAAC,MAAD;GAAI,WAAW;aAAwB;GAA+B,CAAA;EAClE,CAAA"}
+{"version":3,"file":"BreadcrumbNavigation.js","names":[],"sources":["../../../../../src/atomic/molecules/breadcrumb_navigation/BreadcrumbNavigation.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport { Link } from '@plumile/router';\nimport { SidebarHomeSvg } from '../../../icons/SidebarHomeSvg.js';\n\nimport * as styles from './breadcrumbNavigation.css.js';\nimport { cx } from '../../../theme/tools.js';\nimport { BreadcrumbMenuDropdown } from './BreadcrumbMenuDropdown.js';\nimport type { BreadcrumbNavigationItem, BreadcrumbNode } from './types.js';\n\ntype Props = {\n  root: BreadcrumbNode;\n  rootAriaLabel: string;\n  items?: readonly BreadcrumbNavigationItem[];\n  className?: string;\n};\n\nexport const BreadcrumbNavigation = (props: Props): JSX.Element => {\n  const { root, rootAriaLabel, items = [], className } = props;\n  const breadcrumbItems: JSX.Element[] = [];\n\n  breadcrumbItems.push(\n    <li key=\"home\" className={styles.breadcrumbItem}>\n      <Link to={root.to} className={styles.homeLink} aria-label={rootAriaLabel}>\n        <SidebarHomeSvg width={16} height={16} className={styles.homeIcon} />\n      </Link>\n    </li>,\n  );\n\n  for (const item of items) {\n    breadcrumbItems.push(\n      <li key={item.id} className={styles.breadcrumbItem}>\n        <BreadcrumbMenuDropdown\n          node={item.node}\n          menu={item.menu}\n          ariaLabel={item.labels?.ariaLabel ?? item.node.name}\n          searchPlaceholder={item.labels?.searchPlaceholder ?? ''}\n          searchAriaLabel={item.labels?.searchAriaLabel ?? ''}\n          emptyLabel={item.labels?.emptyLabel ?? ''}\n          emptyMatchesLabel={item.labels?.emptyMatchesLabel ?? ''}\n        />\n      </li>,\n    );\n  }\n\n  const breadcrumbsWithSeparators = breadcrumbItems.flatMap((item, index) => {\n    if (index === 0) {\n      return [item];\n    }\n    return [\n      <li\n        key={`separator-${index}`}\n        className={styles.breadcrumbSeparator}\n        aria-hidden=\"true\"\n      >\n        /{/* <ChevronRightSvg width={16} height={16} /> */}\n      </li>,\n      item,\n    ];\n  });\n\n  return (\n    <nav className={cx(styles.breadcrumb, className)} aria-label=\"Breadcrumb\">\n      <ol className={styles.breadcrumbList}>{breadcrumbsWithSeparators}</ol>\n    </nav>\n  );\n};\n\nexport type {\n  BreadcrumbNavigationItem,\n  BreadcrumbNode,\n  BreadcrumbMenuItem,\n  BreadcrumbMenuConfig,\n  BreadcrumbMenuLabels,\n} from './types.js';\n"],"mappings":";;;;;;;AAgBA,IAAa,KAAwB,MAA8B;CACjE,IAAM,EAAE,SAAM,kBAAe,WAAQ,EAAE,EAAE,iBAAc,GACjD,IAAiC,EAAE;AAEzC,GAAgB,KACd,kBAAC,MAAD;EAAe,WAAW;YACxB,kBAAC,GAAD;GAAM,IAAI,EAAK;GAAI,WAAW;GAAiB,cAAY;aACzD,kBAAC,GAAD;IAAgB,OAAO;IAAI,QAAQ;IAAI,WAAW;IAAmB,CAAA;GAChE,CAAA;EACJ,EAJG,OAIH,CACN;AAED,MAAK,IAAM,KAAQ,EACjB,GAAgB,KACd,kBAAC,MAAD;EAAkB,WAAW;YAC3B,kBAAC,GAAD;GACE,MAAM,EAAK;GACX,MAAM,EAAK;GACX,WAAW,EAAK,QAAQ,aAAa,EAAK,KAAK;GAC/C,mBAAmB,EAAK,QAAQ,qBAAqB;GACrD,iBAAiB,EAAK,QAAQ,mBAAmB;GACjD,YAAY,EAAK,QAAQ,cAAc;GACvC,mBAAmB,EAAK,QAAQ,qBAAqB;GACrD,CAAA;EACC,EAVI,EAAK,GAUT,CACN;CAGH,IAAM,IAA4B,EAAgB,SAAS,GAAM,MAC3D,MAAU,IACL,CAAC,EAAK,GAER,CACL,kBAAC,MAAD;EAEE,WAAW;EACX,eAAY;YACb;EAEI,EALE,aAAa,IAKf,EACL,EACD,CACD;AAEF,QACE,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAmB,EAAU;EAAE,cAAW;YAC3D,kBAAC,MAAD;GAAI,WAAW;aAAwB;GAA+B,CAAA;EAClE,CAAA"}

package/lib/esm/atomic/molecules/markdown/components/MarkdownArticleContainer.css.js

@@ -1,5 +1,4 @@
 /* empty css                                         */
-/* empty css                             */
 /* empty css                                        */
 //#region src/atomic/molecules/markdown/components/MarkdownArticleContainer.css.ts
 var e = "_7ez1431 _7ez1430 txvbqb9io txvbqbai6 txvbqbaoo";

package/lib/esm/atomic/molecules/markdown/components/MarkdownFootnoteReference.css.js

@@ -1,4 +1,5 @@
 /* empty css                                         */
+/* empty css                             */
 /* empty css                                         */
 //#region src/atomic/molecules/markdown/components/MarkdownFootnoteReference.css.ts
 var e = "_1p5id9v1 _1p5id9v0 txvbqb8o txvbqb9jf txvbqbamo txvbqb7s";

package/lib/esm/atomic/templates/detail-page/DetailPage.js

@@ -0,0 +1,49 @@
+import { cx as e } from "../../../theme/tools.js";
+import { BackofficePageHeader as t } from "../../../backoffice/molecules/backoffice_page_header/BackofficePageHeader.js";
+import { actions as n, container as r, content as i, contentSection as a } from "./detailPage.css.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/atomic/templates/detail-page/DetailPage.tsx
+var c = (e, t) => {
+	let r = t ?? [], i = r.length > 0, a = e != null;
+	return !a && !i ? null : /* @__PURE__ */ s("div", {
+		className: n,
+		children: [i && /* @__PURE__ */ o("div", {
+			className: "_8ct8xq3 txvbqb9io txvbqbco txvbqbao6 txvbqbajx",
+			children: r.map((e, t) => /* @__PURE__ */ o("div", {
+				className: "_8ct8xq4 txvbqb9io txvbqbco",
+				children: e
+			}, t))
+		}), a && /* @__PURE__ */ o("div", {
+			className: "_8ct8xq5 txvbqb9io txvbqbco",
+			children: e
+		})]
+	});
+}, l = ({ title: n, subtitle: a, primaryAction: l, secondaryActions: u, headerSupplement: d, children: f, className: p, contentClassName: m }) => /* @__PURE__ */ s("div", {
+	className: e(r, p),
+	children: [
+		/* @__PURE__ */ o(t, {
+			title: n,
+			subtitle: a,
+			actions: c(l, u)
+		}),
+		d != null && /* @__PURE__ */ o("div", {
+			className: "_8ct8xq1 txvbqb9io txvbqbai6 txvbqbaoo",
+			children: d
+		}),
+		/* @__PURE__ */ o("div", {
+			className: e(i, m),
+			children: f
+		})
+	]
+}), u = ({ children: t, className: n, withBaseStyles: r = !0, ...i }) => {
+	let s;
+	return r ? s = e(a, n) : n != null && (s = n), /* @__PURE__ */ o("div", {
+		...i,
+		className: s,
+		children: t
+	});
+};
+//#endregion
+export { l as DetailPage, l as default, u as DetailPageContent };
+
+//# sourceMappingURL=DetailPage.js.map

package/lib/esm/atomic/templates/detail-page/DetailPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailPage.js","names":[],"sources":["../../../../../src/atomic/templates/detail-page/DetailPage.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, type JSX, type ReactNode } from 'react';\n\nimport { BackofficePageHeader } from '../../../backoffice/molecules/backoffice_page_header/BackofficePageHeader.js';\nimport { cx } from '../../../theme/tools.js';\nimport * as styles from './detailPage.css.js';\n\nexport type DetailPageProps = {\n  title: string;\n  subtitle?: ReactNode;\n  primaryAction?: ReactNode;\n  secondaryActions?: readonly ReactNode[];\n  headerSupplement?: ReactNode;\n  children: ReactNode;\n  className?: string;\n  contentClassName?: string;\n};\n\nexport type DetailPageContentProps = ComponentPropsWithoutRef<'div'> & {\n  children: ReactNode;\n  withBaseStyles?: boolean;\n};\n\nconst renderActions = (\n  primaryAction?: ReactNode,\n  secondaryActions?: readonly ReactNode[],\n): ReactNode | null => {\n  const secondaryList = secondaryActions ?? [];\n  const hasSecondary = secondaryList.length > 0;\n  const hasPrimary = primaryAction != null;\n\n  if (!hasPrimary && !hasSecondary) {\n    return null;\n  }\n\n  return (\n    <div className={styles.actions}>\n      {hasSecondary && (\n        <div className={styles.secondaryActions}>\n          {secondaryList.map((action, index) => {\n            return (\n              <div key={index} className={styles.actionItem}>\n                {action}\n              </div>\n            );\n          })}\n        </div>\n      )}\n      {hasPrimary && (\n        <div className={styles.primaryAction}>{primaryAction}</div>\n      )}\n    </div>\n  );\n};\n\nexport const DetailPage = ({\n  title,\n  subtitle,\n  primaryAction,\n  secondaryActions,\n  headerSupplement,\n  children,\n  className,\n  contentClassName,\n}: DetailPageProps): JSX.Element => {\n  return (\n    <div className={cx(styles.container, className)}>\n      <BackofficePageHeader\n        title={title}\n        subtitle={subtitle}\n        actions={renderActions(primaryAction, secondaryActions)}\n      />\n      {headerSupplement != null && (\n        <div className={styles.headerSupplement}>{headerSupplement}</div>\n      )}\n      <div className={cx(styles.content, contentClassName)}>{children}</div>\n    </div>\n  );\n};\n\nexport const DetailPageContent = ({\n  children,\n  className,\n  withBaseStyles = true,\n  ...rest\n}: DetailPageContentProps): JSX.Element => {\n  let contentClassName: string | undefined;\n  if (withBaseStyles) {\n    contentClassName = cx(styles.contentSection, className);\n  } else if (className != null) {\n    contentClassName = className;\n  }\n\n  return (\n    <div {...rest} className={contentClassName}>\n      {children}\n    </div>\n  );\n};\n\nexport default DetailPage;\n"],"mappings":";;;;;AAsBA,IAAM,KACJ,GACA,MACqB;CACrB,IAAM,IAAgB,KAAoB,EAAE,EACtC,IAAe,EAAc,SAAS,GACtC,IAAa,KAAiB;AAMpC,QAJI,CAAC,KAAc,CAAC,IACX,OAIP,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACG,KACC,kBAAC,OAAD;GAAK,WAAW;aACb,EAAc,KAAK,GAAQ,MAExB,kBAAC,OAAD;IAAiB,WAAW;cACzB;IACG,EAFI,EAEJ,CAER;GACE,CAAA,EAEP,KACC,kBAAC,OAAD;GAAK,WAAW;aAAuB;GAAoB,CAAA,CAEzD;;GAIG,KAAc,EACzB,UACA,aACA,kBACA,qBACA,kBAAA,GACA,aACA,cACA,0BAGE,kBAAC,OAAD;CAAK,WAAW,EAAG,GAAkB,EAAU;WAA/C;EACE,kBAAC,GAAD;GACS;GACG;GACV,SAAS,EAAc,GAAe,EAAiB;GACvD,CAAA;EACD,KAAoB,QACnB,kBAAC,OAAD;GAAK,WAAW;aAA0B;GAAuB,CAAA;EAEnE,kBAAC,OAAD;GAAK,WAAW,EAAG,GAAgB,EAAiB;GAAG;GAAe,CAAA;EAClE;IAIG,KAAqB,EAChC,aACA,cACA,oBAAiB,IACjB,GAAG,QACsC;CACzC,IAAI;AAOJ,QANI,IACF,IAAmB,EAAG,GAAuB,EAAU,GAC9C,KAAa,SACtB,IAAmB,IAInB,kBAAC,OAAD;EAAK,GAAI;EAAM,WAAW;EACvB;EACG,CAAA"}

package/lib/esm/atomic/templates/detail-page/detailPage.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                          */
+//#region src/atomic/templates/detail-page/detailPage.css.ts
+var e = "_8ct8xq0 txvbqb9io txvbqbai6 txvbqbap6 txvbqbnvf txvbqbp5x", t = "_8ct8xq1 txvbqb9io txvbqbai6 txvbqbaoo", n = "_8ct8xq2 txvbqb9io txvbqbco txvbqbdo6 txvbqbao6 txvbqbajx", r = "_8ct8xq3 txvbqb9io txvbqbco txvbqbao6 txvbqbajx", i = "_8ct8xq4 txvbqb9io txvbqbco", a = "_8ct8xq5 txvbqb9io txvbqbco", o = "_8ct8xq6 txvbqb9io txvbqbai6 txvbqbap6", s = "_8ct8xq7 txvbqb9io txvbqbai6 txvbqbaoo";
+//#endregion
+export { i as actionItem, n as actions, e as container, o as content, s as contentSection, t as headerSupplement, a as primaryAction, r as secondaryActions };
+
+//# sourceMappingURL=detailPage.css.js.map

package/lib/esm/atomic/templates/detail-page/detailPage.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"detailPage.css.js","names":[],"sources":["../../../../../src/atomic/templates/detail-page/detailPage.css.ts"],"sourcesContent":["import { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 6,\n  paddingLeft: 4,\n  paddingTop: 4,\n});\n\nexport const headerSupplement = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n});\n\nexport const actions = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'flex-end',\n  gap: 2,\n  flexWrap: 'wrap',\n});\n\nexport const secondaryActions = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  flexWrap: 'wrap',\n});\n\nexport const actionItem = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n});\n\nexport const primaryAction = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n});\n\nexport const content = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 6,\n});\n\nexport const contentSection = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n});\n"],"mappings":""}

package/lib/esm/atomic/templates/page-container/PageContainer.js

@@ -0,0 +1,36 @@
+import { cx as e } from "../../../theme/tools.js";
+import { BackofficePageHeader as t } from "../../../backoffice/molecules/backoffice_page_header/BackofficePageHeader.js";
+import { actions as n, container as r, content as i } from "./pageContainer.css.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/atomic/templates/page-container/PageContainer.tsx
+var s = ({ title: s, subtitle: c, primaryAction: l, secondaryActions: u, leftAction: d, children: f, className: p, contentClassName: m }) => {
+	let h = u ?? [], g = l != null, _ = h.length > 0, v = null;
+	return (g || _) && (v = /* @__PURE__ */ o("div", {
+		className: n,
+		children: [_ && /* @__PURE__ */ a("div", {
+			className: "_1u2lre42 txvbqb9io txvbqbco txvbqbao6 txvbqbajx",
+			children: h.map((e, t) => /* @__PURE__ */ a("div", {
+				className: "_1u2lre43 txvbqb9io txvbqbco",
+				children: e
+			}, t))
+		}), g && /* @__PURE__ */ a("div", {
+			className: "_1u2lre44 txvbqb9io txvbqbco",
+			children: l
+		})]
+	})), /* @__PURE__ */ o("div", {
+		className: e(r, p),
+		children: [/* @__PURE__ */ a(t, {
+			title: s,
+			subtitle: c,
+			actions: v,
+			leftActions: d
+		}), /* @__PURE__ */ a("div", {
+			className: e(i, m),
+			children: f
+		})]
+	});
+};
+//#endregion
+export { s as PageContainer, s as default };
+
+//# sourceMappingURL=PageContainer.js.map

package/lib/esm/atomic/templates/page-container/PageContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageContainer.js","names":[],"sources":["../../../../../src/atomic/templates/page-container/PageContainer.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { BackofficePageHeader } from '../../../backoffice/molecules/backoffice_page_header/BackofficePageHeader.js';\nimport { cx } from '../../../theme/tools.js';\nimport * as styles from './pageContainer.css.js';\n\nexport type PageContainerProps = {\n  title: string;\n  subtitle?: ReactNode;\n  primaryAction?: ReactNode;\n  secondaryActions?: readonly ReactNode[];\n  leftAction?: ReactNode;\n  children: ReactNode;\n  className?: string;\n  contentClassName?: string;\n};\n\nexport const PageContainer = ({\n  title,\n  subtitle,\n  primaryAction,\n  secondaryActions,\n  leftAction,\n  children,\n  className,\n  contentClassName,\n}: PageContainerProps): JSX.Element => {\n  const secondary = secondaryActions ?? [];\n  const hasPrimaryAction = primaryAction != null;\n  const hasSecondaryActions = secondary.length > 0;\n\n  let actions: ReactNode | null = null;\n  if (hasPrimaryAction || hasSecondaryActions) {\n    actions = (\n      <div className={styles.actions}>\n        {hasSecondaryActions && (\n          <div className={styles.secondaryActions}>\n            {secondary.map((action, index) => {\n              return (\n                <div key={index} className={styles.actionItem}>\n                  {action}\n                </div>\n              );\n            })}\n          </div>\n        )}\n        {hasPrimaryAction && (\n          <div className={styles.primaryAction}>{primaryAction}</div>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className={cx(styles.container, className)}>\n      <BackofficePageHeader\n        title={title}\n        subtitle={subtitle}\n        actions={actions}\n        leftActions={leftAction}\n      />\n      <div className={cx(styles.content, contentClassName)}>{children}</div>\n    </div>\n  );\n};\n\nexport default PageContainer;\n"],"mappings":";;;;;AAiBA,IAAa,KAAiB,EAC5B,UACA,aACA,eAAA,GACA,kBAAA,GACA,eACA,aACA,cACA,0BACqC;CACrC,IAAM,IAAY,KAAoB,EAAE,EAClC,IAAmB,KAAiB,MACpC,IAAsB,EAAU,SAAS,GAE3C,IAA4B;AAsBhC,SArBI,KAAoB,OACtB,IACE,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACG,KACC,kBAAC,OAAD;GAAK,WAAW;aACb,EAAU,KAAK,GAAQ,MAEpB,kBAAC,OAAD;IAAiB,WAAW;cACzB;IACG,EAFI,EAEJ,CAER;GACE,CAAA,EAEP,KACC,kBAAC,OAAD;GAAK,WAAW;aAAuB;GAAoB,CAAA,CAEzD;MAKR,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAkB,EAAU;YAA/C,CACE,kBAAC,GAAD;GACS;GACG;GACD,SAAA;GACT,aAAa;GACb,CAAA,EACF,kBAAC,OAAD;GAAK,WAAW,EAAG,GAAgB,EAAiB;GAAG;GAAe,CAAA,CAClE"}

package/lib/esm/atomic/templates/page-container/pageContainer.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                             */
+//#region src/atomic/templates/page-container/pageContainer.css.ts
+var e = "_1u2lre40 txvbqbnvo txvbqboix txvbqb9io txvbqbai6 txvbqbap6 txvbqbcf txvbqbu6f txvbqbef txvbqbp66 txvbqb9mx txvbqbjg6", t = "_1u2lre41 txvbqb9io txvbqbco txvbqbdo6 txvbqbao6 txvbqbajx", n = "_1u2lre42 txvbqb9io txvbqbco txvbqbao6 txvbqbajx", r = "_1u2lre43 txvbqb9io txvbqbco", i = "_1u2lre44 txvbqb9io txvbqbco", a = "_1u2lre45 txvbqbu6f txvbqb9io txvbqbcf txvbqbai6";
+//#endregion
+export { r as actionItem, t as actions, e as container, a as content, i as primaryAction, n as secondaryActions };
+
+//# sourceMappingURL=pageContainer.css.js.map

package/lib/esm/atomic/templates/page-container/pageContainer.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pageContainer.css.js","names":[],"sources":["../../../../../src/atomic/templates/page-container/pageContainer.css.ts"],"sourcesContent":["import { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 6,\n  alignItems: 'flex-start',\n  width: 'full',\n  alignSelf: 'stretch',\n  paddingTop: 5,\n  paddingX: 5,\n  flex: 1,\n  minHeight: 0,\n});\n\nexport const actions = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'flex-end',\n  gap: 2,\n  flexWrap: 'wrap',\n});\n\nexport const secondaryActions = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  flexWrap: 'wrap',\n});\n\nexport const actionItem = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n});\n\nexport const primaryAction = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n});\n\nexport const content = sprinkles({\n  width: 'full',\n  display: 'flex',\n  alignItems: 'flex-start',\n  flexDirection: 'column',\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/backoffice_page_header/BackofficePageHeader.js

@@ -1,31 +1,37 @@
 import { cx as e } from "../../../theme/tools.js";
-import { container as t, left as n, title as r, titleRow as i } from "./backofficePageHeader.css.js";
+import { container as t, headerRow as n, left as r, title as i, titleRow as a } from "./backofficePageHeader.css.js";
 import "../../../index.js";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/backoffice/molecules/backoffice_page_header/BackofficePageHeader.tsx
-var s = ({ title: s, subtitle: c, actions: l, meta: u, className: d }) => /* @__PURE__ */ o("div", {
-	className: e(t, d),
-	children: [/* @__PURE__ */ o("div", {
-		className: n,
-		children: [/* @__PURE__ */ o("div", {
-			className: i,
-			children: [/* @__PURE__ */ a("h1", {
-				className: r,
-				children: s
-			}), u != null && /* @__PURE__ */ a("div", {
-				className: "_1puq2a85",
-				children: u
+var c = ({ title: c, subtitle: l, actions: u, meta: d, leftActions: f, className: p }) => /* @__PURE__ */ s("div", {
+	className: e(t, p),
+	children: [/* @__PURE__ */ s("div", {
+		className: r,
+		children: [/* @__PURE__ */ s("div", {
+			className: n,
+			children: [f != null && /* @__PURE__ */ o("div", {
+				className: "_1puq2a83",
+				children: f
+			}), /* @__PURE__ */ s("div", {
+				className: a,
+				children: [/* @__PURE__ */ o("h1", {
+					className: i,
+					children: c
+				}), d != null && /* @__PURE__ */ o("div", {
+					className: "_1puq2a87",
+					children: d
+				})]
 			})]
-		}), c != null && (typeof c != "string" || c.trim() !== "") && /* @__PURE__ */ a("p", {
-			className: "_1puq2a84",
-			children: c
+		}), l != null && (typeof l != "string" || l.trim() !== "") && /* @__PURE__ */ o("p", {
+			className: "_1puq2a86",
+			children: l
 		})]
-	}), l != null && /* @__PURE__ */ a("div", {
-		className: "_1puq2a86",
-		children: l
+	}), u != null && /* @__PURE__ */ o("div", {
+		className: "_1puq2a88",
+		children: u
 	})]
 });
 //#endregion
-export { s as BackofficePageHeader, s as default };
+export { c as BackofficePageHeader, c as default };
 
 //# sourceMappingURL=BackofficePageHeader.js.map

package/lib/esm/backoffice/molecules/backoffice_page_header/BackofficePageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficePageHeader.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_page_header/BackofficePageHeader.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { cx } from '@plumile/ui';\n\nimport * as styles from './backofficePageHeader.css.js';\n\nexport type BackofficePageHeaderProps = {\n  title: string;\n  subtitle?: ReactNode;\n  actions?: ReactNode;\n  meta?: ReactNode;\n  className?: string;\n};\n\nexport const BackofficePageHeader = ({\n  title,\n  subtitle,\n  actions,\n  meta,\n  className,\n}: BackofficePageHeaderProps): JSX.Element => {\n  return (\n    <div className={cx(styles.container, className)}>\n      <div className={styles.left}>\n        <div className={styles.titleRow}>\n          <h1 className={styles.title}>{title}</h1>\n          {meta != null && <div className={styles.metaRow}>{meta}</div>}\n        </div>\n        {subtitle != null &&\n          (typeof subtitle !== 'string' || subtitle.trim() !== '') && (\n            <p className={styles.subtitle}>{subtitle}</p>\n          )}\n      </div>\n      {actions != null && <div className={styles.actions}>{actions}</div>}\n    </div>\n  );\n};\n\nexport default BackofficePageHeader;\n"],"mappings":";;;;;AAcA,IAAa,KAAwB,EACnC,OAAA,GACA,UAAA,GACA,SAAA,GACA,SACA,mBAGE,kBAAC,OAAD;CAAK,WAAW,EAAG,GAAkB,EAAU;WAA/C,CACE,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACE,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,MAAD;IAAI,WAAW;cAAe;IAAW,CAAA,EACxC,KAAQ,QAAQ,kBAAC,OAAD;IAAK,WAAW;cAAiB;IAAW,CAAA,CACzD;MACL,KAAY,SACV,OAAO,KAAa,YAAY,EAAS,MAAM,KAAK,OACnD,kBAAC,KAAD;GAAG,WAAW;aAAkB;GAAa,CAAA,CAE7C;KACL,KAAW,QAAQ,kBAAC,OAAD;EAAK,WAAW;YAAiB;EAAc,CAAA,CAC/D"}
+{"version":3,"file":"BackofficePageHeader.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_page_header/BackofficePageHeader.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { cx } from '@plumile/ui';\n\nimport * as styles from './backofficePageHeader.css.js';\n\nexport type BackofficePageHeaderProps = {\n  title: string;\n  subtitle?: ReactNode;\n  actions?: ReactNode;\n  meta?: ReactNode;\n  leftActions?: ReactNode;\n  className?: string;\n};\n\nexport const BackofficePageHeader = ({\n  title,\n  subtitle,\n  actions,\n  meta,\n  leftActions,\n  className,\n}: BackofficePageHeaderProps): JSX.Element => {\n  return (\n    <div className={cx(styles.container, className)}>\n      <div className={styles.left}>\n        <div className={styles.headerRow}>\n          {leftActions != null && (\n            <div className={styles.leftActions}>{leftActions}</div>\n          )}\n          <div className={styles.titleRow}>\n            <h1 className={styles.title}>{title}</h1>\n            {meta != null && <div className={styles.metaRow}>{meta}</div>}\n          </div>\n        </div>\n        {subtitle != null &&\n          (typeof subtitle !== 'string' || subtitle.trim() !== '') && (\n            <p className={styles.subtitle}>{subtitle}</p>\n          )}\n      </div>\n      {actions != null && <div className={styles.actions}>{actions}</div>}\n    </div>\n  );\n};\n\nexport default BackofficePageHeader;\n"],"mappings":";;;;;AAeA,IAAa,KAAwB,EACnC,OAAA,GACA,UAAA,GACA,SAAA,GACA,SACA,aAAA,GACA,mBAGE,kBAAC,OAAD;CAAK,WAAW,EAAG,GAAkB,EAAU;WAA/C,CACE,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACE,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACG,KAAe,QACd,kBAAC,OAAD;IAAK,WAAW;cAAqB;IAAkB,CAAA,EAEzD,kBAAC,OAAD;IAAK,WAAW;cAAhB,CACE,kBAAC,MAAD;KAAI,WAAW;eAAe;KAAW,CAAA,EACxC,KAAQ,QAAQ,kBAAC,OAAD;KAAK,WAAW;eAAiB;KAAW,CAAA,CACzD;MACF;MACL,KAAY,SACV,OAAO,KAAa,YAAY,EAAS,MAAM,KAAK,OACnD,kBAAC,KAAD;GAAG,WAAW;aAAkB;GAAa,CAAA,CAE7C;KACL,KAAW,QAAQ,kBAAC,OAAD;EAAK,WAAW;YAAiB;EAAc,CAAA,CAC/D"}

package/lib/esm/backoffice/molecules/backoffice_page_header/backofficePageHeader.css.js

@@ -1,7 +1,7 @@
 /* empty css                                    */
 //#region src/backoffice/molecules/backoffice_page_header/backofficePageHeader.css.ts
-var e = "_1puq2a80", t = "_1puq2a81", n = "_1puq2a82", r = "_1puq2a83", i = "_1puq2a84", a = "_1puq2a85", o = "_1puq2a86";
+var e = "_1puq2a80", t = "_1puq2a81", n = "_1puq2a82", r = "_1puq2a83", i = "_1puq2a84", a = "_1puq2a85", o = "_1puq2a86", s = "_1puq2a87", c = "_1puq2a88";
 //#endregion
-export { o as actions, e as container, t as left, a as metaRow, i as subtitle, r as title, n as titleRow };
+export { c as actions, e as container, n as headerRow, t as left, r as leftActions, s as metaRow, o as subtitle, a as title, i as titleRow };
 
 //# sourceMappingURL=backofficePageHeader.css.js.map

package/lib/esm/backoffice/molecules/backoffice_page_header/backofficePageHeader.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficePageHeader.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_page_header/backofficePageHeader.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { vars } from '@plumile/ui/theme/themeContract.js';\n\nexport const container = style({\n  display: 'flex',\n  alignItems: 'flex-start',\n  justifyContent: 'space-between',\n  gap: vars.spacing[4],\n  flexWrap: 'wrap',\n});\n\nexport const left = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: vars.spacing[2],\n  minWidth: 0,\n  flex: 1,\n});\n\nexport const titleRow = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: vars.spacing[2],\n  flexWrap: 'wrap',\n});\n\nexport const title = style({\n  fontSize: vars.fontSize['2xl'],\n  lineHeight: vars.lineHeight['2xl'],\n  fontWeight: vars.fontWeight.semibold,\n  color: vars.colors.text,\n  margin: 0,\n});\n\nexport const subtitle = style({\n  margin: 0,\n  fontSize: vars.fontSize.base,\n  lineHeight: vars.lineHeight.base,\n  color: vars.colors.textSecondary,\n});\n\nexport const metaRow = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: vars.spacing[2],\n  flexWrap: 'wrap',\n});\n\nexport const actions = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: vars.spacing[2],\n  flexWrap: 'wrap',\n});\n"],"mappings":""}
+{"version":3,"file":"backofficePageHeader.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_page_header/backofficePageHeader.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { vars } from '@plumile/ui/theme/themeContract.js';\n\nexport const container = style({\n  display: 'flex',\n  alignItems: 'flex-start',\n  justifyContent: 'space-between',\n  gap: vars.spacing[4],\n  flexWrap: 'wrap',\n});\n\nexport const left = style({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: vars.spacing[2],\n  minWidth: 0,\n  flex: 1,\n});\n\nexport const headerRow = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: vars.spacing[3],\n  flexWrap: 'wrap',\n  minWidth: 0,\n});\n\nexport const leftActions = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: vars.spacing[2],\n  flexWrap: 'wrap',\n  flexShrink: 0,\n});\n\nexport const titleRow = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: vars.spacing[2],\n  flexWrap: 'wrap',\n  minWidth: 0,\n});\n\nexport const title = style({\n  fontSize: vars.fontSize['2xl'],\n  lineHeight: vars.lineHeight['2xl'],\n  fontWeight: vars.fontWeight.semibold,\n  color: vars.colors.text,\n  margin: 0,\n});\n\nexport const subtitle = style({\n  margin: 0,\n  fontSize: vars.fontSize.base,\n  lineHeight: vars.lineHeight.base,\n  color: vars.colors.textSecondary,\n});\n\nexport const metaRow = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: vars.spacing[2],\n  flexWrap: 'wrap',\n});\n\nexport const actions = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: vars.spacing[2],\n  flexWrap: 'wrap',\n});\n"],"mappings":""}