@hopper-ui/components 0.1.1 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,115 @@
 # @hopper-ui/components
 
+## 1.0.0
+
+### Major Changes
+
+- c5c6b30: ## @hopper-ui/tokens
+
+  **Added**
+
+  | Token                                 |
+  | ------------------------------------- |
+  | danger-text-selected                  |
+  | danger-border-selected                |
+  | danger-icon-selected                  |
+  | danger-icon-weak-hover                |
+  | danger-icon-weak-press                |
+  | danger-surface-selected               |
+  | danger-surface-weak-hover             |
+  | danger-surface-weak-press             |
+  | danger-text-weak-hover                |
+  | danger-text-weak-press                |
+  | decorative-option5-surface-weak-hover |
+  | neutral-surface-weak-selected         |
+  | neutral-surface-weakest-selected      |
+  | neutral-border-selected               |
+  | neutral-icon-selected                 |
+  | neutral-icon-strong-hover             |
+  | neutral-icon-weak-press               |
+  | neutral-surface-selected              |
+  | neutral-text-weak-hover               |
+  | neutral-text-weak-press               |
+  | primary-border-selected               |
+  | primary-icon-selected                 |
+  | primary-surface-selected              |
+  | primary-surface-strong-selected       |
+  | primary-surface-weak-hover            |
+  | primary-surface-weak-press            |
+  | primary-text-selected                 |
+  | upsell-border-selected                |
+  | upsell-icon-selected                  |
+  | upsell-icon-hover                     |
+  | upsell-icon-weak-hover                |
+  | upsell-icon-weak-press                |
+  | upsell-surface-selected               |
+  | upsell-surface-weak-hover             |
+  | upsell-surface-weak-press             |
+  | upsell-text-selected                  |
+  | upsell-text-weak                      |
+  | upsell-text-weak-hover                |
+  | upsell-text-weak-press                |
+
+  **Renamed**
+
+  Use this as a reference to fix all breaking changes.
+
+  | Old Token name                | New Token name               |
+  | ----------------------------- | ---------------------------- |
+  | danger-border-active          | danger-border-press          |
+  | danger-icon-active            | danger-icon-press            |
+  | danger-text-active            | danger-text-press            |
+  | danger-surface-active         | danger-surface-press         |
+  | neutral-border-active         | neutral-border-press         |
+  | neutral-icon-active           | neutral-icon-press           |
+  | neutral-surface-active        | neutral-surface-press        |
+  | neutral-surface-weak-active   | neutral-surface-weak-press   |
+  | neutral-text-active           | neutral-text-press           |
+  | primary-border-active         | primary-border-press         |
+  | primary-icon-active           | primary-icon-press           |
+  | primary-surface-active        | primary-surface-press        |
+  | primary-text-active           | primary-text-press           |
+  | primary-surface-strong-active | primary-surface-strong-press |
+  | upsell-border-active          | upsell-border-press          |
+  | upsell-icon-active            | upsell-icon-press            |
+  | upsell-surface-active         | upsell-surface-press         |
+  | upsell-text-active            | upsell-text-press            |
+
+  **Updated**
+
+  | Token                        |
+  | ---------------------------- |
+  | danger-surface-hover         |
+  | danger-surface-strong        |
+  | danger-surface-strong-hover  |
+  | danger-text-weak             |
+  | status-progress-text         |
+  | status-progress-icon         |
+  | primary-surface-strong-hover |
+  | primary-text                 |
+  | primary-surface-hover        |
+  | upsell-surface-hover         |
+  | upsell-surface-weak          |
+  | upsell-text                  |
+  | upsell-icon                  |
+  | upsell-text-hover            |
+
+  ## @hopper-ui/components
+
+  - Added a press state to Links
+  - Added a press state to Buttons
+  - Added a press state to Checkbbox
+  - Added a press state to Switch
+  - Added a press state to Radio
+  - Added numerous tests to test Pressed States of components
+
+### Patch Changes
+
+- Updated dependencies [73037f3]
+- Updated dependencies [c5c6b30]
+  - @hopper-ui/icons@2.0.0
+  - @hopper-ui/styled-system@2.0.0
+
 ## 0.1.1
 
 ### Patch Changes

package/dist/HopperProvider/src/HopperProvider.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { StyledSystemProviderProps } from '@hopper-ui/styled-system';
+import { Href, RouterOptions } from '@react-types/shared';
 
 declare const GlobalHopperProviderCssSelector = "hop-HopperProvider";
 interface HopperProviderProps extends StyledSystemProviderProps {
@@ -10,8 +11,39 @@ interface HopperProviderProps extends StyledSystemProviderProps {
     locale?: string;
     /**
      * Set this up once in the root of your app, and any Hopper component with the href prop will automatically navigate using your router.
+     * This prop should be set to a function received from your router for performing a client side navigation programmatically.
+     * @example
+     * import {RouterProvider} from 'react-aria-components';
+     * import {useNavigate, useHref} from 'your-router';
+     *
+     * function App() {
+     *   let navigate = useNavigate();
+     *
+     *   return (
+     *     <RouterProvider navigate={navigate} useHref={useHref}>
+     *         // ...
+     *     </RouterProvider>
+     *   );
+     * }
      */
-    navigate?: (path: string) => void;
+    navigate?: (path: Href, routerOptions: RouterOptions | undefined) => void;
+    /**
+     * useHref is an optional prop that converts a router-specific href to a native HTML href, e.g. prepending a base path.
+     * @example
+     * import {RouterProvider} from 'react-aria-components';
+     * import {useNavigate, useHref} from 'your-router';
+     *
+     * function App() {
+     *   let navigate = useNavigate();
+     *
+     *   return (
+     *     <RouterProvider navigate={navigate} useHref={useHref}>
+     *         // ...
+     *     </RouterProvider>
+     *   );
+     * }
+     */
+    useHref?: (href: Href) => string;
 }
 /**
  * HopperProvider is required to be rendered at the root of your application. It is responsible for:

package/dist/HopperProvider/src/HopperProvider.js

@@ -1 +1,2 @@
-export { GlobalHopperProviderCssSelector, _HopperProvider as HopperProvider } from '../../chunk-YLDA2M2E.js';
+export { GlobalHopperProviderCssSelector, _HopperProvider as HopperProvider } from '../../chunk-ANVMQBBG.js';
+import '../../chunk-YSQDPG26.js';

package/dist/HopperProvider/src/index.d.ts

@@ -1,3 +1,4 @@
 export { GlobalHopperProviderCssSelector, HopperProvider, HopperProviderProps } from './HopperProvider.js';
 import 'react';
 import '@hopper-ui/styled-system';
+import '@react-types/shared';

package/dist/HopperProvider/src/index.js

@@ -1 +1,2 @@
-export { GlobalHopperProviderCssSelector, _HopperProvider as HopperProvider } from '../../chunk-YLDA2M2E.js';
+export { GlobalHopperProviderCssSelector, _HopperProvider as HopperProvider } from '../../chunk-ANVMQBBG.js';
+import '../../chunk-YSQDPG26.js';

package/dist/IconList/src/IconList.css

@@ -1,8 +1,8 @@
-/* src/IconList/src/IconList.module.css */
-.hop-IconList {
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/IconList/src/IconList.module.css/#css-module-data */
+.IconList-module__hop-IconList___eJ4Sl {
   --hop-IconList-gap: var(--hop-space-inline-xs);
-  box-sizing: border-box;
   display: flex;
-  flex-flow: wrap;
+  flex-wrap: wrap;
   gap: var(--hop-IconList-gap);
+  box-sizing: border-box;
 }

package/dist/IconList/src/IconList.js

@@ -1,3 +1,4 @@
-export { GlobalIconListCssSelector, _IconList as IconList } from '../../chunk-A2IN7HC4.js';
+export { GlobalIconListCssSelector, _IconList as IconList } from '../../chunk-ZQEB3Y3X.js';
 import '../../chunk-M36KANKC.js';
 import '../../chunk-DHVVYSLB.js';
+import '../../chunk-YSQDPG26.js';

package/dist/IconList/src/IconListContext.js

@@ -1 +1,2 @@
 export { IconListContext } from '../../chunk-DHVVYSLB.js';
+import '../../chunk-YSQDPG26.js';

package/dist/IconList/src/index.css

@@ -1,8 +1,8 @@
-/* src/IconList/src/IconList.module.css */
-.hop-IconList {
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/IconList/src/IconList.module.css/#css-module-data */
+.IconList-module__hop-IconList___eJ4Sl {
   --hop-IconList-gap: var(--hop-space-inline-xs);
-  box-sizing: border-box;
   display: flex;
-  flex-flow: wrap;
+  flex-wrap: wrap;
   gap: var(--hop-IconList-gap);
+  box-sizing: border-box;
 }

package/dist/IconList/src/index.js

@@ -1,3 +1,4 @@
-export { GlobalIconListCssSelector, _IconList as IconList } from '../../chunk-A2IN7HC4.js';
+export { GlobalIconListCssSelector, _IconList as IconList } from '../../chunk-ZQEB3Y3X.js';
 import '../../chunk-M36KANKC.js';
 export { IconListContext } from '../../chunk-DHVVYSLB.js';
+import '../../chunk-YSQDPG26.js';

package/dist/Label/src/Label.css

@@ -1,5 +1,5 @@
-/* src/Label/src/Label.module.css */
-.hop-Label {
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Label/src/Label.module.css/#css-module-data */
+.Label-module__hop-Label___sZV4v {
   --hop-Label-xs-font-size: var(--hop-body-xs-font-size);
   --hop-Label-xs-font-family: var(--hop-body-xs-font-family);
   --hop-Label-xs-font-weight: var(--hop-body-xs-font-weight);
@@ -29,49 +29,49 @@
   --hop-Label-inherit-size-font-weight: inherit;
   --hop-Label-inherit-size-line-height: inherit;
 }
-:where(.hop-Label) {
-  font-size: var(--font-size, --hop-Label-md-font-size);
+:where(.Label-module__hop-Label___sZV4v) {
   font-family: var(--font-family, --hop-Label-md-font-family);
+  font-size: var(--font-size, --hop-Label-md-font-size);
   font-weight: var(--font-weight, --hop-Label-md-font-weight);
   line-height: var(--line-height, --hop-Label-md-line-height);
 }
-:where(.hop-Label--xs) {
+:where(.Label-module__hop-Label--xs___7Flvr) {
   --font-size: var(--hop-Label-xs-font-size);
   --font-family: var(--hop-Label-xs-font-family);
   --font-weight: var(--hop-Label-xs-font-weight);
   --line-height: var(--hop-Label-xs-line-height);
 }
-:where(.hop-Label--sm) {
+:where(.Label-module__hop-Label--sm___q7-gY) {
   --font-size: var(--hop-Label-sm-font-size);
   --font-family: var(--hop-Label-sm-font-family);
   --font-weight: var(--hop-Label-sm-font-weight);
   --line-height: var(--hop-Label-sm-line-height);
 }
-:where(.hop-Label--md) {
+:where(.Label-module__hop-Label--md___ZxMc1) {
   --font-size: var(--hop-Label-md-font-size);
   --font-family: var(--hop-Label-md-font-family);
   --font-weight: var(--hop-Label-md-font-weight);
   --line-height: var(--hop-Label-md-line-height);
 }
-:where(.hop-Label--lg) {
+:where(.Label-module__hop-Label--lg___qnzoz) {
   --font-size: var(--hop-Label-lg-font-size);
   --font-family: var(--hop-Label-lg-font-family);
   --font-weight: var(--hop-Label-lg-font-weight);
   --line-height: var(--hop-Label-lg-line-height);
 }
-:where(.hop-Label--xl) {
+:where(.Label-module__hop-Label--xl___3pCXT) {
   --font-size: var(--hop-Label-xl-font-size);
   --font-family: var(--hop-Label-xl-font-family);
   --font-weight: var(--hop-Label-xl-font-weight);
   --line-height: var(--hop-Label-xl-line-height);
 }
-:where(.hop-Label--2xl) {
+:where(.Label-module__hop-Label--2xl___CuLU9) {
   --font-size: var(--hop-Label-2xl-font-size);
   --font-family: var(--hop-Label-2xl-font-family);
   --font-weight: var(--hop-Label-2xl-font-weight);
   --line-height: var(--hop-Label-2xl-line-height);
 }
-:where(.hop-Label--inherit) {
+:where(.Label-module__hop-Label--inherit___pCJ8C) {
   --font-size: var(--hop-Label-inherit-size-font-size);
   --font-family: var(--hop-Label-inherit-size-font-family);
   --font-weight: var(--hop-Label-inherit-size-font-weight);

package/dist/Label/src/Label.js

@@ -1,3 +1,4 @@
-export { GlobalLabelCssSelector, _Label as Label } from '../../chunk-CMJUZLSA.js';
+export { GlobalLabelCssSelector, _Label as Label } from '../../chunk-IYITZANI.js';
 import '../../chunk-KVDXQMWI.js';
 import '../../chunk-HVKOIMMW.js';
+import '../../chunk-YSQDPG26.js';

package/dist/Label/src/LabelContext.js

@@ -1 +1,2 @@
 export { LabelContext } from '../../chunk-HVKOIMMW.js';
+import '../../chunk-YSQDPG26.js';

package/dist/Label/src/index.css

@@ -1,5 +1,5 @@
-/* src/Label/src/Label.module.css */
-.hop-Label {
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Label/src/Label.module.css/#css-module-data */
+.Label-module__hop-Label___sZV4v {
   --hop-Label-xs-font-size: var(--hop-body-xs-font-size);
   --hop-Label-xs-font-family: var(--hop-body-xs-font-family);
   --hop-Label-xs-font-weight: var(--hop-body-xs-font-weight);
@@ -29,49 +29,49 @@
   --hop-Label-inherit-size-font-weight: inherit;
   --hop-Label-inherit-size-line-height: inherit;
 }
-:where(.hop-Label) {
-  font-size: var(--font-size, --hop-Label-md-font-size);
+:where(.Label-module__hop-Label___sZV4v) {
   font-family: var(--font-family, --hop-Label-md-font-family);
+  font-size: var(--font-size, --hop-Label-md-font-size);
   font-weight: var(--font-weight, --hop-Label-md-font-weight);
   line-height: var(--line-height, --hop-Label-md-line-height);
 }
-:where(.hop-Label--xs) {
+:where(.Label-module__hop-Label--xs___7Flvr) {
   --font-size: var(--hop-Label-xs-font-size);
   --font-family: var(--hop-Label-xs-font-family);
   --font-weight: var(--hop-Label-xs-font-weight);
   --line-height: var(--hop-Label-xs-line-height);
 }
-:where(.hop-Label--sm) {
+:where(.Label-module__hop-Label--sm___q7-gY) {
   --font-size: var(--hop-Label-sm-font-size);
   --font-family: var(--hop-Label-sm-font-family);
   --font-weight: var(--hop-Label-sm-font-weight);
   --line-height: var(--hop-Label-sm-line-height);
 }
-:where(.hop-Label--md) {
+:where(.Label-module__hop-Label--md___ZxMc1) {
   --font-size: var(--hop-Label-md-font-size);
   --font-family: var(--hop-Label-md-font-family);
   --font-weight: var(--hop-Label-md-font-weight);
   --line-height: var(--hop-Label-md-line-height);
 }
-:where(.hop-Label--lg) {
+:where(.Label-module__hop-Label--lg___qnzoz) {
   --font-size: var(--hop-Label-lg-font-size);
   --font-family: var(--hop-Label-lg-font-family);
   --font-weight: var(--hop-Label-lg-font-weight);
   --line-height: var(--hop-Label-lg-line-height);
 }
-:where(.hop-Label--xl) {
+:where(.Label-module__hop-Label--xl___3pCXT) {
   --font-size: var(--hop-Label-xl-font-size);
   --font-family: var(--hop-Label-xl-font-family);
   --font-weight: var(--hop-Label-xl-font-weight);
   --line-height: var(--hop-Label-xl-line-height);
 }
-:where(.hop-Label--2xl) {
+:where(.Label-module__hop-Label--2xl___CuLU9) {
   --font-size: var(--hop-Label-2xl-font-size);
   --font-family: var(--hop-Label-2xl-font-family);
   --font-weight: var(--hop-Label-2xl-font-weight);
   --line-height: var(--hop-Label-2xl-line-height);
 }
-:where(.hop-Label--inherit) {
+:where(.Label-module__hop-Label--inherit___pCJ8C) {
   --font-size: var(--hop-Label-inherit-size-font-size);
   --font-family: var(--hop-Label-inherit-size-font-family);
   --font-weight: var(--hop-Label-inherit-size-font-weight);

package/dist/Label/src/index.js

@@ -1,3 +1,4 @@
-export { GlobalLabelCssSelector, _Label as Label } from '../../chunk-CMJUZLSA.js';
+export { GlobalLabelCssSelector, _Label as Label } from '../../chunk-IYITZANI.js';
 import '../../chunk-KVDXQMWI.js';
 export { LabelContext } from '../../chunk-HVKOIMMW.js';
+import '../../chunk-YSQDPG26.js';

package/dist/Link/src/Link.css

@@ -0,0 +1,165 @@
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/IconList/src/IconList.module.css/#css-module-data */
+.IconList-module__hop-IconList___eJ4Sl {
+  --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/Text/src/Text.module.css/#css-module-data */
+.Text-module__hop-Text___-u1e- {
+  --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___-u1e-) {
+  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___P2Mlk) {
+  --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___DIgJn) {
+  --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___EBUtj) {
+  --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___Au1wj) {
+  --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___UoQSa) {
+  --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___Nxjf-) {
+  --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___WPX1D) {
+  --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/Link/src/Link.module.css/#css-module-data */
+.Link-module__hop-Link___pvGQC {
+  --hop-Link-border-radius: var(--hop-shape-rounded-sm);
+  --hop-Link-focus-ring-color: var(--hop-primary-border-focus);
+  --hop-Link-color-disabled: var(--hop-neutral-text-disabled);
+  --hop-Link-column-gap: var(--hop-space-inline-xs);
+  --hop-Link-primary-text-color: var(--hop-primary-text);
+  --hop-Link-primary-text-disabled-color: var(--hop-primary-text-disabled);
+  --hop-Link-primary-text-hover-color: var(--hop-primary-text-hover);
+  --hop-Link-primary-text-pressed-color: var(--hop-primary-text-press);
+  --hop-Link-neutral-text-color: var(--hop-neutral-text);
+  --hop-Link-neutral-text-disabled-color: var(--hop-neutral-text-disabled);
+  --hop-Link-neutral-text-hover-color: var(--hop-neutral-text-hover);
+  --hop-Link-neutral-text-pressed-color: var(--hop-neutral-text-press);
+  cursor: pointer;
+  display: inline-flex;
+  column-gap: var(--hop-Link-column-gap);
+  align-items: center;
+  box-sizing: border-box;
+  inline-size: fit-content;
+  text-decoration: none;
+  text-underline-offset: 0.125rem;
+  border-radius: var(--hop-Link-border-radius);
+  outline: none;
+  outline-offset: 0.125rem;
+}
+.Link-module__hop-Link___pvGQC[data-focus-visible] {
+  outline: 0.125rem solid var(--hop-Link-focus-ring-color);
+}
+.Link-module__hop-Link___pvGQC[data-disabled] {
+  cursor: default;
+}
+.Link-module__hop-Link--quiet___RRkch[data-focus-visible],
+.Link-module__hop-Link--quiet___RRkch[data-hovered] {
+  text-decoration: underline;
+}
+.Link-module__hop-Link___pvGQC:not(.Link-module__hop-Link--quiet___RRkch) {
+  text-decoration: underline;
+}
+.Link-module__hop-Link--primary___XGqPo {
+  color: var(--hop-Link-primary-text-color);
+}
+.Link-module__hop-Link--primary___XGqPo[data-disabled] {
+  color: var(--hop-Link-primary-text-disabled-color);
+}
+.Link-module__hop-Link--primary___XGqPo:not([data-disabled])[data-focus-visible],
+.Link-module__hop-Link--primary___XGqPo:not([data-disabled])[data-hovered] {
+  color: var(--hop-Link-primary-text-hover-color);
+}
+.Link-module__hop-Link--primary___XGqPo:not([data-disabled])[data-pressed] {
+  color: var(--hop-Link-primary-text-pressed-color);
+}
+.Link-module__hop-Link--secondary___VfX7X {
+  color: var(--hop-Link-neutral-text-color);
+}
+.Link-module__hop-Link--secondary___VfX7X[data-disabled] {
+  color: var(--hop-Link-neutral-text-disabled-color);
+}
+.Link-module__hop-Link--secondary___VfX7X:not([data-disabled])[data-focus-visible],
+.Link-module__hop-Link--secondary___VfX7X:not([data-disabled])[data-hovered] {
+  color: var(--hop-Link-neutral-text-hover-color);
+}
+.Link-module__hop-Link--secondary___VfX7X:not([data-disabled])[data-pressed] {
+  color: var(--hop-Link-neutral-text-pressed-color);
+}
+.Link-module__hop-Link__icon___ckEZL,
+.Link-module__hop-Link__icon-list___8jaym {
+  order: 2;
+}
+.Link-module__hop-Link__text___uXUoO {
+  order: 1;
+}
+.Link-module__hop-Link__start-icon___ZImUS,
+.Link-module__hop-Link__start-icon-list___yfs8D {
+  order: 0;
+}

package/dist/Link/src/Link.d.ts

@@ -0,0 +1,33 @@
+import * as react from 'react';
+import { StyledComponentProps, ResponsiveProp } from '@hopper-ui/styled-system';
+import { LinkProps as LinkProps$1 } from 'react-aria-components';
+
+declare const GlobalLinkCssSelector = "hop-Link";
+interface LinkProps extends StyledComponentProps<LinkProps$1> {
+    /**
+     * The visual style of the link.
+     * @default "primary"
+     */
+    variant?: "primary" | "secondary";
+    /**
+     * Size of the link.
+     * @default "inherit"
+     */
+    size?: ResponsiveProp<"inherit" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl">;
+    /**
+     * Whether the link should be displayed with a quiet style.
+     */
+    isQuiet?: boolean;
+    /**
+     * Whether the link should open in a new tab.
+     */
+    isExternal?: boolean;
+}
+/**
+ * Links allow users to navigate to a different location. They can be presented inline inside a paragraph, as standalone text or as an image.
+ *
+ * [View Documentation](TODO)
+ */
+declare const _Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
+
+export { GlobalLinkCssSelector, _Link as Link, type LinkProps };

package/dist/Link/src/Link.js

@@ -0,0 +1,11 @@
+export { GlobalLinkCssSelector, _Link as Link } from '../../chunk-I7AMDVGG.js';
+import '../../chunk-ZWU6DRRZ.js';
+import '../../chunk-4VVNSXIB.js';
+import '../../chunk-65JPI4FL.js';
+import '../../chunk-M6UHXS6K.js';
+import '../../chunk-HXI3MEEK.js';
+import '../../chunk-OE5BLFZI.js';
+import '../../chunk-M36KANKC.js';
+import '../../chunk-DHVVYSLB.js';
+import '../../chunk-KVDXQMWI.js';
+import '../../chunk-YSQDPG26.js';

package/dist/Link/src/LinkContext.d.ts

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

package/dist/Link/src/LinkContext.js

@@ -0,0 +1,2 @@
+export { LinkContext } from '../../chunk-4VVNSXIB.js';
+import '../../chunk-YSQDPG26.js';