@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-EJYJLVPK.js

@@ -0,0 +1,203 @@
+import {
+  glowAnimation,
+  pulseAnimation,
+  shimmerAnimation
+} from "./chunk-IM4DMKH4.js";
+import {
+  accentFor
+} from "./chunk-TCAQOUIB.js";
+import {
+  FIELD_BORDER_WIDTH
+} from "./chunk-PZBK3F52.js";
+import {
+  shadowInk,
+  sheen
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Sheet/Sheet.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var isHorizontalPosition = (position) => position === "left" || position === "right";
+var HORIZONTAL_SIZES = {
+  xs: (theme) => `min(92vw, ${rem(theme, 240)})`,
+  sm: (theme) => `min(92vw, ${rem(theme, 320)})`,
+  md: (theme) => `min(92vw, ${rem(theme, 400)})`,
+  lg: (theme) => `min(92vw, max(${rem(theme, 560)}, 32vw))`,
+  xl: (theme) => `min(92vw, max(${rem(theme, 720)}, 40vw))`,
+  full: () => "100%"
+};
+var VERTICAL_SIZES = {
+  xs: (theme) => `min(${rem(theme, 200)}, 100%)`,
+  sm: (theme) => `min(${rem(theme, 300)}, 100%)`,
+  md: (theme) => `min(${rem(theme, 400)}, 100%)`,
+  lg: (theme) => `min(${rem(theme, 500)}, 100%)`,
+  xl: (theme) => `min(${rem(theme, 600)}, 100%)`
+};
+var verticalMaxWidth = (theme) => `min(100%, ${rem(theme, 640)})`;
+var sizeStyles = ({
+  theme,
+  position,
+  size,
+  isDraggableVariant,
+  currentHeight
+}) => {
+  if (isHorizontalPosition(position)) {
+    return { width: (HORIZONTAL_SIZES[size] ?? HORIZONTAL_SIZES.md)(theme) };
+  }
+  if (size === "full") return { width: "100%", height: "100%" };
+  const cross = { width: verticalMaxWidth(theme), marginInline: "auto" };
+  if (isDraggableVariant && currentHeight !== null) {
+    return { ...cross, height: currentHeight };
+  }
+  return {
+    ...cross,
+    // A CEILING, not a height — see `VERTICAL_SIZES`. `height: auto` is stated
+    // rather than left off so the rule survives a caller who set a height on a
+    // previous render, and it is what lets the panel hug what it holds.
+    height: "auto",
+    maxHeight: (VERTICAL_SIZES[size] ?? VERTICAL_SIZES.md)(theme)
+  };
+};
+var toRgbTriplet = (hexColor) => {
+  const hex = hexColor.replace("#", "");
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  return `${r}, ${g}, ${b}`;
+};
+var roundedStyles = (theme, position) => {
+  const radius = theme.spacing(2);
+  const byPosition = {
+    top: `0 0 ${radius} ${radius}`,
+    bottom: `${radius} ${radius} 0 0`,
+    left: `0 ${radius} ${radius} 0`,
+    right: `${radius} 0 0 ${radius}`
+  };
+  return { borderRadius: byPosition[position] };
+};
+var SURFACES = {
+  draggable: ({ theme, elevation, accent }) => ({
+    boxShadow: `
+            ${theme.shadows[Math.min(elevation + 4, 24)]},
+            ${rems(theme, 0, -2, 10, 0)} ${shadowInk(theme, 0.1)}
+          `,
+    border: `1px solid ${alpha(theme.palette.divider, 0.12)}`,
+    borderTop: `${rem(theme, 2)} solid ${alpha(accent, 0.3)}`,
+    transition: theme.transitions.create(["transform", "box-shadow", "border-color"], {
+      duration: theme.transitions.duration.shorter,
+      easing: theme.transitions.easing.easeInOut
+    }),
+    "&:hover": { borderTopColor: alpha(accent, 0.5) }
+  }),
+  glass: ({ theme, glass }) => ({
+    backgroundColor: alpha(theme.palette.background.paper, glass ? 0.75 : 0.95),
+    backdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,
+    WebkitBackdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,
+    border: `1px solid ${alpha(theme.palette.divider, 0.15)}`,
+    boxShadow: `
+            ${rems(theme, 0, 8, 32, 0)} ${shadowInk(theme, 0.15)},
+            inset 0 0 0 ${FIELD_BORDER_WIDTH}px ${sheen(theme, 0.1)}
+          `
+  }),
+  gradient: ({ theme, color, gradient, accent }) => ({
+    background: gradient ? `linear-gradient(
+                135deg,
+                ${theme.palette.background.paper} 0%,
+                ${alpha(accent, 0.08)} 50%,
+                ${alpha(accentFor(theme, color)?.dark || accent, 0.12)} 100%
+              )` : theme.palette.background.paper,
+    position: "relative",
+    overflow: "hidden",
+    "&::before": gradient ? shimmerOverlay(theme) : {}
+  }),
+  elevated: ({ theme, elevation }) => ({
+    boxShadow: `
+            ${theme.shadows[elevation]},
+            ${rems(theme, 0, 20, 40, -15)} ${shadowInk(theme, 0.15)}
+          `,
+    transform: "translateZ(0)",
+    willChange: "transform"
+  }),
+  minimal: () => ({ boxShadow: "none", border: "none" }),
+  default: () => ({})
+};
+var shimmerOverlay = (theme) => ({
+  content: '""',
+  position: "absolute",
+  top: 0,
+  left: "-100%",
+  width: "100%",
+  height: "100%",
+  background: `linear-gradient(
+              90deg,
+              transparent,
+              ${sheen(theme, 0.2)},
+              transparent
+            )`,
+  animation: `${shimmerAnimation(theme)} 3s infinite`
+});
+var baseSurface = (input, accent) => {
+  const { theme, disabled, isDragging, isAnimating, isDraggableVariant, isVerticalSheet } = input;
+  const colorRgb = toRgbTriplet(accent);
+  return {
+    backgroundColor: theme.palette.background.paper,
+    // A transition would fight the per-frame height writes while a drag or a
+    // snap animation is driving the panel.
+    transition: !isDragging && !isAnimating ? theme.transitions.create(["all"], {
+      duration: theme.transitions.duration.standard,
+      easing: theme.transitions.easing.easeInOut
+    }) : "none",
+    opacity: disabled ? 0.5 : 1,
+    pointerEvents: disabled ? "none" : "auto",
+    cursor: isDraggableVariant && isVerticalSheet ? "grab" : "auto",
+    "--pulse-color": colorRgb,
+    "--glow-color": colorRgb,
+    ...isDragging && { cursor: "grabbing" }
+  };
+};
+var variantStyles = (input) => {
+  const { theme, variant, color, position, glow, pulse, rounded } = input;
+  const accent = accentFor(theme, color)?.main || theme.palette.primary.main;
+  return {
+    ...baseSurface(input, accent),
+    // glow first, then pulse: with both set the pulse keyframes win the shared
+    // `animation` slot, which is the order the original spread produced.
+    ...glow && { animation: `${glowAnimation(theme)} 2s ease-in-out infinite`, filter: "brightness(1.05)" },
+    ...pulse && { animation: `${pulseAnimation(theme)} 2s infinite`, position: "relative" },
+    ...rounded && roundedStyles(theme, position),
+    ...(SURFACES[variant] ?? SURFACES.default)({ ...input, accent })
+  };
+};
+var panelSx = (input) => {
+  const { theme, position, size, isDraggableVariant, isVerticalSheet, currentHeight, fullHeight, style } = input;
+  return {
+    // The DEFAULT, so the glow and the elevated shadow are not clipped by the
+    // panel they hang off. It used to be stated last, which made it a rule
+    // nothing could override — including `gradient`, whose own `overflow:
+    // hidden` is what keeps its shimmer inside the panel. That was invisible
+    // while every vertical sheet was full-bleed, because the sweep starts at
+    // `left: -100%` and a full-width panel put it off-screen; a 640px one puts
+    // it on the backdrop beside the sheet.
+    overflow: "visible",
+    ...sizeStyles({ theme, position, size, isDraggableVariant, currentHeight }),
+    // A COLUMN, so `maxHeight` above can be a ceiling rather than a height: the
+    // body is then a flex item that shrinks against it, and the scrolling falls
+    // to `SheetContent` where it belongs. Without this the panel would clip a
+    // long sheet instead of scrolling it.
+    ...isVerticalSheet ? { display: "flex", flexDirection: "column" } : {},
+    ...variantStyles(input),
+    ...style,
+    // Expand only the cross axis so the chosen `size` still governs the main
+    // axis: side sheets keep their (responsive) width and go full-height;
+    // top/bottom sheets keep their height and go full-width.
+    ...fullHeight && !isDraggableVariant && (isHorizontalPosition(position) ? { height: "100%" } : { width: "100%" })
+  };
+};
+
+export {
+  panelSx
+};
+//# sourceMappingURL=chunk-EJYJLVPK.js.map

package/dist/chunk-EJYJLVPK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Sheet/Sheet.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport type React from 'react';\n\nimport { glowAnimation, pulseAnimation, shimmerAnimation } from './Sheet.animations';\nimport type { SheetProps } from './Sheet.types';\nimport { FIELD_BORDER_WIDTH } from '../../../tokens/field-height';\nimport { shadowInk, sheen } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\nimport { accentFor } from '../../../tokens/scales';\n\ntype Position = NonNullable<SheetProps['position']>;\ntype Variant = NonNullable<SheetProps['variant']>;\ntype Size = NonNullable<SheetProps['size']>;\ntype Color = NonNullable<SheetProps['color']>;\n\nconst isHorizontalPosition = (position: Position) => position === 'left' || position === 'right';\n\n/**\n * Horizontal (left/right) sheets are viewport-aware: a design-px floor (through\n * `rem`) keeps the panel\n * usable, `…vw` lets the larger presets grow on wide screens (lg ≥32%, xl ≥40%\n * of the viewport), and the outer `min(92vw, …)` guarantees the panel never\n * overflows a small screen.\n */\nconst HORIZONTAL_SIZES: Record<Size, (theme: Theme) => string> = {\n  xs: (theme) => `min(92vw, ${rem(theme, 240)})`,\n  sm: (theme) => `min(92vw, ${rem(theme, 320)})`,\n  md: (theme) => `min(92vw, ${rem(theme, 400)})`,\n  lg: (theme) => `min(92vw, max(${rem(theme, 560)}, 32vw))`,\n  xl: (theme) => `min(92vw, max(${rem(theme, 720)}, 40vw))`,\n  full: () => '100%',\n};\n\n/**\n * `size` governs a vertical sheet's MAIN axis, and it is a CEILING rather than\n * a height: the panel is as tall as what it holds, and starts scrolling only\n * once that would pass the preset.\n *\n * It was a fixed `height`, which meant a short sheet reserved the rest of the\n * preset as dead space — a `md` sheet holding three lines and a button drew a\n * 400px panel and floated them in it. `min(…, 100%)` keeps the ceiling under\n * the viewport, which is also what MUI's own bottom paper asks for.\n *\n * `full` is absent on purpose: it is not a ceiling, it is the whole viewport,\n * and `sizeStyles` answers it before it gets here.\n */\nconst VERTICAL_SIZES: Record<Exclude<Size, 'full'>, (theme: Theme) => string> = {\n  xs: (theme) => `min(${rem(theme, 200)}, 100%)`,\n  sm: (theme) => `min(${rem(theme, 300)}, 100%)`,\n  md: (theme) => `min(${rem(theme, 400)}, 100%)`,\n  lg: (theme) => `min(${rem(theme, 500)}, 100%)`,\n  xl: (theme) => `min(${rem(theme, 600)}, 100%)`,\n};\n\n/**\n * How wide a top/bottom sheet is allowed to get — its CROSS axis, so it is one\n * rule rather than one per `size` preset.\n *\n * A bottom sheet spanning the full width is a phone layout, and it was the only\n * layout this component had: on a desktop a panel holding a sentence and one\n * button was drawn 1900px wide, with the content stranded in the middle of it.\n * 640px is Material's own ceiling for a bottom sheet above the handset\n * breakpoint, and below it `100%` gives the phone back exactly what it had.\n *\n * `fullHeight` is the documented opt-out — it expands a vertical sheet along\n * this axis — and it becomes meaningful here for the first time: it used to\n * name the behaviour every bottom sheet already had.\n */\nconst verticalMaxWidth = (theme: Theme): string => `min(100%, ${rem(theme, 640)})`;\n\ninterface SizeStyleInput {\n  theme: Theme;\n  position: Position;\n  size: Size;\n  isDraggableVariant: boolean;\n  currentHeight: number | null;\n}\n\nconst sizeStyles = ({\n  theme,\n  position,\n  size,\n  isDraggableVariant,\n  currentHeight,\n}: SizeStyleInput) => {\n  if (isHorizontalPosition(position)) {\n    return { width: (HORIZONTAL_SIZES[size] ?? HORIZONTAL_SIZES.md)(theme) };\n  }\n\n  // `full` is not a size on the scale — it is THE WHOLE VIEWPORT, on both axes,\n  // and it has to stay that: a consumer using it for a phone takeover would\n  // otherwise get a content-hugging 640px card out of a catalog bump, with\n  // nothing in the API left to ask for what they had. So it is answered before\n  // either rule below touches it.\n  if (size === 'full') return { width: '100%', height: '100%' };\n\n  // The cross axis is the same rule whatever the preset, and the draggable\n  // variant needs it too — dragging moves the panel's height, never its width.\n  // `marginInline` is what centres it: MUI pins the bottom paper `left: 0;\n  // right: 0`, so a definite width plus auto margins resolves to the middle.\n  const cross = { width: verticalMaxWidth(theme), marginInline: 'auto' };\n\n  // The draggable variant owns its own height: the snap point decides it, so a\n  // preset would fight the drag.\n  if (isDraggableVariant && currentHeight !== null) {\n    return { ...cross, height: currentHeight };\n  }\n\n  return {\n    ...cross,\n    // A CEILING, not a height — see `VERTICAL_SIZES`. `height: auto` is stated\n    // rather than left off so the rule survives a caller who set a height on a\n    // previous render, and it is what lets the panel hug what it holds.\n    height: 'auto',\n    maxHeight: (VERTICAL_SIZES[size] ?? VERTICAL_SIZES.md)(theme),\n  };\n};\n\n/** `r, g, b` for a hex colour, so it can feed an `rgba(var(--x), a)` custom property. */\nconst toRgbTriplet = (hexColor: string) => {\n  const hex = hexColor.replace('#', '');\n  const r = parseInt(hex.substring(0, 2), 16);\n  const g = parseInt(hex.substring(2, 4), 16);\n  const b = parseInt(hex.substring(4, 6), 16);\n  return `${r}, ${g}, ${b}`;\n};\n\nconst roundedStyles = (theme: Theme, position: Position) => {\n  const radius = theme.spacing(2);\n  const byPosition: Record<Position, string> = {\n    top: `0 0 ${radius} ${radius}`,\n    bottom: `${radius} ${radius} 0 0`,\n    left: `0 ${radius} ${radius} 0`,\n    right: `${radius} 0 0 ${radius}`,\n  };\n  return { borderRadius: byPosition[position] };\n};\n\ninterface VariantStyleInput {\n  theme: Theme;\n  variant: Variant;\n  color: Color;\n  position: Position;\n  elevation: number;\n  glow: boolean;\n  pulse: boolean;\n  glass: boolean;\n  gradient: boolean;\n  rounded: boolean;\n  disabled: boolean;\n  isDragging: boolean;\n  isAnimating: boolean;\n  isDraggableVariant: boolean;\n  isVerticalSheet: boolean;\n}\n\ntype SurfaceInput = VariantStyleInput & { accent: string };\n\n/**\n * Each variant's own additions to the shared surface — never the shared part\n * itself. Every arm of the old switch re-spread the same base, glow, pulse and\n * rounded objects before adding these few rules; `variantStyles` applies that\n * prefix once and lets the table hold only what actually differs.\n */\nconst SURFACES: Record<Variant, (input: SurfaceInput) => Record<string, unknown>> = {\n  draggable: ({ theme, elevation, accent }) => ({\n    boxShadow: `\n            ${theme.shadows[Math.min(elevation + 4, 24)]},\n            ${rems(theme, 0, -2, 10, 0)} ${shadowInk(theme, 0.1)}\n          `,\n    border: `1px solid ${alpha(theme.palette.divider, 0.12)}`,\n    borderTop: `${rem(theme, 2)} solid ${alpha(accent, 0.3)}`,\n    transition: theme.transitions.create(['transform', 'box-shadow', 'border-color'], {\n      duration: theme.transitions.duration.shorter,\n      easing: theme.transitions.easing.easeInOut,\n    }),\n    '&:hover': { borderTopColor: alpha(accent, 0.5) },\n  }),\n\n  glass: ({ theme, glass }) => ({\n    backgroundColor: alpha(theme.palette.background.paper, glass ? 0.75 : 0.95),\n    backdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,\n    WebkitBackdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,\n    border: `1px solid ${alpha(theme.palette.divider, 0.15)}`,\n    boxShadow: `\n            ${rems(theme, 0, 8, 32, 0)} ${shadowInk(theme, 0.15)},\n            inset 0 0 0 ${FIELD_BORDER_WIDTH}px ${sheen(theme, 0.1)}\n          `,\n  }),\n\n  gradient: ({ theme, color, gradient, accent }) => ({\n    background: gradient\n      ? `linear-gradient(\n                135deg,\n                ${theme.palette.background.paper} 0%,\n                ${alpha(accent, 0.08)} 50%,\n                ${alpha(accentFor(theme, color)?.dark || accent, 0.12)} 100%\n              )`\n      : theme.palette.background.paper,\n    position: 'relative' as const,\n    overflow: 'hidden' as const,\n    '&::before': gradient ? shimmerOverlay(theme) : {},\n  }),\n\n  elevated: ({ theme, elevation }) => ({\n    boxShadow: `\n            ${theme.shadows[elevation]},\n            ${rems(theme, 0, 20, 40, -15)} ${shadowInk(theme, 0.15)}\n          `,\n    transform: 'translateZ(0)',\n    willChange: 'transform',\n  }),\n\n  minimal: () => ({ boxShadow: 'none', border: 'none' }),\n\n  default: () => ({}),\n};\n\n/** The sweep of light the gradient variant runs across itself. */\nconst shimmerOverlay = (theme: Theme) => ({\n  content: '\"\"',\n  position: 'absolute',\n  top: 0,\n  left: '-100%',\n  width: '100%',\n  height: '100%',\n  background: `linear-gradient(\n              90deg,\n              transparent,\n              ${sheen(theme, 0.2)},\n              transparent\n            )`,\n  animation: `${shimmerAnimation(theme)} 3s infinite`,\n});\n\n/**\n * The parts of the surface that do not depend on the variant: the paper colour,\n * the transition suppression while a drag or spring is driving the panel, the\n * disabled and cursor states, and the two colour custom properties the glow and\n * pulse keyframes read.\n */\nconst baseSurface = (input: VariantStyleInput, accent: string) => {\n  const { theme, disabled, isDragging, isAnimating, isDraggableVariant, isVerticalSheet } = input;\n  const colorRgb = toRgbTriplet(accent);\n\n  return {\n    backgroundColor: theme.palette.background.paper,\n    // A transition would fight the per-frame height writes while a drag or a\n    // snap animation is driving the panel.\n    transition:\n      !isDragging && !isAnimating\n        ? theme.transitions.create(['all'], {\n            duration: theme.transitions.duration.standard,\n            easing: theme.transitions.easing.easeInOut,\n          })\n        : 'none',\n    opacity: disabled ? 0.5 : 1,\n    pointerEvents: disabled ? ('none' as const) : ('auto' as const),\n    cursor: isDraggableVariant && isVerticalSheet ? 'grab' : 'auto',\n    '--pulse-color': colorRgb,\n    '--glow-color': colorRgb,\n    ...(isDragging && { cursor: 'grabbing' }),\n  };\n};\n\nconst variantStyles = (input: VariantStyleInput) => {\n  const { theme, variant, color, position, glow, pulse, rounded } = input;\n  const accent = accentFor(theme, color)?.main || theme.palette.primary.main;\n\n  return {\n    ...baseSurface(input, accent),\n    // glow first, then pulse: with both set the pulse keyframes win the shared\n    // `animation` slot, which is the order the original spread produced.\n    ...(glow && { animation: `${glowAnimation(theme)} 2s ease-in-out infinite`, filter: 'brightness(1.05)' }),\n    ...(pulse && { animation: `${pulseAnimation(theme)} 2s infinite`, position: 'relative' as const }),\n    ...(rounded && roundedStyles(theme, position)),\n    ...(SURFACES[variant] ?? SURFACES.default)({ ...input, accent }),\n  };\n};\n\ninterface PanelSxInput extends VariantStyleInput {\n  size: Size;\n  currentHeight: number | null;\n  fullHeight: boolean;\n  style?: React.CSSProperties;\n}\n\n/**\n * The drawer paper's complete `sx`: its size, its variant surface, the caller's\n * own `style`, and the full-height rule.\n *\n * Built here rather than in the component so the component holds no style\n * branches of its own — the cross-axis rule below is four on its own.\n */\nexport const panelSx = (input: PanelSxInput): CSSObject => {\n  const { theme, position, size, isDraggableVariant, isVerticalSheet, currentHeight, fullHeight, style } =\n    input;\n\n  return {\n    // The DEFAULT, so the glow and the elevated shadow are not clipped by the\n    // panel they hang off. It used to be stated last, which made it a rule\n    // nothing could override — including `gradient`, whose own `overflow:\n    // hidden` is what keeps its shimmer inside the panel. That was invisible\n    // while every vertical sheet was full-bleed, because the sweep starts at\n    // `left: -100%` and a full-width panel put it off-screen; a 640px one puts\n    // it on the backdrop beside the sheet.\n    overflow: 'visible',\n    ...sizeStyles({ theme, position, size, isDraggableVariant, currentHeight }),\n    // A COLUMN, so `maxHeight` above can be a ceiling rather than a height: the\n    // body is then a flex item that shrinks against it, and the scrolling falls\n    // to `SheetContent` where it belongs. Without this the panel would clip a\n    // long sheet instead of scrolling it.\n    ...(isVerticalSheet ? { display: 'flex', flexDirection: 'column' } : {}),\n    ...variantStyles(input),\n    ...style,\n    // Expand only the cross axis so the chosen `size` still governs the main\n    // axis: side sheets keep their (responsive) width and go full-height;\n    // top/bottom sheets keep their height and go full-width.\n    ...(fullHeight &&\n      !isDraggableVariant &&\n      (isHorizontalPosition(position) ? { height: '100%' } : { width: '100%' })),\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-F6D6HXZU.js

@@ -0,0 +1,125 @@
+import {
+  Input
+} from "./chunk-VURQZBFH.js";
+import {
+  FormControl,
+  FormLabel,
+  FormMessage
+} from "./chunk-D6KL74KI.js";
+
+// src/components/form/CepField/CepField.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cepDigits, formatCep, isValidCep } from "@12-apps/forms-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function useCepLookup({
+  digits,
+  complete,
+  disabled,
+  debounceMs,
+  onLookup,
+  onResolved,
+  onNotFound
+}) {
+  const [status, setStatus] = useState("idle");
+  const lastQueriedRef = useRef("");
+  const seqRef = useRef(0);
+  const lookupRef = useRef(onLookup);
+  const resolvedRef = useRef(onResolved);
+  const notFoundRef = useRef(onNotFound);
+  lookupRef.current = onLookup;
+  resolvedRef.current = onResolved;
+  notFoundRef.current = onNotFound;
+  useEffect(() => {
+    if (!complete || disabled || !lookupRef.current) {
+      seqRef.current += 1;
+      setStatus("idle");
+      lastQueriedRef.current = "";
+      return;
+    }
+    if (lastQueriedRef.current === digits) return;
+    const mySeq = seqRef.current += 1;
+    const handle = setTimeout(() => {
+      lastQueriedRef.current = digits;
+      setStatus("loading");
+      void (async () => {
+        const address = await Promise.resolve().then(() => lookupRef.current?.(digits)).catch(() => null);
+        if (seqRef.current !== mySeq) return;
+        setStatus(address ? "found" : "notfound");
+        if (address) resolvedRef.current?.(address);
+        else notFoundRef.current?.();
+      })();
+    }, debounceMs);
+    return () => clearTimeout(handle);
+  }, [digits, complete, disabled, debounceMs]);
+  return status;
+}
+function CepStatus({
+  status,
+  testId,
+  suppressed,
+  copy
+}) {
+  const visible = !suppressed && status !== "idle";
+  return /* @__PURE__ */ jsx("span", { id: `${testId}-status`, role: "status", "aria-live": "polite", children: visible && /* @__PURE__ */ jsx(FormMessage, { error: status === "notfound", dataTestId: `${testId}-${status}`, children: copy[status] }) });
+}
+function CepField({
+  value,
+  onChange,
+  onLookup,
+  onResolved,
+  onNotFound,
+  label = "CEP",
+  placeholder = "00000-000",
+  error,
+  disabled = false,
+  debounceMs = 500,
+  name = "postalCode",
+  dataTestId,
+  copy
+}) {
+  const testId = dataTestId ?? `cep-field-${name}`;
+  const status = useCepLookup({
+    digits: cepDigits(value),
+    complete: isValidCep(value),
+    disabled,
+    debounceMs,
+    onLookup,
+    onResolved,
+    onNotFound
+  });
+  const handleChange = useCallback(
+    (event) => onChange(formatCep(event.target.value)),
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, children: [
+    label && /* @__PURE__ */ jsx(FormLabel, { htmlFor: name, error: Boolean(error), children: label }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: name,
+        name,
+        type: "text",
+        inputMode: "numeric",
+        autoComplete: "postal-code",
+        placeholder,
+        value,
+        error: Boolean(error),
+        disabled,
+        loading: status === "loading",
+        onChange: handleChange,
+        "data-testid": testId,
+        "aria-describedby": `${testId}-status`,
+        "aria-busy": status === "loading"
+      }
+    ),
+    error && /* @__PURE__ */ jsx(FormMessage, { error: true, dataTestId: `${testId}-message`, children: error }),
+    /* @__PURE__ */ jsx(CepStatus, { status, testId, suppressed: Boolean(error), copy })
+  ] });
+}
+var CepField_default = CepField;
+
+export {
+  CepField,
+  CepField_default
+};
+//# sourceMappingURL=chunk-F6D6HXZU.js.map

package/dist/chunk-FC7NQ6XM.js

@@ -0,0 +1,68 @@
+import {
+  ErrorState
+} from "./chunk-PBMCRDZI.js";
+import {
+  LoadingState
+} from "./chunk-E4TNDTWV.js";
+import {
+  EmptyState
+} from "./chunk-HN3PZTUK.js";
+
+// src/components/data-display/AsyncStateContainer/AsyncStateContainer.tsx
+import Box from "@mui/material/Box/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var StateBox = ({ state, className, dataTestId, children }) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    className,
+    "data-testid": dataTestId || "async-state-container",
+    "data-state": state,
+    children
+  }
+);
+var errorMessageOf = (error) => {
+  if (!error) return "";
+  if (typeof error === "string") return error;
+  if (error instanceof Error) return error.message;
+  return "An unexpected error occurred";
+};
+var pickNode = (node, render, fallback) => node || render?.() || fallback;
+var AsyncStateContainer = React.memo(
+  ({
+    isLoading = false,
+    error,
+    isEmpty = false,
+    children,
+    loadingComponent,
+    renderLoading,
+    errorComponent,
+    renderError,
+    emptyComponent,
+    emptyTitle,
+    renderEmpty,
+    className,
+    dataTestId
+  }) => {
+    const box = { className, dataTestId };
+    if (isLoading) {
+      return /* @__PURE__ */ jsx(StateBox, { state: "loading", ...box, children: pickNode(loadingComponent, renderLoading, /* @__PURE__ */ jsx(LoadingState, {})) });
+    }
+    if (error) {
+      const message = errorMessageOf(error);
+      return /* @__PURE__ */ jsx(StateBox, { state: "error", ...box, children: errorComponent || renderError?.(message) || /* @__PURE__ */ jsx(ErrorState, { message }) });
+    }
+    if (isEmpty) {
+      return /* @__PURE__ */ jsx(StateBox, { state: "empty", ...box, children: pickNode(emptyComponent, renderEmpty, /* @__PURE__ */ jsx(EmptyState, { title: emptyTitle })) });
+    }
+    return /* @__PURE__ */ jsx(StateBox, { state: "success", ...box, children });
+  }
+);
+AsyncStateContainer.displayName = "AsyncStateContainer";
+var AsyncStateContainer_default = AsyncStateContainer;
+
+export {
+  AsyncStateContainer,
+  AsyncStateContainer_default
+};
+//# sourceMappingURL=chunk-FC7NQ6XM.js.map

package/dist/chunk-FERUQ7OB.js

@@ -0,0 +1,76 @@
+import {
+  accentFor
+} from "./chunk-TCAQOUIB.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/Menubar/Menubar.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var SIZES = {
+  xs: (theme) => ({ minHeight: rem(theme, 40), fontSize: rem(theme, 12), padding: theme.spacing(0.5, 1) }),
+  sm: (theme) => ({ minHeight: rem(theme, 48), fontSize: rem(theme, 14), padding: theme.spacing(0.75, 1.5) }),
+  md: (theme) => ({ minHeight: rem(theme, 56), fontSize: rem(theme, 16), padding: theme.spacing(1, 2) }),
+  lg: (theme) => ({ minHeight: rem(theme, 64), fontSize: rem(theme, 18), padding: theme.spacing(1.25, 2.5) }),
+  xl: (theme) => ({ minHeight: rem(theme, 72), fontSize: rem(theme, 20), padding: theme.spacing(1.5, 3) })
+};
+var sizeStyles = (theme, size) => (SIZES[size] ?? SIZES.md)(theme);
+var accentOf = (theme, color) => color === "neutral" ? theme.palette.primary.main : accentFor(theme, color).main;
+var colorStyles = (theme, color, transparent) => {
+  const surface = color === "neutral" ? { backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary } : { backgroundColor: accentFor(theme, color).main, color: accentFor(theme, color).contrastText };
+  return transparent ? { ...surface, backgroundColor: "transparent" } : surface;
+};
+var SURFACES = {
+  glass: (theme, { glass }) => ({
+    backgroundColor: alpha(theme.palette.background.paper, glass ? 0.1 : 0.8),
+    backdropFilter: `blur(${rem(theme, 20)})`,
+    borderBottom: `1px solid ${alpha(theme.palette.divider, 0.1)}`
+  }),
+  gradient: (theme, { color, gradient }) => {
+    const accent = accentFor(theme, color === "neutral" ? "primary" : color);
+    return {
+      background: gradient ? `linear-gradient(135deg, ${accent.light}, ${accent.dark})` : accent.main,
+      color: accent.contrastText
+    };
+  },
+  elevated: (theme, { blur, elevation }) => ({
+    ...blur && { backdropFilter: `blur(${rem(theme, 10)})` },
+    boxShadow: theme.shadows[elevation]
+  }),
+  minimal: (theme, { blur }) => ({
+    ...blur && { backdropFilter: `blur(${rem(theme, 10)})` },
+    boxShadow: "none",
+    borderBottom: "none"
+  }),
+  bordered: (theme, { blur, color }) => ({
+    ...blur && { backdropFilter: `blur(${rem(theme, 10)})` },
+    borderBottom: `${rem(theme, 2)} solid ${color === "neutral" ? theme.palette.divider : accentFor(theme, color).main}`
+  }),
+  default: (theme, { blur }) => ({ ...blur && { backdropFilter: `blur(${rem(theme, 10)})` } })
+};
+var barStyles = (theme, flags) => {
+  const { variant, size, color, glow, pulse, transparent } = flags;
+  return {
+    transition: theme.transitions.create(["all"], {
+      duration: theme.transitions.duration.standard
+    }),
+    ...sizeStyles(theme, size),
+    ...colorStyles(theme, color, transparent),
+    ...glow && { boxShadow: `0 0 ${rem(theme, 20)} ${alpha(accentOf(theme, color), 0.4)}` },
+    ...pulse && {
+      animation: "pulse 2s infinite",
+      "@keyframes pulse": {
+        "0%": { opacity: 1 },
+        "50%": { opacity: 0.8 },
+        "100%": { opacity: 1 }
+      }
+    },
+    ...(SURFACES[variant] ?? SURFACES.default)(theme, flags)
+  };
+};
+
+export {
+  sizeStyles,
+  barStyles
+};
+//# sourceMappingURL=chunk-FERUQ7OB.js.map

package/dist/chunk-FERUQ7OB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Menubar/Menubar.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport type { MenubarProps } from './Menubar.types';\nimport { accentFor, rem } from '../../../tokens/scales';\n\ntype Size = NonNullable<MenubarProps['size']>;\ntype Variant = NonNullable<MenubarProps['variant']>;\ntype Color = NonNullable<MenubarProps['color']>;\n\nconst SIZES: Record<Size, (theme: Theme) => CSSObject> = {\n  xs: (theme) => ({ minHeight: rem(theme, 40), fontSize: rem(theme, 12), padding: theme.spacing(0.5, 1) }),\n  sm: (theme) => ({ minHeight: rem(theme, 48), fontSize: rem(theme, 14), padding: theme.spacing(0.75, 1.5) }),\n  md: (theme) => ({ minHeight: rem(theme, 56), fontSize: rem(theme, 16), padding: theme.spacing(1, 2) }),\n  lg: (theme) => ({ minHeight: rem(theme, 64), fontSize: rem(theme, 18), padding: theme.spacing(1.25, 2.5) }),\n  xl: (theme) => ({ minHeight: rem(theme, 72), fontSize: rem(theme, 20), padding: theme.spacing(1.5, 3) }),\n};\n\nexport const sizeStyles = (theme: Theme, size: Size): CSSObject =>\n  (SIZES[size] ?? SIZES.md)(theme);\n\n/** `default` is not a palette entry — it means the paper surface and its text. */\nconst accentOf = (theme: Theme, color: Color) =>\n  color === 'neutral' ? theme.palette.primary.main : accentFor(theme, color).main;\n\nconst colorStyles = (theme: Theme, color: Color, transparent: boolean): CSSObject => {\n  const surface =\n    color === 'neutral'\n      ? { backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary }\n      : { backgroundColor: accentFor(theme, color).main, color: accentFor(theme, color).contrastText };\n\n  return transparent ? { ...surface, backgroundColor: 'transparent' } : surface;\n};\n\ninterface MenubarStyleFlags {\n  variant: Variant;\n  size: Size;\n  color: Color;\n  glow: boolean;\n  pulse: boolean;\n  glass: boolean;\n  gradient: boolean;\n  blur: boolean;\n  transparent: boolean;\n  elevation: number;\n}\n\n/**\n * Each variant's own additions to the shared bar. The `glass` and `gradient`\n * arms deliberately do not take the blur spread: glass sets its own\n * backdropFilter, and a blurred gradient loses the gradient.\n */\nconst SURFACES: Record<Variant, (theme: Theme, flags: MenubarStyleFlags) => CSSObject> = {\n  glass: (theme, { glass }) => ({\n    backgroundColor: alpha(theme.palette.background.paper, glass ? 0.1 : 0.8),\n    backdropFilter: `blur(${rem(theme, 20)})`,\n    borderBottom: `1px solid ${alpha(theme.palette.divider, 0.1)}`,\n  }),\n\n  gradient: (theme, { color, gradient }) => {\n    // `neutral` borrows primary for the gradient, as this branch always did.\n    const accent = accentFor(theme, color === 'neutral' ? 'primary' : color);\n    return {\n      background: gradient\n        ? `linear-gradient(135deg, ${accent.light}, ${accent.dark})`\n        : accent.main,\n      color: accent.contrastText,\n    };\n  },\n\n  elevated: (theme, { blur, elevation }) => ({\n    ...(blur && { backdropFilter: `blur(${rem(theme, 10)})` }),\n    boxShadow: theme.shadows[elevation],\n  }),\n\n  minimal: (theme, { blur }) => ({\n    ...(blur && { backdropFilter: `blur(${rem(theme, 10)})` }),\n    boxShadow: 'none',\n    borderBottom: 'none',\n  }),\n\n  bordered: (theme, { blur, color }) => ({\n    ...(blur && { backdropFilter: `blur(${rem(theme, 10)})` }),\n    borderBottom: `${rem(theme, 2)} solid ${\n      color === 'neutral' ? theme.palette.divider : accentFor(theme, color).main\n    }`,\n  }),\n\n  default: (theme, { blur }) => ({ ...(blur && { backdropFilter: `blur(${rem(theme, 10)})` }) }),\n};\n\nexport const barStyles = (theme: Theme, flags: MenubarStyleFlags): CSSObject => {\n  const { variant, size, color, glow, pulse, transparent } = flags;\n\n  return {\n    transition: theme.transitions.create(['all'], {\n      duration: theme.transitions.duration.standard,\n    }),\n    ...sizeStyles(theme, size),\n    ...colorStyles(theme, color, transparent),\n    ...(glow && { boxShadow: `0 0 ${rem(theme, 20)} ${alpha(accentOf(theme, color), 0.4)}` }),\n    ...(pulse && {\n      animation: 'pulse 2s infinite',\n      '@keyframes pulse': {\n        '0%': { opacity: 1 },\n        '50%': { opacity: 0.8 },\n        '100%': { opacity: 1 },\n      },\n    }),\n    ...(SURFACES[variant] ?? SURFACES.default)(theme, flags),\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-FFOQZRFC.js

@@ -0,0 +1,55 @@
+import {
+  buildGridColumns,
+  buildRowActionsColumn,
+  isActionsColumn
+} from "./chunk-75LOTMSN.js";
+
+// src/components/data-display/DataViews/data-views-columns.ts
+import { useMemo } from "react";
+function computeHideableColumns(columns) {
+  return columns.filter((col) => col.hideable !== false && typeof col.header === "string" && col.header !== "").map((col) => ({ id: col.id, label: col.header }));
+}
+function appendActionsColumn(columns, opts) {
+  const { rowActions, rowActionsLeading, renderRowMenu, testIdPrefix, getRowId } = opts;
+  if (!rowActions && !renderRowMenu || columns.some(isActionsColumn)) return columns;
+  return [
+    ...columns,
+    buildRowActionsColumn({
+      rowActions: rowActions ?? [],
+      leading: rowActionsLeading,
+      testIdPrefix,
+      getRowId,
+      renderRowMenu
+    })
+  ];
+}
+function useColumnsWithActions(columns, opts) {
+  const { rowActions, rowActionsLeading, renderRowMenu, testIdPrefix, getRowId } = opts;
+  const columnsWithActions = useMemo(
+    () => appendActionsColumn(columns, { rowActions, rowActionsLeading, renderRowMenu, testIdPrefix, getRowId }),
+    [columns, rowActions, rowActionsLeading, renderRowMenu, testIdPrefix, getRowId]
+  );
+  const allColumnIds = useMemo(() => columnsWithActions.map((col) => col.id), [columnsWithActions]);
+  return { columnsWithActions, allColumnIds };
+}
+function applyOrder(columns, order) {
+  if (!order || order.length === 0) return columns;
+  const byId = new Map(columns.map((column) => [column.id, column]));
+  const ordered = order.map((id) => byId.get(id)).filter((c) => Boolean(c));
+  const seen = new Set(ordered.map((column) => column.id));
+  return [...ordered, ...columns.filter((column) => !seen.has(column.id))];
+}
+function useRenderedColumns(columnsWithActions, visibleColumns, onRowClick, order) {
+  const gridColumns = useMemo(
+    () => buildGridColumns(applyOrder(columnsWithActions, order), visibleColumns, onRowClick),
+    [columnsWithActions, onRowClick, visibleColumns, order]
+  );
+  const hideableColumns = useMemo(() => computeHideableColumns(columnsWithActions), [columnsWithActions]);
+  return { gridColumns, hideableColumns };
+}
+
+export {
+  useColumnsWithActions,
+  useRenderedColumns
+};
+//# sourceMappingURL=chunk-FFOQZRFC.js.map

package/dist/chunk-FNG33MKA.js

@@ -0,0 +1,41 @@
+import {
+  useFormContext
+} from "./chunk-4XK6JQ4D.js";
+import {
+  ToggleGroup
+} from "./chunk-W5TI46QN.js";
+import {
+  FormControl,
+  FormLabel,
+  FormMessage
+} from "./chunk-D6KL74KI.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-FNG33MKA.js.map