@fibery/ui-kit 1.37.0 → 1.38.0

package/src/design-system.ts

@@ -152,8 +152,8 @@ export const themeColors = {
 
   // Shadows and effects / Elevation
   shadow50: [
-    `0px 0px 0px 0.5px ${getOpacities(slate.slate12).opacity5}`,
-    `0px 0px 0px 0.5px ${getOpacities(slateDark.slate12).opacity15}`,
+    `0px 0px 0px 1px ${getOpacities(slate.slate12).opacity5}`,
+    `0px 0px 0px 1px ${getOpacities(slateDark.slate12).opacity10}`,
   ],
   shadow100: [
     `0px 1px 4px 0px ${getOpacities(slate.slate12).opacity5}`,
@@ -231,7 +231,9 @@ export const themeColors = {
   mainBg: [slate.slate3, slateDark.slateBase],
   panelBg: [whiteA.whiteA0, slateDark.slate1],
   panelContentBg: [slate.slate2, slateDark.slate1],
+  panelContentBgOpacity80: [getOpacities(slate.slate2).opacity80, getOpacities(slateDark.slate1).opacity80],
   colorBgRelationContainer: [slate.slate2, slateDark.slate1],
+  colorBgAISidebarContent: [slate.slate1, slateDark.slate1],
   pageBg: [whiteA.whiteA0, slateDark.slate1],
   pageContentBg: [whiteA.whiteA0, slateDark.slate2],
   colorBgPopup: [whiteA.whiteA0, slateDark.slate4],
@@ -263,6 +265,8 @@ export const themeColors = {
   codeColor: [red.red9, red.red8],
   codeBgColor: [slate.slate3, slateDark.slate4],
   codeBlockBgColor: [slate.slate3, slateDark.slate4],
+  addedDiffTextColor: [teal.teal9, tealDark.teal11],
+  removedDiffTextColor: [red.red11, redDark.red11],
 
   // Entity
   entityNodeColor: [slateDark.slate3, slate.slate8],
@@ -480,7 +484,7 @@ export const themeColors = {
   colorBgMenuItemSelectedFocused: [indigo.indigo6, indigoDark.indigo5],
   colorBgFieldEditorContainer: [slate.slate2, slateDark.slate3],
   colorBgFieldEditorLinkEqualSign: [slate.slate6, slateDark.slate2],
-  allowedDropColor: [getOpacities(slate.slate3).opacity80, getOpacities(slateDark.slate3).opacity80],
+  allowedDropColor: [slate.slate4, slateDark.slate4],
   relationViewBgColor: [slate.slate2, slateDark.slate3],
 
   mySpaceIconColor: [swatches["gray-light"], swatches["gray-light"]],
@@ -569,7 +573,12 @@ export const themeColors = {
   richTextTableBorder: [blackA.blackA5, whiteA.whiteA7],
 
   // Drag and drop
-  colorBgDropLine: [indigo.indigo7, indigoDark.indigo7],
+  colorBgDropLine: [indigo.indigo8, indigoDark.indigo8],
+
+  // Board
+  boardBg: [slate.slate1, slateDark.slate1],
+  boardBgWithOpacity80: [getOpacities(slate.slate1).opacity80, getOpacities(slateDark.slate1).opacity80],
+  boardAxisBgHover: [slate.slate4, slateDark.slate4],
 
   // Grid
   gridHeaderBgColor: [slate.slate2, slateDark.slate3],
@@ -684,8 +693,8 @@ export const themeColors = {
   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],
+  colorBgReactionsDefault: [whiteA.whiteA0, slateDark.slate2],
+  colorBgReactionsHover: [slate.slate3, slateDark.slate6],
   colorBorderReactionsHover: [slate.slate8, slateDark.slate9],
   colorBgReactionsSelectedDefault: [indigo.indigo3, indigoDark.indigo8],
   colorBorderReactionsSelectedDefault: [indigo.indigo8, indigoDark.indigo8],
@@ -706,7 +715,7 @@ export const themeColors = {
   colorTextEntityAvatarHover: [indigo.indigo9, indigoDark.indigo9],
 
   // Text editor
-  colorBgEditorImageZoomed: [getOpacities(slate.slate3).opacity90, getOpacities(slateDark.slate6).opacity90],
+  colorBgEditorImageZoomed: [slate.slate3, slateDark.slate6],
 
   //Whiteboard
   instrumentsMenuBg: [getOpacities(whiteA.whiteA0).opacity100, getOpacities(slateDark.slate4).opacity100],
@@ -807,15 +816,12 @@ function getTypeColors(themeColor: string, theme: ThemeMode) {
   } catch (e) {
     color = brandColors.green;
   }
-  const boardBg = chroma(color).luminance(0.85).desaturate(0.2).set("hsl.h", "+2");
 
   const lightTypeColors = {
     primary: color,
     opacity: getOpacities(color),
     darkenPrimary: getDarkenColor(color),
     brightenPrimary: chroma(color).luminance(0.92).desaturate(0.1).alpha(0.98).css(),
-    boardBg: boardBg.hex(),
-    boardBgOverlay: boardBg.alpha(0.8).css(),
     headerBg: chroma(color).luminance(0.7).desaturate(0.5).set("hsl.h", "+2").css(),
     detailsBg: chroma(color).alpha(0.5).luminance(0.85).hex(),
     focus: chroma(color).alpha(0.25).css(),
@@ -827,8 +833,6 @@ function getTypeColors(themeColor: string, theme: ThemeMode) {
     opacity: getOpacities(color),
     darkenPrimary: getDarkenColor(color),
     brightenPrimary: chroma(color).luminance(0.92).desaturate(0.1).alpha(0.98).css(),
-    boardBg: boardBg.hex(),
-    boardBgOverlay: boardBg.alpha(0.8).css(),
     headerBg: chroma(color).luminance(0.7).desaturate(0.5).set("hsl.h", "+2").css(),
     detailsBg: chroma(color).alpha(0.03).luminance(0.8).desaturate(0.8).darken(0.1).hex(),
     focus: chroma(color).alpha(0.25).css(),
@@ -951,6 +955,7 @@ export const space = {
   s2: 2,
   s3: 3,
   s4: 4,
+  s5: 5,
   s6: 6,
   s8: 8,
   s10: 10,
@@ -990,11 +995,13 @@ export const layout = {
   menuGroupHeaderIndent: 28, // I'm ok
   menuItemLevelIndent: 24,
   listItemHeight: 38,
+  mobileListItemHeight: 44,
   itemHeight: 36,
   itemWithSubtitleHeight: 52,
   groupTitleHeight: 30,
   enumItemHeight: 32,
   menuItemHeight: 32,
+  mobileMenuItemHeight: 44,
   newMenuItemHeight: 28, // I'm ok
   mobileSidebarMenuItemHeight: 44,
   newMenuIconSize: 18,
@@ -1026,11 +1033,13 @@ export const layout = {
   unitHeight: 18,
 } as const;
 
+export const menuItemHeightVar = `--${varPrefix}-layout-menuItemHeight`;
 export const sidebarMenuItemHeightVar = `--${varPrefix}-layout-sidebarMenuItemHeight`;
 export const sidebarMenuIconSizeVar = `--${varPrefix}-layout-sidebarMenuIconSize`;
 export const listRowSurfaceFontSizeVar = `--${varPrefix}-layout-listRowSurfaceFontSize`;
 
 export const layoutVars = {
+  menuItemHeight: `var(${menuItemHeightVar})`,
   sidebarMenuItemHeight: `var(${sidebarMenuItemHeightVar})`,
   sidebarMenuIconSize: `var(${sidebarMenuIconSizeVar})`,
   listRowSurfaceFontSize: `var(${listRowSurfaceFontSizeVar})`,

package/src/dropdown-menu/index.tsx

@@ -4,6 +4,7 @@ import {styled} from "@linaria/react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import {forwardRef} from "react";
 import {border, layout, space, textStyles, themeVars} from "../design-system";
+import {mobileRootSelector} from "../mobile-styles";
 
 export const Root = (dropdownMenuProps: DropdownMenuPrimitive.DropdownMenuProps) => (
   <DropdownMenuPrimitive.Root dir="ltr" modal={false} {...dropdownMenuProps} />
@@ -22,7 +23,7 @@ const rowItemStyles = {
   margin: `0px ${space.s4}px`,
   cursor: "pointer",
 
-  "&:hover,&[data-highlighted]": {
+  '&:hover,&[data-highlighted],&[aria-expanded="true"]': {
     marginLeft: 4,
     marginRight: 4,
     backgroundColor: themeVars.colorBgActionsMenuItemHover,
@@ -37,6 +38,12 @@ const rowItemStyles = {
       backgroundColor: "unset",
     },
   },
+
+  [`${mobileRootSelector} &`]: {
+    ...textStyles.big,
+    minHeight: layout.mobileMenuItemHeight,
+    padding: `0px ${space.s12}px`,
+  },
 };
 
 const dropdownMenuContentStyles = css`

package/src/emoji-picker/app-icon-picker.tsx

@@ -12,6 +12,7 @@ const i18n = {search: "Search icon...", notfound: "No Icons Found"};
 
 export type AppIconPickerProps = {
   color?: string;
+  emojiSize?: number;
   getHoverColor?: (color: string) => string | undefined;
   colors?: string[];
   onColorSelect?: (c: $TSFixMe) => void;
@@ -27,6 +28,7 @@ export const AppIconPicker: React.FC<AppIconPickerProps> = ({
   onColorSelect,
   getHoverColor,
   autoFocus = true,
+  emojiSize = 20,
 }) => {
   const themeMode = useThemeMode();
 
@@ -35,8 +37,8 @@ export const AppIconPicker: React.FC<AppIconPickerProps> = ({
       <svg
         style={{
           display: "block",
-          width: 20,
-          height: 20,
+          width: emojiSize,
+          height: emojiSize,
           fill: color ? getIconColor(themeMode, color) : undefined,
         }}
         viewBox="0 0 24 24"
@@ -44,12 +46,12 @@ export const AppIconPicker: React.FC<AppIconPickerProps> = ({
         <use href={(emoji as CustomEmoji).imageUrl} />
       </svg>
     ),
-    [color, themeMode]
+    [color, themeMode, emojiSize]
   );
 
   return (
     <EmojiPickerRoot i18n={i18n} onEmojiSelect={onSelect}>
-      <EmojiPickerContent emojiHoverColor={color ? getHoverColor?.(color) : undefined} emojiSize={20}>
+      <EmojiPickerContent emojiHoverColor={color ? getHoverColor?.(color) : undefined} emojiSize={emojiSize}>
         <LazyIconDataStore fallback={<div style={{height: "302px"}}></div>}>
           <EmojiPickerContentWithColor
             color={color}

package/src/emoji-picker/emoji-picker-preview-footer.tsx

@@ -70,7 +70,7 @@ export const EmojiPickerPreviewFooter: React.FC<{
       {emojiPreview ? (
         <EmojiPreview emoji={emojiPreview.emoji} />
       ) : onAddCustomEmoji ? (
-        <Button variant="outline" color="neutral" size="small" onClick={onAddCustomEmoji}>
+        <Button variant="outline" color="neutral" size="small" supportMobile onClick={onAddCustomEmoji}>
           Add Emoji
         </Button>
       ) : null}

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

@@ -19,6 +19,7 @@ export type EmojiPickerProps = {
   onSelect: (emoji: EmojiItem) => void;
   showSkinTones?: boolean;
   searchRef?: React.RefObject<HTMLInputElement>;
+  searchAutofocus?: boolean;
 };
 export const EmojiPicker: React.FC<EmojiPickerProps> = ({
   onSelect,
@@ -30,6 +31,7 @@ export const EmojiPicker: React.FC<EmojiPickerProps> = ({
   getHoverColor,
   showSkinTones,
   searchRef,
+  searchAutofocus,
   emojiSize = 20,
 }) => {
   const showFooter = Boolean(onAddCustomEmoji) || showSkinTones;
@@ -43,6 +45,7 @@ export const EmojiPicker: React.FC<EmojiPickerProps> = ({
           getHoverColor={getHoverColor}
           onColorSelect={onColorSelect}
           searchRef={searchRef}
+          searchAutofocus={searchAutofocus}
         />
 
         {showFooter ? (

package/src/emoji-picker/emoji.tsx

@@ -1,8 +1,9 @@
+import {isAndroid} from "../is-android";
 import {Emoji as EmojiPrimitive, EmojiProps as EmojiPrimitiveProps} from "./primitives/emoji";
 import {isApple} from "./utils/emoji-set";
 import {detectEmojiSupportLevel} from "./utils/emoji-support";
 
 export type EmojiProps = EmojiPrimitiveProps;
 export const Emoji: React.FC<EmojiPrimitiveProps> = (props) => {
-  return <EmojiPrimitive version={detectEmojiSupportLevel()} native={isApple()} {...props} />;
+  return <EmojiPrimitive version={detectEmojiSupportLevel()} native={isApple() || isAndroid()} {...props} />;
 };

package/src/emoji-picker/icon-emoji-picker.tsx

@@ -69,6 +69,7 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
       label: "Icons",
       children: (
         <AppIconPicker
+          emojiSize={emojiSize}
           color={color}
           onColorSelect={showColorPickerOnTabs.includes("icons") ? onColorSelect : undefined}
           getHoverColor={getHoverColor}
@@ -86,6 +87,7 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
       className={css`
         display: flex;
         flex-direction: column;
+        height: 100%;
       `}
     >
       <TabNavRoot className={tabNavRootStyle}>
@@ -106,7 +108,14 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
           </TabNavList>
           {onReset && (
             <TabNavItem>
-              <Button size="small" variant="ghost" color="neutral" iconStart={<EmojiDelete />} onClick={onReset}>
+              <Button
+                size="small"
+                variant="ghost"
+                color="neutral"
+                iconStart={<EmojiDelete />}
+                onClick={onReset}
+                supportMobile
+              >
                 {resetLabel}
               </Button>
             </TabNavItem>

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

@@ -5,7 +5,6 @@ const footerCss = css`
   position: relative;
   border-top: 1px solid var(--fibery-color-separatorColor);
   padding: ${space.s6}px ${space.s12}px;
-  height: 40px;
 
   display: flex;
   align-items: center;

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

@@ -82,6 +82,7 @@ export const EmojiPickerSkinTone: React.FC<EmojiPickerSkinToneProps> = ({classNa
             }
             setOpened(!opened);
           }}
+          supportMobile
           className={css`
             &:hover:not(:disabled),
             &:focus-visible {

package/src/emoji-picker/use-responsive-emoji-size.ts

@@ -0,0 +1,11 @@
+import {useMemo} from "react";
+import {measureScrollbar} from "@fibery/helpers/utils/measure-scrollbar";
+import {useIsPhone} from "../use-is-phone";
+
+export const useResponsiveEmojiSize = () => {
+  const isPhone = useIsPhone();
+  return useMemo(
+    () => (isPhone ? Math.min(Math.floor((document.body.clientWidth - 24 - measureScrollbar() - 9 * 12) / 9), 40) : 20),
+    [isPhone]
+  );
+};

package/src/emoji-picker/utils/emoji-set.ts

@@ -1,5 +1,6 @@
 import {SpritesheetSet} from "@fibery/emoji-data";
+import {isAndroid} from "../../is-android";
 
 export const isApple = () => /Mac|iPhone|iPad/.test(navigator.userAgent);
 
-export const getEmojiSet = (): SpritesheetSet => (isApple() ? "apple" : "twitter");
+export const getEmojiSet = (): SpritesheetSet => (isApple() ? "apple" : isAndroid() ? "google" : "twitter");

package/src/empty-state/empty-state.tsx

@@ -1,5 +1,6 @@
 import {css, cx} from "@linaria/core";
 import {fontWeight, space, textStyles, themeVars} from "../design-system";
+import {mobileRootSelector} from "../mobile-styles";
 
 const emptyStateCss = css`
   display: flex;
@@ -31,7 +32,12 @@ const headingCss = css`
   font-weight: ${fontWeight.semibold};
   color: ${themeVars.textColor};
   margin: 0;
+
+  ${mobileRootSelector} & {
+    ${textStyles.heading4}
+  }
 `;
+
 const descriptionCss = css`
   ${textStyles.regular};
   color: ${themeVars.accentTextColor};

package/src/field-icon.tsx

@@ -18,8 +18,11 @@ export function FieldIcon({
   if (iconName && isAppIcon(iconName)) {
     return <FieldAppIcon iconName={iconName} color={color} containerSize={containerSize} iconSize={iconSize} />;
   }
+
+  const defaultSize = containerSize || iconSize;
+
   return (
-    <Suspense fallback={null}>
+    <Suspense fallback={<div style={{width: defaultSize, height: defaultSize}} />}>
       <FieldTypeIconLazy iconName={iconName} color={color} containerSize={containerSize} iconSize={iconSize} />
     </Suspense>
   );

package/src/file-item.tsx

@@ -1,10 +1,15 @@
 import {css, cx} from "@linaria/core";
-import {PureComponent} from "react";
+import {PureComponent, useEffect, useState} from "react";
 import {ActionsMenu, ActionsMenuItem} from "./actions-menu";
 import {ActionsButtonCompact} from "./button/actions-button-compact";
 import {Item} from "./item";
 import {border, colors, fontWeight, space, textStyles, themeVars} from "./design-system";
 import {makeButtonColors} from "./button/make-button-colors";
+import {IconButton} from "./button/icon-button";
+import ZoomIn from "./icons/react/RicheditorImageZoom";
+import {Tooltip} from "./tooltip";
+import {Zoom} from "./images-gallery/zoom";
+import {useImagesGalleryMethods, useImagesGalleryRegistry} from "./images-gallery/images-gallery";
 
 const fileItemStyle = css`
   ${{
@@ -50,7 +55,7 @@ const imageOverlayStyle = css`
     borderRadius: border.radius6,
     "&:hover": {
       backgroundPosition: "0% 0%",
-      color: colors.inversedTextColor,
+      color: themeVars.inversedTextColor,
     },
   }}
 `;
@@ -65,15 +70,71 @@ export type FileItemType = {
   name: string;
   url: string;
   thumbnailUrl: string | null;
+  previewUrl: string | null;
   status?: string;
 };
 
 export type FileItemProps = {
   data: FileItemType;
-  onRemoveClick: (x: FileItemType) => void;
+  onRemoveClick?: (x: FileItemType) => void;
   disabled?: boolean;
 };
 
+function ImageZoom({thumbnailUrl, url}: {thumbnailUrl: string; url: string}) {
+  const [zoomed, setZoomed] = useState(false);
+  const imagesRegistry = useImagesGalleryRegistry();
+  const galleryMethods = useImagesGalleryMethods();
+  useEffect(() => {
+    imagesRegistry.set(thumbnailUrl, {zoomed: false, setZoomed});
+  }, [imagesRegistry, thumbnailUrl]);
+  useEffect(() => {
+    if (zoomed) {
+      galleryMethods.setActivated(true);
+    }
+    const imageData = imagesRegistry.get(thumbnailUrl);
+    if (imageData) {
+      imageData.zoomed = zoomed;
+    } else {
+      imagesRegistry.set(thumbnailUrl, {zoomed, setZoomed});
+    }
+  }, [galleryMethods, zoomed, thumbnailUrl, imagesRegistry]);
+  return (
+    <div
+      className={css`
+        position: relative;
+      `}
+    >
+      <Zoom
+        zoomImg={{src: url}}
+        openOnClick={true}
+        className={css`
+          position: absolute;
+          outline: none;
+          bottom: 0;
+          top: 0;
+          left: 0;
+          right: 0;
+          cursor: zoom-in;
+        `}
+        zoomed={zoomed}
+        onZoomedChange={setZoomed}
+      >
+        <div role="img" style={{backgroundImage: `url(${thumbnailUrl})`, outline: "none"}} />
+      </Zoom>
+      <Tooltip title={"Zoom in"}>
+        <IconButton
+          style={makeButtonColors(colors.inversedTextColor, "ghost")}
+          onClick={() => setZoomed(true)}
+          size={"small"}
+          supportMobile={true}
+        >
+          <ZoomIn />
+        </IconButton>
+      </Tooltip>
+    </div>
+  );
+}
+
 export class FileItem extends PureComponent<FileItemProps> {
   _renderStatus() {
     const {status} = this.props.data;
@@ -91,61 +152,117 @@ export class FileItem extends PureComponent<FileItemProps> {
   }
 
   render() {
-    const {name, url, thumbnailUrl, status} = this.props.data;
-
+    const {name, url, thumbnailUrl, status, previewUrl} = this.props.data;
     const isActive = status === "uploading" || status === "deleting";
     const isBackgroundReady = thumbnailUrl && !isActive;
-
     return (
-      <a
-        href={url}
-        rel="noopener noreferrer nofollow"
-        target="_blank"
-        style={isBackgroundReady ? {backgroundImage: `url(${thumbnailUrl})`} : {}}
+      <div
         className={cx(
-          fileItemStyle,
-          isActive &&
+          css`
+            position: relative;
+            height: 100%;
+          `,
+          isBackgroundReady &&
             css`
-              ${{backgroundColor: themeVars.entityCardSelectedColor}}
+              &:hover .${overlayStyle} {
+                background-position: 0 0;
+                color: ${themeVars.inversedTextColor};
+              }
             `
         )}
       >
-        <div className={cx(overlayStyle, isBackgroundReady ? imageOverlayStyle : fileOverlayStyle)}>
-          <Item
-            multiline
-            textClassName={nameStyle}
-            rightContainer={
-              <ActionsMenu
-                trigger={
-                  <ActionsButtonCompact
-                    style={isBackgroundReady ? makeButtonColors(colors.inversedTextColor, "ghost") : undefined}
-                  />
-                }
-              >
-                <a download={name} href={url}>
-                  <ActionsMenuItem>Download</ActionsMenuItem>
-                </a>
-                <ActionsMenuItem
-                  onSelect={() => this.props.onRemoveClick(this.props.data)}
-                  dangerous
-                  disabled={this.props.disabled}
-                >
-                  Delete
-                </ActionsMenuItem>
-              </ActionsMenu>
+        {/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
+        <a
+          href={url}
+          className={css`
+            &::before {
+              bottom: 0;
+              content: "";
+              display: block;
+              left: 0;
+              position: absolute;
+              right: 0;
+              top: 0;
             }
-          >
-            <div
-              className={css`
-                ${fontWeight}
-              `}
+          `}
+          rel="noopener noreferrer nofollow"
+          target="_blank"
+        />
+        <div
+          style={isBackgroundReady ? {backgroundImage: `url(${thumbnailUrl})`} : {}}
+          className={cx(
+            fileItemStyle,
+            isActive &&
+              css`
+                ${{backgroundColor: themeVars.entityCardSelectedColor}}
+              `
+          )}
+        >
+          <div className={cx(overlayStyle, isBackgroundReady ? imageOverlayStyle : fileOverlayStyle)}>
+            <Item
+              multiline
+              textClassName={nameStyle}
+              rightContainer={
+                <div
+                  className={css`
+                    display: flex;
+                    align-items: center;
+                    gap: ${space.s4}px;
+                  `}
+                >
+                  {previewUrl ? <ImageZoom url={url} thumbnailUrl={previewUrl} /> : null}
+                  <ActionsMenu
+                    trigger={
+                      <ActionsButtonCompact
+                        className={css`
+                          z-index: 1;
+                        `}
+                        style={isBackgroundReady ? makeButtonColors(colors.inversedTextColor, "ghost") : undefined}
+                      />
+                    }
+                  >
+                    <a download={name} href={url}>
+                      <ActionsMenuItem>Download</ActionsMenuItem>
+                    </a>
+                    <ActionsMenuItem
+                      onSelect={() => this.props.onRemoveClick?.(this.props.data)}
+                      dangerous
+                      disabled={this.props.disabled}
+                    >
+                      Delete
+                    </ActionsMenuItem>
+                  </ActionsMenu>
+                </div>
+              }
             >
-              {this._renderStatus()}
-            </div>
-            {name}
-          </Item>
+              <div
+                className={css`
+                  ${fontWeight}
+                `}
+              >
+                {this._renderStatus()}
+              </div>
+              <a
+                className={css`
+                  position: relative;
+                  z-index: 1;
+                  color: inherit;
+                  text-decoration: none;
+                  &:hover {
+                    text-decoration: none;
+                    color: inherit;
+                  }
+                `}
+                href={url}
+                target={"_blank"}
+                rel="noreferrer"
+              >
+                {name}
+              </a>
+            </Item>
+          </div>
         </div>
-      </a>
+      </div>
     );
   }
 }

package/src/html-styles.ts

@@ -226,9 +226,13 @@ const htmlStyles = {
   },
   "& > *:first-child": {
     marginTop: 0,
+    paddingTop: space.s3,
+    paddingBottom: space.s3,
   },
   "& > *:last-child": {
     marginBottom: 0,
+    paddingTop: space.s3,
+    paddingBottom: space.s3,
   },
   "& > .fibery-rich-text-image-block:last-child": {
     marginBottom: space.s4,
@@ -433,9 +437,13 @@ const smallHtmlStyles = {
   },
   "& > *:first-child": {
     marginTop: 0,
+    paddingTop: space.s2,
+    paddingBottom: space.s2,
   },
   "& > *:last-child": {
     marginBottom: 0,
+    paddingTop: space.s2,
+    paddingBottom: space.s2,
   },
   "& > .fibery-rich-text-image-block:last-child": {
     marginBottom: space.s2,

package/src/icons/ast/ActivityFilled.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const ActivityFilled: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M12.4 16.5c.192 0 .288 0 .355.05.053.04.094.117.099.183.005.084-.041.155-.134.296a3.247 3.247 0 0 1-5.439 0c-.092-.141-.139-.212-.133-.296a.273.273 0 0 1 .098-.183c.067-.05.163-.05.355-.05h4.8ZM10 2c1.51 0 2.966.559 4.048 1.568 1.083 1.012 1.702 2.395 1.702 3.849 0 2.105.529 3.55 1.117 4.514.273.445.484.761.641.995l.065.097c.076.114.153.23.21.332.028.05.064.12.092.2a.898.898 0 0 1 .052.38c-.01.105-.031.287-.135.473a1.151 1.151 0 0 1-.335.365.94.94 0 0 1-.299.145 1.501 1.501 0 0 1-.205.042c-.12.017-.259.025-.404.03-.28.01-.669.01-1.155.01H4.607c-.487 0-.875 0-1.156-.01a4.065 4.065 0 0 1-.404-.03 1.498 1.498 0 0 1-.205-.042.942.942 0 0 1-.299-.145 1.151 1.151 0 0 1-.335-.365 1.157 1.157 0 0 1-.135-.473.895.895 0 0 1 .053-.38c.029-.08.064-.15.093-.2.056-.101.133-.218.209-.332l.065-.097c.157-.234.368-.55.64-.995.589-.964 1.117-2.409 1.117-4.514 0-1.454.62-2.837 1.703-3.849C7.035 2.56 8.491 2 10 2Z"},"children":[]}],"metadata":""}]},"name":"activity-filled"};
+
+export default ActivityFilled;

package/src/icons/ast/AiAssistantFilled.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const AiAssistantFilled: 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.365Z"},"children":[]}],"metadata":""}]},"name":"ai-assistant-filled"};
+
+export default AiAssistantFilled;