@ecohouse/ui 0.1.0 → 0.1.2

package/dist/index.js

@@ -1,267 +1,379 @@
-import { useRef, useLayoutEffect } from 'react';
-import { StyleSheet, Platform, TouchableOpacity, Text, View } from 'react-native';
+import { useRef, useState, useLayoutEffect } from 'react';
+import { StyleSheet, Platform, TouchableOpacity, Text, View, TextInput } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-// src/components/Button.tsx
+// src/components/Button/Button.tsx
 
-// src/icons/arrowUpRightPath.ts
-var ARROW_UP_RIGHT_PATH = "M14.1667 14.1668V5.8335H5.83333M14.1667 5.8335L5.83333 14.1668";
-function ArrowUpRightIcon({
-  size = 20,
-  color = "#082640",
-  strokeWidth = 2
-}) {
-  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
-    Path,
-    {
-      d: ARROW_UP_RIGHT_PATH,
-      stroke: color,
-      strokeWidth,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ) });
-}
+// src/icons/ArrowRight/arrowRightPath.ts
+var ARROW_RIGHT_PATH = "M4.16667 10H15.8333M15.8333 10L10 4.16667M15.8333 10L10 15.8333";
 
-// src/theme/tokens.ts
-var stormGray = {
-  "0": "#fbfcfc",
-  "0.5": "#eceef0",
-  "1": "#dadde0",
-  "1.5": "#c7cdd1",
-  "2": "#b5bcc1",
-  "3": "#8f9aa3",
-  "4": "#6a7984",
-  "5": "#455765",
-  "6": "#374651",
-  "7": "#29343d",
-  "8": "#1c2328",
-  "8.5": "#151a1e"
-};
-var navy = {
-  "0": "#f6fafe",
-  "0.5": "#dee5eb",
-  "1": "#c6d0d8",
-  "1.5": "#afbac5",
-  "2": "#97a5b2",
-  "3": "#677b8c",
-  "4": "#385066",
-  "5": "#082640",
-  "6": "#061e33",
-  "7": "#051726",
-  "8": "#030f1a",
-  "8.5": "#020b13"
-};
-var rubyRed = {
-  "0": "#fff5f6",
-  "0.5": "#f7dddf",
-  "1": "#efc4c8",
-  "1.5": "#e7acb1",
-  "2": "#df939a",
-  "3": "#ce626d",
-  "4": "#be313f",
-  "5": "#ae0011",
-  "6": "#8b000e",
-  "7": "#68000a",
-  "8": "#460007",
-  "8.5": "#340005"
-};
-var emeraldGreen = {
-  "0": "#f0fbf5",
-  "0.5": "#dcf2e5",
-  "1": "#c8e8d5",
-  "1.5": "#b4dfc5",
-  "2": "#a0d5b5",
-  "3": "#77c394",
-  "4": "#4fb074",
-  "5": "#279d54",
-  "6": "#1f7e43",
-  "7": "#175e32",
-  "8": "#103f22",
-  "8.5": "#0c2f19"
-};
-var brand = {
-  slateBlue: "#182e3c",
-  stormGray: stormGray["5"],
-  navy: navy["5"],
-  rubyRed: rubyRed["5"],
-  emeraldGreen: emeraldGreen["5"]
+// src/theme/colors.ts
+var grey = {
+  "0": "#767676",
+  "0.5": "#6E6E6E",
+  "1": "#666666",
+  "1.5": "#5E5E5E",
+  "2": "#565656",
+  "3": "#474747",
+  "4": "#373737",
+  "5": "#272727",
+  "6": "#1F1F1F",
+  "7": "#171717",
+  "7.5": "#161616",
+  "8": "#101010",
+  "8.5": "#0C0C0C",
+  "9": "#080808",
+  "9.5": "#040404"
 };
 var colors = {
-  // Brand colors
-  slateBlue: brand.slateBlue,
-  // Emerald Green — Figma scale + brand swatch
-  emeraldGreen0: emeraldGreen["0"],
-  emeraldGreen50: emeraldGreen["0.5"],
-  emeraldGreen100: emeraldGreen["1"],
-  emeraldGreen150: emeraldGreen["1.5"],
-  emeraldGreen200: emeraldGreen["2"],
-  emeraldGreen300: emeraldGreen["3"],
-  emeraldGreen400: emeraldGreen["4"],
-  emeraldGreen500: emeraldGreen["5"],
-  emeraldGreen600: emeraldGreen["6"],
-  emeraldGreen700: emeraldGreen["7"],
-  emeraldGreen800: emeraldGreen["8"],
-  emeraldGreen850: emeraldGreen["8.5"],
-  /** Primary brand emerald green — Figma Emerald Green 5 */
-  emeraldGreen: brand.emeraldGreen,
-  // Ruby Red — Figma scale + brand swatch
-  rubyRed0: rubyRed["0"],
-  rubyRed50: rubyRed["0.5"],
-  rubyRed100: rubyRed["1"],
-  rubyRed150: rubyRed["1.5"],
-  rubyRed200: rubyRed["2"],
-  rubyRed300: rubyRed["3"],
-  rubyRed400: rubyRed["4"],
-  rubyRed500: rubyRed["5"],
-  rubyRed600: rubyRed["6"],
-  rubyRed700: rubyRed["7"],
-  rubyRed800: rubyRed["8"],
-  rubyRed850: rubyRed["8.5"],
-  /** Primary brand ruby red — Figma Ruby Red 5 */
-  rubyRed: brand.rubyRed,
-  // Navy — Figma scale + brand swatch
-  navy0: navy["0"],
-  navy50: navy["0.5"],
-  navy100: navy["1"],
-  navy150: navy["1.5"],
-  navy200: navy["2"],
-  navy300: navy["3"],
-  navy400: navy["4"],
-  navy500: navy["5"],
-  navy600: navy["6"],
-  navy700: navy["7"],
-  navy800: navy["8"],
-  navy850: navy["8.5"],
-  /** Primary brand navy — Figma Navy 5 */
-  navy: brand.navy,
-  // Storm Gray — Figma scale + brand swatch
-  stormGray0: stormGray["0"],
-  stormGray50: stormGray["0.5"],
-  stormGray100: stormGray["1"],
-  stormGray150: stormGray["1.5"],
-  stormGray200: stormGray["2"],
-  stormGray300: stormGray["3"],
-  stormGray400: stormGray["4"],
-  stormGray500: stormGray["5"],
-  /** Figma brand swatch "Storm Gray" — same as `stormGray500` */
-  stormGrayBrand: brand.stormGray,
-  stormGray600: stormGray["6"],
-  stormGray700: stormGray["7"],
-  stormGray800: stormGray["8"],
-  stormGray850: stormGray["8.5"],
-  /** @deprecated Use `stormGray0` */
-  storm0: stormGray["0"],
-  /** @deprecated Use `stormGray50` */
-  storm50: stormGray["0.5"],
-  /** @deprecated Use `stormGray200` */
-  storm200: stormGray["2"],
-  /** @deprecated Use `stormGray300` */
-  storm300: stormGray["3"],
-  /** @deprecated Use `stormGray500` */
-  storm500: stormGray["5"],
-  /** @deprecated Use `stormGray700` */
-  storm700: stormGray["7"],
-  /** @deprecated Use `stormGray850` */
-  storm900: stormGray["8.5"],
-  countrySelectorSelectedBg: `${stormGray["0.5"]}99`,
+  primary: "#B46436",
+  black: "#000000",
   white: "#ffffff",
-  error: "#dc2626",
-  errorDark: "#b3261e",
-  errorLight: "#fee2e2",
-  /** @deprecated Use `rubyRed` */
-  inputError: brand.rubyRed,
-  inputOutlineFocus: navy["0.5"],
-  inputOutlineError: rubyRed["0.5"],
-  warning: "#92400e",
-  warningBg: "#fef3c7",
-  success: "#28a745",
-  successMuted: "#9fd4a8",
-  /** @deprecated Use `emeraldGreen` */
-  green: brand.emeraldGreen,
-  transparent: "transparent"
-};
-var radii = {
-  sm: 8,
-  md: 12,
-  lg: 16,
-  xl: 20,
-  full: 9999
-};
-var spacing = {
-  xs: 4,
-  sm: 8,
-  md: 12,
-  lg: 16,
-  xl: 24,
-  xxl: 32
-};
-var fontSize = {
-  xs: 11,
-  sm: 12,
-  md: 14,
-  base: 16,
-  lg: 18,
-  xl: 24,
-  xxl: 32
-};
-var typographyScale = {
-  12: { fontSize: 12, lineHeight: 16 },
-  14: { fontSize: 14, lineHeight: 19 },
-  18: { fontSize: 18, lineHeight: 24 },
-  20: { fontSize: 20, lineHeight: 27 },
-  24: { fontSize: 24, lineHeight: 25 },
-  32: { fontSize: 32, lineHeight: 34 }
-};
-var fontWeight = {
-  regular: "400",
-  medium: "500",
-  semibold: "600",
-  bold: "700"
+  dark: "#090909",
+  red: "#A63E3E",
+  lightGrey: "#B7B7B7",
+  primaryMuted: "#B464360F",
+  redMuted: "#A63E3E0F",
+  grey0: grey["0"],
+  grey50: grey["0.5"],
+  grey100: grey["1"],
+  grey150: grey["1.5"],
+  grey200: grey["2"],
+  grey300: grey["3"],
+  grey400: grey["4"],
+  grey500: grey["5"],
+  grey600: grey["6"],
+  grey700: grey["7"],
+  grey750: grey["7.5"],
+  grey800: grey["8"],
+  grey850: grey["8.5"],
+  grey900: grey["9"],
+  grey950: grey["9.5"]
 };
+
+// src/theme/typography.ts
 var fonts = {
   sans: "Noto Sans Armenian"
 };
-var labelTypography = {
-  fontFamily: fonts.sans,
-  fontSize: typographyScale[12].fontSize,
-  fontWeight: fontWeight.medium,
-  lineHeight: typographyScale[12].lineHeight,
-  letterSpacing: 0
-};
 var buttonTypography = {
   lg: {
     fontFamily: fonts.sans,
-    fontSize: typographyScale[14].fontSize,
-    fontWeight: fontWeight.semibold,
-    lineHeight: typographyScale[14].lineHeight,
-    letterSpacing: 0
+    fontSize: 14,
+    fontWeight: "600",
+    lineHeight: 14,
+    letterSpacing: 0.42
   },
   sm: {
     fontFamily: fonts.sans,
-    fontSize: typographyScale[12].fontSize,
-    fontWeight: fontWeight.semibold,
-    lineHeight: typographyScale[12].lineHeight,
-    letterSpacing: 0
+    fontSize: 12,
+    fontWeight: "600",
+    lineHeight: 12,
+    letterSpacing: 0.36
   }
 };
-var shadows = {
-  card: {
-    shadowColor: colors.navy,
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.05,
-    shadowRadius: 20,
-    elevation: 2
+var inputTypography = {
+  label: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "500",
+    lineHeight: 16,
+    letterSpacing: 0
+  },
+  field: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "400",
+    lineHeight: 19,
+    letterSpacing: 0
   },
-  cardLg: {
-    shadowColor: colors.navy,
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.1,
-    shadowRadius: 20,
-    elevation: 4
+  hint: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "400",
+    lineHeight: 16,
+    letterSpacing: 0
   }
 };
+function ArrowRightIcon({
+  size = 20,
+  color = colors.primary,
+  strokeWidth = 2
+}) {
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
+    Path,
+    {
+      d: ARROW_RIGHT_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
+// src/icons/Bag/bagPath.ts
+var BAG_PATH = "M9.23047 9H7.2002C6.08009 9 5.51962 9 5.0918 9.21799C4.71547 9.40973 4.40973 9.71547 4.21799 10.0918C4 10.5196 4 11.0801 4 12.2002V17.8002C4 18.9203 4 19.4801 4.21799 19.9079C4.40973 20.2842 4.71547 20.5905 5.0918 20.7822C5.5192 21 6.07902 21 7.19694 21H16.8031C17.921 21 18.48 21 18.9074 20.7822C19.2837 20.5905 19.5905 20.2842 19.7822 19.9079C20 19.4805 20 18.9215 20 17.8036V12.1969C20 11.079 20 10.5192 19.7822 10.0918C19.5905 9.71547 19.2837 9.40973 18.9074 9.21799C18.4796 9 17.9203 9 16.8002 9H14.7689M9.23047 9H14.7689M9.23047 9C9.10302 9 9 8.89668 9 8.76923V6C9 4.34315 10.3431 3 12 3C13.6569 3 15 4.34315 15 6V8.76923C15 8.89668 14.8964 9 14.7689 9";
+function BagIcon({ size = 24, color = colors.primary, strokeWidth = 2 }) {
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+    Path,
+    {
+      d: BAG_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
+// src/icons/Bell/bellPath.ts
+var BELL_PATH = "M7.5 17.5H12.5M10 2.5C7.23858 2.5 5 4.73858 5 7.5C5 8.51208 5.3007 9.45393 5.81764 10.2411C6.61256 11.4515 7.00967 12.0564 7.06127 12.1467C7.52024 12.9508 7.43573 12.6672 7.49349 13.5913C7.49998 13.6952 7.5 13.8524 7.5 14.1667C7.5 14.6269 7.8731 15 8.33333 15L11.6667 15C12.1269 15 12.5 14.6269 12.5 14.1667C12.5 13.8524 12.5 13.6952 12.5065 13.5913C12.5643 12.6672 12.4793 12.9509 12.9382 12.1467C12.9898 12.0564 13.3876 11.4515 14.1825 10.2411C14.6995 9.45393 15.0002 8.51208 15.0002 7.5C15.0002 4.73858 12.7614 2.5 10 2.5Z";
+function BellIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
+    Path,
+    {
+      d: BELL_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
+// src/icons/Building/buildingPath.ts
+var BUILDING_PATH = "M7.5 9.16659V16.6666M7.5 9.16659H3.83301C3.3663 9.16659 3.13318 9.16659 2.95492 9.25741C2.79811 9.33731 2.67072 9.4647 2.59083 9.6215C2.5 9.79976 2.5 10.0333 2.5 10.5V16.6666H7.5M7.5 9.16659V4.66667C7.5 4.19996 7.5 3.96643 7.59083 3.78817C7.67072 3.63137 7.79811 3.50397 7.95492 3.42408C8.13317 3.33325 8.3663 3.33325 8.83301 3.33325H11.1663C11.6331 3.33325 11.8669 3.33325 12.0452 3.42408C12.202 3.50397 12.329 3.63137 12.4089 3.78817C12.4997 3.96643 12.5 4.19996 12.5 4.66667V6.66659M7.5 16.6666H12.5M12.5 16.6666L17.5 16.6667V8C17.5 7.53329 17.4997 7.29976 17.4089 7.1215C17.329 6.9647 17.2024 6.83731 17.0456 6.75741C16.8674 6.66659 16.6334 6.66659 16.1667 6.66659H12.5M12.5 16.6666V6.66659";
+function BuildingIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
+    Path,
+    {
+      d: BUILDING_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
+// src/icons/Camera/cameraPath.ts
+var CAMERA_PATH = "M9.48898 7H6.2002C5.08009 7 4.51962 7 4.0918 7.21799C3.71547 7.40973 3.40973 7.71547 3.21799 8.0918C3 8.51962 3 9.08009 3 10.2002V15.8002C3 16.9203 3 17.4796 3.21799 17.9074C3.40973 18.2837 3.71547 18.5905 4.0918 18.7822C4.5192 19 5.07899 19 6.19691 19H17.8031C18.921 19 19.48 19 19.9074 18.7822C20.2837 18.5905 20.5905 18.2837 20.7822 17.9074C21 17.48 21 16.921 21 15.8031V10.1969C21 9.07899 21 8.5192 20.7822 8.0918C20.5905 7.71547 20.2837 7.40973 19.9074 7.21799C19.4796 7 18.9203 7 17.8002 7H14.5108M9.48898 7H9.55078M9.48898 7C9.50151 7.00001 9.51468 7 9.52857 7L9.55078 7M9.48898 7C9.38286 6.99995 9.32339 6.99941 9.27637 6.99414C8.68878 6.92835 8.28578 6.36908 8.40918 5.79084C8.42066 5.73703 8.44336 5.66894 8.4883 5.53412L8.49023 5.52841C8.54156 5.37443 8.56723 5.29743 8.59558 5.22949C8.88586 4.53389 9.54322 4.06083 10.2949 4.00541C10.3683 4 10.449 4 10.6113 4H13.3886C13.5509 4 13.6322 4 13.7057 4.00541C14.4574 4.06083 15.114 4.53389 15.4043 5.22949C15.4326 5.29743 15.4584 5.37434 15.5098 5.52832C15.556 5.66699 15.5791 5.73636 15.5908 5.79093C15.7142 6.36917 15.3118 6.92835 14.7242 6.99414C14.6772 6.99941 14.6171 6.99995 14.5108 7M9.55078 7H14.449M14.449 7H14.5108M14.449 7L14.4712 7C14.4851 7 14.4983 7.00001 14.5108 7M12 16C10.3431 16 9 14.6569 9 13C9 11.3431 10.3431 10 12 10C13.6569 10 15 11.3431 15 13C15 14.6569 13.6569 16 12 16Z";
+function CameraIcon({ size = 24, color = colors.primary, strokeWidth = 2 }) {
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+    Path,
+    {
+      d: CAMERA_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
+// src/icons/CheckBadge/checkBadgePath.ts
+var CHECK_BADGE_PATH = "M12.5 8.33317L9.16663 11.6665L7.49996 9.99984M11.0384 2.88233L12.0558 3.74941C12.3122 3.96786 12.6305 4.09992 12.9662 4.12671L14.2987 4.23291C15.0822 4.29543 15.7045 4.91733 15.767 5.70077L15.8729 7.03353C15.8997 7.36925 16.0322 7.68799 16.2507 7.94433L17.1174 8.96152C17.6272 9.5597 17.6272 10.4396 17.1175 11.0378L16.2508 12.0551C16.0323 12.3115 15.9 12.6303 15.8732 12.9661L15.7666 14.2986C15.704 15.082 15.0827 15.7043 14.2993 15.7668L12.9663 15.8732C12.6305 15.9 12.312 16.0317 12.0556 16.2502L11.0384 17.1173C10.4402 17.627 9.55973 17.6271 8.96155 17.1174L7.9443 16.2502C7.68796 16.0318 7.36938 15.8998 7.03365 15.8731L5.70064 15.7668C4.9172 15.7043 4.29588 15.0822 4.23336 14.2987L4.12675 12.9661C4.09996 12.6304 3.96759 12.3118 3.74915 12.0555L2.88245 11.0378C2.37268 10.4397 2.37244 9.56002 2.88221 8.96184L3.74969 7.94418C3.96814 7.68784 4.09923 7.36926 4.12602 7.03353L4.23263 5.70093C4.29515 4.91749 4.91826 4.29535 5.70171 4.23283L7.03324 4.12663C7.36897 4.09984 7.68771 3.96788 7.94404 3.74943L8.96164 2.88233C9.55982 2.37256 10.4402 2.37256 11.0384 2.88233Z";
+function CheckBadgeIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
+    Path,
+    {
+      d: CHECK_BADGE_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
+// src/icons/Clock/clockPath.ts
+var CLOCK_PATH = "M12 7V12H17M12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21Z";
+function ClockIcon({ size = 24, color = colors.primary, strokeWidth = 2 }) {
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+    Path,
+    {
+      d: CLOCK_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
+// src/icons/Facebook/facebookPath.ts
+var FACEBOOK_PATH = "M10.0003 1.69922C5.41699 1.69922 1.66699 5.44089 1.66699 10.0492C1.66699 14.2159 4.71699 17.6742 8.70033 18.2992V12.4659H6.58366V10.0492H8.70033V8.20755C8.70033 6.11589 9.94199 4.96589 11.8503 4.96589C12.7587 4.96589 13.7087 5.12422 13.7087 5.12422V7.18255H12.6587C11.6253 7.18255 11.3003 7.82422 11.3003 8.48255V10.0492H13.617L13.242 12.4659H11.3003V18.2992C13.264 17.9891 15.0522 16.9871 16.3419 15.4743C17.6317 13.9614 18.3381 12.0373 18.3337 10.0492C18.3337 5.44089 14.5837 1.69922 10.0003 1.69922Z";
+function FacebookIcon({ size = 20, color = colors.white }) {
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(Path, { d: FACEBOOK_PATH, fill: color }) });
+}
+
+// src/icons/Home/homePath.ts
+var HOME_PATH = "M1.66675 16.6667H3.33341M3.33341 16.6667H8.33341M3.33341 16.6667V9.54352C3.33341 9.09823 3.33341 8.87548 3.38756 8.66828C3.43554 8.48466 3.51491 8.31089 3.6215 8.15387C3.74178 7.97668 3.90895 7.82974 4.24406 7.53652L8.24538 4.03537C8.86662 3.49178 9.17726 3.21997 9.5271 3.11652C9.83559 3.02529 10.1644 3.02529 10.4729 3.11652C10.823 3.22005 11.1341 3.49212 11.7563 4.03652L15.7563 7.53652C16.0914 7.82974 16.2586 7.97668 16.3789 8.15387C16.4855 8.31089 16.5642 8.48466 16.6122 8.66828C16.6664 8.87548 16.6667 9.09824 16.6667 9.54352V16.6667M8.33341 16.6667H11.6667M8.33341 16.6667V13.3334C8.33341 12.4129 9.07961 11.6667 10.0001 11.6667C10.9206 11.6667 11.6667 12.4129 11.6667 13.3334V16.6667M11.6667 16.6667H16.6667M16.6667 16.6667H18.3334";
+function HomeIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
+    Path,
+    {
+      d: HOME_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
+// src/icons/Instagram/instagramPath.ts
+var INSTAGRAM_PATH = "M6.49984 1.66748H13.4998C16.1665 1.66748 18.3332 3.83415 18.3332 6.50081V13.5008C18.3332 14.7827 17.8239 16.0121 16.9175 16.9185C16.0111 17.8249 14.7817 18.3341 13.4998 18.3341H6.49984C3.83317 18.3341 1.6665 16.1675 1.6665 13.5008V6.50081C1.6665 5.21893 2.17573 3.98956 3.08215 3.08313C3.98858 2.17671 5.21796 1.66748 6.49984 1.66748ZM6.33317 3.33415C5.53752 3.33415 4.77446 3.65022 4.21185 4.21283C3.64924 4.77544 3.33317 5.5385 3.33317 6.33415V13.6675C3.33317 15.3258 4.67484 16.6675 6.33317 16.6675H13.6665C14.4622 16.6675 15.2252 16.3514 15.7878 15.7888C16.3504 15.2262 16.6665 14.4631 16.6665 13.6675V6.33415C16.6665 4.67581 15.3248 3.33415 13.6665 3.33415H6.33317ZM14.3748 4.58415C14.6511 4.58415 14.9161 4.69389 15.1114 4.88924C15.3068 5.08459 15.4165 5.34955 15.4165 5.62581C15.4165 5.90208 15.3068 6.16703 15.1114 6.36238C14.9161 6.55773 14.6511 6.66748 14.3748 6.66748C14.0986 6.66748 13.8336 6.55773 13.6383 6.36238C13.4429 6.16703 13.3332 5.90208 13.3332 5.62581C13.3332 5.34955 13.4429 5.08459 13.6383 4.88924C13.8336 4.69389 14.0986 4.58415 14.3748 4.58415ZM9.99984 5.83415C11.1049 5.83415 12.1647 6.27313 12.9461 7.05454C13.7275 7.83594 14.1665 8.89574 14.1665 10.0008C14.1665 11.1059 13.7275 12.1657 12.9461 12.9471C12.1647 13.7285 11.1049 14.1675 9.99984 14.1675C8.89477 14.1675 7.83496 13.7285 7.05356 12.9471C6.27216 12.1657 5.83317 11.1059 5.83317 10.0008C5.83317 8.89574 6.27216 7.83594 7.05356 7.05454C7.83496 6.27313 8.89477 5.83415 9.99984 5.83415ZM9.99984 7.50081C9.3368 7.50081 8.70091 7.76421 8.23207 8.23305C7.76323 8.70189 7.49984 9.33777 7.49984 10.0008C7.49984 10.6639 7.76323 11.2997 8.23207 11.7686C8.70091 12.2374 9.3368 12.5008 9.99984 12.5008C10.6629 12.5008 11.2988 12.2374 11.7676 11.7686C12.2364 11.2997 12.4998 10.6639 12.4998 10.0008C12.4998 9.33777 12.2364 8.70189 11.7676 8.23305C11.2988 7.76421 10.6629 7.50081 9.99984 7.50081Z";
+function InstagramIcon({ size = 20, color = colors.white }) {
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(Path, { d: INSTAGRAM_PATH, fill: color }) });
+}
+
+// src/icons/Key/keyPath.ts
+var KEY_PATH = "M5.28673 10.0002L7.0545 11.768M7.6435 7.64301L9.41127 9.41078M10.0003 5.28624L11.768 7.05401M4.22553 11.0604L11.0609 4.22505C11.7209 3.56502 12.0513 3.235 12.4318 3.11136C12.7666 3.00259 13.127 3.00259 13.4618 3.11136C13.8421 3.23494 14.1718 3.56464 14.8311 4.22393L15.775 5.16785C16.4351 5.82788 16.7654 6.15867 16.8891 6.53922C16.9979 6.87396 16.9976 7.23381 16.8889 7.56855C16.7652 7.9491 16.4353 8.27937 15.7753 8.9394L8.93989 15.7748C8.27986 16.4348 7.94959 16.7647 7.56904 16.8884C7.2343 16.9971 6.87445 16.9974 6.53971 16.8886C6.15916 16.765 5.82837 16.4346 5.16834 15.7745L4.22441 14.8306C3.56513 14.1713 3.23542 13.8416 3.11185 13.4613C3.00308 13.1266 3.00308 12.7661 3.11185 12.4313C3.23549 12.0508 3.56551 11.7204 4.22553 11.0604Z";
+function KeyIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
+    Path,
+    {
+      d: KEY_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
+// src/icons/LinkedIn/linkedinPath.ts
+var LINKEDIN_PATH = "M15.8333 2.50098C16.2754 2.50098 16.6993 2.67657 17.0118 2.98913C17.3244 3.30169 17.5 3.72562 17.5 4.16764V15.8343C17.5 16.2763 17.3244 16.7003 17.0118 17.0128C16.6993 17.3254 16.2754 17.501 15.8333 17.501H4.16667C3.72464 17.501 3.30072 17.3254 2.98816 17.0128C2.67559 16.7003 2.5 16.2763 2.5 15.8343V4.16764C2.5 3.72562 2.67559 3.30169 2.98816 2.98913C3.30072 2.67657 3.72464 2.50098 4.16667 2.50098H15.8333ZM15.4167 15.4176V11.001C15.4167 10.2805 15.1304 9.58948 14.621 9.08C14.1115 8.57053 13.4205 8.28431 12.7 8.28431C11.9917 8.28431 11.1667 8.71764 10.7667 9.36764V8.44264H8.44167V15.4176H10.7667V11.3093C10.7667 10.6676 11.2833 10.1426 11.925 10.1426C12.2344 10.1426 12.5312 10.2656 12.75 10.4844C12.9687 10.7031 13.0917 10.9999 13.0917 11.3093V15.4176H15.4167ZM5.73333 7.13431C6.10464 7.13431 6.46073 6.98681 6.72328 6.72426C6.98583 6.46171 7.13333 6.10561 7.13333 5.73431C7.13333 4.95931 6.50833 4.32598 5.73333 4.32598C5.35982 4.32598 5.0016 4.47435 4.73749 4.73847C4.47338 5.00258 4.325 5.3608 4.325 5.73431C4.325 6.50931 4.95833 7.13431 5.73333 7.13431ZM6.89167 15.4176V8.44264H4.58333V15.4176H6.89167Z";
+function LinkedInIcon({ size = 20, color = colors.white }) {
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(Path, { d: LINKEDIN_PATH, fill: color }) });
+}
+
+// src/icons/Mail/mailPath.ts
+var MAIL_PATH = "M3.33333 4.99984L8.42303 8.84339L8.42473 8.8448C8.98987 9.25924 9.27261 9.46658 9.5823 9.54668C9.85602 9.61748 10.1438 9.61748 10.4175 9.54668C10.7274 9.46651 11.011 9.25856 11.5771 8.84339C11.5771 8.84339 14.8417 6.33812 16.6667 4.99984M2.5 13.1667V6.83333C2.5 5.89991 2.5 5.43285 2.68166 5.07633C2.84144 4.76273 3.09623 4.50795 3.40983 4.34816C3.76635 4.1665 4.23341 4.1665 5.16683 4.1665H14.8335C15.7669 4.1665 16.233 4.1665 16.5895 4.34816C16.9031 4.50795 17.1587 4.76273 17.3185 5.07633C17.5 5.43251 17.5 5.899 17.5 6.8306V13.1695C17.5 14.1011 17.5 14.5669 17.3185 14.9231C17.1587 15.2367 16.9031 15.4919 16.5895 15.6517C16.2333 15.8332 15.7675 15.8332 14.8359 15.8332H5.16409C4.23249 15.8332 3.766 15.8332 3.40983 15.6517C3.09623 15.4919 2.84144 15.2367 2.68166 14.9231C2.5 14.5666 2.5 14.1001 2.5 13.1667Z";
+function MailIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
+    Path,
+    {
+      d: MAIL_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
+// src/icons/Navigate/navigatePath.ts
+var NAVIGATE_PATH = "M5.691 14.2339C11.5836 17.7694 16.2976 13.0554 15.7084 4.21658C6.86968 3.62732 2.15584 8.34151 5.691 14.2339ZM5.691 14.2339C5.69093 14.2338 5.69107 14.234 5.691 14.2339ZM5.691 14.2339L4.16675 15.7576M5.691 14.2339L8.88079 11.0436";
+function NavigateIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
+    Path,
+    {
+      d: NAVIGATE_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
+// src/icons/Phone/phonePath.ts
+var PHONE_PATH = "M7.91872 3.54768C7.66561 2.91492 7.05276 2.5 6.37126 2.5H4.07895C3.20692 2.5 2.5 3.20675 2.5 4.07878C2.5 11.491 8.50898 17.5 15.9212 17.5C16.7933 17.5 17.5 16.793 17.5 15.921L17.5004 13.6283C17.5004 12.9468 17.0856 12.334 16.4528 12.0809L14.2558 11.2024C13.6874 10.9751 13.0402 11.0774 12.57 11.4693L12.0029 11.9422C11.3407 12.4941 10.3664 12.4502 9.75683 11.8407L8.16018 10.2425C7.55066 9.63302 7.50561 8.65945 8.05745 7.99724L8.53027 7.43025C8.92218 6.95996 9.02541 6.31263 8.79805 5.74424L7.91872 3.54768Z";
+function PhoneIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
+    Path,
+    {
+      d: PHONE_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
+// src/icons/Show/showPath.ts
+var SHOW_PATH = "M1.66669 10C1.66669 10 4.16669 4.16667 10 4.16667C15.8334 4.16667 18.3334 10 18.3334 10C18.3334 10 15.8334 15.8333 10 15.8333C4.16669 15.8333 1.66669 10 1.66669 10Z";
+var SHOW_PUPIL_PATH = "M10 12.5C11.3807 12.5 12.5 11.3807 12.5 10C12.5 8.61929 11.3807 7.5 10 7.5C8.61929 7.5 7.5 8.61929 7.5 10C7.5 11.3807 8.61929 12.5 10 12.5Z";
+function ShowIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
+  return /* @__PURE__ */ jsxs(Svg, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: [
+    /* @__PURE__ */ jsx(
+      Path,
+      {
+        d: SHOW_PATH,
+        stroke: color,
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Path,
+      {
+        d: SHOW_PUPIL_PATH,
+        stroke: color,
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
+
+// src/icons/User/userPath.ts
+var USER_PATH = "M15.8334 17.5C15.8334 14.2783 13.2217 11.6667 10 11.6667C6.77836 11.6667 4.16669 14.2783 4.16669 17.5M10 9.16667C8.15907 9.16667 6.66669 7.67428 6.66669 5.83333C6.66669 3.99238 8.15907 2.5 10 2.5C11.841 2.5 13.3334 3.99238 13.3334 5.83333C13.3334 7.67428 11.841 9.16667 10 9.16667Z";
+function UserIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
+    Path,
+    {
+      d: USER_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
+// src/icons/registry.ts
+var icons = {
+  arrowRight: ArrowRightIcon,
+  bag: BagIcon,
+  bell: BellIcon,
+  building: BuildingIcon,
+  camera: CameraIcon,
+  checkBadge: CheckBadgeIcon,
+  clock: ClockIcon,
+  facebook: FacebookIcon,
+  home: HomeIcon,
+  instagram: InstagramIcon,
+  key: KeyIcon,
+  linkedin: LinkedInIcon,
+  mail: MailIcon,
+  navigate: NavigateIcon,
+  phone: PhoneIcon,
+  show: ShowIcon,
+  user: UserIcon
+};
+var iconNames = Object.keys(icons);
+var iconGroups = {
+  navigation: ["arrowRight", "home", "navigate"],
+  actions: ["show", "bell", "camera", "key", "checkBadge"],
+  objects: ["bag", "building", "clock", "user"],
+  communication: ["mail", "phone"],
+  social: ["facebook", "instagram", "linkedin"]
+};
+var iconGroupNames = Object.keys(iconGroups);
+function getIconsByGroup(group) {
+  return [...iconGroups[group]];
+}
+function Icon({ name, ...props }) {
+  const Component = icons[name];
+  return /* @__PURE__ */ jsx(Component, { ...props });
+}
 function hasClassList(node) {
   return typeof node === "object" && node !== null && "classList" in node && typeof node.classList?.add === "function";
 }
@@ -303,60 +415,43 @@ function useApplyWebClassName(ref, className, enabled = true) {
   }, [ref, className, enabled]);
 }
 var variantConfig = {
-  white: {
-    backgroundColor: colors.white,
-    textColor: colors.slateBlue,
-    iconBadgeBackgroundColor: colors.stormGray150,
-    iconColor: colors.navy
-  },
   primary: {
-    backgroundColor: colors.navy,
-    textColor: colors.stormGray0,
+    backgroundColor: colors.primary,
+    textColor: colors.white,
     iconBadgeBackgroundColor: colors.white,
-    iconColor: colors.navy
+    iconColor: colors.primary
   },
-  green: {
-    backgroundColor: colors.green,
-    textColor: colors.stormGray0,
-    iconBadgeBackgroundColor: colors.white,
-    iconColor: colors.green
-  },
-  gray: {
-    backgroundColor: colors.stormGray50,
-    textColor: colors.slateBlue,
-    iconBadgeBackgroundColor: colors.stormGray150,
-    iconColor: colors.navy
+  secondary: {
+    backgroundColor: colors.grey500,
+    textColor: colors.white,
+    iconBadgeBackgroundColor: colors.grey600,
+    iconColor: colors.white
   }
 };
 var sizeConfig = {
   lg: {
-    /** Matches Tailwind `h-13` so size stays stable before web classNames attach. */
-    minHeight: 52,
-    borderRadius: 16,
-    paddingTop: 8,
-    paddingRight: 8,
-    paddingBottom: 8,
-    paddingLeft: 24,
-    paddingHorizontalCentered: 24,
+    minHeight: 44,
+    borderRadius: 40,
+    paddingVertical: 4,
+    paddingLeft: 20,
+    paddingRightWithIcon: 4,
+    paddingRight: 20,
+    gap: 20,
     text: buttonTypography.lg,
     iconContainerSize: 36,
-    iconContainerRadius: 12,
-    iconContainerPadding: 8,
     iconSize: 20
   },
   sm: {
-    minHeight: 40,
-    borderRadius: 12,
-    paddingTop: 8,
-    paddingRight: 8,
-    paddingBottom: 8,
-    paddingLeft: 16,
-    paddingHorizontalCentered: 16,
+    minHeight: 32,
+    borderRadius: 40,
+    paddingVertical: 6,
+    paddingLeft: 12,
+    paddingRightWithIcon: 4,
+    paddingRight: 12,
+    gap: 12,
     text: buttonTypography.sm,
-    iconContainerSize: 32,
-    iconContainerRadius: 8,
-    iconContainerPadding: 8,
-    iconSize: 16
+    iconContainerSize: 20,
+    iconSize: 12
   }
 };
 function Button({
@@ -381,22 +476,22 @@ function Button({
   const hasCustomChildren = typeof children !== "undefined";
   const customIcon = icon != null && typeof icon !== "boolean" ? icon : void 0;
   const hasIcon = showIcon || icon === true || customIcon != null;
-  const resolvedContainerClassName = [Platform.OS === "web" ? "max-md:px-4!" : "", className].filter(Boolean).join(" ");
-  useApplyWebClassName(containerRef, resolvedContainerClassName || void 0);
+  const resolvedContainerClassName = className?.trim() || void 0;
+  useApplyWebClassName(containerRef, resolvedContainerClassName);
   useApplyWebClassName(textRef, textClassName);
-  const iconNode = customIcon ?? /* @__PURE__ */ jsx(ArrowUpRightIcon, { size: metrics.iconSize, color: preset.iconColor });
+  const iconNode = customIcon ?? /* @__PURE__ */ jsx(ArrowRightIcon, { size: metrics.iconSize, color: preset.iconColor });
   const containerStyle = [
     styles.base,
     {
       minHeight: metrics.minHeight,
       borderRadius: metrics.borderRadius,
       backgroundColor: preset.backgroundColor,
-      paddingTop: metrics.paddingTop,
-      paddingBottom: metrics.paddingBottom,
-      paddingLeft: hasIcon ? metrics.paddingLeft : metrics.paddingHorizontalCentered,
-      paddingRight: hasIcon ? metrics.paddingRight : metrics.paddingHorizontalCentered
+      paddingTop: metrics.paddingVertical,
+      paddingBottom: metrics.paddingVertical,
+      paddingLeft: metrics.paddingLeft,
+      paddingRight: hasIcon ? metrics.paddingRightWithIcon : metrics.paddingRight,
+      gap: hasIcon ? metrics.gap : 0
     },
-    hasIcon ? styles.withIcon : styles.centered,
     disabled && styles.disabled,
     style
   ];
@@ -406,7 +501,6 @@ function Button({
     { color: preset.textColor },
     Platform.OS === "android" ? styles.labelAndroid : null,
     !hasIcon && styles.labelCentered,
-    hasIcon && styles.labelWithIcon,
     textStyle
   ];
   return /* @__PURE__ */ jsxs(
@@ -429,8 +523,7 @@ function Button({
               {
                 width: metrics.iconContainerSize,
                 height: metrics.iconContainerSize,
-                borderRadius: metrics.iconContainerRadius,
-                padding: metrics.iconContainerPadding,
+                borderRadius: metrics.iconContainerSize / 2,
                 backgroundColor: preset.iconBadgeBackgroundColor
               }
             ],
@@ -445,14 +538,9 @@ var styles = StyleSheet.create({
   base: {
     flexDirection: "row",
     alignItems: "center",
+    alignSelf: "flex-start",
     borderWidth: 0
   },
-  centered: {
-    justifyContent: "center"
-  },
-  withIcon: {
-    justifyContent: "space-between"
-  },
   disabled: {
     opacity: 0.6
   },
@@ -463,18 +551,252 @@ var styles = StyleSheet.create({
   labelCentered: {
     textAlign: "center"
   },
-  labelWithIcon: {
+  iconContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  }
+});
+var DEFAULT_WIDTH = 308;
+var sizeConfig2 = {
+  lg: {
+    height: 44,
+    borderRadius: 60,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    gap: 10,
+    iconSize: 20,
+    text: inputTypography.field
+  },
+  sm: {
+    height: 32,
+    borderRadius: 60,
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    gap: 8,
+    iconSize: 16,
+    text: inputTypography.hint
+  }
+};
+function resolveState({
+  state,
+  disabled,
+  error,
+  focused,
+  hasValue
+}) {
+  if (state) return state;
+  if (disabled) return "disabled";
+  if (error) return "error";
+  if (focused) return "active";
+  if (hasValue) return "filled";
+  return "default";
+}
+function chromeFor(state) {
+  const base = {
+    borderColor: colors.grey700,
+    backgroundColor: colors.grey700,
+    textColor: colors.white,
+    placeholderColor: colors.grey100,
+    leftIconColor: colors.grey100,
+    rightIconColor: colors.grey100,
+    labelColor: colors.white,
+    hintColor: colors.grey100
+  };
+  switch (state) {
+    case "active":
+      return {
+        ...base,
+        borderColor: colors.primaryMuted,
+        leftIconColor: colors.primary
+      };
+    case "error":
+      return {
+        ...base,
+        borderColor: colors.redMuted,
+        textColor: colors.red,
+        placeholderColor: colors.red,
+        labelColor: colors.red,
+        hintColor: colors.red,
+        leftIconColor: colors.red
+      };
+    case "filled":
+      return base;
+    case "disabled":
+      return {
+        ...base,
+        borderColor: colors.grey700,
+        backgroundColor: colors.grey700,
+        textColor: colors.grey0,
+        leftIconColor: colors.grey0,
+        rightIconColor: colors.grey0,
+        labelColor: colors.white,
+        hintColor: colors.grey100
+      };
+    default:
+      return base;
+  }
+}
+function Input({
+  label = "Label",
+  showLabel = true,
+  hint = "Hint",
+  showHint = true,
+  placeholder = "placeholder",
+  state: stateProp,
+  size = "lg",
+  disabled = false,
+  error = false,
+  value,
+  defaultValue,
+  onChangeText,
+  onFocus,
+  onBlur,
+  leftIcon,
+  showLeftIcon = false,
+  rightIcon,
+  showRightIcon = false,
+  onRightIconPress,
+  style,
+  fieldStyle,
+  inputStyle,
+  className,
+  inputClassName,
+  ...textInputProps
+}) {
+  const rootRef = useRef(null);
+  const inputRef = useRef(null);
+  const [focused, setFocused] = useState(false);
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
+  const metrics = sizeConfig2[size];
+  const isControlled = typeof value === "string";
+  const currentValue = isControlled ? value : uncontrolledValue;
+  const hasValue = currentValue.length > 0;
+  const resolvedState = resolveState({
+    state: stateProp,
+    disabled,
+    error,
+    focused,
+    hasValue
+  });
+  const chrome = chromeFor(resolvedState);
+  const isDisabled = resolvedState === "disabled" || disabled;
+  const hasLeftIcon = showLeftIcon || leftIcon != null;
+  const hasRightIcon = showRightIcon || rightIcon != null;
+  const leftIconNode = leftIcon ?? /* @__PURE__ */ jsx(UserIcon, { size: metrics.iconSize, color: chrome.leftIconColor });
+  const rightIconNode = rightIcon ?? /* @__PURE__ */ jsx(ShowIcon, { size: metrics.iconSize, color: chrome.rightIconColor });
+  useApplyWebClassName(rootRef, className);
+  useApplyWebClassName(inputRef, inputClassName);
+  return /* @__PURE__ */ jsxs(View, { ref: rootRef, style: [styles2.root, isDisabled && styles2.disabled, style], children: [
+    showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles2.label, { color: chrome.labelColor }], children: label }) : null,
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: [
+          styles2.field,
+          {
+            height: metrics.height,
+            borderRadius: metrics.borderRadius,
+            paddingTop: metrics.paddingVertical,
+            paddingBottom: metrics.paddingVertical,
+            paddingLeft: metrics.paddingHorizontal,
+            paddingRight: metrics.paddingHorizontal,
+            gap: metrics.gap,
+            borderColor: chrome.borderColor,
+            backgroundColor: chrome.backgroundColor
+          },
+          fieldStyle
+        ],
+        children: [
+          hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: [styles2.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              ref: inputRef,
+              ...textInputProps,
+              value: isControlled ? value : void 0,
+              defaultValue: isControlled ? void 0 : defaultValue,
+              editable: !isDisabled,
+              placeholder,
+              placeholderTextColor: chrome.placeholderColor,
+              onChangeText: (text) => {
+                if (!isControlled) setUncontrolledValue(text);
+                onChangeText?.(text);
+              },
+              onFocus: (event) => {
+                setFocused(true);
+                onFocus?.(event);
+              },
+              onBlur: (event) => {
+                setFocused(false);
+                onBlur?.(event);
+              },
+              style: [
+                styles2.input,
+                metrics.text,
+                { color: chrome.textColor },
+                Platform.OS === "web" ? styles2.inputWeb : null,
+                Platform.OS === "android" ? styles2.inputAndroid : null,
+                inputStyle
+              ],
+              accessibilityState: { disabled: isDisabled }
+            }
+          ),
+          hasRightIcon ? onRightIconPress ? /* @__PURE__ */ jsx(
+            TouchableOpacity,
+            {
+              onPress: onRightIconPress,
+              disabled: isDisabled,
+              style: [styles2.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }],
+              accessibilityRole: "button",
+              hitSlop: 8,
+              children: rightIconNode
+            }
+          ) : /* @__PURE__ */ jsx(View, { style: [styles2.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: rightIconNode }) : null
+        ]
+      }
+    ),
+    showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles2.hint, { color: chrome.hintColor }], children: hint }) : null
+  ] });
+}
+var styles2 = StyleSheet.create({
+  root: {
+    width: DEFAULT_WIDTH,
+    gap: 8,
+    alignSelf: "flex-start"
+  },
+  disabled: {
+    opacity: 0.6
+  },
+  label: {
+    ...inputTypography.label
+  },
+  field: {
+    borderWidth: 1,
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  input: {
     flex: 1,
-    flexShrink: 1,
-    marginRight: 8
+    paddingVertical: 0,
+    margin: 0
   },
-  iconContainer: {
+  inputWeb: {
+    outlineStyle: "none"
+  },
+  inputAndroid: {
+    includeFontPadding: false
+  },
+  iconSlot: {
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0
+  },
+  hint: {
+    ...inputTypography.hint
   }
 });
 
-export { ArrowUpRightIcon, Button, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray, typographyScale };
+export { ArrowRightIcon, BagIcon, BellIcon, BuildingIcon, Button, CameraIcon, CheckBadgeIcon, ClockIcon, FacebookIcon, HomeIcon, Icon, Input, InstagramIcon, KeyIcon, LinkedInIcon, MailIcon, NavigateIcon, PhoneIcon, ShowIcon, UserIcon, buttonTypography, colors, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map