@hopper-ui/components 1.5.11 → 1.5.13

package/dist/chunk-6HPTG4I7.js

@@ -0,0 +1,89 @@
+import { SegmentedControlContext, InternalSegmentedControlContext } from './chunk-6BJLSAMM.js';
+import { SegmentedControlItemContext } from './chunk-VS3PE4S6.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef, useContext, useRef, useEffect } from 'react';
+import { useContextProps, ToggleGroupStateContext, ToggleButtonGroup, Provider } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./SegmentedControl.module.css#css-module
+var SegmentedControl_module_default = { "hop-SegmentedControl": "SegmentedControl-module__hop-SegmentedControl___5byAE" };
+var GlobalSegmentedControlCssSelector = "hop-SegmentedControl";
+var SegmentedControl = (props, ref) => {
+  [props, ref] = useContextProps(props, ref, SegmentedControlContext);
+  const state = useContext(ToggleGroupStateContext);
+  const prevRef = useRef(null);
+  const currentSelectedRef = useRef(null);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    style,
+    slot,
+    defaultSelectedKey,
+    selectedKey,
+    onSelectionChange,
+    size,
+    isJustified,
+    ...otherProps
+  } = ownProps;
+  const classNames = clsx(
+    GlobalSegmentedControlCssSelector,
+    cssModule(
+      SegmentedControl_module_default,
+      "hop-SegmentedControl"
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...style,
+    ...stylingProps.style
+  };
+  const onChange = (values) => {
+    const [firstKey] = values;
+    if (!firstKey) {
+      return;
+    }
+    if (currentSelectedRef.current) {
+      prevRef.current = currentSelectedRef.current.getBoundingClientRect();
+    }
+    onSelectionChange == null ? void 0 : onSelectionChange(firstKey);
+  };
+  useEffect(() => {
+    const key = defaultSelectedKey != null ? defaultSelectedKey : selectedKey;
+    if (key) {
+      state == null ? void 0 : state.toggleKey(key);
+    }
+  }, []);
+  return /* @__PURE__ */ jsx(
+    ToggleButtonGroup,
+    {
+      ref,
+      className: classNames,
+      style: mergedStyles,
+      slot: slot != null ? slot : void 0,
+      orientation: "horizontal",
+      onSelectionChange: onChange,
+      selectedKeys: selectedKey != null ? [selectedKey] : void 0,
+      defaultSelectedKeys: defaultSelectedKey != null ? [defaultSelectedKey] : void 0,
+      disallowEmptySelection: true,
+      ...otherProps,
+      children: /* @__PURE__ */ jsx(
+        Provider,
+        {
+          values: [
+            [SegmentedControlItemContext, { size, isDisabled: otherProps.isDisabled }],
+            [InternalSegmentedControlContext, { prevRef, currentSelectedRef, isJustified }]
+          ],
+          children
+        }
+      )
+    }
+  );
+};
+var _SegmentedControl = forwardRef(SegmentedControl);
+_SegmentedControl.displayName = "SegmentedControl";
+
+export { GlobalSegmentedControlCssSelector, _SegmentedControl };

package/dist/chunk-6KB3ZPEX.js

@@ -0,0 +1,112 @@
+import { TooltipTrigger } from './chunk-DCO4XGBI.js';
+import { _Tooltip } from './chunk-3M3OPDB5.js';
+import { AvatarGroupContext } from './chunk-G7F2YUBR.js';
+import { AvatarContext } from './chunk-FA26RZSE.js';
+import { _Text } from './chunk-LKH3JL3P.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef, Children, cloneElement } from 'react';
+import { useContextProps } from 'react-aria-components';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// css-module:./AvatarGroup.module.css#css-module
+var AvatarGroup_module_default = { "hop-AvatarGroup": "AvatarGroup-module__hop-AvatarGroup___FhKgG", "hop-AvatarGroup--wrap": "AvatarGroup-module__hop-AvatarGroup--wrap___rmF0R", "hop-AvatarGroup--xs": "AvatarGroup-module__hop-AvatarGroup--xs___6rX3i", "hop-AvatarGroup--sm": "AvatarGroup-module__hop-AvatarGroup--sm___mNYCK", "hop-AvatarGroup--md": "AvatarGroup-module__hop-AvatarGroup--md___sZmok", "hop-AvatarGroup--lg": "AvatarGroup-module__hop-AvatarGroup--lg___-LL--", "hop-AvatarGroup--xl": "AvatarGroup-module__hop-AvatarGroup--xl___2A1SI", "hop-AvatarGroup--2xl": "AvatarGroup-module__hop-AvatarGroup--2xl___JYYzg", "hop-AvatarGroup__avatar": "AvatarGroup-module__hop-AvatarGroup__avatar___t-Itl", "hop-AvatarGroup__label": "AvatarGroup-module__hop-AvatarGroup__label___4pukU", "hop-AvatarGroup__hiddenAvatar": "AvatarGroup-module__hop-AvatarGroup__hiddenAvatar___RYlpt", "hop-AvatarGroup--start": "AvatarGroup-module__hop-AvatarGroup--start___31YZA", "hop-AvatarGroup--end": "AvatarGroup-module__hop-AvatarGroup--end___kkekx", "hop-AvatarGroup--center": "AvatarGroup-module__hop-AvatarGroup--center___8fiMN" };
+var GlobalAvatarGroupCssSelector = "hop-AvatarGroup";
+function AvatarGroup(props, ref) {
+  var _a, _b, _c, _d;
+  [props, ref] = useContextProps(props, ref, AvatarGroupContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children,
+    style,
+    slot,
+    maxNumberOfAvatar: maxNumberOfAvatarProp,
+    size: sizeProp,
+    wrap: wrapProp,
+    reverse,
+    align: alignProp,
+    ...otherProps
+  } = ownProps;
+  let avatars = Children.toArray(children);
+  if (reverse) {
+    avatars = avatars.reverse();
+  }
+  const align = (_a = useResponsiveValue(alignProp)) != null ? _a : "start";
+  const size = (_b = useResponsiveValue(sizeProp)) != null ? _b : "md";
+  const wrap = (_c = useResponsiveValue(wrapProp)) != null ? _c : true;
+  const maxNumberOfAvatar = (_d = useResponsiveValue(maxNumberOfAvatarProp)) != null ? _d : 3;
+  const classNames = clsx(
+    GlobalAvatarGroupCssSelector,
+    cssModule(
+      AvatarGroup_module_default,
+      GlobalAvatarGroupCssSelector,
+      size,
+      wrap && "wrap",
+      align
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = {
+    ...style,
+    ...stylingProps.style
+  };
+  const shownAvatars = avatars.slice(0, maxNumberOfAvatar);
+  const hiddenAvatars = avatars.slice(maxNumberOfAvatar);
+  const numberOfHiddenAvatars = hiddenAvatars.length;
+  const getAvatarName = ({ props: possibleAvatarProps }) => {
+    var _a2, _b2;
+    let name = (_a2 = possibleAvatarProps["aria-label"]) != null ? _a2 : possibleAvatarProps["aria-labelledby"];
+    if (isAvatarProps(possibleAvatarProps)) {
+      name = (_b2 = possibleAvatarProps.name) != null ? _b2 : name;
+    }
+    return name;
+  };
+  const shownAvatarsMarkup = shownAvatars.map((avatar, index) => {
+    var _a2;
+    const name = getAvatarName(avatar);
+    const uniqueKey = (_a2 = avatar.key) != null ? _a2 : `${name}-${index}-${size}`;
+    return /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
+      cloneElement(avatar, { ...avatar.props, size, className: AvatarGroup_module_default["hop-AvatarGroup__avatar"] }),
+      /* @__PURE__ */ jsx(_Tooltip, { children: name })
+    ] }, uniqueKey);
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      ref,
+      slot: slot != null ? slot : void 0,
+      className: classNames,
+      style: mergedStyles,
+      ...otherProps,
+      children: [
+        shownAvatarsMarkup,
+        numberOfHiddenAvatars > 0 && /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
+          /* @__PURE__ */ jsxs("span", { className: AvatarGroup_module_default["hop-AvatarGroup__label"], children: [
+            "+",
+            numberOfHiddenAvatars
+          ] }),
+          /* @__PURE__ */ jsx(_Tooltip, { children: /* @__PURE__ */ jsx(AvatarContext.Provider, { value: { size: "xs" }, children: hiddenAvatars.map((avatar, index) => {
+            var _a2;
+            const name = getAvatarName(avatar);
+            const uniqueKey = (_a2 = avatar.key) != null ? _a2 : `${name}-${index}-${size}`;
+            return /* @__PURE__ */ jsxs("div", { role: "button", className: AvatarGroup_module_default["hop-AvatarGroup__hiddenAvatar"], children: [
+              avatar,
+              /* @__PURE__ */ jsx(_Text, { children: name })
+            ] }, uniqueKey);
+          }) }) })
+        ] })
+      ]
+    }
+  );
+}
+var _AvatarGroup = forwardRef(AvatarGroup);
+_AvatarGroup.displayName = "AvatarGroup";
+function isAvatarProps(props) {
+  return "name" in props;
+}
+
+export { GlobalAvatarGroupCssSelector, _AvatarGroup };

package/dist/chunk-77PD5K3M.js

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

package/dist/chunk-AAMIUZW2.js

@@ -0,0 +1,41 @@
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { createContext, forwardRef } from 'react';
+import { useContextProps, Input as Input$1 } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./Input.module.css#css-module
+var Input_module_default = { "hop-Input": "Input-module__hop-Input___Om8I4", "hop-Input--sm": "Input-module__hop-Input--sm___rPpIJ" };
+var InputContext = createContext({});
+var Input = forwardRef(function Input2(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, InputContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const { className, size: sizeProp, style, ...otherProps } = ownProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const classNames = clsx(
+    className,
+    cssModule(
+      Input_module_default,
+      "hop-Input",
+      size
+    ),
+    stylingProps.className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    Input$1,
+    {
+      ...otherProps,
+      ref,
+      className: classNames,
+      style: mergedStyles
+    }
+  );
+});
+
+export { Input, InputContext };

package/dist/chunk-AB4BRU6Z.js

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

package/dist/chunk-AJKN2ALX.js

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

package/dist/chunk-AQ5PVP2O.js

@@ -0,0 +1,77 @@
+import { TileContext } from './chunk-S7KMOXY2.js';
+import { _Text } from './chunk-LKH3JL3P.js';
+import { TextContext } from './chunk-ZNOU2CGM.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { CheckmarkIcon } from '@hopper-ui/icons';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, ToggleButton, Provider } from 'react-aria-components';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// css-module:./Tile.module.css#css-module
+var Tile_module_default = { "hop-Tile": "Tile-module__hop-Tile___b-zie", "hop-Tile__icon": "Tile-module__hop-Tile__icon___fdn-s" };
+var GlobalTileCssSelector = "hop-Tile";
+var Tile = (props, ref) => {
+  [props, ref] = useContextProps(props, ref, TileContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children: childrenProp,
+    style,
+    isDisabled,
+    slot,
+    ...otherProps
+  } = ownProps;
+  const classNames = composeClassnameRenderProps(
+    GlobalTileCssSelector,
+    cssModule(
+      Tile_module_default,
+      "hop-Tile"
+    ),
+    stylingProps.className,
+    className
+  );
+  const mergedStyles = composeRenderProps(style, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const childrenFn = composeRenderProps(childrenProp, (prev) => {
+    return prev;
+  });
+  return /* @__PURE__ */ jsx(
+    ToggleButton,
+    {
+      ...otherProps,
+      isDisabled,
+      ref,
+      className: classNames,
+      style: mergedStyles,
+      slot: slot != null ? slot : void 0,
+      children: (renderProps) => {
+        const children = childrenFn(renderProps);
+        return /* @__PURE__ */ jsxs(
+          Provider,
+          {
+            values: [
+              [TextContext, {
+                size: "md",
+                className: Tile_module_default["hop-Tile__text"]
+              }]
+            ],
+            children: [
+              typeof children === "string" ? /* @__PURE__ */ jsx(_Text, { children }) : children,
+              /* @__PURE__ */ jsx(CheckmarkIcon, { className: Tile_module_default["hop-Tile__icon"] })
+            ]
+          }
+        );
+      }
+    }
+  );
+};
+var _Tile = forwardRef(Tile);
+_Tile.displayName = "Tile";
+
+export { GlobalTileCssSelector, _Tile };

package/dist/chunk-BAQO6H5D.js

@@ -0,0 +1,217 @@
+import { _SelectValue } from './chunk-27MSAOIK.js';
+import { SelectContext } from './chunk-ZOTXNUAV.js';
+import { _Popover } from './chunk-WCUPQIIB.js';
+import { _ListBox } from './chunk-ONWB6QY6.js';
+import { _ListBoxItem } from './chunk-MSIFNLMK.js';
+import { _ListBoxSection } from './chunk-PN5BRTOO.js';
+import { _Footer } from './chunk-VOZN65OL.js';
+import { _ToggleArrow } from './chunk-5UAXAY5Z.js';
+import { _Label } from './chunk-SA322LHS.js';
+import { _HelperMessage } from './chunk-HANWII4T.js';
+import { _ErrorMessage } from './chunk-CFXK2ZSA.js';
+import { BadgeContext } from './chunk-ZSFJVMJN.js';
+import { useFormProps } from './chunk-YMTZYK3U.js';
+import { ensureTextWrapper } from './chunk-WPIH4OAE.js';
+import { ClearContainerSlots, ClearProviders } from './chunk-WJ55ZV54.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, TextContext as TextContext$1, ButtonContext, Select as Select$1, Button } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// css-module:./Select.module.css#css-module
+var Select_module_default = { "hop-Select": "Select-module__hop-Select___C6Ihr", "hop-Select--fluid": "Select-module__hop-Select--fluid___-yinh", "hop-Select__label": "Select-module__hop-Select__label___kaP4i", "hop-Select__button": "Select-module__hop-Select__button___KJyGz", "hop-Select__button--sm": "Select-module__hop-Select__button--sm___7LDNq", "hop-Select__button--md": "Select-module__hop-Select__button--md___oqtFx", "hop-Select__prefix": "Select-module__hop-Select__prefix___NLbL2", "hop-Select__button-icon": "Select-module__hop-Select__button-icon___XBGTe", "hop-Select__helper-message": "Select-module__hop-Select__helper-message___-9Whj", "hop-Select__error-message": "Select-module__hop-Select__error-message___0U3wX" };
+var GlobalSelectCssSelector = "hop-Select";
+function Select(props, ref) {
+  var _a, _b, _c, _d;
+  [props, ref] = useContextProps(props, ref, SelectContext);
+  props = useFormProps(props);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    align: alignProp,
+    className,
+    children,
+    description,
+    direction: directionProp,
+    errorMessage,
+    footer,
+    isAutoMenuWidth,
+    isFluid: isFluidProp,
+    isInvalid,
+    isLoading,
+    isRequired,
+    items,
+    label,
+    listBoxProps,
+    necessityIndicator,
+    onLoadMore,
+    popoverProps,
+    prefix,
+    renderValue,
+    selectionIndicator,
+    shouldFlip,
+    size: sizeProp,
+    style: styleProp,
+    triggerProps,
+    ...otherProps
+  } = ownProps;
+  const { stylingProps: triggerStylingProps, ...triggerOwnProps } = useStyledSystem(triggerProps != null ? triggerProps : {});
+  const {
+    className: triggerClassName,
+    style: triggerStyleProp,
+    ...otherTriggerProps
+  } = triggerOwnProps;
+  const size = (_a = useResponsiveValue(sizeProp)) != null ? _a : "md";
+  const isFluid = (_b = useResponsiveValue(isFluidProp)) != null ? _b : false;
+  const align = (_c = useResponsiveValue(alignProp)) != null ? _c : "start";
+  const direction = (_d = useResponsiveValue(directionProp)) != null ? _d : "bottom";
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalSelectCssSelector,
+    cssModule(
+      Select_module_default,
+      "hop-Select",
+      isFluid && "fluid",
+      size
+    ),
+    stylingProps.className
+  );
+  const buttonClassNames = composeClassnameRenderProps(
+    triggerClassName,
+    cssModule(
+      Select_module_default,
+      "hop-Select__button",
+      size
+    ),
+    triggerStylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const triggerStyle = composeRenderProps(triggerStyleProp, (prev) => {
+    return {
+      ...triggerStylingProps.style,
+      ...prev
+    };
+  });
+  const prefixMarkup = prefix ? /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [TextContext, { size, className: Select_module_default["hop-Select__prefix"] }],
+        [IconContext, { size, className: Select_module_default["hop-Select__prefix"] }]
+      ],
+      children: /* @__PURE__ */ jsx(ClearContainerSlots, { children: ensureTextWrapper(prefix) })
+    }
+  ) : null;
+  const footerMarkup = footer ? /* @__PURE__ */ jsx(
+    ClearProviders,
+    {
+      values: [
+        TextContext$1,
+        TextContext,
+        ButtonContext
+      ],
+      children: /* @__PURE__ */ jsx(
+        SlotProvider,
+        {
+          values: [
+            [TextContext, {
+              size
+            }]
+          ],
+          children: /* @__PURE__ */ jsx(_Footer, { children: ensureTextWrapper(footer) })
+        }
+      )
+    }
+  ) : null;
+  return /* @__PURE__ */ jsx(
+    Select$1,
+    {
+      ref,
+      className: classNames,
+      style,
+      isInvalid,
+      isRequired,
+      ...otherProps,
+      children: (selectRenderProps) => {
+        const { isOpen } = selectRenderProps;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          label && /* @__PURE__ */ jsx(
+            _Label,
+            {
+              className: Select_module_default["hop-Select__label"],
+              isRequired,
+              necessityIndicator,
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            _Popover,
+            {
+              isAutoWidth: isAutoMenuWidth,
+              isNonDialog: true,
+              placement: `${direction} ${align}`,
+              shouldFlip,
+              ...popoverProps,
+              children: [
+                /* @__PURE__ */ jsx(
+                  SlotProvider,
+                  {
+                    values: [
+                      [BadgeContext, {
+                        variant: "secondary"
+                      }]
+                    ],
+                    children: /* @__PURE__ */ jsx(
+                      _ListBox,
+                      {
+                        size,
+                        isInvalid,
+                        items,
+                        isLoading,
+                        onLoadMore,
+                        selectionIndicator,
+                        ...listBoxProps,
+                        children
+                      }
+                    )
+                  }
+                ),
+                footerMarkup
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(Button, { className: buttonClassNames, style: triggerStyle, "data-invalid": isInvalid || void 0, ...otherTriggerProps, children: [
+            prefixMarkup,
+            /* @__PURE__ */ jsx(_SelectValue, { size, children: (valueRenderProps) => {
+              return renderValue == null ? void 0 : renderValue(valueRenderProps);
+            } }),
+            /* @__PURE__ */ jsx(
+              _ToggleArrow,
+              {
+                className: Select_module_default["hop-Select__button-icon"],
+                isExpanded: isOpen
+              }
+            )
+          ] }),
+          description && /* @__PURE__ */ jsx(_HelperMessage, { className: Select_module_default["hop-Select__helper-message"], children: description }),
+          /* @__PURE__ */ jsx(_ErrorMessage, { className: Select_module_default["hop-Select__error-message"], children: errorMessage })
+        ] });
+      }
+    }
+  );
+}
+var _Select = forwardRef(Select);
+_Select.displayName = "Select";
+var SelectItem = _ListBoxItem;
+var SelectSection = _ListBoxSection;
+
+export { GlobalSelectCssSelector, SelectItem, SelectSection, _Select };

package/dist/chunk-BBFLIS2N.js

@@ -0,0 +1,76 @@
+import { DisclosureHeaderContext } from './chunk-CPAFY34U.js';
+import { DisclosureContext } from './chunk-U4HRZ6DN.js';
+import { DisclosurePanelContext } from './chunk-5XY5L6ZN.js';
+import { AccordionContext } from './chunk-NF64YIEZ.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import { forwardRef } from 'react';
+import { useContextProps, composeRenderProps, DisclosureGroup } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./Accordion.module.css#css-module
+var Accordion_module_default = { "hop-Accordion": "Accordion-module__hop-Accordion___YeXY1", "hop-Accordion--inline": "Accordion-module__hop-Accordion--inline___HWuwa", "hop-Accordion__disclosure": "Accordion-module__hop-Accordion__disclosure___pY4Ya", "hop-Accordion__disclosure-header": "Accordion-module__hop-Accordion__disclosure-header___87pmH", "hop-Accordion__disclosure-panel": "Accordion-module__hop-Accordion__disclosure-panel___nN3bU" };
+var GlobalAccordionCssSelector = "hop-Accordion";
+function Accordion(props, ref) {
+  [props, ref] = useContextProps(props, ref, AccordionContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    children: childrenProp,
+    style: styleProp,
+    variant = "standalone",
+    ...otherProps
+  } = ownProps;
+  const classNames = composeClassnameRenderProps(
+    className,
+    GlobalAccordionCssSelector,
+    cssModule(
+      Accordion_module_default,
+      "hop-Accordion",
+      variant
+    ),
+    stylingProps.className
+  );
+  const style = composeRenderProps(styleProp, (prev) => {
+    return {
+      ...stylingProps.style,
+      ...prev
+    };
+  });
+  const children = composeRenderProps(childrenProp, (prev) => {
+    return prev;
+  });
+  return /* @__PURE__ */ jsx(
+    DisclosureGroup,
+    {
+      ref,
+      className: classNames,
+      style,
+      ...otherProps,
+      children: (accordionRenderProps) => /* @__PURE__ */ jsx(
+        SlotProvider,
+        {
+          values: [
+            [DisclosureContext, {
+              className: Accordion_module_default["hop-Accordion__disclosure"],
+              variant: "inline"
+            }],
+            [DisclosureHeaderContext, {
+              className: Accordion_module_default["hop-Accordion__disclosure-header"]
+            }],
+            [DisclosurePanelContext, {
+              className: Accordion_module_default["hop-Accordion__disclosure-panel"]
+            }]
+          ],
+          children: children(accordionRenderProps)
+        }
+      )
+    }
+  );
+}
+var _Accordion = forwardRef(Accordion);
+_Accordion.displayName = "Accordion";
+
+export { GlobalAccordionCssSelector, _Accordion };

package/dist/chunk-BDNN5DKK.js

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