Fix inversion between background and shadow values (#269)

gsoft-inc · May 15, 2024 · 9b3c84b · 9b3c84b
2 parents 72dada0 + 6086fe5
commit 9b3c84b
Show file tree

Hide file tree

Showing 136 changed files with 249 additions and 234 deletions.
diff --git a/.changeset/perfect-laws-serve.md b/.changeset/perfect-laws-serve.md
@@ -0,0 +1,6 @@
+---
+"@hopper-ui/svg-icons": patch
+"@hopper-ui/icons": patch
+---
+
+fix inversion between background and shadow values
diff --git a/apps/docs/app/ui/layout/aside/Aside.tsx b/apps/docs/app/ui/layout/aside/Aside.tsx
@@ -22,7 +22,7 @@ const Aside = ({ title, links }: React.PropsWithoutRef<AsideProps>) => {
     const observer = useRef<IntersectionObserver | null>(null);
     const sectionTitleDomElement = "[data-section-title]";
     const titleHeight = 28;
-
+    
     useEffect(() => {
         const sectionsTitle = document.querySelectorAll(sectionTitleDomElement);
         const options = {
@@ -100,7 +100,6 @@ const Aside = ({ title, links }: React.PropsWithoutRef<AsideProps>) => {
         setIsOpen(!isOpen);
     };
 
-
     useEffect(() => {
         const handleWindowResize = () => {
             if (window.innerWidth < 768 || window.innerWidth > 992) {
@@ -113,7 +112,7 @@ const Aside = ({ title, links }: React.PropsWithoutRef<AsideProps>) => {
 
     const listItems = links.map(link => (
         <li className={clsx("hd-aside__item", activeSection === link.id && "hd-aside__item--active")} key={link.id}>
-            <a href={link.url} className="hd-aside__link" >
+            <a href={link.url} className="hd-aside__link">
                 {link.title}
             </a>
         </li>
@@ -126,8 +125,18 @@ const Aside = ({ title, links }: React.PropsWithoutRef<AsideProps>) => {
                     <span className="hd-aside__title">{title}</span>
                     <button type="button" className="hd-aside__button" onClick={toggleList}>
                         {title}
-                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" className="hd-aside__button-icon" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M4 6L8 10L12 6" strokeWidth="1.33333" strokeLinecap="round" strokeLinejoin="round" />
+                        <svg width="16"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            fill="none"
+                            className="hd-aside__button-icon"
+                            xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path d="M4 6L8 10L12 6"
+                                strokeWidth="1.33333"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                            />
                         </svg>
                     </button>
                     <ul className={clsx("hd-aside__list", isOpen ? "hd-aside__item--active" : "hd-aside__list--closed")}>

diff --git a/packages/icons/src/RichIcon.module.css b/packages/icons/src/RichIcon.module.css
@@ -1,57 +1,57 @@
 .hop-RichIcon {
     /* These tokens needs to match the ones defined in the generateComponents script */
-    --hop-Richicon-placeholder-shadow: var(--hop-decorative-option7-surface);
-    --hop-Richicon-placeholder-background: var(--hop-decorative-option7-icon);
-    --hop-Richicon-placeholder-fill: var(--hop-samoyed);
+    --hop-RichIcon-placeholder-background: var(--hop-decorative-option7-surface);
+    --hop-RichIcon-placeholder-shadow: var(--hop-decorative-option7-icon);
+    --hop-RichIcon-placeholder-fill: var(--hop-samoyed);
 
     display: inline-block;
     flex-shrink: 0;
 }
 
 .hop-RichIcon--option1 {
-    --hop-Richicon-placeholder-shadow: var(--hop-decorative-option1-surface);
-    --hop-Richicon-placeholder-background: var(--hop-decorative-option1-icon);
-    --hop-Richicon-placeholder-fill: var(--hop-samoyed);
+    --hop-RichIcon-placeholder-background: var(--hop-decorative-option1-surface);
+    --hop-RichIcon-placeholder-shadow: var(--hop-decorative-option1-icon);
+    --hop-RichIcon-placeholder-fill: var(--hop-samoyed);
 }
 
 .hop-RichIcon--option2 {
-    --hop-Richicon-placeholder-shadow: var(--hop-decorative-option2-surface);
-    --hop-Richicon-placeholder-background: var(--hop-decorative-option2-icon);
-    --hop-Richicon-placeholder-fill: var(--hop-samoyed);
+    --hop-RichIcon-placeholder-background: var(--hop-decorative-option2-surface);
+    --hop-RichIcon-placeholder-shadow: var(--hop-decorative-option2-icon);
+    --hop-RichIcon-placeholder-fill: var(--hop-samoyed);
 }
 
 .hop-RichIcon--option3 {
-    --hop-Richicon-placeholder-shadow: var(--hop-decorative-option3-surface);
-    --hop-Richicon-placeholder-background: var(--hop-decorative-option3-icon);
-    --hop-Richicon-placeholder-fill: var(--hop-samoyed);
+    --hop-RichIcon-placeholder-background: var(--hop-decorative-option3-surface);
+    --hop-RichIcon-placeholder-shadow: var(--hop-decorative-option3-icon);
+    --hop-RichIcon-placeholder-fill: var(--hop-samoyed);
 }
 
 .hop-RichIcon--option4 {
-    --hop-Richicon-placeholder-shadow: var(--hop-decorative-option4-surface);
-    --hop-Richicon-placeholder-background: var(--hop-decorative-option4-icon);
-    --hop-Richicon-placeholder-fill: var(--hop-samoyed);
+    --hop-RichIcon-placeholder-background: var(--hop-decorative-option4-surface);
+    --hop-RichIcon-placeholder-shadow: var(--hop-decorative-option4-icon);
+    --hop-RichIcon-placeholder-fill: var(--hop-samoyed);
 }
 
 .hop-RichIcon--option5 {
-    --hop-Richicon-placeholder-shadow: var(--hop-decorative-option5-surface);
-    --hop-Richicon-placeholder-background: var(--hop-decorative-option5-icon);
-    --hop-Richicon-placeholder-fill: var(--hop-samoyed);
+    --hop-RichIcon-placeholder-background: var(--hop-decorative-option5-surface);
+    --hop-RichIcon-placeholder-shadow: var(--hop-decorative-option5-icon);
+    --hop-RichIcon-placeholder-fill: var(--hop-samoyed);
 }
 
 .hop-RichIcon--option6 {
-    --hop-Richicon-placeholder-shadow: var(--hop-decorative-option6-surface);
-    --hop-Richicon-placeholder-background: var(--hop-decorative-option6-icon);
-    --hop-Richicon-placeholder-fill: var(--hop-samoyed);
+    --hop-RichIcon-placeholder-background: var(--hop-decorative-option6-surface);
+    --hop-RichIcon-placeholder-shadow: var(--hop-decorative-option6-icon);
+    --hop-RichIcon-placeholder-fill: var(--hop-samoyed);
 }
 
 .hop-RichIcon--option7 {
-    --hop-Richicon-placeholder-shadow: var(--hop-decorative-option7-surface);
-    --hop-Richicon-placeholder-background: var(--hop-decorative-option7-icon);
-    --hop-Richicon-placeholder-fill: var(--hop-samoyed);
+    --hop-RichIcon-placeholder-background: var(--hop-decorative-option7-surface);
+    --hop-RichIcon-placeholder-shadow: var(--hop-decorative-option7-icon);
+    --hop-RichIcon-placeholder-fill: var(--hop-samoyed);
 }
 
 .hop-RichIcon--option8 {
-    --hop-Richicon-placeholder-shadow: var(--hop-decorative-option8-surface);
-    --hop-Richicon-placeholder-background: var(--hop-decorative-option8-icon);
-    --hop-Richicon-placeholder-fill: var(--hop-samoyed);
+    --hop-RichIcon-placeholder-background: var(--hop-decorative-option8-surface);
+    --hop-RichIcon-placeholder-shadow: var(--hop-decorative-option8-icon);
+    --hop-RichIcon-placeholder-fill: var(--hop-samoyed);
 }
diff --git a/packages/icons/src/generated-rich-icon-components/ActionListRichIcon.tsx b/packages/icons/src/generated-rich-icon-components/ActionListRichIcon.tsx
@@ -5,8 +5,8 @@
 import { createRichIcon } from "../createRichIcon.tsx";
 import { forwardRef, type Ref, type SVGProps } from "react";
 
-const ActionListRichIcon24 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={24} height={24} viewBox="0 0 24 24" ref={ref} {...props}><path fill="var(--hop-Richicon-placeholder-shadow, #E5DED6)" d="M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M6.848 4.551a1.2 1.2 0 0 1 .849-.351H17.4a1.2 1.2 0 0 1 1.2 1.2v12.103a1.2 1.2 0 0 1-.352.849l-1.097 1.096a1.2 1.2 0 0 1-.848.352H6.6a1.2 1.2 0 0 1-1.2-1.2V6.497a1.2 1.2 0 0 1 .351-.848z" /><path fill="var(--hop-Richicon-placeholder-fill, #fff)" fillRule="evenodd" d="M7.8 5.2h9.6c.11 0 .2.09.2.2v12a.2.2 0 0 1-.2.2H7.8a.2.2 0 0 1-.2-.2v-12c0-.11.09-.2.2-.2m5.4 3.1h3v-1h-3zm3 3.6h-3v-1h3zm-3 3.6h3v-1h-3zm-1.427-8.377-1.757 2.19a.5.5 0 0 1-.743.04l-.98-.978L9 7.667l.585.585 1.408-1.755zm-1.757 5.533 1.757-2.19-.78-.626-1.408 1.755L9 11.01l-.707.708.98.979a.5.5 0 0 0 .743-.041m1.757 1.41-1.757 2.19a.5.5 0 0 1-.743.04l-.98-.978L9 14.61l.585.585 1.408-1.755z" /></svg>);
-const ActionListRichIcon32 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={32} height={32} viewBox="0 0 32 32" ref={ref} {...props}><path fill="var(--hop-Richicon-placeholder-shadow, #E5DED6)" d="M0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16S0 24.837 0 16" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M9.131 6.069a1.6 1.6 0 0 1 1.132-.469H23.2a1.6 1.6 0 0 1 1.6 1.6v16.137a1.6 1.6 0 0 1-.469 1.132L22.87 25.93a1.6 1.6 0 0 1-1.132.469H8.8a1.6 1.6 0 0 1-1.6-1.6V8.663a1.6 1.6 0 0 1 .469-1.132z" /><path fill="var(--hop-Richicon-placeholder-fill, #fff)" d="M10.4 6.6h12.8a.6.6 0 0 1 .6.6v16a.6.6 0 0 1-.6.6H10.4a.6.6 0 0 1-.6-.6v-16a.6.6 0 0 1 .6-.6" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" fillRule="evenodd" d="M21.6 10.9h-4v-1h4zm0 4.8h-4v-1h4zm0 4.8h-4v-1h4zM15.463 9.523l-2.238 2.79a.5.5 0 0 1-.744.04l-1.188-1.187.707-.707.794.793 1.889-2.355zm0 4.457-2.238 2.79a.5.5 0 0 1-.744.04l-1.188-1.187.707-.707.794.793 1.889-2.355zm0 4.8-2.238 2.79a.5.5 0 0 1-.744.04l-1.188-1.187.707-.707.794.793 1.889-2.355z" /></svg>);
-const ActionListRichIcon40 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={40} height={40} viewBox="0 0 40 40" ref={ref} {...props}><path fill="var(--hop-Richicon-placeholder-shadow, #E5DED6)" d="M0 20C0 8.954 8.954 0 20 0s20 8.954 20 20-8.954 20-20 20S0 31.046 0 20" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M11.414 7.586A2 2 0 0 1 12.828 7H29a2 2 0 0 1 2 2v20.172a2 2 0 0 1-.586 1.414l-1.828 1.828a2 2 0 0 1-1.414.586H11a2 2 0 0 1-2-2V10.828a2 2 0 0 1 .586-1.414z" /><path fill="var(--hop-Richicon-placeholder-fill, #fff)" d="M13 8.25h16a.75.75 0 0 1 .75.75v20a.75.75 0 0 1-.75.75H13a.75.75 0 0 1-.75-.75V9a.75.75 0 0 1 .75-.75" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" fillRule="evenodd" d="M27 13.625h-5v-1.25h5zm0 6h-5v-1.25h5zm0 6h-5v-1.25h5zm-7.671-13.721L16.53 15.39a.625.625 0 0 1-.93.051l-1.485-1.484.884-.884.992.991 2.361-2.944zm0 5.571-2.798 3.487a.625.625 0 0 1-.93.052l-1.485-1.485.884-.884.992.992 2.361-2.944zm0 6-2.798 3.487a.625.625 0 0 1-.93.052l-1.485-1.485.884-.884.992.992 2.361-2.944z" /></svg>);
+const ActionListRichIcon24 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={24} height={24} viewBox="0 0 24 24" ref={ref} {...props}><path fill="var(--hop-RichIcon-placeholder-background, #E5DED6)" d="M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12" /><path fill="var(--hop-RichIcon-placeholder-shadow, #2A2620)" d="M6.848 4.551a1.2 1.2 0 0 1 .849-.351H17.4a1.2 1.2 0 0 1 1.2 1.2v12.103a1.2 1.2 0 0 1-.352.849l-1.097 1.096a1.2 1.2 0 0 1-.848.352H6.6a1.2 1.2 0 0 1-1.2-1.2V6.497a1.2 1.2 0 0 1 .351-.848z" /><path fill="var(--hop-RichIcon-placeholder-fill, #fff)" fillRule="evenodd" d="M7.8 5.2h9.6c.11 0 .2.09.2.2v12a.2.2 0 0 1-.2.2H7.8a.2.2 0 0 1-.2-.2v-12c0-.11.09-.2.2-.2m5.4 3.1h3v-1h-3zm3 3.6h-3v-1h3zm-3 3.6h3v-1h-3zm-1.427-8.377-1.757 2.19a.5.5 0 0 1-.743.04l-.98-.978L9 7.667l.585.585 1.408-1.755zm-1.757 5.533 1.757-2.19-.78-.626-1.408 1.755L9 11.01l-.707.708.98.979a.5.5 0 0 0 .743-.041m1.757 1.41-1.757 2.19a.5.5 0 0 1-.743.04l-.98-.978L9 14.61l.585.585 1.408-1.755z" /></svg>);
+const ActionListRichIcon32 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={32} height={32} viewBox="0 0 32 32" ref={ref} {...props}><path fill="var(--hop-RichIcon-placeholder-background, #E5DED6)" d="M0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16S0 24.837 0 16" /><path fill="var(--hop-RichIcon-placeholder-shadow, #2A2620)" d="M9.131 6.069a1.6 1.6 0 0 1 1.132-.469H23.2a1.6 1.6 0 0 1 1.6 1.6v16.137a1.6 1.6 0 0 1-.469 1.132L22.87 25.93a1.6 1.6 0 0 1-1.132.469H8.8a1.6 1.6 0 0 1-1.6-1.6V8.663a1.6 1.6 0 0 1 .469-1.132z" /><path fill="var(--hop-RichIcon-placeholder-fill, #fff)" d="M10.4 6.6h12.8a.6.6 0 0 1 .6.6v16a.6.6 0 0 1-.6.6H10.4a.6.6 0 0 1-.6-.6v-16a.6.6 0 0 1 .6-.6" /><path fill="var(--hop-RichIcon-placeholder-shadow, #2A2620)" fillRule="evenodd" d="M21.6 10.9h-4v-1h4zm0 4.8h-4v-1h4zm0 4.8h-4v-1h4zM15.463 9.523l-2.238 2.79a.5.5 0 0 1-.744.04l-1.188-1.187.707-.707.794.793 1.889-2.355zm0 4.457-2.238 2.79a.5.5 0 0 1-.744.04l-1.188-1.187.707-.707.794.793 1.889-2.355zm0 4.8-2.238 2.79a.5.5 0 0 1-.744.04l-1.188-1.187.707-.707.794.793 1.889-2.355z" /></svg>);
+const ActionListRichIcon40 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={40} height={40} viewBox="0 0 40 40" ref={ref} {...props}><path fill="var(--hop-RichIcon-placeholder-background, #E5DED6)" d="M0 20C0 8.954 8.954 0 20 0s20 8.954 20 20-8.954 20-20 20S0 31.046 0 20" /><path fill="var(--hop-RichIcon-placeholder-shadow, #2A2620)" d="M11.414 7.586A2 2 0 0 1 12.828 7H29a2 2 0 0 1 2 2v20.172a2 2 0 0 1-.586 1.414l-1.828 1.828a2 2 0 0 1-1.414.586H11a2 2 0 0 1-2-2V10.828a2 2 0 0 1 .586-1.414z" /><path fill="var(--hop-RichIcon-placeholder-fill, #fff)" d="M13 8.25h16a.75.75 0 0 1 .75.75v20a.75.75 0 0 1-.75.75H13a.75.75 0 0 1-.75-.75V9a.75.75 0 0 1 .75-.75" /><path fill="var(--hop-RichIcon-placeholder-shadow, #2A2620)" fillRule="evenodd" d="M27 13.625h-5v-1.25h5zm0 6h-5v-1.25h5zm0 6h-5v-1.25h5zm-7.671-13.721L16.53 15.39a.625.625 0 0 1-.93.051l-1.485-1.484.884-.884.992.991 2.361-2.944zm0 5.571-2.798 3.487a.625.625 0 0 1-.93.052l-1.485-1.485.884-.884.992.992 2.361-2.944zm0 6-2.798 3.487a.625.625 0 0 1-.93.052l-1.485-1.485.884-.884.992.992 2.361-2.944z" /></svg>);
 
 export const ActionListRichIcon = createRichIcon(ActionListRichIcon24, ActionListRichIcon32, ActionListRichIcon40, "ActionListRichIcon");
diff --git a/packages/icons/src/generated-rich-icon-components/AnonymousRichIcon.tsx b/packages/icons/src/generated-rich-icon-components/AnonymousRichIcon.tsx
@@ -5,8 +5,8 @@
 import { createRichIcon } from "../createRichIcon.tsx";
 import { forwardRef, type Ref, type SVGProps } from "react";
 
-const AnonymousRichIcon24 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={24} height={24} viewBox="0 0 24 24" ref={ref} {...props}><path fill="var(--hop-Richicon-placeholder-shadow, #E5DED6)" d="M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M20.4 11.4c0 2.46-.983 4.417-2.7 6-1.583 1.717-3.84 3-6.3 3a7.8 7.8 0 0 1-7.8-7.8c0-2.46.9-3.9 2.4-5.7 1.77-2.125 4.14-3.3 6.6-3.3a7.8 7.8 0 0 1 7.8 7.8" /><path fill="var(--hop-Richicon-placeholder-fill, #fff)" fillRule="evenodd" d="M12.6 18.2a6.8 6.8 0 1 0 0-13.6 6.8 6.8 0 0 0 0 13.6m-3-7.361a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4m7.2-1.2a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0m-7.557 3.248a.5.5 0 0 0-.78.626A5.3 5.3 0 0 0 12.6 15.5a5.3 5.3 0 0 0 4.137-1.987.5.5 0 0 0-.78-.626A4.29 4.29 0 0 1 12.6 14.5a4.3 4.3 0 0 1-3.357-1.613" /></svg>);
-const AnonymousRichIcon32 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={32} height={32} viewBox="0 0 32 32" ref={ref} {...props}><path fill="var(--hop-Richicon-placeholder-shadow, #E5DED6)" d="M0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16S0 24.837 0 16" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M27.2 15.2c0 3.28-1.31 5.89-3.6 8-2.11 2.29-5.12 4-8.4 4-5.744 0-10.4-4.656-10.4-10.4 0-3.28 1.2-5.2 3.2-7.6 2.36-2.833 5.52-4.4 8.8-4.4 5.744 0 10.4 4.656 10.4 10.4" /><path fill="var(--hop-Richicon-placeholder-fill, #fff)" fillRule="evenodd" d="M16.8 24.6a9.4 9.4 0 1 0 0-18.8 9.4 9.4 0 0 0 0 18.8m-4-10.2a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4m9.2-1.2a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0m-9.806 4.087a.5.5 0 0 0-.78.626A6.89 6.89 0 0 0 16.8 20.5c2.18 0 4.123-1.01 5.386-2.587a.5.5 0 1 0-.78-.626A5.89 5.89 0 0 1 16.8 19.5a5.89 5.89 0 0 1-4.606-2.213" /></svg>);
-const AnonymousRichIcon40 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={40} height={40} viewBox="0 0 40 40" ref={ref} {...props}><path fill="var(--hop-Richicon-placeholder-shadow, #E5DED6)" d="M0 20C0 8.954 8.954 0 20 0s20 8.954 20 20-8.954 20-20 20S0 31.046 0 20" /><path fill="var(--hop-Richicon-placeholder-background, #2A2620)" d="M34 19c0 4.1-1.638 7.362-4.5 10-2.638 2.862-6.4 5-10.5 5-7.18 0-13-5.82-13-13 0-4.1 1.5-6.5 4-9.5C12.951 7.959 16.9 6 21 6c7.18 0 13 5.82 13 13" /><path fill="var(--hop-Richicon-placeholder-fill, #fff)" fillRule="evenodd" d="M21 30.75c6.49 0 11.75-5.26 11.75-11.75S27.49 7.25 21 7.25 9.25 12.51 9.25 19 14.51 30.75 21 30.75M16 18a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m11.5-1.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-12.258 5.11a.625.625 0 0 0-.975.78A8.61 8.61 0 0 0 21 25.626a8.61 8.61 0 0 0 6.733-3.234.625.625 0 1 0-.975-.782A7.36 7.36 0 0 1 21 24.375a7.36 7.36 0 0 1-5.758-2.766" /></svg>);
+const AnonymousRichIcon24 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={24} height={24} viewBox="0 0 24 24" ref={ref} {...props}><path fill="var(--hop-RichIcon-placeholder-background, #E5DED6)" d="M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12" /><path fill="var(--hop-RichIcon-placeholder-shadow, #2A2620)" d="M20.4 11.4c0 2.46-.983 4.417-2.7 6-1.583 1.717-3.84 3-6.3 3a7.8 7.8 0 0 1-7.8-7.8c0-2.46.9-3.9 2.4-5.7 1.77-2.125 4.14-3.3 6.6-3.3a7.8 7.8 0 0 1 7.8 7.8" /><path fill="var(--hop-RichIcon-placeholder-fill, #fff)" fillRule="evenodd" d="M12.6 18.2a6.8 6.8 0 1 0 0-13.6 6.8 6.8 0 0 0 0 13.6m-3-7.361a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4m7.2-1.2a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0m-7.557 3.248a.5.5 0 0 0-.78.626A5.3 5.3 0 0 0 12.6 15.5a5.3 5.3 0 0 0 4.137-1.987.5.5 0 0 0-.78-.626A4.29 4.29 0 0 1 12.6 14.5a4.3 4.3 0 0 1-3.357-1.613" /></svg>);
+const AnonymousRichIcon32 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={32} height={32} viewBox="0 0 32 32" ref={ref} {...props}><path fill="var(--hop-RichIcon-placeholder-background, #E5DED6)" d="M0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16S0 24.837 0 16" /><path fill="var(--hop-RichIcon-placeholder-shadow, #2A2620)" d="M27.2 15.2c0 3.28-1.31 5.89-3.6 8-2.11 2.29-5.12 4-8.4 4-5.744 0-10.4-4.656-10.4-10.4 0-3.28 1.2-5.2 3.2-7.6 2.36-2.833 5.52-4.4 8.8-4.4 5.744 0 10.4 4.656 10.4 10.4" /><path fill="var(--hop-RichIcon-placeholder-fill, #fff)" fillRule="evenodd" d="M16.8 24.6a9.4 9.4 0 1 0 0-18.8 9.4 9.4 0 0 0 0 18.8m-4-10.2a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4m9.2-1.2a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0m-9.806 4.087a.5.5 0 0 0-.78.626A6.89 6.89 0 0 0 16.8 20.5c2.18 0 4.123-1.01 5.386-2.587a.5.5 0 1 0-.78-.626A5.89 5.89 0 0 1 16.8 19.5a5.89 5.89 0 0 1-4.606-2.213" /></svg>);
+const AnonymousRichIcon40 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={40} height={40} viewBox="0 0 40 40" ref={ref} {...props}><path fill="var(--hop-RichIcon-placeholder-background, #E5DED6)" d="M0 20C0 8.954 8.954 0 20 0s20 8.954 20 20-8.954 20-20 20S0 31.046 0 20" /><path fill="var(--hop-RichIcon-placeholder-shadow, #2A2620)" d="M34 19c0 4.1-1.638 7.362-4.5 10-2.638 2.862-6.4 5-10.5 5-7.18 0-13-5.82-13-13 0-4.1 1.5-6.5 4-9.5C12.951 7.959 16.9 6 21 6c7.18 0 13 5.82 13 13" /><path fill="var(--hop-RichIcon-placeholder-fill, #fff)" fillRule="evenodd" d="M21 30.75c6.49 0 11.75-5.26 11.75-11.75S27.49 7.25 21 7.25 9.25 12.51 9.25 19 14.51 30.75 21 30.75M16 18a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m11.5-1.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-12.258 5.11a.625.625 0 0 0-.975.78A8.61 8.61 0 0 0 21 25.626a8.61 8.61 0 0 0 6.733-3.234.625.625 0 1 0-.975-.782A7.36 7.36 0 0 1 21 24.375a7.36 7.36 0 0 1-5.758-2.766" /></svg>);
 
 export const AnonymousRichIcon = createRichIcon(AnonymousRichIcon24, AnonymousRichIcon32, AnonymousRichIcon40, "AnonymousRichIcon");