lizaui 12.0.4 → 12.0.7

package/dist/components/travel-calendar/calendar-format.d.ts

@@ -37,8 +37,15 @@ export declare const formatDateString: (date: Date, format: CalendarFormat) => s
  * la fecha sin desfases de zona horaria.
  */
 export declare const formatDisplayDate: (date: Date, format: CalendarFormat) => string;
-/** Clave consistente `YYYY-MM-DD` (en UTC) para comparar/indexar fechas. */
-export declare const formatDateKey: (iso: string | Date) => string;
+/**
+ * Clave `YYYY-MM-DD` de la fecha CIVIL para comparar/indexar días.
+ *
+ * - String con fecha al inicio ("2026-06-04", "2026-06-04 06:47:00"): se toma tal cual, sin pasar por `Date`
+ *   (así "2026-06-04" no se convierte en medianoche UTC y cambia de día según la zona).
+ * - `Date`: se leen los campos LOCALES, que es como la construyen el calendario y los atajos
+ *   (`new Date(y, m, d)`). Con getters UTC, en zonas al este de UTC la medianoche local caía en el día anterior.
+ */
+export declare const formatDateKey: (value: string | Date) => string;
 export declare const startOfDay: (d: Date) => Date;
 export declare const addDays: (d: Date, n: number) => Date;
 export declare const isSameDay: (a?: Date | null, b?: Date | null) => boolean;

package/dist/components/travel-calendar/calendar-format.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar-format.d.ts","sourceRoot":"","sources":["../../../src/components/travel-calendar/calendar-format.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;CAa1B,CAAC;AAEX,MAAM,MAAM,mBAAmB,GAAG,MAAM,OAAO,uBAAuB,CAAC;AACvE,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,mBAAmB,CAAC,CAAC;AACnF,KAAK,gBAAgB,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AAEjD,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAC1C,cAAc,EACd;IACC,SAAS,EAAE,GAAG,GAAG,GAAG,CAAC;IACrB,KAAK,EAAE,SAAS,CAAC,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,CAAC,CAAC;CACvE,CAQD,CAAC;AAIF,eAAO,MAAM,uBAAuB,GAAI,QAAQ,mBAAmB,KAAG,cAAiD,CAAC;AAgBxH,eAAO,MAAM,mBAAmB,GAAI,KAAK,MAAM,EAAE,QAAQ,cAAc,KAAG,IAAI,GAAG,IA0BhF,CAAC;AAkBF,+FAA+F;AAC/F,eAAO,MAAM,kBAAkB,GAAI,cAAc,OAAO,EAAE,QAAQ,cAAc,KAAG,IAAI,GAAG,IA0BzF,CAAC;AAEF,mEAAmE;AACnE,eAAO,MAAM,gBAAgB,GAAI,MAAM,IAAI,EAAE,QAAQ,cAAc,KAAG,MAcrE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,MAAM,IAAI,EAAE,QAAQ,cAAc,KAAG,MAC2B,CAAC;AAEnG,4EAA4E;AAC5E,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,GAAG,IAAI,KAAG,MAIlD,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,GAAG,IAAI,KAAG,IAAwE,CAAC;AAE9G,eAAO,MAAM,OAAO,GAAI,GAAG,IAAI,EAAE,GAAG,MAAM,KAAG,IAA4E,CAAC;AAE1H,eAAO,MAAM,SAAS,GAAI,IAAI,IAAI,GAAG,IAAI,EAAE,IAAI,IAAI,GAAG,IAAI,KAAG,OAI5D,CAAC"}
+{"version":3,"file":"calendar-format.d.ts","sourceRoot":"","sources":["../../../src/components/travel-calendar/calendar-format.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;CAa1B,CAAC;AAEX,MAAM,MAAM,mBAAmB,GAAG,MAAM,OAAO,uBAAuB,CAAC;AACvE,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,mBAAmB,CAAC,CAAC;AACnF,KAAK,gBAAgB,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AAEjD,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAC1C,cAAc,EACd;IACC,SAAS,EAAE,GAAG,GAAG,GAAG,CAAC;IACrB,KAAK,EAAE,SAAS,CAAC,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,CAAC,CAAC;CACvE,CAQD,CAAC;AAIF,eAAO,MAAM,uBAAuB,GAAI,QAAQ,mBAAmB,KAAG,cAAiD,CAAC;AAgBxH,eAAO,MAAM,mBAAmB,GAAI,KAAK,MAAM,EAAE,QAAQ,cAAc,KAAG,IAAI,GAAG,IA0BhF,CAAC;AAkBF,+FAA+F;AAC/F,eAAO,MAAM,kBAAkB,GAAI,cAAc,OAAO,EAAE,QAAQ,cAAc,KAAG,IAAI,GAAG,IA0BzF,CAAC;AAEF,mEAAmE;AACnE,eAAO,MAAM,gBAAgB,GAAI,MAAM,IAAI,EAAE,QAAQ,cAAc,KAAG,MAcrE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,MAAM,IAAI,EAAE,QAAQ,cAAc,KAAG,MAC2B,CAAC;AAKnG;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,GAAG,IAAI,KAAG,MAYpD,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,GAAG,IAAI,KAAG,IAAwE,CAAC;AAE9G,eAAO,MAAM,OAAO,GAAI,GAAG,IAAI,EAAE,GAAG,MAAM,KAAG,IAA4E,CAAC;AAE1H,eAAO,MAAM,SAAS,GAAI,IAAI,IAAI,GAAG,IAAI,EAAE,IAAI,IAAI,GAAG,IAAI,KAAG,OAI5D,CAAC"}

package/dist/components/travel-calendar/calendar-travel-form.d.ts

@@ -3,6 +3,7 @@ import { DateObject, CalendarProps } from 'react-multi-date-picker';
 import { CalendarFormatInput } from './calendar-format';
 import { TravelPrice } from './hook/use-calendar-pricing';
 import { CalendarLang } from './locale';
+export type TravelCalendarRadius = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "input";
 interface Props extends CalendarProps {
     name: string;
     style?: CSSProperties;
@@ -24,10 +25,25 @@ interface Props extends CalendarProps {
     isClose?: boolean;
     lang?: CalendarLang;
     format?: CalendarFormatInput;
+    /**
+     * Precios por fecha. Define también qué días se pueden elegir:
+     * - `undefined` (por defecto): sin restricción, todos los días habilitados.
+     * - Array: solo esas fechas; `[]` = ninguna disponible (se muestra el estado vacío).
+     */
     travelPrices?: TravelPrice[];
     /** Fecha mínima seleccionable, ej. "2026-02-28 06:47:00". Hacia atrás se deshabilitan. null/undefined = sin límite. */
     minSelectableDate?: string | null;
     showActionsButtons?: boolean;
+    /**
+     * Resalta en verde el precio más bajo de cada mes (solo si el mes tiene precios distintos).
+     * @default false
+     */
+    highlightLowestPrice?: boolean;
+    /**
+     * Radio de las esquinas del popover del calendario.
+     * @default "md"
+     */
+    radius?: TravelCalendarRadius;
     readOnly?: boolean;
     disabled?: boolean;
 }

package/dist/components/travel-calendar/calendar-travel-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar-travel-form.d.ts","sourceRoot":"","sources":["../../../src/components/travel-calendar/calendar-travel-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoC,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7E,OAAO,EAAY,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAKnF,OAAO,EAA2B,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAGtF,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAEnF,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7D,OAAO,wBAAwB,CAAC;AAEhC,UAAU,KAAM,SAAQ,aAAa;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,EAAE,UAAU,GAAG,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,GAAG,UAAU,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACzE,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,KAAK,IAAI,CAAC;IACxD,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,GAAG,SAAS,CAAC;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,uHAAuH;IACvH,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,kBAAkB,wGAgK9B,CAAC"}
+{"version":3,"file":"calendar-travel-form.d.ts","sourceRoot":"","sources":["../../../src/components/travel-calendar/calendar-travel-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoC,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7E,OAAO,EAAY,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAKnF,OAAO,EAA2B,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAGtF,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAEnF,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7D,OAAO,wBAAwB,CAAC;AAEhC,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,OAAO,CAAC;AAaxF,UAAU,KAAM,SAAQ,aAAa;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,EAAE,UAAU,GAAG,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,GAAG,UAAU,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACzE,iBAAiB,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,KAAK,IAAI,CAAC;IACxD,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,GAAG,SAAS,CAAC;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B;;;;OAIG;IACH,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,uHAAuH;IACvH,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,kBAAkB,wGA2L9B,CAAC"}

package/dist/components/travel-calendar/hook/use-calendar-dropdown.d.ts

@@ -5,7 +5,12 @@ interface UseCalendarDropdownProps {
 }
 /**
  * Maneja la apertura/cierre del popover del calendario y dispara
- * `onOpenCalendar` (vía ref, sin re-suscribir efectos) cada vez que se abre.
+ * `onOpenCalendar` (vía ref, siempre la última versión) cada vez que se abre.
+ *
+ * `onOpenCalendar` se llama en el MISMO evento que abre el popover, no en un
+ * efecto posterior: así el `setLoading(true)` del padre entra en el mismo render
+ * que la apertura y el primer cuadro ya sale en estado "cargando", sin un
+ * parpadeo previo con todos los días habilitados y sin precios.
  */
 export declare function useCalendarDropdown({ onOpenCalendar, readOnly, disabled }: UseCalendarDropdownProps): {
     isOpen: boolean;

package/dist/components/travel-calendar/hook/use-calendar-dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-calendar-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/travel-calendar/hook/use-calendar-dropdown.ts"],"names":[],"mappings":"AAEA,UAAU,wBAAwB;IACjC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,cAAc,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,wBAAwB;;;;;EAuBnG"}
+{"version":3,"file":"use-calendar-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/travel-calendar/hook/use-calendar-dropdown.ts"],"names":[],"mappings":"AAEA,UAAU,wBAAwB;IACjC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,cAAc,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,wBAAwB;;;;;EAoBnG"}

package/dist/components/travel-calendar/hook/use-calendar-presets.d.ts

@@ -8,9 +8,8 @@ export interface PresetItem {
 }
 interface UseCalendarPresetsProps {
     selectedDate: Date | null;
-    minDateKey: string | null;
-    enabledDatesSet: Set<string>;
-    hasTravelPrices: boolean;
+    /** Misma regla que el calendario: mínimo, fechas con salida y carga en curso. */
+    isDateKeySelectable: (key: string) => boolean;
     handleChange?: (selectedDates: DateObject | DateObject[] | null) => void;
     /** Aplica la fecha elegida (refleja en el input y cierra el popover). */
     onSelect: (date: Date) => void;
@@ -18,9 +17,9 @@ interface UseCalendarPresetsProps {
 /**
  * Construye los atajos del calendario ("Hoy", "+7 días", "Navidad", …) y la
  * lógica para saber si cada atajo está activo/deshabilitado y para aplicarlo
- * respetando `minDateKey` y las fechas habilitadas.
+ * respetando las fechas seleccionables del calendario.
  */
-export declare function useCalendarPresets({ selectedDate, minDateKey, enabledDatesSet, hasTravelPrices, handleChange, onSelect, }: UseCalendarPresetsProps): {
+export declare function useCalendarPresets({ selectedDate, isDateKeySelectable, handleChange, onSelect }: UseCalendarPresetsProps): {
     presets: PresetItem[];
     getPresetState: (preset: PresetItem) => {
         active: boolean;

package/dist/components/travel-calendar/hook/use-calendar-presets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-calendar-presets.d.ts","sourceRoot":"","sources":["../../../../src/components/travel-calendar/hook/use-calendar-presets.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGrD,MAAM,WAAW,UAAU;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,UAAU,GAAG,UAAU,EAAE,GAAG,IAAI,CAAC;IAClD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,uBAAuB;IAChC,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,eAAe,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,GAAG,UAAU,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACzE,yEAAyE;IACzE,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CAC/B;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,EAClC,YAAY,EACZ,UAAU,EACV,eAAe,EACf,eAAe,EACf,YAAY,EACZ,QAAQ,GACR,EAAE,uBAAuB;;6BA0Df,UAAU;;;;gCA0BV,UAAU;EAkCpB"}
+{"version":3,"file":"use-calendar-presets.d.ts","sourceRoot":"","sources":["../../../../src/components/travel-calendar/hook/use-calendar-presets.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGrD,MAAM,WAAW,UAAU;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,UAAU,GAAG,UAAU,EAAE,GAAG,IAAI,CAAC;IAClD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,uBAAuB;IAChC,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,iFAAiF;IACjF,mBAAmB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IAC9C,YAAY,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,GAAG,UAAU,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACzE,yEAAyE;IACzE,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CAC/B;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,mBAAmB,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,uBAAuB;;6BA0D9G,UAAU;;;;gCAsBV,UAAU;EA8BpB"}

package/dist/components/travel-calendar/hook/use-calendar-pricing.d.ts

@@ -5,24 +5,45 @@ export interface TravelPrice {
     priceTravel: number;
 }
 interface UseCalendarPricingProps {
-    travelPrices: TravelPrice[];
+    /**
+     * `undefined` = sin restricción (todos los días seleccionables, sin precios).
+     * Array = solo esas fechas se pueden elegir; `[]` significa que no hay ninguna disponible.
+     */
+    travelPrices: TravelPrice[] | undefined;
     /** Fecha mínima seleccionable, ej. "2026-02-28 06:47:00". null/undefined = sin límite. */
     minSelectableDate: string | null;
+    /** Los precios se están consultando: los días no se pueden elegir y el precio se muestra como skeleton. */
+    loading: boolean;
+    /** Resalta en verde el precio más bajo de cada mes. */
+    highlightLowestPrice: boolean;
     normalizedFormat: CalendarFormat;
     lang: CalendarLang;
 }
 /**
  * Deriva, a partir de `travelPrices` y `minSelectableDate`, las estructuras
  * necesarias para pintar el calendario: el set de fechas habilitadas, la clave
- * de fecha mínima y el `mapDays` que renderiza cada día con su precio/estado.
+ * de fecha mínima, si una fecha se puede elegir y el `mapDays` que renderiza
+ * cada día con su precio/estado.
+ *
+ * Cada día tiene SIEMPRE la misma estructura (número + hueco de precio de alto
+ * fijo), cargue o no, tenga precio o no: así la llegada de los precios no mueve
+ * nada (sin layout shift).
  */
-export declare function useCalendarPricing({ travelPrices, minSelectableDate, normalizedFormat, lang }: UseCalendarPricingProps): {
+export declare function useCalendarPricing({ travelPrices, minSelectableDate, loading, highlightLowestPrice, normalizedFormat, lang, }: UseCalendarPricingProps): {
     enabledDatesSet: Set<string>;
+    isRestricted: boolean;
+    isEmpty: boolean;
     minDateKey: string | null;
+    isDateKeyAllowed: (key: string) => boolean;
+    isDateKeySelectable: (key: string) => boolean;
     mapDays: ({ date, today, selectedDate, isSameDate }: any) => {
+        children: import("react").JSX.Element;
+        "aria-label": any;
         disabled: boolean;
-        title: string;
+    } | {
         children: import("react").JSX.Element;
+        title: any;
+        disabled: boolean;
     };
 };
 export {};

package/dist/components/travel-calendar/hook/use-calendar-pricing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-calendar-pricing.d.ts","sourceRoot":"","sources":["../../../../src/components/travel-calendar/hook/use-calendar-pricing.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACxE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C,MAAM,WAAW,WAAW;IAC3B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,uBAAuB;IAChC,YAAY,EAAE,WAAW,EAAE,CAAC;IAC5B,0FAA0F;IAC1F,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,gBAAgB,EAAE,cAAc,CAAC;IACjC,IAAI,EAAE,YAAY,CAAC;CACnB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,IAAI,EAAE,EAAE,uBAAuB;;;yDAiCzE,GAAG;;;;;EAuChD"}
+{"version":3,"file":"use-calendar-pricing.d.ts","sourceRoot":"","sources":["../../../../src/components/travel-calendar/hook/use-calendar-pricing.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACxE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C,MAAM,WAAW,WAAW;IAC3B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,uBAAuB;IAChC;;;OAGG;IACH,YAAY,EAAE,WAAW,EAAE,GAAG,SAAS,CAAC;IACxC,0FAA0F;IAC1F,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,2GAA2G;IAC3G,OAAO,EAAE,OAAO,CAAC;IACjB,uDAAuD;IACvD,oBAAoB,EAAE,OAAO,CAAC;IAC9B,gBAAgB,EAAE,cAAc,CAAC;IACjC,IAAI,EAAE,YAAY,CAAC;CACnB;AAOD;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,EAClC,YAAY,EACZ,iBAAiB,EACjB,OAAO,EACP,oBAAoB,EACpB,gBAAgB,EAChB,IAAI,GACJ,EAAE,uBAAuB;;;;;4BA8DlB,MAAM;+BAUiC,MAAM;yDAOP,GAAG;;;;;;;;;EAwDhD"}

package/dist/components/travel-calendar/hook/use-calendar-value.d.ts

@@ -3,7 +3,8 @@ import { CalendarFormat } from '../calendar-format';
 interface UseCalendarValueProps {
     value: unknown;
     normalizedFormat: CalendarFormat;
-    minDateKey: string | null;
+    /** Lo que se escribe tampoco puede saltarse el mínimo ni las fechas sin salida (la carga en curso no bloquea escribir). */
+    isDateKeyAllowed: (key: string) => boolean;
     handleChange?: (selectedDates: DateObject | DateObject[] | null) => void;
     /** Se invoca tras elegir una fecha en el calendario (p.ej. para cerrar el popover). */
     onClose: () => void;
@@ -13,7 +14,7 @@ interface UseCalendarValueProps {
  * (`inputDraft`), lo sincroniza con el `value` controlado, deriva la fecha
  * seleccionada y expone los manejadores de escritura/selección.
  */
-export declare function useCalendarValue({ value, normalizedFormat, minDateKey, handleChange, onClose }: UseCalendarValueProps): {
+export declare function useCalendarValue({ value, normalizedFormat, isDateKeyAllowed, handleChange, onClose }: UseCalendarValueProps): {
     inputRef: import('react').RefObject<HTMLInputElement | null>;
     valueInput: string;
     selectedDate: Date | null;

package/dist/components/travel-calendar/hook/use-calendar-value.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-calendar-value.d.ts","sourceRoot":"","sources":["../../../../src/components/travel-calendar/hook/use-calendar-value.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAA0E,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEjI,UAAU,qBAAqB;IAC9B,KAAK,EAAE,OAAO,CAAC;IACf,gBAAgB,EAAE,cAAc,CAAC;IACjC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,GAAG,UAAU,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACzE,uFAAuF;IACvF,OAAO,EAAE,MAAM,IAAI,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,YAAY,EAAE,OAAO,EAAE,EAAE,qBAAqB;;;;2BA+BhH,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC;8BA4BnC,UAAU,GAAG,UAAU,EAAE,GAAG,IAAI;wBArC7B,IAAI;;EAoDZ"}
+{"version":3,"file":"use-calendar-value.d.ts","sourceRoot":"","sources":["../../../../src/components/travel-calendar/hook/use-calendar-value.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAA0E,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEjI,UAAU,qBAAqB;IAC9B,KAAK,EAAE,OAAO,CAAC;IACf,gBAAgB,EAAE,cAAc,CAAC;IACjC,2HAA2H;IAC3H,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IAC3C,YAAY,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,GAAG,UAAU,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACzE,uFAAuF;IACvF,OAAO,EAAE,MAAM,IAAI,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,YAAY,EAAE,OAAO,EAAE,EAAE,qBAAqB;;;;2BA+BtH,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC;8BA6BnC,UAAU,GAAG,UAAU,EAAE,GAAG,IAAI;wBAtC7B,IAAI;;EAqDZ"}

package/dist/lizaui.css

@@ -2475,10 +2475,13 @@
 
 :root {
   --tc-day-size: 45px;
-  --tc-font-size-number: 11px;
-  --tc-font-size-price: 9px;
-  --tc-color-price: #5f6368;
+  --tc-font-size-number: 13px;
+  --tc-font-size-price: 10px;
+  /* Alto fijo del hueco de precio: igual con precio, sin precio o cargando (evita layout shift). */
+  --tc-price-height: 10px;
+  --tc-color-price: var(--color-default-500, #6b7280);
   --tc-color-price-empty: #9ca3af;
+  --tc-color-price-lowest: var(--color-success-600, #16a34a);
   --tc-bg-selected: rgba(59, 130, 246, 0.2);
   --tc-radius: 50%;
   --tc-transition: 120ms ease-in-out;
@@ -2541,102 +2544,211 @@
     outline: 2px solid currentColor;
   }
 }
+.react-multi-date-picker-travel-calendar-popover {
+  /* ------------------------------------------------------------ cabeceras */
+  /* Solo el estilo del texto: la posición del título y de las flechas no cambia. */
+}
 .react-multi-date-picker-travel-calendar-popover .rmdp-header-values {
-  color: var(--color-default-900) !important;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-foreground, #11181c) !important;
+  /* La librería separa cada parte con padding-left: 5px; el espacio del separador basta ("Junio 2026"). */
+}
+.react-multi-date-picker-travel-calendar-popover .rmdp-header-values span {
+  padding: 0 !important;
 }
 .react-multi-date-picker-travel-calendar-popover .rmdp-week-day {
+  font-size: 12px !important;
   font-weight: 500 !important;
   color: var(--color-default-500) !important;
 }
+.react-multi-date-picker-travel-calendar-popover {
+  /* ------------------------------------------------------------------ días */
+}
+.react-multi-date-picker-travel-calendar-popover .rmdp-day,
+.react-multi-date-picker-travel-calendar-popover .rmdp-week-day {
+  width: var(--tc-day-size) !important;
+  height: var(--tc-day-size) !important;
+  min-height: var(--tc-day-size) !important;
+  max-width: var(--tc-day-size) !important;
+}
+.react-multi-date-picker-travel-calendar-popover .rmdp-day span {
+  position: relative !important;
+  left: 0;
+  right: 0;
+  top: 0;
+}
 .react-multi-date-picker-travel-calendar-popover .travel-calendar-day {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center !important;
   justify-content: center !important;
+  gap: 2px;
   width: var(--tc-day-size);
   height: var(--tc-day-size);
-  font-size: 12px;
   line-height: 1;
   user-select: none;
   border-radius: var(--tc-radius) !important;
-  transition: background-color var(--tc-transition), color var(--tc-transition), box-shadow var(--tc-transition), opacity var(--tc-transition);
+  transition: background-color var(--tc-transition), color var(--tc-transition), opacity var(--tc-transition);
+}
+.react-multi-date-picker-travel-calendar-popover .travel-calendar-day__number {
+  font-size: var(--tc-font-size-number) !important;
+  font-weight: 600 !important;
+  color: var(--color-default-900) !important;
+  font-variant-numeric: tabular-nums;
+}
+.react-multi-date-picker-travel-calendar-popover .travel-calendar-day__price {
+  display: block;
+  height: var(--tc-price-height);
+  line-height: var(--tc-price-height);
+  font-size: var(--tc-font-size-price) !important;
+  font-weight: 500;
+  color: var(--tc-color-price) !important;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.react-multi-date-picker-travel-calendar-popover {
+  /* El precio aparece con un fundido corto cuando llega (sin mover nada). */
+}
+.react-multi-date-picker-travel-calendar-popover .travel-calendar-day__price:not(.travel-calendar-day__price--loading, .travel-calendar-day__price--empty) {
+  animation: tc-price-in 180ms ease-out;
+}
+.react-multi-date-picker-travel-calendar-popover .travel-calendar-day__price--empty {
+  color: var(--tc-color-price-empty);
+}
+.react-multi-date-picker-travel-calendar-popover {
+  /* Precio más bajo del mes (solo cuando el mes tiene precios distintos). */
+}
+.react-multi-date-picker-travel-calendar-popover .travel-calendar-day__price--lowest {
+  color: var(--tc-color-price-lowest) !important;
+  font-weight: 700;
+}
+.react-multi-date-picker-travel-calendar-popover {
+  /* Skeleton del precio mientras se consulta la API. */
+}
+.react-multi-date-picker-travel-calendar-popover .travel-calendar-day__price--loading {
+  width: 22px;
+  height: 6px;
+  margin-block: 2px;
+  border-radius: 9999px;
+  background-color: var(--color-default-200);
+  animation: tc-skeleton-pulse 1.2s ease-in-out infinite;
 }
 .react-multi-date-picker-travel-calendar-popover .travel-calendar-day--active {
   cursor: pointer;
 }
-.react-multi-date-picker-travel-calendar-popover .travel-calendar-day--active:hover {
-  background-color: transparent !important;
+.react-multi-date-picker-travel-calendar-popover .travel-calendar-day--loading {
+  cursor: progress;
+}
+.react-multi-date-picker-travel-calendar-popover .rmdp-day.rmdp-disabled:has(.travel-calendar-day--loading) {
+  cursor: progress;
+}
+.react-multi-date-picker-travel-calendar-popover {
+  /* Sin salida: solo atenuado, sin tachar (son la mayoría y el tachado tapaba los días con precio). */
 }
 .react-multi-date-picker-travel-calendar-popover .travel-calendar-day--disabled {
-  opacity: 0.6;
   cursor: not-allowed;
 }
-.react-multi-date-picker-travel-calendar-popover .travel-calendar-day--disabled span {
-  text-decoration: line-through !important;
+.react-multi-date-picker-travel-calendar-popover .travel-calendar-day--disabled .travel-calendar-day__number {
+  color: var(--color-default-300) !important;
+  font-weight: 500 !important;
 }
-.react-multi-date-picker-travel-calendar-popover .travel-calendar-day--selected {
-  background: var(--tc-bg-selected);
-  font-weight: 600;
+.react-multi-date-picker-travel-calendar-popover {
+  /* Antes de la fecha mínima: aquí sí se tacha, porque no es "sin salida" sino "no permitido". */
 }
-.react-multi-date-picker-travel-calendar-popover .travel-calendar-day--today {
-  box-shadow: 0 0 0 1px var(--color-primary);
+.react-multi-date-picker-travel-calendar-popover .travel-calendar-day--before-min .travel-calendar-day__number {
+  text-decoration: line-through;
 }
-.react-multi-date-picker-travel-calendar-popover .travel-calendar-day__number {
-  font-size: var(--tc-font-size-number) !important;
-  color: var(--color-default-900) !important;
-  font-weight: 500 !important;
-  margin-bottom: 2px;
+.react-multi-date-picker-travel-calendar-popover {
+  /*
+   * Días del otro mes (showOtherDays): referencia visual, sin precio ni selección (en doble vista se duplicaban).
+   * Se usa la clase de la librería porque es correcta por mes; el `currentMonth` de mapDays es siempre el primero.
+   */
 }
-.react-multi-date-picker-travel-calendar-popover .travel-calendar-day__price {
-  font-size: var(--tc-font-size-price) !important;
-  color: var(--tc-color-price) !important;
-  font-weight: 500;
+.react-multi-date-picker-travel-calendar-popover .rmdp-day.rmdp-deactive {
+  pointer-events: none;
 }
-.react-multi-date-picker-travel-calendar-popover .rmdp-day,
-.react-multi-date-picker-travel-calendar-popover .rmdp-week-day {
-  width: var(--tc-day-size) !important;
-  height: var(--tc-day-size) !important;
-  min-height: var(--tc-day-size) !important;
-  max-width: var(--tc-day-size) !important;
+.react-multi-date-picker-travel-calendar-popover .rmdp-day.rmdp-deactive .travel-calendar-day__number {
+  color: var(--color-default-300) !important;
+  font-weight: 400 !important;
+  text-decoration: none;
 }
-.react-multi-date-picker-travel-calendar-popover .rmdp-day span {
-  position: relative !important;
-  left: 0;
-  right: 0;
-  top: 0;
+.react-multi-date-picker-travel-calendar-popover .rmdp-day.rmdp-deactive .travel-calendar-day__price {
+  visibility: hidden;
 }
-.react-multi-date-picker-travel-calendar-popover .travel-calendar-day__price--empty {
-  color: var(--tc-color-price-empty);
+.react-multi-date-picker-travel-calendar-popover .rmdp-day.rmdp-deactive span,
+.react-multi-date-picker-travel-calendar-popover .rmdp-day.rmdp-deactive.rmdp-selected span,
+.react-multi-date-picker-travel-calendar-popover .rmdp-day.rmdp-deactive.rmdp-today span {
+  background-color: transparent !important;
+  box-shadow: none !important;
 }
 .react-multi-date-picker-travel-calendar-popover {
   /* Accesibilidad: foco navegable si se usa keyboard nav de librería */
 }
 .react-multi-date-picker-travel-calendar-popover .travel-calendar-day:focus-visible {
-  outline: 2px solid #2563eb;
+  outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
-.react-multi-date-picker-travel-calendar-popover .rmdp-day.rmdp-selected span:not(.highlight) {
+.react-multi-date-picker-travel-calendar-popover {
+  /*
+   * Hoy: fondo suave y número en primario, como HeroUI (sin aro). Si hoy no tiene salida, solo el número.
+   * El número usa la clase propia: la librería no marca `rmdp-today` en un día deshabilitado.
+   */
+}
+.react-multi-date-picker-travel-calendar-popover .rmdp-day:not(.rmdp-deactive) .travel-calendar-day--today .travel-calendar-day__number {
+  color: var(--color-primary) !important;
+}
+.react-multi-date-picker-travel-calendar-popover .rmdp-day.rmdp-today:not(.rmdp-disabled, .rmdp-deactive) span {
+  background-color: var(--color-primary-100) !important;
+}
+.react-multi-date-picker-travel-calendar-popover .rmdp-day.rmdp-today.rmdp-disabled:not(.rmdp-deactive) span {
+  background-color: transparent !important;
+}
+.react-multi-date-picker-travel-calendar-popover {
+  /* Seleccionado */
+}
+.react-multi-date-picker-travel-calendar-popover .rmdp-day.rmdp-selected:not(.rmdp-deactive) span:not(.highlight) {
   background-color: var(--color-primary) !important;
   color: #fff !important;
   box-shadow: none !important;
 }
-.react-multi-date-picker-travel-calendar-popover .rmdp-day.rmdp-selected span:not(.highlight) .travel-calendar-day__price {
+.react-multi-date-picker-travel-calendar-popover .rmdp-day.rmdp-selected:not(.rmdp-deactive) span:not(.highlight) .travel-calendar-day__number {
   color: #fff !important;
 }
+.react-multi-date-picker-travel-calendar-popover .rmdp-day.rmdp-selected:not(.rmdp-deactive) span:not(.highlight) .travel-calendar-day__price {
+  color: rgba(255, 255, 255, 0.85) !important;
+}
 @media (hover: hover) {
-  .react-multi-date-picker-travel-calendar-popover .rmdp-day:not(.rmdp-disabled, .rmdp-day-hidden) span:hover {
+  .react-multi-date-picker-travel-calendar-popover .rmdp-day:not(.rmdp-disabled, .rmdp-day-hidden, .rmdp-selected) span:hover {
     background-color: var(--color-primary-100) !important;
-    color: var(--color-primary-500) !important;
   }
-  .react-multi-date-picker-travel-calendar-popover .travel-calendar-day.travel-calendar-day--active:hover span {
-    background-color: var(--color-primary-100) !important;
-    color: var(--color-primary-500) !important;
+  .react-multi-date-picker-travel-calendar-popover .rmdp-day:not(.rmdp-disabled, .rmdp-day-hidden, .rmdp-selected) span:hover .travel-calendar-day__number {
+    color: var(--color-primary) !important;
   }
 }
-.react-multi-date-picker-travel-calendar-popover .rmdp-day.rmdp-today span {
-  background-color: var(--color-primary-100) !important;
-  color: var(--color-primary-500) !important;
+
+@keyframes tc-skeleton-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.45;
+  }
+}
+@keyframes tc-price-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .react-multi-date-picker-travel-calendar-popover .travel-calendar-day__price,
+  .react-multi-date-picker-travel-calendar-popover .travel-calendar-day__price--loading {
+    animation: none !important;
+  }
 }.table__container_main {
 }
 

package/dist/table/index.cjs.js

@@ -4,12 +4,64 @@ const jsxRuntime = require("react/jsx-runtime");
 const compilerRuntime = require("react/compiler-runtime");
 const React = require("react");
 const tailwindMerge = require("tailwind-merge");
-const loaderCircle = require("../chunks/loader-circle-DgmOcU-K.js");
 const checkbox = require("../chunks/checkbox-BM8KELqq.js");
 const clsx = require("clsx");
 const tooltip = require("../chunks/tooltip-CkpPQC4G.js");
 const chevronUp = require("../chunks/chevron-up-D8XaBFJG.js");
 const chevronsUpDown = require("../chunks/chevrons-up-down-BEtKEloL.js");
+const colorMap = {
+  default: "var(--color-default-default)",
+  primary: "var(--color-primary-default)",
+  danger: "var(--color-danger-default)",
+  success: "var(--color-success-default)",
+  warning: "var(--color-warning-default)",
+  secondary: "var(--color-secondary-default)"
+};
+const LoaderCircle = (t0) => {
+  const $ = compilerRuntime.c(7);
+  const {
+    size: t1,
+    color: t2,
+    borderWidth: t3
+  } = t0;
+  const size = t1 === void 0 ? 44 : t1;
+  const color = t2 === void 0 ? "primary" : t2;
+  const borderWidth = t3 === void 0 ? 2 : t3;
+  const colorValue = colorMap[color] ?? colorMap.default;
+  const t4 = `${size}px`;
+  const t5 = `${borderWidth}px`;
+  let t6;
+  if ($[0] !== colorValue || $[1] !== t4 || $[2] !== t5) {
+    t6 = {
+      "--size-loading-circle": t4,
+      "--color-loading-circle": colorValue,
+      "--border-width-loading-circle": t5
+    };
+    $[0] = colorValue;
+    $[1] = t4;
+    $[2] = t5;
+    $[3] = t6;
+  } else {
+    t6 = $[3];
+  }
+  const style = t6;
+  let t7;
+  if ($[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t7 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "loading-circle-app-div", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "loading-circle-app" }) });
+    $[4] = t7;
+  } else {
+    t7 = $[4];
+  }
+  let t8;
+  if ($[5] !== style) {
+    t8 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container-loading-circle", style, children: t7 });
+    $[5] = style;
+    $[6] = t8;
+  } else {
+    t8 = $[6];
+  }
+  return t8;
+};
 const initialValues = {
   color: "primary",
   disabledKeys: [],
@@ -202,7 +254,7 @@ function TableBodyComponent(t0) {
   if (isLoading) {
     let t82;
     if ($[28] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t82 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3.5", children: /* @__PURE__ */ jsxRuntime.jsx(loaderCircle.LoaderCircle, { size: 45 }) });
+      t82 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3.5", children: /* @__PURE__ */ jsxRuntime.jsx(LoaderCircle, { size: 45 }) });
       $[28] = t82;
     } else {
       t82 = $[28];