@hopper-ui/components 1.4.6 → 1.4.8

package/dist/chunk-MM2SG6JU.js

@@ -0,0 +1,75 @@
+import { InternalTileContext } from './chunk-JTNKUYE5.js';
+import { TileGroupContext } from './chunk-3MTGAZ77.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, ToggleButtonGroup, Provider } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./TileGroup.module.css#css-module
+var TileGroup_module_default = { "hop-TileGroup": "TileGroup-module__hop-TileGroup___qtBC1" };
+var GlobalTileGroupCssSelector = "hop-TileGroup";
+var TileGroup = (props, ref) => {
+  [props, ref] = useContextProps(props, ref, TileGroupContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children: childrenProp,
+    style,
+    slot,
+    isDisabled,
+    selectionMode = "single",
+    disallowEmptySelection = true,
+    numberOfColumns = 3,
+    ...otherProps
+  } = ownProps;
+  const columns = useResponsiveValue(numberOfColumns);
+  const classNames = composeClassnameRenderProps(
+    GlobalTileGroupCssSelector,
+    cssModule(
+      TileGroup_module_default,
+      "hop-TileGroup"
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = composeRenderProps(style, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...{
+        gridTemplateColumns: `repeat(${columns}, 1fr)`
+      },
+      ...prev
+    };
+  });
+  const children = composeRenderProps(childrenProp, (prev) => {
+    return prev;
+  });
+  return /* @__PURE__ */ jsx(
+    ToggleButtonGroup,
+    {
+      ref,
+      className: classNames,
+      style: mergedStyles,
+      slot: slot != null ? slot : void 0,
+      isDisabled,
+      selectionMode,
+      disallowEmptySelection,
+      ...otherProps,
+      children: (renderProps) => /* @__PURE__ */ jsx(
+        Provider,
+        {
+          values: [
+            [InternalTileContext, { isDisabled }]
+          ],
+          children: children(renderProps)
+        }
+      )
+    }
+  );
+};
+var _TileGroup = forwardRef(TileGroup);
+_TileGroup.displayName = "TileGroup";
+
+export { GlobalTileGroupCssSelector, _TileGroup };

package/dist/{chunk-YKHKR2GB.js → chunk-N455JVEG.js}

@@ -1,13 +1,13 @@
 import { PopoverContext } from './chunk-SC6ZK5ON.js';
 import { FooterContext } from './chunk-I67NHYK4.js';
 import { LinkButtonContext } from './chunk-3UQFC2NQ.js';
-import { LinkContext } from './chunk-4VVNSXIB.js';
 import { isFunction, isNil } from './chunk-TIPN4VYD.js';
 import { ListBoxContext } from './chunk-UIEP5BA5.js';
-import { ContentContext } from './chunk-IXB2WK56.js';
+import { _HopperProvider } from './chunk-NMKBUGSO.js';
 import { ButtonGroupContext } from './chunk-VJQ7M2BK.js';
+import { LinkContext } from './chunk-4VVNSXIB.js';
+import { ContentContext } from './chunk-IXB2WK56.js';
 import { ButtonContext } from './chunk-WMTWFKKP.js';
-import { _HopperProvider } from './chunk-NMKBUGSO.js';
 import { HeadingContext } from './chunk-TXZ6BMFR.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
@@ -19,7 +19,7 @@ import { useContextProps, composeRenderProps, Popover as Popover$1, Dialog } fro
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Popover.module.css#css-module
-var Popover_module_default = { "hop-Popover": "Popover-module__hop-Popover___aaP3X", "fade": "Popover-module__fade___-haKc", "hop-Popover__wrapper": "Popover-module__hop-Popover__wrapper___GB5CC", "hop-Popover__dialog": "Popover-module__hop-Popover__dialog___FVSMn", "hop-Popover__dropdown": "Popover-module__hop-Popover__dropdown___T504A", "hop-Popover__title": "Popover-module__hop-Popover__title___SaXXu", "hop-Popover__content": "Popover-module__hop-Popover__content___8Ky0x", "hop-Popover__list-box": "Popover-module__hop-Popover__list-box___VYIIa", "hop-Popover__footer": "Popover-module__hop-Popover__footer___fIlP7", "hop-Popover__actions": "Popover-module__hop-Popover__actions___YVcIm", "hop-Popover__action": "Popover-module__hop-Popover__action___D2ry1" };
+var Popover_module_default = { "hop-Popover": "Popover-module__hop-Popover___s-Tc5", "fade": "Popover-module__fade___KKdAL", "hop-Popover__wrapper": "Popover-module__hop-Popover__wrapper___F22pC", "hop-Popover__dialog": "Popover-module__hop-Popover__dialog___9sc7A", "hop-Popover__dropdown": "Popover-module__hop-Popover__dropdown___fmSkA", "hop-Popover__title": "Popover-module__hop-Popover__title___E1FTb", "hop-Popover__content": "Popover-module__hop-Popover__content___ruY0N", "hop-Popover__list-box": "Popover-module__hop-Popover__list-box___Y9ii3", "hop-Popover__footer": "Popover-module__hop-Popover__footer___-mtVR", "hop-Popover__actions": "Popover-module__hop-Popover__actions___WKs0C", "hop-Popover__action": "Popover-module__hop-Popover__action___LBeX8" };
 var GlobalPopoverCssSelector = "hop-Popover";
 function Popover(props, ref) {
   var _a;

package/dist/chunk-NHKYEZTW.js

@@ -0,0 +1,56 @@
+import { _Button } from './chunk-KFH2WZVX.js';
+import { CloseButtonContext } from './chunk-RBWFFWIG.js';
+import { useLocalizedString } from './chunk-75DHKNW2.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { DismissIcon } from '@hopper-ui/icons';
+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:./CloseButton.module.css#css-module
+var CloseButton_module_default = { "hop-CloseButton": "CloseButton-module__hop-CloseButton___bJPhs" };
+var GlobalCloseButtonCssSelector = "hop-CloseButton";
+function CloseButton(props, ref) {
+  [props, ref] = useContextProps(props, ref, CloseButtonContext);
+  const stringFormatter = useLocalizedString();
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    "aria-label": ariaLabel = stringFormatter.format("CloseButton.ariaLabel"),
+    className,
+    style,
+    variant = "ghost-secondary",
+    ...otherProps
+  } = ownProps;
+  const classNames = clsx(
+    GlobalCloseButtonCssSelector,
+    cssModule(
+      CloseButton_module_default,
+      "hop-CloseButton"
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...style,
+    ...stylingProps.style
+  };
+  return /* @__PURE__ */ jsx(
+    _Button,
+    {
+      className: classNames,
+      style: mergedStyles,
+      ref,
+      "aria-label": ariaLabel,
+      variant,
+      slot: "close",
+      ...otherProps,
+      children: /* @__PURE__ */ jsx(DismissIcon, {})
+    }
+  );
+}
+var _CloseButton = forwardRef(CloseButton);
+_CloseButton.displayName = "CloseButton";
+
+export { GlobalCloseButtonCssSelector, _CloseButton };

package/dist/{chunk-E74QE424.js → chunk-NIOF2SKT.js}

@@ -1,6 +1,6 @@
 import { LinkContext } from './chunk-4VVNSXIB.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
-import { ensureTextWrapper } from './chunk-YAK3UMON.js';
+import { ensureTextWrapper } from './chunk-SRMMLWHK.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
@@ -12,7 +12,7 @@ import { useContextProps, composeRenderProps, DEFAULT_SLOT, Link as Link$1 } fro
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Link.module.css#css-module
-var Link_module_default = { "hop-Link": "Link-module__hop-Link___hFsMk", "hop-Link--standalone": "Link-module__hop-Link--standalone___jm3u6", "hop-Link__text": "Link-module__hop-Link__text___Kbh6k", "hop-Link--xs": "Link-module__hop-Link--xs___rIZ-v", "hop-Link--sm": "Link-module__hop-Link--sm___g86sw", "hop-Link--md": "Link-module__hop-Link--md___kjLvh", "hop-Link--lg": "Link-module__hop-Link--lg___Si5Fb", "hop-Link--xl": "Link-module__hop-Link--xl___9p-1K", "hop-Link--2xl": "Link-module__hop-Link--2xl___cQPDg", "hop-Link--quiet": "Link-module__hop-Link--quiet___5keT2", "hop-Link--primary": "Link-module__hop-Link--primary___O-tKj", "hop-Link--secondary": "Link-module__hop-Link--secondary___RqX-u", "hop-Link__icon": "Link-module__hop-Link__icon___5XPEa", "hop-Link__icon-list": "Link-module__hop-Link__icon-list___ezeQy", "hop-Link__start-icon": "Link-module__hop-Link__start-icon___1wooJ", "hop-Link__start-icon-list": "Link-module__hop-Link__start-icon-list___ibqXN" };
+var Link_module_default = { "hop-Link": "Link-module__hop-Link___li45Z", "hop-Link--standalone": "Link-module__hop-Link--standalone___kvGih", "hop-Link__text": "Link-module__hop-Link__text___nnbb-", "hop-Link--xs": "Link-module__hop-Link--xs___c-e4r", "hop-Link--sm": "Link-module__hop-Link--sm___1-6nB", "hop-Link--md": "Link-module__hop-Link--md___e0wE3", "hop-Link--lg": "Link-module__hop-Link--lg___IN-nr", "hop-Link--xl": "Link-module__hop-Link--xl___I7paI", "hop-Link--2xl": "Link-module__hop-Link--2xl___THFux", "hop-Link--quiet": "Link-module__hop-Link--quiet___XIA5v", "hop-Link--primary": "Link-module__hop-Link--primary___g0nJ6", "hop-Link--secondary": "Link-module__hop-Link--secondary___Ac9gm", "hop-Link__icon": "Link-module__hop-Link__icon___ZPYB4", "hop-Link__icon-list": "Link-module__hop-Link__icon-list___8aWXu", "hop-Link__start-icon": "Link-module__hop-Link__start-icon___qwBP7", "hop-Link__start-icon-list": "Link-module__hop-Link__start-icon-list___YELk-" };
 var GlobalLinkCssSelector = "hop-Link";
 var LinkToIconSizeAdapter = {
   inherit: void 0,

package/dist/{chunk-6I4ZCACA.js → chunk-NXT7EAML.js}

@@ -1,6 +1,6 @@
-import { DisclosureHeaderContext } from './chunk-GFRTCF4B.js';
-import { DisclosureContext } from './chunk-MUAXK42C.js';
 import { DisclosurePanelContext } from './chunk-7CJXILRD.js';
+import { DisclosureContext } from './chunk-MUAXK42C.js';
+import { DisclosureHeaderContext } from './chunk-GFRTCF4B.js';
 import { AccordionContext } from './chunk-7IM3UQB4.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
@@ -11,7 +11,7 @@ import { useContextProps, composeRenderProps, DisclosureGroup } from 'react-aria
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Accordion.module.css#css-module
-var Accordion_module_default = { "hop-Accordion": "Accordion-module__hop-Accordion___OlFAJ", "hop-Accordion--inline": "Accordion-module__hop-Accordion--inline___GRMn4", "hop-Accordion__disclosure": "Accordion-module__hop-Accordion__disclosure___yWvJM", "hop-Accordion__disclosure-header": "Accordion-module__hop-Accordion__disclosure-header___CPZRj", "hop-Accordion__disclosure-panel": "Accordion-module__hop-Accordion__disclosure-panel___RLnMF" };
+var Accordion_module_default = { "hop-Accordion": "Accordion-module__hop-Accordion___wBFPg", "hop-Accordion--inline": "Accordion-module__hop-Accordion--inline___NSSQi", "hop-Accordion__disclosure": "Accordion-module__hop-Accordion__disclosure___e-V8U", "hop-Accordion__disclosure-header": "Accordion-module__hop-Accordion__disclosure-header___fdDsT", "hop-Accordion__disclosure-panel": "Accordion-module__hop-Accordion__disclosure-panel___uZA-v" };
 var GlobalAccordionCssSelector = "hop-Accordion";
 function Accordion(props, ref) {
   [props, ref] = useContextProps(props, ref, AccordionContext);

package/dist/chunk-NZ4VFVXA.js

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

package/dist/{chunk-3HGZNFEQ.js → chunk-OSGTA6DG.js}

@@ -8,7 +8,7 @@ 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___oGz4y" };
+var IconList_module_default = { "hop-IconList": "IconList-module__hop-IconList___KxG-w" };
 var GlobalIconListCssSelector = "hop-IconList";
 function IconList(props, ref) {
   [props, ref] = useContextProps(props, ref, IconListContext);

package/dist/{chunk-56QFPH7A.js → chunk-PAVQC74G.js}

@@ -7,7 +7,7 @@ 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___6rgZ-", "hop-Heading--xs": "Heading-module__hop-Heading--xs___CU9xu", "hop-Heading--sm": "Heading-module__hop-Heading--sm___exgBk", "hop-Heading--md": "Heading-module__hop-Heading--md___rcL9t", "hop-Heading--lg": "Heading-module__hop-Heading--lg___DYMzj", "hop-Heading--xl": "Heading-module__hop-Heading--xl___Hna8N", "hop-Heading--2xl": "Heading-module__hop-Heading--2xl___1s5HE", "hop-Heading--3xl": "Heading-module__hop-Heading--3xl___Rxofk" };
+var Heading_module_default = { "hop-Heading": "Heading-module__hop-Heading___o-v-P", "hop-Heading--xs": "Heading-module__hop-Heading--xs___KXQEX", "hop-Heading--sm": "Heading-module__hop-Heading--sm___-WdRn", "hop-Heading--md": "Heading-module__hop-Heading--md___ukpIT", "hop-Heading--lg": "Heading-module__hop-Heading--lg___i2P5H", "hop-Heading--xl": "Heading-module__hop-Heading--xl___Tsi-u", "hop-Heading--2xl": "Heading-module__hop-Heading--2xl___yfzVl", "hop-Heading--3xl": "Heading-module__hop-Heading--3xl___4mhyI" };
 var GlobalHeadingCssSelector = "hop-Heading";
 function Heading(props, ref) {
   [props, ref] = useContextProps(props, ref, HeadingContext);

package/dist/{chunk-YA5VMTPD.js → chunk-PXOVV47X.js}

@@ -1,8 +1,8 @@
 import { IllustratedMessageContext } from './chunk-XL7LO6IZ.js';
 import { ImageContext } from './chunk-XNHE2OVW.js';
 import { SvgImageContext } from './chunk-M2XJDWZ7.js';
-import { ContentContext } from './chunk-IXB2WK56.js';
 import { ButtonGroupContext } from './chunk-VJQ7M2BK.js';
+import { ContentContext } from './chunk-IXB2WK56.js';
 import { ButtonContext } from './chunk-WMTWFKKP.js';
 import { HeadingContext } from './chunk-TXZ6BMFR.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
@@ -14,7 +14,7 @@ import { useContextProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./IllustratedMessage.module.css#css-module
-var IllustratedMessage_module_default = { "hop-IllustratedMessage": "IllustratedMessage-module__hop-IllustratedMessage___fMN4i", "hop-IllustratedMessage--sm": "IllustratedMessage-module__hop-IllustratedMessage--sm___rR93A", "hop-IllustratedMessage--md": "IllustratedMessage-module__hop-IllustratedMessage--md___ArEX-", "hop-IllustratedMessage--lg": "IllustratedMessage-module__hop-IllustratedMessage--lg___7E0tv", "hop-IllustratedMessage__image": "IllustratedMessage-module__hop-IllustratedMessage__image___hMbzO", "hop-IllustratedMessage__heading": "IllustratedMessage-module__hop-IllustratedMessage__heading___0oyW1", "hop-IllustratedMessage-md": "IllustratedMessage-module__hop-IllustratedMessage-md___7FNZu", "hop-IllustratedMessage__content": "IllustratedMessage-module__hop-IllustratedMessage__content___2kkIK", "hop-IllustratedMessage__buttonGroup": "IllustratedMessage-module__hop-IllustratedMessage__buttonGroup___q53bE", "hop-IllustratedMessage__button": "IllustratedMessage-module__hop-IllustratedMessage__button___SFWjQ" };
+var IllustratedMessage_module_default = { "hop-IllustratedMessage": "IllustratedMessage-module__hop-IllustratedMessage___SIwW0", "hop-IllustratedMessage--sm": "IllustratedMessage-module__hop-IllustratedMessage--sm___ZRGIG", "hop-IllustratedMessage--md": "IllustratedMessage-module__hop-IllustratedMessage--md___XGong", "hop-IllustratedMessage--lg": "IllustratedMessage-module__hop-IllustratedMessage--lg___wXiUU", "hop-IllustratedMessage__image": "IllustratedMessage-module__hop-IllustratedMessage__image___md6Hk", "hop-IllustratedMessage__heading": "IllustratedMessage-module__hop-IllustratedMessage__heading___iAnKw", "hop-IllustratedMessage-md": "IllustratedMessage-module__hop-IllustratedMessage-md___DW5tt", "hop-IllustratedMessage__content": "IllustratedMessage-module__hop-IllustratedMessage__content___5R8TP", "hop-IllustratedMessage__buttonGroup": "IllustratedMessage-module__hop-IllustratedMessage__buttonGroup___hAJ5a", "hop-IllustratedMessage__button": "IllustratedMessage-module__hop-IllustratedMessage__button___jt125" };
 var GlobalIllustratedMessageCssSelector = "hop-IllustratedMessage";
 function IllustratedMessage(props, ref) {
   [props, ref] = useContextProps(props, ref, IllustratedMessageContext);

package/dist/{chunk-DW26OLDB.js → chunk-Q5XBTXXT.js}

@@ -1,9 +1,9 @@
-import { _DecorativeRadio } from './chunk-XE6JG2MF.js';
-import { _DecorativeCheckbox } from './chunk-RTB477QF.js';
+import { _DecorativeRadio } from './chunk-CKH5EUEC.js';
+import { _DecorativeCheckbox } from './chunk-CZRMFNRT.js';
 import { ListBoxItemContext } from './chunk-Y2POLIXK.js';
-import { _ListBoxItemSkeleton } from './chunk-ZLWJJVD3.js';
+import { _ListBoxItemSkeleton } from './chunk-7JQJ5U7J.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
-import { ensureTextWrapper } from './chunk-YAK3UMON.js';
+import { ensureTextWrapper } from './chunk-SRMMLWHK.js';
 import { BadgeContext } from './chunk-CQDLZ42T.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
@@ -18,7 +18,7 @@ import { useContextProps, composeRenderProps, ListBoxItem as ListBoxItem$1, List
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // css-module:./ListBoxItem.module.css#css-module
-var ListBoxItem_module_default = { "hop-ListBoxItem": "ListBoxItem-module__hop-ListBoxItem___PsC0A", "hop-ListBoxItem--xs": "ListBoxItem-module__hop-ListBoxItem--xs___SgkNV", "hop-ListBoxItem--sm": "ListBoxItem-module__hop-ListBoxItem--sm___ET5Ko", "hop-ListBoxItem--md": "ListBoxItem-module__hop-ListBoxItem--md___kDwyB", "hop-ListBoxItem--lg": "ListBoxItem-module__hop-ListBoxItem--lg___yzt-2", "hop-ListBoxItem__inner": "ListBoxItem-module__hop-ListBoxItem__inner___qtadF", "hop-ListBoxItem__checkmark": "ListBoxItem-module__hop-ListBoxItem__checkmark___WmVt-", "hop-ListBoxItem__description": "ListBoxItem-module__hop-ListBoxItem__description___tRJUN", "hop-ListBoxItem__radio": "ListBoxItem-module__hop-ListBoxItem__radio___i1V8Z", "hop-ListBoxItem__checkbox": "ListBoxItem-module__hop-ListBoxItem__checkbox___M1AHA", "hop-ListBoxItem__avatar": "ListBoxItem-module__hop-ListBoxItem__avatar___CZ2Eq", "hop-ListBoxItem__icon-list": "ListBoxItem-module__hop-ListBoxItem__icon-list___O4UnU", "hop-ListBoxItem__icon": "ListBoxItem-module__hop-ListBoxItem__icon___eZtIT", "hop-ListBoxItem__label": "ListBoxItem-module__hop-ListBoxItem__label___0OXOv", "hop-ListBoxItem__end-icon-list": "ListBoxItem-module__hop-ListBoxItem__end-icon-list___rv4lH", "hop-ListBoxItem__end-icon": "ListBoxItem-module__hop-ListBoxItem__end-icon___ZcUI2", "hop-ListBoxItem__badge": "ListBoxItem-module__hop-ListBoxItem__badge___PJ76L" };
+var ListBoxItem_module_default = { "hop-ListBoxItem": "ListBoxItem-module__hop-ListBoxItem___m1ALo", "hop-ListBoxItem--xs": "ListBoxItem-module__hop-ListBoxItem--xs___6DdyN", "hop-ListBoxItem--sm": "ListBoxItem-module__hop-ListBoxItem--sm___-gE5a", "hop-ListBoxItem--md": "ListBoxItem-module__hop-ListBoxItem--md___9mDGy", "hop-ListBoxItem--lg": "ListBoxItem-module__hop-ListBoxItem--lg___DGH28", "hop-ListBoxItem__inner": "ListBoxItem-module__hop-ListBoxItem__inner___u2NI2", "hop-ListBoxItem__checkmark": "ListBoxItem-module__hop-ListBoxItem__checkmark___IMC6d", "hop-ListBoxItem__description": "ListBoxItem-module__hop-ListBoxItem__description___3j4Z3", "hop-ListBoxItem__radio": "ListBoxItem-module__hop-ListBoxItem__radio___nwk7L", "hop-ListBoxItem__checkbox": "ListBoxItem-module__hop-ListBoxItem__checkbox___JXwL8", "hop-ListBoxItem__avatar": "ListBoxItem-module__hop-ListBoxItem__avatar___h2JAc", "hop-ListBoxItem__icon-list": "ListBoxItem-module__hop-ListBoxItem__icon-list___YJcaA", "hop-ListBoxItem__icon": "ListBoxItem-module__hop-ListBoxItem__icon___01LED", "hop-ListBoxItem__label": "ListBoxItem-module__hop-ListBoxItem__label___YZgBK", "hop-ListBoxItem__end-icon-list": "ListBoxItem-module__hop-ListBoxItem__end-icon-list___l72VG", "hop-ListBoxItem__end-icon": "ListBoxItem-module__hop-ListBoxItem__end-icon___sRF8h", "hop-ListBoxItem__badge": "ListBoxItem-module__hop-ListBoxItem__badge___NU5K8" };
 var GlobalListBoxItemCssSelector = "hop-ListBoxItem";
 var ListBoxItemToIconSizeAdapter = {
   xs: "sm",
@@ -66,9 +66,9 @@ function ListBoxItemInner(props) {
       setIsListHasSelectionEnd((prev) => isListHasSelection && !prev);
     }
   };
-  const { className: radioClassName, ...otherRadioProps } = radioProps || {};
+  const { className: radioClassName, ...otherRadioProps } = radioProps != null ? radioProps : {};
   const radioClassNames = clsx(ListBoxItem_module_default["hop-ListBoxItem__radio"], radioClassName);
-  const { className: checkboxClassName, ...otherCheckboxProps } = checkboxProps || {};
+  const { className: checkboxClassName, ...otherCheckboxProps } = checkboxProps != null ? checkboxProps : {};
   const checkboxClassNames = clsx(ListBoxItem_module_default["hop-ListBoxItem__checkbox"], checkboxClassName);
   return /* @__PURE__ */ jsxs(
     "div",

package/dist/{chunk-LULTNKIP.js → chunk-QOFWY452.js}

@@ -1,8 +1,8 @@
 import { RadioFieldContext } from './chunk-DGLAGYBD.js';
 import { RadioContext } from './chunk-FU5CCPLP.js';
-import { _Text } from './chunk-BOOMSDK7.js';
+import { _Text } from './chunk-Z7ORLEY6.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
-import { useRenderProps } from './chunk-NH3IVMXB.js';
+import { useRenderProps } from './chunk-2NSUMKNH.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
@@ -14,7 +14,7 @@ import { useContextProps, composeRenderProps } from 'react-aria-components';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // css-module:./RadioField.module.css#css-module
-var RadioField_module_default = { "hop-RadioField": "RadioField-module__hop-RadioField___2rII6", "hop-RadioField--sm": "RadioField-module__hop-RadioField--sm___4LGcP", "hop-RadioField--md": "RadioField-module__hop-RadioField--md___g1Fvr", "hop-RadioField__description": "RadioField-module__hop-RadioField__description___WhFgn", "hop-RadioField__radio": "RadioField-module__hop-RadioField__radio___IZ8iN" };
+var RadioField_module_default = { "hop-RadioField": "RadioField-module__hop-RadioField___rXzDT", "hop-RadioField--sm": "RadioField-module__hop-RadioField--sm___SNFax", "hop-RadioField--md": "RadioField-module__hop-RadioField--md___7GeiA", "hop-RadioField__description": "RadioField-module__hop-RadioField__description___Vpr2W", "hop-RadioField__radio": "RadioField-module__hop-RadioField__radio___DRbLg" };
 var GlobalRadioFieldCssSelector = "hop-RadioField";
 var RadioToDescriptionSizeAdapter = {
   sm: "xs",

package/dist/{chunk-SUB3BVYD.js → chunk-QR6WDDBN.js}

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

package/dist/{chunk-LLEWW4UQ.js → chunk-QVXYZX5B.js}

@@ -7,7 +7,7 @@ import { useContextProps } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./SvgImage.module.css#css-module
-var SvgImage_module_default = { "hop-SvgImage": "SvgImage-module__hop-SvgImage___UnA3a" };
+var SvgImage_module_default = { "hop-SvgImage": "SvgImage-module__hop-SvgImage___9K7NO" };
 var GlobalSvgImageCssSelector = "hop-SvgImage";
 function SvgImage(props, ref) {
   [props, ref] = useContextProps(props, ref, SvgImageContext);

package/dist/chunk-RBWFFWIG.js

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

package/dist/{chunk-LUC6XJU7.js → chunk-RZG5PUET.js}

@@ -1,16 +1,16 @@
 import { SelectContext } from './chunk-T24MBA34.js';
-import { _SelectValue } from './chunk-P63VMXVG.js';
-import { _Popover } from './chunk-YKHKR2GB.js';
+import { _SelectValue } from './chunk-U2E2PK7O.js';
+import { _Popover } from './chunk-N455JVEG.js';
 import { _Footer } from './chunk-VOZN65OL.js';
 import { _ListBoxSection } from './chunk-DZJSSJVJ.js';
-import { _ListBox } from './chunk-QZL7DSHL.js';
-import { _ListBoxItem } from './chunk-DW26OLDB.js';
-import { _HelperMessage } from './chunk-OUGECIOS.js';
-import { _ErrorMessage } from './chunk-SC6GOFII.js';
-import { _ToggleArrow } from './chunk-EOES5IUI.js';
-import { ensureTextWrapper } from './chunk-YAK3UMON.js';
-import { _Label } from './chunk-C67PNOQX.js';
-import { useFormProps } from './chunk-M5Q2CFRQ.js';
+import { _ListBox } from './chunk-WNFSIU36.js';
+import { _ListBoxItem } from './chunk-Q5XBTXXT.js';
+import { _HelperMessage } from './chunk-6CVROWNN.js';
+import { _ErrorMessage } from './chunk-UXCNMI34.js';
+import { _ToggleArrow } from './chunk-W2TEMTXK.js';
+import { ensureTextWrapper } from './chunk-SRMMLWHK.js';
+import { _Label } from './chunk-I2LTZFXN.js';
+import { useFormProps } from './chunk-VOXZA4YS.js';
 import { BadgeContext } from './chunk-CQDLZ42T.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { ClearContainerSlots, ClearProviders } from './chunk-HXI3MEEK.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___ZRPTO", "hop-Select--fluid": "Select-module__hop-Select--fluid___RcvTj", "hop-Select__label": "Select-module__hop-Select__label___KMg29", "hop-Select__button": "Select-module__hop-Select__button___QBTlf", "hop-Select__button--sm": "Select-module__hop-Select__button--sm___YRGK7", "hop-Select__button--md": "Select-module__hop-Select__button--md___0Qve3", "hop-Select__prefix": "Select-module__hop-Select__prefix___3QzwT", "hop-Select__button-icon": "Select-module__hop-Select__button-icon___n0HWS", "hop-Select__helper-message": "Select-module__hop-Select__helper-message___h-H-A", "hop-Select__error-message": "Select-module__hop-Select__error-message___j5McK" };
+var Select_module_default = { "hop-Select": "Select-module__hop-Select___xzHsW", "hop-Select--fluid": "Select-module__hop-Select--fluid___s5ghH", "hop-Select__label": "Select-module__hop-Select__label___PhbIV", "hop-Select__button": "Select-module__hop-Select__button___qNH-2", "hop-Select__button--sm": "Select-module__hop-Select__button--sm___81kk1", "hop-Select__button--md": "Select-module__hop-Select__button--md___zHXmU", "hop-Select__prefix": "Select-module__hop-Select__prefix___3N3tB", "hop-Select__button-icon": "Select-module__hop-Select__button-icon___E4NAh", "hop-Select__helper-message": "Select-module__hop-Select__helper-message___Gq5Bm", "hop-Select__error-message": "Select-module__hop-Select__error-message___-LynD" };
 var GlobalSelectCssSelector = "hop-Select";
 function Select(props, ref) {
   var _a, _b, _c, _d;

package/dist/{chunk-D4CWHBFC.js → chunk-S4VWM2B6.js}

@@ -1,12 +1,12 @@
 import { useFontFaceReady } from './chunk-IU6XMS2X.js';
 import { TextAreaContext } from './chunk-MHQZXLKW.js';
 import { useTruncatedText } from './chunk-Z57VHYOF.js';
-import { _RemainingCharacterCount } from './chunk-XQIEHXUJ.js';
-import { _InputGroup } from './chunk-X7PEWS4A.js';
-import { _HelperMessage } from './chunk-OUGECIOS.js';
-import { _ErrorMessage } from './chunk-SC6GOFII.js';
-import { _Label } from './chunk-C67PNOQX.js';
-import { useFormProps } from './chunk-M5Q2CFRQ.js';
+import { _RemainingCharacterCount } from './chunk-KW6WJUD5.js';
+import { _InputGroup } from './chunk-F6D7LSXZ.js';
+import { _HelperMessage } from './chunk-6CVROWNN.js';
+import { _ErrorMessage } from './chunk-UXCNMI34.js';
+import { _Label } from './chunk-I2LTZFXN.js';
+import { useFormProps } from './chunk-VOXZA4YS.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
@@ -79,7 +79,7 @@ function $b5e257d569688ac6$export$535bd6ca7f90a273() {
 }
 
 // css-module:./TextArea.module.css#css-module
-var TextArea_module_default = { "hop-TextArea": "TextArea-module__hop-TextArea___koVkb", "hop-TextArea--fluid": "TextArea-module__hop-TextArea--fluid___9mHtg", "hop-TextArea__Label": "TextArea-module__hop-TextArea__Label___pvu9J", "hop-TextArea__prefix": "TextArea-module__hop-TextArea__prefix___LCQvQ", "hop-TextArea__InputGroup": "TextArea-module__hop-TextArea__InputGroup___hfkoh", "hop-TextArea__RemainingCharacterCount": "TextArea-module__hop-TextArea__RemainingCharacterCount___acqTa", "hop-TextArea__textarea": "TextArea-module__hop-TextArea__textarea___R2Yzj", "hop-TextArea__ErrorMessage": "TextArea-module__hop-TextArea__ErrorMessage___XMuwi", "hop-TextArea__HelperMessage": "TextArea-module__hop-TextArea__HelperMessage___Uzgqt" };
+var TextArea_module_default = { "hop-TextArea": "TextArea-module__hop-TextArea___Msdue", "hop-TextArea--fluid": "TextArea-module__hop-TextArea--fluid___-ep5B", "hop-TextArea__Label": "TextArea-module__hop-TextArea__Label___3kZZE", "hop-TextArea__prefix": "TextArea-module__hop-TextArea__prefix___SQQ-m", "hop-TextArea__RemainingCharacterCount": "TextArea-module__hop-TextArea__RemainingCharacterCount___FVXxr", "hop-TextArea__InputGroup": "TextArea-module__hop-TextArea__InputGroup___LllwU", "hop-TextArea__ErrorMessage": "TextArea-module__hop-TextArea__ErrorMessage___5faIS", "hop-TextArea__HelperMessage": "TextArea-module__hop-TextArea__HelperMessage___X2Ax6", "hop-TextArea__textarea": "TextArea-module__hop-TextArea__textarea___8QL26", "hop-TextArea__textarea--with-character-count": "TextArea-module__hop-TextArea__textarea--with-character-count___SL9w3", "hop-TextArea__textarea--sm": "TextArea-module__hop-TextArea__textarea--sm___Bakth" };
 var GlobalTextAreaCssSelector = "hop-TextArea";
 var DefaultMinimumTextAreaRows = 3;
 var pxToInt = (value) => {
@@ -112,7 +112,7 @@ function useCalculateRowHeight(input) {
   }, [input, fontsLoaded, isSSR]);
 }
 function TextArea(props, ref) {
-  var _a, _b;
+  var _a, _b, _c;
   const {
     inputRef: userProvidedInputRef = null,
     ...propsWithoutRef
@@ -121,13 +121,13 @@ function TextArea(props, ref) {
   props = useFormProps(props);
   const { stylingProps, ...ownProps } = useStyledSystem(props);
   const [characterCount, setCharacterCount] = useState(() => {
-    var _a2, _b2, _c, _d;
-    return (_d = (_c = (_a2 = props.value) == null ? void 0 : _a2.length) != null ? _c : (_b2 = props.defaultValue) == null ? void 0 : _b2.length) != null ? _d : 0;
+    var _a2, _b2, _c2, _d;
+    return (_d = (_c2 = (_a2 = props.value) == null ? void 0 : _a2.length) != null ? _c2 : (_b2 = props.defaultValue) == null ? void 0 : _b2.length) != null ? _d : 0;
   });
   const {
     className,
     style: styleProp,
-    size,
+    size: sizeProp,
     showCharacterCount,
     maxLength,
     placeholder,
@@ -155,6 +155,7 @@ function TextArea(props, ref) {
   const isFluid = (_a = useResponsiveValue(isFluidProp)) != null ? _a : false;
   const resizeMode = (_b = useResponsiveValue(resizeModeProp)) != null ? _b : "none";
   const overMaxLength = !!maxLength && characterCount > maxLength;
+  const size = (_c = useResponsiveValue(sizeProp)) != null ? _c : "md";
   const classNames = composeClassnameRenderProps(
     className,
     GlobalTextAreaCssSelector,
@@ -215,24 +216,35 @@ function TextArea(props, ref) {
     }
     adjustRows();
   }, [value, adjustRows]);
-  const { className: inputGroupClassName, inputClassName: inputGroupInputClassName, ...otherInputGroupProps } = inputGroupProps || {};
+  const { className: inputGroupClassName, ...otherInputGroupProps } = inputGroupProps != null ? inputGroupProps : {};
   const inputGroupClassNames = clsx(TextArea_module_default["hop-TextArea__InputGroup"], inputGroupClassName);
-  const inputGroupInputClassNames = clsx(TextArea_module_default["hop-TextArea__textarea"], inputGroupInputClassName);
+  const textAreaClassNames = cssModule(
+    TextArea_module_default,
+    "hop-TextArea__textarea",
+    size,
+    showCharacterCount && maxLength && "with-character-count"
+  );
   const { className: remainingCharacterCountClassName, ...otherRemainingCharacterCountProps } = remainingCharacterCountProps != null ? remainingCharacterCountProps : {};
   const remainingCharacterCountClassNames = clsx(TextArea_module_default["hop-TextArea__RemainingCharacterCount"], remainingCharacterCountClassName);
   const inputMarkup = /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsxs(
     _InputGroup,
     {
       isFluid: true,
-      size,
       className: inputGroupClassNames,
       isDisabled,
       isInvalid,
-      inputClassName: inputGroupInputClassNames,
-      inputType: "textarea",
       ...otherInputGroupProps,
       children: [
-        /* @__PURE__ */ jsx(TextArea$1, { ref: mergedTextAreaRef, placeholder, cols, rows }),
+        /* @__PURE__ */ jsx(
+          TextArea$1,
+          {
+            ref: mergedTextAreaRef,
+            placeholder,
+            cols,
+            rows,
+            className: textAreaClassNames
+          }
+        ),
         showCharacterCount && maxLength && /* @__PURE__ */ jsx(
           _RemainingCharacterCount,
           {

package/dist/{chunk-YAK3UMON.js → chunk-SRMMLWHK.js}

@@ -1,5 +1,5 @@
 import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
-import { _Text } from './chunk-BOOMSDK7.js';
+import { _Text } from './chunk-Z7ORLEY6.js';
 import { jsx } from 'react/jsx-runtime';
 
 function ensureTextWrapper(children, elementType) {

package/dist/chunk-SSV5APP2.js

@@ -0,0 +1,118 @@
+import { CalloutContext } from './chunk-NZ4VFVXA.js';
+import { _CloseButton } from './chunk-NHKYEZTW.js';
+import { useSlot } from './chunk-H5YTU3U7.js';
+import { ContentContext } from './chunk-IXB2WK56.js';
+import { ButtonContext } from './chunk-WMTWFKKP.js';
+import { HeadingContext } from './chunk-TXZ6BMFR.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { InfoRichIcon, UpsellRichIcon, SuccessRichIcon, CautionRichIcon, RichIconContext } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef, useMemo } from 'react';
+import { useContextProps } from 'react-aria-components';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// css-module:./Callout.module.css#css-module
+var Callout_module_default = { "hop-Callout": "Callout-module__hop-Callout___7S9Ut", "hop-Callout__icon": "Callout-module__hop-Callout__icon___t7w5G", "hop-Callout__heading": "Callout-module__hop-Callout__heading___zSHa5", "hop-Callout__content": "Callout-module__hop-Callout__content___HaNGE", "hop-Callout__button": "Callout-module__hop-Callout__button___DX6lV", "hop-Callout__dismiss": "Callout-module__hop-Callout__dismiss___CDTSX", "hop-Callout--information": "Callout-module__hop-Callout--information___uSE-c", "hop-Callout--success": "Callout-module__hop-Callout--success___AgZgE", "hop-Callout--warning": "Callout-module__hop-Callout--warning___qW3cJ", "hop-Callout--upsell": "Callout-module__hop-Callout--upsell___abHWk", "hop-Callout--subtle-fill": "Callout-module__hop-Callout--subtle-fill___bMBdq" };
+var GlobalCalloutCssSelector = "hop-Callout";
+var Callout = (props, ref) => {
+  [props, ref] = useContextProps(props, ref, CalloutContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    style,
+    slot,
+    hideIcon: hideIconProp,
+    onClose,
+    fillStyle = "border",
+    variant = "information",
+    ...otherProps
+  } = ownProps;
+  const hideIcon = useResponsiveValue(hideIconProp);
+  const [iconRef, hasIcon] = useSlot();
+  const classNames = clsx(
+    GlobalCalloutCssSelector,
+    cssModule(
+      Callout_module_default,
+      "hop-Callout",
+      variant,
+      fillStyle === "subtleFill" && "subtle-fill"
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...style,
+    ...stylingProps.style
+  };
+  const icon = useMemo(() => {
+    if (hideIcon) {
+      return null;
+    }
+    switch (variant) {
+      case "warning":
+        return /* @__PURE__ */ jsx(CautionRichIcon, {});
+      case "success":
+        return /* @__PURE__ */ jsx(SuccessRichIcon, {});
+      case "upsell":
+        return /* @__PURE__ */ jsx(UpsellRichIcon, {});
+      default:
+        return /* @__PURE__ */ jsx(InfoRichIcon, {});
+    }
+  }, [hideIcon, variant]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: classNames,
+      style: mergedStyles,
+      slot: slot != null ? slot : void 0,
+      ...otherProps,
+      children: /* @__PURE__ */ jsxs(
+        SlotProvider,
+        {
+          values: [
+            [HeadingContext, {
+              className: Callout_module_default["hop-Callout__heading"]
+            }],
+            [ContentContext, {
+              className: Callout_module_default["hop-Callout__content"]
+            }],
+            [ButtonContext, {
+              className: Callout_module_default["hop-Callout__button"]
+            }],
+            [RichIconContext, {
+              className: Callout_module_default["hop-Callout__icon"],
+              variant,
+              size: "xl"
+            }]
+          ],
+          children: [
+            !hasIcon && icon,
+            /* @__PURE__ */ jsx(
+              SlotProvider,
+              {
+                values: [
+                  [RichIconContext, {
+                    className: Callout_module_default["hop-Callout__icon"],
+                    variant,
+                    size: "xl",
+                    ref: iconRef
+                  }]
+                ],
+                children
+              }
+            ),
+            onClose && /* @__PURE__ */ jsx(_CloseButton, { size: "sm", className: Callout_module_default["hop-Callout__dismiss"], onPress: onClose })
+          ]
+        }
+      )
+    }
+  );
+};
+var _Callout = forwardRef(Callout);
+_Callout.displayName = "Callout";
+
+export { GlobalCalloutCssSelector, _Callout };