@fibery/ui-kit 1.29.0 → 1.29.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.29.0",
+  "version": "1.29.2",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -54,7 +54,7 @@
     "chroma-js": "2.1.2",
     "chrono-node": "^2.7.5",
     "classnames": "2.3.1",
-    "cmdk": "0.2.0",
+    "cmdk": "1.0.0",
     "color-hash": "1.0.3",
     "d3-shape": "1.3.7",
     "date-fns": "2.29.2",

package/src/actions-menu/actions-menu-confirmation.tsx

@@ -0,0 +1,70 @@
+import {css} from "@linaria/core";
+import {AntModal} from "../antd/ant-modal";
+import {border, space, themeVars} from "../design-system";
+import {ActionsPanel} from "../actions-panel";
+import {Button} from "../button";
+import {useActionsMenuContext} from "./contexts/actions-menu-context";
+
+const modalClass = css`
+  & .ant-modal-content {
+    box-shadow: ${themeVars.shadowModal};
+    margin-left: ${space.s6}px;
+    margin-right: ${space.s6}px;
+    background-color: ${themeVars.modalContentBg};
+    border-radius: ${border.radius6}px;
+  }
+`;
+
+export type ActionsMenuConfirmationProps = {
+  message: string;
+  onCancel?: () => void;
+  onConfirm: () => void;
+};
+
+export const ActionsMenuConfirmation: React.FC<ActionsMenuConfirmationProps> = ({message, onCancel, onConfirm}) => {
+  const {showConfirmation} = useActionsMenuContext();
+
+  // TODO: use radix dialog
+  return (
+    <AntModal
+      zIndex={1001} // ant vs radix -- round 1
+      open={true}
+      closable={false}
+      footer={null}
+      maskStyle={{backgroundColor: themeVars.modalBg}}
+      className={modalClass}
+      maskClosable
+      onCancel={() => showConfirmation(null)}
+    >
+      {message}
+
+      <div
+        className={css`
+          margin-top: ${space.s24}px;
+          display: flex;
+          gap: ${space.s6}px;
+        `}
+      >
+        <ActionsPanel inline>
+          <Button
+            primary
+            onClick={() => {
+              onConfirm();
+              showConfirmation(null);
+            }}
+          >
+            Proceed
+          </Button>
+          <Button
+            onClick={() => {
+              showConfirmation(null);
+              onCancel?.();
+            }}
+          >
+            Cancel
+          </Button>
+        </ActionsPanel>
+      </div>
+    </AntModal>
+  );
+};

package/src/actions-menu/actions-menu-props.tsx

@@ -10,6 +10,7 @@ export type ActionsMenuProps = {
   align?: ContentProps["align"];
   disabled?: boolean;
   portalled?: boolean;
+  container?: HTMLElement | null | undefined;
   wide?: boolean;
   /** The controlled open state of the ActionsMenu. Must be used in conjunction with onOpenChange. */
   open?: boolean;

package/src/actions-menu/actions-menu-sub-command-menu.tsx

@@ -1,59 +1,41 @@
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {css, cx} from "@linaria/core";
-import {CommandInput, CommandItem, CommandList, CommandRoot, CommandEmpty} from "cmdk";
-import {border, layout, space, textStyles, themeVars} from "../design-system";
-import Search from "../icons/react/Search";
-import {useActionsMenuContext} from "./contexts/actions-menu-context";
+import React, {RefObject, useMemo, useRef, useState} from "react";
+import {
+  CommandMenuEmpty,
+  CommandMenuGroup,
+  CommandMenuInput,
+  CommandMenuItem,
+  CommandMenuList,
+  CommandMenuRoot,
+} from "../command-menu";
 import {ActionsMenuSubMenu} from "./actions-menu-sub-menu";
-import {styled} from "@linaria/react";
-import {useRef, useState} from "react";
-import {stopPropagation} from "@fibery/react/src/stop-propagation";
-/**
- *
- * Probably commands menu deserves to be extracted to a separate primitive component not connected to ActionsMenu
- * but for now we don't have other use cases for it so no idea how a primitive should look like
- *
- * Feel free to extract it to a separate one
- *
- */
-
-const inputContainerCss = css`
-  display: flex;
-  padding: ${space.s8}px ${space.s12}px;
-  align-items: center;
-  border-bottom: 1px solid ${themeVars.separatorColor};
-
-  & input {
-    min-width: 120px;
-    width: 100%;
-    color: ${themeVars.textColor};
-    background-color: ${themeVars.transparent};
-    margin-left: ${space.s8}px;
-    font-size: 13px;
-    border: none;
-    outline: none;
-    resize: none;
-  }
+import {useActionsMenuContext} from "./contexts/actions-menu-context";
+import {createContext} from "@fibery/react/src/create-context";
+import {composeEventHandlers} from "@fibery/react/src/compose-event-handlers";
 
-  & input::placeholder {
-    color: ${themeVars.accentTextColor};
-  }
-`;
+const [ActionsMenuSubCommandMenuProvider, useActionsMenuSubCommandMenuCtx] = createContext<{
+  subMenuOpenRef: RefObject<boolean>;
+  subMenuTriggerRef: RefObject<HTMLDivElement>;
+}>("ActionsMenuSubCommandMenu");
 
 type ActionsMenuSubCommandMenuProps = React.PropsWithChildren<{
   trigger?: React.ReactNode;
   disabled?: boolean;
-  filter?: React.ComponentPropsWithoutRef<typeof CommandRoot>["filter"];
 }>;
-export const ActionsMenuSubCommandMenu: React.FC<ActionsMenuSubCommandMenuProps> = ({
-  disabled,
-  trigger,
-  filter,
-  children,
-}) => {
+export const ActionsMenuSubCommandMenu: React.FC<ActionsMenuSubCommandMenuProps> = ({disabled, trigger, children}) => {
   const [open, onOpenChange] = useState(false);
   const triggerRef = useRef(null);
   const openRef = useRef(false);
 
+  const ctx = useMemo(
+    () => ({
+      subMenuOpenRef: openRef,
+      subMenuTriggerRef: triggerRef,
+    }),
+    []
+  );
+
   return (
     <ActionsMenuSubMenu
       disabled={disabled}
@@ -64,126 +46,99 @@ export const ActionsMenuSubCommandMenu: React.FC<ActionsMenuSubCommandMenuProps>
       }}
       trigger={trigger}
       triggerRef={triggerRef}
+      contentClassName={css`
+        &:is(&) {
+          overflow: hidden;
+          display: flex;
+          flex-direction: column;
+          max-height: 400px; // we use fixed height instead of --radix-dropdown-menu-content-available-height because it doesn't restore well after filtering if submenu was opened near the bottom of viewport. https://the.fibery.io/SoftDev/bug/It's-impossible-to-place-cursor-in-search-input-in-Existing-views-and-Convert-to-popup-10357/comment=14877
+        }
+      `}
     >
-      <CommandRoot
-        filter={filter}
-        onClick={stopPropagation}
-        onBlur={(e) => {
-          /**
-           * Submenu Trigger tries to steal the focus from input on every onPointerMove
-           * to avoid this we lock focus on input and do not let it move to back to triger while menu is still open
-           *
-           * We use openRef here because react state will be updated only on next render
-           */
-          if (openRef.current && e.target.hasAttribute("cmdk-input") && e.relatedTarget === triggerRef.current) {
-            e.target.focus();
-          }
-        }}
-      >
-        {children}
-      </CommandRoot>
+      <ActionsMenuSubCommandMenuProvider value={ctx}>{children}</ActionsMenuSubCommandMenuProvider>
     </ActionsMenuSubMenu>
   );
 };
 
-type ActionsMenuSubCommandMenuInputProps = {
-  placeholder?: string;
-  autoFocus?: boolean;
+export const ActionsMenuSubCommandMenuRoot: React.FC<React.ComponentPropsWithoutRef<typeof CommandMenuRoot>> = ({
+  className,
+  onClick,
+  onBlur,
+  ...props
+}) => {
+  const {subMenuOpenRef, subMenuTriggerRef} = useActionsMenuSubCommandMenuCtx();
+
+  return (
+    <CommandMenuRoot
+      className={cx(
+        css`
+          &:is(&) {
+            width: 250px;
+          }
+        `,
+        className
+      )}
+      onClick={composeEventHandlers(onClick, stopPropagation)}
+      onBlur={composeEventHandlers(onBlur, (e) => {
+        /**
+         * Submenu Trigger tries to steal the focus from input on every onPointerMove
+         * to avoid this we lock focus on input and do not let it move to back to triger while menu is still open
+         *
+         * setTimeout is needed for firefox https://the.fibery.io/SoftDev/bug/Automatically-place-the-cursor-in-the-search-input-in-the-list-of-spaces-in-'Move-to'-option-10524
+         *
+         * We use subMenuOpenRef here because react state will be updated only on next render. Alternatively we can try to use flushSync
+         */
+        if (
+          subMenuOpenRef.current &&
+          e.target.hasAttribute("cmdk-input") &&
+          e.relatedTarget === subMenuTriggerRef.current
+        ) {
+          setTimeout(() => {
+            e.target.focus();
+          }, 0);
+        }
+      })}
+      {...props}
+    />
+  );
 };
+
+type ActionsMenuSubCommandMenuInputProps = React.ComponentPropsWithoutRef<typeof CommandMenuInput>;
 export const ActionsMenuSubCommandMenuInput: React.FC<ActionsMenuSubCommandMenuInputProps> = ({
-  placeholder,
   autoFocus = true,
+  onKeyDown,
+  ...otherProps
 }) => {
   return (
-    <div className={inputContainerCss}>
-      <Search iconSize={16} aria-hidden />
-      <CommandInput
-        onKeyDown={(e) => {
-          // prevent submenu from closing if input is not empty
-          if ((e.target as HTMLInputElement).value.length > 0) {
-            e.stopPropagation();
-          }
-        }}
-        placeholder={placeholder}
-        autoFocus={autoFocus}
-      />
-    </div>
+    <CommandMenuInput
+      onKeyDown={(e) => {
+        // prevent submenu from closing if input is not empty
+        if ((e.target as HTMLInputElement).value.length > 0 && e.key === "ArrowLeft") {
+          e.stopPropagation();
+        }
+        onKeyDown?.(e);
+      }}
+      autoFocus={autoFocus}
+      {...otherProps}
+    />
   );
 };
 
-export const ActionsMenuSubCommandMenuList = styled(CommandList)`
-  overflow-y: scroll;
-  width: 250px;
-  height: var(--cmdk-list-height);
-  max-height: 600px;
-  transition: height 100ms ease;
-  margin-top: ${space.s4}px;
-`;
-
-const commandItemCss = css`
-  display: flex;
-  align-items: center;
-  gap: ${space.s6}px;
-  padding: 0 ${space.s12}px;
-  cursor: pointer;
-  min-height: ${layout.menuItemHeight}px;
-  margin: 0 ${space.s4}px;
-
-  &[data-selected] {
-    margin: 0 4px;
-    background-color: ${themeVars.colorBgActionsMenuItemHover};
-    border-radius: ${border.radius6}px;
-  }
-`;
-const commandItemTitleCss = css`
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-`;
+export const ActionsMenuSubCommandMenuList = CommandMenuList;
 
-type ActionsMenuSubCommandMenuItemProps = React.ComponentPropsWithoutRef<typeof CommandItem> & {
-  icon?: React.ReactNode;
-};
-
-export const ActionsMenuSubCommandMenuItem: React.FC<ActionsMenuSubCommandMenuItemProps> = ({
+export const ActionsMenuSubCommandMenuItem: React.FC<React.ComponentPropsWithoutRef<typeof CommandMenuItem>> = ({
   onSelect,
-  icon,
-  children,
-  className,
   ...props
 }) => {
   const {close} = useActionsMenuContext();
-  const [showTitle, setShowTitle] = useState(false);
-
   const onSelectItem = (value: string) => {
     onSelect?.(value);
     close();
   };
 
-  return (
-    <CommandItem className={cx(commandItemCss, className)} onSelect={onSelectItem} {...props}>
-      {icon}
-      <span
-        title={showTitle ? (children as string) : ""}
-        onMouseEnter={(e) => {
-          const target = e.target as HTMLElement;
-          if (typeof children === "string" && target.offsetWidth < target.scrollWidth) {
-            setShowTitle(true);
-          }
-        }}
-        className={commandItemTitleCss}
-      >
-        {children}
-      </span>
-    </CommandItem>
-  );
+  return <CommandMenuItem onSelect={onSelectItem} {...props}></CommandMenuItem>;
 };
 
-export const ActionsMenuSubCommandMenuEmpty = styled(CommandEmpty)`
-  ${textStyles.small}
-  display: flex;
-  align-items: center;
-  padding: 0 ${space.s12}px;
-  min-height: ${layout.itemHeight}px;
-  color: ${themeVars.accentTextColor};
-`;
+export const ActionsMenuSubCommandMenuEmpty = CommandMenuEmpty;
+
+export const ActionsMenuSubCommandMenuGroup = CommandMenuGroup;

package/src/actions-menu/actions-menu-sub-menu.tsx

@@ -22,6 +22,7 @@ type Props = React.PropsWithChildren<{
   open?: boolean;
   onOpenChange?: (v: boolean) => void;
   disabled?: boolean;
+  contentClassName?: string;
 }>;
 
 export const ActionsMenuSubMenu: React.FC<Props> = ({
@@ -31,6 +32,7 @@ export const ActionsMenuSubMenu: React.FC<Props> = ({
   triggerRef,
   children,
   disabled = false,
+  contentClassName,
 }) => {
   const {MenuPrimitive} = useActionsMenuContext();
 
@@ -51,7 +53,7 @@ export const ActionsMenuSubMenu: React.FC<Props> = ({
           />
         </div>
       </MenuPrimitive.SubTrigger>
-      <MenuPrimitive.SubContent>{children}</MenuPrimitive.SubContent>
+      <MenuPrimitive.SubContent className={contentClassName}>{children}</MenuPrimitive.SubContent>
     </MenuPrimitive.Sub>
   );
 };

package/src/actions-menu/actions-menu.tsx

@@ -5,6 +5,8 @@ import {ActionsMenuContextProvider} from "./contexts/actions-menu-context";
 import {ActionsMenuDangerousRowsProvider} from "./contexts/actions-menu-dangerous-rows";
 import {ActionsMenuProps} from "./actions-menu-props";
 import {preventDefault} from "@fibery/react/src/prevent-default";
+import {useState} from "react";
+import {ActionsMenuConfirmation, ActionsMenuConfirmationProps} from "./actions-menu-confirmation";
 
 export const preventDefaultAndStopPropagation = (event: React.MouseEvent) => {
   event.preventDefault();
@@ -27,6 +29,7 @@ export const ActionsMenu = ({
   onOpenChange,
   children,
   portalled,
+  container,
   disabled,
   contentStyles,
   modal,
@@ -34,9 +37,10 @@ export const ActionsMenu = ({
   sticky,
 }: ActionsMenuProps): JSX.Element => {
   const [isOpen = false, setOpen] = useControllableState({value: open, onChange: onOpenChange});
+  const [confirmation, setConfirmation] = useState<ActionsMenuConfirmationProps | null>(null);
 
   return (
-    <ActionsMenuContextProvider setOpen={setOpen} MenuPrimitive={DropdownMenu}>
+    <ActionsMenuContextProvider setOpen={setOpen} showConfirmation={setConfirmation} MenuPrimitive={DropdownMenu}>
       <DropdownMenu.Root open={isOpen} onOpenChange={setOpen} modal={modal || false}>
         <DropdownMenu.Trigger
           // backward compatibility for dropdown styles
@@ -55,12 +59,15 @@ export const ActionsMenu = ({
           sideOffset={sideOffset}
           className={cx(wide && wideCss, contentStyles)}
           portalled={portalled}
+          container={container}
           collisionPadding={collisionPadding}
           onCloseAutoFocus={autoFocusOnClose ? undefined : preventDefault}
         >
           <ActionsMenuDangerousRowsProvider open={isOpen}>{children}</ActionsMenuDangerousRowsProvider>
         </DropdownMenu.Content>
       </DropdownMenu.Root>
+
+      {confirmation ? <ActionsMenuConfirmation {...confirmation} /> : null}
     </ActionsMenuContextProvider>
   );
 };

package/src/actions-menu/context-actions-menu.tsx

@@ -5,6 +5,8 @@ import * as ContextMenu from "../context-menu";
 import {ActionsMenuDangerousRowsProvider} from "./contexts/actions-menu-dangerous-rows";
 import {ActionsMenuProps} from "./actions-menu-props";
 import {preventDefault} from "@fibery/react/src/prevent-default";
+import {ActionsMenuConfirmation, ActionsMenuConfirmationProps} from "./actions-menu-confirmation";
+import {useState} from "react";
 
 export const ContextActionsMenu = ({
   open,
@@ -15,9 +17,10 @@ export const ContextActionsMenu = ({
   autoFocusOnClose = true,
 }: ActionsMenuProps): JSX.Element => {
   const [isOpen = false, setOpen] = useControllableState({value: open, onChange: onOpenChange});
+  const [confirmation, setConfirmation] = useState<ActionsMenuConfirmationProps | null>(null);
 
   return (
-    <ActionsMenuContextProvider setOpen={setOpen} MenuPrimitive={ContextMenu}>
+    <ActionsMenuContextProvider setOpen={setOpen} showConfirmation={setConfirmation} MenuPrimitive={ContextMenu}>
       <ContextMenu.Root onOpenChange={onOpenChange}>
         <ContextMenu.Trigger disabled={disabled} asChild>
           {trigger}
@@ -28,6 +31,7 @@ export const ContextActionsMenu = ({
           </ContextMenu.Content>
         </ContextMenu.Portal>
       </ContextMenu.Root>
+      {confirmation ? <ActionsMenuConfirmation {...confirmation} /> : null}
     </ActionsMenuContextProvider>
   );
 };

package/src/actions-menu/contexts/actions-menu-context.tsx

@@ -1,5 +1,6 @@
 import {createContext} from "@fibery/react/src/create-context";
 import {useMemo} from "react";
+import {ActionsMenuConfirmationProps} from "../actions-menu-confirmation";
 
 type MenuPrimitive = {
   Item: React.ElementType;
@@ -13,6 +14,7 @@ type MenuPrimitive = {
 
 type ActionsMenuContext = {
   close: () => void;
+  showConfirmation: (args: ActionsMenuConfirmationProps | null) => void;
   MenuPrimitive: MenuPrimitive;
 };
 
@@ -20,16 +22,18 @@ const [Provider, useContext] = createContext<ActionsMenuContext>("ActionsMenuCon
 
 type Props = React.PropsWithChildren<{
   setOpen: (value: boolean) => void;
+  showConfirmation: (args: ActionsMenuConfirmationProps | null) => void;
   MenuPrimitive: MenuPrimitive;
 }>;
 
-export const ActionsMenuContextProvider: React.FC<Props> = ({setOpen, MenuPrimitive, children}) => {
+export const ActionsMenuContextProvider: React.FC<Props> = ({setOpen, showConfirmation, MenuPrimitive, children}) => {
   const context = useMemo<ActionsMenuContext>(
     () => ({
       close: () => setOpen(false),
       MenuPrimitive,
+      showConfirmation,
     }),
-    [setOpen, MenuPrimitive]
+    [MenuPrimitive, showConfirmation, setOpen]
   );
 
   return <Provider value={context}>{children}</Provider>;

package/src/actions-menu/utils/insert-separators.tsx

@@ -9,8 +9,7 @@ import {ActionsMenuSeparator} from "../actions-menu-separator";
  */
 export const insertSeparators = (sections: (React.ReactNode[] | React.ReactNode)[]) => {
   const nodes: React.ReactNode[] = [];
-
-  sections.forEach((section, idx) => {
+  sections.filter(Boolean).forEach((section, idx) => {
     if (Array.isArray(section)) {
       const filtered = section.filter(Boolean);
       if (nodes.length > 0 && filtered.length > 0) {
@@ -23,6 +22,5 @@ export const insertSeparators = (sections: (React.ReactNode[] | React.ReactNode)
       nodes.push(section);
     }
   });
-
   return nodes;
 };

package/src/design-system.ts

@@ -105,7 +105,7 @@ const brandColors = {
 } as const;
 
 export const getDarkenColor = _.memoize((color: string): string => {
-  return makeChromaColor(color).darken(0.6).css();
+  return makeChromaColor(color).darken(0.5).desaturate(0.8).css();
 });
 
 export const themeColors = {
@@ -114,6 +114,7 @@ export const themeColors = {
   stateColors: [stateColors, stateColors],
   colorAI: ["hsla(271, 57%, 61%, 1)", "hsla(272, 43%, 50%, 1)"],
   colorBgAI: ["hsla(271, 57%, 61%, 0.1)", "hsla(272, 43%, 50%, 0.1)"],
+  colorSubtleBgAI: ["hsla(271, 57%, 61%, 0.05)", "hsla(272, 43%, 50%, 0.1)"],
   actionMenuShadow: [
     `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 12px 16px -4px ${getOpacities(slate.slate10).opacity30}`,
     `0 0 0 1px ${getOpacities(slateDark.slate1).opacity10}, 0 12px 16px -4px ${
@@ -142,23 +143,24 @@ export const themeColors = {
     `blur(24px) saturate(190%) contrast(50%) brightness(130%)`,
     `blur(24px) saturate(180%) contrast(60%) brightness(70%)`,
   ],
-  primaryBlue: [indigo.indigo9, indigoDark.indigo10],
+  primaryBlue: [indigo.indigo9, indigoDark.indigo9],
   whiteColor: [whiteA.whiteA0, whiteA.whiteA0],
   blackColor: [blackA.blackA0, blackA.blackA0],
-  mainBg: [slate.slate2, slateDark.slate1],
+  mainBg: [slate.slate3, slateDark.slate1],
   panelBg: [whiteA.whiteA0, slateDark.slate2],
   panelContentBg: [slate.slate2, slateDark.slate2],
+  colorBgRelationContainer: [slate.slate2, slateDark.slate1],
   pageBg: [whiteA.whiteA0, slateDark.slate1],
   pageContentBg: [whiteA.whiteA0, slateDark.slate2],
   colorBgPopup: [whiteA.whiteA0, slateDark.slate4],
   colorBgSidebar: [whiteA.whiteA0, slateDark.slate3],
-  menuBg: [slate.slate2, slateDark.slate2],
+  menuBg: [slate.slate3, slateDark.slate1],
   menuTextColor: [slate.slate12, slate.slate8],
-  menuItemHoverColor: [slate.slate4, slateDark.slate6],
+  menuItemHoverColor: [slate.slate5, slateDark.slate6],
   menuSelectedTextColor: [slate.slate2, slate.slate2],
   menuFooterColor: [getOpacities(whiteA.whiteA0).opacity20, getOpacities(slateDark.slate3).opacity40],
   menuFooterHoverColor: [getOpacities(whiteA.whiteA0).opacity60, slateDark.slate4],
-  menuIconColor: [getOpacities(slate.slate10).opacity90, getOpacities(slate.slate10).opacity90],
+  menuIconColor: [getOpacities(slate.slate11).opacity90, getOpacities(slateDark.slate11).opacity90],
   menuSelectedIconColor: [getOpacities(slate.slate1).opacity90, getOpacities(slate.slate1).opacity90],
   textColor: [slateDark.slate3, slate.slate6],
   textSelectionColor: [getOpacities(blue.blue10).opacity20, getOpacities(blueDark.blue10).opacity40],
@@ -229,7 +231,7 @@ export const themeColors = {
     `0 0 0 3px ${getOpacities(red.red11).opacity25}`,
     `0 0 0 3px ${getOpacities(red.red7).opacity25}`,
   ],
-  buttonPrimaryColor: [indigo.indigo10, indigoDark.indigo10],
+  buttonPrimaryColor: [indigo.indigo9, indigoDark.indigo9],
   buttonColor: [slate.slate10, slateDark.slate10],
   buttonPrimaryTextColor: [slate.slate2, slate.slate6],
   checkboxColor: [slate.slate10, slateDark.slate10],
@@ -262,7 +264,7 @@ export const themeColors = {
   iconColor: [slate.slate10, slateDark.slate10],
   appIconColor: [getOpacities(slate.slate2).opacity90, getOpacities(slate.slate2).opacity70],
   appIconBgColor: [getOpacities(slate.slate1).opacity90, getOpacities(slate.slate2).opacity50],
-  mentionBgColor: [slate.slate3, slateDark.slate5],
+  mentionBgColor: [getOpacities(slate.slate7).opacity30, getOpacities(slateDark.slate7).opacity40],
   colorBgSelectMenu: [slate.slate1, slateDark.slate3],
   shadowSelectMenu: [
     `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 12px 16px -4px ${getOpacities(slate.slate10).opacity30}`,
@@ -366,14 +368,14 @@ export const themeColors = {
   opacityMenuItemDragged: [`${opacity.opacity40}`, `${opacity.opacity40}`],
   colorBgMenuItemSelectedDragged: [indigo.indigo6, indigoDark.indigo6],
   // Default
-  colorTextMenuItem: [slate.slate12, slateDark.slate12],
+  colorTextMenuItem: [slate.slate12, getOpacities(slateDark.slate12).opacity90],
   colorBgMenuItem: [transparent, transparent],
   // :hover
-  colorBgMenuItemHover: [slate.slate4, slateDark.slate4],
+  colorBgMenuItemHover: [slate.slate5, slateDark.slate4],
   // :focus
   colorBgMenuItemFocus: [slate.slate6, slateDark.slate6],
   // Selected
-  colorBgMenuItemSelected: [indigo.indigo4, indigoDark.indigo4],
+  colorBgMenuItemSelected: [indigo.indigo5, indigoDark.indigo4],
   // :hover
   colorBgMenuItemSelectedHover: [indigo.indigo6, indigoDark.indigo6],
   // :focus, :focus:hover
@@ -469,6 +471,7 @@ export const themeColors = {
   progressBarBg: [getOpacities(indigo.indigo9).opacity25, getOpacities(indigoDark.indigo10).opacity25],
   searchFiltersBg: [slate.slate1, slateDark.slate2],
   colorPickerSwatchBorder: [blackA.blackA7, blackA.blackA7],
+  colorBorderRichTextMedia: [blackA.blackA7, blackA.blackA7],
   richTextTableBorder: [blackA.blackA5, whiteA.whiteA7],
   gridHeaderBgColor: [slate.slate2, slateDark.slate3],
   gridHeaderHoverBgColor: [slate.slate3, slateDark.slate4],

package/src/dropdown-menu/index.tsx

@@ -98,6 +98,7 @@ const dropdownMenuContentStyles = css`
 export type ContentProps = DropdownMenuPrimitive.DropdownMenuContentProps & {
   /* render content in portal. NOTE: Changing this prop will lead to re-mount */
   portalled?: boolean;
+  container?: HTMLElement | null | undefined;
   collisionPadding?: number;
 };
 
@@ -111,11 +112,11 @@ const onContentKeyDown = (e: React.KeyboardEvent) => {
 };
 
 export const Content = forwardRef<HTMLDivElement, ContentProps>(function DropdownMenuContent(
-  {className, portalled = true, collisionPadding = space.s12, ...rest},
+  {className, portalled = true, container, collisionPadding = space.s12, ...rest},
   ref
 ) {
   return (
-    <Wrap if={portalled} with={DropdownMenuPrimitive.Portal}>
+    <Wrap if={portalled} with={DropdownMenuPrimitive.Portal} container={container}>
       <DropdownMenuPrimitive.Content
         onKeyDown={onContentKeyDown}
         ref={ref}
@@ -133,10 +134,15 @@ export const Content = forwardRef<HTMLDivElement, ContentProps>(function Dropdow
 export const Sub = DropdownMenuPrimitive.Sub;
 
 export const SubContent = forwardRef<HTMLDivElement, DropdownMenuPrimitive.DropdownMenuSubContentProps>(
-  function DropdownMenuSubContent({className, ...rest}, ref) {
+  function DropdownMenuSubContent({className, collisionPadding = space.s12, ...rest}, ref) {
     return (
       <DropdownMenuPrimitive.Portal>
-        <DropdownMenuPrimitive.SubContent ref={ref} className={cx(dropdownMenuContentStyles, className)} {...rest} />
+        <DropdownMenuPrimitive.SubContent
+          ref={ref}
+          className={cx(dropdownMenuContentStyles, className)}
+          collisionPadding={collisionPadding}
+          {...rest}
+        />
       </DropdownMenuPrimitive.Portal>
     );
   }

package/src/icons/ast/FieldUnit.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const FieldUnit: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M3.825 12.6A2.025 2.025 0 0 1 1.8 10.575v-3.15c0-1.118.907-2.025 2.025-2.025h10.35c1.118 0 2.025.907 2.025 2.025v3.15a2.025 2.025 0 0 1-2.025 2.025H3.825Zm0-1.35a.675.675 0 0 1-.675-.675v-3.15c0-.373.302-.675.675-.675h10.35c.373 0 .675.302.675.675v3.15a.675.675 0 0 1-.675.675H3.825ZM8.55 9c0-.373.302-.675.675-.675h3.15a.675.675 0 1 1 0 1.35h-3.15A.675.675 0 0 1 8.55 9ZM5.925 7.575a1.425 1.425 0 1 0 0 2.85 1.425 1.425 0 0 0 0-2.85Z"},"children":[]}],"metadata":""}]},"name":"field-unit"};
+
+export default FieldUnit;

package/src/icons/ast/IntegrationsIntegrationDiscourseColor.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const IntegrationsIntegrationDiscourseColor: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"d":"M10.067 2.223c-4.261 0-7.844 3.452-7.844 7.712v7.987l7.842-.007c4.259 0 7.713-3.586 7.713-7.845 0-4.258-3.457-7.847-7.711-7.847Z","fill":"#231F20"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M10.143 5.208a4.782 4.782 0 0 0-4.203 7.058l-.865 2.783 3.106-.702a4.782 4.782 0 1 0 1.967-9.139h-.005Z","fill":"#FFF9AE"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M13.936 7.08a4.779 4.779 0 0 1-5.755 7.259l-3.106.71 3.162-.373a4.778 4.778 0 0 0 5.698-7.597h.001Z","fill":"#00AEEF"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M13.056 6.198a4.78 4.78 0 0 1-4.965 7.82L5.075 15.05l3.106-.703a4.779 4.779 0 0 0 4.875-8.149Z","fill":"#00A94F"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M6.226 12.372a4.78 4.78 0 0 1 7.713-5.293 4.78 4.78 0 0 0-7.999 5.187l-.865 2.783 1.151-2.677Z","fill":"#F15D22"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M5.94 12.266a4.78 4.78 0 0 1 7.115-6.067 4.781 4.781 0 0 0-7.41 5.993l-.569 2.858.864-2.784Z","fill":"#E31B23"},"children":[]}],"metadata":""}]},"name":"integrations-integration-discourse-color"};
+
+export default IntegrationsIntegrationDiscourseColor;

package/src/icons/ast/IntegrationsIntegrationIntercomColor.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const IntegrationsIntegrationIntercomColor: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"d":"M15.704 10.775a.519.519 0 0 1-1.037 0V6.112a.519.519 0 0 1 1.037 0v4.663Zm-.18 3.246c-.08.068-2.002 1.68-5.524 1.68-3.521 0-5.442-1.612-5.522-1.68a.519.519 0 0 1 .674-.789c.03.026 1.745 1.432 4.849 1.432 3.142 0 4.83-1.416 4.847-1.43a.518.518 0 1 1 .675.787ZM4.296 6.11a.519.519 0 0 1 1.037 0v4.664a.518.518 0 0 1-1.037 0V6.112Zm2.592-1.037a.519.519 0 0 1 1.037 0v6.928a.519.519 0 0 1-1.037 0V5.075Zm2.593-.262a.518.518 0 1 1 1.037 0v7.519a.52.52 0 0 1-1.037 0V4.812Zm2.593.262a.519.519 0 0 1 1.037 0v6.928a.518.518 0 0 1-1.037 0V5.075Zm3.759-2.851H4.167c-1.074 0-1.944.87-1.944 1.944v11.667c0 1.074.87 1.944 1.944 1.944h11.667c1.074 0 1.944-.87 1.944-1.944V4.167c0-1.074-.87-1.944-1.944-1.944Z","fill":"#1F8DED"},"children":[]}],"metadata":""}]},"name":"integrations-integration-intercom-color"};
+
+export default IntegrationsIntegrationIntercomColor;

package/src/icons/ast/IntegrationsIntegrationSlackColor.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const IntegrationsIntegrationSlackColor: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"d":"M5.222 12.052c0 .9-.734 1.634-1.634 1.634-.9 0-1.634-.735-1.634-1.634 0-.9.735-1.634 1.634-1.634h1.634v1.634ZM6.046 12.052c0-.9.735-1.634 1.634-1.634.9 0 1.634.735 1.634 1.634v4.092c0 .899-.735 1.634-1.634 1.634-.9 0-1.634-.735-1.634-1.634v-4.092Z","fill":"#E01E5A"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M7.68 5.49c-.9 0-1.634-.734-1.634-1.633 0-.9.735-1.634 1.634-1.634.9 0 1.634.734 1.634 1.634V5.49H7.68ZM7.68 6.314c.9 0 1.634.735 1.634 1.635 0 .899-.735 1.634-1.634 1.634H3.588c-.9 0-1.634-.735-1.634-1.634 0-.9.735-1.635 1.634-1.635H7.68Z","fill":"#36C5F0"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M14.241 7.949c0-.9.735-1.635 1.634-1.635.9 0 1.634.735 1.634 1.635 0 .899-.734 1.634-1.634 1.634h-1.634V7.949ZM13.418 7.948c0 .9-.735 1.634-1.634 1.634-.9 0-1.635-.734-1.635-1.634V3.857c0-.9.735-1.634 1.635-1.634.899 0 1.634.734 1.634 1.634v4.091Z","fill":"#2EB67D"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M11.784 14.51c.899 0 1.634.735 1.634 1.634 0 .9-.735 1.634-1.634 1.634-.9 0-1.635-.735-1.635-1.634V14.51h1.635ZM11.784 13.686c-.9 0-1.635-.735-1.635-1.634 0-.9.735-1.634 1.635-1.634h4.091c.9 0 1.634.735 1.634 1.634 0 .9-.735 1.634-1.634 1.634h-4.091Z","fill":"#ECB22E"},"children":[]}],"metadata":""}]},"name":"integrations-integration-slack-color"};
+
+export default IntegrationsIntegrationSlackColor;

package/src/icons/ast/IntegrationsIntegrationZendeskColor.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const IntegrationsIntegrationZendeskColor: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M9.14 7.21v8.7H1.954l7.186-8.7ZM9.14 4.089a3.598 3.598 0 0 1-3.593 3.603 3.597 3.597 0 0 1-3.593-3.603H9.14ZM10.324 15.91a3.598 3.598 0 0 1 3.593-3.602 3.597 3.597 0 0 1 3.593 3.603h-7.186ZM10.324 12.788v-8.7h7.186l-7.186 8.7Z","fill":"#03363D"},"children":[]}],"metadata":""}]},"name":"integrations-integration-zendesk-color"};
+
+export default IntegrationsIntegrationZendeskColor;

package/src/icons/ast/LayoutDouble.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const LayoutDouble: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M4.25 4.5a.75.75 0 0 0-.75.75v9.5c0 .414.336.75.75.75h11.5a.75.75 0 0 0 .75-.75v-9.5a.75.75 0 0 0-.75-.75H4.25ZM2 5.25A2.25 2.25 0 0 1 4.25 3h11.5A2.25 2.25 0 0 1 18 5.25v9.5A2.25 2.25 0 0 1 15.75 17H4.25A2.25 2.25 0 0 1 2 14.75v-9.5ZM12.75 6a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5h-1.5ZM12 9.75a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5h-1.5a.75.75 0 0 1-.75-.75ZM5.5 6a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5H10a.5.5 0 0 0 .5-.5v-7A.5.5 0 0 0 10 6H5.5Z"},"children":[]}],"metadata":""}]},"name":"layout-double"};
+
+export default LayoutDouble;

package/src/icons/ast/LayoutSingle.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const LayoutSingle: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M4.25 4.5a.75.75 0 0 0-.75.75v9.5c0 .414.336.75.75.75h11.5a.75.75 0 0 0 .75-.75v-9.5a.75.75 0 0 0-.75-.75H4.25ZM2 5.25A2.25 2.25 0 0 1 4.25 3h11.5A2.25 2.25 0 0 1 18 5.25v9.5A2.25 2.25 0 0 1 15.75 17H4.25A2.25 2.25 0 0 1 2 14.75v-9.5Zm3 1.5A.75.75 0 0 1 5.75 6h2.5a.75.75 0 0 1 0 1.5h-2.5A.75.75 0 0 1 5 6.75ZM5.5 9a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5h-9Z"},"children":[]}],"metadata":""}]},"name":"layout-single"};
+
+export default LayoutSingle;

package/src/icons/ast/MoveBottom.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const MoveBottom: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M5.175 16.65a2.025 2.025 0 0 1-2.025-2.025v-3.15c0-1.118.907-2.025 2.025-2.025h8.55c1.118 0 2.025.907 2.025 2.025v3.15a2.025 2.025 0 0 1-2.025 2.025h-8.55ZM4.5 14.625c0 .373.302.675.675.675h8.55a.675.675 0 0 0 .675-.675v-3.15a.675.675 0 0 0-.675-.675h-8.55a.675.675 0 0 0-.675.675v3.15ZM6.948 4.248a.675.675 0 0 1 .954 0L9 5.345v-3.32a.675.675 0 0 1 1.35 0v3.32l1.098-1.097a.675.675 0 0 1 .954.954l-2.25 2.25a.675.675 0 0 1-.954 0l-2.25-2.25a.675.675 0 0 1 0-.954Z"},"children":[]}],"metadata":""}]},"name":"move-bottom"};
+
+export default MoveBottom;

package/src/icons/ast/MoveLeft.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const MoveLeft: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M1.8 4.725c0-1.118.907-2.025 2.025-2.025h3.15C8.093 2.7 9 3.607 9 4.725v8.55A2.025 2.025 0 0 1 6.975 15.3h-3.15A2.025 2.025 0 0 1 1.8 13.275v-8.55Zm2.025-.675a.675.675 0 0 0-.675.675v8.55c0 .373.302.675.675.675h3.15a.675.675 0 0 0 .675-.675v-8.55a.675.675 0 0 0-.675-.675h-3.15Zm10.377 2.448a.675.675 0 0 1 0 .954L13.105 8.55h3.32a.675.675 0 1 1 0 1.35h-3.32l1.097 1.098a.675.675 0 0 1-.954.954l-2.25-2.25a.675.675 0 0 1 0-.954l2.25-2.25a.675.675 0 0 1 .954 0Z"},"children":[]}],"metadata":""}]},"name":"move-left"};
+
+export default MoveLeft;

package/src/icons/ast/MoveRight.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const MoveRight: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M9 4.725C9 3.607 9.907 2.7 11.025 2.7h3.15c1.118 0 2.025.907 2.025 2.025v8.55a2.025 2.025 0 0 1-2.025 2.025h-3.15A2.025 2.025 0 0 1 9 13.275v-8.55Zm2.025-.675a.675.675 0 0 0-.675.675v8.55c0 .373.302.675.675.675h3.15a.675.675 0 0 0 .675-.675v-8.55a.675.675 0 0 0-.675-.675h-3.15Zm-7.227 7.902c.263.264.69.264.954 0l2.25-2.25a.675.675 0 0 0 0-.954l-2.25-2.25a.675.675 0 1 0-.954.954L4.895 8.55h-3.32a.675.675 0 0 0 0 1.35h3.32l-1.097 1.098a.675.675 0 0 0 0 .954Z"},"children":[]}],"metadata":""}]},"name":"move-right"};
+
+export default MoveRight;

package/src/icons/ast/MoveTop.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const MoveTop: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M4.275 8.55A2.025 2.025 0 0 1 2.25 6.525v-3.15c0-1.118.907-2.025 2.025-2.025h8.55c1.118 0 2.025.907 2.025 2.025v3.15a2.025 2.025 0 0 1-2.025 2.025h-8.55ZM3.6 6.525c0 .373.302.675.675.675h8.55a.675.675 0 0 0 .675-.675v-3.15a.675.675 0 0 0-.675-.675h-8.55a.675.675 0 0 0-.675.675v3.15Zm7.902 7.227a.675.675 0 0 0 0-.954l-2.25-2.25a.675.675 0 0 0-.954 0l-2.25 2.25a.675.675 0 0 0 .954.954L8.1 12.654v3.32a.675.675 0 1 0 1.35 0v-3.32l1.098 1.098a.675.675 0 0 0 .954 0Z"},"children":[]}],"metadata":""}]},"name":"move-top"};
+
+export default MoveTop;

package/src/icons/ast/Pin.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const Pin: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M11.254 1.8a.692.692 0 0 1 .513.198l4.232 4.165a.67.67 0 0 1-.041.992l-3.71 3.097.246 2.342a.669.669 0 0 1-.197.547l-1.228 1.208a.694.694 0 0 1-.97 0l-2.724-2.68-4.404 4.333a.694.694 0 0 1-.97 0 .667.667 0 0 1 0-.954l4.404-4.334-2.957-2.91a.67.67 0 0 1 0-.955l1.228-1.208a.692.692 0 0 1 .556-.194l2.379.243 3.147-3.652a.69.69 0 0 1 .496-.237Zm.07 1.67L8.422 6.835a.692.692 0 0 1-.594.234l-2.414-.246-.512.503 5.681 5.591.512-.503-.25-2.377a.67.67 0 0 1 .238-.585L14.503 6.6l-3.18-3.129Z"},"children":[]}],"metadata":""}]},"name":"pin"};
+
+export default Pin;

package/src/icons/ast/UserRole.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const UserRole: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M6.804 1.75h6.392c.442 0 .818 0 1.126.025.325.027.64.085.942.238.455.232.824.602 1.056 1.057.154.301.212.617.238.94.025.31.025.686.025 1.127v9.726c0 .441 0 .817-.025 1.126-.026.324-.084.64-.238.941a2.417 2.417 0 0 1-1.056 1.057c-.302.153-.617.211-.942.238-.308.025-.684.025-1.126.025H6.804c-.442 0-.818 0-1.126-.025-.325-.027-.64-.085-.942-.238A2.417 2.417 0 0 1 3.68 16.93c-.154-.302-.212-.618-.238-.942-.025-.309-.025-.685-.025-1.126V5.137c0-.441 0-.817.025-1.126.026-.324.084-.64.238-.941a2.417 2.417 0 0 1 1.056-1.057c.302-.153.617-.211.942-.238.308-.025.684-.025 1.126-.025ZM5.8 3.27c-.232.02-.328.052-.383.08a.917.917 0 0 0-.4.4c-.028.055-.061.152-.08.383-.02.24-.02.555-.02 1.034v9.666c0 .48 0 .794.02 1.034.019.232.052.328.08.383a.917.917 0 0 0 .4.4c.055.028.151.06.383.08.24.02.554.02 1.033.02h6.334c.479 0 .793 0 1.033-.02.232-.02.328-.052.383-.08a.917.917 0 0 0 .4-.4c.028-.055.061-.151.08-.383.02-.24.02-.555.02-1.034V5.167c0-.48 0-.794-.02-1.034-.019-.231-.052-.328-.08-.382a.917.917 0 0 0-.4-.401c-.055-.028-.151-.06-.383-.08-.24-.02-.554-.02-1.033-.02H6.833c-.479 0-.793 0-1.033.02ZM7.583 5a.75.75 0 0 1 .75-.75h3.334a.75.75 0 0 1 0 1.5H8.333a.75.75 0 0 1-.75-.75Zm.834 4.167a1.583 1.583 0 1 1 3.166 0 1.583 1.583 0 0 1-3.166 0ZM10 13.25c-.982 0-1.64.563-1.772 1.098a.75.75 0 0 1-1.456-.362c.34-1.368 1.742-2.236 3.228-2.236 1.486 0 2.888.868 3.228 2.236a.75.75 0 0 1-1.456.362c-.133-.535-.79-1.098-1.772-1.098Z"},"children":[]}],"metadata":""}]},"name":"user-role"};
+
+export default UserRole;

package/src/icons/ast/index.tsx

@@ -83,6 +83,7 @@ export { default as FavoritesChecked } from './FavoritesChecked';
 export { default as FavoritesOff } from './FavoritesOff';
 export { default as Favorites } from './Favorites';
 export { default as FiberyMono } from './FiberyMono';
+export { default as FieldUnit } from './FieldUnit';
 export { default as Fields } from './Fields';
 export { default as Figma } from './Figma';
 export { default as FileUpload } from './FileUpload';
@@ -107,10 +108,16 @@ export { default as ImageXmark } from './ImageXmark';
 export { default as Import } from './Import';
 export { default as InfoCircleFilled } from './InfoCircleFilled';
 export { default as Integration } from './Integration';
+export { default as IntegrationsIntegrationDiscourseColor } from './IntegrationsIntegrationDiscourseColor';
+export { default as IntegrationsIntegrationIntercomColor } from './IntegrationsIntegrationIntercomColor';
+export { default as IntegrationsIntegrationSlackColor } from './IntegrationsIntegrationSlackColor';
+export { default as IntegrationsIntegrationZendeskColor } from './IntegrationsIntegrationZendeskColor';
 export { default as InvitePeople } from './InvitePeople';
 export { default as Items } from './Items';
 export { default as Jira } from './Jira';
 export { default as Lab } from './Lab';
+export { default as LayoutDouble } from './LayoutDouble';
+export { default as LayoutSingle } from './LayoutSingle';
 export { default as LeftPanel } from './LeftPanel';
 export { default as Levels } from './Levels';
 export { default as LineDivider } from './LineDivider';
@@ -128,6 +135,10 @@ export { default as Mixpanel } from './Mixpanel';
 export { default as Monitor } from './Monitor';
 export { default as MoreCompact } from './MoreCompact';
 export { default as More } from './More';
+export { default as MoveBottom } from './MoveBottom';
+export { default as MoveLeft } from './MoveLeft';
+export { default as MoveRight } from './MoveRight';
+export { default as MoveTop } from './MoveTop';
 export { default as MySpace } from './MySpace';
 export { default as NetworkAdd } from './NetworkAdd';
 export { default as Network } from './Network';
@@ -144,6 +155,7 @@ export { default as PageWideMode } from './PageWideMode';
 export { default as Pencil } from './Pencil';
 export { default as People } from './People';
 export { default as Photo } from './Photo';
+export { default as Pin } from './Pin';
 export { default as Popup } from './Popup';
 export { default as Posts } from './Posts';
 export { default as Question } from './Question';
@@ -243,6 +255,7 @@ export { default as TypeText } from './TypeText';
 export { default as TypeUrl } from './TypeUrl';
 export { default as Upgrade } from './Upgrade';
 export { default as UsbFlashDrive } from './UsbFlashDrive';
+export { default as UserRole } from './UserRole';
 export { default as ViewBoard } from './ViewBoard';
 export { default as ViewCalendar } from './ViewCalendar';
 export { default as ViewCanvas } from './ViewCanvas';

package/src/icons/react/FieldUnit.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import FieldUnitSvg from '../ast/FieldUnit';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const FieldUnit = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={FieldUnitSvg} />;
+
+FieldUnit.displayName = 'FieldUnit';
+export default FieldUnit;

package/src/icons/react/IntegrationsIntegrationDiscourseColor.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import IntegrationsIntegrationDiscourseColorSvg from '../ast/IntegrationsIntegrationDiscourseColor';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const IntegrationsIntegrationDiscourseColor = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={IntegrationsIntegrationDiscourseColorSvg} />;
+
+IntegrationsIntegrationDiscourseColor.displayName = 'IntegrationsIntegrationDiscourseColor';
+export default IntegrationsIntegrationDiscourseColor;

package/src/icons/react/IntegrationsIntegrationIntercomColor.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import IntegrationsIntegrationIntercomColorSvg from '../ast/IntegrationsIntegrationIntercomColor';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const IntegrationsIntegrationIntercomColor = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={IntegrationsIntegrationIntercomColorSvg} />;
+
+IntegrationsIntegrationIntercomColor.displayName = 'IntegrationsIntegrationIntercomColor';
+export default IntegrationsIntegrationIntercomColor;

package/src/icons/react/IntegrationsIntegrationSlackColor.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import IntegrationsIntegrationSlackColorSvg from '../ast/IntegrationsIntegrationSlackColor';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const IntegrationsIntegrationSlackColor = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={IntegrationsIntegrationSlackColorSvg} />;
+
+IntegrationsIntegrationSlackColor.displayName = 'IntegrationsIntegrationSlackColor';
+export default IntegrationsIntegrationSlackColor;

package/src/icons/react/IntegrationsIntegrationZendeskColor.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import IntegrationsIntegrationZendeskColorSvg from '../ast/IntegrationsIntegrationZendeskColor';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const IntegrationsIntegrationZendeskColor = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={IntegrationsIntegrationZendeskColorSvg} />;
+
+IntegrationsIntegrationZendeskColor.displayName = 'IntegrationsIntegrationZendeskColor';
+export default IntegrationsIntegrationZendeskColor;

package/src/icons/react/LayoutDouble.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import LayoutDoubleSvg from '../ast/LayoutDouble';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const LayoutDouble = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={LayoutDoubleSvg} />;
+
+LayoutDouble.displayName = 'LayoutDouble';
+export default LayoutDouble;

package/src/icons/react/LayoutSingle.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import LayoutSingleSvg from '../ast/LayoutSingle';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const LayoutSingle = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={LayoutSingleSvg} />;
+
+LayoutSingle.displayName = 'LayoutSingle';
+export default LayoutSingle;

package/src/icons/react/MoveBottom.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import MoveBottomSvg from '../ast/MoveBottom';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const MoveBottom = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={MoveBottomSvg} />;
+
+MoveBottom.displayName = 'MoveBottom';
+export default MoveBottom;

package/src/icons/react/MoveLeft.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import MoveLeftSvg from '../ast/MoveLeft';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const MoveLeft = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={MoveLeftSvg} />;
+
+MoveLeft.displayName = 'MoveLeft';
+export default MoveLeft;

package/src/icons/react/MoveRight.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import MoveRightSvg from '../ast/MoveRight';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const MoveRight = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={MoveRightSvg} />;
+
+MoveRight.displayName = 'MoveRight';
+export default MoveRight;

package/src/icons/react/MoveTop.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import MoveTopSvg from '../ast/MoveTop';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const MoveTop = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={MoveTopSvg} />;
+
+MoveTop.displayName = 'MoveTop';
+export default MoveTop;

package/src/icons/react/Pin.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import PinSvg from '../ast/Pin';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const Pin = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={PinSvg} />;
+
+Pin.displayName = 'Pin';
+export default Pin;

package/src/icons/react/UserRole.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import UserRoleSvg from '../ast/UserRole';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const UserRole = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={UserRoleSvg} />;
+
+UserRole.displayName = 'UserRole';
+export default UserRole;

package/src/icons/react/index.tsx

@@ -83,6 +83,7 @@ export { default as FavoritesChecked } from './FavoritesChecked';
 export { default as FavoritesOff } from './FavoritesOff';
 export { default as Favorites } from './Favorites';
 export { default as FiberyMono } from './FiberyMono';
+export { default as FieldUnit } from './FieldUnit';
 export { default as Fields } from './Fields';
 export { default as Figma } from './Figma';
 export { default as FileUpload } from './FileUpload';
@@ -107,10 +108,16 @@ export { default as ImageXmark } from './ImageXmark';
 export { default as Import } from './Import';
 export { default as InfoCircleFilled } from './InfoCircleFilled';
 export { default as Integration } from './Integration';
+export { default as IntegrationsIntegrationDiscourseColor } from './IntegrationsIntegrationDiscourseColor';
+export { default as IntegrationsIntegrationIntercomColor } from './IntegrationsIntegrationIntercomColor';
+export { default as IntegrationsIntegrationSlackColor } from './IntegrationsIntegrationSlackColor';
+export { default as IntegrationsIntegrationZendeskColor } from './IntegrationsIntegrationZendeskColor';
 export { default as InvitePeople } from './InvitePeople';
 export { default as Items } from './Items';
 export { default as Jira } from './Jira';
 export { default as Lab } from './Lab';
+export { default as LayoutDouble } from './LayoutDouble';
+export { default as LayoutSingle } from './LayoutSingle';
 export { default as LeftPanel } from './LeftPanel';
 export { default as Levels } from './Levels';
 export { default as LineDivider } from './LineDivider';
@@ -128,6 +135,10 @@ export { default as Mixpanel } from './Mixpanel';
 export { default as Monitor } from './Monitor';
 export { default as MoreCompact } from './MoreCompact';
 export { default as More } from './More';
+export { default as MoveBottom } from './MoveBottom';
+export { default as MoveLeft } from './MoveLeft';
+export { default as MoveRight } from './MoveRight';
+export { default as MoveTop } from './MoveTop';
 export { default as MySpace } from './MySpace';
 export { default as NetworkAdd } from './NetworkAdd';
 export { default as Network } from './Network';
@@ -144,6 +155,7 @@ export { default as PageWideMode } from './PageWideMode';
 export { default as Pencil } from './Pencil';
 export { default as People } from './People';
 export { default as Photo } from './Photo';
+export { default as Pin } from './Pin';
 export { default as Popup } from './Popup';
 export { default as Posts } from './Posts';
 export { default as Question } from './Question';
@@ -243,6 +255,7 @@ export { default as TypeText } from './TypeText';
 export { default as TypeUrl } from './TypeUrl';
 export { default as Upgrade } from './Upgrade';
 export { default as UsbFlashDrive } from './UsbFlashDrive';
+export { default as UserRole } from './UserRole';
 export { default as ViewBoard } from './ViewBoard';
 export { default as ViewCalendar } from './ViewCalendar';
 export { default as ViewCanvas } from './ViewCanvas';

package/src/item.tsx

@@ -28,7 +28,7 @@ const getGridStyle = ({
 
 const hoverClass = css`
   &:hover {
-    background-color: ${themeVars.opacity.opacity10};
+    background-color: ${themeVars.colorBgMenuItemHover};
   }
 `;
 

package/src/select/select-in-popover.tsx

@@ -32,7 +32,8 @@ const popupContainerClassName = css`
   z-index: 1050;
 `;
 const popupClassName = css`
-  max-width: 360px;
+  min-width: 320px;
+  max-width: 440px;
   padding-top: ${space.s8}px;
   padding-bottom: ${space.s4}px;
   padding-left: ${space.s8}px;
@@ -123,7 +124,7 @@ type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
   virtualized?: boolean;
   defaultMenuIsOpen?: boolean;
   placeholder?: string;
-  noOptionsMessage: () => string | JSX.Element | null;
+  noOptionsMessage?: () => string | JSX.Element | null;
   options: OptionsOrGroups<Option, Group>;
   filterOption?: SelectProps<Option>["filterOption"];
   inputValue?: string;

package/src/tooltip.tsx

@@ -98,6 +98,7 @@ export type TooltipProps = Omit<TooltipPrimitive.TooltipTriggerProps, "title"> &
   description?: ReactNode;
   setContentElement?: (el: HTMLDivElement | null) => void;
   content?: ReactNode;
+  container?: HTMLElement | null | undefined;
   side?: TooltipPrimitive.TooltipContentProps["side"];
   sideOffset?: TooltipPrimitive.TooltipContentProps["sideOffset"];
   align?: TooltipPrimitive.TooltipContentProps["align"];
@@ -144,6 +145,7 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
       keepOnClick,
       disabled,
       setContentElement,
+      container,
       ...triggerProps
     },
     ref
@@ -170,7 +172,7 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
         <TooltipPrimitive.Trigger ref={ref} {...triggerProps} {...keepOnClickProps} asChild>
           {children}
         </TooltipPrimitive.Trigger>
-        <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Portal container={container}>
           <TooltipPrimitive.Content
             ref={setContentElement}
             side={side}