@moises.ai/design-system 4.17.4 → 4.17.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "4.17.4",
+  "version": "4.17.6",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/SliderLibrary/SliderLibrary.jsx

@@ -17,6 +17,8 @@ import styles from './SliderLibrary.module.css'
  * hover/focus/drag with the current value.
  * @property {(value: number) => React.ReactNode} [formatValue] - Formats the value for
  * display in the tooltip. Defaults to the raw number.
+ * @property {(value: number) => void} [onThumbDoubleClick] - Fires when the thumb is
+ * double-clicked. Receives the current value.
  * @property {string} [aria-label] - Accessible label, recommended when no visual label exists.
  * @property {string} [className] - Extra class on the root.
  */
@@ -57,6 +59,7 @@ export const SliderLibrary = forwardRef(function SliderLibrary(
     disabled = false,
     showTooltip = true,
     formatValue,
+    onThumbDoubleClick,
     className,
     ...props
   },
@@ -148,6 +151,9 @@ export const SliderLibrary = forwardRef(function SliderLibrary(
   const handleThumbPointerDown = () => setKeyboardFocus(false)
   const handleThumbPointerEnter = () => setIsHovering(true)
   const handleThumbPointerLeave = () => setIsHovering(false)
+  const handleThumbDoubleClick = () => {
+    if (!disabled) onThumbDoubleClick?.(value)
+  }
 
   const displayValue = formatValue ? formatValue(value) : value
   const tooltipOpen =
@@ -163,6 +169,7 @@ export const SliderLibrary = forwardRef(function SliderLibrary(
       onPointerDown={handleThumbPointerDown}
       onPointerEnter={handleThumbPointerEnter}
       onPointerLeave={handleThumbPointerLeave}
+      onDoubleClick={onThumbDoubleClick ? handleThumbDoubleClick : undefined}
     />
   )
 

package/src/components/SliderLibrary/SliderLibrary.stories.jsx

@@ -98,3 +98,25 @@ export const WithLabel = {
     )
   },
 }
+
+export const ThumbDoubleClick = {
+  name: 'Thumb double-click',
+  render: () => {
+    const defaultValue = 0
+    const [value, setValue] = useState(35)
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        <SliderLibrary
+          value={value}
+          onValueChange={setValue}
+          onThumbDoubleClick={() => setValue(defaultValue)}
+          formatValue={(v) => `${v}%`}
+          aria-label="Volume"
+        />
+        <span style={{ color: '#a1a1a1', fontSize: 12 }}>
+          Double-click the thumb to reset to {defaultValue}%
+        </span>
+      </div>
+    )
+  },
+}

package/src/components/ToolsPopover/ToolsPopover.jsx

@@ -0,0 +1,114 @@
+import classNames from 'classnames'
+import { Popover as PopoverRadix } from 'radix-ui'
+import { memo, useCallback, useState } from 'react'
+import { ScrollArea } from '../../index'
+import { Theme } from '../theme/Theme'
+import styles from './ToolsPopover.module.css'
+
+export const ToolsPopover = memo(
+  ({
+    trigger,
+    children,
+    className,
+    contentClassName,
+    triggerClassName,
+    disabled = false,
+    maxHeight,
+    sideOffset = 5,
+    matchTriggerWidth = false,
+    wrapCloseMenu,
+    modal = false,
+    ...props
+  }) => {
+    const isControlled = props.open !== undefined
+    const [internalOpen, setInternalOpen] = useState(false)
+
+    const open = isControlled ? props.open : internalOpen
+    const onOpenChange = useCallback(
+      (value) => {
+        if (!isControlled) setInternalOpen(value)
+        props?.onOpenChange?.(value)
+      },
+      [isControlled, props?.onOpenChange],
+    )
+
+    const baseClose = useCallback(() => onOpenChange(false), [onOpenChange])
+    const closePopover = wrapCloseMenu ? wrapCloseMenu(baseClose) : baseClose
+
+    const contentStyle = {
+      ...(matchTriggerWidth && {
+        width: 'var(--radix-popover-trigger-width)',
+        boxSizing: 'border-box',
+      }),
+      ...(maxHeight && { height: maxHeight }),
+    }
+
+    const handlePanelKeyDown = useCallback((event) => {
+      if (event.key === 'Tab') {
+        event.stopPropagation()
+      }
+    }, [])
+
+    const handleOpenAutoFocus = useCallback((event) => {
+      event.preventDefault()
+      const panel = event.currentTarget.querySelector('[data-tools-popover-panel]')
+      panel?.focus({ preventScroll: true })
+    }, [])
+
+    const renderPanel = () => (
+      <div
+        className={styles.contentPanel}
+        data-tools-popover-panel
+        tabIndex={-1}
+        onKeyDown={handlePanelKeyDown}
+      >
+        {typeof children === 'function' ? children(closePopover) : children}
+      </div>
+    )
+
+    const popoverContent = (
+      <Theme asChild>
+        <PopoverRadix.Content
+          className={classNames(styles.popoverContent, className, contentClassName)}
+          side={props.side}
+          align={props.align}
+          style={contentStyle}
+          sideOffset={sideOffset}
+          alignOffset={0}
+          onOpenAutoFocus={handleOpenAutoFocus}
+          onCloseAutoFocus={(event) => {
+            event.preventDefault()
+          }}
+          onClick={(event) => event.stopPropagation()}
+        >
+          {maxHeight ? (
+            <ScrollArea scrollbars="vertical" style={{ height: maxHeight }}>
+              {renderPanel()}
+            </ScrollArea>
+          ) : (
+            renderPanel()
+          )}
+        </PopoverRadix.Content>
+      </Theme>
+    )
+
+    return (
+      <PopoverRadix.Root
+        {...props}
+        modal={modal}
+        open={disabled ? false : open}
+        onOpenChange={disabled ? undefined : onOpenChange}
+      >
+        <PopoverRadix.Trigger asChild className={triggerClassName} disabled={disabled}>
+          {trigger}
+        </PopoverRadix.Trigger>
+
+        <PopoverRadix.Portal className={styles.popoverPortal}>
+          {popoverContent}
+        </PopoverRadix.Portal>
+      </PopoverRadix.Root>
+    )
+  },
+)
+
+ToolsPopover.displayName = 'ToolsPopover'

package/src/components/ToolsPopover/ToolsPopover.module.css

@@ -0,0 +1,88 @@
+.popoverPortal {
+  border-radius: 8px;
+  border: 1px solid var(--neutral-alpha-3);
+  background: #18191b;
+  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.3),
+    0 12px 60px 0 rgba(0, 0, 0, 0.15);
+}
+
+.popoverContent {
+  border-radius: 8px;
+  width: fit-content;
+  background-color: var(--panel-solid);
+  padding: 12px 16px 16px 16px;
+  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.3),
+    0 12px 60px 0 rgba(0, 0, 0, 0.15);
+  border: 1px solid var(--neutral-alpha-3);
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+}
+
+.popoverContent[data-side='top'] {
+  animation-name: slideDownAndFade;
+}
+
+.popoverContent[data-side='right'] {
+  animation-name: slideLeftAndFade;
+}
+
+.popoverContent[data-side='bottom'] {
+  animation-name: slideUpAndFade;
+}
+
+.popoverContent[data-side='left'] {
+  animation-name: slideRightAndFade;
+}
+
+@keyframes slideUpAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideRightAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideDownAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideLeftAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(2px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.contentPanel {
+  outline: none;
+}

package/src/components/ToolsPopover/ToolsPopover.stories.jsx

@@ -0,0 +1,139 @@
+import { Flex, Switch, Text } from '@radix-ui/themes'
+import { useState } from 'react'
+import { MetronomeIcon } from '../../icons/MetronomeIcon'
+import { Button } from '../Button/Button'
+import { IconButton } from '../IconButton/IconButton'
+import { ToolsPopover } from './ToolsPopover'
+
+export default {
+  title: 'Components/ToolsPopover',
+  component: ToolsPopover,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+ToolsPopover is a Popover wrapper with controlled open state, styled panel content, and focus management.
+
+Pass any single React element as \`trigger\` — it is forwarded to \`Popover.Trigger\` via \`asChild\`.
+
+Use this instead of \`ToolsDropdown\` when the panel contains interactive content (forms, switches, sliders) that should stay open while the user interacts with it.
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    trigger: {
+      description: 'Any single React element used as the popover trigger',
+      table: { type: { summary: 'React.ReactElement' } },
+    },
+    modal: {
+      control: 'boolean',
+      table: { type: { summary: 'boolean' }, defaultValue: { summary: false } },
+    },
+    children: {
+      description: 'Popover content or render prop receiving closePopover',
+      table: { type: { summary: 'React.ReactNode | (closePopover) => React.ReactNode' } },
+    },
+  },
+}
+
+export const Default = {
+  render: () => (
+    <ToolsPopover trigger={<Button variant="soft">Settings</Button>}>
+      <Text size="2">Tool settings panel</Text>
+    </ToolsPopover>
+  ),
+}
+
+export const WithIconButton = {
+  render: () => (
+    <ToolsPopover trigger={<IconButton><MetronomeIcon width={16} height={16} /></IconButton>}>
+      <Flex direction="column" gap="2">
+        <Text size="2">BPM: 120</Text>
+        <Text size="2">Time signature: 4/4</Text>
+      </Flex>
+    </ToolsPopover>
+  ),
+}
+
+export const WithInteractiveContent = {
+  render: () => {
+    const [enabled, setEnabled] = useState(false)
+
+    return (
+      <ToolsPopover trigger={<Button variant="ghost">Chords</Button>}>
+        {(closePopover) => (
+          <Flex direction="column" gap="3" width="220px">
+            <Text size="2">Show chord diagrams</Text>
+            <Switch size="2" checked={enabled} onCheckedChange={setEnabled} />
+            <Button
+              variant="soft"
+              onClick={() => {
+                closePopover()
+                alert('Saved')
+              }}
+            >
+              Save
+            </Button>
+          </Flex>
+        )}
+      </ToolsPopover>
+    )
+  },
+}
+
+export const ControlledOpen = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false)
+
+    return (
+      <Flex direction="column" gap="4" align="center">
+        <Flex gap="2">
+          <button type="button" onClick={() => setIsOpen(true)}>
+            Open
+          </button>
+          <button type="button" onClick={() => setIsOpen(false)}>
+            Close
+          </button>
+        </Flex>
+
+        <ToolsPopover
+          open={isOpen}
+          onOpenChange={setIsOpen}
+          trigger={<Button variant="outline">Controlled</Button>}
+        >
+          <Text size="2">Controlled popover content</Text>
+        </ToolsPopover>
+
+        <Text size="1">
+          Status: <strong>{isOpen ? 'Open' : 'Closed'}</strong>
+        </Text>
+      </Flex>
+    )
+  },
+}
+
+export const CustomElement = {
+  render: () => (
+    <ToolsPopover
+      trigger={
+        <button
+          type="button"
+          style={{
+            padding: '8px 12px',
+            borderRadius: 4,
+            border: '1px solid var(--neutral-alpha-6)',
+            background: 'transparent',
+            cursor: 'pointer',
+          }}
+        >
+          Custom trigger
+        </button>
+      }
+    >
+      <Text size="2">Any element can be the trigger</Text>
+    </ToolsPopover>
+  ),
+}

package/src/icons/CheckIcon2.jsx

@@ -0,0 +1,18 @@
+export const CheckIcon2 = ({ width = 18, height = 18, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 18 18"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M9 1.5C4.86 1.5 1.5 4.86 1.5 9C1.5 13.14 4.86 16.5 9 16.5C13.14 16.5 16.5 13.14 16.5 9C16.5 4.86 13.14 1.5 9 1.5ZM7.5 12.75L3.75 9L4.8075 7.9425L7.5 10.6275L13.1925 4.935L14.25 6L7.5 12.75Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+CheckIcon2.displayName = 'CheckIcon2'

package/src/icons/CloseIcon2.jsx

@@ -0,0 +1,20 @@
+export const CloseIcon2 = ({ width = 15, height = 15, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 15 15"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+
+CloseIcon2.displayName = 'CloseIcon2'

package/src/icons/ComputerIcon2.jsx

@@ -0,0 +1,21 @@
+export const ComputerIcon2 = ({ width = 16, height = 16, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+    {...props}
+  >
+    <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
+    <line x1="8" y1="21" x2="16" y2="21" />
+    <line x1="12" y1="17" x2="12" y2="21" />
+  </svg>
+)
+
+ComputerIcon2.displayName = 'ComputerIcon2'

package/src/icons/DownloadIcon2.jsx

@@ -0,0 +1,18 @@
+export const DownloadIcon2 = ({ width = 18, height = 18, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 18 18"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M9 12.75L4.5 8.25L5.5575 7.1325L8.25 9.825V2.25H9.75V9.825L12.4425 7.1325L13.5 8.25L9 12.75ZM3.75 15.75C3.3375 15.75 2.9845 15.6033 2.691 15.3097C2.3975 15.0162 2.2505 14.663 2.25 14.25V11.25H3.75V14.25H14.25V11.25H15.75V14.25C15.75 14.6625 15.6033 15.0157 15.3097 15.3097C15.0162 15.6038 14.663 15.7505 14.25 15.75H3.75Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+DownloadIcon2.displayName = 'DownloadIcon2'

package/src/icons/MacOSButton.jsx

@@ -0,0 +1,26 @@
+export const MacOSButton = ({ width = 115, height = 40, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 115 40"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M0 8C0 3.58172 3.58172 0 8 0H107C111.418 0 115 3.58172 115 8V32C115 36.4183 111.418 40 107 40H8C3.58172 40 0 36.4183 0 32V8Z"
+      fill="#EDEEF0"
+    />
+    <path
+      d="M31.6414 17.2277C31.5586 17.2787 29.7374 18.339 29.7581 20.5449C29.781 23.1834 32.071 24.062 32.0973 24.072C32.0768 24.1348 31.7312 25.3234 30.8902 26.551C30.1634 27.6144 29.4105 28.6719 28.2221 28.6939C27.0547 28.7153 26.6784 28.0012 25.3447 28.0012C24.0102 28.0012 23.5925 28.6719 22.4885 28.7153C21.3415 28.7587 20.4683 27.5669 19.7361 26.5093C18.2393 24.3449 17.0949 20.3926 18.6316 17.7253C19.3945 16.4006 20.758 15.5614 22.2375 15.5397C23.3643 15.5184 24.4269 16.2972 25.1161 16.2972C25.7955 16.2972 27.0131 15.3894 28.4483 15.4955C29.0108 15.5372 30.6076 15.7051 31.6414 17.2277ZM27.5627 14.0667C28.1723 13.3301 28.5824 12.3041 28.4694 11.2837C27.5922 11.3185 26.5311 11.8681 25.9019 12.6043C25.3384 13.2564 24.8435 14.3009 24.9779 15.3005C25.9557 15.3761 26.9537 14.8039 27.5627 14.0667Z"
+      fill="#111113"
+    />
+    <path
+      d="M46.896 26V14.8H48.944L52.688 23.792L56.432 14.8H58.48V26H56.816V17.776H56.752L53.344 26H52.032L48.608 17.776H48.56V26H46.896ZM62.6394 26.16C61.0874 26.16 59.8554 25.472 59.8554 23.824C59.8554 22.224 61.0234 21.568 62.5114 21.392L64.5754 21.152C65.3434 21.056 65.5994 20.912 65.5994 20.656V20.432C65.5994 19.104 64.9114 18.752 63.7434 18.752C62.5434 18.752 61.8714 19.104 61.8714 20.16V20.352H60.3194V20.016C60.3194 18.352 61.4874 17.52 63.7754 17.52C66.1274 17.52 67.2154 18.4 67.2154 20.416V26H65.6954V24.656H65.6314C65.4714 24.976 64.6874 26.16 62.6394 26.16ZM61.4714 23.744C61.4714 24.528 62.0314 24.896 63.0394 24.896C64.7994 24.896 65.5994 23.808 65.5994 22.912V22C65.4874 22.176 65.2794 22.288 64.4634 22.384L62.8954 22.592C61.8554 22.72 61.4714 23.088 61.4714 23.744ZM72.5756 26.16C70.4796 26.16 68.5116 24.864 68.5116 21.856C68.5116 18.848 70.4796 17.52 72.5756 17.52C74.0636 17.52 75.9036 18.16 76.2076 20.64H74.7356C74.5116 19.36 73.5996 18.896 72.5596 18.896C71.0396 18.896 70.0316 19.984 70.0316 21.856C70.0316 23.728 71.0396 24.784 72.5596 24.784C73.6156 24.784 74.5116 24.304 74.7356 23.008H76.2076C75.9356 25.52 74.0636 26.16 72.5756 26.16ZM82.5115 26.16C79.4875 26.16 77.3435 24.016 77.3435 20.4C77.3435 16.784 79.4875 14.656 82.5115 14.656C85.5195 14.656 87.6635 16.784 87.6635 20.4C87.6635 24.016 85.5195 26.16 82.5115 26.16ZM79.0395 20.4C79.0395 23.184 80.4475 24.72 82.5115 24.72C84.5595 24.72 85.9675 23.184 85.9675 20.4C85.9675 17.616 84.5595 16.096 82.5115 16.096C80.4475 16.096 79.0395 17.616 79.0395 20.4ZM93.3685 26.16C90.5365 26.16 88.9685 24.768 88.9685 22.608H90.6645C90.7285 23.808 91.5285 24.752 93.3845 24.752C95.0485 24.752 95.9125 24.016 95.9125 22.864C95.9125 21.76 95.1285 21.296 93.8965 21.056L92.3925 20.752C90.4885 20.368 89.2885 19.472 89.2885 17.744C89.2885 15.808 90.7765 14.656 93.3045 14.656C95.8325 14.656 97.3365 15.824 97.3365 17.792H95.6405C95.6245 16.736 94.8085 16.064 93.2725 16.064C91.6565 16.064 91.0165 16.816 91.0165 17.744C91.0165 18.528 91.4965 19.136 92.8245 19.408L94.2645 19.696C96.5045 20.144 97.6565 21.056 97.6565 22.848C97.6565 25.024 95.9445 26.16 93.3685 26.16Z"
+      fill="#1C2024"
+    />
+  </svg>
+)
+
+MacOSButton.displayName = 'MacOSButton'

package/src/icons/PlayIcon2.jsx

@@ -0,0 +1,21 @@
+export const PlayIcon2 = ({ width = 16, height = 16, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 16 16"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M5.5 3.5L12 8L5.5 12.5V3.5Z"
+      fill="currentColor"
+      stroke="currentColor"
+      strokeWidth="1"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+PlayIcon2.displayName = 'PlayIcon2'

package/src/icons/UserGroupIcon2.jsx

@@ -0,0 +1,26 @@
+export const UserGroupIcon2 = ({ width = 16, height = 16, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 16 16"
+    fill="none"
+    className={className}
+    aria-hidden="true"
+    focusable="false"
+    {...props}
+  >
+    <path
+      d="M11.0226 6.16608C10.925 5.8726 11.0704 5.5525 11.2843 5.32914C11.7998 4.79092 12.1309 3.83636 12.1309 3.13021C12.1309 1.90945 11.1413 0.796875 9.92051 0.796875C8.69975 0.796875 7.71012 1.90945 7.71012 3.13021C7.71012 3.83633 8.04123 4.79087 8.55666 5.32909C8.57839 5.35179 8.59942 5.37548 8.61956 5.40004C9.24971 6.08395 9.62373 7.00084 9.62373 7.93229C9.62373 8.47393 9.50115 9.04796 9.30946 9.56122C9.20593 9.83844 9.07168 10.1262 8.90375 10.4011H14.3413V9.44318C14.3413 8.67921 13.9061 7.98198 13.2197 7.64642L11.6429 6.87551C11.3493 6.73194 11.1257 6.47627 11.0226 6.16608Z"
+      fill="currentColor"
+      fillOpacity="0.709804"
+    />
+    <path
+      d="M7.44373 10.1312C7.22981 10.3546 7.08441 10.6747 7.18199 10.9682C7.28513 11.2784 7.5087 11.534 7.80237 11.6776L9.37916 12.4485C10.0655 12.7841 10.5007 13.4813 10.5007 14.2453V15.2031H1.65918V14.2452C1.65918 13.4813 2.09439 12.7841 2.78071 12.4485L4.35744 11.6776C4.65111 11.534 4.87469 11.2784 4.97783 10.9682C5.07542 10.6747 4.93002 10.3546 4.7161 10.1312C4.20067 9.59295 3.86956 8.63842 3.86956 7.93229C3.86956 6.71153 4.85918 5.59896 6.07994 5.59896C7.3007 5.59896 8.29033 6.71153 8.29033 7.93229C8.29033 8.63844 7.95919 9.593 7.44373 10.1312Z"
+      fill="currentColor"
+      fillOpacity="0.709804"
+    />
+  </svg>
+)
+
+UserGroupIcon2.displayName = 'UserGroupIcon2'

package/src/icons/WindowsButton.jsx

@@ -0,0 +1,26 @@
+export const WindowsButton = ({ width = 130, height = 40, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 130 40"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M0 8C0 3.58172 3.58172 0 8 0H122C126.418 0 130 3.58172 130 8V32C130 36.4183 126.418 40 122 40H8C3.58172 40 0 36.4183 0 32V8Z"
+      fill="#EDEEF0"
+    />
+    <path
+      d="M25.39 20.3904H32.5V27.5H25.39V20.3904ZM17.5 20.3904H24.61V27.5H17.5V20.3904ZM25.39 12.5H32.5V19.6096H25.39V12.5ZM17.5 12.5H24.61V19.6096H17.5V12.5Z"
+      fill="#111113"
+    />
+    <path
+      d="M49.392 26L46.416 14.8H48.112L50.32 23.664H50.4L53.008 14.8H54.752L57.344 23.664H57.424L59.632 14.8H61.328L58.368 26H56.608L53.872 16.912L51.136 26H49.392ZM62.646 26V17.68H64.262V26H62.646ZM62.486 15.28C62.486 14.752 62.934 14.32 63.446 14.32C63.958 14.32 64.406 14.752 64.406 15.28C64.406 15.824 63.958 16.24 63.446 16.24C62.934 16.24 62.486 15.824 62.486 15.28ZM71.8443 21.184C71.8443 19.696 71.2043 18.88 69.8923 18.88C68.5803 18.88 67.6683 19.696 67.6683 21.184V26H66.0523V17.68H67.6683V19.344H67.7163C67.8603 18.72 68.6603 17.52 70.5163 17.52C72.1483 17.52 73.4603 18.464 73.4603 20.816V26H71.8443V21.184ZM78.5674 26.16C76.7114 26.16 74.8554 24.848 74.8554 21.84C74.8554 18.816 76.7114 17.52 78.5674 17.52C79.7994 17.52 80.8554 18.08 81.3514 18.992V14.8H82.9674V26H81.3514V24.688C80.8554 25.6 79.7994 26.16 78.5674 26.16ZM76.3914 21.84C76.3914 23.872 77.6074 24.8 78.9034 24.8C80.1834 24.8 81.4314 23.872 81.4314 21.84C81.4314 19.808 80.1834 18.88 78.9034 18.88C77.6074 18.88 76.3914 19.808 76.3914 21.84ZM88.4034 26.16C86.3394 26.16 84.3554 24.816 84.3554 21.84C84.3554 18.864 86.3394 17.52 88.4034 17.52C90.4834 17.52 92.4674 18.864 92.4674 21.84C92.4674 24.816 90.4834 26.16 88.4034 26.16ZM85.8914 21.84C85.8914 23.888 87.0594 24.8 88.4034 24.8C89.7474 24.8 90.9314 23.888 90.9314 21.84C90.9314 19.792 89.7474 18.88 88.4034 18.88C87.0594 18.88 85.8914 19.792 85.8914 21.84ZM95.3123 26L92.9923 17.68H94.5443L96.2883 24.384H96.3523L98.4003 17.68H99.8083L101.856 24.384H101.92L103.664 17.68H105.216L102.88 26H101.056L99.1043 19.824L97.1363 26H95.3123ZM109.435 26.16C107.435 26.16 106.011 25.328 105.963 23.52H107.419C107.547 24.544 108.427 24.912 109.451 24.912C110.475 24.912 111.275 24.544 111.275 23.648C111.275 22.976 110.811 22.704 110.027 22.528L108.475 22.176C106.907 21.808 106.203 21.008 106.203 19.888C106.203 18.368 107.499 17.52 109.435 17.52C111.419 17.52 112.619 18.416 112.699 20.128H111.339C111.195 19.104 110.491 18.768 109.451 18.768C108.363 18.768 107.771 19.136 107.771 19.856C107.771 20.432 108.139 20.784 109.003 20.976L110.571 21.328C111.915 21.648 112.923 22.192 112.923 23.616C112.923 25.456 111.259 26.16 109.435 26.16Z"
+      fill="#1C2024"
+    />
+  </svg>
+)
+
+WindowsButton.displayName = 'WindowsButton'

package/src/icons.jsx

@@ -9,6 +9,7 @@ export { LoopIcon } from './icons/LoopIcon'
 export { MusicNoteIcon } from './icons/MusicNoteIcon'
 export { PauseIcon } from './icons/PauseIcon'
 export { PlayIcon } from './icons/PlayIcon'
+export { PlayIcon2 } from './icons/PlayIcon2'
 export { RecordIcon } from './icons/RecordIcon'
 export { RecordingIcon } from './icons/RecordingIcon'
 export { SpeakerLoudIcon } from './icons/SpeakerLoudIcon'
@@ -33,6 +34,7 @@ export { ClipIcon } from './icons/ClipIcon'
 export { RadioIcon } from './icons/RadioIcon'
 export { UserIcon } from './icons/UserIcon'
 export { SplitIcon } from './icons/SplitIcon'
+export { UserGroupIcon2 } from './icons/UserGroupIcon2'
 export { AbbeyRoadIcon } from './icons/AbbeyRoadIcon'
 export { NoMusicIcon } from './icons/NoMusicIcon'
 export { TrimIcon } from './icons/TrimIcon'
@@ -87,6 +89,7 @@ export { ChevronDownIcon } from './icons/ChevronDownIcon'
 export { PauseFilledIcon } from './icons/PauseFilledIcon'
 export { PreferencesIcon } from './icons/PreferencesIcon'
 export { CloseIcon } from './icons/CloseIcon'
+export { CloseIcon2 } from './icons/CloseIcon2'
 export { SetlistIcon } from './icons/SetlistIcon'
 export { ProducerIcon } from './icons/ProducerIcon'
 export { IsolateDrumsGradientIcon } from './icons/IsolateDrumsGradientIcon'
@@ -283,11 +286,13 @@ export { CloudDownloadErrorIcon } from './icons/CloudDownloadErrorIcon'
 export { CodeIcon } from './icons/CodeIcon'
 export { KeyboardIcon } from './icons/KeyboardIcon'
 export { ComputerIcon } from './icons/ComputerIcon'
+export { ComputerIcon2 } from './icons/ComputerIcon2'
 export { NoComputerIcon } from './icons/NoComputerIcon'
 export { CrownIcon } from './icons/CrownIcon'
 export { DatabaseIcon } from './icons/DatabaseIcon'
 export { DevicesIcon } from './icons/DevicesIcon'
 export { DojoIcon } from './icons/DojoIcon'
+export { DownloadIcon2 } from './icons/DownloadIcon2'
 export { DownloadAppIcon } from './icons/DownloadAppIcon'
 export { DownloadApp2Icon } from './icons/DownloadApp2Icon'
 export { FileIcon } from './icons/FileIcon'
@@ -386,6 +391,7 @@ export { AtSignIcon } from './icons/AtSignIcon'
 export { CardIcon } from './icons/CardIcon'
 export { ChatIcon } from './icons/ChatIcon'
 export { CheckIcon } from './icons/CheckIcon'
+export { CheckIcon2 } from './icons/CheckIcon2'
 export { ClockIcon } from './icons/ClockIcon'
 export { PowerSwitchIcon } from './icons/PowerSwitchIcon'
 export { TimeAdjustmentIcon } from './icons/TimeAdjustmentIcon'
@@ -428,6 +434,8 @@ export { Star4Icon } from './icons/Star4Icon'
 export { SupportIcon } from './icons/SupportIcon'
 export { TypeIcon } from './icons/TypeIcon'
 export { TranslateIcon } from './icons/TranslateIcon'
+export { MacOSButton } from './icons/MacOSButton'
+export { WindowsButton } from './icons/WindowsButton'
 export { GamingIcon } from './icons/GamingIcon'
 export { ChartIcon } from './icons/ChartIcon'
 export { ThumbsUpIcon } from './icons/ThumbsUpIcon'

package/src/index.jsx

@@ -55,6 +55,7 @@ export { DataTable } from './components/DataTable/DataTable'
 export { DropdownButton } from './components/DropdownButton/DropdownButton'
 export { DropdownMenu } from './components/DropdownMenu/DropdownMenu'
 export { ToolsDropdown } from './components/ToolsDropdown/ToolsDropdown'
+export { ToolsPopover } from './components/ToolsPopover/ToolsPopover'
 export { EmptyState } from './components/EmptyState/EmptyState'
 export {
   Extension,

package/src/lib/menu/renderItem.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import { CheckIcon, ChevronRightIcon } from '@radix-ui/react-icons'
+import { ChevronRightIcon } from '@radix-ui/react-icons'
 import classNames from 'classnames'
+import { CheckIcon } from '../../icons'
 import styles from './Menu.module.css'
 
 /**