@seeqdev/qomponents 0.0.61 → 0.0.63

package/dist/Tooltip/Tooltip.stories.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Tooltip } from './Tooltip';
+import Icon from '../Icon';
+import Button from '../Button';
+import { tooltipPositions } from './Tooltip.types';
+export default {
+    title: 'Tooltip',
+};
+export const AllTooltips = () => {
+    const renderButtonsWithTooltip = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_button` },
+        React.createElement(Tooltip, { text: `Tooltip on the ${position}`, position: position },
+            React.createElement(Button, { label: position })))));
+    const renderIconsWithHtmlTooltip = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_icon` },
+        React.createElement(Tooltip, { text: React.createElement("div", null,
+                React.createElement("h2", null, "Fancy Tooltip"),
+                " This is a special tooltip. Why?",
+                React.createElement("br", null),
+                "Because it supports ",
+                React.createElement("b", null, "HTML!")), position: position },
+            React.createElement(Icon, { icon: "fc-sun" })))));
+    const renderTextTooltipOnText = () => tooltipPositions.map((position) => (React.createElement("div", { key: `${position}_text` },
+        React.createElement(Tooltip, { text: "Helpful information provided here", position: position },
+            React.createElement("span", null,
+                "Hover for Tooltip (on the ",
+                position,
+                ")")))));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4 tw-text-center" },
+        renderButtonsWithTooltip(),
+        renderIconsWithHtmlTooltip(),
+        renderTextTooltipOnText()));
+};
+//# sourceMappingURL=Tooltip.stories.js.map

package/dist/Tooltip/Tooltip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.stories.js","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEnD,eAAe;IACb,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,wBAAwB,GAAG,GAAG,EAAE,CACpC,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACjC,6BAAK,GAAG,EAAE,GAAG,QAAQ,SAAS;QAC5B,oBAAC,OAAO,IAAC,IAAI,EAAE,kBAAkB,QAAQ,EAAE,EAAE,QAAQ,EAAE,QAAQ;YAC7D,oBAAC,MAAM,IAAC,KAAK,EAAE,QAAQ,GAAI,CACnB,CACN,CACP,CAAC,CAAC;IAEL,MAAM,0BAA0B,GAAG,GAAG,EAAE,CACtC,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACjC,6BAAK,GAAG,EAAE,GAAG,QAAQ,OAAO;QAC1B,oBAAC,OAAO,IACN,IAAI,EACF;gBACE,gDAAsB;;gBACtB,+BAAM;;gBACc,uCAAY,CAC5B,EAER,QAAQ,EAAE,QAAQ;YAClB,oBAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,CACd,CACN,CACP,CAAC,CAAC;IAEL,MAAM,uBAAuB,GAAG,GAAG,EAAE,CACnC,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACjC,6BAAK,GAAG,EAAE,GAAG,QAAQ,OAAO;QAC1B,oBAAC,OAAO,IAAC,IAAI,EAAC,mCAAmC,EAAC,QAAQ,EAAE,QAAQ;YAClE;;gBAAiC,QAAQ;oBAAS,CAC1C,CACN,CACP,CAAC,CAAC;IAEL,OAAO,CACL,6BAAK,SAAS,EAAC,gDAAgD;QAC5D,wBAAwB,EAAE;QAC1B,0BAA0B,EAAE;QAC5B,uBAAuB,EAAE,CACtB,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/Tooltip/Tooltip.types.js

@@ -0,0 +1,3 @@
+export const DEFAULT_TOOL_TIP_DELAY = 500;
+export const tooltipPositions = ['top', 'left', 'right', 'bottom'];
+//# sourceMappingURL=Tooltip.types.js.map

package/dist/Tooltip/Tooltip.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.types.js","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAC;AAC1C,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,CAAU,CAAC"}

package/dist/Tooltip/TooltipPerformance.stories.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Tooltip } from './Tooltip';
+import Icon from '../Icon';
+export default {
+    title: 'Tooltip',
+};
+const renderManyTooltips = () => {
+    const colsCount = 100;
+    const rowCount = 100;
+    const rows = [];
+    const getCols = (rowId) => {
+        const cols = [];
+        for (let i = 0; i < colsCount; i++) {
+            cols.push(React.createElement("td", { key: 'col_' + i + '_row_' + rowId },
+                React.createElement(Tooltip, { text: `hello there ${i}` },
+                    React.createElement(Icon, { icon: "fc-sun" }))));
+        }
+        return cols;
+    };
+    for (let i = 0; i < rowCount; i++) {
+        rows.push(React.createElement("tr", { key: 'row_' + i }, ...getCols(i)));
+    }
+    return (React.createElement("table", null,
+        React.createElement("tbody", null, rows.map((row) => row))));
+};
+export const TooltipPerformance = () => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4 tw-text-center" }, renderManyTooltips())));
+};
+//# sourceMappingURL=TooltipPerformance.stories.js.map

package/dist/Tooltip/TooltipPerformance.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipPerformance.stories.js","sourceRoot":"","sources":["../../src/Tooltip/TooltipPerformance.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,eAAe;IACb,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC9B,MAAM,SAAS,GAAG,GAAG,CAAC;IACtB,MAAM,QAAQ,GAAG,GAAG,CAAC;IACrB,MAAM,IAAI,GAAG,EAAE,CAAC;IAEhB,MAAM,OAAO,GAAG,CAAC,KAAa,EAAE,EAAE;QAChC,MAAM,IAAI,GAAG,EAAE,CAAC;QAChB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,EAAE,CAAC,EAAE,EAAE;YAClC,IAAI,CAAC,IAAI,CACP,4BAAI,GAAG,EAAE,MAAM,GAAG,CAAC,GAAG,OAAO,GAAG,KAAK;gBACnC,oBAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,EAAE;oBAC/B,oBAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,CACd,CACP,CACN,CAAC;SACH;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,EAAE,CAAC,EAAE,EAAE;QACjC,IAAI,CAAC,IAAI,CAAC,4BAAI,GAAG,EAAE,MAAM,GAAG,CAAC,OAAM,OAAO,CAAC,CAAC,CAAC,CAAM,CAAC,CAAC;KACtD;IACD,OAAO,CACL;QACE,mCAAQ,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,CAAS,CACjC,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACrC,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,gDAAgD,IAAE,kBAAkB,EAAE,CAAO,CAC3F,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/dist/Tooltip/index.js

@@ -0,0 +1,3 @@
+export { Tooltip } from './Tooltip';
+export { QTip } from './Qtip';
+//# sourceMappingURL=index.js.map

package/dist/Tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/index.esm.js

@@ -15000,7 +15000,7 @@ const borderStyles$1 = [
     'dark:tw-border-gray-700',
 ].join(' ');
 const disabledClasses$1 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
-const ButtonWithPopover = ({ children, trigger, tooltipText, id, hasArrow, extraTriggerClassNames, extraPopoverClassNames, containerTestId, tooltipTestId, tooltipDelay, tooltipPlacement, disabled = false, align = 'end', alignOffset = -5, placement = 'bottom', placementOffset = 2, onOpenChange, isOpen, isHtmlTooltip = false, isCloseOnContentClick = false, }) => {
+const ButtonWithPopover = ({ children, trigger, tooltipText, id, hasArrow, extraTriggerClassNames, extraPopoverClassNames, containerTestId, tooltipTestId, tooltipDelay, tooltipPlacement, disabled = false, align = 'end', alignOffset = -5, placement = 'bottom', placementOffset = 2, onOpenChange, isOpen, isHtmlTooltip = false, isCloseOnContentClick = false, setFocusOnTriggerOnClose = true, }) => {
     let tooltipData = undefined;
     if (tooltipText) {
         tooltipData = {
@@ -15014,7 +15014,7 @@ const ButtonWithPopover = ({ children, trigger, tooltipText, id, hasArrow, extra
     return (React.createElement($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, { open: isOpen, defaultOpen: false, onOpenChange: onOpenChange },
         React.createElement($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { id: id, className: `tw-border-none`, disabled: disabled },
             React.createElement("div", { ...tooltipData, className: `tw-bg-transparent tw-flex tw-flex-col tw-items-center tw-justify-center ${disabled ? disabledClasses$1 : ''} ${extraTriggerClassNames || ''}` }, trigger)),
-        React.createElement($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, { sideOffset: placementOffset, align: align, side: placement, alignOffset: alignOffset, asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "focus-visible:tw-outline-none tw-outline-none" },
+        React.createElement($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, { sideOffset: placementOffset, align: align, side: placement, alignOffset: alignOffset, onCloseAutoFocus: (e) => !setFocusOnTriggerOnClose && e.preventDefault(), asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "focus-visible:tw-outline-none tw-outline-none" },
             React.createElement("div", { "data-testid": containerTestId, className: `${bgStyles$1} ${borderStyles$1} tw-relative tw-z-[1000] tw-min-w-6 tw-p-[0.5rem] focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out
              data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade
             ${extraPopoverClassNames || ''}` },
@@ -15342,6 +15342,12 @@ const $6cc32821e9371a1c$var$MenuRootContentNonModal = /*#__PURE__*/ forwardRef((
         }))
     })))))));
 });
+const $6cc32821e9371a1c$export$dd37bec0e8a99143 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopeMenu: __scopeMenu , ...labelProps } = props;
+    return /*#__PURE__*/ createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({}, labelProps, {
+        ref: forwardedRef
+    }));
+});
 /* -------------------------------------------------------------------------------------------------
  * MenuItem
  * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$ITEM_NAME = 'MenuItem';
@@ -15561,6 +15567,7 @@ function $6cc32821e9371a1c$var$whenMouse(handler) {
 const $6cc32821e9371a1c$export$be92b6f5f03c0fe9 = $6cc32821e9371a1c$export$d9b273488cd8ce6f;
 const $6cc32821e9371a1c$export$b688253958b8dfe7 = $6cc32821e9371a1c$export$9fa5ebd18bee4d43;
 const $6cc32821e9371a1c$export$7c6e2c02157bb7d2 = $6cc32821e9371a1c$export$479f0f2f71193efe;
+const $6cc32821e9371a1c$export$b04be29aa201d4f5 = $6cc32821e9371a1c$export$dd37bec0e8a99143;
 const $6cc32821e9371a1c$export$6d08773d2e66f8f2 = $6cc32821e9371a1c$export$2ce376c2cc3355c8;
 const $6cc32821e9371a1c$export$1ff3c3f08ae963c0 = $6cc32821e9371a1c$export$1cec7dcdd713e220;
 const $6cc32821e9371a1c$export$21b07c8f274aebd5 = $6cc32821e9371a1c$export$bcdda4773debf5fa;
@@ -15682,6 +15689,13 @@ const $d08ef79370b62062$export$6e76d93a37c01248 = /*#__PURE__*/ forwardRef((prop
         }
     }));
 });
+const $d08ef79370b62062$export$76e48c5b57f24495 = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
+    const { __scopeDropdownMenu: __scopeDropdownMenu , ...labelProps } = props;
+    const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
+    return /*#__PURE__*/ createElement($6cc32821e9371a1c$export$b04be29aa201d4f5, _extends({}, menuScope, labelProps, {
+        ref: forwardedRef
+    }));
+});
 const $d08ef79370b62062$export$ed97964d1871885d = /*#__PURE__*/ forwardRef((props, forwardedRef)=>{
     const { __scopeDropdownMenu: __scopeDropdownMenu , ...itemProps } = props;
     const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
@@ -15706,6 +15720,7 @@ const $d08ef79370b62062$export$34b8980744021ec5 = /*#__PURE__*/ forwardRef((prop
 /* -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$export$be92b6f5f03c0fe9 = $d08ef79370b62062$export$e44a253a59704894;
 const $d08ef79370b62062$export$41fb9f06171c75f4 = $d08ef79370b62062$export$d2469213b3befba9;
 const $d08ef79370b62062$export$7c6e2c02157bb7d2 = $d08ef79370b62062$export$6e76d93a37c01248;
+const $d08ef79370b62062$export$b04be29aa201d4f5 = $d08ef79370b62062$export$76e48c5b57f24495;
 const $d08ef79370b62062$export$6d08773d2e66f8f2 = $d08ef79370b62062$export$ed97964d1871885d;
 const $d08ef79370b62062$export$1ff3c3f08ae963c0 = $d08ef79370b62062$export$da160178fd3bc7e9;
 const $d08ef79370b62062$export$21b07c8f274aebd5 = $d08ef79370b62062$export$34b8980744021ec5;
@@ -15719,7 +15734,7 @@ const borderStyles = [
 ].join(' ');
 const bgStyles = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
 const disabledClasses = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
-const ButtonWithDropdown = ({ dropdownItems, triggerIcon, tooltipText, id, extraClassNames, containerTestId, tooltipTestId, tooltipDelay, tooltipPlacement, disabled = false, align = 'end', placement = 'bottom', placementOffset = 2, alignOffset = -5, hasArrow = false, onOpenChange, isHtmlTooltip = false, isOpen, keepFocusInsideDropdown = true, }) => {
+const ButtonWithDropdown = ({ dropdownItems, triggerIcon, tooltipText, id, extraClassNames, containerTestId, tooltipTestId, tooltipDelay, tooltipPlacement, disabled = false, align = 'end', placement = 'bottom', placementOffset = 2, alignOffset = -5, hasArrow = false, onOpenChange, isHtmlTooltip = false, isOpen, setFocusOnTriggerOnClose = true, keepFocusInsideDropdown = true, }) => {
     let tooltipData = undefined;
     if (tooltipText) {
         tooltipData = {
@@ -15733,20 +15748,24 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, tooltipText, id, extra
     return (React.createElement($d08ef79370b62062$export$be92b6f5f03c0fe9, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown },
         React.createElement($d08ef79370b62062$export$41fb9f06171c75f4, { id: id, className: `tw-border-none focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none`, disabled: disabled },
             React.createElement("div", { ...tooltipData, className: `tw-bg-transparent tw-flex tw-flex-col tw-items-center focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none ${disabled ? disabledClasses : ''} ${extraClassNames || ''}` }, triggerIcon)),
-        React.createElement($d08ef79370b62062$export$7c6e2c02157bb7d2, { sideOffset: placementOffset, side: placement, align: align, alignOffset: alignOffset, asChild: true, className: "focus-visible:tw-outline-none tw-outline-none" },
+        React.createElement($d08ef79370b62062$export$7c6e2c02157bb7d2, { sideOffset: placementOffset, side: placement, align: align, alignOffset: alignOffset, asChild: true, onCloseAutoFocus: (e) => !setFocusOnTriggerOnClose && e.preventDefault(), className: "focus-visible:tw-outline-none tw-outline-none" },
             React.createElement("div", { "data-testid": containerTestId, className: bgStyles +
                     ' tw-relative tw-z-[1000] tw-min-w-6 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 },
                 hasArrow && (React.createElement($d08ef79370b62062$export$21b07c8f274aebd5, { asChild: true },
                     React.createElement("div", { className: " tw-fill-transparent tw-bg-white tw-w-[6px] tw-h-[6px] tw-rotate-45  dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-700 tw-mt-[-2px]" }))),
-                dropdownItems.map((item, index) => (React.createElement("div", { key: item.label + index },
-                    React.createElement($d08ef79370b62062$export$6d08773d2e66f8f2, { key: item.label + index, onSelect: (e) => {
-                            item.onClick(e);
-                        }, className: `tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-colored-hover hover:dark:tw-bg-sq-colored-hover-dark tw-leading-none tw-items-center tw-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-text-sq-disabled-gray data-[disabled]:tw-pointer-events-none ${item.containerExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled },
-                        item.icon && (React.createElement(Icon, { icon: item.icon, testId: item.iconTestId, type: "text", 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.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-700 tw-my-[8px]" })))))))));
+                dropdownItems.map((item, index) => {
+                    return item.isLabel ? (React.createElement($d08ef79370b62062$export$b04be29aa201d4f5, { key: (item.label || '') + index, className: item.containerExtraClassNames },
+                        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.label))) : (React.createElement("div", { key: item.label + index },
+                        React.createElement($d08ef79370b62062$export$6d08773d2e66f8f2, { key: item.label + index, "data-customid": item.itemCustomId, onSelect: (e) => {
+                                item.onClick(e);
+                            }, className: `tw-cursor-pointer tw-flex dark:tw-text-sq-white hover:tw-bg-sq-colored-hover hover:dark:tw-bg-sq-colored-hover-dark tw-leading-none tw-items-center tw-h-[27px] tw-px-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-text-sq-disabled-gray data-[disabled]:tw-pointer-events-none ${item.containerExtraClassNames || ''}`, "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-text-sq-text-color dark:tw-text-sq-white tw-w-[18px] ${item.iconExtraClassNames || ''}` })),
+                            React.createElement("div", { "data-testid": item.labelTestId, "data-customid": item.labelCustomId, className: `tw-text-[13px] tw-ml-1 ${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-700 tw-my-[8px]" }))));
+                })))));
 };
 
 export { Accordion, Button, ButtonWithDropdown, ButtonWithPopover, Checkbox, Icon, Modal, QTip, Select, Tabs, TextArea, TextField, ToolbarButton, Tooltip };