@konstructio/ui 0.1.2-alpha.103 → 0.1.2-alpha.104

package/dist/components/DateRangePicker/components/CalendarPanel/hooks/useTogetherCarousel.js

@@ -1,108 +1,90 @@
-import { r as z } from "../../../../../constants-DXrF9vV4.js";
-import { calculateCalendarHeight as B, getNextMonth as g, getPrevMonth as A, getWeeksInMonth as J } from "../utils/index.js";
-import { useCallback as F, useEffect as R, useMemo as K, useRef as b, useState as l } from "react";
-var y = ({ displayedMonths: u, animationDuration: W, disabled: c, canNavigatePrev: _, canNavigateNext: q, navigationMode: C, navigatePrevMonth: D, navigateNextMonth: E }) => {
-  const [n, a] = l(null), [t, m] = l(!1), [s, i] = l(!1), [k, S] = l(!0), [r, d] = l(u), f = b(null), p = b(!0), H = 291, G = A(A(r[0])), I = A(r[0]), h = r[0], T = r[1], x = g(r[1]), P = g(g(r[1])), w = K(() => {
-    let e;
-    return t && n === "left" ? e = [T, x] : t && n === "right" ? e = [I, h] : e = [h, T], B(Math.max(...e.map(J)));
+import { r as w } from "../../../../../constants-CxJJRVK3.js";
+import { calculateCalendarHeight as L, getNextMonth as T, getPrevMonth as g, getWeeksInMonth as X } from "../utils/index.js";
+import { useEffect as A, useMemo as $, useRef as q, useState as a } from "react";
+var Y = ({ displayedMonths: l, animationDuration: H, disabled: I, canNavigatePrev: D, canNavigateNext: E, navigationMode: N, navigatePrevMonth: S, navigateNextMonth: b }) => {
+  const [n, u] = a(null), [e, c] = a(!1), [o, i] = a(!1), [p, F] = a(!0), [r, P] = a(l), f = q(null), R = q(!0), W = 291, C = g(g(r[0])), M = g(r[0]), h = r[0], m = r[1], d = T(r[1]), O = T(T(r[1])), v = $(() => {
+    let t;
+    return e && n === "left" ? t = [m, d] : e && n === "right" ? t = [M, h] : t = [h, m], L(Math.max(...t.map(X)));
   }, [
-    t,
+    e,
     n,
     h,
-    T,
-    x,
-    I
-  ]), L = 6 * 259 + 160, M = -2 * 291;
-  R(() => {
-    if (C !== "independent") {
-      if (p.current) {
-        p.current = !1;
+    m,
+    d,
+    M
+  ]), G = 6 * 259 + 160, x = -2 * 291;
+  return A(() => {
+    if (N !== "independent") {
+      if (R.current) {
+        R.current = !1;
         return;
       }
-      if (!t) {
-        const e = r[0].getTime(), o = u[0].getTime();
-        if (e !== o) {
-          const j = o - e, O = Math.round(j / z);
-          Math.abs(O) === 1 ? (a(O > 0 ? "left" : "right"), m(!0), i(!1)) : d(u);
+      if (!e) {
+        const t = r[0].getTime(), s = l[0].getTime();
+        if (t !== s) {
+          const k = s - t, _ = Math.round(k / w);
+          Math.abs(_) === 1 ? (u(_ > 0 ? "left" : "right"), c(!0), i(!1)) : P(l);
         }
       }
     }
   }, [
-    u,
+    l,
     r,
-    t,
-    C
-  ]), R(() => {
-    t && !s && n && (f.current && f.current.offsetHeight, requestAnimationFrame(() => {
+    e,
+    N
+  ]), A(() => {
+    e && !o && n && (f.current && f.current.offsetHeight, requestAnimationFrame(() => {
       i(!0);
     }));
   }, [
-    t,
-    s,
+    e,
+    o,
     n
-  ]), R(() => {
-    if (t && s) {
-      const e = setTimeout(() => {
-        S(!1), requestAnimationFrame(() => {
-          f.current && f.current.offsetHeight, d((o) => n === "left" ? [o[1], g(o[1])] : [A(o[0]), o[0]]), m(!1), a(null), i(!1), requestAnimationFrame(() => {
+  ]), A(() => {
+    if (e && o) {
+      const t = setTimeout(() => {
+        F(!1), requestAnimationFrame(() => {
+          f.current && f.current.offsetHeight, P((s) => n === "left" ? [s[1], T(s[1])] : [g(s[0]), s[0]]), c(!1), u(null), i(!1), requestAnimationFrame(() => {
             requestAnimationFrame(() => {
-              S(!0);
+              F(!0);
             });
           });
         });
-      }, W);
-      return () => clearTimeout(e);
+      }, H);
+      return () => clearTimeout(t);
     }
   }, [
-    t,
-    s,
-    W,
+    e,
+    o,
+    H,
     n
-  ]);
-  const N = F(() => {
-    t || c || !_ || (a("right"), m(!0), i(!1), D());
-  }, [
-    t,
-    c,
-    _,
-    D
-  ]), X = F(() => {
-    t || c || !q || (a("left"), m(!0), i(!1), E());
-  }, [
-    t,
-    c,
-    q,
-    E
-  ]), $ = F(() => {
-    let e = M;
-    return t && s && (n === "left" ? e = M - H : n === "right" && (e = M + H)), `translateX(${e}px)`;
-  }, [
-    M,
-    t,
-    s,
-    n,
-    H
-  ]);
-  return {
+  ]), {
     carouselRef: f,
-    isAnimating: t,
-    enableTransition: k,
-    animateTransform: s,
-    calendarHeight: w,
-    carouselTotalWidth: L,
+    isAnimating: e,
+    enableTransition: p,
+    animateTransform: o,
+    calendarHeight: v,
+    carouselTotalWidth: G,
     monthsToRender: [
-      G,
-      I,
+      C,
+      M,
       h,
-      T,
-      x,
-      P
+      m,
+      d,
+      O
     ],
-    handlePrevMonth: N,
-    handleNextMonth: X,
-    getTransform: $
+    handlePrevMonth: () => {
+      e || I || !D || (u("right"), c(!0), i(!1), S());
+    },
+    handleNextMonth: () => {
+      e || I || !E || (u("left"), c(!0), i(!1), b());
+    },
+    getTransform: () => {
+      let t = x;
+      return e && o && (n === "left" ? t = x - W : n === "right" && (t = x + W)), `translateX(${t}px)`;
+    }
   };
 };
 export {
-  y as useTogetherCarousel
+  Y as useTogetherCarousel
 };

package/dist/components/DateRangePicker/components/CalendarPanel/utils/index.js

@@ -1,4 +1,4 @@
-import "../../../../../constants-DXrF9vV4.js";
+import "../../../../../constants-CxJJRVK3.js";
 var E = (t) => {
   const e = t.getFullYear(), a = t.getMonth(), n = new Date(e, a, 1), r = new Date(e, a + 1, 0), o = n.getDay() + r.getDate();
   return Math.ceil(o / 7);

package/dist/components/DateRangePicker/components/DateTimeInputs/components/EndInputFields/EndInputFields.js

@@ -1,4 +1,4 @@
-import { t as I } from "../../../../../../Input-CW0VwW2T.js";
+import { t as I } from "../../../../../../Input-Cf44DzfE.js";
 import { t as r } from "../../../../../../utils-Cx-WzRZF.js";
 import { Typography as p } from "../../../../../Typography/Typography.js";
 import { TimePicker as g } from "../../../../../TimePicker/TimePicker.js";

package/dist/components/DateRangePicker/components/DateTimeInputs/components/StartInputFields/StartInputFields.js

@@ -1,4 +1,4 @@
-import { t as I } from "../../../../../../Input-CW0VwW2T.js";
+import { t as I } from "../../../../../../Input-Cf44DzfE.js";
 import { t as r } from "../../../../../../utils-Cx-WzRZF.js";
 import { Typography as n } from "../../../../../Typography/Typography.js";
 import { TimePicker as g } from "../../../../../TimePicker/TimePicker.js";

package/dist/components/DateRangePicker/components/DateTimeInputs/hooks/useDateTimeInputs.js

@@ -1,179 +1,146 @@
-import { useDateRangePicker as $ } from "../../../contexts/date-range-picker.hook.js";
-import { isDateSelectable as C } from "../../../utils/disabled-dates.js";
-import { autoFormatDateInput as B, combineDateAndTime as j, formatDateToDisplayString as T, formatDateToString as P, parseDateString as i, parseDisplayDateString as g } from "../../../utils/validation.js";
-import { useCallback as f, useEffect as q, useMemo as k, useRef as z, useState as R } from "react";
-var et = ({ errorInvalidDate: E, errorDateNotAvailable: V, errorStartAfterEnd: F, errorEndBeforeStart: b }) => {
-  const { range: t, time: u, timeFormat: G, showTime: J, name: K, disabled: L, blockedDays: w, blockedMonths: x, minDate: H, maxDate: M, setRange: n, setTime: y } = $(), c = k(() => ({
-    blockedDays: w,
-    blockedMonths: x,
-    minDate: H,
-    maxDate: M
-  }), [
-    w,
-    x,
-    H,
-    M
-  ]), v = z(!1), h = z(!1), [o, D] = R(() => T(t.from)), [s, p] = R(() => T(t.to)), [O, m] = R(), [Q, l] = R();
-  q(() => {
-    v.current || D(T(t.from));
-  }, [t.from]), q(() => {
-    h.current || p(T(t.to));
+import { useDateRangePicker as Z } from "../../../contexts/date-range-picker.hook.js";
+import { isDateSelectable as E } from "../../../utils/disabled-dates.js";
+import { autoFormatDateInput as P, combineDateAndTime as R, formatDateToDisplayString as D, formatDateToString as V, parseDateString as n, parseDisplayDateString as p } from "../../../utils/validation.js";
+import { useCallback as k, useEffect as F, useMemo as w, useRef as x, useState as b } from "react";
+var et = ({ errorInvalidDate: y, errorDateNotAvailable: C, errorStartAfterEnd: B, errorEndBeforeStart: H }) => {
+  const { range: t, time: o, timeFormat: M, showTime: I, name: j, disabled: q, blockedDays: z, blockedMonths: A, minDate: G, maxDate: J, setRange: i, setTime: h } = Z(), S = {
+    blockedDays: z,
+    blockedMonths: A,
+    minDate: G,
+    maxDate: J
+  }, v = x(!1), T = x(!1), [d, m] = b(() => D(t.from)), [u, l] = b(() => D(t.to)), [K, c] = b(), [L, f] = b();
+  F(() => {
+    v.current || m(D(t.from));
+  }, [t.from]), F(() => {
+    T.current || l(D(t.to));
   }, [t.to]);
-  const U = f(() => {
-    if (v.current = !0, m(void 0), t.from) D(P(t.from));
+  const O = () => {
+    if (v.current = !0, c(void 0), t.from) m(V(t.from));
     else {
-      const e = i(o) || g(o);
-      e && D(P(e));
+      const e = n(d) || p(d);
+      e && m(V(e));
     }
-  }, [t.from, o]), W = f((e) => {
-    const d = e.target.value, r = B(d, o);
-    D(r), m(void 0);
-    const a = i(r);
-    if (a && C(a, c)) {
-      const S = t.to || i(s) || g(s);
-      if (S && a > S) return;
-      n({
+  }, Q = (e) => {
+    const s = e.target.value, r = P(s, d);
+    m(r), c(void 0);
+    const a = n(r);
+    if (a && E(a, S)) {
+      const g = t.to || n(u) || p(u);
+      if (g && a > g) return;
+      i({
         ...t,
         from: a
       });
     }
-  }, [
-    o,
-    s,
-    t,
-    n,
-    c
-  ]), X = f((e) => {
-    const d = e.currentTarget.value.trim();
-    if (d === "") {
-      v.current = !1, m(void 0), D(""), n({
+  }, U = (e) => {
+    const s = e.currentTarget.value.trim();
+    if (s === "") {
+      v.current = !1, c(void 0), m(""), i({
         ...t,
         from: void 0
       });
       return;
     }
-    const r = i(d);
+    const r = n(s);
     if (!r) {
-      m(E);
+      c(y);
       return;
     }
-    if (!C(r, c)) {
-      m(V);
+    if (!E(r, S)) {
+      c(C);
       return;
     }
-    const a = i(s) || g(s);
+    const a = n(u) || p(u);
     if (a && r > a) {
-      m(F), h.current = !0, n({
+      c(B), T.current = !0, i({
         from: void 0,
         to: void 0
       });
       return;
     }
-    v.current = !1, m(void 0), n({
+    v.current = !1, c(void 0), i({
       ...t,
       from: r
-    }), D(T(r));
-  }, [
-    t,
-    n,
-    c,
-    E,
-    V,
-    F,
-    s
-  ]), Y = f(() => {
-    if (h.current = !0, l(void 0), t.to) p(P(t.to));
+    }), m(D(r));
+  }, W = () => {
+    if (T.current = !0, f(void 0), t.to) l(V(t.to));
     else {
-      const e = i(s) || g(s);
-      e && p(P(e));
+      const e = n(u) || p(u);
+      e && l(V(e));
     }
-  }, [t.to, s]), Z = f((e) => {
-    const d = e.target.value, r = B(d, s);
-    p(r), l(void 0);
-    const a = i(r);
-    if (a && C(a, c)) {
-      const S = t.from || i(o) || g(o);
-      if (S && a < S) return;
-      n({
+  }, X = (e) => {
+    const s = e.target.value, r = P(s, u);
+    l(r), f(void 0);
+    const a = n(r);
+    if (a && E(a, S)) {
+      const g = t.from || n(d) || p(d);
+      if (g && a < g) return;
+      i({
         ...t,
         to: a
       });
     }
-  }, [
-    s,
-    o,
-    t,
-    n,
-    c
-  ]), _ = f((e) => {
-    const d = e.currentTarget.value.trim();
-    if (d === "") {
-      h.current = !1, l(void 0), p(""), n({
+  }, Y = (e) => {
+    const s = e.currentTarget.value.trim();
+    if (s === "") {
+      T.current = !1, f(void 0), l(""), i({
         ...t,
         to: void 0
       });
       return;
     }
-    const r = i(d);
+    const r = n(s);
     if (!r) {
-      l(E);
+      f(y);
       return;
     }
-    if (!C(r, c)) {
-      l(V);
+    if (!E(r, S)) {
+      f(C);
       return;
     }
-    const a = i(o) || g(o);
+    const a = n(d) || p(d);
     if (a && r < a) {
-      l(b), v.current = !0, n({
+      f(H), v.current = !0, i({
         from: void 0,
         to: void 0
       });
       return;
     }
-    h.current = !1, l(void 0), n({
+    T.current = !1, f(void 0), i({
       ...t,
       to: r
-    }), p(T(r));
-  }, [
-    t,
-    n,
-    c,
-    E,
-    V,
-    b,
-    o
-  ]);
+    }), l(D(r));
+  };
   return {
-    timeFormat: G,
-    showTime: J,
-    name: K,
-    disabled: L,
-    time: u,
-    startDateValue: o,
-    startDateError: O,
-    handleStartDateFocus: U,
-    handleStartDateChange: W,
-    handleStartDateBlur: X,
-    handleStartTimeChange: f((e) => {
-      y({
-        ...u,
+    timeFormat: M,
+    showTime: I,
+    name: j,
+    disabled: q,
+    time: o,
+    startDateValue: d,
+    startDateError: K,
+    handleStartDateFocus: O,
+    handleStartDateChange: Q,
+    handleStartDateBlur: U,
+    handleStartTimeChange: k((e) => {
+      h({
+        ...o,
         startTime: e
       });
-    }, [u, y]),
-    endDateValue: s,
-    endDateError: Q,
-    handleEndDateFocus: Y,
-    handleEndDateChange: Z,
-    handleEndDateBlur: _,
-    handleEndTimeChange: f((e) => {
-      y({
-        ...u,
+    }, [o, h]),
+    endDateValue: u,
+    endDateError: L,
+    handleEndDateFocus: W,
+    handleEndDateChange: X,
+    handleEndDateBlur: Y,
+    handleEndTimeChange: k((e) => {
+      h({
+        ...o,
         endTime: e
       });
-    }, [u, y]),
-    startHiddenValue: k(() => j(t.from, u.startTime), [t.from, u.startTime]),
-    endHiddenValue: k(() => j(t.to, u.endTime), [t.to, u.endTime])
+    }, [o, h]),
+    startHiddenValue: w(() => R(t.from, o.startTime), [t.from, o.startTime]),
+    endHiddenValue: w(() => R(t.to, o.endTime), [t.to, o.endTime])
   };
 };
 export {

package/dist/components/Datepicker/DatePicker.js

@@ -4,29 +4,29 @@ import { t as f } from "../../chevron-right-CDwgDdp-.js";
 import { t as p } from "../../DayPicker-kweJz134.js";
 import { datePickerVariants as k } from "./DatePicker.variants.js";
 import '../../style.css';/* empty css                   */
-import { useCallback as g, useState as w } from "react";
+import { useState as g } from "react";
 import { jsx as a } from "react/jsx-runtime";
-var y = ({ className: l, showOutsideDays: n = !0, animate: d = !0, arrowClassName: s, monthsClassName: i, defaultSelected: m, onSelect: o, ...u }) => {
-  const [c, x] = w(() => m), b = g((e) => {
-    e && (x(e), o?.(e));
-  }, [o]);
+var w = ({ className: o, showOutsideDays: l = !0, animate: n = !0, arrowClassName: d, monthsClassName: s, defaultSelected: i, onSelect: m, ...u }) => {
+  const [c, x] = g(() => i), b = (e) => {
+    e && (x(e), m?.(e));
+  };
   return /* @__PURE__ */ a(p, {
-    className: t(k({ className: l })),
-    animate: d,
+    className: t(k({ className: o })),
+    animate: n,
     mode: "single",
     selected: c,
     onSelect: b,
-    showOutsideDays: n,
+    showOutsideDays: l,
     role: "dialog",
     "aria-label": "Datepicker",
     classNames: {
       chevron: t("cursor-pointer", "text-slate-500", "w-5", "h-5", "text-slate-500", "w-4", "h-4", "dark:text-metal-200"),
-      day_button: t("h-[30px]", "aria-selected:opacity-100", "font-semibold", "hover:rounded-full", "cursor-pointer", "rounded-full", "w-[30px]"),
+      day_button: t("h-7.5", "aria-selected:opacity-100", "font-semibold", "hover:rounded-full", "cursor-pointer", "rounded-full", "w-7.5"),
       day: "text-center text-sm leading-5",
       month_caption: t("text-slate-700", "font-semibold", "text-sm", "pl-1", "h-8", "flex", "items-center", "dark:text-white"),
-      months: t("flex", "flex-col", "relative", "px-5", "py-4", "rounded-lg", "shadow-md", "px-6", "py-4", "w-[307px]", "justify-center", "items-center", "border", "border-transparent", "dark:bg-metal-800", "dark:border-metal-700", i),
+      months: t("flex", "flex-col", "relative", "px-5", "py-4", "rounded-lg", "shadow-md", "px-6", "py-4", "w-[307px]", "justify-center", "items-center", "border", "border-transparent", "dark:bg-metal-800", "dark:border-metal-700", s),
       month: "flex flex-col gap-4",
-      nav: t("absolute", "right-4", "top-3.5", "flex", "justify-center", "items-center", "gap-1", s),
+      nav: t("absolute", "right-4", "top-3.5", "flex", "justify-center", "items-center", "gap-1", d),
       outside: "text-slate-400 dark:text-metal-500",
       selected: t("[&>button]:bg-blue-600", "[&>button]:text-white", "[&>button]:hover:bg-blue-700", "[&>button]:transition-all", "[&>button]:duration-300", "[&>button]:rounded-full", "dark:[&>button]:bg-aurora-500", "dark:[&>button]:hover:bg-aurora-500", "dark:[&>button]:text-metal-900"),
       weekdays: "text-slate-500 dark:text-metal-300",
@@ -45,7 +45,7 @@ var y = ({ className: l, showOutsideDays: n = !0, animate: d = !0, arrowClassNam
     ...u
   });
 };
-y.displayName = "KonstructDatePicker";
+w.displayName = "KonstructDatePicker";
 export {
-  y as DatePicker
+  w as DatePicker
 };

package/dist/components/Drawer/Drawer.js

@@ -1,76 +1,81 @@
 "use client";
-import { t as z } from "../../x-BI9jmc7e.js";
-import { t as B } from "../../dist-CTvBzxW8.js";
+import { t as g } from "../../x-BI9jmc7e.js";
+import { t as z } from "../../dist-DX0sBG3Q.js";
 import { t as o } from "../../utils-Cx-WzRZF.js";
-import { t as C } from "../../Combination-cjXRJS03.js";
-import { DrawerContext as F } from "./contexts/Drawer.context.js";
-import { Header as I } from "./components/Header/Header.js";
-import { Body as M } from "./components/Body/Body.js";
-import { Footer as j } from "./components/Footer/Footer.js";
-import { buttonCloseVariants as k, drawerVariants as A, overlayVariants as K, resizeHandleVariants as P } from "./Drawer.variants.js";
+import { t as B } from "../../Combination-CnMM05mt.js";
+import { t as C } from "../../es2015-DigR3dar.js";
+import { DrawerContext as I } from "./contexts/Drawer.context.js";
+import { Header as M } from "./components/Header/Header.js";
+import { Body as j } from "./components/Body/Body.js";
+import { Footer as k } from "./components/Footer/Footer.js";
+import { buttonCloseVariants as A, drawerVariants as K, overlayVariants as P, resizeHandleVariants as R } from "./Drawer.variants.js";
 import "./constants/index.js";
-import { useDrawer as R } from "./hooks/useDrawer.js";
-import { useId as T, useMemo as E } from "react";
+import { useDrawer as T } from "./hooks/useDrawer.js";
+import { useId as _, useMemo as E } from "react";
 import { createPortal as L } from "react-dom";
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
-var d = ({ canResize: t = !1, children: f, className: u, classNames: r, container: c, defaultWidth: m = 500, isOpen: p, maxWidth: h, minWidth: w, position: i = "right", showCloseButton: y = !0, theme: v, onClose: a }) => {
-  const n = T(), { handleKeyDown: b, handleMouseDown: D, isAnimating: s, isVisible: x, translateClass: V, width: H } = R({
+var d = ({ canResize: t = !1, children: u, className: c, classNames: r, container: f, defaultWidth: m = 500, isOpen: p, maxWidth: h, minWidth: w, position: a = "right", showCloseButton: y = !0, theme: v, onClose: i }) => {
+  const n = _(), { handleKeyDown: b, handleMouseDown: D, isAnimating: s, isVisible: x, translateClass: V, width: H } = T({
     canResize: t,
     defaultWidth: m,
     isOpen: p,
     maxWidth: h,
     minWidth: w,
-    position: i,
-    onClose: a
-  }), g = E(() => ({
+    position: a,
+    onClose: i
+  }), F = E(() => ({
     classNames: r,
     headerId: n
   }), [r, n]);
-  return x ? L(/* @__PURE__ */ e(F.Provider, {
-    value: g,
-    children: /* @__PURE__ */ e(C, { children: /* @__PURE__ */ l("div", {
+  return x ? L(/* @__PURE__ */ e(I.Provider, {
+    value: F,
+    children: /* @__PURE__ */ e(B, { children: /* @__PURE__ */ l("div", {
       className: o("fixed inset-0 z-40", r?.root),
       "data-theme": v,
       children: [/* @__PURE__ */ e("div", {
-        className: o(K(), {
+        className: o(P(), {
           "opacity-50": s,
           "opacity-0": !s
         }, r?.overlay),
         "aria-hidden": "true",
-        onClick: a,
+        onClick: i,
         role: "presentation"
-      }), /* @__PURE__ */ l("div", {
-        className: o(A({ position: i }), V, r?.panel, u),
-        style: { width: t ? H : m },
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-labelledby": n,
-        children: [
-          t && /* @__PURE__ */ e("button", {
-            type: "button",
-            "aria-label": "Resize drawer",
-            className: o(P({ position: i }), r?.resizeHandle),
-            onMouseDown: D,
-            onKeyDown: b
-          }),
-          y && /* @__PURE__ */ l("button", {
-            className: o(k(), r?.closeButton),
-            onClick: a,
-            type: "button",
-            children: [/* @__PURE__ */ e(z, { size: 20 }), /* @__PURE__ */ e(B, { children: "Dismiss drawer" })]
-          }),
-          /* @__PURE__ */ e("div", {
-            className: o("flex flex-1 flex-col h-full overflow-hidden", r?.content),
-            children: f
-          })
-        ]
+      }), /* @__PURE__ */ e(C, {
+        returnFocus: !0,
+        className: "contents",
+        children: /* @__PURE__ */ l("div", {
+          className: o(K({ position: a }), V, r?.panel, c),
+          style: { width: t ? H : m },
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": n,
+          children: [
+            t && /* @__PURE__ */ e("button", {
+              type: "button",
+              "aria-label": "Resize drawer",
+              className: o(R({ position: a }), r?.resizeHandle),
+              onMouseDown: D,
+              onKeyDown: b
+            }),
+            y && /* @__PURE__ */ l("button", {
+              className: o(A(), r?.closeButton),
+              onClick: i,
+              type: "button",
+              children: [/* @__PURE__ */ e(g, { size: 20 }), /* @__PURE__ */ e(z, { children: "Dismiss drawer" })]
+            }),
+            /* @__PURE__ */ e("div", {
+              className: o("flex flex-1 flex-col h-full overflow-hidden", r?.content),
+              children: u
+            })
+          ]
+        })
       })]
     }) })
-  }), c || document.body) : null;
+  }), f || document.body) : null;
 };
-d.Header = I;
-d.Body = M;
-d.Footer = j;
+d.Header = M;
+d.Body = j;
+d.Footer = k;
 export {
   d as Drawer
 };