@seeqdev/qomponents 0.0.113 → 0.0.114

package/dist/index.js

@@ -15849,7 +15849,7 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames, c
                     }))))));
 };
 
-const baseClasses$1 = 'tw-mx-auto tw-p-4 tw-leading-normal tw-outline-none tw-py-2 tw-px-3 tw-rounded-sm tw-w-full' +
+const baseClasses$1 = 'tw-mx-auto tw-p-4 tw-leading-normal tw-outline-none tw-py-2 tw-px-3 tw-rounded-sm tw-w-full tw-relative' +
     ' tw-border-solid tw-border tw-text-sm tw-flex tw-flex-col tw-justify-center tw-items-center';
 const darkTheme$1 = 'dark:tw-bg-sq-colored-hover-dark dark:tw-text-sq-dark-text';
 const lightTheme$1 = 'tw-text-sq-text-color tw-bg-sq-colored-hover';
@@ -15858,24 +15858,26 @@ const borderColorClasses$1 = 'tw-border-sq-color-dark';
 /**
  * Alert.
  */
-const Alert = ({ children, dismissible = true, onClose, show = true, variant, testId, id, extraClassNames, }) => {
+const Alert = ({ children, dismissible = true, onClose, show = true, variant, testId = 'alert-id', id, extraClassNames, ...tooltipProps }) => {
     const appliedTheme = {
         theme: `${lightTheme$1} ${darkTheme$1}`,
         danger: 'tw-text-sq-text-color tw-bg-sq-danger-color',
         warning: 'tw-bg-sq-bg-warning-color tw-text-sq-text-color',
+        gray: 'tw-bg-sq-light-gray tw-text-sq-text-color dark:tw-bg-sq-dark-disabled-gray dark:tw-text-sq-dark-text',
     };
     const appliedBorderTheme = {
         theme: borderColorClasses$1,
         danger: errorClasses$1,
         warning: 'tw-border-none',
+        gray: 'tw-border-sq-darkish-gray',
     };
     const appliedClasses = `${baseClasses$1} ${appliedTheme[variant]} ${extraClassNames} ${appliedBorderTheme[variant]}`;
     if (!show) {
         return React.createElement("div", null);
     }
     return (React.createElement("div", { "data-testid": testId, id: id, className: appliedClasses },
-        dismissible && (React.createElement(Icon, { icon: "fc-delete", type: variant.match(/danger|warning/) ? 'color' : 'theme', color: variant.match(/danger|warning/) ? 'inherit' : undefined, extraClassNames: `tw-self-end tw-text-[11px] tw-cursor-pointer ${variant.match(/danger|warning/) ? 'tw-text-sq-text-color dark:tw-text-sq-text-color' : ''}`, testId: `${testId}-close-btn`, onClick: onClose })),
-        children));
+        children,
+        dismissible && (React.createElement(Icon, { icon: "fc-delete", type: variant.match(/danger|warning/) ? 'color' : 'theme', color: variant.match(/danger|warning/) ? 'inherit' : undefined, extraClassNames: `tw-self-end tw-text-[11px] tw-cursor-pointer tw-absolute tw-right-[10px] tw-top-[10px] ${variant.match(/danger|warning|gray/) ? 'tw-text-sq-text-color dark:tw-text-sq-text-color' : ''}`, testId: `${testId}-close-btn`, onClick: onClose, ...tooltipProps }))));
 };
 
 const SeeqActionDropdownItem = (item) => {