@hopper-ui/components 1.3.20 → 1.3.22

package/dist/buttons/src/LinkButton.css

@@ -0,0 +1,627 @@
+/* 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___Eay4d {
+  --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___Eay4d) {
+  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___d3EXo) {
+  --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___kJu64) {
+  --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___5l07Q) {
+  --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___n4a5t) {
+  --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___iRAGJ) {
+  --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___7feao) {
+  --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___YyZPS) {
+  --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___a3kO5 {
+  --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___a3kO5) {
+  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___oNTnw) {
+  --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___w91cp) {
+  --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___sWC3z) {
+  --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___CsB7P) {
+  --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___CIkMe) {
+  --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___hSu4e) {
+  --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___KZpNu) {
+  --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___cowIx) {
+  --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___bMeuH {
+  box-sizing: border-box;
+}
+.OverlineText-module__hop-OverlineText__text___bMeuH::before,
+.OverlineText-module__hop-OverlineText__text___bMeuH::after {
+  content: "";
+  display: block;
+  box-sizing: border-box;
+  inline-size: 0;
+  block-size: 0;
+}
+.OverlineText-module__hop-OverlineText__text___bMeuH::before {
+  margin-block-end: var(--bottom-offset);
+}
+.OverlineText-module__hop-OverlineText__text___bMeuH::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___lehKc {
+  --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___lehKc) {
+  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___fWyCS) {
+  padding-inline-start: var(--hop-space-20);
+}
+
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/IconList/src/IconList.module.css/#css-module-data */
+.IconList-module__hop-IconList___sAa77 {
+  --hop-IconList-gap: var(--hop-space-inline-xs);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--hop-IconList-gap);
+  box-sizing: border-box;
+}
+
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/buttons/src/LinkButton.module.css/#css-module-data */
+.Button-module__hop-Button___wPmJq {
+  --hop-Button-border-radius: var(--hop-shape-rounded-md);
+  --hop-Button-focus-ring-color: var(--hop-primary-border-focus);
+  --hop-Button-column-gap: var(--hop-space-inline-xs);
+  --hop-Button-icon-only-column-gap: 0;
+  --hop-Button-outline-size: var(--hop-space-20);
+  --hop-Button-border-size: var(--hop-space-10);
+  --hop-Button-text-underline-offset: var(--hop-space-20);
+  --hop-Button-icon-only-padding: 0;
+  --hop-Button-sm-height: 2rem;
+  --hop-Button-md-height: 2.5rem;
+  --hop-Button-sm-padding: 0 var(--hop-space-inset-md);
+  --hop-Button-md-padding: 0 var(--hop-space-inset-md);
+  --hop-Button-ghost-sm-padding: 0 var(--hop-space-inset-xs);
+  --hop-Button-ghost-md-padding: 0 var(--hop-space-inset-sm);
+  --hop-Button-color-disabled: var(--hop-neutral-text-disabled);
+  --hop-Button-background-color-disabled: var(--hop-neutral-surface-disabled);
+  --hop-Button-border-disabled: var(--hop-Button-border-size) solid var(--hop-Button-background-color-disabled);
+  --hop-Button-ghost-color-disabled: var(--hop-neutral-text-disabled);
+  --hop-Button-ghost-background-color-disabled: transparent;
+  --hop-Button-ghost-border-disabled: var(--hop-Button-border-size) solid var(--hop-Button-ghost-background-color-disabled);
+  --hop-Button-primary-color: var(--hop-primary-text-strong);
+  --hop-Button-primary-color-hover: var(--hop-primary-text-strong-hover);
+  --hop-Button-primary-color-pressed: var(--hop-primary-text-strong);
+  --hop-Button-primary-background-color: var(--hop-primary-surface-strong);
+  --hop-Button-primary-background-color-hover: var(--hop-primary-surface-strong-hover);
+  --hop-Button-primary-background-color-pressed: var(--hop-primary-surface-strong-press);
+  --hop-Button-primary-border: var(--hop-Button-border-size) solid var(--hop-Button-primary-background-color);
+  --hop-Button-primary-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-primary-background-color-hover);
+  --hop-Button-primary-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-primary-background-color-pressed);
+  --hop-Button-primary-spinner-color: var(--hop-primary-icon-strong);
+  --hop-Button-secondary-color: var(--hop-neutral-text);
+  --hop-Button-secondary-color-hover: var(--hop-neutral-text-hover);
+  --hop-Button-secondary-color-pressed: var(--hop-neutral-text-press);
+  --hop-Button-secondary-background-color: var(--hop-neutral-surface);
+  --hop-Button-secondary-background-color-hover: var(--hop-neutral-surface-hover);
+  --hop-Button-secondary-background-color-pressed: var(--hop-neutral-surface-press);
+  --hop-Button-secondary-border: var(--hop-Button-border-size) solid var(--hop-neutral-border-strong);
+  --hop-Button-secondary-border-hover: var(--hop-Button-border-size) solid var(--hop-neutral-border-strong-hover);
+  --hop-Button-secondary-border-pressed: var(--hop-Button-border-size) solid var(--hop-neutral-border-strong);
+  --hop-Button-secondary-spinner-color: var(--hop-neutral-icon);
+  --hop-Button-upsell-color: var(--hop-upsell-text);
+  --hop-Button-upsell-color-hover: var(--hop-upsell-text-hover);
+  --hop-Button-upsell-color-pressed: var(--hop-upsell-text-press);
+  --hop-Button-upsell-background-color: var(--hop-upsell-surface);
+  --hop-Button-upsell-background-color-hover: var(--hop-upsell-surface-hover);
+  --hop-Button-upsell-background-color-pressed: var(--hop-upsell-surface-press);
+  --hop-Button-upsell-border: var(--hop-Button-border-size) solid var(--hop-Button-upsell-background-color);
+  --hop-Button-upsell-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-upsell-background-color-hover);
+  --hop-Button-upsell-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-upsell-background-color-pressed);
+  --hop-Button-upsell-spinner-color: var(--hop-upsell-icon);
+  --hop-Button-danger-color: var(--hop-danger-text-strong);
+  --hop-Button-danger-color-hover: var(--hop-danger-text-strong-hover);
+  --hop-Button-danger-color-pressed: var(--hop-danger-text-strong-hover);
+  --hop-Button-danger-background-color: var(--hop-danger-surface-strong);
+  --hop-Button-danger-background-color-hover: var(--hop-danger-surface-strong-hover);
+  --hop-Button-danger-background-color-pressed: var(--hop-danger-surface-press);
+  --hop-Button-danger-border: var(--hop-Button-border-size) solid var(--hop-Button-danger-background-color);
+  --hop-Button-danger-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-danger-background-color-hover);
+  --hop-Button-danger-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-danger-background-color-pressed);
+  --hop-Button-danger-spinner-color: var(--hop-primary-icon-strong);
+  --hop-Button-ghost-primary-color: var(--hop-primary-text);
+  --hop-Button-ghost-primary-color-hover: var(--hop-primary-text-hover);
+  --hop-Button-ghost-primary-color-pressed: var(--hop-primary-text-press);
+  --hop-Button-ghost-primary-background-color: transparent;
+  --hop-Button-ghost-primary-background-color-hover: var(--hop-neutral-surface-hover);
+  --hop-Button-ghost-primary-background-color-pressed: var(--hop-primary-surface-weak-press);
+  --hop-Button-ghost-primary-border: var(--hop-Button-border-size) solid var(--hop-Button-ghost-primary-background-color);
+  --hop-Button-ghost-primary-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-ghost-primary-background-color-hover);
+  --hop-Button-ghost-primary-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-ghost-primary-background-color-pressed);
+  --hop-Button-ghost-primary-spinner-color: var(--hop-neutral-icon);
+  --hop-Button-ghost-secondary-color: var(--hop-neutral-text-weak);
+  --hop-Button-ghost-secondary-color-hover: var(--hop-neutral-text-weak-hover);
+  --hop-Button-ghost-secondary-color-pressed: var(--hop-neutral-text-weak-press);
+  --hop-Button-ghost-secondary-background-color: transparent;
+  --hop-Button-ghost-secondary-background-color-hover: var(--hop-neutral-surface-hover);
+  --hop-Button-ghost-secondary-background-color-pressed: var(--hop-neutral-surface-press);
+  --hop-Button-ghost-secondary-border: var(--hop-Button-border-size) solid var(--hop-Button-ghost-secondary-background-color);
+  --hop-Button-ghost-secondary-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-ghost-secondary-background-color-hover);
+  --hop-Button-ghost-secondary-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-ghost-secondary-background-color-pressed);
+  --hop-Button-ghost-secondary-spinner-color: var(--hop-neutral-icon);
+  --hop-Button-ghost-danger-color: var(--hop-danger-text-weak);
+  --hop-Button-ghost-danger-color-hover: var(--hop-danger-text-hover);
+  --hop-Button-ghost-danger-color-pressed: var(--hop-danger-text-press);
+  --hop-Button-ghost-danger-background-color: transparent;
+  --hop-Button-ghost-danger-background-color-hover: var(--hop-neutral-surface-hover);
+  --hop-Button-ghost-danger-background-color-pressed: var(--hop-danger-surface-weak-press);
+  --hop-Button-ghost-danger-border: var(--hop-Button-border-size) solid var(--hop-Button-ghost-danger-background-color);
+  --hop-Button-ghost-danger-border-hover: var(--hop-Button-border-size) solid var(--hop-Button-ghost-danger-background-color-hover);
+  --hop-Button-ghost-danger-border-pressed: var(--hop-Button-border-size) solid var(--hop-Button-ghost-danger-background-color-pressed);
+  --hop-Button-ghost-danger-spinner-color: var(--hop-neutral-icon);
+  --inline-size: max-content;
+  --block-size: var(--hop-Button-md-height);
+  --background-color: var(--hop-primary-surface-strong);
+  --color: var(--hop-primary-text-strong);
+  --column-gap: var(--hop-Button-column-gap);
+  --spinner: var(--hop-primary-icon-strong);
+  --border: 0;
+  --padding: var(--hop-Button-md-padding);
+  --text-underline: none;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  column-gap: var(--column-gap);
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  inline-size: var(--inline-size);
+  block-size: var(--block-size);
+  padding: var(--padding);
+  color: var(--color);
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: var(--background-color);
+  border: var(--border);
+  border-radius: var(--hop-Button-border-radius);
+  outline: none;
+  outline-offset: var(--hop-Button-outline-size);
+  transition:
+    color var(--hop-easing-duration-2) var(--hop-easing-productive),
+    background-color var(--hop-easing-duration-2) var(--hop-easing-productive),
+    border var(--hop-easing-duration-2) var(--hop-easing-productive);
+}
+.Button-module__hop-Button--fluid___2mgsx {
+  --inline-size: 100%;
+}
+.Button-module__hop-Button--sm___MZYWe {
+  --block-size: var(--hop-Button-sm-height);
+  --padding: var(--hop-Button-sm-padding);
+}
+.Button-module__hop-Button--sm___MZYWe[class*=--ghost] {
+  --padding: var(--hop-Button-ghost-sm-padding);
+}
+.Button-module__hop-Button--md___giNX1[class*=--ghost] {
+  --padding: var(--hop-Button-ghost-md-padding);
+}
+.Button-module__hop-Button--icon-only___KFrmA {
+  --column-gap: var(--hop-Button-icon-only-column-gap);
+  --padding: var(--hop-Button-icon-only-padding);
+  aspect-ratio: 1;
+}
+.Button-module__hop-Button--primary___naJ-v {
+  --background-color: var(--hop-Button-primary-background-color);
+  --color: var(--hop-Button-primary-color);
+  --border: var(--hop-Button-primary-border);
+  --spinner-color: var(--hop-Button-primary-spinner-color);
+}
+.Button-module__hop-Button--primary___naJ-v[data-hovered],
+.Button-module__hop-Button--primary___naJ-v[data-focus-visible] {
+  --background-color: var(--hop-Button-primary-background-color-hover);
+  --color: var(--hop-Button-primary-color-hover);
+  --border: var(--hop-Button-primary-border-hover);
+}
+.Button-module__hop-Button--primary___naJ-v[data-pressed] {
+  --background-color: var(--hop-Button-primary-background-color-pressed);
+  --color: var(--hop-Button-primary-color-pressed);
+  --border: var(--hop-Button-primary-border-pressed);
+}
+.Button-module__hop-Button--secondary___oFVxG {
+  --background-color: var(--hop-Button-secondary-background-color);
+  --color: var(--hop-Button-secondary-color);
+  --border: var(--hop-Button-secondary-border);
+  --spinner-color: var(--hop-Button-secondary-spinner-color);
+}
+.Button-module__hop-Button--secondary___oFVxG[data-hovered],
+.Button-module__hop-Button--secondary___oFVxG[data-focus-visible] {
+  --background-color: var(--hop-Button-secondary-background-color-hover);
+  --color: var(--hop-Button-secondary-color-hover);
+  --border: var(--hop-Button-secondary-border-hover);
+}
+.Button-module__hop-Button--secondary___oFVxG[data-pressed] {
+  --background-color: var(--hop-Button-secondary-background-color-pressed);
+  --color: var(--hop-Button-secondary-color-pressed);
+  --border: var(--hop-Button-secondary-border-pressed);
+}
+.Button-module__hop-Button--upsell___IrFm6 {
+  --background-color: var(--hop-Button-upsell-background-color);
+  --color: var(--hop-Button-upsell-color);
+  --border: var(--hop-Button-upsell-border);
+  --spinner-color: var(--hop-Button-upsell-spinner-color);
+}
+.Button-module__hop-Button--upsell___IrFm6[data-hovered],
+.Button-module__hop-Button--upsell___IrFm6[data-focus-visible] {
+  --background-color: var(--hop-Button-upsell-background-color-hover);
+  --color: var(--hop-Button-upsell-color-hover);
+  --border: var(--hop-Button-upsell-border-hover);
+}
+.Button-module__hop-Button--upsell___IrFm6[data-pressed] {
+  --background-color: var(--hop-Button-upsell-background-color-pressed);
+  --color: var(--hop-Button-upsell-color-pressed);
+  --border: var(--hop-Button-upsell-border-pressed);
+}
+.Button-module__hop-Button--danger___XvzVY {
+  --background-color: var(--hop-Button-danger-background-color);
+  --color: var(--hop-Button-danger-color);
+  --border: var(--hop-Button-danger-border);
+  --spinner-color: var(--hop-Button-danger-spinner-color);
+}
+.Button-module__hop-Button--danger___XvzVY[data-hovered],
+.Button-module__hop-Button--danger___XvzVY[data-focus-visible] {
+  --background-color: var(--hop-Button-danger-background-color-hover);
+  --color: var(--hop-Button-danger-color-hover);
+  --border: var(--hop-Button-danger-border-hover);
+}
+.Button-module__hop-Button--danger___XvzVY[data-pressed] {
+  --background-color: var(--hop-Button-danger-background-color-pressed);
+  --color: var(--hop-Button-danger-color-pressed);
+  --border: var(--hop-Button-danger-border-pressed);
+}
+.Button-module__hop-Button--ghost-primary___8QTaO {
+  --background-color: var(--hop-Button-ghost-primary-background-color);
+  --color: var(--hop-Button-ghost-primary-color);
+  --border: var(--hop-Button-ghost-primary-border);
+  --spinner-color: var(--hop-Button-ghost-primary-spinner-color);
+}
+.Button-module__hop-Button--ghost-primary___8QTaO[data-hovered],
+.Button-module__hop-Button--ghost-primary___8QTaO[data-focus-visible] {
+  --background-color: var(--hop-Button-ghost-primary-background-color-hover);
+  --color: var(--hop-Button-ghost-primary-color-hover);
+  --border: var(--hop-Button-ghost-primary-border-hover);
+  --text-underline: underline;
+}
+.Button-module__hop-Button--ghost-primary___8QTaO[data-pressed] {
+  --background-color: var(--hop-Button-ghost-primary-background-color-pressed);
+  --color: var(--hop-Button-ghost-primary-color-pressed);
+  --border: var(--hop-Button-ghost-primary-border-pressed);
+  --text-underline: underline;
+}
+.Button-module__hop-Button--ghost-secondary___VzDHp {
+  --background-color: var(--hop-Button-ghost-secondary-background-color);
+  --color: var(--hop-Button-ghost-secondary-color);
+  --border: var(--hop-Button-ghost-secondary-border);
+  --spinner-color: var(--hop-Button-ghost-secondary-spinner-color);
+}
+.Button-module__hop-Button--ghost-secondary___VzDHp[data-hovered],
+.Button-module__hop-Button--ghost-secondary___VzDHp[data-focus-visible] {
+  --background-color: var(--hop-Button-ghost-secondary-background-color-hover);
+  --color: var(--hop-Button-ghost-secondary-color-hover);
+  --border: var(--hop-Button-ghost-secondary-border-hover);
+  --text-underline: underline;
+}
+.Button-module__hop-Button--ghost-secondary___VzDHp[data-pressed] {
+  --background-color: var(--hop-Button-ghost-secondary-background-color-pressed);
+  --color: var(--hop-Button-ghost-secondary-color-pressed);
+  --border: var(--hop-Button-ghost-secondary-border-pressed);
+  --text-underline: underline;
+}
+.Button-module__hop-Button--ghost-danger___Tt4Mb {
+  --background-color: var(--hop-Button-ghost-danger-background-color);
+  --color: var(--hop-Button-ghost-danger-color);
+  --border: var(--hop-Button-ghost-danger-border);
+  --spinner-color: var(--hop-Button-ghost-danger-spinner-color);
+}
+.Button-module__hop-Button--ghost-danger___Tt4Mb[data-hovered],
+.Button-module__hop-Button--ghost-danger___Tt4Mb[data-focus-visible] {
+  --background-color: var(--hop-Button-ghost-danger-background-color-hover);
+  --color: var(--hop-Button-ghost-danger-color-hover);
+  --border: var(--hop-Button-ghost-danger-border-hover);
+  --text-underline: underline;
+}
+.Button-module__hop-Button--ghost-danger___Tt4Mb[data-pressed] {
+  --background-color: var(--hop-Button-ghost-danger-background-color-pressed);
+  --color: var(--hop-Button-ghost-danger-color-pressed);
+  --border: var(--hop-Button-ghost-danger-border-pressed);
+  --text-underline: underline;
+}
+.Button-module__hop-Button___wPmJq[data-focus-visible] {
+  outline: var(--hop-Button-outline-size) solid var(--hop-Button-focus-ring-color);
+}
+.Button-module__hop-Button___wPmJq[data-disabled],
+.Button-module__hop-Button___wPmJq[data-pending] {
+  cursor: not-allowed;
+}
+.Button-module__hop-Button___wPmJq[data-disabled] {
+  --background-color: var(--hop-Button-background-color-disabled);
+  --color: var(--hop-Button-color-disabled);
+  --border: var(--hop-Button-border-disabled);
+}
+.Button-module__hop-Button___wPmJq[class*=--ghost][data-disabled] {
+  --background-color: var(--hop-Button-ghost-background-color-disabled);
+  --color: var(--hop-Button-ghost-color-disabled);
+  --border: var(--hop-Button-ghost-border-disabled);
+}
+.Button-module__hop-Button--primary___naJ-v[data-pending] {
+  --background-color: var(--hop-Button-primary-background-color);
+  --color: var(--hop-Button-primary-color);
+  --border: var(--hop-Button-primary-border);
+}
+.Button-module__hop-Button--secondary___oFVxG[data-pending] {
+  --background-color: var(--hop-Button-secondary-background-color);
+  --color: var(--hop-Button-secondary-color);
+  --border: var(--hop-Button-secondary-border);
+}
+.Button-module__hop-Button--upsell___IrFm6[data-pending] {
+  --background-color: var(--hop-Button-upsell-background-color);
+  --color: var(--hop-Button-upsell-color);
+  --border: var(--hop-Button-upsell-border);
+}
+.Button-module__hop-Button--danger___XvzVY[data-pending] {
+  --background-color: var(--hop-Button-danger-background-color);
+  --color: var(--hop-Button-danger-color);
+  --border: var(--hop-Button-danger-border);
+}
+.Button-module__hop-Button--ghost-primary___8QTaO[data-pending] {
+  --background-color: var(--hop-Button-ghost-primary-background-color);
+  --color: var(--hop-Button-ghost-primary-color);
+  --border: var(--hop-Button-ghost-primary-border);
+  --text-underline: none;
+}
+.Button-module__hop-Button--ghost-secondary___VzDHp[data-pending] {
+  --background-color: var(--hop-Button-ghost-secondary-background-color);
+  --color: var(--hop-Button-ghost-secondary-color);
+  --border: var(--hop-Button-ghost-secondary-border);
+  --text-underline: none;
+}
+.Button-module__hop-Button--ghost-danger___Tt4Mb[data-pending] {
+  --background-color: var(--hop-Button-ghost-danger-background-color);
+  --color: var(--hop-Button-ghost-danger-color);
+  --border: var(--hop-Button-ghost-danger-border);
+  --text-underline: none;
+}
+.Button-module__hop-Button__Spinner___iKsuT {
+  position: absolute;
+  color: var(--spinner-color);
+}
+.Button-module__hop-Button__icon___psDEj,
+.Button-module__hop-Button__icon-list___uvHt- {
+  flex: 0 0 auto;
+  justify-self: end;
+  order: 1;
+}
+.Button-module__hop-Button__text___0u8jo {
+  user-select: none;
+  overflow: visible;
+  flex: 0 1 auto;
+  order: 2;
+  font-weight: var(--hop-font-weight-505);
+  text-decoration: var(--text-underline);
+  text-underline-offset: 0.125rem;
+  text-wrap: nowrap;
+}
+.Button-module__hop-Button__end-icon___oxOgt,
+.Button-module__hop-Button__end-icon-list___QmVeu {
+  flex: 0 0 auto;
+  order: 3;
+}
+.Button-module__hop-Button___wPmJq .Button-module__hop-Button__icon-list___uvHt-,
+.Button-module__hop-Button___wPmJq .Button-module__hop-Button__end-icon-list___QmVeu {
+  flex-wrap: nowrap;
+}
+.Button-module__hop-Button___wPmJq[data-pending] > *:not(.Button-module__hop-Button__Spinner___iKsuT) {
+  opacity: 0;
+}
+.LinkButton-module__hop-LinkButton___M4wZK {
+}
+.LinkButton-module__hop-LinkButton--fluid___iIoKs {
+}
+.LinkButton-module__hop-LinkButton--sm___W78xt {
+}
+.LinkButton-module__hop-LinkButton--icon-only___8T1M3 {
+}
+.LinkButton-module__hop-LinkButton--primary___FLpSn {
+}
+.LinkButton-module__hop-LinkButton--secondary___4NKJT {
+}
+.LinkButton-module__hop-LinkButton--upsell___iLQwk {
+}
+.LinkButton-module__hop-LinkButton--danger___X5jRa {
+}
+.LinkButton-module__hop-LinkButton--ghost-primary___bTZ-f {
+}
+.LinkButton-module__hop-LinkButton--ghost-secondary___PTeFl {
+}
+.LinkButton-module__hop-LinkButton--ghost-danger___0cFuF {
+}
+.LinkButton-module__hop-LinkButton__Spinner___Ebi5W {
+}
+.LinkButton-module__hop-LinkButton__icon___J-uZf,
+.LinkButton-module__hop-LinkButton__icon-list___JrB3C {
+}
+.LinkButton-module__hop-LinkButton__text___ecdzj {
+}
+.LinkButton-module__hop-LinkButton__end-icon___M0ZLN,
+.LinkButton-module__hop-LinkButton__end-icon-list___50ya4 {
+}
+.LinkButton-module__hop-LinkButton___M4wZK .LinkButton-module__hop-LinkButton__icon-list___JrB3C,
+.LinkButton-module__hop-LinkButton___M4wZK .LinkButton-module__hop-LinkButton__end-icon-list___50ya4 {
+  flex-wrap: nowrap;
+}

package/dist/buttons/src/LinkButton.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { StyledComponentProps, ResponsiveProp } from '@hopper-ui/styled-system';
+import { LinkProps } from 'react-aria-components';
+import { B as ButtonVariant, a as ButtonSize } from '../../types-CVCUJ7un.js';
+
+declare const GlobalLinkButtonCssSelector = "hop-LinkButton";
+interface LinkButtonProps extends StyledComponentProps<LinkProps> {
+    /**
+     * The visual style of the button.
+     * @default "primary"
+     */
+    variant?: ButtonVariant;
+    /**
+     * A button can vary in size.
+     * @default "md"
+     */
+    size?: ResponsiveProp<ButtonSize>;
+    /**
+     * Whether or not the button takes up the width of its container.
+     */
+    isFluid?: ResponsiveProp<boolean>;
+}
+/**
+ * A LinkButton merges the functionality of a link with the appearance of a button, providing a user-friendly way to direct users to other pages.
+ * [View Documentation](TODO)
+ *
+ */
+declare const _LinkButton: react.ForwardRefExoticComponent<LinkButtonProps & react.RefAttributes<HTMLAnchorElement>>;
+
+export { GlobalLinkButtonCssSelector, _LinkButton as LinkButton, type LinkButtonProps };

package/dist/buttons/src/LinkButton.js

@@ -0,0 +1,21 @@
+export { GlobalLinkButtonCssSelector, _LinkButton as LinkButton } from '../../chunk-5YJ67DFM.js';
+import '../../chunk-H5YTU3U7.js';
+import '../../chunk-3UQFC2NQ.js';
+import '../../chunk-DHVVYSLB.js';
+import '../../chunk-BPHBGKEP.js';
+import '../../chunk-ZWU6DRRZ.js';
+import '../../chunk-LJXTJRSB.js';
+import '../../chunk-OA3QBRFE.js';
+import '../../chunk-HWO7TXDE.js';
+import '../../chunk-TXZ6BMFR.js';
+import '../../chunk-QCA3ZR56.js';
+import '../../chunk-TFVDF4YH.js';
+import '../../chunk-JTX57GMF.js';
+import '../../chunk-WPNVVGFW.js';
+import '../../chunk-KSVVXFS7.js';
+import '../../chunk-X6SER3TZ.js';
+import '../../chunk-HXI3MEEK.js';
+import '../../chunk-M36KANKC.js';
+import '../../chunk-65JPI4FL.js';
+import '../../chunk-KVDXQMWI.js';
+import '../../chunk-JSBRDJBE.js';