@hopper-ui/components 1.2.0 → 1.3.0

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,116 @@
+export { GlobalSelectCssSelector, CompoundSelect as Select } from '../../chunk-SCXYAGZI.js';
+import '../../chunk-SC6ZK5ON.js';
+import '../../chunk-I4VPBQI7.js';
+import '../../chunk-WWRB4K4M.js';
+import '../../chunk-LFN43ROH.js';
+import '../../chunk-H7VJS4MX.js';
+import '../../chunk-FOXOPL2E.js';
+import '../../chunk-DFVORYEU.js';
+import '../../chunk-XLKYXKWE.js';
+import '../../chunk-EWMWQ2MC.js';
+import '../../chunk-LCAS3YQV.js';
+import '../../chunk-SKEMSZ63.js';
+import '../../chunk-7L5MCX2A.js';
+import '../../chunk-YHBJAXUY.js';
+import '../../chunk-AQITZWYM.js';
+import '../../chunk-I67NHYK4.js';
+import '../../chunk-N77LTZ4U.js';
+import '../../chunk-Y7HUXUHX.js';
+import '../../chunk-D6UTDI2K.js';
+import '../../chunk-GFHBDUJD.js';
+import '../../chunk-GRJ3VKHY.js';
+import '../../chunk-Z57VHYOF.js';
+import '../../chunk-IU6XMS2X.js';
+import '../../chunk-MHQZXLKW.js';
+import '../../chunk-LYPR2YMY.js';
+import '../../chunk-O4XPUINW.js';
+import '../../chunk-GXBVNCVP.js';
+import '../../chunk-IXB2WK56.js';
+import '../../chunk-TVFC2MJ4.js';
+import '../../chunk-4RMADICI.js';
+import '../../chunk-MTDFS4CZ.js';
+import '../../chunk-ZQ3AWYRR.js';
+import '../../chunk-CU36N5JQ.js';
+import '../../chunk-QW45G6K4.js';
+import '../../chunk-CWX45XWS.js';
+import '../../chunk-ZHOQYYHY.js';
+import '../../chunk-6BFSSZCY.js';
+import '../../chunk-3NKF5TPD.js';
+import '../../chunk-JIRLWUDP.js';
+import '../../chunk-N7YDPVZL.js';
+import '../../chunk-3LRBUQC2.js';
+import '../../chunk-WDUQUPTE.js';
+import '../../chunk-BTHPJL3A.js';
+import '../../chunk-DXVKHP4V.js';
+import '../../chunk-D7DIUGRI.js';
+import '../../chunk-O7IJYNVQ.js';
+import '../../chunk-T742LIIS.js';
+import '../../chunk-ZGNK4GWA.js';
+import '../../chunk-TOWSC7FO.js';
+import '../../chunk-H5YTU3U7.js';
+import '../../chunk-3573Q6QG.js';
+import '../../chunk-4ZYV2XLW.js';
+import '../../chunk-T37HTUEU.js';
+import '../../chunk-WMTWFKKP.js';
+import '../../chunk-VJQ7M2BK.js';
+import '../../chunk-O5PTD6IN.js';
+import '../../chunk-T24MBA34.js';
+import '../../chunk-YB7IYQW4.js';
+import '../../chunk-EHXOXTDN.js';
+import '../../chunk-LJXTJRSB.js';
+import '../../chunk-HIDHDS2L.js';
+import '../../chunk-BODCT27J.js';
+import '../../chunk-TXZ6BMFR.js';
+import '../../chunk-3ZRCYKIV.js';
+import '../../chunk-4VVNSXIB.js';
+import '../../chunk-QQI3KNHZ.js';
+import '../../chunk-TIPN4VYD.js';
+import '../../chunk-5H5AZJPQ.js';
+import '../../chunk-UIEP5BA5.js';
+import '../../chunk-6C5RI4RT.js';
+import '../../chunk-SSDFINDD.js';
+import '../../chunk-DGLAGYBD.js';
+import '../../chunk-5MBJWRZD.js';
+import '../../chunk-NKHMUPAP.js';
+import '../../chunk-A7TZHALP.js';
+import '../../chunk-TTY5HDLL.js';
+import '../../chunk-FU5CCPLP.js';
+import '../../chunk-OLS7K6PO.js';
+import '../../chunk-2EAZPH3M.js';
+import '../../chunk-QCA3ZR56.js';
+import '../../chunk-TFVDF4YH.js';
+import '../../chunk-ZWU6DRRZ.js';
+import '../../chunk-65JPI4FL.js';
+import '../../chunk-Y2POLIXK.js';
+import '../../chunk-T3CLGQI6.js';
+import '../../chunk-OKZYR4RF.js';
+import '../../chunk-6H5DRQZH.js';
+import '../../chunk-HZKFQ33E.js';
+import '../../chunk-NMKBUGSO.js';
+import '../../chunk-CAHZCRTK.js';
+import '../../chunk-DHVVYSLB.js';
+import '../../chunk-EURJK4ZT.js';
+import '../../chunk-L5A2UTQV.js';
+import '../../chunk-7JOGKC3W.js';
+import '../../chunk-DLZGJBL7.js';
+import '../../chunk-FYIHMKHI.js';
+import '../../chunk-DXEWBV4C.js';
+import '../../chunk-C72PRNOP.js';
+import '../../chunk-WPNVVGFW.js';
+import '../../chunk-CQDLZ42T.js';
+import '../../chunk-BRU54ERL.js';
+import '../../chunk-NH3IVMXB.js';
+import '../../chunk-FAE27DLF.js';
+import '../../chunk-O2ZMTKCT.js';
+import '../../chunk-AZJME7JV.js';
+import '../../chunk-NS3XVOQ7.js';
+import '../../chunk-D5PBETXF.js';
+import '../../chunk-X6SER3TZ.js';
+import '../../chunk-HXI3MEEK.js';
+import '../../chunk-BQITTESM.js';
+import '../../chunk-AES7QBQE.js';
+import '../../chunk-JQMXGSAE.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___TrcWf {
+  --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___TrcWf) {
+  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___rF5yE) {
+  --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___tPgW7) {
+  --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___g9Wf2) {
+  --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___gXea2) {
+  --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___iGie8) {
+  --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___p5vcB) {
+  --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___Jg8ZC) {
+  --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___1OlI2 {
+  --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___XGaUz {
+  --size: var(--hop-RichIconAvatarImage-xs-size);
+  --icon-size: var(--hop-RichIconAvatarImage-icon-xs-size);
+}
+.RichIconAvatarImage-module__hop-RichIconAvatarImage--sm___-Olod {
+  --size: var(--hop-RichIconAvatarImage-sm-size);
+  --icon-size: var(--hop-RichIconAvatarImage-icon-sm-size);
+}
+.RichIconAvatarImage-module__hop-RichIconAvatarImage--md___FlqqG {
+  --size: var(--hop-RichIconAvatarImage-md-size);
+  --icon-size: var(--hop-RichIconAvatarImage-icon-md-size);
+}
+.RichIconAvatarImage-module__hop-RichIconAvatarImage--lg___zXLMo {
+  --size: var(--hop-RichIconAvatarImage-lg-size);
+  --icon-size: var(--hop-RichIconAvatarImage-icon-lg-size);
+}
+.RichIconAvatarImage-module__hop-RichIconAvatarImage--xl___sYtIR {
+  --size: var(--hop-RichIconAvatarImage-xl-size);
+  --icon-size: var(--hop-RichIconAvatarImage-icon-xl-size);
+}
+.RichIconAvatarImage-module__hop-RichIconAvatarImage--2xl___tNx7t {
+  --size: var(--hop-RichIconAvatarImage-2xl-size);
+  --icon-size: var(--hop-RichIconAvatarImage-icon-2xl-size);
+}
+.RichIconAvatarImage-module__hop-RichIconAvatarImage___1OlI2[data-disabled] {
+  --background-color: var(--hop-RichIconAvatarImage-background-color-disabled);
+}
+.RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___lycqV {
+  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___1OlI2[data-disabled] .RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___lycqV {
+  --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___fYhW6 {
+  --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___lg3Fx {
+  --size: var(--hop-Avatar-xs-size);
+}
+.Avatar-module__hop-Avatar--sm___O7vVp {
+  --size: var(--hop-Avatar-sm-size);
+}
+.Avatar-module__hop-Avatar--md___U6oEm {
+  --size: var(--hop-Avatar-md-size);
+}
+.Avatar-module__hop-Avatar--lg___-Z-lW {
+  --size: var(--hop-Avatar-lg-size);
+}
+.Avatar-module__hop-Avatar--xl___-xZ0- {
+  --size: var(--hop-Avatar-xl-size);
+}
+.Avatar-module__hop-Avatar--2xl___zDd2E {
+  --size: var(--hop-Avatar-2xl-size);
+}
+.Avatar-module__hop-Avatar--decorative-option1___jTvFc {
+  --background-color: var(--hop-Avatar-decorative-1-background-color);
+  --text-color: var(--hop-Avatar-decorative-1-text-color);
+}
+.Avatar-module__hop-Avatar--decorative-option2___w5Mk7 {
+  --background-color: var(--hop-Avatar-decorative-2-background-color);
+  --text-color: var(--hop-Avatar-decorative-2-text-color);
+}
+.Avatar-module__hop-Avatar--decorative-option3___5WMEU {
+  --background-color: var(--hop-Avatar-decorative-3-background-color);
+  --text-color: var(--hop-Avatar-decorative-3-text-color);
+}
+.Avatar-module__hop-Avatar--decorative-option4___KWZeM {
+  --background-color: var(--hop-Avatar-decorative-4-background-color);
+  --text-color: var(--hop-Avatar-decorative-4-text-color);
+}
+.Avatar-module__hop-Avatar--decorative-option5___pVwyU {
+  --background-color: var(--hop-Avatar-decorative-5-background-color);
+  --text-color: var(--hop-Avatar-decorative-5-text-color);
+}
+.Avatar-module__hop-Avatar--decorative-option6___lRfp7 {
+  --background-color: var(--hop-Avatar-decorative-6-background-color);
+  --text-color: var(--hop-Avatar-decorative-6-text-color);
+}
+.Avatar-module__hop-Avatar--decorative-option7___AerdM {
+  --background-color: var(--hop-Avatar-decorative-7-background-color);
+  --text-color: var(--hop-Avatar-decorative-7-text-color);
+}
+.Avatar-module__hop-Avatar--decorative-option8___6hGGA {
+  --background-color: var(--hop-Avatar-decorative-8-background-color);
+  --text-color: var(--hop-Avatar-decorative-8-text-color);
+}
+.Avatar-module__hop-Avatar--decorative-option9___EjBKY {
+  --background-color: var(--hop-Avatar-decorative-9-background-color);
+  --text-color: var(--hop-Avatar-decorative-9-text-color);
+}
+.Avatar-module__hop-Avatar___fYhW6[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___m95ud {
+  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___qD-ZA {
+  --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___qD-ZA) {
+  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___mwtYu) {
+  --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___H6NDx) {
+  --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___EMItL) {
+  --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___qwUN7) {
+  --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___3ROoJ) {
+  --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___9FgeA) {
+  --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___Lg0Pe) {
+  --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___SbFVm) {
+  --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___Cb3CN {
+  box-sizing: border-box;
+}
+.OverlineText-module__hop-OverlineText__text___Cb3CN::before,
+.OverlineText-module__hop-OverlineText__text___Cb3CN::after {
+  content: "";
+  display: block;
+  box-sizing: border-box;
+  inline-size: 0;
+  block-size: 0;
+}
+.OverlineText-module__hop-OverlineText__text___Cb3CN::before {
+  margin-block-end: var(--bottom-offset);
+}
+.OverlineText-module__hop-OverlineText__text___Cb3CN::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___mvHHn {
+  --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___mvHHn) {
+  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___eN8aZ) {
+  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___vmhD5 {
+  --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___LzO40 {
+  order: 1;
+}
+.SelectValue-module__hop-SelectValue__icon___2SitP {
+  order: 2;
+}
+.SelectValue-module__hop-SelectValue__text___yJC6I {
+  overflow: hidden;
+  flex: 1 1 auto;
+  order: 3;
+  min-inline-size: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.SelectValue-module__hop-SelectValue__end-icon___3K-em {
+  order: 4;
+}