@kivid/native-components 1.0.0-alpha.15 → 1.0.0-alpha.17

package/src/components/InformationStatus/components/GradientAlert/index.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import Svg, {
   Path,
   Defs,
@@ -9,73 +10,126 @@ import Svg, {
   FeGaussianBlur,
   FeComposite,
   G,
-  SvgProps,
 } from "react-native-svg";
 import { GradientAlertProps } from "./types";
+import { SizeEnum } from "../../../../enums";
+import { View } from "react-native";
 
 export function GradientAlert(props: GradientAlertProps, ref?: React.Ref<Svg>) {
-  const { size = 24, color = "currentColor" } = props;
+  const { size = SizeEnum.MEDIUM, color = "currentColor", style, ...rest } = props;
+
+  const ICON_CONFIG = {
+    [SizeEnum.SMALL]: {
+      paths: [
+        "M8.00001 2C8.73638 2 9.33334 2.58216 9.33334 3.30028V9.36639C9.33334 10.0845 8.73638 10.6667 8.00001 10.6667C7.26363 10.6667 6.66667 10.0845 6.66667 9.36639V3.30028C6.66667 2.58216 7.26363 2 8.00001 2Z",
+        "M8.00001 11.3333C8.73638 11.3333 9.33334 11.9154 9.33334 12.6336V12.6997C9.33334 13.4178 8.73638 14 8.00001 14C7.26363 14 6.66667 13.4178 6.66667 12.6997V12.6336C6.66667 11.9154 7.26363 11.3333 8.00001 11.3333Z",
+      ],
+      viewBox: "0 0 16 16",
+      filter: {
+        id: "filter0_i_8151_1867",
+        x: "6.66667",
+        y: "2",
+        width: "3.66667",
+        height: "13",
+        colorMatrix:
+          "0 0 0 0 0.960784 0 0 0 0 0.541176 0 0 0 0 0.239216 0 0 0 0.4 0",
+      },
+    },
+
+    [SizeEnum.MEDIUM]: {
+      paths: [
+        "M12 3C13.1046 3 14 3.87323 14 4.95042V14.0496C14 15.1268 13.1046 16 12 16C10.8954 16 10 15.1268 10 14.0496V4.95042C10 3.87323 10.8954 3 12 3Z",
+        "M12 16.9999C13.1046 16.9999 14 17.8732 14 18.9503V19.0495C14 20.1267 13.1046 20.9999 12 20.9999C10.8954 20.9999 10 20.1267 10 19.0495V18.9503C10 17.8732 10.8954 16.9999 12 16.9999Z",
+      ],
+      viewBox: "0 0 24 24",
+      filter: {
+        id: "filter0_i_8151_1859",
+        x: "10",
+        y: "3",
+        width: "5",
+        height: "18.9999",
+        colorMatrix:
+          "0 0 0 0 0.960784 0 0 0 0 0.541176 0 0 0 0 0.239216 0 0 0 0.4 0",
+      },
+    },
+
+    [SizeEnum.LARGE]: {
+      paths: [
+        "M16 4C17.4728 4 18.6667 5.16431 18.6667 6.60056V18.7328C18.6667 20.169 17.4728 21.3333 16 21.3333C14.5272 21.3333 13.3333 20.169 13.3333 18.7328V6.60056C13.3333 5.16431 14.5272 4 16 4Z",
+        "M16 22.6666C17.4728 22.6666 18.6667 23.8309 18.6667 25.2671V25.3993C18.6667 26.8356 17.4728 27.9999 16 27.9999C14.5272 27.9999 13.3333 26.8356 13.3333 25.3993V25.2671C13.3333 23.8309 14.5272 22.6666 16 22.6666Z",
+      ],
+      viewBox: "0 0 32 32",
+      filter: {
+        id: "filter0_i_8151_1869",
+        x: "13.3333",
+        y: "4",
+        width: "6.33333",
+        height: "24.9999",
+        colorMatrix:
+          "0 0 0 0 0.960784 0 0 0 0 0.541176 0 0 0 0 0.239216 0 0 0 0.4 0",
+      },
+    },
+  };
+
+  const SIZE_MAP = {
+    [SizeEnum.SMALL]: 16,
+    [SizeEnum.MEDIUM]: 24,
+    [SizeEnum.LARGE]: 32,
+  };
+
+  const config = ICON_CONFIG[size] || ICON_CONFIG[SizeEnum.MEDIUM];
+  const { paths, viewBox, filter } = config;
+  const iconSize = SIZE_MAP[size] || 24;
+  const filterId = filter.id;
 
   return (
-    <Svg
-      viewBox="0 0 16 16"
-      fill="none"
-      width={size}
-      height={size}
-      color={color}
-      ref={ref}
-      {...props}
-    >
-      <G filter="url(#filter0_i_3359_12282)">
-        <Path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M8.00001 2C8.73638 2 9.33334 2.58216 9.33334 3.30028V9.36639C9.33334 10.0845 8.73638 10.6667 8.00001 10.6667C7.26363 10.6667 6.66667 10.0845 6.66667 9.36639V3.30028C6.66667 2.58216 7.26363 2 8.00001 2Z"
-          fill="currentColor"
-        />
-        <Path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M8.00001 11.3333C8.73638 11.3333 9.33334 11.9154 9.33334 12.6336V12.6997C9.33334 13.4178 8.73638 14 8.00001 14C7.26363 14 6.66667 13.4178 6.66667 12.6997V12.6336C6.66667 11.9154 7.26363 11.3333 8.00001 11.3333Z"
-          fill="currentColor"
-        />
-      </G>
-      <Defs>
-        <Filter
-          id="filter0_i_3359_12282"
-          x="6.66667"
-          y="2"
-          width="3.66667"
-          height="13"
-          filterUnits="userSpaceOnUse"
-        >
-          <FeFlood floodOpacity="0" result="BackgroundImageFix" />
-          <FeBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="BackgroundImageFix"
-            result="shape"
-          />
-          <FeColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <FeOffset dx="1" dy="1" />
-          <FeGaussianBlur stdDeviation="1" />
-          <FeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-          <FeColorMatrix
-            type="matrix"
-            values="0 0 0 0 0.960784 0 0 0 0 0.541176 0 0 0 0 0.239216 0 0 0 0.4 0"
-          />
-          <FeBlend
-            mode="normal"
-            in2="shape"
-            result="effect1_innerShadow_3359_12282"
-          />
-        </Filter>
-      </Defs>
-    </Svg>
+    <View style={[{ width: iconSize, height: iconSize }, style]}>
+      <Svg
+        width="100%"
+        height="100%"
+        viewBox={viewBox}
+        fill="none"
+        color={color}
+        ref={ref}
+        {...rest}
+      >
+        <G filter={`url(#${filterId})`}>
+          {paths.map((d, i) => (
+            <Path
+              key={i}
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d={d}
+              fill="currentColor"
+            />
+          ))}
+        </G>
+
+        <Defs>
+          <Filter
+            id={filter.id}
+            x={filter.x}
+            y={filter.y}
+            width={filter.width}
+            height={filter.height}
+            filterUnits="userSpaceOnUse"
+          >
+            <FeFlood floodOpacity="0" result="BackgroundImageFix" />
+            <FeBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <FeColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              result="hardAlpha"
+            />
+            <FeOffset dx="1" dy="1" />
+            <FeGaussianBlur stdDeviation="1" />
+            <FeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+            <FeColorMatrix type="matrix" values={filter.colorMatrix} />
+            <FeBlend mode="normal" in2="shape" result="effect1_innerShadow" />
+          </Filter>
+        </Defs>
+      </Svg>
+    </View>
   );
 }

package/src/components/InformationStatus/components/GradientAlert/types.ts

@@ -1,6 +1,7 @@
 import { SvgProps } from "react-native-svg";
+import { SizeEnum } from "../../../../enums";
 
-export interface GradientAlertProps extends SvgProps {
-  size?: number;
+export interface GradientAlertProps extends Omit<SvgProps, "width" | "height"> {
+  size?: SizeEnum.SMALL | SizeEnum.MEDIUM | SizeEnum.LARGE;
   color?: string;
 }

package/src/components/InformationStatus/components/GradientCheck/index.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import Svg, {
   Path,
   Defs,
@@ -8,68 +9,119 @@ import Svg, {
   FeOffset,
   FeGaussianBlur,
   FeComposite,
-  G,
-  SvgProps,
-} from "react-native-svg";
-import { GradientCheckProps } from "./types";
+  G
+} from 'react-native-svg';
+import { GradientCheckProps } from './types';
+import { SizeEnum } from '../../../../enums';
+import { View } from 'react-native';
 
 export function GradientCheck(props: GradientCheckProps, ref?: React.Ref<Svg>) {
-  const { size = 24, color = "currentColor" } = props;
+  const { size = SizeEnum.MEDIUM, color = 'currentColor', style, ...rest } = props;
+
+  const ICON_CONFIG = {
+    [SizeEnum.SMALL]: {
+      path: "M12.8985 4.39037C13.4574 4.93089 13.4806 5.83095 12.9504 6.40072L7.97736 11.5567C7.71389 11.8398 7.34787 12.0001 6.96506 12C6.58225 11.9999 6.2163 11.8394 5.95297 11.5562L3.04912 8.40463C2.51919 7.8346 2.54288 6.93454 3.10203 6.3943C3.66118 5.85406 4.54404 5.87821 5.07397 6.44825L6.96589 8.51126L10.9265 4.44334C11.4567 3.87357 12.3396 3.84985 12.8985 4.39037Z",
+      viewBox: "0 0 16 16",
+      filter: {
+        id: "filter0_i_3359_12276",
+        x: "0",
+        y: "0",
+        width: "16",
+        height: "16"
+      }
+    },
+    [SizeEnum.MEDIUM]: {
+
+      path: "M19.3477 6.58556C20.186 7.39633 20.2209 8.74643 19.4256 9.60108L11.966 17.335C11.5708 17.7597 11.0218 18.0001 10.4476 18C9.87337 17.9999 9.32445 17.7591 8.92946 17.3342L4.57368 12.6069C3.77879 11.7519 3.81432 10.4018 4.65304 9.59146C5.49176 8.7811 6.81606 8.81732 7.61095 9.67237L10.4488 12.7669L16.3897 6.66501C17.185 5.81035 18.5094 5.77478 19.3477 6.58556Z",
+      viewBox: "0 0 24 24",
+      filter: {
+        id: "filter0_i_8151_259",
+        x: "4",
+        y: "6",
+        width: "17",
+        height: "13",
+      },
+    },
+
+    [SizeEnum.LARGE]: {
+      path: "M25.7969 8.78074C26.9147 9.86178 26.9612 11.6619 25.9008 12.8014L15.9547 23.1133C15.4278 23.6796 14.6957 24.0002 13.9301 24C13.1645 23.9998 12.4326 23.6789 11.9059 23.1123L6.09823 16.8093C5.03838 15.6692 5.08576 13.8691 6.20406 12.7886C7.32235 11.7081 9.08808 11.7564 10.1479 12.8965L13.9318 17.0225L21.853 8.88667C22.9134 7.74713 24.6791 7.69971 25.7969 8.78074Z",
+      viewBox: "0 0 32 32",
+      filter: {
+        id: "filter0_i_8151_249",
+        x: "5.33333",
+        y: "8",
+        width: "22.3333",
+        height: "17",
+      },
+    },
+  };
+
+  const SIZE_MAP = {
+    [SizeEnum.SMALL]: 16,
+    [SizeEnum.MEDIUM]: 24,
+    [SizeEnum.LARGE]: 32,
+  };
+
+  const config = ICON_CONFIG[size];
+  const filterId = config.filter.id;
+  const sizeMapped = SIZE_MAP[size];
 
   return (
-    <Svg
-      viewBox="0 0 16 16"
-      fill="none"
-      width={size}
-      height={size}
-      color={color}
-      ref={ref}
-      {...props}
-    >
-      <G filter="url(#filter0_i_3359_12276)">
-        <Path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M12.8985 4.39037C13.4574 4.93089 13.4806 5.83095 12.9504 6.40072L7.97736 11.5567C7.71389 11.8398 7.34787 12.0001 6.96506 12C6.58225 11.9999 6.2163 11.8394 5.95297 11.5562L3.04912 8.40463C2.51919 7.8346 2.54288 6.93454 3.10203 6.3943C3.66118 5.85406 4.54404 5.87821 5.07397 6.44825L6.96589 8.51126L10.9265 4.44334C11.4567 3.87357 12.3396 3.84985 12.8985 4.39037Z"
-          fill="currentColor"
-        />
-      </G>
-      <Defs>
-        <Filter
-          id="filter0_i_3359_12276"
-          x="2.66667"
-          y="4"
-          width="11.6667"
-          height="9"
-          filterUnits="userSpaceOnUse"
-        >
-          <FeFlood floodOpacity="0" result="BackgroundImageFix" />
-          <FeBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="BackgroundImageFix"
-            result="shape"
-          />
-          <FeColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <FeOffset dx="1" dy="1" />
-          <FeGaussianBlur stdDeviation="1" />
-          <FeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-          <FeColorMatrix
-            type="matrix"
-            values="0 0 0 0 0.215686 0 0 0 0 0.886275 0 0 0 0 0.439216 0 0 0 0.4 0"
-          />
-          <FeBlend
-            mode="normal"
-            in2="shape"
-            result="effect1_innerShadow_3359_12276"
+    <View style={[{ width: sizeMapped, height: sizeMapped }, style]}>
+      <Svg
+        width="100%"
+        height="100%"
+        viewBox={config.viewBox}
+        fill="none"
+        color={color}
+        ref={ref}
+        {...rest}
+      >
+        <G filter={`url(#${filterId})`}>
+          <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d={config.path}
+            fill="currentColor"
           />
-        </Filter>
-      </Defs>
-    </Svg>
+        </G>
+        <Defs>
+          <Filter
+            id={filterId}
+            x={config.filter.x}
+            y={config.filter.y}
+            width={config.filter.width}
+            height={config.filter.height}
+            filterUnits="userSpaceOnUse"
+          >
+            <FeFlood floodOpacity="0" result="BackgroundImageFix" />
+            <FeBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <FeColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              result="hardAlpha"
+            />
+            <FeOffset dx="1" dy="1" />
+            <FeGaussianBlur stdDeviation="1" />
+            <FeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+            <FeColorMatrix
+              type="matrix"
+              values="0 0 0 0 0.215686 0 0 0 0 0.886275 0 0 0 0 0.439216 0 0 0 0.4 0"
+            />
+            <FeBlend
+              mode="normal"
+              in2="shape"
+              result={`effect1_innerShadow_${filterId}`}
+            />
+          </Filter>
+        </Defs>
+      </Svg>
+    </View>
   );
-}
+}

package/src/components/InformationStatus/components/GradientCheck/types.ts

@@ -1,6 +1,6 @@
 import { SvgProps } from "react-native-svg";
-
-export interface GradientCheckProps extends SvgProps {
-  size?: number;
+import { SizeEnum } from "../../../../enums";
+export interface GradientCheckProps extends Omit<SvgProps, "width" | "height"> {
+  size?: SizeEnum.SMALL | SizeEnum.MEDIUM | SizeEnum.LARGE;
   color?: string;
 }

package/src/components/InformationStatus/components/GradientClose/index.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import Svg, {
   Path,
   Defs,
@@ -9,65 +10,117 @@ import Svg, {
   FeGaussianBlur,
   FeComposite,
   G,
-  SvgProps,
 } from "react-native-svg";
 import { GradientCloseProps } from "./types";
+import { SizeEnum } from "../../../../enums";
+import { View } from "react-native";
 
 export function GradientClose(props: GradientCloseProps, ref?: React.Ref<Svg>) {
-  const { size = 24, color = "currentColor" } = props;
+  const { size = SizeEnum.MEDIUM, color = "currentColor", style, ...rest } = props;
+
+  const ICON_CONFIG = {
+    [SizeEnum.SMALL]: {
+      path: "M12.1996 5.86579C12.7827 5.28276 12.7929 4.34777 12.2226 3.77745C11.6523 3.20709 10.7173 3.21738 10.1342 3.80041L8.02294 5.91172L5.86576 3.75449C5.29541 3.18417 4.36043 3.19442 3.7774 3.77745C3.19439 4.36048 3.18411 5.29547 3.75446 5.86579L5.91166 8.02297L3.80036 10.1343C3.21733 10.7173 3.20705 11.6523 3.7774 12.2227C4.34774 12.793 5.28272 12.7827 5.86576 12.1997L7.97706 10.0884L10.1342 12.2456C10.7046 12.8159 11.6396 12.8056 12.2226 12.2227C12.8056 11.6396 12.8159 10.7046 12.2455 10.1343L10.0883 7.97709L12.1996 5.86579Z",
+      viewBox: "0 0 16 16",
+      filter: {
+        id: "filter0_i_8151_1841",
+        x: "3.33333",
+        y: "3.33337",
+        width: "10.3333",
+        height: "10.3334",
+      },
+    },
+    [SizeEnum.MEDIUM]: {
+      path: "M18.2995 8.79862C19.174 7.92408 19.1894 6.5216 18.3339 5.66612C17.4784 4.81057 16.0759 4.82601 15.2014 5.70056L12.0344 8.86751L8.79864 5.63167C7.94313 4.77619 6.54065 4.79157 5.6661 5.66612C4.79159 6.54067 4.77618 7.94314 5.63169 8.79862L8.86749 12.0344L5.70054 15.2013C4.826 16.0759 4.81058 17.4784 5.6661 18.3339C6.52162 19.1894 7.92409 19.174 8.79864 18.2995L11.9656 15.1325L15.2014 18.3683C16.0569 19.2238 17.4594 19.2084 18.3339 18.3339C19.2084 17.4594 19.2238 16.0569 18.3683 15.2013L15.1325 11.9656L18.2995 8.79862Z",
+      viewBox: "0 0 24 24",
+      filter: {
+        id: "filter0_i_8151_1845",
+        x: "5",
+        y: "5",
+        width: "15",
+        height: "15",
+      },
+    },
+    [SizeEnum.LARGE]: {
+      path: "M24.3993 11.7315C25.5653 10.5654 25.5859 8.69543 24.4452 7.55478C23.3045 6.41405 21.4346 6.43464 20.2685 7.60071L16.0459 11.8233L11.7315 7.50886C10.5908 6.36822 8.72087 6.38872 7.55481 7.55478C6.38879 8.72085 6.36824 10.5908 7.50893 11.7315L11.8233 16.0458L7.60073 20.2684C6.43467 21.4345 6.41412 23.3044 7.55481 24.4452C8.69549 25.5858 10.5655 25.5653 11.7315 24.3993L15.9541 20.1767L20.2685 24.491C21.4092 25.6318 23.2791 25.6112 24.4452 24.4452C25.6112 23.2791 25.6318 21.4092 24.4911 20.2684L20.1767 15.9541L24.3993 11.7315Z",
+      viewBox: "0 0 32 32",
+      filter: {
+        id: "filter0_i_8151_1851",
+        x: "6.66667",
+        y: "6.66663",
+        width: "19.6667",
+        height: "19.6666",
+      },
+    },
+  };
+
+  const SIZE_MAP = {
+    [SizeEnum.SMALL]: 16,
+    [SizeEnum.MEDIUM]: 24,
+    [SizeEnum.LARGE]: 32,
+  };
+
+  const config = ICON_CONFIG[size] || ICON_CONFIG[SizeEnum.MEDIUM];
+  const filterId = config.filter.id;
+  const iconSize = SIZE_MAP[size] || 24;
 
   return (
-    <Svg
-      viewBox="0 0 16 16"
-      fill="none"
-      width={size}
-      height={size}
-      color={color}
-      ref={ref}
-      {...props}
-    >
-      <G filter="url(#filter0_i_3359_12279)">
-        <Path
-          d="M12.1996 5.86591C12.7827 5.28288 12.7929 4.3479 12.2226 3.77757C11.6523 3.20721 10.7173 3.2175 10.1342 3.80054L8.02294 5.91184L5.86576 3.75461C5.29541 3.18429 4.36043 3.19454 3.7774 3.77757C3.19439 4.36061 3.18411 5.29559 3.75446 5.86591L5.91166 8.02309L3.80036 10.1344C3.21733 10.7174 3.20705 11.6524 3.7774 12.2228C4.34774 12.7931 5.28272 12.7828 5.86576 12.1998L7.97706 10.0885L10.1342 12.2457C10.7046 12.8161 11.6396 12.8058 12.2226 12.2228C12.8056 11.6397 12.8159 10.7048 12.2455 10.1344L10.0883 7.97721L12.1996 5.86591Z"
-          fill="currentColor"
-        />
-      </G>
-      <Defs>
-        <Filter
-          id="filter0_i_3359_12279"
-          x="3.33333"
-          y="3.3335"
-          width="10.3333"
-          height="10.3335"
-          filterUnits="userSpaceOnUse"
-        >
-          <FeFlood floodOpacity="0" result="BackgroundImageFix" />
-          <FeBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="BackgroundImageFix"
-            result="shape"
-          />
-          <FeColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
+    <View style={[{ width: iconSize, height: iconSize }, style]}>
+      <Svg
+        width="100%"
+        height="100%"
+        viewBox={config.viewBox}
+        fill="none"
+        color={color}
+        ref={ref}
+        {...rest}
+      >
+        <G filter={`url(#${filterId})`}>
+          <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d={config.path}
+            fill="currentColor"
           />
-          <FeOffset dx="1" dy="1" />
-          <FeGaussianBlur stdDeviation="1" />
-          <FeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-          <FeColorMatrix
-            type="matrix"
-            values="0 0 0 0 0.898039 0 0 0 0 0.270588 0 0 0 0 0.270588 0 0 0 0.4 0"
-          />
-          <FeBlend
-            mode="normal"
-            in2="shape"
-            result="effect1_innerShadow_3359_12279"
-          />
-        </Filter>
-      </Defs>
-    </Svg>
+        </G>
+        <Defs>
+          <Filter
+            id={filterId}
+            x={config.filter.x}
+            y={config.filter.y}
+            width={config.filter.width}
+            height={config.filter.height}
+            filterUnits="userSpaceOnUse"
+          >
+            <FeFlood floodOpacity="0" result="BackgroundImageFix" />
+            <FeBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <FeColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              result="hardAlpha"
+            />
+            <FeOffset dx="1" dy="1" />
+            <FeGaussianBlur stdDeviation="1" />
+            <FeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+            <FeColorMatrix
+              type="matrix"
+              values="0 0 0 0 0.898039 0 0 0 0 0.270588 0 0 0 0 0.270588 0 0 0 0.4 0"
+            />
+            <FeBlend
+              mode="normal"
+              in2="shape"
+              result={`effect1_innerShadow_${filterId}`}
+            />
+          </Filter>
+        </Defs>
+      </Svg>
+    </View>
   );
 }
+

package/src/components/InformationStatus/components/GradientClose/types.ts

@@ -1,6 +1,7 @@
 import { SvgProps } from "react-native-svg";
+import { SizeEnum } from "../../../../enums";
 
-export interface GradientCloseProps extends SvgProps {
-  size?: number;
+export interface GradientCloseProps extends Omit<SvgProps, "width" | "height"> {
+  size?: SizeEnum.SMALL | SizeEnum.MEDIUM | SizeEnum.LARGE;
   color?: string;
 }

package/src/components/InformationStatus/index.tsx

@@ -20,24 +20,18 @@ export function InformationStatus(props: InformationStatusProps) {
     style,
   } = props;
 
-  const mappedIconSize = {
-    [SizeEnum.SMALL]: 16,
-    [SizeEnum.MEDIUM]: 24,
-    [SizeEnum.LARGE]: 32,
-  }[size];
-
   const iconMap = {
     [InformationStatusOptionsEnum.SUCCESS]: () => (
-      <GradientCheck size={mappedIconSize} color="#F2F7F7" />
+      <GradientCheck size={size} color="#F2F7F7" />
     ),
     [InformationStatusOptionsEnum.ERROR]: () => (
-      <GradientClose size={mappedIconSize} color="#F2F7F7" />
+      <GradientClose size={size} color="#F2F7F7" />
     ),
     [InformationStatusOptionsEnum.WARNING]: () => (
-      <GradientAlert size={mappedIconSize} color="#F2F7F7" />
+      <GradientAlert size={size} color="#F2F7F7" />
     ),
     [InformationStatusOptionsEnum.ADD]: () => (
-      <GradientAdd size={mappedIconSize} color="#F2F7F7" />
+      <GradientAdd size={size} color="#F2F7F7" />
     ),
   };
 

package/src/components/SelectButton/index.tsx

@@ -53,6 +53,7 @@ export function SelectButton(props: SelectButtonProps) {
           variant={RadioInputVariantEnum.GRAPE}
           isSelected={isSelected}
           disabled={disabled}
+          className="pointer-events-none"
         />
       );
     }

package/src/components/TextInput/assets/class-variants.ts

@@ -44,11 +44,11 @@ export const textInputContentVariants = cva("flex-1 flex-col text-chia-900", {
 });
 
 export const textInputFieldVariants = cva(
-  "font-nunito-bold text-[16px] leading-[18px] placeholder:text-chia-600 pt-[3px] android:pb-0 android:pl-0",
+  "font-nunito-bold text-[16px] leading-[18px] text-chia-900 placeholder:text-chia-600 ios:pt-[3px] android:p-0",
   {
     variants: {
       disabled: {
-        true: "text-chia-900",
+        true: "",
         false: "",
       },
       isValid: {

package/src/components/TextInput/index.tsx

@@ -113,7 +113,7 @@ export function TextInput({
             <Typography
               variant="label_small"
               weight="600"
-              className={labelClassName}
+              className={merge("text-chia-900", labelClassName)}
             >
               {label}:
             </Typography>