@fibery/ui-kit 1.36.0 → 1.36.2

package/src/loaders.tsx

@@ -1,6 +1,6 @@
 import {css, cx} from "@linaria/core";
 import {styled} from "@linaria/react";
-import {ReactNode, memo} from "react";
+import {ReactNode, memo, useMemo} from "react";
 import {IconBaseProps} from "./icons/types";
 import {border, layout, space, textStyles, themeVars} from "./design-system";
 import {getShiftStyle} from "./icons/get-shift-style";
@@ -104,35 +104,40 @@ const ContainerSpinner = styled.div<{containerSize: number}>`
   line-height: ${(props) => props.containerSize}px;
 `;
 
-type SpinnerProps = {
+type Props = {
   size?: number;
   containerSize?: number;
   width?: number;
   color?: string;
   backgroundColor?: string;
 };
-export const Spinner = memo<SpinnerProps>(function Spinner({
-  size = 20,
-  containerSize = 15,
-  width = 2,
-  color = "#000000",
-  backgroundColor = "#FFFFFF",
-}) {
-  const spinnerStyle = {
-    width: size,
-    height: size,
-    ...getShiftStyle({elementSize: size, containerSize}),
-    borderWidth: width,
-    borderColor: backgroundColor,
-    borderTopColor: color,
-  };
 
-  return (
-    <ContainerSpinner containerSize={containerSize}>
-      <div style={spinnerStyle} className={spinner} />
-    </ContainerSpinner>
-  );
-});
+export const Spinner = memo<Props>(
+  ({
+    size = 20,
+    containerSize = 15,
+    width = 2,
+    color = themeVars.iconColor,
+    backgroundColor = themeVars.badgeBgColor,
+  }) => {
+    const style = useMemo(() => {
+      return {
+        width: size,
+        height: size,
+        ...getShiftStyle({elementSize: size, containerSize}),
+        borderWidth: width,
+        borderColor: backgroundColor,
+        borderTopColor: color,
+      };
+    }, [backgroundColor, color, containerSize, size, width]);
+
+    return (
+      <ContainerSpinner containerSize={containerSize}>
+        <div style={style} className={spinner} />
+      </ContainerSpinner>
+    );
+  }
+);
 
 export const LoadingTreeMenuItem = ({
   color,

package/src/logo.tsx

@@ -8,63 +8,31 @@ interface LogoProps {
 
 export const Logo: FC<LogoProps> = ({size = 40}) => {
   return (
-    <svg width={size} height={size} viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg" fill="none">
+    <svg width={size} height={size} viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
       <path
-        d="M13.6154 52.6718C12.389 52.6687 11.1866 52.3283 10.1369 51.6871C9.08722 51.0459 8.22981 50.128 7.65652 49.0318C7.08322 47.9356 6.81564 46.7024 6.88243 45.4641C6.94922 44.2259 7.34787 43.0294 8.03568 42.0028L33.1308 4.75593C34.1722 3.34127 35.7137 2.38797 37.4335 2.09504C39.1534 1.80211 40.9186 2.19219 42.3609 3.18384C43.8031 4.17549 44.8108 5.69208 45.1736 7.41703C45.5364 9.14198 45.2263 10.942 44.3081 12.4413L19.2129 49.6881C18.5917 50.6097 17.7567 51.3635 16.781 51.8836C15.8052 52.4038 14.7184 52.6744 13.6154 52.6718Z"
-        fill="url(#paint0_linear_2845_2276)"
+        d="M4.03423 14.4218C3.21412 13.9208 2.98021 12.7899 3.50892 12.0007L9.78271 2.68903C10.3144 1.96674 11.3497 1.78689 12.0902 2.296C12.8324 2.80633 13.0464 3.84401 12.577 4.61037L6.30323 13.9221C5.81148 14.6516 4.79323 14.8855 4.03423 14.4218Z"
+        fill="#4FC5B3"
       />
       <path
-        d="M44.3295 17.0422L51.7048 16.4831C52.0797 16.4548 52.4554 16.4581 52.8281 16.4926C53.2167 16.5272 53.6042 16.596 53.9861 16.6995C55.7192 17.1692 57.1968 18.3158 58.0938 19.8871C58.9909 21.4584 59.2338 23.3256 58.7693 25.078C58.3048 26.8305 57.1709 28.3245 55.617 29.2316L23.4864 47.9779L44.3295 17.0422Z"
-        fill="url(#paint1_linear_2845_2276)"
+        d="M12.5824 5.76052L14.4262 5.62076C15.0707 5.57197 15.7022 5.909 16.0235 6.47175C16.4824 7.27568 16.2062 8.3398 15.4042 8.80787L7.37161 13.4944L12.5824 5.76052Z"
+        fill="#4FC5B3"
       />
       <path
-        d="M32.0811 60C30.6331 60.0024 29.2224 59.5352 28.0563 58.667C26.8903 57.7987 26.0303 56.5753 25.6028 55.1763L24.1999 50.5716L31.5632 46.2755L37.8433 48.7708L38.5684 51.1438C39.0963 52.8775 38.9219 54.7522 38.0836 56.356C37.2453 57.9598 35.8116 59.1615 34.0975 59.6971C33.444 59.8989 32.7644 60.001 32.0811 60Z"
-        fill="url(#paint2_linear_2845_2276)"
+        d="M7.9007 15.2941L7.54998 14.143L9.39081 13.069L10.9608 13.6928L11.1421 14.2861C11.4113 15.1703 10.9111 16.1473 10.0244 16.4244C9.13418 16.6992 8.17086 16.1782 7.9007 15.2941Z"
+        fill="#4FC5B3"
       />
       <path
-        d="M49.4289 35.852L34.419 44.6094L46.7804 49.521C47.569 49.8278 48.4078 49.9812 49.2528 49.973C50.8279 49.9722 52.3533 49.411 53.566 48.3946C54.7787 47.3782 55.6026 45.9658 55.8956 44.4009C56.1886 42.836 55.9323 41.2168 55.171 39.8225C54.4096 38.4282 53.191 37.3463 51.7252 36.7633L49.4289 35.852Z"
-        fill="url(#paint3_linear_2845_2276)"
+        d="M13.8573 10.463L10.1048 12.6524L13.1951 13.8803C14.1762 14.262 15.2829 13.6203 15.4739 12.6003C15.6223 11.8078 15.1831 10.9898 14.4313 10.6908L13.8573 10.463Z"
+        fill="#4FC5B3"
       />
       <path
-        d="M20.5155 18.8473L10.7738 33.3061L8.28343 33.4949C8.11353 33.5084 7.94364 33.5129 7.77374 33.5129C6.02147 33.5154 4.33664 32.8302 3.07402 31.6016C1.81141 30.373 1.06954 28.6969 1.00465 26.9263C0.939748 25.1557 1.55688 23.4287 2.7261 22.109C3.89531 20.7893 5.52536 19.9798 7.273 19.8511L20.5155 18.8473Z"
-        fill="url(#paint4_linear_2845_2276)"
+        d="M6.62886 6.21191L4.19346 9.82661C3.94456 9.84546 3.69329 9.87829 3.44344 9.87829C2.53771 9.87954 1.78415 9.13161 1.75116 8.23166C1.71817 7.33154 2.41483 6.52941 3.31826 6.46286L6.62886 6.21191Z"
+        fill="#4FC5B3"
       />
       <path
-        d="M23.9081 5.45218L27.1559 8.99151L22.208 16.3352L15.8715 16.8295L13.9782 14.7605C12.7575 13.429 12.1098 11.6617 12.1777 9.84741C12.2457 8.03309 13.0236 6.32036 14.3404 5.086C15.6571 3.85164 17.4049 3.19677 19.1992 3.26544C20.9935 3.33411 22.6873 4.12071 23.9081 5.45218Z"
-        fill="url(#paint5_linear_2845_2276)"
+        d="M7.47702 2.86321L8.28896 3.74803L7.052 5.58397L5.46788 5.70755L4.99456 5.19028C4.36761 4.50647 4.40795 3.40642 5.08509 2.77166C5.76095 2.13811 6.85128 2.1807 7.47702 2.86321Z"
+        fill="#4FC5B3"
       />
-      <path
-        d="M32.081 59.9018H32.0813C32.7547 59.9028 33.4245 59.8022 34.0686 59.6033C35.7574 59.0755 37.1703 57.8914 37.9966 56.3106C38.823 54.7296 38.9949 52.8816 38.4745 51.1724L32.081 59.9018ZM32.081 59.9018C30.6542 59.9042 29.2641 59.4439 28.115 58.5882M32.081 59.9018L28.115 58.5882M51.6889 36.8545C53.1333 37.4289 54.3344 38.4952 55.0848 39.8695C55.8353 41.2439 56.0879 42.8401 55.7991 44.3828C55.5103 45.9255 54.6981 47.3177 53.503 48.3194C52.3077 49.3212 50.8045 49.8741 49.2527 49.8749L49.2518 49.8749C48.4196 49.8829 47.5933 49.7319 46.8164 49.4297L46.8166 49.4297L46.7804 49.521C47.569 49.8278 48.4078 49.9812 49.2528 49.973C50.8279 49.9722 52.3533 49.411 53.566 48.3946C54.7787 47.3782 55.6026 45.9658 55.8956 44.4009C56.1886 42.836 55.9323 41.2168 55.171 39.8225C54.4096 38.4282 53.191 37.3463 51.7252 36.7633M51.6889 36.8545L51.689 36.8545L51.7252 36.7633M51.6889 36.8545L51.7252 36.7633M51.6889 36.8545L49.4371 35.9608M51.7252 36.7633L49.4289 35.852L49.4783 35.9367L49.4371 35.9608M49.4371 35.9608L34.6426 44.5926M49.4371 35.9608L34.6426 44.5926M34.6426 44.5926L46.816 49.4295L34.6426 44.5926ZM20.3208 18.9605L20.3907 18.8568L7.273 19.8511C5.52536 19.9798 3.89531 20.7893 2.7261 22.109C1.55688 23.4287 0.939748 25.1557 1.00465 26.9263C1.06954 28.6969 1.81141 30.373 3.07402 31.6016C4.33664 32.8302 6.02147 33.5154 7.77374 33.5129L20.4456 18.951L20.3208 18.9605ZM20.3208 18.9605L7.28042 19.949L7.28021 19.949C5.55826 20.0758 3.95193 20.8734 2.79956 22.1741C1.64717 23.4748 1.03875 25.1772 1.10273 26.9227C1.16671 28.6683 1.89807 30.3204 3.14247 31.5312C4.38684 32.7421 6.0471 33.4172 7.77361 33.4148H7.77374C7.94196 33.4148 8.10911 33.4103 8.27562 33.397L8.27601 33.397L10.719 33.2118M20.3208 18.9605L10.719 33.2118M10.719 33.2118L10.6924 33.2512L10.7738 33.3061L10.7664 33.2082L10.719 33.2118ZM28.115 58.5882C26.9658 57.7326 26.1182 56.5268 25.6967 55.1477L28.115 58.5882ZM52.819 16.5904L52.8194 16.5904C53.2023 16.6245 53.5841 16.6923 53.9605 16.7943C55.6681 17.2571 57.1244 18.387 58.0086 19.9358C58.8928 21.4846 59.1324 23.3253 58.6745 25.0529C58.2166 26.7804 57.0988 28.253 55.5675 29.1468L23.8076 47.6769L44.3843 17.1365L51.7122 16.581C52.0816 16.553 52.4518 16.5563 52.819 16.5904ZM52.8281 16.4926C53.2167 16.5272 53.6042 16.596 53.9861 16.6995C55.7192 17.1692 57.1968 18.3158 58.0938 19.8871C58.9909 21.4584 59.2338 23.3256 58.7693 25.078C58.3048 26.8305 57.1709 28.3245 55.617 29.2316L52.8281 16.4926ZM37.7633 48.8446L38.4745 51.1723L25.6967 55.1476L24.3164 50.6173L31.5714 46.3844L37.7633 48.8446ZM23.8357 5.51852L23.8358 5.51855L27.0312 9.00085L22.1531 16.2411L15.9116 16.728L14.0506 14.6942L14.0506 14.6942C12.8474 13.3818 12.2089 11.6397 12.2758 9.85108C12.3428 8.06243 13.1097 6.37417 14.4075 5.15761C15.7052 3.94109 17.4275 3.29586 19.1955 3.36352C20.9634 3.43118 22.6326 4.20622 23.8357 5.51852ZM13.6156 52.5737C12.4073 52.5706 11.2225 52.2352 10.1881 51.6033C9.15366 50.9715 8.30859 50.0669 7.74349 48.9863C7.17839 47.9058 6.9146 46.6901 6.98044 45.4694C7.04628 44.2488 7.43925 43.0694 8.11715 42.0575C8.11717 42.0575 8.1172 42.0574 8.11722 42.0574L33.2111 4.81244C34.2375 3.41902 35.7561 2.48031 37.45 2.1918C39.1446 1.90318 40.884 2.28749 42.3052 3.26472C43.7265 4.24198 44.7199 5.73676 45.0775 7.43724C45.4351 9.13704 45.1298 10.9107 44.2255 12.3882L19.1315 49.6333C18.5192 50.5416 17.6963 51.2845 16.7348 51.797C15.7733 52.3096 14.7024 52.5762 13.6156 52.5737Z"
-        stroke="white"
-        strokeOpacity={0.1}
-        strokeWidth={0.196305}
-      />
-      <defs>
-        <linearGradient id="paint0_linear_2845_2276" x1={30} y1={2} x2={30} y2={60} gradientUnits="userSpaceOnUse">
-          <stop stopColor="#7FE8D4" />
-          <stop offset={1} stopColor="#1FA192" />
-        </linearGradient>
-        <linearGradient id="paint1_linear_2845_2276" x1={30} y1={2} x2={30} y2={60} gradientUnits="userSpaceOnUse">
-          <stop stopColor="#7FE8D4" />
-          <stop offset={1} stopColor="#1FA192" />
-        </linearGradient>
-        <linearGradient id="paint2_linear_2845_2276" x1={30} y1={2} x2={30} y2={60} gradientUnits="userSpaceOnUse">
-          <stop stopColor="#7FE8D4" />
-          <stop offset={1} stopColor="#1FA192" />
-        </linearGradient>
-        <linearGradient id="paint3_linear_2845_2276" x1={30} y1={2} x2={30} y2={60} gradientUnits="userSpaceOnUse">
-          <stop stopColor="#7FE8D4" />
-          <stop offset={1} stopColor="#1FA192" />
-        </linearGradient>
-        <linearGradient id="paint4_linear_2845_2276" x1={30} y1={2} x2={30} y2={60} gradientUnits="userSpaceOnUse">
-          <stop stopColor="#7FE8D4" />
-          <stop offset={1} stopColor="#1FA192" />
-        </linearGradient>
-        <linearGradient id="paint5_linear_2845_2276" x1={30} y1={2} x2={30} y2={60} gradientUnits="userSpaceOnUse">
-          <stop stopColor="#7FE8D4" />
-          <stop offset={1} stopColor="#1FA192" />
-        </linearGradient>
-      </defs>
     </svg>
   );
 };

package/src/new-badge.tsx

@@ -1,15 +1,17 @@
 import {css} from "@linaria/core";
-import {space, textStyles, themeVars} from "./design-system";
+import {fontWeight, space, textStyles, themeVars} from "./design-system";
 
 const newBadgeStyle = css`
   ${textStyles.heading7}
+  text-transform: none;
+  font-weight: ${fontWeight.medium};
   display: inline-block;
-  padding: ${space.s1}px ${space.s4}px;
-  color: ${themeVars.colorTextButtonOutlineAccent};
-  background-color: ${themeVars.colorBgButtonOutlineAccentDefault};
-  border: 1px solid ${themeVars.colorBorderButtonOutlineAccentDefault};
+  padding: ${space.s2}px 4.5px ${space.s2}px 5px;
+  color: ${themeVars.colorTextBadgeNeutral};
+  background-color: ${themeVars.colorBgBadgeNeutral};
+  //border: 0.5px solid ${themeVars.colorBorderButtonOutlineAccentDefault};
   vertical-align: text-top;
-  border-radius: 20px;
+  border-radius: 4px;
 `;
 
 type Props = {children: React.ReactNode};

package/src/number-input/number-input.tsx

@@ -1,6 +1,6 @@
 import {textStyles, themeVars} from "../../src/design-system";
 import {css} from "@linaria/core";
-import {useCallback, useMemo, useRef, useState, useImperativeHandle, forwardRef} from "react";
+import {ComponentProps, forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState} from "react";
 import {formatValue, getStep, parseValue} from "./index";
 import _ from "lodash";
 import {add, sub} from "./decimal";
@@ -10,9 +10,9 @@ import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import cx from "classnames";
 import {invalidInputStyle} from "./edit-unit-styles";
 
-const invalidClassName = css``;
+const invalidCss = css``;
 
-export const inputContainerClassName = css`
+const inputContainerCss = css`
   position: relative;
   input {
     background-color: ${themeVars.transparent};
@@ -26,31 +26,30 @@ export const inputContainerClassName = css`
     }
   }
 
-  &.${invalidClassName} {
+  &.${invalidCss} {
     ${invalidInputStyle}
   }
 `;
 
-export const NumberInlineInput = forwardRef<
-  HTMLInputElement,
-  {
-    value: string | number | null;
-    numberFormat: "Number" | "Money" | "Percent";
-    format?: (value: string | number) => string;
-    numberPrecision: number;
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    onChange: (value: string | number) => void;
-    placeholder: string;
-    autoFocus: boolean;
-    style: object;
-    width?: number;
-    valueWrapperClassName?: string;
-    decimalSeparator?: string;
-    invalid?: boolean;
-  }
->(
+type NumberFormat = "Number" | "Money" | "Percent";
+
+type Props = ComponentProps<typeof InputNumber> & {
+  value: string | number | null;
+  numberFormat: NumberFormat;
+  format?: (value: string | number) => string;
+  numberPrecision: number;
+  placeholder: string;
+  autoFocus: boolean;
+  valueWrapperClassName?: string;
+  decimalSeparator?: string;
+  invalid?: boolean;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  onChange: (value: string | number | null) => void;
+};
+
+export const NumberInlineInput = forwardRef<HTMLInputElement, Props>(
   (
     {
       value,
@@ -69,23 +68,15 @@ export const NumberInlineInput = forwardRef<
     },
     ref
   ) => {
-    const isEditing = true;
-    const handleFocus: React.FocusEventHandler<HTMLInputElement> = useCallback(
-      (e) => {
-        if (onFocus) {
-          onFocus(e);
-        }
-      },
-      [onFocus]
-    );
-
     const inputRef = useRef<HTMLInputElement | null>(null);
     const [inputContainerRef, setInputContainerRef] = useState<HTMLDivElement | null>(null);
 
-    const handleBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(
-      (e) => {
-        if (onBlur && e.relatedTarget && inputContainerRef && !inputContainerRef.contains(e.relatedTarget)) {
-          onBlur(e);
+    useImperativeHandle(ref, () => inputRef.current!, []);
+
+    const handleBlur = useCallback(
+      (e: React.FocusEvent<HTMLInputElement>) => {
+        if (e.relatedTarget && inputContainerRef && !inputContainerRef.contains(e.relatedTarget)) {
+          onBlur?.(e);
         }
       },
       [inputContainerRef, onBlur]
@@ -101,14 +92,7 @@ export const NumberInlineInput = forwardRef<
     );
 
     const handleStep = useCallback(
-      (
-        newValue: string | number,
-        {
-          type,
-        }: {
-          type: "up" | "down";
-        }
-      ) => {
+      (newValue: string | number, {type}: {type: "up" | "down"}) => {
         inputRef.current?.focus();
         const step = getStep(numberFormat);
         if (type === "up") {
@@ -119,29 +103,26 @@ export const NumberInlineInput = forwardRef<
       },
       [numberFormat, onChange, value]
     );
-    useImperativeHandle(ref, () => inputRef.current!, []);
 
     const formattedValue = useMemo(() => {
+      const isEditing = true;
       return formatValue(value, isEditing, numberFormat, format);
-    }, [value, isEditing, numberFormat, format]);
+    }, [value, numberFormat, format]);
 
     return (
-      <div
-        ref={setInputContainerRef}
-        className={cx(valueWrapperClassName, inputContainerClassName, invalid && invalidClassName)}
-      >
+      <div ref={setInputContainerRef} className={cx(valueWrapperClassName, inputContainerCss, invalid && invalidCss)}>
         <InputNumber
           autoFocus={autoFocus}
           ref={inputRef}
           value={formattedValue}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onChange={handleChange}
-          onKeyDown={onKeyDown}
           type="text"
           placeholder={placeholder}
           upHandler={<StepButton type={"up"} />}
           downHandler={<StepButton type={"down"} />}
+          onFocus={onFocus}
+          onBlur={handleBlur}
+          onChange={handleChange}
+          onKeyDown={onKeyDown}
           onStep={handleStep}
           onClick={stopPropagation}
           {...rest}

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

@@ -1,5 +1,5 @@
 import {css} from "@linaria/core";
-import {GroupHeadingProps, components} from "react-select";
+import {components, GroupHeadingProps} from "react-select";
 import {layout, space, textStyles, themeVars} from "../../design-system";
 import {TooltipIfOverflown} from "../../tooltip-if-overflown";
 import {GroupBase} from "../index";
@@ -47,6 +47,7 @@ const GroupDivider = () => (
     <div className={groupDividerStyle}></div>
   </div>
 );
+
 export function GroupHeading<
   Option,
   IsMulti extends boolean = false,
@@ -77,3 +78,25 @@ export function GroupHeading<
     </components.GroupHeading>
   );
 }
+
+// probably can be united with "GroupHeading" above.
+export function GroupSeparator<
+  Option,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({...props}: GroupHeadingProps<Option, IsMulti, Group>) {
+  // Hide separators when searching
+  if (!props.data.separator || props.selectProps.inputValue) {
+    return null;
+  }
+
+  return (
+    <hr
+      style={{margin: `${((props.data.separatorMargin || space.s8) - 1) / 2}px 0`}}
+      className={css`
+        border: none;
+        border-bottom: 1px solid ${themeVars.separatorColor};
+      `}
+    />
+  );
+}

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

@@ -1,11 +1,11 @@
-import {OptionProps, components} from "react-select";
-import {GroupBase} from "../index";
 import {css} from "@linaria/core";
-import {layout, space} from "../../design-system";
-import {ListRowContent, ListRowSurface} from "../../lists/list-row-surface";
 import cn from "classnames";
 import {ComponentProps, useMemo} from "react";
+import {components, OptionProps} from "react-select";
+import {layout, space} from "../../design-system";
+import {ListRowContent, ListRowSurface} from "../../lists/list-row-surface";
 import {TooltipIfOverflown} from "../../tooltip-if-overflown";
+import {GroupBase} from "../index";
 import {isPureTextChildren} from "../util";
 
 export const OptionNulledVitualizedStyles = {
@@ -22,16 +22,22 @@ export const OptionNulledStyles = {
   lineHeight: "",
   color: "",
 };
+
 const OptionRootClass = css`
-  padding: 0 ${space.s6}px;
-  display: flex;
-  align-items: stretch;
-  justify-content: stretch;
-  cursor: pointer;
-  max-width: 100%;
+  :where(&) {
+    padding: 0 ${space.s6}px;
+    display: flex;
+    align-items: stretch;
+    justify-content: stretch;
+    cursor: pointer;
+    max-width: 100%;
+  }
 `;
 const OptionWithTextContent = css`
-  padding-left: ${space.s6}px;
+  :where(&) {
+    padding-left: ${space.s6}px;
+    padding-right: ${space.s6}px;
+  }
 `;
 
 /**

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

@@ -50,7 +50,7 @@ const popupContainerClassName = css`
     align-items: flex-end;
   }
 `;
-const popupClassName = css`
+export const popupClassName = css`
   min-width: 320px;
   max-width: 440px;
 `;
@@ -125,6 +125,8 @@ export type TriggerProps = {
   innerRef: React.Ref<HTMLDivElement>;
   children: ReactNode;
   onClick?: React.MouseEventHandler;
+  iconStart?: ReactNode;
+  pending?: boolean;
   onKeyDown?: React.KeyboardEventHandler;
   disabled?: boolean;
 };

package/src/select/util.ts

@@ -1,11 +1,12 @@
 import {GroupBase as ReactSelectGroupBase, OptionsOrGroups, SelectInstance} from "react-select";
 import {isObject} from "lodash";
 import {Children, createContext, ReactNode, RefObject} from "react";
+
 /**
  * API used by ReactSelect internal partials (at least VirtualizedMenuList).
  */
 export const ReactSelectRefContext = createContext<RefObject<SelectInstance>>({current: null});
-export type GroupBase<T> = ReactSelectGroupBase<T> & {separator?: boolean};
+export type GroupBase<T> = ReactSelectGroupBase<T> & {separator?: boolean; separatorMargin?: number};
 export function isGroup<Option, Group extends GroupBase<Option>>(
   optionOrGroup: Option | Group
 ): optionOrGroup is Group {

package/src/toast/utils/toastify-item-name.ts

@@ -1,4 +1,4 @@
-const trimDynamicToastText = (str: string, charLimit: number) =>
+export const trimDynamicToastText = (str: string, charLimit: number) =>
   str.length > charLimit ? `${str.slice(0, charLimit)}…` : str;
 
 export const toastifyItemName = ({

package/src/type-badge-box.tsx

@@ -8,9 +8,10 @@ type Props = {
   height: number;
   typeObject: {title: string};
   children: ReactNode;
+  className?: string;
 };
 
-export const TypeBadgeBox = ({width, height, typeObject, children}: Props) => {
+export const TypeBadgeBox = ({width, height, typeObject, children, className}: Props) => {
   const abbr = makeAbbreviation(typeObject.title);
 
   return (
@@ -33,7 +34,8 @@ export const TypeBadgeBox = ({width, height, typeObject, children}: Props) => {
             & > div {
               mask-image: linear-gradient(90deg, #000 60%, rgba(0, 0, 0, 0.4));
             }
-          `
+          `,
+        className
       )}
     >
       {children}

package/src/type-badge.tsx

@@ -123,6 +123,9 @@ const clickableStyle = css`
 const fadedStyle = css`
   opacity: ${opacity.opacity25};
 `;
+const noColorStyle = css`
+  opacity: ${opacity.opacity60};
+`;
 
 export const makeDescription = (typeObject: {description?: string | null}): string | null => {
   return typeObject.description || null;
@@ -135,7 +138,7 @@ export const makeAbbreviation = (title = "") =>
     .join("");
 
 type TypeBadgeProps = {
-  color: string;
+  color: string | null;
   onMouseDown?: () => void;
   onMouseEnter?: React.MouseEventHandler;
   onMouseLeave?: React.MouseEventHandler;
@@ -189,25 +192,27 @@ export const TypeBadge = memo(
 
     const theme = useTheme();
 
+    const baseColor = color || theme.iconColor;
+
     const textBadgeColor = getThemeValue(theme.mode, {
-      dark: a11yColor(getTextColor(color), getDarkenColor(color), 12),
-      light: a11yColor(getTextColor(color), getDarkenColor(color), 12),
-      light2: a11yColor(getTextColor(color), getDarkenColor(color), 12),
+      dark: a11yColor(getTextColor(baseColor), getDarkenColor(baseColor), 12),
+      light: a11yColor(getTextColor(baseColor), getDarkenColor(baseColor), 12),
+      light2: a11yColor(getTextColor(baseColor), getDarkenColor(baseColor), 12),
     });
 
     const backgroundBadgeColor = getThemeValue(theme.mode, {
-      dark: getDarkenColor(color),
-      light: color,
-      light2: color,
+      dark: getDarkenColor(baseColor),
+      light: baseColor,
+      light2: baseColor,
     });
 
     const style = {
-      [colorProp]: color ? textBadgeColor : colors.inversedTextColor,
-      //[colorProp]: color ? getTextColor(color) : colors.inversedTextColor,
+      [colorProp]: baseColor ? textBadgeColor : colors.inversedTextColor,
+      //[colorProp]: baseColor ? getTextColor(baseColor) : colors.inversedTextColor,
       [colorBackgroundProp]: backgroundBadgeColor || colors.shades.opacity25,
-      //[colorBackgroundProp]: color || colors.shades.opacity25,
+      //[colorBackgroundProp]: baseColor || colors.shades.opacity25,
       [colorBorderProp]: backgroundBadgeColor,
-      [colorDarkProp]: getDarkenColor(color),
+      [colorDarkProp]: getDarkenColor(baseColor),
     } as CSSProperties;
 
     return (
@@ -225,6 +230,7 @@ export const TypeBadge = memo(
             [selectedStyle]: selected,
             [clickableStyle]: onClick,
             [fadedStyle]: faded,
+            [noColorStyle]: color === null,
           },
           className
         )}
@@ -265,6 +271,7 @@ type TypeObjectBadgeParams = {
   selected?: boolean;
   faded?: boolean;
   tooltip?: boolean;
+  noColor?: boolean;
 };
 
 export const TypeObjectBadge = forwardRef<HTMLDivElement | HTMLButtonElement, TypeObjectBadgeParams>(
@@ -284,6 +291,7 @@ export const TypeObjectBadge = forwardRef<HTMLDivElement | HTMLButtonElement, Ty
       selected,
       faded,
       tooltip = true,
+      noColor,
     },
     ref
   ) => {
@@ -293,7 +301,7 @@ export const TypeObjectBadge = forwardRef<HTMLDivElement | HTMLButtonElement, Ty
     return (
       <TypeBadge
         ref={ref}
-        color={typeObject.color}
+        color={noColor ? null : typeObject.color}
         abbr={abbr}
         compact={compact}
         vertical={vertical}

package/src/unit/primitive.tsx

@@ -13,6 +13,7 @@ import {
   invalidUnitClassName,
   positionUnitClass,
   regularSizeUnitClassName,
+  unitMinHeightClassName,
   regularSizeUnitMinWidthClassName,
   textEllipsisClassName,
   unitDescriptionClassName,
@@ -75,6 +76,7 @@ export const UnitPrimitive = ({
   shrinkable = true,
   clickable = border,
   setMinWidth = true,
+  setMinHeight = true,
   // Callback
   onClick,
   onKeyDown,
@@ -90,6 +92,7 @@ export const UnitPrimitive = ({
     basicUnitClassName,
     big ? bigSizeUnitClassName : regularSizeUnitClassName,
     setMinWidth && (big ? bigSizeUnitMinWidthClassName : regularSizeUnitMinWidthClassName),
+    setMinHeight && unitMinHeightClassName,
     border && borderClassName,
     invalid && invalidUnitClassName,
     clickable && clickableClassName

package/src/unit/styles.ts

@@ -42,6 +42,10 @@ export const regularSizeUnitMinWidthClassName = css`
   justify-content: center;
 `;
 
+export const unitMinHeightClassName = css`
+  min-height: ${space.s24}px;
+`;
+
 export const unitTitleClassName = css`
   ${textStyles.heading7}
   padding-bottom: ${space.s2}px;

package/src/unit/types.ts

@@ -23,6 +23,7 @@ export type UnitPrimitiveProps = {
   shrinkable?: boolean;
   clickable?: boolean;
   setMinWidth?: boolean;
+  setMinHeight?: boolean;
   // Callbacks
   onKeyDown?: (e: KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => void;
   onClick?: (e: React.MouseEvent<HTMLElement>) => void;