@tecsinapse/react-core 1.17.3 → 1.19.0

package/dist/utils/variantComplement.js

@@ -0,0 +1,35 @@
+"use strict";
+
+exports.__esModule = true;
+exports.fontColorVC = exports.colorVC = exports.colorGradationVC = exports.borderColorVC = exports.borderColorGradationVC = void 0;
+const fontColorVC = {
+  filled: 'light',
+  outlined: 'orange',
+  text: 'orange'
+};
+exports.fontColorVC = fontColorVC;
+const colorVC = {
+  filled: 'primary',
+  outlined: 'primary',
+  text: 'primary'
+};
+exports.colorVC = colorVC;
+const colorGradationVC = {
+  filled: 'dark',
+  outlined: 'dark',
+  text: 'dark'
+};
+exports.colorGradationVC = colorGradationVC;
+const borderColorVC = {
+  filled: 'primary',
+  outlined: 'primary',
+  text: 'primary'
+};
+exports.borderColorVC = borderColorVC;
+const borderColorGradationVC = {
+  filled: 'dark',
+  outlined: 'dark',
+  text: 'dark'
+};
+exports.borderColorGradationVC = borderColorGradationVC;
+//# sourceMappingURL=variantComplement.js.map

package/dist/utils/variantComplement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variantComplement.js","names":["fontColorVC","filled","outlined","text","colorVC","colorGradationVC","borderColorVC","borderColorGradationVC"],"sources":["../../src/utils/variantComplement.ts"],"sourcesContent":["import {\n  ColorGradationType,\n  ColorType,\n  FontColorType,\n  VariantType,\n} from '../types/defaults';\n\nexport const fontColorVC: Record<VariantType, FontColorType> = {\n  filled: 'light',\n  outlined: 'orange',\n  text: 'orange',\n};\n\nexport const colorVC: Record<VariantType, ColorType> = {\n  filled: 'primary',\n  outlined: 'primary',\n  text: 'primary',\n};\n\nexport const colorGradationVC: Record<VariantType, ColorGradationType> = {\n  filled: 'dark',\n  outlined: 'dark',\n  text: 'dark',\n};\n\nexport const borderColorVC: Record<VariantType, ColorType> = {\n  filled: 'primary',\n  outlined: 'primary',\n  text: 'primary',\n};\n\nexport const borderColorGradationVC: Record<VariantType, ColorGradationType> = {\n  filled: 'dark',\n  outlined: 'dark',\n  text: 'dark',\n};\n"],"mappings":";;;;AAOO,MAAMA,WAA+C,GAAG;EAC7DC,MAAM,EAAE,OADqD;EAE7DC,QAAQ,EAAE,QAFmD;EAG7DC,IAAI,EAAE;AAHuD,CAAxD;;AAMA,MAAMC,OAAuC,GAAG;EACrDH,MAAM,EAAE,SAD6C;EAErDC,QAAQ,EAAE,SAF2C;EAGrDC,IAAI,EAAE;AAH+C,CAAhD;;AAMA,MAAME,gBAAyD,GAAG;EACvEJ,MAAM,EAAE,MAD+D;EAEvEC,QAAQ,EAAE,MAF6D;EAGvEC,IAAI,EAAE;AAHiE,CAAlE;;AAMA,MAAMG,aAA6C,GAAG;EAC3DL,MAAM,EAAE,SADmD;EAE3DC,QAAQ,EAAE,SAFiD;EAG3DC,IAAI,EAAE;AAHqD,CAAtD;;AAMA,MAAMI,sBAA+D,GAAG;EAC7EN,MAAM,EAAE,MADqE;EAE7EC,QAAQ,EAAE,MAFmE;EAG7EC,IAAI,EAAE;AAHuE,CAAxE"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-core",
   "description": "TecSinapse hybrid React components",
-  "version": "1.17.3",
+  "version": "1.19.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -14,10 +14,10 @@
     "yalc:show": "yalc installations show $npm_package_name"
   },
   "dependencies": {
-    "@emotion/native": "^11.0.0",
-    "@emotion/react": "^11.4.1",
+    "@emotion/native": "^11.10.0",
+    "@emotion/react": "^11.10.0",
     "currency.js": "^2.0.4",
-    "date-fns": "^2.22.1"
+    "date-fns": "^2.29.1"
   },
   "repository": {
     "type": "git",
@@ -34,5 +34,5 @@
     "react-native": "^0.64.0",
     "react-native-vector-icons": "^8.1.0 || ^9.0.0"
   },
-  "gitHead": "a5e28a0fca8b31fec40c9eda3af93a1944c1bbd5"
+  "gitHead": "59f85f1085ace4af0b26b85e32faf92cd2bf303f"
 }

package/src/components/atoms/Badge/styled.ts

@@ -23,9 +23,8 @@ const baseStyle = ({
   `;
 };
 
-export const BadgeStyle = styled(View)<Partial<StyleProps & BadgeProps>>(
-  baseStyle
-);
+export const BadgeStyle =
+  styled(View)<Partial<StyleProps & BadgeProps>>(baseStyle);
 
 export const ViewStyled = styled(View)<Partial<StyleProps & BadgeProps>>`
   align-items: center;

package/src/components/atoms/GroupButton/GroupButton.tsx

@@ -44,16 +44,13 @@ export interface GroupButtonProps<T> {
   disableAllOptions?: boolean;
 }
 
-const GroupButton = <T extends unknown>({
-  style,
-  ...rest
-}: GroupButtonProps<T>) => {
+const GroupButton = <T,>({ style, ...rest }: GroupButtonProps<T>) => {
   return (
     <StyledGroupButton style={style}>{groupOptions(rest)}</StyledGroupButton>
   );
 };
 
-const groupOptions = <T extends unknown>({
+const groupOptions = <T,>({
   options,
   renderOption,
   renderKey,

package/src/components/atoms/Input/InputContainer/InputContainer.tsx

@@ -7,14 +7,14 @@ import {
   FontColorType,
   FontStackType,
   FontWeightType,
-  TypographyVariationType
-} from '../../../../types/defaults';
+  TypographyVariationType,
+} from '@tecsinapse/react-core';
 import { Text, TextProps } from '../../Text';
 import {
   StyledBorderKeeper,
   StyledIconContent,
   StyledInputContainer,
-  StyledLabelContainer
+  StyledLabelContainer,
 } from '../styled';
 
 export type InputVariantType = 'default' | 'error' | 'success';

package/src/components/atoms/Input/InputElement/InputElement.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
 import { ThemeProp } from '@tecsinapse/react-core';
-import React, { FC } from 'react';
-import { StyleProp, TextInputProps, TextStyle } from 'react-native';
+import React from 'react';
+import { StyleProp, TextInput, TextInputProps, TextStyle } from 'react-native';
 import { StyledInputElement } from '../styled';
 
 export interface InputElementProps
@@ -13,10 +13,9 @@ export interface InputElementProps
   onChange?: (value: string) => void;
   onFocus?: () => void;
   onBlur?: () => void;
-  ref?: React.Ref<any>;
 }
 
-const InputElement: FC<InputElementProps> = React.forwardRef(
+const InputElement = React.forwardRef<TextInput, InputElementProps>(
   (
     {
       onChange,
@@ -26,7 +25,7 @@ const InputElement: FC<InputElementProps> = React.forwardRef(
       placeholderTextColor,
       ...rest
     },
-    ref: React.Ref<any>
+    ref
   ): JSX.Element => {
     const theme = useTheme() as ThemeProp;
     const _placeholderColor = placeholderTextColor || theme.font.color.dark;

package/src/components/atoms/Input/InputMaskElement/InputMaskElement.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
 import { ThemeProp } from '@tecsinapse/react-core';
-import React, { FC, useCallback, useEffect } from 'react';
-import { StyleProp, TextInputProps, TextStyle } from 'react-native';
+import React, { useCallback, useEffect } from 'react';
+import { StyleProp, TextInput, TextInputProps, TextStyle } from 'react-native';
 import { StyledInputElement } from '../styled';
 import { MaskType, useStringMask } from '../hooks/useStringMask';
 import { CurrencyOptions, useNumberMask } from '../hooks/useNumberMask';
@@ -24,10 +24,9 @@ export interface InputMaskElementProps
   mask?: (MaskType[] | ((value: string) => MaskType[])) | CurrencyOptions;
   onFocus?: () => void;
   onBlur?: () => void;
-  ref?: React.Ref<any>;
 }
 
-const InputMaskElement: FC<InputMaskElementProps> = React.forwardRef(
+const InputMaskElement = React.forwardRef<TextInput, InputMaskElementProps>(
   (
     {
       onChange,
@@ -38,7 +37,7 @@ const InputMaskElement: FC<InputMaskElementProps> = React.forwardRef(
       mask,
       ...rest
     },
-    ref: React.Ref<any>
+    ref
   ): JSX.Element => {
     const theme = useTheme() as ThemeProp;
 

package/src/components/atoms/ProgressBar/ProgressBar.tsx

@@ -4,8 +4,8 @@ import { Animated, ViewProps } from 'react-native';
 import {
   ColorGradationType,
   ColorType,
-  ThemeProp
-} from '../../../types/defaults';
+  ThemeProp,
+} from '@tecsinapse/react-core';
 import { extractNumbersFromString } from '../../../utils';
 import { Container, Progress, Segment } from './styled';
 
@@ -54,8 +54,6 @@ const ProgressBar: React.FC<ProgressBarProps> = ({
   const items = [...Array(segments).keys()];
 
   const segmentsRender = items.map(index => {
-    
-
     const max = segmentWidth * (index + 1);
     const min = segmentWidth * index;
     const minmax = (totalProgress - min) / (max - min);

package/src/components/atoms/Switch/Switch.tsx

@@ -1,12 +1,21 @@
 import { useTheme } from '@emotion/react';
 import React, { FC, useCallback, useEffect } from 'react';
-import { Animated, LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
+import {
+  Animated,
+  LayoutChangeEvent,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
 import {
   ColorGradationType,
   ColorType,
-  ThemeProp
-} from '../../../types/defaults';
-import { extractNumbersFromString, lightenDarkenColor, RFValueStr } from '../../../utils';
+  ThemeProp,
+} from '@tecsinapse/react-core';
+import {
+  extractNumbersFromString,
+  lightenDarkenColor,
+  RFValueStr,
+} from '../../../utils';
 import { PressableSurface } from '../PressableSurface';
 import { transitionSwitch } from './animation';
 import { StyledSwitch, StyledSwitchContent, SWITCH_PIN_WIDTH } from './styled';
@@ -36,19 +45,25 @@ const Switch: FC<SwitchProps> = ({
 }): JSX.Element => {
   const theme = useTheme() as ThemeProp;
 
-  const width = React.useRef(0)
-  const transitionValue = React.useRef(new Animated.Value(0)).current
-  const animatedColor = React.useRef(new Animated.Value(0)).current
-  
+  const width = React.useRef(0);
+  const transitionValue = React.useRef(new Animated.Value(0)).current;
+  const animatedColor = React.useRef(new Animated.Value(0)).current;
+
   const calculateTranslate = () => {
     if (width.current > 0) {
-      return width.current - (extractNumbersFromString(theme.spacing.micro) * 2) - (extractNumbersFromString(RFValueStr(SWITCH_PIN_WIDTH)))
+      return (
+        width.current -
+        extractNumbersFromString(theme.spacing.micro) * 2 -
+        extractNumbersFromString(RFValueStr(SWITCH_PIN_WIDTH))
+      );
     }
-    return 0
-  }
+    return 0;
+  };
 
   const getBackgroundColor = (color: string) => {
-    return disabled ? lightenDarkenColor(theme.color[inactiveColor][inactiveColorTone], 20) : color;
+    return disabled
+      ? lightenDarkenColor(theme.color[inactiveColor][inactiveColorTone], 20)
+      : color;
   };
 
   const interpolateColor = animatedColor.interpolate({
@@ -56,11 +71,11 @@ const Switch: FC<SwitchProps> = ({
     outputRange: [
       getBackgroundColor(theme.color[inactiveColor][inactiveColorTone]),
       getBackgroundColor(theme.color[activeColor][activeColorTone]),
-    ]
+    ],
   });
 
   useEffect(() => {
-    const translate = calculateTranslate()
+    const translate = calculateTranslate();
     transitionSwitch(active, translate, transitionValue, animatedColor);
   }, [active]);
 
@@ -69,10 +84,10 @@ const Switch: FC<SwitchProps> = ({
   }, [active, onChange]);
 
   const handleSwitchLayout = (lce: LayoutChangeEvent) => {
-    width.current = lce.nativeEvent.layout.width
-    const translate = calculateTranslate()
+    width.current = lce.nativeEvent.layout.width;
+    const translate = calculateTranslate();
     transitionSwitch(active, translate, transitionValue, animatedColor);
-  }
+  };
 
   return (
     <PressableSurface
@@ -81,8 +96,13 @@ const Switch: FC<SwitchProps> = ({
       effect="none"
       disabled={disabled}
     >
-      <StyledSwitchContent onLayout={handleSwitchLayout} style={{ backgroundColor: interpolateColor }}>
-        <StyledSwitch style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}/>
+      <StyledSwitchContent
+        onLayout={handleSwitchLayout}
+        style={{ backgroundColor: interpolateColor }}
+      >
+        <StyledSwitch
+          style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}
+        />
       </StyledSwitchContent>
     </PressableSurface>
   );

package/src/components/atoms/Switch/animation.ts

@@ -1,6 +1,6 @@
 import { Animated, Easing } from 'react-native';
 
-const ANIMATION_SPEED = 140
+const ANIMATION_SPEED = 140;
 
 export const transitionSwitch = (
   active: boolean,
@@ -8,9 +8,8 @@ export const transitionSwitch = (
   transitionValue: Animated.Value,
   animatedColor: Animated.Value
 ): void => {
+  if (translate <= 0) return;
 
-  if (translate <= 0) return
-  
   if (active) {
     Animated.timing(transitionValue, {
       toValue: translate,
@@ -23,8 +22,8 @@ export const transitionSwitch = (
       duration: ANIMATION_SPEED,
       useNativeDriver: false,
     }).start();
-    return
-  } 
+    return;
+  }
 
   Animated.timing(transitionValue, {
     toValue: 0,
@@ -37,5 +36,4 @@ export const transitionSwitch = (
     duration: ANIMATION_SPEED,
     useNativeDriver: false,
   }).start();
-
 };

package/src/components/atoms/Switch/styled.ts

@@ -1,14 +1,12 @@
 import styled from '@emotion/native';
 import { Animated } from 'react-native';
-import { StyleProps } from '../../../types/defaults';
+import { StyleProps } from '@tecsinapse/react-core';
 import { RFValueStr } from '../../../utils';
 
-export const SWITCH_BODY_WIDTH = '40px'
-export const SWITCH_PIN_WIDTH = '16px'
+export const SWITCH_BODY_WIDTH = '40px';
+export const SWITCH_PIN_WIDTH = '16px';
 
-export const StyledSwitchContent = styled(Animated.View)<
-  Partial<StyleProps>
->`
+export const StyledSwitchContent = styled(Animated.View)<Partial<StyleProps>>`
   border-radius: ${({ theme }) => theme.borderRadius.pill};
   padding: 0 ${({ theme }) => theme.spacing.micro};
   justify-content: center;

package/src/components/atoms/Tag/Tag.tsx

@@ -43,7 +43,7 @@ const Tag: React.FC<TagProps> = ({
     <StyledTagContainer
       {...rest}
       variant={variant}
-      style={[{ opacity: (fadeAnim as unknown) as number }, style]}
+      style={[{ opacity: fadeAnim as unknown as number }, style]}
       visible={!dismiss}
     >
       {icon && (

package/src/components/atoms/shared/PaperAndCard.ts

@@ -18,7 +18,7 @@ export const elevatedStyles = ({
       shadowOffset: { width: 0, height: 2 },
       shadowOpacity: 0.05,
       shadowRadius: 5,
-      elevation: 2
+      elevation: 2,
     }),
   ];
 /* eslint-enable @typescript-eslint/no-explicit-any */

package/src/components/molecules/Calendar/index.ts

@@ -3,5 +3,5 @@ export {
   CalendarProps,
   SelectionType,
   DateRange,
-  Value
+  Value,
 } from './Calendar';

package/src/components/molecules/DatePicker/DatePicker.tsx

@@ -7,21 +7,26 @@ import { CalendarProps, DateRange, SelectionType } from '../Calendar';
 import { HintInputContainer } from '../HintInputContainer';
 import { CalendarIcon, getStyledTextComponent } from './styled';
 
-export interface DatePickerProps<T extends SelectionType> extends InputContainerProps, Omit<CalendarProps<T>, 'style'> {
+export interface DatePickerProps<T extends SelectionType>
+  extends InputContainerProps,
+    Omit<CalendarProps<T>, 'style'> {
   controlComponent?: (
     onPress: () => void,
     displayValue?: string
   ) => JSX.Element;
   TextComponent?: React.FC<TextProps>;
-  CalendarComponent: React.FC<CalendarProps<T>>
+  CalendarComponent: React.FC<CalendarProps<T>>;
   placeholder?: string;
   onFocus?: () => void | never;
   onBlur?: () => void | never;
   format?: string;
   closeOnPick?: boolean;
-  renderCalendar: (calendar: React.ReactElement, blur?: () => void) => JSX.Element|null
-  requestShowCalendar: () => void
-  requestCloseCalendar: () => void
+  renderCalendar: (
+    calendar: React.ReactElement,
+    blur?: () => void
+  ) => JSX.Element | null;
+  requestShowCalendar: () => void;
+  requestCloseCalendar: () => void;
 }
 
 function DatePicker<T extends SelectionType>({
@@ -51,7 +56,6 @@ function DatePicker<T extends SelectionType>({
   requestCloseCalendar,
   ...rest
 }: DatePickerProps<T>): JSX.Element {
-  
   const { focused, handleBlur, handleFocus } = useInputFocus(
     onFocus,
     onBlur,
@@ -59,7 +63,7 @@ function DatePicker<T extends SelectionType>({
   );
 
   const handleShowCalendar = React.useCallback(() => {
-    requestShowCalendar()
+    requestShowCalendar();
     handleFocus();
   }, [handleFocus, requestShowCalendar]);
 
@@ -99,7 +103,7 @@ function DatePicker<T extends SelectionType>({
       onChange={onChange}
       locale={locale}
     />
-  )
+  );
 
   return (
     <>

package/src/components/molecules/DateTimePicker/DateTimePicker.tsx

@@ -7,7 +7,9 @@ import { DateTimeSelector, DateTimeSelectorProps } from '../DateTimeSelector';
 import { HintInputContainer } from '../HintInputContainer';
 import { getStyledDateTimeSelector } from './styled';
 
-export interface DateTimePickerProps extends InputContainerProps, Omit<DateTimeSelectorProps, 'style'> {
+export interface DateTimePickerProps
+  extends InputContainerProps,
+    Omit<DateTimeSelectorProps, 'style'> {
   controlComponent?: (
     onPress: () => void,
     displayValue?: string
@@ -17,9 +19,12 @@ export interface DateTimePickerProps extends InputContainerProps, Omit<DateTimeS
   placeholder?: string;
   onFocus?: () => void | never;
   onBlur?: () => void | never;
-  renderSelector: (selector: React.ReactElement, blur?: () => void) => JSX.Element|null
-  requestShowSelector: () => void
-  requestCloseSelector: () => void
+  renderSelector: (
+    selector: React.ReactElement,
+    blur?: () => void
+  ) => JSX.Element | null;
+  requestShowSelector: () => void;
+  requestCloseSelector: () => void;
 }
 
 const DateTimePicker: React.FC<DateTimePickerProps> = ({
@@ -59,7 +64,6 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
   requestCloseSelector,
   ...rest
 }) => {
-  
   const { focused, handleBlur, handleFocus } = useInputFocus(
     onFocus,
     onBlur,
@@ -67,18 +71,22 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
   );
 
   const handleShowSelector = () => {
-    requestShowSelector()
+    requestShowSelector();
     handleFocus();
   };
 
   const handleChoosing = (value: Date) => {
-    onChange?.(value)
-    requestCloseSelector()
+    onChange?.(value);
+    requestCloseSelector();
   };
 
   const StyledText = getStyledTextComponent(TextComponent);
-  const displayValue = (value ? formatDate(value, format, { locale: locale }) : placeholder) || ' ';
-  const StyledDateTimeSelector = getStyledDateTimeSelector(DateTimeSelectorComponent)
+  const displayValue =
+    (value ? formatDate(value, format, { locale: locale }) : placeholder) ||
+    ' ';
+  const StyledDateTimeSelector = getStyledDateTimeSelector(
+    DateTimeSelectorComponent
+  );
 
   const dateTimeSelector = (
     <StyledDateTimeSelector
@@ -102,7 +110,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
       minuteLabel={minuteLabel}
       onChange={handleChoosing}
     />
-  )
+  );
 
   return (
     <>

package/src/components/molecules/DateTimeSelector/DateTimeSelector.tsx

@@ -99,7 +99,6 @@ const DateTimeSelector: React.FC<DateTimeSelectorProps> = ({
   value,
   onChange,
   mode = 'date',
-  format,
   locale,
   upperDateThreshold: _upperDateThreshold,
   lowerDateThreshold: _lowerDateThreshold,

package/src/components/molecules/Grid/functions.ts

@@ -0,0 +1,29 @@
+import {
+  extractNumbersFromString,
+  GridSpacing,
+  PaddingPosition,
+  Spacing,
+} from '@tecsinapse/react-core';
+
+export const getGridItemPadding = (
+  pos: PaddingPosition,
+  _spacing: GridSpacing | undefined,
+  themeSpacing: Spacing
+): number | undefined => {
+  if (_spacing) {
+    if (typeof _spacing === 'string')
+      return extractNumbersFromString(themeSpacing[_spacing]);
+    else if (typeof _spacing === 'object' && _spacing[pos]) {
+      return extractNumbersFromString(themeSpacing[_spacing[pos] ?? '0']);
+    } else return undefined;
+  } else return undefined;
+};
+
+/**
+ * Calc the basis width percentage for a given item
+ * @param columns - number of grid columns
+ * @param span - number of columns to merge
+ * @returns {number} - value in %
+ */
+export const getGridItemColumSpan = (columns: number, span: number): number =>
+  100 / (columns / span);

package/src/components/molecules/Grid/index.ts

@@ -1,2 +1,66 @@
-export { GridItem, IGridItem } from './Item';
-export { default as Grid, IGrid } from './Grid';
+import React from 'react';
+import { SpacingType } from '@tecsinapse/react-core';
+
+export interface IGrid {
+  children: JSX.Element[];
+  /** Layout should represent the multiplier of columns to fill the rows properly.
+   * Example:
+   * const layout = [
+   *   [6, 6], // Two elements on row
+   *   [4, 4, 4], // Three elements on row
+   *   [12], // One element on row
+   * ];
+   * */
+  layout?: number[][];
+  /** Number of grid columns to be considered (not the number of elements per row) */
+  columns?: number;
+  spacing?:
+    | SpacingType
+    | {
+        top?: SpacingType;
+        right?: SpacingType;
+        bottom?: SpacingType;
+        left?: SpacingType;
+      };
+}
+
+export type FlexPositioning = 'flex-start' | 'flex-end' | 'center';
+export type FlexAlignBase = FlexPositioning | 'stretch';
+export type FlexAlignType = FlexAlignBase | 'baseline';
+export type FlexSpacing = 'space-between' | 'space-around';
+export type PaddingPosition = 'top' | 'right' | 'bottom' | 'left';
+
+export type GridSpacing =
+  | SpacingType
+  | {
+      top?: SpacingType;
+      right?: SpacingType;
+      bottom?: SpacingType;
+      left?: SpacingType;
+    };
+
+export interface IGridItem {
+  children: React.ReactElement;
+  /** Number of columns to fill */
+  span: number;
+  /** You don't have to give this property since is inherited from Grid */
+  columns?: number;
+  loading?: boolean;
+  /** If your GridItem has a loading state, specify the component here (Skeleton) */
+  loadingComponent?: React.ReactElement;
+  /** Flex properties below */
+  alignContent?: FlexAlignBase | FlexSpacing;
+  alignItems?: FlexAlignType;
+  alignSelf?: 'auto' | FlexAlignType;
+  flex?: number;
+  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+  flexGrow?: number;
+  flexShrink?: number;
+  justifyContent?: FlexPositioning | FlexSpacing | 'space-evenly';
+  /** You don't have to give this property since is inherited from Grid */
+  spacing?: GridSpacing;
+  /** Used to wrap children in a View when its style extrapolates the dimensions*/
+  wrapper?: boolean;
+}
+
+export { getGridItemColumSpan, getGridItemPadding } from './functions';

package/src/components/molecules/HintInputContainer/HintInputContainer.tsx

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
-import { Hint, InputVariantType, PressableInputContainer, PressableInputContainerProps } from '../../atoms/Input';
+import {
+  Hint,
+  InputVariantType,
+  PressableInputContainer,
+  PressableInputContainerProps,
+} from '../../atoms/Input';
 import { TextProps } from '../../atoms/Text';
 
 export interface HintInputContainerProps extends PressableInputContainerProps {