@hopper-ui/components 1.3.19 → 1.3.21

package/dist/utils/src/index.css

@@ -1,5 +1,5 @@
 /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Heading/src/Heading.module.css/#css-module-data */
-.Heading-module__hop-Heading___u8eMc {
+.Heading-module__hop-Heading___JWvs8 {
   --hop-Heading-xs-font-size: var(--hop-heading-xs-font-size);
   --hop-Heading-xs-font-family: var(--hop-heading-xs-font-family);
   --hop-Heading-xs-font-weight: var(--hop-heading-xs-font-weight);
@@ -33,50 +33,50 @@
   --hop-Heading-inherit-size-font-weight: inherit;
   --hop-Heading-inherit-size-line-height: inherit;
 }
-:where(.Heading-module__hop-Heading___u8eMc) {
+:where(.Heading-module__hop-Heading___JWvs8) {
   margin: 0;
   font-family: var(--font-family);
   font-size: var(--font-size);
   font-weight: var(--font-weight);
   line-height: var(--line-height);
 }
-:where(.Heading-module__hop-Heading--xs___MeRHO) {
+:where(.Heading-module__hop-Heading--xs___Cfweo) {
   --font-size: var(--hop-Heading-xs-font-size);
   --font-family: var(--hop-Heading-xs-font-family);
   --font-weight: var(--hop-Heading-xs-font-weight);
   --line-height: var(--hop-Heading-xs-line-height);
 }
-:where(.Heading-module__hop-Heading--sm___yN0zg) {
+:where(.Heading-module__hop-Heading--sm___sAf2J) {
   --font-size: var(--hop-Heading-sm-font-size);
   --font-family: var(--hop-Heading-sm-font-family);
   --font-weight: var(--hop-Heading-sm-font-weight);
   --line-height: var(--hop-Heading-sm-line-height);
 }
-:where(.Heading-module__hop-Heading--md___riIH-) {
+:where(.Heading-module__hop-Heading--md___6wrhw) {
   --font-size: var(--hop-Heading-md-font-size);
   --font-family: var(--hop-Heading-md-font-family);
   --font-weight: var(--hop-Heading-md-font-weight);
   --line-height: var(--hop-Heading-md-line-height);
 }
-:where(.Heading-module__hop-Heading--lg___-Nbml) {
+:where(.Heading-module__hop-Heading--lg___jvv5C) {
   --font-size: var(--hop-Heading-lg-font-size);
   --font-family: var(--hop-Heading-lg-font-family);
   --font-weight: var(--hop-Heading-lg-font-weight);
   --line-height: var(--hop-Heading-lg-line-height);
 }
-:where(.Heading-module__hop-Heading--xl___ksoya) {
+:where(.Heading-module__hop-Heading--xl___rJZ8W) {
   --font-size: var(--hop-Heading-xl-font-size);
   --font-family: var(--hop-Heading-xl-font-family);
   --font-weight: var(--hop-Heading-xl-font-weight);
   --line-height: var(--hop-Heading-xl-line-height);
 }
-:where(.Heading-module__hop-Heading--2xl___Qh6U3) {
+:where(.Heading-module__hop-Heading--2xl___vy5tr) {
   --font-size: var(--hop-Heading-2xl-font-size);
   --font-family: var(--hop-Heading-2xl-font-family);
   --font-weight: var(--hop-Heading-2xl-font-weight);
   --line-height: var(--hop-Heading-2xl-line-height);
 }
-:where(.Heading-module__hop-Heading--3xl___gJFdJ) {
+:where(.Heading-module__hop-Heading--3xl___sHzoB) {
   --font-size: var(--hop-Heading-3xl-font-size);
   --font-family: var(--hop-Heading-3xl-font-family);
   --font-weight: var(--hop-Heading-3xl-font-weight);
@@ -84,7 +84,7 @@
 }
 
 /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Text/src/Text.module.css/#css-module-data */
-.Text-module__hop-Text___nz5MS {
+.Text-module__hop-Text___45Zf4 {
   --hop-Text-xs-font-size: var(--hop-body-xs-font-size);
   --hop-Text-xs-font-family: var(--hop-body-xs-font-family);
   --hop-Text-xs-font-weight: var(--hop-body-xs-font-weight);
@@ -114,49 +114,49 @@
   --hop-Text-inherit-size-font-weight: inherit;
   --hop-Text-inherit-size-line-height: inherit;
 }
-:where(.Text-module__hop-Text___nz5MS) {
+:where(.Text-module__hop-Text___45Zf4) {
   font-family: var(--font-family);
   font-size: var(--font-size);
   font-weight: var(--font-weight);
   line-height: var(--line-height);
 }
-:where(.Text-module__hop-Text--xs___Go8-r) {
+:where(.Text-module__hop-Text--xs___d9F1w) {
   --font-size: var(--hop-Text-xs-font-size);
   --font-family: var(--hop-Text-xs-font-family);
   --font-weight: var(--hop-Text-xs-font-weight);
   --line-height: var(--hop-Text-xs-line-height);
 }
-:where(.Text-module__hop-Text--sm___HQ3zz) {
+:where(.Text-module__hop-Text--sm___-NvEj) {
   --font-size: var(--hop-Text-sm-font-size);
   --font-family: var(--hop-Text-sm-font-family);
   --font-weight: var(--hop-Text-sm-font-weight);
   --line-height: var(--hop-Text-sm-line-height);
 }
-:where(.Text-module__hop-Text--md___ClBUN) {
+:where(.Text-module__hop-Text--md___lFLy8) {
   --font-size: var(--hop-Text-md-font-size);
   --font-family: var(--hop-Text-md-font-family);
   --font-weight: var(--hop-Text-md-font-weight);
   --line-height: var(--hop-Text-md-line-height);
 }
-:where(.Text-module__hop-Text--lg___X2zzc) {
+:where(.Text-module__hop-Text--lg___eI9o1) {
   --font-size: var(--hop-Text-lg-font-size);
   --font-family: var(--hop-Text-lg-font-family);
   --font-weight: var(--hop-Text-lg-font-weight);
   --line-height: var(--hop-Text-lg-line-height);
 }
-:where(.Text-module__hop-Text--xl___PQwpP) {
+:where(.Text-module__hop-Text--xl___gyrV0) {
   --font-size: var(--hop-Text-xl-font-size);
   --font-family: var(--hop-Text-xl-font-family);
   --font-weight: var(--hop-Text-xl-font-weight);
   --line-height: var(--hop-Text-xl-line-height);
 }
-:where(.Text-module__hop-Text--2xl___YQvD7) {
+:where(.Text-module__hop-Text--2xl___ZQS8X) {
   --font-size: var(--hop-Text-2xl-font-size);
   --font-family: var(--hop-Text-2xl-font-family);
   --font-weight: var(--hop-Text-2xl-font-weight);
   --line-height: var(--hop-Text-2xl-line-height);
 }
-:where(.Text-module__hop-Text--inherit___Mtn3G) {
+:where(.Text-module__hop-Text--inherit___wmhsR) {
   --font-size: var(--hop-Text-inherit-size-font-size);
   --font-family: var(--hop-Text-inherit-size-font-family);
   --font-weight: var(--hop-Text-inherit-size-font-weight);
@@ -164,7 +164,7 @@
 }
 
 /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/OverlineText/src/OverlineText.module.css/#css-module-data */
-:where(.OverlineText-module__hop-OverlineText___D2EFn) {
+:where(.OverlineText-module__hop-OverlineText___6KBG7) {
   --hop-OverlineText-font-family: var(--hop-overline-font-family);
   --hop-OverlineText-font-size: var(--hop-overline-font-size);
   --hop-OverlineText-font-weight: var(--hop-overline-font-weight);
@@ -188,39 +188,39 @@
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing);
 }
-.OverlineText-module__hop-OverlineText__text___vCV9h {
+.OverlineText-module__hop-OverlineText__text___MHRJ4 {
   box-sizing: border-box;
 }
-.OverlineText-module__hop-OverlineText__text___vCV9h::before,
-.OverlineText-module__hop-OverlineText__text___vCV9h::after {
+.OverlineText-module__hop-OverlineText__text___MHRJ4::before,
+.OverlineText-module__hop-OverlineText__text___MHRJ4::after {
   content: "";
   display: block;
   box-sizing: border-box;
   inline-size: 0;
   block-size: 0;
 }
-.OverlineText-module__hop-OverlineText__text___vCV9h::before {
+.OverlineText-module__hop-OverlineText__text___MHRJ4::before {
   margin-block-end: var(--bottom-offset);
 }
-.OverlineText-module__hop-OverlineText__text___vCV9h::after {
+.OverlineText-module__hop-OverlineText__text___MHRJ4::after {
   margin-block-start: var(--top-offset);
 }
 
 /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/components/src/typography/Label/src/Label.module.css/#css-module-data */
-.Label-module__hop-Label___69Dkt {
+.Label-module__hop-Label___2VJx8 {
   --hop-Label-font-size: var(--hop-heading-xs-font-size);
   --hop-Label-font-family: var(--hop-heading-xs-font-family);
   --hop-Label-font-weight: var(--hop-heading-xs-font-weight);
   --hop-Label-line-height: var(--hop-heading-xs-line-height);
   --hop-Label-color: var(--hop-neutral-text-weak);
 }
-:where(.Label-module__hop-Label___69Dkt) {
+:where(.Label-module__hop-Label___2VJx8) {
   font-family: var(--hop-Label-font-family);
   font-size: var(--hop-Label-font-size);
   font-weight: var(--hop-Label-font-weight);
   line-height: var(--hop-Label-line-height);
   color: var(--hop-Label-color);
 }
-:where(.Label-module__hop-Label__indicator___6c8hx) {
+:where(.Label-module__hop-Label__indicator___UgwtS) {
   padding-inline-start: var(--hop-space-20);
 }

package/dist/utils/src/index.js

@@ -1,22 +1,22 @@
-import '../../chunk-SNIF7MEM.js';
 import '../../chunk-LQICWONC.js';
+import '../../chunk-SNIF7MEM.js';
 export { useFontFaceReady } from '../../chunk-IU6XMS2X.js';
 export { useTruncatedText } from '../../chunk-Z57VHYOF.js';
 export { useScale } from '../../chunk-MTDFS4CZ.js';
 export { useSlot } from '../../chunk-H5YTU3U7.js';
 export { useIsOverflow } from '../../chunk-EHXOXTDN.js';
 export { isArray, isDefined, isEmptyArray, isFunction, isNil, isNilOrEmpty, isNull, isNumber, isObject, isPlainObject, isPromise, isString, isUndefined } from '../../chunk-TIPN4VYD.js';
-export { EnsureTextWrapper } from '../../chunk-GPEHOZZZ.js';
+export { EnsureTextWrapper } from '../../chunk-MHDM4YO4.js';
 export { isTextOnlyChildren } from '../../chunk-ZWU6DRRZ.js';
 import '../../chunk-LJXTJRSB.js';
-import '../../chunk-PS7WUB3A.js';
+import '../../chunk-HEAER6AM.js';
+import '../../chunk-IRP5O2PB.js';
 import '../../chunk-TXZ6BMFR.js';
-import '../../chunk-RX6A4PRX.js';
 import '../../chunk-QCA3ZR56.js';
 import '../../chunk-TFVDF4YH.js';
-import '../../chunk-LSNF44NV.js';
+import '../../chunk-4MJUV4Y4.js';
 import '../../chunk-WPNVVGFW.js';
-import '../../chunk-AZZPA2LW.js';
+import '../../chunk-3PONZZJH.js';
 import '../../chunk-X6SER3TZ.js';
 export { ClearContainerSlots, ClearProviders } from '../../chunk-HXI3MEEK.js';
 export { SlotProvider } from '../../chunk-M36KANKC.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hopper-ui/components",
   "author": "Workleap",
-  "version": "1.3.19",
+  "version": "1.3.21",
   "description": "The components package.",
   "license": "Apache-2.0",
   "repository": {
@@ -34,18 +34,18 @@
     "README.md"
   ],
   "peerDependencies": {
-    "@hopper-ui/styled-system": "^2.1.0",
+    "@hopper-ui/styled-system": "^2.4",
     "react": "^18",
-    "react-aria": "^3.34",
-    "react-aria-components": "^1.2",
+    "react-aria": "^3.35",
+    "react-aria-components": "^1.4",
     "react-dom": "^18"
   },
   "dependencies": {
-    "@react-aria/utils": "^3.25.2",
-    "@react-stately/utils": "^3.10.3",
-    "@react-types/shared": "^3.24.1",
+    "@react-aria/utils": "^3.25.3",
+    "@react-stately/utils": "^3.10.4",
+    "@react-types/shared": "^3.25.0",
     "clsx": "^2.1.1",
-    "@hopper-ui/icons": "2.8.2"
+    "@hopper-ui/icons": "2.8.3"
   },
   "devDependencies": {
     "@swc/core": "1.5.25",
@@ -70,8 +70,8 @@
     "jest-fail-on-console": "3.3.0",
     "jest-fetch-mock": "3.0.3",
     "react": "18.3.1",
-    "react-aria": "3.34.3",
-    "react-aria-components": "1.2.1",
+    "react-aria": "3.35.0",
+    "react-aria-components": "1.4.0",
     "react-dom": "18.3.1",
     "react-test-renderer": "18.3.1",
     "ts-jest": "29.1.4",

package/dist/chunk-2GJNPGAM.js

@@ -1,187 +0,0 @@
-import { useSlot } from './chunk-H5YTU3U7.js';
-import { _Spinner } from './chunk-Q6BAJIO5.js';
-import { ButtonContext } from './chunk-WMTWFKKP.js';
-import { IconListContext } from './chunk-DHVVYSLB.js';
-import { EnsureTextWrapper } from './chunk-GPEHOZZZ.js';
-import { useLocalizedString } from './chunk-TFVDF4YH.js';
-import { TextContext } from './chunk-X6SER3TZ.js';
-import { SlotProvider } from './chunk-M36KANKC.js';
-import { useRenderProps } from './chunk-NH3IVMXB.js';
-import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
-import { cssModule } from './chunk-KVDXQMWI.js';
-import { IconContext } from '@hopper-ui/icons';
-import { slot, useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
-import { chain, filterDOMProps, useRouter, shouldClientNavigate } from '@react-aria/utils';
-import clsx from 'clsx';
-import { forwardRef } from 'react';
-import { useFocusRing, useHover, useButton, mergeProps } from 'react-aria';
-import { useContextProps, ButtonContext as ButtonContext$1, composeRenderProps, DEFAULT_SLOT } from 'react-aria-components';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-// css-module:./Button.module.css#css-module
-var Button_module_default = { "hop-Button": "Button-module__hop-Button___GykD-", "hop-Button--icon-only": "Button-module__hop-Button--icon-only___6PD1D", "hop-Button--fluid": "Button-module__hop-Button--fluid___3BOfn", "hop-Button--sm": "Button-module__hop-Button--sm___l4gCq", "hop-Button--primary": "Button-module__hop-Button--primary___kChrM", "hop-Button--md": "Button-module__hop-Button--md___L380n", "hop-Button--secondary": "Button-module__hop-Button--secondary___5nyGD", "hop-Button--upsell": "Button-module__hop-Button--upsell___Kkc-F", "hop-Button--danger": "Button-module__hop-Button--danger___FV0mZ", "hop-Button--ghost-danger": "Button-module__hop-Button--ghost-danger___VuuUz", "hop-Button--ghost-secondary": "Button-module__hop-Button--ghost-secondary___TpSND", "hop-Button--ghost-primary": "Button-module__hop-Button--ghost-primary___skgG5", "hop-Button__Spinner": "Button-module__hop-Button__Spinner___ESK3E", "hop-Button__icon": "Button-module__hop-Button__icon___OgHz4", "hop-Button__icon-list": "Button-module__hop-Button__icon-list___H7MOe", "hop-Button__text": "Button-module__hop-Button__text___qtvCq", "hop-Button__end-icon": "Button-module__hop-Button__end-icon___aUAAx", "hop-Button__end-icon-list": "Button-module__hop-Button__end-icon-list___0FH5h" };
-var GlobalButtonCssSelector = "hop-Button";
-var additionalButtonHTMLAttributes = /* @__PURE__ */ new Set(["form", "formAction", "formEncType", "formMethod", "formNoValidate", "formTarget", "name", "value"]);
-function useSimulatedRACButton(props, ref) {
-  const { focusProps, isFocused, isFocusVisible } = useFocusRing(props);
-  const { hoverProps, isHovered } = useHover(props);
-  const ctx = props;
-  const elementType = props.href ? "a" : "button";
-  const { buttonProps, isPressed } = useButton({
-    ...props,
-    elementType,
-    isDisabled: props.isDisabled || props.isLoading
-  }, ref);
-  const state = {
-    isFocused,
-    isFocusVisible,
-    isHovered,
-    isPressed,
-    isDisabled: props.isDisabled || false
-  };
-  const mergedProps = {
-    ...mergeProps(buttonProps, focusProps, hoverProps),
-    "data-disabled": props.isDisabled || void 0,
-    "data-pressed": ctx.isPressed || isPressed || void 0,
-    "data-hovered": isHovered || void 0,
-    "data-focused": isFocused || void 0,
-    "data-focus-visible": isFocusVisible || void 0
-  };
-  return [mergedProps, state];
-}
-function useCreateRouterLinkClickEventHandler(props) {
-  const router = useRouter();
-  return (e) => {
-    if (!router.isNative && e.currentTarget instanceof HTMLAnchorElement && e.currentTarget.href && // If props are applied to a router Link component, it may have already prevented default.
-    !e.isDefaultPrevented() && shouldClientNavigate(e.currentTarget, e) && props.href) {
-      e.preventDefault();
-      router.open(e.currentTarget, e, props.href, props.routerOptions);
-    }
-  };
-}
-function Button(props, ref) {
-  var _a, _b;
-  [props, ref] = useContextProps(props, ref, ButtonContext);
-  [props, ref] = useContextProps(props, ref, ButtonContext$1);
-  const { stylingProps, ...ownProps } = useStyledSystem(props);
-  const [{ onClick, ...buttonProps }, state] = useSimulatedRACButton(ownProps, ref);
-  const stringFormatter = useLocalizedString();
-  const {
-    className,
-    children: childrenProp,
-    size: sizeProp,
-    isFluid: isFluidProp,
-    variant = "primary",
-    isLoading,
-    style: styleProp,
-    spinnerProps,
-    ...otherProps
-  } = ownProps;
-  const [textRef, hasText] = useSlot();
-  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
-  const isFluid = (_b = useResponsiveValue(isFluidProp)) != null ? _b : false;
-  const classNames = composeClassnameRenderProps(
-    className,
-    GlobalButtonCssSelector,
-    cssModule(
-      Button_module_default,
-      "hop-Button",
-      variant,
-      size,
-      isFluid && "fluid",
-      isLoading && "loading",
-      !hasText && "icon-only"
-    ),
-    stylingProps.className
-  );
-  const style = composeRenderProps(styleProp, (prev) => {
-    return {
-      ...stylingProps.style,
-      ...prev
-    };
-  });
-  const children = composeRenderProps(childrenProp, (prev) => {
-    return /* @__PURE__ */ jsx(EnsureTextWrapper, { children: prev });
-  });
-  const renderProps = useRenderProps({
-    className: classNames,
-    style,
-    children,
-    values: state
-  });
-  const hasAriaLabel = !!buttonProps["aria-label"] || !!buttonProps["aria-labelledby"];
-  if (!hasText && !hasAriaLabel) {
-    console.warn("[hopper-ui] If you do not provide a text children, you must specify an aria-label for accessibility");
-  }
-  const handleClick = chain(
-    onClick,
-    useCreateRouterLinkClickEventHandler(props)
-  );
-  const As = props.href ? "a" : "button";
-  const { className: spinnerClassName, ...otherSpinnerProps } = spinnerProps || {};
-  const spinnerClassNames = clsx(Button_module_default["hop-Button__Spinner"], spinnerClassName);
-  return /* @__PURE__ */ jsx(
-    SlotProvider,
-    {
-      values: [
-        [IconListContext, {
-          slots: {
-            [DEFAULT_SLOT]: {
-              size,
-              className: Button_module_default["hop-Button__icon-list"]
-            },
-            "end-icon": {
-              size,
-              className: Button_module_default["hop-Button__end-icon-list"]
-            }
-          }
-        }],
-        [IconContext, {
-          slots: {
-            [DEFAULT_SLOT]: {
-              size,
-              className: Button_module_default["hop-Button__icon"]
-            },
-            "end-icon": {
-              size,
-              className: Button_module_default["hop-Button__end-icon"]
-            }
-          }
-        }],
-        [TextContext, {
-          className: Button_module_default["hop-Button__text"],
-          size,
-          ref: textRef
-        }]
-      ],
-      children: /* @__PURE__ */ jsxs(
-        As,
-        {
-          ...filterDOMProps(otherProps, { propNames: additionalButtonHTMLAttributes }),
-          ...buttonProps,
-          ...renderProps,
-          onClick: handleClick,
-          ref,
-          slot: props.slot || void 0,
-          "data-loading": isLoading,
-          children: [
-            renderProps.children,
-            isLoading && /* @__PURE__ */ jsx(
-              _Spinner,
-              {
-                "aria-label": stringFormatter.format("Button.spinnerAriaLabel"),
-                size,
-                className: spinnerClassNames,
-                ...otherSpinnerProps
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-}
-var _Button = slot("button", forwardRef(Button));
-_Button.displayName = "Button";
-
-export { GlobalButtonCssSelector, _Button };