@app-studio/web 0.8.92 → 0.8.94

package/dist/web.cjs.development.js

@@ -470,20 +470,20 @@ var HeadingSizes = {
  * Font sizes following typography guidelines
  */
 var FontSizes = {
-  xs: '12px',
-  sm: '14px',
-  md: '16px',
-  lg: '18px',
+  xs: '10px',
+  sm: '12px',
+  md: '14px',
+  lg: '16px',
   xl: '20px'
 };
 /**
  * Line heights following typography guidelines
  */
 var LineHeights = {
-  xs: '16px',
-  sm: '20px',
-  md: '24px',
-  lg: '28px',
+  xs: '14px',
+  sm: '16px',
+  md: '20px',
+  lg: '22px',
   xl: '28px'
 };
 /**
@@ -3265,7 +3265,7 @@ var BadgeSizes = {
     height: '32px',
     padding: '0 12px',
     // Typography
-    fontSize: '14px',
+    fontSize: '16px',
     fontWeight: '500',
     lineHeight: '32px'
   },
@@ -3275,7 +3275,7 @@ var BadgeSizes = {
     height: '36px',
     padding: '0 14px',
     // Typography
-    fontSize: '16px',
+    fontSize: '20px',
     fontWeight: '500',
     lineHeight: '36px'
   }
@@ -3401,18 +3401,6 @@ var BadgeView = _ref => {
 // Badge component that displays a small indicator, typically used for counts or status
 var Badge = props => /*#__PURE__*/React__default.createElement(BadgeView, Object.assign({}, props));
 
-var useButtonState = () => {
-  var [isHovered, setIsHovered] = React__default.useState(false);
-  // This custom react hook 'useButtonState' is defined for managing the state of a button, especially for hover interactions.
-  return {
-    isHovered,
-    setIsHovered
-  };
-  // The 'setIsHovered' function is used to update the value of 'isHovered' state when the hover status of the button changes.
-  // A state variable 'isHovered' is declared with its initial value set to 'false', indicating that the button is not hovered by default.
-};
-// The hook returns an object containing 'isHovered' state and the 'setIsHovered' function to enable state management from the consumer component.
-
 // This function initializes the Link component's state using the useState hook and exposes its state and setter function.
 var useLinkState = () => {
   var [isHovered, setIsHovered] = React.useState(false);
@@ -3698,70 +3686,60 @@ var Loader = LoaderComponent;
  */
 /**
  * Button sizes following the 4px grid system
- */
-var ButtonSizes = {
+ */var ButtonSizes = {
   xs: {
-    // Height: 24px (6 × 4px)
+    minHeight: 3 * 4,
+    paddingTop: 1,
+    paddingBottom: 1,
+    paddingLeft: 2,
+    paddingRight: 2,
+    fontSize: 10,
+    fontWeight: '500',
+    lineHeight: 14,
+    letterSpacing: '-0.01em'
+  },
+  sm: {
     minHeight: 4 * 4,
-    paddingTop: 2,
-    paddingBottom: 2,
-    paddingLeft: 4,
-    paddingRight: 4,
-    // Typography
+    paddingTop: 4,
+    paddingBottom: 4,
+    paddingLeft: 8,
+    paddingRight: 8,
     fontSize: 12,
     fontWeight: '500',
-    lineHeight: 20,
+    lineHeight: 16,
     letterSpacing: '-0.01em'
   },
-  sm: {
-    // Height: 32px (8 × 4px)
+  md: {
     minHeight: 6 * 4,
     paddingTop: 6,
     paddingBottom: 6,
     paddingLeft: 12,
     paddingRight: 12,
-    // Typography
-    fontSize: 12,
+    fontSize: 14,
     fontWeight: '500',
-    lineHeight: 12,
+    lineHeight: 18,
     letterSpacing: '-0.01em'
   },
-  md: {
-    // Height: 40px (10 × 4px) - standard height for interactive elements
+  lg: {
     minHeight: 8 * 4,
     paddingTop: 8,
     paddingBottom: 8,
     paddingLeft: 16,
     paddingRight: 16,
-    // Typography
     fontSize: 16,
     fontWeight: '500',
-    lineHeight: 16,
+    lineHeight: 18,
     letterSpacing: '-0.01em'
   },
-  lg: {
+  xl: {
     minHeight: 10 * 4,
     paddingTop: 10,
     paddingBottom: 10,
     paddingLeft: 20,
     paddingRight: 20,
-    // Typography
-    fontSize: 16,
-    fontWeight: '500',
-    lineHeight: 20,
-    letterSpacing: '-0.01em'
-  },
-  xl: {
-    // Height: 60px (15 × 4px)
-    minHeight: 12 * 4,
-    paddingTop: 12,
-    paddingBottom: 12,
-    paddingLeft: 24,
-    paddingRight: 24,
-    // Typography
-    fontSize: 18,
+    fontSize: 20,
     fontWeight: '500',
-    lineHeight: 24,
+    lineHeight: 22,
     letterSpacing: '-0.01em'
   }
 };
@@ -3997,25 +3975,14 @@ var ButtonView = _ref => {
 
 // Importing a custom hook to manage the state specific to the button component.
 var ButtonComponent = props => {
-  // Importing the view part of the button, which is presumably a presentational component.
-  var {
-    isHovered,
-    setIsHovered
-  } = useButtonState();
-  // Defining the button component with generic React Functional Component type augmented with ButtonProps type.
-  var handleHover = () => setIsHovered(!isHovered);
+  var [ref, hover] = appStudio.useHover();
   // Destructuring the state and state update function from the custom hook for button state management.
   return (
     /*#__PURE__*/
     // Defines a function to toggle the hover state of the button.
     React__default.createElement(ButtonView, Object.assign({
-      isHovered: isHovered,
-      // Rendering the ButtonView component and spreading the received props on it.
-      setIsHovered: setIsHovered,
-      // Passing the isHovered state and the setIsHovered function to the ButtonView.
-      onMouseEnter: handleHover,
-      // Binding handleHover function to onMouseEnter and onMouseLeave events to toggle hover effect.
-      onMouseLeave: handleHover
+      ref: ref,
+      isHovered: hover
     }, props))
   );
   // Exports the Button component for use in other parts of the application.
@@ -6523,13 +6490,12 @@ var useSelectState = _ref => {
   var {
     placeholder,
     isMulti,
-    options
+    options,
+    id = "select-" + Math.random().toString(36).substr(2, 9)
   } = _ref;
   // Determines the default value based on the 'placeholder' and 'isMulti' props, setting to an empty array for multi-select or an empty string/single default option
   var defaultValue = placeholder ? isMulti ? [] : '' // If there's a placeholder, set default to empty array for multi-select or empty string for single select
-  : Array.isArray(options) && options.length > 0 ? options[0].value : ''; // If no placeholder, use the first option value if available, otherwise undefined
-  // State hook for managing visibility of the Select dropdown, initially set to hidden
-  var [hide, setHide] = React__default.useState(true);
+  : Array.isArray(options) && options.length > 0 ? options[0].value : isMulti ? [] : ''; // If no placeholder, use the first option value if available, otherwise empty array for multi-select or empty string for single select
   // State hook for tracking mouse hover status over the Select component
   var [isHovered, setIsHovered] = React__default.useState(false);
   // State hook for tracking focus status of the Select input field
@@ -6538,8 +6504,11 @@ var useSelectState = _ref => {
   var [value, setValue] = React__default.useState(defaultValue);
   // State hook for keeping track of the currently highlighted index in the options list
   var [highlightedIndex, setHighlightedIndex] = React__default.useState(0);
+  // State hook for managing visibility of the Select dropdown, initially set to hidden
+  var [hide, setHide] = React__default.useState(true);
   // Returns an object containing all stateful values and their associated setters to manage the Select component's state
   return {
+    id,
     value,
     setValue,
     hide,
@@ -6754,7 +6723,7 @@ var FieldContent = _ref => {
     flexWrap: "nowrap",
     alignItems: "center",
     justifyContent: "space-between",
-    marginBottom: 8,
+    marginBottom: 2,
     // Visual properties
     borderStyle: "solid",
     borderColor: color,
@@ -6776,10 +6745,9 @@ var FieldIcons = _ref => {
     props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   return /*#__PURE__*/React__default.createElement(appStudio.Center, Object.assign({
     gap: 10,
-    right: 16,
+    right: 10,
     zIndex: 500,
-    flexWrap: "nowrap",
-    position: "absolute"
+    flexWrap: "nowrap"
   }, props), children);
 };
 
@@ -6963,20 +6931,27 @@ var Item = _ref => {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   // Handles the click event on an option by invoking the callback with the selected option's value
-  var handleOptionClick = option => callback(option);
+  var handleOptionClick = (e, option) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (typeof callback === 'function') {
+      callback(option);
+    }
+  };
   // Toggles the hover state on the item
   var handleHover = () => setIsHovered(!isHovered);
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "li",
     // Layout properties
     margin: 0,
-    paddingVertical: 12,
-    paddingHorizontal: 16,
+    paddingVertical: 8,
+    paddingHorizontal: 8,
     listStyleType: "none",
+    cursor: "pointer",
     // Event handlers
     onMouseEnter: handleHover,
     onMouseLeave: handleHover,
-    onClick: () => handleOptionClick(option.value),
+    onClick: e => handleOptionClick(e, option.value),
     // Visual properties
     backgroundColor: isHovered ? 'color.gray.100' : 'transparent',
     borderRadius: "4px" // Subtle rounded corners for items
@@ -7022,7 +6997,7 @@ var SelectBox = _ref2 => {
     width: '95%',
     height: '100%',
     border: 'none',
-    paddingVertical: 12,
+    paddingVertical: 4,
     paddingHorizontal: 0,
     // Typography properties
     fontSize: appStudio.Typography.fontSizes[size],
@@ -7102,34 +7077,16 @@ var DropDown = _ref5 => {
   } = _ref5;
   var itemStates = useItemState();
   var handleCallback = option => callback(option);
-  // Shadow styles for the dropdown
-  var shadow = {
-    boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
-  };
+  // Shadow styles for the dropdown - now applied directly in the Element
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "ul",
     role: "dropdown",
-    top: "100%",
     width: "100%",
     display: "flex",
     flexDirection: "column",
-    position: "absolute",
-    marginTop: 8,
-    marginLeft: 0,
-    marginRight: 0,
-    marginBottom: 0,
-    padding: 0,
-    maxHeight: "240px" // 60 × 4px grid
-    ,
-    overflowY: "auto",
-    zIndex: 1000,
     backgroundColor: "color.white",
-    borderRadius: "8px" // Consistent with design system (rounded-md)
-    ,
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderColor: "color.gray.200",
     transition: "all 0.2s ease",
+    margin: 0,
     style: {
       scrollbarWidth: 'thin',
       scrollbarColor: 'rgba(0, 0, 0, 0.2) transparent',
@@ -7144,7 +7101,7 @@ var DropDown = _ref5 => {
         borderRadius: '4px'
       }
     }
-  }, shadow, views == null ? void 0 : views.dropDown), options.length > 0 && options.map((option, index) => (/*#__PURE__*/React__default.createElement(Item, Object.assign({
+  }, views == null ? void 0 : views.dropDown), options && options.length > 0 && options.map((option, index) => (/*#__PURE__*/React__default.createElement(Item, Object.assign({
     key: option.value,
     size: size,
     style: views['text'],
@@ -7227,23 +7184,57 @@ var SelectView = _ref7 => {
       highlightedIndex
     } = _ref7,
     props = _objectWithoutPropertiesLoose(_ref7, _excluded4$6);
+  // close when *any* other select opens
+  React__default.useEffect(() => {
+    var handleCloseAll = () => setHide(true);
+    document.addEventListener('closeAllSelects', handleCloseAll);
+    return () => document.removeEventListener('closeAllSelects', handleCloseAll);
+  }, [setHide]);
+  // Add a global click handler to close the dropdown when clicking outside
+  React__default.useEffect(() => {
+    var handleGlobalClick = e => {
+      var target = e.target;
+      // Only close if clicking outside of this specific select component
+      if (!target.closest("#" + id) && !hide) {
+        setHide(true);
+      }
+    };
+    document.addEventListener('click', handleGlobalClick);
+    return () => {
+      document.removeEventListener('click', handleGlobalClick);
+    };
+  }, [id, hide, setHide]);
   var showLabel = !!(isFocused && label);
   var handleHover = () => setIsHovered(!isHovered);
   var handleFocus = () => setIsFocused(true);
   var handleClick = event => {
+    // tell all other selects to close
+    document.dispatchEvent(new Event('closeAllSelects'));
     if (event && event.stopPropagation) event.stopPropagation();
-    setHide(!hide);
-    setIsFocused(!isFocused);
+    // Toggle dropdown visibility
+    var newHideState = !hide;
+    setHide(newHideState);
+    setIsFocused(!newHideState); // Set focus state based on dropdown visibility
   };
   var handleCallback = React.useCallback(option => {
-    setHide(!hide);
+    // Close dropdown after selection
+    setHide(true);
+    // Tell all other selects to close
+    document.dispatchEvent(new Event('closeAllSelects'));
+    // Update value based on multi-select or single-select mode
     if (isMulti && Array.isArray(value)) {
-      !value.includes(option) && setValue([...value, option]);
+      if (!value.includes(option)) {
+        var newValue = [...value, option];
+        setValue(newValue);
+        if (onChange) onChange(option);
+      }
     } else {
       setValue(option);
+      if (onChange) onChange(option);
     }
-    if (onChange) onChange(option);
-  }, [hide, isMulti, value]);
+    // Set focus to indicate selection
+    setIsFocused(true);
+  }, [isMulti, value, setHide, setValue, onChange, setIsFocused]);
   var handleRemoveOption = valueOption => {
     if (Array.isArray(value) && value.includes(valueOption)) {
       var newValue = value.filter(option => option !== valueOption);
@@ -7251,11 +7242,24 @@ var SelectView = _ref7 => {
     }
   };
   return /*#__PURE__*/React__default.createElement(FieldContainer, {
+    style: {
+      position: 'relative',
+      width: '100%',
+      display: 'inline-block'
+    },
+    id: id,
     role: "SelectBox",
     helperText: helperText,
     error: error,
     views: views,
-    onClick: isDisabled || isReadOnly ? () => {} : handleClick
+    onClick: e => {
+      // Stop propagation to prevent clicks from bubbling up
+      e.stopPropagation();
+      // Only handle click if not disabled or readonly
+      if (!(isDisabled || isReadOnly)) {
+        handleClick(e);
+      }
+    }
   }, /*#__PURE__*/React__default.createElement(FieldContent, {
     label: label,
     size: size,
@@ -7305,39 +7309,78 @@ var SelectView = _ref7 => {
     orientation: "up",
     widthHeight: IconSizes$2[size],
     style: views.icon
-  })))))), !hide && (/*#__PURE__*/React__default.createElement(DropDown, {
+  })))))), !hide && options.length > 0 && (/*#__PURE__*/React__default.createElement(appStudio.Element, {
+    onClick: e => e.stopPropagation(),
+    style: {
+      position: 'absolute',
+      top: 'calc(100% + 4px)',
+      left: 0,
+      right: 0,
+      zIndex: 1000
+    }
+  }, /*#__PURE__*/React__default.createElement(DropDown, {
     size: size,
-    views: views,
+    views: Object.assign({}, views, {
+      dropDown: {
+        borderRadius: '6px',
+        border: '1px solid color.gray.200',
+        boxShadow: '0 8px 16px rgba(0,0,0,0.1)',
+        padding: '8px',
+        maxHeight: '240px',
+        overflowY: 'auto'
+      }
+    }),
     options: options,
     callback: handleCallback,
     highlightedIndex: highlightedIndex,
     setHighlightedIndex: setHighlightedIndex
-  })));
+  }))));
 };
 
 // Defines a functional component named 'SelectComponent', which is expected to receive 'SelectProps' as properties.
 var SelectComponent = props => {
+  // Ensure options is always an array
+  var safeProps = Object.assign({}, props, {
+    options: props.options || []
+  });
   // Invokes the 'useSelectState' hook with props to obtain stateful logic for the Select component.
-  var selectStates = useSelectState(props);
+  var selectStates = useSelectState(safeProps);
   // Renders the 'SelectView' component, passing along any states controlled by 'useSelectState' and all properties passed to 'SelectComponent'.
-  return /*#__PURE__*/React__default.createElement(SelectView, Object.assign({}, selectStates, props));
+  return /*#__PURE__*/React__default.createElement(SelectView, Object.assign({}, selectStates, safeProps, {
+    onClick: e => {
+      // Stop propagation to prevent the global click handler from closing other dropdowns
+      e.stopPropagation();
+      if (props.onClick) props.onClick(e);
+    }
+  }));
 };
 // Exports 'SelectComponent' as 'Select', making it available for import in other parts of the application.
 var Select = SelectComponent;
 
-// This file defines a custom hook for managing the state of a Switch component. It allows tracking whether the switch is hovered, and its on/off state based on 'isDisabled' and 'isChecked' properties.
+// This file defines a custom hook for managing the state of a Switch component.
+// It allows tracking whether the switch is hovered, and its on/off state based on 'isDisabled' and 'isChecked' properties.
 var useSwitchState = _ref => {
   var {
     isDisabled,
     isChecked
   } = _ref;
   var [isHovered, setIsHovered] = React__default.useState(false);
-  var [on, setOn] = React__default.useState(isDisabled ? !isDisabled : isChecked);
+  var [on, setOn] = React__default.useState(isChecked || false);
+  var [value, setValue] = React__default.useState(isChecked || false);
+  // Update the value when isChecked changes
+  React.useEffect(() => {
+    if (isChecked !== undefined) {
+      setOn(isChecked);
+      setValue(isChecked);
+    }
+  }, [isChecked]);
   return {
     isHovered,
     setIsHovered,
     on,
-    setOn
+    setOn,
+    value,
+    setValue
   };
 };
 
@@ -7353,68 +7396,68 @@ var useSwitchState = _ref => {
  */
 /**
  * Knob (circle) sizes for the Switch component
- * Following the 4px grid system
+ * Following the 4px grid system - dimensions réduites
  */
 var KnobSizes = {
   xs: {
+    height: '8px',
+    width: '8px'
+  },
+  sm: {
     height: '12px',
     width: '12px'
   },
-  sm: {
+  md: {
     height: '16px',
     width: '16px'
   },
-  md: {
+  lg: {
     height: '20px',
     width: '20px'
   },
-  lg: {
+  xl: {
     height: '24px',
     width: '24px'
-  },
-  xl: {
-    height: '28px',
-    width: '28px'
   }
 };
 /**
  * Slider (track) sizes for the Switch component
- * Following the 4px grid system
+ * Following the 4px grid system - dimensions réduites
  */
 var SliderSizes = {
   xs: {
-    height: '24px',
-    width: '40px'
+    height: '16px',
+    width: '36px'
   },
   sm: {
-    height: '28px',
-    width: '48px'
+    height: '20px',
+    width: '44px'
   },
   md: {
-    height: '32px',
-    width: '56px'
+    height: '24px',
+    width: '52px'
   },
   lg: {
-    height: '36px',
-    width: '64px'
+    height: '28px',
+    width: '60px'
   },
   xl: {
-    height: '40px',
-    width: '72px'
+    height: '32px',
+    width: '68px'
   }
 };
 /**
- * Padding for the Switch slider
+ * Padding for the Switch slider - ajusté pour les nouvelles dimensions
  * Following the 4px grid system
  */
 var SliderPadding = {
   xs: {
     paddingVertical: 4,
-    paddingHorizontal: 4
+    paddingHorizontal: 2
   },
   sm: {
     paddingVertical: 4,
-    paddingHorizontal: 4
+    paddingHorizontal: 2
   },
   md: {
     paddingVertical: 4,
@@ -7472,7 +7515,6 @@ var SwitchView = _ref => {
       isHovered = false,
       isDisabled = false,
       isReadOnly = false,
-      on,
       setOn,
       onChange,
       setValue = () => {},
@@ -7485,10 +7527,11 @@ var SwitchView = _ref => {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   var handleToggle = event => {
-    if (!isReadOnly) {
-      setValue(!value);
-      setOn(!on);
-      if (onChange) onChange(event.target.checked);
+    if (!isReadOnly && !isDisabled) {
+      var newValue = event.target.checked;
+      setValue(newValue);
+      setOn(newValue);
+      if (onChange) onChange(newValue);
     }
   };
   var handleHover = () => setIsHovered(!isHovered);
@@ -7536,27 +7579,39 @@ var SwitchView = _ref => {
     // Layout properties
     display: "flex",
     alignItems: "center",
-    justifyContent: activeChild ? 'space-between' : value ? 'flex-end' : 'flex-start',
+    justifyContent: value ? activeChild ? 'space-between' : 'flex-end' : inActiveChild ? 'space-between' : 'flex-start',
     marginBottom: 4,
     // Visual properties
     borderRadius: "9999px" // Full rounded for pill shape
     ,
     backgroundColor: isDisabled ? ColorSchemes.default.disabled : value ? isHovered ? ColorSchemes.states.hover.active : ColorSchemes.default.active : isHovered ? ColorSchemes.states.hover.inactive : ColorSchemes.default.inactive,
+    overflow: "hidden",
     // State properties
     cursor: "pointer",
     // Animation
     transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
   }, shadow, SliderPadding[size], SliderSizes[size], views['slider']), activeChild && value && (/*#__PURE__*/React__default.createElement(appStudio.View, {
     marginLeft: 8,
-    transition: "all 0.3s ease"
+    marginRight: 4,
+    transition: "all 0.3s ease",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%"
   }, activeChild)), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     borderRadius: "50%",
     backgroundColor: ColorSchemes.default.knob,
     boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
-    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+    zIndex: 1
   }, KnobSizes[size], views['circle'])), inActiveChild && !value && (/*#__PURE__*/React__default.createElement(appStudio.View, {
     marginRight: 8,
-    transition: "all 0.3s ease"
+    marginLeft: 4,
+    transition: "all 0.3s ease",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%"
   }, inActiveChild))), labelPosition === 'right' && label && (/*#__PURE__*/React__default.createElement(Text, {
     fontWeight: "500" // Medium weight for better readability
     ,
@@ -7842,7 +7897,7 @@ var TextFieldView = _ref => {
   var fieldStyles = Object.assign({
     // Layout properties
     margin: 0,
-    paddingVertical: 8,
+    paddingVertical: 4,
     paddingHorizontal: 0,
     width: '100%',
     height: '100%',
@@ -7982,24 +8037,24 @@ var useCheckboxState = _ref => {
  */
 var Sizes = {
   xs: {
+    height: '12px',
+    width: '12px'
+  },
+  sm: {
     height: '16px',
     width: '16px'
   },
-  sm: {
+  md: {
     height: '20px',
     width: '20px'
   },
-  md: {
+  lg: {
     height: '24px',
     width: '24px'
   },
-  lg: {
+  xl: {
     height: '28px',
     width: '28px'
-  },
-  xl: {
-    height: '32px',
-    width: '32px'
   }
 };
 /**
@@ -10237,7 +10292,7 @@ var ComboBoxView = _ref => {
     hint: placeholder,
     isClearable: false,
     left: /*#__PURE__*/React__default.createElement(SearchIcon, {
-      widthHeight: 12
+      widthHeight: 16
     }),
     views: {
       container: Object.assign({
@@ -12798,17 +12853,17 @@ var useNavigationMenuState = function useNavigationMenuState(defaultActiveItemId
 var NavigationMenuSizes = {
   sm: {
     padding: '8px 12px',
-    fontSize: '14px',
+    fontSize: '12px',
     fontWeight: '500'
   },
   md: {
     padding: '12px 16px',
-    fontSize: '16px',
+    fontSize: '14px',
     fontWeight: '500'
   },
   lg: {
     padding: '16px 20px',
-    fontSize: '18px',
+    fontSize: '16px',
     fontWeight: '500'
   }
 };
@@ -13756,8 +13811,8 @@ var HighlightStyles = {
   }),
   gradient: (color, secondaryColor) => ({
     background: "linear-gradient(135deg, " + color + ", " + (secondaryColor || color) + ")",
-    backgroundClip: 'text',
-    webkitBackgroundClip: 'text',
+    backgroundClip: 'text !important',
+    webkitBackgroundClip: 'text !important',
     color: 'transparent',
     webkitTextFillColor: 'transparent',
     display: 'inline-block',