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

package/es/components/overlays/Modal/Popover.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.
  */
 
@@ -10,27 +10,25 @@ import { mergeProps } from '../../../utils/react';
 import { Overlay } from './Overlay';
 import { forwardRef } from 'react';
 import { useModal, useOverlay } from '@react-aria/overlays';
-import { tasty } from '../../../tasty';
-const PopoverElement = tasty({
-    role: 'presentation',
-    styles: {
-        pointerEvents: 'auto',
-        position: 'absolute',
-        transition: 'opacity .120s linear, visibility 0ms linear, transform .120s ease-in-out',
-        transform: {
-            '': 'scale(1, .9)',
-            open: 'scale(1, 1)',
-        },
-        opacity: {
-            '': 0,
-            open: '.9999',
-        },
-        transformOrigin: {
-            '': 'top center',
-            '[data-placement="top"]': 'bottom center',
-        },
+import { Base } from '../../Base';
+import { useContextStyles } from '../../../providers/StyleProvider';
+const POPOVER_STYLES = {
+    pointerEvents: 'auto',
+    position: 'absolute',
+    transition: 'opacity .120s linear, visibility 0ms linear, transform .120s ease-in-out',
+    transform: {
+        '': 'scale(1, .9)',
+        open: 'scale(1, 1)',
     },
-});
+    opacity: {
+        '': 0,
+        open: '.9999',
+    },
+    transformOrigin: {
+        '': 'top center',
+        '[data-placement="top"]': 'bottom center',
+    },
+};
 function Popover(props, ref) {
     let { qa, style, styles, children, placement, arrowProps, onClose, shouldCloseOnBlur, isKeyboardDismissDisabled, isNonModal, isDismissable = true, ...otherProps } = props;
     return (_jsx(Overlay, { ...otherProps, children: _jsx(PopoverWrapper, { qa: qa, ref: ref, style: style, styles: styles, placement: placement, arrowProps: arrowProps, onClose: onClose, shouldCloseOnBlur: shouldCloseOnBlur, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isNonModal: isNonModal, isDismissable: isDismissable, children: children }, void 0) }, void 0));
@@ -43,9 +41,14 @@ const PopoverWrapper = forwardRef(function PopoverWrapper(props, ref) {
     let { modalProps } = useModal({
         isDisabled: isNonModal,
     });
-    return (_jsx(PopoverElement, { qa: qa || 'Popover', ...mergeProps(otherProps, overlayProps, modalProps), styles: styles, ref: ref, mods: {
+    styles = {
+        ...POPOVER_STYLES,
+        ...useContextStyles('Popover', props),
+        ...styles,
+    };
+    return (_jsx(Base, { qa: qa || 'Popover', ...mergeProps(otherProps, overlayProps, modalProps), styles: styles, ref: ref, mods: {
             open: isOpen,
-        }, "data-placement": placement, style: style, children: children }, void 0));
+        }, "data-placement": placement, role: "presentation", style: style, children: children }, void 0));
 });
 let _Popover = forwardRef(Popover);
 export { _Popover as Popover };

package/es/components/overlays/Modal/Tray.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.
  */
 
@@ -13,29 +13,20 @@ import { forwardRef, useEffect, useRef, useState } from 'react';
 import { Underlay } from './Underlay';
 import { useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';
 import { OVERLAY_WRAPPER_STYLES } from './Modal';
-import { tasty } from '../../../tasty';
+import { Base } from '../../Base';
 import { mergeProps } from '../../../utils/react';
-const TrayWrapperElement = tasty({
-    qa: 'TrayWrapper',
-    styles: {
-        ...OVERLAY_WRAPPER_STYLES,
-        placeContent: 'end center',
-        placeItems: 'end center',
+import { useContextStyles } from '../../../providers/StyleProvider';
+const TRAY_STYLES = {
+    zIndex: 2,
+    height: 'max (@cube-visual-viewport-height * .9)',
+    width: '288px 90vw',
+    pointerEvents: 'auto',
+    transition: 'transform .25s ease-in-out, opacity .25s linear, visibility 0ms linear',
+    opacity: {
+        '': 0,
+        open: '.9999',
     },
-});
-const TrayElement = tasty({
-    styles: {
-        zIndex: 2,
-        height: 'max (@cube-visual-viewport-height * .9)',
-        width: '288px 90vw',
-        pointerEvents: 'auto',
-        transition: 'transform .25s ease-in-out, opacity .25s linear, visibility 0ms linear',
-        opacity: {
-            '': 0,
-            open: '.9999',
-        },
-    },
-});
+};
 function Tray(props, ref) {
     let { qa, children, onClose, isFixedHeight, isNonModal, styles, ...otherProps } = props;
     let domRef = useDOMRef(ref);
@@ -48,6 +39,11 @@ let TrayWrapper = forwardRef(function (props, ref) {
     let { modalProps } = useModal({
         isDisabled: isNonModal,
     });
+    styles = {
+        ...TRAY_STYLES,
+        ...useContextStyles('Tray', props),
+        ...styles,
+    };
     // We need to measure the window's height in JS rather than using percentages in CSS
     // so that contents (e.g. menu) can inherit the max-height properly. Using percentages
     // does not work properly because there is nothing to base the percentage on.
@@ -79,9 +75,13 @@ let TrayWrapper = forwardRef(function (props, ref) {
         '--cube-visual-viewport-height': height + 'px',
     };
     let domProps = mergeProps(otherProps, overlayProps);
-    return (_jsx(TrayWrapperElement, { mods: {
+    return (_jsx(Base, { qa: "TrayWrapper", mods: {
             open: isOpen,
-        }, style: wrapperStyle, children: _jsx(TrayElement, { qa: qa || 'Tray', styles: styles, mods: {
+        }, styles: {
+            ...OVERLAY_WRAPPER_STYLES,
+            placeContent: 'end center',
+            placeItems: 'end center',
+        }, style: wrapperStyle, children: _jsx(Base, { qa: qa || 'Tray', styles: styles, mods: {
                 open: isOpen,
                 'fixed-height': isFixedHeight,
             }, ...domProps, ...modalProps, ref: ref, children: children }, void 0) }, void 0));

package/es/components/overlays/Modal/Underlay.js

@@ -1,38 +1,44 @@
 /**
  * @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.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { tasty } from '../../../tasty';
-const UnderlayElement = tasty({
-    qa: 'Underlay',
-    styles: {
-        position: 'fixed',
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-        zIndex: 1,
-        transitionDelay: '0ms',
-        opacity: {
-            '': 0,
-            open: 0.9999,
-        },
-        pointerEvents: {
-            '': 'none',
-            open: 'auto',
-        },
-        fill: '#dark.30',
-        overflow: 'hidden',
-        transition: 'transform .25s ease-in-out, opacity .25s linear, visibility 0ms linear',
+import { Base } from '../../Base';
+import { useContextStyles } from '../../../providers/StyleProvider';
+const UNDERLAY_STYLES = {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    zIndex: 1,
+    transitionDelay: '0ms',
+    // visibility: {
+    //   '': 'hidden',
+    //   open: 'visible',
+    // },
+    opacity: {
+        '': 0,
+        open: 0.9999,
     },
-});
+    pointerEvents: {
+        '': 'none',
+        open: 'auto',
+    },
+    fill: '#dark.30',
+    overflow: 'hidden',
+    transition: 'transform .25s ease-in-out, opacity .25s linear, visibility 0ms linear',
+};
 const Underlay = ({ isOpen, ...otherProps }, ref) => {
-    return (_jsx(UnderlayElement, { ref: ref, mods: {
+    const styles = {
+        ...UNDERLAY_STYLES,
+        ...useContextStyles('Underlay'),
+    };
+    return (_jsx(Base, { ref: ref, "data-qa": "Underlay", styles: styles, mods: {
             open: isOpen,
         }, ...otherProps }, void 0));
 };

package/es/components/overlays/Modal/index.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/es/components/overlays/Notification/Notification.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,61 +9,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Action } from '../../actions/Action';
 import { Card } from '../../content/Card/Card';
 import { Block } from '../../Block';
+import { Flex } from '../../layout/Flex';
 import THEMES from '../../../data/themes';
 import { CheckOutlined, CloseOutlined, ExclamationOutlined, InfoOutlined, } from '@ant-design/icons';
-import { tasty } from '../../../tasty';
-const NotificationElement = tasty(Card, {
-    role: 'region',
-    styles: {
-        display: 'grid',
-        color: '#dark',
-        padding: '.5x',
-        shadow: '0 5px 15px #dark.10',
-        border: false,
-        margin: '1x bottom',
-        radius: '1.5r',
-        gridColumns: 'auto 1fr auto',
-        placeItems: 'center start',
-        gap: '2x',
-        preset: 't3',
-        Icon: {
-            display: 'flex',
-            radius: '1r',
-            width: '5x',
-            height: '5x',
-            placeContent: 'center',
-            placeItems: 'center',
-            preset: 't2',
-            color: {
-                '': '#dark.75',
-                ...Object.keys(THEMES).reduce((map, theme) => {
-                    map[`[data-theme="${theme}"]`] = THEMES[theme].color;
-                    return map;
-                }, {}),
-            },
-            fill: {
-                '': '#clear',
-                ...Object.keys(THEMES).reduce((map, theme) => {
-                    map[`[data-theme="${theme}"]`] = THEMES[theme].fill;
-                    return map;
-                }, {}),
-            },
-        },
-    },
-});
-const CloseButton = tasty(Action, {
-    styles: {
-        color: { '': '#dark.75', hovered: '#purple' },
-        width: '5x',
-        height: '5x',
-        label: 'Close',
-    },
-});
 export function Notification(allProps) {
-    let { theme, type, children, onClose, ...props } = allProps;
-    theme = theme || type || 'note';
+    let { type, children, onClose, ...props } = allProps;
+    type = type || 'note';
     let Icon;
-    switch (theme) {
+    switch (type) {
         case 'success':
             Icon = CheckOutlined;
             break;
@@ -74,7 +27,11 @@ export function Notification(allProps) {
             Icon = InfoOutlined;
             break;
     }
-    return (_jsxs(NotificationElement, { ...props, "data-theme": theme, children: [_jsx("div", { "data-element": "Icon", children: _jsx(Icon, {}, void 0) }, void 0), _jsx(Block, { children: children }, void 0), _jsx(CloseButton, { onPress: onClose, children: _jsx(CloseOutlined, {}, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Card, { display: "grid", role: "region", color: "#dark", padding: ".5x", shadow: "0 5px 15px #dark.10", border: false, margin: "1x bottom", radius: "1.5r", styles: {
+            gridColumns: 'auto 1fr auto',
+            placeItems: 'center start',
+            gap: '2x',
+        }, ...props, children: [_jsx(Flex, { radius: "1r", width: "5x", height: "5x", placeContent: "center", placeItems: "center", fill: THEMES[type] ? THEMES[type].fill : '#clear', color: THEMES[type] ? THEMES[type].color : '#dark.75', children: _jsx(Icon, { style: { fontSize: 16 } }, void 0) }, void 0), _jsx(Block, { children: children }, void 0), _jsx(Action, { color: { '': '#dark.75', hovered: '#purple' }, width: "5x", height: "5x", onPress: onClose, label: "Close", children: _jsx(CloseOutlined, {}, void 0) }, void 0)] }, void 0));
 }
 
         

package/es/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/es/components/overlays/Tooltip/Tooltip.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.
  */
 
@@ -11,76 +11,69 @@ import { mergeProps } from '../../../utils/react';
 import { createDOMRef } from '@react-spectrum/utils';
 import { TooltipContext } from './context';
 import { useTooltip } from '@react-aria/tooltip';
-import { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty';
+import { Base } from '../../Base';
+import { CONTAINER_STYLES, extractStyles, } from '../../../tasty';
 import { getOverlayTransitionCSS } from '../../../utils/transitions';
-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',
-        },
+import { useContextStyles } from '../../../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 = 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 = 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'],
-    });
-}}
-`;
+    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 } = useContext(TooltipContext);
     let defaultRef = useRef(null);
     overlayRef = overlayRef || defaultRef;
     props = mergeProps(props, tooltipProviderProps);
     let { placement = 'top', isOpen, tipStyles, showIcon, isMaterial, ...otherProps } = props;
-    const styles = extractStyles(otherProps, CONTAINER_STYLES);
+    const styles = extractStyles(otherProps, CONTAINER_STYLES, {
+        ...TOOLTIP_STYLES,
+        pointerEvents: isMaterial ? 'auto' : 'none',
+        ...useContextStyles('Tooltip', props),
+    });
+    tipStyles = {
+        ...TIP_STYLES,
+        ...useContextStyles('Tooltip_Tip'),
+        ...tipStyles,
+    };
     let { tooltipProps } = useTooltip(props, state);
     // Sync ref with overlayRef from context.
     useImperativeHandle(ref, () => overlayRef ? createDOMRef(overlayRef) : null);
@@ -90,10 +83,9 @@ function Tooltip(props, ref) {
     if (typeof minScale === 'number') {
         minScale = String(minScale);
     }
-    return (_jsxs(StyledTooltipElement, { ...tooltipProps, ...overlayProps, styles: styles, mods: {
+    return (_jsxs(Base, { ...tooltipProps, ...overlayProps, css: 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, _jsx(TooltipTipElement, { "data-placement": placement, styles: tipStyles, ...arrowProps }, void 0)] }, void 0));
+        }, "data-placement": placement, ref: overlayRef, children: [props.children, _jsx(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/es/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/es/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/es/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/es/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.
  */
 
@@ -16,7 +16,8 @@ import { useFormProps } from '../../forms/Form';
 import { useHover } from '@react-aria/interactions';
 import { useProviderProps } from '../../../provider';
 import { useFilter } from '@react-aria/i18n';
-import { BLOCK_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
+import { Base } from '../../Base';
+import { BLOCK_STYLES, extractStyles, OUTER_STYLES, } from '../../../tasty';
 import { useFocus } from '../../../utils/react/interactions';
 import { modAttrs, useCombinedRefs } from '../../../utils/react';
 import { FieldWrapper } from '../../forms/FieldWrapper';
@@ -28,46 +29,33 @@ import { Item } from '@react-stately/collections';
 import { DEFAULT_INPUT_STYLES } from '../../forms/TextInput/TextInputBase';
 import { useOverlayPosition } from '@react-aria/overlays';
 import { OverlayWrapper } from '../../overlays/OverlayWrapper';
+import { useContextStyles } from '../../../providers/StyleProvider';
 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 ComboBoxWrapperElement = tasty({
-    styles: {
-        position: 'relative',
-        display: 'grid',
-        zIndex: {
-            '': 'initial',
-            focused: 1,
-        },
+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 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: '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 = useProviderProps(props);
@@ -82,8 +70,21 @@ function ComboBox(props, ref) {
         defaultFilter: filter || contains,
         allowsEmptyCollection: isAsync,
     });
-    const outerStyles = extractStyles(otherProps, OUTER_STYLES, styles);
-    inputStyles = extractStyles(otherProps, BLOCK_STYLES, inputStyles);
+    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,
+    };
     ref = useCombinedRefs(ref);
     inputRef = useCombinedRefs(inputRef);
     triggerRef = useCombinedRefs(triggerRef);
@@ -121,7 +122,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(ComboBoxWrapperElement, { ref: ref, qa: qa || 'ComboBox', ...modAttrs({
+    let comboBoxField = (_jsxs(Base, { ref: ref, qa: "ComboBoxWrapper", ...modAttrs({
             invalid: isInvalid,
             valid: validationState === 'valid',
             disabled: isDisabled,
@@ -129,13 +130,13 @@ function ComboBox(props, ref) {
             focused: isFocused,
         }), styles: outerStyles, style: {
             zIndex: isFocused ? 1 : 'initial',
-        }, "data-size": size, children: [_jsx(InputElement, { qa: "Input", ...mergeProps(inputProps, hoverProps, focusProps), ref: inputRef, autoComplete: autoComplete, styles: inputStyles, ...modAttrs({
+        }, "data-size": size, children: [_jsx(Base, { qa: qa || 'ComboBox', as: "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(TriggerElement, { ...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(Base, { as: "button", ...mergeProps(buttonProps, triggerFocusProps, triggerHoverProps), ...modAttrs({
                             pressed: isTriggerPressed,
                             focused: isTriggerFocused,
                             hovered: isTriggerHovered,