@hopper-ui/components 1.2.1 → 1.3.1

package/dist/Select/src/Select.d.ts

@@ -0,0 +1,93 @@
+import { ListBoxProps } from '../../ListBox/src/ListBox.js';
+import { ReactNode, ForwardedRef } from 'react';
+import { SelectValueRenderProps, ButtonProps, SelectProps as SelectProps$1 } from 'react-aria-components';
+import { ListBoxItemProps } from '../../ListBox/src/ListBoxItem.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { StyledComponentProps, ResponsiveProp } from '@hopper-ui/styled-system';
+import { PopoverProps } from '../../overlays/Popover/src/Popover.js';
+import '../../utils/src/types.js';
+import '@react-types/shared';
+import 'react-aria';
+
+declare const GlobalSelectCssSelector = "hop-Select";
+type ValueRenderProps = SelectValueRenderProps<object> & {
+    defaultChildren: ReactNode;
+};
+type SelectSize = "sm" | "md";
+type SelectTriggerProps = StyledComponentProps<ButtonProps>;
+interface SelectProps<T extends object> extends StyledComponentProps<Omit<SelectProps$1<T>, "children">> {
+    /**
+     * The items of the Select.
+     */
+    children: ReactNode | ((item: T) => ReactNode);
+    /**
+     * The field children of the Select. This includes the field label, field description, and field errors.
+     */
+    fieldChildren?: ReactNode;
+    /**
+     * The footer of the Select.
+     */
+    footer?: ReactNode;
+    /**
+     * If `true`, the select menu will not be the width of the trigger and instead be the width of its contents.
+     */
+    isAutoMenuWidth?: boolean;
+    /**
+     * If `true`, the select will take all available width.
+     * @default false
+     */
+    isFluid?: ResponsiveProp<boolean>;
+    /**
+     * Item objects in the collection.
+     */
+    items?: Iterable<T>;
+    /**
+     * The list box props.
+     */
+    listBoxProps?: ListBoxProps<T>;
+    /**
+     * The placeholder text when the select is empty.
+     */
+    placeholder?: string;
+    /**
+     * The popover props.
+     */
+    popoverProps?: PopoverProps;
+    /**
+     * An icon or text to display at the start of the select trigger.
+     */
+    prefix?: ReactNode;
+    /**
+     * A function to render the value of the select. It will render the selected item's text by default.
+     */
+    renderValue?: (valueRenderProps: ValueRenderProps) => ReactNode;
+    /**
+     * The size of the select.
+     * @default "sm"
+     */
+    size?: ResponsiveProp<SelectSize>;
+    /**
+     * The props for the select's trigger.
+     */
+    triggerProps?: SelectTriggerProps;
+}
+declare function Select<T extends object>(props: SelectProps<T>, ref: ForwardedRef<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+/**
+ * Select components enable users to choose a single option from a collapsible list, optimizing space efficiency.
+ *
+ * [View Documentation](TODO)
+ */
+declare const CompoundSelect: (<T extends object>(props: SelectProps<T> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => ReturnType<typeof Select>) & {
+    /**
+     * A select option is an item that is displayed in a select.
+     *
+     * [View Documentation](TODO)
+     */
+    Option: <T>(props: ListBoxItemProps<T> & {
+        ref?: ForwardedRef<HTMLDivElement> | undefined;
+    }) => react_jsx_runtime.JSX.Element;
+};
+
+export { GlobalSelectCssSelector, CompoundSelect as Select, type SelectProps, type SelectSize, type SelectTriggerProps, type ValueRenderProps };

package/dist/Select/src/Select.js

@@ -0,0 +1,118 @@
+export { GlobalSelectCssSelector, CompoundSelect as Select } from '../../chunk-GG6RHMJ7.js';
+import '../../chunk-SC6ZK5ON.js';
+import '../../chunk-I4VPBQI7.js';
+import '../../chunk-XHQWDF7B.js';
+import '../../chunk-LCAS3YQV.js';
+import '../../chunk-WWRB4K4M.js';
+import '../../chunk-XLKYXKWE.js';
+import '../../chunk-NJHNYL6X.js';
+import '../../chunk-NEPRDVF7.js';
+import '../../chunk-YHBJAXUY.js';
+import '../../chunk-H7VJS4MX.js';
+import '../../chunk-7QUXYE3E.js';
+import '../../chunk-EWMWQ2MC.js';
+import '../../chunk-SD6DBWYC.js';
+import '../../chunk-AQITZWYM.js';
+import '../../chunk-I67NHYK4.js';
+import '../../chunk-N77LTZ4U.js';
+import '../../chunk-Y7HUXUHX.js';
+import '../../chunk-D6UTDI2K.js';
+import '../../chunk-TVFC2MJ4.js';
+import '../../chunk-GFHBDUJD.js';
+import '../../chunk-YD2TGFCB.js';
+import '../../chunk-3NKF5TPD.js';
+import '../../chunk-JVZRUDLP.js';
+import '../../chunk-Z57VHYOF.js';
+import '../../chunk-IU6XMS2X.js';
+import '../../chunk-MHQZXLKW.js';
+import '../../chunk-QAIK237T.js';
+import '../../chunk-O4XPUINW.js';
+import '../../chunk-GXBVNCVP.js';
+import '../../chunk-IXB2WK56.js';
+import '../../chunk-2WWHL3EF.js';
+import '../../chunk-MTDFS4CZ.js';
+import '../../chunk-ZQ3AWYRR.js';
+import '../../chunk-BV7O26TY.js';
+import '../../chunk-PUMWU6M4.js';
+import '../../chunk-6BFSSZCY.js';
+import '../../chunk-QW45G6K4.js';
+import '../../chunk-D2GZKHYD.js';
+import '../../chunk-EUELVL2L.js';
+import '../../chunk-ZGNK4GWA.js';
+import '../../chunk-N7YDPVZL.js';
+import '../../chunk-3LRBUQC2.js';
+import '../../chunk-WDUQUPTE.js';
+import '../../chunk-ANBOSYAL.js';
+import '../../chunk-VJQ7M2BK.js';
+import '../../chunk-HLXQ6C2E.js';
+import '../../chunk-DXVKHP4V.js';
+import '../../chunk-TJMAMWRQ.js';
+import '../../chunk-O7IJYNVQ.js';
+import '../../chunk-T24MBA34.js';
+import '../../chunk-ARD3LWL2.js';
+import '../../chunk-EHXOXTDN.js';
+import '../../chunk-LJXTJRSB.js';
+import '../../chunk-47SFZCKK.js';
+import '../../chunk-TXZ6BMFR.js';
+import '../../chunk-OLXX46IZ.js';
+import '../../chunk-ESWRMGHR.js';
+import '../../chunk-H5YTU3U7.js';
+import '../../chunk-USVXH6MO.js';
+import '../../chunk-4ZYV2XLW.js';
+import '../../chunk-WMTWFKKP.js';
+import '../../chunk-O5PTD6IN.js';
+import '../../chunk-52LHX4PE.js';
+import '../../chunk-4VVNSXIB.js';
+import '../../chunk-ZG5E36S3.js';
+import '../../chunk-TIPN4VYD.js';
+import '../../chunk-5H5AZJPQ.js';
+import '../../chunk-UIEP5BA5.js';
+import '../../chunk-WDA6LWC4.js';
+import '../../chunk-SFZBLVJN.js';
+import '../../chunk-L3Y67TUF.js';
+import '../../chunk-FU5CCPLP.js';
+import '../../chunk-DGLAGYBD.js';
+import '../../chunk-5MBJWRZD.js';
+import '../../chunk-NKHMUPAP.js';
+import '../../chunk-A7TZHALP.js';
+import '../../chunk-D7VVQIPM.js';
+import '../../chunk-2EAZPH3M.js';
+import '../../chunk-QCA3ZR56.js';
+import '../../chunk-TFVDF4YH.js';
+import '../../chunk-Y2POLIXK.js';
+import '../../chunk-XF4SQ222.js';
+import '../../chunk-OKZYR4RF.js';
+import '../../chunk-ZWU6DRRZ.js';
+import '../../chunk-65JPI4FL.js';
+import '../../chunk-EMD2K6B3.js';
+import '../../chunk-HZKFQ33E.js';
+import '../../chunk-NMKBUGSO.js';
+import '../../chunk-BF6YUKC2.js';
+import '../../chunk-DHVVYSLB.js';
+import '../../chunk-A2S2Q73W.js';
+import '../../chunk-NH3IVMXB.js';
+import '../../chunk-FAE27DLF.js';
+import '../../chunk-EURJK4ZT.js';
+import '../../chunk-L5A2UTQV.js';
+import '../../chunk-7JOGKC3W.js';
+import '../../chunk-5NMCOZOW.js';
+import '../../chunk-FYIHMKHI.js';
+import '../../chunk-2ZOLM7VR.js';
+import '../../chunk-JVDCU4PT.js';
+import '../../chunk-WPNVVGFW.js';
+import '../../chunk-X2T2UX2O.js';
+import '../../chunk-CQDLZ42T.js';
+import '../../chunk-CIGS4QGT.js';
+import '../../chunk-UNSJTDXN.js';
+import '../../chunk-HXPTWMD5.js';
+import '../../chunk-QCTIAKM6.js';
+import '../../chunk-X6SER3TZ.js';
+import '../../chunk-NS3XVOQ7.js';
+import '../../chunk-HXI3MEEK.js';
+import '../../chunk-QSWSZUZM.js';
+import '../../chunk-AES7QBQE.js';
+import '../../chunk-BO53NITW.js';
+import '../../chunk-M36KANKC.js';
+import '../../chunk-KVDXQMWI.js';
+import '../../chunk-JWW56J7M.js';
+import '../../chunk-JSBRDJBE.js';

package/dist/Select/src/SelectContext.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { ContextValue } from 'react-aria-components';
+import { SelectProps } from './Select.js';
+import '../../ListBox/src/ListBox.js';
+import 'react/jsx-runtime';
+import '@hopper-ui/styled-system';
+import '../../ListBox/src/ListBoxItem.js';
+import '../../overlays/Popover/src/Popover.js';
+import '../../utils/src/types.js';
+import '@react-types/shared';
+import 'react-aria';
+
+type SelectContextProps = SelectProps<any>;
+declare const SelectContext: react.Context<ContextValue<Partial<SelectContextProps>, HTMLDivElement>>;
+
+export { SelectContext };

package/dist/Select/src/SelectContext.js

@@ -0,0 +1,2 @@
+export { SelectContext } from '../../chunk-T24MBA34.js';
+import '../../chunk-JSBRDJBE.js';

package/dist/Select/src/SelectValue.css

@@ -0,0 +1,443 @@
+/* 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___D1rn4 {
+  --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___D1rn4) {
+  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___83nUB) {
+  --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___J7Ynn) {
+  --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___vDq4E) {
+  --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___d93YP) {
+  --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___7Poiv) {
+  --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___owE8f) {
+  --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___LGo4-) {
+  --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/Avatar/src/RichIconAvatarImage.module.css/#css-module-data */
+.RichIconAvatarImage-module__hop-RichIconAvatarImage___0SfZJ {
+  --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___7c8Uq {
+  --size: var(--hop-RichIconAvatarImage-xs-size);
+  --icon-size: var(--hop-RichIconAvatarImage-icon-xs-size);
+}
+.RichIconAvatarImage-module__hop-RichIconAvatarImage--sm___CMqPA {
+  --size: var(--hop-RichIconAvatarImage-sm-size);
+  --icon-size: var(--hop-RichIconAvatarImage-icon-sm-size);
+}
+.RichIconAvatarImage-module__hop-RichIconAvatarImage--md___qR-0W {
+  --size: var(--hop-RichIconAvatarImage-md-size);
+  --icon-size: var(--hop-RichIconAvatarImage-icon-md-size);
+}
+.RichIconAvatarImage-module__hop-RichIconAvatarImage--lg___yBdoM {
+  --size: var(--hop-RichIconAvatarImage-lg-size);
+  --icon-size: var(--hop-RichIconAvatarImage-icon-lg-size);
+}
+.RichIconAvatarImage-module__hop-RichIconAvatarImage--xl___tBzp5 {
+  --size: var(--hop-RichIconAvatarImage-xl-size);
+  --icon-size: var(--hop-RichIconAvatarImage-icon-xl-size);
+}
+.RichIconAvatarImage-module__hop-RichIconAvatarImage--2xl___--GFe {
+  --size: var(--hop-RichIconAvatarImage-2xl-size);
+  --icon-size: var(--hop-RichIconAvatarImage-icon-2xl-size);
+}
+.RichIconAvatarImage-module__hop-RichIconAvatarImage___0SfZJ[data-disabled] {
+  --background-color: var(--hop-RichIconAvatarImage-background-color-disabled);
+}
+.RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___tDykK {
+  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___0SfZJ[data-disabled] .RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___tDykK {
+  --hop-RichIcon-placeholder-background: var(--hop-RichIconAvatarImage-background-color-disabled);
+  --hop-RichIcon-placeholder-shadow: var(--hop-RichIconAvatarImage-icon-color-disabled);
+}
+
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Avatar/src/Avatar.module.css/#css-module-data */
+.Avatar-module__hop-Avatar___voDSB {
+  --hop-Avatar-border-radius: var(--hop-shape-circle);
+  --hop-Avatar-mix-blend-mode: normal;
+  --hop-Avatar-decorative-1-background-color: var(--hop-decorative-option1-surface-strong);
+  --hop-Avatar-decorative-2-background-color: var(--hop-decorative-option2-surface-strong);
+  --hop-Avatar-decorative-3-background-color: var(--hop-decorative-option3-surface-strong);
+  --hop-Avatar-decorative-4-background-color: var(--hop-decorative-option4-surface-strong);
+  --hop-Avatar-decorative-5-background-color: var(--hop-decorative-option5-surface-strong);
+  --hop-Avatar-decorative-6-background-color: var(--hop-decorative-option6-surface-strong);
+  --hop-Avatar-decorative-7-background-color: var(--hop-decorative-option7-surface-strong);
+  --hop-Avatar-decorative-8-background-color: var(--hop-decorative-option8-surface-strong);
+  --hop-Avatar-decorative-9-background-color: var(--hop-decorative-option9-surface-strong);
+  --hop-Avatar-decorative-1-text-color: var(--hop-decorative-option1-text);
+  --hop-Avatar-decorative-2-text-color: var(--hop-decorative-option2-text);
+  --hop-Avatar-decorative-3-text-color: var(--hop-decorative-option3-text);
+  --hop-Avatar-decorative-4-text-color: var(--hop-decorative-option4-text);
+  --hop-Avatar-decorative-5-text-color: var(--hop-decorative-option5-text);
+  --hop-Avatar-decorative-6-text-color: var(--hop-decorative-option6-text);
+  --hop-Avatar-decorative-7-text-color: var(--hop-decorative-option7-text);
+  --hop-Avatar-decorative-8-text-color: var(--hop-decorative-option8-text);
+  --hop-Avatar-decorative-9-text-color: var(--hop-decorative-option9-text);
+  --hop-Avatar-xs-size: 1rem;
+  --hop-Avatar-sm-size: 1.5rem;
+  --hop-Avatar-md-size: 2rem;
+  --hop-Avatar-lg-size: 3rem;
+  --hop-Avatar-xl-size: 4rem;
+  --hop-Avatar-2xl-size: 6rem;
+  --hop-Avatar-background-color-disabled: var(--hop-neutral-surface-disabled);
+  --hop-Avatar-text-color-disabled: var(--hop-neutral-text-disabled);
+  --hop-Avatar-mix-blend-mode-disabled: luminosity;
+  --mix-blend-mode: var(--hop-Avatar-mix-blend-mode);
+  user-select: none;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  inline-size: var(--size, var(--hop-Avatar-md-size));
+  block-size: var(--size, var(--hop-Avatar-md-size));
+  color: var(--text-color, var(--hop-neutral-text));
+  background-color: var(--background-color, transparent);
+  border-radius: var(--hop-Avatar-border-radius);
+}
+.Avatar-module__hop-Avatar--xs___vyK5f {
+  --size: var(--hop-Avatar-xs-size);
+}
+.Avatar-module__hop-Avatar--sm___tZ1n5 {
+  --size: var(--hop-Avatar-sm-size);
+}
+.Avatar-module__hop-Avatar--md___ZETXa {
+  --size: var(--hop-Avatar-md-size);
+}
+.Avatar-module__hop-Avatar--lg___2JJif {
+  --size: var(--hop-Avatar-lg-size);
+}
+.Avatar-module__hop-Avatar--xl___GbLkx {
+  --size: var(--hop-Avatar-xl-size);
+}
+.Avatar-module__hop-Avatar--2xl___i2HmH {
+  --size: var(--hop-Avatar-2xl-size);
+}
+.Avatar-module__hop-Avatar--decorative-option1___swzwE {
+  --background-color: var(--hop-Avatar-decorative-1-background-color);
+  --text-color: var(--hop-Avatar-decorative-1-text-color);
+}
+.Avatar-module__hop-Avatar--decorative-option2___61Ewl {
+  --background-color: var(--hop-Avatar-decorative-2-background-color);
+  --text-color: var(--hop-Avatar-decorative-2-text-color);
+}
+.Avatar-module__hop-Avatar--decorative-option3___btSY5 {
+  --background-color: var(--hop-Avatar-decorative-3-background-color);
+  --text-color: var(--hop-Avatar-decorative-3-text-color);
+}
+.Avatar-module__hop-Avatar--decorative-option4___muuvm {
+  --background-color: var(--hop-Avatar-decorative-4-background-color);
+  --text-color: var(--hop-Avatar-decorative-4-text-color);
+}
+.Avatar-module__hop-Avatar--decorative-option5___FAvFc {
+  --background-color: var(--hop-Avatar-decorative-5-background-color);
+  --text-color: var(--hop-Avatar-decorative-5-text-color);
+}
+.Avatar-module__hop-Avatar--decorative-option6___tZ9LE {
+  --background-color: var(--hop-Avatar-decorative-6-background-color);
+  --text-color: var(--hop-Avatar-decorative-6-text-color);
+}
+.Avatar-module__hop-Avatar--decorative-option7___fXKic {
+  --background-color: var(--hop-Avatar-decorative-7-background-color);
+  --text-color: var(--hop-Avatar-decorative-7-text-color);
+}
+.Avatar-module__hop-Avatar--decorative-option8___43DZK {
+  --background-color: var(--hop-Avatar-decorative-8-background-color);
+  --text-color: var(--hop-Avatar-decorative-8-text-color);
+}
+.Avatar-module__hop-Avatar--decorative-option9___Hc--N {
+  --background-color: var(--hop-Avatar-decorative-9-background-color);
+  --text-color: var(--hop-Avatar-decorative-9-text-color);
+}
+.Avatar-module__hop-Avatar___voDSB[data-disabled] {
+  --background-color: var(--hop-Avatar-background-color-disabled);
+  --text-color: var(--hop-Avatar-text-color-disabled);
+  --mix-blend-mode: var(--hop-Avatar-mix-blend-mode-disabled);
+  isolation: isolate;
+}
+.Avatar-module__hop-Avatar__image___BNmTQ {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+  mix-blend-mode: var(--mix-blend-mode);
+}
+
+/* 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___bg7Vw {
+  --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___bg7Vw) {
+  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___cJICk) {
+  --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___vU8hq) {
+  --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___z6GMX) {
+  --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___jgsIb) {
+  --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___9EVlv) {
+  --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___kHIrr) {
+  --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___slkv6) {
+  --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/OverlineText/src/OverlineText.module.css/#css-module-data */
+:where(.OverlineText-module__hop-OverlineText___-AumH) {
+  --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___epYug {
+  box-sizing: border-box;
+}
+.OverlineText-module__hop-OverlineText__text___epYug::before,
+.OverlineText-module__hop-OverlineText__text___epYug::after {
+  content: "";
+  display: block;
+  box-sizing: border-box;
+  inline-size: 0;
+  block-size: 0;
+}
+.OverlineText-module__hop-OverlineText__text___epYug::before {
+  margin-block-end: var(--bottom-offset);
+}
+.OverlineText-module__hop-OverlineText__text___epYug::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___xyX8G {
+  --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___xyX8G) {
+  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___QJQXo) {
+  padding-inline-start: var(--hop-space-20);
+}
+
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Select/src/SelectValue.module.css/#css-module-data */
+.SelectValue-module__hop-SelectValue___fyhi8 {
+  --hop-SelectValue-display: flex;
+  --hop-SelectValue-column-gap: var(--hop-space-inline-sm);
+  overflow: hidden;
+  display: var(--hop-SelectValue-display);
+  flex: 1 1 auto;
+  column-gap: var(--hop-SelectValue-column-gap);
+  align-items: center;
+  box-sizing: border-box;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.SelectValue-module__hop-SelectValue__avatar___MMiVH {
+  order: 1;
+}
+.SelectValue-module__hop-SelectValue__icon___r-eu7 {
+  order: 2;
+}
+.SelectValue-module__hop-SelectValue__text___f3iUY {
+  overflow: hidden;
+  flex: 1 1 auto;
+  order: 3;
+  min-inline-size: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.SelectValue-module__hop-SelectValue__end-icon___ECGgT {
+  order: 4;
+}