@hopper-ui/components 1.3.21 → 1.3.23

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hopper-ui/components
 
+## 1.3.23
+
+### Patch Changes
+
+- c603aff: Badge used to change appearance based on the states of its parent, but now Badge will remain the same when its parent's state changes.
+
+## 1.3.22
+
+### Patch Changes
+
+- d329436: In the Badge component, we were using data-variant to be able to add styles in other components based on its variant. Now that we have className render props, we can switch back to using a class for Badge's variant prop.
+
 ## 1.3.21
 
 ### Patch Changes

package/dist/Avatar/src/AnonymousAvatar.css

@@ -1,5 +1,5 @@
 /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Heading/src/Heading.module.css/#css-module-data */
-.Heading-module__hop-Heading___JWvs8 {
+.Heading-module__hop-Heading___UA2-K {
   --hop-Heading-xs-font-size: var(--hop-heading-xs-font-size);
   --hop-Heading-xs-font-family: var(--hop-heading-xs-font-family);
   --hop-Heading-xs-font-weight: var(--hop-heading-xs-font-weight);
@@ -33,50 +33,50 @@
   --hop-Heading-inherit-size-font-weight: inherit;
   --hop-Heading-inherit-size-line-height: inherit;
 }
-:where(.Heading-module__hop-Heading___JWvs8) {
+:where(.Heading-module__hop-Heading___UA2-K) {
   margin: 0;
   font-family: var(--font-family);
   font-size: var(--font-size);
   font-weight: var(--font-weight);
   line-height: var(--line-height);
 }
-:where(.Heading-module__hop-Heading--xs___Cfweo) {
+:where(.Heading-module__hop-Heading--xs___JuI6Z) {
   --font-size: var(--hop-Heading-xs-font-size);
   --font-family: var(--hop-Heading-xs-font-family);
   --font-weight: var(--hop-Heading-xs-font-weight);
   --line-height: var(--hop-Heading-xs-line-height);
 }
-:where(.Heading-module__hop-Heading--sm___sAf2J) {
+:where(.Heading-module__hop-Heading--sm___n-J5E) {
   --font-size: var(--hop-Heading-sm-font-size);
   --font-family: var(--hop-Heading-sm-font-family);
   --font-weight: var(--hop-Heading-sm-font-weight);
   --line-height: var(--hop-Heading-sm-line-height);
 }
-:where(.Heading-module__hop-Heading--md___6wrhw) {
+:where(.Heading-module__hop-Heading--md___h9Hi3) {
   --font-size: var(--hop-Heading-md-font-size);
   --font-family: var(--hop-Heading-md-font-family);
   --font-weight: var(--hop-Heading-md-font-weight);
   --line-height: var(--hop-Heading-md-line-height);
 }
-:where(.Heading-module__hop-Heading--lg___jvv5C) {
+:where(.Heading-module__hop-Heading--lg___SBfls) {
   --font-size: var(--hop-Heading-lg-font-size);
   --font-family: var(--hop-Heading-lg-font-family);
   --font-weight: var(--hop-Heading-lg-font-weight);
   --line-height: var(--hop-Heading-lg-line-height);
 }
-:where(.Heading-module__hop-Heading--xl___rJZ8W) {
+:where(.Heading-module__hop-Heading--xl___7Vy5T) {
   --font-size: var(--hop-Heading-xl-font-size);
   --font-family: var(--hop-Heading-xl-font-family);
   --font-weight: var(--hop-Heading-xl-font-weight);
   --line-height: var(--hop-Heading-xl-line-height);
 }
-:where(.Heading-module__hop-Heading--2xl___vy5tr) {
+:where(.Heading-module__hop-Heading--2xl___GbcDM) {
   --font-size: var(--hop-Heading-2xl-font-size);
   --font-family: var(--hop-Heading-2xl-font-family);
   --font-weight: var(--hop-Heading-2xl-font-weight);
   --line-height: var(--hop-Heading-2xl-line-height);
 }
-:where(.Heading-module__hop-Heading--3xl___sHzoB) {
+:where(.Heading-module__hop-Heading--3xl___iwezV) {
   --font-size: var(--hop-Heading-3xl-font-size);
   --font-family: var(--hop-Heading-3xl-font-family);
   --font-weight: var(--hop-Heading-3xl-font-weight);
@@ -84,7 +84,7 @@
 }
 
 /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Text/src/Text.module.css/#css-module-data */
-.Text-module__hop-Text___45Zf4 {
+.Text-module__hop-Text___AovO6 {
   --hop-Text-xs-font-size: var(--hop-body-xs-font-size);
   --hop-Text-xs-font-family: var(--hop-body-xs-font-family);
   --hop-Text-xs-font-weight: var(--hop-body-xs-font-weight);
@@ -114,49 +114,49 @@
   --hop-Text-inherit-size-font-weight: inherit;
   --hop-Text-inherit-size-line-height: inherit;
 }
-:where(.Text-module__hop-Text___45Zf4) {
+:where(.Text-module__hop-Text___AovO6) {
   font-family: var(--font-family);
   font-size: var(--font-size);
   font-weight: var(--font-weight);
   line-height: var(--line-height);
 }
-:where(.Text-module__hop-Text--xs___d9F1w) {
+:where(.Text-module__hop-Text--xs___isCct) {
   --font-size: var(--hop-Text-xs-font-size);
   --font-family: var(--hop-Text-xs-font-family);
   --font-weight: var(--hop-Text-xs-font-weight);
   --line-height: var(--hop-Text-xs-line-height);
 }
-:where(.Text-module__hop-Text--sm___-NvEj) {
+:where(.Text-module__hop-Text--sm___ey2C4) {
   --font-size: var(--hop-Text-sm-font-size);
   --font-family: var(--hop-Text-sm-font-family);
   --font-weight: var(--hop-Text-sm-font-weight);
   --line-height: var(--hop-Text-sm-line-height);
 }
-:where(.Text-module__hop-Text--md___lFLy8) {
+:where(.Text-module__hop-Text--md___OBWp5) {
   --font-size: var(--hop-Text-md-font-size);
   --font-family: var(--hop-Text-md-font-family);
   --font-weight: var(--hop-Text-md-font-weight);
   --line-height: var(--hop-Text-md-line-height);
 }
-:where(.Text-module__hop-Text--lg___eI9o1) {
+:where(.Text-module__hop-Text--lg___rnq-9) {
   --font-size: var(--hop-Text-lg-font-size);
   --font-family: var(--hop-Text-lg-font-family);
   --font-weight: var(--hop-Text-lg-font-weight);
   --line-height: var(--hop-Text-lg-line-height);
 }
-:where(.Text-module__hop-Text--xl___gyrV0) {
+:where(.Text-module__hop-Text--xl___U7CZo) {
   --font-size: var(--hop-Text-xl-font-size);
   --font-family: var(--hop-Text-xl-font-family);
   --font-weight: var(--hop-Text-xl-font-weight);
   --line-height: var(--hop-Text-xl-line-height);
 }
-:where(.Text-module__hop-Text--2xl___ZQS8X) {
+:where(.Text-module__hop-Text--2xl___dpqJD) {
   --font-size: var(--hop-Text-2xl-font-size);
   --font-family: var(--hop-Text-2xl-font-family);
   --font-weight: var(--hop-Text-2xl-font-weight);
   --line-height: var(--hop-Text-2xl-line-height);
 }
-:where(.Text-module__hop-Text--inherit___wmhsR) {
+:where(.Text-module__hop-Text--inherit___BYTB4) {
   --font-size: var(--hop-Text-inherit-size-font-size);
   --font-family: var(--hop-Text-inherit-size-font-family);
   --font-weight: var(--hop-Text-inherit-size-font-weight);
@@ -164,7 +164,7 @@
 }
 
 /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/OverlineText/src/OverlineText.module.css/#css-module-data */
-:where(.OverlineText-module__hop-OverlineText___6KBG7) {
+:where(.OverlineText-module__hop-OverlineText___yYKTh) {
   --hop-OverlineText-font-family: var(--hop-overline-font-family);
   --hop-OverlineText-font-size: var(--hop-overline-font-size);
   --hop-OverlineText-font-weight: var(--hop-overline-font-weight);
@@ -188,45 +188,45 @@
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing);
 }
-.OverlineText-module__hop-OverlineText__text___MHRJ4 {
+.OverlineText-module__hop-OverlineText__text___sJpdF {
   box-sizing: border-box;
 }
-.OverlineText-module__hop-OverlineText__text___MHRJ4::before,
-.OverlineText-module__hop-OverlineText__text___MHRJ4::after {
+.OverlineText-module__hop-OverlineText__text___sJpdF::before,
+.OverlineText-module__hop-OverlineText__text___sJpdF::after {
   content: "";
   display: block;
   box-sizing: border-box;
   inline-size: 0;
   block-size: 0;
 }
-.OverlineText-module__hop-OverlineText__text___MHRJ4::before {
+.OverlineText-module__hop-OverlineText__text___sJpdF::before {
   margin-block-end: var(--bottom-offset);
 }
-.OverlineText-module__hop-OverlineText__text___MHRJ4::after {
+.OverlineText-module__hop-OverlineText__text___sJpdF::after {
   margin-block-start: var(--top-offset);
 }
 
 /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Label/src/Label.module.css/#css-module-data */
-.Label-module__hop-Label___2VJx8 {
+.Label-module__hop-Label___Dq4FO {
   --hop-Label-font-size: var(--hop-heading-xs-font-size);
   --hop-Label-font-family: var(--hop-heading-xs-font-family);
   --hop-Label-font-weight: var(--hop-heading-xs-font-weight);
   --hop-Label-line-height: var(--hop-heading-xs-line-height);
   --hop-Label-color: var(--hop-neutral-text-weak);
 }
-:where(.Label-module__hop-Label___2VJx8) {
+:where(.Label-module__hop-Label___Dq4FO) {
   font-family: var(--hop-Label-font-family);
   font-size: var(--hop-Label-font-size);
   font-weight: var(--hop-Label-font-weight);
   line-height: var(--hop-Label-line-height);
   color: var(--hop-Label-color);
 }
-:where(.Label-module__hop-Label__indicator___UgwtS) {
+:where(.Label-module__hop-Label__indicator___G2AKG) {
   padding-inline-start: var(--hop-space-20);
 }
 
 /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Avatar/src/RichIconAvatarImage.module.css/#css-module-data */
-.RichIconAvatarImage-module__hop-RichIconAvatarImage___WBGT4 {
+.RichIconAvatarImage-module__hop-RichIconAvatarImage___fJpxu {
   --hop-RichIconAvatarImage-background-color: var(--hop-decorative-option7-surface);
   --hop-RichIconAvatarImage-border-radius: var(--hop-shape-circle);
   --hop-RichIconAvatarImage-icon-color: var(--hop-decorative-option7-icon);
@@ -257,40 +257,40 @@
   background-color: var(--background-color);
   border-radius: var(--hop-RichIconAvatarImage-border-radius);
 }
-.RichIconAvatarImage-module__hop-RichIconAvatarImage--xs___jFcEk {
+.RichIconAvatarImage-module__hop-RichIconAvatarImage--xs___tN6hq {
   --size: var(--hop-RichIconAvatarImage-xs-size);
   --icon-size: var(--hop-RichIconAvatarImage-icon-xs-size);
 }
-.RichIconAvatarImage-module__hop-RichIconAvatarImage--sm___Tp-W8 {
+.RichIconAvatarImage-module__hop-RichIconAvatarImage--sm___rmQVO {
   --size: var(--hop-RichIconAvatarImage-sm-size);
   --icon-size: var(--hop-RichIconAvatarImage-icon-sm-size);
 }
-.RichIconAvatarImage-module__hop-RichIconAvatarImage--md___f4Jds {
+.RichIconAvatarImage-module__hop-RichIconAvatarImage--md___4KyFb {
   --size: var(--hop-RichIconAvatarImage-md-size);
   --icon-size: var(--hop-RichIconAvatarImage-icon-md-size);
 }
-.RichIconAvatarImage-module__hop-RichIconAvatarImage--lg___TJeA3 {
+.RichIconAvatarImage-module__hop-RichIconAvatarImage--lg___Keqpd {
   --size: var(--hop-RichIconAvatarImage-lg-size);
   --icon-size: var(--hop-RichIconAvatarImage-icon-lg-size);
 }
-.RichIconAvatarImage-module__hop-RichIconAvatarImage--xl___TnS4q {
+.RichIconAvatarImage-module__hop-RichIconAvatarImage--xl___8Iryg {
   --size: var(--hop-RichIconAvatarImage-xl-size);
   --icon-size: var(--hop-RichIconAvatarImage-icon-xl-size);
 }
-.RichIconAvatarImage-module__hop-RichIconAvatarImage--2xl___All-Y {
+.RichIconAvatarImage-module__hop-RichIconAvatarImage--2xl___f4D7v {
   --size: var(--hop-RichIconAvatarImage-2xl-size);
   --icon-size: var(--hop-RichIconAvatarImage-icon-2xl-size);
 }
-.RichIconAvatarImage-module__hop-RichIconAvatarImage___WBGT4[data-disabled] {
+.RichIconAvatarImage-module__hop-RichIconAvatarImage___fJpxu[data-disabled] {
   --background-color: var(--hop-RichIconAvatarImage-background-color-disabled);
 }
-.RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___V5XSb {
+.RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___Jsl0A {
   position: relative;
   display: block;
   inline-size: var(--icon-size, var(--hop-RichIconAvatarImage-icon-md-size));
   block-size: var(--icon-size, var(--hop-RichIconAvatarImage-icon-md-size));
 }
-.RichIconAvatarImage-module__hop-RichIconAvatarImage___WBGT4[data-disabled] .RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___V5XSb {
+.RichIconAvatarImage-module__hop-RichIconAvatarImage___fJpxu[data-disabled] .RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___Jsl0A {
   --hop-RichIcon-placeholder-background: var(--hop-RichIconAvatarImage-background-color-disabled);
   --hop-RichIcon-placeholder-shadow: var(--hop-RichIconAvatarImage-icon-color-disabled);
 }

package/dist/Avatar/src/AnonymousAvatar.js

@@ -1,6 +1,6 @@
-export { _AnonymousAvatar as AnonymousAvatar, GlobalAnonymousAvatarCssSelector } from '../../chunk-AJAXFPMZ.js';
+export { _AnonymousAvatar as AnonymousAvatar, GlobalAnonymousAvatarCssSelector } from '../../chunk-ZAOJLOO4.js';
 import '../../chunk-AES7QBQE.js';
-import '../../chunk-NH4G3E35.js';
+import '../../chunk-W6PNTZPC.js';
 import '../../chunk-M36KANKC.js';
 import '../../chunk-NH3IVMXB.js';
 import '../../chunk-65JPI4FL.js';

package/dist/Avatar/src/AnonymousAvatar.temp.css

@@ -0,0 +1,296 @@
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Heading/src/Heading.module.css/#css-module-data */
+.Heading-module__hop-Heading___UA2-K {
+  --hop-Heading-xs-font-size: var(--hop-heading-xs-font-size);
+  --hop-Heading-xs-font-family: var(--hop-heading-xs-font-family);
+  --hop-Heading-xs-font-weight: var(--hop-heading-xs-font-weight);
+  --hop-Heading-xs-line-height: var(--hop-heading-xs-line-height);
+  --hop-Heading-sm-font-size: var(--hop-heading-sm-font-size);
+  --hop-Heading-sm-font-family: var(--hop-heading-sm-font-family);
+  --hop-Heading-sm-font-weight: var(--hop-heading-sm-font-weight);
+  --hop-Heading-sm-line-height: var(--hop-heading-sm-line-height);
+  --hop-Heading-md-font-size: var(--hop-heading-md-font-size);
+  --hop-Heading-md-font-family: var(--hop-heading-md-font-family);
+  --hop-Heading-md-font-weight: var(--hop-heading-md-font-weight);
+  --hop-Heading-md-line-height: var(--hop-heading-md-line-height);
+  --hop-Heading-lg-font-size: var(--hop-heading-lg-font-size);
+  --hop-Heading-lg-font-family: var(--hop-heading-lg-font-family);
+  --hop-Heading-lg-font-weight: var(--hop-heading-lg-font-weight);
+  --hop-Heading-lg-line-height: var(--hop-heading-lg-line-height);
+  --hop-Heading-xl-font-size: var(--hop-heading-xl-font-size);
+  --hop-Heading-xl-font-family: var(--hop-heading-xl-font-family);
+  --hop-Heading-xl-font-weight: var(--hop-heading-xl-font-weight);
+  --hop-Heading-xl-line-height: var(--hop-heading-xl-line-height);
+  --hop-Heading-2xl-font-size: var(--hop-heading-2xl-font-size);
+  --hop-Heading-2xl-font-family: var(--hop-heading-2xl-font-family);
+  --hop-Heading-2xl-font-weight: var(--hop-heading-2xl-font-weight);
+  --hop-Heading-2xl-line-height: var(--hop-heading-2xl-line-height);
+  --hop-Heading-3xl-font-size: var(--hop-heading-3xl-font-size);
+  --hop-Heading-3xl-font-family: var(--hop-heading-3xl-font-family);
+  --hop-Heading-3xl-font-weight: var(--hop-heading-3xl-font-weight);
+  --hop-Heading-3xl-line-height: var(--hop-heading-3xl-line-height);
+  --hop-Heading-inherit-size-font-size: inherit;
+  --hop-Heading-inherit-size-font-family: inherit;
+  --hop-Heading-inherit-size-font-weight: inherit;
+  --hop-Heading-inherit-size-line-height: inherit;
+}
+:where(.Heading-module__hop-Heading___UA2-K) {
+  margin: 0;
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+}
+:where(.Heading-module__hop-Heading--xs___JuI6Z) {
+  --font-size: var(--hop-Heading-xs-font-size);
+  --font-family: var(--hop-Heading-xs-font-family);
+  --font-weight: var(--hop-Heading-xs-font-weight);
+  --line-height: var(--hop-Heading-xs-line-height);
+}
+:where(.Heading-module__hop-Heading--sm___n-J5E) {
+  --font-size: var(--hop-Heading-sm-font-size);
+  --font-family: var(--hop-Heading-sm-font-family);
+  --font-weight: var(--hop-Heading-sm-font-weight);
+  --line-height: var(--hop-Heading-sm-line-height);
+}
+:where(.Heading-module__hop-Heading--md___h9Hi3) {
+  --font-size: var(--hop-Heading-md-font-size);
+  --font-family: var(--hop-Heading-md-font-family);
+  --font-weight: var(--hop-Heading-md-font-weight);
+  --line-height: var(--hop-Heading-md-line-height);
+}
+:where(.Heading-module__hop-Heading--lg___SBfls) {
+  --font-size: var(--hop-Heading-lg-font-size);
+  --font-family: var(--hop-Heading-lg-font-family);
+  --font-weight: var(--hop-Heading-lg-font-weight);
+  --line-height: var(--hop-Heading-lg-line-height);
+}
+:where(.Heading-module__hop-Heading--xl___7Vy5T) {
+  --font-size: var(--hop-Heading-xl-font-size);
+  --font-family: var(--hop-Heading-xl-font-family);
+  --font-weight: var(--hop-Heading-xl-font-weight);
+  --line-height: var(--hop-Heading-xl-line-height);
+}
+:where(.Heading-module__hop-Heading--2xl___GbcDM) {
+  --font-size: var(--hop-Heading-2xl-font-size);
+  --font-family: var(--hop-Heading-2xl-font-family);
+  --font-weight: var(--hop-Heading-2xl-font-weight);
+  --line-height: var(--hop-Heading-2xl-line-height);
+}
+:where(.Heading-module__hop-Heading--3xl___iwezV) {
+  --font-size: var(--hop-Heading-3xl-font-size);
+  --font-family: var(--hop-Heading-3xl-font-family);
+  --font-weight: var(--hop-Heading-3xl-font-weight);
+  --line-height: var(--hop-Heading-3xl-line-height);
+}
+
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Text/src/Text.module.css/#css-module-data */
+.Text-module__hop-Text___AovO6 {
+  --hop-Text-xs-font-size: var(--hop-body-xs-font-size);
+  --hop-Text-xs-font-family: var(--hop-body-xs-font-family);
+  --hop-Text-xs-font-weight: var(--hop-body-xs-font-weight);
+  --hop-Text-xs-line-height: var(--hop-body-xs-line-height);
+  --hop-Text-sm-font-size: var(--hop-body-sm-font-size);
+  --hop-Text-sm-font-family: var(--hop-body-sm-font-family);
+  --hop-Text-sm-font-weight: var(--hop-body-sm-font-weight);
+  --hop-Text-sm-line-height: var(--hop-body-sm-line-height);
+  --hop-Text-md-font-size: var(--hop-body-md-font-size);
+  --hop-Text-md-font-family: var(--hop-body-md-font-family);
+  --hop-Text-md-font-weight: var(--hop-body-md-font-weight);
+  --hop-Text-md-line-height: var(--hop-body-md-line-height);
+  --hop-Text-lg-font-size: var(--hop-body-lg-font-size);
+  --hop-Text-lg-font-family: var(--hop-body-lg-font-family);
+  --hop-Text-lg-font-weight: var(--hop-body-lg-font-weight);
+  --hop-Text-lg-line-height: var(--hop-body-lg-line-height);
+  --hop-Text-xl-font-size: var(--hop-body-xl-font-size);
+  --hop-Text-xl-font-family: var(--hop-body-xl-font-family);
+  --hop-Text-xl-font-weight: var(--hop-body-xl-font-weight);
+  --hop-Text-xl-line-height: var(--hop-body-xl-line-height);
+  --hop-Text-2xl-font-size: var(--hop-body-2xl-font-size);
+  --hop-Text-2xl-font-family: var(--hop-body-2xl-font-family);
+  --hop-Text-2xl-font-weight: var(--hop-body-2xl-font-weight);
+  --hop-Text-2xl-line-height: var(--hop-body-2xl-line-height);
+  --hop-Text-inherit-size-font-size: inherit;
+  --hop-Text-inherit-size-font-family: inherit;
+  --hop-Text-inherit-size-font-weight: inherit;
+  --hop-Text-inherit-size-line-height: inherit;
+}
+:where(.Text-module__hop-Text___AovO6) {
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+}
+:where(.Text-module__hop-Text--xs___isCct) {
+  --font-size: var(--hop-Text-xs-font-size);
+  --font-family: var(--hop-Text-xs-font-family);
+  --font-weight: var(--hop-Text-xs-font-weight);
+  --line-height: var(--hop-Text-xs-line-height);
+}
+:where(.Text-module__hop-Text--sm___ey2C4) {
+  --font-size: var(--hop-Text-sm-font-size);
+  --font-family: var(--hop-Text-sm-font-family);
+  --font-weight: var(--hop-Text-sm-font-weight);
+  --line-height: var(--hop-Text-sm-line-height);
+}
+:where(.Text-module__hop-Text--md___OBWp5) {
+  --font-size: var(--hop-Text-md-font-size);
+  --font-family: var(--hop-Text-md-font-family);
+  --font-weight: var(--hop-Text-md-font-weight);
+  --line-height: var(--hop-Text-md-line-height);
+}
+:where(.Text-module__hop-Text--lg___rnq-9) {
+  --font-size: var(--hop-Text-lg-font-size);
+  --font-family: var(--hop-Text-lg-font-family);
+  --font-weight: var(--hop-Text-lg-font-weight);
+  --line-height: var(--hop-Text-lg-line-height);
+}
+:where(.Text-module__hop-Text--xl___U7CZo) {
+  --font-size: var(--hop-Text-xl-font-size);
+  --font-family: var(--hop-Text-xl-font-family);
+  --font-weight: var(--hop-Text-xl-font-weight);
+  --line-height: var(--hop-Text-xl-line-height);
+}
+:where(.Text-module__hop-Text--2xl___dpqJD) {
+  --font-size: var(--hop-Text-2xl-font-size);
+  --font-family: var(--hop-Text-2xl-font-family);
+  --font-weight: var(--hop-Text-2xl-font-weight);
+  --line-height: var(--hop-Text-2xl-line-height);
+}
+:where(.Text-module__hop-Text--inherit___BYTB4) {
+  --font-size: var(--hop-Text-inherit-size-font-size);
+  --font-family: var(--hop-Text-inherit-size-font-family);
+  --font-weight: var(--hop-Text-inherit-size-font-weight);
+  --line-height: var(--hop-Text-inherit-size-line-height);
+}
+
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/OverlineText/src/OverlineText.module.css/#css-module-data */
+:where(.OverlineText-module__hop-OverlineText___yYKTh) {
+  --hop-OverlineText-font-family: var(--hop-overline-font-family);
+  --hop-OverlineText-font-size: var(--hop-overline-font-size);
+  --hop-OverlineText-font-weight: var(--hop-overline-font-weight);
+  --hop-OverlineText-letter-spacing: 0.015rem;
+  --hop-OverlineText-line-height: var(--hop-overline-line-height);
+  --hop-OverlineText-top-offset: var(--hop-overline-top-offset);
+  --hop-OverlineText-bottom-offset: var(--hop-overline-bottom-offset);
+  --font-family: var(--hop-OverlineText-font-family);
+  --font-size: var(--hop-OverlineText-font-size);
+  --font-weight: var(--hop-OverlineText-font-weight);
+  --letter-spacing: var(--hop-OverlineText-letter-spacing);
+  --line-height: var(--hop-OverlineText-line-height);
+  --top-offset: var(--hop-OverlineText-top-offset);
+  --bottom-offset: var(--hop-OverlineText-bottom-offset);
+  box-sizing: border-box;
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-feature-settings: "case";
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing);
+}
+.OverlineText-module__hop-OverlineText__text___sJpdF {
+  box-sizing: border-box;
+}
+.OverlineText-module__hop-OverlineText__text___sJpdF::before,
+.OverlineText-module__hop-OverlineText__text___sJpdF::after {
+  content: "";
+  display: block;
+  box-sizing: border-box;
+  inline-size: 0;
+  block-size: 0;
+}
+.OverlineText-module__hop-OverlineText__text___sJpdF::before {
+  margin-block-end: var(--bottom-offset);
+}
+.OverlineText-module__hop-OverlineText__text___sJpdF::after {
+  margin-block-start: var(--top-offset);
+}
+
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Label/src/Label.module.css/#css-module-data */
+.Label-module__hop-Label___Dq4FO {
+  --hop-Label-font-size: var(--hop-heading-xs-font-size);
+  --hop-Label-font-family: var(--hop-heading-xs-font-family);
+  --hop-Label-font-weight: var(--hop-heading-xs-font-weight);
+  --hop-Label-line-height: var(--hop-heading-xs-line-height);
+  --hop-Label-color: var(--hop-neutral-text-weak);
+}
+:where(.Label-module__hop-Label___Dq4FO) {
+  font-family: var(--hop-Label-font-family);
+  font-size: var(--hop-Label-font-size);
+  font-weight: var(--hop-Label-font-weight);
+  line-height: var(--hop-Label-line-height);
+  color: var(--hop-Label-color);
+}
+:where(.Label-module__hop-Label__indicator___G2AKG) {
+  padding-inline-start: var(--hop-space-20);
+}
+
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Avatar/src/RichIconAvatarImage.module.css/#css-module-data */
+.RichIconAvatarImage-module__hop-RichIconAvatarImage___fJpxu {
+  --hop-RichIconAvatarImage-background-color: var(--hop-decorative-option7-surface);
+  --hop-RichIconAvatarImage-border-radius: var(--hop-shape-circle);
+  --hop-RichIconAvatarImage-icon-color: var(--hop-decorative-option7-icon);
+  --hop-RichIconAvatarImage-xs-size: 1rem;
+  --hop-RichIconAvatarImage-icon-xs-size: 1rem;
+  --hop-RichIconAvatarImage-sm-size: 1.5rem;
+  --hop-RichIconAvatarImage-icon-sm-size: 1.5rem;
+  --hop-RichIconAvatarImage-md-size: 2rem;
+  --hop-RichIconAvatarImage-icon-md-size: 2rem;
+  --hop-RichIconAvatarImage-lg-size: 3rem;
+  --hop-RichIconAvatarImage-icon-lg-size: 3rem;
+  --hop-RichIconAvatarImage-xl-size: 4rem;
+  --hop-RichIconAvatarImage-icon-xl-size: 4rem;
+  --hop-RichIconAvatarImage-2xl-size: 6rem;
+  --hop-RichIconAvatarImage-icon-2xl-size: 4rem;
+  --hop-RichIconAvatarImage-background-color-disabled: var(--hop-neutral-surface-disabled);
+  --hop-RichIconAvatarImage-icon-color-disabled: var(--hop-neutral-icon-disabled);
+  --background-color: var(--hop-RichIconAvatarImage-background-color);
+  user-select: none;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--size, var(--hop-RichIconAvatarImage-md-size));
+  block-size: var(--size, var(--hop-RichIconAvatarImage-md-size));
+  color: var(--hop-RichIconAvatarImage-icon-color);
+  background-color: var(--background-color);
+  border-radius: var(--hop-RichIconAvatarImage-border-radius);
+}
+.RichIconAvatarImage-module__hop-RichIconAvatarImage--xs___tN6hq {
+  --size: var(--hop-RichIconAvatarImage-xs-size);
+  --icon-size: var(--hop-RichIconAvatarImage-icon-xs-size);
+}
+.RichIconAvatarImage-module__hop-RichIconAvatarImage--sm___rmQVO {
+  --size: var(--hop-RichIconAvatarImage-sm-size);
+  --icon-size: var(--hop-RichIconAvatarImage-icon-sm-size);
+}
+.RichIconAvatarImage-module__hop-RichIconAvatarImage--md___4KyFb {
+  --size: var(--hop-RichIconAvatarImage-md-size);
+  --icon-size: var(--hop-RichIconAvatarImage-icon-md-size);
+}
+.RichIconAvatarImage-module__hop-RichIconAvatarImage--lg___Keqpd {
+  --size: var(--hop-RichIconAvatarImage-lg-size);
+  --icon-size: var(--hop-RichIconAvatarImage-icon-lg-size);
+}
+.RichIconAvatarImage-module__hop-RichIconAvatarImage--xl___8Iryg {
+  --size: var(--hop-RichIconAvatarImage-xl-size);
+  --icon-size: var(--hop-RichIconAvatarImage-icon-xl-size);
+}
+.RichIconAvatarImage-module__hop-RichIconAvatarImage--2xl___f4D7v {
+  --size: var(--hop-RichIconAvatarImage-2xl-size);
+  --icon-size: var(--hop-RichIconAvatarImage-icon-2xl-size);
+}
+.RichIconAvatarImage-module__hop-RichIconAvatarImage___fJpxu[data-disabled] {
+  --background-color: var(--hop-RichIconAvatarImage-background-color-disabled);
+}
+.RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___Jsl0A {
+  position: relative;
+  display: block;
+  inline-size: var(--icon-size, var(--hop-RichIconAvatarImage-icon-md-size));
+  block-size: var(--icon-size, var(--hop-RichIconAvatarImage-icon-md-size));
+}
+.RichIconAvatarImage-module__hop-RichIconAvatarImage___fJpxu[data-disabled] .RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___Jsl0A {
+  --hop-RichIcon-placeholder-background: var(--hop-RichIconAvatarImage-background-color-disabled);
+  --hop-RichIcon-placeholder-shadow: var(--hop-RichIconAvatarImage-icon-color-disabled);
+}

package/dist/Avatar/src/AnonymousAvatar.temp.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { StyledSystemProps, ResponsiveProp } from '@hopper-ui/styled-system';
+import { ForwardedRef } from 'react';
+import { AccessibleSlotProps, RenderProps } from '../../utils/src/types.js';
+import { AvatarSize } from './Avatar.js';
+import '@react-types/shared';
+import 'react-aria-components';
+import '../../typography/Text/src/Text.js';
+import '../../utils/src/sizeAdapter.js';
+
+declare const GlobalAnonymousAvatarCssSelector = "hop-AnonymousAvatar";
+interface AnonymousAvatarRenderProps {
+    /**
+     * Whether or not the avatar is disabled.
+     */
+    isDisabled?: boolean;
+}
+interface AnonymousAvatarProps extends StyledSystemProps, AccessibleSlotProps, Omit<RenderProps<AnonymousAvatarRenderProps>, "children"> {
+    /**
+     * Whether or not the avatar is disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * The size of the avatar.
+     * * @default "md"
+     */
+    size?: ResponsiveProp<AvatarSize>;
+}
+declare function AnonymousAvatar(props: AnonymousAvatarProps, ref: ForwardedRef<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+
+export { AnonymousAvatar, type AnonymousAvatarProps, GlobalAnonymousAvatarCssSelector };

package/dist/Avatar/src/AnonymousAvatar.temp.js

@@ -0,0 +1,60 @@
+import { AvatarContext } from '../../chunk-AES7QBQE.js';
+import { _RichIconAvatarImage } from '../../chunk-W6PNTZPC.js';
+import '../../chunk-M36KANKC.js';
+import { useRenderProps } from '../../chunk-NH3IVMXB.js';
+import { composeClassnameRenderProps } from '../../chunk-65JPI4FL.js';
+import '../../chunk-KVDXQMWI.js';
+import '../../chunk-JWW56J7M.js';
+import '../../chunk-JSBRDJBE.js';
+import { AnonymousRichIcon } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { mergeProps } from 'react-aria';
+import { useContextProps, composeRenderProps } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+var GlobalAnonymousAvatarCssSelector = "hop-AnonymousAvatar";
+function AnonymousAvatar(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, AvatarContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    style,
+    size: sizeValue,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeValue)) != null ? _a : "md";
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalAnonymousAvatarCssSelector,
+    stylingProps.className
+  );
+  const mergedStyles = composeRenderProps(style, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const renderProps = useRenderProps({
+    ...otherProps,
+    className: classNames,
+    style: mergedStyles,
+    values: {
+      isDisabled: props.isDisabled || false
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    _RichIconAvatarImage,
+    {
+      ...mergeProps(otherProps, renderProps),
+      ref,
+      size,
+      children: /* @__PURE__ */ jsx(AnonymousRichIcon, {})
+    }
+  );
+}
+var _AnonymousAvatar = forwardRef(AnonymousAvatar);
+_AnonymousAvatar.displayName = "AnonymousAvatar";
+
+export { AnonymousAvatar, GlobalAnonymousAvatarCssSelector };