@hopper-ui/components 1.4.7 → 1.4.9

package/dist/chunk-MS353K3B.js

@@ -0,0 +1,77 @@
+import { TileContext } from './chunk-JTNKUYE5.js';
+import { _Text } from './chunk-TEOQZH4R.js';
+import { TextContext } from './chunk-X6SER3TZ.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { CheckmarkIcon } from '@hopper-ui/icons';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, ToggleButton, Provider } from 'react-aria-components';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// css-module:./Tile.module.css#css-module
+var Tile_module_default = { "hop-Tile": "Tile-module__hop-Tile___R9DcA", "hop-Tile__icon": "Tile-module__hop-Tile__icon___Q0tJ2" };
+var GlobalTileCssSelector = "hop-Tile";
+var Tile = (props, ref) => {
+  [props, ref] = useContextProps(props, ref, TileContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children: childrenProp,
+    style,
+    isDisabled,
+    slot,
+    ...otherProps
+  } = ownProps;
+  const classNames = composeClassnameRenderProps(
+    GlobalTileCssSelector,
+    cssModule(
+      Tile_module_default,
+      "hop-Tile"
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = composeRenderProps(style, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const childrenFn = composeRenderProps(childrenProp, (prev) => {
+    return prev;
+  });
+  return /* @__PURE__ */ jsx(
+    ToggleButton,
+    {
+      ...otherProps,
+      isDisabled,
+      ref,
+      className: classNames,
+      style: mergedStyles,
+      slot: slot != null ? slot : void 0,
+      children: (renderProps) => {
+        const children = childrenFn(renderProps);
+        return /* @__PURE__ */ jsxs(
+          Provider,
+          {
+            values: [
+              [TextContext, {
+                size: "md",
+                className: Tile_module_default["hop-Tile__text"]
+              }]
+            ],
+            children: [
+              typeof children === "string" ? /* @__PURE__ */ jsx(_Text, { children }) : children,
+              /* @__PURE__ */ jsx(CheckmarkIcon, { className: Tile_module_default["hop-Tile__icon"] })
+            ]
+          }
+        );
+      }
+    }
+  );
+};
+var _Tile = forwardRef(Tile);
+_Tile.displayName = "Tile";
+
+export { GlobalTileCssSelector, _Tile };

package/dist/{chunk-OCG7CSY5.js → chunk-MYDMC5AL.js}

@@ -7,7 +7,7 @@ import { useContextProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Image.module.css#css-module
-var Image_module_default = { "hop-Image": "Image-module__hop-Image___1x3Fo", "hop-Image--rounded": "Image-module__hop-Image--rounded___YSBvP", "hop-Image--circular": "Image-module__hop-Image--circular___2afiF" };
+var Image_module_default = { "hop-Image": "Image-module__hop-Image___QtmRN", "hop-Image--rounded": "Image-module__hop-Image--rounded___qBegL", "hop-Image--circular": "Image-module__hop-Image--circular___qGQmX" };
 var GlobalImageCssSelector = "hop-Image";
 function Image(props, ref) {
   [props, ref] = useContextProps(props, ref, ImageContext);

package/dist/{chunk-WICGT2T5.js → chunk-NSFQDIGS.js}

@@ -7,7 +7,7 @@ import { useContextProps, Separator } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Divider.module.css#css-module
-var Divider_module_default = { "hop-Divider": "Divider-module__hop-Divider___NJThK", "hop-Divider--vertical": "Divider-module__hop-Divider--vertical___63Bm-" };
+var Divider_module_default = { "hop-Divider": "Divider-module__hop-Divider___a6tCB", "hop-Divider--vertical": "Divider-module__hop-Divider--vertical___q6q24" };
 var GlobalDividerCssSelector = "hop-Divider";
 function Divider(props, ref) {
   [props, ref] = useContextProps(props, ref, DividerContext);

package/dist/{chunk-DOYWH7O2.js → chunk-O4BGMHFN.js}

@@ -1,14 +1,14 @@
 import { useFontFaceReady } from './chunk-IU6XMS2X.js';
 import { TextAreaContext } from './chunk-MHQZXLKW.js';
 import { useTruncatedText } from './chunk-Z57VHYOF.js';
-import { _RemainingCharacterCount } from './chunk-MPCOEMN2.js';
-import { _InputGroup } from './chunk-2JXEPUMG.js';
-import { _HelperMessage } from './chunk-2DF25AEQ.js';
-import { _ErrorMessage } from './chunk-N3XC5CZP.js';
-import { _Label } from './chunk-PHQ6YPQQ.js';
-import { useFormProps } from './chunk-7EUXODLY.js';
-import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
+import { _RemainingCharacterCount } from './chunk-YYYKLACT.js';
+import { _InputGroup } from './chunk-RU2R4HRN.js';
+import { _HelperMessage } from './chunk-JHZLARBW.js';
+import { _ErrorMessage } from './chunk-M43P32S2.js';
+import { _Label } from './chunk-WTW6WMRY.js';
+import { useFormProps } from './chunk-I7VLBEP3.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { useStyledSystem, useResponsiveValue, useIsomorphicLayoutEffect } from '@hopper-ui/styled-system';
 import $670gB$react, { forwardRef, useContext, useState, useCallback, useRef, useMemo } from 'react';
@@ -79,7 +79,7 @@ function $b5e257d569688ac6$export$535bd6ca7f90a273() {
 }
 
 // css-module:./TextArea.module.css#css-module
-var TextArea_module_default = { "hop-TextArea": "TextArea-module__hop-TextArea___R2rzZ", "hop-TextArea--fluid": "TextArea-module__hop-TextArea--fluid___QLz0P", "hop-TextArea__Label": "TextArea-module__hop-TextArea__Label___Ks2KO", "hop-TextArea__prefix": "TextArea-module__hop-TextArea__prefix___ZPTAp", "hop-TextArea__InputGroup": "TextArea-module__hop-TextArea__InputGroup___PFycK", "hop-TextArea__RemainingCharacterCount": "TextArea-module__hop-TextArea__RemainingCharacterCount___uCjxU", "hop-TextArea__textarea": "TextArea-module__hop-TextArea__textarea___CK8JF", "hop-TextArea__ErrorMessage": "TextArea-module__hop-TextArea__ErrorMessage___67p6A", "hop-TextArea__HelperMessage": "TextArea-module__hop-TextArea__HelperMessage___Gifdy" };
+var TextArea_module_default = { "hop-TextArea": "TextArea-module__hop-TextArea___HRJaC", "hop-TextArea--fluid": "TextArea-module__hop-TextArea--fluid___yWvrM", "hop-TextArea__Label": "TextArea-module__hop-TextArea__Label___IkJVe", "hop-TextArea__prefix": "TextArea-module__hop-TextArea__prefix___yCWvd", "hop-TextArea__RemainingCharacterCount": "TextArea-module__hop-TextArea__RemainingCharacterCount___xIxHm", "hop-TextArea__InputGroup": "TextArea-module__hop-TextArea__InputGroup___7JcmJ", "hop-TextArea__ErrorMessage": "TextArea-module__hop-TextArea__ErrorMessage___Zt1yk", "hop-TextArea__HelperMessage": "TextArea-module__hop-TextArea__HelperMessage___Fowsg", "hop-TextArea__textarea": "TextArea-module__hop-TextArea__textarea___Om6nK", "hop-TextArea__textarea--with-character-count": "TextArea-module__hop-TextArea__textarea--with-character-count___bhxTQ", "hop-TextArea__textarea--sm": "TextArea-module__hop-TextArea__textarea--sm___4cfiJ" };
 var GlobalTextAreaCssSelector = "hop-TextArea";
 var DefaultMinimumTextAreaRows = 3;
 var pxToInt = (value) => {
@@ -112,7 +112,7 @@ function useCalculateRowHeight(input) {
   }, [input, fontsLoaded, isSSR]);
 }
 function TextArea(props, ref) {
-  var _a, _b;
+  var _a, _b, _c;
   const {
     inputRef: userProvidedInputRef = null,
     ...propsWithoutRef
@@ -121,13 +121,13 @@ function TextArea(props, ref) {
   props = useFormProps(props);
   const { stylingProps, ...ownProps } = useStyledSystem(props);
   const [characterCount, setCharacterCount] = useState(() => {
-    var _a2, _b2, _c, _d;
-    return (_d = (_c = (_a2 = props.value) == null ? void 0 : _a2.length) != null ? _c : (_b2 = props.defaultValue) == null ? void 0 : _b2.length) != null ? _d : 0;
+    var _a2, _b2, _c2, _d;
+    return (_d = (_c2 = (_a2 = props.value) == null ? void 0 : _a2.length) != null ? _c2 : (_b2 = props.defaultValue) == null ? void 0 : _b2.length) != null ? _d : 0;
   });
   const {
     className,
     style: styleProp,
-    size,
+    size: sizeProp,
     showCharacterCount,
     maxLength,
     placeholder,
@@ -155,6 +155,7 @@ function TextArea(props, ref) {
   const isFluid = (_a = useResponsiveValue(isFluidProp)) != null ? _a : false;
   const resizeMode = (_b = useResponsiveValue(resizeModeProp)) != null ? _b : "none";
   const overMaxLength = !!maxLength && characterCount > maxLength;
+  const size = (_c = useResponsiveValue(sizeProp)) != null ? _c : "md";
   const classNames = composeClassnameRenderProps(
     className,
     GlobalTextAreaCssSelector,
@@ -215,24 +216,35 @@ function TextArea(props, ref) {
     }
     adjustRows();
   }, [value, adjustRows]);
-  const { className: inputGroupClassName, inputClassName: inputGroupInputClassName, ...otherInputGroupProps } = inputGroupProps || {};
+  const { className: inputGroupClassName, ...otherInputGroupProps } = inputGroupProps != null ? inputGroupProps : {};
   const inputGroupClassNames = clsx(TextArea_module_default["hop-TextArea__InputGroup"], inputGroupClassName);
-  const inputGroupInputClassNames = clsx(TextArea_module_default["hop-TextArea__textarea"], inputGroupInputClassName);
+  const textAreaClassNames = cssModule(
+    TextArea_module_default,
+    "hop-TextArea__textarea",
+    size,
+    showCharacterCount && maxLength && "with-character-count"
+  );
   const { className: remainingCharacterCountClassName, ...otherRemainingCharacterCountProps } = remainingCharacterCountProps != null ? remainingCharacterCountProps : {};
   const remainingCharacterCountClassNames = clsx(TextArea_module_default["hop-TextArea__RemainingCharacterCount"], remainingCharacterCountClassName);
   const inputMarkup = /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsxs(
     _InputGroup,
     {
       isFluid: true,
-      size,
       className: inputGroupClassNames,
       isDisabled,
       isInvalid,
-      inputClassName: inputGroupInputClassNames,
-      inputType: "textarea",
       ...otherInputGroupProps,
       children: [
-        /* @__PURE__ */ jsx(TextArea$1, { ref: mergedTextAreaRef, placeholder, cols, rows }),
+        /* @__PURE__ */ jsx(
+          TextArea$1,
+          {
+            ref: mergedTextAreaRef,
+            placeholder,
+            cols,
+            rows,
+            className: textAreaClassNames
+          }
+        ),
         showCharacterCount && maxLength && /* @__PURE__ */ jsx(
           _RemainingCharacterCount,
           {

package/dist/{chunk-J6RDT7TX.js → chunk-O7ASYBWX.js}

@@ -1,11 +1,11 @@
 import { CheckboxFieldContext } from './chunk-ZGNK4GWA.js';
 import { CheckboxContext } from './chunk-2EAZPH3M.js';
-import { useFormProps } from './chunk-7EUXODLY.js';
-import { _Text } from './chunk-3JJL6GD6.js';
-import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
-import { useRenderProps } from './chunk-NH3IVMXB.js';
+import { useFormProps } from './chunk-I7VLBEP3.js';
+import { _Text } from './chunk-TEOQZH4R.js';
+import { useRenderProps } from './chunk-2NSUMKNH.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
+import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
 import { useSlotId } from '@react-aria/utils';
@@ -15,7 +15,7 @@ import { useContextProps, composeRenderProps } from 'react-aria-components';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // css-module:./CheckboxField.module.css#css-module
-var CheckboxField_module_default = { "hop-CheckboxField": "CheckboxField-module__hop-CheckboxField___fQbVm", "hop-CheckboxField--sm": "CheckboxField-module__hop-CheckboxField--sm___wIeNc", "hop-CheckboxField--md": "CheckboxField-module__hop-CheckboxField--md___QYoHL", "hop-CheckboxField__description": "CheckboxField-module__hop-CheckboxField__description___80Ckr", "hop-CheckboxField__checkbox": "CheckboxField-module__hop-CheckboxField__checkbox___Tr9Cu" };
+var CheckboxField_module_default = { "hop-CheckboxField": "CheckboxField-module__hop-CheckboxField___kub-e", "hop-CheckboxField--sm": "CheckboxField-module__hop-CheckboxField--sm___M0zRD", "hop-CheckboxField--md": "CheckboxField-module__hop-CheckboxField--md___NQ26D", "hop-CheckboxField__description": "CheckboxField-module__hop-CheckboxField__description___QJTyb", "hop-CheckboxField__checkbox": "CheckboxField-module__hop-CheckboxField__checkbox___fAzPI" };
 var GlobalCheckboxFieldCssSelector = "hop-CheckboxField";
 var CheckboxToDescriptionSizeAdapter = {
   sm: "xs",

package/dist/chunk-O7T4L4C5.js

@@ -0,0 +1,77 @@
+import { _BaseModal } from './chunk-PESGOSPX.js';
+import { CustomModalContext } from './chunk-LUO2HNXA.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, Dialog, OverlayTriggerStateContext, DialogTrigger } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./CustomModal.module.css#css-module
+var CustomModal_module_default = { "hop-CustomModal": "CustomModal-module__hop-CustomModal___UoQjS" };
+var GlobalCustomModalCssSelector = "hop-CustomModal";
+var CustomModal = (props, ref) => {
+  var _a;
+  [props, ref] = useContextProps(props, ref, CustomModalContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    style,
+    slot,
+    isDismissible = true,
+    isKeyboardDismissDisabled,
+    size: sizeProp,
+    overlayProps,
+    isOpen,
+    defaultOpen,
+    onOpenChange,
+    children: childrenProp,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const classNames = clsx(
+    GlobalCustomModalCssSelector,
+    cssModule(
+      CustomModal_module_default,
+      GlobalCustomModalCssSelector,
+      size.toLowerCase()
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...style,
+    ...stylingProps.style
+  };
+  const children = composeRenderProps(childrenProp, (prev) => {
+    return prev;
+  });
+  return /* @__PURE__ */ jsx(
+    _BaseModal,
+    {
+      ...overlayProps,
+      isOpen,
+      defaultOpen,
+      onOpenChange,
+      size,
+      isDismissable: isDismissible,
+      isKeyboardDismissDisabled,
+      children: /* @__PURE__ */ jsx(
+        Dialog,
+        {
+          ...otherProps,
+          ref,
+          className: classNames,
+          style: mergedStyles,
+          slot,
+          children: (renderProps) => /* @__PURE__ */ jsx(OverlayTriggerStateContext.Provider, { value: null, children: children(renderProps) })
+        }
+      )
+    }
+  );
+};
+var _CustomModal = forwardRef(CustomModal);
+_CustomModal.displayName = "CustomModal";
+var CustomModalTrigger = DialogTrigger;
+
+export { CustomModalTrigger, GlobalCustomModalCssSelector, _CustomModal };

package/dist/{chunk-HJXC5SRI.js → chunk-OKFJ545T.js}

@@ -1,5 +1,5 @@
 import { SpinnerContext } from './chunk-4ZYV2XLW.js';
-import { _Text } from './chunk-3JJL6GD6.js';
+import { _Text } from './chunk-TEOQZH4R.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
@@ -9,7 +9,7 @@ import { useContextProps, ProgressBar } from 'react-aria-components';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // css-module:./Spinner.module.css#css-module
-var Spinner_module_default = { "hop-Spinner": "Spinner-module__hop-Spinner___-bvVm", "spin": "Spinner-module__spin___EOl7q", "hop-Spinner--sm": "Spinner-module__hop-Spinner--sm___kALZ7", "hop-Spinner--md": "Spinner-module__hop-Spinner--md___toRLX", "hop-Spinner--lg": "Spinner-module__hop-Spinner--lg___vHSM8", "hop-Spinner__track": "Spinner-module__hop-Spinner__track___Boq34", "hop-Spinner__fill": "Spinner-module__hop-Spinner__fill___GD1Cj", "hop-Spinner__label": "Spinner-module__hop-Spinner__label___KPTGD" };
+var Spinner_module_default = { "hop-Spinner": "Spinner-module__hop-Spinner___6QAYc", "spin": "Spinner-module__spin___TpF-z", "hop-Spinner--sm": "Spinner-module__hop-Spinner--sm___RBQs1", "hop-Spinner--md": "Spinner-module__hop-Spinner--md___VUJX-", "hop-Spinner--lg": "Spinner-module__hop-Spinner--lg___tWDnE", "hop-Spinner__track": "Spinner-module__hop-Spinner__track___0oF9E", "hop-Spinner__fill": "Spinner-module__hop-Spinner__fill___Eouhn", "hop-Spinner__label": "Spinner-module__hop-Spinner__label___Xl3ga" };
 var GlobalSpinnerCssSelector = "hop-Spinner";
 var SpinnerToTextSizeAdapter = {
   sm: "xs",

package/dist/{chunk-YQLCOKBQ.js → chunk-OLY7SREJ.js}

@@ -1,10 +1,10 @@
 import { SwitchContext } from './chunk-YHBJAXUY.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
-import { ensureTextWrapper } from './chunk-4BXMSXYQ.js';
+import { ensureTextWrapper } from './chunk-W7UY3AN2.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
-import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
+import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { IconContext } from '@hopper-ui/icons';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
@@ -13,7 +13,7 @@ import { useContextProps, composeRenderProps, Switch as Switch$1 } from 'react-a
 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___GFIU2", "hop-Switch--sm": "Switch-module__hop-Switch--sm___7B0z4", "hop-Switch--md": "Switch-module__hop-Switch--md___hUERX", "hop-Switch__indicator": "Switch-module__hop-Switch__indicator___5lhrN", "hop-Switch__text": "Switch-module__hop-Switch__text___tAozH", "hop-Switch__icon-list": "Switch-module__hop-Switch__icon-list___MKfvE", "hop-Switch__icon": "Switch-module__hop-Switch__icon___f2ezJ" };
+var Switch_module_default = { "hop-Switch": "Switch-module__hop-Switch___DzGtJ", "hop-Switch--sm": "Switch-module__hop-Switch--sm___qucmN", "hop-Switch--md": "Switch-module__hop-Switch--md___-Vfnu", "hop-Switch__indicator": "Switch-module__hop-Switch__indicator___ZtdHg", "hop-Switch__text": "Switch-module__hop-Switch__text___TseVq", "hop-Switch__icon-list": "Switch-module__hop-Switch__icon-list___XPmfm", "hop-Switch__icon": "Switch-module__hop-Switch__icon___VhmVU" };
 var GlobalSwitchCssSelector = "hop-Switch";
 function Switch(props, ref) {
   var _a;

package/dist/chunk-PESGOSPX.js

@@ -0,0 +1,59 @@
+import { BaseModalContext } from './chunk-FLU4UPP6.js';
+import { _HopperProvider } from './chunk-NMKBUGSO.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useColorSchemeContext, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps, ModalOverlay, Modal } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./BaseModal.module.css#css-module
+var BaseModal_module_default = { "hop-BaseModal": "BaseModal-module__hop-BaseModal___LqXBi", "hop-BaseModal__modal": "BaseModal-module__hop-BaseModal__modal___wUK4L", "hop-BaseModal--image": "BaseModal-module__hop-BaseModal--image___X2n3t", "hop-BaseModal--entering": "BaseModal-module__hop-BaseModal--entering___ZjPB-", "hop-BaseModal--exiting": "BaseModal-module__hop-BaseModal--exiting___7ghxI", "hop-BaseModal--sm": "BaseModal-module__hop-BaseModal--sm___xo0X2", "hop-BaseModal--md": "BaseModal-module__hop-BaseModal--md___2oqMk", "hop-BaseModal--lg": "BaseModal-module__hop-BaseModal--lg___lUuDv", "hop-BaseModal--xl": "BaseModal-module__hop-BaseModal--xl___FSghE", "hop-BaseModal--fullscreen": "BaseModal-module__hop-BaseModal--fullscreen___w4VpB", "hop-BaseModal--fullscreentakeover": "BaseModal-module__hop-BaseModal--fullscreentakeover___NOaiS" };
+var GlobalBaseModalCssSelector = "hop-BaseModal";
+var BaseModal = (props, ref) => {
+  var _a;
+  [props, ref] = useContextProps(props, ref, BaseModalContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    style,
+    slot,
+    size: sizeProp,
+    children,
+    hasImage,
+    ...otherProps
+  } = ownProps;
+  const { colorScheme } = useColorSchemeContext();
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const classNames = (renderProps) => clsx(
+    GlobalBaseModalCssSelector,
+    cssModule(
+      BaseModal_module_default,
+      GlobalBaseModalCssSelector,
+      size.toLowerCase(),
+      renderProps.isEntering && "entering",
+      renderProps.isExiting && "exiting",
+      hasImage && "image"
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...style,
+    ...stylingProps.style
+  };
+  return /* @__PURE__ */ jsx(
+    ModalOverlay,
+    {
+      className: classNames,
+      style: mergedStyles,
+      slot,
+      ...otherProps,
+      children: /* @__PURE__ */ jsx(_HopperProvider, { colorScheme, withCssVariables: false, children: /* @__PURE__ */ jsx(Modal, { ...otherProps, ref, className: BaseModal_module_default["hop-BaseModal__modal"], children }) })
+    }
+  );
+};
+var _BaseModal = forwardRef(BaseModal);
+_BaseModal.displayName = "BaseModal";
+
+export { GlobalBaseModalCssSelector, _BaseModal };

package/dist/{chunk-OQFPMKF2.js → chunk-PFUFA75W.js}

@@ -1,22 +1,22 @@
 import { SelectContext } from './chunk-T24MBA34.js';
-import { _SelectValue } from './chunk-P5EIKUXO.js';
-import { _Popover } from './chunk-SV6RSWOR.js';
+import { _SelectValue } from './chunk-26I53B5Y.js';
+import { _Popover } from './chunk-ZNATFVK3.js';
 import { _Footer } from './chunk-VOZN65OL.js';
 import { _ListBoxSection } from './chunk-DZJSSJVJ.js';
-import { _ListBox } from './chunk-UICYQNAO.js';
-import { _ListBoxItem } from './chunk-5JYQWCE5.js';
-import { _HelperMessage } from './chunk-2DF25AEQ.js';
-import { _ErrorMessage } from './chunk-N3XC5CZP.js';
-import { _ToggleArrow } from './chunk-OIELLCFE.js';
-import { ensureTextWrapper } from './chunk-4BXMSXYQ.js';
-import { _Label } from './chunk-PHQ6YPQQ.js';
-import { useFormProps } from './chunk-7EUXODLY.js';
-import { BadgeContext } from './chunk-CQDLZ42T.js';
+import { _ListBox } from './chunk-MRKDMC6T.js';
+import { _ListBoxItem } from './chunk-V6IGV2A6.js';
+import { _HelperMessage } from './chunk-JHZLARBW.js';
+import { _ErrorMessage } from './chunk-M43P32S2.js';
+import { _ToggleArrow } from './chunk-HCYKOE75.js';
+import { ensureTextWrapper } from './chunk-W7UY3AN2.js';
+import { _Label } from './chunk-WTW6WMRY.js';
+import { useFormProps } from './chunk-I7VLBEP3.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
-import { ClearContainerSlots, ClearProviders } from './chunk-HXI3MEEK.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
+import { ClearContainerSlots, ClearProviders } from './chunk-HXI3MEEK.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
+import { BadgeContext } from './chunk-CQDLZ42T.js';
 import { IconContext } from '@hopper-ui/icons';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
 import { forwardRef } from 'react';
@@ -24,7 +24,7 @@ import { useContextProps, composeRenderProps, TextContext as TextContext$1, Butt
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./Select.module.css#css-module
-var Select_module_default = { "hop-Select": "Select-module__hop-Select___RIgsU", "hop-Select--fluid": "Select-module__hop-Select--fluid___RsZ0L", "hop-Select__label": "Select-module__hop-Select__label___AOw0b", "hop-Select__button": "Select-module__hop-Select__button___uq2B3", "hop-Select__button--sm": "Select-module__hop-Select__button--sm___epc1I", "hop-Select__button--md": "Select-module__hop-Select__button--md___2nI6u", "hop-Select__prefix": "Select-module__hop-Select__prefix___HWWAj", "hop-Select__button-icon": "Select-module__hop-Select__button-icon___JRd49", "hop-Select__helper-message": "Select-module__hop-Select__helper-message___0Bt-l", "hop-Select__error-message": "Select-module__hop-Select__error-message___lGnTa" };
+var Select_module_default = { "hop-Select": "Select-module__hop-Select___KVQHv", "hop-Select--fluid": "Select-module__hop-Select--fluid___lSzM2", "hop-Select__label": "Select-module__hop-Select__label___pshdj", "hop-Select__button": "Select-module__hop-Select__button___5rTKm", "hop-Select__button--sm": "Select-module__hop-Select__button--sm___ehRks", "hop-Select__button--md": "Select-module__hop-Select__button--md___BH0-y", "hop-Select__prefix": "Select-module__hop-Select__prefix___TAdOJ", "hop-Select__button-icon": "Select-module__hop-Select__button-icon___wKFHo", "hop-Select__helper-message": "Select-module__hop-Select__helper-message___RpCak", "hop-Select__error-message": "Select-module__hop-Select__error-message___nQVyx" };
 var GlobalSelectCssSelector = "hop-Select";
 function Select(props, ref) {
   var _a, _b, _c, _d;

package/dist/chunk-PH5BSJDK.js

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

package/dist/{chunk-IYRRO5H3.js → chunk-QHB7NUOZ.js}

@@ -1,6 +1,6 @@
 import { LinkContext } from './chunk-4VVNSXIB.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
-import { ensureTextWrapper } from './chunk-4BXMSXYQ.js';
+import { ensureTextWrapper } from './chunk-W7UY3AN2.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
@@ -12,7 +12,7 @@ import { useContextProps, composeRenderProps, DEFAULT_SLOT, Link as Link$1 } fro
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Link.module.css#css-module
-var Link_module_default = { "hop-Link": "Link-module__hop-Link___12JUU", "hop-Link--standalone": "Link-module__hop-Link--standalone___QtN5t", "hop-Link__text": "Link-module__hop-Link__text___RlhO5", "hop-Link--xs": "Link-module__hop-Link--xs___IWVhZ", "hop-Link--sm": "Link-module__hop-Link--sm___vAlpX", "hop-Link--md": "Link-module__hop-Link--md___znyIj", "hop-Link--lg": "Link-module__hop-Link--lg___zHm-N", "hop-Link--xl": "Link-module__hop-Link--xl___3EIcc", "hop-Link--2xl": "Link-module__hop-Link--2xl___UclJS", "hop-Link--quiet": "Link-module__hop-Link--quiet___zN4dU", "hop-Link--primary": "Link-module__hop-Link--primary___tW4rk", "hop-Link--secondary": "Link-module__hop-Link--secondary___7SPUI", "hop-Link__icon": "Link-module__hop-Link__icon___aXasm", "hop-Link__icon-list": "Link-module__hop-Link__icon-list___5FMKo", "hop-Link__start-icon": "Link-module__hop-Link__start-icon___gUeLe", "hop-Link__start-icon-list": "Link-module__hop-Link__start-icon-list___mH5Lf" };
+var Link_module_default = { "hop-Link": "Link-module__hop-Link___sCeWy", "hop-Link--standalone": "Link-module__hop-Link--standalone___mtN9Z", "hop-Link__text": "Link-module__hop-Link__text___YHRNC", "hop-Link--xs": "Link-module__hop-Link--xs___B-azq", "hop-Link--sm": "Link-module__hop-Link--sm___Hha6o", "hop-Link--md": "Link-module__hop-Link--md___kzxeS", "hop-Link--lg": "Link-module__hop-Link--lg___cfCm0", "hop-Link--xl": "Link-module__hop-Link--xl___6tp83", "hop-Link--2xl": "Link-module__hop-Link--2xl___yLrAg", "hop-Link--quiet": "Link-module__hop-Link--quiet___BRIBW", "hop-Link--primary": "Link-module__hop-Link--primary___DH6qz", "hop-Link--secondary": "Link-module__hop-Link--secondary___CzbnH", "hop-Link__icon": "Link-module__hop-Link__icon___6gm0X", "hop-Link__icon-list": "Link-module__hop-Link__icon-list___g56cl", "hop-Link__start-icon": "Link-module__hop-Link__start-icon___7Jjwz", "hop-Link__start-icon-list": "Link-module__hop-Link__start-icon-list___B4gCj" };
 var GlobalLinkCssSelector = "hop-Link";
 var LinkToIconSizeAdapter = {
   inherit: void 0,

package/dist/{chunk-LMATFHSS.js → chunk-R54ZMYQ4.js}

@@ -1,10 +1,10 @@
 import { useSlot } from './chunk-H5YTU3U7.js';
-import { _Spinner } from './chunk-HJXC5SRI.js';
+import { _Spinner } from './chunk-OKFJ545T.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
 import { ButtonContext } from './chunk-WMTWFKKP.js';
-import { ensureTextWrapper } from './chunk-4BXMSXYQ.js';
+import { ensureTextWrapper } from './chunk-W7UY3AN2.js';
 import { useLocalizedString } from './chunk-75DHKNW2.js';
-import { useFormProps } from './chunk-7EUXODLY.js';
+import { useFormProps } from './chunk-I7VLBEP3.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
@@ -17,7 +17,7 @@ import { useContextProps, composeRenderProps, DEFAULT_SLOT, Button as Button$1 }
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./Button.module.css#css-module
-var Button_module_default = { "hop-Button": "Button-module__hop-Button___XnpzX", "hop-Button--fluid": "Button-module__hop-Button--fluid___ZZXwq", "hop-Button--sm": "Button-module__hop-Button--sm___6jOD3", "hop-Button--md": "Button-module__hop-Button--md___3yl4O", "hop-Button--icon-only": "Button-module__hop-Button--icon-only___-VLNH", "hop-Button--primary": "Button-module__hop-Button--primary___5doCv", "hop-Button--secondary": "Button-module__hop-Button--secondary___p2tPu", "hop-Button--upsell": "Button-module__hop-Button--upsell___pbl2O", "hop-Button--danger": "Button-module__hop-Button--danger___D4nJ-", "hop-Button--ghost-primary": "Button-module__hop-Button--ghost-primary___WPu49", "hop-Button--ghost-secondary": "Button-module__hop-Button--ghost-secondary___M0eZA", "hop-Button--ghost-danger": "Button-module__hop-Button--ghost-danger___-Mvaw", "hop-Button__Spinner": "Button-module__hop-Button__Spinner___Bhn4b", "hop-Button__icon": "Button-module__hop-Button__icon___ShNZp", "hop-Button__icon-list": "Button-module__hop-Button__icon-list___dbXFP", "hop-Button__text": "Button-module__hop-Button__text___iwCeX", "hop-Button__end-icon": "Button-module__hop-Button__end-icon___4hJm7", "hop-Button__end-icon-list": "Button-module__hop-Button__end-icon-list___SXzot" };
+var Button_module_default = { "hop-Button": "Button-module__hop-Button___WdkSc", "hop-Button--fluid": "Button-module__hop-Button--fluid___WKkhM", "hop-Button--sm": "Button-module__hop-Button--sm___jIRK1", "hop-Button--md": "Button-module__hop-Button--md___xdwvA", "hop-Button--icon-only": "Button-module__hop-Button--icon-only___OcIIb", "hop-Button--primary": "Button-module__hop-Button--primary___BpoLJ", "hop-Button--secondary": "Button-module__hop-Button--secondary___0Am2U", "hop-Button--upsell": "Button-module__hop-Button--upsell___Wcium", "hop-Button--danger": "Button-module__hop-Button--danger___G7ebm", "hop-Button--ghost-primary": "Button-module__hop-Button--ghost-primary___YvRvt", "hop-Button--ghost-secondary": "Button-module__hop-Button--ghost-secondary___Dv7Ba", "hop-Button--ghost-danger": "Button-module__hop-Button--ghost-danger___KfaHx", "hop-Button__Spinner": "Button-module__hop-Button__Spinner___uLFFh", "hop-Button__icon": "Button-module__hop-Button__icon___kg2E7", "hop-Button__icon-list": "Button-module__hop-Button__icon-list___4RjGy", "hop-Button__text": "Button-module__hop-Button__text___iCLfv", "hop-Button__end-icon": "Button-module__hop-Button__end-icon___qlCLC", "hop-Button__end-icon-list": "Button-module__hop-Button__end-icon-list___1nrOq" };
 var GlobalButtonCssSelector = "hop-Button";
 function Button(props, ref) {
   var _a, _b;
@@ -62,7 +62,7 @@ function Button(props, ref) {
   const children = composeRenderProps(childrenProp, (prev) => {
     return ensureTextWrapper(prev);
   });
-  const { className: spinnerClassName, ...otherSpinnerProps } = spinnerProps || {};
+  const { className: spinnerClassName, ...otherSpinnerProps } = spinnerProps != null ? spinnerProps : {};
   const spinnerClassNames = clsx(Button_module_default["hop-Button__Spinner"], spinnerClassName);
   return /* @__PURE__ */ jsx(
     SlotProvider,

package/dist/chunk-RU2R4HRN.js

@@ -0,0 +1,73 @@
+import { InputGroupContext } from './chunk-6BFSSZCY.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { forwardRef, useContext } from 'react';
+import { useContextProps, FieldErrorContext, composeRenderProps, Group } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./InputGroup.module.css#css-module
+var InputGroup_module_default = { "hop-InputGroup": "InputGroup-module__hop-InputGroup___9rw5R", "hop-InputGroup--fluid": "InputGroup-module__hop-InputGroup--fluid___sKCvC" };
+var GlobalInputGroupCssSelector = "hop-InputGroup";
+function InputGroup(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, InputGroupContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    style: styleProp,
+    children,
+    isFluid: isFluidProp,
+    isInvalid,
+    ...otherProps
+  } = ownProps;
+  const isFluid = (_a = useResponsiveValue(isFluidProp)) != null ? _a : false;
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalInputGroupCssSelector,
+    cssModule(
+      InputGroup_module_default,
+      "hop-InputGroup",
+      isFluid && "fluid"
+    ),
+    stylingProps.className
+  );
+  const validation = useContext(FieldErrorContext);
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const handlePointerUp = (e) => {
+    var _a2;
+    if (e.pointerType !== "mouse" && !e.target.closest("button,input,textarea")) {
+      e.preventDefault();
+      (_a2 = e.currentTarget.querySelector("input")) == null ? void 0 : _a2.focus();
+    }
+  };
+  const handlePointerDown = (e) => {
+    var _a2;
+    if (e.pointerType === "mouse" && !e.target.closest("button,input,textarea")) {
+      e.preventDefault();
+      (_a2 = e.currentTarget.querySelector("input")) == null ? void 0 : _a2.focus();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Group,
+    {
+      isInvalid: (validation == null ? void 0 : validation.isInvalid) || isInvalid,
+      onPointerDown: handlePointerDown,
+      onPointerUp: handlePointerUp,
+      ref,
+      className: classNames,
+      style,
+      ...otherProps,
+      children
+    }
+  );
+}
+var _InputGroup = forwardRef(InputGroup);
+_InputGroup.displayName = "InputGroup";
+
+export { GlobalInputGroupCssSelector, _InputGroup };