@a-little-world/little-world-design-system-native 0.5.1

package/dist/index.esm.js

@@ -0,0 +1,2985 @@
+import React, { useRef as useRef$1, useState as useState$1, useEffect as useEffect$1, forwardRef as forwardRef$1, useMemo as useMemo$1, createContext as createContext$1, useCallback as useCallback$1 } from 'react';
+import { tokens, GradientTypes, GradientVariations, accountIcon, addToChatIcon, appointmentIcon, archiveIcon, arrowLeftIcon, attachmentIcon, bellIcon, calendarIcon, calendarAddIcon, callIncomingIcon, callOutgoingIcon, cameraIcon, checkIcon, checkInChatIcon, chevronDownIcon, chevronLeftIcon, chevronRightIcon, clockIcon, clockBackIcon, clockDashedIcon, closeIcon, copyIcon, dashboardIcon, dotsIcon, downloadIcon, exclamationIcon, eyeClosedIcon, eyeOpenIcon, facebookIcon, fullScreenExitIcon, fullScreenIcon, githubIcon, groupChatIcon, heartIcon, imageIcon, imageSearchIcon, inclusiveIcon, infoIcon, instagramIcon, linkedinIcon, logoutIcon, logoIcon, mailIcon, menuIcon, messageIcon, messageWithQuestionIcon, micIcon, mobileIcon, moonIcon, notesIcon, pencilIcon, phoneIcon, phoneSlashIcon, plusIcon, profileIcon, profileChatIcon, puzzleIcon, questionIcon, sendIcon, shareScreenIcon, settingsIcon, speakerIcon, stackIcon, starIcon, sunIcon, swapIcon, telegramIcon, tickDoubleIcon, tickIcon, tiktokIcon, translatorIcon, trashIcon, twitterIcon, uploadIcon, userDisconnectedIcon, userSearchIcon, videoIcon, webIcon, whatsappIcon, getTextStyle, TextTypes, fontFamilies, LoadingDimensions, LoadingSizes, LoadingType, ButtonAppearance, BUTTON_DIMENSIONS, ButtonVariations, CIRCLE_DIMENSIONS, ButtonSizes, isValidUrl, CardDimensions, InputHeight, confettiIllustration, friendshipIllustration, groupHandsIllustration, keyIllustration, livingRoomIllustration, laptopWithPhoneIllustration, manOnRocketIllustration, matchSearchingIllustration, paperPlaneIllustration, peopleTogetherIllustration, questionMarksIllustration, raisingMoneyIllustration, teacherIllustration, timeFlexibleIllustration, unmatchedIllustration, wavyBlockIllustration, wavyLinesIllustration, womanOnRocketIllustration, brokenChainIllustration, PopoverSizes, calculateProgress, TagSizes, TagAppearance, InputWidth, ThemeVariants, defaultThemeVariant } from '@a-little-world/little-world-design-system-core';
+export { LoadingSizes, LoadingType } from '@a-little-world/little-world-design-system-core';
+import { View, Text as Text$1, StyleSheet, Animated, Easing, Pressable, Linking, ScrollView, TextInput as TextInput$1 } from 'react-native';
+import styled, { useTheme, css, ThemeProvider } from 'styled-components/native';
+import Svg, { Defs, LinearGradient, Stop, Ellipse, Polyline, Polygon, Line, Rect, Circle, ClipPath, G, Path } from 'react-native-svg';
+import { LinearGradient as LinearGradient$1 } from 'expo-linear-gradient';
+import { useNavigation } from '@react-navigation/native';
+import * as AccordionPrimitive from '@rn-primitives/accordion';
+import * as CheckboxPrimitive from '@rn-primitives/checkbox';
+import * as DropdownMenuPrimitive from '@rn-primitives/dropdown-menu';
+import * as PopoverPrimitive from '@rn-primitives/popover';
+import * as ProgressPrimitive from '@rn-primitives/progress';
+import * as RadioGroupPrimitive from '@rn-primitives/radio-group';
+import * as SeparatorPrimitive from '@rn-primitives/separator';
+
+const getCircleStyles = ({
+  theme,
+  backgroundColor,
+  borderColor
+}) => ({
+  backgroundColor: backgroundColor || theme.color.surface.secondary,
+  borderWidth: 2,
+  borderColor: borderColor || theme.color.border.contrast,
+  borderRadius: theme.radius.full,
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: theme.spacing.xxsmall
+});
+const getLabelStyles$1 = ({
+  top
+}) => ({
+  position: 'relative',
+  marginTop: top
+});
+const ImageLabel = ({
+  children,
+  top
+}) => (/*#__PURE__*/React.createElement(Text$1, {
+  accessible: true,
+  accessibilityLabel: children,
+  style: getLabelStyles$1({
+    top
+  })
+}, children));
+const Icon = ({
+  backgroundColor,
+  borderColor,
+  children,
+  circular,
+  style,
+  label,
+  labelVisible,
+  labelTop = tokens.spacing.xxlarge
+}) => {
+  const theme = useTheme();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, circular ? (/*#__PURE__*/React.createElement(View, {
+    style: [getCircleStyles({
+      theme,
+      backgroundColor,
+      borderColor
+    }), style]
+  }, children)) : (/*#__PURE__*/React.createElement(View, {
+    style: style
+  }, children)), labelVisible && (/*#__PURE__*/React.createElement(ImageLabel, {
+    top: labelTop
+  }, label)));
+};
+
+const IconGradient = ({
+  id,
+  variation,
+  type = GradientTypes.v1
+}) => {
+  if (type === GradientTypes.v1) return /*#__PURE__*/React.createElement(Defs, null, /*#__PURE__*/React.createElement(LinearGradient, {
+    id: id,
+    x1: "0%",
+    y1: "0%",
+    x2: "100%",
+    y2: "100%",
+    gradientUnits: "objectBoundingBox"
+  }, /*#__PURE__*/React.createElement(Stop, {
+    offset: "0%",
+    stopColor: GradientVariations[variation][0]
+  }), /*#__PURE__*/React.createElement(Stop, {
+    offset: "33%",
+    stopColor: GradientVariations[variation][0]
+  }), /*#__PURE__*/React.createElement(Stop, {
+    offset: "100%",
+    stopColor: GradientVariations[variation][1]
+  })));
+  if (type === GradientTypes.v2) return /*#__PURE__*/React.createElement(Defs, null, /*#__PURE__*/React.createElement(LinearGradient, {
+    id: id,
+    x1: "27.9721",
+    y1: "99.877",
+    x2: "116.893",
+    y2: "99.877",
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement(Stop, {
+    stopColor: GradientVariations[variation][0]
+  }), /*#__PURE__*/React.createElement(Stop, {
+    offset: "1",
+    stopColor: GradientVariations[variation][1]
+  })));
+  if (type === GradientTypes.v3) return /*#__PURE__*/React.createElement(Defs, null, /*#__PURE__*/React.createElement(LinearGradient, {
+    id: id,
+    x1: "8.6001",
+    y1: "94.48",
+    x2: "186.19",
+    y2: "94.48",
+    gradientUnits: "userSpaceOnUse",
+    gradientTransform: "matrix(1, 0, 0, 1, 160.535599, 138.286461)"
+  }, /*#__PURE__*/React.createElement(Stop, {
+    stopColor: GradientVariations[variation][0]
+  }), /*#__PURE__*/React.createElement(Stop, {
+    offset: "0.18",
+    stopColor: GradientVariations[variation][2]
+  }), /*#__PURE__*/React.createElement(Stop, {
+    offset: "0.55",
+    stopColor: GradientVariations[variation][3]
+  }), /*#__PURE__*/React.createElement(Stop, {
+    offset: "0.83",
+    stopColor: GradientVariations[variation][4]
+  }), /*#__PURE__*/React.createElement(Stop, {
+    offset: "1",
+    stopColor: GradientVariations[variation][5]
+  })));
+  return null;
+};
+
+const BLACK_HEX = '#000';
+// Helper function to generate unique keys
+const generateUniqueKey = (element, index) => {
+  return `${element.type}-${index}-${Math.random().toString(36).substring(2, 11)}`;
+};
+// Helper function to safely render children, filtering out null values
+const renderChildren = (children, options, parentIndex) => {
+  return children.map((child, i) => renderSvgElement(child, options, `${parentIndex}-${i}`)).filter(Boolean); // Filter out null elements and cast to ReactElement[]
+};
+// Renders SVG elements recursively
+const renderSvgElement = (element, options, index) => {
+  const {
+    gradient,
+    gradientId,
+    color
+  } = options;
+  // Get all attributes and override fill for path elements if needed
+  const attrs = Object.assign({}, element.attributes);
+  // Handle color attributes for SVG elements based on the colorAttribute property
+  // If element has color set that isn't #000 - do not override
+  if (element.colorAttribute && element.colorAttribute !== 'none') {
+    if (attrs[element.colorAttribute] === BLACK_HEX) {
+      attrs[element.colorAttribute] = gradient ? `url(#${gradientId})` : color || BLACK_HEX;
+    } else {
+      attrs[element.colorAttribute] = attrs[element.colorAttribute] || color || BLACK_HEX;
+    }
+  }
+  // Add unique key attribute
+  const key = generateUniqueKey(element, index);
+  switch (element.type) {
+    case 'path':
+      return /*#__PURE__*/React.createElement(Path, Object.assign({
+        key: key
+      }, attrs));
+    case 'g':
+      return /*#__PURE__*/React.createElement(G, Object.assign({
+        key: key
+      }, attrs), renderChildren(element.children, options, index));
+    case 'defs':
+      return /*#__PURE__*/React.createElement(Defs, Object.assign({
+        key: key
+      }, attrs), renderChildren(element.children, options, index));
+    case 'linearGradient':
+      return /*#__PURE__*/React.createElement(LinearGradient, Object.assign({
+        key: key
+      }, attrs), renderChildren(element.children, options, index));
+    case 'stop':
+      return /*#__PURE__*/React.createElement(Stop, Object.assign({
+        key: key
+      }, attrs));
+    case 'clipPath':
+      return /*#__PURE__*/React.createElement(ClipPath, Object.assign({
+        key: key
+      }, attrs), renderChildren(element.children, options, index));
+    case 'circle':
+      return /*#__PURE__*/React.createElement(Circle, Object.assign({
+        key: key
+      }, attrs));
+    case 'rect':
+      return /*#__PURE__*/React.createElement(Rect, Object.assign({
+        key: key
+      }, attrs));
+    case 'line':
+      return /*#__PURE__*/React.createElement(Line, Object.assign({
+        key: key
+      }, attrs));
+    case 'polygon':
+      return /*#__PURE__*/React.createElement(Polygon, Object.assign({
+        key: key
+      }, attrs));
+    case 'polyline':
+      return /*#__PURE__*/React.createElement(Polyline, Object.assign({
+        key: key
+      }, attrs));
+    case 'ellipse':
+      return /*#__PURE__*/React.createElement(Ellipse, Object.assign({
+        key: key
+      }, attrs));
+    default:
+      console.warn(`Unsupported SVG element type: ${element.type}`);
+      return null;
+  }
+};
+const createReactNativeSvg = (svgData, options) => {
+  const {
+    label,
+    width,
+    height,
+    gradient,
+    gradientId,
+    style
+  } = options;
+  return /*#__PURE__*/React.createElement(View, {
+    key: `${Math.random().toString(36).substring(2, 11)}`,
+    style: style
+  }, /*#__PURE__*/React.createElement(Svg, {
+    accessible: true,
+    accessibilityLabel: label,
+    width: width,
+    height: height,
+    viewBox: svgData.viewBox,
+    fill: "none"
+  }, gradient && (/*#__PURE__*/React.createElement(IconGradient, {
+    variation: gradient,
+    id: gradientId
+  })), svgData.elements.map((element, index) => renderSvgElement(element, options, index))));
+};
+
+const createIconComponent = ({
+  name,
+  svgData,
+  gradientType
+}) => {
+  const Component = ({
+    height = 24,
+    width = 24,
+    style,
+    color,
+    backgroundColor,
+    gradient,
+    borderColor,
+    circular,
+    label,
+    labelVisible
+  }) => {
+    const gradientId = label ? `gradient-${label.replace(/\s/g, '')}` : 'gradient-icon-needs-label';
+    const svgOptions = {
+      width,
+      height,
+      style,
+      label,
+      color,
+      gradient,
+      gradientId};
+    return /*#__PURE__*/React.createElement(Icon, {
+      backgroundColor: backgroundColor,
+      borderColor: borderColor,
+      circular: circular,
+      style: style,
+      color: color,
+      label: label,
+      labelVisible: labelVisible
+    }, createReactNativeSvg(svgData, svgOptions));
+  };
+  Component.displayName = `${name}Icon`;
+  return Component;
+};
+
+const AccountIcon = createIconComponent({
+  name: 'Account',
+  svgData: accountIcon
+});
+const AddToChatIcon = createIconComponent({
+  name: 'AddToChat',
+  svgData: addToChatIcon
+});
+const AppointmentIcon = createIconComponent({
+  name: 'Appointment',
+  svgData: appointmentIcon
+});
+const ArchiveIcon = createIconComponent({
+  name: 'Archive',
+  svgData: archiveIcon
+});
+const ArrowLeftIcon = createIconComponent({
+  name: 'ArrowLeft',
+  svgData: arrowLeftIcon
+});
+const AttachmentIcon = createIconComponent({
+  name: 'Attachment',
+  svgData: attachmentIcon,
+  gradientType: GradientTypes.v3
+});
+const BellIcon = createIconComponent({
+  name: 'Bell',
+  svgData: bellIcon,
+  gradientType: GradientTypes.v2
+});
+const CalendarIcon = createIconComponent({
+  name: 'Calendar',
+  svgData: calendarIcon
+});
+const CalendarAddIcon = createIconComponent({
+  name: 'CalendarAdd',
+  svgData: calendarAddIcon
+});
+const CallIncomingIcon = createIconComponent({
+  name: 'CallIncoming',
+  svgData: callIncomingIcon
+});
+const CallOutgoingIcon = createIconComponent({
+  name: 'CallOutgoing',
+  svgData: callOutgoingIcon
+});
+const CameraIcon = createIconComponent({
+  name: 'Camera',
+  svgData: cameraIcon
+});
+const CheckIcon = createIconComponent({
+  name: 'Check',
+  svgData: checkIcon,
+  gradientType: GradientTypes.v3
+});
+const CheckInChatIcon = createIconComponent({
+  name: 'CheckInChat',
+  svgData: checkInChatIcon
+});
+const ChevronDownIcon = createIconComponent({
+  name: 'ChevronDown',
+  svgData: chevronDownIcon,
+  gradientType: GradientTypes.v3
+});
+const ChevronLeftIcon = createIconComponent({
+  name: 'ChevronLeft',
+  svgData: chevronLeftIcon,
+  gradientType: GradientTypes.v2
+});
+const ChevronRightIcon = createIconComponent({
+  name: 'ChevronRight',
+  svgData: chevronRightIcon,
+  gradientType: GradientTypes.v2
+});
+const ClockIcon = createIconComponent({
+  name: 'Clock',
+  svgData: clockIcon
+});
+const ClockBackIcon = createIconComponent({
+  name: 'ClockBack',
+  svgData: clockBackIcon
+});
+const ClockDashedIcon = createIconComponent({
+  name: 'ClockDashed',
+  svgData: clockDashedIcon
+});
+const CloseIcon = createIconComponent({
+  name: 'Close',
+  svgData: closeIcon,
+  gradientType: GradientTypes.v2
+});
+const CopyIcon = createIconComponent({
+  name: 'Copy',
+  svgData: copyIcon
+});
+const DashboardIcon = createIconComponent({
+  name: 'Dashboard',
+  svgData: dashboardIcon
+});
+const DotsIcon = createIconComponent({
+  name: 'Dots',
+  svgData: dotsIcon
+});
+const DownloadIcon = createIconComponent({
+  name: 'Download',
+  svgData: downloadIcon,
+  gradientType: GradientTypes.v2
+});
+const ExclamationIcon = createIconComponent({
+  name: 'Exclamation',
+  svgData: exclamationIcon,
+  gradientType: GradientTypes.v2
+});
+const EyeClosedIcon = createIconComponent({
+  name: 'EyeClosed',
+  svgData: eyeClosedIcon
+});
+const EyeOpenIcon = createIconComponent({
+  name: 'EyeOpen',
+  svgData: eyeOpenIcon
+});
+const FacebookIcon = createIconComponent({
+  name: 'Facebook',
+  svgData: facebookIcon
+});
+const FullScreenExitIcon = createIconComponent({
+  name: 'FullScreenExit',
+  svgData: fullScreenExitIcon
+});
+const FullScreenIcon = createIconComponent({
+  name: 'FullScreen',
+  svgData: fullScreenIcon,
+  gradientType: GradientTypes.v2
+});
+const GithubIcon = createIconComponent({
+  name: 'Github',
+  svgData: githubIcon
+});
+const GroupChatIcon = createIconComponent({
+  name: 'GroupChat',
+  svgData: groupChatIcon
+});
+const HeartIcon = createIconComponent({
+  name: 'Heart',
+  svgData: heartIcon
+});
+const ImageIcon = createIconComponent({
+  name: 'Image',
+  svgData: imageIcon
+});
+const ImageSearchIcon = createIconComponent({
+  name: 'ImageSearch',
+  svgData: imageSearchIcon
+});
+const InclusiveIcon = createIconComponent({
+  name: 'Inclusive',
+  svgData: inclusiveIcon
+});
+const InfoIcon = createIconComponent({
+  name: 'Info',
+  svgData: infoIcon
+});
+const InstagramIcon = createIconComponent({
+  name: 'Instagram',
+  svgData: instagramIcon
+});
+const LinkedInIcon = createIconComponent({
+  name: 'LinkedIn',
+  svgData: linkedinIcon
+});
+const LogoutIcon = createIconComponent({
+  name: 'Logout',
+  svgData: logoutIcon
+});
+const Logo = createIconComponent({
+  name: 'Logo',
+  svgData: logoIcon
+});
+const MailIcon = createIconComponent({
+  name: 'Mail',
+  svgData: mailIcon
+});
+const MenuIcon = createIconComponent({
+  name: 'Menu',
+  svgData: menuIcon
+});
+const MessageIcon = createIconComponent({
+  name: 'Message',
+  svgData: messageIcon,
+  gradientType: GradientTypes.v3
+});
+const MessageWithQuestionIcon = createIconComponent({
+  name: 'MessageWithQuestion',
+  svgData: messageWithQuestionIcon,
+  gradientType: GradientTypes.v3
+});
+const MicIcon = createIconComponent({
+  name: 'Mic',
+  svgData: micIcon,
+  gradientType: GradientTypes.v2
+});
+const MobileIcon = createIconComponent({
+  name: 'Mobile',
+  svgData: mobileIcon
+});
+const MoonIcon = createIconComponent({
+  name: 'Moon',
+  svgData: moonIcon
+});
+const NotesIcon = createIconComponent({
+  name: 'Notes',
+  svgData: notesIcon
+});
+const PencilIcon = createIconComponent({
+  name: 'Pencil',
+  svgData: pencilIcon
+});
+const PhoneIcon = createIconComponent({
+  name: 'Phone',
+  svgData: phoneIcon
+});
+const PhoneSlashIcon = createIconComponent({
+  name: 'PhoneSlash',
+  svgData: phoneSlashIcon
+});
+const PlusIcon = createIconComponent({
+  name: 'Plus',
+  svgData: plusIcon
+});
+const ProfileIcon = createIconComponent({
+  name: 'Profile',
+  svgData: profileIcon
+});
+const ProfileChatIcon = createIconComponent({
+  name: 'ProfileChat',
+  svgData: profileChatIcon,
+  gradientType: GradientTypes.v2
+});
+const PuzzleIcon = createIconComponent({
+  name: 'Puzzle',
+  svgData: puzzleIcon
+});
+const QuestionIcon = createIconComponent({
+  name: 'Question',
+  svgData: questionIcon
+});
+const SendIcon = createIconComponent({
+  name: 'Send',
+  svgData: sendIcon
+});
+const ScreenShareIcon = createIconComponent({
+  name: 'ScreenShare',
+  svgData: shareScreenIcon
+});
+const SettingsIcon = createIconComponent({
+  name: 'Settings',
+  svgData: settingsIcon
+});
+const SpeakerIcon = createIconComponent({
+  name: 'Speaker',
+  svgData: speakerIcon
+});
+const StackIcon = createIconComponent({
+  name: 'Stack',
+  svgData: stackIcon,
+  gradientType: GradientTypes.v2
+});
+const StarIcon = createIconComponent({
+  name: 'Star',
+  svgData: starIcon
+});
+const SunIcon = createIconComponent({
+  name: 'Sun',
+  svgData: sunIcon
+});
+const SwapIcon = createIconComponent({
+  name: 'Swap',
+  svgData: swapIcon,
+  gradientType: GradientTypes.v2
+});
+const TelegramIcon = createIconComponent({
+  name: 'Telegram',
+  svgData: telegramIcon
+});
+const TickDoubleIcon = createIconComponent({
+  name: 'TickDouble',
+  svgData: tickDoubleIcon
+});
+const TickIcon = createIconComponent({
+  name: 'Tick',
+  svgData: tickIcon
+});
+const TiktokIcon = createIconComponent({
+  name: 'Tiktok',
+  svgData: tiktokIcon
+});
+const TranslatorIcon = createIconComponent({
+  name: 'Translator',
+  svgData: translatorIcon
+});
+const TrashIcon = createIconComponent({
+  name: 'Trash',
+  svgData: trashIcon
+});
+const TwitterIcon = createIconComponent({
+  name: 'Twitter',
+  svgData: twitterIcon
+});
+const UploadIcon = createIconComponent({
+  name: 'Upload',
+  svgData: uploadIcon,
+  gradientType: GradientTypes.v2
+});
+const UserDisconnectedIcon = createIconComponent({
+  name: 'UserDisconnected',
+  svgData: userDisconnectedIcon
+});
+const UserSearchIcon = createIconComponent({
+  name: 'UserSearch',
+  svgData: userSearchIcon
+});
+const VideoIcon = createIconComponent({
+  name: 'Video',
+  svgData: videoIcon,
+  gradientType: GradientTypes.v3
+});
+const WebIcon = createIconComponent({
+  name: 'Web',
+  svgData: webIcon
+});
+const WhatsappIcon = createIconComponent({
+  name: 'Whatsapp',
+  svgData: whatsappIcon
+});
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+const getStyles = ({
+  typeStyles,
+  bold,
+  center,
+  color,
+  italic,
+  theme
+}) => Object.assign({
+  textAlign: center ? 'center' : 'auto',
+  color: color !== null && color !== void 0 ? color : theme.color.text.primary,
+  fontSize: typeStyles.fontSize * 16,
+  fontWeight: typeStyles.fontWeight === 'bold' || bold ? 'bold' : 'normal',
+  lineHeight: typeStyles.lineHeight ? typeStyles.lineHeight * typeStyles.fontSize * 16 : typeStyles.fontSize * 16 * 1.5,
+  fontFamily: typeStyles.styleType === 'body' ? bold ? fontFamilies.SignikaNegativeBold : fontFamilies.SignikaNegative : fontFamilies.WorkSans
+}, italic && {
+  fontStyle: 'italic',
+  transform: [{
+    skewX: '-12deg'
+  }]
+});
+const BaseText = ({
+  id,
+  bold = false,
+  center = false,
+  children,
+  color,
+  italic = false,
+  style,
+  type = TextTypes.Body5
+}) => {
+  const theme = useTheme();
+  const textStyles = getStyles({
+    typeStyles: getTextStyle(type),
+    bold,
+    italic,
+    center,
+    color,
+    theme
+  });
+  return /*#__PURE__*/React.createElement(Text$1, {
+    id: id,
+    style: [textStyles, style]
+  }, children);
+};
+
+const parseGradientString = gradientString => {
+  const colors = gradientString.match(/#[a-fA-F0-9]{6}/g) || [];
+  if (colors.length < 2) {
+    throw new Error('Gradient must have at least 2 colors');
+  }
+  // Extract angle if present (this is simplified, adjust for your format)
+  const angleMatch = gradientString.match(/(\d+\.?\d*)deg/);
+  const angle = angleMatch ? parseFloat(angleMatch[1]) : 0;
+  // Convert angle to start/end coordinates
+  const radians = (angle - 90) * (Math.PI / 180);
+  const start = {
+    x: 0.5 - Math.cos(radians) / 2,
+    y: 0.5 - Math.sin(radians) / 2
+  };
+  const end = {
+    x: 0.5 + Math.cos(radians) / 2,
+    y: 0.5 + Math.sin(radians) / 2
+  };
+  return {
+    colors: colors,
+    start,
+    end
+  };
+};
+
+const styles = StyleSheet.create({
+  fullSize: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0
+  }
+});
+const Gradient = ({
+  gradient,
+  style,
+  children
+}) => {
+  const {
+    colors,
+    start,
+    end
+  } = parseGradientString(gradient);
+  return /*#__PURE__*/React.createElement(LinearGradient$1, {
+    colors: colors,
+    start: start,
+    end: end,
+    style: [styles.fullSize, style]
+  }, children);
+};
+
+const getLoadingContainerStyles = (align, inline, size, type) => ({
+  display: 'flex',
+  flexDirection: type === LoadingType.Logo ? 'column' : 'row',
+  alignItems: 'center',
+  justifyContent: align || 'center',
+  position: 'relative',
+  width: inline ? LoadingDimensions[size || LoadingSizes.Small] : '100%',
+  height: '100%',
+  minHeight: LoadingDimensions[size || LoadingSizes.Small]
+});
+const getLoadingElementStyles = (color, size) => ({
+  position: 'absolute',
+  width: LoadingDimensions[size || LoadingSizes.Small],
+  height: LoadingDimensions[size || LoadingSizes.Small],
+  borderWidth: size === LoadingSizes.Large ? 4 : 2,
+  borderColor: color || 'currentColor',
+  borderTopColor: 'transparent',
+  borderRadius: 9999,
+  transform: [{
+    rotate: '0deg'
+  }]
+});
+
+const getLoadingLogoStyles = dimension => {
+  return StyleSheet.create({
+    container: {
+      width: dimension,
+      height: dimension
+    }
+  });
+};
+
+const LoadingLogo = ({
+  size = LoadingSizes.Small,
+  label = 'Loading logo'
+}) => {
+  // Double dimensions for mobile screens
+  const dimension = LoadingDimensions[size] * 2;
+  // Animated values for orange gradient stops
+  const orangeStop1Opacity = useRef$1(new Animated.Value(0.25)).current;
+  const orangeStop2Opacity = useRef$1(new Animated.Value(0.25)).current;
+  const orangeStop3Opacity = useRef$1(new Animated.Value(0.25)).current;
+  const orangeStop4Opacity = useRef$1(new Animated.Value(0.25)).current;
+  // Animated values for blue gradient stops
+  const blueStop1Opacity = useRef$1(new Animated.Value(0.25)).current;
+  const blueStop2Opacity = useRef$1(new Animated.Value(0.25)).current;
+  const blueStop3Opacity = useRef$1(new Animated.Value(0.25)).current;
+  // State for opacity values (updated via animation listeners)
+  const [orangeStop1, setOrangeStop1] = useState$1(0.25);
+  const [orangeStop2, setOrangeStop2] = useState$1(0.25);
+  const [orangeStop3, setOrangeStop3] = useState$1(0.25);
+  const [orangeStop4, setOrangeStop4] = useState$1(0.25);
+  const [blueStop1, setBlueStop1] = useState$1(0.25);
+  const [blueStop2, setBlueStop2] = useState$1(0.25);
+  const [blueStop3, setBlueStop3] = useState$1(0.25);
+  // Pulse animation (scale from 1 to 1.03 and back)
+  const pulseScale = useRef$1(new Animated.Value(1)).current;
+  useEffect$1(() => {
+    // Create animation for orange gradient stops with staggered delays
+    const createOrangeAnimation = (animatedValue, delay) => {
+      return Animated.loop(Animated.sequence([Animated.delay(delay), Animated.timing(animatedValue, {
+        toValue: 1,
+        duration: 2000,
+        easing: Easing.inOut(Easing.ease),
+        useNativeDriver: false
+      }), Animated.timing(animatedValue, {
+        toValue: 0.25,
+        duration: 2000,
+        easing: Easing.inOut(Easing.ease),
+        useNativeDriver: false
+      })]));
+    };
+    // Create animation for blue gradient stops with staggered delays
+    const createBlueAnimation = (animatedValue, delay) => {
+      return Animated.loop(Animated.sequence([Animated.delay(delay), Animated.timing(animatedValue, {
+        toValue: 1,
+        duration: 2000,
+        easing: Easing.inOut(Easing.ease),
+        useNativeDriver: false
+      }), Animated.timing(animatedValue, {
+        toValue: 0.25,
+        duration: 2000,
+        easing: Easing.inOut(Easing.ease),
+        useNativeDriver: false
+      })]));
+    };
+    // Start all animations
+    const orangeAnimations = [createOrangeAnimation(orangeStop1Opacity, 0), createOrangeAnimation(orangeStop2Opacity, 200), createOrangeAnimation(orangeStop3Opacity, 400), createOrangeAnimation(orangeStop4Opacity, 600)];
+    const blueAnimations = [createBlueAnimation(blueStop1Opacity, 0), createBlueAnimation(blueStop2Opacity, 200), createBlueAnimation(blueStop3Opacity, 400)];
+    const allAnimations = [...orangeAnimations, ...blueAnimations];
+    // Set up animation listeners to update state
+    const listener1 = orangeStop1Opacity.addListener(({
+      value
+    }) => setOrangeStop1(value));
+    const listener2 = orangeStop2Opacity.addListener(({
+      value
+    }) => setOrangeStop2(value));
+    const listener3 = orangeStop3Opacity.addListener(({
+      value
+    }) => setOrangeStop3(value));
+    const listener4 = orangeStop4Opacity.addListener(({
+      value
+    }) => setOrangeStop4(value));
+    const listener5 = blueStop1Opacity.addListener(({
+      value
+    }) => setBlueStop1(value));
+    const listener6 = blueStop2Opacity.addListener(({
+      value
+    }) => setBlueStop2(value));
+    const listener7 = blueStop3Opacity.addListener(({
+      value
+    }) => setBlueStop3(value));
+    allAnimations.forEach(anim => anim.start());
+    // Start pulse animation (scale from 1 to 1.03 and back, 3s duration, infinite loop)
+    const pulseAnimation = Animated.loop(Animated.sequence([Animated.timing(pulseScale, {
+      toValue: 1.03,
+      duration: 1500,
+      easing: Easing.inOut(Easing.ease),
+      useNativeDriver: true
+    }), Animated.timing(pulseScale, {
+      toValue: 1,
+      duration: 1500,
+      easing: Easing.inOut(Easing.ease),
+      useNativeDriver: true
+    })]));
+    pulseAnimation.start();
+    return () => {
+      allAnimations.forEach(anim => anim.stop());
+      pulseAnimation.stop();
+      orangeStop1Opacity.removeListener(listener1);
+      orangeStop2Opacity.removeListener(listener2);
+      orangeStop3Opacity.removeListener(listener3);
+      orangeStop4Opacity.removeListener(listener4);
+      blueStop1Opacity.removeListener(listener5);
+      blueStop2Opacity.removeListener(listener6);
+      blueStop3Opacity.removeListener(listener7);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const styles = getLoadingLogoStyles(dimension);
+  return /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.container, {
+      transform: [{
+        scale: pulseScale
+      }]
+    }]
+  }, /*#__PURE__*/React.createElement(Svg, {
+    width: dimension,
+    height: dimension,
+    viewBox: "-0.01 0 100.38 66.86",
+    accessibilityLabel: label,
+    accessibilityRole: "image"
+  }, /*#__PURE__*/React.createElement(Defs, null, /*#__PURE__*/React.createElement(LinearGradient, {
+    id: "loadingOrangeGradient",
+    x1: "0",
+    y1: "35.21",
+    x2: "80",
+    y2: "35.21",
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement(Stop, {
+    offset: "0",
+    stopColor: "#d85509",
+    stopOpacity: orangeStop1
+  }), /*#__PURE__*/React.createElement(Stop, {
+    offset: "0.14",
+    stopColor: "#df6510",
+    stopOpacity: orangeStop2
+  }), /*#__PURE__*/React.createElement(Stop, {
+    offset: "0.49",
+    stopColor: "#ed861f",
+    stopOpacity: orangeStop3
+  }), /*#__PURE__*/React.createElement(Stop, {
+    offset: "0.67",
+    stopColor: "#f39325",
+    stopOpacity: orangeStop4
+  })), /*#__PURE__*/React.createElement(LinearGradient, {
+    id: "loadingBlueGradient",
+    x1: "20.41",
+    y1: "31.58",
+    x2: "100.41",
+    y2: "31.58",
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement(Stop, {
+    offset: "0.18",
+    stopColor: "#36a9e1",
+    stopOpacity: blueStop1
+  }), /*#__PURE__*/React.createElement(Stop, {
+    offset: "0.56",
+    stopColor: "#1f8bcc",
+    stopOpacity: blueStop2
+  }), /*#__PURE__*/React.createElement(Stop, {
+    offset: "1",
+    stopColor: "#0063af",
+    stopOpacity: blueStop3
+  }))), /*#__PURE__*/React.createElement(Path, {
+    fill: "url(#loadingBlueGradient)",
+    d: "M66.69,8.56H50.2a24.68,24.68,0,0,1,9.39,1.85c-.33.32-.65.65-1,1a1.38,1.38,0,0,0-.29,1.72c.17.35.38.68.57,1a8.33,8.33,0,0,0,1.66,1.94A1.61,1.61,0,0,1,61,17.68c-.09.36.12.71-.08,1,0,.06,0,.22.1.33.4.82.74,1,1.65.75a7.1,7.1,0,0,1,2.47-.17,1.76,1.76,0,0,1,1.56,1.05c.1.23.17.46.27.68a1.28,1.28,0,0,0,1.43.9,3,3,0,0,0,2.08-1.09c.25-.31.49-.64.73-1a24.69,24.69,0,0,1,2.5,21,2.7,2.7,0,0,0-.93-.46,1.74,1.74,0,0,1-1-2.71c.06-.1.14-.19.2-.3A1.19,1.19,0,0,0,72,36.37a6.42,6.42,0,0,0-.38-.53,1.24,1.24,0,0,0-2-.17A5.79,5.79,0,0,1,67.35,37c-.93.27-1.87.54-2.81.78a3.77,3.77,0,0,0-1.5.74,1.6,1.6,0,0,1-1.28.44,14.53,14.53,0,0,0-2.09-.23,3.28,3.28,0,0,0-3.29,1.45,2.3,2.3,0,0,1-1.84,1.15l-.22,0a1.23,1.23,0,0,0-.94,1.09,2.67,2.67,0,0,0,1.34,2.8,9.66,9.66,0,0,1,2.51,2.12,4.25,4.25,0,0,1,1.15,1.69c.33,1.14.28,1.77-.62,2.29a10.91,10.91,0,0,0-1.54,1.91A3.1,3.1,0,0,0,56,55.63c.16.58.28,1.17.4,1.75a24.84,24.84,0,0,1-6.2.79H29.8a24.81,24.81,0,1,1,0-49.61h3.92a29.6,29.6,0,0,1,16.48-5H29.8A29.77,29.77,0,0,0,6.94,52.45L4.83,66.86,15,59.22A29.61,29.61,0,0,0,29.8,63.16H50.2A29.79,29.79,0,0,0,66.69,8.56Z"
+  }), /*#__PURE__*/React.createElement(Path, {
+    fill: "url(#loadingOrangeGradient)",
+    d: "M91.65,12.29,93.45,0,84.26,6.89A29.57,29.57,0,0,0,70.61,3.57H50.2a29.79,29.79,0,0,0-16.48,54.6H50.2a24.79,24.79,0,0,1-23-34.09,2.36,2.36,0,0,0,.59.24,8,8,0,0,1,1,.33c0,.1,0,.13,0,.15a.87.87,0,0,0,.32,1.12,1.43,1.43,0,0,1,.31,2,3.33,3.33,0,0,1-.43.67,4.31,4.31,0,0,0-1,3.61,6.84,6.84,0,0,0,.34,1.42A2.43,2.43,0,0,0,29.59,35a2.32,2.32,0,0,0,2.1.06,3.41,3.41,0,0,1,.76-.26,1.15,1.15,0,0,1,1.41.62c.28.48.56,1,.83,1.46a20.21,20.21,0,0,0,2.55,3.91,2.13,2.13,0,0,1,.49,1.33,1.67,1.67,0,0,1-.56,1.14,13,13,0,0,0-1.77,2.23,1.35,1.35,0,0,0,0,1.58c.35.47.8.57,1.52.36A8.92,8.92,0,0,1,38,47.14a12.34,12.34,0,0,0,2.8-.82,3.68,3.68,0,0,0,2.33-2.56,9.66,9.66,0,0,0,.21-2.84c-.06-1-.09-2.09-.11-3.14a.81.81,0,0,1,.22-.52,7.71,7.71,0,0,1,1.26-1.1,6.71,6.71,0,0,0,1.38-1A1.51,1.51,0,0,0,46.61,34c0-.39,0-.78-.09-1.16-.07-.81-.16-1.61-.2-2.41a2.34,2.34,0,0,1,1.31-2.48,1,1,0,0,0,.61-1.12c-.15-1-.28-2-.49-3a14.88,14.88,0,0,1-.38-3,4.85,4.85,0,0,0-.07-.55h-.83c-.62,0-1.23,0-1.84,0-.4,0-.63-.35-.44-.63a3.46,3.46,0,0,0,.4-1.89,1,1,0,0,0-.81-1c-.61,0-1.22,0-1.83.05a8,8,0,0,1-1.09.08,1.47,1.47,0,0,1-.79-.3,6.3,6.3,0,0,1-1.86-2.58,13.63,13.63,0,0,1-.53-1.82s0-.05,0-.09A24.64,24.64,0,0,1,50.2,8.56H70.61a24.81,24.81,0,0,1,0,49.61H66.69a29.61,29.61,0,0,1-16.49,5H70.61a29.78,29.78,0,0,0,21-50.87Z"
+  })));
+};
+
+const LOADING_RING_ID = 'loadingRing';
+const LOADING_LOGO_ID = 'loadingLogo';
+const Loading = ({
+  align,
+  style,
+  color,
+  inline = false,
+  size = LoadingSizes.Small,
+  type = LoadingType.Ring
+}) => {
+  const spinValue = useRef$1(new Animated.Value(0)).current;
+  useEffect$1(() => {
+    // Only start animation for Ring type
+    if (type !== LoadingType.Ring) {
+      return;
+    }
+    const startAnimation = () => {
+      Animated.timing(spinValue, {
+        toValue: 1,
+        duration: 1400,
+        easing: Easing.linear,
+        useNativeDriver: false
+      }).start(() => {
+        spinValue.setValue(0);
+        startAnimation();
+      });
+    };
+    startAnimation();
+    return () => {
+      spinValue.stopAnimation();
+    };
+  }, [type, spinValue]);
+  const spin = spinValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg']
+  });
+  const containerStyle = [getLoadingContainerStyles(align, inline, size, type), style];
+  if (type === LoadingType.Logo) {
+    return /*#__PURE__*/React.createElement(View, {
+      style: containerStyle,
+      testID: LOADING_LOGO_ID
+    }, /*#__PURE__*/React.createElement(LoadingLogo, {
+      size: size,
+      label: "Loading"
+    }));
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    style: containerStyle,
+    testID: LOADING_RING_ID
+  }, [0, 1, 2, 3].map(index => (/*#__PURE__*/React.createElement(Animated.View, {
+    key: index,
+    style: [getLoadingElementStyles(color, size), {
+      transform: [{
+        rotate: spin
+      }]
+    }]
+  }))));
+};
+
+const getButtonStyles = ({
+  appearance,
+  color,
+  variation,
+  size,
+  backgroundColor,
+  borderColor,
+  theme
+}) => {
+  const baseStyles = Object.assign({
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 90
+  }, variation === ButtonVariations.Basic ? {
+    paddingHorizontal: theme.spacing.small,
+    // flex: 1,
+    height: BUTTON_DIMENSIONS[size].height,
+    minWidth: BUTTON_DIMENSIONS[size].minWidth
+    // paddingVertical: BUTTON_DIMENSIONS[size].padding.vertical,
+  } : {});
+  if (variation === ButtonVariations.Circle) {
+    return Object.assign(Object.assign(Object.assign({}, baseStyles), CIRCLE_DIMENSIONS[size]), {
+      borderRadius: theme.radius.half,
+      borderWidth: 1,
+      borderColor: borderColor || backgroundColor || theme.color.border.bold,
+      backgroundColor: backgroundColor || 'transparent'
+    });
+  }
+  if (variation === ButtonVariations.Icon) {
+    return Object.assign(Object.assign({}, baseStyles), {
+      backgroundColor: backgroundColor || 'transparent',
+      padding: 0
+    });
+  }
+  if (variation === ButtonVariations.Option) {
+    return Object.assign(Object.assign({}, baseStyles), {
+      backgroundColor: backgroundColor || theme.color.surface.secondary,
+      borderWidth: 1,
+      borderColor: theme.color.border.subtle,
+      borderRadius: 15,
+      padding: theme.spacing.xsmall,
+      gap: theme.spacing.xxxsmall,
+      maxWidth: 144,
+      minHeight: 69
+    });
+  }
+  if (variation === ButtonVariations.Inline) {
+    return Object.assign(Object.assign({}, baseStyles), {
+      display: 'flex',
+      borderWidth: 0,
+      borderRadius: 0,
+      borderBottomWidth: 1,
+      height: 'auto',
+      width: 'auto',
+      paddingHorizontal: 0,
+      paddingVertical: theme.spacing.xxxxsmall,
+      gap: theme.spacing.xxxsmall,
+      backgroundColor: 'transparent'
+    });
+  }
+  if (appearance === ButtonAppearance.Primary) {
+    return Object.assign(Object.assign({}, baseStyles), {
+      backgroundColor: backgroundColor || theme.color.surface.primary,
+      borderWidth: 0
+    });
+  }
+  return Object.assign(Object.assign({}, baseStyles), {
+    backgroundColor: theme.color.surface.primary,
+    borderWidth: 2,
+    borderColor: color || theme.color.border.bold
+  });
+};
+const gradientStyles = StyleSheet.create({
+  fullSize: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0
+  }
+});
+const getButtonTextStyles = ({
+  color,
+  variation,
+  appearance,
+  theme
+}) => {
+  const baseStyles = {
+    color: color || theme.color.text.primary,
+    fontWeight: '700',
+    textAlign: 'center'
+  };
+  if (variation === ButtonVariations.Option) {
+    return Object.assign(Object.assign({}, baseStyles), {
+      color: color || theme.color.text.primary,
+      fontWeight: 'normal'
+    });
+  }
+  if (variation === ButtonVariations.Basic) {
+    return Object.assign(Object.assign({}, baseStyles), {
+      color: color || appearance === ButtonAppearance.Primary ? theme.color.text.button : theme.color.text.heading
+    });
+  }
+  return baseStyles;
+};
+css`
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  background: ${({
+  $backgroundColor,
+  theme
+}) => $backgroundColor || theme.color.surface.secondary};
+  border: 1px solid ${({
+  theme
+}) => theme.color.border.subtle};
+  color: ${({
+  $color,
+  theme
+}) => $color || theme.color.text.primary};
+  border-radius: 15px;
+  font-weight: 700;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: ${({
+  theme
+}) => theme.spacing.xsmall};
+  gap: ${({
+  theme
+}) => theme.spacing.xxxsmall};
+  max-width: 144px;
+  align-items: center;
+  justify-content: center;
+  font-weight: normal;
+  min-height: 69px;
+
+  &:not(:disabled):hover {
+    filter: brightness(95%);
+    cursor: pointer;
+    box-shadow:
+      0 0 10px 1px rgb(0 0 0 / 11%),
+      0 0 8px 3px rgb(255 255 255 / 15%);
+  }
+
+  ${({
+  $appearance,
+  $backgroundColor,
+  $color,
+  theme
+}) => $appearance === ButtonAppearance.Secondary && css`
+      color: ${$color || theme.color.text.button};
+      background: ${$backgroundColor || theme.color.surface.primary};
+    `}
+`;
+//     svg {
+//       ${ICON_DIMENSIONS}
+//     }
+//   `;
+// }
+
+const Button = /*#__PURE__*/React.forwardRef(({
+  appearance = ButtonAppearance.Primary,
+  backgroundColor,
+  borderColor,
+  color,
+  children,
+  disabled,
+  loading,
+  onPress,
+  size = ButtonSizes.Medium,
+  variation = ButtonVariations.Basic,
+  style
+}, ref) => {
+  const theme = useTheme();
+  const buttonStyles = getButtonStyles({
+    appearance,
+    color,
+    variation,
+    size,
+    backgroundColor,
+    borderColor,
+    theme
+  });
+  const textStyles = getButtonTextStyles({
+    color,
+    variation,
+    appearance,
+    theme
+  });
+  const hasGradient = appearance === ButtonAppearance.Primary && variation === ButtonVariations.Basic;
+  const content = loading ? (/*#__PURE__*/React.createElement(Loading, {
+    color: textStyles.color
+  })) : (/*#__PURE__*/React.createElement(BaseText, {
+    bold: true,
+    style: [textStyles, disabled ? {
+      color: theme.color.text.disabled
+    } : {}]
+  }, children));
+  return /*#__PURE__*/React.createElement(Pressable, {
+    ref: ref,
+    onPress: onPress,
+    disabled: disabled || loading,
+    style: ({
+      pressed
+    }) => [buttonStyles, disabled && {
+      backgroundColor: theme.color.surface.disabled,
+      borderColor: theme.color.border.disabled
+    }, pressed && {
+      opacity: 0.8
+    }, style]
+  }, hasGradient && (/*#__PURE__*/React.createElement(Gradient, {
+    gradient: theme.color.gradient.orange10,
+    style: Object.assign(Object.assign({}, buttonStyles), gradientStyles.fullSize)
+  })), content);
+});
+Button.displayName = 'Button';
+
+const getLinkStyles = ({
+  theme // eslint-disable-line @typescript-eslint/no-unused-vars
+}) => {
+  return StyleSheet.create({
+    container: {
+      alignSelf: 'baseline',
+      margin: 0,
+      padding: 0,
+      display: 'flex',
+      flexDirection: 'row',
+      height: 'auto',
+      minHeight: 0,
+      alignItems: 'baseline',
+      justifyContent: 'flex-start',
+      width: 'auto',
+      minWidth: 0
+    }
+  }).container;
+};
+const getLinkTextStyles = ({
+  theme,
+  buttonAppearance,
+  color,
+  textDecoration
+}) => {
+  return StyleSheet.create({
+    text: Object.assign({
+      color: buttonAppearance === ButtonAppearance.Primary ? theme.color.text.button : color || theme.color.text.link,
+      textDecorationLine: textDecoration ? 'underline' : 'none'
+    }, !buttonAppearance ? {
+      margin: 0,
+      padding: 0,
+      lineHeight: undefined,
+      textAlignVertical: 'auto',
+      flex: undefined,
+      alignSelf: 'baseline'
+    } : {})
+  }).text;
+};
+
+/**
+ * Link component for React Native
+ * - Uses React Navigation for internal navigation (to)
+ * - Uses Linking API for external links (href)
+ */
+const Link = /*#__PURE__*/forwardRef$1((_a, ref) => {
+  var {
+      active,
+      bold,
+      buttonAppearance,
+      buttonSize,
+      children,
+      href,
+      to,
+      params,
+      style,
+      textType,
+      textDecoration = true,
+      onClick
+    } = _a,
+    props = __rest(_a, ["active", "bold", "buttonAppearance", "buttonSize", "children", "href", "to", "params", "style", "textType", "textDecoration", "onClick"]);
+  const theme = useTheme();
+  // Always call useNavigation, but handle the case where it's not available
+  const navigation = useNavigation();
+  const hasGradient = buttonAppearance === ButtonAppearance.Primary;
+  const handlePress = () => {
+    if (onClick) {
+      onClick();
+    }
+    if (href) {
+      // Handle external link
+      Linking.openURL(href).catch(err => {
+        console.error('Failed to open URL:', err);
+      });
+    } else if (to) {
+      // Handle internal navigation
+      try {
+        navigation.navigate(to, params);
+      } catch (_error) {
+        console.warn('Navigation not available. Make sure your Link is inside NavigationContainer.');
+      }
+    }
+  };
+  const linkStyles = buttonAppearance ? getButtonStyles({
+    theme,
+    appearance: buttonAppearance,
+    size: buttonSize || ButtonSizes.Stretch,
+    variation: ButtonVariations.Basic
+  }) : getLinkStyles({
+    theme
+  });
+  return /*#__PURE__*/React.createElement(Pressable, Object.assign({
+    ref: ref,
+    onPress: handlePress,
+    accessibilityRole: "link",
+    style: [linkStyles, style]
+  }, props), hasGradient && (/*#__PURE__*/React.createElement(Gradient, {
+    gradient: theme.color.gradient.orange10,
+    style: Object.assign(Object.assign({}, linkStyles), gradientStyles.fullSize)
+  })), /*#__PURE__*/React.createElement(BaseText, {
+    type: textType || TextTypes.Body5,
+    bold: Boolean(buttonAppearance || bold),
+    style: getLinkTextStyles({
+      theme,
+      buttonAppearance,
+      textDecoration: buttonAppearance ? false : textDecoration
+    })
+  }, children));
+});
+
+// Example outputs:
+/*
+Input: Check out www.google.com for more info
+Output: Check out <a href="https://www.google.com" target="_blank">www.google.com</a> for more info
+
+Input: Visit little-world.io and https://example.com
+Output: Visit <a href="https://little-world.io" target="_blank">little-world.io</a> and <a href="https://example.com" target="_blank">https://example.com</a>
+*/
+const urlPattern = /(?<=^|\s)(?:https?:\/\/)?(?:www\.)?(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}(?:\/[^\s]*)?/g;
+/**
+ * Replaces all URLs in a text with HTML anchor tags
+ * @param text - The input text containing URLs
+ * @returns The text with URLs replaced with anchor tags
+ */
+function replaceUrlsWithAnchors(text) {
+  return text.replace(urlPattern, match => {
+    // Ensure URL has protocol for href
+    try {
+      if (!isValidUrl(match)) return match;
+      const href = match.startsWith('http') ? match : `https://${match}`;
+      return `<a {"target":"_blank", "href":"${href}"}>${match}</a>`;
+    } catch (_a) {
+      return match;
+    }
+  });
+}
+
+const ColorText = styled.Text`
+  color: ${({
+  theme,
+  color
+}) => color === SupportedColorTags.bold ? 'currentColor' : theme.color.text[color]};
+
+  ${({
+  color
+}) => color === SupportedColorTags.bold || color === SupportedColorTags.highlight ? css`
+          font-weight: bold;
+          font-family: 'SignikaNegativeBold';
+        ` : css`
+          font-weight: normal;
+          font-family: 'SignikaNegative';
+        `};
+`;
+const ANCHOR_TAG = 'a';
+const BUTTON_TAG = 'button';
+var SupportedColorTags;
+(function (SupportedColorTags) {
+  SupportedColorTags["highlight"] = "highlight";
+  SupportedColorTags["bold"] = "bold";
+})(SupportedColorTags || (SupportedColorTags = {}));
+const findTags = text => {
+  const tags = [];
+  const textLength = text.length;
+  let position = 0;
+  while (position < textLength) {
+    const openBracket = text.indexOf('<', position);
+    if (openBracket === -1) break;
+    const closeBracket = text.indexOf('>', openBracket);
+    if (closeBracket === -1) break;
+    // Extract tag content
+    const tagContent = text.substring(openBracket + 1, closeBracket);
+    // Check if it's a valid opening tag (starts with letter)
+    if (/^[a-zA-Z]/.test(tagContent)) {
+      const firstSpace = tagContent.indexOf(' ');
+      const tagName = firstSpace === -1 ? tagContent : tagContent.substring(0, firstSpace);
+      const attributesText = firstSpace === -1 ? '' : tagContent.substring(firstSpace + 1);
+      // Parse attributes safely
+      let attributes = {};
+      if (attributesText.trim()) {
+        try {
+          attributes = JSON.parse(attributesText);
+        } catch (_a) {
+          // Invalid JSON - treat as plain text
+          position = closeBracket + 1;
+          continue;
+        }
+      }
+      // Look for closing tag
+      const closingTag = `</${tagName}>`;
+      const closingTagIndex = text.indexOf(closingTag, closeBracket + 1);
+      if (closingTagIndex !== -1) {
+        // Found complete tag
+        tags.push({
+          start: openBracket,
+          end: closingTagIndex + closingTag.length,
+          tagName,
+          attributes,
+          hasClosingTag: true,
+          contentStart: closeBracket + 1,
+          contentEnd: closingTagIndex
+        });
+        position = closingTagIndex + closingTag.length;
+      } else {
+        // No closing tag - treat as plain text
+        position = closeBracket + 1;
+      }
+    } else {
+      // Not a valid tag - move past it
+      position = closeBracket + 1;
+    }
+  }
+  return tags;
+};
+// Unified content parser that handles both onlyLinks and normal modes
+const parseContent = (content, options) => {
+  const tags = findTags(content);
+  if (tags.length === 0) {
+    return [content];
+  }
+  const components = [];
+  let currentIndex = 0;
+  for (const tag of tags) {
+    // Add text before this tag
+    if (tag.start > currentIndex) {
+      components.push(content.substring(currentIndex, tag.start));
+    }
+    // Extract content between tags
+    const tagContent = content.substring(tag.contentStart, tag.contentEnd);
+    // Process the tag based on type and options
+    if (options.nonInteractive) {
+      // In nonInteractive mode, render all tags as plain text
+      components.push(content.substring(tag.start, tag.end));
+    } else if (tag.tagName === ANCHOR_TAG) {
+      // Always process anchor tags
+      const nestedContent = parseContent(tagContent, options);
+      components.push(tag.attributes.href || tag.attributes.to ? (/*#__PURE__*/React.createElement(Link, Object.assign({
+        key: `${tag.tagName}-${tag.start}-${tag.end}`,
+        to: tag.attributes.href || tag.attributes.to
+      }, tag.attributes), nestedContent)) : (/*#__PURE__*/React.createElement(Text$1, {
+        key: `${tag.tagName}-${tag.start}-${tag.end}`
+      }, nestedContent)));
+    } else if (options.onlyLinks) {
+      // In onlyLinks mode, treat all non-anchor tags as plain text
+      components.push(content.substring(tag.start, tag.end));
+    } else if (tag.tagName === BUTTON_TAG) {
+      const nestedContent = parseContent(tagContent, options);
+      components.push(/*#__PURE__*/React.createElement(Button, Object.assign({
+        key: `${tag.tagName}-${tag.start}-${tag.end}`
+      }, tag.attributes), nestedContent));
+    } else if (Object.values(SupportedColorTags).includes(tag.tagName)) {
+      const nestedContent = parseContent(tagContent, options);
+      components.push(/*#__PURE__*/React.createElement(ColorText, {
+        key: `${tag.tagName}-${tag.start}-${tag.end}`,
+        color: SupportedColorTags[tag.tagName]
+      }, nestedContent));
+    } else if (options.customElements) {
+      // Check for custom elements
+      const customElement = options.customElements.find(element => element.tag === tag.tagName);
+      if (customElement) {
+        const nestedContent = parseContent(tagContent, options);
+        components.push(/*#__PURE__*/React.createElement(customElement.Component, Object.assign({
+          key: `${tag.tagName}-${tag.start}-${tag.end}`
+        }, tag.attributes, customElement.props), nestedContent));
+      } else {
+        // Unrecognized tag, add as plain text
+        components.push(content.substring(tag.start, tag.end));
+      }
+    } else {
+      // Unrecognized tag, add as plain text
+      components.push(content.substring(tag.start, tag.end));
+    }
+    currentIndex = tag.end;
+  }
+  // Add remaining text after last tag
+  if (currentIndex < content.length) {
+    components.push(content.substring(currentIndex));
+  }
+  return components;
+};
+const textParser = (text, options = {}) => {
+  // In nonInteractive mode, don't convert URLs to links
+  const textWithParsedUrls = options.nonInteractive ? text : replaceUrlsWithAnchors(text);
+  // Find all complete tags
+  const tags = findTags(textWithParsedUrls);
+  if (tags.length === 0) {
+    return /*#__PURE__*/React.createElement(Text$1, null, textWithParsedUrls);
+  }
+  const components = [];
+  let currentIndex = 0;
+  for (const tag of tags) {
+    // Add text before this tag
+    if (tag.start > currentIndex) {
+      components.push(textWithParsedUrls.substring(currentIndex, tag.start));
+    }
+    // Extract content between tags
+    const content = textWithParsedUrls.substring(tag.contentStart, tag.contentEnd);
+    // Process the tag based on type
+    if (options.nonInteractive) {
+      // In nonInteractive mode, render all tags as plain text
+      components.push(textWithParsedUrls.substring(tag.start, tag.end));
+    } else if (tag.tagName === ANCHOR_TAG) {
+      // Always process anchor tags (even in onlyLinks mode)
+      const nestedContent = parseContent(content, options);
+      components.push(tag.attributes.href || tag.attributes.to ? (/*#__PURE__*/React.createElement(Link, Object.assign({
+        key: `${tag.tagName}-${tag.start}-${tag.end}`,
+        to: tag.attributes.href || tag.attributes.to
+      }, tag.attributes), nestedContent)) : (/*#__PURE__*/React.createElement(Text$1, {
+        key: `${tag.tagName}-${tag.start}-${tag.end}`
+      }, nestedContent)));
+    } else if (options.onlyLinks) {
+      // In onlyLinks mode, treat all non-anchor tags as plain text
+      components.push(textWithParsedUrls.substring(tag.start, tag.end));
+    } else if (tag.tagName === BUTTON_TAG) {
+      const nestedContent = parseContent(content, options);
+      components.push(/*#__PURE__*/React.createElement(Button, Object.assign({
+        key: `${tag.tagName}-${tag.start}-${tag.end}`
+      }, tag.attributes), nestedContent));
+    } else if (Object.values(SupportedColorTags).includes(tag.tagName)) {
+      const nestedContent = parseContent(content, options);
+      components.push(/*#__PURE__*/React.createElement(ColorText, {
+        key: `${tag.tagName}-${tag.start}-${tag.end}`,
+        color: SupportedColorTags[tag.tagName]
+      }, nestedContent));
+    } else if (options.customElements) {
+      // Check for custom elements
+      const customElement = options.customElements.find(element => element.tag === tag.tagName);
+      if (customElement) {
+        const nestedContent = parseContent(content, options);
+        components.push(/*#__PURE__*/React.createElement(customElement.Component, Object.assign({
+          key: `${tag.tagName}-${tag.start}-${tag.end}`
+        }, tag.attributes, customElement.props), nestedContent));
+      } else {
+        // Unrecognized tag, add as plain text
+        components.push(textWithParsedUrls.substring(tag.start, tag.end));
+      }
+    } else {
+      // Unrecognized tag, add as plain text
+      components.push(textWithParsedUrls.substring(tag.start, tag.end));
+    }
+    currentIndex = tag.end;
+  }
+  // Add remaining text after last tag
+  if (currentIndex < textWithParsedUrls.length) {
+    components.push(textWithParsedUrls.substring(currentIndex));
+  }
+  return /*#__PURE__*/React.createElement(Text$1, null, components.map((section, index) => typeof section === 'string' ? (/*#__PURE__*/React.createElement(Text$1, {
+    key: index
+  }, section)) : (/*#__PURE__*/React.cloneElement(section, {
+    key: index
+  }))));
+};
+
+const Text = _a => {
+  var {
+      disableParser = false,
+      children
+    } = _a,
+    baseTextProps = __rest(_a, ["disableParser", "children"]);
+  return /*#__PURE__*/React.createElement(BaseText, Object.assign({}, baseTextProps), typeof children === 'string' && !disableParser ? textParser(children) : children);
+};
+
+// export const AccordionRoot = styled(Accordion.Root)`
+//   :root {
+//     --radix-accordion-content-width: 100%:
+//     --radix-collapsible-content-width: 100%;
+//   }
+// `;
+const getAccordionStyles = ({
+  theme
+}) => StyleSheet.create({
+  root: {
+    borderWidth: 1,
+    borderRadius: theme.radius.xxsmall,
+    borderColor: theme.color.border.subtle,
+    width: 100
+  },
+  item: {
+    borderBottomWidth: 1,
+    borderColor: theme.color.border.subtle,
+    margin: 0,
+    paddingVertical: theme.spacing.xxsmall,
+    paddingHorizontal: theme.spacing.small,
+    paddingBottom: 0,
+    width: 100
+  },
+  itemLastChild: {
+    borderTopWidth: 0,
+    borderBottomWidth: 0
+  },
+  header: {
+    margin: 0,
+    width: 100
+  },
+  content: {
+    width: 100,
+    backgroundColor: theme.color.surface.secondary,
+    borderRadius: theme.radius.xxsmall,
+    padding: theme.spacing.small,
+    marginBottom: theme.spacing.small
+  },
+  trigger: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    backgroundColor: 'none',
+    paddingVertical: theme.spacing.xxsmall,
+    paddingHorizontal: theme.spacing.small,
+    gap: theme.spacing.small,
+    width: 100,
+    textAlign: 'left'
+  },
+  triggerIcon: {
+    flexShrink: 0,
+    marginTop: 6
+  }
+});
+
+const Accordion = ({
+  contentStyle,
+  headerType,
+  headerColor,
+  items,
+  style
+}) => {
+  const theme = useTheme();
+  const styles = useMemo$1(() => getAccordionStyles({
+    theme
+  }), [theme]);
+  return /*#__PURE__*/React.createElement(AccordionPrimitive.Root, {
+    style: [styles.root, style],
+    type: "single",
+    collapsible: true
+  }, items.map(({
+    content,
+    header
+  }) => (/*#__PURE__*/React.createElement(AccordionPrimitive.Item, {
+    value: header,
+    key: header,
+    style: styles.item
+  }, /*#__PURE__*/React.createElement(AccordionPrimitive.Header, {
+    id: header,
+    style: styles.header
+  }, /*#__PURE__*/React.createElement(AccordionPrimitive.Trigger, {
+    style: styles.trigger
+  }, /*#__PURE__*/React.createElement(Text, {
+    type: headerType || TextTypes.Body4,
+    color: headerColor
+  }, header), /*#__PURE__*/React.createElement(ChevronDownIcon, {
+    label: "accordion toggle icon",
+    width: 14,
+    height: 14,
+    color: headerColor,
+    style: styles.triggerIcon
+  }))), /*#__PURE__*/React.createElement(AccordionPrimitive.Content, {
+    style: [styles.content, contentStyle]
+  }, content)))));
+};
+
+const getCardStyles = ({
+  borderColor,
+  height,
+  theme,
+  width
+}) => Object.assign(Object.assign({
+  borderRadius: theme.radius.small,
+  backgroundColor: theme.color.surface.primary,
+  borderWidth: 1,
+  borderColor: borderColor || theme.color.border.subtle,
+  shadowColor: theme.color.text.primary,
+  shadowOffset: {
+    width: 0,
+    height: 1
+  },
+  shadowOpacity: 0.05,
+  shadowRadius: 25,
+  elevation: 2,
+  width: '100%',
+  maxWidth: '100%',
+  maxHeight: '100%',
+  flexDirection: 'column',
+  padding: theme.spacing.small
+}, width && {
+  width: CardDimensions[width]
+}), height && {
+  height
+});
+const getCardHeaderStyles = ({
+  theme
+}) => ({
+  marginBottom: theme.spacing.small
+});
+const getCardContentStyles = ({
+  align,
+  gap,
+  marginBottom,
+  theme
+}) => ({
+  flexDirection: 'column',
+  alignItems: align || 'center',
+  gap: gap || theme.spacing.small,
+  marginBottom: marginBottom || theme.spacing.small
+});
+const getCardFooterStyles = ({
+  align,
+  theme
+}) => ({
+  flexDirection: 'row',
+  marginTop: 'auto',
+  width: '100%',
+  gap: theme.spacing.small,
+  justifyContent: align || 'flex-start'
+});
+
+const CardHeader = ({
+  children,
+  textColor,
+  textType
+}) => {
+  const theme = useTheme();
+  return /*#__PURE__*/React.createElement(Text, {
+    style: getCardHeaderStyles({
+      theme
+    }),
+    type: textType || TextTypes.Heading4,
+    center: true,
+    color: textColor
+  }, children);
+};
+const CardContent = ({
+  children,
+  align,
+  gap,
+  marginBottom
+}) => {
+  const theme = useTheme();
+  const styles = getCardContentStyles({
+    align,
+    gap: gap,
+    marginBottom: marginBottom,
+    theme
+  });
+  const {
+      flexDirection,
+      alignItems,
+      gap: contentGap,
+      marginBottom: contentMarginBottom
+    } = styles,
+    containerStyle = __rest(styles, ["flexDirection", "alignItems", "gap", "marginBottom"]);
+  return /*#__PURE__*/React.createElement(ScrollView, {
+    style: containerStyle,
+    contentContainerStyle: {
+      flexDirection,
+      alignItems,
+      gap: contentGap,
+      marginBottom: contentMarginBottom
+    }
+  }, children);
+};
+const CardFooter = ({
+  children,
+  align
+}) => {
+  const theme = useTheme();
+  return /*#__PURE__*/React.createElement(View, {
+    style: getCardFooterStyles({
+      align,
+      theme
+    })
+  }, children);
+};
+const Card = ({
+  borderColor,
+  children,
+  style,
+  height,
+  width
+}) => {
+  const theme = useTheme();
+  return /*#__PURE__*/React.createElement(View, {
+    style: [getCardStyles({
+      borderColor,
+      height: height,
+      width,
+      theme
+    }), style]
+  }, children);
+};
+
+const ITEM_WIDTH$1 = 16;
+const getContainerStyles = ({
+  theme
+}) => StyleSheet.create({
+  container: {
+    display: 'flex',
+    alignItems: 'center',
+    marginVertical: theme.spacing.xxxxsmall,
+    flexDirection: 'row'
+  }
+});
+const getCheckboxStyles = ({
+  theme,
+  hasError,
+  color,
+  checked
+}) => StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start'
+  },
+  text: {
+    paddingHorizontal: 8
+  },
+  checkbox: Object.assign({
+    height: ITEM_WIDTH$1,
+    width: ITEM_WIDTH$1,
+    borderWidth: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    borderColor: hasError ? theme.color.border.error : theme.color.border.contrast,
+    backgroundColor: checked ? color : theme.color.surface.primary
+  }, checked && color && {
+    backgroundColor: color,
+    borderColor: color,
+    color: theme.color.text.reversed
+  })
+});
+const indicatorStyles = StyleSheet.create({
+  indicator: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+
+const getLabelStyles = ({
+  theme,
+  bold,
+  inline,
+  marginBottom
+}) => {
+  const baseStyles = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: theme.spacing.xxxsmall,
+    fontWeight: bold ? 'bold' : 'normal',
+    flexShrink: inline ? 1 : 0,
+    marginBottom: marginBottom ? marginBottom : 0
+  };
+  return baseStyles;
+};
+
+const Label = ({
+  children,
+  style,
+  bold,
+  inline,
+  marginBottom,
+  nativeId // eslint-disable-line @typescript-eslint/no-unused-vars
+}) => {
+  const theme = useTheme();
+  return /*#__PURE__*/React.createElement(Text, {
+    style: [getLabelStyles({
+      theme,
+      bold,
+      inline,
+      marginBottom
+    }), style]
+  }, children);
+};
+
+const Checkbox = _a => {
+  var {
+      checked,
+      color,
+      error,
+      required = true,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      inputRef,
+      id,
+      label,
+      onCheckedChange,
+      readOnly,
+      style
+    } = _a,
+    rest = __rest(_a, ["checked", "color", "error", "required", "inputRef", "id", "label", "onCheckedChange", "readOnly", "style"]);
+  const theme = useTheme();
+  const checkboxContainerStyle = useMemo$1(() => getContainerStyles({
+    theme
+  }), [theme]);
+  const checkboxstyles = useMemo$1(() => getCheckboxStyles({
+    theme,
+    hasError: Boolean(error),
+    color,
+    checked
+  }), [theme, error, color, checked]);
+  function handlePress() {
+    onCheckedChange(!checked);
+  }
+  const [checked1, setChecked] = React.useState(false);
+  return /*#__PURE__*/React.createElement(View, {
+    style: checkboxContainerStyle.container
+  }, readOnly ? (/*#__PURE__*/React.createElement(View, {
+    style: checkboxstyles.checkbox
+  }, checked && (/*#__PURE__*/React.createElement(CheckIcon, {
+    label: "check icon",
+    width: 10,
+    height: 10,
+    style: indicatorStyles.indicator
+  })))) : (/*#__PURE__*/React.createElement(CheckboxPrimitive.Root, Object.assign({
+    id: id,
+    style: checkboxstyles.checkbox,
+    onPress: handlePress
+  }, rest, {
+    checked: checked1,
+    onCheckedChange: setChecked
+  }), /*#__PURE__*/React.createElement(CheckboxPrimitive.Indicator, null, /*#__PURE__*/React.createElement(CheckIcon, {
+    label: "check icon",
+    width: 10,
+    height: 10,
+    style: indicatorStyles.indicator
+  })))), /*#__PURE__*/React.createElement(Label, {
+    style: checkboxstyles.text
+  }, label));
+};
+
+css`
+  border: 1px solid ${({
+  theme
+}) => theme.color.border.error};
+`;
+const InputError = ({
+  children,
+  top,
+  bottom,
+  right,
+  left,
+  visible = true,
+  textAlign = 'left'
+}) => {
+  const theme = useTheme();
+  if (!visible) return null;
+  const containerStyle = {
+    position: 'absolute',
+    top: top ? Number(top) : undefined,
+    bottom: bottom ? Number(bottom) : undefined,
+    right: right ? Number(right) : undefined,
+    left: left ? Number(left) : undefined
+  };
+  const textStyle = {
+    color: theme.color.text.error,
+    textAlign
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: containerStyle
+  }, /*#__PURE__*/React.createElement(Text$1, {
+    style: textStyle
+  }, children));
+};
+
+// import { INPUT_ERROR_CSS } from '../InputError/InputError';
+// import { BODY_5_CSS } from '../Text/styles';
+const DROPDOWN_MAX_WIDTH = 300;
+const getDropdownStyles = ({
+  theme,
+  maxWidth,
+  height,
+  hasError // eslint-disable-line @typescript-eslint/no-unused-vars
+}) => StyleSheet.create({
+  wrapper: {
+    position: 'relative',
+    maxWidth: maxWidth || DROPDOWN_MAX_WIDTH,
+    width: '100%'
+  },
+  trigger: {
+    // all: 'unset',
+    // boxSizing: 'border-box',
+    // display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: theme.spacing.xxsmall,
+    paddingHorizontal: height === InputHeight.Small ? theme.spacing.small : theme.spacing.xsmall,
+    lineHeight: 1.25,
+    height: height === InputHeight.Small ? 34 : 40,
+    gap: theme.spacing.xsmall,
+    backgroundColor: theme.color.surface.primary,
+    borderRadius: theme.radius.xxxsmall,
+    borderWidth: 2,
+    borderColor: theme.color.border.subtle,
+    width: '100%',
+    color: theme.color.text.secondary,
+    marginBottom: theme.spacing.xxxxsmall
+  },
+  triggerWithError: {
+    // input error styles
+  }
+});
+// export const SelectTrigger = styled(Select.Trigger)<{
+//   $hasError: boolean;
+//   $height?: string;
+// }>`
+//   > span:first-child,
+//   > span:first-child p {
+//     ${BODY_5_CSS}
+//     white-space: nowrap;
+//     overflow: hidden;
+//     text-overflow: ellipsis;
+//   }
+//   svg {
+//     color: ${({ theme }) => theme.color.text.secondary};
+//   }
+//   &[data-placeholder] {
+//     background-color: ${({ theme }) => theme.color.surface.primary};
+//     color: ${({ theme }) => theme.color.text.tertiary};
+//     svg {
+//       color: ${({ theme }) => theme.color.text.highlight};
+//     }
+//   }
+// `;
+// export const SelectValue = styled(Select.Value)`
+//   &[data-placeholder] {
+//     background-color: ${({ theme }) => theme.color.surface.primary};
+//   }
+// `;
+// export const SelectContent = styled(Select.Content)`
+//   overflow: hidden;
+//   background-color: ${({ theme }) => theme.color.surface.primary};
+//   border-radius: 6px;
+//   box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35),
+//     0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+//   z-index: 100;
+// `;
+// export const SelectViewport = styled(Select.Viewport)`
+//   padding: ${({ theme }) => theme.spacing.xxsmall} ${({ theme }) => theme.spacing.xxxsmall};
+//   max-height: 200px;
+//   overflow: scroll;
+// `;
+// export const SelectIcon = styled(Select.Icon)`
+//   display: flex;
+// `;
+// export const SelectItem = styled(Select.Item)`
+//   font-size: 13px;
+//   line-height: 1;
+//   border-radius: 3px;
+//   display: flex;
+//   align-items: center;
+//   height: 25px;
+//   padding: 0 ${({ theme }) => theme.spacing.large} 0 ${({ theme }) => theme.spacing.medium};
+//   position: relative;
+//   user-select: none;
+//   &:disabled {
+//     color: gray;
+//     pointer-events: none;
+//   }
+// `;
+// export const SelectItemIndicator = styled(Select.ItemIndicator)`
+//   position: absolute;
+//   left: 0;
+//   width: 25px;
+//   display: inline-flex;
+//   align-items: center;
+//   justify-content: center;
+// `;
+
+const ARROW_DOWN_WIDTH = 13;
+const ARROW_DOWN_HEIGHT = 8;
+// const isValidValue = (value: string, options: Options) =>
+//   options.some((option: any) => option.value === value);
+const Option = ({
+  children,
+  value // eslint-disable-line @typescript-eslint/no-unused-vars
+}) => {
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Item
+  // value={value}
+  , null, /*#__PURE__*/React.createElement(Text, null, children), /*#__PURE__*/React.createElement(DropdownMenuPrimitive.ItemIndicator, null, /*#__PURE__*/React.createElement(CheckIcon, {
+    label: "selected item",
+    width: 10
+  })));
+};
+const Dropdown = ({
+  ariaLabel,
+  error,
+  cannotError,
+  disabled,
+  // eslint-disable-line @typescript-eslint/no-unused-vars
+  height,
+  inputRef,
+  // eslint-disable-line @typescript-eslint/no-unused-vars
+  label,
+  labelTooltip,
+  // eslint-disable-line @typescript-eslint/no-unused-vars
+  lockedValue,
+  maxWidth,
+  onValueChange,
+  // eslint-disable-line @typescript-eslint/no-unused-vars
+  options,
+  placeholder,
+  // eslint-disable-line @typescript-eslint/no-unused-vars
+  required,
+  // eslint-disable-line @typescript-eslint/no-unused-vars
+  value,
+  // eslint-disable-line @typescript-eslint/no-unused-vars
+  style
+}) => {
+  const theme = useTheme();
+  const styles = getDropdownStyles({
+    theme,
+    maxWidth: maxWidth,
+    height: height,
+    hasError: Boolean(error)
+  });
+  // const defaultValue =
+  //   lockedValue || (value && isValidValue(value, options) ? value : undefined);
+  const canError = !lockedValue && !cannotError;
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.wrapper, style]
+  }, label && (/*#__PURE__*/React.createElement(Label, {
+    bold: true
+  }, label)), /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Root
+  // disabled={disabled || !!lockedValue}
+  // onValueChange={onValueChange}
+  // required={required}
+  // defaultValue={defaultValue}
+  , null, /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Trigger, {
+    "aria-label": ariaLabel || label
+  }, !lockedValue && (/*#__PURE__*/React.createElement(ChevronDownIcon, {
+    width: ARROW_DOWN_WIDTH,
+    height: ARROW_DOWN_HEIGHT,
+    label: "dropdown icon"
+  }))), /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Content, null, options.map(option => (/*#__PURE__*/React.createElement(Option, {
+    key: option.label,
+    value: option.value
+  }, option.label))))), canError && /*#__PURE__*/React.createElement(InputError, {
+    visible: Boolean(error)
+  }, error));
+};
+
+const Illustration = ({
+  children,
+  label,
+  labelVisible,
+  labelTop = tokens.spacing.xxlarge
+}) => (/*#__PURE__*/React.createElement(View, null, children, labelVisible && /*#__PURE__*/React.createElement(ImageLabel, {
+  top: labelTop
+}, label)));
+
+const createIllustrationComponent = ({
+  name,
+  svgData
+}) => {
+  const Component = ({
+    height = 24,
+    width = 24,
+    style,
+    color,
+    label,
+    labelVisible
+  }) => {
+    // Create the transform options for React Native SVG
+    const svgOptions = {
+      width,
+      height,
+      style,
+      color,
+      label
+    };
+    return /*#__PURE__*/React.createElement(Illustration, {
+      label: label,
+      labelVisible: labelVisible
+    }, createReactNativeSvg(svgData, svgOptions));
+  };
+  Component.displayName = `${name}Image`;
+  return Component;
+};
+
+const BrokenChainImage = createIllustrationComponent({
+  name: 'BrokenChain',
+  svgData: brokenChainIllustration
+});
+const ConfettiImage = createIllustrationComponent({
+  name: 'Confetti',
+  svgData: confettiIllustration
+});
+const FriendshipImage = createIllustrationComponent({
+  name: 'Friendship',
+  svgData: friendshipIllustration
+});
+const GroupHandsImage = createIllustrationComponent({
+  name: 'GroupHands',
+  svgData: groupHandsIllustration
+});
+const KeyImage = createIllustrationComponent({
+  name: 'Key',
+  svgData: keyIllustration
+});
+const LivingRoomImage = createIllustrationComponent({
+  name: 'LivingRoom',
+  svgData: livingRoomIllustration
+});
+const LaptopWithPhoneImage = createIllustrationComponent({
+  name: 'LaptopWithPhone',
+  svgData: laptopWithPhoneIllustration
+});
+const ManOnRocketImage = createIllustrationComponent({
+  name: 'ManOnRocket',
+  svgData: manOnRocketIllustration
+});
+const MatchSearchingImage = createIllustrationComponent({
+  name: 'MatchSearching',
+  svgData: matchSearchingIllustration
+});
+const PaperPlaneImage = createIllustrationComponent({
+  name: 'PaperPlane',
+  svgData: paperPlaneIllustration
+});
+const PeopleTogetherImage = createIllustrationComponent({
+  name: 'PeopleTogether',
+  svgData: peopleTogetherIllustration
+});
+const QuestionMarksImage = createIllustrationComponent({
+  name: 'QuestionMarks',
+  svgData: questionMarksIllustration
+});
+const RaisingMoneyImage = createIllustrationComponent({
+  name: 'RaisingMoney',
+  svgData: raisingMoneyIllustration
+});
+const TeacherImage = createIllustrationComponent({
+  name: 'Teacher',
+  svgData: teacherIllustration
+});
+const TimeFlexibleImage = createIllustrationComponent({
+  name: 'TimeFlexible',
+  svgData: timeFlexibleIllustration
+});
+const UnmatchedImage = createIllustrationComponent({
+  name: 'Unmatched',
+  svgData: unmatchedIllustration
+});
+const WavyBlockImage = createIllustrationComponent({
+  name: 'WavyBlock',
+  svgData: wavyBlockIllustration
+});
+const WavyLinesImage = createIllustrationComponent({
+  name: 'WavyLines',
+  svgData: wavyLinesIllustration
+});
+const WomanOnRocketImage = createIllustrationComponent({
+  name: 'WomanOnRocket',
+  svgData: womanOnRocketIllustration
+});
+
+// import {
+//   slideDownAndFade,
+//   slideLeftAndFade,
+//   slideRightAndFade,
+//   slideUpAndFade,
+// } from "../../utils/animations";
+//   &[data-state="delayed-open"][data-side="top"] {
+//     animation-name: ${slideDownAndFade};
+//   }
+//   &[data-state="delayed-open"][data-side="right"] {
+//     animation-name: ${slideLeftAndFade};
+//   }
+//   &[data-state="delayed-open"][data-side="bottom"] {
+//     animation-name: ${slideUpAndFade};
+//   }
+//   &[data-state="delayed-open"][data-side="left"] {
+//     animation-name: ${slideRightAndFade};
+//   }
+// `;
+const getPopoverContentStyles = ({
+  theme,
+  width,
+  extraPaddingTop,
+  asToolTip
+}) => StyleSheet.create({
+  content: Object.assign({
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'absolute',
+    zIndex: 9999,
+    borderRadius: theme.radius.xxxsmall,
+    padding: theme.spacing.small,
+    width: width || undefined,
+    maxWidth: PopoverSizes.Large,
+    shadowColor: 'rgba(20, 25, 30, 0.35)',
+    shadowOffset: {
+      width: 0,
+      height: 10
+    },
+    shadowOpacity: 0.35,
+    shadowRadius: 20,
+    elevation: 6,
+    backgroundColor: asToolTip ? theme.color.surface.bold : theme.color.surface.primary,
+    paddingRight: asToolTip ? theme.spacing.medium : theme.spacing.small
+  }, extraPaddingTop && {
+    paddingTop: theme.spacing.medium
+  })
+});
+const getPopoverCloseStyles = ({
+  theme,
+  asToolTip
+}) => StyleSheet.create({
+  close: {
+    position: 'absolute',
+    top: theme.spacing.xsmall,
+    right: theme.spacing.xsmall,
+    width: 12,
+    height: 12,
+    color: asToolTip ? theme.color.text.reversed : theme.color.text.primary
+  }
+});
+// export const StyledPopoverContent = styled(PopoverContent)<{
+//   $asToolTip?: boolean;
+//   $extraPaddingTop: boolean;
+//   $width: PopoverSizes;
+// }>`
+//   ${POPOVER_CONTENT_CSS}
+//   display: flex;
+//   flex-direction: column;
+//   z-index: 1000;
+//   ${({ $width }) =>
+//     $width &&
+//     `
+//       width: ${$width};
+//     `}
+//   ${({ $extraPaddingTop, theme }) =>
+//     $extraPaddingTop &&
+//     `
+//     padding-top: ${theme.spacing.medium};
+//   `}
+//   ${({ $asToolTip, theme }) => css`
+//     background-color: ${$asToolTip
+//       ? theme.color.surface.bold
+//       : theme.color.surface.primary};
+//     color: ${$asToolTip ? theme.color.text.reversed : theme.color.text.primary};
+//     padding-right: ${$asToolTip
+//       ? theme.spacing.medium
+//       : theme.spacing.small};
+//   `}
+//   &[data-state='open'][data-side='top'] {
+//     animation-name: ${slideDownAndFade};
+//   }
+//   &[data-state="open"][data-side="right"] {
+//     animation-name: ${slideLeftAndFade};
+//   }
+//   &[data-state="open"][data-side="bottom"] {
+//     animation-name: ${slideUpAndFade};
+//   }
+//   &[data-state="open"][data-side="left"] {
+//     animation-name: ${slideRightAndFade};
+//   }
+// `;
+// export const StyledPopoverClose = styled(PopoverClose)<{
+//   $asToolTip?: boolean;
+// }>`
+//   position: absolute;
+//   top: ${({ theme }) => theme.spacing.xsmall};
+//   right: ${({ theme }) => theme.spacing.xsmall};
+//   width: 12px !important;
+//   height: 12px !important;
+//   color: ${({ $asToolTip, theme }) =>
+//     $asToolTip ? theme.color.text.reversed : theme.color.text.primary};
+// `;
+// export const StyledPopoverArrow = styled(PopoverArrow)<{
+//   $asToolTip?: boolean;
+// }>`
+//   fill: ${({ $asToolTip, theme }) =>
+//     $asToolTip ? theme.color.surface.bold : theme.color.surface.primary};
+// `;
+
+const DEFAULT_SIDE_OFFSET$1 = 0; //px
+const Popover = ({
+  asToolTip,
+  children,
+  side,
+  sideOffset = DEFAULT_SIDE_OFFSET$1,
+  showCloseButton,
+  trigger,
+  width = PopoverSizes.Small
+  // defaultOpen,
+  // open
+}) => {
+  const theme = useTheme();
+  const [_isOpen, setIsOpen] = useState$1(false);
+  const contentStyles = useMemo$1(() => getPopoverContentStyles({
+    theme,
+    width,
+    extraPaddingTop: Boolean(!asToolTip && showCloseButton),
+    asToolTip
+  }), [theme, width, showCloseButton, asToolTip]);
+  const closeStyles = useMemo$1(() => getPopoverCloseStyles({
+    theme,
+    asToolTip
+  }), [theme, asToolTip]);
+  return /*#__PURE__*/React.createElement(PopoverPrimitive.Root, {
+    onOpenChange: setIsOpen
+  }, trigger && (/*#__PURE__*/React.createElement(PopoverPrimitive.Trigger, {
+    asChild: true
+  }, trigger)), /*#__PURE__*/React.createElement(PopoverPrimitive.Content, {
+    side: side,
+    sideOffset: sideOffset || DEFAULT_SIDE_OFFSET$1,
+    onFocusOutside: () => setIsOpen(false),
+    style: contentStyles.content
+  }, children, showCloseButton && (/*#__PURE__*/React.createElement(PopoverPrimitive.Close, {
+    asChild: true,
+    style: closeStyles.close,
+    onPress: () => setIsOpen(false)
+  }, /*#__PURE__*/React.createElement(Button, {
+    variation: ButtonVariations.Icon
+  }, /*#__PURE__*/React.createElement(CloseIcon, {
+    label: "popover close"
+  }))))));
+};
+
+const getProgressBarStyles = ({
+  theme
+}) => StyleSheet.create({
+  wrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+    gap: theme.spacing.xxxsmall,
+    display: 'flex'
+  },
+  root: {
+    flex: 1,
+    position: 'relative',
+    overflow: 'hidden',
+    borderRadius: theme.radius.xsmall,
+    backgroundColor: theme.color.surface.secondary,
+    height: 8
+  },
+  indicator: {
+    backgroundColor: theme.color.surface.indicator,
+    height: '100%'
+  }
+});
+
+const ProgressBar = ({
+  style,
+  max,
+  value = 0
+}) => {
+  const [progress, setProgress] = useState$1(calculateProgress(max, value));
+  const theme = useTheme();
+  const styles = getProgressBarStyles({
+    theme
+  });
+  useEffect$1(() => {
+    setProgress(calculateProgress(max, value));
+  }, [max, value]);
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.wrapper, style]
+  }, /*#__PURE__*/React.createElement(Text, {
+    id: "progressBarIndicator",
+    type: TextTypes.Body6,
+    style: {
+      minWidth: 40
+    }
+  }, value, "/", max), /*#__PURE__*/React.createElement(ProgressPrimitive.Root, {
+    "aria-labelledby": "progressBarIndicator",
+    value: value,
+    max: max,
+    style: styles.root
+  }, /*#__PURE__*/React.createElement(ProgressPrimitive.Indicator, {
+    style: [styles.indicator, {
+      transform: `translateX(-${100 - progress}%)`
+    }]
+  })));
+};
+
+const ITEM_WIDTH = 13;
+const getRadioGroupStyles = ({
+  theme
+}) => StyleSheet.create({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing.xxsmall,
+    alignItems: 'flex-start'
+  },
+  itemContainer: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  item: {
+    // all: 'unset',
+    backgroundColor: theme.color.surface.primary,
+    borderWidth: 1,
+    borderColor: theme.color.surface.contrast,
+    borderRadius: theme.radius.full,
+    width: ITEM_WIDTH,
+    height: ITEM_WIDTH,
+    marginRight: theme.spacing.xxsmall,
+    boxShadow: '0 0 0 2px #eeb612'
+  },
+  indicator: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%'
+  }
+});
+// export const RadioGroupIndicator = styled(RadioGroup.Indicator)`
+//   &::after {
+//     content: '';
+//     display: block;
+//     width: 9px;
+//     height: 9px;
+//     border-radius: 50%;
+//     background-color: ${({ theme }) => theme.color.text.primary};
+//   }
+// `;
+
+const RadioGroup = _a => {
+  var {
+      error,
+      items,
+      label,
+      labelTooltip,
+      inputRef
+    } = _a,
+    rest = __rest(_a, ["error", "items", "label", "labelTooltip", "inputRef"]);
+  const theme = useTheme();
+  const styles = getRadioGroupStyles({
+    theme
+  });
+  return /*#__PURE__*/React.createElement(View, null, label && (/*#__PURE__*/React.createElement(Label, {
+    bold: true
+  }, label)), /*#__PURE__*/React.createElement(RadioGroupPrimitive.Root
+  // ref={inputRef}
+  // value={undefined}
+  // name={label}
+  , Object.assign({}, rest), items === null || items === void 0 ? void 0 : items.map(item => (/*#__PURE__*/React.createElement(View, {
+    key: item.id,
+    style: styles.itemContainer
+  }, /*#__PURE__*/React.createElement(RadioGroupPrimitive.Item, {
+    value: item.value,
+    id: item.id
+  }, /*#__PURE__*/React.createElement(RadioGroupPrimitive.Indicator, {
+    style: styles.indicator
+  })), item.label && /*#__PURE__*/React.createElement(Label, {
+    inline: true
+  }, item.label)))), /*#__PURE__*/React.createElement(InputError, {
+    visible: Boolean(error)
+  }, error)));
+};
+
+const getSeparatorStyles = ({
+  theme,
+  background,
+  spacing
+}) => StyleSheet.create({
+  wrapper: {
+    backgroundColor: background || theme.color.border.contrast,
+    height: 1,
+    width: '100%'
+  },
+  vertical: {
+    height: '100%',
+    width: 1,
+    marginHorizontal: spacing || theme.spacing.medium
+  },
+  horizontal: {
+    height: 1,
+    width: '100%',
+    marginVertical: spacing || theme.spacing.medium
+  }
+});
+
+const Separator = ({
+  background,
+  orientation = 'horizontal',
+  spacing,
+  style
+}) => {
+  const theme = useTheme();
+  const styles = getSeparatorStyles({
+    theme,
+    background,
+    spacing: spacing
+  });
+  return /*#__PURE__*/React.createElement(SeparatorPrimitive.Root, {
+    style: [styles.wrapper, orientation === 'vertical' ? styles.vertical : styles.horizontal, style],
+    orientation: orientation,
+    decorative: true
+  });
+};
+
+const getTagStyles = ({
+  theme,
+  size,
+  appearance,
+  color
+}) => {
+  const baseStyles = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: theme.spacing.xxxsmall,
+    backgroundColor: theme.color.surface.primary,
+    borderWidth: 2,
+    borderColor: color,
+    borderRadius: theme.radius.large,
+    minWidth: 30,
+    width: 120,
+    height: size === TagSizes.small ? 32 : 40,
+    paddingHorizontal: theme.spacing.xsmall,
+    paddingVertical: size === TagSizes.small ? theme.spacing.xsmall : theme.spacing.xxsmall
+  };
+  if (appearance === TagAppearance.filled) return Object.assign(Object.assign({}, baseStyles), {
+    backgroundColor: theme.color.surface.accent
+  });
+  return baseStyles;
+};
+
+const Tag = ({
+  children,
+  style,
+  size,
+  color,
+  appearance
+}) => {
+  const theme = useTheme();
+  return /*#__PURE__*/React.createElement(View, {
+    style: [getTagStyles({
+      theme,
+      size,
+      appearance,
+      color
+    }), style]
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: {
+      fontSize: size === TagSizes.small ? 14 : 16
+    }
+  }, children));
+};
+function Tags({
+  appearance,
+  bold,
+  color,
+  content,
+  size,
+  style
+}) {
+  return /*#__PURE__*/React.createElement(View, {
+    style: Object.assign({
+      flexDirection: 'row',
+      gap: tokens.spacing.medium,
+      flexWrap: 'wrap'
+    }, style)
+  }, content.map(tag => (/*#__PURE__*/React.createElement(Tag, {
+    key: tag,
+    bold: bold,
+    size: size,
+    color: color,
+    appearance: appearance
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: {
+      fontSize: size === TagSizes.small ? 14 : 16
+    }
+  }, tag)))));
+}
+
+const createStyles = theme => StyleSheet.create({
+  inputWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    maxWidth: InputWidth.Large
+  },
+  inputContainer: {
+    position: 'relative',
+    width: '100%'
+  },
+  input: {
+    width: '100%',
+    borderWidth: 2,
+    borderColor: theme.color.border.subtle,
+    borderRadius: 6,
+    padding: theme.spacing.xxsmall,
+    marginBottom: theme.spacing.xxxxsmall,
+    fontSize: 16,
+    // 1rem equivalent
+    lineHeight: 20 // 1.25 equivalent
+  },
+  inputSmall: {
+    padding: 5
+  },
+  inputError: {
+    borderColor: theme.color.border.error
+  },
+  showPasswordToggle: {
+    position: 'absolute',
+    right: theme.spacing.xxsmall,
+    top: theme.spacing.xxsmall
+  }
+});
+const InputWrapper = ({
+  children,
+  width = InputWidth.Large,
+  style
+}) => {
+  const theme = useTheme();
+  const styles = createStyles(theme);
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.inputWrapper, {
+      maxWidth: width
+    }, style]
+  }, children);
+};
+const InputContainer = ({
+  children,
+  style
+}) => {
+  const theme = useTheme();
+  const styles = createStyles(theme);
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.inputContainer, style]
+  }, children);
+};
+const Input = _a => {
+  var {
+      hasError,
+      height,
+      style
+    } = _a,
+    props = __rest(_a, ["hasError", "height", "style"]);
+  const theme = useTheme();
+  const styles = createStyles(theme);
+  return /*#__PURE__*/React.createElement(TextInput$1, Object.assign({
+    style: [styles.input, height === InputHeight.Small && styles.inputSmall, hasError && styles.inputError, style]
+  }, props));
+};
+// export const TelephoneInput = styled(PhoneInput)<{
+//   $hasError: boolean;
+//   $height?: string;
+// }>`
+//   > input.form-control {
+//     ${INPUT_CSS}
+//     padding-left: 52px;
+//     ${({ $hasError }) => $hasError && INPUT_ERROR_CSS}
+//   }
+//   .flag-dropdown {
+//     overflow: hidden;
+//     border: 2px solid
+//       ${({ theme, $hasError }) =>
+//         $hasError ? theme.color.border.error : theme.color.border.subtle};
+//   }
+//   .flag-dropdown.open {
+//     overflow: visible;
+//   }
+//   .flag-dropdown,
+//   .flag-dropdown.open {
+//     background: none;
+//     border-radius: 6px 0 0 6px;
+//   }
+//   .react-tel-input .flag-dropdown.open .selected-flag {
+//     background: none;
+//   }
+//   .react-tel-input .selected-flag {
+//     padding: 0 0 0 14px;
+//     scale: 1.3;
+//     width: 51px;
+//     transition: background ease 0.2s;
+//     > .flag {
+//       margin-top: -6px;
+//     }
+//   }
+//   .react-tel-input .selected-flag:focus {
+//     background: none;
+//   }
+//   .flag-dropdown .selected-flag:hover {
+//     background: ${({ theme }) => theme.color.border.subtle};
+//   }
+//   .react-tel-input .flag-dropdown.open .selected-flag {
+//     &:hover {
+//       background: none;
+//       filter: brightness(0.8);
+//     }
+//   }
+//   .react-tel-input .selected-flag,
+//   .react-tel-input .flag-dropdown.open .selected-flag {
+//     border-radius: 8px 0 0 8px;
+//   }
+// `;
+const ShowPasswordToggle = _a => {
+  var {
+      children,
+      style
+    } = _a,
+    props = __rest(_a, ["children", "style"]);
+  const theme = useTheme();
+  const styles = createStyles(theme);
+  return /*#__PURE__*/React.createElement(View, Object.assign({
+    style: [styles.showPasswordToggle, style]
+  }, props), children);
+};
+
+const PASSWORD_TOGGLE_ICON_SIZE = 20;
+const TextInput = _a => {
+  var {
+      error,
+      height,
+      id,
+      inline,
+      inputRef,
+      label,
+      labelTooltip,
+      onChange,
+      onSubmit,
+      type = 'text',
+      width = InputWidth.Large
+    } = _a,
+    inputProps = __rest(_a, ["error", "height", "id", "inline", "inputRef", "label", "labelTooltip", "onChange", "onSubmit", "type", "width"]);
+  const [inputType, setInputType] = React.useState(type);
+  const [showPassword, setShowPassword] = React.useState(false);
+  // const { defaultValue, value, ...propsWithoutValues } = inputProps;
+  const errorProps = inline ? {
+    bottom: '-16px',
+    right: '0px'
+  } : {};
+  const handlePasswordVisibilityToggle = () => {
+    if (inputType === 'password') {
+      setInputType('text');
+      setShowPassword(true);
+    } else {
+      setInputType('password');
+      setShowPassword(false);
+    }
+  };
+  const handleKeyPress = async e => {
+    if (onSubmit && e.nativeEvent.key === 'Enter') {
+      await onSubmit();
+    }
+  };
+  return /*#__PURE__*/React.createElement(InputWrapper, {
+    width: width
+  }, label && (/*#__PURE__*/React.createElement(Label, {
+    bold: true,
+    nativeId: id
+  }, label)), /*#__PURE__*/React.createElement(InputContainer, null, /*#__PURE__*/React.createElement(Input, Object.assign({
+    "aria-labelledby": id,
+    hasError: Boolean(error),
+    secureTextEntry: inputType === 'password',
+    id: id,
+    onChange: onChange,
+    onKeyPress: handleKeyPress,
+    height: height
+  }, inputProps)), type === 'password' && (/*#__PURE__*/React.createElement(ShowPasswordToggle, null, /*#__PURE__*/React.createElement(Button, {
+    variation: ButtonVariations.Icon,
+    onPress: handlePasswordVisibilityToggle
+  }, showPassword ? (/*#__PURE__*/React.createElement(EyeClosedIcon, {
+    label: "show password",
+    width: PASSWORD_TOGGLE_ICON_SIZE,
+    height: PASSWORD_TOGGLE_ICON_SIZE
+  })) : (/*#__PURE__*/React.createElement(EyeOpenIcon, {
+    label: "hide password",
+    width: PASSWORD_TOGGLE_ICON_SIZE,
+    height: PASSWORD_TOGGLE_ICON_SIZE
+  })))))), /*#__PURE__*/React.createElement(InputError, Object.assign({
+    visible: Boolean(error),
+    textAlign: width === InputWidth.Large ? 'right' : 'left'
+  }, errorProps), error));
+};
+
+const DEFAULT_SIDE_OFFSET = 4; //px
+const ToolTip = ({
+  // open,
+  side = 'top',
+  sideOffset = DEFAULT_SIDE_OFFSET,
+  trigger,
+  text
+  // ...rest
+}) => {
+  const theme = useTheme();
+  return /*#__PURE__*/React.createElement(Popover, {
+    asToolTip: true,
+    // open={open}
+    side: side,
+    sideOffset: sideOffset,
+    showCloseButton: true,
+    trigger: trigger,
+    width: PopoverSizes.Large
+  }, /*#__PURE__*/React.createElement(Text, {
+    color: theme.color.text.reversed,
+    type: TextTypes.Body5
+  }, text));
+};
+
+const lightTheme = Object.assign(Object.assign({}, tokens), {
+  color: tokens.color.theme.light
+});
+const darkTheme = Object.assign(Object.assign({}, tokens), {
+  color: tokens.color.theme.dark
+});
+const defaultTheme = lightTheme;
+const themes = {
+  [ThemeVariants.light]: lightTheme,
+  [ThemeVariants.dark]: darkTheme
+};
+const themeContext = /*#__PURE__*/createContext$1({
+  toggleMode: () => {},
+  setMode: _mode => {},
+  currentMode: defaultThemeVariant
+});
+const {
+  Provider
+} = themeContext;
+const CustomThemeProvider = ({
+  children,
+  defaultMode = defaultThemeVariant
+}) => {
+  const [currentMode, setCurrentMode] = useState$1(defaultMode);
+  const toggleMode = useCallback$1(() => {
+    setCurrentMode(currentMode => currentMode === ThemeVariants.light ? ThemeVariants.dark : ThemeVariants.light);
+  }, []);
+  const setMode = useCallback$1(mode => {
+    setCurrentMode(mode);
+  }, []);
+  const contextValue = useMemo$1(() => ({
+    currentMode,
+    toggleMode,
+    setMode
+  }), [currentMode, toggleMode, setMode]);
+  return /*#__PURE__*/React.createElement(Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: themes[currentMode]
+  }, children));
+};
+
+// Force hooks to be accessed through React (Test if still needed)
+const {
+  useState,
+  // eslint-disable-line @typescript-eslint/no-unused-vars
+  useEffect,
+  // eslint-disable-line @typescript-eslint/no-unused-vars
+  useRef,
+  // eslint-disable-line @typescript-eslint/no-unused-vars
+  useCallback,
+  // eslint-disable-line @typescript-eslint/no-unused-vars
+  useMemo,
+  // eslint-disable-line @typescript-eslint/no-unused-vars
+  createContext,
+  // eslint-disable-line @typescript-eslint/no-unused-vars
+  forwardRef // eslint-disable-line @typescript-eslint/no-unused-vars
+} = React;
+
+export { Accordion, AccountIcon, AddToChatIcon, AppointmentIcon, ArchiveIcon, ArrowLeftIcon, AttachmentIcon, BellIcon, BrokenChainImage, Button, CalendarAddIcon, CalendarIcon, CallIncomingIcon, CallOutgoingIcon, CameraIcon, Card, CardContent, CardFooter, CardHeader, CheckIcon, CheckInChatIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ClockBackIcon, ClockDashedIcon, ClockIcon, CloseIcon, ConfettiImage, CopyIcon, CustomThemeProvider, DashboardIcon, DotsIcon, DownloadIcon, Dropdown, ExclamationIcon, EyeClosedIcon, EyeOpenIcon, FacebookIcon, FriendshipImage, FullScreenExitIcon, FullScreenIcon, GithubIcon, Gradient, GroupChatIcon, GroupHandsImage, HeartIcon, ImageIcon, ImageSearchIcon, InclusiveIcon, InfoIcon, InstagramIcon, KeyImage, Label, LaptopWithPhoneImage, Link, LinkedInIcon, LivingRoomImage, Loading, LoadingLogo, Logo, LogoutIcon, MailIcon, ManOnRocketImage, MatchSearchingImage, MenuIcon, MessageIcon, MessageWithQuestionIcon, MicIcon, MobileIcon, MoonIcon, NotesIcon, PaperPlaneImage, PencilIcon, PeopleTogetherImage, PhoneIcon, PhoneSlashIcon, PlusIcon, Popover, ProfileChatIcon, ProfileIcon, ProgressBar, PuzzleIcon, QuestionIcon, QuestionMarksImage, RadioGroup, RaisingMoneyImage, ScreenShareIcon, SendIcon, Separator, SettingsIcon, SpeakerIcon, StackIcon, StarIcon, SunIcon, SwapIcon, Tag, Tags, TeacherImage, TelegramIcon, Text, TextInput, TickDoubleIcon, TickIcon, TiktokIcon, TimeFlexibleImage, ToolTip, TranslatorIcon, TrashIcon, TwitterIcon, UnmatchedImage, UploadIcon, UserDisconnectedIcon, UserSearchIcon, VideoIcon, WavyBlockImage, WavyLinesImage, WebIcon, WhatsappIcon, WomanOnRocketImage, darkTheme, defaultTheme, lightTheme, themeContext, themes };
+//# sourceMappingURL=index.esm.js.map