@fibery/ui-kit 4.0.0 → 4.1.0

package/src/images-gallery/images-gallery.tsx

@@ -1,8 +1,8 @@
-import {createContext} from "@fibery/react/src/create-context";
+import {noop} from "@fibery/helpers/src/_";
 
 import "photoswipe/style.css";
+import {createContext} from "@fibery/react/src/create-context";
 import {css} from "@linaria/core";
-import noop from "lodash/noop";
 /* eslint-disable max-lines */
 import PhotoSwipeLightbox, {type PhotoSwipeEventsMap, type PhotoSwipeOptions} from "photoswipe/lightbox";
 import type {PropsWithChildren} from "react";

package/src/images-gallery/slide-buttons.tsx

@@ -245,11 +245,9 @@ function CopyURLButton({pswp, showUI}: {pswp: PhotoSwipe; showUI: () => void}) {
         if (src) {
           copyUrlToClipboard({url: src, label: pswp.currSlide.data.label})
             .then(() => {
-              toast.success({title: "Copied!"});
+              toast.success({title: "Link copied to clipboard"});
             })
-            .catch(() => {
-              toast.error({title: "Unable to copy."});
-            });
+            .catch((error) => toast.error({title: "Unable to copy link to clipboard", subTitle: error.message}));
         }
       }}
       size={isPhone ? "large" : "medium"}

package/src/lists/actions-menu-row-surface.tsx

@@ -1,7 +1,7 @@
+import {noop} from "@fibery/helpers/src/_";
 import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {useCallbackRef} from "@fibery/react/src/use-callback-ref";
 import {css, cx} from "@linaria/core";
-import noop from "lodash/noop";
 import {forwardRef, useId} from "react";
 
 import {useActionsMenuContext} from "../actions-menu";

package/src/media-query-utils.ts

@@ -1,4 +1,4 @@
-import noop from "lodash/noop";
+import {noop} from "@fibery/helpers/src/_";
 export function getMediaQueryList(query: string) {
   // need for test
   return typeof window !== "undefined" && window.matchMedia

package/src/mobile-keyboard-aware-popup.tsx

@@ -1,5 +1,5 @@
+import {noop} from "@fibery/helpers/src/_";
 import {css, cx} from "@linaria/core";
-import noop from "lodash/noop";
 import type {ReactNode} from "react";
 import {useEffect, useRef} from "react";
 import {createPortal} from "react-dom";

package/src/number-input/decimal.ts

@@ -1,12 +1,9 @@
-import isNil from "lodash/isNil";
-import trimEnd from "lodash/trimEnd";
+import {truthy} from "@fibery/helpers/src/_";
 
 type NumericValue = string | number | null | undefined;
 
-const isEmpty = (value: NumericValue): value is null | undefined | "" => isNil(value) || value === "";
-
 const getPrecision = (value: NumericValue) => {
-  if (isEmpty(value)) {
+  if (!truthy(value)) {
     return 0;
   }
   const [, decimalPart = ""] = String(value).split(".");
@@ -14,11 +11,11 @@ const getPrecision = (value: NumericValue) => {
 };
 
 const removeTrailingZeros = (value: string) => {
-  if (isEmpty(value)) {
+  if (!truthy(value)) {
     return value;
   }
   const hasDecimalPart = value.indexOf(".") > 0;
-  return hasDecimalPart ? trimEnd(trimEnd(value, "0"), ".") : value;
+  return hasDecimalPart ? value.replace(/\.?0+$/, "") : value;
 };
 
 export const add = (first: NumericValue, second: NumericValue) => {
@@ -32,7 +29,7 @@ export const sub = (first: NumericValue, second: NumericValue) => {
 };
 
 export const multiplyByHundred = (value: NumericValue) => {
-  if (isEmpty(value)) {
+  if (!truthy(value)) {
     return value;
   }
   const result = Number(value) * 100;
@@ -41,7 +38,7 @@ export const multiplyByHundred = (value: NumericValue) => {
 };
 
 export const divideByHundred = (value: NumericValue) => {
-  if (isEmpty(value)) {
+  if (!truthy(value)) {
     return value;
   }
   const result = Number(value) / 100;

package/src/number-input/number-input-inline-with-autosize.tsx

@@ -1,6 +1,6 @@
+import {identity} from "@fibery/helpers/src/_";
 import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {css, cx} from "@linaria/core";
-import identity from "lodash/identity";
 import InputNumber from "rc-input-number";
 import {useCallback, useMemo, useRef, useState} from "react";
 

package/src/online-users.tsx

@@ -1,5 +1,4 @@
 import {css, cx} from "@linaria/core";
-import take from "lodash/take";
 import {useEffect, useRef, useState} from "react";
 
 import {AvatarImage} from "./avatar";
@@ -151,8 +150,9 @@ export function OnlineUsers({
           </Tooltip>
         </div>
 
-        {take(users, users.length === maxVisibleUsers ? maxVisibleUsers : maxVisibleUsers - 1).map(
-          ({id, avatarUrl, hasAccess, name, callBack, isFollowed}, index) => {
+        {users
+          .slice(0, users.length === maxVisibleUsers ? maxVisibleUsers : maxVisibleUsers - 1)
+          .map(({id, avatarUrl, hasAccess, name, callBack, isFollowed}, index) => {
             const tooltipDescription = callBack ? "Click to follow" : "";
             const tooltipTitle = hasAccess ? name : "Private User";
             const userBorderColor = theme.fns.deneutralize(getObjectColorMemoized(name));
@@ -187,8 +187,7 @@ export function OnlineUsers({
                 </Tooltip>
               </div>
             );
-          }
-        )}
+          })}
       </div>
       {Boolean(triggerElement) && users.length > maxVisibleUsers && (
         <Popover.Root open={visible} onOpen={() => onShow()} onClose={() => onHide()}>

package/src/palettes/inspect.defs.colors.neutral-arch.test.ts

@@ -741,19 +741,19 @@ test("snapshot", () => {
         "#292929   | hsl(none   0%  16%) | oklch(0.28 0    none)",
       ],
       "colorBgListItemGeneralSelected": [
-        "#FDF3EE   | hsl(  20  79%  96%) | oklch(0.97 0.01  49 )",
-        "#432412   | hsl(  22  58%  17%) | oklch(0.3  0.06  50 )",
+        "#F7E0D3   | hsl(  22  69%  90%) | oklch(0.92 0.03  52 )",
+        "#4C2A16   | hsl(  22  55%  19%) | oklch(0.32 0.06  50 )",
       ],
       "colorBgListItemGeneralSelectedDisabled": [
         "#F7E0D3   | hsl(  22  69%  90%) | oklch(0.92 0.03  52 )",
         "#4C2A16   | hsl(  22  55%  19%) | oklch(0.32 0.06  50 )",
       ],
       "colorBgListItemGeneralSelectedFocus": [
-        "#FAEBE3   | hsl(  21  70%  94%) | oklch(0.95 0.02  50 )",
+        "#F1D1C0   | hsl(  21  64%  85%) | oklch(0.88 0.04  50 )",
         "#58321C   | hsl(  22  52%  23%) | oklch(0.36 0.06  50 )",
       ],
       "colorBgListItemGeneralSelectedHover": [
-        "#FAEBE3   | hsl(  21  70%  94%) | oklch(0.95 0.02  50 )",
+        "#F1D1C0   | hsl(  21  64%  85%) | oklch(0.88 0.04  50 )",
         "#58321C   | hsl(  22  52%  23%) | oklch(0.36 0.06  50 )",
       ],
       "colorBgLogoCardDark": [

package/src/palettes/inspect.defs.colors.neutral-user.test.ts

@@ -741,19 +741,19 @@ test("snapshot", () => {
         "#292929   | hsl(none   0%  16%) | oklch(0.28 0    none)",
       ],
       "colorBgListItemGeneralSelected": [
-        "#F1F5FE   | hsl( 222  87%  97%) | oklch(0.97 0.01 267 )",
-        "#1C2B4F   | hsl( 222  48%  21%) | oklch(0.3  0.07 265 )",
+        "#DBE5FA   | hsl( 221  76%  92%) | oklch(0.92 0.03 265 )",
+        "#223259   | hsl( 223  45%  24%) | oklch(0.32 0.07 266 )",
       ],
       "colorBgListItemGeneralSelectedDisabled": [
         "#DBE5FA   | hsl( 221  76%  92%) | oklch(0.92 0.03 265 )",
         "#223259   | hsl( 223  45%  24%) | oklch(0.32 0.07 266 )",
       ],
       "colorBgListItemGeneralSelectedFocus": [
-        "#E8EFFD   | hsl( 220  84%  95%) | oklch(0.95 0.02 264 )",
+        "#CAD9F6   | hsl( 220  71%  88%) | oklch(0.88 0.04 264 )",
         "#293B66   | hsl( 222  43%  28%) | oklch(0.36 0.08 266 )",
       ],
       "colorBgListItemGeneralSelectedHover": [
-        "#E8EFFD   | hsl( 220  84%  95%) | oklch(0.95 0.02 264 )",
+        "#CAD9F6   | hsl( 220  71%  88%) | oklch(0.88 0.04 264 )",
         "#293B66   | hsl( 222  43%  28%) | oklch(0.36 0.08 266 )",
       ],
       "colorBgLogoCardDark": [

package/src/palettes/inspect.defs.colors.warm-arch.test.ts

@@ -743,19 +743,19 @@ test("snapshot", () => {
         "#2D2826   | hsl(  17   8%  16%) | oklch(0.28 0.01  43 )",
       ],
       "colorBgListItemGeneralSelected": [
-        "#FEF3EA   | hsl(  27  91%  96%) | oklch(0.97 0.02  62 )",
-        "#482106   | hsl(  25  85%  15%) | oklch(0.3  0.07  51 )",
+        "#FBDFCA   | hsl(  26  86%  89%) | oklch(0.92 0.04  59 )",
+        "#522609   | hsl(  24  80%  18%) | oklch(0.32 0.08  50 )",
       ],
       "colorBgListItemGeneralSelectedDisabled": [
         "#FBDFCA   | hsl(  26  86%  89%) | oklch(0.92 0.04  59 )",
         "#522609   | hsl(  24  80%  18%) | oklch(0.32 0.08  50 )",
       ],
       "colorBgListItemGeneralSelectedFocus": [
-        "#FDEBDC   | hsl(  27  89%  93%) | oklch(0.95 0.03  62 )",
+        "#F7D0B2   | hsl(  26  81%  83%) | oklch(0.88 0.06  59 )",
         "#5E2E0E   | hsl(  24  74%  21%) | oklch(0.36 0.08  50 )",
       ],
       "colorBgListItemGeneralSelectedHover": [
-        "#FDEBDC   | hsl(  27  89%  93%) | oklch(0.95 0.03  62 )",
+        "#F7D0B2   | hsl(  26  81%  83%) | oklch(0.88 0.06  59 )",
         "#5E2E0E   | hsl(  24  74%  21%) | oklch(0.36 0.08  50 )",
       ],
       "colorBgLogoCardDark": [

package/src/palettes/inspect.defs.colors.warm-user.test.ts

@@ -743,19 +743,19 @@ test("snapshot", () => {
         "#2D2826   | hsl(  17   8%  16%) | oklch(0.28 0.01  43 )",
       ],
       "colorBgListItemGeneralSelected": [
-        "#EEF7F9   | hsl( 191  48%  95%) | oklch(0.97 0.01 213 )",
-        "#01333F   | hsl( 192  97%  13%) | oklch(0.3  0.05 219 )",
+        "#D5E9F0   | hsl( 196  47%  89%) | oklch(0.92 0.02 221 )",
+        "#043A48   | hsl( 192  89%  15%) | oklch(0.32 0.06 221 )",
       ],
       "colorBgListItemGeneralSelectedDisabled": [
         "#D5E9F0   | hsl( 196  47%  89%) | oklch(0.92 0.02 221 )",
         "#043A48   | hsl( 192  89%  15%) | oklch(0.32 0.06 221 )",
       ],
       "colorBgListItemGeneralSelectedFocus": [
-        "#E4F1F6   | hsl( 197  50%  93%) | oklch(0.95 0.02 223 )",
+        "#C2DEE8   | hsl( 196  45%  84%) | oklch(0.88 0.03 221 )",
         "#074453   | hsl( 192  84%  18%) | oklch(0.36 0.06 220 )",
       ],
       "colorBgListItemGeneralSelectedHover": [
-        "#E4F1F6   | hsl( 197  50%  93%) | oklch(0.95 0.02 223 )",
+        "#C2DEE8   | hsl( 196  45%  84%) | oklch(0.88 0.03 221 )",
         "#074453   | hsl( 192  84%  18%) | oklch(0.36 0.06 220 )",
       ],
       "colorBgLogoCardDark": [

package/src/popover/index.tsx

@@ -1,3 +1,4 @@
+import {truthy} from "@fibery/helpers/src/_";
 import {composeEventHandlers} from "@fibery/react/src/compose-event-handlers";
 import {createContext} from "@fibery/react/src/create-context";
 // oxlint-disable max-lines
@@ -13,7 +14,6 @@ import type {Options as PreventOverflowOptions} from "@popperjs/core/lib/modifie
 import type {FocusScopeProps} from "@radix-ui/react-focus-scope";
 import {FocusScope} from "@radix-ui/react-focus-scope";
 import cx from "classnames";
-import compact from "lodash/compact";
 import type {CSSProperties, MouseEvent, ReactNode} from "react";
 import {
   cloneElement,
@@ -369,7 +369,7 @@ const Content = forwardRef<ContentRef, PopoverContentProps>((props, ref) => {
   }, [padding, preventOverflowOptions, shrinkable]);
 
   const modifiers = useMemo(() => {
-    return compact([
+    return [
       {
         name: "flip",
         options: {
@@ -399,7 +399,7 @@ const Content = forwardRef<ContentRef, PopoverContentProps>((props, ref) => {
       ...shrinkableModifiers,
       ...additionalModifiers,
       ...(popupModifiers.additionalModifiers ?? []),
-    ]);
+    ].filter(truthy);
   }, [
     additionalModifiers,
     flipOptions,
@@ -424,7 +424,7 @@ const Content = forwardRef<ContentRef, PopoverContentProps>((props, ref) => {
     }
     const target = event.target;
     if (target instanceof Node) {
-      const ignoreElements = compact([isElementReference(triggerElement) && triggerElement]);
+      const ignoreElements = [isElementReference(triggerElement) && triggerElement].filter(truthy);
       if (ignoreElements.some((element) => element.contains(target))) {
         return;
       }

package/src/popover/mobile-popover-context.tsx

@@ -1,5 +1,5 @@
+import {noop} from "@fibery/helpers/src/_";
 import {createContext} from "@fibery/react/src/create-context";
-import noop from "lodash/noop";
 import type {FC, ReactNode} from "react";
 import {useState, useMemo} from "react";
 

package/src/popover/modifiers.tsx

@@ -1,7 +1,7 @@
+import {noop} from "@fibery/helpers/src/_";
 import {getResizeListener} from "@fibery/helpers/utils/resize-listener";
 import type {Modifier, ModifierArguments, Placement, Boundary, RootBoundary, Padding, Context} from "@popperjs/core";
 import type {Options as PreventOverflowOptions} from "@popperjs/core/lib/modifiers/preventOverflow";
-import noop from "lodash/noop";
 import maxSize from "popper-max-size-modifier";
 
 import {isElementReference} from "./reference";

package/src/rich-input-loader.tsx

@@ -1,6 +1,6 @@
+import {noop} from "@fibery/helpers/src/_";
 import {css, cx} from "@linaria/core";
 import {styled} from "@linaria/react";
-import noop from "lodash/noop";
 import {memo, createContext, useContext, useState, useEffect, useMemo} from "react";
 
 import {regularRichEditorHTMLStyles} from "./html-styles";

package/src/select/components/menu-list-virtua.tsx

@@ -1,4 +1,4 @@
-import compact from "lodash/compact";
+import {truthy} from "@fibery/helpers/src/_";
 import type {ComponentType, CSSProperties, ReactNode} from "react";
 import {Children, useContext, useEffect, useMemo, useRef, useState} from "react";
 import type {GroupHeadingProps, GroupProps, MenuListProps} from "react-select";
@@ -15,22 +15,21 @@ function flattenGroupChildren(
   children: ReactNode,
   renderGroup: (Component: ComponentType<GroupHeadingProps>, props: GroupProps["headingProps"]) => ReactNode
 ): ReactNode[] {
-  return compact(
-    Children.toArray(children)
-      .map((child) => {
-        if (isReactElementWithProps(child) && isGroupChild(child)) {
-          const {props} = child;
-          const groupChildren = compact(Children.toArray(props.children));
-          if (!groupChildren.length) {
-            return [];
-          }
-          const heading = renderGroup(props.Heading, props.headingProps);
-          return [heading, ...groupChildren];
+  return Children.toArray(children)
+    .map((child) => {
+      if (isReactElementWithProps(child) && isGroupChild(child)) {
+        const {props} = child;
+        const groupChildren = Children.toArray(props.children).filter(truthy);
+        if (!groupChildren.length) {
+          return [];
         }
-        return child;
-      })
-      .flat()
-  );
+        const heading = renderGroup(props.Heading, props.headingProps);
+        return [heading, ...groupChildren];
+      }
+      return child;
+    })
+    .flat()
+    .filter(truthy);
 }
 
 /**

package/src/select/components/menu-list-virtualized.tsx

@@ -1,6 +1,4 @@
-import compact from "lodash/compact";
-import isFunction from "lodash/isFunction";
-import isObject from "lodash/isObject";
+import {isRecord, truthy} from "@fibery/helpers/src/_";
 import type {ComponentType, CSSProperties, ReactNode} from "react";
 import {Children, useContext, useEffect, useMemo, useRef, useState} from "react";
 import type {GroupHeadingProps, GroupProps, MenuListProps} from "react-select";
@@ -20,12 +18,12 @@ function isGroupChild<Option, isMulty extends boolean, Group extends GroupBase<O
   props: unknown
 ): props is GroupProps<Option, isMulty, Group> {
   return (
-    isObject(props) &&
+    isRecord(props) &&
     "options" in props &&
     "Heading" in props &&
-    isFunction(props.Heading) &&
+    typeof props.Heading === "function" &&
     "headingProps" in props &&
-    isObject(props.headingProps)
+    isRecord(props.headingProps)
   );
 }
 
@@ -33,27 +31,26 @@ const flattenGroupChildren: (
   children: ReactNode,
   renderGroup: (Component: ComponentType<GroupHeadingProps>, props: GroupProps["headingProps"]) => ReactNode
 ) => ReactNode[] = (children, renderGroup) => {
-  return compact(
-    Children.toArray(children)
-      .map((child) => {
-        if (isObject(child) && "props" in child && isObject(child.props)) {
-          const {props} = child;
-          if (isGroupChild(props)) {
-            //well, it's a group
-            const children = compact(Children.toArray(props.children));
-            if (!children.length) {
-              // do not render empty groups
-              return [];
-            }
-            const heading = renderGroup(props.Heading, props.headingProps);
-            return [heading, ...children];
+  return Children.toArray(children)
+    .map((child) => {
+      if (isRecord(child) && "props" in child && isRecord(child.props)) {
+        const {props} = child;
+        if (isGroupChild(props)) {
+          //well, it's a group
+          const children = Children.toArray(props.children).filter(truthy);
+          if (!children.length) {
+            // do not render empty groups
+            return [];
           }
+          const heading = renderGroup(props.Heading, props.headingProps);
+          return [heading, ...children];
         }
-        //if not a group, just keep child as is
-        return child;
-      })
-      .flat()
-  );
+      }
+      //if not a group, just keep child as is
+      return child;
+    })
+    .flat()
+    .filter(truthy);
 };
 
 const drawListElement: ItemContent<ReactNode, never> = (index, child) => child;
@@ -111,7 +108,7 @@ export function MenuListVirtualized<
       return -1;
     }
     return flattenChildren.findIndex((child) => {
-      if (isObject(child) && "props" in child && isObject(child.props) && "data" in child.props) {
+      if (isRecord(child) && "props" in child && isRecord(child.props) && "data" in child.props) {
         return child.props.data === focusedOption;
       }
       return false;
@@ -128,14 +125,14 @@ export function MenuListVirtualized<
       for (let i = 0; i < flattenChildren.length; i++) {
         const child = flattenChildren[i];
         if (
-          isObject(child) &&
+          isRecord(child) &&
           "props" in child &&
-          isObject(child.props) &&
+          isRecord(child.props) &&
           "type" in child.props &&
           child.props.type === "option" &&
           "isSelected" in child.props
         ) {
-          if ("data" in child.props && isObject(child.props.data)) {
+          if ("data" in child.props && isRecord(child.props.data)) {
             if ("isSelected" in child.props && child.props.isSelected) {
               selectedOption = child.props.data;
               break;

package/src/select/components/menu.tsx

@@ -13,12 +13,12 @@ export const MenuListNulledStyles: CSSObjectWithLabel = {
 };
 export const MenuNulledStyles: CSSObjectWithLabel = {
   backgroundColor: "",
-  borderRadius: "",
   boxShadow: "",
   marginTop: 0,
   marginBottom: 0,
-  paddingTop: space.s8,
-  paddingBottom: space.s8,
+  paddingTop: space.s6,
+  paddingBottom: space.s6,
+  borderRadius: border.radius8,
 };
 
 const menuCss = css`

package/src/select/index.tsx

@@ -1,5 +1,5 @@
 import {css, cx} from "@linaria/core";
-import type {ForwardedRef} from "react";
+import {type ForwardedRef} from "react";
 import React, {forwardRef} from "react";
 
 import type {$TSFixMe} from "../tsfixme";

package/src/select/reflection.ts

@@ -1,5 +1,4 @@
-import isFunction from "lodash/isFunction";
-import isObject from "lodash/isObject";
+import {isRecord} from "@fibery/helpers/src/_";
 import type {GroupProps} from "react-select/dist/declarations/src";
 
 import type {GroupBase} from "./util";
@@ -7,7 +6,7 @@ import type {GroupBase} from "./util";
 type ReactElementWithProps<P = object> = {props: P};
 
 export function isReactElementWithProps(node: unknown): node is ReactElementWithProps {
-  return isObject(node) && "props" in node && isObject(node.props);
+  return isRecord(node) && "props" in node && isRecord(node.props);
 }
 
 export function isGroupChild<Option, IsMulti extends boolean, Group extends GroupBase<Option> = GroupBase<Option>>(
@@ -16,8 +15,8 @@ export function isGroupChild<Option, IsMulti extends boolean, Group extends Grou
   return (
     "options" in node.props &&
     "Heading" in node.props &&
-    isFunction(node.props.Heading) &&
+    typeof node.props.Heading === "function" &&
     "headingProps" in node.props &&
-    isObject(node.props.headingProps)
+    isRecord(node.props.headingProps)
   );
 }

package/src/select/select.tsx

@@ -1,6 +1,6 @@
+import {truthy} from "@fibery/helpers/src/_";
 import {composeEventHandlers} from "@fibery/react/src/compose-event-handlers";
 import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
-import compact from "lodash/compact";
 import type {ForwardedRef, RefObject} from "react";
 import {forwardRef, useCallback, useMemo, useRef, useState} from "react";
 import type {
@@ -128,12 +128,12 @@ function useSelectStyles<T, U extends boolean, V extends GroupBase<T>>({
 }) {
   return useMemo(() => {
     return composeStyles<T, U, V>(
-      compact([
+      [
         makeComponentsStyles<T, U, V>(),
         virtualized ? makeVirtualizedStyles<T, U, V>() : makeNonVirtualizedStyles<T, U, V>(),
         zIndex ? makeZIndexStyles<T, U, V>(zIndex) : null,
         styles,
-      ])
+      ].filter(truthy)
     );
   }, [styles, virtualized, zIndex]);
 }

package/src/select/styles.ts

@@ -53,13 +53,7 @@ export const makeVirtualizedStyles = <T, U extends boolean, V extends GroupBase<
   }),
 });
 
-export const makeNonVirtualizedStyles = <T, U extends boolean, V extends GroupBase<T>>(): StylesConfig<T, U, V> => ({
-  menuList: (provided) => ({
-    ...provided,
-    paddingTop: 6,
-    paddingBottom: 6,
-  }),
-});
+export const makeNonVirtualizedStyles = <T, U extends boolean, V extends GroupBase<T>>(): StylesConfig<T, U, V> => ({});
 
 export const makeZIndexStyles = <T, U extends boolean, V extends GroupBase<T>>(
   zIndex: number

package/src/select/util.ts

@@ -1,4 +1,4 @@
-import isObject from "lodash/isObject";
+import {isRecord} from "@fibery/helpers/src/_";
 import type {ReactNode, RefObject} from "react";
 import {Children, createContext} from "react";
 import type {GroupBase as ReactSelectGroupBase, OptionsOrGroups, SelectInstance} from "react-select";
@@ -11,7 +11,7 @@ export type GroupBase<T> = ReactSelectGroupBase<T> & {separator?: boolean; separ
 export function isGroup<Option, Group extends GroupBase<Option>>(
   optionOrGroup: Option | Group
 ): optionOrGroup is Group {
-  return isObject(optionOrGroup) && "options" in optionOrGroup;
+  return isRecord(optionOrGroup) && "options" in optionOrGroup;
 }
 
 export function countOptions<Option, Group extends GroupBase<Option>>(

package/src/theming.generated.css

@@ -160,9 +160,9 @@
   --fibery-color-colorBgListItemGeneral: rgba(255, 255, 255, 0);
   --fibery-color-colorBgListItemGeneralHover: rgb(245, 245, 245);
   --fibery-color-colorBgListItemGeneralFocus: rgb(237, 237, 237);
-  --fibery-color-colorBgListItemGeneralSelected: #f1f5fe;
-  --fibery-color-colorBgListItemGeneralSelectedHover: #e8effd;
-  --fibery-color-colorBgListItemGeneralSelectedFocus: #e8effd;
+  --fibery-color-colorBgListItemGeneralSelected: #dbe5fa;
+  --fibery-color-colorBgListItemGeneralSelectedHover: #cad9f6;
+  --fibery-color-colorBgListItemGeneralSelectedFocus: #cad9f6;
   --fibery-color-colorBgListItemGeneralDisabled: rgba(255, 255, 255, 0);
   --fibery-color-colorTextListItemGeneralDisabled: rgb(158, 158, 158);
   --fibery-color-colorBgListItemGeneralSelectedDisabled: #dbe5fa;
@@ -661,7 +661,7 @@
   --fibery-color-colorBgListItemGeneral: rgba(255, 255, 255, 0);
   --fibery-color-colorBgListItemGeneralHover: rgb(41, 41, 41);
   --fibery-color-colorBgListItemGeneralFocus: rgb(51, 51, 51);
-  --fibery-color-colorBgListItemGeneralSelected: #1c2b4f;
+  --fibery-color-colorBgListItemGeneralSelected: #223259;
   --fibery-color-colorBgListItemGeneralSelectedHover: #293b66;
   --fibery-color-colorBgListItemGeneralSelectedFocus: #293b66;
   --fibery-color-colorBgListItemGeneralDisabled: rgba(255, 255, 255, 0);
@@ -1160,9 +1160,9 @@
   --fibery-color-colorBgListItemGeneral: rgba(255, 255, 255, 0);
   --fibery-color-colorBgListItemGeneralHover: rgb(250, 244, 236);
   --fibery-color-colorBgListItemGeneralFocus: rgb(243, 236, 229);
-  --fibery-color-colorBgListItemGeneralSelected: rgb(238, 247, 249);
-  --fibery-color-colorBgListItemGeneralSelectedHover: rgb(228, 241, 246);
-  --fibery-color-colorBgListItemGeneralSelectedFocus: rgb(228, 241, 246);
+  --fibery-color-colorBgListItemGeneralSelected: rgb(213, 233, 240);
+  --fibery-color-colorBgListItemGeneralSelectedHover: rgb(194, 222, 232);
+  --fibery-color-colorBgListItemGeneralSelectedFocus: rgb(194, 222, 232);
   --fibery-color-colorBgListItemGeneralDisabled: rgba(255, 255, 255, 0);
   --fibery-color-colorTextListItemGeneralDisabled: rgb(163, 157, 150);
   --fibery-color-colorBgListItemGeneralSelectedDisabled: rgb(213, 233, 240);
@@ -1659,7 +1659,7 @@
   --fibery-color-colorBgListItemGeneral: rgba(255, 255, 255, 0);
   --fibery-color-colorBgListItemGeneralHover: rgb(45, 40, 38);
   --fibery-color-colorBgListItemGeneralFocus: rgb(55, 50, 48);
-  --fibery-color-colorBgListItemGeneralSelected: rgb(1, 51, 63);
+  --fibery-color-colorBgListItemGeneralSelected: rgb(4, 58, 72);
   --fibery-color-colorBgListItemGeneralSelectedHover: rgb(7, 68, 83);
   --fibery-color-colorBgListItemGeneralSelectedFocus: rgb(7, 68, 83);
   --fibery-color-colorBgListItemGeneralDisabled: rgba(255, 255, 255, 0);