@fibery/ui-kit 1.17.1 → 1.18.0

package/index.ts

@@ -1 +1 @@
-export * from "./src/designSystem";
+export * from "./src/design-system";

package/package.json

@@ -1,40 +1,45 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.17.1",
+  "version": "1.18.0",
   "main": "index.ts",
   "private": false,
   "files": [
     "src/antd/styles.ts",
-    "src/Button.tsx",
-    "src/designSystem.ts",
+    "src/button.tsx",
+    "src/design-system.ts",
     "src/theme-styles.ts",
     "src/theme-settings.ts",
     "src/media-query-utils.ts",
     "src/create-inline-theme.ts",
     "src/form-field-loader.tsx",
-    "src/ThemeProvider.tsx",
-    "src/Item.tsx",
+    "src/theme-provider.tsx",
+    "src/item.tsx",
     "src/loaders.tsx",
     "src/loading-sausage.tsx",
     "src/icons/**/*.ts*",
     "src/Select",
     "src/error-alert.tsx",
-    "src/Pallete.ts",
+    "src/pallete.ts",
     "src/tooltip.tsx",
-    "src/BackButton.tsx",
+    "src/back-button.tsx",
     "src/Button",
     "src/emoji-picker/**/*.ts*",
+    "src/toast/**/*.ts*",
     "src/a11y-color.ts"
   ],
   "license": "UNLICENSED",
   "dependencies": {
-    "@linaria/core": "3.0.0-beta.15",
-    "@linaria/react": "3.0.0-beta.15",
+    "@linaria/core": "5.0.1",
+    "@linaria/react": "5.0.1",
     "@popperjs/core": "2.11.6",
-    "@radix-ui/react-collapsible": "1.0.1",
-    "@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",
+    "@radix-ui/react-collapsible": "1.0.3",
+    "@radix-ui/react-context-menu": "2.1.5",
+    "@radix-ui/react-dropdown-menu": "2.0.6",
+    "@radix-ui/react-toast": "1.1.5",
+    "@radix-ui/react-tooltip": "1.0.7",
+    "@types/d3-shape": "^3.1.3",
+    "@types/react-select-country-list": "^2.2.1",
+    "@types/setimmediate": "^1.0.2",
     "@types/ua-parser-js": "0.7.36",
     "antd": "4.24.7",
     "chroma-js": "2.1.2",
@@ -61,9 +66,9 @@
     "react-windowed-select": "5.0.0",
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
-    "@fibery/emoji-data": "2.1.1",
-    "@fibery/helpers": "1.1.0",
-    "@fibery/react": "1.0.3"
+    "@fibery/helpers": "1.2.0",
+    "@fibery/emoji-data": "2.2.0",
+    "@fibery/react": "1.1.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -72,7 +77,7 @@
   "devDependencies": {
     "@babel/core": "7.20.5",
     "@babel/runtime": "7.20.6",
-    "@linaria/babel-preset": "3.0.0-beta.15",
+    "@linaria/babel-preset": "5.0.3",
     "@testing-library/dom": "8.19.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
@@ -95,8 +100,8 @@
     "svgo": "2.8.0",
     "typescript": "5.1.6",
     "unist-util-reduce": "0.2.2",
-    "@fibery/babel-preset": "7.2.0",
-    "@fibery/eslint-config": "8.3.0"
+    "@fibery/babel-preset": "7.3.0",
+    "@fibery/eslint-config": "8.4.0"
   },
   "jest": {
     "testEnvironment": "jsdom",
@@ -124,8 +129,8 @@
   },
   "scripts": {
     "test": "TZ=Europe/Minsk jest",
-    "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",
+    "test:ci": "pnpm run test --reporters=default --reporters=jest-junit",
+    "test:coverage": "pnpm run 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"
   }

package/src/Button/actions-button.tsx

@@ -2,7 +2,7 @@ import {IconButton, IconButtonProps} from "./icon-button";
 import MoreCompact from "../icons/react/MoreCompact";
 import {forwardRef} from "react";
 import {css} from "@linaria/core";
-import {border, themeVars} from "../designSystem";
+import {border, themeVars} from "../design-system";
 
 export const ActionsButton = forwardRef<HTMLButtonElement, IconButtonProps>(function ActionsButtonComponent(
   {...rest},
@@ -19,7 +19,7 @@ export const ActionsButton = forwardRef<HTMLButtonElement, IconButtonProps>(func
 export const actionButtonInlineStyle = css`
   background-color: ${themeVars.actionMenuButtonColor};
   box-shadow: ${themeVars.entityCardShadow};
-  border-radius: ${border.radius6};
+  border-radius: ${border.radius6}px;
 
   .Button:hover {
     background-color: ${themeVars.actionMenuButtonHoverColor} !important;

package/src/Button/button-base.tsx

@@ -1,7 +1,7 @@
 import {styled} from "@linaria/react";
 import {ComponentPropsWithoutRef, forwardRef} from "react";
-import {border, colors, fontWeight, getDarkenColor, getOpacities, opacity, ThemeColors} from "../designSystem";
-import {useTheme} from "../ThemeProvider";
+import {border, colors, fontWeight, getDarkenColor, getOpacities, opacity, ThemeColors} from "../design-system";
+import {useTheme} from "../theme-provider";
 
 export const getMainColor = ({color, dangerous, theme}: {color?: string; dangerous?: boolean; theme: ThemeColors}) => {
   if (color) {

package/src/Button/button-group.tsx

@@ -1,6 +1,6 @@
 import {Children, cloneElement, CSSProperties, ReactElement} from "react";
 import {css, cx} from "@linaria/core";
-import {border} from "../designSystem";
+import {border} from "../design-system";
 
 const ordersInRowGroup = {
   first: css`

package/src/Button/button.tsx

@@ -4,9 +4,9 @@ import {styled} from "@linaria/react";
 import cx from "classnames";
 import _ from "lodash";
 import React, {forwardRef} from "react";
-import {Item} from "../Item";
-import {useTheme} from "../ThemeProvider";
-import {border, colors, getOpacities, opacity, space, textStyles} from "../designSystem";
+import {Item} from "../item";
+import {useTheme} from "../theme-provider";
+import {border, colors, getOpacities, opacity, space, textStyles} from "../design-system";
 import {IconBaseProps} from "../icons/types";
 import {Spinner} from "../loaders";
 import {ButtonBase, ButtonBaseProps, buttonBorderWidth, getMainColor, getTextColor} from "./button-base";

package/src/Button/icon-button.tsx

@@ -7,6 +7,7 @@ export type IconButtonSize = "super-small" | "small" | "normal" | "big";
 
 export type IconButtonProps = Omit<ButtonBaseProps, "borderless"> & {
   size?: IconButtonSize;
+  classNameOverride?: string;
 };
 
 const Paddings = {

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

@@ -0,0 +1,22 @@
+import React from "react";
+import RemoveIcon from "../../icons/react/Remove";
+import {ClearIndicatorProps, GroupBase, MultiValueRemoveProps} from "react-select";
+import {Button} from "../../Button/button";
+
+export function ClearIndicator<
+  TOption,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<TOption> = GroupBase<TOption>
+>({
+  innerProps,
+  selectProps,
+}: ClearIndicatorProps<TOption, IsMulti, Group> | MultiValueRemoveProps<TOption, IsMulti, Group>) {
+  if (selectProps.isDisabled) {
+    return null;
+  }
+  return (
+    <div {...innerProps}>
+      <Button borderless Icon={RemoveIcon} disabled={selectProps.isDisabled} size={":button-size/super-small"} />
+    </div>
+  );
+}

package/src/Select/custom-select-partials/drop-down-indicator.tsx

@@ -0,0 +1,26 @@
+import cn from "classnames";
+import {DropdownIndicatorProps} from "react-select";
+import {expanderExpandedStyle} from "../styles";
+import ArrowCollapseVertical from "../../icons/react/ArrowCollapseVertical";
+import {themeVars, transition} from "../../design-system";
+import React from "react";
+import {css} from "@linaria/core";
+import {GroupBase} from "../index";
+
+const expanderStyle = css`
+  transition: transform ${transition};
+`;
+export function DropdownIndicator<
+  TOption,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<TOption> = GroupBase<TOption>
+>(props: DropdownIndicatorProps<TOption, IsMulti, Group>) {
+  if (props.selectProps.isDisabled) {
+    return null;
+  }
+  return (
+    <div className={cn(expanderStyle, props.selectProps.menuIsOpen && expanderExpandedStyle)}>
+      <ArrowCollapseVertical color={themeVars.disabledTextColor} />
+    </div>
+  );
+}

package/src/Select/custom-select-partials/group-heading.tsx

@@ -0,0 +1,54 @@
+import {GroupBase} from "../index";
+import {components} from "react-windowed-select";
+import {GroupHeadingProps} from "react-select";
+import {css} from "@linaria/core";
+import {layout, space, textStyles, themeVars} from "../../design-system";
+import React from "react";
+export const groupHeadingNulledStyles = {
+  paddingLeft: "",
+  paddingRight: "",
+  paddingTop: "",
+  margin: "",
+  ...textStyles.small,
+  color: "",
+  height: layout.menuItemHeight,
+};
+const groupHeadingClass = css`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: ${space.m + space.xs}px ${space.m}px ${space.l}px ${space.m}px;
+  color: ${themeVars.disabledTextColor};
+`;
+const groupDividerContainerStyle = css`
+  padding: ${space.l}px 0;
+  box-sizing: content-box;
+`;
+
+const groupDividerStyle = css`
+  width: 100%;
+  border-top: 1px solid #eeeff1;
+`;
+const GroupDivider = () => (
+  <div className={groupDividerContainerStyle}>
+    <div className={groupDividerStyle}></div>
+  </div>
+);
+export function GroupHeading<
+  Option,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({children, ...props}: GroupHeadingProps<Option, IsMulti, Group>) {
+  if (props.data.separator) {
+    return <GroupDivider />;
+  }
+
+  if (!children) {
+    return null;
+  }
+  return (
+    <components.GroupHeading {...props} className={groupHeadingClass}>
+      {children}
+    </components.GroupHeading>
+  );
+}

package/src/Select/custom-select-partials/menu.tsx

@@ -0,0 +1,25 @@
+import {GroupBase} from "../index";
+import {CSSObjectWithLabel, MenuProps} from "react-select";
+import cn from "classnames";
+import {components} from "react-windowed-select";
+import {css} from "@linaria/core";
+import {border, themeVars} from "../../design-system";
+
+export const MenuNulledStyles: CSSObjectWithLabel = {
+  backgroundColor: "",
+  borderRadius: "",
+  boxShadow: "",
+};
+const MenuRootClass = css`
+  color: ${themeVars.disabledTextColor};
+  z-index: 1050;
+  background-color: ${themeVars.colorBgSelectMenu};
+  box-shadow: ${themeVars.shadowSelectMenu};
+  border-radius: ${border.radius6}px;
+  overflow: hidden;
+`;
+export function Menu<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(
+  props: MenuProps<Option, IsMulti, Group>
+) {
+  return <components.Menu {...props} className={cn(props.className, MenuRootClass, "react-select-menu")} />;
+}

package/src/Select/custom-select-partials/no-option-message.tsx

@@ -0,0 +1,10 @@
+import React, {ReactNode} from "react";
+import {css} from "@linaria/core";
+import {space} from "../../design-system";
+
+const NopOptionMessageClass = css`
+  padding: ${space.l + 2}px ${space.m}px;
+`;
+export const NoOptionsMessage = ({children}: {children: ReactNode}) => {
+  return <div className={NopOptionMessageClass}>{children}</div>;
+};

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

@@ -0,0 +1,92 @@
+import {OptionProps} from "react-select";
+import {components} from "react-windowed-select";
+import {GroupBase} from "../index";
+import {css, cx} from "@linaria/core";
+import {border, layout, space, textStyles, themeVars, transition} from "../../design-system";
+import {useMemo} from "react";
+
+export const OptionNulledStyles = {
+  height: layout.menuItemHeight,
+};
+const OptionWrapperClass = css`
+  max-width: 100%;
+  flex-basis: 100%;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  ${{...textStyles.regular}};
+  color: ${themeVars.textColor};
+  background: ${themeVars.colorBgSelectOptionDefault};
+  border-radius: ${border.radius6}px;
+  padding: 0 ${space.s}px;
+  column-gap: ${space.xs}px;
+  transition: background-color ${transition}, color ${transition};
+`;
+const OptionRootClass = css`
+  padding: 0 ${space.s}px ${space.xxs}px;
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+  cursor: pointer;
+  &:hover {
+    .${OptionWrapperClass} {
+      background: ${themeVars.colorBgSelectOptionDefaultHover};
+    }
+  }
+`;
+
+const DisabledOptionClass = css`
+  cursor: not-allowed;
+  .${OptionWrapperClass} {
+    > * {
+      opacity: ${themeVars.opacitySelectOptionDisabled};
+    }
+    background: ${themeVars.colorBgSelectOptionDisabled};
+  }
+  &:hover {
+    .${OptionWrapperClass} {
+      background: ${themeVars.colorBgSelectOptionDisabled};
+    }
+  }
+`;
+const SelectedOptionClass = css`
+  cursor: default;
+  .${OptionWrapperClass} {
+    background: ${themeVars.colorBgSelectOptionSelected};
+  }
+  &:hover {
+    .${OptionWrapperClass} {
+      background: ${themeVars.colorBgSelectOptionSelectedHover};
+    }
+  }
+  &.${DisabledOptionClass} {
+    background: ${themeVars.colorBgSelectOptionSelectedDisabled};
+    &:hover {
+      background: ${themeVars.colorBgSelectOptionSelectedDisabled};
+    }
+  }
+`;
+export function Option<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(
+  props: OptionProps<Option, IsMulti, Group>
+) {
+  const {children, ...rest} = props;
+  const {isDisabled, isFocused} = rest;
+  const className = useMemo(
+    () =>
+      cx(
+        rest.innerProps.className,
+        OptionRootClass,
+        isFocused && SelectedOptionClass, //do not use isSelected as flag to determine if item is selected. It is not always true, bug
+        isDisabled && DisabledOptionClass
+      ),
+    [rest.innerProps.className, isDisabled, isFocused]
+  );
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const {onMouseMove, onMouseOver, ...truncatedProps} = rest.innerProps;
+  const newProps = Object.assign(rest, {innerProps: truncatedProps});
+  return (
+    <components.Option {...newProps} className={className}>
+      <div className={OptionWrapperClass}>{children}</div>
+    </components.Option>
+  );
+}

package/src/Select/index.tsx

@@ -1,39 +1,33 @@
-/* eslint-disable */
-import cn from "classnames";
 import {forwardRef, useCallback, useMemo, useState} from "react";
 import BaseSelect, {
+  ActionMeta,
+  components as reactSelectComponents,
   createFilter,
   GroupBase as ReactSelectGroupBase,
-  GroupHeadingProps,
   MenuListProps,
   MenuProps,
   mergeStyles,
   MultiValue,
   MultiValueProps,
+  OnChangeValue,
   OptionProps,
   OptionsOrGroups,
   Props as BaseSelectProps,
+  PropsValue,
   SingleValue,
   SingleValueProps,
   StylesConfig,
-  ActionMeta,
-  OnChangeValue,
-  PropsValue,
-  components as reactSelectComponents,
 } from "react-select";
 import BaseCreatableSelect, {CreatableProps} from "react-select/creatable";
 import WindowedSelect, {components, WindowedMenuList} from "react-windowed-select";
-import {createInlineTheme} from "../designSystem";
-import {useTheme} from "../ThemeProvider";
-import {
-  ClearIndicator,
-  DropdownIndicator,
-  GroupDivider,
-  NoOptionsMessage,
-  Option as OptionComponent,
-} from "./components";
 import {componentsStyles, singleLineComponentsStyle, virtualizedStyles, zIndexStyles} from "./styles";
 import {useSelectControlSettings} from "./select-control-settings-context";
+import {Option} from "./custom-select-partials/option";
+import {Menu} from "./custom-select-partials/menu";
+import {GroupHeading} from "./custom-select-partials/group-heading";
+import {DropdownIndicator} from "./custom-select-partials/drop-down-indicator";
+import {NoOptionsMessage} from "./custom-select-partials/no-option-message";
+import {ClearIndicator} from "./custom-select-partials/clear-indicator";
 
 type GroupBase<T> = ReactSelectGroupBase<T> & {separator?: boolean};
 
@@ -52,32 +46,6 @@ export type {
   OnChangeValue,
   PropsValue,
 };
-
-function GroupHeading<
-  Option = unknown,
-  IsMulti extends boolean = boolean,
-  Group extends GroupBase<Option> = GroupBase<Option>
->({children, ...props}: GroupHeadingProps<Option, IsMulti, Group>) {
-  if (props.data.separator) {
-    return <GroupDivider />;
-  }
-
-  if (!children) {
-    return null;
-  }
-
-  return <components.GroupHeading {...props}>{children}</components.GroupHeading>;
-}
-
-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)}};
-  return <components.Menu {...props} innerProps={overridedInnerProps} className={cn(className, "react-select-menu")} />;
-}
-
 export {WindowedMenuList};
 
 export {components};
@@ -191,7 +159,7 @@ export const Select = forwardRef(function Select<
       zIndex ? zIndexStyles(zIndex) : {},
       styles,
     ] as StylesConfig<Option, IsMulti, Group>[]);
-  }, [styles, virtualized]);
+  }, [styles, virtualized, zIndex]);
 
   return (
     <SelectComponent
@@ -205,10 +173,10 @@ export const Select = forwardRef(function Select<
       backspaceRemovesValue={isCollectionMode}
       tabSelectsValue={false}
       components={{
-        Menu,
+        Menu: Menu,
         DropdownIndicator,
         ClearIndicator,
-        Option: OptionComponent,
+        Option,
         MultiValueRemove: ClearIndicator,
         NoOptionsMessage,
         GroupHeading,
@@ -231,8 +199,10 @@ export const Select = forwardRef(function Select<
 export const CreatableSelect = forwardRef(CreatableSelectInner) as <
   Option = unknown,
   IsMulti extends boolean = boolean,
+  // eslint-disable-next-line no-use-before-define
   Group extends GroupBase<Option> = GroupBase<Option>
 >(
+  // eslint-disable-next-line no-use-before-define
   props: CreatableProps<Option, IsMulti, Group> & SelectProps<Option, IsMulti, Group>
 ) => ReturnType<typeof CreatableSelectInner>;
 
@@ -249,6 +219,7 @@ export function CreatableSelectInner<
     virtualized = true,
     ...rest
   }: CreatableProps<Option, IsMulti, Group> & SelectProps<Option, IsMulti, Group>,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ref: any
 ) {
   return (
@@ -264,11 +235,11 @@ export function CreatableSelectInner<
       backspaceRemovesValue={isCollectionMode}
       tabSelectsValue={false}
       components={{
-        Menu,
+        Menu: Menu,
         MenuList: virtualized ? WindowedMenuList : reactSelectComponents.MenuList,
         DropdownIndicator,
         ClearIndicator,
-        Option: OptionComponent,
+        Option,
         MultiValueRemove: ClearIndicator,
         NoOptionsMessage,
         GroupHeading,

package/src/Select/select-in-popover.tsx

@@ -1,5 +1,5 @@
 import {css, cx} from "@linaria/core";
-import {border, radius, space, textStyles} from "../designSystem";
+import {border, radius, space, textStyles} from "../design-system";
 import {inputOverrides} from "../antd/styles";
 import React, {
   ComponentType,
@@ -72,7 +72,7 @@ export const selectInPopupStyles = {
   }),
   option: (props: $TSFixMe) => ({
     ...props,
-    borderRadius: border.radius3,
+    borderRadius: border.radius4,
   }),
   menu: (props: $TSFixMe) => ({
     ...props,

package/src/Select/styles.ts

@@ -1,14 +1,11 @@
 import {css} from "@linaria/core";
-import {Property} from "csstype";
-import type {StylesConfig, CSSObjectWithLabel, ControlProps} from "react-select";
+import type {ControlProps, CSSObjectWithLabel, StylesConfig} from "react-select";
 import {inputOverrides} from "../antd/styles";
-import {border, layout, space, textStyles, themeVars, transition} from "../designSystem";
+import {layout, space, themeVars} from "../design-system";
+import {OptionNulledStyles} from "./custom-select-partials/option";
+import {MenuNulledStyles} from "./custom-select-partials/menu";
+import {groupHeadingNulledStyles} from "./custom-select-partials/group-heading";
 
-export const expanderStyle = css`
-  ${{
-    transition: `transform ${transition}`,
-  }}
-`;
 export const expanderExpandedStyle = css`
   transform: rotate(180deg);
 `;
@@ -45,10 +42,7 @@ function createControlStyle({
 }
 
 export const virtualizedStyles: StylesConfig = {
-  option: (provided) => ({
-    ...provided,
-    height: layout.menuItemHeight,
-  }),
+  option: () => OptionNulledStyles,
   groupHeading: (provided) => ({
     ...provided,
     height: layout.menuItemHeight,
@@ -70,36 +64,9 @@ export const zIndexStyles = (zIndex: number): StylesConfig => ({
 });
 
 export const componentsStyles: StylesConfig = {
-  option: (provided, state) => {
-    const disabledStyles = {
-      cursor: "not-allowed",
-      color: themeVars.disabledTextColor,
-    };
-    const enabledStyles = {
-      ":hover": {
-        backgroundColor: state.isFocused ? themeVars.actionMenuInnerHover : themeVars.actionMenuInnerHover,
-      },
-      ":active": {
-        backgroundColor: themeVars.actionMenuInnerHover,
-      },
-    };
-    return {
-      ...provided,
-      ...textStyles.regular,
-      minHeight: layout.menuItemHeight,
-      paddingLeft: space.l,
-      paddingRight: space.l,
-      paddingTop: 0,
-      paddingBottom: 0,
-      margin: 0,
-      backgroundColor: state.isFocused ? themeVars.actionMenuInnerHover : themeVars.actionMenuInnerBg,
-      cursor: "pointer",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "stretch",
-      ...(state.isDisabled ? disabledStyles : enabledStyles),
-    };
-  },
+  option: () => ({
+    minHeight: layout.menuItemHeight,
+  }),
   placeholder: (provided) => ({
     ...provided,
     color: themeVars.disabledTextColor,
@@ -140,12 +107,7 @@ export const componentsStyles: StylesConfig = {
   multiValueLabel: () => ({}),
   groupHeading: (provided) => ({
     ...provided,
-    paddingLeft: space.l,
-    paddingRight: space.m,
-    paddingTop: space.m + space.xs,
-    margin: 0,
-    ...textStyles.small,
-    color: themeVars.disabledTextColor,
+    ...groupHeadingNulledStyles,
   }),
   menuPortal: (provided) => ({
     ...provided,
@@ -153,11 +115,7 @@ export const componentsStyles: StylesConfig = {
   }),
   menu: (provided) => ({
     ...provided,
-    color: themeVars.disabledTextColor,
-    zIndex: 1050,
-    backgroundColor: themeVars.actionMenuInnerBg,
-    boxShadow: themeVars.actionMenuShadow as unknown as Property.BoxShadow,
-    borderRadius: border.radius6,
+    ...MenuNulledStyles,
   }),
   container: (provided, state) => ({
     ...provided,

package/src/antd/styles.ts

@@ -1,5 +1,5 @@
 import {css} from "@linaria/core";
-import {colors, layout, border, shadows, space, textStyles, themeVars, transition} from "../designSystem";
+import {colors, layout, border, shadows, space, textStyles, themeVars, transition} from "../design-system";
 
 const inputVariables = {
   default: {

package/src/back-button.tsx

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

package/src/create-inline-theme.ts

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
 export const varPrefix = process.env.VAR_THEME_PREFIX || "fibery";
 
 export function createInlineTheme<T extends Record<string, unknown>>(