@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-QIKPGMMO.js

@@ -0,0 +1,160 @@
+import {
+  PillControl
+} from "./chunk-SN2YMCTL.js";
+import {
+  PanelRangeField
+} from "./chunk-AJ5SDHX5.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  TableFilter
+} from "./chunk-HXEBKOSM.js";
+import {
+  StackedModal
+} from "./chunk-IL7JZKXY.js";
+import {
+  StackedModalContent
+} from "./chunk-RWTFZ7J5.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-filter-panel.tsx
+import Box from "@mui/material/Box/index.js";
+import Link from "@mui/material/Link/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function PillField({
+  field,
+  selected,
+  testIdPrefix,
+  onTogglePill,
+  onClearField
+}) {
+  const testId = `${testIdPrefix}-filter-${field.id}`;
+  if (field.searchEnabled || field.control === "multiselect" || field.control === "category") {
+    return /* @__PURE__ */ jsx(
+      PillControl,
+      {
+        fieldId: field.id,
+        pill: field,
+        selected,
+        onTogglePill,
+        onClearField,
+        testIdPrefix,
+        layout: "stacked"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    TableFilter.CheckboxField,
+    {
+      label: field.label,
+      options: field.options,
+      selected: new Set(selected),
+      onToggle: (value, checked) => onTogglePill(field.id, value, checked),
+      testId
+    }
+  );
+}
+function FilterControls({
+  testIdPrefix,
+  search,
+  fields,
+  rangeFields,
+  pills,
+  ranges,
+  onSearchChange,
+  onTogglePill,
+  onChangeRange,
+  onClearField
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TableFilter.Keyword,
+      {
+        value: search,
+        onChange: onSearchChange,
+        label: copy.search.allColumnsLabel,
+        placeholder: copy.search.keywordPlaceholder,
+        testId: `${testIdPrefix}-search-all`
+      }
+    ),
+    (fields.length > 0 || rangeFields.length > 0) && /* @__PURE__ */ jsxs(TableFilter.Section, { title: copy.filters.panelTitle, children: [
+      fields.map((field) => /* @__PURE__ */ jsx(
+        PillField,
+        {
+          field,
+          selected: pills[field.id] ?? [],
+          testIdPrefix,
+          onTogglePill,
+          onClearField
+        },
+        field.id
+      )),
+      rangeFields.map((field) => /* @__PURE__ */ jsx(
+        PanelRangeField,
+        {
+          field,
+          value: ranges[field.id] ?? {},
+          onChange: (range) => onChangeRange(field.id, range),
+          testId: `${testIdPrefix}-range-${field.id}`
+        },
+        field.id
+      ))
+    ] })
+  ] });
+}
+function GridFilterPanel(props) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(
+    TableFilter.Panel,
+    {
+      onClearAll: props.onClearAll,
+      clearTestId: `${props.testIdPrefix}-clear-filters`,
+      ariaLabel: copy.filters.panelTitle,
+      children: /* @__PURE__ */ jsx(FilterControls, { ...props })
+    }
+  );
+}
+function FilterDialog({
+  open,
+  onClose,
+  ...props
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(
+    StackedModal,
+    {
+      open,
+      onClose,
+      navigationTitle: copy.filters.panelTitle,
+      backLabel: copy.nav.goBack,
+      modalId: `${props.testIdPrefix}-filters`,
+      maxWidth: "xs",
+      dataTestId: `${props.testIdPrefix}-filter-dialog`,
+      children: /* @__PURE__ */ jsx(StackedModalContent, { children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 2.5 }, children: [
+        /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx(
+          Link,
+          {
+            component: "button",
+            type: "button",
+            underline: "hover",
+            onClick: props.onClearAll,
+            "data-testid": `${props.testIdPrefix}-clear-filters`,
+            sx: { fontSize: sxRem(12), color: "text.secondary" },
+            children: copy.filters.clearAllFilters
+          }
+        ) }),
+        /* @__PURE__ */ jsx(FilterControls, { ...props })
+      ] }) })
+    }
+  );
+}
+
+export {
+  GridFilterPanel,
+  FilterDialog
+};
+//# sourceMappingURL=chunk-QIKPGMMO.js.map

package/dist/chunk-QIKPGMMO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-filter-panel.tsx"],"sourcesContent":["\"use client\";\n\nimport Box from \"@mui/material/Box/index.js\";\nimport Link from \"@mui/material/Link/index.js\";\n\nimport { StackedModal, StackedModalContent } from \"../../feedback/StackedModal\";\nimport { TableFilter } from \"../../layout/TableFilter\";\n\nimport { PillControl } from \"./data-views-category-pill\";\nimport { PanelRangeField } from \"./data-views-range-pill\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport type {\n  FilterFieldConfig,\n  RangeFieldConfig,\n  RangeValue,\n} from \"./data-views-types\";\nimport { sxRem } from \"../../../tokens/relative\";\n\n/* ── Filter panel ────────────────────────────────────────────────────────── */\n\nexport interface GridFilterPanelProps<T extends Record<string, unknown>> {\n  testIdPrefix: string;\n  search: string;\n  fields: FilterFieldConfig<T>[];\n  rangeFields: RangeFieldConfig<T>[];\n  pills: Record<string, string[]>;\n  ranges: Record<string, RangeValue>;\n  onSearchChange: (value: string) => void;\n  onTogglePill: (fieldId: string, value: string, checked: boolean) => void;\n  onChangeRange: (fieldId: string, range: RangeValue) => void;\n  onClearField: (fieldId: string) => void;\n  onClearAll: () => void;\n}\n\n/** One pill field: a compact multi-select for long lists, else a checkbox list. */\nfunction PillField<T extends Record<string, unknown>>({\n  field,\n  selected,\n  testIdPrefix,\n  onTogglePill,\n  onClearField,\n}: {\n  field: FilterFieldConfig<T>;\n  selected: string[];\n  testIdPrefix: string;\n  onTogglePill: (fieldId: string, value: string, checked: boolean) => void;\n  onClearField: (fieldId: string) => void;\n}): React.JSX.Element {\n  const testId = `${testIdPrefix}-filter-${field.id}`;\n  // `searchEnabled` forces the searchable multi-select; a plain `multiselect`\n  // keeps the auto \"search only when the list is long\" rule. `category` is the\n  // hierarchical tree — see PillControl.\n  if (field.searchEnabled || field.control === \"multiselect\" || field.control === \"category\") {\n    return (\n      <PillControl\n        fieldId={field.id}\n        pill={field}\n        selected={selected}\n        onTogglePill={onTogglePill}\n        onClearField={onClearField}\n        testIdPrefix={testIdPrefix}\n        layout=\"stacked\"\n      />\n    );\n  }\n  return (\n    <TableFilter.CheckboxField\n      label={field.label}\n      options={field.options}\n      selected={new Set(selected)}\n      onToggle={(value, checked) => onTogglePill(field.id, value, checked)}\n      testId={testId}\n    />\n  );\n}\n\n/** The filter controls (keyword + pill facets + numeric ranges), surface-agnostic. */\nfunction FilterControls<T extends Record<string, unknown>>({\n  testIdPrefix,\n  search,\n  fields,\n  rangeFields,\n  pills,\n  ranges,\n  onSearchChange,\n  onTogglePill,\n  onChangeRange,\n  onClearField,\n}: Omit<GridFilterPanelProps<T>, \"onClearAll\">): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <>\n      <TableFilter.Keyword\n        value={search}\n        onChange={onSearchChange}\n        label={copy.search.allColumnsLabel}\n        placeholder={copy.search.keywordPlaceholder}\n        testId={`${testIdPrefix}-search-all`}\n      />\n      {(fields.length > 0 || rangeFields.length > 0) && (\n        <TableFilter.Section title={copy.filters.panelTitle}>\n          {fields.map((field) => (\n            <PillField\n              key={field.id}\n              field={field}\n              selected={pills[field.id] ?? []}\n              testIdPrefix={testIdPrefix}\n              onTogglePill={onTogglePill}\n              onClearField={onClearField}\n            />\n          ))}\n          {rangeFields.map((field) => (\n            <PanelRangeField\n              key={field.id}\n              field={field}\n              value={ranges[field.id] ?? {}}\n              onChange={(range) => onChangeRange(field.id, range)}\n              testId={`${testIdPrefix}-range-${field.id}`}\n            />\n          ))}\n        </TableFilter.Section>\n      )}\n    </>\n  );\n}\n\n/** The slide-in filter panel: keyword + checkbox facets + numeric ranges. */\nexport function GridFilterPanel<T extends Record<string, unknown>>(\n  props: GridFilterPanelProps<T>,\n): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <TableFilter.Panel\n      onClearAll={props.onClearAll}\n      clearTestId={`${props.testIdPrefix}-clear-filters`}\n      ariaLabel={copy.filters.panelTitle}\n    >\n      <FilterControls {...props} />\n    </TableFilter.Panel>\n  );\n}\n\n/** Props for the modal filter surface used below the inline breakpoint. */\ninterface FilterDialogProps<T extends Record<string, unknown>> extends GridFilterPanelProps<T> {\n  open: boolean;\n  onClose: () => void;\n}\n\n/**\n * The same filter controls in a centered modal — used on smaller screens where the\n * slide-in panel would overlap the table. The \"Filtros\" toolbar button opens it.\n */\nexport function FilterDialog<T extends Record<string, unknown>>({\n  open,\n  onClose,\n  ...props\n}: FilterDialogProps<T>): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <StackedModal\n      open={open}\n      onClose={onClose}\n      navigationTitle={copy.filters.panelTitle}\n      backLabel={copy.nav.goBack}\n      modalId={`${props.testIdPrefix}-filters`}\n      maxWidth=\"xs\"\n      dataTestId={`${props.testIdPrefix}-filter-dialog`}\n    >\n      <StackedModalContent>\n        <Box sx={{ display: \"flex\", flexDirection: \"column\", gap: 2.5 }}>\n          <Box sx={{ display: \"flex\", justifyContent: \"flex-end\" }}>\n            <Link\n              component=\"button\"\n              type=\"button\"\n              underline=\"hover\"\n              onClick={props.onClearAll}\n              data-testid={`${props.testIdPrefix}-clear-filters`}\n              sx={{ fontSize: sxRem(12), color: \"text.secondary\" }}\n            >\n              {copy.filters.clearAllFilters}\n            </Link>\n          </Box>\n          <FilterControls {...props} />\n        </Box>\n      </StackedModalContent>\n    </StackedModal>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-QKMJUOVH.js

@@ -0,0 +1,51 @@
+import {
+  ICON_PATHS
+} from "./chunk-KEVPUBOE.js";
+import {
+  iconFill
+} from "./chunk-QWBQVQRG.js";
+import {
+  iconSize
+} from "./chunk-RTSK5OZT.js";
+import {
+  useUiTheme
+} from "./chunk-A4OCNJWW.js";
+import {
+  resolveTestId
+} from "./chunk-TYJR4GOF.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/icons/Icon.tsx
+import SvgIcon from "@mui/material/SvgIcon/index.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Icon = React.forwardRef(
+  ({ name, size, color, label, className, style, ...rest }, ref) => {
+    const theme = useUiTheme();
+    const fill = iconFill(theme, color, "currentColor");
+    const testId = resolveTestId(rest, `icon-${name}`);
+    return /* @__PURE__ */ jsx(
+      SvgIcon,
+      {
+        ref,
+        viewBox: "0 0 24 24",
+        className,
+        style,
+        sx: { fontSize: sxRem(iconSize(size)), color: fill },
+        titleAccess: label,
+        "aria-hidden": label ? void 0 : true,
+        "data-testid": testId,
+        "data-icon": name,
+        children: ICON_PATHS[name].map((d) => /* @__PURE__ */ jsx("path", { d }, d))
+      }
+    );
+  }
+);
+Icon.displayName = "Icon";
+
+export {
+  Icon
+};
+//# sourceMappingURL=chunk-QKMJUOVH.js.map

package/dist/chunk-QKMJUOVH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icons/Icon.tsx"],"sourcesContent":["import SvgIcon from '@mui/material/SvgIcon/index.js';\nimport * as React from 'react';\n\nimport { iconFill } from './icon-color';\nimport { iconSize, type IconBaseProps } from './Icon.types';\nimport { ICON_PATHS } from './paths.generated';\nimport { resolveTestId } from '../platform/test-id';\nimport { sxRem } from '../tokens/relative';\nimport { useUiTheme } from '../provider/use-ui-theme';\n\nexport interface IconProps extends IconBaseProps {\n  className?: string;\n  style?: React.CSSProperties;\n}\n\n/**\n * The web `Icon`: MUI's `SvgIcon` drawing the generated path, so a glyph named\n * here is pixel-for-pixel the one `@mui/icons-material` would draw — and the one\n * the native `Icon` draws from the same path data.\n */\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ name, size, color, label, className, style, ...rest }, ref) => {\n    const theme = useUiTheme();\n    const fill = iconFill(theme, color, 'currentColor');\n    const testId = resolveTestId(rest, `icon-${name}`);\n\n    return (\n      <SvgIcon\n        ref={ref}\n        viewBox=\"0 0 24 24\"\n        className={className}\n        style={style}\n        sx={{ fontSize: sxRem(iconSize(size)), color: fill }}\n        titleAccess={label}\n        aria-hidden={label ? undefined : true}\n        data-testid={testId}\n        data-icon={name}\n      >\n        {ICON_PATHS[name].map((d) => (\n          <path key={d} d={d} />\n        ))}\n      </SvgIcon>\n    );\n  },\n);\n\nIcon.displayName = 'Icon';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,OAAO,aAAa;AACpB,YAAY,WAAW;AAsCb;AAnBH,IAAM,OAAa;AAAA,EACxB,CAAC,EAAE,MAAM,MAAM,OAAO,OAAO,WAAW,OAAO,GAAG,KAAK,GAAG,QAAQ;AAChE,UAAM,QAAQ,WAAW;AACzB,UAAM,OAAO,SAAS,OAAO,OAAO,cAAc;AAClD,UAAM,SAAS,cAAc,MAAM,QAAQ,IAAI,EAAE;AAEjD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,IAAI,EAAE,UAAU,MAAM,SAAS,IAAI,CAAC,GAAG,OAAO,KAAK;AAAA,QACnD,aAAa;AAAA,QACb,eAAa,QAAQ,SAAY;AAAA,QACjC,eAAa;AAAA,QACb,aAAW;AAAA,QAEV,qBAAW,IAAI,EAAE,IAAI,CAAC,MACrB,oBAAC,UAAa,KAAH,CAAS,CACrB;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;","names":[]}

package/dist/chunk-QOLIBVGS.js

@@ -0,0 +1,53 @@
+import {
+  useCardActions
+} from "./chunk-NSKQANRY.js";
+import {
+  ConfirmActionDialog
+} from "./chunk-BJZOBG24.js";
+import {
+  useConfirmAction
+} from "./chunk-EMYESBIT.js";
+
+// src/components/data-display/CardKit/use-remove-confirm.tsx
+import { jsx } from "react/jsx-runtime";
+function useRemoveConfirm({
+  write,
+  title,
+  entityName,
+  description,
+  confirmText,
+  fallbackError,
+  dataTestId,
+  copy
+}) {
+  const { onRefresh, notifyError } = useCardActions();
+  const state = useConfirmAction(async () => {
+    const result = await write();
+    if (!result.ok) {
+      const message = result.error ?? fallbackError;
+      notifyError(message);
+      throw new Error(message);
+    }
+    onRefresh();
+  }, fallbackError);
+  return {
+    request: state.request,
+    dialog: /* @__PURE__ */ jsx(
+      ConfirmActionDialog,
+      {
+        state,
+        copy,
+        title,
+        entityName,
+        description,
+        confirmText,
+        dataTestId
+      }
+    )
+  };
+}
+
+export {
+  useRemoveConfirm
+};
+//# sourceMappingURL=chunk-QOLIBVGS.js.map

package/dist/chunk-QY4XNTNG.js

@@ -0,0 +1,98 @@
+import {
+  sizeStyles
+} from "./chunk-7DN4UXJ3.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/Menubar/Menubar.item.tsx
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import Chip from "@mui/material/Chip/index.js";
+import Divider from "@mui/material/Divider/index.js";
+import ListItemIcon from "@mui/material/ListItemIcon/index.js";
+import ListItemText from "@mui/material/ListItemText/index.js";
+import Menu from "@mui/material/Menu/index.js";
+import MenuItem from "@mui/material/MenuItem/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DropdownItem = ({
+  child,
+  onActivate
+}) => child.divider ? /* @__PURE__ */ jsx(Divider, {}) : /* @__PURE__ */ jsxs(MenuItem, { onClick: () => onActivate(child), disabled: child.disabled, children: [
+  child.icon && /* @__PURE__ */ jsx(ListItemIcon, { children: child.icon }),
+  /* @__PURE__ */ jsx(ListItemText, { children: child.label }),
+  child.shortcut && /* @__PURE__ */ jsx(
+    Chip,
+    {
+      label: child.shortcut,
+      size: "small",
+      variant: "outlined",
+      sx: { ml: 2, height: 20, fontSize: sxRem(11.2) }
+    }
+  )
+] });
+var MenubarItemView = ({
+  item,
+  size,
+  disabled,
+  isOpen,
+  anchorEl,
+  onOpen,
+  onActivate,
+  onClose,
+  onFocus,
+  onBlur
+}) => {
+  const theme = useTheme();
+  const hasChildren = Boolean(item.children && item.children.length > 0);
+  const activate = (target) => {
+    if (hasChildren) {
+      onOpen(item.id, target);
+    } else {
+      onActivate(item);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        "data-testid": `menubar-button-${item.id}`,
+        onClick: (e) => activate(e.currentTarget),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            activate(e.currentTarget);
+          }
+        },
+        onMouseDown: (e) => e.preventDefault(),
+        onFocus,
+        onBlur,
+        disabled: item.disabled || disabled,
+        startIcon: item.icon,
+        endIcon: hasChildren ? /* @__PURE__ */ jsx(KeyboardArrowDownIcon, {}) : null,
+        "aria-haspopup": hasChildren ? "menu" : void 0,
+        "aria-expanded": hasChildren ? isOpen : void 0,
+        sx: { color: "inherit", textTransform: "none", ...sizeStyles(theme, size) },
+        children: item.label
+      }
+    ),
+    hasChildren && /* @__PURE__ */ jsx(
+      Menu,
+      {
+        anchorEl,
+        open: isOpen,
+        onClose,
+        autoFocus: true,
+        PaperProps: { sx: { minWidth: 200, mt: 1 } },
+        children: item.children?.map((child) => /* @__PURE__ */ jsx(DropdownItem, { child, onActivate }, child.id))
+      }
+    )
+  ] });
+};
+
+export {
+  MenubarItemView
+};
+//# sourceMappingURL=chunk-QY4XNTNG.js.map

package/dist/chunk-QY4XNTNG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Menubar/Menubar.item.tsx"],"sourcesContent":["import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Chip from '@mui/material/Chip/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { sizeStyles } from './Menubar.styles';\nimport type { MenubarItem, MenubarProps } from './Menubar.types';\nimport { sxRem } from '../../../tokens/relative';\n\nexport interface MenubarItemViewProps {\n  item: MenubarItem;\n  size: NonNullable<MenubarProps['size']>;\n  disabled: boolean;\n  isOpen: boolean;\n  anchorEl: HTMLElement | null;\n  onOpen: (itemId: string, anchorEl: HTMLElement) => void;\n  onActivate: (item: MenubarItem) => void;\n  onClose: () => void;\n  onFocus?: React.FocusEventHandler;\n  onBlur?: React.FocusEventHandler;\n}\n\n/** One row of an open menu: its icon, its label, and its shortcut hint. */\nconst DropdownItem: React.FC<{ child: MenubarItem; onActivate: (item: MenubarItem) => void }> = ({\n  child,\n  onActivate,\n}) =>\n  child.divider ? (\n    <Divider />\n  ) : (\n    <MenuItem onClick={() => onActivate(child)} disabled={child.disabled}>\n      {child.icon && <ListItemIcon>{child.icon}</ListItemIcon>}\n      <ListItemText>{child.label}</ListItemText>\n      {child.shortcut && (\n        <Chip\n          label={child.shortcut}\n          size=\"small\"\n          variant=\"outlined\"\n          sx={{ ml: 2, height: 20, fontSize: sxRem(11.2) }}\n        />\n      )}\n    </MenuItem>\n  );\n\n/**\n * A top-level menubar entry. An entry with children opens its dropdown; one\n * without acts immediately — a decision the click and keyboard paths both need,\n * so it is made once here rather than in each handler.\n */\nexport const MenubarItemView: React.FC<MenubarItemViewProps> = ({\n  item,\n  size,\n  disabled,\n  isOpen,\n  anchorEl,\n  onOpen,\n  onActivate,\n  onClose,\n  onFocus,\n  onBlur,\n}) => {\n  const theme = useTheme();\n  const hasChildren = Boolean(item.children && item.children.length > 0);\n\n  const activate = (target: HTMLElement) => {\n    if (hasChildren) {\n      onOpen(item.id, target);\n    } else {\n      onActivate(item);\n    }\n  };\n\n  return (\n    <Box>\n      <Button\n        data-testid={`menubar-button-${item.id}`}\n        onClick={(e) => activate(e.currentTarget)}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            activate(e.currentTarget);\n          }\n        }}\n        // Keeping focus on mousedown is what lets handleMenuClose return it here.\n        onMouseDown={(e) => e.preventDefault()}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        disabled={item.disabled || disabled}\n        startIcon={item.icon}\n        endIcon={hasChildren ? <KeyboardArrowDownIcon /> : null}\n        aria-haspopup={hasChildren ? 'menu' : undefined}\n        aria-expanded={hasChildren ? isOpen : undefined}\n        sx={{ color: 'inherit', textTransform: 'none', ...sizeStyles(theme, size) }}\n      >\n        {item.label}\n      </Button>\n\n      {hasChildren && (\n        <Menu\n          anchorEl={anchorEl}\n          open={isOpen}\n          onClose={onClose}\n          autoFocus\n          PaperProps={{ sx: { minWidth: 200, mt: 1 } }}\n        >\n          {item.children?.map((child) => (\n            <DropdownItem key={child.id} child={child} onActivate={onActivate} />\n          ))}\n        </Menu>\n      )}\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;AAAA,OAAO,2BAA2B;AAClC,OAAO,SAAS;AAChB,OAAO,YAAY;AACnB,OAAO,UAAU;AACjB,OAAO,aAAa;AACpB,OAAO,kBAAkB;AACzB,OAAO,kBAAkB;AACzB,OAAO,UAAU;AACjB,OAAO,cAAc;AACrB,SAAS,gBAAgB;AA0BrB,cAEA,YAFA;AALJ,IAAM,eAA0F,CAAC;AAAA,EAC/F;AAAA,EACA;AACF,MACE,MAAM,UACJ,oBAAC,WAAQ,IAET,qBAAC,YAAS,SAAS,MAAM,WAAW,KAAK,GAAG,UAAU,MAAM,UACzD;AAAA,QAAM,QAAQ,oBAAC,gBAAc,gBAAM,MAAK;AAAA,EACzC,oBAAC,gBAAc,gBAAM,OAAM;AAAA,EAC1B,MAAM,YACL;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,MAAM;AAAA,MACb,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,IAAI,EAAE,IAAI,GAAG,QAAQ,IAAI,UAAU,MAAM,IAAI,EAAE;AAAA;AAAA,EACjD;AAAA,GAEJ;AAQG,IAAM,kBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,cAAc,QAAQ,KAAK,YAAY,KAAK,SAAS,SAAS,CAAC;AAErE,QAAM,WAAW,CAAC,WAAwB;AACxC,QAAI,aAAa;AACf,aAAO,KAAK,IAAI,MAAM;AAAA,IACxB,OAAO;AACL,iBAAW,IAAI;AAAA,IACjB;AAAA,EACF;AAEA,SACE,qBAAC,OACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,kBAAkB,KAAK,EAAE;AAAA,QACtC,SAAS,CAAC,MAAM,SAAS,EAAE,aAAa;AAAA,QACxC,WAAW,CAAC,MAAM;AAChB,cAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,cAAE,eAAe;AACjB,qBAAS,EAAE,aAAa;AAAA,UAC1B;AAAA,QACF;AAAA,QAEA,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,QACrC;AAAA,QACA;AAAA,QACA,UAAU,KAAK,YAAY;AAAA,QAC3B,WAAW,KAAK;AAAA,QAChB,SAAS,cAAc,oBAAC,yBAAsB,IAAK;AAAA,QACnD,iBAAe,cAAc,SAAS;AAAA,QACtC,iBAAe,cAAc,SAAS;AAAA,QACtC,IAAI,EAAE,OAAO,WAAW,eAAe,QAAQ,GAAG,WAAW,OAAO,IAAI,EAAE;AAAA,QAEzE,eAAK;AAAA;AAAA,IACR;AAAA,IAEC,eACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAM;AAAA,QACN;AAAA,QACA,WAAS;AAAA,QACT,YAAY,EAAE,IAAI,EAAE,UAAU,KAAK,IAAI,EAAE,EAAE;AAAA,QAE1C,eAAK,UAAU,IAAI,CAAC,UACnB,oBAAC,gBAA4B,OAAc,cAAxB,MAAM,EAA0C,CACpE;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/chunk-R2WMSXQR.js

@@ -0,0 +1,183 @@
+import {
+  buildBadgeContent
+} from "./chunk-2FM5SUQV.js";
+import {
+  badgeStyles,
+  getAnchorOrigin
+} from "./chunk-KJDBY2KN.js";
+import {
+  badgeContentOf,
+  definedAria,
+  formatCount,
+  resolveBadgeProps
+} from "./chunk-6C5D6O3D.js";
+import {
+  CLOSE_DELAY_MS,
+  MOUNT_ANIMATION_MS
+} from "./chunk-PYC4CWCQ.js";
+import {
+  resolveTestId
+} from "./chunk-TYJR4GOF.js";
+
+// src/components/data-display/Badge/Badge.tsx
+import MuiBadge from "@mui/material/Badge/index.js";
+import Zoom from "@mui/material/Zoom/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import React, { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var StyledBadge = styled(MuiBadge, {
+  shouldForwardProp: (prop) => ![
+    "customVariant",
+    "customSize",
+    "customColor",
+    "glow",
+    "pulse",
+    "animate",
+    "shimmer",
+    "bounce",
+    "hasIcon"
+  ].includes(prop)
+})(({
+  theme,
+  customVariant,
+  customSize = "md",
+  customColor = "primary",
+  glow,
+  pulse,
+  animate,
+  shimmer,
+  bounce,
+  hasIcon
+}) => {
+  return badgeStyles({
+    theme,
+    customVariant,
+    customSize,
+    customColor,
+    glow,
+    pulse,
+    animate,
+    shimmer,
+    bounce,
+    hasIcon
+  });
+});
+var useMountAnimation = (enabled) => {
+  const [isAnimating, setIsAnimating] = useState(false);
+  useEffect(() => {
+    if (!enabled) return;
+    setIsAnimating(true);
+    const timer = window.setTimeout(() => setIsAnimating(false), MOUNT_ANIMATION_MS);
+    return () => window.clearTimeout(timer);
+  }, [enabled]);
+  return isAnimating;
+};
+var BadgeSurface = ({ innerRef, isVisible, isAnimating, shouldBeInvisible, finalBadgeContent, aria, rest, ...p }) => {
+  const testId = p["data-testid"];
+  return /* @__PURE__ */ jsx(Zoom, { in: isVisible, timeout: CLOSE_DELAY_MS, children: /* @__PURE__ */ jsx(
+    StyledBadge,
+    {
+      ref: innerRef,
+      className: p.className,
+      customVariant: p.variant,
+      customSize: p.size,
+      customColor: p.color,
+      glow: p.glow,
+      pulse: p.pulse,
+      animate: p.animate,
+      shimmer: p.shimmer,
+      bounce: p.bounce && isAnimating,
+      hasIcon: Boolean(p.icon),
+      badgeContent: finalBadgeContent,
+      variant: p.variant === "dot" ? "dot" : "standard",
+      anchorOrigin: getAnchorOrigin(p.position),
+      invisible: shouldBeInvisible,
+      "data-testid": testId || "badge",
+      slotProps: {
+        badge: {
+          ...aria,
+          // @ts-expect-error - MUI Badge slotProps doesn't include data-testid in types, but it works at runtime
+          "data-testid": testId ? `${testId}-content-wrapper` : "badge-content-wrapper"
+        }
+      },
+      ...rest,
+      children: p.children
+    }
+  ) });
+};
+var Badge = React.forwardRef((componentProps, ref) => {
+  const resolved = resolveBadgeProps(componentProps);
+  const {
+    variant,
+    size,
+    color: _color,
+    glow: _glow,
+    pulse: _pulse,
+    animate,
+    shimmer: _shimmer,
+    bounce,
+    max,
+    showZero,
+    position: _position,
+    children: _children,
+    invisible,
+    closable,
+    onClose,
+    icon,
+    "aria-label": ariaLabel,
+    "aria-live": ariaLive = "polite",
+    "aria-atomic": ariaAtomic = true,
+    "data-testid": _domTestId,
+    // The house and React Native spellings of the same id; they name the
+    // component on both sides and must not reach the DOM as attributes.
+    testID: _testID,
+    dataTestId: _dataTestId,
+    className: _className,
+    content: _content,
+    badgeContent: _badgeContent,
+    ...props
+  } = resolved;
+  const [isVisible, setIsVisible] = useState(true);
+  const isAnimating = useMountAnimation(animate || bounce);
+  const handleClose = (event) => {
+    event.stopPropagation();
+    setIsVisible(false);
+    window.setTimeout(() => onClose?.(), CLOSE_DELAY_MS);
+  };
+  const badgeId = resolveTestId(resolved);
+  const rawContent = badgeContentOf(resolved);
+  const finalBadgeContent = buildBadgeContent({
+    variant,
+    size,
+    icon,
+    closable,
+    dataTestId: badgeId,
+    baseContent: variant === "count" ? formatCount(rawContent, { max, showZero }) : rawContent,
+    onClose: handleClose
+  });
+  const shouldBeInvisible = invisible || variant === "count" && finalBadgeContent === null && !showZero || !isVisible;
+  return /* @__PURE__ */ jsx(
+    BadgeSurface,
+    {
+      ...resolved,
+      "data-testid": badgeId,
+      innerRef: ref,
+      isVisible,
+      isAnimating,
+      shouldBeInvisible,
+      finalBadgeContent,
+      aria: definedAria({
+        "aria-label": ariaLabel,
+        "aria-live": ariaLive,
+        "aria-atomic": ariaAtomic
+      }),
+      rest: props
+    }
+  );
+});
+Badge.displayName = "Badge";
+
+export {
+  Badge
+};
+//# sourceMappingURL=chunk-R2WMSXQR.js.map

package/dist/chunk-R75DZ3AK.js

@@ -0,0 +1,81 @@
+import {
+  StepConnectorComponent,
+  StepContentComponent,
+  StepIndicatorComponent,
+  StepItemRow
+} from "./chunk-OATHOXIU.js";
+
+// src/components/utility/WorkflowStep/WorkflowStepRow.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var StepRow = ({
+  step,
+  index,
+  isLast,
+  orientation,
+  variant,
+  color,
+  size,
+  showNumbers,
+  showIcons,
+  showProgress,
+  completedIcon,
+  errorIcon,
+  interactive,
+  animated,
+  disabled,
+  onClick,
+  dataTestId
+}) => {
+  const isCompleted = step.status === "completed";
+  return /* @__PURE__ */ jsxs(StepItemRow, { orientation, isLast, children: [
+    /* @__PURE__ */ jsx(
+      StepIndicatorComponent,
+      {
+        step,
+        index,
+        isActive: step.status === "current",
+        isCompleted,
+        isError: step.status === "error",
+        variant,
+        color,
+        size,
+        showNumbers,
+        showIcons,
+        completedIcon,
+        errorIcon,
+        interactive,
+        animated,
+        disabled,
+        onClick,
+        "data-testid": `${dataTestId}-indicator-${index}`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StepContentComponent,
+      {
+        step,
+        index,
+        orientation,
+        interactive,
+        disabled,
+        onClick,
+        "data-testid": `${dataTestId}-content-${index}`
+      }
+    ),
+    showProgress && !isLast && /* @__PURE__ */ jsx(
+      StepConnectorComponent,
+      {
+        isCompleted,
+        orientation,
+        variant,
+        color,
+        "data-testid": `${dataTestId}-connector-${index}`
+      }
+    )
+  ] });
+};
+
+export {
+  StepRow
+};
+//# sourceMappingURL=chunk-R75DZ3AK.js.map