@herca/rn-kit 0.1.25 → 0.1.26

package/src/Badge/Badge.tsx

@@ -2,9 +2,8 @@ import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import Color from '../Color/Color';
 import Typography from '../Typography/Typography';
-import type { TypographyVariantProps } from '../Typography/type';
 import { hexToRGBA } from '../helpers/hexToRgba';
-import type { HexColor, Size, Variant } from './type';
+import type { HexColor, Size, SizeStyle, Variant } from './type';
 
 interface BadgeProps {
   value?: string | number | React.ReactNode;
@@ -26,14 +25,6 @@ const COLORS: Record<Variant, { background: string; fontColor: string }> = {
   purple: { background: Color.purple[50], fontColor: Color.purple[500] },
 };
 
-interface SizeStyle {
-  height: number;
-  fontSize: TypographyVariantProps;
-  paddingHorizontal: number;
-  paddingVertical: number;
-  borderRadius: number;
-}
-
 const SIZE_MAP: Record<Size, SizeStyle> = {
   small: {
     height: 18,

package/src/Badge/type.tsx

@@ -1,3 +1,5 @@
+import type { TypographyVariantProps } from '../Typography/type';
+
 type Variant =
   | 'default'
   | 'primary'
@@ -12,3 +14,11 @@ type Size = 'small' | 'medium';
 type HexColor = `#${string}`;
 
 export type { Variant, Size, HexColor };
+
+export interface SizeStyle {
+  height: number;
+  fontSize: TypographyVariantProps;
+  paddingHorizontal: number;
+  paddingVertical: number;
+  borderRadius: number;
+}

package/src/Icon/Icon.tsx

@@ -46,6 +46,16 @@ import ClipBoardListCheckOutline from './icons/ClipBoardListCheckOutline';
 import Box from './icons/Box';
 import Minus from './icons/Minus';
 import PlusSquare from './icons/PlusSquare';
+import AtSign from './icons/AtSign';
+import BriefCaseOutline from './icons/BriefcaseOutline';
+import EditSquareOutline from './icons/Edit';
+import GlobeEarth from './icons/GlobeEarth';
+import LockFill from './icons/LockFill';
+import LogoHercaHris from './icons/LogoHercaHris';
+import QuestionCircleOutline from './icons/QuestionCircleOutline';
+import ShieldFill from './icons/ShieldFill';
+import Users from './icons/Users';
+import WhatsAppFill from './icons/WhatsappFill';
 
 const icons: Record<
   IconNameProps,
@@ -96,6 +106,16 @@ const icons: Record<
   'clipboard-list-check-outline': ClipBoardListCheckOutline,
   'Box': Box,
   'plus-square': PlusSquare,
+  'at-sign': AtSign,
+  'briefcase-outline': BriefCaseOutline,
+  'edit-square-outline': EditSquareOutline,
+  'globe-earth': GlobeEarth,
+  'lock-fill': LockFill,
+  'logo-herca-hris': LogoHercaHris,
+  'question-circle-outline': QuestionCircleOutline,
+  'shield-fill': ShieldFill,
+  'Users': Users,
+  'whatsapp-fill': WhatsAppFill,
 };
 
 const Icon: React.FC<IconProps> = ({

package/src/Icon/README.md

@@ -46,31 +46,31 @@ export default function App() {
 
 ## Daftar Icon
 
-- AirPlane  
-- ArrowBackAlt  
-- ArrowDown  
-- ArrowForwardAlt  
-- ArrowLeft  
-- ArrowRight  
-- ArrowUp  
-- Camera  
-- Calendar  
-- Check  
-- Document  
-- Download  
-- Eye  
-- EyeOpen  
-- ExclamationMark  
-- Filter  
-- Home  
-- Image  
-- Pdf  
-- RadioButton  
-- Search  
-- StickyNote  
-- Times  
-- User  
-- x-circle  
+- AirPlane
+- ArrowBackAlt
+- ArrowDown
+- ArrowForwardAlt
+- ArrowLeft
+- ArrowRight
+- ArrowUp
+- Camera
+- Calendar
+- Check
+- Document
+- Download
+- Eye
+- EyeOpen
+- ExclamationMark
+- Filter
+- Home
+- Image
+- Pdf
+- RadioButton
+- Search
+- StickyNote
+- Times
+- User
+- x-circle
 - Plus
 - Bell
 - file-list-check
@@ -89,4 +89,14 @@ export default function App() {
 - Clock
 - clock-outline
 - box-outline
-- Box
+- Box
+- at-sign
+- briefcase-outline
+- edit-square-outline
+- globe-earth
+- lock-fill
+- logo-herca-hris
+- question-circle-outline
+- shield-fill
+- Users
+- whatsapp-fill

package/src/Icon/icons/AtSign.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const AtSign: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style}>
+    <Path
+      d="M12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C12.553 22 13 21.552 13 21C13 20.448 12.553 20 12 20C7.589 20 4 16.411 4 12C4 7.589 7.589 4 12 4C16.411 4 20 7.589 20 12C20 13.486 18.99 15 18 15C17.075 15 16.5 14.234 16.5 13V8.5C16.5 7.948 16.053 7.5 15.5 7.5C15.021 7.5 14.64 7.84299 14.542 8.29199C13.818 7.79399 12.943 7.5 12 7.5C9.519 7.5 7.5 9.519 7.5 12C7.5 14.481 9.519 16.5 12 16.5C13.186 16.5 14.258 16.03 15.063 15.278C15.729 16.441 16.887 17 18 17C20.357 17 22 14.365 22 12C22 6.486 17.514 2 12 2ZM12 14.5C10.621 14.5 9.5 13.378 9.5 12C9.5 10.622 10.621 9.5 12 9.5C13.379 9.5 14.5 10.622 14.5 12C14.5 13.378 13.379 14.5 12 14.5Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default AtSign;

package/src/Icon/icons/BriefcaseOutline.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const BriefCaseOutline: React.FC<Props> = ({
+  size = 24,
+  color = '#000',
+  style,
+}) => (
+  <Svg
+    width={size}
+    height={size - 1}
+    viewBox="0 0 25 24"
+    fill="none"
+    style={style}
+  >
+    <Path
+      d="M18.6667 5.25H17.4167V4C17.4167 3.035 16.6317 2.25 15.6667 2.25H9.66666C8.70166 2.25 7.91666 3.035 7.91666 4V5.25H6.66666C4.24866 5.25 2.91666 6.582 2.91666 9V9.11902V11.2531V18C2.91666 20.418 4.24866 21.75 6.66666 21.75H18.6667C21.0847 21.75 22.4167 20.418 22.4167 18V11.2531V9.11902V9C22.4167 6.582 21.0847 5.25 18.6667 5.25ZM9.41666 4C9.41666 3.862 9.52866 3.75 9.66666 3.75H15.6667C15.8047 3.75 15.9167 3.862 15.9167 4V5.25H9.41666V4ZM4.41666 9C4.41666 7.423 5.08966 6.75 6.66666 6.75H18.6667C20.2437 6.75 20.9167 7.423 20.9167 9V9.11902V11.2531C20.9167 11.5541 20.7457 11.8169 20.4707 11.9399C19.6057 12.3259 18.1317 12.876 16.0247 13.306C15.9217 13.327 15.8107 13.248 15.7507 13.16C15.0257 12.077 13.8737 11.431 12.6667 11.431C11.4597 11.431 10.3077 12.077 9.58266 13.16C9.52366 13.249 9.41665 13.329 9.30865 13.306C7.20265 12.876 5.72766 12.3259 4.86266 11.9399C4.58766 11.8169 4.41666 11.5541 4.41666 11.2531V9.11902V9ZM18.6667 20.25H6.66666C5.08966 20.25 4.41666 19.577 4.41666 18V13.38C5.36666 13.791 6.88966 14.342 9.00766 14.775C9.69766 14.915 10.4157 14.61 10.8287 13.993C11.2747 13.327 11.9617 12.9301 12.6667 12.9301C13.3717 12.9301 14.0587 13.327 14.5037 13.993C14.8497 14.51 15.4077 14.809 15.9867 14.809C16.0987 14.809 16.2117 14.798 16.3237 14.775C18.4427 14.342 19.9656 13.791 20.9156 13.38V18C20.9166 19.577 20.2437 20.25 18.6667 20.25ZM13.6867 15C13.6867 15.552 13.2387 16 12.6867 16C12.1347 16 11.6817 15.552 11.6817 15C11.6817 14.448 12.1237 14 12.6767 14H12.6867C13.2387 14 13.6867 14.448 13.6867 15Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default BriefCaseOutline;

package/src/Icon/icons/Edit.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const EditSquareOutline: React.FC<Props> = ({
+  size = 24,
+  color = '#000',
+  style,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style}>
+    <Path
+      d="M16 21.75H6C3.582 21.75 2.25 20.418 2.25 18V7.99998C2.25 5.58198 3.582 4.24998 6 4.24998H9C9.414 4.24998 9.75 4.58598 9.75 4.99998C9.75 5.41398 9.414 5.74998 9 5.74998H6C4.423 5.74998 3.75 6.42298 3.75 7.99998V18C3.75 19.577 4.423 20.25 6 20.25H16C17.577 20.25 18.25 19.577 18.25 18V15C18.25 14.586 18.586 14.25 19 14.25C19.414 14.25 19.75 14.586 19.75 15V18C19.75 20.418 18.418 21.75 16 21.75ZM20.58 5.02997L18.97 3.41999C18.4 2.85999 17.49 2.85997 16.92 3.42997L15.57 4.78998L19.21 8.42997L20.57 7.07996C21.14 6.50996 21.14 5.59997 20.58 5.02997ZM14.51 5.84998L8 12.39V16H11.61L18.15 9.48997L14.51 5.84998Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default EditSquareOutline;

package/src/Icon/icons/GlobeEarth.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const GlobeEarth: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style}>
+    <Path
+      d="M12 1.25C6.072 1.25 1.25 6.073 1.25 12C1.25 17.927 6.072 22.75 12 22.75C17.928 22.75 22.75 17.927 22.75 12C22.75 6.073 17.928 1.25 12 1.25ZM2.75 12C2.75 10.934 2.93999 9.91399 3.27399 8.95999C3.89399 13.47 7.85 13.851 8.021 14.57C8.211 15.38 8.021 15.62 8.091 17.01C8.161 18.4 10.081 18.42 10.821 19.52C11.039 19.84 11.165 20.525 11.111 21.205C6.42602 20.756 2.75 16.8 2.75 12ZM14.51 20.895C15.191 18.762 17.236 18.039 17.444 16.806C17.611 15.817 16.311 15.311 15.144 15.167C13.988 15.034 14.155 13.823 13.333 12.967C12.511 12.111 11.973 12.16 10.818 12.304C9.65099 12.437 8.67298 12.354 8.34998 11.643C8.03898 10.932 8.43899 10.592 7.58899 9.711C6.88099 8.977 7.64098 8.31901 8.01898 8.23001C8.61898 8.08601 9.68597 9.13499 10.311 9.00699C12.194 8.61899 9.93799 4.93399 12.766 4.00699C13.261 3.84499 13.724 3.45101 13.957 2.96301C15.573 3.31301 17.027 4.08899 18.209 5.16299C18.534 6.08799 18.76 7.15001 18.571 7.71301C18.193 8.88001 17.244 9.719 18.28 11.629C19.361 13.623 20.028 13.894 20.514 13.346C20.707 13.128 20.958 12.974 21.208 12.881C20.841 16.718 18.121 19.874 14.51 20.895Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default GlobeEarth;

package/src/Icon/icons/LockFill.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const LockFill: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style}>
+    <Path
+      d="M16.75 9.05811V7C16.75 4.38 14.62 2.25 12 2.25C9.38 2.25 7.25 4.38 7.25 7V9.05811C5.752 9.29111 5 10.269 5 12V18C5 20 6 21 8 21H16C18 21 19 20 19 18V12C19 10.269 18.248 9.29111 16.75 9.05811ZM12.75 14.9871V17C12.75 17.414 12.414 17.75 12 17.75C11.586 17.75 11.25 17.414 11.25 17V14.9619C10.962 14.7329 10.7649 14.395 10.7649 14C10.7649 13.31 11.32 12.75 12.01 12.75H12.02C12.71 12.75 13.27 13.31 13.27 14C13.27 14.412 13.057 14.7601 12.75 14.9871ZM15.25 9H8.75V7C8.75 5.21 10.21 3.75 12 3.75C13.79 3.75 15.25 5.21 15.25 7V9Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default LockFill;

package/src/Icon/icons/LogoHercaHris.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import Svg, {
+  ClipPath,
+  Defs,
+  G,
+  LinearGradient,
+  Path,
+  Rect,
+  Stop,
+} from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  style?: object;
+}
+
+const LogoHercaHris: React.FC<Props> = ({ size = 24, style }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style}>
+    <Rect
+      width="24"
+      height="24"
+      rx="4.09756"
+      fill="url(#paint0_linear_1124_44661)"
+    />
+    <G clip-path="url(#clip0_1124_44661)">
+      <Path
+        d="M6.71108 15.8672C6.70867 16.6715 6.86541 17.4694 7.17363 18.2219C7.2611 18.4419 7.22083 18.6069 6.98483 18.6955C6.73814 18.7876 6.57641 18.6677 6.49711 18.4639C5.96408 17.0692 5.72809 15.6409 6.2542 14.2125C6.94015 12.3494 8.42156 11.2337 10.4599 10.7387C11.6604 10.4516 12.9271 10.505 14.0939 10.892C15.2608 11.2789 16.2732 11.9813 16.9985 12.907C17.6595 13.75 18.0169 14.7623 18.0205 15.8018C18.0344 16.8857 17.0533 17.7923 15.8437 17.812C14.5662 17.8346 13.5593 17.0015 13.5121 15.8846C13.4769 15.0613 12.7915 14.4835 11.9029 14.5275C11.0144 14.5715 10.4058 15.2043 10.4675 16.0363C10.611 17.9793 11.9533 19.498 14.0282 20.0659L14.2081 20.1152C14.4404 20.18 14.5297 20.33 14.4718 20.5378C14.4089 20.7584 14.2302 20.8146 14.0055 20.7596C13.261 20.576 12.5631 20.2999 11.9495 19.8621C10.56 18.8721 9.77837 17.5845 9.73747 15.9535C9.70852 14.7921 10.6387 13.9022 11.8866 13.8628C13.1635 13.8223 14.1521 14.6381 14.239 15.8007C14.2868 16.4508 14.643 16.8909 15.2717 17.0744C15.5723 17.1649 15.8955 17.1705 16.1996 17.0907C16.5037 17.0108 16.775 16.8491 16.9784 16.6263C17.1911 16.3956 17.3011 16.0994 17.2861 15.7972C17.2062 13.9508 16.2257 12.6262 14.4718 11.7849C12.0697 10.6328 9.04962 11.3264 7.5078 13.3626C6.95357 14.0957 6.6739 14.9749 6.71108 15.8672Z"
+        fill="#FCFCFC"
+      />
+      <Path
+        d="M8.60029 15.9883C8.61225 17.4612 9.24408 18.6961 10.3133 19.7632C10.4127 19.8622 10.5153 19.9583 10.6154 20.0573C10.7777 20.2177 10.7865 20.3925 10.6185 20.5425C10.4505 20.6924 10.2598 20.6826 10.088 20.5298C9.23087 19.7672 8.56064 18.8866 8.20005 17.8381C7.84637 16.8133 7.68589 15.7642 8.07418 14.7117C8.95523 12.3141 12.3227 11.426 14.5713 12.9915C15.536 13.6631 16.0715 14.5548 16.1508 15.6693C16.1741 16.0022 16.0457 16.1736 15.7953 16.1776C15.5593 16.1817 15.4334 16.0248 15.4177 15.7092C15.3497 14.2745 14.0766 13.0801 12.4259 12.9012C10.6229 12.7067 8.98984 13.7668 8.64497 15.3532C8.60798 15.5631 8.59302 15.7758 8.60029 15.9883Z"
+        fill="#FCFCFC"
+      />
+      <Path
+        d="M12.2653 8.95361C14.6756 9.0283 16.8594 9.91123 18.4515 11.8786C18.6586 12.1345 18.6158 12.3887 18.3571 12.4738C18.1287 12.549 17.9871 12.4344 17.8575 12.2729C17.1677 11.4054 16.2492 10.7138 15.1885 10.2632C12.4334 9.08504 8.4391 9.44921 6.16726 12.2491C6.08167 12.3551 6.01685 12.4848 5.84757 12.5062C5.77498 12.5195 5.6997 12.5117 5.63209 12.4841C5.56447 12.4564 5.50784 12.4101 5.46998 12.3516C5.36488 12.1988 5.42278 12.0621 5.5285 11.9255C6.16406 11.107 6.98568 10.4256 7.93627 9.9286C9.21316 9.25584 10.5945 8.9623 12.2653 8.95361Z"
+        fill="#FBFBFB"
+      />
+      <Path
+        d="M12.0497 7.3176C13.5701 7.30255 14.9911 7.65746 16.3347 8.29548C16.6097 8.42633 16.6984 8.60928 16.5738 8.79919C16.4266 9.02267 16.2239 8.99662 16.0018 8.89472C13.336 7.66537 10.6719 7.66768 8.00944 8.90167C7.78163 9.00762 7.56577 9.01399 7.44305 8.78935C7.32034 8.56471 7.44305 8.41938 7.67527 8.30301C8.94335 7.66209 10.4575 7.31586 12.0497 7.3176Z"
+        fill="#FCFCFC"
+      />
+      <Path
+        d="M15.6178 19.3972C13.4328 19.3909 11.704 17.9232 11.6033 16.0166C11.6033 15.9784 11.5989 15.9402 11.5983 15.9008C11.5945 15.6779 11.6921 15.5129 11.9501 15.5089C12.2081 15.5048 12.3182 15.6548 12.3277 15.8823C12.3409 16.6227 12.6679 17.329 13.2389 17.8508C13.9457 18.5103 14.816 18.7639 15.8053 18.7094C16.0029 18.699 16.1992 18.6614 16.3975 18.6515C16.6177 18.6394 16.7587 18.7447 16.7914 18.941C16.8229 19.1309 16.7147 19.2612 16.5196 19.3081C16.2162 19.3828 15.9003 19.3891 15.6178 19.3972Z"
+        fill="#FBFBFB"
+      />
+    </G>
+    <Defs>
+      <LinearGradient
+        id="paint0_linear_1124_44661"
+        x1="21.9103"
+        y1={size}
+        x2="2.0897"
+        y2="1.13166e-06"
+        gradientUnits="userSpaceOnUse"
+      >
+        <Stop stopColor="#080355" />
+        <Stop offset="1" stopColor="#130D7D" />
+      </LinearGradient>
+      <ClipPath id="clip0_1124_44661">
+        <Rect
+          width="14.6341"
+          height="9.36585"
+          fill="white"
+          transform="translate(4.68292 7.31714)"
+        />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+export default LogoHercaHris;

package/src/Icon/icons/QuestionCircleOutline.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const QuestionCircleOutline: React.FC<Props> = ({
+  size = 24,
+  color = '#000',
+  style,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style}>
+    <Path
+      d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12C1.25 6.072 6.072 1.25 12 1.25C17.928 1.25 22.75 6.072 22.75 12C22.75 17.928 17.928 22.75 12 22.75ZM12 2.75C6.899 2.75 2.75 6.899 2.75 12C2.75 17.101 6.899 21.25 12 21.25C17.101 21.25 21.25 17.101 21.25 12C21.25 6.899 17.101 2.75 12 2.75ZM12.7109 13.364C12.7349 13.292 12.871 13.0191 13.603 12.5291C14.783 11.7381 15.311 10.6079 15.092 9.34595C14.87 8.07095 13.8309 7.02403 12.5649 6.80103C11.6399 6.63703 10.703 6.88593 9.99097 7.48193C9.27197 8.08493 8.86011 8.96989 8.86011 9.91089C8.86011 10.3249 9.19611 10.6609 9.61011 10.6609C10.0241 10.6609 10.3601 10.3249 10.3601 9.91089C10.3601 9.41489 10.5771 8.9481 10.9551 8.6311C11.3311 8.3161 11.811 8.1871 12.304 8.2771C12.95 8.3911 13.501 8.94805 13.615 9.60205C13.658 9.84905 13.7891 10.599 12.7681 11.282C11.9411 11.837 11.471 12.346 11.29 12.886C11.158 13.279 11.3699 13.7039 11.7629 13.8359C11.8419 13.8629 11.922 13.875 12.001 13.875C12.313 13.875 12.6049 13.677 12.7109 13.364ZM13.02 16.5C13.02 15.948 12.573 15.5 12.02 15.5H12.01C11.458 15.5 11.0149 15.948 11.0149 16.5C11.0149 17.052 11.468 17.5 12.02 17.5C12.572 17.5 13.02 17.052 13.02 16.5Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default QuestionCircleOutline;

package/src/Icon/icons/Scanner.tsx

@@ -8,15 +8,9 @@ interface Props {
 }
 
 const Scanner: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
-  <Svg
-    width={size + 1}
-    height={size}
-    viewBox="0 0 25 24"
-    fill="none"
-    style={style}
-  >
+  <Svg width={size} height={size} viewBox="0 0 20 20" fill="none" style={style}>
     <Path
-      d="M2.625 8V4.5C2.625 3.091 3.466 2.25 4.875 2.25H8.375C8.789 2.25 9.125 2.586 9.125 3C9.125 3.414 8.789 3.75 8.375 3.75H4.875C4.286 3.75 4.125 3.911 4.125 4.5V8C4.125 8.414 3.789 8.75 3.375 8.75C2.961 8.75 2.625 8.414 2.625 8ZM8.375 20.25H4.875C4.286 20.25 4.125 20.089 4.125 19.5V16C4.125 15.586 3.789 15.25 3.375 15.25C2.961 15.25 2.625 15.586 2.625 16V19.5C2.625 20.909 3.466 21.75 4.875 21.75H8.375C8.789 21.75 9.125 21.414 9.125 21C9.125 20.586 8.789 20.25 8.375 20.25ZM21.375 15.25C20.961 15.25 20.625 15.586 20.625 16V19.5C20.625 20.089 20.464 20.25 19.875 20.25H16.375C15.961 20.25 15.625 20.586 15.625 21C15.625 21.414 15.961 21.75 16.375 21.75H19.875C21.284 21.75 22.125 20.909 22.125 19.5V16C22.125 15.586 21.789 15.25 21.375 15.25ZM19.875 2.25H16.375C15.961 2.25 15.625 2.586 15.625 3C15.625 3.414 15.961 3.75 16.375 3.75H19.875C20.464 3.75 20.625 3.911 20.625 4.5V8C20.625 8.414 20.961 8.75 21.375 8.75C21.789 8.75 22.125 8.414 22.125 8V4.5C22.125 3.091 21.284 2.25 19.875 2.25ZM17.875 15.12V12.75H19.375C19.789 12.75 20.125 12.414 20.125 12C20.125 11.586 19.789 11.25 19.375 11.25H5.375C4.961 11.25 4.625 11.586 4.625 12C4.625 12.414 4.961 12.75 5.375 12.75H6.875V15.12C6.875 16.65 7.715 17.5 9.255 17.5H15.495C17.035 17.5 17.875 16.65 17.875 15.12ZM6.625 8.88V9C6.625 9.414 6.961 9.75 7.375 9.75C7.789 9.75 8.125 9.414 8.125 9V8.88C8.125 8.035 8.41 7.75 9.255 7.75H15.495C16.34 7.75 16.625 8.035 16.625 8.88V9C16.625 9.414 16.961 9.75 17.375 9.75C17.789 9.75 18.125 9.414 18.125 9V8.88C18.125 7.209 17.166 6.25 15.495 6.25H9.255C7.584 6.25 6.625 7.208 6.625 8.88Z"
+      d="M1.875 6.66667V3.75C1.875 2.57583 2.57583 1.875 3.75 1.875H6.66667C7.01167 1.875 7.29167 2.155 7.29167 2.5C7.29167 2.845 7.01167 3.125 6.66667 3.125H3.75C3.25917 3.125 3.125 3.25917 3.125 3.75V6.66667C3.125 7.01167 2.845 7.29167 2.5 7.29167C2.155 7.29167 1.875 7.01167 1.875 6.66667ZM6.66667 16.875H3.75C3.25917 16.875 3.125 16.7408 3.125 16.25V13.3333C3.125 12.9883 2.845 12.7083 2.5 12.7083C2.155 12.7083 1.875 12.9883 1.875 13.3333V16.25C1.875 17.4242 2.57583 18.125 3.75 18.125H6.66667C7.01167 18.125 7.29167 17.845 7.29167 17.5C7.29167 17.155 7.01167 16.875 6.66667 16.875ZM17.5 12.7083C17.155 12.7083 16.875 12.9883 16.875 13.3333V16.25C16.875 16.7408 16.7408 16.875 16.25 16.875H13.3333C12.9883 16.875 12.7083 17.155 12.7083 17.5C12.7083 17.845 12.9883 18.125 13.3333 18.125H16.25C17.4242 18.125 18.125 17.4242 18.125 16.25V13.3333C18.125 12.9883 17.845 12.7083 17.5 12.7083ZM16.25 1.875H13.3333C12.9883 1.875 12.7083 2.155 12.7083 2.5C12.7083 2.845 12.9883 3.125 13.3333 3.125H16.25C16.7408 3.125 16.875 3.25917 16.875 3.75V6.66667C16.875 7.01167 17.155 7.29167 17.5 7.29167C17.845 7.29167 18.125 7.01167 18.125 6.66667V3.75C18.125 2.57583 17.4242 1.875 16.25 1.875ZM14.5833 12.6V10.625H15.8333C16.1783 10.625 16.4583 10.345 16.4583 10C16.4583 9.655 16.1783 9.375 15.8333 9.375H4.16667C3.82167 9.375 3.54167 9.655 3.54167 10C3.54167 10.345 3.82167 10.625 4.16667 10.625H5.41667V12.6C5.41667 13.875 6.11667 14.5833 7.4 14.5833H12.6C13.8833 14.5833 14.5833 13.875 14.5833 12.6ZM5.20833 7.4V7.5C5.20833 7.845 5.48833 8.125 5.83333 8.125C6.17833 8.125 6.45833 7.845 6.45833 7.5V7.4C6.45833 6.69584 6.69584 6.45833 7.4 6.45833H12.6C13.3042 6.45833 13.5417 6.69584 13.5417 7.4V7.5C13.5417 7.845 13.8217 8.125 14.1667 8.125C14.5117 8.125 14.7917 7.845 14.7917 7.5V7.4C14.7917 6.0075 13.9925 5.20833 12.6 5.20833H7.4C6.0075 5.20833 5.20833 6.00667 5.20833 7.4Z"
       fill={color}
     />
   </Svg>

package/src/Icon/icons/Search.tsx

@@ -8,9 +8,9 @@ interface Props {
 }
 
 const Search: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
-  <Svg width={size} height={size} viewBox="0 0 18 18" fill="none" style={style}>
+  <Svg width={size} height={size} viewBox="0 0 20 20" fill="none" style={style}>
     <Path
-      d="M16.9417 16.0583L13.7409 12.8575C14.8109 11.5883 15.4583 9.9525 15.4583 8.16667C15.4583 4.14583 12.1875 0.875 8.16667 0.875C4.14583 0.875 0.875 4.14583 0.875 8.16667C0.875 12.1875 4.14583 15.4583 8.16667 15.4583C9.9525 15.4583 11.5884 14.8108 12.8575 13.7408L16.0583 16.9417C16.18 17.0633 16.34 17.125 16.5 17.125C16.66 17.125 16.82 17.0642 16.9417 16.9417C17.1859 16.6983 17.1859 16.3025 16.9417 16.0583ZM2.125 8.16667C2.125 4.835 4.835 2.125 8.16667 2.125C11.4983 2.125 14.2083 4.835 14.2083 8.16667C14.2083 11.4983 11.4983 14.2083 8.16667 14.2083C4.835 14.2083 2.125 11.4983 2.125 8.16667Z"
+      d="M17.9417 17.0583L14.7409 13.8575C15.8109 12.5883 16.4583 10.9525 16.4583 9.16667C16.4583 5.14583 13.1875 1.875 9.16667 1.875C5.14583 1.875 1.875 5.14583 1.875 9.16667C1.875 13.1875 5.14583 16.4583 9.16667 16.4583C10.9525 16.4583 12.5884 15.8108 13.8575 14.7408L17.0583 17.9417C17.18 18.0633 17.34 18.125 17.5 18.125C17.66 18.125 17.82 18.0642 17.9417 17.9417C18.1859 17.6983 18.1859 17.3025 17.9417 17.0583ZM3.125 9.16667C3.125 5.835 5.835 3.125 9.16667 3.125C12.4983 3.125 15.2083 5.835 15.2083 9.16667C15.2083 12.4983 12.4983 15.2083 9.16667 15.2083C5.835 15.2083 3.125 12.4983 3.125 9.16667Z"
       fill={color}
     />
   </Svg>

package/src/Icon/icons/ShieldFill.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const ShieldFill: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style}>
+    <Path
+      d="M21 10.8889C21 17.5559 15.333 20.889 12 22C8.667 20.889 3 17.5559 3 10.8889C3 9.70192 3 6.137 3 5C8 4 9.77807 3.111 12.0181 2C14.2231 3.111 16 4 21 5C21 6.194 21 9.66392 21 10.8889Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default ShieldFill;

package/src/Icon/icons/Users.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const Users: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style}>
+    <Path
+      d="M19.627 8.75195C19.323 9.70695 18.5431 10.482 17.5861 10.781C16.0381 11.265 14.566 10.601 13.83 9.43201C13.772 9.34001 13.776 9.22403 13.829 9.12903C14.264 8.35303 14.511 7.457 14.511 6.5C14.511 6.168 14.4819 5.84398 14.424 5.52698C14.405 5.42298 14.4369 5.31497 14.5179 5.24597C15.0729 4.77497 15.791 4.5 16.561 4.5C18.677 4.5 20.327 6.55095 19.627 8.75195ZM18.11 12.28H16.13C15.96 12.28 15.83 12.41 15.83 12.58C15.83 12.66 15.86 12.74 15.92 12.79C15.93 12.8 15.94 12.8099 15.95 12.8199C17.35 14.1699 18 16.1 18 18.02C18 18.39 17.98 18.75 17.92 19.08C17.91 19.124 17.907 19.161 17.907 19.201C17.907 19.371 18.04 19.5 18.2 19.5H19.66C21.49 19.5 22.5 18.5001 22.5 16.6801C22.5 14.6501 21.35 12.28 18.11 12.28ZM9.01001 2.5C6.80001 2.5 5.01001 4.29 5.01001 6.5C5.01001 8.71 6.80001 10.5 9.01001 10.5C11.21 10.5 13.01 8.71 13.01 6.5C13.01 4.29 11.21 2.5 9.01001 2.5ZM11 12.5H7C2.94 12.5 1.5 15.47 1.5 18.02C1.5 20.3 2.71 21.5 5 21.5H13C15.29 21.5 16.5 20.3 16.5 18.02C16.5 15.47 15.06 12.5 11 12.5Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default Users;

package/src/Icon/icons/WhatsappFill.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const WhatsAppFill: React.FC<Props> = ({
+  size = 24,
+  color = '#000',
+  style,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={style}>
+    <Path
+      d="M12 3C7.03 3 3 7.03 3 12C3 13.67 3.46001 15.24 4.26001 16.59L3 21L7.40997 19.74C8.75997 20.54 10.33 21 12 21C16.97 21 21 16.97 21 12C21 7.03 16.97 3 12 3ZM16.82 15.44C16.61 16.03 15.61 16.57 15.16 16.62C14.71 16.67 14.29 16.83 12.21 16.01C9.71002 15.01 8.12 12.43 8 12.27C7.88 12.11 7 10.93 7 9.71001C7 8.49001 7.62999 7.9 7.85999 7.64C8.08999 7.39 8.36002 7.33 8.52002 7.33C8.69002 7.33 8.85 7.33 9 7.34C9.17 7.34 9.36999 7.33999 9.54999 7.75999C9.76999 8.24999 10.24 9.47 10.3 9.58C10.36 9.7 10.4 9.84999 10.32 10.01C10.23 10.17 10.19 10.28 10.07 10.42C9.95001 10.56 9.81001 10.74 9.70001 10.85C9.57001 10.97 9.45003 11.1 9.59003 11.35C9.74003 11.59 10.23 12.41 10.96 13.06C11.9 13.91 12.69 14.17 12.94 14.29C13.18 14.41 13.33 14.39 13.47 14.23C13.62 14.07 14.09 13.51 14.25 13.26C14.41 13.02 14.57 13.06 14.8 13.14C15.03 13.22 16.23 13.83 16.48 13.95C16.72 14.08 16.89 14.14 16.95 14.24C17.01 14.34 17.01 14.84 16.81 15.42L16.82 15.44Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default WhatsAppFill;

package/src/Icon/type.tsx

@@ -47,7 +47,17 @@ export type IconNameProps =
   | 'clipboard-list-check-outline'
   | 'box-outline'
   | 'Box'
-  | 'plus-square';
+  | 'plus-square'
+  | 'at-sign'
+  | 'briefcase-outline'
+  | 'edit-square-outline'
+  | 'globe-earth'
+  | 'lock-fill'
+  | 'logo-herca-hris'
+  | 'question-circle-outline'
+  | 'shield-fill'
+  | 'Users'
+  | 'whatsapp-fill';
 
 export interface IconProps {
   name: IconNameProps;

package/src/Input/Input.tsx

@@ -1,11 +1,5 @@
 import React, { useState } from 'react';
-import {
-  TextInput,
-  View,
-  StyleSheet,
-  TouchableOpacity,
-  Platform,
-} from 'react-native';
+import { TextInput, View, StyleSheet, TouchableOpacity } from 'react-native';
 import { Icon } from '../Icon';
 import Color from '../Color/Color';
 import LabelForm from '../LabelForm/LabelForm';
@@ -25,6 +19,7 @@ const Input: React.FC<InputProps> = ({
   onPressIconLeft,
   onPressIconRight,
   secureTextEntry = false,
+  iconRightColor,
   ...rest
 }) => {
   const [inputValue, setInputValue] = useState(value || '');
@@ -59,7 +54,7 @@ const Input: React.FC<InputProps> = ({
             style={styles.iconLeft}
             hitSlop={10}
           >
-            <Icon name={icon} size={18} color="#888" />
+            <Icon name={icon} size={20} color="#888" />
           </TouchableOpacity>
         )}
 
@@ -68,7 +63,10 @@ const Input: React.FC<InputProps> = ({
           style={[
             styles.input,
             icon && { paddingLeft: 40 },
-            showRightIcons && { paddingRight: 60 },
+            showRightIcons && { paddingRight: 40 },
+            showRightIcons &&
+              clearButton &&
+              inputValue !== '' && { paddingRight: 65 },
             style,
           ]}
           secureTextEntry={secureTextEntry}
@@ -84,19 +82,27 @@ const Input: React.FC<InputProps> = ({
                 onPress={handleClear}
                 style={[{ marginRight: iconRight ? 8 : 0 }]}
               >
-                <Icon name="x-circle" size={18} color="#aaa" />
+                <Icon name="x-circle" size={20} color="#aaa" />
               </TouchableOpacity>
             )}
             {iconRight && (
               <TouchableOpacity onPress={onPressIconRight} hitSlop={10}>
-                <Icon name={iconRight} size={18} color="#888" />
+                <Icon
+                  name={iconRight}
+                  size={20}
+                  color={iconRightColor ?? '#888'}
+                />
               </TouchableOpacity>
             )}
           </View>
         )}
       </View>
       {hint ? (
-        <Typography color={hasError ? Color.danger[500] : ''} variant="t2">
+        <Typography
+          color={hasError ? Color.danger[500] : Color.gray[700]}
+          variant="t3"
+          weight="medium"
+        >
           {hint}
         </Typography>
       ) : null}
@@ -110,7 +116,7 @@ const styles = StyleSheet.create({
   },
   container: {
     position: 'relative',
-    height: 36,
+    height: 40,
     borderRadius: 8,
     gap: 8,
     borderWidth: 1,
@@ -120,9 +126,11 @@ const styles = StyleSheet.create({
   input: {
     height: 37,
     paddingHorizontal: 12,
-    marginTop: Platform.select({ ios: 0, android: 5 }),
+    paddingTop: 0,
+    paddingBottom: 0,
     fontSize: 16,
     color: '#333',
+    flex: 1,
   },
   iconLeft: {
     position: 'absolute',