@xaui/native 0.0.12 → 0.0.13

package/dist/index.cjs

@@ -257,7 +257,14 @@ var CircularActivityIndicator = ({
         borderWidth: strokeWidth,
         borderRadius: size / 2
       };
-      return /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { key: index, style: [styles.layer] }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: layerStyle }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: [containerStyle, offsetStyle], collapsable: false }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: viewportStyle }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: containerStyle, collapsable: false }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: lineStyle }))))));
+      return /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { key: index, style: [styles.layer] }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: layerStyle }, /* @__PURE__ */ import_react6.default.createElement(
+        import_react_native5.Animated.View,
+        {
+          style: [containerStyle, offsetStyle],
+          collapsable: false
+        },
+        /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: viewportStyle }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: containerStyle, collapsable: false }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: lineStyle })))
+      )));
     })
   ));
 };
@@ -1010,8 +1017,8 @@ var Badge = ({
 };
 
 // src/components/alert/alert.tsx
-var import_react20 = __toESM(require("react"), 1);
-var import_react_native17 = require("react-native");
+var import_react19 = __toESM(require("react"), 1);
+var import_react_native16 = require("react-native");
 var import_react_native_reanimated3 = __toESM(require("react-native-reanimated"), 1);
 
 // src/components/alert/alert.style.ts
@@ -1197,171 +1204,8 @@ function DangerIcon({ color, size }) {
   ));
 }
 
-// src/components/icon/icons/close.tsx
-var import_react19 = __toESM(require("react"), 1);
-var import_react_native16 = require("react-native");
-var import_react_native_svg2 = __toESM(require("react-native-svg"), 1);
-
-// src/components/icon/icon.utils.ts
-var isThemeColor = (color) => {
-  const themeColors = [
-    "primary",
-    "secondary",
-    "tertiary",
-    "danger",
-    "warning",
-    "success",
-    "default"
-  ];
-  return themeColors.includes(color);
-};
-
-// src/components/icon/icons/close.tsx
-var AnimatedPath = import_react_native16.Animated.createAnimatedComponent(import_react_native_svg2.Path);
-var CloseIcon = ({
-  variant = "baseline",
-  size = 24,
-  color = "default",
-  isAnimated = false
-}) => {
-  const theme = useXUITheme();
-  const scaleAnim = (0, import_react19.useRef)(new import_react_native16.Animated.Value(isAnimated ? 0 : 1)).current;
-  const opacityAnim = (0, import_react19.useRef)(new import_react_native16.Animated.Value(isAnimated ? 0 : 1)).current;
-  const resolvedColor = (0, import_react19.useMemo)(() => {
-    if (typeof color === "string" && isThemeColor(color)) {
-      return theme.colors[color].main;
-    }
-    return color;
-  }, [color, theme]);
-  (0, import_react19.useEffect)(() => {
-    if (isAnimated) {
-      import_react_native16.Animated.parallel([
-        import_react_native16.Animated.spring(scaleAnim, {
-          toValue: 1,
-          useNativeDriver: true,
-          tension: 50,
-          friction: 7
-        }),
-        import_react_native16.Animated.timing(opacityAnim, {
-          toValue: 1,
-          duration: 200,
-          useNativeDriver: true
-        })
-      ]).start();
-    }
-  }, [isAnimated, scaleAnim, opacityAnim]);
-  const animatedProps = isAnimated ? {
-    transform: [{ scale: scaleAnim }],
-    opacity: opacityAnim
-  } : void 0;
-  const renderBaseline = () => /* @__PURE__ */ import_react19.default.createElement(
-    AnimatedPath,
-    {
-      fill: resolvedColor,
-      d: "m289.94 256l95-95A24 24 0 0 0 351 127l-95 95l-95-95a24 24 0 0 0-34 34l95 95l-95 95a24 24 0 1 0 34 34l95-95l95 95a24 24 0 0 0 34-34Z",
-      ...animatedProps
-    }
-  );
-  const renderFilled = () => /* @__PURE__ */ import_react19.default.createElement(
-    AnimatedPath,
-    {
-      fill: resolvedColor,
-      d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm75.31 260.69a16 16 0 1 1-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 0 1-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0 1 22.62-22.62L256 233.37l52.69-52.68a16 16 0 0 1 22.62 22.62L278.63 256z",
-      ...animatedProps
-    }
-  );
-  const renderDuotone = () => /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(
-    import_react_native_svg2.Path,
-    {
-      fill: resolvedColor,
-      opacity: 0.3,
-      d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48z"
-    }
-  ), /* @__PURE__ */ import_react19.default.createElement(
-    AnimatedPath,
-    {
-      fill: resolvedColor,
-      d: "m289.94 256l95-95A24 24 0 0 0 351 127l-95 95l-95-95a24 24 0 0 0-34 34l95 95l-95 95a24 24 0 1 0 34 34l95-95l95 95a24 24 0 0 0 34-34Z",
-      ...animatedProps
-    }
-  ));
-  const renderRoundOutlined = () => /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(
-    import_react_native_svg2.Circle,
-    {
-      cx: "256",
-      cy: "256",
-      r: "192",
-      fill: "none",
-      stroke: resolvedColor,
-      strokeWidth: 32
-    }
-  ), /* @__PURE__ */ import_react19.default.createElement(
-    AnimatedPath,
-    {
-      fill: resolvedColor,
-      d: "m289.94 256l95-95A24 24 0 0 0 351 127l-95 95l-95-95a24 24 0 0 0-34 34l95 95l-95 95a24 24 0 1 0 34 34l95-95l95 95a24 24 0 0 0 34-34Z",
-      ...animatedProps
-    }
-  ));
-  const renderSquareOutlined = () => /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(
-    import_react_native_svg2.Rect,
-    {
-      x: "64",
-      y: "64",
-      width: "384",
-      height: "384",
-      rx: "48",
-      fill: "none",
-      stroke: resolvedColor,
-      strokeWidth: 32
-    }
-  ), /* @__PURE__ */ import_react19.default.createElement(
-    AnimatedPath,
-    {
-      fill: resolvedColor,
-      d: "m289.94 256l95-95A24 24 0 0 0 351 127l-95 95l-95-95a24 24 0 0 0-34 34l95 95l-95 95a24 24 0 1 0 34 34l95-95l95 95a24 24 0 0 0 34-34Z",
-      ...animatedProps
-    }
-  ));
-  const renderRoundFilled = () => /* @__PURE__ */ import_react19.default.createElement(
-    AnimatedPath,
-    {
-      fill: resolvedColor,
-      d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm75.31 260.69a16 16 0 1 1-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 0 1-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0 1 22.62-22.62L256 233.37l52.69-52.68a16 16 0 0 1 22.62 22.62L278.63 256z",
-      ...animatedProps
-    }
-  );
-  const renderSquareFilled = () => /* @__PURE__ */ import_react19.default.createElement(
-    AnimatedPath,
-    {
-      fill: resolvedColor,
-      d: "M400 64H112a48 48 0 0 0-48 48v288a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V112a48 48 0 0 0-48-48zm-59.31 244.69a16 16 0 1 1-22.62 22.62L256 278.63l-62.07 52.68a16 16 0 0 1-22.62-22.62L223.37 256l-52.06-52.69a16 16 0 0 1 22.62-22.62L256 233.37l62.07-52.68a16 16 0 0 1 22.62 22.62L288.63 256z",
-      ...animatedProps
-    }
-  );
-  const renderVariant = () => {
-    switch (variant) {
-      case "filled":
-        return renderFilled();
-      case "duotone":
-        return renderDuotone();
-      case "round-outlined":
-        return renderRoundOutlined();
-      case "square-outlined":
-        return renderSquareOutlined();
-      case "round-filled":
-        return renderRoundFilled();
-      case "square-filled":
-        return renderSquareFilled();
-      case "baseline":
-      default:
-        return renderBaseline();
-    }
-  };
-  return /* @__PURE__ */ import_react19.default.createElement(import_react_native_svg2.default, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
-};
-
 // src/components/alert/alert.tsx
+var import_icons = require("@xaui/icons");
 var iconMap = {
   default: InfoIcon,
   primary: InfoIcon,
@@ -1387,8 +1231,8 @@ var Alert = ({
   onClose,
   onVisibleChange
 }) => {
-  const [internalVisible, setInternalVisible] = (0, import_react20.useState)(isVisible ?? true);
-  const [shouldRender, setShouldRender] = (0, import_react20.useState)(isVisible ?? true);
+  const [internalVisible, setInternalVisible] = (0, import_react19.useState)(isVisible ?? true);
+  const [shouldRender, setShouldRender] = (0, import_react19.useState)(isVisible ?? true);
   const isControlled = typeof isVisible === "boolean";
   const visible = isControlled ? isVisible : internalVisible;
   const opacity = (0, import_react_native_reanimated3.useSharedValue)(1);
@@ -1397,7 +1241,7 @@ var Alert = ({
   const containerStyles = useAlertContainerStyles(themeColor, variant);
   const iconWrapperStyles = useAlertIconWrapperStyles(themeColor, variant);
   const { titleStyles, descriptionStyles, iconColor, closeButtonColor } = useAlertTextStyles(themeColor, variant);
-  const finishClosing = (0, import_react20.useCallback)(() => {
+  const finishClosing = (0, import_react19.useCallback)(() => {
     setShouldRender(false);
     if (!isControlled) {
       setInternalVisible(false);
@@ -1405,7 +1249,7 @@ var Alert = ({
     onVisibleChange?.(false);
     onClose?.();
   }, [isControlled, onClose, onVisibleChange]);
-  const handleClose = (0, import_react20.useCallback)(() => {
+  const handleClose = (0, import_react19.useCallback)(() => {
     if (!visible) return;
     opacity.value = (0, import_react_native_reanimated3.withTiming)(0, { duration: 250 });
     scale.value = (0, import_react_native_reanimated3.withTiming)(0.95, { duration: 250 }, (finished) => {
@@ -1414,7 +1258,7 @@ var Alert = ({
       }
     });
   }, [finishClosing, opacity, scale, visible]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (visible && !shouldRender) {
       setShouldRender(true);
       opacity.value = 0;
@@ -1435,19 +1279,19 @@ var Alert = ({
   const shouldShowClose = Boolean(closeButton || isClosable || onClose);
   const renderIcon = () => {
     if (hideIcon) return null;
-    if (icon && (0, import_react20.isValidElement)(icon)) {
-      return (0, import_react20.cloneElement)(icon, { color: iconColor, size: 22 });
+    if (icon && (0, import_react19.isValidElement)(icon)) {
+      return (0, import_react19.cloneElement)(icon, { color: iconColor, size: 22 });
     }
     if (icon) {
-      return /* @__PURE__ */ import_react20.default.createElement(import_react_native17.Text, { style: [styles5.iconText, { color: iconColor }] }, icon);
+      return /* @__PURE__ */ import_react19.default.createElement(import_react_native16.Text, { style: [styles5.iconText, { color: iconColor }] }, icon);
     }
-    return /* @__PURE__ */ import_react20.default.createElement(IconComponent, { color: iconColor, size: 22 });
+    return /* @__PURE__ */ import_react19.default.createElement(IconComponent, { color: iconColor, size: 22 });
   };
   const renderContentText = (content) => {
     if (content === null || content === void 0) return null;
     if (typeof content === "string" || typeof content === "number") {
-      return /* @__PURE__ */ import_react20.default.createElement(
-        import_react_native17.Text,
+      return /* @__PURE__ */ import_react19.default.createElement(
+        import_react_native16.Text,
         {
           style: [
             styles5.description,
@@ -1460,20 +1304,20 @@ var Alert = ({
     }
     return content;
   };
-  const titleNode = (0, import_react20.useMemo)(() => {
+  const titleNode = (0, import_react19.useMemo)(() => {
     if (title === null || title === void 0) return null;
     if (typeof title === "string" || typeof title === "number") {
-      return /* @__PURE__ */ import_react20.default.createElement(import_react_native17.Text, { style: [styles5.title, titleStyles, customAppearance?.title] }, title);
+      return /* @__PURE__ */ import_react19.default.createElement(import_react_native16.Text, { style: [styles5.title, titleStyles, customAppearance?.title] }, title);
     }
     return title;
   }, [title, customAppearance?.title, titleStyles]);
   const descriptionNode = renderContentText(description);
   const childrenNode = renderContentText(children);
-  const closeButtonNode = (0, import_react20.useMemo)(() => {
+  const closeButtonNode = (0, import_react19.useMemo)(() => {
     if (!closeButton) return null;
-    if (!(0, import_react20.isValidElement)(closeButton)) return closeButton;
+    if (!(0, import_react19.isValidElement)(closeButton)) return closeButton;
     const existingOnPress = closeButton.props.onPress;
-    return (0, import_react20.cloneElement)(closeButton, {
+    return (0, import_react19.cloneElement)(closeButton, {
       onPress: (event) => {
         existingOnPress?.(event);
         handleClose();
@@ -1481,7 +1325,7 @@ var Alert = ({
     });
   }, [closeButton, handleClose]);
   if (!shouldRender) return null;
-  return /* @__PURE__ */ import_react20.default.createElement(
+  return /* @__PURE__ */ import_react19.default.createElement(
     import_react_native_reanimated3.default.View,
     {
       accessibilityRole: "alert",
@@ -1493,46 +1337,46 @@ var Alert = ({
         animatedStyle
       ]
     },
-    !hideIcon && /* @__PURE__ */ import_react20.default.createElement(import_react_native17.View, { style: [styles5.iconWrapper, iconWrapperStyles] }, renderIcon()),
-    /* @__PURE__ */ import_react20.default.createElement(import_react_native17.View, { style: styles5.mainWrapper }, titleNode, descriptionNode, childrenNode && /* @__PURE__ */ import_react20.default.createElement(import_react_native17.View, { style: styles5.extraContent }, childrenNode)),
-    shouldShowClose && /* @__PURE__ */ import_react20.default.createElement(import_react_native17.View, null, closeButtonNode ?? /* @__PURE__ */ import_react20.default.createElement(
-      import_react_native17.Pressable,
+    !hideIcon && /* @__PURE__ */ import_react19.default.createElement(import_react_native16.View, { style: [styles5.iconWrapper, iconWrapperStyles] }, renderIcon()),
+    /* @__PURE__ */ import_react19.default.createElement(import_react_native16.View, { style: styles5.mainWrapper }, titleNode, descriptionNode, childrenNode && /* @__PURE__ */ import_react19.default.createElement(import_react_native16.View, { style: styles5.extraContent }, childrenNode)),
+    shouldShowClose && /* @__PURE__ */ import_react19.default.createElement(import_react_native16.View, null, closeButtonNode ?? /* @__PURE__ */ import_react19.default.createElement(
+      import_react_native16.Pressable,
       {
         accessibilityRole: "button",
         accessibilityLabel: "Close",
         onPress: handleClose,
         style: styles5.closeButton
       },
-      /* @__PURE__ */ import_react20.default.createElement(CloseIcon, { size: 20, color: closeButtonColor })
+      /* @__PURE__ */ import_react19.default.createElement(import_icons.CloseIcon, { size: 20, color: closeButtonColor })
     ))
   );
 };
 
 // src/components/autocomplete/autocomplete.tsx
-var import_react35 = __toESM(require("react"), 1);
-var import_react_native30 = require("react-native");
+var import_react28 = __toESM(require("react"), 1);
+var import_react_native23 = require("react-native");
 
 // src/components/autocomplete/autocomplete-context.ts
-var import_react21 = require("react");
-var AutocompleteContext = (0, import_react21.createContext)({
+var import_react20 = require("react");
+var AutocompleteContext = (0, import_react20.createContext)({
   size: "md",
   themeColor: "default",
   isDisabled: false
 });
 
 // src/components/autocomplete/autocomplete.hook.ts
-var import_react22 = require("react");
-var import_core15 = require("@xaui/core");
+var import_react21 = require("react");
+var import_core14 = require("@xaui/core");
 var import_palette2 = require("@xaui/core/palette");
 var useAutocompleteColorScheme = (themeColor) => {
   const theme = useXUITheme();
-  const safeThemeColor = (0, import_core15.getSafeThemeColor)(themeColor);
+  const safeThemeColor = (0, import_core14.getSafeThemeColor)(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   return { theme, colorScheme };
 };
 var useAutocompleteSizeStyles = (size) => {
   const theme = useXUITheme();
-  return (0, import_react22.useMemo)(() => {
+  return (0, import_react21.useMemo)(() => {
     const sizes = {
       xs: {
         minHeight: 34,
@@ -1568,7 +1412,7 @@ var useAutocompleteSizeStyles = (size) => {
 };
 var useAutocompleteRadiusStyles = (radius) => {
   const theme = useXUITheme();
-  const radiusStyles = (0, import_react22.useMemo)(() => {
+  const radiusStyles = (0, import_react21.useMemo)(() => {
     const radii = {
       none: theme.borderRadius.none,
       sm: theme.borderRadius.sm,
@@ -1578,7 +1422,7 @@ var useAutocompleteRadiusStyles = (radius) => {
     };
     return { borderRadius: radii[radius] };
   }, [radius, theme]);
-  const listboxRadius = (0, import_react22.useMemo)(() => {
+  const listboxRadius = (0, import_react21.useMemo)(() => {
     const radii = {
       none: theme.borderRadius.none,
       sm: theme.borderRadius.sm,
@@ -1592,7 +1436,7 @@ var useAutocompleteRadiusStyles = (radius) => {
 };
 var useAutocompleteVariantStyles = (themeColor, variant, isInvalid) => {
   const { theme, colorScheme } = useAutocompleteColorScheme(themeColor);
-  return (0, import_react22.useMemo)(() => {
+  return (0, import_react21.useMemo)(() => {
     let borderColor = isInvalid ? theme.colors.danger.main : colorScheme.main;
     if ((variant === "outlined" || variant === "faded") && themeColor === "default") {
       borderColor = import_palette2.colors.gray[300];
@@ -1627,7 +1471,7 @@ var useAutocompleteVariantStyles = (themeColor, variant, isInvalid) => {
 };
 var useAutocompleteLabelStyle = (themeColor, isInvalid, labelSize) => {
   const { theme, colorScheme } = useAutocompleteColorScheme(themeColor);
-  return (0, import_react22.useMemo)(() => {
+  return (0, import_react21.useMemo)(() => {
     let baseColor = theme.colors.foreground;
     if (isInvalid) {
       baseColor = theme.colors.danger.main;
@@ -1642,7 +1486,7 @@ var useAutocompleteLabelStyle = (themeColor, isInvalid, labelSize) => {
 };
 var useAutocompleteHelperColor = (isInvalid) => {
   const theme = useXUITheme();
-  return (0, import_react22.useMemo)(() => {
+  return (0, import_react21.useMemo)(() => {
     if (isInvalid) {
       return theme.colors.danger.main;
     }
@@ -1651,8 +1495,8 @@ var useAutocompleteHelperColor = (isInvalid) => {
 };
 
 // src/components/autocomplete/autocomplete.style.ts
-var import_react_native18 = require("react-native");
-var styles6 = import_react_native18.StyleSheet.create({
+var import_react_native17 = require("react-native");
+var styles6 = import_react_native17.StyleSheet.create({
   container: {
     gap: 6,
     position: "relative"
@@ -1739,16 +1583,16 @@ var styles6 = import_react_native18.StyleSheet.create({
 });
 
 // src/components/autocomplete/autocomplete.state.hook.ts
-var import_react23 = require("react");
+var import_react22 = require("react");
 var useAutocompleteOpenState = ({
   isOpened,
   isDisabled,
   onOpenChange,
   onClose
 }) => {
-  const [internalIsOpen, setInternalIsOpen] = (0, import_react23.useState)(false);
+  const [internalIsOpen, setInternalIsOpen] = (0, import_react22.useState)(false);
   const isOpen = isOpened !== void 0 ? isOpened : internalIsOpen;
-  const setOpen = (0, import_react23.useCallback)(
+  const setOpen = (0, import_react22.useCallback)(
     (open) => {
       if (isDisabled) {
         return;
@@ -1771,9 +1615,11 @@ var useAutocompleteInputState = ({
   selectedKey,
   onInputChange
 }) => {
-  const [internalInputValue, setInternalInputValue] = (0, import_react23.useState)(defaultInputValue ?? "");
+  const [internalInputValue, setInternalInputValue] = (0, import_react22.useState)(
+    defaultInputValue ?? ""
+  );
   const currentInputValue = inputValue !== void 0 ? inputValue : internalInputValue;
-  const updateInputValue = (0, import_react23.useCallback)(
+  const updateInputValue = (0, import_react22.useCallback)(
     (value) => {
       if (inputValue === void 0) {
         setInternalInputValue(value);
@@ -1782,7 +1628,7 @@ var useAutocompleteInputState = ({
     },
     [inputValue, onInputChange]
   );
-  (0, import_react23.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (selectedKey === null && inputValue === void 0) {
       setInternalInputValue("");
     }
@@ -1792,8 +1638,8 @@ var useAutocompleteInputState = ({
 var useAutocompleteSelection = ({
   onSelectionChange
 }) => {
-  const [currentSelectedKey, setCurrentSelectedKey] = (0, import_react23.useState)(null);
-  const updateSelection = (0, import_react23.useCallback)(
+  const [currentSelectedKey, setCurrentSelectedKey] = (0, import_react22.useState)(null);
+  const updateSelection = (0, import_react22.useCallback)(
     (key) => {
       setCurrentSelectedKey(key);
       onSelectionChange?.(key);
@@ -1817,15 +1663,15 @@ var defaultFilterFunction = (textValue, inputValue) => {
 };
 
 // src/components/dialogs/autocomplete-dialog/autocomplete-dialog.tsx
-var import_react33 = __toESM(require("react"), 1);
-var import_react_native28 = require("react-native");
+var import_react26 = __toESM(require("react"), 1);
+var import_react_native21 = require("react-native");
 
 // src/components/select/checkmark-icon.tsx
-var import_react24 = __toESM(require("react"), 1);
-var import_react_native_svg3 = __toESM(require("react-native-svg"), 1);
+var import_react23 = __toESM(require("react"), 1);
+var import_react_native_svg2 = __toESM(require("react-native-svg"), 1);
 function CheckmarkIcon({ color, size }) {
-  return /* @__PURE__ */ import_react24.default.createElement(import_react_native_svg3.default, { width: size, height: size, viewBox: "0 0 17 18", fill: "none" }, /* @__PURE__ */ import_react24.default.createElement(
-    import_react_native_svg3.Polyline,
+  return /* @__PURE__ */ import_react23.default.createElement(import_react_native_svg2.default, { width: size, height: size, viewBox: "0 0 17 18", fill: "none" }, /* @__PURE__ */ import_react23.default.createElement(
+    import_react_native_svg2.Polyline,
     {
       points: "1 9 7 14 15 4",
       stroke: color,
@@ -1837,656 +1683,15 @@ function CheckmarkIcon({ color, size }) {
 }
 
 // src/components/dialogs/autocomplete-dialog/autocomplete-dialog-header.tsx
-var import_react31 = __toESM(require("react"), 1);
-var import_react_native26 = require("react-native");
-
-// src/components/icon/icons/arrow-back.tsx
-var import_react25 = __toESM(require("react"), 1);
+var import_react24 = __toESM(require("react"), 1);
 var import_react_native19 = require("react-native");
-var import_react_native_svg4 = __toESM(require("react-native-svg"), 1);
-var AnimatedPath2 = import_react_native19.Animated.createAnimatedComponent(import_react_native_svg4.Path);
-var ArrowBackIcon = ({
-  variant = "baseline",
-  size = 24,
-  color = "default",
-  isAnimated = false
-}) => {
-  const theme = useXUITheme();
-  const scaleAnim = (0, import_react25.useRef)(new import_react_native19.Animated.Value(isAnimated ? 0 : 1)).current;
-  const opacityAnim = (0, import_react25.useRef)(new import_react_native19.Animated.Value(isAnimated ? 0 : 1)).current;
-  const resolvedColor = (0, import_react25.useMemo)(() => {
-    if (typeof color === "string" && isThemeColor(color)) {
-      return theme.colors[color].main;
-    }
-    return color;
-  }, [color, theme]);
-  (0, import_react25.useEffect)(() => {
-    if (isAnimated) {
-      import_react_native19.Animated.parallel([
-        import_react_native19.Animated.spring(scaleAnim, {
-          toValue: 1,
-          useNativeDriver: true,
-          tension: 50,
-          friction: 7
-        }),
-        import_react_native19.Animated.timing(opacityAnim, {
-          toValue: 1,
-          duration: 200,
-          useNativeDriver: true
-        })
-      ]).start();
-    }
-  }, [isAnimated, scaleAnim, opacityAnim]);
-  const animatedProps = isAnimated ? {
-    transform: [{ scale: scaleAnim }],
-    opacity: opacityAnim
-  } : void 0;
-  const renderArrow = () => /* @__PURE__ */ import_react25.default.createElement(
-    AnimatedPath2,
-    {
-      fill: "none",
-      stroke: resolvedColor,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 48,
-      d: "M244 400L100 256l144-144M120 256h292",
-      ...animatedProps
-    }
-  );
-  const renderDuotone = () => /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, /* @__PURE__ */ import_react25.default.createElement(
-    import_react_native_svg4.Path,
-    {
-      fill: resolvedColor,
-      opacity: 0.3,
-      d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48z"
-    }
-  ), renderArrow());
-  const renderRoundOutlined = () => /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, /* @__PURE__ */ import_react25.default.createElement(
-    import_react_native_svg4.Circle,
-    {
-      cx: "256",
-      cy: "256",
-      r: "192",
-      fill: "none",
-      stroke: resolvedColor,
-      strokeWidth: 32
-    }
-  ), renderArrow());
-  const renderSquareOutlined = () => /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, /* @__PURE__ */ import_react25.default.createElement(
-    import_react_native_svg4.Rect,
-    {
-      x: "64",
-      y: "64",
-      width: "384",
-      height: "384",
-      rx: "48",
-      fill: "none",
-      stroke: resolvedColor,
-      strokeWidth: 32
-    }
-  ), renderArrow());
-  const renderVariant = () => {
-    switch (variant) {
-      case "duotone":
-        return renderDuotone();
-      case "round-outlined":
-        return renderRoundOutlined();
-      case "square-outlined":
-        return renderSquareOutlined();
-      case "filled":
-      case "round-filled":
-      case "square-filled":
-      case "baseline":
-      default:
-        return renderArrow();
-    }
-  };
-  return /* @__PURE__ */ import_react25.default.createElement(import_react_native_svg4.default, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
-};
-
-// src/components/icon/icons/calendar.tsx
-var import_react26 = __toESM(require("react"), 1);
-var import_react_native20 = require("react-native");
-var import_react_native_svg5 = __toESM(require("react-native-svg"), 1);
-var AnimatedPath3 = import_react_native20.Animated.createAnimatedComponent(import_react_native_svg5.Path);
-var CalendarIcon = ({
-  variant = "baseline",
-  size = 24,
-  color = "default",
-  isAnimated = false
-}) => {
-  const theme = useXUITheme();
-  const scaleAnim = (0, import_react26.useRef)(new import_react_native20.Animated.Value(isAnimated ? 0 : 1)).current;
-  const opacityAnim = (0, import_react26.useRef)(new import_react_native20.Animated.Value(isAnimated ? 0 : 1)).current;
-  const resolvedColor = (0, import_react26.useMemo)(() => {
-    if (typeof color === "string" && isThemeColor(color)) {
-      return theme.colors[color].main;
-    }
-    return color;
-  }, [color, theme]);
-  (0, import_react26.useEffect)(() => {
-    if (isAnimated) {
-      import_react_native20.Animated.parallel([
-        import_react_native20.Animated.spring(scaleAnim, {
-          toValue: 1,
-          useNativeDriver: true,
-          tension: 50,
-          friction: 7
-        }),
-        import_react_native20.Animated.timing(opacityAnim, {
-          toValue: 1,
-          duration: 200,
-          useNativeDriver: true
-        })
-      ]).start();
-    }
-  }, [isAnimated, scaleAnim, opacityAnim]);
-  const animatedProps = isAnimated ? {
-    transform: [{ scale: scaleAnim }],
-    opacity: opacityAnim
-  } : void 0;
-  const renderBaseline = () => /* @__PURE__ */ import_react26.default.createElement(
-    AnimatedPath3,
-    {
-      fill: "none",
-      stroke: resolvedColor,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 32,
-      d: "M48 112a48 48 0 0148-48h320a48 48 0 0148 48v320a48 48 0 01-48 48H96a48 48 0 01-48-48zm0 80h416M176 64v48M336 64v48",
-      ...animatedProps
-    }
-  );
-  const renderFilled = () => /* @__PURE__ */ import_react26.default.createElement(
-    AnimatedPath3,
-    {
-      fill: resolvedColor,
-      d: "M416 64h-56V40a24 24 0 00-48 0v24H200V40a24 24 0 00-48 0v24H96a48 48 0 00-48 48v320a48 48 0 0048 48h320a48 48 0 0048-48V112a48 48 0 00-48-48zm0 368H96V208h320z",
-      ...animatedProps
-    }
-  );
-  const renderDuotone = () => /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, /* @__PURE__ */ import_react26.default.createElement(
-    import_react_native_svg5.Path,
-    {
-      fill: resolvedColor,
-      opacity: 0.3,
-      d: "M48 192h416v240a48 48 0 01-48 48H96a48 48 0 01-48-48z"
-    }
-  ), renderBaseline());
-  const renderRoundOutlined = () => /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, /* @__PURE__ */ import_react26.default.createElement(
-    import_react_native_svg5.Circle,
-    {
-      cx: "256",
-      cy: "256",
-      r: "192",
-      fill: "none",
-      stroke: resolvedColor,
-      strokeWidth: 32
-    }
-  ), /* @__PURE__ */ import_react26.default.createElement(
-    AnimatedPath3,
-    {
-      fill: "none",
-      stroke: resolvedColor,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 28,
-      d: "M152 176a24 24 0 0124-24h160a24 24 0 0124 24v176a24 24 0 01-24 24H176a24 24 0 01-24-24zm0 48h208M208 152v32M304 152v32",
-      ...animatedProps
-    }
-  ));
-  const renderSquareOutlined = () => /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, /* @__PURE__ */ import_react26.default.createElement(
-    import_react_native_svg5.Rect,
-    {
-      x: "64",
-      y: "64",
-      width: "384",
-      height: "384",
-      rx: "48",
-      fill: "none",
-      stroke: resolvedColor,
-      strokeWidth: 32
-    }
-  ), /* @__PURE__ */ import_react26.default.createElement(
-    AnimatedPath3,
-    {
-      fill: "none",
-      stroke: resolvedColor,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 28,
-      d: "M152 176a24 24 0 0124-24h160a24 24 0 0124 24v176a24 24 0 01-24 24H176a24 24 0 01-24-24zm0 48h208M208 152v32M304 152v32",
-      ...animatedProps
-    }
-  ));
-  const renderVariant = () => {
-    switch (variant) {
-      case "filled":
-        return renderFilled();
-      case "duotone":
-        return renderDuotone();
-      case "round-outlined":
-        return renderRoundOutlined();
-      case "square-outlined":
-        return renderSquareOutlined();
-      case "round-filled":
-      case "square-filled":
-        return renderFilled();
-      case "baseline":
-      default:
-        return renderBaseline();
-    }
-  };
-  return /* @__PURE__ */ import_react26.default.createElement(import_react_native_svg5.default, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
-};
-
-// src/components/icon/icons/checkmark.tsx
-var import_react27 = __toESM(require("react"), 1);
-var import_react_native21 = require("react-native");
-var import_react_native_svg6 = __toESM(require("react-native-svg"), 1);
-var AnimatedPath4 = import_react_native21.Animated.createAnimatedComponent(import_react_native_svg6.Path);
-
-// src/components/icon/icons/chevron-down.tsx
-var import_react28 = __toESM(require("react"), 1);
-var import_react_native22 = require("react-native");
-var import_react_native_svg7 = __toESM(require("react-native-svg"), 1);
-var AnimatedPath5 = import_react_native22.Animated.createAnimatedComponent(import_react_native_svg7.Path);
-var ChevronDownIcon = ({
-  variant = "baseline",
-  size = 24,
-  color = "default",
-  isAnimated = false
-}) => {
-  const theme = useXUITheme();
-  const scaleAnim = (0, import_react28.useRef)(new import_react_native22.Animated.Value(isAnimated ? 0 : 1)).current;
-  const opacityAnim = (0, import_react28.useRef)(new import_react_native22.Animated.Value(isAnimated ? 0 : 1)).current;
-  const resolvedColor = (0, import_react28.useMemo)(() => {
-    if (typeof color === "string" && isThemeColor(color)) {
-      return theme.colors[color].main;
-    }
-    return color;
-  }, [color, theme]);
-  (0, import_react28.useEffect)(() => {
-    if (isAnimated) {
-      import_react_native22.Animated.parallel([
-        import_react_native22.Animated.spring(scaleAnim, {
-          toValue: 1,
-          useNativeDriver: true,
-          tension: 50,
-          friction: 7
-        }),
-        import_react_native22.Animated.timing(opacityAnim, {
-          toValue: 1,
-          duration: 200,
-          useNativeDriver: true
-        })
-      ]).start();
-    }
-  }, [isAnimated, scaleAnim, opacityAnim]);
-  const animatedProps = isAnimated ? {
-    transform: [{ scale: scaleAnim }],
-    opacity: opacityAnim
-  } : void 0;
-  const renderBaseline = () => /* @__PURE__ */ import_react28.default.createElement(
-    AnimatedPath5,
-    {
-      fill: "none",
-      stroke: resolvedColor,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 48,
-      d: "M112 184l144 144 144-144",
-      ...animatedProps
-    }
-  );
-  const renderFilled = () => /* @__PURE__ */ import_react28.default.createElement(
-    AnimatedPath5,
-    {
-      fill: resolvedColor,
-      d: "M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z",
-      ...animatedProps
-    }
-  );
-  const renderDuotone = () => /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, /* @__PURE__ */ import_react28.default.createElement(
-    import_react_native_svg7.Path,
-    {
-      fill: resolvedColor,
-      opacity: 0.3,
-      d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48z"
-    }
-  ), /* @__PURE__ */ import_react28.default.createElement(
-    AnimatedPath5,
-    {
-      fill: "none",
-      stroke: resolvedColor,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 48,
-      d: "M112 184l144 144 144-144",
-      ...animatedProps
-    }
-  ));
-  const renderRoundOutlined = () => /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, /* @__PURE__ */ import_react28.default.createElement(
-    import_react_native_svg7.Circle,
-    {
-      cx: "256",
-      cy: "256",
-      r: "192",
-      fill: "none",
-      stroke: resolvedColor,
-      strokeWidth: 32
-    }
-  ), /* @__PURE__ */ import_react28.default.createElement(
-    AnimatedPath5,
-    {
-      fill: "none",
-      stroke: resolvedColor,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 48,
-      d: "M112 184l144 144 144-144",
-      ...animatedProps
-    }
-  ));
-  const renderSquareOutlined = () => /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, /* @__PURE__ */ import_react28.default.createElement(
-    import_react_native_svg7.Rect,
-    {
-      x: "64",
-      y: "64",
-      width: "384",
-      height: "384",
-      rx: "48",
-      fill: "none",
-      stroke: resolvedColor,
-      strokeWidth: 32
-    }
-  ), /* @__PURE__ */ import_react28.default.createElement(
-    AnimatedPath5,
-    {
-      fill: "none",
-      stroke: resolvedColor,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 48,
-      d: "M112 184l144 144 144-144",
-      ...animatedProps
-    }
-  ));
-  const renderRoundFilled = () => /* @__PURE__ */ import_react28.default.createElement(
-    AnimatedPath5,
-    {
-      fill: resolvedColor,
-      d: "M464 256c0-114.87-93.13-208-208-208S48 141.13 48 256s93.13 208 208 208 208-93.13 208-208zm-100.69-28.69l-96 96a16 16 0 0 1-22.62 0l-96-96a16 16 0 0 1 22.62-22.62L256 289.37l84.69-84.68a16 16 0 0 1 22.62 22.62z",
-      ...animatedProps
-    }
-  );
-  const renderSquareFilled = () => /* @__PURE__ */ import_react28.default.createElement(
-    AnimatedPath5,
-    {
-      fill: resolvedColor,
-      d: "M400 64H112a48 48 0 0 0-48 48v288a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V112a48 48 0 0 0-48-48zm-36.69 163.31l-96 96a16 16 0 0 1-22.62 0l-96-96a16 16 0 0 1 22.62-22.62L256 289.37l84.69-84.68a16 16 0 0 1 22.62 22.62z",
-      ...animatedProps
-    }
-  );
-  const renderVariant = () => {
-    switch (variant) {
-      case "filled":
-        return renderFilled();
-      case "duotone":
-        return renderDuotone();
-      case "round-outlined":
-        return renderRoundOutlined();
-      case "square-outlined":
-        return renderSquareOutlined();
-      case "round-filled":
-        return renderRoundFilled();
-      case "square-filled":
-        return renderSquareFilled();
-      case "baseline":
-      default:
-        return renderBaseline();
-    }
-  };
-  return /* @__PURE__ */ import_react28.default.createElement(import_react_native_svg7.default, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
-};
-
-// src/components/icon/icons/chevron-left.tsx
-var import_react29 = __toESM(require("react"), 1);
-var import_react_native23 = require("react-native");
-var import_react_native_svg8 = __toESM(require("react-native-svg"), 1);
-var AnimatedPath6 = import_react_native23.Animated.createAnimatedComponent(import_react_native_svg8.Path);
-var ChevronLeftIcon = ({
-  variant = "baseline",
-  size = 24,
-  color = "default",
-  isAnimated = false
-}) => {
-  const theme = useXUITheme();
-  const scaleAnim = (0, import_react29.useRef)(new import_react_native23.Animated.Value(isAnimated ? 0 : 1)).current;
-  const opacityAnim = (0, import_react29.useRef)(new import_react_native23.Animated.Value(isAnimated ? 0 : 1)).current;
-  const resolvedColor = (0, import_react29.useMemo)(() => {
-    if (typeof color === "string" && isThemeColor(color)) {
-      return theme.colors[color].main;
-    }
-    return color;
-  }, [color, theme]);
-  (0, import_react29.useEffect)(() => {
-    if (isAnimated) {
-      import_react_native23.Animated.parallel([
-        import_react_native23.Animated.spring(scaleAnim, {
-          toValue: 1,
-          useNativeDriver: true,
-          tension: 50,
-          friction: 7
-        }),
-        import_react_native23.Animated.timing(opacityAnim, {
-          toValue: 1,
-          duration: 200,
-          useNativeDriver: true
-        })
-      ]).start();
-    }
-  }, [isAnimated, scaleAnim, opacityAnim]);
-  const animatedProps = isAnimated ? {
-    transform: [{ scale: scaleAnim }],
-    opacity: opacityAnim
-  } : void 0;
-  const renderBaseline = () => /* @__PURE__ */ import_react29.default.createElement(
-    AnimatedPath6,
-    {
-      fill: "none",
-      stroke: resolvedColor,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 48,
-      d: "M328 112L184 256l144 144",
-      ...animatedProps
-    }
-  );
-  const renderFilled = () => /* @__PURE__ */ import_react29.default.createElement(
-    AnimatedPath6,
-    {
-      fill: resolvedColor,
-      d: "M256 217.9L383 345c9.4 9.4 24.6 9.4 33.9 0s9.3-24.6 0-34L273 167c-9.1-9.1-23.7-9.3-33.1-.7L95 310.9c-4.7 4.7-7 10.9-7 17s2.3 12.3 7 17c9.4 9.4 24.6 9.4 33.9 0l127.1-127z",
-      rotation: 90,
-      origin: "256, 256",
-      ...animatedProps
-    }
-  );
-  const renderDuotone = () => /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement(
-    import_react_native_svg8.Path,
-    {
-      fill: resolvedColor,
-      opacity: 0.3,
-      d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48z"
-    }
-  ), renderBaseline());
-  const renderRoundOutlined = () => /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement(
-    import_react_native_svg8.Circle,
-    {
-      cx: "256",
-      cy: "256",
-      r: "192",
-      fill: "none",
-      stroke: resolvedColor,
-      strokeWidth: 32
-    }
-  ), renderBaseline());
-  const renderSquareOutlined = () => /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement(
-    import_react_native_svg8.Rect,
-    {
-      x: "64",
-      y: "64",
-      width: "384",
-      height: "384",
-      rx: "48",
-      fill: "none",
-      stroke: resolvedColor,
-      strokeWidth: 32
-    }
-  ), renderBaseline());
-  const renderVariant = () => {
-    switch (variant) {
-      case "filled":
-        return renderFilled();
-      case "duotone":
-        return renderDuotone();
-      case "round-outlined":
-        return renderRoundOutlined();
-      case "square-outlined":
-        return renderSquareOutlined();
-      case "round-filled":
-      case "square-filled":
-        return renderFilled();
-      case "baseline":
-      default:
-        return renderBaseline();
-    }
-  };
-  return /* @__PURE__ */ import_react29.default.createElement(import_react_native_svg8.default, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
-};
-
-// src/components/icon/icons/chevron-right.tsx
-var import_react30 = __toESM(require("react"), 1);
-var import_react_native24 = require("react-native");
-var import_react_native_svg9 = __toESM(require("react-native-svg"), 1);
-var AnimatedPath7 = import_react_native24.Animated.createAnimatedComponent(import_react_native_svg9.Path);
-var ChevronRightIcon = ({
-  variant = "baseline",
-  size = 24,
-  color = "default",
-  isAnimated = false
-}) => {
-  const theme = useXUITheme();
-  const scaleAnim = (0, import_react30.useRef)(new import_react_native24.Animated.Value(isAnimated ? 0 : 1)).current;
-  const opacityAnim = (0, import_react30.useRef)(new import_react_native24.Animated.Value(isAnimated ? 0 : 1)).current;
-  const resolvedColor = (0, import_react30.useMemo)(() => {
-    if (typeof color === "string" && isThemeColor(color)) {
-      return theme.colors[color].main;
-    }
-    return color;
-  }, [color, theme]);
-  (0, import_react30.useEffect)(() => {
-    if (isAnimated) {
-      import_react_native24.Animated.parallel([
-        import_react_native24.Animated.spring(scaleAnim, {
-          toValue: 1,
-          useNativeDriver: true,
-          tension: 50,
-          friction: 7
-        }),
-        import_react_native24.Animated.timing(opacityAnim, {
-          toValue: 1,
-          duration: 200,
-          useNativeDriver: true
-        })
-      ]).start();
-    }
-  }, [isAnimated, scaleAnim, opacityAnim]);
-  const animatedProps = isAnimated ? {
-    transform: [{ scale: scaleAnim }],
-    opacity: opacityAnim
-  } : void 0;
-  const renderBaseline = () => /* @__PURE__ */ import_react30.default.createElement(
-    AnimatedPath7,
-    {
-      fill: "none",
-      stroke: resolvedColor,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 48,
-      d: "M184 112l144 144-144 144",
-      ...animatedProps
-    }
-  );
-  const renderFilled = () => /* @__PURE__ */ import_react30.default.createElement(
-    AnimatedPath7,
-    {
-      fill: resolvedColor,
-      d: "M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z",
-      rotation: -90,
-      origin: "256, 256",
-      ...animatedProps
-    }
-  );
-  const renderDuotone = () => /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, /* @__PURE__ */ import_react30.default.createElement(
-    import_react_native_svg9.Path,
-    {
-      fill: resolvedColor,
-      opacity: 0.3,
-      d: "M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48z"
-    }
-  ), renderBaseline());
-  const renderRoundOutlined = () => /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, /* @__PURE__ */ import_react30.default.createElement(
-    import_react_native_svg9.Circle,
-    {
-      cx: "256",
-      cy: "256",
-      r: "192",
-      fill: "none",
-      stroke: resolvedColor,
-      strokeWidth: 32
-    }
-  ), renderBaseline());
-  const renderSquareOutlined = () => /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, /* @__PURE__ */ import_react30.default.createElement(
-    import_react_native_svg9.Rect,
-    {
-      x: "64",
-      y: "64",
-      width: "384",
-      height: "384",
-      rx: "48",
-      fill: "none",
-      stroke: resolvedColor,
-      strokeWidth: 32
-    }
-  ), renderBaseline());
-  const renderVariant = () => {
-    switch (variant) {
-      case "filled":
-        return renderFilled();
-      case "duotone":
-        return renderDuotone();
-      case "round-outlined":
-        return renderRoundOutlined();
-      case "square-outlined":
-        return renderSquareOutlined();
-      case "round-filled":
-      case "square-filled":
-        return renderFilled();
-      case "baseline":
-      default:
-        return renderBaseline();
-    }
-  };
-  return /* @__PURE__ */ import_react30.default.createElement(import_react_native_svg9.default, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
-};
+var import_icons2 = require("@xaui/icons");
 
 // src/components/dialogs/autocomplete-dialog/autocomplete-dialog.style.ts
-var import_react_native25 = require("react-native");
-var styles7 = import_react_native25.StyleSheet.create({
+var import_react_native18 = require("react-native");
+var styles7 = import_react_native18.StyleSheet.create({
   backdrop: {
-    ...import_react_native25.StyleSheet.absoluteFillObject,
+    ...import_react_native18.StyleSheet.absoluteFillObject,
     backgroundColor: "rgba(0, 0, 0, 0.5)"
   },
   dialogContainer: {
@@ -2581,26 +1786,23 @@ var AutocompleteDialogHeader = ({
   onBlur
 }) => {
   const theme = useXUITheme();
-  return /* @__PURE__ */ import_react31.default.createElement(import_react_native26.View, { style: styles7.header }, title ? /* @__PURE__ */ import_react31.default.createElement(import_react_native26.View, { style: styles7.titleRow }, /* @__PURE__ */ import_react31.default.createElement(
-    import_react_native26.Pressable,
+  return /* @__PURE__ */ import_react24.default.createElement(import_react_native19.View, { style: styles7.header }, title ? /* @__PURE__ */ import_react24.default.createElement(import_react_native19.View, { style: styles7.titleRow }, /* @__PURE__ */ import_react24.default.createElement(
+    import_react_native19.Pressable,
     {
       style: styles7.backButton,
       onPress: onClose,
       accessibilityLabel: "Back",
       accessibilityRole: "button"
     },
-    /* @__PURE__ */ import_react31.default.createElement(ArrowBackIcon, { size: 20, color: theme.colors.foreground })
-  ), /* @__PURE__ */ import_react31.default.createElement(import_react_native26.Text, { style: [styles7.title, { color: theme.colors.foreground }] }, title)) : null, /* @__PURE__ */ import_react31.default.createElement(import_react_native26.View, { style: styles7.inputContainer }, /* @__PURE__ */ import_react31.default.createElement(import_react_native26.Animated.View, { style: [styles7.inputWrapper, inputAnimatedStyle] }, /* @__PURE__ */ import_react31.default.createElement(
-    import_react_native26.TextInput,
+    /* @__PURE__ */ import_react24.default.createElement(import_icons2.ArrowBackIcon, { size: 20, color: theme.colors.foreground })
+  ), /* @__PURE__ */ import_react24.default.createElement(import_react_native19.Text, { style: [styles7.title, { color: theme.colors.foreground }] }, title)) : null, /* @__PURE__ */ import_react24.default.createElement(import_react_native19.View, { style: styles7.inputContainer }, /* @__PURE__ */ import_react24.default.createElement(import_react_native19.Animated.View, { style: [styles7.inputWrapper, inputAnimatedStyle] }, /* @__PURE__ */ import_react24.default.createElement(
+    import_react_native19.TextInput,
     {
       ref: inputRef,
       value: inputValue,
       onChangeText: onInputChange,
       placeholder,
-      placeholderTextColor: addOpacityToColor(
-        theme.colors.foreground,
-        0.5
-      ),
+      placeholderTextColor: addOpacityToColor(theme.colors.foreground, 0.5),
       style: [
         styles7.input,
         {
@@ -2615,42 +1817,42 @@ var AutocompleteDialogHeader = ({
       onFocus,
       onBlur
     }
-  ), inputValue ? /* @__PURE__ */ import_react31.default.createElement(
-    import_react_native26.Pressable,
+  ), inputValue ? /* @__PURE__ */ import_react24.default.createElement(
+    import_react_native19.Pressable,
     {
       style: styles7.clearInputButton,
       onPress: () => onInputChange?.(""),
       accessibilityLabel: "Clear input",
       accessibilityRole: "button"
     },
-    /* @__PURE__ */ import_react31.default.createElement(CloseIcon, { color: theme.colors.foreground })
+    /* @__PURE__ */ import_react24.default.createElement(import_icons2.CloseIcon, { color: theme.colors.foreground })
   ) : null)));
 };
 
 // src/components/dialogs/autocomplete-dialog/autocomplete-dialog.animation.ts
-var import_react32 = require("react");
-var import_react_native27 = require("react-native");
+var import_react25 = require("react");
+var import_react_native20 = require("react-native");
 var useAutocompleteDialogAnimation = ({
   visible,
   fadeAnim,
   slideAnim,
   scaleAnim
 }) => {
-  (0, import_react32.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (visible) {
-      import_react_native27.Animated.parallel([
-        import_react_native27.Animated.timing(fadeAnim, {
+      import_react_native20.Animated.parallel([
+        import_react_native20.Animated.timing(fadeAnim, {
           toValue: 1,
           duration: 250,
           useNativeDriver: true
         }),
-        import_react_native27.Animated.spring(slideAnim, {
+        import_react_native20.Animated.spring(slideAnim, {
           toValue: 1,
           useNativeDriver: true,
           tension: 65,
           friction: 10
         }),
-        import_react_native27.Animated.spring(scaleAnim, {
+        import_react_native20.Animated.spring(scaleAnim, {
           toValue: 1,
           useNativeDriver: true,
           tension: 50,
@@ -2684,19 +1886,19 @@ var AutocompleteDialog = ({
   onBlur
 }) => {
   const theme = useXUITheme();
-  const { width: screenWidth, height: screenHeight } = (0, import_react_native28.useWindowDimensions)();
-  const fadeAnim = (0, import_react33.useRef)(new import_react_native28.Animated.Value(0)).current;
-  const slideAnim = (0, import_react33.useRef)(new import_react_native28.Animated.Value(0)).current;
-  const scaleAnim = (0, import_react33.useRef)(new import_react_native28.Animated.Value(0)).current;
-  const inputRef = (0, import_react33.useRef)(null);
-  const [keyboardHeight, setKeyboardHeight] = (0, import_react33.useState)(0);
-  (0, import_react33.useEffect)(() => {
-    const showEvent = import_react_native28.Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
-    const hideEvent = import_react_native28.Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
-    const showSub = import_react_native28.Keyboard.addListener(showEvent, (e) => {
+  const { width: screenWidth, height: screenHeight } = (0, import_react_native21.useWindowDimensions)();
+  const fadeAnim = (0, import_react26.useRef)(new import_react_native21.Animated.Value(0)).current;
+  const slideAnim = (0, import_react26.useRef)(new import_react_native21.Animated.Value(0)).current;
+  const scaleAnim = (0, import_react26.useRef)(new import_react_native21.Animated.Value(0)).current;
+  const inputRef = (0, import_react26.useRef)(null);
+  const [keyboardHeight, setKeyboardHeight] = (0, import_react26.useState)(0);
+  (0, import_react26.useEffect)(() => {
+    const showEvent = import_react_native21.Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
+    const hideEvent = import_react_native21.Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
+    const showSub = import_react_native21.Keyboard.addListener(showEvent, (e) => {
       setKeyboardHeight(e.endCoordinates.height);
     });
-    const hideSub = import_react_native28.Keyboard.addListener(hideEvent, () => {
+    const hideSub = import_react_native21.Keyboard.addListener(hideEvent, () => {
       setKeyboardHeight(0);
     });
     return () => {
@@ -2704,26 +1906,26 @@ var AutocompleteDialog = ({
       hideSub.remove();
     };
   }, []);
-  const items = (0, import_react33.useMemo)(
-    () => import_react33.default.Children.toArray(children).filter(
-      import_react33.default.isValidElement
+  const items = (0, import_react26.useMemo)(
+    () => import_react26.default.Children.toArray(children).filter(
+      import_react26.default.isValidElement
     ),
     [children]
   );
   const checkmarkColor = theme.colors[themeColor].main;
   const checkmarkBackgroundColor = theme.colors[themeColor].background;
   useAutocompleteDialogAnimation({ visible, fadeAnim, slideAnim, scaleAnim });
-  (0, import_react33.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!visible) return;
-    const sub = import_react_native28.BackHandler.addEventListener("hardwareBackPress", () => {
+    const sub = import_react_native21.BackHandler.addEventListener("hardwareBackPress", () => {
       onClose?.();
       return true;
     });
     return () => sub.remove();
   }, [visible, onClose]);
-  const focusInput = (0, import_react33.useCallback)(() => {
-    const delay = import_react_native28.Platform.OS === "android" ? 300 : 100;
-    import_react_native28.InteractionManager.runAfterInteractions(() => {
+  const focusInput = (0, import_react26.useCallback)(() => {
+    const delay = import_react_native21.Platform.OS === "android" ? 300 : 100;
+    import_react_native21.InteractionManager.runAfterInteractions(() => {
       setTimeout(() => {
         inputRef.current?.focus();
       }, delay);
@@ -2731,16 +1933,16 @@ var AutocompleteDialog = ({
   }, []);
   const handleCheckmarkPress = () => {
     onCheckmark?.();
-    import_react_native28.Keyboard.dismiss();
+    import_react_native21.Keyboard.dismiss();
   };
-  (0, import_react33.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!visible) {
-      import_react_native28.Keyboard.dismiss();
+      import_react_native21.Keyboard.dismiss();
       return;
     }
     focusInput();
   }, [focusInput, visible]);
-  const listBottomPadding = (0, import_react33.useMemo)(() => {
+  const listBottomPadding = (0, import_react26.useMemo)(() => {
     const basePadding = showCheckmark ? 96 : 64;
     return (keyboardHeight > 0 ? keyboardHeight : 0) + basePadding;
   }, [keyboardHeight, showCheckmark]);
@@ -2765,7 +1967,7 @@ var AutocompleteDialog = ({
   const inputAnimatedStyle = {
     transform: [{ scaleX: scaleAnim }]
   };
-  const listHeader = /* @__PURE__ */ import_react33.default.createElement(
+  const listHeader = /* @__PURE__ */ import_react26.default.createElement(
     AutocompleteDialogHeader,
     {
       title,
@@ -2781,14 +1983,14 @@ var AutocompleteDialog = ({
       onBlur
     }
   );
-  return /* @__PURE__ */ import_react33.default.createElement(Portal, null, /* @__PURE__ */ import_react33.default.createElement(import_react_native28.View, { style: [overlayStyle, style] }, /* @__PURE__ */ import_react33.default.createElement(import_react_native28.Animated.View, { style: [styles7.backdrop, { opacity: fadeAnim }] }), /* @__PURE__ */ import_react33.default.createElement(import_react_native28.Animated.View, { style: [styles7.dialogContainer, containerAnimatedStyle] }, /* @__PURE__ */ import_react33.default.createElement(
-    import_react_native28.View,
+  return /* @__PURE__ */ import_react26.default.createElement(Portal, null, /* @__PURE__ */ import_react26.default.createElement(import_react_native21.View, { style: [overlayStyle, style] }, /* @__PURE__ */ import_react26.default.createElement(import_react_native21.Animated.View, { style: [styles7.backdrop, { opacity: fadeAnim }] }), /* @__PURE__ */ import_react26.default.createElement(import_react_native21.Animated.View, { style: [styles7.dialogContainer, containerAnimatedStyle] }, /* @__PURE__ */ import_react26.default.createElement(
+    import_react_native21.View,
     {
       style: [styles7.container, { backgroundColor: theme.colors.background }]
     },
     listHeader,
-    /* @__PURE__ */ import_react33.default.createElement(
-      import_react_native28.FlatList,
+    /* @__PURE__ */ import_react26.default.createElement(
+      import_react_native21.FlatList,
       {
         data: items,
         renderItem: ({ item }) => item,
@@ -2802,8 +2004,8 @@ var AutocompleteDialog = ({
         showsVerticalScrollIndicator: false
       }
     ),
-    showCheckmark ? /* @__PURE__ */ import_react33.default.createElement(import_react_native28.View, { style: styles7.checkmarkButtonContainer }, /* @__PURE__ */ import_react33.default.createElement(
-      import_react_native28.Pressable,
+    showCheckmark ? /* @__PURE__ */ import_react26.default.createElement(import_react_native21.View, { style: styles7.checkmarkButtonContainer }, /* @__PURE__ */ import_react26.default.createElement(
+      import_react_native21.Pressable,
       {
         style: [
           styles7.checkmarkButton,
@@ -2813,14 +2015,15 @@ var AutocompleteDialog = ({
         accessibilityLabel: "Confirm",
         accessibilityRole: "button"
       },
-      checkmarkIcon ?? /* @__PURE__ */ import_react33.default.createElement(CheckmarkIcon, { color: checkmarkColor, size: 20 })
+      checkmarkIcon ?? /* @__PURE__ */ import_react26.default.createElement(CheckmarkIcon, { color: checkmarkColor, size: 20 })
     )) : null
   ))));
 };
 
 // src/components/autocomplete/autocomplete-trigger.tsx
-var import_react34 = __toESM(require("react"), 1);
-var import_react_native29 = require("react-native");
+var import_react27 = __toESM(require("react"), 1);
+var import_react_native22 = require("react-native");
+var import_icons3 = require("@xaui/icons");
 var AutocompleteTrigger = ({
   triggerRef,
   isDisabled,
@@ -2843,8 +2046,8 @@ var AutocompleteTrigger = ({
   onLayout: handleTriggerLayout
 }) => {
   const renderLabel = isLabelInside && label;
-  return /* @__PURE__ */ import_react34.default.createElement(
-    import_react_native29.Pressable,
+  return /* @__PURE__ */ import_react27.default.createElement(
+    import_react_native22.Pressable,
     {
       ref: triggerRef,
       onPress: handleTriggerPress,
@@ -2866,8 +2069,8 @@ var AutocompleteTrigger = ({
       accessibilityRole: "button",
       accessibilityState: { disabled: isDisabled }
     },
-    /* @__PURE__ */ import_react34.default.createElement(import_react_native29.View, { style: styles6.triggerContent }, isLabelInside && renderLabel, /* @__PURE__ */ import_react34.default.createElement(
-      import_react_native29.Text,
+    /* @__PURE__ */ import_react27.default.createElement(import_react_native22.View, { style: styles6.triggerContent }, isLabelInside && renderLabel, /* @__PURE__ */ import_react27.default.createElement(
+      import_react_native22.Text,
       {
         style: [
           styles6.triggerText,
@@ -2880,14 +2083,14 @@ var AutocompleteTrigger = ({
       },
       displayValue
     )),
-    isClearable && (currentSelectedKey || currentInputValue) ? /* @__PURE__ */ import_react34.default.createElement(
-      import_react_native29.TouchableOpacity,
+    isClearable && (currentSelectedKey || currentInputValue) ? /* @__PURE__ */ import_react27.default.createElement(
+      import_react_native22.TouchableOpacity,
       {
         onPress: handleClear,
         style: styles6.clearButton,
         hitSlop: { top: 8, right: 8, bottom: 8, left: 8 }
       },
-      clearIcon ?? /* @__PURE__ */ import_react34.default.createElement(CloseIcon, { color: theme.colors.foreground, size: 20 })
+      clearIcon ?? /* @__PURE__ */ import_react27.default.createElement(import_icons3.CloseIcon, { color: theme.colors.foreground, size: 20 })
     ) : null
   );
 };
@@ -2938,17 +2141,17 @@ var Autocomplete = ({
     onOpenChange,
     onClose
   });
-  const triggerRef = (0, import_react35.useRef)(null);
-  const [triggerLayout, setTriggerLayout] = (0, import_react35.useState)();
-  const handleTriggerLayout = (0, import_react35.useCallback)(() => {
+  const triggerRef = (0, import_react28.useRef)(null);
+  const [triggerLayout, setTriggerLayout] = (0, import_react28.useState)();
+  const handleTriggerLayout = (0, import_react28.useCallback)(() => {
     triggerRef.current?.measureInWindow((x, y, width, height) => {
       setTriggerLayout({ x, y, width, height });
     });
   }, []);
-  const items = (0, import_react35.useMemo)(() => {
-    const elements = import_react35.default.Children.toArray(children).filter(Boolean);
+  const items = (0, import_react28.useMemo)(() => {
+    const elements = import_react28.default.Children.toArray(children).filter(Boolean);
     return elements.map((child, index) => {
-      if (!import_react35.default.isValidElement(child)) {
+      if (!import_react28.default.isValidElement(child)) {
         return null;
       }
       const key = child.props.value ?? String(index);
@@ -2960,7 +2163,7 @@ var Autocomplete = ({
       };
     }).filter((item) => item !== null);
   }, [children]);
-  const filteredItems = (0, import_react35.useMemo)(() => {
+  const filteredItems = (0, import_react28.useMemo)(() => {
     if (disableLocalFilter || !currentInputValue.trim()) {
       return items;
     }
@@ -2980,7 +2183,7 @@ var Autocomplete = ({
   const helperColor = useAutocompleteHelperColor(isInvalid);
   const selectedItem = items.find((item) => item.key === currentSelectedKey);
   const displayValue = forceSelection ? selectedItem?.labelText || placeholder : currentInputValue || placeholder;
-  const handleInputChange = (0, import_react35.useCallback)(
+  const handleInputChange = (0, import_react28.useCallback)(
     (text) => {
       updateInputValue(text);
       const selectedLabel = selectedItem?.labelText ?? "";
@@ -2997,7 +2200,7 @@ var Autocomplete = ({
       currentSelectedKey
     ]
   );
-  const handleItemSelection = (0, import_react35.useCallback)(
+  const handleItemSelection = (0, import_react28.useCallback)(
     (key, itemLabel) => {
       if (isDisabled) {
         return;
@@ -3005,16 +2208,16 @@ var Autocomplete = ({
       updateSelection(key);
       updateInputValue(itemLabel);
       setTimeout(() => {
-        import_react_native30.Keyboard.dismiss();
+        import_react_native23.Keyboard.dismiss();
         setOpen(false);
       }, 50);
     },
     [isDisabled, updateSelection, updateInputValue, setOpen]
   );
-  const handleCheckmark = (0, import_react35.useCallback)(() => {
+  const handleCheckmark = (0, import_react28.useCallback)(() => {
     setOpen(false);
   }, [setOpen]);
-  const handleClear = (0, import_react35.useCallback)(() => {
+  const handleClear = (0, import_react28.useCallback)(() => {
     if (isDisabled) {
       return;
     }
@@ -3022,7 +2225,7 @@ var Autocomplete = ({
     updateInputValue("");
     onClear?.();
   }, [isDisabled, updateSelection, updateInputValue, onClear]);
-  const handleTriggerPress = (0, import_react35.useCallback)(() => {
+  const handleTriggerPress = (0, import_react28.useCallback)(() => {
     if (!isDisabled) {
       if (selectedItem && !currentInputValue) {
         updateInputValue(selectedItem.labelText);
@@ -3041,7 +2244,7 @@ var Autocomplete = ({
       handleItemSelection(item.key, item.labelText);
       itemProps.onSelected?.();
     };
-    return import_react35.default.cloneElement(item.element, {
+    return import_react28.default.cloneElement(item.element, {
       key: item.key,
       isDisabled: itemDisabled,
       isSelected: itemSelected,
@@ -3052,10 +2255,10 @@ var Autocomplete = ({
   const isLabelInside = labelPlacement === "inside";
   const isLabelOutsideLeft = labelPlacement === "outside-left";
   const isLabelOutside = labelPlacement === "outside" || labelPlacement === "outside-top";
-  const renderLabel = label ? typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ import_react35.default.createElement(import_react_native30.Text, { style: [styles6.label, labelStyle] }, label) : /* @__PURE__ */ import_react35.default.createElement(import_react_native30.View, null, label) : null;
+  const renderLabel = label ? typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ import_react28.default.createElement(import_react_native23.Text, { style: [styles6.label, labelStyle] }, label) : /* @__PURE__ */ import_react28.default.createElement(import_react_native23.View, null, label) : null;
   const shouldShowHelper = Boolean(description || errorMessage);
   const helperContent = isInvalid && errorMessage ? errorMessage : description;
-  const triggerContent = /* @__PURE__ */ import_react35.default.createElement(
+  const triggerContent = /* @__PURE__ */ import_react28.default.createElement(
     AutocompleteTrigger,
     {
       triggerRef,
@@ -3080,7 +2283,7 @@ var Autocomplete = ({
     }
   );
   const labelBlock = isLabelOutside || isLabelInside ? renderLabel : null;
-  return /* @__PURE__ */ import_react35.default.createElement(import_react_native30.View, { style: [styles6.container, fullWidth ? styles6.fullWidth : styles6.minWidth] }, isLabelOutside && labelBlock, isLabelOutsideLeft ? /* @__PURE__ */ import_react35.default.createElement(import_react_native30.View, { style: styles6.outsideLeftRow }, renderLabel, triggerContent) : triggerContent, shouldShowHelper && helperContent ? typeof helperContent === "string" || typeof helperContent === "number" ? /* @__PURE__ */ import_react35.default.createElement(import_react_native30.Text, { style: [styles6.helperText, { color: helperColor }] }, helperContent) : /* @__PURE__ */ import_react35.default.createElement(import_react_native30.View, null, helperContent) : null, /* @__PURE__ */ import_react35.default.createElement(
+  return /* @__PURE__ */ import_react28.default.createElement(import_react_native23.View, { style: [styles6.container, fullWidth ? styles6.fullWidth : styles6.minWidth] }, isLabelOutside && labelBlock, isLabelOutsideLeft ? /* @__PURE__ */ import_react28.default.createElement(import_react_native23.View, { style: styles6.outsideLeftRow }, renderLabel, triggerContent) : triggerContent, shouldShowHelper && helperContent ? typeof helperContent === "string" || typeof helperContent === "number" ? /* @__PURE__ */ import_react28.default.createElement(import_react_native23.Text, { style: [styles6.helperText, { color: helperColor }] }, helperContent) : /* @__PURE__ */ import_react28.default.createElement(import_react_native23.View, null, helperContent) : null, /* @__PURE__ */ import_react28.default.createElement(
     AutocompleteDialog,
     {
       visible: isOpen,
@@ -3094,17 +2297,17 @@ var Autocomplete = ({
       onClose: () => setOpen(false),
       onCheckmark: handleCheckmark
     },
-    /* @__PURE__ */ import_react35.default.createElement(AutocompleteContext.Provider, { value: { size, themeColor, isDisabled } }, showEmptyMessage ? /* @__PURE__ */ import_react35.default.createElement(import_react_native30.Text, { style: [styles6.emptyMessage, { color: theme.colors.foreground }] }, "No results found") : listItems)
+    /* @__PURE__ */ import_react28.default.createElement(AutocompleteContext.Provider, { value: { size, themeColor, isDisabled } }, showEmptyMessage ? /* @__PURE__ */ import_react28.default.createElement(import_react_native23.Text, { style: [styles6.emptyMessage, { color: theme.colors.foreground }] }, "No results found") : listItems)
   ));
 };
 
 // src/components/autocomplete/autocomplete-item.tsx
-var import_react37 = __toESM(require("react"), 1);
-var import_react_native32 = require("react-native");
+var import_react30 = __toESM(require("react"), 1);
+var import_react_native25 = require("react-native");
 
 // src/components/autocomplete/autocomplete-item.style.ts
-var import_react_native31 = require("react-native");
-var styles8 = import_react_native31.StyleSheet.create({
+var import_react_native24 = require("react-native");
+var styles8 = import_react_native24.StyleSheet.create({
   item: {
     flexDirection: "row",
     alignItems: "center",
@@ -3126,11 +2329,11 @@ var styles8 = import_react_native31.StyleSheet.create({
 });
 
 // src/components/autocomplete/autocomplete-item.hook.ts
-var import_react36 = require("react");
-var import_core26 = require("@xaui/core");
+var import_react29 = require("react");
+var import_core19 = require("@xaui/core");
 var useAutocompleteItemSizeStyles = (size) => {
   const theme = useXUITheme();
-  return (0, import_react36.useMemo)(() => {
+  return (0, import_react29.useMemo)(() => {
     const sizes = {
       xs: {
         paddingVertical: theme.spacing.sm,
@@ -3162,15 +2365,15 @@ var useAutocompleteItemSizeStyles = (size) => {
 };
 var useAutocompleteItemBackgroundColor = (themeColor, isSelected) => {
   const theme = useXUITheme();
-  const safeThemeColor = (0, import_core26.getSafeThemeColor)(themeColor);
+  const safeThemeColor = (0, import_core19.getSafeThemeColor)(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
-  return (0, import_react36.useMemo)(() => {
+  return (0, import_react29.useMemo)(() => {
     return "transparent";
   }, [isSelected, colorScheme]);
 };
 var useAutocompleteItemTextColors = () => {
   const theme = useXUITheme();
-  return (0, import_react36.useMemo)(() => {
+  return (0, import_react29.useMemo)(() => {
     return {
       textColor: theme.colors.foreground,
       descriptionColor: theme.colors.foreground
@@ -3179,9 +2382,9 @@ var useAutocompleteItemTextColors = () => {
 };
 var useAutocompleteItemCheckmarkColor = (themeColor) => {
   const theme = useXUITheme();
-  const safeThemeColor = (0, import_core26.getSafeThemeColor)(themeColor);
+  const safeThemeColor = (0, import_core19.getSafeThemeColor)(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
-  return (0, import_react36.useMemo)(() => {
+  return (0, import_react29.useMemo)(() => {
     if (themeColor === "default") {
       return theme.colors.primary.main;
     }
@@ -3189,7 +2392,7 @@ var useAutocompleteItemCheckmarkColor = (themeColor) => {
   }, [themeColor, colorScheme, theme]);
 };
 var useAutocompleteItemStyles = (isSelected, _isDisabled) => {
-  const context = (0, import_react36.useContext)(AutocompleteContext);
+  const context = (0, import_react29.useContext)(AutocompleteContext);
   const backgroundColor = useAutocompleteItemBackgroundColor(
     context.themeColor,
     isSelected
@@ -3218,7 +2421,7 @@ var AutocompleteItem = ({
   customAppearance,
   onSelected
 }) => {
-  const context = (0, import_react37.useContext)(AutocompleteContext);
+  const context = (0, import_react30.useContext)(AutocompleteContext);
   const size = context?.size ?? defaultSize;
   const isItemDisabled = context?.isDisabled ? true : isDisabled;
   const sizeStyles = useAutocompleteItemSizeStyles(size);
@@ -3229,8 +2432,8 @@ var AutocompleteItem = ({
     }
     onSelected?.();
   };
-  return /* @__PURE__ */ import_react37.default.createElement(
-    import_react_native32.Pressable,
+  return /* @__PURE__ */ import_react30.default.createElement(
+    import_react_native25.Pressable,
     {
       onPress: handlePress,
       disabled: isItemDisabled,
@@ -3246,8 +2449,8 @@ var AutocompleteItem = ({
       ]
     },
     startContent,
-    /* @__PURE__ */ import_react37.default.createElement(import_react_native32.View, { style: styles8.content }, /* @__PURE__ */ import_react37.default.createElement(
-      import_react_native32.Text,
+    /* @__PURE__ */ import_react30.default.createElement(import_react_native25.View, { style: styles8.content }, /* @__PURE__ */ import_react30.default.createElement(
+      import_react_native25.Text,
       {
         style: [
           styles8.title,
@@ -3256,8 +2459,8 @@ var AutocompleteItem = ({
         ]
       },
       label
-    ), description && /* @__PURE__ */ import_react37.default.createElement(
-      import_react_native32.Text,
+    ), description && /* @__PURE__ */ import_react30.default.createElement(
+      import_react_native25.Text,
       {
         style: [
           styles8.description,
@@ -3271,22 +2474,22 @@ var AutocompleteItem = ({
 };
 
 // src/components/datepicker/datepicker.tsx
-var import_react47 = __toESM(require("react"), 1);
-var import_react_native42 = require("react-native");
+var import_react40 = __toESM(require("react"), 1);
+var import_react_native35 = require("react-native");
 
 // src/components/datepicker/datepicker.hook.ts
-var import_react38 = require("react");
-var import_core28 = require("@xaui/core");
+var import_react31 = require("react");
+var import_core21 = require("@xaui/core");
 var import_palette3 = require("@xaui/core/palette");
 var useDatePickerColorScheme = (themeColor) => {
   const theme = useXUITheme();
-  const safeThemeColor = (0, import_core28.getSafeThemeColor)(themeColor);
+  const safeThemeColor = (0, import_core21.getSafeThemeColor)(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   return { theme, colorScheme };
 };
 var useDatePickerSizeStyles = (size) => {
   const theme = useXUITheme();
-  return (0, import_react38.useMemo)(() => {
+  return (0, import_react31.useMemo)(() => {
     const sizes = {
       xs: {
         minHeight: 34,
@@ -3322,7 +2525,7 @@ var useDatePickerSizeStyles = (size) => {
 };
 var useDatePickerRadiusStyles = (radius) => {
   const theme = useXUITheme();
-  return (0, import_react38.useMemo)(() => {
+  return (0, import_react31.useMemo)(() => {
     const radii = {
       none: theme.borderRadius.none,
       sm: theme.borderRadius.sm,
@@ -3335,7 +2538,7 @@ var useDatePickerRadiusStyles = (radius) => {
 };
 var useDatePickerVariantStyles = (themeColor, variant, isInvalid) => {
   const { theme, colorScheme } = useDatePickerColorScheme(themeColor);
-  return (0, import_react38.useMemo)(() => {
+  return (0, import_react31.useMemo)(() => {
     let borderColor = isInvalid ? theme.colors.danger.main : colorScheme.main;
     if ((variant === "outlined" || variant === "faded") && themeColor === "default") {
       borderColor = import_palette3.colors.gray[300];
@@ -3370,7 +2573,7 @@ var useDatePickerVariantStyles = (themeColor, variant, isInvalid) => {
 };
 var useDatePickerLabelStyle = (themeColor, isInvalid, labelSize) => {
   const { theme, colorScheme } = useDatePickerColorScheme(themeColor);
-  return (0, import_react38.useMemo)(() => {
+  return (0, import_react31.useMemo)(() => {
     let baseColor = theme.colors.foreground;
     if (isInvalid) {
       baseColor = theme.colors.danger.main;
@@ -3385,7 +2588,7 @@ var useDatePickerLabelStyle = (themeColor, isInvalid, labelSize) => {
 };
 var useDatePickerHelperColor = (isInvalid) => {
   const theme = useXUITheme();
-  return (0, import_react38.useMemo)(() => {
+  return (0, import_react31.useMemo)(() => {
     if (isInvalid) {
       return theme.colors.danger.main;
     }
@@ -3394,17 +2597,17 @@ var useDatePickerHelperColor = (isInvalid) => {
 };
 
 // src/components/datepicker/datepicker.state.hook.ts
-var import_react39 = require("react");
+var import_react32 = require("react");
 var useDatePickerState = ({
   value,
   defaultValue,
   onChange
 }) => {
-  const [internalValue, setInternalValue] = (0, import_react39.useState)(
+  const [internalValue, setInternalValue] = (0, import_react32.useState)(
     defaultValue ?? null
   );
   const selectedDate = value !== void 0 ? value : internalValue;
-  const updateDate = (0, import_react39.useCallback)(
+  const updateDate = (0, import_react32.useCallback)(
     (date) => {
       if (value === void 0) {
         setInternalValue(date);
@@ -3421,8 +2624,8 @@ var useDatePickerOpenState = ({
   onOpen,
   onClose
 }) => {
-  const [isOpen, setInternalOpen] = (0, import_react39.useState)(false);
-  const setOpen = (0, import_react39.useCallback)(
+  const [isOpen, setInternalOpen] = (0, import_react32.useState)(false);
+  const setOpen = (0, import_react32.useCallback)(
     (open) => {
       if (isDisabled && open) return;
       setInternalOpen(open);
@@ -3439,30 +2642,30 @@ var useDatePickerOpenState = ({
 };
 var useDatePickerViewState = (initialDate) => {
   const now = /* @__PURE__ */ new Date();
-  const [viewDate, setViewDate] = (0, import_react39.useState)(initialDate ?? now);
-  const [viewMode, setViewMode] = (0, import_react39.useState)("calendar");
-  const goToPreviousMonth = (0, import_react39.useCallback)(() => {
+  const [viewDate, setViewDate] = (0, import_react32.useState)(initialDate ?? now);
+  const [viewMode, setViewMode] = (0, import_react32.useState)("calendar");
+  const goToPreviousMonth = (0, import_react32.useCallback)(() => {
     setViewDate((prev) => new Date(prev.getFullYear(), prev.getMonth() - 1, 1));
   }, []);
-  const goToNextMonth = (0, import_react39.useCallback)(() => {
+  const goToNextMonth = (0, import_react32.useCallback)(() => {
     setViewDate((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1));
   }, []);
-  const goToYear = (0, import_react39.useCallback)((year) => {
+  const goToYear = (0, import_react32.useCallback)((year) => {
     setViewDate((prev) => new Date(year, prev.getMonth(), 1));
     setViewMode("month");
   }, []);
-  const goToMonth = (0, import_react39.useCallback)((month) => {
+  const goToMonth = (0, import_react32.useCallback)((month) => {
     setViewDate((prev) => new Date(prev.getFullYear(), month, 1));
     setViewMode("calendar");
   }, []);
-  const goToToday = (0, import_react39.useCallback)(() => {
+  const goToToday = (0, import_react32.useCallback)(() => {
     setViewDate(/* @__PURE__ */ new Date());
     setViewMode("calendar");
   }, []);
-  const toggleYearPicker = (0, import_react39.useCallback)(() => {
+  const toggleYearPicker = (0, import_react32.useCallback)(() => {
     setViewMode((prev) => prev === "year" ? "calendar" : "year");
   }, []);
-  const syncViewToDate = (0, import_react39.useCallback)((date) => {
+  const syncViewToDate = (0, import_react32.useCallback)((date) => {
     setViewDate(date);
   }, []);
   return {
@@ -3486,9 +2689,7 @@ var getWeekdayNames = (locale, firstDayOfWeek) => {
   const days = [];
   for (let i = 0; i < 7; i++) {
     const date = new Date(2024, 0, 1 + offset + i);
-    days.push(
-      date.toLocaleDateString(locale, { weekday: "short" }).slice(0, 2)
-    );
+    days.push(date.toLocaleDateString(locale, { weekday: "short" }).slice(0, 2));
   }
   return days;
 };
@@ -3648,8 +2849,8 @@ var getFirstDayOfWeek = (locale) => {
 };
 
 // src/components/datepicker/datepicker.style.ts
-var import_react_native33 = require("react-native");
-var styles9 = import_react_native33.StyleSheet.create({
+var import_react_native26 = require("react-native");
+var styles9 = import_react_native26.StyleSheet.create({
   container: {
     gap: 6,
     position: "relative"
@@ -3699,13 +2900,13 @@ var styles9 = import_react_native33.StyleSheet.create({
 });
 
 // src/components/dialogs/datepicker-dialog/datepicker-dialog.tsx
-var import_react45 = __toESM(require("react"), 1);
-var import_react_native40 = require("react-native");
+var import_react38 = __toESM(require("react"), 1);
+var import_react_native33 = require("react-native");
 var import_react_native_gesture_handler2 = require("react-native-gesture-handler");
 
 // src/components/dialogs/datepicker-dialog/datepicker-dialog.animation.ts
-var import_react40 = require("react");
-var import_react_native34 = require("react-native");
+var import_react33 = require("react");
+var import_react_native27 = require("react-native");
 var useDatePickerDialogAnimation = ({
   visible,
   fadeAnim,
@@ -3713,26 +2914,26 @@ var useDatePickerDialogAnimation = ({
   scaleAnim,
   onCloseComplete
 }) => {
-  const [shouldRender, setShouldRender] = (0, import_react40.useState)(false);
-  const isClosingRef = (0, import_react40.useRef)(false);
-  (0, import_react40.useEffect)(() => {
+  const [shouldRender, setShouldRender] = (0, import_react33.useState)(false);
+  const isClosingRef = (0, import_react33.useRef)(false);
+  (0, import_react33.useEffect)(() => {
     if (visible) {
       setShouldRender(true);
       isClosingRef.current = false;
-      import_react_native34.Animated.parallel([
-        import_react_native34.Animated.timing(fadeAnim, {
+      import_react_native27.Animated.parallel([
+        import_react_native27.Animated.timing(fadeAnim, {
           toValue: 1,
           duration: 220,
           useNativeDriver: true
         }),
-        import_react_native34.Animated.spring(slideAnim, {
+        import_react_native27.Animated.spring(slideAnim, {
           toValue: 1,
           useNativeDriver: true,
           damping: 20,
           stiffness: 300,
           mass: 0.8
         }),
-        import_react_native34.Animated.spring(scaleAnim, {
+        import_react_native27.Animated.spring(scaleAnim, {
           toValue: 1,
           useNativeDriver: true,
           damping: 18,
@@ -3744,23 +2945,23 @@ var useDatePickerDialogAnimation = ({
     }
     if (!shouldRender || isClosingRef.current) return;
     isClosingRef.current = true;
-    import_react_native34.Animated.parallel([
-      import_react_native34.Animated.timing(fadeAnim, {
+    import_react_native27.Animated.parallel([
+      import_react_native27.Animated.timing(fadeAnim, {
         toValue: 0,
         duration: 180,
-        easing: import_react_native34.Easing.out(import_react_native34.Easing.ease),
+        easing: import_react_native27.Easing.out(import_react_native27.Easing.ease),
         useNativeDriver: true
       }),
-      import_react_native34.Animated.timing(slideAnim, {
+      import_react_native27.Animated.timing(slideAnim, {
         toValue: 0,
         duration: 180,
-        easing: import_react_native34.Easing.out(import_react_native34.Easing.ease),
+        easing: import_react_native27.Easing.out(import_react_native27.Easing.ease),
         useNativeDriver: true
       }),
-      import_react_native34.Animated.timing(scaleAnim, {
+      import_react_native27.Animated.timing(scaleAnim, {
         toValue: 0,
         duration: 180,
-        easing: import_react_native34.Easing.out(import_react_native34.Easing.ease),
+        easing: import_react_native27.Easing.out(import_react_native27.Easing.ease),
         useNativeDriver: true
       })
     ]).start(() => {
@@ -3774,9 +2975,9 @@ var useDatePickerDialogAnimation = ({
 var useViewTransitionAnimation = ({
   fadeAnim
 }) => {
-  const animate = (0, import_react40.useCallback)(() => {
+  const animate = (0, import_react33.useCallback)(() => {
     fadeAnim.setValue(0);
-    import_react_native34.Animated.timing(fadeAnim, {
+    import_react_native27.Animated.timing(fadeAnim, {
       toValue: 1,
       duration: 200,
       useNativeDriver: true
@@ -3788,20 +2989,20 @@ var useMonthSlideAnimation = ({
   slideAnim,
   fadeAnim
 }) => {
-  const animate = (0, import_react40.useCallback)(
+  const animate = (0, import_react33.useCallback)(
     (direction) => {
       const startX = direction === "right" ? 60 : -60;
       slideAnim.setValue(startX);
       fadeAnim.setValue(0);
-      import_react_native34.Animated.parallel([
-        import_react_native34.Animated.spring(slideAnim, {
+      import_react_native27.Animated.parallel([
+        import_react_native27.Animated.spring(slideAnim, {
           toValue: 0,
           useNativeDriver: true,
           damping: 22,
           stiffness: 280,
           mass: 0.7
         }),
-        import_react_native34.Animated.timing(fadeAnim, {
+        import_react_native27.Animated.timing(fadeAnim, {
           toValue: 1,
           duration: 180,
           useNativeDriver: true
@@ -3814,15 +3015,15 @@ var useMonthSlideAnimation = ({
 };
 
 // src/components/dialogs/datepicker-dialog/datepicker-dialog-calendar.tsx
-var import_react41 = __toESM(require("react"), 1);
-var import_react_native36 = require("react-native");
+var import_react34 = __toESM(require("react"), 1);
+var import_react_native29 = require("react-native");
 var import_react_native_gesture_handler = require("react-native-gesture-handler");
 
 // src/components/dialogs/datepicker-dialog/datepicker-dialog.style.ts
-var import_react_native35 = require("react-native");
-var styles10 = import_react_native35.StyleSheet.create({
+var import_react_native28 = require("react-native");
+var styles10 = import_react_native28.StyleSheet.create({
   backdrop: {
-    ...import_react_native35.StyleSheet.absoluteFillObject,
+    ...import_react_native28.StyleSheet.absoluteFillObject,
     backgroundColor: "rgba(0, 0, 0, 0.5)"
   },
   dialogContainer: {
@@ -4034,11 +3235,11 @@ var AnimatedDayCell = ({
   const isDefault = themeColor === "default";
   const accentColor = isDefault ? theme.colors.foreground : colorScheme.main;
   const accentFg = isDefault ? theme.colors.background : colorScheme.foreground;
-  const scaleAnim = (0, import_react41.useRef)(new import_react_native36.Animated.Value(isSelected ? 1 : 0)).current;
-  (0, import_react41.useEffect)(() => {
+  const scaleAnim = (0, import_react34.useRef)(new import_react_native29.Animated.Value(isSelected ? 1 : 0)).current;
+  (0, import_react34.useEffect)(() => {
     if (isSelected) {
       scaleAnim.setValue(0.92);
-      import_react_native36.Animated.spring(scaleAnim, {
+      import_react_native29.Animated.spring(scaleAnim, {
         toValue: 1,
         useNativeDriver: true,
         damping: 20,
@@ -4050,8 +3251,8 @@ var AnimatedDayCell = ({
     }
   }, [isSelected, scaleAnim]);
   const animatedStyle = isSelected ? { transform: [{ scale: scaleAnim }] } : void 0;
-  return /* @__PURE__ */ import_react41.default.createElement(
-    import_react_native36.Pressable,
+  return /* @__PURE__ */ import_react34.default.createElement(
+    import_react_native29.Pressable,
     {
       style: [
         styles10.dayCell,
@@ -4073,8 +3274,8 @@ var AnimatedDayCell = ({
         disabled: isDisabled
       }
     },
-    isSelected ? /* @__PURE__ */ import_react41.default.createElement(
-      import_react_native36.Animated.View,
+    isSelected ? /* @__PURE__ */ import_react34.default.createElement(
+      import_react_native29.Animated.View,
       {
         style: [
           styles10.selectedCellInner,
@@ -4082,9 +3283,9 @@ var AnimatedDayCell = ({
           animatedStyle
         ]
       },
-      /* @__PURE__ */ import_react41.default.createElement(import_react_native36.Text, { style: [styles10.dayText, { color: accentFg }] }, day)
-    ) : /* @__PURE__ */ import_react41.default.createElement(
-      import_react_native36.Text,
+      /* @__PURE__ */ import_react34.default.createElement(import_react_native29.Text, { style: [styles10.dayText, { color: accentFg }] }, day)
+    ) : /* @__PURE__ */ import_react34.default.createElement(
+      import_react_native29.Text,
       {
         style: [
           styles10.dayText,
@@ -4114,12 +3315,12 @@ var DatePickerDialogCalendar = ({
   onNextMonth
 }) => {
   const theme = useXUITheme();
-  const swipeHandledRef = (0, import_react41.useRef)(false);
-  const weekdays = (0, import_react41.useMemo)(
+  const swipeHandledRef = (0, import_react34.useRef)(false);
+  const weekdays = (0, import_react34.useMemo)(
     () => getWeekdayNames(locale, firstDayOfWeek),
     [locale, firstDayOfWeek]
   );
-  const days = (0, import_react41.useMemo)(
+  const days = (0, import_react34.useMemo)(
     () => getCalendarDays(
       viewDate.getFullYear(),
       viewDate.getMonth(),
@@ -4129,7 +3330,7 @@ var DatePickerDialogCalendar = ({
     ),
     [viewDate, firstDayOfWeek, minDate, maxDate]
   );
-  const weeks = (0, import_react41.useMemo)(() => {
+  const weeks = (0, import_react34.useMemo)(() => {
     const result = [];
     for (let i = 0; i < days.length; i += 7) {
       result.push(days.slice(i, i + 7));
@@ -4154,15 +3355,15 @@ var DatePickerDialogCalendar = ({
     }
     onSwipeEnd(event);
   };
-  return /* @__PURE__ */ import_react41.default.createElement(
+  return /* @__PURE__ */ import_react34.default.createElement(
     import_react_native_gesture_handler.PanGestureHandler,
     {
       activeOffsetX: [-12, 12],
       failOffsetY: [-12, 12],
       onHandlerStateChange: onSwipeStateChange
     },
-    /* @__PURE__ */ import_react41.default.createElement(import_react_native36.View, { style: styles10.calendarGrid }, /* @__PURE__ */ import_react41.default.createElement(import_react_native36.View, { style: styles10.weekdayRow }, weekdays.map((day, index) => /* @__PURE__ */ import_react41.default.createElement(import_react_native36.View, { key: index, style: styles10.weekdayCell }, /* @__PURE__ */ import_react41.default.createElement(
-      import_react_native36.Text,
+    /* @__PURE__ */ import_react34.default.createElement(import_react_native29.View, { style: styles10.calendarGrid }, /* @__PURE__ */ import_react34.default.createElement(import_react_native29.View, { style: styles10.weekdayRow }, weekdays.map((day, index) => /* @__PURE__ */ import_react34.default.createElement(import_react_native29.View, { key: index, style: styles10.weekdayCell }, /* @__PURE__ */ import_react34.default.createElement(
+      import_react_native29.Text,
       {
         style: [
           styles10.weekdayText,
@@ -4170,7 +3371,7 @@ var DatePickerDialogCalendar = ({
         ]
       },
       day
-    )))), weeks.map((week, weekIndex) => /* @__PURE__ */ import_react41.default.createElement(import_react_native36.View, { key: weekIndex, style: styles10.dayRow }, week.map((dayInfo, dayIndex) => /* @__PURE__ */ import_react41.default.createElement(
+    )))), weeks.map((week, weekIndex) => /* @__PURE__ */ import_react34.default.createElement(import_react_native29.View, { key: weekIndex, style: styles10.dayRow }, week.map((dayInfo, dayIndex) => /* @__PURE__ */ import_react34.default.createElement(
       AnimatedDayCell,
       {
         key: dayIndex,
@@ -4189,8 +3390,12 @@ var DatePickerDialogCalendar = ({
 };
 
 // src/components/dialogs/datepicker-dialog/datepicker-dialog-header.tsx
-var import_react42 = __toESM(require("react"), 1);
-var import_react_native37 = require("react-native");
+var import_react35 = __toESM(require("react"), 1);
+var import_react_native30 = require("react-native");
+var import_chevron_down = require("@xaui/icons/chevron-down");
+var import_chevron_left = require("@xaui/icons/chevron-left");
+var import_chevron_right = require("@xaui/icons/chevron-right");
+var import_close = require("@xaui/icons/close");
 var DatePickerDialogHeader = ({
   viewDate,
   selectedDate,
@@ -4204,89 +3409,77 @@ var DatePickerDialogHeader = ({
 }) => {
   const theme = useXUITheme();
   const colorScheme = theme.colors[themeColor] ?? theme.colors.primary;
-  const dateText = (0, import_react42.useMemo)(() => {
+  const dateText = (0, import_react35.useMemo)(() => {
     if (!selectedDate) return "---";
     return formatDate(selectedDate, locale);
   }, [selectedDate, locale]);
-  const monthYearLabel = (0, import_react42.useMemo)(() => {
+  const monthYearLabel = (0, import_react35.useMemo)(() => {
     const month = getMonthName(viewDate.getMonth(), locale);
     return `${month} ${viewDate.getFullYear()}`;
   }, [viewDate, locale]);
-  return /* @__PURE__ */ import_react42.default.createElement(import_react42.default.Fragment, null, /* @__PURE__ */ import_react42.default.createElement(import_react_native37.View, { style: [styles10.header, { backgroundColor: colorScheme.main }] }, /* @__PURE__ */ import_react42.default.createElement(import_react_native37.Text, { style: [styles10.headerLabel, { color: colorScheme.foreground }] }, selectDateLabel), /* @__PURE__ */ import_react42.default.createElement(import_react_native37.View, { style: styles10.headerDateRow }, /* @__PURE__ */ import_react42.default.createElement(import_react_native37.Text, { style: [styles10.headerDate, { color: colorScheme.foreground }] }, dateText), /* @__PURE__ */ import_react42.default.createElement(
-    import_react_native37.Pressable,
+  return /* @__PURE__ */ import_react35.default.createElement(import_react35.default.Fragment, null, /* @__PURE__ */ import_react35.default.createElement(import_react_native30.View, { style: [styles10.header, { backgroundColor: colorScheme.main }] }, /* @__PURE__ */ import_react35.default.createElement(import_react_native30.Text, { style: [styles10.headerLabel, { color: colorScheme.foreground }] }, selectDateLabel), /* @__PURE__ */ import_react35.default.createElement(import_react_native30.View, { style: styles10.headerDateRow }, /* @__PURE__ */ import_react35.default.createElement(import_react_native30.Text, { style: [styles10.headerDate, { color: colorScheme.foreground }] }, dateText), selectedDate ? /* @__PURE__ */ import_react35.default.createElement(
+    import_react_native30.Pressable,
     {
       onPress: onClearValue,
       hitSlop: { top: 8, right: 8, bottom: 8, left: 8 },
       accessibilityLabel: "Clear date",
       accessibilityRole: "button"
     },
-    /* @__PURE__ */ import_react42.default.createElement(CloseIcon, { size: 20, color: colorScheme.foreground })
-  ))), /* @__PURE__ */ import_react42.default.createElement(import_react_native37.View, { style: styles10.navigationRow }, /* @__PURE__ */ import_react42.default.createElement(
-    import_react_native37.Pressable,
+    /* @__PURE__ */ import_react35.default.createElement(import_close.CloseIcon, { size: 20, color: colorScheme.foreground })
+  ) : null)), /* @__PURE__ */ import_react35.default.createElement(import_react_native30.View, { style: styles10.navigationRow }, /* @__PURE__ */ import_react35.default.createElement(
+    import_react_native30.Pressable,
     {
       style: styles10.monthYearButton,
       onPress: onToggleYearPicker,
       accessibilityLabel: `${monthYearLabel}, tap to change`,
       accessibilityRole: "button"
     },
-    /* @__PURE__ */ import_react42.default.createElement(
-      import_react_native37.Text,
-      {
-        style: [styles10.monthYearText, { color: theme.colors.foreground }]
-      },
-      monthYearLabel
-    ),
-    /* @__PURE__ */ import_react42.default.createElement(
-      ChevronDownIcon,
-      {
-        size: 18,
-        color: theme.colors.foreground
-      }
-    )
-  ), /* @__PURE__ */ import_react42.default.createElement(import_react_native37.View, { style: styles10.navButtons }, /* @__PURE__ */ import_react42.default.createElement(
-    import_react_native37.Pressable,
+    /* @__PURE__ */ import_react35.default.createElement(import_react_native30.Text, { style: [styles10.monthYearText, { color: theme.colors.foreground }] }, monthYearLabel),
+    /* @__PURE__ */ import_react35.default.createElement(import_chevron_down.ChevronDownIcon, { size: 18, color: theme.colors.foreground })
+  ), /* @__PURE__ */ import_react35.default.createElement(import_react_native30.View, { style: styles10.navButtons }, /* @__PURE__ */ import_react35.default.createElement(
+    import_react_native30.Pressable,
     {
       style: styles10.navButton,
       onPress: onPreviousMonth,
       accessibilityLabel: "Previous month",
       accessibilityRole: "button"
     },
-    /* @__PURE__ */ import_react42.default.createElement(ChevronLeftIcon, { size: 20, color: theme.colors.foreground })
-  ), /* @__PURE__ */ import_react42.default.createElement(
-    import_react_native37.Pressable,
+    /* @__PURE__ */ import_react35.default.createElement(import_chevron_left.ChevronLeftIcon, { size: 20, color: theme.colors.foreground })
+  ), /* @__PURE__ */ import_react35.default.createElement(
+    import_react_native30.Pressable,
     {
       style: styles10.navButton,
       onPress: onNextMonth,
       accessibilityLabel: "Next month",
       accessibilityRole: "button"
     },
-    /* @__PURE__ */ import_react42.default.createElement(ChevronRightIcon, { size: 20, color: theme.colors.foreground })
+    /* @__PURE__ */ import_react35.default.createElement(import_chevron_right.ChevronRightIcon, { size: 20, color: theme.colors.foreground })
   ))));
 };
 
 // src/components/dialogs/datepicker-dialog/datepicker-dialog-month-picker.tsx
-var import_react43 = __toESM(require("react"), 1);
-var import_react_native38 = require("react-native");
+var import_react36 = __toESM(require("react"), 1);
+var import_react_native31 = require("react-native");
 var DatePickerDialogMonthPicker = ({ viewDate, locale, themeColor, onSelectMonth }) => {
   const theme = useXUITheme();
   const colorScheme = theme.colors[themeColor] ?? theme.colors.primary;
   const isDefault = themeColor === "default";
   const accentColor = isDefault ? theme.colors.foreground : colorScheme.main;
   const accentFg = isDefault ? theme.colors.background : colorScheme.foreground;
-  const months = (0, import_react43.useMemo)(() => getMonthNames(locale), [locale]);
+  const months = (0, import_react36.useMemo)(() => getMonthNames(locale), [locale]);
   const currentMonth = viewDate.getMonth();
-  const groupAnim = (0, import_react43.useRef)(new import_react_native38.Animated.Value(0)).current;
-  (0, import_react43.useEffect)(() => {
+  const groupAnim = (0, import_react36.useRef)(new import_react_native31.Animated.Value(0)).current;
+  (0, import_react36.useEffect)(() => {
     groupAnim.setValue(0);
-    import_react_native38.Animated.timing(groupAnim, {
+    import_react_native31.Animated.timing(groupAnim, {
       toValue: 1,
       duration: 220,
-      easing: import_react_native38.Easing.out(import_react_native38.Easing.cubic),
+      easing: import_react_native31.Easing.out(import_react_native31.Easing.cubic),
       useNativeDriver: true
     }).start();
   }, [groupAnim]);
-  return /* @__PURE__ */ import_react43.default.createElement(import_react_native38.View, { style: styles10.monthPickerContainer }, /* @__PURE__ */ import_react43.default.createElement(
-    import_react_native38.Animated.View,
+  return /* @__PURE__ */ import_react36.default.createElement(import_react_native31.View, { style: styles10.monthPickerContainer }, /* @__PURE__ */ import_react36.default.createElement(
+    import_react_native31.Animated.View,
     {
       style: {
         opacity: groupAnim,
@@ -4300,10 +3493,10 @@ var DatePickerDialogMonthPicker = ({ viewDate, locale, themeColor, onSelectMonth
         ]
       }
     },
-    /* @__PURE__ */ import_react43.default.createElement(import_react_native38.View, { style: styles10.monthGrid }, months.map((name, index) => {
+    /* @__PURE__ */ import_react36.default.createElement(import_react_native31.View, { style: styles10.monthGrid }, months.map((name, index) => {
       const isCurrentMonth = index === currentMonth;
-      return /* @__PURE__ */ import_react43.default.createElement(
-        import_react_native38.Pressable,
+      return /* @__PURE__ */ import_react36.default.createElement(
+        import_react_native31.Pressable,
         {
           key: index,
           style: [
@@ -4315,8 +3508,8 @@ var DatePickerDialogMonthPicker = ({ viewDate, locale, themeColor, onSelectMonth
           accessibilityRole: "button",
           accessibilityState: { selected: isCurrentMonth }
         },
-        /* @__PURE__ */ import_react43.default.createElement(
-          import_react_native38.Text,
+        /* @__PURE__ */ import_react36.default.createElement(
+          import_react_native31.Text,
           {
             style: [
               styles10.monthText,
@@ -4335,38 +3528,35 @@ var DatePickerDialogMonthPicker = ({ viewDate, locale, themeColor, onSelectMonth
 };
 
 // src/components/dialogs/datepicker-dialog/datepicker-dialog-year-picker.tsx
-var import_react44 = __toESM(require("react"), 1);
-var import_react_native39 = require("react-native");
+var import_react37 = __toESM(require("react"), 1);
+var import_react_native32 = require("react-native");
 var ITEM_HEIGHT = 48;
 var NUM_COLUMNS = 4;
 var DatePickerDialogYearPicker = ({ viewDate, themeColor, minDate, maxDate, onSelectYear }) => {
-  const listRef = (0, import_react44.useRef)(null);
-  const groupAnim = (0, import_react44.useRef)(new import_react_native39.Animated.Value(0)).current;
+  const listRef = (0, import_react37.useRef)(null);
+  const groupAnim = (0, import_react37.useRef)(new import_react_native32.Animated.Value(0)).current;
   const theme = useXUITheme();
   const colorScheme = theme.colors[themeColor] ?? theme.colors.primary;
   const isDefault = themeColor === "default";
   const accentColor = isDefault ? theme.colors.foreground : colorScheme.main;
   const accentFg = isDefault ? theme.colors.background : colorScheme.foreground;
-  const years = (0, import_react44.useMemo)(
-    () => getYearRange(minDate, maxDate),
-    [minDate, maxDate]
-  );
+  const years = (0, import_react37.useMemo)(() => getYearRange(minDate, maxDate), [minDate, maxDate]);
   const currentYear = viewDate.getFullYear();
-  const initialIndex = (0, import_react44.useMemo)(() => {
+  const initialIndex = (0, import_react37.useMemo)(() => {
     const index = years.indexOf(currentYear);
     const rowIndex = Math.floor(index / NUM_COLUMNS);
     return Math.max(0, rowIndex);
   }, [years, currentYear]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     groupAnim.setValue(0);
-    import_react_native39.Animated.timing(groupAnim, {
+    import_react_native32.Animated.timing(groupAnim, {
       toValue: 1,
       duration: 220,
-      easing: import_react_native39.Easing.out(import_react_native39.Easing.cubic),
+      easing: import_react_native32.Easing.out(import_react_native32.Easing.cubic),
       useNativeDriver: true
     }).start();
   }, [groupAnim]);
-  const getItemLayout = (0, import_react44.useCallback)(
+  const getItemLayout = (0, import_react37.useCallback)(
     (_, index) => ({
       length: ITEM_HEIGHT,
       offset: ITEM_HEIGHT * index,
@@ -4374,11 +3564,11 @@ var DatePickerDialogYearPicker = ({ viewDate, themeColor, minDate, maxDate, onSe
     }),
     []
   );
-  const renderYear = (0, import_react44.useCallback)(
+  const renderYear = (0, import_react37.useCallback)(
     ({ item }) => {
       const isCurrentYear = item === currentYear;
-      return /* @__PURE__ */ import_react44.default.createElement(
-        import_react_native39.Pressable,
+      return /* @__PURE__ */ import_react37.default.createElement(
+        import_react_native32.Pressable,
         {
           style: [
             styles10.yearCell,
@@ -4389,8 +3579,8 @@ var DatePickerDialogYearPicker = ({ viewDate, themeColor, minDate, maxDate, onSe
           accessibilityRole: "button",
           accessibilityState: { selected: isCurrentYear }
         },
-        /* @__PURE__ */ import_react44.default.createElement(
-          import_react_native39.Text,
+        /* @__PURE__ */ import_react37.default.createElement(
+          import_react_native32.Text,
           {
             style: [
               styles10.yearText,
@@ -4407,8 +3597,8 @@ var DatePickerDialogYearPicker = ({ viewDate, themeColor, minDate, maxDate, onSe
     },
     [currentYear, onSelectYear, accentColor, accentFg, theme.colors.foreground]
   );
-  return /* @__PURE__ */ import_react44.default.createElement(import_react_native39.View, { style: styles10.yearPickerContainer }, /* @__PURE__ */ import_react44.default.createElement(
-    import_react_native39.Animated.View,
+  return /* @__PURE__ */ import_react37.default.createElement(import_react_native32.View, { style: styles10.yearPickerContainer }, /* @__PURE__ */ import_react37.default.createElement(
+    import_react_native32.Animated.View,
     {
       style: {
         opacity: groupAnim,
@@ -4422,8 +3612,8 @@ var DatePickerDialogYearPicker = ({ viewDate, themeColor, minDate, maxDate, onSe
         ]
       }
     },
-    /* @__PURE__ */ import_react44.default.createElement(
-      import_react_native39.FlatList,
+    /* @__PURE__ */ import_react37.default.createElement(
+      import_react_native32.FlatList,
       {
         ref: listRef,
         data: years,
@@ -4456,13 +3646,13 @@ var DatePickerDialog = ({
   onClose
 }) => {
   const theme = useXUITheme();
-  const { width: screenWidth, height: screenHeight } = (0, import_react_native40.useWindowDimensions)();
-  const fadeAnim = (0, import_react45.useRef)(new import_react_native40.Animated.Value(0)).current;
-  const slideAnim = (0, import_react45.useRef)(new import_react_native40.Animated.Value(0)).current;
-  const scaleAnim = (0, import_react45.useRef)(new import_react_native40.Animated.Value(0)).current;
-  const viewFadeAnim = (0, import_react45.useRef)(new import_react_native40.Animated.Value(1)).current;
-  const monthSlideXAnim = (0, import_react45.useRef)(new import_react_native40.Animated.Value(0)).current;
-  const monthFadeAnim = (0, import_react45.useRef)(new import_react_native40.Animated.Value(1)).current;
+  const { width: screenWidth, height: screenHeight } = (0, import_react_native33.useWindowDimensions)();
+  const fadeAnim = (0, import_react38.useRef)(new import_react_native33.Animated.Value(0)).current;
+  const slideAnim = (0, import_react38.useRef)(new import_react_native33.Animated.Value(0)).current;
+  const scaleAnim = (0, import_react38.useRef)(new import_react_native33.Animated.Value(0)).current;
+  const viewFadeAnim = (0, import_react38.useRef)(new import_react_native33.Animated.Value(1)).current;
+  const monthSlideXAnim = (0, import_react38.useRef)(new import_react_native33.Animated.Value(0)).current;
+  const monthFadeAnim = (0, import_react38.useRef)(new import_react_native33.Animated.Value(1)).current;
   const colorScheme = theme.colors[themeColor] ?? theme.colors.primary;
   const isDefault = themeColor === "default";
   const accentColor = isDefault ? theme.colors.foreground : colorScheme.main;
@@ -4480,7 +3670,7 @@ var DatePickerDialog = ({
     toggleYearPicker,
     syncViewToDate
   } = useDatePickerViewState(selectedDate);
-  const onCloseComplete = (0, import_react45.useCallback)(() => {
+  const onCloseComplete = (0, import_react38.useCallback)(() => {
     fadeAnim.setValue(0);
     slideAnim.setValue(0);
     scaleAnim.setValue(0);
@@ -4502,41 +3692,41 @@ var DatePickerDialog = ({
     slideAnim: monthSlideXAnim,
     fadeAnim: monthFadeAnim
   });
-  const prevViewModeRef = (0, import_react45.useRef)(viewMode);
-  (0, import_react45.useEffect)(() => {
+  const prevViewModeRef = (0, import_react38.useRef)(viewMode);
+  (0, import_react38.useEffect)(() => {
     if (prevViewModeRef.current !== viewMode) {
       prevViewModeRef.current = viewMode;
       animateViewTransition();
     }
   }, [viewMode, animateViewTransition]);
-  (0, import_react45.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (visible && selectedDate) {
       syncViewToDate(selectedDate);
     }
   }, [visible, selectedDate, syncViewToDate]);
-  (0, import_react45.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (!visible) return;
-    const sub = import_react_native40.BackHandler.addEventListener("hardwareBackPress", () => {
+    const sub = import_react_native33.BackHandler.addEventListener("hardwareBackPress", () => {
       onClose();
       return true;
     });
     return () => sub.remove();
   }, [visible, onClose]);
-  const handlePreviousMonth = (0, import_react45.useCallback)(() => {
+  const handlePreviousMonth = (0, import_react38.useCallback)(() => {
     goToPreviousMonth();
     animateMonthSlide("left");
   }, [goToPreviousMonth, animateMonthSlide]);
-  const handleNextMonth = (0, import_react45.useCallback)(() => {
+  const handleNextMonth = (0, import_react38.useCallback)(() => {
     goToNextMonth();
     animateMonthSlide("right");
   }, [goToNextMonth, animateMonthSlide]);
-  const handleDaySelect = (0, import_react45.useCallback)(
+  const handleDaySelect = (0, import_react38.useCallback)(
     (date) => {
       onDateSelect(date);
     },
     [onDateSelect]
   );
-  const handleTodayPress = (0, import_react45.useCallback)(() => {
+  const handleTodayPress = (0, import_react38.useCallback)(() => {
     const today = /* @__PURE__ */ new Date();
     if (!isDateInRange(today, minDate, maxDate)) return;
     goToToday();
@@ -4585,7 +3775,7 @@ var DatePickerDialog = ({
   const renderContent = () => {
     switch (viewMode) {
       case "year":
-        return /* @__PURE__ */ import_react45.default.createElement(
+        return /* @__PURE__ */ import_react38.default.createElement(
           DatePickerDialogYearPicker,
           {
             viewDate,
@@ -4596,7 +3786,7 @@ var DatePickerDialog = ({
           }
         );
       case "month":
-        return /* @__PURE__ */ import_react45.default.createElement(
+        return /* @__PURE__ */ import_react38.default.createElement(
           DatePickerDialogMonthPicker,
           {
             viewDate,
@@ -4607,7 +3797,7 @@ var DatePickerDialog = ({
         );
       case "calendar":
       default:
-        return /* @__PURE__ */ import_react45.default.createElement(import_react_native40.Animated.View, { style: [viewTransitionStyle, monthSlideStyle] }, /* @__PURE__ */ import_react45.default.createElement(
+        return /* @__PURE__ */ import_react38.default.createElement(import_react_native33.Animated.View, { style: [viewTransitionStyle, monthSlideStyle] }, /* @__PURE__ */ import_react38.default.createElement(
           DatePickerDialogCalendar,
           {
             viewDate,
@@ -4624,23 +3814,23 @@ var DatePickerDialog = ({
         ));
     }
   };
-  return /* @__PURE__ */ import_react45.default.createElement(Portal, null, /* @__PURE__ */ import_react45.default.createElement(import_react_native_gesture_handler2.GestureHandlerRootView, { style: [overlayStyle, style] }, /* @__PURE__ */ import_react45.default.createElement(import_react_native40.View, { style: overlayStyle }, /* @__PURE__ */ import_react45.default.createElement(import_react_native40.Animated.View, { style: [styles10.backdrop, { opacity: fadeAnim }] }, /* @__PURE__ */ import_react45.default.createElement(
-    import_react_native40.Pressable,
+  return /* @__PURE__ */ import_react38.default.createElement(Portal, null, /* @__PURE__ */ import_react38.default.createElement(import_react_native_gesture_handler2.GestureHandlerRootView, { style: [overlayStyle, style] }, /* @__PURE__ */ import_react38.default.createElement(import_react_native33.View, { style: overlayStyle }, /* @__PURE__ */ import_react38.default.createElement(import_react_native33.Animated.View, { style: [styles10.backdrop, { opacity: fadeAnim }] }, /* @__PURE__ */ import_react38.default.createElement(
+    import_react_native33.Pressable,
     {
       style: { flex: 1 },
       onPress: onClose,
       accessibilityLabel: "Close calendar",
       accessibilityRole: "button"
     }
-  )), /* @__PURE__ */ import_react45.default.createElement(import_react_native40.Animated.View, { style: [styles10.dialogContainer, containerAnimatedStyle] }, /* @__PURE__ */ import_react45.default.createElement(
-    import_react_native40.View,
+  )), /* @__PURE__ */ import_react38.default.createElement(import_react_native33.Animated.View, { style: [styles10.dialogContainer, containerAnimatedStyle] }, /* @__PURE__ */ import_react38.default.createElement(
+    import_react_native33.View,
     {
       style: [
         styles10.container,
         { backgroundColor: theme.colors.background }
       ]
     },
-    /* @__PURE__ */ import_react45.default.createElement(
+    /* @__PURE__ */ import_react38.default.createElement(
       DatePickerDialogHeader,
       {
         viewDate,
@@ -4655,31 +3845,33 @@ var DatePickerDialog = ({
       }
     ),
     renderContent(),
-    /* @__PURE__ */ import_react45.default.createElement(import_react_native40.View, { style: styles10.footer }, /* @__PURE__ */ import_react45.default.createElement(
-      import_react_native40.Pressable,
+    /* @__PURE__ */ import_react38.default.createElement(import_react_native33.View, { style: styles10.footer }, /* @__PURE__ */ import_react38.default.createElement(
+      import_react_native33.Pressable,
       {
         style: styles10.footerButton,
         onPress: handleTodayPress,
         accessibilityLabel: resolvedTodayLabel,
         accessibilityRole: "button"
       },
-      /* @__PURE__ */ import_react45.default.createElement(import_react_native40.Text, { style: [styles10.footerButtonText, { color: accentColor }] }, resolvedTodayLabel)
-    ), /* @__PURE__ */ import_react45.default.createElement(
-      import_react_native40.Pressable,
+      /* @__PURE__ */ import_react38.default.createElement(import_react_native33.Text, { style: [styles10.footerButtonText, { color: accentColor }] }, resolvedTodayLabel)
+    ), /* @__PURE__ */ import_react38.default.createElement(
+      import_react_native33.Pressable,
       {
         style: styles10.footerButton,
         onPress: onClose,
         accessibilityLabel: resolvedConfirmLabel,
         accessibilityRole: "button"
       },
-      /* @__PURE__ */ import_react45.default.createElement(import_react_native40.Text, { style: [styles10.footerButtonText, { color: accentColor }] }, resolvedConfirmLabel)
+      /* @__PURE__ */ import_react38.default.createElement(import_react_native33.Text, { style: [styles10.footerButtonText, { color: accentColor }] }, resolvedConfirmLabel)
     ))
   )))));
 };
 
 // src/components/datepicker/datepicker-trigger.tsx
-var import_react46 = __toESM(require("react"), 1);
-var import_react_native41 = require("react-native");
+var import_react39 = __toESM(require("react"), 1);
+var import_react_native34 = require("react-native");
+var import_calendar = require("@xaui/icons/calendar");
+var import_close2 = require("@xaui/icons/close");
 var DatePickerTrigger = ({
   triggerRef,
   isDisabled,
@@ -4701,8 +3893,8 @@ var DatePickerTrigger = ({
   onLayout: handleTriggerLayout
 }) => {
   const renderLabel = isLabelInside && label;
-  return /* @__PURE__ */ import_react46.default.createElement(
-    import_react_native41.Pressable,
+  return /* @__PURE__ */ import_react39.default.createElement(
+    import_react_native34.Pressable,
     {
       ref: triggerRef,
       onPress: handleTriggerPress,
@@ -4724,8 +3916,8 @@ var DatePickerTrigger = ({
       accessibilityRole: "button",
       accessibilityState: { disabled: isDisabled }
     },
-    /* @__PURE__ */ import_react46.default.createElement(import_react_native41.View, { style: styles9.triggerContent }, isLabelInside && renderLabel, /* @__PURE__ */ import_react46.default.createElement(
-      import_react_native41.Text,
+    /* @__PURE__ */ import_react39.default.createElement(import_react_native34.View, { style: styles9.triggerContent }, isLabelInside && renderLabel, /* @__PURE__ */ import_react39.default.createElement(
+      import_react_native34.Text,
       {
         style: [
           styles9.triggerText,
@@ -4738,15 +3930,15 @@ var DatePickerTrigger = ({
       },
       displayValue
     )),
-    isClearable && hasValue ? /* @__PURE__ */ import_react46.default.createElement(
-      import_react_native41.TouchableOpacity,
+    isClearable && hasValue ? /* @__PURE__ */ import_react39.default.createElement(
+      import_react_native34.TouchableOpacity,
       {
         onPress: handleClear,
         style: styles9.clearButton,
         hitSlop: { top: 8, right: 8, bottom: 8, left: 8 }
       },
-      /* @__PURE__ */ import_react46.default.createElement(CloseIcon, { color: theme.colors.foreground, size: 20 })
-    ) : calendarIcon ?? /* @__PURE__ */ import_react46.default.createElement(CalendarIcon, { color: theme.colors.foreground, size: 20 })
+      /* @__PURE__ */ import_react39.default.createElement(import_close2.CloseIcon, { color: theme.colors.foreground, size: 20 })
+    ) : calendarIcon ?? /* @__PURE__ */ import_react39.default.createElement(import_calendar.CalendarIcon, { color: theme.colors.foreground, size: 20 })
   );
 };
 
@@ -4791,10 +3983,10 @@ var DatePicker = ({
     onOpen,
     onClose
   });
-  const triggerRef = (0, import_react47.useRef)(null);
-  const handleTriggerLayout = (0, import_react47.useCallback)(() => {
+  const triggerRef = (0, import_react40.useRef)(null);
+  const handleTriggerLayout = (0, import_react40.useCallback)(() => {
   }, []);
-  const firstDayOfWeek = (0, import_react47.useMemo)(
+  const firstDayOfWeek = (0, import_react40.useMemo)(
     () => firstDayOfWeekProp ?? getFirstDayOfWeek(locale),
     [firstDayOfWeekProp, locale]
   );
@@ -4807,35 +3999,35 @@ var DatePicker = ({
     sizeStyles.labelSize
   );
   const helperColor = useDatePickerHelperColor(isInvalid);
-  const displayValue = (0, import_react47.useMemo)(() => {
+  const displayValue = (0, import_react40.useMemo)(() => {
     if (!selectedDate) return placeholder;
     return formatDate(selectedDate, locale);
   }, [selectedDate, locale, placeholder]);
-  const handleTriggerPress = (0, import_react47.useCallback)(() => {
+  const handleTriggerPress = (0, import_react40.useCallback)(() => {
     if (!isDisabled && !isReadOnly) {
       setOpen(true);
     }
   }, [isDisabled, isReadOnly, setOpen]);
-  const handleClear = (0, import_react47.useCallback)(() => {
+  const handleClear = (0, import_react40.useCallback)(() => {
     if (isDisabled || isReadOnly) return;
     updateDate(null);
   }, [isDisabled, isReadOnly, updateDate]);
-  const handleDateSelect = (0, import_react47.useCallback)(
+  const handleDateSelect = (0, import_react40.useCallback)(
     (date) => {
       updateDate(date);
     },
     [updateDate]
   );
-  const handleClose = (0, import_react47.useCallback)(() => {
+  const handleClose = (0, import_react40.useCallback)(() => {
     setOpen(false);
   }, [setOpen]);
   const isLabelInside = labelPlacement === "inside";
   const isLabelOutsideLeft = labelPlacement === "outside-left";
   const isLabelOutside = labelPlacement === "outside" || labelPlacement === "outside-top";
-  const renderLabel = label ? typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ import_react47.default.createElement(import_react_native42.Text, { style: [styles9.label, labelStyle] }, label) : /* @__PURE__ */ import_react47.default.createElement(import_react_native42.View, null, label) : null;
+  const renderLabel = label ? typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ import_react40.default.createElement(import_react_native35.Text, { style: [styles9.label, labelStyle] }, label) : /* @__PURE__ */ import_react40.default.createElement(import_react_native35.View, null, label) : null;
   const shouldShowHelper = Boolean(description || errorMessage);
   const helperContent = isInvalid && errorMessage ? errorMessage : description;
-  const triggerContent = /* @__PURE__ */ import_react47.default.createElement(
+  const triggerContent = /* @__PURE__ */ import_react40.default.createElement(
     DatePickerTrigger,
     {
       triggerRef,
@@ -4859,8 +4051,8 @@ var DatePicker = ({
     }
   );
   const labelBlock = isLabelOutside || isLabelInside ? renderLabel : null;
-  return /* @__PURE__ */ import_react47.default.createElement(
-    import_react_native42.View,
+  return /* @__PURE__ */ import_react40.default.createElement(
+    import_react_native35.View,
     {
       style: [
         styles9.container,
@@ -4869,9 +4061,9 @@ var DatePicker = ({
       ]
     },
     isLabelOutside && labelBlock,
-    isLabelOutsideLeft ? /* @__PURE__ */ import_react47.default.createElement(import_react_native42.View, { style: styles9.outsideLeftRow }, renderLabel, triggerContent) : triggerContent,
-    shouldShowHelper && helperContent ? typeof helperContent === "string" || typeof helperContent === "number" ? /* @__PURE__ */ import_react47.default.createElement(import_react_native42.Text, { style: [styles9.helperText, { color: helperColor }] }, helperContent) : /* @__PURE__ */ import_react47.default.createElement(import_react_native42.View, null, helperContent) : null,
-    /* @__PURE__ */ import_react47.default.createElement(
+    isLabelOutsideLeft ? /* @__PURE__ */ import_react40.default.createElement(import_react_native35.View, { style: styles9.outsideLeftRow }, renderLabel, triggerContent) : triggerContent,
+    shouldShowHelper && helperContent ? typeof helperContent === "string" || typeof helperContent === "number" ? /* @__PURE__ */ import_react40.default.createElement(import_react_native35.Text, { style: [styles9.helperText, { color: helperColor }] }, helperContent) : /* @__PURE__ */ import_react40.default.createElement(import_react_native35.View, null, helperContent) : null,
+    /* @__PURE__ */ import_react40.default.createElement(
       DatePickerDialog,
       {
         visible: isOpen,
@@ -4891,20 +4083,20 @@ var DatePicker = ({
 };
 
 // src/components/typography/typography.tsx
-var import_react49 = __toESM(require("react"), 1);
-var import_react_native44 = require("react-native");
+var import_react42 = __toESM(require("react"), 1);
+var import_react_native37 = require("react-native");
 
 // src/components/typography/typography.style.ts
-var import_react_native43 = require("react-native");
-var styles11 = import_react_native43.StyleSheet.create({
+var import_react_native36 = require("react-native");
+var styles11 = import_react_native36.StyleSheet.create({
   text: {
     includeFontPadding: false
   }
 });
 
 // src/components/typography/typography.hook.ts
-var import_react48 = require("react");
-var import_core37 = require("@xaui/core");
+var import_react41 = require("react");
+var import_core30 = require("@xaui/core");
 var knownVariants = {
   caption: true,
   headlineLarge: true,
@@ -4922,18 +4114,18 @@ var isKnownVariant = (variant) => {
 };
 var useTypographyColor = (themeColor) => {
   const theme = useXUITheme();
-  const color = (0, import_react48.useMemo)(() => {
+  const color = (0, import_react41.useMemo)(() => {
     if (themeColor === "default") {
       return theme.colors.foreground;
     }
-    const safeThemeColor = (0, import_core37.getSafeThemeColor)(themeColor);
+    const safeThemeColor = (0, import_core30.getSafeThemeColor)(themeColor);
     return theme.colors[safeThemeColor].main;
   }, [theme, themeColor]);
   return color;
 };
 var useTypographyVariantStyles = (variant) => {
   const theme = useXUITheme();
-  const variantStyles = (0, import_react48.useMemo)(() => {
+  const variantStyles = (0, import_react41.useMemo)(() => {
     if (!isKnownVariant(variant)) {
       return {
         fontFamily: theme.fontFamilies.body,
@@ -5011,13 +4203,13 @@ var Typography = ({
   const color = useTypographyColor(themeColor);
   const variantStyles = useTypographyVariantStyles(variant);
   const colorStyle = { color };
-  const ellipsizeMode = (0, import_react49.useMemo)(() => {
+  const ellipsizeMode = (0, import_react42.useMemo)(() => {
     if (!maxLines) return void 0;
     if (overflow === "clip") return "clip";
     return "tail";
   }, [maxLines, overflow]);
-  return /* @__PURE__ */ import_react49.default.createElement(
-    import_react_native44.Text,
+  return /* @__PURE__ */ import_react42.default.createElement(
+    import_react_native37.Text,
     {
       numberOfLines: maxLines,
       ellipsizeMode,