@hopper-ui/components 1.4.6 → 1.4.8

package/dist/Tile/src/Tile.css

@@ -0,0 +1,326 @@
+/* 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___o-v-P {
+  --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___o-v-P) {
+  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___KXQEX) {
+  --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___-WdRn) {
+  --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___ukpIT) {
+  --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___i2P5H) {
+  --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___Tsi-u) {
+  --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___yfzVl) {
+  --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___4mhyI) {
+  --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___w4sro {
+  --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___w4sro) {
+  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___YJQqc) {
+  --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___b-Fyx) {
+  --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___Mv6pk) {
+  --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___meTgy) {
+  --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___62mE-) {
+  --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___MKyPg) {
+  --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___CbsDY) {
+  --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___LwiJI) {
+  --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___ExOHp {
+  box-sizing: border-box;
+}
+.OverlineText-module__hop-OverlineText__text___ExOHp::before,
+.OverlineText-module__hop-OverlineText__text___ExOHp::after {
+  content: "";
+  display: block;
+  box-sizing: border-box;
+  inline-size: 0;
+  block-size: 0;
+}
+.OverlineText-module__hop-OverlineText__text___ExOHp::before {
+  margin-block-end: var(--bottom-offset);
+}
+.OverlineText-module__hop-OverlineText__text___ExOHp::after {
+  margin-block-start: var(--top-offset);
+}
+
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Form/src/Form.module.css/#css-module-data */
+.Form-module__hop-Form___CQAzy {
+  display: flex;
+  flex-direction: column;
+  gap: var(--hop-space-stack-lg);
+}
+
+/* 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___fv4X4 {
+  --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___fv4X4) {
+  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___5kTP2) {
+  padding-inline-start: var(--hop-space-20);
+}
+
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Tile/src/Tile.module.css/#css-module-data */
+.Tile-module__hop-Tile___voLrp {
+  --hop-Tile-color: var(--hop-neutral-text);
+  --hop-Tile-background: var(--hop-neutral-surface);
+  --hop-Tile-border-witdh: 0.0625rem;
+  --hop-Tile-border-style: solid;
+  --hop-Tile-border-color: var(--hop-neutral-border-strong);
+  --hop-Tile-border-radius: var(--hop-shape-rounded-sm);
+  --hop-Tile-cursor: pointer;
+  --hop-Tile-outline-offset: 0rem;
+  --hop-Tile-outline-color: transparent;
+  --hop-Tile-outline-width: var(--hop-space-20);
+  --hop-Tile-padding: var(--hop-space-inset-md);
+  --hop-Tile-display: flex;
+  --hop-Tile-justify-content: space-between;
+  --hop-Tile-gap: var(--hop-space-inset-md);
+  --hop-Tile-color-focused: var(--hop-neutral-text-hover);
+  --hop-Tile-background-focused: var(--hop-neutral-surface-hover);
+  --hop-Tile-outline-color-focused: var(--hop-primary-border-focus);
+  --hop-Tile-border-color-focused: transparent;
+  --hop-Tile-color-hovered: var(--hop-neutral-text-hover);
+  --hop-Tile-background-hovered: var(--hop-neutral-surface-hover);
+  --hop-Tile-border-color-hovered: var(--hop-neutral-border-strong-hover);
+  --hop-Tile-color-pressed: var(--hop-neutral-text-press);
+  --hop-Tile-background-pressed: var(--hop-neutral-surface-press);
+  --hop-Tile-border-color-pressed: var(--hop-neutral-border-strong);
+  --hop-Tile-color-selected: var(--hop-neutral-text);
+  --hop-Tile-background-selected: var(--hop-neutral-surface-weak-selected);
+  --hop-Tile-outline-color-selected: var(--hop-neutral-border-strong);
+  --hop-Tile-border-color-selected: transparent;
+  --hop-Tile-color-disabled: var(--hop-neutral-text-disabled);
+  --hop-Tile-background-disabled: var(--hop-neutral-surface-disabled);
+  --hop-Tile-border-color-disabled: var(--hop-neutral-surface-disabled);
+  --hop-Tile-outline-color-disabled: transparent;
+  --hop-Tile-cursor-disabled: auto;
+  --hop-Tile-color-icon: transparent;
+  --hop-Tile-color-icon-selected: var(--hop-neutral-icon);
+  --hop-Tile-color-icon-disabled: var(--hop-neutral-icon-disabled);
+  --color: var(--hop-Tile-color);
+  --background: var(--hop-Tile-background);
+  --border-color: var(--hop-Tile-border-color);
+  --cursor: var(--hop-Tile-cursor);
+  cursor: var(--cursor);
+  display: var(--hop-Tile-display);
+  gap: var(--hop-Tile-gap);
+  justify-content: var(--hop-Tile-justify-content);
+  padding: var(--hop-Tile-padding);
+  color: var(--color);
+  background: var(--background);
+  border: var(--hop-Tile-border-witdh) var(--hop-Tile-border-style) var(--border-color);
+  border-radius: var(--hop-Tile-border-radius);
+  outline: var(--hop-Tile-outline-offset) solid var(--hop-Tile-outline-color);
+  outline-width: var(--hop-Tile-outline-width);
+}
+.Tile-module__hop-Tile___voLrp[data-hovered] {
+  --color: var(--hop-Tile-color-hovered);
+  --background: var(--hop-Tile-background-hovered);
+  --border-color: var(--hop-Tile-border-color-hovered);
+}
+.Tile-module__hop-Tile___voLrp[data-pressed] {
+  --color: var(--hop-Tile-color-pressed);
+  --background: var(--hop-Tile-background-pressed);
+  --border-color: var(--hop-Tile-border-color-pressed);
+}
+.Tile-module__hop-Tile___voLrp[data-focus-visible] {
+  --color: var(--hop-Tile-color-focused);
+  --background: var(--hop-Tile-background-focused);
+  --hop-Tile-outline-color: var(--hop-Tile-outline-color-focused);
+  --border-color: var(--hop-Tile-border-color-focused);
+}
+.Tile-module__hop-Tile___voLrp[data-selected] {
+  --color: var(--hop-Tile-color-selected);
+  --background: var(--hop-Tile-background-selected);
+  --border-color: var(--hop-Tile-border-color-selected);
+  --hop-Tile-outline-color: var(--hop-Tile-outline-color-selected);
+}
+.Tile-module__hop-Tile___voLrp[data-disabled] {
+  --color: var(--hop-Tile-color-disabled);
+  --background: var(--hop-Tile-background-disabled);
+  --border-color: var(--hop-Tile-border-color-disabled);
+  --hop-Tile-outline-color: var(--hop-Tile-outline-color-disabled);
+  --cursor: var(--hop-Tile-cursor-disabled);
+}
+.Tile-module__hop-Tile___voLrp[data-selected] > .Tile-module__hop-Tile__icon___iI2bk {
+  color: var(--hop-Tile-color-ico-selected);
+}
+.Tile-module__hop-Tile___voLrp[data-disabled][data-selected] > .Tile-module__hop-Tile__icon___iI2bk {
+  color: var(--hop-Tile-color-icon-disabled);
+}
+.Tile-module__hop-Tile__icon___iI2bk {
+  color: var(--hop-Tile-color-icon);
+}

package/dist/Tile/src/Tile.d.ts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { StyledComponentProps } from '@hopper-ui/styled-system';
+import { ToggleButtonProps, Key } from 'react-aria-components';
+
+declare const GlobalTileCssSelector = "hop-Tile";
+type TileSize = "sm" | "md";
+interface TileProps extends StyledComponentProps<ToggleButtonProps> {
+    /**
+     * The id of the Tile, matching the values used in TileGroup's `selectedKeys` prop.
+     */
+    id: Key;
+}
+/**
+ * A tile groups information into an interactive element to let users browse and take action on a group of related items.
+ *
+ * [View Documentation](https://hopper.workleap.design/components/Tile)
+ */
+declare const _Tile: react.ForwardRefExoticComponent<TileProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { GlobalTileCssSelector, _Tile as Tile, type TileProps, type TileSize };

package/dist/Tile/src/Tile.js

@@ -0,0 +1,19 @@
+export { GlobalTileCssSelector, _Tile as Tile } from '../../chunk-EZXZMHPJ.js';
+import '../../chunk-JTNKUYE5.js';
+import '../../chunk-DBIN32YS.js';
+import '../../chunk-PAVQC74G.js';
+import '../../chunk-I2LTZFXN.js';
+import '../../chunk-QCA3ZR56.js';
+import '../../chunk-75DHKNW2.js';
+import '../../chunk-TXZ6BMFR.js';
+import '../../chunk-VOXZA4YS.js';
+import '../../chunk-Q7NXUUB3.js';
+import '../../chunk-CYICQ2TZ.js';
+import '../../chunk-WPNVVGFW.js';
+import '../../chunk-Z7ORLEY6.js';
+import '../../chunk-X6SER3TZ.js';
+import '../../chunk-HXI3MEEK.js';
+import '../../chunk-65JPI4FL.js';
+import '../../chunk-M36KANKC.js';
+import '../../chunk-KVDXQMWI.js';
+import '../../chunk-JSBRDJBE.js';

package/dist/Tile/src/TileContext.d.ts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+import { ContextValue } from 'react-aria-components';
+import { TileProps } from './Tile.js';
+import '@hopper-ui/styled-system';
+
+declare const TileContext: react.Context<ContextValue<TileProps, HTMLButtonElement>>;
+declare const InternalTileContext: react.Context<ContextValue<Omit<TileProps, "id">, HTMLButtonElement>>;
+
+export { InternalTileContext, TileContext };

package/dist/Tile/src/TileContext.js

@@ -0,0 +1,2 @@
+export { InternalTileContext, TileContext } from '../../chunk-JTNKUYE5.js';
+import '../../chunk-JSBRDJBE.js';

package/dist/Tile/src/TileGroup.css

@@ -0,0 +1,241 @@
+/* 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___o-v-P {
+  --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___o-v-P) {
+  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___KXQEX) {
+  --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___-WdRn) {
+  --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___ukpIT) {
+  --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___i2P5H) {
+  --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___Tsi-u) {
+  --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___yfzVl) {
+  --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___4mhyI) {
+  --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___w4sro {
+  --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___w4sro) {
+  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___YJQqc) {
+  --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___b-Fyx) {
+  --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___Mv6pk) {
+  --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___meTgy) {
+  --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___62mE-) {
+  --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___MKyPg) {
+  --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___CbsDY) {
+  --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___LwiJI) {
+  --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___ExOHp {
+  box-sizing: border-box;
+}
+.OverlineText-module__hop-OverlineText__text___ExOHp::before,
+.OverlineText-module__hop-OverlineText__text___ExOHp::after {
+  content: "";
+  display: block;
+  box-sizing: border-box;
+  inline-size: 0;
+  block-size: 0;
+}
+.OverlineText-module__hop-OverlineText__text___ExOHp::before {
+  margin-block-end: var(--bottom-offset);
+}
+.OverlineText-module__hop-OverlineText__text___ExOHp::after {
+  margin-block-start: var(--top-offset);
+}
+
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Form/src/Form.module.css/#css-module-data */
+.Form-module__hop-Form___CQAzy {
+  display: flex;
+  flex-direction: column;
+  gap: var(--hop-space-stack-lg);
+}
+
+/* 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___fv4X4 {
+  --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___fv4X4) {
+  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___5kTP2) {
+  padding-inline-start: var(--hop-space-20);
+}
+
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Tile/src/TileGroup.module.css/#css-module-data */
+.TileGroup-module__hop-TileGroup___qtBC1 {
+  --hop-TileGroup-display: grid;
+  --hop-TileGroup-gap: var(--hop-space-inset-md);
+  display: var(--hop-TileGroup-display);
+  gap: var(--hop-TileGroup-gap);
+}

package/dist/Tile/src/TileGroup.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { StyledComponentProps, ResponsiveProp } from '@hopper-ui/styled-system';
+import { ToggleButtonGroupProps } from 'react-aria-components';
+
+declare const GlobalTileGroupCssSelector = "hop-TileGroup";
+interface TileGroupProps extends StyledComponentProps<ToggleButtonGroupProps> {
+    /**
+     * The number of columns to display the tiles in.
+     * @default 3
+     */
+    numberOfColumns?: ResponsiveProp<number>;
+    /**
+     * Whether single or multiple selection is enabled.
+     * @default "single"
+     */
+    selectionMode?: "single" | "multiple";
+    /**
+     * Whether the collection allows empty selection.
+     * @default true
+     */
+    disallowEmptySelection?: boolean;
+}
+/**
+ * TileGroup groups Tiles to let users browse and take action on a group of related items.
+ *
+ * [View Documentation](https://hopper.workleap.design/components/TileGroup)
+ */
+declare const _TileGroup: react.ForwardRefExoticComponent<TileGroupProps & react.RefAttributes<HTMLDivElement>>;
+
+export { GlobalTileGroupCssSelector, _TileGroup as TileGroup, type TileGroupProps };

package/dist/Tile/src/TileGroup.js

@@ -0,0 +1,6 @@
+export { GlobalTileGroupCssSelector, _TileGroup as TileGroup } from '../../chunk-MM2SG6JU.js';
+import '../../chunk-JTNKUYE5.js';
+import '../../chunk-3MTGAZ77.js';
+import '../../chunk-65JPI4FL.js';
+import '../../chunk-KVDXQMWI.js';
+import '../../chunk-JSBRDJBE.js';

package/dist/Tile/src/TileGroupContext.d.ts

@@ -0,0 +1,8 @@
+import * as react from 'react';
+import { ContextValue } from 'react-aria-components';
+import { TileGroupProps } from './TileGroup.js';
+import '@hopper-ui/styled-system';
+
+declare const TileGroupContext: react.Context<ContextValue<TileGroupProps, HTMLDivElement>>;
+
+export { TileGroupContext };

package/dist/Tile/src/TileGroupContext.js

@@ -0,0 +1,2 @@
+export { TileGroupContext } from '../../chunk-3MTGAZ77.js';
+import '../../chunk-JSBRDJBE.js';