@fibery/ui-kit 1.5.0 → 1.7.0

package/index.ts

@@ -1,2 +1 @@
 export * from "./src/designSystem";
-export {Button} from "./src/Button";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -22,25 +22,28 @@
     "src/error-alert.tsx",
     "src/Pallete.ts",
     "src/tooltip.tsx",
-    "src/antd/ant-tooltip.tsx",
     "src/BackButton.tsx"
   ],
   "license": "UNLICENSED",
   "scripts": {
     "test": "TZ=Europe/Minsk jest",
-    "test:ci": "yarn test --coverage --reporters=default --reporters=jest-junit",
+    "test:ci": "yarn test --reporters=default --reporters=jest-junit",
+    "test:coverage": "yarn test --coverage --coverageDirectory=${JEST_COVERAGE_RESULT_DIR:-$(pwd)}/coverage/ui-kit --reporters=default --reporters=jest-junit",
     "lint": "eslint .",
     "generate-icons": "node scripts/generate-icons.mjs"
   },
   "dependencies": {
-    "@fibery/helpers": "1.0.2",
-    "@fibery/react": "1.0.0",
+    "@fibery/helpers": "workspace:*",
+    "@fibery/react": "workspace:*",
     "@linaria/core": "3.0.0-beta.15",
     "@linaria/react": "3.0.0-beta.15",
-    "@popperjs/core": "2.9.3",
+    "@popperjs/core": "2.11.6",
     "@radix-ui/react-collapsible": "1.0.1",
-    "@radix-ui/react-dropdown-menu": "2.0.1",
-    "antd": "4.18.8",
+    "@radix-ui/react-context-menu": "2.1.1",
+    "@radix-ui/react-dropdown-menu": "2.0.3-rc.7",
+    "@radix-ui/react-tooltip": "1.0.3",
+    "@types/ua-parser-js": "0.7.36",
+    "antd": "4.24.7",
     "chroma-js": "2.1.2",
     "chrono-node": "^2.4.1",
     "classnames": "2.3.1",
@@ -51,41 +54,52 @@
     "invariant": "2.2.4",
     "lodash": "4.17.21",
     "md5": "2.2.1",
-    "moment": "2.20.1",
+    "moment": "2.29.4",
     "prop-types": "15.7.2",
-    "rc-input-number": "^7.3.4",
-    "rc-menu": "9.3.2",
-    "rc-progress": "3.2.4",
+    "rc-input-number": "7.3.11",
+    "rc-menu": "9.8.1",
+    "rc-progress": "3.4.1",
     "react-color": "2.13.8",
-    "react-day-picker": "8.1.3",
-    "react-popper": "2.2.5",
+    "react-day-picker": "8.1.4",
+    "react-popper": "2.3.0",
     "react-select": "5.3.2",
     "react-select-country-list": "2.2.1",
     "react-windowed-select": "5.0.0",
-    "screenfull": "6.0.1"
+    "screenfull": "6.0.1",
+    "ua-parser-js": "0.7.24"
   },
   "peerDependencies": {
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@fibery/babel-preset": "7.2.0",
-    "@fibery/eslint-config": "8.2.0",
-    "@fibery/text-editor": "1.0.0",
+    "@babel/core": "7.20.5",
+    "@babel/runtime": "7.20.6",
+    "@fibery/babel-preset": "workspace:*",
+    "@fibery/eslint-config": "workspace:*",
     "@linaria/babel-preset": "3.0.0-beta.15",
+    "@testing-library/dom": "8.19.1",
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "13.4.0",
+    "@testing-library/user-event": "13.5.0",
     "@types/chroma-js": "2.1.3",
     "@types/color-hash": "1.0.2",
     "@types/emoji-mart": "3.0.8",
+    "@types/invariant": "2.2.34",
+    "@types/lodash": "4.14.172",
+    "@types/prop-types": "15.7.5",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.10",
     "csstype": "3.0.8",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.6",
     "fs-extra": "10.0.0",
     "glob": "7.1.7",
     "jest": "27.5.1",
     "jest-junit": "13.0.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "svg-parser": "2.0.4",
     "svgo": "2.8.0",
-    "typescript": "4.7.4",
+    "typescript": "5.0.3",
     "unist-util-reduce": "0.2.2"
   },
   "jest": {

package/src/Item.tsx

@@ -1,6 +1,6 @@
 import {css} from "@linaria/core";
 import cx from "classnames";
-import {forwardRef, Ref, ReactNode, MouseEvent, CSSProperties} from "react";
+import {forwardRef, Ref, ReactNode, MouseEvent, CSSProperties, AriaRole} from "react";
 import {themeVars} from "./designSystem";
 
 const getGridStyle = ({
@@ -28,7 +28,7 @@ const getGridStyle = ({
 
 const hoverClass = css`
   &:hover {
-    background-color: ${themeVars.opacity.thin};
+    background-color: ${themeVars.opacity.opacity10};
   }
 `;
 
@@ -62,6 +62,7 @@ type Props = {
   onMouseLeave?: (event: MouseEvent<HTMLDivElement>) => unknown;
   onMouseDown?: (event: MouseEvent<HTMLDivElement>) => unknown;
   style?: CSSProperties;
+  role?: AriaRole;
 };
 
 /**
@@ -88,6 +89,7 @@ export const Item = forwardRef<HTMLDivElement, Props>(function Item(
     dataId,
     textRef,
     style = {},
+    role,
   },
   ref
 ) {
@@ -95,6 +97,7 @@ export const Item = forwardRef<HTMLDivElement, Props>(function Item(
     <div
       data-testid={dataId}
       data-id={dataId}
+      role={role}
       ref={ref}
       onMouseDown={onMouseDown}
       onMouseEnter={onMouseEnter}

package/src/Pallete.ts

@@ -1,243 +1,243 @@
 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%)",
+  slate1: "hsl(206, 30%, 99%)",
+  slate2: "hsl(210, 17%, 98%)",
+  slate3: "hsl(209, 13%, 95%)",
+  slate4: "hsl(209, 12%, 93%)",
+  slate5: "hsl(208, 12%, 91%)",
+  slate6: "hsl(208, 11%, 89%)",
+  slate7: "hsl(207, 11%, 86%)",
+  slate8: "hsl(205, 11%, 78%)",
+  slate9: "hsl(205, 8%, 62%)",
+  slate10: "hsl(205, 9%, 47%)",
+  slate11: "hsl(204, 14%, 37%)",
+  slate12: "hsl(200, 7%, 9%)",
 } as const;
 
 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%)",
+  slate1: "hsl(200, 7%, 9%)",
+  slate2: "hsl(195, 7%, 11%)",
+  slate3: "hsl(197, 7%, 14%)",
+  slate4: "hsl(198, 7%, 16%)",
+  slate5: "hsl(199, 6%, 18%)",
+  slate6: "hsl(201, 6%, 20%)",
+  slate7: "hsl(203, 6%, 24%)",
+  slate8: "hsl(207, 6%, 32%)",
+  slate9: "hsl(206, 6%, 44%)",
+  slate10: "hsl(206, 5%, 50%)",
+  slate11: "hsl(206, 6%, 63%)",
+  slate12: "hsl(210, 6%, 93%)",
 } as const;
 
 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%)",
+  sage1: "hsl(155, 30%, 99%)",
+  sage2: "hsl(150, 17%, 98%)",
+  sage3: "hsl(151, 11%, 95%)",
+  sage4: "hsl(151, 9%, 93%)",
+  sage5: "hsl(151, 8%, 91%)",
+  sage6: "hsl(152, 7%, 88%)",
+  sage7: "hsl(153, 7%, 85%)",
+  sage8: "hsl(154, 6%, 78%)",
+  sage9: "hsl(155, 4%, 56%)",
+  sage10: "hsl(154, 3%, 52%)",
+  sage11: "hsl(155, 3%, 43%)",
+  sage12: "hsl(155, 24%, 9%)",
 } as const;
 
 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%)",
+  sage1: "hsl(160, 7%, 8%)",
+  sage2: "hsl(150, 7%, 11%)",
+  sage3: "hsl(150, 7%, 13%)",
+  sage4: "hsl(150, 6%, 15%)",
+  sage5: "hsl(150, 6%, 17%)",
+  sage6: "hsl(150, 6%, 20%)",
+  sage7: "hsl(150, 5%, 24%)",
+  sage8: "hsl(150, 5%, 31%)",
+  sage9: "hsl(155, 6%, 42%)",
+  sage10: "hsl(153, 5%, 48%)",
+  sage11: "hsl(155, 5%, 62%)",
+  sage12: "hsl(155, 6%, 93%)",
 } as const;
 
 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%)",
+  teal1: "hsl(165, 60%, 99%)",
+  teal2: "hsl(169, 65%, 97%)",
+  teal3: "hsl(169, 60%, 94%)",
+  teal4: "hsl(169, 53%, 90%)",
+  teal5: "hsl(170, 47%, 85%)",
+  teal6: "hsl(170, 43%, 78%)",
+  teal7: "hsl(170, 40%, 68%)",
+  teal8: "hsl(172, 42%, 52%)",
+  teal9: "hsl(173, 80%, 36%)",
+  teal10: "hsl(173, 83%, 33%)",
+  teal11: "hsl(174, 90%, 25%)",
+  teal12: "hsl(170, 50%, 13%)",
 } as const;
 
 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%)",
+  teal1: "hsl(168, 48%, 6%)",
+  teal2: "hsl(169, 78%, 7%)",
+  teal3: "hsl(170, 76%, 9%)",
+  teal4: "hsl(171, 76%, 11%)",
+  teal5: "hsl(171, 76%, 13%)",
+  teal6: "hsl(172, 76%, 15%)",
+  teal7: "hsl(172, 77%, 19%)",
+  teal8: "hsl(173, 80%, 24%)",
+  teal9: "hsl(173, 80%, 36%)",
+  teal10: "hsl(174, 84%, 38%)",
+  teal11: "hsl(174, 90%, 41%)",
+  teal12: "hsl(166, 73%, 93%)",
 } as const;
 
 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%)",
+  indigo1: "hsl(225, 60%, 99%)",
+  indigo2: "hsl(223, 100%, 99%)",
+  indigo3: "hsl(223, 98%, 97%)",
+  indigo4: "hsl(223, 93%, 95%)",
+  indigo5: "hsl(224, 87%, 92%)",
+  indigo6: "hsl(224, 82%, 88%)",
+  indigo7: "hsl(225, 77%, 82%)",
+  indigo8: "hsl(226, 75%, 75%)",
+  indigo9: "hsl(226, 70%, 56%)",
+  indigo10: "hsl(226, 59%, 51%)",
+  indigo11: "hsl(226, 55%, 45%)",
+  indigo12: "hsl(226, 62%, 17%)",
 } as const;
 
 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%)",
+  indigo1: "hsl(229, 24%, 10%)",
+  indigo2: "hsl(230, 36%, 13%)",
+  indigo3: "hsl(228, 43%, 18%)",
+  indigo4: "hsl(227, 47%, 21%)",
+  indigo5: "hsl(227, 50%, 24%)",
+  indigo6: "hsl(226, 53%, 28%)",
+  indigo7: "hsl(226, 56%, 35%)",
+  indigo8: "hsl(226, 58%, 44%)",
+  indigo9: "hsl(226, 70%, 56%)",
+  indigo10: "hsl(227, 75%, 62%)",
+  indigo11: "hsl(228, 100%, 76%)",
+  indigo12: "hsl(226, 83%, 96%)",
 } as const;
 
 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%)",
+  red1: "hsl(359, 100%, 99%)",
+  red2: "hsl(359, 100%, 99%)",
+  red3: "hsl(360, 100%, 97%)",
+  red4: "hsl(360, 98%, 95%)",
+  red5: "hsl(360, 90%, 92%)",
+  red6: "hsl(360, 82%, 88%)",
+  red7: "hsl(359, 74%, 82%)",
+  red8: "hsl(359, 69%, 74%)",
+  red9: "hsl(358, 75%, 59%)",
+  red10: "hsl(358, 69%, 55%)",
+  red11: "hsl(358, 65%, 49%)",
+  red12: "hsl(354, 50%, 15%)",
 } as const;
 
 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%)",
+  red1: "hsl(353, 23%, 10%)",
+  red2: "hsl(357, 34%, 12%)",
+  red3: "hsl(356, 43%, 16%)",
+  red4: "hsl(356, 48%, 19%)",
+  red5: "hsl(356, 51%, 22%)",
+  red6: "hsl(356, 55%, 26%)",
+  red7: "hsl(357, 60%, 32%)",
+  red8: "hsl(358, 65%, 40%)",
+  red9: "hsl(358, 75%, 59%)",
+  red10: "hsl(358, 85%, 64%)",
+  red11: "hsl(358, 100%, 70%)",
+  red12: "hsl(351, 89%, 96%)",
 } as const;
 
 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%)",
+  blue1: "hsl(206, 100%, 99%)",
+  blue2: "hsl(210, 100%, 98%)",
+  blue3: "hsl(209, 100%, 96%)",
+  blue4: "hsl(210, 99%, 94%)",
+  blue5: "hsl(209, 95%, 90%)",
+  blue6: "hsl(209, 81%, 84%)",
+  blue7: "hsl(208, 77%, 77%)",
+  blue8: "hsl(206, 82%, 65%)",
+  blue9: "hsl(206, 100%, 50%)",
+  blue10: "hsl(208, 100%, 47%)",
+  blue11: "hsl(211, 100%, 43%)",
+  blue12: "hsl(211, 100%, 15%)",
 } as const;
 
 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%)",
+  blue1: "hsl(212, 35%, 9%)",
+  blue2: "hsl(216, 50%, 12%)",
+  blue3: "hsl(214, 59%, 15%)",
+  blue4: "hsl(214, 66%, 18%)",
+  blue5: "hsl(213, 71%, 20%)",
+  blue6: "hsl(212, 77%, 23%)",
+  blue7: "hsl(211, 85%, 27%)",
+  blue8: "hsl(211, 90%, 34%)",
+  blue9: "hsl(206, 100%, 50%)",
+  blue10: "hsl(209, 100%, 61%)",
+  blue11: "hsl(210, 100%, 66%)",
+  blue12: "hsl(206, 98%, 96%)",
 } as const;
 
 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%)",
+  yellow1: "hsl(60, 54%, 98%)",
+  yellow2: "hsl(52, 100%, 95%)",
+  yellow3: "hsl(55, 100%, 91%)",
+  yellow4: "hsl(54, 100%, 87%)",
+  yellow5: "hsl(52, 98%, 82%)",
+  yellow6: "hsl(50, 89%, 76%)",
+  yellow7: "hsl(47, 80%, 68%)",
+  yellow8: "hsl(48, 100%, 46%)",
+  yellow9: "hsl(53, 92%, 50%)",
+  yellow10: "hsl(50, 100%, 48%)",
+  yellow11: "hsl(42, 100%, 29%)",
+  yellow12: "hsl(40, 55%, 13%)",
 } as const;
 
 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%)",
+  yellow1: "hsl(45, 100%, 5%)",
+  yellow2: "hsl(46, 100%, 7%)",
+  yellow3: "hsl(45, 100%, 9%)",
+  yellow4: "hsl(45, 100%, 10%)",
+  yellow5: "hsl(47, 100%, 12%)",
+  yellow6: "hsl(49, 100%, 14%)",
+  yellow7: "hsl(49, 90%, 18%)",
+  yellow8: "hsl(50, 100%, 22%)",
+  yellow9: "hsl(53, 92%, 50%)",
+  yellow10: "hsl(54, 100%, 68%)",
+  yellow11: "hsl(48, 100%, 47%)",
+  yellow12: "hsl(53, 100%, 91%)",
 } as const;
 
 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)",
+  blackA1: "hsla(0, 0%, 0%, 0.01)",
+  blackA2: "hsla(0, 0%, 0%, 0.03)",
+  blackA3: "hsla(0, 0%, 0%, 0.05)",
+  blackA4: "hsla(0, 0%, 0%, 0.07)",
+  blackA5: "hsla(0, 0%, 0%, 0.09)",
+  blackA6: "hsla(0, 0%, 0%, 0.11)",
+  blackA7: "hsla(0, 0%, 0%, 0.14)",
+  blackA8: "hsla(0, 0%, 0%, 0.22)",
+  blackA9: "hsla(0, 0%, 0%, 0.44)",
+  blackA10: "hsla(0, 0%, 0%, 0.48)",
+  blackA11: "hsla(0, 0%, 0%, 0.57)",
+  blackA12: "hsla(0, 0%, 0%, 0.91)",
 } as const;
 
 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)",
+  whiteA2: "hsla(0, 0%, 100%, 0.01)",
+  whiteA3: "hsla(0, 0%, 100%, 0.03)",
+  whiteA4: "hsla(0, 0%, 100%, 0.06)",
+  whiteA5: "hsla(0, 0%, 100%, 0.09)",
+  whiteA6: "hsla(0, 0%, 100%, 0.12)",
+  whiteA7: "hsla(0, 0%, 100%, 0.18)",
+  whiteA8: "hsla(0, 0%, 100%, 0.25)",
+  whiteA9: "hsla(0, 0%, 100%, 0.39)",
+  whiteA10: "hsla(0, 0%, 100%, 0.45)",
+  whiteA11: "hsla(0, 0%, 100%, 0.59)",
+  whiteA12: "hsla(0, 0%, 100%, 0.92)",
 } as const;
 
 export const opacity = {

package/src/Select/components.tsx

@@ -1,12 +1,12 @@
-import {useCallback, ReactNode} from "react";
+import React, {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 {ClearIndicatorProps, DropdownIndicatorProps, GroupBase, MultiValueRemoveProps, OptionProps} from "react-select";
+import {Button} from "../Button/button";
+import {space, themeVars} from "../designSystem";
 import ArrowCollapseVertical from "../icons/react/ArrowCollapseVertical";
-import {expanderStyle, expanderExpandedStyle} from "./styles";
+import {expanderExpandedStyle, expanderStyle} from "./styles";
 import cn from "classnames";
 
 export const Option = <
@@ -43,24 +43,9 @@ export function ClearIndicator<
   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}
-      />
+      <Button borderless Icon={RemoveIcon} disabled={selectProps.isDisabled} size={":button-size/super-small"} />
     </div>
   );
 }
@@ -81,3 +66,19 @@ export const NoOptionsMessage = ({children}: {children: ReactNode}) => {
     </div>
   );
 };
+
+const groupDividerContainerStyle = css`
+  padding: ${space.l}px 0;
+  box-sizing: content-box;
+`;
+
+const groupDividerStyle = css`
+  width: 100%;
+  border-top: 1px solid #eeeff1;
+`;
+
+export const GroupDivider = () => (
+  <div className={groupDividerContainerStyle}>
+    <div className={groupDividerStyle}></div>
+  </div>
+);