@tactics/toddle-styleguide 1.0.0 → 1.0.2

package/src/components/atoms/split-container/__snapshots__/split-container.test.js.snap

@@ -23,11 +23,11 @@ exports[`test split-container renders correctly when A COLORED ICON is provided
   >
     <RNSVGSvgView
       align="xMidYMid"
-      bbHeight="28"
-      bbWidth="28"
+      bbHeight={24}
+      bbWidth={24}
       fill="none"
       focusable={false}
-      height="28"
+      height={24}
       meetOrSlice={0}
       minX={0}
       minY={0}
@@ -39,14 +39,14 @@ exports[`test split-container renders correctly when A COLORED ICON is provided
           },
           {
             "flex": 0,
-            "height": 28,
-            "width": 28,
+            "height": 24,
+            "width": 24,
           },
         ]
       }
-      vbHeight={27}
-      vbWidth={26}
-      width="28"
+      vbHeight={21}
+      vbWidth={20}
+      width={24}
     >
       <RNSVGGroup
         fill={null}
@@ -57,7 +57,7 @@ exports[`test split-container renders correctly when A COLORED ICON is provided
         }
       >
         <RNSVGPath
-          d="M14 4.5C14 3.94772 13.5523 3.5 13 3.5C12.4477 3.5 12 3.94772 12 4.5H14ZM12 5.625C12 6.17728 12.4477 6.625 13 6.625C13.5523 6.625 14 6.17728 14 5.625H12ZM19.5 17C18.9477 17 18.5 17.4477 18.5 18C18.5 18.5523 18.9477 19 19.5 19V17ZM21.6666 19C22.2189 19 22.6666 18.5523 22.6666 18C22.6666 17.4477 22.2189 17 21.6666 17V19ZM13 18V17C12.4477 17 12 17.4477 12 18H13ZM15.1666 19C15.7189 19 16.1666 18.5523 16.1666 18C16.1666 17.4477 15.7189 17 15.1666 17V19ZM12 22.5C12 23.0523 12.4477 23.5 13 23.5C13.5523 23.5 14 23.0523 14 22.5H12ZM14 10.125C14 9.57272 13.5523 9.125 13 9.125C12.4477 9.125 12 9.57272 12 10.125H14ZM13 13.5H12C12 14.0523 12.4477 14.5 13 14.5V13.5ZM17.3333 21.5C16.781 21.5 16.3333 21.9477 16.3333 22.5C16.3333 23.0523 16.781 23.5 17.3333 23.5V21.5ZM21.6666 23.5C22.2189 23.5 22.6666 23.0523 22.6666 22.5C22.6666 21.9477 22.2189 21.5 21.6666 21.5V23.5ZM4.33331 12.5C3.78103 12.5 3.33331 12.9477 3.33331 13.5C3.33331 14.0523 3.78103 14.5 4.33331 14.5V12.5ZM8.66665 14.5C9.21893 14.5 9.66665 14.0523 9.66665 13.5C9.66665 12.9477 9.21893 12.5 8.66665 12.5V14.5ZM13.0108 14.5C13.5631 14.5 14.0108 14.0523 14.0108 13.5C14.0108 12.9477 13.5631 12.5 13.0108 12.5V14.5ZM17.3441 14.5C17.8964 14.5 18.3441 14.0523 18.3441 13.5C18.3441 12.9477 17.8964 12.5 17.3441 12.5V14.5ZM21.6666 12.5C21.1144 12.5 20.6666 12.9477 20.6666 13.5C20.6666 14.0523 21.1144 14.5 21.6666 14.5V12.5ZM21.6775 14.5C22.2298 14.5 22.6775 14.0523 22.6775 13.5C22.6775 12.9477 22.2298 12.5 21.6775 12.5V14.5ZM5.41665 5.5H7.58331V3.5H5.41665V5.5ZM7.66665 5.625V7.875H9.66665V5.625H7.66665ZM7.58331 8H5.41665V10H7.58331V8ZM5.33331 7.875V5.625H3.33331V7.875H5.33331ZM5.41665 8C5.40602 8 5.39043 7.9971 5.37093 7.97685C5.3508 7.95595 5.33331 7.92194 5.33331 7.875H3.33331C3.33331 9.0127 4.23082 10 5.41665 10V8ZM7.66665 7.875C7.66665 7.92194 7.64916 7.95595 7.62902 7.97685C7.60953 7.9971 7.59394 8 7.58331 8V10C8.76914 10 9.66665 9.0127 9.66665 7.875H7.66665ZM7.58331 5.5C7.59394 5.5 7.60953 5.5029 7.62902 5.52315C7.64916 5.54405 7.66665 5.57806 7.66665 5.625H9.66665C9.66665 4.4873 8.76914 3.5 7.58331 3.5V5.5ZM5.41665 3.5C4.23082 3.5 3.33331 4.4873 3.33331 5.625H5.33331C5.33331 5.57806 5.3508 5.54405 5.37093 5.52315C5.39043 5.5029 5.40602 5.5 5.41665 5.5V3.5ZM18.4166 5.5H20.5833V3.5H18.4166V5.5ZM20.6666 5.625V7.875H22.6666V5.625H20.6666ZM20.5833 8H18.4166V10H20.5833V8ZM18.3333 7.875V5.625H16.3333V7.875H18.3333ZM18.4166 8C18.406 8 18.3904 7.9971 18.3709 7.97685C18.3508 7.95595 18.3333 7.92194 18.3333 7.875H16.3333C16.3333 9.0127 17.2308 10 18.4166 10V8ZM20.6666 7.875C20.6666 7.92194 20.6492 7.95595 20.629 7.97685C20.6095 7.9971 20.5939 8 20.5833 8V10C21.7691 10 22.6666 9.0127 22.6666 7.875H20.6666ZM20.5833 5.5C20.5939 5.5 20.6095 5.5029 20.629 5.52315C20.6492 5.54405 20.6666 5.57806 20.6666 5.625H22.6666C22.6666 4.4873 21.7691 3.5 20.5833 3.5V5.5ZM18.4166 3.5C17.2308 3.5 16.3333 4.4873 16.3333 5.625H18.3333C18.3333 5.57806 18.3508 5.54405 18.3709 5.52315C18.3904 5.5029 18.406 5.5 18.4166 5.5V3.5ZM5.41665 19H7.58331V17H5.41665V19ZM7.66665 19.125V21.375H9.66665V19.125H7.66665ZM7.58331 21.5H5.41665V23.5H7.58331V21.5ZM5.33331 21.375V19.125H3.33331V21.375H5.33331ZM5.41665 21.5C5.40602 21.5 5.39043 21.4971 5.37093 21.4769C5.3508 21.4559 5.33331 21.4219 5.33331 21.375H3.33331C3.33331 22.5127 4.23082 23.5 5.41665 23.5V21.5ZM7.66665 21.375C7.66665 21.4219 7.64916 21.4559 7.62902 21.4769C7.60953 21.4971 7.59394 21.5 7.58331 21.5V23.5C8.76914 23.5 9.66665 22.5127 9.66665 21.375H7.66665ZM7.58331 19C7.59394 19 7.60953 19.0029 7.62902 19.0231C7.64916 19.0441 7.66665 19.0781 7.66665 19.125H9.66665C9.66665 17.9873 8.76914 17 7.58331 17V19ZM5.41665 17C4.23082 17 3.33331 17.9873 3.33331 19.125H5.33331C5.33331 19.0781 5.3508 19.0441 5.37093 19.0231C5.39043 19.0029 5.40602 19 5.41665 19V17ZM12 4.5V5.625H14V4.5H12ZM19.5 19H21.6666V17H19.5V19ZM13 19H15.1666V17H13V19ZM12 18V22.5H14V18H12ZM12 10.125V13.5H14V10.125H12ZM17.3333 23.5H21.6666V21.5H17.3333V23.5ZM4.33331 14.5H8.66665V12.5H4.33331V14.5ZM13 14.5H13.0108V12.5H13V14.5ZM21.6666 14.5H21.6775V12.5H21.6666V14.5ZM13 14.5H17.3441V12.5H13V14.5Z"
+          d="M11 1.5C11 0.947715 10.5523 0.5 9.99998 0.5C9.44769 0.5 8.99998 0.947715 8.99998 1.5H11ZM8.99998 2.625C8.99998 3.17728 9.44769 3.625 9.99998 3.625C10.5523 3.625 11 3.17728 11 2.625H8.99998ZM16.5 14C15.9477 14 15.5 14.4477 15.5 15C15.5 15.5523 15.9477 16 16.5 16V14ZM18.6666 16C19.2189 16 19.6666 15.5523 19.6666 15C19.6666 14.4477 19.2189 14 18.6666 14V16ZM9.99998 15V14C9.44769 14 8.99998 14.4477 8.99998 15H9.99998ZM12.1666 16C12.7189 16 13.1666 15.5523 13.1666 15C13.1666 14.4477 12.7189 14 12.1666 14V16ZM8.99998 19.5C8.99998 20.0523 9.44769 20.5 9.99998 20.5C10.5523 20.5 11 20.0523 11 19.5H8.99998ZM11 7.125C11 6.57272 10.5523 6.125 9.99998 6.125C9.44769 6.125 8.99998 6.57272 8.99998 7.125H11ZM9.99998 10.5H8.99998C8.99998 11.0523 9.44769 11.5 9.99998 11.5V10.5ZM14.3333 18.5C13.781 18.5 13.3333 18.9477 13.3333 19.5C13.3333 20.0523 13.781 20.5 14.3333 20.5V18.5ZM18.6666 20.5C19.2189 20.5 19.6666 20.0523 19.6666 19.5C19.6666 18.9477 19.2189 18.5 18.6666 18.5V20.5ZM1.33331 9.5C0.781028 9.5 0.333313 9.94771 0.333313 10.5C0.333313 11.0523 0.781028 11.5 1.33331 11.5V9.5ZM5.66665 11.5C6.21893 11.5 6.66665 11.0523 6.66665 10.5C6.66665 9.94771 6.21893 9.5 5.66665 9.5V11.5ZM10.0108 11.5C10.5631 11.5 11.0108 11.0523 11.0108 10.5C11.0108 9.94771 10.5631 9.5 10.0108 9.5V11.5ZM14.3441 11.5C14.8964 11.5 15.3441 11.0523 15.3441 10.5C15.3441 9.94771 14.8964 9.5 14.3441 9.5V11.5ZM18.6666 9.5C18.1144 9.5 17.6666 9.94771 17.6666 10.5C17.6666 11.0523 18.1144 11.5 18.6666 11.5V9.5ZM18.6775 11.5C19.2298 11.5 19.6775 11.0523 19.6775 10.5C19.6775 9.94771 19.2298 9.5 18.6775 9.5V11.5ZM2.41665 2.5H4.58331V0.5H2.41665V2.5ZM4.66665 2.625V4.875H6.66665V2.625H4.66665ZM4.58331 5H2.41665V7H4.58331V5ZM2.33331 4.875V2.625H0.333313V4.875H2.33331ZM2.41665 5C2.40602 5 2.39043 4.9971 2.37093 4.97685C2.3508 4.95595 2.33331 4.92194 2.33331 4.875H0.333313C0.333313 6.0127 1.23082 7 2.41665 7V5ZM4.66665 4.875C4.66665 4.92194 4.64916 4.95595 4.62902 4.97685C4.60953 4.9971 4.59394 5 4.58331 5V7C5.76914 7 6.66665 6.0127 6.66665 4.875H4.66665ZM4.58331 2.5C4.59394 2.5 4.60953 2.5029 4.62902 2.52315C4.64916 2.54405 4.66665 2.57806 4.66665 2.625H6.66665C6.66665 1.4873 5.76914 0.5 4.58331 0.5V2.5ZM2.41665 0.5C1.23082 0.5 0.333313 1.4873 0.333313 2.625H2.33331C2.33331 2.57806 2.3508 2.54405 2.37093 2.52315C2.39043 2.5029 2.40602 2.5 2.41665 2.5V0.5ZM15.4166 2.5H17.5833V0.5H15.4166V2.5ZM17.6666 2.625V4.875H19.6666V2.625H17.6666ZM17.5833 5H15.4166V7H17.5833V5ZM15.3333 4.875V2.625H13.3333V4.875H15.3333ZM15.4166 5C15.406 5 15.3904 4.9971 15.3709 4.97685C15.3508 4.95595 15.3333 4.92194 15.3333 4.875H13.3333C13.3333 6.0127 14.2308 7 15.4166 7V5ZM17.6666 4.875C17.6666 4.92194 17.6492 4.95595 17.629 4.97685C17.6095 4.9971 17.5939 5 17.5833 5V7C18.7691 7 19.6666 6.0127 19.6666 4.875H17.6666ZM17.5833 2.5C17.5939 2.5 17.6095 2.5029 17.629 2.52315C17.6492 2.54405 17.6666 2.57806 17.6666 2.625H19.6666C19.6666 1.4873 18.7691 0.5 17.5833 0.5V2.5ZM15.4166 0.5C14.2308 0.5 13.3333 1.4873 13.3333 2.625H15.3333C15.3333 2.57806 15.3508 2.54405 15.3709 2.52315C15.3904 2.5029 15.406 2.5 15.4166 2.5V0.5ZM2.41665 16H4.58331V14H2.41665V16ZM4.66665 16.125V18.375H6.66665V16.125H4.66665ZM4.58331 18.5H2.41665V20.5H4.58331V18.5ZM2.33331 18.375V16.125H0.333313V18.375H2.33331ZM2.41665 18.5C2.40602 18.5 2.39043 18.4971 2.37093 18.4769C2.3508 18.4559 2.33331 18.4219 2.33331 18.375H0.333313C0.333313 19.5127 1.23082 20.5 2.41665 20.5V18.5ZM4.66665 18.375C4.66665 18.4219 4.64916 18.4559 4.62902 18.4769C4.60953 18.4971 4.59394 18.5 4.58331 18.5V20.5C5.76914 20.5 6.66665 19.5127 6.66665 18.375H4.66665ZM4.58331 16C4.59394 16 4.60953 16.0029 4.62902 16.0231C4.64916 16.0441 4.66665 16.0781 4.66665 16.125H6.66665C6.66665 14.9873 5.76914 14 4.58331 14V16ZM2.41665 14C1.23082 14 0.333313 14.9873 0.333313 16.125H2.33331C2.33331 16.0781 2.3508 16.0441 2.37093 16.0231C2.39043 16.0029 2.40602 16 2.41665 16V14ZM8.99998 1.5V2.625H11V1.5H8.99998ZM16.5 16H18.6666V14H16.5V16ZM9.99998 16H12.1666V14H9.99998V16ZM8.99998 15V19.5H11V15H8.99998ZM8.99998 7.125V10.5H11V7.125H8.99998ZM14.3333 20.5H18.6666V18.5H14.3333V20.5ZM1.33331 11.5H5.66665V9.5H1.33331V11.5ZM9.99998 11.5H10.0108V9.5H9.99998V11.5ZM18.6666 11.5H18.6775V9.5H18.6666V11.5ZM9.99998 11.5H14.3441V9.5H9.99998V11.5Z"
           fill={4283522924}
           propList={
             [

package/src/components/molecules/blocked-message/__snapshots__/blocked-message.test.js.snap

@@ -18,11 +18,11 @@ exports[`Blocked message visual test renders a cancel link with label "cancel" t
 >
   <RNSVGSvgView
     align="xMidYMid"
-    bbHeight="28"
-    bbWidth="28"
+    bbHeight={26}
+    bbWidth={26}
     fill="none"
     focusable={false}
-    height="28"
+    height={26}
     meetOrSlice={0}
     minX={0}
     minY={0}
@@ -34,14 +34,14 @@ exports[`Blocked message visual test renders a cancel link with label "cancel" t
         },
         {
           "flex": 0,
-          "height": 28,
-          "width": 28,
+          "height": 26,
+          "width": 26,
         },
       ]
     }
-    vbHeight={27}
-    vbWidth={26}
-    width="28"
+    vbHeight={23}
+    vbWidth={22}
+    width={26}
   >
     <RNSVGGroup
       fill={null}
@@ -52,7 +52,7 @@ exports[`Blocked message visual test renders a cancel link with label "cancel" t
       }
     >
       <RNSVGPath
-        d="M13 9V13.5M13 18H13.0108M22.75 13.5C22.75 19.0919 18.3848 23.625 13 23.625C7.61522 23.625 3.25 19.0919 3.25 13.5C3.25 7.90812 7.61522 3.375 13 3.375C18.3848 3.375 22.75 7.90812 22.75 13.5Z"
+        d="M11 7V11.5M11 16H11.0108M20.75 11.5C20.75 17.0919 16.3848 21.625 11 21.625C5.61522 21.625 1.25 17.0919 1.25 11.5C1.25 5.90812 5.61522 1.375 11 1.375C16.3848 1.375 20.75 5.90812 20.75 11.5Z"
         propList={
           [
             "stroke",

package/src/components/molecules/blocked-message/blocked-message.component.tsx

@@ -17,7 +17,12 @@ export const BlockedMessage = ({message}: BlockedMessageProps) => {
 
   return (
     <View style={styles.container}>
-      <Icon.Outline.ExclamationCircle color={context.colors.ui.error.dark} />
+      <Icon
+        style={'regular'}
+        name={'exclamation-circle'}
+        color={context.colors.ui.error.dark}
+        size={26}
+      />
       <Paragraph
         textColor={context.colors.ui.error.dark}
         textAlign={'center'}

package/src/components/molecules/button/__snapshots__/button.test.js.snap

@@ -108,14 +108,14 @@ exports[`test button component should render a button component that is disabled
           ]
         }
       >
-        Button with icon
+        Button without icon
       </Text>
     </View>
   </View>
 </View>
 `;
 
-exports[`test button component should render a button component with an icon 1`] = `
+exports[`test button component should render a button component with a clock icon, since regular is the default the icon will be outlined 1`] = `
 <View
   accessible={true}
   collapsable={false}
@@ -152,11 +152,11 @@ exports[`test button component should render a button component with an icon 1`]
     >
       <RNSVGSvgView
         align="xMidYMid"
-        bbHeight="28"
-        bbWidth="28"
+        bbHeight={24}
+        bbWidth={24}
         fill="none"
         focusable={false}
-        height="28"
+        height={24}
         meetOrSlice={0}
         minX={0}
         minY={0}
@@ -168,14 +168,14 @@ exports[`test button component should render a button component with an icon 1`]
             },
             {
               "flex": 0,
-              "height": 28,
-              "width": 28,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
-        vbHeight={28}
-        vbWidth={28}
-        width="28"
+        vbHeight={22}
+        vbWidth={23}
+        width={24}
       >
         <RNSVGGroup
           fill={null}
@@ -186,7 +186,7 @@ exports[`test button component should render a button component with an icon 1`]
           }
         >
           <RNSVGPath
-            d="M3.875 9.5L12.7519 15.4179C13.5077 15.9218 14.4923 15.9218 15.2481 15.4179L24.125 9.5M6.125 21.875H21.875C23.1176 21.875 24.125 20.8676 24.125 19.625V8.375C24.125 7.13236 23.1176 6.125 21.875 6.125H6.125C4.88236 6.125 3.875 7.13236 3.875 8.375V19.625C3.875 20.8676 4.88236 21.875 6.125 21.875Z"
+            d="M11.5 6.66667V11L14.875 14.25M21.625 11C21.625 16.3848 17.0919 20.75 11.5 20.75C5.90812 20.75 1.375 16.3848 1.375 11C1.375 5.61522 5.90812 1.25 11.5 1.25C17.0919 1.25 21.625 5.61522 21.625 11Z"
             propList={
               [
                 "stroke",
@@ -195,7 +195,7 @@ exports[`test button component should render a button component with an icon 1`]
                 "strokeLinejoin",
               ]
             }
-            stroke={4279837036}
+            stroke={4292929785}
             strokeLinecap={1}
             strokeLinejoin={1}
             strokeWidth="2"
@@ -230,7 +230,7 @@ exports[`test button component should render a button component with an icon 1`]
 </View>
 `;
 
-exports[`test button component should render a button component with an icon but is also disabled 1`] = `
+exports[`test button component should render a button component with a solid icon named eye-off but is also disabled 1`] = `
 <View
   accessibilityState={
     {
@@ -272,11 +272,11 @@ exports[`test button component should render a button component with an icon but
     >
       <RNSVGSvgView
         align="xMidYMid"
-        bbHeight="28"
-        bbWidth="28"
+        bbHeight={24}
+        bbWidth={24}
         fill="none"
         focusable={false}
-        height="28"
+        height={24}
         meetOrSlice={0}
         minX={0}
         minY={0}
@@ -288,14 +288,14 @@ exports[`test button component should render a button component with an icon but
             },
             {
               "flex": 0,
-              "height": 28,
-              "width": 28,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
-        vbHeight={28}
-        vbWidth={28}
-        width="28"
+        vbHeight={18}
+        vbWidth={22}
+        width={24}
       >
         <RNSVGGroup
           fill={null}
@@ -306,19 +306,25 @@ exports[`test button component should render a button component with an icon but
           }
         >
           <RNSVGPath
-            d="M3.875 9.5L12.7519 15.4179C13.5077 15.9218 14.4923 15.9218 15.2481 15.4179L24.125 9.5M6.125 21.875H21.875C23.1176 21.875 24.125 20.8676 24.125 19.625V8.375C24.125 7.13236 23.1176 6.125 21.875 6.125H6.125C4.88236 6.125 3.875 7.13236 3.875 8.375V19.625C3.875 20.8676 4.88236 21.875 6.125 21.875Z"
+            clipRule={0}
+            d="M4.07779 0.522134C3.64822 0.092557 2.95174 0.092557 2.52216 0.522134C2.09258 0.95171 2.09258 1.64819 2.52216 2.07777L17.9222 17.4778C18.3517 17.9073 19.0482 17.9073 19.4778 17.4778C19.9074 17.0482 19.9074 16.3517 19.4778 15.9221L17.8573 14.3016C19.5486 12.9516 20.8329 11.1132 21.4966 8.99991C20.0949 4.53712 15.9256 1.29995 11.0002 1.29995C9.21429 1.29995 7.52776 1.72556 6.03654 2.48088L4.07779 0.522134ZM8.76492 5.20926L10.4302 6.87453C10.612 6.82588 10.8031 6.79995 11.0003 6.79995C12.2153 6.79995 13.2003 7.78492 13.2003 8.99995C13.2003 9.19711 13.1743 9.3882 13.1257 9.57002L14.791 11.2353C15.1781 10.5802 15.4003 9.81601 15.4003 8.99995C15.4003 6.5699 13.4303 4.59995 11.0003 4.59995C10.1842 4.59995 9.42002 4.82211 8.76492 5.20926Z"
+            fill={4283522924}
+            fillRule={0}
             propList={
               [
-                "stroke",
-                "strokeWidth",
-                "strokeLinecap",
-                "strokeLinejoin",
+                "fill",
+                "fillRule",
+              ]
+            }
+          />
+          <RNSVGPath
+            d="M13.6995 16.3663L10.7246 13.3915C8.51412 13.2548 6.74539 11.4861 6.60875 9.27561L2.56839 5.23525C1.65067 6.3294 0.941981 7.60481 0.503784 8.99999C1.90549 13.4628 6.0748 16.6999 11.0002 16.6999C11.9315 16.6999 12.8358 16.5842 13.6995 16.3663Z"
+            fill={4283522924}
+            propList={
+              [
+                "fill",
               ]
             }
-            stroke={4279837036}
-            strokeLinecap={1}
-            strokeLinejoin={1}
-            strokeWidth="2"
           />
         </RNSVGGroup>
       </RNSVGSvgView>

package/src/components/molecules/button/button.component.d.ts

@@ -1,9 +1,12 @@
-import * as React from 'react';
+import { IconNameType, IconStyleType } from '../../../types/icontype.type';
 declare type ButtonProps = {
     label: string;
-    icon?: React.ReactElement;
+    icon?: boolean;
+    iconStyle?: IconStyleType;
+    iconName?: IconNameType;
+    iconSize?: number;
     disabled?: boolean;
     onPress?: () => void;
 };
-declare const Button: ({ label, icon, disabled, onPress }: ButtonProps) => JSX.Element;
+declare const Button: ({ label, icon, iconStyle, iconName, iconSize, disabled, onPress, }: ButtonProps) => JSX.Element;
 export { Button as Button };

package/src/components/molecules/button/button.component.tsx

@@ -5,22 +5,46 @@ import {Pressable, View} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './button.styles';
 import {Heading4} from '../../atoms/heading-components';
+import {IconNameType, IconStyleType} from '../../../types/icontype.type';
+import {Icon} from '../../../icons/index';
 
 type ButtonProps = {
   label: string;
-  icon?: React.ReactElement;
+  icon?: boolean;
+  iconStyle?: IconStyleType;
+  iconName?: IconNameType;
+  iconSize?: number;
   disabled?: boolean;
   onPress?: () => void;
 };
 
-const Button = ({label, icon, disabled, onPress}: ButtonProps) => {
+const Button = ({
+  label,
+  icon = false,
+  iconStyle = 'regular',
+  iconName = 'calendar',
+  iconSize,
+  disabled,
+  onPress,
+}: ButtonProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context, disabled);
 
   return (
     <Pressable disabled={disabled} onPress={onPress}>
       <View style={styles.container}>
-        {icon ? <View style={styles.iconGap}>{icon}</View> : null}
+        {icon ? (
+          <View style={styles.iconGap}>
+            <Icon
+              style={iconStyle}
+              name={iconName}
+              color={
+                disabled ? context.colors.ui.darkgrey : context.colors.main['9']
+              }
+              size={iconSize}
+            />
+          </View>
+        ) : null}
         <View>
           <Heading4
             textAlign={'center'}

package/src/components/molecules/button/button.preview.tsx

@@ -15,7 +15,8 @@ export const ButtonPreview = ({}: {}) => {
       <Button label="Default button" onPress={() => console.log('clicked')} />
       <Button
         label="Icon button"
-        icon={<Icon.Outline.Eye color={'#FFFFFF'} />}
+        icon={true}
+        iconName={'eye'}
         onPress={() => console.log('clicked')}
       />
       <Button
@@ -25,9 +26,11 @@ export const ButtonPreview = ({}: {}) => {
       />
       <Button
         label="Disabled Icon button"
-        icon={<Icon.Solid.DocumentText color="#FF0000" />}
         disabled={true}
-        onPress={() => console.log('clicked')}
+        icon={true}
+        iconStyle={'solid'}
+        iconName={'document-text'}
+        onPress={() => console.log('clicked disabled')}
       />
     </View>
   );

package/src/components/molecules/button/button.test.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import render from 'react-test-renderer';
 import {Button} from './button.component';
-import {Icon} from '../../../icons';
 
 describe('test button component', () => {
   it('should render a button component', function () {
@@ -10,22 +9,26 @@ describe('test button component', () => {
   });
   it('should render a button component that is disabled', () => {
     const tree = render
-      .create(<Button label="Button with icon" disabled={true} />)
+      .create(<Button label="Button without icon" disabled={true} />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
-  it('should render a button component with an icon', () => {
+  it('should render a button component with a clock icon, since regular is the default the icon will be outlined', () => {
     const tree = render
-      .create(<Button label="Button with icon" icon={<Icon.Outline.Mail />} />)
+      .create(
+        <Button label="Button with icon" icon={true} iconName={'clock'} />
+      )
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
-  it('should render a button component with an icon but is also disabled', () => {
+  it('should render a button component with a solid icon named eye-off but is also disabled', () => {
     const tree = render
       .create(
         <Button
           label="Button with icon"
-          icon={<Icon.Outline.Mail />}
+          icon={true}
+          iconStyle={'solid'}
+          iconName={'eye-off'}
           disabled={true}
         />
       )

package/src/components/molecules/calendar-select/__snapshots__/calendar-select.test.js.snap

@@ -27,11 +27,11 @@ exports[`test Calendar Select renders Calendar Select 1`] = `
   >
     <RNSVGSvgView
       align="xMidYMid"
-      bbHeight="28"
-      bbWidth="28"
+      bbHeight={24}
+      bbWidth={24}
       fill="none"
       focusable={false}
-      height="28"
+      height={24}
       meetOrSlice={0}
       minX={0}
       minY={0}
@@ -43,14 +43,14 @@ exports[`test Calendar Select renders Calendar Select 1`] = `
           },
           {
             "flex": 0,
-            "height": 28,
-            "width": 28,
+            "height": 24,
+            "width": 24,
           },
         ]
       }
-      vbHeight={27}
-      vbWidth={27}
-      width="28"
+      vbHeight={19}
+      vbWidth={10}
+      width={24}
     >
       <RNSVGGroup
         fill={null}
@@ -61,7 +61,7 @@ exports[`test Calendar Select renders Calendar Select 1`] = `
         }
       >
         <RNSVGPath
-          d="M16.875 21.375L9 13.5L16.875 5.625"
+          d="M8.875 17.375L1 9.5L8.875 1.625"
           propList={
             [
               "stroke",
@@ -97,10 +97,10 @@ exports[`test Calendar Select renders Calendar Select 1`] = `
         "backgroundColor": "#19216C",
         "borderRadius": 32,
         "flexDirection": "row",
-        "paddingBottom": 8,
+        "paddingBottom": 12,
         "paddingLeft": 24,
         "paddingRight": 24,
-        "paddingTop": 8,
+        "paddingTop": 12,
       }
     }
   >
@@ -113,11 +113,11 @@ exports[`test Calendar Select renders Calendar Select 1`] = `
     >
       <RNSVGSvgView
         align="xMidYMid"
-        bbHeight="28"
-        bbWidth="28"
+        bbHeight={24}
+        bbWidth={24}
         fill="none"
         focusable={false}
-        height="28"
+        height={24}
         meetOrSlice={0}
         minX={0}
         minY={0}
@@ -129,14 +129,14 @@ exports[`test Calendar Select renders Calendar Select 1`] = `
             },
             {
               "flex": 0,
-              "height": 28,
-              "width": 28,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
-        vbHeight={27}
-        vbWidth={27}
-        width="28"
+        vbHeight={24}
+        vbWidth={24}
+        width={24}
       >
         <RNSVGGroup
           fill={null}
@@ -147,7 +147,7 @@ exports[`test Calendar Select renders Calendar Select 1`] = `
           }
         >
           <RNSVGPath
-            d="M9.16667 7.875V3.375M17.8333 7.875V3.375M8.08333 12.375H18.9167M5.91667 23.625H21.0833C22.28 23.625 23.25 22.6176 23.25 21.375V7.875C23.25 6.63236 22.28 5.625 21.0833 5.625H5.91667C4.72005 5.625 3.75 6.63236 3.75 7.875V21.375C3.75 22.6176 4.72005 23.625 5.91667 23.625Z"
+            d="M7.33333 6.16667V1.5M16.6667 6.16667V1.5M6.16667 10.8333H17.8333M3.83333 22.5H20.1667C21.4553 22.5 22.5 21.4553 22.5 20.1667V6.16667C22.5 4.878 21.4553 3.83333 20.1667 3.83333H3.83333C2.54467 3.83333 1.5 4.878 1.5 6.16667V20.1667C1.5 21.4553 2.54467 22.5 3.83333 22.5Z"
             propList={
               [
                 "stroke",
@@ -204,11 +204,11 @@ exports[`test Calendar Select renders Calendar Select 1`] = `
   >
     <RNSVGSvgView
       align="xMidYMid"
-      bbHeight="28"
-      bbWidth="28"
+      bbHeight={24}
+      bbWidth={24}
       fill="none"
       focusable={false}
-      height="28"
+      height={24}
       meetOrSlice={0}
       minX={0}
       minY={0}
@@ -220,14 +220,14 @@ exports[`test Calendar Select renders Calendar Select 1`] = `
           },
           {
             "flex": 0,
-            "height": 28,
-            "width": 28,
+            "height": 24,
+            "width": 24,
           },
         ]
       }
-      vbHeight={27}
-      vbWidth={26}
-      width="28"
+      vbHeight={19}
+      vbWidth={11}
+      width={24}
     >
       <RNSVGGroup
         fill={null}
@@ -238,7 +238,7 @@ exports[`test Calendar Select renders Calendar Select 1`] = `
         }
       >
         <RNSVGPath
-          d="M9.75 5.625L17.3333 13.5L9.75 21.375"
+          d="M1.75 1.625L9.33333 9.5L1.75 17.375"
           propList={
             [
               "stroke",

package/src/components/molecules/calendar-select/calendar-select.component.tsx

@@ -4,7 +4,6 @@ import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './calendar-select.styles';
 import {Pressable, View} from 'react-native';
-import {CalendarIcon} from '../../../icons/outline/calendar/calendar.icon';
 import {Paragraph} from '../../atoms/paragraph-components';
 import {Icon} from '../../../icons/index';
 
@@ -42,7 +41,7 @@ const CalendarSelect = ({
           if (pressChevronLeft) pressChevronLeft(visibleDate.minus({days: 1}));
         }}
       >
-        <Icon.Outline.ChevronLeft />
+        <Icon style={'regular'} name={'chevron-left'} />
       </Pressable>
 
       <Pressable
@@ -50,7 +49,11 @@ const CalendarSelect = ({
         style={styles.dateContainer}
       >
         <View style={styles.icon}>
-          <CalendarIcon color={context.colors.main[9]} />
+          <Icon
+            style={'regular'}
+            name={'calendar'}
+            color={context.colors.main['9']}
+          />
         </View>
         <View>
           <Paragraph textColor={context.colors.main['9']}>
@@ -65,7 +68,7 @@ const CalendarSelect = ({
           if (pressChevronRight) pressChevronRight(visibleDate.plus({days: 1}));
         }}
       >
-        <Icon.Outline.ChevronRight />
+        <Icon style={'regular'} name={'chevron-right'} />
       </Pressable>
     </View>
   );

package/src/components/molecules/calendar-select/calendar-select.styles.js

@@ -13,8 +13,8 @@ export const Stylesheet = (context) =>
       flexDirection: 'row',
       backgroundColor: context.colors.main[0],
       borderRadius: Scale.xl,
-      paddingTop: Scale.xs,
-      paddingBottom: Scale.xs,
+      paddingTop: Scale.s,
+      paddingBottom: Scale.s,
       paddingLeft: Scale.l,
       paddingRight: Scale.l,
       alignItems: 'center',