@fibery/ui-kit 1.36.1 → 1.37.0

package/src/date-picker/relative-date-picker.tsx

@@ -1,7 +1,7 @@
 import {css} from "@linaria/core";
 import {space, textStyles, themeVars} from "../design-system";
 import {SingleRowSelect as SingleRowReactSelect, SingleValue} from "../select";
-import {AlwaysVisibleDropdownIndicator} from "../select/custom-select-partials/drop-down-indicator";
+import {AlwaysVisibleDropdownIndicator} from "../select/components/drop-down-indicator";
 import {RelativeDateValue} from "./types";
 import {useCallback, useMemo, useState} from "react";
 import {$TSFixMe} from "../tsfixme";

package/src/date-picker/single-date-input.tsx

@@ -143,7 +143,7 @@ export const SingleDateInput = forwardRef<
           }
         }
 
-        const [result] = getLocaleSpecificChrono().parse(inputValue);
+        const [result] = getLocaleSpecificChrono(dateFormat).parse(inputValue);
         if (result && result.start) {
           const newValue = result.start.date();
           onChange(newValue);

package/src/date-picker/utils.ts

@@ -7,9 +7,16 @@ import {
   dateTimeFormat as defaultDateTimeFormat,
 } from "../design-system";
 
-export const getLocaleSpecificChrono = () => {
+const isMonthBeforeDay = (format: string) => {
+  // Hacky way to get rid of ddd specifier, which does not matter for us here
+  const sanitizedFormat = format.replace("ddd", "").toLowerCase();
+  return sanitizedFormat.indexOf("m") < sanitizedFormat.indexOf("d");
+};
+
+export const getLocaleSpecificChrono = (dateFormat: string | undefined) => {
+  const weirdFormat = dateFormat && isMonthBeforeDay(dateFormat);
   // We use a single exception here - to support US date order, like m/d/y
-  if (navigator.language.toLowerCase().endsWith("-us")) {
+  if (weirdFormat) {
     return chrono.en;
   }
   // Otherwise, use european-style d/m/y

package/src/design-system.ts

@@ -27,6 +27,7 @@ export const typeSizes = [30, 24, 18, 16, 14, 12, 10, 8] as const;
 export const fontWeight = {
   light: 310, // 300 basic, 310 experiment with a variable Inter
   regular: 410, // 400 basic, 410 experiment with a variable Inter
+  mediumLight: 450,
   medium: 500,
   semibold: 600,
   bold: 700,
@@ -34,6 +35,8 @@ export const fontWeight = {
 
 const transparent = "rgba(255, 255, 255, 0)";
 
+export const minPanelWidth = 490;
+
 export const opacity = {
   opacity100: 1,
   opacity95: 0.95,
@@ -127,7 +130,7 @@ const stateColors = {
 const brandColors = {
   red: "#FF5400",
   green: "#08BD9F",
-  blue: "#4568FB",
+  blue: "#4978D4",
 } as const;
 
 export const getDarkenColor = _.memoize((color: string): string => {
@@ -139,58 +142,55 @@ export const themeColors = {
   brandColors: [brandColors, brandColors],
   stateColors: [stateColors, stateColors],
   colorAI: ["hsla(271, 57%, 61%, 1)", "hsla(272, 43%, 50%, 1)"],
-  colorBgAI: ["hsla(271, 57%, 61%, 0.1)", "hsla(272, 43%, 50%, 0.1)"],
+  colorBgAI: ["hsla(271, 57%, 61%, 0.09)", "hsla(272, 43%, 50%, 0.2)"],
   colorSubtleBgAI: ["hsla(271, 57%, 61%, 0.05)", "hsla(272, 43%, 50%, 0.1)"],
 
+  // Elevations
+  surfaceElevationS: [`0 2px 4px 0 ${blackA.blackA3}`, `0 2px 4px 0 ${whiteA.whiteA3}`],
+  surfaceElevationM: [`0 4px 8px 0 ${blackA.blackA5}`, `0 4px 8px 0 ${whiteA.whiteA5}`],
+  surfaceElevationL: [`0 8px 12px 0 ${blackA.blackA5}`, `0 8px 12px 0 ${whiteA.whiteA5}`],
+
   // Shadows and effects / Elevation
   shadow50: [
-    `
-    0px 0px 0px 0.5px ${getOpacities(slate.slate12).opacity5}
-    `,
+    `0px 0px 0px 0.5px ${getOpacities(slate.slate12).opacity5}`,
     `0px 0px 0px 0.5px ${getOpacities(slateDark.slate12).opacity15}`,
   ],
   shadow100: [
-    `
-    0px 1px 4px 0px ${getOpacities(slate.slate12).opacity5}
-    `,
+    `0px 1px 4px 0px ${getOpacities(slate.slate12).opacity5}`,
     `0px 1px 4px 0px ${getOpacities(slate.slate12).opacity10}`,
   ],
   shadow200: [
-    `
-    0px 2px 6px 0px ${getOpacities(slate.slate12).opacity5}
-    `,
+    `0px 2px 6px 0px ${getOpacities(slate.slate12).opacity5}`,
     `0px 2px 6px 0px ${getOpacities(slate.slate12).opacity10}`,
   ],
   shadow300: [
-    `
-    0px 3px 6px -3px ${getOpacities(slate.slate12).opacity10}, 0px 8px 20px -4px ${
+    `0px 3px 6px -3px ${getOpacities(slate.slate12).opacity10}, 0px 8px 20px -4px ${
       getOpacities(slate.slate12).opacity15
-    }
-    `,
+    }`,
     `0px 3px 6px -3px ${getOpacities(slate.slate12).opacity10}, 0px 8px 20px -4px ${
       getOpacities(slate.slate12).opacity15
     }`,
   ],
   shadow400: [
-    `
-    0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 16px 40px 0px ${getOpacities(slate.slate12).opacity15}
-    `,
+    `0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 16px 40px 0px ${
+      getOpacities(slate.slate12).opacity15
+    }`,
     `0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 16px 40px 0px ${
       getOpacities(slate.slate12).opacity15
     }`,
   ],
   shadow500: [
-    `
-    0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 20px 50px 0px ${getOpacities(slate.slate12).opacity15}
-    `,
+    `0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 20px 50px 0px ${
+      getOpacities(slate.slate12).opacity15
+    }`,
     `0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 20px 50px 0px ${
       getOpacities(slate.slate12).opacity15
     }`,
   ],
   shadow600: [
-    `
-    0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 26px 80px 0px ${getOpacities(slate.slate12).opacity20}
-    `,
+    `0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 26px 80px 0px ${
+      getOpacities(slate.slate12).opacity20
+    }`,
     `0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 26px 80px 0px ${
       getOpacities(slate.slate12).opacity20
     }`,
@@ -211,10 +211,6 @@ export const themeColors = {
       getOpacities(slateDark.slate1).opacity5
     }, 0px 10px 26px 0px ${getOpacities(slateDark.slate1).opacity15}`,
   ],
-  shadowModal: [
-    `${getOpacities(slate.slate10).opacity20} 0px 16px 70px`,
-    `${getOpacities(slateDark.slate1).opacity40} 0px 16px 70px`,
-  ],
   shadowSidebar: [
     `-3px 0px 10px 0px ${getOpacities(slate.slate10).opacity10}`,
     `-3px 0px 10px 0px ${getOpacities(slateDark.slate1).opacity80}`,
@@ -246,7 +242,7 @@ export const themeColors = {
   menuSelectedTextColor: [slate.slate2, slate.slate2],
   menuFooterColor: [getOpacities(whiteA.whiteA0).opacity20, getOpacities(slateDark.slate3).opacity40],
   menuFooterHoverColor: [getOpacities(whiteA.whiteA0).opacity60, slateDark.slate4],
-  menuIconColor: [getOpacities(slate.slate11).opacity90, getOpacities(slateDark.slate11).opacity90],
+  menuIconColor: [getOpacities(slate.slate12).opacity70, getOpacities(slateDark.slate12).opacity70],
   menuSelectedIconColor: [getOpacities(slate.slate1).opacity90, getOpacities(slate.slate1).opacity90],
   textColor: [slateDark.slate5, slate.slate6],
   textSelectionColor: [getOpacities(blue.blue10).opacity20, getOpacities(blueDark.blue10).opacity40],
@@ -254,15 +250,15 @@ export const themeColors = {
   disabledTextColor: [slate.slate9, slateDark.slate9],
   inversedTextColor: [slate.slate3, slateDark.slate6],
   colorTextSecondary: [getOpacities(slate.slate12).opacity70, getOpacities(slateDark.slate12).opacity65],
-  linkColor: [indigoDark.indigo10, indigoDark.indigo11],
+  linkColor: [indigoDark.indigo10, indigoDark.indigo10],
   linkBorder: [
-    `1px solid ${getOpacities(indigoDark.indigo10).opacity20}`,
-    `1px solid ${getOpacities(indigoDark.indigo11).opacity40}`,
+    `0.5px solid ${getOpacities(indigoDark.indigo10).opacity40}`,
+    `0.5px solid ${getOpacities(indigoDark.indigo11).opacity40}`,
   ],
-  linkHoverColor: [indigo.indigo10, indigoDark.indigo10],
+  linkHoverColor: [indigo.indigo10, indigoDark.indigo11],
   linkBorderHover: [
-    `1px solid ${getOpacities(indigo.indigo10).opacity80}`,
-    `1px solid ${getOpacities(indigoDark.indigo10).opacity80}`,
+    `0.5px solid ${getOpacities(indigo.indigo10).opacity80}`,
+    `0.5px solid ${getOpacities(indigoDark.indigo10).opacity70}`,
   ],
   codeColor: [red.red9, red.red8],
   codeBgColor: [slate.slate3, slateDark.slate4],
@@ -271,13 +267,13 @@ export const themeColors = {
   // Entity
   entityNodeColor: [slateDark.slate3, slate.slate8],
   entityNodeBorder: [
-    `1px solid ${getOpacities(slateDark.slate3).opacity30}`,
-    `1px solid ${getOpacities(slate.slate8).opacity40}`,
+    `0.5px solid ${getOpacities(slateDark.slate3).opacity30}`,
+    `0.5px solid ${getOpacities(slate.slate8).opacity40}`,
   ],
   entityNodeHoverColor: [slateDark.slate7, slate.slate7],
   entityNodeBorderHover: [
-    `1px solid ${getOpacities(slate.slate11).opacity80}`,
-    `1px solid ${getOpacities(slate.slate7).opacity80}`,
+    `0.5px solid ${getOpacities(slate.slate11).opacity80}`,
+    `0.5px solid ${getOpacities(slate.slate7).opacity80}`,
   ],
   entityNodeBgColor: [slate.slate2, slateDark.slate3],
   shortcutTextColor: [slate.slate9, slateDark.slate11],
@@ -324,7 +320,7 @@ export const themeColors = {
   buttonPrimaryColor: [indigo.indigo9, indigoDark.indigo9],
   buttonColor: [slate.slate10, slateDark.slate10],
   buttonPrimaryTextColor: [slate.slate2, slate.slate6],
-  checkboxColor: [slate.slate11, slateDark.slate11],
+  checkboxColor: [getOpacities(slate.slate12).opacity70, getOpacities(slateDark.slate12).opacity70],
   colorBorderBlockQuote: [slate.slate11, slateDark.slate11],
 
   // Actions menu
@@ -354,8 +350,9 @@ export const themeColors = {
   ],
   actionMenuSeparatorColor: [getOpacities(blackA.blackA0).opacity10, getOpacities(whiteA.whiteA0).opacity15],
   separatorColor: [getOpacities(blackA.blackA0).opacity10, getOpacities(whiteA.whiteA0).opacity10],
+  separatorColorDimmed: [getOpacities(blackA.blackA0).opacity5, getOpacities(whiteA.whiteA0).opacity5],
   separatorBreadcrumbsColor: [slate.slate8, slateDark.slate8],
-  iconColor: [slate.slate10, slateDark.slate10],
+  iconColor: [getOpacities(slate.slate12).opacity70, getOpacities(slateDark.slate12).opacity70],
   appIconColor: [getOpacities(slate.slate2).opacity90, getOpacities(slate.slate2).opacity70],
   appIconBgColor: [getOpacities(slate.slate1).opacity90, getOpacities(slate.slate2).opacity50],
   mentionBgColor: [getOpacities(slate.slate7).opacity30, getOpacities(slateDark.slate7).opacity40],
@@ -456,10 +453,10 @@ export const themeColors = {
     `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 4px -4px ${getOpacities(slate.slate10).opacity20}`,
     `0 0 0 1px ${getOpacities(slateDark.slate2).opacity10}, 0 2px 4px -4px ${getOpacities(slateDark.slate2).opacity20}`,
   ],
-
+  colorBgSegmentedControl: [getOpacities(slate.slate5).opacity80, getOpacities(slateDark.slate3).opacity80],
   colorBgMenuHeaderAvatar: [whiteA.whiteA0, slateDark.slate2],
   shadowMenuHeaderAvatar: [
-    `0px 1px 4px ${getOpacities(slate.slate11).opacity10}, 0 0 0 1px ${getOpacities(slate.slate5).opacity50}`,
+    `0px 1px 4px ${getOpacities(slate.slate11).opacity10}, 0 0 0 0.5px ${getOpacities(slate.slate5).opacity50}`,
     `0 0 0 1px ${getOpacities(slateDark.slate9).opacity20}`,
   ],
   // Main Menu Items Styles and States
@@ -474,9 +471,9 @@ export const themeColors = {
   // :focus
   colorBgMenuItemFocus: [slate.slate6, slateDark.slate5],
   // Selected
-  colorBgMenuItemSelected: [indigo.indigo5, indigoDark.indigo3],
+  colorBgMenuItemSelected: [getOpacities(indigo.indigo5).opacity80, indigoDark.indigo3],
   // :hover
-  colorBgMenuItemSelectedHover: [indigo.indigo6, indigoDark.indigo5],
+  colorBgMenuItemSelectedHover: [getOpacities(indigo.indigo6).opacity70, indigoDark.indigo5],
   // :focus, :focus:hover
   colorBgPinnedFieldsLabel: [slate.slate11, slateDark.slate11],
   colorBgObjectEditorSeparator: [slate.slate12, slateDark.slate12],
@@ -498,9 +495,11 @@ export const themeColors = {
   unitBgHover: [slate.slate4, slateDark.slate7],
 
   // Badges
+  colorBgBadgeNeutral: [getOpacities(indigo.indigo5).opacity70, getOpacities(indigoDark.indigo4).opacity80],
   colorBgBadgeSuccess: [teal.teal5, tealDark.teal5],
   colorBgBadgeWarning: [yellow.yellow5, yellowDark.yellow5],
   colorBgBadgeError: [red.red5, redDark.red5],
+  colorTextBadgeNeutral: [indigo.indigo11, indigoDark.indigo11],
   colorTextBadgeSuccess: [teal.teal11, tealDark.teal11],
   colorTextBadgeWarning: [yellow.yellow11, yellowDark.yellow11],
   colorTextBadgeError: [red.red11, redDark.red11],
@@ -528,8 +527,8 @@ export const themeColors = {
   appCardHoverColor: [getOpacities(slate.slate1).opacity95, slateDark.slate2],
   modalBg: [getOpacities(slate.slate11).opacity20, getOpacities(slateDark.slate2).opacity50],
   modalContentBg: [whiteA.whiteA0, slateDark.slate3],
-  progressIconBg: [getOpacities(slate.slate8).opacity50, getOpacities(slateDark.slate10).opacity20],
-  progressIconFill: [slate.slate11, slateDark.slate11],
+  progressIconBg: [blackA.blackA7, whiteA.whiteA7],
+  progressIconFill: [blackA.blackA11, whiteA.whiteA11],
   selectedColorBorder: [getOpacities(slate.slate6).opacity25, getOpacities(slate.slate6).opacity25],
   formBg: [slate.slate2, slateDark.slate2],
   formHeaderShadow: [
@@ -569,6 +568,9 @@ export const themeColors = {
   colorBorderRichTextMedia: [blackA.blackA7, blackA.blackA7],
   richTextTableBorder: [blackA.blackA5, whiteA.whiteA7],
 
+  // Drag and drop
+  colorBgDropLine: [indigo.indigo7, indigoDark.indigo7],
+
   // Grid
   gridHeaderBgColor: [slate.slate2, slateDark.slate3],
   gridHeaderHoverBgColor: [slate.slate3, slateDark.slate4],
@@ -590,7 +592,8 @@ export const themeColors = {
   timelineDependencyOverlapHoverBgColor: [red.red11, redDark.red11],
   timelineCellBgColor: [slate.slate1, slateDark.slate1],
   timelineCellWeekendBgColor: [slate.slate2, slateDark.slate2],
-  timelineCellTodayBgColor: [indigo.indigo2, indigoDark.indigo2],
+  timelineCellTodayBgColor: [indigo.indigo4, indigoDark.indigo2],
+  timelineCreateEntityPlaceholderBgColor: [getOpacities(slate.slate11).opacity20, slateDark.slate7],
 
   // #region buttons
   // solid
@@ -695,7 +698,7 @@ export const themeColors = {
   colorBgTabHover: [getOpacities(slate.slate11).opacity10, getOpacities(slateDark.slate11).opacity10],
 
   // Chat
-  colorBgMessageContainer: [slate.slate3, slateDark.slate6],
+  colorBgMessageContainer: [blackA.blackA3, slateDark.slate6],
   colorBgMessageContainerHover: [slate.slate2, slateDark.slate3],
   colorBgEntityAvatarDefault: [indigo.indigo1, indigoDark.indigo1],
   colorBgEntityAvatarHover: [indigo.indigo3, indigoDark.indigo3],
@@ -908,6 +911,10 @@ export const getEnumBackgroundColor = _.memoize(
   (themeMode, color) => `${themeMode}-${color}`
 );
 
+export const getEnumTextColor = (color: string) => {
+  return `color-mix(in srgb, ${color} 25%, ${themeVars.textColor} 75%)`;
+};
+
 // TODO: fix color for light2. It should same as 'dark' only on dark menu but same as 'light' on other parts of application
 export const getAppIconBackgroundColor = (mode: ThemeMode, color: string) =>
   getThemeValue(mode, {
@@ -970,8 +977,10 @@ export const space = {
 export const spaceNestedTreeLevel = 12;
 export const spaceNestedTreeInterval = 0;
 export const layout = {
-  logoSize: 15,
+  logoSize: 18,
   menuDefaultWidth: 243,
+  fiberyAiSidebarDefaultWidth: 420,
+  fiberyAiSidebarMaxWidth: 920,
   desktopToolbarHeight: 32,
   desktopMenuMinWidth: 240,
   collapsedMenuMinWidth: 47,
@@ -987,7 +996,9 @@ export const layout = {
   enumItemHeight: 32,
   menuItemHeight: 32,
   newMenuItemHeight: 28, // I'm ok
+  mobileSidebarMenuItemHeight: 44,
   newMenuIconSize: 18,
+  mobileSidebarIconSize: 20,
   viewHeaderHeight: space.s12 * 7,
   viewHeaderCompactHeight: 52,
   columnMinWidth: 240,
@@ -1015,6 +1026,16 @@ export const layout = {
   unitHeight: 18,
 } as const;
 
+export const sidebarMenuItemHeightVar = `--${varPrefix}-layout-sidebarMenuItemHeight`;
+export const sidebarMenuIconSizeVar = `--${varPrefix}-layout-sidebarMenuIconSize`;
+export const listRowSurfaceFontSizeVar = `--${varPrefix}-layout-listRowSurfaceFontSize`;
+
+export const layoutVars = {
+  sidebarMenuItemHeight: `var(${sidebarMenuItemHeightVar})`,
+  sidebarMenuIconSize: `var(${sidebarMenuIconSizeVar})`,
+  listRowSurfaceFontSize: `var(${listRowSurfaceFontSizeVar})`,
+};
+
 export const border = {
   radius0: 0,
   radius1: 1,
@@ -1193,6 +1214,13 @@ export const textStyles = {
     fontWeight: fontWeight.regular,
     color: themeVars.textColor,
   },
+  heading8: {
+    fontFamily,
+    fontSize: typeSizes[6],
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.medium,
+    color: themeVars.textColor,
+  },
   big: {
     fontFamily,
     fontSize: typeSizes[3],
@@ -1264,4 +1292,11 @@ export const textStyles = {
       fontFeatureSettings: '"tnum" 0',
     },
   },
+  inherit: {
+    fontFamily: "inherit",
+    fontSize: "inherit",
+    lineHeight: "inherit",
+    fontWeight: "inherit",
+    color: "inherit",
+  },
 } as const;

package/src/dropdown-menu/index.tsx

@@ -18,7 +18,7 @@ const rowItemStyles = {
   minHeight: layout.menuItemHeight,
   outline: "none",
   borderRadius: border.radius6,
-  padding: `0px ${space.s12}px`,
+  padding: `0px ${space.s8}px`,
   margin: `0px ${space.s4}px`,
   cursor: "pointer",
 

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

@@ -1,17 +1,15 @@
 import {css} from "@linaria/core";
 import {useRef, useState} from "react";
-import {IconButton} from "../button/icon-button";
 import {CollapsibleContent, CollapsibleRoot, CollapsibleTrigger} from "../collapsible";
 import {ColorPicker} from "../color-picker";
-import {getIconColor, space} from "../design-system";
-import ColorCoding from "../icons/react/ColorCoding";
-import ColorCodingFilled from "../icons/react/ColorCodingFilled";
+import {getIconColor, space, themeVars} from "../design-system";
 import {useThemeMode} from "../theme-provider";
 import {Tooltip} from "../tooltip";
 import {$TSFixMe} from "../tsfixme";
 import {EmojiPickerGrid, type EmojiPickerGridHandle, EmojiPickerGridProps} from "./primitives/grid";
 import {EmojiPickerHeader} from "./primitives/header";
 import {EmojiPickerSearch} from "./primitives/search";
+import {Swatch} from "../color-picker/swatch";
 
 const colorPickerWrapperCss = css`
   padding-top: ${space.s12}px;
@@ -23,16 +21,12 @@ const ColorPickerCollapsibleTrigger: React.FC<ColorPickerCollapsibleTrigger> = (
   const themeMode = useThemeMode();
   const iconColor = color ? getIconColor(themeMode, color) : undefined;
 
-  const Icon = opened ? ColorCoding : ColorCodingFilled;
-
   const label = opened ? "Hide color picker" : "Show color picker";
 
   return (
     <CollapsibleTrigger asChild>
       <Tooltip title={label}>
-        <IconButton data-testid="emoji-picker-color-trigger" size="small">
-          <Icon color={iconColor} />
-        </IconButton>
+        <Swatch data-testid="emoji-picker-color-trigger" size="small" color={iconColor || themeVars.iconColor} />
       </Tooltip>
     </CollapsibleTrigger>
   );

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

@@ -1,22 +1,18 @@
 import {css} from "@linaria/core";
 import {compact} from "lodash";
-import {AntTabs} from "../antd/Tabs";
 import {Button} from "../button/button";
-import {space, textStyles} from "../design-system";
+import {colors, space} from "../design-system";
 import EmojiDelete from "../icons/react/EmojiDelete";
 import {$TSFixMe} from "../tsfixme";
 import {AppIconPicker, AppIconPickerProps} from "./app-icon-picker";
 import {EmojiPicker, EmojiPickerProps} from "./emoji-picker";
+import {TabNavItem, TabNavLink, TabNavList, TabNavRoot} from "../tab-nav/tab-nav";
+import {useState} from "react";
 
-const TabHeader: React.FC<React.PropsWithChildren> = ({children}) => (
-  <div
-    className={css`
-      ${textStyles.heading5}
-    `}
-  >
-    {children}
-  </div>
-);
+const tabNavRootStyle = css`
+  padding: ${space.s4}px ${space.s12}px 0 ${space.s12}px;
+  box-shadow: inset 0 -1px ${colors.shades.opacity5};
+`;
 
 type TabKey = "icons" | "emojis";
 
@@ -49,65 +45,75 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
   color,
   getHoverColor,
 }) => {
+  const items = compact([
+    onEmojiSelect && {
+      key: "emojis" as const,
+      label: "Emojis",
+      children: (
+        <>
+          <EmojiPicker
+            emojiSize={emojiSize}
+            color={color}
+            onColorSelect={showColorPickerOnTabs.includes("emojis") ? onColorSelect : undefined}
+            onCustomCategorySettings={onCustomEmojisSettings}
+            onAddCustomEmoji={onCreateClick}
+            getHoverColor={getHoverColor}
+            onSelect={onEmojiSelect}
+            showSkinTones
+          />
+        </>
+      ),
+    },
+    onIconSelect && {
+      key: "icons" as const,
+      label: "Icons",
+      children: (
+        <AppIconPicker
+          color={color}
+          onColorSelect={showColorPickerOnTabs.includes("icons") ? onColorSelect : undefined}
+          getHoverColor={getHoverColor}
+          onSelect={onIconSelect}
+        />
+      ),
+    },
+  ]);
+
+  const firstTab = items[0];
+  const [activeTab, setActiveTab] = useState(defaultTab || firstTab?.key);
+
   return (
-    <AntTabs
-      wrapClassName={css`
-        height: 100%;
-        & .ant-tabs,
-        & .ant-tabs-content,
-        & .ant-tabs-tabpane,
-        & .ant-tabs-content-holder {
-          height: 100%;
-        }
+    <div
+      className={css`
+        display: flex;
+        flex-direction: column;
       `}
-      animated={false}
-      destroyInactiveTabPane
-      defaultActiveKey={defaultTab}
-      items={compact([
-        onEmojiSelect && {
-          key: "emojis",
-          label: <TabHeader>Emojis</TabHeader>,
-          children: (
-            <>
-              <EmojiPicker
-                emojiSize={emojiSize}
-                color={color}
-                onColorSelect={showColorPickerOnTabs.includes("emojis") ? onColorSelect : undefined}
-                onCustomCategorySettings={onCustomEmojisSettings}
-                onAddCustomEmoji={onCreateClick}
-                getHoverColor={getHoverColor}
-                onSelect={onEmojiSelect}
-                showSkinTones
-              />
-            </>
-          ),
-        },
-        onIconSelect && {
-          key: "icons",
-          label: <TabHeader>Icons</TabHeader>,
-          children: (
-            <AppIconPicker
-              color={color}
-              onColorSelect={showColorPickerOnTabs.includes("icons") ? onColorSelect : undefined}
-              getHoverColor={getHoverColor}
-              onSelect={onIconSelect}
-            />
-          ),
-        },
-      ])}
-      tabBarExtraContent={
-        onReset ? (
-          <div
-            className={css`
-              padding-right: ${space.s12}px;
-            `}
-          >
-            <Button variant="outline" color="neutral" iconStart={<EmojiDelete />} size={"small"} onClick={onReset}>
-              {resetLabel}
-            </Button>
-          </div>
-        ) : null
-      }
-    />
+    >
+      <TabNavRoot className={tabNavRootStyle}>
+        <div
+          className={css`
+            display: flex;
+            justify-content: space-between;
+          `}
+        >
+          <TabNavList>
+            {items.map((item) => {
+              return (
+                <TabNavLink key={item.key} active={item.key === activeTab} onSelect={() => setActiveTab(item.key)}>
+                  {item.label}
+                </TabNavLink>
+              );
+            })}
+          </TabNavList>
+          {onReset && (
+            <TabNavItem>
+              <Button size="small" variant="ghost" color="neutral" iconStart={<EmojiDelete />} onClick={onReset}>
+                {resetLabel}
+              </Button>
+            </TabNavItem>
+          )}
+        </div>
+      </TabNavRoot>
+      {items.find((item) => item.key === activeTab)?.children}
+    </div>
   );
 };

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

@@ -6,6 +6,7 @@ const pickerHeader = css`
   padding: ${space.s12}px ${contentHorizontalPadding}px ${space.s6}px ${contentHorizontalPadding}px;
   position: relative;
 `;
+
 export const EmojiPickerHeader: React.FC<React.PropsWithChildren> = ({children}) => {
   return <div className={pickerHeader}>{children}</div>;
 };

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

@@ -4,7 +4,6 @@ import {css, cx} from "@linaria/core";
 import {startTransition, useId, useRef} from "react";
 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";
 import {useEmojiDataStore} from "../stores/emoji-data-store";
 import type {EmojiPickerGridHandle} from "./grid";
@@ -12,6 +11,7 @@ import {useEmojiPreview, useSetEmojiPreview} from "./preview-provider";
 import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
 import {useFoundEmojis, useSetFoundEmojis} from "./search-provider";
 import {useEmojiSkin} from "./skin-provider";
+import ClearInputFilled from "../../icons/react/ClearInputFilled";
 
 const searchCss = css`
   ${textStyles.regular}
@@ -24,8 +24,8 @@ const searchCss = css`
 
   display: flex;
   align-items: center;
-  padding-left: ${space.s8}px;
-  gap: ${space.s2}px;
+  padding: 0 ${space.s4}px;
+  gap: ${space.s4}px;
 
   /* For screenreaders only, via https://stackoverflow.com/a/19758620 */
   & .sr-only {
@@ -64,7 +64,6 @@ const searchIconCss = css`
 const extraActionSlotCss = css`
   background-color: var(--fibery-emoji-hover-color, ${themeVars.inputCopyBgColor});
   border-radius: ${border.radius5}px;
-  margin-right: ${space.s4}px;
 `;
 
 export type EmojiPickerSearchProps = {
@@ -157,15 +156,9 @@ export const EmojiPickerSearch: React.FC<EmojiPickerSearchProps> = ({
 
   return (
     <section className={cx(searchCss, className)} aria-label={i18n.search}>
-      {foundEmojis ? (
-        <IconButton size="small" onClick={clearSearch}>
-          <Close />
-        </IconButton>
-      ) : (
-        <span className={searchIconCss}>
-          <Search iconSize={16} />
-        </span>
-      )}
+      <span className={searchIconCss}>
+        <Search iconSize={16} />
+      </span>
 
       <input
         ref={setRefs}
@@ -189,6 +182,12 @@ export const EmojiPickerSearch: React.FC<EmojiPickerSearchProps> = ({
         {i18n.search}
       </label>
 
+      {foundEmojis && (
+        <IconButton size="small" onClick={clearSearch}>
+          <ClearInputFilled />
+        </IconButton>
+      )}
+
       {extraAction ? <div className={extraActionSlotCss}>{extraAction}</div> : null}
     </section>
   );