@stackcraftmx/calcita 0.32.1 → 0.47.0

package/dist/inputs/SelectInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.js","sources":["../../src/inputs/SelectInput.jsx"],"sourcesContent":["// Lista desplegable suelta, con la etiqueta arriba (mismo look que TextInput): la que pintan FormSelectField (formik) y la\n// de react-hook-form, y la que se usa sin formulario.\n//\n// Cada opción puede traer una explicación (description) que se lee en la lista para escoger; en la caja queda solo el\n// nombre de lo elegido. OJO: sin renderValue, MUI copiaba la opción completa a la caja y se leía «MenudeoCompra por pieza…».\n//\n// Con `multiple` se eligen varias: la lista se queda abierta, cada elegida lleva su palomita y en la caja quedan sus nombres\n// separados por coma, en el orden de las opciones. Al formulario llega la lista de valores (Yup.array().min(1) la valida).\n// Para catálogos largos, CatalogInput con `multiple` (busca y deja chips).\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaSelectInput con defaultProps y\n// styleOverrides de sus partes: option, optionText.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport MenuItem from '@mui/material/MenuItem';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\n\nimport {translateValidationMessage} from '@/forms/validationMessages.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaSelectInput)\nconst THEME_NAME = 'CalcitaSelectInput';\nconst SelectOption = piecePart(THEME_NAME, 'Option', MenuItem);\nconst SelectOptionText = piecePart(THEME_NAME, 'OptionText', Box);\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {string} props.label ya traducido\n * @param {string|number|Array<string|number>|null|undefined} props.value '' = sin elegir; con multiple, la lista ([] = ninguna)\n * @param {(value: any) => void} props.onChange recibe el valor elegido (con multiple, la lista), no el evento\n * @param {() => void} [props.onBlur]\n * @param {Array<{value: string|number, label: string, description?: string}>} props.options\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText] ayuda fija; el error la reemplaza\n * @param {string} [props.placeholder] texto de la opción vacía\n * @param {boolean} [props.disabled]\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef]\n * @param {boolean} [props.multiple] elegir varias opciones\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function SelectInput(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaSelectInput.defaultProps) y encima lo que llega aquí\n    const {\n    name, label, value, onChange, onBlur, options, error, helperText = ' ', placeholder, disabled = false, inputRef, multiple = false, texts,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const generatedId = useId();\n    const inputId = `${name ?? 'select'}-${generatedId}`;\n    // OJO: la lista desplegable de MUI es un div y no un <input>: el `for` de la etiqueta no la une. Se nombra con su etiqueta\n    // por aria-labelledby (labelId); sin esto el lector de pantalla no decía «Ciudad», solo lo elegido\n    const labelId = `${inputId}-label`;\n    const errorText = translateValidationMessage(t, error);\n    const placeholderText = (\n        <Typography component=\"span\"\n                    // OJO: el placeholder de un select activo se lee (text.secondary); text.disabled solo con el campo inactivo\n                    color={disabled ? 'text.disabled' : 'text.secondary'}>{placeholder ?? t('form.selectPlaceholder')}</Typography>\n    );\n    const renderSelectedValue = (selectedValue) => {\n        if (multiple) {\n            const selectedLabels = options.filter((option) => selectedValue.includes(option.value)).map((option) => option.label);\n            return selectedLabels.length > 0 ? selectedLabels.join(', ') : placeholderText;\n        }\n        return options.find((option) => option.value === selectedValue)?.label ?? placeholderText;\n    };\n    const currentValue = multiple ? (Array.isArray(value) ? value : []) : (value ?? '');\n    // OJO: con multiple, el autollenado del navegador puede mandar el valor como texto separado por comas (lo dice MUI)\n    const handleChange = (event) => {\n        const nextValue = event.target.value;\n        onChange(multiple && typeof nextValue === 'string' ? nextValue.split(',') : nextValue);\n    };\n\n    return (\n        <FieldFrame inputId={inputId} labelId={labelId} label={label}>\n            <TextField\n                name={name}\n                id={inputId}\n                inputRef={inputRef}\n                select\n                size=\"small\"\n                fullWidth\n                disabled={disabled}\n                value={currentValue}\n                onChange={handleChange}\n                onBlur={onBlur}\n                error={Boolean(errorText)}\n                helperText={errorText ?? helperText}\n                slotProps={{select: {multiple, displayEmpty: true, renderValue: renderSelectedValue, labelId}}}>\n                {/* la opción vacía solo con una: con varias, se quitan picándolas otra vez */}\n                {!multiple && <MenuItem value=\"\" disabled>{placeholderText}</MenuItem>}\n                {options.map((option) => (\n                    // la opción en renglón y su nombre con su explicación en un bloque: con la opción en columna, la palomita del\n                    // elegido (el tema la pinta al final) se bajaba a otro renglón (lo cachó una captura de Tareas)\n                    <SelectOption key={option.value} value={option.value} ownSx={{whiteSpace: 'normal'}}>\n                        <SelectOptionText component=\"span\" ownSx={{display: 'flex', flexDirection: 'column', minWidth: 0, flexGrow: 1}}>\n                            <Typography component=\"span\" variant=\"body2\">{option.label}</Typography>\n                            {option.description && (\n                                <Typography component=\"span\" variant=\"caption\" color=\"text.secondary\">{option.description}</Typography>\n                            )}\n                        </SelectOptionText>\n                    </SelectOption>\n                ))}\n            </TextField>\n        </FieldFrame>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AA2BA,MAAM,aAAa;AACnB,MAAM,eAAe,UAAU,YAAY,UAAU,QAAQ;AAC7D,MAAM,mBAAmB,UAAU,YAAY,cAAc,GAAG;AAkBhE,SAAwB,YAAY,OAAO;AAEvC,QAAM;AAAA,IACN;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAU;AAAA,IAAQ;AAAA,IAAS;AAAA,IAAO,aAAa;AAAA,IAAK;AAAA,IAAa,WAAW;AAAA,IAAO;AAAA,IAAU,WAAW;AAAA,IAAO;AAAA,IACnI,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AAC/B,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,cAAc,MAAA;AACpB,QAAM,UAAU,GAAG,QAAQ,QAAQ,IAAI,WAAW;AAGlD,QAAM,UAAU,GAAG,OAAO;AAC1B,QAAM,YAAY,2BAA2B,GAAG,KAAK;AACrD,QAAM,kBACF;AAAA,IAAC;AAAA,IAAA;AAAA,MAAW,WAAU;AAAA,MAEV,OAAO,WAAW,kBAAkB;AAAA,MAAmB,UAAA,eAAe,EAAE,wBAAwB;AAAA,IAAA;AAAA,EAAA;AAEhH,QAAM,sBAAsB,CAAC,kBAAkB;AAC3C,QAAI,UAAU;AACV,YAAM,iBAAiB,QAAQ,OAAO,CAAC,WAAW,cAAc,SAAS,OAAO,KAAK,CAAC,EAAE,IAAI,CAAC,WAAW,OAAO,KAAK;AACpH,aAAO,eAAe,SAAS,IAAI,eAAe,KAAK,IAAI,IAAI;AAAA,IACnE;AACA,WAAO,QAAQ,KAAK,CAAC,WAAW,OAAO,UAAU,aAAa,GAAG,SAAS;AAAA,EAC9E;AACA,QAAM,eAAe,WAAY,MAAM,QAAQ,KAAK,IAAI,QAAQ,KAAO,SAAS;AAEhF,QAAM,eAAe,CAAC,UAAU;AAC5B,UAAM,YAAY,MAAM,OAAO;AAC/B,aAAS,YAAY,OAAO,cAAc,WAAW,UAAU,MAAM,GAAG,IAAI,SAAS;AAAA,EACzF;AAEA,SACI,oBAAC,YAAA,EAAW,SAAkB,SAAkB,OAC5C,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,IAAI;AAAA,MACJ;AAAA,MACA,QAAM;AAAA,MACN,MAAK;AAAA,MACL,WAAS;AAAA,MACT;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA,MACV;AAAA,MACA,OAAO,QAAQ,SAAS;AAAA,MACxB,YAAY,aAAa;AAAA,MACzB,WAAW,EAAC,QAAQ,EAAC,UAAU,cAAc,MAAM,aAAa,qBAAqB,UAAO;AAAA,MAE3F,UAAA;AAAA,QAAA,CAAC,YAAY,oBAAC,UAAA,EAAS,OAAM,IAAG,UAAQ,MAAE,UAAA,iBAAgB;AAAA,QAC1D,QAAQ,IAAI,CAAC;AAAA;AAAA;AAAA,UAGV,oBAAC,cAAA,EAAgC,OAAO,OAAO,OAAO,OAAO,EAAC,YAAY,SAAA,GACtE,UAAA,qBAAC,kBAAA,EAAiB,WAAU,QAAO,OAAO,EAAC,SAAS,QAAQ,eAAe,UAAU,UAAU,GAAG,UAAU,EAAA,GACxG,UAAA;AAAA,YAAA,oBAAC,cAAW,WAAU,QAAO,SAAQ,SAAS,iBAAO,OAAM;AAAA,YAC1D,OAAO,eACJ,oBAAC,YAAA,EAAW,WAAU,QAAO,SAAQ,WAAU,OAAM,kBAAkB,UAAA,OAAO,YAAA,CAAY;AAAA,UAAA,GAElG,EAAA,GANe,OAAO,KAO1B;AAAA,SACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAET;AAER;"}
+{"version":3,"file":"SelectInput.js","sources":["../../src/inputs/SelectInput.jsx"],"sourcesContent":["// Lista desplegable suelta, con la etiqueta arriba (mismo look que TextInput): la que pintan FormSelectField (formik) y la\n// de react-hook-form, y la que se usa sin formulario.\n//\n// Cada opción puede traer una explicación (description) que se lee en la lista para escoger; en la caja queda solo el\n// nombre de lo elegido. OJO: sin renderValue, MUI copiaba la opción completa a la caja y se leía «MenudeoCompra por pieza…».\n//\n// Con `multiple` se eligen varias: la lista se queda abierta, cada elegida lleva su palomita y en la caja quedan sus nombres\n// separados por coma, en el orden de las opciones. Al formulario llega la lista de valores (Yup.array().min(1) la valida).\n// Para catálogos largos, CatalogInput con `multiple` (busca y deja chips). Con varias, además: selectAll («Elegir todos»\n// arriba, con su casilla a medias si hay algunos) y checkboxes (una casilla en cada opción en lugar de la palomita).\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaSelectInput con defaultProps y\n// styleOverrides de sus partes: option, optionText.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Checkbox from '@mui/material/Checkbox';\nimport MenuItem from '@mui/material/MenuItem';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\n\nimport {translateValidationMessage} from '@/forms/validationMessages.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport {selectAllStateOf} from '@/inputs/selectAllState.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaSelectInput)\nconst THEME_NAME = 'CalcitaSelectInput';\nconst SelectOption = piecePart(THEME_NAME, 'Option', MenuItem);\nconst SelectOptionText = piecePart(THEME_NAME, 'OptionText', Box);\n// la opción de «Elegir todos»: no es de la lista y nunca llega al formulario\nconst SELECT_ALL_VALUE = '__calcita_select_all__';\n// con casillas, la palomita que el tema le pone al elegido sobra\nconst WITHOUT_CHECKMARK = Object.freeze({'&.Mui-selected::after': {content: 'none'}});\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {string} props.label ya traducido\n * @param {string|number|Array<string|number>|null|undefined} props.value '' = sin elegir; con multiple, la lista ([] = ninguna)\n * @param {(value: any) => void} props.onChange recibe el valor elegido (con multiple, la lista), no el evento\n * @param {() => void} [props.onBlur]\n * @param {Array<{value: string|number, label: string, description?: string, disabled?: boolean}>} props.options\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText] ayuda fija; el error la reemplaza\n * @param {string} [props.placeholder] texto de la opción vacía\n * @param {boolean} [props.disabled]\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef]\n * @param {boolean} [props.multiple] elegir varias opciones\n * @param {boolean} [props.selectAll] con multiple: «Elegir todos» arriba de la lista\n * @param {boolean} [props.checkboxes] con multiple: una casilla en cada opción\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function SelectInput(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaSelectInput.defaultProps) y encima lo que llega aquí\n    const {\n    name, label, value, onChange, onBlur, options, error, helperText = ' ', placeholder, disabled = false, inputRef, multiple = false,\n    selectAll = false, checkboxes = false, texts,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const generatedId = useId();\n    const inputId = `${name ?? 'select'}-${generatedId}`;\n    // OJO: la lista desplegable de MUI es un div y no un <input>: el `for` de la etiqueta no la une. Se nombra con su etiqueta\n    // por aria-labelledby (labelId); sin esto el lector de pantalla no decía «Ciudad», solo lo elegido\n    const labelId = `${inputId}-label`;\n    const errorText = translateValidationMessage(t, error);\n    const placeholderText = (\n        <Typography component=\"span\"\n                    // OJO: el placeholder de un select activo se lee (text.secondary); text.disabled solo con el campo inactivo\n                    color={disabled ? 'text.disabled' : 'text.secondary'}>{placeholder ?? t('form.selectPlaceholder')}</Typography>\n    );\n    const renderSelectedValue = (selectedValue) => {\n        if (multiple) {\n            const selectedLabels = options.filter((option) => selectedValue.includes(option.value)).map((option) => option.label);\n            return selectedLabels.length > 0 ? selectedLabels.join(', ') : placeholderText;\n        }\n        return options.find((option) => option.value === selectedValue)?.label ?? placeholderText;\n    };\n    const currentValue = multiple ? (Array.isArray(value) ? value : []) : (value ?? '');\n    const selectAllState = selectAllStateOf(currentValue, options.filter((option) => !option.disabled).map((option) => option.value));\n    // OJO: con multiple, el autollenado del navegador puede mandar el valor como texto separado por comas (lo dice MUI)\n    const handleChange = (event) => {\n        const nextValue = event.target.value;\n        const values = multiple && typeof nextValue === 'string' ? nextValue.split(',') : nextValue;\n        // «Elegir todos» llega como una opción más: se cambia por todos (o por ninguno, si ya estaban todos)\n        if (multiple && values.includes(SELECT_ALL_VALUE)) {\n            onChange(selectAllState.toggled());\n            return;\n        }\n        onChange(values);\n    };\n\n    return (\n        <FieldFrame inputId={inputId} labelId={labelId} label={label}>\n            <TextField\n                name={name}\n                id={inputId}\n                inputRef={inputRef}\n                select\n                size=\"small\"\n                fullWidth\n                disabled={disabled}\n                value={currentValue}\n                onChange={handleChange}\n                onBlur={onBlur}\n                error={Boolean(errorText)}\n                helperText={errorText ?? helperText}\n                slotProps={{select: {multiple, displayEmpty: true, renderValue: renderSelectedValue, labelId}}}>\n                {/* la opción vacía solo con una: con varias, se quitan picándolas otra vez */}\n                {!multiple && <MenuItem value=\"\" disabled>{placeholderText}</MenuItem>}\n                {multiple && selectAll && (\n                    <SelectOption value={SELECT_ALL_VALUE} ownSx={{fontWeight: 600, ...WITHOUT_CHECKMARK}}>\n                        <Checkbox size=\"small\" tabIndex={-1} disableRipple sx={{p: 0, mr: 1}}\n                                  checked={selectAllState.allChosen} indeterminate={selectAllState.someChosen} />\n                        {selectAllState.allChosen ? t('form.unselectAll') : t('form.selectAll', {count: options.length})}\n                    </SelectOption>\n                )}\n                {options.map((option) => (\n                    // la opción en renglón y su nombre con su explicación en un bloque: con la opción en columna, la palomita del\n                    // elegido (el tema la pinta al final) se bajaba a otro renglón (lo cachó una captura de Tareas)\n                    <SelectOption key={option.value} value={option.value} disabled={option.disabled}\n                                  ownSx={{whiteSpace: 'normal', ...(multiple && checkboxes && WITHOUT_CHECKMARK)}}>\n                        {multiple && checkboxes && (\n                            <Checkbox size=\"small\" tabIndex={-1} disableRipple sx={{p: 0, mr: 1}} checked={currentValue.includes(option.value)} />\n                        )}\n                        <SelectOptionText component=\"span\" ownSx={{display: 'flex', flexDirection: 'column', minWidth: 0, flexGrow: 1}}>\n                            <Typography component=\"span\" variant=\"body2\">{option.label}</Typography>\n                            {option.description && (\n                                <Typography component=\"span\" variant=\"caption\" color=\"text.secondary\">{option.description}</Typography>\n                            )}\n                        </SelectOptionText>\n                    </SelectOption>\n                ))}\n            </TextField>\n        </FieldFrame>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/inputs/TransferListInput.js

@@ -0,0 +1,215 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import Button from "@mui/material/Button";
+import Checkbox from "@mui/material/Checkbox";
+import FormHelperText from "@mui/material/FormHelperText";
+import List from "@mui/material/List";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import Paper from "@mui/material/Paper";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import ChevronLeftRoundedIcon from "@mui/icons-material/ChevronLeftRounded";
+import ChevronRightRoundedIcon from "@mui/icons-material/ChevronRightRounded";
+import KeyboardDoubleArrowLeftRoundedIcon from "@mui/icons-material/KeyboardDoubleArrowLeftRounded";
+import KeyboardDoubleArrowRightRoundedIcon from "@mui/icons-material/KeyboardDoubleArrowRightRounded";
+import { translateValidationMessage } from "../forms/validationMessages.js";
+import FieldFrame from "./FieldFrame.js";
+import { selectAllStateOf } from "./selectAllState.js";
+import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import { warnUnknownProps } from "../toolkit/unknownProps.js";
+const DEFAULT_LIST_HEIGHT = 280;
+const PHONE_ROTATION = Object.freeze({ transform: { xs: "rotate(90deg)", md: "none" } });
+const THEME_NAME = "CalcitaTransferListInput";
+const TransferRoot = piecePart(THEME_NAME, "Root", Stack);
+const TransferList = piecePart(THEME_NAME, "List", Paper);
+const TransferActions = piecePart(THEME_NAME, "Actions", Stack);
+function plainTextOf(text) {
+  return String(text ?? "").normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().trim();
+}
+function TransferColumn({ title, items, markedValues, onMark, onMarkMany, onMoveOne, searchable, searchLabel, emptyText, listHeight, disabled, t }) {
+  const titleId = useId();
+  const [searchText, setSearchText] = useState("");
+  const wantedText = plainTextOf(searchText);
+  const visibleItems = wantedText ? items.filter((item) => plainTextOf(`${item.label} ${item.description ?? ""}`).includes(wantedText)) : items;
+  const visibleValues = visibleItems.filter((item) => !item.disabled).map((item) => item.value);
+  const markState = selectAllStateOf(markedValues, visibleValues);
+  return /* @__PURE__ */ jsxs(TransferList, { variant: "outlined", ownSx: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", sx: { alignItems: "center", gap: 1, px: 1.5, py: 1, borderBottom: 1, borderColor: "divider" }, children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          size: "small",
+          sx: { p: 0.5 },
+          disabled: disabled || visibleValues.length === 0,
+          checked: markState.allChosen,
+          indeterminate: markState.someChosen,
+          onChange: () => onMarkMany(markState.toggled()),
+          slotProps: { input: { "aria-label": t("transfer.markVisible", { list: title }) } }
+        }
+      ),
+      /* @__PURE__ */ jsx(Typography, { id: titleId, variant: "subtitle2", sx: { flexGrow: 1 }, children: title }),
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: markedValues.length > 0 ? t("transfer.markedOf", { marked: markedValues.length, count: items.length }) : items.length })
+    ] }),
+    searchable && /* @__PURE__ */ jsx(
+      TextField,
+      {
+        size: "small",
+        type: "search",
+        value: searchText,
+        onChange: (event) => setSearchText(event.target.value),
+        placeholder: searchLabel,
+        disabled,
+        sx: { m: 1 },
+        slotProps: { htmlInput: { "aria-label": `${searchLabel} · ${title}` } }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      List,
+      {
+        dense: true,
+        role: "listbox",
+        "aria-labelledby": titleId,
+        "aria-multiselectable": "true",
+        sx: { height: listHeight, overflowY: "auto", py: 0 },
+        children: [
+          visibleItems.length === 0 && // vacía de verdad o vacía por lo buscado: no es lo mismo y se dice distinto
+          /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { px: 2, py: 1.5 }, children: items.length > 0 ? t("transfer.noMatches", { text: searchText.trim() }) : emptyText }),
+          visibleItems.map((item) => {
+            const isMarked = markedValues.includes(item.value);
+            return /* @__PURE__ */ jsxs(
+              ListItemButton,
+              {
+                role: "option",
+                "aria-selected": isMarked,
+                disabled: disabled || item.disabled,
+                onClick: () => onMark(item.value),
+                onDoubleClick: () => onMoveOne(item.value),
+                sx: { py: 0.25 },
+                children: [
+                  /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 32 }, children: /* @__PURE__ */ jsx(Checkbox, { size: "small", edge: "start", tabIndex: -1, disableRipple: true, checked: isMarked, sx: { p: 0.5 } }) }),
+                  /* @__PURE__ */ jsx(ListItemText, { primary: item.label, secondary: item.description })
+                ]
+              },
+              item.value
+            );
+          })
+        ]
+      }
+    )
+  ] });
+}
+function TransferListInput(props) {
+  const {
+    name,
+    label,
+    value,
+    onChange,
+    onBlur,
+    options,
+    availableTitle,
+    chosenTitle,
+    searchable,
+    listHeight = DEFAULT_LIST_HEIGHT,
+    error,
+    helperText = " ",
+    disabled = false,
+    sx,
+    texts,
+    ...unknownProps
+  } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
+  const { t } = useToolkitTranslation("common", texts);
+  const generatedId = useId();
+  const inputId = `${name ?? "transfer"}-${generatedId}`;
+  const errorText = translateValidationMessage(t, error);
+  const chosenValues = Array.isArray(value) ? value : [];
+  const [markedAvailable, setMarkedAvailable] = useState([]);
+  const [markedChosen, setMarkedChosen] = useState([]);
+  const available = options.filter((option) => !chosenValues.includes(option.value));
+  const chosen = chosenValues.map((chosenValue) => options.find((option) => option.value === chosenValue)).filter(Boolean);
+  const isSearchable = searchable ?? options.length > 8;
+  const titles = { available: availableTitle ?? t("transfer.available"), chosen: chosenTitle ?? t("transfer.chosen") };
+  const change = (values) => {
+    onChange(values);
+    onBlur?.();
+  };
+  const toggleIn = (setMarked) => (itemValue) => setMarked((current) => current.includes(itemValue) ? current.filter((markedValue) => markedValue !== itemValue) : [...current, itemValue]);
+  const moveToChosen = (values) => {
+    change([...chosenValues, ...values.filter((itemValue) => !chosenValues.includes(itemValue))]);
+    setMarkedAvailable((current) => current.filter((markedValue) => !values.includes(markedValue)));
+  };
+  const moveToAvailable = (values) => {
+    change(chosenValues.filter((chosenValue) => !values.includes(chosenValue)));
+    setMarkedChosen((current) => current.filter((markedValue) => !values.includes(markedValue)));
+  };
+  const movableOf = (items) => items.filter((item) => !item.disabled).map((item) => item.value);
+  const actionButton = (titleKey, Icon, onClick, isDisabled) => /* @__PURE__ */ jsx(Tooltip, { title: t(titleKey), children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "outlined",
+      size: "small",
+      "aria-label": t(titleKey),
+      disabled: disabled || isDisabled,
+      onClick,
+      sx: { minWidth: 40, px: 1 },
+      children: /* @__PURE__ */ jsx(Icon, { fontSize: "small", sx: PHONE_ROTATION })
+    }
+  ) }) });
+  const lists = /* @__PURE__ */ jsxs(TransferRoot, { direction: { xs: "column", md: "row" }, ownSx: { gap: 1.5, alignItems: "stretch", ...sx }, id: inputId, children: [
+    /* @__PURE__ */ jsx(
+      TransferColumn,
+      {
+        title: titles.available,
+        items: available,
+        markedValues: markedAvailable,
+        onMark: toggleIn(setMarkedAvailable),
+        onMarkMany: setMarkedAvailable,
+        onMoveOne: (itemValue) => moveToChosen([itemValue]),
+        searchable: isSearchable,
+        searchLabel: t("transfer.search"),
+        emptyText: t("transfer.emptyAvailable"),
+        listHeight,
+        disabled,
+        t
+      }
+    ),
+    /* @__PURE__ */ jsxs(TransferActions, { direction: { xs: "row", md: "column" }, ownSx: { gap: 1, justifyContent: "center", alignItems: "center" }, children: [
+      actionButton("transfer.moveMarked", ChevronRightRoundedIcon, () => moveToChosen(markedAvailable), markedAvailable.length === 0),
+      actionButton("transfer.moveAll", KeyboardDoubleArrowRightRoundedIcon, () => moveToChosen(movableOf(available)), movableOf(available).length === 0),
+      actionButton("transfer.returnMarked", ChevronLeftRoundedIcon, () => moveToAvailable(markedChosen), markedChosen.length === 0),
+      actionButton("transfer.returnAll", KeyboardDoubleArrowLeftRoundedIcon, () => moveToAvailable(movableOf(chosen)), movableOf(chosen).length === 0)
+    ] }),
+    /* @__PURE__ */ jsx(
+      TransferColumn,
+      {
+        title: titles.chosen,
+        items: chosen,
+        markedValues: markedChosen,
+        onMark: toggleIn(setMarkedChosen),
+        onMarkMany: setMarkedChosen,
+        onMoveOne: (itemValue) => moveToAvailable([itemValue]),
+        searchable: isSearchable,
+        searchLabel: t("transfer.search"),
+        emptyText: t("transfer.emptyChosen"),
+        listHeight,
+        disabled,
+        t
+      }
+    )
+  ] });
+  const field = /* @__PURE__ */ jsxs("div", { children: [
+    lists,
+    /* @__PURE__ */ jsx(FormHelperText, { error: Boolean(errorText), role: errorText ? "alert" : void 0, children: errorText ?? helperText })
+  ] });
+  return label ? /* @__PURE__ */ jsx(FieldFrame, { inputId, label, children: field }) : field;
+}
+export {
+  TransferListInput as default
+};
+//# sourceMappingURL=TransferListInput.js.map

package/dist/inputs/TransferListInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransferListInput.js","sources":["../../src/inputs/TransferListInput.jsx"],"sourcesContent":["// La lista de transferencia: dos columnas, «Disponibles» y «Elegidos», y botones para pasar de una a otra. Para elegir\n// muchos de una lista larga viendo siempre qué quedó de cada lado (los usuarios que pueden ver un reporte, las sucursales donde\n// puede comprar un cliente). Al formulario llega la lista de los elegidos, en el orden en que se pasaron.\n//\n// Cada columna trae su título con cuántos tiene, su buscador (searchable) y su casilla de «todos los que se ven» (con algo\n// buscado, solo esos). Se marcan los que se quieren pasar (clic o espacio) y se pasan con ›; » pasa todos los de la\n// columna. Doble clic pasa uno directo. En el teléfono las columnas van una debajo de otra y los botones apuntan hacia\n// abajo y arriba. Va fuera de una FormSection: necesita el ancho completo.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaTransferListInput con defaultProps y\n// styleOverrides de sus partes: root, list, actions.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId, useState} from 'react';\nimport Button from '@mui/material/Button';\nimport Checkbox from '@mui/material/Checkbox';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport List from '@mui/material/List';\nimport ListItemButton from '@mui/material/ListItemButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Paper from '@mui/material/Paper';\nimport Stack from '@mui/material/Stack';\nimport TextField from '@mui/material/TextField';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\nimport ChevronLeftRoundedIcon from '@mui/icons-material/ChevronLeftRounded';\nimport ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';\nimport KeyboardDoubleArrowLeftRoundedIcon from '@mui/icons-material/KeyboardDoubleArrowLeftRounded';\nimport KeyboardDoubleArrowRightRoundedIcon from '@mui/icons-material/KeyboardDoubleArrowRightRounded';\n\nimport {translateValidationMessage} from '@/forms/validationMessages.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport {selectAllStateOf} from '@/inputs/selectAllState.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// lo alto de cada columna antes de deslizar\nconst DEFAULT_LIST_HEIGHT = 280;\n// en el teléfono los botones apuntan hacia abajo (pasar) y hacia arriba (regresar)\nconst PHONE_ROTATION = Object.freeze({transform: {xs: 'rotate(90deg)', md: 'none'}});\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaTransferListInput)\nconst THEME_NAME = 'CalcitaTransferListInput';\nconst TransferRoot = piecePart(THEME_NAME, 'Root', Stack);\nconst TransferList = piecePart(THEME_NAME, 'List', Paper);\nconst TransferActions = piecePart(THEME_NAME, 'Actions', Stack);\n\n/**\n * Un texto sin acentos ni mayúsculas, para que «queretaro» encuentre «Querétaro».\n *\n * @param {unknown} text\n * @returns {string}\n */\nfunction plainTextOf(text) {\n    return String(text ?? '').normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase().trim();\n}\n\n/**\n * Una columna: su título con cuántos tiene, su buscador, su casilla de «todos los que se ven» y sus renglones.\n *\n * @param {object} props\n */\nfunction TransferColumn({title, items, markedValues, onMark, onMarkMany, onMoveOne, searchable, searchLabel, emptyText, listHeight, disabled, t}) {\n    const titleId = useId();\n    const [searchText, setSearchText] = useState('');\n    const wantedText = plainTextOf(searchText);\n    const visibleItems = wantedText\n        ? items.filter((item) => plainTextOf(`${item.label} ${item.description ?? ''}`).includes(wantedText))\n        : items;\n    const visibleValues = visibleItems.filter((item) => !item.disabled).map((item) => item.value);\n    const markState = selectAllStateOf(markedValues, visibleValues);\n\n    return (\n        <TransferList variant=\"outlined\" ownSx={{flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column'}}>\n            <Stack direction=\"row\" sx={{alignItems: 'center', gap: 1, px: 1.5, py: 1, borderBottom: 1, borderColor: 'divider'}}>\n                <Checkbox size=\"small\" sx={{p: 0.5}} disabled={disabled || visibleValues.length === 0}\n                          checked={markState.allChosen} indeterminate={markState.someChosen}\n                          onChange={() => onMarkMany(markState.toggled())}\n                          slotProps={{input: {'aria-label': t('transfer.markVisible', {list: title})}}} />\n                <Typography id={titleId} variant=\"subtitle2\" sx={{flexGrow: 1}}>{title}</Typography>\n                <Typography variant=\"caption\" color=\"text.secondary\">\n                    {markedValues.length > 0 ? t('transfer.markedOf', {marked: markedValues.length, count: items.length}) : items.length}\n                </Typography>\n            </Stack>\n            {searchable && (\n                <TextField size=\"small\" type=\"search\" value={searchText} onChange={(event) => setSearchText(event.target.value)}\n                           placeholder={searchLabel} disabled={disabled} sx={{m: 1}}\n                           slotProps={{htmlInput: {'aria-label': `${searchLabel} · ${title}`}}} />\n            )}\n            <List dense role=\"listbox\" aria-labelledby={titleId} aria-multiselectable=\"true\"\n                  sx={{height: listHeight, overflowY: 'auto', py: 0}}>\n                {visibleItems.length === 0 && (\n                    // vacía de verdad o vacía por lo buscado: no es lo mismo y se dice distinto\n                    <Typography variant=\"body2\" color=\"text.secondary\" sx={{px: 2, py: 1.5}}>\n                        {items.length > 0 ? t('transfer.noMatches', {text: searchText.trim()}) : emptyText}\n                    </Typography>\n                )}\n                {visibleItems.map((item) => {\n                    const isMarked = markedValues.includes(item.value);\n                    return (\n                        <ListItemButton key={item.value} role=\"option\" aria-selected={isMarked} disabled={disabled || item.disabled}\n                                        onClick={() => onMark(item.value)} onDoubleClick={() => onMoveOne(item.value)} sx={{py: 0.25}}>\n                            <ListItemIcon sx={{minWidth: 32}}>\n                                <Checkbox size=\"small\" edge=\"start\" tabIndex={-1} disableRipple checked={isMarked} sx={{p: 0.5}} />\n                            </ListItemIcon>\n                            <ListItemText primary={item.label} secondary={item.description} />\n                        </ListItemButton>\n                    );\n                })}\n            </List>\n        </TransferList>\n    );\n}\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {import('react').ReactNode} [props.label] ya traducida\n * @param {Array<string|number>|null|undefined} props.value los elegidos\n * @param {(values: Array<string|number>) => void} props.onChange\n * @param {() => void} [props.onBlur]\n * @param {Array<{value: string|number, label: string, description?: string, disabled?: boolean}>} props.options todos\n * @param {string} [props.availableTitle] ya traducido; por omisión «Disponibles»\n * @param {string} [props.chosenTitle] ya traducido; por omisión «Elegidos»\n * @param {boolean} [props.searchable] un buscador en cada columna (por omisión, con más de 8 opciones)\n * @param {number} [props.listHeight] lo alto de cada columna, en px\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText] ya traducida\n * @param {boolean} [props.disabled]\n * @param {object} [props.sx]\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function TransferListInput(props) {\n    const {\n        name, label, value, onChange, onBlur, options, availableTitle, chosenTitle, searchable, listHeight = DEFAULT_LIST_HEIGHT, error,\n        helperText = ' ', disabled = false, sx, texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const generatedId = useId();\n    const inputId = `${name ?? 'transfer'}-${generatedId}`;\n    const errorText = translateValidationMessage(t, error);\n    const chosenValues = Array.isArray(value) ? value : [];\n    // lo marcado para pasar, de cada lado\n    const [markedAvailable, setMarkedAvailable] = useState([]);\n    const [markedChosen, setMarkedChosen] = useState([]);\n    const available = options.filter((option) => !chosenValues.includes(option.value));\n    // los elegidos en el orden en que se pasaron\n    const chosen = chosenValues.map((chosenValue) => options.find((option) => option.value === chosenValue)).filter(Boolean);\n    const isSearchable = searchable ?? options.length > 8;\n    const titles = {available: availableTitle ?? t('transfer.available'), chosen: chosenTitle ?? t('transfer.chosen')};\n\n    const change = (values) => {\n        onChange(values);\n        onBlur?.();\n    };\n    const toggleIn = (setMarked) => (itemValue) => setMarked((current) => (\n        current.includes(itemValue) ? current.filter((markedValue) => markedValue !== itemValue) : [...current, itemValue]\n    ));\n    const moveToChosen = (values) => {\n        change([...chosenValues, ...values.filter((itemValue) => !chosenValues.includes(itemValue))]);\n        setMarkedAvailable((current) => current.filter((markedValue) => !values.includes(markedValue)));\n    };\n    const moveToAvailable = (values) => {\n        change(chosenValues.filter((chosenValue) => !values.includes(chosenValue)));\n        setMarkedChosen((current) => current.filter((markedValue) => !values.includes(markedValue)));\n    };\n    const movableOf = (items) => items.filter((item) => !item.disabled).map((item) => item.value);\n    const actionButton = (titleKey, Icon, onClick, isDisabled) => (\n        <Tooltip title={t(titleKey)}>\n            <span>\n                <Button variant=\"outlined\" size=\"small\" aria-label={t(titleKey)} disabled={disabled || isDisabled} onClick={onClick}\n                        sx={{minWidth: 40, px: 1}}>\n                    <Icon fontSize=\"small\" sx={PHONE_ROTATION} />\n                </Button>\n            </span>\n        </Tooltip>\n    );\n\n    const lists = (\n        <TransferRoot direction={{xs: 'column', md: 'row'}} ownSx={{gap: 1.5, alignItems: 'stretch', ...sx}} id={inputId}>\n            <TransferColumn title={titles.available} items={available} markedValues={markedAvailable}\n                            onMark={toggleIn(setMarkedAvailable)} onMarkMany={setMarkedAvailable} onMoveOne={(itemValue) => moveToChosen([itemValue])}\n                            searchable={isSearchable} searchLabel={t('transfer.search')} emptyText={t('transfer.emptyAvailable')}\n                            listHeight={listHeight} disabled={disabled} t={t} />\n            <TransferActions direction={{xs: 'row', md: 'column'}} ownSx={{gap: 1, justifyContent: 'center', alignItems: 'center'}}>\n                {actionButton('transfer.moveMarked', ChevronRightRoundedIcon, () => moveToChosen(markedAvailable), markedAvailable.length === 0)}\n                {actionButton('transfer.moveAll', KeyboardDoubleArrowRightRoundedIcon, () => moveToChosen(movableOf(available)), movableOf(available).length === 0)}\n                {actionButton('transfer.returnMarked', ChevronLeftRoundedIcon, () => moveToAvailable(markedChosen), markedChosen.length === 0)}\n                {actionButton('transfer.returnAll', KeyboardDoubleArrowLeftRoundedIcon, () => moveToAvailable(movableOf(chosen)), movableOf(chosen).length === 0)}\n            </TransferActions>\n            <TransferColumn title={titles.chosen} items={chosen} markedValues={markedChosen}\n                            onMark={toggleIn(setMarkedChosen)} onMarkMany={setMarkedChosen} onMoveOne={(itemValue) => moveToAvailable([itemValue])}\n                            searchable={isSearchable} searchLabel={t('transfer.search')} emptyText={t('transfer.emptyChosen')}\n                            listHeight={listHeight} disabled={disabled} t={t} />\n        </TransferRoot>\n    );\n\n    const field = (\n        <div>\n            {lists}\n            <FormHelperText error={Boolean(errorText)} role={errorText ? 'alert' : undefined}>{errorText ?? helperText}</FormHelperText>\n        </div>\n    );\n    // sin etiqueta va solo (la pantalla pone el título a su manera)\n    return label ? <FieldFrame inputId={inputId} label={label}>{field}</FieldFrame> : field;\n}\n"],"names":[],"mappings":"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"}

package/dist/inputs/inputMasks.js

@@ -0,0 +1,84 @@
+const INPUT_MASK = Object.freeze({
+  // 10 dígitos en grupos de 3, 3 y 4; si su país lo escribe distinto, pase su propio patrón
+  phone: "999 999 9999",
+  postalCode: "99999",
+  // la CLABE: banco (3), plaza (3), cuenta (11) y dígito verificador (1)
+  clabe: "999 999 99999999999 9",
+  card: "9999 9999 9999 9999",
+  // RFC de persona física (13); el de persona moral (12) cabe igual
+  rfc: "XXXXXXXXXXXXX",
+  curp: "XXXXXXXXXXXXXXXXXX",
+  // el folio fiscal (UUID) de una factura
+  uuid: "HHHHHHHH-HHHH-HHHH-HHHH-HHHHHHHHHHHH"
+});
+const SLOT_RULES = Object.freeze({
+  9: /^\d$/,
+  A: /^[A-ZÑ]$/,
+  X: /^[A-Z0-9Ñ&]$/,
+  H: /^[0-9A-F]$/
+});
+function maskPatternOf(mask) {
+  return INPUT_MASK[mask] ?? mask;
+}
+function isSlot(patternCharacter) {
+  return patternCharacter in SLOT_RULES;
+}
+function slotsOf(pattern) {
+  return [...pattern].filter(isSlot);
+}
+function rawValueOf(typedText, pattern) {
+  const slots = slotsOf(pattern);
+  let raw = "";
+  for (const character of (typedText ?? "").toLocaleUpperCase("es-MX")) {
+    if (raw.length === slots.length) {
+      break;
+    }
+    if (SLOT_RULES[slots[raw.length]].test(character)) {
+      raw += character;
+    }
+  }
+  return raw;
+}
+function maskedTextOf(rawValue, pattern) {
+  const raw = rawValueOf(rawValue ?? "", pattern);
+  let shown = "";
+  let usedCharacters = 0;
+  for (const patternCharacter of pattern) {
+    if (usedCharacters === raw.length) {
+      break;
+    }
+    if (isSlot(patternCharacter)) {
+      shown += raw[usedCharacters];
+      usedCharacters += 1;
+    } else {
+      shown += patternCharacter;
+    }
+  }
+  return shown;
+}
+function caretPositionOf(typedText, caretPosition, pattern) {
+  const valueCharactersBefore = rawValueOf(typedText.slice(0, caretPosition), pattern).length;
+  const shown = maskedTextOf(rawValueOf(typedText, pattern), pattern);
+  let seen = 0;
+  for (let position = 0; position < shown.length; position += 1) {
+    if (seen === valueCharactersBefore) {
+      return position;
+    }
+    if (isSlot(pattern[position])) {
+      seen += 1;
+    }
+  }
+  return shown.length;
+}
+function isMaskComplete(rawValue, pattern) {
+  return rawValueOf(rawValue ?? "", pattern).length === slotsOf(pattern).length;
+}
+export {
+  INPUT_MASK,
+  caretPositionOf,
+  isMaskComplete,
+  maskPatternOf,
+  maskedTextOf,
+  rawValueOf
+};
+//# sourceMappingURL=inputMasks.js.map

package/dist/inputs/inputMasks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputMasks.js","sources":["../../src/inputs/inputMasks.js"],"sourcesContent":["// Las máscaras de los campos que se escriben con forma fija: un teléfono, una CLABE, un RFC, un folio fiscal. MaskedInput\n// las usa para que la persona vea los separadores mientras escribe y al formulario llegue el valor LIMPIO (solo dígitos o\n// letras, en mayúsculas), que es lo que valida y guarda el servidor.\n//\n// Un patrón es un texto donde cada lugar dice qué cabe; lo demás son separadores que pone la máscara:\n//   9  un dígito\n//   A  una letra (Ñ incluida), en mayúscula\n//   X  una letra o un dígito, en mayúscula (también & y Ñ, que llevan los RFC)\n//   H  un dígito hexadecimal 0-9 A-F, en mayúscula (los folios fiscales)\n// Por ejemplo '999 999 9999' muestra «555 123 4567» y al formulario llega «5551234567».\n//\n// Lo que no cabe en el lugar que sigue se ignora (una letra donde va un dígito) y nada pasa del largo del patrón. El RFC y la\n// CURP solo se filtran y se pasan a mayúsculas mientras se escriben: que estén bien formados lo revisan sus reglas.\n//\n// Puro (sin React): se prueba con node (inputMasks.test.js).\n//\n// Genérico del paquete: function (regla de la casa).\n\n/** Los patrones de siempre, para no escribirlos en cada pantalla. Uno propio se pasa como texto. */\nexport const INPUT_MASK = Object.freeze({\n    // 10 dígitos en grupos de 3, 3 y 4; si su país lo escribe distinto, pase su propio patrón\n    phone: '999 999 9999',\n    postalCode: '99999',\n    // la CLABE: banco (3), plaza (3), cuenta (11) y dígito verificador (1)\n    clabe: '999 999 99999999999 9',\n    card: '9999 9999 9999 9999',\n    // RFC de persona física (13); el de persona moral (12) cabe igual\n    rfc: 'XXXXXXXXXXXXX',\n    curp: 'XXXXXXXXXXXXXXXXXX',\n    // el folio fiscal (UUID) de una factura\n    uuid: 'HHHHHHHH-HHHH-HHHH-HHHH-HHHHHHHHHHHH',\n});\n\n// qué cabe en cada clase de lugar del patrón\nconst SLOT_RULES = Object.freeze({\n    9: /^\\d$/,\n    A: /^[A-ZÑ]$/,\n    X: /^[A-Z0-9Ñ&]$/,\n    H: /^[0-9A-F]$/,\n});\n\n/**\n * El patrón de una máscara: el nombre de una de INPUT_MASK o el patrón mismo.\n *\n * @param {string} mask 'phone' | '999-999' …\n * @returns {string}\n */\nexport function maskPatternOf(mask) {\n    return INPUT_MASK[mask] ?? mask;\n}\n\n/**\n * @param {string} patternCharacter\n * @returns {boolean}\n */\nfunction isSlot(patternCharacter) {\n    return patternCharacter in SLOT_RULES;\n}\n\n/**\n * Los lugares del patrón, en orden (sin los separadores).\n *\n * @param {string} pattern\n * @returns {string[]}\n */\nfunction slotsOf(pattern) {\n    return [...pattern].filter(isSlot);\n}\n\n/**\n * El valor limpio de lo que se escribió (o se pegó): cada carácter va al lugar que sigue si cabe; lo que no, se ignora.\n *\n * @param {string} typedText lo que hay en el campo, con o sin separadores\n * @param {string} pattern\n * @returns {string} solo los dígitos o letras, en mayúsculas, hasta el largo del patrón\n */\nexport function rawValueOf(typedText, pattern) {\n    const slots = slotsOf(pattern);\n    let raw = '';\n    for (const character of (typedText ?? '').toLocaleUpperCase('es-MX')) {\n        if (raw.length === slots.length) {\n            break;\n        }\n        if (SLOT_RULES[slots[raw.length]].test(character)) {\n            raw += character;\n        }\n    }\n    return raw;\n}\n\n/**\n * El valor limpio con sus separadores, como se ve en el campo. Los separadores solo salen entre lo que ya se escribió (sin\n * guiones de más al final).\n *\n * @param {string|null|undefined} rawValue\n * @param {string} pattern\n * @returns {string}\n */\nexport function maskedTextOf(rawValue, pattern) {\n    const raw = rawValueOf(rawValue ?? '', pattern);\n    let shown = '';\n    let usedCharacters = 0;\n    for (const patternCharacter of pattern) {\n        if (usedCharacters === raw.length) {\n            break;\n        }\n        if (isSlot(patternCharacter)) {\n            shown += raw[usedCharacters];\n            usedCharacters += 1;\n        } else {\n            shown += patternCharacter;\n        }\n    }\n    return shown;\n}\n\n/**\n * Dónde queda el cursor después de poner los separadores: justo después del mismo número de dígitos o letras que tenía\n * antes. Sin esto, escribir en medio de un teléfono mandaría el cursor al final.\n *\n * @param {string} typedText lo que había en el campo al escribir\n * @param {number} caretPosition dónde estaba el cursor en typedText\n * @param {string} pattern\n * @returns {number} la posición en el texto ya con sus separadores\n */\nexport function caretPositionOf(typedText, caretPosition, pattern) {\n    const valueCharactersBefore = rawValueOf(typedText.slice(0, caretPosition), pattern).length;\n    const shown = maskedTextOf(rawValueOf(typedText, pattern), pattern);\n    let seen = 0;\n    for (let position = 0; position < shown.length; position += 1) {\n        if (seen === valueCharactersBefore) {\n            return position;\n        }\n        if (isSlot(pattern[position])) {\n            seen += 1;\n        }\n    }\n    return shown.length;\n}\n\n/**\n * ¿Ya se llenaron todos los lugares?\n *\n * @param {string|null|undefined} rawValue\n * @param {string} pattern\n * @returns {boolean}\n */\nexport function isMaskComplete(rawValue, pattern) {\n    return rawValueOf(rawValue ?? '', pattern).length === slotsOf(pattern).length;\n}\n"],"names":[],"mappings":"AAmBY,MAAC,aAAa,OAAO,OAAO;AAAA;AAAA,EAEpC,OAAO;AAAA,EACP,YAAY;AAAA;AAAA,EAEZ,OAAO;AAAA,EACP,MAAM;AAAA;AAAA,EAEN,KAAK;AAAA,EACL,MAAM;AAAA;AAAA,EAEN,MAAM;AACV,CAAC;AAGD,MAAM,aAAa,OAAO,OAAO;AAAA,EAC7B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACP,CAAC;AAQM,SAAS,cAAc,MAAM;AAChC,SAAO,WAAW,IAAI,KAAK;AAC/B;AAMA,SAAS,OAAO,kBAAkB;AAC9B,SAAO,oBAAoB;AAC/B;AAQA,SAAS,QAAQ,SAAS;AACtB,SAAO,CAAC,GAAG,OAAO,EAAE,OAAO,MAAM;AACrC;AASO,SAAS,WAAW,WAAW,SAAS;AAC3C,QAAM,QAAQ,QAAQ,OAAO;AAC7B,MAAI,MAAM;AACV,aAAW,cAAc,aAAa,IAAI,kBAAkB,OAAO,GAAG;AAClE,QAAI,IAAI,WAAW,MAAM,QAAQ;AAC7B;AAAA,IACJ;AACA,QAAI,WAAW,MAAM,IAAI,MAAM,CAAC,EAAE,KAAK,SAAS,GAAG;AAC/C,aAAO;AAAA,IACX;AAAA,EACJ;AACA,SAAO;AACX;AAUO,SAAS,aAAa,UAAU,SAAS;AAC5C,QAAM,MAAM,WAAW,YAAY,IAAI,OAAO;AAC9C,MAAI,QAAQ;AACZ,MAAI,iBAAiB;AACrB,aAAW,oBAAoB,SAAS;AACpC,QAAI,mBAAmB,IAAI,QAAQ;AAC/B;AAAA,IACJ;AACA,QAAI,OAAO,gBAAgB,GAAG;AAC1B,eAAS,IAAI,cAAc;AAC3B,wBAAkB;AAAA,IACtB,OAAO;AACH,eAAS;AAAA,IACb;AAAA,EACJ;AACA,SAAO;AACX;AAWO,SAAS,gBAAgB,WAAW,eAAe,SAAS;AAC/D,QAAM,wBAAwB,WAAW,UAAU,MAAM,GAAG,aAAa,GAAG,OAAO,EAAE;AACrF,QAAM,QAAQ,aAAa,WAAW,WAAW,OAAO,GAAG,OAAO;AAClE,MAAI,OAAO;AACX,WAAS,WAAW,GAAG,WAAW,MAAM,QAAQ,YAAY,GAAG;AAC3D,QAAI,SAAS,uBAAuB;AAChC,aAAO;AAAA,IACX;AACA,QAAI,OAAO,QAAQ,QAAQ,CAAC,GAAG;AAC3B,cAAQ;AAAA,IACZ;AAAA,EACJ;AACA,SAAO,MAAM;AACjB;AASO,SAAS,eAAe,UAAU,SAAS;AAC9C,SAAO,WAAW,YAAY,IAAI,OAAO,EAAE,WAAW,QAAQ,OAAO,EAAE;AAC3E;"}

package/dist/inputs/selectAllState.js

@@ -0,0 +1,20 @@
+function selectAllStateOf(selectedValues, candidateValues) {
+  const selected = new Set(selectedValues);
+  const chosenCount = candidateValues.filter((value) => selected.has(value)).length;
+  const allChosen = candidateValues.length > 0 && chosenCount === candidateValues.length;
+  return {
+    allChosen,
+    someChosen: chosenCount > 0 && !allChosen,
+    toggled: () => {
+      if (allChosen) {
+        const candidates = new Set(candidateValues);
+        return selectedValues.filter((value) => !candidates.has(value));
+      }
+      return [...selectedValues, ...candidateValues.filter((value) => !selected.has(value))];
+    }
+  };
+}
+export {
+  selectAllStateOf
+};
+//# sourceMappingURL=selectAllState.js.map

package/dist/inputs/selectAllState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectAllState.js","sources":["../../src/inputs/selectAllState.js"],"sourcesContent":["// «Elegir todos» de una lista de varias opciones: si su casilla va marcada, a medias o vacía, y qué queda al picarla.\n// Lo comparten la lista desplegable, el catálogo con buscador y el grupo de casillas.\n//\n// «Todos» son los candidatos: todas las opciones, o las que coinciden con lo buscado. Picarlo con todos ya elegidos los\n// quita; si no, agrega los que faltan al final (lo que ya estaba elegido se queda en su orden).\n//\n// Puro (sin React): se prueba con node (selectAllState.test.js).\n//\n// Genérico del paquete: function (regla de la casa).\n\n/**\n * @template T\n * @param {T[]} selectedValues lo elegido hoy\n * @param {T[]} candidateValues lo que abarca «todos» (sin las opciones apagadas)\n * @returns {{allChosen: boolean, someChosen: boolean, toggled: () => T[]}} someChosen: algunos sí y otros no (casilla a medias)\n */\nexport function selectAllStateOf(selectedValues, candidateValues) {\n    const selected = new Set(selectedValues);\n    const chosenCount = candidateValues.filter((value) => selected.has(value)).length;\n    const allChosen = candidateValues.length > 0 && chosenCount === candidateValues.length;\n    return {\n        allChosen,\n        someChosen: chosenCount > 0 && !allChosen,\n        toggled: () => {\n            if (allChosen) {\n                const candidates = new Set(candidateValues);\n                return selectedValues.filter((value) => !candidates.has(value));\n            }\n            return [...selectedValues, ...candidateValues.filter((value) => !selected.has(value))];\n        },\n    };\n}\n"],"names":[],"mappings":"AAgBO,SAAS,iBAAiB,gBAAgB,iBAAiB;AAC9D,QAAM,WAAW,IAAI,IAAI,cAAc;AACvC,QAAM,cAAc,gBAAgB,OAAO,CAAC,UAAU,SAAS,IAAI,KAAK,CAAC,EAAE;AAC3E,QAAM,YAAY,gBAAgB,SAAS,KAAK,gBAAgB,gBAAgB;AAChF,SAAO;AAAA,IACH;AAAA,IACA,YAAY,cAAc,KAAK,CAAC;AAAA,IAChC,SAAS,MAAM;AACX,UAAI,WAAW;AACX,cAAM,aAAa,IAAI,IAAI,eAAe;AAC1C,eAAO,eAAe,OAAO,CAAC,UAAU,CAAC,WAAW,IAAI,KAAK,CAAC;AAAA,MAClE;AACA,aAAO,CAAC,GAAG,gBAAgB,GAAG,gBAAgB,OAAO,CAAC,UAAU,CAAC,SAAS,IAAI,KAAK,CAAC,CAAC;AAAA,IACzF;AAAA,EACR;AACA;"}

package/dist/inputs/useRowKeys.js

@@ -0,0 +1,26 @@
+"use client";
+import { useRef } from "react";
+import { newIdentifier } from "../identifiers.js";
+function useRowKeys(rowCount) {
+  const keysRef = useRef([]);
+  if (keysRef.current.length !== rowCount) {
+    keysRef.current = Array.from({ length: rowCount }, (unused, index) => keysRef.current[index] ?? newIdentifier());
+  }
+  return {
+    keys: keysRef.current,
+    added: () => {
+      keysRef.current = [...keysRef.current, newIdentifier()];
+    },
+    removed: (index) => {
+      keysRef.current = keysRef.current.filter((unused, keyIndex) => keyIndex !== index);
+    },
+    // un renglón limpio es otro renglón: los campos de adentro empiezan de cero
+    renewed: (index) => {
+      keysRef.current = keysRef.current.map((key, keyIndex) => keyIndex === index ? newIdentifier() : key);
+    }
+  };
+}
+export {
+  useRowKeys
+};
+//# sourceMappingURL=useRowKeys.js.map

package/dist/inputs/useRowKeys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRowKeys.js","sources":["../../src/inputs/useRowKeys.js"],"sourcesContent":["// Una llave estable por renglón de una lista que se repite, para formik (react-hook-form ya trae la suya en useFieldArray).\n//\n// Por qué no el índice: al quitar el renglón 2, el 3 pasa a ser el 2; con el índice como llave React le dejaría al nuevo\n// 2 lo que tenía el viejo (lo escrito a medias en una lista de opciones, un error), y se vería el dato de otro renglón.\n//\n// Si la lista cambia desde afuera (el formulario se limpia o llega del servidor), las llaves se vuelven a hacer.\n//\n// Hook genérico: function (regla de la casa).\nimport {useRef} from 'react';\n\nimport {newIdentifier} from '@/identifiers.js';\n\n/**\n * @param {number} rowCount cuántos renglones tiene la lista hoy\n * @returns {{keys: string[], added: () => void, removed: (index: number) => void, renewed: (index: number) => void}}\n *     added / removed / renewed se llaman JUNTO con el cambio de la lista (agregar al final, quitar uno, limpiar uno)\n */\nexport function useRowKeys(rowCount) {\n    const keysRef = useRef([]);\n    // la lista cambió desde afuera: tantas llaves como renglones\n    if (keysRef.current.length !== rowCount) {\n        keysRef.current = Array.from({length: rowCount}, (unused, index) => keysRef.current[index] ?? newIdentifier());\n    }\n    return {\n        keys: keysRef.current,\n        added: () => {\n            keysRef.current = [...keysRef.current, newIdentifier()];\n        },\n        removed: (index) => {\n            keysRef.current = keysRef.current.filter((unused, keyIndex) => keyIndex !== index);\n        },\n        // un renglón limpio es otro renglón: los campos de adentro empiezan de cero\n        renewed: (index) => {\n            keysRef.current = keysRef.current.map((key, keyIndex) => (keyIndex === index ? newIdentifier() : key));\n        },\n    };\n}\n"],"names":[],"mappings":";;;AAiBO,SAAS,WAAW,UAAU;AACjC,QAAM,UAAU,OAAO,EAAE;AAEzB,MAAI,QAAQ,QAAQ,WAAW,UAAU;AACrC,YAAQ,UAAU,MAAM,KAAK,EAAC,QAAQ,SAAQ,GAAG,CAAC,QAAQ,UAAU,QAAQ,QAAQ,KAAK,KAAK,cAAa,CAAE;AAAA,EACjH;AACA,SAAO;AAAA,IACH,MAAM,QAAQ;AAAA,IACd,OAAO,MAAM;AACT,cAAQ,UAAU,CAAC,GAAG,QAAQ,SAAS,cAAa,CAAE;AAAA,IAC1D;AAAA,IACA,SAAS,CAAC,UAAU;AAChB,cAAQ,UAAU,QAAQ,QAAQ,OAAO,CAAC,QAAQ,aAAa,aAAa,KAAK;AAAA,IACrF;AAAA;AAAA,IAEA,SAAS,CAAC,UAAU;AAChB,cAAQ,UAAU,QAAQ,QAAQ,IAAI,CAAC,KAAK,aAAc,aAAa,QAAQ,cAAa,IAAK,GAAI;AAAA,IACzG;AAAA,EACR;AACA;"}

package/dist/legal/CookieNotice.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import Button from "@mui/material/Button";
+import Link from "@mui/material/Link";
+import Paper from "@mui/material/Paper";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { FLOATING_BOTTOM_SPACE_CSS_VARIABLE } from "../appShell/shellSizes.js";
+import { DEFAULT_COOKIE_CONSENT_KEY, useCookieConsent } from "./useCookieConsent.js";
+import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import { warnUnknownProps } from "../toolkit/unknownProps.js";
+const THEME_NAME = "CalcitaCookieNotice";
+const NoticeRoot = piecePart(THEME_NAME, "Root", Paper);
+const NoticeText = piecePart(THEME_NAME, "Text", Typography);
+const NoticeActions = piecePart(THEME_NAME, "Actions", Stack);
+const NOTICE_MAX_WIDTH = 420;
+const NOTICE_Z_INDEX = 1200;
+function CookieNotice(props) {
+  const {
+    version = "1",
+    storageKey = DEFAULT_COOKIE_CONSENT_KEY,
+    text,
+    policyHref,
+    onPolicyClick,
+    policyLabel,
+    acceptLabel,
+    onAccept,
+    actions,
+    sx,
+    texts,
+    ...unknownProps
+  } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
+  const { t } = useToolkitTranslation("common", texts);
+  const { hasAccepted, accept } = useCookieConsent({ version, storageKey });
+  if (hasAccepted) {
+    return null;
+  }
+  const policyText = policyLabel ?? t("legal.cookies.policy");
+  const policyLink = onPolicyClick ? /* @__PURE__ */ jsx(Link, { component: "button", type: "button", onClick: onPolicyClick, sx: { verticalAlign: "baseline" }, children: policyText }) : policyHref && /* @__PURE__ */ jsx(Link, { href: policyHref, target: "_blank", rel: "noopener noreferrer", children: policyText });
+  return /* @__PURE__ */ jsxs(
+    NoticeRoot,
+    {
+      role: "region",
+      "aria-label": t("legal.cookies.region"),
+      elevation: 8,
+      ownSx: {
+        position: "fixed",
+        zIndex: NOTICE_Z_INDEX,
+        left: { xs: 16, sm: 24 },
+        right: { xs: 16, sm: "auto" },
+        maxWidth: { sm: NOTICE_MAX_WIDTH },
+        bottom: `calc(16px + env(safe-area-inset-bottom, 0px) + var(${FLOATING_BOTTOM_SPACE_CSS_VARIABLE}, 0px))`,
+        p: 2.5,
+        borderRadius: 3
+      },
+      sx,
+      children: [
+        /* @__PURE__ */ jsxs(NoticeText, { variant: "body2", ownSx: { mb: 2 }, children: [
+          text ?? t("legal.cookies.text"),
+          " ",
+          policyLink
+        ] }),
+        /* @__PURE__ */ jsxs(NoticeActions, { direction: "row", ownSx: { gap: 1, justifyContent: "flex-end", flexWrap: "wrap" }, children: [
+          actions,
+          /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: () => {
+            accept();
+            onAccept?.({ version, acceptedAt: (/* @__PURE__ */ new Date()).toISOString() });
+          }, children: acceptLabel ?? t("legal.cookies.accept") })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  CookieNotice as default
+};
+//# sourceMappingURL=CookieNotice.js.map

package/dist/legal/CookieNotice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CookieNotice.js","sources":["../../src/legal/CookieNotice.jsx"],"sourcesContent":["// El aviso de cookies: un recuadro abajo con el texto, la liga a la política y «Aceptar». Sale hasta que la persona acepta\n// ESA versión del aviso en este navegador; al cambiar la versión vuelve a salir. No tapa la pantalla ni la bloquea: se puede\n// seguir trabajando.\n//\n// La política se abre con su dirección (policyHref, en otra pestaña) o con lo que diga la pantalla (onPolicyClick: un\n// PdfViewerDialog, por ejemplo). El texto, los botones y dónde se recuerda se cambian desde afuera; para uno a su manera está\n// useCookieConsent.\n//\n// Con la barra de pestañas abajo del teléfono, se sube para no quedar encima (FLOATING_BOTTOM_SPACE del marco).\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaCookieNotice con defaultProps y\n// styleOverrides de sus partes: root, text, actions.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Button from '@mui/material/Button';\nimport Link from '@mui/material/Link';\nimport Paper from '@mui/material/Paper';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {FLOATING_BOTTOM_SPACE_CSS_VARIABLE} from '@/appShell/shellSizes.js';\nimport {DEFAULT_COOKIE_CONSENT_KEY, useCookieConsent} from '@/legal/useCookieConsent.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaCookieNotice)\nconst THEME_NAME = 'CalcitaCookieNotice';\nconst NoticeRoot = piecePart(THEME_NAME, 'Root', Paper);\nconst NoticeText = piecePart(THEME_NAME, 'Text', Typography);\nconst NoticeActions = piecePart(THEME_NAME, 'Actions', Stack);\n\n// lo ancho del recuadro en escritorio: un párrafo cómodo, no toda la orilla\nconst NOTICE_MAX_WIDTH = 420;\n// por encima de la app, debajo de los diálogos (MUI: modal 1300)\nconst NOTICE_Z_INDEX = 1200;\n\n/**\n * @param {object} props\n * @param {string} [props.version] la del aviso; al cambiarla se vuelve a preguntar (por omisión '1')\n * @param {string} [props.storageKey] dónde se recuerda en este navegador (por omisión 'calcita:cookieConsent')\n * @param {import('react').ReactNode} [props.text] ya traducido; por omisión el del paquete\n * @param {string} [props.policyHref] la dirección de la política (se abre en otra pestaña)\n * @param {() => void} [props.onPolicyClick] en lugar de la dirección: la pantalla la abre a su manera\n * @param {string} [props.policyLabel] ya traducido; por omisión «Política de cookies»\n * @param {string} [props.acceptLabel] ya traducido; por omisión «Aceptar»\n * @param {(acceptance: {version: string, acceptedAt: string}) => void} [props.onAccept] al aceptar (para registrarlo en su API)\n * @param {import('react').ReactNode} [props.actions] botones suyos junto a «Aceptar» («Configurar»)\n * @param {object} [props.sx]\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function CookieNotice(props) {\n    const {\n        version = '1', storageKey = DEFAULT_COOKIE_CONSENT_KEY, text, policyHref, onPolicyClick, policyLabel, acceptLabel, onAccept, actions, sx,\n        texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const {hasAccepted, accept} = useCookieConsent({version, storageKey});\n\n    // guard clause: ya aceptó esta versión\n    if (hasAccepted) {\n        return null;\n    }\n\n    const policyText = policyLabel ?? t('legal.cookies.policy');\n    const policyLink = onPolicyClick\n        ? <Link component=\"button\" type=\"button\" onClick={onPolicyClick} sx={{verticalAlign: 'baseline'}}>{policyText}</Link>\n        : policyHref && <Link href={policyHref} target=\"_blank\" rel=\"noopener noreferrer\">{policyText}</Link>;\n\n    return (\n        <NoticeRoot\n            role=\"region\"\n            aria-label={t('legal.cookies.region')}\n            elevation={8}\n            ownSx={{\n                position: 'fixed', zIndex: NOTICE_Z_INDEX, left: {xs: 16, sm: 24}, right: {xs: 16, sm: 'auto'}, maxWidth: {sm: NOTICE_MAX_WIDTH},\n                bottom: `calc(16px + env(safe-area-inset-bottom, 0px) + var(${FLOATING_BOTTOM_SPACE_CSS_VARIABLE}, 0px))`,\n                p: 2.5, borderRadius: 3,\n            }}\n            sx={sx}\n        >\n            <NoticeText variant=\"body2\" ownSx={{mb: 2}}>\n                {text ?? t('legal.cookies.text')} {policyLink}\n            </NoticeText>\n            <NoticeActions direction=\"row\" ownSx={{gap: 1, justifyContent: 'flex-end', flexWrap: 'wrap'}}>\n                {actions}\n                <Button variant=\"contained\" onClick={() => {\n                    accept();\n                    onAccept?.({version, acceptedAt: new Date().toISOString()});\n                }}>\n                    {acceptLabel ?? t('legal.cookies.accept')}\n                </Button>\n            </NoticeActions>\n        </NoticeRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AA2BA,MAAM,aAAa;AACnB,MAAM,aAAa,UAAU,YAAY,QAAQ,KAAK;AACtD,MAAM,aAAa,UAAU,YAAY,QAAQ,UAAU;AAC3D,MAAM,gBAAgB,UAAU,YAAY,WAAW,KAAK;AAG5D,MAAM,mBAAmB;AAEzB,MAAM,iBAAiB;AAgBvB,SAAwB,aAAa,OAAO;AACxC,QAAM;AAAA,IACF,UAAU;AAAA,IAAK,aAAa;AAAA,IAA4B;AAAA,IAAM;AAAA,IAAY;AAAA,IAAe;AAAA,IAAa;AAAA,IAAa;AAAA,IAAU;AAAA,IAAS;AAAA,IACtI;AAAA,IACA,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AACnC,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,EAAC,aAAa,OAAA,IAAU,iBAAiB,EAAC,SAAS,YAAW;AAGpE,MAAI,aAAa;AACb,WAAO;AAAA,EACX;AAEA,QAAM,aAAa,eAAe,EAAE,sBAAsB;AAC1D,QAAM,aAAa,gBACb,oBAAC,MAAA,EAAK,WAAU,UAAS,MAAK,UAAS,SAAS,eAAe,IAAI,EAAC,eAAe,cAAc,UAAA,WAAA,CAAW,IAC5G,cAAc,oBAAC,MAAA,EAAK,MAAM,YAAY,QAAO,UAAS,KAAI,uBAAuB,UAAA,WAAA,CAAW;AAElG,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,cAAY,EAAE,sBAAsB;AAAA,MACpC,WAAW;AAAA,MACX,OAAO;AAAA,QACH,UAAU;AAAA,QAAS,QAAQ;AAAA,QAAgB,MAAM,EAAC,IAAI,IAAI,IAAI,GAAA;AAAA,QAAK,OAAO,EAAC,IAAI,IAAI,IAAI,OAAA;AAAA,QAAS,UAAU,EAAC,IAAI,iBAAA;AAAA,QAC/G,QAAQ,sDAAsD,kCAAkC;AAAA,QAChG,GAAG;AAAA,QAAK,cAAc;AAAA,MAAA;AAAA,MAE1B;AAAA,MAEA,UAAA;AAAA,QAAA,qBAAC,cAAW,SAAQ,SAAQ,OAAO,EAAC,IAAI,KACnC,UAAA;AAAA,UAAA,QAAQ,EAAE,oBAAoB;AAAA,UAAE;AAAA,UAAE;AAAA,QAAA,GACvC;AAAA,QACA,qBAAC,eAAA,EAAc,WAAU,OAAM,OAAO,EAAC,KAAK,GAAG,gBAAgB,YAAY,UAAU,OAAA,GAChF,UAAA;AAAA,UAAA;AAAA,UACD,oBAAC,QAAA,EAAO,SAAQ,aAAY,SAAS,MAAM;AACvC,mBAAA;AACA,uBAAW,EAAC,SAAS,aAAY,oBAAI,QAAO,YAAA,GAAc;AAAA,UAC9D,GACK,UAAA,eAAe,EAAE,sBAAsB,EAAA,CAC5C;AAAA,QAAA,EAAA,CACJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGZ;"}