@app-studio/web 0.7.17 → 0.8.0

package/dist/web.esm.js

@@ -1,8 +1,6 @@
 import React, { useRef, useState, useEffect, useCallback, useMemo, createContext, useContext, Fragment } from 'react';
 import { View as View$1, Element, Typography, Image, useTheme, Input, Form } from 'app-studio';
 import { Link as Link$1 } from 'react-router-dom';
-import { Horizontal as Horizontal$1 } from 'src/components/Layout/Horizontal/Horizontal';
-import { Vertical as Vertical$1 } from 'src/components/Layout/Vertical/Vertical';
 import format from 'date-fns/format';
 import { useFormikContext } from 'formik';
 import { create } from 'zustand';
@@ -714,7 +712,7 @@ var AlertView = function AlertView(_ref) {
     borderWidth: 1,
     borderStyle: "solid",
     padding: 16,
-    wrap: "nowrap",
+    flexWrap: "nowrap",
     borderColor: Themes[variant].container.border
   }, styles == null ? void 0 : styles.container), React.createElement(View, {
     alignSelf: 'center'
@@ -1077,7 +1075,7 @@ var LinkView = function LinkView(_ref) {
   }, styles.text, props), React.createElement(Horizontal, {
     gap: 3,
     alignItems: "center",
-    wrap: "nowrap"
+    flexWrap: "nowrap"
   }, children, isExternal && React.createElement(ExternalLinkSvg, {
     size: IconSizes[iconSize],
     style: styles.icon
@@ -1442,6 +1440,11 @@ var ButtonView = function ButtonView(_ref) {
     _ref$setIsHovered = _ref.setIsHovered,
     setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+  console.log({
+    button: props,
+    size: size,
+    isDisabled: isDisabled
+  });
   var _useTheme = useTheme(),
     getColor = _useTheme.getColor;
   var handleHover = function handleHover() {
@@ -1745,7 +1748,7 @@ var FieldContent = function FieldContent(_ref) {
     gap: 10,
     width: "100%",
     display: "flex",
-    wrap: "nowrap",
+    flexWrap: "nowrap",
     borderStyle: "solid",
     alignItems: "center",
     borderColor: color,
@@ -1767,7 +1770,7 @@ var FieldIcons = function FieldIcons(_ref) {
     gap: 10,
     right: 16,
     zIndex: 500,
-    wrap: "nowrap",
+    flexWrap: "nowrap",
     position: "absolute"
   }, props), children);
 };
@@ -3045,9 +3048,9 @@ var CheckboxView = function CheckboxView(_ref) {
     onMouseEnter: handleHover,
     onMouseLeave: handleHover,
     size: Typography.fontSizes[size]
-  }, checkboxStyle.container, props), React.createElement(Vertical$1, {
+  }, checkboxStyle.container, props), React.createElement(Vertical, {
     gap: 8
-  }, React.createElement(Horizontal$1, {
+  }, React.createElement(Horizontal, {
     gap: 10,
     alignItems: "center"
   }, labelPosition === 'left' && label && React.createElement(Text, Object.assign({
@@ -4566,8 +4569,11 @@ var IconSizes$4 = {
   xl: 16
 };
 
-var _excluded$w = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "colorScheme", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "styles"];
-var CountryList = function CountryList(props) {
+var _excluded$w = ["size"],
+  _excluded2$3 = ["size"],
+  _excluded3$2 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "colorScheme", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "styles"];
+var CountryList = function CountryList(_ref) {
+  var props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
   return React.createElement(Element, Object.assign({
     as: "ul"
   }, props));
@@ -4577,21 +4583,22 @@ var CountrySelector = function CountrySelector(props) {
     type: "country"
   }, props));
 };
-var CountryItem = function CountryItem(props) {
+var CountryItem = function CountryItem(_ref2) {
+  var props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
   return React.createElement(Element, Object.assign({
     as: "li"
   }, props));
 };
-var DropDownItem = function DropDownItem(_ref) {
-  var option = _ref.option,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'md' : _ref$size,
-    _ref$callback = _ref.callback,
-    callback = _ref$callback === void 0 ? function () {} : _ref$callback,
-    _ref$styles = _ref.styles,
-    styles = _ref$styles === void 0 ? {
+var DropDownItem = function DropDownItem(_ref3) {
+  var option = _ref3.option,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? 'md' : _ref3$size,
+    _ref3$callback = _ref3.callback,
+    callback = _ref3$callback === void 0 ? function () {} : _ref3$callback,
+    _ref3$styles = _ref3.styles,
+    styles = _ref3$styles === void 0 ? {
       text: {}
-    } : _ref$styles;
+    } : _ref3$styles;
   var _useState = useState(false),
     isHovered = _useState[0],
     setIsHovered = _useState[1];
@@ -4615,15 +4622,15 @@ var DropDownItem = function DropDownItem(_ref) {
     backgroundColor: isHovered ? 'trueGray.100' : 'transparent'
   }, styles['text']), option);
 };
-var DropDown$1 = function DropDown(_ref2) {
-  var size = _ref2.size,
-    _ref2$styles = _ref2.styles,
-    styles = _ref2$styles === void 0 ? {
+var DropDown$1 = function DropDown(_ref4) {
+  var size = _ref4.size,
+    _ref4$styles = _ref4.styles,
+    styles = _ref4$styles === void 0 ? {
       dropDown: {}
-    } : _ref2$styles,
-    options = _ref2.options,
-    _ref2$callback = _ref2.callback,
-    callback = _ref2$callback === void 0 ? function () {} : _ref2$callback;
+    } : _ref4$styles,
+    options = _ref4.options,
+    _ref4$callback = _ref4.callback,
+    callback = _ref4$callback === void 0 ? function () {} : _ref4$callback;
   var handleCallback = function handleCallback(option) {
     return callback(option);
   };
@@ -4651,62 +4658,62 @@ var DropDown$1 = function DropDown(_ref2) {
     }, styles['text']));
   }));
 };
-var CountryPickerView = function CountryPickerView(_ref3) {
-  var id = _ref3.id,
-    name = _ref3.name,
-    label = _ref3.label,
-    value = _ref3.value,
-    placeholder = _ref3.placeholder,
-    helperText = _ref3.helperText,
-    _ref3$hide = _ref3.hide,
-    hide = _ref3$hide === void 0 ? false : _ref3$hide,
-    _ref3$error = _ref3.error,
-    error = _ref3$error === void 0 ? false : _ref3$error,
-    _ref3$isHovered = _ref3.isHovered,
-    isHovered = _ref3$isHovered === void 0 ? false : _ref3$isHovered,
-    _ref3$isFocused = _ref3.isFocused,
-    isFocused = _ref3$isFocused === void 0 ? false : _ref3$isFocused,
-    _ref3$isAutoFocus = _ref3.isAutoFocus,
-    isAutoFocus = _ref3$isAutoFocus === void 0 ? false : _ref3$isAutoFocus,
-    _ref3$isDisabled = _ref3.isDisabled,
-    isDisabled = _ref3$isDisabled === void 0 ? false : _ref3$isDisabled,
-    _ref3$isReadOnly = _ref3.isReadOnly,
-    isReadOnly = _ref3$isReadOnly === void 0 ? false : _ref3$isReadOnly,
-    _ref3$shadow = _ref3.shadow,
-    shadow = _ref3$shadow === void 0 ? {} : _ref3$shadow,
-    _ref3$newOptions = _ref3.newOptions,
-    newOptions = _ref3$newOptions === void 0 ? [] : _ref3$newOptions,
-    _ref3$size = _ref3.size,
-    size = _ref3$size === void 0 ? 'md' : _ref3$size,
-    _ref3$variant = _ref3.variant,
-    variant = _ref3$variant === void 0 ? 'default' : _ref3$variant,
-    _ref3$shape = _ref3.shape,
-    shape = _ref3$shape === void 0 ? 'default' : _ref3$shape,
-    _ref3$colorScheme = _ref3.colorScheme,
-    colorScheme = _ref3$colorScheme === void 0 ? 'theme.primary' : _ref3$colorScheme,
-    onChange = _ref3.onChange,
-    _ref3$onBlur = _ref3.onBlur,
-    onBlur = _ref3$onBlur === void 0 ? function () {} : _ref3$onBlur,
-    _ref3$setHide = _ref3.setHide,
-    setHide = _ref3$setHide === void 0 ? function () {} : _ref3$setHide,
-    _ref3$setNewOptions = _ref3.setNewOptions,
-    setNewOptions = _ref3$setNewOptions === void 0 ? function () {} : _ref3$setNewOptions,
-    _ref3$setIsHovered = _ref3.setIsHovered,
-    setIsHovered = _ref3$setIsHovered === void 0 ? function () {} : _ref3$setIsHovered,
-    _ref3$setIsFocused = _ref3.setIsFocused,
-    setIsFocused = _ref3$setIsFocused === void 0 ? function () {} : _ref3$setIsFocused,
-    _ref3$setValue = _ref3.setValue,
-    setValue = _ref3$setValue === void 0 ? function () {} : _ref3$setValue,
-    _ref3$styles = _ref3.styles,
-    styles = _ref3$styles === void 0 ? {
+var CountryPickerView = function CountryPickerView(_ref5) {
+  var id = _ref5.id,
+    name = _ref5.name,
+    label = _ref5.label,
+    value = _ref5.value,
+    placeholder = _ref5.placeholder,
+    helperText = _ref5.helperText,
+    _ref5$hide = _ref5.hide,
+    hide = _ref5$hide === void 0 ? false : _ref5$hide,
+    _ref5$error = _ref5.error,
+    error = _ref5$error === void 0 ? false : _ref5$error,
+    _ref5$isHovered = _ref5.isHovered,
+    isHovered = _ref5$isHovered === void 0 ? false : _ref5$isHovered,
+    _ref5$isFocused = _ref5.isFocused,
+    isFocused = _ref5$isFocused === void 0 ? false : _ref5$isFocused,
+    _ref5$isAutoFocus = _ref5.isAutoFocus,
+    isAutoFocus = _ref5$isAutoFocus === void 0 ? false : _ref5$isAutoFocus,
+    _ref5$isDisabled = _ref5.isDisabled,
+    isDisabled = _ref5$isDisabled === void 0 ? false : _ref5$isDisabled,
+    _ref5$isReadOnly = _ref5.isReadOnly,
+    isReadOnly = _ref5$isReadOnly === void 0 ? false : _ref5$isReadOnly,
+    _ref5$shadow = _ref5.shadow,
+    shadow = _ref5$shadow === void 0 ? {} : _ref5$shadow,
+    _ref5$newOptions = _ref5.newOptions,
+    newOptions = _ref5$newOptions === void 0 ? [] : _ref5$newOptions,
+    _ref5$size = _ref5.size,
+    size = _ref5$size === void 0 ? 'md' : _ref5$size,
+    _ref5$variant = _ref5.variant,
+    variant = _ref5$variant === void 0 ? 'default' : _ref5$variant,
+    _ref5$shape = _ref5.shape,
+    shape = _ref5$shape === void 0 ? 'default' : _ref5$shape,
+    _ref5$colorScheme = _ref5.colorScheme,
+    colorScheme = _ref5$colorScheme === void 0 ? 'theme.primary' : _ref5$colorScheme,
+    onChange = _ref5.onChange,
+    _ref5$onBlur = _ref5.onBlur,
+    onBlur = _ref5$onBlur === void 0 ? function () {} : _ref5$onBlur,
+    _ref5$setHide = _ref5.setHide,
+    setHide = _ref5$setHide === void 0 ? function () {} : _ref5$setHide,
+    _ref5$setNewOptions = _ref5.setNewOptions,
+    setNewOptions = _ref5$setNewOptions === void 0 ? function () {} : _ref5$setNewOptions,
+    _ref5$setIsHovered = _ref5.setIsHovered,
+    setIsHovered = _ref5$setIsHovered === void 0 ? function () {} : _ref5$setIsHovered,
+    _ref5$setIsFocused = _ref5.setIsFocused,
+    setIsFocused = _ref5$setIsFocused === void 0 ? function () {} : _ref5$setIsFocused,
+    _ref5$setValue = _ref5.setValue,
+    setValue = _ref5$setValue === void 0 ? function () {} : _ref5$setValue,
+    _ref5$styles = _ref5.styles,
+    styles = _ref5$styles === void 0 ? {
       text: {},
       icon: {},
       label: {},
       dropDown: {},
       helperText: {},
       box: {}
-    } : _ref3$styles,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded$w);
+    } : _ref5$styles,
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded3$2);
   var _useTheme = useTheme(),
     getColor = _useTheme.getColor;
   var IconColor = getColor('color.blueGray.700');
@@ -4987,7 +4994,7 @@ var usePasswordState = function usePasswordState(props) {
 };
 
 var _excluded$y = ["visibleIcon", "hiddenIcon"],
-  _excluded2$3 = ["isVisible", "setIsVisible"];
+  _excluded2$4 = ["isVisible", "setIsVisible"];
 var PasswordComponent = function PasswordComponent(_ref) {
   var _ref$visibleIcon = _ref.visibleIcon,
     visibleIcon = _ref$visibleIcon === void 0 ? React.createElement(OpenEyeSvg, {
@@ -5001,7 +5008,7 @@ var PasswordComponent = function PasswordComponent(_ref) {
   var _usePasswordState = usePasswordState(props),
     isVisible = _usePasswordState.isVisible,
     setIsVisible = _usePasswordState.setIsVisible,
-    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$3);
+    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$4);
   return React.createElement(TextFieldView, Object.assign({}, passwordProps, {
     type: isVisible ? 'text' : 'password',
     isClearable: false,
@@ -5238,7 +5245,7 @@ var TextFieldComponent$1 = function TextFieldComponent(props) {
 var FormikTextField = TextFieldComponent$1;
 
 var _excluded$C = ["visibleIcon", "hiddenIcon"],
-  _excluded2$4 = ["isVisible", "setIsVisible"];
+  _excluded2$5 = ["isVisible", "setIsVisible"];
 var PasswordComponent$1 = function PasswordComponent(_ref) {
   var _ref$visibleIcon = _ref.visibleIcon,
     visibleIcon = _ref$visibleIcon === void 0 ? React.createElement(OpenEyeSvg, {
@@ -5253,7 +5260,7 @@ var PasswordComponent$1 = function PasswordComponent(_ref) {
   var _usePasswordState = usePasswordState(formProps),
     isVisible = _usePasswordState.isVisible,
     setIsVisible = _usePasswordState.setIsVisible,
-    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$4);
+    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$5);
   return React.createElement(TextFieldView, Object.assign({}, passwordProps, {
     type: isVisible ? 'text' : 'password',
     isClearable: false,
@@ -5439,7 +5446,7 @@ var ComboBoxView = function ComboBoxView(_ref) {
   // Starts the JSX returned by the component representing the combobox.
   return React.createElement(Horizontal, Object.assign({
     role: "combobox",
-    wrap: "nowrap",
+    flexWrap: "nowrap",
     gap: 15,
     alignItems: "center",
     width: "100%"
@@ -5458,7 +5465,7 @@ var ComboBoxView = function ComboBoxView(_ref) {
     borderRadius: "4px",
     justifyContent: "space-between",
     minWidth: 300,
-    wrap: "nowrap"
+    flexWrap: "nowrap"
   }, styles == null ? void 0 : styles.container), React.createElement(Horizontal, Object.assign({
     gap: 15,
     alignItems: "center",
@@ -5731,7 +5738,7 @@ var MessageView = function MessageView(_ref) {
     gap: 16,
     width: 400,
     // safe={true}
-    wrap: "nowrap",
+    flexWrap: "nowrap",
     position: 'relative',
     alignItems: "center",
     padding: "14px 24px 14px 14px",
@@ -5913,8 +5920,8 @@ var HeaderIconSizes = {
 };
 
 var _excluded$H = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
-  _excluded2$5 = ["children", "shadow", "isFullScreen", "shape"],
-  _excluded3$2 = ["children", "buttonColor", "iconSize", "buttonPosition"],
+  _excluded2$6 = ["children", "shadow", "isFullScreen", "shape"],
+  _excluded3$3 = ["children", "buttonColor", "iconSize", "buttonPosition"],
   _excluded4$2 = ["children"],
   _excluded5 = ["children"];
 var ModalOverlay = function ModalOverlay(_ref) {
@@ -5949,7 +5956,7 @@ var ModalOverlay = function ModalOverlay(_ref) {
     width: "100vw",
     height: "100vh",
     display: "flex",
-    backgroundColor: "blackAlpha.500",
+    backgroundColor: "color.blackAlpha.500",
     backdropFilter: blur ? "blur(" + blur + "px)" : undefined,
     onClick: handleClick
   }, OverlayAlignments[position], props), children));
@@ -5961,7 +5968,7 @@ var ModalContainer = function ModalContainer(_ref2) {
     isFullScreen = _ref2$isFullScreen === void 0 ? false : _ref2$isFullScreen,
     _ref2$shape = _ref2.shape,
     shape = _ref2$shape === void 0 ? 'rounded' : _ref2$shape,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$5);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$6);
   var defaultShadow = typeof document !== undefined ? {
     boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.3)'
   } : {
@@ -5993,7 +6000,7 @@ var ModalHeader = function ModalHeader(_ref3) {
     iconSize = _ref3$iconSize === void 0 ? 'md' : _ref3$iconSize,
     _ref3$buttonPosition = _ref3.buttonPosition,
     buttonPosition = _ref3$buttonPosition === void 0 ? 'right' : _ref3$buttonPosition,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$2);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$3);
   var onClose = props.onClose ? props.onClose : hideModal;
   var buttonIcon = React.createElement(Button, {
     onClick: onClose,