@hopper-ui/components 1.5.12 → 1.5.14

package/dist/chunk-CAMLJNPG.js

@@ -0,0 +1,87 @@
+import { LinkButtonContext } from './chunk-3UQFC2NQ.js';
+import { ButtonGroupContext } from './chunk-VJQ7M2BK.js';
+import { ButtonContext } from './chunk-WMTWFKKP.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { slot, 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___ivTJQ", "hop-ButtonGroup--horizontal": "ButtonGroup-module__hop-ButtonGroup--horizontal___D30hN", "hop-ButtonGroup--vertical": "ButtonGroup-module__hop-ButtonGroup--vertical___Hhs0B", "hop-ButtonGroup--start": "ButtonGroup-module__hop-ButtonGroup--start___SAYFG", "hop-ButtonGroup--center": "ButtonGroup-module__hop-ButtonGroup--center___nBmAv", "hop-ButtonGroup--end": "ButtonGroup-module__hop-ButtonGroup--end___7oJt0", "hop-ButtonGroup--wrap": "ButtonGroup-module__hop-ButtonGroup--wrap___O3wsi", "hop-ButtonGroup--fluid": "ButtonGroup-module__hop-ButtonGroup--fluid___SRgHF" };
+var GlobalButtonGroupCssSelector = "hop-ButtonGroup";
+function ButtonGroup(props, ref) {
+  var _a, _b, _c, _d;
+  [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 = useResponsiveValue(alignProp);
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const isFluid = (_b = useResponsiveValue(isFluidProp)) != null ? _b : false;
+  const wrap = (_c = useResponsiveValue(wrapProp)) != null ? _c : true;
+  const orientation = (_d = useResponsiveValue(orientationProp)) != null ? _d : "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
+            }],
+            [LinkButtonContext, {
+              size,
+              isDisabled,
+              isFluid
+            }]
+          ],
+          children
+        }
+      )
+    }
+  );
+}
+var _ButtonGroup = slot("button-group", forwardRef(ButtonGroup));
+_ButtonGroup.displayName = "ButtonGroup";
+
+export { GlobalButtonGroupCssSelector, _ButtonGroup };

package/dist/chunk-CDKPDMNK.js

@@ -0,0 +1,94 @@
+import { SpinnerContext } from './chunk-5K3V5PGZ.js';
+import { _Text } from './chunk-U36V63TW.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 { useId } from 'react-aria';
+import { useContextProps, ProgressBar } from 'react-aria-components';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// css-module:./Spinner.module.css#css-module
+var Spinner_module_default = { "hop-Spinner": "Spinner-module__hop-Spinner___TWwuw", "spin": "Spinner-module__spin___VEHpp", "hop-Spinner--sm": "Spinner-module__hop-Spinner--sm___rYR3V", "hop-Spinner--md": "Spinner-module__hop-Spinner--md___hWqEk", "hop-Spinner--lg": "Spinner-module__hop-Spinner--lg___--S7E", "hop-Spinner__track": "Spinner-module__hop-Spinner__track___Z1AoN", "hop-Spinner__fill": "Spinner-module__hop-Spinner__fill___0nTj4", "hop-Spinner__label": "Spinner-module__hop-Spinner__label___3COAL" };
+var GlobalSpinnerCssSelector = "hop-Spinner";
+var SpinnerToTextSizeAdapter = {
+  sm: "xs",
+  md: "sm",
+  lg: "md"
+};
+var Spinner = (props, ref) => {
+  var _a;
+  [props, ref] = useContextProps(props, ref, SpinnerContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    style,
+    size: sizeProp,
+    children,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalSpinnerCssSelector,
+    cssModule(
+      Spinner_module_default,
+      "hop-Spinner",
+      size
+    ),
+    stylingProps.className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  const labelId = useId();
+  const labelMarkup = children && /* @__PURE__ */ jsx(
+    _Text,
+    {
+      className: cssModule(
+        Spinner_module_default,
+        "hop-Spinner__label"
+      ),
+      size: SpinnerToTextSizeAdapter[size],
+      id: labelId,
+      children
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    ProgressBar,
+    {
+      ref,
+      isIndeterminate: true,
+      className: classNames,
+      style: mergedStyles,
+      "aria-labelledby": labelId,
+      ...otherProps,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cssModule(
+              Spinner_module_default,
+              "hop-Spinner__track"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cssModule(
+              Spinner_module_default,
+              "hop-Spinner__fill"
+            )
+          }
+        ),
+        labelMarkup
+      ]
+    }
+  );
+};
+var _Spinner = forwardRef(Spinner);
+_Spinner.displayName = "Spinner";
+
+export { GlobalSpinnerCssSelector, _Spinner };

package/dist/chunk-CPAFY34U.js

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

package/dist/chunk-CXXWL5AZ.js

@@ -0,0 +1,160 @@
+import { PopoverContext } from './chunk-RNGNPV6Q.js';
+import { isFunction, isNil } from './chunk-TIPN4VYD.js';
+import { ListBoxContext } from './chunk-4HEOTMP7.js';
+import { FooterContext } from './chunk-I67NHYK4.js';
+import { useForwardedHopperContext, _HopperProvider } from './chunk-OPARHXRB.js';
+import { LinkContext } from './chunk-MTULE7GI.js';
+import { HeadingContext } from './chunk-WJRMD4JP.js';
+import { ContentContext } from './chunk-IXB2WK56.js';
+import { LinkButtonContext } from './chunk-3UQFC2NQ.js';
+import { ButtonGroupContext } from './chunk-VJQ7M2BK.js';
+import { ButtonContext } from './chunk-WMTWFKKP.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, Popover as Popover$1, Dialog } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./Popover.module.css#css-module
+var Popover_module_default = { "hop-Popover": "Popover-module__hop-Popover___DfqUu", "fade": "Popover-module__fade___-8hcr", "hop-Popover__wrapper": "Popover-module__hop-Popover__wrapper___L-Kq8", "hop-Popover__dialog": "Popover-module__hop-Popover__dialog___MRmEV", "hop-Popover__dropdown": "Popover-module__hop-Popover__dropdown___a-Wgj", "hop-Popover__title": "Popover-module__hop-Popover__title___Cig4w", "hop-Popover__content": "Popover-module__hop-Popover__content___78U-A", "hop-Popover__list-box": "Popover-module__hop-Popover__list-box___EF809", "hop-Popover__footer": "Popover-module__hop-Popover__footer___TWSVL", "hop-Popover__actions": "Popover-module__hop-Popover__actions___-B9Em", "hop-Popover__action": "Popover-module__hop-Popover__action___xIrv5" };
+var GlobalPopoverCssSelector = "hop-Popover";
+function Popover(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, PopoverContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const prevContextProps = useForwardedHopperContext();
+  const {
+    isAutoWidth,
+    children,
+    className,
+    offset = 4,
+    boundaryOffset,
+    isNonDialog,
+    containerPadding = 16,
+    containerProps,
+    placement: placementProp,
+    style: styleProp,
+    ...otherProps
+  } = ownProps;
+  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 popoverClassNames = composeClassnameRenderProps(
+    className,
+    GlobalPopoverCssSelector,
+    cssModule(
+      Popover_module_default,
+      "hop-Popover",
+      isNonDialog && "non-dialog"
+    ),
+    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 style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      "--container-padding": `${containerPadding}px`,
+      ...prev
+    };
+  });
+  const containerStyle = {
+    ...containerStylingProps.style,
+    ...containerStyleProp
+  };
+  return /* @__PURE__ */ jsx(
+    Popover$1,
+    {
+      offset,
+      ref,
+      className: popoverClassNames,
+      arrowBoundaryOffset: boundaryOffset,
+      "data-auto-width": isAutoWidth || void 0,
+      containerPadding,
+      style,
+      placement,
+      ...otherProps,
+      children: (state) => {
+        const content = isFunction(children) && !isNil(children) ? children(state) : children;
+        if (isNonDialog) {
+          return /* @__PURE__ */ jsx(_HopperProvider, { ...prevContextProps, 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, { ...prevContextProps, children: /* @__PURE__ */ jsx(Dialog, { ...containerOtherProps, className: containerClassNames, style: containerStyle, children: /* @__PURE__ */ jsx(
+          SlotProvider,
+          {
+            values: [
+              [HeadingContext, {
+                slot: "title",
+                className: Popover_module_default["hop-Popover__title"],
+                size: "xs"
+              }],
+              [ButtonContext, {
+                size: "sm",
+                className: Popover_module_default["hop-Popover__action"]
+              }],
+              [LinkButtonContext, {
+                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 _Popover = forwardRef(Popover);
+_Popover.displayName = "Popover";
+
+export { GlobalPopoverCssSelector, _Popover };

package/dist/chunk-D4HRZVZO.js

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

package/dist/chunk-D6OKEIZN.js

@@ -0,0 +1,52 @@
+import { CardContext } from './chunk-BDNN5DKK.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:./Card.module.css#css-module
+var Card_module_default = { "hop-Card": "Card-module__hop-Card___QoC4K", "hop-Card--main": "Card-module__hop-Card--main___O8qCg", "hop-Card--second-level": "Card-module__hop-Card--second-level___IXbSM" };
+var GlobalCardCssSelector = "hop-Card";
+var Card = (props, ref) => {
+  [props, ref] = useContextProps(props, ref, CardContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    style,
+    slot,
+    variant = "main",
+    ...otherProps
+  } = ownProps;
+  const classNames = clsx(
+    GlobalCardCssSelector,
+    cssModule(
+      Card_module_default,
+      "hop-Card",
+      variant
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...style,
+    ...stylingProps.style
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: classNames,
+      style: mergedStyles,
+      slot: slot != null ? slot : void 0,
+      ...otherProps,
+      children
+    }
+  );
+};
+var _Card = forwardRef(Card);
+_Card.displayName = "Card";
+
+export { GlobalCardCssSelector, _Card };

package/dist/chunk-DCO4XGBI.js

@@ -0,0 +1,131 @@
+import { createSyntheticEvent } from './chunk-LRMQLQVX.js';
+import { getChildRef } from './chunk-MXBCLPHV.js';
+import { TooltipTriggerContext } from './chunk-XXEXHHC6.js';
+import { useSlot } from './chunk-H5YTU3U7.js';
+import { Div, useIsomorphicLayoutEffect } from '@hopper-ui/styled-system';
+import { useFocusable, FocusableContext, FocusableProvider } from '@react-aria/interactions';
+import { mergeRefs } from '@react-aria/utils';
+import { forwardRef, Children, useContext, cloneElement } from 'react';
+import { useObjectRef } from 'react-aria';
+import { TooltipTrigger as TooltipTrigger$1 } from 'react-aria-components';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var GlobalTooltipTriggerCssSelector = "hop-TooltipTrigger";
+function TooltipTrigger(props) {
+  const [trigger, tooltip] = Children.toArray(props.children);
+  const {
+    delay = 600,
+    containerPadding = 16,
+    crossOffset,
+    offset = 8,
+    placement = "top",
+    shouldFlip,
+    isDisabled,
+    ...triggerProps
+  } = props;
+  return /* @__PURE__ */ jsx(TooltipTrigger$1, { delay, isDisabled, ...triggerProps, children: /* @__PURE__ */ jsxs(
+    TooltipTriggerContext.Provider,
+    {
+      value: {
+        containerPadding,
+        crossOffset,
+        offset,
+        placement,
+        shouldFlip
+      },
+      children: [
+        /* @__PURE__ */ jsx(FocusableTrigger, { ...props, children: trigger }),
+        tooltip
+      ]
+    }
+  ) });
+}
+function FocusableTrigger(props) {
+  var _a;
+  const [focusableRef, hasFocusableRACElement] = useSlot();
+  const child = Children.only(props.children);
+  const isChildDisabled = isTriggerDisabled(child);
+  const context = useContext(FocusableContext);
+  useForwardFocusablePropsToRef({
+    disabled: hasFocusableRACElement || isChildDisabled,
+    triggerRef: context == null ? void 0 : context.ref
+  });
+  const trigger = isChildDisabled ? /* @__PURE__ */ jsx(DisabledTriggerWrapper, { ref: (_a = context == null ? void 0 : context.ref) != null ? _a : void 0, ...props, children: child }) : cloneElement(child, { ref: mergeRefs(getChildRef(child), context == null ? void 0 : context.ref) });
+  return (
+    // We forward the FocusableProvider props, but we make sure to merge the refs
+    // This allows us to know if the child is implementing the Focusable interface, aka is a RAC component.
+    /* @__PURE__ */ jsx(FocusableProvider, { ...context, ref: mergeRefs(context == null ? void 0 : context.ref, focusableRef), children: trigger })
+  );
+}
+function isTriggerDisabled(child) {
+  return child.props.disabled || child.props.isDisabled;
+}
+var DisabledTriggerWrapper = forwardRef(({ children, ...props }, ref) => {
+  const objectRef = useObjectRef(ref);
+  const { focusableProps } = useFocusable(props, objectRef);
+  const { tabIndex, ...focusablePropsWithoutTabIndex } = focusableProps;
+  return /* @__PURE__ */ jsx(
+    Div,
+    {
+      ref: objectRef,
+      display: "inline-block",
+      ...focusablePropsWithoutTabIndex,
+      children
+    }
+  );
+});
+function useForwardFocusablePropsToRef({ disabled = false, triggerRef }) {
+  const context = useContext(FocusableContext);
+  useIsomorphicLayoutEffect(() => {
+    if (disabled || !(triggerRef == null ? void 0 : triggerRef.current)) {
+      return;
+    }
+    const onPointerEnter = (e) => {
+      var _a;
+      (_a = context == null ? void 0 : context.onPointerEnter) == null ? void 0 : _a.call(context, createSyntheticEvent(e));
+    };
+    const onPointerLeave = (e) => {
+      var _a;
+      (_a = context == null ? void 0 : context.onPointerLeave) == null ? void 0 : _a.call(context, createSyntheticEvent(e));
+    };
+    const onPointerDown = (e) => {
+      var _a;
+      (_a = context == null ? void 0 : context.onPointerDown) == null ? void 0 : _a.call(context, createSyntheticEvent(e));
+    };
+    const onFocus = (e) => {
+      var _a;
+      (_a = context == null ? void 0 : context.onFocus) == null ? void 0 : _a.call(context, createSyntheticEvent(e));
+    };
+    const onBlur = (e) => {
+      var _a;
+      (_a = context == null ? void 0 : context.onBlur) == null ? void 0 : _a.call(context, createSyntheticEvent(e));
+    };
+    const onKeyDown = (e) => {
+      var _a;
+      (_a = context == null ? void 0 : context.onKeyDown) == null ? void 0 : _a.call(context, createSyntheticEvent(e));
+    };
+    const onKeyUp = (e) => {
+      var _a;
+      (_a = context == null ? void 0 : context.onKeyUp) == null ? void 0 : _a.call(context, createSyntheticEvent(e));
+    };
+    const element = triggerRef.current;
+    element.addEventListener("pointerenter", onPointerEnter);
+    element.addEventListener("pointerleave", onPointerLeave);
+    element.addEventListener("pointerdown ", onPointerDown);
+    element.addEventListener("focusin", onFocus);
+    element.addEventListener("focusout", onBlur);
+    element.addEventListener("keydown", onKeyDown);
+    element.addEventListener("keyup", onKeyUp);
+    return () => {
+      element.removeEventListener("pointerenter", onPointerEnter);
+      element.removeEventListener("pointerleave", onPointerLeave);
+      element.removeEventListener("pointerdown ", onPointerDown);
+      element.removeEventListener("focusin", onFocus);
+      element.removeEventListener("focusout", onBlur);
+      element.removeEventListener("keydown", onKeyDown);
+      element.removeEventListener("keyup", onKeyUp);
+    };
+  }, [triggerRef, context, disabled]);
+}
+
+export { GlobalTooltipTriggerCssSelector, TooltipTrigger };

package/dist/chunk-DP23X6HZ.js

@@ -0,0 +1,73 @@
+import { InputGroupContext } from './chunk-6BFSSZCY.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { forwardRef, useContext } from 'react';
+import { useContextProps, FieldErrorContext, composeRenderProps, Group } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./InputGroup.module.css#css-module
+var InputGroup_module_default = { "hop-InputGroup": "InputGroup-module__hop-InputGroup___CV7xo", "hop-InputGroup--fluid": "InputGroup-module__hop-InputGroup--fluid___rlYbP" };
+var GlobalInputGroupCssSelector = "hop-InputGroup";
+function InputGroup(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, InputGroupContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    style: styleProp,
+    children,
+    isFluid: isFluidProp,
+    isInvalid,
+    ...otherProps
+  } = ownProps;
+  const isFluid = (_a = useResponsiveValue(isFluidProp)) != null ? _a : false;
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalInputGroupCssSelector,
+    cssModule(
+      InputGroup_module_default,
+      "hop-InputGroup",
+      isFluid && "fluid"
+    ),
+    stylingProps.className
+  );
+  const validation = useContext(FieldErrorContext);
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const handlePointerUp = (e) => {
+    var _a2;
+    if (e.pointerType !== "mouse" && !e.target.closest("button,input,textarea")) {
+      e.preventDefault();
+      (_a2 = e.currentTarget.querySelector("input")) == null ? void 0 : _a2.focus();
+    }
+  };
+  const handlePointerDown = (e) => {
+    var _a2;
+    if (e.pointerType === "mouse" && !e.target.closest("button,input,textarea")) {
+      e.preventDefault();
+      (_a2 = e.currentTarget.querySelector("input")) == null ? void 0 : _a2.focus();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Group,
+    {
+      isInvalid: (validation == null ? void 0 : validation.isInvalid) || isInvalid,
+      onPointerDown: handlePointerDown,
+      onPointerUp: handlePointerUp,
+      ref,
+      className: classNames,
+      style,
+      ...otherProps,
+      children
+    }
+  );
+}
+var _InputGroup = forwardRef(InputGroup);
+_InputGroup.displayName = "InputGroup";
+
+export { GlobalInputGroupCssSelector, _InputGroup };