etendo-ui-library 1.2.55 → 1.2.57

package/dist-native/components/button/Button.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ButtonProps } from './Button.types';
-declare const Button: ({ text, onPress, fontSize, typeStyle, disabled, width, height, iconLeft, iconRight, paddingHorizontal, paddingVertical, loading, sizeLoadingIndicator, }: ButtonProps) => React.JSX.Element;
+declare const Button: ({ text, onPress, fontSize, typeStyle, disabled, width, height, iconLeft, iconRight, paddingHorizontal, paddingVertical, loading, }: ButtonProps) => React.JSX.Element;
 export default Button;

package/dist-native/components/button/Button.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _colors=require("../../styles/colors");var _Button=require("./Button.styles");var _this=this,_jsxFileName="/home/jenkins/workspace/etendo_ui_library_develop/src/components/button/Button.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&Object.prototype.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var Button=function Button(_ref){var text=_ref.text,onPress=_ref.onPress,_ref$fontSize=_ref.fontSize,fontSize=_ref$fontSize===void 0?16:_ref$fontSize,typeStyle=_ref.typeStyle,disabled=_ref.disabled,_ref$width=_ref.width,width=_ref$width===void 0?'auto':_ref$width,height=_ref.height,iconLeft=_ref.iconLeft,iconRight=_ref.iconRight,_ref$paddingHorizonta=_ref.paddingHorizontal,paddingHorizontal=_ref$paddingHorizonta===void 0?12:_ref$paddingHorizonta,_ref$paddingVertical=_ref.paddingVertical,paddingVertical=_ref$paddingVertical===void 0?12:_ref$paddingVertical,_ref$loading=_ref.loading,loading=_ref$loading===void 0?false:_ref$loading,_ref$sizeLoadingIndic=_ref.sizeLoadingIndicator,sizeLoadingIndicator=_ref$sizeLoadingIndic===void 0?16:_ref$sizeLoadingIndic;var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isHovered=_useState2[0],setIsHovered=_useState2[1];var getHoveredBackgroundColor=function getHoveredBackgroundColor(backgroundColor){switch(backgroundColor){case'primary':return _colors.TERTIARY_800;case'secondary':return _colors.SECONDARY_300;case'terciary':return _colors.TERTIARY_50;case'whiteBorder':return _colors.PRIMARY_100;}};var getHoveredTextColorAndViewColor=function getHoveredTextColorAndViewColor(typeStyle){switch(typeStyle){case'white':return _colors.TERTIARY_800;case'whiteBorder':return _colors.NEUTRAL_50;case'primary':return _colors.NEUTRAL_50;default:return _colors.PRIMARY_100;}};var stateStyleContainer=function stateStyleContainer(pressed){if(disabled){return _Button.ButtonStyleVariant[typeStyle].containerDisabled;}if(pressed&&!isHovered&&!loading&&typeStyle==='whiteBorder'){return Object.assign({},_Button.ButtonStyleVariant[typeStyle].container,{opacity:0.7,backgroundColor:'transparent'});}if(pressed&&!loading){var hoveredBackgroundColor=getHoveredBackgroundColor(typeStyle);return Object.assign({},_Button.ButtonStyleVariant[typeStyle].container,{opacity:0.7,backgroundColor:hoveredBackgroundColor});}if(isHovered&&!loading){var _hoveredBackgroundColor=getHoveredBackgroundColor(typeStyle);return Object.assign({},_Button.ButtonStyleVariant[typeStyle].container,{backgroundColor:_hoveredBackgroundColor});}return _Button.ButtonStyleVariant[typeStyle].container;};var handleHoverIn=function handleHoverIn(){setIsHovered(true);};var handleHoverOut=function handleHoverOut(){setIsHovered(false);};var stateStyleText=function stateStyleText(){if(loading&&!iconLeft&&!iconRight){return{color:'transparent'};}if(disabled){return _Button.ButtonStyleVariant[typeStyle].textDisabled;}if(isHovered&&!loading){var hoveredTextColor=getHoveredTextColorAndViewColor(typeStyle);if(hoveredTextColor){return Object.assign({},_Button.ButtonStyleVariant[typeStyle].text,{color:hoveredTextColor});}}return _Button.ButtonStyleVariant[typeStyle].text;};var stateStyleIcon=function stateStyleIcon(){if(disabled){return _Button.ButtonStyleVariant[typeStyle].imageDisabled;}if(isHovered&&!loading){return isHovered?getHoveredTextColorAndViewColor(typeStyle):_Button.ButtonStyleVariant[typeStyle].imageColor;}return _Button.ButtonStyleVariant[typeStyle].imageColor;};var stateSizeIndicator=function stateSizeIndicator(iconComponent){var _iconComponent$props,_iconComponent$props$,_iconComponent$props4,_iconComponent$props5;if(iconComponent!=null&&(_iconComponent$props=iconComponent.props)!=null&&(_iconComponent$props$=_iconComponent$props.style)!=null&&_iconComponent$props$.height){var _iconComponent$props2,_iconComponent$props3;return iconComponent==null?void 0:(_iconComponent$props2=iconComponent.props)==null?void 0:(_iconComponent$props3=_iconComponent$props2.style)==null?void 0:_iconComponent$props3.height;}if(iconComponent!=null&&(_iconComponent$props4=iconComponent.props)!=null&&(_iconComponent$props5=_iconComponent$props4.style)!=null&&_iconComponent$props5.width){var _iconComponent$props6,_iconComponent$props7;return iconComponent==null?void 0:(_iconComponent$props6=iconComponent.props)==null?void 0:(_iconComponent$props7=_iconComponent$props6.style)==null?void 0:_iconComponent$props7.width;}return sizeLoadingIndicator;};var renderIcon=function renderIcon(icon){var _icon$props,_icon$props$style,_icon$props2,_icon$props2$style;var _ref2=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{},_ref2$marginRight=_ref2.marginRight,marginRight=_ref2$marginRight===void 0?0:_ref2$marginRight,_ref2$marginLeft=_ref2.marginLeft,marginLeft=_ref2$marginLeft===void 0?0:_ref2$marginLeft;if(!icon)return null;var iconSize=stateSizeIndicator(icon);var iconColor=stateStyleIcon();if(loading){return _react.default.createElement(_reactNative.ActivityIndicator,{size:iconSize,color:iconColor,style:{marginRight:marginRight,marginLeft:marginLeft},__self:_this,__source:{fileName:_jsxFileName,lineNumber:148,columnNumber:9}});}return _react.default.cloneElement(icon,{style:{width:(icon==null?void 0:(_icon$props=icon.props)==null?void 0:(_icon$props$style=_icon$props.style)==null?void 0:_icon$props$style.width)||16,height:(icon==null?void 0:(_icon$props2=icon.props)==null?void 0:(_icon$props2$style=_icon$props2.style)==null?void 0:_icon$props2$style.height)||16,marginRight:marginRight,marginLeft:marginLeft},fill:iconColor});};var handleOnPress=function handleOnPress(){if(onPress){onPress();}};return _react.default.createElement(_reactNative.TouchableOpacity,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:173,columnNumber:5}},_react.default.createElement(_reactNative.Pressable,{onHoverIn:handleHoverIn,onHoverOut:handleHoverOut,style:function style(_ref3){var pressed=_ref3.pressed;return[stateStyleContainer(pressed),{height:height,width:width,paddingHorizontal:paddingHorizontal,paddingVertical:paddingVertical}];},onPress:handleOnPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:174,columnNumber:7}},renderIcon(iconLeft,{marginRight:iconLeft&&text?8:0}),loading&&!iconLeft&&!iconRight&&_react.default.createElement(_reactNative.ActivityIndicator,{size:sizeLoadingIndicator,color:stateStyleIcon(),style:_Button.styles.indicatorCenterStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:186,columnNumber:11}}),_react.default.createElement(_reactNative.Text,{style:[stateStyleText(),{fontSize:fontSize}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:192,columnNumber:9}},text),renderIcon(iconRight,{marginLeft:iconRight&&text?8:0})));};var _default=exports.default=Button;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _colors=require("../../styles/colors");var _Button=require("./Button.styles");var _this=this,_jsxFileName="/home/jenkins/workspace/etendo_ui_library_develop/src/components/button/Button.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&Object.prototype.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var Button=function Button(_ref){var text=_ref.text,onPress=_ref.onPress,_ref$fontSize=_ref.fontSize,fontSize=_ref$fontSize===void 0?16:_ref$fontSize,typeStyle=_ref.typeStyle,disabled=_ref.disabled,_ref$width=_ref.width,width=_ref$width===void 0?'auto':_ref$width,height=_ref.height,iconLeft=_ref.iconLeft,iconRight=_ref.iconRight,_ref$paddingHorizonta=_ref.paddingHorizontal,paddingHorizontal=_ref$paddingHorizonta===void 0?12:_ref$paddingHorizonta,_ref$paddingVertical=_ref.paddingVertical,paddingVertical=_ref$paddingVertical===void 0?12:_ref$paddingVertical,_ref$loading=_ref.loading,loading=_ref$loading===void 0?false:_ref$loading;var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isHovered=_useState2[0],setIsHovered=_useState2[1];var getHoveredBackgroundColor=function getHoveredBackgroundColor(backgroundColor){switch(backgroundColor){case'primary':return _colors.TERTIARY_800;case'secondary':return _colors.SECONDARY_300;case'terciary':return _colors.TERTIARY_50;case'whiteBorder':return _colors.PRIMARY_100;}};var getHoveredTextColorAndViewColor=function getHoveredTextColorAndViewColor(typeStyle){switch(typeStyle){case'white':return _colors.TERTIARY_800;case'whiteBorder':return _colors.NEUTRAL_50;case'primary':return _colors.NEUTRAL_50;default:return _colors.PRIMARY_100;}};var stateStyleContainer=function stateStyleContainer(pressed){if(disabled){return _Button.ButtonStyleVariant[typeStyle].containerDisabled;}if(pressed&&!isHovered&&!loading&&typeStyle==='whiteBorder'){return Object.assign({},_Button.ButtonStyleVariant[typeStyle].container,{opacity:0.7,backgroundColor:'transparent'});}if(pressed&&!loading){var hoveredBackgroundColor=getHoveredBackgroundColor(typeStyle);return Object.assign({},_Button.ButtonStyleVariant[typeStyle].container,{opacity:0.7,backgroundColor:hoveredBackgroundColor});}if(isHovered&&!loading){var _hoveredBackgroundColor=getHoveredBackgroundColor(typeStyle);return Object.assign({},_Button.ButtonStyleVariant[typeStyle].container,{backgroundColor:_hoveredBackgroundColor});}return _Button.ButtonStyleVariant[typeStyle].container;};var handleHoverIn=function handleHoverIn(){setIsHovered(true);};var handleHoverOut=function handleHoverOut(){setIsHovered(false);};var stateStyleText=function stateStyleText(){if(loading&&!iconLeft&&!iconRight){return{color:'transparent'};}if(disabled){return _Button.ButtonStyleVariant[typeStyle].textDisabled;}if(isHovered&&!loading){var hoveredTextColor=getHoveredTextColorAndViewColor(typeStyle);if(hoveredTextColor){return Object.assign({},_Button.ButtonStyleVariant[typeStyle].text,{color:hoveredTextColor});}}return _Button.ButtonStyleVariant[typeStyle].text;};var stateStyleIcon=function stateStyleIcon(){if(disabled){return _Button.ButtonStyleVariant[typeStyle].imageDisabled;}if(isHovered&&!loading){return isHovered?getHoveredTextColorAndViewColor(typeStyle):_Button.ButtonStyleVariant[typeStyle].imageColor;}return _Button.ButtonStyleVariant[typeStyle].imageColor;};var stateSizeIndicator=function stateSizeIndicator(iconComponent){var _iconComponent$props,_iconComponent$props$,_iconComponent$props4,_iconComponent$props5;if(iconComponent!=null&&(_iconComponent$props=iconComponent.props)!=null&&(_iconComponent$props$=_iconComponent$props.style)!=null&&_iconComponent$props$.height){var _iconComponent$props2,_iconComponent$props3;return iconComponent==null?void 0:(_iconComponent$props2=iconComponent.props)==null?void 0:(_iconComponent$props3=_iconComponent$props2.style)==null?void 0:_iconComponent$props3.height;}if(iconComponent!=null&&(_iconComponent$props4=iconComponent.props)!=null&&(_iconComponent$props5=_iconComponent$props4.style)!=null&&_iconComponent$props5.width){var _iconComponent$props6,_iconComponent$props7;return iconComponent==null?void 0:(_iconComponent$props6=iconComponent.props)==null?void 0:(_iconComponent$props7=_iconComponent$props6.style)==null?void 0:_iconComponent$props7.width;}return 16;};var renderIcon=function renderIcon(icon){var _icon$props,_icon$props$style,_icon$props2,_icon$props2$style;var _ref2=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{},_ref2$marginRight=_ref2.marginRight,marginRight=_ref2$marginRight===void 0?0:_ref2$marginRight,_ref2$marginLeft=_ref2.marginLeft,marginLeft=_ref2$marginLeft===void 0?0:_ref2$marginLeft;if(!icon)return null;var iconSize=stateSizeIndicator(icon);var iconColor=stateStyleIcon();if(loading){return _react.default.createElement(_reactNative.ActivityIndicator,{size:iconSize,color:iconColor,style:{marginRight:marginRight,marginLeft:marginLeft},__self:_this,__source:{fileName:_jsxFileName,lineNumber:147,columnNumber:9}});}return _react.default.cloneElement(icon,{style:{width:(icon==null?void 0:(_icon$props=icon.props)==null?void 0:(_icon$props$style=_icon$props.style)==null?void 0:_icon$props$style.width)||16,height:(icon==null?void 0:(_icon$props2=icon.props)==null?void 0:(_icon$props2$style=_icon$props2.style)==null?void 0:_icon$props2$style.height)||16,marginRight:marginRight,marginLeft:marginLeft},fill:iconColor});};var handleOnPress=function handleOnPress(){if(onPress){onPress();}};return _react.default.createElement(_reactNative.TouchableOpacity,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:172,columnNumber:5}},_react.default.createElement(_reactNative.Pressable,{onHoverIn:handleHoverIn,onHoverOut:handleHoverOut,style:function style(_ref3){var pressed=_ref3.pressed;return[stateStyleContainer(pressed),{height:height,width:width,paddingHorizontal:paddingHorizontal,paddingVertical:paddingVertical}];},onPress:handleOnPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:173,columnNumber:7}},renderIcon(iconLeft,{marginRight:iconLeft&&text?8:0}),loading&&!iconLeft&&!iconRight&&_react.default.createElement(_reactNative.ActivityIndicator,{size:fontSize,color:stateStyleIcon(),style:_Button.styles.indicatorCenterStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:185,columnNumber:11}}),_react.default.createElement(_reactNative.Text,{style:[stateStyleText(),{fontSize:fontSize}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:191,columnNumber:9}},text),renderIcon(iconRight,{marginLeft:iconRight&&text?8:0})));};var _default=exports.default=Button;

package/dist-native/components/button/Button.types.d.ts

@@ -26,5 +26,4 @@ export interface ButtonProps {
     paddingHorizontal?: DimensionValue;
     paddingVertical?: DimensionValue;
     loading?: boolean;
-    sizeLoadingIndicator?: number | 'small' | 'large';
 }

package/dist-native/components/input/Input.style.d.ts

@@ -164,12 +164,25 @@ export declare const styles: {
         flexShrink?: number | undefined;
         flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
         height?: import("react-native").DimensionValue | undefined;
+        inset?: import("react-native").DimensionValue | undefined;
+        insetBlock?: import("react-native").DimensionValue | undefined;
+        insetBlockEnd?: import("react-native").DimensionValue | undefined;
+        insetBlockStart?: import("react-native").DimensionValue | undefined;
+        insetInline?: import("react-native").DimensionValue | undefined;
+        insetInlineEnd?: import("react-native").DimensionValue | undefined;
+        insetInlineStart?: import("react-native").DimensionValue | undefined;
         justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
         left?: import("react-native").DimensionValue | undefined;
         margin?: import("react-native").DimensionValue | undefined;
+        marginBlock?: import("react-native").DimensionValue | undefined;
+        marginBlockEnd?: import("react-native").DimensionValue | undefined;
+        marginBlockStart?: import("react-native").DimensionValue | undefined;
         marginBottom?: import("react-native").DimensionValue | undefined;
         marginEnd?: import("react-native").DimensionValue | undefined;
         marginHorizontal?: import("react-native").DimensionValue | undefined;
+        marginInline?: import("react-native").DimensionValue | undefined;
+        marginInlineEnd?: import("react-native").DimensionValue | undefined;
+        marginInlineStart?: import("react-native").DimensionValue | undefined;
         marginLeft?: import("react-native").DimensionValue | undefined;
         marginRight?: import("react-native").DimensionValue | undefined;
         marginStart?: import("react-native").DimensionValue | undefined;
@@ -182,8 +195,14 @@ export declare const styles: {
         overflow?: "visible" | "hidden" | "scroll" | undefined;
         padding?: import("react-native").DimensionValue | undefined;
         paddingBottom?: import("react-native").DimensionValue | undefined;
+        paddingBlock?: import("react-native").DimensionValue | undefined;
+        paddingBlockEnd?: import("react-native").DimensionValue | undefined;
+        paddingBlockStart?: import("react-native").DimensionValue | undefined;
         paddingEnd?: import("react-native").DimensionValue | undefined;
         paddingHorizontal?: import("react-native").DimensionValue | undefined;
+        paddingInline?: import("react-native").DimensionValue | undefined;
+        paddingInlineEnd?: import("react-native").DimensionValue | undefined;
+        paddingInlineStart?: import("react-native").DimensionValue | undefined;
         paddingLeft?: import("react-native").DimensionValue | undefined;
         paddingRight?: import("react-native").DimensionValue | undefined;
         paddingStart?: import("react-native").DimensionValue | undefined;
@@ -203,7 +222,7 @@ export declare const styles: {
         }> | undefined;
         shadowOpacity?: import("react-native").AnimatableNumericValue | undefined;
         shadowRadius?: number | undefined;
-        transform?: string | (import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform | import("react-native").MatrixTransform)[] | undefined;
+        transform?: (import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform | import("react-native").MatrixTransform)[] | undefined;
         transformMatrix?: number[] | undefined;
         rotation?: import("react-native").AnimatableNumericValue | undefined;
         scaleX?: import("react-native").AnimatableNumericValue | undefined;
@@ -266,12 +285,25 @@ export declare const styles: {
         flexShrink?: number | undefined;
         flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
         height?: import("react-native").DimensionValue | undefined;
+        inset?: import("react-native").DimensionValue | undefined;
+        insetBlock?: import("react-native").DimensionValue | undefined;
+        insetBlockEnd?: import("react-native").DimensionValue | undefined;
+        insetBlockStart?: import("react-native").DimensionValue | undefined;
+        insetInline?: import("react-native").DimensionValue | undefined;
+        insetInlineEnd?: import("react-native").DimensionValue | undefined;
+        insetInlineStart?: import("react-native").DimensionValue | undefined;
         justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
         left?: import("react-native").DimensionValue | undefined;
         margin?: import("react-native").DimensionValue | undefined;
+        marginBlock?: import("react-native").DimensionValue | undefined;
+        marginBlockEnd?: import("react-native").DimensionValue | undefined;
+        marginBlockStart?: import("react-native").DimensionValue | undefined;
         marginBottom?: import("react-native").DimensionValue | undefined;
         marginEnd?: import("react-native").DimensionValue | undefined;
         marginHorizontal?: import("react-native").DimensionValue | undefined;
+        marginInline?: import("react-native").DimensionValue | undefined;
+        marginInlineEnd?: import("react-native").DimensionValue | undefined;
+        marginInlineStart?: import("react-native").DimensionValue | undefined;
         marginLeft?: import("react-native").DimensionValue | undefined;
         marginRight?: import("react-native").DimensionValue | undefined;
         marginStart?: import("react-native").DimensionValue | undefined;
@@ -284,8 +316,14 @@ export declare const styles: {
         overflow?: "visible" | "hidden" | "scroll" | undefined;
         padding?: import("react-native").DimensionValue | undefined;
         paddingBottom?: import("react-native").DimensionValue | undefined;
+        paddingBlock?: import("react-native").DimensionValue | undefined;
+        paddingBlockEnd?: import("react-native").DimensionValue | undefined;
+        paddingBlockStart?: import("react-native").DimensionValue | undefined;
         paddingEnd?: import("react-native").DimensionValue | undefined;
         paddingHorizontal?: import("react-native").DimensionValue | undefined;
+        paddingInline?: import("react-native").DimensionValue | undefined;
+        paddingInlineEnd?: import("react-native").DimensionValue | undefined;
+        paddingInlineStart?: import("react-native").DimensionValue | undefined;
         paddingLeft?: import("react-native").DimensionValue | undefined;
         paddingRight?: import("react-native").DimensionValue | undefined;
         paddingStart?: import("react-native").DimensionValue | undefined;
@@ -305,7 +343,7 @@ export declare const styles: {
         }> | undefined;
         shadowOpacity?: import("react-native").AnimatableNumericValue | undefined;
         shadowRadius?: number | undefined;
-        transform?: string | (import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform | import("react-native").MatrixTransform)[] | undefined;
+        transform?: (import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform | import("react-native").MatrixTransform)[] | undefined;
         transformMatrix?: number[] | undefined;
         rotation?: import("react-native").AnimatableNumericValue | undefined;
         scaleX?: import("react-native").AnimatableNumericValue | undefined;

package/dist-native/components/secondaryComponents/SkeletonItem.d.ts

@@ -1,8 +1,8 @@
-import { ColorValue } from 'react-native';
+import { ColorValue, DimensionValue } from 'react-native';
 import React from 'react';
 interface SkeletonItemProps {
-    width: number;
-    height: number;
+    width: DimensionValue;
+    height: DimensionValue;
     color?: ColorValue;
     borderRadius?: number;
     delay?: number;

package/dist-native/components/secondaryComponents/SkeletonRowTable.d.ts

@@ -0,0 +1,11 @@
+import { DimensionValue } from 'react-native';
+import React from 'react';
+interface SkeletonRowTableProps {
+    width: DimensionValue;
+    color: string;
+    indexRow: number;
+    indexColumn: number;
+    widthSkeleton?: DimensionValue;
+}
+declare const SkeletonRowTable: React.FC<SkeletonRowTableProps>;
+export default SkeletonRowTable;

package/dist-native/components/secondaryComponents/SkeletonRowTable.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _reactNative=require("react-native");var _react=_interopRequireDefault(require("react"));var _SkeletonItem=_interopRequireDefault(require("./SkeletonItem"));var _table_utils=require("../../helpers/table_utils");var _this=this,_jsxFileName="/home/jenkins/workspace/etendo_ui_library_develop/src/components/secondaryComponents/SkeletonRowTable.tsx";var SkeletonRowTable=function SkeletonRowTable(_ref){var width=_ref.width,color=_ref.color,indexRow=_ref.indexRow,indexColumn=_ref.indexColumn,widthSkeleton=_ref.widthSkeleton;return _react.default.createElement(_reactNative.View,{style:{width:width,height:50,display:'flex',justifyContent:'center',alignItems:indexColumn==1?'flex-start':'center',paddingLeft:indexColumn==1?36:0},__self:_this,__source:{fileName:_jsxFileName,lineNumber:23,columnNumber:5}},_react.default.createElement(_SkeletonItem.default,{animationSpeed:900*((0,_table_utils.isOdd)(indexRow)?2:1.5),borderRadius:25,color:color,delay:10,height:25,width:widthSkeleton?widthSkeleton:indexColumn==1&&(0,_table_utils.isOdd)(indexRow)?'80%':'60%',__self:_this,__source:{fileName:_jsxFileName,lineNumber:32,columnNumber:7}}));};var _default=exports.default=SkeletonRowTable;

package/dist-native/components/secondaryComponents/index.d.ts

@@ -1,2 +1,3 @@
 import SkeletonItem from '../secondaryComponents/SkeletonItem';
-export { SkeletonItem };
+import SkeletonRowTable from '../secondaryComponents/SkeletonRowTable';
+export { SkeletonItem, SkeletonRowTable };

package/dist-native/components/secondaryComponents/index.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"SkeletonItem",{enumerable:true,get:function get(){return _SkeletonItem.default;}});var _SkeletonItem=_interopRequireDefault(require("../secondaryComponents/SkeletonItem"));
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"SkeletonItem",{enumerable:true,get:function get(){return _SkeletonItem.default;}});Object.defineProperty(exports,"SkeletonRowTable",{enumerable:true,get:function get(){return _SkeletonRowTable.default;}});var _SkeletonItem=_interopRequireDefault(require("../secondaryComponents/SkeletonItem"));var _SkeletonRowTable=_interopRequireDefault(require("../secondaryComponents/SkeletonRowTable"));

package/dist-native/components/table/Table.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { TableProps } from './Table.types';
-declare const Table: ({ data, columns, title, onRowPress, tableHeight, }: TableProps) => React.JSX.Element;
+declare const Table: ({ data, columns, title, onRowPress, tableHeight, isLoading, pageSize, textEmptyTable, commentEmptyTable, }: TableProps) => React.JSX.Element;
 export default Table;

package/dist-native/components/table/Table.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _Table=require("./Table.styles");var _TableHeaders=_interopRequireDefault(require("./components/TableHeaders"));var _table_utils=require("../../helpers/table_utils");var _TableCell=_interopRequireDefault(require("./components/TableCell"));var _this=this,_jsxFileName="/home/jenkins/workspace/etendo_ui_library_develop/src/components/table/Table.tsx";var Table=function Table(_ref){var data=_ref.data,columns=_ref.columns,title=_ref.title,onRowPress=_ref.onRowPress,tableHeight=_ref.tableHeight;var findPrimaryId=function findPrimaryId(col,indexRow){var primary='';if(indexRow>=0){for(var element of col){if(element.primary===true){if(element.key){primary=data[indexRow][element.key];break;}}}}return primary;};var _renderItem=function renderItem(item,index){return _react.default.createElement(_reactNative.Pressable,{onPress:function onPress(){onRowPress(findPrimaryId(columns,index));},style:[_Table.styles.row,(0,_table_utils.paintOddRows)(index)],__self:_this,__source:{fileName:_jsxFileName,lineNumber:32,columnNumber:7}},columns.map(function(col,colIndex){var _col$components;return col.visible&&_react.default.createElement(_reactNative.View,{style:[_Table.styles.cell,col.cellStyle,{width:col.width}],key:'movementTable'+colIndex,__self:_this,__source:{fileName:_jsxFileName,lineNumber:41,columnNumber:15}},col.components?(_col$components=col.components)==null?void 0:_col$components.map(function(itemAction,actionIndex){return _react.default.createElement(_reactNative.TouchableOpacity,{style:_Table.styles.cellEditContainer,onPress:function onPress(){return itemAction.onAction(findPrimaryId(columns,index));},key:'tableCellCustom'+actionIndex,__self:_this,__source:{fileName:_jsxFileName,lineNumber:49,columnNumber:25}},itemAction.component);}):_react.default.createElement(_TableCell.default,{label:col.key?item[col.key]:'',key:'tableCell'+index,__self:_this,__source:{fileName:_jsxFileName,lineNumber:62,columnNumber:19}}));}));};return _react.default.createElement(_reactNative.View,{style:[_Table.styles.container,(0,_table_utils.removeHeaderBorder)(title),{height:tableHeight}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:75,columnNumber:7}},_react.default.createElement(_TableHeaders.default,{title:title,columns:columns,__self:_this,__source:{fileName:_jsxFileName,lineNumber:82,columnNumber:9}}),_react.default.createElement(_reactNative.FlatList,{data:data,showsVerticalScrollIndicator:false,showsHorizontalScrollIndicator:false,renderItem:function renderItem(item){return _renderItem(item.item,item.index);},keyExtractor:function keyExtractor(item,index){return'Table: '+index;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:83,columnNumber:9}}));};var _default=exports.default=Table;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _Table=require("./Table.styles");var _TableHeaders=_interopRequireDefault(require("./components/TableHeaders"));var _TableCell=_interopRequireDefault(require("./components/TableCell"));var _table_utils=require("../../helpers/table_utils");var _secondaryComponents=require("../secondaryComponents");var _colors=require("../../styles/colors");var _this=this,_jsxFileName="/home/jenkins/workspace/etendo_ui_library_develop/src/components/table/Table.tsx";var Table=function Table(_ref){var data=_ref.data,columns=_ref.columns,title=_ref.title,onRowPress=_ref.onRowPress,tableHeight=_ref.tableHeight,isLoading=_ref.isLoading,pageSize=_ref.pageSize,textEmptyTable=_ref.textEmptyTable,commentEmptyTable=_ref.commentEmptyTable;var findPrimaryId=function findPrimaryId(col,indexRow){var primary='';if(indexRow>=0){for(var element of col){if(element.primary===true){if(element.key){primary=data[indexRow][element.key];break;}}}}return primary;};var RenderItem=function RenderItem(item,index){return _react.default.createElement(_reactNative.Pressable,{onPress:function onPress(){onRowPress(findPrimaryId(columns,index));},style:[_Table.styles.row,(0,_table_utils.paintOddRows)(index)],__self:_this,__source:{fileName:_jsxFileName,lineNumber:50,columnNumber:7}},columns.map(function(col,colIndex){var _col$components;return col.visible&&_react.default.createElement(_reactNative.View,{style:[_Table.styles.cell,col.cellStyle,{width:col.width}],key:'movementTable'+colIndex,__self:_this,__source:{fileName:_jsxFileName,lineNumber:58,columnNumber:15}},col.components?(_col$components=col.components)==null?void 0:_col$components.map(function(itemAction,actionIndex){return _react.default.createElement(_reactNative.TouchableOpacity,{style:_Table.styles.cellEditContainer,onPress:function onPress(){return itemAction.onAction(findPrimaryId(columns,index));},key:'tableCellCustom'+actionIndex,__self:_this,__source:{fileName:_jsxFileName,lineNumber:65,columnNumber:25}},itemAction.component);}):_react.default.createElement(_TableCell.default,{label:col.key?item[col.key]:'',key:'tableCell'+index,__self:_this,__source:{fileName:_jsxFileName,lineNumber:77,columnNumber:19}}));}));};var RenderSkeleton=function RenderSkeleton(item,index){return _react.default.createElement(_reactNative.Pressable,{onPress:function onPress(){onRowPress(findPrimaryId(columns,index));},style:[_Table.styles.row,(0,_table_utils.paintOddRows)(index)],__self:_this,__source:{fileName:_jsxFileName,lineNumber:92,columnNumber:7}},columns.map(function(col,colIndex){return col.visible&&_react.default.createElement(_secondaryComponents.SkeletonRowTable,{key:colIndex,width:col.width,color:_colors.NEUTRAL_300,indexRow:index,indexColumn:colIndex,__self:_this,__source:{fileName:_jsxFileName,lineNumber:100,columnNumber:15}});}));};var EmptyState=function EmptyState(){return _react.default.createElement(_reactNative.View,{style:_Table.styles.emptyStateConteiner,__self:_this,__source:{fileName:_jsxFileName,lineNumber:116,columnNumber:7}},_react.default.createElement(_reactNative.Image,{style:_table_utils.isDeviceTablet?{width:'50%',height:'70%'}:{width:'100%',height:'50%'},source:require('./empty-state-table.png'),resizeMode:"stretch",__self:_this,__source:{fileName:_jsxFileName,lineNumber:117,columnNumber:9}}),_react.default.createElement(_reactNative.Text,{style:_Table.styles.emptyTextTitle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:126,columnNumber:9}},textEmptyTable),_react.default.createElement(_reactNative.Text,{style:_Table.styles.emptyTextSubtitle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:127,columnNumber:9}},commentEmptyTable));};return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_reactNative.View,{style:[_Table.styles.container,(0,_table_utils.removeHeaderBorder)(title),{height:tableHeight}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:134,columnNumber:7}},_react.default.createElement(_TableHeaders.default,{title:title,columns:columns,isLoading:!isLoading,__self:_this,__source:{fileName:_jsxFileName,lineNumber:140,columnNumber:9}}),_react.default.createElement(_reactNative.FlatList,{data:!isLoading?data:Array(pageSize).fill({}),showsVerticalScrollIndicator:false,showsHorizontalScrollIndicator:false,renderItem:function renderItem(item){return isLoading?RenderSkeleton(item.item,item.index):RenderItem(item.item,item.index);},ListEmptyComponent:EmptyState,keyExtractor:function keyExtractor(_item,index){return'Table: '+index;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:142,columnNumber:9}})));};var _default=exports.default=Table;

package/dist-native/components/table/Table.styles.d.ts

@@ -91,4 +91,26 @@ export declare const styles: {
     cellEditContainer: {
         height: "100%";
     };
+    emptyStateConteiner: {
+        display: "flex";
+        justifyContent: "center";
+        alignItems: "center";
+        backgroundColor: string;
+        height: number;
+        width: "100%";
+    };
+    emptyTextTitle: {
+        color: string;
+        textAlign: "center";
+        fontSize: number;
+        fontWeight: "500";
+        lineHeight: number;
+    };
+    emptyTextSubtitle: {
+        color: string;
+        textAlign: "center";
+        fontSize: number;
+        fontWeight: "600";
+        lineHeight: number;
+    };
 };

package/dist-native/components/table/Table.styles.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.styles=void 0;var _reactNative=require("react-native");var _colors=require("../../styles/colors");var styles=exports.styles=_reactNative.StyleSheet.create({container:{width:'100%',borderWidth:1,borderColor:_colors.NEUTRAL_10,borderTopLeftRadius:10,borderTopRightRadius:10,borderRightWidth:0},titleContainer:{backgroundColor:_colors.TERTIARY_30,borderColor:_colors.NEUTRAL_10,borderTopLeftRadius:10,borderTopRightRadius:10},titleText:{fontSize:14,color:_colors.PRIMARY_100,textAlign:'center',paddingVertical:10,fontWeight:'600'},headerContainer:{backgroundColor:_colors.TERTIARY_30,flexDirection:'row'},headerCell:{borderTopWidth:1,borderRightWidth:1,borderColor:_colors.NEUTRAL_10,alignItems:'center',justifyContent:'center',paddingHorizontal:5,paddingVertical:10},cell:{justifyContent:'center',paddingHorizontal:5,borderRightWidth:1,borderTopWidth:1,borderColor:_colors.NEUTRAL_10},cellText:{fontSize:14,color:_colors.PRIMARY_100,textAlign:'center',verticalAlign:'middle',paddingVertical:22.5},cellTextEdit:{fontSize:14,fontWeight:'400',color:_colors.PRIMARY_100,textAlign:'center',verticalAlign:'middle'},cellTextTitle:{fontSize:14,color:_colors.PRIMARY_100,textAlign:'center',paddingVertical:10,fontWeight:'600'},scrollCell:{flexGrow:1,alignItems:'center',justifyContent:'center'},centerItem:{alignItems:'center',justifyContent:'center',flexDirection:'row',height:'100%',paddingVertical:5},row:{flexDirection:'row'},placeholderContainer:{borderWidth:1,borderTopWidth:0,borderColor:_colors.NEUTRAL_40,alignItems:'center',justifyContent:'center'},imgEdit:{height:13,width:13,marginRight:5},cellEditContainer:{height:'100%'}});
+Object.defineProperty(exports,"__esModule",{value:true});exports.styles=void 0;var _reactNative=require("react-native");var _colors=require("../../styles/colors");var styles=exports.styles=_reactNative.StyleSheet.create({container:{width:'100%',borderWidth:1,borderColor:_colors.NEUTRAL_10,borderTopLeftRadius:10,borderTopRightRadius:10,borderRightWidth:0},titleContainer:{backgroundColor:_colors.TERTIARY_30,borderColor:_colors.NEUTRAL_10,borderTopLeftRadius:10,borderTopRightRadius:10},titleText:{fontSize:14,color:_colors.PRIMARY_100,textAlign:'center',paddingVertical:10,fontWeight:'600'},headerContainer:{backgroundColor:_colors.TERTIARY_30,flexDirection:'row'},headerCell:{borderTopWidth:1,borderRightWidth:1,borderColor:_colors.NEUTRAL_10,alignItems:'center',justifyContent:'center',paddingHorizontal:5,paddingVertical:10},cell:{justifyContent:'center',paddingHorizontal:5,borderRightWidth:1,borderTopWidth:1,borderColor:_colors.NEUTRAL_10},cellText:{fontSize:14,color:_colors.PRIMARY_100,textAlign:'center',verticalAlign:'middle',paddingVertical:22.5},cellTextEdit:{fontSize:14,fontWeight:'400',color:_colors.PRIMARY_100,textAlign:'center',verticalAlign:'middle'},cellTextTitle:{fontSize:14,color:_colors.PRIMARY_100,textAlign:'center',paddingVertical:10,fontWeight:'600'},scrollCell:{flexGrow:1,alignItems:'center',justifyContent:'center'},centerItem:{alignItems:'center',justifyContent:'center',flexDirection:'row',height:'100%',paddingVertical:5},row:{flexDirection:'row'},placeholderContainer:{borderWidth:1,borderTopWidth:0,borderColor:_colors.NEUTRAL_40,alignItems:'center',justifyContent:'center'},imgEdit:{height:13,width:13,marginRight:5},cellEditContainer:{height:'100%'},emptyStateConteiner:{display:'flex',justifyContent:'center',alignItems:'center',backgroundColor:'#FAFAFA',height:400,width:'100%'},emptyTextTitle:{color:_colors.NEUTRAL_700,textAlign:'center',fontSize:20,fontWeight:'500',lineHeight:28},emptyTextSubtitle:{color:_colors.PRIMARY_100,textAlign:'center',fontSize:14,fontWeight:'600',lineHeight:28}});

package/dist-native/components/table/Table.types.d.ts

@@ -4,8 +4,13 @@ export interface TableProps {
     data: Array<any>;
     columns: Columns[];
     title?: string;
-    tableHeight?: DimensionValue;
+    tableHeight?: DimensionValue | undefined;
     onRowPress: (primary: string) => void;
+    isLoading?: boolean;
+    textEmptyTable?: string;
+    commentEmptyTable?: string;
+    pageSize: number;
+    currentPage: number;
 }
 export interface TableCellProps {
     label?: string;
@@ -13,13 +18,14 @@ export interface TableCellProps {
 export interface TableHeaderProps {
     title?: string;
     columns: Columns[];
+    isLoading?: boolean;
 }
 export type Columns = {
     primary?: boolean;
     visible?: boolean;
     label?: string;
     key?: string;
-    width?: DimensionValue;
+    width?: DimensionValue | undefined;
     components?: Actions[];
     cellStyle?: ViewStyle;
 };

package/dist-native/components/table/components/TableHeaders.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { TableHeaderProps } from '../Table.types';
-declare const TableHeaders: ({ title, columns }: TableHeaderProps) => React.JSX.Element;
+declare const TableHeaders: ({ title, columns, isLoading }: TableHeaderProps) => React.JSX.Element;
 export default TableHeaders;

package/dist-native/components/table/components/TableHeaders.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _Table=require("../Table.styles");var _this=this,_jsxFileName="/home/jenkins/workspace/etendo_ui_library_develop/src/components/table/components/TableHeaders.tsx";var TableHeaders=function TableHeaders(_ref){var title=_ref.title,columns=_ref.columns;return _react.default.createElement(_react.default.Fragment,null,title&&_react.default.createElement(_reactNative.View,{style:_Table.styles.titleContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:10,columnNumber:9}},_react.default.createElement(_reactNative.Text,{numberOfLines:1,ellipsizeMode:"tail",style:_Table.styles.titleText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:11,columnNumber:11}},title)),_react.default.createElement(_reactNative.View,{style:_Table.styles.headerContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:16,columnNumber:7}},columns.map(function(item,colIndex){return item.visible&&_react.default.createElement(_reactNative.View,{style:[_Table.styles.headerCell,{width:item.width}],key:'HeaderTable'+colIndex,__self:_this,__source:{fileName:_jsxFileName,lineNumber:20,columnNumber:15}},_react.default.createElement(_reactNative.Text,{numberOfLines:2,ellipsizeMode:"tail",style:[_Table.styles.cellTextTitle],__self:_this,__source:{fileName:_jsxFileName,lineNumber:24,columnNumber:17}},item.label));})));};var _default=exports.default=TableHeaders;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _Table=require("../Table.styles");var _secondaryComponents=require("../../secondaryComponents");var _colors=require("../../../styles/colors");var _this=this,_jsxFileName="/home/jenkins/workspace/etendo_ui_library_develop/src/components/table/components/TableHeaders.tsx";var TableHeaders=function TableHeaders(_ref){var title=_ref.title,columns=_ref.columns,isLoading=_ref.isLoading;return _react.default.createElement(_react.default.Fragment,null,title&&_react.default.createElement(_reactNative.View,{style:_Table.styles.titleContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:12,columnNumber:9}},_react.default.createElement(_reactNative.Text,{numberOfLines:1,ellipsizeMode:"tail",style:_Table.styles.titleText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:13,columnNumber:11}},title)),_react.default.createElement(_reactNative.View,{style:_Table.styles.headerContainer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:18,columnNumber:7}},columns.map(function(item,colIndex){return isLoading?item.visible&&_react.default.createElement(_reactNative.View,{style:[_Table.styles.headerCell,{width:item.width}],key:'HeaderTable'+colIndex,__self:_this,__source:{fileName:_jsxFileName,lineNumber:22,columnNumber:15}},_react.default.createElement(_reactNative.Text,{numberOfLines:2,ellipsizeMode:"tail",style:[_Table.styles.cellTextTitle],__self:_this,__source:{fileName:_jsxFileName,lineNumber:25,columnNumber:17}},item.label)):_react.default.createElement(_secondaryComponents.SkeletonRowTable,{key:item.label+"-"+colIndex,width:item.width,color:_colors.TERTIARY_80,indexRow:colIndex,indexColumn:colIndex,widthSkeleton:'40%',__self:_this,__source:{fileName:_jsxFileName,lineNumber:34,columnNumber:13}});})));};var _default=exports.default=TableHeaders;

package/dist-native/helpers/table_utils.d.ts

@@ -4,6 +4,7 @@ export declare const removeHeaderBorder: (header?: string) => false | {
     borderTopLeftRadius: number;
     borderTopRightRadius: number;
 };
+export declare const isOdd: (index: number) => boolean;
 export declare const paintOddRows: (index: number) => {
     backgroundColor: string;
 };

package/dist-native/helpers/table_utils.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.removeHeaderBorder=exports.paintOddRows=exports.isTablet=exports.isDeviceTablet=exports.disableOutline=void 0;var _colors=require("../styles/colors");var _reactNative=require("react-native");var width=_reactNative.Dimensions.get('screen').width;var height=_reactNative.Dimensions.get('screen').height;var isWeb=_reactNative.Platform.OS==='web';var removeHeaderBorder=exports.removeHeaderBorder=function removeHeaderBorder(header){return!header&&{borderTopWidth:0,borderTopLeftRadius:0,borderTopRightRadius:0};};var paintOddRows=exports.paintOddRows=function paintOddRows(index){return index%2!==0?{backgroundColor:_colors.TERTIARY_30}:{backgroundColor:_colors.NEUTRAL_0};};var isTablet=exports.isTablet=function isTablet(){var pixelDensity=_reactNative.PixelRatio.get();var adjustedWidth=width*pixelDensity;var adjustedHeight=height*pixelDensity;if(pixelDensity<1.75&&(adjustedWidth>=1000||adjustedHeight>=1000)){return true;}else return pixelDensity===2&&(adjustedWidth>=1920||adjustedHeight>=1920);};var isDeviceTablet=exports.isDeviceTablet=isTablet();var disableOutline=exports.disableOutline=function disableOutline(){if(isWeb){return{outline:'none'};}};
+Object.defineProperty(exports,"__esModule",{value:true});exports.removeHeaderBorder=exports.paintOddRows=exports.isTablet=exports.isOdd=exports.isDeviceTablet=exports.disableOutline=void 0;var _colors=require("../styles/colors");var _reactNative=require("react-native");var width=_reactNative.Dimensions.get('screen').width;var height=_reactNative.Dimensions.get('screen').height;var isWeb=_reactNative.Platform.OS==='web';var removeHeaderBorder=exports.removeHeaderBorder=function removeHeaderBorder(header){return!header&&{borderTopWidth:0,borderTopLeftRadius:0,borderTopRightRadius:0};};var isOdd=exports.isOdd=function isOdd(index){return index%2!==0;};var paintOddRows=exports.paintOddRows=function paintOddRows(index){return isOdd(index)?{backgroundColor:_colors.QUATERNARY_10}:{backgroundColor:_colors.NEUTRAL_0};};var isTablet=exports.isTablet=function isTablet(){var pixelDensity=_reactNative.PixelRatio.get();var adjustedWidth=width*pixelDensity;var adjustedHeight=height*pixelDensity;if(pixelDensity<1.75&&(adjustedWidth>=1000||adjustedHeight>=1000)){return true;}else return pixelDensity===2&&(adjustedWidth>=1920||adjustedHeight>=1920);};var isDeviceTablet=exports.isDeviceTablet=isTablet();var disableOutline=exports.disableOutline=function disableOutline(){if(isWeb){return{outline:'none'};}};

package/dist-web/components/button/Button.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ButtonProps } from './Button.types';
-declare const Button: ({ text, onPress, fontSize, typeStyle, disabled, width, height, iconLeft, iconRight, paddingHorizontal, paddingVertical, loading, sizeLoadingIndicator, }: ButtonProps) => React.JSX.Element;
+declare const Button: ({ text, onPress, fontSize, typeStyle, disabled, width, height, iconLeft, iconRight, paddingHorizontal, paddingVertical, loading, }: ButtonProps) => React.JSX.Element;
 export default Button;

package/dist-web/components/button/Button.js

@@ -31,9 +31,7 @@ var Button = function Button(_ref) {
     _ref$paddingVertical = _ref.paddingVertical,
     paddingVertical = _ref$paddingVertical === void 0 ? 12 : _ref$paddingVertical,
     _ref$loading = _ref.loading,
-    loading = _ref$loading === void 0 ? false : _ref$loading,
-    _ref$sizeLoadingIndic = _ref.sizeLoadingIndicator,
-    sizeLoadingIndicator = _ref$sizeLoadingIndic === void 0 ? 16 : _ref$sizeLoadingIndic;
+    loading = _ref$loading === void 0 ? false : _ref$loading;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isHovered = _useState2[0],
@@ -131,7 +129,7 @@ var Button = function Button(_ref) {
       var _iconComponent$props4;
       return iconComponent === null || iconComponent === void 0 || (_iconComponent$props4 = iconComponent.props) === null || _iconComponent$props4 === void 0 || (_iconComponent$props4 = _iconComponent$props4.style) === null || _iconComponent$props4 === void 0 ? void 0 : _iconComponent$props4.width;
     }
-    return sizeLoadingIndicator;
+    return 16;
   };
   var renderIcon = function renderIcon(icon) {
     var _icon$props, _icon$props2;
@@ -184,7 +182,7 @@ var Button = function Button(_ref) {
   }, renderIcon(iconLeft, {
     marginRight: iconLeft && text ? 8 : 0
   }), loading && !iconLeft && !iconRight && /*#__PURE__*/React.createElement(ActivityIndicator, {
-    size: sizeLoadingIndicator,
+    size: fontSize,
     color: stateStyleIcon(),
     style: styles.indicatorCenterStyle
   }), /*#__PURE__*/React.createElement(Text, {

package/dist-web/components/button/Button.types.d.ts

@@ -26,5 +26,4 @@ export interface ButtonProps {
     paddingHorizontal?: DimensionValue;
     paddingVertical?: DimensionValue;
     loading?: boolean;
-    sizeLoadingIndicator?: number | 'small' | 'large';
 }

package/dist-web/components/input/Input.style.d.ts

@@ -164,12 +164,25 @@ export declare const styles: {
         flexShrink?: number | undefined;
         flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
         height?: import("react-native").DimensionValue | undefined;
+        inset?: import("react-native").DimensionValue | undefined;
+        insetBlock?: import("react-native").DimensionValue | undefined;
+        insetBlockEnd?: import("react-native").DimensionValue | undefined;
+        insetBlockStart?: import("react-native").DimensionValue | undefined;
+        insetInline?: import("react-native").DimensionValue | undefined;
+        insetInlineEnd?: import("react-native").DimensionValue | undefined;
+        insetInlineStart?: import("react-native").DimensionValue | undefined;
         justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
         left?: import("react-native").DimensionValue | undefined;
         margin?: import("react-native").DimensionValue | undefined;
+        marginBlock?: import("react-native").DimensionValue | undefined;
+        marginBlockEnd?: import("react-native").DimensionValue | undefined;
+        marginBlockStart?: import("react-native").DimensionValue | undefined;
         marginBottom?: import("react-native").DimensionValue | undefined;
         marginEnd?: import("react-native").DimensionValue | undefined;
         marginHorizontal?: import("react-native").DimensionValue | undefined;
+        marginInline?: import("react-native").DimensionValue | undefined;
+        marginInlineEnd?: import("react-native").DimensionValue | undefined;
+        marginInlineStart?: import("react-native").DimensionValue | undefined;
         marginLeft?: import("react-native").DimensionValue | undefined;
         marginRight?: import("react-native").DimensionValue | undefined;
         marginStart?: import("react-native").DimensionValue | undefined;
@@ -182,8 +195,14 @@ export declare const styles: {
         overflow?: "visible" | "hidden" | "scroll" | undefined;
         padding?: import("react-native").DimensionValue | undefined;
         paddingBottom?: import("react-native").DimensionValue | undefined;
+        paddingBlock?: import("react-native").DimensionValue | undefined;
+        paddingBlockEnd?: import("react-native").DimensionValue | undefined;
+        paddingBlockStart?: import("react-native").DimensionValue | undefined;
         paddingEnd?: import("react-native").DimensionValue | undefined;
         paddingHorizontal?: import("react-native").DimensionValue | undefined;
+        paddingInline?: import("react-native").DimensionValue | undefined;
+        paddingInlineEnd?: import("react-native").DimensionValue | undefined;
+        paddingInlineStart?: import("react-native").DimensionValue | undefined;
         paddingLeft?: import("react-native").DimensionValue | undefined;
         paddingRight?: import("react-native").DimensionValue | undefined;
         paddingStart?: import("react-native").DimensionValue | undefined;
@@ -203,7 +222,7 @@ export declare const styles: {
         }> | undefined;
         shadowOpacity?: import("react-native").AnimatableNumericValue | undefined;
         shadowRadius?: number | undefined;
-        transform?: string | (import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform | import("react-native").MatrixTransform)[] | undefined;
+        transform?: (import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform | import("react-native").MatrixTransform)[] | undefined;
         transformMatrix?: number[] | undefined;
         rotation?: import("react-native").AnimatableNumericValue | undefined;
         scaleX?: import("react-native").AnimatableNumericValue | undefined;
@@ -266,12 +285,25 @@ export declare const styles: {
         flexShrink?: number | undefined;
         flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
         height?: import("react-native").DimensionValue | undefined;
+        inset?: import("react-native").DimensionValue | undefined;
+        insetBlock?: import("react-native").DimensionValue | undefined;
+        insetBlockEnd?: import("react-native").DimensionValue | undefined;
+        insetBlockStart?: import("react-native").DimensionValue | undefined;
+        insetInline?: import("react-native").DimensionValue | undefined;
+        insetInlineEnd?: import("react-native").DimensionValue | undefined;
+        insetInlineStart?: import("react-native").DimensionValue | undefined;
         justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
         left?: import("react-native").DimensionValue | undefined;
         margin?: import("react-native").DimensionValue | undefined;
+        marginBlock?: import("react-native").DimensionValue | undefined;
+        marginBlockEnd?: import("react-native").DimensionValue | undefined;
+        marginBlockStart?: import("react-native").DimensionValue | undefined;
         marginBottom?: import("react-native").DimensionValue | undefined;
         marginEnd?: import("react-native").DimensionValue | undefined;
         marginHorizontal?: import("react-native").DimensionValue | undefined;
+        marginInline?: import("react-native").DimensionValue | undefined;
+        marginInlineEnd?: import("react-native").DimensionValue | undefined;
+        marginInlineStart?: import("react-native").DimensionValue | undefined;
         marginLeft?: import("react-native").DimensionValue | undefined;
         marginRight?: import("react-native").DimensionValue | undefined;
         marginStart?: import("react-native").DimensionValue | undefined;
@@ -284,8 +316,14 @@ export declare const styles: {
         overflow?: "visible" | "hidden" | "scroll" | undefined;
         padding?: import("react-native").DimensionValue | undefined;
         paddingBottom?: import("react-native").DimensionValue | undefined;
+        paddingBlock?: import("react-native").DimensionValue | undefined;
+        paddingBlockEnd?: import("react-native").DimensionValue | undefined;
+        paddingBlockStart?: import("react-native").DimensionValue | undefined;
         paddingEnd?: import("react-native").DimensionValue | undefined;
         paddingHorizontal?: import("react-native").DimensionValue | undefined;
+        paddingInline?: import("react-native").DimensionValue | undefined;
+        paddingInlineEnd?: import("react-native").DimensionValue | undefined;
+        paddingInlineStart?: import("react-native").DimensionValue | undefined;
         paddingLeft?: import("react-native").DimensionValue | undefined;
         paddingRight?: import("react-native").DimensionValue | undefined;
         paddingStart?: import("react-native").DimensionValue | undefined;
@@ -305,7 +343,7 @@ export declare const styles: {
         }> | undefined;
         shadowOpacity?: import("react-native").AnimatableNumericValue | undefined;
         shadowRadius?: number | undefined;
-        transform?: string | (import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform | import("react-native").MatrixTransform)[] | undefined;
+        transform?: (import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform | import("react-native").MatrixTransform)[] | undefined;
         transformMatrix?: number[] | undefined;
         rotation?: import("react-native").AnimatableNumericValue | undefined;
         scaleX?: import("react-native").AnimatableNumericValue | undefined;

package/dist-web/components/secondaryComponents/SkeletonItem.d.ts

@@ -1,8 +1,8 @@
-import { ColorValue } from 'react-native';
+import { ColorValue, DimensionValue } from 'react-native';
 import React from 'react';
 interface SkeletonItemProps {
-    width: number;
-    height: number;
+    width: DimensionValue;
+    height: DimensionValue;
     color?: ColorValue;
     borderRadius?: number;
     delay?: number;

package/dist-web/components/secondaryComponents/SkeletonRowTable.d.ts

@@ -0,0 +1,11 @@
+import { DimensionValue } from 'react-native';
+import React from 'react';
+interface SkeletonRowTableProps {
+    width: DimensionValue;
+    color: string;
+    indexRow: number;
+    indexColumn: number;
+    widthSkeleton?: DimensionValue;
+}
+declare const SkeletonRowTable: React.FC<SkeletonRowTableProps>;
+export default SkeletonRowTable;

package/dist-web/components/secondaryComponents/SkeletonRowTable.js

@@ -0,0 +1,29 @@
+import { View } from "react-native-web";
+import React from 'react';
+import SkeletonItem from "./SkeletonItem";
+import { isOdd } from "../../helpers/table_utils";
+var SkeletonRowTable = function SkeletonRowTable(_ref) {
+  var width = _ref.width,
+    color = _ref.color,
+    indexRow = _ref.indexRow,
+    indexColumn = _ref.indexColumn,
+    widthSkeleton = _ref.widthSkeleton;
+  return /*#__PURE__*/React.createElement(View, {
+    style: {
+      width: width,
+      height: 50,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: indexColumn == 1 ? 'flex-start' : 'center',
+      paddingLeft: indexColumn == 1 ? 36 : 0
+    }
+  }, /*#__PURE__*/React.createElement(SkeletonItem, {
+    animationSpeed: 900 * (isOdd(indexRow) ? 2 : 1.5),
+    borderRadius: 25,
+    color: color,
+    delay: 10,
+    height: 25,
+    width: widthSkeleton ? widthSkeleton : indexColumn == 1 && isOdd(indexRow) ? '80%' : '60%'
+  }));
+};
+export default SkeletonRowTable;

package/dist-web/components/secondaryComponents/index.d.ts

@@ -1,2 +1,3 @@
 import SkeletonItem from '../secondaryComponents/SkeletonItem';
-export { SkeletonItem };
+import SkeletonRowTable from '../secondaryComponents/SkeletonRowTable';
+export { SkeletonItem, SkeletonRowTable };

package/dist-web/components/secondaryComponents/index.js

@@ -1,2 +1,3 @@
 import SkeletonItem from "../secondaryComponents/SkeletonItem";
-export { SkeletonItem };
+import SkeletonRowTable from "../secondaryComponents/SkeletonRowTable";
+export { SkeletonItem, SkeletonRowTable };

package/dist-web/components/table/Table.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { TableProps } from './Table.types';
-declare const Table: ({ data, columns, title, onRowPress, tableHeight, }: TableProps) => React.JSX.Element;
+declare const Table: ({ data, columns, title, onRowPress, tableHeight, isLoading, pageSize, textEmptyTable, commentEmptyTable, }: TableProps) => React.JSX.Element;
 export default Table;

package/dist-web/components/table/Table.js

@@ -2,17 +2,23 @@ function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import React from 'react';
-import { FlatList, Pressable, TouchableOpacity, View } from "react-native-web";
+import { FlatList, Image, Pressable, Text, TouchableOpacity, View } from "react-native-web";
 import { styles } from "./Table.styles";
 import TableHeaders from "./components/TableHeaders";
-import { paintOddRows, removeHeaderBorder } from "../../helpers/table_utils";
 import TableCell from "./components/TableCell";
+import { isDeviceTablet, paintOddRows, removeHeaderBorder } from "../../helpers/table_utils";
+import { SkeletonRowTable } from "../secondaryComponents";
+import { NEUTRAL_300 } from "../../styles/colors";
 var Table = function Table(_ref) {
   var data = _ref.data,
     columns = _ref.columns,
     title = _ref.title,
     onRowPress = _ref.onRowPress,
-    tableHeight = _ref.tableHeight;
+    tableHeight = _ref.tableHeight,
+    isLoading = _ref.isLoading,
+    pageSize = _ref.pageSize,
+    textEmptyTable = _ref.textEmptyTable,
+    commentEmptyTable = _ref.commentEmptyTable;
   var findPrimaryId = function findPrimaryId(col, indexRow) {
     var primary = '';
     if (indexRow >= 0) {
@@ -36,7 +42,7 @@ var Table = function Table(_ref) {
     }
     return primary;
   };
-  var _renderItem = function renderItem(item, index) {
+  var RenderItem = function RenderItem(item, index) {
     return /*#__PURE__*/React.createElement(Pressable, {
       onPress: function onPress() {
         onRowPress(findPrimaryId(columns, index));
@@ -63,23 +69,60 @@ var Table = function Table(_ref) {
       }));
     }));
   };
-  return /*#__PURE__*/React.createElement(View, {
+  var RenderSkeleton = function RenderSkeleton(item, index) {
+    return /*#__PURE__*/React.createElement(Pressable, {
+      onPress: function onPress() {
+        onRowPress(findPrimaryId(columns, index));
+      },
+      style: [styles.row, paintOddRows(index)]
+    }, columns.map(function (col, colIndex) {
+      return col.visible && /*#__PURE__*/React.createElement(SkeletonRowTable, {
+        key: colIndex,
+        width: col.width,
+        color: NEUTRAL_300,
+        indexRow: index,
+        indexColumn: colIndex
+      });
+    }));
+  };
+  var EmptyState = function EmptyState() {
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.emptyStateConteiner
+    }, /*#__PURE__*/React.createElement(Image, {
+      style: isDeviceTablet ? {
+        width: '50%',
+        height: '70%'
+      } : {
+        width: '100%',
+        height: '50%'
+      },
+      source: require("./empty-state-table.png"),
+      resizeMode: "stretch"
+    }), /*#__PURE__*/React.createElement(Text, {
+      style: styles.emptyTextTitle
+    }, textEmptyTable), /*#__PURE__*/React.createElement(Text, {
+      style: styles.emptyTextSubtitle
+    }, commentEmptyTable));
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
     style: [styles.container, removeHeaderBorder(title), {
       height: tableHeight
     }]
   }, /*#__PURE__*/React.createElement(TableHeaders, {
     title: title,
-    columns: columns
+    columns: columns,
+    isLoading: !isLoading
   }), /*#__PURE__*/React.createElement(FlatList, {
-    data: data,
+    data: !isLoading ? data : Array(pageSize).fill({}),
     showsVerticalScrollIndicator: false,
     showsHorizontalScrollIndicator: false,
     renderItem: function renderItem(item) {
-      return _renderItem(item.item, item.index);
+      return isLoading ? RenderSkeleton(item.item, item.index) : RenderItem(item.item, item.index);
     },
-    keyExtractor: function keyExtractor(item, index) {
+    ListEmptyComponent: EmptyState,
+    keyExtractor: function keyExtractor(_item, index) {
       return 'Table: ' + index;
     }
-  }));
+  })));
 };
 export default Table;

package/dist-web/components/table/Table.styles.d.ts

@@ -91,4 +91,26 @@ export declare const styles: {
     cellEditContainer: {
         height: "100%";
     };
+    emptyStateConteiner: {
+        display: "flex";
+        justifyContent: "center";
+        alignItems: "center";
+        backgroundColor: string;
+        height: number;
+        width: "100%";
+    };
+    emptyTextTitle: {
+        color: string;
+        textAlign: "center";
+        fontSize: number;
+        fontWeight: "500";
+        lineHeight: number;
+    };
+    emptyTextSubtitle: {
+        color: string;
+        textAlign: "center";
+        fontSize: number;
+        fontWeight: "600";
+        lineHeight: number;
+    };
 };

package/dist-web/components/table/Table.styles.js

@@ -1,5 +1,5 @@
 import { StyleSheet } from "react-native-web";
-import { NEUTRAL_10, NEUTRAL_40, PRIMARY_100, TERTIARY_30 } from "../../styles/colors";
+import { NEUTRAL_10, NEUTRAL_40, NEUTRAL_700, PRIMARY_100, TERTIARY_30 } from "../../styles/colors";
 export var styles = StyleSheet.create({
   container: {
     width: '100%',
@@ -92,5 +92,27 @@ export var styles = StyleSheet.create({
   },
   cellEditContainer: {
     height: '100%'
+  },
+  emptyStateConteiner: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#FAFAFA',
+    height: 400,
+    width: '100%'
+  },
+  emptyTextTitle: {
+    color: NEUTRAL_700,
+    textAlign: 'center',
+    fontSize: 20,
+    fontWeight: '500',
+    lineHeight: 28
+  },
+  emptyTextSubtitle: {
+    color: PRIMARY_100,
+    textAlign: 'center',
+    fontSize: 14,
+    fontWeight: '600',
+    lineHeight: 28
   }
 });

package/dist-web/components/table/Table.types.d.ts

@@ -4,8 +4,13 @@ export interface TableProps {
     data: Array<any>;
     columns: Columns[];
     title?: string;
-    tableHeight?: DimensionValue;
+    tableHeight?: DimensionValue | undefined;
     onRowPress: (primary: string) => void;
+    isLoading?: boolean;
+    textEmptyTable?: string;
+    commentEmptyTable?: string;
+    pageSize: number;
+    currentPage: number;
 }
 export interface TableCellProps {
     label?: string;
@@ -13,13 +18,14 @@ export interface TableCellProps {
 export interface TableHeaderProps {
     title?: string;
     columns: Columns[];
+    isLoading?: boolean;
 }
 export type Columns = {
     primary?: boolean;
     visible?: boolean;
     label?: string;
     key?: string;
-    width?: DimensionValue;
+    width?: DimensionValue | undefined;
     components?: Actions[];
     cellStyle?: ViewStyle;
 };

package/dist-web/components/table/components/TableHeaders.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { TableHeaderProps } from '../Table.types';
-declare const TableHeaders: ({ title, columns }: TableHeaderProps) => React.JSX.Element;
+declare const TableHeaders: ({ title, columns, isLoading }: TableHeaderProps) => React.JSX.Element;
 export default TableHeaders;

package/dist-web/components/table/components/TableHeaders.js

@@ -1,9 +1,12 @@
 import React from 'react';
 import { Text, View } from "react-native-web";
 import { styles } from "../Table.styles";
+import { SkeletonRowTable } from "../../secondaryComponents";
+import { TERTIARY_80 } from "../../../styles/colors";
 var TableHeaders = function TableHeaders(_ref) {
   var title = _ref.title,
-    columns = _ref.columns;
+    columns = _ref.columns,
+    isLoading = _ref.isLoading;
   return /*#__PURE__*/React.createElement(React.Fragment, null, title && /*#__PURE__*/React.createElement(View, {
     style: styles.titleContainer
   }, /*#__PURE__*/React.createElement(Text, {
@@ -13,7 +16,7 @@ var TableHeaders = function TableHeaders(_ref) {
   }, title)), /*#__PURE__*/React.createElement(View, {
     style: styles.headerContainer
   }, columns.map(function (item, colIndex) {
-    return item.visible && /*#__PURE__*/React.createElement(View, {
+    return isLoading ? item.visible && /*#__PURE__*/React.createElement(View, {
       style: [styles.headerCell, {
         width: item.width
       }],
@@ -22,7 +25,14 @@ var TableHeaders = function TableHeaders(_ref) {
       numberOfLines: 2,
       ellipsizeMode: "tail",
       style: [styles.cellTextTitle]
-    }, item.label));
+    }, item.label)) : /*#__PURE__*/React.createElement(SkeletonRowTable, {
+      key: "".concat(item.label, "-").concat(colIndex),
+      width: item.width,
+      color: TERTIARY_80,
+      indexRow: colIndex,
+      indexColumn: colIndex,
+      widthSkeleton: '40%'
+    });
   })));
 };
 export default TableHeaders;

package/dist-web/helpers/table_utils.d.ts

@@ -4,6 +4,7 @@ export declare const removeHeaderBorder: (header?: string) => false | {
     borderTopLeftRadius: number;
     borderTopRightRadius: number;
 };
+export declare const isOdd: (index: number) => boolean;
 export declare const paintOddRows: (index: number) => {
     backgroundColor: string;
 };

package/dist-web/helpers/table_utils.js

@@ -1,4 +1,4 @@
-import { NEUTRAL_0, TERTIARY_30 } from "../styles/colors";
+import { NEUTRAL_0, QUATERNARY_10 } from "../styles/colors";
 import { Dimensions, PixelRatio, Platform } from "react-native-web";
 // getting screen width and height
 var width = Dimensions.get('screen').width;
@@ -11,9 +11,12 @@ export var removeHeaderBorder = function removeHeaderBorder(header) {
     borderTopRightRadius: 0
   };
 };
+export var isOdd = function isOdd(index) {
+  return index % 2 !== 0;
+};
 export var paintOddRows = function paintOddRows(index) {
-  return index % 2 !== 0 ? {
-    backgroundColor: TERTIARY_30
+  return isOdd(index) ? {
+    backgroundColor: QUATERNARY_10
   } : {
     backgroundColor: NEUTRAL_0
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etendo-ui-library",
-  "version": "1.2.55",
+  "version": "1.2.57",
   "private": false,
   "scripts": {
     "android": "react-native run-android",
@@ -63,7 +63,7 @@
     "prettier": "^2.8.8",
     "react": "18.2.0",
     "react-dom": "^18.2.0",
-    "react-native": "0.72.7",
+    "react-native": "0.70.6",
     "react-native-svg": "^13.9.0",
     "react-native-svg-transformer": "^1.0.0",
     "react-native-svg-web": "^1.0.9",

package/dist-native/components/states/componentsStates/ComponentsStatesScreen.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const ComponentsStatesScreen: () => React.JSX.Element;
-export default ComponentsStatesScreen;

package/dist-native/components/states/componentsStates/ComponentsStatesScreen.js

@@ -1 +0,0 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _reactNative=require("react-native");var _react=_interopRequireDefault(require("react"));var _table=require("../../table");var _TableComponentsStatesData=_interopRequireDefault(require("./TableComponentsStatesData.json"));var _ComponentsStatesScreen=require("./ComponentsStatesScreen.style");var _addMargin=_interopRequireDefault(require("../../../helpers/addMargin"));var _this=this,_jsxFileName="/home/jenkins/workspace/etendo_ui_library_develop/src/components/states/componentsStates/ComponentsStatesScreen.tsx";var ComponentsStatesScreen=function ComponentsStatesScreen(){return _react.default.createElement(_reactNative.View,{style:(0,_addMargin.default)(),__self:_this,__source:{fileName:_jsxFileName,lineNumber:10,columnNumber:5}},_react.default.createElement(_reactNative.Text,{style:_ComponentsStatesScreen.styles.title,__self:_this,__source:{fileName:_jsxFileName,lineNumber:11,columnNumber:7}},"Component state"),_react.default.createElement(_reactNative.Text,{style:_ComponentsStatesScreen.styles.description,__self:_this,__source:{fileName:_jsxFileName,lineNumber:12,columnNumber:7}},"Here you will find all our components and their states. They are updated automatically based on configuration of the component story."),_react.default.createElement(_reactNative.Text,{style:_ComponentsStatesScreen.styles.lenghtComponents,__self:_this,__source:{fileName:_jsxFileName,lineNumber:16,columnNumber:7}},"Number of components: ",_TableComponentsStatesData.default.length),_react.default.createElement(_table.Table,{data:_TableComponentsStatesData.default,columns:[{visible:true,key:'name',width:'33.3%',label:'Name'},{visible:true,key:'category',width:'33.3%',label:'Category'},{visible:true,key:'state',width:'33.3%',label:'State'}],onRowPress:function onRowPress(){},__self:_this,__source:{fileName:_jsxFileName,lineNumber:19,columnNumber:7}}));};var _default=exports.default=ComponentsStatesScreen;

package/dist-native/components/states/componentsStates/ComponentsStatesScreen.style.d.ts

@@ -1,17 +0,0 @@
-export declare const styles: {
-    title: {
-        fontSize: number;
-        fontWeight: "600";
-        marginBottom: number;
-        color: string;
-    };
-    description: {
-        marginBottom: number;
-        color: string;
-    };
-    lenghtComponents: {
-        fontWeight: "600";
-        color: string;
-        marginBottom: number;
-    };
-};

package/dist-native/components/states/componentsStates/ComponentsStatesScreen.style.js

@@ -1 +0,0 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.styles=void 0;var _reactNative=require("react-native");var _colors=require("../../../styles/colors");var styles=exports.styles=_reactNative.StyleSheet.create({title:{fontSize:30,fontWeight:'600',marginBottom:8,color:_colors.NEUTRAL_100},description:{marginBottom:20,color:_colors.NEUTRAL_100},lenghtComponents:{fontWeight:'600',color:_colors.NEUTRAL_100,marginBottom:20}});

package/dist-web/components/states/componentsStates/ComponentsStatesScreen.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const ComponentsStatesScreen: () => React.JSX.Element;
-export default ComponentsStatesScreen;

package/dist-web/components/states/componentsStates/ComponentsStatesScreen.js

@@ -1,37 +0,0 @@
-import { Text, View } from "react-native-web";
-import React from 'react';
-import { Table } from "../../table";
-import TableData from "./TableComponentsStatesData.json";
-import { styles } from "./ComponentsStatesScreen.style";
-import addMarginContainer from "../../../helpers/addMargin";
-var ComponentsStatesScreen = function ComponentsStatesScreen() {
-  return /*#__PURE__*/React.createElement(View, {
-    style: addMarginContainer()
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.title
-  }, "Component state"), /*#__PURE__*/React.createElement(Text, {
-    style: styles.description
-  }, "Here you will find all our components and their states. They are updated automatically based on configuration of the component story."), /*#__PURE__*/React.createElement(Text, {
-    style: styles.lenghtComponents
-  }, "Number of components: ", TableData.length), /*#__PURE__*/React.createElement(Table, {
-    data: TableData,
-    columns: [{
-      visible: true,
-      key: 'name',
-      width: '33.3%',
-      label: 'Name'
-    }, {
-      visible: true,
-      key: 'category',
-      width: '33.3%',
-      label: 'Category'
-    }, {
-      visible: true,
-      key: 'state',
-      width: '33.3%',
-      label: 'State'
-    }],
-    onRowPress: function onRowPress() {}
-  }));
-};
-export default ComponentsStatesScreen;

package/dist-web/components/states/componentsStates/ComponentsStatesScreen.style.d.ts

@@ -1,17 +0,0 @@
-export declare const styles: {
-    title: {
-        fontSize: number;
-        fontWeight: "600";
-        marginBottom: number;
-        color: string;
-    };
-    description: {
-        marginBottom: number;
-        color: string;
-    };
-    lenghtComponents: {
-        fontWeight: "600";
-        color: string;
-        marginBottom: number;
-    };
-};

package/dist-web/components/states/componentsStates/ComponentsStatesScreen.style.js

@@ -1,19 +0,0 @@
-import { StyleSheet } from "react-native-web";
-import { NEUTRAL_100 } from "../../../styles/colors";
-export var styles = StyleSheet.create({
-  title: {
-    fontSize: 30,
-    fontWeight: '600',
-    marginBottom: 8,
-    color: NEUTRAL_100
-  },
-  description: {
-    marginBottom: 20,
-    color: NEUTRAL_100
-  },
-  lenghtComponents: {
-    fontWeight: '600',
-    color: NEUTRAL_100,
-    marginBottom: 20
-  }
-});