@tactics/toddle-styleguide 1.0.0 → 1.0.2

package/App.tsx

@@ -59,6 +59,10 @@ import {HeadingsPreview} from './src/components/atoms/heading-components/heading
 import {ParagraphComponentsPreview} from './src/components/atoms/paragraph-components/paragraph-components.preview';
 import {MyChildListItemPreview} from './src/components/organisms/my-child-list-item/my-child-list-item.preview';
 import {SelectLinkPreview} from './src/components/molecules/select-link/select-link.preview';
+import {MoreInfoButtonPreview} from './src/components/molecules/more-info-button/more-info-button.preview';
+import {LanguageButtonPreview} from './src/components/molecules/language-button/language-button.preview';
+import {ModalPreview} from './src/components/templates/modal/modal.preview';
+import {LoadingIndicatorPreview} from './src/components/organisms/loading-indicator/loading-indicator.preview';
 
 const Stack = createNativeStackNavigator();
 
@@ -223,6 +227,19 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         title="Select link"
         onPress={() => navigation.push('select-link')}
       />
+      <ReactBtn
+        title="More info button"
+        onPress={() => navigation.push('more-info-button')}
+      />
+      <ReactBtn
+        title="Language button"
+        onPress={() => navigation.push('language-button')}
+      />
+      <ReactBtn title="Modal" onPress={() => navigation.push('modal')} />
+      <ReactBtn
+        title="Loading indicator"
+        onPress={() => navigation.push('loading-indicator')}
+      />
     </ScrollView>
   );
 };
@@ -365,6 +382,16 @@ function App() {
           <Stack.Screen name="select-link">
             {() => <SelectLinkPreview />}
           </Stack.Screen>
+          <Stack.Screen name="more-info-button">
+            {() => <MoreInfoButtonPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="language-button">
+            {() => <LanguageButtonPreview />}
+          </Stack.Screen>
+          <Stack.Screen name="modal">{() => <ModalPreview />}</Stack.Screen>
+          <Stack.Screen name="loading-indicator" options={{headerShown: false}}>
+            {() => <LoadingIndicatorPreview />}
+          </Stack.Screen>
         </Stack.Navigator>
       </NavigationContainer>
     </ThemeCtx.Provider>

package/index.d.ts

@@ -45,6 +45,10 @@ import { AllCapsHeading, Heading1, Heading2, Heading3, Heading4 } from './src/co
 import { Paragraph, SmallText, TinyText } from './src/components/atoms/paragraph-components';
 import { SelectLink } from './src/components/molecules/select-link/select-link.component';
 import { MyChildListItem } from './src/components/organisms/my-child-list-item/my-child-list-item.component';
+import { MoreInfoButton } from './src/components/molecules/more-info-button/more-info-button.component';
+import { LanguageButton } from './src/components/molecules/language-button/language-button.component';
+import { Modal } from './src/components/templates/modal/modal.component';
+import { LoadingIndicator } from './src/components/organisms/loading-indicator/loading-indicator.component';
 import { BubbleAlignment } from './src/types/bubble-alignment.enum';
 import { KeyBoardTypes } from './src/types/keyboard-types.enum';
 import { Size } from './src/types/size.enum';
@@ -53,4 +57,4 @@ import { Initials } from './src/models/initials.model';
 import { ToddleDateTime } from './src/utilities/toddle-datetime/toddle-datetime.class';
 import { ThemeCtx } from './src/context/theme.context';
 import { Scale } from './src/theme/scale/index';
-export { Initials, BubbleAlignment, KeyBoardTypes, Size, Scale, VisualState, ThemeCtx, ToddleDateTime, Avatar, Button, CancelLink, Check, Checkbox, ChildListItem, ContactItem, FilterTab, SplitContainer, ImageBubble, Info, Pill, Popover, PressableIcon, QuickFilter, Search, SelectListItem, Snackbar, Tag, TextBubble, TextInput, TimeTracker, WideButton, Icon, Calendar, IncrementInput, Swipe, Logo, DaySelect, BlockedMessage, DepartmentLogo, ContactRole, Timeline, SelectPicker, CalendarSelect, DateInput, FilterRange, Footer, DefaultSelect, PasswordInput, MessageInput, Heading1, Heading2, Heading3, Heading4, AllCapsHeading, Paragraph, SmallText, TinyText, SelectLink, MyChildListItem, };
+export { Initials, BubbleAlignment, KeyBoardTypes, Size, Scale, VisualState, ThemeCtx, ToddleDateTime, Avatar, Button, CancelLink, Check, Checkbox, ChildListItem, ContactItem, FilterTab, SplitContainer, ImageBubble, Info, Pill, Popover, PressableIcon, QuickFilter, Search, SelectListItem, Snackbar, Tag, TextBubble, TextInput, TimeTracker, WideButton, Icon, Calendar, IncrementInput, Swipe, Logo, DaySelect, BlockedMessage, DepartmentLogo, ContactRole, Timeline, SelectPicker, CalendarSelect, DateInput, FilterRange, Footer, DefaultSelect, PasswordInput, MessageInput, Heading1, Heading2, Heading3, Heading4, AllCapsHeading, Paragraph, SmallText, TinyText, SelectLink, MyChildListItem, MoreInfoButton, LanguageButton, Modal, LoadingIndicator, };

package/index.tsx

@@ -63,6 +63,10 @@ import {
 } from './src/components/atoms/paragraph-components';
 import {SelectLink} from './src/components/molecules/select-link/select-link.component';
 import {MyChildListItem} from './src/components/organisms/my-child-list-item/my-child-list-item.component';
+import {MoreInfoButton} from './src/components/molecules/more-info-button/more-info-button.component';
+import {LanguageButton} from './src/components/molecules/language-button/language-button.component';
+import {Modal} from './src/components/templates/modal/modal.component';
+import {LoadingIndicator} from './src/components/organisms/loading-indicator/loading-indicator.component';
 
 // Exports of enums
 import {BubbleAlignment} from './src/types/bubble-alignment.enum';
@@ -142,4 +146,8 @@ export {
   TinyText,
   SelectLink,
   MyChildListItem,
+  MoreInfoButton,
+  LanguageButton,
+  Modal,
+  LoadingIndicator,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",

package/src/components/{templates/popover/components → atoms}/backdrop/backdrop.component.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {useContext, useMemo} from 'react';
 
-import {ThemeCtx} from '../../../../../context/theme.context';
+import {ThemeCtx} from '../../../context/theme.context';
 import {Animated} from 'react-native';
 import {Stylesheet} from './backdrop.styles';
 

package/src/components/atoms/calendar/__snapshots__/calendar.test.js.snap

@@ -90,11 +90,11 @@ exports[`Test for the calendar component renders a calendar where you can select
         >
           <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}
@@ -106,14 +106,14 @@ exports[`Test for the calendar component renders a calendar where you can select
                 },
                 {
                   "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}
@@ -124,7 +124,7 @@ exports[`Test for the calendar component renders a calendar where you can select
               }
             >
               <RNSVGPath
-                d="M16.875 21.375L9 13.5L16.875 5.625"
+                d="M8.875 17.375L1 9.5L8.875 1.625"
                 propList={
                   [
                     "stroke",
@@ -202,11 +202,11 @@ exports[`Test for the calendar component renders a calendar where you can select
         >
           <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}
@@ -218,14 +218,14 @@ exports[`Test for the calendar component renders a calendar where you can select
                 },
                 {
                   "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}
@@ -236,7 +236,7 @@ exports[`Test for the calendar component renders a calendar where you can select
               }
             >
               <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",
@@ -1424,7 +1424,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Maandag 13 Februari 2023 "
+            accessibilityLabel=" Maandag 13 Februari 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -1444,10 +1444,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "borderColor": "#7B93DB",
-                "borderRadius": 21,
-                "borderStyle": "solid",
-                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -1467,9 +1463,6 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
-                  {
-                    "color": "#7B93DB",
-                  },
                 ]
               }
             >
@@ -2417,7 +2410,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Maandag 27 Februari 2023 "
+            accessibilityLabel="today Maandag 27 Februari 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -2437,6 +2430,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -2456,6 +2453,9 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
+                  {
+                    "color": "#7B93DB",
+                  },
                 ]
               }
             >
@@ -2997,11 +2997,11 @@ exports[`Test for the calendar component renders a calendar where you can select
         >
           <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}
@@ -3013,14 +3013,14 @@ exports[`Test for the calendar component renders a calendar where you can select
                 },
                 {
                   "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}
@@ -3031,7 +3031,7 @@ exports[`Test for the calendar component renders a calendar where you can select
               }
             >
               <RNSVGPath
-                d="M16.875 21.375L9 13.5L16.875 5.625"
+                d="M8.875 17.375L1 9.5L8.875 1.625"
                 propList={
                   [
                     "stroke",
@@ -3109,11 +3109,11 @@ exports[`Test for the calendar component renders a calendar where you can select
         >
           <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}
@@ -3125,14 +3125,14 @@ exports[`Test for the calendar component renders a calendar where you can select
                 },
                 {
                   "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}
@@ -3143,7 +3143,7 @@ exports[`Test for the calendar component renders a calendar where you can select
               }
             >
               <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",
@@ -4355,8 +4355,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Maandag 13 Februari 2023 "
-            accessibilityRole="button"
+            accessibilityLabel=" Maandag 13 Februari 2023 "
             accessibilityState={
               {
                 "disabled": false,
@@ -4375,10 +4374,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "borderColor": "#7B93DB",
-                "borderRadius": 21,
-                "borderStyle": "solid",
-                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -4399,7 +4394,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#7B93DB",
+                    "color": "#9AA5B1",
                   },
                 ]
               }
@@ -5374,7 +5369,8 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Maandag 27 Februari 2023 "
+            accessibilityLabel="today Maandag 27 Februari 2023 "
+            accessibilityRole="button"
             accessibilityState={
               {
                 "disabled": false,
@@ -5393,6 +5389,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -5413,7 +5413,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#9AA5B1",
+                    "color": "#7B93DB",
                   },
                 ]
               }

package/src/components/atoms/calendar/calendar.component.tsx

@@ -89,8 +89,10 @@ export const Calendar = ({
       firstDay={1}
       enableSwipeMonths={true}
       renderArrow={(direction) => {
-        if (direction === 'left') return <Icon.Outline.ChevronLeft />;
-        if (direction === 'right') return <Icon.Outline.ChevronRight />;
+        if (direction === 'left')
+          return <Icon style={'regular'} name={'chevron-left'} />;
+        if (direction === 'right')
+          return <Icon style={'regular'} name={'chevron-right'} />;
       }}
     />
   );

package/src/components/atoms/footer/__snapshots__/footer.test.js.snap

@@ -20,11 +20,11 @@ exports[`test footer renders footer correctly 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}
@@ -36,14 +36,14 @@ exports[`test footer renders footer correctly 1`] = `
         },
         {
           "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}
@@ -54,7 +54,7 @@ exports[`test footer renders footer correctly 1`] = `
       }
     >
       <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/atoms/increment-input/__snapshots__/increment-input.test.js.snap

@@ -36,11 +36,11 @@ exports[`Increment input test renders an increment input component 1`] = `
   >
     <RNSVGSvgView
       align="xMidYMid"
-      bbHeight={26}
-      bbWidth={26}
+      bbHeight={18}
+      bbWidth={18}
       fill="none"
       focusable={false}
-      height={26}
+      height={18}
       meetOrSlice={0}
       minX={0}
       minY={0}
@@ -52,14 +52,14 @@ exports[`Increment input test renders an increment input component 1`] = `
           },
           {
             "flex": 0,
-            "height": 26,
-            "width": 26,
+            "height": 18,
+            "width": 18,
           },
         ]
       }
-      vbHeight={26}
-      vbWidth={26}
-      width={26}
+      vbHeight={3}
+      vbWidth={16}
+      width={18}
     >
       <RNSVGGroup
         fill={null}
@@ -70,7 +70,7 @@ exports[`Increment input test renders an increment input component 1`] = `
         }
       >
         <RNSVGPath
-          d="M19.4006 13H6.60059"
+          d="M14.5 1.5H1.5"
           propList={
             [
               "stroke",
@@ -158,11 +158,11 @@ exports[`Increment input test renders an increment input component 1`] = `
   >
     <RNSVGSvgView
       align="xMidYMid"
-      bbHeight={26}
-      bbWidth={26}
+      bbHeight={18}
+      bbWidth={18}
       fill="none"
       focusable={false}
-      height={26}
+      height={18}
       meetOrSlice={0}
       minX={0}
       minY={0}
@@ -174,14 +174,14 @@ exports[`Increment input test renders an increment input component 1`] = `
           },
           {
             "flex": 0,
-            "height": 26,
-            "width": 26,
+            "height": 18,
+            "width": 18,
           },
         ]
       }
-      vbHeight={27}
-      vbWidth={27}
-      width={26}
+      vbHeight={17}
+      vbWidth={17}
+      width={18}
     >
       <RNSVGGroup
         fill={null}
@@ -192,7 +192,7 @@ exports[`Increment input test renders an increment input component 1`] = `
         }
       >
         <RNSVGPath
-          d="M13.5 6.75V13.5M13.5 13.5V20.25M13.5 13.5H20.25M13.5 13.5L6.75 13.5"
+          d="M8.5 1.75V8.5M8.5 8.5V15.25M8.5 8.5H15.25M8.5 8.5L1.75 8.5"
           propList={
             [
               "stroke",

package/src/components/atoms/increment-input/increment-input.component.tsx

@@ -38,7 +38,12 @@ export const IncrementInput = ({
   return (
     <View style={styles.container}>
       <Pressable onPress={decrement} style={styles.buttonContainer}>
-        <Icon.Outline.MinusSm color={context.colors.ui.white} size={26} />
+        <Icon
+          style={'regular'}
+          name={'minus-sm'}
+          size={18}
+          color={context.colors.ui.white}
+        />
       </Pressable>
       <View style={styles.numberContainer}>
         <Paragraph textAlign={'center'} addStyle={styles.number}>
@@ -46,7 +51,12 @@ export const IncrementInput = ({
         </Paragraph>
       </View>
       <Pressable onPress={increment} style={styles.buttonContainer}>
-        <Icon.Outline.PlusSm color={context.colors.ui.white} size={26} />
+        <Icon
+          style={'regular'}
+          name={'plus-sm'}
+          size={18}
+          color={context.colors.ui.white}
+        />
       </Pressable>
     </View>
   );