@app-studio/web 0.8.77 → 0.8.78

package/dist/web.esm.js

@@ -5,7 +5,7 @@ import 'core-js/modules/es.array.iterator.js';
 import 'core-js/modules/es.string.includes.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/es.regexp.to-string.js';
-import { View, Horizontal, Vertical, Element, Center, Image, useTheme, Typography, Input, Form, Text as Text$1 } from 'app-studio';
+import { View, Horizontal, Vertical, Element, Center, useTheme, Image, Typography, Input, Form, Text as Text$1 } from 'app-studio';
 import 'core-js/modules/es.symbol.description.js';
 import 'core-js/modules/es.parse-float.js';
 import { Link as Link$1 } from 'react-router-dom';
@@ -463,12 +463,7 @@ var FontSizes = {
   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
@@ -478,12 +473,7 @@ var LineHeights = {
   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
@@ -724,9 +714,12 @@ var IconWrapper = _ref => {
 };
 // Utility function to handle fill and stroke based on 'filled' prop
 var getSvgProps = (filled, color, strokeWidth) => {
+  var {
+    getColor
+  } = 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'
@@ -1192,7 +1185,7 @@ var InfoIcon = _ref19 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
-      filled = false,
+      filled = true,
       strokeWidth = 1
     } = _ref19,
     props = _objectWithoutPropertiesLoose(_ref19, _excluded19);
@@ -2936,7 +2929,7 @@ var AlertView = _ref => {
     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.createElement(View, Object.assign({
@@ -3370,12 +3363,7 @@ var IconSizes = {
   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"];
@@ -3627,12 +3615,7 @@ var DefaultSizes = {
   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 = {
@@ -6273,9 +6256,9 @@ var FieldContainer = _ref => {
     gap: 8,
     position: "relative",
     width: "100%"
-  }, props), children, !error && helperText && (/*#__PURE__*/React.createElement(HelperText, Object.assign({
+  }, props, views == null ? void 0 : views.container), children, !error && helperText && (/*#__PURE__*/React.createElement(HelperText, Object.assign({
     marginTop: 4
-  }, views), helperText)), error && (/*#__PURE__*/React.createElement(Text, {
+  }, views == null ? void 0 : views.helperText), helperText)), error && (/*#__PURE__*/React.createElement(Text, Object.assign({
     size: "xs",
     marginTop: 4,
     marginHorizontal: 0,
@@ -6283,7 +6266,7 @@ var FieldContainer = _ref => {
     ,
     color: "color.red.500",
     transition: "all 0.2s ease"
-  }, error)));
+  }, views == null ? void 0 : views.error), error)));
 };
 
 /**
@@ -7062,26 +7045,6 @@ var KnobSizes = {
   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'
   }
 };
 /**
@@ -7108,26 +7071,6 @@ var SliderSizes = {
   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'
   }
 };
 /**
@@ -7154,26 +7097,6 @@ var SliderPadding = {
   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
   }
 };
 /**
@@ -7386,11 +7309,8 @@ var TextAreaView = _ref => {
       setIsFocused = () => {},
       setIsHovered = () => {},
       views = {
-        box: {},
-        text: {},
         label: {},
-        helperText: {},
-        field: {}
+        helperText: {}
       }
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
@@ -7401,11 +7321,11 @@ var TextAreaView = _ref => {
   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
@@ -7416,7 +7336,7 @@ var TextAreaView = _ref => {
     },
     // Typography properties
     fontSize: Typography.fontSizes[size],
-    lineHeight: '1.5',
+    lineHeight: Typography.fontSizes[size] * 1.5,
     letterSpacing: '-0.01em',
     // Visual properties
     backgroundColor: 'transparent',
@@ -7424,11 +7344,7 @@ var TextAreaView = _ref => {
     // 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 = () => {
@@ -7450,11 +7366,11 @@ var TextAreaView = _ref => {
       if (onChange) onChange(event.target.value);
     }
   };
-  return /*#__PURE__*/React.createElement(FieldContainer, {
+  return /*#__PURE__*/React.createElement(FieldContainer, Object.assign({
     helperText: helperText,
     error: error,
     views: views
-  }, /*#__PURE__*/React.createElement(FieldContent, {
+  }, props), /*#__PURE__*/React.createElement(FieldContent, Object.assign({
     label: label,
     size: size,
     error: error,
@@ -7471,11 +7387,11 @@ var TextAreaView = _ref => {
     showLabel: showLabel,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover
-  }, /*#__PURE__*/React.createElement(FieldWrapper, null, showLabel && (/*#__PURE__*/React.createElement(FieldLabel, Object.assign({
+  }, views == null ? void 0 : views.content), /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({}, views == null ? void 0 : views.warper), showLabel && (/*#__PURE__*/React.createElement(FieldLabel, Object.assign({
     htmlFor: id,
     color: 'theme.primary',
     error: error
-  }, views), label)), /*#__PURE__*/React.createElement(Element, Object.assign({
+  }, views == null ? void 0 : views.label), label)), /*#__PURE__*/React.createElement(Element, Object.assign({
     as: "textarea",
     id: id,
     name: name,
@@ -7490,10 +7406,10 @@ var TextAreaView = _ref => {
     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.
@@ -7561,7 +7477,7 @@ var TextFieldView = _ref => {
       onChangeText,
       shadow = {},
       views = {
-        box: {},
+        container: {},
         field: {},
         label: {},
         helperText: {},
@@ -7761,26 +7677,6 @@ var Sizes = {
   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'
   }
 };
 /**
@@ -7792,12 +7688,7 @@ var IconSizes$3 = {
   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
@@ -9593,8 +9484,7 @@ var CountryPickerView = _ref5 => {
         icon: {},
         label: {},
         dropDown: {},
-        helperText: {},
-        box: {}
+        helperText: {}
       },
       themeMode: elementMode
     } = _ref5,
@@ -9742,7 +9632,7 @@ var DatePickerView = _ref => {
       variant = 'default',
       shape = 'default',
       views = {
-        box: {},
+        container: {},
         label: {},
         helperText: {},
         text: {},
@@ -10025,7 +9915,7 @@ var ComboBoxView = _ref => {
       widthHeight: 12
     }),
     views: {
-      box: Object.assign({
+      container: Object.assign({
         width: '100%',
         padding: '6px 12px',
         borderBottom: filteredItems.length > 0 ? '1px solid #ccc' : '1px solid transparent'
@@ -10395,14 +10285,7 @@ var OTPInputView = _ref => {
       length = 6,
       helperText,
       placeholder = '',
-      views = {
-        container: {},
-        input: {},
-        box: {},
-        text: {},
-        label: {},
-        helperText: {}
-      },
+      views = {},
       size = 'md',
       shape = 'rounded',
       variant = 'outline',
@@ -10508,7 +10391,7 @@ var OTPInputView = _ref => {
       width: "100%",
       position: "relative",
       height: size === 'xs' ? '32px' : size === 'sm' ? '36px' : size === 'md' ? '40px' : size === 'lg' ? '48px' : '56px'
-    }, views.box), slot.char ? (/*#__PURE__*/React.createElement(View, Object.assign({
+    }, views.container), slot.char ? (/*#__PURE__*/React.createElement(View, Object.assign({
       textAlign: "center",
       fontSize: size === 'xs' ? '14px' : size === 'sm' ? '16px' : size === 'md' ? '18px' : size === 'lg' ? '20px' : '24px',
       fontWeight: "medium"
@@ -12276,23 +12159,19 @@ var OverlayAlignments = {
   },
   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'
   }
 };
 /**
@@ -15195,7 +15074,7 @@ var SeparatorView = _ref => {
       variant = 'solid',
       thickness = 'thin',
       color,
-      spacing = '16px',
+      spacing = '0px',
       label,
       decorative = false,
       views
@@ -15220,7 +15099,7 @@ var SeparatorView = _ref => {
       alignItems: "center",
       justifyContent: "center",
       width: "100%",
-      margin: spacing
+      padding: spacing
     }, ariaProps, props), /*#__PURE__*/React.createElement(View, Object.assign({
       height: "0px",
       flexGrow: 1,
@@ -15243,7 +15122,7 @@ var SeparatorView = _ref => {
       borderTopWidth: borderWidth,
       borderTopStyle: borderStyle,
       borderTopColor: separatorColor,
-      margin: spacing
+      padding: spacing
     }, DefaultSeparatorStyles.container, ariaProps, views == null ? void 0 : views.container, props));
   }
   // For vertical separator
@@ -15253,7 +15132,7 @@ var SeparatorView = _ref => {
     borderLeftWidth: borderWidth,
     borderLeftStyle: borderStyle,
     borderLeftColor: separatorColor,
-    margin: spacing
+    padding: spacing
   }, DefaultSeparatorStyles.container, ariaProps, views == null ? void 0 : views.container, props));
 };