lizaui 12.0.3 → 12.0.4

package/dist/calendar/index.cjs.js

@@ -10,13 +10,22 @@ const styledComponents_browser_esm = require("../chunks/styled-components.browse
 const Calendar = require("react-calendar");
 const DateInput = require("react-date-picker/dist/DateInput");
 const DatePicker = require("react-date-picker");
-const iconBase = require("../chunks/iconBase-N5QiaNKE.js");
 const reactTinyPopover = require("react-tiny-popover");
 const tailwindMerge = require("tailwind-merge");
 const uuid = require("uuid");
 const labelError = require("../chunks/label-error-BItokOb6.js");
 const utils = require("../chunks/utils-ij3i9zTT.js");
 const compilerRuntime = require("react/compiler-runtime");
+const iconBase = require("../chunks/iconBase-N5QiaNKE.js");
+const chevronRight = require("../chunks/chevron-right-Bfa8mqfk.js");
+const createLucideIcon = require("../chunks/createLucideIcon-DvjiV7vp.js");
+const __iconData = {
+  name: "chevron-left",
+  size: 24,
+  node: [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]]
+};
+__iconData.node;
+const ChevronLeft = createLucideIcon.createLucideIcon(__iconData);
 const baseClassName = "react-daterange-picker";
 const outsideActionEvents = ["mousedown", "focusin", "touchstart"];
 const iconProps = {
@@ -189,12 +198,6 @@ function DateRangePicker(props) {
   );
   return jsxRuntime.jsxs("div", { className: clsx(baseClassName, `${baseClassName}--${isOpen ? "open" : "closed"}`, `${baseClassName}--${disabled ? "disabled" : "enabled"}`, className), "data-testid": dataTestid, id, ...eventProps, onFocus, ref: wrapper, children: [renderInputs(), renderCalendar()] });
 }
-function FaArrowRight(props) {
-  return iconBase.GenIcon({ "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z" }, "child": [] }] })(props);
-}
-function FaArrowLeft(props) {
-  return iconBase.GenIcon({ "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z" }, "child": [] }] })(props);
-}
 function FaCalendar(props) {
   return iconBase.GenIcon({ "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z" }, "child": [] }] })(props);
 }
@@ -465,376 +468,478 @@ const CalendarStyle = styledComponents_browser_esm.gt.div`
 		z-index: 10px;
 	} */
 
-	/*  =========================== estilos para react-calendar ================== */
-	.react-calendar {
-		${({
-  showdoubleview
+	/* =============================================================================
+	 * react-calendar — estilo HeroUI (calendar.css / range-calendar.css v3)
+	 *
+	 * Modelo: cada día es la "pista" del rango (fondo continuo, sin huecos entre columnas)
+	 * y el círculo interactivo vive en ::before. Inicio/fin = círculo sólido, hoy = círculo
+	 * suave, hover = círculo neutro. Los extremos de fila y los cortes contra días de otro
+	 * mes se redondean para que el rango se lea como una cápsula por semana.
+	 *
+	 * Los selectores se anidan bajo .react-calendar para ganar en especificidad a
+	 * react-calendar/dist/Calendar.css sin depender del orden de carga.
+	 * ========================================================================== */
+
+	${({
+  color = "primary"
 }) => {
-  if (showdoubleview === "true") {
-    return styledComponents_browser_esm.ft``;
-  } else {
-    return styledComponents_browser_esm.ft`
-					/* Forzamos un layout compacto de 256px para vista simple */
-					width: 256px;
-					min-width: 256px;
-				`;
-  }
+  const accents = {
+    primary: ["var(--color-primary)", "var(--color-primary-foreground)"],
+    success: ["var(--color-success)", "var(--color-success-foreground)"],
+    warning: ["var(--color-warning)", "var(--color-warning-foreground)"],
+    danger: ["var(--color-danger)", "var(--color-danger-foreground)"],
+    default: ["var(--color-foreground)", "var(--color-content1)"]
+  };
+  const [accent, accentForeground] = accents[color] ?? accents.primary;
+  return styledComponents_browser_esm.ft`
+			--cal-accent: ${accent};
+			--cal-accent-foreground: ${accentForeground};
+			--cal-accent-hover: color-mix(in oklab, var(--cal-accent) 88%, black);
+			--cal-accent-soft: color-mix(in oklab, var(--cal-accent) 14%, transparent);
+			--cal-accent-soft-hover: color-mix(in oklab, var(--cal-accent) 24%, transparent);
+		`;
 }}
-		border: none;
-		padding: 8px; /* Compactar padding sin cambiar colores ni fuentes */
-		font-family: var(--font-family-base);
-		border-radius: calc(var(--radius) - 2px);
-		background-color: var(--color-content1-default);
-		/* Variable para tamaño de celda compacto */
-		--cal-cell-size: 32px;
-	}
-
-	/* .react-calendar--doubleView {
-		width: ${({
-  widthcalendar
-}) => `${widthcalendar}px`};
-	} */
-
-	.react-calendar--doubleView {
-		--cal-cell-size: 34px !important;
-		width: 512px !important;
-	}
-
-	.react-calendar--doubleView .react-calendar__month-view__weekdays {
-		gap: 0px;
-	}
-
-	.react-calendar--doubleView .react-calendar__month-view__days {
-		gap: 0px;
-	}
 
-	.react-calendar__navigation {
-		height: 40px; /* Más compacto */
-		margin-bottom: 4px;
-		gap: 4px;
-		/* Alinear y centrar */
-		display: flex;
-		align-items: center;
-	}
-	.react-calendar__navigation__prev2-button,
-	.react-calendar__navigation__next2-button {
-		display: none;
-	}
-
-	.react-calendar__navigation__next-button,
-	.react-calendar__navigation__prev-button {
-		font-size: 22px; /* Conserva tamaño del icono */
-		color: var(--color-default-900);
-		width: var(--cal-cell-size);
-		height: var(--cal-cell-size);
-		padding: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: 8px;
-	}
-
-	.react-calendar__navigation__label {
-		border-radius: 8px;
-		flex: 1;
-		height: var(--cal-cell-size);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 0 4px;
-		font-size: 14px;
-		font-weight: 600;
-		color: var(--color-default-900);
-	}
-
-	.react-calendar__navigation__label span {
-		text-transform: capitalize;
-		color: var(--color-default-500);
-		font-weight: 500;
-		font-size: 14px;
-	}
-
-	.react-calendar__navigation button:disabled {
-		background-color: var(--color-default-100);
-	}
-
-	.react-calendar__navigation button:enabled:hover,
-	.react-calendar__navigation button:enabled:focus {
-		background-color: var(--color-default-200);
-	}
+	.react-calendar {
+		--cal-cell: 36px;
+		--cal-gap: 24px;
+		--cal-cap: 9999px;
+		--cal-edge: 8px;
+		--cal-ease: cubic-bezier(0.22, 1, 0.36, 1);
+
+		width: calc(var(--cal-cell) * 7 + 24px);
+		max-width: 100%;
+		padding: 12px;
+		border: none;
+		background: transparent;
+		font-family: inherit;
+		line-height: normal;
+		color: var(--color-foreground);
+
+		&.react-calendar--doubleView {
+			width: calc(var(--cal-cell) * 14 + var(--cal-gap) + 24px);
+		}
+
+		button {
+			font: inherit;
+		}
+
+		/* ---------------------------------------------------------------- header */
+		.react-calendar__navigation {
+			display: flex;
+			align-items: center;
+			gap: 2px;
+			height: auto;
+			margin-bottom: 12px;
+			padding: 0 2px;
+		}
+
+		.react-calendar__navigation__arrow.react-calendar__navigation__prev2-button,
+		.react-calendar__navigation__arrow.react-calendar__navigation__next2-button {
+			display: none;
+		}
+
+		/* Título a la izquierda y flechas juntas a la derecha, como HeroUI. */
+		.react-calendar__navigation__label {
+			order: 0;
+			flex: 1;
+			display: flex;
+			align-items: center;
+			justify-content: flex-start;
+			min-width: 0;
+			height: 28px;
+			padding: 0 8px;
+			border-radius: var(--cal-cap);
+			background: transparent;
+			font-size: 14px;
+			font-weight: 600;
+			color: var(--color-foreground);
+			text-align: left;
+			transition: background-color 100ms var(--cal-ease);
+		}
+
+		.react-calendar__navigation__label span {
+			font-size: 14px;
+			font-weight: 600;
+			color: var(--color-foreground);
+		}
+
+		.react-calendar__navigation__prev-button {
+			order: 1;
+		}
+
+		.react-calendar__navigation__next-button {
+			order: 2;
+		}
+
+		.react-calendar__navigation__arrow {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex: none;
+			width: 28px;
+			min-width: 28px;
+			height: 28px;
+			padding: 0;
+			border-radius: var(--cal-cap);
+			background: transparent;
+			color: var(--cal-accent);
+			transition:
+				background-color 100ms var(--cal-ease),
+				transform 200ms var(--cal-ease),
+				opacity 150ms var(--cal-ease);
+		}
+
+		.react-calendar__navigation button:enabled:focus {
+			background: transparent;
+		}
+
+		@media (hover: hover) {
+			.react-calendar__navigation button:enabled:hover {
+				background-color: var(--color-default-100);
+			}
+		}
+
+		.react-calendar__navigation__arrow:enabled:active {
+			transform: scale(0.92);
+		}
+
+		.react-calendar__navigation button:disabled {
+			background: transparent;
+			opacity: 0.35;
+			cursor: not-allowed;
+		}
+
+		.react-calendar__navigation button:focus-visible {
+			outline: 2px solid var(--cal-accent);
+			outline-offset: 1px;
+		}
+
+		/* ------------------------------------------------------------ month view */
+		.react-calendar__viewContainer {
+			margin: 0;
+		}
+
+		&.react-calendar--doubleView .react-calendar__viewContainer {
+			display: flex;
+			gap: var(--cal-gap);
+			margin: 0;
+
+			> * {
+				width: auto;
+				flex: 1 1 0;
+				margin: 0;
+			}
+		}
+
+		.react-calendar__month-view__weekdays {
+			display: grid !important;
+			grid-template-columns: repeat(7, var(--cal-cell));
+			margin-bottom: 4px;
+			font-size: 12px;
+			font-weight: 500;
+			text-transform: none;
+		}
+
+		.react-calendar__month-view__weekdays__weekday {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 24px;
+			padding: 0;
+			color: var(--color-default-500);
+			text-transform: capitalize;
+
+			abbr {
+				text-decoration: none;
+				cursor: default;
+			}
+		}
+
+		.react-calendar__month-view__days {
+			display: grid !important;
+			grid-template-columns: repeat(7, var(--cal-cell));
+			row-gap: 4px;
+			column-gap: 0;
+		}
+
+		/* ------------------------------------------------------------------ días */
+		.react-calendar__month-view__days > .react-calendar__tile {
+			position: relative;
+			isolation: isolate;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: var(--cal-cell);
+			max-width: none;
+			height: var(--cal-cell);
+			margin: 0 !important;
+			padding: 0;
+			border-radius: 0;
+			background: transparent;
+			font-size: 14px;
+			font-weight: 500;
+			line-height: 1;
+			color: var(--color-foreground);
+			-webkit-tap-highlight-color: transparent;
+
+			/* Círculo interactivo */
+			&::before {
+				content: "";
+				position: absolute;
+				inset: 0;
+				z-index: -1;
+				border-radius: var(--cal-cap);
+				background: transparent;
+				transition:
+					background-color 120ms var(--cal-ease),
+					scale 200ms var(--cal-ease);
+			}
 
-	.react-calendar__month-view__weekdays__weekday {
-		text-transform: capitalize;
-		font-weight: 500;
-		color: var(--color-default-400);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: var(--cal-cell-size);
-		width: var(--cal-cell-size);
-	}
-	.react-calendar__month-view__weekdays__weekday abbr {
-		text-decoration: none;
-	}
+			abbr {
+				text-decoration: none;
+			}
 
-	.react-calendar__month-view__weekNumbers .react-calendar__tile {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 0.75em;
-		font-weight: bold;
-	}
-	.react-calendar__month-view__days__day--weekend {
-		color: var(--color-danger-default);
-	}
-	.react-calendar__month-view__days__day--neighboringMonth {
-		color: var(--color-gray-300);
-	}
-	.react-calendar__year-view .react-calendar__tile,
-	.react-calendar__decade-view .react-calendar__tile,
-	.react-calendar__century-view .react-calendar__tile {
-		padding: 2em 0.5em;
-	}
-	.react-calendar__tile {
-		font-size: 13px; /* No cambiamos tipografía */
-		line-height: 1; /* Permite centrar vertical con flex */
-		font-weight: 500;
-		width: var(--cal-cell-size);
-		height: var(--cal-cell-size);
-		padding: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: 6px; /* Moderno sin afectar colores */
-		flex: 0 0 auto; /* Evitar stretching */
-		/* Transición suave para cambios de fondo, color y radio */
-		transition:
-			background-color 0.18s ease,
-			color 0.18s ease,
-			border-radius 0.25s ease,
-			transform 0.18s ease;
-	}
+			&:focus-visible {
+				outline: none;
+			}
 
-	.react-calendar__tile--hasActive {
-		background: var(--color-primary-300);
-		border-radius: 50% !important;
-	}
+			/* Anillo hacia adentro: react-calendar pone overflow:hidden inline en cada día. */
+			&:focus-visible::before {
+				box-shadow:
+					inset 0 0 0 2px var(--cal-accent),
+					inset 0 0 0 4px var(--color-content1);
+			}
 
-	/* Suavizar botones navegación (heredan selector button) */
-	.react-calendar__navigation button {
-		transition:
-			background-color 0.18s ease,
-			color 0.18s ease,
-			border-radius 0.25s ease;
-	}
+			&:enabled:active::before {
+				scale: 0.9;
+			}
+		}
+
+		/* Fines de semana sin color especial (react-calendar los pinta en rojo). */
+		.react-calendar__month-view__days > .react-calendar__month-view__days__day--weekend {
+			color: var(--color-foreground);
+		}
+
+		/* Hover neutro solo en días libres y solo con puntero real (evita "pegados" en táctil). */
+		@media (hover: hover) {
+			.react-calendar__month-view__days > .react-calendar__tile:enabled:hover:not(
+					.react-calendar__tile--range,
+					.react-calendar__tile--hoverStart,
+					.react-calendar__tile--hoverEnd
+				)::before {
+				background-color: var(--color-default-100);
+			}
 
-	/* Hover general (sin tocar colores definidos en variantes) añadimos ligera elevación */
-	.react-calendar__tile:enabled:hover,
-	.react-calendar__tile:enabled:focus {
-		transform: translateY(-2px);
-	}
+			/* Dentro de un rango ya elegido el hover refuerza el tono del acento en vez de un gris encima de la pista. */
+			&:not(.react-calendar--selectRange)
+				.react-calendar__month-view__days
+				> .react-calendar__tile--range:enabled:hover:not(
+					.react-calendar__tile--rangeStart,
+					.react-calendar__tile--rangeEnd,
+					.react-calendar__month-view__days__day--neighboringMonth
+				)::before {
+				background-color: var(--cal-accent-soft-hover);
+			}
+		}
 
-	/* Evitar salto al active manteniendo animación */
-	.react-calendar__tile--active {
-		transition:
-			background-color 0.18s ease,
-			color 0.18s ease,
-			border-radius 0.25s ease;
-	}
+		/* Hoy */
+		.react-calendar__month-view__days > .react-calendar__tile--now {
+			color: var(--cal-accent);
 
-	/* Grid compacto SOLO cuando no es doble vista */
-	${({
-  showdoubleview
-}) => showdoubleview === "false" && styledComponents_browser_esm.ft`
-			.react-calendar__month-view__weekdays,
-			.react-calendar__month-view__days {
-				display: grid !important;
-				grid-template-columns: repeat(7, var(--cal-cell-size));
-				justify-content: center;
-				gap: 2px; /* Sin gaps para exactitud */
+			&::before {
+				background-color: var(--cal-accent-soft);
 			}
+		}
 
-			.react-calendar__month-view__days {
-				margin-top: 0;
+		@media (hover: hover) {
+			.react-calendar__month-view__days > .react-calendar__tile--now:enabled:hover::before {
+				background-color: var(--cal-accent-soft-hover);
 			}
-		`}
+		}
 
-	.react-calendar__tile:disabled {
-		text-decoration: line-through;
-		color: var(--color-gray-300);
-		background-color: inherit;
-	}
+		/* Días de otro mes (sin el círculo de hoy: en doble vista duplicaría el del otro mes) */
+		.react-calendar__month-view__days > .react-calendar__month-view__days__day--neighboringMonth {
+			color: var(--color-default-400);
+			opacity: 0.6;
 
-	.react-calendar__navigation__arrow.react-calendar__navigation__prev2-button {
-		display: none;
-	}
-	.react-calendar__navigation__arrow.react-calendar__navigation__next2-button {
-		display: none;
-	}
+			&::before {
+				background-color: transparent;
+			}
+		}
 
-	.react-calendar__navigation__arrow {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: 50%;
-		width: var(--cal-cell-size);
-		height: var(--cal-cell-size);
-		min-width: var(--cal-cell-size);
-		max-width: var(--cal-cell-size);
-		min-height: var(--cal-cell-size);
-		max-height: var(--cal-cell-size);
-		color: hsl(var(--color-default-400) / 1);
-	}
+		/* Deshabilitados */
+		.react-calendar__month-view__days > .react-calendar__tile:disabled {
+			background: transparent;
+			color: var(--color-default-300);
+			text-decoration: line-through;
+			cursor: not-allowed;
 
-	.react-calendar__year-view__months__month {
-		border-radius: 8px !important;
-	}
+			&::before {
+				background: transparent;
+			}
+		}
+
+		/* ------------------------------------------------------ rango: la pista */
+		/* Primer selector: rango confirmado. Segundo: vista previa mientras se elige el segundo extremo. */
+		&:not(.react-calendar--selectRange)
+			.react-calendar__month-view__days
+			> .react-calendar__tile--range:not(.react-calendar__month-view__days__day--neighboringMonth, .react-calendar__tile--rangeBothEnds),
+		&.react-calendar--selectRange
+			.react-calendar__month-view__days
+			> .react-calendar__tile--hover:not(.react-calendar__month-view__days__day--neighboringMonth, .react-calendar__tile--hoverBothEnds) {
+			background-color: var(--cal-accent-soft);
+			color: var(--color-foreground);
+		}
+
+		/* Extremos de fila: la pista se corta con un redondeo suave para que cada semana se lea como una cápsula. */
+		.react-calendar__month-view__days > .react-calendar__tile:nth-child(7n + 1),
+		.react-calendar__month-view__days > .react-calendar__month-view__days__day--neighboringMonth + .react-calendar__tile {
+			border-start-start-radius: var(--cal-edge);
+			border-end-start-radius: var(--cal-edge);
+		}
+
+		.react-calendar__month-view__days > .react-calendar__tile:nth-child(7n),
+		.react-calendar__month-view__days > .react-calendar__tile:has(+ .react-calendar__month-view__days__day--neighboringMonth) {
+			border-start-end-radius: var(--cal-edge);
+			border-end-end-radius: var(--cal-edge);
+		}
+
+		/* Inicio y fin: el borde de la pista abraza el círculo. */
+		&:not(.react-calendar--selectRange) .react-calendar__month-view__days > .react-calendar__tile--rangeStart,
+		&.react-calendar--selectRange .react-calendar__month-view__days > .react-calendar__tile--hoverStart {
+			border-start-start-radius: var(--cal-cap);
+			border-end-start-radius: var(--cal-cap);
+		}
+
+		&:not(.react-calendar--selectRange) .react-calendar__month-view__days > .react-calendar__tile--rangeEnd,
+		&.react-calendar--selectRange .react-calendar__month-view__days > .react-calendar__tile--hoverEnd {
+			border-start-end-radius: var(--cal-cap);
+			border-end-end-radius: var(--cal-cap);
+		}
+
+		/* Un extremo pegado al borde de fila no deja asomar la pista detrás del círculo. */
+		.react-calendar__month-view__days
+			> .react-calendar__tile:is(.react-calendar__tile--rangeEnd, .react-calendar__tile--hoverEnd):is(
+				:nth-child(7n + 1),
+				.react-calendar__month-view__days__day--neighboringMonth + *
+			) {
+			border-start-start-radius: var(--cal-cap);
+			border-end-start-radius: var(--cal-cap);
+		}
+
+		.react-calendar__month-view__days
+			> .react-calendar__tile:is(.react-calendar__tile--rangeStart, .react-calendar__tile--hoverStart):is(
+				:nth-child(7n),
+				:has(+ .react-calendar__month-view__days__day--neighboringMonth)
+			) {
+			border-start-end-radius: var(--cal-cap);
+			border-end-end-radius: var(--cal-cap);
+		}
+
+		/* ------------------------------------------------- rango: círculos sólidos */
+		/* .react-calendar__tile repetido: iguala la especificidad de la pista para que el texto blanco del extremo gane. */
+		.react-calendar__month-view__days
+			> .react-calendar__tile.react-calendar__tile--rangeStart:not(.react-calendar__month-view__days__day--neighboringMonth),
+		.react-calendar__month-view__days
+			> .react-calendar__tile.react-calendar__tile--rangeEnd:not(.react-calendar__month-view__days__day--neighboringMonth),
+		&.react-calendar--selectRange
+			.react-calendar__month-view__days
+			> .react-calendar__tile--hoverStart:not(.react-calendar__month-view__days__day--neighboringMonth),
+		&.react-calendar--selectRange
+			.react-calendar__month-view__days
+			> .react-calendar__tile--hoverEnd:not(.react-calendar__month-view__days__day--neighboringMonth) {
+			color: var(--cal-accent-foreground);
+
+			&::before {
+				background-color: var(--cal-accent);
+			}
 
-	${({
-  color
-}) => {
-  switch (color) {
-    case "primary":
-      return styledComponents_browser_esm.ft`
-					.react-calendar__tile:enabled:hover,
-					.react-calendar__tile:enabled:focus {
-						background-color: var(--color-primary-100);
-
-						color: var(--color-primary-500);
-						border-radius: 50%;
-					}
-
-					.react-calendar .react-calendar__tile--now {
-						border-radius: 50%;
-						background-color: var(--color-primary-100);
-						color: var(--color-primary-500);
-					}
-
-					.react-calendar__tile.react-calendar__tile--active.react-calendar__tile--range.react-calendar__tile--rangeStart.react-calendar__tile--rangeEnd {
-						background-color: var(--color-primary);
-						color: white;
-						border-radius: 50%;
-					}
-
-					/* .react-calendar__tile--hasActive.react-calendar__year-view__months__month, */
-					.react-calendar__tile--hasActive.react-calendar__year-view__months__month,
-					.react-calendar__tile--hasActive.react-calendar__decade-view__years__year,
-					.react-calendar__tile--hasActive.react-calendar__century-view__decades__decade {
-						background-color: var(--color-primary-400);
-						color: white;
-						border-radius: 8px;
-					}
-
-					.react-calendar--doubleView .react-calendar__tile--active.react-calendar__tile--rangeStart,
-					.react-calendar .react-calendar__tile--hasActive.react-calendar__tile--rangeStart.react-calendar__year-view__months__month,
-					.react-calendar__tile--hasActive.react-calendar__tile--rangeStart.react-calendar__decade-view__years__year,
-					.react-calendar__tile--hasActive.react-calendar__tile--rangeStart.react-calendar__century-view__decades__decade {
-						background-color: var(--color-primary);
-						color: white;
-
-						border-radius: 8px 0 0 8px;
-					}
-
-					/* .react-calendar__tile.react-calendar__tile--hasActive.react-calendar__year-view__months__month {
-						background-color: var(--color-blue-400);
-						color: white;
-						border-radius: 8px;
-					} */
-
-					.react-calendar--doubleView .react-calendar__tile--active.react-calendar__tile--rangeEnd,
-					.react-calendar__tile.react-calendar__tile--hasActive.react-calendar__tile--range.react-calendar__tile--rangeEnd.react-calendar__year-view__months__month,
-					.react-calendar__tile--hasActive.react-calendar__tile--rangeEnd.react-calendar__decade-view__years__year,
-					.react-calendar__tile--hasActive.react-calendar__tile--rangeEnd.react-calendar__century-view__decades__decade {
-						background-color: var(--color-primary);
-						color: white;
-
-						border-radius: 0 8px 8px 0;
-					}
-				`;
-    case "success":
-      return styledComponents_browser_esm.ft`
-					.react-calendar__tile:enabled:hover,
-					.react-calendar__tile:enabled:focus {
-						background-color: var(--color-success-100);
-
-						color: var(--color-success-500);
-						border-radius: 8px;
-					}
-
-					.react-calendar .react-calendar__tile--now {
-						border-radius: 8px;
-						background-color: var(--color-success-100);
-						color: var(--color-success-500);
-					}
-
-					.react-calendar__tile.react-calendar__tile--active.react-calendar__tile--range.react-calendar__tile--rangeStart.react-calendar__tile--rangeEnd {
-						background-color: var(--color-success-400);
-						color: white;
-						border-radius: 8px;
-					}
-
-					/* .react-calendar__tile--hasActive.react-calendar__year-view__months__month, */
-					.react-calendar__tile--hasActive.react-calendar__year-view__months__month,
-					.react-calendar__tile--hasActive.react-calendar__decade-view__years__year,
-					.react-calendar__tile--hasActive.react-calendar__century-view__decades__decade {
-						background-color: var(--color-success-400);
-						color: white;
-						border-radius: 8px;
-					}
-
-					.react-calendar--doubleView .react-calendar__tile--active.react-calendar__tile--rangeStart,
-					.react-calendar .react-calendar__tile--hasActive.react-calendar__tile--rangeStart.react-calendar__year-view__months__month,
-					.react-calendar__tile--hasActive.react-calendar__tile--rangeStart.react-calendar__decade-view__years__year,
-					.react-calendar__tile--hasActive.react-calendar__tile--rangeStart.react-calendar__century-view__decades__decade {
-						background-color: var(--color-success-400);
-						color: white;
-
-						border-radius: 8px 0 0 8px;
-					}
-
-					/* .react-calendar__tile.react-calendar__tile--hasActive.react-calendar__year-view__months__month {
-						background-color: var(--color-green-400);
-						color: white;
-						border-radius: 8px;
-					} */
-
-					.react-calendar--doubleView .react-calendar__tile--active.react-calendar__tile--rangeEnd,
-					.react-calendar__tile.react-calendar__tile--hasActive.react-calendar__tile--range.react-calendar__tile--rangeEnd.react-calendar__year-view__months__month,
-					.react-calendar__tile--hasActive.react-calendar__tile--rangeEnd.react-calendar__decade-view__years__year,
-					.react-calendar__tile--hasActive.react-calendar__tile--rangeEnd.react-calendar__century-view__decades__decade {
-						background-color: var(--color-success-400);
-						color: white;
-
-						border-radius: 0 8px 8px 0;
-					}
-				`;
-    default:
-      return styledComponents_browser_esm.ft``;
-  }
-}}
+			&:enabled:active::before {
+				background-color: var(--cal-accent-hover);
+			}
+		}
+
+		/* ------------------------------------------------- año / década / siglo */
+		.react-calendar__year-view__months,
+		.react-calendar__decade-view__years,
+		.react-calendar__century-view__decades {
+			row-gap: 4px;
+		}
+
+		.react-calendar__year-view .react-calendar__tile,
+		.react-calendar__decade-view .react-calendar__tile,
+		.react-calendar__century-view .react-calendar__tile {
+			padding: 12px 4px;
+			border-radius: var(--cal-cap);
+			background: transparent;
+			font-size: 13px;
+			font-weight: 500;
+			color: var(--color-foreground);
+			text-transform: capitalize;
+			transition: background-color 120ms var(--cal-ease);
+
+			abbr {
+				text-decoration: none;
+			}
 
-	.react-calendar--doubleView .react-calendar__tile--active {
-		background-color: var(--color-primary-50);
-		color: var(--color-primary);
-		border-radius: 0px;
-		position: relative;
-	}
+			&:enabled:focus {
+				background: transparent;
+			}
 
-	.react-calendar--selectRange .react-calendar__tile--hover {
-		background-color: var(--color-default-100);
-	}
+			&:focus-visible {
+				outline: 2px solid var(--cal-accent);
+				outline-offset: -2px;
+			}
+		}
 
-	.react-calendar--selectRange .react-calendar__tile--hover.react-calendar__month-view__days__day {
-		/* border-radius: 0px !important; */
+		@media (hover: hover) {
+			.react-calendar__year-view .react-calendar__tile:enabled:hover,
+			.react-calendar__decade-view .react-calendar__tile:enabled:hover,
+			.react-calendar__century-view .react-calendar__tile:enabled:hover {
+				background-color: var(--color-default-100);
+			}
+		}
+
+		.react-calendar__year-view .react-calendar__tile--now,
+		.react-calendar__decade-view .react-calendar__tile--now,
+		.react-calendar__century-view .react-calendar__tile--now {
+			color: var(--cal-accent);
+		}
+
+		.react-calendar__year-view .react-calendar__tile--hasActive,
+		.react-calendar__year-view .react-calendar__tile--active,
+		.react-calendar__decade-view .react-calendar__tile--hasActive,
+		.react-calendar__decade-view .react-calendar__tile--active,
+		.react-calendar__century-view .react-calendar__tile--hasActive,
+		.react-calendar__century-view .react-calendar__tile--active {
+			background-color: var(--cal-accent);
+			color: var(--cal-accent-foreground);
+		}
+
+		.react-calendar__year-view .react-calendar__tile:disabled,
+		.react-calendar__decade-view .react-calendar__tile:disabled,
+		.react-calendar__century-view .react-calendar__tile:disabled {
+			background: transparent;
+			color: var(--color-default-300);
+			cursor: not-allowed;
+		}
 	}
 
-	.react-calendar__tile--active.react-calendar__month-view__days__day.react-calendar__month-view__days__day--neighboringMonth {
-		background-color: var(--color-content1-default);
-		color: var(--color-default-300);
+	@media (prefers-reduced-motion: reduce) {
+		.react-calendar *,
+		.react-calendar *::before {
+			transition: none !important;
+		}
 	}
-
-	/* RANGE */
 `;
+const formatMonthYearLabel = (locale, date) => {
+  const label = date.toLocaleDateString(locale, {
+    month: "long",
+    year: "numeric"
+  });
+  return label.charAt(0).toLocaleUpperCase(locale) + label.slice(1);
+};
 const CalendarPicker = ({
   id,
   value,
@@ -1030,21 +1135,21 @@ const CalendarPicker = ({
   });
   return /* @__PURE__ */ jsxRuntime.jsx(reactTinyPopover.Popover, { isOpen: show, containerStyle: {
     zIndex: "100"
-  }, align: "start", content: /* @__PURE__ */ jsxRuntime.jsxs(CalendarStyle, { color, showcalendar: show.toString(), widthcalendar: inputRef.current, showdoubleview: showDoubleView.toString(), className: "shadow-medium bg-content1 rounded-lg", radius, children: [
+  }, align: "start", content: /* @__PURE__ */ jsxRuntime.jsxs(CalendarStyle, { color, showcalendar: show.toString(), widthcalendar: inputRef.current, showdoubleview: showDoubleView.toString(), className: "shadow-medium bg-content1 rounded-2xl overflow-hidden", radius, children: [
     loading ? (
       /*  <Loading size="sm" color="secondary" /> */
       /* @__PURE__ */ jsxRuntime.jsx("p", { children: "loading" })
     ) : null,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full relative flex gap-2", children: [
-      showActionButtons && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-[150px] border-r border-default-200 px-3 py-3 flex flex-col gap-1 overflow-y-auto max-h-[340px]", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-default-400 mb-1 select-none uppercase tracking-wide", children: "Atajos" }),
+      showActionButtons && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-[150px] border-r border-default-100 px-2 py-3 flex flex-col gap-0.5 overflow-y-auto max-h-[360px]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2 text-xs font-medium text-default-400 mb-1 select-none uppercase tracking-wide", children: "Atajos" }),
         presets.map((p) => {
           const active = isPresetActive(p);
-          return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => handlePresetClick(p), className: tailwindMerge.twMerge("text-left rounded-md px-2 py-1.5 text-sm w-full cursor-pointer transition-colors", active ? "bg-default-200/70 dark:bg-default-100 font-medium" : "bg-content1 hover:bg-default-100"), "data-active": active || void 0, children: p.label }, p.key);
+          return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => handlePresetClick(p), className: tailwindMerge.twMerge("text-left rounded-full px-3 py-1.5 text-sm w-full cursor-pointer transition-colors", active ? "bg-primary/15 text-primary font-medium" : "bg-transparent hover:bg-default-100"), "data-active": active || void 0, children: p.label }, p.key);
         }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 pt-2 border-t border-default-200 flex flex-col gap-1", children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: handleChangeToDay, className: "text-left rounded-md px-2 py-1.5 text-sm w-full cursor-pointer bg-content1 hover:bg-default-100", children: "Ir a hoy (Cerrar)" }) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 pt-2 border-t border-default-100 flex flex-col gap-1", children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: handleChangeToDay, className: "text-left rounded-full px-3 py-1.5 text-sm w-full cursor-pointer bg-transparent hover:bg-default-100 transition-colors", children: "Ir a hoy (Cerrar)" }) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Calendar, { value, onChange: handleChange, locale, showDoubleView, calendarType: "gregory", minDate, maxDate, tileDisabled, selectRange: type === "date-range-picker", returnValue: type === "date-range-picker" ? "range" : "start", prevLabel: /* @__PURE__ */ jsxRuntime.jsx(FaArrowLeft, { className: "w-4 h-4 text-default-400" }), nextLabel: /* @__PURE__ */ jsxRuntime.jsx(FaArrowRight, { className: "w-4 h-4 text-default-400" }), tileContent })
+      /* @__PURE__ */ jsxRuntime.jsx(Calendar, { value, onChange: handleChange, locale, showDoubleView, calendarType: "gregory", minDate, maxDate, tileDisabled, selectRange: type === "date-range-picker", returnValue: type === "date-range-picker" ? "range" : "start", formatMonthYear: formatMonthYearLabel, prevLabel: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft, { "aria-hidden": true, className: "size-4", strokeWidth: 2.25 }), nextLabel: /* @__PURE__ */ jsxRuntime.jsx(chevronRight.ChevronRight, { "aria-hidden": true, className: "size-4", strokeWidth: 2.25 }), prevAriaLabel: locale === "es" ? "Mes anterior" : "Previous month", nextAriaLabel: locale === "es" ? "Mes siguiente" : "Next month", tileContent })
     ] })
   ] }), positions: ["bottom", "top"], reposition: true, onClickOutside: handleCloseCalendar, clickOutsideCapture: true, children: /* @__PURE__ */ jsxRuntime.jsxs(CalendarStyle, { color, className: tailwindMerge.twMerge(classNameContainer, "relative date-picker-component-container"), onClick: handleOpenCalendar, showcalendar: show.toString(), id: uui, widthcalendar: inputRef.current, showdoubleview: showDoubleView.toString(), error, size, radius, children: [
     label && /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: resolvedId, className: labelClass, children: [