@12-apps/ui 6.11.0 → 6.12.0

package/dist/chunk-C6AZDXEE.js

@@ -0,0 +1,207 @@
+import {
+  alertEmphasisStyles,
+  alertLayoutStyles,
+  alertVariantStyles,
+  fadeInScale,
+  getColorFromTheme,
+  getVariantIcon
+} from "./chunk-5ERH4OIK.js";
+
+// src/components/data-display/Alert/Alert.tsx
+import Close from "@mui/icons-material/Close";
+import MuiAlert from "@mui/material/Alert/index.js";
+import AlertTitle from "@mui/material/AlertTitle/index.js";
+import Box from "@mui/material/Box/index.js";
+import Collapse from "@mui/material/Collapse/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var StyledAlert = styled(MuiAlert, {
+  shouldForwardProp: (prop) => !["customVariant", "customColor", "glow", "pulse", "animate"].includes(prop)
+})(({ theme, customVariant, customColor, glow, pulse, animate }) => {
+  const colorPalette = getColorFromTheme(theme, customColor || customVariant || "info");
+  return {
+    borderRadius: theme.spacing(1.5),
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+    position: "relative",
+    overflow: "hidden",
+    animation: animate ? `${fadeInScale} 0.3s ease-out` : "none",
+    willChange: "transform, opacity",
+    ...alertLayoutStyles(theme, colorPalette, animate),
+    // Hover effects
+    "&:hover": {
+      transform: "translateY(-3px) scale(1.01)",
+      boxShadow: `0 8px 20px ${alpha(colorPalette.main, 0.2)}`,
+      transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+      ".MuiAlert-icon": {
+        transform: "scale(1.15) rotate(10deg)"
+      },
+      "&::before": {
+        opacity: 1
+      }
+    },
+    // Active state
+    "&:active": {
+      transform: "translateY(-1px) scale(0.99)",
+      transition: "transform 0.1s ease"
+    },
+    // Focus styles for accessibility
+    "&:focus-within": {
+      outline: `3px solid ${alpha(colorPalette.main, 0.5)}`,
+      outlineOffset: "3px",
+      boxShadow: `0 0 0 6px ${alpha(colorPalette.main, 0.1)}`,
+      transition: "all 0.2s ease"
+    },
+    ...alertVariantStyles(theme, customVariant, colorPalette),
+    ...alertEmphasisStyles(colorPalette, Boolean(glow), Boolean(pulse))
+  };
+});
+var ALERT_DEFAULTS = {
+  variant: "info",
+  glow: false,
+  pulse: false,
+  showIcon: true,
+  closable: false,
+  animate: true,
+  role: "alert",
+  "aria-atomic": "true",
+  "data-testid": "alert"
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var testIdFor = (base, suffix) => base ? `${base}-${suffix}` : `alert-${suffix}`;
+var MUI_SEVERITY = {
+  danger: "error",
+  glass: "info",
+  gradient: "info"
+};
+var toMuiSeverity = (variant) => MUI_SEVERITY[variant] ?? variant;
+var AlertContent = ({ title, description, dataTestId, children }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  title && /* @__PURE__ */ jsx(
+    AlertTitle,
+    {
+      "data-testid": testIdFor(dataTestId, "title"),
+      sx: {
+        fontWeight: 600,
+        fontSize: "1.05rem",
+        marginBottom: description ? 0.5 : 0,
+        wordWrap: "break-word",
+        overflowWrap: "break-word",
+        wordBreak: "break-word"
+      },
+      children: title
+    }
+  ),
+  description && /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "div",
+      "data-testid": testIdFor(dataTestId, "message"),
+      sx: {
+        opacity: 0.9,
+        fontSize: "0.925rem",
+        wordWrap: "break-word",
+        overflowWrap: "break-word",
+        wordBreak: "break-word"
+      },
+      children: description
+    }
+  ),
+  children
+] });
+var AlertCloseButton = ({
+  dataTestId,
+  label,
+  onClose
+}) => /* @__PURE__ */ jsx(
+  IconButton,
+  {
+    "data-testid": testIdFor(dataTestId, "close"),
+    "aria-label": label,
+    color: "inherit",
+    size: "small",
+    onClick: onClose,
+    sx: (theme) => ({
+      transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+      opacity: 0.7,
+      "&:hover": {
+        transform: "rotate(90deg) scale(1.1)",
+        opacity: 1,
+        backgroundColor: alpha(theme.palette.action.hover, 0.1)
+      },
+      "&:focus": {
+        opacity: 1,
+        outline: "none",
+        backgroundColor: alpha(theme.palette.action.focus, 0.1)
+      }
+    }),
+    children: /* @__PURE__ */ jsx(Close, { fontSize: "inherit" })
+  }
+);
+function dismissButton(props, dataTestId, onClose) {
+  if (!props.closable) return null;
+  return /* @__PURE__ */ jsx(AlertCloseButton, { dataTestId, label: props.closeLabel, onClose });
+}
+var Alert = React.forwardRef(
+  (alertProps, ref) => {
+    const {
+      variant,
+      color,
+      glow,
+      pulse,
+      icon,
+      showIcon,
+      onClose,
+      title,
+      description,
+      children,
+      animate,
+      role,
+      "aria-atomic": ariaAtomic,
+      "data-testid": dataTestId,
+      ...props
+    } = { ...ALERT_DEFAULTS, ...definedProps(alertProps) };
+    const ariaLive = alertProps["aria-live"] ?? (variant === "danger" ? "assertive" : "polite");
+    const [open, setOpen] = React.useState(true);
+    const [isClosing, setIsClosing] = React.useState(false);
+    const handleClose = () => {
+      setIsClosing(true);
+      window.setTimeout(() => {
+        setOpen(false);
+        onClose?.();
+      }, 200);
+    };
+    const severity = toMuiSeverity(variant);
+    const displayIcon = showIcon ? /* @__PURE__ */ jsx(Box, { component: "span", "data-testid": testIdFor(dataTestId, "icon"), children: icon || getVariantIcon(variant) }) : false;
+    const content = /* @__PURE__ */ jsx(AlertContent, { title, description, dataTestId, children });
+    return /* @__PURE__ */ jsx(Collapse, { in: open && !isClosing, timeout: 300, children: /* @__PURE__ */ jsx(
+      StyledAlert,
+      {
+        ref,
+        "data-testid": dataTestId || "alert",
+        severity,
+        customVariant: variant,
+        customColor: color,
+        glow,
+        pulse,
+        animate,
+        icon: displayIcon,
+        role,
+        "aria-live": ariaLive,
+        "aria-atomic": ariaAtomic,
+        tabIndex: 0,
+        action: dismissButton(alertProps, dataTestId, handleClose),
+        ...props,
+        children: content
+      }
+    ) });
+  }
+);
+Alert.displayName = "Alert";
+
+export {
+  Alert
+};
+//# sourceMappingURL=chunk-C6AZDXEE.js.map

package/dist/chunk-C6AZDXEE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Alert/Alert.tsx"],"sourcesContent":["import Close from '@mui/icons-material/Close';\nimport MuiAlert from '@mui/material/Alert/index.js';\nimport AlertTitle from '@mui/material/AlertTitle/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport Collapse from '@mui/material/Collapse/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport {\n  alertEmphasisStyles,\n  alertLayoutStyles,\n  alertVariantStyles,\n  fadeInScale,\n  getColorFromTheme,\n  getVariantIcon } from './Alert.styles';\nimport type { AlertColor } from '@mui/material/Alert/index.js';\nimport type { AlertProps } from './Alert.types';\n\n// Define animations\nconst StyledAlert = styled(MuiAlert, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'customColor', 'glow', 'pulse', 'animate'].includes(prop as string) })<{\n  customVariant?: string;\n  customColor?: string;\n  glow?: boolean;\n  pulse?: boolean;\n  animate?: boolean;\n}>(({ theme, customVariant, customColor, glow, pulse, animate }) => {\n  const colorPalette = getColorFromTheme(theme, customColor || customVariant || 'info');\n\n  return {\n    borderRadius: theme.spacing(1.5),\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n    position: 'relative',\n    overflow: 'hidden',\n    animation: animate ? `${fadeInScale} 0.3s ease-out` : 'none',\n    willChange: 'transform, opacity',\n\n    ...alertLayoutStyles(theme, colorPalette, animate),\n\n    // Hover effects\n    '&:hover': {\n      transform: 'translateY(-3px) scale(1.01)',\n      boxShadow: `0 8px 20px ${alpha(colorPalette.main, 0.2)}`,\n      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n\n      '.MuiAlert-icon': {\n        transform: 'scale(1.15) rotate(10deg)' },\n\n      '&::before': {\n        opacity: 1 } },\n\n    // Active state\n    '&:active': {\n      transform: 'translateY(-1px) scale(0.99)',\n      transition: 'transform 0.1s ease' },\n\n    // Focus styles for accessibility\n    '&:focus-within': {\n      outline: `3px solid ${alpha(colorPalette.main, 0.5)}`,\n      outlineOffset: '3px',\n      boxShadow: `0 0 0 6px ${alpha(colorPalette.main, 0.1)}`,\n      transition: 'all 0.2s ease' },\n\n    ...alertVariantStyles(theme, customVariant, colorPalette),\n    ...alertEmphasisStyles(colorPalette, Boolean(glow), Boolean(pulse)) };\n});\n\nconst ALERT_DEFAULTS = {\n  variant: 'info',\n  glow: false,\n  pulse: false,\n  showIcon: true,\n  closable: false,\n  animate: true,\n  role: 'alert',\n  'aria-atomic': 'true',\n  'data-testid': 'alert' } satisfies Partial<AlertProps>;\n\n// Strips explicitly-undefined props before the merge so `prop={undefined}` still\n// falls back to the default, the way a destructuring default would.\nconst definedProps = (props: AlertProps): Partial<AlertProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<AlertProps>;\n\nconst testIdFor = (base: string | undefined, suffix: string) =>\n  base ? `${base}-${suffix}` : `alert-${suffix}`;\n\n// glass and gradient are our own looks with no MUI severity of their own; both\n// borrow info's. danger is MUI's error.\nconst MUI_SEVERITY: Record<string, AlertColor> = {\n  danger: 'error',\n  glass: 'info',\n  gradient: 'info' };\n\nconst toMuiSeverity = (variant: string): AlertColor =>\n  MUI_SEVERITY[variant] ?? (variant as AlertColor);\n\nconst AlertContent: React.FC<{\n  title?: AlertProps['title'];\n  description?: AlertProps['description'];\n  dataTestId?: string;\n  children?: React.ReactNode;\n}> = ({ title, description, dataTestId, children }) => (\n  <>\n    {title && (\n      <AlertTitle\n        data-testid={testIdFor(dataTestId, 'title')}\n        sx={{\n          fontWeight: 600,\n          fontSize: '1.05rem',\n          marginBottom: description ? 0.5 : 0,\n          wordWrap: 'break-word',\n          overflowWrap: 'break-word',\n          wordBreak: 'break-word' }}\n      >\n        {title}\n      </AlertTitle>\n    )}\n    {description && (\n      <Box\n        component=\"div\"\n        data-testid={testIdFor(dataTestId, 'message')}\n        sx={{\n          opacity: 0.9,\n          fontSize: '0.925rem',\n          wordWrap: 'break-word',\n          overflowWrap: 'break-word',\n          wordBreak: 'break-word' }}\n      >\n        {description}\n      </Box>\n    )}\n    {children}\n  </>\n);\n\nconst AlertCloseButton: React.FC<{ dataTestId?: string; label: string; onClose: () => void }> = ({\n  dataTestId,\n  label,\n  onClose }) => (\n  <IconButton\n    data-testid={testIdFor(dataTestId, 'close')}\n    aria-label={label}\n    color=\"inherit\"\n    size=\"small\"\n    onClick={onClose}\n    sx={(theme) => ({\n      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n      opacity: 0.7,\n      '&:hover': {\n        transform: 'rotate(90deg) scale(1.1)',\n        opacity: 1,\n        backgroundColor: alpha(theme.palette.action.hover, 0.1) },\n      '&:focus': {\n        opacity: 1,\n        outline: 'none',\n        backgroundColor: alpha(theme.palette.action.focus, 0.1) } })}\n  >\n    <Close fontSize=\"inherit\" />\n  </IconButton>\n);\n\n/**\n * The dismiss button, or nothing.\n *\n * Reads `closeLabel` straight off the props rather than through the\n * `definedProps` merge, which would widen it to `string | undefined` and hand\n * the button an empty name. The UNION in `AlertProps` guarantees the label\n * wherever `closable` is true — that narrowing is gone inside the component,\n * which is why the fallback below exists and why it is unreachable.\n */\nfunction dismissButton(\n  props: AlertProps,\n  dataTestId: string | undefined,\n  onClose: () => void,\n): React.JSX.Element | null {\n  if (!props.closable) return null;\n  return <AlertCloseButton dataTestId={dataTestId} label={props.closeLabel} onClose={onClose} />;\n}\n\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  (\n    alertProps,\n    ref,\n  ) => {\n    const {\n      variant,\n      color,\n      glow,\n      pulse,\n      icon,\n      showIcon,\n      onClose,\n      title,\n      description,\n      children,\n      animate,\n      role,\n      'aria-atomic': ariaAtomic,\n      'data-testid': dataTestId,\n      ...props\n    } = { ...ALERT_DEFAULTS, ...definedProps(alertProps) };\n\n    // Depends on `variant`, so it cannot live in the static defaults above.\n    const ariaLive = alertProps['aria-live'] ?? (variant === 'danger' ? 'assertive' : 'polite');\n    const [open, setOpen] = React.useState(true);\n    const [isClosing, setIsClosing] = React.useState(false);\n\n    const handleClose = () => {\n      setIsClosing(true);\n      window.setTimeout(() => {\n        setOpen(false);\n        onClose?.();\n      }, 200);\n    };\n\n    const severity = toMuiSeverity(variant);\n\n    const displayIcon = showIcon ? (\n      <Box component=\"span\" data-testid={testIdFor(dataTestId, 'icon')}>\n        {icon || getVariantIcon(variant)}\n      </Box>\n    ) : false;\n\n    const content = (\n      <AlertContent title={title} description={description} dataTestId={dataTestId}>\n        {children}\n      </AlertContent>\n    );\n\n    return (\n      <Collapse in={open && !isClosing} timeout={300}>\n        <StyledAlert\n          ref={ref}\n          data-testid={dataTestId || 'alert'}\n          severity={severity}\n          customVariant={variant}\n          customColor={color}\n          glow={glow}\n          pulse={pulse}\n          animate={animate}\n          icon={displayIcon}\n          role={role}\n          aria-live={ariaLive}\n          aria-atomic={ariaAtomic}\n          tabIndex={0}\n          action={dismissButton(alertProps, dataTestId, handleClose)}\n          {...props}\n        >\n          {content}\n        </StyledAlert>\n      </Collapse>\n    );\n  },\n);\n\nAlert.displayName = 'Alert';\n"],"mappings":"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","names":[]}

package/dist/chunk-CBOB5AV6.js

@@ -0,0 +1,73 @@
+// src/components/data-display/DataViews/data-views-range-presets.ts
+function isoDay(date) {
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${date.getFullYear()}-${month}-${day}`;
+}
+function shiftDays(date, days) {
+  const next = new Date(date);
+  next.setDate(next.getDate() + days);
+  return next;
+}
+function dayRangePresets(copy) {
+  return [
+    {
+      id: "hoje",
+      range: () => {
+        const today = isoDay(/* @__PURE__ */ new Date());
+        return { min: today, max: today };
+      }
+    },
+    {
+      id: "ontem",
+      range: () => {
+        const yesterday = isoDay(shiftDays(/* @__PURE__ */ new Date(), -1));
+        return { min: yesterday, max: yesterday };
+      }
+    },
+    {
+      id: "semana",
+      range: () => {
+        const now = /* @__PURE__ */ new Date();
+        const sunday = shiftDays(now, -now.getDay());
+        return { min: isoDay(sunday), max: isoDay(shiftDays(sunday, 6)) };
+      }
+    },
+    {
+      id: "mes",
+      range: () => {
+        const now = /* @__PURE__ */ new Date();
+        const year = now.getFullYear();
+        const month = now.getMonth();
+        return { min: isoDay(new Date(year, month, 1)), max: isoDay(new Date(year, month + 1, 0)) };
+      }
+    },
+    {
+      id: "ano",
+      range: () => {
+        const year = (/* @__PURE__ */ new Date()).getFullYear();
+        return { min: `${year}-01-01`, max: `${year}-12-31` };
+      }
+    }
+  ].map((preset) => ({ ...preset, label: copy.filters.rangePresets[preset.id] ?? preset.id }));
+}
+function presetsFor(field, copy) {
+  if (field.presets) return field.presets;
+  return field.kind === "day" ? dayRangePresets(copy) : [];
+}
+function resolvePreset(preset) {
+  return typeof preset.range === "function" ? preset.range() : preset.range;
+}
+function isPresetActive(preset, value) {
+  const resolved = resolvePreset(preset);
+  const same = (a, b) => String(a ?? "") === String(b ?? "");
+  return same(resolved.min, value.min) && same(resolved.max, value.max);
+}
+
+export {
+  dayRangePresets,
+  presetsFor,
+  resolvePreset,
+  isPresetActive
+};
+//# sourceMappingURL=chunk-CBOB5AV6.js.map

package/dist/chunk-CBOB5AV6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-range-presets.ts"],"sourcesContent":["import type { DataViewsCopy } from \"./data-views-copy\";\nimport type { RangeFieldConfig, RangePreset, RangeValue } from \"./data-views-types\";\n\n/**\n * THE CALENDAR WINDOWS BEHIND A DATE FILTER'S ONE-CLICK PRESETS.\n *\n * Pure and component-free, for the same reason `data-views-range-values` is:\n * the pill's popover, the slide-in panel and the \"Mais\" overflow all offer the\n * same presets, and none of them should have to import a component to know what\n * \"Esta semana\" resolves to.\n *\n * Every window is computed in the LOCAL calendar and emitted as `AAAA-MM-DD`.\n * Going through `toISOString()` would answer in UTC, which for every Brazilian\n * timezone is a day ahead after 21:00 — \"Hoje\" would quietly become tomorrow\n * every evening.\n */\n\n/** `AAAA-MM-DD` for a date, read in the local calendar (never UTC). */\nfunction isoDay(date: Date): string {\n  const month = String(date.getMonth() + 1).padStart(2, \"0\");\n  const day = String(date.getDate()).padStart(2, \"0\");\n  return `${date.getFullYear()}-${month}-${day}`;\n}\n\n/** The same date shifted by whole days, without mutating the original. */\nfunction shiftDays(date: Date, days: number): Date {\n  const next = new Date(date);\n  next.setDate(next.getDate() + days);\n  return next;\n}\n\n/**\n * The five windows every date filter wants, resolved when CLICKED.\n *\n * Each is a whole calendar unit rather than a unit-to-date: \"Este mês\" is the\n * whole month, not the 1st through today. It is what the words say, it matches\n * the label a merchant reads back on the pill, and it changes nothing for a\n * dataset with no future rows — while a page that does have them (scheduled\n * orders) would otherwise hide them under a preset that claims to show the\n * month.\n *\n * The week starts on SUNDAY, following the Brazilian calendar these grids are\n * read against rather than ISO-8601's Monday.\n */\nexport function dayRangePresets(copy: DataViewsCopy): RangePreset[] {\n  return [\n  {\n    id: \"hoje\",\n    range: () => {\n      const today = isoDay(new Date());\n      return { min: today, max: today };\n    },\n  },\n  {\n    id: \"ontem\",\n    range: () => {\n      const yesterday = isoDay(shiftDays(new Date(), -1));\n      return { min: yesterday, max: yesterday };\n    },\n  },\n  {\n    id: \"semana\",\n    range: () => {\n      const now = new Date();\n      const sunday = shiftDays(now, -now.getDay());\n      return { min: isoDay(sunday), max: isoDay(shiftDays(sunday, 6)) };\n    },\n  },\n  {\n    id: \"mes\",\n    range: () => {\n      const now = new Date();\n      const year = now.getFullYear();\n      const month = now.getMonth();\n      // Day 0 of the NEXT month is the last day of this one — the only spelling\n      // that needs no month-length table and no leap-year branch.\n      return { min: isoDay(new Date(year, month, 1)), max: isoDay(new Date(year, month + 1, 0)) };\n    },\n  },\n  {\n    id: \"ano\",\n    range: () => {\n      const year = new Date().getFullYear();\n      return { min: `${year}-01-01`, max: `${year}-12-31` };\n    },\n  },\n  ].map((preset) => ({ ...preset, label: copy.filters.rangePresets[preset.id] ?? preset.id }));\n}\n\n/**\n * The presets a field offers: its own, or the calendar defaults for a day field\n * that declared none. An explicit `[]` means none — a host suppressing them is\n * saying something, and must not be overridden by the fallback.\n */\nexport function presetsFor<T extends Record<string, unknown>>(\n  field: RangeFieldConfig<T>,\n  copy: DataViewsCopy,\n): RangePreset[] {\n  if (field.presets) return field.presets;\n  return field.kind === \"day\" ? dayRangePresets(copy) : [];\n}\n\n/** A preset's window, evaluating it if it is time-dependent. */\nexport function resolvePreset(preset: RangePreset): RangeValue {\n  return typeof preset.range === \"function\" ? preset.range() : preset.range;\n}\n\n/**\n * Is this preset the window currently applied?\n *\n * Bounds compare as STRINGS because a `number` field's stored bound may have\n * arrived from an input as `100` while the preset declares `100` — same window,\n * and `undefined` vs a missing key must read as equal too.\n */\nexport function isPresetActive(preset: RangePreset, value: RangeValue): boolean {\n  const resolved = resolvePreset(preset);\n  const same = (a: number | string | undefined, b: number | string | undefined): boolean =>\n    String(a ?? \"\") === String(b ?? \"\");\n  return same(resolved.min, value.min) && same(resolved.max, value.max);\n}\n"],"mappings":";AAkBA,SAAS,OAAO,MAAoB;AAClC,QAAM,QAAQ,OAAO,KAAK,SAAS,IAAI,CAAC,EAAE,SAAS,GAAG,GAAG;AACzD,QAAM,MAAM,OAAO,KAAK,QAAQ,CAAC,EAAE,SAAS,GAAG,GAAG;AAClD,SAAO,GAAG,KAAK,YAAY,CAAC,IAAI,KAAK,IAAI,GAAG;AAC9C;AAGA,SAAS,UAAU,MAAY,MAAoB;AACjD,QAAM,OAAO,IAAI,KAAK,IAAI;AAC1B,OAAK,QAAQ,KAAK,QAAQ,IAAI,IAAI;AAClC,SAAO;AACT;AAeO,SAAS,gBAAgB,MAAoC;AAClE,SAAO;AAAA,IACP;AAAA,MACE,IAAI;AAAA,MACJ,OAAO,MAAM;AACX,cAAM,QAAQ,OAAO,oBAAI,KAAK,CAAC;AAC/B,eAAO,EAAE,KAAK,OAAO,KAAK,MAAM;AAAA,MAClC;AAAA,IACF;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO,MAAM;AACX,cAAM,YAAY,OAAO,UAAU,oBAAI,KAAK,GAAG,EAAE,CAAC;AAClD,eAAO,EAAE,KAAK,WAAW,KAAK,UAAU;AAAA,MAC1C;AAAA,IACF;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO,MAAM;AACX,cAAM,MAAM,oBAAI,KAAK;AACrB,cAAM,SAAS,UAAU,KAAK,CAAC,IAAI,OAAO,CAAC;AAC3C,eAAO,EAAE,KAAK,OAAO,MAAM,GAAG,KAAK,OAAO,UAAU,QAAQ,CAAC,CAAC,EAAE;AAAA,MAClE;AAAA,IACF;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO,MAAM;AACX,cAAM,MAAM,oBAAI,KAAK;AACrB,cAAM,OAAO,IAAI,YAAY;AAC7B,cAAM,QAAQ,IAAI,SAAS;AAG3B,eAAO,EAAE,KAAK,OAAO,IAAI,KAAK,MAAM,OAAO,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,MAAM,QAAQ,GAAG,CAAC,CAAC,EAAE;AAAA,MAC5F;AAAA,IACF;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO,MAAM;AACX,cAAM,QAAO,oBAAI,KAAK,GAAE,YAAY;AACpC,eAAO,EAAE,KAAK,GAAG,IAAI,UAAU,KAAK,GAAG,IAAI,SAAS;AAAA,MACtD;AAAA,IACF;AAAA,EACA,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,QAAQ,OAAO,KAAK,QAAQ,aAAa,OAAO,EAAE,KAAK,OAAO,GAAG,EAAE;AAC7F;AAOO,SAAS,WACd,OACA,MACe;AACf,MAAI,MAAM,QAAS,QAAO,MAAM;AAChC,SAAO,MAAM,SAAS,QAAQ,gBAAgB,IAAI,IAAI,CAAC;AACzD;AAGO,SAAS,cAAc,QAAiC;AAC7D,SAAO,OAAO,OAAO,UAAU,aAAa,OAAO,MAAM,IAAI,OAAO;AACtE;AASO,SAAS,eAAe,QAAqB,OAA4B;AAC9E,QAAM,WAAW,cAAc,MAAM;AACrC,QAAM,OAAO,CAAC,GAAgC,MAC5C,OAAO,KAAK,EAAE,MAAM,OAAO,KAAK,EAAE;AACpC,SAAO,KAAK,SAAS,KAAK,MAAM,GAAG,KAAK,KAAK,SAAS,KAAK,MAAM,GAAG;AACtE;","names":[]}

package/dist/chunk-CDJPDZCA.js

@@ -0,0 +1,203 @@
+import {
+  Skeleton
+} from "./chunk-IRDGC7FK.js";
+
+// src/components/data-display/StatCard/StatCard.tsx
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+import RemoveIcon from "@mui/icons-material/Remove";
+import Box from "@mui/material/Box/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DIRECTION_ICON = {
+  up: ArrowUpwardIcon,
+  down: ArrowDownwardIcon,
+  neutral: RemoveIcon
+};
+var DIRECTION_WORD = {
+  up: "Increase of",
+  down: "Decrease of",
+  neutral: "Change of"
+};
+var IMPLIED_TONE = {
+  up: "positive",
+  down: "negative",
+  neutral: "neutral"
+};
+function toneColor(tone, theme) {
+  if (tone === "positive") return theme.palette.success.main;
+  if (tone === "negative") return theme.palette.error.main;
+  return theme.palette.text.secondary;
+}
+function deltaAriaLabel(delta) {
+  if (delta.ariaLabel) return delta.ariaLabel;
+  const suffix = delta.label ? ` ${delta.label}` : "";
+  return `${DIRECTION_WORD[delta.direction]} ${delta.value}${suffix}`;
+}
+function DeltaRow({ delta, testId }) {
+  const theme = useTheme();
+  const tone = delta.tone ?? IMPLIED_TONE[delta.direction];
+  const Icon = DIRECTION_ICON[delta.direction];
+  const color = toneColor(tone, theme);
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: "row",
+      spacing: 0.5,
+      sx: { alignItems: "center", flexWrap: "wrap" },
+      "data-testid": testId,
+      "data-direction": delta.direction,
+      "data-tone": tone,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", sx: { fontSize: "1rem", color } }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "body2",
+            component: "span",
+            "aria-label": deltaAriaLabel(delta),
+            sx: { color, fontWeight: theme.typography.fontWeightMedium },
+            children: delta.value
+          }
+        ),
+        delta.label && /* @__PURE__ */ jsx(Typography, { variant: "caption", component: "span", sx: { color: theme.palette.text.secondary }, children: delta.label })
+      ]
+    }
+  );
+}
+function LabelRow({
+  label,
+  icon,
+  labelId,
+  testId
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
+    icon && /* @__PURE__ */ jsx(
+      Box,
+      {
+        "aria-hidden": "true",
+        "data-testid": `${testId}-icon`,
+        sx: { display: "flex", color: theme.palette.text.secondary },
+        children: icon
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        id: labelId,
+        variant: "caption",
+        component: "p",
+        "data-testid": `${testId}-label`,
+        sx: { color: theme.palette.text.secondary },
+        children: label
+      }
+    )
+  ] });
+}
+function ValueRow({
+  value,
+  loading,
+  testId
+}) {
+  const theme = useTheme();
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        variant: "rectangular",
+        height: 28,
+        width: "60%",
+        borderRadius: 4,
+        "data-testid": `${testId}-value-skeleton`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant: "h6",
+      component: "p",
+      "data-testid": `${testId}-value`,
+      sx: {
+        fontWeight: theme.typography.fontWeightMedium,
+        color: theme.palette.text.primary,
+        overflowWrap: "anywhere"
+      },
+      children: value
+    }
+  );
+}
+function DeltaSlot({
+  delta,
+  loading,
+  testId
+}) {
+  if (!delta) return null;
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        variant: "rectangular",
+        height: 16,
+        width: "40%",
+        borderRadius: 4,
+        "data-testid": `${testId}-delta-skeleton`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(DeltaRow, { delta, testId: `${testId}-delta` });
+}
+var StatCard = React.memo(
+  ({ label, value, delta, icon, hint, loading = false, className, dataTestId }) => {
+    const theme = useTheme();
+    const labelId = React.useId();
+    const testId = dataTestId || "stat-card";
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        role: "group",
+        "aria-labelledby": labelId,
+        "aria-busy": loading || void 0,
+        className,
+        "data-testid": testId,
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          gap: theme.spacing(0.5),
+          padding: theme.spacing(2),
+          borderRadius: theme.shape.borderRadius / 4,
+          border: `1px solid ${theme.palette.divider}`,
+          backgroundColor: theme.palette.background.paper,
+          minWidth: 0
+        },
+        children: [
+          /* @__PURE__ */ jsx(LabelRow, { label, icon, labelId, testId }),
+          /* @__PURE__ */ jsx(ValueRow, { value, loading, testId }),
+          /* @__PURE__ */ jsx(DeltaSlot, { delta, loading, testId }),
+          hint && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "caption",
+              component: "p",
+              "data-testid": `${testId}-hint`,
+              sx: { color: theme.palette.text.secondary },
+              children: hint
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+StatCard.displayName = "StatCard";
+var StatCard_default = StatCard;
+
+export {
+  StatCard,
+  StatCard_default
+};
+//# sourceMappingURL=chunk-CDJPDZCA.js.map

package/dist/chunk-CDJPDZCA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/StatCard/StatCard.tsx"],"sourcesContent":["import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';\nimport ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';\nimport RemoveIcon from '@mui/icons-material/Remove';\nimport Box from '@mui/material/Box/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { Skeleton } from '../../layout/Skeleton/Skeleton';\n\nimport type {\n  StatCardDelta,\n  StatCardDeltaDirection,\n  StatCardDeltaTone,\n  StatCardProps,\n} from './StatCard.types';\n\n/** The arrow each direction renders (decorative — the text carries the meaning). */\nconst DIRECTION_ICON: Record<StatCardDeltaDirection, typeof ArrowUpwardIcon> = {\n  up: ArrowUpwardIcon,\n  down: ArrowDownwardIcon,\n  neutral: RemoveIcon,\n};\n\n/** How each direction reads to a screen reader when no `ariaLabel` is given. */\nconst DIRECTION_WORD: Record<StatCardDeltaDirection, string> = {\n  up: 'Increase of',\n  down: 'Decrease of',\n  neutral: 'Change of',\n};\n\n/** A direction's natural tone, used when the caller doesn't override it. */\nconst IMPLIED_TONE: Record<StatCardDeltaDirection, StatCardDeltaTone> = {\n  up: 'positive',\n  down: 'negative',\n  neutral: 'neutral',\n};\n\n/** Resolve a tone to its semantic palette colour (never a hardcoded hex). */\nfunction toneColor(tone: StatCardDeltaTone, theme: Theme): string {\n  if (tone === 'positive') return theme.palette.success.main;\n  if (tone === 'negative') return theme.palette.error.main;\n  return theme.palette.text.secondary;\n}\n\n/** The screen-reader sentence for a delta: caller override, else generated. */\nfunction deltaAriaLabel(delta: StatCardDelta): string {\n  if (delta.ariaLabel) return delta.ariaLabel;\n  const suffix = delta.label ? ` ${delta.label}` : '';\n  return `${DIRECTION_WORD[delta.direction]} ${delta.value}${suffix}`;\n}\n\n/** The delta row: a decorative arrow plus the pre-formatted change and context. */\nfunction DeltaRow({ delta, testId }: { delta: StatCardDelta; testId: string }): React.JSX.Element {\n  const theme = useTheme();\n  const tone = delta.tone ?? IMPLIED_TONE[delta.direction];\n  const Icon = DIRECTION_ICON[delta.direction];\n  const color = toneColor(tone, theme);\n\n  return (\n    <Stack\n      direction=\"row\"\n      spacing={0.5}\n      sx={{ alignItems: 'center', flexWrap: 'wrap' }}\n      data-testid={testId}\n      data-direction={delta.direction}\n      data-tone={tone}\n    >\n      {/* The arrow duplicates what the aria-label already says, so it is hidden\n          from assistive tech rather than read twice. */}\n      <Icon aria-hidden=\"true\" sx={{ fontSize: '1rem', color }} />\n      <Typography\n        variant=\"body2\"\n        component=\"span\"\n        aria-label={deltaAriaLabel(delta)}\n        sx={{ color, fontWeight: theme.typography.fontWeightMedium }}\n      >\n        {delta.value}\n      </Typography>\n      {delta.label && (\n        <Typography variant=\"caption\" component=\"span\" sx={{ color: theme.palette.text.secondary }}>\n          {delta.label}\n        </Typography>\n      )}\n    </Stack>\n  );\n}\n\n/** The label row: the optional decorative icon plus the metric's name. */\nfunction LabelRow({\n  label,\n  icon,\n  labelId,\n  testId,\n}: Pick<StatCardProps, 'label' | 'icon'> & {\n  labelId: string;\n  testId: string;\n}): React.JSX.Element {\n  const theme = useTheme();\n  return (\n    <Stack direction=\"row\" spacing={1} sx={{ alignItems: 'center' }}>\n      {icon && (\n        <Box\n          aria-hidden=\"true\"\n          data-testid={`${testId}-icon`}\n          sx={{ display: 'flex', color: theme.palette.text.secondary }}\n        >\n          {icon}\n        </Box>\n      )}\n      <Typography\n        id={labelId}\n        variant=\"caption\"\n        component=\"p\"\n        data-testid={`${testId}-label`}\n        sx={{ color: theme.palette.text.secondary }}\n      >\n        {label}\n      </Typography>\n    </Stack>\n  );\n}\n\n/** The figure itself, or its skeleton while the tile is loading. */\nfunction ValueRow({\n  value,\n  loading,\n  testId,\n}: Pick<StatCardProps, 'value' | 'loading'> & { testId: string }): React.JSX.Element {\n  const theme = useTheme();\n  if (loading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        height={28}\n        width=\"60%\"\n        borderRadius={4}\n        data-testid={`${testId}-value-skeleton`}\n      />\n    );\n  }\n  return (\n    <Typography\n      variant=\"h6\"\n      component=\"p\"\n      data-testid={`${testId}-value`}\n      sx={{\n        fontWeight: theme.typography.fontWeightMedium,\n        color: theme.palette.text.primary,\n        overflowWrap: 'anywhere',\n      }}\n    >\n      {value}\n    </Typography>\n  );\n}\n\n/** The delta slot: its skeleton while loading, the row once resolved, else nothing. */\nfunction DeltaSlot({\n  delta,\n  loading,\n  testId,\n}: {\n  delta?: StatCardDelta;\n  loading: boolean;\n  testId: string;\n}): React.JSX.Element | null {\n  if (!delta) return null;\n  if (loading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        height={16}\n        width=\"40%\"\n        borderRadius={4}\n        data-testid={`${testId}-delta-skeleton`}\n      />\n    );\n  }\n  return <DeltaRow delta={delta} testId={`${testId}-delta`} />;\n}\n\n/**\n * StatCard (KPI tile) — one labelled figure with an optional period-over-period\n * delta, leading icon, hint line and loading state. The single shared tile for\n * dashboards and summary bands, so surfaces stop hand-rolling the pattern.\n *\n * The tile is presentation only: `value` and `delta.value` arrive ALREADY\n * formatted, so locale/currency rules stay with the data owner. Colour comes\n * from the MUI palette (`success` / `error` / `text.secondary`), and the delta's\n * meaning is separable from its arrow via {@link StatCardDelta.tone} — a rise in\n * cost can render \"up\" while reading as negative.\n */\nexport const StatCard: React.FC<StatCardProps> = React.memo(\n  ({ label, value, delta, icon, hint, loading = false, className, dataTestId }) => {\n    const theme = useTheme();\n    const labelId = React.useId();\n    const testId = dataTestId || 'stat-card';\n\n    return (\n      <Box\n        role=\"group\"\n        aria-labelledby={labelId}\n        aria-busy={loading || undefined}\n        className={className}\n        data-testid={testId}\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: theme.spacing(0.5),\n          padding: theme.spacing(2),\n          borderRadius: theme.shape.borderRadius / 4,\n          border: `1px solid ${theme.palette.divider}`,\n          backgroundColor: theme.palette.background.paper,\n          minWidth: 0,\n        }}\n      >\n        <LabelRow label={label} icon={icon} labelId={labelId} testId={testId} />\n        <ValueRow value={value} loading={loading} testId={testId} />\n        <DeltaSlot delta={delta} loading={loading} testId={testId} />\n        {hint && (\n          <Typography\n            variant=\"caption\"\n            component=\"p\"\n            data-testid={`${testId}-hint`}\n            sx={{ color: theme.palette.text.secondary }}\n          >\n            {hint}\n          </Typography>\n        )}\n      </Box>\n    );\n  },\n);\n\nStatCard.displayName = 'StatCard';\n\nexport default StatCard;\n"],"mappings":"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","names":[]}

package/dist/chunk-CESQKLIR.js

@@ -0,0 +1,83 @@
+import {
+  useFormContext
+} from "./chunk-4XK6JQ4D.js";
+import {
+  CepField
+} from "./chunk-QL7L6RHR.js";
+
+// src/components/form/total-form/Fields/CepField.tsx
+import { useCallback, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var PARTS = ["street", "neighborhood", "city", "state"];
+function useOwnedAutofill() {
+  const { values, setFieldValue } = useFormContext();
+  const autoFilledRef = useRef({});
+  const valuesRef = useRef(values);
+  valuesRef.current = values;
+  const write = useCallback(
+    (field, value) => {
+      const current = (valuesRef.current[field] ?? "").trim();
+      const ours = autoFilledRef.current[field] === current;
+      if (current !== "" && !ours) return;
+      setFieldValue(field, value);
+      if (value) {
+        autoFilledRef.current[field] = value;
+      } else {
+        delete autoFilledRef.current[field];
+      }
+    },
+    [setFieldValue]
+  );
+  const clearOwned = useCallback(() => {
+    for (const field of Object.keys(autoFilledRef.current)) {
+      write(field, "");
+    }
+  }, [write]);
+  return useMemo(() => ({ write, clearOwned }), [write, clearOwned]);
+}
+function CepField2({
+  name,
+  label,
+  lookup,
+  fills,
+  debounceMs,
+  copy
+}) {
+  const { values, errors, setFieldValue } = useFormContext();
+  const { write, clearOwned } = useOwnedAutofill();
+  const handleResolved = useCallback(
+    (address) => {
+      if (!fills) return;
+      for (const part of PARTS) {
+        const field = fills[part];
+        if (field) write(field, address[part] ?? "");
+      }
+    },
+    [fills, write]
+  );
+  const handleChange = useCallback(
+    (masked) => setFieldValue(name, masked),
+    [name, setFieldValue]
+  );
+  return /* @__PURE__ */ jsx(
+    CepField,
+    {
+      copy,
+      name,
+      label,
+      value: values[name] ?? "",
+      error: errors[name],
+      onChange: handleChange,
+      onLookup: lookup,
+      onResolved: handleResolved,
+      onNotFound: clearOwned,
+      debounceMs,
+      dataTestId: `total-form-field-${name}`
+    }
+  );
+}
+
+export {
+  CepField2 as CepField
+};
+//# sourceMappingURL=chunk-CESQKLIR.js.map

package/dist/chunk-CESQKLIR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/total-form/Fields/CepField.tsx"],"sourcesContent":["'use client';\n\nimport type { CepFieldCopy } from \"../../../../copy\";\nimport React, { useCallback, useMemo, useRef } from 'react';\n\nimport { CepField as BaseCepField, type CepAddress } from '../../CepField';\nimport { useFormContext } from '../FormContext';\n\n/** The resolved address parts a form can receive. */\ntype CepPart = 'street' | 'neighborhood' | 'city' | 'state';\n\n/**\n * Which form field receives each resolved part. Omit a part to leave it alone —\n * a form with no bairro column simply doesn't map `neighborhood`.\n */\nexport type CepFills = Partial<Record<CepPart, string>>;\n\n/** Props for the `total-form` {@link CepField}. */\nexport interface CepFieldProps {\n  /** The lookup status wording. REQUIRED — no default copy. */\n  copy: CepFieldCopy;\n  /** Field name; also the key into the form's values/errors. */\n  name: string;\n  /** Optional visible label. Defaults to `CEP`. */\n  label?: string;\n  /** Resolve a complete CEP. Omit for a masked input with no lookup. */\n  lookup?: (cep: string) => Promise<CepAddress | null>;\n  /** Maps each resolved address part onto a field in THIS form. */\n  fills?: CepFills;\n  /** Milliseconds to wait after the last keystroke before looking up. */\n  debounceMs?: number;\n}\n\nconst PARTS: readonly CepPart[] = ['street', 'neighborhood', 'city', 'state'];\n\n/** Ownership-aware writes into sibling form fields. */\ninterface OwnedAutofill {\n  /** Write one field, where `''` means \"no value for this part\". */\n  write: (field: string, value: string) => void;\n  /** Blank every field this hook still owns. */\n  clearOwned: () => void;\n}\n\n/**\n * The honesty rule, in one place: this hook remembers exactly what it wrote,\n * writes only into fields that are empty or still hold its own value, and drops\n * the ownership record when it blanks one. That single invariant is what lets\n * autofill replace itself freely while never touching the user's typing.\n */\nfunction useOwnedAutofill(): OwnedAutofill {\n  const { values, setFieldValue } = useFormContext();\n  // What we last auto-filled per target field, so a later lookup may replace\n  // its own value while a manual edit is preserved.\n  const autoFilledRef = useRef<Record<string, string>>({});\n  // Read values at call time without making them a dependency of the callback.\n  const valuesRef = useRef(values);\n  valuesRef.current = values;\n\n  const write = useCallback(\n    (field: string, value: string) => {\n      const current = (valuesRef.current[field] ?? '').trim();\n      const ours = autoFilledRef.current[field] === current;\n      if (current !== '' && !ours) return;\n      setFieldValue(field, value);\n      if (value) {\n        autoFilledRef.current[field] = value;\n      } else {\n        delete autoFilledRef.current[field];\n      }\n    },\n    [setFieldValue],\n  );\n\n  const clearOwned = useCallback(() => {\n    // Object.keys snapshots, so `write` may delete entries as we iterate.\n    for (const field of Object.keys(autoFilledRef.current)) {\n      write(field, '');\n    }\n  }, [write]);\n\n  return useMemo(() => ({ write, clearOwned }), [write, clearOwned]);\n}\n\n/**\n * CEP field bound to {@link useFormContext}: masks and validates the CEP, then\n * writes the resolved logradouro/bairro/cidade/UF straight into the sibling\n * fields named by `fills`.\n *\n * It will not overwrite work the user has done. A target field is only written\n * when it is empty, or when it still holds the exact value THIS component put\n * there — so correcting the CEP re-fills the address, but a hand-edited street\n * survives the next lookup.\n *\n * @example\n * ```tsx\n * <Fields.CepField\n *   name=\"postalCode\"\n *   lookup={lookupCep}\n *   fills={{ street: 'addressLine1', neighborhood: 'neighborhood', city: 'city', state: 'state' }}\n * />\n * ```\n */\nexport function CepField({\n  name,\n  label,\n  lookup,\n  fills,\n  debounceMs,\n  copy,\n}: CepFieldProps): React.ReactElement {\n  const { values, errors, setFieldValue } = useFormContext();\n  const { write, clearOwned } = useOwnedAutofill();\n\n  const handleResolved = useCallback(\n    (address: CepAddress) => {\n      if (!fills) return;\n      // Every mapped part is written on EVERY resolve, absent ones as ''. A\n      // \"CEP geral\" (a small município's catch-all) carries no logradouro, so\n      // skipping absent parts would leave the previous CEP's street here.\n      for (const part of PARTS) {\n        const field = fills[part];\n        if (field) write(field, address[part] ?? '');\n      }\n    },\n    [fills, write],\n  );\n\n  const handleChange = useCallback(\n    (masked: string) => setFieldValue(name, masked),\n    [name, setFieldValue],\n  );\n\n  return (\n    <BaseCepField\n      copy={copy}\n      name={name}\n      label={label}\n      value={values[name] ?? ''}\n      error={errors[name]}\n      onChange={handleChange}\n      onLookup={lookup}\n      onResolved={handleResolved}\n      onNotFound={clearOwned}\n      debounceMs={debounceMs}\n      dataTestId={`total-form-field-${name}`}\n    />\n  );\n}\n"],"mappings":";;;;;;;;AAGA,SAAgB,aAAa,SAAS,cAAc;AAkIhD;AApGJ,IAAM,QAA4B,CAAC,UAAU,gBAAgB,QAAQ,OAAO;AAgB5E,SAAS,mBAAkC;AACzC,QAAM,EAAE,QAAQ,cAAc,IAAI,eAAe;AAGjD,QAAM,gBAAgB,OAA+B,CAAC,CAAC;AAEvD,QAAM,YAAY,OAAO,MAAM;AAC/B,YAAU,UAAU;AAEpB,QAAM,QAAQ;AAAA,IACZ,CAAC,OAAe,UAAkB;AAChC,YAAM,WAAW,UAAU,QAAQ,KAAK,KAAK,IAAI,KAAK;AACtD,YAAM,OAAO,cAAc,QAAQ,KAAK,MAAM;AAC9C,UAAI,YAAY,MAAM,CAAC,KAAM;AAC7B,oBAAc,OAAO,KAAK;AAC1B,UAAI,OAAO;AACT,sBAAc,QAAQ,KAAK,IAAI;AAAA,MACjC,OAAO;AACL,eAAO,cAAc,QAAQ,KAAK;AAAA,MACpC;AAAA,IACF;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,aAAa,YAAY,MAAM;AAEnC,eAAW,SAAS,OAAO,KAAK,cAAc,OAAO,GAAG;AACtD,YAAM,OAAO,EAAE;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO,QAAQ,OAAO,EAAE,OAAO,WAAW,IAAI,CAAC,OAAO,UAAU,CAAC;AACnE;AAqBO,SAASA,UAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsC;AACpC,QAAM,EAAE,QAAQ,QAAQ,cAAc,IAAI,eAAe;AACzD,QAAM,EAAE,OAAO,WAAW,IAAI,iBAAiB;AAE/C,QAAM,iBAAiB;AAAA,IACrB,CAAC,YAAwB;AACvB,UAAI,CAAC,MAAO;AAIZ,iBAAW,QAAQ,OAAO;AACxB,cAAM,QAAQ,MAAM,IAAI;AACxB,YAAI,MAAO,OAAM,OAAO,QAAQ,IAAI,KAAK,EAAE;AAAA,MAC7C;AAAA,IACF;AAAA,IACA,CAAC,OAAO,KAAK;AAAA,EACf;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,WAAmB,cAAc,MAAM,MAAM;AAAA,IAC9C,CAAC,MAAM,aAAa;AAAA,EACtB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,OAAO,IAAI,KAAK;AAAA,MACvB,OAAO,OAAO,IAAI;AAAA,MAClB,UAAU;AAAA,MACV,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ;AAAA,MACA,YAAY,oBAAoB,IAAI;AAAA;AAAA,EACtC;AAEJ;","names":["CepField"]}