@hopper-ui/components 1.3.32 → 1.3.34

package/dist/{chunk-5TE4QKZ2.js → chunk-R5343IYO.js}

@@ -1,6 +1,6 @@
 import { LinkContext } from './chunk-4VVNSXIB.js';
-import { ensureTextWrapper } from './chunk-UYXVO6TB.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
+import { ensureTextWrapper } from './chunk-WILQEDLK.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___osuuM", "hop-Link--quiet": "Link-module__hop-Link--quiet___1y0dG", "hop-Link--primary": "Link-module__hop-Link--primary___nIG1F", "hop-Link--secondary": "Link-module__hop-Link--secondary___7dOBn", "hop-Link__icon": "Link-module__hop-Link__icon___Hns5-", "hop-Link__icon-list": "Link-module__hop-Link__icon-list___W1mIz", "hop-Link__text": "Link-module__hop-Link__text___efs-3", "hop-Link__start-icon": "Link-module__hop-Link__start-icon___FlpnU", "hop-Link__start-icon-list": "Link-module__hop-Link__start-icon-list___ehi2o" };
+var Link_module_default = { "hop-Link": "Link-module__hop-Link___ztDdh", "hop-Link--quiet": "Link-module__hop-Link--quiet___NQCmZ", "hop-Link--primary": "Link-module__hop-Link--primary___dFZ6l", "hop-Link--secondary": "Link-module__hop-Link--secondary___MqpEn", "hop-Link__icon": "Link-module__hop-Link__icon___sE6CK", "hop-Link__icon-list": "Link-module__hop-Link__icon-list___FC4VI", "hop-Link__text": "Link-module__hop-Link__text___-v-OA", "hop-Link__start-icon": "Link-module__hop-Link__start-icon___fD7L-", "hop-Link__start-icon-list": "Link-module__hop-Link__start-icon-list___siiJs" };
 var GlobalLinkCssSelector = "hop-Link";
 var LinkToIconSizeAdapter = {
   inherit: void 0,

package/dist/chunk-RAAORA53.js

@@ -0,0 +1,123 @@
+import { TagGroupContext } from './chunk-LCAS3YQV.js';
+import { TagContext } from './chunk-EWMWQ2MC.js';
+import { _HelperMessage } from './chunk-EXO4OJ7Z.js';
+import { _ErrorMessage } from './chunk-KFPJZFZS.js';
+import { _Label } from './chunk-6NX5XSZH.js';
+import { useFormProps } from './chunk-SH3CLZKH.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, FieldErrorContext, TagGroup as TagGroup$1, TagList } from 'react-aria-components';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// css-module:./TagGroup.module.css#css-module
+var TagGroup_module_default = { "hop-TagGroup": "TagGroup-module__hop-TagGroup___-82Bs", "hop-TagGroup__label": "TagGroup-module__hop-TagGroup__label___8v0Gh", "hop-TagGroup__list": "TagGroup-module__hop-TagGroup__list___6gKT9", "hop-TagGroup__error-message": "TagGroup-module__hop-TagGroup__error-message___uSlkg", "hop-TagGroup__helper-message": "TagGroup-module__hop-TagGroup__helper-message___2WpP7" };
+var GlobalTagGroupCssSelector = "hop-TagGroup";
+function TagGroup(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, TagGroupContext);
+  props = useFormProps(props);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    description,
+    errorMessage,
+    isInvalid = false,
+    items,
+    label,
+    necessityIndicator,
+    renderEmptyState,
+    style: styleProp,
+    size: sizeProp,
+    tagListProps,
+    variant,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const { stylingProps: tagListStylingProps, ...tagListOwnProps } = useStyledSystem(tagListProps != null ? tagListProps : {});
+  const {
+    className: tagListClassName,
+    style: tagListStyleProp,
+    ...otherTagListProps
+  } = tagListOwnProps;
+  const classNames = clsx(
+    className,
+    GlobalTagGroupCssSelector,
+    stylingProps.className,
+    cssModule(
+      TagGroup_module_default,
+      "hop-TagGroup",
+      size
+    )
+  );
+  const tagListClassNames = composeClassnameRenderProps(
+    tagListClassName,
+    cssModule(
+      TagGroup_module_default,
+      "hop-TagGroup__list",
+      size
+    ),
+    tagListStylingProps.className
+  );
+  const style = {
+    ...stylingProps.style,
+    ...styleProp
+  };
+  const tagListStyle = composeRenderProps(tagListStyleProp, (prev) => {
+    return {
+      ...tagListStylingProps.style,
+      ...prev
+    };
+  });
+  return /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [TagContext, {
+          className: TagGroup_module_default["hop-TagGroup__tag"],
+          isInvalid,
+          size,
+          variant
+        }],
+        [FieldErrorContext, {
+          isInvalid,
+          validationErrors: [],
+          validationDetails: {}
+        }]
+      ],
+      children: /* @__PURE__ */ jsxs(
+        TagGroup$1,
+        {
+          ref,
+          className: classNames,
+          style,
+          ...otherProps,
+          children: [
+            label && /* @__PURE__ */ jsx(_Label, { className: TagGroup_module_default["hop-TagGroup__Label"], necessityIndicator, children: label }),
+            /* @__PURE__ */ jsx(
+              TagList,
+              {
+                items,
+                renderEmptyState,
+                className: tagListClassNames,
+                style: tagListStyle,
+                ...otherTagListProps,
+                children
+              }
+            ),
+            description && /* @__PURE__ */ jsx(_HelperMessage, { className: TagGroup_module_default["hop-TagGroup__error-message"], hideIcon: true, children: description }),
+            /* @__PURE__ */ jsx(_ErrorMessage, { className: TagGroup_module_default["hop-TagGroup__helper-message"], hideIcon: true, children: errorMessage })
+          ]
+        }
+      )
+    }
+  );
+}
+var _TagGroup = forwardRef(TagGroup);
+_TagGroup.displayName = "TagGroup";
+
+export { GlobalTagGroupCssSelector, _TagGroup };

package/dist/{chunk-JZV3EU5P.js → chunk-RBENLQVB.js}

@@ -1,9 +1,9 @@
-import { _DecorativeRadio } from './chunk-UJAYZEVR.js';
-import { _DecorativeCheckbox } from './chunk-OEMWDVBB.js';
-import { ensureTextWrapper } from './chunk-UYXVO6TB.js';
+import { _DecorativeRadio } from './chunk-GO5KCRGN.js';
+import { _DecorativeCheckbox } from './chunk-K22HKHG2.js';
 import { ListBoxItemContext } from './chunk-Y2POLIXK.js';
-import { _ListBoxItemSkeleton } from './chunk-WJ6YDFFC.js';
+import { _ListBoxItemSkeleton } from './chunk-NIERUDZ6.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
+import { ensureTextWrapper } from './chunk-WILQEDLK.js';
 import { BadgeContext } from './chunk-CQDLZ42T.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { AvatarContext } from './chunk-AES7QBQE.js';
@@ -18,7 +18,7 @@ import { useContextProps, composeRenderProps, ListBoxItem as ListBoxItem$1, List
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // css-module:./ListBoxItem.module.css#css-module
-var ListBoxItem_module_default = { "hop-ListBoxItem": "ListBoxItem-module__hop-ListBoxItem___-BOjW", "hop-ListBoxItem--xs": "ListBoxItem-module__hop-ListBoxItem--xs___rZE4R", "hop-ListBoxItem--sm": "ListBoxItem-module__hop-ListBoxItem--sm___G4HVr", "hop-ListBoxItem--md": "ListBoxItem-module__hop-ListBoxItem--md___TnNyw", "hop-ListBoxItem--lg": "ListBoxItem-module__hop-ListBoxItem--lg___bwbj-", "hop-ListBoxItem__inner": "ListBoxItem-module__hop-ListBoxItem__inner___kPku6", "hop-ListBoxItem__checkmark": "ListBoxItem-module__hop-ListBoxItem__checkmark___7K8hE", "hop-ListBoxItem__description": "ListBoxItem-module__hop-ListBoxItem__description___vjfvf", "hop-ListBoxItem__radio": "ListBoxItem-module__hop-ListBoxItem__radio___GaGpg", "hop-ListBoxItem__checkbox": "ListBoxItem-module__hop-ListBoxItem__checkbox___-1YQK", "hop-ListBoxItem__avatar": "ListBoxItem-module__hop-ListBoxItem__avatar___gHPCY", "hop-ListBoxItem__icon-list": "ListBoxItem-module__hop-ListBoxItem__icon-list___X-gTH", "hop-ListBoxItem__icon": "ListBoxItem-module__hop-ListBoxItem__icon___Nv9zm", "hop-ListBoxItem__label": "ListBoxItem-module__hop-ListBoxItem__label___oFvmk", "hop-ListBoxItem__end-icon-list": "ListBoxItem-module__hop-ListBoxItem__end-icon-list___It5F3", "hop-ListBoxItem__end-icon": "ListBoxItem-module__hop-ListBoxItem__end-icon___9R2j1", "hop-ListBoxItem__badge": "ListBoxItem-module__hop-ListBoxItem__badge___4Q2vb" };
+var ListBoxItem_module_default = { "hop-ListBoxItem": "ListBoxItem-module__hop-ListBoxItem___OY7dv", "hop-ListBoxItem--xs": "ListBoxItem-module__hop-ListBoxItem--xs___Zx26e", "hop-ListBoxItem--sm": "ListBoxItem-module__hop-ListBoxItem--sm___azhDu", "hop-ListBoxItem--md": "ListBoxItem-module__hop-ListBoxItem--md___qOF-E", "hop-ListBoxItem--lg": "ListBoxItem-module__hop-ListBoxItem--lg___kBOyF", "hop-ListBoxItem__inner": "ListBoxItem-module__hop-ListBoxItem__inner___B-PtJ", "hop-ListBoxItem__checkmark": "ListBoxItem-module__hop-ListBoxItem__checkmark___iEHH8", "hop-ListBoxItem__description": "ListBoxItem-module__hop-ListBoxItem__description___-8A0f", "hop-ListBoxItem__radio": "ListBoxItem-module__hop-ListBoxItem__radio___fm0P0", "hop-ListBoxItem__checkbox": "ListBoxItem-module__hop-ListBoxItem__checkbox___sJL8T", "hop-ListBoxItem__avatar": "ListBoxItem-module__hop-ListBoxItem__avatar___3YvjT", "hop-ListBoxItem__icon-list": "ListBoxItem-module__hop-ListBoxItem__icon-list___MUTFV", "hop-ListBoxItem__icon": "ListBoxItem-module__hop-ListBoxItem__icon___g21-2", "hop-ListBoxItem__label": "ListBoxItem-module__hop-ListBoxItem__label___rGZNX", "hop-ListBoxItem__end-icon-list": "ListBoxItem-module__hop-ListBoxItem__end-icon-list___sVARh", "hop-ListBoxItem__end-icon": "ListBoxItem-module__hop-ListBoxItem__end-icon___WD-AV", "hop-ListBoxItem__badge": "ListBoxItem-module__hop-ListBoxItem__badge___JJWk-" };
 var GlobalListBoxItemCssSelector = "hop-ListBoxItem";
 var ListBoxItemToIconSizeAdapter = {
   xs: "sm",
@@ -39,6 +39,7 @@ var ListBoxItemToAvatarSizeAdapter = {
   lg: "md"
 };
 function ListBoxItemInner(props) {
+  var _a, _b;
   const listStateContext = useContext(ListStateContext);
   const {
     selectionMode,
@@ -57,7 +58,8 @@ function ListBoxItemInner(props) {
   const isRadio = selectionIndicator === "input" && selectionMode === "single";
   const isCheckbox = selectionIndicator === "input" && selectionMode === "multiple";
   const isCheck = selectionIndicator === "check" && selectionMode !== "none";
-  const isListHasSelection = listStateContext.selectionManager.selectedKeys.size > 0;
+  const selectedKeysLength = (_b = (_a = listStateContext == null ? void 0 : listStateContext.selectionManager) == null ? void 0 : _a.selectedKeys) == null ? void 0 : _b.size;
+  const isListHasSelection = (selectedKeysLength != null ? selectedKeysLength : 0) > 0;
   const [isListHasSelectionEnd, setIsListHasSelectionEnd] = useState(isListHasSelection);
   const handleTransitionEnd = (event) => {
     if (event.propertyName === "grid-template-columns") {

package/dist/{chunk-4XMDZ5QF.js → chunk-SBSBVVKM.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___r-msI", "hop-FloatingBadge__badge": "FloatingBadge-module__hop-FloatingBadge__badge___AstPT" };
+var FloatingBadge_module_default = { "hop-FloatingBadge": "FloatingBadge-module__hop-FloatingBadge___GP4fp", "hop-FloatingBadge__badge": "FloatingBadge-module__hop-FloatingBadge__badge___sfFMJ" };
 var GlobalFloatingBadgeCssSelector = "hop-FloatingBadge";
 function FloatingBadge(props, ref) {
   [props, ref] = useContextProps(props, ref, FloatingBadgeContext);

package/dist/chunk-SH3CLZKH.js

@@ -0,0 +1,68 @@
+import { FormContext } from './chunk-Q7NXUUB3.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef, useContext, useMemo } from 'react';
+import { Form as Form$1 } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./Form.module.css#css-module
+var Form_module_default = { "hop-Form": "Form-module__hop-Form___iuRf1" };
+var GlobalFormCssSelector = "hop-Form";
+function useFormProps(props) {
+  const ctx = useContext(FormContext);
+  return useMemo(() => {
+    let result = props;
+    if (ctx) {
+      result = { ...props };
+      for (const key in ctx) {
+        if (result[key] === void 0) {
+          result[key] = ctx[key];
+        }
+      }
+    }
+    return result;
+  }, [ctx, props]);
+}
+function Form(props, ref) {
+  var _a;
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    style,
+    isFluid,
+    isDisabled,
+    necessityIndicator,
+    size: sizeProp,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const classNames = clsx(
+    GlobalFormCssSelector,
+    cssModule(
+      Form_module_default,
+      "hop-Form"
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(FormContext.Provider, { value: { isDisabled, isFluid, necessityIndicator, size }, children: /* @__PURE__ */ jsx(
+    Form$1,
+    {
+      ref,
+      className: classNames,
+      style: mergedStyles,
+      ...otherProps,
+      children
+    }
+  ) });
+}
+var _Form = forwardRef(Form);
+_Form.displayName = "Form";
+
+export { GlobalFormCssSelector, _Form, useFormProps };

package/dist/{chunk-SMNKMZIC.js → chunk-SNDPAUAL.js}

@@ -1,12 +1,13 @@
 import { useTruncatedText } from './chunk-Z57VHYOF.js';
-import { _InputGroup } from './chunk-F3GTLFKR.js';
-import { _RemainingCharacterCount } from './chunk-MMCWVCOD.js';
-import { _ClearButton } from './chunk-VYNPGUH2.js';
+import { _RemainingCharacterCount } from './chunk-NR7UTMYX.js';
 import { TextFieldContext } from './chunk-O4XPUINW.js';
-import { ensureTextWrapper } from './chunk-UYXVO6TB.js';
-import { _HelperMessage } from './chunk-X5SCISRD.js';
-import { _Label } from './chunk-BAX352BZ.js';
-import { _ErrorMessage } from './chunk-N7ORIARY.js';
+import { _InputGroup } from './chunk-7H7A6BGG.js';
+import { _ClearButton } from './chunk-7FV3FDFI.js';
+import { _HelperMessage } from './chunk-EXO4OJ7Z.js';
+import { ensureTextWrapper } from './chunk-WILQEDLK.js';
+import { _ErrorMessage } from './chunk-KFPJZFZS.js';
+import { _Label } from './chunk-6NX5XSZH.js';
+import { useFormProps } from './chunk-SH3CLZKH.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
@@ -23,7 +24,7 @@ import { useContextProps, composeRenderProps, Input, TextField as TextField$1 }
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./TextField.module.css#css-module
-var TextField_module_default = { "hop-TextField": "TextField-module__hop-TextField___-8i4v", "hop-TextField--fluid": "TextField-module__hop-TextField--fluid___J5STF", "hop-TextField__Label": "TextField-module__hop-TextField__Label___-7Pm3", "hop-TextField__prefix": "TextField-module__hop-TextField__prefix___uEmAs", "hop-TextField__InputGroup": "TextField-module__hop-TextField__InputGroup___2pRwn", "hop-TextField__ErrorMessage": "TextField-module__hop-TextField__ErrorMessage___4agXz", "hop-TextField__HelperMessage": "TextField-module__hop-TextField__HelperMessage___JbReR" };
+var TextField_module_default = { "hop-TextField": "TextField-module__hop-TextField___0wa1v", "hop-TextField--fluid": "TextField-module__hop-TextField--fluid___Q-df2", "hop-TextField__Label": "TextField-module__hop-TextField__Label___Lm2Nf", "hop-TextField__prefix": "TextField-module__hop-TextField__prefix___Cd9QR", "hop-TextField__InputGroup": "TextField-module__hop-TextField__InputGroup___-L8XZ", "hop-TextField__ErrorMessage": "TextField-module__hop-TextField__ErrorMessage___RQdGZ", "hop-TextField__HelperMessage": "TextField-module__hop-TextField__HelperMessage___7Oja2" };
 var GlobalTextFieldCssSelector = "hop-TextField";
 function TextField(props, ref) {
   var _a;
@@ -32,6 +33,7 @@ function TextField(props, ref) {
     ...propsWithoutRef
   } = props;
   [props, ref] = useContextProps(propsWithoutRef, ref, TextFieldContext);
+  props = useFormProps(props);
   const { stylingProps, ...ownProps } = useStyledSystem(props);
   const [characterCount, setCharacterCount] = useState(() => {
     var _a2, _b, _c, _d;

package/dist/{chunk-MCSPPEQN.js → chunk-T3PSAQEK.js}

@@ -1,5 +1,5 @@
 import { AvatarContext } from './chunk-AES7QBQE.js';
-import { _RichIconAvatarImage } from './chunk-SWQEWYNM.js';
+import { _RichIconAvatarImage } from './chunk-566DZ4RC.js';
 import { useRenderProps } from './chunk-NH3IVMXB.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { DeletedUserRichIcon } from '@hopper-ui/icons';

package/dist/{chunk-PME32XAH.js → chunk-U5SHNMC3.js}

@@ -1,9 +1,10 @@
-import { _InputGroup } from './chunk-F3GTLFKR.js';
-import { _ClearButton } from './chunk-VYNPGUH2.js';
 import { SearchFieldContext } from './chunk-3NKF5TPD.js';
-import { _HelperMessage } from './chunk-X5SCISRD.js';
-import { _Label } from './chunk-BAX352BZ.js';
-import { _ErrorMessage } from './chunk-N7ORIARY.js';
+import { _InputGroup } from './chunk-7H7A6BGG.js';
+import { _ClearButton } from './chunk-7FV3FDFI.js';
+import { _HelperMessage } from './chunk-EXO4OJ7Z.js';
+import { _ErrorMessage } from './chunk-KFPJZFZS.js';
+import { _Label } from './chunk-6NX5XSZH.js';
+import { useFormProps } from './chunk-SH3CLZKH.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
@@ -18,7 +19,7 @@ import { useContextProps, composeRenderProps, Input, SearchField as SearchField$
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./SearchField.module.css#css-module
-var SearchField_module_default = { "hop-SearchField": "SearchField-module__hop-SearchField___aZb-c", "hop-SearchField--fluid": "SearchField-module__hop-SearchField--fluid___2wtRA", "hop-SearchField__Label": "SearchField-module__hop-SearchField__Label___38cX7", "hop-SearchField__prefix": "SearchField-module__hop-SearchField__prefix___GVXhK", "hop-SearchField__InputGroup": "SearchField-module__hop-SearchField__InputGroup___Pix8O", "hop-SearchField--clearable": "SearchField-module__hop-SearchField--clearable___Inua2", "hop-SearchField__ErrorMessage": "SearchField-module__hop-SearchField__ErrorMessage___eSI4J", "hop-SearchField__HelperMessage": "SearchField-module__hop-SearchField__HelperMessage___Y4l6r", "hop-SearchField__ClearButton": "SearchField-module__hop-SearchField__ClearButton___-g0yY" };
+var SearchField_module_default = { "hop-SearchField": "SearchField-module__hop-SearchField___WVc-Q", "hop-SearchField--fluid": "SearchField-module__hop-SearchField--fluid___ttX6n", "hop-SearchField__Label": "SearchField-module__hop-SearchField__Label___WpBtQ", "hop-SearchField__prefix": "SearchField-module__hop-SearchField__prefix___7ppXL", "hop-SearchField__InputGroup": "SearchField-module__hop-SearchField__InputGroup___mUujJ", "hop-SearchField--clearable": "SearchField-module__hop-SearchField--clearable___HJeNc", "hop-SearchField__ErrorMessage": "SearchField-module__hop-SearchField__ErrorMessage___um1dS", "hop-SearchField__HelperMessage": "SearchField-module__hop-SearchField__HelperMessage___uR6ko", "hop-SearchField__ClearButton": "SearchField-module__hop-SearchField__ClearButton___XsIBc" };
 var GlobalSearchFieldCssSelector = "hop-SearchField";
 function SearchField(props, ref) {
   var _a;
@@ -27,6 +28,7 @@ function SearchField(props, ref) {
     ...propsWithoutRef
   } = props;
   [props, ref] = useContextProps(propsWithoutRef, ref, SearchFieldContext);
+  props = useFormProps(props);
   const { stylingProps, ...ownProps } = useStyledSystem(props);
   const {
     className,

package/dist/{chunk-KXZYWFM3.js → chunk-UMCSSGCS.js}

@@ -1,9 +1,10 @@
 import { CheckboxFieldContext } from './chunk-ZGNK4GWA.js';
 import { CheckboxGroupContext } from './chunk-N7YDPVZL.js';
-import { _HelperMessage } from './chunk-X5SCISRD.js';
 import { CheckboxContext } from './chunk-2EAZPH3M.js';
-import { _Label } from './chunk-BAX352BZ.js';
-import { _ErrorMessage } from './chunk-N7ORIARY.js';
+import { _HelperMessage } from './chunk-EXO4OJ7Z.js';
+import { _ErrorMessage } from './chunk-KFPJZFZS.js';
+import { _Label } from './chunk-6NX5XSZH.js';
+import { useFormProps } from './chunk-SH3CLZKH.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
@@ -14,11 +15,12 @@ import { useContextProps, composeRenderProps, CheckboxGroup as CheckboxGroup$1 }
 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___FaIHF", "hop-CheckboxGroup--bordered": "CheckboxGroup-module__hop-CheckboxGroup--bordered___zdf-I", "hop-CheckboxGroup--sm": "CheckboxGroup-module__hop-CheckboxGroup--sm___-HD0f", "hop-CheckboxGroup--md": "CheckboxGroup-module__hop-CheckboxGroup--md___Nbgou", "hop-CheckboxGroup__label": "CheckboxGroup-module__hop-CheckboxGroup__label___yZIMj", "hop-CheckboxGroup__list": "CheckboxGroup-module__hop-CheckboxGroup__list___3ahkX", "hop-CheckboxGroup__checkbox": "CheckboxGroup-module__hop-CheckboxGroup__checkbox___fRaWR", "hop-CheckboxGroup__error-message": "CheckboxGroup-module__hop-CheckboxGroup__error-message___Tqkko", "hop-CheckboxGroup__helper-message": "CheckboxGroup-module__hop-CheckboxGroup__helper-message___KD8O8" };
+var CheckboxGroup_module_default = { "hop-CheckboxGroup": "CheckboxGroup-module__hop-CheckboxGroup___mhtTe", "hop-CheckboxGroup--bordered": "CheckboxGroup-module__hop-CheckboxGroup--bordered___CdRxU", "hop-CheckboxGroup--sm": "CheckboxGroup-module__hop-CheckboxGroup--sm___gaz-v", "hop-CheckboxGroup--md": "CheckboxGroup-module__hop-CheckboxGroup--md___98Lvg", "hop-CheckboxGroup__label": "CheckboxGroup-module__hop-CheckboxGroup__label___Uy0WD", "hop-CheckboxGroup__list": "CheckboxGroup-module__hop-CheckboxGroup__list___Qs99h", "hop-CheckboxGroup__checkbox": "CheckboxGroup-module__hop-CheckboxGroup__checkbox___ckpf2", "hop-CheckboxGroup__error-message": "CheckboxGroup-module__hop-CheckboxGroup__error-message___6Csfh", "hop-CheckboxGroup__helper-message": "CheckboxGroup-module__hop-CheckboxGroup__helper-message___JZC2F" };
 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 {

package/dist/{chunk-7RTEFFZS.js → chunk-VHRMFZPJ.js}

@@ -1,14 +1,14 @@
 import { PopoverContext } from './chunk-SC6ZK5ON.js';
 import { ButtonGroupContext } from './chunk-VJQ7M2BK.js';
-import { LinkContext } from './chunk-4VVNSXIB.js';
+import { LinkButtonContext } from './chunk-3UQFC2NQ.js';
+import { ButtonContext } from './chunk-WMTWFKKP.js';
 import { isFunction, isNil } from './chunk-TIPN4VYD.js';
 import { ListBoxContext } from './chunk-UIEP5BA5.js';
 import { _HopperProvider } from './chunk-NMKBUGSO.js';
-import { LinkButtonContext } from './chunk-3UQFC2NQ.js';
-import { ButtonContext } from './chunk-WMTWFKKP.js';
+import { LinkContext } from './chunk-4VVNSXIB.js';
 import { HeadingContext } from './chunk-TXZ6BMFR.js';
-import { FooterContext } from './chunk-I67NHYK4.js';
 import { ContentContext } from './chunk-IXB2WK56.js';
+import { FooterContext } from './chunk-I67NHYK4.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
@@ -19,7 +19,7 @@ import { useContextProps, composeRenderProps, Popover as Popover$1, Dialog } fro
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Popover.module.css#css-module
-var Popover_module_default = { "hop-Popover": "Popover-module__hop-Popover___ocuC9", "fade": "Popover-module__fade___GISCx", "hop-Popover__wrapper": "Popover-module__hop-Popover__wrapper___D9gvx", "hop-Popover__dialog": "Popover-module__hop-Popover__dialog___EbOYN", "hop-Popover__dropdown": "Popover-module__hop-Popover__dropdown___p0SJu", "hop-Popover__title": "Popover-module__hop-Popover__title___wj18F", "hop-Popover__content": "Popover-module__hop-Popover__content___W-UI4", "hop-Popover__list-box": "Popover-module__hop-Popover__list-box___YGY9h", "hop-Popover__footer": "Popover-module__hop-Popover__footer___ENMY0", "hop-Popover__actions": "Popover-module__hop-Popover__actions___pa9Fn", "hop-Popover__action": "Popover-module__hop-Popover__action___-TsAZ" };
+var Popover_module_default = { "hop-Popover": "Popover-module__hop-Popover___fhuWl", "fade": "Popover-module__fade___8DImD", "hop-Popover__wrapper": "Popover-module__hop-Popover__wrapper___IR9Gb", "hop-Popover__dialog": "Popover-module__hop-Popover__dialog___hCMLD", "hop-Popover__dropdown": "Popover-module__hop-Popover__dropdown___6j5bB", "hop-Popover__title": "Popover-module__hop-Popover__title___HSdgs", "hop-Popover__content": "Popover-module__hop-Popover__content___-1NfA", "hop-Popover__list-box": "Popover-module__hop-Popover__list-box___vd-yn", "hop-Popover__footer": "Popover-module__hop-Popover__footer___sF7TE", "hop-Popover__actions": "Popover-module__hop-Popover__actions___x-cAX", "hop-Popover__action": "Popover-module__hop-Popover__action___-uIRT" };
 var GlobalPopoverCssSelector = "hop-Popover";
 function Popover(props, ref) {
   var _a;

package/dist/{chunk-UYXVO6TB.js → chunk-WILQEDLK.js}

@@ -1,10 +1,10 @@
 import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
-import { _Text } from './chunk-2ZAWI3VO.js';
+import { _Text } from './chunk-75I7LTO3.js';
 import { jsx } from 'react/jsx-runtime';
 
-function ensureTextWrapper(children) {
+function ensureTextWrapper(children, elementType) {
   if (children && isTextOnlyChildren(children)) {
-    return /* @__PURE__ */ jsx(_Text, { children });
+    return /* @__PURE__ */ jsx(_Text, { elementType, children });
   }
   return children;
 }

package/dist/{chunk-XTY7LASB.js → chunk-WWXZNKBE.js}

@@ -1,7 +1,7 @@
-import { _Text } from './chunk-2ZAWI3VO.js';
+import { _Text } from './chunk-75I7LTO3.js';
 import { useImageFallback } from './chunk-LI5HSYF7.js';
 import { AvatarContext } from './chunk-AES7QBQE.js';
-import { _RichIconAvatarImage } from './chunk-SWQEWYNM.js';
+import { _RichIconAvatarImage } from './chunk-566DZ4RC.js';
 import { useRenderProps } from './chunk-NH3IVMXB.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
@@ -13,7 +13,7 @@ import { useContextProps, composeRenderProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Avatar.module.css#css-module
-var Avatar_module_default = { "hop-Avatar": "Avatar-module__hop-Avatar___NRR7e", "hop-Avatar--xs": "Avatar-module__hop-Avatar--xs___Lc954", "hop-Avatar--sm": "Avatar-module__hop-Avatar--sm___xKab-", "hop-Avatar--md": "Avatar-module__hop-Avatar--md___wzlmP", "hop-Avatar--lg": "Avatar-module__hop-Avatar--lg___0tPMw", "hop-Avatar--xl": "Avatar-module__hop-Avatar--xl___oDIyV", "hop-Avatar--2xl": "Avatar-module__hop-Avatar--2xl___fReCL", "hop-Avatar--decorative-option1": "Avatar-module__hop-Avatar--decorative-option1___M3KiH", "hop-Avatar--decorative-option2": "Avatar-module__hop-Avatar--decorative-option2___xfUDh", "hop-Avatar--decorative-option3": "Avatar-module__hop-Avatar--decorative-option3___ON6nk", "hop-Avatar--decorative-option4": "Avatar-module__hop-Avatar--decorative-option4___tUQ0G", "hop-Avatar--decorative-option5": "Avatar-module__hop-Avatar--decorative-option5___o6YrF", "hop-Avatar--decorative-option6": "Avatar-module__hop-Avatar--decorative-option6___XGGWz", "hop-Avatar--decorative-option7": "Avatar-module__hop-Avatar--decorative-option7___amRxm", "hop-Avatar--decorative-option8": "Avatar-module__hop-Avatar--decorative-option8___zAr7I", "hop-Avatar--decorative-option9": "Avatar-module__hop-Avatar--decorative-option9___IB7B3", "hop-Avatar__image": "Avatar-module__hop-Avatar__image___3NxIP" };
+var Avatar_module_default = { "hop-Avatar": "Avatar-module__hop-Avatar___2wZ7d", "hop-Avatar--xs": "Avatar-module__hop-Avatar--xs___z8zIk", "hop-Avatar--sm": "Avatar-module__hop-Avatar--sm___Zw8x0", "hop-Avatar--md": "Avatar-module__hop-Avatar--md___-Z5oG", "hop-Avatar--lg": "Avatar-module__hop-Avatar--lg___uUSB-", "hop-Avatar--xl": "Avatar-module__hop-Avatar--xl___yFt46", "hop-Avatar--2xl": "Avatar-module__hop-Avatar--2xl___wiCYV", "hop-Avatar--decorative-option1": "Avatar-module__hop-Avatar--decorative-option1___13Mxt", "hop-Avatar--decorative-option2": "Avatar-module__hop-Avatar--decorative-option2___an9xd", "hop-Avatar--decorative-option3": "Avatar-module__hop-Avatar--decorative-option3___YY-5V", "hop-Avatar--decorative-option4": "Avatar-module__hop-Avatar--decorative-option4___01f67", "hop-Avatar--decorative-option5": "Avatar-module__hop-Avatar--decorative-option5___iG8u0", "hop-Avatar--decorative-option6": "Avatar-module__hop-Avatar--decorative-option6___JdrSS", "hop-Avatar--decorative-option7": "Avatar-module__hop-Avatar--decorative-option7___sekS1", "hop-Avatar--decorative-option8": "Avatar-module__hop-Avatar--decorative-option8___nsipT", "hop-Avatar--decorative-option9": "Avatar-module__hop-Avatar--decorative-option9___YXiOL", "hop-Avatar__image": "Avatar-module__hop-Avatar__image___UqeUZ" };
 var GlobalAvatarCssSelector = "hop-Avatar";
 var AvatarToTextSizeAdapter = {
   xs: "xs",

package/dist/{chunk-YTKE4ERV.js → chunk-Z57BGAOZ.js}

@@ -1,30 +1,33 @@
-import { _SelectValue } from './chunk-2PIWQBQ7.js';
 import { SelectContext } from './chunk-T24MBA34.js';
-import { _Popover } from './chunk-7RTEFFZS.js';
+import { _SelectValue } from './chunk-5SMJSNMW.js';
+import { _Popover } from './chunk-VHRMFZPJ.js';
 import { _Footer } from './chunk-VOZN65OL.js';
-import { _ListBox } from './chunk-WXP3P4KY.js';
-import { ensureTextWrapper } from './chunk-UYXVO6TB.js';
-import { _HelperMessage } from './chunk-X5SCISRD.js';
-import { _Label } from './chunk-BAX352BZ.js';
-import { _ErrorMessage } from './chunk-N7ORIARY.js';
+import { _ListBox } from './chunk-EABCCXRD.js';
+import { _HelperMessage } from './chunk-EXO4OJ7Z.js';
+import { ensureTextWrapper } from './chunk-WILQEDLK.js';
+import { _ErrorMessage } from './chunk-KFPJZFZS.js';
+import { _ToggleArrow } from './chunk-LHX75LVJ.js';
+import { _Label } from './chunk-6NX5XSZH.js';
+import { useFormProps } from './chunk-SH3CLZKH.js';
 import { BadgeContext } from './chunk-CQDLZ42T.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 { cssModule } from './chunk-KVDXQMWI.js';
-import { IconContext, AngleUpIcon, AngleDownIcon } from '@hopper-ui/icons';
+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___y2Mwz", "hop-Select--fluid": "Select-module__hop-Select--fluid___1-5pH", "hop-Select__label": "Select-module__hop-Select__label___p5cFG", "hop-Select__button": "Select-module__hop-Select__button___XDgRJ", "hop-Select__button--sm": "Select-module__hop-Select__button--sm___UiljJ", "hop-Select__button--md": "Select-module__hop-Select__button--md___G0D4n", "hop-Select__prefix": "Select-module__hop-Select__prefix___swd37", "hop-Select__button-icon": "Select-module__hop-Select__button-icon___Sq6Dh", "hop-Select__helper-message": "Select-module__hop-Select__helper-message___UjIEu", "hop-Select__error-message": "Select-module__hop-Select__error-message___Ne-km" };
+var Select_module_default = { "hop-Select": "Select-module__hop-Select___Gdtq5", "hop-Select--fluid": "Select-module__hop-Select--fluid___wLtrm", "hop-Select__label": "Select-module__hop-Select__label___Cbz16", "hop-Select__button": "Select-module__hop-Select__button___eTvmp", "hop-Select__button--sm": "Select-module__hop-Select__button--sm___1FwbV", "hop-Select__button--md": "Select-module__hop-Select__button--md___MLXWH", "hop-Select__prefix": "Select-module__hop-Select__prefix___2h5tm", "hop-Select__button-icon": "Select-module__hop-Select__button-icon___9JJ4H", "hop-Select__helper-message": "Select-module__hop-Select__helper-message___5zmXU", "hop-Select__error-message": "Select-module__hop-Select__error-message___Zgj6f" };
 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,
@@ -138,7 +141,6 @@ function Select(props, ref) {
       ...otherProps,
       children: (selectRenderProps) => {
         const { isOpen } = selectRenderProps;
-        const ButtonIcon = isOpen ? AngleUpIcon : AngleDownIcon;
         return /* @__PURE__ */ jsxs(Fragment, { children: [
           label && /* @__PURE__ */ jsx(
             _Label,
@@ -190,7 +192,13 @@ function Select(props, ref) {
             /* @__PURE__ */ jsx(_SelectValue, { size, children: (valueRenderProps) => {
               return renderValue == null ? void 0 : renderValue(valueRenderProps);
             } }),
-            /* @__PURE__ */ jsx(ButtonIcon, { size: "sm", className: Select_module_default["hop-Select__button-icon"] })
+            /* @__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 })

package/dist/{chunk-XDJMIWOT.js → chunk-ZRT7MWIL.js}

@@ -1,9 +1,10 @@
 import { useSlot } from './chunk-H5YTU3U7.js';
-import { _Spinner } from './chunk-FXB7BBJB.js';
-import { ensureTextWrapper } from './chunk-UYXVO6TB.js';
-import { IconListContext } from './chunk-DHVVYSLB.js';
+import { _Spinner } from './chunk-CC5QQ4YM.js';
 import { ButtonContext } from './chunk-WMTWFKKP.js';
+import { IconListContext } from './chunk-DHVVYSLB.js';
+import { ensureTextWrapper } from './chunk-WILQEDLK.js';
 import { useLocalizedString } from './chunk-TFVDF4YH.js';
+import { useFormProps } from './chunk-SH3CLZKH.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
@@ -16,11 +17,12 @@ 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___g0bsX", "hop-Button--fluid": "Button-module__hop-Button--fluid___U1pC7", "hop-Button--sm": "Button-module__hop-Button--sm___JkRfc", "hop-Button--md": "Button-module__hop-Button--md___UW7nU", "hop-Button--icon-only": "Button-module__hop-Button--icon-only___9-rM-", "hop-Button--primary": "Button-module__hop-Button--primary___3Jpwh", "hop-Button--secondary": "Button-module__hop-Button--secondary___NU-Ve", "hop-Button--upsell": "Button-module__hop-Button--upsell___Zjxjx", "hop-Button--danger": "Button-module__hop-Button--danger___MoOv-", "hop-Button--ghost-primary": "Button-module__hop-Button--ghost-primary___WC15g", "hop-Button--ghost-secondary": "Button-module__hop-Button--ghost-secondary___kxQsj", "hop-Button--ghost-danger": "Button-module__hop-Button--ghost-danger___kblVO", "hop-Button__Spinner": "Button-module__hop-Button__Spinner___3NSsM", "hop-Button__icon": "Button-module__hop-Button__icon___znSPX", "hop-Button__icon-list": "Button-module__hop-Button__icon-list___ufYMi", "hop-Button__text": "Button-module__hop-Button__text___ud1xn", "hop-Button__end-icon": "Button-module__hop-Button__end-icon___05XHV", "hop-Button__end-icon-list": "Button-module__hop-Button__end-icon-list___t5TiC" };
+var Button_module_default = { "hop-Button": "Button-module__hop-Button___aWAvb", "hop-Button--fluid": "Button-module__hop-Button--fluid___pOgS1", "hop-Button--sm": "Button-module__hop-Button--sm___EJn1m", "hop-Button--md": "Button-module__hop-Button--md___4XpPr", "hop-Button--icon-only": "Button-module__hop-Button--icon-only___E63X8", "hop-Button--primary": "Button-module__hop-Button--primary___Lm30i", "hop-Button--secondary": "Button-module__hop-Button--secondary___bl3yb", "hop-Button--upsell": "Button-module__hop-Button--upsell___ZsXQr", "hop-Button--danger": "Button-module__hop-Button--danger___VMtVT", "hop-Button--ghost-primary": "Button-module__hop-Button--ghost-primary___7eXLd", "hop-Button--ghost-secondary": "Button-module__hop-Button--ghost-secondary___6099y", "hop-Button--ghost-danger": "Button-module__hop-Button--ghost-danger___NOYOj", "hop-Button__Spinner": "Button-module__hop-Button__Spinner___tUy92", "hop-Button__icon": "Button-module__hop-Button__icon___WqWnu", "hop-Button__icon-list": "Button-module__hop-Button__icon-list___6mPwn", "hop-Button__text": "Button-module__hop-Button__text___yHV7K", "hop-Button__end-icon": "Button-module__hop-Button__end-icon___YziQH", "hop-Button__end-icon-list": "Button-module__hop-Button__end-icon-list___e0mxc" };
 var GlobalButtonCssSelector = "hop-Button";
 function Button(props, ref) {
   var _a, _b;
   [props, ref] = useContextProps(props, ref, ButtonContext);
+  props = useFormProps(props);
   const { stylingProps, ...ownProps } = useStyledSystem(props);
   const stringFormatter = useLocalizedString();
   const {