@ecohouse/ui 0.1.60 → 0.1.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/dist/index.cjs +345 -115
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +16 -4
  4. package/dist/index.d.ts +16 -4
  5. package/dist/index.js +344 -117
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/Checkbox/Checkbox.tsx +6 -0
  9. package/src/components/Counter/Counter.test.ts +38 -0
  10. package/src/components/Counter/Counter.tsx +7 -10
  11. package/src/components/Counter/Counter.utils.ts +28 -0
  12. package/src/components/DatePicker/DatePicker.tsx +5 -14
  13. package/src/components/Drawer/Drawer.tsx +15 -12
  14. package/src/components/Modal/Modal.tsx +31 -11
  15. package/src/components/RadioButton/RadioButton.tsx +14 -0
  16. package/src/components/Select/Select.tsx +16 -8
  17. package/src/components/Toggle/Toggle.tsx +6 -0
  18. package/src/components/VerificationCodeInput/VerificationCodeInput.test.ts +60 -12
  19. package/src/components/VerificationCodeInput/VerificationCodeInput.tsx +29 -24
  20. package/src/components/VerificationCodeInput/VerificationCodeInput.utils.ts +53 -13
  21. package/src/icons/PaymentCard/PaymentCardIcon.tsx +14 -0
  22. package/src/icons/PaymentCard/PaymentCardIcon.web.tsx +13 -0
  23. package/src/icons/PaymentCard/index.ts +1 -0
  24. package/src/icons/PaymentCard/paymentCardPath.ts +3 -0
  25. package/src/icons/Receipt/ReceiptIcon.tsx +14 -0
  26. package/src/icons/Receipt/ReceiptIcon.web.tsx +13 -0
  27. package/src/icons/Receipt/index.ts +1 -0
  28. package/src/icons/Receipt/receiptPath.ts +3 -0
  29. package/src/icons/index.ts +2 -0
  30. package/src/icons/registry.ts +4 -0
  31. package/src/index.ts +8 -1
  32. package/src/theme/typography.ts +2 -2
  33. package/src/utils/dateUtils.test.ts +72 -0
  34. package/src/utils/dateUtils.ts +30 -2
  35. package/src/utils/focusTrap.test.ts +26 -0
  36. package/src/utils/focusTrap.ts +39 -0
  37. package/src/utils/overlayStack.test.ts +175 -0
  38. package/src/utils/overlayStack.ts +105 -0
  39. package/src/utils/useHydrated.test.ts +14 -0
  40. package/src/utils/useHydrated.ts +14 -0
  41. package/src/utils/useOverlayLayer.ts +41 -0
  42. package/src/utils/useWebFocusTrap.ts +68 -0
  43. package/src/utils/webToggleKey.test.ts +49 -0
  44. package/src/utils/webToggleKey.ts +23 -0
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { forwardRef, useRef, useMemo, useState, useCallback, useEffect, useLayoutEffect, useId, useImperativeHandle, isValidElement, cloneElement } from 'react';
1
+ import { forwardRef, useRef, useMemo, useState, useCallback, useEffect, useLayoutEffect, useId, useImperativeHandle, useSyncExternalStore, isValidElement, cloneElement } from 'react';
2
2
  import { View, Text, Platform, Pressable, StyleSheet, Image, useWindowDimensions, Animated, Easing, TouchableOpacity, ActivityIndicator, Modal as Modal$1, TextInput, ScrollView, PanResponder } from 'react-native';
3
3
  import Svg31, { Path, Rect } from 'react-native-svg';
4
4
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -18765,29 +18765,29 @@ var require_react_dom_development = __commonJS({
18765
18765
  }
18766
18766
  return [newState, dispatch];
18767
18767
  }
18768
- function mountMutableSource(source, getSnapshot, subscribe) {
18768
+ function mountMutableSource(source, getSnapshot, subscribe2) {
18769
18769
  {
18770
18770
  return void 0;
18771
18771
  }
18772
18772
  }
18773
- function updateMutableSource(source, getSnapshot, subscribe) {
18773
+ function updateMutableSource(source, getSnapshot, subscribe2) {
18774
18774
  {
18775
18775
  return void 0;
18776
18776
  }
18777
18777
  }
18778
- function mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
18778
+ function mountSyncExternalStore(subscribe2, getSnapshot, getServerSnapshot2) {
18779
18779
  var fiber = currentlyRenderingFiber$1;
18780
18780
  var hook = mountWorkInProgressHook();
18781
18781
  var nextSnapshot;
18782
18782
  var isHydrating2 = getIsHydrating();
18783
18783
  if (isHydrating2) {
18784
- if (getServerSnapshot === void 0) {
18784
+ if (getServerSnapshot2 === void 0) {
18785
18785
  throw new Error("Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering.");
18786
18786
  }
18787
- nextSnapshot = getServerSnapshot();
18787
+ nextSnapshot = getServerSnapshot2();
18788
18788
  {
18789
18789
  if (!didWarnUncachedGetSnapshot) {
18790
- if (nextSnapshot !== getServerSnapshot()) {
18790
+ if (nextSnapshot !== getServerSnapshot2()) {
18791
18791
  error("The result of getServerSnapshot should be cached to avoid an infinite loop");
18792
18792
  didWarnUncachedGetSnapshot = true;
18793
18793
  }
@@ -18818,12 +18818,12 @@ var require_react_dom_development = __commonJS({
18818
18818
  getSnapshot
18819
18819
  };
18820
18820
  hook.queue = inst;
18821
- mountEffect(subscribeToStore.bind(null, fiber, inst, subscribe), [subscribe]);
18821
+ mountEffect(subscribeToStore.bind(null, fiber, inst, subscribe2), [subscribe2]);
18822
18822
  fiber.flags |= Passive;
18823
18823
  pushEffect(HasEffect | Passive$1, updateStoreInstance.bind(null, fiber, inst, nextSnapshot, getSnapshot), void 0, null);
18824
18824
  return nextSnapshot;
18825
18825
  }
18826
- function updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
18826
+ function updateSyncExternalStore(subscribe2, getSnapshot, getServerSnapshot2) {
18827
18827
  var fiber = currentlyRenderingFiber$1;
18828
18828
  var hook = updateWorkInProgressHook();
18829
18829
  var nextSnapshot = getSnapshot();
@@ -18843,7 +18843,7 @@ var require_react_dom_development = __commonJS({
18843
18843
  markWorkInProgressReceivedUpdate();
18844
18844
  }
18845
18845
  var inst = hook.queue;
18846
- updateEffect(subscribeToStore.bind(null, fiber, inst, subscribe), [subscribe]);
18846
+ updateEffect(subscribeToStore.bind(null, fiber, inst, subscribe2), [subscribe2]);
18847
18847
  if (inst.getSnapshot !== getSnapshot || snapshotChanged || // Check if the susbcribe function changed. We can save some memory by
18848
18848
  // checking whether we scheduled a subscription effect above.
18849
18849
  workInProgressHook !== null && workInProgressHook.memoizedState.tag & HasEffect) {
@@ -18886,13 +18886,13 @@ var require_react_dom_development = __commonJS({
18886
18886
  forceStoreRerender(fiber);
18887
18887
  }
18888
18888
  }
18889
- function subscribeToStore(fiber, inst, subscribe) {
18889
+ function subscribeToStore(fiber, inst, subscribe2) {
18890
18890
  var handleStoreChange = function() {
18891
18891
  if (checkIfSnapshotChanged(inst)) {
18892
18892
  forceStoreRerender(fiber);
18893
18893
  }
18894
18894
  };
18895
- return subscribe(handleStoreChange);
18895
+ return subscribe2(handleStoreChange);
18896
18896
  }
18897
18897
  function checkIfSnapshotChanged(inst) {
18898
18898
  var latestGetSnapshot = inst.getSnapshot;
@@ -19473,15 +19473,15 @@ var require_react_dom_development = __commonJS({
19473
19473
  mountHookTypesDev();
19474
19474
  return mountTransition();
19475
19475
  },
19476
- useMutableSource: function(source, getSnapshot, subscribe) {
19476
+ useMutableSource: function(source, getSnapshot, subscribe2) {
19477
19477
  currentHookNameInDev = "useMutableSource";
19478
19478
  mountHookTypesDev();
19479
19479
  return mountMutableSource();
19480
19480
  },
19481
- useSyncExternalStore: function(subscribe, getSnapshot, getServerSnapshot) {
19481
+ useSyncExternalStore: function(subscribe2, getSnapshot, getServerSnapshot2) {
19482
19482
  currentHookNameInDev = "useSyncExternalStore";
19483
19483
  mountHookTypesDev();
19484
- return mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
19484
+ return mountSyncExternalStore(subscribe2, getSnapshot, getServerSnapshot2);
19485
19485
  },
19486
19486
  useId: function() {
19487
19487
  currentHookNameInDev = "useId";
@@ -19577,15 +19577,15 @@ var require_react_dom_development = __commonJS({
19577
19577
  updateHookTypesDev();
19578
19578
  return mountTransition();
19579
19579
  },
19580
- useMutableSource: function(source, getSnapshot, subscribe) {
19580
+ useMutableSource: function(source, getSnapshot, subscribe2) {
19581
19581
  currentHookNameInDev = "useMutableSource";
19582
19582
  updateHookTypesDev();
19583
19583
  return mountMutableSource();
19584
19584
  },
19585
- useSyncExternalStore: function(subscribe, getSnapshot, getServerSnapshot) {
19585
+ useSyncExternalStore: function(subscribe2, getSnapshot, getServerSnapshot2) {
19586
19586
  currentHookNameInDev = "useSyncExternalStore";
19587
19587
  updateHookTypesDev();
19588
- return mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
19588
+ return mountSyncExternalStore(subscribe2, getSnapshot, getServerSnapshot2);
19589
19589
  },
19590
19590
  useId: function() {
19591
19591
  currentHookNameInDev = "useId";
@@ -19681,15 +19681,15 @@ var require_react_dom_development = __commonJS({
19681
19681
  updateHookTypesDev();
19682
19682
  return updateTransition();
19683
19683
  },
19684
- useMutableSource: function(source, getSnapshot, subscribe) {
19684
+ useMutableSource: function(source, getSnapshot, subscribe2) {
19685
19685
  currentHookNameInDev = "useMutableSource";
19686
19686
  updateHookTypesDev();
19687
19687
  return updateMutableSource();
19688
19688
  },
19689
- useSyncExternalStore: function(subscribe, getSnapshot, getServerSnapshot) {
19689
+ useSyncExternalStore: function(subscribe2, getSnapshot, getServerSnapshot2) {
19690
19690
  currentHookNameInDev = "useSyncExternalStore";
19691
19691
  updateHookTypesDev();
19692
- return updateSyncExternalStore(subscribe, getSnapshot);
19692
+ return updateSyncExternalStore(subscribe2, getSnapshot);
19693
19693
  },
19694
19694
  useId: function() {
19695
19695
  currentHookNameInDev = "useId";
@@ -19785,15 +19785,15 @@ var require_react_dom_development = __commonJS({
19785
19785
  updateHookTypesDev();
19786
19786
  return rerenderTransition();
19787
19787
  },
19788
- useMutableSource: function(source, getSnapshot, subscribe) {
19788
+ useMutableSource: function(source, getSnapshot, subscribe2) {
19789
19789
  currentHookNameInDev = "useMutableSource";
19790
19790
  updateHookTypesDev();
19791
19791
  return updateMutableSource();
19792
19792
  },
19793
- useSyncExternalStore: function(subscribe, getSnapshot, getServerSnapshot) {
19793
+ useSyncExternalStore: function(subscribe2, getSnapshot, getServerSnapshot2) {
19794
19794
  currentHookNameInDev = "useSyncExternalStore";
19795
19795
  updateHookTypesDev();
19796
- return updateSyncExternalStore(subscribe, getSnapshot);
19796
+ return updateSyncExternalStore(subscribe2, getSnapshot);
19797
19797
  },
19798
19798
  useId: function() {
19799
19799
  currentHookNameInDev = "useId";
@@ -19903,17 +19903,17 @@ var require_react_dom_development = __commonJS({
19903
19903
  mountHookTypesDev();
19904
19904
  return mountTransition();
19905
19905
  },
19906
- useMutableSource: function(source, getSnapshot, subscribe) {
19906
+ useMutableSource: function(source, getSnapshot, subscribe2) {
19907
19907
  currentHookNameInDev = "useMutableSource";
19908
19908
  warnInvalidHookAccess();
19909
19909
  mountHookTypesDev();
19910
19910
  return mountMutableSource();
19911
19911
  },
19912
- useSyncExternalStore: function(subscribe, getSnapshot, getServerSnapshot) {
19912
+ useSyncExternalStore: function(subscribe2, getSnapshot, getServerSnapshot2) {
19913
19913
  currentHookNameInDev = "useSyncExternalStore";
19914
19914
  warnInvalidHookAccess();
19915
19915
  mountHookTypesDev();
19916
- return mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
19916
+ return mountSyncExternalStore(subscribe2, getSnapshot, getServerSnapshot2);
19917
19917
  },
19918
19918
  useId: function() {
19919
19919
  currentHookNameInDev = "useId";
@@ -20024,17 +20024,17 @@ var require_react_dom_development = __commonJS({
20024
20024
  updateHookTypesDev();
20025
20025
  return updateTransition();
20026
20026
  },
20027
- useMutableSource: function(source, getSnapshot, subscribe) {
20027
+ useMutableSource: function(source, getSnapshot, subscribe2) {
20028
20028
  currentHookNameInDev = "useMutableSource";
20029
20029
  warnInvalidHookAccess();
20030
20030
  updateHookTypesDev();
20031
20031
  return updateMutableSource();
20032
20032
  },
20033
- useSyncExternalStore: function(subscribe, getSnapshot, getServerSnapshot) {
20033
+ useSyncExternalStore: function(subscribe2, getSnapshot, getServerSnapshot2) {
20034
20034
  currentHookNameInDev = "useSyncExternalStore";
20035
20035
  warnInvalidHookAccess();
20036
20036
  updateHookTypesDev();
20037
- return updateSyncExternalStore(subscribe, getSnapshot);
20037
+ return updateSyncExternalStore(subscribe2, getSnapshot);
20038
20038
  },
20039
20039
  useId: function() {
20040
20040
  currentHookNameInDev = "useId";
@@ -20145,17 +20145,17 @@ var require_react_dom_development = __commonJS({
20145
20145
  updateHookTypesDev();
20146
20146
  return rerenderTransition();
20147
20147
  },
20148
- useMutableSource: function(source, getSnapshot, subscribe) {
20148
+ useMutableSource: function(source, getSnapshot, subscribe2) {
20149
20149
  currentHookNameInDev = "useMutableSource";
20150
20150
  warnInvalidHookAccess();
20151
20151
  updateHookTypesDev();
20152
20152
  return updateMutableSource();
20153
20153
  },
20154
- useSyncExternalStore: function(subscribe, getSnapshot, getServerSnapshot) {
20154
+ useSyncExternalStore: function(subscribe2, getSnapshot, getServerSnapshot2) {
20155
20155
  currentHookNameInDev = "useSyncExternalStore";
20156
20156
  warnInvalidHookAccess();
20157
20157
  updateHookTypesDev();
20158
- return updateSyncExternalStore(subscribe, getSnapshot);
20158
+ return updateSyncExternalStore(subscribe2, getSnapshot);
20159
20159
  },
20160
20160
  useId: function() {
20161
20161
  currentHookNameInDev = "useId";
@@ -28613,7 +28613,7 @@ var languageSwitcherTypography = {
28613
28613
  fontFamily: fonts.sans,
28614
28614
  fontSize: 14,
28615
28615
  fontWeight: "600",
28616
- lineHeight: 14,
28616
+ lineHeight: 18,
28617
28617
  letterSpacing: 0.42
28618
28618
  };
28619
28619
  var counterTypography = {
@@ -30171,6 +30171,12 @@ function PhoneIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
30171
30171
  ) });
30172
30172
  }
30173
30173
 
30174
+ // src/icons/PaymentCard/paymentCardPath.ts
30175
+ var PAYMENT_CARD_PATH = "M4.66536 10H6.66536C6.84218 10 7.01174 9.9298 7.13677 9.80478C7.26179 9.67975 7.33203 9.51019 7.33203 9.33337C7.33203 9.15656 7.26179 8.98699 7.13677 8.86197C7.01174 8.73695 6.84218 8.66671 6.66536 8.66671H4.66536C4.48855 8.66671 4.31898 8.73695 4.19396 8.86197C4.06894 8.98699 3.9987 9.15656 3.9987 9.33337C3.9987 9.51019 4.06894 9.67975 4.19396 9.80478C4.31898 9.9298 4.48855 10 4.66536 10ZM12.6654 3.33337H3.33203C2.8016 3.33337 2.29289 3.54409 1.91782 3.91916C1.54274 4.29423 1.33203 4.80294 1.33203 5.33337V11.3334C1.33203 11.8638 1.54274 12.3725 1.91782 12.7476C2.29289 13.1227 2.8016 13.3334 3.33203 13.3334H12.6654C13.1958 13.3334 13.7045 13.1227 14.0796 12.7476C14.4546 12.3725 14.6654 11.8638 14.6654 11.3334V5.33337C14.6654 4.80294 14.4546 4.29423 14.0796 3.91916C13.7045 3.54409 13.1958 3.33337 12.6654 3.33337ZM13.332 11.3334C13.332 11.5102 13.2618 11.6798 13.1368 11.8048C13.0117 11.9298 12.8422 12 12.6654 12H3.33203C3.15522 12 2.98565 11.9298 2.86063 11.8048C2.7356 11.6798 2.66536 11.5102 2.66536 11.3334V7.33337H13.332V11.3334ZM13.332 6.00004H2.66536V5.33337C2.66536 5.15656 2.7356 4.98699 2.86063 4.86197C2.98565 4.73695 3.15522 4.66671 3.33203 4.66671H12.6654C12.8422 4.66671 13.0117 4.73695 13.1368 4.86197C13.2618 4.98699 13.332 5.15656 13.332 5.33337V6.00004Z";
30176
+ function PaymentCardIcon({ size = 16, color = colors.grey100 }) {
30177
+ return /* @__PURE__ */ jsx(Svg31, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(Path, { d: PAYMENT_CARD_PATH, fill: color }) });
30178
+ }
30179
+
30174
30180
  // src/icons/Plus/plusPath.ts
30175
30181
  var PLUS_PATH = "M8.00004 3.33325V12.6666M3.33337 7.99992H12.6667";
30176
30182
  function PlusIcon({ size = 16, color = colors.white, strokeWidth = 2 }) {
@@ -30201,6 +30207,12 @@ function RefreshIcon({ size = 20, color = colors.white, strokeWidth = 2 }) {
30201
30207
  ) });
30202
30208
  }
30203
30209
 
30210
+ // src/icons/Receipt/receiptPath.ts
30211
+ var RECEIPT_PATH = "M6.66667 5.33337H10.6667C10.8435 5.33337 11.013 5.26314 11.1381 5.13811C11.2631 5.01309 11.3333 4.84352 11.3333 4.66671C11.3333 4.4899 11.2631 4.32033 11.1381 4.1953C11.013 4.07028 10.8435 4.00004 10.6667 4.00004H6.66667C6.48986 4.00004 6.32029 4.07028 6.19526 4.1953C6.07024 4.32033 6 4.4899 6 4.66671C6 4.84352 6.07024 5.01309 6.19526 5.13811C6.32029 5.26314 6.48986 5.33337 6.66667 5.33337ZM5.33333 8.00004H10.6667C10.8435 8.00004 11.013 7.9298 11.1381 7.80478C11.2631 7.67975 11.3333 7.51019 11.3333 7.33337C11.3333 7.15656 11.2631 6.98699 11.1381 6.86197C11.013 6.73695 10.8435 6.66671 10.6667 6.66671H5.33333C5.15652 6.66671 4.98695 6.73695 4.86193 6.86197C4.7369 6.98699 4.66667 7.15656 4.66667 7.33337C4.66667 7.51019 4.7369 7.67975 4.86193 7.80478C4.98695 7.9298 5.15652 8.00004 5.33333 8.00004ZM5.33333 10.6667H10.6667C10.8435 10.6667 11.013 10.5965 11.1381 10.4714C11.2631 10.3464 11.3333 10.1769 11.3333 10C11.3333 9.82323 11.2631 9.65366 11.1381 9.52864C11.013 9.40361 10.8435 9.33337 10.6667 9.33337H5.33333C5.15652 9.33337 4.98695 9.40361 4.86193 9.52864C4.7369 9.65366 4.66667 9.82323 4.66667 10C4.66667 10.1769 4.7369 10.3464 4.86193 10.4714C4.98695 10.5965 5.15652 10.6667 5.33333 10.6667ZM13.3333 1.33337H2.66667C2.48986 1.33337 2.32029 1.40361 2.19526 1.52864C2.07024 1.65366 2 1.82323 2 2.00004V14C2 14.1238 2.03448 14.2452 2.09957 14.3505C2.16466 14.4558 2.25779 14.541 2.36852 14.5963C2.47926 14.6517 2.60323 14.6751 2.72654 14.664C2.84984 14.6529 2.96762 14.6077 3.06667 14.5334L4.44667 13.5L5.82 14.5334C5.9354 14.6199 6.07575 14.6667 6.22 14.6667C6.36425 14.6667 6.5046 14.6199 6.62 14.5334L8 13.5L9.38 14.5334C9.4954 14.6199 9.63575 14.6667 9.78 14.6667C9.92425 14.6667 10.0646 14.6199 10.18 14.5334L11.5533 13.5L12.9333 14.5334C13.0329 14.6075 13.1511 14.6525 13.2748 14.6631C13.3985 14.6737 13.5226 14.6495 13.6333 14.5934C13.7433 14.538 13.8357 14.4532 13.9005 14.3485C13.9652 14.2438 13.9996 14.1232 14 14V2.00004C14 1.82323 13.9298 1.65366 13.8047 1.52864C13.6797 1.40361 13.5101 1.33337 13.3333 1.33337ZM12.6667 12.6667L11.9533 12.1334C11.8379 12.0468 11.6976 12 11.5533 12C11.4091 12 11.2687 12.0468 11.1533 12.1334L9.78 13.1667L8.4 12.1334C8.2846 12.0468 8.14425 12 8 12C7.85575 12 7.7154 12.0468 7.6 12.1334L6.22 13.1667L4.84667 12.1334C4.73127 12.0468 4.59091 12 4.44667 12C4.30242 12 4.16206 12.0468 4.04667 12.1334L3.33333 12.6667V2.66671H12.6667V12.6667Z";
30212
+ function ReceiptIcon({ size = 16, color = colors.grey100 }) {
30213
+ return /* @__PURE__ */ jsx(Svg31, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(Path, { d: RECEIPT_PATH, fill: color }) });
30214
+ }
30215
+
30204
30216
  // src/icons/RefundStatus/refundStatusPath.ts
30205
30217
  var REFUND_STATUS_PATH = "M15.1333 7.66667L13.8004 9L12.4666 7.66667M13.9634 8.66667C13.9876 8.44778 14 8.22534 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14C9.88484 14 11.5667 13.1309 12.6667 11.7716M8 4.66667V8L10 9.33333";
30206
30218
  function RefundStatusIcon({
@@ -30661,12 +30673,14 @@ var icons = {
30661
30673
  notificationSuccess: NotificationSuccessIcon,
30662
30674
  notificationWarning: NotificationWarningIcon,
30663
30675
  paw: PawIcon,
30676
+ paymentCard: PaymentCardIcon,
30664
30677
  phone: PhoneIcon,
30665
30678
  qrCode: QrCodeIcon,
30666
30679
  quietHours: QuietHoursIcon,
30667
30680
  ratingStar: RatingStarIcon,
30668
30681
  plus: PlusIcon,
30669
30682
  refresh: RefreshIcon,
30683
+ receipt: ReceiptIcon,
30670
30684
  refundStatus: RefundStatusIcon,
30671
30685
  search: SearchIcon,
30672
30686
  saveHeart: SaveHeartIcon,
@@ -33142,14 +33156,23 @@ var styles18 = StyleSheet.create({
33142
33156
  includeFontPadding: false
33143
33157
  }
33144
33158
  });
33159
+
33160
+ // src/components/Counter/Counter.utils.ts
33161
+ function clampCounterValue(value, min, max) {
33162
+ return Math.max(min, max === void 0 ? value : Math.min(value, max));
33163
+ }
33164
+ function resolveCounterValue(controlledValue, uncontrolledValue, min, max) {
33165
+ if (controlledValue !== void 0 && Number.isFinite(controlledValue)) return controlledValue;
33166
+ return clampCounterValue(controlledValue === void 0 ? uncontrolledValue : min, min, max);
33167
+ }
33168
+ function stepCounterValue(current, delta, min, max) {
33169
+ return clampCounterValue(current + delta, min, max);
33170
+ }
33145
33171
  var BUTTON_SIZE = 32;
33146
33172
  var webBlurStyle7 = Platform.OS === "web" ? {
33147
33173
  backdropFilter: "blur(20px)",
33148
33174
  WebkitBackdropFilter: "blur(20px)"
33149
33175
  } : {};
33150
- function clamp(value, min, max) {
33151
- return Math.max(min, max === void 0 ? value : Math.min(value, max));
33152
- }
33153
33176
  var Counter = forwardRef(function Counter2({
33154
33177
  value,
33155
33178
  defaultValue,
@@ -33167,16 +33190,16 @@ var Counter = forwardRef(function Counter2({
33167
33190
  const containerRef = useRef(null);
33168
33191
  const isControlled = value !== void 0;
33169
33192
  const [uncontrolledValue, setUncontrolledValue] = useState(
33170
- () => clamp(defaultValue ?? min, min, max)
33193
+ () => clampCounterValue(defaultValue ?? min, min, max)
33171
33194
  );
33172
- const resolvedValue = clamp(isControlled ? value : uncontrolledValue, min, max);
33195
+ const resolvedValue = resolveCounterValue(value, uncontrolledValue, min, max);
33173
33196
  const resolvedClassName = className?.trim() || void 0;
33174
33197
  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
33175
33198
  const decrementDisabled = disabled || resolvedValue <= min;
33176
33199
  const incrementDisabled = disabled || max !== void 0 && resolvedValue >= max;
33177
33200
  useApplyWebClassName(containerRef, resolvedClassName);
33178
- const updateValue = (nextValue) => {
33179
- const next = clamp(nextValue, min, max);
33201
+ const updateValue = (delta) => {
33202
+ const next = stepCounterValue(resolvedValue, delta, min, max);
33180
33203
  if (next === resolvedValue) return;
33181
33204
  if (!isControlled) setUncontrolledValue(next);
33182
33205
  onValueChange?.(next);
@@ -33186,7 +33209,7 @@ var Counter = forwardRef(function Counter2({
33186
33209
  {
33187
33210
  disabled: decrementDisabled,
33188
33211
  hitSlop,
33189
- onPress: () => updateValue(resolvedValue - step),
33212
+ onPress: () => updateValue(-step),
33190
33213
  accessibilityRole: "button",
33191
33214
  accessibilityLabel: "Decrease value",
33192
33215
  accessibilityState: { disabled: decrementDisabled },
@@ -33199,7 +33222,7 @@ var Counter = forwardRef(function Counter2({
33199
33222
  {
33200
33223
  disabled: incrementDisabled,
33201
33224
  hitSlop,
33202
- onPress: () => updateValue(resolvedValue + step),
33225
+ onPress: () => updateValue(step),
33203
33226
  accessibilityRole: "button",
33204
33227
  accessibilityLabel: "Increase value",
33205
33228
  accessibilityState: { disabled: incrementDisabled },
@@ -34482,6 +34505,15 @@ var styles25 = StyleSheet.create({
34482
34505
  top: 0
34483
34506
  }
34484
34507
  });
34508
+
34509
+ // src/utils/webToggleKey.ts
34510
+ function handleWebToggleKeyDown(event, onToggle) {
34511
+ const isSpace = event.key === " " || event.key === "Spacebar";
34512
+ if (!isSpace || event.target !== event.currentTarget) return false;
34513
+ event.preventDefault();
34514
+ if (!event.repeat) onToggle();
34515
+ return true;
34516
+ }
34485
34517
  var BOX_SIZE = 20;
34486
34518
  var BOX_RADIUS = 6;
34487
34519
  var CHECK_SIZE = 12;
@@ -34537,6 +34569,8 @@ var Checkbox = forwardRef(function Checkbox2({
34537
34569
  accessibilityRole: "checkbox",
34538
34570
  accessibilityLabel: resolvedAccessibilityLabel,
34539
34571
  accessibilityState: { checked: isActive, disabled },
34572
+ "aria-checked": isActive,
34573
+ ...Platform.OS === "web" && !disabled ? { onKeyDown: (event) => handleWebToggleKeyDown(event, handlePress) } : null,
34540
34574
  style: [styles26.root, disabled && styles26.disabled, style],
34541
34575
  children: [
34542
34576
  /* @__PURE__ */ jsx(
@@ -34630,8 +34664,23 @@ function abbreviateMonthName(monthName, letterCount = 3) {
34630
34664
  }
34631
34665
  return chars.slice(0, end).join("");
34632
34666
  }
34667
+ function abbreviateMonthNames(monthNames, letterCount = 3) {
34668
+ return monthNames.map((name, index) => {
34669
+ const maxLetters = abbreviatedLetterCount(name);
34670
+ let count = letterCount;
34671
+ while (count < maxLetters && monthNames.some(
34672
+ (other, otherIndex) => otherIndex !== index && abbreviateMonthName(other, count) === abbreviateMonthName(name, count)
34673
+ )) {
34674
+ count += 1;
34675
+ }
34676
+ return abbreviateMonthName(name, count);
34677
+ });
34678
+ }
34679
+ function abbreviatedLetterCount(monthName) {
34680
+ return Array.from(monthName.replace(/ու/g, "u")).length;
34681
+ }
34633
34682
  function formatDateDayShortMonth(date, monthNames, letterCount = 3) {
34634
- const month = abbreviateMonthName(monthNames[date.getMonth()] ?? "", letterCount);
34683
+ const month = abbreviateMonthNames(monthNames, letterCount)[date.getMonth()] ?? "";
34635
34684
  return `${date.getDate()} ${month} ${date.getFullYear()}`;
34636
34685
  }
34637
34686
  function getMonthMatrix(monthDate, weekStartsOn = 1) {
@@ -34655,6 +34704,78 @@ function getMonthMatrix(monthDate, weekStartsOn = 1) {
34655
34704
  }
34656
34705
  return weeks;
34657
34706
  }
34707
+
34708
+ // src/utils/overlayStack.ts
34709
+ function createOverlayStack(target) {
34710
+ const layers = [];
34711
+ const top = (kind) => {
34712
+ for (let index = layers.length - 1; index >= 0; index -= 1) {
34713
+ if (layers[index].kind === kind) return layers[index];
34714
+ }
34715
+ return void 0;
34716
+ };
34717
+ const handleCapture = (event) => {
34718
+ const layer = top("popover");
34719
+ if (event.key !== "Escape" || event.defaultPrevented || !layer) return;
34720
+ event.preventDefault();
34721
+ event.stopImmediatePropagation();
34722
+ layer.onEscape();
34723
+ };
34724
+ const handleBubble = (event) => {
34725
+ const layer = top("overlay");
34726
+ if (event.key !== "Escape" || event.defaultPrevented || !layer) return;
34727
+ event.preventDefault();
34728
+ layer.onEscape();
34729
+ };
34730
+ return {
34731
+ push(layer) {
34732
+ layers.push(layer);
34733
+ if (layers.length === 1) {
34734
+ target.addEventListener("keydown", handleCapture, true);
34735
+ target.addEventListener("keydown", handleBubble, false);
34736
+ }
34737
+ return () => {
34738
+ const index = layers.indexOf(layer);
34739
+ if (index === -1) return;
34740
+ layers.splice(index, 1);
34741
+ if (layers.length === 0) {
34742
+ target.removeEventListener("keydown", handleCapture, true);
34743
+ target.removeEventListener("keydown", handleBubble, false);
34744
+ }
34745
+ };
34746
+ },
34747
+ isTop: (layer) => top(layer.kind) === layer
34748
+ };
34749
+ }
34750
+ var documentStack = null;
34751
+ function getDocumentOverlayStack() {
34752
+ if (!documentStack) {
34753
+ documentStack = createOverlayStack(document);
34754
+ }
34755
+ return documentStack;
34756
+ }
34757
+
34758
+ // src/utils/useOverlayLayer.ts
34759
+ function useOverlayLayer(kind, active, onEscape) {
34760
+ const onEscapeRef = useRef(onEscape);
34761
+ onEscapeRef.current = onEscape;
34762
+ const layerRef = useRef(null);
34763
+ useEffect(() => {
34764
+ if (!active || Platform.OS !== "web" || typeof document === "undefined") return void 0;
34765
+ const layer = { kind, onEscape: () => onEscapeRef.current() };
34766
+ const stack = getDocumentOverlayStack();
34767
+ const remove = stack.push(layer);
34768
+ layerRef.current = layer;
34769
+ return () => {
34770
+ remove();
34771
+ if (layerRef.current === layer) layerRef.current = null;
34772
+ };
34773
+ }, [active, kind]);
34774
+ return useCallback(() => {
34775
+ const layer = layerRef.current;
34776
+ return layer !== null && getDocumentOverlayStack().isTop(layer);
34777
+ }, []);
34778
+ }
34658
34779
  var DEFAULT_MONTH_NAMES = [
34659
34780
  "\u0540\u0578\u0582\u0576\u057E\u0561\u0580",
34660
34781
  "\u0553\u0565\u057F\u0580\u057E\u0561\u0580",
@@ -34849,17 +34970,7 @@ var DatePicker = forwardRef(
34849
34970
  setOpen(false);
34850
34971
  focusTrigger();
34851
34972
  }, [focusTrigger, setOpen]);
34852
- useEffect(() => {
34853
- if (Platform.OS !== "web" || !isOpen) return;
34854
- const handleKeyDown = (event) => {
34855
- if (event.key === "Escape") {
34856
- event.preventDefault();
34857
- closeAndFocusTrigger();
34858
- }
34859
- };
34860
- document.addEventListener("keydown", handleKeyDown);
34861
- return () => document.removeEventListener("keydown", handleKeyDown);
34862
- }, [isOpen, closeAndFocusTrigger]);
34973
+ useOverlayLayer("popover", isOpen, closeAndFocusTrigger);
34863
34974
  const handleTriggerPress = () => {
34864
34975
  if (disabled) return;
34865
34976
  setOpen(!isOpen);
@@ -34949,6 +35060,7 @@ var DatePicker = forwardRef(
34949
35060
  accessibilityRole: "button",
34950
35061
  accessibilityLabel: resolvedAccessibilityLabel,
34951
35062
  accessibilityState: { disabled, expanded: isOpen },
35063
+ "aria-expanded": isOpen,
34952
35064
  style: [
34953
35065
  styles27.trigger,
34954
35066
  usesRangeTrigger && styles27.rangeTrigger,
@@ -35507,6 +35619,78 @@ var styles28 = StyleSheet.create({
35507
35619
 
35508
35620
  // src/components/Modal/Modal.tsx
35509
35621
  var import_react_dom = __toESM(require_react_dom());
35622
+ var subscribe = () => () => {
35623
+ };
35624
+ var getClientSnapshot = () => true;
35625
+ var getServerSnapshot = () => false;
35626
+ function useHydrated() {
35627
+ return useSyncExternalStore(subscribe, getClientSnapshot, getServerSnapshot);
35628
+ }
35629
+
35630
+ // src/utils/focusTrap.ts
35631
+ var TABBABLE_SELECTOR = [
35632
+ "a[href]",
35633
+ "area[href]",
35634
+ "button",
35635
+ "input:not([type='hidden'])",
35636
+ "select",
35637
+ "textarea",
35638
+ "iframe",
35639
+ "[contenteditable='true']",
35640
+ "[tabindex]"
35641
+ ].join(",");
35642
+ function getTabbableElements(container) {
35643
+ return Array.from(container.querySelectorAll(TABBABLE_SELECTOR)).filter(
35644
+ (element) => element.tabIndex >= 0 && !element.hasAttribute("disabled") && element.getAttribute("aria-hidden") !== "true" && element.getClientRects().length > 0
35645
+ );
35646
+ }
35647
+ function getWrappedFocusIndex(count, currentIndex, backwards) {
35648
+ if (count === 0) return null;
35649
+ if (currentIndex === -1) return backwards ? count - 1 : 0;
35650
+ if (backwards && currentIndex === 0) return count - 1;
35651
+ if (!backwards && currentIndex === count - 1) return 0;
35652
+ return null;
35653
+ }
35654
+
35655
+ // src/utils/useWebFocusTrap.ts
35656
+ function useWebFocusTrap(containerRef, active, isTopLayer) {
35657
+ useEffect(() => {
35658
+ if (!active || Platform.OS !== "web" || typeof document === "undefined") return void 0;
35659
+ const container = containerRef.current;
35660
+ if (!container) return void 0;
35661
+ const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
35662
+ if (!container.contains(document.activeElement)) container.focus({ preventScroll: true });
35663
+ const handleKeyDown = (event) => {
35664
+ if (event.key !== "Tab" || event.defaultPrevented || !isTopLayer()) return;
35665
+ const activeElement = document.activeElement;
35666
+ if (activeElement !== null && activeElement !== document.body && !container.contains(activeElement)) {
35667
+ return;
35668
+ }
35669
+ const tabbables = getTabbableElements(container);
35670
+ if (tabbables.length === 0) {
35671
+ event.preventDefault();
35672
+ container.focus({ preventScroll: true });
35673
+ return;
35674
+ }
35675
+ const nextIndex = getWrappedFocusIndex(
35676
+ tabbables.length,
35677
+ tabbables.indexOf(activeElement),
35678
+ event.shiftKey
35679
+ );
35680
+ if (nextIndex === null) return;
35681
+ event.preventDefault();
35682
+ tabbables[nextIndex].focus();
35683
+ };
35684
+ document.addEventListener("keydown", handleKeyDown);
35685
+ return () => {
35686
+ document.removeEventListener("keydown", handleKeyDown);
35687
+ const current = document.activeElement;
35688
+ if (previouslyFocused?.isConnected && (current === null || current === document.body || container.contains(current))) {
35689
+ previouslyFocused.focus({ preventScroll: true });
35690
+ }
35691
+ };
35692
+ }, [active, containerRef, isTopLayer]);
35693
+ }
35510
35694
  var BACKDROP_COLOR = "#09090933";
35511
35695
  var WEB_Z_INDEX = 500;
35512
35696
  var webBackdropDomStyle = {
@@ -35534,6 +35718,13 @@ var webRootDomStyle = {
35534
35718
  alignItems: "center",
35535
35719
  justifyContent: "center"
35536
35720
  };
35721
+ var webDialogDomStyle = {
35722
+ position: "relative",
35723
+ zIndex: 1,
35724
+ maxWidth: "100%",
35725
+ maxHeight: "100%",
35726
+ outline: "none"
35727
+ };
35537
35728
  var Modal = forwardRef(function Modal2({
35538
35729
  open,
35539
35730
  onClose,
@@ -35544,22 +35735,22 @@ var Modal = forwardRef(function Modal2({
35544
35735
  className
35545
35736
  }, forwardedRef) {
35546
35737
  const contentRef = useRef(null);
35738
+ const dialogRef = useRef(null);
35547
35739
  const setContentRef = useMemo(() => mergeRefs(contentRef, forwardedRef), [forwardedRef]);
35548
35740
  const resolvedClassName = className?.trim() || void 0;
35549
- useApplyWebClassName(contentRef, resolvedClassName, open && Platform.OS === "web");
35741
+ const hydrated = useHydrated();
35742
+ const webOpen = open && hydrated && Platform.OS === "web";
35743
+ useApplyWebClassName(contentRef, resolvedClassName, webOpen);
35550
35744
  useEffect(() => {
35551
- if (!open || Platform.OS !== "web") return void 0;
35745
+ if (!webOpen) return void 0;
35552
35746
  const previousOverflow = document.body.style.overflow;
35553
35747
  document.body.style.overflow = "hidden";
35554
- const onKeyDown = (event) => {
35555
- if (event.key === "Escape") onClose();
35556
- };
35557
- document.addEventListener("keydown", onKeyDown);
35558
35748
  return () => {
35559
35749
  document.body.style.overflow = previousOverflow;
35560
- document.removeEventListener("keydown", onKeyDown);
35561
35750
  };
35562
- }, [open, onClose]);
35751
+ }, [webOpen]);
35752
+ const isTopLayer = useOverlayLayer("overlay", webOpen, onClose);
35753
+ useWebFocusTrap(dialogRef, webOpen, isTopLayer);
35563
35754
  const content = /* @__PURE__ */ jsx(
35564
35755
  View,
35565
35756
  {
@@ -35570,7 +35761,7 @@ var Modal = forwardRef(function Modal2({
35570
35761
  }
35571
35762
  );
35572
35763
  if (Platform.OS === "web") {
35573
- if (!open || typeof document === "undefined") return null;
35764
+ if (!webOpen) return null;
35574
35765
  return (0, import_react_dom.createPortal)(
35575
35766
  /* @__PURE__ */ jsxs("div", { style: webRootDomStyle, role: "presentation", children: [
35576
35767
  /* @__PURE__ */ jsx(
@@ -35583,7 +35774,16 @@ var Modal = forwardRef(function Modal2({
35583
35774
  style: webBackdropDomStyle
35584
35775
  }
35585
35776
  ),
35586
- /* @__PURE__ */ jsx("div", { style: { position: "relative", zIndex: 1, maxWidth: "100%", maxHeight: "100%" }, children: content })
35777
+ /* @__PURE__ */ jsx(
35778
+ "div",
35779
+ {
35780
+ ref: dialogRef,
35781
+ role: "dialog",
35782
+ tabIndex: -1,
35783
+ style: webDialogDomStyle,
35784
+ children: content
35785
+ }
35786
+ )
35587
35787
  ] }),
35588
35788
  document.body
35589
35789
  );
@@ -35658,20 +35858,18 @@ var Drawer = forwardRef(function Drawer2({
35658
35858
  const [entered, setEntered] = useState(false);
35659
35859
  const animatedWidth = useRef(new Animated.Value(open ? width : 0)).current;
35660
35860
  const animatedBackdrop = useRef(new Animated.Value(open ? 1 : 0)).current;
35661
- useApplyWebClassName(panelRef, resolvedClassName, mounted && Platform.OS === "web");
35861
+ const hydrated = useHydrated();
35862
+ const webMounted = mounted && hydrated && Platform.OS === "web";
35863
+ useApplyWebClassName(panelRef, resolvedClassName, webMounted);
35662
35864
  useEffect(() => {
35663
- if (!mounted || Platform.OS !== "web") return void 0;
35865
+ if (!webMounted) return void 0;
35664
35866
  const previousOverflow = document.body.style.overflow;
35665
35867
  document.body.style.overflow = "hidden";
35666
- const onKeyDown = (event) => {
35667
- if (event.key === "Escape") onClose();
35668
- };
35669
- document.addEventListener("keydown", onKeyDown);
35670
35868
  return () => {
35671
35869
  document.body.style.overflow = previousOverflow;
35672
- document.removeEventListener("keydown", onKeyDown);
35673
35870
  };
35674
- }, [mounted, onClose]);
35871
+ }, [webMounted]);
35872
+ useOverlayLayer("overlay", webMounted && open, onClose);
35675
35873
  const targetWidth = Math.min(width, typeof window !== "undefined" ? window.innerWidth : width);
35676
35874
  const playWidth = useCallback(
35677
35875
  (target) => {
@@ -35712,7 +35910,7 @@ var Drawer = forwardRef(function Drawer2({
35712
35910
  };
35713
35911
  }, [open, animationDuration, playWidth]);
35714
35912
  useEffect(() => {
35715
- if (Platform.OS !== "web" || !mounted || !open) return void 0;
35913
+ if (!webMounted || !open) return void 0;
35716
35914
  const shell = shellRef.current;
35717
35915
  if (shell) {
35718
35916
  shell.style.transition = "none";
@@ -35725,7 +35923,7 @@ var Drawer = forwardRef(function Drawer2({
35725
35923
  });
35726
35924
  });
35727
35925
  return () => cancelAnimationFrame(frame);
35728
- }, [mounted, open, targetWidth, playWidth]);
35926
+ }, [webMounted, open, targetWidth, playWidth]);
35729
35927
  useEffect(() => {
35730
35928
  if (Platform.OS === "web") return void 0;
35731
35929
  if (open) {
@@ -35806,7 +36004,7 @@ var Drawer = forwardRef(function Drawer2({
35806
36004
  }
35807
36005
  );
35808
36006
  if (Platform.OS === "web") {
35809
- if (!mounted || typeof document === "undefined") return null;
36007
+ if (!webMounted) return null;
35810
36008
  return (0, import_react_dom2.createPortal)(
35811
36009
  /* @__PURE__ */ jsxs(
35812
36010
  "div",
@@ -36506,21 +36704,42 @@ var styles32 = StyleSheet.create({
36506
36704
  function normalizeVerificationCode(value, length) {
36507
36705
  return value.replace(/\D/g, "").slice(0, Math.max(1, length));
36508
36706
  }
36509
- function updateVerificationCode(currentCode, index, input, length) {
36707
+ function toVerificationCells(code, length) {
36708
+ const safeLength = Math.max(1, length);
36709
+ const digits = normalizeVerificationCode(code, safeLength);
36710
+ return Array.from({ length: safeLength }, (_, index) => digits[index] ?? "");
36711
+ }
36712
+ function verificationCellsToCode(cells) {
36713
+ return cells.join("");
36714
+ }
36715
+ function isVerificationCodeComplete(cells) {
36716
+ return cells.length > 0 && cells.every((cell) => cell !== "");
36717
+ }
36718
+ function reconcileVerificationCells(cells, code, length) {
36719
+ const safeLength = Math.max(1, length);
36720
+ const normalized = normalizeVerificationCode(code, safeLength);
36721
+ if (cells.length === safeLength && verificationCellsToCode(cells) === normalized) {
36722
+ return [...cells];
36723
+ }
36724
+ return toVerificationCells(normalized, safeLength);
36725
+ }
36726
+ function updateVerificationCells(currentCells, index, input, length) {
36510
36727
  const safeLength = Math.max(1, length);
36511
36728
  const safeIndex = Math.min(Math.max(0, index), safeLength - 1);
36512
- const current = normalizeVerificationCode(currentCode, safeLength);
36729
+ const cells = Array.from({ length: safeLength }, (_, cellIndex) => {
36730
+ const cell = currentCells[cellIndex] ?? "";
36731
+ return /^\d$/.test(cell) ? cell : "";
36732
+ });
36513
36733
  const insertedDigits = normalizeVerificationCode(input, safeLength - safeIndex);
36514
36734
  if (!insertedDigits) {
36515
- return {
36516
- code: `${current.slice(0, safeIndex)}${current.slice(safeIndex + 1)}`,
36517
- nextFocus: safeIndex
36518
- };
36735
+ cells[safeIndex] = "";
36736
+ return { cells, nextFocus: safeIndex };
36519
36737
  }
36738
+ Array.from(insertedDigits).forEach((digit, offset) => {
36739
+ cells[safeIndex + offset] = digit;
36740
+ });
36520
36741
  return {
36521
- code: `${current.slice(0, safeIndex)}${insertedDigits}${current.slice(
36522
- safeIndex + insertedDigits.length
36523
- )}`.slice(0, safeLength),
36742
+ cells,
36524
36743
  nextFocus: Math.min(safeIndex + insertedDigits.length, safeLength - 1)
36525
36744
  };
36526
36745
  }
@@ -36551,17 +36770,17 @@ var VerificationCodeInput = forwardRef(function VerificationCodeInput2({
36551
36770
  }, forwardedRef) {
36552
36771
  const safeLength = Math.max(1, Math.floor(length));
36553
36772
  const isControlled = typeof value === "string";
36554
- const [uncontrolledValue, setUncontrolledValue] = useState(
36555
- () => normalizeVerificationCode(defaultValue, safeLength)
36556
- );
36773
+ const [cellsState, setCellsState] = useState(() => toVerificationCells(defaultValue, safeLength));
36557
36774
  const [focusedIndex, setFocusedIndex] = useState(null);
36558
36775
  const { width: viewportWidth } = useWindowDimensions();
36559
36776
  const rootRef = useRef(null);
36560
36777
  const inputRefs = useRef([]);
36561
- const currentCode = normalizeVerificationCode(
36562
- isControlled ? value : uncontrolledValue,
36778
+ const cells = reconcileVerificationCells(
36779
+ cellsState,
36780
+ isControlled ? value : verificationCellsToCode(cellsState),
36563
36781
  safeLength
36564
36782
  );
36783
+ const currentCode = verificationCellsToCode(cells);
36565
36784
  useApplyWebClassName(rootRef, className);
36566
36785
  const focus = useCallback(
36567
36786
  (index = 0) => {
@@ -36571,39 +36790,37 @@ var VerificationCodeInput = forwardRef(function VerificationCodeInput2({
36571
36790
  [safeLength]
36572
36791
  );
36573
36792
  const commit = useCallback(
36574
- (nextValue) => {
36575
- const normalized = normalizeVerificationCode(nextValue, safeLength);
36576
- if (!isControlled) {
36577
- setUncontrolledValue(normalized);
36578
- }
36579
- onValueChange?.(normalized);
36580
- if (normalized.length === safeLength) {
36581
- onComplete?.(normalized);
36793
+ (nextCells) => {
36794
+ setCellsState(nextCells);
36795
+ const code = verificationCellsToCode(nextCells);
36796
+ onValueChange?.(code);
36797
+ if (isVerificationCodeComplete(nextCells)) {
36798
+ onComplete?.(code);
36582
36799
  }
36583
36800
  },
36584
- [isControlled, onComplete, onValueChange, safeLength]
36801
+ [onComplete, onValueChange]
36585
36802
  );
36586
36803
  useImperativeHandle(
36587
36804
  forwardedRef,
36588
36805
  () => ({
36589
36806
  clear: () => {
36590
- commit("");
36807
+ commit(toVerificationCells("", safeLength));
36591
36808
  focus(0);
36592
36809
  },
36593
36810
  focus
36594
36811
  }),
36595
- [commit, focus]
36812
+ [commit, focus, safeLength]
36596
36813
  );
36597
36814
  const handleChange = (index, input) => {
36598
- const update = updateVerificationCode(currentCode, index, input, safeLength);
36599
- commit(update.code);
36815
+ const update = updateVerificationCells(cells, index, input, safeLength);
36816
+ commit(update.cells);
36600
36817
  focus(update.nextFocus);
36601
36818
  };
36602
36819
  const handleKeyPress = (index, event) => {
36603
36820
  const key = event.nativeEvent.key;
36604
- if (key === "Backspace" && !currentCode[index] && index > 0) {
36605
- const update = updateVerificationCode(currentCode, index - 1, "", safeLength);
36606
- commit(update.code);
36821
+ if (key === "Backspace" && !cells[index] && index > 0) {
36822
+ const update = updateVerificationCells(cells, index - 1, "", safeLength);
36823
+ commit(update.cells);
36607
36824
  focus(index - 1);
36608
36825
  return;
36609
36826
  }
@@ -36671,7 +36888,7 @@ var VerificationCodeInput = forwardRef(function VerificationCodeInput2({
36671
36888
  Platform.OS === "android" ? styles33.cellAndroid : null,
36672
36889
  inputStyle
36673
36890
  ],
36674
- value: currentCode[index] ?? ""
36891
+ value: cells[index] ?? ""
36675
36892
  },
36676
36893
  index
36677
36894
  );
@@ -36757,6 +36974,9 @@ var FALLBACK_ELLIPSIS_WIDTH = 20;
36757
36974
  var WEB_MENU_Z_INDEX = 600;
36758
36975
  var WEB_VIEWPORT_PADDING = 8;
36759
36976
  var WEB_MENU_GAP = 8;
36977
+ function webListboxProps(multiple) {
36978
+ return { role: "listbox", "aria-multiselectable": multiple };
36979
+ }
36760
36980
  function itemBackground(state) {
36761
36981
  switch (state) {
36762
36982
  case "hover":
@@ -37070,6 +37290,7 @@ var Select = forwardRef(
37070
37290
  setOpen(false);
37071
37291
  focusTrigger();
37072
37292
  }, [focusTrigger, setOpen]);
37293
+ useOverlayLayer("popover", isOpen, closeAndFocusTrigger);
37073
37294
  useEffect(() => {
37074
37295
  if (Platform.OS !== "web") return;
37075
37296
  const isTriggerFocused = () => document.activeElement === triggerRef.current;
@@ -37083,11 +37304,6 @@ var Select = forwardRef(
37083
37304
  }
37084
37305
  return;
37085
37306
  }
37086
- if (event.key === "Escape") {
37087
- event.preventDefault();
37088
- closeAndFocusTrigger();
37089
- return;
37090
- }
37091
37307
  if (event.key === "ArrowDown" || event.key === "ArrowUp") {
37092
37308
  event.preventDefault();
37093
37309
  setHoveredValue((current) => {
@@ -37125,7 +37341,6 @@ var Select = forwardRef(
37125
37341
  filteredOptions,
37126
37342
  hoveredValue,
37127
37343
  multiple,
37128
- closeAndFocusTrigger,
37129
37344
  focusTrigger,
37130
37345
  handleSelect,
37131
37346
  setOpen
@@ -37192,6 +37407,7 @@ var Select = forwardRef(
37192
37407
  contentContainerStyle: styles34.optionListContent,
37193
37408
  keyboardShouldPersistTaps: "handled",
37194
37409
  showsVerticalScrollIndicator: false,
37410
+ ...Platform.OS === "web" ? webListboxProps(multiple) : null,
37195
37411
  children: [
37196
37412
  loading ? /* @__PURE__ */ jsx(View, { style: styles34.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles34.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx(View, { style: styles34.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles34.statusText, children: emptyText }) }) : null,
37197
37413
  !loading && filteredOptions.map((option) => {
@@ -37209,6 +37425,8 @@ var Select = forwardRef(
37209
37425
  onPressOut: () => setHoveredValue((current) => current === option.value ? null : current),
37210
37426
  accessibilityRole: multiple ? "checkbox" : "button",
37211
37427
  accessibilityState: { selected: isSelected, checked: isSelected, disabled },
37428
+ role: Platform.OS === "web" ? "option" : void 0,
37429
+ "aria-selected": isSelected,
37212
37430
  style: [
37213
37431
  styles34.item,
37214
37432
  {
@@ -37249,6 +37467,7 @@ var Select = forwardRef(
37249
37467
  accessibilityRole: "combobox",
37250
37468
  accessibilityLabel: resolvedAccessibilityLabel,
37251
37469
  accessibilityState: { disabled, expanded: isOpen },
37470
+ "aria-expanded": isOpen,
37252
37471
  style: [
37253
37472
  styles34.trigger,
37254
37473
  {
@@ -37732,6 +37951,8 @@ var Toggle = forwardRef(function Toggle2({
37732
37951
  accessibilityRole: "switch",
37733
37952
  accessibilityLabel: resolvedAccessibilityLabel,
37734
37953
  accessibilityState: { checked: isActive, disabled },
37954
+ "aria-checked": isActive,
37955
+ ...Platform.OS === "web" && !disabled ? { onKeyDown: (event) => handleWebToggleKeyDown(event, handlePress) } : null,
37735
37956
  style: [styles36.pressable, disabled && styles36.disabled, style],
37736
37957
  children: [
37737
37958
  /* @__PURE__ */ jsx(
@@ -37883,7 +38104,7 @@ var BASE_ITEM_SIZE = 16;
37883
38104
  var ICON_WIDTH_RATIO = 12.57 / BASE_ITEM_SIZE;
37884
38105
  var ICON_HEIGHT_RATIO = 11.98 / BASE_ITEM_SIZE;
37885
38106
  var STAR_GAP_RATIO = 2 / BASE_ITEM_SIZE;
37886
- function clamp2(value) {
38107
+ function clamp(value) {
37887
38108
  return Math.max(0, Math.min(value, STAR_COUNT));
37888
38109
  }
37889
38110
  var RatingInput = forwardRef(
@@ -37907,8 +38128,8 @@ var RatingInput = forwardRef(
37907
38128
  const containerRef = useRef(null);
37908
38129
  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
37909
38130
  const isControlled = value !== void 0;
37910
- const [uncontrolledValue, setUncontrolledValue] = useState(() => clamp2(defaultValue));
37911
- const selectedValue = clamp2(isControlled ? value : uncontrolledValue);
38131
+ const [uncontrolledValue, setUncontrolledValue] = useState(() => clamp(defaultValue));
38132
+ const selectedValue = clamp(isControlled ? value : uncontrolledValue);
37912
38133
  const selectedStarCount = Math.round(selectedValue);
37913
38134
  const iconWidth = size * ICON_WIDTH_RATIO;
37914
38135
  const iconHeight = size * ICON_HEIGHT_RATIO;
@@ -39071,6 +39292,12 @@ var RadioButton = forwardRef(
39071
39292
  accessibilityRole: "radio",
39072
39293
  accessibilityLabel: resolvedAccessibilityLabel,
39073
39294
  accessibilityState: { selected: isActive, disabled },
39295
+ ...Platform.OS === "web" ? {
39296
+ "aria-checked": isActive,
39297
+ ...disabled ? null : {
39298
+ onKeyDown: (event) => handleWebToggleKeyDown(event, handlePress)
39299
+ }
39300
+ } : null,
39074
39301
  style: [styles42.root, disabled && styles42.disabled, style],
39075
39302
  children: [
39076
39303
  /* @__PURE__ */ jsx(View, { style: styles42.control, children: isActive ? /* @__PURE__ */ jsx(View, { style: styles42.dot }) : null }),
@@ -39222,6 +39449,6 @@ react-dom/cjs/react-dom.development.js:
39222
39449
  *)
39223
39450
  */
39224
39451
 
39225
- export { Accordion, AccordionItem, AccountHeader, ActiveGuestsIcon, AlertTriangleIcon, Amenity, AmenityIcon, AppleIcon, AreaExpandIcon, ArrowLeftIcon, ArrowRightIcon, AutocompleteInput, Avatar, AvatarSimple, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, BackspaceIcon, Badge, BagIcon, BanIcon, BathroomsIcon, BedroomsIcon, BellIcon, BlockedGuestsIcon, BookingWarningNotification, BrandLogo, BuildingIcon, Button, CalendarFilledIcon, CalendarIcon, CalendarMinusIcon, CalendarOutlineIcon, CameraFilledIcon, CameraIcon, CancelledBookingNotification, CardLocationIcon, CheckBadgeIcon, CheckIcon, CheckSuccessIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ClockFilledIcon, ClockIcon, CloseIcon, CloudUploadIcon, CommentCard, ContactInfoCard, CopyIcon, Counter, CurrentLocationIcon, CutleryIcon, DatePicker, DeactivateIcon, DollarIcon, DoubleCheckIcon, DownloadIcon, DragHandleIcon, DramIcon, Drawer, EditIcon, ExternalLinkIcon, EyeIcon, FacebookIcon, FavoritesButton, FiltersIcon, FingerprintIcon, FloatingActionButton, FullscreenIcon, GlobeIcon, GoogleBrandIcon, GooglePlayIcon, GuestCheckInNotification, GuestsIcon, HeadsetIcon, HeartIcon, HelpCircleIcon, HideIcon, HomeIcon, Icon, IconStatusBadge, ImageIcon, InfoCardV2, InfoCircleIcon, InfoTile, Input, InstagramIcon, KeyIcon, LanguageSwitcher, LayoutGridIcon, LinkedInIcon, ListViewIcon, LocationPinIcon, LocationUserIcon, LockIcon, LogOutIcon, MailIcon, MapCollapseIcon, MapExpandIcon, MapViewIcon, MenuIcon, MenuItem, MenuLinesIcon, MinusIcon, Modal, MoonStarsIcon, MoreHorizontalIcon, NavigateIcon, NewBookingNotification, NoPetsIcon, NoReviewIcon, NoSmokingIcon, NotificationCancelledIcon, NotificationCheckoutIcon, NotificationQrCodeIcon, NotificationStatusSkeleton, NotificationSuccessIcon, NotificationWarningIcon, PaginationDots, PawIcon, PhoneIcon, PlusIcon, QrCodeIcon, QrKeyNotification, QuantityInput, QuietHoursIcon, RadioButton, Range, RatingInput, RatingStarIcon, RefreshIcon, RefundStatusIcon, SaveHeartIcon, SearchIcon, SegmentedToggle, Select, SettingsIcon, ShareIcon, ShowIcon, Sidebar, SidebarIcon, SmartKeyIcon, SortIcon, StarFilledIcon, StarIcon, StarOutlineIcon, StatCard, StatusBadge, StatusIndicator, StayHomeIcon, StepList, StepPager, SunIcon, TableViewIcon, Textarea, Toggle, ToggleRow, TooltipArrowIcon, TotalGuestsIcon, TrashIcon, UnlockIcon, UserIcon, UsersAltIcon, VerificationCodeInput, VideoIcon, VideoOffIcon, WasherIcon, WhatsAppIcon, ZoomOutIcon, abbreviateMonthName, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, formatDate, formatDateDayShortMonth, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, resolvePopoverAlign, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
39452
+ export { Accordion, AccordionItem, AccountHeader, ActiveGuestsIcon, AlertTriangleIcon, Amenity, AmenityIcon, AppleIcon, AreaExpandIcon, ArrowLeftIcon, ArrowRightIcon, AutocompleteInput, Avatar, AvatarSimple, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, BackspaceIcon, Badge, BagIcon, BanIcon, BathroomsIcon, BedroomsIcon, BellIcon, BlockedGuestsIcon, BookingWarningNotification, BrandLogo, BuildingIcon, Button, CalendarFilledIcon, CalendarIcon, CalendarMinusIcon, CalendarOutlineIcon, CameraFilledIcon, CameraIcon, CancelledBookingNotification, CardLocationIcon, CheckBadgeIcon, CheckIcon, CheckSuccessIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ClockFilledIcon, ClockIcon, CloseIcon, CloudUploadIcon, CommentCard, ContactInfoCard, CopyIcon, Counter, CurrentLocationIcon, CutleryIcon, DatePicker, DeactivateIcon, DollarIcon, DoubleCheckIcon, DownloadIcon, DragHandleIcon, DramIcon, Drawer, EditIcon, ExternalLinkIcon, EyeIcon, FacebookIcon, FavoritesButton, FiltersIcon, FingerprintIcon, FloatingActionButton, FullscreenIcon, GlobeIcon, GoogleBrandIcon, GooglePlayIcon, GuestCheckInNotification, GuestsIcon, HeadsetIcon, HeartIcon, HelpCircleIcon, HideIcon, HomeIcon, Icon, IconStatusBadge, ImageIcon, InfoCardV2, InfoCircleIcon, InfoTile, Input, InstagramIcon, KeyIcon, LanguageSwitcher, LayoutGridIcon, LinkedInIcon, ListViewIcon, LocationPinIcon, LocationUserIcon, LockIcon, LogOutIcon, MailIcon, MapCollapseIcon, MapExpandIcon, MapViewIcon, MenuIcon, MenuItem, MenuLinesIcon, MinusIcon, Modal, MoonStarsIcon, MoreHorizontalIcon, NavigateIcon, NewBookingNotification, NoPetsIcon, NoReviewIcon, NoSmokingIcon, NotificationCancelledIcon, NotificationCheckoutIcon, NotificationQrCodeIcon, NotificationStatusSkeleton, NotificationSuccessIcon, NotificationWarningIcon, PaginationDots, PawIcon, PaymentCardIcon, PhoneIcon, PlusIcon, QrCodeIcon, QrKeyNotification, QuantityInput, QuietHoursIcon, RadioButton, Range, RatingInput, RatingStarIcon, ReceiptIcon, RefreshIcon, RefundStatusIcon, SaveHeartIcon, SearchIcon, SegmentedToggle, Select, SettingsIcon, ShareIcon, ShowIcon, Sidebar, SidebarIcon, SmartKeyIcon, SortIcon, StarFilledIcon, StarIcon, StarOutlineIcon, StatCard, StatusBadge, StatusIndicator, StayHomeIcon, StepList, StepPager, SunIcon, TableViewIcon, Textarea, Toggle, ToggleRow, TooltipArrowIcon, TotalGuestsIcon, TrashIcon, UnlockIcon, UserIcon, UsersAltIcon, VerificationCodeInput, VideoIcon, VideoOffIcon, WasherIcon, WhatsAppIcon, ZoomOutIcon, abbreviateMonthName, abbreviateMonthNames, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, formatDate, formatDateDayShortMonth, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, resolvePopoverAlign, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
39226
39453
  //# sourceMappingURL=index.js.map
39227
39454
  //# sourceMappingURL=index.js.map