@cube-dev/ui-kit 0.12.1 → 0.12.4

package/cjs/components/overlays/NewNotifications/Notification.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -10,9 +10,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Notification = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const hooks_1 = require("./hooks");
 const _internal_1 = require("../../../_internal");
 const useId_1 = require("../../../utils/react/useId");
+const hooks_1 = require("./hooks");
 function Notification(props) {
     const { id: propsId, disableRemoveOnUnmount = false } = props;
     const defaultId = (0, useId_1.useId)();

package/cjs/components/overlays/NewNotifications/NotificationView/NotificationAction.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -35,7 +35,7 @@ function NotificationAction(props) {
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }
     });
-    return ((0, jsx_runtime_1.jsx)(Action, { ...buttonProps, onPress: onPressEvent, type: "link", size: "small", mods: { primary: type === 'primary', secondary: type === 'secondary' }, children: children }, void 0));
+    return ((0, jsx_runtime_1.jsx)(Action, { ...buttonProps, type: "link", size: "small", mods: { primary: type === 'primary', secondary: type === 'secondary' }, onPress: onPressEvent, children: children }, void 0));
 }
 exports.NotificationAction = NotificationAction;
 

package/cjs/components/overlays/NewNotifications/NotificationView/NotificationCloseButton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -34,7 +34,7 @@ const CloseButton = (0, tasty_1.tasty)(actions_1.Button, {
 });
 exports.NotificationCloseButton = (0, react_1.memo)(function NotificationCloseButton(props) {
     const { onPress, isHovered, isFocused } = props;
-    return ((0, jsx_runtime_1.jsx)(CloseButton, { qa: "notification-close-button", type: "neutral", mods: { show: isHovered || isFocused }, onPress: onPress, icon: (0, jsx_runtime_1.jsx)(icons_1.Cross, {}, void 0), label: "Close the notification" }, void 0));
+    return ((0, jsx_runtime_1.jsx)(CloseButton, { qa: "NotificationCloseButton", type: "neutral", mods: { show: isHovered || isFocused }, icon: (0, jsx_runtime_1.jsx)(icons_1.Cross, {}, void 0), label: "Close the notification", onPress: onPress }, void 0));
 });
 
         

package/cjs/components/overlays/NewNotifications/NotificationView/NotificationDescription.js

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

package/cjs/components/overlays/NewNotifications/NotificationView/NotificationFooter.js

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

package/cjs/components/overlays/NewNotifications/NotificationView/NotificationHeader.js

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

package/cjs/components/overlays/NewNotifications/NotificationView/NotificationIcon.js

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

package/cjs/components/overlays/NewNotifications/NotificationView/NotificationProvider.js

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

package/cjs/components/overlays/NewNotifications/NotificationView/NotificationView.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -15,13 +15,13 @@ const focus_1 = require("@react-aria/focus");
 const tasty_1 = require("../../../../tasty");
 const _internal_1 = require("../../../../_internal");
 const react_2 = require("../../../../utils/react");
+const useId_1 = require("../../../../utils/react/useId");
 const NotificationIcon_1 = require("./NotificationIcon");
 const NotificationHeader_1 = require("./NotificationHeader");
 const NotificationDescription_1 = require("./NotificationDescription");
 const NotificationFooter_1 = require("./NotificationFooter");
 const NotificationCloseButton_1 = require("./NotificationCloseButton");
 const NotificationProvider_1 = require("./NotificationProvider");
-const useId_1 = require("../../../../utils/react/useId");
 const NotificationContainer = (0, tasty_1.tasty)({
     styles: {
         boxSizing: 'border-box',
@@ -64,7 +64,7 @@ exports.NotificationView = (0, react_1.forwardRef)(function NotificationView(pro
         callback: onDismissEvent,
         isDisabled: isFocusVisible || isHovered || !isDismissible,
     });
-    return ((0, jsx_runtime_1.jsx)(react_2.ClearSlots, { children: (0, jsx_runtime_1.jsx)(NotificationProvider_1.NotificationProvider, { onClose: onClose, children: (0, jsx_runtime_1.jsxs)(NotificationContainer, { ...(0, react_2.mergeProps)(attributes, hoverProps, focusProps), styles: styles, ref: ref, "data-id": id, "data-qa": qa, "aria-labelledby": labelID, "aria-describedby": descriptionID, mods: { focused: isFocusVisible, 'is-dismissible': isDismissible }, children: [(0, jsx_runtime_1.jsx)(NotificationIcon_1.NotificationIcon, { icon: icon, type: type }, void 0), (0, jsx_runtime_1.jsx)(NotificationHeader_1.NotificationHeader, { header: header, id: labelID }, void 0), description && ((0, jsx_runtime_1.jsx)(NotificationDescription_1.NotificationDescription, { description: description, id: descriptionID }, void 0)), (0, jsx_runtime_1.jsx)(NotificationFooter_1.NotificationFooter, { hasDescription: !!description, actions: actions, onClose: onCloseEvent, onDismiss: onDismissEvent }, void 0), isDismissible && ((0, jsx_runtime_1.jsx)(NotificationCloseButton_1.NotificationCloseButton, { onPress: onDismissEvent, isHovered: isHovered, isFocused: isFocusVisible }, void 0))] }, void 0) }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(react_2.ClearSlots, { children: (0, jsx_runtime_1.jsx)(NotificationProvider_1.NotificationProvider, { onClose: onClose, children: (0, jsx_runtime_1.jsxs)(NotificationContainer, { ...(0, react_2.mergeProps)(attributes, hoverProps, focusProps), ref: ref, styles: styles, "data-id": id, "data-qa": qa, "aria-labelledby": labelID, "aria-describedby": descriptionID, mods: { focused: isFocusVisible, 'is-dismissible': isDismissible }, children: [(0, jsx_runtime_1.jsx)(NotificationIcon_1.NotificationIcon, { icon: icon, type: type }, void 0), (0, jsx_runtime_1.jsx)(NotificationHeader_1.NotificationHeader, { header: header, id: labelID }, void 0), description && ((0, jsx_runtime_1.jsx)(NotificationDescription_1.NotificationDescription, { description: description, id: descriptionID }, void 0)), (0, jsx_runtime_1.jsx)(NotificationFooter_1.NotificationFooter, { hasDescription: !!description, actions: actions, onClose: onCloseEvent, onDismiss: onDismissEvent }, void 0), isDismissible && ((0, jsx_runtime_1.jsx)(NotificationCloseButton_1.NotificationCloseButton, { isHovered: isHovered, isFocused: isFocusVisible, onPress: onDismissEvent }, void 0))] }, void 0) }, void 0) }, void 0));
 });
 
         

package/cjs/components/overlays/NewNotifications/NotificationView/index.js

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

package/cjs/components/overlays/NewNotifications/NotificationView/types.js

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

package/cjs/components/overlays/NewNotifications/NotificationsContext/NotificationsProvider.js

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

package/cjs/components/overlays/NewNotifications/NotificationsContext/index.js

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

package/cjs/components/overlays/NewNotifications/NotificationsContext/use-notifications.js

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

package/cjs/components/overlays/NewNotifications/NotificationsList.js

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

package/cjs/components/overlays/NewNotifications/hooks/index.js

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

package/cjs/components/overlays/NewNotifications/hooks/types.js

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

package/cjs/components/overlays/NewNotifications/hooks/use-notification-list-item.js

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

package/cjs/components/overlays/NewNotifications/hooks/use-notifications-api.js

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

package/cjs/components/overlays/NewNotifications/hooks/use-notifications-list.js

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

package/cjs/components/overlays/NewNotifications/hooks/use-notifications-observer.js

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

package/cjs/components/overlays/NewNotifications/index.js

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

package/cjs/components/overlays/NewNotifications/types.js

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

package/cjs/components/overlays/Notification/Notification.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -12,11 +12,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Notification = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@ant-design/icons");
 const Action_1 = require("../../actions/Action");
 const Card_1 = require("../../content/Card/Card");
 const Block_1 = require("../../Block");
 const themes_1 = __importDefault(require("../../../data/themes"));
-const icons_1 = require("@ant-design/icons");
 const tasty_1 = require("../../../tasty");
 const NotificationElement = (0, tasty_1.tasty)(Card_1.Card, {
     role: 'region',

package/cjs/components/overlays/OverlayWrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -27,7 +27,7 @@ function OverlayWrapper({ isOpen, placement, minOffset, minScale, children, cont
     if (minOffset != null) {
         options.minOffset = minOffset;
     }
-    const contents = ((0, jsx_runtime_1.jsx)(react_transition_group_1.CSSTransition, { in: isOpen, unmountOnExit: true, timeout: 180, classNames: "cube-overlay-transition", children: children }, void 0));
+    const contents = ((0, jsx_runtime_1.jsx)(react_transition_group_1.CSSTransition, { unmountOnExit: true, in: isOpen, timeout: 180, classNames: "cube-overlay-transition", children: children }, void 0));
     return (0, jsx_runtime_1.jsx)(portal_1.Portal, { root: containerRef, children: contents }, void 0);
 }
 exports.OverlayWrapper = OverlayWrapper;

package/cjs/components/overlays/Toasts/Toast.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -10,9 +10,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Toast = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const use_toasts_api_1 = require("./use-toasts-api");
 const _internal_1 = require("../../../_internal");
 const useId_1 = require("../../../utils/react/useId");
+const use_toasts_api_1 = require("./use-toasts-api");
 function Toast(props) {
     const { id: propsId, disableRemoveOnUnmount } = props;
     const defaultId = (0, useId_1.useId)();

package/cjs/components/overlays/Toasts/index.js

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

package/cjs/components/overlays/Toasts/types.js

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

package/cjs/components/overlays/Toasts/use-toasts-api.js

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -13,13 +13,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-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 tasty_1 = require("../../../tasty");
-const transitions_1 = require("../../../utils/transitions");
 const styled_components_1 = __importDefault(require("styled-components"));
+const transitions_1 = require("../../../utils/transitions");
+const tasty_1 = require("../../../tasty");
+const react_2 = require("../../../utils/react");
+const context_1 = require("./context");
 const TooltipElement = (0, tasty_1.tasty)({
     styles: {
         display: 'block',
@@ -96,10 +96,10 @@ 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)(StyledTooltipElement, { ...tooltipProps, ...overlayProps, ref: overlayRef, 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-min-offset": minOffset, "data-min-slale": minScale, "data-placement": placement, children: [props.children, (0, jsx_runtime_1.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/cjs/components/overlays/Tooltip/TooltipProvider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -9,9 +9,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TooltipProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const TooltipTrigger_1 = require("./TooltipTrigger");
 const Tooltip_1 = require("./Tooltip");
-const react_1 = require("react");
 function TooltipProvider(props) {
     const [rendered, setRendered] = (0, react_1.useState)(false);
     const { title, children, tooltipStyles, width, ...otherProps } = props;

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -11,13 +11,13 @@ exports.TooltipTrigger = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const focus_1 = require("@react-aria/focus");
 const react_1 = require("react");
-const context_1 = require("./context");
 const overlays_1 = require("@react-aria/overlays");
 const tooltip_1 = require("@react-aria/tooltip");
 const tooltip_2 = require("@react-stately/tooltip");
 const OverlayWrapper_1 = require("../OverlayWrapper");
 const ActiveZone_1 = require("../../content/ActiveZone/ActiveZone");
 const Block_1 = require("../../Block");
+const context_1 = require("./context");
 const DEFAULT_OFFSET = 8; // Offset needed to reach 4px/5px (med/large) distance between tooltip and trigger button
 const DEFAULT_CROSS_OFFSET = 0;
 function TooltipTrigger(props) {

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * 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.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -14,38 +14,31 @@ const react_1 = require("react");
 const combobox_1 = require("@react-stately/combobox");
 const combobox_2 = require("@react-aria/combobox");
 const button_1 = require("@react-aria/button");
-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 collections_1 = require("@react-stately/collections");
+const overlays_1 = require("@react-aria/overlays");
+const Form_1 = require("../../forms/Form");
+const provider_1 = require("../../../provider");
 const tasty_1 = require("../../../tasty");
 const interactions_2 = require("../../../utils/react/interactions");
 const react_2 = require("../../../utils/react");
 const FieldWrapper_1 = require("../../forms/FieldWrapper");
 const Select_1 = require("../Select/Select");
-const Prefix_1 = require("../../layout/Prefix");
-const Suffix_1 = require("../../layout/Suffix");
-const Space_1 = require("../../layout/Space");
-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 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));
+function CaretDownIcon() {
+    return ((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,
-        },
+        ...TextInputBase_1.INPUT_WRAPPER_STYLES,
     },
 });
 const InputElement = (0, tasty_1.tasty)({
     as: 'input',
     styles: {
         ...TextInputBase_1.DEFAULT_INPUT_STYLES,
-        width: '100%',
     },
 });
 const TriggerElement = (0, tasty_1.tasty)({
@@ -56,7 +49,7 @@ const TriggerElement = (0, tasty_1.tasty)({
         placeContent: 'center',
         placeSelf: 'stretch',
         radius: 'right',
-        padding: '0 1x',
+        width: '4x',
         color: {
             '': '#dark.75',
             hovered: '#dark.75',
@@ -79,11 +72,9 @@ function ComboBox(props, ref) {
     var _a;
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.useFormProps)(props);
-    let { qa, label, extra, labelPosition = 'top', labelStyles, isRequired, necessityIndicator, validationState, prefix, isDisabled, multiLine, autoFocus, inputRef, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, optionStyles, triggerStyles, suffix, listBoxStyles, overlayStyles, hideTrigger, message, description, size, autoComplete = 'off', direction = 'bottom', shouldFlip = true, requiredMark = true, menuTrigger = 'input', loadingState, filter, styles, ...otherProps } = props;
+    let { qa, label, extra, labelPosition = 'top', labelStyles, isRequired, necessityIndicator, validationState, icon, prefix, isDisabled, multiLine, autoFocus, wrapperRef, inputRef, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, optionStyles, triggerStyles, suffix, listBoxStyles, overlayStyles, hideTrigger, message, description, size, autoComplete = 'off', direction = 'bottom', shouldFlip = true, requiredMark = true, menuTrigger = 'input', suffixPosition = 'before', loadingState, filter, styles, labelSuffix, ...otherProps } = props;
     let isAsync = loadingState != null;
     let { contains } = (0, i18n_1.useFilter)({ sensitivity: 'base' });
-    let [suffixWidth, setSuffixWidth] = (0, react_1.useState)(0);
-    let [prefixWidth, setPrefixWidth] = (0, react_1.useState)(0);
     let state = (0, combobox_1.useComboBoxState)({
         ...props,
         defaultFilter: filter || contains,
@@ -92,6 +83,7 @@ function ComboBox(props, ref) {
     const outerStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, styles);
     inputStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.BLOCK_STYLES, inputStyles);
     ref = (0, react_2.useCombinedRefs)(ref);
+    wrapperRef = (0, react_2.useCombinedRefs)(wrapperRef);
     inputRef = (0, react_2.useCombinedRefs)(inputRef);
     triggerRef = (0, react_2.useCombinedRefs)(triggerRef);
     popoverRef = (0, react_2.useCombinedRefs)(popoverRef);
@@ -114,10 +106,6 @@ function ComboBox(props, ref) {
         onClose: state.close,
         offset: overlayOffset,
     });
-    if (prefix) {
-        inputStyles.paddingLeft = `${prefixWidth}px`;
-    }
-    inputStyles.paddingRight = `${suffixWidth}px`;
     let { isFocused, focusProps } = (0, interactions_2.useFocus)({ isDisabled });
     let { hoverProps, isHovered } = (0, interactions_1.useHover)({ isDisabled });
     // Get props for the button based on the trigger props from useComboBox
@@ -125,26 +113,45 @@ function ComboBox(props, ref) {
     let { hoverProps: triggerHoverProps, isHovered: isTriggerHovered } = (0, interactions_1.useHover)({ isDisabled });
     let { focusProps: triggerFocusProps, isFocused: isTriggerFocused } = (0, interactions_2.useFocus)({ isDisabled }, true);
     let isInvalid = validationState === 'invalid';
-    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 validationIcon = isInvalid ? ((0, jsx_runtime_1.jsx)(icons_1.WarningOutlined, { "data-element": "ValidationIcon", style: { color: 'var(--danger-color)' } }, void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.CheckOutlined, { "data-element": "ValidationIcon", 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 mods = {
+    let comboBoxWidth = (_a = wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+    if (icon) {
+        icon = (0, jsx_runtime_1.jsx)("div", { "data-element": "InputIcon", children: icon }, void 0);
+        if (prefix) {
+            prefix = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, prefix] }, void 0));
+        }
+        else {
+            prefix = icon;
+        }
+    }
+    let mods = (0, react_1.useMemo)(() => ({
         invalid: isInvalid,
         valid: validationState === 'valid',
         disabled: isDisabled,
         hovered: isHovered,
         focused: isFocused,
         loading: isLoading,
-    };
-    let comboBoxField = ((0, jsx_runtime_1.jsxs)(ComboBoxWrapperElement, { ref: ref, qa: qa || 'ComboBox', ...(0, react_2.modAttrs)(mods), styles: outerStyles, style: {
+        prefix: !!prefix,
+        suffix: true,
+    }), [
+        isInvalid,
+        validationState,
+        isDisabled,
+        isHovered,
+        isFocused,
+        isLoading,
+        prefix,
+    ]);
+    let comboBoxField = ((0, jsx_runtime_1.jsxs)(ComboBoxWrapperElement, { ref: wrapperRef, qa: qa || 'ComboBox', ...(0, react_2.modAttrs)(mods), styles: outerStyles, style: {
             zIndex: isFocused ? 1 : 'initial',
-        }, "data-size": size, children: [(0, jsx_runtime_1.jsx)(InputElement, { qa: "Input", ...(0, react_2.mergeProps)(inputProps, hoverProps, focusProps), ref: inputRef, autoComplete: autoComplete, styles: inputStyles, ...(0, react_2.modAttrs)(mods), "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, react_2.mergeProps)(buttonProps, triggerFocusProps, triggerHoverProps), ...(0, react_2.modAttrs)({
+        }, "data-size": size, children: [(0, jsx_runtime_1.jsx)(InputElement, { qa: "Input", ...(0, react_2.mergeProps)(inputProps, hoverProps, focusProps), ref: inputRef, autoComplete: autoComplete, styles: inputStyles, ...(0, react_2.modAttrs)(mods), "data-size": size }, void 0), prefix ? (0, jsx_runtime_1.jsx)("div", { "data-element": "Prefix", children: prefix }, void 0) : null, (0, jsx_runtime_1.jsxs)("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, validationState || isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [validationState && !isLoading ? validation : null, isLoading ? (0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, {}, void 0) : null] }, void 0)) : null, suffixPosition === 'after' ? suffix : null, !hideTrigger ? ((0, jsx_runtime_1.jsx)(TriggerElement, { qa: "ComboBoxTrigger", ...(0, react_2.mergeProps)(buttonProps, triggerFocusProps, triggerHoverProps), ...(0, react_2.modAttrs)({
                             pressed: isTriggerPressed,
                             focused: isTriggerFocused,
                             hovered: isTriggerHovered,
                             disabled: isDisabled,
                             loading: isLoading,
-                        }), "data-size": size, isDisabled: isDisabled, ref: triggerRef, styles: triggerStyles, children: (0, jsx_runtime_1.jsx)(CaretDownIcon, {}, void 0) }, void 0)) : null] }, void 0), (0, jsx_runtime_1.jsx)(OverlayWrapper_1.OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: (0, jsx_runtime_1.jsx)(Select_1.ListBoxPopup, { ...listBoxProps, listBoxRef: listBoxRef, popoverRef: popoverRef, overlayProps: overlayProps, shouldUseVirtualFocus: true, placement: placement, state: state, listBoxStyles: listBoxStyles, overlayStyles: overlayStyles, optionStyles: optionStyles, minWidth: comboBoxWidth }, void 0) }, void 0)] }, void 0));
+                        }), ref: triggerRef, "data-size": size, isDisabled: isDisabled, styles: triggerStyles, children: (0, jsx_runtime_1.jsx)(CaretDownIcon, {}, void 0) }, void 0)) : null] }, void 0), (0, jsx_runtime_1.jsx)(OverlayWrapper_1.OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: (0, jsx_runtime_1.jsx)(Select_1.ListBoxPopup, { ...listBoxProps, shouldUseVirtualFocus: true, listBoxRef: listBoxRef, popoverRef: popoverRef, overlayProps: overlayProps, placement: placement, state: state, listBoxStyles: listBoxStyles, overlayStyles: overlayStyles, optionStyles: optionStyles, minWidth: comboBoxWidth }, void 0) }, void 0)] }, void 0));
     return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
             labelPosition,
             label,
@@ -159,6 +166,7 @@ function ComboBox(props, ref) {
             message,
             description,
             requiredMark,
+            labelSuffix,
             Component: comboBoxField,
             ref: ref,
         } }, void 0));