@seeqdev/qomponents 0.0.147 → 0.0.149

package/dist/index.js

@@ -4611,8 +4611,8 @@ const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIco
                     isPrimaryAnSvg ? (React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: `tw-text-sq-text-color dark:tw-text-sq-dark-text ${primaryIconExtraClassNames || ''}`, viewBox: primaryIconViewbox, height: `${iconHeight}px`, width: `${iconWidth}px`, fill: "currentColor", "data-testid": testId },
                         React__namespace.createElement("path", { d: getSvgIconPath(icon) }))) : (React__namespace.createElement(Icon, { icon: icon, testId: "firstIcon", type: "text", large: !isSmall && !label && !secondIcon && !forceSmallIcon, extraClassNames: `tw-text-sq-text-color dark:tw-text-sq-dark-text` })),
                     secondIcon && React__namespace.createElement(Icon, { icon: secondIcon, type: "text", testId: "secondIcon" }),
-                    popoverContent ? (React__namespace.createElement(Icon, { icon: "fc-arrow-dropdown", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-dark-text tw-ml-[3px] tw-text-[8px]", type: "text" })) : undefined),
-                !isSmall && (React__namespace.createElement("small", { className: "tw-text-sq-text-color dark:tw-text-sq-dark-text tw-text-[10px]" }, label)))),
+                    popoverContent ? (React__namespace.createElement(Icon, { icon: "fc-arrow-dropdown", extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-dark-text tw-ml-[3px] tw-text-[0.5rem]", type: "text" })) : undefined),
+                !isSmall && (React__namespace.createElement("small", { className: "tw-text-sq-text-color dark:tw-text-sq-dark-text tw-text-[0.625rem]" }, label)))),
         !!popoverContent ? (React__namespace.createElement(PopoverContent, { sideOffset: 2, align: "start" },
             React__namespace.createElement("div", { className: bgStyles$3 +
                     ' tw-relative tw-z-[1000] tw-min-w-6 tw-p-[0.5rem] focus-visible:tw-outline-none tw-outline-none data-[state=open]:animate-in data-[state=closed]:animate-out' +
@@ -14337,8 +14337,8 @@ const Tabs = ({ tabs, defaultActiveTab, activeTab, onTabSelect, extraClassNames,
                 ? 'tw-border-b-sq-color-dark dark:tw-border-b-sq-color-dark tw-border-b-[3px]'
                 : 'hover:tw-bg-sq-light-gray tw-border-b-[1px] hover:dark:tw-bg-gray-700'}`, "data-testid": tabsTestId, disabled: disabled, key: `${label}-${id}-${index}`, value: id },
             React.createElement("span", { className: "tw-flex tw-items-center tw-overflow-hidden tw-pb-[3px]" },
-                icon && React.createElement(Icon, { icon: icon, testId: `${id}_tab-icon`, extraClassNames: "tw-text-[15px] tw-mr-[7px] tw-flex-shrink-0" }),
-                React.createElement("span", { className: `tw-text-[14px] tw-font-medium tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis ${activeTab === id
+                icon && React.createElement(Icon, { icon: icon, testId: `${id}_tab-icon`, extraClassNames: "tw-text-[0.9375rem] tw-mr-[7px] tw-flex-shrink-0" }),
+                React.createElement("span", { className: `tw-text-[0.875rem] tw-font-medium tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis ${activeTab === id
                         ? 'dark:tw-text-sq-dark-text tw-text-gray-500'
                         : 'dark:tw-text-sq-color-dark-dark tw-text-sq-color-dark'}` }, label)))))),
         tabs.map((tab, index) => (React.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { className: `tw-bg-sq-white dark:tw-bg-sq-dark-background tw-overflow-y-auto -tw-mt-[1px] tw-border-t-[1px] dark:tw-border-gray-700 tw-z-[500] tw-flex tw-flex-col tw-flex-grow focus-visible:tw-outline-none ${tab.tabContentExtraClassNames || ''}`, key: `${tab.label}_${index}_content`, value: tab.id }, tab.content)))));
@@ -15816,7 +15816,7 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames =
                         if (item.isLabel) {
                             return (React__namespace.createElement($d08ef79370b62062$export$b04be29aa201d4f5, { key: (item.id || '') + index, className: item.itemExtraClassNames, ...tooltipData },
                                 item.icon && (React__namespace.createElement(Icon, { icon: item.icon, testId: item.iconTestId, type: "text", color: item.iconColor, extraClassNames: "tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]" })),
-                                React__namespace.createElement("div", { "data-testid": item.labelTestId, className: `tw-text-[13px] tw-ml-1 ${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}` }, item.label)));
+                                React__namespace.createElement("div", { "data-testid": item.labelTestId, className: `tw-text-[0.8125rem] tw-ml-1 ${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}` }, item.label)));
                         }
                         if (Array.isArray(item.subMenuItems) && item.subMenuItems.length > 0) {
                             return (React__namespace.createElement($d08ef79370b62062$export$d7a01e11500dfb6f, { key: (item.id || item.icon || '') + index },
@@ -15825,14 +15825,14 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames =
                                         item.icon && (React__namespace.createElement(Icon, { icon: item.icon, extraClassNames: `tw-w-[18px] ${item.disabled
                                                 ? '!tw-text-sq-disabled-gray'
                                                 : 'tw-text-sq-text-color dark:tw-text-sq-white'} ${item.iconExtraClassNames || ''}` })),
-                                        React__namespace.createElement("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[13px] tw-ml-1 ${item.disabled && '!tw-opacity-30'} tw-not-italic tw-font-semibold ${item.labelClasses}` }, item.label)),
-                                    React__namespace.createElement(Icon, { small: true, icon: "fc-arrow-dropdown -tw-rotate-90", extraClassNames: `${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-w-[18px] tw-ml-4 tw-text-[8px] tw-justify-center tw-flex` })),
+                                        React__namespace.createElement("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[0.8125rem] tw-ml-1 ${item.disabled && '!tw-opacity-30'} tw-not-italic tw-font-semibold ${item.labelClasses}` }, item.label)),
+                                    React__namespace.createElement(Icon, { small: true, icon: "fc-arrow-dropdown -tw-rotate-90", extraClassNames: `${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-w-[18px] tw-ml-4 tw-text-[0.5rem] tw-justify-center tw-flex` })),
                                 React__namespace.createElement($d08ef79370b62062$export$602eac185826482c, null,
                                     React__namespace.createElement($d08ef79370b62062$export$6d4de93b380beddf, { className: "focus-visible:tw-outline-none tw-outline-none" },
                                         React__namespace.createElement("div", { "data-testid": containerTestId, className: `${bgStyles$1} tw-relative tw-z-[1000] tw-min-w-6 tw-py-2 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out forceFont data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade ${borderStyles$1}` }, item.subMenuItems.map((subItem, subIndex) => {
                                             return (React__namespace.createElement($d08ef79370b62062$export$6d08773d2e66f8f2, { key: subItem.label + subIndex, onSelect: subItem.onClick, "data-qtip-text": subItem.tooltip, className: "tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-leading-none tw-items-center tw-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none", disabled: subItem.disabled },
                                                 subItem.iconClass && (React__namespace.createElement(Icon, { icon: subItem.iconClass, type: "text", extraClassNames: `tw-w-[18px] ${item.disabled && '!tw-opacity-30'}` })),
-                                                React__namespace.createElement("div", { className: `tw-text-[13px] tw-ml-1 ${subItem.disabled
+                                                React__namespace.createElement("div", { className: `tw-text-[0.8125rem] tw-ml-1 ${subItem.disabled
                                                         ? 'tw-text-sq-disabled-gray'
                                                         : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses}` }, subItem.label)));
                                         }))))));
@@ -15842,7 +15842,7 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames =
                                     item.onClick(e);
                                 }, className: `tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-gray-highlight dark:hover:tw-bg-sq-gray-highlight-dark tw-leading-none tw-items-center tw-min-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none ${item.itemExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled },
                                 item.icon && (React__namespace.createElement(Icon, { icon: item.icon, testId: item.iconTestId, type: (item.iconType || 'text'), color: item.iconColor, customId: item.iconCustomId, extraClassNames: `tw-w-[18px] ${item.disabled && '!tw-opacity-30'} ${item.iconExtraClassNames || ''}` })),
-                                React__namespace.createElement("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[13px] tw-ml-1 ${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses || ''}` }, item.label)),
+                                React__namespace.createElement("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[0.8125rem] tw-ml-1 ${item.disabled ? 'tw-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} tw-not-italic tw-font-normal ${item.labelClasses || ''}` }, item.label)),
                             item.hasDivider && (React__namespace.createElement($d08ef79370b62062$export$1ff3c3f08ae963c0, { "data-testid": `dropdown-divider-${index}`, className: "tw-h-[1px] tw-bg-sq-disabled-gray dark:tw-bg-gray-500 tw-my-[8px]" }))));
                     }))))));
 };
@@ -15875,7 +15875,7 @@ const Alert = ({ children, dismissible = true, onClose, show = true, variant, te
     }
     return (React.createElement("div", { "data-testid": testId, id: id, className: appliedClasses },
         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-dark-text' : ''}`, testId: `${testId}-close-btn`, onClick: onClose, ...tooltipProps }))));
+        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-[0.6875rem] 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-dark-text' : ''}`, testId: `${testId}-close-btn`, onClick: onClose, ...tooltipProps }))));
 };
 
 /**
@@ -15908,33 +15908,33 @@ const SeeqActionDropdownItem = (item) => {
     if (item.icon) {
         renderIcon = isSvgIcon(item.icon) ? (React.createElement(SvgIcon, { icon: item.icon, extraClassNames: 'tw-rounded-[3px] tw-h-8 tw-w-8 tw-p-1 tw-flex tw-justify-center tw-items-center tw-bg-sq-color-dark' +
                 ' dark:tw-text-sq-white tw-text-[22px] tw-text-sq-white ' +
-                item.iconExtraClassNames, ...item })) : (React.createElement(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw-rounded-[3px] tw-h-8 tw-w-8 tw-flex tw-justify-center tw-items-center tw-bg-sq-color-dark dark:tw-text-sq-white tw-text-[22px] tw-text-sq-white ' +
+                item.iconExtraClassNames, ...item })) : (React.createElement(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw-rounded-[3px] tw-h-8 tw-w-8 tw-flex tw-justify-center tw-items-center tw-bg-sq-color-dark dark:tw-text-sq-white tw-text-[1.375rem] tw-text-sq-white ' +
                 item.iconExtraClassNames }));
     }
     return (React.createElement("div", { className: "tw-flex-col tw-flex tw-p-[10px] tw-pl-5 tw-w-[600px]" },
         React.createElement("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end" },
             renderIcon,
             React.createElement("h4", { className: "tw-text-base tw-font-[600] tw-leading-[20px] mb-0" }, item.display)),
-        React.createElement("div", { className: "tw-text-[13px] tw-font-normal" }, item.text)));
+        React.createElement("div", { className: "tw-text-[0.8125rem] tw-font-normal" }, item.text)));
 };
 const ViewWorkbench = (item) => {
     let renderIcon = React.createElement(React.Fragment, null);
     if (item.icon) {
-        renderIcon = isSvgIcon(item.icon) ? (React.createElement(SvgIcon, { icon: item.icon, extraClassNames: 'tw-flex tw-w-5 tw-justify-center tw-items-center tw-text-[20px] dark:tw-text-sq-white' +
+        renderIcon = isSvgIcon(item.icon) ? (React.createElement(SvgIcon, { icon: item.icon, extraClassNames: 'tw-flex tw-w-5 tw-justify-center tw-items-center tw-text-[1.25rem] dark:tw-text-sq-white' +
                 ' tw-text-sq-text-color ' +
-                item.iconExtraClassNames, type: "default", ...item })) : (React.createElement(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw-flex tw-justify-center tw-items-center tw-text-[20px] dark:tw-text-sq-white' +
+                item.iconExtraClassNames, type: "default", ...item })) : (React.createElement(Icon, { icon: item.icon, type: "text", extraClassNames: 'tw-flex tw-justify-center tw-items-center tw-text-[1.25rem] dark:tw-text-sq-white' +
                 ' tw-text-sq-text-color ' +
                 item.iconExtraClassNames }));
     }
     return (React.createElement("div", { className: "tw-flex-col tw-flex tw-p-[10px]" },
         React.createElement("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end" },
             renderIcon,
-            React.createElement("div", { className: "tw-text-[13px]" }, item.display))));
+            React.createElement("div", { className: "tw-text-[0.8125rem]" }, item.display))));
 };
 const InsertSeeqContent = (item) => {
     return (React.createElement("div", { className: "tw-flex-col tw-flex tw-justify-start tw-p-[10px] tw-font-normal tw-text-left tw-text-sq-text-color dark:tw-text-sq-dark-text" },
-        React.createElement("h5", { className: "tw-text-[16px] tw-font-medium tw-text-sq-color-dark tw-leading-[18px]" }, item.display),
-        React.createElement("div", { className: "tw-text-[13px] tw-text-sq-text-color dark:tw-text-sq-dark-text !tw-mt-1" }, item.text)));
+        React.createElement("h5", { className: "tw-text-[1rem] tw-font-medium tw-text-sq-color-dark tw-leading-[18px]" }, item.display),
+        React.createElement("div", { className: "tw-text-[0.8125rem] tw-text-sq-text-color dark:tw-text-sq-dark-text !tw-mt-1" }, item.text)));
 };
 
 const borderStyles = [