@plumile/ui 0.1.55 → 0.1.56

package/lib/esm/atomic/atoms/button/Button.js

@@ -1,58 +1,60 @@
-import { jsxs as L, jsx as n, Fragment as x } from "react/jsx-runtime";
+import { jsxs as v, jsx as o, Fragment as x } from "react/jsx-runtime";
 import { ButtonLoadingSpinnerSvg as B } from "../../../icons/ButtonLoadingSpinnerSvg.js";
-import { button as v, spinnerIcon as j, loadingIndicator as w, iconLeft as C, content as R, iconRight as S } from "./button.css.js";
+import { useUiTranslation as j } from "../../../i18n/useUiTranslation.js";
+import { button as w, spinnerIcon as C, loadingIndicator as R, iconLeft as S, content as z, iconRight as D } from "./button.css.js";
 import { cx as e } from "../../../theme/tools.js";
-const k = (l) => {
-  const {
-    children: r,
-    className: d,
-    disabled: m,
+const q = (l) => {
+  const { t: r } = j(), {
+    children: d,
+    className: m,
+    disabled: h,
     isLoading: i = !1,
-    loadingLabel: h,
+    loadingLabel: p,
     classes: s,
     leftIcon: a,
     rightIcon: c,
-    size: p,
-    variant: f,
-    width: g,
-    ref: u,
-    ...N
-  } = l, b = e(v({ variant: f, size: p, width: g }), d), I = !!i || !!m;
+    size: f,
+    variant: g,
+    width: u,
+    ref: N,
+    ...b
+  } = l, L = e(w({ variant: g, size: f, width: u }), m), I = !!i || !!h;
   let t;
-  if (i)
-    t = /* @__PURE__ */ L("span", { className: e(w, s?.loadingIndicator), children: [
-      /* @__PURE__ */ n(
+  if (i) {
+    const n = p ?? r("common.loading");
+    t = /* @__PURE__ */ v("span", { className: e(R, s?.loadingIndicator), children: [
+      /* @__PURE__ */ o(
         B,
         {
-          className: e(j, s?.spinnerIcon),
+          className: e(C, s?.spinnerIcon),
           width: 20,
           height: 20
         }
       ),
-      h
+      n
     ] });
-  else {
-    const o = [];
-    a != null && o.push(
-      /* @__PURE__ */ n("span", { className: e(C, s?.iconLeft), children: a }, "left-icon")
-    ), o.push(
-      /* @__PURE__ */ n("span", { className: e(R, s?.content), children: r }, "content")
-    ), c != null && o.push(
-      /* @__PURE__ */ n("span", { className: e(S, s?.iconRight), children: c }, "right-icon")
-    ), t = /* @__PURE__ */ n(x, { children: o });
+  } else {
+    const n = [];
+    a != null && n.push(
+      /* @__PURE__ */ o("span", { className: e(S, s?.iconLeft), children: a }, "left-icon")
+    ), n.push(
+      /* @__PURE__ */ o("span", { className: e(z, s?.content), children: d }, "content")
+    ), c != null && n.push(
+      /* @__PURE__ */ o("span", { className: e(D, s?.iconRight), children: c }, "right-icon")
+    ), t = /* @__PURE__ */ o(x, { children: n });
   }
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ o(
     "button",
     {
-      ref: u,
-      className: b,
+      ref: N,
+      className: L,
       disabled: I,
-      ...N,
+      ...b,
       children: t
     }
   );
 };
 export {
-  k as Button
+  q as Button
 };
 //# sourceMappingURL=Button.js.map

package/lib/esm/atomic/atoms/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../../src/atomic/atoms/button/Button.tsx"],"sourcesContent":["import React, { type Ref, type JSX } from 'react';\n\nimport { ButtonLoadingSpinnerSvg } from '../../../icons/ButtonLoadingSpinnerSvg.js';\n\nimport {\n  button,\n  content as contentClass,\n  iconLeft,\n  iconRight,\n  loadingIndicator,\n  spinnerIcon,\n  type ButtonVariants,\n} from './button.css.js';\nimport { cx } from '../../../theme/tools.js';\n\ntype ButtonSlot =\n  | 'loadingIndicator'\n  | 'spinnerIcon'\n  | 'content'\n  | 'iconLeft'\n  | 'iconRight';\n\ntype SlotClasses<T extends string> = Partial<Record<T, string>>;\n\n// Omit the conflicting 'size' property from HTML button attributes\ntype Props = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size'> & {\n  variant?: NonNullable<ButtonVariants>['variant'];\n  size?: NonNullable<ButtonVariants>['size'];\n  width?: NonNullable<ButtonVariants>['width'];\n  isLoading?: boolean;\n  loadingLabel?: React.ReactNode;\n  leftIcon?: React.ReactNode;\n  rightIcon?: React.ReactNode;\n  ref?: Ref<HTMLButtonElement>;\n  classes?: SlotClasses<ButtonSlot>;\n};\n\nexport const Button = (props: Props): JSX.Element => {\n  const {\n    children,\n    className,\n    disabled,\n    isLoading = false,\n    loadingLabel,\n    classes,\n    leftIcon,\n    rightIcon,\n    size,\n    variant,\n    width,\n    ref,\n    ...rest\n  } = props;\n\n  const resolvedClassName = cx(button({ variant, size, width }), className);\n  const isDisabled = Boolean(isLoading) || Boolean(disabled);\n\n  let renderedContent: JSX.Element;\n\n  if (isLoading) {\n    renderedContent = (\n      <span className={cx(loadingIndicator, classes?.loadingIndicator)}>\n        <ButtonLoadingSpinnerSvg\n          className={cx(spinnerIcon, classes?.spinnerIcon)}\n          width={20}\n          height={20}\n        />\n        {loadingLabel}\n      </span>\n    );\n  } else {\n    const iconElements: JSX.Element[] = [];\n\n    if (leftIcon != null) {\n      iconElements.push(\n        <span className={cx(iconLeft, classes?.iconLeft)} key=\"left-icon\">\n          {leftIcon}\n        </span>,\n      );\n    }\n\n    iconElements.push(\n      <span className={cx(contentClass, classes?.content)} key=\"content\">\n        {children}\n      </span>,\n    );\n\n    if (rightIcon != null) {\n      iconElements.push(\n        <span className={cx(iconRight, classes?.iconRight)} key=\"right-icon\">\n          {rightIcon}\n        </span>,\n      );\n    }\n\n    renderedContent = <>{iconElements}</>;\n  }\n\n  return (\n    <button\n      ref={ref}\n      className={resolvedClassName}\n      disabled={isDisabled}\n      {...rest}\n    >\n      {renderedContent}\n    </button>\n  );\n};\n"],"names":["Button","props","children","className","disabled","isLoading","loadingLabel","classes","leftIcon","rightIcon","size","variant","width","ref","rest","resolvedClassName","cx","button","isDisabled","renderedContent","loadingIndicator","jsx","ButtonLoadingSpinnerSvg","spinnerIcon","iconElements","iconLeft","contentClass","iconRight"],"mappings":";;;;AAqCO,MAAMA,IAAS,CAACC,MAA8B;AACnD,QAAM;AAAA,IACJ,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,KAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDb,GAEEc,IAAoBC,EAAGC,EAAO,EAAE,SAAAN,GAAS,MAAAD,GAAM,OAAAE,GAAO,GAAGT,CAAS,GAClEe,IAAa,EAAQb,KAAc,EAAQD;AAEjD,MAAIe;AAEJ,MAAId;AACF,IAAAc,sBACG,QAAA,EAAK,WAAWH,EAAGI,GAAkBb,GAAS,gBAAgB,GAC7D,UAAA;AAAA,MAAA,gBAAAc;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAWN,EAAGO,GAAahB,GAAS,WAAW;AAAA,UAC/C,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,MAETD;AAAA,IAAA,GACH;AAAA,OAEG;AACL,UAAMkB,IAA8B,CAAA;AAEpC,IAAIhB,KAAY,QACdgB,EAAa;AAAA,MACX,gBAAAH,EAAC,UAAK,WAAWL,EAAGS,GAAUlB,GAAS,QAAQ,GAC5C,UAAAC,EAAA,GADmD,WAEtD;AAAA,IAAA,GAIJgB,EAAa;AAAA,MACX,gBAAAH,EAAC,UAAK,WAAWL,EAAGU,GAAcnB,GAAS,OAAO,GAC/C,UAAAL,EAAA,GADsD,SAEzD;AAAA,IAAA,GAGEO,KAAa,QACfe,EAAa;AAAA,MACX,gBAAAH,EAAC,UAAK,WAAWL,EAAGW,GAAWpB,GAAS,SAAS,GAC9C,UAAAE,EAAA,GADqD,YAExD;AAAA,IAAA,GAIJU,2BAAqB,UAAAK,EAAA,CAAa;AAAA,EACpC;AAEA,SACE,gBAAAH;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,WAAWE;AAAA,MACX,UAAUG;AAAA,MACT,GAAGJ;AAAA,MAEH,UAAAK;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"Button.js","sources":["../../../../../src/atomic/atoms/button/Button.tsx"],"sourcesContent":["import React, { type Ref, type JSX } from 'react';\n\nimport { ButtonLoadingSpinnerSvg } from '../../../icons/ButtonLoadingSpinnerSvg.js';\nimport { useUiTranslation } from '../../../i18n/useUiTranslation.js';\n\nimport {\n  button,\n  content as contentClass,\n  iconLeft,\n  iconRight,\n  loadingIndicator,\n  spinnerIcon,\n  type ButtonVariants,\n} from './button.css.js';\nimport { cx } from '../../../theme/tools.js';\n\ntype ButtonSlot =\n  | 'loadingIndicator'\n  | 'spinnerIcon'\n  | 'content'\n  | 'iconLeft'\n  | 'iconRight';\n\ntype SlotClasses<T extends string> = Partial<Record<T, string>>;\n\n// Omit the conflicting 'size' property from HTML button attributes\ntype Props = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size'> & {\n  variant?: NonNullable<ButtonVariants>['variant'];\n  size?: NonNullable<ButtonVariants>['size'];\n  width?: NonNullable<ButtonVariants>['width'];\n  isLoading?: boolean;\n  loadingLabel?: React.ReactNode;\n  leftIcon?: React.ReactNode;\n  rightIcon?: React.ReactNode;\n  ref?: Ref<HTMLButtonElement>;\n  classes?: SlotClasses<ButtonSlot>;\n};\n\nexport const Button = (props: Props): JSX.Element => {\n  const { t } = useUiTranslation();\n  const {\n    children,\n    className,\n    disabled,\n    isLoading = false,\n    loadingLabel,\n    classes,\n    leftIcon,\n    rightIcon,\n    size,\n    variant,\n    width,\n    ref,\n    ...rest\n  } = props;\n\n  const resolvedClassName = cx(button({ variant, size, width }), className);\n  const isDisabled = Boolean(isLoading) || Boolean(disabled);\n\n  let renderedContent: JSX.Element;\n\n  if (isLoading) {\n    const resolvedLoadingLabel = loadingLabel ?? t('common.loading');\n    renderedContent = (\n      <span className={cx(loadingIndicator, classes?.loadingIndicator)}>\n        <ButtonLoadingSpinnerSvg\n          className={cx(spinnerIcon, classes?.spinnerIcon)}\n          width={20}\n          height={20}\n        />\n        {resolvedLoadingLabel}\n      </span>\n    );\n  } else {\n    const iconElements: JSX.Element[] = [];\n\n    if (leftIcon != null) {\n      iconElements.push(\n        <span className={cx(iconLeft, classes?.iconLeft)} key=\"left-icon\">\n          {leftIcon}\n        </span>,\n      );\n    }\n\n    iconElements.push(\n      <span className={cx(contentClass, classes?.content)} key=\"content\">\n        {children}\n      </span>,\n    );\n\n    if (rightIcon != null) {\n      iconElements.push(\n        <span className={cx(iconRight, classes?.iconRight)} key=\"right-icon\">\n          {rightIcon}\n        </span>,\n      );\n    }\n\n    renderedContent = <>{iconElements}</>;\n  }\n\n  return (\n    <button\n      ref={ref}\n      className={resolvedClassName}\n      disabled={isDisabled}\n      {...rest}\n    >\n      {renderedContent}\n    </button>\n  );\n};\n"],"names":["Button","props","t","useUiTranslation","children","className","disabled","isLoading","loadingLabel","classes","leftIcon","rightIcon","size","variant","width","ref","rest","resolvedClassName","cx","button","isDisabled","renderedContent","resolvedLoadingLabel","loadingIndicator","jsx","ButtonLoadingSpinnerSvg","spinnerIcon","iconElements","iconLeft","contentClass","iconRight"],"mappings":";;;;;AAsCO,MAAMA,IAAS,CAACC,MAA8B;AACnD,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACR;AAAA,IACJ,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,KAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDf,GAEEgB,IAAoBC,EAAGC,EAAO,EAAE,SAAAN,GAAS,MAAAD,GAAM,OAAAE,GAAO,GAAGT,CAAS,GAClEe,IAAa,EAAQb,KAAc,EAAQD;AAEjD,MAAIe;AAEJ,MAAId,GAAW;AACb,UAAMe,IAAuBd,KAAgBN,EAAE,gBAAgB;AAC/D,IAAAmB,sBACG,QAAA,EAAK,WAAWH,EAAGK,GAAkBd,GAAS,gBAAgB,GAC7D,UAAA;AAAA,MAAA,gBAAAe;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAWP,EAAGQ,GAAajB,GAAS,WAAW;AAAA,UAC/C,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,MAETa;AAAA,IAAA,GACH;AAAA,EAEJ,OAAO;AACL,UAAMK,IAA8B,CAAA;AAEpC,IAAIjB,KAAY,QACdiB,EAAa;AAAA,MACX,gBAAAH,EAAC,UAAK,WAAWN,EAAGU,GAAUnB,GAAS,QAAQ,GAC5C,UAAAC,EAAA,GADmD,WAEtD;AAAA,IAAA,GAIJiB,EAAa;AAAA,MACX,gBAAAH,EAAC,UAAK,WAAWN,EAAGW,GAAcpB,GAAS,OAAO,GAC/C,UAAAL,EAAA,GADsD,SAEzD;AAAA,IAAA,GAGEO,KAAa,QACfgB,EAAa;AAAA,MACX,gBAAAH,EAAC,UAAK,WAAWN,EAAGY,GAAWrB,GAAS,SAAS,GAC9C,UAAAE,EAAA,GADqD,YAExD;AAAA,IAAA,GAIJU,2BAAqB,UAAAM,EAAA,CAAa;AAAA,EACpC;AAEA,SACE,gBAAAH;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAT;AAAA,MACA,WAAWE;AAAA,MACX,UAAUG;AAAA,MACT,GAAGJ;AAAA,MAEH,UAAAK;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/lib/esm/atomic/atoms/formatted-date/FormattedDate.js

@@ -0,0 +1,32 @@
+import { jsx as c } from "react/jsx-runtime";
+import { useMemo as u } from "react";
+import { useUiTranslation as l } from "../../../i18n/useUiTranslation.js";
+const d = {
+  year: "numeric",
+  month: "short",
+  day: "numeric"
+}, h = ({
+  value: r,
+  fallback: m,
+  options: e = d,
+  locale: n,
+  className: a
+}) => {
+  const { t: i } = l(), t = m ?? i("common.notAvailable"), s = u(() => {
+    if (r == null)
+      return t;
+    const o = new Date(String(r));
+    if (Number.isNaN(o.getTime()))
+      return t;
+    try {
+      return new Intl.DateTimeFormat(n, e).format(o);
+    } catch {
+      return t;
+    }
+  }, [r, t, n, e]);
+  return /* @__PURE__ */ c("span", { className: a, children: s });
+};
+export {
+  h as FormattedDate
+};
+//# sourceMappingURL=FormattedDate.js.map

package/lib/esm/atomic/atoms/formatted-date/FormattedDate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormattedDate.js","sources":["../../../../../src/atomic/atoms/formatted-date/FormattedDate.tsx"],"sourcesContent":["import { type JSX, useMemo } from 'react';\nimport { useUiTranslation } from '../../../i18n/useUiTranslation.js';\n\ntype DateValue = string | { toString: () => string };\n\ntype Props = {\n  value: DateValue | null | undefined;\n  fallback?: string;\n  options?: Intl.DateTimeFormatOptions;\n  locale?: string;\n  className?: string;\n};\n\nconst DEFAULT_OPTIONS: Intl.DateTimeFormatOptions = {\n  year: 'numeric',\n  month: 'short',\n  day: 'numeric',\n};\n\nexport const FormattedDate = ({\n  value,\n  fallback,\n  options = DEFAULT_OPTIONS,\n  locale,\n  className,\n}: Props): JSX.Element => {\n  const { t } = useUiTranslation();\n  const resolvedFallback = fallback ?? t('common.notAvailable');\n  const displayValue = useMemo(() => {\n    if (value == null) {\n      return resolvedFallback;\n    }\n\n    const date = new Date(String(value));\n    if (Number.isNaN(date.getTime())) {\n      return resolvedFallback;\n    }\n\n    try {\n      return new Intl.DateTimeFormat(locale, options).format(date);\n    } catch {\n      return resolvedFallback;\n    }\n  }, [value, resolvedFallback, locale, options]);\n\n  return <span className={className}>{displayValue}</span>;\n};\n"],"names":["DEFAULT_OPTIONS","FormattedDate","value","fallback","options","locale","className","t","useUiTranslation","resolvedFallback","displayValue","useMemo","date","jsx"],"mappings":";;;AAaA,MAAMA,IAA8C;AAAA,EAClD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,KAAK;AACP,GAEaC,IAAgB,CAAC;AAAA,EAC5B,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC,IAAUJ;AAAA,EACV,QAAAK;AAAA,EACA,WAAAC;AACF,MAA0B;AACxB,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,IAAmBN,KAAYI,EAAE,qBAAqB,GACtDG,IAAeC,EAAQ,MAAM;AACjC,QAAIT,KAAS;AACX,aAAOO;AAGT,UAAMG,IAAO,IAAI,KAAK,OAAOV,CAAK,CAAC;AACnC,QAAI,OAAO,MAAMU,EAAK,QAAA,CAAS;AAC7B,aAAOH;AAGT,QAAI;AACF,aAAO,IAAI,KAAK,eAAeJ,GAAQD,CAAO,EAAE,OAAOQ,CAAI;AAAA,IAC7D,QAAQ;AACN,aAAOH;AAAA,IACT;AAAA,EACF,GAAG,CAACP,GAAOO,GAAkBJ,GAAQD,CAAO,CAAC;AAE7C,SAAO,gBAAAS,EAAC,QAAA,EAAK,WAAAP,GAAuB,UAAAI,EAAA,CAAa;AACnD;"}

package/lib/esm/atomic/atoms/icon-button/IconMenuButton.js

@@ -0,0 +1,26 @@
+import { jsx as s } from "react/jsx-runtime";
+import { Button as a } from "../button/Button.js";
+import { useUiTranslation as i } from "../../../i18n/useUiTranslation.js";
+const l = "⋮", b = ({
+  label: o,
+  icon: t = l,
+  type: n = "button",
+  ...r
+}) => {
+  const { t: e } = i(), m = o ?? e("common.menu.open");
+  return /* @__PURE__ */ s(
+    a,
+    {
+      "aria-label": m,
+      variant: "text",
+      size: "small",
+      type: n,
+      ...r,
+      children: t
+    }
+  );
+};
+export {
+  b as IconMenuButton
+};
+//# sourceMappingURL=IconMenuButton.js.map

package/lib/esm/atomic/atoms/icon-button/IconMenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconMenuButton.js","sources":["../../../../../src/atomic/atoms/icon-button/IconMenuButton.tsx"],"sourcesContent":["import { type ComponentProps, type JSX } from 'react';\n\nimport { Button } from '../button/Button.js';\nimport { useUiTranslation } from '../../../i18n/useUiTranslation.js';\n\nconst DEFAULT_ICON = '⋮';\n\nexport type IconMenuButtonProps = Omit<\n  ComponentProps<typeof Button>,\n  'children' | 'variant' | 'size'\n> & {\n  label?: string;\n  icon?: JSX.Element | string;\n};\n\nexport const IconMenuButton = ({\n  label,\n  icon = DEFAULT_ICON,\n  type = 'button',\n  ...rest\n}: IconMenuButtonProps): JSX.Element => {\n  const { t } = useUiTranslation();\n  const resolvedLabel = label ?? t('common.menu.open');\n  return (\n    <Button\n      aria-label={resolvedLabel}\n      variant=\"text\"\n      size=\"small\"\n      type={type}\n      {...rest}\n    >\n      {icon}\n    </Button>\n  );\n};\n"],"names":["DEFAULT_ICON","IconMenuButton","label","icon","type","rest","t","useUiTranslation","resolvedLabel","jsx","Button"],"mappings":";;;AAKA,MAAMA,IAAe,KAURC,IAAiB,CAAC;AAAA,EAC7B,OAAAC;AAAA,EACA,MAAAC,IAAOH;AAAA,EACP,MAAAI,IAAO;AAAA,EACP,GAAGC;AACL,MAAwC;AACtC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,IAAgBN,KAASI,EAAE,kBAAkB;AACnD,SACE,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,cAAYF;AAAA,MACZ,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,MAAAJ;AAAA,MACC,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;"}

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

@@ -0,0 +1,55 @@
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { Link as b } from "@plumile/router";
+import { ChevronDownSvg as l } from "../../../icons/ChevronDownSvg.js";
+import { Dropdown as p } from "../dropdown/Dropdown.js";
+import { cx as u } from "../../../theme/tools.js";
+import { breadcrumbSection as h, breadcrumbNameRow as v, breadcrumbLink as f, popoverPanel as N, breadcrumbChevronButton as g, breadcrumbChevronOpen as w, breadcrumbChevron as C } from "./breadcrumbNavigation.css.js";
+import { BreadcrumbMenuPopover as x } from "./BreadcrumbMenuPopover.js";
+const P = ({
+  node: e,
+  menu: o,
+  ariaLabel: t,
+  searchPlaceholder: m,
+  searchAriaLabel: n,
+  emptyLabel: a,
+  emptyMatchesLabel: c
+}) => {
+  const i = o?.items ?? [];
+  return /* @__PURE__ */ r("div", { className: h, children: /* @__PURE__ */ d("div", { className: v, children: [
+    /* @__PURE__ */ r(b, { to: e.to, className: f, children: e.name }),
+    /* @__PURE__ */ r(
+      p,
+      {
+        trigger: (s) => /* @__PURE__ */ r("button", { type: "button", className: g, children: /* @__PURE__ */ r(
+          l,
+          {
+            width: 14,
+            height: 14,
+            className: u(C, {
+              [w]: s
+            })
+          }
+        ) }),
+        ariaLabel: t,
+        placement: "bottom-start",
+        matchTriggerWidth: !1,
+        contentClassName: N,
+        children: /* @__PURE__ */ r(
+          x,
+          {
+            items: i,
+            selectedId: o?.selectedId,
+            searchPlaceholder: m,
+            searchAriaLabel: n,
+            emptyLabel: a,
+            emptyMatchesLabel: c
+          }
+        )
+      }
+    )
+  ] }) });
+};
+export {
+  P as BreadcrumbMenuDropdown
+};
+//# sourceMappingURL=BreadcrumbMenuDropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbMenuDropdown.js","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"],"names":["BreadcrumbMenuDropdown","node","menu","ariaLabel","searchPlaceholder","searchAriaLabel","emptyLabel","emptyMatchesLabel","menuItems","jsx","styles.breadcrumbSection","jsxs","styles.breadcrumbNameRow","Link","styles.breadcrumbLink","Dropdown","isOpen","styles.breadcrumbChevronButton","ChevronDownSvg","cx","styles.breadcrumbChevron","styles.breadcrumbChevronOpen","styles.popoverPanel","BreadcrumbMenuPopover"],"mappings":";;;;;;;AAoBO,MAAMA,IAAyB,CAAC;AAAA,EACrC,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,mBAAAC;AACF,MAA0B;AACxB,QAAMC,IAAYN,GAAM,SAAS,CAAA;AAEjC,SACE,gBAAAO,EAAC,SAAI,WAAWC,GAEd,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWC,GACd,UAAA;AAAA,IAAA,gBAAAH,EAACI,GAAA,EAAK,IAAIZ,EAAK,IAAI,WAAWa,GAC3B,YAAK,KAAA,CACR;AAAA,IACA,gBAAAL;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,SAAS,CAACC,wBAEL,UAAA,EAAO,MAAK,UAAS,WAAWC,GAC/B,UAAA,gBAAAR;AAAA,UAACS;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAWC,EAAGC,GAA0B;AAAA,cACtC,CAACC,CAA4B,GAAGL;AAAA,YAAA,CACjC;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,QAGJ,WAAAb;AAAA,QACA,WAAU;AAAA,QACV,mBAAmB;AAAA,QACnB,kBAAkBmB;AAAAA,QAElB,UAAA,gBAAAb;AAAA,UAACc;AAAA,UAAA;AAAA,YACC,OAAOf;AAAA,YACP,YAAYN,GAAM;AAAA,YAClB,mBAAAE;AAAA,YACA,iBAAAC;AAAA,YACA,YAAAC;AAAA,YACA,mBAAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EACF,EAAA,CACF,EAAA,CACF;AAEJ;"}

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

@@ -0,0 +1,61 @@
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { useState as N, useMemo as y } from "react";
+import { Link as C } from "@plumile/router";
+import { Input as I } from "../../atoms/input/Input.js";
+import { useDropdown as L } from "../dropdown/Dropdown.js";
+import { cx as x } from "../../../theme/tools.js";
+import { popoverContent as b, popoverSearch as g, popoverList as w, popoverEmpty as S, popoverItemActive as j, popoverItem as k, popoverItemDescription as z, popoverItemName as D } from "./breadcrumbNavigation.css.js";
+const W = ({
+  items: t,
+  selectedId: p,
+  searchPlaceholder: c,
+  searchAriaLabel: m,
+  emptyLabel: d,
+  emptyMatchesLabel: u
+}) => {
+  const { close: h } = L(), [n, v] = N(""), o = n.trim().toLowerCase(), a = y(() => o === "" ? t : t.filter((e) => e.name.toLowerCase().includes(o)), [t, o]);
+  let l;
+  return o === "" ? l = d : l = u, /* @__PURE__ */ s("div", { className: b, children: [
+    /* @__PURE__ */ r("div", { className: g, children: /* @__PURE__ */ r(
+      I,
+      {
+        type: "search",
+        size: "small",
+        fullWidth: !0,
+        placeholder: c,
+        value: n,
+        onChange: (e) => {
+          v(e.target.value);
+        },
+        "aria-label": m
+      }
+    ) }),
+    /* @__PURE__ */ s("ul", { className: w, children: [
+      a.length === 0 && /* @__PURE__ */ r("li", { className: S, children: l }),
+      a.map((e) => {
+        const f = x(k, {
+          [j]: e.id === p
+        });
+        let i = null;
+        return e.description != null && e.description !== "" && (i = /* @__PURE__ */ r("span", { className: z, children: e.description })), /* @__PURE__ */ r("li", { children: /* @__PURE__ */ s(
+          C,
+          {
+            to: e.to,
+            className: f,
+            onClick: () => {
+              h();
+            },
+            children: [
+              /* @__PURE__ */ r("span", { className: D, children: e.name }),
+              i
+            ]
+          }
+        ) }, e.id);
+      })
+    ] })
+  ] });
+};
+export {
+  W as BreadcrumbMenuPopover
+};
+//# sourceMappingURL=BreadcrumbMenuPopover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbMenuPopover.js","sources":["../../../../../src/atomic/molecules/breadcrumb_navigation/BreadcrumbMenuPopover.tsx"],"sourcesContent":["import { type JSX, useMemo, useState } from 'react';\nimport { Link } from '@plumile/router';\nimport { Input } from '../../atoms/input/Input.js';\nimport { useDropdown } from '../dropdown/Dropdown.js';\nimport { cx } from '../../../theme/tools.js';\n\nimport * as styles from './breadcrumbNavigation.css.js';\nimport type { BreadcrumbMenuItem } from './types.js';\n\ntype Props = {\n  items: readonly BreadcrumbMenuItem[];\n  selectedId?: string | null;\n  searchPlaceholder: string;\n  searchAriaLabel: string;\n  emptyLabel: string;\n  emptyMatchesLabel: string;\n};\n\nexport const BreadcrumbMenuPopover = ({\n  items,\n  selectedId,\n  searchPlaceholder,\n  searchAriaLabel,\n  emptyLabel,\n  emptyMatchesLabel,\n}: Props): JSX.Element => {\n  const { close } = useDropdown();\n  const [query, setQuery] = useState('');\n  const normalizedQuery = query.trim().toLowerCase();\n\n  const filteredItems = useMemo(() => {\n    if (normalizedQuery === '') {\n      return items;\n    }\n\n    return items.filter((item) => {\n      return item.name.toLowerCase().includes(normalizedQuery);\n    });\n  }, [items, normalizedQuery]);\n\n  let emptyStateLabel: string;\n  if (normalizedQuery === '') {\n    emptyStateLabel = emptyLabel;\n  } else {\n    emptyStateLabel = emptyMatchesLabel;\n  }\n\n  return (\n    <div className={styles.popoverContent}>\n      <div className={styles.popoverSearch}>\n        <Input\n          type=\"search\"\n          size=\"small\"\n          fullWidth\n          placeholder={searchPlaceholder}\n          value={query}\n          onChange={(event) => {\n            setQuery(event.target.value);\n          }}\n          aria-label={searchAriaLabel}\n        />\n      </div>\n      <ul className={styles.popoverList}>\n        {filteredItems.length === 0 && (\n          <li className={styles.popoverEmpty}>{emptyStateLabel}</li>\n        )}\n        {filteredItems.map((item) => {\n          const itemClassName = cx(styles.popoverItem, {\n            [styles.popoverItemActive]: item.id === selectedId,\n          });\n\n          let descriptionNode: JSX.Element | null = null;\n          if (item.description != null && item.description !== '') {\n            descriptionNode = (\n              <span className={styles.popoverItemDescription}>\n                {item.description}\n              </span>\n            );\n          }\n\n          return (\n            <li key={item.id}>\n              <Link\n                to={item.to}\n                className={itemClassName}\n                onClick={() => {\n                  close();\n                }}\n              >\n                <span className={styles.popoverItemName}>{item.name}</span>\n                {descriptionNode}\n              </Link>\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n};\n"],"names":["BreadcrumbMenuPopover","items","selectedId","searchPlaceholder","searchAriaLabel","emptyLabel","emptyMatchesLabel","close","useDropdown","query","setQuery","useState","normalizedQuery","filteredItems","useMemo","item","emptyStateLabel","jsxs","styles.popoverContent","jsx","styles.popoverSearch","Input","event","styles.popoverList","styles.popoverEmpty","itemClassName","cx","styles.popoverItem","styles.popoverItemActive","descriptionNode","styles.popoverItemDescription","Link","styles.popoverItemName"],"mappings":";;;;;;;AAkBO,MAAMA,IAAwB,CAAC;AAAA,EACpC,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,mBAAAC;AACF,MAA0B;AACxB,QAAM,EAAE,OAAAC,EAAA,IAAUC,EAAA,GACZ,CAACC,GAAOC,CAAQ,IAAIC,EAAS,EAAE,GAC/BC,IAAkBH,EAAM,KAAA,EAAO,YAAA,GAE/BI,IAAgBC,EAAQ,MACxBF,MAAoB,KACfX,IAGFA,EAAM,OAAO,CAACc,MACZA,EAAK,KAAK,YAAA,EAAc,SAASH,CAAe,CACxD,GACA,CAACX,GAAOW,CAAe,CAAC;AAE3B,MAAII;AACJ,SAAIJ,MAAoB,KACtBI,IAAkBX,IAElBW,IAAkBV,GAIlB,gBAAAW,EAAC,OAAA,EAAI,WAAWC,GACd,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWC,GACd,UAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,WAAS;AAAA,QACT,aAAalB;AAAA,QACb,OAAOM;AAAA,QACP,UAAU,CAACa,MAAU;AACnB,UAAAZ,EAASY,EAAM,OAAO,KAAK;AAAA,QAC7B;AAAA,QACA,cAAYlB;AAAA,MAAA;AAAA,IAAA,GAEhB;AAAA,IACA,gBAAAa,EAAC,MAAA,EAAG,WAAWM,GACZ,UAAA;AAAA,MAAAV,EAAc,WAAW,KACxB,gBAAAM,EAAC,QAAG,WAAWK,GAAsB,UAAAR,GAAgB;AAAA,MAEtDH,EAAc,IAAI,CAACE,MAAS;AAC3B,cAAMU,IAAgBC,EAAGC,GAAoB;AAAA,UAC3C,CAACC,CAAwB,GAAGb,EAAK,OAAOb;AAAA,QAAA,CACzC;AAED,YAAI2B,IAAsC;AAC1C,eAAId,EAAK,eAAe,QAAQA,EAAK,gBAAgB,OACnDc,sBACG,QAAA,EAAK,WAAWC,GACd,YAAK,aACR,sBAKD,MAAA,EACC,UAAA,gBAAAb;AAAA,UAACc;AAAA,UAAA;AAAA,YACC,IAAIhB,EAAK;AAAA,YACT,WAAWU;AAAA,YACX,SAAS,MAAM;AACb,cAAAlB,EAAA;AAAA,YACF;AAAA,YAEA,UAAA;AAAA,cAAA,gBAAAY,EAAC,QAAA,EAAK,WAAWa,GAAyB,YAAK,MAAK;AAAA,cACnDH;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,EACH,GAVOd,EAAK,EAWd;AAAA,MAEJ,CAAC;AAAA,IAAA,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -0,0 +1,64 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useUiTranslation as y } from "../../../i18n/useUiTranslation.js";
+import { Link as M } from "@plumile/router";
+import { SidebarHomeSvg as S } from "../../../icons/SidebarHomeSvg.js";
+import { breadcrumbItem as o, homeLink as A, homeIcon as B, breadcrumbList as I, breadcrumbSeparator as k, breadcrumb as w } from "./breadcrumbNavigation.css.js";
+import { cx as x } from "../../../theme/tools.js";
+import { BreadcrumbMenuDropdown as u } from "./BreadcrumbMenuDropdown.js";
+const T = (p) => {
+  const { organization: c, group: t, project: n, groupMenu: d, projectMenu: h, className: g } = p, { t: a } = y(), i = a("navigation.breadcrumb.empty.matches"), m = a("navigation.breadcrumb.search.groups"), L = a("navigation.breadcrumb.empty.groups"), f = a("navigation.breadcrumb.menu.group"), s = a("navigation.breadcrumb.search.projects"), j = a("navigation.breadcrumb.empty.projects"), v = a("navigation.breadcrumb.menu.project"), e = [];
+  e.push(
+    /* @__PURE__ */ r("li", { className: o, children: /* @__PURE__ */ r(
+      M,
+      {
+        to: c.to,
+        className: A,
+        "aria-label": `Organization: ${c.name}`,
+        children: /* @__PURE__ */ r(S, { width: 16, height: 16, className: B })
+      }
+    ) }, "home")
+  ), t != null && e.push(
+    /* @__PURE__ */ r("li", { className: o, children: /* @__PURE__ */ r(
+      u,
+      {
+        node: t,
+        menu: d,
+        ariaLabel: f,
+        searchPlaceholder: m,
+        searchAriaLabel: m,
+        emptyLabel: L,
+        emptyMatchesLabel: i
+      }
+    ) }, "group")
+  ), n != null && e.push(
+    /* @__PURE__ */ r("li", { className: o, children: /* @__PURE__ */ r(
+      u,
+      {
+        node: n,
+        menu: h,
+        ariaLabel: v,
+        searchPlaceholder: s,
+        searchAriaLabel: s,
+        emptyLabel: j,
+        emptyMatchesLabel: i
+      }
+    ) }, "project")
+  );
+  const N = e.flatMap((l, b) => b === 0 ? [l] : [
+    /* @__PURE__ */ r(
+      "li",
+      {
+        className: k,
+        "aria-hidden": "true",
+        children: "/"
+      },
+      `separator-${b}`
+    ),
+    l
+  ]);
+  return /* @__PURE__ */ r("nav", { className: x(w, g), "aria-label": "Breadcrumb", children: /* @__PURE__ */ r("ol", { className: I, children: N }) });
+};
+export {
+  T as BreadcrumbNavigation
+};
+//# sourceMappingURL=BreadcrumbNavigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbNavigation.js","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"],"names":["BreadcrumbNavigation","props","organization","group","project","groupMenu","projectMenu","className","t","useUiTranslation","emptyMatchesLabel","groupSearchLabel","groupEmptyLabel","groupMenuAriaLabel","projectSearchLabel","projectEmptyLabel","projectMenuAriaLabel","breadcrumbItems","jsx","styles.breadcrumbItem","Link","styles.homeLink","SidebarHomeSvg","styles.homeIcon","BreadcrumbMenuDropdown","breadcrumbsWithSeparators","item","index","styles.breadcrumbSeparator","cx","styles.breadcrumb","styles.breadcrumbList"],"mappings":";;;;;;;AAmBO,MAAMA,IAAuB,CAACC,MAA8B;AACjE,QAAM,EAAE,cAAAC,GAAc,OAAAC,GAAO,SAAAC,GAAS,WAAAC,GAAW,aAAAC,GAAa,WAAAC,MAC5DN,GACI,EAAE,GAAAO,EAAA,IAAMC,EAAA,GACRC,IAAoBF,EAAE,qCAAqC,GAE3DG,IAAmBH,EAAE,qCAAqC,GAC1DI,IAAkBJ,EAAE,oCAAoC,GACxDK,IAAqBL,EAAE,kCAAkC,GAEzDM,IAAqBN,EAAE,uCAAuC,GAC9DO,IAAoBP,EAAE,sCAAsC,GAC5DQ,IAAuBR,EAAE,oCAAoC,GAC7DS,IAAiC,CAAA;AAEvC,EAAAA,EAAgB;AAAA,IACd,gBAAAC,EAAC,MAAA,EAAc,WAAWC,GACxB,UAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,IAAIlB,EAAa;AAAA,QACjB,WAAWmB;AAAAA,QACX,cAAY,iBAAiBnB,EAAa,IAAI;AAAA,QAE9C,UAAA,gBAAAgB,EAACI,KAAe,OAAO,IAAI,QAAQ,IAAI,WAAWC,EAAO,CAAU;AAAA,MAAA;AAAA,IAAA,KAN/D,MAQR;AAAA,EAAA,GAGEpB,KAAS,QACXc,EAAgB;AAAA,IACd,gBAAAC,EAAC,MAAA,EAAe,WAAWC,GACzB,UAAA,gBAAAD;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,MAAMrB;AAAA,QACN,MAAME;AAAA,QACN,WAAWQ;AAAA,QACX,mBAAmBF;AAAA,QACnB,iBAAiBA;AAAA,QACjB,YAAYC;AAAA,QACZ,mBAAAF;AAAA,MAAA;AAAA,IAAA,KARI,OAUR;AAAA,EAAA,GAIAN,KAAW,QACba,EAAgB;AAAA,IACd,gBAAAC,EAAC,MAAA,EAAiB,WAAWC,GAC3B,UAAA,gBAAAD;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,MAAMpB;AAAA,QACN,MAAME;AAAA,QACN,WAAWU;AAAA,QACX,mBAAmBF;AAAA,QACnB,iBAAiBA;AAAA,QACjB,YAAYC;AAAA,QACZ,mBAAAL;AAAA,MAAA;AAAA,IAAA,KARI,SAUR;AAAA,EAAA;AAIJ,QAAMe,IAA4BR,EAAgB,QAAQ,CAACS,GAAMC,MAC3DA,MAAU,IACL,CAACD,CAAI,IAEP;AAAA,IACL,gBAAAR;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAWU;AAAAA,QACX,eAAY;AAAA,QACb,UAAA;AAAA,MAAA;AAAA,MAHM,aAAaD,CAAK;AAAA,IAAA;AAAA,IAMzBD;AAAA,EAAA,CAEH;AAED,2BACG,OAAA,EAAI,WAAWG,EAAGC,GAAmBvB,CAAS,GAAG,cAAW,cAC3D,4BAAC,MAAA,EAAG,WAAWwB,GAAwB,aAA0B,GACnE;AAEJ;"}

package/lib/esm/atomic/molecules/breadcrumb_navigation/breadcrumbNavigation.css.js

@@ -0,0 +1,30 @@
+/* empty css                                          */
+/* empty css                                        */
+var q = "_1u1q1110 txvbqb9io txvbqbco", x = "_1u1q1111 txvbqb9io txvbqbco txvbqbfax txvbqbfbo txvbqbl9f txvbqbaof", t = "_1u1q1112 txvbqb9io txvbqbco", o = "_1u1q1113 txvbqb9io txvbqbai6 txvbqbcf txvbqbanx", r = "_1u1q1114 txvbqb8f txvbqbamo txvbqb66 txvbqbeef txvbqbv8t txvbqbegx", a = "_1u1q1115 txvbqb9jf txvbqbco txvbqbao6", e = "_1u1q1116 txvbqbv4z txvbqb77 txvbqb6x txvbqb7k", u = "_1u1q1117 txvbqb2w txvbqbv8p", p = "_1u1q1119 _1u1q1118 txvbqb78 txvbqb6x txvbqb7k txvbqb9jf txvbqbco txvbqb96 txvbqbamo txvbqbv8p txvbqb3b txvbqbf3x", c = "_1u1q111a txvbqb9io txvbqbco txvbqbdnx txvbqbv8t txvbqb8x txvbqbamx", i = "_1u1q111c _1u1q111b txvbqb78 txvbqb6x txvbqb7k txvbqb9io txvbqbco txvbqbdnx txvbqbtwo txvbqbc66 txvbqbk6f txvbqbjho txvbqb1rf txvbqb12f txvbqb1px txvbqbv31 txvbqbv8p txvbqbv txvbqbl9f", m = "_1u1q111d txvbqb9jf txvbqbco txvbqbdnx txvbqbc6o txvbqb1qx txvbqbv8p txvbqb78 txvbqb6x txvbqb7k", _ = "_1u1q111e txvbqbv4z", f = "_1u1q111h _1u1q111g txvbqbl9x txvbqbkcx txvbqbjcf txvbqb8r6 txvbqb6l", n = "_1u1q111i txvbqb9io txvbqbai6 txvbqbaof", d = "_1u1q111j txvbqb9io txvbqbco txvbqbdoo", l = "_1u1q111k txvbqb8o txvbqbamo txvbqb66 txvbqbeef txvbqbv8t", k = "_1u1q111l txvbqb9io", h = "_1u1q111m txvbqbfax txvbqbfbo txvbqbl9f txvbqb9io txvbqbai6 txvbqbanx txvbqbirx txvbqbl7o", j = "_1u1q111o _1u1q111n txvbqb78 txvbqb6w txvbqb7k txvbqb9io txvbqbai6 txvbqbanx txvbqboif txvbqbnv6 txvbqbp5f txvbqblx6 txvbqb1rf txvbqb3b txvbqbv8p", I = "_1u1q111p txvbqbv2j txvbqbv7z", L = "_1u1q111q txvbqb8x txvbqbamo", s = "_1u1q111r txvbqb8o txvbqbv8r", w = "_1u1q111s txvbqbl9x txvbqb8x txvbqbv8r";
+export {
+  q as breadcrumb,
+  e as breadcrumbChevron,
+  i as breadcrumbChevronButton,
+  u as breadcrumbChevronOpen,
+  t as breadcrumbItem,
+  r as breadcrumbLabel,
+  p as breadcrumbLink,
+  x as breadcrumbList,
+  a as breadcrumbNameRow,
+  o as breadcrumbSection,
+  c as breadcrumbSeparator,
+  _ as homeIcon,
+  m as homeLink,
+  n as popoverContent,
+  w as popoverEmpty,
+  d as popoverHeader,
+  j as popoverItem,
+  I as popoverItemActive,
+  s as popoverItemDescription,
+  L as popoverItemName,
+  h as popoverList,
+  f as popoverPanel,
+  k as popoverSearch,
+  l as popoverTitle
+};
+//# sourceMappingURL=breadcrumbNavigation.css.js.map

package/lib/esm/atomic/molecules/breadcrumb_navigation/breadcrumbNavigation.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbNavigation.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/lib/esm/atomic/molecules/breadcrumb_navigation/breadcrumbNavigation.css.ts.vanilla-Bhz61Foa.css

@@ -0,0 +1 @@
+@keyframes _1u1q111f{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}._1u1q1119:hover{color:var(--kronex-colors-primary);text-decoration:none}._1u1q1119:focus{outline:none;color:var(--kronex-colors-primary)}._1u1q111c:hover:not(:disabled){background-color:var(--kronex-colors-backgroundTertiary);color:var(--kronex-colors-text)}._1u1q111h{animation:_1u1q111f .16s ease}._1u1q111o:hover{background-color:var(--kronex-colors-backgroundSecondary);color:var(--kronex-colors-text)}._1u1q111o:focus{outline:2px solid var(--kronex-colors-primaryLight);outline-offset:2px}

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

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/lib/esm/atomic/molecules/dropdown/Dropdown.js

@@ -0,0 +1,178 @@
+import { jsx as N, jsxs as st } from "react/jsx-runtime";
+import { createContext as ct, useContext as it, useState as V, useRef as v, useCallback as w, useLayoutEffect as lt, useEffect as h, isValidElement as ut, cloneElement as ft } from "react";
+import { createPortal as at } from "react-dom";
+import { contentPositioned as dt, content as pt, container as mt } from "./dropdown.css.js";
+import { cx as $ } from "../../../theme/tools.js";
+const q = ct(null), xt = () => {
+  const c = it(q);
+  if (c == null)
+    throw new Error("useDropdown must be used within a <Dropdown />");
+  return c;
+}, wt = (c) => c == null || typeof c != "object" ? !1 : c.$$typeof === Symbol.for("react.forward_ref"), kt = ({
+  trigger: c,
+  children: H,
+  className: I,
+  contentClassName: U,
+  placement: x = "bottom-start",
+  offset: l = 4,
+  matchTriggerWidth: M = !0,
+  open: T,
+  defaultOpen: _ = !1,
+  onOpenChange: W,
+  closeOnItemClick: F = !1,
+  portalContainer: G,
+  ariaLabel: k
+}) => {
+  const D = T != null, [J, Q] = V(_);
+  let e = J;
+  D && (e = !!T);
+  const R = v(null), C = v(null), f = v(null), [g, X] = V(null), p = v([]), a = w(
+    (t) => {
+      D || Q(t), W?.(t);
+    },
+    [D, W]
+  ), K = w(() => {
+    a(!e);
+  }, [e, a]), d = w(() => {
+    a(!1);
+  }, [a]), Y = w(() => {
+    a(!0);
+  }, [a]), b = w(() => {
+    const t = C.current, r = f.current;
+    if (t == null || r == null)
+      return;
+    const n = t.getBoundingClientRect();
+    let o = 0, s = 0;
+    switch (x) {
+      case "bottom-start":
+        o = n.bottom + l, s = n.left;
+        break;
+      case "bottom-end":
+        o = n.bottom + l, s = n.right - r.offsetWidth;
+        break;
+      case "top-start":
+        o = n.top - r.offsetHeight - l, s = n.left;
+        break;
+      case "top-end":
+        o = n.top - r.offsetHeight - l, s = n.right - r.offsetWidth;
+        break;
+      default:
+        o = n.bottom + l, s = n.left;
+    }
+    const O = window.innerWidth, L = window.innerHeight;
+    let P;
+    M && (P = n.width);
+    const z = P ?? r.offsetWidth;
+    s + z > O - 4 && (s = Math.max(4, O - z - 4)), s < 4 && (s = 4);
+    const y = r.offsetHeight;
+    if (o + y > L - 4)
+      if (x.startsWith("bottom")) {
+        const A = n.top - y - l;
+        A >= 4 ? o = A : o = Math.max(4, L - y - 4);
+      } else
+        o = Math.max(4, L - y - 4);
+    o < 4 && (o = 4), X({ top: o, left: s, width: P });
+  }, [x, l, M]);
+  lt(() => {
+    e && b();
+  }, [e, b, H]), h(() => {
+    if (!e) return;
+    const t = () => {
+      b();
+    };
+    window.addEventListener("resize", t), window.addEventListener("scroll", t, !0);
+    const r = () => {
+      window.removeEventListener("resize", t), window.removeEventListener("scroll", t, !0);
+    };
+    p.current.push(r);
+  }, [e, b]), h(() => {
+    if (!e) return;
+    const t = (o) => {
+      const s = o.target;
+      R.current != null && f.current != null && !R.current.contains(s) && !f.current.contains(s) && d();
+    }, r = (o) => {
+      o.key === "Escape" && (d(), C.current?.focus());
+    };
+    document.addEventListener("mousedown", t), document.addEventListener("keydown", r);
+    const n = () => {
+      document.removeEventListener("mousedown", t), document.removeEventListener("keydown", r);
+    };
+    p.current.push(n);
+  }, [e, d]), h(() => {
+    if (!e) return;
+    f.current?.querySelector(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    )?.focus();
+  }, [e]), h(() => {
+    if (!e || !F) return;
+    const t = (n) => {
+      f.current?.contains(n.target) && d();
+    };
+    document.addEventListener("click", t, { capture: !0 });
+    const r = () => {
+      document.removeEventListener("click", t, { capture: !0 });
+    };
+    p.current.push(r);
+  }, [e, F, d]), h(() => () => {
+    p.current.forEach((t) => {
+      t();
+    }), p.current = [];
+  }, []);
+  let i = c;
+  if (typeof c == "function" && (i = c(e)), !ut(i))
+    throw new Error("Dropdown trigger must be a React element.");
+  const S = typeof i.type == "string", Z = S && i.type === "button";
+  if (!(S || typeof i.type == "function" || wt(i.type)))
+    throw new Error(
+      "Dropdown trigger must be a DOM element or component that accepts a ref."
+    );
+  const E = i.props.ref ?? i.ref, tt = (t) => {
+    C.current = t, typeof E == "function" ? E(t) : E != null && (E.current = t);
+  }, m = i.props, et = (t) => {
+    m.onClick?.(t), !t.defaultPrevented && K();
+  }, nt = (t) => {
+    m.onKeyDown?.(t), !t.defaultPrevented && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), K());
+  }, u = {
+    onClick: et,
+    "aria-haspopup": "menu",
+    "aria-expanded": e
+  };
+  k != null && k !== "" && (u["aria-label"] = k), Z ? m.type == null && (u.type = "button") : (u.onKeyDown = nt, m.role == null && (u.role = "button"), m.tabIndex == null && (u.tabIndex = 0)), u.ref = tt;
+  let j = {};
+  g != null && (j = {
+    top: g.top,
+    left: g.left,
+    width: g.width
+  });
+  const ot = G ?? document.body, rt = {
+    close: d,
+    open: Y,
+    isOpen: e
+  };
+  let B = null;
+  return e && (B = at(
+    /* @__PURE__ */ N(
+      "div",
+      {
+        ref: f,
+        role: "menu",
+        className: $(
+          pt,
+          dt,
+          U
+        ),
+        style: j,
+        children: H
+      }
+    ),
+    ot
+  )), /* @__PURE__ */ st(q.Provider, { value: rt, children: [
+    /* @__PURE__ */ N("div", { className: $(mt, I), ref: R, children: ft(i, u) }),
+    B
+  ] });
+};
+export {
+  kt as Dropdown,
+  xt as useDropdown
+};
+//# sourceMappingURL=Dropdown.js.map