@fibery/ui-kit 1.34.3 → 1.34.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.34.3",
+  "version": "1.34.5",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -28,10 +28,12 @@
     "src/a11y-color.ts",
     "src/integration-compact-info-button.tsx",
     "src/dropdown-menu",
-    "src/shortcut-badge",
-    "src/tsfixme",
+    "src/shortcut-badge.tsx",
+    "src/tsfixme.ts",
     "src/toggle.tsx",
-    "src/toggle-on-off.tsx"
+    "src/toggle-on-off.tsx",
+    "src/use-is-support-hardware-keyboard.ts",
+    "src/use-is-phone.ts"
   ],
   "license": "UNLICENSED",
   "dependencies": {
@@ -74,9 +76,9 @@
     "screenfull": "6.0.1",
     "tabbable": "5.2.1",
     "ua-parser-js": "1.0.39",
-    "@fibery/helpers": "1.3.0",
     "@fibery/react": "1.4.0",
-    "@fibery/emoji-data": "2.6.0"
+    "@fibery/emoji-data": "2.6.0",
+    "@fibery/helpers": "1.3.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -110,8 +112,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-sub-menu.tsx

@@ -11,7 +11,7 @@ const subTriggerClass = css`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: ${space.s8}px;
+  gap: ${space.s6}px;
 `;
 
 const arrowClass = css`

package/src/design-system.ts

@@ -22,7 +22,7 @@ import {
 } from "./palette";
 import {ThemeMode} from "./theme-settings";
 
-export const typeSizes = [26, 24, 18, 16, 14, 12, 10, 8] as const;
+export const typeSizes = [28, 24, 18, 16, 14, 12, 10, 8] as const;
 
 export const fontWeight = {
   light: 300,
@@ -58,6 +58,31 @@ export const opacity = {
   opacity0: 0,
 } as const;
 
+export const cardTypeColors = [
+  "#4A4A4A",
+  "#6A849B",
+  "#99A2AB",
+  "#D40915",
+  "#E72065",
+  "#9C2BAF",
+  "#673DB6",
+  "#3E53B4",
+  "#2978FB",
+  "#199EE3",
+  "#1FBED3",
+  "#159789",
+  "#4FAF54",
+  "#8EC351",
+  "#FBA32F",
+  "#FC551F",
+  "#B04E31",
+] as const;
+
+const swatches = {
+  "gray-light": cardTypeColors[1],
+  yellow: cardTypeColors[14],
+};
+
 // switch to chroma.valid once we start using 2.0.1
 const makeChromaColor = (color: string) => {
   try {
@@ -268,7 +293,8 @@ export const themeColors = {
   buttonPrimaryColor: [indigo.indigo9, indigoDark.indigo9],
   buttonColor: [slate.slate10, slateDark.slate10],
   buttonPrimaryTextColor: [slate.slate2, slate.slate6],
-  checkboxColor: [slate.slate10, slateDark.slate10],
+  checkboxColor: [slate.slate11, slateDark.slate11],
+  colorBorderBlockQuote: [slate.slate11, slateDark.slate11],
 
   // Actions menu
   colorBgActionsMenu: [getOpacities(whiteA.whiteA0).opacity85, getOpacities(slateDark.slate4).opacity85],
@@ -428,10 +454,10 @@ export const themeColors = {
   allowedDropColor: [getOpacities(slate.slate3).opacity80, getOpacities(slateDark.slate3).opacity80],
   relationViewBgColor: [slate.slate2, slateDark.slate3],
 
-  mySpaceIconColor: [blackA.blackA11, whiteA.whiteA11],
-  mySpaceIconBg: [getOpacities(blackA.blackA11).opacity20, getOpacities(whiteA.whiteA11).opacity20],
-  favoritesIconColor: [yellow.yellow8, yellowDark.yellow11],
-  favoritesIconBg: [getOpacities(yellow.yellow8).opacity20, getOpacities(yellowDark.yellow11).opacity20],
+  mySpaceIconColor: [swatches["gray-light"], swatches["gray-light"]],
+  mySpaceIconBg: [getOpacities(swatches["gray-light"]).opacity20, getOpacities(swatches["gray-light"]).opacity20],
+  favoritesIconColor: [swatches.yellow, swatches.yellow],
+  favoritesIconBg: [getOpacities(swatches.yellow).opacity20, getOpacities(swatches.yellow).opacity20],
 
   // Unit
   unitBg: [slate.slate3, slateDark.slate6],
@@ -634,6 +660,12 @@ export const themeColors = {
     }`,
   ],
   commentBubbleBg: [whiteA.whiteA0, slateDark.slate6],
+
+  // SegmentedControl
+  colorBgSegmentedControlDefault: [slate.slate3, slateDark.slate1],
+  colorBgSegmentedControlActive: [slate.slate1, slateDark.slate6],
+  colorBgSegmentedControlHover: [slate.slate5, slateDark.slate4],
+  colorBorderSegmentedControlDefault: [slate.slate6, slateDark.slate7],
 } as const;
 
 type ThemeDefs = typeof themeColors;
@@ -829,26 +861,6 @@ export const getIconColor = _.memoize(
   (themeMode, color) => `${themeMode}-${color}`
 );
 
-export const cardTypeColors = [
-  "#4A4A4A",
-  "#6A849B",
-  "#99A2AB",
-  "#D40915",
-  "#E72065",
-  "#9C2BAF",
-  "#673DB6",
-  "#3E53B4",
-  "#2978FB",
-  "#199EE3",
-  "#1FBED3",
-  "#159789",
-  "#4FAF54",
-  "#8EC351",
-  "#FBA32F",
-  "#FC551F",
-  "#B04E31",
-] as const;
-
 export const dropCursorColor = chroma(brandColors.blue).alpha(0.7).css();
 export const colors = {
   ...getTypeColors(brandColors.green, "light"),
@@ -866,6 +878,7 @@ export const space = {
   s0: 0,
   s1: 1,
   s2: 2,
+  s3: 3,
   s4: 4,
   s6: 6,
   s8: 8,
@@ -929,7 +942,7 @@ export const layout = {
   calendarEventHeight: 30,
   calendarHeaderHeight: 30,
   calendarToolbarHeight: 48,
-  checkboxSize: 17,
+  checkboxSize: 15,
   fakeBoardWidth: 260,
   fakeBoardHeight: 160,
   inlineInputHeight: 32,
@@ -956,7 +969,7 @@ export const lineHeight = {
   text: 1.6,
   regular: 1.5,
   narrow: 1.4,
-  heading: 1.25,
+  heading: 1.3,
   nowrap: 1,
 } as const;
 
@@ -1063,9 +1076,9 @@ export const textStyles = {
   heading1: {
     fontFamily,
     fontSize: typeSizes[0],
-    letterSpacing: "-0.003em",
+    letterSpacing: "-0.01em",
     lineHeight: lineHeight.heading,
-    fontWeight: fontWeight.semibold,
+    fontWeight: fontWeight.bold,
     color: themeVars.textColor,
   },
   heading2: {

package/src/icons/ast/AppearanceAuto.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const AppearanceAuto: 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.66 2.66a.66.66 0 1 0-1.32 0v1.468a.66.66 0 0 0 1.32 0V2.661ZM5.278 4.344a.66.66 0 0 0-.934.934l1.038 1.038a.66.66 0 0 0 .934-.934L5.277 4.343Zm10.38.934a.66.66 0 0 0-.934-.934l-1.038 1.038a.66.66 0 0 0 .934.934l1.038-1.038Zm-4.26 1.358A3.597 3.597 0 0 0 6.495 9.34H2.661a.66.66 0 1 0 0 1.322h14.467a.66.66 0 0 0 0-1.322h-3.55a3.593 3.593 0 0 0-2.18-2.704Zm.827 2.704a2.26 2.26 0 0 0-.58-.984 2.276 2.276 0 0 0-3.796.984h4.376ZM4 13a.66.66 0 0 1 .66-.66h10.468a.66.66 0 1 1 0 1.32H4.661A.66.66 0 0 1 4 13Zm2 3a.66.66 0 0 1 .66-.66h6.468a.66.66 0 1 1 0 1.32H6.661A.66.66 0 0 1 6 16Z"},"children":[]}],"metadata":""}]},"name":"appearance-auto"};
+
+export default AppearanceAuto;

package/src/icons/ast/AppearanceDark.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const AppearanceDark: 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.677 3.59a6.545 6.545 0 1 0 6.57 10.323A6.788 6.788 0 0 1 8.677 3.59Zm1.418-1.584A.728.728 0 0 0 9.998 2a8 8 0 1 0 7.39 11.07.727.727 0 0 0-.945-.953 5.334 5.334 0 0 1-5.632-8.85.727.727 0 0 0-.495-1.26h-.221Z"},"children":[]}],"metadata":""}]},"name":"appearance-dark"};
+
+export default AppearanceDark;

package/src/icons/ast/AppearanceLight.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const AppearanceLight: 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 2a.66.66 0 0 1 .66.66v1.468a.66.66 0 1 1-1.32 0V2.661A.66.66 0 0 1 10 2ZM4.343 4.343a.66.66 0 0 1 .934 0l1.038 1.038a.66.66 0 1 1-.934.934L4.343 5.277a.66.66 0 0 1 0-.934Zm11.314 0a.66.66 0 0 1 0 .934l-1.038 1.038a.66.66 0 0 1-.934-.934l1.038-1.038a.66.66 0 0 1 .934 0Zm-5.652 2.025a3.596 3.596 0 1 1 .062 7.191 3.596 3.596 0 0 1-.062-7.191Zm.893 1.49a2.275 2.275 0 1 0-1.723 4.212 2.275 2.275 0 0 0 1.723-4.212ZM2 10a.66.66 0 0 1 .66-.66h1.468a.66.66 0 0 1 0 1.32H2.661A.66.66 0 0 1 2 10Zm13.211 0a.66.66 0 0 1 .66-.66h1.468a.66.66 0 0 1 0 1.32h-1.467a.66.66 0 0 1-.661-.66Zm-8.896 3.685a.66.66 0 0 1 0 .934l-1.038 1.038a.66.66 0 1 1-.934-.934l1.038-1.038a.66.66 0 0 1 .934 0Zm7.37 0a.66.66 0 0 1 .934 0l1.038 1.038a.66.66 0 0 1-.934.934l-1.038-1.038a.66.66 0 0 1 0-.934ZM10 15.21a.66.66 0 0 1 .66.66v1.468a.66.66 0 1 1-1.32 0v-1.467a.66.66 0 0 1 .66-.661Z"},"children":[]}],"metadata":""}]},"name":"appearance-light"};
+
+export default AppearanceLight;

package/src/icons/ast/ArrowsRightLeft.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const ArrowsRightLeft: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20","fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"clipRule":"evenodd","d":"M3.223 13.386a.75.75 0 0 0 0 1.061l2.833 2.833a.75.75 0 0 0 1.061-1.06l-1.553-1.553H16.25a.75.75 0 0 0 0-1.5H5.564l1.553-1.553a.75.75 0 0 0-1.06-1.061l-2.834 2.833ZM3 6.083c0 .415.336.75.75.75h10.686l-1.553 1.553a.75.75 0 1 0 1.06 1.061l2.834-2.833a.75.75 0 0 0 0-1.061L13.944 2.72a.75.75 0 0 0-1.061 1.06l1.553 1.553H3.75a.75.75 0 0 0-.75.75Z"},"children":[]}],"metadata":""}]},"name":"arrows-right-left"};
+
+export default ArrowsRightLeft;

package/src/icons/ast/Logout.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const Logout: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M18.78 9.47a.75.75 0 0 1 0 1.06l-2.5 2.499a.75.75 0 0 1-1.06-1.06l1.22-1.22H8.75a.75.75 0 1 1 0-1.499h7.69l-1.22-1.219a.75.75 0 1 1 1.06-1.06l2.5 2.499Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M11.75 3.5a.75.75 0 0 1 .75.75V6A.75.75 0 0 0 14 6V4.25A2.25 2.25 0 0 0 11.75 2h-6.5A2.25 2.25 0 0 0 3 4.25v11.5A2.25 2.25 0 0 0 5.25 18h6.5A2.25 2.25 0 0 0 14 15.75V14a.75.75 0 0 0-1.5 0v1.75a.75.75 0 0 1-.75.75h-6.5a.75.75 0 0 1-.75-.75V4.25a.75.75 0 0 1 .75-.75h6.5Z"},"children":[]}],"metadata":""}]},"name":"logout"};
+
+export default Logout;

package/src/icons/ast/PrivateItems.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const PrivateItems: 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.506 2a3.65 3.65 0 1 1 0 7.3 3.65 3.65 0 0 1 0-7.3Zm0 1.5a2.15 2.15 0 1 1 0 4.3 2.15 2.15 0 0 1 0-4.3ZM4.518 16.23c.008.126.123.27.338.27h3.9a.75.75 0 0 1 0 1.5h-3.9c-.915 0-1.77-.67-1.835-1.672-.036-.556-.045-1.33.136-1.961.41-1.431 1.392-2.363 2.566-2.92.931-.442 1.994-.657 3.035-.723a.714.714 0 0 1 .75.726c0 .414-.336.747-.75.777-.87.065-1.7.247-2.392.575-.87.413-1.5 1.043-1.767 1.978-.105.367-.116.921-.081 1.45ZM12 13.417a2.417 2.417 0 1 1 3.167 2.298v1.535a.75.75 0 0 1-1.5 0v-1.535A2.418 2.418 0 0 1 12 13.417Zm2.417-.917a.917.917 0 1 0 0 1.833.917.917 0 0 0 0-1.833Z","fill":"currentColor"},"children":[]}],"metadata":""}]},"name":"private-items"};
+
+export default PrivateItems;

package/src/icons/ast/UnitsDate.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const UnitsDate: 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":"M14 3.6h1.6A2.4 2.4 0 0 1 18 6v9.6a2.4 2.4 0 0 1-2.4 2.4H4.4A2.4 2.4 0 0 1 2 15.6V6a2.4 2.4 0 0 1 2.4-2.4H6v-.8a.8.8 0 0 1 1.6 0v.8h4.8v-.8a.8.8 0 0 1 1.6 0v.8Zm2.166 12.566a.8.8 0 0 0 .234-.566V10H3.6v5.6a.8.8 0 0 0 .8.8h11.2a.8.8 0 0 0 .566-.234ZM3.6 8.4h12.8V6a.8.8 0 0 0-.8-.8H14V6a.8.8 0 0 1-1.6 0v-.8H7.6V6A.8.8 0 0 1 6 6v-.8H4.4a.8.8 0 0 0-.8.8v2.4ZM5.5 12a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-9Z","fill":"currentColor"},"children":[]}],"metadata":""}]},"name":"units-date"};
+
+export default UnitsDate;

package/src/icons/ast/WorkspaceMap.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const WorkspaceMap: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M8.103 10.903 4.4 14.613V13.5a.7.7 0 1 0-1.4 0v2.8a.7.7 0 0 0 .7.7h2.8a.7.7 0 1 0 0-1.4H5.387l3.71-3.703a.703.703 0 0 0-.994-.994ZM5.387 4.4H6.5a.7.7 0 1 0 0-1.4H3.7a.7.7 0 0 0-.7.7v2.8a.7.7 0 1 0 1.4 0V5.387l3.703 3.71a.7.7 0 0 0 .994 0 .7.7 0 0 0 0-.994L5.387 4.4ZM16.3 12.8a.7.7 0 0 0-.7.7v1.113l-3.703-3.71a.703.703 0 1 0-.994.994l3.71 3.703H13.5a.7.7 0 1 0 0 1.4h2.8a.7.7 0 0 0 .7-.7v-2.8a.7.7 0 0 0-.7-.7Zm.644-9.366A.7.7 0 0 0 16.3 3h-2.8a.7.7 0 1 0 0 1.4h1.113l-3.71 3.703a.7.7 0 0 0 0 .994.7.7 0 0 0 .994 0l3.703-3.71V6.5a.7.7 0 1 0 1.4 0V3.7a.7.7 0 0 0-.056-.266Z"},"children":[]}],"metadata":""}]},"name":"workspace-map"};
+
+export default WorkspaceMap;

package/src/icons/ast/index.tsx

@@ -18,6 +18,9 @@ export { default as AppTemplates } from './AppTemplates';
 export { default as AppWebhooks } from './AppWebhooks';
 export { default as AppWiki } from './AppWiki';
 export { default as App } from './App';
+export { default as AppearanceAuto } from './AppearanceAuto';
+export { default as AppearanceDark } from './AppearanceDark';
+export { default as AppearanceLight } from './AppearanceLight';
 export { default as ArrowBarLeft } from './ArrowBarLeft';
 export { default as ArrowBarRight } from './ArrowBarRight';
 export { default as ArrowBottom } from './ArrowBottom';
@@ -28,6 +31,7 @@ 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 ArrowsRightLeft } from './ArrowsRightLeft';
 export { default as AskForInput } from './AskForInput';
 export { default as Atom } from './Atom';
 export { default as AutomationsCancelled } from './AutomationsCancelled';
@@ -146,6 +150,7 @@ export { default as LineDivider } from './LineDivider';
 export { default as Link } from './Link';
 export { default as LockOutline } from './LockOutline';
 export { default as Lock } from './Lock';
+export { default as Logout } from './Logout';
 export { default as Loom } from './Loom';
 export { default as LoupeZoomIn } from './LoupeZoomIn';
 export { default as LoupeZoomOut } from './LoupeZoomOut';
@@ -167,7 +172,6 @@ export { default as MoveLeft } from './MoveLeft';
 export { default as MoveRight } from './MoveRight';
 export { default as MoveSpace } from './MoveSpace';
 export { default as MoveTop } from './MoveTop';
-export { default as MySpace } from './MySpace';
 export { default as NetworkAdd } from './NetworkAdd';
 export { default as Network } from './Network';
 export { default as Notifications } from './Notifications';
@@ -188,6 +192,7 @@ export { default as PinFilled } from './PinFilled';
 export { default as Pin } from './Pin';
 export { default as Popup } from './Popup';
 export { default as Posts } from './Posts';
+export { default as PrivateItems } from './PrivateItems';
 export { default as Question } from './Question';
 export { default as Refresh } from './Refresh';
 export { default as RemovePeople } from './RemovePeople';
@@ -297,6 +302,7 @@ export { default as TypeUrl } from './TypeUrl';
 export { default as UnitsAvatar } from './UnitsAvatar';
 export { default as UnitsCollection } from './UnitsCollection';
 export { default as UnitsCounter } from './UnitsCounter';
+export { default as UnitsDate } from './UnitsDate';
 export { default as UnitsDbBadgeAbbr } from './UnitsDbBadgeAbbr';
 export { default as UnitsDbBadgeFull } from './UnitsDbBadgeFull';
 export { default as UnitsDbIcon } from './UnitsDbIcon';
@@ -328,6 +334,7 @@ export { default as ViewTimeline } from './ViewTimeline';
 export { default as Views } from './Views';
 export { default as WarningTriangle } from './WarningTriangle';
 export { default as Warning } from './Warning';
+export { default as WorkspaceMap } from './WorkspaceMap';
 export { default as Youtube } from './Youtube';
 export { default as ZoomIn } from './ZoomIn';
 export { default as ZoomOut } from './ZoomOut';

package/src/icons/react/AppearanceAuto.tsx

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

package/src/icons/react/AppearanceDark.tsx

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

package/src/icons/react/AppearanceLight.tsx

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

package/src/icons/react/ArrowsRightLeft.tsx

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

package/src/icons/react/{MySpace.tsx → Logout.tsx}

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

package/src/icons/react/PrivateItems.tsx

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

package/src/icons/react/UnitsDate.tsx

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

package/src/icons/react/WorkspaceMap.tsx

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

package/src/icons/react/index.tsx

@@ -18,6 +18,9 @@ export { default as AppTemplates } from './AppTemplates';
 export { default as AppWebhooks } from './AppWebhooks';
 export { default as AppWiki } from './AppWiki';
 export { default as App } from './App';
+export { default as AppearanceAuto } from './AppearanceAuto';
+export { default as AppearanceDark } from './AppearanceDark';
+export { default as AppearanceLight } from './AppearanceLight';
 export { default as ArrowBarLeft } from './ArrowBarLeft';
 export { default as ArrowBarRight } from './ArrowBarRight';
 export { default as ArrowBottom } from './ArrowBottom';
@@ -28,6 +31,7 @@ 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 ArrowsRightLeft } from './ArrowsRightLeft';
 export { default as AskForInput } from './AskForInput';
 export { default as Atom } from './Atom';
 export { default as AutomationsCancelled } from './AutomationsCancelled';
@@ -146,6 +150,7 @@ export { default as LineDivider } from './LineDivider';
 export { default as Link } from './Link';
 export { default as LockOutline } from './LockOutline';
 export { default as Lock } from './Lock';
+export { default as Logout } from './Logout';
 export { default as Loom } from './Loom';
 export { default as LoupeZoomIn } from './LoupeZoomIn';
 export { default as LoupeZoomOut } from './LoupeZoomOut';
@@ -167,7 +172,6 @@ export { default as MoveLeft } from './MoveLeft';
 export { default as MoveRight } from './MoveRight';
 export { default as MoveSpace } from './MoveSpace';
 export { default as MoveTop } from './MoveTop';
-export { default as MySpace } from './MySpace';
 export { default as NetworkAdd } from './NetworkAdd';
 export { default as Network } from './Network';
 export { default as Notifications } from './Notifications';
@@ -188,6 +192,7 @@ export { default as PinFilled } from './PinFilled';
 export { default as Pin } from './Pin';
 export { default as Popup } from './Popup';
 export { default as Posts } from './Posts';
+export { default as PrivateItems } from './PrivateItems';
 export { default as Question } from './Question';
 export { default as Refresh } from './Refresh';
 export { default as RemovePeople } from './RemovePeople';
@@ -297,6 +302,7 @@ export { default as TypeUrl } from './TypeUrl';
 export { default as UnitsAvatar } from './UnitsAvatar';
 export { default as UnitsCollection } from './UnitsCollection';
 export { default as UnitsCounter } from './UnitsCounter';
+export { default as UnitsDate } from './UnitsDate';
 export { default as UnitsDbBadgeAbbr } from './UnitsDbBadgeAbbr';
 export { default as UnitsDbBadgeFull } from './UnitsDbBadgeFull';
 export { default as UnitsDbIcon } from './UnitsDbIcon';
@@ -328,6 +334,7 @@ export { default as ViewTimeline } from './ViewTimeline';
 export { default as Views } from './Views';
 export { default as WarningTriangle } from './WarningTriangle';
 export { default as Warning } from './Warning';
+export { default as WorkspaceMap } from './WorkspaceMap';
 export { default as Youtube } from './Youtube';
 export { default as ZoomIn } from './ZoomIn';
 export { default as ZoomOut } from './ZoomOut';

package/src/select/index.tsx

@@ -172,13 +172,14 @@ export const Select = forwardRef(function Select<
   }, [styles, virtualized, zIndex]);
   const contextRef = useRef<SelectInstance<Option, IsMulti, Group> | null>(null);
   const combined = useComposedRefs(forwardedRef, contextRef);
+
   return (
     <ReactSelectRefContext.Provider value={contextRef as RefObject<SelectInstance>}>
       <BaseSelect<Option, IsMulti, Group>
         ref={combined}
         // There are places, where it is useful to override menuPortalTarget globally for all selects.
         // When you are already in some popup. e.g. user input in buttons, relation filter popover.
-        menuPortalTarget={(getPopupContainerElement && getPopupContainerElement()) || menuPortalTarget}
+        menuPortalTarget={getPopupContainerElement ? getPopupContainerElement() : menuPortalTarget}
         menuPlacement={"auto"}
         styles={combinedStyles}
         isMulti={isCollectionMode}

package/src/select/select-control-settings-context.tsx

@@ -1,6 +1,6 @@
 import {createContext, ReactNode, useContext, useMemo} from "react";
 
-const SelectControlSettings = createContext<{getPopupContainerElement?: () => HTMLElement; zIndex?: number}>({});
+const SelectControlSettings = createContext<{getPopupContainerElement?: () => HTMLElement | null; zIndex?: number}>({});
 
 // Overrides zIndex and getPopupContainerElement for all selects, except select-in-popover.
 // It has more priority than "menuPortalTarget" prop. Use at your own risk!
@@ -10,7 +10,7 @@ export function SelectControlSettingsProvider({
   zIndex,
 }: {
   children: ReactNode;
-  getPopupContainerElement?: () => HTMLElement;
+  getPopupContainerElement?: () => HTMLElement | null;
   zIndex?: number;
 }) {
   const settings = useMemo(() => ({getPopupContainerElement, zIndex}), [getPopupContainerElement, zIndex]);

package/src/shortcut-badge.tsx

@@ -0,0 +1,28 @@
+import {css, cx} from "@linaria/core";
+import {textStyles, border, space, lineHeight, themeVars} from "./design-system";
+import {useIsSupportHardwareKeyboard} from "./use-is-support-hardware-keyboard";
+
+export const shortcutCss = css`
+  ${{
+    ...textStyles.small,
+    borderRadius: border.radius4,
+    border: themeVars.shortcutBorderColor,
+    color: themeVars.shortcutTextColor,
+    paddingTop: space.s2,
+    paddingBottom: space.s2,
+    paddingLeft: space.s4,
+    paddingRight: space.s4,
+    lineHeight: lineHeight.nowrap,
+    whiteSpace: "nowrap",
+    display: "inline-block",
+    userSelect: "none",
+  }}
+`;
+
+export const ShortcutBadge = ({className, shortcut}: {className?: string; shortcut: string}): JSX.Element | null => {
+  const isSupportHardwareKeyboard = useIsSupportHardwareKeyboard();
+  if (!isSupportHardwareKeyboard) {
+    return null;
+  }
+  return <div className={cx(shortcutCss, className)}>{shortcut}</div>;
+};

package/src/tsfixme.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type $TSFixMe = any;

package/src/use-is-phone.ts

@@ -0,0 +1,5 @@
+import {useIsMediaQueryMatched} from "./use-is-media-query-matched";
+
+export function useIsPhone() {
+  return useIsMediaQueryMatched("(max-width: 420px), (max-height: 420px)");
+}

package/src/use-is-support-hardware-keyboard.ts

@@ -0,0 +1,6 @@
+import {useIsPhone} from "./use-is-phone";
+
+export function useIsSupportHardwareKeyboard() {
+  // now we don't have media query for hardware keyboard support https://github.com/w3c/csswg-drafts/issues/3871
+  return !useIsPhone();
+}

package/src/icons/ast/MySpace.ts

@@ -1,8 +0,0 @@
-
-// This icon file is generated automatically.
-
-import { IconDefinition } from '../types';
-
-const MySpace: 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.912 2.94C7.594 1.988 8.647 1.5 10 1.5s2.406.487 3.088 1.44c.647.908.882 2.135.882 3.477v.913h.28c.707 0 1.408.2 1.939.692.54.5.811 1.216.811 2.058v5.67c0 .87-.54 1.56-1.041 1.986-.263.223-.55.406-.827.536-.26.122-.575.228-.882.228h-8.5C4.107 18.5 3 17.244 3 15.75v-5.67c0-.842.273-1.559.813-2.059.53-.49 1.23-.691 1.937-.691h.28v-.913c0-1.342.235-2.569.882-3.476Zm.618 4.39h4.94v-.913c0-1.21-.22-2.067-.603-2.605C11.517 3.322 10.959 3 10 3c-.96 0-1.516.321-1.867.812-.384.538-.603 1.395-.603 2.605v.913ZM4.832 9.123c-.175.161-.332.445-.332.957v5.67c0 .715.484 1.25 1.25 1.25h8.502a.979.979 0 0 0 .242-.086c.155-.072.33-.183.493-.321.35-.298.513-.608.513-.843v-5.67c0-.513-.157-.797-.33-.958-.184-.17-.484-.292-.92-.292h-8.5c-.434 0-.734.122-.918.293ZM10 11a.75.75 0 0 1 .75.75V14a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 10 11Z"},"children":[]}],"metadata":""}]},"name":"my-space"};
-
-export default MySpace;