@tactics/toddle-styleguide 1.0.0 → 1.0.2

package/src/components/molecules/more-info-button/more-info-button.test.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import render from 'react-test-renderer';
+import {MoreInfoButton} from './more-info-button.component';
+
+describe('more info button', () => {
+  it('should render a more info button in a white text color, underlined', function () {
+    const tree = render
+      .create(
+        <MoreInfoButton
+          label="More info"
+          onPress={() => console.log('do something')}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a more info button in a black text color, underlined', () => {
+    const tree = render
+      .create(
+        <MoreInfoButton
+          label="Meer info"
+          onPress={() => console.log('do something')}
+          textColor={'#000000'}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/molecules/password-input/__snapshots__/password-input.test.js.snap

@@ -64,11 +64,11 @@ exports[`Visual test for the password input field shows a password input field w
   >
     <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}
@@ -80,14 +80,14 @@ exports[`Visual test for the password input field shows a password input field w
           },
           {
             "flex": 0,
-            "height": 28,
-            "width": 28,
+            "height": 24,
+            "width": 24,
           },
         ]
       }
-      vbHeight={27}
-      vbWidth={27}
-      width="28"
+      vbHeight={19}
+      vbWidth={25}
+      width={24}
     >
       <RNSVGGroup
         fill={null}
@@ -98,7 +98,7 @@ exports[`Visual test for the password input field shows a password input field w
         }
       >
         <RNSVGPath
-          d="M16.875 13.5C16.875 15.364 15.3639 16.875 13.5 16.875C11.636 16.875 10.125 15.364 10.125 13.5C10.125 11.636 11.636 10.125 13.5 10.125C15.3639 10.125 16.875 11.636 16.875 13.5Z"
+          d="M15.875 9.5C15.875 11.364 14.3639 12.875 12.5 12.875C10.636 12.875 9.12497 11.364 9.12497 9.5C9.12497 7.63604 10.636 6.125 12.5 6.125C14.3639 6.125 15.875 7.63604 15.875 9.5Z"
           propList={
             [
               "stroke",
@@ -113,7 +113,7 @@ exports[`Visual test for the password input field shows a password input field w
           strokeWidth="2"
         />
         <RNSVGPath
-          d="M2.7655 13.5C4.19906 8.93574 8.46313 5.625 13.5005 5.625C18.5378 5.625 22.8019 8.93578 24.2354 13.5C22.8019 18.0643 18.5378 21.375 13.5005 21.375C8.46313 21.375 4.19904 18.0642 2.7655 13.5Z"
+          d="M1.7655 9.49996C3.19906 4.93574 7.46313 1.625 12.5005 1.625C17.5378 1.625 21.8019 4.93578 23.2354 9.50004C21.8019 14.0643 17.5378 17.375 12.5005 17.375C7.46313 17.375 3.19904 14.0642 1.7655 9.49996Z"
           propList={
             [
               "stroke",
@@ -198,11 +198,11 @@ exports[`Visual test for the password input field shows a password input field w
   >
     <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}
@@ -214,14 +214,14 @@ exports[`Visual test for the password input field shows a password input field w
           },
           {
             "flex": 0,
-            "height": 28,
-            "width": 28,
+            "height": 24,
+            "width": 24,
           },
         ]
       }
-      vbHeight={27}
-      vbWidth={27}
-      width="28"
+      vbHeight={19}
+      vbWidth={25}
+      width={24}
     >
       <RNSVGGroup
         fill={null}
@@ -232,7 +232,7 @@ exports[`Visual test for the password input field shows a password input field w
         }
       >
         <RNSVGPath
-          d="M16.875 13.5C16.875 15.364 15.3639 16.875 13.5 16.875C11.636 16.875 10.125 15.364 10.125 13.5C10.125 11.636 11.636 10.125 13.5 10.125C15.3639 10.125 16.875 11.636 16.875 13.5Z"
+          d="M15.875 9.5C15.875 11.364 14.3639 12.875 12.5 12.875C10.636 12.875 9.12497 11.364 9.12497 9.5C9.12497 7.63604 10.636 6.125 12.5 6.125C14.3639 6.125 15.875 7.63604 15.875 9.5Z"
           propList={
             [
               "stroke",
@@ -247,7 +247,7 @@ exports[`Visual test for the password input field shows a password input field w
           strokeWidth="2"
         />
         <RNSVGPath
-          d="M2.7655 13.5C4.19906 8.93574 8.46313 5.625 13.5005 5.625C18.5378 5.625 22.8019 8.93578 24.2354 13.5C22.8019 18.0643 18.5378 21.375 13.5005 21.375C8.46313 21.375 4.19904 18.0642 2.7655 13.5Z"
+          d="M1.7655 9.49996C3.19906 4.93574 7.46313 1.625 12.5005 1.625C17.5378 1.625 21.8019 4.93578 23.2354 9.50004C21.8019 14.0643 17.5378 17.375 12.5005 17.375C7.46313 17.375 3.19904 14.0642 1.7655 9.49996Z"
           propList={
             [
               "stroke",
@@ -332,11 +332,11 @@ exports[`Visual test for the password input field shows a password input field w
   >
     <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}
@@ -348,14 +348,14 @@ exports[`Visual test for the password input field shows a password input field w
           },
           {
             "flex": 0,
-            "height": 28,
-            "width": 28,
+            "height": 24,
+            "width": 24,
           },
         ]
       }
-      vbHeight={27}
-      vbWidth={27}
-      width="28"
+      vbHeight={19}
+      vbWidth={25}
+      width={24}
     >
       <RNSVGGroup
         fill={null}
@@ -366,7 +366,7 @@ exports[`Visual test for the password input field shows a password input field w
         }
       >
         <RNSVGPath
-          d="M16.875 13.5C16.875 15.364 15.3639 16.875 13.5 16.875C11.636 16.875 10.125 15.364 10.125 13.5C10.125 11.636 11.636 10.125 13.5 10.125C15.3639 10.125 16.875 11.636 16.875 13.5Z"
+          d="M15.875 9.5C15.875 11.364 14.3639 12.875 12.5 12.875C10.636 12.875 9.12497 11.364 9.12497 9.5C9.12497 7.63604 10.636 6.125 12.5 6.125C14.3639 6.125 15.875 7.63604 15.875 9.5Z"
           propList={
             [
               "stroke",
@@ -381,7 +381,7 @@ exports[`Visual test for the password input field shows a password input field w
           strokeWidth="2"
         />
         <RNSVGPath
-          d="M2.7655 13.5C4.19906 8.93574 8.46313 5.625 13.5005 5.625C18.5378 5.625 22.8019 8.93578 24.2354 13.5C22.8019 18.0643 18.5378 21.375 13.5005 21.375C8.46313 21.375 4.19904 18.0642 2.7655 13.5Z"
+          d="M1.7655 9.49996C3.19906 4.93574 7.46313 1.625 12.5005 1.625C17.5378 1.625 21.8019 4.93578 23.2354 9.50004C21.8019 14.0643 17.5378 17.375 12.5005 17.375C7.46313 17.375 3.19904 14.0642 1.7655 9.49996Z"
           propList={
             [
               "stroke",

package/src/components/molecules/password-input/password-input.component.tsx

@@ -42,9 +42,17 @@ export const PasswordInput = ({
         onPress={() => setSecure(!secure)}
       >
         {secure ? (
-          <Icon.Outline.Eye color={Context.colors.main['3']} />
+          <Icon
+            style={'regular'}
+            name={'eye'}
+            color={Context.colors.main['3']}
+          />
         ) : (
-          <Icon.Outline.EyeOff color={Context.colors.main['3']} />
+          <Icon
+            style={'regular'}
+            name={'eye-off'}
+            color={Context.colors.main['3']}
+          />
         )}
       </Pressable>
     </View>

package/src/components/molecules/pressable-icon/__snapshots__/pressable-icon.test.js.snap

@@ -40,11 +40,11 @@ exports[`pressable-icon test render a default disabled pressable 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}
@@ -56,14 +56,14 @@ exports[`pressable-icon test render a default disabled pressable icon 1`] = `
           },
           {
             "flex": 0,
-            "height": 28,
-            "width": 28,
+            "height": 24,
+            "width": 24,
           },
         ]
       }
-      vbHeight={28}
-      vbWidth={28}
-      width="28"
+      vbHeight={19}
+      vbWidth={23}
+      width={24}
     >
       <RNSVGGroup
         fill={null}
@@ -74,7 +74,7 @@ exports[`pressable-icon test render a default disabled pressable 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="M1.375 5L10.2519 10.9179C11.0077 11.4218 11.9923 11.4218 12.7481 10.9179L21.625 5M3.625 17.375H19.375C20.6176 17.375 21.625 16.3676 21.625 15.125V3.875C21.625 2.63236 20.6176 1.625 19.375 1.625H3.625C2.38236 1.625 1.375 2.63236 1.375 3.875V15.125C1.375 16.3676 2.38236 17.375 3.625 17.375Z"
           propList={
             [
               "stroke",
@@ -129,11 +129,11 @@ exports[`pressable-icon test render a default pressable 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}
@@ -145,14 +145,14 @@ exports[`pressable-icon test render a default pressable icon 1`] = `
           },
           {
             "flex": 0,
-            "height": 28,
-            "width": 28,
+            "height": 24,
+            "width": 24,
           },
         ]
       }
-      vbHeight={27}
-      vbWidth={27}
-      width="28"
+      vbHeight={23}
+      vbWidth={23}
+      width={24}
     >
       <RNSVGGroup
         fill={null}
@@ -163,7 +163,7 @@ exports[`pressable-icon test render a default pressable icon 1`] = `
         }
       >
         <RNSVGPath
-          d="M11.25 11.25H5.8906C4.21799 11.25 3.13012 13.0102 3.87814 14.5062L7.81564 22.3812C8.19677 23.1435 8.97586 23.625 9.8281 23.625H14.348C14.532 23.625 14.7153 23.6024 14.8937 23.5578L19.125 22.5M11.25 11.25V5.625C11.25 4.38236 12.2574 3.375 13.5 3.375H13.6074C14.1694 3.375 14.625 3.83059 14.625 4.39259C14.625 5.19618 14.8629 5.9818 15.3086 6.65043L19.125 12.375V22.5M11.25 11.25H13.5M19.125 22.5H21.375C22.6177 22.5 23.625 21.4926 23.625 20.25V13.5C23.625 12.2574 22.6177 11.25 21.375 11.25H18.5625"
+          d="M13.75 9.25H19.1094C20.782 9.25 21.8699 11.0102 21.1219 12.5062L17.1844 20.3812C16.8033 21.1435 16.0242 21.625 15.1719 21.625H10.652C10.468 21.625 10.2848 21.6024 10.1063 21.5578L5.875 20.5M13.75 9.25V3.625C13.75 2.38236 12.7426 1.375 11.5 1.375H11.3926C10.8306 1.375 10.375 1.83059 10.375 2.39259C10.375 3.19618 10.1371 3.9818 9.69138 4.65043L5.875 10.375V20.5M13.75 9.25H11.5M5.875 20.5H3.625C2.38236 20.5 1.375 19.4926 1.375 18.25V11.5C1.375 10.2574 2.38236 9.25 3.625 9.25H6.4375"
           propList={
             [
               "stroke",
@@ -218,11 +218,11 @@ exports[`pressable-icon test render an inverted pressable 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}
@@ -234,14 +234,14 @@ exports[`pressable-icon test render an inverted pressable icon 1`] = `
           },
           {
             "flex": 0,
-            "height": 28,
-            "width": 28,
+            "height": 24,
+            "width": 24,
           },
         ]
       }
-      vbHeight={26}
-      vbWidth={26}
-      width="28"
+      vbHeight={22}
+      vbWidth={22}
+      width={24}
     >
       <RNSVGGroup
         fill={null}
@@ -252,7 +252,7 @@ exports[`pressable-icon test render an inverted pressable icon 1`] = `
         }
       >
         <RNSVGPath
-          d="M3.25 4.25C3.25 3.69772 3.69772 3.25 4.25 3.25H21.75C22.3023 3.25 22.75 3.69772 22.75 4.25V7.16912C22.75 7.43434 22.6446 7.68869 22.4571 7.87623L15.4596 14.8738C15.272 15.0613 15.1667 15.3157 15.1667 15.5809V18.4167L10.8333 22.75V15.5809C10.8333 15.3157 10.728 15.0613 10.5404 14.8738L3.54289 7.87623C3.35536 7.68869 3.25 7.43434 3.25 7.16912V4.25Z"
+          d="M1.25 2.25C1.25 1.69772 1.69772 1.25 2.25 1.25H19.75C20.3023 1.25 20.75 1.69772 20.75 2.25V5.16912C20.75 5.43434 20.6446 5.68869 20.4571 5.87623L13.4596 12.8738C13.272 13.0613 13.1667 13.3157 13.1667 13.5809V16.4167L8.83333 20.75V13.5809C8.83333 13.3157 8.72798 13.0613 8.54044 12.8738L1.54289 5.87623C1.35536 5.68869 1.25 5.43434 1.25 5.16912V2.25Z"
           propList={
             [
               "stroke",
@@ -312,11 +312,11 @@ exports[`pressable-icon test render an inverted pressable icon that is disabled
   >
     <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}
@@ -328,14 +328,14 @@ exports[`pressable-icon test render an inverted pressable icon that is disabled
           },
           {
             "flex": 0,
-            "height": 28,
-            "width": 28,
+            "height": 24,
+            "width": 24,
           },
         ]
       }
-      vbHeight={22}
-      vbWidth={24}
-      width="28"
+      vbHeight={18}
+      vbWidth={17}
+      width={24}
     >
       <RNSVGGroup
         fill={null}
@@ -347,7 +347,7 @@ exports[`pressable-icon test render an inverted pressable icon that is disabled
       >
         <RNSVGPath
           clipRule={0}
-          d="M10.8502 2.2002C10.4146 2.2002 10.0164 2.4356 9.8216 2.80826L8.98946 4.4002H5.1002C4.46507 4.4002 3.9502 4.89268 3.9502 5.5002C3.9502 6.10771 4.46507 6.6002 5.1002 6.6002L5.1002 17.6002C5.1002 18.8152 6.12994 19.8002 7.4002 19.8002H16.6002C17.8705 19.8002 18.9002 18.8152 18.9002 17.6002V6.6002C19.5353 6.6002 20.0502 6.10771 20.0502 5.5002C20.0502 4.89268 19.5353 4.4002 18.9002 4.4002H15.0109L14.1788 2.80826C13.984 2.4356 13.5858 2.2002 13.1502 2.2002H10.8502ZM8.5502 8.8002C8.5502 8.19268 9.06507 7.7002 9.7002 7.7002C10.3353 7.7002 10.8502 8.19268 10.8502 8.8002V15.4002C10.8502 16.0077 10.3353 16.5002 9.7002 16.5002C9.06507 16.5002 8.5502 16.0077 8.5502 15.4002V8.8002ZM14.3002 7.7002C13.6651 7.7002 13.1502 8.19268 13.1502 8.8002V15.4002C13.1502 16.0077 13.6651 16.5002 14.3002 16.5002C14.9353 16.5002 15.4502 16.0077 15.4502 15.4002V8.8002C15.4502 8.19268 14.9353 7.7002 14.3002 7.7002Z"
+          d="M7.34995 0.200012C6.91436 0.200012 6.51616 0.435415 6.32136 0.808077L5.48921 2.40001H1.59995C0.964824 2.40001 0.449951 2.8925 0.449951 3.50001C0.449951 4.10753 0.964824 4.60001 1.59995 4.60001L1.59995 15.6C1.59995 16.815 2.6297 17.8 3.89995 17.8H13.1C14.3702 17.8 15.4 16.815 15.4 15.6V4.60001C16.0351 4.60001 16.55 4.10753 16.55 3.50001C16.55 2.8925 16.0351 2.40001 15.4 2.40001H11.5107L10.6785 0.808077C10.4837 0.435415 10.0855 0.200012 9.64995 0.200012H7.34995ZM5.04995 6.80001C5.04995 6.1925 5.56482 5.70001 6.19995 5.70001C6.83508 5.70001 7.34995 6.1925 7.34995 6.80001V13.4C7.34995 14.0075 6.83508 14.5 6.19995 14.5C5.56482 14.5 5.04995 14.0075 5.04995 13.4V6.80001ZM10.8 5.70001C10.1648 5.70001 9.64995 6.1925 9.64995 6.80001V13.4C9.64995 14.0075 10.1648 14.5 10.8 14.5C11.4351 14.5 11.95 14.0075 11.95 13.4V6.80001C11.95 6.1925 11.4351 5.70001 10.8 5.70001Z"
           fill={4283522924}
           fillRule={0}
           propList={

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

@@ -13,22 +13,22 @@ export const PressableIconPreview = ({}: {}) => {
       }}
     >
       <PressableIcon
-        icon={<Icon.Outline.Mail key={'random'} />}
+        icon={<Icon style={'regular'} name={'mail'} key={'random'} />}
         onPress={() => console.log('Pressed')}
       />
       <PressableIcon
-        icon={<Icon.Solid.Phone key={'test'} />}
+        icon={<Icon style={'regular'} name={'phone'} key={'test'} />}
         inverted={true}
         disabled={true}
         onPress={() => console.log('Pressed')}
       />
       <PressableIcon
-        icon={<Icon.Solid.ChatAlt key={'testen'} />}
+        icon={<Icon style={'solid'} name={'chat-alt'} key={'testen'} />}
         inverted={true}
         onPress={() => console.log('Pressed')}
       />
       <PressableIcon
-        icon={<Icon.Outline.Plus key={'hello'} />}
+        icon={<Icon style={'regular'} name={'plus'} key={'hello'} />}
         disabled={true}
         onPress={() => console.log('Pressed')}
       />

package/src/components/molecules/pressable-icon/pressable-icon.test.js

@@ -6,7 +6,11 @@ import {Icon} from '../../../icons';
 describe('pressable-icon test', () => {
   it('render a default pressable icon', function () {
     const tree = render
-      .create(<PressableIcon icon={<Icon.Outline.ThumbUp key="default" />} />)
+      .create(
+        <PressableIcon
+          icon={<Icon style={'regular'} name={'thumb-up'} key="default" />}
+        />
+      )
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
@@ -14,7 +18,7 @@ describe('pressable-icon test', () => {
     const tree = render
       .create(
         <PressableIcon
-          icon={<Icon.Outline.Mail key="disabled" />}
+          icon={<Icon style={'regular'} name={'mail'} key="disabled" />}
           disabled={true}
         />
       )
@@ -25,7 +29,7 @@ describe('pressable-icon test', () => {
     const tree = render
       .create(
         <PressableIcon
-          icon={<Icon.Outline.Filter key="inverted" />}
+          icon={<Icon style={'regular'} name={'filter'} key="inverted" />}
           inverted={true}
         />
       )
@@ -36,7 +40,7 @@ describe('pressable-icon test', () => {
     const tree = render
       .create(
         <PressableIcon
-          icon={<Icon.Solid.Trash key="disabled inverted" />}
+          icon={<Icon style={'solid'} name={'trash'} key="disabled inverted" />}
           inverted={true}
           disabled={true}
         />

package/src/components/molecules/search-input/__snapshots__/search.test.js.snap

@@ -12,6 +12,10 @@ exports[`test search shows search field 1`] = `
       "borderWidth": 1,
       "flexDirection": "row",
       "overflow": "hidden",
+      "paddingBottom": 8,
+      "paddingLeft": 16,
+      "paddingRight": 16,
+      "paddingTop": 8,
       "width": "100%",
     }
   }
@@ -34,10 +38,6 @@ exports[`test search shows search field 1`] = `
           "fontFamily": "SourceSansPro",
           "fontSize": 16,
           "lineHeight": 20,
-          "paddingBottom": 0,
-          "paddingLeft": 16,
-          "paddingRight": 16,
-          "paddingTop": 0,
         }
       }
     />
@@ -57,20 +57,17 @@ exports[`test search shows search field 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       {
-        "paddingBottom": 7,
-        "paddingLeft": 16,
-        "paddingRight": 16,
-        "paddingTop": 7,
+        "marginLeft": 16,
       }
     }
   >
     <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}
@@ -82,14 +79,14 @@ exports[`test search shows search field 1`] = `
           },
           {
             "flex": 0,
-            "height": 28,
-            "width": 28,
+            "height": 24,
+            "width": 24,
           },
         ]
       }
-      vbHeight={27}
-      vbWidth={27}
-      width="28"
+      vbHeight={23}
+      vbWidth={23}
+      width={24}
     >
       <RNSVGGroup
         fill={null}
@@ -100,7 +97,7 @@ exports[`test search shows search field 1`] = `
         }
       >
         <RNSVGPath
-          d="M23.625 23.625L16.875 16.875M19.125 11.25C19.125 15.5992 15.5992 19.125 11.25 19.125C6.90076 19.125 3.375 15.5992 3.375 11.25C3.375 6.90076 6.90076 3.375 11.25 3.375C15.5992 3.375 19.125 6.90076 19.125 11.25Z"
+          d="M21.625 21.625L14.875 14.875M17.125 9.25C17.125 13.5992 13.5992 17.125 9.25 17.125C4.90076 17.125 1.375 13.5992 1.375 9.25C1.375 4.90076 4.90076 1.375 9.25 1.375C13.5992 1.375 17.125 4.90076 17.125 9.25Z"
           propList={
             [
               "stroke",
@@ -109,7 +106,7 @@ exports[`test search shows search field 1`] = `
               "strokeLinejoin",
             ]
           }
-          stroke={4279837036}
+          stroke={4280232243}
           strokeLinecap={1}
           strokeLinejoin={1}
           strokeWidth="2"

package/src/components/molecules/search-input/search.component.tsx

@@ -5,7 +5,7 @@ import {View, TextInput as NativeTextInput, Pressable} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './search.styles';
 import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
-import {SearchIcon} from '../../../icons/outline/search/search.icon';
+import {Icon} from '../../../icons/index';
 
 type SearchProps = {
   placeholder?: string;
@@ -41,7 +41,11 @@ const Search = ({
         onPress={() => onPressSearch(value)}
         style={styles.iconContainer}
       >
-        <SearchIcon />
+        <Icon
+          style={'regular'}
+          name={'search'}
+          color={context.colors.ui.black}
+        />
       </Pressable>
     </View>
   );

package/src/components/molecules/search-input/search.styles.js

@@ -16,23 +16,20 @@ export const Stylesheet = (context) =>
       backgroundColor: context.colors.ui.white,
       overflow: 'hidden',
       alignItems: 'center',
+      paddingLeft: Scale.m,
+      paddingTop: Scale.xs,
+      paddingRight: Scale.m,
+      paddingBottom: Scale.xs,
     },
     textInputContainer: {
       flex: 1,
     },
     input: {
-      paddingLeft: Scale.m,
-      paddingTop: 0,
-      paddingBottom: 0,
-      paddingRight: Scale.m,
       ...Font.medium,
       lineHeight: 20,
       color: context.colors.ui.black,
     },
     iconContainer: {
-      paddingLeft: Scale.m,
-      paddingTop: Scale.xs - 1,
-      paddingRight: Scale.m,
-      paddingBottom: Scale.xs - 1,
+      marginLeft: Scale.m,
     },
   });