@fibery/ui-kit 1.4.1 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -22,7 +22,8 @@
     "src/error-alert.tsx",
     "src/Pallete.ts",
     "src/tooltip.tsx",
-    "src/antd/ant-tooltip.tsx"
+    "src/antd/ant-tooltip.tsx",
+    "src/BackButton.tsx"
   ],
   "license": "UNLICENSED",
   "scripts": {
@@ -37,7 +38,8 @@
     "@linaria/core": "3.0.0-beta.15",
     "@linaria/react": "3.0.0-beta.15",
     "@popperjs/core": "2.9.3",
-    "@radix-ui/react-dropdown-menu": "1.0.0",
+    "@radix-ui/react-collapsible": "1.0.1",
+    "@radix-ui/react-dropdown-menu": "2.0.1",
     "antd": "4.18.8",
     "chroma-js": "2.1.2",
     "chrono-node": "^2.4.1",
@@ -68,7 +70,7 @@
   },
   "devDependencies": {
     "@fibery/babel-preset": "7.2.0",
-    "@fibery/eslint-config": "8.1.0",
+    "@fibery/eslint-config": "8.2.0",
     "@fibery/text-editor": "1.0.0",
     "@linaria/babel-preset": "3.0.0-beta.15",
     "@types/chroma-js": "2.1.3",

package/src/BackButton.tsx

@@ -0,0 +1,27 @@
+import {Button} from "@fibery/ui-kit";
+import BackIcon from "./icons/react/Back";
+import {Size} from "@fibery/ui-kit/src/Button";
+
+type Props = {
+  disabled?: boolean;
+  pending?: boolean;
+  onClick: () => unknown;
+  size?: Size;
+  color?: string;
+};
+
+export function BackButton({disabled, onClick, pending, size, color}: Props) {
+  return (
+    <Button
+      borderless
+      Icon={BackIcon}
+      disabled={disabled}
+      onClick={onClick}
+      pending={pending}
+      size={size}
+      color={color}
+    >
+      Back
+    </Button>
+  );
+}

package/src/Button.d.ts

@@ -1,6 +1,7 @@
 import type {ComponentPropsWithRef, FunctionComponent} from "react";
 import {IconBaseProps} from "./icons/types";
-type Size = ":button-size/super-small" | ":button-size/small" | ":button-size/normal" | ":button-size/big";
+export type Size = ":button-size/super-small" | ":button-size/small" | ":button-size/normal" | ":button-size/big";
+type PositionInGroup = "first" | "middle" | "last";
 type Props = {
   size?: Size;
   borderless?: boolean;
@@ -10,6 +11,7 @@ type Props = {
   pending?: boolean;
   width?: string | number;
   height?: string | number;
+  inGroup?: PositionInGroup;
 } & Omit<ComponentPropsWithRef<"button">, "size" | "width" | "height">;
 
 export const Button: FunctionComponent<Props>;

package/src/Item.tsx

@@ -1,6 +1,6 @@
 import {css} from "@linaria/core";
 import cx from "classnames";
-import {forwardRef, ReactNode, MouseEvent, CSSProperties} from "react";
+import {forwardRef, Ref, ReactNode, MouseEvent, CSSProperties} from "react";
 import {themeVars} from "./designSystem";
 
 const getGridStyle = ({
@@ -44,6 +44,7 @@ const singleLineTextStyle: CSSProperties = {
 
 type Props = {
   children: ReactNode;
+  textRef?: Ref<HTMLDivElement>;
   className?: string;
   leftContainer?: ReactNode;
   rightContainer?: ReactNode;
@@ -85,6 +86,7 @@ export const Item = forwardRef<HTMLDivElement, Props>(function Item(
     hoverable,
     title,
     dataId,
+    textRef,
     style = {},
   },
   ref
@@ -115,6 +117,7 @@ export const Item = forwardRef<HTMLDivElement, Props>(function Item(
       {leftContainer && <div className={cx(containerClassName)}>{leftContainer}</div>}
       {children ? (
         <div
+          ref={textRef}
           className={cx(textClassName)}
           style={multiline ? {} : noOverflow ? singleLineTextStyleNoOverflow : singleLineTextStyle}
         >

package/src/Select/index.tsx

@@ -1,5 +1,6 @@
+/* eslint-disable */
 import cn from "classnames";
-import {useCallback, forwardRef} from "react";
+import {useCallback, forwardRef, useState} from "react";
 import BaseSelect, {
   GroupHeadingProps,
   MenuProps,
@@ -14,7 +15,7 @@ import BaseSelect, {
   MultiValue,
   mergeStyles,
 } from "react-select";
-import BaseCreatableSelect from "react-select/creatable";
+import BaseCreatableSelect, {CreatableProps} from "react-select/creatable";
 import WindowedSelect, {components, WindowedMenuList} from "react-windowed-select";
 import {createInlineTheme} from "../designSystem";
 import {useTheme} from "../ThemeProvider";
@@ -100,16 +101,28 @@ export const Select = forwardRef(function Select<
     onKeyDown,
     styles = {},
     virtualized = true,
+    onMenuOpen,
+    onMenuClose,
     ...rest
   }: SelectProps<Option, IsMulti, Group>,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   forwardedRef: any
 ) {
+  const [menuOpenState, setMenuOpenState] = useState(rest.defaultMenuIsOpen);
+  const onMenuOpenWrapped = useCallback(() => {
+    setMenuOpenState(true);
+    onMenuOpen && onMenuOpen();
+  }, [onMenuOpen]);
+  const onMenuCloseWrapped = useCallback(() => {
+    setMenuOpenState(false);
+    onMenuClose && onMenuClose();
+  }, [onMenuClose]);
   const handleKeyDown = useCallback(
     (e) => {
       switch (e.key) {
         case "Escape":
-          if (rest.menuIsOpen) {
+          // we cannot rely on "menuIsOpen" prop here, as user may not pass this prop and rely on internal component behavior instead.
+          if (menuOpenState) {
             e.stopPropagation();
           }
           break;
@@ -135,7 +148,7 @@ export const Select = forwardRef(function Select<
       }
       onKeyDown && onKeyDown(e);
     },
-    [onKeyDown, rest.menuIsOpen]
+    [onKeyDown, menuOpenState]
   );
 
   const SelectComponent = (virtualized ? WindowedSelect : BaseSelect) as unknown as typeof BaseSelect;
@@ -164,6 +177,8 @@ export const Select = forwardRef(function Select<
       }}
       {...rest}
       onKeyDown={handleKeyDown}
+      onMenuOpen={onMenuOpenWrapped}
+      onMenuClose={onMenuCloseWrapped}
       isDisabled={rest.disabled}
     />
   );
@@ -173,13 +188,31 @@ export const Select = forwardRef(function Select<
   props: SelectProps<Option, IsMulti, Group> & {ref?: any}
 ) => JSX.Element;
 
-export function CreatableSelect<
+export const CreatableSelect = forwardRef(CreatableSelectInner) as <
   Option = unknown,
   IsMulti extends boolean = boolean,
   Group extends GroupBase<Option> = GroupBase<Option>
->({components, isCollectionMode, menuPortalTarget, styles = {}, ...rest}: SelectProps<Option, IsMulti, Group>) {
+>(
+  props: CreatableProps<Option, IsMulti, Group> & SelectProps<Option, IsMulti, Group>
+) => ReturnType<typeof CreatableSelectInner>;
+
+export function CreatableSelectInner<
+  Option = unknown,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>(
+  {
+    components,
+    isCollectionMode,
+    menuPortalTarget,
+    styles = {},
+    ...rest
+  }: CreatableProps<Option, IsMulti, Group> & SelectProps<Option, IsMulti, Group>,
+  ref: any
+) {
   return (
     <BaseCreatableSelect
+      ref={ref}
       menuPortalTarget={menuPortalTarget}
       menuPlacement={"auto"}
       styles={combineStyles<Option, IsMulti, Group>([

package/src/antd/styles.ts

@@ -1,5 +1,5 @@
 import {css} from "@linaria/core";
-import {colors, layout, opacity, border, shadows, space, textStyles, themeVars, transition} from "../designSystem";
+import {colors, layout, border, shadows, space, textStyles, themeVars, transition} from "../designSystem";
 
 export const inputOverrides = {
   main: {
@@ -20,7 +20,6 @@ export const inputOverrides = {
     letterSpacing: 0,
     "::placeholder": {
       color: themeVars.inputPlaceholderTextColor,
-      opacity: 1,
     },
   },
   hover: {
@@ -110,8 +109,7 @@ export const inputStyles = css`
     "&& .ant-input-disabled, && .ant-input-disabled:hover, && .ant-input-disabled:focus, && .ant-input-disabled:active":
       inputOverrides.disabled,
     "&& input::placeholder, && textarea::placeholder": {
-      color: themeVars.textColor,
-      opacity: opacity.regular,
+      color: themeVars.inputPlaceholderTextColor,
     },
     "& .ant-input-affix-wrapper .ant-input-prefix": {left: space.s},
     "& .ant-input-affix-wrapper .ant-input:not(:first-child)": {paddingLeft: space.s + space.xl + space.m}, // Match TitlePreview spacing

package/src/designSystem.ts

@@ -112,9 +112,9 @@ const brandColors = {
   blue: "#4568FB",
 } as const;
 
-export const getDarkenColor = (color: string): string => {
+export const getDarkenColor = _.memoize((color: string): string => {
   return makeChromaColor(color).darken(0.4).css();
-};
+});
 
 const lightColors = {
   mode: "light",
@@ -150,7 +150,7 @@ const lightColors = {
   entityNodeHoverColor: slateDark.slate7,
   entityNodeBorderHover: `1px solid ${getOpacities(slate.slate11).opacity80}`,
   entityNodeBgColor: slate.slate2,
-  shortcutTextColor: slate.slate9,
+  shortcutTextColor: slate.slate8,
   shortcutBorderColor: `1px solid ${getOpacities(slate.slate8).opacity20}`,
   inputBgColor: whiteA.whiteA0,
   inputDisabledBgColor: getOpacities(slate.slate6).opacity30,
@@ -160,7 +160,7 @@ const lightColors = {
   inputBorderHoverColor: `0 0 0 1px ${getOpacities(slate.slate7).opacity100}`,
   inputBorderFocusColor: `0 0 0 1px  ${getOpacities(slate.slate8).opacity100}`,
   inputBorderBlendMode: "multiply",
-  inputPlaceholderTextColor: slate.slate10,
+  inputPlaceholderTextColor: slate.slate9,
   buttonColor: slate.slate10,
   buttonPrimaryTextColor: slate.slate2,
   checkboxColor: slate.slate10,
@@ -211,8 +211,8 @@ const lightColors = {
   cellBackgroundHoverColor: getOpacities(sage.sage6).opacity30,
   cellBorderColor: getOpacities(slate.slate8).opacity50,
   tableRowWarningColor: getOpacities(yellow.yellow6).opacity60,
-  errorBgColor: getOpacities(red.red9).opacity60,
-  errorTextColor: red.red12,
+  errorBgColor: getOpacities(red.red9).opacity20,
+  errorTextColor: red.red11,
   errorButtonColor: red.red9,
   warningBgColor: getOpacities(yellow.yellow6).opacity60,
   warningButtonColor: yellow.yellow11,
@@ -237,6 +237,9 @@ const lightColors = {
     getOpacities(slate.slate10).opacity20
   }`,
   selectedColorBorder: getOpacities(slate.slate6).opacity50,
+  formBg: sage.sage2,
+  formHeaderShadow: `${getOpacities(slate.slate10).opacity10} 0px 0px 6px`,
+  formEditorFieldBg: sage.sage3,
   //end
   disabledInversedTextColor: shades.light,
   danger: brandColors.red,
@@ -309,7 +312,7 @@ const darkColors = {
   inputBorderHoverColor: `0 0 0 1px ${getOpacities(slateDark.slate8).opacity100}`,
   inputBorderFocusColor: `0 0 0 1px ${getOpacities(slateDark.slate9).opacity100}`,
   inputBorderBlendMode: "lighten",
-  inputPlaceholderTextColor: slate.slate10,
+  inputPlaceholderTextColor: slateDark.slate9,
   buttonColor: slateDark.slate10,
   buttonPrimaryTextColor: slate.slate6,
   checkboxColor: slateDark.slate10,
@@ -357,7 +360,7 @@ const darkColors = {
   cellBorderColor: getOpacities(slateDark.slate9).opacity50,
   tableRowWarningColor: getOpacities(yellowDark.yellow9).opacity40,
   errorBgColor: getOpacities(redDark.red9).opacity60,
-  errorTextColor: redDark.red12,
+  errorTextColor: red.red7,
   errorButtonColor: redDark.red10,
   warningBgColor: getOpacities(yellowDark.yellow8).opacity60,
   warningButtonColor: yellowDark.yellow11,
@@ -380,6 +383,9 @@ const darkColors = {
   instrumentsMenuBg: getOpacities(slateDark.slate4).opacity95,
   instrumentsMenuShadow: `0px 2px 8px ${getOpacities(slate.slate2).opacity95}`,
   selectedColorBorder: getOpacities(slate.slate6).opacity20,
+  formBg: slateDark.slate2,
+  formHeaderShadow: `${getOpacities(slateDark.slate1).opacity40} 0px 0px 6px`,
+  formEditorFieldBg: slateDark.slate4,
   //end
   disabledInversedTextColor: lights.light,
   danger: redDark.red9,
@@ -498,33 +504,39 @@ export const getThemeColors: (themeColor: string, theme: ThemeMode) => ThemeColo
   (themeColor, theme) => themeColor + theme
 );
 
-export const getTextColor = (color: string): string => {
+export const getTextColor = _.memoize((color: string): string => {
   return makeChromaColor(color).luminance() > 0.45 ? makeChromaColor(color).luminance(0.1).saturate(3).hex() : "white";
-};
+});
 
-export const getBrightenColor = (color: string): string => {
+export const getBrightenColor = _.memoize((color: string): string => {
   return makeChromaColor(color).brighten(0.15).hex();
-};
+});
 
-export const getLinkedHighlightBackgroundColor = (themeColors: ThemeColors, color: string): string => {
-  switch (themeColors.mode) {
-    case "dark":
-      return makeChromaColor(color).alpha(0.4).luminance(0.5).css();
-    case "light":
-      return makeChromaColor(color).alpha(0.3).luminance(0.6).css();
-    default:
-      return makeChromaColor(color).alpha(0.3).luminance(0.6).css();
-  }
-};
+export const getLinkedHighlightBackgroundColor = _.memoize(
+  (themeColors: ThemeColors, color: string): string => {
+    switch (themeColors.mode) {
+      case "dark":
+        return makeChromaColor(color).alpha(0.4).luminance(0.5).css();
+      case "light":
+        return makeChromaColor(color).alpha(0.3).luminance(0.6).css();
+      default:
+        return makeChromaColor(color).alpha(0.3).luminance(0.6).css();
+    }
+  },
+  (themeMode, color) => `${themeMode}-${color}`
+);
 
-export const getEnumBackgroundColor = (themeMode: ThemeMode, color: string) => {
-  switch (themeMode) {
-    case "dark":
-      return makeChromaColor(color).darken(2.2).alpha(0.5).saturate(1).css();
-    default:
-      return color;
-  }
-};
+export const getEnumBackgroundColor = _.memoize(
+  (themeMode: ThemeMode, color: string) => {
+    switch (themeMode) {
+      case "dark":
+        return makeChromaColor(color).darken(2.2).alpha(0.5).saturate(1).css();
+      default:
+        return color;
+    }
+  },
+  (themeMode, color) => `${themeMode}-${color}`
+);
 
 export const cardTypeColors = [
   "#D40915",
@@ -614,6 +626,7 @@ export const layout = {
   checkboxSize: 17,
   fakeBoardWidth: 260,
   fakeBoardHeight: 160,
+  inlineInputHeight: 32,
   menuHeight: 32,
   popupTopMargin: 48,
   unitHeight: 18,
@@ -729,8 +742,16 @@ export const themeVars = Object.keys(getThemeColors(brandColors.green, "light"))
   return vars;
 }, {} as Record<string, string | {[k: string]: string}>) as ThemeColors;
 
-export const createInlineTheme = (theme: ThemeColors, rejectKeys = Object.keys(lightColors)) =>
-  createInlineStyles<ThemeColors>(theme, rejectKeys);
+const DEFAULT_REJECT_KEYS = Object.keys(lightColors);
+export const createInlineTheme = _.memoize(
+  (theme: ThemeColors, rejectKeys = DEFAULT_REJECT_KEYS) => {
+    return createInlineStyles<ThemeColors>(theme, rejectKeys);
+  },
+  (theme, rejectKeys = DEFAULT_REJECT_KEYS) => {
+    const rejectKeysLabel = rejectKeys === DEFAULT_REJECT_KEYS ? "DEFAULT_REJECT_KEYS" : JSON.stringify(rejectKeys);
+    return `${theme.mode}__${theme.primary}__${rejectKeysLabel}`;
+  }
+);
 
 export const textStyles = {
   heading1: {

package/src/icons/ast/ArrowBottom.ts

@@ -1,8 +1,32 @@
-
 // This icon file is generated automatically.
 
-import { IconDefinition } from '../types';
+import {IconDefinition} from "../types";
 
-const ArrowBottom: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M17.354 8.354a.5.5 0 1 0-.708-.708l.708.708ZM10.5 14.5l-.354.354a.5.5 0 0 0 .708 0L10.5 14.5ZM4.354 7.646a.5.5 0 0 0-.708.708l.708-.708Zm12.292 0-6.5 6.5.708.708 6.5-6.5-.708-.708Zm-5.792 6.5-6.5-6.5-.708.708 6.5 6.5.708-.708Z"},"children":[]}],"metadata":""}]},"name":"arrow-bottom"};
+const ArrowBottom: IconDefinition = {
+  icon: {
+    type: "root",
+    children: [
+      {
+        type: "element",
+        tagName: "svg",
+        properties: {viewBox: "0 0 20 20"},
+        children: [
+          {
+            type: "element",
+            tagName: "path",
+            properties: {
+              fillRule: "evenodd",
+              clipRule: "evenodd",
+              d: "M5.434 7.434a.8.8 0 0 1 1.132 0L10 10.87l3.434-3.435a.8.8 0 0 1 1.132 1.132l-4 4a.8.8 0 0 1-1.132 0l-4-4a.8.8 0 0 1 0-1.132Z",
+            },
+            children: [],
+          },
+        ],
+        metadata: "",
+      },
+    ],
+  },
+  name: "arrow-bottom",
+};
 
 export default ArrowBottom;

package/src/icons/ast/ArrowCollapse.ts

@@ -1,8 +1,32 @@
-
 // This icon file is generated automatically.
 
-import { IconDefinition } from '../types';
+import {IconDefinition} from "../types";
 
-const ArrowCollapse: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M12.08 9.42a.7.7 0 0 1 0 .99l-3.67 3.67a.7.7 0 0 1-.99 0L7.24 13.9a.7.7 0 0 1 0-.99l2.649-2.642a.5.5 0 0 0 0-.708L7.242 6.919a.7.7 0 0 1-.001-.99l.179-.18a.7.7 0 0 1 .99 0l3.67 3.67Z"},"children":[]}],"metadata":""}]},"name":"arrow-collapse"};
+const ArrowCollapse: 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.434 14.566a.8.8 0 0 1 0-1.132L10.87 10 7.434 6.566a.8.8 0 1 1 1.132-1.132l4 4a.8.8 0 0 1 0 1.132l-4 4a.8.8 0 0 1-1.132 0Z",
+            },
+            children: [],
+          },
+        ],
+        metadata: "",
+      },
+    ],
+  },
+  name: "arrow-collapse",
+};
 
 export default ArrowCollapse;

package/src/icons/ast/ArrowCollapseVertical.ts

@@ -1,8 +1,32 @@
-
 // This icon file is generated automatically.
 
-import { IconDefinition } from '../types';
+import {IconDefinition} from "../types";
 
-const ArrowCollapseVertical: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M10.155 12.334a.7.7 0 0 1-.99 0l-3.67-3.67a.7.7 0 0 1 0-.99l.179-.178a.7.7 0 0 1 .99 0l2.642 2.648a.5.5 0 0 0 .708 0l2.642-2.648a.7.7 0 0 1 .99 0l.179.178a.7.7 0 0 1 0 .99l-3.67 3.67Z"},"children":[]}],"metadata":""}]},"name":"arrow-collapse-vertical"};
+const ArrowCollapseVertical: IconDefinition = {
+  icon: {
+    type: "root",
+    children: [
+      {
+        type: "element",
+        tagName: "svg",
+        properties: {viewBox: "0 0 20 20"},
+        children: [
+          {
+            type: "element",
+            tagName: "path",
+            properties: {
+              fillRule: "evenodd",
+              clipRule: "evenodd",
+              d: "M5.434 7.434a.8.8 0 0 1 1.132 0L10 10.87l3.434-3.435a.8.8 0 0 1 1.132 1.132l-4 4a.8.8 0 0 1-1.132 0l-4-4a.8.8 0 0 1 0-1.132Z",
+            },
+            children: [],
+          },
+        ],
+        metadata: "",
+      },
+    ],
+  },
+  name: "arrow-collapse-vertical",
+};
 
 export default ArrowCollapseVertical;

package/src/icons/ast/ArrowLeft.ts

@@ -1,8 +1,32 @@
-
 // This icon file is generated automatically.
 
-import { IconDefinition } from '../types';
+import {IconDefinition} from "../types";
 
-const ArrowLeft: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M12.646 16.854a.5.5 0 1 0 .708-.708l-.708.708ZM6.5 10l-.354-.354a.5.5 0 0 0 0 .708L6.5 10Zm6.854-6.146a.5.5 0 0 0-.708-.708l.708.708Zm0 12.292-6.5-6.5-.708.708 6.5 6.5.708-.708Zm-6.5-5.792 6.5-6.5-.708-.708-6.5 6.5.708.708Z"},"children":[]}],"metadata":""}]},"name":"arrow-left"};
+const ArrowLeft: 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: "M12.566 5.434a.8.8 0 0 1 0 1.132L9.13 10l3.435 3.434a.8.8 0 1 1-1.132 1.132l-4-4a.8.8 0 0 1 0-1.132l4-4a.8.8 0 0 1 1.132 0Z",
+            },
+            children: [],
+          },
+        ],
+        metadata: "",
+      },
+    ],
+  },
+  name: "arrow-left",
+};
 
 export default ArrowLeft;

package/src/icons/ast/ArrowRight.ts

@@ -1,8 +1,32 @@
-
 // This icon file is generated automatically.
 
-import { IconDefinition } from '../types';
+import {IconDefinition} from "../types";
 
-const ArrowRight: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M7.854 3.146a.5.5 0 1 0-.708.708l.708-.708ZM14 10l.354.354a.5.5 0 0 0 0-.708L14 10Zm-6.854 6.146a.5.5 0 0 0 .708.708l-.708-.708Zm0-12.292 6.5 6.5.708-.708-6.5-6.5-.708.708Zm6.5 5.792-6.5 6.5.708.708 6.5-6.5-.708-.708Z"},"children":[]}],"metadata":""}]},"name":"arrow-right"};
+const ArrowRight: 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.434 14.566a.8.8 0 0 1 0-1.132L10.87 10 7.434 6.566a.8.8 0 1 1 1.132-1.132l4 4a.8.8 0 0 1 0 1.132l-4 4a.8.8 0 0 1-1.132 0Z",
+            },
+            children: [],
+          },
+        ],
+        metadata: "",
+      },
+    ],
+  },
+  name: "arrow-right",
+};
 
 export default ArrowRight;

package/src/icons/ast/ArrowTop.ts

@@ -1,8 +1,32 @@
-
 // This icon file is generated automatically.
 
-import { IconDefinition } from '../types';
+import {IconDefinition} from "../types";
 
-const ArrowTop: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M3.146 12.146a.5.5 0 1 0 .708.708l-.708-.708ZM10 6l.354-.354a.5.5 0 0 0-.708 0L10 6Zm6.146 6.854a.5.5 0 0 0 .708-.708l-.708.708Zm-12.292 0 6.5-6.5-.708-.708-6.5 6.5.708.708Zm5.792-6.5 6.5 6.5.708-.708-6.5-6.5-.708.708Z"},"children":[]}],"metadata":""}]},"name":"arrow-top"};
+const ArrowTop: 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.566 12.566a.8.8 0 0 1-1.132 0L10 9.13l-3.434 3.435a.8.8 0 1 1-1.132-1.132l4-4a.8.8 0 0 1 1.132 0l4 4a.8.8 0 0 1 0 1.132Z",
+            },
+            children: [],
+          },
+        ],
+        metadata: "",
+      },
+    ],
+  },
+  name: "arrow-top",
+};
 
 export default ArrowTop;

package/src/icons/ast/ExtensionAssignments.ts

@@ -1,8 +1,40 @@
-
 // This icon file is generated automatically.
 
-import { IconDefinition } from '../types';
+import {IconDefinition} from "../types";
 
-const ExtensionAssignments: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M10.3 6.526c0-1.85 1.358-3.483 3.192-3.483s3.194 1.634 3.194 3.483c0 1.85-1.36 3.483-3.194 3.483-1.834 0-3.193-1.634-3.193-3.483Zm3.192-2.083c-.92 0-1.793.858-1.793 2.083s.873 2.083 1.793 2.083c.92 0 1.794-.858 1.794-2.083s-.874-2.083-1.794-2.083ZM19.819 15.493c.14 1.165-.822 1.968-1.766 1.968h-9.12c-.95 0-1.9-.803-1.77-1.956.192-1.701 1.226-2.923 2.406-3.68a7.236 7.236 0 0 1 3.803-1.116c1.228 0 2.672.362 3.881 1.09 1.218.735 2.354 1.95 2.566 3.694Zm-1.39.168c-.287-2.364-3.09-3.552-5.057-3.552-1.967 0-4.553 1.2-4.818 3.552-.024.22.157.4.378.4h9.12c.222 0 .403-.18.377-.4ZM6.084 4.262c-1.698 0-2.947 1.51-2.947 3.208 0 1.697 1.249 3.208 2.947 3.208S9.03 9.167 9.03 7.47c0-1.698-1.248-3.208-2.946-3.208ZM4.537 7.47c0-1.073.763-1.808 1.547-1.808.784 0 1.546.735 1.546 1.808s-.762 1.808-1.546 1.808-1.547-.735-1.547-1.808Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M2.014 17.461h4.424c-.292-.347-.45-.823-.422-1.378l.002-.022H2.014c-.221 0-.403-.18-.375-.399C1.9 13.568 4.214 12.5 5.975 12.5c.404 0 .848.056 1.295.167.328-.42.705-.793 1.115-1.119a7.082 7.082 0 0 0-2.41-.448 6.661 6.661 0 0 0-3.482 1.015C1.411 12.803.446 13.92.25 15.488c-.147 1.172.825 1.973 1.765 1.973Z"},"children":[]}]}],"metadata":""}]},"name":"extension-assignments"};
+const ExtensionAssignments: 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 3.25c-1.73 0-3 1.531-3 3.25s1.27 3.25 3 3.25c1.729 0 3-1.531 3-3.25s-1.271-3.25-3-3.25ZM11.5 6.5c0-1.043.744-1.75 1.5-1.75s1.5.707 1.5 1.75c0 1.043-.744 1.75-1.5 1.75s-1.5-.707-1.5-1.75ZM6.25 4.25c-1.6 0-2.75 1.429-2.75 3s1.15 3 2.75 3S9 8.821 9 7.25s-1.15-3-2.75-3ZM5 7.25c0-.914.64-1.5 1.25-1.5s1.25.586 1.25 1.5-.64 1.5-1.25 1.5S5 8.164 5 7.25ZM8.29 11.84c1.051-.965 2.617-1.59 4.71-1.59s3.658.625 4.71 1.59c1.045.96 1.536 2.217 1.54 3.38.003.99-.873 1.53-1.625 1.53H8.374c-.752 0-1.628-.54-1.624-1.53.004-1.163.494-2.42 1.54-3.38Zm1.014 1.105a3.243 3.243 0 0 0-1.04 2.053c-.013.139.1.252.239.252h8.996a.233.233 0 0 0 .238-.252 3.248 3.248 0 0 0-1.042-2.053c-.726-.667-1.907-1.195-3.695-1.195-1.789 0-2.97.528-3.696 1.195Z",
+            },
+            children: [],
+          },
+          {
+            type: "element",
+            tagName: "path",
+            properties: {
+              d: "M6.249 10.75c.573 0 1.102.056 1.586.16a5.89 5.89 0 0 0-1.198 1.351 6.983 6.983 0 0 0-.388-.011c-1.49 0-2.472.45-3.08 1.016a2.91 2.91 0 0 0-.902 1.776.188.188 0 0 0 .192.207l3.29-.013a2.38 2.38 0 0 0 .516 1.514H2.37c-.753 0-1.648-.548-1.618-1.558a4.327 4.327 0 0 1 1.396-3.024c.929-.864 2.296-1.418 4.102-1.418Z",
+            },
+            children: [],
+          },
+        ],
+        metadata: "",
+      },
+    ],
+  },
+  name: "extension-assignments",
+};
 
 export default ExtensionAssignments;

package/src/icons/ast/Minus.ts

@@ -0,0 +1,28 @@
+// This icon file is generated automatically.
+
+import {IconDefinition} from "../types";
+
+const Minus: IconDefinition = {
+  icon: {
+    type: "root",
+    children: [
+      {
+        type: "element",
+        tagName: "svg",
+        properties: {width: 20, height: 20},
+        children: [
+          {
+            type: "element",
+            tagName: "path",
+            properties: {d: "M4.75 9.25a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5H4.75Z"},
+            children: [],
+          },
+        ],
+        metadata: "",
+      },
+    ],
+  },
+  name: "minus",
+};
+
+export default Minus;

package/src/icons/ast/ViewForm.ts

@@ -0,0 +1,30 @@
+// This icon file is generated automatically.
+
+import {IconDefinition} from "../types";
+
+const ViewForm: IconDefinition = {
+  icon: {
+    type: "root",
+    children: [
+      {
+        type: "element",
+        tagName: "svg",
+        properties: {viewBox: "0 0 20 20"},
+        children: [
+          {
+            type: "element",
+            tagName: "path",
+            properties: {
+              d: "M16 5.5A1.5 1.5 0 0 0 14.5 4h-9A1.5 1.5 0 0 0 4 5.5v4.25a1.5 1.5 0 0 0 1.5 1.5h9a1.5 1.5 0 0 0 1.5-1.5V5.5ZM15 14.5a1.5 1.5 0 0 0-1.5-1.5h-7a1.5 1.5 0 0 0 0 3h7a1.5 1.5 0 0 0 1.5-1.5Z",
+            },
+            children: [],
+          },
+        ],
+        metadata: "",
+      },
+    ],
+  },
+  name: "view-form",
+};
+
+export default ViewForm;

package/src/icons/ast/index.tsx

@@ -174,6 +174,7 @@ export {default as ViewChart} from "./ViewChart";
 export {default as ViewDetails} from "./ViewDetails";
 export {default as ViewDocument} from "./ViewDocument";
 export {default as ViewFeed} from "./ViewFeed";
+export {default as ViewForm} from "./ViewForm";
 export {default as ViewList} from "./ViewList";
 export {default as ViewPage} from "./ViewPage";
 export {default as ViewTable} from "./ViewTable";

package/src/icons/react/Minus.tsx

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

package/src/icons/react/ViewForm.tsx

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

package/src/icons/react/index.tsx

@@ -174,6 +174,7 @@ export {default as ViewChart} from "./ViewChart";
 export {default as ViewDetails} from "./ViewDetails";
 export {default as ViewDocument} from "./ViewDocument";
 export {default as ViewFeed} from "./ViewFeed";
+export {default as ViewForm} from "./ViewForm";
 export {default as ViewList} from "./ViewList";
 export {default as ViewPage} from "./ViewPage";
 export {default as ViewTable} from "./ViewTable";

package/src/tooltip.tsx

@@ -15,7 +15,7 @@ const titleStyle = css`
 
 const descriptionStyle = css`
   ${{
-    color: themeVars.accentTextColor,
+    color: themeVars.shortcutTextColor,
     fontWeight: 400,
   }}
 `;