@hopper-ui/components 1.5.12 → 1.5.14

package/dist/chunk-7MJXWOID.js

@@ -0,0 +1,217 @@
+import { _SelectValue } from './chunk-3UCMP2AH.js';
+import { SelectContext } from './chunk-ZOTXNUAV.js';
+import { _Popover } from './chunk-CXXWL5AZ.js';
+import { _ListBox } from './chunk-WYU6M7QL.js';
+import { _ListBoxItem } from './chunk-XR6SC252.js';
+import { _ListBoxSection } from './chunk-PN5BRTOO.js';
+import { _Footer } from './chunk-VOZN65OL.js';
+import { _ToggleArrow } from './chunk-GLVS3EMV.js';
+import { _Label } from './chunk-N6X66BJY.js';
+import { _HelperMessage } from './chunk-2TNVXSEJ.js';
+import { _ErrorMessage } from './chunk-3UGFIGCD.js';
+import { BadgeContext } from './chunk-ZSFJVMJN.js';
+import { useFormProps } from './chunk-TRCGBAIX.js';
+import { ensureTextWrapper } from './chunk-XCGP42UI.js';
+import { ClearContainerSlots, ClearProviders } from './chunk-WJ55ZV54.js';
+import { TextContext } from './chunk-ZNOU2CGM.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';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, TextContext as TextContext$1, ButtonContext, Select as Select$1, Button } from 'react-aria-components';
+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___5Pi0n", "hop-Select--fluid": "Select-module__hop-Select--fluid___mchCW", "hop-Select__label": "Select-module__hop-Select__label___djm0R", "hop-Select__button": "Select-module__hop-Select__button___BmDQe", "hop-Select__button--sm": "Select-module__hop-Select__button--sm___7tWLX", "hop-Select__button--md": "Select-module__hop-Select__button--md___jZA1N", "hop-Select__prefix": "Select-module__hop-Select__prefix___pkRb9", "hop-Select__button-icon": "Select-module__hop-Select__button-icon___gB-B6", "hop-Select__helper-message": "Select-module__hop-Select__helper-message___gWn2J", "hop-Select__error-message": "Select-module__hop-Select__error-message___DOVm8" };
+var GlobalSelectCssSelector = "hop-Select";
+function Select(props, ref) {
+  var _a, _b, _c, _d;
+  [props, ref] = useContextProps(props, ref, SelectContext);
+  props = useFormProps(props);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    align: alignProp,
+    className,
+    children,
+    description,
+    direction: directionProp,
+    errorMessage,
+    footer,
+    isAutoMenuWidth,
+    isFluid: isFluidProp,
+    isInvalid,
+    isLoading,
+    isRequired,
+    items,
+    label,
+    listBoxProps,
+    necessityIndicator,
+    onLoadMore,
+    popoverProps,
+    prefix,
+    renderValue,
+    selectionIndicator,
+    shouldFlip,
+    size: sizeProp,
+    style: styleProp,
+    triggerProps,
+    ...otherProps
+  } = ownProps;
+  const { stylingProps: triggerStylingProps, ...triggerOwnProps } = useStyledSystem(triggerProps != null ? triggerProps : {});
+  const {
+    className: triggerClassName,
+    style: triggerStyleProp,
+    ...otherTriggerProps
+  } = triggerOwnProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const isFluid = (_b = useResponsiveValue(isFluidProp)) != null ? _b : false;
+  const align = (_c = useResponsiveValue(alignProp)) != null ? _c : "start";
+  const direction = (_d = useResponsiveValue(directionProp)) != null ? _d : "bottom";
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalSelectCssSelector,
+    cssModule(
+      Select_module_default,
+      "hop-Select",
+      isFluid && "fluid",
+      size
+    ),
+    stylingProps.className
+  );
+  const buttonClassNames = composeClassnameRenderProps(
+    triggerClassName,
+    cssModule(
+      Select_module_default,
+      "hop-Select__button",
+      size
+    ),
+    triggerStylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const triggerStyle = composeRenderProps(triggerStyleProp, (prev) => {
+    return {
+      ...triggerStylingProps.style,
+      ...prev
+    };
+  });
+  const prefixMarkup = prefix ? /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [TextContext, { size, className: Select_module_default["hop-Select__prefix"] }],
+        [IconContext, { size, className: Select_module_default["hop-Select__prefix"] }]
+      ],
+      children: /* @__PURE__ */ jsx(ClearContainerSlots, { children: ensureTextWrapper(prefix) })
+    }
+  ) : null;
+  const footerMarkup = footer ? /* @__PURE__ */ jsx(
+    ClearProviders,
+    {
+      values: [
+        TextContext$1,
+        TextContext,
+        ButtonContext
+      ],
+      children: /* @__PURE__ */ jsx(
+        SlotProvider,
+        {
+          values: [
+            [TextContext, {
+              size
+            }]
+          ],
+          children: /* @__PURE__ */ jsx(_Footer, { children: ensureTextWrapper(footer) })
+        }
+      )
+    }
+  ) : null;
+  return /* @__PURE__ */ jsx(
+    Select$1,
+    {
+      ref,
+      className: classNames,
+      style,
+      isInvalid,
+      isRequired,
+      ...otherProps,
+      children: (selectRenderProps) => {
+        const { isOpen } = selectRenderProps;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          label && /* @__PURE__ */ jsx(
+            _Label,
+            {
+              className: Select_module_default["hop-Select__label"],
+              isRequired,
+              necessityIndicator,
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            _Popover,
+            {
+              isAutoWidth: isAutoMenuWidth,
+              isNonDialog: true,
+              placement: `${direction} ${align}`,
+              shouldFlip,
+              ...popoverProps,
+              children: [
+                /* @__PURE__ */ jsx(
+                  SlotProvider,
+                  {
+                    values: [
+                      [BadgeContext, {
+                        variant: "secondary"
+                      }]
+                    ],
+                    children: /* @__PURE__ */ jsx(
+                      _ListBox,
+                      {
+                        size,
+                        isInvalid,
+                        items,
+                        isLoading,
+                        onLoadMore,
+                        selectionIndicator,
+                        ...listBoxProps,
+                        children
+                      }
+                    )
+                  }
+                ),
+                footerMarkup
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(Button, { className: buttonClassNames, style: triggerStyle, "data-invalid": isInvalid || void 0, ...otherTriggerProps, children: [
+            prefixMarkup,
+            /* @__PURE__ */ jsx(_SelectValue, { size, children: (valueRenderProps) => {
+              return renderValue == null ? void 0 : renderValue(valueRenderProps);
+            } }),
+            /* @__PURE__ */ jsx(
+              _ToggleArrow,
+              {
+                className: Select_module_default["hop-Select__button-icon"],
+                isExpanded: isOpen
+              }
+            )
+          ] }),
+          description && /* @__PURE__ */ jsx(_HelperMessage, { className: Select_module_default["hop-Select__helper-message"], children: description }),
+          /* @__PURE__ */ jsx(_ErrorMessage, { className: Select_module_default["hop-Select__error-message"], children: errorMessage })
+        ] });
+      }
+    }
+  );
+}
+var _Select = forwardRef(Select);
+_Select.displayName = "Select";
+var SelectItem = _ListBoxItem;
+var SelectSection = _ListBoxSection;
+
+export { GlobalSelectCssSelector, SelectItem, SelectSection, _Select };

package/dist/chunk-AB4BRU6Z.js

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

package/dist/chunk-AHKRJPF6.js

@@ -0,0 +1,88 @@
+import { RadioContext } from './chunk-FU5CCPLP.js';
+import { IconListContext } from './chunk-GBWXEK6N.js';
+import { ensureTextWrapper } from './chunk-XCGP42UI.js';
+import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { TextContext } from './chunk-ZNOU2CGM.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 { 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___fT2YA", "hop-Radio--sm": "Radio-module__hop-Radio--sm___H9INN", "hop-Radio--md": "Radio-module__hop-Radio--md___fj0gt", "hop-Radio__icon": "Radio-module__hop-Radio__icon___Jjf2W", "hop-Radio__icon-list": "Radio-module__hop-Radio__icon-list___--Z8O", "hop-Radio__box": "Radio-module__hop-Radio__box___3FKPP", "hop-Radio__bullet": "Radio-module__hop-Radio__bullet___RqbNn", "hop-Radio__text": "Radio-module__hop-Radio__text___Vlyfh" };
+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) => {
+    return ensureTextWrapper(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-AJKN2ALX.js

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

package/dist/chunk-ASSMRVHT.js

@@ -0,0 +1,144 @@
+import { _BaseModal } from './chunk-RRJTW4Z7.js';
+import { HeadingContext } from './chunk-WJRMD4JP.js';
+import { ContentContext } from './chunk-IXB2WK56.js';
+import { _ButtonGroup } from './chunk-CAMLJNPG.js';
+import { _CloseButton } from './chunk-S5NO7N32.js';
+import { _Button } from './chunk-4TM7GV2V.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { AlertContext } from './chunk-5DT3S5YY.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { chain } from 'react-aria';
+import { useContextProps, composeRenderProps, Dialog, Provider } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// css-module:./Alert.module.css#css-module
+var Alert_module_default = { "hop-Alert": "Alert-module__hop-Alert___Co-m-", "hop-Alert__button-group": "Alert-module__hop-Alert__button-group___BoVTx", "hop-Alert__heading": "Alert-module__hop-Alert__heading___dkVWJ", "hop-Alert__close": "Alert-module__hop-Alert__close___sFUZR", "hop-Alert__content": "Alert-module__hop-Alert__content___hmZTd" };
+var GlobalAlertCssSelector = "hop-Alert";
+function Alert(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, AlertContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children: childrenProp,
+    style,
+    slot,
+    size: sizeProp,
+    autoFocusButton,
+    cancelButtonLabel,
+    isDismissable = true,
+    onCancelButtonClick,
+    onPrimaryButtonClick,
+    onSecondaryButtonClick,
+    primaryButtonDisabled,
+    primaryButtonLabel,
+    secondaryButtonDisabled,
+    secondaryButtonLabel,
+    variant = "confirmation",
+    overlayProps,
+    isLoading,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const classNames = clsx(
+    GlobalAlertCssSelector,
+    cssModule(
+      Alert_module_default,
+      GlobalAlertCssSelector,
+      variant
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...style,
+    ...stylingProps.style
+  };
+  const children = composeRenderProps(childrenProp, (prev) => {
+    return prev;
+  });
+  return /* @__PURE__ */ jsx(
+    _BaseModal,
+    {
+      size,
+      isDismissable: isDismissable && !isLoading,
+      isKeyboardDismissDisabled: isDismissable && !isLoading,
+      ...overlayProps,
+      children: /* @__PURE__ */ jsx(
+        Dialog,
+        {
+          role: "alertdialog",
+          ref,
+          slot,
+          style: mergedStyles,
+          className: classNames,
+          ...otherProps,
+          children: (renderProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
+            isDismissable && /* @__PURE__ */ jsx(
+              _CloseButton,
+              {
+                isDisabled: isLoading,
+                className: Alert_module_default["hop-Alert__close"]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Provider,
+              {
+                values: [
+                  [HeadingContext, {
+                    className: Alert_module_default["hop-Alert__heading"],
+                    size: "lg",
+                    slot: "title"
+                  }],
+                  [ContentContext, {
+                    className: Alert_module_default["hop-Alert__content"]
+                  }]
+                ],
+                children: children(renderProps)
+              }
+            ),
+            /* @__PURE__ */ jsxs(_ButtonGroup, { align: "end", className: Alert_module_default["hop-Alert__button-group"], children: [
+              cancelButtonLabel && /* @__PURE__ */ jsx(
+                _Button,
+                {
+                  onPress: () => chain(onCancelButtonClick == null ? void 0 : onCancelButtonClick(), renderProps.close()),
+                  variant: "secondary",
+                  isDisabled: isLoading,
+                  autoFocus: autoFocusButton === "cancel",
+                  children: cancelButtonLabel
+                }
+              ),
+              secondaryButtonLabel && /* @__PURE__ */ jsx(
+                _Button,
+                {
+                  onPress: () => chain(onSecondaryButtonClick == null ? void 0 : onSecondaryButtonClick(), renderProps.close()),
+                  variant: "secondary",
+                  isDisabled: isLoading || secondaryButtonDisabled,
+                  autoFocus: autoFocusButton === "secondary",
+                  children: secondaryButtonLabel
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                _Button,
+                {
+                  variant: variant === "confirmation" ? "primary" : "danger",
+                  isLoading,
+                  isDisabled: primaryButtonDisabled,
+                  autoFocus: autoFocusButton === "primary",
+                  onPress: () => chain(onPrimaryButtonClick == null ? void 0 : onPrimaryButtonClick(), renderProps.close),
+                  children: primaryButtonLabel
+                }
+              )
+            ] })
+          ] })
+        }
+      )
+    }
+  );
+}
+var _Alert = forwardRef(Alert);
+_Alert.displayName = "Alert";
+
+export { GlobalAlertCssSelector, _Alert };

package/dist/chunk-BDNN5DKK.js

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

package/dist/chunk-BLQ5PYIF.js

@@ -0,0 +1,126 @@
+import { CheckboxContext } from './chunk-2EAZPH3M.js';
+import { useRenderProps } from './chunk-2NSUMKNH.js';
+import { IconListContext } from './chunk-GBWXEK6N.js';
+import { ensureTextWrapper } from './chunk-XCGP42UI.js';
+import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { TextContext } from './chunk-ZNOU2CGM.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 { jsxs, jsx } from 'react/jsx-runtime';
+
+// css-module:./DecorativeCheckbox.module.css#css-module
+var DecorativeCheckbox_module_default = { "hop-DecorativeCheckbox": "DecorativeCheckbox-module__hop-DecorativeCheckbox___dmGUe Checkbox-module__hop-Checkbox___gMD5d", "hop-DecorativeCheckbox--sm": "DecorativeCheckbox-module__hop-DecorativeCheckbox--sm___ZR3H1 Checkbox-module__hop-Checkbox--sm___j18OC", "hop-DecorativeCheckbox--md": "DecorativeCheckbox-module__hop-DecorativeCheckbox--md___z7WxM Checkbox-module__hop-Checkbox--md___Fh0Fw", "hop-DecorativeCheckbox__icon": "DecorativeCheckbox-module__hop-DecorativeCheckbox__icon___wgkjh Checkbox-module__hop-Checkbox__icon___F1lnd", "hop-DecorativeCheckbox__icon-list": "DecorativeCheckbox-module__hop-DecorativeCheckbox__icon-list___Th171 Checkbox-module__hop-Checkbox__icon___F1lnd", "hop-DecorativeCheckbox__box": "DecorativeCheckbox-module__hop-DecorativeCheckbox__box___G0EGK Checkbox-module__hop-Checkbox__box___LQOzJ", "hop-DecorativeCheckbox__check": "DecorativeCheckbox-module__hop-DecorativeCheckbox__check___mrW-2 Checkbox-module__hop-Checkbox__check___kG8Rj", "hop-DecorativeCheckbox__text": "DecorativeCheckbox-module__hop-DecorativeCheckbox__text___ji-G7 Checkbox-module__hop-Checkbox__text___DXis5" };
+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) => {
+    return ensureTextWrapper(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",
+    {
+      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,
+      ...mergeProps(renderProps, otherProps),
+      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-BRSTXEXO.js

@@ -0,0 +1,72 @@
+import { BadgeContext } from './chunk-ZSFJVMJN.js';
+import { FloatingBadgeContext } from './chunk-KZSTJ3QZ.js';
+import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.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';
+
+// css-module:./FloatingBadge.module.css#css-module
+var FloatingBadge_module_default = { "hop-FloatingBadge": "FloatingBadge-module__hop-FloatingBadge___uvtYh", "hop-FloatingBadge__badge": "FloatingBadge-module__hop-FloatingBadge__badge___malJo" };
+var GlobalFloatingBadgeCssSelector = "hop-FloatingBadge";
+function FloatingBadge(props, ref) {
+  [props, ref] = useContextProps(props, ref, FloatingBadgeContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    children,
+    className,
+    offset = [0, 0],
+    overlap = "rectangular",
+    placement = "top right",
+    style,
+    slot,
+    ...otherProps
+  } = ownProps;
+  const classNames = clsx(
+    className,
+    GlobalFloatingBadgeCssSelector,
+    cssModule(
+      FloatingBadge_module_default,
+      "hop-FloatingBadge"
+    ),
+    stylingProps.className
+  );
+  const offsetXValue = typeof offset[0] === "string" ? offset[0] : `${offset[0]}px`;
+  const offsetYValue = typeof offset[1] === "string" ? offset[1] : `${offset[1]}px`;
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style,
+    "--hop-FloatingBadge-offset-x": offsetXValue,
+    "--hop-FloatingBadge-offset-y": offsetYValue
+  };
+  return /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [BadgeContext, {
+          className: FloatingBadge_module_default["hop-FloatingBadge__badge"]
+        }]
+      ],
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          className: classNames,
+          style: mergedStyles,
+          slot: slot != null ? slot : void 0,
+          "data-overlap": overlap,
+          "data-placement": placement,
+          ...otherProps,
+          children
+        }
+      )
+    }
+  ) });
+}
+var _FloatingBadge = forwardRef(FloatingBadge);
+_FloatingBadge.displayName = "FloatingBadge";
+
+export { GlobalFloatingBadgeCssSelector, _FloatingBadge };