@seeqdev/qomponents 0.0.188 → 0.0.190

package/dist/index.esm.js

@@ -7570,7 +7570,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", 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 +14019,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 +14045,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 +14134,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 +14593,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 +16634,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 +16659,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 +16704,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 +16716,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 +29277,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': '',
 };
 /**

package/dist/index.js

@@ -7590,7 +7590,7 @@ const QTip = () => {
         }
     };
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.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 ? jsxRuntime.jsx(HTMLTip, { text: tooltipText }) : tooltipText, jsxRuntime.jsx("div", { className: "tw:absolute tw:w-2.5 tw:h-2.5 tw:rotate-45 tw:bg-sq-black", ref: tooltipArrowRef })] }) }));
+                (show ? 'tw:visible' : 'tw:invisible tw:pointer-events-none'), children: [html ? jsxRuntime.jsx(HTMLTip, { text: tooltipText }) : tooltipText, jsxRuntime.jsx("div", { className: "tw:absolute tw:w-2.5 tw:h-2.5 tw:rotate-45 tw:bg-black", ref: tooltipArrowRef })] }) }));
 };
 
 function _typeof(o) {
@@ -14039,14 +14039,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 = [
@@ -14065,7 +14065,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 = [
@@ -14154,12 +14154,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;
@@ -14613,7 +14613,7 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
         }
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [titleIcon && titleIconPosition === 'left' ? jsxRuntime.jsx("div", { className: "tw:flex tw:mr-2", children: titleIconElement }) : jsxRuntime.jsx(jsxRuntime.Fragment, {}), jsxRuntime.jsx(DialogTitle, { asChild: true, children: isTitleEditable ? (jsxRuntime.jsxs("div", { className: "tw:flex tw:w-full tw:items-center", children: [jsxRuntime.jsx(TextField, { extraClassNames: inputExtraClassNames, value: title, type: "text", testId: "modalTitle", onChange: onTitleChanged, placeholder: titlePlaceholder, required: titleRequired, showError: !!titleError }), titleError && jsxRuntime.jsx("p", { className: "tw:text-sq-danger tw:min-w-fit tw:pl-2 tw:mb-0", children: titleError })] })) : (customHeader ?? (jsxRuntime.jsxs("div", { "data-testid": "modalTitle", className: "modal-title", children: [jsxRuntime.jsxs("div", { className: "tw:flex tw:items-center", children: [jsxRuntime.jsx("h3", { children: title }), titleSuffixLabel && jsxRuntime.jsx("span", { className: "tw:text-xl tw:pl-0.5", children: titleSuffixLabel })] }), subtitle && (jsxRuntime.jsx("div", { className: "tw:italic tw:text-sm tw:text-left tw:mt-1", "data-testid": "modal-subtitle", children: subtitle }))] }))) }), titleIcon && titleIconPosition === 'right' ? jsxRuntime.jsx("div", { className: "tw:flex tw:ml-4", children: titleIconElement }) : jsxRuntime.jsx(jsxRuntime.Fragment, {})] }));
     };
-    return open ? (jsxRuntime.jsx(Dialog, { open: true, onOpenChange: onClose, modal: keepFocusInsideModal, children: jsxRuntime.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 ? (jsxRuntime.jsx(Dialog, { open: true, onOpenChange: onClose, modal: keepFocusInsideModal, children: jsxRuntime.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',
@@ -16654,16 +16654,16 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames =
                                 }
                                 if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
                                     return (jsxRuntime.jsxs(Sub2, { children: [jsxRuntime.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: [jsxRuntime.jsxs("div", { className: "tw:flex", children: [item.icon && (jsxRuntime.jsx(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 || ''}` })), jsxRuntime.jsx("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 })] }), jsxRuntime.jsx(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` })] }), jsxRuntime.jsx(Portal2, { children: jsxRuntime.jsx(SubContent2, { className: "tw:focus-visible:outline-none tw:outline-none", children: jsxRuntime.jsx("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 (jsxRuntime.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 && (jsxRuntime.jsx(Icon, { icon: subItem.iconClass, type: "text", extraClassNames: `tw:w-4.5 ${item.disabled && 'tw:!opacity-30'}` })), jsxRuntime.jsx("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 || ''}` })), jsxRuntime.jsx("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 })] }), jsxRuntime.jsx(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` })] }), jsxRuntime.jsx(Portal2, { children: jsxRuntime.jsx(SubContent2, { className: "tw:focus-visible:outline-none tw:outline-none", children: jsxRuntime.jsx("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 (jsxRuntime.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 && (jsxRuntime.jsx(Icon, { icon: subItem.iconClass, type: "text", extraClassNames: `tw:w-4.5 ${item.disabled && 'tw:opacity-30!'}` })), jsxRuntime.jsx("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 (jsxRuntime.jsxs("div", { ...tooltipData, children: [jsxRuntime.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 && (jsxRuntime.jsx(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 || ''}` })), jsxRuntime.jsx("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 && (jsxRuntime.jsx(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 && (jsxRuntime.jsx(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 || ''}` })), jsxRuntime.jsx("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 && (jsxRuntime.jsx(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));
                             })] }) }) })] }));
 };
 
@@ -16679,7 +16679,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',
@@ -16724,7 +16724,7 @@ const SvgIcon = ({ onClick, icon, color, type = 'default', extraClassNames, view
 const SeeqActionDropdownItem = (item) => {
     let renderIcon = jsxRuntime.jsx(jsxRuntime.Fragment, {});
     if (item.icon) {
-        renderIcon = isSvgIcon(item.icon) ? (jsxRuntime.jsx(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 })) : (jsxRuntime.jsx(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) ? (jsxRuntime.jsx(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 })) : (jsxRuntime.jsx(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw:dark:text-sq-white tw:text-5.5! tw:text-sq-white ' + item.iconExtraClassNames }));
     }
     return (jsxRuntime.jsxs("div", { className: "tw:flex-col tw:flex tw:p-2.5 tw:pl-5 tw:w-150", children: [jsxRuntime.jsxs("div", { className: "tw:flex tw:flex-row tw:gap-2 tw:items-end", children: [jsxRuntime.jsx("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 }), jsxRuntime.jsx("h4", { className: "tw:text-base tw:font-[600] tw:leading-5 mb-0", children: item.display })] }), jsxRuntime.jsx("div", { className: "tw:text-sq-13 tw:font-normal", children: item.text })] }));
 };
@@ -16736,7 +16736,7 @@ const ViewWorkbench = (item) => {
     return (jsxRuntime.jsx("div", { className: "tw:flex-col tw:flex tw:p-2.5", children: jsxRuntime.jsxs("div", { className: "tw:flex tw:flex-row tw:gap-2 tw:items-end", children: [jsxRuntime.jsx("div", { className: "tw:rounded-[0.1875rem] tw:h-5 tw:w-5 tw:flex tw:justify-center tw:items-center ", children: renderIcon }), jsxRuntime.jsx("div", { className: "tw:text-sq-13", children: item.display })] }) }));
 };
 const InsertSeeqContent = (item) => {
-    return (jsxRuntime.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: [jsxRuntime.jsx("h5", { className: "tw:text-4 tw:font-medium tw:text-sq-theme-dark tw:leading-4.5", children: item.display }), jsxRuntime.jsx("div", { className: "tw:text-sq-13 tw:text-sq-text-color tw:dark:text-sq-dark-text tw:!mt-1", children: item.text })] }));
+    return (jsxRuntime.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: [jsxRuntime.jsx("h5", { className: "tw:text-4 tw:font-medium tw:text-sq-theme-dark tw:leading-4.5", children: item.display }), jsxRuntime.jsx("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 = [
@@ -29297,19 +29297,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': '',
 };
 /**

package/dist/src/Tooltip/QTip.stories.d.ts

@@ -3,3 +3,4 @@ declare const _default: {
 };
 export default _default;
 export declare const AllQTips: () => import("react/jsx-runtime").JSX.Element;
+export declare const DarkMode: () => import("react/jsx-runtime").JSX.Element;

package/dist/styles.css

@@ -21,6 +21,7 @@
     --tw-color-gray-400: oklch(70.7% 0.022 261.325);
     --tw-color-gray-500: oklch(55.1% 0.027 264.364);
     --tw-color-gray-700: oklch(37.3% 0.034 259.733);
+    --tw-color-gray-900: oklch(21% 0.034 264.665);
     --tw-color-black: #000;
     --tw-color-white: #fff;
     --tw-spacing: 0.25rem;
@@ -207,7 +208,7 @@
   }
 }
 @layer utilities {
-  .tw\:\!pointer-events-auto {
+  .tw\:pointer-events-auto\! {
     pointer-events: auto !important;
   }
   .tw\:pointer-events-none {
@@ -264,12 +265,6 @@
   .tw\:left-\[50\%\] {
     left: 50%;
   }
-  .tw\:\!z-\[9000\] {
-    z-index: 9000 !important;
-  }
-  .tw\:\!z-\[9999\] {
-    z-index: 9999 !important;
-  }
   .tw\:z-50 {
     z-index: 50;
   }
@@ -291,9 +286,15 @@
   .tw\:z-\[1200\] {
     z-index: 1200;
   }
+  .tw\:z-\[9000\]\! {
+    z-index: 9000 !important;
+  }
   .tw\:z-\[9999\] {
     z-index: 9999;
   }
+  .tw\:z-\[9999\]\! {
+    z-index: 9999 !important;
+  }
   .tw\:m-0\.5 {
     margin: calc(var(--tw-spacing) * 0.5);
   }
@@ -312,9 +313,6 @@
   .tw\:my-6 {
     margin-block: calc(var(--tw-spacing) * 6);
   }
-  .tw\:\!mt-1 {
-    margin-top: calc(var(--tw-spacing) * 1) !important;
-  }
   .tw\:-mt-0\.5 {
     margin-top: calc(var(--tw-spacing) * -0.5);
   }
@@ -327,6 +325,9 @@
   .tw\:mt-1 {
     margin-top: calc(var(--tw-spacing) * 1);
   }
+  .tw\:mt-1\! {
+    margin-top: calc(var(--tw-spacing) * 1) !important;
+  }
   .tw\:mt-1\.5 {
     margin-top: calc(var(--tw-spacing) * 1.5);
   }
@@ -604,15 +605,15 @@
   .tw\:animate-spin {
     animation: var(--tw-animate-spin);
   }
-  .tw\:\!cursor-not-allowed {
-    cursor: not-allowed !important;
-  }
   .tw\:cursor-default {
     cursor: default;
   }
   .tw\:cursor-not-allowed {
     cursor: not-allowed;
   }
+  .tw\:cursor-not-allowed\! {
+    cursor: not-allowed !important;
+  }
   .tw\:cursor-pointer {
     cursor: pointer;
   }
@@ -655,7 +656,7 @@
   .tw\:justify-start {
     justify-content: flex-start;
   }
-  .tw\:\!gap-0 {
+  .tw\:gap-0\! {
     gap: calc(var(--tw-spacing) * 0) !important;
   }
   .tw\:gap-1 {
@@ -676,15 +677,15 @@
   .tw\:overflow-y-auto {
     overflow-y: auto;
   }
-  .tw\:\!rounded-\[0\.25rem\] {
-    border-radius: 0.25rem !important;
-  }
   .tw\:rounded {
     border-radius: 0.25rem;
   }
   .tw\:rounded-\[0\.5rem\] {
     border-radius: 0.5rem;
   }
+  .tw\:rounded-\[0\.25rem\]\! {
+    border-radius: 0.25rem !important;
+  }
   .tw\:rounded-\[0\.1875rem\] {
     border-radius: 0.1875rem;
   }
@@ -821,15 +822,6 @@
   .tw\:border-b-sq-theme-darker {
     border-bottom-color: var(--theme-darker);
   }
-  .tw\:\!bg-red-500 {
-    background-color: var(--tw-color-red-500) !important;
-  }
-  .tw\:\!bg-sq-disabled-gray {
-    background-color: var(--sqw-disabled-gray) !important;
-  }
-  .tw\:\!bg-sq-success {
-    background-color: var(--sqw-success-color) !important;
-  }
   .tw\:bg-black {
     background-color: var(--tw-color-black);
   }
@@ -839,6 +831,9 @@
   .tw\:bg-gray-500 {
     background-color: var(--tw-color-gray-500);
   }
+  .tw\:bg-gray-900 {
+    background-color: var(--tw-color-gray-900);
+  }
   .tw\:bg-green-400 {
     background-color: var(--tw-color-green-400);
   }
@@ -851,6 +846,9 @@
   .tw\:bg-red-400 {
     background-color: var(--tw-color-red-400);
   }
+  .tw\:bg-red-500\! {
+    background-color: var(--tw-color-red-500) !important;
+  }
   .tw\:bg-sq-bg-warning {
     background-color: #fff3cd;
   }
@@ -875,6 +873,9 @@
   .tw\:bg-sq-disabled-gray {
     background-color: var(--sqw-disabled-gray);
   }
+  .tw\:bg-sq-disabled-gray\! {
+    background-color: var(--sqw-disabled-gray) !important;
+  }
   .tw\:bg-sq-field-disabled-gray {
     background-color: #efefef;
   }
@@ -887,6 +888,9 @@
   .tw\:bg-sq-overlay {
     background-color: #eeedee;
   }
+  .tw\:bg-sq-success\! {
+    background-color: var(--sqw-success-color) !important;
+  }
   .tw\:bg-sq-text-color {
     background-color: #3a3a3a;
   }
@@ -938,6 +942,9 @@
   .tw\:p-5 {
     padding: calc(var(--tw-spacing) * 5);
   }
+  .tw\:p-8 {
+    padding: calc(var(--tw-spacing) * 8);
+  }
   .tw\:px-1 {
     padding-inline: calc(var(--tw-spacing) * 1);
   }
@@ -1071,9 +1078,6 @@
   .tw\:whitespace-nowrap {
     white-space: nowrap;
   }
-  .tw\:\!text-sq-disabled-gray {
-    color: var(--sqw-disabled-gray) !important;
-  }
   .tw\:text-gray-400 {
     color: var(--tw-color-gray-400);
   }
@@ -1098,6 +1102,9 @@
   .tw\:text-sq-disabled-gray {
     color: var(--sqw-disabled-gray);
   }
+  .tw\:text-sq-disabled-gray\! {
+    color: var(--sqw-disabled-gray) !important;
+  }
   .tw\:text-sq-fairly-dark-gray {
     color: var(--sqw-fairly-dark-gray);
   }
@@ -1122,6 +1129,9 @@
   .tw\:text-sq-white {
     color: var(--sqw-white);
   }
+  .tw\:text-white {
+    color: var(--tw-color-white);
+  }
   .tw\:italic {
     font-style: italic;
   }
@@ -1133,12 +1143,12 @@
       color: var(--tw-color-gray-400);
     }
   }
-  .tw\:\!opacity-30 {
-    opacity: 30% !important;
-  }
   .tw\:opacity-0 {
     opacity: 0%;
   }
+  .tw\:opacity-30\! {
+    opacity: 30% !important;
+  }
   .tw\:opacity-50 {
     opacity: 50%;
   }
@@ -1763,6 +1773,11 @@
       background-color: #262c36;
     }
   }
+  .tw\:dark\:bg-sq-multi-gray-dark\! {
+    &:where(.tw-dark, .tw-dark *) {
+      background-color: #262c36 !important;
+    }
+  }
   .tw\:dark\:bg-sq-theme-dark {
     &:where(.tw-dark, .tw-dark *) {
       background-color: var(--theme-dark);
@@ -2982,7 +2997,8 @@
   --theme-footer-text: var(--sq-analysis-dark);
   --theme-item-row: var(--sq-analysis-light);
   --theme-highlight-background: var(--sq-analysis-light);
-  .color_topic {
+  .color_topic,
+  .color_topic_dark {
     --theme-darker: var(--sq-topic-darker);
     --theme-dark: var(--sq-topic-dark);
     --theme-link: var(--sq-topic-link);
@@ -2995,7 +3011,8 @@
     --theme-item-row: var(--sq-topic-light);
     --theme-highlight-background: var(--sq-topic-light);
   }
-  .color_analysis {
+  .color_analysis,
+  .color_analysis_dark {
     --theme-darker: var(--sq-analysis-darker);
     --theme-dark: var(--sq-analysis-dark);
     --theme-link: var(--sq-analysis-link);
@@ -3008,7 +3025,8 @@
     --theme-item-row: var(--sq-analysis-light);
     --theme-highlight-background: var(--sq-analysis-light);
   }
-  .color_datalab {
+  .color_datalab,
+  .color_datalab_dark {
     --theme-darker: var(--sq-datalab-darker);
     --theme-dark: var(--sq-datalab-dark);
     --theme-link: var(--sq-datalab-link);
@@ -3019,7 +3037,8 @@
     --theme-footer-text: var(--sq-datalab-dark);
     --theme-highlight-background: var(--sq-datalab-light);
   }
-  .color_vantage {
+  .color_vantage,
+  .color_vantage_dark {
     --theme-darker: var(--sq-vantage-darker);
     --theme-dark: var(--sq-vantage-dark);
     --theme-link: var(--sq-vantage-link);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seeqdev/qomponents",
-  "version": "0.0.188",
+  "version": "0.0.190",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/src/index.d.ts",