@hopper-ui/components 1.3.4 → 1.3.6

package/dist/{chunk-C4X5PI6E.js → chunk-32QBNIEM.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___usqfr", "hop-Divider--vertical": "Divider-module__hop-Divider--vertical___CiCMz" };
+var Divider_module_default = { "hop-Divider": "Divider-module__hop-Divider___-S8TZ", "hop-Divider--vertical": "Divider-module__hop-Divider--vertical___oAdE6" };
 var GlobalDividerCssSelector = "hop-Divider";
 function Divider(props, ref) {
   [props, ref] = useContextProps(props, ref, DividerContext);

package/dist/{chunk-M5XA2PEG.js → chunk-3K2JRC5Y.js}

@@ -10,7 +10,7 @@ import { useContextProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./ButtonGroup.module.css#css-module
-var ButtonGroup_module_default = { "hop-ButtonGroup": "ButtonGroup-module__hop-ButtonGroup___kSLW4", "hop-ButtonGroup--horizontal": "ButtonGroup-module__hop-ButtonGroup--horizontal___U50CB", "hop-ButtonGroup--vertical": "ButtonGroup-module__hop-ButtonGroup--vertical___ciNua", "hop-ButtonGroup--start": "ButtonGroup-module__hop-ButtonGroup--start___Y4s0m", "hop-ButtonGroup--center": "ButtonGroup-module__hop-ButtonGroup--center___4hxxw", "hop-ButtonGroup--end": "ButtonGroup-module__hop-ButtonGroup--end___7aU6K", "hop-ButtonGroup--wrap": "ButtonGroup-module__hop-ButtonGroup--wrap___Vjmju", "hop-ButtonGroup--fluid": "ButtonGroup-module__hop-ButtonGroup--fluid___rp20-" };
+var ButtonGroup_module_default = { "hop-ButtonGroup": "ButtonGroup-module__hop-ButtonGroup___JA4jE", "hop-ButtonGroup--horizontal": "ButtonGroup-module__hop-ButtonGroup--horizontal___To8qm", "hop-ButtonGroup--vertical": "ButtonGroup-module__hop-ButtonGroup--vertical___EvODj", "hop-ButtonGroup--start": "ButtonGroup-module__hop-ButtonGroup--start___4FWyO", "hop-ButtonGroup--center": "ButtonGroup-module__hop-ButtonGroup--center___aMRwQ", "hop-ButtonGroup--end": "ButtonGroup-module__hop-ButtonGroup--end___OmblZ", "hop-ButtonGroup--wrap": "ButtonGroup-module__hop-ButtonGroup--wrap___IMwdh", "hop-ButtonGroup--fluid": "ButtonGroup-module__hop-ButtonGroup--fluid___wY5d-" };
 var GlobalButtonGroupCssSelector = "hop-ButtonGroup";
 function ButtonGroup(props, ref) {
   var _a, _b, _c, _d, _e;

package/dist/{chunk-7CT2IBNY.js → chunk-46GSYJ4O.js}

@@ -1,15 +1,15 @@
 import { TagContext } from './chunk-EWMWQ2MC.js';
-import { _ClearButton } from './chunk-OZRPGA34.js';
-import { _Spinner } from './chunk-LLQHZY4A.js';
+import { _ClearButton } from './chunk-QLR77TGC.js';
+import { _Spinner } from './chunk-CVYYW7J4.js';
 import { useLocalizedString } from './chunk-TFVDF4YH.js';
 import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
-import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
 import { BadgeContext } from './chunk-CQDLZ42T.js';
-import { _Text } from './chunk-NLLH6YL3.js';
+import { _Text } from './chunk-MYAC6TLH.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { AvatarContext } from './chunk-AES7QBQE.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { IconContext } from '@hopper-ui/icons';
@@ -19,7 +19,7 @@ import { useContextProps, composeRenderProps, Tag as Tag$1 } from 'react-aria-co
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./Tag.module.css#css-module
-var Tag_module_default = { "hop-Tag": "Tag-module__hop-Tag___FA-hF", "hop-Tag--sm": "Tag-module__hop-Tag--sm___wdoiY", "hop-Tag__remove-btn": "Tag-module__hop-Tag__remove-btn___-nFZL", "hop-Tag__Spinner": "Tag-module__hop-Tag__Spinner___bjUFw", "hop-Tag__avatar": "Tag-module__hop-Tag__avatar___J84Ob", "hop-Tag--md": "Tag-module__hop-Tag--md___-JJUY", "hop-Tag--lg": "Tag-module__hop-Tag--lg___FOQpI", "hop-Tag--neutral": "Tag-module__hop-Tag--neutral___W20ol", "hop-Tag--subdued": "Tag-module__hop-Tag--subdued___82nmZ", "hop-Tag--progress": "Tag-module__hop-Tag--progress___YRBfG", "hop-Tag--positive": "Tag-module__hop-Tag--positive___o5Li-", "hop-Tag--caution": "Tag-module__hop-Tag--caution___iRVUR", "hop-Tag--negative": "Tag-module__hop-Tag--negative___-qFKe", "hop-Tag--option1": "Tag-module__hop-Tag--option1___fVXwS", "hop-Tag--option2": "Tag-module__hop-Tag--option2___k7stP", "hop-Tag--option3": "Tag-module__hop-Tag--option3___em9d9", "hop-Tag--option4": "Tag-module__hop-Tag--option4___B0JOH", "hop-Tag--option5": "Tag-module__hop-Tag--option5___yWfHM", "hop-Tag--option6": "Tag-module__hop-Tag--option6___sY9ih", "hop-Tag__icon": "Tag-module__hop-Tag__icon___ewSNE", "hop-Tag__icon-list": "Tag-module__hop-Tag__icon-list___-PpIn", "hop-Tag__text": "Tag-module__hop-Tag__text___k7Otw", "hop-Tag__badge": "Tag-module__hop-Tag__badge___jgjVw" };
+var Tag_module_default = { "hop-Tag": "Tag-module__hop-Tag___wrsI2", "hop-Tag--sm": "Tag-module__hop-Tag--sm___EMjuF", "hop-Tag__remove-btn": "Tag-module__hop-Tag__remove-btn___glszt", "hop-Tag__Spinner": "Tag-module__hop-Tag__Spinner___uRNq3", "hop-Tag__avatar": "Tag-module__hop-Tag__avatar___UuAeT", "hop-Tag--md": "Tag-module__hop-Tag--md___HsCiJ", "hop-Tag--lg": "Tag-module__hop-Tag--lg___Vxt4s", "hop-Tag--neutral": "Tag-module__hop-Tag--neutral___J3qNi", "hop-Tag--subdued": "Tag-module__hop-Tag--subdued___apt4G", "hop-Tag--progress": "Tag-module__hop-Tag--progress___5cBAK", "hop-Tag--positive": "Tag-module__hop-Tag--positive___gutPg", "hop-Tag--caution": "Tag-module__hop-Tag--caution___6VCAy", "hop-Tag--negative": "Tag-module__hop-Tag--negative___c-4ot", "hop-Tag--option1": "Tag-module__hop-Tag--option1___fl99g", "hop-Tag--option2": "Tag-module__hop-Tag--option2___pv4-t", "hop-Tag--option3": "Tag-module__hop-Tag--option3___ST2tu", "hop-Tag--option4": "Tag-module__hop-Tag--option4___92Otc", "hop-Tag--option5": "Tag-module__hop-Tag--option5___o-9Gw", "hop-Tag--option6": "Tag-module__hop-Tag--option6___mjNo5", "hop-Tag__icon": "Tag-module__hop-Tag__icon___DKazH", "hop-Tag__icon-list": "Tag-module__hop-Tag__icon-list___O8SgH", "hop-Tag__text": "Tag-module__hop-Tag__text___OPnEh", "hop-Tag__badge": "Tag-module__hop-Tag__badge___dseHK" };
 var GlobalTagCssSelector = "hop-Tag";
 var TagToTextSizeAdapter = {
   sm: "xs",

package/dist/{chunk-UWR4QQYY.js → chunk-4RSRAAPW.js}

@@ -1,16 +1,16 @@
-import { useRenderProps } from './chunk-NH3IVMXB.js';
 import { ErrorMessageContext } from './chunk-FAE27DLF.js';
-import { _Text } from './chunk-NLLH6YL3.js';
+import { _Text } from './chunk-MYAC6TLH.js';
+import { useRenderProps } from './chunk-NH3IVMXB.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { WarningIcon } from '@hopper-ui/icons';
 import { useStyledSystem } from '@hopper-ui/styled-system';
-import clsx from 'clsx';
 import { forwardRef, useContext } from 'react';
-import { FieldErrorContext, useContextProps } from 'react-aria-components';
+import { FieldErrorContext, useContextProps, composeRenderProps } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./ErrorMessage.module.css#css-module
-var ErrorMessage_module_default = { "hop-ErrorMessage": "ErrorMessage-module__hop-ErrorMessage___yc-uD", "hop-ErrorMessage__icon": "ErrorMessage-module__hop-ErrorMessage__icon___ntyEf" };
+var ErrorMessage_module_default = { "hop-ErrorMessage": "ErrorMessage-module__hop-ErrorMessage___QVgo9", "hop-ErrorMessage__icon": "ErrorMessage-module__hop-ErrorMessage__icon___kJa-q" };
 var GlobalErrorMessageCssSelector = "hop-ErrorMessage";
 function ErrorMessage(props, ref) {
   const validation = useContext(FieldErrorContext);
@@ -25,8 +25,8 @@ var ErrorMessageInner = forwardRef((props, ref) => {
   const validation = useContext(FieldErrorContext);
   [props, ref] = useContextProps(props, ref, ErrorMessageContext);
   const { stylingProps, ...ownProps } = useStyledSystem(props);
-  const { className, children, hideIcon = false, style, slot = "errorMessage", ...otherProps } = ownProps;
-  const classNames = clsx(
+  const { className, children, hideIcon = false, style: styleProp, slot = "errorMessage", ...otherProps } = ownProps;
+  const classNames = composeClassnameRenderProps(
     GlobalErrorMessageCssSelector,
     cssModule(
       ErrorMessage_module_default,
@@ -35,13 +35,16 @@ var ErrorMessageInner = forwardRef((props, ref) => {
     stylingProps.className,
     className
   );
-  const mergedStyles = {
-    ...stylingProps.style,
-    ...style
-  };
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
   const warningIcon = !hideIcon && /* @__PURE__ */ jsx(WarningIcon, { size: "sm", className: ErrorMessage_module_default["hop-ErrorMessage__icon"] });
   const renderProps = useRenderProps({
     className: classNames,
+    style,
     children: children ? /* @__PURE__ */ jsxs(Fragment, { children: [
       warningIcon,
       " ",
@@ -60,8 +63,7 @@ var ErrorMessageInner = forwardRef((props, ref) => {
       ...otherProps,
       ...renderProps,
       slot,
-      ref,
-      style: mergedStyles
+      ref
     }
   );
 });

package/dist/{chunk-3HABKGTW.js → chunk-4U7DCAUG.js}

@@ -1,18 +1,19 @@
-import { RadioContext } from './chunk-FU5CCPLP.js';
 import { RadioFieldContext } from './chunk-DGLAGYBD.js';
+import { RadioContext } from './chunk-FU5CCPLP.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
+import { useRenderProps } from './chunk-NH3IVMXB.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.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 { useId, mergeProps } from 'react-aria';
+import { useContextProps, composeRenderProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./RadioField.module.css#css-module
-var RadioField_module_default = { "hop-RadioField": "RadioField-module__hop-RadioField___ZeVcr", "hop-RadioField--sm": "RadioField-module__hop-RadioField--sm___-ToHL", "hop-RadioField--md": "RadioField-module__hop-RadioField--md___PiqvX", "hop-RadioField__description": "RadioField-module__hop-RadioField__description___fzcWP", "hop-RadioField__radio": "RadioField-module__hop-RadioField__radio___JPWxW" };
+var RadioField_module_default = { "hop-RadioField": "RadioField-module__hop-RadioField___-vwTZ", "hop-RadioField--sm": "RadioField-module__hop-RadioField--sm___7Rhoi", "hop-RadioField--md": "RadioField-module__hop-RadioField--md___VY2am", "hop-RadioField__description": "RadioField-module__hop-RadioField__description___E7zdg", "hop-RadioField__radio": "RadioField-module__hop-RadioField__radio___B-ZON" };
 var GlobalRadioFieldCssSelector = "hop-RadioField";
 var RadioToDescriptionSizeAdapter = {
   sm: "xs",
@@ -24,7 +25,6 @@ function RadioField(props, ref) {
   const { stylingProps, ...ownProps } = useStyledSystem(props);
   const {
     className,
-    children,
     isDisabled,
     size: sizeProp = "md",
     style,
@@ -32,7 +32,7 @@ function RadioField(props, ref) {
     ...otherProps
   } = ownProps;
   const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
-  const classNames = clsx(
+  const classNames = composeClassnameRenderProps(
     className,
     GlobalRadioFieldCssSelector,
     cssModule(
@@ -42,10 +42,20 @@ function RadioField(props, ref) {
     ),
     stylingProps.className
   );
-  const mergedStyles = {
-    ...stylingProps.style,
-    ...style
-  };
+  const mergedStyles = composeRenderProps(style, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const renderProps = useRenderProps({
+    ...props,
+    className: classNames,
+    style: mergedStyles,
+    values: {
+      isDisabled: isDisabled || false
+    }
+  });
   const descriptionId = useId();
   return /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsx(
     SlotProvider,
@@ -66,13 +76,11 @@ function RadioField(props, ref) {
       children: /* @__PURE__ */ jsx(
         "div",
         {
-          ...otherProps,
+          ...mergeProps(otherProps, renderProps),
           ref,
-          className: classNames,
-          style: mergedStyles,
           slot: slot != null ? slot : void 0,
           "data-disabled": isDisabled,
-          children
+          children: renderProps.children
         }
       )
     }

package/dist/{chunk-YYU3DZW3.js → chunk-56UB7UOG.js}

@@ -10,7 +10,7 @@ import { useContextProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./FloatingBadge.module.css#css-module
-var FloatingBadge_module_default = { "hop-FloatingBadge": "FloatingBadge-module__hop-FloatingBadge___NzvAY", "hop-FloatingBadge__badge": "FloatingBadge-module__hop-FloatingBadge__badge___SFYzq" };
+var FloatingBadge_module_default = { "hop-FloatingBadge": "FloatingBadge-module__hop-FloatingBadge___g-Sla", "hop-FloatingBadge__badge": "FloatingBadge-module__hop-FloatingBadge__badge___Vl-eq" };
 var GlobalFloatingBadgeCssSelector = "hop-FloatingBadge";
 function FloatingBadge(props, ref) {
   [props, ref] = useContextProps(props, ref, FloatingBadgeContext);

package/dist/{chunk-BYEORLMA.js → chunk-5RHMPFIJ.js}

@@ -1,12 +1,12 @@
-import { _InputGroup } from './chunk-ZGJENXEU.js';
 import { PasswordFieldContext } from './chunk-QW45G6K4.js';
-import { _EmbeddedButton } from './chunk-Q2VOGHVA.js';
+import { _InputGroup } from './chunk-ZSOGDKV5.js';
+import { _EmbeddedButton } from './chunk-NKZRZZMH.js';
 import { LabelContext } from './chunk-QCA3ZR56.js';
 import { useLocalizedString } from './chunk-TFVDF4YH.js';
-import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { HelperMessageContext } from './chunk-HZKFQ33E.js';
 import { ErrorMessageContext } from './chunk-FAE27DLF.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { EyeVisibleIcon, EyeHiddenIcon } from '@hopper-ui/icons';
@@ -18,7 +18,7 @@ import { useContextProps, composeRenderProps, Input, TextField } from 'react-ari
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./PasswordField.module.css#css-module
-var PasswordField_module_default = { "hop-PasswordField": "PasswordField-module__hop-PasswordField___3teuP", "hop-PasswordField--fluid": "PasswordField-module__hop-PasswordField--fluid___8P8wR", "hop-PasswordField__Label": "PasswordField-module__hop-PasswordField__Label___Akvsj", "hop-PasswordField__InputGroup": "PasswordField-module__hop-PasswordField__InputGroup___-kQUA", "hop-PasswordField__ErrorMessage": "PasswordField-module__hop-PasswordField__ErrorMessage___SDr1s", "hop-PasswordField__HelperMessage": "PasswordField-module__hop-PasswordField__HelperMessage___9U4uf" };
+var PasswordField_module_default = { "hop-PasswordField": "PasswordField-module__hop-PasswordField___AhAOi", "hop-PasswordField--fluid": "PasswordField-module__hop-PasswordField--fluid___8FlTs", "hop-PasswordField__Label": "PasswordField-module__hop-PasswordField__Label___X7SFD", "hop-PasswordField__InputGroup": "PasswordField-module__hop-PasswordField__InputGroup___Dh8A7", "hop-PasswordField__ErrorMessage": "PasswordField-module__hop-PasswordField__ErrorMessage___lBDed", "hop-PasswordField__HelperMessage": "PasswordField-module__hop-PasswordField__HelperMessage___T4nZO" };
 var GlobalPasswordFieldCssSelector = "hop-PasswordField";
 function PasswordField(props, ref) {
   var _a;

package/dist/chunk-6W5XVFIS.js

@@ -0,0 +1,127 @@
+import { RadioContext } from './chunk-FU5CCPLP.js';
+import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
+import { IconListContext } from './chunk-DHVVYSLB.js';
+import { _Text } from './chunk-MYAC6TLH.js';
+import { TextContext } from './chunk-X6SER3TZ.js';
+import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
+import { useRenderProps } from './chunk-NH3IVMXB.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { SlotProvider } from './chunk-M36KANKC.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 { mergeProps } from 'react-aria';
+import { useContextProps, composeRenderProps } from 'react-aria-components';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// css-module:./DecorativeRadio.module.css#css-module
+var DecorativeRadio_module_default = { "hop-DecorativeRadio": "DecorativeRadio-module__hop-DecorativeRadio___oRMfZ Radio-module__hop-Radio___3GVjM", "hop-DecorativeRadio--sm": "DecorativeRadio-module__hop-DecorativeRadio--sm___AQchJ Radio-module__hop-Radio--sm___qIsKs", "hop-DecorativeRadio--md": "DecorativeRadio-module__hop-DecorativeRadio--md___DMoEl Radio-module__hop-Radio--md___Eszb9", "hop-DecorativeRadio__icon": "DecorativeRadio-module__hop-DecorativeRadio__icon___VUXMo Radio-module__hop-Radio__icon___ChXsk", "hop-DecorativeRadio__icon-list": "DecorativeRadio-module__hop-DecorativeRadio__icon-list___uTmFK Radio-module__hop-Radio__icon___ChXsk", "hop-DecorativeRadio__box": "DecorativeRadio-module__hop-DecorativeRadio__box___F6dfP Radio-module__hop-Radio__box___wgOZS", "hop-DecorativeRadio__bullet": "DecorativeRadio-module__hop-DecorativeRadio__bullet___-Mc90 Radio-module__hop-Radio__bullet___f0qvY", "hop-DecorativeRadio__text": "DecorativeRadio-module__hop-DecorativeRadio__text___-241H Radio-module__hop-Radio__text___2EXJv" };
+var GlobalDecorativeRadioCssSelector = "hop-DecorativeRadio";
+function DecorativeRadio(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, RadioContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children: childrenProp,
+    size: sizeProp = "md",
+    slot,
+    style: styleProp,
+    isSelected,
+    isPressed,
+    isHovered,
+    isFocused,
+    isFocusVisible,
+    isDisabled,
+    isReadOnly,
+    isInvalid,
+    isRequired,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const children = composeRenderProps(childrenProp, (prev) => {
+    if (prev && isTextOnlyChildren(prev)) {
+      return /* @__PURE__ */ jsx(_Text, { children: prev });
+    }
+    return prev;
+  });
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalDecorativeRadioCssSelector,
+    cssModule(
+      DecorativeRadio_module_default,
+      "hop-DecorativeRadio",
+      size
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const renderProps = useRenderProps({
+    ...props,
+    className: classNames,
+    style,
+    children,
+    values: {
+      isSelected: isSelected || false,
+      isPressed: isPressed || false,
+      isHovered: isHovered || false,
+      isFocused: isFocused || false,
+      isFocusVisible: isFocusVisible || false,
+      isDisabled: isDisabled || false,
+      isReadOnly: isReadOnly || false,
+      isInvalid: isInvalid || false,
+      isRequired: isRequired || false
+    }
+  });
+  const radioIconClassName = DecorativeRadio_module_default["hop-DecorativeRadio__bullet"];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...mergeProps(otherProps, renderProps),
+      ref,
+      slot: slot || void 0,
+      "data-selected": isSelected || void 0,
+      "data-pressed": isPressed || void 0,
+      "data-hovered": isHovered || void 0,
+      "data-focused": isFocused || void 0,
+      "data-focus-visible": isFocusVisible || void 0,
+      "data-disabled": isDisabled || void 0,
+      "data-readonly": isReadOnly || void 0,
+      "data-invalid": isInvalid || void 0,
+      "data-required": isRequired || void 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: DecorativeRadio_module_default["hop-DecorativeRadio__box"], children: /* @__PURE__ */ jsx(BulletIcon, { size, className: radioIconClassName }) }),
+        /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsx(
+          SlotProvider,
+          {
+            values: [
+              [TextContext, {
+                className: DecorativeRadio_module_default["hop-DecorativeRadio__text"],
+                size
+              }],
+              [IconListContext, {
+                className: DecorativeRadio_module_default["hop-DecorativeRadio__icon-list"],
+                size
+              }],
+              [IconContext, {
+                className: DecorativeRadio_module_default["hop-DecorativeRadio__icon"],
+                size
+              }]
+            ],
+            children: renderProps.children
+          }
+        ) })
+      ]
+    }
+  );
+}
+var _DecorativeRadio = forwardRef(DecorativeRadio);
+_DecorativeRadio.displayName = "DecorativeRadio";
+
+export { GlobalDecorativeRadioCssSelector, _DecorativeRadio };

package/dist/{chunk-QYKLMSBR.js → chunk-6XHZ6XI2.js}

@@ -1,14 +1,14 @@
 import { useScale } from './chunk-MTDFS4CZ.js';
 import { NumberFieldContext } from './chunk-ZQ3AWYRR.js';
-import { _InputGroup } from './chunk-ZGJENXEU.js';
+import { _InputGroup } from './chunk-ZSOGDKV5.js';
 import { LabelContext } from './chunk-QCA3ZR56.js';
 import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
-import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { HelperMessageContext } from './chunk-HZKFQ33E.js';
 import { ErrorMessageContext } from './chunk-FAE27DLF.js';
-import { _Text } from './chunk-NLLH6YL3.js';
+import { _Text } from './chunk-MYAC6TLH.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 { cssModule } from './chunk-KVDXQMWI.js';
 import { IconContext, AngleUpIcon, AngleDownIcon } from '@hopper-ui/icons';
@@ -21,7 +21,7 @@ import { useContextProps, composeRenderProps, Input, NumberField as NumberField$
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./NumberField.module.css#css-module
-var NumberField_module_default = { "hop-NumberField": "NumberField-module__hop-NumberField___2gj-0", "hop-NumberField--fluid": "NumberField-module__hop-NumberField--fluid___mQ4HT", "hop-NumberField--mobile": "NumberField-module__hop-NumberField--mobile___-GMYk", "hop-NumberField__Label": "NumberField-module__hop-NumberField__Label___ni5A0", "hop-NumberField__prefix": "NumberField-module__hop-NumberField__prefix___FCb7f", "hop-NumberField__InputGroup": "NumberField-module__hop-NumberField__InputGroup___sYywY", "hop-NumberField__ErrorMessage": "NumberField-module__hop-NumberField__ErrorMessage___dARU3", "hop-NumberField__HelperMessage": "NumberField-module__hop-NumberField__HelperMessage___vp10M", "hop-NumberField__stepper-button": "NumberField-module__hop-NumberField__stepper-button___7J3-z", "hop-NumberField__stepper-button--increment": "NumberField-module__hop-NumberField__stepper-button--increment___i05Fb", "hop-NumberField__stepper-button--decrement": "NumberField-module__hop-NumberField__stepper-button--decrement___Ekehn", "hop-NumberField__stepper-button--mobile": "NumberField-module__hop-NumberField__stepper-button--mobile___XqA19", "hop-NumberField__stepper-button__icon": "NumberField-module__hop-NumberField__stepper-button__icon___1RtBB", "hop-NumberField__input": "NumberField-module__hop-NumberField__input___W14tH" };
+var NumberField_module_default = { "hop-NumberField": "NumberField-module__hop-NumberField___ppFcj", "hop-NumberField--fluid": "NumberField-module__hop-NumberField--fluid___XW6-Q", "hop-NumberField--mobile": "NumberField-module__hop-NumberField--mobile___Ft7B3", "hop-NumberField__Label": "NumberField-module__hop-NumberField__Label___jiGt-", "hop-NumberField__prefix": "NumberField-module__hop-NumberField__prefix___eQqx3", "hop-NumberField__InputGroup": "NumberField-module__hop-NumberField__InputGroup___PltmY", "hop-NumberField__ErrorMessage": "NumberField-module__hop-NumberField__ErrorMessage___QeaaM", "hop-NumberField__HelperMessage": "NumberField-module__hop-NumberField__HelperMessage___rj45x", "hop-NumberField__stepper-button": "NumberField-module__hop-NumberField__stepper-button___LS5I7", "hop-NumberField__stepper-button--increment": "NumberField-module__hop-NumberField__stepper-button--increment___L4-US", "hop-NumberField__stepper-button--decrement": "NumberField-module__hop-NumberField__stepper-button--decrement___0V9pg", "hop-NumberField__stepper-button--mobile": "NumberField-module__hop-NumberField__stepper-button--mobile___KcgBz", "hop-NumberField__stepper-button__icon": "NumberField-module__hop-NumberField__stepper-button__icon___4aMo-", "hop-NumberField__input": "NumberField-module__hop-NumberField__input___PXfly" };
 var GlobalNumberFieldCssSelector = "hop-NumberField";
 var StepperButton = ({ direction }) => {
   const scale = useScale();
@@ -64,7 +64,6 @@ function NumberField(props, ref) {
     style: styleProp,
     size,
     prefix,
-    placeholder,
     onChange: onChangeProp,
     children,
     defaultValue,
@@ -122,13 +121,7 @@ function NumberField(props, ref) {
       inputType: "number",
       children: [
         prefixMarkup,
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            ref: inputRef,
-            placeholder
-          }
-        ),
+        /* @__PURE__ */ jsx(Input, { ref: inputRef }),
         /* @__PURE__ */ jsx(StepperButton, { direction: "increment" }),
         /* @__PURE__ */ jsx(StepperButton, { direction: "decrement" })
       ]

package/dist/chunk-7L5HTRIH.js

@@ -0,0 +1,130 @@
+import { CheckboxContext } from './chunk-2EAZPH3M.js';
+import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
+import { IconListContext } from './chunk-DHVVYSLB.js';
+import { _Text } from './chunk-MYAC6TLH.js';
+import { TextContext } from './chunk-X6SER3TZ.js';
+import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
+import { useRenderProps } from './chunk-NH3IVMXB.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { IconContext, MinusIcon, CheckmarkIcon } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { mergeProps } from 'react-aria';
+import { useContextProps, composeRenderProps } from 'react-aria-components';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// css-module:./DecorativeCheckbox.module.css#css-module
+var DecorativeCheckbox_module_default = { "hop-DecorativeCheckbox": "DecorativeCheckbox-module__hop-DecorativeCheckbox___q0SHV Checkbox-module__hop-Checkbox___wCCR3", "hop-DecorativeCheckbox--sm": "DecorativeCheckbox-module__hop-DecorativeCheckbox--sm___e-SXm Checkbox-module__hop-Checkbox--sm___d1GQZ", "hop-DecorativeCheckbox--md": "DecorativeCheckbox-module__hop-DecorativeCheckbox--md___BazG1 Checkbox-module__hop-Checkbox--md___FjgKo", "hop-DecorativeCheckbox__icon": "DecorativeCheckbox-module__hop-DecorativeCheckbox__icon___j0mxa Checkbox-module__hop-Checkbox__icon___Yv3pS", "hop-DecorativeCheckbox__icon-list": "DecorativeCheckbox-module__hop-DecorativeCheckbox__icon-list___p5qQy Checkbox-module__hop-Checkbox__icon___Yv3pS", "hop-DecorativeCheckbox__box": "DecorativeCheckbox-module__hop-DecorativeCheckbox__box___Lq5Di Checkbox-module__hop-Checkbox__box___PoPW7", "hop-DecorativeCheckbox__check": "DecorativeCheckbox-module__hop-DecorativeCheckbox__check___JwJtd Checkbox-module__hop-Checkbox__check___YUwMq", "hop-DecorativeCheckbox__text": "DecorativeCheckbox-module__hop-DecorativeCheckbox__text___N0rdG Checkbox-module__hop-Checkbox__text___FLKuq" };
+var GlobalDecorativeCheckboxCssSelector = "hop-DecorativeCheckbox";
+function DecorativeCheckbox(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, CheckboxContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children: childrenProp,
+    size: sizeProp = "md",
+    slot,
+    style: styleProp,
+    isSelected,
+    isPressed,
+    isHovered,
+    isFocused,
+    isFocusVisible,
+    isDisabled,
+    isReadOnly,
+    isInvalid,
+    isRequired,
+    isIndeterminate,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const children = composeRenderProps(childrenProp, (prev) => {
+    if (prev && isTextOnlyChildren(prev)) {
+      return /* @__PURE__ */ jsx(_Text, { children: prev });
+    }
+    return prev;
+  });
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalDecorativeCheckboxCssSelector,
+    cssModule(
+      DecorativeCheckbox_module_default,
+      "hop-DecorativeCheckbox",
+      size
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const renderProps = useRenderProps({
+    ...props,
+    className: classNames,
+    style,
+    children,
+    values: {
+      isSelected: isSelected || false,
+      isPressed: isPressed || false,
+      isHovered: isHovered || false,
+      isFocused: isFocused || false,
+      isFocusVisible: isFocusVisible || false,
+      isDisabled: isDisabled || false,
+      isReadOnly: isReadOnly || false,
+      isInvalid: isInvalid || false,
+      isRequired: isRequired || false,
+      isIndeterminate: isIndeterminate || false
+    }
+  });
+  const checkboxIconClassName = DecorativeCheckbox_module_default["hop-DecorativeCheckbox__check"];
+  const icon = isIndeterminate ? /* @__PURE__ */ jsx(MinusIcon, { size: "sm", className: checkboxIconClassName }) : /* @__PURE__ */ jsx(CheckmarkIcon, { size: "sm", className: checkboxIconClassName });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...mergeProps(otherProps, renderProps),
+      ref,
+      slot: slot || void 0,
+      "data-selected": isSelected || void 0,
+      "data-pressed": isPressed || void 0,
+      "data-hovered": isHovered || void 0,
+      "data-focused": isFocused || void 0,
+      "data-focus-visible": isFocusVisible || void 0,
+      "data-disabled": isDisabled || void 0,
+      "data-readonly": isReadOnly || void 0,
+      "data-invalid": isInvalid || void 0,
+      "data-required": isRequired || void 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: DecorativeCheckbox_module_default["hop-DecorativeCheckbox__box"], children: icon }),
+        /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsx(
+          SlotProvider,
+          {
+            values: [
+              [TextContext, {
+                className: DecorativeCheckbox_module_default["hop-DecorativeCheckbox__text"],
+                size
+              }],
+              [IconListContext, {
+                className: DecorativeCheckbox_module_default["hop-DecorativeCheckbox__icon-list"],
+                size
+              }],
+              [IconContext, {
+                className: DecorativeCheckbox_module_default["hop-DecorativeCheckbox__icon"],
+                size
+              }]
+            ],
+            children: renderProps.children
+          }
+        ) })
+      ]
+    }
+  );
+}
+var _DecorativeCheckbox = forwardRef(DecorativeCheckbox);
+_DecorativeCheckbox.displayName = "DecorativeCheckbox";
+
+export { GlobalDecorativeCheckboxCssSelector, _DecorativeCheckbox };

package/dist/{chunk-43LD4A2H.js → chunk-7MB63YNF.js}

@@ -1,17 +1,18 @@
 import { SwitchContext } from './chunk-YHBJAXUY.js';
 import { SwitchFieldContext } from './chunk-H7VJS4MX.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
+import { useRenderProps } from './chunk-NH3IVMXB.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.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 { useId, mergeProps } from 'react-aria';
+import { useContextProps, composeRenderProps } 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___zcNpb", "hop-SwitchField--sm": "SwitchField-module__hop-SwitchField--sm___hlt9X", "hop-SwitchField--md": "SwitchField-module__hop-SwitchField--md___yH2uc", "hop-SwitchField__description": "SwitchField-module__hop-SwitchField__description___seT7R", "hop-SwitchField__switch": "SwitchField-module__hop-SwitchField__switch___oSHMP" };
+var SwitchField_module_default = { "hop-SwitchField": "SwitchField-module__hop-SwitchField___ZBWRj", "hop-SwitchField--sm": "SwitchField-module__hop-SwitchField--sm___3YQnj", "hop-SwitchField--md": "SwitchField-module__hop-SwitchField--md___JFKBn", "hop-SwitchField__description": "SwitchField-module__hop-SwitchField__description___GLk3C", "hop-SwitchField__switch": "SwitchField-module__hop-SwitchField__switch___1job6" };
 var GlobalSwitchFieldCssSelector = "hop-SwitchField";
 var SwitchToDescriptionSizeAdapter = {
   sm: "xs",
@@ -23,15 +24,15 @@ function SwitchField(props, ref) {
   const { stylingProps, ...ownProps } = useStyledSystem(props);
   const {
     className,
-    children,
+    style,
     isDisabled,
     size: sizeProp = "md",
-    style,
     slot,
     ...otherProps
   } = ownProps;
   const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
-  const classNames = clsx(
+  const descriptionId = useId();
+  const classNames = composeClassnameRenderProps(
     className,
     GlobalSwitchFieldCssSelector,
     cssModule(
@@ -41,11 +42,20 @@ function SwitchField(props, ref) {
     ),
     stylingProps.className
   );
-  const mergedStyles = {
-    ...stylingProps.style,
-    ...style
-  };
-  const descriptionId = useId();
+  const mergedStyles = composeRenderProps(style, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const renderProps = useRenderProps({
+    ...otherProps,
+    className: classNames,
+    style: mergedStyles,
+    values: {
+      isDisabled: isDisabled || false
+    }
+  });
   return /* @__PURE__ */ jsx(
     SlotProvider,
     {
@@ -65,13 +75,11 @@ function SwitchField(props, ref) {
       children: /* @__PURE__ */ jsx(
         "div",
         {
-          ...otherProps,
+          ...mergeProps(otherProps, renderProps),
           ref,
-          className: classNames,
-          style: mergedStyles,
           slot: slot != null ? slot : void 0,
           "data-disabled": isDisabled,
-          children
+          children: renderProps.children
         }
       )
     }