@hopper-ui/components 0.0.10 → 0.1.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @hopper-ui/components
 
+## 0.1.0
+
+### Minor Changes
+
+- 93a1a16: Added Button, Grid, Inline, Flex, Stack, Label, Text, IconList, Spinner and localization
+
+### Patch Changes
+
+- Updated dependencies [93a1a16]
+  - @hopper-ui/icons@1.5.0
+
+## 0.0.11
+
+### Patch Changes
+
+- Updated dependencies [aa5d10b]
+  - @hopper-ui/styled-system@0.3.0
+
 ## 0.0.10
 
 ### Patch Changes

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

@@ -0,0 +1,26 @@
+import * as react from 'react';
+import { StyledSystemProviderProps } from '@hopper-ui/styled-system';
+
+declare const GlobalHopperProviderCssSelector = "hop-HopperProvider";
+interface HopperProviderProps extends StyledSystemProviderProps {
+    /**
+     * The The BCP47 language code for the locale.
+     * @example "en-US"
+    */
+    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.
+     */
+    navigate?: (path: string) => void;
+}
+/**
+ * HopperProvider is required to be rendered at the root of your application. It is responsible for:
+ * - Adding CSS variables to the document
+ * - Managing color scheme (light, dark, auto)
+ * - Optionally adding body styles to the document
+ *
+ * [View Documentation](TODO)
+ */
+declare const _HopperProvider: react.ForwardRefExoticComponent<Omit<HopperProviderProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+export { GlobalHopperProviderCssSelector, _HopperProvider as HopperProvider, type HopperProviderProps };

package/dist/HopperProvider/src/HopperProvider.js

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

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

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

package/dist/HopperProvider/src/index.js

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

package/dist/IconList/src/IconList.css

@@ -0,0 +1,8 @@
+/* src/IconList/src/IconList.module.css */
+.hop-iconList {
+  --hop-icon-list-component-gap: var(--hop-space-inline-xs);
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: wrap;
+  gap: var(--hop-icon-list-component-gap);
+}

package/dist/IconList/src/IconList.d.ts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import { StyledSystemProps, ResponsiveProp } from '@hopper-ui/styled-system';
+import { BaseComponentProps } from '../../utils/src/types.js';
+import '@react-types/shared';
+import 'react-aria-components';
+
+declare const GlobalIconListCssSelector = "hop-IconList";
+interface IconListProps extends StyledSystemProps, BaseComponentProps {
+    /**
+    * The size of the icon.
+    */
+    size?: ResponsiveProp<"sm" | "md" | "lg">;
+}
+/**
+ * A component that allows you to render a list of icons
+ *
+ * [View Documentation](TODO)
+ */
+declare const _IconList: react.ForwardRefExoticComponent<IconListProps & react.RefAttributes<HTMLSpanElement>>;
+
+export { GlobalIconListCssSelector, _IconList as IconList, type IconListProps };

package/dist/IconList/src/IconList.js

@@ -0,0 +1,3 @@
+export { GlobalIconListCssSelector, _IconList as IconList } from '../../chunk-XQ3GUEBN.js';
+import '../../chunk-M36KANKC.js';
+import '../../chunk-DHVVYSLB.js';

package/dist/IconList/src/IconListContext.d.ts

@@ -0,0 +1,10 @@
+import { IconListProps } from './IconList.js';
+import * as react from 'react';
+import { ContextValue } from 'react-aria-components';
+import '@hopper-ui/styled-system';
+import '../../utils/src/types.js';
+import '@react-types/shared';
+
+declare const IconListContext: react.Context<ContextValue<IconListProps, HTMLSpanElement>>;
+
+export { IconListContext };

package/dist/IconList/src/IconListContext.js

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

package/dist/IconList/src/index.css

@@ -0,0 +1,8 @@
+/* src/IconList/src/IconList.module.css */
+.hop-iconList {
+  --hop-icon-list-component-gap: var(--hop-space-inline-xs);
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: wrap;
+  gap: var(--hop-icon-list-component-gap);
+}

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

@@ -0,0 +1,7 @@
+export { GlobalIconListCssSelector, IconList, IconListProps } from './IconList.js';
+export { IconListContext } from './IconListContext.js';
+import 'react';
+import '@hopper-ui/styled-system';
+import '../../utils/src/types.js';
+import '@react-types/shared';
+import 'react-aria-components';

package/dist/IconList/src/index.js

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

package/dist/Label/src/Label.css

@@ -0,0 +1,79 @@
+/* src/Label/src/Label.module.css */
+.hop-label {
+  --hop-label-component-xs-font-size: var(--hop-body-xs-font-size);
+  --hop-label-component-xs-font-family: var(--hop-body-xs-font-family);
+  --hop-label-component-xs-font-weight: var(--hop-body-xs-font-weight);
+  --hop-label-component-xs-line-height: var(--hop-body-xs-line-height);
+  --hop-label-component-sm-font-size: var(--hop-body-sm-font-size);
+  --hop-label-component-sm-font-family: var(--hop-body-sm-font-family);
+  --hop-label-component-sm-font-weight: var(--hop-body-sm-font-weight);
+  --hop-label-component-sm-line-height: var(--hop-body-sm-line-height);
+  --hop-label-component-md-font-size: var(--hop-body-md-font-size);
+  --hop-label-component-md-font-family: var(--hop-body-md-font-family);
+  --hop-label-component-md-font-weight: var(--hop-body-md-font-weight);
+  --hop-label-component-md-line-height: var(--hop-body-md-line-height);
+  --hop-label-component-lg-font-size: var(--hop-body-lg-font-size);
+  --hop-label-component-lg-font-family: var(--hop-body-lg-font-family);
+  --hop-label-component-lg-font-weight: var(--hop-body-lg-font-weight);
+  --hop-label-component-lg-line-height: var(--hop-body-lg-line-height);
+  --hop-label-component-xl-font-size: var(--hop-body-xl-font-size);
+  --hop-label-component-xl-font-family: var(--hop-body-xl-font-family);
+  --hop-label-component-xl-font-weight: var(--hop-body-xl-font-weight);
+  --hop-label-component-xl-line-height: var(--hop-body-xl-line-height);
+  --hop-label-component-2xl-font-size: var(--hop-body-2xl-font-size);
+  --hop-label-component-2xl-font-family: var(--hop-body-2xl-font-family);
+  --hop-label-component-2xl-font-weight: var(--hop-body-2xl-font-weight);
+  --hop-label-component-2xl-line-height: var(--hop-body-2xl-line-height);
+  --hop-label-component-inherit-size-font-size: inherit;
+  --hop-label-component-inherit-size-font-family: inherit;
+  --hop-label-component-inherit-size-font-weight: inherit;
+  --hop-label-component-inherit-size-line-height: inherit;
+}
+:where(.hop-label) {
+  font-size: var(--font-size, --hop-label-component-md-font-size);
+  font-family: var(--font-family, --hop-label-component-md-font-family);
+  font-weight: var(--font-weight, --hop-label-component-md-font-weight);
+  line-height: var(--line-height, --hop-label-component-md-line-height);
+}
+:where(.hop-label--xs) {
+  --font-size: var(--hop-label-component-xs-font-size);
+  --font-family: var(--hop-label-component-xs-font-family);
+  --font-weight: var(--hop-label-component-xs-font-weight);
+  --line-height: var(--hop-label-component-xs-line-height);
+}
+:where(.hop-label--sm) {
+  --font-size: var(--hop-label-component-sm-font-size);
+  --font-family: var(--hop-label-component-sm-font-family);
+  --font-weight: var(--hop-label-component-sm-font-weight);
+  --line-height: var(--hop-label-component-sm-line-height);
+}
+:where(.hop-label--md) {
+  --font-size: var(--hop-label-component-md-font-size);
+  --font-family: var(--hop-label-component-md-font-family);
+  --font-weight: var(--hop-label-component-md-font-weight);
+  --line-height: var(--hop-label-component-md-line-height);
+}
+:where(.hop-label--lg) {
+  --font-size: var(--hop-label-component-lg-font-size);
+  --font-family: var(--hop-label-component-lg-font-family);
+  --font-weight: var(--hop-label-component-lg-font-weight);
+  --line-height: var(--hop-label-component-lg-line-height);
+}
+:where(.hop-label--xl) {
+  --font-size: var(--hop-label-component-xl-font-size);
+  --font-family: var(--hop-label-component-xl-font-family);
+  --font-weight: var(--hop-label-component-xl-font-weight);
+  --line-height: var(--hop-label-component-xl-line-height);
+}
+:where(.hop-label--2xl) {
+  --font-size: var(--hop-label-component-2xl-font-size);
+  --font-family: var(--hop-label-component-2xl-font-family);
+  --font-weight: var(--hop-label-component-2xl-font-weight);
+  --line-height: var(--hop-label-component-2xl-line-height);
+}
+:where(.hop-label--inherit) {
+  --font-size: var(--hop-label-component-inherit-size-font-size);
+  --font-family: var(--hop-label-component-inherit-size-font-family);
+  --font-weight: var(--hop-label-component-inherit-size-font-weight);
+  --line-height: var(--hop-label-component-inherit-size-line-height);
+}

package/dist/Label/src/Label.d.ts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import { StyledComponentProps, ResponsiveProp } from '@hopper-ui/styled-system';
+import { LabelProps as LabelProps$1 } from 'react-aria-components';
+
+declare const GlobalLabelCssSelector = "hop-Label";
+type RACLabelPropsToOmit = "elementType";
+interface LabelProps extends StyledComponentProps<Omit<LabelProps$1, RACLabelPropsToOmit>> {
+    /**
+     * The Typography Type Scale to use.
+     * @default "md"
+     */
+    size?: ResponsiveProp<"inherit" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl">;
+}
+/**
+ * A primitive label component matching Hopper's typography type scale.
+ *
+ * [View Documentation](TODO)
+ */
+declare const _Label: react.ForwardRefExoticComponent<LabelProps & react.RefAttributes<HTMLLabelElement>>;
+
+export { GlobalLabelCssSelector, _Label as Label, type LabelProps, type RACLabelPropsToOmit };

package/dist/Label/src/Label.js

@@ -0,0 +1,3 @@
+export { GlobalLabelCssSelector, _Label as Label } from '../../chunk-XCKF6EU7.js';
+import '../../chunk-6BEVZRUL.js';
+import '../../chunk-HVKOIMMW.js';

package/dist/Label/src/LabelContext.d.ts

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

package/dist/Label/src/LabelContext.js

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

package/dist/Label/src/index.css

@@ -0,0 +1,79 @@
+/* src/Label/src/Label.module.css */
+.hop-label {
+  --hop-label-component-xs-font-size: var(--hop-body-xs-font-size);
+  --hop-label-component-xs-font-family: var(--hop-body-xs-font-family);
+  --hop-label-component-xs-font-weight: var(--hop-body-xs-font-weight);
+  --hop-label-component-xs-line-height: var(--hop-body-xs-line-height);
+  --hop-label-component-sm-font-size: var(--hop-body-sm-font-size);
+  --hop-label-component-sm-font-family: var(--hop-body-sm-font-family);
+  --hop-label-component-sm-font-weight: var(--hop-body-sm-font-weight);
+  --hop-label-component-sm-line-height: var(--hop-body-sm-line-height);
+  --hop-label-component-md-font-size: var(--hop-body-md-font-size);
+  --hop-label-component-md-font-family: var(--hop-body-md-font-family);
+  --hop-label-component-md-font-weight: var(--hop-body-md-font-weight);
+  --hop-label-component-md-line-height: var(--hop-body-md-line-height);
+  --hop-label-component-lg-font-size: var(--hop-body-lg-font-size);
+  --hop-label-component-lg-font-family: var(--hop-body-lg-font-family);
+  --hop-label-component-lg-font-weight: var(--hop-body-lg-font-weight);
+  --hop-label-component-lg-line-height: var(--hop-body-lg-line-height);
+  --hop-label-component-xl-font-size: var(--hop-body-xl-font-size);
+  --hop-label-component-xl-font-family: var(--hop-body-xl-font-family);
+  --hop-label-component-xl-font-weight: var(--hop-body-xl-font-weight);
+  --hop-label-component-xl-line-height: var(--hop-body-xl-line-height);
+  --hop-label-component-2xl-font-size: var(--hop-body-2xl-font-size);
+  --hop-label-component-2xl-font-family: var(--hop-body-2xl-font-family);
+  --hop-label-component-2xl-font-weight: var(--hop-body-2xl-font-weight);
+  --hop-label-component-2xl-line-height: var(--hop-body-2xl-line-height);
+  --hop-label-component-inherit-size-font-size: inherit;
+  --hop-label-component-inherit-size-font-family: inherit;
+  --hop-label-component-inherit-size-font-weight: inherit;
+  --hop-label-component-inherit-size-line-height: inherit;
+}
+:where(.hop-label) {
+  font-size: var(--font-size, --hop-label-component-md-font-size);
+  font-family: var(--font-family, --hop-label-component-md-font-family);
+  font-weight: var(--font-weight, --hop-label-component-md-font-weight);
+  line-height: var(--line-height, --hop-label-component-md-line-height);
+}
+:where(.hop-label--xs) {
+  --font-size: var(--hop-label-component-xs-font-size);
+  --font-family: var(--hop-label-component-xs-font-family);
+  --font-weight: var(--hop-label-component-xs-font-weight);
+  --line-height: var(--hop-label-component-xs-line-height);
+}
+:where(.hop-label--sm) {
+  --font-size: var(--hop-label-component-sm-font-size);
+  --font-family: var(--hop-label-component-sm-font-family);
+  --font-weight: var(--hop-label-component-sm-font-weight);
+  --line-height: var(--hop-label-component-sm-line-height);
+}
+:where(.hop-label--md) {
+  --font-size: var(--hop-label-component-md-font-size);
+  --font-family: var(--hop-label-component-md-font-family);
+  --font-weight: var(--hop-label-component-md-font-weight);
+  --line-height: var(--hop-label-component-md-line-height);
+}
+:where(.hop-label--lg) {
+  --font-size: var(--hop-label-component-lg-font-size);
+  --font-family: var(--hop-label-component-lg-font-family);
+  --font-weight: var(--hop-label-component-lg-font-weight);
+  --line-height: var(--hop-label-component-lg-line-height);
+}
+:where(.hop-label--xl) {
+  --font-size: var(--hop-label-component-xl-font-size);
+  --font-family: var(--hop-label-component-xl-font-family);
+  --font-weight: var(--hop-label-component-xl-font-weight);
+  --line-height: var(--hop-label-component-xl-line-height);
+}
+:where(.hop-label--2xl) {
+  --font-size: var(--hop-label-component-2xl-font-size);
+  --font-family: var(--hop-label-component-2xl-font-family);
+  --font-weight: var(--hop-label-component-2xl-font-weight);
+  --line-height: var(--hop-label-component-2xl-line-height);
+}
+:where(.hop-label--inherit) {
+  --font-size: var(--hop-label-component-inherit-size-font-size);
+  --font-family: var(--hop-label-component-inherit-size-font-family);
+  --font-weight: var(--hop-label-component-inherit-size-font-weight);
+  --line-height: var(--hop-label-component-inherit-size-line-height);
+}

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

@@ -0,0 +1,5 @@
+export { GlobalLabelCssSelector, Label, LabelProps, RACLabelPropsToOmit } from './Label.js';
+export { LabelContext } from './LabelContext.js';
+import 'react';
+import '@hopper-ui/styled-system';
+import 'react-aria-components';

package/dist/Label/src/index.js

@@ -0,0 +1,3 @@
+export { GlobalLabelCssSelector, _Label as Label } from '../../chunk-XCKF6EU7.js';
+import '../../chunk-6BEVZRUL.js';
+export { LabelContext } from '../../chunk-HVKOIMMW.js';

package/dist/Spinner/src/Spinner.css

@@ -0,0 +1,148 @@
+/* src/Spinner/src/Spinner.module.css */
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.hop-spinner {
+  --hop-spinner-component-border-radius: var(--hop-shape-circle);
+  --hop-spinner-component-sm-wheel-size: 1rem;
+  --hop-spinner-component-md-wheel-size: 1.25rem;
+  --hop-spinner-component-lg-wheel-size: 1.5rem;
+  --hop-spinner-component-track-width: 0.125rem;
+  --hop-spinner-component-track-opacity: 0.2;
+  --hop-spinner-component-track-border: var(--hop-spinner-component-track-width) solid currentcolor;
+  --hop-spinner-component-fill-animation: spin .8s infinite linear;
+  --hop-spinner-component-fill-animation-reduced-motion-duration: 2s;
+  --hop-spinner-component-fill-border: var(--hop-spinner-component-track-width) solid transparent;
+  --hop-spinner-component-fill-border-inline-start: var(--hop-spinner-component-track-width) solid currentcolor;
+  --hop-spinner-component-label-margin-inline-start: var(--hop-space-inline-sm);
+  box-sizing: border-box;
+  display: grid;
+  grid-template-areas: "spinner label";
+  grid-template-columns: min-content auto;
+  align-items: center;
+}
+.hop-spinner--sm {
+  --width: var(--hop-spinner-component-sm-wheel-size);
+  --height: var(--hop-spinner-component-sm-wheel-size);
+}
+.hop-spinner--md {
+  --width: var(--hop-spinner-component-md-wheel-size);
+  --height: var(--hop-spinner-component-md-wheel-size);
+}
+.hop-spinner--lg {
+  --width: var(--hop-spinner-component-lg-wheel-size);
+  --height: var(--hop-spinner-component-lg-wheel-size);
+}
+.hop-spinner__track {
+  box-sizing: border-box;
+  inline-size: var(--width, --hop-spinner-component-md-wheel-size);
+  block-size: var(--height, --hop-spinner-component-md-wheel-size);
+  border-radius: var(--hop-spinner-component-border-radius);
+  border: var(--hop-spinner-component-track-border);
+  opacity: var(--hop-spinner-component-track-opacity);
+  grid-area: spinner;
+}
+.hop-spinner__fill {
+  box-sizing: border-box;
+  inline-size: var(--width, --hop-spinner-component-md-wheel-size);
+  block-size: var(--height, --hop-spinner-component-md-wheel-size);
+  border-radius: var(--hop-spinner-component-border-radius);
+  border: var( --hop-spinner-component-fill-border);
+  border-inline-start: var(--hop-spinner-component-fill-border-inline-start);
+  grid-area: spinner;
+  animation: var(--hop-spinner-component-fill-animation);
+}
+@media (prefers-reduced-motion: reduce) {
+  .hop-spinner__fill {
+    animation-duration: var(--hop-spinner-component-fill-animation-reduced-motion-duration);
+  }
+}
+.hop-spinner__label {
+  grid-area: label;
+  margin-inline-start: var(--hop-spinner-component-label-margin-inline-start);
+}
+
+/* src/Label/src/Label.module.css */
+.hop-label {
+  --hop-label-component-xs-font-size: var(--hop-body-xs-font-size);
+  --hop-label-component-xs-font-family: var(--hop-body-xs-font-family);
+  --hop-label-component-xs-font-weight: var(--hop-body-xs-font-weight);
+  --hop-label-component-xs-line-height: var(--hop-body-xs-line-height);
+  --hop-label-component-sm-font-size: var(--hop-body-sm-font-size);
+  --hop-label-component-sm-font-family: var(--hop-body-sm-font-family);
+  --hop-label-component-sm-font-weight: var(--hop-body-sm-font-weight);
+  --hop-label-component-sm-line-height: var(--hop-body-sm-line-height);
+  --hop-label-component-md-font-size: var(--hop-body-md-font-size);
+  --hop-label-component-md-font-family: var(--hop-body-md-font-family);
+  --hop-label-component-md-font-weight: var(--hop-body-md-font-weight);
+  --hop-label-component-md-line-height: var(--hop-body-md-line-height);
+  --hop-label-component-lg-font-size: var(--hop-body-lg-font-size);
+  --hop-label-component-lg-font-family: var(--hop-body-lg-font-family);
+  --hop-label-component-lg-font-weight: var(--hop-body-lg-font-weight);
+  --hop-label-component-lg-line-height: var(--hop-body-lg-line-height);
+  --hop-label-component-xl-font-size: var(--hop-body-xl-font-size);
+  --hop-label-component-xl-font-family: var(--hop-body-xl-font-family);
+  --hop-label-component-xl-font-weight: var(--hop-body-xl-font-weight);
+  --hop-label-component-xl-line-height: var(--hop-body-xl-line-height);
+  --hop-label-component-2xl-font-size: var(--hop-body-2xl-font-size);
+  --hop-label-component-2xl-font-family: var(--hop-body-2xl-font-family);
+  --hop-label-component-2xl-font-weight: var(--hop-body-2xl-font-weight);
+  --hop-label-component-2xl-line-height: var(--hop-body-2xl-line-height);
+  --hop-label-component-inherit-size-font-size: inherit;
+  --hop-label-component-inherit-size-font-family: inherit;
+  --hop-label-component-inherit-size-font-weight: inherit;
+  --hop-label-component-inherit-size-line-height: inherit;
+}
+:where(.hop-label) {
+  font-size: var(--font-size, --hop-label-component-md-font-size);
+  font-family: var(--font-family, --hop-label-component-md-font-family);
+  font-weight: var(--font-weight, --hop-label-component-md-font-weight);
+  line-height: var(--line-height, --hop-label-component-md-line-height);
+}
+:where(.hop-label--xs) {
+  --font-size: var(--hop-label-component-xs-font-size);
+  --font-family: var(--hop-label-component-xs-font-family);
+  --font-weight: var(--hop-label-component-xs-font-weight);
+  --line-height: var(--hop-label-component-xs-line-height);
+}
+:where(.hop-label--sm) {
+  --font-size: var(--hop-label-component-sm-font-size);
+  --font-family: var(--hop-label-component-sm-font-family);
+  --font-weight: var(--hop-label-component-sm-font-weight);
+  --line-height: var(--hop-label-component-sm-line-height);
+}
+:where(.hop-label--md) {
+  --font-size: var(--hop-label-component-md-font-size);
+  --font-family: var(--hop-label-component-md-font-family);
+  --font-weight: var(--hop-label-component-md-font-weight);
+  --line-height: var(--hop-label-component-md-line-height);
+}
+:where(.hop-label--lg) {
+  --font-size: var(--hop-label-component-lg-font-size);
+  --font-family: var(--hop-label-component-lg-font-family);
+  --font-weight: var(--hop-label-component-lg-font-weight);
+  --line-height: var(--hop-label-component-lg-line-height);
+}
+:where(.hop-label--xl) {
+  --font-size: var(--hop-label-component-xl-font-size);
+  --font-family: var(--hop-label-component-xl-font-family);
+  --font-weight: var(--hop-label-component-xl-font-weight);
+  --line-height: var(--hop-label-component-xl-line-height);
+}
+:where(.hop-label--2xl) {
+  --font-size: var(--hop-label-component-2xl-font-size);
+  --font-family: var(--hop-label-component-2xl-font-family);
+  --font-weight: var(--hop-label-component-2xl-font-weight);
+  --line-height: var(--hop-label-component-2xl-line-height);
+}
+:where(.hop-label--inherit) {
+  --font-size: var(--hop-label-component-inherit-size-font-size);
+  --font-family: var(--hop-label-component-inherit-size-font-family);
+  --font-weight: var(--hop-label-component-inherit-size-font-weight);
+  --line-height: var(--hop-label-component-inherit-size-line-height);
+}

package/dist/Spinner/src/Spinner.d.ts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import { StyledSystemProps, ResponsiveProp } from '@hopper-ui/styled-system';
+import { BaseComponentProps } from '../../utils/src/types.js';
+import '@react-types/shared';
+import 'react-aria-components';
+
+declare const GlobalSpinnerCssSelector = "hop-Spinner";
+interface SpinnerProps extends StyledSystemProps, BaseComponentProps {
+    /**
+     * What the Spinner's diameter should be.
+     */
+    size?: ResponsiveProp<"sm" | "md" | "lg">;
+}
+/**
+ * A spinner indicates that a part of the product is currently performing a task, and the duration of this process is unknown.
+ *
+ * [View Documentation](TODO)
+ */
+declare const _Spinner: react.ForwardRefExoticComponent<SpinnerProps & react.RefAttributes<HTMLDivElement>>;
+
+export { GlobalSpinnerCssSelector, _Spinner as Spinner, type SpinnerProps };

package/dist/Spinner/src/Spinner.js

@@ -0,0 +1,6 @@
+export { GlobalSpinnerCssSelector, _Spinner as Spinner } from '../../chunk-QIOYM2XJ.js';
+import '../../chunk-SEU4CGZD.js';
+import '../../chunk-4ZYV2XLW.js';
+import '../../chunk-XCKF6EU7.js';
+import '../../chunk-6BEVZRUL.js';
+import '../../chunk-HVKOIMMW.js';

package/dist/Spinner/src/SpinnerContext.d.ts

@@ -0,0 +1,10 @@
+import { SpinnerProps } from './Spinner.js';
+import * as react from 'react';
+import { ContextValue } from 'react-aria-components';
+import '@hopper-ui/styled-system';
+import '../../utils/src/types.js';
+import '@react-types/shared';
+
+declare const SpinnerContext: react.Context<ContextValue<SpinnerProps, HTMLDivElement>>;
+
+export { SpinnerContext };

package/dist/Spinner/src/SpinnerContext.js

@@ -0,0 +1 @@
+export { SpinnerContext } from '../../chunk-4ZYV2XLW.js';