@tecsinapse/react-native-kit 3.5.13 → 3.5.14-beta.0

package/dist/esm/components/molecules/LabeledSwitch/LabeledSwitch.js

@@ -1,5 +1,5 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Switch } from '@tecsinapse/react-core';
-import React__default from 'react';
 import LabelComponent from './LabelComponent.js';
 import { StyledView } from './styled.js';
 
@@ -13,37 +13,41 @@ const LabeledSwitch = ({
   onChange,
   ...rest
 }) => {
-  return /* @__PURE__ */ React__default.createElement(StyledView, null, leftLabel ? /* @__PURE__ */ React__default.createElement(
-    LabelComponent,
-    {
-      active,
-      label: leftLabel,
-      labelPosition: "left",
-      labelProps,
-      disabled: !pressableLabel || disabled,
-      switchDisabled: disabled,
-      onPress: () => onChange(!active)
-    }
-  ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null), /* @__PURE__ */ React__default.createElement(
-    Switch,
-    {
-      active,
-      onChange,
-      disabled,
-      ...rest
-    }
-  ), rightLabel ? /* @__PURE__ */ React__default.createElement(
-    LabelComponent,
-    {
-      active,
-      label: rightLabel,
-      labelPosition: "right",
-      labelProps,
-      disabled: !pressableLabel || disabled,
-      switchDisabled: disabled,
-      onPress: () => onChange(!active)
-    }
-  ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null));
+  return /* @__PURE__ */ jsxs(StyledView, { children: [
+    leftLabel ? /* @__PURE__ */ jsx(
+      LabelComponent,
+      {
+        active,
+        label: leftLabel,
+        labelPosition: "left",
+        labelProps,
+        disabled: !pressableLabel || disabled,
+        switchDisabled: disabled,
+        onPress: () => onChange(!active)
+      }
+    ) : /* @__PURE__ */ jsx(Fragment, {}),
+    /* @__PURE__ */ jsx(
+      Switch,
+      {
+        active,
+        onChange,
+        disabled,
+        ...rest
+      }
+    ),
+    rightLabel ? /* @__PURE__ */ jsx(
+      LabelComponent,
+      {
+        active,
+        label: rightLabel,
+        labelPosition: "right",
+        labelProps,
+        disabled: !pressableLabel || disabled,
+        switchDisabled: disabled,
+        onPress: () => onChange(!active)
+      }
+    ) : /* @__PURE__ */ jsx(Fragment, {})
+  ] });
 };
 
 export { LabeledSwitch as default };

package/dist/esm/components/molecules/ScrollableSelector/ScrollableSelector.js

@@ -1,4 +1,5 @@
-import React__default, { useMemo, useState, useEffect, useCallback } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useMemo, useState, useEffect, useCallback } from 'react';
 import { StyleSheet, Dimensions, View } from 'react-native';
 import Text from '../../atoms/Text/Text.js';
 import { BlockLabels } from './styled.js';
@@ -99,32 +100,41 @@ const ScrollableSelector = ({
       }
     });
   }, [format, date, months, years, hour, minutes]);
-  return /* @__PURE__ */ React__default.createElement(View, { style: { flexDirection: "column", width: "100%" } }, /* @__PURE__ */ React__default.createElement(BlockLabels, null, format === "MM-yyyy" ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(TextComponent, null, monthLabel), /* @__PURE__ */ React__default.createElement(TextComponent, null, yearLabel)) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(TextComponent, null, hourLabel), /* @__PURE__ */ React__default.createElement(TextComponent, null, minuteLabel))), /* @__PURE__ */ React__default.createElement(
-    View,
-    {
-      style: [styles.picker, { height: pickerHeight, width: pickerWidth }]
-    },
-    getOrder().map((el, index) => {
-      return /* @__PURE__ */ React__default.createElement(
-        DateBlock,
-        {
-          date: value ?? /* @__PURE__ */ new Date(),
-          digits: el.digits,
-          value: el.value,
-          onChange: changeHandle,
-          height: pickerHeight,
-          fontSize: fontSize ?? 22,
-          textColor,
-          markColor,
-          markHeight,
-          markWidth: markWidth ?? 70,
-          type: el.name,
-          key: index,
-          locale
-        }
-      );
-    })
-  ));
+  return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "column", width: "100%" }, children: [
+    /* @__PURE__ */ jsx(BlockLabels, { children: format === "MM-yyyy" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(TextComponent, { children: monthLabel }),
+      /* @__PURE__ */ jsx(TextComponent, { children: yearLabel })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(TextComponent, { children: hourLabel }),
+      /* @__PURE__ */ jsx(TextComponent, { children: minuteLabel })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        style: [styles.picker, { height: pickerHeight, width: pickerWidth }],
+        children: getOrder().map((el, index) => {
+          return /* @__PURE__ */ jsx(
+            DateBlock,
+            {
+              date: value ?? /* @__PURE__ */ new Date(),
+              digits: el.digits,
+              value: el.value,
+              onChange: changeHandle,
+              height: pickerHeight,
+              fontSize: fontSize ?? 22,
+              textColor,
+              markColor,
+              markHeight,
+              markWidth: markWidth ?? 70,
+              type: el.name,
+              locale
+            },
+            index
+          );
+        })
+      }
+    )
+  ] });
 };
 const styles = StyleSheet.create({
   picker: {

package/dist/esm/components/molecules/ScrollableSelector/components/DateBlock.js

@@ -1,4 +1,5 @@
-import React__default, { useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
 import { TouchableOpacity, Text } from 'react-native';
 import { Block, Mark, StyledScrollView } from '../styled.js';
 import { format } from 'date-fns';
@@ -42,54 +43,57 @@ const DateBlock = ({
       return value2.toString().padStart(2, "0");
     }
   };
-  return /* @__PURE__ */ React__default.createElement(Block, null, /* @__PURE__ */ React__default.createElement(
-    Mark,
-    {
-      markTop: (height - mHeight) / 2,
-      markColor: markColor ?? "rgba(0, 0, 0, 0.05)",
-      markHeight: 24,
-      markWidth: mWidth
-    }
-  ), /* @__PURE__ */ React__default.createElement(
-    StyledScrollView,
-    {
-      ref: scrollRef,
-      snapToOffsets: offsets,
-      decelerationRate: "fast",
-      showsVerticalScrollIndicator: false,
-      scrollEventThrottle: 0,
-      onMomentumScrollEnd: handleMomentumScrollEnd,
-      fadingEdgeLength: 300
-    },
-    digits.map((value2, index) => {
-      return /* @__PURE__ */ React__default.createElement(
-        TouchableOpacity,
-        {
-          key: index,
-          onPress: () => {
-            onChange(type, digits[index]);
-            snapScrollToIndex(index);
-          }
-        },
-        /* @__PURE__ */ React__default.createElement(
-          TextComponent,
-          {
-            style: {
-              textAlign: "center",
-              fontSize: fontSize || 22,
-              color: textColor || "#000000",
-              marginBottom: index === digits.length - 1 ? height / 2 - dHeight / 2 : 0,
-              marginTop: index === 0 ? height / 2 - dHeight / 2 : 0,
-              lineHeight: dHeight,
-              height: dHeight,
-              textTransform: "capitalize"
-            }
-          },
-          getDisplayedValue(type)(value2)
-        )
-      );
-    })
-  ));
+  return /* @__PURE__ */ jsxs(Block, { children: [
+    /* @__PURE__ */ jsx(
+      Mark,
+      {
+        markTop: (height - mHeight) / 2,
+        markColor: markColor ?? "rgba(0, 0, 0, 0.05)",
+        markHeight: 24,
+        markWidth: mWidth
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StyledScrollView,
+      {
+        ref: scrollRef,
+        snapToOffsets: offsets,
+        decelerationRate: "fast",
+        showsVerticalScrollIndicator: false,
+        scrollEventThrottle: 0,
+        onMomentumScrollEnd: handleMomentumScrollEnd,
+        fadingEdgeLength: 300,
+        children: digits.map((value2, index) => {
+          return /* @__PURE__ */ jsx(
+            TouchableOpacity,
+            {
+              onPress: () => {
+                onChange(type, digits[index]);
+                snapScrollToIndex(index);
+              },
+              children: /* @__PURE__ */ jsx(
+                TextComponent,
+                {
+                  style: {
+                    textAlign: "center",
+                    fontSize: fontSize || 22,
+                    color: textColor || "#000000",
+                    marginBottom: index === digits.length - 1 ? height / 2 - dHeight / 2 : 0,
+                    marginTop: index === 0 ? height / 2 - dHeight / 2 : 0,
+                    lineHeight: dHeight,
+                    height: dHeight,
+                    textTransform: "capitalize"
+                  },
+                  children: getDisplayedValue(type)(value2)
+                }
+              )
+            },
+            index
+          );
+        })
+      }
+    )
+  ] });
 };
 
 export { DateBlock as default };

package/dist/esm/components/molecules/Select/Select.js

@@ -1,5 +1,5 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { HintInputContainer } from '@tecsinapse/react-core';
-import React__default from 'react';
 import Text from '../../atoms/Text/Text.js';
 import { Modal } from './components/Modal.js';
 import { SelectIcon, StyledSelectionText } from './styled.js';
@@ -41,7 +41,7 @@ function Select(props) {
     ...rest
   } = useSelect(props);
   modal.sync(
-    /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ jsx(
       Modal,
       {
         options: selectOptions ?? [],
@@ -69,7 +69,7 @@ function Select(props) {
       }
     )
   );
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, controlComponent ? controlComponent(handlePressInput, getDisplayValue() ?? "") : /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(Fragment, { children: controlComponent ? controlComponent(handlePressInput, getDisplayValue() ?? "") : /* @__PURE__ */ jsx(
     HintInputContainer,
     {
       ...rest,
@@ -82,18 +82,21 @@ function Select(props) {
       hint,
       hintComponent,
       label: _label,
-      rightComponent: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(SelectIcon, { name: "chevron-down", type: "ionicon", size: "centi" }), rightComponent)
-    },
-    /* @__PURE__ */ React__default.createElement(
-      StyledSelectionText,
-      {
-        numberOfLines,
-        fontWeight: "bold",
-        disabled
-      },
-      getDisplayValue() ?? " "
-    )
-  ));
+      rightComponent: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(SelectIcon, { name: "chevron-down", type: "ionicon", size: "centi" }),
+        rightComponent
+      ] }),
+      children: /* @__PURE__ */ jsx(
+        StyledSelectionText,
+        {
+          numberOfLines,
+          fontWeight: "bold",
+          disabled,
+          children: getDisplayValue() ?? " "
+        }
+      )
+    }
+  ) });
 }
 
 export { Select as default };

package/dist/esm/components/molecules/Select/components/Flat.js

@@ -1,3 +1,4 @@
+import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { Divider } from '../styled.js';
 import { FlatList } from 'react-native';
@@ -12,7 +13,7 @@ const Flat = ({
     () => typeof options !== "function" ? getData(options) : [],
     [options, getData]
   );
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(
     FlatList,
     {
       data,

package/dist/esm/components/molecules/Select/components/Modal.js

@@ -1,9 +1,10 @@
-import React__default from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Button } from '../../../atoms/Button/Button.js';
 import { RFValue } from '@tecsinapse/react-core';
 import Text from '../../../atoms/Text/Text.js';
 import Header from '../../../atoms/Header/Header.js';
 import Input from '../../../atoms/Input/Input.js';
+import 'react';
 import 'react-native';
 import { ModalView } from '../../../atoms/Modal/ui/BaseModalView.js';
 import { SearchBarContainer, SelectIcon, FetchIndicator, ModalFooter, TextTitleModal } from '../styled.js';
@@ -11,15 +12,15 @@ import Section from './Section.js';
 import Flat from './Flat.js';
 import useModal from '../hooks/useModal.js';
 
-const ModalTitle = ({ title }) => title ? /* @__PURE__ */ React__default.createElement(
+const ModalTitle = ({ title }) => title ? /* @__PURE__ */ jsx(
   TextTitleModal,
   {
     typography: "h4",
     fontWeight: "bold",
     numberOfLines: 3,
-    style: { maxWidth: RFValue(250) }
-  },
-  title
+    style: { maxWidth: RFValue(250) },
+    children: title
+  }
 ) : null;
 const Component = (props) => {
   const {
@@ -42,54 +43,60 @@ const Component = (props) => {
     groupLabelExtractor,
     ...others
   } = useModal(props);
-  return /* @__PURE__ */ React__default.createElement(ModalView, { ...others, BoxComponent: ModalComponent, showCloseBar: false }, /* @__PURE__ */ React__default.createElement(
-    Header,
-    {
-      rightButton: {
-        onPress: close,
-        icon: {
-          name: "close",
-          type: "material-community",
-          fontColor: "light"
-        }
+  return /* @__PURE__ */ jsxs(ModalView, { ...others, BoxComponent: ModalComponent, showCloseBar: false, children: [
+    /* @__PURE__ */ jsx(
+      Header,
+      {
+        rightButton: {
+          onPress: close,
+          icon: {
+            name: "close",
+            type: "material-community",
+            fontColor: "light"
+          }
+        },
+        children: selectModalTitleComponent ? selectModalTitleComponent : /* @__PURE__ */ jsx(ModalTitle, { title: selectModalTitle })
       }
-    },
-    selectModalTitleComponent ? selectModalTitleComponent : /* @__PURE__ */ React__default.createElement(ModalTitle, { title: selectModalTitle })
-  ), !hideSearchBar ? /* @__PURE__ */ React__default.createElement(SearchBarContainer, null, /* @__PURE__ */ React__default.createElement(
-    Input,
-    {
-      placeholder: searchBarPlaceholder,
-      value: searchArg,
-      onChange: setSearchArg,
-      leftComponent: /* @__PURE__ */ React__default.createElement(SelectIcon, { name: "search", type: "ionicon", size: "centi" })
-    }
-  )) : null, loading ? /* @__PURE__ */ React__default.createElement(FetchIndicator, { animating: true, color: "grey", size: "large" }) : null, options instanceof Map ? /* @__PURE__ */ React__default.createElement(
-    Section,
-    {
-      options,
-      getData,
-      renderItem,
-      keyExtractor,
-      groupLabelExtractor
-    }
-  ) : /* @__PURE__ */ React__default.createElement(
-    Flat,
-    {
-      renderItem,
-      getData,
-      options,
-      keyExtractor
-    }
-  ), !closeOnPick ? /* @__PURE__ */ React__default.createElement(ModalFooter, null, /* @__PURE__ */ React__default.createElement(
-    Button,
-    {
-      variant: "filled",
-      color: "primary",
-      onPress: handleConfirm,
-      disabled: loading
-    },
-    /* @__PURE__ */ React__default.createElement(Text, { fontColor: "light", fontWeight: "bold" }, confirmButtonText)
-  )) : null);
+    ),
+    !hideSearchBar ? /* @__PURE__ */ jsx(SearchBarContainer, { children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        placeholder: searchBarPlaceholder,
+        value: searchArg,
+        onChange: setSearchArg,
+        leftComponent: /* @__PURE__ */ jsx(SelectIcon, { name: "search", type: "ionicon", size: "centi" })
+      }
+    ) }) : null,
+    loading ? /* @__PURE__ */ jsx(FetchIndicator, { animating: true, color: "grey", size: "large" }) : null,
+    options instanceof Map ? /* @__PURE__ */ jsx(
+      Section,
+      {
+        options,
+        getData,
+        renderItem,
+        keyExtractor,
+        groupLabelExtractor
+      }
+    ) : /* @__PURE__ */ jsx(
+      Flat,
+      {
+        renderItem,
+        getData,
+        options,
+        keyExtractor
+      }
+    ),
+    !closeOnPick ? /* @__PURE__ */ jsx(ModalFooter, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "filled",
+        color: "primary",
+        onPress: handleConfirm,
+        disabled: loading,
+        children: /* @__PURE__ */ jsx(Text, { fontColor: "light", fontWeight: "bold", children: confirmButtonText })
+      }
+    ) }) : null
+  ] });
 };
 const Modal = Component;
 

package/dist/esm/components/molecules/Select/components/Option.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { ListItem, StyledTextItemSelect } from '../styled.js';
 import { View } from 'react-native';
 import { Checkbox, RadioButton } from '@tecsinapse/react-core';
@@ -10,39 +10,39 @@ const Component = ({
   type
 }) => {
   const label = labelExtractor(item);
-  return /* @__PURE__ */ React__default.createElement(ListItem, { onPress: () => handlePressItem(item) }, /* @__PURE__ */ React__default.createElement(View, { pointerEvents: "none" }, type === "multi" ? /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(ListItem, { onPress: () => handlePressItem(item), children: /* @__PURE__ */ jsx(View, { pointerEvents: "none", children: type === "multi" ? /* @__PURE__ */ jsx(
     Checkbox,
     {
       color: "primary",
       labelPosition: "right",
-      checked: item._checked
-    },
-    /* @__PURE__ */ React__default.createElement(
-      StyledTextItemSelect,
-      {
-        fontWeight: item._checked ? "bold" : "regular",
-        ellipsizeMode: "tail",
-        numberOfLines: 1
-      },
-      label
-    )
-  ) : /* @__PURE__ */ React__default.createElement(
+      checked: item._checked,
+      children: /* @__PURE__ */ jsx(
+        StyledTextItemSelect,
+        {
+          fontWeight: item._checked ? "bold" : "regular",
+          ellipsizeMode: "tail",
+          numberOfLines: 1,
+          children: label
+        }
+      )
+    }
+  ) : /* @__PURE__ */ jsx(
     RadioButton,
     {
       color: "primary",
       labelPosition: "right",
-      checked: item._checked
-    },
-    /* @__PURE__ */ React__default.createElement(
-      StyledTextItemSelect,
-      {
-        fontWeight: item._checked ? "bold" : "regular",
-        ellipsizeMode: "tail",
-        numberOfLines: 1
-      },
-      label
-    )
-  )));
+      checked: item._checked,
+      children: /* @__PURE__ */ jsx(
+        StyledTextItemSelect,
+        {
+          fontWeight: item._checked ? "bold" : "regular",
+          ellipsizeMode: "tail",
+          numberOfLines: 1,
+          children: label
+        }
+      )
+    }
+  ) }) });
 };
 
 export { Component as default };

package/dist/esm/components/molecules/Select/components/Section.js

@@ -1,4 +1,5 @@
-import React__default, { useMemo } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
 import { Divider, SectionHeader } from '../styled.js';
 import { SectionList } from 'react-native';
 import Text from '../../../atoms/Text/Text.js';
@@ -6,7 +7,7 @@ import Text from '../../../atoms/Text/Text.js';
 const SectionHead = ({
   title,
   groupLabelExtractor
-}) => /* @__PURE__ */ React__default.createElement(SectionHeader, null, /* @__PURE__ */ React__default.createElement(Text, { fontWeight: "bold" }, groupLabelExtractor ? groupLabelExtractor(title) : title));
+}) => /* @__PURE__ */ jsx(SectionHeader, { children: /* @__PURE__ */ jsx(Text, { fontWeight: "bold", children: groupLabelExtractor ? groupLabelExtractor(title) : title }) });
 const Section = ({
   options,
   renderItem,
@@ -21,13 +22,13 @@ const Section = ({
     })) : [],
     [options, getData]
   );
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(
     SectionList,
     {
       sections: sectionList,
       renderItem,
       ItemSeparatorComponent: Divider,
-      renderSectionHeader: ({ section: { title } }) => /* @__PURE__ */ React__default.createElement(SectionHead, { title, groupLabelExtractor }),
+      renderSectionHeader: ({ section: { title } }) => /* @__PURE__ */ jsx(SectionHead, { title, groupLabelExtractor }),
       keyExtractor
     }
   );

package/dist/esm/components/molecules/Select/hooks/useModal.js

@@ -1,3 +1,4 @@
+import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { getStyledModal } from '../styled.js';
 import Component from '../components/Option.js';
@@ -65,7 +66,7 @@ const useModal = ({
     close?.();
   }, [selectedValues]);
   const renderItem = React__default.useCallback(
-    ({ item }) => /* @__PURE__ */ React__default.createElement(
+    ({ item }) => /* @__PURE__ */ jsx(
       Component,
       {
         item,

package/dist/esm/components/molecules/Select/hooks/useSelect.js

@@ -1,4 +1,5 @@
 import React__default, { useState, useEffect } from 'react';
+import 'react/jsx-runtime';
 import 'react-native';
 import { useInputFocus } from '@tecsinapse/react-core';
 import 'react-native-safe-area-context';

package/dist/esm/components/molecules/Snackbar/Snackbar.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsx } from 'react/jsx-runtime';
 import Text from '../../atoms/Text/Text.js';
 import { SnackbarStyled } from './styled.js';
 
@@ -7,7 +7,7 @@ const Snackbar = ({
   textProps = { colorVariant: "primary", colorTone: "medium" },
   ...rest
 }) => {
-  return /* @__PURE__ */ React__default.createElement(SnackbarStyled, { ...rest }, /* @__PURE__ */ React__default.createElement(Text, { fontWeight: "bold", typography: "base", ...textProps }, value));
+  return /* @__PURE__ */ jsx(SnackbarStyled, { ...rest, children: /* @__PURE__ */ jsx(Text, { fontWeight: "bold", typography: "base", ...textProps, children: value }) });
 };
 
 export { Snackbar as default };

package/dist/esm/utils/date.js

@@ -1,13 +1,8 @@
-import { Platform, NativeModules } from 'react-native';
 import * as dateFnsLocales from 'date-fns/locale';
+import { I18nManager } from 'react-native';
 
 const getLocale = () => {
-  let locale;
-  if (Platform.OS === "ios") {
-    locale = NativeModules.SettingsManager.settings.AppleLocale || NativeModules.SettingsManager.settings.AppleLanguages[0];
-  } else {
-    locale = NativeModules.I18nManager.localeIdentifier;
-  }
+  const locale = I18nManager.getConstants().localeIdentifier ?? "pt_BR";
   const code = locale.replace("_", "");
   return dateFnsLocales[code];
 };

package/dist/types/components/atoms/Skeleton/Pulse.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import { IAnimationComponent } from './types';
-export declare const Pulse: ({ active, width, height, childrenLayout, }: IAnimationComponent) => React.JSX.Element;
+export declare const Pulse: ({ active, width, height, childrenLayout, }: IAnimationComponent) => import("react/jsx-runtime").JSX.Element;