@fibery/ui-kit 1.29.5 → 1.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.29.5",
+  "version": "1.30.0",
   "private": false,
   "files": [
     "src/antd/styles.ts",

package/src/button/button.tsx

@@ -4,12 +4,14 @@ import {styled} from "@linaria/react";
 import cx from "classnames";
 import _ from "lodash";
 import React, {forwardRef} from "react";
-import {Item} from "../item";
-import {useTheme} from "../theme-provider";
+import {ButtonV2} from "../button-v2/button";
 import {border, colors, getOpacities, opacity, space, textStyles} from "../design-system";
 import {IconBaseProps} from "../icons/types";
+import {Item} from "../item";
 import {Spinner} from "../loaders";
+import {useTheme} from "../theme-provider";
 import {ButtonBase, ButtonBaseProps, buttonBorderWidth, getMainColor, getTextColor} from "./button-base";
+import {isButtonsV2} from "../utils";
 
 type PositionInGroup = "first" | "middle" | "last";
 
@@ -142,7 +144,7 @@ const leftContainerClassName = css`
 export type ButtonProps = ButtonBaseProps & {
   size?: ButtonSize;
   pending?: boolean;
-  Icon?: ((props: IconBaseProps) => JSX.Element) | null;
+  Icon?: React.FC<IconBaseProps> | null;
   inGroup?: PositionInGroup;
   shortcut?: string;
   noOverflow?: boolean;
@@ -150,7 +152,7 @@ export type ButtonProps = ButtonBaseProps & {
   height?: string | number;
 };
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+export const ButtonComponent = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
   {
     disabled,
     pending,
@@ -220,3 +222,35 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
     </StyledButton>
   );
 });
+
+/** @deprecated Please consider using ButtonV2  */
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(props, ref) {
+  if (isButtonsV2) {
+    const {
+      Icon,
+      dangerous,
+      borderless,
+      size = ":button-size/normal",
+      primary,
+      className,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      noOverflow: _noOverflow,
+      ...buttonProps
+    } = props;
+
+    const newSize = size === ":button-size/big" || size === ":button-size/normal" ? "medium" : "small";
+
+    return (
+      <ButtonV2
+        ref={ref}
+        className={className}
+        {...buttonProps}
+        color={dangerous ? "error" : primary ? "accent" : "neutral"}
+        variant={primary ? "solid" : borderless ? "ghost" : "outline"}
+        size={newSize}
+        iconStart={Icon ? <Icon /> : null}
+      />
+    );
+  }
+  return <ButtonComponent {...props} className={props.className} ref={ref} />;
+});

package/src/button/icon-button.tsx

@@ -1,15 +1,16 @@
-import {styled} from "@linaria/react";
 import {css} from "@linaria/core";
-import {Children, cloneElement, forwardRef} from "react";
-import {ButtonBase, ButtonBaseProps} from "./button-base";
-import {IconProps} from "../icons/types";
+import {styled} from "@linaria/react";
 import cx from "classnames";
+import {forwardRef} from "react";
+import {ButtonBase, ButtonBaseProps} from "./button-base";
+import {iconContainer} from "../icons/Icon";
+import {IconButtonV2} from "../button-v2/icon-button";
+import {isButtonsV2} from "../utils";
 
 export type IconButtonSize = "super-small" | "small" | "normal" | "big";
 
 export type IconButtonProps = ButtonBaseProps & {
   size?: IconButtonSize;
-  classNameOverride?: string;
 };
 
 const Paddings = {
@@ -32,18 +33,39 @@ const StyledIconButton = styled(ButtonBase)<StyledProps>`
   &.${weight} {
     padding: ${getPadding}px;
   }
+
+  & > .${iconContainer} {
+    color: inherit;
+  }
 `;
 
+/** @deprecated Please consider using IconButtonV2  */
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
-  {size = "normal", children, className, ...rest},
+  {size = "normal", className, primary, dangerous, borderless = true, ...rest},
   ref
 ) {
-  const iconNode = Children.only(children) as React.ReactElement<IconProps>;
+  if (isButtonsV2) {
+    return (
+      <IconButtonV2
+        ref={ref}
+        className={className}
+        {...rest}
+        size={size === "big" || size === "normal" ? "medium" : "small"}
+        color={dangerous ? "error" : primary ? "accent" : "neutral"}
+        variant={primary ? "solid" : borderless ? "ghost" : "outline"}
+      />
+    );
+  }
 
   return (
-    <StyledIconButton ref={ref} size={size} className={cx(className, weight)} borderless {...rest}>
-      {/* maybe better to use css variables? */}
-      {cloneElement(iconNode, {color: iconNode.props.color || "inherit"})}
-    </StyledIconButton>
+    <StyledIconButton
+      ref={ref}
+      size={size}
+      className={cx(className, weight)}
+      primary={primary}
+      dangerous={dangerous}
+      borderless={borderless}
+      {...rest}
+    />
   );
 });

package/src/design-system.ts

@@ -322,7 +322,7 @@ export const themeColors = {
   opacityListItemGeneralDisabled: [`${opacity.opacity40}`, `${opacity.opacity40}`],
 
   // Search Items
-  colorBgSearchItemHover: [slate.slate4, slateDark.slate4],
+  colorBgSearchItemHover: [slate.slate4, slateDark.slate5],
   opacitySearchItemDone: [`${opacity.opacity40}`, `${opacity.opacity40}`],
   // Entity Box Style And States
   // Basic Entity Box State
@@ -475,10 +475,12 @@ export const themeColors = {
   progressIconFill: [slate.slate11, slateDark.slate11],
   instrumentsMenuBg: [getOpacities(whiteA.whiteA0).opacity95, getOpacities(slateDark.slate4).opacity95],
   instrumentsMenuShadow: [
-    `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}`,
+    `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 12px -2px ${getOpacities(slate.slate10).opacity15}`,
+    `0 0 0 1px ${getOpacities(slateDark.slate1).opacity10}, 0 2px 12px -6px ${
+      getOpacities(slateDark.slate1).opacity15
+    }`,
   ],
-  selectedColorBorder: [getOpacities(slate.slate6).opacity50, getOpacities(slate.slate6).opacity20],
+  selectedColorBorder: [getOpacities(slate.slate6).opacity25, getOpacities(slate.slate6).opacity25],
   formBg: [slate.slate2, slateDark.slate2],
   formHeaderShadow: [
     `${getOpacities(slate.slate10).opacity10} 0px 0px 6px`,
@@ -530,11 +532,84 @@ export const themeColors = {
   gridSelectedPinnedCellBorderColor: [indigo.indigo7, indigoDark.indigo7],
   gridDisabledSelectedCellBgColor: [indigo.indigo4, indigoDark.indigo5],
   gridActiveCellBorderColor: [indigo.indigo8, indigoDark.indigo9],
+
+  // #region buttons
+  // solid
+  colorBgButtonSolidAccentDefault: [indigo.indigo9, indigoDark.indigo9],
+  colorBgButtonSolidAccentHover: [indigo.indigo11, indigoDark.indigo10],
+  colorBgButtonSolidNeutralDefault: [slate.slate12, slateDark.slate12],
+  colorBgButtonSolidNeutralHover: [getOpacities(slate.slate12).opacity85, whiteA.whiteA0],
+  colorBgButtonSolidDestructiveDefault: [red.red9, redDark.red9],
+  colorBgButtonSolidDestructiveHover: [red.red11, redDark.red10],
+  colorTextButtonSolidAccent: [whiteA.whiteA0, whiteA.whiteA0],
+  colorTextButtonSolidAccentActive: [getOpacities(whiteA.whiteA0).opacity80, getOpacities(whiteA.whiteA0).opacity80],
+  colorTextButtonSolidNeutral: [whiteA.whiteA0, slateDark.slate2],
+  colorTextButtonSolidNeutralActive: [whiteA.whiteA0, getOpacities(slateDark.slate2).opacity80],
+  colorTextButtonSolidDestructive: [whiteA.whiteA0, whiteA.whiteA0],
+  colorTextButtonSolidDestructiveActive: [
+    getOpacities(whiteA.whiteA0).opacity80,
+    getOpacities(whiteA.whiteA0).opacity80,
+  ],
+  // outline
   colorBorderButtonOutlineAccentDefault: [indigo.indigo8, indigoDark.indigo8],
   colorBorderButtonOutlineNeutralDefault: [slate.slate8, slateDark.slate8],
+  colorBorderButtonOutlineDestructiveDefault: [red.red11, redDark.red11],
   colorBgButtonOutlineAccentDefault: [whiteA.whiteA0, slateDark.slate1],
   colorBgButtonOutlineAccentHover: [indigo.indigo3, indigoDark.indigo8],
+  colorBgButtonOutlineNeutralDefault: [whiteA.whiteA0, slateDark.slate1],
+  colorBgButtonOutlineNeutralHover: [slate.slate4, slateDark.slate4],
+  colorBgButtonOutlineDestructiveDefault: [whiteA.whiteA0, slateDark.slate1],
+  colorBgButtonOutlineDestructiveHover: [red.red4, redDark.red4],
   colorTextButtonOutlineAccent: [indigo.indigo11, indigoDark.indigo11],
+  colorTextButtonOutlineAccentActive: [
+    getOpacities(indigo.indigo11).opacity80,
+    getOpacities(indigoDark.indigo11).opacity80,
+  ],
+  colorTextButtonOutlineNeutral: [slate.slate12, slateDark.slate12],
+  colorTextButtonOutlineNeutralActive: [
+    getOpacities(slate.slate12).opacity80,
+    getOpacities(slateDark.slate12).opacity80,
+  ],
+  colorTextButtonOutlineDestructive: [red.red11, redDark.red11],
+  colorTextButtonOutlineDestructiveActive: [getOpacities(red.red11).opacity80, getOpacities(redDark.red11).opacity80],
+  // soft
+  colorBgButtonSoftAccentDefault: [indigo.indigo3, indigoDark.indigo4],
+  colorBgButtonSoftAccentHover: [indigo.indigo5, indigoDark.indigo6],
+  colorBgButtonSoftNeutralDefault: [slate.slate3, slateDark.slate3],
+  colorBgButtonSoftNeutralHover: [slate.slate7, slateDark.slate7],
+  colorBgButtonSoftDestructiveDefault: [red.red4, redDark.red4],
+  colorBgButtonSoftDestructiveHover: [red.red6, redDark.red6],
+  colorTextButtonSoftAccent: [indigo.indigo11, indigoDark.indigo11],
+  colorTextButtonSoftAccentActive: [
+    getOpacities(indigo.indigo11).opacity80,
+    getOpacities(indigoDark.indigo11).opacity80,
+  ],
+  colorTextButtonSoftNeutral: [slate.slate12, slateDark.slate12],
+  colorTextButtonSoftNeutralActive: [getOpacities(slate.slate12).opacity80, getOpacities(slateDark.slate12).opacity80],
+  colorTextButtonSoftDestructive: [red.red11, redDark.red11],
+  colorTextButtonSoftDestructiveActive: [getOpacities(red.red11).opacity80, getOpacities(redDark.red11).opacity80],
+  // ghost
+  colorBgButtonGhostAccentDefault: [transparent, transparent],
+  colorBgButtonGhostAccentHover: [indigo.indigo3, indigoDark.indigo3],
+  colorBgButtonGhostNeutralDefault: [transparent, transparent],
+  colorBgButtonGhostNeutralHover: [slate.slate4, slateDark.slate4],
+  colorBgButtonGhostDestructiveDefault: [transparent, transparent],
+  colorBgButtonGhostDestructiveHover: [red.red4, redDark.red4],
+  colorTextButtonGhostAccent: [indigo.indigo11, indigoDark.indigo11],
+  colorTextButtonGhostAccentActive: [
+    getOpacities(indigo.indigo11).opacity80,
+    getOpacities(indigoDark.indigo11).opacity80,
+  ],
+  colorTextButtonGhostNeutral: [slate.slate11, slateDark.slate11],
+  colorTextButtonGhostNeutralActive: [getOpacities(slate.slate11).opacity80, getOpacities(slateDark.slate11).opacity80],
+  colorTextButtonGhostDestructive: [red.red11, redDark.red11],
+  colorTextButtonGhostDestructiveActive: [getOpacities(red.red11).opacity80, getOpacities(redDark.red11).opacity80],
+  // #endregion
+
+  colorBorderAccentFocusRing: [getOpacities(indigo.indigo9).opacity30, getOpacities(indigo.indigo9).opacity30],
+  colorBorderNeutralFocusRing: [getOpacities(slate.slate9).opacity30, getOpacities(slate.slate9).opacity30],
+  colorBorderDestructiveFocusRing: [getOpacities(red.red9).opacity30, getOpacities(red.red9).opacity30],
+
   colorBgReactionsDefault: [slate.slate3, slateDark.slate6],
   colorBgReactionsHover: [whiteA.whiteA0, slateDark.slate2],
   colorBorderReactionsHover: [slate.slate8, slateDark.slate9],
@@ -857,6 +932,7 @@ export const border = {
   radius1: 1,
   radius2: 2,
   radius4: 4,
+  radius5: 5,
   radius6: 6,
   radius8: 8,
   radius10: 10,

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

@@ -0,0 +1,6 @@
+import {EmojiDataStore, useEmojiDataStoreSelector} from "./stores/emoji-data-store";
+
+export const useEmojiFound = (value: string | undefined | null) => {
+  const selector = (store: EmojiDataStore) => (value ? Boolean(store.get(value)) : false);
+  return useEmojiDataStoreSelector(selector);
+};

package/src/icons/Icon.tsx

@@ -1,61 +1,70 @@
-import {css} from "@linaria/core";
-import {themeVars, iconSize as defaultIconSize, viewBoxSize, border} from "../design-system";
+import {css, cx} from "@linaria/core";
+import {forwardRef} from "react";
+import {border, iconSize as defaultIconSize, themeVars, viewBoxSize} from "../design-system";
 import {generateIconFromAst} from "./generate-icon-from-ast";
 import {IconProps} from "./types";
-import {getShiftStyle} from "./get-shift-style";
-import {getIconContainerStyle} from "./get-icon-container-style";
-import {forwardRef} from "react";
 
-const iconStyle = css`
+export const iconColorVar = "--fibery-icon-color";
+
+const iconContainerSizeVar = "--fibery-icon-container-size";
+export const iconSizeVar = "--fibery-icon-size";
+
+const size = `var(${iconSizeVar}, ${defaultIconSize}px)`;
+const containerSize = `var(${iconContainerSizeVar}, ${size})`;
+
+export const iconContainer = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
   shape-rendering: geometricprecision;
   border-radius: ${border.radius4}px;
+
+  color: var(${iconColorVar}, ${themeVars.iconColor});
+  fill: currentColor;
+
+  width: ${size};
+  height: ${size};
+`;
+
+const withMargin = css`
+  margin: calc((${containerSize} - ${size}) / 2);
 `;
 
-export const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon(
-  {
-    icon,
-    containerSize,
-    color,
-    viewBox = viewBoxSize,
-    iconSize = defaultIconSize,
-    onMouseDown,
-    onMouseEnter,
-    onMouseLeave,
-    children,
-  },
+const inheritColor = css`
+  color: inherit;
+`;
+
+export const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(
+  {icon, iconSize, containerSize, viewBox = viewBoxSize, children, style, color, className, ...rest},
   ref
-): JSX.Element {
-  return (
-    <span
+) {
+  const iconStyle = {
+    [iconColorVar]: color,
+    [iconContainerSizeVar]: containerSize ? containerSize + "px" : undefined,
+    [iconSizeVar]: iconSize ? iconSize + "px" : undefined,
+    ...style,
+  };
+  const iconClassName = cx(iconContainer, containerSize && withMargin, color === null && inheritColor, className);
+
+  return icon ? (
+    generateIconFromAst(icon.icon.children[0], `svg-${icon.name}`, {
+      xmlns: "http://www.w3.org/2000/svg",
+      className: iconClassName,
+      viewBox,
+      "aria-hidden": "true",
+      style: iconStyle,
+      ...rest,
+    })
+  ) : (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
       ref={ref}
-      style={getIconContainerStyle(containerSize || iconSize, color)}
-      onMouseDown={onMouseDown}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
+      className={iconClassName}
+      viewBox={viewBox}
+      style={iconStyle}
+      {...rest}
     >
-      {children ? (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width={iconSize}
-          height={iconSize}
-          viewBox={viewBox}
-          style={getShiftStyle({containerSize, elementSize: iconSize})}
-          className={iconStyle}
-        >
-          <g style={color === null ? {} : {fill: color || themeVars.textColor}}>{children}</g>
-        </svg>
-      ) : (
-        generateIconFromAst(icon.icon.children[0], `svg-${icon.name}`, {
-          xmlns: "http://www.w3.org/2000/svg",
-          width: iconSize,
-          height: iconSize,
-          viewBox: viewBox,
-          style: getShiftStyle({containerSize, elementSize: iconSize}),
-          className: iconStyle,
-          fill: color === null ? undefined : "currentColor",
-          "aria-hidden": "true",
-        })
-      )}
-    </span>
+      {children}
+    </svg>
   );
 });

package/src/icons/ast/PinFilled.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const PinFilled: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M12.504 2c.213-.008.42.071.57.22l4.703 4.628a.744.744 0 0 1-.046 1.102l-4.123 3.44.274 2.603a.743.743 0 0 1-.219.608L12.3 15.943a.77.77 0 0 1-1.078 0l-3.027-2.978-4.893 4.815a.77.77 0 0 1-1.078 0 .742.742 0 0 1 0-1.06l4.894-4.816L3.83 8.671a.744.744 0 0 1 0-1.06l1.364-1.343a.77.77 0 0 1 .618-.216l2.644.27 3.497-4.057a.767.767 0 0 1 .55-.264Z","fill":"currentColor"},"children":[]}],"metadata":""}]},"name":"pin-filled"};
+
+export default PinFilled;

package/src/icons/ast/index.tsx

@@ -160,6 +160,7 @@ export { default as PageWideMode } from './PageWideMode';
 export { default as Pencil } from './Pencil';
 export { default as People } from './People';
 export { default as Photo } from './Photo';
+export { default as PinFilled } from './PinFilled';
 export { default as Pin } from './Pin';
 export { default as Popup } from './Popup';
 export { default as Posts } from './Posts';

package/src/icons/react/Abort.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import AbortSvg from '../ast/Abort';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Abort = (
+const Abort = forwardRef<SVGSVGElement, IconBaseProps>(function Abort(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={AbortSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={AbortSvg} />});
 
-Abort.displayName = 'Abort';
 export default Abort;

package/src/icons/react/Activity.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import ActivitySvg from '../ast/Activity';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Activity = (
+const Activity = forwardRef<SVGSVGElement, IconBaseProps>(function Activity(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={ActivitySvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={ActivitySvg} />});
 
-Activity.displayName = 'Activity';
 export default Activity;

package/src/icons/react/ActivityLog.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import ActivityLogSvg from '../ast/ActivityLog';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const ActivityLog = (
+const ActivityLog = forwardRef<SVGSVGElement, IconBaseProps>(function ActivityLog(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={ActivityLogSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={ActivityLogSvg} />});
 
-ActivityLog.displayName = 'ActivityLog';
 export default ActivityLog;

package/src/icons/react/Add.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import AddSvg from '../ast/Add';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Add = (
+const Add = forwardRef<SVGSVGElement, IconBaseProps>(function Add(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={AddSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={AddSvg} />});
 
-Add.displayName = 'Add';
 export default Add;

package/src/icons/react/AddAfter.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import AddAfterSvg from '../ast/AddAfter';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const AddAfter = (
+const AddAfter = forwardRef<SVGSVGElement, IconBaseProps>(function AddAfter(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={AddAfterSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={AddAfterSvg} />});
 
-AddAfter.displayName = 'AddAfter';
 export default AddAfter;

package/src/icons/react/AddBefore.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import AddBeforeSvg from '../ast/AddBefore';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const AddBefore = (
+const AddBefore = forwardRef<SVGSVGElement, IconBaseProps>(function AddBefore(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={AddBeforeSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={AddBeforeSvg} />});
 
-AddBefore.displayName = 'AddBefore';
 export default AddBefore;

package/src/icons/react/AddCompact.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import AddCompactSvg from '../ast/AddCompact';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const AddCompact = (
+const AddCompact = forwardRef<SVGSVGElement, IconBaseProps>(function AddCompact(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={AddCompactSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={AddCompactSvg} />});
 
-AddCompact.displayName = 'AddCompact';
 export default AddCompact;

package/src/icons/react/AddGroup.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import AddGroupSvg from '../ast/AddGroup';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const AddGroup = (
+const AddGroup = forwardRef<SVGSVGElement, IconBaseProps>(function AddGroup(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={AddGroupSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={AddGroupSvg} />});
 
-AddGroup.displayName = 'AddGroup';
 export default AddGroup;

package/src/icons/react/AddReactions.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import AddReactionsSvg from '../ast/AddReactions';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const AddReactions = (
+const AddReactions = forwardRef<SVGSVGElement, IconBaseProps>(function AddReactions(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={AddReactionsSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={AddReactionsSvg} />});
 
-AddReactions.displayName = 'AddReactions';
 export default AddReactions;

package/src/icons/react/AiAssistant.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import AiAssistantSvg from '../ast/AiAssistant';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const AiAssistant = (
+const AiAssistant = forwardRef<SVGSVGElement, IconBaseProps>(function AiAssistant(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={AiAssistantSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={AiAssistantSvg} />});
 
-AiAssistant.displayName = 'AiAssistant';
 export default AiAssistant;

package/src/icons/react/AiAvatar.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import AiAvatarSvg from '../ast/AiAvatar';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const AiAvatar = (
+const AiAvatar = forwardRef<SVGSVGElement, IconBaseProps>(function AiAvatar(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={AiAvatarSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={AiAvatarSvg} />});
 
-AiAvatar.displayName = 'AiAvatar';
 export default AiAvatar;

package/src/icons/react/AlertTriangle.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import AlertTriangleSvg from '../ast/AlertTriangle';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const AlertTriangle = (
+const AlertTriangle = forwardRef<SVGSVGElement, IconBaseProps>(function AlertTriangle(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={AlertTriangleSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={AlertTriangleSvg} />});
 
-AlertTriangle.displayName = 'AlertTriangle';
 export default AlertTriangle;

package/src/icons/react/App.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import AppSvg from '../ast/App';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const App = (
+const App = forwardRef<SVGSVGElement, IconBaseProps>(function App(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={AppSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={AppSvg} />});
 
-App.displayName = 'App';
 export default App;