@hopper-ui/components 0.1.0 → 1.0.0

package/dist/chunk-ME3RBGOT.js

@@ -0,0 +1,91 @@
+import { SwitchContext } from './chunk-YHBJAXUY.js';
+import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { _Text } from './chunk-M6UHXS6K.js';
+import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
+import { TextContext } from './chunk-OE5BLFZI.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { IconListContext } from './chunk-DHVVYSLB.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { IconContext } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, Switch as Switch$1 } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// css-module:./Switch.module.css#css-module
+var Switch_module_default = { "hop-Switch": "Switch-module__hop-Switch___A9t3N", "hop-Switch--sm": "Switch-module__hop-Switch--sm___zmqQy", "hop-Switch--md": "Switch-module__hop-Switch--md___wJ5dn", "hop-Switch__indicator": "Switch-module__hop-Switch__indicator___TkQTl", "hop-Switch__text": "Switch-module__hop-Switch__text___PidAG", "hop-Switch__icon-list": "Switch-module__hop-Switch__icon-list___tkie7", "hop-Switch__icon": "Switch-module__hop-Switch__icon___kOrAo" };
+var GlobalSwitchCssSelector = "hop-Switch";
+function Switch(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, SwitchContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children: childrenProp,
+    size: sizeProp = "md",
+    style: styleProp,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalSwitchCssSelector,
+    cssModule(
+      Switch_module_default,
+      "hop-Switch",
+      size
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const children = composeRenderProps(childrenProp, (prev) => {
+    if (prev && isTextOnlyChildren(prev)) {
+      return /* @__PURE__ */ jsx(_Text, { children: prev });
+    }
+    return prev;
+  });
+  return /* @__PURE__ */ jsx(
+    Switch$1,
+    {
+      ref,
+      className: classNames,
+      style,
+      ...otherProps,
+      children: (switchProps) => {
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: Switch_module_default["hop-Switch__indicator"] }),
+          /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsx(
+            SlotProvider,
+            {
+              values: [
+                [TextContext, {
+                  className: Switch_module_default["hop-Switch__text"],
+                  size
+                }],
+                [IconListContext, {
+                  className: Switch_module_default["hop-Switch__icon-list"],
+                  size
+                }],
+                [IconContext, {
+                  className: Switch_module_default["hop-Switch__icon"],
+                  size
+                }]
+              ],
+              children: children(switchProps)
+            }
+          ) })
+        ] });
+      }
+    }
+  );
+}
+var _Switch = forwardRef(Switch);
+_Switch.displayName = "Switch";
+
+export { GlobalSwitchCssSelector, _Switch };

package/dist/chunk-N7YDPVZL.js

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

package/dist/chunk-NH3IVMXB.js

@@ -0,0 +1,43 @@
+import { useMemo } from 'react';
+
+// src/utils/src/useRenderProps.ts
+function useRenderProps(props) {
+  const {
+    className,
+    style,
+    children,
+    defaultClassName = void 0,
+    defaultChildren = void 0,
+    defaultStyle,
+    values
+  } = props;
+  return useMemo(() => {
+    let computedClassName;
+    let computedStyle;
+    let computedChildren;
+    if (typeof className === "function") {
+      computedClassName = className({ ...values, defaultClassName });
+    } else {
+      computedClassName = className;
+    }
+    if (typeof style === "function") {
+      computedStyle = style({ ...values, defaultStyle: defaultStyle || {} });
+    } else {
+      computedStyle = style;
+    }
+    if (typeof children === "function") {
+      computedChildren = children({ ...values, defaultChildren });
+    } else if (children == null) {
+      computedChildren = defaultChildren;
+    } else {
+      computedChildren = children;
+    }
+    return {
+      className: computedClassName != null ? computedClassName : defaultClassName,
+      style: computedStyle || defaultStyle ? { ...defaultStyle, ...computedStyle } : void 0,
+      children: computedChildren != null ? computedChildren : defaultChildren
+    };
+  }, [className, style, children, defaultClassName, defaultChildren, defaultStyle, values]);
+}
+
+export { useRenderProps };

package/dist/chunk-NKHMUPAP.js

@@ -0,0 +1,43 @@
+import { RadioListContext } from './chunk-A7TZHALP.js';
+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';
+
+var GlobalRadioListCssSelector = "hop-RadioList";
+function RadioList(props, ref) {
+  [props, ref] = useContextProps(props, ref, RadioListContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    style,
+    slot,
+    ...otherProps
+  } = ownProps;
+  const classNames = clsx(
+    className,
+    GlobalRadioListCssSelector,
+    stylingProps.className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...otherProps,
+      ref,
+      className: classNames,
+      style: mergedStyles,
+      slot: slot != null ? slot : void 0,
+      children
+    }
+  );
+}
+var _RadioList = forwardRef(RadioList);
+_RadioList.displayName = "RadioList";
+
+export { GlobalRadioListCssSelector, _RadioList };

package/dist/chunk-OHPGEHL3.js

@@ -0,0 +1,83 @@
+import { CheckboxFieldContext } from './chunk-ZGNK4GWA.js';
+import { CheckboxContext } from './chunk-2EAZPH3M.js';
+import { TextContext } from './chunk-OE5BLFZI.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useId } from 'react-aria';
+import { useContextProps } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./CheckboxField.module.css#css-module
+var CheckboxField_module_default = { "hop-CheckboxField": "CheckboxField-module__hop-CheckboxField___f3NFL", "hop-CheckboxField--sm": "CheckboxField-module__hop-CheckboxField--sm___Oar3u", "hop-CheckboxField--md": "CheckboxField-module__hop-CheckboxField--md___-64p5", "hop-CheckboxField__description": "CheckboxField-module__hop-CheckboxField__description___e59nn", "hop-CheckboxField__checkbox": "CheckboxField-module__hop-CheckboxField__checkbox___5zJo3" };
+var GlobalCheckboxFieldCssSelector = "hop-CheckboxField";
+var CheckboxToDescriptionSizeAdapter = {
+  sm: "xs",
+  md: "sm"
+};
+function CheckboxField(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, CheckboxFieldContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    isDisabled,
+    size: sizeProp = "md",
+    style,
+    slot,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const classNames = clsx(
+    className,
+    GlobalCheckboxFieldCssSelector,
+    cssModule(
+      CheckboxField_module_default,
+      "hop-CheckboxField",
+      size
+    ),
+    stylingProps.className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  const descriptionId = useId();
+  return /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [TextContext, {
+          id: descriptionId,
+          className: CheckboxField_module_default["hop-CheckboxField__description"],
+          size: CheckboxToDescriptionSizeAdapter[size]
+        }],
+        [CheckboxContext, {
+          className: CheckboxField_module_default["hop-CheckboxField__checkbox"],
+          size,
+          isDisabled,
+          "aria-describedby": descriptionId
+        }]
+      ],
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...otherProps,
+          ref,
+          className: classNames,
+          style: mergedStyles,
+          slot: slot != null ? slot : void 0,
+          "data-disabled": isDisabled,
+          children
+        }
+      )
+    }
+  );
+}
+var _CheckboxField = forwardRef(CheckboxField);
+_CheckboxField.displayName = "CheckboxField";
+
+export { GlobalCheckboxFieldCssSelector, _CheckboxField };

package/dist/chunk-VIHBOZVN.js

@@ -0,0 +1,92 @@
+import { RadioContext } from './chunk-FU5CCPLP.js';
+import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { _Text } from './chunk-M6UHXS6K.js';
+import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
+import { TextContext } from './chunk-OE5BLFZI.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { IconListContext } from './chunk-DHVVYSLB.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { BulletIcon, IconContext } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, Radio as Radio$1 } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// css-module:./Radio.module.css#css-module
+var Radio_module_default = { "hop-Radio": "Radio-module__hop-Radio___ixqBm", "hop-Radio--sm": "Radio-module__hop-Radio--sm___G0-gW", "hop-Radio--md": "Radio-module__hop-Radio--md___xRFTQ", "hop-Radio__icon": "Radio-module__hop-Radio__icon___wXYjp", "hop-Radio__icon-list": "Radio-module__hop-Radio__icon-list___VqAkj", "hop-Radio__box": "Radio-module__hop-Radio__box___LvVYK", "hop-Radio__bullet": "Radio-module__hop-Radio__bullet___7Sv97", "hop-Radio__text": "Radio-module__hop-Radio__text___FcEZE" };
+var GlobalRadioCssSelector = "hop-Radio";
+function Radio(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, RadioContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children: childrenProp,
+    size: sizeProp = "md",
+    style: styleProp,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalRadioCssSelector,
+    cssModule(
+      Radio_module_default,
+      "hop-Radio",
+      size
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const children = composeRenderProps(childrenProp, (prev) => {
+    if (prev && isTextOnlyChildren(prev)) {
+      return /* @__PURE__ */ jsx(_Text, { children: prev });
+    }
+    return prev;
+  });
+  return /* @__PURE__ */ jsx(
+    Radio$1,
+    {
+      ref,
+      className: classNames,
+      style,
+      ...otherProps,
+      children: (radioProps) => {
+        const radioIconClassName = Radio_module_default["hop-Radio__bullet"];
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: Radio_module_default["hop-Radio__box"], children: /* @__PURE__ */ jsx(BulletIcon, { size, className: radioIconClassName }) }),
+          /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsx(
+            SlotProvider,
+            {
+              values: [
+                [TextContext, {
+                  className: Radio_module_default["hop-Radio__text"],
+                  size
+                }],
+                [IconListContext, {
+                  className: Radio_module_default["hop-Radio__icon-list"],
+                  size
+                }],
+                [IconContext, {
+                  className: Radio_module_default["hop-Radio__icon"],
+                  size
+                }]
+              ],
+              children: children(radioProps)
+            }
+          ) })
+        ] });
+      }
+    }
+  );
+}
+var _Radio = forwardRef(Radio);
+_Radio.displayName = "Radio";
+
+export { GlobalRadioCssSelector, _Radio };

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-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-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-YWUIJ6ZQ.js

@@ -0,0 +1,83 @@
+import { SwitchFieldContext } from './chunk-H7VJS4MX.js';
+import { SwitchContext } from './chunk-YHBJAXUY.js';
+import { TextContext } from './chunk-OE5BLFZI.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useId } from 'react-aria';
+import { useContextProps } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./SwitchField.module.css#css-module
+var SwitchField_module_default = { "hop-SwitchField": "SwitchField-module__hop-SwitchField___REZnn", "hop-SwitchField--sm": "SwitchField-module__hop-SwitchField--sm___zhYuQ", "hop-SwitchField--md": "SwitchField-module__hop-SwitchField--md___rcmWy", "hop-SwitchField__description": "SwitchField-module__hop-SwitchField__description___N9E47", "hop-SwitchField__switch": "SwitchField-module__hop-SwitchField__switch___znvte" };
+var GlobalSwitchFieldCssSelector = "hop-SwitchField";
+var SwitchToDescriptionSizeAdapter = {
+  sm: "xs",
+  md: "sm"
+};
+function SwitchField(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, SwitchFieldContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    isDisabled,
+    size: sizeProp = "md",
+    style,
+    slot,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const classNames = clsx(
+    className,
+    GlobalSwitchFieldCssSelector,
+    cssModule(
+      SwitchField_module_default,
+      "hop-SwitchField",
+      size
+    ),
+    stylingProps.className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  const descriptionId = useId();
+  return /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [TextContext, {
+          id: descriptionId,
+          className: SwitchField_module_default["hop-SwitchField__description"],
+          size: SwitchToDescriptionSizeAdapter[size]
+        }],
+        [SwitchContext, {
+          className: SwitchField_module_default["hop-SwitchField__switch"],
+          size,
+          isDisabled,
+          "aria-describedby": descriptionId
+        }]
+      ],
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...otherProps,
+          ref,
+          className: classNames,
+          style: mergedStyles,
+          slot: slot != null ? slot : void 0,
+          "data-disabled": isDisabled,
+          children
+        }
+      )
+    }
+  );
+}
+var _SwitchField = forwardRef(SwitchField);
+_SwitchField.displayName = "SwitchField";
+
+export { GlobalSwitchFieldCssSelector, _SwitchField };

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-XQ3GUEBN.js → chunk-ZQEB3Y3X.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___eJ4Sl" };
 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-7QUHQYCR.js → chunk-ZWU6DRRZ.js}

@@ -1,6 +1,6 @@
 import { Children, isValidElement, Fragment } from 'react';
 
-// src/utils/src/is-text-only-children.ts
+// src/utils/src/isTextOnlyChildren.ts
 function isTextOnlyChildren(children) {
   const resolvedChildren = resolveChildren(children);
   return typeof resolvedChildren === "string" || Children.toArray(resolvedChildren).every((c) => !isValidElement(c));

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___-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/errorMessage/src/ErrorMessage.module.css/#css-module-data */
+.ErrorMessage-module__hop-ErrorMessage___ByQ5V {
+  --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___Z0oW9 {
+  flex: 0 0 auto;
+  align-self: flex-start;
+}