@fibery/ui-kit 1.18.0 → 1.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -17,12 +17,12 @@
     "src/loaders.tsx",
     "src/loading-sausage.tsx",
     "src/icons/**/*.ts*",
-    "src/Select",
+    "src/select",
     "src/error-alert.tsx",
     "src/pallete.ts",
     "src/tooltip.tsx",
     "src/back-button.tsx",
-    "src/Button",
+    "src/button",
     "src/emoji-picker/**/*.ts*",
     "src/toast/**/*.ts*",
     "src/a11y-color.ts"
@@ -66,9 +66,9 @@
     "react-windowed-select": "5.0.0",
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
+    "@fibery/emoji-data": "2.2.1",
     "@fibery/helpers": "1.2.0",
-    "@fibery/emoji-data": "2.2.0",
-    "@fibery/react": "1.1.0"
+    "@fibery/react": "1.2.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -85,6 +85,7 @@
     "@types/chroma-js": "2.1.3",
     "@types/color-hash": "1.0.2",
     "@types/invariant": "2.2.34",
+    "@types/jest": "27.0.1",
     "@types/lodash": "4.14.172",
     "@types/prop-types": "15.7.5",
     "@types/react": "18.0.26",
@@ -100,8 +101,8 @@
     "svgo": "2.8.0",
     "typescript": "5.1.6",
     "unist-util-reduce": "0.2.2",
-    "@fibery/babel-preset": "7.3.0",
-    "@fibery/eslint-config": "8.4.0"
+    "@fibery/eslint-config": "8.4.0",
+    "@fibery/babel-preset": "7.3.0"
   },
   "jest": {
     "testEnvironment": "jsdom",

package/src/back-button.tsx

@@ -1,3 +1,3 @@
-import {BackButton} from "./Button/back-button";
+import {BackButton} from "./button/back-button";
 
 export {BackButton};

package/src/button.tsx

@@ -1,3 +1,3 @@
-import {Button} from "./Button/button";
+import {Button} from "./button/button";
 
 export {Button};

package/src/design-system.ts

@@ -262,13 +262,16 @@ export const themeColors = {
       getOpacities(slateDark.slate1).opacity40
     }`,
   ],
-  colorBgSelectOptionDefault: [transparent, transparent],
-  colorBgSelectOptionDefaultHover: [slate.slate4, slateDark.slate4],
-  colorBgSelectOptionSelected: [indigo.indigo4, indigoDark.indigo4],
-  colorBgSelectOptionSelectedHover: [indigo.indigo6, indigoDark.indigo6],
-  colorBgSelectOptionDisabled: [transparent, transparent],
-  colorBgSelectOptionSelectedDisabled: [indigo.indigo5, indigoDark.indigo5],
-  opacitySelectOptionDisabled: [`${opacity.opacity40}`, `${opacity.opacity40}`],
+  colorBgListItemGeneral: [transparent, transparent],
+  colorBgListItemGeneralHover: [slate.slate3, slateDark.slate4],
+  colorBgListItemGeneralFocus: [slate.slate4, slateDark.slate6],
+  colorBgListItemGeneralSelected: [indigo.indigo3, indigoDark.indigo4],
+  colorBgListItemGeneralSelectedHover: [indigo.indigo4, indigoDark.indigo6],
+  colorBgListItemGeneralSelectedFocus: [indigo.indigo4, indigoDark.indigo6],
+  colorBgListItemGeneralDisabled: [transparent, transparent],
+  colorTextListItemGeneralDisabled: [slate.slate9, slateDark.slate9],
+  colorBgListItemGeneralSelectedDisabled: [indigo.indigo5, indigoDark.indigo5],
+  opacityListItemGeneralDisabled: [`${opacity.opacity40}`, `${opacity.opacity40}`],
 
   // Search Items
   colorBgSearchItemHover: [slate.slate4, slateDark.slate4],
@@ -308,13 +311,21 @@ export const themeColors = {
   // Selected Entity Box State
   colorBgEntityBoxSelected: [indigo.indigo2, indigoDark.indigo3],
   shadowStrokeEntityBoxSelected: [
-    `0 0 0 1px ${indigo.indigo9}, 0 0 0 3px ${getOpacities(indigo.indigo9).opacity40}`,
+    `0 0 0 1px ${getOpacities(indigo.indigo9).opacity40}, 0 0 0 3px ${getOpacities(indigo.indigo9).opacity40}`,
     `0 0 0 1px ${indigoDark.indigo9}, 0 0 0 3px ${getOpacities(indigoDark.indigo9).opacity40}`,
   ],
   // :hover
   colorBgEntityBoxSelectedHover: [indigo.indigo3, indigoDark.indigo3],
+  shadowStrokeEntityBoxSelectedHover: [
+    `0 0 0 1px ${getOpacities(indigo.indigo9).opacity60}, 0 0 0 3px ${getOpacities(indigo.indigo9).opacity40}`,
+    `0 0 0 1px ${indigoDark.indigo9}, 0 0 0 3px ${getOpacities(indigoDark.indigo9).opacity40}`,
+  ],
   //::drag
   colorBgEntityBoxSelectedDrag: [indigo.indigo3, indigoDark.indigo3],
+  shadowStrokeEntityBoxSelectedDrag: [
+    `0 0 0 1px ${getOpacities(indigo.indigo9).opacity40}, 0 0 0 3px ${getOpacities(indigo.indigo9).opacity40}`,
+    `0 0 0 1px ${indigoDark.indigo9}, 0 0 0 3px ${getOpacities(indigoDark.indigo9).opacity40}`,
+  ],
   // Disabled Entity Box State (done)
   opacityEntityBoxDisabled: [`${opacity.opacity65}`, `${opacity.opacity65}`],
   // :hover
@@ -411,9 +422,9 @@ export const themeColors = {
   filterGroup1Bg: [slate.slate2, slateDark.slate6],
   filterGroup2Bg: [slate.slate3, slateDark.slate7],
   filterGroupBorder: [blackA.blackA3, whiteA.whiteA3],
-  colorBgNotificationHover: [slate.slate4, slateDark.slate4],
-  colorBgNotificationSelected: [indigo.indigo4, indigoDark.indigo4],
-  colorBgNotificationSelectedHover: [indigo.indigo6, indigoDark.indigo6],
+  colorBgNotificationHover: [slate.slate3, slateDark.slate4],
+  colorBgNotificationSelected: [indigo.indigo3, indigoDark.indigo4],
+  colorBgNotificationSelectedHover: [indigo.indigo4, indigoDark.indigo6],
   disabledInversedTextColor: [shades.opacity25, lights.opacity25],
   danger: [red.red9, redDark.red10],
   active: [red.red9, redDark.red10],
@@ -610,10 +621,24 @@ export const getLinkedHighlightBackgroundColor = _.memoize(
   (themeMode, color) => `${themeMode}-${color}`
 );
 
+export const getLinkedHighlightDecorationBackgroundColor = _.memoize(
+  (themeColors: ThemeColors, color: string): string => {
+    switch (themeColors.mode) {
+      case "dark":
+        return makeChromaColor(color).alpha(0.9).luminance(0.5).darken(0.2).css();
+      case "light":
+        return makeChromaColor(color).alpha(0.9).luminance(0.5).css();
+      default:
+        return makeChromaColor(color).alpha(0.9).luminance(0.5).css();
+    }
+  },
+  (themeMode, color) => `${themeMode}-${color}`
+);
+
 export const getEnumBackgroundColor = _.memoize(
   (mode: ThemeMode, color: string) => {
     return getThemeValue(mode, {
-      light: a11yColor(getOpacities(color).opacity20, lightColors.whiteColor, 1),
+      light: a11yColor(getOpacities(color).opacity15, lightColors.whiteColor, 1),
       dark: a11yColor(getOpacities(color).opacity30, darkColors.menuBg, 1.3),
     });
   },
@@ -677,9 +702,34 @@ export const space = {
   l: 12,
   xl: 24,
   xxl: 48, // Not recommended
+  // new spacing set
+  spaceAuto: "auto",
+  s0: 0,
+  s1: 1,
+  s2: 2,
+  s4: 4,
+  s6: 6,
+  s8: 8,
+  s10: 10,
+  s12: 12,
+  s14: 14,
+  s16: 16,
+  s20: 20,
+  s24: 24,
+  s28: 28,
+  s32: 32,
+  s36: 36,
+  s40: 40,
+  s44: 44,
+  s48: 48,
+  s56: 56,
+  s64: 64,
+  s80: 80,
+  s112: 112,
+  s128: 128,
 } as const;
 /** Token for nested items spacing in nested trees */
-export const spaceNestedTreeLevel = 40;
+export const spaceNestedTreeLevel = 28;
 export const spaceNestedTreeInterval = 0;
 export const layout = {
   logoSize: 24,
@@ -721,8 +771,6 @@ export const layout = {
   unitHeight: 18,
 } as const;
 
-export const radius = 3;
-
 export const border = {
   radius0: 0,
   radius1: 1,
@@ -947,7 +995,7 @@ export const textStyles = {
     lineHeight: lineHeight.regular,
     fontWeight: fontWeight.regular,
     color: themeVars.textColor,
-    borderRadius: radius,
+    borderRadius: border.radius6,
   },
   important: {
     fontFamily,
@@ -956,6 +1004,6 @@ export const textStyles = {
     fontWeight: fontWeight.regular,
     color: themeVars.textColor,
     border: `1px solid ${themeVars.active}`,
-    borderRadius: radius,
+    borderRadius: border.radius6,
   },
 } as const;

package/src/emoji-picker/emoji-picker-content-with-color.tsx

@@ -1,8 +1,8 @@
 import {css, cx} from "@linaria/core";
 import {useState} from "react";
-import {IconButton} from "../Button/icon-button";
-import {CollapsibleContent, CollapsibleRoot, CollapsibleTrigger} from "../Collapsible";
-import {ColorPicker} from "../ColorPicker";
+import {IconButton} from "../button/icon-button";
+import {CollapsibleContent, CollapsibleRoot, CollapsibleTrigger} from "../collapsible";
+import {ColorPicker} from "../color-picker";
 import {useThemeMode} from "../theme-provider";
 import {getIconColor, space} from "../design-system";
 import ColorCoding from "../icons/react/ColorCoding";

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

@@ -2,7 +2,7 @@ import {Category, EmojiItem} from "@fibery/emoji-data";
 import {css} from "@linaria/core";
 import {memo} from "react";
 import {useInView} from "react-intersection-observer";
-import {IconButton} from "../../Button/icon-button";
+import {IconButton} from "../../button/icon-button";
 import {space, textStyles, themeVars} from "../../design-system";
 import {Settings} from "../../icons/react";
 import {useEmojiDataStoreSelector} from "../stores/emoji-data-store";

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

@@ -2,7 +2,7 @@ import {EmojiItem} from "@fibery/emoji-data";
 import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
 import {css, cx} from "@linaria/core";
 import {startTransition, useId, useRef} from "react";
-import {IconButton} from "../../Button/icon-button";
+import {IconButton} from "../../button/icon-button";
 import {border, space, textStyles, themeVars} from "../../design-system";
 import Close from "../../icons/react/Close";
 import Search from "../../icons/react/Search";

package/src/emoji-picker/primitives/skin-tone.tsx

@@ -5,7 +5,7 @@ import {textStyles, themeVars} from "../../design-system";
 import {Emoji} from "./emoji";
 import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
 import {useEmojiSkin, useSetEmojiSkin} from "./skin-provider";
-import {IconButton} from "../../Button/icon-button";
+import {IconButton} from "../../button/icon-button";
 
 const skinToneWrapperCss = css`
   display: flex;

package/src/error-alert.tsx

@@ -1,6 +1,6 @@
 import {css} from "@linaria/core";
 import {layout, border, space, textStyles, themeVars} from "./design-system";
-import {Button} from "./Button/button";
+import {Button} from "./button/button";
 import CloseIcon from "./icons/react/Close";
 import {useTheme} from "./theme-provider";
 

package/src/icons/Icon.tsx

@@ -1,5 +1,5 @@
 import {css} from "@linaria/core";
-import {themeVars, iconSize as defaultIconSize, radius, viewBoxSize} from "../design-system";
+import {themeVars, iconSize as defaultIconSize, viewBoxSize, border} from "../design-system";
 import {generateIconFromAst} from "./generate-icon-from-ast";
 import {IconProps} from "./types";
 import {getShiftStyle} from "./get-shift-style";
@@ -8,7 +8,7 @@ import {forwardRef} from "react";
 
 const iconStyle = css`
   shape-rendering: geometricprecision;
-  border-radius: ${radius}px;
+  border-radius: ${border.radius4}px;
 `;
 
 export const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon(

package/src/icons/ast/BellRinging.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const BellRinging: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M5.226 1.95a.753.753 0 0 1-.385.992 2.259 2.259 0 0 0-1.338 1.87.753.753 0 0 1-1.5-.13 3.765 3.765 0 0 1 2.23-3.118.753.753 0 0 1 .993.385Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M5.953 3.569C7.034 2.559 8.49 2 10 2s2.966.559 4.047 1.569c1.084 1.01 1.703 2.394 1.703 3.848 0 2.105.528 3.55 1.117 4.514.272.445.483.76.64.994l.065.098c.077.114.154.23.21.331.028.052.064.122.093.202a.897.897 0 0 1 .051.38c-.009.104-.03.286-.134.472a1.149 1.149 0 0 1-.335.365.94.94 0 0 1-.299.145 1.497 1.497 0 0 1-.205.042 4.07 4.07 0 0 1-.404.03c-.28.01-.669.01-1.155.01H13.25v.25a3.25 3.25 0 0 1-6.5 0V15H4.606c-.486 0-.874 0-1.155-.01a4.068 4.068 0 0 1-.404-.03 1.495 1.495 0 0 1-.205-.042.939.939 0 0 1-.3-.145 1.15 1.15 0 0 1-.334-.365 1.155 1.155 0 0 1-.135-.473.897.897 0 0 1 .052-.38c.029-.08.065-.15.093-.2.056-.101.133-.218.21-.332l.065-.098c.156-.233.368-.549.64-.994.589-.964 1.117-2.409 1.117-4.514 0-1.454.62-2.837 1.703-3.848ZM8.25 15v.25a1.75 1.75 0 0 0 3.5 0V15h-3.5ZM10 3.5c-1.143 0-2.23.424-3.024 1.165-.792.74-1.226 1.73-1.226 2.752 0 2.371-.599 4.088-1.337 5.296-.196.32-.363.579-.5.786l.72.001h10.733c.283 0 .521 0 .72-.002a26.199 26.199 0 0 1-.499-.785c-.738-1.208-1.337-2.925-1.337-5.296 0-1.022-.434-2.013-1.226-2.752C12.23 3.925 11.144 3.5 10 3.5Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M15.159 2.942a.753.753 0 1 1 .608-1.378 3.764 3.764 0 0 1 2.23 3.118.753.753 0 0 1-1.5.13 2.258 2.258 0 0 0-1.338-1.87Z"},"children":[]}],"metadata":""}]},"name":"bell-ringing"};
+const BellRinging: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M18.78 3.72a.75.75 0 1 1-1.06 1.06l-2.5-2.5a.75.75 0 0 1 1.06-1.06l2.5 2.5ZM1.22 4.78a.75.75 0 0 1 0-1.06l2.5-2.5a.75.75 0 0 1 1.06 1.06l-2.5 2.5a.75.75 0 0 1-1.06 0Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M5.953 3.569C7.034 2.559 8.49 2 10 2s2.966.559 4.047 1.569c1.084 1.01 1.703 2.394 1.703 3.848 0 2.105.528 3.55 1.117 4.514.272.445.483.76.64.994l.065.098c.077.114.154.23.21.331.028.052.064.122.093.202a.897.897 0 0 1 .051.38c-.009.104-.03.286-.134.472a1.149 1.149 0 0 1-.335.365.94.94 0 0 1-.299.145 1.497 1.497 0 0 1-.205.042 4.07 4.07 0 0 1-.404.03c-.28.01-.669.01-1.155.01H13.25v.25a3.25 3.25 0 0 1-6.5 0V15H4.606c-.486 0-.874 0-1.155-.01a4.068 4.068 0 0 1-.404-.03 1.495 1.495 0 0 1-.205-.042.939.939 0 0 1-.3-.145 1.15 1.15 0 0 1-.334-.365 1.155 1.155 0 0 1-.135-.473.897.897 0 0 1 .052-.38c.029-.08.065-.15.093-.2.056-.101.133-.218.21-.332l.065-.098c.156-.233.368-.549.64-.994.589-.964 1.117-2.409 1.117-4.514 0-1.454.62-2.837 1.703-3.848ZM8.25 15v.25a1.75 1.75 0 0 0 3.5 0V15h-3.5ZM10 3.5c-1.143 0-2.23.424-3.024 1.165-.792.74-1.226 1.73-1.226 2.752 0 2.371-.599 4.088-1.337 5.296-.196.32-.363.579-.5.786l.72.001h10.733c.283 0 .521 0 .72-.002a26.199 26.199 0 0 1-.499-.785c-.738-1.208-1.337-2.925-1.337-5.296 0-1.022-.434-2.013-1.226-2.752C12.23 3.925 11.144 3.5 10 3.5Z"},"children":[]}],"metadata":""}]},"name":"bell-ringing"};
 
 export default BellRinging;

package/src/icons/ast/Clock.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const Clock: 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 10a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M10.75 6.375a.75.75 0 0 0-1.5 0V10c0 .199.079.39.22.53l2.265 2.266a.75.75 0 0 0 1.061-1.06L10.75 9.688V6.375Z"},"children":[]}],"metadata":""}]},"name":"clock"};
+
+export default Clock;

package/src/icons/ast/ClockAlarm.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const ClockAlarm: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M18.78 3.72a.75.75 0 1 1-1.06 1.06l-2.5-2.5a.75.75 0 0 1 1.06-1.06l2.5 2.5ZM1.22 4.78a.75.75 0 0 1 0-1.06l2.5-2.5a.75.75 0 0 1 1.06 1.06l-2.5 2.5a.75.75 0 0 1-1.06 0ZM10.75 6.375a.75.75 0 0 0-1.5 0V10c0 .199.079.39.22.53l2.265 2.266a.75.75 0 0 0 1.061-1.06L10.75 9.688V6.375Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M2 10a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Z"},"children":[]}],"metadata":""}]},"name":"clock-alarm"};
+
+export default ClockAlarm;

package/src/icons/ast/Copy.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const Copy: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M7.5 9.25c0-.966.784-1.75 1.75-1.75h7c.966 0 1.75.784 1.75 1.75v7A1.75 1.75 0 0 1 16.25 18h-7a1.75 1.75 0 0 1-1.75-1.75v-7ZM9.25 9a.25.25 0 0 0-.25.25v7c0 .138.112.25.25.25h7a.25.25 0 0 0 .25-.25v-7a.25.25 0 0 0-.25-.25h-7Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M3.75 2A1.75 1.75 0 0 0 2 3.75v7c0 .966.784 1.75 1.75 1.75H6V11H3.75a.25.25 0 0 1-.25-.25v-7a.25.25 0 0 1 .25-.25h7a.25.25 0 0 1 .25.25V6h1.5V3.75A1.75 1.75 0 0 0 10.75 2h-7Z"},"children":[]}],"metadata":""}]},"name":"copy"};
+const Copy: 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":"M7.5 9.25c0-.966.784-1.75 1.75-1.75h7c.966 0 1.75.784 1.75 1.75v7A1.75 1.75 0 0 1 16.25 18h-7a1.75 1.75 0 0 1-1.75-1.75v-7ZM9.25 9a.25.25 0 0 0-.25.25v7c0 .138.112.25.25.25h7a.25.25 0 0 0 .25-.25v-7a.25.25 0 0 0-.25-.25h-7Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M3.75 2A1.75 1.75 0 0 0 2 3.75v7c0 .966.784 1.75 1.75 1.75H6V11H3.75a.25.25 0 0 1-.25-.25v-7a.25.25 0 0 1 .25-.25h7a.25.25 0 0 1 .25.25V6h1.5V3.75A1.75 1.75 0 0 0 10.75 2h-7Z"},"children":[]}],"metadata":""}]},"name":"copy"};
 
 export default Copy;

package/src/icons/ast/ExtensionComments.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const ExtensionComments: 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.435 17.5c.585 0 .932-.405.932-1.038V14.72h.289c2.087 0 3.344-1.23 3.344-3.348V5.848C18 3.737 16.78 2.5 14.605 2.5h-9.21C3.228 2.5 2 3.737 2 5.848v5.524c0 2.111 1.228 3.348 3.395 3.348h4.349l2.477 2.147c.499.434.802.633 1.214.633Zm-.354-1.592-2.29-2.226c-.31-.312-.52-.383-.96-.383H5.445c-1.351 0-2.009-.676-2.009-1.97V5.891c0-1.294.658-1.97 2.009-1.97h9.116c1.358 0 2 .676 2 1.97v5.438c0 1.294-.642 1.97-2 1.97h-.889c-.412 0-.592.163-.592.583v2.026Zm.13-9.13a.648.648 0 0 0-.652-.643H6.032a.648.648 0 0 0-.653.642c0 .355.293.642.653.642h6.527c.36 0 .652-.287.652-.642ZM9.948 8.703c.36 0 .653.288.653.642a.648.648 0 0 1-.653.643H6.032a.648.648 0 0 1-.653-.643c0-.354.293-.642.653-.642h3.916Z"},"children":[]}],"metadata":""}]},"name":"extension-comments"};
+const ExtensionComments: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M6 7.75A.75.75 0 0 1 6.75 7h6.5a.75.75 0 0 1 0 1.5h-6.5A.75.75 0 0 1 6 7.75ZM6.75 10a.75.75 0 0 0 0 1.5h4.5a.75.75 0 0 0 0-1.5h-4.5Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M2 5.75A2.75 2.75 0 0 1 4.75 3h10.5A2.75 2.75 0 0 1 18 5.75v7.5A2.75 2.75 0 0 1 15.25 16h-.75v1.75a.75.75 0 0 1-1.13.646L9.296 16H4.75A2.75 2.75 0 0 1 2 13.25v-7.5ZM4.75 4.5c-.69 0-1.25.56-1.25 1.25v7.5c0 .69.56 1.25 1.25 1.25H9.5c.134 0 .265.036.38.104L13 16.439V15.25a.75.75 0 0 1 .75-.75h1.5c.69 0 1.25-.56 1.25-1.25v-7.5c0-.69-.56-1.25-1.25-1.25H4.75Z"},"children":[]}],"metadata":""}]},"name":"extension-comments"};
 
 export default ExtensionComments;

package/src/icons/ast/Monitor.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const Monitor: 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 4.5a2.25 2.25 0 0 1 2.25-2.25h11.5A2.25 2.25 0 0 1 18 4.5v8.25A2.25 2.25 0 0 1 15.75 15h-5v1.75h2.75a.75.75 0 0 1 0 1.5h-7a.75.75 0 0 1 0-1.5h2.75V15h-5A2.25 2.25 0 0 1 2 12.75V4.5Zm2.25-.75a.75.75 0 0 0-.75.75v8.25c0 .414.336.75.75.75h11.5a.75.75 0 0 0 .75-.75V4.5a.75.75 0 0 0-.75-.75H4.25Z"},"children":[]}],"metadata":""}]},"name":"monitor"};
+
+export default Monitor;

package/src/icons/ast/RicheditorCommentCreate.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const RicheditorCommentCreate: 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":"M14.257 19.27c.672 0 1.07-.473 1.07-1.211v-2.034h.333c2.399 0 3.843-1.436 3.843-3.91v-6.45c0-2.465-1.403-3.91-3.901-3.91H5.018c-2.49 0-3.901 1.445-3.901 3.91v6.45c0 2.466 1.41 3.91 3.901 3.91h4.997l2.847 2.507c.573.506.922.738 1.395.738Zm-.407-1.859-2.631-2.598c-.357-.365-.598-.448-1.104-.448H5.076c-1.552 0-2.307-.789-2.307-2.3v-6.35c0-1.51.755-2.299 2.307-2.299h10.476c1.56 0 2.3.789 2.3 2.3v6.35c0 1.51-.74 2.299-2.3 2.299H14.53c-.473 0-.68.19-.68.68v2.366ZM14 6.75a.75.75 0 0 0-.75-.75h-7.5a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 .75-.75ZM10.25 9a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5h4.5Z"},"children":[]}],"metadata":""}]},"name":"richeditor-comment-create"};
+const RicheditorCommentCreate: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M6 7.75A.75.75 0 0 1 6.75 7h6.5a.75.75 0 0 1 0 1.5h-6.5A.75.75 0 0 1 6 7.75ZM6.75 10a.75.75 0 0 0 0 1.5h4.5a.75.75 0 0 0 0-1.5h-4.5Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M2 5.75A2.75 2.75 0 0 1 4.75 3h10.5A2.75 2.75 0 0 1 18 5.75v7.5A2.75 2.75 0 0 1 15.25 16h-.75v1.75a.75.75 0 0 1-1.13.646L9.296 16H4.75A2.75 2.75 0 0 1 2 13.25v-7.5ZM4.75 4.5c-.69 0-1.25.56-1.25 1.25v7.5c0 .69.56 1.25 1.25 1.25H9.5c.134 0 .265.036.38.104L13 16.439V15.25a.75.75 0 0 1 .75-.75h1.5c.69 0 1.25-.56 1.25-1.25v-7.5c0-.69-.56-1.25-1.25-1.25H4.75Z"},"children":[]}],"metadata":""}]},"name":"richeditor-comment-create"};
 
 export default RicheditorCommentCreate;

package/src/icons/ast/Success.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const Success: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"fill":"none","viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"m12.267 7.325-3.575 3.583-1.375-1.375a.833.833 0 1 0-1.175 1.175L8.1 12.675a.834.834 0 0 0 1.175 0l4.167-4.167a.833.833 0 1 0-1.175-1.183ZM10 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":[]}],"metadata":""}]},"name":"success"};
+
+export default Success;

package/src/icons/ast/WarningTriangle.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const WarningTriangle: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"fill":"none","viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M10 13.333A.833.833 0 1 0 10 15a.833.833 0 0 0 0-1.666Zm8.892 1.225L12.183 2.892a2.5 2.5 0 0 0-4.366 0L1.15 14.558a2.5 2.5 0 0 0 2.133 3.775h13.434a2.5 2.5 0 0 0 2.175-3.775Zm-1.442 1.667a.832.832 0 0 1-.733.425H3.283a.832.832 0 0 1-.733-.425.833.833 0 0 1 0-.833L9.217 3.725a.833.833 0 0 1 1.483 0l6.708 11.667a.834.834 0 0 1 .042.85v-.017ZM10 6.667a.833.833 0 0 0-.833.833v3.333a.833.833 0 0 0 1.666 0V7.5A.834.834 0 0 0 10 6.667Z"},"children":[]}],"metadata":""}]},"name":"warning-triangle"};
+
+export default WarningTriangle;

package/src/icons/ast/index.tsx

@@ -43,7 +43,9 @@ export { default as Cards } from './Cards';
 export { default as CheckCircle } from './CheckCircle';
 export { default as Checked } from './Checked';
 export { default as ClearValue } from './ClearValue';
+export { default as ClockAlarm } from './ClockAlarm';
 export { default as ClockForward } from './ClockForward';
+export { default as Clock } from './Clock';
 export { default as Close } from './Close';
 export { default as ColorCodingFilled } from './ColorCodingFilled';
 export { default as ColorCoding } from './ColorCoding';
@@ -108,6 +110,7 @@ export { default as Milestones } from './Milestones';
 export { default as Minus } from './Minus';
 export { default as Miro } from './Miro';
 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 MySpace } from './MySpace';
@@ -194,6 +197,7 @@ export { default as SortOnBottom } from './SortOnBottom';
 export { default as SortOnTop } from './SortOnTop';
 export { default as Sort } from './Sort';
 export { default as Spinner } from './Spinner';
+export { default as Success } from './Success';
 export { default as Templates } from './Templates';
 export { default as Terminal } from './Terminal';
 export { default as Twitter } from './Twitter';
@@ -234,5 +238,6 @@ export { default as ViewPage } from './ViewPage';
 export { default as ViewTable } from './ViewTable';
 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 Youtube } from './Youtube';

package/src/icons/react/Clock.tsx

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

package/src/icons/react/ClockAlarm.tsx

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

package/src/icons/react/Monitor.tsx

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

package/src/icons/react/Success.tsx

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

package/src/icons/react/WarningTriangle.tsx

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

package/src/icons/react/index.tsx

@@ -43,7 +43,9 @@ export { default as Cards } from './Cards';
 export { default as CheckCircle } from './CheckCircle';
 export { default as Checked } from './Checked';
 export { default as ClearValue } from './ClearValue';
+export { default as ClockAlarm } from './ClockAlarm';
 export { default as ClockForward } from './ClockForward';
+export { default as Clock } from './Clock';
 export { default as Close } from './Close';
 export { default as ColorCodingFilled } from './ColorCodingFilled';
 export { default as ColorCoding } from './ColorCoding';
@@ -108,6 +110,7 @@ export { default as Milestones } from './Milestones';
 export { default as Minus } from './Minus';
 export { default as Miro } from './Miro';
 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 MySpace } from './MySpace';
@@ -194,6 +197,7 @@ export { default as SortOnBottom } from './SortOnBottom';
 export { default as SortOnTop } from './SortOnTop';
 export { default as Sort } from './Sort';
 export { default as Spinner } from './Spinner';
+export { default as Success } from './Success';
 export { default as Templates } from './Templates';
 export { default as Terminal } from './Terminal';
 export { default as Twitter } from './Twitter';
@@ -234,5 +238,6 @@ export { default as ViewPage } from './ViewPage';
 export { default as ViewTable } from './ViewTable';
 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 Youtube } from './Youtube';

package/src/{Select → select}/custom-select-partials/clear-indicator.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import RemoveIcon from "../../icons/react/Remove";
 import {ClearIndicatorProps, GroupBase, MultiValueRemoveProps} from "react-select";
-import {Button} from "../../Button/button";
+import {Button} from "../../button/button";
 
 export function ClearIndicator<
   TOption,

package/src/select/custom-select-partials/option.tsx

@@ -0,0 +1,65 @@
+import {OptionProps} from "react-select";
+import {components} from "react-windowed-select";
+import {GroupBase} from "../index";
+import {css} from "@linaria/core";
+import {layout, space} from "../../design-system";
+import {ListItemGeneral} from "../../lists/list-item-general";
+import cn from "classnames";
+
+export const OptionNulledVitualizedStyles = {
+  height: layout.newMenuItemHeight,
+};
+export const OptionNulledStyles = {
+  minHeight: layout.newMenuItemHeight,
+  paddingLeft: "",
+  paddingRight: "",
+  paddingTop: "",
+  opacity: "",
+  fontFamily: "",
+  fontSize: "",
+  lineHeight: "",
+  color: "",
+};
+const OptionRootClass = css`
+  padding: 0 ${space.s}px;
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+  cursor: pointer;
+`;
+
+/**
+ * Attention! Do not use this option for potentially long lists inside React Select
+ *  Why is this option slow? Read here https://the.fibery.io/SoftDev/bug/Select-option-behaviour-is-incorrect-9413
+ *  */
+export function OptionSlow<
+  Option,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({children, ...rest}: OptionProps<Option, IsMulti, Group>) {
+  const {isDisabled, isSelected, isFocused} = rest;
+  return (
+    <components.Option {...rest} className={cn(rest.className, OptionRootClass)}>
+      <ListItemGeneral focused={isFocused} selected={isSelected} hovered={false} done={isDisabled}>
+        {children}
+      </ListItemGeneral>
+    </components.Option>
+  );
+}
+
+/**
+ * This option is fast when there is 100+ items but breaks natural focus on hover React Select behaviour. Do not use it for short lists
+ * The issue is here https://the.fibery.io/SoftDev/bug/Select-option-behaviour-is-incorrect-9413
+ */
+export function Option<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({
+  children,
+  ...rest
+}: OptionProps<Option, IsMulti, Group>) {
+  /**
+   * This makes this option component fast
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const {onMouseOver, onMouseMove, ...truncatedInnerProps} = rest.innerProps;
+  const props = Object.assign(rest, {innerProps: truncatedInnerProps});
+  return <OptionSlow {...props}>{children}</OptionSlow>;
+}