@seeqdev/qomponents 0.0.146 → 0.0.148

package/dist/Select/Select.types.d.ts

@@ -16,8 +16,10 @@ export interface SelectProps {
     creatable?: boolean;
     /** set to true to disable the select */
     isDisabled?: boolean;
-    /** extra class names to be placed on the select control: this can be used to size the select */
+    /** extra class names to be placed on the select container: this can be used to size the select */
     extraClassNames?: string;
+    /** extra class names to be placed on the select control */
+    controlClassNames?: string;
     /** custom filter for search */
     filterConfig?: unknown;
     /** formats option labels in the menu and control as React components */

package/dist/example/src/Example.tsx

@@ -30,7 +30,7 @@ const options = [
 
 const Trigger = ({ label }: { label: string }) => (
   <div className="tw-flex tw-justify-start tw-items-center tw-border-b tw-px-2 tw-text-sq-color-dark">
-    <Icon icon="fc-arrow-dropdown" extraClassNames="tw-text-sq-color-dark tw-mr-[0.5rem] tw-text-[12px]" type="text" />
+    <Icon icon="fc-arrow-dropdown" extraClassNames="tw-text-sq-color-dark tw-mr-[0.5rem] tw-text-[0.75rem]" type="text" />
     {label}
   </div>
 );
@@ -42,7 +42,7 @@ const accordionItems = [
     itemTestId: 'phonecall',
     trigger: <Trigger label="Phone" />,
     content: (
-      <div className="tw-p-2 tw-text-[13px] dark:tw-text-sq-white">
+      <div className="tw-p-2 tw-text-[0.8125rem] dark:tw-text-sq-white">
         If you need to reach us, please call us at 555-555-5555.
       </div>
     ),
@@ -53,7 +53,7 @@ const accordionItems = [
     itemTestId: 'email',
     trigger: <Trigger label="Email" />,
     content: (
-      <div className="tw-p-2 tw-text-[13px] dark:tw-text-sq-white">
+      <div className="tw-p-2 tw-text-[0.8125rem] dark:tw-text-sq-white">
         If you need to reach us, please mail example@seeqtest.com
       </div>
     ),
@@ -64,7 +64,7 @@ const accordionItems = [
     itemTestId: 'address',
     trigger: <Trigger label="Address" />,
     content: (
-      <div className="tw-p-2 tw-text-[13px] dark:tw-text-sq-white">
+      <div className="tw-p-2 tw-text-[0.8125rem] dark:tw-text-sq-white">
         If you need to reach us, please visit us at 1234 Main St., Anytown, USA.
       </div>
     ),
@@ -73,7 +73,7 @@ const accordionItems = [
 
 const renderData = (text: string) => (
   <div className="tw-text-sq-color-gray dark:tw-text-sq-white tw-p-6">
-    <p className="tw-mb-5 tw-text-[15px] tw-leading-normal">{text}</p>
+    <p className="tw-mb-5 tw-text-[0.9375rem] tw-leading-normal">{text}</p>
   </div>
 );
 

package/dist/index.esm.js

@@ -4548,20 +4548,20 @@ const popoverBorderStyles = [
 ].join(' ');
 const triggerBackgroundStyles = [
     'tw-bg-transparent',
-    'hover:tw-bg-sq-light-gray',
-    'active:tw-bg-sq-light-gray',
+    'hover:tw-bg-sq-worksheetspanel-gray',
+    'active:tw-bg-sq-worksheetspanel-gray',
     'dark:tw-bg-transparent',
     'dark:hover:tw-bg-sq-field-disabled-gray',
     'dark:active:tw-bg-sq-field-disabled-gray',
 ].join(' ');
 const activeBackgroundStyles = [
     'active',
-    'tw-bg-sq-dark-gray',
-    'hover:tw-bg-sq-dark-gray',
-    'active:tw-bg-sq-dark-gray',
-    'dark:tw-bg-sq-field-disabled-gray',
-    'dark:hover:tw-border-sq-field-disabled-gray',
-    'dark:active:tw-bg-sq-field-disabled-gray',
+    'tw-bg-sq-overlay-gray',
+    'hover:tw-bg-sq-overlay-gray',
+    'active:tw-bg-sq-overlay-gray',
+    'dark:tw-bg-sq-dark-disabled-gray',
+    'dark:hover:tw-border-sq-dark-disabled-gray',
+    'dark:active:tw-bg-sq-dark-disabled-gray',
 ].join(' ');
 const bgStyles$3 = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
 const disabledClasses$4 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
@@ -4591,8 +4591,8 @@ const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIco
                     isPrimaryAnSvg ? (React.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.createElement("path", { d: getSvgIconPath(icon) }))) : (React.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.createElement(Icon, { icon: secondIcon, type: "text", testId: "secondIcon" }),
-                    popoverContent ? (React.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.createElement("small", { className: "tw-text-sq-text-color dark:tw-text-sq-dark-text tw-text-[10px]" }, label)))),
+                    popoverContent ? (React.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.createElement("small", { className: "tw-text-sq-text-color dark:tw-text-sq-dark-text tw-text-[0.625rem]" }, label)))),
         !!popoverContent ? (React.createElement(PopoverContent, { sideOffset: 2, align: "start" },
             React.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' +
@@ -13389,7 +13389,7 @@ const multiValueStyles = [
  *  For ease of testing most of the elements of this select can be identified by classNames prefixed with "spec".
  *
  */
-const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no matching options', isSearchable = true, creatable = false, isMulti = false, isClearable = false, closeMenuOnSelect = true, id, inputId, menuPortalTarget, getOptionLabel, getSelectedValueLabel, getOptionValue, onChange, menuIsOpen, menuPlacement = 'auto', extraClassNames, inputGroup, filterConfig, filterOption, small = false, isDisabled = false, showError = false, isLoading = false, formatGroupLabel, onRemove, defaultValue, onMenuOpen, onMenuClose, components, onMenuInputFocus, onInputChange, inputValue, }) => {
+const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no matching options', isSearchable = true, creatable = false, isMulti = false, isClearable = false, closeMenuOnSelect = true, id, inputId, menuPortalTarget, getOptionLabel, getSelectedValueLabel, getOptionValue, onChange, menuIsOpen, menuPlacement = 'auto', extraClassNames, controlClassNames = '', inputGroup, filterConfig, filterOption, small = false, isDisabled = false, showError = false, isLoading = false, formatGroupLabel, onRemove, defaultValue, onMenuOpen, onMenuClose, components, onMenuInputFocus, onInputChange, inputValue, }) => {
     const getOptionOrSelectedLabel = (option, { context }) => {
         const getSelectedOptionLabel = getSelectedValueLabel ? getSelectedValueLabel : getOptionLabel;
         if (getOptionLabel || getSelectedValueLabel) {
@@ -13452,7 +13452,7 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
                 else if (inputGroup === 'right') {
                     border = menuIsOpen ? 'tw-rounded-tr-md' : 'tw-rounded-r-md';
                 }
-                const appliedClasses = `${borderStyles$3} ${border}  ${showError ? errorClasses$2 : borderColorClasses$2} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} `;
+                const appliedClasses = `${borderStyles$3} ${border}  ${showError ? errorClasses$2 : borderColorClasses$2} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} ${controlClassNames}`;
                 return `${appliedClasses} ${baseClasses$3} specSelectControl ${isDisabled ? disabledClasses$3 : ''} ${small ? 'tw-pl-2 tw-pr-1' : 'tw-pl-2.5 tw-pr-1.5'}`;
             },
             placeholder: () => placeholderStyles,
@@ -14317,8 +14317,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__default.createElement("span", { className: "tw-flex tw-items-center tw-overflow-hidden tw-pb-[3px]" },
-                icon && React__default.createElement(Icon, { icon: icon, testId: `${id}_tab-icon`, extraClassNames: "tw-text-[15px] tw-mr-[7px] tw-flex-shrink-0" }),
-                React__default.createElement("span", { className: `tw-text-[14px] tw-font-medium tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis ${activeTab === id
+                icon && React__default.createElement(Icon, { icon: icon, testId: `${id}_tab-icon`, extraClassNames: "tw-text-[0.9375rem] tw-mr-[7px] tw-flex-shrink-0" }),
+                React__default.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__default.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)))));
@@ -15796,7 +15796,7 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames =
                         if (item.isLabel) {
                             return (React.createElement($d08ef79370b62062$export$b04be29aa201d4f5, { key: (item.id || '') + index, className: item.itemExtraClassNames, ...tooltipData },
                                 item.icon && (React.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.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.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.createElement($d08ef79370b62062$export$d7a01e11500dfb6f, { key: (item.id || item.icon || '') + index },
@@ -15805,14 +15805,14 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames =
                                         item.icon && (React.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.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.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.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.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.createElement($d08ef79370b62062$export$602eac185826482c, null,
                                     React.createElement($d08ef79370b62062$export$6d4de93b380beddf, { className: "focus-visible:tw-outline-none tw-outline-none" },
                                         React.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.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.createElement(Icon, { icon: subItem.iconClass, type: "text", extraClassNames: `tw-w-[18px] ${item.disabled && '!tw-opacity-30'}` })),
-                                                React.createElement("div", { className: `tw-text-[13px] tw-ml-1 ${subItem.disabled
+                                                React.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)));
                                         }))))));
@@ -15822,7 +15822,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.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.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.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.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]" }))));
                     }))))));
 };
@@ -15855,7 +15855,7 @@ const Alert = ({ children, dismissible = true, onClose, show = true, variant, te
     }
     return (React__default.createElement("div", { "data-testid": testId, id: id, className: appliedClasses },
         children,
-        dismissible && (React__default.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__default.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 }))));
 };
 
 /**
@@ -15888,33 +15888,33 @@ const SeeqActionDropdownItem = (item) => {
     if (item.icon) {
         renderIcon = isSvgIcon(item.icon) ? (React__default.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__default.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__default.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__default.createElement("div", { className: "tw-flex-col tw-flex tw-p-[10px] tw-pl-5 tw-w-[600px]" },
         React__default.createElement("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end" },
             renderIcon,
             React__default.createElement("h4", { className: "tw-text-base tw-font-[600] tw-leading-[20px] mb-0" }, item.display)),
-        React__default.createElement("div", { className: "tw-text-[13px] tw-font-normal" }, item.text)));
+        React__default.createElement("div", { className: "tw-text-[0.8125rem] tw-font-normal" }, item.text)));
 };
 const ViewWorkbench = (item) => {
     let renderIcon = React__default.createElement(React__default.Fragment, null);
     if (item.icon) {
-        renderIcon = isSvgIcon(item.icon) ? (React__default.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__default.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__default.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__default.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__default.createElement("div", { className: "tw-flex-col tw-flex tw-p-[10px]" },
         React__default.createElement("div", { className: "tw-flex tw-flex-row tw-gap-2 tw-items-end" },
             renderIcon,
-            React__default.createElement("div", { className: "tw-text-[13px]" }, item.display))));
+            React__default.createElement("div", { className: "tw-text-[0.8125rem]" }, item.display))));
 };
 const InsertSeeqContent = (item) => {
     return (React__default.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__default.createElement("h5", { className: "tw-text-[16px] tw-font-medium tw-text-sq-color-dark tw-leading-[18px]" }, item.display),
-        React__default.createElement("div", { className: "tw-text-[13px] tw-text-sq-text-color dark:tw-text-sq-dark-text !tw-mt-1" }, item.text)));
+        React__default.createElement("h5", { className: "tw-text-[1rem] tw-font-medium tw-text-sq-color-dark tw-leading-[18px]" }, item.display),
+        React__default.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 = [