@fibery/ui-kit 1.18.0 → 1.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.18.0",
+  "version": "1.20.0",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -17,12 +17,12 @@
     "src/loaders.tsx",
     "src/loading-sausage.tsx",
     "src/icons/**/*.ts*",
-    "src/Select",
+    "src/select",
     "src/error-alert.tsx",
     "src/pallete.ts",
     "src/tooltip.tsx",
     "src/back-button.tsx",
-    "src/Button",
+    "src/button",
     "src/emoji-picker/**/*.ts*",
     "src/toast/**/*.ts*",
     "src/a11y-color.ts"
@@ -48,11 +48,12 @@
     "cmdk": "0.2.0",
     "color-hash": "1.0.3",
     "d3-shape": "1.3.7",
-    "date-fns": "^2.29.2",
+    "date-fns": "2.29.2",
     "invariant": "2.2.4",
     "lodash": "4.17.21",
     "md5": "2.2.1",
     "moment": "2.29.4",
+    "popper-max-size-modifier": "0.2.0",
     "prop-types": "15.7.2",
     "rc-input-number": "7.3.11",
     "rc-menu": "9.8.1",
@@ -67,8 +68,8 @@
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
     "@fibery/helpers": "1.2.0",
-    "@fibery/emoji-data": "2.2.0",
-    "@fibery/react": "1.1.0"
+    "@fibery/react": "1.3.0",
+    "@fibery/emoji-data": "2.2.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -85,6 +86,7 @@
     "@types/chroma-js": "2.1.3",
     "@types/color-hash": "1.0.2",
     "@types/invariant": "2.2.34",
+    "@types/jest": "27.0.1",
     "@types/lodash": "4.14.172",
     "@types/prop-types": "15.7.5",
     "@types/react": "18.0.26",
@@ -101,7 +103,7 @@
     "typescript": "5.1.6",
     "unist-util-reduce": "0.2.2",
     "@fibery/babel-preset": "7.3.0",
-    "@fibery/eslint-config": "8.4.0"
+    "@fibery/eslint-config": "8.5.0"
   },
   "jest": {
     "testEnvironment": "jsdom",

package/src/a11y-color.ts

@@ -59,23 +59,26 @@ const checkColor = (colorValue: string) => {
  * @return {string}            - The closest hex color for `toMakeA11y` on `background`
  */
 export function a11yColor(toMakeA11y: string, background: string, minimumContrast = 3.0) {
+  const key = toMakeA11y + background + minimumContrast;
+  if (cache.has(key)) {
+    return cache.get(key);
+  }
   if (!checkColor(toMakeA11y) || !checkColor(background)) {
+    cache.put(key, toMakeA11y);
     return toMakeA11y;
   }
 
   if (minimumContrast < 0 && minimumContrast > 21) {
     throw new Error(`Minimum contrast must be a number between 0 and 21. It was ${minimumContrast}`);
   }
-  const key = toMakeA11y + background + minimumContrast;
-  if (cache.has(key)) {
-    return cache.get(key);
-  }
   const a11y = chroma(toMakeA11y);
   const bg = chroma(background);
 
   // Check the ratio straight away, if it passes return the value as hex
   if (chroma.contrast(background, toMakeA11y) >= minimumContrast) {
-    return a11y.hex();
+    const val = a11y.hex();
+    cache.put(key, val);
+    return val;
   }
 
   // Ratio didn't pass so we need to find the nearest color
@@ -142,6 +145,6 @@ export function a11yColor(toMakeA11y: string, background: string, minimumContras
       minLightness = midLightness;
     }
   }
-
+  cache.put(key, foundColor);
   return foundColor;
 }

package/src/antd/styles.ts

@@ -27,8 +27,8 @@ export const inputOverrides = {
     minHeight: layout.inputHeight,
     paddingTop: 0,
     paddingBottom: 0,
-    paddingLeft: space.l,
-    paddingRight: space.l,
+    paddingLeft: space.s12,
+    paddingRight: space.s12,
     border: 0,
     borderColor: colors.transparent,
     transition: `box-shadow ${transition}`,
@@ -114,8 +114,8 @@ export const inputStyles = css`
       "& .ant-input.ant-input-disabled": inputOverrides.disabled,
     },
     "& textarea.ant-input": {
-      paddingTop: space.m,
-      paddingBottom: space.m,
+      paddingTop: space.s8,
+      paddingBottom: space.s8,
     },
     "& .ant-select-disabled .ant-select-selection": {
       backgroundColor: colors.transparent,
@@ -128,7 +128,7 @@ export const inputStyles = css`
     "&& input::placeholder, && textarea::placeholder": {
       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
+    "& .ant-input-affix-wrapper .ant-input-prefix": {left: space.s6},
+    "& .ant-input-affix-wrapper .ant-input:not(:first-child)": {paddingLeft: space.s6 + space.s24 + space.s8}, // Match TitlePreview spacing
   }}
 `;

package/src/back-button.tsx

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

package/src/{Button → button}/button.tsx

@@ -119,11 +119,11 @@ const shortcutStyle = css`
     ...textStyles.small,
     color: "currentColor",
     borderRadius: border.radius4,
-    paddingLeft: space.xs,
-    paddingRight: space.xs,
-    paddingBottom: space.xxs,
-    marginRight: -space.xs,
-    marginLeft: space.xxs,
+    paddingLeft: space.s4,
+    paddingRight: space.s4,
+    paddingBottom: space.s2,
+    marginRight: -space.s4,
+    marginLeft: space.s2,
     opacity: opacity.opacity80,
     display: "inline-block",
   }}

package/src/button.tsx

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

package/src/design-system.ts

@@ -262,13 +262,16 @@ export const themeColors = {
       getOpacities(slateDark.slate1).opacity40
     }`,
   ],
-  colorBgSelectOptionDefault: [transparent, transparent],
-  colorBgSelectOptionDefaultHover: [slate.slate4, slateDark.slate4],
-  colorBgSelectOptionSelected: [indigo.indigo4, indigoDark.indigo4],
-  colorBgSelectOptionSelectedHover: [indigo.indigo6, indigoDark.indigo6],
-  colorBgSelectOptionDisabled: [transparent, transparent],
-  colorBgSelectOptionSelectedDisabled: [indigo.indigo5, indigoDark.indigo5],
-  opacitySelectOptionDisabled: [`${opacity.opacity40}`, `${opacity.opacity40}`],
+  colorBgListItemGeneral: [transparent, transparent],
+  colorBgListItemGeneralHover: [slate.slate3, slateDark.slate4],
+  colorBgListItemGeneralFocus: [slate.slate4, slateDark.slate6],
+  colorBgListItemGeneralSelected: [indigo.indigo3, indigoDark.indigo4],
+  colorBgListItemGeneralSelectedHover: [indigo.indigo4, indigoDark.indigo6],
+  colorBgListItemGeneralSelectedFocus: [indigo.indigo4, indigoDark.indigo6],
+  colorBgListItemGeneralDisabled: [transparent, transparent],
+  colorTextListItemGeneralDisabled: [slate.slate9, slateDark.slate9],
+  colorBgListItemGeneralSelectedDisabled: [indigo.indigo5, indigoDark.indigo5],
+  opacityListItemGeneralDisabled: [`${opacity.opacity40}`, `${opacity.opacity40}`],
 
   // Search Items
   colorBgSearchItemHover: [slate.slate4, slateDark.slate4],
@@ -308,13 +311,21 @@ export const themeColors = {
   // Selected Entity Box State
   colorBgEntityBoxSelected: [indigo.indigo2, indigoDark.indigo3],
   shadowStrokeEntityBoxSelected: [
-    `0 0 0 1px ${indigo.indigo9}, 0 0 0 3px ${getOpacities(indigo.indigo9).opacity40}`,
+    `0 0 0 1px ${getOpacities(indigo.indigo9).opacity40}, 0 0 0 3px ${getOpacities(indigo.indigo9).opacity40}`,
     `0 0 0 1px ${indigoDark.indigo9}, 0 0 0 3px ${getOpacities(indigoDark.indigo9).opacity40}`,
   ],
   // :hover
   colorBgEntityBoxSelectedHover: [indigo.indigo3, indigoDark.indigo3],
+  shadowStrokeEntityBoxSelectedHover: [
+    `0 0 0 1px ${getOpacities(indigo.indigo9).opacity60}, 0 0 0 3px ${getOpacities(indigo.indigo9).opacity40}`,
+    `0 0 0 1px ${indigoDark.indigo9}, 0 0 0 3px ${getOpacities(indigoDark.indigo9).opacity40}`,
+  ],
   //::drag
   colorBgEntityBoxSelectedDrag: [indigo.indigo3, indigoDark.indigo3],
+  shadowStrokeEntityBoxSelectedDrag: [
+    `0 0 0 1px ${getOpacities(indigo.indigo9).opacity40}, 0 0 0 3px ${getOpacities(indigo.indigo9).opacity40}`,
+    `0 0 0 1px ${indigoDark.indigo9}, 0 0 0 3px ${getOpacities(indigoDark.indigo9).opacity40}`,
+  ],
   // Disabled Entity Box State (done)
   opacityEntityBoxDisabled: [`${opacity.opacity65}`, `${opacity.opacity65}`],
   // :hover
@@ -337,6 +348,11 @@ export const themeColors = {
     `0 0 0 1px ${getOpacities(slateDark.slate2).opacity10}, 0 2px 4px -4px ${getOpacities(slateDark.slate2).opacity20}`,
   ],
 
+  colorBgMenuHeaderAvatar: [whiteA.whiteA0, slateDark.slate2],
+  shadowMenuHeaderAvatar: [
+    `0px 1px 4px ${getOpacities(slate.slate11).opacity10}, 0 0 0 1px ${getOpacities(slate.slate5).opacity50}`,
+    `0 0 0 1px ${getOpacities(slateDark.slate9).opacity20}`,
+  ],
   // Main Menu Items Styles and States
   // Dragged
   opacityMenuItemDragged: [`${opacity.opacity40}`, `${opacity.opacity40}`],
@@ -354,6 +370,8 @@ export const themeColors = {
   colorBgMenuItemSelectedHover: [indigo.indigo6, indigoDark.indigo6],
   // :focus, :focus:hover
   colorBgMenuItemSelectedFocused: [indigo.indigo6, indigoDark.indigo6],
+  colorBgFieldEditorContainer: [slate.slate2, slateDark.slate3],
+  colorBgFieldEditorLinkEqualSign: [slate.slate6, slateDark.slate2],
   allowedDropColor: [getOpacities(slate.slate3).opacity80, getOpacities(slateDark.slate3).opacity80],
   relationViewBgColor: [slate.slate2, slateDark.slate3],
   unitBg: [slate.slate3, slateDark.slate6],
@@ -396,10 +414,10 @@ export const themeColors = {
   progressIconFill: [getOpacities(slate.slate12).opacity80, getOpacities(slateDark.slate12).opacity80],
   progressIconDoneBg: [getOpacities(slate.slate12).opacity80, getOpacities(slateDark.slate12).opacity90],
   progressIconDoneFill: [getOpacities(slate.slate1).opacity95, getOpacities(slateDark.slate1).opacity80],
-  instrumentsMenuBg: [getOpacities(whiteA.whiteA0).opacity85, getOpacities(slateDark.slate4).opacity95],
+  instrumentsMenuBg: [getOpacities(whiteA.whiteA0).opacity95, getOpacities(slateDark.slate4).opacity95],
   instrumentsMenuShadow: [
-    `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 4px -4px ${getOpacities(slate.slate10).opacity20}`,
-    `0px 2px 8px ${getOpacities(slate.slate2).opacity95}`,
+    `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 8px -6px ${getOpacities(slate.slate10).opacity30}`,
+    `0 0 0 1px ${getOpacities(slateDark.slate1).opacity10}, 0 2px 8px -6px ${getOpacities(slateDark.slate1).opacity40}`,
   ],
   selectedColorBorder: [getOpacities(slate.slate6).opacity50, getOpacities(slate.slate6).opacity20],
   formBg: [slate.slate2, slateDark.slate2],
@@ -411,9 +429,9 @@ export const themeColors = {
   filterGroup1Bg: [slate.slate2, slateDark.slate6],
   filterGroup2Bg: [slate.slate3, slateDark.slate7],
   filterGroupBorder: [blackA.blackA3, whiteA.whiteA3],
-  colorBgNotificationHover: [slate.slate4, slateDark.slate4],
-  colorBgNotificationSelected: [indigo.indigo4, indigoDark.indigo4],
-  colorBgNotificationSelectedHover: [indigo.indigo6, indigoDark.indigo6],
+  colorBgNotificationHover: [slate.slate3, slateDark.slate4],
+  colorBgNotificationSelected: [indigo.indigo3, indigoDark.indigo4],
+  colorBgNotificationSelectedHover: [indigo.indigo4, indigoDark.indigo6],
   disabledInversedTextColor: [shades.opacity25, lights.opacity25],
   danger: [red.red9, redDark.red10],
   active: [red.red9, redDark.red10],
@@ -436,7 +454,7 @@ export const themeColors = {
   richTextTableBorder: [blackA.blackA5, whiteA.whiteA7],
   gridHeaderBgColor: [slate.slate2, slateDark.slate3],
   gridHeaderHoverBgColor: [slate.slate3, slateDark.slate4],
-  gridHeaderTextColor: [slate.slate9, slateDark.slate10],
+  gridHeaderTextColor: [slate.slate10, slateDark.slate11],
   gridCellBgColor: [whiteA.whiteA0, slateDark.slate2],
   gridCellBorderColor: [slate.slate5, slateDark.slate6],
   gridPinnedCellBorderColor: [slate.slate8, slateDark.slate8],
@@ -448,7 +466,7 @@ export const themeColors = {
   gridDisabledSelectedCellBgColor: [indigo.indigo4, indigoDark.indigo5],
   gridActiveCellBorderColor: [indigo.indigo8, indigoDark.indigo9],
   colorBgReactionsDefault: [slate.slate3, slateDark.slate6],
-  colorBgReactionsHover: [slate.slate1, slateDark.slate2],
+  colorBgReactionsHover: [whiteA.whiteA0, slateDark.slate2],
   colorBorderReactionsHover: [slate.slate8, slateDark.slate9],
   colorBgReactionsSelectedDefault: [indigo.indigo3, indigoDark.indigo8],
   colorBorderReactionsSelectedDefault: [indigo.indigo8, indigoDark.indigo8],
@@ -456,6 +474,7 @@ export const themeColors = {
   colorBorderReactionsSelectedHover: [indigo.indigo9, indigo.indigo10],
   colorTextReactionsSelected: [indigo.indigo10, slateDark.slate12],
   colorBgToastDefault: [slate.slate1, slateDark.slate1],
+  colorBgDbTabHover: [slate.slate3, slateDark.slate4],
 } as const;
 
 type ThemeDefs = typeof themeColors;
@@ -610,10 +629,24 @@ export const getLinkedHighlightBackgroundColor = _.memoize(
   (themeMode, color) => `${themeMode}-${color}`
 );
 
+export const getLinkedHighlightDecorationBackgroundColor = _.memoize(
+  (themeColors: ThemeColors, color: string): string => {
+    switch (themeColors.mode) {
+      case "dark":
+        return makeChromaColor(color).alpha(0.9).luminance(0.5).darken(0.2).css();
+      case "light":
+        return makeChromaColor(color).alpha(0.9).luminance(0.5).css();
+      default:
+        return makeChromaColor(color).alpha(0.9).luminance(0.5).css();
+    }
+  },
+  (themeMode, color) => `${themeMode}-${color}`
+);
+
 export const getEnumBackgroundColor = _.memoize(
   (mode: ThemeMode, color: string) => {
     return getThemeValue(mode, {
-      light: a11yColor(getOpacities(color).opacity20, lightColors.whiteColor, 1),
+      light: a11yColor(getOpacities(color).opacity15, lightColors.whiteColor, 1),
       dark: a11yColor(getOpacities(color).opacity30, darkColors.menuBg, 1.3),
     });
   },
@@ -670,24 +703,42 @@ export const colors = {
 } as const;
 
 export const space = {
-  xxs: 2, // Not recommended
-  xs: 4,
-  s: 6,
-  m: 8,
-  l: 12,
-  xl: 24,
-  xxl: 48, // Not recommended
+  spaceAuto: "auto",
+  s0: 0,
+  s1: 1,
+  s2: 2,
+  s4: 4,
+  s6: 6,
+  s8: 8,
+  s10: 10,
+  s12: 12,
+  s14: 14,
+  s16: 16,
+  s20: 20,
+  s24: 24,
+  s28: 28,
+  s32: 32,
+  s36: 36,
+  s40: 40,
+  s44: 44,
+  s48: 48,
+  s56: 56,
+  s64: 64,
+  s80: 80,
+  s96: 96,
+  s112: 112,
+  s128: 128,
 } as const;
 /** Token for nested items spacing in nested trees */
-export const spaceNestedTreeLevel = 40;
+export const spaceNestedTreeLevel = 28;
 export const spaceNestedTreeInterval = 0;
 export const layout = {
-  logoSize: 24,
+  logoSize: 16,
   menuDefaultWidth: 243,
-  menuMinWidth: 46, //TODO: make dependency to itemHeight
+  menuMinWidth: 47, //TODO: make dependency to itemHeight
   menuMaxWidth: 480,
   menuItemMinWidth: 80,
-  menuGroupHeaderIndent: 40, // I'm ok
+  menuGroupHeaderIndent: 28, // I'm ok
   menuItemLevelIndent: 24,
   listItemHeight: 38,
   itemHeight: 36,
@@ -695,7 +746,7 @@ export const layout = {
   groupTitleHeight: 30,
   menuItemHeight: 32,
   newMenuItemHeight: 30, // I'm ok
-  viewHeaderHeight: space.l * 7,
+  viewHeaderHeight: space.s12 * 7,
   viewHeaderCompactHeight: 52,
   columnMinWidth: 240,
   columnWidths: {compact: 200, default: 240, list: 280, full: 320},
@@ -703,7 +754,7 @@ export const layout = {
   typeEditorWidth: "30vw",
   typeEditorMinWidth: 480,
   viewSetupWidth: "30vw",
-  viewSetupMinWidth: 525,
+  viewSetupMinWidth: 380,
   inputHeight: 36, //TODO: merge input and item height?
   timelineLineHeight: 46,
   timelineGroupPadding: 6,
@@ -721,8 +772,6 @@ export const layout = {
   unitHeight: 18,
 } as const;
 
-export const radius = 3;
-
 export const border = {
   radius0: 0,
   radius1: 1,
@@ -947,7 +996,7 @@ export const textStyles = {
     lineHeight: lineHeight.regular,
     fontWeight: fontWeight.regular,
     color: themeVars.textColor,
-    borderRadius: radius,
+    borderRadius: border.radius6,
   },
   important: {
     fontFamily,
@@ -956,6 +1005,6 @@ export const textStyles = {
     fontWeight: fontWeight.regular,
     color: themeVars.textColor,
     border: `1px solid ${themeVars.active}`,
-    borderRadius: radius,
+    borderRadius: border.radius6,
   },
 } as const;

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

@@ -1,8 +1,8 @@
 import {css, cx} from "@linaria/core";
 import {useState} from "react";
-import {IconButton} from "../Button/icon-button";
-import {CollapsibleContent, CollapsibleRoot, CollapsibleTrigger} from "../Collapsible";
-import {ColorPicker} from "../ColorPicker";
+import {IconButton} from "../button/icon-button";
+import {CollapsibleContent, CollapsibleRoot, CollapsibleTrigger} from "../collapsible";
+import {ColorPicker} from "../color-picker";
 import {useThemeMode} from "../theme-provider";
 import {getIconColor, space} from "../design-system";
 import ColorCoding from "../icons/react/ColorCoding";
@@ -14,7 +14,7 @@ import {EmojiPickerSearch} from "./primitives/search";
 import {Tooltip} from "../tooltip";
 
 const colorPickerWrapperCss = css`
-  padding-top: ${space.l}px;
+  padding-top: ${space.s12}px;
 `;
 
 const disableScrollCss = css`

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

@@ -61,10 +61,10 @@ export const EmojiPicker: React.FC<EmojiPickerProps> = ({
                 className={css`
                   position: absolute;
                   top: 4px;
-                  right: ${space.l}px;
+                  right: ${space.s12}px;
                 `}
                 style={{
-                  right: space.l + measureScrollbar(),
+                  right: space.s12 + measureScrollbar(),
                 }}
               >
                 <EmojiPickerSkinTone />

package/src/emoji-picker/icon-emoji-picker.tsx

@@ -86,7 +86,7 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
         onReset ? (
           <div
             className={css`
-              padding-right: ${space.l}px;
+              padding-right: ${space.s12}px;
             `}
           >
             <Button Icon={EmojiDelete} size={":button-size/small"} onClick={onReset}>

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

@@ -2,7 +2,7 @@ import {Category, EmojiItem} from "@fibery/emoji-data";
 import {css} from "@linaria/core";
 import {memo} from "react";
 import {useInView} from "react-intersection-observer";
-import {IconButton} from "../../Button/icon-button";
+import {IconButton} from "../../button/icon-button";
 import {space, textStyles, themeVars} from "../../design-system";
 import {Settings} from "../../icons/react";
 import {useEmojiDataStoreSelector} from "../stores/emoji-data-store";
@@ -18,13 +18,13 @@ const categoryLabelCss = css`
   ${textStyles.heading6}
   color: ${themeVars.accentTextColor};
   background-color: ${themeVars.actionMenuBg};
-  padding: ${space.l}px ${space.s}px ${space.xs}px ${space.s}px;
+  padding: ${space.s12}px ${space.s6}px ${space.s4}px ${space.s6}px;
   position: sticky;
   top: 0;
 
   display: flex;
   align-items: center;
-  gap: ${space.xs}px;
+  gap: ${space.s4}px;
 
   z-index: 1;
 `;

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

@@ -1,5 +1,5 @@
 import {FC} from "react";
-import {EmojiItem, EmojiSkin} from "@fibery/emoji-data";
+import {EmojiItem, EmojiSkin, NativeEmoji} from "@fibery/emoji-data";
 import {css, cx} from "@linaria/core";
 import {themeVars} from "../../design-system";
 import {useEmojiDataStoreSelector} from "../stores/emoji-data-store";
@@ -22,11 +22,13 @@ const emojiInlineImgCss = css`
   height: 1em;
   vertical-align: -0.1em;
   object-fit: contain;
+  overflow: hidden;
 `;
 const emojiSizedImgCss = css`
   width: 100%;
   height: 100%;
   object-fit: contain;
+  overflow: hidden;
 `;
 
 // This is needed to keep text-selection working for image based emojis Details: https://the.fibery.io/SoftDev/bug/Improve-selection-text-with-emojis-8963
@@ -43,9 +45,25 @@ export type EmojiProps = {
   /** render emoji as native unicode if possible */
   native?: boolean;
   fallback?: "shortcode" | "hidden";
+  showTitle?: boolean;
 };
 
-export const Emoji: FC<EmojiProps> = ({emoji: idOrColons, size, version = 14, fallback = "hidden", skin, native}) => {
+function getTitle(emoji: EmojiItem) {
+  if ((emoji as NativeEmoji).native) {
+    return emoji.colons;
+  }
+  return `:${emoji.name}:`;
+}
+
+export const Emoji: FC<EmojiProps> = ({
+  emoji: idOrColons,
+  size,
+  version = 14,
+  fallback = "hidden",
+  skin,
+  native,
+  showTitle = false,
+}) => {
   const emoji = useEmojiDataStoreSelector((store) => store.get(idOrColons, {skin}));
 
   if (!emoji) {
@@ -85,7 +103,12 @@ export const Emoji: FC<EmojiProps> = ({emoji: idOrColons, size, version = 14, fa
   const style = size ? {fontSize: size, width: size, height: size} : {};
 
   return (
-    <span style={style} className={cx(emojiWrapperCss, size && emojiWrapperSizedCss)} aria-label={emoji.name}>
+    <span
+      style={style}
+      title={showTitle ? getTitle(emoji) : undefined}
+      className={cx(emojiWrapperCss, size && emojiWrapperSizedCss)}
+      aria-label={emoji.name}
+    >
       {emojiNode}
     </span>
   );

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

@@ -4,7 +4,7 @@ import {space} from "../../design-system";
 const footerCss = css`
   position: relative;
   border-top: 1px solid var(--fibery-color-separatorColor);
-  padding: ${space.m}px ${space.l}px;
+  padding: ${space.s8}px ${space.s12}px;
   min-height: 40px;
 `;
 

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

@@ -3,7 +3,7 @@ import {space} from "../../design-system";
 import {contentHorizontalPadding} from "./layout";
 
 const pickerHeader = css`
-  padding: ${space.s}px ${contentHorizontalPadding}px;
+  padding: ${space.s6}px ${contentHorizontalPadding}px;
   position: relative;
 `;
 export const EmojiPickerHeader: React.FC<React.PropsWithChildren> = ({children}) => {

package/src/emoji-picker/primitives/layout.ts

@@ -1,5 +1,5 @@
 import {space} from "../../design-system";
 
-export const emojiPadding = space.s;
+export const emojiPadding = space.s6;
 
-export const contentHorizontalPadding = space.l;
+export const contentHorizontalPadding = space.s12;

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

@@ -2,7 +2,7 @@ import {EmojiItem} from "@fibery/emoji-data";
 import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
 import {css, cx} from "@linaria/core";
 import {startTransition, useId, useRef} from "react";
-import {IconButton} from "../../Button/icon-button";
+import {IconButton} from "../../button/icon-button";
 import {border, space, textStyles, themeVars} from "../../design-system";
 import Close from "../../icons/react/Close";
 import Search from "../../icons/react/Search";
@@ -22,8 +22,8 @@ const searchCss = css`
 
   display: flex;
   align-items: center;
-  padding-left: ${space.l}px;
-  gap: ${space.xxs}px;
+  padding-left: ${space.s12}px;
+  gap: ${space.s2}px;
 
   /* For screenreaders only, via https://stackoverflow.com/a/19758620 */
   & .sr-only {
@@ -56,13 +56,13 @@ const searchInputCss = css`
 `;
 
 const searchIconCss = css`
-  padding: ${space.xxs}px;
+  padding: ${space.s2}px;
 `;
 
 const extraActionSlotCss = css`
   background-color: var(--fibery-emoji-hover-color, ${themeVars.inputCopyBgColor});
-  border-top-right-radius: ${space.s}px;
-  border-bottom-right-radius: ${space.s}px;
+  border-top-right-radius: ${space.s6}px;
+  border-bottom-right-radius: ${space.s6}px;
 `;
 
 export type EmojiPickerSearchProps = {

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

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

package/src/error-alert.tsx

@@ -1,16 +1,16 @@
 import {css} from "@linaria/core";
 import {layout, border, space, textStyles, themeVars} from "./design-system";
-import {Button} from "./Button/button";
+import {Button} from "./button/button";
 import CloseIcon from "./icons/react/Close";
 import {useTheme} from "./theme-provider";
 
 const errorAlert = css`
   background-color: ${themeVars.errorBgColor};
-  padding: ${space.m}px ${space.l}px;
+  padding: ${space.s8}px ${space.s12}px;
   min-height: ${layout.itemHeight}px;
   border-radius: ${border.radius6}px;
   display: flex;
-  gap: ${space.s}px;
+  gap: ${space.s6}px;
   align-items: center;
 `;
 
@@ -31,7 +31,7 @@ export function ErrorAlert({
   onClose,
 }: {
   message: string;
-  description?: string;
+  description?: React.ReactNode;
   closable?: boolean;
   onClose?: () => void;
 }): JSX.Element {

package/src/form-field-loader.tsx

@@ -5,9 +5,9 @@ import {space, border, themeVars} from "./design-system";
 
 const loaderStyle = css`
   border-radius: ${border.radius6}px;
-  padding-top: ${space.m}px;
-  padding-bottom: ${space.m}px;
-  padding-left: ${space.l}px;
+  padding-top: ${space.s8}px;
+  padding-bottom: ${space.s8}px;
+  padding-left: ${space.s12}px;
   padding-right: 0;
   box-sizing: border-box;
   border: none;