@hopper-ui/components 1.0.13 → 1.1.0

package/dist/chunk-XGI4LDIF.js

@@ -0,0 +1,276 @@
+import { useFontFaceReady } from './chunk-IU6XMS2X.js';
+import { useTruncatedText } from './chunk-Z57VHYOF.js';
+import { TextAreaContext } from './chunk-MHQZXLKW.js';
+import { _InputGroup } from './chunk-YRUBXLBX.js';
+import { LabelContext } from './chunk-QCA3ZR56.js';
+import { useLocalizedString } from './chunk-YEYNRBMQ.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { HelperMessageContext } from './chunk-HZKFQ33E.js';
+import { ErrorMessageContext } from './chunk-FAE27DLF.js';
+import { _Text } from './chunk-6MSRPPI6.js';
+import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useResponsiveValue, useIsomorphicLayoutEffect } from '@hopper-ui/styled-system';
+import $670gB$react, { forwardRef, useContext, useState, useCallback, useRef, useMemo } from 'react';
+import { mergeRefs } from '@react-aria/utils';
+import { useControlledState } from '@react-stately/utils';
+import { useObjectRef } from 'react-aria';
+import { useContextProps, composeRenderProps, TextArea as TextArea$1, TextField } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var $b5e257d569688ac6$var$defaultContext = {
+  prefix: String(Math.round(Math.random() * 1e10)),
+  current: 0
+};
+var $b5e257d569688ac6$var$SSRContext = /* @__PURE__ */ ($670gB$react).createContext($b5e257d569688ac6$var$defaultContext);
+var $b5e257d569688ac6$var$IsSSRContext = /* @__PURE__ */ ($670gB$react).createContext(false);
+var $b5e257d569688ac6$var$canUseDOM = Boolean(typeof window !== "undefined" && window.document && window.document.createElement);
+var $b5e257d569688ac6$var$componentIds = /* @__PURE__ */ new WeakMap();
+function $b5e257d569688ac6$var$useCounter(isDisabled = false) {
+  let ctx = (useContext)($b5e257d569688ac6$var$SSRContext);
+  let ref = (useRef)(null);
+  if (ref.current === null && !isDisabled) {
+    var _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner, _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    let currentOwner = (_React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = ($670gB$react).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED) === null || _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === void 0 ? void 0 : (_React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner = _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner) === null || _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner === void 0 ? void 0 : _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner.current;
+    if (currentOwner) {
+      let prevComponentValue = $b5e257d569688ac6$var$componentIds.get(currentOwner);
+      if (prevComponentValue == null)
+        $b5e257d569688ac6$var$componentIds.set(currentOwner, {
+          id: ctx.current,
+          state: currentOwner.memoizedState
+        });
+      else if (currentOwner.memoizedState !== prevComponentValue.state) {
+        ctx.current = prevComponentValue.id;
+        $b5e257d569688ac6$var$componentIds.delete(currentOwner);
+      }
+    }
+    ref.current = ++ctx.current;
+  }
+  return ref.current;
+}
+function $b5e257d569688ac6$var$useLegacySSRSafeId(defaultId) {
+  let ctx = (useContext)($b5e257d569688ac6$var$SSRContext);
+  if (ctx === $b5e257d569688ac6$var$defaultContext && !$b5e257d569688ac6$var$canUseDOM) console.warn("When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.");
+  let counter = $b5e257d569688ac6$var$useCounter(!!defaultId);
+  let prefix = ctx === $b5e257d569688ac6$var$defaultContext && false ? "react-aria" : `react-aria${ctx.prefix}`;
+  return defaultId || `${prefix}-${counter}`;
+}
+function $b5e257d569688ac6$var$useModernSSRSafeId(defaultId) {
+  let id = ($670gB$react).useId();
+  let [didSSR] = (useState)($b5e257d569688ac6$export$535bd6ca7f90a273());
+  let prefix = didSSR || false ? "react-aria" : `react-aria${$b5e257d569688ac6$var$defaultContext.prefix}`;
+  return defaultId || `${prefix}-${id}`;
+}
+typeof ($670gB$react)["useId"] === "function" ? $b5e257d569688ac6$var$useModernSSRSafeId : $b5e257d569688ac6$var$useLegacySSRSafeId;
+function $b5e257d569688ac6$var$getSnapshot() {
+  return false;
+}
+function $b5e257d569688ac6$var$getServerSnapshot() {
+  return true;
+}
+function $b5e257d569688ac6$var$subscribe(onStoreChange) {
+  return () => {
+  };
+}
+function $b5e257d569688ac6$export$535bd6ca7f90a273() {
+  if (typeof ($670gB$react)["useSyncExternalStore"] === "function") return ($670gB$react)["useSyncExternalStore"]($b5e257d569688ac6$var$subscribe, $b5e257d569688ac6$var$getSnapshot, $b5e257d569688ac6$var$getServerSnapshot);
+  return (useContext)($b5e257d569688ac6$var$IsSSRContext);
+}
+
+// css-module:./TextArea.module.css#css-module
+var TextArea_module_default = { "hop-TextArea": "TextArea-module__hop-TextArea___uQGKH", "hop-TextArea--fluid": "TextArea-module__hop-TextArea--fluid___sNZwX", "hop-TextArea__Label": "TextArea-module__hop-TextArea__Label___x0-91", "hop-TextArea__prefix": "TextArea-module__hop-TextArea__prefix___ozMT-", "hop-TextArea__InputGroup": "TextArea-module__hop-TextArea__InputGroup___1hWlx", "hop-TextArea__textarea": "TextArea-module__hop-TextArea__textarea___r0SC4", "hop-TextArea__char-count": "TextArea-module__hop-TextArea__char-count___TBxZb", "hop-TextArea__ErrorMessage": "TextArea-module__hop-TextArea__ErrorMessage___F5Ho0", "hop-TextArea__HelperMessage": "TextArea-module__hop-TextArea__HelperMessage___EXkDT" };
+var GlobalTextAreaCssSelector = "hop-TextArea";
+var DefaultMinimumTextAreaRows = 3;
+var pxToInt = (value) => {
+  return value ? parseInt(value.replace("px", ""), 10) : 0;
+};
+function getBodyElement(isSSR) {
+  return !isSSR ? document.body : void 0;
+}
+function useCalculateRowHeight(input) {
+  const isSSR = $b5e257d569688ac6$export$535bd6ca7f90a273();
+  const fontsLoaded = useFontFaceReady();
+  return useMemo(() => {
+    var _a, _b;
+    if (!input || !fontsLoaded) {
+      return 0;
+    }
+    const { font, lineHeight } = window.getComputedStyle(input);
+    if (lineHeight !== "normal") {
+      return pxToInt(lineHeight);
+    }
+    const element = document.createElement("span");
+    element.style.visibility = "hidden";
+    element.style.position = "absolute";
+    element.style.font = font;
+    element.innerText = "LineHeightHelper";
+    (_a = getBodyElement(isSSR)) == null ? void 0 : _a.appendChild(element);
+    const height = element.getBoundingClientRect().height;
+    (_b = getBodyElement(isSSR)) == null ? void 0 : _b.removeChild(element);
+    return height;
+  }, [input, fontsLoaded, isSSR]);
+}
+function TextArea(props, ref) {
+  var _a, _b;
+  const {
+    inputRef: userProvidedInputRef = null,
+    ...propsWithoutRef
+  } = props;
+  [props, ref] = useContextProps(propsWithoutRef, ref, TextAreaContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const [characterCount, setCharacterCount] = useState(() => {
+    var _a2, _b2, _c, _d;
+    return (_d = (_c = (_a2 = props.value) == null ? void 0 : _a2.length) != null ? _c : (_b2 = props.defaultValue) == null ? void 0 : _b2.length) != null ? _d : 0;
+  });
+  const {
+    className,
+    style: styleProp,
+    size,
+    showCharacterCount,
+    maxLength,
+    placeholder,
+    onChange: onChangeProp,
+    children,
+    defaultValue,
+    maxRows,
+    cols,
+    rows: rowsProp,
+    value: valueProp,
+    resizeMode: resizeModeProp,
+    isFluid: isFluidProp,
+    isDisabled,
+    isInvalid,
+    restrictMaxLength = true,
+    ...otherProps
+  } = ownProps;
+  const mergedTextAreaRef = useObjectRef(mergeRefs(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
+  const isFluid = (_a = useResponsiveValue(isFluidProp)) != null ? _a : false;
+  const resizeMode = (_b = useResponsiveValue(resizeModeProp)) != null ? _b : "none";
+  const overMaxLength = !!maxLength && characterCount > maxLength;
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalTextAreaCssSelector,
+    cssModule(
+      TextArea_module_default,
+      "hop-TextArea",
+      isFluid && "fluid"
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const handleTextChanged = useCallback((value2) => {
+    setCharacterCount(value2.length);
+    onChangeProp == null ? void 0 : onChangeProp(value2);
+  }, [onChangeProp]);
+  if (showCharacterCount && !maxLength) {
+    console.warn("If showCharacterCount is true, maxLength must be set to the maximum number of characters allowed in the TextArea.");
+  }
+  const rowHeight = useCalculateRowHeight(mergedTextAreaRef.current);
+  const defaultNumberOfRows = maxRows && maxRows < DefaultMinimumTextAreaRows ? maxRows : DefaultMinimumTextAreaRows;
+  const [rows, setRows] = useState(rowsProp != null ? rowsProp : defaultNumberOfRows);
+  const truncateText = useTruncatedText();
+  const [value, onChange] = useControlledState(valueProp, defaultValue || "", handleTextChanged);
+  const adjustRows = useCallback(() => {
+    const input = mergedTextAreaRef.current;
+    if (rowHeight === 0 || !input) {
+      return;
+    }
+    const { paddingBottom, paddingTop } = window.getComputedStyle(input);
+    const originalRows = input.rows;
+    const originalOverflow = input.style.overflow;
+    input.rows = 1;
+    input.style.overflow = "hidden";
+    const padding = pxToInt(paddingTop) + pxToInt(paddingBottom);
+    const currentRowsWithText = Math.floor((input.scrollHeight - padding) / rowHeight);
+    input.rows = originalRows;
+    input.style.overflow = originalOverflow;
+    if (rowsProp) {
+      setRows(rowsProp);
+    } else if (maxRows && currentRowsWithText >= maxRows) {
+      setRows(maxRows);
+    } else {
+      setRows(Math.max(currentRowsWithText, DefaultMinimumTextAreaRows));
+    }
+  }, [mergedTextAreaRef, rowHeight, maxRows, rowsProp]);
+  useIsomorphicLayoutEffect(() => {
+    if (restrictMaxLength) {
+      const newValue = truncateText(value, maxLength);
+      onChange(newValue);
+    }
+    adjustRows();
+  }, [value, adjustRows]);
+  const inputMarkup = /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsxs(
+    _InputGroup,
+    {
+      isFluid: true,
+      size,
+      className: TextArea_module_default["hop-TextArea__InputGroup"],
+      isDisabled,
+      isInvalid,
+      inputClassName: TextArea_module_default["hop-TextArea__textarea"],
+      inputType: "textarea",
+      children: [
+        /* @__PURE__ */ jsx(TextArea$1, { ref: mergedTextAreaRef, placeholder, cols, rows }),
+        showCharacterCount && maxLength && /* @__PURE__ */ jsx(CharacterCount, { charactersLeft: maxLength - characterCount, isInvalid: overMaxLength })
+      ]
+    }
+  ) });
+  const childrenMarkup = composeRenderProps(children, (prev) => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        SlotProvider,
+        {
+          values: [
+            [LabelContext, { className: TextArea_module_default["hop-TextArea__Label"] }],
+            [HelperMessageContext, { className: TextArea_module_default["hop-TextArea__HelperMessage"] }],
+            [ErrorMessageContext, { className: TextArea_module_default["hop-TextArea__ErrorMessage"] }]
+          ],
+          children: prev
+        }
+      ),
+      inputMarkup
+    ] });
+  });
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      ref,
+      value,
+      style,
+      className: classNames,
+      maxLength: restrictMaxLength ? maxLength : void 0,
+      onChange,
+      isDisabled,
+      isInvalid,
+      "data-resize-mode": resizeMode,
+      "data-over-max-length": overMaxLength || void 0,
+      ...otherProps,
+      children: childrenMarkup
+    }
+  );
+}
+function CharacterCount({ charactersLeft, isInvalid }) {
+  const stringFormatter = useLocalizedString();
+  const accessibilityString = stringFormatter.format("Input.charactersLeft", { charLeft: charactersLeft });
+  return /* @__PURE__ */ jsx(
+    _Text,
+    {
+      "aria-label": accessibilityString,
+      role: "status",
+      size: "xs",
+      className: TextArea_module_default["hop-TextArea__char-count"],
+      "data-invalid": isInvalid || void 0,
+      children: charactersLeft
+    }
+  );
+}
+var _TextArea = forwardRef(TextArea);
+_TextArea.displayName = "TextArea";
+
+export { GlobalTextAreaCssSelector, _TextArea };

package/dist/{chunk-CS2RAWQB.js → chunk-XHZ4R2MB.js}

@@ -2,13 +2,13 @@ import { isFunction } from './chunk-TIPN4VYD.js';
 import { useLoadOnScroll } from './chunk-JTNMFPM4.js';
 import { SectionContext } from './chunk-5H5AZJPQ.js';
 import { ListBoxContext } from './chunk-UIEP5BA5.js';
-import { _ListBoxItem } from './chunk-SW7LHIQ2.js';
+import { _ListBoxItem } from './chunk-RD6VCI72.js';
 import { useLocalizedString } from './chunk-YEYNRBMQ.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { ListBoxItemContext } from './chunk-Y2POLIXK.js';
 import { HeaderContext } from './chunk-7JOGKC3W.js';
 import { DividerContext } from './chunk-FYIHMKHI.js';
-import { _Text } from './chunk-PAYZGXTT.js';
+import { _Text } from './chunk-6MSRPPI6.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
@@ -18,7 +18,7 @@ import { useContextProps, composeRenderProps, ListBox as ListBox$1, Collection }
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./ListBox.module.css#css-module
-var ListBox_module_default = { "hop-ListBox": "ListBox-module__hop-ListBox___XQDch", "hop-ListBox--fluid": "ListBox-module__hop-ListBox--fluid___3Im73", "hop-ListBox__section": "ListBox-module__hop-ListBox__section___65r5k", "hop-ListBox__item": "ListBox-module__hop-ListBox__item___XEwSd", "hop-ListBox__section-header": "ListBox-module__hop-ListBox__section-header___GjNW9", "hop-ListBox__divider": "ListBox-module__hop-ListBox__divider___KcKrr" };
+var ListBox_module_default = { "hop-ListBox": "ListBox-module__hop-ListBox___cyQ8m", "hop-ListBox--fluid": "ListBox-module__hop-ListBox--fluid___TImf9", "hop-ListBox__section": "ListBox-module__hop-ListBox__section___nULeu", "hop-ListBox__item": "ListBox-module__hop-ListBox__item___r3RgS", "hop-ListBox__section-header": "ListBox-module__hop-ListBox__section-header___DWGXa", "hop-ListBox__divider": "ListBox-module__hop-ListBox__divider___ncxbm" };
 var GlobalListBoxCssSelector = "hop-ListBox";
 var GlobalListBoxEmptyItemCssSelector = "hop-ListBox__empty-item";
 var ListBoxToTextSizeAdapter = {

package/dist/{chunk-5WWMVQI4.js → chunk-YE7RARJB.js}

@@ -7,7 +7,7 @@ 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___1BZid", "hop-OverlineText__text": "OverlineText-module__hop-OverlineText__text___RuqQo" };
+var OverlineText_module_default = { "hop-OverlineText": "OverlineText-module__hop-OverlineText___OCaWy", "hop-OverlineText__text": "OverlineText-module__hop-OverlineText__text___C3XIa" };
 var GlobalOverlineTextCssSelector = "hop-OverlineText";
 function OverlineText(props, ref) {
   [props, ref] = useContextProps(props, ref, OverlineTextContext);

package/dist/{chunk-CCIVRIKG.js → chunk-YRUBXLBX.js}

@@ -5,11 +5,11 @@ import { cssModule } from './chunk-KVDXQMWI.js';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
 import { mergeRefs } from '@react-aria/utils';
 import { forwardRef, useRef, useCallback } from 'react';
-import { useContextProps, useSlottedContext, InputContext, composeRenderProps, Group } from 'react-aria-components';
+import { useContextProps, useSlottedContext, InputContext, TextAreaContext, 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___yPMIO", "hop-InputGroup--fluid": "InputGroup-module__hop-InputGroup--fluid___SDrjN", "hop-InputGroup--sm": "InputGroup-module__hop-InputGroup--sm___uk-A0", "hop-InputGroup__input": "InputGroup-module__hop-InputGroup__input___aerYh" };
+var InputGroup_module_default = { "hop-InputGroup": "InputGroup-module__hop-InputGroup___MpyEZ", "hop-InputGroup--fluid": "InputGroup-module__hop-InputGroup--fluid___nXqi6", "hop-InputGroup--sm": "InputGroup-module__hop-InputGroup--sm___tvLAO", "hop-InputGroup__input": "InputGroup-module__hop-InputGroup__input___lecEl", "hop-InputGroup__textarea": "InputGroup-module__hop-InputGroup__textarea___e89Dj" };
 var GlobalInputGroupCssSelector = "hop-InputGroup";
 function InputGroup(props, ref) {
   var _a, _b;
@@ -17,6 +17,9 @@ function InputGroup(props, ref) {
   const inputRef = useRef(null);
   const inputContext = useSlottedContext(InputContext);
   const mergedRefs = (inputContext == null ? void 0 : inputContext.ref) ? mergeRefs(inputRef, inputContext == null ? void 0 : inputContext.ref) : inputRef;
+  const textAreaRef = useRef(null);
+  const textAreaContext = useSlottedContext(TextAreaContext);
+  const mergedTextAreaRefs = (textAreaContext == null ? void 0 : textAreaContext.ref) ? mergeRefs(textAreaRef, textAreaContext == null ? void 0 : textAreaContext.ref) : textAreaRef;
   const { stylingProps, ...ownProps } = useStyledSystem(props);
   const {
     className,
@@ -25,6 +28,7 @@ function InputGroup(props, ref) {
     size: sizeProp,
     isFluid: isFluidProp,
     inputClassName,
+    inputType = "text",
     onMouseDown,
     ...otherProps
   } = ownProps;
@@ -62,6 +66,11 @@ function InputGroup(props, ref) {
           ...inputContext,
           ref: mergedRefs,
           className: composeClassnameRenderProps(inputContext == null ? void 0 : inputContext.className, inputClassName, InputGroup_module_default["hop-InputGroup__input"])
+        }],
+        [TextAreaContext, {
+          ...textAreaContext,
+          ref: mergedTextAreaRefs,
+          className: composeClassnameRenderProps(textAreaContext == null ? void 0 : textAreaContext.className, inputClassName, InputGroup_module_default["hop-InputGroup__textarea"])
         }]
       ],
       children: /* @__PURE__ */ jsx(
@@ -72,6 +81,7 @@ function InputGroup(props, ref) {
           ref,
           className: classNames,
           style,
+          "data-input-type": inputType,
           children
         }
       )

package/dist/chunk-Z57VHYOF.js

@@ -0,0 +1,22 @@
+import { useCallback } from 'react';
+
+// src/utils/src/useTruncatedText.ts
+var useTruncatedText = () => {
+  const truncateText = useCallback((inputText, limit) => {
+    const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" });
+    const segments = segmenter.segment(inputText);
+    let truncatedText = "";
+    let count = 0;
+    for (const segment of segments) {
+      if (limit && count + segment.segment.length > limit) {
+        break;
+      }
+      truncatedText += segment.segment;
+      count += segment.segment.length;
+    }
+    return truncatedText;
+  }, []);
+  return truncateText;
+};
+
+export { useTruncatedText };

package/dist/{chunk-W34MMJ2L.js → chunk-ZNGSZW7M.js}

@@ -2,7 +2,7 @@ import { CheckboxContext } from './chunk-2EAZPH3M.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
-import { _Text } from './chunk-PAYZGXTT.js';
+import { _Text } from './chunk-6MSRPPI6.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
@@ -14,7 +14,7 @@ import { useContextProps, composeRenderProps, Checkbox as Checkbox$1 } from 'rea
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./Checkbox.module.css#css-module
-var Checkbox_module_default = { "hop-Checkbox": "Checkbox-module__hop-Checkbox___2SBYs", "hop-Checkbox--focused": "Checkbox-module__hop-Checkbox--focused___GUWfq", "hop-Checkbox--hovered": "Checkbox-module__hop-Checkbox--hovered___-rDr8", "hop-Checkbox--pressed": "Checkbox-module__hop-Checkbox--pressed___kLFm-", "hop-Checkbox--sm": "Checkbox-module__hop-Checkbox--sm___ku6Fh", "hop-Checkbox--md": "Checkbox-module__hop-Checkbox--md___m1kW9", "hop-Checkbox__icon": "Checkbox-module__hop-Checkbox__icon___9T-B2", "hop-Checkbox__icon-list": "Checkbox-module__hop-Checkbox__icon-list___Xzo43", "hop-Checkbox__box": "Checkbox-module__hop-Checkbox__box___tSdwv", "hop-Checkbox__check": "Checkbox-module__hop-Checkbox__check___nWURg", "hop-Checkbox__text": "Checkbox-module__hop-Checkbox__text___G2FeR" };
+var Checkbox_module_default = { "hop-Checkbox": "Checkbox-module__hop-Checkbox___uSRQR", "hop-Checkbox--focused": "Checkbox-module__hop-Checkbox--focused___l2Kcq", "hop-Checkbox--hovered": "Checkbox-module__hop-Checkbox--hovered___KKr7X", "hop-Checkbox--pressed": "Checkbox-module__hop-Checkbox--pressed___vlnLv", "hop-Checkbox--sm": "Checkbox-module__hop-Checkbox--sm___FNsCG", "hop-Checkbox--md": "Checkbox-module__hop-Checkbox--md___NSNfJ", "hop-Checkbox__icon": "Checkbox-module__hop-Checkbox__icon___RWn1y", "hop-Checkbox__icon-list": "Checkbox-module__hop-Checkbox__icon-list___FaUCo", "hop-Checkbox__box": "Checkbox-module__hop-Checkbox__box___zmD2H", "hop-Checkbox__check": "Checkbox-module__hop-Checkbox__check___NpzB3", "hop-Checkbox__text": "Checkbox-module__hop-Checkbox__text___mh-4B" };
 var GlobalCheckboxCssSelector = "hop-Checkbox";
 function Checkbox(props, ref) {
   var _a;