@trilogy-ds/react 0.0.20-esm-cjs → 0.0.23-esm-cjs

package/lib/{chunk-7ZANYDV4.mjs → chunk-2BQXWN3R.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-KYCWE6NL.mjs";
 import {
   version
-} from "./chunk-LJ4LZ3UC.mjs";
+} from "./chunk-ILTCTVY7.mjs";
 import {
   TrilogyContext
 } from "./chunk-ZB4OWTDD.mjs";

package/lib/{chunk-WV5PBU2C.mjs → chunk-2DMJIJTD.mjs}

@@ -2,17 +2,19 @@
 import {
   BoxContext
 } from "./chunk-652YVC7W.mjs";
+import {
+  StatesContext
+} from "./chunk-CWIO3GEP.mjs";
 import {
   getColorStyle
 } from "./chunk-E4YRRUI3.mjs";
 import {
-  StatesContext
-} from "./chunk-CWIO3GEP.mjs";
+  Skeleton_default
+} from "./chunk-JJA6BOVR.mjs";
 
 // components/box/Box.native.tsx
 import React, { useState } from "react";
-import ContentLoader, { Rect } from "react-content-loader/native";
-import { ImageBackground, Platform, StyleSheet, TouchableOpacity, View } from "react-native";
+import { ImageBackground, StyleSheet, TouchableOpacity, View } from "react-native";
 var Box = React.forwardRef(
   ({
     children,
@@ -81,7 +83,17 @@ var Box = React.forwardRef(
       }
     });
     const boxTestId = "NotSpecified";
-    const BoxSkeleton = () => /* @__PURE__ */ React.createElement(ContentLoader, { style: styles.skeleton, ...others, testID: "skeleton" }, /* @__PURE__ */ React.createElement(View, { style: { opacity: 0 } }, children), Platform.OS === "android" && /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(Rect, { rx: "10", ry: "10", width: "100%", height: "100%" })));
+    const BoxSkeleton = () => /* @__PURE__ */ React.createElement(
+      Skeleton_default,
+      {
+        style: styles.skeleton,
+        width: "100%",
+        height: 50,
+        borderRadius: boxRadius,
+        testID: "skeleton"
+      },
+      children
+    );
     if (skeleton) {
       return /* @__PURE__ */ React.createElement(BoxSkeleton, null);
     }

package/lib/{chunk-MDZE2AV3.mjs → chunk-2EF72O53.mjs}

@@ -5,15 +5,15 @@ import {
 import {
   setTypographyColor
 } from "./chunk-WVL5S3CD.mjs";
-import {
-  getColorStyle
-} from "./chunk-E4YRRUI3.mjs";
 import {
   StatesContext
 } from "./chunk-CWIO3GEP.mjs";
 import {
-  isAndroid
-} from "./chunk-R6PFY5VS.mjs";
+  getColorStyle
+} from "./chunk-E4YRRUI3.mjs";
+import {
+  Skeleton_default
+} from "./chunk-JJA6BOVR.mjs";
 import {
   setTypographyAlign
 } from "./chunk-IGMJNGTZ.mjs";
@@ -21,8 +21,7 @@ import {
 // components/title/Title.native.tsx
 import * as React from "react";
 import { useContext } from "react";
-import ContentLoader, { Rect } from "react-content-loader/native";
-import { StyleSheet, Text as TextNative, TouchableOpacity, View } from "react-native";
+import { StyleSheet, Text as TextNative, TouchableOpacity } from "react-native";
 var Title = React.forwardRef(({
   children,
   level,
@@ -103,7 +102,15 @@ var Title = React.forwardRef(({
     children
   );
   if (skeleton) {
-    titleView = /* @__PURE__ */ React.createElement(ContentLoader, { style: styles.skeleton }, titleView, isAndroid && /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(Rect, { rx: "15", ry: "15", width: "100%", height: "100%" })));
+    titleView = /* @__PURE__ */ React.createElement(
+      Skeleton_default,
+      {
+        style: styles.skeleton,
+        height: titlesLevels(),
+        borderRadius: 5
+      },
+      titleView
+    );
   }
   return onClick ? /* @__PURE__ */ React.createElement(TouchableOpacity, { onPress: onClick, activeOpacity: 0.85 }, titleView) : titleView;
 });

package/lib/{chunk-G2QCDZEE.mjs → chunk-33VIHGIE.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Icon_native_default
-} from "./chunk-UPP3GX33.mjs";
+} from "./chunk-5NCBENYK.mjs";
 import {
   getColorStyle
 } from "./chunk-E4YRRUI3.mjs";

package/lib/{chunk-JB7AXJFO.mjs → chunk-3CUMNA5T.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Select_default
-} from "./chunk-GIEAPQ2H.mjs";
+} from "./chunk-WMZ3FFFO.mjs";
 import {
   option_default
 } from "./chunk-AEV6FHUQ.mjs";
@@ -25,7 +25,15 @@ import {
 import { calendarLocale } from "@trilogy-ds/locales";
 import clsx from "clsx";
 import React from "react";
-var days = [...calendarLocale.days];
+var days = [
+  calendarLocale.days[1],
+  calendarLocale.days[2],
+  calendarLocale.days[3],
+  calendarLocale.days[4],
+  calendarLocale.days[5],
+  calendarLocale.days[6],
+  calendarLocale.days[0]
+];
 var months = [...calendarLocale.months];
 var currentDate = /* @__PURE__ */ new Date();
 function checkIsRange(date) {
@@ -85,7 +93,7 @@ var Calendar = React.forwardRef(
     const getAllDaysInMonth = React.useCallback((year, month) => {
       const date = new Date(year, month, 1);
       const days2 = [];
-      const firstDayOfMonth = date.getDay();
+      const firstDayOfMonth = (date.getDay() + 6) % 7;
       const lastDayOfMonth = new Date(year, month + 1, 0).getDate();
       const allDays = [];
       for (let i = 0; i < firstDayOfMonth; i++) days2.push(null);
@@ -254,9 +262,13 @@ var Calendar = React.forwardRef(
       }
     }, [refsDays.current, refDayFocused.current]);
     React.useEffect(() => {
+      const prevActiveDate = activeDate;
       setActiveDate(value);
       if (value instanceof Date) return setVisibleMonth(value);
-      if (!(value instanceof Date) && value[0]) return setVisibleMonth(value[0]);
+      if (!(value instanceof Date) && value[0]) {
+        const isNewRangeSelection = !prevActiveDate || Array.isArray(prevActiveDate) && prevActiveDate.length === 0 || Array.isArray(prevActiveDate) && Array.isArray(value) && prevActiveDate.length === 2 && value.length === 1;
+        if (isNewRangeSelection) return setVisibleMonth(value[0]);
+      }
     }, [value]);
     return /* @__PURE__ */ React.createElement(
       "table",

package/lib/{chunk-27BK6EVC.mjs → chunk-3QN2JTJH.mjs}

@@ -1,13 +1,13 @@
 "use client";
 import {
   Sticker_native_default
-} from "./chunk-TCRJL43C.mjs";
+} from "./chunk-DB4LE4EW.mjs";
 import {
   Text_native_default
-} from "./chunk-MVQ252OA.mjs";
+} from "./chunk-RA7237YI.mjs";
 import {
   Icon_native_default
-} from "./chunk-UPP3GX33.mjs";
+} from "./chunk-5NCBENYK.mjs";
 import {
   getColorStyle
 } from "./chunk-E4YRRUI3.mjs";

package/lib/{chunk-IT2ZBSQG.mjs → chunk-3TFMB2ZU.mjs}

@@ -1,17 +1,16 @@
 "use client";
-import {
-  getColorStyle
-} from "./chunk-E4YRRUI3.mjs";
 import {
   StatesContext
 } from "./chunk-CWIO3GEP.mjs";
 import {
-  isAndroid
-} from "./chunk-R6PFY5VS.mjs";
+  getColorStyle
+} from "./chunk-E4YRRUI3.mjs";
+import {
+  Skeleton_default
+} from "./chunk-JJA6BOVR.mjs";
 
 // components/card/Card.native.tsx
 import React, { createContext } from "react";
-import ContentLoader, { Rect } from "react-content-loader/native";
 import { StyleSheet, TouchableOpacity, View } from "react-native";
 var CardContext = createContext({
   floating: false,
@@ -57,7 +56,17 @@ var Card = React.forwardRef(
         flexDirection: "column-reverse"
       }
     });
-    const CardSkeleton = () => /* @__PURE__ */ React.createElement(ContentLoader, { style: styles.skeleton, ...others, testID: "skeleton-id" }, /* @__PURE__ */ React.createElement(View, { style: { opacity: 0 } }, children), isAndroid && /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(Rect, { rx: "10", ry: "10", width: "100%", height: "100%" })));
+    const CardSkeleton = () => /* @__PURE__ */ React.createElement(
+      Skeleton_default,
+      {
+        style: styles.skeleton,
+        width: "100%",
+        height: 50,
+        borderRadius: cardRadius,
+        testID: "skeleton-id"
+      },
+      children
+    );
     const ShadowWrapper = ({ children: children2 }) => /* @__PURE__ */ React.createElement(View, { style: [!flat && !floating ? styles.shadow : void 0] }, children2);
     let cardView;
     if (skeleton) {

package/lib/{chunk-POCUFCQC.mjs → chunk-4J6WJU6H.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Text_native_default
-} from "./chunk-MVQ252OA.mjs";
+} from "./chunk-RA7237YI.mjs";
 import {
   getColorStyle
 } from "./chunk-E4YRRUI3.mjs";

package/lib/chunk-4LBDW7MG.mjs

@@ -0,0 +1,320 @@
+"use client";
+import {
+  Calendar_native_default
+} from "./chunk-7HQWD2HW.mjs";
+import {
+  Text_native_default
+} from "./chunk-RA7237YI.mjs";
+import {
+  Icon_native_default
+} from "./chunk-5NCBENYK.mjs";
+import {
+  getColorStyle
+} from "./chunk-E4YRRUI3.mjs";
+
+// components/datepicker/DatePicker.native.tsx
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { Modal, Platform, StyleSheet, TextInput, TouchableOpacity, View } from "react-native";
+var DatePicker = forwardRef(
+  ({
+    onChange,
+    value,
+    minDate,
+    maxDate,
+    label,
+    sample,
+    required,
+    help,
+    status,
+    disabled,
+    disabledDates,
+    testId,
+    name,
+    ...others
+  }, ref) => {
+    const [inputText, setInputText] = useState("");
+    const [isCalendarVisible, setIsCalendarVisible] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const previousTextRef = useRef("");
+    const calendarValue = value ? new Date(value) : void 0;
+    const formatDateForDisplay = useCallback((dateString) => {
+      if (!dateString) return "";
+      try {
+        const date = new Date(dateString);
+        if (isNaN(date.getTime())) return "";
+        const day = date.getDate().toString().padStart(2, "0");
+        const month = (date.getMonth() + 1).toString().padStart(2, "0");
+        const year = date.getFullYear();
+        return `${day}/${month}/${year}`;
+      } catch {
+        return "";
+      }
+    }, []);
+    const parseManualInput = useCallback(
+      (input) => {
+        const cleaned = input.replace(/[^\d/]/g, "");
+        const dateRegex = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
+        const match = cleaned.match(dateRegex);
+        if (!match) return null;
+        const [, day, month, year] = match;
+        const dayNum = parseInt(day, 10);
+        const monthNum = parseInt(month, 10);
+        const yearNum = parseInt(year, 10);
+        if (dayNum < 1 || dayNum > 31 || monthNum < 1 || monthNum > 12) {
+          return null;
+        }
+        const date = new Date(yearNum, monthNum - 1, dayNum);
+        if (date.getDate() !== dayNum || date.getMonth() !== monthNum - 1 || date.getFullYear() !== yearNum) {
+          return null;
+        }
+        if (minDate && date < new Date(minDate)) return null;
+        if (maxDate && date > new Date(maxDate)) return null;
+        const formattedMonth = monthNum.toString().padStart(2, "0");
+        const formattedDay = dayNum.toString().padStart(2, "0");
+        return `${yearNum}-${formattedMonth}-${formattedDay}`;
+      },
+      [minDate, maxDate]
+    );
+    const isDateInRange = useCallback(
+      (date) => {
+        if (minDate && date < new Date(minDate)) return false;
+        if (maxDate && date > new Date(maxDate)) return false;
+        return true;
+      },
+      [minDate, maxDate]
+    );
+    const handleCalendarChange = useCallback(
+      (selectedDate) => {
+        const date = selectedDate;
+        if (!isDateInRange(date)) return;
+        const year = date.getFullYear();
+        const month = (date.getMonth() + 1).toString().padStart(2, "0");
+        const day = date.getDate().toString().padStart(2, "0");
+        const formattedDate = `${year}-${month}-${day}`;
+        setIsCalendarVisible(false);
+        setIsFocused(false);
+        if (onChange) {
+          onChange(formattedDate);
+        }
+      },
+      [onChange, isDateInRange, formatDateForDisplay]
+    );
+    const handleManualInput = useCallback(
+      (text) => {
+        const previousText = previousTextRef.current;
+        const isDeleting = text.length < previousText.length;
+        if (isDeleting) {
+          const cleaned2 = text.replace(/[^\d/]/g, "");
+          let formatted2 = cleaned2;
+          if (formatted2.endsWith("/")) {
+            formatted2 = formatted2.slice(0, -1);
+          }
+          previousTextRef.current = formatted2;
+          setInputText(formatted2);
+          return;
+        }
+        const cleaned = text.replace(/[^\d/]/g, "");
+        const limited = cleaned.slice(0, 10);
+        const numbersOnly = limited.replace(/\//g, "");
+        let formatted = "";
+        if (numbersOnly.length === 1) {
+          const firstDigit = parseInt(numbersOnly[0]);
+          if (firstDigit > 3) {
+            formatted = "0" + numbersOnly[0] + "/";
+          } else {
+            formatted = numbersOnly;
+          }
+        } else if (numbersOnly.length === 2) {
+          const firstTwoDigits = parseInt(numbersOnly.slice(0, 2));
+          if (firstTwoDigits > 31) {
+            formatted = "0" + numbersOnly[0] + "/0" + numbersOnly[1];
+          } else {
+            formatted = numbersOnly.slice(0, 2) + "/";
+          }
+        } else if (numbersOnly.length === 3) {
+          const dayPart = numbersOnly.slice(0, 2);
+          const monthDigit = parseInt(numbersOnly[2]);
+          if (monthDigit > 1) {
+            formatted = dayPart + "/0" + numbersOnly[2] + "/";
+          } else {
+            formatted = dayPart + "/" + numbersOnly[2];
+          }
+        } else if (numbersOnly.length >= 4) {
+          const dayPart = numbersOnly.slice(0, 2);
+          const monthPart = numbersOnly.slice(2, 4);
+          const monthValue = parseInt(monthPart);
+          if (monthValue > 12) {
+            formatted = dayPart + "/0" + numbersOnly[2] + "/" + numbersOnly[3];
+          } else {
+            formatted = dayPart + "/" + monthPart;
+            if (numbersOnly.length > 4) {
+              formatted += "/" + numbersOnly.slice(4);
+            }
+          }
+        }
+        previousTextRef.current = formatted;
+        setInputText(formatted);
+        if (numbersOnly.length >= 5 && onChange) {
+          const dayPart = numbersOnly.slice(0, 2);
+          const monthPart = numbersOnly.slice(2, 4);
+          const yearPart = numbersOnly.slice(4);
+          const currentYear = (/* @__PURE__ */ new Date()).getFullYear().toString();
+          let yearToTest = yearPart;
+          if (yearPart.length < 4) {
+            if (yearPart.length === 1) {
+              yearToTest = currentYear.slice(0, 3) + yearPart;
+            } else if (yearPart.length === 2) {
+              yearToTest = currentYear.slice(0, 2) + yearPart;
+            } else if (yearPart.length === 3) {
+              yearToTest = yearPart + currentYear.slice(3);
+            }
+          }
+          const dayNum = parseInt(dayPart, 10);
+          const monthNum = parseInt(monthPart, 10);
+          const yearNum = parseInt(yearToTest, 10);
+          if (dayNum >= 1 && dayNum <= 31 && monthNum >= 1 && monthNum <= 12 && yearNum >= 1e3) {
+            const formattedDate = `${yearNum}-${monthNum.toString().padStart(2, "0")}-${dayNum.toString().padStart(2, "0")}`;
+            onChange(formattedDate);
+          }
+        }
+      },
+      [parseManualInput, onChange]
+    );
+    const handleInputBlur = useCallback(() => {
+      setIsFocused(false);
+      if (inputText.trim() === "") {
+        if (onChange) {
+          onChange(null);
+        }
+        return;
+      }
+      const parsedDate = parseManualInput(inputText);
+      if (parsedDate && onChange) {
+        onChange(parsedDate);
+      } else {
+        const previousFormatted = formatDateForDisplay(value || null);
+        setInputText(previousFormatted);
+      }
+    }, [inputText, parseManualInput, onChange, value, formatDateForDisplay]);
+    const handleOpenCalendar = useCallback(() => {
+      if (disabled) return;
+      setIsCalendarVisible(true);
+    }, [disabled]);
+    const handleCloseCalendar = useCallback(() => {
+      setIsCalendarVisible(false);
+    }, []);
+    const handleInputFocus = useCallback(() => {
+      if (disabled) return;
+      setIsFocused(true);
+    }, [disabled]);
+    useEffect(() => {
+      const formatted = formatDateForDisplay(value || null);
+      if (!isFocused) {
+        setInputText(formatted);
+        previousTextRef.current = formatted;
+      }
+    }, [value, formatDateForDisplay, isFocused]);
+    const styles = StyleSheet.create({
+      container: {
+        width: "100%"
+      },
+      label: {
+        fontSize: 14,
+        fontWeight: "500",
+        color: getColorStyle("MAIN" /* MAIN */),
+        marginBottom: 4
+      },
+      sample: {
+        fontSize: 12,
+        color: getColorStyle("NEUTRAL" /* NEUTRAL */),
+        marginBottom: 8
+      },
+      inputContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: disabled ? getColorStyle("DISABLED_FADE" /* DISABLED_FADE */) : getColorStyle("WHITE" /* BACKGROUND */),
+        borderWidth: isFocused ? 2 : 1,
+        borderColor: status === "success" && getColorStyle("SUCCESS" /* SUCCESS */) || status === "warning" && getColorStyle("WARNING" /* WARNING */) || status === "error" && getColorStyle("ERROR" /* ERROR */) || isFocused && getColorStyle("MAIN" /* MAIN */) || getColorStyle("NEUTRAL" /* NEUTRAL */),
+        borderRadius: 3,
+        height: 46,
+        paddingHorizontal: 10
+      },
+      input: {
+        flex: 1,
+        fontSize: 16,
+        color: disabled ? getColorStyle("DISABLED" /* DISABLED */) : getColorStyle("MAIN" /* MAIN */),
+        paddingVertical: Platform.OS === "ios" ? 12 : 8
+      },
+      iconContainer: {
+        width: 32,
+        height: 32,
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      help: {
+        fontSize: 12,
+        marginTop: 4,
+        paddingLeft: 4,
+        color: status === "success" && getColorStyle("SUCCESS" /* SUCCESS */) || status === "warning" && getColorStyle("WARNING" /* WARNING */) || status === "error" && getColorStyle("ERROR" /* ERROR */) || getColorStyle("NEUTRAL" /* NEUTRAL */)
+      },
+      modalOverlay: {
+        flex: 1,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      modalContent: {
+        paddingBottom: 16,
+        width: "90%",
+        shadowColor: "#000",
+        shadowOffset: {
+          width: 0,
+          height: 2
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 8,
+        elevation: 5
+      }
+    });
+    return /* @__PURE__ */ React.createElement(View, { ref, style: styles.container, testID: testId, ...others }, label && /* @__PURE__ */ React.createElement(View, { style: { flexDirection: "row", alignItems: "center" } }, /* @__PURE__ */ React.createElement(Text_native_default, { style: styles.label }, label), required && /* @__PURE__ */ React.createElement(Text_native_default, { style: { color: getColorStyle("ERROR" /* ERROR */), marginLeft: 4 } }, "*")), sample && /* @__PURE__ */ React.createElement(Text_native_default, { level: 3 /* THREE */, style: styles.sample }, sample), /* @__PURE__ */ React.createElement(View, { style: styles.inputContainer }, /* @__PURE__ */ React.createElement(
+      TextInput,
+      {
+        style: styles.input,
+        value: inputText,
+        placeholder: "jj/mm/aaaa",
+        placeholderTextColor: getColorStyle("NEUTRAL" /* NEUTRAL */),
+        editable: !disabled,
+        keyboardType: "numeric",
+        onFocus: handleInputFocus,
+        onBlur: handleInputBlur,
+        onChangeText: handleManualInput,
+        maxLength: 10
+      }
+    ), /* @__PURE__ */ React.createElement(
+      TouchableOpacity,
+      {
+        style: styles.iconContainer,
+        onPress: handleOpenCalendar,
+        disabled,
+        activeOpacity: 0.7
+      },
+      /* @__PURE__ */ React.createElement(Icon_native_default, { name: "tri-calendar", size: "small" /* SMALL */, color: "MAIN" /* MAIN */ })
+    )), help && /* @__PURE__ */ React.createElement(Text_native_default, { style: styles.help }, help), /* @__PURE__ */ React.createElement(Modal, { visible: isCalendarVisible, transparent: true, animationType: "fade", onRequestClose: handleCloseCalendar }, /* @__PURE__ */ React.createElement(View, { style: styles.modalOverlay }, /* @__PURE__ */ React.createElement(TouchableOpacity, { style: StyleSheet.absoluteFillObject, activeOpacity: 1, onPress: handleCloseCalendar }), /* @__PURE__ */ React.createElement(View, { style: styles.modalContent }, /* @__PURE__ */ React.createElement(
+      Calendar_native_default,
+      {
+        value: calendarValue,
+        minDate: minDate ? new Date(minDate) : void 0,
+        maxDate: maxDate ? new Date(maxDate) : void 0,
+        disabledDates,
+        onChange: handleCalendarChange,
+        disabled
+      }
+    )))));
+  }
+);
+DatePicker.displayName = "DatePicker" /* DatePicker */;
+var DatePicker_native_default = DatePicker;
+
+export {
+  DatePicker_native_default
+};

package/lib/{chunk-UPP3GX33.mjs → chunk-5NCBENYK.mjs}

@@ -1,22 +1,23 @@
 "use client";
+import {
+  StatesContext
+} from "./chunk-CWIO3GEP.mjs";
 import {
   TrilogyThemeContext,
   getColorStyle
 } from "./chunk-E4YRRUI3.mjs";
 import {
-  StatesContext
-} from "./chunk-CWIO3GEP.mjs";
-import {
-  isAndroid,
   isIOS
 } from "./chunk-R6PFY5VS.mjs";
+import {
+  Skeleton_default
+} from "./chunk-JJA6BOVR.mjs";
 import {
   getAlignStyle
 } from "./chunk-CD6DMMCL.mjs";
 
 // components/icon/Icon.native.tsx
 import React, { useContext } from "react";
-import ContentLoader, { Circle } from "react-content-loader/native";
 import { StyleSheet, TouchableOpacity, View } from "react-native";
 import { WithLocalSvg } from "react-native-svg/css";
 var Icon = React.forwardRef(
@@ -74,7 +75,16 @@ var Icon = React.forwardRef(
         justifyContent: "center"
       }
     });
-    const IconSkeleton = () => /* @__PURE__ */ React.createElement(ContentLoader, { style: styles.skeleton, ...others }, /* @__PURE__ */ React.createElement(View, { style: { opacity: 0 } }), isAndroid && /* @__PURE__ */ React.createElement(View, null, size === "huge" /* HUGE */ && /* @__PURE__ */ React.createElement(Circle, { cx: "50", cy: "50", r: "50" }) || size === "large" /* LARGE */ && /* @__PURE__ */ React.createElement(Circle, { cx: "33", cy: "33", r: "33" }) || size === "medium" /* MEDIUM */ && /* @__PURE__ */ React.createElement(Circle, { cx: "23", cy: "23", r: "23" }) || size === "small" /* SMALL */ && /* @__PURE__ */ React.createElement(Circle, { cx: "15", cy: "15", r: "15" }) || /* @__PURE__ */ React.createElement(Circle, { cx: "15", cy: "15", r: "15" })));
+    const IconSkeleton = () => /* @__PURE__ */ React.createElement(
+      Skeleton_default,
+      {
+        style: styles.skeleton,
+        width: circledWidth,
+        height: circledWidth,
+        borderRadius: iconSkeletonRadius,
+        testID: "skeleton-id"
+      }
+    );
     if (skeleton) {
       return /* @__PURE__ */ React.createElement(IconSkeleton, null);
     }

package/lib/{chunk-B6D5UHOQ.mjs → chunk-6WPEEBMC.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Text_native_default
-} from "./chunk-MVQ252OA.mjs";
+} from "./chunk-RA7237YI.mjs";
 import {
   getColorStyle
 } from "./chunk-E4YRRUI3.mjs";

package/lib/{chunk-ZRWNSZC6.mjs → chunk-6YU73H5M.mjs}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-3SDJGR37.mjs";
 import {
   Icon_native_default
-} from "./chunk-UPP3GX33.mjs";
+} from "./chunk-5NCBENYK.mjs";
 import {
   getColorStyle
 } from "./chunk-E4YRRUI3.mjs";