@hopper-ui/components 0.1.0 → 1.0.0

package/dist/chunk-4AARNXWE.js

@@ -0,0 +1,101 @@
+import { RadioFieldContext } from './chunk-DGLAGYBD.js';
+import { RadioGroupContext } from './chunk-5MBJWRZD.js';
+import { RadioListContext } from './chunk-A7TZHALP.js';
+import { RadioContext } from './chunk-FU5CCPLP.js';
+import { ErrorMessageContext } from './chunk-ACVMW6YD.js';
+import { HelperMessageContext } from './chunk-ESVVLTEN.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { LabelContext } from './chunk-HVKOIMMW.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, RadioGroup as RadioGroup$1 } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./RadioGroup.module.css#css-module
+var RadioGroup_module_default = { "hop-RadioGroup": "RadioGroup-module__hop-RadioGroup___T9TtY", "hop-RadioGroup--bordered": "RadioGroup-module__hop-RadioGroup--bordered___YceTZ", "hop-RadioGroup--sm": "RadioGroup-module__hop-RadioGroup--sm___EXu0Q", "hop-RadioGroup--md": "RadioGroup-module__hop-RadioGroup--md___xNRU8", "hop-RadioGroup__label": "RadioGroup-module__hop-RadioGroup__label___eybbP", "hop-RadioGroup__list": "RadioGroup-module__hop-RadioGroup__list___kk0V7", "hop-RadioGroup__radio": "RadioGroup-module__hop-RadioGroup__radio___rf-mr", "hop-RadioGroup__error-message": "RadioGroup-module__hop-RadioGroup__error-message___wj9r4", "hop-RadioGroup__helper-message": "RadioGroup-module__hop-RadioGroup__helper-message___vyN6b" };
+var GlobalRadioGroupCssSelector = "hop-RadioGroup";
+function RadioGroup(props, ref) {
+  var _a, _b;
+  [props, ref] = useContextProps(props, ref, RadioGroupContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    isDisabled,
+    isInvalid,
+    orientation: orientationProp = "vertical",
+    size: sizeProp = "md",
+    style: styleProp,
+    variant = "borderless",
+    ...otherProps
+  } = ownProps;
+  const orientation = (_a = useResponsiveValue(orientationProp)) != null ? _a : "vertical";
+  const size = (_b = useResponsiveValue(sizeProp)) != null ? _b : "md";
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalRadioGroupCssSelector,
+    cssModule(
+      RadioGroup_module_default,
+      "hop-RadioGroup",
+      size,
+      variant
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  return /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [LabelContext, {
+          className: RadioGroup_module_default["hop-RadioGroup__label"],
+          size
+        }],
+        [RadioContext, {
+          className: RadioGroup_module_default["hop-RadioGroup__radio"],
+          size
+        }],
+        [RadioFieldContext, {
+          className: RadioGroup_module_default["hop-RadioGroup__radio"],
+          size,
+          isDisabled
+        }],
+        [RadioListContext, {
+          className: RadioGroup_module_default["hop-RadioGroup__list"]
+        }],
+        [ErrorMessageContext, {
+          className: RadioGroup_module_default["hop-RadioGroup__error-message"],
+          hideIcon: true
+        }],
+        [HelperMessageContext, {
+          className: RadioGroup_module_default["hop-RadioGroup__helper-message"],
+          hideIcon: true
+        }]
+      ],
+      children: /* @__PURE__ */ jsx(
+        RadioGroup$1,
+        {
+          ref,
+          className: classNames,
+          style,
+          isInvalid,
+          isDisabled,
+          orientation,
+          ...otherProps,
+          children
+        }
+      )
+    }
+  );
+}
+var _RadioGroup = forwardRef(RadioGroup);
+_RadioGroup.displayName = "RadioGroup";
+
+export { GlobalRadioGroupCssSelector, _RadioGroup };

package/dist/chunk-4VVNSXIB.js

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

package/dist/chunk-5KJ5IKUE.js

@@ -0,0 +1,69 @@
+import { ErrorMessageContext } from './chunk-ACVMW6YD.js';
+import { useRenderProps } from './chunk-NH3IVMXB.js';
+import { _Text } from './chunk-M6UHXS6K.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { WarningIcon } from '@hopper-ui/icons';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef, useContext } from 'react';
+import { FieldErrorContext, useContextProps } 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___ByQ5V", "hop-ErrorMessage__icon": "ErrorMessage-module__hop-ErrorMessage__icon___Z0oW9" };
+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, hideIcon = false, style, slot = "errorMessage", ...otherProps } = ownProps;
+  const classNames = clsx(
+    GlobalErrorMessageCssSelector,
+    cssModule(
+      ErrorMessage_module_default,
+      "hop-ErrorMessage"
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  const warningIcon = !hideIcon && /* @__PURE__ */ jsx(WarningIcon, { size: "sm", className: ErrorMessage_module_default["hop-ErrorMessage__icon"] });
+  const renderProps = useRenderProps({
+    className: classNames,
+    children: children ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      warningIcon,
+      " ",
+      children
+    ] }) : null,
+    defaultChildren: /* @__PURE__ */ jsxs(Fragment, { children: [
+      warningIcon,
+      " ",
+      validation.validationErrors.join(" ")
+    ] }),
+    values: validation
+  });
+  return /* @__PURE__ */ jsx(
+    _Text,
+    {
+      ...otherProps,
+      ...renderProps,
+      slot,
+      ref,
+      style: mergedStyles
+    }
+  );
+});
+
+export { GlobalErrorMessageCssSelector, _ErrorMessage };

package/dist/chunk-5MBJWRZD.js

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

package/dist/{chunk-SEU4CGZD.js → chunk-65JPI4FL.js}

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { composeRenderProps } from 'react-aria-components';
 
-// src/utils/src/compose-classname-render-props.ts
+// src/utils/src/composeClassnameRenderProps.ts
 function composeClassnameRenderProps(className, ...classes) {
   return composeRenderProps(className, (prev) => {
     return clsx(

package/dist/chunk-7ELZ57E5.js

@@ -0,0 +1,93 @@
+import { CheckboxContext } from './chunk-2EAZPH3M.js';
+import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { _Text } from './chunk-M6UHXS6K.js';
+import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
+import { TextContext } from './chunk-OE5BLFZI.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { IconListContext } from './chunk-DHVVYSLB.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { MinusIcon, CheckmarkIcon, IconContext } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, Checkbox as Checkbox$1 } from 'react-aria-components';
+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___ep2Zx", "hop-Checkbox--sm": "Checkbox-module__hop-Checkbox--sm___B7Muq", "hop-Checkbox--md": "Checkbox-module__hop-Checkbox--md___yGTCh", "hop-Checkbox__icon": "Checkbox-module__hop-Checkbox__icon___lVhXJ", "hop-Checkbox__icon-list": "Checkbox-module__hop-Checkbox__icon-list___PvKOF", "hop-Checkbox__box": "Checkbox-module__hop-Checkbox__box___xJAKj", "hop-Checkbox__check": "Checkbox-module__hop-Checkbox__check___DmYlq", "hop-Checkbox__text": "Checkbox-module__hop-Checkbox__text___voh3D" };
+var GlobalCheckboxCssSelector = "hop-Checkbox";
+function Checkbox(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, CheckboxContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children: childrenProp,
+    size: sizeProp = "md",
+    style: styleProp,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalCheckboxCssSelector,
+    cssModule(
+      Checkbox_module_default,
+      "hop-Checkbox",
+      size
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const children = composeRenderProps(childrenProp, (prev) => {
+    if (prev && isTextOnlyChildren(prev)) {
+      return /* @__PURE__ */ jsx(_Text, { children: prev });
+    }
+    return prev;
+  });
+  return /* @__PURE__ */ jsx(
+    Checkbox$1,
+    {
+      ref,
+      className: classNames,
+      style,
+      ...otherProps,
+      children: (checkboxProps) => {
+        const checkboxIconClassName = Checkbox_module_default["hop-Checkbox__check"];
+        const icon = checkboxProps.isIndeterminate ? /* @__PURE__ */ jsx(MinusIcon, { size: "sm", className: checkboxIconClassName }) : /* @__PURE__ */ jsx(CheckmarkIcon, { size: "sm", className: checkboxIconClassName });
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: Checkbox_module_default["hop-Checkbox__box"], children: icon }),
+          /* @__PURE__ */ jsx(ClearContainerSlots, { children: /* @__PURE__ */ jsx(
+            SlotProvider,
+            {
+              values: [
+                [TextContext, {
+                  className: Checkbox_module_default["hop-Checkbox__text"],
+                  size
+                }],
+                [IconListContext, {
+                  className: Checkbox_module_default["hop-Checkbox__icon-list"],
+                  size
+                }],
+                [IconContext, {
+                  className: Checkbox_module_default["hop-Checkbox__icon"],
+                  size
+                }]
+              ],
+              children: children(checkboxProps)
+            }
+          ) })
+        ] });
+      }
+    }
+  );
+}
+var _Checkbox = forwardRef(Checkbox);
+_Checkbox.displayName = "Checkbox";
+
+export { GlobalCheckboxCssSelector, _Checkbox };

package/dist/chunk-A7TZHALP.js

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

package/dist/chunk-ACVMW6YD.js

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

package/dist/{chunk-YLDA2M2E.js → chunk-ANVMQBBG.js}

@@ -15,6 +15,7 @@ var HopperProvider = (props, ref) => {
     withCssVariables = true,
     className,
     navigate,
+    useHref,
     ...rest
   } = props;
   const classNames = clsx(
@@ -23,7 +24,7 @@ var HopperProvider = (props, ref) => {
   );
   let content = children;
   if (navigate) {
-    content = /* @__PURE__ */ jsx(RouterProvider, { navigate, children });
+    content = /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children });
   }
   return /* @__PURE__ */ jsx(StyledSystemProvider, { ref, withBodyStyle, colorScheme, withCssVariables, className: classNames, ...rest, children: /* @__PURE__ */ jsx(I18nProvider, { locale, children: content }) });
 };

package/dist/chunk-B7WS4DBA.js

@@ -0,0 +1,83 @@
+import { RadioFieldContext } from './chunk-DGLAGYBD.js';
+import { RadioContext } from './chunk-FU5CCPLP.js';
+import { TextContext } from './chunk-OE5BLFZI.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 { useId } from 'react-aria';
+import { useContextProps } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./RadioField.module.css#css-module
+var RadioField_module_default = { "hop-RadioField": "RadioField-module__hop-RadioField___u5q-m", "hop-RadioField--sm": "RadioField-module__hop-RadioField--sm___xyabe", "hop-RadioField--md": "RadioField-module__hop-RadioField--md___RaN8s", "hop-RadioField__description": "RadioField-module__hop-RadioField__description___XKSO3", "hop-RadioField__radio": "RadioField-module__hop-RadioField__radio___hg6Wr" };
+var GlobalRadioFieldCssSelector = "hop-RadioField";
+var RadioToDescriptionSizeAdapter = {
+  sm: "xs",
+  md: "sm"
+};
+function RadioField(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, RadioFieldContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    isDisabled,
+    size: sizeProp = "md",
+    style,
+    slot,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const classNames = clsx(
+    className,
+    GlobalRadioFieldCssSelector,
+    cssModule(
+      RadioField_module_default,
+      "hop-RadioField",
+      size
+    ),
+    stylingProps.className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  const descriptionId = useId();
+  return /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [TextContext, {
+          id: descriptionId,
+          className: RadioField_module_default["hop-RadioField__description"],
+          size: RadioToDescriptionSizeAdapter[size]
+        }],
+        [RadioContext, {
+          className: RadioField_module_default["hop-RadioField__radio"],
+          size,
+          isDisabled,
+          "aria-describedby": descriptionId
+        }]
+      ],
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...otherProps,
+          ref,
+          className: classNames,
+          style: mergedStyles,
+          slot: slot != null ? slot : void 0,
+          "data-disabled": isDisabled,
+          children
+        }
+      )
+    }
+  );
+}
+var _RadioField = forwardRef(RadioField);
+_RadioField.displayName = "RadioField";
+
+export { GlobalRadioFieldCssSelector, _RadioField };

package/dist/chunk-BPM4ETTB.js

@@ -0,0 +1,35 @@
+import { __commonJS, __toESM } from './chunk-YSQDPG26.js';
+import { useLocalizedStringFormatter } from 'react-aria';
+
+// src/i18n/intl/en-US.json
+var require_en_US = __commonJS({
+  "src/i18n/intl/en-US.json"(exports, module) {
+    module.exports = {
+      "Button.spinnerAriaLabel": `Loading`,
+      "Input.charactersLeft": (args, formatter) => `${formatter.plural(args.charLeft, { "=0": `No characters left`, one: () => `${formatter.number(args.charLeft)} character left`, other: () => `${formatter.number(args.charLeft)} characters left` })}.`
+    };
+  }
+});
+
+// src/i18n/intl/fr-CA.json
+var require_fr_CA = __commonJS({
+  "src/i18n/intl/fr-CA.json"(exports, module) {
+    module.exports = {
+      "Button.spinnerAriaLabel": `Chargement en cours`,
+      "Input.charactersLeft": (args, formatter) => `${formatter.plural(args.charLeft, { "=0": `Aucun caract\xE8re restant`, one: () => `${formatter.number(args.charLeft)} caract\xE8re restant`, other: () => `${formatter.number(args.charLeft)} caract\xE8res restants` })}.`
+    };
+  }
+});
+
+// src/i18n/src/useLocalizedString.tsx
+var import_en_US = __toESM(require_en_US(), 1);
+var import_fr_CA = __toESM(require_fr_CA(), 1);
+var Resources = {
+  "en-US": import_en_US.default,
+  "fr-CA": import_fr_CA.default
+};
+function useLocalizedString() {
+  return useLocalizedStringFormatter(Resources, "@hopper-ui/components");
+}
+
+export { useLocalizedString };

package/dist/{chunk-QIOYM2XJ.js → chunk-DFUQTSEV.js}

@@ -1,14 +1,14 @@
-import { composeClassnameRenderProps } from './chunk-SEU4CGZD.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { SpinnerContext } from './chunk-4ZYV2XLW.js';
-import { _Label } from './chunk-XCKF6EU7.js';
-import { cssModule } from './chunk-6BEVZRUL.js';
+import { _Label } from './chunk-IYITZANI.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
 import { forwardRef } from 'react';
 import { useContextProps, ProgressBar } from 'react-aria-components';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-// src/Spinner/src/Spinner.module.css
-var Spinner_default = {};
+// css-module:./Spinner.module.css#css-module
+var Spinner_module_default = { "hop-Spinner": "Spinner-module__hop-Spinner___dv6Mx", "spin": "Spinner-module__spin___JyBzF", "hop-Spinner--sm": "Spinner-module__hop-Spinner--sm___UMVNX", "hop-Spinner--md": "Spinner-module__hop-Spinner--md___CkJxN", "hop-Spinner--lg": "Spinner-module__hop-Spinner--lg___Evi6W", "hop-Spinner__track": "Spinner-module__hop-Spinner__track___GfTjA", "hop-Spinner__fill": "Spinner-module__hop-Spinner__fill___v2YK9", "hop-Spinner__label": "Spinner-module__hop-Spinner__label___pDhxi" };
 var GlobalSpinnerCssSelector = "hop-Spinner";
 var SpinnerToLabelSizeAdapter = {
   sm: "xs",
@@ -31,8 +31,8 @@ var Spinner = (props, ref) => {
     className,
     GlobalSpinnerCssSelector,
     cssModule(
-      Spinner_default,
-      "hop-spinner",
+      Spinner_module_default,
+      "hop-Spinner",
       size
     ),
     stylingProps.className
@@ -45,8 +45,8 @@ var Spinner = (props, ref) => {
     _Label,
     {
       className: cssModule(
-        Spinner_default,
-        "hop-spinner__label"
+        Spinner_module_default,
+        "hop-Spinner__label"
       ),
       size: SpinnerToLabelSizeAdapter[size],
       children
@@ -65,8 +65,8 @@ var Spinner = (props, ref) => {
           "div",
           {
             className: cssModule(
-              Spinner_default,
-              "hop-spinner__track"
+              Spinner_module_default,
+              "hop-Spinner__track"
             )
           }
         ),
@@ -74,8 +74,8 @@ var Spinner = (props, ref) => {
           "div",
           {
             className: cssModule(
-              Spinner_default,
-              "hop-spinner__fill"
+              Spinner_module_default,
+              "hop-Spinner__fill"
             )
           }
         ),

package/dist/chunk-DGLAGYBD.js

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

package/dist/chunk-ESVVLTEN.js

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

package/dist/chunk-FU5CCPLP.js

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

package/dist/chunk-GXKSX5N5.js

@@ -0,0 +1,104 @@
+import { ChipContext } from './chunk-WTKIUAHI.js';
+import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
+import { _Text } from './chunk-M6UHXS6K.js';
+import { TextContext } from './chunk-OE5BLFZI.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { IconListContext } from './chunk-DHVVYSLB.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { IconContext } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps, DEFAULT_SLOT } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./Chip.module.css#css-module
+var Chip_module_default = { "hop-Chip": "Chip-module__hop-Chip___MIqOt", "hop-Chip--xs": "Chip-module__hop-Chip--xs___lupDe", "hop-Chip--sm": "Chip-module__hop-Chip--sm___n11aW", "hop-Chip--md": "Chip-module__hop-Chip--md___PRA24", "hop-Chip--lg": "Chip-module__hop-Chip--lg___qR9jZ", "hop-Chip--neutral": "Chip-module__hop-Chip--neutral___06cJi", "hop-Chip--progress": "Chip-module__hop-Chip--progress___h1HQQ", "hop-Chip--positive": "Chip-module__hop-Chip--positive___57ub5", "hop-Chip--caution": "Chip-module__hop-Chip--caution___ttdCf", "hop-Chip--negative": "Chip-module__hop-Chip--negative___OXcM5", "hop-Chip--option1": "Chip-module__hop-Chip--option1___wMtVM", "hop-Chip--option2": "Chip-module__hop-Chip--option2___ZQUGF", "hop-Chip--option3": "Chip-module__hop-Chip--option3___Bd35M", "hop-Chip--option4": "Chip-module__hop-Chip--option4___0-Byk", "hop-Chip--option5": "Chip-module__hop-Chip--option5___3tWr5", "hop-Chip--option6": "Chip-module__hop-Chip--option6___DV-En", "hop-Chip--inactive": "Chip-module__hop-Chip--inactive___JC531", "hop-Chip--disabled": "Chip-module__hop-Chip--disabled___Cmxru", "hop-Chip__icon": "Chip-module__hop-Chip__icon___SGRJQ", "hop-Chip__icon-list": "Chip-module__hop-Chip__icon-list___CEqWU", "hop-Chip__text": "Chip-module__hop-Chip__text___7QqU-", "hop-Chip__end-icon": "Chip-module__hop-Chip__end-icon___Ouwqs", "hop-Chip__end-icon-list": "Chip-module__hop-Chip__end-icon-list___whzI-" };
+var GlobalChipCssSelector = "hop-Chip";
+var ChipToTextSizeAdapter = {
+  xs: "xs",
+  sm: "xs",
+  md: "xs",
+  lg: "sm"
+};
+function Chip(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, ChipContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    size: sizeProp,
+    style,
+    slot,
+    variant = "neutral",
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const classNames = clsx(
+    className,
+    GlobalChipCssSelector,
+    cssModule(
+      Chip_module_default,
+      "hop-Chip",
+      size,
+      variant
+    ),
+    stylingProps.className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  const content = children && isTextOnlyChildren(children) ? /* @__PURE__ */ jsx(_Text, { children }) : children;
+  return /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [TextContext, {
+          className: Chip_module_default["hop-Chip__text"],
+          size: ChipToTextSizeAdapter[size]
+        }],
+        [IconListContext, {
+          slots: {
+            [DEFAULT_SLOT]: {
+              size: "sm",
+              className: Chip_module_default["hop-Chip__icon-list"]
+            },
+            "end-icon": {
+              size: "sm",
+              className: Chip_module_default["hop-Chip__end-icon-list"]
+            }
+          }
+        }],
+        [IconContext, {
+          slots: {
+            [DEFAULT_SLOT]: {
+              size: "sm",
+              className: Chip_module_default["hop-Chip__icon"]
+            },
+            "end-icon": {
+              size: "sm",
+              className: Chip_module_default["hop-Chip__end-icon"]
+            }
+          }
+        }]
+      ],
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          ...otherProps,
+          ref,
+          className: classNames,
+          style: mergedStyles,
+          slot: slot != null ? slot : void 0,
+          children: content
+        }
+      )
+    }
+  );
+}
+var _Chip = forwardRef(Chip);
+_Chip.displayName = "Chip";
+
+export { GlobalChipCssSelector, _Chip };

package/dist/chunk-H5YTU3U7.js

@@ -0,0 +1,20 @@
+import { useIsomorphicLayoutEffect } from '@hopper-ui/styled-system';
+import { useState, useRef, useCallback } from 'react';
+
+// src/utils/src/useSlot.ts
+function useSlot() {
+  const [hasSlot, setHasSlot] = useState(true);
+  const hasRun = useRef(false);
+  const ref = useCallback((el) => {
+    hasRun.current = true;
+    setHasSlot(!!el);
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    if (!hasRun.current) {
+      setHasSlot(false);
+    }
+  }, []);
+  return [ref, hasSlot];
+}
+
+export { useSlot };

package/dist/chunk-H7VJS4MX.js

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