@servesall/atoms 1.1.15 → 1.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servesall/atoms",
-  "version": "1.1.15",
+  "version": "1.1.17",
   "description": "Atoms for react-native",
   "main": "dist/bundle.cjs.js",
   "module": "dist/bundle.esm.js",
@@ -32,11 +32,10 @@
     "@babel/preset-react": "^7.16.7",
     "@babel/runtime": "^7.17.9",
     "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "rollup": "^2.72.1",
+    "rollup": "^2.79.1",
     "rollup-plugin-node-polyfills": "^0.2.1"
   },
   "author": "",

package/src/Layout/Box.js

@@ -5,7 +5,7 @@ const Box = ({ children, color = "", style, direction = false }) => {
   return (
     <BoxElement
       style={{ backgroundColor: color, ...style }}
-      flexDirection={direction}
+      direction={direction}
     >
       {children}
     </BoxElement>

package/src/Layout/Center.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { CenterElement } from './Layout.style';
+import React from "react";
+import { CenterElement } from "./Layout.style";
 
 const Center = ({ children, style, direction = false }) => {
-    return (
-        <CenterElement style={style} flexDirection={direction}>
-            {children}
-        </CenterElement>
-    );
+  return (
+    <CenterElement style={style} direction={direction}>
+      {children}
+    </CenterElement>
+  );
 };
 
 export default Center;

package/src/Layout/CenterLeft.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { CenterLeftElement } from './Layout.style';
+import React from "react";
+import { CenterLeftElement } from "./Layout.style";
 
 const CenterLeft = ({ children, style, direction = false }) => {
-    return (
-        <CenterLeftElement style={style} flexDirection={direction}>
-            {children}
-        </CenterLeftElement>
-    );
+  return (
+    <CenterLeftElement style={style} direction={direction}>
+      {children}
+    </CenterLeftElement>
+  );
 };
 
 export default CenterLeft;

package/src/Layout/CenterRight.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { CenterRightElement } from './Layout.style';
+import React from "react";
+import { CenterRightElement } from "./Layout.style";
 
 const CenterRight = ({ children, style, direction = false }) => {
-    return (
-        <CenterRightElement style={style} flexDirection={direction}>
-            {children}
-        </CenterRightElement>
-    );
+  return (
+    <CenterRightElement style={style} direction={direction}>
+      {children}
+    </CenterRightElement>
+  );
 };
 
 export default CenterRight;

package/src/Layout/Layout.style.js

@@ -7,119 +7,119 @@ export const CenterElement = styled.View`
   align-items: center;
   justify-content: center;
   flex: 1;
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flexdirection: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const CenterLeftElement = styled.View`
   align-items: ${(props) =>
-    (props.flexDirection || DEFAULT_FLEX_DIRECTION) === "row"
+    (props.direction || DEFAULT_FLEX_DIRECTION) === "row"
       ? "center"
       : "flex-start"};
   justify-content: ${(props) =>
-    (props.flexDirection || DEFAULT_FLEX_DIRECTION) === "row"
+    (props.direction || DEFAULT_FLEX_DIRECTION) === "row"
       ? "flex-start"
       : "center"};
   flex: 1;
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const CenterRightElement = styled.View`
   align-items: ${(props) =>
-    (props.flexDirection || DEFAULT_FLEX_DIRECTION) === "row"
+    (props.direction || DEFAULT_FLEX_DIRECTION) === "row"
       ? "center"
       : "flex-end"};
   justify-content: ${(props) =>
-    (props.flexDirection || DEFAULT_FLEX_DIRECTION) === "row"
+    (props.direction || DEFAULT_FLEX_DIRECTION) === "row"
       ? "flex-end"
       : "center"};
   flex: 1;
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const MarginElement = styled.View`
   margin: ${(props) => props.theme.margin};
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const MarginHorizontalElement = styled.View`
   margin: 0 ${(props) => props.theme.margin};
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const MarginVerticalElement = styled.View`
   margin: ${(props) => props.theme.margin} 0;
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const MarginBottomElement = styled.View`
   margin-bottom: ${(props) => props.theme.margin};
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const MarginTopElement = styled.View`
   margin-top: ${(props) => props.theme.margin};
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const MarginRightElement = styled.View`
   margin-right: ${(props) => props.theme.margin};
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const MarginLeftElement = styled.View`
   margin-left: ${(props) => props.theme.margin};
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const PaddingElement = styled.View`
   padding: ${(props) => props.theme.padding};
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const PaddingHorizontalElement = styled.View`
   padding: 0 ${(props) => props.theme.padding};
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const PaddingVerticalElement = styled.View`
   padding: ${(props) => props.theme.padding} 0;
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const PaddingTopElement = styled.View`
   padding-top: ${(props) => props.theme.padding};
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const PaddingBottomElement = styled.View`
   padding-bottom: ${(props) => props.theme.padding};
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const PaddingLeftElement = styled.View`
   padding-left: ${(props) => props.theme.padding};
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const PaddingRightElement = styled.View`
   padding-right: ${(props) => props.theme.padding};
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
@@ -131,13 +131,13 @@ export const RowElement = styled.View`
 export const StretchElement = styled.View`
   align-items: stretch;
   align-self: stretch;
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const BoxElement = styled.View`
   flex: 1;
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
@@ -148,12 +148,12 @@ export const FullScreenElement = styled.View`
   left: 0;
   right: 0;
   z-index: 11;
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   ${(props) => props.style};
 `;
 
 export const WebSmallWrapperElement = styled.View`
-  flex-direction: ${(props) => props.flexDirection || DEFAULT_FLEX_DIRECTION};
+  flex-direction: ${(props) => props.direction || DEFAULT_FLEX_DIRECTION};
   width: 500px;
   ${(props) => props.style};
 `;

package/src/Layout/Margin.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { MarginElement } from './Layout.style';
+import React from "react";
+import { MarginElement } from "./Layout.style";
 
 const Margin = ({ children, style, direction = false }) => {
-    return (
-        <MarginElement style={style} flexDirection={direction}>
-            {children}
-        </MarginElement>
-    );
+  return (
+    <MarginElement style={style} direction={direction}>
+      {children}
+    </MarginElement>
+  );
 };
 
 export default Margin;

package/src/Layout/MarginBottom.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { MarginBottomElement } from './Layout.style';
+import React from "react";
+import { MarginBottomElement } from "./Layout.style";
 
 const MarginBottom = ({ children, style, direction = false }) => {
-    return (
-        <MarginBottomElement style={style} flexDirection={direction}>
-            {children}
-        </MarginBottomElement>
-    );
+  return (
+    <MarginBottomElement style={style} direction={direction}>
+      {children}
+    </MarginBottomElement>
+  );
 };
 
 export default MarginBottom;

package/src/Layout/MarginHorizontal.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { MarginHorizontalElement } from './Layout.style';
+import React from "react";
+import { MarginHorizontalElement } from "./Layout.style";
 
 const MarginHorizontal = ({ children, style, direction = false }) => {
-    return (
-        <MarginHorizontalElement style={style} flexDirection={direction}>
-            {children}
-        </MarginHorizontalElement>
-    );
+  return (
+    <MarginHorizontalElement style={style} direction={direction}>
+      {children}
+    </MarginHorizontalElement>
+  );
 };
 
 export default MarginHorizontal;

package/src/Layout/MarginLeft.js

@@ -3,7 +3,7 @@ import { MarginLeftElement } from "./Layout.style";
 
 const MarginLeft = ({ children, style, direction = false }) => {
   return (
-    <MarginLeftElement style={style} flexDirection={direction}>
+    <MarginLeftElement style={style} direction={direction}>
       {children}
     </MarginLeftElement>
   );

package/src/Layout/MarginRight.js

@@ -3,7 +3,7 @@ import { MarginRightElement } from "./Layout.style";
 
 const MarginRight = ({ children, style, direction = false }) => {
   return (
-    <MarginRightElement style={style} flexDirection={direction}>
+    <MarginRightElement style={style} direction={direction}>
       {children}
     </MarginRightElement>
   );

package/src/Layout/MarginTop.js

@@ -3,7 +3,7 @@ import { MarginTopElement } from "./Layout.style";
 
 const MarginTop = ({ children, style, direction = false }) => {
   return (
-    <MarginTopElement style={style} flexDirection={direction}>
+    <MarginTopElement style={style} direction={direction}>
       {children}
     </MarginTopElement>
   );

package/src/Layout/MarginVertical.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { MarginVerticalElement } from './Layout.style';
+import React from "react";
+import { MarginVerticalElement } from "./Layout.style";
 
 const MarginVertical = ({ children, style, direction = false }) => {
-    return (
-        <MarginVerticalElement style={style} flexDirection={direction}>
-            {children}
-        </MarginVerticalElement>
-    );
+  return (
+    <MarginVerticalElement style={style} direction={direction}>
+      {children}
+    </MarginVerticalElement>
+  );
 };
 
 export default MarginVertical;

package/src/Layout/Padding.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { PaddingElement } from './Layout.style';
+import React from "react";
+import { PaddingElement } from "./Layout.style";
 
 const Padding = ({ children, style, direction = false }) => {
-    return (
-        <PaddingElement style={style} flexDirection={direction}>
-            {children}
-        </PaddingElement>
-    );
+  return (
+    <PaddingElement style={style} direction={direction}>
+      {children}
+    </PaddingElement>
+  );
 };
 
 export default Padding;

package/src/Layout/PaddingBottom.js

@@ -3,7 +3,7 @@ import { PaddingBottomElement } from "./Layout.style";
 
 const PaddingBottom = ({ children, style, direction = false }) => {
   return (
-    <PaddingBottomElement style={style} flexDirection={direction}>
+    <PaddingBottomElement style={style} direction={direction}>
       {children}
     </PaddingBottomElement>
   );

package/src/Layout/PaddingHorizontal.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { PaddingHorizontalElement } from './Layout.style';
+import React from "react";
+import { PaddingHorizontalElement } from "./Layout.style";
 
 const PaddingHorizontal = ({ children, style, direction = false }) => {
-    return (
-        <PaddingHorizontalElement style={style} flexDirection={direction}>
-            {children}
-        </PaddingHorizontalElement>
-    );
+  return (
+    <PaddingHorizontalElement style={style} direction={direction}>
+      {children}
+    </PaddingHorizontalElement>
+  );
 };
 
 export default PaddingHorizontal;

package/src/Layout/PaddingLeft.js

@@ -3,7 +3,7 @@ import { PaddingLeftElement } from "./Layout.style";
 
 const PaddingLeft = ({ children, style, direction = false }) => {
   return (
-    <PaddingLeftElement style={style} flexDirection={direction}>
+    <PaddingLeftElement style={style} direction={direction}>
       {children}
     </PaddingLeftElement>
   );

package/src/Layout/PaddingRight.js

@@ -3,7 +3,7 @@ import { PaddingRightElement } from "./Layout.style";
 
 const PaddingRight = ({ children, style, direction = false }) => {
   return (
-    <PaddingRightElement style={style} flexDirection={direction}>
+    <PaddingRightElement style={style} direction={direction}>
       {children}
     </PaddingRightElement>
   );

package/src/Layout/PaddingTop.js

@@ -3,7 +3,7 @@ import { PaddingTopElement } from "./Layout.style";
 
 const PaddingTop = ({ children, style, direction = false }) => {
   return (
-    <PaddingTopElement style={style} flexDirection={direction}>
+    <PaddingTopElement style={style} direction={direction}>
       {children}
     </PaddingTopElement>
   );

package/src/Layout/PaddingVertical.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { PaddingVerticalElement } from './Layout.style';
+import React from "react";
+import { PaddingVerticalElement } from "./Layout.style";
 
 const PaddingVertical = ({ children, style, direction = false }) => {
-    return (
-        <PaddingVerticalElement style={style} flexDirection={direction}>
-            {children}
-        </PaddingVerticalElement>
-    );
+  return (
+    <PaddingVerticalElement style={style} direction={direction}>
+      {children}
+    </PaddingVerticalElement>
+  );
 };
 
 export default PaddingVertical;

package/src/Layout/RoundedTopBox.js

@@ -11,7 +11,7 @@ const RoundedTopBox = ({ children, color = "", style, direction = false }) => {
         overflow: "hidden",
         ...style,
       }}
-      flexDirection={direction}
+      direction={direction}
     >
       {children}
     </BoxElement>

package/src/Layout/Stretch.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { StretchElement } from './Layout.style';
+import React from "react";
+import { StretchElement } from "./Layout.style";
 
 const Stretch = ({ children, style, direction = false }) => {
-    return (
-        <StretchElement style={style} flexDirection={direction}>
-            {children}
-        </StretchElement>
-    );
+  return (
+    <StretchElement style={style} direction={direction}>
+      {children}
+    </StretchElement>
+  );
 };
 
 export default Stretch;

package/src/Layout/WebSmallWrapper.js

@@ -1,13 +1,12 @@
-import React from 'react';
-import { WebSmallWrapperElement } from './Layout.style';
+import React from "react";
+import { WebSmallWrapperElement } from "./Layout.style";
 
 const WebSmallWrapper = ({ children, style, direction = false }) => {
-    return (
-        <WebSmallWrapperElement style={style} flexDirection={direction}>
-            {children}
-        </WebSmallWrapperElement>
-    );
+  return (
+    <WebSmallWrapperElement style={style} direction={direction}>
+      {children}
+    </WebSmallWrapperElement>
+  );
 };
 
 export default WebSmallWrapper;
-

package/src/SplashScreen/SplashScreen.style.js

@@ -0,0 +1,6 @@
+import styled from "styled-components/native";
+
+export const Container = styled.View`
+  background-color: ${(props) => props.theme.color1};
+  flex: 1;
+`;

package/src/SplashScreen/assets/bootsplash_manifest.json

@@ -0,0 +1,7 @@
+{
+  "background": "#FFFFFF",
+  "logo": {
+    "width": 100,
+    "height": 97
+  }
+}

package/src/SplashScreen/assets/penguinOriginal.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="117px" height="113px" viewBox="0 0 117 113" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63 (92445) - https://sketch.com -->
+    <title>Group 2</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(-4.000000, 0.000000)" fill-rule="nonzero">
+            <g id="Group-2">
+                <g transform="translate(4.000000, 0.000000)">
+                    <path d="M93,37 L115.038115,49.9970209 C117.698501,51.5664791 117.641518,55.4027364 114.938395,56.8945162 L93,69" id="Fill-1" fill="#ECBD65"></path>
+                    <path d="M13.3056744,113 L82.6943256,113 C90.0415252,113 96,107.097393 96,99.8151823 L96,47.5631385 C96,21.2947904 74.5100141,0 47.9991188,0 L47.9991188,0 C21.4899859,0 0,21.2947904 0,47.5631385 L0,99.8151823 C0,107.097393 5.9567125,113 13.3056744,113" id="Fill-3" fill="#2D3436"></path>
+                    <path d="M49,45.4177434 L49,95.3935959 C49,99.0427149 51.9719953,102 55.6371062,102 L81.3628938,102 C85.0280047,102 88,99.0427149 88,95.3935959 L88,46.3378651 C88,35.2754929 78.9002334,25.619443 67.7963827,26.0115403 C62.6925321,26.1927764 58.0892649,28.3257858 54.7129522,31.6873668 C51.1808635,35.204044 49,40.0555948 49,45.4177434" id="Fill-5" fill="#FFFFFF"></path>
+                    <path d="M61,46 C61,49.8657244 64.1346712,53 68.0008835,53 C71.8670958,53 75,49.8657244 75,46 C75,42.1342756 71.8670958,39 68.0008835,39 C64.1346712,39 61,42.1342756 61,46" id="Fill-7" fill="#2D3436"></path>
+                    <path d="M109.394929,73.4127436 L95.5342956,81.3603424 C93.4885681,82.533138 93.4885681,85.466862 95.5342956,86.6396576 L109.394929,94.5872564 C111.440657,95.760052 114,94.2940575 114,91.9467313 L114,76.0532687 C114,73.7059425 111.440657,72.239948 109.394929,73.4127436" id="Fill-9" fill="#2D3436"></path>
+                    <path d="M74.8896913,73.4394613 L88.3698093,81.189527 C90.5433969,82.4382364 90.5433969,85.5617636 88.3698093,86.810473 L74.8896913,94.5605387 C72.7161037,95.809248 70,94.2483613 70,91.7491888 L70,76.2508112 C70,73.7516387 72.7161037,72.190752 74.8896913,73.4394613" id="Fill-11" fill="#2D3436"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>