@tactics/toddle-styleguide 0.0.1

package/src/icons/outline/search/search.icon.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconType} from '../../../types/icontype.type';
+
+export const SearchIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width="28" height="28" viewBox="0 0 27 27" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        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"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/selector/selector.icon.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconType} from '../../../types/icontype.type';
+
+export const SelectorIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width="28" height="28" viewBox="0 0 26 27" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M8.66663 10.125L13 5.625L17.3333 10.125M17.3333 16.875L13 21.375L8.66663 16.875"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/sm-view-grid-add/sm-view-grid-add.icon.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconType} from '../../../types/icontype.type';
+
+export const SmViewGridAddIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width="28" height="28" viewBox="0 0 26 26" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M18.4163 15.1663V21.6663M15.1663 18.4163H21.6663M6.49967 10.833H8.66634C9.86296 10.833 10.833 9.86296 10.833 8.66634V6.49967C10.833 5.30306 9.86296 4.33301 8.66634 4.33301H6.49967C5.30306 4.33301 4.33301 5.30306 4.33301 6.49967V8.66634C4.33301 9.86296 5.30306 10.833 6.49967 10.833ZM17.333 10.833H19.4997C20.6963 10.833 21.6663 9.86296 21.6663 8.66634V6.49967C21.6663 5.30306 20.6963 4.33301 19.4997 4.33301H17.333C16.1364 4.33301 15.1663 5.30306 15.1663 6.49967V8.66634C15.1663 9.86296 16.1364 10.833 17.333 10.833ZM6.49967 21.6663H8.66634C9.86296 21.6663 10.833 20.6963 10.833 19.4997V17.333C10.833 16.1364 9.86296 15.1663 8.66634 15.1663H6.49967C5.30306 15.1663 4.33301 16.1364 4.33301 17.333V19.4997C4.33301 20.6963 5.30306 21.6663 6.49967 21.6663Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/status-online/status-online.icon.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconType} from '../../../types/icontype.type';
+
+export const StatusOnlineIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width="28" height="28" viewBox="0 0 27 27" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M6.34054 20.6595C2.38649 16.7054 2.38649 10.2946 6.34054 6.34058M20.6595 6.34058C24.6135 10.2946 24.6135 16.7054 20.6595 20.6595M9.52252 17.4775C7.32582 15.2808 7.32582 11.7193 9.52252 9.52256M17.4775 9.52256C19.6742 11.7193 19.6742 15.2808 17.4775 17.4775M14.625 13.5C14.625 14.1214 14.1213 14.625 13.5 14.625C12.8787 14.625 12.375 14.1214 12.375 13.5C12.375 12.8787 12.8787 12.375 13.5 12.375C14.1213 12.375 14.625 12.8787 14.625 13.5Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/thumb-up/thumb-up.icon.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconType} from '../../../types/icontype.type';
+
+export const ThumbUpIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width="28" height="28" viewBox="0 0 27 27" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        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"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/trash/trash.icon.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconType} from '../../../types/icontype.type';
+
+export const TrashIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width="28" height="28" viewBox="0 0 28 28" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M21.875 8.375L20.8993 22.0353C20.8152 23.2127 19.8354 24.125 18.655 24.125H9.34502C8.16458 24.125 7.18484 23.2127 7.10074 22.0353L6.125 8.375M11.75 12.875V19.625M16.25 12.875V19.625M17.375 8.375V5C17.375 4.37868 16.8713 3.875 16.25 3.875H11.75C11.1287 3.875 10.625 4.37868 10.625 5V8.375M5 8.375H23"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/user/user.icon.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconType} from '../../../types/icontype.type';
+
+export const UserIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width="28" height="28" viewBox="0 0 27 27" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M18 7.875C18 10.3603 15.9853 12.375 13.5 12.375C11.0147 12.375 9 10.3603 9 7.875C9 5.38972 11.0147 3.375 13.5 3.375C15.9853 3.375 18 5.38972 18 7.875Z"
+      />
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M13.5 15.75C9.15076 15.75 5.625 19.2758 5.625 23.625H21.375C21.375 19.2758 17.8492 15.75 13.5 15.75Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/user-group/user-group.icon.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconType} from '../../../types/icontype.type';
+
+export const UserGroupIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width="28" height="28" viewBox="0 0 27 27" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M19.125 22.5H24.75V20.25C24.75 18.386 23.239 16.875 21.375 16.875C20.2999 16.875 19.3423 17.3776 18.7242 18.1608M19.125 22.5H7.875M19.125 22.5V20.25C19.125 19.5117 18.9828 18.8067 18.7242 18.1608M7.875 22.5H2.25V20.25C2.25 18.386 3.76104 16.875 5.625 16.875C6.70006 16.875 7.65772 17.3776 8.27578 18.1608M7.875 22.5V20.25C7.875 19.5117 8.01723 18.8067 8.27578 18.1608M8.27578 18.1608C9.10519 16.0887 11.1317 14.625 13.5 14.625C15.8683 14.625 17.8948 16.0887 18.7242 18.1608M16.875 7.875C16.875 9.73896 15.364 11.25 13.5 11.25C11.636 11.25 10.125 9.73896 10.125 7.875C10.125 6.01104 11.636 4.5 13.5 4.5C15.364 4.5 16.875 6.01104 16.875 7.875ZM23.625 11.25C23.625 12.4926 22.6176 13.5 21.375 13.5C20.1324 13.5 19.125 12.4926 19.125 11.25C19.125 10.0074 20.1324 9 21.375 9C22.6176 9 23.625 10.0074 23.625 11.25ZM7.875 11.25C7.875 12.4926 6.86764 13.5 5.625 13.5C4.38236 13.5 3.375 12.4926 3.375 11.25C3.375 10.0074 4.38236 9 5.625 9C6.86764 9 7.875 10.0074 7.875 11.25Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/outline/users/users.icon.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconType} from '../../../types/icontype.type';
+
+export const UsersIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <Svg width="28" height="28" viewBox="0 0 32 32" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M16 5.80557C16.9773 4.69834 18.4071 4 20 4C22.9455 4 25.3333 6.38781 25.3333 9.33333C25.3333 12.2789 22.9455 14.6667 20 14.6667C18.4071 14.6667 16.9773 13.9683 16 12.8611M20 28H4V26.6667C4 22.2484 7.58172 18.6667 12 18.6667C16.4183 18.6667 20 22.2484 20 26.6667V28ZM20 28H28V26.6667C28 22.2484 24.4183 18.6667 20 18.6667C18.5429 18.6667 17.1767 19.0562 16 19.7369M17.3333 9.33333C17.3333 12.2789 14.9455 14.6667 12 14.6667C9.05448 14.6667 6.66667 12.2789 6.66667 9.33333C6.66667 6.38781 9.05448 4 12 4C14.9455 4 17.3333 6.38781 17.3333 9.33333Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/solid/chat-alt/chat-alt-solid.icon.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconType} from '../../../types/icontype.type';
+
+export const ChatAltIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+
+  return (
+    <Svg width="28" height="28" viewBox="0 0 32 32" fill="none">
+      <Path
+        fill={color ? color : context.colors.main['0']}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M28.2428 7.9998V20.7998C28.2428 22.5671 26.8724 23.9998 25.1819 23.9998H17.5298L9.8776 30.3998V23.9998H6.81673C5.12626 23.9998 3.75586 22.5671 3.75586 20.7998V7.9998C3.75586 6.23249 5.12626 4.7998 6.81673 4.7998H25.1819C26.8724 4.7998 28.2428 6.23249 28.2428 7.9998ZM11.408 12.7998H8.34716V15.9998H11.408V12.7998ZM14.4689 12.7998H17.5298V15.9998H14.4689V12.7998ZM23.6515 12.7998H20.5906V15.9998H23.6515V12.7998Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/solid/clock/clock-solid.icon.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconType} from '../../../types/icontype.type';
+
+export const ClockIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+
+  return (
+    <Svg width="28" height="28" viewBox="0 0 22 22" fill="none">
+      <Path
+        fill={color ? color : context.colors.main['0']}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11 19.8C15.8601 19.8 19.7999 15.8601 19.7999 11C19.7999 6.13991 15.8601 2.20001 11 2.20001C6.13985 2.20001 2.19995 6.13991 2.19995 11C2.19995 15.8601 6.13985 19.8 11 19.8ZM12 6.60001C12 6.04773 11.5522 5.60001 11 5.60001C10.4477 5.60001 9.99995 6.04773 9.99995 6.60001V11C9.99995 11.2652 10.1053 11.5196 10.2928 11.7071L13.4041 14.8184C13.7946 15.2089 14.4278 15.2089 14.8183 14.8184C15.2089 14.4279 15.2089 13.7947 14.8183 13.4042L12 10.5858V6.60001Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/solid/information-circle/information-circle-solid.icon.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconType} from '../../../types/icontype.type';
+
+export const InformationCircleIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+
+  return (
+    <Svg width="28" height="28" viewBox="0 0 22 22" fill="none">
+      <Path
+        fill={color ? color : context.colors.main['0']}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M19.7999 11C19.7999 15.8601 15.8601 19.8 11 19.8C6.13985 19.8 2.19995 15.8601 2.19995 11C2.19995 6.13991 6.13985 2.20001 11 2.20001C15.8601 2.20001 19.7999 6.13991 19.7999 11ZM12.1 6.60001C12.1 7.20752 11.6075 7.70001 11 7.70001C10.3924 7.70001 9.89995 7.20752 9.89995 6.60001C9.89995 5.9925 10.3924 5.50001 11 5.50001C11.6075 5.50001 12.1 5.9925 12.1 6.60001ZM9.89995 9.90001C9.29244 9.90001 8.79995 10.3925 8.79995 11C8.79995 11.6075 9.29244 12.1 9.89995 12.1V15.4C9.89995 16.0075 10.3924 16.5 11 16.5H12.1C12.7075 16.5 13.2 16.0075 13.2 15.4C13.2 14.7925 12.7075 14.3 12.1 14.3V11C12.1 10.3925 11.6075 9.90001 11 9.90001H9.89995Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/solid/pencil/pencil-solid.icon.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconType} from '../../../types/icontype.type';
+
+export const PencilIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+
+  return (
+    <Svg width="28" height="28" viewBox="0 0 23 23" fill="none">
+      <Path
+        fill={color ? color : context.colors.main['0']}
+        d="M15.4442 4.12385C16.3033 3.22564 17.6963 3.22564 18.5554 4.12385C19.4146 5.02206 19.4146 6.47833 18.5554 7.37654L17.6833 8.28837L14.572 5.03568L15.4442 4.12385Z"
+      />
+      <Path
+        fill={color ? color : context.colors.main['0']}
+        d="M13.0164 6.66202L3.7998 16.2975V19.5502H6.91107L16.1276 9.91471L13.0164 6.66202Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/solid/phone/phone-solid.icon.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconType} from '../../../types/icontype.type';
+
+export const PhoneIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+
+  return (
+    <Svg width="28" height="28" viewBox="0 0 22 22" fill="none">
+      <Path
+        fill={color ? color : context.colors.main['0']}
+        d="M2.19995 3.30001C2.19995 2.6925 2.69244 2.20001 3.29995 2.20001H5.66811C6.20583 2.20001 6.66474 2.58877 6.75314 3.11917L7.56639 7.99863C7.64578 8.47497 7.40521 8.94738 6.97329 9.16334L5.27034 10.0148C6.49827 13.0662 8.9338 15.5017 11.9851 16.7296L12.8366 15.0267C13.0526 14.5947 13.525 14.3542 14.0013 14.4336L18.8808 15.2468C19.4112 15.3352 19.7999 15.7941 19.7999 16.3319V18.7C19.7999 19.3075 19.3075 19.8 18.6999 19.8H16.5C8.60228 19.8 2.19995 13.3977 2.19995 5.50001V3.30001Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/solid/refresh/refresh-solid.icon.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconType} from '../../../types/icontype.type';
+
+export const RefreshIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+
+  return (
+    <Svg width="28" height="28" viewBox="0 0 22 22" fill="none">
+      <Path
+        fill={color ? color : context.colors.main['0']}
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M4.40005 2.20001C5.00756 2.20001 5.50005 2.6925 5.50005 3.30001V5.61139C6.89715 4.18539 8.84462 3.30001 11 3.30001C14.3544 3.30001 17.2051 5.44426 18.2616 8.43344C18.4641 9.00623 18.1639 9.63468 17.5911 9.83714C17.0183 10.0396 16.3898 9.73937 16.1874 9.16658C15.4318 7.02891 13.3931 5.50001 11 5.50001C9.20162 5.50001 7.60329 6.36353 6.59934 7.70001H9.90005C10.5076 7.70001 11 8.1925 11 8.80001C11 9.40752 10.5076 9.90001 9.90005 9.90001H4.40005C3.79254 9.90001 3.30005 9.40752 3.30005 8.80001V3.30001C3.30005 2.6925 3.79254 2.20001 4.40005 2.20001ZM4.40903 12.1629C4.98182 11.9604 5.61027 12.2607 5.81273 12.8334C6.56828 14.9711 8.60703 16.5 11 16.5C12.7985 16.5 14.3968 15.6365 15.4008 14.3L12.1 14.3C11.4925 14.3 11 13.8075 11 13.2C11 12.5925 11.4925 12.1 12.1 12.1H17.6C17.8918 12.1 18.1716 12.2159 18.3779 12.4222C18.5842 12.6285 18.7 12.9083 18.7 13.2V18.7C18.7 19.3075 18.2076 19.8 17.6 19.8C16.9925 19.8 16.5 19.3075 16.5 18.7V16.3886C15.1029 17.8146 13.1555 18.7 11 18.7C7.6457 18.7 4.795 16.5558 3.73848 13.5666C3.53603 12.9938 3.83624 12.3653 4.40903 12.1629Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/solid/solid.preview.tsx

@@ -0,0 +1,73 @@
+import React, {useContext} from 'react';
+import {View} from 'react-native';
+import {Icon} from '..';
+import {ThemeCtx} from '../../context/theme.context';
+
+export const IconSolidPreview = ({}: {}) => {
+  const Context = useContext(ThemeCtx);
+  const greyColor = Context.colors.ui.darkgrey;
+  const whiteColor = Context.colors.ui.white;
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        padding: 20,
+        flexDirection: 'row',
+        alignContent: 'center',
+      }}
+    >
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'space-around',
+          backgroundColor: Context.colors.main['0'],
+        }}
+      >
+        <Icon.Solid.ChatAlt color={whiteColor} />
+        <Icon.Solid.Clock color={whiteColor} />
+        <Icon.Solid.InformationCircle color={whiteColor} />
+        <Icon.Solid.Pencil color={whiteColor} />
+        <Icon.Solid.Phone color={whiteColor} />
+        <Icon.Solid.Refresh color={whiteColor} />
+        <Icon.Solid.Trash color={whiteColor} />
+        <Icon.Solid.StatusOnline color={whiteColor} />
+      </View>
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'space-around',
+          backgroundColor: Context.colors.ui.lightgrey,
+        }}
+      >
+        <Icon.Solid.ChatAlt color={greyColor} />
+        <Icon.Solid.Clock color={greyColor} />
+        <Icon.Solid.InformationCircle color={greyColor} />
+        <Icon.Solid.Pencil color={greyColor} />
+        <Icon.Solid.Phone color={greyColor} />
+        <Icon.Solid.Refresh color={greyColor} />
+        <Icon.Solid.Trash color={greyColor} />
+        <Icon.Solid.StatusOnline color={greyColor} />
+      </View>
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'space-around',
+          backgroundColor: Context.colors.main['9'],
+        }}
+      >
+        <Icon.Solid.ChatAlt />
+        <Icon.Solid.Clock />
+        <Icon.Solid.InformationCircle />
+        <Icon.Solid.Pencil />
+        <Icon.Solid.Phone />
+        <Icon.Solid.Refresh />
+        <Icon.Solid.Trash />
+        <Icon.Solid.StatusOnline />
+      </View>
+    </View>
+  );
+};

package/src/icons/solid/solid.tsx

@@ -0,0 +1,19 @@
+import {ChatAltIcon as ChatAlt} from './chat-alt/chat-alt-solid.icon';
+import {ClockIcon as Clock} from './clock/clock-solid.icon';
+import {InformationCircleIcon as InformationCircle} from './information-circle/information-circle-solid.icon';
+import {PencilIcon as Pencil} from './pencil/pencil-solid.icon';
+import {PhoneIcon as Phone} from './phone/phone-solid.icon';
+import {RefreshIcon as Refresh} from './refresh/refresh-solid.icon';
+import {StatusOnlineIcon as StatusOnline} from './status-online/status-online-solid.icon';
+import {TrashIcon as Trash} from './trash/trash-solid.icon';
+
+export const Solid = {
+  ChatAlt,
+  Clock,
+  InformationCircle,
+  Pencil,
+  Phone,
+  Refresh,
+  StatusOnline,
+  Trash,
+};

package/src/icons/solid/status-online/status-online-solid.icon.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconType} from '../../../types/icontype.type';
+
+export const StatusOnlineIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+
+  return (
+    <Svg width="28" height="28" viewBox="0 0 62 62" fill="none">
+      <Path
+        stroke={color ? color : context.colors.main['0']}
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        fill={color ? color : context.colors.main['0']}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.6564 11.2713C16.867 12.4819 16.867 14.4447 15.6564 15.6553C7.18199 24.1297 7.18199 37.8694 15.6564 46.3438C16.867 47.5544 16.867 49.5172 15.6564 50.7278C14.4457 51.9384 12.4829 51.9384 11.2723 50.7278C0.376679 39.8322 0.37668 22.1669 11.2723 11.2712C12.4829 10.0606 14.4457 10.0606 15.6564 11.2713ZM46.3448 11.272C47.5555 10.0613 49.5183 10.0613 50.7289 11.272C61.6245 22.1676 61.6245 39.8329 50.7289 50.7285C49.5183 51.9392 47.5555 51.9392 46.3448 50.7285C45.1342 49.5179 45.1342 47.5551 46.3448 46.3445C54.8192 37.8701 54.8192 24.1304 46.3448 15.656C45.1342 14.4454 45.1342 12.4826 46.3448 11.272ZM24.4245 20.0394C25.6351 21.25 25.6351 23.2128 24.4245 24.4234C20.7926 28.0553 20.7926 33.9437 24.4245 37.5756C25.6351 38.7863 25.6351 40.7491 24.4245 41.9597C23.2139 43.1703 21.2511 43.1703 20.0404 41.9597C13.9873 35.9066 13.9873 26.0925 20.0404 20.0394C21.2511 18.8288 23.2139 18.8288 24.4245 20.0394ZM37.5767 20.0401C38.7873 18.8295 40.7501 18.8295 41.9608 20.0401C48.0139 26.0932 48.0139 35.9073 41.9608 41.9604C40.7501 43.171 38.7873 43.171 37.5767 41.9604C36.3661 40.7498 36.3661 38.787 37.5767 37.5763C41.2086 33.9445 41.2086 28.056 37.5767 24.4242C36.3661 23.2135 36.3661 21.2507 37.5767 20.0401ZM31.0006 27.9002C32.7127 27.9002 34.1006 29.2882 34.1006 31.0002V31.0312C34.1006 32.7433 32.7127 34.1312 31.0006 34.1312C29.2885 34.1312 27.9006 32.7433 27.9006 31.0312V31.0002C27.9006 29.2882 29.2885 27.9002 31.0006 27.9002Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/solid/trash/trash-solid.icon.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import Svg, {Path} from 'react-native-svg';
+import {ThemeCtx} from '../../../context/theme.context';
+import {IconType} from '../../../types/icontype.type';
+
+export const TrashIcon = ({color}: IconType) => {
+  const context = useContext(ThemeCtx);
+
+  return (
+    <Svg width="28" height="28" viewBox="0 0 24 22" fill="none">
+      <Path
+        fill={color ? color : context.colors.main['0']}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
+      />
+    </Svg>
+  );
+};

package/src/models/hex-color.model.ts

@@ -0,0 +1,25 @@
+export class HexColor {
+  private readonly color: string;
+
+  private constructor(value: string) {
+    if (value.charAt(0) !== '#') {
+      throw new Error('A hex color needs to start with #');
+    }
+
+    if (value.length !== 7) {
+      throw new Error(
+        "A hex color needs to contain 7 chars, we don't support shorthand values."
+      );
+    }
+
+    this.color = value;
+  }
+
+  public static of(color: string): HexColor {
+    return new HexColor(color);
+  }
+
+  public toString(): string {
+    return this.color;
+  }
+}

package/src/models/hex-color.test.js

@@ -0,0 +1,20 @@
+import {HexColor} from './hex-color.model';
+
+describe('invalid hex-color', () => {
+  const cases = [['#333'], ['aaaaaaa']];
+
+  test.each(cases)('given %p returns an Error', (value) => {
+    expect(() => {
+      HexColor.of(value);
+    }).toThrow(Error);
+  });
+});
+
+describe('valid hex-color', () => {
+  const cases = [['#333333'], ['#FFFFFF']];
+
+  test.each(cases)('given %p returns a HexColor', (value) => {
+    const result = HexColor.of(value);
+    expect(result instanceof HexColor).toBe(true);
+  });
+});

package/src/models/initials.model.ts

@@ -0,0 +1,32 @@
+export class Initials {
+  private readonly initials: string;
+
+  private constructor(value: string) {
+    if (value.length !== 2) {
+      throw new Error('An initial can only contain 2 characters');
+    }
+    this.initials = value;
+  }
+
+  public static for(first: string, second: string): Initials {
+    let longestWord = second.split(' ').reduce(function (longest, currentWord) {
+      return currentWord.length >= longest.length ? currentWord : longest;
+    }, '');
+
+    return new Initials(this.safeLetter(first) + this.safeLetter(longestWord));
+  }
+
+  private static safeLetter(word: string): string {
+    for (let i = 0; i < word.length; i++) {
+      if (word.charAt(0).match(/[a-z]/i)) {
+        return word.charAt(0).toUpperCase();
+      }
+      word = word.slice(1);
+    }
+    return '?';
+  }
+
+  public toString(): string {
+    return this.initials;
+  }
+}

package/src/models/initials.test.js

@@ -0,0 +1,23 @@
+import {Initials} from './initials.model';
+
+describe('initials', () => {
+  const cases = [
+    ['Jane', 'Doe', 'JD'],
+    ['Patrick', "O'Neill", 'PO'],
+    ['Eric', 'Ogden Ellis', 'EE'],
+    ['Dennis', 'Roth', 'DR'],
+    ['Angela', 'Hackshaw', 'AH'],
+    ['Jack', 'Coxon Hanwell', 'JH'],
+    ['Fay', 'Simmons', 'FS'],
+    ['Charlotte', 'Brooks', 'CB'],
+    ["''''", "''''", '??'],
+  ];
+
+  test.each(cases)(
+    'given %p and %p as arguments, returns %p',
+    (first, second, expectedResult) => {
+      const result = Initials.for(first, second);
+      expect(result.toString()).toEqual(expectedResult);
+    }
+  );
+});

package/src/theme/font/font.ts

@@ -0,0 +1,72 @@
+export const Font = {
+  huge: {
+    fontFamily: 'SourceSansPro',
+    fontSize: 38,
+    lineHeight: 47.8,
+  },
+  hugeBold: {
+    fontFamily: 'SourceSansProBold',
+    fontSize: 38,
+    lineHeight: 47.8,
+  },
+  big: {
+    fontFamily: 'SourceSansPro',
+    fontSize: 24,
+    lineHeight: 30.2,
+  },
+  bigBold: {
+    fontFamily: 'SourceSansProBold',
+    fontSize: 24,
+    lineHeight: 30.2,
+  },
+  large: {
+    fontFamily: 'SourceSansPro',
+    fontSize: 18,
+    lineHeight: 22.6,
+  },
+  largeBold: {
+    fontFamily: 'SourceSansProBold',
+    fontSize: 18,
+    lineHeight: 22.6,
+  },
+  medium: {
+    fontFamily: 'SourceSansPro',
+    fontSize: 16,
+    lineHeight: 22.4,
+  },
+  mediumBold: {
+    fontFamily: 'SourceSansProBold',
+    fontSize: 16,
+    lineHeight: 22.4,
+  },
+  regular: {
+    fontFamily: 'Montserrat',
+    fontSize: 14,
+    lineHeight: 22.4,
+  },
+  regularBold: {
+    fontFamily: 'MontserratBold',
+    fontSize: 14,
+    lineHeight: 22.4,
+  },
+  small: {
+    fontFamily: 'Montserrat',
+    fontSize: 13,
+    lineHeight: 20.4,
+  },
+  smallBold: {
+    fontFamily: 'MontserratBold',
+    fontSize: 13,
+    lineHeight: 20.4,
+  },
+  tiny: {
+    fontFamily: 'Montserrat',
+    fontSize: 11,
+    lineHeight: 17.9,
+  },
+  tinyBold: {
+    fontFamily: 'MontserratBold',
+    fontSize: 11,
+    lineHeight: 17.9,
+  },
+};