@cube-dev/ui-kit 0.0.0-canary-b916e8d → 0.0.0-canary-5cc6499

package/cjs/components/overlays/OverlayWrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 

package/cjs/components/overlays/Tooltip/Tooltip.js

@@ -1,14 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -17,76 +14,69 @@ const react_2 = require("../../../utils/react");
 const utils_1 = require("@react-spectrum/utils");
 const context_1 = require("./context");
 const tooltip_1 = require("@react-aria/tooltip");
+const Base_1 = require("../../Base");
 const tasty_1 = require("../../../tasty");
 const transitions_1 = require("../../../utils/transitions");
-const styled_components_1 = __importDefault(require("styled-components"));
-const TooltipElement = (0, tasty_1.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',
-        },
+const StyleProvider_1 = require("../../../providers/StyleProvider");
+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%',
     },
-});
-const TooltipTipElement = (0, tasty_1.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)',
-        },
+    left: {
+        '': 'initial',
+        '[data-placement="top"] | [data-placement="bottom"]': '50%',
+        '[data-placement="left"]': '100%',
     },
-});
-const StyledTooltipElement = (0, styled_components_1.default)(TooltipElement) `
-  ${(props) => {
-    return (0, transitions_1.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'],
-    });
-}}
-`;
+    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)',
+    },
+};
 function Tooltip(props, ref) {
     let { ref: overlayRef, arrowProps, state, overlayProps, minOffset, minScale, ...tooltipProviderProps } = (0, react_1.useContext)(context_1.TooltipContext);
     let defaultRef = (0, react_1.useRef)(null);
     overlayRef = overlayRef || defaultRef;
     props = (0, react_2.mergeProps)(props, tooltipProviderProps);
     let { placement = 'top', isOpen, tipStyles, showIcon, isMaterial, ...otherProps } = props;
-    const styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.CONTAINER_STYLES);
+    const styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.CONTAINER_STYLES, {
+        ...TOOLTIP_STYLES,
+        pointerEvents: isMaterial ? 'auto' : 'none',
+        ...(0, StyleProvider_1.useContextStyles)('Tooltip', props),
+    });
+    tipStyles = {
+        ...TIP_STYLES,
+        ...(0, StyleProvider_1.useContextStyles)('Tooltip_Tip'),
+        ...tipStyles,
+    };
     let { tooltipProps } = (0, tooltip_1.useTooltip)(props, state);
     // Sync ref with overlayRef from context.
     (0, react_1.useImperativeHandle)(ref, () => overlayRef ? (0, utils_1.createDOMRef)(overlayRef) : null);
@@ -96,10 +86,9 @@ function Tooltip(props, ref) {
     if (typeof minScale === 'number') {
         minScale = String(minScale);
     }
-    return ((0, jsx_runtime_1.jsxs)(StyledTooltipElement, { ...tooltipProps, ...overlayProps, styles: styles, mods: {
+    return ((0, jsx_runtime_1.jsxs)(Base_1.Base, { ...tooltipProps, ...overlayProps, css: (0, transitions_1.getOverlayTransitionCSS)({ placement, minOffset, minScale }), styles: styles, mods: {
             open: isOpen,
-            material: isMaterial,
-        }, "data-min-offset": minOffset, "data-min-slale": minScale, "data-placement": placement, ref: overlayRef, children: [props.children, (0, jsx_runtime_1.jsx)(TooltipTipElement, { "data-placement": placement, styles: tipStyles, ...arrowProps }, void 0)] }, void 0));
+        }, "data-placement": placement, ref: overlayRef, children: [props.children, (0, jsx_runtime_1.jsx)(Base_1.Base, { "data-placement": placement, styles: tipStyles, ...arrowProps }, void 0)] }, void 0));
 }
 /**
  * Display container for Tooltip content. Has a directional arrow dependent on its placement.

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 

package/cjs/components/pickers/ComboBox/ComboBox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -19,6 +19,7 @@ const Form_1 = require("../../forms/Form");
 const interactions_1 = require("@react-aria/interactions");
 const provider_1 = require("../../../provider");
 const i18n_1 = require("@react-aria/i18n");
+const Base_1 = require("../../Base");
 const tasty_1 = require("../../../tasty");
 const interactions_2 = require("../../../utils/react/interactions");
 const react_2 = require("../../../utils/react");
@@ -31,46 +32,33 @@ const collections_1 = require("@react-stately/collections");
 const TextInputBase_1 = require("../../forms/TextInput/TextInputBase");
 const overlays_1 = require("@react-aria/overlays");
 const OverlayWrapper_1 = require("../../overlays/OverlayWrapper");
+const StyleProvider_1 = require("../../../providers/StyleProvider");
 const CaretDownIcon = () => ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", width: "14", height: "14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.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 ComboBoxWrapperElement = (0, tasty_1.tasty)({
-    styles: {
-        position: 'relative',
-        display: 'grid',
-        zIndex: {
-            '': 'initial',
-            focused: 1,
-        },
+const COMBOBOX_STYLES = {
+    position: 'relative',
+    display: 'grid',
+};
+const INPUT_STYLES = {
+    ...TextInputBase_1.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 InputElement = (0, tasty_1.tasty)({
-    as: 'input',
-    styles: {
-        ...TextInputBase_1.DEFAULT_INPUT_STYLES,
-        width: '100%',
-    },
-});
-const TriggerElement = (0, tasty_1.tasty)({
-    as: 'button',
-    styles: {
-        display: 'grid',
-        placeItems: 'center',
-        placeContent: 'center',
-        placeSelf: 'stretch',
-        radius: 'right',
-        padding: '0 1x',
-        color: 'inherit',
-        border: 0,
-        reset: 'button',
-        margin: 0,
-        fill: {
-            '': '#purple.0',
-            hovered: '#dark.04',
-            pressed: '#dark.08',
-            disabled: '#clear',
-        },
-        cursor: 'pointer',
-    },
-});
+    cursor: 'pointer',
+};
 function ComboBox(props, ref) {
     var _a;
     props = (0, provider_1.useProviderProps)(props);
@@ -85,8 +73,21 @@ function ComboBox(props, ref) {
         defaultFilter: filter || contains,
         allowsEmptyCollection: isAsync,
     });
-    const outerStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, styles);
-    inputStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.BLOCK_STYLES, inputStyles);
+    const outerStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, {
+        ...COMBOBOX_STYLES,
+        ...(0, StyleProvider_1.useContextStyles)('ComboBox_Wrapper', props),
+        ...styles,
+    });
+    inputStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.BLOCK_STYLES, {
+        ...INPUT_STYLES,
+        ...(0, StyleProvider_1.useContextStyles)('ComboBox', props),
+        ...inputStyles,
+    });
+    triggerStyles = {
+        ...TRIGGER_STYLES,
+        ...(0, StyleProvider_1.useContextStyles)('ComboBox_Trigger', props),
+        ...triggerStyles,
+    };
     ref = (0, react_2.useCombinedRefs)(ref);
     inputRef = (0, react_2.useCombinedRefs)(inputRef);
     triggerRef = (0, react_2.useCombinedRefs)(triggerRef);
@@ -124,7 +125,7 @@ function ComboBox(props, ref) {
     let validationIcon = isInvalid ? ((0, jsx_runtime_1.jsx)(icons_1.WarningOutlined, { style: { color: 'var(--danger-color)' } }, void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.CheckOutlined, { style: { color: 'var(--success-color)' } }, void 0));
     let validation = (0, react_1.cloneElement)(validationIcon);
     let comboBoxWidth = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
-    let comboBoxField = ((0, jsx_runtime_1.jsxs)(ComboBoxWrapperElement, { ref: ref, qa: qa || 'ComboBox', ...(0, react_2.modAttrs)({
+    let comboBoxField = ((0, jsx_runtime_1.jsxs)(Base_1.Base, { ref: ref, qa: "ComboBoxWrapper", ...(0, react_2.modAttrs)({
             invalid: isInvalid,
             valid: validationState === 'valid',
             disabled: isDisabled,
@@ -132,13 +133,13 @@ function ComboBox(props, ref) {
             focused: isFocused,
         }), styles: outerStyles, style: {
             zIndex: isFocused ? 1 : 'initial',
-        }, "data-size": size, children: [(0, jsx_runtime_1.jsx)(InputElement, { qa: "Input", ...(0, utils_1.mergeProps)(inputProps, hoverProps, focusProps), ref: inputRef, autoComplete: autoComplete, styles: inputStyles, ...(0, react_2.modAttrs)({
+        }, "data-size": size, children: [(0, jsx_runtime_1.jsx)(Base_1.Base, { qa: qa || 'ComboBox', as: "input", ...(0, utils_1.mergeProps)(inputProps, hoverProps, focusProps), ref: inputRef, autoComplete: autoComplete, styles: inputStyles, ...(0, react_2.modAttrs)({
                     invalid: isInvalid,
                     valid: validationState === 'valid',
                     disabled: isDisabled,
                     hovered: isHovered,
                     focused: isFocused,
-                }), "data-size": size }, void 0), prefix ? ((0, jsx_runtime_1.jsx)(Prefix_1.Prefix, { onWidthChange: setPrefixWidth, padding: "0 1x 0 1.5x", opacity: isDisabled ? '@disabled-opacity' : false, placeItems: "center", outerGap: 0, children: prefix }, void 0)) : null, (0, jsx_runtime_1.jsxs)(Suffix_1.Suffix, { onWidthChange: setSuffixWidth, opacity: isDisabled ? '@disabled-opacity' : false, children: [validationState || isLoading ? ((0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: false, padding: "0 1x", children: [validationState && !isLoading ? validation : null, isLoading && (0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, {}, void 0)] }, void 0)) : null, suffix, !hideTrigger ? ((0, jsx_runtime_1.jsx)(TriggerElement, { ...(0, utils_1.mergeProps)(buttonProps, triggerFocusProps, triggerHoverProps), ...(0, react_2.modAttrs)({
+                }), "data-size": size }, void 0), prefix ? ((0, jsx_runtime_1.jsx)(Prefix_1.Prefix, { onWidthChange: setPrefixWidth, padding: "0 1x 0 1.5x", opacity: isDisabled ? '@disabled-opacity' : false, placeItems: "center", outerGap: 0, children: prefix }, void 0)) : null, (0, jsx_runtime_1.jsxs)(Suffix_1.Suffix, { onWidthChange: setSuffixWidth, opacity: isDisabled ? '@disabled-opacity' : false, children: [validationState || isLoading ? ((0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: false, padding: "0 1x", children: [validationState && !isLoading ? validation : null, isLoading && (0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, {}, void 0)] }, void 0)) : null, suffix, !hideTrigger ? ((0, jsx_runtime_1.jsx)(Base_1.Base, { as: "button", ...(0, utils_1.mergeProps)(buttonProps, triggerFocusProps, triggerHoverProps), ...(0, react_2.modAttrs)({
                             pressed: isTriggerPressed,
                             focused: isTriggerFocused,
                             hovered: isTriggerHovered,

package/cjs/components/pickers/Menu/Menu.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -23,8 +23,9 @@ const styled_1 = require("./styled");
 const MenuItem_1 = require("./MenuItem");
 const MenuSection_1 = require("./MenuSection");
 const context_1 = require("./context");
+const StyleProvider_1 = require("../../../providers/StyleProvider");
 function Menu(props, ref) {
-    const { header, footer } = props;
+    const { header, footer, styles } = props;
     const domRef = (0, utils_2.useDOMRef)(ref);
     const contextProps = (0, context_1.useMenuContext)();
     const completeProps = (0, utils_1.mergeProps)(contextProps, props);
@@ -32,9 +33,14 @@ function Menu(props, ref) {
     const items = [...state.collection];
     const hasSections = items.some((item) => item.type === 'section');
     const { menuProps } = (0, menu_1.useMenu)(completeProps, state, domRef);
-    const styles = (0, tasty_1.extractStyles)(completeProps, tasty_1.CONTAINER_STYLES);
+    const menuStyles = (0, StyleProvider_1.useContextStyles)('Menu', props) || {};
+    const containerStyles = (0, tasty_1.extractStyles)(completeProps, tasty_1.CONTAINER_STYLES);
     const baseProps = {
-        styles,
+        styles: {
+            ...menuStyles,
+            ...containerStyles,
+            ...styles,
+        },
         mods: {
             sections: hasSections,
             footer: !!footer,

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -9,18 +9,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuSection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const MenuItem_1 = require("./MenuItem");
 const menu_1 = require("@react-aria/menu");
 const styled_1 = require("./styled");
 /** @private */
 function MenuSection(props) {
-    let { item, state, onAction } = props;
-    let { itemProps, headingProps, groupProps } = (0, menu_1.useMenuSection)({
-        heading: item.rendered,
+    const { item, state, onAction } = props;
+    const heading = item.rendered;
+    const { itemProps, headingProps, groupProps } = (0, menu_1.useMenuSection)({
+        heading,
         'aria-label': item['aria-label'],
     });
-    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(styled_1.StyledMenuSection, { ...itemProps, children: [item.rendered && ((0, jsx_runtime_1.jsx)(styled_1.StyledMenuSectionHeading, { ...headingProps, children: item.rendered }, void 0)), (0, jsx_runtime_1.jsx)(styled_1.StyledMenu, { ...groupProps, mods: { section: true }, children: [...item.childNodes].map((node) => {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(styled_1.StyledMenuSection, { ...itemProps, children: [heading && ((0, jsx_runtime_1.jsx)(styled_1.StyledMenuSectionHeading, { ...headingProps, children: heading }, void 0)), (0, jsx_runtime_1.jsx)(styled_1.StyledMenu, { ...groupProps, mods: { section: true }, children: [...item.childNodes].map((node) => {
                         let item = ((0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { item: node, state: state, onAction: onAction }, node.key));
                         if (node.wrapper) {
                             item = node.wrapper(item);

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -17,14 +17,19 @@ exports.StyledMenu = (0, tasty_1.tasty)({
         display: 'flex',
         flow: 'column',
         gap: {
-            '': '1px',
+            '': '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',
@@ -47,7 +52,7 @@ exports.StyledDivider = (0, tasty_1.tasty)({
         margin: '0 -0.5x',
         listStyle: 'none',
         fill: '#dark.05',
-        height: '1px',
+        height: '1bw',
     },
 });
 exports.StyledMenuHeader = (0, tasty_1.tasty)(Space_1.Space, {
@@ -69,13 +74,8 @@ exports.StyledMenuSection = (0, tasty_1.tasty)({
     styles: {
         display: 'flex',
         flow: 'column',
-        gap: '1px',
         margin: '0',
-        padding: {
-            '': '0.5x 0',
-            ':first-of-type': '0 0 0.5x 0',
-            ':last-of-type': '0.5x 0 0 0',
-        },
+        padding: '0',
         listStyle: 'none',
         fill: '#white',
     },
@@ -85,7 +85,7 @@ exports.StyledMenuItem = (0, tasty_1.tasty)({
     styles: {
         display: 'flex',
         flow: 'column',
-        gap: '1px',
+        gap: '1bw',
         margin: '0',
         padding: '0',
         listStyle: 'none',
@@ -100,8 +100,9 @@ exports.StyledMenuSectionHeading = (0, tasty_1.tasty)(Space_1.Space, {
     as: 'header',
     styles: {
         color: '#dark-03',
-        preset: 'c1',
-        padding: '(0.75x - 1bw) (1.5x - 1bw)',
+        fill: '#light',
+        preset: 'c2',
+        padding: '(1x - 1bw) 2x',
         placeContent: 'space-between',
         align: 'start',
     },