@hopper-ui/components 1.5.11 → 1.5.13

package/dist/chunk-BQQSNNMG.js

@@ -0,0 +1,44 @@
+import { OverlineTextContext } from './chunk-ZRDKRE3E.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps, Text } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./OverlineText.module.css#css-module
+var OverlineText_module_default = { "hop-OverlineText": "OverlineText-module__hop-OverlineText___wnMR6", "hop-OverlineText__text": "OverlineText-module__hop-OverlineText__text___fotp3" };
+var GlobalOverlineTextCssSelector = "hop-OverlineText";
+function OverlineText(props, ref) {
+  [props, ref] = useContextProps(props, ref, OverlineTextContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const { className, children, style, elementType = "span", ...otherProps } = ownProps;
+  const classNames = clsx(
+    GlobalOverlineTextCssSelector,
+    cssModule(
+      OverlineText_module_default,
+      "hop-OverlineText"
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      ref,
+      elementType,
+      className: classNames,
+      style: mergedStyles,
+      ...otherProps,
+      children: /* @__PURE__ */ jsx("span", { className: OverlineText_module_default["hop-OverlineText__text"], children })
+    }
+  );
+}
+var _OverlineText = forwardRef(OverlineText);
+_OverlineText.displayName = "OverlineText";
+
+export { GlobalOverlineTextCssSelector, _OverlineText };

package/dist/chunk-C3X6NC6X.js

@@ -0,0 +1,122 @@
+import { LinkContext } from './chunk-MTULE7GI.js';
+import { IconListContext } from './chunk-GBWXEK6N.js';
+import { ensureTextWrapper } from './chunk-WPIH4OAE.js';
+import { TextContext } from './chunk-ZNOU2CGM.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { IconContext } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, Link as Link$1, DEFAULT_SLOT } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./Link.module.css#css-module
+var Link_module_default = { "hop-Link": "Link-module__hop-Link___--QKB", "hop-Link--xs": "Link-module__hop-Link--xs___qBKdb", "hop-Link--sm": "Link-module__hop-Link--sm___F87C5", "hop-Link--md": "Link-module__hop-Link--md___GUn3-", "hop-Link--lg": "Link-module__hop-Link--lg___sjsxI", "hop-Link--xl": "Link-module__hop-Link--xl___XyfeI", "hop-Link--2xl": "Link-module__hop-Link--2xl___l8bYU", "hop-Link--inherit": "Link-module__hop-Link--inherit___Ga9a8", "hop-Link--standalone": "Link-module__hop-Link--standalone___xnG4p", "hop-Link__text": "Link-module__hop-Link__text___w3uCT", "hop-Link--quiet": "Link-module__hop-Link--quiet___tAfbd", "hop-Link--primary": "Link-module__hop-Link--primary___4afGC", "hop-Link--secondary": "Link-module__hop-Link--secondary___dw6VV", "hop-Link__icon": "Link-module__hop-Link__icon___-IKma", "hop-Link__icon-list": "Link-module__hop-Link__icon-list___oLSyK", "hop-Link__start-icon": "Link-module__hop-Link__start-icon___uNoEB", "hop-Link__start-icon-list": "Link-module__hop-Link__start-icon-list___LFOrp" };
+var GlobalLinkCssSelector = "hop-Link";
+var LinkToIconSizeAdapter = {
+  inherit: void 0,
+  xs: "sm",
+  sm: "sm",
+  md: "md",
+  lg: "md",
+  xl: "lg",
+  "2xl": "lg"
+};
+function Link(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, LinkContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children: childrenProp,
+    size: sizeProp,
+    style: styleProp,
+    isQuiet,
+    isExternal,
+    isStandalone,
+    variant = "primary",
+    rel,
+    target,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "inherit";
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalLinkCssSelector,
+    cssModule(
+      Link_module_default,
+      "hop-Link",
+      isQuiet && "quiet",
+      variant,
+      size,
+      isStandalone && "standalone"
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const children = composeRenderProps(childrenProp, (prev) => {
+    return ensureTextWrapper(prev);
+  });
+  const iconSize = LinkToIconSizeAdapter[size];
+  return /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [IconListContext, {
+          slots: {
+            [DEFAULT_SLOT]: {
+              color: "inherit",
+              size: iconSize,
+              className: Link_module_default["hop-Link__icon-list"]
+            },
+            "start-icon": {
+              color: "inherit",
+              size: iconSize,
+              className: Link_module_default["hop-Link__start-icon-list"]
+            }
+          }
+        }],
+        [IconContext, {
+          slots: {
+            [DEFAULT_SLOT]: {
+              color: "inherit",
+              size: iconSize,
+              className: Link_module_default["hop-Link__icon"]
+            },
+            "start-icon": {
+              color: "inherit",
+              size: iconSize,
+              className: Link_module_default["hop-Link__start-icon"]
+            }
+          }
+        }],
+        [TextContext, {
+          size: "inherit",
+          className: Link_module_default["hop-Link__text"]
+        }]
+      ],
+      children: /* @__PURE__ */ jsx(
+        Link$1,
+        {
+          rel: rel != null ? rel : isExternal ? "noopener noreferrer" : void 0,
+          target: target != null ? target : isExternal ? "_blank" : void 0,
+          ref,
+          className: classNames,
+          style,
+          ...otherProps,
+          children
+        }
+      )
+    }
+  );
+}
+var _Link = forwardRef(Link);
+_Link.displayName = "Link";
+
+export { GlobalLinkCssSelector, _Link };

package/dist/chunk-CFXK2ZSA.js

@@ -0,0 +1,85 @@
+import { ErrorMessageContext } from './chunk-FV74YT2D.js';
+import { useRenderProps } from './chunk-2NSUMKNH.js';
+import { _Text } from './chunk-LKH3JL3P.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { WarningIcon } from '@hopper-ui/icons';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import { forwardRef, useContext } from 'react';
+import { FieldErrorContext, useContextProps, composeRenderProps } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// css-module:./ErrorMessage.module.css#css-module
+var ErrorMessage_module_default = { "hop-ErrorMessage": "ErrorMessage-module__hop-ErrorMessage___HD-7d", "hop-ErrorMessage__icon": "ErrorMessage-module__hop-ErrorMessage__icon___84NtQ" };
+var GlobalErrorMessageCssSelector = "hop-ErrorMessage";
+function ErrorMessage(props, ref) {
+  const validation = useContext(FieldErrorContext);
+  if (!(validation == null ? void 0 : validation.isInvalid)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(ErrorMessageInner, { ...props, ref });
+}
+var _ErrorMessage = forwardRef(ErrorMessage);
+_ErrorMessage.displayName = "ErrorMessage";
+var ErrorMessageInner = forwardRef((props, ref) => {
+  const validation = useContext(FieldErrorContext);
+  [props, ref] = useContextProps(props, ref, ErrorMessageContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children: childrenProp,
+    hideIcon = false,
+    style: styleProp,
+    slot = "errorMessage",
+    ...otherProps
+  } = ownProps;
+  const classNames = composeClassnameRenderProps(
+    GlobalErrorMessageCssSelector,
+    cssModule(
+      ErrorMessage_module_default,
+      "hop-ErrorMessage"
+    ),
+    stylingProps.className,
+    className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const warningIcon = !hideIcon && /* @__PURE__ */ jsx(WarningIcon, { size: "sm", className: ErrorMessage_module_default["hop-ErrorMessage__icon"] });
+  const children = composeRenderProps(childrenProp, (prev) => {
+    return prev ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      warningIcon,
+      " ",
+      prev
+    ] }) : null;
+  });
+  const renderProps = useRenderProps({
+    ...props,
+    className: classNames,
+    style,
+    children,
+    defaultChildren: validation.validationErrors.length === 0 ? void 0 : /* @__PURE__ */ jsxs(Fragment, { children: [
+      warningIcon,
+      " ",
+      validation.validationErrors.join(" ")
+    ] }),
+    values: validation
+  });
+  if (renderProps.children == null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    _Text,
+    {
+      slot,
+      ref,
+      ...otherProps,
+      ...renderProps
+    }
+  );
+});
+
+export { GlobalErrorMessageCssSelector, _ErrorMessage };

package/dist/chunk-CHA2MOQZ.js

@@ -0,0 +1,32 @@
+import { _EmbeddedButton } from './chunk-PHYO5KW6.js';
+import { ClearButtonContext } from './chunk-DXVKHP4V.js';
+import { useLocalizedString } from './chunk-75DHKNW2.js';
+import { DismissIcon } from '@hopper-ui/icons';
+import { forwardRef } from 'react';
+import { useContextProps } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+var GlobalClearButtonCssSelector = "hop-ClearButton";
+function ClearButton(props, ref) {
+  [props, ref] = useContextProps(props, ref, ClearButtonContext);
+  const stringFormatter = useLocalizedString();
+  const {
+    "aria-label": ariaLabel = stringFormatter.format("ClearButton.clearAriaLabel"),
+    size = "md",
+    ...otherProps
+  } = props;
+  return /* @__PURE__ */ jsx(
+    _EmbeddedButton,
+    {
+      ref,
+      "aria-label": ariaLabel,
+      size,
+      ...otherProps,
+      children: /* @__PURE__ */ jsx(DismissIcon, {})
+    }
+  );
+}
+var _ClearButton = forwardRef(ClearButton);
+_ClearButton.displayName = "ClearButton";
+
+export { GlobalClearButtonCssSelector, _ClearButton };

package/dist/chunk-CJ3TZIBR.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___Aa0mC", "hop-ButtonGroup--horizontal": "ButtonGroup-module__hop-ButtonGroup--horizontal___fUEUu", "hop-ButtonGroup--vertical": "ButtonGroup-module__hop-ButtonGroup--vertical___KzleC", "hop-ButtonGroup--start": "ButtonGroup-module__hop-ButtonGroup--start___n9CwD", "hop-ButtonGroup--center": "ButtonGroup-module__hop-ButtonGroup--center___Utr6y", "hop-ButtonGroup--end": "ButtonGroup-module__hop-ButtonGroup--end___x6Bnw", "hop-ButtonGroup--wrap": "ButtonGroup-module__hop-ButtonGroup--wrap___-yzay", "hop-ButtonGroup--fluid": "ButtonGroup-module__hop-ButtonGroup--fluid___jd6g4" };
+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-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-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-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-DIYUJMQO.js

@@ -0,0 +1,91 @@
+import { _OverlineText } from './chunk-BQQSNNMG.js';
+import { BadgeContext } from './chunk-ZSFJVMJN.js';
+import { useRenderProps } from './chunk-2NSUMKNH.js';
+import { ClearContainerSlots } from './chunk-WJ55ZV54.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { slot, useStyledSystem } from '@hopper-ui/styled-system';
+import { filterDOMProps } from '@react-aria/utils';
+import { forwardRef } from 'react';
+import { mergeProps } from 'react-aria';
+import { useContextProps, composeRenderProps } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// src/badge/utils/Badge.utils.ts
+function isOrbiterVariant(variant) {
+  return ["informative", "warning", "positive", "negative"].includes(variant);
+}
+function mapOrbiterToHopperVariants(variant) {
+  if (isOrbiterVariant(variant)) {
+    return "primary";
+  }
+  return variant;
+}
+
+// css-module:./Badge.module.css#css-module
+var Badge_module_default = { "hop-Badge": "Badge-module__hop-Badge___wICWA", "hop-Badge--primary": "Badge-module__hop-Badge--primary___oB6Zw", "hop-Badge--secondary": "Badge-module__hop-Badge--secondary___cUJ2g", "hop-Badge--subdued": "Badge-module__hop-Badge--subdued___XkcXy" };
+var GlobalBadgeCssSelector = "hop-Badge";
+function Badge(props, ref) {
+  [props, ref] = useContextProps(props, ref, BadgeContext);
+  const { isHovered, isPressed, isSelected } = props;
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    isDisabled,
+    isIndeterminate,
+    style,
+    slot,
+    variant = "primary",
+    ...otherProps
+  } = ownProps;
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalBadgeCssSelector,
+    cssModule(
+      Badge_module_default,
+      "hop-Badge",
+      mapOrbiterToHopperVariants(variant)
+    ),
+    stylingProps.className
+  );
+  const mergedStyles = composeRenderProps(style, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const renderProps = useRenderProps({
+    ...props,
+    className: classNames,
+    style: mergedStyles,
+    values: {
+      isDisabled: isDisabled || false,
+      isIndeterminate: isIndeterminate || false,
+      isHovered: isHovered || false,
+      isPressed: isPressed || false,
+      isSelected: isSelected || false,
+      variant: mapOrbiterToHopperVariants(variant)
+    }
+  });
+  const isDot = isIndeterminate || !renderProps.children;
+  const filteredProps = filterDOMProps(otherProps, { labelable: true });
+  return /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsx(
+    _OverlineText,
+    {
+      ...mergeProps(filteredProps, renderProps),
+      ref,
+      slot: slot != null ? slot : void 0,
+      "data-disabled": isDisabled || void 0,
+      "aria-disabled": isDisabled || void 0,
+      "data-indeterminate": isDot || void 0,
+      "data-hovered": isHovered || void 0,
+      "data-pressed": isPressed || void 0,
+      "data-selected": isSelected || void 0,
+      children: !isDot && renderProps.children
+    }
+  ) });
+}
+var _Badge = slot("badge", forwardRef(Badge));
+_Badge.displayName = "Badge";
+
+export { GlobalBadgeCssSelector, _Badge };