@solostylist/ui-kit 1.0.87 → 1.0.89

package/dist/s-accordion/s-accordion.js

@@ -0,0 +1,924 @@
+import { j as s } from "../jsx-runtime-DywqP_6a.js";
+import { b as mo, u as K, s as T, c as L, a as Q, m as D } from "../createSvgIcon-DpVs_nKR.js";
+import * as l from "react";
+import { k as go, P as o, l as yo } from "../createTheme-DbdaZ0Ku.js";
+import { b as xo, u as ho, e as bo, d as I, c as To, B as Co } from "../ButtonBase-C0g54hXq.js";
+import { g as X } from "../generateUtilityClasses-BtVDwGrk.js";
+import { g as Y } from "../colorManipulator-ep5lERxB.js";
+import { u as vo } from "../useControlled-nm4pBabJ.js";
+import { T as So, u as Eo, g as ro, P as wo } from "../Paper-CH6cuu9i.js";
+import { S as Ro } from "../Stack-CIrlOUXL.js";
+import { T as Ao } from "../Typography-D-VP4V1G.js";
+const jo = mo(/* @__PURE__ */ s.jsx("path", {
+  d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+}), "ExpandMore");
+function Po(e) {
+  return Y("MuiCollapse", e);
+}
+X("MuiCollapse", ["root", "horizontal", "vertical", "entered", "hidden", "wrapper", "wrapperInner"]);
+const No = (e) => {
+  const {
+    orientation: t,
+    classes: r
+  } = e, i = {
+    root: ["root", `${t}`],
+    entered: ["entered"],
+    hidden: ["hidden"],
+    wrapper: ["wrapper", `${t}`],
+    wrapperInner: ["wrapperInner", `${t}`]
+  };
+  return Q(i, Po, r);
+}, Oo = T("div", {
+  name: "MuiCollapse",
+  slot: "Root",
+  overridesResolver: (e, t) => {
+    const {
+      ownerState: r
+    } = e;
+    return [t.root, t[r.orientation], r.state === "entered" && t.entered, r.state === "exited" && !r.in && r.collapsedSize === "0px" && t.hidden];
+  }
+})(D(({
+  theme: e
+}) => ({
+  height: 0,
+  overflow: "hidden",
+  transition: e.transitions.create("height"),
+  variants: [{
+    props: {
+      orientation: "horizontal"
+    },
+    style: {
+      height: "auto",
+      width: 0,
+      transition: e.transitions.create("width")
+    }
+  }, {
+    props: {
+      state: "entered"
+    },
+    style: {
+      height: "auto",
+      overflow: "visible"
+    }
+  }, {
+    props: {
+      state: "entered",
+      orientation: "horizontal"
+    },
+    style: {
+      width: "auto"
+    }
+  }, {
+    props: ({
+      ownerState: t
+    }) => t.state === "exited" && !t.in && t.collapsedSize === "0px",
+    style: {
+      visibility: "hidden"
+    }
+  }]
+}))), Mo = T("div", {
+  name: "MuiCollapse",
+  slot: "Wrapper"
+})({
+  // Hack to get children with a negative margin to not falsify the height computation.
+  display: "flex",
+  width: "100%",
+  variants: [{
+    props: {
+      orientation: "horizontal"
+    },
+    style: {
+      width: "auto",
+      height: "100%"
+    }
+  }]
+}), Io = T("div", {
+  name: "MuiCollapse",
+  slot: "WrapperInner"
+})({
+  width: "100%",
+  variants: [{
+    props: {
+      orientation: "horizontal"
+    },
+    style: {
+      width: "auto",
+      height: "100%"
+    }
+  }]
+}), J = /* @__PURE__ */ l.forwardRef(function(t, r) {
+  const i = K({
+    props: t,
+    name: "MuiCollapse"
+  }), {
+    addEndListener: p,
+    children: h,
+    className: b,
+    collapsedSize: f = "0px",
+    component: v,
+    easing: $,
+    in: S,
+    onEnter: A,
+    onEntered: j,
+    onEntering: z,
+    onExit: P,
+    onExited: W,
+    onExiting: k,
+    orientation: c = "vertical",
+    style: m,
+    timeout: d = go.standard,
+    // eslint-disable-next-line react/prop-types
+    TransitionComponent: N = So,
+    ...G
+  } = i, E = {
+    ...i,
+    orientation: c,
+    collapsedSize: f
+  }, u = No(E), w = Eo(), U = xo(), a = l.useRef(null), g = l.useRef(), C = typeof f == "number" ? `${f}px` : f, O = c === "horizontal", M = O ? "width" : "height", V = l.useRef(null), Z = ho(r, V), R = (n) => (y) => {
+    if (n) {
+      const x = V.current;
+      y === void 0 ? n(x) : n(x, y);
+    }
+  }, H = () => a.current ? a.current[O ? "clientWidth" : "clientHeight"] : 0, oo = R((n, y) => {
+    a.current && O && (a.current.style.position = "absolute"), n.style[M] = C, A && A(n, y);
+  }), eo = R((n, y) => {
+    const x = H();
+    a.current && O && (a.current.style.position = "");
+    const {
+      duration: B,
+      easing: q
+    } = ro({
+      style: m,
+      timeout: d,
+      easing: $
+    }, {
+      mode: "enter"
+    });
+    if (d === "auto") {
+      const no = w.transitions.getAutoHeightDuration(x);
+      n.style.transitionDuration = `${no}ms`, g.current = no;
+    } else
+      n.style.transitionDuration = typeof B == "string" ? B : `${B}ms`;
+    n.style[M] = `${x}px`, n.style.transitionTimingFunction = q, z && z(n, y);
+  }), co = R((n, y) => {
+    n.style[M] = "auto", j && j(n, y);
+  }), lo = R((n) => {
+    n.style[M] = `${H()}px`, P && P(n);
+  }), po = R(W), uo = R((n) => {
+    const y = H(), {
+      duration: x,
+      easing: B
+    } = ro({
+      style: m,
+      timeout: d,
+      easing: $
+    }, {
+      mode: "exit"
+    });
+    if (d === "auto") {
+      const q = w.transitions.getAutoHeightDuration(y);
+      n.style.transitionDuration = `${q}ms`, g.current = q;
+    } else
+      n.style.transitionDuration = typeof x == "string" ? x : `${x}ms`;
+    n.style[M] = C, n.style.transitionTimingFunction = B, k && k(n);
+  }), fo = (n) => {
+    d === "auto" && U.start(g.current || 0, n), p && p(V.current, n);
+  };
+  return /* @__PURE__ */ s.jsx(N, {
+    in: S,
+    onEnter: oo,
+    onEntered: co,
+    onEntering: eo,
+    onExit: lo,
+    onExited: po,
+    onExiting: uo,
+    addEndListener: fo,
+    nodeRef: V,
+    timeout: d === "auto" ? null : d,
+    ...G,
+    children: (n, {
+      ownerState: y,
+      ...x
+    }) => /* @__PURE__ */ s.jsx(Oo, {
+      as: v,
+      className: L(u.root, b, {
+        entered: u.entered,
+        exited: !S && C === "0px" && u.hidden
+      }[n]),
+      style: {
+        [O ? "minWidth" : "minHeight"]: C,
+        ...m
+      },
+      ref: Z,
+      ownerState: {
+        ...E,
+        state: n
+      },
+      ...x,
+      children: /* @__PURE__ */ s.jsx(Mo, {
+        ownerState: {
+          ...E,
+          state: n
+        },
+        className: u.wrapper,
+        ref: a,
+        children: /* @__PURE__ */ s.jsx(Io, {
+          ownerState: {
+            ...E,
+            state: n
+          },
+          className: u.wrapperInner,
+          children: h
+        })
+      })
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && (J.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Add a custom transition end trigger. Called with the transitioning DOM
+   * node and a done callback. Allows for more fine grained transition end
+   * logic. Note: Timeouts are still used as a fallback if provided.
+   */
+  addEndListener: o.func,
+  /**
+   * The content node to be collapsed.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * The width (horizontal) or height (vertical) of the container when collapsed.
+   * @default '0px'
+   */
+  collapsedSize: o.oneOfType([o.number, o.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: bo,
+  /**
+   * The transition timing function.
+   * You may specify a single easing or a object containing enter and exit values.
+   */
+  easing: o.oneOfType([o.shape({
+    enter: o.string,
+    exit: o.string
+  }), o.string]),
+  /**
+   * If `true`, the component will transition in.
+   */
+  in: o.bool,
+  /**
+   * @ignore
+   */
+  onEnter: o.func,
+  /**
+   * @ignore
+   */
+  onEntered: o.func,
+  /**
+   * @ignore
+   */
+  onEntering: o.func,
+  /**
+   * @ignore
+   */
+  onExit: o.func,
+  /**
+   * @ignore
+   */
+  onExited: o.func,
+  /**
+   * @ignore
+   */
+  onExiting: o.func,
+  /**
+   * The transition orientation.
+   * @default 'vertical'
+   */
+  orientation: o.oneOf(["horizontal", "vertical"]),
+  /**
+   * @ignore
+   */
+  style: o.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   *
+   * Set to 'auto' to automatically calculate transition time based on height.
+   * @default duration.standard
+   */
+  timeout: o.oneOfType([o.oneOf(["auto"]), o.number, o.shape({
+    appear: o.number,
+    enter: o.number,
+    exit: o.number
+  })])
+});
+J && (J.muiSupportAuto = !0);
+const to = /* @__PURE__ */ l.createContext({});
+process.env.NODE_ENV !== "production" && (to.displayName = "AccordionContext");
+function Do(e) {
+  return Y("MuiAccordion", e);
+}
+const _ = X("MuiAccordion", ["root", "heading", "rounded", "expanded", "disabled", "gutters", "region"]), $o = (e) => {
+  const {
+    classes: t,
+    square: r,
+    expanded: i,
+    disabled: p,
+    disableGutters: h
+  } = e;
+  return Q({
+    root: ["root", !r && "rounded", i && "expanded", p && "disabled", !h && "gutters"],
+    heading: ["heading"],
+    region: ["region"]
+  }, Do, t);
+}, zo = T(wo, {
+  name: "MuiAccordion",
+  slot: "Root",
+  overridesResolver: (e, t) => {
+    const {
+      ownerState: r
+    } = e;
+    return [{
+      [`& .${_.region}`]: t.region
+    }, t.root, !r.square && t.rounded, !r.disableGutters && t.gutters];
+  }
+})(D(({
+  theme: e
+}) => {
+  const t = {
+    duration: e.transitions.duration.shortest
+  };
+  return {
+    position: "relative",
+    transition: e.transitions.create(["margin"], t),
+    overflowAnchor: "none",
+    // Keep the same scrolling position
+    "&::before": {
+      position: "absolute",
+      left: 0,
+      top: -1,
+      right: 0,
+      height: 1,
+      content: '""',
+      opacity: 1,
+      backgroundColor: (e.vars || e).palette.divider,
+      transition: e.transitions.create(["opacity", "background-color"], t)
+    },
+    "&:first-of-type": {
+      "&::before": {
+        display: "none"
+      }
+    },
+    [`&.${_.expanded}`]: {
+      "&::before": {
+        opacity: 0
+      },
+      "&:first-of-type": {
+        marginTop: 0
+      },
+      "&:last-of-type": {
+        marginBottom: 0
+      },
+      "& + &": {
+        "&::before": {
+          display: "none"
+        }
+      }
+    },
+    [`&.${_.disabled}`]: {
+      backgroundColor: (e.vars || e).palette.action.disabledBackground
+    }
+  };
+}), D(({
+  theme: e
+}) => ({
+  variants: [{
+    props: (t) => !t.square,
+    style: {
+      borderRadius: 0,
+      "&:first-of-type": {
+        borderTopLeftRadius: (e.vars || e).shape.borderRadius,
+        borderTopRightRadius: (e.vars || e).shape.borderRadius
+      },
+      "&:last-of-type": {
+        borderBottomLeftRadius: (e.vars || e).shape.borderRadius,
+        borderBottomRightRadius: (e.vars || e).shape.borderRadius,
+        // Fix a rendering issue on Edge
+        "@supports (-ms-ime-align: auto)": {
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0
+        }
+      }
+    }
+  }, {
+    props: (t) => !t.disableGutters,
+    style: {
+      [`&.${_.expanded}`]: {
+        margin: "16px 0"
+      }
+    }
+  }]
+}))), Wo = T("h3", {
+  name: "MuiAccordion",
+  slot: "Heading"
+})({
+  all: "unset"
+}), ko = T("div", {
+  name: "MuiAccordion",
+  slot: "Region"
+})({}), so = /* @__PURE__ */ l.forwardRef(function(t, r) {
+  const i = K({
+    props: t,
+    name: "MuiAccordion"
+  }), {
+    children: p,
+    className: h,
+    defaultExpanded: b = !1,
+    disabled: f = !1,
+    disableGutters: v = !1,
+    expanded: $,
+    onChange: S,
+    square: A = !1,
+    slots: j = {},
+    slotProps: z = {},
+    TransitionComponent: P,
+    TransitionProps: W,
+    ...k
+  } = i, [c, m] = vo({
+    controlled: $,
+    default: b,
+    name: "Accordion",
+    state: "expanded"
+  }), d = l.useCallback((eo) => {
+    m(!c), S && S(eo, !c);
+  }, [c, S, m]), [N, ...G] = l.Children.toArray(p), E = l.useMemo(() => ({
+    expanded: c,
+    disabled: f,
+    disableGutters: v,
+    toggle: d
+  }), [c, f, v, d]), u = {
+    ...i,
+    square: A,
+    disabled: f,
+    disableGutters: v,
+    expanded: c
+  }, w = $o(u), U = {
+    transition: P,
+    ...j
+  }, a = {
+    transition: W,
+    ...z
+  }, g = {
+    slots: U,
+    slotProps: a
+  }, [C, O] = I("root", {
+    elementType: zo,
+    externalForwardedProps: {
+      ...g,
+      ...k
+    },
+    className: L(w.root, h),
+    shouldForwardComponentProp: !0,
+    ownerState: u,
+    ref: r,
+    additionalProps: {
+      square: A
+    }
+  }), [M, V] = I("heading", {
+    elementType: Wo,
+    externalForwardedProps: g,
+    className: w.heading,
+    ownerState: u
+  }), [Z, R] = I("transition", {
+    elementType: J,
+    externalForwardedProps: g,
+    ownerState: u
+  }), [H, oo] = I("region", {
+    elementType: ko,
+    externalForwardedProps: g,
+    ownerState: u,
+    className: w.region,
+    additionalProps: {
+      "aria-labelledby": N.props.id,
+      id: N.props["aria-controls"],
+      role: "region"
+    }
+  });
+  return /* @__PURE__ */ s.jsxs(C, {
+    ...O,
+    children: [/* @__PURE__ */ s.jsx(M, {
+      ...V,
+      children: /* @__PURE__ */ s.jsx(to.Provider, {
+        value: E,
+        children: N
+      })
+    }), /* @__PURE__ */ s.jsx(Z, {
+      in: c,
+      timeout: "auto",
+      ...R,
+      children: /* @__PURE__ */ s.jsx(H, {
+        ...oo,
+        children: G
+      })
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (so.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: To(o.node.isRequired, (e) => {
+    const t = l.Children.toArray(e.children)[0];
+    return yo.isFragment(t) ? new Error("MUI: The Accordion doesn't accept a Fragment as a child. Consider providing an array instead.") : /* @__PURE__ */ l.isValidElement(t) ? null : new Error("MUI: Expected the first child of Accordion to be a valid element.");
+  }),
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * If `true`, expands the accordion by default.
+   * @default false
+   */
+  defaultExpanded: o.bool,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: o.bool,
+  /**
+   * If `true`, it removes the margin between two expanded accordion items and the increase of height.
+   * @default false
+   */
+  disableGutters: o.bool,
+  /**
+   * If `true`, expands the accordion, otherwise collapse it.
+   * Setting this prop enables control over the accordion.
+   */
+  expanded: o.bool,
+  /**
+   * Callback fired when the expand/collapse state is changed.
+   *
+   * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
+   * @param {boolean} expanded The `expanded` state of the accordion.
+   */
+  onChange: o.func,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: o.shape({
+    heading: o.oneOfType([o.func, o.object]),
+    region: o.oneOfType([o.func, o.object]),
+    root: o.oneOfType([o.func, o.object]),
+    transition: o.oneOfType([o.func, o.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: o.shape({
+    heading: o.elementType,
+    region: o.elementType,
+    root: o.elementType,
+    transition: o.elementType
+  }),
+  /**
+   * If `true`, rounded corners are disabled.
+   * @default false
+   */
+  square: o.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
+  /**
+   * The component used for the transition.
+   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @deprecated Use `slots.transition` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  TransitionComponent: o.elementType,
+  /**
+   * Props applied to the transition element.
+   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
+   * @deprecated Use `slotProps.transition` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  TransitionProps: o.object
+});
+function Vo(e) {
+  return Y("MuiAccordionDetails", e);
+}
+X("MuiAccordionDetails", ["root"]);
+const Fo = (e) => {
+  const {
+    classes: t
+  } = e;
+  return Q({
+    root: ["root"]
+  }, Vo, t);
+}, Go = T("div", {
+  name: "MuiAccordionDetails",
+  slot: "Root"
+})(D(({
+  theme: e
+}) => ({
+  padding: e.spacing(1, 2, 2)
+}))), io = /* @__PURE__ */ l.forwardRef(function(t, r) {
+  const i = K({
+    props: t,
+    name: "MuiAccordionDetails"
+  }), {
+    className: p,
+    ...h
+  } = i, b = i, f = Fo(b);
+  return /* @__PURE__ */ s.jsx(Go, {
+    className: L(f.root, p),
+    ref: r,
+    ownerState: b,
+    ...h
+  });
+});
+process.env.NODE_ENV !== "production" && (io.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object])
+});
+function Uo(e) {
+  return Y("MuiAccordionSummary", e);
+}
+const F = X("MuiAccordionSummary", ["root", "expanded", "focusVisible", "disabled", "gutters", "contentGutters", "content", "expandIconWrapper"]), Ho = (e) => {
+  const {
+    classes: t,
+    expanded: r,
+    disabled: i,
+    disableGutters: p
+  } = e;
+  return Q({
+    root: ["root", r && "expanded", i && "disabled", !p && "gutters"],
+    focusVisible: ["focusVisible"],
+    content: ["content", r && "expanded", !p && "contentGutters"],
+    expandIconWrapper: ["expandIconWrapper", r && "expanded"]
+  }, Uo, t);
+}, Bo = T(Co, {
+  name: "MuiAccordionSummary",
+  slot: "Root"
+})(D(({
+  theme: e
+}) => {
+  const t = {
+    duration: e.transitions.duration.shortest
+  };
+  return {
+    display: "flex",
+    width: "100%",
+    minHeight: 48,
+    padding: e.spacing(0, 2),
+    transition: e.transitions.create(["min-height", "background-color"], t),
+    [`&.${F.focusVisible}`]: {
+      backgroundColor: (e.vars || e).palette.action.focus
+    },
+    [`&.${F.disabled}`]: {
+      opacity: (e.vars || e).palette.action.disabledOpacity
+    },
+    [`&:hover:not(.${F.disabled})`]: {
+      cursor: "pointer"
+    },
+    variants: [{
+      props: (r) => !r.disableGutters,
+      style: {
+        [`&.${F.expanded}`]: {
+          minHeight: 64
+        }
+      }
+    }]
+  };
+})), Lo = T("span", {
+  name: "MuiAccordionSummary",
+  slot: "Content"
+})(D(({
+  theme: e
+}) => ({
+  display: "flex",
+  textAlign: "start",
+  flexGrow: 1,
+  margin: "12px 0",
+  variants: [{
+    props: (t) => !t.disableGutters,
+    style: {
+      transition: e.transitions.create(["margin"], {
+        duration: e.transitions.duration.shortest
+      }),
+      [`&.${F.expanded}`]: {
+        margin: "20px 0"
+      }
+    }
+  }]
+}))), qo = T("span", {
+  name: "MuiAccordionSummary",
+  slot: "ExpandIconWrapper"
+})(D(({
+  theme: e
+}) => ({
+  display: "flex",
+  color: (e.vars || e).palette.action.active,
+  transform: "rotate(0deg)",
+  transition: e.transitions.create("transform", {
+    duration: e.transitions.duration.shortest
+  }),
+  [`&.${F.expanded}`]: {
+    transform: "rotate(180deg)"
+  }
+}))), ao = /* @__PURE__ */ l.forwardRef(function(t, r) {
+  const i = K({
+    props: t,
+    name: "MuiAccordionSummary"
+  }), {
+    children: p,
+    className: h,
+    expandIcon: b,
+    focusVisibleClassName: f,
+    onClick: v,
+    slots: $,
+    slotProps: S,
+    ...A
+  } = i, {
+    disabled: j = !1,
+    disableGutters: z,
+    expanded: P,
+    toggle: W
+  } = l.useContext(to), k = (a) => {
+    W && W(a), v && v(a);
+  }, c = {
+    ...i,
+    expanded: P,
+    disabled: j,
+    disableGutters: z
+  }, m = Ho(c), d = {
+    slots: $,
+    slotProps: S
+  }, [N, G] = I("root", {
+    ref: r,
+    shouldForwardComponentProp: !0,
+    className: L(m.root, h),
+    elementType: Bo,
+    externalForwardedProps: {
+      ...d,
+      ...A
+    },
+    ownerState: c,
+    additionalProps: {
+      focusRipple: !1,
+      disableRipple: !0,
+      disabled: j,
+      "aria-expanded": P,
+      focusVisibleClassName: L(m.focusVisible, f)
+    },
+    getSlotProps: (a) => ({
+      ...a,
+      onClick: (g) => {
+        var C;
+        (C = a.onClick) == null || C.call(a, g), k(g);
+      }
+    })
+  }), [E, u] = I("content", {
+    className: m.content,
+    elementType: Lo,
+    externalForwardedProps: d,
+    ownerState: c
+  }), [w, U] = I("expandIconWrapper", {
+    className: m.expandIconWrapper,
+    elementType: qo,
+    externalForwardedProps: d,
+    ownerState: c
+  });
+  return /* @__PURE__ */ s.jsxs(N, {
+    ...G,
+    children: [/* @__PURE__ */ s.jsx(E, {
+      ...u,
+      children: p
+    }), b && /* @__PURE__ */ s.jsx(w, {
+      ...U,
+      children: b
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (ao.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * The icon to display as the expand indicator.
+   */
+  expandIcon: o.node,
+  /**
+   * This prop can help identify which element has keyboard focus.
+   * The class name will be applied when the element gains the focus through keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
+   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+   * if needed.
+   */
+  focusVisibleClassName: o.string,
+  /**
+   * @ignore
+   */
+  onClick: o.func,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: o.shape({
+    content: o.oneOfType([o.func, o.object]),
+    expandIconWrapper: o.oneOfType([o.func, o.object]),
+    root: o.oneOfType([o.func, o.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: o.shape({
+    content: o.elementType,
+    expandIconWrapper: o.elementType,
+    root: o.elementType
+  }),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object])
+});
+const ne = ({ title: e, children: t, startIcon: r, defaultExpanded: i = !1 }) => /* @__PURE__ */ s.jsxs(
+  so,
+  {
+    defaultExpanded: i,
+    sx: {
+      borderRadius: 1,
+      border: "1px solid var(--s-palette-divider) !important",
+      backgroundColor: "background.paper"
+    },
+    variant: "elevation",
+    children: [
+      /* @__PURE__ */ s.jsx(ao, { expandIcon: /* @__PURE__ */ s.jsx(jo, {}), children: /* @__PURE__ */ s.jsxs(Ro, { direction: "row", spacing: 1, alignItems: "center", children: [
+        r && /* @__PURE__ */ s.jsx("span", { children: r }),
+        /* @__PURE__ */ s.jsx(Ao, { variant: "subtitle1", fontWeight: 600, children: e })
+      ] }) }),
+      /* @__PURE__ */ s.jsx(io, { children: t })
+    ]
+  }
+);
+export {
+  ne as default
+};