@cube-dev/ui-kit 0.9.10 → 0.10.1

package/es/components/overlays/Tooltip/Tooltip.js

@@ -1,92 +1,99 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
+import { forwardRef, useContext, useImperativeHandle, useRef, } from 'react';
 import { mergeProps } from '../../../utils/react';
 import { createDOMRef } from '@react-spectrum/utils';
 import { TooltipContext } from './context';
 import { useTooltip } from '@react-aria/tooltip';
-import { Base } from '../../Base';
-import { extractStyles } from '../../../utils/styles';
-import { CONTAINER_STYLES } from '../../../styles/list';
-import { useContextStyles } from '../../../providers/StylesProvider';
+import { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty';
 import { getOverlayTransitionCSS } from '../../../utils/transitions';
-const TOOLTIP_STYLES = {
-    display: 'block',
-    fill: '#dark.85',
-    color: '#white',
-    width: 'initial 36x max-content',
-    radius: true,
-    padding: '.75x 1x',
-    preset: 't3',
-    backdropFilter: 'blur(.5x)',
-    whiteSpace: 'pre-line',
-};
-const TIP_STYLES = {
-    position: 'absolute',
-    width: '1px',
-    height: '1px',
-    border: '.5x #clear',
-    borderTop: '.5x solid #dark.85',
-    borderBottom: '0',
-    top: {
-        '': 'initial',
-        '[data-placement="left"] | [data-placement="right"]': '50%',
-        '[data-placement="top"]': '100%',
+import styled from 'styled-components';
+const TooltipElement = tasty({
+    styles: {
+        display: 'block',
+        fill: '#dark.85',
+        color: '#white',
+        width: 'initial 36x max-content',
+        radius: true,
+        padding: '.75x 1x',
+        preset: 't3',
+        backdropFilter: 'blur(.5x)',
+        whiteSpace: 'pre-line',
+        pointerEvents: {
+            '': 'none',
+            material: 'auto',
+        },
     },
-    left: {
-        '': 'initial',
-        '[data-placement="top"] | [data-placement="bottom"]': '50%',
-        '[data-placement="left"]': '100%',
+});
+const TooltipTipElement = tasty({
+    styles: {
+        position: 'absolute',
+        width: '1px',
+        height: '1px',
+        border: '.5x #clear',
+        borderTop: '.5x solid #dark.85',
+        borderBottom: '0',
+        top: {
+            '': 'initial',
+            '[data-placement="left"] | [data-placement="right"]': '50%',
+            '[data-placement="top"]': '100%',
+        },
+        left: {
+            '': 'initial',
+            '[data-placement="top"] | [data-placement="bottom"]': '50%',
+            '[data-placement="left"]': '100%',
+        },
+        right: {
+            '': 'initial',
+            '[data-placement="right"]': '100%',
+        },
+        bottom: {
+            '': 'initial',
+            '[data-placement="bottom"]': '100%',
+        },
+        transform: {
+            '': 'translate((-.375x - 1px), 0)',
+            '[data-placement="bottom"]': 'translate((-.375x - 1px), 0) rotate(180deg)',
+            '[data-placement="left"]': 'translate(-.375x, (-.375x - 1px)) rotate(270deg)',
+            '[data-placement="right"]': 'translate(.375x, (-.375x - 1px)) rotate(90deg)',
+        },
     },
-    right: {
-        '': 'initial',
-        '[data-placement="right"]': '100%',
-    },
-    bottom: {
-        '': 'initial',
-        '[data-placement="bottom"]': '100%',
-    },
-    transform: {
-        '': 'translate((-.375x - 1px), 0)',
-        '[data-placement="bottom"]': 'translate((-.375x - 1px), 0) rotate(180deg)',
-        '[data-placement="left"]': 'translate(-.375x, (-.375x - 1px)) rotate(270deg)',
-        '[data-placement="right"]': 'translate(.375x, (-.375x - 1px)) rotate(90deg)',
-    },
-};
+});
+const StyledTooltipElement = styled(TooltipElement) `
+  ${(props) => {
+    return getOverlayTransitionCSS({
+        placement: props === null || props === void 0 ? void 0 : props['data-position'],
+        minOffset: props === null || props === void 0 ? void 0 : props['data-min-offset'],
+        minScale: props === null || props === void 0 ? void 0 : props['data-min-scale'],
+    });
+}}
+`;
 function Tooltip(props, ref) {
     let { ref: overlayRef, arrowProps, state, overlayProps, minOffset, minScale, ...tooltipProviderProps } = useContext(TooltipContext);
     let defaultRef = useRef(null);
-    overlayRef = overlayRef || defaultRef;
+    const finalOverlayRef = overlayRef !== null && overlayRef !== void 0 ? overlayRef : defaultRef;
     props = mergeProps(props, tooltipProviderProps);
     let { placement = 'top', isOpen, tipStyles, showIcon, isMaterial, ...otherProps } = props;
-    const styles = extractStyles(otherProps, CONTAINER_STYLES, {
-        ...TOOLTIP_STYLES,
-        pointerEvents: isMaterial ? 'auto' : 'none',
-        ...useContextStyles('Tooltip', props),
-    });
-    tipStyles = {
-        ...TIP_STYLES,
-        ...useContextStyles('Tooltip_Tip'),
-        ...tipStyles,
-    };
+    const styles = extractStyles(otherProps, CONTAINER_STYLES);
     let { tooltipProps } = useTooltip(props, state);
     // Sync ref with overlayRef from context.
-    useImperativeHandle(ref, () => overlayRef ? createDOMRef(overlayRef) : null);
+    useImperativeHandle(ref, () => createDOMRef(finalOverlayRef));
     if (typeof minOffset === 'number') {
         minOffset = `${minOffset}px`;
     }
     if (typeof minScale === 'number') {
         minScale = String(minScale);
     }
-    return (_jsxs(Base, { ...tooltipProps, ...overlayProps, css: getOverlayTransitionCSS({ placement, minOffset, minScale }), styles: styles, mods: {
+    return (_jsxs(StyledTooltipElement, { ...tooltipProps, ...overlayProps, styles: styles, mods: {
             open: isOpen,
-        }, "data-placement": placement, ref: overlayRef, children: [props.children, _jsx(Base, { "data-placement": placement, styles: tipStyles, ...arrowProps }, void 0)] }, void 0));
+            material: isMaterial,
+        }, "data-min-offset": minOffset, "data-min-slale": minScale, "data-placement": placement, ref: overlayRef, children: [props.children, _jsx(TooltipTipElement, { "data-placement": placement, styles: tipStyles, ...arrowProps }, void 0)] }, void 0));
 }
 /**
  * Display container for Tooltip content. Has a directional arrow dependent on its placement.

package/es/components/overlays/Tooltip/TooltipProvider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
@@ -14,7 +14,7 @@ function TooltipProvider(props) {
     const { title, children, tooltipStyles, width, ...otherProps } = props;
     useEffect(() => {
         setRendered(true);
-    });
+    }, []);
     return rendered ? (_jsxs(TooltipTrigger, { ...otherProps, children: [children, _jsx(Tooltip, { styles: tooltipStyles, ...(width ? { width } : null), children: title }, void 0)] }, void 0)) : (_jsx(_Fragment, { children: "children" }, void 0));
 }
 let _TooltipProvider = TooltipProvider;

package/es/components/overlays/Tooltip/TooltipTrigger.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 

package/es/components/overlays/Tooltip/context.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 

package/es/components/pickers/ComboBox/ComboBox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
@@ -16,11 +16,8 @@ import { useFormProps } from '../../forms/Form';
 import { useHover } from '@react-aria/interactions';
 import { useProviderProps } from '../../../provider';
 import { useFilter } from '@react-aria/i18n';
-import { Base } from '../../Base';
-import { extractStyles } from '../../../utils/styles';
-import { BLOCK_STYLES, OUTER_STYLES } from '../../../styles/list';
-import { useFocus } from '../../../utils/interactions';
-import { useContextStyles } from '../../../providers/StylesProvider';
+import { BLOCK_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
+import { useFocus } from '../../../utils/react/interactions';
 import { modAttrs, useCombinedRefs } from '../../../utils/react';
 import { FieldWrapper } from '../../forms/FieldWrapper';
 import { ListBoxPopup } from '../Select/Select';
@@ -32,31 +29,50 @@ import { DEFAULT_INPUT_STYLES } from '../../forms/TextInput/TextInputBase';
 import { useOverlayPosition } from '@react-aria/overlays';
 import { OverlayWrapper } from '../../overlays/OverlayWrapper';
 const CaretDownIcon = () => (_jsx("svg", { "aria-hidden": "true", width: "14", height: "14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.49 4.102H2.51c-.269 0-.42.284-.253.478l4.49 5.206a.342.342 0 00.506 0l4.49-5.206c.167-.194.016-.478-.253-.478z", fill: "currentColor" }, void 0) }, void 0));
-const COMBOBOX_STYLES = {
-    position: 'relative',
-    display: 'grid',
-};
-const INPUT_STYLES = {
-    ...DEFAULT_INPUT_STYLES,
-    width: '100%',
-};
-const TRIGGER_STYLES = {
-    display: 'grid',
-    placeItems: 'center',
-    placeContent: 'center',
-    placeSelf: 'stretch',
-    radius: 'right',
-    padding: '0 1x',
-    color: 'inherit',
-    border: 0,
-    fill: {
-        '': '#purple.0',
-        hovered: '#dark.04',
-        pressed: '#dark.08',
-        disabled: '#clear',
+const ComboBoxWrapperElement = tasty({
+    styles: {
+        position: 'relative',
+        display: 'grid',
+        zIndex: {
+            '': 'initial',
+            focused: 1,
+        },
     },
-    cursor: 'pointer',
-};
+});
+const InputElement = tasty({
+    as: 'input',
+    styles: {
+        ...DEFAULT_INPUT_STYLES,
+        width: '100%',
+    },
+});
+const TriggerElement = tasty({
+    as: 'button',
+    styles: {
+        display: 'grid',
+        placeItems: 'center',
+        placeContent: 'center',
+        placeSelf: 'stretch',
+        radius: 'right',
+        padding: '0 1x',
+        color: {
+            '': '#dark.75',
+            hovered: '#dark.75',
+            pressed: '#purple',
+            '[disabled]': '#dark.30',
+        },
+        border: 0,
+        reset: 'button',
+        margin: 0,
+        fill: {
+            '': '#dark.0',
+            hovered: '#dark.04',
+            pressed: '#purple.10',
+            disabled: '#clear',
+        },
+        cursor: 'pointer',
+    },
+});
 function ComboBox(props, ref) {
     var _a;
     props = useProviderProps(props);
@@ -71,21 +87,8 @@ function ComboBox(props, ref) {
         defaultFilter: filter || contains,
         allowsEmptyCollection: isAsync,
     });
-    const outerStyles = extractStyles(otherProps, OUTER_STYLES, {
-        ...COMBOBOX_STYLES,
-        ...useContextStyles('ComboBox_Wrapper', props),
-        ...styles,
-    });
-    inputStyles = extractStyles(otherProps, BLOCK_STYLES, {
-        ...INPUT_STYLES,
-        ...useContextStyles('ComboBox', props),
-        ...inputStyles,
-    });
-    triggerStyles = {
-        ...TRIGGER_STYLES,
-        ...useContextStyles('ComboBox_Trigger', props),
-        ...triggerStyles,
-    };
+    const outerStyles = extractStyles(otherProps, OUTER_STYLES, styles);
+    inputStyles = extractStyles(otherProps, BLOCK_STYLES, inputStyles);
     ref = useCombinedRefs(ref);
     inputRef = useCombinedRefs(inputRef);
     triggerRef = useCombinedRefs(triggerRef);
@@ -123,7 +126,7 @@ function ComboBox(props, ref) {
     let validationIcon = isInvalid ? (_jsx(WarningOutlined, { style: { color: 'var(--danger-color)' } }, void 0)) : (_jsx(CheckOutlined, { style: { color: 'var(--success-color)' } }, void 0));
     let validation = cloneElement(validationIcon);
     let comboBoxWidth = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
-    let comboBoxField = (_jsxs(Base, { ref: ref, qa: "ComboBoxWrapper", ...modAttrs({
+    let comboBoxField = (_jsxs(ComboBoxWrapperElement, { ref: ref, qa: qa || 'ComboBox', ...modAttrs({
             invalid: isInvalid,
             valid: validationState === 'valid',
             disabled: isDisabled,
@@ -131,13 +134,13 @@ function ComboBox(props, ref) {
             focused: isFocused,
         }), styles: outerStyles, style: {
             zIndex: isFocused ? 1 : 'initial',
-        }, "data-size": size, children: [_jsx(Base, { qa: qa || 'ComboBox', as: "input", ...mergeProps(inputProps, hoverProps, focusProps), ref: inputRef, autoComplete: autoComplete, styles: inputStyles, ...modAttrs({
+        }, "data-size": size, children: [_jsx(InputElement, { qa: "Input", ...mergeProps(inputProps, hoverProps, focusProps), ref: inputRef, autoComplete: autoComplete, styles: inputStyles, ...modAttrs({
                     invalid: isInvalid,
                     valid: validationState === 'valid',
                     disabled: isDisabled,
                     hovered: isHovered,
                     focused: isFocused,
-                }), "data-size": size }, void 0), prefix ? (_jsx(Prefix, { onWidthChange: setPrefixWidth, padding: "0 1x 0 1.5x", opacity: isDisabled ? '@disabled-opacity' : false, placeItems: "center", outerGap: 0, children: prefix }, void 0)) : null, _jsxs(Suffix, { onWidthChange: setSuffixWidth, opacity: isDisabled ? '@disabled-opacity' : false, children: [validationState || isLoading ? (_jsxs(Space, { gap: false, padding: "0 1x", children: [validationState && !isLoading ? validation : null, isLoading && _jsx(LoadingOutlined, {}, void 0)] }, void 0)) : null, suffix, !hideTrigger ? (_jsx(Base, { as: "button", ...mergeProps(buttonProps, triggerFocusProps, triggerHoverProps), ...modAttrs({
+                }), "data-size": size }, void 0), prefix ? (_jsx(Prefix, { onWidthChange: setPrefixWidth, padding: "0 1x 0 1.5x", opacity: isDisabled ? '@disabled-opacity' : false, placeItems: "center", outerGap: 0, children: prefix }, void 0)) : null, _jsxs(Suffix, { onWidthChange: setSuffixWidth, opacity: isDisabled ? '@disabled-opacity' : false, children: [validationState || isLoading ? (_jsxs(Space, { gap: false, padding: "0 1x", children: [validationState && !isLoading ? validation : null, isLoading && _jsx(LoadingOutlined, {}, void 0)] }, void 0)) : null, suffix, !hideTrigger ? (_jsx(TriggerElement, { ...mergeProps(buttonProps, triggerFocusProps, triggerHoverProps), ...modAttrs({
                             pressed: isTriggerPressed,
                             focused: isTriggerFocused,
                             hovered: isTriggerHovered,

package/es/components/pickers/Menu/Menu.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
@@ -12,36 +12,31 @@ import { useMenu } from '@react-aria/menu';
 import { mergeProps, useSyncRef } from '@react-aria/utils';
 import { useDOMRef } from '@react-spectrum/utils';
 import { useTreeState } from '@react-stately/tree';
-import { useContextStyles } from '../../../providers/StylesProvider';
-import { CONTAINER_STYLES } from '../../../styles/list';
-import { extractStyles } from '../../../utils/styles';
+import { CONTAINER_STYLES, extractStyles, } from '../../../tasty';
 import { StyledMenu, StyledMenuHeader } from './styled';
 import { MenuItem } from './MenuItem';
 import { MenuSection } from './MenuSection';
 import { useMenuContext } from './context';
 function Menu(props, ref) {
+    const { header, footer } = props;
     const domRef = useDOMRef(ref);
     const contextProps = useMenuContext();
-    const { header, footer, styles } = props;
-    const completeProps = {
-        ...mergeProps(contextProps, props, {
-            mods: {
-                footer: !!footer,
-                header: !!header,
-            },
-        }),
-    };
+    const completeProps = mergeProps(contextProps, props);
     const state = useTreeState(completeProps);
+    const items = [...state.collection];
+    const hasSections = items.some((item) => item.type === 'section');
     const { menuProps } = useMenu(completeProps, state, domRef);
-    const containerStyles = extractStyles(completeProps, CONTAINER_STYLES);
-    const menuStyles = useContextStyles('Menu', props) || {};
-    const completeStyles = {
-        ...menuStyles,
-        ...containerStyles,
-        ...styles,
+    const styles = extractStyles(completeProps, CONTAINER_STYLES);
+    const baseProps = {
+        styles,
+        mods: {
+            sections: hasSections,
+            footer: !!footer,
+            header: !!header,
+        },
     };
     useSyncRef(contextProps, domRef);
-    return (_jsxs(StyledMenu, { ...mergeProps(menuProps, completeProps), styles: completeStyles, ref: domRef, children: [header && _jsx(StyledMenuHeader, { children: header }, void 0), [...state.collection].map((item) => {
+    return (_jsxs(StyledMenu, { ...mergeProps(menuProps, completeProps, baseProps), ref: domRef, children: [header && _jsx(StyledMenuHeader, { children: header }, void 0), items.map((item) => {
                 if (item.type === 'section') {
                     return (_jsx(MenuSection, { item: item, state: state, onAction: completeProps.onAction }, item.key));
                 }

package/es/components/pickers/Menu/MenuButton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 

package/es/components/pickers/Menu/MenuItem.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 

package/es/components/pickers/Menu/MenuSection.js

@@ -1,24 +1,23 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { MenuItem } from './MenuItem';
 import { useMenuSection } from '@react-aria/menu';
-import { StyledMenu, StyledMenuItem, StyledMenuSectionHeading } from './styled';
+import { StyledMenu, StyledMenuSection, StyledMenuSectionHeading, } from './styled';
 /** @private */
 export function MenuSection(props) {
-    let { item, state, onAction } = props;
-    let { itemProps, headingProps, groupProps } = useMenuSection({
-        heading: item.rendered,
+    const { item, state, onAction } = props;
+    const heading = item.rendered;
+    const { itemProps, headingProps, groupProps } = useMenuSection({
+        heading,
         'aria-label': item['aria-label'],
     });
-    const isFirstKey = item.key === state.collection.getFirstKey();
-    return (_jsx(Fragment, { children: _jsxs(StyledMenuItem, { ...itemProps, children: [item.rendered && (_jsx(StyledMenuSectionHeading, { ...headingProps, mods: { first: isFirstKey }, children: item.rendered }, void 0)), _jsx(StyledMenu, { ...groupProps, mods: { section: true }, children: [...item.childNodes].map((node) => {
+    return (_jsx(_Fragment, { children: _jsxs(StyledMenuSection, { ...itemProps, children: [heading && (_jsx(StyledMenuSectionHeading, { ...headingProps, children: heading }, void 0)), _jsx(StyledMenu, { ...groupProps, mods: { section: true }, children: [...item.childNodes].map((node) => {
                         let item = (_jsx(MenuItem, { item: node, state: state, onAction: onAction }, node.key));
                         if (node.wrapper) {
                             item = node.wrapper(item);

package/es/components/pickers/Menu/MenuTrigger.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 

package/es/components/pickers/Menu/context.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 

package/es/components/pickers/Menu/styled.js

@@ -1,23 +1,32 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
-import { styled } from '../../../styled';
+import { tasty } from '../../../tasty';
 import { Space } from '../../layout/Space';
-export const StyledMenu = styled({
-    tag: 'ul',
-    name: 'Menu',
+export const StyledMenu = tasty({
+    as: 'ul',
+    qa: 'Menu',
     styles: {
         display: 'flex',
         flow: 'column',
+        gap: {
+            '': '1bw',
+            sections: '',
+        },
         fill: '#white',
         margin: '0',
         padding: {
             '': '0.5x',
-            section: '0',
+            section: '0.5x',
+            sections: '0', // has sections inside
+        },
+        overflow: {
+            '': 'hidden',
+            section: '',
         },
         border: {
             '': '#dark-05',
@@ -32,19 +41,19 @@ export const StyledMenu = styled({
         },
     },
 });
-export const StyledDivider = styled({
-    tag: 'li',
+export const StyledDivider = tasty({
+    as: 'li',
     styles: {
         display: 'flex',
         flow: 'column',
         margin: '0 -0.5x',
         listStyle: 'none',
         fill: '#dark.05',
-        height: '1px',
+        height: '1bw',
     },
 });
-export const StyledMenuHeader = styled(Space, {
-    tag: 'li',
+export const StyledMenuHeader = tasty(Space, {
+    as: 'li',
     styles: {
         fill: '#light',
         color: '#dark-02',
@@ -57,12 +66,24 @@ export const StyledMenuHeader = styled(Space, {
         radius: '1r 1r 0 0',
     },
 });
-export const StyledMenuItem = styled({
-    tag: 'li',
+export const StyledMenuSection = tasty({
+    as: 'li',
+    styles: {
+        display: 'flex',
+        flow: 'column',
+        margin: '0',
+        padding: '0',
+        listStyle: 'none',
+        fill: '#white',
+    },
+});
+export const StyledMenuItem = tasty({
+    as: 'li',
     styles: {
         display: 'flex',
         flow: 'column',
-        margin: '1px 0',
+        gap: '1bw',
+        margin: '0',
         padding: '0',
         listStyle: 'none',
         fill: '#white',
@@ -72,12 +93,13 @@ export const StyledMenuItem = styled({
         },
     },
 });
-export const StyledMenuSectionHeading = styled(Space, {
-    tag: 'header',
+export const StyledMenuSectionHeading = tasty(Space, {
+    as: 'header',
     styles: {
-        color: '#dark-04',
-        preset: 'c1',
-        padding: '(0.75x - 1bw) (1.5x - 1bw)',
+        color: '#dark-03',
+        fill: '#light',
+        preset: 'c2',
+        padding: '(1x - 1bw) 2x',
         placeContent: 'space-between',
         align: 'start',
     },