// Bottom Sheet — Vendoo Design System  (BottomSheet)
// ─────────────────────────────────────────────────────────────────────────────
// The REAL component body, lifted VERBATIM from the design-system source
//   bottom-sheet/BottomSheet.jsx
// The published _ds_bundle.js predates this component and does not export it, so
// — exactly like SideSheet.jsx / UploadProgress.jsx / CircularProgress.jsx /
// ProgressBar.jsx / Steps.jsx — this file registers the export on
// window.VendooDesignSystem_a81b7b instead of using a top-level ESM `export`
// (the in-browser Babel transform rejects `export`). The playground renders this
// straight from the namespace; nothing is reimplemented.
//
// A surface anchored to the bottom edge that slides up to hold contextual content,
// pickers, or a sub-flow without leaving the page. A drag handle sits at the top
// (32×4, --sys-outline) and the body is a flexible CONTENT SLOT (children). Rounded
// at the top (28 / --radius-2xl), raised on --elev-3, set on --sys-surface-container-low.
// Set modal=true to dim the page behind a scrim (--sys-scrim @ 32%).
// Built on tokens.css; requires tokens.css. React is global.
// ─────────────────────────────────────────────────────────────────────────────
(function () {
  const React = window.React;
  const ns = (window.VendooDesignSystem_a81b7b = window.VendooDesignSystem_a81b7b || {});

  const VDS_BOTTOMSHEET_CSS = `
.vds-bsheet-scrim{ box-sizing:border-box; position:absolute; inset:0; display:flex;
  flex-direction:column; justify-content:flex-end; align-items:center;
  background:var(--sys-scrim,#000); background:color-mix(in srgb, var(--sys-scrim,#000) 32%, transparent); }

.vds-bsheet{ box-sizing:border-box; width:100%; max-width:640px; align-self:stretch;
  background:var(--sys-surface-container-low); border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;
  box-shadow:var(--elev-3); display:flex; flex-direction:column; overflow:hidden; text-align:left;
  font-family:"Lexend",system-ui,sans-serif; }
.vds-bsheet-scrim .vds-bsheet{ max-width:640px; }

/* drag handle — 36px area, 32×4 handle centered, 16px from the top */
.vds-bsheet__handle{ flex:none; display:flex; justify-content:center; align-items:flex-start;
  height:36px; padding-top:16px; }
.vds-bsheet__handle > span{ display:block; width:32px; height:4px; border-radius:var(--radius-full);
  background:var(--sys-outline); }
.vds-bsheet--no-handle .vds-bsheet__handle{ display:none; }

/* content slot — children mount here; scrolls when content overflows */
.vds-bsheet__content{ flex:1 1 auto; min-height:0; overflow:auto; display:flex; flex-direction:column;
  align-items:stretch; }
`;

  function vdsInjectCss(id, css) {
    if (typeof document === "undefined" || document.getElementById(id)) return;
    const s = document.createElement("style");
    s.id = id; s.textContent = css; document.head.appendChild(s);
  }

  function BottomSheet(props) {
    props = props || {};
    var modal = !!props.modal;
    var showHandle = props.showHandle !== false;

    vdsInjectCss("vds-bottomsheet-css", VDS_BOTTOMSHEET_CSS);

    var sheet = (
      <section
        className={"vds-bsheet" + (showHandle ? "" : " vds-bsheet--no-handle") + (props.className ? " " + props.className : "")}
        role={modal ? "dialog" : "complementary"}
        aria-modal={modal ? "true" : undefined}
        style={props.style}
      >
        <div className="vds-bsheet__handle" aria-hidden="true"><span></span></div>
        <div className="vds-bsheet__content">{props.children}</div>
      </section>
    );

    if (!modal) return sheet;
    return (
      <div className="vds-bsheet-scrim" onClick={props.onScrimClick}>
        {sheet}
      </div>
    );
  }

  ns.BottomSheet = BottomSheet;
})();