@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-GJRKWDRR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Chip/Chip.styles.tsx"],"sourcesContent":["import Avatar from '@mui/material/Avatar/index.js';\nimport type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport type { KeyboardEvent, ReactElement } from 'react';\nimport React from 'react';\n\nimport { chipKeyAction, type ChipKeyArgs } from './Chip.helpers';\nimport { CHIP_SIZES, CHIP_TRANSITION_EASING, CHIP_TRANSITION_MS, HOVER_LIFT_PX, HOVER_SHADOW } from './Chip.metrics';\nimport type { ChipProps } from './Chip.types';\nimport { shadowInk } from '../../../tokens/ink';\nimport { rem, rems, sxRem } from '../../../tokens/relative';\n\n/**\n * A chip is not a native control, so the two keyboard conventions it stands in\n * for are wired by hand: Delete/Backspace removes it, Enter/Space activates it.\n * The DECISION is `chipKeyAction`, which the native half reads too.\n */\nexport const makeKeyDownHandler =\n  (args: ChipKeyArgs & { onClick?: () => void; onDelete?: () => void }) =>\n  (event: KeyboardEvent): void => {\n    const action = chipKeyAction(event.key, args);\n    if (action === null) return;\n    event.preventDefault();\n    if (action === 'delete') {\n      args.onDelete?.();\n      return;\n    }\n    args.onClick?.();\n  };\n\nexport const avatarFor = (\n  avatar: ChipProps['avatar'],\n  avatarSrc?: string,\n): ReactElement | undefined => {\n  if (avatar && React.isValidElement(avatar)) {\n    return avatar;\n  }\n  if (avatarSrc) {\n    const { avatarSize } = CHIP_SIZES.medium;\n    return <Avatar src={avatarSrc} sx={{ width: sxRem(avatarSize), height: sxRem(avatarSize) }} />;\n  }\n  return undefined;\n};\n\ninterface ChipStyleArgs {\n  variant: ChipProps['variant'];\n  selected?: boolean;\n  clickable?: boolean;\n  disabled?: boolean;\n}\n\n/** The lift's shadow, per mode — the same numbers the native chip reads. */\nconst hoverShadow = (theme: Theme): string =>\n  `0 ${rems(theme, HOVER_SHADOW.offsetY, HOVER_SHADOW.blur)} ${shadowInk(\n    theme,\n    theme.palette.mode === 'dark' ? HOVER_SHADOW.alphaDark : HOVER_SHADOW.alphaLight,\n  )}`;\n\n/**\n * Selection styling uses SEMANTIC palette tokens (not hardcoded rgba). A filled\n * selected chip keeps MUI's solid `color.main` + contrast text (clear active\n * state); an outlined selected chip gets a subtle theme-driven `action.selected`\n * tint so it reads as active without muddying the fill.\n */\nexport const chipStyles = ({\n  variant,\n  selected,\n  clickable,\n  disabled,\n}: ChipStyleArgs): SxProps<Theme> => {\n  const lifts = clickable && !disabled;\n\n  return {\n    // Enhanced styling for outlined variant\n    ...(variant === 'outlined' && {\n      borderWidth: '1px',\n      borderStyle: 'solid',\n      backgroundColor: 'transparent',\n    }),\n    ...(selected &&\n      variant === 'outlined' && {\n        backgroundColor: (theme: Theme) => theme.palette.action.selected,\n      }),\n    '&:hover': {\n      ...(lifts && {\n        transform: (theme: Theme) => `translateY(${rem(theme, -HOVER_LIFT_PX)})`,\n        boxShadow: (theme: Theme) => hoverShadow(theme),\n      }),\n    },\n    '&:active': {\n      ...(lifts && {\n        transform: 'translateY(0px)',\n      }),\n    },\n    transition: `all ${CHIP_TRANSITION_MS / 1000}s ${CHIP_TRANSITION_EASING}`,\n  };\n};\n\nexport const iconWithTestId = (\n  icon: ChipProps['icon'],\n  testId: string,\n): ReactElement | undefined =>\n  icon && React.isValidElement(icon)\n    ? React.cloneElement(icon as ReactElement, {\n        'data-testid': testId,\n      } as Record<string, unknown>)\n    : undefined;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,OAAO,YAAY;AAGnB,OAAO,WAAW;AAmCP;AAtBJ,IAAM,qBACX,CAAC,SACD,CAAC,UAA+B;AAC9B,QAAM,SAAS,cAAc,MAAM,KAAK,IAAI;AAC5C,MAAI,WAAW,KAAM;AACrB,QAAM,eAAe;AACrB,MAAI,WAAW,UAAU;AACvB,SAAK,WAAW;AAChB;AAAA,EACF;AACA,OAAK,UAAU;AACjB;AAEK,IAAM,YAAY,CACvB,QACA,cAC6B;AAC7B,MAAI,UAAU,MAAM,eAAe,MAAM,GAAG;AAC1C,WAAO;AAAA,EACT;AACA,MAAI,WAAW;AACb,UAAM,EAAE,WAAW,IAAI,WAAW;AAClC,WAAO,oBAAC,UAAO,KAAK,WAAW,IAAI,EAAE,OAAO,MAAM,UAAU,GAAG,QAAQ,MAAM,UAAU,EAAE,GAAG;AAAA,EAC9F;AACA,SAAO;AACT;AAUA,IAAM,cAAc,CAAC,UACnB,KAAK,KAAK,OAAO,aAAa,SAAS,aAAa,IAAI,CAAC,IAAI;AAAA,EAC3D;AAAA,EACA,MAAM,QAAQ,SAAS,SAAS,aAAa,YAAY,aAAa;AACxE,CAAC;AAQI,IAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqC;AACnC,QAAM,QAAQ,aAAa,CAAC;AAE5B,SAAO;AAAA;AAAA,IAEL,GAAI,YAAY,cAAc;AAAA,MAC5B,aAAa;AAAA,MACb,aAAa;AAAA,MACb,iBAAiB;AAAA,IACnB;AAAA,IACA,GAAI,YACF,YAAY,cAAc;AAAA,MACxB,iBAAiB,CAAC,UAAiB,MAAM,QAAQ,OAAO;AAAA,IAC1D;AAAA,IACF,WAAW;AAAA,MACT,GAAI,SAAS;AAAA,QACX,WAAW,CAAC,UAAiB,cAAc,IAAI,OAAO,CAAC,aAAa,CAAC;AAAA,QACrE,WAAW,CAAC,UAAiB,YAAY,KAAK;AAAA,MAChD;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,GAAI,SAAS;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,YAAY,OAAO,qBAAqB,GAAI,KAAK,sBAAsB;AAAA,EACzE;AACF;AAEO,IAAM,iBAAiB,CAC5B,MACA,WAEA,QAAQ,MAAM,eAAe,IAAI,IAC7B,MAAM,aAAa,MAAsB;AAAA,EACvC,eAAe;AACjB,CAA4B,IAC5B;","names":[]}

package/dist/chunk-GVLZZCSX.js

@@ -0,0 +1,38 @@
+import {
+  AddressFallbackField
+} from "./chunk-YESTO24O.js";
+import {
+  AddressAutocompleteField
+} from "./chunk-7ZG7T2YN.js";
+import {
+  useAddressAutocomplete
+} from "./chunk-WC3W36AM.js";
+import {
+  resolveAddressProps
+} from "./chunk-MTGEJRE4.js";
+
+// src/components/form/AddressAutocomplete/AddressAutocomplete.tsx
+import LocationIcon from "@mui/icons-material/LocationOn";
+import { jsx } from "react/jsx-runtime";
+var AddressAutocomplete = (componentProps) => {
+  const resolved = resolveAddressProps(componentProps);
+  const { defaultValue, googleMapsApiKey, restrictions, onSelect, icon = /* @__PURE__ */ jsx(LocationIcon, {}) } = resolved;
+  const fieldProps = { ...resolved, icon };
+  const state = useAddressAutocomplete({
+    defaultValue,
+    googleMapsApiKey,
+    restrictions,
+    onSelect
+  });
+  if (!state.isLoaded || state.mapsError) {
+    return /* @__PURE__ */ jsx(AddressFallbackField, { ...fieldProps, mapsError: state.mapsError });
+  }
+  return /* @__PURE__ */ jsx(AddressAutocompleteField, { ...fieldProps, ...state });
+};
+var AddressAutocomplete_default = AddressAutocomplete;
+
+export {
+  AddressAutocomplete,
+  AddressAutocomplete_default
+};
+//# sourceMappingURL=chunk-GVLZZCSX.js.map

package/dist/chunk-GW64UQXI.js

@@ -0,0 +1,213 @@
+import {
+  DashboardAction,
+  DashboardActions,
+  DashboardExport,
+  DashboardFilterToggle,
+  DashboardInfo,
+  DashboardSettings,
+  DashboardSpacer
+} from "./chunk-V3LOHY4N.js";
+import {
+  DashboardContext,
+  useDashboardContext
+} from "./chunk-CUMSPE6B.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/layout/Dashboard/Dashboard.tsx
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import FilterIcon from "@mui/icons-material/FilterListRounded";
+import NavigateNextIcon from "@mui/icons-material/NavigateNext";
+import Box from "@mui/material/Box/index.js";
+import MuiBreadcrumbs from "@mui/material/Breadcrumbs/index.js";
+import Button from "@mui/material/Button/index.js";
+import Collapse from "@mui/material/Collapse/index.js";
+import MuiLink from "@mui/material/Link/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import React, { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SLOT_ORDER = ["breadcrumb", "header", "filters", "body"];
+function markDashboardSlot(component, slot) {
+  component.dashboardSlot = slot;
+  return component;
+}
+var Root = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(2),
+  width: "100%"
+}));
+function slotRank(node) {
+  if (React.isValidElement(node)) {
+    const slot = node.type.dashboardSlot;
+    if (slot) {
+      const rank = SLOT_ORDER.indexOf(slot);
+      if (rank >= 0) {
+        return rank;
+      }
+    }
+  }
+  return SLOT_ORDER.length;
+}
+var Dashboard = ({
+  children,
+  defaultFiltersVisible = true,
+  activeFilterCount = 0,
+  testIdPrefix = "dashboard",
+  className
+}) => {
+  const [filtersVisible, setFiltersVisible] = useState(defaultFiltersVisible);
+  const [moreFiltersOpen, setMoreFiltersOpen] = useState(false);
+  const value = useMemo(
+    () => ({
+      filtersVisible,
+      toggleFilters: () => setFiltersVisible((v) => !v),
+      moreFiltersOpen,
+      toggleMoreFilters: () => setMoreFiltersOpen((v) => !v),
+      activeFilterCount,
+      testIdPrefix
+    }),
+    [filtersVisible, moreFiltersOpen, activeFilterCount, testIdPrefix]
+  );
+  const ordered = useMemo(() => {
+    const arr = React.Children.toArray(children);
+    return arr.map((node, index) => ({ node, index, rank: slotRank(node) })).sort((a, b) => a.rank === b.rank ? a.index - b.index : a.rank - b.rank).map((entry) => entry.node);
+  }, [children]);
+  return /* @__PURE__ */ jsx(DashboardContext.Provider, { value, children: /* @__PURE__ */ jsx(Root, { className, "data-testid": testIdPrefix, children: ordered }) });
+};
+Dashboard.displayName = "Dashboard";
+var DashboardBreadcrumb = ({
+  items,
+  renderLink,
+  className
+}) => {
+  const { testIdPrefix } = useDashboardContext();
+  return /* @__PURE__ */ jsx(
+    MuiBreadcrumbs,
+    {
+      separator: /* @__PURE__ */ jsx(NavigateNextIcon, { fontSize: "small" }),
+      className,
+      "aria-label": "breadcrumb",
+      "data-testid": `${testIdPrefix}-breadcrumb`,
+      sx: { fontSize: sxRem(14), color: "text.secondary" },
+      children: items.map((item, index) => {
+        const isLast = index === items.length - 1;
+        if (isLast || !item.href) {
+          return /* @__PURE__ */ jsx(
+            Typography,
+            {
+              component: "span",
+              sx: { fontSize: sxRem(14), color: isLast ? "text.primary" : "text.secondary" },
+              "aria-current": isLast ? "page" : void 0,
+              children: item.label
+            },
+            `${item.label}-${index}`
+          );
+        }
+        const linkContent = item.label;
+        if (renderLink) {
+          return /* @__PURE__ */ jsx(React.Fragment, { children: renderLink(item, linkContent) }, `${item.label}-${index}`);
+        }
+        return /* @__PURE__ */ jsx(
+          MuiLink,
+          {
+            href: item.href,
+            underline: "hover",
+            color: "inherit",
+            sx: { fontSize: sxRem(14) },
+            children: linkContent
+          },
+          `${item.label}-${index}`
+        );
+      })
+    }
+  );
+};
+DashboardBreadcrumb.displayName = "Dashboard.Breadcrumb";
+DashboardBreadcrumb.dashboardSlot = "breadcrumb";
+var DashboardHeader = ({ title, children, className }) => {
+  const { testIdPrefix } = useDashboardContext();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      "data-testid": `${testIdPrefix}-header`,
+      sx: { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap", minHeight: 40 },
+      children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "h1", sx: { fontWeight: 600, mr: 0.5 }, children: title }),
+        children
+      ]
+    }
+  );
+};
+DashboardHeader.displayName = "Dashboard.Header";
+DashboardHeader.dashboardSlot = "header";
+var DashboardFilters = ({ children, className }) => {
+  const { filtersVisible, testIdPrefix } = useDashboardContext();
+  return /* @__PURE__ */ jsx(Collapse, { in: filtersVisible, unmountOnExit: true, "data-testid": `${testIdPrefix}-filters`, children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      className,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 1.5,
+        p: 2,
+        borderRadius: 1,
+        border: 1,
+        borderColor: "divider",
+        bgcolor: "action.hover"
+      },
+      children
+    }
+  ) });
+};
+DashboardFilters.displayName = "Dashboard.Filters";
+DashboardFilters.dashboardSlot = "filters";
+var DashboardMoreFilters = ({ children, label = "More filters" }) => {
+  const { moreFiltersOpen, toggleMoreFilters, testIdPrefix } = useDashboardContext();
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "text",
+        size: "small",
+        startIcon: /* @__PURE__ */ jsx(FilterIcon, { fontSize: "small" }),
+        endIcon: moreFiltersOpen ? /* @__PURE__ */ jsx(ExpandLessIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx(ExpandMoreIcon, { fontSize: "small" }),
+        onClick: toggleMoreFilters,
+        "aria-expanded": moreFiltersOpen,
+        "data-testid": `${testIdPrefix}-more-filters-toggle`,
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(Collapse, { in: moreFiltersOpen, unmountOnExit: true, "data-testid": `${testIdPrefix}-more-filters-panel`, children: /* @__PURE__ */ jsx(Box, { sx: { mt: 1.5, p: 2, borderRadius: 1, border: 1, borderColor: "divider", bgcolor: "background.paper" }, children }) })
+  ] });
+};
+DashboardMoreFilters.displayName = "Dashboard.MoreFilters";
+var DashboardBody = ({ children, className }) => {
+  const { testIdPrefix } = useDashboardContext();
+  return /* @__PURE__ */ jsx(Box, { className, "data-testid": `${testIdPrefix}-body`, children });
+};
+DashboardBody.displayName = "Dashboard.Body";
+DashboardBody.dashboardSlot = "body";
+Dashboard.Breadcrumb = DashboardBreadcrumb;
+Dashboard.Header = DashboardHeader;
+Dashboard.Spacer = DashboardSpacer;
+Dashboard.Info = DashboardInfo;
+Dashboard.FilterToggle = DashboardFilterToggle;
+Dashboard.Settings = DashboardSettings;
+Dashboard.Export = DashboardExport;
+Dashboard.Action = DashboardAction;
+Dashboard.Actions = DashboardActions;
+Dashboard.Filters = DashboardFilters;
+Dashboard.MoreFilters = DashboardMoreFilters;
+Dashboard.Body = DashboardBody;
+
+export {
+  markDashboardSlot,
+  Dashboard
+};
+//# sourceMappingURL=chunk-GW64UQXI.js.map

package/dist/chunk-GW64UQXI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Dashboard/Dashboard.tsx"],"sourcesContent":["'use client';\n\nimport ExpandLessIcon from '@mui/icons-material/ExpandLess';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\nimport FilterIcon from '@mui/icons-material/FilterListRounded';\nimport NavigateNextIcon from '@mui/icons-material/NavigateNext';\nimport Box from '@mui/material/Box/index.js';\nimport MuiBreadcrumbs from '@mui/material/Breadcrumbs/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Collapse from '@mui/material/Collapse/index.js';\nimport MuiLink from '@mui/material/Link/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport React, { useMemo, useState } from 'react';\n\nimport { DashboardContext, useDashboardContext } from './DashboardContext';\nimport {\n  DashboardAction,\n  DashboardActions,\n  DashboardExport,\n  DashboardFilterToggle,\n  DashboardInfo,\n  DashboardSettings,\n  DashboardSpacer,\n} from './DashboardParts';\nimport type {\n  DashboardBodyProps,\n  DashboardBreadcrumbProps,\n  DashboardFiltersProps,\n  DashboardHeaderProps,\n  DashboardMoreFiltersProps,\n  DashboardProps,\n} from './Dashboard.types';\nimport { sxRem } from '../../../tokens/relative';\n\n/**\n * Ordered slot keys. The root reorders composed children into this sequence so\n * authoring order in JSX never matters — a `<Dashboard.Filters>` placed above\n * a `<Dashboard.Header>` still renders below it.\n */\nconst SLOT_ORDER = ['breadcrumb', 'header', 'filters', 'body'] as const;\n/** A slot a component can occupy in the canonical Dashboard order. */\nexport type DashboardSlot = (typeof SLOT_ORDER)[number];\n\n/** Marker attached to each sub-component so the root can rank it by slot. */\ntype SlottedComponent = { dashboardSlot?: DashboardSlot };\n\n/**\n * Tag a component with the Dashboard slot it occupies so the root ranks it in\n * canonical order. The root inspects only its DIRECT children's `type`, so a\n * page that wraps a `<Dashboard.Header>` (or any part) in its own component MUST\n * mark that wrapper — otherwise it counts as an unrecognised child and sinks\n * below the body. Returns the component for convenient inline use.\n *\n * @example\n * ```tsx\n * function ProductsHeader(props) {\n *   return <Dashboard.Header title=\"Products\">{/* … *\\/}</Dashboard.Header>;\n * }\n * markDashboardSlot(ProductsHeader, 'header');\n * ```\n */\nexport function markDashboardSlot<T>(component: T, slot: DashboardSlot): T {\n  (component as SlottedComponent).dashboardSlot = slot;\n  return component;\n}\n\nconst Root = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  width: '100%',\n}));\n\nfunction slotRank(node: React.ReactNode): number {\n  if (React.isValidElement(node)) {\n    const slot = (node.type as SlottedComponent).dashboardSlot;\n    if (slot) {\n      const rank = SLOT_ORDER.indexOf(slot);\n      if (rank >= 0) {\n        return rank;\n      }\n    }\n  }\n  // Unknown / arbitrary children keep their relative position after the\n  // recognised slots.\n  return SLOT_ORDER.length;\n}\n\n/**\n * Composable page shell. `<Dashboard>` provides shared state through context\n * and renders whichever sub-components you compose — nothing is implied. Drop\n * in only the parts you need; omit `<Dashboard.Filters>` and there is simply no\n * filter UI.\n *\n * @example\n * ```tsx\n * <Dashboard activeFilterCount={2}>\n *   <Dashboard.Breadcrumb items={[{ label: 'Admin', href: '/admin' }, { label: 'Products' }]} />\n *   <Dashboard.Header title=\"Products\">\n *     <Dashboard.Info>What this page does…</Dashboard.Info>\n *     <Dashboard.FilterToggle />\n *     <Dashboard.Settings>In development</Dashboard.Settings>\n *     <Dashboard.Spacer />\n *     <Dashboard.Export onExport={handleExport} />\n *     <Dashboard.Action><Button variant=\"contained\">New product</Button></Dashboard.Action>\n *   </Dashboard.Header>\n *   <Dashboard.Filters>{/* search + pills *\\/}</Dashboard.Filters>\n *   <Dashboard.Body>{table}</Dashboard.Body>\n * </Dashboard>\n * ```\n */\nexport const Dashboard = ({\n  children,\n  defaultFiltersVisible = true,\n  activeFilterCount = 0,\n  testIdPrefix = 'dashboard',\n  className,\n}: DashboardProps): React.JSX.Element => {\n  const [filtersVisible, setFiltersVisible] = useState(defaultFiltersVisible);\n  const [moreFiltersOpen, setMoreFiltersOpen] = useState(false);\n\n  const value = useMemo(\n    () => ({\n      filtersVisible,\n      toggleFilters: () => setFiltersVisible((v) => !v),\n      moreFiltersOpen,\n      toggleMoreFilters: () => setMoreFiltersOpen((v) => !v),\n      activeFilterCount,\n      testIdPrefix,\n    }),\n    [filtersVisible, moreFiltersOpen, activeFilterCount, testIdPrefix],\n  );\n\n  // Stable sort recognised slots into canonical order, preserving the original\n  // order of anything unrecognised.\n  const ordered = useMemo(() => {\n    const arr = React.Children.toArray(children);\n    return arr\n      .map((node, index) => ({ node, index, rank: slotRank(node) }))\n      .sort((a, b) => (a.rank === b.rank ? a.index - b.index : a.rank - b.rank))\n      .map((entry) => entry.node);\n  }, [children]);\n\n  return (\n    <DashboardContext.Provider value={value}>\n      <Root className={className} data-testid={testIdPrefix}>\n        {ordered}\n      </Root>\n    </DashboardContext.Provider>\n  );\n};\n\nDashboard.displayName = 'Dashboard';\n\n/* -------------------------------------------------------------------------- */\n/* Breadcrumb                                                                 */\n/* -------------------------------------------------------------------------- */\n\nconst DashboardBreadcrumb = ({\n  items,\n  renderLink,\n  className,\n}: DashboardBreadcrumbProps): React.JSX.Element => {\n  const { testIdPrefix } = useDashboardContext();\n  return (\n    <MuiBreadcrumbs\n      separator={<NavigateNextIcon fontSize=\"small\" />}\n      className={className}\n      aria-label=\"breadcrumb\"\n      data-testid={`${testIdPrefix}-breadcrumb`}\n      sx={{ fontSize: sxRem(14), color: 'text.secondary' }}\n    >\n      {items.map((item, index) => {\n        const isLast = index === items.length - 1;\n        if (isLast || !item.href) {\n          return (\n            <Typography\n              key={`${item.label}-${index}`}\n              component=\"span\"\n              sx={{ fontSize: sxRem(14), color: isLast ? 'text.primary' : 'text.secondary' }}\n              aria-current={isLast ? 'page' : undefined}\n            >\n              {item.label}\n            </Typography>\n          );\n        }\n        const linkContent = item.label;\n        if (renderLink) {\n          return <React.Fragment key={`${item.label}-${index}`}>{renderLink(item, linkContent)}</React.Fragment>;\n        }\n        return (\n          <MuiLink\n            key={`${item.label}-${index}`}\n            href={item.href}\n            underline=\"hover\"\n            color=\"inherit\"\n            sx={{ fontSize: sxRem(14) }}\n          >\n            {linkContent}\n          </MuiLink>\n        );\n      })}\n    </MuiBreadcrumbs>\n  );\n};\nDashboardBreadcrumb.displayName = 'Dashboard.Breadcrumb';\n(DashboardBreadcrumb as SlottedComponent).dashboardSlot = 'breadcrumb';\n\n/* -------------------------------------------------------------------------- */\n/* Header + action parts                                                      */\n/* -------------------------------------------------------------------------- */\n\nconst DashboardHeader = ({ title, children, className }: DashboardHeaderProps): React.JSX.Element => {\n  const { testIdPrefix } = useDashboardContext();\n  return (\n    <Box\n      className={className}\n      data-testid={`${testIdPrefix}-header`}\n      sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap', minHeight: 40 }}\n    >\n      <Typography variant=\"h5\" component=\"h1\" sx={{ fontWeight: 600, mr: 0.5 }}>\n        {title}\n      </Typography>\n      {children}\n    </Box>\n  );\n};\nDashboardHeader.displayName = 'Dashboard.Header';\n(DashboardHeader as SlottedComponent).dashboardSlot = 'header';\n\n/** Flexible spacer — everything composed after it is pushed to the right. */\n/* -------------------------------------------------------------------------- */\n/* Filters                                                                    */\n/* -------------------------------------------------------------------------- */\n\nconst DashboardFilters = ({ children, className }: DashboardFiltersProps): React.JSX.Element => {\n  const { filtersVisible, testIdPrefix } = useDashboardContext();\n  return (\n    <Collapse in={filtersVisible} unmountOnExit data-testid={`${testIdPrefix}-filters`}>\n      <Box\n        className={className}\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: 1.5,\n          p: 2,\n          borderRadius: 1,\n          border: 1,\n          borderColor: 'divider',\n          bgcolor: 'action.hover',\n        }}\n      >\n        {children}\n      </Box>\n    </Collapse>\n  );\n};\nDashboardFilters.displayName = 'Dashboard.Filters';\n(DashboardFilters as SlottedComponent).dashboardSlot = 'filters';\n\nconst DashboardMoreFilters = ({ children, label = 'More filters' }: DashboardMoreFiltersProps): React.JSX.Element => {\n  const { moreFiltersOpen, toggleMoreFilters, testIdPrefix } = useDashboardContext();\n  return (\n    <Box>\n      <Button\n        variant=\"text\"\n        size=\"small\"\n        startIcon={<FilterIcon fontSize=\"small\" />}\n        endIcon={moreFiltersOpen ? <ExpandLessIcon fontSize=\"small\" /> : <ExpandMoreIcon fontSize=\"small\" />}\n        onClick={toggleMoreFilters}\n        aria-expanded={moreFiltersOpen}\n        data-testid={`${testIdPrefix}-more-filters-toggle`}\n      >\n        {label}\n      </Button>\n      <Collapse in={moreFiltersOpen} unmountOnExit data-testid={`${testIdPrefix}-more-filters-panel`}>\n        <Box sx={{ mt: 1.5, p: 2, borderRadius: 1, border: 1, borderColor: 'divider', bgcolor: 'background.paper' }}>\n          {children}\n        </Box>\n      </Collapse>\n    </Box>\n  );\n};\nDashboardMoreFilters.displayName = 'Dashboard.MoreFilters';\n\n/* -------------------------------------------------------------------------- */\n/* Body                                                                       */\n/* -------------------------------------------------------------------------- */\n\nconst DashboardBody = ({ children, className }: DashboardBodyProps): React.JSX.Element => {\n  const { testIdPrefix } = useDashboardContext();\n  return (\n    <Box className={className} data-testid={`${testIdPrefix}-body`}>\n      {children}\n    </Box>\n  );\n};\nDashboardBody.displayName = 'Dashboard.Body';\n(DashboardBody as SlottedComponent).dashboardSlot = 'body';\n\n/* -------------------------------------------------------------------------- */\n/* Attach sub-components as dot-notation parts                                */\n/* -------------------------------------------------------------------------- */\n\nDashboard.Breadcrumb = DashboardBreadcrumb;\nDashboard.Header = DashboardHeader;\nDashboard.Spacer = DashboardSpacer;\nDashboard.Info = DashboardInfo;\nDashboard.FilterToggle = DashboardFilterToggle;\nDashboard.Settings = DashboardSettings;\nDashboard.Export = DashboardExport;\nDashboard.Action = DashboardAction;\nDashboard.Actions = DashboardActions;\nDashboard.Filters = DashboardFilters;\nDashboard.MoreFilters = DashboardMoreFilters;\nDashboard.Body = DashboardBody;\n"],"mappings":"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","names":[]}

package/dist/chunk-GXCOXJS3.js

@@ -0,0 +1,41 @@
+import {
+  useFormContext
+} from "./chunk-4XK6JQ4D.js";
+import {
+  ToggleGroup
+} from "./chunk-HC5ZSCRG.js";
+import {
+  FormControl,
+  FormLabel,
+  FormMessage
+} from "./chunk-2HVNPWFV.js";
+
+// src/components/form/total-form/Fields/ToggleField.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ToggleField({ name, options, label }) {
+  const { values, errors, setFieldValue } = useFormContext();
+  const error = errors[name];
+  const testId = `total-form-field-${name}`;
+  return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, children: [
+    label && /* @__PURE__ */ jsx(FormLabel, { htmlFor: name, error: Boolean(error), children: label }),
+    /* @__PURE__ */ jsx(
+      ToggleGroup,
+      {
+        variant: "exclusive",
+        options,
+        value: values[name] ?? "",
+        fullWidth: true,
+        dataTestId: testId,
+        onChange: (_event, next) => {
+          if (typeof next === "string") setFieldValue(name, next);
+        }
+      }
+    ),
+    error && /* @__PURE__ */ jsx(FormMessage, { error: true, dataTestId: `${testId}-message`, children: error })
+  ] });
+}
+
+export {
+  ToggleField
+};
+//# sourceMappingURL=chunk-GXCOXJS3.js.map

package/dist/chunk-GY4NBSCN.js

@@ -0,0 +1,120 @@
+import {
+  fieldTextFieldStyles
+} from "./chunk-CGO452DC.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-day-input.tsx
+import TextField from "@mui/material/TextField/index.js";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var SEGMENT_WIDTH = { year: 4, month: 2, day: 2 };
+function segmentsOf(mask) {
+  const tokens = mask.split(/[^A-Za-z]+/).filter(Boolean);
+  if (tokens.length !== 3) return ["day", "month", "year"];
+  const segments = tokens.map((token) => {
+    const head = token.slice(0, 1).toLowerCase();
+    if (head === "y" || head === "a") return "year";
+    return head === "m" ? "month" : "day";
+  });
+  return new Set(segments).size === 3 ? segments : ["day", "month", "year"];
+}
+var separatorOf = (mask) => mask.replace(/[A-Za-z]/g, "").slice(0, 1) || "/";
+function isoToMasked(iso, mask) {
+  const parts = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
+  if (!parts) return "";
+  const value = {
+    year: parts[1],
+    month: parts[2],
+    day: parts[3]
+  };
+  return segmentsOf(mask).map((segment) => value[segment]).join(separatorOf(mask));
+}
+function maskedToIso(text, mask) {
+  const segments = segmentsOf(mask);
+  const digits = text.replace(/\D/g, "");
+  if (digits.length !== 8) return "";
+  const value = {};
+  let cursor = 0;
+  for (const segment of segments) {
+    value[segment] = digits.slice(cursor, cursor + SEGMENT_WIDTH[segment]);
+    cursor += SEGMENT_WIDTH[segment];
+  }
+  const year = Number(value.year);
+  const month = Number(value.month);
+  const day = Number(value.day);
+  if (year < 1e3) return "";
+  const probe = new Date(Date.UTC(year, month - 1, day));
+  if (probe.getUTCMonth() !== month - 1 || probe.getUTCDate() !== day) return "";
+  return `${value.year}-${value.month}-${value.day}`;
+}
+function maskDate(raw, mask) {
+  const segments = segmentsOf(mask);
+  const separator = separatorOf(mask);
+  const digits = raw.replace(/\D/g, "").slice(0, 8);
+  const out = [];
+  let cursor = 0;
+  for (const segment of segments) {
+    if (cursor >= digits.length) break;
+    out.push(digits.slice(cursor, cursor + SEGMENT_WIDTH[segment]));
+    cursor += SEGMENT_WIDTH[segment];
+  }
+  return out.join(separator);
+}
+function dayInputProps(testId, describedBy) {
+  return {
+    "data-testid": testId,
+    maxLength: 10,
+    inputMode: "numeric",
+    autoComplete: "off",
+    ...describedBy ? { "aria-describedby": describedBy } : {}
+  };
+}
+function DayBoundInput({
+  label,
+  value,
+  onChange,
+  testId,
+  error = false,
+  describedBy,
+  mask
+}) {
+  const applied = value ?? "";
+  const [text, setText] = useState(() => isoToMasked(applied, mask));
+  useEffect(() => {
+    setText(
+      (current) => maskedToIso(current, mask) === applied ? current : isoToMasked(applied, mask)
+    );
+  }, [applied, mask]);
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      size: "small",
+      type: "text",
+      label,
+      error,
+      placeholder: mask,
+      value: text,
+      onChange: (event) => {
+        const next = maskDate(event.target.value, mask);
+        setText(next);
+        if (next === "") return onChange(void 0);
+        const iso = maskedToIso(next, mask);
+        if (iso) onChange(iso);
+      },
+      onBlur: () => setText(isoToMasked(applied, mask)),
+      InputLabelProps: { shrink: true },
+      inputProps: dayInputProps(testId, describedBy),
+      sx: [{ width: sxRem(165) }, fieldTextFieldStyles]
+    }
+  );
+}
+
+export {
+  isoToMasked,
+  maskedToIso,
+  maskDate,
+  DayBoundInput
+};
+//# sourceMappingURL=chunk-GY4NBSCN.js.map

package/dist/chunk-GY4NBSCN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-day-input.tsx"],"sourcesContent":["'use client';\n\n/**\n * A day bound as a MASKED `dd/mm/aaaa` text field, replacing `<input type=\"date\">`.\n *\n * The native control is three separate segments wearing one box. Typing a date\n * means filling a segment, being jumped to the next, and starting over — and\n * which segment comes first is the BROWSER's locale, not ours, so the same\n * field reads `dd/mm/aaaa` for one merchant and `mm/dd/yyyy` for the next with\n * nothing in our code saying which. There is no way to type a date as one\n * continuous run of digits, which is how people actually type dates.\n *\n * A mask gives that back: eight digits straight through, separators inserted as\n * you go, backspace walking back through them.\n *\n * Measured, driving both controls in Chromium with the same eight keystrokes\n * (`01072026`, one `keydown` at a time):\n *\n *   native  →  field ends EMPTY, no filter applied, 0 requests\n *   masked  →  field reads `01/07/2026`, filter applied, 1 request\n *\n * The native result is the whole complaint: you type a date and nothing lands.\n *\n * The second half of the fix is WHEN the bound is written. A partially-typed\n * year is itself a valid date — `2026` passes through `0002`, `0020`, `0202` on\n * the way — so committing on every keystroke would send the grid off to fetch\n * years nobody meant. A bound is written only once the text is a WHOLE, real\n * date, which is what keeps the run above at one request rather than four.\n */\nimport TextField from '@mui/material/TextField/index.js';\nimport React, { useEffect, useState } from 'react';\nimport { fieldTextFieldStyles } from '../../../tokens/field-height';\nimport { sxRem } from '../../../tokens/relative';\n\n\n/**\n * THE MASK IS THE ORDER, and both halves of this file read it.\n *\n * The placeholder a host supplies (`copy.filters.dayMask` — `dd/mm/aaaa` for\n * pt-BR, `mm/dd/yyyy` for en-US) is not decoration: it tells the reader which\n * segment comes first. Everything below therefore derives the segment order\n * FROM that same string, so the shape on screen and the shape the parser\n * expects cannot disagree.\n *\n * They did disagree, and the failure was silent in the worst direction. The\n * mask/parse pair was hardcoded day-first (the `Br` in the old names was\n * accurate) while the placeholder followed the copy pack — so under `en-US` the\n * field ASKED for `mm/dd/yyyy`, and a reader who typed exactly that got a day\n * of 12 and a month of 31, which is not a date, which commits nothing. No\n * error, no filter, a full list that reads like an answer. The en-US pack's own\n * comment already said the mask \"is the shape that gets a date entered\n * backwards\"; nothing enforced it.\n */\n\n/** What one segment of a mask is, and how many digits it takes. */\ntype DaySegment = 'year' | 'month' | 'day';\nconst SEGMENT_WIDTH: Readonly<Record<DaySegment, number>> = { year: 4, month: 2, day: 2 };\n\n/**\n * The segments a mask asks for, in its own order.\n *\n * Keyed on each token's FIRST letter so one rule covers every spelling a host\n * might use — `aaaa`/`yyyy` for the year, `mm` for the month, `dd`/`tt` for the\n * day. An unreadable mask falls back to day-first rather than throwing: this\n * runs on every keystroke, and a field that renders is recoverable where one\n * that crashes the grid is not.\n */\nfunction segmentsOf(mask: string): readonly DaySegment[] {\n  const tokens = mask.split(/[^A-Za-z]+/).filter(Boolean);\n  if (tokens.length !== 3) return ['day', 'month', 'year'];\n  const segments = tokens.map((token): DaySegment => {\n    const head = token.slice(0, 1).toLowerCase();\n    if (head === 'y' || head === 'a') return 'year';\n    return head === 'm' ? 'month' : 'day';\n  });\n  // A mask naming the same segment twice describes no date. Fall back rather\n  // than build a parser that can never succeed.\n  return new Set(segments).size === 3 ? segments : ['day', 'month', 'year'];\n}\n\n/** The separator the mask uses, defaulting to `/`. */\nconst separatorOf = (mask: string): string => mask.replace(/[A-Za-z]/g, '').slice(0, 1) || '/';\n\n/** `AAAA-MM-DD` (the wire) → the mask's own order (what the reader sees). */\nexport function isoToMasked(iso: string, mask: string): string {\n  const parts = /^(\\d{4})-(\\d{2})-(\\d{2})$/.exec(iso);\n  if (!parts) return '';\n  const value: Record<DaySegment, string> = {\n    year: parts[1] as string,\n    month: parts[2] as string,\n    day: parts[3] as string,\n  };\n  return segmentsOf(mask)\n    .map((segment) => value[segment])\n    .join(separatorOf(mask));\n}\n\n/**\n * The mask's order → `AAAA-MM-DD`, but ONLY for a day that exists.\n *\n * `31/02/2026` parses fine as three numbers and is not a date, and `Date` would\n * silently roll it into March rather than reject it — so the round trip through\n * UTC is the check: if the month or day comes back changed, the input was not a\n * day.\n */\nexport function maskedToIso(text: string, mask: string): string {\n  const segments = segmentsOf(mask);\n  const digits = text.replace(/\\D/g, '');\n  if (digits.length !== 8) return '';\n  const value = {} as Record<DaySegment, string>;\n  let cursor = 0;\n  for (const segment of segments) {\n    value[segment] = digits.slice(cursor, cursor + SEGMENT_WIDTH[segment]);\n    cursor += SEGMENT_WIDTH[segment];\n  }\n  const year = Number(value.year);\n  const month = Number(value.month);\n  const day = Number(value.day);\n  if (year < 1000) return '';\n  const probe = new Date(Date.UTC(year, month - 1, day));\n  if (probe.getUTCMonth() !== month - 1 || probe.getUTCDate() !== day) return '';\n  return `${value.year}-${value.month}-${value.day}`;\n}\n\n/**\n * Digits only, capped at the mask's width, with the separators put back as you\n * type.\n *\n * Deriving the whole string from the digits — rather than editing the text in\n * place — is what makes backspace behave. Four digits of `dd/mm/aaaa` render as\n * `06/08`, not `06/08/`, so deleting the first digit of the year removes the\n * trailing separator with it instead of leaving a dead keystroke that changes\n * nothing.\n */\nexport function maskDate(raw: string, mask: string): string {\n  const segments = segmentsOf(mask);\n  const separator = separatorOf(mask);\n  const digits = raw.replace(/\\D/g, '').slice(0, 8);\n  const out: string[] = [];\n  let cursor = 0;\n  for (const segment of segments) {\n    if (cursor >= digits.length) break;\n    out.push(digits.slice(cursor, cursor + SEGMENT_WIDTH[segment]));\n    cursor += SEGMENT_WIDTH[segment];\n  }\n  return out.join(separator);\n}\n\n/**\n * What has to land on the `<input>` itself rather than on the `TextField`.\n *\n * Anything `TextField` does not recognise is spread onto its root `FormControl`\n * div. `inputMode` went up there once: the attribute sat on a non-editable\n * wrapper, meant nothing, and the phone went on offering the letter keyboard\n * for a field that only takes digits (the `dd/mm/aaaa` hint under a QWERTY\n * layout). Only the `<input>` this reaches decides which keypad opens — and the\n * same is true of `aria-describedby`, which on the wrapper points at a\n * description no screen reader will read out for the field.\n *\n * `numeric` and not `tel`: both raise a keypad, but the phone one is a dialler\n * with `+ * #` on it — keys that cannot occur in a date. A paste carrying\n * separators still lands, because the MASK is what filters the text; the keypad\n * only narrows what a thumb can reach for.\n *\n * Autofill off for the same reason: the browser's saved-value strip covers the\n * keypad to suggest names and addresses, none of which are a date, and none of\n * which the mask would keep.\n */\nfunction dayInputProps(testId: string, describedBy: string | undefined) {\n  return {\n    'data-testid': testId,\n    maxLength: 10,\n    inputMode: 'numeric' as const,\n    autoComplete: 'off',\n    ...(describedBy ? { 'aria-describedby': describedBy } : {}),\n  };\n}\n\n/**\n * One end of a day window. The BOUND stays `AAAA-MM-DD` — the form the backend's\n * inclusive day comparison already speaks, and the form the chip label reads —\n * so only the typing surface changes.\n */\nexport function DayBoundInput({\n  label,\n  value,\n  onChange,\n  testId,\n  error = false,\n  describedBy,\n  mask,\n}: {\n  label: string;\n  /** The applied bound, `AAAA-MM-DD`, or undefined when this end is open. */\n  value: string | undefined;\n  onChange: (bound: string | undefined) => void;\n  testId: string;\n  /**\n   * Paint the field as rejected. It only ever writes a real day by itself, so\n   * this is for a caller judging the PAIR: a window whose end precedes its\n   * start is two valid days and one impossible period, and the field it was\n   * typed into is the only place to say which half is being complained about.\n   */\n  error?: boolean;\n  /** Id of the element carrying that complaint, so it is read WITH the field. */\n  describedBy?: string;\n  /**\n   * The day mask, which IS the placeholder — so the expected ORDER is on\n   * screen before the first keystroke rather than discovered by getting it\n   * wrong. `dd/mm/aaaa` is one locale's order and one locale's letters.\n   *\n   * A PROP rather than a context read: this field has two callers, and only\n   * one of them is inside DataViews. `DateRangePicker` mounts it standalone\n   * with its own message table, so a context read here throws for every host\n   * of that picker — which is exactly what it did.\n   */\n  mask: string;\n}): React.JSX.Element {\n  const applied = value ?? '';\n  const [text, setText] = useState(() => isoToMasked(applied, mask));\n\n  // The bound is the APPLIED filter; `text` is what is being typed. Re-sync only\n  // when the applied value moved somewhere the text does not already mean — a\n  // \"Limpar\", a saved view, the other pill resetting the pair. Without that\n  // guard the field's own write bounces straight back mid-edit and resets the\n  // caret, which is the native control's worst habit reproduced by hand.\n  useEffect(() => {\n    setText((current) =>\n      maskedToIso(current, mask) === applied ? current : isoToMasked(applied, mask),\n    );\n  }, [applied, mask]);\n\n  return (\n    <TextField\n      size=\"small\"\n      type=\"text\"\n      label={label}\n      error={error}\n      placeholder={mask}\n      value={text}\n      onChange={(event) => {\n        const next = maskDate(event.target.value, mask);\n        setText(next);\n        // Emptying clears the bound. A COMPLETE day applies it. A partial one\n        // does NEITHER — it leaves whatever is applied alone, so typing is never\n        // fought and a half-typed year never reaches the backend.\n        if (next === '') return onChange(undefined);\n        const iso = maskedToIso(next, mask);\n        if (iso) onChange(iso);\n      }}\n      // Leaving a half-typed (or impossible) date on screen would show a filter\n      // the list is not actually using. On blur the field snaps back to what IS\n      // applied; a complete date already equals it, so this only ever tidies.\n      onBlur={() => setText(isoToMasked(applied, mask))}\n      // The placeholder occupies the space an un-shrunk label would render into.\n      InputLabelProps={{ shrink: true }}\n      inputProps={dayInputProps(testId, describedBy)}\n      sx={[{ width: sxRem(165) }, fieldTextFieldStyles]}\n    />\n  );\n}\n"],"mappings":";;;;;;;;AA6BA,OAAO,eAAe;AACtB,SAAgB,WAAW,gBAAgB;AA2MvC;AAjLJ,IAAM,gBAAsD,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,EAAE;AAWxF,SAAS,WAAW,MAAqC;AACvD,QAAM,SAAS,KAAK,MAAM,YAAY,EAAE,OAAO,OAAO;AACtD,MAAI,OAAO,WAAW,EAAG,QAAO,CAAC,OAAO,SAAS,MAAM;AACvD,QAAM,WAAW,OAAO,IAAI,CAAC,UAAsB;AACjD,UAAM,OAAO,MAAM,MAAM,GAAG,CAAC,EAAE,YAAY;AAC3C,QAAI,SAAS,OAAO,SAAS,IAAK,QAAO;AACzC,WAAO,SAAS,MAAM,UAAU;AAAA,EAClC,CAAC;AAGD,SAAO,IAAI,IAAI,QAAQ,EAAE,SAAS,IAAI,WAAW,CAAC,OAAO,SAAS,MAAM;AAC1E;AAGA,IAAM,cAAc,CAAC,SAAyB,KAAK,QAAQ,aAAa,EAAE,EAAE,MAAM,GAAG,CAAC,KAAK;AAGpF,SAAS,YAAY,KAAa,MAAsB;AAC7D,QAAM,QAAQ,4BAA4B,KAAK,GAAG;AAClD,MAAI,CAAC,MAAO,QAAO;AACnB,QAAM,QAAoC;AAAA,IACxC,MAAM,MAAM,CAAC;AAAA,IACb,OAAO,MAAM,CAAC;AAAA,IACd,KAAK,MAAM,CAAC;AAAA,EACd;AACA,SAAO,WAAW,IAAI,EACnB,IAAI,CAAC,YAAY,MAAM,OAAO,CAAC,EAC/B,KAAK,YAAY,IAAI,CAAC;AAC3B;AAUO,SAAS,YAAY,MAAc,MAAsB;AAC9D,QAAM,WAAW,WAAW,IAAI;AAChC,QAAM,SAAS,KAAK,QAAQ,OAAO,EAAE;AACrC,MAAI,OAAO,WAAW,EAAG,QAAO;AAChC,QAAM,QAAQ,CAAC;AACf,MAAI,SAAS;AACb,aAAW,WAAW,UAAU;AAC9B,UAAM,OAAO,IAAI,OAAO,MAAM,QAAQ,SAAS,cAAc,OAAO,CAAC;AACrE,cAAU,cAAc,OAAO;AAAA,EACjC;AACA,QAAM,OAAO,OAAO,MAAM,IAAI;AAC9B,QAAM,QAAQ,OAAO,MAAM,KAAK;AAChC,QAAM,MAAM,OAAO,MAAM,GAAG;AAC5B,MAAI,OAAO,IAAM,QAAO;AACxB,QAAM,QAAQ,IAAI,KAAK,KAAK,IAAI,MAAM,QAAQ,GAAG,GAAG,CAAC;AACrD,MAAI,MAAM,YAAY,MAAM,QAAQ,KAAK,MAAM,WAAW,MAAM,IAAK,QAAO;AAC5E,SAAO,GAAG,MAAM,IAAI,IAAI,MAAM,KAAK,IAAI,MAAM,GAAG;AAClD;AAYO,SAAS,SAAS,KAAa,MAAsB;AAC1D,QAAM,WAAW,WAAW,IAAI;AAChC,QAAM,YAAY,YAAY,IAAI;AAClC,QAAM,SAAS,IAAI,QAAQ,OAAO,EAAE,EAAE,MAAM,GAAG,CAAC;AAChD,QAAM,MAAgB,CAAC;AACvB,MAAI,SAAS;AACb,aAAW,WAAW,UAAU;AAC9B,QAAI,UAAU,OAAO,OAAQ;AAC7B,QAAI,KAAK,OAAO,MAAM,QAAQ,SAAS,cAAc,OAAO,CAAC,CAAC;AAC9D,cAAU,cAAc,OAAO;AAAA,EACjC;AACA,SAAO,IAAI,KAAK,SAAS;AAC3B;AAsBA,SAAS,cAAc,QAAgB,aAAiC;AACtE,SAAO;AAAA,IACL,eAAe;AAAA,IACf,WAAW;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd,GAAI,cAAc,EAAE,oBAAoB,YAAY,IAAI,CAAC;AAAA,EAC3D;AACF;AAOO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AACF,GA0BsB;AACpB,QAAM,UAAU,SAAS;AACzB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,MAAM,YAAY,SAAS,IAAI,CAAC;AAOjE,YAAU,MAAM;AACd;AAAA,MAAQ,CAAC,YACP,YAAY,SAAS,IAAI,MAAM,UAAU,UAAU,YAAY,SAAS,IAAI;AAAA,IAC9E;AAAA,EACF,GAAG,CAAC,SAAS,IAAI,CAAC;AAElB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,OAAO;AAAA,MACP,UAAU,CAAC,UAAU;AACnB,cAAM,OAAO,SAAS,MAAM,OAAO,OAAO,IAAI;AAC9C,gBAAQ,IAAI;AAIZ,YAAI,SAAS,GAAI,QAAO,SAAS,MAAS;AAC1C,cAAM,MAAM,YAAY,MAAM,IAAI;AAClC,YAAI,IAAK,UAAS,GAAG;AAAA,MACvB;AAAA,MAIA,QAAQ,MAAM,QAAQ,YAAY,SAAS,IAAI,CAAC;AAAA,MAEhD,iBAAiB,EAAE,QAAQ,KAAK;AAAA,MAChC,YAAY,cAAc,QAAQ,WAAW;AAAA,MAC7C,IAAI,CAAC,EAAE,OAAO,MAAM,GAAG,EAAE,GAAG,oBAAoB;AAAA;AAAA,EAClD;AAEJ;","names":[]}

package/dist/chunk-HAQMKV5P.js

@@ -0,0 +1,168 @@
+import {
+  FormControl,
+  FormLabel,
+  FormMessage
+} from "./chunk-2HVNPWFV.js";
+import {
+  fieldControlStyles
+} from "./chunk-CGO452DC.js";
+import {
+  fieldRadiusPx
+} from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7FDU3FIN.js";
+import {
+  stackedOverlayZIndex
+} from "./chunk-MFU4Y25U.js";
+
+// src/components/form/CreatableSelect/CreatableSelect.tsx
+import Autocomplete, { createFilterOptions } from "@mui/material/Autocomplete/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import TextField from "@mui/material/TextField/index.js";
+import { useId, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var CREATE_PREFIX = " create:";
+var filterOptions = createFilterOptions();
+var INDENT_STEP = 16;
+var MUI_SIZE = { xs: "small", sm: "small", md: "medium", lg: "medium", xl: "medium" };
+var fieldSx = {
+  "& .MuiOutlinedInput-root": {
+    borderRadius: fieldRadiusPx,
+    "& fieldset": {
+      borderColor: (theme) => fieldEdge(theme)
+    },
+    "&:hover fieldset": { borderColor: "primary.main" },
+    "&.Mui-focused fieldset": { borderColor: "primary.main", borderWidth: 2 },
+    "&.Mui-error fieldset": { borderColor: "error.main" }
+  }
+};
+function buildFilter(onCreate, createOptionLabel) {
+  return (available, params) => {
+    const filtered = filterOptions(available, params);
+    const input = params.inputValue.trim();
+    const alreadyExists = available.some(
+      (option) => option.label.toLowerCase() === input.toLowerCase()
+    );
+    if (input && !alreadyExists && onCreate) {
+      filtered.push({
+        value: `${CREATE_PREFIX}${input}`,
+        label: createOptionLabel(input),
+        isCreate: true
+      });
+    }
+    return filtered;
+  };
+}
+function renderIndentedOption(props, option) {
+  const { key, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ...rest,
+      style: { paddingLeft: INDENT_STEP * (1 + (option.depth ?? 0)) },
+      children: option.label
+    },
+    key ?? option.value
+  );
+}
+function renderField(params, field) {
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      ...params,
+      id: field.inputId,
+      placeholder: field.placeholder,
+      error: Boolean(field.error),
+      size: MUI_SIZE[field.size],
+      sx: [fieldSx, (theme) => fieldControlStyles(theme, field.size)],
+      inputProps: { ...params.inputProps, "data-testid": `${field.dataTestId}-input` },
+      slotProps: {
+        input: {
+          ...params.InputProps,
+          endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
+            field.loading ? /* @__PURE__ */ jsx(CircularProgress, { color: "inherit", size: 18 }) : null,
+            params.InputProps.endAdornment
+          ] })
+        }
+      }
+    }
+  );
+}
+function useInternalOptions(options, value) {
+  const items = useMemo(
+    () => options.map(({ value: optionValue, label, depth }) => ({
+      value: optionValue,
+      label,
+      depth
+    })),
+    [options]
+  );
+  const selected = useMemo(
+    () => items.find((option) => option.value === value) ?? null,
+    [items, value]
+  );
+  return { items, selected };
+}
+function handlePick(next, onChange, onCreate) {
+  if (!next) {
+    onChange(null);
+    return;
+  }
+  if (next.isCreate) {
+    void onCreate?.(next.value.slice(CREATE_PREFIX.length));
+    return;
+  }
+  onChange(next.value);
+}
+function CreatableSelect({
+  options,
+  value,
+  onChange,
+  onCreate,
+  label,
+  error,
+  placeholder,
+  createOptionLabel,
+  noOptionsText,
+  disabled = false,
+  loading = false,
+  fullWidth = true,
+  size = "md",
+  dataTestId = "creatable-select"
+}) {
+  const inputId = useId();
+  const { items, selected } = useInternalOptions(options, value);
+  return /* @__PURE__ */ jsxs(FormControl, { fullWidth, error: Boolean(error), children: [
+    label && /* @__PURE__ */ jsx(FormLabel, { htmlFor: inputId, error: Boolean(error), children: label }),
+    /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        value: selected,
+        options: items,
+        disabled,
+        loading,
+        fullWidth,
+        size: MUI_SIZE[size],
+        handleHomeEndKeys: true,
+        selectOnFocus: true,
+        clearOnBlur: true,
+        "data-testid": dataTestId,
+        noOptionsText,
+        slotProps: { popper: { sx: { zIndex: stackedOverlayZIndex } } },
+        getOptionLabel: (option) => typeof option === "string" ? option : option.label,
+        isOptionEqualToValue: (option, current) => option.value === current.value,
+        renderOption: renderIndentedOption,
+        filterOptions: buildFilter(onCreate, createOptionLabel),
+        onChange: (_event, next) => handlePick(next, onChange, onCreate),
+        renderInput: (params) => renderField(params, { inputId, placeholder, error, loading, size, dataTestId })
+      }
+    ),
+    error && /* @__PURE__ */ jsx(FormMessage, { error: true, dataTestId: `${dataTestId}-message`, children: error })
+  ] });
+}
+
+export {
+  CreatableSelect
+};
+//# sourceMappingURL=chunk-HAQMKV5P.js.map