@app-studio/web 0.3.58 → 0.3.60

package/dist/web.esm.js

@@ -1016,7 +1016,7 @@ var IconSizes$2 = {
   '6xl': 60
 };
 
-var _excluded$e = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "size", "colorScheme", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "styles"];
+var _excluded$e = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "labelPosition", "size", "colorScheme", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "styles"];
 var CheckboxView = function CheckboxView(_ref) {
   var id = _ref.id,
     icon = _ref.icon,
@@ -1026,6 +1026,8 @@ var CheckboxView = function CheckboxView(_ref) {
     onValueChange = _ref.onValueChange,
     _ref$shadow = _ref.shadow,
     shadow = _ref$shadow === void 0 ? {} : _ref$shadow,
+    _ref$labelPosition = _ref.labelPosition,
+    labelPosition = _ref$labelPosition === void 0 ? 'right' : _ref$labelPosition,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size,
     _ref$colorScheme = _ref.colorScheme,
@@ -1092,9 +1094,9 @@ var CheckboxView = function CheckboxView(_ref) {
     onMouseEnter: handleHover,
     onMouseLeave: handleHover,
     size: Typography.fontSizes[size]
-  }, checkboxStyle.container, props), React.createElement(Center, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? React.createElement(IndeterminateSvg, null) : (isChecked || isSelected) && (icon != null ? icon : React.createElement(CheckSvg, {
+  }, checkboxStyle.container, props), labelPosition === 'left' && label && React.createElement(View$1, null, label), React.createElement(Center, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? React.createElement(IndeterminateSvg, null) : (isChecked || isSelected) && (icon != null ? icon : React.createElement(CheckSvg, {
     size: IconSizes$2[size]
-  }))), label);
+  }))), labelPosition === 'right' && label && React.createElement(View$1, null, label));
 };
 
 var CheckboxComponent = function CheckboxComponent(props) {
@@ -4111,7 +4113,7 @@ var SliderPadding = {
   }
 };
 
-var _excluded$s = ["id", "name", "inActiveChild", "activeChild", "shadow", "size", "colorScheme", "on", "isHovered", "isChecked", "isDisabled", "isReadOnly", "onChange", "onValueChange", "setOn", "setIsHovered", "styles"];
+var _excluded$s = ["id", "name", "label", "inActiveChild", "activeChild", "labelPosition", "shadow", "size", "colorScheme", "value", "isHovered", "isDisabled", "isReadOnly", "onChange", "setValue", "setIsHovered", "styles"];
 var SwitchContent = function SwitchContent(props) {
   return React.createElement(Input, Object.assign({
     type: "checkbox"
@@ -4120,16 +4122,19 @@ var SwitchContent = function SwitchContent(props) {
 var SwitchView = function SwitchView(_ref) {
   var id = _ref.id,
     name = _ref.name,
+    label = _ref.label,
     inActiveChild = _ref.inActiveChild,
     activeChild = _ref.activeChild,
+    _ref$labelPosition = _ref.labelPosition,
+    labelPosition = _ref$labelPosition === void 0 ? 'right' : _ref$labelPosition,
     _ref$shadow = _ref.shadow,
     shadow = _ref$shadow === void 0 ? {} : _ref$shadow,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'sm' : _ref$size,
     _ref$colorScheme = _ref.colorScheme,
     colorScheme = _ref$colorScheme === void 0 ? 'theme.primary' : _ref$colorScheme,
-    _ref$on = _ref.on,
-    on = _ref$on === void 0 ? false : _ref$on,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? false : _ref$value,
     _ref$isHovered = _ref.isHovered,
     isHovered = _ref$isHovered === void 0 ? false : _ref$isHovered,
     _ref$isDisabled = _ref.isDisabled,
@@ -4137,56 +4142,63 @@ var SwitchView = function SwitchView(_ref) {
     _ref$isReadOnly = _ref.isReadOnly,
     isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
     onChange = _ref.onChange,
-    onValueChange = _ref.onValueChange,
-    _ref$setOn = _ref.setOn,
-    setOn = _ref$setOn === void 0 ? function () {} : _ref$setOn,
+    _ref$setValue = _ref.setValue,
+    setValue = _ref$setValue === void 0 ? function () {} : _ref$setValue,
     _ref$setIsHovered = _ref.setIsHovered,
     setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
     _ref$styles = _ref.styles,
     styles = _ref$styles === void 0 ? {
       slider: {},
-      circle: {}
+      circle: {},
+      label: {}
     } : _ref$styles,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var handleToggle = function handleToggle(event) {
     if (!isReadOnly) {
-      setOn(!on);
+      setValue(!value);
       if (onChange) onChange(event.target.checked);
     }
   };
   var handleHover = function handleHover() {
     return setIsHovered(!isHovered);
   };
-  return React.createElement(Label, {
+  var switchStyle = {
+    container: _extends({
+      gap: 10,
+      display: 'flex',
+      height: 'fit-content',
+      width: 'fit-content',
+      cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'default' : 'pointer'
+    }, styles.label)
+  };
+  return React.createElement(Label, Object.assign({
     htmlFor: id,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover
-  }, React.createElement(SwitchContent, Object.assign({
+  }, switchStyle.container, props), React.createElement(SwitchContent, Object.assign({
     id: id,
     name: name,
     opacity: 0,
     width: 0,
     height: 0,
-    checked: on,
+    checked: value,
     onChange: handleToggle,
     disabled: isDisabled,
     readOnly: isReadOnly
-  }, onValueChange && {
-    onValueChange: handleToggle
-  }, props)), React.createElement(View, Object.assign({
+  }, props)), labelPosition === 'left' && label && React.createElement(View, null, label), React.createElement(View, Object.assign({
     display: "flex",
     cursor: "pointer",
     alignItems: "center",
     borderRadius: 24,
     marginBottom: 5,
-    filter: isHovered && on ? 'brightness(0.9)' : 'brightness(1)',
+    filter: isHovered && value ? 'brightness(0.9)' : 'brightness(1)',
     transition: "justify-content 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-    backgroundColor: isDisabled ? 'disabled' : on ? colorScheme : 'lightgray',
-    justifyContent: activeChild ? 'space-between' : on ? 'flex-end' : 'flex-start'
-  }, shadow, SliderPadding[size], SliderSizes[size], styles['slider']), activeChild && on && React.createElement(View, null, activeChild), React.createElement(View, Object.assign({
+    backgroundColor: isDisabled ? 'disabled' : value ? colorScheme : 'lightgray',
+    justifyContent: activeChild ? 'space-between' : value ? 'flex-end' : 'flex-start'
+  }, shadow, SliderPadding[size], SliderSizes[size], styles['slider']), activeChild && value && React.createElement(View, null, activeChild), React.createElement(View, Object.assign({
     borderRadius: "50%",
     backgroundColor: "white"
-  }, KnobSizes[size], styles['circle'])), inActiveChild && !on && React.createElement(View, null, inActiveChild)));
+  }, KnobSizes[size], styles['circle'])), inActiveChild && !value && React.createElement(View, null, inActiveChild)), labelPosition === 'right' && label && React.createElement(View, null, label));
 };
 
 var SwitchComponent = function SwitchComponent(props) {
@@ -4571,12 +4583,8 @@ var SelectComponent$1 = function SelectComponent(props) {
  */
 var FormikSelect = SelectComponent$1;
 
-var _excluded$w = ["value"];
 var SwitchComponent$1 = function SwitchComponent(props) {
-  var _useFormikInput = useFormikInput(props),
-    value = _useFormikInput.value,
-    formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$w);
-  formProps.isChecked = value;
+  var formProps = useFormikInput(props);
   var switchStates = useSwitchState(props);
   return React.createElement(SwitchView, Object.assign({}, switchStates, formProps));
 };
@@ -4592,11 +4600,11 @@ var TextAreaComponent$1 = function TextAreaComponent(props) {
  */
 var FormikTextArea = TextAreaComponent$1;
 
-var _excluded$x = ["value"];
+var _excluded$w = ["value"];
 var TextFieldComponent$1 = function TextFieldComponent(props) {
   var formProps = useFormikInput(props);
   var _useTextFieldState = useTextFieldState(props),
-    textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$x);
+    textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$w);
   return React.createElement(TextFieldView, Object.assign({}, textFieldStates, formProps));
 };
 /**
@@ -4604,7 +4612,7 @@ var TextFieldComponent$1 = function TextFieldComponent(props) {
  */
 var FormikTextField = TextFieldComponent$1;
 
-var _excluded$y = ["visibleIcon", "hiddenIcon"],
+var _excluded$x = ["visibleIcon", "hiddenIcon"],
   _excluded2$3 = ["isVisible", "setIsVisible"];
 var PasswordComponent$1 = function PasswordComponent(_ref) {
   var _ref$visibleIcon = _ref.visibleIcon,
@@ -4615,7 +4623,7 @@ var PasswordComponent$1 = function PasswordComponent(_ref) {
     hiddenIcon = _ref$hiddenIcon === void 0 ? React.createElement(CloseEyeSvg, {
       size: 14
     }) : _ref$hiddenIcon,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
   var formProps = useFormikInput(props);
   var _usePasswordState = usePasswordState(formProps),
     isVisible = _usePasswordState.isVisible,
@@ -4723,7 +4731,7 @@ var HeaderIconSizes = {
   xl: 28
 };
 
-var _excluded$z = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
+var _excluded$y = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
   _excluded2$4 = ["children", "shadow", "isFullScreen", "shape"],
   _excluded3$2 = ["children", "buttonColor", "iconSize", "buttonPosition"],
   _excluded4$2 = ["children"],
@@ -4739,7 +4747,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$z);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
   var handleClick = function handleClick() {
     if (!isClosePrevented) onClose();
   };
@@ -4895,12 +4903,12 @@ Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
 Modal.Layout = ModalLayout;
 
-var _excluded$A = ["src", "color"],
+var _excluded$z = ["src", "color"],
   _excluded2$5 = ["path"];
 var FileSVG = function FileSVG(_ref) {
   var src = _ref.src,
     color = _ref.color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
   var _useTheme = useTheme(),
     getColor = _useTheme.getColor;
   var Colorprops = color ? {