@seeqdev/qomponents 0.0.75 → 0.0.77

package/dist/example/src/Example.tsx

@@ -1,6 +1,20 @@
 import React from 'react';
-import { Button, Checkbox, Icon, QTip, Select, TextArea, TextField } from '@seeqdev/qomponents';
+import {
+  Button,
+  ButtonWithDropdown,
+  ButtonWithPopover,
+  Checkbox,
+  Icon,
+  Modal,
+  QTip,
+  Select,
+  Tabs,
+  TextArea,
+  TextField,
+  ToolbarButton,
+} from '@seeqdev/qomponents';
 import ComplexSelectExample, { SelectOption } from './ComplexSelectExample';
+import Accordion from '../../src/Accordion';
 
 const availableThemes = [
   { display: 'Analysis', value: 'color_analysis' },
@@ -14,6 +28,76 @@ const options = [
   { value: '3', label: 'Expert' },
 ];
 
+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" />
+    {label}
+  </div>
+);
+
+const accordionItems = [
+  {
+    value: 'phone',
+    id: 'phone',
+    itemTestId: 'phonecall',
+    trigger: <Trigger label="Phone" />,
+    content: (
+      <div className="tw-p-2 tw-text-[13px] dark:tw-text-sq-white">
+        If you need to reach us, please call us at 555-555-5555.
+      </div>
+    ),
+  },
+  {
+    value: 'email',
+    id: 'email',
+    itemTestId: 'email',
+    trigger: <Trigger label="Email" />,
+    content: (
+      <div className="tw-p-2 tw-text-[13px] dark:tw-text-sq-white">
+        If you need to reach us, please mail example@seeqtest.com
+      </div>
+    ),
+  },
+  {
+    value: 'address',
+    id: 'address',
+    itemTestId: 'address',
+    trigger: <Trigger label="Address" />,
+    content: (
+      <div className="tw-p-2 tw-text-[13px] dark:tw-text-sq-white">
+        If you need to reach us, please visit us at 1234 Main St., Anytown, USA.
+      </div>
+    ),
+  },
+];
+
+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>
+  </div>
+);
+
+const tabsList = [
+  {
+    id: 'plugins',
+    label: 'Plugins',
+    icon: 'fc-data',
+    content: renderData("Here's where you can find all the plugins you need. Enjoy!"),
+  },
+  {
+    id: 'addons',
+    label: 'Addons',
+    icon: 'fc-gears-2',
+    content: renderData("Here's where you can find all the addons you need. Enjoy!"),
+  },
+  {
+    id: 'shelf',
+    label: 'Shelf',
+    icon: 'fc-workbook-lock',
+    content: renderData("Here's where you can find all the private documents you need. Enjoy!"),
+  },
+];
+
 function Example() {
   /**
    * Theming is supported "out of the box". To apply a theme wrap your addOn in a div and assign the class that
@@ -40,6 +124,12 @@ function Example() {
   const [easeOfUse, setEaseOfUse] = React.useState(false);
   const [lookAndFeel, setLookAndFeel] = React.useState(false);
   const [speed, setSpeed] = React.useState(false);
+  const [help, setHelp] = React.useState('phone');
+  const [openDropdown, setOpenDropdown] = React.useState('');
+  const [openPopver, setOpenPopover] = React.useState('');
+  const [modalOpen, setModalOpen] = React.useState(false);
+  const [modalTitle, setModalTitle] = React.useState('Modal Title');
+  const [activeTab, setActiveTab] = React.useState('plugins');
 
   return (
     // outer-wrapper div that assigns the mode (dark-mode or light) as well as the theme
@@ -140,6 +230,157 @@ function Example() {
               onChange={(selectedOption: SelectOption) => setComplexSelectedValue(selectedOption)}
             />
           </div>
+          <div className="formRow">
+            <div className="labelWidth">Website tools</div>
+            <div className="formElementWidth tw-border tw-rounded-sm">
+              <Tabs
+                stretchTabs={true}
+                activeTab={activeTab}
+                onTabSelect={setActiveTab}
+                defaultActiveTab="data"
+                tabs={tabsList}
+              />
+            </div>
+          </div>
+          <div className="formRow">
+            <div className="labelWidth">Get help</div>
+            <div className="formElementWidth tw-border tw-rounded-sm">
+              <Accordion
+                accordionItems={accordionItems}
+                value={help}
+                testId="basic-accordion1"
+                onItemSelect={(value) => setHelp(value)}
+              />
+            </div>
+          </div>
+          <div className="formRow">
+            <div className="labelWidth">Tools</div>
+            <div className="formElementWidth formRow tw-border tw-rounded-sm tw-p-4 tw-flex tw-justify-center">
+              <ToolbarButton
+                icon="fc-y-axis"
+                label="Analyzer"
+                testId="basic-analyzer"
+                tooltipText="Analize data from any csv document"
+                hasArrow
+                tooltipOptions={{ position: 'top', delay: 0 }}
+                isHtmlTooltip={false}
+                popoverContent={
+                  <div className="tw-text-sm dark:tw-text-white">
+                    <p className="tw-p-2">Select file from your computer or google drive</p>
+                    <Button type="button" label="Click to select file" />
+                  </div>
+                }
+              />
+              <ToolbarButton
+                icon="fc-sun"
+                label={mode === 'tw-light' ? 'Dark Mode' : 'Light Mode'}
+                testId="basic-toggler"
+                isActive={mode === 'tw-light'}
+                tooltipText="Toggle light and dark modes"
+                onClick={() => setMode(mode === 'tw-light' ? 'tw-dark' : 'tw-light')}
+                tooltipOptions={{ position: 'top', delay: 0 }}
+                isHtmlTooltip={false}
+              />
+              <ToolbarButton
+                icon="fc-marker"
+                label="Language"
+                testId="basic-language-changer"
+                tooltipText="Disabled toolbar to change website language"
+                tooltipOptions={{ position: 'top', delay: 0 }}
+                disabled
+              />
+            </div>
+          </div>
+          <div className="formRow">
+            <div className="labelWidth">Take action</div>
+            <div className="formElementWidth">
+              <ButtonWithDropdown
+                onOpenChange={(isOpen) => setOpenDropdown(isOpen ? 'dropdown-1' : '')}
+                isOpen={openDropdown === 'dropdown-1'}
+                triggerIcon={
+                  <Icon
+                    icon="fc-more"
+                    type="text"
+                    extraClassNames="tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]"
+                  />
+                }
+                containerTestId="basic-dropdown1"
+                tooltip="See actions to take for plugins"
+                tooltipDelay={0}
+                hasArrow
+                tooltipPlacement="top"
+                dropdownItems={[
+                  { label: 'Create', icon: 'fc-add-row', onClick: () => setOpenDropdown('') },
+                  { label: 'Update', icon: 'fc-asset-tree', onClick: () => setOpenDropdown(''), hasDivider: true },
+                  {
+                    label: 'Sort',
+                    icon: 'fc-search-power',
+                    onClick: () => setOpenDropdown(''),
+                    subMenuItems: [
+                      { label: 'Ascending', iconClass: 'fc-arrow_up', onClick: () => setOpenDropdown('') },
+                      { label: 'Descending', iconClass: 'fc-arrow_down', onClick: () => setOpenDropdown('') },
+                    ],
+                  },
+                  { label: 'Delete', icon: 'fc-delete', onClick: () => setOpenDropdown('') },
+                ]}
+              />
+            </div>
+          </div>
+          <div className="formRow tw-mt-4">
+            <div className="labelWidth">More information</div>
+            <div className="formElementWidth">
+              <ButtonWithPopover
+                trigger={<Icon type="text" icon="fc-circle_info" />}
+                containerTestId="basic-popover-1"
+                isOpen={openPopver === 'basic-popover-1'}
+                onOpenChange={(isOpen) => setOpenPopover(isOpen ? 'basic-popover-1' : '')}
+                isHoverEnabled={false}
+                align="start"
+                tooltipPlacement="top"
+                hasArrow
+                isHtmlTooltip={false}>
+                <div className="tw-text-sm dark:tw-text-white tw-w-72 tw-p-4">
+                  <p className="tw-font-bold">What are plugins?</p>
+                  Plugins are modular software components that extend the functionality of an application. They allow
+                  users to add new features or customize existing ones. Plugins can be easily integrated into an
+                  application and provide a way to enhance its capabilities without modifying the core codebase.Plugins
+                  are modular software components that extend the functionality of an application.
+                </div>
+              </ButtonWithPopover>
+            </div>
+          </div>
+          <div className="formRow">
+            <div className="labelWidth">Accept terms</div>
+            <div className="formElementWidth">
+              <Button
+                onClick={() => {
+                  setModalOpen(true);
+                }}
+                label="View terms of use"
+              />
+              <Modal
+                open={modalOpen}
+                onClose={() => setModalOpen(false)}
+                title="Terms of use"
+                titleIcon="fc-circle_info"
+                isTitleEditable
+                onTitleChanged={(event) => setModalTitle(event.target.value)}
+                hideCloseIcon={false}
+                size="lg"
+                customButton={true}
+                customButtonLabel="Back">
+                <div>
+                  <p>
+                    By using this website, you agree to the following terms of use: Lorem ipsum dolor sit amet,
+                    consectetur adipiscing elit. Sed euismod, justo id aliquet aliquam, elit enim tincidunt mauris, nec
+                    aliquam nunc elit vitae nunc. Sed vitae fringilla mauris. Nulla facilisi. Sed auctor, nunc vel
+                    aliquet luctus, nisl nunc tincidunt nunc, id lacinia mauris metus id nunc. Sed auctor, nunc vel
+                    aliquet luctus, nisl nunc tincidunt nunc, id lacinia mauris metus id nunc.
+                  </p>
+                </div>
+              </Modal>
+            </div>
+          </div>
           <div className="buttonRow">
             <Button
               label="Cancel"

package/dist/index.d.ts

@@ -11,6 +11,7 @@ import Tabs from './Tabs';
 import Accordion from './Accordion';
 import ButtonWithPopover from './ButtonWithPopover';
 import ButtonWithDropdown from './ButtonWithDropdown';
+import NewWorkbench from './NewWorkbench';
 export { Tabs };
 export { Button };
 export { ToolbarButton };
@@ -25,3 +26,4 @@ export { Modal };
 export { Accordion };
 export { ButtonWithPopover };
 export { ButtonWithDropdown };
+export { NewWorkbench };

package/dist/index.esm.js

@@ -4561,7 +4561,7 @@ const $cb5cc270b50c6fcd$export$602eac185826482c = $cb5cc270b50c6fcd$export$dd679
 const $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2 = $cb5cc270b50c6fcd$export$d7e1f420b25549ff;
 const $cb5cc270b50c6fcd$export$21b07c8f274aebd5 = $cb5cc270b50c6fcd$export$3152841115e061b2;
 
-const borderStyles$3 = [
+const borderStyles$4 = [
     'tw-border-solid',
     'tw-border',
     'tw-rounded-sm',
@@ -4591,8 +4591,8 @@ const activeBorderStyles = [
     'active:tw-border-sq-color-dark',
     'dark:hover:tw-border-sq-color-dark-dark',
 ].join(' ');
-const bgStyles$2 = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
-const disabledClasses$3 = ['tw-opacity-50', 'tw-cursor-not-allowed'].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(' ');
 const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (React.createElement($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, { ref: ref, align: align, sideOffset: sideOffset, ...props, asChild: true })));
 const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIcon = false, tooltipText, id, popoverContent, extraClassNames, testId, tooltipTestId, tooltipOptions, isActive = false, isHtmlTooltip = false, hasArrow = false, disabled = false, onClick, onHide, }) => {
     let tooltipData = undefined;
@@ -4614,17 +4614,17 @@ const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIco
         React.createElement($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { id: id, className: `tw-border-none ${isActive ? 'active' : ''}`, disabled: disabled, "data-testid": testId, onClick: (e) => {
                 onClick && onClick(e);
             } },
-            React.createElement("div", { ...tooltipData, className: `tw-bg-transparent tw-p-0 tw-flex tw-flex-col tw-items-center ${isSmall ? 'tw-py-[1px] tw-px-[5px]' : 'tw-px-2 tw-py-[3px]'} ${disabled ? disabledClasses$3 : isActive ? activeBorderStyles : triggerBorderStyles} ${extraClassNames || ''}` },
+            React.createElement("div", { ...tooltipData, className: `tw-bg-transparent tw-p-0 tw-flex tw-flex-col tw-items-center ${isSmall ? 'tw-py-[1px] tw-px-[5px]' : 'tw-px-2 tw-py-[3px]'} ${disabled ? disabledClasses$4 : isActive ? activeBorderStyles : triggerBorderStyles} ${extraClassNames || ''}` },
                 React.createElement("span", { className: "tw-nowrap" },
                     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(PopoverContent, { sideOffset: 2, align: "start" },
-            React.createElement("div", { className: bgStyles$2 +
+            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' +
                     ' data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2' +
-                    borderStyles$3 },
+                    borderStyles$4 },
                 hasArrow && (React.createElement($cb5cc270b50c6fcd$export$21b07c8f274aebd5, { asChild: true },
                     React.createElement("div", { className: " tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-mt-[-7px] 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" }))),
                 popoverContent))) : undefined));
@@ -13612,7 +13612,7 @@ const baseClasses = ['focus:tw-ring-0', 'disabled:tw-cursor-not-allowed'].join('
 const containerStyles = ['tw-bg-white', 'dark:tw-bg-sq-dark-background'].join(' ');
 const errorClasses = 'tw-border-sq-danger-color';
 const borderColorClasses = ['tw-border-sq-disabled-gray', 'dark:tw-border-sq-dark-disabled-gray'].join(' ');
-const borderStyles$2 = [
+const borderStyles$3 = [
     'tw-border-solid',
     'tw-border',
     'hover:tw-border-sq-color-dark',
@@ -13666,7 +13666,7 @@ const optionStyles = [
     'tw-px-2.5',
     'specSelectOption',
 ].join(' ');
-const disabledClasses$2 = ['tw-bg-sq-field-disabled-gray', 'tw-cursor-not-allowed'].join(' ');
+const disabledClasses$3 = ['tw-bg-sq-field-disabled-gray', 'tw-cursor-not-allowed'].join(' ');
 const dropDownIndicatorStyles = `tw-text-sq-disabled-gray ${textActiveStyles} specOpenIt`;
 const placeholderStyles = ['tw-text-gray-400', 'dark:tw-text-sq-dark-text-lighter', 'specOpenSelect'].join(' ');
 const multiValueStyles = [
@@ -13746,8 +13746,8 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
                 else if (inputGroup === 'right') {
                     border = menuIsOpen ? 'tw-rounded-tr-sm' : 'tw-rounded-r-sm';
                 }
-                const appliedClasses = `${borderStyles$2} ${border}  ${showError ? errorClasses : borderColorClasses} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} `;
-                return `${appliedClasses} ${baseClasses} specSelectControl ${isDisabled ? disabledClasses$2 : ''} ${small ? 'tw-pl-2 tw-pr-1' : 'tw-pl-2.5 tw-pr-1.5'}`;
+                const appliedClasses = `${borderStyles$3} ${border}  ${showError ? errorClasses : borderColorClasses} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} `;
+                return `${appliedClasses} ${baseClasses} specSelectControl ${isDisabled ? disabledClasses$3 : ''} ${small ? 'tw-pl-2 tw-pr-1' : 'tw-pl-2.5 tw-pr-1.5'}`;
             },
             placeholder: () => placeholderStyles,
             container: () => `${textStyles} ${containerStyles} ${extraClassNames}`,
@@ -15000,15 +15000,15 @@ const Accordion = ({ accordionItems, defaultValue, value, onItemSelect, disabled
         React__default.createElement($1bf158f521e1b1b4$export$7c6e2c02157bb7d2, { className: `data-[state=open]:tw-animate-slideDown data-[state=closed]:tw-animate-slideUp tw-overflow-hidden focus-visible:tw-outline-none ${item.contentClassNames || ''}` }, item.content))))));
 };
 
-const bgStyles$1 = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
-const borderStyles$1 = [
+const bgStyles$2 = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
+const borderStyles$2 = [
     'tw-border-solid',
     'tw-border',
     'tw-rounded-sm',
     'tw-border-sq-disabled-gray',
     'dark:tw-border-gray-500',
 ].join(' ');
-const disabledClasses$1 = ['tw-opacity-50', 'tw-cursor-not-allowed'].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 tooltipData = getQTipData(tooltipProps);
     let timeout;
@@ -15032,7 +15032,7 @@ const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassN
     React.useEffect(() => () => timeout && clearTimeout(timeout), []);
     const renderContent = () => {
         return (React.createElement($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, { sideOffset: placementOffset, align: align, side: placement, onInteractOutside: onInteractOutside, onPointerDownOutside: onPointerDownOutside, alignOffset: isHoverEnabled ? -10 : alignOffset, asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "focus-visible:tw-outline-none tw-outline-none tw-w-full tw-h-full" },
-            React.createElement("div", { "data-testid": containerTestId, className: `${bgStyles$1} ${borderStyles$1} tw-relative tw-z-[1200] tw-min-w-6 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out
+            React.createElement("div", { "data-testid": containerTestId, className: `${bgStyles$2} ${borderStyles$2} tw-relative tw-z-[1200] tw-min-w-6 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 tw-text-sq-text-color
         ${extraPopoverClassNames || ''}` },
                 hasArrow && (React.createElement($cb5cc270b50c6fcd$export$21b07c8f274aebd5, { asChild: true },
@@ -15042,7 +15042,7 @@ const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassN
     const renderPopover = (popoverOpenState) => {
         return (React.createElement($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, { open: popoverOpenState, defaultOpen: false, onOpenChange: onOpenChange },
             trigger ? (React.createElement($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { id: id, asChild: isTriggerAsChild, className: `focus-visible:tw-outline-none tw-outline-none ${shouldTriggerFullWidth ? 'tw-w-full tw-h-full' : ''}`, disabled: disabled },
-                React.createElement("div", { ...tooltipData, onMouseOver: onHoverStart, onMouseOut: onHoverEnd, className: `tw-bg-transparent focus-visible:tw-outline-none tw-outline-none ${disabled ? disabledClasses$1 : ''} ${shouldTriggerFullWidth ? 'tw-flex tw-flex-col tw-items-center tw-justify-center' : 'tw-inline'} ${extraTriggerClassNames || ''}` }, trigger))) : (React.createElement($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { asChild: true },
+                React.createElement("div", { ...tooltipData, onMouseOver: onHoverStart, onMouseOut: onHoverEnd, className: `tw-bg-transparent focus-visible:tw-outline-none tw-outline-none ${disabled ? disabledClasses$2 : ''} ${shouldTriggerFullWidth ? 'tw-flex tw-flex-col tw-items-center tw-justify-center' : 'tw-inline'} ${extraTriggerClassNames || ''}` }, trigger))) : (React.createElement($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { asChild: true },
                 React.createElement("div", null))),
             isPortal ? React.createElement($cb5cc270b50c6fcd$export$602eac185826482c, null, renderContent()) : renderContent()));
     };
@@ -16023,26 +16023,26 @@ const $d08ef79370b62062$export$d7a01e11500dfb6f = $d08ef79370b62062$export$2f307
 const $d08ef79370b62062$export$2ea8a7a591ac5eac = $d08ef79370b62062$export$21dcb7ec56f874cf;
 const $d08ef79370b62062$export$6d4de93b380beddf = $d08ef79370b62062$export$f34ec8bc2482cc5f;
 
-const borderStyles = [
+const borderStyles$1 = [
     'tw-border-solid',
     'tw-border',
     'tw-rounded-sm',
     'tw-border-sq-disabled-gray',
     'dark:tw-border-gray-500',
 ].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 bgStyles$1 = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
+const disabledClasses$1 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
 const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames, containerTestId, disabled = false, align = 'end', placement = 'bottom', placementOffset = 5, alignOffset = -35, hasArrow = false, onOpenChange, isOpen, setFocusOnTriggerOnClose = true, keepFocusInsideDropdown = true, ...tooltipProps }) => {
     const tooltipData = getQTipData(tooltipProps);
     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("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 +
+            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 },
+                    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) => {
@@ -16059,10 +16059,10 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames, c
                                     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 +
+                                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 }, item.subMenuItems.map((subItem, subIndex) => {
+                                        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'
@@ -16082,5 +16082,42 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames, c
                 })))));
 };
 
-export { Accordion, Button, ButtonWithDropdown, ButtonWithPopover, Checkbox, Icon, Modal, QTip, Select, Tabs, TextArea, TextField, ToolbarButton, Tooltip };
+const borderStyles = [
+    'tw-border-solid',
+    'tw-border',
+    'tw-rounded-sm',
+    'tw-border-sq-disabled-gray',
+    'dark:tw-border-gray-500',
+].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 NewWorkbench = ({ newWorkbenchItems, trigger, id, extraClassNames, containerTestId, disabled = false, align = 'end', placement = 'bottom', placementOffset = 5, alignOffset = -35, hasArrow = false, onOpenChange, isOpen, setFocusOnTriggerOnClose = true, keepFocusInsideDropdown = true, ...tooltipProps }) => {
+    const tooltipData = getQTipData(tooltipProps);
+    return (React.createElement($d08ef79370b62062$export$be92b6f5f03c0fe9, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown },
+        React.createElement($d08ef79370b62062$export$41fb9f06171c75f4, { id: id, "data-testid": id, className: `tw-border-none focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none`, asChild: true, 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 || ''}` }, trigger)),
+        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-[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 },
+                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]" }))),
+                newWorkbenchItems.map((item, index) => {
+                    return (React.createElement("div", { key: item.display + index },
+                        React.createElement($d08ef79370b62062$export$6d08773d2e66f8f2, { onSelect: (e) => {
+                                item.action(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-relative tw-select-none tw-outline-none data-[disabled]:tw-text-sq-disabled-gray data-[disabled]:tw-pointer-events-none`, "data-testid": item.testId, disabled: !item.enabled },
+                            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" },
+                                    item.icon && (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 })),
+                                    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-[400]" }, item.text))),
+                        item.divider && (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]" }))));
+                })))));
+};
+
+export { Accordion, Button, ButtonWithDropdown, ButtonWithPopover, Checkbox, Icon, Modal, NewWorkbench, QTip, Select, Tabs, TextArea, TextField, ToolbarButton, Tooltip };
 //# sourceMappingURL=index.esm.js.map