@seeqdev/qomponents 0.0.189 → 0.0.191

package/README.md

@@ -47,16 +47,10 @@ To make sure all styles are properly applied be sure to include the qomponents c
 
 ```css
 @import '@seeqdev/qomponents/dist/styles.css';
-
-@font-face {
-  font-family: 'fontCustom';
-  src: url('@seeqdev/qomponents/dist/FontCustom.woff2') format('woff2'), url('@seeqdev/qomponents/dist/FontCustom.woff')
-      format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
 ```
 
+**Note:** The styles.css file already includes the icon font definitions, so you don't need to manually add `@font-face` declarations.
+
 <b>A note on CSS:</b> Seeq's qomponents come fully styled and ready to use. While it is tempting to use the
 available <i>extraClassNames</i> property to provide yet additional styling we strongly advise you to use this
 property to provide only width, margins and padding. This will ensure for a smooth upgrade experience when

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx as jsx$1, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useLayoutEffect, useState, useRef, useEffect, useCallback, forwardRef, useContext, useMemo, createContext, Component, Fragment as Fragment$1, useId as useId$1, useInsertionEffect as useInsertionEffect$2, Children, isValidElement, createElement } from 'react';
+import React__default, { useLayoutEffect, useState, useCallback, useRef, useEffect, forwardRef, useContext, useMemo, createContext, Component, Fragment as Fragment$1, useId as useId$1, useInsertionEffect as useInsertionEffect$2, Children, isValidElement, createElement } from 'react';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default, { createPortal } from 'react-dom';
 
@@ -3843,7 +3843,7 @@ var removedBarSizeVariable = '--removed-body-scroll-bar-size';
  * assignRef(refObject, "refValue");
  * assignRef(refFn, "refValue");
  */
-function assignRef(ref, value) {
+function assignRef$1(ref, value) {
     if (typeof ref === 'function') {
         ref(value);
     }
@@ -3910,7 +3910,7 @@ var currentValues = new WeakMap();
  */
 function useMergeRefs(refs, defaultValue) {
     var callbackRef = useCallbackRef(null, function (newValue) {
-        return refs.forEach(function (ref) { return assignRef(ref, newValue); });
+        return refs.forEach(function (ref) { return assignRef$1(ref, newValue); });
     });
     // handle refs changes - added or removed
     useIsomorphicLayoutEffect$1(function () {
@@ -3921,12 +3921,12 @@ function useMergeRefs(refs, defaultValue) {
             var current_1 = callbackRef.current;
             prevRefs_1.forEach(function (ref) {
                 if (!nextRefs_1.has(ref)) {
-                    assignRef(ref, null);
+                    assignRef$1(ref, null);
                 }
             });
             nextRefs_1.forEach(function (ref) {
                 if (!prevRefs_1.has(ref)) {
-                    assignRef(ref, current_1);
+                    assignRef$1(ref, current_1);
                 }
             });
         }
@@ -4888,6 +4888,41 @@ const setValidInputDimension = (width, height) => {
     return inputStyle;
 };
 
+function assignRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  } else if (typeof ref === "object" && ref !== null && "current" in ref) {
+    ref.current = value;
+  }
+}
+function mergeRefs(...refs) {
+  const cleanupMap = /* @__PURE__ */ new Map();
+  return (node) => {
+    refs.forEach((ref) => {
+      const cleanup = assignRef(ref, node);
+      if (cleanup) {
+        cleanupMap.set(ref, cleanup);
+      }
+    });
+    if (cleanupMap.size > 0) {
+      return () => {
+        refs.forEach((ref) => {
+          const cleanup = cleanupMap.get(ref);
+          if (cleanup && typeof cleanup === "function") {
+            cleanup();
+          } else {
+            assignRef(ref, null);
+          }
+        });
+        cleanupMap.clear();
+      };
+    }
+  };
+}
+function useMergedRef(...refs) {
+  return useCallback(mergeRefs(...refs), refs);
+}
+
 const errorClasses$4 = 'tw:border-sq-danger';
 const borderColorClasses$4 = [
     'tw:border-sq-disabled-gray',
@@ -4913,13 +4948,9 @@ const sizeClasses = {
 const TextField = React__default.forwardRef((props, ref) => {
     const { readonly = false, disabled = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, showError, errorText, min, max, maxLength, minLength, required = false, autoComplete = 'off', inputWidth = undefined, inputHeight = undefined, autoFocus = false, ...tooltipProps } = props;
     const internalRef = useRef(null);
+    const mergedRef = useMergedRef(ref, internalRef);
     const [cursor, setCursor] = useState(null);
     const tooltipData = getQTipData(tooltipProps);
-    const setAllRefs = (receivedRef) => {
-        if (ref)
-            ref.current = receivedRef;
-        internalRef.current = receivedRef;
-    };
     useEffect(() => {
         if (autoFocus) {
             setTimeout(() => {
@@ -4965,7 +4996,7 @@ const TextField = React__default.forwardRef((props, ref) => {
         inputLenghtProp.maxLength = maxLength;
     if (minLength)
         inputLenghtProp.minLength = minLength;
-    return (jsxs(Fragment, { children: [jsx$1("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, autoComplete: autoComplete, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, step: step, required: required, min: min, max: max, ...inputLenghtProp, ...inputProp, ...tooltipData }), errorText && showError && jsx$1("div", { className: "tw:text-sq-danger tw:text-xs tw:mt-1", children: errorText })] }));
+    return (jsxs(Fragment, { children: [jsx$1("input", { ref: mergedRef, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, autoComplete: autoComplete, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, step: step, required: required, min: min, max: max, ...inputLenghtProp, ...inputProp, ...tooltipData }), errorText && showError && jsx$1("div", { className: "tw:text-sq-danger tw:text-xs tw:mt-1", children: errorText })] }));
 });
 
 const alignment = 'tw:flex';
@@ -5010,6 +5041,7 @@ const borderColorClasses$3 = [
 const TextArea = React__default.forwardRef(({ readonly = false, disabled = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, onSelectionChange, id, name, rows = 3, cols = undefined, value, placeholder, showError, extraClassNames, testId, autoFocus = false, }, ref) => {
     const appliedClasses = `${baseClasses$4} ${extraClassNames} ${lightTheme$2} ${darkTheme$2} ${showError ? errorClasses$3 : borderColorClasses$3}`;
     const textareaRef = useRef(null);
+    const mergedRef = useMergedRef(ref, textareaRef);
     // Handle selection change events
     useEffect(() => {
         if (!onSelectionChange || !textareaRef.current) {
@@ -5030,15 +5062,7 @@ const TextArea = React__default.forwardRef(({ readonly = false, disabled = false
             textarea.removeEventListener('keyup', handleSelectionChange);
         };
     }, [onSelectionChange]);
-    return (jsx$1("textarea", { ref: (element) => {
-            textareaRef.current = element;
-            if (typeof ref === 'function') {
-                ref(element);
-            }
-            else if (ref) {
-                ref.current = element;
-            }
-        }, "data-testid": testId, name: name, id: id, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, rows: rows, cols: cols, autoFocus: autoFocus }));
+    return (jsx$1("textarea", { ref: mergedRef, "data-testid": testId, name: name, id: id, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, rows: rows, cols: cols, autoFocus: autoFocus }));
 });
 
 /**
@@ -7570,7 +7594,7 @@ const QTip = () => {
         }
     };
     return (jsx$1(Fragment, { children: jsxs("div", { onMouseEnter: () => setOverTooltip(true), onMouseLeave: () => setOverTooltip(false), "data-testid": tooltipTestId, ref: tooltipRef, className: 'tw:absolute tw:rounded tw:bg-black tw:max-w-96 tw:p-2 tw:text-xs tw:text-sq-white tw:z-[9999] tw:fade-in ' +
-                (show ? 'tw:visible' : 'tw:invisible tw:pointer-events-none'), children: [html ? jsx$1(HTMLTip, { text: tooltipText }) : tooltipText, jsx$1("div", { className: "tw:absolute tw:w-2.5 tw:h-2.5 tw:rotate-45 tw:bg-sq-black tw:dark:bg-sq-black", ref: tooltipArrowRef })] }) }));
+                (show ? 'tw:visible' : 'tw:invisible tw:pointer-events-none'), children: [html ? jsx$1(HTMLTip, { text: tooltipText }) : tooltipText, jsx$1("div", { className: "tw:absolute tw:w-2.5 tw:h-2.5 tw:rotate-45 tw:bg-black", ref: tooltipArrowRef })] }) }));
 };
 
 function _typeof(o) {
@@ -14019,14 +14043,14 @@ const menuStyles = [
     'tw:dark:border-sq-dark-disabled-gray',
     'tw:whitespace-nowrap',
     'tw:min-w-fit',
-    'tw:!z-[9999]',
+    'tw:z-[9999]!',
 ].join(' ');
 const menuListStyles = [
     'tw:rounded-b',
     'tw:bg-sq-white',
     'tw:dark:bg-sq-dark-background',
     'tw:min-w-fit',
-    'tw:!z-[9999]',
+    'tw:z-[9999]!',
     'specSelectMenu',
 ].join(' ');
 const groupHeadingStyles = [
@@ -14045,7 +14069,7 @@ const optionStyles = [
     'tw:px-2.5',
     'specSelectOption',
 ].join(' ');
-const disabledClasses$3 = ['tw:bg-sq-field-disabled-gray', 'tw:!cursor-not-allowed', 'tw:opacity-50'].join(' ');
+const disabledClasses$3 = ['tw:bg-sq-field-disabled-gray', 'tw:cursor-not-allowed!', 'tw:opacity-50'].join(' ');
 const dropDownIndicatorStyles = `tw:text-sq-disabled-gray ${textActiveStyles} specOpenIt`;
 const placeholderStyles = ['tw:text-gray-400', 'tw:dark:text-sq-dark-text-lighter', 'specOpenSelect'].join(' ');
 const multiValueStyles = [
@@ -14134,12 +14158,12 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
             placeholder: () => placeholderStyles,
             container: ({ selectProps }) => {
                 const containerBorderStyles = selectProps?.menuIsOpen ? 'tw:rounded-t-md' : 'tw:rounded-md';
-                return `${textStyles} ${extraClassNames} ${containerBorderStyles} tw:!pointer-events-auto`;
+                return `${textStyles} ${extraClassNames} ${containerBorderStyles} tw:pointer-events-auto!`;
             },
             input: () => textStyles + ' specSelectInput',
             menuList: () => menuListStyles,
             menu: () => menuStyles,
-            menuPortal: () => 'tw:!z-[9000]',
+            menuPortal: () => 'tw:z-[9000]!',
             dropdownIndicator: () => dropDownIndicatorStyles,
             option: ({ isSelected, isDisabled }) => {
                 let classes = optionStyles;
@@ -14593,7 +14617,7 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
         }
         return (jsxs(Fragment, { children: [titleIcon && titleIconPosition === 'left' ? jsx$1("div", { className: "tw:flex tw:mr-2", children: titleIconElement }) : jsx$1(Fragment, {}), jsx$1(DialogTitle, { asChild: true, children: isTitleEditable ? (jsxs("div", { className: "tw:flex tw:w-full tw:items-center", children: [jsx$1(TextField, { extraClassNames: inputExtraClassNames, value: title, type: "text", testId: "modalTitle", onChange: onTitleChanged, placeholder: titlePlaceholder, required: titleRequired, showError: !!titleError }), titleError && jsx$1("p", { className: "tw:text-sq-danger tw:min-w-fit tw:pl-2 tw:mb-0", children: titleError })] })) : (customHeader ?? (jsxs("div", { "data-testid": "modalTitle", className: "modal-title", children: [jsxs("div", { className: "tw:flex tw:items-center", children: [jsx$1("h3", { children: title }), titleSuffixLabel && jsx$1("span", { className: "tw:text-xl tw:pl-0.5", children: titleSuffixLabel })] }), subtitle && (jsx$1("div", { className: "tw:italic tw:text-sm tw:text-left tw:mt-1", "data-testid": "modal-subtitle", children: subtitle }))] }))) }), titleIcon && titleIconPosition === 'right' ? jsx$1("div", { className: "tw:flex tw:ml-4", children: titleIconElement }) : jsx$1(Fragment, {})] }));
     };
-    return open ? (jsx$1(Dialog, { open: true, onOpenChange: onClose, modal: keepFocusInsideModal, children: jsxs(DialogContent, { onPointerDownOutside: (e) => (onPointerDownOutside ? onPointerDownOutside(e) : e.preventDefault()), onInteractOutside: (e) => (onInteractOutside ? onInteractOutside(e) : e.preventDefault()), "data-testid": testId, className: classNames(`modalContent tw:w-full tw:border-none tw:shadow-none tw:dark:text-sq-dark-text tw:!gap-0`, {
+    return open ? (jsx$1(Dialog, { open: true, onOpenChange: onClose, modal: keepFocusInsideModal, children: jsxs(DialogContent, { onPointerDownOutside: (e) => (onPointerDownOutside ? onPointerDownOutside(e) : e.preventDefault()), onInteractOutside: (e) => (onInteractOutside ? onInteractOutside(e) : e.preventDefault()), "data-testid": testId, className: classNames(`modalContent tw:w-full tw:border-none tw:shadow-none tw:dark:text-sq-dark-text tw:gap-0!`, {
                 'tw:max-w-xs': size === 'xs',
                 'tw:max-w-sm': size === 'sm',
                 'tw:max-w-md': size === 'md',
@@ -16634,16 +16658,16 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames =
                                 }
                                 if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
                                     return (jsxs(Sub2, { children: [jsxs(SubTrigger2, { id: id, className: `tw:cursor-pointer tw:flex tw:justify-between tw:dark:text-sq-white tw:hover:bg-sq-gray-highlight tw:dark:hover:bg-sq-gray-highlight-dark tw:leading-none tw:items-center tw:h-sq-27 tw:pl-sq-19 tw:relative tw:select-none tw:outline-none tw:data-disabled:pointer-events-none ${item.itemExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled, ...tooltipData, children: [jsxs("div", { className: "tw:flex", children: [item.icon && (jsx$1(Icon, { icon: item.icon, extraClassNames: `tw:w-4.5 ${item.disabled
-                                                                    ? 'tw:!text-sq-disabled-gray'
-                                                                    : 'tw:text-sq-text-color tw:dark:text-sq-white'} ${item.iconExtraClassNames || ''}` })), jsx$1("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw:text-sq-13 tw:ml-1 ${item.disabled && 'tw:!opacity-30'} tw:not-italic tw:font-semibold ${item.labelClasses}`, children: item.label })] }), jsx$1(Icon, { size: "sm", icon: "fc-arrow-dropdown tw:rotate-270", extraClassNames: `${item.disabled ? 'tw:text-sq-disabled-gray' : 'tw:text-sq-text-color tw:dark:text-sq-white'} tw:w-4.5 tw:ml-4 tw:text-2 tw:justify-center tw:flex` })] }), jsx$1(Portal2, { children: jsx$1(SubContent2, { className: "tw:focus-visible:outline-none tw:outline-none", children: jsx$1("div", { "data-testid": containerTestId, className: `${bgStyles$1} tw:relative tw:z-[1000] tw:min-w-6 tw:py-2 tw:focus-visible:outline-none tw:outline-none tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out forceFont tw:data-[side=top]:animate-slideDownAndFade tw:data-[side=right]:animate-slideLeftAndFade tw:data-[side=bottom]:animate-slideUpAndFade tw:data-[side=left]:animate-slideRightAndFade ${borderStyles$1}`, children: item.subMenuItems.map((subItem, subIndex) => {
-                                                            return (jsxs(Item2, { onSelect: subItem.onClick, "data-qtip-text": subItem.tooltip, className: "tw:cursor-pointer tw:flex tw:dark:text-sq-white tw:hover:bg-sq-gray-highlight tw:dark:hover:bg-sq-gray-highlight-dark tw:leading-none tw:items-center tw:h-sq-27 tw:px-sq-19 tw:relative tw:select-none tw:outline-none tw:data-disabled:pointer-events-none", disabled: subItem.disabled, children: [subItem.iconClass && (jsx$1(Icon, { icon: subItem.iconClass, type: "text", extraClassNames: `tw:w-4.5 ${item.disabled && 'tw:!opacity-30'}` })), jsx$1("div", { className: `tw:text-sq-13 tw:ml-1 ${subItem.disabled
+                                                                    ? 'tw:text-sq-disabled-gray!'
+                                                                    : 'tw:text-sq-text-color tw:dark:text-sq-white'} ${item.iconExtraClassNames || ''}` })), jsx$1("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw:text-sq-13 tw:ml-1 ${item.disabled && 'tw:opacity-30!'} tw:not-italic tw:font-semibold ${item.labelClasses}`, children: item.label })] }), jsx$1(Icon, { size: "sm", icon: "fc-arrow-dropdown tw:rotate-270", extraClassNames: `${item.disabled ? 'tw:text-sq-disabled-gray' : 'tw:text-sq-text-color tw:dark:text-sq-white'} tw:w-4.5 tw:ml-4 tw:text-2 tw:justify-center tw:flex` })] }), jsx$1(Portal2, { children: jsx$1(SubContent2, { className: "tw:focus-visible:outline-none tw:outline-none", children: jsx$1("div", { "data-testid": containerTestId, className: `${bgStyles$1} tw:relative tw:z-[1000] tw:min-w-6 tw:py-2 tw:focus-visible:outline-none tw:outline-none tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out forceFont tw:data-[side=top]:animate-slideDownAndFade tw:data-[side=right]:animate-slideLeftAndFade tw:data-[side=bottom]:animate-slideUpAndFade tw:data-[side=left]:animate-slideRightAndFade ${borderStyles$1}`, children: item.subMenuItems.map((subItem, subIndex) => {
+                                                            return (jsxs(Item2, { onSelect: subItem.onClick, "data-qtip-text": subItem.tooltip, className: "tw:cursor-pointer tw:flex tw:dark:text-sq-white tw:hover:bg-sq-gray-highlight tw:dark:hover:bg-sq-gray-highlight-dark tw:leading-none tw:items-center tw:h-sq-27 tw:px-sq-19 tw:relative tw:select-none tw:outline-none tw:data-disabled:pointer-events-none", disabled: subItem.disabled, children: [subItem.iconClass && (jsx$1(Icon, { icon: subItem.iconClass, type: "text", extraClassNames: `tw:w-4.5 ${item.disabled && 'tw:opacity-30!'}` })), jsx$1("div", { className: `tw:text-sq-13 tw:ml-1 ${subItem.disabled
                                                                             ? 'tw:text-sq-disabled-gray'
                                                                             : 'tw:text-sq-text-color tw:dark:text-sq-white'} tw:not-italic tw:font-normal ${item.labelClasses}`, children: subItem.label })] }, subItem.label + subIndex));
                                                         }) }) }) })] }, (item.id || item.icon || '') + index));
                                 }
                                 return (jsxs("div", { ...tooltipData, children: [jsxs(Item2, { "data-customid": item.itemCustomId, onSelect: (e) => {
                                                 item.onClick(e);
-                                            }, className: `tw:cursor-pointer tw:flex tw:dark:text-sq-white tw:hover:bg-sq-gray-highlight tw:dark:hover:bg-sq-gray-highlight-dark tw:leading-none tw:items-center tw:min-h-sq-27 tw:px-sq-19 tw:relative tw:select-none tw:outline-none tw:data-disabled:pointer-events-none ${item.itemExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled, children: [item.icon && (jsx$1(Icon, { icon: item.icon, testId: item.iconTestId, type: (item.iconType || 'text'), color: item.iconColor, customId: item.iconCustomId, extraClassNames: `tw:w-sq-4.5 ${item.disabled && 'tw:!opacity-30'} ${item.iconExtraClassNames || ''}` })), jsx$1("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw:text-sq-13 tw:ml-1 ${item.disabled ? 'tw:text-sq-disabled-gray' : 'tw:text-sq-text-color tw:dark:text-sq-white'} tw:not-italic tw:font-normal ${item.labelClasses || ''}`, children: item.label })] }, (item.id || item.icon || '') + index), item.hasDivider && (jsx$1(Separator2, { "data-testid": `dropdown-divider-${index}`, className: "tw:h-px tw:bg-sq-disabled-gray tw:dark:bg-gray-500 tw:my-2" }))] }, (item.id || '') + index));
+                                            }, className: `tw:cursor-pointer tw:flex tw:dark:text-sq-white tw:hover:bg-sq-gray-highlight tw:dark:hover:bg-sq-gray-highlight-dark tw:leading-none tw:items-center tw:min-h-sq-27 tw:px-sq-19 tw:relative tw:select-none tw:outline-none tw:data-disabled:pointer-events-none ${item.itemExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled, children: [item.icon && (jsx$1(Icon, { icon: item.icon, testId: item.iconTestId, type: (item.iconType || 'text'), color: item.iconColor, customId: item.iconCustomId, extraClassNames: `tw:w-sq-4.5 ${item.disabled && 'tw:opacity-30!'} ${item.iconExtraClassNames || ''}` })), jsx$1("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw:text-sq-13 tw:ml-1 ${item.disabled ? 'tw:text-sq-disabled-gray' : 'tw:text-sq-text-color tw:dark:text-sq-white'} tw:not-italic tw:font-normal ${item.labelClasses || ''}`, children: item.label })] }, (item.id || item.icon || '') + index), item.hasDivider && (jsx$1(Separator2, { "data-testid": `dropdown-divider-${index}`, className: "tw:h-px tw:bg-sq-disabled-gray tw:dark:bg-gray-500 tw:my-2" }))] }, (item.id || '') + index));
                             })] }) }) })] }));
 };
 
@@ -16659,7 +16683,7 @@ const borderColorClasses$1 = 'tw:border-sq-theme-dark';
 const Alert = ({ children, dismissible = true, onClose, show = true, variant, testId = 'alert-id', id, extraClassNames, ...tooltipProps }) => {
     const appliedTheme = {
         theme: `${lightTheme$1} ${darkTheme$1}`,
-        formulaError: 'tw:text-red-800 tw:bg-red-200 tw:!rounded-[0.25rem]',
+        formulaError: 'tw:text-red-800 tw:bg-red-200 tw:rounded-[0.25rem]!',
         danger: 'tw:text-sq-text-color tw:bg-sq-danger',
         warning: 'tw:bg-sq-bg-warning tw:text-sq-text-color',
         gray: 'tw:bg-sq-hover-gray tw:text-sq-text-color tw:dark:bg-sq-tools-background-dark tw:dark:text-sq-text-color-dark',
@@ -16704,7 +16728,7 @@ const SvgIcon = ({ onClick, icon, color, type = 'default', extraClassNames, view
 const SeeqActionDropdownItem = (item) => {
     let renderIcon = jsx$1(Fragment, {});
     if (item.icon) {
-        renderIcon = isSvgIcon(item.icon) ? (jsx$1(SvgIcon, { icon: item.icon, extraClassNames: item.iconExtraClassNames + 'tw:p-1 tw:h-8 tw:w-8 tw:dark:text-sq-white tw:!text-5.5 tw:text-sq-white', ...item })) : (jsx$1(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw:dark:text-sq-white tw:!text-5.5 tw:text-sq-white ' + item.iconExtraClassNames }));
+        renderIcon = isSvgIcon(item.icon) ? (jsx$1(SvgIcon, { icon: item.icon, extraClassNames: item.iconExtraClassNames + 'tw:p-1 tw:h-8 tw:w-8 tw:dark:text-sq-white tw:text-5.5! tw:text-sq-white', ...item })) : (jsx$1(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw:dark:text-sq-white tw:text-5.5! tw:text-sq-white ' + item.iconExtraClassNames }));
     }
     return (jsxs("div", { className: "tw:flex-col tw:flex tw:p-2.5 tw:pl-5 tw:w-150", children: [jsxs("div", { className: "tw:flex tw:flex-row tw:gap-2 tw:items-end", children: [jsx$1("div", { className: classNames('tw:rounded-[0.1875rem] tw:h-8 tw:w-8 tw:bg-sq-theme-dark tw:flex tw:justify-center tw:items-center ', item.iconContainerExtraClassNames), children: renderIcon }), jsx$1("h4", { className: "tw:text-base tw:font-[600] tw:leading-5 mb-0", children: item.display })] }), jsx$1("div", { className: "tw:text-sq-13 tw:font-normal", children: item.text })] }));
 };
@@ -16716,7 +16740,7 @@ const ViewWorkbench = (item) => {
     return (jsx$1("div", { className: "tw:flex-col tw:flex tw:p-2.5", children: jsxs("div", { className: "tw:flex tw:flex-row tw:gap-2 tw:items-end", children: [jsx$1("div", { className: "tw:rounded-[0.1875rem] tw:h-5 tw:w-5 tw:flex tw:justify-center tw:items-center ", children: renderIcon }), jsx$1("div", { className: "tw:text-sq-13", children: item.display })] }) }));
 };
 const InsertSeeqContent = (item) => {
-    return (jsxs("div", { className: "tw:flex-col tw:flex tw:justify-start tw:p-2.5 tw:font-normal tw:text-left tw:text-sq-text-color tw:dark:text-sq-dark-text", children: [jsx$1("h5", { className: "tw:text-4 tw:font-medium tw:text-sq-theme-dark tw:leading-4.5", children: item.display }), jsx$1("div", { className: "tw:text-sq-13 tw:text-sq-text-color tw:dark:text-sq-dark-text tw:!mt-1", children: item.text })] }));
+    return (jsxs("div", { className: "tw:flex-col tw:flex tw:justify-start tw:p-2.5 tw:font-normal tw:text-left tw:text-sq-text-color tw:dark:text-sq-dark-text", children: [jsx$1("h5", { className: "tw:text-4 tw:font-medium tw:text-sq-theme-dark tw:leading-4.5", children: item.display }), jsx$1("div", { className: "tw:text-sq-13 tw:text-sq-text-color tw:dark:text-sq-dark-text tw:mt-1!", children: item.text })] }));
 };
 
 const borderStyles = [
@@ -29277,19 +29301,19 @@ const ProgressBar = ({ values = [], max = 100, containerExtraClasses = '', zeroV
 
 const baseClasses = 'tw:flex tw:outline-none tw:w-full tw:relative tw:flex-wrap';
 const activeClassesByVariantLightTheme = {
-    'outline': 'tw:!bg-sq-disabled-gray tw:border-sq-theme-dark',
+    'outline': 'tw:bg-sq-disabled-gray tw:border-sq-theme-dark',
     'theme': 'tw:bg-sq-theme-highlight',
     'danger': '',
     'theme-light': '',
-    'no-border': 'tw:!bg-sq-disabled-gray',
+    'no-border': 'tw:bg-sq-disabled-gray!',
     'warning': '',
 };
 const activeClassesByVariantDarkTheme = {
-    'outline': 'tw:!dark:bg-sq-multi-gray-dark tw:dark:border-sq-theme-dark',
+    'outline': 'tw:dark:bg-sq-multi-gray-dark tw:dark:border-sq-theme-dark',
     'theme': 'tw:dark:bg-sq-theme-highlight',
     'danger': '',
     'theme-light': '',
-    'no-border': 'tw:!dark:bg-sq-multi-gray-dark',
+    'no-border': 'tw:dark:bg-sq-multi-gray-dark!',
     'warning': '',
 };
 /**
@@ -29406,5 +29430,5 @@ const svgIconTypes = [...iconTypes, 'default'];
 
 const toolbarButtonVariants = ['outline', 'theme', 'theme-light', 'warning', 'danger', 'no-border'];
 
-export { Accordion, Alert, Button, ButtonGroup, ButtonWithDropdown, ButtonWithPopover, Carousel, Checkbox, Collapse, DEFAULT_TOOL_TIP_DELAY, Icon, InputGroup, Modal, ProgressBar, QTip, SeeqActionDropdown, Select, components as SelectCompoents, Slider, Tabs, TextArea, TextField, ToolbarButton, Tooltip, buttonSizes, buttonTypes, buttonVariants, iconPositions, iconTypes, svgIconTypes, toolbarButtonVariants, tooltipPositions };
+export { Accordion, Alert, Button, ButtonGroup, ButtonWithDropdown, ButtonWithPopover, Carousel, Checkbox, Collapse, DEFAULT_TOOL_TIP_DELAY, Icon, InputGroup, Modal, ProgressBar, QTip, SeeqActionDropdown, Select, components as SelectComponents, Slider, Tabs, TextArea, TextField, ToolbarButton, Tooltip, buttonSizes, buttonTypes, buttonVariants, iconPositions, iconTypes, svgIconTypes, toolbarButtonVariants, tooltipPositions };
 //# sourceMappingURL=index.esm.js.map