@fibery/ui-kit 1.0.0 → 1.0.3

package/package.json

@@ -1,21 +1,23 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "main": "index.ts",
   "private": false,
   "files": [
+    "src/antd/styles.ts",
     "src/Button.d.ts",
     "src/Button.js",
     "src/designSystem.ts",
     "src/create-inline-theme.ts",
-    "src/FormFieldLoader.js",
+    "src/form-field-loader.tsx",
     "src/ThemeProvider.tsx",
     "src/Item.tsx",
     "src/Loaders.d.ts",
     "src/Loaders.js",
     "src/loading-sausage.tsx",
     "src/icons/**/*.ts*",
-    "src/Select"
+    "src/Select",
+    "src/Pallete.ts"
   ],
   "license": "UNLICENSED",
   "scripts": {
@@ -46,9 +48,9 @@
     "react-color": "2.13.8",
     "react-day-picker": "7.4.8",
     "react-popper": "2.2.5",
-    "react-select": "3.0.8",
+    "react-select": "5.3.2",
     "react-select-country-list": "2.2.1",
-    "react-windowed-select": "2.0.5",
+    "react-windowed-select": "3.1.2",
     "screenfull": "6.0.1"
   },
   "peerDependencies": {

package/src/Pallete.ts

@@ -0,0 +1,241 @@
+export const slate = {
+  slate1: "hsl(206, 30.0%, 98.8%)",
+  slate2: "hsl(210, 16.7%, 97.6%)",
+  slate3: "hsl(209, 13.3%, 95.3%)",
+  slate4: "hsl(209, 12.2%, 93.2%)",
+  slate5: "hsl(208, 11.7%, 91.1%)",
+  slate6: "hsl(208, 11.3%, 88.9%)",
+  slate7: "hsl(207, 11.1%, 85.9%)",
+  slate8: "hsl(205, 10.7%, 78.0%)",
+  slate9: "hsl(205, 8.0%, 62.1%)",
+  slate10: "hsl(205, 9.0%, 47.3%)",
+  slate11: "hsl(204, 14.0%, 37.3%)",
+  slate12: "hsl(200, 7.0%, 8.8%)",
+};
+
+export const slateDark = {
+  slate1: "hsl(200, 7.0%, 8.8%)",
+  slate2: "hsl(195, 7.1%, 11.0%)",
+  slate3: "hsl(197, 6.8%, 13.6%)",
+  slate4: "hsl(198, 6.6%, 15.8%)",
+  slate5: "hsl(199, 6.4%, 17.9%)",
+  slate6: "hsl(201, 6.2%, 20.5%)",
+  slate7: "hsl(203, 6.0%, 24.3%)",
+  slate8: "hsl(207, 5.6%, 31.6%)",
+  slate9: "hsl(206, 6.0%, 43.9%)",
+  slate10: "hsl(206, 5.2%, 49.5%)",
+  slate11: "hsl(206, 6.0%, 63.0%)",
+  slate12: "hsl(210, 6.0%, 93.0%)",
+};
+
+export const sage = {
+  sage1: "hsl(155, 30.0%, 98.8%)",
+  sage2: "hsl(150, 16.7%, 97.6%)",
+  sage3: "hsl(151, 10.6%, 95.2%)",
+  sage4: "hsl(151, 8.8%, 93.0%)",
+  sage5: "hsl(151, 7.8%, 90.8%)",
+  sage6: "hsl(152, 7.2%, 88.4%)",
+  sage7: "hsl(153, 6.7%, 85.3%)",
+  sage8: "hsl(154, 6.1%, 77.5%)",
+  sage9: "hsl(155, 3.5%, 55.5%)",
+  sage10: "hsl(154, 2.8%, 51.7%)",
+  sage11: "hsl(155, 3.0%, 43.0%)",
+  sage12: "hsl(155, 24.0%, 9.0%)",
+};
+
+export const sageDark = {
+  sage1: "hsl(160, 7.0%, 8.4%)",
+  sage2: "hsl(150, 7.4%, 10.6%)",
+  sage3: "hsl(150, 6.7%, 13.1%)",
+  sage4: "hsl(150, 6.4%, 15.3%)",
+  sage5: "hsl(150, 6.1%, 17.4%)",
+  sage6: "hsl(150, 5.8%, 19.9%)",
+  sage7: "hsl(150, 5.5%, 23.6%)",
+  sage8: "hsl(150, 5.1%, 30.6%)",
+  sage9: "hsl(155, 6.0%, 42.5%)",
+  sage10: "hsl(153, 4.8%, 48.2%)",
+  sage11: "hsl(155, 5.0%, 61.8%)",
+  sage12: "hsl(155, 6.0%, 93.0%)",
+};
+
+export const teal = {
+  teal1: "hsl(165, 60.0%, 98.8%)",
+  teal2: "hsl(169, 64.7%, 96.7%)",
+  teal3: "hsl(169, 59.8%, 94.0%)",
+  teal4: "hsl(169, 53.1%, 90.2%)",
+  teal5: "hsl(170, 47.1%, 85.0%)",
+  teal6: "hsl(170, 42.6%, 77.9%)",
+  teal7: "hsl(170, 39.9%, 68.1%)",
+  teal8: "hsl(172, 42.1%, 52.5%)",
+  teal9: "hsl(173, 80.0%, 36.0%)",
+  teal10: "hsl(173, 83.4%, 32.5%)",
+  teal11: "hsl(174, 90.0%, 25.2%)",
+  teal12: "hsl(170, 50.0%, 12.5%)",
+};
+
+export const tealDark = {
+  teal1: "hsl(168, 48.0%, 6.5%)",
+  teal2: "hsl(169, 77.8%, 7.1%)",
+  teal3: "hsl(170, 76.1%, 9.2%)",
+  teal4: "hsl(171, 75.8%, 11.0%)",
+  teal5: "hsl(171, 75.7%, 12.8%)",
+  teal6: "hsl(172, 75.8%, 15.1%)",
+  teal7: "hsl(172, 76.7%, 18.6%)",
+  teal8: "hsl(173, 80.2%, 23.7%)",
+  teal9: "hsl(173, 80.0%, 36.0%)",
+  teal10: "hsl(174, 83.9%, 38.2%)",
+  teal11: "hsl(174, 90.0%, 40.7%)",
+  teal12: "hsl(166, 73.0%, 93.1%)",
+};
+
+export const indigo = {
+  indigo1: "hsl(225, 60.0%, 99.4%)",
+  indigo2: "hsl(223, 100%, 98.6%)",
+  indigo3: "hsl(223, 98.4%, 97.1%)",
+  indigo4: "hsl(223, 92.9%, 95.0%)",
+  indigo5: "hsl(224, 87.1%, 92.0%)",
+  indigo6: "hsl(224, 81.9%, 87.8%)",
+  indigo7: "hsl(225, 77.4%, 82.1%)",
+  indigo8: "hsl(226, 75.4%, 74.5%)",
+  indigo9: "hsl(226, 70.0%, 55.5%)",
+  indigo10: "hsl(226, 58.6%, 51.3%)",
+  indigo11: "hsl(226, 55.0%, 45.0%)",
+  indigo12: "hsl(226, 62.0%, 17.0%)",
+};
+
+export const indigoDark = {
+  indigo1: "hsl(229, 24.0%, 10.0%)",
+  indigo2: "hsl(230, 36.4%, 12.9%)",
+  indigo3: "hsl(228, 43.3%, 17.5%)",
+  indigo4: "hsl(227, 47.2%, 21.0%)",
+  indigo5: "hsl(227, 50.0%, 24.1%)",
+  indigo6: "hsl(226, 52.9%, 28.2%)",
+  indigo7: "hsl(226, 56.0%, 34.5%)",
+  indigo8: "hsl(226, 58.2%, 44.1%)",
+  indigo9: "hsl(226, 70.0%, 55.5%)",
+  indigo10: "hsl(227, 75.2%, 61.6%)",
+  indigo11: "hsl(228, 100%, 75.9%)",
+  indigo12: "hsl(226, 83.0%, 96.3%)",
+};
+
+export const red = {
+  red1: "hsl(359, 100%, 99.4%)",
+  red2: "hsl(359, 100%, 98.6%)",
+  red3: "hsl(360, 100%, 96.8%)",
+  red4: "hsl(360, 97.9%, 94.8%)",
+  red5: "hsl(360, 90.2%, 91.9%)",
+  red6: "hsl(360, 81.7%, 87.8%)",
+  red7: "hsl(359, 74.2%, 81.7%)",
+  red8: "hsl(359, 69.5%, 74.3%)",
+  red9: "hsl(358, 75.0%, 59.0%)",
+  red10: "hsl(358, 69.4%, 55.2%)",
+  red11: "hsl(358, 65.0%, 48.7%)",
+  red12: "hsl(354, 50.0%, 14.6%)",
+};
+
+export const redDark = {
+  red1: "hsl(353, 23.0%, 9.8%)",
+  red2: "hsl(357, 34.4%, 12.0%)",
+  red3: "hsl(356, 43.4%, 16.4%)",
+  red4: "hsl(356, 47.6%, 19.2%)",
+  red5: "hsl(356, 51.1%, 21.9%)",
+  red6: "hsl(356, 55.2%, 25.9%)",
+  red7: "hsl(357, 60.2%, 31.8%)",
+  red8: "hsl(358, 65.0%, 40.4%)",
+  red9: "hsl(358, 75.0%, 59.0%)",
+  red10: "hsl(358, 85.3%, 64.0%)",
+  red11: "hsl(358, 100%, 69.5%)",
+  red12: "hsl(351, 89.0%, 96.0%)",
+};
+
+export const blue = {
+  blue1: "hsl(206, 100%, 99.2%)",
+  blue2: "hsl(210, 100%, 98.0%)",
+  blue3: "hsl(209, 100%, 96.5%)",
+  blue4: "hsl(210, 98.8%, 94.0%)",
+  blue5: "hsl(209, 95.0%, 90.1%)",
+  blue6: "hsl(209, 81.2%, 84.5%)",
+  blue7: "hsl(208, 77.5%, 76.9%)",
+  blue8: "hsl(206, 81.9%, 65.3%)",
+  blue9: "hsl(206, 100%, 50.0%)",
+  blue10: "hsl(208, 100%, 47.3%)",
+  blue11: "hsl(211, 100%, 43.2%)",
+  blue12: "hsl(211, 100%, 15.0%)",
+};
+
+export const blueDark = {
+  blue1: "hsl(212, 35.0%, 9.2%)",
+  blue2: "hsl(216, 50.0%, 11.8%)",
+  blue3: "hsl(214, 59.4%, 15.3%)",
+  blue4: "hsl(214, 65.8%, 17.9%)",
+  blue5: "hsl(213, 71.2%, 20.2%)",
+  blue6: "hsl(212, 77.4%, 23.1%)",
+  blue7: "hsl(211, 85.1%, 27.4%)",
+  blue8: "hsl(211, 89.7%, 34.1%)",
+  blue9: "hsl(206, 100%, 50.0%)",
+  blue10: "hsl(209, 100%, 60.6%)",
+  blue11: "hsl(210, 100%, 66.1%)",
+  blue12: "hsl(206, 98.0%, 95.8%)",
+};
+
+export const yellow = {
+  yellow1: "hsl(60, 54.0%, 98.5%)",
+  yellow2: "hsl(52, 100%, 95.5%)",
+  yellow3: "hsl(55, 100%, 90.9%)",
+  yellow4: "hsl(54, 100%, 86.6%)",
+  yellow5: "hsl(52, 97.9%, 82.0%)",
+  yellow6: "hsl(50, 89.4%, 76.1%)",
+  yellow7: "hsl(47, 80.4%, 68.0%)",
+  yellow8: "hsl(48, 100%, 46.1%)",
+  yellow9: "hsl(53, 92.0%, 50.0%)",
+  yellow10: "hsl(50, 100%, 48.5%)",
+  yellow11: "hsl(42, 100%, 29.0%)",
+  yellow12: "hsl(40, 55.0%, 13.5%)",
+};
+
+export const yellowDark = {
+  yellow1: "hsl(45, 100%, 5.5%)",
+  yellow2: "hsl(46, 100%, 6.7%)",
+  yellow3: "hsl(45, 100%, 8.7%)",
+  yellow4: "hsl(45, 100%, 10.4%)",
+  yellow5: "hsl(47, 100%, 12.1%)",
+  yellow6: "hsl(49, 100%, 14.3%)",
+  yellow7: "hsl(49, 90.3%, 18.4%)",
+  yellow8: "hsl(50, 100%, 22.0%)",
+  yellow9: "hsl(53, 92.0%, 50.0%)",
+  yellow10: "hsl(54, 100%, 68.0%)",
+  yellow11: "hsl(48, 100%, 47.0%)",
+  yellow12: "hsl(53, 100%, 91.0%)",
+};
+
+export const blackA = {
+  blackA0: "#000000",
+  blackA1: "hsla(0, 0%, 0%, 0.012)",
+  blackA2: "hsla(0, 0%, 0%, 0.027)",
+  blackA3: "hsla(0, 0%, 0%, 0.047)",
+  blackA4: "hsla(0, 0%, 0%, 0.071)",
+  blackA5: "hsla(0, 0%, 0%, 0.090)",
+  blackA6: "hsla(0, 0%, 0%, 0.114)",
+  blackA7: "hsla(0, 0%, 0%, 0.141)",
+  blackA8: "hsla(0, 0%, 0%, 0.220)",
+  blackA9: "hsla(0, 0%, 0%, 0.439)",
+  blackA10: "hsla(0, 0%, 0%, 0.478)",
+  blackA11: "hsla(0, 0%, 0%, 0.565)",
+  blackA12: "hsla(0, 0%, 0%, 0.910)",
+};
+
+export const whiteA = {
+  whiteA0: "#FFFFFF",
+  whiteA1: "hsla(0, 0%, 100%, 0)",
+  whiteA2: "hsla(0, 0%, 100%, 0.013)",
+  whiteA3: "hsla(0, 0%, 100%, 0.034)",
+  whiteA4: "hsla(0, 0%, 100%, 0.056)",
+  whiteA5: "hsla(0, 0%, 100%, 0.086)",
+  whiteA6: "hsla(0, 0%, 100%, 0.124)",
+  whiteA7: "hsla(0, 0%, 100%, 0.176)",
+  whiteA8: "hsla(0, 0%, 100%, 0.249)",
+  whiteA9: "hsla(0, 0%, 100%, 0.386)",
+  whiteA10: "hsla(0, 0%, 100%, 0.446)",
+  whiteA11: "hsla(0, 0%, 100%, 0.592)",
+  whiteA12: "hsla(0, 0%, 100%, 0.923)",
+};

package/src/Select/components.tsx

@@ -0,0 +1,87 @@
+import {useCallback, ReactNode} from "react";
+import {css} from "@linaria/core";
+import {components} from "react-windowed-select";
+import RemoveIcon from "../icons/react/Remove";
+import {OptionProps, DropdownIndicatorProps, ClearIndicatorProps, MultiValueRemoveProps, GroupBase} from "react-select";
+import {Button} from "../Button";
+import {themeVars, space} from "../designSystem";
+import ArrowBottom from "../icons/react/ArrowBottom";
+import {dropdownIndicatorSize, expanderStyle} from "./styles";
+
+export const Option = <
+  TOption,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<TOption> = GroupBase<TOption>
+>({
+  children,
+  ...props
+}: OptionProps<TOption, IsMulti, Group>) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const {onMouseMove, onMouseOver, ...rest} = props.innerProps;
+  const newProps = Object.assign(props, {innerProps: rest});
+  return <components.Option {...newProps}>{children}</components.Option>;
+};
+
+export function DropdownIndicator<
+  TOption,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<TOption> = GroupBase<TOption>
+>(props: DropdownIndicatorProps<TOption, IsMulti, Group>) {
+  return (
+    <div
+      className={expanderStyle}
+      style={{
+        transform: props.selectProps.menuIsOpen ? "rotate(180deg)" : "",
+      }}
+    >
+      <ArrowBottom iconSize={dropdownIndicatorSize} color={themeVars.disabledTextColor} />
+    </div>
+  );
+}
+
+export function ClearIndicator<
+  TOption,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<TOption> = GroupBase<TOption>
+>({
+  innerProps,
+  selectProps,
+}: ClearIndicatorProps<TOption, IsMulti, Group> | MultiValueRemoveProps<TOption, IsMulti, Group>) {
+  const onMouseDown = innerProps.onMouseDown;
+  const wrappedOnMouseDown = useCallback(
+    (e) => {
+      onMouseDown?.(e);
+      // This prevents false positive triggering in rc-trigger
+      e.nativeEvent.stopImmediatePropagation();
+    },
+    [onMouseDown]
+  );
+  return (
+    <div {...innerProps}>
+      <Button
+        borderless
+        Icon={RemoveIcon}
+        disabled={selectProps.isDisabled}
+        size={":button-size/super-small"}
+        onMouseDown={wrappedOnMouseDown}
+      />
+    </div>
+  );
+}
+
+export const NoOptionsMessage = ({children}: {children: ReactNode}) => {
+  return (
+    <div
+      className={css`
+        ${{
+          paddingLeft: space.l + 2,
+          paddingRight: space.l + 2,
+          paddingTop: space.m,
+          paddingBottom: space.m,
+        }}
+      `}
+    >
+      {children}
+    </div>
+  );
+};

package/src/Select/{index.js → index.tsx}

@@ -1,21 +1,39 @@
 import cn from "classnames";
 import {useCallback, forwardRef} from "react";
-import BaseSelect from "react-select";
+import BaseSelect, {
+  GroupHeadingProps,
+  MenuProps,
+  StylesConfig,
+  Props as BaseSelectProps,
+  GroupBase,
+  OptionsOrGroups,
+  OptionProps,
+  SingleValueProps,
+  MultiValueProps,
+} from "react-select";
 import BaseCreatableSelect from "react-select/creatable";
 import WindowedSelect, {components, WindowedMenuList} from "react-windowed-select";
 import {createInlineTheme} from "../designSystem";
 import {useTheme} from "../ThemeProvider";
-import {ClearIndicator, DropdownIndicator, NoOptionsMessage, Option} from "./components";
+import {ClearIndicator, DropdownIndicator, NoOptionsMessage, Option as OptionComponent} from "./components";
 import {componentsStyles, singleLineComponentsStyle} from "./styles";
 
-const GroupHeading = (props) => {
+export type {OptionsOrGroups, GroupBase, StylesConfig, OptionProps, SingleValueProps, MultiValueProps};
+
+function GroupHeading<
+  Option = unknown,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>(props: GroupHeadingProps<Option, IsMulti, Group>) {
   if (!props.children) {
     return null;
   }
   return <components.GroupHeading {...props} />;
-};
+}
 
-function Menu(props) {
+function Menu<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(
+  props: MenuProps<Option, IsMulti, Group>
+) {
   const theme = useTheme();
   const {innerProps, className} = props;
   const overridedInnerProps = {...innerProps, style: {...innerProps.style, ...createInlineTheme(theme)}};
@@ -24,27 +42,71 @@ function Menu(props) {
 
 export {components};
 
-export const combineStyles = (stylesArray) => {
-  return stylesArray.reduce((acc, style) => {
+export function combineStyles<
+  Option,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>(stylesArray: StylesConfig<Option, IsMulti, Group>[]) {
+  return stylesArray.reduce<StylesConfig<Option, IsMulti, Group>>((acc, style) => {
     Object.keys(style).forEach((key) => {
+      /* eslint-disable @typescript-eslint/ban-ts-comment */
+      // @ts-ignore
       if (acc[key]) {
+        // @ts-ignore
         const temp = acc[key];
+        // @ts-ignore
         acc[key] = (provided, state) => style[key](temp(provided, state), state);
       } else {
+        // @ts-ignore
         acc[key] = (provided, state) => style[key](provided, state);
       }
+      /* eslint-enable @typescript-eslint/ban-ts-comment */
     });
     return acc;
   }, {});
-};
+}
 
-export function SingleRowSelect({styles = {}, ...rest}) {
-  return <Select {...rest} styles={combineStyles([singleLineComponentsStyle, styles])} />;
+export type SelectProps<
+  Option = unknown,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+> = Omit<Omit<Omit<BaseSelectProps<Option, IsMulti, Group>, "isMulti">, "backspaceRemovesValue">, "isDisabled"> & {
+  virtualized?: boolean;
+  isCollectionMode?: IsMulti;
+  disabled?: boolean;
+};
+export function SingleRowSelect<
+  Option = unknown,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({styles = {}, ...rest}: SelectProps<Option, IsMulti, Group>) {
+  return (
+    <Select<Option, IsMulti, Group>
+      {...rest}
+      styles={combineStyles<Option, IsMulti, Group>([
+        singleLineComponentsStyle as unknown as StylesConfig<Option, IsMulti, Group>,
+        styles,
+      ])}
+    />
+  );
 }
 
-export const Select = forwardRef(function Select(
-  {components, isCollectionMode, menuPortalTarget, onKeyDown, styles = {}, virtualized = true, ...rest},
-  forwardedRef
+export const Select = forwardRef(function Select<
+  Option = unknown,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>(
+  {
+    components,
+    isCollectionMode,
+    menuPortalTarget,
+    onKeyDown,
+    styles = {},
+    virtualized = true,
+    ...rest
+  }: SelectProps<Option, IsMulti, Group>,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  forwardedRef: any
 ) {
   const theme = useTheme();
   const combineThemes = useCallback((providedTheme) => ({...providedTheme, ...theme}), [theme]);
@@ -64,7 +126,7 @@ export const Select = forwardRef(function Select(
             e.target.setSelectionRange(0, 0);
           }
           break;
-        case "End":
+        case "End": {
           e.preventDefault();
           const len = e.target.value.length;
           if (e.shiftKey) {
@@ -73,6 +135,7 @@ export const Select = forwardRef(function Select(
             e.target.setSelectionRange(len, len);
           }
           break;
+        }
         default:
       }
       onKeyDown && onKeyDown(e);
@@ -88,7 +151,10 @@ export const Select = forwardRef(function Select(
       menuPortalTarget={menuPortalTarget}
       menuPlacement={"auto"}
       style={createInlineTheme(theme)}
-      styles={combineStyles([componentsStyles, styles])}
+      styles={combineStyles<Option, IsMulti, Group>([
+        componentsStyles as unknown as StylesConfig<Option, IsMulti, Group>,
+        styles,
+      ])}
       theme={combineThemes}
       isMulti={isCollectionMode}
       backspaceRemovesValue={isCollectionMode}
@@ -97,7 +163,7 @@ export const Select = forwardRef(function Select(
         Menu,
         DropdownIndicator,
         ClearIndicator,
-        Option,
+        Option: OptionComponent,
         MultiValueRemove: ClearIndicator,
         NoOptionsMessage,
         GroupHeading,
@@ -108,16 +174,27 @@ export const Select = forwardRef(function Select(
       isDisabled={rest.disabled}
     />
   );
-});
+  // eslint-disable-next-line no-use-before-define
+}) as <Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(
+  // eslint-disable-next-line no-use-before-define,@typescript-eslint/no-explicit-any
+  props: SelectProps<Option, IsMulti, Group> & {ref?: any}
+) => JSX.Element;
 
-export function CreatableSelect({components, isCollectionMode, menuPortalTarget, styles = {}, ...rest}) {
+export function CreatableSelect<
+  Option = unknown,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({components, isCollectionMode, menuPortalTarget, styles = {}, ...rest}: SelectProps<Option, IsMulti, Group>) {
   const theme = useTheme();
   const combineThemes = useCallback((providedTheme) => ({...providedTheme, ...theme}), [theme]);
   return (
     <BaseCreatableSelect
       menuPortalTarget={menuPortalTarget}
       menuPlacement={"auto"}
-      styles={combineStyles([componentsStyles, styles])}
+      styles={combineStyles<Option, IsMulti, Group>([
+        componentsStyles as unknown as StylesConfig<Option, IsMulti, Group>,
+        styles,
+      ])}
       theme={combineThemes}
       isMulti={isCollectionMode}
       backspaceRemovesValue={isCollectionMode}
@@ -127,7 +204,7 @@ export function CreatableSelect({components, isCollectionMode, menuPortalTarget,
         MenuList: WindowedMenuList,
         DropdownIndicator,
         ClearIndicator,
-        Option,
+        Option: OptionComponent,
         MultiValueRemove: ClearIndicator,
         NoOptionsMessage,
         GroupHeading,

package/src/Select/select-loader.tsx

@@ -1,4 +1,4 @@
-import {FormFieldLoader} from "../FormFieldLoader";
+import {FormFieldLoader} from "../form-field-loader";
 import {LoadingSausageList} from "../loading-sausage";
 
 export const SelectLoader = () => (

package/src/Select/{styles.js → styles.ts}

@@ -1,4 +1,5 @@
 import {css} from "@linaria/core";
+import type {StylesConfig, CSSObjectWithLabel, ControlProps} from "react-select";
 import {inputOverrides} from "../antd/styles";
 import {border, layout, space, textStyles, themeVars, transition} from "../designSystem";
 
@@ -12,8 +13,12 @@ export const expanderStyle = css`
   }}
 `;
 
-function createControlStyle({isSingleLine}) {
-  const childDivStyle = {
+function createControlStyle({
+  isSingleLine,
+}: {
+  isSingleLine: boolean;
+}): (base: CSSObjectWithLabel, props: ControlProps) => CSSObjectWithLabel {
+  const childDivStyle: CSSObjectWithLabel = {
     padding: 0,
     overflow: "visible",
   };
@@ -27,18 +32,18 @@ function createControlStyle({isSingleLine}) {
     flexWrap: isSingleLine ? "nowrap" : "wrap",
     justifyContent: "space-between",
     width: "100%",
-    minHeight: layout.inputHeight,
     ...inputOverrides.main,
+    minHeight: layout.inputHeight,
     ...(state.isFocused && inputOverrides.focus),
     ...(state.isDisabled && inputOverrides.disabled),
-    ":hover": !state.isFocused && !state.isDisabled && inputOverrides.hover,
+    ":hover": !state.isFocused && !state.isDisabled ? inputOverrides.hover : {},
     paddingLeft: space.l,
     paddingRight: space.l,
     "& > div": childDivStyle,
   });
 }
 
-export const componentsStyles = {
+export const componentsStyles: StylesConfig = {
   option: (provided, state) => {
     const disabledStyles = {
       cursor: "not-allowed",
@@ -128,6 +133,6 @@ export const componentsStyles = {
   indicatorSeparator: () => ({}),
 };
 
-export const singleLineComponentsStyle = {
+export const singleLineComponentsStyle: StylesConfig = {
   control: createControlStyle({isSingleLine: true}),
 };

package/src/antd/styles.ts

@@ -0,0 +1,119 @@
+import {css} from "@linaria/core";
+import {colors, layout, opacity, border, shadows, space, textStyles, themeVars, transition} from "../designSystem";
+
+export const inputOverrides = {
+  main: {
+    font: "inherit",
+    color: themeVars.textColor,
+    outline: "none",
+    backgroundColor: themeVars.inputBgColor,
+    borderRadius: border.radius6,
+    minHeight: layout.inputHeight,
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: space.l,
+    paddingRight: space.l,
+    border: 0,
+    borderColor: colors.transparent,
+    transition: `box-shadow ${transition}`,
+    boxShadow: themeVars.inputBorderColor,
+    letterSpacing: 0,
+    "::placeholder": {
+      color: themeVars.inputPlaceholderTextColor,
+      opacity: 1,
+    },
+  },
+  hover: {
+    boxShadow: `0 0 0 1px ${themeVars.opacity.regular} !important`,
+    transition: `box-shadow ${transition}`,
+  },
+  focus: {
+    boxShadow: `0 0 0 1px ${themeVars.opacity.light}, 0 0 0 3px ${themeVars.focus} !important`,
+    transition: `box-shadow ${transition}`,
+  },
+  disabled: {
+    color: themeVars.accentTextColor,
+    backgroundColor: themeVars.inputDisabledBgColor,
+    borderColor: colors.transparent,
+    boxShadow: `${themeVars.inputBorderColor} !important`,
+    transition: `box-shadow ${transition}`,
+    WebkitTextFillColor: "currentColor",
+    cursor: "default",
+    ":hover": {
+      boxShadow: `${themeVars.inputBorderColor}`,
+    },
+  },
+};
+
+export const inputStyles = css`
+  & .ant-input-prefix {
+    margin-right: -24px;
+    z-index: 1;
+    position: relative;
+  }
+  ${{
+    ...textStyles.regular,
+    "& .ant-input-group-addon": {
+      backgroundColor: colors.transparent,
+      border: "none",
+      padding: 0,
+      textAlign: "left",
+      boxShadow: shadows.border,
+      ":hover": inputOverrides.hover,
+      ":focus": inputOverrides.focus,
+    },
+    "& .ant-input-group": {borderSpacing: 1, ...textStyles.regular},
+    "& .ant-input": inputOverrides.main,
+    "& .ant-input[readonly].ant-input[readonly]": {...inputOverrides.disabled, cursor: "inherit"},
+    "& .ant-input:hover[readonly].ant-input:hover[readonly]": {...inputOverrides.disabled, cursor: "inherit"},
+    "& .ant-input-affix-wrapper:hover .ant-input[readonly]": {...inputOverrides.disabled, cursor: "inherit"},
+    "& .ant-input-affix-wrapper > input.ant-input": {
+      padding: "0 12px",
+      border: "inherit",
+      outline: "inherit",
+    },
+    "& .ant-input-affix-wrapper": {
+      font: "inherit",
+      padding: 0,
+      border: "none",
+      boxShadow: "none",
+      backgroundColor: colors.transparent,
+    },
+    "& .ant-input-affix-wrapper.ant-input-affix-wrapper-readonly": {
+      border: "none !important",
+      outline: "none !important",
+      boxShadow: "none !important",
+    },
+    "& .ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled)": {
+      borderColor: "transparent",
+    },
+    "& .ant-cascader-picker:focus .ant-cascader-input, & .ant-cascader-picker:focus:hover .ant-cascader-input":
+      inputOverrides.focus,
+    "& .ant-select-auto-complete.ant-select": {
+      ...textStyles.regular,
+      "&  .ant-select-selection--single": {height: layout.inputHeight},
+      "& .ant-input": inputOverrides.main,
+      "& .ant-input.ant-input:hover": inputOverrides.hover,
+      "& .ant-input.ant-input:focus": inputOverrides.focus,
+      "& .ant-input.ant-input-disabled": inputOverrides.disabled,
+    },
+    "& textarea.ant-input": {
+      paddingTop: space.m,
+      paddingBottom: space.m,
+    },
+    "& .ant-select-disabled .ant-select-selection": {
+      backgroundColor: colors.transparent,
+    },
+    "&& input:hover:not(:focus):not(:disabled), && textarea:hover:not(:focus):not(:disabled), && .ant-input:hover:not(:focus):not(:disabled)":
+      inputOverrides.hover,
+    "&& input:focus, && textarea:focus, && input:active, && textarea:active": inputOverrides.focus,
+    "&& .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,
+    },
+    "& .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/{FormFieldLoader.js → form-field-loader.tsx}

@@ -1,6 +1,5 @@
-import {PureComponent} from "react";
+import {PureComponent, ReactNode} from "react";
 import {css} from "@linaria/core";
-import * as PropTypes from "prop-types";
 import cn from "classnames";
 import {space, border, themeVars} from "./designSystem";
 
@@ -17,14 +16,9 @@ const loaderStyle = css`
   background-color: ${themeVars.inputBgColor};
 `;
 
-export class FormFieldLoader extends PureComponent {
+export class FormFieldLoader extends PureComponent<{additionClassname?: string; children: ReactNode}> {
   render() {
     const {additionClassname, children} = this.props;
     return <div className={cn(loaderStyle, additionClassname)}>{children}</div>;
   }
 }
-
-FormFieldLoader.propTypes = {
-  additionClassname: PropTypes.string,
-  children: PropTypes.node,
-};

package/src/Select/components.js

@@ -1,64 +0,0 @@
-import {useCallback} from "react";
-import {css} from "@linaria/core";
-import {components} from "react-windowed-select";
-import RemoveIcon from "../icons/react/Remove";
-import {Button} from "../Button";
-import {themeVars, space} from "../designSystem";
-import ArrowBottom from "../icons/react/ArrowBottom";
-import {dropdownIndicatorSize, expanderStyle} from "./styles";
-
-export const Option = ({children, ...props}) => {
-  const {onMouseMove, onMouseOver, ...rest} = props.innerProps;
-  const newProps = Object.assign(props, {innerProps: rest});
-  return <components.Option {...newProps}>{children}</components.Option>;
-};
-
-export const DropdownIndicator = (props) => (
-  <div
-    className={expanderStyle}
-    style={{
-      transform: props.selectProps.menuIsOpen ? "rotate(180deg)" : "",
-    }}
-  >
-    <ArrowBottom iconSize={dropdownIndicatorSize} color={themeVars.disabledTextColor} />
-  </div>
-);
-
-export const ClearIndicator = ({innerProps, selectProps}) => {
-  const onMouseDown = innerProps.onMouseDown;
-  const wrappedOnMouseDown = useCallback(
-    (e) => {
-      onMouseDown(e);
-      // This prevents false positive triggering in rc-trigger
-      e.nativeEvent.stopImmediatePropagation();
-    },
-    [onMouseDown]
-  );
-  return (
-    <Button
-      borderless
-      Icon={RemoveIcon}
-      disabled={selectProps.isDisabled}
-      size={":button-size/super-small"}
-      {...innerProps}
-      onMouseDown={wrappedOnMouseDown}
-    />
-  );
-};
-
-export const NoOptionsMessage = ({children}) => {
-  return (
-    <div
-      className={css`
-        ${{
-          paddingLeft: space.l + 2,
-          paddingRight: space.l + 2,
-          paddingTop: space.m,
-          paddingBottom: space.m,
-        }}
-      `}
-    >
-      {children}
-    </div>
-  );
-};

package/src/Select/index.d.ts

@@ -1,11 +0,0 @@
-import {FunctionComponent, ForwardRefRenderFunction} from "react";
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const Select: ForwardRefRenderFunction<{focus: () => void}, any>;
-export const CreatableSelect: FunctionComponent<any>;
-export const components: {
-  GroupHeading: FunctionComponent<any>;
-  Option: FunctionComponent<any>;
-  SingleValue: FunctionComponent<any>;
-  MultiValue: FunctionComponent<any>;
-};
-export const combineStyles: (...args: any[]) => any;

package/src/Select/lazy.js

@@ -1,35 +0,0 @@
-import {lazy, Suspense, forwardRef} from "react";
-import {SelectLoader} from "./select-loader";
-
-const LazySelect = lazy(async () => {
-  const {Select} = await import("./index");
-  return {default: Select};
-});
-
-export const ReactSelect = forwardRef((props, forwardedRef) => (
-  <Suspense fallback={<SelectLoader />}>
-    <LazySelect {...props} ref={forwardedRef} />
-  </Suspense>
-));
-
-const CreatableLazySelect = lazy(async () => {
-  const {CreatableSelect} = await import("./index");
-  return {default: CreatableSelect};
-});
-
-export const CreatableReactSelect = (props) => (
-  <Suspense fallback={<SelectLoader />}>
-    <CreatableLazySelect {...props} />
-  </Suspense>
-);
-
-const SingleRowLazySelect = lazy(async () => {
-  const {SingleRowSelect} = await import("./index");
-  return {default: SingleRowSelect};
-});
-
-export const SingleRowReactSelect = (props) => (
-  <Suspense fallback={<SelectLoader />}>
-    <SingleRowLazySelect {...props} />
-  </Suspense>
-);