@tactics/toddle-styleguide 5.2.1 → 5.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "5.2.1",
+  "version": "5.2.2",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",
@@ -22,6 +22,7 @@
     "@expo/config-plugins": "~9.0.0",
     "@expo/metro-runtime": "~4.0.0",
     "@expo/webpack-config": "~19.0.1",
+    "@lottiefiles/dotlottie-react": "^0.14.3",
     "@miblanchard/react-native-slider": "^2.3.1",
     "@react-native-picker/picker": "2.9.0",
     "@react-navigation/bottom-tabs": "^6.5.8",

package/src/components/molecules/pressable-icon/pressable-icon.component.tsx

@@ -6,7 +6,7 @@ import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './pressable-icon.styles';
 
 type PressableIconProps = {
-  icon: React.ReactElement;
+  icon: React.ReactElement<any>;
   inverted?: boolean;
   disabled?: boolean;
   onPress?: () => void;
@@ -28,6 +28,7 @@ export const PressableIcon = ({
     })
   );
 
+
   const invertedIcon = React.Children.map(icon, (child) =>
     React.cloneElement(child, {
       ...icon.props,

package/src/components/molecules/select-list-item/select-list-item.component.tsx

@@ -17,7 +17,7 @@ import {Paragraph} from '../../atoms/paragraph-components';
 type SelectListProps = {
   title: string;
   subtitle?: string;
-  icon: React.ReactElement;
+  icon: React.ReactElement<any>;
   onPress?: () => void;
   inverse?: boolean;
   image?: ImageSourcePropType;

package/src/components/organisms/loading-indicator/container.component.tsx

@@ -4,7 +4,7 @@ import {useLoadingContext} from '../../../context/loading-dots.context';
 import {Dot} from './dot.component';
 import {animationStyle} from './animation-style.animate';
 
-export const LoadingDotsContainer = (): JSX.Element => {
+export const LoadingDotsContainer = () => {
   const {animation, dots, size, delay} = useLoadingContext();
 
   const animatedValues = (animation: string | undefined) => {

package/src/components/organisms/loading-indicator/dot.component.tsx

@@ -7,7 +7,7 @@ type DotProps = {
   dynamicSize: Animated.Value;
 };
 
-export const Dot = ({dynamicSize}: DotProps): JSX.Element => {
+export const Dot = ({dynamicSize}: DotProps) => {
   const {animation, color, size, spacing} = useLoadingContext();
   return (
     <View

package/src/components/organisms/loading-indicator/loading-indicator.component.tsx

@@ -10,7 +10,7 @@ export const LoadingIndicator = ({
   size = 10,
   spacing = 2,
   delay = 260,
-}: LoadingDotsProps): JSX.Element => {
+}: LoadingDotsProps) => {
   return (
     <LoadingDotContextProvider
       values={{animation, dots, color, size, spacing, delay}}

package/src/icons/outline/outline.tsx

@@ -49,7 +49,7 @@ export const Outline = ({
   name,
   size,
   color,
-}: IconNameInterface): JSX.Element => {
+}: IconNameInterface) => {
   const renderIcon = ({name}: IconNameInterface): React.ReactNode => {
     switch (name) {
       case 'calendar':

package/src/icons/solid/solid.tsx

@@ -44,7 +44,7 @@ import {XMarkIcon as XMarkSolid} from './xmark/xmark.icon';
 import {ShareIcon} from './share/share.icon';
 import {PhotographIcon} from './photograph/photograph-solid.icon';
 
-export const Solid = ({name, size, color}: IconNameInterface): JSX.Element => {
+export const Solid = ({name, size, color}: IconNameInterface) => {
   const renderIcon = ({name}: IconNameInterface): React.ReactNode => {
     switch (name) {
       case 'calendar':