@app-studio/web 0.8.77 → 0.8.78

package/dist/web.umd.development.js

@@ -442,12 +442,7 @@
     sm: '14px',
     md: '16px',
     lg: '18px',
-    xl: '20px',
-    '2xl': '24px',
-    '3xl': '30px',
-    '4xl': '36px',
-    '5xl': '48px',
-    '6xl': '60px'
+    xl: '20px'
   };
   /**
    * Line heights following typography guidelines
@@ -457,12 +452,7 @@
     sm: '20px',
     md: '24px',
     lg: '28px',
-    xl: '28px',
-    '2xl': '32px',
-    '3xl': '36px',
-    '4xl': '40px',
-    '5xl': '60px',
-    '6xl': '72px'
+    xl: '28px'
   };
   /**
    * Font weights following typography guidelines
@@ -703,9 +693,12 @@
   };
   // Utility function to handle fill and stroke based on 'filled' prop
   var getSvgProps = (filled, color, strokeWidth) => {
+    var {
+      getColor
+    } = appStudio.useTheme();
     return {
-      fill: filled ? color : 'none',
-      stroke: filled ? 'none' : color,
+      fill: filled ? getColor(color) : 'none',
+      stroke: filled ? 'none' : getColor(color),
       strokeWidth,
       strokeLinecap: 'round',
       strokeLinejoin: 'round'
@@ -1171,7 +1164,7 @@
     var {
         widthHeight = 24,
         color = 'currentColor',
-        filled = false,
+        filled = true,
         strokeWidth = 1
       } = _ref19,
       props = _objectWithoutPropertiesLoose(_ref19, _excluded19);
@@ -2915,7 +2908,7 @@
       borderStyle: "solid",
       borderColor: Themes[variant].container.borderColor,
       backgroundColor: Themes[variant].container.backgroundColor,
-      boxShadow: Themes[variant].container.boxShadow,
+      boxShadow: Themes[variant].container.containerShadow,
       // Animation
       transition: "all 0.2s ease"
     }, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
@@ -3349,12 +3342,7 @@
     sm: 14,
     md: 16,
     lg: 18,
-    xl: 20,
-    '2xl': 24,
-    '3xl': 30,
-    '4xl': 36,
-    '5xl': 48,
-    '6xl': 64
+    xl: 20
   };
 
   var _excluded$6 = ["children", "to", "iconSize", "underline", "isHovered", "isExternal", "views", "setIsHovered"];
@@ -3606,12 +3594,7 @@
     sm: 18,
     md: 22,
     lg: 26,
-    xl: 30,
-    '2xl': 40,
-    '3xl': 50,
-    '4xl': 60,
-    '5xl': 70,
-    '6xl': 80
+    xl: 30
   };
   // Specifies a mapping of spinning speed labels to numerical millisecond values, determining the speed of the Loader component's animation cycles.
   var DefaultSpeeds = {
@@ -6252,9 +6235,9 @@
       gap: 8,
       position: "relative",
       width: "100%"
-    }, props), children, !error && helperText && (/*#__PURE__*/React__default.createElement(HelperText, Object.assign({
+    }, props, views == null ? void 0 : views.container), children, !error && helperText && (/*#__PURE__*/React__default.createElement(HelperText, Object.assign({
       marginTop: 4
-    }, views), helperText)), error && (/*#__PURE__*/React__default.createElement(Text, {
+    }, views == null ? void 0 : views.helperText), helperText)), error && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
       size: "xs",
       marginTop: 4,
       marginHorizontal: 0,
@@ -6262,7 +6245,7 @@
       ,
       color: "color.red.500",
       transition: "all 0.2s ease"
-    }, error)));
+    }, views == null ? void 0 : views.error), error)));
   };
 
   /**
@@ -7041,26 +7024,6 @@
     xl: {
       height: '28px',
       width: '28px'
-    },
-    '2xl': {
-      height: '32px',
-      width: '32px'
-    },
-    '3xl': {
-      height: '36px',
-      width: '36px'
-    },
-    '4xl': {
-      height: '40px',
-      width: '40px'
-    },
-    '5xl': {
-      height: '44px',
-      width: '44px'
-    },
-    '6xl': {
-      height: '48px',
-      width: '48px'
     }
   };
   /**
@@ -7087,26 +7050,6 @@
     xl: {
       height: '40px',
       width: '72px'
-    },
-    '2xl': {
-      height: '44px',
-      width: '80px'
-    },
-    '3xl': {
-      height: '48px',
-      width: '88px'
-    },
-    '4xl': {
-      height: '52px',
-      width: '96px'
-    },
-    '5xl': {
-      height: '56px',
-      width: '104px'
-    },
-    '6xl': {
-      height: '60px',
-      width: '112px'
     }
   };
   /**
@@ -7133,26 +7076,6 @@
     xl: {
       paddingVertical: 4,
       paddingHorizontal: 4
-    },
-    '2xl': {
-      paddingVertical: 4,
-      paddingHorizontal: 4
-    },
-    '3xl': {
-      paddingVertical: 4,
-      paddingHorizontal: 4
-    },
-    '4xl': {
-      paddingVertical: 4,
-      paddingHorizontal: 4
-    },
-    '5xl': {
-      paddingVertical: 4,
-      paddingHorizontal: 4
-    },
-    '6xl': {
-      paddingVertical: 4,
-      paddingHorizontal: 4
     }
   };
   /**
@@ -7365,11 +7288,8 @@
         setIsFocused = () => {},
         setIsHovered = () => {},
         views = {
-          box: {},
-          text: {},
           label: {},
-          helperText: {},
-          field: {}
+          helperText: {}
         }
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
@@ -7380,11 +7300,11 @@
     var fieldStyles = Object.assign({
       // Layout properties
       margin: 0,
-      paddingVertical: 12,
-      paddingHorizontal: 0,
+      paddingVertical: 2,
+      paddingHorizontal: 2,
       width: '100%',
-      height: '100%',
-      minHeight: '80px',
+      maxHeight: 'calc(100vh - 100px)',
+      height: 'calc(5em)',
       border: 'none',
       resize: 'vertical',
       // Focus state
@@ -7395,7 +7315,7 @@
       },
       // Typography properties
       fontSize: appStudio.Typography.fontSizes[size],
-      lineHeight: '1.5',
+      lineHeight: appStudio.Typography.fontSizes[size] * 1.5,
       letterSpacing: '-0.01em',
       // Visual properties
       backgroundColor: 'transparent',
@@ -7403,11 +7323,7 @@
       // State properties
       cursor: isDisabled ? 'not-allowed' : 'text',
       // Animation
-      transition: 'all 0.2s ease',
-      // Dark mode support
-      '@media (prefers-color-scheme: dark)': {
-        color: isDisabled ? 'color.gray.600' : 'color.gray.100'
-      }
+      transition: 'all 0.2s ease'
     }, views['field']);
     var handleHover = () => setIsHovered(!isHovered);
     var handleFocus = () => {
@@ -7429,11 +7345,11 @@
         if (onChange) onChange(event.target.value);
       }
     };
-    return /*#__PURE__*/React__default.createElement(FieldContainer, {
+    return /*#__PURE__*/React__default.createElement(FieldContainer, Object.assign({
       helperText: helperText,
       error: error,
       views: views
-    }, /*#__PURE__*/React__default.createElement(FieldContent, {
+    }, props), /*#__PURE__*/React__default.createElement(FieldContent, Object.assign({
       label: label,
       size: size,
       error: error,
@@ -7450,11 +7366,11 @@
       showLabel: showLabel,
       onMouseEnter: handleHover,
       onMouseLeave: handleHover
-    }, /*#__PURE__*/React__default.createElement(FieldWrapper, null, showLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
+    }, views == null ? void 0 : views.content), /*#__PURE__*/React__default.createElement(FieldWrapper, Object.assign({}, views == null ? void 0 : views.warper), showLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
       htmlFor: id,
       color: 'theme.primary',
       error: error
-    }, views), label)), /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+    }, views == null ? void 0 : views.label), label)), /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: "textarea",
       id: id,
       name: name,
@@ -7469,10 +7385,10 @@
       onBlur: handleBlur,
       onFocus: handleFocus,
       multiline: isMultiline
-    }, fieldStyles, props, {
+    }, fieldStyles, {
       onChange: handleChange,
       onChangeText: handleChange
-    })))));
+    }, views == null ? void 0 : views.textarea)))));
   };
 
   // Defines the TextAreaComponent as a functional component that accepts TextAreaProps for type safety and structure.
@@ -7540,7 +7456,7 @@
         onChangeText,
         shadow = {},
         views = {
-          box: {},
+          container: {},
           field: {},
           label: {},
           helperText: {},
@@ -7740,26 +7656,6 @@
     xl: {
       height: '32px',
       width: '32px'
-    },
-    '2xl': {
-      height: '36px',
-      width: '36px'
-    },
-    '3xl': {
-      height: '40px',
-      width: '40px'
-    },
-    '4xl': {
-      height: '44px',
-      width: '44px'
-    },
-    '5xl': {
-      height: '48px',
-      width: '48px'
-    },
-    '6xl': {
-      height: '52px',
-      width: '52px'
     }
   };
   /**
@@ -7771,12 +7667,7 @@
     sm: 14,
     md: 16,
     lg: 20,
-    xl: 24,
-    '2xl': 28,
-    '3xl': 32,
-    '4xl': 36,
-    '5xl': 40,
-    '6xl': 44
+    xl: 24
   };
   /**
    * Variant styles for the Checkbox component
@@ -9572,8 +9463,7 @@
           icon: {},
           label: {},
           dropDown: {},
-          helperText: {},
-          box: {}
+          helperText: {}
         },
         themeMode: elementMode
       } = _ref5,
@@ -9721,7 +9611,7 @@
         variant = 'default',
         shape = 'default',
         views = {
-          box: {},
+          container: {},
           label: {},
           helperText: {},
           text: {},
@@ -10004,7 +9894,7 @@
         widthHeight: 12
       }),
       views: {
-        box: Object.assign({
+        container: Object.assign({
           width: '100%',
           padding: '6px 12px',
           borderBottom: filteredItems.length > 0 ? '1px solid #ccc' : '1px solid transparent'
@@ -10374,14 +10264,7 @@
         length = 6,
         helperText,
         placeholder = '',
-        views = {
-          container: {},
-          input: {},
-          box: {},
-          text: {},
-          label: {},
-          helperText: {}
-        },
+        views = {},
         size = 'md',
         shape = 'rounded',
         variant = 'outline',
@@ -10487,7 +10370,7 @@
         width: "100%",
         position: "relative",
         height: size === 'xs' ? '32px' : size === 'sm' ? '36px' : size === 'md' ? '40px' : size === 'lg' ? '48px' : '56px'
-      }, views.box), slot.char ? (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      }, views.container), slot.char ? (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
         textAlign: "center",
         fontSize: size === 'xs' ? '14px' : size === 'sm' ? '16px' : size === 'md' ? '18px' : size === 'lg' ? '20px' : '24px',
         fontWeight: "medium"
@@ -12255,23 +12138,19 @@
     },
     top: {
       justifyContent: 'center',
-      alignItems: 'flex-start',
-      paddingTop: '64px'
+      alignItems: 'flex-start'
     },
     right: {
       justifyContent: 'flex-end',
-      alignItems: 'center',
-      paddingRight: '32px'
+      alignItems: 'center'
     },
     bottom: {
       justifyContent: 'center',
-      alignItems: 'flex-end',
-      paddingBottom: '64px'
+      alignItems: 'flex-end'
     },
     left: {
       justifyContent: 'flex-start',
-      alignItems: 'center',
-      paddingLeft: '32px'
+      alignItems: 'center'
     }
   };
   /**
@@ -15174,7 +15053,7 @@
         variant = 'solid',
         thickness = 'thin',
         color,
-        spacing = '16px',
+        spacing = '0px',
         label,
         decorative = false,
         views
@@ -15199,7 +15078,7 @@
         alignItems: "center",
         justifyContent: "center",
         width: "100%",
-        margin: spacing
+        padding: spacing
       }, ariaProps, props), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
         height: "0px",
         flexGrow: 1,
@@ -15222,7 +15101,7 @@
         borderTopWidth: borderWidth,
         borderTopStyle: borderStyle,
         borderTopColor: separatorColor,
-        margin: spacing
+        padding: spacing
       }, DefaultSeparatorStyles.container, ariaProps, views == null ? void 0 : views.container, props));
     }
     // For vertical separator
@@ -15232,7 +15111,7 @@
       borderLeftWidth: borderWidth,
       borderLeftStyle: borderStyle,
       borderLeftColor: separatorColor,
-      margin: spacing
+      padding: spacing
     }, DefaultSeparatorStyles.container, ariaProps, views == null ? void 0 : views.container, props));
   };