@eightshift/ui-components 6.3.0 → 7.0.0

package/dist/components/expandable/expandable.js

@@ -1,410 +1,108 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import $dbSRa$react__default, { useRef, useCallback, useEffect, forwardRef, useContext, createContext } from "react";
-import { RichLabel } from "../rich-label/rich-label.js";
+import { t as clsx } from "../../clsx-BUU5J41u.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
-import { Button } from "../button/button.js";
-import { icons } from "../../icons/icons.js";
-import { c as clsx } from "../../clsx-DgYk2OaC.js";
-import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-DtRmB6b8.js";
-import { d as $bdb11010cef70236$export$f680877a34711e37, m as $b5e257d569688ac6$export$535bd6ca7f90a273, c as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, $ as $64fa3d84918910a7$export$29f1550f4b0d4415, h as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a, n as $64fa3d84918910a7$export$c62b8e45d58ddad9, a as $64fa3d84918910a7$export$df3a06d6289f983e, b as $3ef42575df84b30b$export$9d1611c77c2fe928, l as $5dc95899b306f630$export$c9058316764c140e } from "../../utils-Cr3pLd9c.js";
-import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-eGTqWSTd.js";
-import { a as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../useHover-DkmPQdGE.js";
-import { r as reactDomExports } from "../../index-BL5gdWX4.js";
-import { $ as $e9faafb641e167db$export$90fc3a17d93f704c } from "../../useEvent-Bfy68GHZ.js";
-import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-B2glEZ25.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-_aSf9-8u.js";
-import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
-function $5e910fae8e128ead$export$6e3e27031a30522f(props, state, ref) {
-  let { isDisabled } = props;
-  let triggerId = $bdb11010cef70236$export$f680877a34711e37();
-  let panelId = $bdb11010cef70236$export$f680877a34711e37();
-  let isSSR = $b5e257d569688ac6$export$535bd6ca7f90a273();
-  let raf = useRef(null);
-  let handleBeforeMatch = useCallback(() => {
-    raf.current = requestAnimationFrame(() => {
-      if (ref.current) ref.current.setAttribute("hidden", "until-found");
-    });
-    reactDomExports.flushSync(() => {
-      state.toggle();
-    });
-  }, [
-    ref,
-    state
-  ]);
-  $e9faafb641e167db$export$90fc3a17d93f704c(ref, "beforematch", handleBeforeMatch);
-  let isExpandedRef = useRef(null);
-  $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
-    if (raf.current) cancelAnimationFrame(raf.current);
-    if (ref.current && !isSSR) {
-      let panel = ref.current;
-      if (isExpandedRef.current == null || typeof panel.getAnimations !== "function") {
-        if (state.isExpanded) {
-          panel.removeAttribute("hidden");
-          panel.style.setProperty("--disclosure-panel-width", "auto");
-          panel.style.setProperty("--disclosure-panel-height", "auto");
-        } else {
-          panel.setAttribute("hidden", "until-found");
-          panel.style.setProperty("--disclosure-panel-width", "0px");
-          panel.style.setProperty("--disclosure-panel-height", "0px");
-        }
-      } else if (state.isExpanded !== isExpandedRef.current) {
-        if (state.isExpanded) {
-          panel.removeAttribute("hidden");
-          panel.style.setProperty("--disclosure-panel-width", panel.scrollWidth + "px");
-          panel.style.setProperty("--disclosure-panel-height", panel.scrollHeight + "px");
-          Promise.all(panel.getAnimations().map((a) => a.finished)).then(() => {
-            panel.style.setProperty("--disclosure-panel-width", "auto");
-            panel.style.setProperty("--disclosure-panel-height", "auto");
-          }).catch(() => {
-          });
-        } else {
-          panel.style.setProperty("--disclosure-panel-width", panel.scrollWidth + "px");
-          panel.style.setProperty("--disclosure-panel-height", panel.scrollHeight + "px");
-          window.getComputedStyle(panel).height;
-          panel.style.setProperty("--disclosure-panel-width", "0px");
-          panel.style.setProperty("--disclosure-panel-height", "0px");
-          Promise.all(panel.getAnimations().map((a) => a.finished)).then(() => panel.setAttribute("hidden", "until-found")).catch(() => {
-          });
-        }
-      }
-      isExpandedRef.current = state.isExpanded;
-    }
-  }, [
-    isDisabled,
-    ref,
-    state.isExpanded,
-    isSSR
-  ]);
-  useEffect(() => {
-    return () => {
-      if (raf.current) cancelAnimationFrame(raf.current);
-    };
-  }, []);
-  return {
-    buttonProps: {
-      id: triggerId,
-      "aria-expanded": state.isExpanded,
-      "aria-controls": panelId,
-      onPress: (e) => {
-        if (!isDisabled && e.pointerType !== "keyboard") state.toggle();
-      },
-      isDisabled,
-      onPressStart(e) {
-        if (e.pointerType === "keyboard" && !isDisabled) state.toggle();
-      }
-    },
-    panelProps: {
-      id: panelId,
-      // This can be overridden at the panel element level.
-      role: "group",
-      "aria-labelledby": triggerId,
-      "aria-hidden": !state.isExpanded,
-      hidden: isSSR ? !state.isExpanded : void 0
-    }
-  };
-}
-function $bf996d45f4a36925$export$3fcbf6e4407997e0(props) {
-  let [isExpanded, setExpanded] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(props.isExpanded, props.defaultExpanded || false, props.onExpandedChange);
-  const expand = useCallback(() => {
-    setExpanded(true);
-  }, [
-    setExpanded
-  ]);
-  const collapse = useCallback(() => {
-    setExpanded(false);
-  }, [
-    setExpanded
-  ]);
-  const toggle = useCallback(() => {
-    setExpanded(!isExpanded);
-  }, [
-    setExpanded,
-    isExpanded
-  ]);
-  return {
-    isExpanded,
-    setExpanded,
-    expand,
-    collapse,
-    toggle
-  };
-}
-const $28f4fd908f0de97f$export$1d40e3e0cc4d5de = /* @__PURE__ */ createContext(null);
-const $28f4fd908f0de97f$export$d665dd135a51b28a = /* @__PURE__ */ createContext(null);
-const $28f4fd908f0de97f$export$dab3ea4a6ef094da = /* @__PURE__ */ createContext(null);
-const $28f4fd908f0de97f$var$InternalDisclosureContext = /* @__PURE__ */ createContext(null);
-const $28f4fd908f0de97f$export$74a362b31437ec83 = /* @__PURE__ */ forwardRef(function Disclosure(props, ref) {
-  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $28f4fd908f0de97f$export$d665dd135a51b28a);
-  let groupState = useContext($28f4fd908f0de97f$export$1d40e3e0cc4d5de);
-  let { id, ...otherProps } = props;
-  let defaultId = $bdb11010cef70236$export$f680877a34711e37();
-  id || (id = defaultId);
-  let isExpanded = groupState ? groupState.expandedKeys.has(id) : props.isExpanded;
-  let state = $bf996d45f4a36925$export$3fcbf6e4407997e0({
-    ...props,
-    isExpanded,
-    onExpandedChange(isExpanded2) {
-      var _props_onExpandedChange;
-      if (groupState) groupState.toggleKey(id);
-      (_props_onExpandedChange = props.onExpandedChange) === null || _props_onExpandedChange === void 0 ? void 0 : _props_onExpandedChange.call(props, isExpanded2);
-    }
-  });
-  let panelRef = $dbSRa$react__default.useRef(null);
-  let isDisabled = props.isDisabled || (groupState === null || groupState === void 0 ? void 0 : groupState.isDisabled) || false;
-  let { buttonProps, panelProps } = $5e910fae8e128ead$export$6e3e27031a30522f({
-    ...props,
-    isExpanded,
-    isDisabled
-  }, state, panelRef);
-  let { isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps } = $f7dceffc5ad7768b$export$4e328f61c538687f({
-    within: true
-  });
-  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
-    ...props,
-    id: void 0,
-    defaultClassName: "react-aria-Disclosure",
-    values: {
-      isExpanded: state.isExpanded,
-      isDisabled,
-      isFocusVisibleWithin,
-      state
-    }
-  });
-  let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(otherProps, {
-    global: true
-  });
-  return /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
-    values: [
-      [
-        $d2b4bc8c273e7be6$export$24d547caef80ccd1,
-        {
-          slots: {
-            [$64fa3d84918910a7$export$c62b8e45d58ddad9]: {},
-            trigger: buttonProps
-          }
-        }
-      ],
-      [
-        $28f4fd908f0de97f$var$InternalDisclosureContext,
-        {
-          panelProps,
-          panelRef
-        }
-      ],
-      [
-        $28f4fd908f0de97f$export$dab3ea4a6ef094da,
-        state
-      ]
-    ]
-  }, /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$df3a06d6289f983e.div, {
-    ...$3ef42575df84b30b$export$9d1611c77c2fe928(domProps, renderProps, focusWithinProps),
-    ref,
-    "data-expanded": state.isExpanded || void 0,
-    "data-disabled": isDisabled || void 0,
-    "data-focus-visible-within": isFocusVisibleWithin || void 0
-  }, renderProps.children));
-});
-const $28f4fd908f0de97f$export$feabaa331e1d464c = /* @__PURE__ */ forwardRef(function DisclosurePanel(props, ref) {
-  let { role = "group" } = props;
-  let { panelProps, panelRef } = useContext($28f4fd908f0de97f$var$InternalDisclosureContext);
-  let { isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps } = $f7dceffc5ad7768b$export$4e328f61c538687f({
-    within: true
-  });
-  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
-    ...props,
-    defaultClassName: "react-aria-DisclosurePanel",
-    values: {
-      isFocusVisibleWithin
-    }
-  });
-  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
-    global: true,
-    labelable: true
-  });
-  return /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$df3a06d6289f983e.div, {
-    ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, renderProps, panelProps, focusWithinProps),
-    ref: $5dc95899b306f630$export$c9058316764c140e(ref, panelRef),
-    role,
-    "data-focus-visible-within": isFocusVisibleWithin || void 0
-  }, /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
-    values: [
-      [
-        $d2b4bc8c273e7be6$export$24d547caef80ccd1,
-        null
-      ]
-    ]
-  }, props.children));
-});
+import { t as Button } from "../../button-COTeluL8.js";
+import { n as $28f4fd908f0de97f$export$feabaa331e1d464c, t as $28f4fd908f0de97f$export$74a362b31437ec83 } from "../../Disclosure-NYWFw9RJ.js";
+import { n as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-DFXXxMKY.js";
+import { RichLabel } from "../rich-label/rich-label.js";
+import { t as __ } from "../../build-module-sxK3nxOK.js";
+import { dropdownCaretAlt } from "../../icons/ui-icons/dropdown-caret-alt.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region lib/components/expandable/expandable.jsx
 /**
- * A component that allows hiding content in an expandable panel, to declutter the UI.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {JSX.Element} [props.icon] - Icon to display in the label.
- * @param {string} props.label - Label to display.
- * @param {string} [props.subtitle] - Subtitle to display.
- * @param {string} [props.className] - Classes to pass to the container.
- * @param {string} [props.contentClassName] - Classes to pass to the inner content outer wrapper.
- * @param {string} [props.contentWrapClassName] - Classes to pass to the inner content wrapper.
- * @param {string} [props.labelClassName] - Classes to pass to the label.
- * @param {string} [props.headerClassName] - Classes to pass to the header (label + trigger).
- * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display in the panel header, left of the expand button.
- * @param {boolean} [props.keepActionsOnExpand=false] - If `true`, the actions are not hidden when the panel is expanded.
- * @param {boolean} [props.disabled] - If `true`, the expand button is disabled.
- * @param {boolean} [props.open] - Whether the expandable is open.
- * @param {Function} [props.onOpenChange] - Function is called when the panel is opened or closed.
- * @param {object} [props.headerProps] - Props to pass to the header (label + trigger).
- * @param {JSX.Element} [props.customOpenButton] - Allows adding a custom open button. **IMPORTANT**: make sure to set `slot='trigger'` on the passed element!
- * @param {boolean} [props.standalone] - If `true`, component's border radius will not adapt to the surrounding components.
- * @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @returns {JSX.Element} The Expandable component.
- *
- * @example
- * <Expandable label='My component'>
- * 	...
- * </Expandable>
- *
- * @preserve
- */
-const Expandable = (props) => {
-  const {
-    icon,
-    label,
-    subtitle,
-    className,
-    labelClassName,
-    contentClassName,
-    contentWrapClassName,
-    headerClassName,
-    actions,
-    keepActionsOnExpand = false,
-    disabled,
-    noFocusHandling,
-    children,
-    open = false,
-    onOpenChange,
-    customOpenButton,
-    headerProps,
-    standalone,
-    flat,
-    hidden,
-    ...other
-  } = props;
-  const [isOpen, setIsOpen] = $dbSRa$react__default.useState(open);
-  if (isOpen && disabled) {
-    setIsOpen(false);
-  }
-  if (hidden) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(
-    $28f4fd908f0de97f$export$74a362b31437ec83,
-    {
-      isExpanded: isOpen,
-      className: clsx("es:text-sm", !standalone && "es:group", className),
-      ...other,
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: clsx(
-              "es:flex es:items-center es:gap-1 es:pr-1.25 es:py-1 es:pl-2.5",
-              standalone && "es:rounded-xl",
-              !standalone && "es:rounded-md es:group-first:rounded-t-xl es:group-after-current:rounded-t-xl",
-              "es:inset-ring",
-              "es:inset-shadow-xs",
-              isOpen && "es:bg-surface-100 es:inset-ring-surface-300/75 es:inset-shadow-surface-100/30",
-              isOpen && "es:rounded-b-md es:rounded-t-xl",
-              !isOpen && "es:bg-white es:bg-linear-to-b es:from-25% es:from-secondary-100/5 es:to-secondary-300/10 es:inset-ring-secondary-300/45 es:inset-shadow-secondary-200/50",
-              !isOpen && !standalone && "es:rounded-b-md es:group-last:rounded-b-xl es:group-before-current:rounded-b-xl",
-              !flat && "es:shadow-xs es:shadow-black/5",
-              "es:transition-plus es:duration-200 es:motion-ease-spring-bouncy",
-              headerClassName
-            ),
-            ...headerProps,
-            children: [
-              /* @__PURE__ */ jsx(
-                RichLabel,
-                {
-                  icon,
-                  label,
-                  subtitle,
-                  className: clsx("es:grow", labelClassName),
-                  as: $01b77f81d0f07f68$export$b04be29aa201d4f5
-                }
-              ),
-              actions && !keepActionsOnExpand && /* @__PURE__ */ jsx(
-                AnimatedVisibility,
-                {
-                  visible: !isOpen,
-                  className: "es:flex es:gap-1 es:shrink-0",
-                  transition: "scaleFade",
-                  decreaseBounce: true,
-                  noInitial: true,
-                  children: actions
-                }
-              ),
-              actions && keepActionsOnExpand && /* @__PURE__ */ jsx("div", { className: "es:flex es:gap-1 es:shrink-0", children: actions }),
-              customOpenButton && customOpenButton({
-                open: isOpen,
-                toggleOpen: () => {
-                  setIsOpen(!isOpen);
-                  if (onOpenChange) {
-                    onOpenChange(!isOpen);
-                  }
-                },
-                tooltip: isOpen ? __("Close", "eightshift-ui-components") : __("Open", "eightshift-ui-components"),
-                disabled
-              }),
-              !customOpenButton && /* @__PURE__ */ jsx(
-                Button,
-                {
-                  slot: "trigger",
-                  type: "ghost",
-                  icon: icons.dropdownCaretAlt,
-                  onPress: () => {
-                    setIsOpen(!isOpen);
-                    if (onOpenChange) {
-                      onOpenChange(!isOpen);
-                    }
-                  },
-                  tooltip: isOpen ? __("Close", "eightshift-ui-components") : __("Open", "eightshift-ui-components"),
-                  disabled,
-                  className: clsx(
-                    "es:icon:transition-plus es:ease-spring-bouncier es:duration-400",
-                    isOpen && "es:icon:-scale-y-100 es:icon:text-surface-600",
-                    !isOpen && "es:icon:text-secondary-500"
-                  ),
-                  size: "small"
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          $28f4fd908f0de97f$export$feabaa331e1d464c,
-          {
-            className: clsx(
-              "es:h-(--disclosure-panel-height)",
-              "es:opacity-0 es:blur-[1px] es:-translate-y-2",
-              !isOpen && "es:rounded-t-xl",
-              isOpen && "es:rounded-t-md es:opacity-100 es:*:motion-preset-fade-sm es:*:motion-delay-75 es:blur-none es:translate-y-1 es:mb-1",
-              "es:origin-top",
-              "es:bg-white es:rounded-b-xl es:inset-ring es:inset-ring-surface-200",
-              "es:inset-shadow-sm es:inset-shadow-accent-600/5",
-              !flat && "es:shadow-xs es:shadow-black/5",
-              "es:transition-plus-h",
-              contentClassName
-            ),
-            children: /* @__PURE__ */ jsx("div", { className: clsx("es:flex es:flex-col es:gap-2.5 es:px-3 es:py-3.5", contentWrapClassName), children })
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  Expandable
+* A component that allows hiding content in an expandable panel, to declutter the UI.
+*
+* @component
+* @param {Object} props - Component props.
+* @param {JSX.Element} [props.icon] - Icon to display in the label.
+* @param {string} props.label - Label to display.
+* @param {string} [props.subtitle] - Subtitle to display.
+* @param {string} [props.className] - Classes to pass to the container.
+* @param {string} [props.contentClassName] - Classes to pass to the inner content outer wrapper.
+* @param {string} [props.contentWrapClassName] - Classes to pass to the inner content wrapper.
+* @param {string} [props.labelClassName] - Classes to pass to the label.
+* @param {string} [props.headerClassName] - Classes to pass to the header (label + trigger).
+* @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display in the panel header, left of the expand button.
+* @param {boolean} [props.keepActionsOnExpand=false] - If `true`, the actions are not hidden when the panel is expanded.
+* @param {boolean} [props.disabled] - If `true`, the expand button is disabled.
+* @param {boolean} [props.open] - Whether the expandable is open.
+* @param {Function} [props.onOpenChange] - Function is called when the panel is opened or closed.
+* @param {object} [props.headerProps] - Props to pass to the header (label + trigger).
+* @param {JSX.Element} [props.customOpenButton] - Allows adding a custom open button. **IMPORTANT**: make sure to set `slot='trigger'` on the passed element!
+* @param {boolean} [props.standalone] - If `true`, component's border radius will not adapt to the surrounding components.
+* @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
+* @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+*
+* @returns {JSX.Element} The Expandable component.
+*
+* @example
+* <Expandable label='My component'>
+* 	...
+* </Expandable>
+*/
+var Expandable = (props) => {
+	const { icon, label, subtitle, className, labelClassName, contentClassName, contentWrapClassName, headerClassName, actions, keepActionsOnExpand = false, disabled, noFocusHandling, children, open = false, onOpenChange, customOpenButton, headerProps, standalone, flat, hidden, ...other } = props;
+	const [isOpen, setIsOpen] = React.useState(open);
+	if (isOpen && disabled) setIsOpen(false);
+	if (hidden) return null;
+	return jsxs($28f4fd908f0de97f$export$74a362b31437ec83, {
+		isExpanded: isOpen,
+		className: clsx("es:text-sm", !standalone && "es:group", className),
+		...other,
+		children: [jsxs("div", {
+			className: clsx("es:flex es:items-center es:gap-1 es:pr-1.25 es:py-1 es:pl-2.5", standalone && "es:rounded-xl", !standalone && "es:rounded-md es:group-first:rounded-t-xl es:group-after-current:rounded-t-xl", "es:inset-ring", "es:inset-shadow-xs", isOpen && "es:bg-surface-100 es:inset-ring-surface-300/75 es:inset-shadow-surface-100/30", isOpen && "es:rounded-b-md es:rounded-t-xl", !isOpen && "es:bg-white es:bg-linear-to-b es:from-25% es:from-secondary-100/5 es:to-secondary-300/10 es:inset-ring-secondary-300/45 es:inset-shadow-secondary-200/50", !isOpen && !standalone && "es:rounded-b-md es:group-last:rounded-b-xl es:group-before-current:rounded-b-xl", !flat && "es:shadow-xs es:shadow-black/5", "es:transition-plus es:duration-200 es:motion-ease-spring-bouncy", headerClassName),
+			...headerProps,
+			children: [
+				jsx(RichLabel, {
+					icon,
+					label,
+					subtitle,
+					className: clsx("es:grow", labelClassName),
+					as: $01b77f81d0f07f68$export$b04be29aa201d4f5
+				}),
+				actions && !keepActionsOnExpand && jsx(AnimatedVisibility, {
+					visible: !isOpen,
+					className: "es:flex es:gap-1 es:shrink-0",
+					transition: "scaleFade",
+					decreaseBounce: true,
+					noInitial: true,
+					children: actions
+				}),
+				actions && keepActionsOnExpand && jsx("div", {
+					className: "es:flex es:gap-1 es:shrink-0",
+					children: actions
+				}),
+				customOpenButton && customOpenButton({
+					open: isOpen,
+					toggleOpen: () => {
+						setIsOpen(!isOpen);
+						if (onOpenChange) onOpenChange(!isOpen);
+					},
+					tooltip: isOpen ? __("Close", "eightshift-ui-components") : __("Open", "eightshift-ui-components"),
+					disabled
+				}),
+				!customOpenButton && jsx(Button, {
+					slot: "trigger",
+					type: "ghost",
+					icon: dropdownCaretAlt,
+					onPress: () => {
+						setIsOpen(!isOpen);
+						if (onOpenChange) onOpenChange(!isOpen);
+					},
+					tooltip: isOpen ? __("Close", "eightshift-ui-components") : __("Open", "eightshift-ui-components"),
+					disabled,
+					className: clsx("es:icon:transition-plus es:ease-spring-bouncier es:duration-400", isOpen && "es:icon:-scale-y-100 es:icon:text-surface-600", !isOpen && "es:icon:text-secondary-500"),
+					size: "small"
+				})
+			]
+		}), jsx($28f4fd908f0de97f$export$feabaa331e1d464c, {
+			className: clsx("es:h-(--disclosure-panel-height)", "es:opacity-0 es:-translate-y-2", !isOpen && "es:rounded-t-xl", isOpen && "es:rounded-t-md es:opacity-100 es:*:motion-preset-fade-sm es:*:motion-delay-75 es:translate-y-1 es:mb-1", "es:origin-top", "es:bg-white es:rounded-b-xl es:inset-ring es:inset-ring-surface-200", "es:inset-shadow-sm es:inset-shadow-accent-600/5", !flat && "es:shadow-xs es:shadow-black/5", "es:transition-plus-h", contentClassName),
+			children: jsx("div", {
+				className: clsx("es:flex es:flex-col es:gap-2.5 es:px-3 es:py-3.5", contentWrapClassName),
+				children
+			})
+		})]
+	});
 };
+//#endregion
+export { Expandable };