@hopper-ui/components 1.3.9 → 1.3.11

package/dist/{chunk-UJXKUNEW.js → chunk-F2BSC3KH.js}

@@ -1,9 +1,10 @@
 import { PopoverContext } from './chunk-SC6ZK5ON.js';
-import { EnsureTextWrapper } from './chunk-A3E76SDY.js';
+import { EnsureTextWrapper } from './chunk-M64YZ3V3.js';
+import { TagGroupContext } from './chunk-LCAS3YQV.js';
 import { RadioGroupContext } from './chunk-5MBJWRZD.js';
 import { TextFieldContext } from './chunk-O4XPUINW.js';
 import { ContentContext } from './chunk-IXB2WK56.js';
-import { _Footer } from './chunk-AQITZWYM.js';
+import { _Footer } from './chunk-GTM56LGX.js';
 import { FooterContext } from './chunk-I67NHYK4.js';
 import { NumberFieldContext } from './chunk-ZQ3AWYRR.js';
 import { PasswordFieldContext } from './chunk-QW45G6K4.js';
@@ -11,173 +12,410 @@ import { SearchFieldContext } from './chunk-3NKF5TPD.js';
 import { TextAreaContext } from './chunk-MHQZXLKW.js';
 import { CheckboxFieldContext } from './chunk-ZGNK4GWA.js';
 import { CheckboxGroupContext } from './chunk-N7YDPVZL.js';
-import { ButtonContext } from './chunk-WMTWFKKP.js';
+import { ButtonContext as ButtonContext$1 } from './chunk-WMTWFKKP.js';
 import { ButtonGroupContext } from './chunk-VJQ7M2BK.js';
 import { SelectContext } from './chunk-T24MBA34.js';
-import { _SelectValue } from './chunk-BGOYDN4M.js';
+import { _SelectValue } from './chunk-4ZCY2KEA.js';
 import { HeadingContext } from './chunk-TXZ6BMFR.js';
 import { LabelContext } from './chunk-QCA3ZR56.js';
-import { _ListBox } from './chunk-XQFICAVB.js';
+import { _ListBox } from './chunk-Y4V25PX4.js';
 import { isFunction, isNil } from './chunk-TIPN4VYD.js';
 import { ListBoxContext } from './chunk-UIEP5BA5.js';
-import { _ListBoxItem } from './chunk-2GYC6ADT.js';
+import { _ListBoxItem } from './chunk-NTFJHBUN.js';
 import { CheckboxContext } from './chunk-2EAZPH3M.js';
 import { _HopperProvider } from './chunk-NMKBUGSO.js';
 import { LinkContext } from './chunk-4VVNSXIB.js';
 import { FormContext } from './chunk-EURJK4ZT.js';
 import { HelperMessageContext } from './chunk-HZKFQ33E.js';
 import { ErrorMessageContext } from './chunk-FAE27DLF.js';
+import { ComboBoxContext } from './chunk-4XHTP4GX.js';
 import { BadgeContext } from './chunk-CQDLZ42T.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { ClearContainerSlots, ClearProviders } from './chunk-HXI3MEEK.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
+import { IconContext, AngleUpIcon, AngleDownIcon } from '@hopper-ui/icons';
 import { useStyledSystem, useResponsiveValue, useColorSchemeContext } from '@hopper-ui/styled-system';
 export * from '@hopper-ui/styled-system';
-import clsx from 'clsx';
-import { forwardRef, useReducer, useRef, useEffect } from 'react';
-import { useContextProps, composeRenderProps, Popover as Popover$1, Dialog, TextContext as TextContext$1, ButtonContext as ButtonContext$1, Select as Select$1, Button, Form as Form$1 } from 'react-aria-components';
+import { useObjectRef, mergeRefs, useResizeObserver } from '@react-aria/utils';
+import { forwardRef, useRef, useState, useCallback, useReducer, useEffect } from 'react';
+import { useContextProps, useSlottedContext, InputContext, composeRenderProps, TextContext as TextContext$1, ButtonContext, ComboBox as ComboBox$1, Group, Input, Button, Form as Form$1, Select as Select$1, Popover as Popover$1, Dialog } from 'react-aria-components';
 export { Collection } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { IconContext, AngleUpIcon, AngleDownIcon } from '@hopper-ui/icons';
+import clsx2 from 'clsx';
 
-// css-module:./Popover.module.css#css-module
-var Popover_module_default = { "hop-Popover": "Popover-module__hop-Popover___YqMrl", "fade": "Popover-module__fade___cM9Hu", "hop-Popover__wrapper": "Popover-module__hop-Popover__wrapper___bBvVC", "hop-Popover__dialog": "Popover-module__hop-Popover__dialog___-Qm8I", "hop-Popover__dropdown": "Popover-module__hop-Popover__dropdown___2Pes0", "hop-Popover__title": "Popover-module__hop-Popover__title___SZT2m", "hop-Popover__content": "Popover-module__hop-Popover__content___V6KMC", "hop-Popover__list-box": "Popover-module__hop-Popover__list-box___PnPGa", "hop-Popover__footer": "Popover-module__hop-Popover__footer___sJmo-", "hop-Popover__actions": "Popover-module__hop-Popover__actions___dlp9Q", "hop-Popover__action": "Popover-module__hop-Popover__action___hcQBI" };
-var GlobalPopoverCssSelector = "hop-Popover";
-function Popover(props, ref) {
-  var _a;
-  [props, ref] = useContextProps(props, ref, PopoverContext);
+// css-module:./ComboBox.module.css#css-module
+var ComboBox_module_default = { "hop-ComboBox": "ComboBox-module__hop-ComboBox___Xt8NL", "hop-ComboBox--fluid": "ComboBox-module__hop-ComboBox--fluid___toNjK", "hop-ComboBox__label": "ComboBox-module__hop-ComboBox__label___42uq-", "hop-ComboBox__trigger": "ComboBox-module__hop-ComboBox__trigger___qJqf1", "hop-ComboBox__trigger--sm": "ComboBox-module__hop-ComboBox__trigger--sm___1aLVd", "hop-ComboBox__trigger--md": "ComboBox-module__hop-ComboBox__trigger--md___IafIJ", "hop-ComboBox__input": "ComboBox-module__hop-ComboBox__input___9sKPh", "hop-ComboBox__button": "ComboBox-module__hop-ComboBox__button___gfYuq", "hop-ComboBox__prefix": "ComboBox-module__hop-ComboBox__prefix___2Xa9x", "hop-ComboBox__button-icon": "ComboBox-module__hop-ComboBox__button-icon___bbTW5", "hop-ComboBox__helper-message": "ComboBox-module__hop-ComboBox__helper-message___fufg3", "hop-ComboBox__error-message": "ComboBox-module__hop-ComboBox__error-message___Mk9Vp" };
+var GlobalComboBoxCssSelector = "hop-ComboBox";
+function ComboBox(props, ref) {
+  var _a, _b, _c;
+  const {
+    inputRef: userProvidedInputRef = null,
+    ...propsWithoutRef
+  } = props;
+  [props, ref] = useContextProps(propsWithoutRef, ref, ComboBoxContext);
   const { stylingProps, ...ownProps } = useStyledSystem(props);
   const {
-    autoWidth,
-    children,
     className,
-    offset = 4,
-    boundaryOffset,
-    isNonDialog,
-    containerPadding = 16,
-    containerProps,
-    placement: placementProp,
+    children,
+    fieldChildren,
+    footer,
+    isAutoMenuWidth,
+    isFluid: isFluidProp,
+    isInvalid,
+    isRequired,
+    items,
+    menuTrigger = "focus",
+    listBoxProps,
+    necessityIndicator,
+    placeholder,
+    popoverProps,
+    prefix,
+    size: sizeProp,
     style: styleProp,
+    triggerProps,
     ...otherProps
   } = ownProps;
-  const placement = (_a = useResponsiveValue(placementProp)) != null ? _a : "bottom";
-  const { stylingProps: containerStylingProps, ...containerOwnProps } = useStyledSystem(containerProps != null ? containerProps : {});
+  const inputRef = useObjectRef(mergeRefs(userProvidedInputRef, (_a = props.inputRef) != null ? _a : null));
+  const inputContext = useSlottedContext(InputContext);
+  const mergedInputRefs = (inputContext == null ? void 0 : inputContext.ref) ? mergeRefs(inputRef, inputContext.ref) : inputRef;
+  const triggerRef = useRef(null);
+  const buttonRef = useRef(null);
+  const [triggerWidth, setTriggerWidth] = useState(null);
+  const onResize = useCallback(() => {
+    if (triggerRef.current) {
+      setTriggerWidth(triggerRef.current.offsetWidth + "px");
+    }
+  }, [triggerRef]);
+  useResizeObserver({
+    ref: triggerRef,
+    onResize
+  });
+  const { stylingProps: triggerStylingProps, ...triggerOwnProps } = useStyledSystem(triggerProps != null ? triggerProps : {});
   const {
-    className: containerClassName,
-    style: containerStyleProp,
-    slot,
-    ...containerOtherProps
-  } = containerOwnProps;
-  const { colorScheme } = useColorSchemeContext();
-  const popoverClassNames = composeClassnameRenderProps(
+    className: triggerClassName,
+    style: triggerStyleProp,
+    ...otherTriggerProps
+  } = triggerOwnProps;
+  const { stylingProps: popoverStylingProps, ...popoverOwnProps } = useStyledSystem(popoverProps != null ? popoverProps : {});
+  const {
+    placement = "bottom start",
+    style: popoverStyleProp,
+    ...otherPopoverProps
+  } = popoverOwnProps;
+  const size = (_b = useResponsiveValue(sizeProp)) != null ? _b : "sm";
+  const isFluid = (_c = useResponsiveValue(isFluidProp)) != null ? _c : false;
+  const classNames = composeClassnameRenderProps(
     className,
-    GlobalPopoverCssSelector,
+    GlobalComboBoxCssSelector,
     cssModule(
-      Popover_module_default,
-      "hop-Popover",
-      isNonDialog && "non-dialog"
+      ComboBox_module_default,
+      "hop-ComboBox",
+      isFluid && "fluid",
+      size
     ),
     stylingProps.className
   );
-  const containerClassNames = isNonDialog ? clsx(containerClassName, Popover_module_default["hop-Popover__dropdown"], containerStylingProps.className) : clsx(containerClassName, Popover_module_default["hop-Popover__dialog"], containerStylingProps.className);
+  const triggerClassNames = composeClassnameRenderProps(
+    triggerClassName,
+    cssModule(
+      ComboBox_module_default,
+      "hop-ComboBox__trigger",
+      size
+    ),
+    triggerStylingProps.className
+  );
+  const buttonClassNames = composeClassnameRenderProps(
+    cssModule(
+      ComboBox_module_default,
+      "hop-ComboBox__button"
+    )
+  );
+  const inputClassNames = composeClassnameRenderProps(
+    inputContext == null ? void 0 : inputContext.className,
+    ComboBox_module_default["hop-ComboBox__input"]
+  );
   const style = composeRenderProps(styleProp, (prev) => {
     return {
       ...stylingProps.style,
-      "--container-padding": `${containerPadding}px`,
       ...prev
     };
   });
-  const containerStyle = {
-    ...containerStylingProps.style,
-    ...containerStyleProp
-  };
+  const triggerStyle = composeRenderProps(triggerStyleProp, (prev) => {
+    return {
+      ...triggerStylingProps.style,
+      ...prev
+    };
+  });
+  const popoverStyle = composeRenderProps(popoverStyleProp, (prev) => {
+    return {
+      ...popoverStylingProps.style,
+      ...prev,
+      "--custom-trigger-width": triggerWidth
+    };
+  });
+  const handleMouseDown = useCallback((e) => {
+    if (inputRef.current && e.target !== inputRef.current && buttonRef.current && e.target !== buttonRef.current) {
+      inputRef.current.focus();
+      e.preventDefault();
+    }
+  }, [inputRef]);
+  const prefixMarkup = prefix ? /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [TextContext, { size, className: ComboBox_module_default["hop-ComboBox__prefix"] }],
+        [IconContext, { size, className: ComboBox_module_default["hop-ComboBox__prefix"] }]
+      ],
+      children: /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsx(EnsureTextWrapper, { children: prefix }) })
+    }
+  ) : null;
+  const footerMarkup = footer ? /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [TextContext, { size, className: ComboBox_module_default["hop-ComboBox__footer-text"] }]
+      ],
+      children: /* @__PURE__ */ jsx(
+        ClearProviders,
+        {
+          values: [
+            TextContext$1,
+            TextContext,
+            ButtonContext
+          ],
+          children: /* @__PURE__ */ jsx(_Footer, { children: /* @__PURE__ */ jsx(EnsureTextWrapper, { children: footer }) })
+        }
+      )
+    }
+  ) : null;
   return /* @__PURE__ */ jsx(
-    Popover$1,
+    ComboBox$1,
     {
       ...otherProps,
-      offset,
       ref,
-      className: popoverClassNames,
-      arrowBoundaryOffset: boundaryOffset,
-      "data-auto-width": autoWidth || void 0,
-      containerPadding,
+      className: classNames,
       style,
-      placement,
-      children: (state) => {
-        const content = isFunction(children) && !isNil(children) ? children(state) : children;
-        if (isNonDialog) {
-          return /* @__PURE__ */ jsx(_HopperProvider, { colorScheme, className: Popover_module_default["hop-Popover__wrapper"], children: /* @__PURE__ */ jsx(
-            "div",
+      isInvalid,
+      isRequired,
+      menuTrigger,
+      children: (comboBoxRenderProps) => {
+        const { isOpen } = comboBoxRenderProps;
+        const ButtonIcon = isOpen ? AngleUpIcon : AngleDownIcon;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            SlotProvider,
             {
-              ...containerOtherProps,
-              className: containerClassNames,
-              style: containerStyle,
-              slot: slot || void 0,
-              children: /* @__PURE__ */ jsx(
-                SlotProvider,
-                {
-                  values: [
-                    [ListBoxContext, {
-                      className: Popover_module_default["hop-Popover__list-box"]
-                    }],
-                    [FooterContext, {
-                      className: Popover_module_default["hop-Popover__footer"]
-                    }],
-                    [LinkContext, {
-                      size: "sm",
-                      variant: "primary",
-                      isQuiet: true
-                    }]
-                  ],
-                  children: content
-                }
-              )
+              values: [
+                [LabelContext, {
+                  className: ComboBox_module_default["hop-ComboBox__label"],
+                  isRequired,
+                  necessityIndicator
+                }],
+                [HelperMessageContext, {
+                  className: ComboBox_module_default["hop-ComboBox__helper-message"]
+                }],
+                [ErrorMessageContext, {
+                  className: ComboBox_module_default["hop-ComboBox__error-message"]
+                }]
+              ],
+              children: fieldChildren
             }
-          ) });
-        }
-        return /* @__PURE__ */ jsx(_HopperProvider, { colorScheme, children: /* @__PURE__ */ jsx(Dialog, { ...containerOtherProps, className: containerClassNames, style: containerStyle, children: /* @__PURE__ */ jsx(
-          SlotProvider,
-          {
-            values: [
-              [HeadingContext, {
-                className: Popover_module_default["hop-Popover__title"],
-                size: "xs"
-              }],
-              [ButtonContext, {
-                size: "sm",
-                className: Popover_module_default["hop-Popover__action"]
-              }],
-              [ButtonGroupContext, {
-                size: "sm",
-                align: "end",
-                className: Popover_module_default["hop-Popover__actions"]
-              }],
-              [ContentContext, {
-                className: Popover_module_default["hop-Popover__content"]
-              }],
-              [FooterContext, {
-                className: Popover_module_default["hop-Popover__footer"]
-              }],
-              [LinkContext, {
-                size: "sm",
-                variant: "primary",
-                isQuiet: true
-              }]
-            ],
-            children: content
-          }
-        ) }) });
+          ),
+          /* @__PURE__ */ jsxs(
+            Group,
+            {
+              ...otherTriggerProps,
+              ref: triggerRef,
+              className: triggerClassNames,
+              style: triggerStyle,
+              onMouseDown: handleMouseDown,
+              "data-selected": isOpen || void 0,
+              children: [
+                prefixMarkup,
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    ref: mergedInputRefs,
+                    className: inputClassNames,
+                    placeholder
+                  }
+                ),
+                /* @__PURE__ */ jsx(Button, { className: buttonClassNames, ref: buttonRef, children: /* @__PURE__ */ jsx(ButtonIcon, { size: "sm", className: ComboBox_module_default["hop-ComboBox__button-icon"] }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            _Popover,
+            {
+              ...otherPopoverProps,
+              placement,
+              isNonDialog: true,
+              autoWidth: isAutoMenuWidth,
+              style: popoverStyle,
+              triggerRef,
+              children: [
+                /* @__PURE__ */ jsx(
+                  SlotProvider,
+                  {
+                    values: [
+                      [BadgeContext, {
+                        variant: "secondary"
+                      }]
+                    ],
+                    children: /* @__PURE__ */ jsx(_ListBox, { ...listBoxProps, items, size, isInvalid, children })
+                  }
+                ),
+                footerMarkup
+              ]
+            }
+          )
+        ] });
       }
     }
   );
 }
-var _Popover = forwardRef(Popover);
-_Popover.displayName = "Popover";
+var _ComboBox = forwardRef(ComboBox);
+_ComboBox.displayName = "ComboBox";
+var CompoundComboBox = Object.assign(_ComboBox, {
+  /**
+   * A combo box option is an item that is displayed in a combo box.
+   *
+   * [View Documentation](TODO)
+   */
+  Option: _ListBoxItem
+});
+
+// css-module:./Form.module.css#css-module
+var Form_module_default = { "hop-Form": "Form-module__hop-Form___Rl7Xh" };
+var GlobalFormCssSelector = "hop-Form";
+function Form(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, FormContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    style,
+    isFluid,
+    isDisabled,
+    necessityIndicator,
+    size: sizeProp,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const classNames = clsx2(
+    GlobalFormCssSelector,
+    cssModule(
+      Form_module_default,
+      "hop-Form"
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [LabelContext, {
+          necessityIndicator
+        }],
+        [TextFieldContext, {
+          isDisabled,
+          isFluid,
+          necessityIndicator,
+          size
+        }],
+        [PasswordFieldContext, {
+          isDisabled,
+          isFluid,
+          necessityIndicator,
+          size
+        }],
+        [SearchFieldContext, {
+          isDisabled,
+          isFluid,
+          necessityIndicator,
+          size
+        }],
+        [NumberFieldContext, {
+          isDisabled,
+          necessityIndicator,
+          size,
+          isFluid
+        }],
+        [TextAreaContext, {
+          isDisabled,
+          necessityIndicator,
+          size,
+          isFluid
+        }],
+        [RadioGroupContext, {
+          isDisabled,
+          necessityIndicator,
+          size
+        }],
+        [CheckboxContext, {
+          isDisabled,
+          size
+        }],
+        [CheckboxFieldContext, {
+          isDisabled,
+          size
+        }],
+        [CheckboxGroupContext, {
+          isDisabled,
+          necessityIndicator,
+          size
+        }],
+        [ButtonContext$1, { isDisabled, size }]
+      ],
+      children: /* @__PURE__ */ jsx(
+        SlotProvider,
+        {
+          values: [
+            [SelectContext, {
+              isDisabled,
+              isFluid,
+              necessityIndicator,
+              size
+            }],
+            [ComboBoxContext, {
+              isDisabled,
+              isFluid,
+              necessityIndicator,
+              size
+            }],
+            [TagGroupContext, {
+              necessityIndicator,
+              size
+            }]
+          ],
+          children: /* @__PURE__ */ jsx(
+            Form$1,
+            {
+              ...otherProps,
+              ref,
+              className: classNames,
+              style: mergedStyles,
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+}
+var _Form = forwardRef(Form);
+_Form.displayName = "Form";
 
 // css-module:./Select.module.css#css-module
-var Select_module_default = { "hop-Select": "Select-module__hop-Select___9asPc", "hop-Select--fluid": "Select-module__hop-Select--fluid___kdYun", "hop-Select__label": "Select-module__hop-Select__label___lX0YF", "hop-Select__button": "Select-module__hop-Select__button___72TRN", "hop-Select__button--sm": "Select-module__hop-Select__button--sm___t6WUP", "hop-Select__button--md": "Select-module__hop-Select__button--md___GNNkD", "hop-Select__prefix": "Select-module__hop-Select__prefix___lRC4S", "hop-Select__button-icon": "Select-module__hop-Select__button-icon___t9tu4", "hop-Select__helper-message": "Select-module__hop-Select__helper-message___-E4RI", "hop-Select__error-message": "Select-module__hop-Select__error-message___cOkJl" };
+var Select_module_default = { "hop-Select": "Select-module__hop-Select___AMNli", "hop-Select--fluid": "Select-module__hop-Select--fluid___jUF7o", "hop-Select__label": "Select-module__hop-Select__label___aVTIZ", "hop-Select__button": "Select-module__hop-Select__button___IBqk7", "hop-Select__button--sm": "Select-module__hop-Select__button--sm___4EgDS", "hop-Select__button--md": "Select-module__hop-Select__button--md___RbAAS", "hop-Select__prefix": "Select-module__hop-Select__prefix___B-SAK", "hop-Select__button-icon": "Select-module__hop-Select__button-icon___K2aVv", "hop-Select__helper-message": "Select-module__hop-Select__helper-message___Io94e", "hop-Select__error-message": "Select-module__hop-Select__error-message___EyV6Y" };
 var GlobalSelectCssSelector = "hop-Select";
 function Select(props, ref) {
   var _a, _b;
@@ -191,8 +429,10 @@ function Select(props, ref) {
     isAutoMenuWidth,
     isFluid: isFluidProp,
     isInvalid,
+    isRequired,
     items,
     listBoxProps,
+    necessityIndicator,
     popoverProps,
     prefix,
     renderValue,
@@ -264,7 +504,7 @@ function Select(props, ref) {
           values: [
             TextContext$1,
             TextContext,
-            ButtonContext$1
+            ButtonContext
           ],
           children: /* @__PURE__ */ jsx(_Footer, { children: /* @__PURE__ */ jsx(EnsureTextWrapper, { children: footer }) })
         }
@@ -279,6 +519,7 @@ function Select(props, ref) {
       className: classNames,
       style,
       isInvalid,
+      isRequired,
       children: (selectRenderProps) => {
         const { isOpen } = selectRenderProps;
         const ButtonIcon = isOpen ? AngleUpIcon : AngleDownIcon;
@@ -288,7 +529,9 @@ function Select(props, ref) {
             {
               values: [
                 [LabelContext, {
-                  className: Select_module_default["hop-Select__label"]
+                  className: Select_module_default["hop-Select__label"],
+                  isRequired,
+                  necessityIndicator
                 }],
                 [HelperMessageContext, {
                   className: Select_module_default["hop-Select__helper-message"]
@@ -746,97 +989,138 @@ function $f86e6c1ec7da6ebb$export$bc3384a35de93d66(options) {
   };
 }
 
-// css-module:./Form.module.css#css-module
-var Form_module_default = { "hop-Form": "Form-module__hop-Form___jz9NZ" };
-var GlobalFormCssSelector = "hop-Form";
-function Form(props, ref) {
+// css-module:./Popover.module.css#css-module
+var Popover_module_default = { "hop-Popover": "Popover-module__hop-Popover___TOPh7", "fade": "Popover-module__fade___p9ae1", "hop-Popover__wrapper": "Popover-module__hop-Popover__wrapper___XkYRn", "hop-Popover__dialog": "Popover-module__hop-Popover__dialog___GeK8F", "hop-Popover__dropdown": "Popover-module__hop-Popover__dropdown___94G4Y", "hop-Popover__title": "Popover-module__hop-Popover__title___mjfD0", "hop-Popover__content": "Popover-module__hop-Popover__content___8Umes", "hop-Popover__list-box": "Popover-module__hop-Popover__list-box___72zOL", "hop-Popover__footer": "Popover-module__hop-Popover__footer___tnRWy", "hop-Popover__actions": "Popover-module__hop-Popover__actions___fPIhT", "hop-Popover__action": "Popover-module__hop-Popover__action___i6-dH" };
+var GlobalPopoverCssSelector = "hop-Popover";
+function Popover(props, ref) {
   var _a;
-  [props, ref] = useContextProps(props, ref, FormContext);
+  [props, ref] = useContextProps(props, ref, PopoverContext);
   const { stylingProps, ...ownProps } = useStyledSystem(props);
   const {
-    className,
+    autoWidth,
     children,
-    style,
-    isFluid,
-    isDisabled,
-    size: sizeProp,
+    className,
+    offset = 4,
+    boundaryOffset,
+    isNonDialog,
+    containerPadding = 16,
+    containerProps,
+    placement: placementProp,
+    style: styleProp,
     ...otherProps
   } = ownProps;
-  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
-  const classNames = clsx(
-    GlobalFormCssSelector,
+  const placement = (_a = useResponsiveValue(placementProp)) != null ? _a : "bottom";
+  const { stylingProps: containerStylingProps, ...containerOwnProps } = useStyledSystem(containerProps != null ? containerProps : {});
+  const {
+    className: containerClassName,
+    style: containerStyleProp,
+    slot,
+    ...containerOtherProps
+  } = containerOwnProps;
+  const { colorScheme } = useColorSchemeContext();
+  const popoverClassNames = composeClassnameRenderProps(
+    className,
+    GlobalPopoverCssSelector,
     cssModule(
-      Form_module_default,
-      "hop-Form"
+      Popover_module_default,
+      "hop-Popover",
+      isNonDialog && "non-dialog"
     ),
-    stylingProps.className,
-    className
+    stylingProps.className
   );
-  const mergedStyles = {
-    ...stylingProps.style,
-    ...style
+  const containerClassNames = isNonDialog ? clsx2(containerClassName, Popover_module_default["hop-Popover__dropdown"], containerStylingProps.className) : clsx2(containerClassName, Popover_module_default["hop-Popover__dialog"], containerStylingProps.className);
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      "--container-padding": `${containerPadding}px`,
+      ...prev
+    };
+  });
+  const containerStyle = {
+    ...containerStylingProps.style,
+    ...containerStyleProp
   };
   return /* @__PURE__ */ jsx(
-    SlotProvider,
+    Popover$1,
     {
-      values: [
-        [TextFieldContext, {
-          isDisabled,
-          isFluid,
-          size
-        }],
-        [PasswordFieldContext, {
-          isDisabled,
-          isFluid,
-          size
-        }],
-        [SearchFieldContext, {
-          isDisabled,
-          isFluid,
-          size
-        }],
-        [NumberFieldContext, {
-          isDisabled,
-          size,
-          isFluid
-        }],
-        [TextAreaContext, {
-          isDisabled,
-          size,
-          isFluid
-        }],
-        [RadioGroupContext, {
-          isDisabled,
-          size
-        }],
-        [CheckboxContext, {
-          isDisabled,
-          size
-        }],
-        [CheckboxFieldContext, {
-          isDisabled,
-          size
-        }],
-        [CheckboxGroupContext, {
-          isDisabled,
-          size
-        }],
-        [ButtonContext, { isDisabled, size }]
-      ],
-      children: /* @__PURE__ */ jsx(
-        Form$1,
-        {
-          ...otherProps,
-          ref,
-          className: classNames,
-          style: mergedStyles,
-          children
+      ...otherProps,
+      offset,
+      ref,
+      className: popoverClassNames,
+      arrowBoundaryOffset: boundaryOffset,
+      "data-auto-width": autoWidth || void 0,
+      containerPadding,
+      style,
+      placement,
+      children: (state) => {
+        const content = isFunction(children) && !isNil(children) ? children(state) : children;
+        if (isNonDialog) {
+          return /* @__PURE__ */ jsx(_HopperProvider, { colorScheme, className: Popover_module_default["hop-Popover__wrapper"], children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              ...containerOtherProps,
+              className: containerClassNames,
+              style: containerStyle,
+              slot: slot || void 0,
+              children: /* @__PURE__ */ jsx(
+                SlotProvider,
+                {
+                  values: [
+                    [ListBoxContext, {
+                      className: Popover_module_default["hop-Popover__list-box"]
+                    }],
+                    [FooterContext, {
+                      className: Popover_module_default["hop-Popover__footer"]
+                    }],
+                    [LinkContext, {
+                      size: "sm",
+                      variant: "primary",
+                      isQuiet: true
+                    }]
+                  ],
+                  children: content
+                }
+              )
+            }
+          ) });
         }
-      )
+        return /* @__PURE__ */ jsx(_HopperProvider, { colorScheme, children: /* @__PURE__ */ jsx(Dialog, { ...containerOtherProps, className: containerClassNames, style: containerStyle, children: /* @__PURE__ */ jsx(
+          SlotProvider,
+          {
+            values: [
+              [HeadingContext, {
+                className: Popover_module_default["hop-Popover__title"],
+                size: "xs"
+              }],
+              [ButtonContext$1, {
+                size: "sm",
+                className: Popover_module_default["hop-Popover__action"]
+              }],
+              [ButtonGroupContext, {
+                size: "sm",
+                align: "end",
+                className: Popover_module_default["hop-Popover__actions"]
+              }],
+              [ContentContext, {
+                className: Popover_module_default["hop-Popover__content"]
+              }],
+              [FooterContext, {
+                className: Popover_module_default["hop-Popover__footer"]
+              }],
+              [LinkContext, {
+                size: "sm",
+                variant: "primary",
+                isQuiet: true
+              }]
+            ],
+            children: content
+          }
+        ) }) });
+      }
     }
   );
 }
-var _Form = forwardRef(Form);
-_Form.displayName = "Form";
+var _Popover = forwardRef(Popover);
+_Popover.displayName = "Popover";
 
-export { $f86e6c1ec7da6ebb$export$bc3384a35de93d66, CompoundSelect, GlobalFormCssSelector, GlobalPopoverCssSelector, GlobalSelectCssSelector, _Form, _Popover };
+export { $f86e6c1ec7da6ebb$export$bc3384a35de93d66, CompoundComboBox, CompoundSelect, GlobalComboBoxCssSelector, GlobalFormCssSelector, GlobalPopoverCssSelector, GlobalSelectCssSelector, _Form, _Popover };