@fibery/ui-kit 1.29.5 → 1.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.29.5",
+  "version": "1.31.0",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -76,8 +76,8 @@
     "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/react": "1.4.0",
+    "@fibery/emoji-data": "2.6.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -111,8 +111,8 @@
     "svgo": "2.8.0",
     "typescript": "5.4.3",
     "unist-util-reduce": "0.2.2",
-    "@fibery/eslint-config": "8.6.0",
-    "@fibery/babel-preset": "7.4.0"
+    "@fibery/babel-preset": "7.4.0",
+    "@fibery/eslint-config": "8.6.0"
   },
   "jest": {
     "testEnvironment": "jsdom",

package/src/button/actions-button-compact.tsx

@@ -1,12 +1,12 @@
-import {IconButton, IconButtonProps} from "./icon-button";
-import MoreCompactIcon from "../icons/react/MoreCompact";
 import {forwardRef} from "react";
+import {IconButton, IconButtonProps} from "../button-v2/icon-button";
+import MoreCompactIcon from "../icons/react/MoreCompact";
 
 export const ActionsButtonCompact = forwardRef<HTMLButtonElement, IconButtonProps>(
   function ActionsButtonCompactComponent({...rest}, ref) {
     return (
       <IconButton ref={ref} size="small" {...rest}>
-        <MoreCompactIcon iconSize={18} containerSize={20} />
+        <MoreCompactIcon />
       </IconButton>
     );
   }

package/src/button/actions-button.tsx

@@ -1,16 +1,16 @@
-import {IconButton, IconButtonProps} from "./icon-button";
-import MoreCompact from "../icons/react/MoreCompact";
-import {forwardRef} from "react";
 import {css} from "@linaria/core";
+import {forwardRef} from "react";
+import {IconButton, IconButtonProps} from "../button-v2/icon-button";
 import {border, themeVars} from "../design-system";
+import MoreCompact from "../icons/react/MoreCompact";
 
 export const ActionsButton = forwardRef<HTMLButtonElement, IconButtonProps>(function ActionsButtonComponent(
   {...rest},
   ref
 ) {
   return (
-    <IconButton ref={ref} size="normal" {...rest}>
-      <MoreCompact iconSize={18} containerSize={20} />
+    <IconButton ref={ref} size="medium" {...rest}>
+      <MoreCompact />
     </IconButton>
   );
 });

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,37 @@ 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,
+      width,
+      ...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}
+        fullWidth={width === "100%"}
+      />
+    );
+  }
+  return <ButtonComponent {...props} className={props.className} ref={ref} />;
+});

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
@@ -419,7 +419,6 @@ export const themeColors = {
   // :focus, :focus:hover
   colorBgPinnedFieldsLabel: [slate.slate11, slateDark.slate11],
   colorBgObjectEditorSeparator: [slate.slate12, slateDark.slate12],
-  colorBgObjectEditorSeparatorButton: [slate.slate4, slateDark.slate4],
   colorBgMenuItemSelectedFocused: [indigo.indigo6, indigoDark.indigo6],
   colorBgFieldEditorContainer: [slate.slate2, slateDark.slate3],
   colorBgFieldEditorLinkEqualSign: [slate.slate6, slateDark.slate2],
@@ -475,10 +474,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 +531,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,8 +886,9 @@ export const layout = {
   logoSize: 16,
   menuDefaultWidth: 243,
   desktopToolbarHeight: 32,
-  desktopMenuMinWidth: 200,
-  menuMinWidth: 54, //TODO: make dependency to itemHeight
+  desktopMenuMinWidth: 240,
+  collapsedMenuMinWidth: 54,
+  menuMinWidth: 240, //TODO: make dependency to itemHeight
   menuMaxWidth: 480,
   menuItemMinWidth: 80,
   menuGroupHeaderIndent: 28, // I'm ok
@@ -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/emoji-picker-content-with-color.tsx

@@ -1,6 +1,6 @@
 import {css} from "@linaria/core";
-import {useState, useRef} from "react";
-import {IconButton} from "../button/icon-button";
+import {useRef, useState} from "react";
+import {IconButton} from "../button-v2/icon-button";
 import {CollapsibleContent, CollapsibleRoot, CollapsibleTrigger} from "../collapsible";
 import {ColorPicker} from "../color-picker";
 import {getIconColor, space} from "../design-system";
@@ -30,15 +30,8 @@ const ColorPickerCollapsibleTrigger: React.FC<ColorPickerCollapsibleTrigger> = (
   return (
     <CollapsibleTrigger asChild>
       <Tooltip title={label}>
-        <IconButton
-          data-testid="emoji-picker-color-trigger"
-          size="big"
-          className={css`
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-          `}
-        >
-          <Icon color={iconColor} iconSize={18} containerSize={20} />
+        <IconButton data-testid="emoji-picker-color-trigger" size="small">
+          <Icon color={iconColor} />
         </IconButton>
       </Tooltip>
     </CollapsibleTrigger>

package/src/emoji-picker/primitives/category-label.tsx

@@ -1,10 +1,10 @@
 import type {Category} from "@fibery/emoji-data";
 
 import {css} from "@linaria/core";
+import {IconButton} from "../../button-v2/icon-button";
 import {space, textStyles, themeVars} from "../../design-system";
-import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
-import {IconButton} from "../../button/icon-button";
 import Settings from "../../icons/react/Settings";
+import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
 
 const categoryLabelCss = css`
   ${textStyles.heading6}
@@ -33,8 +33,8 @@ export const EmojiPickerCategoryLabel: React.FC<EmojiPickerCategoryLabelProps> =
       <span>{label}</span>
 
       {category.id === "custom" && emojiPickerCtx.onCustomCategorySettings && (
-        <IconButton onClick={emojiPickerCtx.onCustomCategorySettings}>
-          <Settings iconSize={16} />
+        <IconButton onClick={emojiPickerCtx.onCustomCategorySettings} size="small">
+          <Settings />
         </IconButton>
       )}
     </div>

package/src/emoji-picker/primitives/grid-item.tsx

@@ -1,7 +1,7 @@
 import type {EmojiItem} from "@fibery/emoji-data";
 import {css} from "@linaria/core";
 import {memo} from "react";
-import {IconButton} from "../../button/icon-button";
+import {IconButton} from "../../button-v2/icon-button";
 import {themeVars} from "../../design-system";
 import {useEmojiDataStoreSelector} from "../stores/emoji-data-store";
 import {useEmojiPickerContentSettings} from "./content";
@@ -39,15 +39,12 @@ export const EmojiPickerGridItem = memo<EmojiPickerGridItemProps>(({id, category
         width: emojiContentSettings.emojiContainerSize,
         height: emojiContentSettings.emojiContainerSize,
       }}
-      size="big"
+      size="large"
       onClick={() => emojiPickerCtx.onEmojiSelect(emoji)}
       onMouseEnter={() => setEmojiPreview({emoji, categoryId})}
       onMouseLeave={() => setEmojiPreview(null)}
       data-highlighted={highlighted}
       className={css`
-        display: flex;
-        align-items: center;
-        justify-content: center;
         &:hover:not(:disabled),
         &:focus-visible,
         &[data-highlighted="true"] {

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

@@ -2,16 +2,16 @@ import {EmojiItem} from "@fibery/emoji-data";
 import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
 import {css, cx} from "@linaria/core";
 import {startTransition, useId, useRef} from "react";
-import {IconButton} from "../../button/icon-button";
+import {IconButton} from "../../button-v2/icon-button";
 import {border, space, textStyles, themeVars} from "../../design-system";
 import Close from "../../icons/react/Close";
 import Search from "../../icons/react/Search";
 import {useEmojiDataStore} from "../stores/emoji-data-store";
+import type {EmojiPickerGridHandle} from "./grid";
+import {useEmojiPreview, useSetEmojiPreview} from "./preview-provider";
 import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
 import {useFoundEmojis, useSetFoundEmojis} from "./search-provider";
 import {useEmojiSkin} from "./skin-provider";
-import {useEmojiPreview, useSetEmojiPreview} from "./preview-provider";
-import type {EmojiPickerGridHandle} from "./grid";
 
 const searchCss = css`
   ${textStyles.regular}
@@ -24,7 +24,7 @@ const searchCss = css`
 
   display: flex;
   align-items: center;
-  padding-left: ${space.s12}px;
+  padding-left: ${space.s8}px;
   gap: ${space.s2}px;
 
   /* For screenreaders only, via https://stackoverflow.com/a/19758620 */
@@ -58,13 +58,13 @@ const searchInputCss = css`
 `;
 
 const searchIconCss = css`
-  padding: ${space.s2}px;
+  padding: ${space.s4}px;
 `;
 
 const extraActionSlotCss = css`
   background-color: var(--fibery-emoji-hover-color, ${themeVars.inputCopyBgColor});
-  border-top-right-radius: ${space.s6}px;
-  border-bottom-right-radius: ${space.s6}px;
+  border-radius: ${space.s6}px;
+  margin-right: ${space.s4}px;
 `;
 
 export type EmojiPickerSearchProps = {
@@ -159,7 +159,7 @@ export const EmojiPickerSearch: React.FC<EmojiPickerSearchProps> = ({
     <section className={cx(searchCss, className)} aria-label={i18n.search}>
       {foundEmojis ? (
         <IconButton size="small" onClick={clearSearch}>
-          <Close iconSize={16} />
+          <Close />
         </IconButton>
       ) : (
         <span className={searchIconCss}>

package/src/emoji-picker/primitives/skin-tone.tsx

@@ -1,11 +1,11 @@
 import {EmojiSkin} from "@fibery/emoji-data";
 import {css, cx} from "@linaria/core";
 import {useState} from "react";
+import {IconButton} from "../../button-v2/icon-button";
 import {textStyles, themeVars} from "../../design-system";
 import {Emoji} from "./emoji";
 import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
 import {useEmojiSkin, useSetEmojiSkin} from "./skin-provider";
-import {IconButton} from "../../button/icon-button";
 
 const skinToneWrapperCss = css`
   display: flex;
@@ -75,7 +75,7 @@ export const EmojiPickerSkinTone: React.FC<EmojiPickerSkinToneProps> = ({classNa
     skinToneNodes.push(
       <span key={`skin-tone-${skinTone}`} className={cx(skinToneSwatchCss, (selected || opened) && expandedCss)}>
         <IconButton
-          size="big"
+          size="large"
           onClick={() => {
             if (opened) {
               setSkin(skinTone as EmojiSkin);

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/error-alert/error-alert.tsx

@@ -1,5 +1,5 @@
 import {css} from "@linaria/core";
-import {IconButton} from "../button/icon-button";
+import {IconButton} from "../button-v2/icon-button";
 import {border, layout, space, textStyles, themeVars} from "../design-system";
 import CloseIcon from "../icons/react/Close";
 import WarningIcon from "../icons/react/WarningTriangle";
@@ -50,8 +50,8 @@ export const ErrorAlert: React.FC<ErrorAlertProps> = ({message, description, act
       </div>
       {action}
       {onClose ? (
-        <IconButton onClick={onClose} aria-label="Hide error">
-          <CloseIcon iconSize={16} />
+        <IconButton size="small" onClick={onClose} aria-label="Hide error">
+          <CloseIcon />
         </IconButton>
       ) : null}
     </div>

package/src/icon-button.tsx

@@ -1,3 +1,3 @@
-import {IconButton} from "./button/icon-button";
+import {IconButton} from "./button-v2/icon-button";
 
 export {IconButton};

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;