@xaui/native 0.0.11 → 0.0.12

package/dist/autocomplete/index.js

@@ -1,9 +1,9 @@
 import {
   Autocomplete,
   AutocompleteItem
-} from "../chunk-W7JJVPK5.js";
-import "../chunk-RE3CO277.js";
+} from "../chunk-RL47NQAU.js";
 import "../chunk-GBHQCAKW.js";
+import "../chunk-CKGZOJVV.js";
 import "../chunk-SIXET7TJ.js";
 import "../chunk-NBRASCX4.js";
 export {

package/dist/{chunk-RE3CO277.js → chunk-CKGZOJVV.js}

@@ -109,12 +109,12 @@ var ArrowBackIcon = ({
   return /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
 };
 
-// src/components/icon/icons/checkmark.tsx
+// src/components/icon/icons/calendar.tsx
 import React2, { useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2 } from "react";
 import { Animated as Animated2 } from "react-native";
-import Svg2, { Path as Path2, Circle as Circle2, Rect as Rect2 } from "react-native-svg";
+import Svg2, { Circle as Circle2, Path as Path2, Rect as Rect2 } from "react-native-svg";
 var AnimatedPath2 = Animated2.createAnimatedComponent(Path2);
-var CheckmarkIcon = ({
+var CalendarIcon = ({
   variant = "baseline",
   size = 24,
   color = "default",
@@ -158,7 +158,7 @@ var CheckmarkIcon = ({
       strokeLinecap: "round",
       strokeLinejoin: "round",
       strokeWidth: 32,
-      d: "M416 128L192 384l-96-96",
+      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
     }
   );
@@ -166,7 +166,7 @@ var CheckmarkIcon = ({
     AnimatedPath2,
     {
       fill: resolvedColor,
-      d: "M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192zm-257.9 78.9l-64-64a16 16 0 0 1 22.6-22.6l52.7 52.7 116.7-116.7a16 16 0 0 1 22.6 22.6l-128 128a16 16 0 0 1-22.6 0z",
+      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
     }
   );
@@ -175,10 +175,146 @@ var CheckmarkIcon = ({
     {
       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"
+      d: "M48 192h416v240a48 48 0 01-48 48H96a48 48 0 01-48-48z"
+    }
+  ), renderBaseline());
+  const renderRoundOutlined = () => /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+    Circle2,
+    {
+      cx: "256",
+      cy: "256",
+      r: "192",
+      fill: "none",
+      stroke: resolvedColor,
+      strokeWidth: 32
+    }
+  ), /* @__PURE__ */ React2.createElement(
+    AnimatedPath2,
+    {
+      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__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+    Rect2,
+    {
+      x: "64",
+      y: "64",
+      width: "384",
+      height: "384",
+      rx: "48",
+      fill: "none",
+      stroke: resolvedColor,
+      strokeWidth: 32
     }
   ), /* @__PURE__ */ React2.createElement(
     AnimatedPath2,
+    {
+      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__ */ React2.createElement(Svg2, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
+};
+
+// src/components/icon/icons/checkmark.tsx
+import React3, { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef3 } from "react";
+import { Animated as Animated3 } from "react-native";
+import Svg3, { Path as Path3, Circle as Circle3, Rect as Rect3 } from "react-native-svg";
+var AnimatedPath3 = Animated3.createAnimatedComponent(Path3);
+var CheckmarkIcon = ({
+  variant = "baseline",
+  size = 24,
+  color = "default",
+  isAnimated = false
+}) => {
+  const theme = useXUITheme();
+  const scaleAnim = useRef3(new Animated3.Value(isAnimated ? 0 : 1)).current;
+  const opacityAnim = useRef3(new Animated3.Value(isAnimated ? 0 : 1)).current;
+  const resolvedColor = useMemo3(() => {
+    if (typeof color === "string" && isThemeColor(color)) {
+      return theme.colors[color].main;
+    }
+    return color;
+  }, [color, theme]);
+  useEffect3(() => {
+    if (isAnimated) {
+      Animated3.parallel([
+        Animated3.spring(scaleAnim, {
+          toValue: 1,
+          useNativeDriver: true,
+          tension: 50,
+          friction: 7
+        }),
+        Animated3.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__ */ React3.createElement(
+    AnimatedPath3,
+    {
+      fill: "none",
+      stroke: resolvedColor,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 32,
+      d: "M416 128L192 384l-96-96",
+      ...animatedProps
+    }
+  );
+  const renderFilled = () => /* @__PURE__ */ React3.createElement(
+    AnimatedPath3,
+    {
+      fill: resolvedColor,
+      d: "M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192zm-257.9 78.9l-64-64a16 16 0 0 1 22.6-22.6l52.7 52.7 116.7-116.7a16 16 0 0 1 22.6 22.6l-128 128a16 16 0 0 1-22.6 0z",
+      ...animatedProps
+    }
+  );
+  const renderDuotone = () => /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+    Path3,
+    {
+      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__ */ React3.createElement(
+    AnimatedPath3,
     {
       fill: "none",
       stroke: resolvedColor,
@@ -189,8 +325,8 @@ var CheckmarkIcon = ({
       ...animatedProps
     }
   ));
-  const renderRoundOutlined = () => /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
-    Circle2,
+  const renderRoundOutlined = () => /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+    Circle3,
     {
       cx: "256",
       cy: "256",
@@ -199,8 +335,8 @@ var CheckmarkIcon = ({
       stroke: resolvedColor,
       strokeWidth: 32
     }
-  ), /* @__PURE__ */ React2.createElement(
-    AnimatedPath2,
+  ), /* @__PURE__ */ React3.createElement(
+    AnimatedPath3,
     {
       fill: "none",
       stroke: resolvedColor,
@@ -211,8 +347,8 @@ var CheckmarkIcon = ({
       ...animatedProps
     }
   ));
-  const renderSquareOutlined = () => /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
-    Rect2,
+  const renderSquareOutlined = () => /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+    Rect3,
     {
       x: "64",
       y: "64",
@@ -223,8 +359,8 @@ var CheckmarkIcon = ({
       stroke: resolvedColor,
       strokeWidth: 32
     }
-  ), /* @__PURE__ */ React2.createElement(
-    AnimatedPath2,
+  ), /* @__PURE__ */ React3.createElement(
+    AnimatedPath3,
     {
       fill: "none",
       stroke: resolvedColor,
@@ -235,16 +371,16 @@ var CheckmarkIcon = ({
       ...animatedProps
     }
   ));
-  const renderRoundFilled = () => /* @__PURE__ */ React2.createElement(
-    AnimatedPath2,
+  const renderRoundFilled = () => /* @__PURE__ */ React3.createElement(
+    AnimatedPath3,
     {
       fill: resolvedColor,
       d: "M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192zm-257.9 78.9l-64-64a16 16 0 0 1 22.6-22.6l52.7 52.7 116.7-116.7a16 16 0 0 1 22.6 22.6l-128 128a16 16 0 0 1-22.6 0z",
       ...animatedProps
     }
   );
-  const renderSquareFilled = () => /* @__PURE__ */ React2.createElement(
-    AnimatedPath2,
+  const renderSquareFilled = () => /* @__PURE__ */ React3.createElement(
+    AnimatedPath3,
     {
       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-141.45 241.25l-116.36-103a16 16 0 0 1 21.62-23.58l104.18 92.23 145.69-145.69a16 16 0 0 1 22.62 22.62l-156 156a16 16 0 0 1-21.75.42z",
@@ -270,14 +406,14 @@ var CheckmarkIcon = ({
         return renderBaseline();
     }
   };
-  return /* @__PURE__ */ React2.createElement(Svg2, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
+  return /* @__PURE__ */ React3.createElement(Svg3, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
 };
 
 // src/components/icon/icons/chevron-down.tsx
-import React3, { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef3 } from "react";
-import { Animated as Animated3 } from "react-native";
-import Svg3, { Path as Path3, Circle as Circle3, Rect as Rect3 } from "react-native-svg";
-var AnimatedPath3 = Animated3.createAnimatedComponent(Path3);
+import React4, { useEffect as useEffect4, useMemo as useMemo4, useRef as useRef4 } from "react";
+import { Animated as Animated4 } from "react-native";
+import Svg4, { Path as Path4, Circle as Circle4, Rect as Rect4 } from "react-native-svg";
+var AnimatedPath4 = Animated4.createAnimatedComponent(Path4);
 var ChevronDownIcon = ({
   variant = "baseline",
   size = 24,
@@ -285,24 +421,24 @@ var ChevronDownIcon = ({
   isAnimated = false
 }) => {
   const theme = useXUITheme();
-  const scaleAnim = useRef3(new Animated3.Value(isAnimated ? 0 : 1)).current;
-  const opacityAnim = useRef3(new Animated3.Value(isAnimated ? 0 : 1)).current;
-  const resolvedColor = useMemo3(() => {
+  const scaleAnim = useRef4(new Animated4.Value(isAnimated ? 0 : 1)).current;
+  const opacityAnim = useRef4(new Animated4.Value(isAnimated ? 0 : 1)).current;
+  const resolvedColor = useMemo4(() => {
     if (typeof color === "string" && isThemeColor(color)) {
       return theme.colors[color].main;
     }
     return color;
   }, [color, theme]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (isAnimated) {
-      Animated3.parallel([
-        Animated3.spring(scaleAnim, {
+      Animated4.parallel([
+        Animated4.spring(scaleAnim, {
           toValue: 1,
           useNativeDriver: true,
           tension: 50,
           friction: 7
         }),
-        Animated3.timing(opacityAnim, {
+        Animated4.timing(opacityAnim, {
           toValue: 1,
           duration: 200,
           useNativeDriver: true
@@ -314,8 +450,8 @@ var ChevronDownIcon = ({
     transform: [{ scale: scaleAnim }],
     opacity: opacityAnim
   } : void 0;
-  const renderBaseline = () => /* @__PURE__ */ React3.createElement(
-    AnimatedPath3,
+  const renderBaseline = () => /* @__PURE__ */ React4.createElement(
+    AnimatedPath4,
     {
       fill: "none",
       stroke: resolvedColor,
@@ -326,23 +462,23 @@ var ChevronDownIcon = ({
       ...animatedProps
     }
   );
-  const renderFilled = () => /* @__PURE__ */ React3.createElement(
-    AnimatedPath3,
+  const renderFilled = () => /* @__PURE__ */ React4.createElement(
+    AnimatedPath4,
     {
       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__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
-    Path3,
+  const renderDuotone = () => /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
+    Path4,
     {
       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__ */ React3.createElement(
-    AnimatedPath3,
+  ), /* @__PURE__ */ React4.createElement(
+    AnimatedPath4,
     {
       fill: "none",
       stroke: resolvedColor,
@@ -353,8 +489,8 @@ var ChevronDownIcon = ({
       ...animatedProps
     }
   ));
-  const renderRoundOutlined = () => /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
-    Circle3,
+  const renderRoundOutlined = () => /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
+    Circle4,
     {
       cx: "256",
       cy: "256",
@@ -363,8 +499,8 @@ var ChevronDownIcon = ({
       stroke: resolvedColor,
       strokeWidth: 32
     }
-  ), /* @__PURE__ */ React3.createElement(
-    AnimatedPath3,
+  ), /* @__PURE__ */ React4.createElement(
+    AnimatedPath4,
     {
       fill: "none",
       stroke: resolvedColor,
@@ -375,8 +511,8 @@ var ChevronDownIcon = ({
       ...animatedProps
     }
   ));
-  const renderSquareOutlined = () => /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
-    Rect3,
+  const renderSquareOutlined = () => /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
+    Rect4,
     {
       x: "64",
       y: "64",
@@ -387,8 +523,8 @@ var ChevronDownIcon = ({
       stroke: resolvedColor,
       strokeWidth: 32
     }
-  ), /* @__PURE__ */ React3.createElement(
-    AnimatedPath3,
+  ), /* @__PURE__ */ React4.createElement(
+    AnimatedPath4,
     {
       fill: "none",
       stroke: resolvedColor,
@@ -399,16 +535,16 @@ var ChevronDownIcon = ({
       ...animatedProps
     }
   ));
-  const renderRoundFilled = () => /* @__PURE__ */ React3.createElement(
-    AnimatedPath3,
+  const renderRoundFilled = () => /* @__PURE__ */ React4.createElement(
+    AnimatedPath4,
     {
       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__ */ React3.createElement(
-    AnimatedPath3,
+  const renderSquareFilled = () => /* @__PURE__ */ React4.createElement(
+    AnimatedPath4,
     {
       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",
@@ -434,11 +570,246 @@ var ChevronDownIcon = ({
         return renderBaseline();
     }
   };
-  return /* @__PURE__ */ React3.createElement(Svg3, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
+  return /* @__PURE__ */ React4.createElement(Svg4, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
+};
+
+// src/components/icon/icons/chevron-left.tsx
+import React5, { useEffect as useEffect5, useMemo as useMemo5, useRef as useRef5 } from "react";
+import { Animated as Animated5 } from "react-native";
+import Svg5, { Circle as Circle5, Path as Path5, Rect as Rect5 } from "react-native-svg";
+var AnimatedPath5 = Animated5.createAnimatedComponent(Path5);
+var ChevronLeftIcon = ({
+  variant = "baseline",
+  size = 24,
+  color = "default",
+  isAnimated = false
+}) => {
+  const theme = useXUITheme();
+  const scaleAnim = useRef5(new Animated5.Value(isAnimated ? 0 : 1)).current;
+  const opacityAnim = useRef5(new Animated5.Value(isAnimated ? 0 : 1)).current;
+  const resolvedColor = useMemo5(() => {
+    if (typeof color === "string" && isThemeColor(color)) {
+      return theme.colors[color].main;
+    }
+    return color;
+  }, [color, theme]);
+  useEffect5(() => {
+    if (isAnimated) {
+      Animated5.parallel([
+        Animated5.spring(scaleAnim, {
+          toValue: 1,
+          useNativeDriver: true,
+          tension: 50,
+          friction: 7
+        }),
+        Animated5.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__ */ React5.createElement(
+    AnimatedPath5,
+    {
+      fill: "none",
+      stroke: resolvedColor,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 48,
+      d: "M328 112L184 256l144 144",
+      ...animatedProps
+    }
+  );
+  const renderFilled = () => /* @__PURE__ */ React5.createElement(
+    AnimatedPath5,
+    {
+      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__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(
+    Path5,
+    {
+      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__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(
+    Circle5,
+    {
+      cx: "256",
+      cy: "256",
+      r: "192",
+      fill: "none",
+      stroke: resolvedColor,
+      strokeWidth: 32
+    }
+  ), renderBaseline());
+  const renderSquareOutlined = () => /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(
+    Rect5,
+    {
+      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__ */ React5.createElement(Svg5, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
+};
+
+// src/components/icon/icons/chevron-right.tsx
+import React6, { useEffect as useEffect6, useMemo as useMemo6, useRef as useRef6 } from "react";
+import { Animated as Animated6 } from "react-native";
+import Svg6, { Circle as Circle6, Path as Path6, Rect as Rect6 } from "react-native-svg";
+var AnimatedPath6 = Animated6.createAnimatedComponent(Path6);
+var ChevronRightIcon = ({
+  variant = "baseline",
+  size = 24,
+  color = "default",
+  isAnimated = false
+}) => {
+  const theme = useXUITheme();
+  const scaleAnim = useRef6(new Animated6.Value(isAnimated ? 0 : 1)).current;
+  const opacityAnim = useRef6(new Animated6.Value(isAnimated ? 0 : 1)).current;
+  const resolvedColor = useMemo6(() => {
+    if (typeof color === "string" && isThemeColor(color)) {
+      return theme.colors[color].main;
+    }
+    return color;
+  }, [color, theme]);
+  useEffect6(() => {
+    if (isAnimated) {
+      Animated6.parallel([
+        Animated6.spring(scaleAnim, {
+          toValue: 1,
+          useNativeDriver: true,
+          tension: 50,
+          friction: 7
+        }),
+        Animated6.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__ */ React6.createElement(
+    AnimatedPath6,
+    {
+      fill: "none",
+      stroke: resolvedColor,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 48,
+      d: "M184 112l144 144-144 144",
+      ...animatedProps
+    }
+  );
+  const renderFilled = () => /* @__PURE__ */ React6.createElement(
+    AnimatedPath6,
+    {
+      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__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
+    Path6,
+    {
+      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__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
+    Circle6,
+    {
+      cx: "256",
+      cy: "256",
+      r: "192",
+      fill: "none",
+      stroke: resolvedColor,
+      strokeWidth: 32
+    }
+  ), renderBaseline());
+  const renderSquareOutlined = () => /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
+    Rect6,
+    {
+      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__ */ React6.createElement(Svg6, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
 };
 
 export {
   ArrowBackIcon,
+  CalendarIcon,
   CheckmarkIcon,
-  ChevronDownIcon
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon
 };