@stackcraftmx/calcita 0.23.0 → 0.26.0

package/dist/index.js

@@ -1,20 +1,23 @@
 import { ToolkitProvider } from "./toolkit/ToolkitProvider.js";
 import { useToolkitNavigation, useToolkitSettings } from "./toolkit/toolkitContext.js";
 import { useToolkitTranslation } from "./toolkit/useToolkitTranslation.js";
-import { DEFAULT_CURRENCY, DEFAULT_LANGUAGE, configureToolkit, toolkitSettings, translateToolkit } from "./toolkit/toolkitSettings.js";
-import { browserNavigation } from "./toolkit/browserNavigation.js";
-import { default as default2 } from "./locales/es.js";
-import { default as default3 } from "./locales/en.js";
-import { default as default4 } from "./feedback/ConfirmDialog.js";
-import { default as default5 } from "./feedback/ModalWaiting.js";
-import { NEW_BUILD_NOTICE_VARIANT, default as default6 } from "./feedback/NewBuildNotice.js";
-import { default as default7 } from "./feedback/StaleBuildBoundary.js";
-import { default as default8 } from "./feedback/Toaster.js";
+import { default as default2 } from "./toolkit/ComponentTexts.js";
+import { DEFAULT_CURRENCY, DEFAULT_LANGUAGE, DEFAULT_LANGUAGES, configureToolkit, toolkitSettings, translateToolkit } from "./toolkit/toolkitSettings.js";
+import { browserNavigation, createBrowserNavigation } from "./toolkit/browserNavigation.js";
+import { createHashNavigation } from "./toolkit/hashNavigation.js";
+import { default as default3 } from "./locales/es.js";
+import { default as default4 } from "./locales/en.js";
+import { default as default5 } from "./feedback/ConfirmDialog.js";
+import { default as default6 } from "./feedback/ModalWaiting.js";
+import { NEW_BUILD_NOTICE_VARIANT, default as default7 } from "./feedback/NewBuildNotice.js";
+import { default as default8 } from "./feedback/StaleBuildBoundary.js";
+import { default as default9 } from "./feedback/Toaster.js";
 import { confirmActionMachine } from "./feedback/confirmActionMachine.js";
 import { TOAST_DEFAULT_OPTIONS, dismissToast, errorsObjectToMessage, toastDefault, toastError, toastInfo, toastLoading, toastProblem, toastPromise, toastSuccess, toastWarn } from "./feedback/toast.js";
 import { useConfirmAction } from "./feedback/useConfirmAction.js";
-import { default as default9 } from "./downloads/DownloadManager.js";
+import { default as default10 } from "./downloads/DownloadManager.js";
 import { cancelDownload, clearFinishedDownloads, startDownload } from "./downloads/downloadQueue.js";
+import { DEFAULT_FILE_TYPES, UNKNOWN_FILE_TYPE, useFileTypes } from "./downloads/fileTypes.js";
 import { DOWNLOAD_STATUS, downloadsMachine } from "./downloads/downloadsMachine.js";
 import { THEME_LOOK, TOP_BAR, createToolkitTheme } from "./theme/createToolkitTheme.js";
 import { isAndroidDevice } from "./theme/androidDevice.js";
@@ -25,77 +28,82 @@ import { mergeComponents } from "./theme/mergeComponents.js";
 import { GLASS_INSET_PIXELS, GLASS_MENU_RADIUS_PIXELS, GLASS_OPACITY, GLASS_PANEL_RADIUS_PIXELS, accentTextStylesOf, ambientBackgroundOf, canvasFieldStylesOf, fieldWellStylesOf, fixedBackgroundLayerOf, glassDropOf, glassStylesOf, glassSurfaceOf, isGlassTheme, materialBackgroundOf, materialStylesOf, materialSurfaceOf, scrollEdgeStylesOf } from "./theme/glassSurface.js";
 import { AppLayout, MENU_POSITION } from "./appShell/AppLayout.js";
 import { AuthLayout } from "./appShell/AuthLayout.js";
-import { default as default10 } from "./appShell/BarActions.js";
-import { default as default11 } from "./appShell/BarActionButton.js";
+import { default as default11 } from "./appShell/BarActions.js";
+import { default as default12 } from "./appShell/BarActionButton.js";
+import { default as default13 } from "./appShell/BarSearch.js";
+import { default as default14 } from "./ui/actions/ActionsMenu.js";
+import { SELECTION_PHONE_LAYOUT, default as default15, selectionFloatsOnPhone } from "./ui/actions/SelectionActions.js";
 import { BAR_ACTIONS_PLACEMENT, useBarActionsPlacement, useCloseBarActionsMenu } from "./appShell/barActionsSlot.js";
-import { BAR_CAPSULE_HEIGHT_PIXELS, default as default12 } from "./appShell/BarCapsule.js";
+import { BAR_CAPSULE_HEIGHT_PIXELS, default as default16 } from "./appShell/BarCapsule.js";
 import { usesMobileTabBar } from "./appShell/tabBarRule.js";
-import { default as default13, SettingSection } from "./appShell/AppearanceSettings.js";
+import { default as default17, SettingSection } from "./appShell/AppearanceSettings.js";
 import { barMenuPlacementOf } from "./appShell/barMenuPlacement.js";
 import { DRAWER_WIDTH_COLLAPSED, DRAWER_WIDTH_EXPANDED, MAIN_CONTENT_ID } from "./appShell/shellSizes.js";
 import { useAppMenu } from "./appShell/appMenuContext.js";
 import { usePageTitle } from "./appShell/pageTitle.js";
 import { initialsOf, menuItemDescriptionOf, menuItemLabelOf, menuItemSectionOf, menuSectionsOf } from "./appShell/menuItemText.js";
-import { activeMenuItemOf, composeMenu, menuBadgeOf, menuBreadcrumbsOf, mobileTabsOf, parentMenuItemOf, screenMenuItemsOf } from "./navigation/appMenu.js";
+import { activeMenuItemOf, composeMenu, menuBadgeOf, menuBreadcrumbsOf, menuItemsWithIconsOf, mobileTabsOf, parentMenuItemOf, screenMenuItemsOf } from "./navigation/appMenu.js";
 import { menuBadgesFrom, useMenuBadges } from "./navigation/useMenuBadges.js";
 import { allowOnlyUnrestricted, createAccessChecker } from "./access/accessRules.js";
-import { default as default14 } from "./access/Can.js";
-import { default as default15 } from "./access/RequireAccess.js";
+import { default as default18 } from "./access/Can.js";
+import { default as default19 } from "./access/RequireAccess.js";
 import { useAccessChecker, useCan } from "./access/useCan.js";
-import { default as default16 } from "./access/PermissionMatrix.js";
+import { default as default20 } from "./access/PermissionMatrix.js";
 import { composePermissionGroups, groupStateOf, withPermission, withPermissionGroup } from "./access/permissionGroups.js";
 import { DEFAULT_PASSWORD_POLICY, PASSWORD_RULE, isPasswordAccepted, passwordChecksOf } from "./auth/passwordRules.js";
-import { default as default17 } from "./auth/PasswordChecklist.js";
-import { ERROR_PAGE_KIND, default as default18 } from "./ui/layout/ErrorPage.js";
-import { default as default19 } from "./upload/FileDropzone.js";
+import { default as default21 } from "./auth/PasswordChecklist.js";
+import { ERROR_PAGE_KIND, default as default22 } from "./ui/layout/ErrorPage.js";
+import { default as default23 } from "./upload/FileDropzone.js";
 import { FILE_ACCEPT_PRESETS, FILE_REJECTION, matchesAccept, parseFileSize, resolveAccept } from "./upload/fileRules.js";
 import { buildUploadActors, uploadMachine } from "./upload/uploadMachine.js";
 import { uploadWithProgress } from "./upload/uploadWithProgress.js";
 import { APP_BAR_HEIGHT_CSS_VARIABLE, SCROLL_MARGIN_BELOW_APP_BAR, useAppBarHeightPublisher } from "./ui/layout/appBarHeight.js";
-import { default as default20 } from "./ui/layout/CollapsibleSection.js";
-import { default as default21 } from "./ui/layout/ContentDialog.js";
-import { default as default22 } from "./ui/layout/DefinitionList.js";
-import { default as default23 } from "./ui/layout/DetailHeader.js";
-import { default as default24 } from "./ui/layout/FullPageLoader.js";
-import { default as default25 } from "./ui/layout/GlassLensFilter.js";
-import { default as default26 } from "./ui/layout/GlassPanel.js";
-import { default as default27 } from "./ui/layout/PageHeader.js";
-import { default as default28 } from "./ui/layout/PageHeading.js";
-import { default as default29 } from "./ui/layout/ProfileHeader.js";
-import { default as default30, scrollableRow } from "./ui/layout/ScrollableRow.js";
-import { default as default31 } from "./ui/layout/SectionCard.js";
-import { default as default32 } from "./ui/navigation/BackButton.js";
-import { default as default33 } from "./ui/navigation/ColorSchemeToggle.js";
-import { default as default34 } from "./ui/navigation/DocumentTitle.js";
-import { LANGUAGES, default as default35 } from "./ui/navigation/LanguageToggle.js";
-import { default as default36 } from "./ui/navigation/FontSizeToggle.js";
+import { default as default24 } from "./ui/layout/CollapsibleSection.js";
+import { default as default25 } from "./ui/layout/ContentDialog.js";
+import { default as default26 } from "./ui/layout/DefinitionList.js";
+import { default as default27 } from "./ui/layout/DetailHeader.js";
+import { default as default28 } from "./ui/layout/FullPageLoader.js";
+import { default as default29 } from "./ui/layout/GlassLensFilter.js";
+import { default as default30 } from "./ui/layout/GlassPanel.js";
+import { default as default31 } from "./ui/layout/PageHeader.js";
+import { default as default32 } from "./ui/layout/PageHeading.js";
+import { default as default33 } from "./ui/layout/ProfileHeader.js";
+import { default as default34, scrollableRow } from "./ui/layout/ScrollableRow.js";
+import { default as default35 } from "./ui/layout/SectionCard.js";
+import { default as default36 } from "./ui/navigation/BackButton.js";
+import { default as default37 } from "./ui/navigation/ColorSchemeToggle.js";
+import { default as default38 } from "./ui/navigation/DocumentTitle.js";
+import { LANGUAGES, default as default39 } from "./ui/navigation/LanguageToggle.js";
+import { default as default40 } from "./ui/navigation/FontSizeToggle.js";
 import { FONT_SIZE_LEVELS } from "./ui/navigation/fontSizeLevels.js";
-import { default as default37 } from "./ui/navigation/PageBreadcrumbs.js";
-import { default as default38 } from "./ui/filters/DateRangeFilter.js";
-import { default as default39 } from "./ui/filters/PeriodRangeSelector.js";
-import { default as default40 } from "./ui/filters/QuickFilters.js";
-import { SEGMENTED_CONTROL_SX, default as default41 } from "./ui/filters/SegmentedControl.js";
-import { default as default42 } from "./ui/labels/DictionaryText.js";
-import { default as default43 } from "./ui/labels/StatusChip.js";
-import { default as default44 } from "./ui/labels/Tag.js";
-import { default as default45 } from "./ui/actions/CopyButton.js";
-import { default as default46 } from "./ui/actions/DownloadMenu.js";
-import { default as default47 } from "./ui/actions/SecretField.js";
-import { default as default48 } from "./ui/metrics/CalendarHeatmap.js";
-import { default as default49, TREND_DIRECTION } from "./ui/metrics/MetricCard.js";
-import { default as default50 } from "./ui/metrics/TableToggle.js";
-import { default as default51 } from "./inputs/CatalogInput.js";
-import { default as default52 } from "./inputs/ColorInput.js";
-import { default as default53 } from "./inputs/FieldFrame.js";
-import { FORM_ROW_CLASS, FormRow, default as default54 } from "./inputs/FormSection.js";
-import { default as default55 } from "./inputs/NumberInput.js";
-import { default as default56 } from "./inputs/SelectInput.js";
-import { default as default57 } from "./inputs/TextInput.js";
+import { default as default41 } from "./ui/navigation/PageBreadcrumbs.js";
+import { default as default42 } from "./ui/filters/DateRangeFilter.js";
+import { default as default43 } from "./ui/filters/PeriodRangeSelector.js";
+import { default as default44 } from "./ui/filters/QuickFilters.js";
+import { SEGMENTED_CONTROL_SX, default as default45 } from "./ui/filters/SegmentedControl.js";
+import { default as default46 } from "./ui/labels/DictionaryText.js";
+import { default as default47 } from "./ui/labels/StatusChip.js";
+import { default as default48 } from "./ui/labels/Tag.js";
+import { default as default49 } from "./ui/actions/CopyButton.js";
+import { default as default50 } from "./ui/actions/DownloadMenu.js";
+import { default as default51 } from "./ui/actions/SecretField.js";
+import { default as default52 } from "./ui/metrics/CalendarHeatmap.js";
+import { default as default53, TREND_DIRECTION } from "./ui/metrics/MetricCard.js";
+import { CHART_VIEW, default as default54 } from "./ui/metrics/TableToggle.js";
+import { default as default55 } from "./inputs/CatalogInput.js";
+import { default as default56 } from "./inputs/ColorInput.js";
+import { default as default57 } from "./inputs/FieldFrame.js";
+import { FORM_ROW_CLASS, FormRow, default as default58 } from "./inputs/FormSection.js";
+import { default as default59 } from "./inputs/NumberInput.js";
+import { default as default60 } from "./inputs/SelectInput.js";
+import { default as default61 } from "./inputs/WizardLayout.js";
+import { default as default62 } from "./inputs/TextInput.js";
 import { HEX_COLOR, MIN_CONTRAST, contrastOnWhite, readableVariantOf } from "./inputs/colorContrast.js";
 import { cleanNumberText, completeDecimals, groupThousands } from "./inputs/numberText.js";
 import { translateValidationMessage } from "./forms/validationMessages.js";
 import { dictionaryEntryOf, labelOf, lookup, shortLabelOf } from "./dictionaries/dictionaries.js";
-import { dayOfPlainDate, formatCurrency, formatDate, formatDateTime, formatFileSize, formatList, formatMonthName, formatMonthShortName, formatNumber, formatPercent, formatTime, formatWeekdayShortName } from "./formatting.js";
+import { dayOfPlainDate, formatCurrency, formatDate, formatDateTime, formatFileSize, formatList, formatMonthName, formatMonthShortName, formatNumber, formatPercent, formatTime, formatWeekdayShortName, formattersOf } from "./formatting.js";
+import { useFormatters } from "./toolkit/useFormatters.js";
 import { parseInstant, parsePlainDate } from "./dates.js";
 import { fieldErrorsOf, problemMessage, problemTitle } from "./problems.js";
 import { newIdentifier } from "./identifiers.js";
@@ -104,139 +112,151 @@ import { REDIRECT_PARAM, readRedirectParam, safeInternalPath, withRedirect } fro
 import { recallListUrl, rememberListUrl, useRememberListUrl } from "./lastListUrl.js";
 import { currentHistoryIndex, forgetPageName, pageNameAt, rememberPageName, useNavigationTrail, usePageName } from "./navigationTrail.js";
 import { periodRangeIsValid, rangeEndAfterStartChange, rangeEndOptionsOf } from "./periodRanges.js";
-import { createLogger, setLogLevel } from "./observability/logger.js";
+import { addLogSink, createLogger, setLogLevel } from "./observability/logger.js";
 import { isNewBuildPublished, reportPublishedBuild, useNewBuildPublished } from "./observability/publishedBuild.js";
 import { BUILD_WATCH_ACTION, buildWatchActionOf, publishedBuildIdOf } from "./observability/buildWatch.js";
 import { usePublishedBuildWatch } from "./observability/usePublishedBuildWatch.js";
 import { API_ERROR_STATUS, ApiError } from "./api/ApiError.js";
-import { API_RESPONSE_PARSE, apiUrlOf, createApiClient } from "./api/createApiClient.js";
+import { API_RESPONSE_PARSE, apiErrorOf, apiUrlOf, createApiClient } from "./api/createApiClient.js";
 import { isStaleChunkError, recoverFromStaleChunk } from "./api/staleChunks.js";
-import { ACCOUNT_EVENT_KIND, default as default58 } from "./security/ActivityLog.js";
-import { default as default59 } from "./security/RecoveryCodesDialog.js";
-import { default as default60 } from "./security/SessionsCard.js";
-import { default as default61 } from "./inbox/InboxLayout.js";
-import { default as default62 } from "./inbox/MessageList.js";
-import { default as default63 } from "./inbox/MessageView.js";
+import { ACCOUNT_EVENT_KIND, default as default63 } from "./security/ActivityLog.js";
+import { default as default64 } from "./security/RecoveryCodesDialog.js";
+import { default as default65 } from "./security/SessionsCard.js";
+import { default as default66 } from "./inbox/InboxLayout.js";
+import { default as default67 } from "./inbox/MessageList.js";
+import { default as default68 } from "./inbox/MessageView.js";
 import { inboxDateOf } from "./inbox/inboxDates.js";
 import { INSTALL_VARIANT, detectPlatform, parseIOSMajor, resolveInstallVariant } from "./pwa/installInstructions.js";
 import { useInstallPrompt } from "./pwa/useInstallPrompt.js";
-import { default as default64, variantHasInstructions } from "./pwa/InstallInstructionsDialog.js";
-import { default as default65 } from "./pwa/InstallPromptBanner.js";
-import { default as default66 } from "./pwa/InstallAppSetting.js";
+import { default as default69, variantHasInstructions } from "./pwa/InstallInstructionsDialog.js";
+import { default as default70 } from "./pwa/InstallPromptBanner.js";
+import { default as default71 } from "./pwa/InstallAppSetting.js";
 export {
   ACCOUNT_EVENT_KIND,
   API_ERROR_STATUS,
   API_RESPONSE_PARSE,
   APP_BAR_HEIGHT_CSS_VARIABLE,
-  default58 as ActivityLog,
+  default14 as ActionsMenu,
+  default63 as ActivityLog,
   ApiError,
   AppLayout,
-  default13 as AppearanceSettings,
+  default17 as AppearanceSettings,
   AuthLayout,
   BAR_ACTIONS_PLACEMENT,
   BAR_CAPSULE_HEIGHT_PIXELS,
   BUILD_WATCH_ACTION,
-  default32 as BackButton,
-  default11 as BarActionButton,
-  default10 as BarActions,
-  default12 as BarCapsule,
-  default48 as CalendarHeatmap,
-  default14 as Can,
-  default51 as CatalogInput,
-  default20 as CollapsibleSection,
-  default52 as ColorInput,
-  default33 as ColorSchemeToggle,
-  default4 as ConfirmDialog,
-  default21 as ContentDialog,
-  default45 as CopyButton,
+  default36 as BackButton,
+  default12 as BarActionButton,
+  default11 as BarActions,
+  default16 as BarCapsule,
+  default13 as BarSearch,
+  CHART_VIEW,
+  default52 as CalendarHeatmap,
+  default18 as Can,
+  default55 as CatalogInput,
+  default24 as CollapsibleSection,
+  default56 as ColorInput,
+  default37 as ColorSchemeToggle,
+  default2 as ComponentTexts,
+  default5 as ConfirmDialog,
+  default25 as ContentDialog,
+  default49 as CopyButton,
   DEFAULT_CURRENCY,
+  DEFAULT_FILE_TYPES,
   DEFAULT_LANGUAGE,
+  DEFAULT_LANGUAGES,
   DEFAULT_PASSWORD_POLICY,
   DOWNLOAD_STATUS,
   DRAWER_WIDTH_COLLAPSED,
   DRAWER_WIDTH_EXPANDED,
-  default38 as DateRangeFilter,
-  default22 as DefinitionList,
-  default23 as DetailHeader,
-  default42 as DictionaryText,
-  default34 as DocumentTitle,
-  default9 as DownloadManager,
-  default46 as DownloadMenu,
+  default42 as DateRangeFilter,
+  default26 as DefinitionList,
+  default27 as DetailHeader,
+  default46 as DictionaryText,
+  default38 as DocumentTitle,
+  default10 as DownloadManager,
+  default50 as DownloadMenu,
   ERROR_PAGE_KIND,
-  default18 as ErrorPage,
+  default22 as ErrorPage,
   FILE_ACCEPT_PRESETS,
   FILE_REJECTION,
   FONT_SIZE_LEVELS,
   FORM_ROW_CLASS,
-  default53 as FieldFrame,
-  default19 as FileDropzone,
-  default36 as FontSizeToggle,
+  default57 as FieldFrame,
+  default23 as FileDropzone,
+  default40 as FontSizeToggle,
   FormRow,
-  default54 as FormSection,
-  default24 as FullPageLoader,
+  default58 as FormSection,
+  default28 as FullPageLoader,
   GLASS_INSET_PIXELS,
   GLASS_MENU_RADIUS_PIXELS,
   GLASS_OPACITY,
   GLASS_PANEL_RADIUS_PIXELS,
-  default25 as GlassLensFilter,
-  default26 as GlassPanel,
+  default29 as GlassLensFilter,
+  default30 as GlassPanel,
   HEX_COLOR,
   INSTALL_VARIANT,
-  default61 as InboxLayout,
-  default66 as InstallAppSetting,
-  default64 as InstallInstructionsDialog,
-  default65 as InstallPromptBanner,
+  default66 as InboxLayout,
+  default71 as InstallAppSetting,
+  default69 as InstallInstructionsDialog,
+  default70 as InstallPromptBanner,
   LANGUAGES,
-  default35 as LanguageToggle,
+  default39 as LanguageToggle,
   MAIN_CONTENT_ID,
   MENU_POSITION,
   MINIMAL_BACKGROUND,
   MIN_CONTRAST,
-  default62 as MessageList,
-  default63 as MessageView,
-  default49 as MetricCard,
-  default5 as ModalWaiting,
+  default67 as MessageList,
+  default68 as MessageView,
+  default53 as MetricCard,
+  default6 as ModalWaiting,
   NEW_BUILD_NOTICE_VARIANT,
-  default6 as NewBuildNotice,
-  default55 as NumberInput,
+  default7 as NewBuildNotice,
+  default59 as NumberInput,
   PASSWORD_RULE,
-  default37 as PageBreadcrumbs,
-  default27 as PageHeader,
-  default28 as PageHeading,
-  default17 as PasswordChecklist,
-  default39 as PeriodRangeSelector,
-  default16 as PermissionMatrix,
-  default29 as ProfileHeader,
-  default40 as QuickFilters,
+  default41 as PageBreadcrumbs,
+  default31 as PageHeader,
+  default32 as PageHeading,
+  default21 as PasswordChecklist,
+  default43 as PeriodRangeSelector,
+  default20 as PermissionMatrix,
+  default33 as ProfileHeader,
+  default44 as QuickFilters,
   REDIRECT_PARAM,
-  default59 as RecoveryCodesDialog,
-  default15 as RequireAccess,
+  default64 as RecoveryCodesDialog,
+  default19 as RequireAccess,
   SCROLL_MARGIN_BELOW_APP_BAR,
   SEGMENTED_CONTROL_SX,
+  SELECTION_PHONE_LAYOUT,
   STACKCRAFT,
-  default30 as ScrollableRow,
-  default47 as SecretField,
-  default31 as SectionCard,
-  default41 as SegmentedControl,
-  default56 as SelectInput,
-  default60 as SessionsCard,
+  default34 as ScrollableRow,
+  default51 as SecretField,
+  default35 as SectionCard,
+  default45 as SegmentedControl,
+  default60 as SelectInput,
+  default15 as SelectionActions,
+  default65 as SessionsCard,
   SettingSection,
-  default7 as StaleBuildBoundary,
-  default43 as StatusChip,
+  default8 as StaleBuildBoundary,
+  default47 as StatusChip,
   THEME_LOOK,
   TOAST_DEFAULT_OPTIONS,
   TOP_BAR,
   TREND_DIRECTION,
-  default50 as TableToggle,
-  default44 as Tag,
-  default57 as TextInput,
-  default8 as Toaster,
+  default54 as TableToggle,
+  default48 as Tag,
+  default62 as TextInput,
+  default9 as Toaster,
   ToolkitProvider,
+  UNKNOWN_FILE_TYPE,
+  default61 as WizardLayout,
   XLSX_CONTENT_TYPE,
   accentTextStylesOf,
   activeMenuItemOf,
+  addLogSink,
   allowOnlyUnrestricted,
   ambientBackgroundOf,
+  apiErrorOf,
   apiUrlOf,
   barMenuPlacementOf,
   browserNavigation,
@@ -254,6 +274,8 @@ export {
   contrastOnWhite,
   createAccessChecker,
   createApiClient,
+  createBrowserNavigation,
+  createHashNavigation,
   createLogger,
   createToolkitTheme,
   currentHistoryIndex,
@@ -279,6 +301,7 @@ export {
   formatPercent,
   formatTime,
   formatWeekdayShortName,
+  formattersOf,
   glassDropOf,
   glassStylesOf,
   glassSurfaceOf,
@@ -304,6 +327,7 @@ export {
   menuItemDescriptionOf,
   menuItemLabelOf,
   menuItemSectionOf,
+  menuItemsWithIconsOf,
   menuSectionsOf,
   mergeComponents,
   mobileTabsOf,
@@ -335,6 +359,7 @@ export {
   screenMenuItemsOf,
   scrollEdgeStylesOf,
   scrollableRow,
+  selectionFloatsOnPhone,
   setLogLevel,
   shortLabelOf,
   stackcraftDarkPalette,
@@ -350,8 +375,8 @@ export {
   toastWarn,
   toolkitComponents,
   toolkitSettings,
-  default3 as toolkitTextsEn,
-  default2 as toolkitTextsEs,
+  default4 as toolkitTextsEn,
+  default3 as toolkitTextsEs,
   translateToolkit,
   translateValidationMessage,
   uploadMachine,
@@ -363,6 +388,8 @@ export {
   useCan,
   useCloseBarActionsMenu,
   useConfirmAction,
+  useFileTypes,
+  useFormatters,
   useInstallPrompt,
   useMenuBadges,
   useNavigationTrail,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/inputs/CatalogInput.js

@@ -23,18 +23,22 @@ function CatalogInput({
   loading = false,
   disabled = false,
   inputRef,
-  placeholder
+  placeholder,
+  multiple = false,
+  texts
 }) {
-  const { t } = useToolkitTranslation("common");
+  const { t } = useToolkitTranslation("common", texts);
   const generatedId = useId();
   const inputId = `${name ?? "catalog"}-${generatedId}`;
   const errorText = translateValidationMessage(t, error);
-  const selectedOption = options.find((option) => option.code === value) ?? null;
+  const selectedOption = multiple ? (Array.isArray(value) ? value : []).map((code) => options.find((option) => option.code === code)).filter(Boolean) : options.find((option) => option.code === value) ?? null;
   const optionLabelOf = (option) => formatLabel ? formatLabel(option) : `${option.label} (${option.code})`;
   return /* @__PURE__ */ jsx(FieldFrame, { inputId, label, children: /* @__PURE__ */ jsx(
     Autocomplete,
     {
       id: inputId,
+      multiple,
+      disableCloseOnSelect: multiple,
       fullWidth: true,
       size: "small",
       options,
@@ -50,7 +54,7 @@ function CatalogInput({
         const matchingOptions = wantedText ? allOptions.filter((option) => plainTextOf(optionLabelOf(option)).includes(wantedText)) : allOptions;
         return matchingOptions.slice(0, MAX_VISIBLE_OPTIONS);
       },
-      onChange: (event, option) => onChange(option?.code ?? ""),
+      onChange: (event, option) => onChange(multiple ? option.map((chosenOption) => chosenOption.code) : option?.code ?? ""),
       onBlur,
       renderInput: (inputProps) => /* @__PURE__ */ jsx(TextField, { ...inputProps, name, inputRef, placeholder, error: Boolean(errorText), helperText: errorText ?? helperText })
     }

package/dist/inputs/CatalogInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CatalogInput.js","sources":["../../src/inputs/CatalogInput.jsx"],"sourcesContent":["// Campo suelto que elige UNA clave de un catálogo ([{code, label}]): actividad económica, giro, país, banco… Se busca por la\n// clave o por el texto, sin acentos ni mayúsculas, y al formulario llega solo la clave.\n//\n// Por qué no un <select>: con catálogos de cientos de opciones no se puede usar; y con texto libre la gente inventa claves.\n// Se enseñan a lo más MAX_VISIBLE_OPTIONS coincidencias: con miles, la lista completa congela la pantalla.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Autocomplete from '@mui/material/Autocomplete';\nimport TextField from '@mui/material/TextField';\n\nimport {translateValidationMessage} from '@/forms/validationMessages.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\n\nconst MAX_VISIBLE_OPTIONS = 100;\n\n/**\n * Un texto sin acentos ni mayúsculas, para que «credito» encuentre «Crédito».\n *\n * @param {unknown} text\n * @returns {string}\n */\nfunction plainTextOf(text) {\n    return String(text ?? '').normalize('NFD').replace(/\\p{Diacritic}/gu, '').toLowerCase();\n}\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {string} props.label ya traducido\n * @param {string|null|undefined} props.value la clave elegida ('' = ninguna)\n * @param {(code: string) => void} props.onChange recibe la clave ('' al borrar)\n * @param {() => void} [props.onBlur]\n * @param {Array<{code: string, label: string}>} props.options\n * @param {(option: {code: string, label: string}) => string} [props.formatLabel] por omisión «Nombre (clave)»\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText]\n * @param {boolean} [props.loading] el catálogo todavía no llega\n * @param {string} [props.placeholder] la pista con el campo vacío, ya traducida (p. ej. «Busque un estado»): sin ella, en un\n *     formulario agrupado el campo vacío solo enseña su botón y no se entiende qué es\n * @param {boolean} [props.disabled]\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef]\n */\nexport default function CatalogInput({\n    name, label, value, onChange, onBlur, options = [], formatLabel, error, helperText = ' ', loading = false, disabled = false, inputRef, placeholder,\n}) {\n    const {t} = useToolkitTranslation('common');\n    const generatedId = useId();\n    const inputId = `${name ?? 'catalog'}-${generatedId}`;\n    const errorText = translateValidationMessage(t, error);\n    const selectedOption = options.find((option) => option.code === value) ?? null;\n    const optionLabelOf = (option) => (formatLabel ? formatLabel(option) : `${option.label} (${option.code})`);\n\n    return (\n        <FieldFrame inputId={inputId} label={label}>\n            <Autocomplete\n                id={inputId}\n                fullWidth\n                size=\"small\"\n                options={options}\n                value={selectedOption}\n                loading={loading}\n                disabled={disabled}\n                noOptionsText={t('form.noOptions')}\n                loadingText={t('form.loadingOptions')}\n                getOptionLabel={optionLabelOf}\n                isOptionEqualToValue={(option, currentOption) => option.code === currentOption.code}\n                filterOptions={(allOptions, {inputValue}) => {\n                    const wantedText = plainTextOf(inputValue);\n                    const matchingOptions = wantedText\n                        ? allOptions.filter((option) => plainTextOf(optionLabelOf(option)).includes(wantedText))\n                        : allOptions;\n                    return matchingOptions.slice(0, MAX_VISIBLE_OPTIONS);\n                }}\n                onChange={(event, option) => onChange(option?.code ?? '')}\n                onBlur={onBlur}\n                renderInput={(inputProps) => (\n                    <TextField {...inputProps} name={name} inputRef={inputRef} placeholder={placeholder} error={Boolean(errorText)} helperText={errorText ?? helperText} />\n                )}\n            />\n        </FieldFrame>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;AAeA,MAAM,sBAAsB;AAQ5B,SAAS,YAAY,MAAM;AACvB,SAAO,OAAO,QAAQ,EAAE,EAAE,UAAU,KAAK,EAAE,QAAQ,WAAA,kBAAA,IAAA,GAAmB,EAAE,EAAE,YAAA;AAC9E;AAmBA,SAAwB,aAAa;AAAA,EACjC;AAAA,EAAM;AAAA,EAAO;AAAA,EAAO;AAAA,EAAU;AAAA,EAAQ,UAAU,CAAA;AAAA,EAAI;AAAA,EAAa;AAAA,EAAO,aAAa;AAAA,EAAK,UAAU;AAAA,EAAO,WAAW;AAAA,EAAO;AAAA,EAAU;AAC3I,GAAG;AACC,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ;AAC1C,QAAM,cAAc,MAAA;AACpB,QAAM,UAAU,GAAG,QAAQ,SAAS,IAAI,WAAW;AACnD,QAAM,YAAY,2BAA2B,GAAG,KAAK;AACrD,QAAM,iBAAiB,QAAQ,KAAK,CAAC,WAAW,OAAO,SAAS,KAAK,KAAK;AAC1E,QAAM,gBAAgB,CAAC,WAAY,cAAc,YAAY,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,OAAO,IAAI;AAEtG,SACI,oBAAC,YAAA,EAAW,SAAkB,OAC1B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,IAAI;AAAA,MACJ,WAAS;AAAA,MACT,MAAK;AAAA,MACL;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,eAAe,EAAE,gBAAgB;AAAA,MACjC,aAAa,EAAE,qBAAqB;AAAA,MACpC,gBAAgB;AAAA,MAChB,sBAAsB,CAAC,QAAQ,kBAAkB,OAAO,SAAS,cAAc;AAAA,MAC/E,eAAe,CAAC,YAAY,EAAC,iBAAgB;AACzC,cAAM,aAAa,YAAY,UAAU;AACzC,cAAM,kBAAkB,aAClB,WAAW,OAAO,CAAC,WAAW,YAAY,cAAc,MAAM,CAAC,EAAE,SAAS,UAAU,CAAC,IACrF;AACN,eAAO,gBAAgB,MAAM,GAAG,mBAAmB;AAAA,MACvD;AAAA,MACA,UAAU,CAAC,OAAO,WAAW,SAAS,QAAQ,QAAQ,EAAE;AAAA,MACxD;AAAA,MACA,aAAa,CAAC,eACV,oBAAC,WAAA,EAAW,GAAG,YAAY,MAAY,UAAoB,aAA0B,OAAO,QAAQ,SAAS,GAAG,YAAY,aAAa,WAAA,CAAY;AAAA,IAAA;AAAA,EAAA,GAGjK;AAER;"}
+{"version":3,"file":"CatalogInput.js","sources":["../../src/inputs/CatalogInput.jsx"],"sourcesContent":["// Campo suelto que elige una clave de un catálogo ([{code, label}]): actividad económica, giro, país, banco… Se busca por la\n// clave o por el texto, sin acentos ni mayúsculas, y al formulario llega solo la clave. Con `multiple` elige varias: cada una\n// queda como chip con su ×, la lista no se cierra al elegir y al formulario llega la lista de claves en el orden elegido.\n//\n// Por qué no un <select>: con catálogos de cientos de opciones no se puede usar; y con texto libre la gente inventa claves.\n// Se enseñan a lo más MAX_VISIBLE_OPTIONS coincidencias: con miles, la lista completa congela la pantalla.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Autocomplete from '@mui/material/Autocomplete';\nimport TextField from '@mui/material/TextField';\n\nimport {translateValidationMessage} from '@/forms/validationMessages.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\n\nconst MAX_VISIBLE_OPTIONS = 100;\n\n/**\n * Un texto sin acentos ni mayúsculas, para que «credito» encuentre «Crédito».\n *\n * @param {unknown} text\n * @returns {string}\n */\nfunction plainTextOf(text) {\n    return String(text ?? '').normalize('NFD').replace(/\\p{Diacritic}/gu, '').toLowerCase();\n}\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {string} props.label ya traducido\n * @param {string|string[]|null|undefined} props.value la clave elegida ('' = ninguna); con multiple, la lista ([] = ninguna)\n * @param {(code: any) => void} props.onChange recibe la clave ('' al borrar); con multiple, la lista de claves\n * @param {() => void} [props.onBlur]\n * @param {Array<{code: string, label: string}>} props.options\n * @param {(option: {code: string, label: string}) => string} [props.formatLabel] por omisión «Nombre (clave)»\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText]\n * @param {boolean} [props.loading] el catálogo todavía no llega\n * @param {string} [props.placeholder] la pista con el campo vacío, ya traducida (p. ej. «Busque un estado»): sin ella, en un\n *     formulario agrupado el campo vacío solo enseña su botón y no se entiende qué es\n * @param {boolean} [props.disabled]\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef]\n * @param {boolean} [props.multiple] elegir varias claves\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function CatalogInput({\n    name, label, value, onChange, onBlur, options = [], formatLabel, error, helperText = ' ', loading = false, disabled = false, inputRef, placeholder,\n    multiple = false, texts,\n}) {\n    const {t} = useToolkitTranslation('common', texts);\n    const generatedId = useId();\n    const inputId = `${name ?? 'catalog'}-${generatedId}`;\n    const errorText = translateValidationMessage(t, error);\n    // con varias, en el orden en que se eligieron (el de la lista de claves)\n    const selectedOption = multiple\n        ? (Array.isArray(value) ? value : []).map((code) => options.find((option) => option.code === code)).filter(Boolean)\n        : options.find((option) => option.code === value) ?? null;\n    const optionLabelOf = (option) => (formatLabel ? formatLabel(option) : `${option.label} (${option.code})`);\n\n    return (\n        <FieldFrame inputId={inputId} label={label}>\n            <Autocomplete\n                id={inputId}\n                multiple={multiple}\n                disableCloseOnSelect={multiple}\n                fullWidth\n                size=\"small\"\n                options={options}\n                value={selectedOption}\n                loading={loading}\n                disabled={disabled}\n                noOptionsText={t('form.noOptions')}\n                loadingText={t('form.loadingOptions')}\n                getOptionLabel={optionLabelOf}\n                isOptionEqualToValue={(option, currentOption) => option.code === currentOption.code}\n                filterOptions={(allOptions, {inputValue}) => {\n                    const wantedText = plainTextOf(inputValue);\n                    const matchingOptions = wantedText\n                        ? allOptions.filter((option) => plainTextOf(optionLabelOf(option)).includes(wantedText))\n                        : allOptions;\n                    return matchingOptions.slice(0, MAX_VISIBLE_OPTIONS);\n                }}\n                onChange={(event, option) => onChange(multiple ? option.map((chosenOption) => chosenOption.code) : option?.code ?? '')}\n                onBlur={onBlur}\n                renderInput={(inputProps) => (\n                    <TextField {...inputProps} name={name} inputRef={inputRef} placeholder={placeholder} error={Boolean(errorText)} helperText={errorText ?? helperText} />\n                )}\n            />\n        </FieldFrame>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;AAgBA,MAAM,sBAAsB;AAQ5B,SAAS,YAAY,MAAM;AACvB,SAAO,OAAO,QAAQ,EAAE,EAAE,UAAU,KAAK,EAAE,QAAQ,WAAA,kBAAA,IAAA,GAAmB,EAAE,EAAE,YAAA;AAC9E;AAqBA,SAAwB,aAAa;AAAA,EACjC;AAAA,EAAM;AAAA,EAAO;AAAA,EAAO;AAAA,EAAU;AAAA,EAAQ,UAAU,CAAA;AAAA,EAAI;AAAA,EAAa;AAAA,EAAO,aAAa;AAAA,EAAK,UAAU;AAAA,EAAO,WAAW;AAAA,EAAO;AAAA,EAAU;AAAA,EACvI,WAAW;AAAA,EAAO;AACtB,GAAG;AACC,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,cAAc,MAAA;AACpB,QAAM,UAAU,GAAG,QAAQ,SAAS,IAAI,WAAW;AACnD,QAAM,YAAY,2BAA2B,GAAG,KAAK;AAErD,QAAM,iBAAiB,YAChB,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAA,GAAI,IAAI,CAAC,SAAS,QAAQ,KAAK,CAAC,WAAW,OAAO,SAAS,IAAI,CAAC,EAAE,OAAO,OAAO,IAChH,QAAQ,KAAK,CAAC,WAAW,OAAO,SAAS,KAAK,KAAK;AACzD,QAAM,gBAAgB,CAAC,WAAY,cAAc,YAAY,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,OAAO,IAAI;AAEtG,SACI,oBAAC,YAAA,EAAW,SAAkB,OAC1B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,IAAI;AAAA,MACJ;AAAA,MACA,sBAAsB;AAAA,MACtB,WAAS;AAAA,MACT,MAAK;AAAA,MACL;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,eAAe,EAAE,gBAAgB;AAAA,MACjC,aAAa,EAAE,qBAAqB;AAAA,MACpC,gBAAgB;AAAA,MAChB,sBAAsB,CAAC,QAAQ,kBAAkB,OAAO,SAAS,cAAc;AAAA,MAC/E,eAAe,CAAC,YAAY,EAAC,iBAAgB;AACzC,cAAM,aAAa,YAAY,UAAU;AACzC,cAAM,kBAAkB,aAClB,WAAW,OAAO,CAAC,WAAW,YAAY,cAAc,MAAM,CAAC,EAAE,SAAS,UAAU,CAAC,IACrF;AACN,eAAO,gBAAgB,MAAM,GAAG,mBAAmB;AAAA,MACvD;AAAA,MACA,UAAU,CAAC,OAAO,WAAW,SAAS,WAAW,OAAO,IAAI,CAAC,iBAAiB,aAAa,IAAI,IAAI,QAAQ,QAAQ,EAAE;AAAA,MACrH;AAAA,MACA,aAAa,CAAC,eACV,oBAAC,WAAA,EAAW,GAAG,YAAY,MAAY,UAAoB,aAA0B,OAAO,QAAQ,SAAS,GAAG,YAAY,aAAa,WAAA,CAAY;AAAA,IAAA;AAAA,EAAA,GAGjK;AAER;"}

package/dist/inputs/ColorInput.js

@@ -26,9 +26,10 @@ function ColorInput({
   helperText = " ",
   checkContrast = true,
   disabled = false,
-  inputRef
+  inputRef,
+  texts
 }) {
-  const { t } = useToolkitTranslation("common");
+  const { t } = useToolkitTranslation("common", texts);
   const generatedId = useId();
   const inputId = `${name ?? "color"}-${generatedId}`;
   const color = value ?? "";

package/dist/inputs/ColorInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorInput.js","sources":["../../src/inputs/ColorInput.jsx"],"sourcesContent":["// Campo de COLOR suelto (viene de «Identidad de documentos» de PLD): la muestra redonda (el «color well» de Apple, que abre\n// el selector del sistema) dentro del campo del texto #RRGGBB, el contraste contra el blanco mientras se elige y, si el color casi no se leería, el mismo tono más oscuro con su botón\n// para usarlo.\n//\n// Para lo que se imprime o se lee sobre blanco (el color de una marca en un comprobante). El color llega al formulario en\n// mayúsculas (#2B3A67); '' = sin color.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Alert from '@mui/material/Alert';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport Stack from '@mui/material/Stack';\nimport TextField from '@mui/material/TextField';\n\nimport {translateValidationMessage} from '@/forms/validationMessages.js';\nimport {HEX_COLOR, MIN_CONTRAST, contrastOnWhite, readableVariantOf} from '@/inputs/colorContrast.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\n\n// #RRGGBB\nconst COLOR_LENGTH = 7;\n// el color que enseña el selector del navegador mientras el texto no es un color\nconst NEUTRAL_COLOR = '#000000';\nconst RATIO_DECIMALS = 1;\n// la muestra redonda (px) y su orilla fina en claro y en oscuro\nconst SWATCH_PIXELS = 24;\nconst SWATCH_EDGE = Object.freeze({light: 'rgba(15, 23, 42, 0.18)', dark: 'rgba(255, 255, 255, 0.24)'});\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {string} props.label ya traducido\n * @param {string|null|undefined} props.value '#RRGGBB' o ''\n * @param {(color: string) => void} props.onChange recibe el color en mayúsculas\n * @param {() => void} [props.onBlur]\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText] cuando no hay color\n * @param {boolean} [props.checkContrast] avisa si casi no se lee sobre blanco (por omisión sí)\n * @param {boolean} [props.disabled]\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef]\n */\nexport default function ColorInput({\n    name, label, value, onChange, onBlur, error, helperText = ' ', checkContrast = true, disabled = false, inputRef,\n}) {\n    const {t} = useToolkitTranslation('common');\n    const generatedId = useId();\n    const inputId = `${name ?? 'color'}-${generatedId}`;\n    const color = value ?? '';\n    const isValidColor = HEX_COLOR.test(color);\n    const contrastRatio = isValidColor ? contrastOnWhite(color) : null;\n    const suggestion = checkContrast && isValidColor && contrastRatio < MIN_CONTRAST ? readableVariantOf(color) : null;\n    const errorText = translateValidationMessage(t, error);\n    const contrastText = contrastRatio && checkContrast ? t('form.colorContrast', {ratio: contrastRatio.toFixed(RATIO_DECIMALS)}) : helperText;\n    const choose = (nextColor) => onChange(nextColor.toUpperCase());\n\n    return (\n        <FieldFrame inputId={inputId} label={label}>\n            <Stack spacing={1}>\n                {/* un solo campo: la muestra redonda al inicio (el «color well» de Apple) y el código al lado. Picar la muestra\n                    abre el selector de colores del sistema (un input type=color invisible encima de ella). Antes eran dos cajas\n                    sueltas (el selector del navegador en la suya y el código en otra) y se veían como piezas sueltas */}\n                <TextField\n                    name={name}\n                    id={inputId}\n                    inputRef={inputRef}\n                    size=\"small\"\n                    fullWidth\n                    value={color}\n                    disabled={disabled}\n                    placeholder=\"#RRGGBB\"\n                    onChange={(event) => choose(event.target.value)}\n                    onBlur={onBlur}\n                    error={Boolean(errorText)}\n                    helperText={errorText ?? contrastText}\n                    slotProps={{\n                        input: {\n                            startAdornment: (\n                                <InputAdornment position=\"start\">\n                                    <Box component=\"label\"\n                                         sx={(theme) => ({\n                                             position: 'relative', display: 'block', flexShrink: 0, width: SWATCH_PIXELS, height: SWATCH_PIXELS,\n                                             borderRadius: '50%', cursor: disabled ? 'default' : 'pointer',\n                                             backgroundColor: isValidColor ? color : 'transparent',\n                                             // la orilla de la muestra: que se vea aunque el color sea el del fondo (blanco en claro, negro en oscuro)\n                                             boxShadow: `inset 0 0 0 1px ${SWATCH_EDGE.light}`,\n                                             ...theme.applyStyles('dark', {boxShadow: `inset 0 0 0 1px ${SWATCH_EDGE.dark}`}),\n                                         })}>\n                                        <Box component=\"input\" type=\"color\" value={isValidColor ? color : NEUTRAL_COLOR} disabled={disabled}\n                                             aria-label={t('form.pickColor')} onChange={(event) => choose(event.target.value)}\n                                             sx={{position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0, border: 0, p: 0, cursor: 'inherit'}} />\n                                    </Box>\n                                </InputAdornment>\n                            ),\n                        },\n                        htmlInput: {maxLength: COLOR_LENGTH, spellCheck: false, style: {fontVariantNumeric: 'tabular-nums'}},\n                    }}\n                />\n                {suggestion && (\n                    <Alert severity=\"warning\"\n                           action={<Button color=\"inherit\" size=\"small\" onClick={() => choose(suggestion)}>{t('form.colorUseSuggestion', {color: suggestion})}</Button>}>\n                        {t('form.colorLowContrast', {suggestion})}\n                    </Alert>\n                )}\n            </Stack>\n        </FieldFrame>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ColorInput.js","sources":["../../src/inputs/ColorInput.jsx"],"sourcesContent":["// Campo de COLOR suelto (viene de «Identidad de documentos» de PLD): la muestra redonda (el «color well» de Apple, que abre\n// el selector del sistema) dentro del campo del texto #RRGGBB, el contraste contra el blanco mientras se elige y, si el color casi no se leería, el mismo tono más oscuro con su botón\n// para usarlo.\n//\n// Para lo que se imprime o se lee sobre blanco (el color de una marca en un comprobante). El color llega al formulario en\n// mayúsculas (#2B3A67); '' = sin color.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Alert from '@mui/material/Alert';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport Stack from '@mui/material/Stack';\nimport TextField from '@mui/material/TextField';\n\nimport {translateValidationMessage} from '@/forms/validationMessages.js';\nimport {HEX_COLOR, MIN_CONTRAST, contrastOnWhite, readableVariantOf} from '@/inputs/colorContrast.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\n\n// #RRGGBB\nconst COLOR_LENGTH = 7;\n// el color que enseña el selector del navegador mientras el texto no es un color\nconst NEUTRAL_COLOR = '#000000';\nconst RATIO_DECIMALS = 1;\n// la muestra redonda (px) y su orilla fina en claro y en oscuro\nconst SWATCH_PIXELS = 24;\nconst SWATCH_EDGE = Object.freeze({light: 'rgba(15, 23, 42, 0.18)', dark: 'rgba(255, 255, 255, 0.24)'});\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {string} props.label ya traducido\n * @param {string|null|undefined} props.value '#RRGGBB' o ''\n * @param {(color: string) => void} props.onChange recibe el color en mayúsculas\n * @param {() => void} [props.onBlur]\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText] cuando no hay color\n * @param {boolean} [props.checkContrast] avisa si casi no se lee sobre blanco (por omisión sí)\n * @param {boolean} [props.disabled]\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef]\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function ColorInput({\n    name, label, value, onChange, onBlur, error, helperText = ' ', checkContrast = true, disabled = false, inputRef, texts,\n}) {\n    const {t} = useToolkitTranslation('common', texts);\n    const generatedId = useId();\n    const inputId = `${name ?? 'color'}-${generatedId}`;\n    const color = value ?? '';\n    const isValidColor = HEX_COLOR.test(color);\n    const contrastRatio = isValidColor ? contrastOnWhite(color) : null;\n    const suggestion = checkContrast && isValidColor && contrastRatio < MIN_CONTRAST ? readableVariantOf(color) : null;\n    const errorText = translateValidationMessage(t, error);\n    const contrastText = contrastRatio && checkContrast ? t('form.colorContrast', {ratio: contrastRatio.toFixed(RATIO_DECIMALS)}) : helperText;\n    const choose = (nextColor) => onChange(nextColor.toUpperCase());\n\n    return (\n        <FieldFrame inputId={inputId} label={label}>\n            <Stack spacing={1}>\n                {/* un solo campo: la muestra redonda al inicio (el «color well» de Apple) y el código al lado. Picar la muestra\n                    abre el selector de colores del sistema (un input type=color invisible encima de ella). Antes eran dos cajas\n                    sueltas (el selector del navegador en la suya y el código en otra) y se veían como piezas sueltas */}\n                <TextField\n                    name={name}\n                    id={inputId}\n                    inputRef={inputRef}\n                    size=\"small\"\n                    fullWidth\n                    value={color}\n                    disabled={disabled}\n                    placeholder=\"#RRGGBB\"\n                    onChange={(event) => choose(event.target.value)}\n                    onBlur={onBlur}\n                    error={Boolean(errorText)}\n                    helperText={errorText ?? contrastText}\n                    slotProps={{\n                        input: {\n                            startAdornment: (\n                                <InputAdornment position=\"start\">\n                                    <Box component=\"label\"\n                                         sx={(theme) => ({\n                                             position: 'relative', display: 'block', flexShrink: 0, width: SWATCH_PIXELS, height: SWATCH_PIXELS,\n                                             borderRadius: '50%', cursor: disabled ? 'default' : 'pointer',\n                                             backgroundColor: isValidColor ? color : 'transparent',\n                                             // la orilla de la muestra: que se vea aunque el color sea el del fondo (blanco en claro, negro en oscuro)\n                                             boxShadow: `inset 0 0 0 1px ${SWATCH_EDGE.light}`,\n                                             ...theme.applyStyles('dark', {boxShadow: `inset 0 0 0 1px ${SWATCH_EDGE.dark}`}),\n                                         })}>\n                                        <Box component=\"input\" type=\"color\" value={isValidColor ? color : NEUTRAL_COLOR} disabled={disabled}\n                                             aria-label={t('form.pickColor')} onChange={(event) => choose(event.target.value)}\n                                             sx={{position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0, border: 0, p: 0, cursor: 'inherit'}} />\n                                    </Box>\n                                </InputAdornment>\n                            ),\n                        },\n                        htmlInput: {maxLength: COLOR_LENGTH, spellCheck: false, style: {fontVariantNumeric: 'tabular-nums'}},\n                    }}\n                />\n                {suggestion && (\n                    <Alert severity=\"warning\"\n                           action={<Button color=\"inherit\" size=\"small\" onClick={() => choose(suggestion)}>{t('form.colorUseSuggestion', {color: suggestion})}</Button>}>\n                        {t('form.colorLowContrast', {suggestion})}\n                    </Alert>\n                )}\n            </Stack>\n        </FieldFrame>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/inputs/FormSection.js

@@ -80,8 +80,8 @@ function FormSection({ title, footer, children }) {
         sx: (theme) => ({
           borderRadius: `${GLASS_PANEL_RADIUS_PIXELS}px`,
           overflow: "hidden",
-          // la línea entre dos renglones seguidos, desde donde empieza el texto
-          [`& > .${FORM_ROW_CLASS} + .${FORM_ROW_CLASS}::before`]: {
+          // la línea de arriba de cada renglón, desde donde empieza el texto (la del primero la recorta la tarjeta)
+          [`& .${FORM_ROW_CLASS}::before`]: {
             content: '""',
             position: "absolute",
             top: 0,
@@ -91,7 +91,7 @@ function FormSection({ title, footer, children }) {
             backgroundColor: (theme.vars ?? theme).palette.divider
           }
         }),
-        children
+        children: /* @__PURE__ */ jsx(Box, { sx: { mt: "-1px" }, children })
       }
     ),
     footer && /* @__PURE__ */ jsx(Typography, { variant: "caption", component: "p", color: "text.secondary", sx: { px: 2, mt: 0.75 }, children: footer })