@app-studio/web 0.3.2 → 0.3.4

package/dist/web.cjs.development.js

@@ -4,19 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-require('core-js/modules/es6.object.assign.js');
 var React = require('react');
 var React__default = _interopDefault(React);
 var appStudio = require('app-studio');
 var reactRouterDom = require('react-router-dom');
-require('core-js/modules/es6.array.map.js');
-require('core-js/modules/es6.array.filter.js');
-require('core-js/modules/es6.string.starts-with.js');
-require('core-js/modules/es6.array.slice.js');
 var format = _interopDefault(require('date-fns/format'));
-require('core-js/modules/es6.string.includes.js');
-require('core-js/modules/es7.array.includes.js');
-var useModalStore = require('src/store/useModalStore');
+var zustand = require('zustand');
 
 var useButtonState = function useButtonState() {
   var _React$useState = React__default.useState(false),
@@ -28,6 +21,20 @@ var useButtonState = function useButtonState() {
   };
 };
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -61,7 +68,7 @@ var HorizontalView = function HorizontalView(_ref) {
     _ref$isReversed = _ref.isReversed,
     isReversed = _ref$isReversed === void 0 ? false : _ref$isReversed,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+  return React__default.createElement(appStudio.View, Object.assign({
     display: "flex",
     flexWrap: wrap,
     flexDirection: isReversed ? 'row-reverse' : 'row',
@@ -73,7 +80,7 @@ var HorizontalView = function HorizontalView(_ref) {
  * Horizontal layout aligns all the elements in a container on the horizontal axis.
  */
 var HorizontalComponent = function HorizontalComponent(props) {
-  return /*#__PURE__*/React__default.createElement(HorizontalView, Object.assign({}, props));
+  return React__default.createElement(HorizontalView, Object.assign({}, props));
 };
 var Horizontal = HorizontalComponent;
 
@@ -82,7 +89,7 @@ var CenterView = function CenterView(_ref) {
   var children = _ref.children,
     wrap = _ref.wrap,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+  return React__default.createElement(appStudio.View, Object.assign({
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
@@ -94,7 +101,7 @@ var CenterView = function CenterView(_ref) {
  * 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__default.createElement(CenterView, Object.assign({}, props));
+  return React__default.createElement(CenterView, Object.assign({}, props));
 };
 var Center = CenterComponent;
 
@@ -103,36 +110,36 @@ var ArrowDownSvg = function ArrowDownSvg(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 64 : _ref$size,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  return /*#__PURE__*/React__default.createElement(Center, {
+  return React__default.createElement(Center, {
     width: size + "px",
     height: size + "px"
-  }, /*#__PURE__*/React__default.createElement("svg", Object.assign({
+  }, React__default.createElement("svg", Object.assign({
     viewBox: "0 -4.5 20 20",
     version: "1.1",
     fill: "#000000"
-  }, props), /*#__PURE__*/React__default.createElement("g", {
+  }, props), React__default.createElement("g", {
     id: "SVGRepo_bgCarrier",
     strokeWidth: "0"
-  }), /*#__PURE__*/React__default.createElement("g", {
+  }), React__default.createElement("g", {
     id: "SVGRepo_tracerCarrier",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }), /*#__PURE__*/React__default.createElement("g", {
+  }), React__default.createElement("g", {
     id: "SVGRepo_iconCarrier"
-  }, /*#__PURE__*/React__default.createElement("title", null, "arrow_down [#338]"), " ", /*#__PURE__*/React__default.createElement("desc", null, "Created with Sketch."), /*#__PURE__*/React__default.createElement("defs", null, " "), /*#__PURE__*/React__default.createElement("g", {
+  }, React__default.createElement("title", null, "arrow_down [#338]"), " ", React__default.createElement("desc", null, "Created with Sketch."), React__default.createElement("defs", null, " "), React__default.createElement("g", {
     id: "Page-1",
     stroke: "none",
     strokeWidth: "1",
     fill: "none",
     fillRule: "evenodd"
-  }, /*#__PURE__*/React__default.createElement("g", {
+  }, React__default.createElement("g", {
     id: "Dribbble-Light-Preview",
     transform: "translate(-220.000000, -6684.000000)",
     fill: "#000000"
-  }, /*#__PURE__*/React__default.createElement("g", {
+  }, React__default.createElement("g", {
     id: "icons",
     transform: "translate(56.000000, 160.000000)"
-  }, /*#__PURE__*/React__default.createElement("path", {
+  }, React__default.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]"
   })))))));
@@ -143,38 +150,38 @@ var ArrowUpSvg = function ArrowUpSvg(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 64 : _ref$size,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  return /*#__PURE__*/React__default.createElement(Center, {
+  return React__default.createElement(Center, {
     width: size + "px",
     height: size + "px"
-  }, /*#__PURE__*/React__default.createElement("svg", Object.assign({
+  }, React__default.createElement("svg", Object.assign({
     width: size + "px",
     height: size + "px",
     viewBox: "0 -4.5 20 20",
     version: "1.1",
     fill: "#000000"
-  }, props), /*#__PURE__*/React__default.createElement("g", {
+  }, props), React__default.createElement("g", {
     id: "SVGRepo_bgCarrier",
     strokeWidth: "0"
-  }), /*#__PURE__*/React__default.createElement("g", {
+  }), React__default.createElement("g", {
     id: "SVGRepo_tracerCarrier",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }), /*#__PURE__*/React__default.createElement("g", {
+  }), React__default.createElement("g", {
     id: "SVGRepo_iconCarrier"
-  }, /*#__PURE__*/React__default.createElement("title", null, "arrow_up [#337]"), " ", /*#__PURE__*/React__default.createElement("desc", null, "Created with Sketch."), /*#__PURE__*/React__default.createElement("defs", null, " "), /*#__PURE__*/React__default.createElement("g", {
+  }, React__default.createElement("title", null, "arrow_up [#337]"), " ", React__default.createElement("desc", null, "Created with Sketch."), React__default.createElement("defs", null, " "), React__default.createElement("g", {
     id: "Page-1",
     stroke: "none",
     strokeWidth: "1",
     fill: "none",
     fillRule: "evenodd"
-  }, /*#__PURE__*/React__default.createElement("g", {
+  }, React__default.createElement("g", {
     id: "Dribbble-Light-Preview",
     transform: "translate(-260.000000, -6684.000000)",
     fill: "#000000"
-  }, /*#__PURE__*/React__default.createElement("g", {
+  }, React__default.createElement("g", {
     id: "icons",
     transform: "translate(56.000000, 160.000000)"
-  }, /*#__PURE__*/React__default.createElement("path", {
+  }, React__default.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]"
   })))))));
@@ -187,27 +194,27 @@ var CheckSvg = function CheckSvg(_ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'white' : _ref$color,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  return /*#__PURE__*/React__default.createElement(Center, {
+  return React__default.createElement(Center, {
     width: size + "px",
     height: size + "px"
-  }, /*#__PURE__*/React__default.createElement("svg", Object.assign({
+  }, React__default.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__default.createElement("g", {
+  }, props), React__default.createElement("g", {
     id: "SVGRepo_bgCarrier",
     strokeWidth: "0"
-  }), /*#__PURE__*/React__default.createElement("g", {
+  }), React__default.createElement("g", {
     id: "SVGRepo_tracerCarrier",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     stroke: "#CCCCCC",
     strokeWidth: "0.048"
-  }), /*#__PURE__*/React__default.createElement("g", {
+  }), React__default.createElement("g", {
     id: "SVGRepo_iconCarrier"
-  }, /*#__PURE__*/React__default.createElement("path", {
+  }, React__default.createElement("path", {
     d: "M17.0001 9L10 16L7 13",
     stroke: color,
     strokeWidth: "1.5",
@@ -223,25 +230,25 @@ var CloseSvg = function CloseSvg(_ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'white' : _ref$color,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-  return /*#__PURE__*/React__default.createElement(Center, {
+  return React__default.createElement(Center, {
     width: size + "px",
     height: size + "px"
-  }, /*#__PURE__*/React__default.createElement("svg", Object.assign({
+  }, React__default.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__default.createElement("g", {
+  }, props), React__default.createElement("g", {
     id: "SVGRepo_bgCarrier",
     strokeWidth: "0"
-  }), /*#__PURE__*/React__default.createElement("g", {
+  }), React__default.createElement("g", {
     id: "SVGRepo_tracerCarrier",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }), /*#__PURE__*/React__default.createElement("g", {
+  }), React__default.createElement("g", {
     id: "SVGRepo_iconCarrier"
-  }, /*#__PURE__*/React__default.createElement("path", {
+  }, React__default.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"
   }))));
@@ -254,30 +261,30 @@ var ExternalLinkSvg = function ExternalLinkSvg(_ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'white' : _ref$color,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-  return /*#__PURE__*/React__default.createElement(Center, {
+  return React__default.createElement(Center, {
     width: size + "px",
     height: size + "px"
-  }, /*#__PURE__*/React__default.createElement("svg", Object.assign({
+  }, React__default.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__default.createElement("g", {
+  }, props), React__default.createElement("g", {
     id: "SVGRepo_bgCarrier",
     strokeWidth: "0"
-  }), /*#__PURE__*/React__default.createElement("g", {
+  }), React__default.createElement("g", {
     id: "SVGRepo_tracerCarrier",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }), /*#__PURE__*/React__default.createElement("g", {
+  }), React__default.createElement("g", {
     id: "SVGRepo_iconCarrier"
-  }, /*#__PURE__*/React__default.createElement("path", {
+  }, React__default.createElement("path", {
     d: "M38.288 10.297l1.414 1.415-14.99 14.99-1.414-1.414z"
-  }), /*#__PURE__*/React__default.createElement("path", {
+  }), React__default.createElement("path", {
     d: "M40 20h-2v-8h-8v-2h10z"
-  }), /*#__PURE__*/React__default.createElement("path", {
+  }), React__default.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"
   }))));
 };
@@ -289,23 +296,23 @@ var IndeterminateSvg = function IndeterminateSvg(_ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'white' : _ref$color,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-  return /*#__PURE__*/React__default.createElement(Center, {
+  return React__default.createElement(Center, {
     width: size + "px",
     height: size + "px"
-  }, /*#__PURE__*/React__default.createElement("svg", Object.assign({
+  }, React__default.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React__default.createElement("g", {
+  }, props), React__default.createElement("g", {
     id: "SVGRepo_bgCarrier",
     strokeWidth: "0"
-  }), /*#__PURE__*/React__default.createElement("g", {
+  }), React__default.createElement("g", {
     id: "SVGRepo_tracerCarrier",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }), /*#__PURE__*/React__default.createElement("g", {
+  }), React__default.createElement("g", {
     id: "SVGRepo_iconCarrier"
-  }, /*#__PURE__*/React__default.createElement("path", {
+  }, React__default.createElement("path", {
     d: "M7 12L17 12",
     stroke: color,
     strokeWidth: "1.5",
@@ -353,19 +360,19 @@ var LinkView = function LinkView(_ref) {
   var handleHover = function handleHover() {
     if (underline === 'hover') setIsHovered(true);
   };
-  return /*#__PURE__*/React__default.createElement(reactRouterDom.Link, {
+  return React__default.createElement(reactRouterDom.Link, {
     to: href,
     target: isExternal ? '_blank' : '_self'
-  }, /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+  }, React__default.createElement(appStudio.Element, Object.assign({
     color: colorScheme,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover,
     textDecoration: isHovered || underline === 'underline' ? 'underline !important' : 'none'
-  }, styles.text, props), /*#__PURE__*/React__default.createElement(Horizontal, {
+  }, styles.text, props), React__default.createElement(Horizontal, {
     gap: 3,
     alignItems: "center",
     wrap: "nowrap"
-  }, children, isExternal && /*#__PURE__*/React__default.createElement(ExternalLinkSvg, {
+  }, children, isExternal && React__default.createElement(ExternalLinkSvg, {
     color: colorScheme,
     size: IconSizes[iconSize],
     style: styles.icon
@@ -374,7 +381,7 @@ var LinkView = function LinkView(_ref) {
 
 var LinkComponent = function LinkComponent(props) {
   var linkStates = useLinkState();
-  return /*#__PURE__*/React__default.createElement(LinkView, Object.assign({}, linkStates, props));
+  return React__default.createElement(LinkView, Object.assign({}, linkStates, props));
 };
 /**
  * Link allows users to navigate from page to page. It have a similar appearance as the hyperlink.
@@ -539,8 +546,8 @@ var ButtonView = function ButtonView(_ref) {
   var changePadding = {
     padding: isIconRounded ? IconSizes$1[size].padding : ButtonSizes[size].padding
   };
-  var content = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, icon && iconPosition === 'left' && !isLoader && icon, children, icon && iconPosition === 'right' && !isLoader && icon);
-  return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+  var content = React__default.createElement(React__default.Fragment, null, icon && iconPosition === 'left' && !isLoader && icon, children, icon && iconPosition === 'right' && !isLoader && icon);
+  return React__default.createElement(appStudio.Element, Object.assign({
     gap: 8,
     as: "button",
     role: "button",
@@ -554,7 +561,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__default.createElement(Link, {
+  }, defaultNativeProps, buttonSizeStyles, buttonVariant, scaleWidth, changePadding, shadow, props), variant === 'link' && externalHref ? React__default.createElement(Link, {
     href: externalHref,
     textDecorationColor: colorScheme,
     colorScheme: colorScheme,
@@ -569,7 +576,7 @@ var ButtonComponent = function ButtonComponent(props) {
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
   };
-  return /*#__PURE__*/React__default.createElement(ButtonView, Object.assign({
+  return React__default.createElement(ButtonView, Object.assign({
     onMouseEnter: handleHover,
     onMouseLeave: handleHover,
     filter: isHovered ? 'brightness(0.85)' : 'brightness(1)'
@@ -646,7 +653,7 @@ var LabelView = function LabelView(_ref) {
     size = _ref$size === void 0 ? 'sm' : _ref$size,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var headingStyles = heading ? HeadingSizes[heading] : {};
-  return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+  return React__default.createElement(appStudio.Element, Object.assign({
     as: "label",
     width: "100%",
     fontSize: size,
@@ -657,7 +664,7 @@ var LabelView = function LabelView(_ref) {
 };
 
 var LabelComponent = function LabelComponent(props) {
-  return /*#__PURE__*/React__default.createElement(LabelView, Object.assign({}, props));
+  return React__default.createElement(LabelView, Object.assign({}, props));
 };
 var Label = LabelComponent;
 
@@ -766,7 +773,7 @@ var CheckboxView = function CheckboxView(_ref) {
     }
   };
   var checkboxStyle = {
-    container: Object.assign({
+    container: _extends({
       gap: 10,
       display: 'flex',
       alignItems: 'center',
@@ -775,7 +782,7 @@ var CheckboxView = function CheckboxView(_ref) {
       color: error ? 'theme.error' : isDisabled ? 'theme.disabled' : 'color.blueGray.700',
       cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'default' : 'pointer'
     }, styles['label']),
-    checkbox: Object.assign({}, isDisabled ? {
+    checkbox: _extends({}, isDisabled ? {
       backgroundColor: 'theme.disabled'
     } : (isChecked || isSelected) && !isIndeterminate || isIndeterminate ? {
       backgroundColor: colorScheme
@@ -788,21 +795,21 @@ var CheckboxView = function CheckboxView(_ref) {
       filter: isHovered ? 'brightness(0.9)' : undefined
     }, Sizes[size], shadow, styles['checkbox'])
   };
-  return /*#__PURE__*/React__default.createElement(Label, Object.assign({
+  return React__default.createElement(Label, Object.assign({
     htmlFor: id,
     as: "div",
     onClick: handleChange,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover,
     size: appStudio.Typography.fontSizes[size]
-  }, checkboxStyle.container, props), /*#__PURE__*/React__default.createElement(Center, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? /*#__PURE__*/React__default.createElement(IndeterminateSvg, null) : (isChecked || isSelected) && (icon != null ? icon : /*#__PURE__*/React__default.createElement(CheckSvg, {
+  }, checkboxStyle.container, props), React__default.createElement(Center, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? React__default.createElement(IndeterminateSvg, null) : (isChecked || isSelected) && (icon != null ? icon : React__default.createElement(CheckSvg, {
     size: IconSizes$2[size]
   }))), label);
 };
 
 var CheckboxComponent = function CheckboxComponent(props) {
   var checkboxStates = useCheckboxState(props);
-  return /*#__PURE__*/React__default.createElement(CheckboxView, Object.assign({}, checkboxStates, props));
+  return React__default.createElement(CheckboxView, Object.assign({}, checkboxStates, props));
 };
 /**
  * Checkbox allows users to select one or more options from a list of choices.
@@ -2305,7 +2312,7 @@ var VerticalView = function VerticalView(_ref) {
     _ref$isReversed = _ref.isReversed,
     isReversed = _ref$isReversed === void 0 ? false : _ref$isReversed,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
-  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+  return React__default.createElement(appStudio.View, Object.assign({
     display: "flex",
     flexWrap: wrap,
     flexDirection: isReversed ? 'column-reverse' : 'column',
@@ -2317,7 +2324,7 @@ var VerticalView = function VerticalView(_ref) {
  * Vertical layout aligns all the elements in a container on the vertical axis.
  */
 var VerticalComponent = function VerticalComponent(props) {
-  return /*#__PURE__*/React__default.createElement(VerticalView, Object.assign({}, props));
+  return React__default.createElement(VerticalView, Object.assign({}, props));
 };
 var Vertical = VerticalComponent;
 
@@ -2359,7 +2366,7 @@ var TextContent = function TextContent(_ref) {
   var children = _ref.children,
     isSub = _ref.isSub,
     isSup = _ref.isSup;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, typeof children === 'string' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isSub && /*#__PURE__*/React__default.createElement("sup", null, children), isSup && /*#__PURE__*/React__default.createElement("sup", null, children), !isSub && !isSup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children)) : children);
+  return React__default.createElement(React__default.Fragment, null, typeof children === 'string' ? React__default.createElement(React__default.Fragment, null, isSub && React__default.createElement("sup", null, children), isSup && React__default.createElement("sup", null, children), !isSub && !isSup && React__default.createElement(React__default.Fragment, null, children)) : children);
 };
 var TruncateText = function TruncateText(_ref2) {
   var text = _ref2.text,
@@ -2387,7 +2394,7 @@ var TruncateText = function TruncateText(_ref2) {
       setContent(textContent);
     }
   }, [maxLines, text, containerRef, content]);
-  return /*#__PURE__*/React__default.createElement("div", {
+  return React__default.createElement("div", {
     ref: containerRef
   }, content);
 };
@@ -2417,24 +2424,24 @@ var TextView = function TextView(_ref3) {
     display: 'inline'
   } : {};
   var fontSize = appStudio.Typography.fontSizes[size];
-  return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+  return React__default.createElement(appStudio.Element, Object.assign({
     role: "text",
     fontSize: fontSize,
     lineHeight: appStudio.Typography.lineHeights[size],
     fontStyle: isItalic ? 'italic' : 'normal',
     fontWeight: appStudio.Typography.fontWeights[weight],
     textDecoration: isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none'
-  }, noLineBreak, headingStyles, props), isTruncated && maxLines && typeof children === 'string' ? /*#__PURE__*/React__default.createElement(TruncateText, {
+  }, noLineBreak, headingStyles, props), isTruncated && maxLines && typeof children === 'string' ? React__default.createElement(TruncateText, {
     text: children,
     maxLines: maxLines
-  }) : /*#__PURE__*/React__default.createElement(TextContent, Object.assign({
+  }) : React__default.createElement(TextContent, Object.assign({
     isSub: isSub,
     isSup: isSup
   }, props), children));
 };
 
 var TextComponent = function TextComponent(props) {
-  return /*#__PURE__*/React__default.createElement(TextView, Object.assign({}, props));
+  return React__default.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.
@@ -2451,7 +2458,7 @@ var HelperText = function HelperText(_ref) {
     _ref$error = _ref.error,
     error = _ref$error === void 0 ? false : _ref$error,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
-  return /*#__PURE__*/React__default.createElement(Text, Object.assign({
+  return React__default.createElement(Text, Object.assign({
     size: "xs",
     marginVertical: 0,
     marginHorizontal: 0,
@@ -2467,10 +2474,10 @@ var FieldContainer = function FieldContainer(_ref) {
     error = _ref$error === void 0 ? false : _ref$error,
     styles = _ref.styles,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
-  return /*#__PURE__*/React__default.createElement(Vertical, Object.assign({
+  return React__default.createElement(Vertical, Object.assign({
     gap: 5,
     position: "relative"
-  }, props), children, helperText && /*#__PURE__*/React__default.createElement(HelperText, Object.assign({
+  }, props), children, helperText && React__default.createElement(HelperText, Object.assign({
     error: error
   }, styles), helperText));
 };
@@ -2555,7 +2562,7 @@ var FieldContent = function FieldContent(_ref) {
     props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   var isInteractive = (isHovered || isFocused) && !isDisabled;
   var color = error ? 'error' : isInteractive ? colorScheme : 'midgray';
-  return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
+  return React__default.createElement(Horizontal, Object.assign({
     gap: 10,
     width: "100%",
     display: "flex",
@@ -2576,7 +2583,7 @@ var _excluded$h = ["children"];
 var FieldIcons = function FieldIcons(_ref) {
   var children = _ref.children,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
-  return /*#__PURE__*/React__default.createElement(Center, Object.assign({
+  return React__default.createElement(Center, Object.assign({
     gap: 10,
     top: "50%",
     right: 16,
@@ -2601,7 +2608,7 @@ var FieldLabel = function FieldLabel(_ref) {
       label: {}
     } : _ref$styles,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
-  return /*#__PURE__*/React__default.createElement(Label, Object.assign({
+  return React__default.createElement(Label, Object.assign({
     top: 4,
     zIndex: 1000,
     lineHeight: 15,
@@ -2617,7 +2624,7 @@ var _excluded$j = ["children"];
 var FieldWrapper = function FieldWrapper(_ref) {
   var children = _ref.children,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
-  return /*#__PURE__*/React__default.createElement(Vertical, Object.assign({
+  return React__default.createElement(Vertical, Object.assign({
     width: "100%"
   }, props), children);
 };
@@ -2632,17 +2639,17 @@ var IconSizes$3 = {
 
 var _excluded$k = ["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__default.createElement(appStudio.Element, Object.assign({
+  return React__default.createElement(appStudio.Element, Object.assign({
     as: "ul"
   }, props));
 };
 var CountrySelector = function CountrySelector(props) {
-  return /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
+  return React__default.createElement(appStudio.Input, Object.assign({
     type: "country"
   }, props));
 };
 var CountryItem = function CountryItem(props) {
-  return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+  return React__default.createElement(appStudio.Element, Object.assign({
     as: "li"
   }, props));
 };
@@ -2666,7 +2673,7 @@ var DropDownItem = function DropDownItem(_ref) {
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
   };
-  return /*#__PURE__*/React__default.createElement(CountryItem, Object.assign({
+  return React__default.createElement(CountryItem, Object.assign({
     margin: 0,
     role: "DropDownItem",
     listStyleType: "none",
@@ -2691,7 +2698,7 @@ var DropDown = function DropDown(_ref2) {
   var handleCallback = function handleCallback(option) {
     return callback(option);
   };
-  return /*#__PURE__*/React__default.createElement(CountryList, Object.assign({
+  return React__default.createElement(CountryList, Object.assign({
     role: "dropDown",
     margin: 0,
     padding: 0,
@@ -2707,7 +2714,7 @@ var DropDown = function DropDown(_ref2) {
     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__default.createElement(DropDownItem, Object.assign({
+    return React__default.createElement(DropDownItem, Object.assign({
       key: option.code,
       size: size,
       option: option.name,
@@ -2807,7 +2814,7 @@ var CountryPickerView = function CountryPickerView(_ref3) {
     if (onChange) onChange(selected); // Call onChange when selectedCountry changes
   }, [onChange, selected]);
   var isWithLabel = !!(isFocused && label);
-  var fieldStyles = Object.assign({
+  var fieldStyles = _extends({
     margin: 0,
     paddingVerical: 8,
     paddingHorizonatl: 0,
@@ -2824,12 +2831,12 @@ var CountryPickerView = function CountryPickerView(_ref3) {
     color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
     cursor: isDisabled ? 'not-allowed' : 'auto'
   }, styles['field']);
-  return /*#__PURE__*/React__default.createElement(FieldContainer, {
+  return React__default.createElement(FieldContainer, {
     helperText: helperText,
     error: error,
     styles: styles,
     onClick: handleClick
-  }, /*#__PURE__*/React__default.createElement(FieldContent, {
+  }, React__default.createElement(FieldContent, {
     label: label,
     size: size,
     error: error,
@@ -2847,11 +2854,11 @@ var CountryPickerView = function CountryPickerView(_ref3) {
     colorScheme: colorScheme,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover
-  }, /*#__PURE__*/React__default.createElement(FieldWrapper, null, isWithLabel && /*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
+  }, React__default.createElement(FieldWrapper, null, isWithLabel && React__default.createElement(FieldLabel, Object.assign({
     htmlFor: id,
     color: colorScheme,
     error: error
-  }, styles), label), /*#__PURE__*/React__default.createElement(CountrySelector, Object.assign({
+  }, styles), label), React__default.createElement(CountrySelector, Object.assign({
     id: id,
     name: name,
     placeholder: placeholder,
@@ -2863,15 +2870,15 @@ var CountryPickerView = function CountryPickerView(_ref3) {
   }, fieldStyles, props, {
     value: selected,
     onChange: handleChange
-  }))), /*#__PURE__*/React__default.createElement(FieldIcons, null, hide ? /*#__PURE__*/React__default.createElement(ArrowDownSvg, {
+  }))), React__default.createElement(FieldIcons, null, hide ? React__default.createElement(ArrowDownSvg, {
     size: IconSizes$3[size],
     color: IconColor,
     style: styles['icon']
-  }) : /*#__PURE__*/React__default.createElement(ArrowUpSvg, {
+  }) : React__default.createElement(ArrowUpSvg, {
     size: IconSizes$3[size],
     color: IconColor,
     style: styles['icon']
-  }))), !hide && /*#__PURE__*/React__default.createElement(DropDown, {
+  }))), !hide && React__default.createElement(DropDown, {
     size: size,
     styles: styles,
     options: newOptions,
@@ -2881,7 +2888,7 @@ var CountryPickerView = function CountryPickerView(_ref3) {
 
 var CountryPickerComponent = function CountryPickerComponent(props) {
   var countryPickerStates = useCountryPickerState(props);
-  return /*#__PURE__*/React__default.createElement(CountryPickerView, Object.assign({}, countryPickerStates, props));
+  return React__default.createElement(CountryPickerView, Object.assign({}, countryPickerStates, props));
 };
 /**
  * Country picker allows users to select a country from a dropdown list or search field.
@@ -2910,7 +2917,7 @@ var useDatePickerState = function useDatePickerState() {
 
 var _excluded$l = ["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__default.createElement(appStudio.Input, Object.assign({
+  return React__default.createElement(appStudio.Input, Object.assign({
     type: "date"
   }, props));
 };
@@ -2973,7 +2980,7 @@ var DatePickerView = function DatePickerView(_ref) {
       if (onChange) onChange(event);
     }
   };
-  var fieldStyles = Object.assign({
+  var fieldStyles = _extends({
     margin: 0,
     paddingVertical: 8,
     paddingHorizontal: 0,
@@ -2991,11 +2998,11 @@ var DatePickerView = function DatePickerView(_ref) {
     color: isDisabled ? 'trueGray.600' : 'blueGray.700',
     cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer'
   }, styles['field']);
-  return /*#__PURE__*/React__default.createElement(FieldContainer, {
+  return React__default.createElement(FieldContainer, {
     helperText: helperText,
     error: error,
     styles: styles
-  }, /*#__PURE__*/React__default.createElement(FieldContent, {
+  }, React__default.createElement(FieldContent, {
     label: label,
     size: size,
     error: error,
@@ -3013,11 +3020,11 @@ var DatePickerView = function DatePickerView(_ref) {
     colorScheme: colorScheme,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover
-  }, /*#__PURE__*/React__default.createElement(FieldWrapper, null, isWithLabel && /*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
+  }, React__default.createElement(FieldWrapper, null, isWithLabel && React__default.createElement(FieldLabel, Object.assign({
     htmlFor: id,
     color: colorScheme,
     error: error
-  }, styles), label), /*#__PURE__*/React__default.createElement(DatePickerContent, Object.assign({
+  }, styles), label), React__default.createElement(DatePickerContent, Object.assign({
     id: id,
     name: name,
     value: date,
@@ -3032,7 +3039,7 @@ var DatePickerView = function DatePickerView(_ref) {
 
 var DatePickerComponent = function DatePickerComponent(props) {
   var datePickerStates = useDatePickerState();
-  return /*#__PURE__*/React__default.createElement(DatePickerView, Object.assign({}, datePickerStates, props));
+  return React__default.createElement(DatePickerView, Object.assign({}, datePickerStates, props));
 };
 /**
  * Date picker allows users to select a date from a calendar view.
@@ -3079,7 +3086,7 @@ var useTextFieldState = function useTextFieldState(_ref) {
 
 var _excluded$m = ["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__default.createElement(appStudio.Input, Object.assign({
+  return React__default.createElement(appStudio.Input, Object.assign({
     type: "text"
   }, props));
 };
@@ -3146,7 +3153,7 @@ var TextFieldView = function TextFieldView(_ref) {
   React.useMemo(function () {
     setHint(isFocused && !inputValue ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
   }, [inputValue, isFocused, label, placeholder]);
-  var fieldStyles = Object.assign({
+  var fieldStyles = _extends({
     margin: 0,
     paddingVertical: 8,
     padddingHorizontal: 0,
@@ -3204,11 +3211,11 @@ var TextFieldView = function TextFieldView(_ref) {
     //for ios and android
     if (typeof document === 'undefined' && onChangeText) onChangeText('');
   };
-  return /*#__PURE__*/React__default.createElement(FieldContainer, {
+  return React__default.createElement(FieldContainer, {
     helperText: helperText,
     error: error,
     styles: styles
-  }, /*#__PURE__*/React__default.createElement(FieldContent, {
+  }, React__default.createElement(FieldContent, {
     label: label,
     size: size,
     error: error,
@@ -3226,11 +3233,11 @@ var TextFieldView = function TextFieldView(_ref) {
     colorScheme: colorScheme,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover
-  }, leftChild, /*#__PURE__*/React__default.createElement(FieldWrapper, null, isWithLabel && /*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
+  }, leftChild, React__default.createElement(FieldWrapper, null, isWithLabel && React__default.createElement(FieldLabel, Object.assign({
     htmlFor: id,
     color: colorScheme,
     error: error
-  }, styles), label), /*#__PURE__*/React__default.createElement(TextFieldInput, Object.assign({
+  }, styles), label), React__default.createElement(TextFieldInput, Object.assign({
     id: id,
     name: name,
     value: inputValue,
@@ -3245,7 +3252,7 @@ var TextFieldView = function TextFieldView(_ref) {
     onChange: handleChange
   }, onChangeText && {
     onChangeText: handleChange
-  }))), (rightChild || isClearable && inputValue) && /*#__PURE__*/React__default.createElement(FieldIcons, null, rightChild && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, rightChild), isClearable && inputValue && !isReadOnly && !isDisabled && /*#__PURE__*/React__default.createElement(CloseSvg, {
+  }))), (rightChild || isClearable && inputValue) && React__default.createElement(FieldIcons, null, rightChild && React__default.createElement(React__default.Fragment, null, rightChild), isClearable && inputValue && !isReadOnly && !isDisabled && React__default.createElement(CloseSvg, {
     size: appStudio.Typography.fontSizes[size],
     color: IconColor,
     onClick: handleClear
@@ -3254,7 +3261,7 @@ var TextFieldView = function TextFieldView(_ref) {
 
 var TextFieldComponent = function TextFieldComponent(props) {
   var textFieldStates = useTextFieldState(props);
-  return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, textFieldStates, props));
+  return React__default.createElement(TextFieldView, Object.assign({}, textFieldStates, props));
 };
 /**
  * TextField is used to capture text data from users.
@@ -3273,10 +3280,10 @@ var PasswordView = function PasswordView(_ref) {
     _ref$setIsVisible = _ref.setIsVisible,
     setIsVisible = _ref$setIsVisible === void 0 ? function () {} : _ref$setIsVisible,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
-  return /*#__PURE__*/React__default.createElement(TextField, Object.assign({
+  return React__default.createElement(TextField, Object.assign({
     name: name,
     type: isVisible ? 'text' : 'password',
-    rightChild: /*#__PURE__*/React__default.createElement(appStudio.View, {
+    rightChild: React__default.createElement(appStudio.View, {
       onClick: function onClick() {
         if (!isDisabled) setIsVisible(!isVisible);
       }
@@ -3287,7 +3294,7 @@ var PasswordView = function PasswordView(_ref) {
 
 var PasswordComponent = function PasswordComponent(props) {
   var passwordState = usePasswordState();
-  return /*#__PURE__*/React__default.createElement(PasswordView, Object.assign({}, passwordState, props));
+  return React__default.createElement(PasswordView, Object.assign({}, passwordState, props));
 };
 /**
  * To allow users to securely enter sensitive information
@@ -3359,7 +3366,7 @@ var Item = function Item(_ref) {
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
   };
-  return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+  return React__default.createElement(appStudio.Element, Object.assign({
     as: "li",
     margin: 0,
     paddingVertical: 8,
@@ -3387,7 +3394,7 @@ var SelectBox = function SelectBox(_ref2) {
     placeholder = _ref2.placeholder,
     _ref2$removeOption = _ref2.removeOption,
     removeOption = _ref2$removeOption === void 0 ? function () {} : _ref2$removeOption;
-  var fieldStyles = Object.assign({
+  var fieldStyles = _extends({
     margin: 0,
     width: '95%',
     heigth: '100%',
@@ -3399,10 +3406,10 @@ var SelectBox = function SelectBox(_ref2) {
     color: isDisabled ? 'trueGray.600' : 'blueGray.700',
     cursor: isDisabled ? 'not-allowed' : 'auto'
   }, styles['field'], styles['text']);
-  return /*#__PURE__*/React__default.createElement(Text, Object.assign({}, fieldStyles), (selected === '' || selected && selected.length === 0) && !!placeholder ? placeholder : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, typeof selected === 'string' ? selected : selected && selected.length > 0 && /*#__PURE__*/React__default.createElement(Horizontal, {
+  return React__default.createElement(Text, Object.assign({}, fieldStyles), (selected === '' || selected && selected.length === 0) && !!placeholder ? placeholder : React__default.createElement(React__default.Fragment, null, typeof selected === 'string' ? selected : selected && selected.length > 0 && React__default.createElement(Horizontal, {
     gap: 6
   }, selected.map(function (option) {
-    return /*#__PURE__*/React__default.createElement(MultiSelect, {
+    return React__default.createElement(MultiSelect, {
       key: option,
       option: option,
       removeOption: removeOption
@@ -3426,7 +3433,7 @@ var HiddenSelect = function HiddenSelect(_ref3) {
   var handleChange = function handleChange(event) {
     if (onChange) onChange(event);
   };
-  return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+  return React__default.createElement(appStudio.Element, Object.assign({
     id: id,
     name: name,
     as: "select",
@@ -3440,7 +3447,7 @@ var HiddenSelect = function HiddenSelect(_ref3) {
     onChange: handleChange,
     multiple: isMulti
   }, props), options.map(function (option) {
-    return /*#__PURE__*/React__default.createElement("option", {
+    return React__default.createElement("option", {
       key: option,
       value: option
     }, option);
@@ -3471,7 +3478,7 @@ var DropDown$1 = function DropDown(_ref4) {
     shadowOpacity: 1,
     shadowRadius: 1
   };
-  return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+  return React__default.createElement(appStudio.Element, Object.assign({
     as: "ul",
     role: "dropdown",
     top: "100%",
@@ -3490,7 +3497,7 @@ var DropDown$1 = function DropDown(_ref4) {
     backgroundColor: "white",
     justifyContent: "space-evenly"
   }, shadow, styles['dropDown']), options.map(function (option) {
-    return /*#__PURE__*/React__default.createElement(Item, Object.assign({
+    return React__default.createElement(Item, Object.assign({
       key: option,
       size: size,
       option: option,
@@ -3508,7 +3515,7 @@ var MultiSelect = function MultiSelect(_ref5) {
   var handleClick = function handleClick() {
     return removeOption(option);
   };
-  return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
+  return React__default.createElement(Horizontal, Object.assign({
     gap: 10,
     padding: 6,
     borderRadius: 4,
@@ -3518,9 +3525,9 @@ var MultiSelect = function MultiSelect(_ref5) {
     onClick: function onClick(event) {
       return event.stopPropagation();
     }
-  }, props), /*#__PURE__*/React__default.createElement(Text, {
+  }, props), React__default.createElement(Text, {
     size: size
-  }, option), /*#__PURE__*/React__default.createElement(CloseSvg, {
+  }, option), React__default.createElement(CloseSvg, {
     role: "close-button",
     color: "inherit",
     size: IconSizes$4[size],
@@ -3608,13 +3615,13 @@ var SelectView = function SelectView(_ref6) {
       setSelected(newSelected.length === 0 ? [] : newSelected);
     }
   };
-  return /*#__PURE__*/React__default.createElement(FieldContainer, {
+  return React__default.createElement(FieldContainer, {
     role: "SelectBox",
     helperText: helperText,
     error: error,
     styles: styles,
     onClick: isDisabled || isReadOnly ? function () {} : handleClick
-  }, /*#__PURE__*/React__default.createElement(FieldContent, {
+  }, React__default.createElement(FieldContent, {
     label: label,
     size: size,
     error: error,
@@ -3632,11 +3639,11 @@ var SelectView = function SelectView(_ref6) {
     colorScheme: colorScheme,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover
-  }, /*#__PURE__*/React__default.createElement(FieldWrapper, null, isWithLabel && /*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
+  }, React__default.createElement(FieldWrapper, null, isWithLabel && React__default.createElement(FieldLabel, Object.assign({
     htmlFor: id,
     color: colorScheme,
     error: error
-  }, styles), label), /*#__PURE__*/React__default.createElement(HiddenSelect, Object.assign({
+  }, styles), label), React__default.createElement(HiddenSelect, Object.assign({
     id: id,
     name: name,
     options: options,
@@ -3646,22 +3653,22 @@ var SelectView = function SelectView(_ref6) {
     isReadOnly: isReadOnly,
     isMulti: isMulti,
     onFocus: handleFocus
-  }, props)), /*#__PURE__*/React__default.createElement(SelectBox, {
+  }, props)), React__default.createElement(SelectBox, {
     size: size,
     styles: styles,
     selected: selected,
     isDisabled: isDisabled,
     placeholder: placeholder,
     removeOption: handleRemoveOption
-  })), /*#__PURE__*/React__default.createElement(FieldIcons, null, !isReadOnly && !isDisabled && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, hide ? /*#__PURE__*/React__default.createElement(ArrowDownSvg, {
+  })), React__default.createElement(FieldIcons, null, !isReadOnly && !isDisabled && React__default.createElement(React__default.Fragment, null, hide ? React__default.createElement(ArrowDownSvg, {
     color: "inherit",
     size: IconSizes$4[size],
     style: styles.icon
-  }) : /*#__PURE__*/React__default.createElement(ArrowUpSvg, {
+  }) : React__default.createElement(ArrowUpSvg, {
     color: "inherit",
     size: IconSizes$4[size],
     style: styles.icon
-  })))), !hide && /*#__PURE__*/React__default.createElement(DropDown$1, {
+  })))), !hide && React__default.createElement(DropDown$1, {
     size: size,
     styles: styles,
     options: options,
@@ -3671,7 +3678,7 @@ var SelectView = function SelectView(_ref6) {
 
 var SelectComponent = function SelectComponent(props) {
   var selectStates = useSelectState(props);
-  return /*#__PURE__*/React__default.createElement(SelectView, Object.assign({}, selectStates, props));
+  return React__default.createElement(SelectView, Object.assign({}, selectStates, props));
 };
 /**
  * Select provides a dropdown list of options for the user to choose from.
@@ -3824,7 +3831,7 @@ var SliderPadding = {
 
 var _excluded$p = ["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__default.createElement(appStudio.Input, Object.assign({
+  return React__default.createElement(appStudio.Input, Object.assign({
     type: "checkbox"
   }, props));
 };
@@ -3868,11 +3875,11 @@ var SwitchView = function SwitchView(_ref) {
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
   };
-  return /*#__PURE__*/React__default.createElement(Label, {
+  return React__default.createElement(Label, {
     htmlFor: id,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover
-  }, /*#__PURE__*/React__default.createElement(SwitchContent, Object.assign({
+  }, React__default.createElement(SwitchContent, Object.assign({
     id: id,
     name: name,
     opacity: 0,
@@ -3884,7 +3891,7 @@ var SwitchView = function SwitchView(_ref) {
     readOnly: isReadOnly
   }, onValueChange && {
     onValueChange: handleToggle
-  }, props)), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+  }, props)), React__default.createElement(appStudio.View, Object.assign({
     display: "flex",
     cursor: "pointer",
     alignItems: "center",
@@ -3893,15 +3900,15 @@ 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__default.createElement(appStudio.View, null, activeChild), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+  }, shadow, SliderPadding[size], SliderSizes[size], styles['slider']), activeChild && on && React__default.createElement(appStudio.View, null, activeChild), React__default.createElement(appStudio.View, Object.assign({
     borderRadius: "50%",
     backgroundColor: "white"
-  }, KnobSizes[size], styles['circle'])), inActiveChild && !on && /*#__PURE__*/React__default.createElement(appStudio.View, null, inActiveChild)));
+  }, KnobSizes[size], styles['circle'])), inActiveChild && !on && React__default.createElement(appStudio.View, null, inActiveChild)));
 };
 
 var SwitchComponent = function SwitchComponent(props) {
   var switchStates = useSwitchState(props);
-  return /*#__PURE__*/React__default.createElement(SwitchView, Object.assign({}, switchStates, props));
+  return React__default.createElement(SwitchView, Object.assign({}, switchStates, props));
 };
 var Switch = SwitchComponent;
 
@@ -3997,7 +4004,7 @@ var TextAreaView = function TextAreaView(_ref) {
   React.useMemo(function () {
     setHint(isFocused && !inputValue ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
   }, [inputValue, isFocused, label, placeholder]);
-  var fieldStyles = Object.assign({
+  var fieldStyles = _extends({
     margin: 0,
     paddingVertical: 8,
     paddingHorizontal: 0,
@@ -4035,11 +4042,11 @@ var TextAreaView = function TextAreaView(_ref) {
       if (onChange) onChange(event);
     }
   };
-  return /*#__PURE__*/React__default.createElement(FieldContainer, {
+  return React__default.createElement(FieldContainer, {
     helperText: helperText,
     error: error,
     styles: styles
-  }, /*#__PURE__*/React__default.createElement(FieldContent, {
+  }, React__default.createElement(FieldContent, {
     label: label,
     size: size,
     error: error,
@@ -4057,11 +4064,11 @@ var TextAreaView = function TextAreaView(_ref) {
     colorScheme: colorScheme,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover
-  }, /*#__PURE__*/React__default.createElement(FieldWrapper, null, isWithLabel && /*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
+  }, React__default.createElement(FieldWrapper, null, isWithLabel && React__default.createElement(FieldLabel, Object.assign({
     htmlFor: id,
     color: colorScheme,
     error: error
-  }, styles), label), /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+  }, styles), label), React__default.createElement(appStudio.Element, Object.assign({
     as: "textarea",
     id: id,
     name: name,
@@ -4084,7 +4091,7 @@ var TextAreaView = function TextAreaView(_ref) {
 
 var TextAreaComponent = function TextAreaComponent(props) {
   var textAreaState = useTextAreaState(props);
-  return /*#__PURE__*/React__default.createElement(TextAreaView, Object.assign({}, textAreaState, props));
+  return React__default.createElement(TextAreaView, Object.assign({}, textAreaState, props));
 };
 /**
  * Text Area is an component used to create a multi-line input field.
@@ -4137,7 +4144,7 @@ var DefaultSpinner = function DefaultSpinner(_ref) {
       return clearInterval(intervalId);
     };
   }, [speed]);
-  return /*#__PURE__*/React__default.createElement("svg", Object.assign({
+  return React__default.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     width: sizeStyle + "px",
     height: sizeStyle + "px",
@@ -4150,16 +4157,16 @@ var DefaultSpinner = function DefaultSpinner(_ref) {
     style: {
       transform: "rotate(" + angle + "deg)"
     }
-  }, props), /*#__PURE__*/React__default.createElement("g", {
+  }, props), React__default.createElement("g", {
     id: "SVGRepo_bgCarrier",
     strokeWidth: "0"
-  }), /*#__PURE__*/React__default.createElement("g", {
+  }), React__default.createElement("g", {
     id: "SVGRepo_tracerCarrier",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }), /*#__PURE__*/React__default.createElement("g", {
+  }), React__default.createElement("g", {
     id: "SVGRepo_iconCarrier"
-  }, /*#__PURE__*/React__default.createElement("path", {
+  }, React__default.createElement("path", {
     d: "M21 12a9 9 0 11-6.219-8.56"
   })));
 };
@@ -4187,7 +4194,7 @@ var Dotted = function Dotted(_ref2) {
       return clearInterval(intervalId);
     };
   }, [speed]);
-  return /*#__PURE__*/React__default.createElement("svg", Object.assign({
+  return React__default.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 50 50",
     width: sizeStyle + "px",
@@ -4195,17 +4202,17 @@ var Dotted = function Dotted(_ref2) {
     style: {
       transform: "rotate(" + angle + "deg)"
     }
-  }, props), /*#__PURE__*/React__default.createElement("circle", {
+  }, props), React__default.createElement("circle", {
     cx: "10",
     cy: "25",
     r: "4",
     fill: colorStyle
-  }), /*#__PURE__*/React__default.createElement("circle", {
+  }), React__default.createElement("circle", {
     cx: "25",
     cy: "25",
     r: "4",
     fill: colorStyle
-  }), /*#__PURE__*/React__default.createElement("circle", {
+  }), React__default.createElement("circle", {
     cx: "40",
     cy: "25",
     r: "4",
@@ -4236,7 +4243,7 @@ var Quarter = function Quarter(_ref3) {
       return clearInterval(intervalId);
     };
   }, [speed]);
-  return /*#__PURE__*/React__default.createElement("svg", Object.assign({
+  return React__default.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 50 50",
     width: sizeStyle + "px",
@@ -4244,7 +4251,7 @@ var Quarter = function Quarter(_ref3) {
     style: {
       transform: "rotate(" + angle + "deg)"
     }
-  }, props), /*#__PURE__*/React__default.createElement("circle", {
+  }, props), React__default.createElement("circle", {
     cx: "25",
     cy: "25",
     r: "20",
@@ -4272,28 +4279,56 @@ var LoaderView = function LoaderView(_ref4) {
     color: loaderColor
   };
   var variants = {
-    default: /*#__PURE__*/React__default.createElement(DefaultSpinner, Object.assign({}, style)),
-    dotted: /*#__PURE__*/React__default.createElement(Dotted, Object.assign({}, style)),
-    quarter: /*#__PURE__*/React__default.createElement(Quarter, Object.assign({}, style))
+    default: React__default.createElement(DefaultSpinner, Object.assign({}, style)),
+    dotted: React__default.createElement(Dotted, Object.assign({}, style)),
+    quarter: React__default.createElement(Quarter, Object.assign({}, style))
   };
-  return /*#__PURE__*/React__default.createElement(Center, Object.assign({
+  return React__default.createElement(Center, Object.assign({
     gap: 10,
     flexDirection: textPosition === 'top' || textPosition === 'bottom' ? 'column' : 'row'
-  }, props), (textPosition === 'left' || textPosition === 'top') && children && /*#__PURE__*/React__default.createElement(appStudio.View, {
+  }, props), (textPosition === 'left' || textPosition === 'top') && children && React__default.createElement(appStudio.View, {
     color: textColor
-  }, children), variants[type], (textPosition === 'right' || textPosition === 'bottom') && children && /*#__PURE__*/React__default.createElement(appStudio.View, {
+  }, children), variants[type], (textPosition === 'right' || textPosition === 'bottom') && children && React__default.createElement(appStudio.View, {
     color: textColor
   }, children));
 };
 
 var LoaderComponent = function LoaderComponent(props) {
-  return /*#__PURE__*/React__default.createElement(LoaderView, Object.assign({}, props));
+  return React__default.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 Loader = LoaderComponent;
 
+var useModalStore = /*#__PURE__*/zustand.create(function (set) {
+  return {
+    isOpen: false,
+    onClose: function onClose() {},
+    toggleModal: function toggleModal() {
+      return set(function (state) {
+        return {
+          isOpen: !state.isOpen
+        };
+      });
+    },
+    setOpen: function setOpen(isOpen) {
+      return set(function () {
+        return {
+          isOpen: isOpen
+        };
+      });
+    },
+    setOnClose: function setOnClose(onClose) {
+      return set(function () {
+        return {
+          onClose: onClose
+        };
+      });
+    }
+  };
+});
+
 var ContainerShapes = {
   sharp: {
     borderRadius: 0
@@ -4347,10 +4382,10 @@ var ModalOverlay = function ModalOverlay(_ref) {
     _ref$position = _ref.position,
     position = _ref$position === void 0 ? 'center' : _ref$position,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
-  var setOpen = useModalStore.useModalStore(function (state) {
+  var setOpen = useModalStore(function (state) {
     return state.setOpen;
   });
-  var setOnClose = useModalStore.useModalStore(function (state) {
+  var setOnClose = useModalStore(function (state) {
     return state.setOnClose;
   });
   React.useEffect(function () {
@@ -4361,7 +4396,7 @@ var ModalOverlay = function ModalOverlay(_ref) {
   var handleClick = function handleClick() {
     if (!isClosePrevented) onClose();
   };
-  return /*#__PURE__*/React__default.createElement(Center, {
+  return React__default.createElement(Center, {
     position: "fixed",
     top: 0,
     left: 0,
@@ -4370,7 +4405,7 @@ var ModalOverlay = function ModalOverlay(_ref) {
     zIndex: 1000,
     onClick: handleClick,
     visibility: isOpen ? 'visible' : 'hidden'
-  }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+  }, React__default.createElement(appStudio.View, Object.assign({
     cursor: "pointer",
     position: "absolute",
     top: 0,
@@ -4407,7 +4442,7 @@ var ModalContainer = function ModalContainer(_ref2) {
   var handleClick = function handleClick(event) {
     return event.stopPropagation();
   };
-  return /*#__PURE__*/React__default.createElement(Vertical, Object.assign({
+  return React__default.createElement(Vertical, Object.assign({
     cursor: "default",
     overflow: "hidden",
     backgroundColor: "white",
@@ -4425,13 +4460,13 @@ var ModalHeader = function ModalHeader(_ref3) {
     _ref3$buttonPosition = _ref3.buttonPosition,
     buttonPosition = _ref3$buttonPosition === void 0 ? 'right' : _ref3$buttonPosition,
     props = _objectWithoutPropertiesLoose(_ref3, _excluded3$2);
-  var onClose = useModalStore.useModalStore(function (state) {
+  var onClose = useModalStore(function (state) {
     return state.onClose;
   });
-  var buttonIcon = /*#__PURE__*/React__default.createElement(Button, {
+  var buttonIcon = React__default.createElement(Button, {
     onClick: onClose,
     colorScheme: "transparent",
-    icon: /*#__PURE__*/React__default.createElement(CloseSvg, {
+    icon: React__default.createElement(CloseSvg, {
       size: HeaderIconSizes[iconSize],
       color: buttonColor
     }),
@@ -4440,7 +4475,7 @@ var ModalHeader = function ModalHeader(_ref3) {
     filter: "none",
     isAuto: true
   });
-  return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
+  return React__default.createElement(Horizontal, Object.assign({
     justifyContent: buttonPosition === 'none' ? 'center' : 'space-between',
     alignItems: "center",
     paddingVertical: 15,
@@ -4456,7 +4491,7 @@ var ModalBody = function ModalBody(_ref4) {
     borderColor: 'rgba(250, 250, 250, 1)',
     borderStyle: 'solid'
   };
-  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+  return React__default.createElement(appStudio.View, Object.assign({
     overflowY: "auto",
     paddingVertical: 15,
     paddingHorizontal: 20
@@ -4465,7 +4500,7 @@ var ModalBody = function ModalBody(_ref4) {
 var ModalFooter = function ModalFooter(_ref5) {
   var children = _ref5.children,
     props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
-  return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
+  return React__default.createElement(Horizontal, Object.assign({
     marginTop: "auto",
     alignItems: "center",
     justifyContent: "flex-end",
@@ -4480,7 +4515,7 @@ var ModalFooter = function ModalFooter(_ref5) {
 // eslint-disable-next-line react/prop-types
 var Modal = function Modal(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
+  return React__default.createElement(React__default.Fragment, null, children);
 };
 Modal.Overlay = ModalOverlay;
 Modal.Container = ModalContainer;