@alif-ui-test/core 1.11.0 → 2.0.0-alpha.5

package/dist/components/Dates/InputYearPicker/YearPicker/YearPicker.js

@@ -1,61 +1,59 @@
-import { jsxs as k, jsx as a } from "react/jsx-runtime";
-import { useState as O, useMemo as P } from "react";
-import V from "../../Dates.module.css.js";
-import { PickerContent as g } from "../../PickerContent/PickerContent.js";
-import { getPickerStyles as j } from "../../Dates.utils.js";
-import { PickerOptions as x } from "../../PickerOptions/PickerOptions.js";
-import { classNames as M } from "../../../../utils/class-names.js";
-const _ = ({
-  className: p,
-  maxYear: s = 2100,
-  minYear: e = 1900,
-  onChange: i,
-  onPickerChange: n,
-  value: t,
-  isRange: m,
-  disabledYears: c,
-  options: y,
-  pickerWidth: l
-}) => {
-  const o = (/* @__PURE__ */ new Date()).getFullYear(), f = Array.isArray(t) ? t[0] ?? o : t ?? o, [u, A] = O(f), d = P(
-    () => Array.from({ length: s - e + 1 }, (r, h) => e + h),
-    [e, s]
-  ), b = (r) => {
-    n?.(r), i?.(r), r != null && A(Array.isArray(r) ? Math.min(...r) : r);
-  };
-  return /* @__PURE__ */ k(
-    "div",
-    {
-      style: j("year", l),
-      className: M(V.root, p),
-      children: [
-        /* @__PURE__ */ a(
-          g,
-          {
-            type: "year",
-            items: d,
-            currentValue: o,
-            visibleValue: u,
-            onChange: i,
-            onPickerChange: n,
-            isRange: m,
-            value: t,
-            disabledOptions: c
-          }
-        ),
-        /* @__PURE__ */ a(
-          x,
-          {
-            options: y,
-            isRange: m,
-            disabledOptions: c,
-            onChange: b
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  _ as YearPicker
+import { resolveTypography as e } from "../../../../utils/typography.js";
+import { classNames as t } from "../../../../utils/class-names.js";
+import { makeScrollTargetYear as n, normalizeRange as r } from "./YearPicker.utils.js";
+import i from "../../Dates.module.js";
+import { PickerOptions as a } from "../../PickerOptions/PickerOptions.js";
+import { getPickerStyles as o, getRangeBoundaries as s, getRangeMouseHandlers as c, scrollToCenter as l } from "../../Dates.utils.js";
+import { useEffect as u, useMemo as d, useRef as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/Dates/InputYearPicker/YearPicker/YearPicker.tsx
+var g = ({ maxYear: g = 2100, minYear: _ = 1900, onChange: v, onPickerChange: y, value: b, isRange: x, disabledYears: S, options: C, pickerWidth: w, className: T, style: E, ref: D }) => {
+	let O = (/* @__PURE__ */ new Date()).getFullYear(), [k, A] = p(Array.isArray(b) ? b[0] ?? O : b ?? O), [j, M] = p(null), [N, P] = p(null), F = f(null), I = d(() => Array.from({ length: g - _ + 1 }, (e, t) => _ + t), [_, g]), L = d(() => s(b, x, j, N, r), [
+		b,
+		x,
+		j,
+		N
+	]), R = (e) => n(e, b, j, k), z = (e) => {
+		if (!x) {
+			y?.(e), v?.(e);
+			return;
+		}
+		if (!j) {
+			M([e, null]), y?.(e);
+			return;
+		}
+		let [t] = j, n = r(t, e);
+		M(null), y?.(n), v?.(n);
+	}, B = (e) => {
+		let n = O === e, r = !x && e === b, a = x && L?.[0] === e, o = x && L?.[1] === e, s = x && L && e > L[0] && e < L[1];
+		return t(i.dateCell, "uiFont", n && i.today, r && i.active, a && i.rangeStart, o && i.rangeEnd, s && i.rangeMiddle, s && n && i.todayRangeMiddle);
+	};
+	return u(() => {
+		l(F.current);
+	}, [k]), /* @__PURE__ */ h("div", {
+		ref: D,
+		style: o("year", w, E),
+		className: t(i.root, T),
+		children: [/* @__PURE__ */ m("div", {
+			className: t(i.calendar, i.calendarShadow),
+			children: I.map((t) => /* @__PURE__ */ m("button", {
+				ref: R(t) ? F : null,
+				onClick: () => z(t),
+				className: B(t),
+				style: e("body", "s"),
+				disabled: S?.includes(t),
+				...c(x, P, t),
+				children: t
+			}, t))
+		}), /* @__PURE__ */ m(a, {
+			options: C,
+			isRange: x,
+			disabledOptions: S,
+			onChange: (e) => {
+				y?.(e), v?.(e), e != null && A(Array.isArray(e) ? Math.min(...e) : e);
+			}
+		})]
+	});
 };
+//#endregion
+export { g as YearPicker };

package/dist/components/Dates/InputYearPicker/YearPicker/YearPicker.utils.js

@@ -0,0 +1,4 @@
+//#region src/components/Dates/InputYearPicker/YearPicker/YearPicker.utils.ts
+var e = (e, t, n, r) => e === (n?.[0] ?? (Array.isArray(t) ? t[1] : null)) || e === r, t = (e, t) => [Math.min(e, t), Math.max(e, t)];
+//#endregion
+export { e as makeScrollTargetYear, t as normalizeRange };

package/dist/components/Dates/PickerHeader/PickerHeader.js

@@ -1,60 +1,40 @@
-import { jsxs as a, jsx as n } from "react/jsx-runtime";
-import o from "../Dates.module.css.js";
-import { OutlineNavigationChevronLeftSmall as u } from "../../../icons/components/OutlineNavigationChevronLeftSmall.js";
-import { classNames as e } from "../../../utils/class-names.js";
-import { OutlineNavigationChevronRightSmall as N } from "../../../icons/components/OutlineNavigationChevronRightSmall.js";
-const d = ({
-  month: l,
-  year: r,
-  onNext: i,
-  onPrev: c,
-  onMonthClick: s,
-  onYearClick: m,
-  viewMode: t
-}) => /* @__PURE__ */ a("div", { className: o.controlPanel, children: [
-  /* @__PURE__ */ n(
-    u,
-    {
-      role: "button",
-      "aria-label": "Previous",
-      className: o.controlPanelButtonArrow,
-      onClick: c
-    }
-  ),
-  /* @__PURE__ */ a("div", { className: o.controlPanelDateContainer, children: [
-    l && /* @__PURE__ */ n(
-      "span",
-      {
-        className: e(
-          o.controlPanelButtonMonth,
-          (t === "month" || t === "day") && o.controlPanelActiveButtonMonth
-        ),
-        onClick: s,
-        children: String(l)
-      }
-    ),
-    r && /* @__PURE__ */ n(
-      "span",
-      {
-        className: e(
-          o.controlPanelButtonYear,
-          t === "year" && o.controlPanelActiveButtonYear
-        ),
-        onClick: m,
-        children: String(r)
-      }
-    )
-  ] }),
-  /* @__PURE__ */ n(
-    N,
-    {
-      role: "button",
-      "aria-label": "Next",
-      className: o.controlPanelButtonArrow,
-      onClick: i
-    }
-  )
-] });
-export {
-  d as PickerHeader
+import { resolveTypography as e } from "../../../utils/typography.js";
+import { classNames as t } from "../../../utils/class-names.js";
+import n from "../Dates.module.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { OutlineNavigationChevronLeft as a, OutlineNavigationChevronRight as o } from "@alif-ui-test/icons";
+//#region src/components/Dates/PickerHeader/PickerHeader.tsx
+var s = ({ month: s, year: c, onNext: l, onPrev: u, onMonthClick: d, onYearClick: f, viewMode: p }) => {
+	let m = e("body", "m"), h = (e) => t("uiFont", n.controlPanelButtons, e && n.controlPanelActiveButtons);
+	return /* @__PURE__ */ i("div", {
+		className: n.controlPanel,
+		children: [
+			/* @__PURE__ */ r(a, {
+				role: "button",
+				className: n.controlPanelButtonArrow,
+				onClick: u
+			}),
+			/* @__PURE__ */ i("div", {
+				className: n.controlPanelDateContainer,
+				children: [s && /* @__PURE__ */ r("span", {
+					style: m,
+					className: h(p === "month" || p === "day"),
+					onClick: d,
+					children: String(s)
+				}), c && /* @__PURE__ */ r("span", {
+					style: m,
+					className: h(p === "year"),
+					onClick: f,
+					children: String(c)
+				})]
+			}),
+			/* @__PURE__ */ r(o, {
+				role: "button",
+				className: n.controlPanelButtonArrow,
+				onClick: l
+			})
+		]
+	});
 };
+//#endregion
+export { s as PickerHeader };

package/dist/components/Dates/PickerInput/PickerInput.js

@@ -0,0 +1,46 @@
+import { syncRefs as e } from "../../../utils/sync-refs.js";
+import { useComponentId as t } from "../../../hooks/useComponentId/useComponentId.js";
+import { InputBaseWrapper as n } from "../../Field/InputBaseWrapper/InputBaseWrapper.js";
+import { InputBase as r } from "../../Field/InputBase/InputBase.js";
+import i from "./PickerInput.module.js";
+import { useRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/Dates/PickerInput/PickerInput.tsx
+var c = ({ id: c, label: l, onClear: u, leftIcon: d, rightIcon: f, hasError: p, value: m, className: h, disabled: g, style: _, fullWidth: v = !0, size: y = "m", onFieldClick: b, ref: x, hintLeftSection: S, hintRightSection: C, mask: w, ...T }) => {
+	let E = a(null), D = t(c), O = (e, t) => e.length >= t.length ? e : e + t?.slice(e.length);
+	return /* @__PURE__ */ o(n, {
+		label: l,
+		onClear: u,
+		leftIcon: d,
+		rightIcon: f,
+		id: D,
+		size: y,
+		keepLabel: !0,
+		bordered: !0,
+		inputRef: E,
+		hasError: p,
+		disabled: g,
+		value: m,
+		fullWidth: v,
+		className: h,
+		style: _,
+		onClick: b,
+		hintLeftSection: S,
+		hintRightSection: C,
+		children: /* @__PURE__ */ s("div", {
+			className: i.wrapper,
+			children: [/* @__PURE__ */ o(r, {
+				id: D,
+				ref: e(E, x),
+				value: m,
+				disabled: g,
+				...T
+			}), w && /* @__PURE__ */ o("span", {
+				className: i.mask,
+				children: O(m, w)
+			})]
+		})
+	});
+};
+//#endregion
+export { c as PickerInput };

package/dist/components/Dates/PickerInput/PickerInput.module.js

@@ -0,0 +1,6 @@
+var e = {
+	wrapper: "_wrapper_tkx92_1",
+	mask: "_mask_tkx92_7"
+};
+//#endregion
+export { e as default };

package/dist/components/Dates/PickerOptions/PickerOptions.js

@@ -1,36 +1,30 @@
-import { jsxs as u, jsx as e } from "react/jsx-runtime";
-import n from "../Dates.module.css.js";
-import { CONFIRMATION_TEXT as f } from "../InputTimePicker/TimePicker/TimePicker.utils.js";
-import { useLocale as p } from "../../../providers/hooks/useLocale/useLocale.js";
-import { FunctionButton as y } from "../../FunctionButton/FunctionButton.js";
-import { Button as A } from "../../Button/Button.js";
-const j = ({
-  options: c = [],
-  isRange: l,
-  onChange: a,
-  onConfirm: t,
-  disabledOptions: s = []
-}) => {
-  const { locale: m } = p(), o = c.filter(
-    (r) => l ? Array.isArray(r.value) : !Array.isArray(r.value)
-  );
-  if (o.length === 0 && !t) return null;
-  const d = (r) => Array.isArray(r) ? r.some((i) => s.includes(i)) : s.includes(r);
-  return /* @__PURE__ */ u("div", { className: n.confirmationBlock, children: [
-    /* @__PURE__ */ e("div", { className: n.dateOptions, children: o.map(({ text: r, value: i }) => /* @__PURE__ */ e(
-      y,
-      {
-        onClick: () => a(i),
-        disabled: d(i),
-        variant: "accent",
-        size: "m",
-        children: r
-      },
-      r
-    )) }),
-    t && /* @__PURE__ */ e(A, { onClick: t, size: "s", children: f[m] })
-  ] });
-};
-export {
-  j as PickerOptions
+import { useLocale as e } from "../../../providers/hooks/useLocale/useLocale.js";
+import { Button as t } from "../../Button/Button.js";
+import n from "../Dates.module.js";
+import { checkIfDisabled as r } from "./PickerOptions.utils.js";
+import { CONFIRMATION_TEXT as i } from "../InputTimePicker/TimePicker/TimePicker.constants.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/Dates/PickerOptions/PickerOptions.tsx
+var s = ({ options: s = [], isRange: c, onChange: l, onConfirm: u, disabledOptions: d = [] }) => {
+	let { locale: f } = e(), p = s.filter((e) => c ? Array.isArray(e.value) : !Array.isArray(e.value));
+	return p.length === 0 && !u ? null : /* @__PURE__ */ o("div", {
+		className: n.confirmationBlock,
+		children: [/* @__PURE__ */ a("div", {
+			className: n.dateOptions,
+			children: p.map(({ text: e, value: n }) => /* @__PURE__ */ a(t, {
+				onClick: () => l(n),
+				disabled: r(n, d),
+				variant: "function",
+				color: "highlight",
+				size: "m",
+				children: e
+			}, e))
+		}), u && /* @__PURE__ */ a(t, {
+			onClick: u,
+			size: "s",
+			children: i[f]
+		})]
+	});
 };
+//#endregion
+export { s as PickerOptions };

package/dist/components/Dates/PickerOptions/PickerOptions.utils.js

@@ -0,0 +1,5 @@
+import { dateMatcher as e } from "../InputDatePicker/DatePicker/DatePicker.utils.js";
+//#region src/components/Dates/PickerOptions/PickerOptions.utils.ts
+var t = (e) => e instanceof Date, n = (e) => Array.isArray(e) && e.length > 0 && e[0] instanceof Date, r = (n, r) => t(n) ? r.some((t) => e.isSameDay(n, t)) : r.includes(n), i = (t, r) => n(t) ? t.some((t) => r.some((n) => e.isSameDay(t, n))) : t.some((e) => r.includes(e)), a = (e, t) => Array.isArray(e) ? i(e, t) : r(e, t);
+//#endregion
+export { a as checkIfDisabled };

package/dist/components/Divider/Divider.js

@@ -1,18 +1,13 @@
-import { jsx as s } from "react/jsx-runtime";
-import t from "./Divider.module.css.js";
-import { getDividerStyles as i } from "./Divider.utils.js";
 import { classNames as e } from "../../utils/class-names.js";
-const y = ({
-  className: r,
-  variant: m = "primary",
-  size: o = "m"
-}) => /* @__PURE__ */ s(
-  "div",
-  {
-    className: e(t.root, r),
-    style: i(m, o)
-  }
-);
-export {
-  y as Divider
-};
+import t from "./Divider.module.js";
+import { getDividerStyles as n } from "./Divider.utils.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/Divider/Divider.tsx
+var i = ({ className: i, color: a = "primary", size: o = "m", orientation: s = "horizontal", style: c }) => /* @__PURE__ */ r("div", {
+	role: "separator",
+	"aria-orientation": s,
+	className: e(t.root, s === "vertical" && t.vertical, i),
+	style: n(a, o, s, c)
+});
+//#endregion
+export { i as Divider };

package/dist/components/Divider/Divider.module.js

@@ -0,0 +1,6 @@
+var e = {
+	root: "_root_jp2mo_1",
+	vertical: "_vertical_jp2mo_17"
+};
+//#endregion
+export { e as default };

package/dist/components/Divider/Divider.utils.js

@@ -1,10 +1,11 @@
 import { getSize as e } from "../../utils/get-size.js";
-const t = (i, d) => ({
-  "--divider-width": "100%",
-  "--divider-height": "fit-content",
-  "--divider-border-width": e(d, "divider-width"),
-  "--divider-color": `var(--divider-color-${i})`
+//#region src/components/Divider/Divider.utils.ts
+var t = (t, n, r, i) => ({
+	"--divider-width": r === "vertical" ? "fit-content" : "100%",
+	"--divider-height": r === "vertical" ? "auto" : "fit-content",
+	"--divider-border-width": e(n, "divider-width"),
+	"--divider-color": `var(--divider-color-${t})`,
+	...i
 });
-export {
-  t as getDividerStyles
-};
+//#endregion
+export { t as getDividerStyles };

package/dist/components/Drawer/Drawer.js

@@ -1,74 +1,47 @@
-import { jsx as t, jsxs as s } from "react/jsx-runtime";
-import r from "./Drawer.module.css.js";
-import { capitalize as i, positionToTransitionName as C, getDrawerStyle as S } from "./Drawer.utils.js";
-import { Backdrop as T } from "../Backdrop/Backdrop.js";
-import { Typography as n } from "../Typography/Typography.js";
-import { classNames as d } from "../../utils/class-names.js";
-import { OutlineSystemClose as j } from "../../icons/components/OutlineSystemClose.js";
-const P = ({
-  title: c,
-  subTitle: o,
-  isOpen: l,
-  onClose: a,
-  children: m,
-  isCloseOutside: p = !0,
-  width: y = "30%",
-  height: h = "70%",
-  type: f = "default",
-  position: e = "right",
-  zIndex: w,
-  className: N,
-  ...g
-}) => {
-  const u = d(
-    r.root,
-    f === "rounded" && r.rounded,
-    r[`position${i(e)}`]
-  ), v = d(
-    r.drawer,
-    r[`drawer${i(e)}`],
-    N
-  ), x = S(e, y, h);
-  return /* @__PURE__ */ t(
-    T,
-    {
-      isOpen: l,
-      onClose: a,
-      isCloseOutside: p,
-      className: u,
-      "data-testid": "container",
-      zIndex: w,
-      transitionProps: {
-        transition: C[e]
-      },
-      children: /* @__PURE__ */ s(
-        "div",
-        {
-          style: x,
-          "data-testid": "drawer",
-          className: v,
-          ...g,
-          children: [
-            /* @__PURE__ */ s("div", { className: r.title, children: [
-              /* @__PURE__ */ t(n, { proportions: "h4", category: "heading", children: c }),
-              /* @__PURE__ */ t(j, { onClick: a })
-            ] }),
-            o && /* @__PURE__ */ t(
-              n,
-              {
-                proportions: "l",
-                category: "body",
-                className: r.subTitle,
-                children: o
-              }
-            ),
-            /* @__PURE__ */ t("div", { className: r.content, children: m })
-          ]
-        }
-      )
-    }
-  );
-};
-export {
-  P as Drawer
+import { classNames as e } from "../../utils/class-names.js";
+import { Backdrop as t } from "../Backdrop/Backdrop.js";
+import { useLocale as n } from "../../providers/hooks/useLocale/useLocale.js";
+import { Button as r } from "../Button/Button.js";
+import { useFocusTrapAndRestore as i } from "../../hooks/useFocusTrapAndRestore/useFocusTrapAndRestore.js";
+import a from "./Drawer.module.js";
+import { DrawerHeader as o } from "./DrawerHeader/DrawerHeader.js";
+import { DrawerContent as s } from "./DrawerContent/DrawerContent.js";
+import { DrawerActions as c } from "./DrawerActions/DrawerActions.js";
+import { ARIA_CLOSE_LABEL as l, getDrawerStyle as u, positionToTransitionName as d } from "./Drawer.utils.js";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { OutlineSystemClose as m } from "@alif-ui-test/icons";
+//#region src/components/Drawer/Drawer.tsx
+var h = ({ isOpen: o, onClose: s, children: c, withCloseButton: h = !0, closeOnClickOutside: g = !0, scrollable: _ = !0, width: v, height: y, maxWidth: b, maxHeight: x, variant: S = "default", position: C = "right", zIndex: w, className: T, style: E, ref: D, ...O }) => {
+	let { locale: k } = n(), A = i(o), j = e(a.root, S === "floating" && a.rounded, a[C]), M = e(a.drawer, (_ || C === "bottom" || C === "top") && a.scrollable, T);
+	return /* @__PURE__ */ f(t, {
+		ref: D,
+		isOpen: o,
+		onClose: s,
+		closeOnClickOutside: g,
+		className: j,
+		"data-testid": "container",
+		zIndex: w,
+		transitionProps: { transition: d[C] },
+		children: /* @__PURE__ */ p("div", {
+			ref: A,
+			role: "dialog",
+			tabIndex: -1,
+			"data-testid": "drawer",
+			"aria-modal": "true",
+			className: M,
+			style: u(C, v, y, b, x, E),
+			...O,
+			children: [c, h && /* @__PURE__ */ f(r, {
+				className: a.closeButton,
+				variant: "ghost",
+				color: "tertiary",
+				"aria-label": l[k],
+				onClick: s,
+				children: /* @__PURE__ */ f(m, {})
+			})]
+		})
+	});
 };
+h.Header = o, h.Content = s, h.Actions = c;
+//#endregion
+export { h as Drawer };

package/dist/components/Drawer/Drawer.module.js

@@ -0,0 +1,17 @@
+var e = {
+	root: "_root_1oo4l_1",
+	right: "_right_1oo4l_22",
+	left: "_left_1oo4l_26",
+	top: "_top_1oo4l_30",
+	bottom: "_bottom_1oo4l_34",
+	rounded: "_rounded_1oo4l_38",
+	drawer: "_drawer_1oo4l_42",
+	header: "_header_1oo4l_56",
+	title: "_title_1oo4l_63",
+	description: "_description_1oo4l_68",
+	content: "_content_1oo4l_73",
+	scrollable: "_scrollable_1oo4l_78",
+	closeButton: "_closeButton_1oo4l_87"
+};
+//#endregion
+export { e as default };

package/dist/components/Drawer/Drawer.utils.js

@@ -1,14 +1,22 @@
-const o = {
-  left: "slide-right",
-  right: "slide-left",
-  top: "slide-down",
-  bottom: "slide-up"
-}, i = (t) => t.charAt(0).toUpperCase() + t.slice(1), r = (t, e, l) => ({
-  ...t === "left" || t === "right" ? { width: e } : {},
-  ...t === "top" || t === "bottom" ? { height: l } : {}
-});
-export {
-  i as capitalize,
-  r as getDrawerStyle,
-  o as positionToTransitionName
+//#region src/components/Drawer/Drawer.utils.ts
+var e = {
+	left: "slide-right",
+	right: "slide-left",
+	top: "slide-down",
+	bottom: "slide-up"
+}, t = (e, t, n, r, i, a) => e === "left" || e === "right" ? {
+	maxWidth: r || "500px",
+	width: t || "100%",
+	...a
+} : {
+	maxHeight: i || "500px",
+	height: n || "100%",
+	width: "100%",
+	...a
+}, n = {
+	en: "Close drawer",
+	ru: "Закрыть панель",
+	tj: "Пӯшидани панел"
 };
+//#endregion
+export { n as ARIA_CLOSE_LABEL, t as getDrawerStyle, e as positionToTransitionName };

package/dist/components/Drawer/DrawerActions/DrawerActions.js

@@ -0,0 +1,5 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/Drawer/DrawerActions/DrawerActions.tsx
+var t = ({ ...t }) => /* @__PURE__ */ e("div", { ...t });
+//#endregion
+export { t as DrawerActions };

package/dist/components/Drawer/DrawerContent/DrawerContent.js

@@ -0,0 +1,10 @@
+import { classNames as e } from "../../../utils/class-names.js";
+import t from "../Drawer.module.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/Drawer/DrawerContent/DrawerContent.tsx
+var r = ({ className: r, ...i }) => /* @__PURE__ */ n("div", {
+	className: e(t.content, r),
+	...i
+});
+//#endregion
+export { r as DrawerContent };

package/dist/components/Drawer/DrawerHeader/DrawerHeader.js

@@ -0,0 +1,27 @@
+import { classNames as e } from "../../../utils/class-names.js";
+import { Typography as t } from "../../Typography/Typography.js";
+import n from "../Drawer.module.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/Drawer/DrawerHeader/DrawerHeader.tsx
+var a = ({ title: a, description: o, className: s, children: c, ...l }) => /* @__PURE__ */ i("div", {
+	className: e(n.header, s),
+	...l,
+	children: [
+		a && /* @__PURE__ */ r(t, {
+			className: n.title,
+			variant: "heading",
+			size: "h4",
+			children: a
+		}),
+		o && /* @__PURE__ */ r(t, {
+			element: "div",
+			className: n.description,
+			variant: "body",
+			size: "l",
+			children: o
+		}),
+		c
+	]
+});
+//#endregion
+export { a as DrawerHeader };