@12-apps/ui 6.11.1 → 6.12.1

package/dist/chunk-U342T7ZR.js

@@ -0,0 +1,162 @@
+import {
+  accordionVariantStyles
+} from "./chunk-MJ3BVWPZ.js";
+
+// src/components/layout/Accordion/Accordion.tsx
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import MuiAccordion from "@mui/material/Accordion/index.js";
+import MuiAccordionActions from "@mui/material/AccordionActions/index.js";
+import MuiAccordionDetails from "@mui/material/AccordionDetails/index.js";
+import MuiAccordionSummary from "@mui/material/AccordionSummary/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var Accordion = ({
+  children,
+  variant = "default",
+  disabled = false,
+  defaultExpanded = false,
+  expanded,
+  onChange,
+  sx,
+  "data-testid": testId = "accordion",
+  ...props
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    MuiAccordion,
+    {
+      disabled,
+      defaultExpanded,
+      expanded,
+      onChange,
+      "data-testid": testId,
+      sx: {
+        ...accordionVariantStyles(theme, variant),
+        ...sx
+      },
+      ...props,
+      children
+    }
+  );
+};
+var AccordionSummary = ({
+  children,
+  expandIcon = /* @__PURE__ */ jsx(ExpandMoreIcon, {}),
+  disabled = false,
+  "data-testid": testId = "accordion-summary",
+  ...props
+}) => {
+  const theme = useTheme();
+  const iconWithTestId = React.isValidElement(expandIcon) ? React.cloneElement(expandIcon, {
+    "data-testid": "accordion-icon"
+  }) : expandIcon;
+  return /* @__PURE__ */ jsx(
+    MuiAccordionSummary,
+    {
+      expandIcon: iconWithTestId,
+      disabled,
+      "data-testid": testId,
+      sx: {
+        minHeight: 56,
+        "& .MuiAccordionSummary-expandIconWrapper": {
+          transition: "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+          color: theme.palette.text.secondary
+        },
+        "& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
+          transform: "rotate(180deg)",
+          color: theme.palette.primary.main
+        },
+        "&:hover": {
+          backgroundColor: alpha(theme.palette.action.hover, 0.04),
+          "& .MuiAccordionSummary-expandIconWrapper": {
+            color: theme.palette.primary.main
+          }
+        },
+        "&.Mui-focusVisible": {
+          outline: `2px solid ${theme.palette.primary.main}`,
+          outlineOffset: 2
+        },
+        // Enhanced keyboard navigation styles
+        "&:focus-visible": {
+          outline: `2px solid ${theme.palette.primary.main}`,
+          outlineOffset: -2
+        }
+      },
+      ...props,
+      children
+    }
+  );
+};
+var AccordionDetails = ({
+  children,
+  "data-testid": testId = "accordion-details",
+  ...props
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    MuiAccordionDetails,
+    {
+      "data-testid": testId,
+      sx: {
+        paddingTop: theme.spacing(1),
+        paddingBottom: theme.spacing(2),
+        borderTop: `1px solid ${alpha(theme.palette.divider, 0.08)}`,
+        // Smooth content reveal animation
+        "& > *": {
+          animation: "fadeInUp 0.4s ease-out"
+        },
+        "@keyframes fadeInUp": {
+          "0%": {
+            opacity: 0,
+            transform: "translateY(8px)"
+          },
+          "100%": {
+            opacity: 1,
+            transform: "translateY(0)"
+          }
+        }
+      },
+      ...props,
+      children
+    }
+  );
+};
+var AccordionActions = ({
+  children,
+  disableSpacing = false,
+  "data-testid": testId = "accordion-actions",
+  ...props
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    MuiAccordionActions,
+    {
+      disableSpacing,
+      "data-testid": testId,
+      sx: {
+        padding: theme.spacing(1, 2),
+        borderTop: `1px solid ${alpha(theme.palette.divider, 0.08)}`,
+        backgroundColor: alpha(theme.palette.background.paper, 0.5),
+        backdropFilter: "blur(8px)",
+        // Animate button entries
+        "& > *": {
+          transition: "all 0.2s ease-in-out",
+          "&:hover": {
+            transform: "translateY(-1px)"
+          }
+        }
+      },
+      ...props,
+      children
+    }
+  );
+};
+
+export {
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  AccordionActions
+};
+//# sourceMappingURL=chunk-U342T7ZR.js.map

package/dist/chunk-U342T7ZR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Accordion/Accordion.tsx"],"sourcesContent":["import ExpandMoreIcon from '@mui/icons-material/ExpandMore';\nimport MuiAccordion from '@mui/material/Accordion/index.js';\nimport MuiAccordionActions from '@mui/material/AccordionActions/index.js';\nimport MuiAccordionDetails from '@mui/material/AccordionDetails/index.js';\nimport MuiAccordionSummary from '@mui/material/AccordionSummary/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { accordionVariantStyles } from './Accordion.styles';\nimport type { \n  AccordionActionsProps, \n  AccordionDetailsProps, \n  AccordionProps, \n  AccordionSummaryProps} from './Accordion.types';\n\nexport const Accordion: React.FC<AccordionProps> = ({\n  children,\n  variant = 'default',\n  disabled = false,\n  defaultExpanded = false,\n  expanded,\n  onChange,\n  sx,\n  'data-testid': testId = 'accordion',\n  ...props\n}) => {\n  const theme = useTheme();\n\n  return (\n    <MuiAccordion\n      disabled={disabled}\n      defaultExpanded={defaultExpanded}\n      expanded={expanded}\n      onChange={onChange}\n      data-testid={testId}\n      sx={{\n        ...accordionVariantStyles(theme, variant),\n        ...sx,\n      }}\n      {...props}\n    >\n      {children}\n    </MuiAccordion>\n  );\n};\n\nexport const AccordionSummary: React.FC<AccordionSummaryProps> = ({\n  children,\n  expandIcon = <ExpandMoreIcon />,\n  disabled = false,\n  'data-testid': testId = 'accordion-summary',\n  ...props\n}) => {\n  const theme = useTheme();\n\n  // Clone expandIcon to add data-testid if it's a valid React element\n  const iconWithTestId = React.isValidElement(expandIcon)\n    ? React.cloneElement(expandIcon as React.ReactElement<{ 'data-testid'?: string }>, {\n        'data-testid': 'accordion-icon',\n      })\n    : expandIcon;\n\n  return (\n    <MuiAccordionSummary\n      expandIcon={iconWithTestId}\n      disabled={disabled}\n      data-testid={testId}\n      sx={{\n        minHeight: 56,\n        '& .MuiAccordionSummary-expandIconWrapper': {\n          transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n          color: theme.palette.text.secondary,\n        },\n        '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {\n          transform: 'rotate(180deg)',\n          color: theme.palette.primary.main,\n        },\n        '&:hover': {\n          backgroundColor: alpha(theme.palette.action.hover, 0.04),\n          '& .MuiAccordionSummary-expandIconWrapper': {\n            color: theme.palette.primary.main,\n          },\n        },\n        '&.Mui-focusVisible': {\n          outline: `2px solid ${theme.palette.primary.main}`,\n          outlineOffset: 2,\n        },\n        // Enhanced keyboard navigation styles\n        '&:focus-visible': {\n          outline: `2px solid ${theme.palette.primary.main}`,\n          outlineOffset: -2,\n        },\n      }}\n      {...props}\n    >\n      {children}\n    </MuiAccordionSummary>\n  );\n};\n\nexport const AccordionDetails: React.FC<AccordionDetailsProps> = ({\n  children,\n  'data-testid': testId = 'accordion-details',\n  ...props\n}) => {\n  const theme = useTheme();\n\n  return (\n    <MuiAccordionDetails \n      data-testid={testId}\n      sx={{\n        paddingTop: theme.spacing(1),\n        paddingBottom: theme.spacing(2),\n        borderTop: `1px solid ${alpha(theme.palette.divider, 0.08)}`,\n        // Smooth content reveal animation\n        '& > *': {\n          animation: 'fadeInUp 0.4s ease-out',\n        },\n        '@keyframes fadeInUp': {\n          '0%': {\n            opacity: 0,\n            transform: 'translateY(8px)',\n          },\n          '100%': {\n            opacity: 1,\n            transform: 'translateY(0)',\n          },\n        },\n      }}\n      {...props}\n    >\n      {children}\n    </MuiAccordionDetails>\n  );\n};\n\nexport const AccordionActions: React.FC<AccordionActionsProps> = ({\n  children,\n  disableSpacing = false,\n  'data-testid': testId = 'accordion-actions',\n  ...props\n}) => {\n  const theme = useTheme();\n\n  return (\n    <MuiAccordionActions \n      disableSpacing={disableSpacing}\n      data-testid={testId}\n      sx={{\n        padding: theme.spacing(1, 2),\n        borderTop: `1px solid ${alpha(theme.palette.divider, 0.08)}`,\n        backgroundColor: alpha(theme.palette.background.paper, 0.5),\n        backdropFilter: 'blur(8px)',\n        // Animate button entries\n        '& > *': {\n          transition: 'all 0.2s ease-in-out',\n          '&:hover': {\n            transform: 'translateY(-1px)',\n          },\n        },\n      }}\n      {...props}\n    >\n      {children}\n    </MuiAccordionActions>\n  );\n};"],"mappings":"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","names":[]}

package/dist/chunk-U7SO3N42.js

@@ -0,0 +1,268 @@
+import {
+  describeViewState
+} from "./chunk-5M4TYFR3.js";
+import {
+  PreviewBox
+} from "./chunk-T4SM36XC.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  Switch
+} from "./chunk-FX5DY6VR.js";
+import {
+  Input
+} from "./chunk-J7VY6KNP.js";
+import {
+  Dialog,
+  DialogContent
+} from "./chunk-S5LE2ARG.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  default as default3
+} from "./chunk-WEBEOBN5.js";
+import {
+  Button
+} from "./chunk-6HLRXICF.js";
+import {
+  Text
+} from "./chunk-VRHBJXZ7.js";
+
+// src/components/data-display/DataViews/SaveViewModal.tsx
+import GroupOutlinedIcon from "@mui/icons-material/GroupOutlined";
+import PushPinOutlinedIcon from "@mui/icons-material/PushPinOutlined";
+import StarOutlineRoundedIcon from "@mui/icons-material/StarOutlineRounded";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FlagRow({
+  icon,
+  title,
+  description,
+  checked,
+  onChange,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      component: "label",
+      sx: {
+        display: "flex",
+        alignItems: "flex-start",
+        gap: 1.5,
+        px: 1,
+        py: 1,
+        borderRadius: 1,
+        cursor: "pointer",
+        "&:hover": { bgcolor: "action.hover" }
+      },
+      children: [
+        /* @__PURE__ */ jsx(default2, { sx: { mt: 0.25, color: "text.disabled", display: "flex" }, children: icon }),
+        /* @__PURE__ */ jsxs(default2, { sx: { minWidth: 0, flex: 1 }, children: [
+          /* @__PURE__ */ jsx(Text, { variant: "body", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { display: "block", fontSize: "0.875rem" }, children: title }) }),
+          /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { display: "block", color: "text.secondary", lineHeight: 1.5 }, children: description }) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            size: "sm",
+            checked,
+            onChange: (_event, value) => onChange(value),
+            dataTestId: testId
+          }
+        )
+      ]
+    }
+  );
+}
+function FlagsSwitches({
+  pinned,
+  shared,
+  isDefault,
+  setPinned,
+  setShared,
+  setIsDefault,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(default3, { spacing: 0, children: [
+    /* @__PURE__ */ jsx(
+      FlagRow,
+      {
+        icon: /* @__PURE__ */ jsx(PushPinOutlinedIcon, { fontSize: "small" }),
+        title: copy.saveView.pinnedTitle,
+        description: copy.saveView.pinnedDescription,
+        checked: pinned,
+        onChange: setPinned,
+        testId: `${testIdPrefix}-save-pinned`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FlagRow,
+      {
+        icon: /* @__PURE__ */ jsx(GroupOutlinedIcon, { fontSize: "small" }),
+        title: copy.saveView.sharedTitle,
+        description: copy.saveView.sharedDescription,
+        checked: shared,
+        onChange: setShared,
+        testId: `${testIdPrefix}-save-shared`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FlagRow,
+      {
+        icon: /* @__PURE__ */ jsx(StarOutlineRoundedIcon, { fontSize: "small" }),
+        title: copy.saveView.setDefaultTitle,
+        description: copy.saveView.setDefaultDescription,
+        checked: isDefault,
+        onChange: setIsDefault,
+        testId: `${testIdPrefix}-save-default`
+      }
+    )
+  ] });
+}
+function seedForm(editing) {
+  if (!editing) {
+    return { name: "", description: "", pinned: false, shared: false, isDefault: false };
+  }
+  return {
+    name: editing.name,
+    description: editing.description ?? "",
+    pinned: editing.pinned,
+    shared: editing.shared,
+    isDefault: editing.isDefault
+  };
+}
+function useSaveViewForm(editing, onSave) {
+  const copy = useDataViewsCopy();
+  const initial = seedForm(editing);
+  const [name, setName] = useState(initial.name);
+  const [description, setDescription] = useState(initial.description);
+  const [pinned, setPinned] = useState(initial.pinned);
+  const [shared, setShared] = useState(initial.shared);
+  const [isDefault, setIsDefault] = useState(initial.isDefault);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState(null);
+  const canSave = name.trim().length > 0 && !saving;
+  async function submit() {
+    setSaving(true);
+    setError(null);
+    try {
+      await onSave({ name: name.trim(), description: description.trim(), shared, pinned, isDefault });
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : copy.saveView.saveFailed);
+    } finally {
+      setSaving(false);
+    }
+  }
+  return {
+    name,
+    description,
+    pinned,
+    shared,
+    isDefault,
+    canSave,
+    error,
+    setName,
+    setDescription,
+    setPinned,
+    setShared,
+    setIsDefault,
+    submit
+  };
+}
+function FormFooter({
+  editing,
+  canSave,
+  onSubmit,
+  onClose,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(default3, { direction: "row", spacing: 1.5, sx: { justifyContent: "flex-end" }, children: [
+    /* @__PURE__ */ jsx(Button, { variant: "text", color: "neutral", onClick: onClose, dataTestId: `${testIdPrefix}-save-cancel`, children: copy.saveView.cancel }),
+    /* @__PURE__ */ jsx(Button, { onClick: onSubmit, disabled: !canSave, dataTestId: `${testIdPrefix}-save-submit`, children: editing ? copy.saveView.submitEditing : copy.saveView.submitCreating })
+  ] });
+}
+function SaveViewModal({
+  open,
+  onClose,
+  currentState,
+  fields,
+  columns,
+  editing,
+  onSave,
+  testIdPrefix = "view"
+}) {
+  const copy = useDataViewsCopy();
+  const form = useSaveViewForm(editing, onSave);
+  const preview = describeViewState(currentState, fields, columns);
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onClose,
+      title: editing ? copy.saveView.titleEditing : copy.saveView.titleCreating,
+      size: "sm",
+      showCloseButton: true,
+      dataTestId: `${testIdPrefix}-save-modal`,
+      children: /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(default3, { spacing: 2, "data-testid": `${testIdPrefix}-save-form`, children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            size: "sm",
+            fullWidth: true,
+            label: copy.saveView.nameLabel,
+            placeholder: copy.saveView.namePlaceholder,
+            value: form.name,
+            onChange: (event) => form.setName(event.target.value),
+            "data-testid": `${testIdPrefix}-save-name`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            size: "sm",
+            fullWidth: true,
+            label: copy.saveView.descriptionLabel,
+            placeholder: copy.saveView.descriptionPlaceholder,
+            value: form.description,
+            onChange: (event) => form.setDescription(event.target.value),
+            "data-testid": `${testIdPrefix}-save-description`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FlagsSwitches,
+          {
+            pinned: form.pinned,
+            shared: form.shared,
+            isDefault: form.isDefault,
+            setPinned: form.setPinned,
+            setShared: form.setShared,
+            setIsDefault: form.setIsDefault,
+            testIdPrefix
+          }
+        ),
+        /* @__PURE__ */ jsx(PreviewBox, { preview, testIdPrefix }),
+        form.error && /* @__PURE__ */ jsx(Text, { variant: "caption", color: "danger", as: "p", "data-testid": `${testIdPrefix}-save-error`, children: form.error }),
+        /* @__PURE__ */ jsx(
+          FormFooter,
+          {
+            editing,
+            canSave: form.canSave,
+            onSubmit: () => void form.submit(),
+            onClose,
+            testIdPrefix
+          }
+        )
+      ] }) })
+    }
+  );
+}
+
+export {
+  SaveViewModal
+};
+//# sourceMappingURL=chunk-U7SO3N42.js.map

package/dist/chunk-U7SO3N42.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/SaveViewModal.tsx"],"sourcesContent":["\"use client\";\n\nimport GroupOutlinedIcon from \"@mui/icons-material/GroupOutlined\";\nimport PushPinOutlinedIcon from \"@mui/icons-material/PushPinOutlined\";\nimport StarOutlineRoundedIcon from \"@mui/icons-material/StarOutlineRounded\";\nimport { useState } from \"react\";\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { Dialog, DialogContent } from \"../../feedback/Dialog\";\nimport { Button } from \"../../form/Button\";\nimport { Input } from \"../../form/Input\";\nimport { Switch } from \"../../form/Switch\";\nimport { Box } from \"../../../mui/Box\";\nimport { Stack } from \"../../../mui/Stack\";\nimport { Text } from \"../../typography/Text\";\n\nimport { describeViewState } from \"./data-views-preview\";\nimport { PreviewBox } from \"./save-view-preview\";\nimport type {\n  DataViewColumn,\n  DataViewState,\n  FilterFieldConfig,\n  SavedViewSummary,\n} from \"./data-views-types\";\n\n/** The values the modal collects (the current view state is captured by the parent). */\nexport interface SaveViewPayload {\n  name: string;\n  description: string;\n  shared: boolean;\n  pinned: boolean;\n  isDefault: boolean;\n}\n\ninterface SaveViewModalProps<T extends Record<string, unknown>> {\n  open: boolean;\n  onClose: () => void;\n  /** The state being saved (drives the preview). */\n  currentState: DataViewState;\n  fields: FilterFieldConfig<T>[];\n  columns: DataViewColumn<T>[];\n  /** When set, the modal edits this view (seeds the form + becomes \"Salvar alterações\"). */\n  editing?: SavedViewSummary | null;\n  onSave: (payload: SaveViewPayload) => Promise<void> | void;\n  testIdPrefix?: string;\n}\n\ninterface FlagsSwitchesProps {\n  pinned: boolean;\n  shared: boolean;\n  isDefault: boolean;\n  setPinned: (value: boolean) => void;\n  setShared: (value: boolean) => void;\n  setIsDefault: (value: boolean) => void;\n  testIdPrefix: string;\n}\n\n/**\n * One flag: what it is, and what it DOES. A bare \"Fixar na barra lateral\"\n * beside a switch asks the operator to guess where it appears and to whom —\n * the sentence is the difference between a labelled toggle and an explained one.\n */\nfunction FlagRow({\n  icon,\n  title,\n  description,\n  checked,\n  onChange,\n  testId,\n}: {\n  icon: React.ReactNode;\n  title: string;\n  description: string;\n  checked: boolean;\n  onChange: (value: boolean) => void;\n  testId: string;\n}): React.JSX.Element {\n  return (\n    <Box\n      component=\"label\"\n      sx={{\n        display: \"flex\",\n        alignItems: \"flex-start\",\n        gap: 1.5,\n        px: 1,\n        py: 1,\n        borderRadius: 1,\n        cursor: \"pointer\",\n        \"&:hover\": { bgcolor: \"action.hover\" },\n      }}\n    >\n      <Box sx={{ mt: 0.25, color: \"text.disabled\", display: \"flex\" }}>{icon}</Box>\n      <Box sx={{ minWidth: 0, flex: 1 }}>\n        <Text variant=\"body\" as=\"span\">\n          <Box component=\"span\" sx={{ display: \"block\", fontSize: \"0.875rem\" }}>\n            {title}\n          </Box>\n        </Text>\n        <Text variant=\"caption\" as=\"span\">\n          <Box component=\"span\" sx={{ display: \"block\", color: \"text.secondary\", lineHeight: 1.5 }}>\n            {description}\n          </Box>\n        </Text>\n      </Box>\n      <Switch\n        size=\"sm\"\n        checked={checked}\n        onChange={(_event, value) => onChange(value)}\n        dataTestId={testId}\n      />\n    </Box>\n  );\n}\n\nfunction FlagsSwitches({\n  pinned,\n  shared,\n  isDefault,\n  setPinned,\n  setShared,\n  setIsDefault,\n  testIdPrefix,\n}: FlagsSwitchesProps): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <Stack spacing={0}>\n      <FlagRow\n        icon={<PushPinOutlinedIcon fontSize=\"small\" />}\n        title={copy.saveView.pinnedTitle}\n        description={copy.saveView.pinnedDescription}\n        checked={pinned}\n        onChange={setPinned}\n        testId={`${testIdPrefix}-save-pinned`}\n      />\n      <FlagRow\n        icon={<GroupOutlinedIcon fontSize=\"small\" />}\n        title={copy.saveView.sharedTitle}\n        description={copy.saveView.sharedDescription}\n        checked={shared}\n        onChange={setShared}\n        testId={`${testIdPrefix}-save-shared`}\n      />\n      <FlagRow\n        icon={<StarOutlineRoundedIcon fontSize=\"small\" />}\n        title={copy.saveView.setDefaultTitle}\n        description={copy.saveView.setDefaultDescription}\n        checked={isDefault}\n        onChange={setIsDefault}\n        testId={`${testIdPrefix}-save-default`}\n      />\n    </Stack>\n  );\n}\n\ninterface SaveViewFormState {\n  name: string;\n  description: string;\n  pinned: boolean;\n  shared: boolean;\n  isDefault: boolean;\n  canSave: boolean;\n  error: string | null;\n  setName: (value: string) => void;\n  setDescription: (value: string) => void;\n  setPinned: (value: boolean) => void;\n  setShared: (value: boolean) => void;\n  setIsDefault: (value: boolean) => void;\n  submit: () => Promise<void>;\n}\n\n/** The initial form values, seeded from an edited view (or blank for create). */\nfunction seedForm(editing: SavedViewSummary | null | undefined): SaveViewPayload {\n  if (!editing) {\n    return { name: \"\", description: \"\", pinned: false, shared: false, isDefault: false };\n  }\n  return {\n    name: editing.name,\n    description: editing.description ?? \"\",\n    pinned: editing.pinned,\n    shared: editing.shared,\n    isDefault: editing.isDefault,\n  };\n}\n\n/** Local form state + submit for {@link SaveViewModal}, seeded from an edited view. */\nfunction useSaveViewForm(\n  editing: SavedViewSummary | null | undefined,\n  onSave: (payload: SaveViewPayload) => Promise<void> | void,\n): SaveViewFormState {\n  const copy = useDataViewsCopy();\n  const initial = seedForm(editing);\n  const [name, setName] = useState(initial.name);\n  const [description, setDescription] = useState(initial.description);\n  const [pinned, setPinned] = useState(initial.pinned);\n  const [shared, setShared] = useState(initial.shared);\n  const [isDefault, setIsDefault] = useState(initial.isDefault);\n  const [saving, setSaving] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const canSave = name.trim().length > 0 && !saving;\n\n  async function submit(): Promise<void> {\n    setSaving(true);\n    setError(null);\n    // A rejected save (e.g. duplicate name) is caught here so the modal stays\n    // open and shows the reason; the finally always re-enables the button.\n    try {\n      await onSave({ name: name.trim(), description: description.trim(), shared, pinned, isDefault });\n    } catch (cause) {\n      setError(cause instanceof Error ? cause.message : copy.saveView.saveFailed);\n    } finally {\n      setSaving(false);\n    }\n  }\n\n  return {\n    name,\n    description,\n    pinned,\n    shared,\n    isDefault,\n    canSave,\n    error,\n    setName,\n    setDescription,\n    setPinned,\n    setShared,\n    setIsDefault,\n    submit,\n  };\n}\n\n/**\n * The \"Salvar visão\" modal (FUT-89): captures a name + description and the pin /\n * share / default flags, and previews the filters, visible columns, and sort the\n * view will store. Used for both create and edit.\n */\n/**\n * The dialog's two buttons.\n *\n * Cancel first, primary last: the confirming action sits where the eye lands\n * at the end of the dialog, not before the way out.\n */\nfunction FormFooter({\n  editing,\n  canSave,\n  onSubmit,\n  onClose,\n  testIdPrefix,\n}: {\n  editing: SaveViewModalProps<never>[\"editing\"];\n  canSave: boolean;\n  onSubmit: () => void;\n  onClose: () => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <Stack direction=\"row\" spacing={1.5} sx={{ justifyContent: \"flex-end\" }}>\n      <Button variant=\"text\" color=\"neutral\" onClick={onClose} dataTestId={`${testIdPrefix}-save-cancel`}>\n        {copy.saveView.cancel}\n      </Button>\n      <Button onClick={onSubmit} disabled={!canSave} dataTestId={`${testIdPrefix}-save-submit`}>\n        {editing ? copy.saveView.submitEditing : copy.saveView.submitCreating}\n      </Button>\n    </Stack>\n  );\n}\n\nexport function SaveViewModal<T extends Record<string, unknown>>({\n  open,\n  onClose,\n  currentState,\n  fields,\n  columns,\n  editing,\n  onSave,\n  testIdPrefix = \"view\",\n}: SaveViewModalProps<T>): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const form = useSaveViewForm(editing, onSave);\n  const preview = describeViewState(currentState, fields, columns);\n\n  return (\n    <Dialog\n      open={open}\n      onClose={onClose}\n      title={editing ? copy.saveView.titleEditing : copy.saveView.titleCreating}\n      size=\"sm\"\n      showCloseButton\n      dataTestId={`${testIdPrefix}-save-modal`}\n    >\n      <DialogContent>\n        <Stack spacing={2} data-testid={`${testIdPrefix}-save-form`}>\n          <Input\n            size=\"sm\"\n            fullWidth\n            label={copy.saveView.nameLabel}\n            placeholder={copy.saveView.namePlaceholder}\n            value={form.name}\n            onChange={(event) => form.setName(event.target.value)}\n            data-testid={`${testIdPrefix}-save-name`}\n          />\n          <Input\n            size=\"sm\"\n            fullWidth\n            label={copy.saveView.descriptionLabel}\n            placeholder={copy.saveView.descriptionPlaceholder}\n            value={form.description}\n            onChange={(event) => form.setDescription(event.target.value)}\n            data-testid={`${testIdPrefix}-save-description`}\n          />\n\n          <FlagsSwitches\n            pinned={form.pinned}\n            shared={form.shared}\n            isDefault={form.isDefault}\n            setPinned={form.setPinned}\n            setShared={form.setShared}\n            setIsDefault={form.setIsDefault}\n            testIdPrefix={testIdPrefix}\n          />\n\n          <PreviewBox preview={preview} testIdPrefix={testIdPrefix} />\n\n          {form.error && (\n            <Text variant=\"caption\" color=\"danger\" as=\"p\" data-testid={`${testIdPrefix}-save-error`}>\n              {form.error}\n            </Text>\n          )}\n\n          <FormFooter\n            editing={editing}\n            canSave={form.canSave}\n            onSubmit={() => void form.submit()}\n            onClose={onClose}\n            testIdPrefix={testIdPrefix}\n          />\n        </Stack>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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","names":["default"]}

package/dist/chunk-UCU5FCYE.js

@@ -0,0 +1,113 @@
+// 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: 165 }
+    }
+  );
+}
+
+export {
+  isoToMasked,
+  maskedToIso,
+  maskDate,
+  DayBoundInput
+};
+//# sourceMappingURL=chunk-UCU5FCYE.js.map

package/dist/chunk-UCU5FCYE.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';\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: 165 }}\n    />\n  );\n}\n"],"mappings":";AA6BA,OAAO,eAAe;AACtB,SAAgB,WAAW,gBAAgB;AAyMvC;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,EAAE,OAAO,IAAI;AAAA;AAAA,EACnB;AAEJ;","names":[]}