@hopper-ui/components 1.5.12 → 1.5.14

package/dist/chunk-EQEKYYIB.js

@@ -0,0 +1,101 @@
+import { RadioFieldContext } from './chunk-DGLAGYBD.js';
+import { RadioContext } from './chunk-FU5CCPLP.js';
+import { useRenderProps } from './chunk-2NSUMKNH.js';
+import { _Text } from './chunk-U36V63TW.js';
+import { ClearContainerSlots } from './chunk-WJ55ZV54.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 { useSlotId } from '@react-aria/utils';
+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:./RadioField.module.css#css-module
+var RadioField_module_default = { "hop-RadioField": "RadioField-module__hop-RadioField___tLu2N", "hop-RadioField--sm": "RadioField-module__hop-RadioField--sm___SYIEv", "hop-RadioField--md": "RadioField-module__hop-RadioField--md___mT4U1", "hop-RadioField__description": "RadioField-module__hop-RadioField__description___mLIAZ", "hop-RadioField__radio": "RadioField-module__hop-RadioField__radio___zQBCf" };
+var GlobalRadioFieldCssSelector = "hop-RadioField";
+var RadioToDescriptionSizeAdapter = {
+  sm: "xs",
+  md: "sm"
+};
+function RadioField(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, RadioFieldContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    description,
+    isDisabled,
+    size: sizeProp = "md",
+    style,
+    slot,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalRadioFieldCssSelector,
+    cssModule(
+      RadioField_module_default,
+      "hop-RadioField",
+      size
+    ),
+    stylingProps.className
+  );
+  const mergedStyles = composeRenderProps(style, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const renderProps = useRenderProps({
+    ...props,
+    className: classNames,
+    style: mergedStyles,
+    values: {
+      isDisabled: isDisabled || false
+    }
+  });
+  const descriptionId = useSlotId([Boolean(description)]);
+  return /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [RadioContext, {
+          className: RadioField_module_default["hop-RadioField__radio"],
+          size,
+          isDisabled,
+          "aria-describedby": descriptionId
+        }]
+      ],
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...mergeProps(otherProps, renderProps),
+          ref,
+          slot: slot != null ? slot : void 0,
+          "data-disabled": isDisabled,
+          children: [
+            renderProps.children,
+            description && /* @__PURE__ */ jsx(
+              _Text,
+              {
+                id: descriptionId,
+                className: RadioField_module_default["hop-RadioField__description"],
+                size: RadioToDescriptionSizeAdapter[size],
+                slot: "description",
+                children: description
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+}
+var _RadioField = forwardRef(RadioField);
+_RadioField.displayName = "RadioField";
+
+export { GlobalRadioFieldCssSelector, _RadioField };

package/dist/chunk-F3T6W2WM.js

@@ -0,0 +1,58 @@
+import { useRenderProps } from './chunk-2NSUMKNH.js';
+import { useLocalizedString } from './chunk-75DHKNW2.js';
+import { _Text } from './chunk-U36V63TW.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { mergeProps } from 'react-aria';
+import { composeRenderProps } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./RemainingCharacterCount.module.css#css-module
+var RemainingCharacterCount_module_default = { "hop-RemainingCharacterCount": "RemainingCharacterCount-module__hop-RemainingCharacterCount___--zAd" };
+var GlobalRemainingCharacterCountCssSelector = "hop-RemainingCharacterCount";
+function RemainingCharacterCount(props, ref) {
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const { className, style, slot, count, isDisabled, isInvalid, ...textProps } = ownProps;
+  const stringFormatter = useLocalizedString();
+  const accessibilityString = stringFormatter.format("Input.charactersLeft", { charLeft: count });
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalRemainingCharacterCountCssSelector,
+    cssModule(RemainingCharacterCount_module_default, "hop-RemainingCharacterCount")
+  );
+  const mergedStyles = composeRenderProps(style, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const renderProps = useRenderProps({
+    ...props,
+    className: classNames,
+    style: mergedStyles,
+    values: {
+      isDisabled: isDisabled || false,
+      isInvalid: isInvalid || false
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    _Text,
+    {
+      ...mergeProps(textProps, renderProps),
+      ref,
+      "aria-label": accessibilityString,
+      "data-disabled": isDisabled || void 0,
+      "data-invalid": isInvalid || void 0,
+      role: "status",
+      slot: slot || void 0,
+      size: "xs",
+      children: count
+    }
+  );
+}
+var _RemainingCharacterCount = forwardRef(RemainingCharacterCount);
+_RemainingCharacterCount.displayName = "RemainingCharacterCount";
+
+export { GlobalRemainingCharacterCountCssSelector, _RemainingCharacterCount };

package/dist/chunk-FA26RZSE.js

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

package/dist/chunk-FDJDFE4U.js

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

package/dist/chunk-FFG4K6ZQ.js

@@ -0,0 +1,32 @@
+import { _EmbeddedButton } from './chunk-IC4RAAMH.js';
+import { ClearButtonContext } from './chunk-DXVKHP4V.js';
+import { useLocalizedString } from './chunk-75DHKNW2.js';
+import { DismissIcon } from '@hopper-ui/icons';
+import { forwardRef } from 'react';
+import { useContextProps } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+var GlobalClearButtonCssSelector = "hop-ClearButton";
+function ClearButton(props, ref) {
+  [props, ref] = useContextProps(props, ref, ClearButtonContext);
+  const stringFormatter = useLocalizedString();
+  const {
+    "aria-label": ariaLabel = stringFormatter.format("ClearButton.clearAriaLabel"),
+    size = "md",
+    ...otherProps
+  } = props;
+  return /* @__PURE__ */ jsx(
+    _EmbeddedButton,
+    {
+      ref,
+      "aria-label": ariaLabel,
+      size,
+      ...otherProps,
+      children: /* @__PURE__ */ jsx(DismissIcon, {})
+    }
+  );
+}
+var _ClearButton = forwardRef(ClearButton);
+_ClearButton.displayName = "ClearButton";
+
+export { GlobalClearButtonCssSelector, _ClearButton };

package/dist/chunk-FOQ7KN4V.js

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

package/dist/chunk-FV74YT2D.js

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

package/dist/chunk-FZBYIHVX.js

@@ -0,0 +1,57 @@
+import { HeadingContext } from './chunk-WJRMD4JP.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { slot, useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps, Heading as Heading$1 } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./Heading.module.css#css-module
+var Heading_module_default = { "hop-Heading": "Heading-module__hop-Heading___igVqd", "hop-Heading--xs": "Heading-module__hop-Heading--xs___RyB2G", "hop-Heading--sm": "Heading-module__hop-Heading--sm___CtIaS", "hop-Heading--md": "Heading-module__hop-Heading--md___RKhqJ", "hop-Heading--lg": "Heading-module__hop-Heading--lg___ANMvZ", "hop-Heading--xl": "Heading-module__hop-Heading--xl___cXo2Z", "hop-Heading--2xl": "Heading-module__hop-Heading--2xl___DBhH7", "hop-Heading--3xl": "Heading-module__hop-Heading--3xl___aIERK" };
+var GlobalHeadingCssSelector = "hop-Heading";
+function Heading(props, ref) {
+  [props, ref] = useContextProps(props, ref, HeadingContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const { className, size: sizeProp, children, style, ...otherProps } = ownProps;
+  const size = useResponsiveValue(sizeProp != null ? sizeProp : "md");
+  const classNames = clsx(
+    GlobalHeadingCssSelector,
+    cssModule(
+      Heading_module_default,
+      "hop-Heading",
+      size
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    Heading$1,
+    {
+      ref,
+      className: classNames,
+      style: mergedStyles,
+      ...otherProps,
+      children
+    }
+  );
+}
+var _Heading = slot("heading", forwardRef(Heading));
+_Heading.displayName = "Heading";
+function createHeading(as) {
+  const level = parseInt(as[1]);
+  return forwardRef((props, ref) => {
+    return /* @__PURE__ */ jsx(_Heading, { ...props, ref, level });
+  });
+}
+var H1 = createHeading("h1");
+var H2 = createHeading("h2");
+var H3 = createHeading("h3");
+var H4 = createHeading("h4");
+var H5 = createHeading("h5");
+var H6 = createHeading("h6");
+
+export { GlobalHeadingCssSelector, H1, H2, H3, H4, H5, H6, _Heading };

package/dist/chunk-G7F2YUBR.js

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

package/dist/chunk-GBWXEK6N.js

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

package/dist/chunk-GDDLFLKV.js

@@ -0,0 +1,41 @@
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { createContext, forwardRef } from 'react';
+import { useContextProps, Input as Input$1 } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./Input.module.css#css-module
+var Input_module_default = { "hop-Input": "Input-module__hop-Input___54oXk", "hop-Input--sm": "Input-module__hop-Input--sm___KM5Nk" };
+var InputContext = createContext({});
+var Input = forwardRef(function Input2(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, InputContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const { className, size: sizeProp, style, ...otherProps } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const classNames = clsx(
+    className,
+    cssModule(
+      Input_module_default,
+      "hop-Input",
+      size
+    ),
+    stylingProps.className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    Input$1,
+    {
+      ...otherProps,
+      ref,
+      className: classNames,
+      style: mergedStyles
+    }
+  );
+});
+
+export { Input, InputContext };

package/dist/chunk-GFZIITQD.js

@@ -0,0 +1,85 @@
+import { ImageContext } from './chunk-JAR7CXVS.js';
+import { SvgImageContext } from './chunk-M4CKZFAM.js';
+import { IllustratedMessageContext } from './chunk-W4TCUPPA.js';
+import { HeadingContext } from './chunk-WJRMD4JP.js';
+import { ContentContext } from './chunk-IXB2WK56.js';
+import { ButtonGroupContext } from './chunk-VJQ7M2BK.js';
+import { ButtonContext } from './chunk-WMTWFKKP.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, Div } 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:./IllustratedMessage.module.css#css-module
+var IllustratedMessage_module_default = { "hop-IllustratedMessage": "IllustratedMessage-module__hop-IllustratedMessage___nPpBB", "hop-IllustratedMessage--sm": "IllustratedMessage-module__hop-IllustratedMessage--sm___ScFuu", "hop-IllustratedMessage--md": "IllustratedMessage-module__hop-IllustratedMessage--md___aLhF-", "hop-IllustratedMessage--lg": "IllustratedMessage-module__hop-IllustratedMessage--lg___3kk97", "hop-IllustratedMessage__image": "IllustratedMessage-module__hop-IllustratedMessage__image___zNm3E", "hop-IllustratedMessage__heading": "IllustratedMessage-module__hop-IllustratedMessage__heading___7REmq", "hop-IllustratedMessage-md": "IllustratedMessage-module__hop-IllustratedMessage-md___j-eXW", "hop-IllustratedMessage__content": "IllustratedMessage-module__hop-IllustratedMessage__content___pMAT-", "hop-IllustratedMessage__buttonGroup": "IllustratedMessage-module__hop-IllustratedMessage__buttonGroup___iGrv6", "hop-IllustratedMessage__button": "IllustratedMessage-module__hop-IllustratedMessage__button___tDCD-" };
+var GlobalIllustratedMessageCssSelector = "hop-IllustratedMessage";
+function IllustratedMessage(props, ref) {
+  [props, ref] = useContextProps(props, ref, IllustratedMessageContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    style,
+    slot,
+    children,
+    size = "md",
+    ...otherProps
+  } = ownProps;
+  const classNames = clsx(
+    className,
+    GlobalIllustratedMessageCssSelector,
+    cssModule(
+      IllustratedMessage_module_default,
+      "hop-IllustratedMessage",
+      size
+    ),
+    stylingProps.className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    Div,
+    {
+      ...otherProps,
+      className: classNames,
+      style: mergedStyles,
+      ref,
+      slot: slot != null ? slot : void 0,
+      children: /* @__PURE__ */ jsx(
+        SlotProvider,
+        {
+          values: [
+            [SvgImageContext, {
+              className: IllustratedMessage_module_default["hop-IllustratedMessage__image"]
+            }],
+            [ImageContext, {
+              className: IllustratedMessage_module_default["hop-IllustratedMessage__image"]
+            }],
+            [HeadingContext, {
+              className: IllustratedMessage_module_default["hop-IllustratedMessage__heading"]
+            }],
+            [ContentContext, {
+              className: IllustratedMessage_module_default["hop-IllustratedMessage__content"],
+              color: "neutral-weak"
+            }],
+            [ButtonGroupContext, {
+              className: IllustratedMessage_module_default["hop-IllustratedMessage__buttonGroup"]
+            }],
+            [ButtonContext, {
+              className: IllustratedMessage_module_default["hop-IllustratedMessage__button"]
+            }]
+          ],
+          children
+        }
+      )
+    }
+  );
+}
+var _IllustratedMessage = forwardRef(IllustratedMessage);
+_IllustratedMessage.displayName = "IllustratedMessage";
+
+export { GlobalIllustratedMessageCssSelector, _IllustratedMessage };

package/dist/chunk-GLVS3EMV.js

@@ -0,0 +1,50 @@
+import { ToggleArrowContext } from './chunk-LWPDIKEX.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { AngleDownIcon } from '@hopper-ui/icons';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./ToggleArrow.module.css#css-module
+var ToggleArrow_module_default = { "hop-ToggleArrow": "ToggleArrow-module__hop-ToggleArrow___-b5H5" };
+var GlobalToggleArrowCssSelector = "hop-ToggleArrow";
+function ToggleArrow(props, ref) {
+  [props, ref] = useContextProps(props, ref, ToggleArrowContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    isExpanded,
+    style: styleProp,
+    ...otherProps
+  } = ownProps;
+  const classNames = clsx(
+    GlobalToggleArrowCssSelector,
+    cssModule(
+      ToggleArrow_module_default,
+      "hop-ToggleArrow"
+    ),
+    stylingProps.className,
+    className
+  );
+  const style = {
+    ...stylingProps.style,
+    ...styleProp
+  };
+  return /* @__PURE__ */ jsx(
+    AngleDownIcon,
+    {
+      ref,
+      className: classNames,
+      style,
+      size: "sm",
+      "data-expanded": isExpanded || void 0,
+      ...otherProps
+    }
+  );
+}
+var _ToggleArrow = forwardRef(ToggleArrow);
+_ToggleArrow.displayName = "ToggleArrow";
+
+export { GlobalToggleArrowCssSelector, _ToggleArrow };

package/dist/chunk-H5JOEG7I.js

@@ -0,0 +1,135 @@
+import { CheckboxGroupContext } from './chunk-N7YDPVZL.js';
+import { _Label } from './chunk-N6X66BJY.js';
+import { _HelperMessage } from './chunk-2TNVXSEJ.js';
+import { _ErrorMessage } from './chunk-3UGFIGCD.js';
+import { CheckboxFieldContext } from './chunk-ZGNK4GWA.js';
+import { CheckboxContext } from './chunk-2EAZPH3M.js';
+import { useFormProps } from './chunk-TRCGBAIX.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 { useContextProps, composeRenderProps, CheckboxGroup as CheckboxGroup$1 } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// css-module:./CheckboxGroup.module.css#css-module
+var CheckboxGroup_module_default = { "hop-CheckboxGroup": "CheckboxGroup-module__hop-CheckboxGroup___kWg6U", "hop-CheckboxGroup--bordered": "CheckboxGroup-module__hop-CheckboxGroup--bordered___uCHeb", "hop-CheckboxGroup--sm": "CheckboxGroup-module__hop-CheckboxGroup--sm___WgSbO", "hop-CheckboxGroup--md": "CheckboxGroup-module__hop-CheckboxGroup--md___8rd1d", "hop-CheckboxGroup__label": "CheckboxGroup-module__hop-CheckboxGroup__label___0lAlI", "hop-CheckboxGroup__list": "CheckboxGroup-module__hop-CheckboxGroup__list___e0tgA", "hop-CheckboxGroup__checkbox": "CheckboxGroup-module__hop-CheckboxGroup__checkbox___CS3pz", "hop-CheckboxGroup__error-message": "CheckboxGroup-module__hop-CheckboxGroup__error-message___7qRZW", "hop-CheckboxGroup__helper-message": "CheckboxGroup-module__hop-CheckboxGroup__helper-message___nj0xt" };
+var GlobalCheckboxGroupCssSelector = "hop-CheckboxGroup";
+function CheckboxGroup(props, ref) {
+  var _a, _b, _c;
+  [props, ref] = useContextProps(props, ref, CheckboxGroupContext);
+  props = useFormProps(props);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const { stylingProps: listStylingProps, ...listProps } = useStyledSystem((_a = ownProps.listProps) != null ? _a : {});
+  const {
+    className,
+    children: childrenProp,
+    description,
+    errorMessage,
+    isDisabled,
+    isInvalid,
+    isRequired,
+    label,
+    necessityIndicator,
+    orientation: orientationProp = "vertical",
+    size: sizeProp = "md",
+    style: styleProp,
+    variant = "borderless",
+    ...otherProps
+  } = ownProps;
+  const {
+    className: listClassName,
+    slot: listSlot,
+    style: listStyleProp,
+    ...otherListProps
+  } = listProps;
+  const orientation = (_b = useResponsiveValue(orientationProp)) != null ? _b : "vertical";
+  const size = (_c = useResponsiveValue(sizeProp)) != null ? _c : "md";
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalCheckboxGroupCssSelector,
+    cssModule(
+      CheckboxGroup_module_default,
+      "hop-CheckboxGroup",
+      size,
+      variant
+    ),
+    stylingProps.className
+  );
+  const listClassNames = clsx(
+    CheckboxGroup_module_default["hop-CheckboxGroup__list"],
+    listClassName,
+    listStylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const listStyle = {
+    ...listStylingProps.style,
+    ...listStyleProp
+  };
+  const children = composeRenderProps(childrenProp, (prev) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: listClassNames,
+        slot: listSlot != null ? listSlot : void 0,
+        style: listStyle,
+        ...otherListProps,
+        children: prev
+      }
+    );
+  });
+  return /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [CheckboxContext, {
+          className: CheckboxGroup_module_default["hop-CheckboxGroup__checkbox"],
+          size
+        }],
+        [CheckboxFieldContext, {
+          className: CheckboxGroup_module_default["hop-CheckboxGroup__checkbox"],
+          size,
+          isDisabled
+        }]
+      ],
+      children: /* @__PURE__ */ jsx(
+        CheckboxGroup$1,
+        {
+          ref,
+          className: classNames,
+          style,
+          isInvalid,
+          isDisabled,
+          isRequired,
+          "data-orientation": orientation,
+          ...otherProps,
+          children: (checkboxGroupRenderProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
+            label && /* @__PURE__ */ jsx(
+              _Label,
+              {
+                className: CheckboxGroup_module_default["hop-CheckboxGroup__label"],
+                isRequired,
+                necessityIndicator,
+                children: label
+              }
+            ),
+            children(checkboxGroupRenderProps),
+            description && /* @__PURE__ */ jsx(_HelperMessage, { className: CheckboxGroup_module_default["hop-CheckboxGroup__helper-message"], hideIcon: true, children: description }),
+            /* @__PURE__ */ jsx(_ErrorMessage, { className: CheckboxGroup_module_default["hop-CheckboxGroup__error-message"], hideIcon: true, children: errorMessage })
+          ] })
+        }
+      )
+    }
+  );
+}
+var _CheckboxGroup = forwardRef(CheckboxGroup);
+_CheckboxGroup.displayName = "CheckboxGroup";
+
+export { GlobalCheckboxGroupCssSelector, _CheckboxGroup };