@app-studio/web 0.1.14 → 0.1.16

package/dist/web.esm.js

@@ -1,26 +1,14 @@
 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';
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { View, Element, Typography, useTheme, Input } 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 './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 { Link as Link$1 } from 'react-router-dom';
 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 './store/useModalStore';
 import 'core-js/modules/es6.array.slice.js';
 
@@ -47,6 +35,320 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+var useLinkState = function useLinkState() {
+  var _useState = useState(false),
+    isHovered = _useState[0],
+    setIsHovered = _useState[1];
+  return {
+    isHovered: isHovered,
+    setIsHovered: setIsHovered
+  };
+};
+
+var _excluded = ["children", "wrap"];
+var CenterView = function CenterView(_ref) {
+  var children = _ref.children,
+    wrap = _ref.wrap,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(View, 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$1 = ["size", "color"];
+var ArrowDownSvg = function ArrowDownSvg(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 64 : _ref$size,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  return /*#__PURE__*/React.createElement(Center, {
+    width: size + "px",
+    height: size + "px"
+  }, /*#__PURE__*/React.createElement("svg", Object.assign({
+    viewBox: "0 -4.5 20 20",
+    version: "1.1",
+    fill: "#000000"
+  }, 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("title", null, "arrow_down [#338]"), " ", /*#__PURE__*/React.createElement("desc", null, "Created with Sketch."), /*#__PURE__*/React.createElement("defs", null, " "), /*#__PURE__*/React.createElement("g", {
+    id: "Page-1",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "Dribbble-Light-Preview",
+    transform: "translate(-220.000000, -6684.000000)",
+    fill: "#000000"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "icons",
+    transform: "translate(56.000000, 160.000000)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M164.292308,6524.36583 L164.292308,6524.36583 C163.902564,6524.77071 163.902564,6525.42619 164.292308,6525.83004 L172.555873,6534.39267 C173.33636,6535.20244 174.602528,6535.20244 175.383014,6534.39267 L183.70754,6525.76791 C184.093286,6525.36716 184.098283,6524.71997 183.717533,6524.31405 C183.328789,6523.89985 182.68821,6523.89467 182.29347,6524.30266 L174.676479,6532.19636 C174.285736,6532.60124 173.653152,6532.60124 173.262409,6532.19636 L165.705379,6524.36583 C165.315635,6523.96094 164.683051,6523.96094 164.292308,6524.36583",
+    id: "arrow_down-[#338]"
+  })))))));
+};
+
+var _excluded$2 = ["size", "color"];
+var ArrowUpSvg = function ArrowUpSvg(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 64 : _ref$size,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  return /*#__PURE__*/React.createElement(Center, {
+    width: size + "px",
+    height: size + "px"
+  }, /*#__PURE__*/React.createElement("svg", Object.assign({
+    width: size + "px",
+    height: size + "px",
+    viewBox: "0 -4.5 20 20",
+    version: "1.1",
+    fill: "#000000"
+  }, 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("title", null, "arrow_up [#337]"), " ", /*#__PURE__*/React.createElement("desc", null, "Created with Sketch."), /*#__PURE__*/React.createElement("defs", null, " "), /*#__PURE__*/React.createElement("g", {
+    id: "Page-1",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "Dribbble-Light-Preview",
+    transform: "translate(-260.000000, -6684.000000)",
+    fill: "#000000"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "icons",
+    transform: "translate(56.000000, 160.000000)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M223.707692,6534.63378 L223.707692,6534.63378 C224.097436,6534.22888 224.097436,6533.57338 223.707692,6533.16951 L215.444127,6524.60657 C214.66364,6523.79781 213.397472,6523.79781 212.616986,6524.60657 L204.29246,6533.23165 C203.906714,6533.6324 203.901717,6534.27962 204.282467,6534.68555 C204.671211,6535.10081 205.31179,6535.10495 205.70653,6534.69695 L213.323521,6526.80297 C213.714264,6526.39807 214.346848,6526.39807 214.737591,6526.80297 L222.294621,6534.63378 C222.684365,6535.03868 223.317949,6535.03868 223.707692,6534.63378",
+    id: "arrow_up-[#337]"
+  })))))));
+};
+
+var _excluded$3 = ["size", "color"];
+var CheckSvg = function CheckSvg(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 64 : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'white' : _ref$color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+  return /*#__PURE__*/React.createElement(Center, {
+    width: size + "px",
+    height: size + "px"
+  }, /*#__PURE__*/React.createElement("svg", Object.assign({
+    width: size + "px",
+    height: size + "px",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_bgCarrier",
+    strokeWidth: "0"
+  }), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_tracerCarrier",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "#CCCCCC",
+    strokeWidth: "0.048"
+  }), /*#__PURE__*/React.createElement("g", {
+    id: "SVGRepo_iconCarrier"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M17.0001 9L10 16L7 13",
+    stroke: color,
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }))));
+};
+
+var _excluded$4 = ["size", "color"];
+var CloseSvg = function CloseSvg(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 64 : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'white' : _ref$color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+  return /*#__PURE__*/React.createElement(Center, {
+    width: size + "px",
+    height: size + "px"
+  }, /*#__PURE__*/React.createElement("svg", Object.assign({
+    width: size + "px",
+    height: size + "px",
+    viewBox: "0 0 1024 1024",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "#000000"
+  }, 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", {
+    fill: color,
+    d: "M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"
+  }))));
+};
+
+var _excluded$5 = ["size", "color"];
+var ExternalLinkSvg = function ExternalLinkSvg(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 64 : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'white' : _ref$color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+  return /*#__PURE__*/React.createElement(Center, {
+    width: size + "px",
+    height: size + "px"
+  }, /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: color,
+    width: size + "px",
+    height: size + "px",
+    viewBox: "0 0 50 50",
+    xmlns: "http://www.w3.org/2000/svg",
+    stroke: color
+  }, 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: "M38.288 10.297l1.414 1.415-14.99 14.99-1.414-1.414z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M40 20h-2v-8h-8v-2h10z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M35 38H15c-1.7 0-3-1.3-3-3V15c0-1.7 1.3-3 3-3h11v2H15c-.6 0-1 .4-1 1v20c0 .6.4 1 1 1h20c.6 0 1-.4 1-1V24h2v11c0 1.7-1.3 3-3 3z"
+  }))));
+};
+
+var _excluded$6 = ["size", "color"];
+var IndeterminateSvg = function IndeterminateSvg(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 64 : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'white' : _ref$color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+  return /*#__PURE__*/React.createElement(Center, {
+    width: size + "px",
+    height: size + "px"
+  }, /*#__PURE__*/React.createElement("svg", Object.assign({
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, 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: "M7 12L17 12",
+    stroke: color,
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), ' ')));
+};
+
+var IconSizes = {
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 18,
+  xl: 20,
+  '2xl': 24,
+  '3xl': 30,
+  '4xl': 36,
+  '5xl': 48,
+  '6xl': 64
+};
+
+var _excluded$7 = ["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$7);
+  var handleHover = function handleHover() {
+    if (underline === 'hover') setIsHovered(true);
+  };
+  return /*#__PURE__*/React.createElement(Link$1, {
+    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, {
+    gap: 3,
+    alignItems: "center",
+    wrap: "nowrap"
+  }, children, isExternal && /*#__PURE__*/React.createElement(ExternalLinkSvg, {
+    color: colorScheme,
+    size: IconSizes[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 ButtonSizes = {
   xs: {
     width: 79,
@@ -109,7 +411,7 @@ var ButtonShapes = {
   rounded: 4,
   pillShaped: 24
 };
-var IconSizes = {
+var IconSizes$1 = {
   xs: {
     width: 24,
     height: 24,
@@ -137,7 +439,7 @@ var IconSizes = {
   }
 };
 
-var _excluded = ["icon", "shadow", "children", "ariaLabel", "externalHref", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick"];
+var _excluded$8 = ["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,
@@ -167,7 +469,7 @@ var ButtonView = function ButtonView(_ref) {
     shape = _ref$shape === void 0 ? 'rounded' : _ref$shape,
     _ref$onClick = _ref.onClick,
     onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   var isActive = !(isDisabled || isLoading);
   var defaultNativeProps = {
     disabled: !isActive
@@ -203,7 +505,7 @@ var ButtonView = function ButtonView(_ref) {
     width: isAuto ? 'fit-content' : isFilled ? '100%' : buttonSizeStyles.width
   };
   var changePadding = {
-    padding: isIconRounded ? IconSizes[size].padding : ButtonSizes[size].padding
+    padding: isIconRounded ? IconSizes$1[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({
@@ -220,7 +522,7 @@ var ButtonView = function ButtonView(_ref) {
     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, {
+  }, defaultNativeProps, buttonSizeStyles, buttonVariant, scaleWidth, changePadding, shadow, props), variant === 'link' && externalHref ? /*#__PURE__*/React.createElement(Link, {
     href: externalHref,
     textDecorationColor: colorScheme,
     colorScheme: colorScheme,
@@ -263,6 +565,70 @@ var useCheckboxState = function useCheckboxState(_ref) {
   };
 };
 
+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$9 = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
+var LabelView = function LabelView(_ref) {
+  var children = _ref.children,
+    heading = _ref.heading,
+    _ref$isItalic = _ref.isItalic,
+    isItalic = _ref$isItalic === void 0 ? false : _ref$isItalic,
+    _ref$isUnderlined = _ref.isUnderlined,
+    isUnderlined = _ref$isUnderlined === void 0 ? false : _ref$isUnderlined,
+    _ref$isStriked = _ref.isStriked,
+    isStriked = _ref$isStriked === void 0 ? false : _ref$isStriked,
+    _ref$weight = _ref.weight,
+    weight = _ref$weight === void 0 ? 'normal' : _ref$weight,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'sm' : _ref$size,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+  var headingStyles = heading ? HeadingSizes[heading] : {};
+  return /*#__PURE__*/React.createElement(Element, Object.assign({
+    as: "label",
+    width: "100%",
+    fontSize: size,
+    fontStyle: isItalic ? 'italic' : 'normal',
+    fontWeight: Typography.fontWeights[weight],
+    textDecoration: isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none'
+  }, headingStyles, props), children);
+};
+
+var LabelComponent = function LabelComponent(props) {
+  return /*#__PURE__*/React.createElement(LabelView, Object.assign({}, props));
+};
+var Label = LabelComponent;
+
 var Sizes = {
   xs: {
     height: 8,
@@ -305,7 +671,7 @@ var Sizes = {
     width: 60
   }
 };
-var IconSizes$1 = {
+var IconSizes$2 = {
   xs: 6,
   sm: 12,
   md: 18,
@@ -318,7 +684,7 @@ var IconSizes$1 = {
   '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 _excluded$a = ["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,
@@ -353,7 +719,7 @@ var CheckboxView = function CheckboxView(_ref) {
       checkbox: {},
       label: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
   };
@@ -397,8 +763,8 @@ var CheckboxView = function CheckboxView(_ref) {
     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]
+  }, checkboxStyle.container, props), /*#__PURE__*/React.createElement(Center, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? /*#__PURE__*/React.createElement(IndeterminateSvg, null) : (isChecked || isSelected) && (icon != null ? icon : /*#__PURE__*/React.createElement(CheckSvg, {
+    size: IconSizes$2[size]
   }))), label);
 };
 
@@ -1866,38 +2232,271 @@ var countryList = [
 	}
 ];
 
-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 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 _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, 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 _excluded$c = ["children", "styles", "error"];
+var HelperText = function HelperText(_ref) {
+  var children = _ref.children,
+    _ref$styles = _ref.styles,
+    styles = _ref$styles === void 0 ? {
+      helperText: {}
+    } : _ref$styles,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+  return /*#__PURE__*/React.createElement(Text, Object.assign({
+    size: "xs",
+    marginVertical: 0,
+    marginHorizontal: 0,
+    color: error ? 'theme.error' : 'theme.text.dark'
+  }, styles['helperText'], props), children);
+};
+
+var _excluded$d = ["children", "helperText", "error", "styles"];
+var FieldContainer = function FieldContainer(_ref) {
+  var children = _ref.children,
+    helperText = _ref.helperText,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    styles = _ref.styles,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+  return /*#__PURE__*/React.createElement(Vertical, Object.assign({
+    gap: 5,
+    position: "relative"
+  }, props), children, helperText && /*#__PURE__*/React.createElement(HelperText, Object.assign({
+    error: error
+  }, styles), helperText));
+};
+
+var Shapes = {
+  default: {
+    borderTopLeftRadius: 6,
+    borderTopRightRadius: 6,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0
+  },
+  sharp: {
+    borderRadius: 0
+  },
+  rounded: {
+    borderRadius: 4
+  },
+  pillShaped: {
+    borderRadius: 24
+  }
+};
+var LabelSizes = {
+  xs: 8,
+  sm: 10,
+  md: 12,
+  lg: 14,
+  xl: 16
+};
+var InputVariants = {
+  outline: {
+    borderWidth: 1
+  },
+  default: {
+    borderWidth: 0,
+    borderBottomWidth: 2
+  },
+  unStyled: {
+    border: 'none',
+    backgroundColor: 'transparent'
+  }
+};
+var PadddingWithLabel = {
+  paddingTop: 16,
+  paddingBottom: 0,
+  paddingLeft: 16,
+  paddingRight: 35
+};
+var PaddingWithoutLabel = {
+  paddingVertical: 8,
+  paddingLeft: 16,
+  paddingRight: 35
+};
+
+var _excluded$e = ["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$e);
+  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$f = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "isWithLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "colorScheme", "styles"];
+var FieldContent = function FieldContent(_ref) {
+  var shadow = _ref.shadow,
+    children = _ref.children,
+    _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$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    _ref$isWithLabel = _ref.isWithLabel,
+    isWithLabel = _ref$isWithLabel === void 0 ? false : _ref$isWithLabel,
+    _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$colorScheme = _ref.colorScheme,
+    colorScheme = _ref$colorScheme === void 0 ? 'theme.primary' : _ref$colorScheme,
+    _ref$styles = _ref.styles,
+    styles = _ref$styles === void 0 ? {
+      pickerBox: {}
+    } : _ref$styles,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+  var isInteractive = (isHovered || isFocused) && !isDisabled;
+  var color = error ? 'error' : isInteractive ? colorScheme : 'midgray';
+  return /*#__PURE__*/React.createElement(Horizontal, Object.assign({
+    gap: 10,
+    width: "100%",
+    display: "flex",
+    wrap: "nowrap",
+    borderStyle: "solid",
+    alignItems: "center",
+    borderColor: color,
+    backgroundColor: "trueGray.50",
+    transition: "padding 0.2s ease",
+    justifyContent: "space-between",
+    fontSize: Typography.fontSizes[size],
+    filter: isHovered ? 'brightness(0.97)' : 'brightness(1)',
+    cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer'
+  }, isWithLabel ? PadddingWithLabel : PaddingWithoutLabel, shadow, Shapes[shape], InputVariants[variant], styles['box'], props), children);
 };
 
-var IconSizes$2 = {
+var _excluded$g = ["children"];
+var FieldIcons = function FieldIcons(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+  return /*#__PURE__*/React.createElement(Center, Object.assign({
+    gap: 10,
+    top: "50%",
+    right: 16,
+    zIndex: 500,
+    wrap: "nowrap",
+    position: "absolute",
+    transform: "translateY(-50%)"
+  }, props), children);
+};
+
+var _excluded$h = ["children", "size", "error", "color", "styles"];
+var FieldLabel = function FieldLabel(_ref) {
+  var children = _ref.children,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'theme.primary' : _ref$color,
+    _ref$styles = _ref.styles,
+    styles = _ref$styles === void 0 ? {
+      label: {}
+    } : _ref$styles,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+  return /*#__PURE__*/React.createElement(Label, Object.assign({
+    top: 4,
+    zIndex: 1000,
+    lineHeight: 15,
+    letterSpacing: 0.25,
+    whiteSpace: "noWrap",
+    position: "absolute",
+    color: error ? 'error' : color,
+    fontSize: LabelSizes[size]
+  }, styles['label'], props), children);
+};
+
+var _excluded$i = ["children"];
+var FieldWrapper = function FieldWrapper(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+  return /*#__PURE__*/React.createElement(Vertical, Object.assign({
+    width: "100%"
+  }, props), children);
+};
+
+var IconSizes$3 = {
   xs: 8,
   sm: 10,
   md: 12,
@@ -1905,7 +2504,7 @@ var IconSizes$2 = {
   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 _excluded$j = ["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"
@@ -2045,7 +2644,7 @@ var CountryPickerView = function CountryPickerView(_ref3) {
       helperText: {},
       box: {}
     } : _ref3$styles,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded$2);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded$j);
   var _useTheme = useTheme(),
     getColor = _useTheme.getColor;
   var IconColor = getColor('color.blueGray.700');
@@ -2139,11 +2738,11 @@ var CountryPickerView = function CountryPickerView(_ref3) {
     value: selected,
     onChange: handleChange
   }))), /*#__PURE__*/React.createElement(FieldIcons, null, hide ? /*#__PURE__*/React.createElement(ArrowDownSvg, {
-    size: IconSizes$2[size],
+    size: IconSizes$3[size],
     color: IconColor,
     style: styles['icon']
   }) : /*#__PURE__*/React.createElement(ArrowUpSvg, {
-    size: IconSizes$2[size],
+    size: IconSizes$3[size],
     color: IconColor,
     style: styles['icon']
   }))), !hide && /*#__PURE__*/React.createElement(DropDown, {
@@ -2183,7 +2782,7 @@ var useDatePickerState = function useDatePickerState() {
   };
 };
 
-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 _excluded$k = ["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"
@@ -2231,7 +2830,7 @@ var DatePickerView = function DatePickerView(_ref) {
     setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
     onChange = _ref.onChange,
     onChangeText = _ref.onChangeText,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
   var isWithLabel = !!(isFocused && label);
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
@@ -2266,11 +2865,11 @@ var DatePickerView = function DatePickerView(_ref) {
     color: isDisabled ? 'trueGray.600' : 'blueGray.700',
     cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer'
   }, styles['field']);
-  return /*#__PURE__*/React.createElement(FieldContainer$1, {
+  return /*#__PURE__*/React.createElement(FieldContainer, {
     helperText: helperText,
     error: error,
     styles: styles
-  }, /*#__PURE__*/React.createElement(FieldContent$1, {
+  }, /*#__PURE__*/React.createElement(FieldContent, {
     label: label,
     size: size,
     error: error,
@@ -2288,7 +2887,7 @@ var DatePickerView = function DatePickerView(_ref) {
     colorScheme: colorScheme,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover
-  }, /*#__PURE__*/React.createElement(FieldWrapper$1, null, isWithLabel && /*#__PURE__*/React.createElement(FieldLabel$1, Object.assign({
+  }, /*#__PURE__*/React.createElement(FieldWrapper, null, isWithLabel && /*#__PURE__*/React.createElement(FieldLabel, Object.assign({
     htmlFor: id,
     color: colorScheme,
     error: error
@@ -2324,7 +2923,7 @@ var usePasswordState = function usePasswordState() {
   };
 };
 
-var _excluded$4 = ["name", "visibleIcon", "hiddenIcon", "isDisabled", "isVisible", "setIsVisible"];
+var _excluded$l = ["name", "visibleIcon", "hiddenIcon", "isDisabled", "isVisible", "setIsVisible"];
 var PasswordView = function PasswordView(_ref) {
   var name = _ref.name,
     visibleIcon = _ref.visibleIcon,
@@ -2335,8 +2934,8 @@ var PasswordView = function PasswordView(_ref) {
     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({
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+  return /*#__PURE__*/React.createElement(TextField, Object.assign({
     name: name,
     type: isVisible ? 'text' : 'password',
     rightChild: /*#__PURE__*/React.createElement(View, {
@@ -2395,7 +2994,7 @@ var useItemState = function useItemState() {
   };
 };
 
-var IconSizes$3 = {
+var IconSizes$4 = {
   xs: 8,
   sm: 10,
   md: 12,
@@ -2403,7 +3002,7 @@ var IconSizes$3 = {
   xl: 16
 };
 
-var _excluded$5 = ["isHovered", "setIsHovered", "option", "size", "callback"],
+var _excluded$m = ["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"];
@@ -2415,7 +3014,7 @@ var Item = function Item(_ref) {
     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);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
   var handleOptionClick = function handleOptionClick(option) {
     return callback(option);
   };
@@ -2462,7 +3061,7 @@ var SelectBox = function SelectBox(_ref2) {
     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, {
+  return /*#__PURE__*/React.createElement(Text, 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, {
     gap: 6
   }, selected.map(function (option) {
     return /*#__PURE__*/React.createElement(MultiSelect, {
@@ -2571,7 +3170,7 @@ var MultiSelect = function MultiSelect(_ref5) {
   var handleClick = function handleClick() {
     return removeOption(option);
   };
-  return /*#__PURE__*/React.createElement(Horizontal$1, Object.assign({
+  return /*#__PURE__*/React.createElement(Horizontal, Object.assign({
     gap: 10,
     padding: 6,
     borderRadius: 4,
@@ -2581,12 +3180,12 @@ var MultiSelect = function MultiSelect(_ref5) {
     onClick: function onClick(event) {
       return event.stopPropagation();
     }
-  }, props), /*#__PURE__*/React.createElement(Text$1, {
+  }, props), /*#__PURE__*/React.createElement(Text, {
     size: size
   }, option), /*#__PURE__*/React.createElement(CloseSvg, {
     role: "close-button",
     color: "inherit",
-    size: IconSizes$3[size],
+    size: IconSizes$4[size],
     onClick: handleClick
   }));
 };
@@ -2671,13 +3270,13 @@ var SelectView = function SelectView(_ref6) {
       setSelected(newSelected.length === 0 ? [] : newSelected);
     }
   };
-  return /*#__PURE__*/React.createElement(FieldContainer$1, {
+  return /*#__PURE__*/React.createElement(FieldContainer, {
     role: "SelectBox",
     helperText: helperText,
     error: error,
     styles: styles,
     onClick: isDisabled || isReadOnly ? function () {} : handleClick
-  }, /*#__PURE__*/React.createElement(FieldContent$1, {
+  }, /*#__PURE__*/React.createElement(FieldContent, {
     label: label,
     size: size,
     error: error,
@@ -2695,7 +3294,7 @@ var SelectView = function SelectView(_ref6) {
     colorScheme: colorScheme,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover
-  }, /*#__PURE__*/React.createElement(FieldWrapper$1, null, isWithLabel && /*#__PURE__*/React.createElement(FieldLabel$1, Object.assign({
+  }, /*#__PURE__*/React.createElement(FieldWrapper, null, isWithLabel && /*#__PURE__*/React.createElement(FieldLabel, Object.assign({
     htmlFor: id,
     color: colorScheme,
     error: error
@@ -2716,13 +3315,13 @@ var SelectView = function SelectView(_ref6) {
     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, {
+  })), /*#__PURE__*/React.createElement(FieldIcons, null, !isReadOnly && !isDisabled && /*#__PURE__*/React.createElement(React.Fragment, null, hide ? /*#__PURE__*/React.createElement(ArrowDownSvg, {
     color: "inherit",
-    size: IconSizes$3[size],
+    size: IconSizes$4[size],
     style: styles.icon
-  }) : /*#__PURE__*/React.createElement(ArrowUpSvg$1, {
+  }) : /*#__PURE__*/React.createElement(ArrowUpSvg, {
     color: "inherit",
-    size: IconSizes$3[size],
+    size: IconSizes$4[size],
     style: styles.icon
   })))), !hide && /*#__PURE__*/React.createElement(DropDown$1, {
     size: size,
@@ -2885,7 +3484,7 @@ var SliderPadding = {
   }
 };
 
-var _excluded$6 = ["id", "name", "inActiveChild", "activeChild", "shadow", "size", "colorScheme", "on", "isHovered", "isChecked", "isDisabled", "isReadOnly", "onChange", "onValueChange", "setOn", "setIsHovered", "styles"];
+var _excluded$n = ["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"
@@ -2921,7 +3520,7 @@ var SwitchView = function SwitchView(_ref) {
       slider: {},
       circle: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
   var handleToggle = function handleToggle(event) {
     if (!isReadOnly) {
       setOn(!on);
@@ -2947,7 +3546,7 @@ var SwitchView = function SwitchView(_ref) {
     readOnly: isReadOnly
   }, onValueChange && {
     onValueChange: handleToggle
-  }, props)), /*#__PURE__*/React.createElement(View$1, Object.assign({
+  }, props)), /*#__PURE__*/React.createElement(View, Object.assign({
     display: "flex",
     cursor: "pointer",
     alignItems: "center",
@@ -2956,10 +3555,10 @@ var SwitchView = function SwitchView(_ref) {
     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({
+  }, shadow, SliderPadding[size], SliderSizes[size], styles['slider']), activeChild && on && /*#__PURE__*/React.createElement(View, null, activeChild), /*#__PURE__*/React.createElement(View, Object.assign({
     borderRadius: "50%",
     backgroundColor: "white"
-  }, KnobSizes[size], styles['circle'])), inActiveChild && !on && /*#__PURE__*/React.createElement(View$1, null, inActiveChild)));
+  }, KnobSizes[size], styles['circle'])), inActiveChild && !on && /*#__PURE__*/React.createElement(View, null, inActiveChild)));
 };
 
 var SwitchComponent = function SwitchComponent(props) {
@@ -2997,7 +3596,7 @@ var useTextAreaState = function useTextAreaState(_ref) {
   };
 };
 
-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 _excluded$o = ["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,
@@ -3055,7 +3654,7 @@ var TextAreaView = function TextAreaView(_ref) {
       helperText: {},
       field: {}
     } : _ref$styles,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   var isWithLabel = !!(isFocused && label);
   useMemo(function () {
     setHint(isFocused && !inputValue ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
@@ -3182,7 +3781,7 @@ var useTextFieldState = function useTextFieldState(_ref) {
   };
 };
 
-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 _excluded$p = ["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"
@@ -3243,7 +3842,7 @@ var TextFieldView = function TextFieldView(_ref) {
     onFocus = _ref.onFocus,
     _ref$onBlur = _ref.onBlur,
     onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   var _useTheme = useTheme(),
     getColor = _useTheme.getColor;
   var IconColor = getColor('color.blueGray.700');
@@ -3309,11 +3908,11 @@ var TextFieldView = function TextFieldView(_ref) {
     //for ios and android
     if (typeof document === 'undefined' && onChangeText) onChangeText('');
   };
-  return /*#__PURE__*/React.createElement(FieldContainer$1, {
+  return /*#__PURE__*/React.createElement(FieldContainer, {
     helperText: helperText,
     error: error,
     styles: styles
-  }, /*#__PURE__*/React.createElement(FieldContent$1, {
+  }, /*#__PURE__*/React.createElement(FieldContent, {
     label: label,
     size: size,
     error: error,
@@ -3331,7 +3930,7 @@ var TextFieldView = function TextFieldView(_ref) {
     colorScheme: colorScheme,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover
-  }, leftChild, /*#__PURE__*/React.createElement(FieldWrapper$1, null, isWithLabel && /*#__PURE__*/React.createElement(FieldLabel$1, Object.assign({
+  }, leftChild, /*#__PURE__*/React.createElement(FieldWrapper, null, isWithLabel && /*#__PURE__*/React.createElement(FieldLabel, Object.assign({
     htmlFor: id,
     color: colorScheme,
     error: error
@@ -3350,7 +3949,7 @@ var TextFieldView = function TextFieldView(_ref) {
     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, {
+  }))), (rightChild || isClearable && inputValue) && /*#__PURE__*/React.createElement(FieldIcons, 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
@@ -3366,156 +3965,6 @@ var TextFieldComponent = function TextFieldComponent(props) {
  */
 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,
@@ -3534,7 +3983,7 @@ var DefaultSpeeds = {
   slow: 300
 };
 
-var _excluded$d = ["size", "speed", "color"],
+var _excluded$q = ["size", "speed", "color"],
   _excluded2$1 = ["size", "speed", "color"],
   _excluded3$1 = ["size", "speed", "color"],
   _excluded4$1 = ["size", "children", "textColor", "loaderColor", "type", "speed", "textPosition"];
@@ -3545,7 +3994,7 @@ var DefaultSpinner = function DefaultSpinner(_ref) {
     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);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   var theme = useTheme();
   var colorStyle = theme.getColor(color);
   var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
@@ -3701,7 +4150,7 @@ var LoaderView = function LoaderView(_ref4) {
     dotted: /*#__PURE__*/React.createElement(Dotted, Object.assign({}, style)),
     quarter: /*#__PURE__*/React.createElement(Quarter, Object.assign({}, style))
   };
-  return /*#__PURE__*/React.createElement(Center$1, Object.assign({
+  return /*#__PURE__*/React.createElement(Center, Object.assign({
     gap: 10,
     flexDirection: textPosition === 'top' || textPosition === 'bottom' ? 'column' : 'row'
   }, props), (textPosition === 'left' || textPosition === 'top') && children && /*#__PURE__*/React.createElement(View, {
@@ -3755,7 +4204,7 @@ var HeaderIconSizes = {
   xl: 28
 };
 
-var _excluded$e = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
+var _excluded$r = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
   _excluded2$2 = ["children", "shadow", "isFullScreen", "shape"],
   _excluded3$2 = ["children", "buttonColor", "iconSize", "buttonPosition"],
   _excluded4$2 = ["children"],
@@ -3771,7 +4220,7 @@ var ModalOverlay = function ModalOverlay(_ref) {
     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);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   var setOpen = useModalStore(function (state) {
     return state.setOpen;
   });
@@ -3786,7 +4235,7 @@ var ModalOverlay = function ModalOverlay(_ref) {
   var handleClick = function handleClick() {
     if (!isClosePrevented) onClose();
   };
-  return /*#__PURE__*/React.createElement(Center$1, {
+  return /*#__PURE__*/React.createElement(Center, {
     position: "fixed",
     top: 0,
     left: 0,
@@ -3795,7 +4244,7 @@ var ModalOverlay = function ModalOverlay(_ref) {
     zIndex: 1000,
     onClick: handleClick,
     visibility: isOpen ? 'visible' : 'hidden'
-  }, /*#__PURE__*/React.createElement(View$1, Object.assign({
+  }, /*#__PURE__*/React.createElement(View, Object.assign({
     cursor: "pointer",
     position: "absolute",
     top: 0,
@@ -3832,7 +4281,7 @@ var ModalContainer = function ModalContainer(_ref2) {
   var handleClick = function handleClick(event) {
     return event.stopPropagation();
   };
-  return /*#__PURE__*/React.createElement(Vertical$1, Object.assign({
+  return /*#__PURE__*/React.createElement(Vertical, Object.assign({
     cursor: "default",
     overflow: "hidden",
     backgroundColor: "white",
@@ -3853,7 +4302,7 @@ var ModalHeader = function ModalHeader(_ref3) {
   var onClose = useModalStore(function (state) {
     return state.onClose;
   });
-  var buttonIcon = /*#__PURE__*/React.createElement(Button$1, {
+  var buttonIcon = /*#__PURE__*/React.createElement(Button, {
     onClick: onClose,
     colorScheme: "transparent",
     icon: /*#__PURE__*/React.createElement(CloseSvg, {
@@ -3865,7 +4314,7 @@ var ModalHeader = function ModalHeader(_ref3) {
     filter: "none",
     isAuto: true
   });
-  return /*#__PURE__*/React.createElement(Horizontal$1, Object.assign({
+  return /*#__PURE__*/React.createElement(Horizontal, Object.assign({
     justifyContent: buttonPosition === 'none' ? 'center' : 'space-between',
     alignItems: "center",
     paddingVertical: 15,
@@ -3881,7 +4330,7 @@ var ModalBody = function ModalBody(_ref4) {
     borderColor: 'rgba(250, 250, 250, 1)',
     borderStyle: 'solid'
   };
-  return /*#__PURE__*/React.createElement(View$1, Object.assign({
+  return /*#__PURE__*/React.createElement(View, Object.assign({
     overflowY: "auto",
     paddingVertical: 15,
     paddingHorizontal: 20
@@ -3890,7 +4339,7 @@ var ModalBody = function ModalBody(_ref4) {
 var ModalFooter = function ModalFooter(_ref5) {
   var children = _ref5.children,
     props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
-  return /*#__PURE__*/React.createElement(Horizontal$1, Object.assign({
+  return /*#__PURE__*/React.createElement(Horizontal, Object.assign({
     marginTop: "auto",
     alignItems: "center",
     justifyContent: "flex-end",
@@ -3913,7 +4362,7 @@ Modal.Header = ModalHeader;
 Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
 
-var HeadingSizes = {
+var HeadingSizes$1 = {
   h1: {
     fontSize: 96,
     lineHeight: 112,
@@ -3946,7 +4395,7 @@ var HeadingSizes = {
   }
 };
 
-var _excluded$f = ["children", "heading", "maxLines", "isItalic", "isUnderlined", "isSub", "isSup", "isStriked", "isTruncated", "weight", "size"];
+var _excluded$s = ["children", "heading", "maxLines", "isItalic", "isUnderlined", "isSub", "isSup", "isStriked", "isTruncated", "weight", "size"];
 var TextContent = function TextContent(_ref) {
   var children = _ref.children,
     isSub = _ref.isSub,
@@ -4003,8 +4452,8 @@ var TextView = function TextView(_ref3) {
     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] : {};
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded$s);
+  var headingStyles = heading ? HeadingSizes$1[heading] : {};
   var noLineBreak = isSub || isSup ? {
     display: 'inline'
   } : {};