@moises.ai/design-system 3.11.12 → 3.11.14

package/src/components/Checkbox/Checkbox.module.css

@@ -106,7 +106,7 @@
 }
 
 .DividerHorizontalIcon {
-  color: var(--aqua-dark-alpha-11);
+  color: var(--aqua-alpha-11);
   display: none;
 }
 
@@ -120,22 +120,22 @@
 
 .Checkbox[aria-checked="mixed"] {
   border-radius: 3px;
-  border: 1px solid var(--aqua-dark-alpha-7);
-  background: var(--aqua-dark-alpha-2);
+  border: 1px solid var(--aqua-alpha-7);
+  background: var(--aqua-alpha-2);
 }
 
 .Checkbox[aria-checked="mixed"]:hover {
   border-radius: 3px;
-  border: 1px solid var(--aqua-dark-alpha-8);
+  border: 1px solid var(--aqua-alpha-8);
   opacity: 0.88;
-  background: var(--aqua-dark-alpha-3);
+  background: var(--aqua-alpha-3);
   cursor: pointer;
 }
 
 .Checkbox[aria-checked="mixed"]:active {
   border-radius: 3px;
-  border: 1px solid var(--aqua-dark-alpha-8);
+  border: 1px solid var(--aqua-alpha-8);
   opacity: 0.82;
-  background: var(--aqua-dark-alpha-3);
+  background: var(--aqua-alpha-3);
   cursor: pointer;
 }

package/src/components/DataTable/dnd/DataTableRowSortable.jsx

@@ -50,7 +50,7 @@ export const DataTableRowSortable = React.memo(function DataTableRowSortable({
     ...(transition ? { transition } : {}),
   }
   const rowStyle = isSelected
-    ? { ...sortableStyle, '--row-bg': 'var(--aqua-dark-alpha-2)' }
+    ? { ...sortableStyle, '--row-bg': 'var(--aqua-alpha-2)' }
     : sortableStyle
 
   const handleRowClick = (e) => {

package/src/components/HorizontalVolume/HorizontalVolume.module.css

@@ -48,7 +48,7 @@
   height: 100%;
   width: var(--radix-slider-range);
   border-radius: 9999px;
-  background-color: var(--aqua-dark-alpha-8);
+  background-color: var(--aqua-alpha-8);
   &:hover {
     cursor: pointer;
   }

package/src/components/MultiSelect/MultiSelect.jsx

@@ -96,7 +96,7 @@ export const MultiSelect = ({
                       <Text
                         size="1"
                         style={{
-                          color: 'var(--aqua-dark-alpha-9)',
+                          color: 'var(--aqua-alpha-9)',
                           verticalAlign: 'top',
                         }}
                       >

package/src/components/Rating/Rating.module.css

@@ -33,7 +33,7 @@
 .starButton.filled.active,
 .starButton.filled.active.hovered,
 .starButton.filled.active:focus {
-  background-color: var(--aqua-dark-5) !important;
+  background-color: var(--aqua-5) !important;
 }
 
 .starButton.disabled {

package/src/components/Select/Select.jsx

@@ -103,7 +103,7 @@ export const Select = ({
                       <Text
                         size="1"
                         style={{
-                          color: 'var(--aqua-dark-alpha-9)',
+                          color: 'var(--aqua-alpha-9)',
                           verticalAlign: 'top',
                         }}
                       >

package/src/components/SetlistList/SetlistList.module.css

@@ -452,8 +452,8 @@ sectionTitle {
   opacity: 0;
 }
 .newSetlistItemButton {
-  color: var(--aqua-dark-alpha-11) !important;
+  color: var(--aqua-alpha-11) !important;
 }
 .plusIcon {
-  color: var(--aqua-dark-alpha-11);
+  color: var(--aqua-alpha-11);
 }

package/src/components/Shell/Shell.module.css

@@ -1,3 +1,3 @@
 .plusIcon {
-  color: var(--aqua-dark-alpha-11);
+  color: var(--aqua-alpha-11);
 }

package/src/components/Slider/Slider.module.css

@@ -58,20 +58,20 @@
   height: 100%;
   width: var(--radix-slider-range);
   border-radius: 9999px;
-  /* background-color: var(--aqua-dark-alpha-8); */
+  /* background-color: var(--aqua-alpha-8); */
   &:hover {
     cursor: pointer;
   }
 }
 .sliderRangeAccent {
-  background-color: var(--aqua-dark-alpha-8);
+  background-color: var(--aqua-alpha-8);
 }
 .sliderRangeNeutral {
   background-color: var(--neutral-11);
 }
 
 .sliderRangeHighContrastAccent {
-    background-color: var(--aqua-dark-12);
+    background-color: var(--aqua-12);
 }
 
 .sliderRangeHighContrastNeutral {

package/src/icons/MinusIcon.jsx

@@ -0,0 +1,15 @@
+export const MinusIcon = ({ 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}>
+    <g >
+      <path d="M3.33325 8H12.6666" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+    </g>
+  </svg>
+)
+
+MinusIcon.displayName = 'MinusIcon'

package/src/icons.jsx

@@ -351,3 +351,4 @@ export { ChevronRightFilledIcon } from './icons/ChevronRightFilledIcon'
 export { ChevronDownFilledIcon } from './icons/ChevronDownFilledIcon'
 export { Share2Icon } from './icons/Share2Icon'
 export { TrackPreviousIcon } from './icons/TrackPreviousIcon'
+export { MinusIcon } from './icons/MinusIcon'

package/src/index.jsx

@@ -78,10 +78,10 @@ export { AdditionalItems } from './components/AdditionalItems/AdditionalItems'
 export { BannerAnnouncement } from './components/BannerAnnouncement/BannerAnnouncement'
 export { Button } from './components/Button/Button'
 export { Callout } from './components/Callout/Callout'
+export { CanvasContextMenu } from './components/CanvasContextMenu/CanvasContextMenu'
 export { Card as CardWidget } from './components/Card/Card'
 export { Checkbox } from './components/Checkbox/Checkbox'
 export { CigarBar } from './components/CigarBar/CigarBar'
-export { CanvasContextMenu } from './components/ContextMenu/CanvasContextMenu'
 export { ContextMenu } from './components/ContextMenu/ContextMenu'
 export { Countdown } from './components/Countdown/Countdown'
 export { DataTable } from './components/DataTable/DataTable'

package/src/lib/menu/Menu.module.css

@@ -408,18 +408,18 @@
 }
 
 .cyan {
-  color: var(--aqua-dark-alpha-11);
+  color: var(--aqua-alpha-11);
 
   & .label,
   & .leftIcon,
   & .rightIcon,
   & .checkboxIndicatorSlot {
-    color: var(--aqua-dark-alpha-11);
+    color: var(--aqua-alpha-11);
   }
 
   & .leftIcon > svg,
   & .rightIcon > svg,
   & .menuCheckboxIndicator > svg {
-    color: var(--aqua-dark-alpha-11);
+    color: var(--aqua-alpha-11);
   }
 }

package/src/components/ContextMenu/CanvasContextMenu.jsx

@@ -1,73 +0,0 @@
-import classNames from 'classnames'
-import { ContextMenu as ContextMenuRadix } from 'radix-ui'
-import React, { forwardRef, memo } from 'react'
-
-import { createRenderItem, styles } from '../../lib/menu'
-
-const renderOption = createRenderItem(ContextMenuRadix)
-
-/**
- * Variant of ContextMenu for programmatic opening from non-DOM event sources
- * (e.g. Pixi canvas). Instead of wrapping a visible trigger element, it exposes
- * a ref to an internal hidden div that can receive a synthetic `contextmenu` event.
- *
- * Usage:
- *   const triggerRef = useRef(null)
- *   triggerRef.current?.dispatchEvent(
- *     new MouseEvent('contextmenu', { bubbles: true, clientX: x, clientY: y })
- *   )
- *   ...
- *   <CanvasContextMenu ref={triggerRef} options={[...]}>
- *     {children}  // rendered between trigger and content, inside the same Root
- *   </CanvasContextMenu>
- */
-export const CanvasContextMenu = memo(
-  forwardRef(function CanvasContextMenu(
-    {
-      children,
-      options,
-      className,
-      size = '2',
-      onSelectionChange,
-      closeOnSelect = true,
-      ...props
-    },
-    ref,
-  ) {
-    return (
-      // The outer div catches the bubbling contextmenu event AFTER Radix has already
-      // processed it on the trigger, suppressing the browser's native context menu
-      // without interfering with Radix's own handler.
-      <div onContextMenu={(e) => e.preventDefault()} style={{ display: 'contents' }}>
-        <ContextMenuRadix.Root>
-          <ContextMenuRadix.Trigger asChild>
-            <div
-              ref={ref}
-              style={{ position: 'fixed', width: 0, height: 0, pointerEvents: 'none' }}
-            />
-          </ContextMenuRadix.Trigger>
-          {children}
-          {options?.length > 0 && (
-            <ContextMenuRadix.Content
-              className={classNames(styles.menuContent, className)}
-              side={props.side}
-              align={props.align}
-              sideOffset={5}
-              alignOffset={0}
-              onCloseAutoFocus={(event) => {
-                event.preventDefault()
-              }}
-              onClick={(event) => event.stopPropagation()}
-            >
-              {options?.map((option) =>
-                renderOption(option, size, onSelectionChange, closeOnSelect),
-              )}
-            </ContextMenuRadix.Content>
-          )}
-        </ContextMenuRadix.Root>
-      </div>
-    )
-  }),
-)
-
-CanvasContextMenu.displayName = 'CanvasContextMenu'