@hopper-ui/components 1.6.1 → 1.8.0

package/dist/{chunk-5H7VC5CQ.js → chunk-7WJAJGOX.js}

@@ -1,8 +1,8 @@
 import { CheckboxContext } from './chunk-2EAZPH3M.js';
 import { useRenderProps } from './chunk-2NSUMKNH.js';
 import { IconListContext } from './chunk-GBWXEK6N.js';
-import { ensureTextWrapper } from './chunk-GDUMGSIP.js';
-import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { ensureTextWrapper } from './chunk-NGZNCS3G.js';
+import { ClearContainerSlots } from './chunk-PQSMCDAM.js';
 import { TextContext } from './chunk-ZNOU2CGM.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
@@ -15,7 +15,7 @@ import { useContextProps, composeRenderProps } from 'react-aria-components';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // css-module:./DecorativeCheckbox.module.css#css-module
-var DecorativeCheckbox_module_default = { "hop-DecorativeCheckbox": "DecorativeCheckbox-module__hop-DecorativeCheckbox___xWUkM Checkbox-module__hop-Checkbox___owhpo", "hop-DecorativeCheckbox--sm": "DecorativeCheckbox-module__hop-DecorativeCheckbox--sm___K1f-4 Checkbox-module__hop-Checkbox--sm___0u9Ax", "hop-DecorativeCheckbox--md": "DecorativeCheckbox-module__hop-DecorativeCheckbox--md___oZW8t Checkbox-module__hop-Checkbox--md___W0NWx", "hop-DecorativeCheckbox__icon": "DecorativeCheckbox-module__hop-DecorativeCheckbox__icon___Dg0CB Checkbox-module__hop-Checkbox__icon___A6Y0G", "hop-DecorativeCheckbox__icon-list": "DecorativeCheckbox-module__hop-DecorativeCheckbox__icon-list___udlWv Checkbox-module__hop-Checkbox__icon___A6Y0G", "hop-DecorativeCheckbox__box": "DecorativeCheckbox-module__hop-DecorativeCheckbox__box___tGhzk Checkbox-module__hop-Checkbox__box___1zfEu", "hop-DecorativeCheckbox__check": "DecorativeCheckbox-module__hop-DecorativeCheckbox__check___dq92k Checkbox-module__hop-Checkbox__check___lts9D", "hop-DecorativeCheckbox__text": "DecorativeCheckbox-module__hop-DecorativeCheckbox__text___jVAnl Checkbox-module__hop-Checkbox__text___8vRlD" };
+var DecorativeCheckbox_module_default = { "hop-DecorativeCheckbox": "DecorativeCheckbox-module__hop-DecorativeCheckbox___TZCQR Checkbox-module__hop-Checkbox___5v0b4", "hop-DecorativeCheckbox--sm": "DecorativeCheckbox-module__hop-DecorativeCheckbox--sm___WAN3J Checkbox-module__hop-Checkbox--sm___dSQOY", "hop-DecorativeCheckbox--md": "DecorativeCheckbox-module__hop-DecorativeCheckbox--md___ycopn Checkbox-module__hop-Checkbox--md___TOu-C", "hop-DecorativeCheckbox__icon": "DecorativeCheckbox-module__hop-DecorativeCheckbox__icon___HP7Ir Checkbox-module__hop-Checkbox__icon___nd2aw", "hop-DecorativeCheckbox__icon-list": "DecorativeCheckbox-module__hop-DecorativeCheckbox__icon-list___TV-j- Checkbox-module__hop-Checkbox__icon___nd2aw", "hop-DecorativeCheckbox__box": "DecorativeCheckbox-module__hop-DecorativeCheckbox__box___aQDXk Checkbox-module__hop-Checkbox__box___jxojt", "hop-DecorativeCheckbox__check": "DecorativeCheckbox-module__hop-DecorativeCheckbox__check___EYvRS Checkbox-module__hop-Checkbox__check___AxXm6", "hop-DecorativeCheckbox__text": "DecorativeCheckbox-module__hop-DecorativeCheckbox__text___db9bV Checkbox-module__hop-Checkbox__text___RWv7Z" };
 var GlobalDecorativeCheckboxCssSelector = "hop-DecorativeCheckbox";
 function DecorativeCheckbox(props, ref) {
   var _a;

package/dist/{chunk-IEGPCDG2.js → chunk-A5MNOCQ2.js}

@@ -8,7 +8,7 @@ import { useContextProps, ToggleGroupStateContext, ToggleButtonGroup, Provider }
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./SegmentedControl.module.css#css-module
-var SegmentedControl_module_default = { "hop-SegmentedControl": "SegmentedControl-module__hop-SegmentedControl___6RBHV" };
+var SegmentedControl_module_default = { "hop-SegmentedControl": "SegmentedControl-module__hop-SegmentedControl___yo8ku" };
 var GlobalSegmentedControlCssSelector = "hop-SegmentedControl";
 var SegmentedControl = (props, ref) => {
   [props, ref] = useContextProps(props, ref, SegmentedControlContext);

package/dist/{chunk-Q5UDUQNS.js → chunk-BD2ZOQJW.js}

@@ -1,31 +1,25 @@
 import { LabelContext } from './chunk-YVCZUIU3.js';
-import { useFormProps } from './chunk-4V3BBI6M.js';
-import { useLocalizedString } from './chunk-75DHKNW2.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { useStyledSystem } from '@hopper-ui/styled-system';
 import { filterDOMProps } from '@react-aria/utils';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { useContextProps, Label as Label$1 } from 'react-aria-components';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Label.module.css#css-module
-var Label_module_default = { "hop-Label": "Label-module__hop-Label___F1-jA", "hop-Label__indicator": "Label-module__hop-Label__indicator___kySOy" };
+var Label_module_default = { "hop-Label": "Label-module__hop-Label___x-D7q" };
 var GlobalLabelCssSelector = "hop-Label";
 function Label(props, ref) {
   [props, ref] = useContextProps(props, ref, LabelContext);
-  props = useFormProps(props);
   const { stylingProps, ...ownProps } = useStyledSystem(props);
   const {
     className,
     children,
     slot,
     style,
-    isRequired,
-    necessityIndicator,
     ...otherProps
   } = ownProps;
-  const stringFormatter = useLocalizedString();
   const classNames = clsx(
     className,
     GlobalLabelCssSelector,
@@ -39,18 +33,8 @@ function Label(props, ref) {
     ...stylingProps.style,
     ...style
   };
-  const necessityLabel = isRequired ? stringFormatter.format("Label.necessityLabel.required") : stringFormatter.format("Label.necessityLabel.optional");
-  const requiredIndicator = /* @__PURE__ */ jsx(
-    "span",
-    {
-      "aria-hidden": "true",
-      "aria-label": necessityLabel,
-      className: Label_module_default["hop-Label__indicator"],
-      children: "*"
-    }
-  );
   const filteredProps = filterDOMProps(otherProps, { labelable: true });
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Label$1,
     {
       ref,
@@ -58,15 +42,7 @@ function Label(props, ref) {
       slot: slot || void 0,
       style: mergedStyles,
       ...filteredProps,
-      children: [
-        children,
-        necessityIndicator === "label" && !isRequired && /* @__PURE__ */ jsxs("span", { className: Label_module_default["hop-Label__label-indicator"], children: [
-          " (",
-          necessityLabel,
-          ")"
-        ] }),
-        necessityIndicator === "asterisk" && isRequired && requiredIndicator
-      ]
+      children
     }
   );
 }

package/dist/chunk-BYERWFG4.js

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

package/dist/{chunk-54G54DA4.js → chunk-D3QAZ56J.js}

@@ -1,8 +1,8 @@
-import { TooltipTrigger } from './chunk-DCO4XGBI.js';
-import { _Tooltip } from './chunk-3WNM2QCE.js';
+import { _Tooltip } from './chunk-7K3TKE2R.js';
+import { TooltipTrigger } from './chunk-DAF2CRGN.js';
 import { AvatarGroupContext } from './chunk-G7F2YUBR.js';
 import { AvatarContext } from './chunk-FA26RZSE.js';
-import { _Text } from './chunk-QYLYNHMO.js';
+import { _Text } from './chunk-QCFV6G6K.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
 import clsx from 'clsx';
@@ -11,7 +11,7 @@ import { useContextProps } from 'react-aria-components';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // css-module:./AvatarGroup.module.css#css-module
-var AvatarGroup_module_default = { "hop-AvatarGroup": "AvatarGroup-module__hop-AvatarGroup___iEI3W", "hop-AvatarGroup--wrap": "AvatarGroup-module__hop-AvatarGroup--wrap___UQFjo", "hop-AvatarGroup--xs": "AvatarGroup-module__hop-AvatarGroup--xs___2bo4Q", "hop-AvatarGroup--sm": "AvatarGroup-module__hop-AvatarGroup--sm___jxRGB", "hop-AvatarGroup--md": "AvatarGroup-module__hop-AvatarGroup--md___o9-ff", "hop-AvatarGroup--lg": "AvatarGroup-module__hop-AvatarGroup--lg___5tURN", "hop-AvatarGroup--xl": "AvatarGroup-module__hop-AvatarGroup--xl___amVob", "hop-AvatarGroup--2xl": "AvatarGroup-module__hop-AvatarGroup--2xl___Rj8b8", "hop-AvatarGroup__avatar": "AvatarGroup-module__hop-AvatarGroup__avatar___El3AS", "hop-AvatarGroup__label": "AvatarGroup-module__hop-AvatarGroup__label___9YEzQ", "hop-AvatarGroup__hiddenAvatar": "AvatarGroup-module__hop-AvatarGroup__hiddenAvatar___8VqJ-", "hop-AvatarGroup--start": "AvatarGroup-module__hop-AvatarGroup--start___BnTP1", "hop-AvatarGroup--end": "AvatarGroup-module__hop-AvatarGroup--end___OSrjF", "hop-AvatarGroup--center": "AvatarGroup-module__hop-AvatarGroup--center___Lo2Cv" };
+var AvatarGroup_module_default = { "hop-AvatarGroup": "AvatarGroup-module__hop-AvatarGroup___OnxWJ", "hop-AvatarGroup--wrap": "AvatarGroup-module__hop-AvatarGroup--wrap___4--rv", "hop-AvatarGroup--xs": "AvatarGroup-module__hop-AvatarGroup--xs___L8mre", "hop-AvatarGroup--sm": "AvatarGroup-module__hop-AvatarGroup--sm___UjcIm", "hop-AvatarGroup--md": "AvatarGroup-module__hop-AvatarGroup--md___sBcpK", "hop-AvatarGroup--lg": "AvatarGroup-module__hop-AvatarGroup--lg___7YAak", "hop-AvatarGroup--xl": "AvatarGroup-module__hop-AvatarGroup--xl___nbZIy", "hop-AvatarGroup--2xl": "AvatarGroup-module__hop-AvatarGroup--2xl___ljxbT", "hop-AvatarGroup__avatar": "AvatarGroup-module__hop-AvatarGroup__avatar___O46a5", "hop-AvatarGroup__label": "AvatarGroup-module__hop-AvatarGroup__label___fbjFq", "hop-AvatarGroup__hiddenAvatar": "AvatarGroup-module__hop-AvatarGroup__hiddenAvatar___fFImk", "hop-AvatarGroup--start": "AvatarGroup-module__hop-AvatarGroup--start___rucz5", "hop-AvatarGroup--end": "AvatarGroup-module__hop-AvatarGroup--end___9n-g7", "hop-AvatarGroup--center": "AvatarGroup-module__hop-AvatarGroup--center___KbbSx" };
 var GlobalAvatarGroupCssSelector = "hop-AvatarGroup";
 function AvatarGroup(props, ref) {
   var _a, _b, _c, _d;

package/dist/{chunk-FVYE4WG4.js → chunk-D7ICCQM5.js}

@@ -1,4 +1,4 @@
-import { _Text } from './chunk-QYLYNHMO.js';
+import { _Text } from './chunk-QCFV6G6K.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { useResponsiveValue } from '@hopper-ui/styled-system';
 import clsx from 'clsx';
@@ -6,7 +6,7 @@ import { forwardRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Paragraph.module.css#css-module
-var Paragraph_module_default = { "hop-Paragraph": "Paragraph-module__hop-Paragraph___txlUW", "hop-Paragraph--xs": "Paragraph-module__hop-Paragraph--xs___uSr-c", "hop-Paragraph--sm": "Paragraph-module__hop-Paragraph--sm___Xa52U", "hop-Paragraph--md": "Paragraph-module__hop-Paragraph--md___KBlMl", "hop-Paragraph--lg": "Paragraph-module__hop-Paragraph--lg___bF-R2", "hop-Paragraph--xl": "Paragraph-module__hop-Paragraph--xl___2XG7c", "hop-Paragraph--2xl": "Paragraph-module__hop-Paragraph--2xl___PyV-w", "hop-Paragraph--inherit": "Paragraph-module__hop-Paragraph--inherit___K3CwL" };
+var Paragraph_module_default = { "hop-Paragraph": "Paragraph-module__hop-Paragraph___HpT17", "hop-Paragraph--xs": "Paragraph-module__hop-Paragraph--xs___DXGDe", "hop-Paragraph--sm": "Paragraph-module__hop-Paragraph--sm___qshKm", "hop-Paragraph--md": "Paragraph-module__hop-Paragraph--md___UEgGX", "hop-Paragraph--lg": "Paragraph-module__hop-Paragraph--lg___EvhSs", "hop-Paragraph--xl": "Paragraph-module__hop-Paragraph--xl___X9E7u", "hop-Paragraph--2xl": "Paragraph-module__hop-Paragraph--2xl___MYUu5", "hop-Paragraph--inherit": "Paragraph-module__hop-Paragraph--inherit___IZyrO" };
 var GlobalParagraphCssSelector = "hop-Paragraph";
 function Paragraph(props, ref) {
   const { size: sizeProp, className, children, ...otherProps } = props;

package/dist/{chunk-NNBUHQU4.js → chunk-DB4Y2SXS.js}

@@ -1,18 +1,18 @@
 import { SelectContext } from './chunk-ZOTXNUAV.js';
-import { _SelectValue } from './chunk-VRCFCFB5.js';
-import { _Popover } from './chunk-ZICTGDRV.js';
-import { _ListBox } from './chunk-VE63YOPC.js';
-import { _ListBoxItem } from './chunk-FCWARLFN.js';
+import { _SelectValue } from './chunk-KIXYAIPB.js';
+import { _Popover } from './chunk-I377K7IX.js';
 import { _ListBoxSection } from './chunk-PN5BRTOO.js';
-import { _Footer } from './chunk-VOZN65OL.js';
-import { _ToggleArrow } from './chunk-IYYEOE54.js';
-import { _Label } from './chunk-Q5UDUQNS.js';
-import { _HelperMessage } from './chunk-CFBDROF2.js';
-import { _ErrorMessage } from './chunk-H7EN3SVB.js';
+import { _ListBox } from './chunk-HF5YS5Z6.js';
+import { _ListBoxItem } from './chunk-NNPOWTQ4.js';
+import { _Footer } from './chunk-RN3FLBX4.js';
+import { _ToggleArrow } from './chunk-PWYDH3ZA.js';
+import { FieldLabel } from './chunk-E5RHW4IY.js';
+import { _HelperMessage } from './chunk-57WEWZ4L.js';
+import { _ErrorMessage } from './chunk-DOP43XH5.js';
 import { BadgeContext } from './chunk-ZSFJVMJN.js';
-import { useFormProps } from './chunk-4V3BBI6M.js';
-import { ensureTextWrapper } from './chunk-GDUMGSIP.js';
-import { ClearContainerSlots, ClearProviders } from './chunk-WJ55ZV54.js';
+import { useFormProps } from './chunk-K3GNQGLK.js';
+import { ensureTextWrapper } from './chunk-NGZNCS3G.js';
+import { ClearContainerSlots, ClearProviders } from './chunk-PQSMCDAM.js';
 import { TextContext } from './chunk-ZNOU2CGM.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
@@ -24,7 +24,7 @@ import { useContextProps, composeRenderProps, TextContext as TextContext$1, Butt
 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___uziwm", "hop-Select--fluid": "Select-module__hop-Select--fluid___H-0AJ", "hop-Select__label": "Select-module__hop-Select__label___z-xHw", "hop-Select__button": "Select-module__hop-Select__button___ZmhBJ", "hop-Select__button--sm": "Select-module__hop-Select__button--sm___fLAnv", "hop-Select__button--md": "Select-module__hop-Select__button--md___7ELmY", "hop-Select__prefix": "Select-module__hop-Select__prefix___Fy9aK", "hop-Select__button-icon": "Select-module__hop-Select__button-icon___UaeHp", "hop-Select__helper-message": "Select-module__hop-Select__helper-message___Y8Y9h", "hop-Select__error-message": "Select-module__hop-Select__error-message___uI0Ry" };
+var Select_module_default = { "hop-Select": "Select-module__hop-Select___116Oi", "hop-Select--fluid": "Select-module__hop-Select--fluid___UJisd", "hop-Select__label": "Select-module__hop-Select__label___PsZQN", "hop-Select__button": "Select-module__hop-Select__button___xgLzx", "hop-Select__button--sm": "Select-module__hop-Select__button--sm___Yjtma", "hop-Select__button--md": "Select-module__hop-Select__button--md___QJTBN", "hop-Select__prefix": "Select-module__hop-Select__prefix___Yhern", "hop-Select__button-icon": "Select-module__hop-Select__button-icon___fxUm8", "hop-Select__helper-message": "Select-module__hop-Select__helper-message___FX16H", "hop-Select__error-message": "Select-module__hop-Select__error-message___no2FB" };
 var GlobalSelectCssSelector = "hop-Select";
 function Select(props, ref) {
   var _a, _b, _c, _d;
@@ -35,6 +35,7 @@ function Select(props, ref) {
     align: alignProp,
     className,
     children,
+    contextualHelp,
     description,
     direction: directionProp,
     errorMessage,
@@ -144,10 +145,11 @@ function Select(props, ref) {
       children: (selectRenderProps) => {
         const { isOpen } = selectRenderProps;
         return /* @__PURE__ */ jsxs(Fragment, { children: [
-          label && /* @__PURE__ */ jsx(
-            _Label,
+          /* @__PURE__ */ jsx(
+            FieldLabel,
             {
               className: Select_module_default["hop-Select__label"],
+              contextualHelp,
               isRequired,
               necessityIndicator,
               children: label

package/dist/{chunk-RNYGUJIL.js → chunk-DGU5YZM5.js}

@@ -1,16 +1,16 @@
 import { InternalTagGroupContext } from './chunk-4BWTFR22.js';
 import { TagContext } from './chunk-EWMWQ2MC.js';
-import { _ClearButton } from './chunk-I4IBMLV4.js';
-import { mapOrbiterToHopperVariants } from './chunk-BROSH5WN.js';
+import { _ClearButton } from './chunk-KN6OG3WN.js';
+import { mapOrbiterToHopperVariants } from './chunk-UGZYYO3T.js';
 import { BadgeContext } from './chunk-ZSFJVMJN.js';
 import { AvatarContext } from './chunk-FA26RZSE.js';
 import { useRenderProps } from './chunk-2NSUMKNH.js';
-import { _Spinner } from './chunk-S72G6RPK.js';
+import { useFormProps } from './chunk-K3GNQGLK.js';
+import { _Spinner } from './chunk-WEKPO5YP.js';
 import { IconListContext } from './chunk-GBWXEK6N.js';
-import { useFormProps } from './chunk-4V3BBI6M.js';
-import { useLocalizedString } from './chunk-75DHKNW2.js';
-import { ensureTextWrapper } from './chunk-GDUMGSIP.js';
-import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { useLocalizedString } from './chunk-NNLLQWDS.js';
+import { ensureTextWrapper } from './chunk-NGZNCS3G.js';
+import { ClearContainerSlots } from './chunk-PQSMCDAM.js';
 import { TextContext } from './chunk-ZNOU2CGM.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
@@ -25,7 +25,7 @@ import { useContextProps, composeRenderProps, Tag as Tag$1 } from 'react-aria-co
 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___7n4Dx", "hop-Tag--sm": "Tag-module__hop-Tag--sm___jT4o8", "hop-Tag__remove-btn": "Tag-module__hop-Tag__remove-btn___vIFMe", "hop-Tag__Spinner": "Tag-module__hop-Tag__Spinner___KUPOI", "hop-Tag__avatar": "Tag-module__hop-Tag__avatar___eLv98", "hop-Tag--md": "Tag-module__hop-Tag--md___2uZZF", "hop-Tag--lg": "Tag-module__hop-Tag--lg___C6rPv", "hop-Tag--neutral": "Tag-module__hop-Tag--neutral___TTHvN", "hop-Tag--subdued": "Tag-module__hop-Tag--subdued___GwtM2", "hop-Tag--progress": "Tag-module__hop-Tag--progress___MqtYW", "hop-Tag--positive": "Tag-module__hop-Tag--positive___8bLid", "hop-Tag--caution": "Tag-module__hop-Tag--caution___DexH1", "hop-Tag--negative": "Tag-module__hop-Tag--negative___miF5y", "hop-Tag--option1": "Tag-module__hop-Tag--option1___lEaY2", "hop-Tag--option2": "Tag-module__hop-Tag--option2___VWfbX", "hop-Tag--option3": "Tag-module__hop-Tag--option3___Z5uBX", "hop-Tag--option4": "Tag-module__hop-Tag--option4___Cfnpd", "hop-Tag--option5": "Tag-module__hop-Tag--option5___AyNcF", "hop-Tag--option6": "Tag-module__hop-Tag--option6___383Q0", "hop-Tag__icon": "Tag-module__hop-Tag__icon___RRZ8x", "hop-Tag__icon-list": "Tag-module__hop-Tag__icon-list___oDO0x", "hop-Tag__text": "Tag-module__hop-Tag__text___f6zc-", "hop-Tag__badge": "Tag-module__hop-Tag__badge___WKPcw", "hop-Tag__badge--subdued": "Tag-module__hop-Tag__badge--subdued___6DP9J" };
+var Tag_module_default = { "hop-Tag": "Tag-module__hop-Tag___p19kx", "hop-Tag--sm": "Tag-module__hop-Tag--sm___xdeYI", "hop-Tag__remove-btn": "Tag-module__hop-Tag__remove-btn___7pFJ5", "hop-Tag__Spinner": "Tag-module__hop-Tag__Spinner___01iia", "hop-Tag__avatar": "Tag-module__hop-Tag__avatar___Zy7oa", "hop-Tag--md": "Tag-module__hop-Tag--md___154uo", "hop-Tag--lg": "Tag-module__hop-Tag--lg___APvIM", "hop-Tag--neutral": "Tag-module__hop-Tag--neutral___uPLBe", "hop-Tag--subdued": "Tag-module__hop-Tag--subdued___iq5Ll", "hop-Tag--progress": "Tag-module__hop-Tag--progress___Y11uF", "hop-Tag--positive": "Tag-module__hop-Tag--positive___BJ09j", "hop-Tag--caution": "Tag-module__hop-Tag--caution___AVtUG", "hop-Tag--negative": "Tag-module__hop-Tag--negative___IvUAG", "hop-Tag--option1": "Tag-module__hop-Tag--option1___Re2Wq", "hop-Tag--option2": "Tag-module__hop-Tag--option2___JxfDq", "hop-Tag--option3": "Tag-module__hop-Tag--option3___V74s2", "hop-Tag--option4": "Tag-module__hop-Tag--option4___ceysz", "hop-Tag--option5": "Tag-module__hop-Tag--option5___XUOwe", "hop-Tag--option6": "Tag-module__hop-Tag--option6___OulRe", "hop-Tag__icon": "Tag-module__hop-Tag__icon___KYxYR", "hop-Tag__icon-list": "Tag-module__hop-Tag__icon-list___zD4G0", "hop-Tag__text": "Tag-module__hop-Tag__text___U8szS", "hop-Tag__badge": "Tag-module__hop-Tag__badge___mqvm3", "hop-Tag__badge--subdued": "Tag-module__hop-Tag__badge--subdued___XlE86" };
 var GlobalTagCssSelector = "hop-Tag";
 var TagToTextSizeAdapter = {
   sm: "xs",

package/dist/{chunk-H7EN3SVB.js → chunk-DOP43XH5.js}

@@ -1,6 +1,6 @@
 import { ErrorMessageContext } from './chunk-FV74YT2D.js';
 import { useRenderProps } from './chunk-2NSUMKNH.js';
-import { _Text } from './chunk-QYLYNHMO.js';
+import { _Text } from './chunk-QCFV6G6K.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { WarningIcon } from '@hopper-ui/icons';
@@ -10,7 +10,7 @@ import { FieldErrorContext, useContextProps, composeRenderProps } from 'react-ar
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./ErrorMessage.module.css#css-module
-var ErrorMessage_module_default = { "hop-ErrorMessage": "ErrorMessage-module__hop-ErrorMessage___GOnja", "hop-ErrorMessage__icon": "ErrorMessage-module__hop-ErrorMessage__icon___quLAp" };
+var ErrorMessage_module_default = { "hop-ErrorMessage": "ErrorMessage-module__hop-ErrorMessage___V-yBH", "hop-ErrorMessage__icon": "ErrorMessage-module__hop-ErrorMessage__icon___DIRtx" };
 var GlobalErrorMessageCssSelector = "hop-ErrorMessage";
 function ErrorMessage(props, ref) {
   const validation = useContext(FieldErrorContext);

package/dist/{chunk-2PIBQPSE.js → chunk-DSK6IH5M.js}

@@ -1,9 +1,9 @@
 import { CheckboxFieldContext } from './chunk-ZGNK4GWA.js';
 import { CheckboxContext } from './chunk-2EAZPH3M.js';
 import { useRenderProps } from './chunk-2NSUMKNH.js';
-import { useFormProps } from './chunk-4V3BBI6M.js';
-import { _Text } from './chunk-QYLYNHMO.js';
-import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { useFormProps } from './chunk-K3GNQGLK.js';
+import { _Text } from './chunk-QCFV6G6K.js';
+import { ClearContainerSlots } from './chunk-PQSMCDAM.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
@@ -15,7 +15,7 @@ import { useContextProps, composeRenderProps } from 'react-aria-components';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // css-module:./CheckboxField.module.css#css-module
-var CheckboxField_module_default = { "hop-CheckboxField": "CheckboxField-module__hop-CheckboxField___nJ48U", "hop-CheckboxField--sm": "CheckboxField-module__hop-CheckboxField--sm___M5mq-", "hop-CheckboxField--md": "CheckboxField-module__hop-CheckboxField--md___-iccL", "hop-CheckboxField__description": "CheckboxField-module__hop-CheckboxField__description___-nZdA", "hop-CheckboxField__checkbox": "CheckboxField-module__hop-CheckboxField__checkbox___BA-Lt" };
+var CheckboxField_module_default = { "hop-CheckboxField": "CheckboxField-module__hop-CheckboxField___Moz--", "hop-CheckboxField--sm": "CheckboxField-module__hop-CheckboxField--sm___WFkN2", "hop-CheckboxField--md": "CheckboxField-module__hop-CheckboxField--md___0I29B", "hop-CheckboxField__description": "CheckboxField-module__hop-CheckboxField__description___FQ5t0", "hop-CheckboxField__checkbox": "CheckboxField-module__hop-CheckboxField__checkbox___hNlqN" };
 var GlobalCheckboxFieldCssSelector = "hop-CheckboxField";
 var CheckboxToDescriptionSizeAdapter = {
   sm: "xs",

package/dist/chunk-E5RHW4IY.js

@@ -0,0 +1,70 @@
+import { _Label } from './chunk-BD2ZOQJW.js';
+import { useFormProps } from './chunk-K3GNQGLK.js';
+import { useLocalizedString } from './chunk-NNLLQWDS.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, Div } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// css-module:./FieldLabel.module.css#css-module
+var FieldLabel_module_default = { "hop-FieldLabel__wrapper": "FieldLabel-module__hop-FieldLabel__wrapper___VGoF6", "hop-FieldLabel__indicator": "FieldLabel-module__hop-FieldLabel__indicator___fp8NS" };
+var GlobalFieldLabelCssSelector = "hop-FieldLabel";
+function FieldLabel(props) {
+  props = useFormProps(props);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const stringFormatter = useLocalizedString();
+  const {
+    className,
+    children,
+    style,
+    contextualHelp,
+    isRequired,
+    necessityIndicator,
+    wrapperProps,
+    ...otherProps
+  } = ownProps;
+  const classNames = clsx(
+    className,
+    GlobalFieldLabelCssSelector,
+    cssModule(
+      FieldLabel_module_default,
+      GlobalFieldLabelCssSelector
+    ),
+    stylingProps.className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  if (!children) {
+    return null;
+  }
+  const necessityLabel = isRequired ? stringFormatter.format("FieldLabel.necessityLabel.required") : stringFormatter.format("FieldLabel.necessityLabel.optional");
+  const requiredIndicator = /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "aria-label": necessityLabel, className: FieldLabel_module_default["hop-FieldLabel__indicator"], children: "*" });
+  const label = /* @__PURE__ */ jsxs(
+    _Label,
+    {
+      ...otherProps,
+      className: classNames,
+      style: mergedStyles,
+      children: [
+        children,
+        necessityIndicator === "label" && !isRequired && /* @__PURE__ */ jsxs("span", { children: [
+          " (",
+          necessityLabel,
+          ")"
+        ] }),
+        necessityIndicator === "asterisk" && isRequired && requiredIndicator
+      ]
+    }
+  );
+  if (!contextualHelp) {
+    return label;
+  }
+  return /* @__PURE__ */ jsxs(Div, { className: clsx(wrapperProps == null ? void 0 : wrapperProps.className, FieldLabel_module_default["hop-FieldLabel__wrapper"]), children: [
+    label,
+    contextualHelp
+  ] });
+}
+
+export { FieldLabel, GlobalFieldLabelCssSelector };

package/dist/chunk-ESCEY6RN.js

@@ -0,0 +1,137 @@
+import { ToggleButtonContext } from './chunk-BYERWFG4.js';
+import { useProgressVisibility } from './chunk-HZTYQ5FQ.js';
+import { _Spinner } from './chunk-WEKPO5YP.js';
+import { IconListContext } from './chunk-GBWXEK6N.js';
+import { useLocalizedString } from './chunk-NNLLQWDS.js';
+import { useSlot } from './chunk-H5YTU3U7.js';
+import { ensureTextWrapper } from './chunk-NGZNCS3G.js';
+import { ClearProviders } from './chunk-PQSMCDAM.js';
+import { TextContext } from './chunk-ZNOU2CGM.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 clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, ToggleButton as ToggleButton$1, DEFAULT_SLOT } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// css-module:./ToggleButton.module.css#css-module
+var ToggleButton_module_default = { "hop-ToggleButton": "ToggleButton-module__hop-ToggleButton___oE-c4", "hop-ToggleButton--fluid": "ToggleButton-module__hop-ToggleButton--fluid___tjNCt", "hop-ToggleButton--sm": "ToggleButton-module__hop-ToggleButton--sm___3FzX2", "hop-ToggleButton--icon-only": "ToggleButton-module__hop-ToggleButton--icon-only___sdnLP", "hop-ToggleButton--primary": "ToggleButton-module__hop-ToggleButton--primary___j98yk", "hop-ToggleButton--secondary": "ToggleButton-module__hop-ToggleButton--secondary___8WysN", "hop-ToggleButton--upsell": "ToggleButton-module__hop-ToggleButton--upsell___Op-iH", "hop-ToggleButton--tertiary": "ToggleButton-module__hop-ToggleButton--tertiary___YiTR9", "hop-ToggleButton--loading": "ToggleButton-module__hop-ToggleButton--loading___l26Nv", "hop-ToggleButton__Spinner": "ToggleButton-module__hop-ToggleButton__Spinner___eTDKR", "hop-ToggleButton__icon": "ToggleButton-module__hop-ToggleButton__icon___9MF68", "hop-ToggleButton__icon-list": "ToggleButton-module__hop-ToggleButton__icon-list___36wAy", "hop-ToggleButton__text": "ToggleButton-module__hop-ToggleButton__text___dDxdD", "hop-ToggleButton__end-icon": "ToggleButton-module__hop-ToggleButton__end-icon___kTzUI", "hop-ToggleButton__end-icon-list": "ToggleButton-module__hop-ToggleButton__end-icon-list___OooWy" };
+var GlobalToggleButtonCssSelector = "hop-ToggleButton";
+function ToggleButton(props, ref) {
+  [props, ref] = useContextProps(props, ref, ToggleButtonContext);
+  const stringFormatter = useLocalizedString();
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const [textRef, hasText] = useSlot();
+  const {
+    className,
+    children: childrenProp,
+    size: sizeProp,
+    style,
+    slot,
+    clearContexts,
+    isFluid,
+    isHidden,
+    isLoading,
+    spinnerProps,
+    variant = "primary",
+    ...otherProps
+  } = ownProps;
+  const isProgressVisible = useProgressVisibility(isLoading);
+  const size = useResponsiveValue(sizeProp) || "md";
+  if (isHidden) {
+    return null;
+  }
+  const classNames = clsx(
+    GlobalToggleButtonCssSelector,
+    cssModule(
+      ToggleButton_module_default,
+      GlobalToggleButtonCssSelector,
+      variant,
+      size,
+      isFluid && "fluid",
+      isProgressVisible && "loading",
+      !hasText && "icon-only"
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...style,
+    ...stylingProps.style
+  };
+  if (!hasText && (!props["aria-label"] && !props["aria-labelledby"])) {
+    console.warn("An aria-label or aria-labelledby prop is required for accessibility.");
+  }
+  const children = composeRenderProps(childrenProp, (prev) => {
+    return ensureTextWrapper(prev);
+  });
+  const { className: spinnerClassName, ...otherSpinnerProps } = spinnerProps != null ? spinnerProps : {};
+  const spinnerClassNames = clsx(ToggleButton_module_default["hop-ToggleButton__Spinner"], spinnerClassName);
+  return /* @__PURE__ */ jsx(ClearProviders, { values: clearContexts, children: /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [IconListContext, {
+          slots: {
+            [DEFAULT_SLOT]: {
+              size,
+              className: ToggleButton_module_default["hop-ToggleButton__icon-list"]
+            },
+            "end-icon": {
+              size,
+              className: ToggleButton_module_default["hop-ToggleButton__end-icon-list"]
+            }
+          }
+        }],
+        [IconContext, {
+          slots: {
+            [DEFAULT_SLOT]: {
+              size,
+              className: ToggleButton_module_default["hop-ToggleButton__icon"]
+            },
+            "end-icon": {
+              size,
+              className: ToggleButton_module_default["hop-ToggleButton__end-icon"]
+            }
+          }
+        }],
+        [TextContext, {
+          className: ToggleButton_module_default["hop-ToggleButton__text"],
+          size,
+          ref: textRef
+        }]
+      ],
+      children: /* @__PURE__ */ jsx(
+        ToggleButton$1,
+        {
+          ref,
+          className: classNames,
+          style: mergedStyles,
+          slot: slot != null ? slot : void 0,
+          isDisabled: isLoading,
+          ...otherProps,
+          children: (buttonRenderProps) => {
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              children(buttonRenderProps),
+              isProgressVisible && /* @__PURE__ */ jsx(
+                _Spinner,
+                {
+                  "aria-label": stringFormatter.format("Button.spinnerAriaLabel"),
+                  size,
+                  className: spinnerClassNames,
+                  ...otherSpinnerProps
+                }
+              )
+            ] });
+          }
+        }
+      )
+    }
+  ) });
+}
+var _ToggleButton = forwardRef(ToggleButton);
+_ToggleButton.displayName = "ToggleButton";
+
+export { GlobalToggleButtonCssSelector, _ToggleButton };

package/dist/{chunk-FMAMU4X6.js → chunk-ETBPFG5Z.js}

@@ -1,4 +1,5 @@
 import { HeadingContext } from './chunk-WJRMD4JP.js';
+import { ClearProviders } from './chunk-PQSMCDAM.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { slot, useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
 import clsx from 'clsx';
@@ -7,13 +8,16 @@ 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___8DNX2", "hop-Heading--xs": "Heading-module__hop-Heading--xs___ijsiM", "hop-Heading--sm": "Heading-module__hop-Heading--sm___BN2tx", "hop-Heading--md": "Heading-module__hop-Heading--md___lD9hR", "hop-Heading--lg": "Heading-module__hop-Heading--lg___ONPsa", "hop-Heading--xl": "Heading-module__hop-Heading--xl___4KF24", "hop-Heading--2xl": "Heading-module__hop-Heading--2xl___E-4uB", "hop-Heading--3xl": "Heading-module__hop-Heading--3xl___OwlpV" };
+var Heading_module_default = { "hop-Heading": "Heading-module__hop-Heading___EG00A", "hop-Heading--xs": "Heading-module__hop-Heading--xs___xNucC", "hop-Heading--sm": "Heading-module__hop-Heading--sm___05Byx", "hop-Heading--md": "Heading-module__hop-Heading--md___7vlXO", "hop-Heading--lg": "Heading-module__hop-Heading--lg___-iM4S", "hop-Heading--xl": "Heading-module__hop-Heading--xl___YiFxf", "hop-Heading--2xl": "Heading-module__hop-Heading--2xl___sLtGX", "hop-Heading--3xl": "Heading-module__hop-Heading--3xl___L3BmC" };
 var GlobalHeadingCssSelector = "hop-Heading";
 function Heading(props, ref) {
   [props, ref] = useContextProps(props, ref, HeadingContext);
   const { stylingProps, ...ownProps } = useStyledSystem(props);
-  const { className, size: sizeProp, children, style, ...otherProps } = ownProps;
+  const { className, size: sizeProp, children, style, isHidden, clearContexts, ...otherProps } = ownProps;
   const size = useResponsiveValue(sizeProp != null ? sizeProp : "md");
+  if (isHidden) {
+    return null;
+  }
   const classNames = clsx(
     GlobalHeadingCssSelector,
     cssModule(
@@ -28,7 +32,7 @@ function Heading(props, ref) {
     ...stylingProps.style,
     ...style
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ClearProviders, { values: clearContexts, children: /* @__PURE__ */ jsx(
     Heading$1,
     {
       ref,
@@ -37,7 +41,7 @@ function Heading(props, ref) {
       ...otherProps,
       children
     }
-  );
+  ) });
 }
 var _Heading = slot("heading", forwardRef(Heading));
 _Heading.displayName = "Heading";

package/dist/{chunk-DROINCCH.js → chunk-EWP3IGMD.js}

@@ -5,7 +5,7 @@ import { MenuSection as MenuSection$1 } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./MenuSection.module.css#css-module
-var MenuSection_module_default = { "hop-MenuSection": "MenuSection-module__hop-MenuSection___x19b9" };
+var MenuSection_module_default = { "hop-MenuSection": "MenuSection-module__hop-MenuSection___asqc2" };
 var GlobalMenuSectionCssSelector = "hop-MenuSection";
 function MenuSection(props) {
   const { stylingProps, ...ownProps } = useStyledSystem(props);

package/dist/{chunk-HVTA4MEG.js → chunk-F6VSINXC.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___nkvhg", "hop-OverlineText__text": "OverlineText-module__hop-OverlineText__text___2PvUz" };
+var OverlineText_module_default = { "hop-OverlineText": "OverlineText-module__hop-OverlineText___uqriG", "hop-OverlineText__text": "OverlineText-module__hop-OverlineText__text___QC4h8" };
 var GlobalOverlineTextCssSelector = "hop-OverlineText";
 function OverlineText(props, ref) {
   [props, ref] = useContextProps(props, ref, OverlineTextContext);

package/dist/{chunk-MC6PDZR7.js → chunk-FJUFE7XU.js}

@@ -1,10 +1,10 @@
-import { CheckboxGroupContext } from './chunk-N7YDPVZL.js';
-import { _Label } from './chunk-Q5UDUQNS.js';
-import { _HelperMessage } from './chunk-CFBDROF2.js';
-import { _ErrorMessage } from './chunk-H7EN3SVB.js';
 import { CheckboxFieldContext } from './chunk-ZGNK4GWA.js';
+import { CheckboxGroupContext } from './chunk-N7YDPVZL.js';
+import { FieldLabel } from './chunk-E5RHW4IY.js';
+import { _HelperMessage } from './chunk-57WEWZ4L.js';
+import { _ErrorMessage } from './chunk-DOP43XH5.js';
 import { CheckboxContext } from './chunk-2EAZPH3M.js';
-import { useFormProps } from './chunk-4V3BBI6M.js';
+import { useFormProps } from './chunk-K3GNQGLK.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
@@ -15,7 +15,7 @@ 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___GykSz", "hop-CheckboxGroup--bordered": "CheckboxGroup-module__hop-CheckboxGroup--bordered___wgeE5", "hop-CheckboxGroup--sm": "CheckboxGroup-module__hop-CheckboxGroup--sm___Qefe-", "hop-CheckboxGroup--md": "CheckboxGroup-module__hop-CheckboxGroup--md___6gQ1R", "hop-CheckboxGroup__label": "CheckboxGroup-module__hop-CheckboxGroup__label___y-048", "hop-CheckboxGroup__list": "CheckboxGroup-module__hop-CheckboxGroup__list___FcZB2", "hop-CheckboxGroup__checkbox": "CheckboxGroup-module__hop-CheckboxGroup__checkbox___l6dWD", "hop-CheckboxGroup__error-message": "CheckboxGroup-module__hop-CheckboxGroup__error-message___D-3RF", "hop-CheckboxGroup__helper-message": "CheckboxGroup-module__hop-CheckboxGroup__helper-message___KWXu4" };
+var CheckboxGroup_module_default = { "hop-CheckboxGroup": "CheckboxGroup-module__hop-CheckboxGroup___FPWi2", "hop-CheckboxGroup--bordered": "CheckboxGroup-module__hop-CheckboxGroup--bordered___eaDJ-", "hop-CheckboxGroup--sm": "CheckboxGroup-module__hop-CheckboxGroup--sm___vIgLP", "hop-CheckboxGroup--md": "CheckboxGroup-module__hop-CheckboxGroup--md___XAwZY", "hop-CheckboxGroup__label": "CheckboxGroup-module__hop-CheckboxGroup__label___5XiPD", "hop-CheckboxGroup__list": "CheckboxGroup-module__hop-CheckboxGroup__list___CDciU", "hop-CheckboxGroup__checkbox": "CheckboxGroup-module__hop-CheckboxGroup__checkbox___0tf6w", "hop-CheckboxGroup__error-message": "CheckboxGroup-module__hop-CheckboxGroup__error-message___fx1ES", "hop-CheckboxGroup__helper-message": "CheckboxGroup-module__hop-CheckboxGroup__helper-message___JhiB-" };
 var GlobalCheckboxGroupCssSelector = "hop-CheckboxGroup";
 function CheckboxGroup(props, ref) {
   var _a, _b, _c;
@@ -26,6 +26,7 @@ function CheckboxGroup(props, ref) {
   const {
     className,
     children: childrenProp,
+    contextualHelp,
     description,
     errorMessage,
     isDisabled,
@@ -111,10 +112,11 @@ function CheckboxGroup(props, ref) {
           "data-orientation": orientation,
           ...otherProps,
           children: (checkboxGroupRenderProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
-            label && /* @__PURE__ */ jsx(
-              _Label,
+            /* @__PURE__ */ jsx(
+              FieldLabel,
               {
                 className: CheckboxGroup_module_default["hop-CheckboxGroup__label"],
+                contextualHelp,
                 isRequired,
                 necessityIndicator,
                 children: label