@fibery/ui-kit 1.33.5 → 1.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.33.5",
+  "version": "1.34.0",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -41,12 +41,12 @@
     "@radix-ui/react-collapsible": "1.1.0",
     "@radix-ui/react-context-menu": "2.2.1",
     "@radix-ui/react-dropdown-menu": "2.1.1",
-    "@radix-ui/react-navigation-menu": "1.2.0",
-    "@radix-ui/react-toast": "1.2.1",
-    "@radix-ui/react-tooltip": "1.1.2",
-    "@types/d3-shape": "^3.1.3",
-    "@types/react-select-country-list": "^2.2.1",
-    "@types/setimmediate": "^1.0.2",
+    "@radix-ui/react-navigation-menu": "1.2.1",
+    "@radix-ui/react-toast": "1.2.2",
+    "@radix-ui/react-tooltip": "1.1.3",
+    "@types/d3-shape": "^3.1.6",
+    "@types/react-select-country-list": "^2.2.3",
+    "@types/setimmediate": "^1.0.4",
     "@types/ua-parser-js": "0.7.36",
     "antd": "4.24.7",
     "chroma-js": "2.1.2",
@@ -72,9 +72,10 @@
     "react-select-country-list": "2.2.1",
     "react-virtuoso": "4.6.0",
     "screenfull": "6.0.1",
-    "ua-parser-js": "0.7.24",
-    "@fibery/helpers": "1.3.0",
+    "tabbable": "5.2.1",
+    "ua-parser-js": "1.0.39",
     "@fibery/emoji-data": "2.6.0",
+    "@fibery/helpers": "1.3.0",
     "@fibery/react": "1.4.0"
   },
   "peerDependencies": {
@@ -109,8 +110,8 @@
     "svgo": "2.8.0",
     "typescript": "5.4.3",
     "unist-util-reduce": "0.2.2",
-    "@fibery/eslint-config": "8.6.0",
-    "@fibery/babel-preset": "7.4.0"
+    "@fibery/babel-preset": "7.4.0",
+    "@fibery/eslint-config": "8.6.0"
   },
   "jest": {
     "testEnvironment": "jsdom",

package/src/actions-menu/actions-menu-open-state-tracker.tsx

@@ -0,0 +1,66 @@
+import {createContext} from "@fibery/react/src/create-context";
+import {ReactNode, useCallback, useEffect, useId, useMemo, useState} from "react";
+
+type ContextValue = {
+  openMenus: Set<string>;
+  setOpenMenus: (value: Set<string>) => void;
+};
+
+const [Provider, useContext] = createContext<ContextValue>("ActionsMenuOpenStateTrackerContext", {
+  openMenus: new Set(),
+  setOpenMenus: () => {},
+});
+
+export const ActionsMenuOpenStateTrackerProvider = ({children}: {children: ReactNode}) => {
+  const [openMenus, setOpenMenus] = useState<Set<string>>(new Set());
+
+  const value = useMemo(() => {
+    return {
+      openMenus,
+      setOpenMenus,
+    };
+  }, [openMenus, setOpenMenus]);
+
+  return <Provider value={value}>{children}</Provider>;
+};
+
+export const useActionsMenuOpenStateTracker = () => {
+  const {openMenus, setOpenMenus} = useContext();
+
+  const menuId = useId();
+
+  const onAddMenu = useCallback(() => {
+    openMenus.add(menuId);
+    setOpenMenus(new Set(openMenus));
+  }, [menuId, openMenus, setOpenMenus]);
+
+  const onRemoveMenu = useCallback(() => {
+    if (openMenus.has(menuId)) {
+      openMenus.delete(menuId);
+      setOpenMenus(new Set(openMenus));
+    }
+  }, [menuId, openMenus, setOpenMenus]);
+
+  useEffect(() => {
+    return () => {
+      onRemoveMenu();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onMenuOpenChange = useCallback(
+    (open: boolean) => {
+      if (open) {
+        onAddMenu();
+      } else {
+        onRemoveMenu();
+      }
+    },
+    [onAddMenu, onRemoveMenu]
+  );
+
+  return {
+    hasOpenMenu: openMenus.size > 0,
+    onMenuOpenChange,
+  };
+};

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

@@ -7,6 +7,7 @@ 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";
+import {useActionsMenuOpenStateTracker} from "./actions-menu-open-state-tracker";
 
 export const preventDefaultAndStopPropagation = (event: React.MouseEvent) => {
   event.preventDefault();
@@ -37,7 +38,16 @@ export const ActionsMenu = ({
   autoFocusOnClose,
   sticky,
 }: ActionsMenuProps): JSX.Element => {
-  const [isOpen = false, setOpen] = useControllableState({value: open, onChange: onOpenChange});
+  const {onMenuOpenChange} = useActionsMenuOpenStateTracker();
+  const [isOpen = false, setOpen] = useControllableState({
+    value: open,
+    onChange: (value) => {
+      if (onOpenChange) {
+        onOpenChange(value);
+      }
+      onMenuOpenChange(value);
+    },
+  });
   const [confirmation, setConfirmation] = useState<ActionsMenuConfirmationProps | null>(null);
 
   return (

package/src/button/button.tsx

@@ -4,6 +4,7 @@ import {border, fontWeight, space, textStyles} from "../design-system";
 import {iconSizeVar} from "../icons/Icon";
 import SpinnerIcon from "../icons/react/Spinner";
 import {BaseButtonProps, BaseButton, ButtonSize} from "./base-button";
+import {useIsSupportHardwareKeyboard} from "../use-is-support-hardware-keyboard";
 
 export type ButtonProps = {
   size?: ButtonSize;
@@ -88,6 +89,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     {size = "medium", iconStart, iconEnd, className, children, pending, disabled, shortcut, fullWidth, ...buttonProps},
     ref
   ) => {
+    const isSupportHardwareKeyboard = useIsSupportHardwareKeyboard();
     return (
       <BaseButton
         ref={ref}
@@ -98,7 +100,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         {pending ? <SpinnerIcon /> : iconStart}
         {children}
         {iconEnd}
-        {shortcut ? <span className={shortcutContainer}>{shortcut}</span> : null}
+        {shortcut && isSupportHardwareKeyboard ? <span className={shortcutContainer}>{shortcut}</span> : null}
       </BaseButton>
     );
   }

package/src/button/make-button-colors.ts

@@ -3,31 +3,59 @@
 // so it's easier to find buttons with custom colors
 
 import {CSSProperties} from "@linaria/core";
-import {getDarkenColor, getOpacities, themeVars} from "../design-system";
+import {
+  getDarkenColor,
+  getEnumBackgroundColor,
+  getIconColor,
+  getOpacities,
+  getThemeValue,
+  themeVars,
+} from "../design-system";
 import {ButtonVariant} from "./base-button";
+import {ThemeMode} from "../theme-settings";
 
-export const makeButtonColors = (color: string, variant: ButtonVariant) => {
-  if (variant === "solid") {
-    return {
-      "--fibery-button-color": color,
-      "--fibery-button-hover-color": getDarkenColor(color),
-      "--fibery-button-text-color": themeVars.buttonPrimaryTextColor,
-      "--fibery-button-text-active-color": themeVars.buttonPrimaryTextColor,
-      "--fibery-button-focus-color": getOpacities(color).opacity30,
-    };
-  }
-
-  return {
-    "--fibery-button-color": "transparent",
-    "--fibery-button-hover-color": getOpacities(color).opacity15,
-    "--fibery-button-text-color": color,
-    "--fibery-button-text-active-color": getOpacities(color).opacity80,
-    "--fibery-button-focus-color": getOpacities(color).opacity30,
+export const makeButtonColors = (color: string, variant: ButtonVariant, mode: ThemeMode = "light"): CSSProperties => {
+  switch (variant) {
+    case "solid":
+      return {
+        "--fibery-button-color": color,
+        "--fibery-button-hover-color": getDarkenColor(color),
+        "--fibery-button-text-color": themeVars.buttonPrimaryTextColor,
+        "--fibery-button-text-active-color": themeVars.buttonPrimaryTextColor,
+        "--fibery-button-focus-color": getOpacities(color).opacity30,
+      };
+    case "ghost":
+      return {
+        "--fibery-button-color": "transparent",
+        "--fibery-button-hover-color": getOpacities(color).opacity15,
+        "--fibery-button-text-color": color,
+        "--fibery-button-text-active-color": getOpacities(color).opacity80,
+        "--fibery-button-focus-color": getOpacities(color).opacity30,
+      };
+    case "outline":
+      return {
+        "--fibery-button-color": "transparent",
+        "--fibery-button-hover-color": getOpacities(color).opacity15,
+        "--fibery-button-text-color": color,
+        "--fibery-button-text-active-color": getOpacities(color).opacity80,
+        "--fibery-button-focus-color": getOpacities(color).opacity30,
+        "--fibery-button-border-color": getOpacities(color).opacity30,
+      };
+    default:
+    case "soft": {
+      const bgColor = getEnumBackgroundColor(mode, color) as string;
+      const textColor = getIconColor(mode, color) as string;
 
-    ...(variant === "outline"
-      ? {
-          "--fibery-button-border-color": getOpacities(color).opacity30,
-        }
-      : undefined),
-  } as CSSProperties;
+      return {
+        "--fibery-button-color": bgColor,
+        "--fibery-button-hover-color": getThemeValue(mode, {
+          light: getOpacities(color).opacity30,
+          dark: getOpacities(color).opacity45,
+        }),
+        "--fibery-button-text-color": textColor,
+        "--fibery-button-text-active-color": getOpacities(textColor).opacity80,
+        "--fibery-button-focus-color": getOpacities(color).opacity30,
+      };
+    }
+  }
 };

package/src/design-system.ts

@@ -632,6 +632,9 @@ export const themeColors = {
   colorBgEntityAvatarHover: [indigo.indigo3, indigoDark.indigo3],
   colorTextEntityAvatarDefault: [indigo.indigo8, indigoDark.indigo8],
   colorTextEntityAvatarHover: [indigo.indigo9, indigoDark.indigo9],
+
+  // Text editor
+  colorBgEditorImageZoomed: [getOpacities(slate.slate3).opacity90, getOpacities(slateDark.slate6).opacity90],
 } as const;
 
 type ThemeDefs = typeof themeColors;
@@ -919,14 +922,14 @@ export const layout = {
   viewSetupWidth: "30vw",
   viewSetupMinWidth: 380,
   inputHeight: 36, //TODO: merge input and item height?
-  timelineToolbarHeight: 60,
+  timelineToolbarHeight: 48,
   timelineLineHeight: 48,
   timelineGroupPadding: 0,
   timelineItemHeightRatio: 36 / 48,
   timelineHeaderHeight: 48,
   calendarEventHeight: 30,
   calendarHeaderHeight: 30,
-  calendarToolbarHeight: 60,
+  calendarToolbarHeight: 48,
   checkboxSize: 17,
   fakeBoardWidth: 260,
   fakeBoardHeight: 160,

package/src/emoji-picker/emoji-picker.tsx

@@ -18,7 +18,6 @@ export type EmojiPickerProps = {
   onAddCustomEmoji?: () => void;
   onSelect: (emoji: EmojiItem) => void;
   showSkinTones?: boolean;
-
   searchRef?: React.RefObject<HTMLInputElement>;
 };
 export const EmojiPicker: React.FC<EmojiPickerProps> = ({

package/src/emoji-picker/icon-emoji-picker.tsx

@@ -31,10 +31,13 @@ export type IconEmojiPickerProps = React.PropsWithChildren<{
   defaultTab?: TabKey;
   showColorPickerOnTabs?: TabKey[];
   color?: string;
+  emojiSize?: number;
   getHoverColor?: (color: string) => string | undefined;
 }>;
+
 export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
   onIconSelect,
+  emojiSize,
   onEmojiSelect,
   onColorSelect,
   onCreateClick,
@@ -48,6 +51,15 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
 }) => {
   return (
     <AntTabs
+      wrapClassName={css`
+        height: 100%;
+        & .ant-tabs,
+        & .ant-tabs-content,
+        & .ant-tabs-tabpane,
+        & .ant-tabs-content-holder {
+          height: 100%;
+        }
+      `}
       animated={false}
       destroyInactiveTabPane
       defaultActiveKey={defaultTab}
@@ -58,6 +70,7 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
           children: (
             <>
               <EmojiPicker
+                emojiSize={emojiSize}
                 color={color}
                 onColorSelect={showColorPickerOnTabs.includes("emojis") ? onColorSelect : undefined}
                 onCustomCategorySettings={onCustomEmojisSettings}

package/src/icons/ast/ArrowUpCircle.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const ArrowUpCircle: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M10 1.667a8.333 8.333 0 1 0 0 16.666 8.333 8.333 0 0 0 0-16.666Zm0 15a6.667 6.667 0 1 1 0-13.334 6.667 6.667 0 0 1 0 13.334Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M11.97 9.53a.75.75 0 1 0 1.06-1.06l-2.5-2.5a.75.75 0 0 0-1.06 0l-2.5 2.5a.75.75 0 0 0 1.06 1.06l1.22-1.22v5.19a.75.75 0 0 0 1.5 0V8.31l1.22 1.22Z"},"children":[]}],"metadata":""}]},"name":"arrow-up-circle"};
+
+export default ArrowUpCircle;

package/src/icons/ast/BringForward.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const BringForward: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M10 17.75a.75.75 0 0 1-.75-.75v-5.856l-1.22 1.22a.75.75 0 1 1-1.06-1.061l2.5-2.5a.75.75 0 0 1 1.06 0l2.5 2.5a.75.75 0 0 1-1.06 1.06l-1.22-1.219V17a.75.75 0 0 1-.75.75ZM17.75 3a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h14a.75.75 0 0 1 .75.75ZM16 6.75a.75.75 0 0 0 0-1.5h-.75a.75.75 0 0 0 0 1.5H16ZM12.25 6.75a.75.75 0 0 0 0-1.5h-.75a.75.75 0 0 0 0 1.5h.75ZM8.5 6.75a.75.75 0 0 0 0-1.5h-.75a.75.75 0 0 0 0 1.5h.75ZM4.75 6.75a.75.75 0 0 0 0-1.5H4a.75.75 0 0 0 0 1.5h.75Z"},"children":[]}],"metadata":""}]},"name":"bring-forward"};
+
+export default BringForward;

package/src/icons/ast/BringToFront.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const BringToFront: 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.25 17a.75.75 0 0 0 1.5 0V7.977l1.22 1.22a.75.75 0 1 0 1.06-1.06l-2.5-2.5a.75.75 0 0 0-1.06 0l-2.5 2.5a.75.75 0 1 0 1.06 1.06l1.22-1.22V17ZM17 3.75a.75.75 0 0 0 0-1.5H3a.75.75 0 0 0 0 1.5h14Z"},"children":[]}],"metadata":""}]},"name":"bring-to-front"};
+
+export default BringToFront;

package/src/icons/ast/Create.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const Create: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"clipRule":"evenodd","d":"M4.25 2A2.25 2.25 0 0 0 2 4.25v11.5A2.25 2.25 0 0 0 4.25 18h11.5A2.25 2.25 0 0 0 18 15.75v-6a.75.75 0 0 0-1.5 0v6a.75.75 0 0 1-.75.75H4.25a.75.75 0 0 1-.75-.75V4.25a.75.75 0 0 1 .75-.75h6a.75.75 0 0 0 0-1.5h-6Zm9.675.7A2.387 2.387 0 0 1 17.3 6.074l-5.727 5.727a.676.676 0 0 1-.478.198H8.838A.838.838 0 0 1 8 11.162V8.904c0-.18.071-.351.198-.478l5.727-5.727Zm2.42.956a1.035 1.035 0 0 0-1.464 0l-.224.224 1.463 1.463.224-.224a1.035 1.035 0 0 0 0-1.463ZM9.352 9.184v1.464h1.463l4.462-4.463-1.463-1.463-4.463 4.462Z"},"children":[]}],"metadata":""}]},"name":"create"};
+
+export default Create;

package/src/icons/ast/EntityMerge.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const EntityMerge: 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":"M13.03 5.22a.75.75 0 1 1-1.06 1.06l-1.22-1.22v4.596a12.667 12.667 0 0 0 5.585 5.509.75.75 0 1 1-.67 1.341A14.167 14.167 0 0 1 10 11.364a14.167 14.167 0 0 1-5.665 5.142.75.75 0 0 1-.67-1.341c2.399-1.2 4.354-3.13 5.585-5.51V5.062L8.03 6.28A.75.75 0 0 1 6.97 5.22l2.5-2.5a.75.75 0 0 1 1.06 0l2.5 2.5Z","fill":"currentColor"},"children":[]}],"metadata":""}]},"name":"entity-merge"};
+
+export default EntityMerge;

package/src/icons/ast/GlobeSimple.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const GlobeSimple: 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":"M2.537 9.25h3.064c.023-.397.068-.787.131-1.168.356-2.137 1.303-3.967 2.342-5.332a7.506 7.506 0 0 0-5.537 6.5ZM10 2.795c-1.16 1.22-2.394 3.17-2.788 5.534-.05.3-.086.607-.108.921h5.792a9.458 9.458 0 0 0-.108-.921C12.395 5.965 11.16 4.016 10 2.795Zm2.876 7.955H7.124c.184 1.948 1.002 4.107 2.876 6.36 1.874-2.253 2.692-4.412 2.876-6.36Zm-4.641 6.541c-1.678-2.263-2.45-4.482-2.616-6.541H2.537a7.506 7.506 0 0 0 5.698 6.541Zm3.53 0c1.678-2.263 2.45-4.482 2.616-6.541h3.082a7.506 7.506 0 0 1-5.698 6.541Zm5.698-8.041h-3.064a10.976 10.976 0 0 0-.131-1.168c-.356-2.137-1.303-3.967-2.342-5.332a7.506 7.506 0 0 1 5.537 6.5ZM1 10a9 9 0 1 1 18 0 9 9 0 0 1-18 0Z"},"children":[]}],"metadata":""}]},"name":"globe-simple"};
+const GlobeSimple: 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.669 9.25h2.436c.022-.313.058-.621.108-.923.29-1.74 1.028-3.245 1.862-4.406A6.381 6.381 0 0 0 3.669 9.25ZM10 3.927c-.968 1.046-1.98 2.679-2.307 4.646-.037.221-.065.447-.084.677h4.782a8.089 8.089 0 0 0-.084-.677c-.328-1.967-1.339-3.6-2.307-4.646Zm2.37 6.823H7.63c.173 1.605.855 3.377 2.37 5.23 1.515-1.853 2.197-3.625 2.37-5.23Zm-4.146 5.374c-1.32-1.854-1.947-3.674-2.102-5.374H3.67a6.381 6.381 0 0 0 4.555 5.374Zm3.552 0c1.32-1.854 1.947-3.674 2.102-5.374h2.453a6.381 6.381 0 0 1-4.555 5.374Zm4.555-6.874h-2.436a9.586 9.586 0 0 0-.108-.923c-.29-1.74-1.028-3.245-1.862-4.406a6.381 6.381 0 0 1 4.406 5.329ZM2.125 10a7.875 7.875 0 1 1 15.75 0 7.875 7.875 0 0 1-15.75 0Z"},"children":[]}],"metadata":""}]},"name":"globe-simple"};
 
 export default GlobeSimple;

package/src/icons/ast/LoupeZoom.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const LoupeZoom: 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":"M13.128 14.32a7.085 7.085 0 1 1 1.182-1.18l3.78 3.769a.835.835 0 1 1-1.18 1.182l-3.782-3.77ZM8.75 3.335a5.415 5.415 0 1 0 0 10.83 5.415 5.415 0 0 0 0-10.83Z"},"children":[]}],"metadata":""}]},"name":"loupe-zoom"};
+
+export default LoupeZoom;

package/src/icons/ast/LoupeZoomIn.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const LoupeZoomIn: 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":"M8.75 15.835a7.055 7.055 0 0 0 4.378-1.515l3.782 3.771a.835.835 0 0 0 1.18-1.182l-3.78-3.768a7.085 7.085 0 1 0-5.56 2.694ZM3.335 8.75a5.415 5.415 0 1 1 10.83 0 5.415 5.415 0 0 1-10.83 0ZM9.55 6.5a.75.75 0 1 0-1.5 0v1.55H6.5a.75.75 0 1 0 0 1.5h1.55V11a.75.75 0 0 0 1.5 0V9.55H11a.75.75 0 0 0 0-1.5H9.55V6.5Z"},"children":[]}],"metadata":""}]},"name":"loupe-zoom-in"};
+
+export default LoupeZoomIn;

package/src/icons/ast/LoupeZoomOut.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const LoupeZoomOut: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M6.5 8.05a.75.75 0 1 0 0 1.5H11a.75.75 0 0 0 0-1.5H6.5Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M8.75 15.835a7.055 7.055 0 0 0 4.378-1.515l3.782 3.771a.835.835 0 0 0 1.18-1.182l-3.78-3.768a7.085 7.085 0 1 0-5.56 2.694ZM3.335 8.75a5.415 5.415 0 1 1 10.83 0 5.415 5.415 0 0 1-10.83 0Z"},"children":[]}],"metadata":""}]},"name":"loupe-zoom-out"};
+
+export default LoupeZoomOut;

package/src/icons/ast/SendBackward.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const SendBackward: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M10 2.25a.75.75 0 0 1 .75.75v5.856l1.22-1.22a.75.75 0 1 1 1.06 1.061l-2.5 2.5a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 1 1 1.06-1.06l1.22 1.219V3a.75.75 0 0 1 .75-.75ZM2.25 17a.75.75 0 0 1 .75-.75h14a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75ZM4 13.25a.75.75 0 0 0 0 1.5h.75a.75.75 0 0 0 0-1.5H4ZM7.75 13.25a.75.75 0 0 0 0 1.5h.75a.75.75 0 0 0 0-1.5h-.75ZM11.5 13.25a.75.75 0 0 0 0 1.5h.75a.75.75 0 0 0 0-1.5h-.75ZM15.25 13.25a.75.75 0 0 0 0 1.5H16a.75.75 0 0 0 0-1.5h-.75Z"},"children":[]}],"metadata":""}]},"name":"send-backward"};
+
+export default SendBackward;

package/src/icons/ast/SendToBack.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const SendToBack: 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":"M10 2.25a.75.75 0 0 1 .75.75v9.023l1.22-1.22a.75.75 0 1 1 1.06 1.06l-2.5 2.5a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 1 1 1.06-1.06l1.22 1.22V3a.75.75 0 0 1 .75-.75ZM2.25 17a.75.75 0 0 1 .75-.75h14a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75Z"},"children":[]}],"metadata":""}]},"name":"send-to-back"};
+
+export default SendToBack;

package/src/icons/ast/SlideMenu.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const SlideMenu: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20},"children":[{"type":"element","tagName":"path","properties":{"d":"M6.331 7.877H4.984c-.233 0-.384-.143-.384-.368V6.176c0-.233.143-.376.384-.376H6.33c.226 0 .369.143.369.376V7.51c0 .225-.15.368-.369.368ZM6.331 10.956H4.984c-.233 0-.384-.15-.384-.369v-1.34c0-.225.143-.376.384-.376H6.33c.226 0 .369.15.369.376v1.34c0 .218-.15.369-.369.369ZM4.984 14.02H6.33c.218 0 .369-.144.369-.37v-1.332c0-.226-.143-.376-.369-.376H4.984c-.241 0-.384.15-.384.376v1.333c0 .225.15.368.384.368Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M15.447 17H4.553C2.872 17 2 16.136 2 14.492V5.508C2 3.857 2.872 3 4.553 3h10.894C17.128 3 18 3.857 18 5.508v8.984C18 16.143 17.128 17 15.447 17Zm-.093-1.513c.724 0 1.12-.378 1.12-1.127V5.633c0-.749-.396-1.12-1.12-1.12H9.12v10.975h6.233ZM4.646 4.513c-.716 0-1.12.37-1.12 1.119v8.729c0 .748.404 1.126 1.12 1.126h3.028V4.513H4.646Z"},"children":[]}],"metadata":""}]},"name":"slide-menu"};
+const SlideMenu: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M7.25 9.5a.75.75 0 0 0-.75-.75h-1a.75.75 0 0 0 0 1.5h1a.75.75 0 0 0 .75-.75ZM6.5 6.25a.75.75 0 0 1 0 1.5h-1a.75.75 0 0 1 0-1.5h1Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M15.25 3A2.75 2.75 0 0 1 18 5.75v8.5A2.75 2.75 0 0 1 15.25 17H4.75A2.75 2.75 0 0 1 2 14.25v-8.5A2.75 2.75 0 0 1 4.75 3h10.5Zm1.25 2.75c0-.69-.56-1.25-1.25-1.25h-5.5v11h5.5c.69 0 1.25-.56 1.25-1.25v-8.5ZM8.25 15.5v-11h-3.5c-.69 0-1.25.56-1.25 1.25v8.5c0 .69.56 1.25 1.25 1.25h3.5Z"},"children":[]}],"metadata":""}]},"name":"slide-menu"};
 
 export default SlideMenu;

package/src/icons/ast/SlideMenuClose.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const SlideMenuClose: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M14.161 8.828a.7.7 0 1 0-.99-.99l-1.666 1.667a.7.7 0 0 0 0 .99l1.666 1.667a.7.7 0 1 0 .99-.99L12.99 10l1.171-1.172Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M18 5.75A2.75 2.75 0 0 0 15.25 3H4.75A2.75 2.75 0 0 0 2 5.75v8.5A2.75 2.75 0 0 0 4.75 17h10.5A2.75 2.75 0 0 0 18 14.25v-8.5ZM15.25 4.5c.69 0 1.25.56 1.25 1.25v8.5c0 .69-.56 1.25-1.25 1.25h-6.5v-11h6.5Zm-8 0v11h-2.5c-.69 0-1.25-.56-1.25-1.25v-8.5c0-.69.56-1.25 1.25-1.25h2.5Z"},"children":[]}],"metadata":""}]},"name":"slide-menu-close"};
+
+export default SlideMenuClose;

package/src/icons/ast/SlideMenuOpen.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const SlideMenuOpen: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M11.505 8.828a.7.7 0 1 1 .99-.99l1.666 1.667a.7.7 0 0 1 0 .99l-1.666 1.667a.7.7 0 1 1-.99-.99L12.676 10l-1.171-1.172Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M18 5.75A2.75 2.75 0 0 0 15.25 3H4.75A2.75 2.75 0 0 0 2 5.75v8.5A2.75 2.75 0 0 0 4.75 17h10.5A2.75 2.75 0 0 0 18 14.25v-8.5ZM15.25 4.5c.69 0 1.25.56 1.25 1.25v8.5c0 .69-.56 1.25-1.25 1.25h-6.5v-11h6.5Zm-8 0v11h-2.5c-.69 0-1.25-.56-1.25-1.25v-8.5c0-.69.56-1.25 1.25-1.25h2.5Z"},"children":[]}],"metadata":""}]},"name":"slide-menu-open"};
+
+export default SlideMenuOpen;

package/src/icons/ast/index.tsx

@@ -27,6 +27,7 @@ export { default as ArrowForward } from './ArrowForward';
 export { default as ArrowLeft } from './ArrowLeft';
 export { default as ArrowRight } from './ArrowRight';
 export { default as ArrowTop } from './ArrowTop';
+export { default as ArrowUpCircle } from './ArrowUpCircle';
 export { default as AskForInput } from './AskForInput';
 export { default as Atom } from './Atom';
 export { default as AutomationsCancelled } from './AutomationsCancelled';
@@ -44,6 +45,8 @@ export { default as BellOff } from './BellOff';
 export { default as BellRinging } from './BellRinging';
 export { default as BellX } from './BellX';
 export { default as Bolt } from './Bolt';
+export { default as BringForward } from './BringForward';
+export { default as BringToFront } from './BringToFront';
 export { default as Cards } from './Cards';
 export { default as ChatAi } from './ChatAi';
 export { default as Chat } from './Chat';
@@ -63,6 +66,7 @@ export { default as Columns2 } from './Columns2';
 export { default as Columns4 } from './Columns4';
 export { default as Columns } from './Columns';
 export { default as Copy } from './Copy';
+export { default as Create } from './Create';
 export { default as DatabaseStroke } from './DatabaseStroke';
 export { default as Database } from './Database';
 export { default as Delete } from './Delete';
@@ -76,6 +80,7 @@ export { default as Duplicate } from './Duplicate';
 export { default as DynamicFilterValue } from './DynamicFilterValue';
 export { default as Email } from './Email';
 export { default as EmojiDelete } from './EmojiDelete';
+export { default as EntityMerge } from './EntityMerge';
 export { default as Export } from './Export';
 export { default as ExtensionAssignments } from './ExtensionAssignments';
 export { default as ExtensionAvatar } from './ExtensionAvatar';
@@ -138,6 +143,9 @@ export { default as LineDivider } from './LineDivider';
 export { default as Link } from './Link';
 export { default as Lock } from './Lock';
 export { default as Loom } from './Loom';
+export { default as LoupeZoomIn } from './LoupeZoomIn';
+export { default as LoupeZoomOut } from './LoupeZoomOut';
+export { default as LoupeZoom } from './LoupeZoom';
 export { default as MapMode } from './MapMode';
 export { default as MenuCollapser } from './MenuCollapser';
 export { default as MessagePlusSquare } from './MessagePlusSquare';
@@ -233,6 +241,8 @@ export { default as Search } from './Search';
 export { default as SelfReferenceOff } from './SelfReferenceOff';
 export { default as SelfReferenceOn } from './SelfReferenceOn';
 export { default as SendArrow } from './SendArrow';
+export { default as SendBackward } from './SendBackward';
+export { default as SendToBack } from './SendToBack';
 export { default as Settings } from './Settings';
 export { default as Share } from './Share';
 export { default as Shared } from './Shared';
@@ -243,7 +253,8 @@ export { default as Sidebar } from './Sidebar';
 export { default as SimpleCompass } from './SimpleCompass';
 export { default as SlackIcon } from './SlackIcon';
 export { default as Slack } from './Slack';
-export { default as SlideMenuOpened } from './SlideMenuOpened';
+export { default as SlideMenuClose } from './SlideMenuClose';
+export { default as SlideMenuOpen } from './SlideMenuOpen';
 export { default as SlideMenu } from './SlideMenu';
 export { default as SmartFolder } from './SmartFolder';
 export { default as SortOnBottom } from './SortOnBottom';

package/src/icons/react/{SlideMenuOpened.tsx → ArrowUpCircle.tsx}

@@ -1,13 +1,13 @@
 // This icon file is generated automatically.
 
 import {forwardRef} from 'react';
-import SlideMenuOpenedSvg from '../ast/SlideMenuOpened';
+import ArrowUpCircleSvg from '../ast/ArrowUpCircle';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const SlideMenuOpened = forwardRef<SVGSVGElement, IconBaseProps>(function SlideMenuOpened(
+const ArrowUpCircle = forwardRef<SVGSVGElement, IconBaseProps>(function ArrowUpCircle(
   props: IconBaseProps,
   ref: React.Ref<SVGSVGElement>
-) {return <Icon {...props} className={props.className} ref={ref} icon={SlideMenuOpenedSvg} />});
+) {return <Icon {...props} className={props.className} ref={ref} icon={ArrowUpCircleSvg} />});
 
-export default SlideMenuOpened;
+export default ArrowUpCircle;

package/src/icons/react/BringForward.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import BringForwardSvg from '../ast/BringForward';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const BringForward = forwardRef<SVGSVGElement, IconBaseProps>(function BringForward(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={BringForwardSvg} />});
+
+export default BringForward;

package/src/icons/react/BringToFront.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import BringToFrontSvg from '../ast/BringToFront';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const BringToFront = forwardRef<SVGSVGElement, IconBaseProps>(function BringToFront(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={BringToFrontSvg} />});
+
+export default BringToFront;

package/src/icons/react/Create.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import CreateSvg from '../ast/Create';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const Create = forwardRef<SVGSVGElement, IconBaseProps>(function Create(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={CreateSvg} />});
+
+export default Create;

package/src/icons/react/EntityMerge.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import EntityMergeSvg from '../ast/EntityMerge';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const EntityMerge = forwardRef<SVGSVGElement, IconBaseProps>(function EntityMerge(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={EntityMergeSvg} />});
+
+export default EntityMerge;

package/src/icons/react/LoupeZoom.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import LoupeZoomSvg from '../ast/LoupeZoom';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const LoupeZoom = forwardRef<SVGSVGElement, IconBaseProps>(function LoupeZoom(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={LoupeZoomSvg} />});
+
+export default LoupeZoom;

package/src/icons/react/LoupeZoomIn.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import LoupeZoomInSvg from '../ast/LoupeZoomIn';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const LoupeZoomIn = forwardRef<SVGSVGElement, IconBaseProps>(function LoupeZoomIn(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={LoupeZoomInSvg} />});
+
+export default LoupeZoomIn;

package/src/icons/react/LoupeZoomOut.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import LoupeZoomOutSvg from '../ast/LoupeZoomOut';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const LoupeZoomOut = forwardRef<SVGSVGElement, IconBaseProps>(function LoupeZoomOut(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={LoupeZoomOutSvg} />});
+
+export default LoupeZoomOut;

package/src/icons/react/SendBackward.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import SendBackwardSvg from '../ast/SendBackward';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const SendBackward = forwardRef<SVGSVGElement, IconBaseProps>(function SendBackward(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={SendBackwardSvg} />});
+
+export default SendBackward;

package/src/icons/react/SendToBack.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import SendToBackSvg from '../ast/SendToBack';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const SendToBack = forwardRef<SVGSVGElement, IconBaseProps>(function SendToBack(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={SendToBackSvg} />});
+
+export default SendToBack;

package/src/icons/react/SlideMenuClose.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import SlideMenuCloseSvg from '../ast/SlideMenuClose';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const SlideMenuClose = forwardRef<SVGSVGElement, IconBaseProps>(function SlideMenuClose(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={SlideMenuCloseSvg} />});
+
+export default SlideMenuClose;

package/src/icons/react/SlideMenuOpen.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import SlideMenuOpenSvg from '../ast/SlideMenuOpen';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const SlideMenuOpen = forwardRef<SVGSVGElement, IconBaseProps>(function SlideMenuOpen(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={SlideMenuOpenSvg} />});
+
+export default SlideMenuOpen;

package/src/icons/react/index.tsx

@@ -27,6 +27,7 @@ export { default as ArrowForward } from './ArrowForward';
 export { default as ArrowLeft } from './ArrowLeft';
 export { default as ArrowRight } from './ArrowRight';
 export { default as ArrowTop } from './ArrowTop';
+export { default as ArrowUpCircle } from './ArrowUpCircle';
 export { default as AskForInput } from './AskForInput';
 export { default as Atom } from './Atom';
 export { default as AutomationsCancelled } from './AutomationsCancelled';
@@ -44,6 +45,8 @@ export { default as BellOff } from './BellOff';
 export { default as BellRinging } from './BellRinging';
 export { default as BellX } from './BellX';
 export { default as Bolt } from './Bolt';
+export { default as BringForward } from './BringForward';
+export { default as BringToFront } from './BringToFront';
 export { default as Cards } from './Cards';
 export { default as ChatAi } from './ChatAi';
 export { default as Chat } from './Chat';
@@ -63,6 +66,7 @@ export { default as Columns2 } from './Columns2';
 export { default as Columns4 } from './Columns4';
 export { default as Columns } from './Columns';
 export { default as Copy } from './Copy';
+export { default as Create } from './Create';
 export { default as DatabaseStroke } from './DatabaseStroke';
 export { default as Database } from './Database';
 export { default as Delete } from './Delete';
@@ -76,6 +80,7 @@ export { default as Duplicate } from './Duplicate';
 export { default as DynamicFilterValue } from './DynamicFilterValue';
 export { default as Email } from './Email';
 export { default as EmojiDelete } from './EmojiDelete';
+export { default as EntityMerge } from './EntityMerge';
 export { default as Export } from './Export';
 export { default as ExtensionAssignments } from './ExtensionAssignments';
 export { default as ExtensionAvatar } from './ExtensionAvatar';
@@ -138,6 +143,9 @@ export { default as LineDivider } from './LineDivider';
 export { default as Link } from './Link';
 export { default as Lock } from './Lock';
 export { default as Loom } from './Loom';
+export { default as LoupeZoomIn } from './LoupeZoomIn';
+export { default as LoupeZoomOut } from './LoupeZoomOut';
+export { default as LoupeZoom } from './LoupeZoom';
 export { default as MapMode } from './MapMode';
 export { default as MenuCollapser } from './MenuCollapser';
 export { default as MessagePlusSquare } from './MessagePlusSquare';
@@ -233,6 +241,8 @@ export { default as Search } from './Search';
 export { default as SelfReferenceOff } from './SelfReferenceOff';
 export { default as SelfReferenceOn } from './SelfReferenceOn';
 export { default as SendArrow } from './SendArrow';
+export { default as SendBackward } from './SendBackward';
+export { default as SendToBack } from './SendToBack';
 export { default as Settings } from './Settings';
 export { default as Share } from './Share';
 export { default as Shared } from './Shared';
@@ -243,7 +253,8 @@ export { default as Sidebar } from './Sidebar';
 export { default as SimpleCompass } from './SimpleCompass';
 export { default as SlackIcon } from './SlackIcon';
 export { default as Slack } from './Slack';
-export { default as SlideMenuOpened } from './SlideMenuOpened';
+export { default as SlideMenuClose } from './SlideMenuClose';
+export { default as SlideMenuOpen } from './SlideMenuOpen';
 export { default as SlideMenu } from './SlideMenu';
 export { default as SmartFolder } from './SmartFolder';
 export { default as SortOnBottom } from './SortOnBottom';

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

@@ -65,7 +65,7 @@ const mobileClassName = css`
 `;
 
 const valueClassName = css`
-  border-radius: ${border.radius4}px;
+  border-radius: ${border.radius6}px;
 
   &:focus {
     outline: none;
@@ -307,7 +307,8 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
 
   const onTriggerKeyDown: React.KeyboardEventHandler = useCallback(
     (event) => {
-      if ((event.key === "Enter" || event.key === " ") && !visible) {
+      const cmdKeyPressed = event.metaKey || event.ctrlKey;
+      if (((event.key === "Enter" && !cmdKeyPressed) || event.key === " ") && !visible) {
         event.preventDefault();
         onShow();
       }

package/src/toast/toast-queue.ts

@@ -3,7 +3,7 @@ import type {ToastProps} from "./toast";
 
 export type AddToastProps = Pick<
   ToastProps,
-  "type" | "title" | "subTitle" | "icon" | "action" | "duration" | "open"
+  "type" | "title" | "subTitle" | "icon" | "action" | "duration" | "open" | "dismissable"
 > & {
   id?: string;
 };

package/src/toggle.tsx

@@ -80,7 +80,16 @@ const Circle = styled.div<{containerSize: number}>`
   transition: transform ${transition};
 `;
 
-interface ToggleProps extends Omit<ComponentProps<"input">, "value"> {
+export type ToggleSize = "small" | "medium" | "large" | "extra-large";
+
+const toggleSize = {
+  small: 14,
+  medium: 16,
+  large: 18,
+  "extra-large": 20,
+} as const;
+
+type ToggleProps = Omit<ComponentProps<"input">, "value" | "size"> & {
   value?: boolean;
   label?: ReactNode;
   labelTitle?: string;
@@ -89,7 +98,8 @@ interface ToggleProps extends Omit<ComponentProps<"input">, "value"> {
   labelPosition?: "first" | "last";
   wrapperClassName?: string;
   pending?: boolean;
-}
+  size?: ToggleSize;
+};
 
 export const Toggle: FC<ToggleProps> = ({
   value,
@@ -98,7 +108,7 @@ export const Toggle: FC<ToggleProps> = ({
   pending,
   disabled = false,
   backgroundColor,
-  size = 16,
+  size = "medium",
   onChange,
   labelPosition = "last",
   labelMutedWhenDisabled = true,
@@ -106,11 +116,12 @@ export const Toggle: FC<ToggleProps> = ({
   wrapperClassName,
   ...rest
 }) => {
-  const width = size * 1.75;
+  const height = toggleSize[size];
+  const width = height * 1.75;
   const outlineColor = getOutlineColor(backgroundColor);
 
   const circleTransformStyle = {
-    transform: `translateX(${value ? width - size : 0}px)`,
+    transform: `translateX(${value ? width - height : 0}px)`,
   };
 
   return (
@@ -138,14 +149,14 @@ export const Toggle: FC<ToggleProps> = ({
       {pending && <SpinnerIcon />}
       {!pending && (
         <CircleContainer
-          containerSize={size}
+          containerSize={height}
           containerWidth={width}
           backgroundColor={backgroundColor}
           disabled={disabled}
         >
-          <Circle containerSize={size} style={circleTransformStyle} />
+          <Circle containerSize={height} style={circleTransformStyle} />
           <Input
-            containerSize={size}
+            containerSize={height}
             containerWidth={width}
             outlineColor={outlineColor}
             onChange={onChange}

package/src/tooltip.tsx

@@ -2,6 +2,7 @@ import {css, cx} from "@linaria/core";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import {forwardRef, type ReactNode, type SyntheticEvent} from "react";
 import {border, fontWeight, lineHeight, space, themeVars, tooltipDelay} from "./design-system";
+import {ShortcutBadge} from "./shortcut-badge";
 
 const preventDefaultAndStopPropagation = (e: SyntheticEvent) => {
   e.preventDefault();
@@ -82,10 +83,15 @@ export const TooltipContent = ({title, shortcut}: {title: string; shortcut?: str
       display: flex;
       flex-direction: column;
       align-items: center;
+      gap: ${space.s4}px;
     `}
   >
     <TooltipTitle>{title}</TooltipTitle>
-    {shortcut ? <TooltipDescription>{shortcut}</TooltipDescription> : null}
+    {shortcut ? (
+      <TooltipDescription>
+        <ShortcutBadge shortcut={shortcut} />
+      </TooltipDescription>
+    ) : null}
   </div>
 );
 

package/src/icons/ast/SlideMenuOpened.ts

@@ -1,8 +0,0 @@
-
-// This icon file is generated automatically.
-
-import { IconDefinition } from '../types';
-
-const SlideMenuOpened: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M4.553 17h10.894C17.128 17 18 16.143 18 14.492V5.508C18 3.857 17.128 3 15.447 3H4.553C2.872 3 2 3.857 2 5.508v8.984C2 16.136 2.872 17 4.553 17Zm11.922-2.64c0 .75-.397 1.127-1.121 1.127H9.12V4.513h6.233c.724 0 1.12.37 1.12 1.119v8.729ZM6.33 7.878H4.984c-.233 0-.384-.143-.384-.368V6.176c0-.233.143-.376.384-.376H6.33c.226 0 .369.143.369.376V7.51c0 .225-.15.368-.369.368Zm0 3.079H4.984c-.233 0-.384-.15-.384-.369v-1.34c0-.225.143-.376.384-.376H6.33c.226 0 .369.15.369.376v1.34c0 .218-.15.369-.369.369Zm0 3.063H4.984c-.233 0-.384-.143-.384-.368v-1.333c0-.226.143-.376.384-.376H6.33c.226 0 .369.15.369.376v1.333c0 .225-.15.368-.369.368Z"},"children":[]}],"metadata":""}]},"name":"slide-menu-opened"};
-
-export default SlideMenuOpened;