@hopper-ui/components 0.1.1 → 1.0.1

package/dist/chunk-SC4G54ML.js

@@ -0,0 +1,186 @@
+import { useSlot } from './chunk-H5YTU3U7.js';
+import { useLocalizedString } from './chunk-BPM4ETTB.js';
+import { useRenderProps } from './chunk-NH3IVMXB.js';
+import { ButtonContext } from './chunk-WMTWFKKP.js';
+import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
+import { _Spinner } from './chunk-G7RKLBFT.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { _Text } from './chunk-HUJ3PTM7.js';
+import { TextContext } from './chunk-OE5BLFZI.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { IconListContext } from './chunk-DHVVYSLB.js';
+import { IconContext } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { chain, filterDOMProps, useRouter, shouldClientNavigate } from '@react-aria/utils';
+import { forwardRef } from 'react';
+import { useFocusRing, useHover, useButton, mergeProps } from 'react-aria';
+import { useContextProps, ButtonContext as ButtonContext$1, composeRenderProps, DEFAULT_SLOT } from 'react-aria-components';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// css-module:./Button.module.css#css-module
+var Button_module_default = { "hop-Button": "Button-module__hop-Button___pJ-SR", "hop-Button--icon-only": "Button-module__hop-Button--icon-only___vCgE0", "hop-Button--fluid": "Button-module__hop-Button--fluid___Ap2-3", "hop-Button--sm": "Button-module__hop-Button--sm___wbnfe", "hop-Button--primary": "Button-module__hop-Button--primary___OEdwW", "hop-Button--md": "Button-module__hop-Button--md___QAIfm", "hop-Button--secondary": "Button-module__hop-Button--secondary___ZCS63", "hop-Button--upsell": "Button-module__hop-Button--upsell___E3SYs", "hop-Button--danger": "Button-module__hop-Button--danger___ZOfPR", "hop-Button--ghost-danger": "Button-module__hop-Button--ghost-danger___rYkpH", "hop-Button--ghost-secondary": "Button-module__hop-Button--ghost-secondary___zCDkm", "hop-Button--ghost-primary": "Button-module__hop-Button--ghost-primary___tnrgb", "hop-Button__Spinner": "Button-module__hop-Button__Spinner___O6HR8", "hop-Button__icon": "Button-module__hop-Button__icon___rLXPv", "hop-Button__icon-list": "Button-module__hop-Button__icon-list___RGTNp", "hop-Button__text": "Button-module__hop-Button__text___nIDoe", "hop-Button__end-icon": "Button-module__hop-Button__end-icon___-DwWE", "hop-Button__end-icon-list": "Button-module__hop-Button__end-icon-list___QHF2h" };
+var GlobalButtonCssSelector = "hop-Button";
+var additionalButtonHTMLAttributes = /* @__PURE__ */ new Set(["form", "formAction", "formEncType", "formMethod", "formNoValidate", "formTarget", "name", "value"]);
+function useSimulatedRACButton(props, ref) {
+  const { focusProps, isFocused, isFocusVisible } = useFocusRing(props);
+  const { hoverProps, isHovered } = useHover(props);
+  const ctx = props;
+  const elementType = props.href ? "a" : "button";
+  const { buttonProps, isPressed } = useButton({
+    ...props,
+    elementType,
+    isDisabled: props.isDisabled || props.isLoading
+  }, ref);
+  const state = {
+    isFocused,
+    isFocusVisible,
+    isHovered,
+    isPressed,
+    isDisabled: props.isDisabled || false
+  };
+  const mergedProps = {
+    ...mergeProps(buttonProps, focusProps, hoverProps),
+    "data-disabled": props.isDisabled || void 0,
+    "data-pressed": ctx.isPressed || isPressed || void 0,
+    "data-hovered": isHovered || void 0,
+    "data-focused": isFocused || void 0,
+    "data-focus-visible": isFocusVisible || void 0
+  };
+  return [mergedProps, state];
+}
+function useCreateRouterLinkClickEventHandler(props) {
+  const router = useRouter();
+  return (e) => {
+    if (!router.isNative && e.currentTarget instanceof HTMLAnchorElement && e.currentTarget.href && // If props are applied to a router Link component, it may have already prevented default.
+    !e.isDefaultPrevented() && shouldClientNavigate(e.currentTarget, e) && props.href) {
+      e.preventDefault();
+      router.open(e.currentTarget, e, props.href, props.routerOptions);
+    }
+  };
+}
+function Button(props, ref) {
+  var _a, _b;
+  [props, ref] = useContextProps(props, ref, ButtonContext);
+  [props, ref] = useContextProps(props, ref, ButtonContext$1);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const [{ onClick, ...buttonProps }, state] = useSimulatedRACButton(ownProps, ref);
+  const stringFormatter = useLocalizedString();
+  const {
+    className,
+    children: childrenProp,
+    size: sizeProp,
+    fluid: fluidProp,
+    variant = "primary",
+    isLoading,
+    style: styleProp,
+    ...otherProps
+  } = ownProps;
+  const [textRef, hasText] = useSlot();
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const fluid = (_b = useResponsiveValue(fluidProp)) != null ? _b : false;
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalButtonCssSelector,
+    cssModule(
+      Button_module_default,
+      "hop-Button",
+      variant,
+      size,
+      fluid && "fluid",
+      isLoading && "loading",
+      !hasText && "icon-only"
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const children = composeRenderProps(childrenProp, (prev) => {
+    if (isTextOnlyChildren(prev)) {
+      return /* @__PURE__ */ jsx(_Text, { children: prev });
+    }
+    return prev;
+  });
+  const renderProps = useRenderProps({
+    className: classNames,
+    style,
+    children,
+    values: state
+  });
+  const hasAriaLabel = !!buttonProps["aria-label"] || !!buttonProps["aria-labelledby"];
+  if (!hasText && !hasAriaLabel) {
+    console.warn("[hopper-ui] If you do not provide a text children, you must specify an aria-label for accessibility");
+  }
+  const handleClick = chain(
+    onClick,
+    useCreateRouterLinkClickEventHandler(props)
+  );
+  const As = props.href ? "a" : "button";
+  return /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [IconListContext, {
+          slots: {
+            [DEFAULT_SLOT]: {
+              size,
+              className: Button_module_default["hop-Button__icon-list"]
+            },
+            "end-icon": {
+              size,
+              className: Button_module_default["hop-Button__end-icon-list"]
+            }
+          }
+        }],
+        [IconContext, {
+          slots: {
+            [DEFAULT_SLOT]: {
+              size,
+              className: Button_module_default["hop-Button__icon"]
+            },
+            "end-icon": {
+              size,
+              className: Button_module_default["hop-Button__end-icon"]
+            }
+          }
+        }],
+        [TextContext, {
+          className: Button_module_default["hop-Button__text"],
+          size,
+          ref: textRef
+        }]
+      ],
+      children: /* @__PURE__ */ jsxs(
+        As,
+        {
+          ...filterDOMProps(otherProps, { propNames: additionalButtonHTMLAttributes }),
+          ...buttonProps,
+          ...renderProps,
+          onClick: handleClick,
+          ref,
+          slot: props.slot || void 0,
+          "data-loading": isLoading,
+          children: [
+            renderProps.children,
+            isLoading && /* @__PURE__ */ jsx(
+              _Spinner,
+              {
+                "aria-label": stringFormatter.format("Button.spinnerAriaLabel"),
+                size,
+                className: Button_module_default["hop-Button__Spinner"]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+var _Button = forwardRef(Button);
+_Button.displayName = "Button";
+
+export { GlobalButtonCssSelector, _Button };

package/dist/{chunk-CMJUZLSA.js → chunk-TRS7R4W3.js}

@@ -1,25 +1,25 @@
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { LabelContext } from './chunk-HVKOIMMW.js';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { useContextProps, Label as Label$1 } from 'react-aria-components';
-import clsx from 'clsx';
 import { jsx } from 'react/jsx-runtime';
 
-// src/Label/src/Label.module.css
-var Label_default = {};
+// css-module:./Label.module.css#css-module
+var Label_module_default = { "hop-Label": "Label-module__hop-Label___qOIKf", "hop-Label--xs": "Label-module__hop-Label--xs___YPM1S", "hop-Label--sm": "Label-module__hop-Label--sm___uUjjd", "hop-Label--md": "Label-module__hop-Label--md___q3H4q", "hop-Label--lg": "Label-module__hop-Label--lg___xJQna", "hop-Label--xl": "Label-module__hop-Label--xl___eXF1C", "hop-Label--2xl": "Label-module__hop-Label--2xl___E1Iq6", "hop-Label--inherit": "Label-module__hop-Label--inherit___zl7QA" };
 var GlobalLabelCssSelector = "hop-Label";
-var DefaultLabelSlot = "label";
 function Label(props, ref) {
-  [props, ref] = useContextProps({ ...props, slot: props.slot || DefaultLabelSlot }, ref, LabelContext);
+  var _a;
+  [props, ref] = useContextProps(props, ref, LabelContext);
   const { stylingProps, ...ownProps } = useStyledSystem(props);
   const { className, size: sizeProp, children, style, ...otherProps } = ownProps;
-  const size = useResponsiveValue(sizeProp != null ? sizeProp : "md");
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
   const classNames = clsx(
     className,
     GlobalLabelCssSelector,
     cssModule(
-      Label_default,
+      Label_module_default,
       "hop-Label",
       size
     ),

package/dist/chunk-VJQ7M2BK.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+// src/buttons/src/ButtonGroupContext.ts
+var ButtonGroupContext = createContext({});
+ButtonGroupContext.displayName = "ButtonGroupContext";
+
+export { ButtonGroupContext };

package/dist/chunk-VYNBJRJW.js

@@ -0,0 +1,101 @@
+import { ErrorMessageContext } from './chunk-ACVMW6YD.js';
+import { HelperMessageContext } from './chunk-ESVVLTEN.js';
+import { CheckboxFieldContext } from './chunk-ZGNK4GWA.js';
+import { CheckboxGroupContext } from './chunk-N7YDPVZL.js';
+import { CheckboxListContext } from './chunk-WDUQUPTE.js';
+import { CheckboxContext } from './chunk-2EAZPH3M.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { LabelContext } from './chunk-HVKOIMMW.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, CheckboxGroup as CheckboxGroup$1 } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./CheckboxGroup.module.css#css-module
+var CheckboxGroup_module_default = { "hop-CheckboxGroup": "CheckboxGroup-module__hop-CheckboxGroup___nUraE", "hop-CheckboxGroup--bordered": "CheckboxGroup-module__hop-CheckboxGroup--bordered___icoNN", "hop-CheckboxGroup--sm": "CheckboxGroup-module__hop-CheckboxGroup--sm___4RB5I", "hop-CheckboxGroup--md": "CheckboxGroup-module__hop-CheckboxGroup--md___txX1B", "hop-CheckboxGroup__label": "CheckboxGroup-module__hop-CheckboxGroup__label___fAya3", "hop-CheckboxGroup__list": "CheckboxGroup-module__hop-CheckboxGroup__list___EPjvT", "hop-CheckboxGroup__checkbox": "CheckboxGroup-module__hop-CheckboxGroup__checkbox___d2Pv-", "hop-CheckboxGroup__error-message": "CheckboxGroup-module__hop-CheckboxGroup__error-message___t04hF", "hop-CheckboxGroup__helper-message": "CheckboxGroup-module__hop-CheckboxGroup__helper-message___w-9RG" };
+var GlobalCheckboxGroupCssSelector = "hop-CheckboxGroup";
+function CheckboxGroup(props, ref) {
+  var _a, _b;
+  [props, ref] = useContextProps(props, ref, CheckboxGroupContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    isDisabled,
+    isInvalid,
+    orientation: orientationProp = "vertical",
+    size: sizeProp = "md",
+    style: styleProp,
+    variant = "borderless",
+    ...otherProps
+  } = ownProps;
+  const orientation = (_a = useResponsiveValue(orientationProp)) != null ? _a : "vertical";
+  const size = (_b = useResponsiveValue(sizeProp)) != null ? _b : "md";
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalCheckboxGroupCssSelector,
+    cssModule(
+      CheckboxGroup_module_default,
+      "hop-CheckboxGroup",
+      size,
+      variant
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  return /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [LabelContext, {
+          className: CheckboxGroup_module_default["hop-CheckboxGroup__label"],
+          size
+        }],
+        [CheckboxContext, {
+          className: CheckboxGroup_module_default["hop-CheckboxGroup__checkbox"],
+          size
+        }],
+        [CheckboxFieldContext, {
+          className: CheckboxGroup_module_default["hop-CheckboxGroup__checkbox"],
+          size,
+          isDisabled
+        }],
+        [CheckboxListContext, {
+          className: CheckboxGroup_module_default["hop-CheckboxGroup__list"]
+        }],
+        [ErrorMessageContext, {
+          className: CheckboxGroup_module_default["hop-CheckboxGroup__error-message"],
+          hideIcon: true
+        }],
+        [HelperMessageContext, {
+          className: CheckboxGroup_module_default["hop-CheckboxGroup__helper-message"],
+          hideIcon: true
+        }]
+      ],
+      children: /* @__PURE__ */ jsx(
+        CheckboxGroup$1,
+        {
+          ref,
+          className: classNames,
+          style,
+          isInvalid,
+          isDisabled,
+          "data-orientation": orientation,
+          ...otherProps,
+          children
+        }
+      )
+    }
+  );
+}
+var _CheckboxGroup = forwardRef(CheckboxGroup);
+_CheckboxGroup.displayName = "CheckboxGroup";
+
+export { GlobalCheckboxGroupCssSelector, _CheckboxGroup };

package/dist/chunk-WDUQUPTE.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+// src/checkbox/src/CheckboxListContext.ts
+var CheckboxListContext = createContext({});
+CheckboxListContext.displayName = "CheckboxListContext";
+
+export { CheckboxListContext };

package/dist/chunk-WTKIUAHI.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+// src/chip/src/ChipContext.ts
+var ChipContext = createContext({});
+ChipContext.displayName = "ChipContext";
+
+export { ChipContext };

package/dist/{chunk-A2IN7HC4.js → chunk-YFTLWL74.js}

@@ -1,24 +1,23 @@
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
-import { useContextProps } from 'react-aria-components';
-import { forwardRef } from 'react';
-import clsx from 'clsx';
-import { useStyledSystem } from '@hopper-ui/styled-system';
 import { IconContext } from '@hopper-ui/icons';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
-// src/IconList/src/IconList.module.css
-var IconList_default = {};
+// css-module:./IconList.module.css#css-module
+var IconList_module_default = { "hop-IconList": "IconList-module__hop-IconList___xoL0K" };
 var GlobalIconListCssSelector = "hop-IconList";
-var DefaultIconListSlot = "icon";
 function IconList(props, ref) {
-  [props, ref] = useContextProps({ ...props, slot: props.slot || DefaultIconListSlot }, ref, IconListContext);
+  [props, ref] = useContextProps(props, ref, IconListContext);
   const { stylingProps, ...ownProps } = useStyledSystem(props);
   const { children, style, className, slot, size, ...otherProps } = ownProps;
   const classNames = clsx(
     className,
     GlobalIconListCssSelector,
-    IconList_default["hop-IconList"],
+    IconList_module_default["hop-IconList"],
     stylingProps.className
   );
   const mergedStyles = {

package/dist/chunk-YHBJAXUY.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+// src/switch/src/SwitchContext.ts
+var SwitchContext = createContext({});
+SwitchContext.displayName = "SwitchContext";
+
+export { SwitchContext };

package/dist/chunk-YSQDPG26.js

@@ -0,0 +1,27 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+export { __commonJS, __toESM };

package/dist/chunk-ZGNK4GWA.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+// src/checkbox/src/CheckboxFieldContext.ts
+var CheckboxFieldContext = createContext({});
+CheckboxFieldContext.displayName = "CheckboxFieldContext";
+
+export { CheckboxFieldContext };

package/dist/chunk-ZUMAL5WB.js

@@ -0,0 +1,104 @@
+import { ChipContext } from './chunk-WTKIUAHI.js';
+import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
+import { _Text } from './chunk-HUJ3PTM7.js';
+import { TextContext } from './chunk-OE5BLFZI.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { IconListContext } from './chunk-DHVVYSLB.js';
+import { IconContext } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps, DEFAULT_SLOT } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./Chip.module.css#css-module
+var Chip_module_default = { "hop-Chip": "Chip-module__hop-Chip___ow5yy", "hop-Chip--xs": "Chip-module__hop-Chip--xs___y91c1", "hop-Chip--sm": "Chip-module__hop-Chip--sm___jdtD0", "hop-Chip--md": "Chip-module__hop-Chip--md___vOUpq", "hop-Chip--lg": "Chip-module__hop-Chip--lg___ksHhv", "hop-Chip--neutral": "Chip-module__hop-Chip--neutral___-l3Wj", "hop-Chip--progress": "Chip-module__hop-Chip--progress___mHQ8v", "hop-Chip--positive": "Chip-module__hop-Chip--positive___cd2-6", "hop-Chip--caution": "Chip-module__hop-Chip--caution___reN8y", "hop-Chip--negative": "Chip-module__hop-Chip--negative___VDivs", "hop-Chip--option1": "Chip-module__hop-Chip--option1___OUGGx", "hop-Chip--option2": "Chip-module__hop-Chip--option2___X--Uy", "hop-Chip--option3": "Chip-module__hop-Chip--option3___mEuhz", "hop-Chip--option4": "Chip-module__hop-Chip--option4___kSZqI", "hop-Chip--option5": "Chip-module__hop-Chip--option5___O9YoG", "hop-Chip--option6": "Chip-module__hop-Chip--option6___pAhUG", "hop-Chip--inactive": "Chip-module__hop-Chip--inactive___KcvEd", "hop-Chip--disabled": "Chip-module__hop-Chip--disabled___VXInB", "hop-Chip__icon": "Chip-module__hop-Chip__icon___4AD0Y", "hop-Chip__icon-list": "Chip-module__hop-Chip__icon-list___hyYls", "hop-Chip__text": "Chip-module__hop-Chip__text___ABDy4", "hop-Chip__end-icon": "Chip-module__hop-Chip__end-icon___98iKE", "hop-Chip__end-icon-list": "Chip-module__hop-Chip__end-icon-list___aiiqm" };
+var GlobalChipCssSelector = "hop-Chip";
+var ChipToTextSizeAdapter = {
+  xs: "xs",
+  sm: "xs",
+  md: "xs",
+  lg: "sm"
+};
+function Chip(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, ChipContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    size: sizeProp,
+    style,
+    slot,
+    variant = "neutral",
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const classNames = clsx(
+    className,
+    GlobalChipCssSelector,
+    cssModule(
+      Chip_module_default,
+      "hop-Chip",
+      size,
+      variant
+    ),
+    stylingProps.className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  const content = children && isTextOnlyChildren(children) ? /* @__PURE__ */ jsx(_Text, { children }) : children;
+  return /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [TextContext, {
+          className: Chip_module_default["hop-Chip__text"],
+          size: ChipToTextSizeAdapter[size]
+        }],
+        [IconListContext, {
+          slots: {
+            [DEFAULT_SLOT]: {
+              size: "sm",
+              className: Chip_module_default["hop-Chip__icon-list"]
+            },
+            "end-icon": {
+              size: "sm",
+              className: Chip_module_default["hop-Chip__end-icon-list"]
+            }
+          }
+        }],
+        [IconContext, {
+          slots: {
+            [DEFAULT_SLOT]: {
+              size: "sm",
+              className: Chip_module_default["hop-Chip__icon"]
+            },
+            "end-icon": {
+              size: "sm",
+              className: Chip_module_default["hop-Chip__end-icon"]
+            }
+          }
+        }]
+      ],
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          ...otherProps,
+          ref,
+          className: classNames,
+          style: mergedStyles,
+          slot: slot != null ? slot : void 0,
+          children: content
+        }
+      )
+    }
+  );
+}
+var _Chip = forwardRef(Chip);
+_Chip.displayName = "Chip";
+
+export { GlobalChipCssSelector, _Chip };

package/dist/errorMessage/src/ErrorMessage.css

@@ -0,0 +1,102 @@
+/* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/Text/src/Text.module.css/#css-module-data */
+.Text-module__hop-Text___eHjGr {
+  --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___eHjGr) {
+  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___6lQf3) {
+  --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___79uWV) {
+  --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___kaNdx) {
+  --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___DD3l0) {
+  --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___CU19-) {
+  --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___Zif3-) {
+  --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___NWdla) {
+  --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/errorMessage/src/ErrorMessage.module.css/#css-module-data */
+.ErrorMessage-module__hop-ErrorMessage___rzxzc {
+  --hop-ErrorMessage-color: var(--hop-danger-text-weak);
+  --hop-ErrorMessage-font-family: var(--hop-body-xs-font-family);
+  --hop-ErrorMessage-font-size: var(--hop-body-xs-font-size);
+  --hop-ErrorMessage-font-weight: var(--hop-body-xs-font-weight);
+  --hop-ErrorMessage-line-height: var(--hop-body-xs-line-height);
+  --hop-ErrorMessage-column-gap: var(--hop-space-inline-xs);
+  display: flex;
+  column-gap: var(--hop-ErrorMessage-column-gap);
+  align-items: center;
+  box-sizing: border-box;
+  font-family: var(--hop-ErrorMessage-font-family);
+  font-size: var(--hop-ErrorMessage-font-size);
+  font-weight: var(--hop-ErrorMessage-font-weight);
+  line-height: var(--hop-ErrorMessage-line-height);
+  color: var(--hop-ErrorMessage-color);
+}
+.ErrorMessage-module__hop-ErrorMessage__icon___XMlVC {
+  flex: 0 0 auto;
+  align-self: flex-start;
+}

package/dist/errorMessage/src/ErrorMessage.d.ts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { StyledComponentProps } from '@hopper-ui/styled-system';
+import { FieldErrorProps } from 'react-aria-components';
+import { TextProps } from '../../Text/src/Text.js';
+
+declare const GlobalErrorMessageCssSelector = "hop-ErrorMessage";
+interface ErrorMessageProps extends StyledComponentProps<FieldErrorProps>, Omit<TextProps, "style" | "className" | "children" | "color" | "content"> {
+    /**
+     * Whether or not to hide the error message icon.
+     */
+    hideIcon?: boolean;
+}
+/**
+ * An ErrorMessage displays validation errors for a form field.
+ *
+ * [View Documentation](TODO)
+ */
+declare const _ErrorMessage: react.ForwardRefExoticComponent<ErrorMessageProps & react.RefAttributes<HTMLSpanElement>>;
+
+export { _ErrorMessage as ErrorMessage, type ErrorMessageProps, GlobalErrorMessageCssSelector };

package/dist/errorMessage/src/ErrorMessage.js

@@ -0,0 +1,9 @@
+export { _ErrorMessage as ErrorMessage, GlobalErrorMessageCssSelector } from '../../chunk-3KIUEBO3.js';
+import '../../chunk-ACVMW6YD.js';
+import '../../chunk-NH3IVMXB.js';
+import '../../chunk-HUJ3PTM7.js';
+import '../../chunk-HXI3MEEK.js';
+import '../../chunk-OE5BLFZI.js';
+import '../../chunk-KVDXQMWI.js';
+import '../../chunk-M36KANKC.js';
+import '../../chunk-YSQDPG26.js';