@seeqdev/qomponents 0.0.79 → 0.0.80

package/dist/ButtonWithDropdown/ButtonWithDropdown.types.d.ts

@@ -31,8 +31,6 @@ interface DropdownItems {
     isLabel?: boolean;
     /** function called when the dropdown item is clicked on */
     onClick: (e?: Event) => void;
-    /** dropdown subitem container classes */
-    itemContainerClasses?: string;
     /** dropdown subitem label classes */
     labelClasses?: string;
     /** is item disabled */
@@ -65,8 +63,6 @@ export interface ButtonWithDropdownProps extends TooltipComponentProps {
     containerTestId?: string;
     /** is the button disabled */
     disabled?: boolean;
-    /** function called when the trigger is clicked on, i.e. for tracking (does not open the popover) */
-    onClick?: (e: MouseEvent) => void;
     /** alignment of the content of the popover */
     align?: 'start' | 'center' | 'end';
     /** number offset from the aligned position */
@@ -83,8 +79,6 @@ export interface ButtonWithDropdownProps extends TooltipComponentProps {
     onOpenChange?: (isOpen: boolean) => void;
     /** sets focus on the trigger button after the dropdown is closed */
     setFocusOnTriggerOnClose?: boolean;
-    /** should popover close when the content is clicked? */
-    isCloseOnContentClick?: boolean;
     /** focus should be kept within dropdown */
     keepFocusInsideDropdown?: boolean;
 }

package/dist/ButtonWithPopover/ButtonWithPopover.types.d.ts

@@ -6,15 +6,11 @@ export interface ButtonWithPopoverProps extends TooltipComponentProps {
     /** items for the popover content */
     children: React.ReactNode;
     id?: string;
-    /** extra class names to be placed on the Popover container component */
-    extraClassNames?: string;
     /** id that will be used in the data-testid attribute on the container element */
     containerTestId?: string;
     disabled?: boolean;
     /** function called when the toolbar is clicked on, i.e. for tracking (does not open the popover) */
     onClick?: (isOpen: boolean) => void;
-    /** called when popup is hidden */
-    onHide?: () => void;
     /** alignment of the content of the popover */
     align?: 'start' | 'center' | 'end';
     /** number offset from the aligned position */
@@ -39,8 +35,6 @@ export interface ButtonWithPopoverProps extends TooltipComponentProps {
     extraPopoverClassNames?: string;
     /** should popover close when the content is clicked? */
     isCloseOnContentClick?: boolean;
-    /** sets focus on the trigger button after the dropdown is closed */
-    setFocusOnTriggerOnClose?: boolean;
     /** calls the function if click or focus happens outside popover content */
     onInteractOutside?: () => void;
     /** calls the function if pointer down happens outside popover content */

package/dist/index.esm.js

@@ -15013,7 +15013,7 @@ const borderStyles$2 = [
     'dark:tw-border-gray-500',
 ].join(' ');
 const disabledClasses$2 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
-const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassNames, extraPopoverClassNames, containerTestId, onInteractOutside, onPointerDownOutside, isTriggerAsChild = false, shouldTriggerFullWidth = false, disabled = false, align = 'end', alignOffset = -35, placement = 'bottom', placementOffset = 2, isHoverEnabled = false, hoverOpenDelay = 300, onOpenChange, isOpen, isCloseOnContentClick = false, setFocusOnTriggerOnClose = true, isPortal = false, ...tooltipProps }) => {
+const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassNames, extraPopoverClassNames, containerTestId, onInteractOutside, onPointerDownOutside, isTriggerAsChild = false, shouldTriggerFullWidth = false, disabled = false, align = 'end', alignOffset = -35, placement = 'bottom', placementOffset = 2, isHoverEnabled = false, hoverOpenDelay = 300, onOpenChange, isOpen, isCloseOnContentClick = false, isPortal = false, ...tooltipProps }) => {
     const tooltipData = getQTipData(tooltipProps);
     let timeout;
     const [isHoveredOpen, setIsHoveredOpen] = React.useState(false);
@@ -15170,6 +15170,19 @@ const $6cc32821e9371a1c$export$9fa5ebd18bee4d43 = /*#__PURE__*/ forwardRef((prop
 const [$6cc32821e9371a1c$var$PortalProvider, $6cc32821e9371a1c$var$usePortalContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$PORTAL_NAME, {
     forceMount: undefined
 });
+const $6cc32821e9371a1c$export$793392f970497feb = (props)=>{
+    const { __scopeMenu: __scopeMenu , forceMount: forceMount , children: children , container: container  } = props;
+    const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$PORTAL_NAME, __scopeMenu);
+    return /*#__PURE__*/ createElement($6cc32821e9371a1c$var$PortalProvider, {
+        scope: __scopeMenu,
+        forceMount: forceMount
+    }, /*#__PURE__*/ createElement($921a889cee6df7e8$export$99c2b779aa4e8b8b, {
+        present: forceMount || context.open
+    }, /*#__PURE__*/ createElement($f1701beae083dbae$export$602eac185826482c, {
+        asChild: true,
+        container: container
+    }, children)));
+};
 /* -------------------------------------------------------------------------------------------------
  * MenuContent
  * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$CONTENT_NAME = 'MenuContent';
@@ -15825,6 +15838,7 @@ function $6cc32821e9371a1c$var$whenMouse(handler) {
 }
 const $6cc32821e9371a1c$export$be92b6f5f03c0fe9 = $6cc32821e9371a1c$export$d9b273488cd8ce6f;
 const $6cc32821e9371a1c$export$b688253958b8dfe7 = $6cc32821e9371a1c$export$9fa5ebd18bee4d43;
+const $6cc32821e9371a1c$export$602eac185826482c = $6cc32821e9371a1c$export$793392f970497feb;
 const $6cc32821e9371a1c$export$7c6e2c02157bb7d2 = $6cc32821e9371a1c$export$479f0f2f71193efe;
 const $6cc32821e9371a1c$export$b04be29aa201d4f5 = $6cc32821e9371a1c$export$dd37bec0e8a99143;
 const $6cc32821e9371a1c$export$6d08773d2e66f8f2 = $6cc32821e9371a1c$export$2ce376c2cc3355c8;
@@ -15916,6 +15930,11 @@ const $d08ef79370b62062$export$d2469213b3befba9 = /*#__PURE__*/ forwardRef((prop
         })
     })));
 });
+const $d08ef79370b62062$export$cd369b4d4d54efc9 = (props)=>{
+    const { __scopeDropdownMenu: __scopeDropdownMenu , ...portalProps } = props;
+    const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu);
+    return /*#__PURE__*/ createElement($6cc32821e9371a1c$export$602eac185826482c, _extends({}, menuScope, portalProps));
+};
 /* -------------------------------------------------------------------------------------------------
  * DropdownMenuContent
  * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$CONTENT_NAME = 'DropdownMenuContent';
@@ -16018,6 +16037,7 @@ const $d08ef79370b62062$export$f34ec8bc2482cc5f = /*#__PURE__*/ forwardRef((prop
 });
 /* -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$export$be92b6f5f03c0fe9 = $d08ef79370b62062$export$e44a253a59704894;
 const $d08ef79370b62062$export$41fb9f06171c75f4 = $d08ef79370b62062$export$d2469213b3befba9;
+const $d08ef79370b62062$export$602eac185826482c = $d08ef79370b62062$export$cd369b4d4d54efc9;
 const $d08ef79370b62062$export$7c6e2c02157bb7d2 = $d08ef79370b62062$export$6e76d93a37c01248;
 const $d08ef79370b62062$export$b04be29aa201d4f5 = $d08ef79370b62062$export$76e48c5b57f24495;
 const $d08ef79370b62062$export$6d08773d2e66f8f2 = $d08ef79370b62062$export$ed97964d1871885d;
@@ -16041,49 +16061,53 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames, c
     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$1 : ''} ${extraClassNames || ''}` }, triggerIcon)),
-        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$1 +
-                    ' tw-relative tw-z-[1200] 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 },
-                hasArrow && (React.createElement($d08ef79370b62062$export$21b07c8f274aebd5, { asChild: true },
-                    React.createElement("div", { className: " tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-500 tw-mt-[-7px]" }))),
-                dropdownItems.map((item, index) => {
-                    if (item.isLabel) {
-                        return (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.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.label + index },
-                            React.createElement($d08ef79370b62062$export$2ea8a7a591ac5eac, { id: id, className: `tw-cursor-pointer tw-flex tw-justify-between 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-pl-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none ${item.containerExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled },
-                                React.createElement("div", { className: "tw-flex" },
-                                    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-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} 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($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, extraClassNames: `tw-w-[18px] ${subItem.disabled
+        React.createElement($d08ef79370b62062$export$602eac185826482c, null,
+            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$1 +
+                        ' tw-relative tw-z-[1200] 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 },
+                    hasArrow && (React.createElement($d08ef79370b62062$export$21b07c8f274aebd5, { asChild: true },
+                        React.createElement("div", { className: " tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-500 tw-mt-[-7px]" }))),
+                    dropdownItems.map((item, index) => {
+                        if (item.isLabel) {
+                            return (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.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.label + index },
+                                React.createElement($d08ef79370b62062$export$2ea8a7a591ac5eac, { id: id, className: `tw-cursor-pointer tw-flex tw-justify-between 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-pl-[19px] tw-relative tw-select-none tw-outline-none data-[disabled]:tw-pointer-events-none ${item.containerExtraClassNames || ''}`, "data-testid": item.testId, disabled: item.disabled },
+                                    React.createElement("div", { className: "tw-flex" },
+                                        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'}` })),
-                                        React.createElement("div", { className: `tw-text-[13px] 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)));
-                                })))));
-                    }
-                    return (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-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 ${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-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-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]" }))));
-                })))));
+                                                : '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-text-sq-disabled-gray' : 'tw-text-sq-text-color dark:tw-text-sq-white'} 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($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, extraClassNames: `tw-w-[18px] ${subItem.disabled
+                                                        ? '!tw-text-sq-disabled-gray'
+                                                        : 'tw-text-sq-text-color dark:tw-text-sq-white'}` })),
+                                                React.createElement("div", { className: `tw-text-[13px] 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)));
+                                        }))))));
+                        }
+                        return (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-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 ${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-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-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]" }))));
+                    }))))));
 };
 
 const NewWorkbenchItem = (item) => {