@fibery/ui-kit 1.29.4 → 1.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.29.4",
+  "version": "1.30.0",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -75,9 +75,9 @@
     "react-virtuoso": "4.6.0",
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
+    "@fibery/helpers": "1.3.0",
     "@fibery/emoji-data": "2.6.0",
-    "@fibery/react": "1.4.0",
-    "@fibery/helpers": "1.3.0"
+    "@fibery/react": "1.4.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -93,6 +93,7 @@
     "@testing-library/user-event": "13.5.0",
     "@types/chroma-js": "2.1.3",
     "@types/color-hash": "1.0.2",
+    "@types/history": "4.7.11",
     "@types/invariant": "2.2.34",
     "@types/jest": "27.0.1",
     "@types/lodash": "4.14.172",
@@ -110,8 +111,8 @@
     "svgo": "2.8.0",
     "typescript": "5.4.3",
     "unist-util-reduce": "0.2.2",
-    "@fibery/babel-preset": "7.4.0",
-    "@fibery/eslint-config": "8.6.0"
+    "@fibery/eslint-config": "8.6.0",
+    "@fibery/babel-preset": "7.4.0"
   },
   "jest": {
     "testEnvironment": "jsdom",

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

@@ -22,7 +22,7 @@ import {a11yColor} from "./a11y-color";
 import {createInlineTheme as createInlineStyles, varPrefix} from "./create-inline-theme";
 import {ThemeMode} from "./theme-settings";
 
-export const typeSizes = [28, 24, 18, 16, 14, 12, 10, 8] as const;
+export const typeSizes = [26, 24, 18, 16, 14, 12, 10, 8] as const;
 
 export const fontWeight = {
   light: 300,
@@ -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],
@@ -812,7 +887,7 @@ export const layout = {
   logoSize: 16,
   menuDefaultWidth: 243,
   desktopToolbarHeight: 32,
-  desktopMenuMinWidth: 160,
+  desktopMenuMinWidth: 200,
   menuMinWidth: 54, //TODO: make dependency to itemHeight
   menuMaxWidth: 480,
   menuItemMinWidth: 80,
@@ -857,6 +932,7 @@ export const border = {
   radius1: 1,
   radius2: 2,
   radius4: 4,
+  radius5: 5,
   radius6: 6,
   radius8: 8,
   radius10: 10,
@@ -978,7 +1054,7 @@ export const textStyles = {
     fontSize: typeSizes[0],
     letterSpacing: "-0.003em",
     lineHeight: lineHeight.heading,
-    fontWeight: fontWeight.medium,
+    fontWeight: fontWeight.semibold,
     color: themeVars.textColor,
   },
   heading2: {
@@ -986,7 +1062,7 @@ export const textStyles = {
     fontSize: typeSizes[1],
     letterSpacing: "-0.002em",
     lineHeight: lineHeight.heading,
-    fontWeight: fontWeight.medium,
+    fontWeight: fontWeight.semibold,
     color: themeVars.textColor,
   },
   heading3: {
@@ -994,21 +1070,21 @@ export const textStyles = {
     fontSize: typeSizes[2],
     letterSpacing: "-0.002em",
     lineHeight: lineHeight.heading,
-    fontWeight: fontWeight.medium,
+    fontWeight: fontWeight.semibold,
     color: themeVars.textColor,
   },
   heading4: {
     fontFamily,
     fontSize: typeSizes[3],
     lineHeight: lineHeight.heading,
-    fontWeight: fontWeight.medium,
+    fontWeight: fontWeight.semibold,
     color: themeVars.textColor,
   },
   heading5: {
     fontFamily,
     fontSize: typeSizes[4],
     lineHeight: lineHeight.heading,
-    fontWeight: fontWeight.medium,
+    fontWeight: fontWeight.semibold,
     color: themeVars.textColor,
   },
   heading6: {

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/AiAssistant.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const AiAssistant: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M3 0c.117 0 .221.072.263.181l.57 1.498a.844.844 0 0 0 .488.488l1.498.57a.281.281 0 0 1 0 .526l-1.498.57a.844.844 0 0 0-.488.488l-.57 1.498a.281.281 0 0 1-.526 0l-.57-1.498a.844.844 0 0 0-.488-.488L.18 3.263a.281.281 0 0 1 0-.526l1.498-.57a.844.844 0 0 0 .488-.488L2.737.18A.281.281 0 0 1 3 0ZM3 14c.117 0 .221.072.263.181l.57 1.498a.844.844 0 0 0 .488.488l1.498.57a.281.281 0 0 1 0 .526l-1.498.57a.844.844 0 0 0-.488.488l-.57 1.498a.281.281 0 0 1-.526 0l-.57-1.498a.844.844 0 0 0-.488-.488l-1.498-.57a.281.281 0 0 1 0-.526l1.498-.57a.844.844 0 0 0 .488-.488l.57-1.498A.281.281 0 0 1 3 14Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M11.7 2.483a.75.75 0 0 0-1.4 0L8.777 6.476a2.25 2.25 0 0 1-1.302 1.302L3.483 9.299a.75.75 0 0 0 0 1.402l3.993 1.521a2.25 2.25 0 0 1 1.302 1.302l1.521 3.993a.75.75 0 0 0 1.402 0l1.521-3.993a2.25 2.25 0 0 1 1.302-1.302l3.993-1.521a.75.75 0 0 0 0-1.402l-3.993-1.521a2.25 2.25 0 0 1-1.302-1.302l-1.521-3.993ZM10.18 7.01 11 4.857l.82 2.153a3.75 3.75 0 0 0 2.17 2.17l2.153.82-2.153.82a3.75 3.75 0 0 0-2.17 2.17L11 15.143l-.82-2.153a3.75 3.75 0 0 0-2.17-2.17L5.857 10l2.153-.82a3.75 3.75 0 0 0 2.17-2.17Z"},"children":[]}],"metadata":""}]},"name":"ai-assistant"};
+const AiAssistant: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M3.374.262a.398.398 0 0 0-.75.006l-.548 1.607a.317.317 0 0 1-.207.2l-1.59.493a.395.395 0 0 0-.006.754l1.595.524a.317.317 0 0 1 .202.202l.552 1.68c.119.36.629.364.753.006l.587-1.69a.317.317 0 0 1 .199-.197l1.568-.526a.395.395 0 0 0-.006-.752l-1.564-.494a.317.317 0 0 1-.203-.195L3.374.262Zm-.562 14.956a.332.332 0 0 0-.626.006l-.456 1.338a.264.264 0 0 1-.172.168l-1.325.41a.33.33 0 0 0-.006.628l1.33.437c.08.027.142.089.168.169l.46 1.399c.099.3.524.304.628.005l.488-1.409a.264.264 0 0 1 .166-.163l1.308-.439a.33.33 0 0 0-.006-.626l-1.303-.412a.264.264 0 0 1-.17-.162l-.484-1.349Zm9.183-12.814c-.336-.936-1.663-.924-1.983.017l-1.47 4.33a1.2 1.2 0 0 1-.78.76L3.506 8.835c-.975.304-.986 1.68-.017 2l4.273 1.41a1.2 1.2 0 0 1 .764.767l1.482 4.53c.314.957 1.662.968 1.99.017l1.578-4.566a1.2 1.2 0 0 1 .752-.745l4.202-1.415c.963-.324.95-1.689-.017-1.996L14.326 7.51a1.2 1.2 0 0 1-.766-.74l-1.565-4.365Zm-1.938 4.861.963-2.837 1.034 2.882a2.8 2.8 0 0 0 1.789 1.724l2.582.82-2.608.877a2.8 2.8 0 0 0-1.753 1.74l-1.043 3.02-.975-2.977a2.8 2.8 0 0 0-1.783-1.788L5.62 9.853l2.619-.815a2.8 2.8 0 0 0 1.819-1.773Z"},"children":[]}],"metadata":""}]},"name":"ai-assistant"};
 
 export default AiAssistant;

package/src/icons/ast/Clear.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const Clear: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M2.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM6 4.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0ZM4.5 7.25a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"m14.64 8.422 3.89-3.892a.75.75 0 0 0-1.06-1.06l-3.892 3.89-.604-.603a2.25 2.25 0 0 0-2.846-.277l-6.546 4.397a.75.75 0 0 0 .002 1.247c1.099.733 1.733 1.586 2.423 2.515.17.228.342.46.526.697.934 1.2 2.064 2.336 4.285 2.892a.75.75 0 0 0 .82-.333l3.834-6.186a2.25 2.25 0 0 0-.322-2.777l-.51-.51Zm-3.675-.697a.75.75 0 0 1 .948.092l2.176 2.176a.75.75 0 0 1 .107.926l-.465.751L10.259 8.2l.706-.474ZM8.99 9.05l3.928 3.929-2.257 3.642c-1.438-.474-2.213-1.266-2.945-2.207a20.49 20.49 0 0 1-.25-.329.748.748 0 0 0 .063-.056l1-1a.75.75 0 1 0-1.06-1.06l-.914.913c-.363-.45-.775-.909-1.272-1.342l3.707-2.49Z"},"children":[]}],"metadata":""}]},"name":"clear"};
+
+export default Clear;

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

@@ -51,6 +51,7 @@ export { default as CheckCircleFilled } from './CheckCircleFilled';
 export { default as CheckCircle } from './CheckCircle';
 export { default as Checked } from './Checked';
 export { default as ClearValue } from './ClearValue';
+export { default as Clear } from './Clear';
 export { default as ClockAlarm } from './ClockAlarm';
 export { default as ClockForward } from './ClockForward';
 export { default as Clock } from './Clock';
@@ -159,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;