@app-studio/web 0.1.7 → 0.1.9

package/dist/web.esm.js

@@ -1,18 +1,4037 @@
-export * from './components/Button/Button';
-export * from './components/Form/Checkbox/Checkbox';
-export * from './components/Form/CountryPicker/CountryPicker';
-export * from './components/Form/DatePicker/DatePicker';
-export * from './components/Form/Password/Password';
-export * from './components/Form/Select/Select';
-export * from './components/Form/Switch/Switch';
-export * from './components/Form/TextArea/TextArea';
-export * from './components/Form/TextField/TextField';
-export * from './components/Layout/Center/Center';
-export * from './components/Layout/Horizontal/Horizontal';
-export * from './components/Layout/Vertical/Vertical';
-export * from './components/Layout/View/View';
-export * from './components/Link/Link';
-export * from './components/Loader/Loader';
-export * from './components/Modal/Modal';
-export * from './components/Text/Text';
+import 'core-js/modules/es6.object.assign.js';
+import React, { useEffect, useState, useCallback, useMemo, useRef } from 'react';
+import { Element, Typography, useTheme, Input, View as View$2 } from 'app-studio';
+export { View } from 'app-studio';
+import { Link as Link$1, Center as Center$1, TextField as TextField$1, View, Text as Text$1, Horizontal as Horizontal$1, Vertical as Vertical$1, Button as Button$1 } from 'src/components';
+import { Label } from './components/Form/Label/Label';
+import { IndeterminateSvg, CheckSvg, ArrowDownSvg as ArrowDownSvg$1, ArrowUpSvg as ArrowUpSvg$1, CloseSvg, ExternalLinkSvg } from './components/Svg';
+import 'core-js/modules/es6.array.map.js';
+import 'core-js/modules/es6.array.filter.js';
+import 'core-js/modules/es6.string.starts-with.js';
+import { FieldContainer, FieldContent, FieldWrapper, FieldLabel, FieldIcons } from './components/Layout/Input';
+import { ArrowDownSvg } from './components/Svg/ArrowDown';
+import { ArrowUpSvg } from './components/Svg/ArrowUp';
+import format from 'date-fns/format';
+import { FieldContainer as FieldContainer$1 } from './components/Layout/Input/FieldContainer/FieldContainer';
+import { FieldContent as FieldContent$1 } from './components/Layout/Input/FieldContent/FieldContent';
+import { FieldLabel as FieldLabel$1 } from './components/Layout/Input/FieldLabel/FieldLabel';
+import { FieldWrapper as FieldWrapper$1 } from './components/Layout/Input/FieldWrapper/FieldWrapper';
+import 'core-js/modules/es6.string.includes.js';
+import 'core-js/modules/es7.array.includes.js';
+import { FieldIcons as FieldIcons$1 } from './components/Layout/Input/FieldIcons/FieldIcons';
+import { View as View$1 } from './components/Layout/View/View';
+import { Link as Link$2 } from 'react-router-dom';
+import { useModalStore } from 'src/store/useModalStore';
+import 'core-js/modules/es6.array.slice.js';
+
+var useButtonState = function useButtonState() {
+  var _React$useState = React.useState(false),
+    isHovered = _React$useState[0],
+    setIsHovered = _React$useState[1];
+  return {
+    isHovered: isHovered,
+    setIsHovered: setIsHovered
+  };
+};
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+var ButtonSizes = {
+  xs: {
+    width: 79,
+    paddingTop: 8,
+    paddingBottom: 8,
+    paddingLeft: 12,
+    paddingRight: 12,
+    fontWeight: 600,
+    fontSize: 'xs',
+    lineHeight: 16,
+    letterSpacing: 1.25
+  },
+  sm: {
+    width: 128,
+    paddingTop: 10,
+    paddingBottom: 10,
+    paddingLeft: 16,
+    paddingRight: 16,
+    fontWeight: 600,
+    fontSize: 'sm',
+    lineHeight: 20,
+    letterSpacing: 1.25
+  },
+  md: {
+    width: 144,
+    paddingTop: 12,
+    paddingBottom: 12,
+    paddingLeft: 18,
+    paddingRight: 18,
+    fontWeight: 600,
+    fontSize: 'md',
+    lineHeight: 24,
+    letterSpacing: 1.25
+  },
+  lg: {
+    width: 178,
+    paddingTop: 14,
+    paddingBottom: 14,
+    paddingLeft: 22,
+    paddingRight: 22,
+    fontWeight: 600,
+    fontSize: 'lg',
+    lineHeight: 24,
+    letterSpacing: 1.25
+  },
+  xl: {
+    width: 220,
+    paddingTop: 16,
+    paddingBottom: 16,
+    paddingLeft: 26,
+    paddingRight: 26,
+    fontWeight: 600,
+    fontSize: 'xl',
+    lineHeight: 24,
+    letterSpacing: 1.25
+  }
+};
+var ButtonShapes = {
+  sharp: 0,
+  rounded: 4,
+  pillShaped: 24
+};
+var IconSizes = {
+  xs: {
+    width: 24,
+    height: 24,
+    padding: 12
+  },
+  sm: {
+    width: 24,
+    height: 24,
+    padding: 15
+  },
+  md: {
+    width: 36,
+    height: 36,
+    padding: 15
+  },
+  lg: {
+    width: 36,
+    height: 36,
+    padding: 18
+  },
+  xl: {
+    width: 36,
+    height: 36,
+    padding: 24
+  }
+};
+
+var _excluded = ["icon", "shadow", "children", "ariaLabel", "externalHref", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick"];
+var ButtonView = function ButtonView(_ref) {
+  var _props$onClick;
+  var icon = _ref.icon,
+    shadow = _ref.shadow,
+    children = _ref.children,
+    ariaLabel = _ref.ariaLabel,
+    externalHref = _ref.externalHref,
+    _ref$isAuto = _ref.isAuto,
+    isAuto = _ref$isAuto === void 0 ? false : _ref$isAuto,
+    _ref$isFilled = _ref.isFilled,
+    isFilled = _ref$isFilled === void 0 ? false : _ref$isFilled,
+    _ref$isIconRounded = _ref.isIconRounded,
+    isIconRounded = _ref$isIconRounded === void 0 ? false : _ref$isIconRounded,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'filled' : _ref$variant,
+    _ref$iconPosition = _ref.iconPosition,
+    iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
+    _ref$colorScheme = _ref.colorScheme,
+    colorScheme = _ref$colorScheme === void 0 ? 'theme.primary' : _ref$colorScheme,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? 'rounded' : _ref$shape,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var isActive = !(isDisabled || isLoading);
+  var defaultNativeProps = {
+    disabled: !isActive
+  };
+  var buttonColor = isActive ? colorScheme : 'theme.disabled';
+  var ButtonVariants = {
+    filled: {
+      backgroundColor: buttonColor,
+      color: 'color.white'
+    },
+    outline: {
+      backgroundColor: 'transparent',
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: colorScheme,
+      color: buttonColor
+    },
+    link: {
+      backgroundColor: 'transparent',
+      border: 'none',
+      color: buttonColor,
+      textDecorationLine: 'underline'
+    },
+    ghost: {
+      backgroundColor: 'transparent',
+      border: 'none',
+      color: buttonColor
+    }
+  };
+  var buttonSizeStyles = ButtonSizes[size];
+  var buttonVariant = ButtonVariants[variant];
+  var scaleWidth = {
+    width: isAuto ? 'fit-content' : isFilled ? '100%' : buttonSizeStyles.width
+  };
+  var changePadding = {
+    padding: isIconRounded ? IconSizes[size].padding : ButtonSizes[size].padding
+  };
+  var content = /*#__PURE__*/React.createElement(React.Fragment, null, icon && iconPosition === 'left' && !isLoading && icon, children, icon && iconPosition === 'right' && !isLoading && icon);
+  return /*#__PURE__*/React.createElement(Element, Object.assign({
+    gap: 8,
+    as: "button",
+    role: "button",
+    border: "none",
+    color: "color.white",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    ariaLabel: ariaLabel,
+    backgroundColor: buttonColor,
+    borderRadius: ButtonShapes[shape],
+    onClick: (_props$onClick = props.onClick) != null ? _props$onClick : onClick,
+    cursor: isActive ? 'pointer' : 'default'
+  }, defaultNativeProps, buttonSizeStyles, buttonVariant, scaleWidth, changePadding, shadow, props), variant === 'link' && externalHref ? /*#__PURE__*/React.createElement(Link$1, {
+    href: externalHref,
+    textDecorationColor: colorScheme,
+    colorScheme: colorScheme,
+    isExternal: true
+  }, content) : content);
+};
+
+var ButtonComponent = function ButtonComponent(props) {
+  var _useButtonState = useButtonState(),
+    isHovered = _useButtonState.isHovered,
+    setIsHovered = _useButtonState.setIsHovered;
+  var handleHover = function handleHover() {
+    return setIsHovered(!isHovered);
+  };
+  return /*#__PURE__*/React.createElement(ButtonView, Object.assign({
+    onMouseEnter: handleHover,
+    onMouseLeave: handleHover,
+    filter: isHovered ? 'brightness(0.85)' : 'brightness(1)'
+  }, props));
+};
+/**
+ * Buttons allow us to trigger an event or an action with a single click.
+ */
+var Button = ButtonComponent;
+
+var useCheckboxState = function useCheckboxState(_ref) {
+  var _ref$defaultIsSelecte = _ref.defaultIsSelected,
+    defaultIsSelected = _ref$defaultIsSelecte === void 0 ? false : _ref$defaultIsSelecte;
+  var _React$useState = React.useState(false),
+    isHovered = _React$useState[0],
+    setIsHovered = _React$useState[1];
+  var _React$useState2 = React.useState(defaultIsSelected),
+    isSelected = _React$useState2[0],
+    setIsSelected = _React$useState2[1];
+  return {
+    isHovered: isHovered,
+    setIsHovered: setIsHovered,
+    isSelected: isSelected,
+    setIsSelected: setIsSelected
+  };
+};
+
+var Sizes = {
+  xs: {
+    height: 8,
+    width: 8
+  },
+  sm: {
+    height: 12,
+    width: 12
+  },
+  md: {
+    height: 18,
+    width: 18
+  },
+  lg: {
+    height: 24,
+    width: 24
+  },
+  xl: {
+    height: 30,
+    width: 30
+  },
+  '2xl': {
+    height: 36,
+    width: 36
+  },
+  '3xl': {
+    height: 42,
+    width: 42
+  },
+  '4xl': {
+    height: 48,
+    width: 48
+  },
+  '5xl': {
+    height: 54,
+    width: 54
+  },
+  '6xl': {
+    height: 60,
+    width: 60
+  }
+};
+var IconSizes$1 = {
+  xs: 6,
+  sm: 12,
+  md: 18,
+  lg: 24,
+  xl: 30,
+  '2xl': 36,
+  '3xl': 42,
+  '4xl': 48,
+  '5xl': 54,
+  '6xl': 60
+};
+
+var _excluded$1 = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "size", "colorScheme", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "styles"];
+var CheckboxView = function CheckboxView(_ref) {
+  var id = _ref.id,
+    icon = _ref.icon,
+    label = _ref.label,
+    isChecked = _ref.isChecked,
+    onChange = _ref.onChange,
+    onValueChange = _ref.onValueChange,
+    _ref$shadow = _ref.shadow,
+    shadow = _ref$shadow === void 0 ? {} : _ref$shadow,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$colorScheme = _ref.colorScheme,
+    colorScheme = _ref$colorScheme === void 0 ? 'theme.primary' : _ref$colorScheme,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    _ref$isSelected = _ref.isSelected,
+    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    _ref$isHovered = _ref.isHovered,
+    isHovered = _ref$isHovered === void 0 ? false : _ref$isHovered,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isReadOnly = _ref.isReadOnly,
+    isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
+    _ref$isIndeterminate = _ref.isIndeterminate,
+    isIndeterminate = _ref$isIndeterminate === void 0 ? false : _ref$isIndeterminate,
+    _ref$setIsSelected = _ref.setIsSelected,
+    setIsSelected = _ref$setIsSelected === void 0 ? function () {} : _ref$setIsSelected,
+    _ref$setIsHovered = _ref.setIsHovered,
+    setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
+    _ref$styles = _ref.styles,
+    styles = _ref$styles === void 0 ? {
+      checkbox: {},
+      label: {}
+    } : _ref$styles,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  var handleHover = function handleHover() {
+    return setIsHovered(!isHovered);
+  };
+  var handleChange = function handleChange() {
+    if (!isReadOnly && !isDisabled) {
+      if (isChecked === undefined) {
+        setIsSelected(!isSelected);
+      } else {
+        if (onChange) onChange(!isChecked);
+        if (onValueChange) onValueChange(!isChecked);
+      }
+    }
+  };
+  var checkboxStyle = {
+    container: Object.assign({
+      gap: 10,
+      display: 'flex',
+      alignItems: 'center',
+      height: 'fit-content',
+      width: 'fit-content',
+      color: error ? 'theme.error' : isDisabled ? 'theme.disabled' : 'color.blueGray.700',
+      cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'default' : 'pointer'
+    }, styles['label']),
+    checkbox: Object.assign({}, isDisabled ? {
+      backgroundColor: 'theme.disabled'
+    } : (isChecked || isSelected) && !isIndeterminate || isIndeterminate ? {
+      backgroundColor: colorScheme
+    } : {
+      borderWidth: 2,
+      borderColor: error ? 'theme.error' : isHovered ? 'color.gray.500' : 'color.gray.300',
+      borderStyle: 'solid'
+    }, {
+      borderRadius: 3,
+      filter: isHovered ? 'brightness(0.9)' : undefined
+    }, Sizes[size], shadow, styles['checkbox'])
+  };
+  return /*#__PURE__*/React.createElement(Label, Object.assign({
+    htmlFor: id,
+    as: "div",
+    onClick: handleChange,
+    onMouseEnter: handleHover,
+    onMouseLeave: handleHover,
+    size: Typography.fontSizes[size]
+  }, checkboxStyle.container, props), /*#__PURE__*/React.createElement(Center$1, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? /*#__PURE__*/React.createElement(IndeterminateSvg, null) : (isChecked || isSelected) && (icon != null ? icon : /*#__PURE__*/React.createElement(CheckSvg, {
+    size: IconSizes$1[size]
+  }))), label);
+};
+
+var CheckboxComponent = function CheckboxComponent(props) {
+  var checkboxStates = useCheckboxState(props);
+  return /*#__PURE__*/React.createElement(CheckboxView, Object.assign({}, checkboxStates, props));
+};
+/**
+ * Checkbox allows users to select one or more options from a list of choices.
+ */
+var Checkbox = CheckboxComponent;
+
+var countryList = [
+	{
+		name: "Afghanistan",
+		dial_code: "+93",
+		emoji: "🇦🇫",
+		code: "AF"
+	},
+	{
+		name: "Aland Islands",
+		dial_code: "+358",
+		emoji: "🇦🇽",
+		code: "AX"
+	},
+	{
+		name: "Albania",
+		dial_code: "+355",
+		emoji: "🇦🇱",
+		code: "AL"
+	},
+	{
+		name: "Algeria",
+		dial_code: "+213",
+		emoji: "🇩🇿",
+		code: "DZ"
+	},
+	{
+		name: "AmericanSamoa",
+		dial_code: "+1684",
+		emoji: "🇦🇸",
+		code: "AS"
+	},
+	{
+		name: "Andorra",
+		dial_code: "+376",
+		emoji: "🇦🇩",
+		code: "AD"
+	},
+	{
+		name: "Angola",
+		dial_code: "+244",
+		emoji: "🇦🇴",
+		code: "AO"
+	},
+	{
+		name: "Anguilla",
+		dial_code: "+1264",
+		emoji: "🇦🇮",
+		code: "AI"
+	},
+	{
+		name: "Antarctica",
+		dial_code: "+672",
+		emoji: "🇦🇶",
+		code: "AQ"
+	},
+	{
+		name: "Antigua and Barbuda",
+		dial_code: "+1268",
+		emoji: "🇦🇬",
+		code: "AG"
+	},
+	{
+		name: "Argentina",
+		dial_code: "+54",
+		emoji: "🇦🇷",
+		code: "AR"
+	},
+	{
+		name: "Armenia",
+		dial_code: "+374",
+		emoji: "🇦🇲",
+		code: "AM"
+	},
+	{
+		name: "Aruba",
+		dial_code: "+297",
+		emoji: "🇦🇼",
+		code: "AW"
+	},
+	{
+		name: "Australia",
+		dial_code: "+61",
+		emoji: "🇦🇺",
+		code: "AU"
+	},
+	{
+		name: "Austria",
+		dial_code: "+43",
+		emoji: "🇦🇹",
+		code: "AT"
+	},
+	{
+		name: "Azerbaijan",
+		dial_code: "+994",
+		emoji: "🇦🇿",
+		code: "AZ"
+	},
+	{
+		name: "Bahamas",
+		dial_code: "+1242",
+		emoji: "🇧🇸",
+		code: "BS"
+	},
+	{
+		name: "Bahrain",
+		dial_code: "+973",
+		emoji: "🇧🇭",
+		code: "BH"
+	},
+	{
+		name: "Bangladesh",
+		dial_code: "+880",
+		emoji: "🇧🇩",
+		code: "BD"
+	},
+	{
+		name: "Barbados",
+		dial_code: "+1246",
+		emoji: "🇧🇧",
+		code: "BB"
+	},
+	{
+		name: "Belarus",
+		dial_code: "+375",
+		emoji: "🇧🇾",
+		code: "BY"
+	},
+	{
+		name: "Belgium",
+		dial_code: "+32",
+		emoji: "🇧🇪",
+		code: "BE"
+	},
+	{
+		name: "Belize",
+		dial_code: "+501",
+		emoji: "🇧🇿",
+		code: "BZ"
+	},
+	{
+		name: "Benin",
+		dial_code: "+229",
+		emoji: "🇧🇯",
+		code: "BJ"
+	},
+	{
+		name: "Bermuda",
+		dial_code: "+1441",
+		emoji: "🇧🇲",
+		code: "BM"
+	},
+	{
+		name: "Bhutan",
+		dial_code: "+975",
+		emoji: "🇧🇹",
+		code: "BT"
+	},
+	{
+		name: "Bolivia, Plurinational State of",
+		dial_code: "+591",
+		emoji: "🇧🇴",
+		code: "BO"
+	},
+	{
+		name: "Bosnia and Herzegovina",
+		dial_code: "+387",
+		emoji: "🇧🇦",
+		code: "BA"
+	},
+	{
+		name: "Botswana",
+		dial_code: "+267",
+		emoji: "🇧🇼",
+		code: "BW"
+	},
+	{
+		name: "Brazil",
+		dial_code: "+55",
+		emoji: "🇧🇷",
+		code: "BR"
+	},
+	{
+		name: "British Indian Ocean Territory",
+		dial_code: "+246",
+		emoji: "🇮🇴",
+		code: "IO"
+	},
+	{
+		name: "Brunei Darussalam",
+		dial_code: "+673",
+		emoji: "🇧🇳",
+		code: "BN"
+	},
+	{
+		name: "Bulgaria",
+		dial_code: "+359",
+		emoji: "🇧🇬",
+		code: "BG"
+	},
+	{
+		name: "Burkina Faso",
+		dial_code: "+226",
+		emoji: "🇧🇫",
+		code: "BF"
+	},
+	{
+		name: "Burundi",
+		dial_code: "+257",
+		emoji: "🇧🇮",
+		code: "BI"
+	},
+	{
+		name: "Cambodia",
+		dial_code: "+855",
+		emoji: "🇰🇭",
+		code: "KH"
+	},
+	{
+		name: "Cameroon",
+		dial_code: "+237",
+		emoji: "🇨🇲",
+		code: "CM"
+	},
+	{
+		name: "Canada",
+		dial_code: "+1",
+		emoji: "🇨🇦",
+		code: "CA"
+	},
+	{
+		name: "Cape Verde",
+		dial_code: "+238",
+		emoji: "🇨🇻",
+		code: "CV"
+	},
+	{
+		name: "Cayman Islands",
+		dial_code: "+345",
+		emoji: "🇰🇾",
+		code: "KY"
+	},
+	{
+		name: "Central African Republic",
+		dial_code: "+236",
+		emoji: "🇨🇫",
+		code: "CF"
+	},
+	{
+		name: "Chad",
+		dial_code: "+235",
+		emoji: "🇹🇩",
+		code: "TD"
+	},
+	{
+		name: "Chile",
+		dial_code: "+56",
+		emoji: "🇨🇱",
+		code: "CL"
+	},
+	{
+		name: "China",
+		dial_code: "+86",
+		emoji: "🇨🇳",
+		code: "CN"
+	},
+	{
+		name: "Christmas Island",
+		dial_code: "+61",
+		emoji: "🇨🇽",
+		code: "CX"
+	},
+	{
+		name: "Cocos (Keeling) Islands",
+		dial_code: "+61",
+		emoji: "🇨🇨",
+		code: "CC"
+	},
+	{
+		name: "Colombia",
+		dial_code: "+57",
+		emoji: "🇨🇴",
+		code: "CO"
+	},
+	{
+		name: "Comoros",
+		dial_code: "+269",
+		emoji: "🇰🇲",
+		code: "KM"
+	},
+	{
+		name: "Congo",
+		dial_code: "+242",
+		emoji: "🇨🇬",
+		code: "CG"
+	},
+	{
+		name: "Congo, The Democratic Republic of the Congo",
+		dial_code: "+243",
+		emoji: "🇨🇩",
+		code: "CD"
+	},
+	{
+		name: "Cook Islands",
+		dial_code: "+682",
+		emoji: "🇨🇰",
+		code: "CK"
+	},
+	{
+		name: "Costa Rica",
+		dial_code: "+506",
+		emoji: "🇨🇷",
+		code: "CR"
+	},
+	{
+		name: "Cote d'Ivoire",
+		dial_code: "+225",
+		emoji: "🇨🇮",
+		code: "CI"
+	},
+	{
+		name: "Croatia",
+		dial_code: "+385",
+		emoji: "🇭🇷",
+		code: "HR"
+	},
+	{
+		name: "Cuba",
+		dial_code: "+53",
+		emoji: "🇨🇺",
+		code: "CU"
+	},
+	{
+		name: "Cyprus",
+		dial_code: "+357",
+		emoji: "🇨🇾",
+		code: "CY"
+	},
+	{
+		name: "Czech Republic",
+		dial_code: "+420",
+		emoji: "🇨🇿",
+		code: "CZ"
+	},
+	{
+		name: "Denmark",
+		dial_code: "+45",
+		emoji: "🇩🇰",
+		code: "DK"
+	},
+	{
+		name: "Djibouti",
+		dial_code: "+253",
+		emoji: "🇩🇯",
+		code: "DJ"
+	},
+	{
+		name: "Dominica",
+		dial_code: "+1767",
+		emoji: "🇩🇲",
+		code: "DM"
+	},
+	{
+		name: "Dominican Republic",
+		dial_code: "+1849",
+		emoji: "🇩🇴",
+		code: "DO"
+	},
+	{
+		name: "Ecuador",
+		dial_code: "+593",
+		emoji: "🇪🇨",
+		code: "EC"
+	},
+	{
+		name: "Egypt",
+		dial_code: "+20",
+		emoji: "🇪🇬",
+		code: "EG"
+	},
+	{
+		name: "El Salvador",
+		dial_code: "+503",
+		emoji: "🇸🇻",
+		code: "SV"
+	},
+	{
+		name: "Equatorial Guinea",
+		dial_code: "+240",
+		emoji: "🇬🇶",
+		code: "GQ"
+	},
+	{
+		name: "Eritrea",
+		dial_code: "+291",
+		emoji: "🇪🇷",
+		code: "ER"
+	},
+	{
+		name: "Estonia",
+		dial_code: "+372",
+		emoji: "🇪🇪",
+		code: "EE"
+	},
+	{
+		name: "Ethiopia",
+		dial_code: "+251",
+		emoji: "🇪🇹",
+		code: "ET"
+	},
+	{
+		name: "Falkland Islands (Malvinas)",
+		dial_code: "+500",
+		emoji: "🇫🇰",
+		code: "FK"
+	},
+	{
+		name: "Faroe Islands",
+		dial_code: "+298",
+		emoji: "🇫🇴",
+		code: "FO"
+	},
+	{
+		name: "Fiji",
+		dial_code: "+679",
+		emoji: "🇫🇯",
+		code: "FJ"
+	},
+	{
+		name: "Finland",
+		dial_code: "+358",
+		emoji: "🇫🇮",
+		code: "FI"
+	},
+	{
+		name: "France",
+		dial_code: "+33",
+		emoji: "🇫🇷",
+		code: "FR"
+	},
+	{
+		name: "French Guiana",
+		dial_code: "+594",
+		emoji: "🇬🇫",
+		code: "GF"
+	},
+	{
+		name: "French Polynesia",
+		dial_code: "+689",
+		emoji: "🇵🇫",
+		code: "PF"
+	},
+	{
+		name: "Gabon",
+		dial_code: "+241",
+		emoji: "🇬🇦",
+		code: "GA"
+	},
+	{
+		name: "Gambia",
+		dial_code: "+220",
+		emoji: "🇬🇲",
+		code: "GM"
+	},
+	{
+		name: "Georgia",
+		dial_code: "+995",
+		emoji: "🇬🇪",
+		code: "GE"
+	},
+	{
+		name: "Germany",
+		dial_code: "+49",
+		emoji: "🇩🇪",
+		code: "DE"
+	},
+	{
+		name: "Ghana",
+		dial_code: "+233",
+		emoji: "🇬🇭",
+		code: "GH"
+	},
+	{
+		name: "Gibraltar",
+		dial_code: "+350",
+		emoji: "🇬🇮",
+		code: "GI"
+	},
+	{
+		name: "Greece",
+		dial_code: "+30",
+		emoji: "🇬🇷",
+		code: "GR"
+	},
+	{
+		name: "Greenland",
+		dial_code: "+299",
+		emoji: "🇬🇱",
+		code: "GL"
+	},
+	{
+		name: "Grenada",
+		dial_code: "+1473",
+		emoji: "🇬🇩",
+		code: "GD"
+	},
+	{
+		name: "Guadeloupe",
+		dial_code: "+590",
+		emoji: "🇬🇵",
+		code: "GP"
+	},
+	{
+		name: "Guam",
+		dial_code: "+1671",
+		emoji: "🇬🇺",
+		code: "GU"
+	},
+	{
+		name: "Guatemala",
+		dial_code: "+502",
+		emoji: "🇬🇹",
+		code: "GT"
+	},
+	{
+		name: "Guernsey",
+		dial_code: "+44",
+		emoji: "🇬🇬",
+		code: "GG"
+	},
+	{
+		name: "Guinea",
+		dial_code: "+224",
+		emoji: "🇬🇳",
+		code: "GN"
+	},
+	{
+		name: "Guinea-Bissau",
+		dial_code: "+245",
+		emoji: "🇬🇼",
+		code: "GW"
+	},
+	{
+		name: "Guyana",
+		dial_code: "+595",
+		emoji: "🇬🇾",
+		code: "GY"
+	},
+	{
+		name: "Haiti",
+		dial_code: "+509",
+		emoji: "🇭🇹",
+		code: "HT"
+	},
+	{
+		name: "Holy See (Vatican City State)",
+		dial_code: "+379",
+		emoji: "🇻🇦",
+		code: "VA"
+	},
+	{
+		name: "Honduras",
+		dial_code: "+504",
+		emoji: "🇭🇳",
+		code: "HN"
+	},
+	{
+		name: "Hong Kong",
+		dial_code: "+852",
+		emoji: "🇭🇰",
+		code: "HK"
+	},
+	{
+		name: "Hungary",
+		dial_code: "+36",
+		emoji: "🇭🇺",
+		code: "HU"
+	},
+	{
+		name: "Iceland",
+		dial_code: "+354",
+		emoji: "🇮🇸",
+		code: "IS"
+	},
+	{
+		name: "India",
+		dial_code: "+91",
+		emoji: "🇮🇳",
+		code: "IN"
+	},
+	{
+		name: "Indonesia",
+		dial_code: "+62",
+		emoji: "🇮🇩",
+		code: "ID"
+	},
+	{
+		name: "Iran, Islamic Republic of Persian Gulf",
+		dial_code: "+98",
+		emoji: "🇮🇷",
+		code: "IR"
+	},
+	{
+		name: "Iraq",
+		dial_code: "+964",
+		emoji: "🇮🇷",
+		code: "IQ"
+	},
+	{
+		name: "Ireland",
+		dial_code: "+353",
+		emoji: "🇮🇪",
+		code: "IE"
+	},
+	{
+		name: "Isle of Man",
+		dial_code: "+44",
+		emoji: "🇮🇲",
+		code: "IM"
+	},
+	{
+		name: "Israel",
+		dial_code: "+972",
+		emoji: "🇮🇱",
+		code: "IL"
+	},
+	{
+		name: "Italy",
+		dial_code: "+39",
+		emoji: "🇮🇹",
+		code: "IT"
+	},
+	{
+		name: "Jamaica",
+		dial_code: "+1876",
+		emoji: "🇯🇲",
+		code: "JM"
+	},
+	{
+		name: "Japan",
+		dial_code: "+81",
+		emoji: "🇯🇵",
+		code: "JP"
+	},
+	{
+		name: "Jersey",
+		dial_code: "+44",
+		emoji: "🇯🇪",
+		code: "JE"
+	},
+	{
+		name: "Jordan",
+		dial_code: "+962",
+		emoji: "🇯🇴",
+		code: "JO"
+	},
+	{
+		name: "Kazakhstan",
+		dial_code: "+77",
+		emoji: "🇰🇿",
+		code: "KZ"
+	},
+	{
+		name: "Kenya",
+		dial_code: "+254",
+		emoji: "🇰🇪",
+		code: "KE"
+	},
+	{
+		name: "Kiribati",
+		dial_code: "+686",
+		emoji: "🇰🇮",
+		code: "KI"
+	},
+	{
+		name: "Korea, Democratic People's Republic of Korea",
+		dial_code: "+850",
+		emoji: "🇰🇵",
+		code: "KP"
+	},
+	{
+		name: "Korea, Republic of South Korea",
+		dial_code: "+82",
+		emoji: "🇰🇷",
+		code: "KR"
+	},
+	{
+		name: "Kuwait",
+		dial_code: "+965",
+		emoji: "🇰🇼",
+		code: "KW"
+	},
+	{
+		name: "Kyrgyzstan",
+		dial_code: "+996",
+		emoji: "🇰🇬",
+		code: "KG"
+	},
+	{
+		name: "Laos",
+		dial_code: "+856",
+		emoji: "🇱🇦",
+		code: "LA"
+	},
+	{
+		name: "Latvia",
+		dial_code: "+371",
+		emoji: "🇱🇻",
+		code: "LV"
+	},
+	{
+		name: "Lebanon",
+		dial_code: "+961",
+		emoji: "🇱🇧",
+		code: "LB"
+	},
+	{
+		name: "Lesotho",
+		dial_code: "+266",
+		emoji: "🇱🇸",
+		code: "LS"
+	},
+	{
+		name: "Liberia",
+		dial_code: "+231",
+		emoji: "🇱🇷",
+		code: "LR"
+	},
+	{
+		name: "Libyan Arab Jamahiriya",
+		dial_code: "+218",
+		emoji: "🇱🇾",
+		code: "LY"
+	},
+	{
+		name: "Liechtenstein",
+		dial_code: "+423",
+		emoji: "🇱🇮",
+		code: "LI"
+	},
+	{
+		name: "Lithuania",
+		dial_code: "+370",
+		emoji: "🇱🇹",
+		code: "LT"
+	},
+	{
+		name: "Luxembourg",
+		dial_code: "+352",
+		emoji: "🇱🇺",
+		code: "LU"
+	},
+	{
+		name: "Macao",
+		dial_code: "+853",
+		emoji: "🇲🇴",
+		code: "MO"
+	},
+	{
+		name: "Macedonia",
+		dial_code: "+389",
+		emoji: "🇲🇰",
+		code: "MK"
+	},
+	{
+		name: "Madagascar",
+		dial_code: "+261",
+		emoji: "🇲🇬",
+		code: "MG"
+	},
+	{
+		name: "Malawi",
+		dial_code: "+265",
+		emoji: "🇲🇼",
+		code: "MW"
+	},
+	{
+		name: "Malaysia",
+		dial_code: "+60",
+		emoji: "🇲🇾",
+		code: "MY"
+	},
+	{
+		name: "Maldives",
+		dial_code: "+960",
+		emoji: "🇲🇻",
+		code: "MV"
+	},
+	{
+		name: "Mali",
+		dial_code: "+223",
+		emoji: "🇲🇱",
+		code: "ML"
+	},
+	{
+		name: "Malta",
+		dial_code: "+356",
+		emoji: "🇲🇹",
+		code: "MT"
+	},
+	{
+		name: "Marshall Islands",
+		dial_code: "+692",
+		emoji: "🇲🇭",
+		code: "MH"
+	},
+	{
+		name: "Martinique",
+		dial_code: "+596",
+		emoji: "🇲🇶",
+		code: "MQ"
+	},
+	{
+		name: "Mauritania",
+		dial_code: "+222",
+		emoji: "🇲🇷",
+		code: "MR"
+	},
+	{
+		name: "Mauritius",
+		dial_code: "+230",
+		emoji: "🇲🇺",
+		code: "MU"
+	},
+	{
+		name: "Mayotte",
+		dial_code: "+262",
+		emoji: "🇾🇹",
+		code: "YT"
+	},
+	{
+		name: "Mexico",
+		dial_code: "+52",
+		emoji: "🇲🇽",
+		code: "MX"
+	},
+	{
+		name: "Micronesia, Federated States of Micronesia",
+		dial_code: "+691",
+		emoji: "🇫🇲",
+		code: "FM"
+	},
+	{
+		name: "Moldova",
+		dial_code: "+373",
+		emoji: "🇲🇩",
+		code: "MD"
+	},
+	{
+		name: "Monaco",
+		dial_code: "+377",
+		emoji: "🇲🇨",
+		code: "MC"
+	},
+	{
+		name: "Mongolia",
+		dial_code: "+976",
+		emoji: "🇲🇳",
+		code: "MN"
+	},
+	{
+		name: "Montenegro",
+		dial_code: "+382",
+		emoji: "🇲🇪",
+		code: "ME"
+	},
+	{
+		name: "Montserrat",
+		dial_code: "+1664",
+		emoji: "🇲🇸",
+		code: "MS"
+	},
+	{
+		name: "Morocco",
+		dial_code: "+212",
+		emoji: "🇲🇦",
+		code: "MA"
+	},
+	{
+		name: "Mozambique",
+		dial_code: "+258",
+		emoji: "🇲🇿",
+		code: "MZ"
+	},
+	{
+		name: "Myanmar",
+		dial_code: "+95",
+		emoji: "🇲🇲",
+		code: "MM"
+	},
+	{
+		name: "Namibia",
+		emoji: "🇳🇦",
+		dial_code: "+264",
+		code: "NA"
+	},
+	{
+		name: "Nauru",
+		dial_code: "+674",
+		emoji: "🇳🇷",
+		code: "NR"
+	},
+	{
+		name: "Nepal",
+		dial_code: "+977",
+		emoji: "🇳🇵",
+		code: "NP"
+	},
+	{
+		name: "Netherlands",
+		dial_code: "+31",
+		emoji: "🇳🇱",
+		code: "NL"
+	},
+	{
+		name: "Netherlands Antilles",
+		dial_code: "+599",
+		emoji: "🇧🇶",
+		code: "AN"
+	},
+	{
+		name: "New Caledonia",
+		dial_code: "+687",
+		emoji: "🇳🇨",
+		code: "NC"
+	},
+	{
+		name: "New Zealand",
+		dial_code: "+64",
+		emoji: "🇳🇿",
+		code: "NZ"
+	},
+	{
+		name: "Nicaragua",
+		dial_code: "+505",
+		emoji: "🇳🇮",
+		code: "NI"
+	},
+	{
+		name: "Niger",
+		dial_code: "+227",
+		emoji: "🇳🇪",
+		code: "NE"
+	},
+	{
+		name: "Nigeria",
+		dial_code: "+234",
+		emoji: "🇳🇬",
+		code: "NG"
+	},
+	{
+		name: "Niue",
+		dial_code: "+683",
+		emoji: "🇳🇺",
+		code: "NU"
+	},
+	{
+		name: "Norfolk Island",
+		dial_code: "+672",
+		emoji: "🇳🇫",
+		code: "NF"
+	},
+	{
+		name: "Northern Mariana Islands",
+		dial_code: "+1670",
+		emoji: "🇲🇵",
+		code: "MP"
+	},
+	{
+		name: "Norway",
+		dial_code: "+47",
+		emoji: "🇳🇴",
+		code: "NO"
+	},
+	{
+		name: "Oman",
+		dial_code: "+968",
+		emoji: "🇴🇲",
+		code: "OM"
+	},
+	{
+		name: "Pakistan",
+		dial_code: "+92",
+		emoji: "🇵🇰",
+		code: "PK"
+	},
+	{
+		name: "Palau",
+		dial_code: "+680",
+		emoji: "🇵🇼",
+		code: "PW"
+	},
+	{
+		name: "Palestinian Territory, Occupied",
+		dial_code: "+970",
+		emoji: "🇵🇸",
+		code: "PS"
+	},
+	{
+		name: "Panama",
+		dial_code: "+507",
+		emoji: "🇵🇦",
+		code: "PA"
+	},
+	{
+		name: "Papua New Guinea",
+		dial_code: "+675",
+		emoji: "🇵🇬",
+		code: "PG"
+	},
+	{
+		name: "Paraguay",
+		dial_code: "+595",
+		emoji: "🇵🇾",
+		code: "PY"
+	},
+	{
+		name: "Peru",
+		dial_code: "+51",
+		emoji: "🇵🇪",
+		code: "PE"
+	},
+	{
+		name: "Philippines",
+		dial_code: "+63",
+		emoji: "🇵🇭",
+		code: "PH"
+	},
+	{
+		name: "Pitcairn",
+		dial_code: "+872",
+		emoji: "🇵🇳",
+		code: "PN"
+	},
+	{
+		name: "Poland",
+		dial_code: "+48",
+		emoji: "🇵🇱",
+		code: "PL"
+	},
+	{
+		name: "Portugal",
+		dial_code: "+351",
+		emoji: "🇵🇹",
+		code: "PT"
+	},
+	{
+		name: "Puerto Rico",
+		dial_code: "+1939",
+		emoji: "🇵🇷",
+		code: "PR"
+	},
+	{
+		name: "Qatar",
+		dial_code: "+974",
+		emoji: "🇶🇦",
+		code: "QA"
+	},
+	{
+		name: "Romania",
+		dial_code: "+40",
+		emoji: "🇷🇴",
+		code: "RO"
+	},
+	{
+		name: "Russia",
+		dial_code: "+7",
+		emoji: "🇷🇺",
+		code: "RU"
+	},
+	{
+		name: "Rwanda",
+		dial_code: "+250",
+		emoji: "🇷🇼",
+		code: "RW"
+	},
+	{
+		name: "Reunion",
+		dial_code: "+262",
+		emoji: "🇷🇪",
+		code: "RE"
+	},
+	{
+		name: "Saint Barthelemy",
+		dial_code: "+590",
+		emoji: "🇧🇱",
+		code: "BL"
+	},
+	{
+		name: "Saint Helena, Ascension and Tristan Da Cunha",
+		dial_code: "+290",
+		emoji: "🇸🇭",
+		code: "SH"
+	},
+	{
+		name: "Saint Kitts and Nevis",
+		dial_code: "+1869",
+		emoji: "🇰🇳",
+		code: "KN"
+	},
+	{
+		name: "Saint Lucia",
+		dial_code: "+1758",
+		emoji: "🇱🇨",
+		code: "LC"
+	},
+	{
+		name: "Saint Martin",
+		dial_code: "+590",
+		emoji: "🇲🇫",
+		code: "MF"
+	},
+	{
+		name: "Saint Pierre and Miquelon",
+		dial_code: "+508",
+		emoji: "🇵🇲",
+		code: "PM"
+	},
+	{
+		name: "Saint Vincent and the Grenadines",
+		dial_code: "+1784",
+		emoji: "🇻🇨",
+		code: "VC"
+	},
+	{
+		name: "Samoa",
+		dial_code: "+685",
+		emoji: "🇼🇸",
+		code: "WS"
+	},
+	{
+		name: "San Marino",
+		dial_code: "+378",
+		emoji: "🇸🇲",
+		code: "SM"
+	},
+	{
+		name: "Sao Tome and Principe",
+		dial_code: "+239",
+		emoji: "🇸🇹",
+		code: "ST"
+	},
+	{
+		name: "Saudi Arabia",
+		dial_code: "+966",
+		emoji: "🇸🇦",
+		code: "SA"
+	},
+	{
+		name: "Senegal",
+		dial_code: "+221",
+		emoji: "🇸🇳",
+		code: "SN"
+	},
+	{
+		name: "Serbia",
+		dial_code: "+381",
+		emoji: "🇷🇸",
+		code: "RS"
+	},
+	{
+		name: "Seychelles",
+		dial_code: "+248",
+		emoji: "🇸🇨",
+		code: "SC"
+	},
+	{
+		name: "Sierra Leone",
+		dial_code: "+232",
+		emoji: "🇸🇱",
+		code: "SL"
+	},
+	{
+		name: "Singapore",
+		dial_code: "+65",
+		emoji: "🇸🇬",
+		code: "SG"
+	},
+	{
+		name: "Slovakia",
+		dial_code: "+421",
+		emoji: "🇸🇰",
+		code: "SK"
+	},
+	{
+		name: "Slovenia",
+		dial_code: "+386",
+		emoji: "🇸🇮",
+		code: "SI"
+	},
+	{
+		name: "Solomon Islands",
+		dial_code: "+677",
+		emoji: "🇸🇧",
+		code: "SB"
+	},
+	{
+		name: "Somalia",
+		dial_code: "+252",
+		emoji: "🇸🇴",
+		code: "SO"
+	},
+	{
+		name: "South Africa",
+		dial_code: "+27",
+		emoji: "🇿🇦",
+		code: "ZA"
+	},
+	{
+		name: "South Sudan",
+		dial_code: "+211",
+		emoji: "🇸🇸",
+		code: "SS"
+	},
+	{
+		name: "South Georgia and the South Sandwich Islands",
+		dial_code: "+500",
+		emoji: "🇬🇸",
+		code: "GS"
+	},
+	{
+		name: "Spain",
+		dial_code: "+34",
+		emoji: "🇪🇸",
+		code: "ES"
+	},
+	{
+		name: "Sri Lanka",
+		dial_code: "+94",
+		emoji: "🇱🇰",
+		code: "LK"
+	},
+	{
+		name: "Sudan",
+		dial_code: "+249",
+		emoji: "🇸🇩",
+		code: "SD"
+	},
+	{
+		name: "Suriname",
+		dial_code: "+597",
+		emoji: "🇸🇷",
+		code: "SR"
+	},
+	{
+		name: "Svalbard and Jan Mayen",
+		dial_code: "+47",
+		emoji: "🇸🇯",
+		code: "SJ"
+	},
+	{
+		name: "Swaziland",
+		dial_code: "+268",
+		emoji: "🇸🇿",
+		code: "SZ"
+	},
+	{
+		name: "Sweden",
+		dial_code: "+46",
+		emoji: "🇸🇪",
+		code: "SE"
+	},
+	{
+		name: "Switzerland",
+		dial_code: "+41",
+		emoji: "🇨🇭",
+		code: "CH"
+	},
+	{
+		name: "Syrian Arab Republic",
+		dial_code: "+963",
+		emoji: "🇸🇾",
+		code: "SY"
+	},
+	{
+		name: "Taiwan",
+		dial_code: "+886",
+		emoji: "🇹🇼",
+		code: "TW"
+	},
+	{
+		name: "Tajikistan",
+		dial_code: "+992",
+		emoji: "🇹🇯",
+		code: "TJ"
+	},
+	{
+		name: "Tanzania, United Republic of Tanzania",
+		dial_code: "+255",
+		emoji: "🇹🇿",
+		code: "TZ"
+	},
+	{
+		name: "Thailand",
+		dial_code: "+66",
+		emoji: "🇹🇭",
+		code: "TH"
+	},
+	{
+		name: "Timor-Leste",
+		dial_code: "+670",
+		emoji: "🇹🇱",
+		code: "TL"
+	},
+	{
+		name: "Togo",
+		dial_code: "+228",
+		emoji: "🇹🇬",
+		code: "TG"
+	},
+	{
+		name: "Tokelau",
+		dial_code: "+690",
+		emoji: "🇹🇰",
+		code: "TK"
+	},
+	{
+		name: "Tonga",
+		dial_code: "+676",
+		emoji: "🇹🇴",
+		code: "TO"
+	},
+	{
+		name: "Trinidad and Tobago",
+		dial_code: "+1868",
+		emoji: "🇹🇹",
+		code: "TT"
+	},
+	{
+		name: "Tunisia",
+		dial_code: "+216",
+		emoji: "🇹🇳",
+		code: "TN"
+	},
+	{
+		name: "Turkey",
+		dial_code: "+90",
+		emoji: "🇹🇷",
+		code: "TR"
+	},
+	{
+		name: "Turkmenistan",
+		dial_code: "+993",
+		emoji: "🇹🇲",
+		code: "TM"
+	},
+	{
+		name: "Turks and Caicos Islands",
+		dial_code: "+1649",
+		emoji: "🇹🇨",
+		code: "TC"
+	},
+	{
+		name: "Tuvalu",
+		dial_code: "+688",
+		emoji: "🇹🇻",
+		code: "TV"
+	},
+	{
+		name: "Uganda",
+		dial_code: "+256",
+		emoji: "🇺🇬",
+		code: "UG"
+	},
+	{
+		name: "Ukraine",
+		dial_code: "+380",
+		emoji: "🇺🇦",
+		code: "UA"
+	},
+	{
+		name: "United Arab Emirates",
+		dial_code: "+971",
+		emoji: "🇦🇪",
+		code: "AE"
+	},
+	{
+		name: "United Kingdom",
+		dial_code: "+44",
+		emoji: "🇬🇧",
+		code: "GB"
+	},
+	{
+		name: "United States",
+		dial_code: "+1",
+		emoji: "🇺🇸",
+		code: "US"
+	},
+	{
+		name: "Uruguay",
+		dial_code: "+598",
+		emoji: "🇺🇾",
+		code: "UY"
+	},
+	{
+		name: "Uzbekistan",
+		dial_code: "+998",
+		emoji: "🇺🇿",
+		code: "UZ"
+	},
+	{
+		name: "Vanuatu",
+		dial_code: "+678",
+		emoji: "🇻🇺",
+		code: "VU"
+	},
+	{
+		name: "Venezuela, Bolivarian Republic of Venezuela",
+		dial_code: "+58",
+		emoji: "🇻🇪",
+		code: "VE"
+	},
+	{
+		name: "Vietnam",
+		dial_code: "+84",
+		emoji: "🇻🇳",
+		code: "VN"
+	},
+	{
+		name: "Virgin Islands, British",
+		dial_code: "+1284",
+		emoji: "🇻🇬",
+		code: "VG"
+	},
+	{
+		name: "Virgin Islands, U.S.",
+		dial_code: "+1340",
+		emoji: "🇻🇮",
+		code: "VI"
+	},
+	{
+		name: "Wallis and Futuna",
+		dial_code: "+681",
+		emoji: "🇼🇫",
+		code: "WF"
+	},
+	{
+		name: "Yemen",
+		dial_code: "+967",
+		emoji: "🇾🇪",
+		code: "YE"
+	},
+	{
+		name: "Zambia",
+		dial_code: "+260",
+		emoji: "🇿🇲",
+		code: "ZM"
+	},
+	{
+		name: "Zimbabwe",
+		dial_code: "+263",
+		emoji: "🇿🇼",
+		code: "ZW"
+	}
+];
+
+var useCountryPickerState = function useCountryPickerState(_ref) {
+  var placeholder = _ref.placeholder;
+  var _React$useState = React.useState(countryList),
+    newOptions = _React$useState[0],
+    setNewOptions = _React$useState[1];
+  var _React$useState2 = React.useState(placeholder != null ? placeholder : countryList[0].name),
+    selected = _React$useState2[0],
+    setSelected = _React$useState2[1];
+  var _React$useState3 = React.useState(true),
+    hide = _React$useState3[0],
+    setHide = _React$useState3[1];
+  var _React$useState4 = React.useState(false),
+    isFocused = _React$useState4[0],
+    setIsFocused = _React$useState4[1];
+  var _React$useState5 = React.useState(false),
+    isHovered = _React$useState5[0],
+    setIsHovered = _React$useState5[1];
+  return {
+    hide: hide,
+    setHide: setHide,
+    newOptions: newOptions,
+    setNewOptions: setNewOptions,
+    isHovered: isHovered,
+    setIsHovered: setIsHovered,
+    isFocused: isFocused,
+    setIsFocused: setIsFocused,
+    selected: selected,
+    setSelected: setSelected
+  };
+};
+
+var IconSizes$2 = {
+  xs: 8,
+  sm: 10,
+  md: 12,
+  lg: 14,
+  xl: 16
+};
+
+var _excluded$2 = ["id", "name", "label", "selected", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "colorScheme", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setSelected", "styles"];
+var CountryList = function CountryList(props) {
+  return /*#__PURE__*/React.createElement(Element, Object.assign({
+    as: "ul"
+  }, props));
+};
+var CountrySelector = function CountrySelector(props) {
+  return /*#__PURE__*/React.createElement(Input, Object.assign({
+    type: "country"
+  }, props));
+};
+var CountryItem = function CountryItem(props) {
+  return /*#__PURE__*/React.createElement(Element, Object.assign({
+    as: "li"
+  }, props));
+};
+var DropDownItem = function DropDownItem(_ref) {
+  var option = _ref.option,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$callback = _ref.callback,
+    callback = _ref$callback === void 0 ? function () {} : _ref$callback,
+    _ref$styles = _ref.styles,
+    styles = _ref$styles === void 0 ? {
+      text: {}
+    } : _ref$styles;
+  var _useState = useState(false),
+    isHovered = _useState[0],
+    setIsHovered = _useState[1];
+  var handleOptionClick = function handleOptionClick(event) {
+    event.stopPropagation();
+    callback(option);
+  };
+  var handleHover = function handleHover() {
+    return setIsHovered(!isHovered);
+  };
+  return /*#__PURE__*/React.createElement(CountryItem, Object.assign({
+    margin: 0,
+    role: "DropDownItem",
+    listStyleType: "none",
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    onMouseEnter: handleHover,
+    onMouseLeave: handleHover,
+    onClick: handleOptionClick,
+    fontSize: Typography.fontSizes[size],
+    backgroundColor: isHovered ? 'trueGray.100' : 'transparent'
+  }, styles['text']), option);
+};
+var DropDown = function DropDown(_ref2) {
+  var size = _ref2.size,
+    _ref2$styles = _ref2.styles,
+    styles = _ref2$styles === void 0 ? {
+      dropDown: {}
+    } : _ref2$styles,
+    options = _ref2.options,
+    _ref2$callback = _ref2.callback,
+    callback = _ref2$callback === void 0 ? function () {} : _ref2$callback;
+  var handleCallback = function handleCallback(option) {
+    return callback(option);
+  };
+  return /*#__PURE__*/React.createElement(CountryList, Object.assign({
+    role: "dropDown",
+    margin: 0,
+    padding: 0,
+    top: "100%",
+    width: "100%",
+    display: "flex",
+    zIndex: 1000,
+    overflow: "auto",
+    maxHeight: "300px",
+    borderRadius: 4,
+    position: "absolute",
+    flexDirection: "column",
+    backgroundColor: "white",
+    boxShadow: "rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px"
+  }, styles['dropDown']), options.map(function (option) {
+    return /*#__PURE__*/React.createElement(DropDownItem, Object.assign({
+      key: option.code,
+      size: size,
+      option: option.name,
+      callback: handleCallback
+    }, styles['text']));
+  }));
+};
+var CountryPickerView = function CountryPickerView(_ref3) {
+  var id = _ref3.id,
+    name = _ref3.name,
+    label = _ref3.label,
+    selected = _ref3.selected,
+    placeholder = _ref3.placeholder,
+    helperText = _ref3.helperText,
+    _ref3$hide = _ref3.hide,
+    hide = _ref3$hide === void 0 ? false : _ref3$hide,
+    _ref3$error = _ref3.error,
+    error = _ref3$error === void 0 ? false : _ref3$error,
+    _ref3$isHovered = _ref3.isHovered,
+    isHovered = _ref3$isHovered === void 0 ? false : _ref3$isHovered,
+    _ref3$isFocused = _ref3.isFocused,
+    isFocused = _ref3$isFocused === void 0 ? false : _ref3$isFocused,
+    _ref3$isAutoFocus = _ref3.isAutoFocus,
+    isAutoFocus = _ref3$isAutoFocus === void 0 ? false : _ref3$isAutoFocus,
+    _ref3$isDisabled = _ref3.isDisabled,
+    isDisabled = _ref3$isDisabled === void 0 ? false : _ref3$isDisabled,
+    _ref3$isReadOnly = _ref3.isReadOnly,
+    isReadOnly = _ref3$isReadOnly === void 0 ? false : _ref3$isReadOnly,
+    _ref3$shadow = _ref3.shadow,
+    shadow = _ref3$shadow === void 0 ? {} : _ref3$shadow,
+    _ref3$newOptions = _ref3.newOptions,
+    newOptions = _ref3$newOptions === void 0 ? [] : _ref3$newOptions,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? 'md' : _ref3$size,
+    _ref3$variant = _ref3.variant,
+    variant = _ref3$variant === void 0 ? 'default' : _ref3$variant,
+    _ref3$shape = _ref3.shape,
+    shape = _ref3$shape === void 0 ? 'default' : _ref3$shape,
+    _ref3$colorScheme = _ref3.colorScheme,
+    colorScheme = _ref3$colorScheme === void 0 ? 'theme.primary' : _ref3$colorScheme,
+    onChange = _ref3.onChange,
+    _ref3$onBlur = _ref3.onBlur,
+    onBlur = _ref3$onBlur === void 0 ? function () {} : _ref3$onBlur,
+    _ref3$setHide = _ref3.setHide,
+    setHide = _ref3$setHide === void 0 ? function () {} : _ref3$setHide,
+    _ref3$setNewOptions = _ref3.setNewOptions,
+    setNewOptions = _ref3$setNewOptions === void 0 ? function () {} : _ref3$setNewOptions,
+    _ref3$setIsHovered = _ref3.setIsHovered,
+    setIsHovered = _ref3$setIsHovered === void 0 ? function () {} : _ref3$setIsHovered,
+    _ref3$setIsFocused = _ref3.setIsFocused,
+    setIsFocused = _ref3$setIsFocused === void 0 ? function () {} : _ref3$setIsFocused,
+    _ref3$setSelected = _ref3.setSelected,
+    setSelected = _ref3$setSelected === void 0 ? function () {} : _ref3$setSelected,
+    _ref3$styles = _ref3.styles,
+    styles = _ref3$styles === void 0 ? {
+      text: {},
+      icon: {},
+      label: {},
+      dropDown: {},
+      helperText: {},
+      box: {}
+    } : _ref3$styles,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded$2);
+  var _useTheme = useTheme(),
+    getColor = _useTheme.getColor;
+  var IconColor = getColor('color.blueGray.700');
+  var handleHover = function handleHover() {
+    return setIsHovered(!isHovered);
+  };
+  var handleFocus = function handleFocus() {
+    return setIsFocused(true);
+  };
+  var handleCallback = function handleCallback(option) {
+    setHide(!hide);
+    setSelected(option);
+  };
+  var handleClick = function handleClick() {
+    if (!isDisabled && !isReadOnly) {
+      setHide(!hide);
+    }
+  };
+  var handleChange = function handleChange(event) {
+    var selectedCountry = event.target.value;
+    var filteredCountries = countryList.filter(function (country) {
+      return country.name.toLowerCase().startsWith(selectedCountry.toLowerCase());
+    });
+    if (hide) setHide(false);
+    setSelected(event.target.value);
+    setNewOptions(filteredCountries);
+    if (onChange) onChange(event);
+  };
+  var handleBlur = function handleBlur(event) {
+    onBlur(event);
+    setIsFocused(false);
+  };
+  useEffect(function () {
+    if (onChange) onChange(selected); // Call onChange when selectedCountry changes
+  }, [onChange, selected]);
+  var isWithLabel = !!(isFocused && label);
+  var fieldStyles = Object.assign({
+    margin: 0,
+    paddingVerical: 8,
+    paddingHorizonatl: 0,
+    width: '100%',
+    heigth: '100%',
+    border: 'none',
+    on: {
+      focus: {
+        outline: 'none'
+      }
+    },
+    fontSize: Typography.fontSizes[size],
+    backgroundColor: 'transparent',
+    color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
+    cursor: isDisabled ? 'not-allowed' : 'auto'
+  }, styles['field']);
+  return /*#__PURE__*/React.createElement(FieldContainer, {
+    helperText: helperText,
+    error: error,
+    styles: styles,
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement(FieldContent, {
+    label: label,
+    size: size,
+    error: error,
+    shape: shape,
+    styles: styles,
+    shadow: shadow,
+    variant: variant,
+    value: selected,
+    color: colorScheme,
+    isHovered: isHovered,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly,
+    isFocused: isFocused,
+    isWithLabel: isWithLabel,
+    colorScheme: colorScheme,
+    onMouseEnter: handleHover,
+    onMouseLeave: handleHover
+  }, /*#__PURE__*/React.createElement(FieldWrapper, null, isWithLabel && /*#__PURE__*/React.createElement(FieldLabel, Object.assign({
+    htmlFor: id,
+    color: colorScheme,
+    error: error
+  }, styles), label), /*#__PURE__*/React.createElement(CountrySelector, Object.assign({
+    id: id,
+    name: name,
+    placeholder: placeholder,
+    readOnly: isReadOnly,
+    disabled: isDisabled,
+    autoFocus: isAutoFocus,
+    onBlur: handleBlur,
+    onFocus: handleFocus
+  }, fieldStyles, props, {
+    value: selected,
+    onChange: handleChange
+  }))), /*#__PURE__*/React.createElement(FieldIcons, null, hide ? /*#__PURE__*/React.createElement(ArrowDownSvg, {
+    size: IconSizes$2[size],
+    color: IconColor,
+    style: styles['icon']
+  }) : /*#__PURE__*/React.createElement(ArrowUpSvg, {
+    size: IconSizes$2[size],
+    color: IconColor,
+    style: styles['icon']
+  }))), !hide && /*#__PURE__*/React.createElement(DropDown, {
+    size: size,
+    styles: styles,
+    options: newOptions,
+    callback: handleCallback
+  }));
+};
+
+var CountryPickerComponent = function CountryPickerComponent(props) {
+  var countryPickerStates = useCountryPickerState(props);
+  return /*#__PURE__*/React.createElement(CountryPickerView, Object.assign({}, countryPickerStates, props));
+};
+/**
+ * Country picker allows users to select a country from a dropdown list or search field.
+ */
+var CountryPicker = CountryPickerComponent;
+
+var useDatePickerState = function useDatePickerState() {
+  var _React$useState = React.useState(false),
+    isHovered = _React$useState[0],
+    setIsHovered = _React$useState[1];
+  var _React$useState2 = React.useState(false),
+    isFocused = _React$useState2[0],
+    setIsFocused = _React$useState2[1];
+  var _React$useState3 = React.useState(format(new Date(), 'yyyy-MM-dd')),
+    date = _React$useState3[0],
+    setDate = _React$useState3[1];
+  return {
+    date: date,
+    setDate: setDate,
+    isHovered: isHovered,
+    setIsHovered: setIsHovered,
+    isFocused: isFocused,
+    setIsFocused: setIsFocused
+  };
+};
+
+var _excluded$3 = ["id", "icon", "name", "label", "date", "children", "helperText", "shadow", "size", "variant", "shape", "colorScheme", "styles", "error", "isHovered", "isFocused", "isDisabled", "isReadOnly", "setDate", "setIsFocused", "setIsHovered", "onChange", "onChangeText"];
+var DatePickerContent = function DatePickerContent(props) {
+  return /*#__PURE__*/React.createElement(Input, Object.assign({
+    type: "date"
+  }, props));
+};
+var DatePickerView = function DatePickerView(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    label = _ref.label,
+    date = _ref.date,
+    helperText = _ref.helperText,
+    _ref$shadow = _ref.shadow,
+    shadow = _ref$shadow === void 0 ? {} : _ref$shadow,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? 'default' : _ref$shape,
+    _ref$colorScheme = _ref.colorScheme,
+    colorScheme = _ref$colorScheme === void 0 ? 'theme.primary' : _ref$colorScheme,
+    _ref$styles = _ref.styles,
+    styles = _ref$styles === void 0 ? {
+      box: {},
+      label: {},
+      helperText: {},
+      text: {},
+      field: {}
+    } : _ref$styles,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    _ref$isHovered = _ref.isHovered,
+    isHovered = _ref$isHovered === void 0 ? false : _ref$isHovered,
+    _ref$isFocused = _ref.isFocused,
+    isFocused = _ref$isFocused === void 0 ? false : _ref$isFocused,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isReadOnly = _ref.isReadOnly,
+    isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
+    _ref$setDate = _ref.setDate,
+    setDate = _ref$setDate === void 0 ? function () {} : _ref$setDate,
+    _ref$setIsFocused = _ref.setIsFocused,
+    setIsFocused = _ref$setIsFocused === void 0 ? function () {} : _ref$setIsFocused,
+    _ref$setIsHovered = _ref.setIsHovered,
+    setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
+    onChange = _ref.onChange,
+    onChangeText = _ref.onChangeText,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+  var isWithLabel = !!(isFocused && label);
+  var handleHover = function handleHover() {
+    return setIsHovered(!isHovered);
+  };
+  var handleFocus = function handleFocus() {
+    return setIsFocused(true);
+  };
+  var handleDateChange = function handleDateChange(event) {
+    if (typeof event === 'string') {
+      setDate(event);
+      if (onChangeText) onChangeText(event);
+    } else {
+      setDate(event.target.value);
+      if (onChange) onChange(event);
+    }
+  };
+  var fieldStyles = Object.assign({
+    margin: 0,
+    paddingVertical: 8,
+    paddingHorizontal: 0,
+    width: '100%',
+    heigth: '100%',
+    border: 'none',
+    on: {
+      focus: {
+        outline: 'none',
+        backgroundColor: 'transparent'
+      }
+    },
+    fontSize: Typography.fontSizes[size],
+    backgroundColor: 'transparent',
+    color: isDisabled ? 'trueGray.600' : 'blueGray.700',
+    cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer'
+  }, styles['field']);
+  return /*#__PURE__*/React.createElement(FieldContainer$1, {
+    helperText: helperText,
+    error: error,
+    styles: styles
+  }, /*#__PURE__*/React.createElement(FieldContent$1, {
+    label: label,
+    size: size,
+    error: error,
+    shape: shape,
+    styles: styles,
+    shadow: shadow,
+    variant: variant,
+    value: date,
+    color: colorScheme,
+    isHovered: isHovered,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly,
+    isFocused: isFocused,
+    isWithLabel: isWithLabel,
+    colorScheme: colorScheme,
+    onMouseEnter: handleHover,
+    onMouseLeave: handleHover
+  }, /*#__PURE__*/React.createElement(FieldWrapper$1, null, isWithLabel && /*#__PURE__*/React.createElement(FieldLabel$1, Object.assign({
+    htmlFor: id,
+    color: colorScheme,
+    error: error
+  }, styles), label), /*#__PURE__*/React.createElement(DatePickerContent, Object.assign({
+    id: id,
+    name: name,
+    value: date,
+    onFocus: handleFocus,
+    onChange: handleDateChange,
+    disabled: isDisabled,
+    readOnly: isReadOnly
+  }, fieldStyles, onChangeText && {
+    onChangeText: handleDateChange
+  }, props)))));
+};
+
+var DatePickerComponent = function DatePickerComponent(props) {
+  var datePickerStates = useDatePickerState();
+  return /*#__PURE__*/React.createElement(DatePickerView, Object.assign({}, datePickerStates, props));
+};
+/**
+ * Date picker allows users to select a date from a calendar view.
+ */
+var DatePicker = DatePickerComponent;
+
+var usePasswordState = function usePasswordState() {
+  var _useState = useState(false),
+    isVisible = _useState[0],
+    setIsVisible = _useState[1];
+  return {
+    isVisible: isVisible,
+    setIsVisible: setIsVisible
+  };
+};
+
+var _excluded$4 = ["name", "visibleIcon", "hiddenIcon", "isDisabled", "isVisible", "setIsVisible"];
+var PasswordView = function PasswordView(_ref) {
+  var name = _ref.name,
+    visibleIcon = _ref.visibleIcon,
+    hiddenIcon = _ref.hiddenIcon,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isVisible = _ref.isVisible,
+    isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
+    _ref$setIsVisible = _ref.setIsVisible,
+    setIsVisible = _ref$setIsVisible === void 0 ? function () {} : _ref$setIsVisible,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+  return /*#__PURE__*/React.createElement(TextField$1, Object.assign({
+    name: name,
+    type: isVisible ? 'text' : 'password',
+    rightChild: /*#__PURE__*/React.createElement(View, {
+      onClick: function onClick() {
+        if (!isDisabled) setIsVisible(!isVisible);
+      }
+    }, isVisible ? visibleIcon : hiddenIcon),
+    isClearable: false
+  }, props));
+};
+
+var PasswordComponent = function PasswordComponent(props) {
+  var passwordState = usePasswordState();
+  return /*#__PURE__*/React.createElement(PasswordView, Object.assign({}, passwordState, props));
+};
+/**
+ * To allow users to securely enter sensitive information
+ */
+var Password = PasswordComponent;
+
+var useSelectState = function useSelectState(_ref) {
+  var placeholder = _ref.placeholder,
+    isMulti = _ref.isMulti,
+    options = _ref.options;
+  var defaultSelected = placeholder ? isMulti ? [] : '' : options[0];
+  var _React$useState = React.useState(true),
+    hide = _React$useState[0],
+    setHide = _React$useState[1];
+  var _React$useState2 = React.useState(false),
+    isHovered = _React$useState2[0],
+    setIsHovered = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    isFocused = _React$useState3[0],
+    setIsFocused = _React$useState3[1];
+  var _React$useState4 = React.useState(defaultSelected),
+    selected = _React$useState4[0],
+    setSelected = _React$useState4[1];
+  return {
+    selected: selected,
+    setSelected: setSelected,
+    hide: hide,
+    setHide: setHide,
+    isHovered: isHovered,
+    setIsHovered: setIsHovered,
+    isFocused: isFocused,
+    setIsFocused: setIsFocused
+  };
+};
+var useItemState = function useItemState() {
+  var _React$useState5 = React.useState(false),
+    isHovered = _React$useState5[0],
+    setIsHovered = _React$useState5[1];
+  return {
+    isHovered: isHovered,
+    setIsHovered: setIsHovered
+  };
+};
+
+var IconSizes$3 = {
+  xs: 8,
+  sm: 10,
+  md: 12,
+  lg: 14,
+  xl: 16
+};
+
+var _excluded$5 = ["isHovered", "setIsHovered", "option", "size", "callback"],
+  _excluded2 = ["id", "name", "selected", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
+  _excluded3 = ["option", "size", "removeOption"],
+  _excluded4 = ["id", "name", "label", "selected", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "colorScheme", "shape", "variant", "styles", "onChange", "setHide", "setSelected", "setIsHovered", "setIsFocused"];
+var Item = function Item(_ref) {
+  var isHovered = _ref.isHovered,
+    setIsHovered = _ref.setIsHovered,
+    option = _ref.option,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$callback = _ref.callback,
+    callback = _ref$callback === void 0 ? function () {} : _ref$callback,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+  var handleOptionClick = function handleOptionClick(option) {
+    return callback(option);
+  };
+  var handleHover = function handleHover() {
+    return setIsHovered(!isHovered);
+  };
+  return /*#__PURE__*/React.createElement(Element, Object.assign({
+    as: "li",
+    margin: 0,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    listStyleType: "none",
+    onMouseEnter: handleHover,
+    onMouseLeave: handleHover,
+    fontSize: Typography.fontSizes[size],
+    onClick: function onClick() {
+      return handleOptionClick(option);
+    },
+    backgroundColor: isHovered ? 'trueGray.100' : 'transparent'
+  }, props), option);
+};
+var SelectBox = function SelectBox(_ref2) {
+  var _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'md' : _ref2$size,
+    _ref2$styles = _ref2.styles,
+    styles = _ref2$styles === void 0 ? {
+      field: {},
+      text: {}
+    } : _ref2$styles,
+    selected = _ref2.selected,
+    isDisabled = _ref2.isDisabled,
+    placeholder = _ref2.placeholder,
+    _ref2$removeOption = _ref2.removeOption,
+    removeOption = _ref2$removeOption === void 0 ? function () {} : _ref2$removeOption;
+  var fieldStyles = Object.assign({
+    margin: 0,
+    width: '95%',
+    heigth: '100%',
+    border: 'none',
+    paddingVertical: 8,
+    paddingHorizontal: 0,
+    fontSize: Typography.fontSizes[size],
+    backgroundColor: 'transparent',
+    color: isDisabled ? 'trueGray.600' : 'blueGray.700',
+    cursor: isDisabled ? 'not-allowed' : 'auto'
+  }, styles['field'], styles['text']);
+  return /*#__PURE__*/React.createElement(Text$1, Object.assign({}, fieldStyles), (selected === '' || selected && selected.length === 0) && !!placeholder ? placeholder : /*#__PURE__*/React.createElement(React.Fragment, null, typeof selected === 'string' ? selected : selected && selected.length > 0 && /*#__PURE__*/React.createElement(Horizontal$1, {
+    gap: 6
+  }, selected.map(function (option) {
+    return /*#__PURE__*/React.createElement(MultiSelect, {
+      key: option,
+      option: option,
+      removeOption: removeOption
+    });
+  }))));
+};
+var HiddenSelect = function HiddenSelect(_ref3) {
+  var id = _ref3.id,
+    name = _ref3.name,
+    selected = _ref3.selected,
+    onChange = _ref3.onChange,
+    _ref3$isMulti = _ref3.isMulti,
+    isMulti = _ref3$isMulti === void 0 ? false : _ref3$isMulti,
+    _ref3$isDisabled = _ref3.isDisabled,
+    isDisabled = _ref3$isDisabled === void 0 ? false : _ref3$isDisabled,
+    _ref3$isReadOnly = _ref3.isReadOnly,
+    isReadOnly = _ref3$isReadOnly === void 0 ? false : _ref3$isReadOnly,
+    _ref3$options = _ref3.options,
+    options = _ref3$options === void 0 ? [] : _ref3$options,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+  var handleChange = function handleChange(event) {
+    if (onChange) onChange(event);
+  };
+  return /*#__PURE__*/React.createElement(Element, Object.assign({
+    id: id,
+    name: name,
+    as: "select",
+    opacity: 0,
+    width: 0,
+    height: 0,
+    position: "absolute",
+    value: selected,
+    disabled: isDisabled,
+    readOnly: isReadOnly,
+    onChange: handleChange,
+    multiple: isMulti
+  }, props), options.map(function (option) {
+    return /*#__PURE__*/React.createElement("option", {
+      key: option,
+      value: option
+    }, option);
+  }));
+};
+var DropDown$1 = function DropDown(_ref4) {
+  var size = _ref4.size,
+    _ref4$styles = _ref4.styles,
+    styles = _ref4$styles === void 0 ? {
+      dropDown: {}
+    } : _ref4$styles,
+    options = _ref4.options,
+    _ref4$callback = _ref4.callback,
+    callback = _ref4$callback === void 0 ? function () {} : _ref4$callback;
+  var itemStates = useItemState();
+  var handleCallback = function handleCallback(option) {
+    return callback(option);
+  };
+  var shadow = typeof document !== undefined ? {
+    boxShadow: 'rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px'
+  } : {
+    elevation: 2,
+    shadowColor: 'rgba(0, 0, 0, 0.07)',
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 1,
+    shadowRadius: 1
+  };
+  return /*#__PURE__*/React.createElement(Element, Object.assign({
+    as: "ul",
+    role: "dropdown",
+    top: "100%",
+    width: "100%",
+    display: "flex",
+    zIndex: 1000,
+    overflowY: "auto",
+    marginTop: 5,
+    marginLeft: 0,
+    marginRight: 0,
+    marginBottom: 0,
+    padding: 0,
+    borderRadius: 4,
+    position: "absolute",
+    flexDirection: "column",
+    backgroundColor: "white",
+    justifyContent: "space-evenly"
+  }, shadow, styles['dropDown']), options.map(function (option) {
+    return /*#__PURE__*/React.createElement(Item, Object.assign({
+      key: option,
+      size: size,
+      option: option,
+      callback: handleCallback
+    }, itemStates, styles['text']));
+  }));
+};
+var MultiSelect = function MultiSelect(_ref5) {
+  var option = _ref5.option,
+    _ref5$size = _ref5.size,
+    size = _ref5$size === void 0 ? 'md' : _ref5$size,
+    _ref5$removeOption = _ref5.removeOption,
+    removeOption = _ref5$removeOption === void 0 ? function () {} : _ref5$removeOption,
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded3);
+  var handleClick = function handleClick() {
+    return removeOption(option);
+  };
+  return /*#__PURE__*/React.createElement(Horizontal$1, Object.assign({
+    gap: 10,
+    padding: 6,
+    borderRadius: 4,
+    alignItems: "center",
+    fontSize: Typography.fontSizes[size],
+    backgroundColor: "trueGray.300",
+    onClick: function onClick(event) {
+      return event.stopPropagation();
+    }
+  }, props), /*#__PURE__*/React.createElement(Text$1, {
+    size: size
+  }, option), /*#__PURE__*/React.createElement(CloseSvg, {
+    role: "close-button",
+    color: "inherit",
+    size: IconSizes$3[size],
+    onClick: handleClick
+  }));
+};
+var SelectView = function SelectView(_ref6) {
+  var id = _ref6.id,
+    name = _ref6.name,
+    label = _ref6.label,
+    selected = _ref6.selected,
+    placeholder = _ref6.placeholder,
+    helperText = _ref6.helperText,
+    _ref6$hide = _ref6.hide,
+    hide = _ref6$hide === void 0 ? false : _ref6$hide,
+    _ref6$error = _ref6.error,
+    error = _ref6$error === void 0 ? false : _ref6$error,
+    _ref6$isMulti = _ref6.isMulti,
+    isMulti = _ref6$isMulti === void 0 ? false : _ref6$isMulti,
+    _ref6$isFocused = _ref6.isFocused,
+    isFocused = _ref6$isFocused === void 0 ? false : _ref6$isFocused,
+    _ref6$isHovered = _ref6.isHovered,
+    isHovered = _ref6$isHovered === void 0 ? false : _ref6$isHovered,
+    _ref6$isDisabled = _ref6.isDisabled,
+    isDisabled = _ref6$isDisabled === void 0 ? false : _ref6$isDisabled,
+    _ref6$isReadOnly = _ref6.isReadOnly,
+    isReadOnly = _ref6$isReadOnly === void 0 ? false : _ref6$isReadOnly,
+    _ref6$options = _ref6.options,
+    options = _ref6$options === void 0 ? [] : _ref6$options,
+    _ref6$shadow = _ref6.shadow,
+    shadow = _ref6$shadow === void 0 ? {} : _ref6$shadow,
+    _ref6$size = _ref6.size,
+    size = _ref6$size === void 0 ? 'md' : _ref6$size,
+    _ref6$colorScheme = _ref6.colorScheme,
+    colorScheme = _ref6$colorScheme === void 0 ? 'theme.primary' : _ref6$colorScheme,
+    _ref6$shape = _ref6.shape,
+    shape = _ref6$shape === void 0 ? 'default' : _ref6$shape,
+    _ref6$variant = _ref6.variant,
+    variant = _ref6$variant === void 0 ? 'default' : _ref6$variant,
+    _ref6$styles = _ref6.styles,
+    styles = _ref6$styles === void 0 ? {
+      text: {},
+      icon: {},
+      dropDown: {},
+      selectBox: {},
+      label: {},
+      helperText: {}
+    } : _ref6$styles,
+    _ref6$onChange = _ref6.onChange,
+    onChange = _ref6$onChange === void 0 ? function () {} : _ref6$onChange,
+    _ref6$setHide = _ref6.setHide,
+    setHide = _ref6$setHide === void 0 ? function () {} : _ref6$setHide,
+    _ref6$setSelected = _ref6.setSelected,
+    setSelected = _ref6$setSelected === void 0 ? function () {} : _ref6$setSelected,
+    _ref6$setIsHovered = _ref6.setIsHovered,
+    setIsHovered = _ref6$setIsHovered === void 0 ? function () {} : _ref6$setIsHovered,
+    _ref6$setIsFocused = _ref6.setIsFocused,
+    setIsFocused = _ref6$setIsFocused === void 0 ? function () {} : _ref6$setIsFocused,
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded4);
+  var isWithLabel = !!(isFocused && label);
+  var handleHover = function handleHover() {
+    return setIsHovered(!isHovered);
+  };
+  var handleFocus = function handleFocus() {
+    return setIsFocused(true);
+  };
+  var handleClick = function handleClick(event) {
+    event.stopPropagation();
+    setHide(!hide);
+    setIsFocused(!isFocused);
+  };
+  var handleCallback = useCallback(function (option) {
+    setHide(!hide);
+    if (isMulti && Array.isArray(selected)) {
+      !selected.includes(option) && setSelected([].concat(selected, [option]));
+    } else {
+      setSelected(option);
+    }
+  }, [hide, isMulti, selected]);
+  var handleRemoveOption = function handleRemoveOption(selectedOption) {
+    if (Array.isArray(selected) && selected.includes(selectedOption)) {
+      var newSelected = selected.filter(function (option) {
+        return option !== selectedOption;
+      });
+      setSelected(newSelected.length === 0 ? [] : newSelected);
+    }
+  };
+  return /*#__PURE__*/React.createElement(FieldContainer$1, {
+    role: "SelectBox",
+    helperText: helperText,
+    error: error,
+    styles: styles,
+    onClick: isDisabled || isReadOnly ? function () {} : handleClick
+  }, /*#__PURE__*/React.createElement(FieldContent$1, {
+    label: label,
+    size: size,
+    error: error,
+    shape: shape,
+    styles: styles,
+    shadow: shadow,
+    variant: variant,
+    value: selected,
+    color: colorScheme,
+    isHovered: isHovered,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly,
+    isFocused: isFocused,
+    isWithLabel: isWithLabel,
+    colorScheme: colorScheme,
+    onMouseEnter: handleHover,
+    onMouseLeave: handleHover
+  }, /*#__PURE__*/React.createElement(FieldWrapper$1, null, isWithLabel && /*#__PURE__*/React.createElement(FieldLabel$1, Object.assign({
+    htmlFor: id,
+    color: colorScheme,
+    error: error
+  }, styles), label), /*#__PURE__*/React.createElement(HiddenSelect, Object.assign({
+    id: id,
+    name: name,
+    options: options,
+    onChange: onChange,
+    selected: selected,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly,
+    isMulti: isMulti,
+    onFocus: handleFocus
+  }, props)), /*#__PURE__*/React.createElement(SelectBox, {
+    size: size,
+    styles: styles,
+    selected: selected,
+    isDisabled: isDisabled,
+    placeholder: placeholder,
+    removeOption: handleRemoveOption
+  })), /*#__PURE__*/React.createElement(FieldIcons$1, null, !isReadOnly && !isDisabled && /*#__PURE__*/React.createElement(React.Fragment, null, hide ? /*#__PURE__*/React.createElement(ArrowDownSvg$1, {
+    color: "inherit",
+    size: IconSizes$3[size],
+    style: styles.icon
+  }) : /*#__PURE__*/React.createElement(ArrowUpSvg$1, {
+    color: "inherit",
+    size: IconSizes$3[size],
+    style: styles.icon
+  })))), !hide && /*#__PURE__*/React.createElement(DropDown$1, {
+    size: size,
+    styles: styles,
+    options: options,
+    callback: handleCallback
+  }));
+};
+
+var SelectComponent = function SelectComponent(props) {
+  var selectStates = useSelectState(props);
+  return /*#__PURE__*/React.createElement(SelectView, Object.assign({}, selectStates, props));
+};
+/**
+ * Select provides a dropdown list of options for the user to choose from.
+ */
+var Select = SelectComponent;
+
+var useSwitchState = function useSwitchState(_ref) {
+  var isDisabled = _ref.isDisabled,
+    isChecked = _ref.isChecked;
+  var _React$useState = React.useState(false),
+    isHovered = _React$useState[0],
+    setIsHovered = _React$useState[1];
+  var _React$useState2 = React.useState(isDisabled ? !isDisabled : isChecked),
+    on = _React$useState2[0],
+    setOn = _React$useState2[1];
+  return {
+    isHovered: isHovered,
+    setIsHovered: setIsHovered,
+    on: on,
+    setOn: setOn
+  };
+};
+
+var KnobSizes = {
+  xs: {
+    height: 6,
+    width: 6
+  },
+  sm: {
+    height: 9,
+    width: 9
+  },
+  md: {
+    height: 12,
+    width: 12
+  },
+  lg: {
+    height: 15,
+    width: 15
+  },
+  xl: {
+    height: 18,
+    width: 18
+  },
+  '2xl': {
+    height: 21,
+    width: 21
+  },
+  '3xl': {
+    height: 24,
+    width: 24
+  },
+  '4xl': {
+    height: 27,
+    width: 27
+  },
+  '5xl': {
+    height: 30,
+    width: 30
+  },
+  '6xl': {
+    height: 33,
+    width: 33
+  }
+};
+var SliderSizes = {
+  xs: {
+    height: 16,
+    width: 28
+  },
+  sm: {
+    height: 20,
+    width: 36
+  },
+  md: {
+    height: 24,
+    width: 44
+  },
+  lg: {
+    height: 28,
+    width: 52
+  },
+  xl: {
+    height: 32,
+    width: 60
+  },
+  '2xl': {
+    height: 36,
+    width: 68
+  },
+  '3xl': {
+    height: 40,
+    width: 76
+  },
+  '4xl': {
+    height: 44,
+    width: 84
+  },
+  '5xl': {
+    height: 48,
+    width: 92
+  },
+  '6xl': {
+    height: 52,
+    width: 100
+  }
+};
+var SliderPadding = {
+  xs: {
+    paddingVertical: 0,
+    paddingHorizontal: 2
+  },
+  sm: {
+    paddingVertical: 0,
+    paddingHorizontal: 3
+  },
+  md: {
+    paddingVertical: 0,
+    paddingHorizontal: 5
+  },
+  lg: {
+    paddingVertical: 0,
+    paddingHorizontal: 6
+  },
+  xl: {
+    paddingVertical: 0,
+    paddingHorizontal: 8
+  },
+  '2xl': {
+    paddingVertical: 0,
+    paddingHorizontal: 9
+  },
+  '3xl': {
+    paddingVertical: 0,
+    paddingHorizontal: 10
+  },
+  '4xl': {
+    paddingVertical: 0,
+    paddingHorizontal: 13
+  },
+  '5xl': {
+    paddingVertical: 0,
+    paddingHorizontal: 15
+  },
+  '6xl': {
+    paddingVertical: 0,
+    paddingHorizontal: 16
+  }
+};
+
+var _excluded$6 = ["id", "name", "inActiveChild", "activeChild", "shadow", "size", "colorScheme", "on", "isHovered", "isChecked", "isDisabled", "isReadOnly", "onChange", "onValueChange", "setOn", "setIsHovered", "styles"];
+var SwitchContent = function SwitchContent(props) {
+  return /*#__PURE__*/React.createElement(Input, Object.assign({
+    type: "checkbox"
+  }, props));
+};
+var SwitchView = function SwitchView(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    inActiveChild = _ref.inActiveChild,
+    activeChild = _ref.activeChild,
+    _ref$shadow = _ref.shadow,
+    shadow = _ref$shadow === void 0 ? {} : _ref$shadow,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'sm' : _ref$size,
+    _ref$colorScheme = _ref.colorScheme,
+    colorScheme = _ref$colorScheme === void 0 ? 'theme.primary' : _ref$colorScheme,
+    _ref$on = _ref.on,
+    on = _ref$on === void 0 ? false : _ref$on,
+    _ref$isHovered = _ref.isHovered,
+    isHovered = _ref$isHovered === void 0 ? false : _ref$isHovered,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isReadOnly = _ref.isReadOnly,
+    isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
+    onChange = _ref.onChange,
+    onValueChange = _ref.onValueChange,
+    _ref$setOn = _ref.setOn,
+    setOn = _ref$setOn === void 0 ? function () {} : _ref$setOn,
+    _ref$setIsHovered = _ref.setIsHovered,
+    setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
+    _ref$styles = _ref.styles,
+    styles = _ref$styles === void 0 ? {
+      slider: {},
+      circle: {}
+    } : _ref$styles,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+  var handleToggle = function handleToggle(event) {
+    if (!isReadOnly) {
+      setOn(!on);
+      if (onChange) onChange(event);
+    }
+  };
+  var handleHover = function handleHover() {
+    return setIsHovered(!isHovered);
+  };
+  return /*#__PURE__*/React.createElement(Label, {
+    htmlFor: id,
+    onMouseEnter: handleHover,
+    onMouseLeave: handleHover
+  }, /*#__PURE__*/React.createElement(SwitchContent, Object.assign({
+    id: id,
+    name: name,
+    opacity: 0,
+    width: 0,
+    height: 0,
+    checked: on,
+    onChange: handleToggle,
+    disabled: isDisabled,
+    readOnly: isReadOnly
+  }, onValueChange && {
+    onValueChange: handleToggle
+  }, props)), /*#__PURE__*/React.createElement(View$1, Object.assign({
+    display: "flex",
+    cursor: "pointer",
+    alignItems: "center",
+    borderRadius: 24,
+    filter: isHovered && on ? 'brightness(0.9)' : 'brightness(1)',
+    transition: "justify-content 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+    backgroundColor: isDisabled ? 'disabled' : on ? colorScheme : 'lightgray',
+    justifyContent: activeChild ? 'space-between' : on ? 'flex-end' : 'flex-start'
+  }, shadow, SliderPadding[size], SliderSizes[size], styles['slider']), activeChild && on && /*#__PURE__*/React.createElement(View$1, null, activeChild), /*#__PURE__*/React.createElement(View$1, Object.assign({
+    borderRadius: "50%",
+    backgroundColor: "white"
+  }, KnobSizes[size], styles['circle'])), inActiveChild && !on && /*#__PURE__*/React.createElement(View$1, null, inActiveChild)));
+};
+
+var SwitchComponent = function SwitchComponent(props) {
+  var switchStates = useSwitchState(props);
+  return /*#__PURE__*/React.createElement(SwitchView, Object.assign({}, switchStates, props));
+};
+var Switch = SwitchComponent;
+
+var useTextAreaState = function useTextAreaState(_ref) {
+  var label = _ref.label,
+    placeholder = _ref.placeholder,
+    defaultValue = _ref.defaultValue,
+    value = _ref.value;
+  var _useState = useState(label != null ? label : placeholder),
+    hint = _useState[0],
+    setHint = _useState[1];
+  var _useState2 = useState(false),
+    isHovered = _useState2[0],
+    setIsHovered = _useState2[1];
+  var _useState3 = useState(value || defaultValue || ''),
+    inputValue = _useState3[0],
+    setInputValue = _useState3[1];
+  var _useState4 = useState(false),
+    isFocused = _useState4[0],
+    setIsFocused = _useState4[1];
+  return {
+    hint: hint,
+    setHint: setHint,
+    isHovered: isHovered,
+    setIsHovered: setIsHovered,
+    inputValue: inputValue,
+    setInputValue: setInputValue,
+    isFocused: isFocused,
+    setIsFocused: setIsFocused
+  };
+};
+
+var _excluded$7 = ["id", "name", "hint", "error", "value", "label", "shadow", "inputValue", "helperText", "placeholder", "defaultValue", "size", "shape", "variant", "colorScheme", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "onChangeText", "setHint", "setInputValue", "setIsFocused", "setIsHovered", "styles"];
+var TextAreaView = function TextAreaView(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    hint = _ref.hint,
+    error = _ref.error,
+    label = _ref.label,
+    shadow = _ref.shadow,
+    inputValue = _ref.inputValue,
+    helperText = _ref.helperText,
+    placeholder = _ref.placeholder,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'sm' : _ref$size,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? 'default' : _ref$shape,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    _ref$colorScheme = _ref.colorScheme,
+    colorScheme = _ref$colorScheme === void 0 ? 'theme.primary' : _ref$colorScheme,
+    _ref$isHovered = _ref.isHovered,
+    isHovered = _ref$isHovered === void 0 ? false : _ref$isHovered,
+    _ref$isFocused = _ref.isFocused,
+    isFocused = _ref$isFocused === void 0 ? false : _ref$isFocused,
+    _ref$isEditable = _ref.isEditable,
+    isEditable = _ref$isEditable === void 0 ? false : _ref$isEditable,
+    _ref$isReadOnly = _ref.isReadOnly,
+    isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isAutoFocus = _ref.isAutoFocus,
+    isAutoFocus = _ref$isAutoFocus === void 0 ? false : _ref$isAutoFocus,
+    _ref$isMultiline = _ref.isMultiline,
+    isMultiline = _ref$isMultiline === void 0 ? false : _ref$isMultiline,
+    _ref$maxRows = _ref.maxRows,
+    maxRows = _ref$maxRows === void 0 ? 3 : _ref$maxRows,
+    _ref$maxCols = _ref.maxCols,
+    maxCols = _ref$maxCols === void 0 ? 30 : _ref$maxCols,
+    _ref$onBlur = _ref.onBlur,
+    onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
+    onChange = _ref.onChange,
+    onFocus = _ref.onFocus,
+    onChangeText = _ref.onChangeText,
+    _ref$setHint = _ref.setHint,
+    setHint = _ref$setHint === void 0 ? function () {} : _ref$setHint,
+    _ref$setInputValue = _ref.setInputValue,
+    setInputValue = _ref$setInputValue === void 0 ? function () {} : _ref$setInputValue,
+    _ref$setIsFocused = _ref.setIsFocused,
+    setIsFocused = _ref$setIsFocused === void 0 ? function () {} : _ref$setIsFocused,
+    _ref$setIsHovered = _ref.setIsHovered,
+    setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
+    _ref$styles = _ref.styles,
+    styles = _ref$styles === void 0 ? {
+      box: {},
+      text: {},
+      label: {},
+      helperText: {},
+      field: {}
+    } : _ref$styles,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+  var isWithLabel = !!(isFocused && label);
+  useMemo(function () {
+    setHint(isFocused && !inputValue ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
+  }, [inputValue, isFocused, label, placeholder]);
+  var fieldStyles = Object.assign({
+    margin: 0,
+    paddingVertical: 8,
+    paddingHorizontal: 0,
+    width: '100%',
+    heigth: '100%',
+    border: 'none',
+    on: {
+      focus: {
+        outline: 'none'
+      }
+    },
+    fontSize: Typography.fontSizes[size],
+    backgroundColor: 'transparent',
+    color: isDisabled ? 'trueGray.600' : 'blueGray.700',
+    cursor: isDisabled ? 'not-allowed' : 'auto'
+  }, styles['field']);
+  var handleHover = function handleHover() {
+    return setIsHovered(!isHovered);
+  };
+  var handleFocus = function handleFocus() {
+    setIsFocused(true);
+    if (onFocus) onFocus();
+  };
+  var handleBlur = function handleBlur(event) {
+    onBlur(event);
+    setIsFocused(false);
+  };
+  var handleChange = function handleChange(event) {
+    if (typeof event === 'string') {
+      //for ios and android
+      setInputValue(event);
+      if (onChangeText) onChangeText(event);
+    } else {
+      setInputValue(event.target.value);
+      if (onChange) onChange(event);
+    }
+  };
+  return /*#__PURE__*/React.createElement(FieldContainer, {
+    helperText: helperText,
+    error: error,
+    styles: styles
+  }, /*#__PURE__*/React.createElement(FieldContent, {
+    label: label,
+    size: size,
+    error: error,
+    shape: shape,
+    styles: styles,
+    shadow: shadow,
+    variant: variant,
+    value: inputValue,
+    color: colorScheme,
+    isHovered: isHovered,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly,
+    isFocused: isFocused,
+    isWithLabel: isWithLabel,
+    colorScheme: colorScheme,
+    onMouseEnter: handleHover,
+    onMouseLeave: handleHover
+  }, /*#__PURE__*/React.createElement(FieldWrapper, null, isWithLabel && /*#__PURE__*/React.createElement(FieldLabel, Object.assign({
+    htmlFor: id,
+    color: colorScheme,
+    error: error
+  }, styles), label), /*#__PURE__*/React.createElement(Element, Object.assign({
+    as: "textarea",
+    id: id,
+    name: name,
+    rows: maxRows,
+    cols: maxCols,
+    value: inputValue,
+    readOnly: isReadOnly,
+    disabled: isDisabled,
+    autoFocus: isAutoFocus,
+    editable: isEditable,
+    placeholder: hint,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onChange: handleChange,
+    multiline: isMultiline
+  }, fieldStyles, props, onChangeText && {
+    onChangeText: handleChange
+  })))));
+};
+
+var TextAreaComponent = function TextAreaComponent(props) {
+  var textAreaState = useTextAreaState(props);
+  return /*#__PURE__*/React.createElement(TextAreaView, Object.assign({}, textAreaState, props));
+};
+/**
+ * Text Area is an component used to create a multi-line input field.
+ */
+var TextArea = TextAreaComponent;
+
+var useTextFieldState = function useTextFieldState(_ref) {
+  var label = _ref.label,
+    placeholder = _ref.placeholder,
+    value = _ref.value;
+  var _useState = useState(label != null ? label : placeholder),
+    hint = _useState[0],
+    setHint = _useState[1];
+  var _useState2 = useState(false),
+    isFocused = _useState2[0],
+    setIsFocused = _useState2[1];
+  var _useState3 = useState(false),
+    isHovered = _useState3[0],
+    setIsHovered = _useState3[1];
+  var _useState4 = useState(value || ''),
+    inputValue = _useState4[0],
+    setInputValue = _useState4[1];
+  return {
+    hint: hint,
+    setHint: setHint,
+    isFocused: isFocused,
+    setIsFocused: setIsFocused,
+    isHovered: isHovered,
+    setIsHovered: setIsHovered,
+    inputValue: inputValue,
+    setInputValue: setInputValue
+  };
+};
+
+var _excluded$8 = ["id", "name", "label", "value", "hint", "inputValue", "onChange", "leftChild", "rightChild", "helperText", "placeholder", "onChangeText", "shadow", "styles", "size", "shape", "variant", "colorScheme", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setInputValue", "onClick", "onFocus", "onBlur"];
+var TextFieldInput = function TextFieldInput(props) {
+  return /*#__PURE__*/React.createElement(Input, Object.assign({
+    type: "text"
+  }, props));
+};
+var TextFieldView = function TextFieldView(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    label = _ref.label,
+    hint = _ref.hint,
+    inputValue = _ref.inputValue,
+    onChange = _ref.onChange,
+    leftChild = _ref.leftChild,
+    rightChild = _ref.rightChild,
+    helperText = _ref.helperText,
+    placeholder = _ref.placeholder,
+    onChangeText = _ref.onChangeText,
+    _ref$shadow = _ref.shadow,
+    shadow = _ref$shadow === void 0 ? {} : _ref$shadow,
+    _ref$styles = _ref.styles,
+    styles = _ref$styles === void 0 ? {
+      box: {},
+      field: {},
+      label: {},
+      helperText: {},
+      text: {}
+    } : _ref$styles,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? 'default' : _ref$shape,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    _ref$colorScheme = _ref.colorScheme,
+    colorScheme = _ref$colorScheme === void 0 ? 'theme.primary' : _ref$colorScheme,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    _ref$isFocused = _ref.isFocused,
+    isFocused = _ref$isFocused === void 0 ? false : _ref$isFocused,
+    _ref$isHovered = _ref.isHovered,
+    isHovered = _ref$isHovered === void 0 ? false : _ref$isHovered,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isReadOnly = _ref.isReadOnly,
+    isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
+    _ref$isClearable = _ref.isClearable,
+    isClearable = _ref$isClearable === void 0 ? true : _ref$isClearable,
+    _ref$isAutoFocus = _ref.isAutoFocus,
+    isAutoFocus = _ref$isAutoFocus === void 0 ? false : _ref$isAutoFocus,
+    _ref$setHint = _ref.setHint,
+    setHint = _ref$setHint === void 0 ? function () {} : _ref$setHint,
+    _ref$setIsFocused = _ref.setIsFocused,
+    setIsFocused = _ref$setIsFocused === void 0 ? function () {} : _ref$setIsFocused,
+    _ref$setIsHovered = _ref.setIsHovered,
+    setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
+    _ref$setInputValue = _ref.setInputValue,
+    setInputValue = _ref$setInputValue === void 0 ? function () {} : _ref$setInputValue,
+    onFocus = _ref.onFocus,
+    _ref$onBlur = _ref.onBlur,
+    onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+  var _useTheme = useTheme(),
+    getColor = _useTheme.getColor;
+  var IconColor = getColor('color.blueGray.700');
+  var isWithLabel = !!(isFocused && label);
+  useMemo(function () {
+    setHint(isFocused && !inputValue ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
+  }, [inputValue, isFocused, label, placeholder]);
+  var fieldStyles = Object.assign({
+    margin: 0,
+    paddingVertical: 8,
+    padddingHorizontal: 0,
+    width: '100%',
+    heigth: '100%',
+    border: 'none',
+    on: {
+      focus: {
+        outline: 'none'
+      }
+    },
+    fontSize: Typography.fontSizes[size],
+    backgroundColor: 'transparent',
+    color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
+    cursor: isDisabled ? 'not-allowed' : 'auto'
+  }, styles['field']);
+  var handleFocus = function handleFocus() {
+    setIsFocused(true);
+    if (onFocus) onFocus();
+  };
+  var handleHover = function handleHover() {
+    return setIsHovered(!isHovered);
+  };
+  var handleBlur = function handleBlur(event) {
+    onBlur(event);
+    setIsFocused(false);
+  };
+  var handleChange = function handleChange(event) {
+    if (typeof event === 'string') {
+      //for ios and android
+      setInputValue(event);
+      if (onChangeText) onChangeText(event);
+    } else {
+      //Web
+      setInputValue(event.target.value);
+      if (onChange) onChange(event);
+    }
+  };
+  var handleClear = function handleClear() {
+    setInputValue('');
+    //Web
+    if (onChange) {
+      onBlur({
+        target: {
+          name: name
+        }
+      });
+      onChange({
+        target: {
+          name: name,
+          value: ''
+        }
+      });
+    }
+    //for ios and android
+    if (typeof document === 'undefined' && onChangeText) onChangeText('');
+  };
+  return /*#__PURE__*/React.createElement(FieldContainer$1, {
+    helperText: helperText,
+    error: error,
+    styles: styles
+  }, /*#__PURE__*/React.createElement(FieldContent$1, {
+    label: label,
+    size: size,
+    error: error,
+    shape: shape,
+    styles: styles,
+    shadow: shadow,
+    variant: variant,
+    value: inputValue,
+    color: colorScheme,
+    isHovered: isHovered,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly,
+    isFocused: isFocused,
+    isWithLabel: isWithLabel,
+    colorScheme: colorScheme,
+    onMouseEnter: handleHover,
+    onMouseLeave: handleHover
+  }, leftChild, /*#__PURE__*/React.createElement(FieldWrapper$1, null, isWithLabel && /*#__PURE__*/React.createElement(FieldLabel$1, Object.assign({
+    htmlFor: id,
+    color: colorScheme,
+    error: error
+  }, styles), label), /*#__PURE__*/React.createElement(TextFieldInput, Object.assign({
+    id: id,
+    name: name,
+    value: inputValue,
+    readOnly: isReadOnly,
+    disabled: isDisabled,
+    autoFocus: isAutoFocus,
+    placeholder: hint,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    autoComplete: "off"
+  }, fieldStyles, props, {
+    onChange: handleChange
+  }, onChangeText && {
+    onChangeText: handleChange
+  }))), (rightChild || isClearable && inputValue) && /*#__PURE__*/React.createElement(FieldIcons$1, null, rightChild && /*#__PURE__*/React.createElement(React.Fragment, null, rightChild), isClearable && inputValue && !isReadOnly && !isDisabled && /*#__PURE__*/React.createElement(CloseSvg, {
+    size: Typography.fontSizes[size],
+    color: IconColor,
+    onClick: handleClear
+  }))));
+};
+
+var TextFieldComponent = function TextFieldComponent(props) {
+  var textFieldStates = useTextFieldState(props);
+  return /*#__PURE__*/React.createElement(TextFieldView, Object.assign({}, textFieldStates, props));
+};
+/**
+ * TextField is used to capture text data from users.
+ */
+var TextField = TextFieldComponent;
+
+var _excluded$9 = ["children", "wrap"];
+var CenterView = function CenterView(_ref) {
+  var children = _ref.children,
+    wrap = _ref.wrap,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+  return /*#__PURE__*/React.createElement(View$1, Object.assign({
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    flexWrap: wrap
+  }, props), children);
+};
+
+/**
+ * The Center component is a React functional component that provides a centered layout for its children using flexbox.
+ */
+var CenterComponent = function CenterComponent(props) {
+  return /*#__PURE__*/React.createElement(CenterView, Object.assign({}, props));
+};
+var Center = CenterComponent;
+
+var _excluded$a = ["children", "wrap", "justify", "isReversed"];
+var HorizontalView = function HorizontalView(_ref) {
+  var children = _ref.children,
+    _ref$wrap = _ref.wrap,
+    wrap = _ref$wrap === void 0 ? 'wrap' : _ref$wrap,
+    _ref$justify = _ref.justify,
+    justify = _ref$justify === void 0 ? 'flex-start' : _ref$justify,
+    _ref$isReversed = _ref.isReversed,
+    isReversed = _ref$isReversed === void 0 ? false : _ref$isReversed,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+  return /*#__PURE__*/React.createElement(View, Object.assign({
+    display: "flex",
+    flexWrap: wrap,
+    flexDirection: isReversed ? 'row-reverse' : 'row',
+    justifyContent: justify
+  }, props), children);
+};
+
+/**
+ * Horizontal layout aligns all the elements in a container on the horizontal axis.
+ */
+var HorizontalComponent = function HorizontalComponent(props) {
+  return /*#__PURE__*/React.createElement(HorizontalView, Object.assign({}, props));
+};
+var Horizontal = HorizontalComponent;
+
+var _excluded$b = ["children", "wrap", "justify", "isReversed"];
+var VerticalView = function VerticalView(_ref) {
+  var children = _ref.children,
+    _ref$wrap = _ref.wrap,
+    wrap = _ref$wrap === void 0 ? 'nowrap' : _ref$wrap,
+    _ref$justify = _ref.justify,
+    justify = _ref$justify === void 0 ? 'flex-start' : _ref$justify,
+    _ref$isReversed = _ref.isReversed,
+    isReversed = _ref$isReversed === void 0 ? false : _ref$isReversed,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+  return /*#__PURE__*/React.createElement(View$2, Object.assign({
+    display: "flex",
+    flexWrap: wrap,
+    flexDirection: isReversed ? 'column-reverse' : 'column',
+    justifyContent: justify
+  }, props), children);
+};
+
+/**
+ * Vertical layout aligns all the elements in a container on the vertical axis.
+ */
+var VerticalComponent = function VerticalComponent(props) {
+  return /*#__PURE__*/React.createElement(VerticalView, Object.assign({}, props));
+};
+var Vertical = VerticalComponent;
+
+var useLinkState = function useLinkState() {
+  var _useState = useState(false),
+    isHovered = _useState[0],
+    setIsHovered = _useState[1];
+  return {
+    isHovered: isHovered,
+    setIsHovered: setIsHovered
+  };
+};
+
+var IconSizes$4 = {
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 18,
+  xl: 20,
+  '2xl': 24,
+  '3xl': 30,
+  '4xl': 36,
+  '5xl': 48,
+  '6xl': 64
+};
+
+var _excluded$c = ["children", "href", "iconSize", "underline", "isHovered", "isExternal", "colorScheme", "styles", "setIsHovered"];
+var LinkView = function LinkView(_ref) {
+  var children = _ref.children,
+    _ref$href = _ref.href,
+    href = _ref$href === void 0 ? '/' : _ref$href,
+    _ref$iconSize = _ref.iconSize,
+    iconSize = _ref$iconSize === void 0 ? 'sm' : _ref$iconSize,
+    _ref$underline = _ref.underline,
+    underline = _ref$underline === void 0 ? 'default' : _ref$underline,
+    _ref$isHovered = _ref.isHovered,
+    isHovered = _ref$isHovered === void 0 ? false : _ref$isHovered,
+    _ref$isExternal = _ref.isExternal,
+    isExternal = _ref$isExternal === void 0 ? false : _ref$isExternal,
+    _ref$colorScheme = _ref.colorScheme,
+    colorScheme = _ref$colorScheme === void 0 ? '#0072F5' : _ref$colorScheme,
+    _ref$styles = _ref.styles,
+    styles = _ref$styles === void 0 ? {
+      icon: {},
+      text: {}
+    } : _ref$styles,
+    _ref$setIsHovered = _ref.setIsHovered,
+    setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+  var handleHover = function handleHover() {
+    if (underline === 'hover') setIsHovered(true);
+  };
+  return /*#__PURE__*/React.createElement(Link$2, {
+    to: href,
+    target: isExternal ? '_blank' : '_self'
+  }, /*#__PURE__*/React.createElement(Element, Object.assign({
+    color: colorScheme,
+    onMouseEnter: handleHover,
+    onMouseLeave: handleHover,
+    textDecoration: isHovered || underline === 'underline' ? 'underline !important' : 'none'
+  }, styles.text, props), /*#__PURE__*/React.createElement(Horizontal$1, {
+    gap: 3,
+    alignItems: "center",
+    wrap: "nowrap"
+  }, children, isExternal && /*#__PURE__*/React.createElement(ExternalLinkSvg, {
+    color: colorScheme,
+    size: IconSizes$4[iconSize],
+    style: styles.icon
+  }))));
+};
+
+var LinkComponent = function LinkComponent(props) {
+  var linkStates = useLinkState();
+  return /*#__PURE__*/React.createElement(LinkView, Object.assign({}, linkStates, props));
+};
+/**
+ * Link allows users to navigate from page to page. It have a similar appearance as the hyperlink.
+ */
+var Link = LinkComponent;
+
+var DefaultSizes = {
+  xs: 14,
+  sm: 18,
+  md: 22,
+  lg: 26,
+  xl: 30,
+  '2xl': 40,
+  '3xl': 50,
+  '4xl': 60,
+  '5xl': 70,
+  '6xl': 80
+};
+var DefaultSpeeds = {
+  fast: 50,
+  normal: 100,
+  slow: 300
+};
+
+var _excluded$d = ["size", "speed", "color"],
+  _excluded2$1 = ["size", "speed", "color"],
+  _excluded3$1 = ["size", "speed", "color"],
+  _excluded4$1 = ["size", "children", "textColor", "loaderColor", "type", "speed", "textPosition"];
+var DefaultSpinner = function DefaultSpinner(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$speed = _ref.speed,
+    speed = _ref$speed === void 0 ? 'normal' : _ref$speed,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'theme.loading' : _ref$color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+  var theme = useTheme();
+  var colorStyle = theme.getColor(color);
+  var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
+  var _useState = useState(0),
+    angle = _useState[0],
+    setAngle = _useState[1];
+  useEffect(function () {
+    var intervalId = setInterval(function () {
+      setAngle(function (prevAngle) {
+        return prevAngle + 45;
+      });
+    }, DefaultSpeeds[speed]);
+    return function () {
+      return clearInterval(intervalId);
+    };
+  }, [speed]);
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: sizeStyle + "px",
+    height: sizeStyle + "px",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: colorStyle,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    style: {
+      transform: "rotate(" + angle + "deg)"
+    }
+  }, props), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_bgCarrier",
+    strokeWidth: "0"
+  }), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_tracerCarrier",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_iconCarrier"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M21 12a9 9 0 11-6.219-8.56"
+  })));
+};
+var Dotted = function Dotted(_ref2) {
+  var _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'md' : _ref2$size,
+    _ref2$speed = _ref2.speed,
+    speed = _ref2$speed === void 0 ? 'normal' : _ref2$speed,
+    _ref2$color = _ref2.color,
+    color = _ref2$color === void 0 ? 'theme.loading' : _ref2$color,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
+  var theme = useTheme();
+  var colorStyle = theme.getColor(color);
+  var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
+  var _useState2 = useState(0),
+    angle = _useState2[0],
+    setAngle = _useState2[1];
+  useEffect(function () {
+    var intervalId = setInterval(function () {
+      setAngle(function (prevAngle) {
+        return prevAngle + 45;
+      });
+    }, DefaultSpeeds[speed]);
+    return function () {
+      return clearInterval(intervalId);
+    };
+  }, [speed]);
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 50 50",
+    width: sizeStyle + "px",
+    height: sizeStyle + "px",
+    style: {
+      transform: "rotate(" + angle + "deg)"
+    }
+  }, props), /*#__PURE__*/React.createElement("circle", {
+    cx: "10",
+    cy: "25",
+    r: "4",
+    fill: colorStyle
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "25",
+    cy: "25",
+    r: "4",
+    fill: colorStyle
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "40",
+    cy: "25",
+    r: "4",
+    fill: colorStyle
+  }));
+};
+var Quarter = function Quarter(_ref3) {
+  var _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? 'md' : _ref3$size,
+    _ref3$speed = _ref3.speed,
+    speed = _ref3$speed === void 0 ? 'normal' : _ref3$speed,
+    _ref3$color = _ref3.color,
+    color = _ref3$color === void 0 ? 'theme.loading' : _ref3$color,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$1);
+  var theme = useTheme();
+  var colorStyle = theme.getColor(color);
+  var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
+  var _useState3 = useState(0),
+    angle = _useState3[0],
+    setAngle = _useState3[1];
+  useEffect(function () {
+    var intervalId = setInterval(function () {
+      setAngle(function (prevAngle) {
+        return prevAngle + 45;
+      });
+    }, DefaultSpeeds[speed]);
+    return function () {
+      return clearInterval(intervalId);
+    };
+  }, [speed]);
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 50 50",
+    width: sizeStyle + "px",
+    height: sizeStyle + "px",
+    style: {
+      transform: "rotate(" + angle + "deg)"
+    }
+  }, props), /*#__PURE__*/React.createElement("circle", {
+    cx: "25",
+    cy: "25",
+    r: "20",
+    fill: "none",
+    stroke: colorStyle,
+    strokeWidth: "5",
+    strokeDasharray: "1,10"
+  }));
+};
+var LoaderView = function LoaderView(_ref4) {
+  var size = _ref4.size,
+    children = _ref4.children,
+    textColor = _ref4.textColor,
+    loaderColor = _ref4.loaderColor,
+    _ref4$type = _ref4.type,
+    type = _ref4$type === void 0 ? 'default' : _ref4$type,
+    _ref4$speed = _ref4.speed,
+    speed = _ref4$speed === void 0 ? 'normal' : _ref4$speed,
+    _ref4$textPosition = _ref4.textPosition,
+    textPosition = _ref4$textPosition === void 0 ? 'right' : _ref4$textPosition,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$1);
+  var style = {
+    size: size,
+    speed: speed,
+    color: loaderColor
+  };
+  var variants = {
+    default: /*#__PURE__*/React.createElement(DefaultSpinner, Object.assign({}, style)),
+    dotted: /*#__PURE__*/React.createElement(Dotted, Object.assign({}, style)),
+    quarter: /*#__PURE__*/React.createElement(Quarter, Object.assign({}, style))
+  };
+  return /*#__PURE__*/React.createElement(Center$1, Object.assign({
+    gap: 10,
+    flexDirection: textPosition === 'top' || textPosition === 'bottom' ? 'column' : 'row'
+  }, props), (textPosition === 'left' || textPosition === 'top') && children && /*#__PURE__*/React.createElement(View, {
+    color: textColor
+  }, children), variants[type], (textPosition === 'right' || textPosition === 'bottom') && children && /*#__PURE__*/React.createElement(View, {
+    color: textColor
+  }, children));
+};
+
+var LoadingComponent = function LoadingComponent(props) {
+  return /*#__PURE__*/React.createElement(LoaderView, Object.assign({}, props));
+};
+/**
+ * It  gives the user an insight about an action being processed. It may have an undefined waiting time or display the process length.
+ */
+var Loading = LoadingComponent;
+
+var ContainerShapes = {
+  sharp: {
+    borderRadius: 0
+  },
+  rounded: {
+    borderRadius: 4
+  }
+};
+var OverlayAlignments = {
+  center: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  top: {
+    justifyContent: 'center'
+  },
+  right: {
+    justifyContent: 'flex-end',
+    alignItems: 'center'
+  },
+  bottom: {
+    justifyContent: 'center',
+    alignItems: 'flex-end'
+  },
+  left: {
+    alignItems: 'center'
+  }
+};
+var HeaderIconSizes = {
+  xs: 12,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 28
+};
+
+var _excluded$e = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
+  _excluded2$2 = ["children", "shadow", "isFullScreen", "shape"],
+  _excluded3$2 = ["children", "buttonColor", "iconSize", "buttonPosition"],
+  _excluded4$2 = ["children"],
+  _excluded5 = ["children"];
+var ModalOverlay = function ModalOverlay(_ref) {
+  var children = _ref.children,
+    blur = _ref.blur,
+    _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+    _ref$isClosePrevented = _ref.isClosePrevented,
+    isClosePrevented = _ref$isClosePrevented === void 0 ? false : _ref$isClosePrevented,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'center' : _ref$position,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+  var setOpen = useModalStore(function (state) {
+    return state.setOpen;
+  });
+  var setOnClose = useModalStore(function (state) {
+    return state.setOnClose;
+  });
+  useEffect(function () {
+    setOnClose(onClose);
+    if (isOpen) setOpen();
+  });
+  if (!isOpen) return null;
+  var handleClick = function handleClick() {
+    if (!isClosePrevented) onClose();
+  };
+  return /*#__PURE__*/React.createElement(Center$1, {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    zIndex: 1000,
+    onClick: handleClick,
+    visibility: isOpen ? 'visible' : 'hidden'
+  }, /*#__PURE__*/React.createElement(View$1, Object.assign({
+    cursor: "pointer",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    zIndex: 1000,
+    width: "100vw",
+    height: "100vh",
+    display: "flex",
+    backgroundColor: "blackAlpha.500",
+    backdropFilter: blur ? "blur(" + blur + "px)" : undefined,
+    onClick: handleClick
+  }, OverlayAlignments[position], props), children));
+};
+var ModalContainer = function ModalContainer(_ref2) {
+  var children = _ref2.children,
+    shadow = _ref2.shadow,
+    _ref2$isFullScreen = _ref2.isFullScreen,
+    isFullScreen = _ref2$isFullScreen === void 0 ? false : _ref2$isFullScreen,
+    _ref2$shape = _ref2.shape,
+    shape = _ref2$shape === void 0 ? 'rounded' : _ref2$shape,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
+  var defaultShadow = typeof document !== undefined ? {
+    boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.3)'
+  } : {
+    elevation: 5,
+    shadowColor: 'rgba(0, 0, 0, 0.3)',
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 1,
+    shadowRadius: 8
+  };
+  var handleClick = function handleClick(event) {
+    return event.stopPropagation();
+  };
+  return /*#__PURE__*/React.createElement(Vertical$1, Object.assign({
+    cursor: "default",
+    overflow: "hidden",
+    backgroundColor: "white",
+    width: isFullScreen ? '100%' : 600,
+    height: isFullScreen ? '100%' : 'fit-content',
+    onClick: handleClick
+  }, shadow ? shadow : defaultShadow, ContainerShapes[shape], props), children);
+};
+var ModalHeader = function ModalHeader(_ref3) {
+  var children = _ref3.children,
+    _ref3$buttonColor = _ref3.buttonColor,
+    buttonColor = _ref3$buttonColor === void 0 ? 'theme.primary' : _ref3$buttonColor,
+    _ref3$iconSize = _ref3.iconSize,
+    iconSize = _ref3$iconSize === void 0 ? 'md' : _ref3$iconSize,
+    _ref3$buttonPosition = _ref3.buttonPosition,
+    buttonPosition = _ref3$buttonPosition === void 0 ? 'right' : _ref3$buttonPosition,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$2);
+  var onClose = useModalStore(function (state) {
+    return state.onClose;
+  });
+  var buttonIcon = /*#__PURE__*/React.createElement(Button$1, {
+    onClick: onClose,
+    colorScheme: "transparent",
+    icon: /*#__PURE__*/React.createElement(CloseSvg, {
+      size: HeaderIconSizes[iconSize],
+      color: buttonColor
+    }),
+    padding: 0,
+    margin: 0,
+    filter: "none",
+    isAuto: true
+  });
+  return /*#__PURE__*/React.createElement(Horizontal$1, Object.assign({
+    justifyContent: buttonPosition === 'none' ? 'center' : 'space-between',
+    alignItems: "center",
+    paddingVertical: 15,
+    paddingHorizontal: 20
+  }, props), buttonPosition === 'left' && buttonIcon, children, buttonPosition === 'right' && buttonIcon);
+};
+var ModalBody = function ModalBody(_ref4) {
+  var children = _ref4.children,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$2);
+  var defaultBorder = {
+    borderBottomWidth: 2,
+    borderTopWidth: 2,
+    borderColor: 'rgba(250, 250, 250, 1)',
+    borderStyle: 'solid'
+  };
+  return /*#__PURE__*/React.createElement(View$1, Object.assign({
+    overflowY: "auto",
+    paddingVertical: 15,
+    paddingHorizontal: 20
+  }, defaultBorder, props), children);
+};
+var ModalFooter = function ModalFooter(_ref5) {
+  var children = _ref5.children,
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
+  return /*#__PURE__*/React.createElement(Horizontal$1, Object.assign({
+    marginTop: "auto",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    paddingVertical: 15,
+    paddingHorizontal: 20
+  }, props), children);
+};
+
+/**
+ * It is a custom content overlay that appears on top of the main screen.
+ */
+// eslint-disable-next-line react/prop-types
+var Modal = function Modal(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+};
+Modal.Overlay = ModalOverlay;
+Modal.Container = ModalContainer;
+Modal.Header = ModalHeader;
+Modal.Body = ModalBody;
+Modal.Footer = ModalFooter;
+
+var HeadingSizes = {
+  h1: {
+    fontSize: 96,
+    lineHeight: 112,
+    letterSpacing: -1.5
+  },
+  h2: {
+    fontSize: 60,
+    lineHeight: 71,
+    letterSpacing: -0.5
+  },
+  h3: {
+    fontSize: 48,
+    lineHeight: 57,
+    letterSpacing: 0
+  },
+  h4: {
+    fontSize: 34,
+    lineHeight: 40,
+    letterSpacing: 0.25
+  },
+  h5: {
+    fontSize: 24,
+    lineHeight: 28,
+    letterSpacing: 0
+  },
+  h6: {
+    fontSize: 20,
+    lineHeight: 24,
+    letterSpacing: 0.15
+  }
+};
+
+var _excluded$f = ["children", "heading", "maxLines", "isItalic", "isUnderlined", "isSub", "isSup", "isStriked", "isTruncated", "weight", "size"];
+var TextContent = function TextContent(_ref) {
+  var children = _ref.children,
+    isSub = _ref.isSub,
+    isSup = _ref.isSup;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === 'string' ? /*#__PURE__*/React.createElement(React.Fragment, null, isSub && /*#__PURE__*/React.createElement("sup", null, children), isSup && /*#__PURE__*/React.createElement("sup", null, children), !isSub && !isSup && /*#__PURE__*/React.createElement(React.Fragment, null, children)) : children);
+};
+var TruncateText = function TruncateText(_ref2) {
+  var text = _ref2.text,
+    _ref2$maxLines = _ref2.maxLines,
+    maxLines = _ref2$maxLines === void 0 ? 1 : _ref2$maxLines;
+  var containerRef = useRef(null);
+  var _useState = useState(text),
+    content = _useState[0],
+    setContent = _useState[1];
+  useEffect(function () {
+    var textContent = content;
+    var textNode = containerRef.current;
+    if (textNode) {
+      var contentHeight = textNode.offsetHeight;
+      var comLineHeight = getComputedStyle(textNode).lineHeight;
+      var lineHeight = comLineHeight !== 'normal' ? parseFloat(comLineHeight) : 20;
+      var maxHeight = Math.ceil(lineHeight * maxLines);
+      if (contentHeight > maxHeight) {
+        textContent = textContent.slice(0, -1);
+      } else if (contentHeight === maxHeight) {
+        if (content.length !== text.length) {
+          textContent = textContent.slice(0, -3) + '...';
+        }
+      }
+      setContent(textContent);
+    }
+  }, [maxLines, text, containerRef, content]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef
+  }, content);
+};
+var TextView = function TextView(_ref3) {
+  var children = _ref3.children,
+    heading = _ref3.heading,
+    maxLines = _ref3.maxLines,
+    _ref3$isItalic = _ref3.isItalic,
+    isItalic = _ref3$isItalic === void 0 ? false : _ref3$isItalic,
+    _ref3$isUnderlined = _ref3.isUnderlined,
+    isUnderlined = _ref3$isUnderlined === void 0 ? false : _ref3$isUnderlined,
+    _ref3$isSub = _ref3.isSub,
+    isSub = _ref3$isSub === void 0 ? false : _ref3$isSub,
+    _ref3$isSup = _ref3.isSup,
+    isSup = _ref3$isSup === void 0 ? false : _ref3$isSup,
+    _ref3$isStriked = _ref3.isStriked,
+    isStriked = _ref3$isStriked === void 0 ? false : _ref3$isStriked,
+    _ref3$isTruncated = _ref3.isTruncated,
+    isTruncated = _ref3$isTruncated === void 0 ? false : _ref3$isTruncated,
+    _ref3$weight = _ref3.weight,
+    weight = _ref3$weight === void 0 ? 'normal' : _ref3$weight,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? 'md' : _ref3$size,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded$f);
+  var headingStyles = heading ? HeadingSizes[heading] : {};
+  var noLineBreak = isSub || isSup ? {
+    display: 'inline'
+  } : {};
+  var fontSize = Typography.fontSizes[size];
+  return /*#__PURE__*/React.createElement(Element, Object.assign({
+    role: "text",
+    fontSize: fontSize,
+    lineHeight: Typography.lineHeights[size],
+    fontStyle: isItalic ? 'italic' : 'normal',
+    fontWeight: Typography.fontWeights[weight],
+    textDecoration: isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none'
+  }, noLineBreak, headingStyles, props), isTruncated && maxLines && typeof children === 'string' ? /*#__PURE__*/React.createElement(TruncateText, {
+    text: children,
+    maxLines: maxLines
+  }) : /*#__PURE__*/React.createElement(TextContent, Object.assign({
+    isSub: isSub,
+    isSup: isSup
+  }, props), children));
+};
+
+var TextComponent = function TextComponent(props) {
+  return /*#__PURE__*/React.createElement(TextView, Object.assign({}, props));
+};
+/**
+ * The Text component is a simple component that renders a text string or paragraphs as a DOM element in the UI. It is a <p> tag by default.
+ */
+var Text = TextComponent;
+
+export { Button, Center, Checkbox, CountryPicker, DatePicker, Horizontal, Link, Loading, Modal, Password, Select, Switch, Text, TextArea, TextField, Vertical };
 //# sourceMappingURL=web.esm.js.map