@hopper-ui/components 1.0.1 → 1.0.3

package/dist/chunk-AQITZWYM.js

@@ -0,0 +1,43 @@
+import { FooterContext } from './chunk-I67NHYK4.js';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+var GlobalFooterCssSelector = "hop-Footer";
+function Footer(props, ref) {
+  [props, ref] = useContextProps(props, ref, FooterContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    style,
+    slot,
+    ...otherProps
+  } = ownProps;
+  const classNames = clsx(
+    GlobalFooterCssSelector,
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "footer",
+    {
+      ...otherProps,
+      ref,
+      className: classNames,
+      style: mergedStyles,
+      slot: slot || void 0,
+      children
+    }
+  );
+}
+var _Footer = forwardRef(Footer);
+_Footer.displayName = "Footer";
+
+export { GlobalFooterCssSelector, _Footer };

package/dist/chunk-BAKCRZAG.js

@@ -0,0 +1,82 @@
+import { ButtonGroupContext } from './chunk-VJQ7M2BK.js';
+import { ButtonContext } from './chunk-WMTWFKKP.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { filterDOMProps } from '@react-aria/utils';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+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___J-bP3", "hop-ButtonGroup--horizontal": "ButtonGroup-module__hop-ButtonGroup--horizontal___5DrPu", "hop-ButtonGroup--vertical": "ButtonGroup-module__hop-ButtonGroup--vertical___6mZqj", "hop-ButtonGroup--start": "ButtonGroup-module__hop-ButtonGroup--start___OQ5-x", "hop-ButtonGroup--center": "ButtonGroup-module__hop-ButtonGroup--center___Wa8qq", "hop-ButtonGroup--end": "ButtonGroup-module__hop-ButtonGroup--end___Bnq-S", "hop-ButtonGroup--wrap": "ButtonGroup-module__hop-ButtonGroup--wrap___w7xGi", "hop-ButtonGroup--fluid": "ButtonGroup-module__hop-ButtonGroup--fluid___cYLTZ" };
+var GlobalButtonGroupCssSelector = "hop-ButtonGroup";
+function ButtonGroup(props, ref) {
+  var _a, _b, _c, _d, _e;
+  [props, ref] = useContextProps(props, ref, ButtonGroupContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    children,
+    size: sizeProp,
+    isFluid: isFluidProp,
+    isDisabled = false,
+    className,
+    align: alignProp,
+    style: styleProp,
+    orientation: orientationProp,
+    wrap: wrapProp,
+    ...otherProps
+  } = ownProps;
+  const align = (_a = useResponsiveValue(alignProp)) != null ? _a : "start";
+  const size = (_b = useResponsiveValue(sizeProp)) != null ? _b : "md";
+  const isFluid = (_c = useResponsiveValue(isFluidProp)) != null ? _c : false;
+  const wrap = (_d = useResponsiveValue(wrapProp)) != null ? _d : true;
+  const orientation = (_e = useResponsiveValue(orientationProp)) != null ? _e : "horizontal";
+  const classNames = clsx(
+    className,
+    GlobalButtonGroupCssSelector,
+    cssModule(
+      ButtonGroup_module_default,
+      "hop-ButtonGroup",
+      size,
+      align,
+      isFluid && "fluid",
+      wrap && "wrap",
+      orientation
+    ),
+    stylingProps.className
+  );
+  const style = {
+    ...stylingProps.style,
+    ...styleProp
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...filterDOMProps(otherProps, { labelable: true }),
+      ref,
+      className: classNames,
+      style,
+      slot: props.slot || void 0,
+      children: /* @__PURE__ */ jsx(
+        SlotProvider,
+        {
+          values: [[
+            ButtonContext,
+            {
+              size,
+              isDisabled,
+              isFluid
+            }
+          ]],
+          children
+        }
+      )
+    }
+  );
+}
+var _ButtonGroup = forwardRef(ButtonGroup);
+_ButtonGroup.displayName = "ButtonGroup";
+
+export { GlobalButtonGroupCssSelector, _ButtonGroup };

package/dist/{chunk-TRS7R4W3.js → chunk-CTK5YVBZ.js}

@@ -1,5 +1,5 @@
+import { LabelContext } from './chunk-QCA3ZR56.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
-import { LabelContext } from './chunk-HVKOIMMW.js';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
@@ -7,7 +7,7 @@ import { useContextProps, Label as Label$1 } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Label.module.css#css-module
-var Label_module_default = { "hop-Label": "Label-module__hop-Label___qOIKf", "hop-Label--xs": "Label-module__hop-Label--xs___YPM1S", "hop-Label--sm": "Label-module__hop-Label--sm___uUjjd", "hop-Label--md": "Label-module__hop-Label--md___q3H4q", "hop-Label--lg": "Label-module__hop-Label--lg___xJQna", "hop-Label--xl": "Label-module__hop-Label--xl___eXF1C", "hop-Label--2xl": "Label-module__hop-Label--2xl___E1Iq6", "hop-Label--inherit": "Label-module__hop-Label--inherit___zl7QA" };
+var Label_module_default = { "hop-Label": "Label-module__hop-Label___tg1n7", "hop-Label--xs": "Label-module__hop-Label--xs___4pWwc", "hop-Label--sm": "Label-module__hop-Label--sm___lRRVW", "hop-Label--md": "Label-module__hop-Label--md___2oL46", "hop-Label--lg": "Label-module__hop-Label--lg___GE3zR", "hop-Label--xl": "Label-module__hop-Label--xl___8-86h", "hop-Label--2xl": "Label-module__hop-Label--2xl___HSwTt", "hop-Label--inherit": "Label-module__hop-Label--inherit___h8Ebb" };
 var GlobalLabelCssSelector = "hop-Label";
 function Label(props, ref) {
   var _a;

package/dist/chunk-CTOL6AVF.js

@@ -0,0 +1,156 @@
+import { TextFieldContext } from './chunk-O4XPUINW.js';
+import { _InputGroup } from './chunk-RXBKOHT2.js';
+import { ErrorMessageContext } from './chunk-ACVMW6YD.js';
+import { HelperMessageContext } from './chunk-ESVVLTEN.js';
+import { _ClearButton } from './chunk-UARL5M2W.js';
+import { useLocalizedString } from './chunk-H6CDFWVR.js';
+import { LabelContext } from './chunk-QCA3ZR56.js';
+import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
+import { _Text } from './chunk-4RIAVSLK.js';
+import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
+import { TextContext } from './chunk-X6SER3TZ.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { IconContext } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { mergeRefs } from '@react-aria/utils';
+import { useControlledState } from '@react-stately/utils';
+import { forwardRef, useState, useCallback } from 'react';
+import { useObjectRef } from 'react-aria';
+import { useContextProps, composeRenderProps, Input, TextField as TextField$1 } from 'react-aria-components';
+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___LVxGo", "hop-TextField--fluid": "TextField-module__hop-TextField--fluid___Zxhx8", "hop-TextField__Label": "TextField-module__hop-TextField__Label___j-hHO", "hop-TextField__prefix": "TextField-module__hop-TextField__prefix___W7szZ", "hop-TextField__InputGroup": "TextField-module__hop-TextField__InputGroup___6TfYD", "hop-TextField__ErrorMessage": "TextField-module__hop-TextField__ErrorMessage___rDG7U", "hop-TextField__HelperMessage": "TextField-module__hop-TextField__HelperMessage___l-32U" };
+var GlobalTextFieldCssSelector = "hop-TextField";
+function TextField(props, ref) {
+  var _a;
+  const {
+    inputRef: userProvidedInputRef = null,
+    ...propsWithoutRef
+  } = props;
+  [props, ref] = useContextProps(propsWithoutRef, ref, TextFieldContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const [characterCount, setCharacterCount] = useState(() => {
+    var _a2, _b, _c, _d;
+    return (_d = (_c = (_a2 = props.value) == null ? void 0 : _a2.length) != null ? _c : (_b = props.defaultValue) == null ? void 0 : _b.length) != null ? _d : 0;
+  });
+  const {
+    className,
+    style: styleProp,
+    size,
+    prefix,
+    showCharacterCount,
+    maxLength,
+    placeholder,
+    isClearable,
+    onChange: onChangeProp,
+    children,
+    onClear,
+    defaultValue,
+    value: valueProp,
+    isFluid: isFluidProp,
+    isDisabled,
+    isInvalid,
+    ...otherProps
+  } = ownProps;
+  const inputRef = useObjectRef(mergeRefs(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
+  const isFluid = (_a = useResponsiveValue(isFluidProp)) != null ? _a : false;
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalTextFieldCssSelector,
+    cssModule(
+      TextField_module_default,
+      "hop-TextField",
+      isClearable && "clearable",
+      isFluid && "fluid"
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const handleTextChanged = useCallback((value2) => {
+    setCharacterCount(value2.length);
+    onChangeProp == null ? void 0 : onChangeProp(value2);
+  }, [onChangeProp]);
+  const [value, onChange] = useControlledState(valueProp, defaultValue || "", handleTextChanged);
+  const handleClear = useCallback(() => {
+    onChange("");
+    onClear == null ? void 0 : onClear();
+  }, [onChange, onClear]);
+  const showClearButton = isClearable && characterCount !== 0;
+  if (showCharacterCount && !maxLength) {
+    console.warn("If showCharacterCount is true, maxLength must be set to the maximum number of characters allowed in the TextField.");
+  }
+  const prefixMarkup = prefix ? /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [TextContext, { size, className: TextField_module_default["hop-TextField__prefix"] }],
+        [IconContext, { size, className: TextField_module_default["hop-TextField__prefix"] }]
+      ],
+      children: isTextOnlyChildren(prefix) ? /* @__PURE__ */ jsx(_Text, { children: prefix }) : prefix
+    }
+  ) : null;
+  const inputMarkup = /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsxs(
+    _InputGroup,
+    {
+      isFluid,
+      size,
+      className: TextField_module_default["hop-TextField__InputGroup"],
+      isDisabled,
+      isInvalid,
+      children: [
+        prefixMarkup,
+        /* @__PURE__ */ jsx(Input, { ref: inputRef, placeholder }),
+        showCharacterCount && maxLength && /* @__PURE__ */ jsx(CharacterCount, { characterLeft: maxLength - characterCount }),
+        showClearButton && /* @__PURE__ */ jsx(_ClearButton, { isDisabled, size: "lg", onPress: handleClear })
+      ]
+    }
+  ) });
+  const childrenMarkup = composeRenderProps(children, (prev) => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        SlotProvider,
+        {
+          values: [
+            [LabelContext, { className: TextField_module_default["hop-TextField__Label"] }],
+            [HelperMessageContext, { className: TextField_module_default["hop-TextField__HelperMessage"] }],
+            [ErrorMessageContext, { className: TextField_module_default["hop-TextField__ErrorMessage"] }]
+          ],
+          children: prev
+        }
+      ),
+      inputMarkup
+    ] });
+  });
+  return /* @__PURE__ */ jsx(
+    TextField$1,
+    {
+      ref,
+      value,
+      style,
+      className: classNames,
+      maxLength,
+      onChange,
+      isDisabled,
+      isInvalid,
+      ...otherProps,
+      children: childrenMarkup
+    }
+  );
+}
+function CharacterCount({ characterLeft }) {
+  const stringFormatter = useLocalizedString();
+  const accessibilityString = stringFormatter.format("Input.charactersLeft", { charLeft: characterLeft });
+  return /* @__PURE__ */ jsx(_Text, { "aria-label": accessibilityString, color: "neutral-weakest", size: "xs", children: characterLeft });
+}
+var _TextField = forwardRef(TextField);
+_TextField.displayName = "TextField";
+
+export { GlobalTextFieldCssSelector, _TextField };

package/dist/chunk-D6UTDI2K.js

@@ -0,0 +1,28 @@
+import { _Flex } from './chunk-TVFC2MJ4.js';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function Stack(props, ref) {
+  const {
+    reverse,
+    alignX,
+    alignY,
+    gap = "stack-md",
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(
+    _Flex,
+    {
+      ref,
+      alignItems: alignX,
+      justifyContent: alignY,
+      direction: reverse ? "column-reverse" : "column",
+      gap,
+      ...rest
+    }
+  );
+}
+var _Stack = forwardRef(Stack);
+_Stack.displayName = "Stack";
+
+export { _Stack };

package/dist/{chunk-ZUMAL5WB.js → chunk-DJU2DUTQ.js}

@@ -1,7 +1,7 @@
 import { ChipContext } from './chunk-WTKIUAHI.js';
 import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
-import { _Text } from './chunk-HUJ3PTM7.js';
-import { TextContext } from './chunk-OE5BLFZI.js';
+import { _Text } from './chunk-4RIAVSLK.js';
+import { TextContext } from './chunk-X6SER3TZ.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
@@ -13,7 +13,7 @@ import { useContextProps, DEFAULT_SLOT } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Chip.module.css#css-module
-var Chip_module_default = { "hop-Chip": "Chip-module__hop-Chip___ow5yy", "hop-Chip--xs": "Chip-module__hop-Chip--xs___y91c1", "hop-Chip--sm": "Chip-module__hop-Chip--sm___jdtD0", "hop-Chip--md": "Chip-module__hop-Chip--md___vOUpq", "hop-Chip--lg": "Chip-module__hop-Chip--lg___ksHhv", "hop-Chip--neutral": "Chip-module__hop-Chip--neutral___-l3Wj", "hop-Chip--progress": "Chip-module__hop-Chip--progress___mHQ8v", "hop-Chip--positive": "Chip-module__hop-Chip--positive___cd2-6", "hop-Chip--caution": "Chip-module__hop-Chip--caution___reN8y", "hop-Chip--negative": "Chip-module__hop-Chip--negative___VDivs", "hop-Chip--option1": "Chip-module__hop-Chip--option1___OUGGx", "hop-Chip--option2": "Chip-module__hop-Chip--option2___X--Uy", "hop-Chip--option3": "Chip-module__hop-Chip--option3___mEuhz", "hop-Chip--option4": "Chip-module__hop-Chip--option4___kSZqI", "hop-Chip--option5": "Chip-module__hop-Chip--option5___O9YoG", "hop-Chip--option6": "Chip-module__hop-Chip--option6___pAhUG", "hop-Chip--inactive": "Chip-module__hop-Chip--inactive___KcvEd", "hop-Chip--disabled": "Chip-module__hop-Chip--disabled___VXInB", "hop-Chip__icon": "Chip-module__hop-Chip__icon___4AD0Y", "hop-Chip__icon-list": "Chip-module__hop-Chip__icon-list___hyYls", "hop-Chip__text": "Chip-module__hop-Chip__text___ABDy4", "hop-Chip__end-icon": "Chip-module__hop-Chip__end-icon___98iKE", "hop-Chip__end-icon-list": "Chip-module__hop-Chip__end-icon-list___aiiqm" };
+var Chip_module_default = { "hop-Chip": "Chip-module__hop-Chip___KVUnP", "hop-Chip--xs": "Chip-module__hop-Chip--xs___K9blS", "hop-Chip--sm": "Chip-module__hop-Chip--sm___U8plm", "hop-Chip--md": "Chip-module__hop-Chip--md___oU8bV", "hop-Chip--lg": "Chip-module__hop-Chip--lg___T0jye", "hop-Chip--neutral": "Chip-module__hop-Chip--neutral___Hepkw", "hop-Chip--progress": "Chip-module__hop-Chip--progress___znAZi", "hop-Chip--positive": "Chip-module__hop-Chip--positive___tyQ-N", "hop-Chip--caution": "Chip-module__hop-Chip--caution___WMvPA", "hop-Chip--negative": "Chip-module__hop-Chip--negative___vev3J", "hop-Chip--option1": "Chip-module__hop-Chip--option1___WZaqu", "hop-Chip--option2": "Chip-module__hop-Chip--option2___GlsQ3", "hop-Chip--option3": "Chip-module__hop-Chip--option3___QURDu", "hop-Chip--option4": "Chip-module__hop-Chip--option4___2Qznz", "hop-Chip--option5": "Chip-module__hop-Chip--option5___yTIji", "hop-Chip--option6": "Chip-module__hop-Chip--option6___FyrNE", "hop-Chip--inactive": "Chip-module__hop-Chip--inactive___7y7LL", "hop-Chip--disabled": "Chip-module__hop-Chip--disabled___vO96s", "hop-Chip__icon": "Chip-module__hop-Chip__icon___0V0Yr", "hop-Chip__icon-list": "Chip-module__hop-Chip__icon-list___WP57P", "hop-Chip__text": "Chip-module__hop-Chip__text___m-KTB", "hop-Chip__end-icon": "Chip-module__hop-Chip__end-icon___QuyDr", "hop-Chip__end-icon-list": "Chip-module__hop-Chip__end-icon-list___Jso7r" };
 var GlobalChipCssSelector = "hop-Chip";
 var ChipToTextSizeAdapter = {
   xs: "xs",
@@ -92,6 +92,7 @@ function Chip(props, ref) {
           className: classNames,
           style: mergedStyles,
           slot: slot != null ? slot : void 0,
+          role: "presentation",
           children: content
         }
       )

package/dist/{chunk-EADFYPVX.js → chunk-DLTYFRKN.js}

@@ -1,9 +1,9 @@
 import { CheckboxContext } from './chunk-2EAZPH3M.js';
 import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
-import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
-import { _Text } from './chunk-HUJ3PTM7.js';
+import { _Text } from './chunk-4RIAVSLK.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
-import { TextContext } from './chunk-OE5BLFZI.js';
+import { TextContext } from './chunk-X6SER3TZ.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
@@ -14,7 +14,7 @@ import { useContextProps, composeRenderProps, Checkbox as Checkbox$1 } from 'rea
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./Checkbox.module.css#css-module
-var Checkbox_module_default = { "hop-Checkbox": "Checkbox-module__hop-Checkbox___BhbaC", "hop-Checkbox--sm": "Checkbox-module__hop-Checkbox--sm___49uhn", "hop-Checkbox--md": "Checkbox-module__hop-Checkbox--md___prKLF", "hop-Checkbox__icon": "Checkbox-module__hop-Checkbox__icon___HDKtm", "hop-Checkbox__icon-list": "Checkbox-module__hop-Checkbox__icon-list___2RKb6", "hop-Checkbox__box": "Checkbox-module__hop-Checkbox__box___3yEvn", "hop-Checkbox__check": "Checkbox-module__hop-Checkbox__check___9qQbS", "hop-Checkbox__text": "Checkbox-module__hop-Checkbox__text___R5Lg8" };
+var Checkbox_module_default = { "hop-Checkbox": "Checkbox-module__hop-Checkbox___1DFt5", "hop-Checkbox--sm": "Checkbox-module__hop-Checkbox--sm___qVMQC", "hop-Checkbox--md": "Checkbox-module__hop-Checkbox--md___Foz8P", "hop-Checkbox__icon": "Checkbox-module__hop-Checkbox__icon___CuyIN", "hop-Checkbox__icon-list": "Checkbox-module__hop-Checkbox__icon-list___r0ow6", "hop-Checkbox__box": "Checkbox-module__hop-Checkbox__box___7fJ21", "hop-Checkbox__check": "Checkbox-module__hop-Checkbox__check___FNna9", "hop-Checkbox__text": "Checkbox-module__hop-Checkbox__text___C3jhg" };
 var GlobalCheckboxCssSelector = "hop-Checkbox";
 function Checkbox(props, ref) {
   var _a;

package/dist/chunk-DXVKHP4V.js

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

package/dist/{chunk-VYNBJRJW.js → chunk-EE75ND6V.js}

@@ -4,9 +4,9 @@ import { CheckboxFieldContext } from './chunk-ZGNK4GWA.js';
 import { CheckboxGroupContext } from './chunk-N7YDPVZL.js';
 import { CheckboxListContext } from './chunk-WDUQUPTE.js';
 import { CheckboxContext } from './chunk-2EAZPH3M.js';
+import { LabelContext } from './chunk-QCA3ZR56.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
-import { LabelContext } from './chunk-HVKOIMMW.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
 import { forwardRef } from 'react';
@@ -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___nUraE", "hop-CheckboxGroup--bordered": "CheckboxGroup-module__hop-CheckboxGroup--bordered___icoNN", "hop-CheckboxGroup--sm": "CheckboxGroup-module__hop-CheckboxGroup--sm___4RB5I", "hop-CheckboxGroup--md": "CheckboxGroup-module__hop-CheckboxGroup--md___txX1B", "hop-CheckboxGroup__label": "CheckboxGroup-module__hop-CheckboxGroup__label___fAya3", "hop-CheckboxGroup__list": "CheckboxGroup-module__hop-CheckboxGroup__list___EPjvT", "hop-CheckboxGroup__checkbox": "CheckboxGroup-module__hop-CheckboxGroup__checkbox___d2Pv-", "hop-CheckboxGroup__error-message": "CheckboxGroup-module__hop-CheckboxGroup__error-message___t04hF", "hop-CheckboxGroup__helper-message": "CheckboxGroup-module__hop-CheckboxGroup__helper-message___w-9RG" };
+var CheckboxGroup_module_default = { "hop-CheckboxGroup": "CheckboxGroup-module__hop-CheckboxGroup___cbfu1", "hop-CheckboxGroup--bordered": "CheckboxGroup-module__hop-CheckboxGroup--bordered___f-WNB", "hop-CheckboxGroup--sm": "CheckboxGroup-module__hop-CheckboxGroup--sm___tbK-P", "hop-CheckboxGroup--md": "CheckboxGroup-module__hop-CheckboxGroup--md___HAY-5", "hop-CheckboxGroup__label": "CheckboxGroup-module__hop-CheckboxGroup__label___aI2C1", "hop-CheckboxGroup__list": "CheckboxGroup-module__hop-CheckboxGroup__list___q1pNC", "hop-CheckboxGroup__checkbox": "CheckboxGroup-module__hop-CheckboxGroup__checkbox___Tpw8k", "hop-CheckboxGroup__error-message": "CheckboxGroup-module__hop-CheckboxGroup__error-message___-5h6Q", "hop-CheckboxGroup__helper-message": "CheckboxGroup-module__hop-CheckboxGroup__helper-message___0EE6B" };
 var GlobalCheckboxGroupCssSelector = "hop-CheckboxGroup";
 function CheckboxGroup(props, ref) {
   var _a, _b;

package/dist/chunk-EWMWQ2MC.js

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

package/dist/chunk-GF2U6E4D.js

@@ -0,0 +1,56 @@
+import { _OverlineText } from './chunk-5EPNXRCT.js';
+import { BadgeContext } from './chunk-ZSFJVMJN.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./Badge.module.css#css-module
+var Badge_module_default = { "hop-Badge": "Badge-module__hop-Badge___HtEMK", "hop-Badge--primary": "Badge-module__hop-Badge--primary___-cwxH", "hop-Badge--secondary": "Badge-module__hop-Badge--secondary___FXeeD" };
+var GlobalBadgeCssSelector = "hop-Badge";
+function Badge(props, ref) {
+  [props, ref] = useContextProps(props, ref, BadgeContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    children,
+    className,
+    isDisabled,
+    style,
+    slot,
+    variant = "primary",
+    ...otherProps
+  } = ownProps;
+  const classNames = clsx(
+    className,
+    GlobalBadgeCssSelector,
+    cssModule(
+      Badge_module_default,
+      "hop-Badge",
+      variant
+    ),
+    stylingProps.className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    _OverlineText,
+    {
+      ...otherProps,
+      ref,
+      className: classNames,
+      style: mergedStyles,
+      slot: slot != null ? slot : void 0,
+      "data-disabled": isDisabled || void 0,
+      "aria-disabled": isDisabled || void 0,
+      children
+    }
+  );
+}
+var _Badge = forwardRef(Badge);
+_Badge.displayName = "Badge";
+
+export { GlobalBadgeCssSelector, _Badge };

package/dist/chunk-GXBVNCVP.js

@@ -0,0 +1,43 @@
+import { ContentContext } from './chunk-IXB2WK56.js';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+var GlobalContentCssSelector = "hop-Content";
+function Content(props, ref) {
+  [props, ref] = useContextProps(props, ref, ContentContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    style,
+    slot,
+    ...otherProps
+  } = ownProps;
+  const classNames = clsx(
+    GlobalContentCssSelector,
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...otherProps,
+      ref,
+      className: classNames,
+      style: mergedStyles,
+      slot: slot || void 0,
+      children
+    }
+  );
+}
+var _Content = forwardRef(Content);
+_Content.displayName = "Content";
+
+export { GlobalContentCssSelector, _Content };

package/dist/{chunk-BPM4ETTB.js → chunk-H6CDFWVR.js}

@@ -1,4 +1,4 @@
-import { __commonJS, __toESM } from './chunk-YSQDPG26.js';
+import { __commonJS, __toESM } from './chunk-2P3A4VVY.js';
 import { useLocalizedStringFormatter } from 'react-aria';
 
 // src/i18n/intl/en-US.json
@@ -6,7 +6,11 @@ var require_en_US = __commonJS({
   "src/i18n/intl/en-US.json"(exports, module) {
     module.exports = {
       "Button.spinnerAriaLabel": `Loading`,
-      "Input.charactersLeft": (args, formatter) => `${formatter.plural(args.charLeft, { "=0": `No characters left`, one: () => `${formatter.number(args.charLeft)} character left`, other: () => `${formatter.number(args.charLeft)} characters left` })}.`
+      "Tag.spinnerAriaLabel": `Loading`,
+      "ClearButton.clearAriaLabel": `Clear`,
+      "Input.charactersLeft": (args, formatter) => `${formatter.plural(args.charLeft, { "=0": `No characters left`, one: () => `${formatter.number(args.charLeft)} character left`, other: () => `${formatter.number(args.charLeft)} characters left` })}.`,
+      "PasswordField.toggleVisibility": `Toggle password visibility`,
+      "Tag.removeAriaLabel": `Remove`
     };
   }
 });
@@ -16,7 +20,11 @@ var require_fr_CA = __commonJS({
   "src/i18n/intl/fr-CA.json"(exports, module) {
     module.exports = {
       "Button.spinnerAriaLabel": `Chargement en cours`,
-      "Input.charactersLeft": (args, formatter) => `${formatter.plural(args.charLeft, { "=0": `Aucun caract\xE8re restant`, one: () => `${formatter.number(args.charLeft)} caract\xE8re restant`, other: () => `${formatter.number(args.charLeft)} caract\xE8res restants` })}.`
+      "Tag.spinnerAriaLabel": `Chargement en cours`,
+      "ClearButton.clearAriaLabel": `Effacer`,
+      "Input.charactersLeft": (args, formatter) => `${formatter.plural(args.charLeft, { "=0": `Aucun caract\xE8re restant`, one: () => `${formatter.number(args.charLeft)} caract\xE8re restant`, other: () => `${formatter.number(args.charLeft)} caract\xE8res restants` })}.`,
+      "PasswordField.toggleVisibility": `Basculer la visibilit\xE9 du mot de passe`,
+      "Tag.removeAriaLabel": `Supprimer`
     };
   }
 });

package/dist/chunk-I67NHYK4.js

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

package/dist/{chunk-KKFX7YII.js → chunk-IOLNBXZM.js}

@@ -1,6 +1,7 @@
-import { RadioFieldContext } from './chunk-DGLAGYBD.js';
 import { RadioContext } from './chunk-FU5CCPLP.js';
-import { TextContext } from './chunk-OE5BLFZI.js';
+import { RadioFieldContext } from './chunk-DGLAGYBD.js';
+import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
+import { TextContext } from './chunk-X6SER3TZ.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
@@ -11,7 +12,7 @@ import { useContextProps } 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___j1CT8", "hop-RadioField--sm": "RadioField-module__hop-RadioField--sm___Ln2rb", "hop-RadioField--md": "RadioField-module__hop-RadioField--md___gjZg1", "hop-RadioField__description": "RadioField-module__hop-RadioField__description___5M3wB", "hop-RadioField__radio": "RadioField-module__hop-RadioField__radio___jjwMS" };
+var RadioField_module_default = { "hop-RadioField": "RadioField-module__hop-RadioField___ZaNAp", "hop-RadioField--sm": "RadioField-module__hop-RadioField--sm___7g2-S", "hop-RadioField--md": "RadioField-module__hop-RadioField--md___-5Row", "hop-RadioField__description": "RadioField-module__hop-RadioField__description___5wJkd", "hop-RadioField__radio": "RadioField-module__hop-RadioField__radio___exdNe" };
 var GlobalRadioFieldCssSelector = "hop-RadioField";
 var RadioToDescriptionSizeAdapter = {
   sm: "xs",
@@ -46,7 +47,7 @@ function RadioField(props, ref) {
     ...style
   };
   const descriptionId = useId();
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsx(
     SlotProvider,
     {
       values: [
@@ -75,7 +76,7 @@ function RadioField(props, ref) {
         }
       )
     }
-  );
+  ) });
 }
 var _RadioField = forwardRef(RadioField);
 _RadioField.displayName = "RadioField";

package/dist/chunk-IXB2WK56.js

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

package/dist/{chunk-CE3ABLD2.js → chunk-JLF7DSUY.js}

@@ -1,9 +1,9 @@
 import { RadioContext } from './chunk-FU5CCPLP.js';
 import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
-import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
-import { _Text } from './chunk-HUJ3PTM7.js';
+import { _Text } from './chunk-4RIAVSLK.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
-import { TextContext } from './chunk-OE5BLFZI.js';
+import { TextContext } from './chunk-X6SER3TZ.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
@@ -14,7 +14,7 @@ import { useContextProps, composeRenderProps, Radio as Radio$1 } from 'react-ari
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./Radio.module.css#css-module
-var Radio_module_default = { "hop-Radio": "Radio-module__hop-Radio___J9jax", "hop-Radio--sm": "Radio-module__hop-Radio--sm___XzxGj", "hop-Radio--md": "Radio-module__hop-Radio--md___ma6ni", "hop-Radio__icon": "Radio-module__hop-Radio__icon___67u4N", "hop-Radio__icon-list": "Radio-module__hop-Radio__icon-list___AEqkh", "hop-Radio__box": "Radio-module__hop-Radio__box___-lKCg", "hop-Radio__bullet": "Radio-module__hop-Radio__bullet___glY5a", "hop-Radio__text": "Radio-module__hop-Radio__text___P-AeI" };
+var Radio_module_default = { "hop-Radio": "Radio-module__hop-Radio___EkCwX", "hop-Radio--sm": "Radio-module__hop-Radio--sm___-GEPO", "hop-Radio--md": "Radio-module__hop-Radio--md___ao9Hn", "hop-Radio__icon": "Radio-module__hop-Radio__icon___jA99I", "hop-Radio__icon-list": "Radio-module__hop-Radio__icon-list___mIXPB", "hop-Radio__box": "Radio-module__hop-Radio__box___8S6fY", "hop-Radio__bullet": "Radio-module__hop-Radio__bullet___ZOkCk", "hop-Radio__text": "Radio-module__hop-Radio__text___GmMaW" };
 var GlobalRadioCssSelector = "hop-Radio";
 function Radio(props, ref) {
   var _a;