@hopper-ui/components 1.3.9 → 1.3.11

package/dist/{chunk-B2O3ZCYC.js → chunk-47AZN77D.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___Ri4v-", "hop-Divider--vertical": "Divider-module__hop-Divider--vertical___wOMqH" };
+var Divider_module_default = { "hop-Divider": "Divider-module__hop-Divider___SMAB0", "hop-Divider--vertical": "Divider-module__hop-Divider--vertical___Bwbk3" };
 var GlobalDividerCssSelector = "hop-Divider";
 function Divider(props, ref) {
   [props, ref] = useContextProps(props, ref, DividerContext);

package/dist/{chunk-5TH7VHRH.js → chunk-4D5OKVKB.js}

@@ -1,19 +1,19 @@
-import { _Text } from './chunk-KQQCELPA.js';
+import { _Text } from './chunk-R5YV23ZF.js';
 import { useImageFallback } from './chunk-NS3XVOQ7.js';
 import { AvatarContext } from './chunk-AES7QBQE.js';
-import { _RichIconAvatarImage } from './chunk-2WK465I4.js';
+import { _RichIconAvatarImage } from './chunk-BXBMRBPB.js';
 import { useRenderProps } from './chunk-NH3IVMXB.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { BrokenImageRichIcon } from '@hopper-ui/icons';
-import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { slot, useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
 import { filterDOMProps, mergeProps } from '@react-aria/utils';
 import { forwardRef, useMemo } from 'react';
 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___5sKQo", "hop-Avatar--xs": "Avatar-module__hop-Avatar--xs___Ady66", "hop-Avatar--sm": "Avatar-module__hop-Avatar--sm___FeU7R", "hop-Avatar--md": "Avatar-module__hop-Avatar--md___ZKXaB", "hop-Avatar--lg": "Avatar-module__hop-Avatar--lg___1aVAg", "hop-Avatar--xl": "Avatar-module__hop-Avatar--xl___OGORu", "hop-Avatar--2xl": "Avatar-module__hop-Avatar--2xl___IihrO", "hop-Avatar--decorative-option1": "Avatar-module__hop-Avatar--decorative-option1___r8yYu", "hop-Avatar--decorative-option2": "Avatar-module__hop-Avatar--decorative-option2___QeM5w", "hop-Avatar--decorative-option3": "Avatar-module__hop-Avatar--decorative-option3___nsycG", "hop-Avatar--decorative-option4": "Avatar-module__hop-Avatar--decorative-option4___uBdkS", "hop-Avatar--decorative-option5": "Avatar-module__hop-Avatar--decorative-option5___VYfAD", "hop-Avatar--decorative-option6": "Avatar-module__hop-Avatar--decorative-option6___hSbrh", "hop-Avatar--decorative-option7": "Avatar-module__hop-Avatar--decorative-option7___yTTZQ", "hop-Avatar--decorative-option8": "Avatar-module__hop-Avatar--decorative-option8___Ye64F", "hop-Avatar--decorative-option9": "Avatar-module__hop-Avatar--decorative-option9___U63SX", "hop-Avatar__image": "Avatar-module__hop-Avatar__image___wmX-V" };
+var Avatar_module_default = { "hop-Avatar": "Avatar-module__hop-Avatar___ZgR4r", "hop-Avatar--xs": "Avatar-module__hop-Avatar--xs___dwhu9", "hop-Avatar--sm": "Avatar-module__hop-Avatar--sm___Nan3f", "hop-Avatar--md": "Avatar-module__hop-Avatar--md___mGuHB", "hop-Avatar--lg": "Avatar-module__hop-Avatar--lg___WR-ih", "hop-Avatar--xl": "Avatar-module__hop-Avatar--xl___TT-er", "hop-Avatar--2xl": "Avatar-module__hop-Avatar--2xl___eXLRo", "hop-Avatar--decorative-option1": "Avatar-module__hop-Avatar--decorative-option1___MAaDm", "hop-Avatar--decorative-option2": "Avatar-module__hop-Avatar--decorative-option2___EumTB", "hop-Avatar--decorative-option3": "Avatar-module__hop-Avatar--decorative-option3___wkJy5", "hop-Avatar--decorative-option4": "Avatar-module__hop-Avatar--decorative-option4___q0rep", "hop-Avatar--decorative-option5": "Avatar-module__hop-Avatar--decorative-option5___gj6Bw", "hop-Avatar--decorative-option6": "Avatar-module__hop-Avatar--decorative-option6___8xcmu", "hop-Avatar--decorative-option7": "Avatar-module__hop-Avatar--decorative-option7___guxgA", "hop-Avatar--decorative-option8": "Avatar-module__hop-Avatar--decorative-option8___iWrgq", "hop-Avatar--decorative-option9": "Avatar-module__hop-Avatar--decorative-option9___B-Sd6", "hop-Avatar__image": "Avatar-module__hop-Avatar__image___AIZy-" };
 var GlobalAvatarCssSelector = "hop-Avatar";
 var AvatarToTextSizeAdapter = {
   xs: "xs",
@@ -162,7 +162,7 @@ function Avatar(props, ref) {
     }
   );
 }
-var _Avatar = forwardRef(Avatar);
+var _Avatar = slot("avatar", forwardRef(Avatar));
 _Avatar.displayName = "Avatar";
 
 export { AvatarToTextSizeAdapter, GlobalAvatarCssSelector, _Avatar };

package/dist/{chunk-54U727IV.js → chunk-4PLO6M5P.js}

@@ -1,5 +1,5 @@
 import { SpinnerContext } from './chunk-4ZYV2XLW.js';
-import { _Text } from './chunk-KQQCELPA.js';
+import { _Text } from './chunk-R5YV23ZF.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
@@ -9,7 +9,7 @@ import { useContextProps, ProgressBar } from 'react-aria-components';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // css-module:./Spinner.module.css#css-module
-var Spinner_module_default = { "hop-Spinner": "Spinner-module__hop-Spinner___mEPxX", "spin": "Spinner-module__spin___6LPFS", "hop-Spinner--sm": "Spinner-module__hop-Spinner--sm___yTrSl", "hop-Spinner--md": "Spinner-module__hop-Spinner--md___tnCZQ", "hop-Spinner--lg": "Spinner-module__hop-Spinner--lg___2X4so", "hop-Spinner__track": "Spinner-module__hop-Spinner__track___oxWCw", "hop-Spinner__fill": "Spinner-module__hop-Spinner__fill___uPfid", "hop-Spinner__label": "Spinner-module__hop-Spinner__label___rDXkL" };
+var Spinner_module_default = { "hop-Spinner": "Spinner-module__hop-Spinner___YL0bz", "spin": "Spinner-module__spin___zECvS", "hop-Spinner--sm": "Spinner-module__hop-Spinner--sm___xnMfd", "hop-Spinner--md": "Spinner-module__hop-Spinner--md___mk2yE", "hop-Spinner--lg": "Spinner-module__hop-Spinner--lg___zFjKu", "hop-Spinner__track": "Spinner-module__hop-Spinner__track___RfN-C", "hop-Spinner__fill": "Spinner-module__hop-Spinner__fill___ix3iM", "hop-Spinner__label": "Spinner-module__hop-Spinner__label___3YfAP" };
 var GlobalSpinnerCssSelector = "hop-Spinner";
 var SpinnerToTextSizeAdapter = {
   sm: "xs",

package/dist/{chunk-BGOYDN4M.js → chunk-4ZCY2KEA.js}

@@ -1,6 +1,6 @@
 import { useIsOverflow } from './chunk-EHXOXTDN.js';
 import { useLocalizedString } from './chunk-TFVDF4YH.js';
-import { _Text } from './chunk-KQQCELPA.js';
+import { _Text } from './chunk-R5YV23ZF.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { AvatarContext } from './chunk-AES7QBQE.js';
@@ -16,7 +16,7 @@ import { useContextProps, SelectValueContext, SelectStateContext, useSlottedCont
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./SelectValue.module.css#css-module
-var SelectValue_module_default = { "hop-SelectValue": "SelectValue-module__hop-SelectValue___fN5Zm", "hop-SelectValue__text": "SelectValue-module__hop-SelectValue__text___VXiZL", "hop-SelectValue__avatar": "SelectValue-module__hop-SelectValue__avatar___VKTK6", "hop-SelectValue__icon": "SelectValue-module__hop-SelectValue__icon___6X7KT", "hop-SelectValue__end-icon": "SelectValue-module__hop-SelectValue__end-icon___WxTCr" };
+var SelectValue_module_default = { "hop-SelectValue": "SelectValue-module__hop-SelectValue___mZ7gE", "hop-SelectValue__text": "SelectValue-module__hop-SelectValue__text___XV6Il", "hop-SelectValue__avatar": "SelectValue-module__hop-SelectValue__avatar___VlXGA", "hop-SelectValue__icon": "SelectValue-module__hop-SelectValue__icon___fZ3ID", "hop-SelectValue__end-icon": "SelectValue-module__hop-SelectValue__end-icon___ATXlH" };
 var GlobalSelectValueCssSelector = "hop-SelectValue";
 var SelectValueToAvatarSizeAdapter = {
   sm: "xs",

package/dist/{chunk-ANO4F3LJ.js → chunk-4ZUCHCV2.js}

@@ -14,7 +14,7 @@ import { useContextProps, composeRenderProps, RadioGroup as RadioGroup$1 } from
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./RadioGroup.module.css#css-module
-var RadioGroup_module_default = { "hop-RadioGroup": "RadioGroup-module__hop-RadioGroup___nxPSN", "hop-RadioGroup--bordered": "RadioGroup-module__hop-RadioGroup--bordered___vrAHq", "hop-RadioGroup--sm": "RadioGroup-module__hop-RadioGroup--sm___pG-g0", "hop-RadioGroup--md": "RadioGroup-module__hop-RadioGroup--md___IIICc", "hop-RadioGroup__label": "RadioGroup-module__hop-RadioGroup__label___UhFFE", "hop-RadioGroup__list": "RadioGroup-module__hop-RadioGroup__list___f-mUy", "hop-RadioGroup__radio": "RadioGroup-module__hop-RadioGroup__radio___clP7i", "hop-RadioGroup__error-message": "RadioGroup-module__hop-RadioGroup__error-message___v73ED", "hop-RadioGroup__helper-message": "RadioGroup-module__hop-RadioGroup__helper-message___ViS27" };
+var RadioGroup_module_default = { "hop-RadioGroup": "RadioGroup-module__hop-RadioGroup___0RFNM", "hop-RadioGroup--bordered": "RadioGroup-module__hop-RadioGroup--bordered___pTgpI", "hop-RadioGroup--sm": "RadioGroup-module__hop-RadioGroup--sm___4mIru", "hop-RadioGroup--md": "RadioGroup-module__hop-RadioGroup--md___ROeVD", "hop-RadioGroup__label": "RadioGroup-module__hop-RadioGroup__label___4WTvL", "hop-RadioGroup__list": "RadioGroup-module__hop-RadioGroup__list___gjZY3", "hop-RadioGroup__radio": "RadioGroup-module__hop-RadioGroup__radio___h347z", "hop-RadioGroup__error-message": "RadioGroup-module__hop-RadioGroup__error-message___2IZzf", "hop-RadioGroup__helper-message": "RadioGroup-module__hop-RadioGroup__helper-message___x25sX" };
 var GlobalRadioGroupCssSelector = "hop-RadioGroup";
 function RadioGroup(props, ref) {
   var _a, _b;
@@ -25,10 +25,12 @@ function RadioGroup(props, ref) {
     children,
     isDisabled,
     isInvalid,
+    isRequired,
     orientation: orientationProp = "vertical",
     size: sizeProp = "md",
     style: styleProp,
     variant = "borderless",
+    necessityIndicator,
     ...otherProps
   } = ownProps;
   const orientation = (_a = useResponsiveValue(orientationProp)) != null ? _a : "vertical";
@@ -55,7 +57,9 @@ function RadioGroup(props, ref) {
     {
       values: [
         [LabelContext, {
-          className: RadioGroup_module_default["hop-RadioGroup__label"]
+          className: RadioGroup_module_default["hop-RadioGroup__label"],
+          isRequired,
+          necessityIndicator
         }],
         [RadioContext, {
           className: RadioGroup_module_default["hop-RadioGroup__radio"],
@@ -86,6 +90,7 @@ function RadioGroup(props, ref) {
           style,
           isInvalid,
           isDisabled,
+          isRequired,
           orientation,
           ...otherProps,
           children

package/dist/{chunk-UR3NK3LV.js → chunk-5ORMXIMY.js}

@@ -1,5 +1,5 @@
 import { ClearButtonContext } from './chunk-DXVKHP4V.js';
-import { _EmbeddedButton } from './chunk-4PBFVO5S.js';
+import { _EmbeddedButton } from './chunk-S4JSEGNU.js';
 import { useLocalizedString } from './chunk-TFVDF4YH.js';
 import { DismissIcon } from '@hopper-ui/icons';
 import { forwardRef } from 'react';

package/dist/{chunk-4FVIH73F.js → chunk-5RQ3FMMG.js}

@@ -1,7 +1,7 @@
 import { RadioContext } from './chunk-FU5CCPLP.js';
 import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
-import { _Text } from './chunk-KQQCELPA.js';
+import { _Text } from './chunk-R5YV23ZF.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { useRenderProps } from './chunk-NH3IVMXB.js';
@@ -16,7 +16,7 @@ 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___6cfZi Radio-module__hop-Radio___mjGTL", "hop-DecorativeRadio--sm": "DecorativeRadio-module__hop-DecorativeRadio--sm___pLmcZ Radio-module__hop-Radio--sm___yl7Uc", "hop-DecorativeRadio--md": "DecorativeRadio-module__hop-DecorativeRadio--md___BWIIW Radio-module__hop-Radio--md___Umq9X", "hop-DecorativeRadio__icon": "DecorativeRadio-module__hop-DecorativeRadio__icon___sI5C6 Radio-module__hop-Radio__icon___umH4r", "hop-DecorativeRadio__icon-list": "DecorativeRadio-module__hop-DecorativeRadio__icon-list___B17Uy Radio-module__hop-Radio__icon___umH4r", "hop-DecorativeRadio__box": "DecorativeRadio-module__hop-DecorativeRadio__box___0184v Radio-module__hop-Radio__box___5S65W", "hop-DecorativeRadio__bullet": "DecorativeRadio-module__hop-DecorativeRadio__bullet___6xwhF Radio-module__hop-Radio__bullet___9Zldv", "hop-DecorativeRadio__text": "DecorativeRadio-module__hop-DecorativeRadio__text___ip08j Radio-module__hop-Radio__text___Jw3rk" };
+var DecorativeRadio_module_default = { "hop-DecorativeRadio": "DecorativeRadio-module__hop-DecorativeRadio___Cyo1g Radio-module__hop-Radio___ioF6P", "hop-DecorativeRadio--sm": "DecorativeRadio-module__hop-DecorativeRadio--sm___vbgMK Radio-module__hop-Radio--sm___t9FlK", "hop-DecorativeRadio--md": "DecorativeRadio-module__hop-DecorativeRadio--md___47ApB Radio-module__hop-Radio--md___Ea4bQ", "hop-DecorativeRadio__icon": "DecorativeRadio-module__hop-DecorativeRadio__icon___yYVEn Radio-module__hop-Radio__icon___yDzLG", "hop-DecorativeRadio__icon-list": "DecorativeRadio-module__hop-DecorativeRadio__icon-list___x2hBn Radio-module__hop-Radio__icon___yDzLG", "hop-DecorativeRadio__box": "DecorativeRadio-module__hop-DecorativeRadio__box___fo0iT Radio-module__hop-Radio__box___dwVaq", "hop-DecorativeRadio__bullet": "DecorativeRadio-module__hop-DecorativeRadio__bullet___daQJi Radio-module__hop-Radio__bullet___Ir9Zc", "hop-DecorativeRadio__text": "DecorativeRadio-module__hop-DecorativeRadio__text___Np-LP Radio-module__hop-Radio__text___IziEM" };
 var GlobalDecorativeRadioCssSelector = "hop-DecorativeRadio";
 function DecorativeRadio(props, ref) {
   var _a;

package/dist/{chunk-GDVP2QEZ.js → chunk-64O3N7JE.js}

@@ -10,7 +10,7 @@ import { useContextProps, useSlottedContext, InputContext, TextAreaContext, Fiel
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./InputGroup.module.css#css-module
-var InputGroup_module_default = { "hop-InputGroup": "InputGroup-module__hop-InputGroup___-dY-s", "hop-InputGroup--fluid": "InputGroup-module__hop-InputGroup--fluid___VIFfq", "hop-InputGroup--sm": "InputGroup-module__hop-InputGroup--sm___MdwFD", "hop-InputGroup__input": "InputGroup-module__hop-InputGroup__input___prIHX", "hop-InputGroup__textarea": "InputGroup-module__hop-InputGroup__textarea___fq38N", "hop-InputGroup__embedded-button": "InputGroup-module__hop-InputGroup__embedded-button___1SGd6" };
+var InputGroup_module_default = { "hop-InputGroup": "InputGroup-module__hop-InputGroup___NN--M", "hop-InputGroup--fluid": "InputGroup-module__hop-InputGroup--fluid___rQMzu", "hop-InputGroup--sm": "InputGroup-module__hop-InputGroup--sm___yHqb0", "hop-InputGroup__input": "InputGroup-module__hop-InputGroup__input___RpES-", "hop-InputGroup__textarea": "InputGroup-module__hop-InputGroup__textarea___dsv5m", "hop-InputGroup__embedded-button": "InputGroup-module__hop-InputGroup__embedded-button___uOnhf" };
 var GlobalInputGroupCssSelector = "hop-InputGroup";
 function InputGroup(props, ref) {
   var _a, _b;

package/dist/{chunk-JX5YYFB3.js → chunk-6HV7YSW5.js}

@@ -1,17 +1,18 @@
-import { _OverlineText } from './chunk-2SF7BBJT.js';
+import { _OverlineText } from './chunk-BUP6LEQX.js';
 import { BadgeContext } from './chunk-CQDLZ42T.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { useRenderProps } from './chunk-NH3IVMXB.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
-import { useStyledSystem } from '@hopper-ui/styled-system';
+import { slot, useStyledSystem } from '@hopper-ui/styled-system';
+import { filterDOMProps } from '@react-aria/utils';
 import { forwardRef } from 'react';
 import { mergeProps } from 'react-aria';
 import { useContextProps, composeRenderProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Badge.module.css#css-module
-var Badge_module_default = { "hop-Badge": "Badge-module__hop-Badge___PVPdF" };
+var Badge_module_default = { "hop-Badge": "Badge-module__hop-Badge___V3Uim" };
 var GlobalBadgeCssSelector = "hop-Badge";
 function Badge(props, ref) {
   [props, ref] = useContextProps(props, ref, BadgeContext);
@@ -54,10 +55,11 @@ function Badge(props, ref) {
     }
   });
   const isDot = isIndeterminate || !renderProps.children;
+  const filteredProps = filterDOMProps(otherProps, { labelable: true });
   return /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsx(
     _OverlineText,
     {
-      ...mergeProps(otherProps, renderProps),
+      ...mergeProps(filteredProps, renderProps),
       ref,
       slot: slot != null ? slot : void 0,
       "data-disabled": isDisabled || void 0,
@@ -71,7 +73,7 @@ function Badge(props, ref) {
     }
   ) });
 }
-var _Badge = forwardRef(Badge);
+var _Badge = slot("badge", forwardRef(Badge));
 _Badge.displayName = "Badge";
 
 export { GlobalBadgeCssSelector, _Badge };

package/dist/{chunk-7LTA4KPO.js → chunk-6NS4AQDI.js}

@@ -1,6 +1,6 @@
 import { SearchFieldContext } from './chunk-3NKF5TPD.js';
-import { _InputGroup } from './chunk-GDVP2QEZ.js';
-import { _ClearButton } from './chunk-UR3NK3LV.js';
+import { _InputGroup } from './chunk-64O3N7JE.js';
+import { _ClearButton } from './chunk-5ORMXIMY.js';
 import { LabelContext } from './chunk-QCA3ZR56.js';
 import { HelperMessageContext } from './chunk-HZKFQ33E.js';
 import { ErrorMessageContext } from './chunk-FAE27DLF.js';
@@ -17,7 +17,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___CmlB-", "hop-SearchField--fluid": "SearchField-module__hop-SearchField--fluid___cTuUW", "hop-SearchField__Label": "SearchField-module__hop-SearchField__Label___w0bGj", "hop-SearchField__prefix": "SearchField-module__hop-SearchField__prefix___EaYlk", "hop-SearchField__InputGroup": "SearchField-module__hop-SearchField__InputGroup___c6F5A", "hop-SearchField--clearable": "SearchField-module__hop-SearchField--clearable___JYBQh", "hop-SearchField__ErrorMessage": "SearchField-module__hop-SearchField__ErrorMessage___83XfA", "hop-SearchField__HelperMessage": "SearchField-module__hop-SearchField__HelperMessage___--Elt", "hop-SearchField__ClearButton": "SearchField-module__hop-SearchField__ClearButton___ErqoJ" };
+var SearchField_module_default = { "hop-SearchField": "SearchField-module__hop-SearchField___RFDHy", "hop-SearchField--fluid": "SearchField-module__hop-SearchField--fluid___NDxnE", "hop-SearchField__Label": "SearchField-module__hop-SearchField__Label___TEslL", "hop-SearchField__prefix": "SearchField-module__hop-SearchField__prefix___Z64S-", "hop-SearchField__InputGroup": "SearchField-module__hop-SearchField__InputGroup___L7N53", "hop-SearchField--clearable": "SearchField-module__hop-SearchField--clearable___ryNci", "hop-SearchField__ErrorMessage": "SearchField-module__hop-SearchField__ErrorMessage___dag-d", "hop-SearchField__HelperMessage": "SearchField-module__hop-SearchField__HelperMessage___ZDx1e", "hop-SearchField__ClearButton": "SearchField-module__hop-SearchField__ClearButton___Q0cbB" };
 var GlobalSearchFieldCssSelector = "hop-SearchField";
 function SearchField(props, ref) {
   var _a;
@@ -39,6 +39,7 @@ function SearchField(props, ref) {
     isDisabled,
     isInvalid,
     isRequired,
+    necessityIndicator,
     ...otherProps
   } = ownProps;
   const inputRef = useObjectRef(mergeRefs(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
@@ -90,7 +91,7 @@ function SearchField(props, ref) {
         SlotProvider,
         {
           values: [
-            [LabelContext, { className: SearchField_module_default["hop-SearchField__Label"], isRequired }],
+            [LabelContext, { className: SearchField_module_default["hop-SearchField__Label"], isRequired, necessityIndicator }],
             [HelperMessageContext, { className: SearchField_module_default["hop-SearchField__HelperMessage"] }],
             [ErrorMessageContext, { className: SearchField_module_default["hop-SearchField__ErrorMessage"] }]
           ],

package/dist/{chunk-4EUVVRTY.js → chunk-7B6XUT4A.js}

@@ -1,14 +1,14 @@
 import { IconListContext } from './chunk-DHVVYSLB.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { IconContext } from '@hopper-ui/icons';
-import { useStyledSystem } from '@hopper-ui/styled-system';
+import { slot, 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:./IconList.module.css#css-module
-var IconList_module_default = { "hop-IconList": "IconList-module__hop-IconList___twZdn" };
+var IconList_module_default = { "hop-IconList": "IconList-module__hop-IconList___zDsGY" };
 var GlobalIconListCssSelector = "hop-IconList";
 function IconList(props, ref) {
   [props, ref] = useContextProps(props, ref, IconListContext);
@@ -46,7 +46,7 @@ function IconList(props, ref) {
     }
   );
 }
-var _IconList = forwardRef(IconList);
+var _IconList = slot("icon", forwardRef(IconList));
 _IconList.displayName = "IconList";
 
 export { GlobalIconListCssSelector, _IconList };

package/dist/{chunk-HCJLAF2O.js → chunk-BJNIT3X3.js}

@@ -1,11 +1,11 @@
 import { TagContext } from './chunk-EWMWQ2MC.js';
-import { _ClearButton } from './chunk-UR3NK3LV.js';
-import { _Spinner } from './chunk-54U727IV.js';
+import { _ClearButton } from './chunk-5ORMXIMY.js';
+import { _Spinner } from './chunk-4PLO6M5P.js';
 import { useLocalizedString } from './chunk-TFVDF4YH.js';
 import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
 import { BadgeContext } from './chunk-CQDLZ42T.js';
-import { _Text } from './chunk-KQQCELPA.js';
+import { _Text } from './chunk-R5YV23ZF.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { AvatarContext } from './chunk-AES7QBQE.js';
@@ -13,13 +13,13 @@ 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 { slot, useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
 import { forwardRef } from 'react';
 import { useContextProps, composeRenderProps, Tag as Tag$1 } from 'react-aria-components';
 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___QPfVY", "hop-Tag--sm": "Tag-module__hop-Tag--sm___PRq4I", "hop-Tag__remove-btn": "Tag-module__hop-Tag__remove-btn___UNdz0", "hop-Tag__Spinner": "Tag-module__hop-Tag__Spinner___tc6Uv", "hop-Tag__avatar": "Tag-module__hop-Tag__avatar___LCkhz", "hop-Tag--md": "Tag-module__hop-Tag--md___k944L", "hop-Tag--lg": "Tag-module__hop-Tag--lg___vSnmb", "hop-Tag--neutral": "Tag-module__hop-Tag--neutral___Dh2gF", "hop-Tag--subdued": "Tag-module__hop-Tag--subdued___pnb-b", "hop-Tag--progress": "Tag-module__hop-Tag--progress___-A1r0", "hop-Tag--positive": "Tag-module__hop-Tag--positive___NmpPG", "hop-Tag--caution": "Tag-module__hop-Tag--caution___Q3b1U", "hop-Tag--negative": "Tag-module__hop-Tag--negative___gJkuU", "hop-Tag--option1": "Tag-module__hop-Tag--option1___48VPO", "hop-Tag--option2": "Tag-module__hop-Tag--option2___07n0q", "hop-Tag--option3": "Tag-module__hop-Tag--option3___0YpqQ", "hop-Tag--option4": "Tag-module__hop-Tag--option4___518kC", "hop-Tag--option5": "Tag-module__hop-Tag--option5___zE-FA", "hop-Tag--option6": "Tag-module__hop-Tag--option6___opxaK", "hop-Tag__icon": "Tag-module__hop-Tag__icon___d-Od0", "hop-Tag__icon-list": "Tag-module__hop-Tag__icon-list___xNT1d", "hop-Tag__text": "Tag-module__hop-Tag__text___HsqI9", "hop-Tag__badge": "Tag-module__hop-Tag__badge___Vt5u0" };
+var Tag_module_default = { "hop-Tag": "Tag-module__hop-Tag___RWse3", "hop-Tag--sm": "Tag-module__hop-Tag--sm___XTsam", "hop-Tag__remove-btn": "Tag-module__hop-Tag__remove-btn___mf440", "hop-Tag__Spinner": "Tag-module__hop-Tag__Spinner___Nx4Nf", "hop-Tag__avatar": "Tag-module__hop-Tag__avatar___IgMGO", "hop-Tag--md": "Tag-module__hop-Tag--md___kwrrH", "hop-Tag--lg": "Tag-module__hop-Tag--lg___y9WYZ", "hop-Tag--neutral": "Tag-module__hop-Tag--neutral___4o-fj", "hop-Tag--subdued": "Tag-module__hop-Tag--subdued___WPg-6", "hop-Tag--progress": "Tag-module__hop-Tag--progress___jsEEE", "hop-Tag--positive": "Tag-module__hop-Tag--positive___O9Jp-", "hop-Tag--caution": "Tag-module__hop-Tag--caution___9ObFS", "hop-Tag--negative": "Tag-module__hop-Tag--negative___RFpdV", "hop-Tag--option1": "Tag-module__hop-Tag--option1___40MPg", "hop-Tag--option2": "Tag-module__hop-Tag--option2___aEYFX", "hop-Tag--option3": "Tag-module__hop-Tag--option3___Da5dd", "hop-Tag--option4": "Tag-module__hop-Tag--option4___Y8j2B", "hop-Tag--option5": "Tag-module__hop-Tag--option5___a7C3C", "hop-Tag--option6": "Tag-module__hop-Tag--option6___htWZQ", "hop-Tag__icon": "Tag-module__hop-Tag__icon___UsjFW", "hop-Tag__icon-list": "Tag-module__hop-Tag__icon-list___Ab-KW", "hop-Tag__text": "Tag-module__hop-Tag__text___FRwNg", "hop-Tag__badge": "Tag-module__hop-Tag__badge___DlY7z" };
 var GlobalTagCssSelector = "hop-Tag";
 var TagToTextSizeAdapter = {
   sm: "xs",
@@ -147,7 +147,7 @@ function Tag(props, ref) {
     }
   );
 }
-var _Tag = forwardRef(Tag);
+var _Tag = slot("tag", forwardRef(Tag));
 _Tag.displayName = "Tag";
 
 export { GlobalTagCssSelector, _Tag };

package/dist/{chunk-TRDXTYZD.js → chunk-BPFYQL3X.js}

@@ -1,10 +1,10 @@
 import { useSlot } from './chunk-H5YTU3U7.js';
 import { ButtonContext } from './chunk-WMTWFKKP.js';
-import { _Spinner } from './chunk-54U727IV.js';
+import { _Spinner } from './chunk-4PLO6M5P.js';
 import { useLocalizedString } from './chunk-TFVDF4YH.js';
 import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
-import { _Text } from './chunk-KQQCELPA.js';
+import { _Text } from './chunk-R5YV23ZF.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { useRenderProps } from './chunk-NH3IVMXB.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
@@ -19,7 +19,7 @@ import { useContextProps, ButtonContext as ButtonContext$1, composeRenderProps,
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // css-module:./Button.module.css#css-module
-var Button_module_default = { "hop-Button": "Button-module__hop-Button___hJrlG", "hop-Button--icon-only": "Button-module__hop-Button--icon-only___FjUDk", "hop-Button--fluid": "Button-module__hop-Button--fluid___zHyAn", "hop-Button--sm": "Button-module__hop-Button--sm___TjmEa", "hop-Button--primary": "Button-module__hop-Button--primary___x2k3w", "hop-Button--md": "Button-module__hop-Button--md___SSJmI", "hop-Button--secondary": "Button-module__hop-Button--secondary___ehb-w", "hop-Button--upsell": "Button-module__hop-Button--upsell___aWCox", "hop-Button--danger": "Button-module__hop-Button--danger___KtNGT", "hop-Button--ghost-danger": "Button-module__hop-Button--ghost-danger___DLGVS", "hop-Button--ghost-secondary": "Button-module__hop-Button--ghost-secondary___H0XJg", "hop-Button--ghost-primary": "Button-module__hop-Button--ghost-primary___SaGFj", "hop-Button__Spinner": "Button-module__hop-Button__Spinner___ItCTY", "hop-Button__icon": "Button-module__hop-Button__icon___EQqO8", "hop-Button__icon-list": "Button-module__hop-Button__icon-list___nrpu8", "hop-Button__text": "Button-module__hop-Button__text___TXP9n", "hop-Button__end-icon": "Button-module__hop-Button__end-icon___sFMht", "hop-Button__end-icon-list": "Button-module__hop-Button__end-icon-list___f9BkT" };
+var Button_module_default = { "hop-Button": "Button-module__hop-Button___hojO-", "hop-Button--icon-only": "Button-module__hop-Button--icon-only___Gi0po", "hop-Button--fluid": "Button-module__hop-Button--fluid___NO99C", "hop-Button--sm": "Button-module__hop-Button--sm___-RA78", "hop-Button--primary": "Button-module__hop-Button--primary___xS4oy", "hop-Button--md": "Button-module__hop-Button--md___wFYqd", "hop-Button--secondary": "Button-module__hop-Button--secondary___tTrwa", "hop-Button--upsell": "Button-module__hop-Button--upsell___mUM2v", "hop-Button--danger": "Button-module__hop-Button--danger___Z2GK8", "hop-Button--ghost-danger": "Button-module__hop-Button--ghost-danger___KNavm", "hop-Button--ghost-secondary": "Button-module__hop-Button--ghost-secondary___LsiEC", "hop-Button--ghost-primary": "Button-module__hop-Button--ghost-primary___nTvub", "hop-Button__Spinner": "Button-module__hop-Button__Spinner___gV-H6", "hop-Button__icon": "Button-module__hop-Button__icon___RtQPm", "hop-Button__icon-list": "Button-module__hop-Button__icon-list___rKQjq", "hop-Button__text": "Button-module__hop-Button__text___-QRvo", "hop-Button__end-icon": "Button-module__hop-Button__end-icon___k3vEc", "hop-Button__end-icon-list": "Button-module__hop-Button__end-icon-list___nk6Qo" };
 var GlobalButtonCssSelector = "hop-Button";
 var additionalButtonHTMLAttributes = /* @__PURE__ */ new Set(["form", "formAction", "formEncType", "formMethod", "formNoValidate", "formTarget", "name", "value"]);
 function useSimulatedRACButton(props, ref) {

package/dist/{chunk-2SF7BBJT.js → chunk-BUP6LEQX.js}

@@ -7,7 +7,7 @@ import { useContextProps, Text } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./OverlineText.module.css#css-module
-var OverlineText_module_default = { "hop-OverlineText": "OverlineText-module__hop-OverlineText___XDVrN", "hop-OverlineText__text": "OverlineText-module__hop-OverlineText__text___nGtRo" };
+var OverlineText_module_default = { "hop-OverlineText": "OverlineText-module__hop-OverlineText___8qz2T", "hop-OverlineText__text": "OverlineText-module__hop-OverlineText__text___coZ7j" };
 var GlobalOverlineTextCssSelector = "hop-OverlineText";
 function OverlineText(props, ref) {
   [props, ref] = useContextProps(props, ref, OverlineTextContext);

package/dist/{chunk-2WK465I4.js → chunk-BXBMRBPB.js}

@@ -4,14 +4,14 @@ import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { RichIconAvatarImageContext } from './chunk-JWW56J7M.js';
 import { RichIconContext } from '@hopper-ui/icons';
-import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { slot, 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 } from 'react/jsx-runtime';
 
 // css-module:./RichIconAvatarImage.module.css#css-module
-var RichIconAvatarImage_module_default = { "hop-RichIconAvatarImage": "RichIconAvatarImage-module__hop-RichIconAvatarImage___K-Aq7", "hop-RichIconAvatarImage--xs": "RichIconAvatarImage-module__hop-RichIconAvatarImage--xs___ymeLk", "hop-RichIconAvatarImage--sm": "RichIconAvatarImage-module__hop-RichIconAvatarImage--sm___VLxFX", "hop-RichIconAvatarImage--md": "RichIconAvatarImage-module__hop-RichIconAvatarImage--md___wu-FC", "hop-RichIconAvatarImage--lg": "RichIconAvatarImage-module__hop-RichIconAvatarImage--lg___mRfIY", "hop-RichIconAvatarImage--xl": "RichIconAvatarImage-module__hop-RichIconAvatarImage--xl___KfoE8", "hop-RichIconAvatarImage--2xl": "RichIconAvatarImage-module__hop-RichIconAvatarImage--2xl___2t0GA", "hop-RichIconAvatarImage__icon": "RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___bCbWd" };
+var RichIconAvatarImage_module_default = { "hop-RichIconAvatarImage": "RichIconAvatarImage-module__hop-RichIconAvatarImage___NFrBs", "hop-RichIconAvatarImage--xs": "RichIconAvatarImage-module__hop-RichIconAvatarImage--xs___r3eLy", "hop-RichIconAvatarImage--sm": "RichIconAvatarImage-module__hop-RichIconAvatarImage--sm___lZvgm", "hop-RichIconAvatarImage--md": "RichIconAvatarImage-module__hop-RichIconAvatarImage--md___mv--V", "hop-RichIconAvatarImage--lg": "RichIconAvatarImage-module__hop-RichIconAvatarImage--lg___z-TuE", "hop-RichIconAvatarImage--xl": "RichIconAvatarImage-module__hop-RichIconAvatarImage--xl___Sb95-", "hop-RichIconAvatarImage--2xl": "RichIconAvatarImage-module__hop-RichIconAvatarImage--2xl___hfA8x", "hop-RichIconAvatarImage__icon": "RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___0EH4w" };
 var GlobalRichIconAvatarImageCssSelector = "hop-RichIconAvatarImage";
 var AvatarToIconSizeAdapter = {
   xs: "md",
@@ -84,7 +84,7 @@ function RichIconAvatarImage(props, ref) {
     }
   );
 }
-var _RichIconAvatarImage = forwardRef(RichIconAvatarImage);
+var _RichIconAvatarImage = slot("avatar", forwardRef(RichIconAvatarImage));
 _RichIconAvatarImage.displayName = "RichIconAvatarImage";
 
 export { AvatarToIconSizeAdapter, GlobalRichIconAvatarImageCssSelector, _RichIconAvatarImage };

package/dist/{chunk-KOT3ULJY.js → chunk-D7WXRB6L.js}

@@ -1,7 +1,7 @@
 import { CheckboxContext } from './chunk-2EAZPH3M.js';
 import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
-import { _Text } from './chunk-KQQCELPA.js';
+import { _Text } from './chunk-R5YV23ZF.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
@@ -14,7 +14,7 @@ import { useContextProps, composeRenderProps, Checkbox as Checkbox$1 } from 'rea
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./Checkbox.module.css#css-module
-var Checkbox_module_default = { "hop-Checkbox": "Checkbox-module__hop-Checkbox___ftNKr", "hop-Checkbox--sm": "Checkbox-module__hop-Checkbox--sm___aBalJ", "hop-Checkbox--md": "Checkbox-module__hop-Checkbox--md___NRQ6W", "hop-Checkbox__icon": "Checkbox-module__hop-Checkbox__icon___9RX3t", "hop-Checkbox__icon-list": "Checkbox-module__hop-Checkbox__icon-list___-RBcy", "hop-Checkbox__box": "Checkbox-module__hop-Checkbox__box___aUVd0", "hop-Checkbox__check": "Checkbox-module__hop-Checkbox__check___6akLc", "hop-Checkbox__text": "Checkbox-module__hop-Checkbox__text___b92Eu" };
+var Checkbox_module_default = { "hop-Checkbox": "Checkbox-module__hop-Checkbox___vVvFz", "hop-Checkbox--sm": "Checkbox-module__hop-Checkbox--sm___kEihE", "hop-Checkbox--md": "Checkbox-module__hop-Checkbox--md___-0gXA", "hop-Checkbox__icon": "Checkbox-module__hop-Checkbox__icon___pTwC-", "hop-Checkbox__icon-list": "Checkbox-module__hop-Checkbox__icon-list___ZfPAq", "hop-Checkbox__box": "Checkbox-module__hop-Checkbox__box___3HpyC", "hop-Checkbox__check": "Checkbox-module__hop-Checkbox__check___0VQFD", "hop-Checkbox__text": "Checkbox-module__hop-Checkbox__text___3dcc1" };
 var GlobalCheckboxCssSelector = "hop-Checkbox";
 function Checkbox(props, ref) {
   var _a;

package/dist/{chunk-GXBVNCVP.js → chunk-DPC3Y6Y2.js}

@@ -1,5 +1,5 @@
 import { ContentContext } from './chunk-IXB2WK56.js';
-import { useStyledSystem } from '@hopper-ui/styled-system';
+import { slot, useStyledSystem } from '@hopper-ui/styled-system';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { useContextProps } from 'react-aria-components';
@@ -37,7 +37,7 @@ function Content(props, ref) {
     }
   );
 }
-var _Content = forwardRef(Content);
+var _Content = slot("content", forwardRef(Content));
 _Content.displayName = "Content";
 
 export { GlobalContentCssSelector, _Content };