@hopper-ui/components 1.3.10 → 1.3.12

package/dist/{chunk-CIKHW47C.js → chunk-24KHRRRV.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___E2-k9", "hop-InputGroup--fluid": "InputGroup-module__hop-InputGroup--fluid___Q-hCw", "hop-InputGroup--sm": "InputGroup-module__hop-InputGroup--sm___i6g3r", "hop-InputGroup__input": "InputGroup-module__hop-InputGroup__input___feDtc", "hop-InputGroup__textarea": "InputGroup-module__hop-InputGroup__textarea___UBhut", "hop-InputGroup__embedded-button": "InputGroup-module__hop-InputGroup__embedded-button___TyVai" };
+var InputGroup_module_default = { "hop-InputGroup": "InputGroup-module__hop-InputGroup___789bx", "hop-InputGroup--fluid": "InputGroup-module__hop-InputGroup--fluid___Vbf7T", "hop-InputGroup--sm": "InputGroup-module__hop-InputGroup--sm___dTBN3", "hop-InputGroup__input": "InputGroup-module__hop-InputGroup__input___gNcLo", "hop-InputGroup__textarea": "InputGroup-module__hop-InputGroup__textarea___mxqkp", "hop-InputGroup__embedded-button": "InputGroup-module__hop-InputGroup__embedded-button___ZuCK1" };
 var GlobalInputGroupCssSelector = "hop-InputGroup";
 function InputGroup(props, ref) {
   var _a, _b;

package/dist/{chunk-QX6MTYPY.js → chunk-2FQE5VSB.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___PNJy9", "hop-Divider--vertical": "Divider-module__hop-Divider--vertical___wAEUb" };
+var Divider_module_default = { "hop-Divider": "Divider-module__hop-Divider___aCvBE", "hop-Divider--vertical": "Divider-module__hop-Divider--vertical___Q7P3v" };
 var GlobalDividerCssSelector = "hop-Divider";
 function Divider(props, ref) {
   [props, ref] = useContextProps(props, ref, DividerContext);

package/dist/{chunk-ARURHRKE.js → chunk-2GDRIOUE.js}

@@ -13,7 +13,7 @@ import { useContextProps, composeRenderProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./RadioField.module.css#css-module
-var RadioField_module_default = { "hop-RadioField": "RadioField-module__hop-RadioField___rwaZY", "hop-RadioField--sm": "RadioField-module__hop-RadioField--sm___1Q2QK", "hop-RadioField--md": "RadioField-module__hop-RadioField--md___YX5XY", "hop-RadioField__description": "RadioField-module__hop-RadioField__description___6uwj3", "hop-RadioField__radio": "RadioField-module__hop-RadioField__radio___lxu0c" };
+var RadioField_module_default = { "hop-RadioField": "RadioField-module__hop-RadioField___tC2Bd", "hop-RadioField--sm": "RadioField-module__hop-RadioField--sm___h8cJW", "hop-RadioField--md": "RadioField-module__hop-RadioField--md___aewf9", "hop-RadioField__description": "RadioField-module__hop-RadioField__description___b8ACT", "hop-RadioField__radio": "RadioField-module__hop-RadioField__radio___pEb5G" };
 var GlobalRadioFieldCssSelector = "hop-RadioField";
 var RadioToDescriptionSizeAdapter = {
   sm: "xs",

package/dist/{chunk-7P6QVHCU.js → chunk-2Q7KTNJK.js}

@@ -12,7 +12,7 @@ import { useContextProps, composeRenderProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./SwitchField.module.css#css-module
-var SwitchField_module_default = { "hop-SwitchField": "SwitchField-module__hop-SwitchField___3acY7", "hop-SwitchField--sm": "SwitchField-module__hop-SwitchField--sm___IaTPM", "hop-SwitchField--md": "SwitchField-module__hop-SwitchField--md___19UN-", "hop-SwitchField__description": "SwitchField-module__hop-SwitchField__description___BOkq0", "hop-SwitchField__switch": "SwitchField-module__hop-SwitchField__switch___2IDNK" };
+var SwitchField_module_default = { "hop-SwitchField": "SwitchField-module__hop-SwitchField___B55N1", "hop-SwitchField--sm": "SwitchField-module__hop-SwitchField--sm___R66u9", "hop-SwitchField--md": "SwitchField-module__hop-SwitchField--md___6GIzG", "hop-SwitchField__description": "SwitchField-module__hop-SwitchField__description___bYUxR", "hop-SwitchField__switch": "SwitchField-module__hop-SwitchField__switch___JLz4i" };
 var GlobalSwitchFieldCssSelector = "hop-SwitchField";
 var SwitchToDescriptionSizeAdapter = {
   sm: "xs",

package/dist/{chunk-6J3RVKV4.js → chunk-2T2P33DB.js}

@@ -1,10 +1,10 @@
 import { PopoverContext } from './chunk-SC6ZK5ON.js';
-import { EnsureTextWrapper } from './chunk-ZRGWYBTI.js';
+import { EnsureTextWrapper } from './chunk-WH4BAEX4.js';
 import { TagGroupContext } from './chunk-LCAS3YQV.js';
 import { RadioGroupContext } from './chunk-5MBJWRZD.js';
 import { TextFieldContext } from './chunk-O4XPUINW.js';
 import { ContentContext } from './chunk-IXB2WK56.js';
-import { _Footer } from './chunk-AQITZWYM.js';
+import { _Footer } from './chunk-GTM56LGX.js';
 import { FooterContext } from './chunk-I67NHYK4.js';
 import { NumberFieldContext } from './chunk-ZQ3AWYRR.js';
 import { PasswordFieldContext } from './chunk-QW45G6K4.js';
@@ -15,21 +15,21 @@ import { CheckboxGroupContext } from './chunk-N7YDPVZL.js';
 import { ButtonContext as ButtonContext$1 } from './chunk-WMTWFKKP.js';
 import { ButtonGroupContext } from './chunk-VJQ7M2BK.js';
 import { SelectContext } from './chunk-T24MBA34.js';
-import { _SelectValue } from './chunk-VM6LLJYR.js';
+import { _SelectValue } from './chunk-LTN5Q7MF.js';
 import { HeadingContext } from './chunk-TXZ6BMFR.js';
 import { LabelContext } from './chunk-QCA3ZR56.js';
-import { _ListBox } from './chunk-JMQTEJC4.js';
+import { _ListBox } from './chunk-ZQARUJYZ.js';
 import { isFunction, isNil } from './chunk-TIPN4VYD.js';
 import { ListBoxContext } from './chunk-UIEP5BA5.js';
-import { _ListBoxItem } from './chunk-LU7KOIOH.js';
+import { _ListBoxItem } from './chunk-JSDCGGLX.js';
 import { CheckboxContext } from './chunk-2EAZPH3M.js';
 import { _HopperProvider } from './chunk-NMKBUGSO.js';
 import { LinkContext } from './chunk-4VVNSXIB.js';
 import { FormContext } from './chunk-EURJK4ZT.js';
 import { HelperMessageContext } from './chunk-HZKFQ33E.js';
 import { ErrorMessageContext } from './chunk-FAE27DLF.js';
-import { BadgeContext } from './chunk-CQDLZ42T.js';
 import { ComboBoxContext } from './chunk-4XHTP4GX.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';
@@ -46,7 +46,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import clsx2 from 'clsx';
 
 // css-module:./ComboBox.module.css#css-module
-var ComboBox_module_default = { "hop-ComboBox": "ComboBox-module__hop-ComboBox___vHTc3", "hop-ComboBox--fluid": "ComboBox-module__hop-ComboBox--fluid___Sygs6", "hop-ComboBox__label": "ComboBox-module__hop-ComboBox__label___dU65M", "hop-ComboBox__trigger": "ComboBox-module__hop-ComboBox__trigger___DA5cO", "hop-ComboBox__trigger--sm": "ComboBox-module__hop-ComboBox__trigger--sm___QAEmr", "hop-ComboBox__trigger--md": "ComboBox-module__hop-ComboBox__trigger--md___BawZW", "hop-ComboBox__input": "ComboBox-module__hop-ComboBox__input___5vadV", "hop-ComboBox__button": "ComboBox-module__hop-ComboBox__button___7xDiN", "hop-ComboBox__prefix": "ComboBox-module__hop-ComboBox__prefix___cX4Ec", "hop-ComboBox__button-icon": "ComboBox-module__hop-ComboBox__button-icon___pmSsc", "hop-ComboBox__helper-message": "ComboBox-module__hop-ComboBox__helper-message___JplVw", "hop-ComboBox__error-message": "ComboBox-module__hop-ComboBox__error-message___VIuZj" };
+var ComboBox_module_default = { "hop-ComboBox": "ComboBox-module__hop-ComboBox___LFstu", "hop-ComboBox--fluid": "ComboBox-module__hop-ComboBox--fluid___SHq1e", "hop-ComboBox__label": "ComboBox-module__hop-ComboBox__label___pNSfg", "hop-ComboBox__trigger": "ComboBox-module__hop-ComboBox__trigger___v2lN2", "hop-ComboBox__trigger--sm": "ComboBox-module__hop-ComboBox__trigger--sm___gIaVK", "hop-ComboBox__trigger--md": "ComboBox-module__hop-ComboBox__trigger--md___OULbV", "hop-ComboBox__input": "ComboBox-module__hop-ComboBox__input___LJnG1", "hop-ComboBox__button": "ComboBox-module__hop-ComboBox__button___H-sCX", "hop-ComboBox__prefix": "ComboBox-module__hop-ComboBox__prefix___kZHiP", "hop-ComboBox__button-icon": "ComboBox-module__hop-ComboBox__button-icon___X-IGE", "hop-ComboBox__helper-message": "ComboBox-module__hop-ComboBox__helper-message___AjA6d", "hop-ComboBox__error-message": "ComboBox-module__hop-ComboBox__error-message___c0eFy" };
 var GlobalComboBoxCssSelector = "hop-ComboBox";
 function ComboBox(props, ref) {
   var _a, _b, _c;
@@ -288,7 +288,7 @@ var CompoundComboBox = Object.assign(_ComboBox, {
 });
 
 // css-module:./Form.module.css#css-module
-var Form_module_default = { "hop-Form": "Form-module__hop-Form___3lIeF" };
+var Form_module_default = { "hop-Form": "Form-module__hop-Form___2UXcI" };
 var GlobalFormCssSelector = "hop-Form";
 function Form(props, ref) {
   var _a;
@@ -415,7 +415,7 @@ var _Form = forwardRef(Form);
 _Form.displayName = "Form";
 
 // css-module:./Select.module.css#css-module
-var Select_module_default = { "hop-Select": "Select-module__hop-Select___ZbNLm", "hop-Select--fluid": "Select-module__hop-Select--fluid___K6Mgi", "hop-Select__label": "Select-module__hop-Select__label___7seGi", "hop-Select__button": "Select-module__hop-Select__button___OGYCy", "hop-Select__button--sm": "Select-module__hop-Select__button--sm___gCdBT", "hop-Select__button--md": "Select-module__hop-Select__button--md___iH8gX", "hop-Select__prefix": "Select-module__hop-Select__prefix___NxutE", "hop-Select__button-icon": "Select-module__hop-Select__button-icon___b5ztr", "hop-Select__helper-message": "Select-module__hop-Select__helper-message___zHxAN", "hop-Select__error-message": "Select-module__hop-Select__error-message___ob-XX" };
+var Select_module_default = { "hop-Select": "Select-module__hop-Select___FzIZ6", "hop-Select--fluid": "Select-module__hop-Select--fluid___gYp79", "hop-Select__label": "Select-module__hop-Select__label___kFFOu", "hop-Select__button": "Select-module__hop-Select__button___fycqo", "hop-Select__button--sm": "Select-module__hop-Select__button--sm___xsV2N", "hop-Select__button--md": "Select-module__hop-Select__button--md___w0ahb", "hop-Select__prefix": "Select-module__hop-Select__prefix___vQXy8", "hop-Select__button-icon": "Select-module__hop-Select__button-icon___uwNeI", "hop-Select__helper-message": "Select-module__hop-Select__helper-message___9Oqh7", "hop-Select__error-message": "Select-module__hop-Select__error-message___IBBJm" };
 var GlobalSelectCssSelector = "hop-Select";
 function Select(props, ref) {
   var _a, _b;
@@ -990,7 +990,7 @@ function $f86e6c1ec7da6ebb$export$bc3384a35de93d66(options) {
 }
 
 // css-module:./Popover.module.css#css-module
-var Popover_module_default = { "hop-Popover": "Popover-module__hop-Popover___ISCgW", "fade": "Popover-module__fade___DHO8c", "hop-Popover__wrapper": "Popover-module__hop-Popover__wrapper___03gFJ", "hop-Popover__dialog": "Popover-module__hop-Popover__dialog___qdizI", "hop-Popover__dropdown": "Popover-module__hop-Popover__dropdown___ZgB-c", "hop-Popover__title": "Popover-module__hop-Popover__title___L1FD1", "hop-Popover__content": "Popover-module__hop-Popover__content___jvZrr", "hop-Popover__list-box": "Popover-module__hop-Popover__list-box___99mrp", "hop-Popover__footer": "Popover-module__hop-Popover__footer___YL-9d", "hop-Popover__actions": "Popover-module__hop-Popover__actions___wWdTk", "hop-Popover__action": "Popover-module__hop-Popover__action___XBM2m" };
+var Popover_module_default = { "hop-Popover": "Popover-module__hop-Popover___VyLJ-", "fade": "Popover-module__fade___ywr9k", "hop-Popover__wrapper": "Popover-module__hop-Popover__wrapper___LKlkQ", "hop-Popover__dialog": "Popover-module__hop-Popover__dialog___CCdTM", "hop-Popover__dropdown": "Popover-module__hop-Popover__dropdown___vxUxw", "hop-Popover__title": "Popover-module__hop-Popover__title___ZhIo8", "hop-Popover__content": "Popover-module__hop-Popover__content___UL5Cr", "hop-Popover__list-box": "Popover-module__hop-Popover__list-box___puEf7", "hop-Popover__footer": "Popover-module__hop-Popover__footer___u5Ks-", "hop-Popover__actions": "Popover-module__hop-Popover__actions___mSIJ9", "hop-Popover__action": "Popover-module__hop-Popover__action___a8DkN" };
 var GlobalPopoverCssSelector = "hop-Popover";
 function Popover(props, ref) {
   var _a;

package/dist/{chunk-RKX7GGGY.js → chunk-2XOZMJQO.js}

@@ -1,5 +1,5 @@
 import { AvatarContext } from './chunk-AES7QBQE.js';
-import { _RichIconAvatarImage } from './chunk-RZ4K42NA.js';
+import { _RichIconAvatarImage } from './chunk-W5TXSSFB.js';
 import { useRenderProps } from './chunk-NH3IVMXB.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { AnonymousRichIcon } from '@hopper-ui/icons';

package/dist/{chunk-B44HANDX.js → chunk-2XTLP4NP.js}

@@ -1,5 +1,5 @@
 import { useLocalizedString } from './chunk-TFVDF4YH.js';
-import { _Text } from './chunk-Y7G6PIDC.js';
+import { _Text } from './chunk-EY4ZTKS4.js';
 import { useRenderProps } from './chunk-NH3IVMXB.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
@@ -10,13 +10,18 @@ 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___wI8Lz" };
+var RemainingCharacterCount_module_default = { "hop-RemainingCharacterCount": "RemainingCharacterCount-module__hop-RemainingCharacterCount___yvWAm" };
+var GlobalRemainingCharacterCountCssSelector = "hop-RemainingCharacterCount";
 function RemainingCharacterCount(props, ref) {
   const { stylingProps, ...ownProps } = useStyledSystem(props);
-  const { className, style, count, isDisabled, isInvalid, ...textProps } = ownProps;
+  const { className, style, slot, count, isDisabled, isInvalid, ...textProps } = ownProps;
   const stringFormatter = useLocalizedString();
   const accessibilityString = stringFormatter.format("Input.charactersLeft", { charLeft: count });
-  const classNames = composeClassnameRenderProps(className, cssModule(RemainingCharacterCount_module_default, "hop-RemainingCharacterCount"));
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalRemainingCharacterCountCssSelector,
+    cssModule(RemainingCharacterCount_module_default, "hop-RemainingCharacterCount")
+  );
   const mergedStyles = composeRenderProps(style, (prev) => {
     return {
       ...stylingProps.style,
@@ -41,12 +46,13 @@ function RemainingCharacterCount(props, ref) {
       "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 = "Footer";
+_RemainingCharacterCount.displayName = "RemainingCharacterCount";
 
-export { _RemainingCharacterCount };
+export { GlobalRemainingCharacterCountCssSelector, _RemainingCharacterCount };

package/dist/{chunk-XBVS62J3.js → chunk-33FEE3VD.js}

@@ -1,5 +1,5 @@
 import { ClearButtonContext } from './chunk-DXVKHP4V.js';
-import { _EmbeddedButton } from './chunk-2BYOZEHS.js';
+import { _EmbeddedButton } from './chunk-3H4QDM4L.js';
 import { useLocalizedString } from './chunk-TFVDF4YH.js';
 import { DismissIcon } from '@hopper-ui/icons';
 import { forwardRef } from 'react';

package/dist/{chunk-2BYOZEHS.js → chunk-3H4QDM4L.js}

@@ -3,13 +3,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, Button } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./EmbeddedButton.module.css#css-module
-var EmbeddedButton_module_default = { "hop-EmbeddedButton": "EmbeddedButton-module__hop-EmbeddedButton___oDPL1", "hop-EmbeddedButton--md": "EmbeddedButton-module__hop-EmbeddedButton--md___YerXu", "hop-EmbeddedButton--lg": "EmbeddedButton-module__hop-EmbeddedButton--lg___Orpxh", "hop-EmbeddedButton--neutral": "EmbeddedButton-module__hop-EmbeddedButton--neutral___J2aMz", "hop-EmbeddedButton--subdued": "EmbeddedButton-module__hop-EmbeddedButton--subdued___ktact", "hop-EmbeddedButton--progress": "EmbeddedButton-module__hop-EmbeddedButton--progress___4QSlo", "hop-EmbeddedButton--positive": "EmbeddedButton-module__hop-EmbeddedButton--positive___IkDM8", "hop-EmbeddedButton--caution": "EmbeddedButton-module__hop-EmbeddedButton--caution___LTJKh", "hop-EmbeddedButton--negative": "EmbeddedButton-module__hop-EmbeddedButton--negative___nlex4", "hop-EmbeddedButton--option1": "EmbeddedButton-module__hop-EmbeddedButton--option1___0M1Z9", "hop-EmbeddedButton--option2": "EmbeddedButton-module__hop-EmbeddedButton--option2___uwDHL", "hop-EmbeddedButton--option3": "EmbeddedButton-module__hop-EmbeddedButton--option3___bMb4Q", "hop-EmbeddedButton--option4": "EmbeddedButton-module__hop-EmbeddedButton--option4___6FFR4", "hop-EmbeddedButton--option5": "EmbeddedButton-module__hop-EmbeddedButton--option5___uHcVz", "hop-EmbeddedButton--option6": "EmbeddedButton-module__hop-EmbeddedButton--option6___0CXDL", "hop-EmbeddedButton__icon": "EmbeddedButton-module__hop-EmbeddedButton__icon___Ec-6l" };
+var EmbeddedButton_module_default = { "hop-EmbeddedButton": "EmbeddedButton-module__hop-EmbeddedButton___Rwm5D", "hop-EmbeddedButton--md": "EmbeddedButton-module__hop-EmbeddedButton--md___3XEzJ", "hop-EmbeddedButton--lg": "EmbeddedButton-module__hop-EmbeddedButton--lg___69Cvx", "hop-EmbeddedButton--neutral": "EmbeddedButton-module__hop-EmbeddedButton--neutral___a-x6M", "hop-EmbeddedButton--subdued": "EmbeddedButton-module__hop-EmbeddedButton--subdued___1agRN", "hop-EmbeddedButton--progress": "EmbeddedButton-module__hop-EmbeddedButton--progress___WeO9V", "hop-EmbeddedButton--positive": "EmbeddedButton-module__hop-EmbeddedButton--positive___rNPBC", "hop-EmbeddedButton--caution": "EmbeddedButton-module__hop-EmbeddedButton--caution___zUz9q", "hop-EmbeddedButton--negative": "EmbeddedButton-module__hop-EmbeddedButton--negative___ShEe-", "hop-EmbeddedButton--option1": "EmbeddedButton-module__hop-EmbeddedButton--option1___Y896i", "hop-EmbeddedButton--option2": "EmbeddedButton-module__hop-EmbeddedButton--option2___5I2Vs", "hop-EmbeddedButton--option3": "EmbeddedButton-module__hop-EmbeddedButton--option3___NFl6r", "hop-EmbeddedButton--option4": "EmbeddedButton-module__hop-EmbeddedButton--option4___XA2VM", "hop-EmbeddedButton--option5": "EmbeddedButton-module__hop-EmbeddedButton--option5___w-5eS", "hop-EmbeddedButton--option6": "EmbeddedButton-module__hop-EmbeddedButton--option6___tLkoU", "hop-EmbeddedButton__icon": "EmbeddedButton-module__hop-EmbeddedButton__icon___-4uaw" };
 var GlobalEmbeddedButtonCssSelector = "hop-EmbeddedButton";
 function EmbeddedButton(props, ref) {
   var _a;
@@ -69,7 +69,7 @@ function EmbeddedButton(props, ref) {
     }
   );
 }
-var _EmbeddedButton = forwardRef(EmbeddedButton);
+var _EmbeddedButton = slot("button", forwardRef(EmbeddedButton));
 _EmbeddedButton.displayName = "EmbeddedButton";
 
 export { GlobalEmbeddedButtonCssSelector, _EmbeddedButton };

package/dist/{chunk-JRL2S56W.js → chunk-3MA53PNO.js}

@@ -1,11 +1,11 @@
 import { TagContext } from './chunk-EWMWQ2MC.js';
-import { _ClearButton } from './chunk-XBVS62J3.js';
-import { _Spinner } from './chunk-XDRKVTAI.js';
+import { _ClearButton } from './chunk-33FEE3VD.js';
+import { _Spinner } from './chunk-CPRGKGB6.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-Y7G6PIDC.js';
+import { _Text } from './chunk-EY4ZTKS4.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___gYajJ", "hop-Tag--sm": "Tag-module__hop-Tag--sm___xgy7v", "hop-Tag__remove-btn": "Tag-module__hop-Tag__remove-btn___a7sSh", "hop-Tag__Spinner": "Tag-module__hop-Tag__Spinner___UbQq5", "hop-Tag__avatar": "Tag-module__hop-Tag__avatar___Eq97E", "hop-Tag--md": "Tag-module__hop-Tag--md___3bIjI", "hop-Tag--lg": "Tag-module__hop-Tag--lg___gyxe-", "hop-Tag--neutral": "Tag-module__hop-Tag--neutral___4RXQ-", "hop-Tag--subdued": "Tag-module__hop-Tag--subdued___V-IFB", "hop-Tag--progress": "Tag-module__hop-Tag--progress___KRxyM", "hop-Tag--positive": "Tag-module__hop-Tag--positive___y0R1a", "hop-Tag--caution": "Tag-module__hop-Tag--caution___3AuKR", "hop-Tag--negative": "Tag-module__hop-Tag--negative___qGVub", "hop-Tag--option1": "Tag-module__hop-Tag--option1___iP-MY", "hop-Tag--option2": "Tag-module__hop-Tag--option2___K9mXa", "hop-Tag--option3": "Tag-module__hop-Tag--option3___wPjxx", "hop-Tag--option4": "Tag-module__hop-Tag--option4___HlCdF", "hop-Tag--option5": "Tag-module__hop-Tag--option5___68umF", "hop-Tag--option6": "Tag-module__hop-Tag--option6___6L7iF", "hop-Tag__icon": "Tag-module__hop-Tag__icon___3HZP1", "hop-Tag__icon-list": "Tag-module__hop-Tag__icon-list___gCDvv", "hop-Tag__text": "Tag-module__hop-Tag__text___VHIAH", "hop-Tag__badge": "Tag-module__hop-Tag__badge___B9x2Q" };
+var Tag_module_default = { "hop-Tag": "Tag-module__hop-Tag___zbWcB", "hop-Tag--sm": "Tag-module__hop-Tag--sm___JgL3x", "hop-Tag__remove-btn": "Tag-module__hop-Tag__remove-btn___5Av84", "hop-Tag__Spinner": "Tag-module__hop-Tag__Spinner___xWqWG", "hop-Tag__avatar": "Tag-module__hop-Tag__avatar___1cqsY", "hop-Tag--md": "Tag-module__hop-Tag--md___84uAb", "hop-Tag--lg": "Tag-module__hop-Tag--lg___1mPuV", "hop-Tag--neutral": "Tag-module__hop-Tag--neutral___ow55T", "hop-Tag--subdued": "Tag-module__hop-Tag--subdued___6xaP8", "hop-Tag--progress": "Tag-module__hop-Tag--progress___7EDyV", "hop-Tag--positive": "Tag-module__hop-Tag--positive___UU1Go", "hop-Tag--caution": "Tag-module__hop-Tag--caution___ZSo1F", "hop-Tag--negative": "Tag-module__hop-Tag--negative___fWRDr", "hop-Tag--option1": "Tag-module__hop-Tag--option1___Eq8Bx", "hop-Tag--option2": "Tag-module__hop-Tag--option2___dfRO-", "hop-Tag--option3": "Tag-module__hop-Tag--option3___2XCMT", "hop-Tag--option4": "Tag-module__hop-Tag--option4___W4NxX", "hop-Tag--option5": "Tag-module__hop-Tag--option5___lA-8I", "hop-Tag--option6": "Tag-module__hop-Tag--option6___SYxXc", "hop-Tag__icon": "Tag-module__hop-Tag__icon___luOM1", "hop-Tag__icon-list": "Tag-module__hop-Tag__icon-list___T8W-e", "hop-Tag__text": "Tag-module__hop-Tag__text___p-qY-", "hop-Tag__badge": "Tag-module__hop-Tag__badge___7N3O1" };
 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-OBLOV2RN.js → chunk-42W5GW3R.js}

@@ -1,6 +1,6 @@
 import { PasswordFieldContext } from './chunk-QW45G6K4.js';
-import { _InputGroup } from './chunk-CIKHW47C.js';
-import { _EmbeddedButton } from './chunk-2BYOZEHS.js';
+import { _InputGroup } from './chunk-24KHRRRV.js';
+import { _EmbeddedButton } from './chunk-3H4QDM4L.js';
 import { LabelContext } from './chunk-QCA3ZR56.js';
 import { useLocalizedString } from './chunk-TFVDF4YH.js';
 import { HelperMessageContext } from './chunk-HZKFQ33E.js';
@@ -18,7 +18,7 @@ import { useContextProps, composeRenderProps, Input, TextField } from 'react-ari
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./PasswordField.module.css#css-module
-var PasswordField_module_default = { "hop-PasswordField": "PasswordField-module__hop-PasswordField___HKYN-", "hop-PasswordField--fluid": "PasswordField-module__hop-PasswordField--fluid___ov1ao", "hop-PasswordField__Label": "PasswordField-module__hop-PasswordField__Label___nc1jG", "hop-PasswordField__InputGroup": "PasswordField-module__hop-PasswordField__InputGroup___lZBUS", "hop-PasswordField__ErrorMessage": "PasswordField-module__hop-PasswordField__ErrorMessage___T7Gk3", "hop-PasswordField__HelperMessage": "PasswordField-module__hop-PasswordField__HelperMessage___N7CeS" };
+var PasswordField_module_default = { "hop-PasswordField": "PasswordField-module__hop-PasswordField___-xbTS", "hop-PasswordField--fluid": "PasswordField-module__hop-PasswordField--fluid___ckdg-", "hop-PasswordField__Label": "PasswordField-module__hop-PasswordField__Label___k-lA4", "hop-PasswordField__InputGroup": "PasswordField-module__hop-PasswordField__InputGroup___SA-Uq", "hop-PasswordField__ErrorMessage": "PasswordField-module__hop-PasswordField__ErrorMessage___oPTbT", "hop-PasswordField__HelperMessage": "PasswordField-module__hop-PasswordField__HelperMessage___WPdqS" };
 var GlobalPasswordFieldCssSelector = "hop-PasswordField";
 function PasswordField(props, ref) {
   var _a;

package/dist/{chunk-X7ZM3VW6.js → chunk-5NGAA35D.js}

@@ -1,13 +1,13 @@
 import { HeadingContext } from './chunk-TXZ6BMFR.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
-import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+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___Z-4EL", "hop-Heading--xs": "Heading-module__hop-Heading--xs___wFSJ8", "hop-Heading--sm": "Heading-module__hop-Heading--sm___XbWC5", "hop-Heading--md": "Heading-module__hop-Heading--md___B-n4o", "hop-Heading--lg": "Heading-module__hop-Heading--lg___dcKED", "hop-Heading--xl": "Heading-module__hop-Heading--xl___rOKV1", "hop-Heading--2xl": "Heading-module__hop-Heading--2xl___RYtOx", "hop-Heading--3xl": "Heading-module__hop-Heading--3xl___DIk1u" };
+var Heading_module_default = { "hop-Heading": "Heading-module__hop-Heading___EsZxP", "hop-Heading--xs": "Heading-module__hop-Heading--xs___dLElG", "hop-Heading--sm": "Heading-module__hop-Heading--sm___Mtd2f", "hop-Heading--md": "Heading-module__hop-Heading--md___IEpuR", "hop-Heading--lg": "Heading-module__hop-Heading--lg___8qo-X", "hop-Heading--xl": "Heading-module__hop-Heading--xl___wknZb", "hop-Heading--2xl": "Heading-module__hop-Heading--2xl___TwTc-", "hop-Heading--3xl": "Heading-module__hop-Heading--3xl___mwol-" };
 var GlobalHeadingCssSelector = "hop-Heading";
 function Heading(props, ref) {
   [props, ref] = useContextProps(props, ref, HeadingContext);
@@ -39,7 +39,7 @@ function Heading(props, ref) {
     }
   );
 }
-var _Heading = forwardRef(Heading);
+var _Heading = slot("heading", forwardRef(Heading));
 _Heading.displayName = "Heading";
 function createHeading(as) {
   const level = parseInt(as[1]);

package/dist/{chunk-JCD37WMK.js → chunk-6GEVQCBK.js}

@@ -1,7 +1,7 @@
 import { SwitchContext } from './chunk-YHBJAXUY.js';
 import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
-import { _Text } from './chunk-Y7G6PIDC.js';
+import { _Text } from './chunk-EY4ZTKS4.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, Switch as Switch$1 } from 'react-a
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./Switch.module.css#css-module
-var Switch_module_default = { "hop-Switch": "Switch-module__hop-Switch___Kgcyv", "hop-Switch--sm": "Switch-module__hop-Switch--sm___4U1md", "hop-Switch--md": "Switch-module__hop-Switch--md___TSTHO", "hop-Switch__indicator": "Switch-module__hop-Switch__indicator___JPWQg", "hop-Switch__text": "Switch-module__hop-Switch__text___W3CHD", "hop-Switch__icon-list": "Switch-module__hop-Switch__icon-list___KPKJ1", "hop-Switch__icon": "Switch-module__hop-Switch__icon___g8HsW" };
+var Switch_module_default = { "hop-Switch": "Switch-module__hop-Switch___MSR64", "hop-Switch--sm": "Switch-module__hop-Switch--sm___ZVxUT", "hop-Switch--md": "Switch-module__hop-Switch--md___JyUSY", "hop-Switch__indicator": "Switch-module__hop-Switch__indicator___MsHr4", "hop-Switch__text": "Switch-module__hop-Switch__text___5OdoN", "hop-Switch__icon-list": "Switch-module__hop-Switch__icon-list___CKEav", "hop-Switch__icon": "Switch-module__hop-Switch__icon___hL4MY" };
 var GlobalSwitchCssSelector = "hop-Switch";
 function Switch(props, ref) {
   var _a;

package/dist/{chunk-MMROXMQV.js → chunk-6LJPMEHX.js}

@@ -8,7 +8,7 @@ import { useContextProps, Label as Label$1 } from 'react-aria-components';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // css-module:./Label.module.css#css-module
-var Label_module_default = { "hop-Label": "Label-module__hop-Label___2IpOS", "hop-Label__indicator": "Label-module__hop-Label__indicator___nEWGk" };
+var Label_module_default = { "hop-Label": "Label-module__hop-Label___Km4S0", "hop-Label__indicator": "Label-module__hop-Label__indicator___UgQvd" };
 var GlobalLabelCssSelector = "hop-Label";
 function Label(props, ref) {
   [props, ref] = useContextProps(props, ref, LabelContext);

package/dist/{chunk-45BUVEOG.js → chunk-6ZAKQWYM.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___UIR9c", "hop-RadioGroup--bordered": "RadioGroup-module__hop-RadioGroup--bordered___kSaY4", "hop-RadioGroup--sm": "RadioGroup-module__hop-RadioGroup--sm___2DGJH", "hop-RadioGroup--md": "RadioGroup-module__hop-RadioGroup--md___chDZr", "hop-RadioGroup__label": "RadioGroup-module__hop-RadioGroup__label___yIobB", "hop-RadioGroup__list": "RadioGroup-module__hop-RadioGroup__list___jIunB", "hop-RadioGroup__radio": "RadioGroup-module__hop-RadioGroup__radio___gUp7P", "hop-RadioGroup__error-message": "RadioGroup-module__hop-RadioGroup__error-message___q1CN3", "hop-RadioGroup__helper-message": "RadioGroup-module__hop-RadioGroup__helper-message___2RiEW" };
+var RadioGroup_module_default = { "hop-RadioGroup": "RadioGroup-module__hop-RadioGroup___oqvNx", "hop-RadioGroup--bordered": "RadioGroup-module__hop-RadioGroup--bordered___p7xk4", "hop-RadioGroup--sm": "RadioGroup-module__hop-RadioGroup--sm___mkTH1", "hop-RadioGroup--md": "RadioGroup-module__hop-RadioGroup--md___UJzyG", "hop-RadioGroup__label": "RadioGroup-module__hop-RadioGroup__label___jZRmn", "hop-RadioGroup__list": "RadioGroup-module__hop-RadioGroup__list___Mcilp", "hop-RadioGroup__radio": "RadioGroup-module__hop-RadioGroup__radio___0DAQr", "hop-RadioGroup__error-message": "RadioGroup-module__hop-RadioGroup__error-message___GnuJ3", "hop-RadioGroup__helper-message": "RadioGroup-module__hop-RadioGroup__helper-message___F7nZs" };
 var GlobalRadioGroupCssSelector = "hop-RadioGroup";
 function RadioGroup(props, ref) {
   var _a, _b;

package/dist/{chunk-DCAA2AVQ.js → chunk-AG67ICXW.js}

@@ -12,7 +12,7 @@ import { useContextProps, composeRenderProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./CheckboxField.module.css#css-module
-var CheckboxField_module_default = { "hop-CheckboxField": "CheckboxField-module__hop-CheckboxField___A5x07", "hop-CheckboxField--sm": "CheckboxField-module__hop-CheckboxField--sm___FRCIP", "hop-CheckboxField--md": "CheckboxField-module__hop-CheckboxField--md___GCH8E", "hop-CheckboxField__description": "CheckboxField-module__hop-CheckboxField__description___8jt9j", "hop-CheckboxField__checkbox": "CheckboxField-module__hop-CheckboxField__checkbox___oc2NL" };
+var CheckboxField_module_default = { "hop-CheckboxField": "CheckboxField-module__hop-CheckboxField___0XhcY", "hop-CheckboxField--sm": "CheckboxField-module__hop-CheckboxField--sm___eDp1h", "hop-CheckboxField--md": "CheckboxField-module__hop-CheckboxField--md___e81y4", "hop-CheckboxField__description": "CheckboxField-module__hop-CheckboxField__description___W6A2L", "hop-CheckboxField__checkbox": "CheckboxField-module__hop-CheckboxField__checkbox___YwGbv" };
 var GlobalCheckboxFieldCssSelector = "hop-CheckboxField";
 var CheckboxToDescriptionSizeAdapter = {
   sm: "xs",

package/dist/{chunk-FF6KAPPN.js → chunk-AZBXRRMZ.js}

@@ -1,6 +1,6 @@
 import { SearchFieldContext } from './chunk-3NKF5TPD.js';
-import { _InputGroup } from './chunk-CIKHW47C.js';
-import { _ClearButton } from './chunk-XBVS62J3.js';
+import { _InputGroup } from './chunk-24KHRRRV.js';
+import { _ClearButton } from './chunk-33FEE3VD.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___W6W5b", "hop-SearchField--fluid": "SearchField-module__hop-SearchField--fluid___8r8W4", "hop-SearchField__Label": "SearchField-module__hop-SearchField__Label___plAkN", "hop-SearchField__prefix": "SearchField-module__hop-SearchField__prefix___fiCjG", "hop-SearchField__InputGroup": "SearchField-module__hop-SearchField__InputGroup___Pczio", "hop-SearchField--clearable": "SearchField-module__hop-SearchField--clearable___ClGaI", "hop-SearchField__ErrorMessage": "SearchField-module__hop-SearchField__ErrorMessage___ox01g", "hop-SearchField__HelperMessage": "SearchField-module__hop-SearchField__HelperMessage___8xA39", "hop-SearchField__ClearButton": "SearchField-module__hop-SearchField__ClearButton___54BN-" };
+var SearchField_module_default = { "hop-SearchField": "SearchField-module__hop-SearchField___QWU0i", "hop-SearchField--fluid": "SearchField-module__hop-SearchField--fluid___85NQ7", "hop-SearchField__Label": "SearchField-module__hop-SearchField__Label___KZT0V", "hop-SearchField__prefix": "SearchField-module__hop-SearchField__prefix___IDYtm", "hop-SearchField__InputGroup": "SearchField-module__hop-SearchField__InputGroup___45Pji", "hop-SearchField--clearable": "SearchField-module__hop-SearchField--clearable___GbNi1", "hop-SearchField__ErrorMessage": "SearchField-module__hop-SearchField__ErrorMessage___VuxoH", "hop-SearchField__HelperMessage": "SearchField-module__hop-SearchField__HelperMessage___8seYw", "hop-SearchField__ClearButton": "SearchField-module__hop-SearchField__ClearButton___CRBdA" };
 var GlobalSearchFieldCssSelector = "hop-SearchField";
 function SearchField(props, ref) {
   var _a;

package/dist/{chunk-4KKT3O2S.js → chunk-BSEAFZPE.js}

@@ -2,7 +2,7 @@ import { ButtonContext } from './chunk-WMTWFKKP.js';
 import { ButtonGroupContext } from './chunk-VJQ7M2BK.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
-import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { slot, useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
 import { filterDOMProps } from '@react-aria/utils';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
@@ -10,7 +10,7 @@ import { useContextProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./ButtonGroup.module.css#css-module
-var ButtonGroup_module_default = { "hop-ButtonGroup": "ButtonGroup-module__hop-ButtonGroup___peGwG", "hop-ButtonGroup--horizontal": "ButtonGroup-module__hop-ButtonGroup--horizontal___-28HA", "hop-ButtonGroup--vertical": "ButtonGroup-module__hop-ButtonGroup--vertical___oEB32", "hop-ButtonGroup--start": "ButtonGroup-module__hop-ButtonGroup--start___EIxXS", "hop-ButtonGroup--center": "ButtonGroup-module__hop-ButtonGroup--center___LzAzO", "hop-ButtonGroup--end": "ButtonGroup-module__hop-ButtonGroup--end___NKKh-", "hop-ButtonGroup--wrap": "ButtonGroup-module__hop-ButtonGroup--wrap___8glcj", "hop-ButtonGroup--fluid": "ButtonGroup-module__hop-ButtonGroup--fluid___ryBpP" };
+var ButtonGroup_module_default = { "hop-ButtonGroup": "ButtonGroup-module__hop-ButtonGroup___7jqlO", "hop-ButtonGroup--horizontal": "ButtonGroup-module__hop-ButtonGroup--horizontal___ej-rP", "hop-ButtonGroup--vertical": "ButtonGroup-module__hop-ButtonGroup--vertical___-Q8Rk", "hop-ButtonGroup--start": "ButtonGroup-module__hop-ButtonGroup--start___pqLcR", "hop-ButtonGroup--center": "ButtonGroup-module__hop-ButtonGroup--center___vyW4R", "hop-ButtonGroup--end": "ButtonGroup-module__hop-ButtonGroup--end___cD3Vz", "hop-ButtonGroup--wrap": "ButtonGroup-module__hop-ButtonGroup--wrap___8-aZr", "hop-ButtonGroup--fluid": "ButtonGroup-module__hop-ButtonGroup--fluid___My6YI" };
 var GlobalButtonGroupCssSelector = "hop-ButtonGroup";
 function ButtonGroup(props, ref) {
   var _a, _b, _c, _d, _e;
@@ -76,7 +76,7 @@ function ButtonGroup(props, ref) {
     }
   );
 }
-var _ButtonGroup = forwardRef(ButtonGroup);
+var _ButtonGroup = slot("button-group", forwardRef(ButtonGroup));
 _ButtonGroup.displayName = "ButtonGroup";
 
 export { GlobalButtonGroupCssSelector, _ButtonGroup };

package/dist/{chunk-XDRKVTAI.js → chunk-CPRGKGB6.js}

@@ -1,5 +1,5 @@
 import { SpinnerContext } from './chunk-4ZYV2XLW.js';
-import { _Text } from './chunk-Y7G6PIDC.js';
+import { _Text } from './chunk-EY4ZTKS4.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___NrEvy", "spin": "Spinner-module__spin___GKhd9", "hop-Spinner--sm": "Spinner-module__hop-Spinner--sm___YrBlT", "hop-Spinner--md": "Spinner-module__hop-Spinner--md___ALxn-", "hop-Spinner--lg": "Spinner-module__hop-Spinner--lg___lKiQ0", "hop-Spinner__track": "Spinner-module__hop-Spinner__track___ZfVvK", "hop-Spinner__fill": "Spinner-module__hop-Spinner__fill___Wvmdn", "hop-Spinner__label": "Spinner-module__hop-Spinner__label___Av11I" };
+var Spinner_module_default = { "hop-Spinner": "Spinner-module__hop-Spinner___87bie", "spin": "Spinner-module__spin___wQf6h", "hop-Spinner--sm": "Spinner-module__hop-Spinner--sm___9EOCU", "hop-Spinner--md": "Spinner-module__hop-Spinner--md___c6YgV", "hop-Spinner--lg": "Spinner-module__hop-Spinner--lg___zOX2a", "hop-Spinner__track": "Spinner-module__hop-Spinner__track___-q-nY", "hop-Spinner__fill": "Spinner-module__hop-Spinner__fill___5He1k", "hop-Spinner__label": "Spinner-module__hop-Spinner__label___vy633" };
 var GlobalSpinnerCssSelector = "hop-Spinner";
 var SpinnerToTextSizeAdapter = {
   sm: "xs",

package/dist/{chunk-XFQJ7HYB.js → chunk-DIRREIZN.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___xGjwO" };
+var IconList_module_default = { "hop-IconList": "IconList-module__hop-IconList___-7k4I" };
 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-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 };

package/dist/{chunk-TNXKWBYE.js → chunk-DUDTPN7M.js}

@@ -1,13 +1,13 @@
 import { TextFieldContext } from './chunk-O4XPUINW.js';
 import { useTruncatedText } from './chunk-Z57VHYOF.js';
-import { _RemainingCharacterCount } from './chunk-B44HANDX.js';
-import { _InputGroup } from './chunk-CIKHW47C.js';
-import { _ClearButton } from './chunk-XBVS62J3.js';
+import { _RemainingCharacterCount } from './chunk-2XTLP4NP.js';
+import { _InputGroup } from './chunk-24KHRRRV.js';
+import { _ClearButton } from './chunk-33FEE3VD.js';
 import { LabelContext } from './chunk-QCA3ZR56.js';
 import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
 import { HelperMessageContext } from './chunk-HZKFQ33E.js';
 import { ErrorMessageContext } from './chunk-FAE27DLF.js';
-import { _Text } from './chunk-Y7G6PIDC.js';
+import { _Text } from './chunk-EY4ZTKS4.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
@@ -23,7 +23,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___1FtZC", "hop-TextField--fluid": "TextField-module__hop-TextField--fluid___GutEY", "hop-TextField__Label": "TextField-module__hop-TextField__Label___TBD0R", "hop-TextField__prefix": "TextField-module__hop-TextField__prefix___YlDxO", "hop-TextField__InputGroup": "TextField-module__hop-TextField__InputGroup___dARWs", "hop-TextField__ErrorMessage": "TextField-module__hop-TextField__ErrorMessage___9-sXm", "hop-TextField__HelperMessage": "TextField-module__hop-TextField__HelperMessage___HhoDC" };
+var TextField_module_default = { "hop-TextField": "TextField-module__hop-TextField___hBYLG", "hop-TextField--fluid": "TextField-module__hop-TextField--fluid___ckczp", "hop-TextField__Label": "TextField-module__hop-TextField__Label___7orfl", "hop-TextField__prefix": "TextField-module__hop-TextField__prefix___BH8Vx", "hop-TextField__InputGroup": "TextField-module__hop-TextField__InputGroup___ths8c", "hop-TextField__ErrorMessage": "TextField-module__hop-TextField__ErrorMessage___nJ2bc", "hop-TextField__HelperMessage": "TextField-module__hop-TextField__HelperMessage___cWuVO" };
 var GlobalTextFieldCssSelector = "hop-TextField";
 function TextField(props, ref) {
   var _a;

package/dist/{chunk-Y7G6PIDC.js → chunk-EY4ZTKS4.js}

@@ -2,14 +2,14 @@ import { TextContext } from './chunk-X6SER3TZ.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
-import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { slot, useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { useContextProps, Text as Text$1 } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Text.module.css#css-module
-var Text_module_default = { "hop-Text": "Text-module__hop-Text___bIQxx", "hop-Text--xs": "Text-module__hop-Text--xs___uYk5Y", "hop-Text--sm": "Text-module__hop-Text--sm___kg1RL", "hop-Text--md": "Text-module__hop-Text--md___UxnHr", "hop-Text--lg": "Text-module__hop-Text--lg___n7Sbi", "hop-Text--xl": "Text-module__hop-Text--xl___f-RXZ", "hop-Text--2xl": "Text-module__hop-Text--2xl___-DveI", "hop-Text--inherit": "Text-module__hop-Text--inherit___zEio8" };
+var Text_module_default = { "hop-Text": "Text-module__hop-Text___OmT3s", "hop-Text--xs": "Text-module__hop-Text--xs___Ckixd", "hop-Text--sm": "Text-module__hop-Text--sm___gmqu5", "hop-Text--md": "Text-module__hop-Text--md___TWsfc", "hop-Text--lg": "Text-module__hop-Text--lg___vTM8U", "hop-Text--xl": "Text-module__hop-Text--xl___eCOL4", "hop-Text--2xl": "Text-module__hop-Text--2xl___IeIhC", "hop-Text--inherit": "Text-module__hop-Text--inherit___fAYD4" };
 var GlobalTextCssSelector = "hop-Text";
 function Text(props, ref) {
   [props, ref] = useContextProps(props, ref, TextContext);
@@ -52,7 +52,7 @@ function Text(props, ref) {
     }
   );
 }
-var _Text = forwardRef(Text);
+var _Text = slot("text", forwardRef(Text));
 _Text.displayName = "Text";
 
 export { GlobalTextCssSelector, _Text };

package/dist/{chunk-46Y3BNK6.js → chunk-EZTWUACB.js}

@@ -1,5 +1,5 @@
 import { HelperMessageContext } from './chunk-HZKFQ33E.js';
-import { _Text } from './chunk-Y7G6PIDC.js';
+import { _Text } from './chunk-EY4ZTKS4.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { InfoIcon } from '@hopper-ui/icons';
 import { useStyledSystem } from '@hopper-ui/styled-system';
@@ -9,7 +9,7 @@ import { useContextProps, FieldErrorContext } from 'react-aria-components';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // css-module:./HelperMessage.module.css#css-module
-var HelperMessage_module_default = { "hop-HelperMessage": "HelperMessage-module__hop-HelperMessage___O7Rwx", "hop-HelperMessage__icon": "HelperMessage-module__hop-HelperMessage__icon___-NTU-" };
+var HelperMessage_module_default = { "hop-HelperMessage": "HelperMessage-module__hop-HelperMessage___Dzsrk", "hop-HelperMessage__icon": "HelperMessage-module__hop-HelperMessage__icon___ZRCAJ" };
 var GlobalHelperMessageCssSelector = "hop-HelperMessage";
 function HelperMessage(props, ref) {
   const validation = useContext(FieldErrorContext);

package/dist/{chunk-XT4MALWA.js → chunk-F3Y5D5LH.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-Y7G6PIDC.js';
+import { _Text } from './chunk-EY4ZTKS4.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:./DecorativeCheckbox.module.css#css-module
-var DecorativeCheckbox_module_default = { "hop-DecorativeCheckbox": "DecorativeCheckbox-module__hop-DecorativeCheckbox___faka9 Checkbox-module__hop-Checkbox___AFr1n", "hop-DecorativeCheckbox--sm": "DecorativeCheckbox-module__hop-DecorativeCheckbox--sm___ZrNKf Checkbox-module__hop-Checkbox--sm___cv1sJ", "hop-DecorativeCheckbox--md": "DecorativeCheckbox-module__hop-DecorativeCheckbox--md___bXnfS Checkbox-module__hop-Checkbox--md___TocUo", "hop-DecorativeCheckbox__icon": "DecorativeCheckbox-module__hop-DecorativeCheckbox__icon___CAeZ- Checkbox-module__hop-Checkbox__icon___JH9nN", "hop-DecorativeCheckbox__icon-list": "DecorativeCheckbox-module__hop-DecorativeCheckbox__icon-list___lJU4H Checkbox-module__hop-Checkbox__icon___JH9nN", "hop-DecorativeCheckbox__box": "DecorativeCheckbox-module__hop-DecorativeCheckbox__box___hTseX Checkbox-module__hop-Checkbox__box___IDUqw", "hop-DecorativeCheckbox__check": "DecorativeCheckbox-module__hop-DecorativeCheckbox__check___IOdeC Checkbox-module__hop-Checkbox__check___CRsUX", "hop-DecorativeCheckbox__text": "DecorativeCheckbox-module__hop-DecorativeCheckbox__text___pSOuk Checkbox-module__hop-Checkbox__text___x76Rd" };
+var DecorativeCheckbox_module_default = { "hop-DecorativeCheckbox": "DecorativeCheckbox-module__hop-DecorativeCheckbox___v23du Checkbox-module__hop-Checkbox___72-RK", "hop-DecorativeCheckbox--sm": "DecorativeCheckbox-module__hop-DecorativeCheckbox--sm___8jExB Checkbox-module__hop-Checkbox--sm___XSX4a", "hop-DecorativeCheckbox--md": "DecorativeCheckbox-module__hop-DecorativeCheckbox--md___cs-DI Checkbox-module__hop-Checkbox--md___wLU0H", "hop-DecorativeCheckbox__icon": "DecorativeCheckbox-module__hop-DecorativeCheckbox__icon___24ygv Checkbox-module__hop-Checkbox__icon___-P72h", "hop-DecorativeCheckbox__icon-list": "DecorativeCheckbox-module__hop-DecorativeCheckbox__icon-list___wmtHw Checkbox-module__hop-Checkbox__icon___-P72h", "hop-DecorativeCheckbox__box": "DecorativeCheckbox-module__hop-DecorativeCheckbox__box___JHfIQ Checkbox-module__hop-Checkbox__box___d7Bzl", "hop-DecorativeCheckbox__check": "DecorativeCheckbox-module__hop-DecorativeCheckbox__check___zOrkF Checkbox-module__hop-Checkbox__check___roemI", "hop-DecorativeCheckbox__text": "DecorativeCheckbox-module__hop-DecorativeCheckbox__text___rcD-y Checkbox-module__hop-Checkbox__text___ht42e" };
 var GlobalDecorativeCheckboxCssSelector = "hop-DecorativeCheckbox";
 function DecorativeCheckbox(props, ref) {
   var _a;

package/dist/{chunk-UBMAVA4B.js → chunk-FJL3ZS2H.js}

@@ -14,7 +14,7 @@ import { useContextProps, composeRenderProps, CheckboxGroup as CheckboxGroup$1 }
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./CheckboxGroup.module.css#css-module
-var CheckboxGroup_module_default = { "hop-CheckboxGroup": "CheckboxGroup-module__hop-CheckboxGroup___ZC22r", "hop-CheckboxGroup--bordered": "CheckboxGroup-module__hop-CheckboxGroup--bordered___R716L", "hop-CheckboxGroup--sm": "CheckboxGroup-module__hop-CheckboxGroup--sm___lVGiA", "hop-CheckboxGroup--md": "CheckboxGroup-module__hop-CheckboxGroup--md___nKP8S", "hop-CheckboxGroup__label": "CheckboxGroup-module__hop-CheckboxGroup__label___m0yDe", "hop-CheckboxGroup__list": "CheckboxGroup-module__hop-CheckboxGroup__list___AHXzY", "hop-CheckboxGroup__checkbox": "CheckboxGroup-module__hop-CheckboxGroup__checkbox___2-no-", "hop-CheckboxGroup__error-message": "CheckboxGroup-module__hop-CheckboxGroup__error-message___f1wa6", "hop-CheckboxGroup__helper-message": "CheckboxGroup-module__hop-CheckboxGroup__helper-message___Rmslf" };
+var CheckboxGroup_module_default = { "hop-CheckboxGroup": "CheckboxGroup-module__hop-CheckboxGroup___2hhK2", "hop-CheckboxGroup--bordered": "CheckboxGroup-module__hop-CheckboxGroup--bordered___JFXKL", "hop-CheckboxGroup--sm": "CheckboxGroup-module__hop-CheckboxGroup--sm___kahkJ", "hop-CheckboxGroup--md": "CheckboxGroup-module__hop-CheckboxGroup--md___ry0AQ", "hop-CheckboxGroup__label": "CheckboxGroup-module__hop-CheckboxGroup__label___fX-fM", "hop-CheckboxGroup__list": "CheckboxGroup-module__hop-CheckboxGroup__list___aunl9", "hop-CheckboxGroup__checkbox": "CheckboxGroup-module__hop-CheckboxGroup__checkbox___KNsNR", "hop-CheckboxGroup__error-message": "CheckboxGroup-module__hop-CheckboxGroup__error-message___--ZMG", "hop-CheckboxGroup__helper-message": "CheckboxGroup-module__hop-CheckboxGroup__helper-message___GT3vV" };
 var GlobalCheckboxGroupCssSelector = "hop-CheckboxGroup";
 function CheckboxGroup(props, ref) {
   var _a, _b;