@riverbankcms/sdk 0.81.0 → 0.82.0

package/dist/cli/init-docs/content/workflow-custom-block.md

@@ -40,6 +40,9 @@ export default defineConfig({
       category: 'content',
       icon: 'Workflow',
       tags: ['process', 'steps', 'flow'],
+      previewCustomize: {
+        quickFieldPriority: ['title', 'introText'],
+      },
       fields: [
         {
           id: 'title',
@@ -74,6 +77,8 @@ export default defineConfig({
 });
 ```
 
+`previewCustomize` is optional. When present, `quickFieldPriority` must list one or more unique field IDs to consider for compact Preview Customize controls; unlisted fields remain in the full panel.
+
 ### Step 2: Choose Field Types
 
 Common field types for custom blocks:

package/dist/client/{accordion-SFIIZWNH.mjs → accordion-G34C45TW.mjs}

@@ -1,5 +1,5 @@
-import { defineIslandPropsDecoder } from './chunk-NX6X3GRF.mjs';
-import './chunk-7BXX7WXH.mjs';
+import { defineIslandPropsDecoder } from './chunk-RJHTCTCZ.mjs';
+import './chunk-S3MKFGOG.mjs';
 
 // src/rendering/islands/enhancers/accordion.ts
 var decode = defineIslandPropsDecoder("accordion");

package/dist/client/{bookingForm-CFKZVWGA.mjs → bookingForm-BLBVKSAQ.mjs}

@@ -1,15 +1,16 @@
 "use client";
-import { usePolling } from './chunk-IUEDYLFJ.mjs';
-import { SpinnerNode } from './chunk-RMWMT3ZD.mjs';
+import { usePolling } from './chunk-CSZGLBYR.mjs';
+import { SpinnerNode } from './chunk-SBBSMFFG.mjs';
 import { useDiscountCodeUi } from './chunk-ZFHRN6W2.mjs';
-import { scrollToBlock, buildCheckoutReturnUrls, DiscountCodeDisclosure, formatPrice } from './chunk-PA2LJH2M.mjs';
+import { buildRouteIslandApiConfig } from './chunk-L4J5Y62O.mjs';
+import { scrollToBlock, buildCheckoutReturnUrls, DiscountCodeDisclosure, formatPrice } from './chunk-CHAB5ACD.mjs';
 import { FieldValidationMessage, getFieldValidationControlProps } from './chunk-3DCJ45Z2.mjs';
-import './chunk-3PEDD5KJ.mjs';
-import { isSpamProtectionEnabled, getChallengeUrl, AltchaWidget } from './chunk-YLMKMCSJ.mjs';
+import './chunk-DVNUDUVT.mjs';
+import { isSpamProtectionEnabled, getChallengeUrl, AltchaWidget } from './chunk-GFSQNTRW.mjs';
 import { BlockApiProvider, useBlockApi, FeedbackMessage } from './chunk-UDNSI5PY.mjs';
 import { mountReactIsland } from './chunk-N7PBWBWQ.mjs';
-import { defineIslandPropsDecoder, resolveBookingSiteId, resolveDefaultBookingServiceId, getBookingRedirectStateFromLocation, deriveBookingFormViewState, logger, getBookingSuccessMessage, resolveAppointmentCheckoutVerificationState, themeButtonClassName, toSelectedCollectionOptionKind, assertNever11, prepareBookingSubmission, formatBookingSubmissionPreparationError, resolveBookingPaymentStep, BOOKING_FORM_DATA_RESERVED_KEYS, clearWorkflowFeedback, reportWorkflowError, reportWorkflowSuccess, okWith2, err2 } from './chunk-NX6X3GRF.mjs';
-import { resolveBookingTimeZoneId, DEFAULT_BOOKING_TIME_ZONE, unsafeAsFormId, unsafeAsAppointmentResourceId, unsafeAsCustomerPassId, unsafeAsAppointmentServiceId, formatLocalScheduleDate, addLocalScheduleDays, parseBookingLocalDate, resolveFlexibleBalanceInitialPaymentCents, resolveFlexibleBalanceDueAt, getBookingInstalmentDepositRefundability, unsafeAsPassId, splitAmountWithRemainderInFirst, addIntervalPreservingMonthAnchor, clampConfiguredAmount, getBookingInstalmentPlanIntervalCount, omitZeroAmountFutureRows, formatBookingInstant } from './chunk-7BXX7WXH.mjs';
+import { defineIslandPropsDecoder, resolveBookingSiteId, resolveDefaultBookingServiceId, getBookingRedirectStateFromLocation, deriveBookingFormViewState, logger, getBookingSuccessMessage, resolveAppointmentCheckoutVerificationState, themeButtonClassName, toSelectedCollectionOptionKind, assertNever11, prepareBookingSubmission, formatBookingSubmissionPreparationError, resolveBookingPaymentStep, BOOKING_FORM_DATA_RESERVED_KEYS, clearWorkflowFeedback, reportWorkflowError, reportWorkflowSuccess, okWith2, err2 } from './chunk-RJHTCTCZ.mjs';
+import { resolveBookingTimeZoneId, DEFAULT_BOOKING_TIME_ZONE, unsafeAsFormId, unsafeAsAppointmentResourceId, unsafeAsCustomerPassId, unsafeAsAppointmentServiceId, formatLocalScheduleDate, addLocalScheduleDays, parseBookingLocalDate, resolveFlexibleBalanceInitialPaymentCents, resolveFlexibleBalanceDueAt, getBookingInstalmentDepositRefundability, unsafeAsPassId, splitAmountWithRemainderInFirst, addIntervalPreservingMonthAnchor, clampConfiguredAmount, getBookingInstalmentPlanIntervalCount, omitZeroAmountFutureRows, formatBookingInstant } from './chunk-S3MKFGOG.mjs';
 import React2, { useRef, useState, useMemo, useReducer, useEffect, useCallback, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -3000,12 +3001,11 @@ var enhance = (root, props) => {
   if (!apiBaseUrl) {
     throw new Error("[sdk:islands] booking-form requires apiBaseUrl");
   }
-  const apiConfig = {
-    baseUrl: apiBaseUrl,
-    auth: { type: "none" },
-    authOverrides: portalToken ? { portal: { type: "bearer", token: portalToken } } : void 0,
+  const apiConfig = buildRouteIslandApiConfig({
+    apiBaseUrl,
+    portalToken,
     siteId
-  };
+  });
   return mountReactIsland(root, ({ root: reactRoot }) => {
     reactRoot.render(
       /* @__PURE__ */ jsx(BlockApiProvider, { config: apiConfig, children: /* @__PURE__ */ jsx(BookingFormClient, { ...props }) })

package/dist/client/bookings.mjs

@@ -4827,7 +4827,7 @@ var joyStamp = defineButtonPersonality({
 var pebble = defineButtonPersonality({
   id: "pebble",
   name: "Pebble",
-  description: "Generous pill buttons with a soft hover lift.",
+  description: "Generous pill buttons with a quiet colour-softening hover.",
   tags: { tone: "classic", energy: "calm", motion: "standard", era: "organic" },
   buttonSystem: {
     global: {
@@ -4856,8 +4856,7 @@ var pebble = defineButtonPersonality({
         borderRadius: "rounded-full",
         effects: {
           hover: [
-            { effectId: "scale-up", options: { scale: "1.03" } },
-            { effectId: "drop-shadow", options: { intensity: "medium" } }
+            { effectId: "background-on-hover-alpha", options: { colorToken: "primary", opacity: 88 } }
           ]
         }
       },
@@ -6726,6 +6725,7 @@ var themeV2CompilerOwnedFieldNames = [
   ...themeV2BlockSpecificRawStyleFieldNames
 ];
 var pageDesignEditorBackgroundOverrideOwner = "page-design-editor";
+var siteChromeBackgroundOverrideOwner = "site-chrome-editor";
 
 // ../theme-core/src/schema.ts
 var axesSchema = z17.object({
@@ -7051,6 +7051,7 @@ var navContainerSchema = z17.object({
 }).default({ type: "none", tint: null, opacity: 0.15 });
 var headerBackgroundSchema = z17.object({
   type: z17.enum(["color", "gradient", "image"]),
+  contentOwner: z17.literal(siteChromeBackgroundOverrideOwner).optional(),
   color: tokenOrCssColorValueSchema.nullable().optional(),
   gradient: gradientConfigSchema.nullable().optional(),
   image: mediaSchema.nullable().optional(),
@@ -10709,10 +10710,10 @@ function FeedbackMessage({
 }
 
 // ../blocks/src/system/runtime/nodes/booking-form.client.tsx
-import React3, { useRef as useRef7, useState as useState6 } from "react";
+import React3, { useRef as useRef7, useState as useState5 } from "react";
 
 // ../altcha/src/AltchaWidget.tsx
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { jsx as jsx4 } from "react/jsx-runtime";
 function AltchaWidget({
   challengeUrl,
@@ -10722,7 +10723,6 @@ function AltchaWidget({
   className
 }) {
   const containerRef = useRef(null);
-  const [isLoaded, setIsLoaded] = useState(false);
   useEffect(() => {
     if (typeof window === "undefined") return;
     let widget = null;
@@ -10749,7 +10749,6 @@ function AltchaWidget({
         }
       }));
       containerRef.current.appendChild(widget);
-      setIsLoaded(true);
     }).catch((err) => {
       console.error("Failed to load ALTCHA widget:", err);
     });
@@ -10800,7 +10799,7 @@ import React2, {
   useMemo as useMemo2,
   useReducer as useReducer2,
   useRef as useRef5,
-  useState as useState5
+  useState as useState4
 } from "react";
 
 // ../../node_modules/.pnpm/altcha-lib@1.4.1/node_modules/altcha-lib/dist/helpers.js
@@ -10831,7 +10830,7 @@ function getChallengeUrl() {
 }
 
 // ../blocks/src/system/runtime/hooks/useAvailableDates.ts
-import { useState as useState2, useEffect as useEffect3, useCallback, useRef as useRef3 } from "react";
+import { useState, useEffect as useEffect3, useCallback, useRef as useRef3 } from "react";
 
 // ../blocks/src/utils/date-formatting.ts
 var BOOKING_FETCH_CHUNK_DAYS = 14;
@@ -10952,12 +10951,12 @@ function useAvailableDates({
   initialDays = 30
 }) {
   const api = useBlockApi();
-  const [availableDates, setAvailableDates] = useState2(/* @__PURE__ */ new Set());
-  const [isLoading, setIsLoading] = useState2(false);
-  const [isRefreshing, setIsRefreshing] = useState2(false);
-  const [error, setError] = useState2(null);
-  const [hasMore, setHasMore] = useState2(false);
-  const [loadedRange, setLoadedRange] = useState2(null);
+  const [availableDates, setAvailableDates] = useState(/* @__PURE__ */ new Set());
+  const [isLoading, setIsLoading] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [error, setError] = useState(null);
+  const [hasMore, setHasMore] = useState(false);
+  const [loadedRange, setLoadedRange] = useState(null);
   const nextStartDateRef = useRef3(null);
   const requestIdRef = useRef3(0);
   const fetchDates = useCallback(
@@ -11057,7 +11056,7 @@ function useAvailableDates({
 }
 
 // ../blocks/src/system/runtime/hooks/useAvailableSlots.ts
-import { useState as useState3, useCallback as useCallback2, useEffect as useEffect4, useRef as useRef4 } from "react";
+import { useState as useState2, useCallback as useCallback2, useEffect as useEffect4, useRef as useRef4 } from "react";
 var AVAILABILITY_REFRESH_INTERVAL_MS2 = 3e4;
 var AVAILABILITY_REFRESH_JITTER_MS2 = 5e3;
 function useAvailableSlots({
@@ -11069,11 +11068,11 @@ function useAvailableSlots({
   timezone
 }) {
   const api = useBlockApi();
-  const [slots, setSlots] = useState3([]);
-  const [isLoading, setIsLoading] = useState3(false);
-  const [isRefreshing, setIsRefreshing] = useState3(false);
-  const [hasLoaded, setHasLoaded] = useState3(false);
-  const [error, setError] = useState3(null);
+  const [slots, setSlots] = useState2([]);
+  const [isLoading, setIsLoading] = useState2(false);
+  const [isRefreshing, setIsRefreshing] = useState2(false);
+  const [hasLoaded, setHasLoaded] = useState2(false);
+  const [error, setError] = useState2(null);
   const requestIdRef = useRef4(0);
   const fetchSlots = useCallback2(
     async (mode) => {
@@ -11234,14 +11233,14 @@ function useBookingSubmission(_siteId) {
 }
 
 // ../blocks/src/system/runtime/nodes/event-registration/useDiscountCodeUi.ts
-import { useEffect as useEffect5, useState as useState4 } from "react";
+import { useEffect as useEffect5, useState as useState3 } from "react";
 function useDiscountCodeUi(options) {
-  const [discountUiOpen, setDiscountUiOpen] = useState4(false);
-  const [discountCode, setDiscountCode] = useState4("");
-  const [discountsAvailable, setDiscountsAvailable] = useState4(false);
-  const [manualCodeEntryAllowed, setManualCodeEntryAllowed] = useState4(false);
-  const [autoAppliedDiscount, setAutoAppliedDiscount] = useState4(null);
-  const [discountsAvailableLoading, setDiscountsAvailableLoading] = useState4(false);
+  const [discountUiOpen, setDiscountUiOpen] = useState3(false);
+  const [discountCode, setDiscountCode] = useState3("");
+  const [discountsAvailable, setDiscountsAvailable] = useState3(false);
+  const [manualCodeEntryAllowed, setManualCodeEntryAllowed] = useState3(false);
+  const [autoAppliedDiscount, setAutoAppliedDiscount] = useState3(null);
+  const [discountsAvailableLoading, setDiscountsAvailableLoading] = useState3(false);
   useEffect5(() => {
     let cancelled = false;
     async function checkDiscountAvailability() {
@@ -12359,9 +12358,9 @@ function useHeadlessBookingFlow(options) {
   );
   const [state, dispatch] = useReducer2(bookingFlowReducer, initialState);
   const api = useBlockApi();
-  const [resourcesState, setResourcesState] = useState5({ tag: "idle" });
+  const [resourcesState, setResourcesState] = useState4({ tag: "idle" });
   const resourcesRequestIdRef = useRef5(0);
-  const [appointmentPackages, setAppointmentPackages] = useState5({ tag: "idle" });
+  const [appointmentPackages, setAppointmentPackages] = useState4({ tag: "idle" });
   const appointmentPackagesRequestIdRef = useRef5(0);
   const selectedServiceId = state.selectedServiceId ?? defaultServiceId;
   const selectedResourceId = state.selectedResourceId ?? defaultResourceId;
@@ -14210,7 +14209,7 @@ var BookingFormClient = ({
   const initialResourceId = render.hydration.resourceId ?? void 0;
   const isPortalRebook = render.hydration.rebookContext?.kind === "portal_rebook";
   const hasLoggedRebookCompletionRef = useRef7(false);
-  const [redirectState] = useState6(
+  const [redirectState] = useState5(
     () => getBookingRedirectStateFromLocation(getBookingRedirectLocationSnapshot())
   );
   const showSpamProtection = render.hydration.spamProtectionEnabled ?? isSpamProtectionEnabled();
@@ -14934,11 +14933,11 @@ ${root} {
   --rb-testimonial-quote-weight: ${quote.weight};
   --rb-testimonial-quote-display: ${quote.display};
 
-  /* Carousel arrows (defaults: primary background + onPrimary icon) */
-  --rb-testimonial-carousel-arrow-bg: rgb(var(--tb-primary));
-  --rb-testimonial-carousel-arrow-bg-hover: rgba(var(--tb-primary), 0.85);
-  --rb-testimonial-carousel-arrow-color: rgb(var(--tb-onPrimary));
-  --rb-testimonial-carousel-arrow-border-color: rgba(var(--tb-onPrimary), 0.18);
+  /* Carousel arrows: use the secondary chip so accent-band sections retain contrast. */
+  --rb-testimonial-carousel-arrow-bg: rgb(var(--tb-secondary));
+  --rb-testimonial-carousel-arrow-bg-hover: color-mix(in oklab, rgb(var(--tb-secondary)), rgb(var(--tb-text)) 14%);
+  --rb-testimonial-carousel-arrow-color: rgb(var(--tb-onSecondary));
+  --rb-testimonial-carousel-arrow-border-color: rgba(var(--tb-onSecondary), 0.22);
   --rb-testimonial-carousel-arrow-size: 2.75rem;
   --rb-testimonial-carousel-arrow-icon-size: 1.25rem;
   --rb-testimonial-carousel-arrow-icon-stroke-width: 2.5;
@@ -15082,13 +15081,13 @@ import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 import { jsx as jsx13 } from "react/jsx-runtime";
 
 // ../blocks/src/system/runtime/hooks/useBookingFormConfig.ts
-import { useState as useState7, useEffect as useEffect8 } from "react";
+import { useState as useState6, useEffect as useEffect8 } from "react";
 function useBookingFormConfig(siteId, formId) {
   const api = useBlockApi();
-  const [formConfig, setFormConfig] = useState7(null);
-  const [services, setServices] = useState7([]);
-  const [isLoading, setIsLoading] = useState7(true);
-  const [error, setError] = useState7(null);
+  const [formConfig, setFormConfig] = useState6(null);
+  const [services, setServices] = useState6([]);
+  const [isLoading, setIsLoading] = useState6(true);
+  const [error, setError] = useState6(null);
   useEffect8(() => {
     let mounted = true;
     async function loadFormAndServices() {

package/dist/client/{carousel-ELXWSBLA.mjs → carousel-7ZVTBRMD.mjs}

@@ -1,7 +1,7 @@
-import { normalizeCarouselProps, CarouselNodeClient } from './chunk-G56BSZAM.mjs';
+import { normalizeCarouselProps, CarouselNodeClient } from './chunk-5PQH4Y75.mjs';
 import { mountReactIsland } from './chunk-N7PBWBWQ.mjs';
-import { defineIslandPropsDecoder } from './chunk-NX6X3GRF.mjs';
-import './chunk-7BXX7WXH.mjs';
+import { defineIslandPropsDecoder } from './chunk-RJHTCTCZ.mjs';
+import './chunk-S3MKFGOG.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 var decode = defineIslandPropsDecoder("carousel");

package/dist/client/{cart-6SSCPYY5.mjs → cart-Q6S6LZUO.mjs}

@@ -1,15 +1,16 @@
-import { mountShopBlockIsland, CartClient } from './chunk-NP47RHIX.mjs';
-import './chunk-TCJS3NY5.mjs';
-import './chunk-G56BSZAM.mjs';
+import { mountShopBlockIsland, CartClient } from './chunk-WJFHDTYF.mjs';
+import './chunk-U2EW7RSR.mjs';
+import './chunk-5PQH4Y75.mjs';
 import './chunk-I2MMZO53.mjs';
 import './chunk-ZFHRN6W2.mjs';
-import './chunk-PA2LJH2M.mjs';
+import './chunk-L4J5Y62O.mjs';
+import './chunk-CHAB5ACD.mjs';
 import './chunk-3DCJ45Z2.mjs';
-import './chunk-3PEDD5KJ.mjs';
+import './chunk-DVNUDUVT.mjs';
 import './chunk-UDNSI5PY.mjs';
 import './chunk-N7PBWBWQ.mjs';
-import { defineIslandPropsDecoder } from './chunk-NX6X3GRF.mjs';
-import './chunk-7BXX7WXH.mjs';
+import { defineIslandPropsDecoder } from './chunk-RJHTCTCZ.mjs';
+import './chunk-S3MKFGOG.mjs';
 
 // src/rendering/islands/enhancers/cart.tsx
 var decode = defineIslandPropsDecoder("cart");

package/dist/client/{checkout-UFQ34HPV.mjs → checkout-5QJLDE4I.mjs}

@@ -1,15 +1,16 @@
-import { mountShopBlockIsland, CheckoutClient } from './chunk-NP47RHIX.mjs';
-import './chunk-TCJS3NY5.mjs';
-import './chunk-G56BSZAM.mjs';
+import { mountShopBlockIsland, CheckoutClient } from './chunk-WJFHDTYF.mjs';
+import './chunk-U2EW7RSR.mjs';
+import './chunk-5PQH4Y75.mjs';
 import './chunk-I2MMZO53.mjs';
 import './chunk-ZFHRN6W2.mjs';
-import './chunk-PA2LJH2M.mjs';
+import './chunk-L4J5Y62O.mjs';
+import './chunk-CHAB5ACD.mjs';
 import './chunk-3DCJ45Z2.mjs';
-import './chunk-3PEDD5KJ.mjs';
+import './chunk-DVNUDUVT.mjs';
 import './chunk-UDNSI5PY.mjs';
 import './chunk-N7PBWBWQ.mjs';
-import { defineIslandPropsDecoder } from './chunk-NX6X3GRF.mjs';
-import './chunk-7BXX7WXH.mjs';
+import { defineIslandPropsDecoder } from './chunk-RJHTCTCZ.mjs';
+import './chunk-S3MKFGOG.mjs';
 
 // src/rendering/islands/enhancers/checkout.tsx
 var decode = defineIslandPropsDecoder("checkout");

package/dist/client/{chunk-G56BSZAM.mjs → chunk-5PQH4Y75.mjs}

@@ -1,6 +1,6 @@
 "use client";
-import { ChevronLeft, ChevronRight } from './chunk-NX6X3GRF.mjs';
-import { clsx_default } from './chunk-7BXX7WXH.mjs';
+import { ChevronLeft, ChevronRight } from './chunk-RJHTCTCZ.mjs';
+import { clsx_default } from './chunk-S3MKFGOG.mjs';
 import React, { useRef, useState, useCallback, useEffect } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
@@ -1862,7 +1862,7 @@ function EmblaCarousel(root, userOptions, userPlugins) {
 }
 EmblaCarousel.globalOptions = void 0;
 
-// ../../node_modules/.pnpm/embla-carousel-react@8.6.0_react@19.2.4/node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js
+// ../../node_modules/.pnpm/embla-carousel-react@8.6.0_react@19.2.7/node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js
 function useEmblaCarousel(options = {}, plugins = []) {
   const storedOptions = useRef(options);
   const storedPlugins = useRef(plugins);

package/dist/client/{chunk-PA2LJH2M.mjs → chunk-CHAB5ACD.mjs}

@@ -1,6 +1,6 @@
 import { FeedbackMessage } from './chunk-UDNSI5PY.mjs';
-import { themeButtonClassName } from './chunk-NX6X3GRF.mjs';
-import { clsx_default } from './chunk-7BXX7WXH.mjs';
+import { themeButtonClassName } from './chunk-RJHTCTCZ.mjs';
+import { clsx_default } from './chunk-S3MKFGOG.mjs';
 import { useId } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -159,8 +159,9 @@ function copyDataAttributes(from, to) {
 }
 function createBodyThemePortalRoot(sourceEl) {
   if (typeof document === "undefined") return null;
-  const scope = sourceEl.closest(".theme-scope");
-  if (!scope) return null;
+  const scopeCandidate = sourceEl.closest(".theme-scope");
+  if (!(scopeCandidate instanceof HTMLElement)) return null;
+  const scope = scopeCandidate;
   const root = document.createElement("div");
   root.className = "theme-scope rb-theme-portal-root";
   root.style.cssText = scope.style.cssText;

package/dist/client/{chunk-IUEDYLFJ.mjs → chunk-CSZGLBYR.mjs}

@@ -1,5 +1,5 @@
 "use client";
-import { assertNever11 } from './chunk-NX6X3GRF.mjs';
+import { assertNever11 } from './chunk-RJHTCTCZ.mjs';
 import { useReducer, useRef, useCallback, useEffect } from 'react';
 
 // ../blocks/src/system/runtime/hooks/usePolling.state.ts

package/dist/client/{chunk-3PEDD5KJ.mjs → chunk-DVNUDUVT.mjs}

@@ -45,7 +45,7 @@ function ModalShell({
   const onCloseRef = React.useRef(onClose);
   onCloseRef.current = onClose;
   React.useEffect(() => {
-    closeButtonRef.current?.focus();
+    closeButtonRef.current?.focus({ preventScroll: true });
     const onKeyDown = (event) => {
       if (event.key === "Escape") {
         onCloseRef.current();