@stokelp/ui 2.102.0 → 2.104.0

package/dist/components/dialog/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/dialog/styled.tsx"],"sourcesContent":["import { ark, Dialog as ArkDialog, Portal, useDialogContext } from '@ark-ui/react'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { dialog } from '@stokelp/styled-system/recipes'\nimport { ComponentProps, ComponentPropsWithoutRef, ElementRef, forwardRef, useLayoutEffect } from 'react'\nimport { createStyleContext } from '~/utils/slots'\nimport { IconButton } from '~/components/icon-button'\nimport { DrawerCloseTrigger } from '~/components'\nimport { useMediaQuery } from 'usehooks-ts'\nimport { token } from '@stokelp/styled-system/tokens'\n\nconst { withProvider, withContext } = createStyleContext(dialog, {\n  dataAttr: true,\n})\n\nexport const Root = withProvider(ArkDialog.Root, undefined, {\n  defaultProps: {\n    lazyMount: true,\n    unmountOnExit: true,\n  },\n})\nexport const Backdrop = withContext(styled(ArkDialog.Backdrop), 'backdrop')\nexport const CloseTrigger = withContext(styled(ArkDialog.CloseTrigger), 'closeTrigger')\n\nconst InternalContent = forwardRef<\n  ElementRef<typeof ArkDialog.Content>,\n  ComponentPropsWithoutRef<typeof ArkDialog.Content>\n>(({ children, ...props }, ref) => {\n  const isMobile = useMediaQuery(`(max-width: ${token('breakpoints.md')})`, {\n    defaultValue: false,\n  })\n  const { open, getContentProps } = useDialogContext()\n\n  useLayoutEffect(() => {\n    if (!open) return\n    const { id } = getContentProps()\n    if (!id) return\n    setTimeout(() => {\n      const $content = document.getElementById(id)\n\n      if ($content) {\n        const $footer = $content.querySelector('footer')\n        if ($footer) {\n          if (isMobile) {\n            $content.style.setProperty('--footer-height', `${Math.ceil($footer.clientHeight)}px`)\n          } else {\n            $content.style.setProperty('--footer-height', `70px`)\n          }\n        }\n      }\n    }, 0)\n  }, [open, isMobile])\n\n  return (\n    <Portal>\n      <Backdrop />\n      <Positioner>\n        <ArkDialog.Content ref={ref} {...props}>\n          {children}\n        </ArkDialog.Content>\n      </Positioner>\n    </Portal>\n  )\n})\nInternalContent.displayName = ArkDialog.Content.displayName\n\nexport const Content = withContext(styled(InternalContent), 'content')\n\ntype HeaderProps = ComponentPropsWithoutRef<typeof ark.header> & {\n  showCloseTrigger?: boolean\n}\nconst InternalHeader = forwardRef<ElementRef<typeof ark.header>, HeaderProps>(\n  ({ children, showCloseTrigger = true, ...props }, ref) => (\n    <ark.header {...props} ref={ref}>\n      {children}\n      {showCloseTrigger && (\n        <DrawerCloseTrigger asChild>\n          <IconButton ml=\"auto\" aria-label=\"close\" variant=\"tertiary\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </IconButton>\n        </DrawerCloseTrigger>\n      )}\n    </ark.header>\n  ),\n)\nInternalHeader.displayName = 'DialogHeader'\n\nexport const Header = withContext(styled(InternalHeader), 'header')\nexport const Body = withContext(styled(ark.main), 'body')\nexport const Footer = withContext(styled(ark.footer), 'footer')\nexport const Positioner = withContext(styled(ArkDialog.Positioner), 'positioner')\nexport const Title = withContext(styled(ArkDialog.Title), 'title')\nexport const Trigger = withContext(styled(ArkDialog.Trigger), 'trigger')\n\nexport interface DialogProps extends ComponentProps<typeof Root> {}\nexport interface DialogBackdropProps extends ComponentProps<typeof Backdrop> {}\nexport interface DialogCloseTriggerProps extends ComponentProps<typeof CloseTrigger> {}\nexport interface DialogContentProps extends ComponentProps<typeof Content> {}\nexport interface DialogHeaderProps extends ComponentProps<typeof Header> {}\nexport interface DialogBodyProps extends ComponentProps<typeof Body> {}\nexport interface DialogFooterProps extends ComponentProps<typeof Footer> {}\nexport interface DialogPositionerProps extends ComponentProps<typeof Positioner> {}\nexport interface DialogTitleProps extends ComponentProps<typeof Title> {}\nexport interface DialogTriggerProps extends ComponentProps<typeof Trigger> {}\n"],"names":["withProvider","withContext","createStyleContext","dialog","Root","ArkDialog","Backdrop","styled","CloseTrigger","InternalContent","forwardRef","children","props","ref","isMobile","useMediaQuery","token","open","getContentProps","useDialogContext","useLayoutEffect","id","$content","$footer","Portal","jsx","Positioner","Content","InternalHeader","showCloseTrigger","ark","DrawerCloseTrigger","IconButton","Header","Body","Footer","Title","Trigger"],"mappings":"wbAUM,CAAE,aAAAA,EAAc,YAAAC,GAAgBC,EAAAA,mBAAmBC,EAAAA,OAAQ,CAC/D,SAAU,EACZ,CAAC,EAEYC,EAAOJ,EAAaK,SAAU,KAAM,OAAW,CAC1D,aAAc,CACZ,UAAW,GACX,cAAe,EAAA,CAEnB,CAAC,EACYC,EAAWL,EAAYM,EAAAA,OAAOF,EAAAA,OAAU,QAAQ,EAAG,UAAU,EAC7DG,EAAeP,EAAYM,EAAAA,OAAOF,EAAAA,OAAU,YAAY,EAAG,cAAc,EAEhFI,EAAkBC,EAAAA,WAGtB,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAA,EAASC,IAAQ,CACjC,MAAMC,EAAWC,EAAAA,cAAc,eAAeC,EAAAA,MAAM,gBAAgB,CAAC,IAAK,CACxE,aAAc,EAAA,CACf,EACK,CAAE,KAAAC,EAAM,gBAAAC,CAAA,EAAoBC,mBAAA,EAElCC,OAAAA,EAAAA,gBAAgB,IAAM,CACpB,GAAI,CAACH,EAAM,OACX,KAAM,CAAE,GAAAI,CAAA,EAAOH,EAAA,EACVG,GACL,WAAW,IAAM,CACf,MAAMC,EAAW,SAAS,eAAeD,CAAE,EAE3C,GAAIC,EAAU,CACZ,MAAMC,EAAUD,EAAS,cAAc,QAAQ,EAC3CC,IACET,EACFQ,EAAS,MAAM,YAAY,kBAAmB,GAAG,KAAK,KAAKC,EAAQ,YAAY,CAAC,IAAI,EAEpFD,EAAS,MAAM,YAAY,kBAAmB,MAAM,EAG1D,CACF,EAAG,CAAC,CACN,EAAG,CAACL,EAAMH,CAAQ,CAAC,SAGhBU,SAAA,CACC,SAAA,CAAAC,EAAAA,IAACnB,EAAA,EAAS,EACVmB,EAAAA,IAACC,EAAA,CACC,SAAAD,EAAAA,IAACpB,EAAAA,OAAU,QAAV,CAAkB,IAAAQ,EAAW,GAAGD,EAC9B,SAAAD,CAAA,CACH,CAAA,CACF,CAAA,EACF,CAEJ,CAAC,EACDF,EAAgB,YAAcJ,SAAU,QAAQ,YAEzC,MAAMsB,EAAU1B,EAAYM,SAAOE,CAAe,EAAG,SAAS,EAK/DmB,EAAiBlB,EAAAA,WACrB,CAAC,CAAE,SAAAC,EAAU,iBAAAkB,EAAmB,GAAM,GAAGjB,CAAA,EAASC,WAC/CiB,EAAAA,IAAI,OAAJ,CAAY,GAAGlB,EAAO,IAAAC,EACpB,SAAA,CAAAF,EACAkB,GACCJ,EAAAA,IAACM,EAAAA,mBAAA,CAAmB,QAAO,GACzB,eAACC,EAAAA,WAAA,CAAW,GAAG,OAAO,aAAW,QAAQ,QAAQ,WAC/C,SAAAP,EAAAA,IAAC,MAAA,CAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAAA,IAAC,OAAA,CACC,SAAS,UACT,SAAS,UACT,EAAE,4fACF,KAAK,cAAA,CAAA,CACP,CACF,EACF,CAAA,CACF,CAAA,CAAA,CAEJ,CAEJ,EACAG,EAAe,YAAc,eAEtB,MAAMK,EAAShC,EAAYM,SAAOqB,CAAc,EAAG,QAAQ,EACrDM,EAAOjC,EAAYM,EAAAA,OAAOuB,EAAAA,IAAI,IAAI,EAAG,MAAM,EAC3CK,EAASlC,EAAYM,EAAAA,OAAOuB,EAAAA,IAAI,MAAM,EAAG,QAAQ,EACjDJ,EAAazB,EAAYM,EAAAA,OAAOF,EAAAA,OAAU,UAAU,EAAG,YAAY,EACnE+B,EAAQnC,EAAYM,EAAAA,OAAOF,EAAAA,OAAU,KAAK,EAAG,OAAO,EACpDgC,EAAUpC,EAAYM,EAAAA,OAAOF,EAAAA,OAAU,OAAO,EAAG,SAAS"}
+{"version":3,"file":"styled.cjs","names":[],"sources":["../../../src/components/dialog/styled.tsx"],"sourcesContent":["import { ark, Dialog as ArkDialog, Portal, useDialogContext } from '@ark-ui/react'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { dialog } from '@stokelp/styled-system/recipes'\nimport { ComponentProps, ComponentPropsWithoutRef, ElementRef, forwardRef, useLayoutEffect } from 'react'\nimport { createStyleContext } from '~/utils/slots'\nimport { IconButton } from '~/components/icon-button'\nimport { DrawerCloseTrigger } from '~/components'\nimport { useMediaQuery } from 'usehooks-ts'\nimport { token } from '@stokelp/styled-system/tokens'\n\nconst { withProvider, withContext } = createStyleContext(dialog, {\n  dataAttr: true,\n})\n\nexport const Root = withProvider(ArkDialog.Root, undefined, {\n  defaultProps: {\n    lazyMount: true,\n    unmountOnExit: true,\n  },\n})\nexport const Backdrop = withContext(styled(ArkDialog.Backdrop), 'backdrop')\nexport const CloseTrigger = withContext(styled(ArkDialog.CloseTrigger), 'closeTrigger')\n\nconst InternalContent = forwardRef<\n  ElementRef<typeof ArkDialog.Content>,\n  ComponentPropsWithoutRef<typeof ArkDialog.Content>\n>(({ children, ...props }, ref) => {\n  const isMobile = useMediaQuery(`(max-width: ${token('breakpoints.md')})`, {\n    defaultValue: false,\n  })\n  const { open, getContentProps } = useDialogContext()\n\n  useLayoutEffect(() => {\n    if (!open) return\n    const { id } = getContentProps()\n    if (!id) return\n    setTimeout(() => {\n      const $content = document.getElementById(id)\n\n      if ($content) {\n        const $footer = $content.querySelector('footer')\n        if ($footer) {\n          if (isMobile) {\n            $content.style.setProperty('--footer-height', `${Math.ceil($footer.clientHeight)}px`)\n          } else {\n            $content.style.setProperty('--footer-height', `70px`)\n          }\n        }\n      }\n    }, 0)\n  }, [open, isMobile])\n\n  return (\n    <Portal>\n      <Backdrop />\n      <Positioner>\n        <ArkDialog.Content ref={ref} {...props}>\n          {children}\n        </ArkDialog.Content>\n      </Positioner>\n    </Portal>\n  )\n})\nInternalContent.displayName = ArkDialog.Content.displayName\n\nexport const Content = withContext(styled(InternalContent), 'content')\n\ntype HeaderProps = ComponentPropsWithoutRef<typeof ark.header> & {\n  showCloseTrigger?: boolean\n}\nconst InternalHeader = forwardRef<ElementRef<typeof ark.header>, HeaderProps>(\n  ({ children, showCloseTrigger = true, ...props }, ref) => (\n    <ark.header {...props} ref={ref}>\n      {children}\n      {showCloseTrigger && (\n        <DrawerCloseTrigger asChild>\n          <IconButton ml=\"auto\" aria-label=\"close\" variant=\"tertiary\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </IconButton>\n        </DrawerCloseTrigger>\n      )}\n    </ark.header>\n  ),\n)\nInternalHeader.displayName = 'DialogHeader'\n\nexport const Header = withContext(styled(InternalHeader), 'header')\nexport const Body = withContext(styled(ark.main), 'body')\nexport const Footer = withContext(styled(ark.footer), 'footer')\nexport const Positioner = withContext(styled(ArkDialog.Positioner), 'positioner')\nexport const Title = withContext(styled(ArkDialog.Title), 'title')\nexport const Trigger = withContext(styled(ArkDialog.Trigger), 'trigger')\n\nexport interface DialogProps extends ComponentProps<typeof Root> {}\nexport interface DialogBackdropProps extends ComponentProps<typeof Backdrop> {}\nexport interface DialogCloseTriggerProps extends ComponentProps<typeof CloseTrigger> {}\nexport interface DialogContentProps extends ComponentProps<typeof Content> {}\nexport interface DialogHeaderProps extends ComponentProps<typeof Header> {}\nexport interface DialogBodyProps extends ComponentProps<typeof Body> {}\nexport interface DialogFooterProps extends ComponentProps<typeof Footer> {}\nexport interface DialogPositionerProps extends ComponentProps<typeof Positioner> {}\nexport interface DialogTitleProps extends ComponentProps<typeof Title> {}\nexport interface DialogTriggerProps extends ComponentProps<typeof Trigger> {}\n"],"mappings":"gkBAUM,CAAE,eAAc,eAAgB,EAAA,mBAAmB,EAAA,OAAQ,CAC/D,SAAU,EACZ,CAAC,EAEY,EAAO,EAAa,EAAA,OAAU,KAAM,IAAA,GAAW,CAC1D,aAAc,CACZ,UAAW,GACX,cAAe,EACjB,CACF,CAAC,EACY,EAAW,GAAA,EAAA,EAAA,QAAmB,EAAA,OAAU,QAAQ,EAAG,UAAU,EAC7D,EAAe,GAAA,EAAA,EAAA,QAAmB,EAAA,OAAU,YAAY,EAAG,cAAc,EAEhF,GAAA,EAAA,EAAA,aAGH,CAAE,WAAU,GAAG,GAAS,IAAQ,CACjC,IAAM,GAAA,EAAA,EAAA,eAAyB,gBAAA,EAAA,EAAA,OAAqB,gBAAgB,EAAE,GAAI,CACxE,aAAc,EAChB,CAAC,EACK,CAAE,OAAM,oBAAA,EAAA,EAAA,kBAAqC,EAsBnD,OApBA,EAAA,EAAA,qBAAsB,CACpB,GAAI,CAAC,EAAM,OACX,GAAM,CAAE,MAAO,EAAgB,EAC1B,GACL,eAAiB,CACf,IAAM,EAAW,SAAS,eAAe,CAAE,EAE3C,GAAI,EAAU,CACZ,IAAM,EAAU,EAAS,cAAc,QAAQ,EAC3C,IACE,EACF,EAAS,MAAM,YAAY,kBAAmB,GAAG,KAAK,KAAK,EAAQ,YAAY,EAAE,GAAG,EAEpF,EAAS,MAAM,YAAY,kBAAmB,MAAM,EAG1D,CACF,EAAG,CAAC,CACN,EAAG,CAAC,EAAM,CAAQ,CAAC,GAGjB,EAAA,EAAA,MAAC,EAAA,OAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,EAAD,CAAW,CAAA,GACX,EAAA,EAAA,KAAC,EAAD,CAAA,UACE,EAAA,EAAA,KAAC,EAAA,OAAU,QAAX,CAAwB,MAAK,GAAI,EAC9B,UACgB,CAAA,CACT,CAAA,CACN,CAAA,CAAA,CAEZ,CAAC,EACD,EAAgB,YAAc,EAAA,OAAU,QAAQ,YAEhD,IAAa,EAAU,GAAA,EAAA,EAAA,QAAmB,CAAe,EAAG,SAAS,EAK/D,GAAA,EAAA,EAAA,aACH,CAAE,WAAU,mBAAmB,GAAM,GAAG,GAAS,KAChD,EAAA,EAAA,MAAC,EAAA,IAAI,OAAL,CAAY,GAAI,EAAY,eAA5B,CACG,EACA,IACC,EAAA,EAAA,KAAC,EAAA,mBAAD,CAAoB,QAAA,aAClB,EAAA,EAAA,KAAC,EAAA,WAAD,CAAY,GAAG,OAAO,aAAW,QAAQ,QAAQ,qBAC/C,EAAA,EAAA,KAAC,MAAD,CAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,uCAChE,EAAA,EAAA,KAAC,OAAD,CACE,SAAS,UACT,SAAS,UACT,EAAE,4fACF,KAAK,cACN,CAAA,CACE,CAAA,CACK,CAAA,CACM,CAAA,CAEZ,GAEhB,EACA,EAAe,YAAc,eAE7B,IAAa,EAAS,GAAA,EAAA,EAAA,QAAmB,CAAc,EAAG,QAAQ,EACrD,EAAO,GAAA,EAAA,EAAA,QAAmB,EAAA,IAAI,IAAI,EAAG,MAAM,EAC3C,EAAS,GAAA,EAAA,EAAA,QAAmB,EAAA,IAAI,MAAM,EAAG,QAAQ,EACjD,EAAa,GAAA,EAAA,EAAA,QAAmB,EAAA,OAAU,UAAU,EAAG,YAAY,EACnE,EAAQ,GAAA,EAAA,EAAA,QAAmB,EAAA,OAAU,KAAK,EAAG,OAAO,EACpD,EAAU,GAAA,EAAA,EAAA,QAAmB,EAAA,OAAU,OAAO,EAAG,SAAS"}

package/dist/components/dialog/styled.js

@@ -1,67 +1,77 @@
 "use client";
-import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import { Dialog as o, ark as c, useDialogContext as y, Portal as x } from "@ark-ui/react";
-import { styled as t } from "@stokelp/styled-system/jsx";
-import { dialog as w } from "@stokelp/styled-system/recipes";
-import { forwardRef as u, useLayoutEffect as L } from "react";
-import { createStyleContext as T } from "../../utils/slots.js";
-import { useMediaQuery as v } from "usehooks-ts";
-import { token as P } from "@stokelp/styled-system/tokens";
-import { DrawerCloseTrigger as k } from "../drawer/Drawer.js";
-import { IconButton as B } from "../icon-button/IconButton.js";
-const { withProvider: b, withContext: e } = T(w, {
-  dataAttr: !0
-}), A = b(o.Root, void 0, {
-  defaultProps: {
-    lazyMount: !0,
-    unmountOnExit: !0
-  }
-}), M = e(t(o.Backdrop), "backdrop"), F = e(t(o.CloseTrigger), "closeTrigger"), g = u(({ children: l, ...s }, a) => {
-  const i = v(`(max-width: ${P("breakpoints.md")})`, {
-    defaultValue: !1
-  }), { open: d, getContentProps: C } = y();
-  return L(() => {
-    if (!d) return;
-    const { id: m } = C();
-    m && setTimeout(() => {
-      const n = document.getElementById(m);
-      if (n) {
-        const f = n.querySelector("footer");
-        f && (i ? n.style.setProperty("--footer-height", `${Math.ceil(f.clientHeight)}px`) : n.style.setProperty("--footer-height", "70px"));
-      }
-    }, 0);
-  }, [d, i]), /* @__PURE__ */ p(x, { children: [
-    /* @__PURE__ */ r(M, {}),
-    /* @__PURE__ */ r(R, { children: /* @__PURE__ */ r(o.Content, { ref: a, ...s, children: l }) })
-  ] });
+import { __exportAll as e } from "../../_virtual/_rolldown/runtime.js";
+import { createStyleContext as t } from "../../utils/slots.js";
+import { IconButton as n } from "../icon-button/IconButton.js";
+import { DrawerCloseTrigger as r } from "../drawer/Drawer.js";
+import { Dialog as i, Portal as a, ark as o, useDialogContext as s } from "@ark-ui/react";
+import { styled as c } from "@stokelp/styled-system/jsx";
+import { dialog as l } from "@stokelp/styled-system/recipes";
+import { forwardRef as u, useLayoutEffect as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { useMediaQuery as m } from "usehooks-ts";
+import { token as h } from "@stokelp/styled-system/tokens";
+//#region src/components/dialog/styled.tsx
+var g = /* @__PURE__ */ e({
+	Backdrop: () => b,
+	Body: () => E,
+	CloseTrigger: () => x,
+	Content: () => C,
+	Footer: () => D,
+	Header: () => T,
+	Positioner: () => O,
+	Root: () => y,
+	Title: () => k,
+	Trigger: () => A
+}), { withProvider: _, withContext: v } = t(l, { dataAttr: !0 }), y = _(i.Root, void 0, { defaultProps: {
+	lazyMount: !0,
+	unmountOnExit: !0
+} }), b = v(c(i.Backdrop), "backdrop"), x = v(c(i.CloseTrigger), "closeTrigger"), S = u(({ children: e, ...t }, n) => {
+	let r = m(`(max-width: ${h("breakpoints.md")})`, { defaultValue: !1 }), { open: o, getContentProps: c } = s();
+	return d(() => {
+		if (!o) return;
+		let { id: e } = c();
+		e && setTimeout(() => {
+			let t = document.getElementById(e);
+			if (t) {
+				let e = t.querySelector("footer");
+				e && (r ? t.style.setProperty("--footer-height", `${Math.ceil(e.clientHeight)}px`) : t.style.setProperty("--footer-height", "70px"));
+			}
+		}, 0);
+	}, [o, r]), /* @__PURE__ */ p(a, { children: [/* @__PURE__ */ f(b, {}), /* @__PURE__ */ f(O, { children: /* @__PURE__ */ f(i.Content, {
+		ref: n,
+		...t,
+		children: e
+	}) })] });
 });
-g.displayName = o.Content.displayName;
-const O = e(t(g), "content"), h = u(
-  ({ children: l, showCloseTrigger: s = !0, ...a }, i) => /* @__PURE__ */ p(c.header, { ...a, ref: i, children: [
-    l,
-    s && /* @__PURE__ */ r(k, { asChild: !0, children: /* @__PURE__ */ r(B, { ml: "auto", "aria-label": "close", variant: "tertiary", children: /* @__PURE__ */ r("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ r(
-      "path",
-      {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z",
-        fill: "currentColor"
-      }
-    ) }) }) })
-  ] })
-);
-h.displayName = "DialogHeader";
-const Q = e(t(h), "header"), V = e(t(c.main), "body"), Z = e(t(c.footer), "footer"), R = e(t(o.Positioner), "positioner"), G = e(t(o.Title), "title"), J = e(t(o.Trigger), "trigger");
-export {
-  M as Backdrop,
-  V as Body,
-  F as CloseTrigger,
-  O as Content,
-  Z as Footer,
-  Q as Header,
-  R as Positioner,
-  A as Root,
-  G as Title,
-  J as Trigger
-};
-//# sourceMappingURL=styled.js.map
+S.displayName = i.Content.displayName;
+var C = v(c(S), "content"), w = u(({ children: e, showCloseTrigger: t = !0, ...i }, a) => /* @__PURE__ */ p(o.header, {
+	...i,
+	ref: a,
+	children: [e, t && /* @__PURE__ */ f(r, {
+		asChild: !0,
+		children: /* @__PURE__ */ f(n, {
+			ml: "auto",
+			"aria-label": "close",
+			variant: "tertiary",
+			children: /* @__PURE__ */ f("svg", {
+				width: "16",
+				height: "16",
+				viewBox: "0 0 16 16",
+				fill: "none",
+				xmlns: "http://www.w3.org/2000/svg",
+				children: /* @__PURE__ */ f("path", {
+					fillRule: "evenodd",
+					clipRule: "evenodd",
+					d: "M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z",
+					fill: "currentColor"
+				})
+			})
+		})
+	})]
+}));
+w.displayName = "DialogHeader";
+var T = v(c(w), "header"), E = v(c(o.main), "body"), D = v(c(o.footer), "footer"), O = v(c(i.Positioner), "positioner"), k = v(c(i.Title), "title"), A = v(c(i.Trigger), "trigger");
+//#endregion
+export { g as styled_exports };
+
+//# sourceMappingURL=styled.js.map

package/dist/components/dialog/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/dialog/styled.tsx"],"sourcesContent":["import { ark, Dialog as ArkDialog, Portal, useDialogContext } from '@ark-ui/react'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { dialog } from '@stokelp/styled-system/recipes'\nimport { ComponentProps, ComponentPropsWithoutRef, ElementRef, forwardRef, useLayoutEffect } from 'react'\nimport { createStyleContext } from '~/utils/slots'\nimport { IconButton } from '~/components/icon-button'\nimport { DrawerCloseTrigger } from '~/components'\nimport { useMediaQuery } from 'usehooks-ts'\nimport { token } from '@stokelp/styled-system/tokens'\n\nconst { withProvider, withContext } = createStyleContext(dialog, {\n  dataAttr: true,\n})\n\nexport const Root = withProvider(ArkDialog.Root, undefined, {\n  defaultProps: {\n    lazyMount: true,\n    unmountOnExit: true,\n  },\n})\nexport const Backdrop = withContext(styled(ArkDialog.Backdrop), 'backdrop')\nexport const CloseTrigger = withContext(styled(ArkDialog.CloseTrigger), 'closeTrigger')\n\nconst InternalContent = forwardRef<\n  ElementRef<typeof ArkDialog.Content>,\n  ComponentPropsWithoutRef<typeof ArkDialog.Content>\n>(({ children, ...props }, ref) => {\n  const isMobile = useMediaQuery(`(max-width: ${token('breakpoints.md')})`, {\n    defaultValue: false,\n  })\n  const { open, getContentProps } = useDialogContext()\n\n  useLayoutEffect(() => {\n    if (!open) return\n    const { id } = getContentProps()\n    if (!id) return\n    setTimeout(() => {\n      const $content = document.getElementById(id)\n\n      if ($content) {\n        const $footer = $content.querySelector('footer')\n        if ($footer) {\n          if (isMobile) {\n            $content.style.setProperty('--footer-height', `${Math.ceil($footer.clientHeight)}px`)\n          } else {\n            $content.style.setProperty('--footer-height', `70px`)\n          }\n        }\n      }\n    }, 0)\n  }, [open, isMobile])\n\n  return (\n    <Portal>\n      <Backdrop />\n      <Positioner>\n        <ArkDialog.Content ref={ref} {...props}>\n          {children}\n        </ArkDialog.Content>\n      </Positioner>\n    </Portal>\n  )\n})\nInternalContent.displayName = ArkDialog.Content.displayName\n\nexport const Content = withContext(styled(InternalContent), 'content')\n\ntype HeaderProps = ComponentPropsWithoutRef<typeof ark.header> & {\n  showCloseTrigger?: boolean\n}\nconst InternalHeader = forwardRef<ElementRef<typeof ark.header>, HeaderProps>(\n  ({ children, showCloseTrigger = true, ...props }, ref) => (\n    <ark.header {...props} ref={ref}>\n      {children}\n      {showCloseTrigger && (\n        <DrawerCloseTrigger asChild>\n          <IconButton ml=\"auto\" aria-label=\"close\" variant=\"tertiary\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </IconButton>\n        </DrawerCloseTrigger>\n      )}\n    </ark.header>\n  ),\n)\nInternalHeader.displayName = 'DialogHeader'\n\nexport const Header = withContext(styled(InternalHeader), 'header')\nexport const Body = withContext(styled(ark.main), 'body')\nexport const Footer = withContext(styled(ark.footer), 'footer')\nexport const Positioner = withContext(styled(ArkDialog.Positioner), 'positioner')\nexport const Title = withContext(styled(ArkDialog.Title), 'title')\nexport const Trigger = withContext(styled(ArkDialog.Trigger), 'trigger')\n\nexport interface DialogProps extends ComponentProps<typeof Root> {}\nexport interface DialogBackdropProps extends ComponentProps<typeof Backdrop> {}\nexport interface DialogCloseTriggerProps extends ComponentProps<typeof CloseTrigger> {}\nexport interface DialogContentProps extends ComponentProps<typeof Content> {}\nexport interface DialogHeaderProps extends ComponentProps<typeof Header> {}\nexport interface DialogBodyProps extends ComponentProps<typeof Body> {}\nexport interface DialogFooterProps extends ComponentProps<typeof Footer> {}\nexport interface DialogPositionerProps extends ComponentProps<typeof Positioner> {}\nexport interface DialogTitleProps extends ComponentProps<typeof Title> {}\nexport interface DialogTriggerProps extends ComponentProps<typeof Trigger> {}\n"],"names":["withProvider","withContext","createStyleContext","dialog","Root","ArkDialog","Backdrop","styled","CloseTrigger","InternalContent","forwardRef","children","props","ref","isMobile","useMediaQuery","token","open","getContentProps","useDialogContext","useLayoutEffect","id","$content","$footer","Portal","jsx","Positioner","Content","InternalHeader","showCloseTrigger","ark","DrawerCloseTrigger","IconButton","Header","Body","Footer","Title","Trigger"],"mappings":";;;;;;;;;;;AAUA,MAAM,EAAE,cAAAA,GAAc,aAAAC,MAAgBC,EAAmBC,GAAQ;AAAA,EAC/D,UAAU;AACZ,CAAC,GAEYC,IAAOJ,EAAaK,EAAU,MAAM,QAAW;AAAA,EAC1D,cAAc;AAAA,IACZ,WAAW;AAAA,IACX,eAAe;AAAA,EAAA;AAEnB,CAAC,GACYC,IAAWL,EAAYM,EAAOF,EAAU,QAAQ,GAAG,UAAU,GAC7DG,IAAeP,EAAYM,EAAOF,EAAU,YAAY,GAAG,cAAc,GAEhFI,IAAkBC,EAGtB,CAAC,EAAE,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAAQ;AACjC,QAAMC,IAAWC,EAAc,eAAeC,EAAM,gBAAgB,CAAC,KAAK;AAAA,IACxE,cAAc;AAAA,EAAA,CACf,GACK,EAAE,MAAAC,GAAM,iBAAAC,EAAA,IAAoBC,EAAA;AAElC,SAAAC,EAAgB,MAAM;AACpB,QAAI,CAACH,EAAM;AACX,UAAM,EAAE,IAAAI,EAAA,IAAOH,EAAA;AACf,IAAKG,KACL,WAAW,MAAM;AACf,YAAMC,IAAW,SAAS,eAAeD,CAAE;AAE3C,UAAIC,GAAU;AACZ,cAAMC,IAAUD,EAAS,cAAc,QAAQ;AAC/C,QAAIC,MACET,IACFQ,EAAS,MAAM,YAAY,mBAAmB,GAAG,KAAK,KAAKC,EAAQ,YAAY,CAAC,IAAI,IAEpFD,EAAS,MAAM,YAAY,mBAAmB,MAAM;AAAA,MAG1D;AAAA,IACF,GAAG,CAAC;AAAA,EACN,GAAG,CAACL,GAAMH,CAAQ,CAAC,qBAGhBU,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACnB,GAAA,EAAS;AAAA,IACV,gBAAAmB,EAACC,GAAA,EACC,UAAA,gBAAAD,EAACpB,EAAU,SAAV,EAAkB,KAAAQ,GAAW,GAAGD,GAC9B,UAAAD,EAAA,CACH,EAAA,CACF;AAAA,EAAA,GACF;AAEJ,CAAC;AACDF,EAAgB,cAAcJ,EAAU,QAAQ;AAEzC,MAAMsB,IAAU1B,EAAYM,EAAOE,CAAe,GAAG,SAAS,GAK/DmB,IAAiBlB;AAAA,EACrB,CAAC,EAAE,UAAAC,GAAU,kBAAAkB,IAAmB,IAAM,GAAGjB,EAAA,GAASC,wBAC/CiB,EAAI,QAAJ,EAAY,GAAGlB,GAAO,KAAAC,GACpB,UAAA;AAAA,IAAAF;AAAA,IACAkB,KACC,gBAAAJ,EAACM,GAAA,EAAmB,SAAO,IACzB,4BAACC,GAAA,EAAW,IAAG,QAAO,cAAW,SAAQ,SAAQ,YAC/C,UAAA,gBAAAP,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,OAAM,8BAChE,UAAA,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,UAAS;AAAA,QACT,GAAE;AAAA,QACF,MAAK;AAAA,MAAA;AAAA,IAAA,EACP,CACF,GACF,EAAA,CACF;AAAA,EAAA,EAAA,CAEJ;AAEJ;AACAG,EAAe,cAAc;AAEtB,MAAMK,IAAShC,EAAYM,EAAOqB,CAAc,GAAG,QAAQ,GACrDM,IAAOjC,EAAYM,EAAOuB,EAAI,IAAI,GAAG,MAAM,GAC3CK,IAASlC,EAAYM,EAAOuB,EAAI,MAAM,GAAG,QAAQ,GACjDJ,IAAazB,EAAYM,EAAOF,EAAU,UAAU,GAAG,YAAY,GACnE+B,IAAQnC,EAAYM,EAAOF,EAAU,KAAK,GAAG,OAAO,GACpDgC,IAAUpC,EAAYM,EAAOF,EAAU,OAAO,GAAG,SAAS;"}
+{"version":3,"file":"styled.js","names":[],"sources":["../../../src/components/dialog/styled.tsx"],"sourcesContent":["import { ark, Dialog as ArkDialog, Portal, useDialogContext } from '@ark-ui/react'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { dialog } from '@stokelp/styled-system/recipes'\nimport { ComponentProps, ComponentPropsWithoutRef, ElementRef, forwardRef, useLayoutEffect } from 'react'\nimport { createStyleContext } from '~/utils/slots'\nimport { IconButton } from '~/components/icon-button'\nimport { DrawerCloseTrigger } from '~/components'\nimport { useMediaQuery } from 'usehooks-ts'\nimport { token } from '@stokelp/styled-system/tokens'\n\nconst { withProvider, withContext } = createStyleContext(dialog, {\n  dataAttr: true,\n})\n\nexport const Root = withProvider(ArkDialog.Root, undefined, {\n  defaultProps: {\n    lazyMount: true,\n    unmountOnExit: true,\n  },\n})\nexport const Backdrop = withContext(styled(ArkDialog.Backdrop), 'backdrop')\nexport const CloseTrigger = withContext(styled(ArkDialog.CloseTrigger), 'closeTrigger')\n\nconst InternalContent = forwardRef<\n  ElementRef<typeof ArkDialog.Content>,\n  ComponentPropsWithoutRef<typeof ArkDialog.Content>\n>(({ children, ...props }, ref) => {\n  const isMobile = useMediaQuery(`(max-width: ${token('breakpoints.md')})`, {\n    defaultValue: false,\n  })\n  const { open, getContentProps } = useDialogContext()\n\n  useLayoutEffect(() => {\n    if (!open) return\n    const { id } = getContentProps()\n    if (!id) return\n    setTimeout(() => {\n      const $content = document.getElementById(id)\n\n      if ($content) {\n        const $footer = $content.querySelector('footer')\n        if ($footer) {\n          if (isMobile) {\n            $content.style.setProperty('--footer-height', `${Math.ceil($footer.clientHeight)}px`)\n          } else {\n            $content.style.setProperty('--footer-height', `70px`)\n          }\n        }\n      }\n    }, 0)\n  }, [open, isMobile])\n\n  return (\n    <Portal>\n      <Backdrop />\n      <Positioner>\n        <ArkDialog.Content ref={ref} {...props}>\n          {children}\n        </ArkDialog.Content>\n      </Positioner>\n    </Portal>\n  )\n})\nInternalContent.displayName = ArkDialog.Content.displayName\n\nexport const Content = withContext(styled(InternalContent), 'content')\n\ntype HeaderProps = ComponentPropsWithoutRef<typeof ark.header> & {\n  showCloseTrigger?: boolean\n}\nconst InternalHeader = forwardRef<ElementRef<typeof ark.header>, HeaderProps>(\n  ({ children, showCloseTrigger = true, ...props }, ref) => (\n    <ark.header {...props} ref={ref}>\n      {children}\n      {showCloseTrigger && (\n        <DrawerCloseTrigger asChild>\n          <IconButton ml=\"auto\" aria-label=\"close\" variant=\"tertiary\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </IconButton>\n        </DrawerCloseTrigger>\n      )}\n    </ark.header>\n  ),\n)\nInternalHeader.displayName = 'DialogHeader'\n\nexport const Header = withContext(styled(InternalHeader), 'header')\nexport const Body = withContext(styled(ark.main), 'body')\nexport const Footer = withContext(styled(ark.footer), 'footer')\nexport const Positioner = withContext(styled(ArkDialog.Positioner), 'positioner')\nexport const Title = withContext(styled(ArkDialog.Title), 'title')\nexport const Trigger = withContext(styled(ArkDialog.Trigger), 'trigger')\n\nexport interface DialogProps extends ComponentProps<typeof Root> {}\nexport interface DialogBackdropProps extends ComponentProps<typeof Backdrop> {}\nexport interface DialogCloseTriggerProps extends ComponentProps<typeof CloseTrigger> {}\nexport interface DialogContentProps extends ComponentProps<typeof Content> {}\nexport interface DialogHeaderProps extends ComponentProps<typeof Header> {}\nexport interface DialogBodyProps extends ComponentProps<typeof Body> {}\nexport interface DialogFooterProps extends ComponentProps<typeof Footer> {}\nexport interface DialogPositionerProps extends ComponentProps<typeof Positioner> {}\nexport interface DialogTitleProps extends ComponentProps<typeof Title> {}\nexport interface DialogTriggerProps extends ComponentProps<typeof Trigger> {}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;IAUM,EAAE,iBAAc,mBAAgB,EAAmB,GAAQ,EAC/D,UAAU,GACZ,CAAC,GAEY,IAAO,EAAa,EAAU,MAAM,KAAA,GAAW,EAC1D,cAAc;CACZ,WAAW;CACX,eAAe;AACjB,EACF,CAAC,GACY,IAAW,EAAY,EAAO,EAAU,QAAQ,GAAG,UAAU,GAC7D,IAAe,EAAY,EAAO,EAAU,YAAY,GAAG,cAAc,GAEhF,IAAkB,GAGrB,EAAE,aAAU,GAAG,KAAS,MAAQ;CACjC,IAAM,IAAW,EAAc,eAAe,EAAM,gBAAgB,EAAE,IAAI,EACxE,cAAc,GAChB,CAAC,GACK,EAAE,SAAM,uBAAoB,EAAiB;CAsBnD,OApBA,QAAsB;EACpB,IAAI,CAAC,GAAM;EACX,IAAM,EAAE,UAAO,EAAgB;EAC1B,KACL,iBAAiB;GACf,IAAM,IAAW,SAAS,eAAe,CAAE;GAE3C,IAAI,GAAU;IACZ,IAAM,IAAU,EAAS,cAAc,QAAQ;IAC/C,AAAI,MACE,IACF,EAAS,MAAM,YAAY,mBAAmB,GAAG,KAAK,KAAK,EAAQ,YAAY,EAAE,GAAG,IAEpF,EAAS,MAAM,YAAY,mBAAmB,MAAM;GAG1D;EACF,GAAG,CAAC;CACN,GAAG,CAAC,GAAM,CAAQ,CAAC,GAGjB,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,CAAW,CAAA,GACX,kBAAC,GAAD,EAAA,UACE,kBAAC,EAAU,SAAX;EAAwB;EAAK,GAAI;EAC9B;CACgB,CAAA,EACT,CAAA,CACN,EAAA,CAAA;AAEZ,CAAC;AACD,EAAgB,cAAc,EAAU,QAAQ;AAEhD,IAAa,IAAU,EAAY,EAAO,CAAe,GAAG,SAAS,GAK/D,IAAiB,GACpB,EAAE,aAAU,sBAAmB,IAAM,GAAG,KAAS,MAChD,kBAAC,EAAI,QAAL;CAAY,GAAI;CAAY;WAA5B,CACG,GACA,KACC,kBAAC,GAAD;EAAoB,SAAA;YAClB,kBAAC,GAAD;GAAY,IAAG;GAAO,cAAW;GAAQ,SAAQ;aAC/C,kBAAC,OAAD;IAAK,OAAM;IAAK,QAAO;IAAK,SAAQ;IAAY,MAAK;IAAO,OAAM;cAChE,kBAAC,QAAD;KACE,UAAS;KACT,UAAS;KACT,GAAE;KACF,MAAK;IACN,CAAA;GACE,CAAA;EACK,CAAA;CACM,CAAA,CAEZ;EAEhB;AACA,EAAe,cAAc;AAE7B,IAAa,IAAS,EAAY,EAAO,CAAc,GAAG,QAAQ,GACrD,IAAO,EAAY,EAAO,EAAI,IAAI,GAAG,MAAM,GAC3C,IAAS,EAAY,EAAO,EAAI,MAAM,GAAG,QAAQ,GACjD,IAAa,EAAY,EAAO,EAAU,UAAU,GAAG,YAAY,GACnE,IAAQ,EAAY,EAAO,EAAU,KAAK,GAAG,OAAO,GACpD,IAAU,EAAY,EAAO,EAAU,OAAO,GAAG,SAAS"}

package/dist/components/drawer/Drawer.cjs

@@ -1,2 +1,2 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),e=require("@ark-ui/react"),x=require("usehooks-ts"),o=require("@stokelp/styled-system/jsx"),p=require("@stokelp/styled-system/recipes"),m=require("@stokelp/styled-system/tokens"),d=require("react"),j=require("../../utils/slots.cjs"),v=require("../icon-button/IconButton.cjs"),{withProvider:T,withContext:t}=j.createStyleContext(p.drawer),b=T(e.Dialog.Root,void 0,{defaultProps:{unmountOnExit:!0,lazyMount:!0}}),k=t(o.styled(e.ark.main),"body"),y=t(o.styled(e.Dialog.CloseTrigger),"closeTrigger"),q=t(o.styled(e.ark.footer),"footer"),C=d.forwardRef(({children:s,showCloseTrigger:i=!0,...a},n)=>r.jsxs(e.ark.header,{...a,ref:n,children:[s,i&&r.jsx(y,{asChild:!0,children:r.jsx(v.IconButton,{ml:"auto","aria-label":"close",variant:"tertiary",children:r.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z",fill:"currentColor"})})})})]}));C.displayName="DrawerHeader";const L=t(C,"header"),B=t(o.styled(e.Dialog.Title),"title"),R=t(o.styled(e.Dialog.Trigger),"trigger"),P=t(o.styled(e.Dialog.Positioner),"positioner"),M=t(o.styled(e.Dialog.Backdrop),"backdrop"),f=d.forwardRef(({children:s,...i},a)=>{const n=x.useMediaQuery(`(max-width: ${m.token("breakpoints.md")})`,{defaultValue:!1}),{open:u,getContentProps:h}=e.useDialogContext();return d.useLayoutEffect(()=>{if(!u)return;const{id:g}=h();if(!g)return;const l=document.getElementById(g);if(!l)return;const c=l.querySelector("footer");if(!c)return;const w=()=>{l.style.setProperty("--footer-height",`${Math.ceil(c.clientHeight)}px`)};if(w(),n)return;const D=new ResizeObserver(w);return D.observe(c),()=>D.disconnect()},[u,n]),r.jsxs(r.Fragment,{children:[r.jsx(M,{}),r.jsx(P,{children:r.jsx(e.Dialog.Content,{ref:a,...i,children:s})})]})});f.displayName=e.Dialog.Content.displayName;const H=t(o.styled(f),"content"),S=e.Dialog.Context;exports.Drawer=b;exports.DrawerBody=k;exports.DrawerCloseTrigger=y;exports.DrawerContent=H;exports.DrawerContext=S;exports.DrawerFooter=q;exports.DrawerHeader=L;exports.DrawerTitle=B;exports.DrawerTrigger=R;
-//# sourceMappingURL=Drawer.cjs.map
+"use client";const e=require("../../utils/slots.cjs"),t=require("../icon-button/IconButton.cjs");let n=require("@ark-ui/react"),r=require("@stokelp/styled-system/jsx"),i=require("@stokelp/styled-system/recipes"),a=require("react"),o=require("react/jsx-runtime"),s=require("usehooks-ts"),c=require("@stokelp/styled-system/tokens");var{withProvider:l,withContext:u}=e.createStyleContext(i.drawer),d=l(n.Dialog.Root,void 0,{defaultProps:{unmountOnExit:!0,lazyMount:!0}}),f=u((0,r.styled)(n.ark.main),`body`),p=u((0,r.styled)(n.Dialog.CloseTrigger),`closeTrigger`),m=u((0,r.styled)(n.ark.footer),`footer`),h=(0,a.forwardRef)(({children:e,showCloseTrigger:r=!0,...i},a)=>(0,o.jsxs)(n.ark.header,{...i,ref:a,children:[e,r&&(0,o.jsx)(p,{asChild:!0,children:(0,o.jsx)(t.IconButton,{ml:`auto`,"aria-label":`close`,variant:`tertiary`,children:(0,o.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,o.jsx)(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z`,fill:`currentColor`})})})})]}));h.displayName=`DrawerHeader`;var g=u(h,`header`),_=u((0,r.styled)(n.Dialog.Title),`title`),v=u((0,r.styled)(n.Dialog.Trigger),`trigger`),y=u((0,r.styled)(n.Dialog.Positioner),`positioner`),b=u((0,r.styled)(n.Dialog.Backdrop),`backdrop`),x=(0,a.forwardRef)(({children:e,...t},r)=>{let i=(0,s.useMediaQuery)(`(max-width: ${(0,c.token)(`breakpoints.md`)})`,{defaultValue:!1}),{open:l,getContentProps:u}=(0,n.useDialogContext)();return(0,a.useLayoutEffect)(()=>{if(!l)return;let{id:e}=u();if(!e)return;let t=document.getElementById(e);if(t){let e=t.querySelector(`footer`);e&&(i?t.style.setProperty(`--footer-height`,`${Math.ceil(e.clientHeight)}px`):t.style.setProperty(`--footer-height`,`70px`))}},[l,i]),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(b,{}),(0,o.jsx)(y,{children:(0,o.jsx)(n.Dialog.Content,{ref:r,...t,children:e})})]})});x.displayName=n.Dialog.Content.displayName;var S=u((0,r.styled)(x),`content`),C=n.Dialog.Context;exports.Drawer=d,exports.DrawerBody=f,exports.DrawerCloseTrigger=p,exports.DrawerContent=S,exports.DrawerContext=C,exports.DrawerFooter=m,exports.DrawerHeader=g,exports.DrawerTitle=_,exports.DrawerTrigger=v;
+//# sourceMappingURL=Drawer.cjs.map

package/dist/components/drawer/Drawer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.cjs","sources":["../../../src/components/drawer/Drawer.tsx"],"sourcesContent":["import { ark, Dialog as ArkDrawer, useDialogContext } from '@ark-ui/react'\nimport { useMediaQuery } from 'usehooks-ts'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { drawer } from '@stokelp/styled-system/recipes'\nimport { token } from '@stokelp/styled-system/tokens'\nimport { ComponentProps, ComponentPropsWithoutRef, ElementRef, forwardRef, useLayoutEffect } from 'react'\n\nimport { createStyleContext } from '~/utils/slots'\nimport { IconButton } from '~/components/icon-button'\n\nconst { withProvider, withContext } = createStyleContext(drawer)\n\nexport const Drawer = withProvider(ArkDrawer.Root, undefined, {\n  defaultProps: {\n    unmountOnExit: true,\n    lazyMount: true,\n  },\n})\nexport const DrawerBody = withContext(styled(ark.main), 'body')\nexport const DrawerCloseTrigger = withContext(styled(ArkDrawer.CloseTrigger), 'closeTrigger')\nexport const DrawerFooter = withContext(styled(ark.footer), 'footer')\n\ntype HeaderProps = ComponentPropsWithoutRef<typeof ark.header> & {\n  showCloseTrigger?: boolean\n}\n\nconst Header = forwardRef<ElementRef<typeof ark.header>, HeaderProps>(\n  ({ children, showCloseTrigger = true, ...props }, ref) => (\n    <ark.header {...props} ref={ref}>\n      {children}\n      {showCloseTrigger && (\n        <DrawerCloseTrigger asChild>\n          <IconButton ml=\"auto\" aria-label=\"close\" variant=\"tertiary\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </IconButton>\n        </DrawerCloseTrigger>\n      )}\n    </ark.header>\n  ),\n)\nHeader.displayName = 'DrawerHeader'\n\nexport const DrawerHeader = withContext(Header, 'header')\nexport const DrawerTitle = withContext(styled(ArkDrawer.Title), 'title')\nexport const DrawerTrigger = withContext(styled(ArkDrawer.Trigger), 'trigger')\n\nconst DrawerPositioner = withContext(styled(ArkDrawer.Positioner), 'positioner')\nconst DrawerBackdrop = withContext(styled(ArkDrawer.Backdrop), 'backdrop')\n\nconst Content = forwardRef<ElementRef<typeof ArkDrawer.Content>, ComponentPropsWithoutRef<typeof ArkDrawer.Content>>(\n  ({ children, ...props }, ref) => {\n    const isMobile = useMediaQuery(`(max-width: ${token('breakpoints.md')})`, {\n      defaultValue: false,\n    })\n    const { open, getContentProps } = useDialogContext()\n\n    useLayoutEffect(() => {\n      if (!open) return\n      const { id } = getContentProps()\n      if (!id) return\n      const $content = document.getElementById(id)\n      if (!$content) return\n      const $footer = $content.querySelector('footer')\n      if (!$footer) return\n      const update = () => {\n        $content.style.setProperty('--footer-height', `${Math.ceil($footer.clientHeight)}px`)\n      }\n      update()\n      if (isMobile) return\n      const observer = new ResizeObserver(update)\n      observer.observe($footer)\n      return () => observer.disconnect()\n    }, [open, isMobile])\n\n    return (\n      <>\n        <DrawerBackdrop />\n        <DrawerPositioner>\n          <ArkDrawer.Content ref={ref} {...props}>\n            {children}\n          </ArkDrawer.Content>\n        </DrawerPositioner>\n      </>\n    )\n  },\n)\nContent.displayName = ArkDrawer.Content.displayName\n\nexport const DrawerContent = withContext(styled(Content), 'content')\nexport const DrawerContext = ArkDrawer.Context\n\nexport interface DrawerProps extends ComponentProps<typeof Drawer> {}\nexport interface DrawerBackdropProps extends ComponentProps<typeof DrawerBackdrop> {}\nexport interface DrawerBodyProps extends ComponentProps<typeof DrawerBody> {}\nexport interface DrawerCloseTriggerProps extends ComponentProps<typeof DrawerCloseTrigger> {}\nexport interface DrawerContentProps extends ComponentProps<typeof DrawerContent> {}\nexport interface DrawerFooterProps extends ComponentProps<typeof DrawerFooter> {}\nexport interface DrawerHeaderProps extends ComponentProps<typeof DrawerHeader> {}\nexport interface DrawerPositionerProps extends ComponentProps<typeof DrawerPositioner> {}\nexport interface DrawerTitleProps extends ComponentProps<typeof DrawerTitle> {}\nexport interface DrawerTriggerProps extends ComponentProps<typeof DrawerTrigger> {}\nexport interface DrawerContextProps extends ComponentProps<typeof DrawerContext> {}\n"],"names":["withProvider","withContext","createStyleContext","drawer","Drawer","ArkDrawer","DrawerBody","styled","ark","DrawerCloseTrigger","DrawerFooter","Header","forwardRef","children","showCloseTrigger","props","ref","jsx","IconButton","DrawerHeader","DrawerTitle","DrawerTrigger","DrawerPositioner","DrawerBackdrop","Content","isMobile","useMediaQuery","token","open","getContentProps","useDialogContext","useLayoutEffect","id","$content","$footer","update","observer","jsxs","Fragment","DrawerContent","DrawerContext"],"mappings":"sZAUM,CAAE,aAAAA,EAAc,YAAAC,GAAgBC,EAAAA,mBAAmBC,EAAAA,MAAM,EAElDC,EAASJ,EAAaK,SAAU,KAAM,OAAW,CAC5D,aAAc,CACZ,cAAe,GACf,UAAW,EAAA,CAEf,CAAC,EACYC,EAAaL,EAAYM,EAAAA,OAAOC,EAAAA,IAAI,IAAI,EAAG,MAAM,EACjDC,EAAqBR,EAAYM,EAAAA,OAAOF,EAAAA,OAAU,YAAY,EAAG,cAAc,EAC/EK,EAAeT,EAAYM,EAAAA,OAAOC,EAAAA,IAAI,MAAM,EAAG,QAAQ,EAM9DG,EAASC,EAAAA,WACb,CAAC,CAAE,SAAAC,EAAU,iBAAAC,EAAmB,GAAM,GAAGC,CAAA,EAASC,WAC/CR,EAAAA,IAAI,OAAJ,CAAY,GAAGO,EAAO,IAAAC,EACpB,SAAA,CAAAH,EACAC,GACCG,EAAAA,IAACR,EAAA,CAAmB,QAAO,GACzB,eAACS,EAAAA,WAAA,CAAW,GAAG,OAAO,aAAW,QAAQ,QAAQ,WAC/C,SAAAD,EAAAA,IAAC,MAAA,CAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAAA,IAAC,OAAA,CACC,SAAS,UACT,SAAS,UACT,EAAE,4fACF,KAAK,cAAA,CAAA,CACP,CACF,EACF,CAAA,CACF,CAAA,CAAA,CAEJ,CAEJ,EACAN,EAAO,YAAc,eAEd,MAAMQ,EAAelB,EAAYU,EAAQ,QAAQ,EAC3CS,EAAcnB,EAAYM,EAAAA,OAAOF,EAAAA,OAAU,KAAK,EAAG,OAAO,EAC1DgB,EAAgBpB,EAAYM,EAAAA,OAAOF,EAAAA,OAAU,OAAO,EAAG,SAAS,EAEvEiB,EAAmBrB,EAAYM,EAAAA,OAAOF,EAAAA,OAAU,UAAU,EAAG,YAAY,EACzEkB,EAAiBtB,EAAYM,EAAAA,OAAOF,EAAAA,OAAU,QAAQ,EAAG,UAAU,EAEnEmB,EAAUZ,EAAAA,WACd,CAAC,CAAE,SAAAC,EAAU,GAAGE,CAAA,EAASC,IAAQ,CAC/B,MAAMS,EAAWC,EAAAA,cAAc,eAAeC,EAAAA,MAAM,gBAAgB,CAAC,IAAK,CACxE,aAAc,EAAA,CACf,EACK,CAAE,KAAAC,EAAM,gBAAAC,CAAA,EAAoBC,mBAAA,EAElCC,OAAAA,EAAAA,gBAAgB,IAAM,CACpB,GAAI,CAACH,EAAM,OACX,KAAM,CAAE,GAAAI,CAAA,EAAOH,EAAA,EACf,GAAI,CAACG,EAAI,OACT,MAAMC,EAAW,SAAS,eAAeD,CAAE,EAC3C,GAAI,CAACC,EAAU,OACf,MAAMC,EAAUD,EAAS,cAAc,QAAQ,EAC/C,GAAI,CAACC,EAAS,OACd,MAAMC,EAAS,IAAM,CACnBF,EAAS,MAAM,YAAY,kBAAmB,GAAG,KAAK,KAAKC,EAAQ,YAAY,CAAC,IAAI,CACtF,EAEA,GADAC,EAAA,EACIV,EAAU,OACd,MAAMW,EAAW,IAAI,eAAeD,CAAM,EAC1C,OAAAC,EAAS,QAAQF,CAAO,EACjB,IAAME,EAAS,WAAA,CACxB,EAAG,CAACR,EAAMH,CAAQ,CAAC,EAGjBY,EAAAA,KAAAC,WAAA,CACE,SAAA,CAAArB,EAAAA,IAACM,EAAA,EAAe,EAChBN,EAAAA,IAACK,EAAA,CACC,SAAAL,EAAAA,IAACZ,EAAAA,OAAU,QAAV,CAAkB,IAAAW,EAAW,GAAGD,EAC9B,SAAAF,CAAA,CACH,CAAA,CACF,CAAA,EACF,CAEJ,CACF,EACAW,EAAQ,YAAcnB,SAAU,QAAQ,YAEjC,MAAMkC,EAAgBtC,EAAYM,SAAOiB,CAAO,EAAG,SAAS,EACtDgB,EAAgBnC,EAAAA,OAAU"}
+{"version":3,"file":"Drawer.cjs","names":[],"sources":["../../../src/components/drawer/Drawer.tsx"],"sourcesContent":["import { ark, Dialog as ArkDrawer, useDialogContext } from '@ark-ui/react'\nimport { useMediaQuery } from 'usehooks-ts'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { drawer } from '@stokelp/styled-system/recipes'\nimport { token } from '@stokelp/styled-system/tokens'\nimport { ComponentProps, ComponentPropsWithoutRef, ElementRef, forwardRef, useLayoutEffect } from 'react'\n\nimport { createStyleContext } from '~/utils/slots'\nimport { IconButton } from '~/components/icon-button'\n\nconst { withProvider, withContext } = createStyleContext(drawer)\n\nexport const Drawer = withProvider(ArkDrawer.Root, undefined, {\n  defaultProps: {\n    unmountOnExit: true,\n    lazyMount: true,\n  },\n})\nexport const DrawerBody = withContext(styled(ark.main), 'body')\nexport const DrawerCloseTrigger = withContext(styled(ArkDrawer.CloseTrigger), 'closeTrigger')\nexport const DrawerFooter = withContext(styled(ark.footer), 'footer')\n\ntype HeaderProps = ComponentPropsWithoutRef<typeof ark.header> & {\n  showCloseTrigger?: boolean\n}\n\nconst Header = forwardRef<ElementRef<typeof ark.header>, HeaderProps>(\n  ({ children, showCloseTrigger = true, ...props }, ref) => (\n    <ark.header {...props} ref={ref}>\n      {children}\n      {showCloseTrigger && (\n        <DrawerCloseTrigger asChild>\n          <IconButton ml=\"auto\" aria-label=\"close\" variant=\"tertiary\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </IconButton>\n        </DrawerCloseTrigger>\n      )}\n    </ark.header>\n  ),\n)\nHeader.displayName = 'DrawerHeader'\n\nexport const DrawerHeader = withContext(Header, 'header')\nexport const DrawerTitle = withContext(styled(ArkDrawer.Title), 'title')\nexport const DrawerTrigger = withContext(styled(ArkDrawer.Trigger), 'trigger')\n\nconst DrawerPositioner = withContext(styled(ArkDrawer.Positioner), 'positioner')\nconst DrawerBackdrop = withContext(styled(ArkDrawer.Backdrop), 'backdrop')\n\nconst Content = forwardRef<ElementRef<typeof ArkDrawer.Content>, ComponentPropsWithoutRef<typeof ArkDrawer.Content>>(\n  ({ children, ...props }, ref) => {\n    const isMobile = useMediaQuery(`(max-width: ${token('breakpoints.md')})`, {\n      defaultValue: false,\n    })\n    const { open, getContentProps } = useDialogContext()\n\n    useLayoutEffect(() => {\n      if (!open) return\n      const { id } = getContentProps()\n      if (!id) return\n      const $content = document.getElementById(id)\n      if ($content) {\n        const $footer = $content.querySelector('footer')\n        if ($footer) {\n          if (isMobile) {\n            $content.style.setProperty('--footer-height', `${Math.ceil($footer.clientHeight)}px`)\n          } else {\n            $content.style.setProperty('--footer-height', `70px`)\n          }\n        }\n      }\n    }, [open, isMobile])\n\n    return (\n      <>\n        <DrawerBackdrop />\n        <DrawerPositioner>\n          <ArkDrawer.Content ref={ref} {...props}>\n            {children}\n          </ArkDrawer.Content>\n        </DrawerPositioner>\n      </>\n    )\n  },\n)\nContent.displayName = ArkDrawer.Content.displayName\n\nexport const DrawerContent = withContext(styled(Content), 'content')\nexport const DrawerContext = ArkDrawer.Context\n\nexport interface DrawerProps extends ComponentProps<typeof Drawer> {}\nexport interface DrawerBackdropProps extends ComponentProps<typeof DrawerBackdrop> {}\nexport interface DrawerBodyProps extends ComponentProps<typeof DrawerBody> {}\nexport interface DrawerCloseTriggerProps extends ComponentProps<typeof DrawerCloseTrigger> {}\nexport interface DrawerContentProps extends ComponentProps<typeof DrawerContent> {}\nexport interface DrawerFooterProps extends ComponentProps<typeof DrawerFooter> {}\nexport interface DrawerHeaderProps extends ComponentProps<typeof DrawerHeader> {}\nexport interface DrawerPositionerProps extends ComponentProps<typeof DrawerPositioner> {}\nexport interface DrawerTitleProps extends ComponentProps<typeof DrawerTitle> {}\nexport interface DrawerTriggerProps extends ComponentProps<typeof DrawerTrigger> {}\nexport interface DrawerContextProps extends ComponentProps<typeof DrawerContext> {}\n"],"mappings":"0UAUA,GAAM,CAAE,eAAc,eAAgB,EAAA,mBAAmB,EAAA,MAAM,EAElD,EAAS,EAAa,EAAA,OAAU,KAAM,IAAA,GAAW,CAC5D,aAAc,CACZ,cAAe,GACf,UAAW,EACb,CACF,CAAC,EACY,EAAa,GAAA,EAAA,EAAA,QAAmB,EAAA,IAAI,IAAI,EAAG,MAAM,EACjD,EAAqB,GAAA,EAAA,EAAA,QAAmB,EAAA,OAAU,YAAY,EAAG,cAAc,EAC/E,EAAe,GAAA,EAAA,EAAA,QAAmB,EAAA,IAAI,MAAM,EAAG,QAAQ,EAM9D,GAAA,EAAA,EAAA,aACH,CAAE,WAAU,mBAAmB,GAAM,GAAG,GAAS,KAChD,EAAA,EAAA,MAAC,EAAA,IAAI,OAAL,CAAY,GAAI,EAAY,eAA5B,CACG,EACA,IACC,EAAA,EAAA,KAAC,EAAD,CAAoB,QAAA,aAClB,EAAA,EAAA,KAAC,EAAA,WAAD,CAAY,GAAG,OAAO,aAAW,QAAQ,QAAQ,qBAC/C,EAAA,EAAA,KAAC,MAAD,CAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,uCAChE,EAAA,EAAA,KAAC,OAAD,CACE,SAAS,UACT,SAAS,UACT,EAAE,4fACF,KAAK,cACN,CAAA,CACE,CAAA,CACK,CAAA,CACM,CAAA,CAEZ,GAEhB,EACA,EAAO,YAAc,eAErB,IAAa,EAAe,EAAY,EAAQ,QAAQ,EAC3C,EAAc,GAAA,EAAA,EAAA,QAAmB,EAAA,OAAU,KAAK,EAAG,OAAO,EAC1D,EAAgB,GAAA,EAAA,EAAA,QAAmB,EAAA,OAAU,OAAO,EAAG,SAAS,EAEvE,EAAmB,GAAA,EAAA,EAAA,QAAmB,EAAA,OAAU,UAAU,EAAG,YAAY,EACzE,EAAiB,GAAA,EAAA,EAAA,QAAmB,EAAA,OAAU,QAAQ,EAAG,UAAU,EAEnE,GAAA,EAAA,EAAA,aACH,CAAE,WAAU,GAAG,GAAS,IAAQ,CAC/B,IAAM,GAAA,EAAA,EAAA,eAAyB,gBAAA,EAAA,EAAA,OAAqB,gBAAgB,EAAE,GAAI,CACxE,aAAc,EAChB,CAAC,EACK,CAAE,OAAM,oBAAA,EAAA,EAAA,kBAAqC,EAmBnD,OAjBA,EAAA,EAAA,qBAAsB,CACpB,GAAI,CAAC,EAAM,OACX,GAAM,CAAE,MAAO,EAAgB,EAC/B,GAAI,CAAC,EAAI,OACT,IAAM,EAAW,SAAS,eAAe,CAAE,EAC3C,GAAI,EAAU,CACZ,IAAM,EAAU,EAAS,cAAc,QAAQ,EAC3C,IACE,EACF,EAAS,MAAM,YAAY,kBAAmB,GAAG,KAAK,KAAK,EAAQ,YAAY,EAAE,GAAG,EAEpF,EAAS,MAAM,YAAY,kBAAmB,MAAM,EAG1D,CACF,EAAG,CAAC,EAAM,CAAQ,CAAC,GAGjB,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,EAAD,CAAiB,CAAA,GACjB,EAAA,EAAA,KAAC,EAAD,CAAA,UACE,EAAA,EAAA,KAAC,EAAA,OAAU,QAAX,CAAwB,MAAK,GAAI,EAC9B,UACgB,CAAA,CACH,CAAA,CAClB,CAAA,CAAA,CAEN,CACF,EACA,EAAQ,YAAc,EAAA,OAAU,QAAQ,YAExC,IAAa,EAAgB,GAAA,EAAA,EAAA,QAAmB,CAAO,EAAG,SAAS,EACtD,EAAgB,EAAA,OAAU"}

package/dist/components/drawer/Drawer.js

@@ -1,69 +1,63 @@
 "use client";
-import { jsxs as w, Fragment as D, jsx as o } from "react/jsx-runtime";
-import { Dialog as e, ark as d, useDialogContext as x } from "@ark-ui/react";
-import { useMediaQuery as v } from "usehooks-ts";
-import { styled as t } from "@stokelp/styled-system/jsx";
-import { drawer as L } from "@stokelp/styled-system/recipes";
-import { token as b } from "@stokelp/styled-system/tokens";
-import { forwardRef as g, useLayoutEffect as T } from "react";
-import { createStyleContext as k } from "../../utils/slots.js";
-import { IconButton as B } from "../icon-button/IconButton.js";
-const { withProvider: P, withContext: r } = k(L), q = P(e.Root, void 0, {
-  defaultProps: {
-    unmountOnExit: !0,
-    lazyMount: !0
-  }
-}), Q = r(t(d.main), "body"), M = r(t(e.CloseTrigger), "closeTrigger"), V = r(t(d.footer), "footer"), C = g(
-  ({ children: i, showCloseTrigger: s = !0, ...a }, n) => /* @__PURE__ */ w(d.header, { ...a, ref: n, children: [
-    i,
-    s && /* @__PURE__ */ o(M, { asChild: !0, children: /* @__PURE__ */ o(B, { ml: "auto", "aria-label": "close", variant: "tertiary", children: /* @__PURE__ */ o("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ o(
-      "path",
-      {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z",
-        fill: "currentColor"
-      }
-    ) }) }) })
-  ] })
-);
-C.displayName = "DrawerHeader";
-const Z = r(C, "header"), A = r(t(e.Title), "title"), G = r(t(e.Trigger), "trigger"), R = r(t(e.Positioner), "positioner"), H = r(t(e.Backdrop), "backdrop"), h = g(
-  ({ children: i, ...s }, a) => {
-    const n = v(`(max-width: ${b("breakpoints.md")})`, {
-      defaultValue: !1
-    }), { open: u, getContentProps: y } = x();
-    return T(() => {
-      if (!u) return;
-      const { id: m } = y();
-      if (!m) return;
-      const l = document.getElementById(m);
-      if (!l) return;
-      const c = l.querySelector("footer");
-      if (!c) return;
-      const f = () => {
-        l.style.setProperty("--footer-height", `${Math.ceil(c.clientHeight)}px`);
-      };
-      if (f(), n) return;
-      const p = new ResizeObserver(f);
-      return p.observe(c), () => p.disconnect();
-    }, [u, n]), /* @__PURE__ */ w(D, { children: [
-      /* @__PURE__ */ o(H, {}),
-      /* @__PURE__ */ o(R, { children: /* @__PURE__ */ o(e.Content, { ref: a, ...s, children: i }) })
-    ] });
-  }
-);
-h.displayName = e.Content.displayName;
-const J = r(t(h), "content"), K = e.Context;
-export {
-  q as Drawer,
-  Q as DrawerBody,
-  M as DrawerCloseTrigger,
-  J as DrawerContent,
-  K as DrawerContext,
-  V as DrawerFooter,
-  Z as DrawerHeader,
-  A as DrawerTitle,
-  G as DrawerTrigger
-};
-//# sourceMappingURL=Drawer.js.map
+import { createStyleContext as e } from "../../utils/slots.js";
+import { IconButton as t } from "../icon-button/IconButton.js";
+import { Dialog as n, ark as r, useDialogContext as i } from "@ark-ui/react";
+import { styled as a } from "@stokelp/styled-system/jsx";
+import { drawer as o } from "@stokelp/styled-system/recipes";
+import { forwardRef as s, useLayoutEffect as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useMediaQuery as f } from "usehooks-ts";
+import { token as p } from "@stokelp/styled-system/tokens";
+//#region src/components/drawer/Drawer.tsx
+var { withProvider: m, withContext: h } = e(o), g = m(n.Root, void 0, { defaultProps: {
+	unmountOnExit: !0,
+	lazyMount: !0
+} }), _ = h(a(r.main), "body"), v = h(a(n.CloseTrigger), "closeTrigger"), y = h(a(r.footer), "footer"), b = s(({ children: e, showCloseTrigger: n = !0, ...i }, a) => /* @__PURE__ */ d(r.header, {
+	...i,
+	ref: a,
+	children: [e, n && /* @__PURE__ */ u(v, {
+		asChild: !0,
+		children: /* @__PURE__ */ u(t, {
+			ml: "auto",
+			"aria-label": "close",
+			variant: "tertiary",
+			children: /* @__PURE__ */ u("svg", {
+				width: "16",
+				height: "16",
+				viewBox: "0 0 16 16",
+				fill: "none",
+				xmlns: "http://www.w3.org/2000/svg",
+				children: /* @__PURE__ */ u("path", {
+					fillRule: "evenodd",
+					clipRule: "evenodd",
+					d: "M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z",
+					fill: "currentColor"
+				})
+			})
+		})
+	})]
+}));
+b.displayName = "DrawerHeader";
+var x = h(b, "header"), S = h(a(n.Title), "title"), C = h(a(n.Trigger), "trigger"), w = h(a(n.Positioner), "positioner"), T = h(a(n.Backdrop), "backdrop"), E = s(({ children: e, ...t }, r) => {
+	let a = f(`(max-width: ${p("breakpoints.md")})`, { defaultValue: !1 }), { open: o, getContentProps: s } = i();
+	return c(() => {
+		if (!o) return;
+		let { id: e } = s();
+		if (!e) return;
+		let t = document.getElementById(e);
+		if (t) {
+			let e = t.querySelector("footer");
+			e && (a ? t.style.setProperty("--footer-height", `${Math.ceil(e.clientHeight)}px`) : t.style.setProperty("--footer-height", "70px"));
+		}
+	}, [o, a]), /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(T, {}), /* @__PURE__ */ u(w, { children: /* @__PURE__ */ u(n.Content, {
+		ref: r,
+		...t,
+		children: e
+	}) })] });
+});
+E.displayName = n.Content.displayName;
+var D = h(a(E), "content"), O = n.Context;
+//#endregion
+export { g as Drawer, _ as DrawerBody, v as DrawerCloseTrigger, D as DrawerContent, O as DrawerContext, y as DrawerFooter, x as DrawerHeader, S as DrawerTitle, C as DrawerTrigger };
+
+//# sourceMappingURL=Drawer.js.map

package/dist/components/drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../src/components/drawer/Drawer.tsx"],"sourcesContent":["import { ark, Dialog as ArkDrawer, useDialogContext } from '@ark-ui/react'\nimport { useMediaQuery } from 'usehooks-ts'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { drawer } from '@stokelp/styled-system/recipes'\nimport { token } from '@stokelp/styled-system/tokens'\nimport { ComponentProps, ComponentPropsWithoutRef, ElementRef, forwardRef, useLayoutEffect } from 'react'\n\nimport { createStyleContext } from '~/utils/slots'\nimport { IconButton } from '~/components/icon-button'\n\nconst { withProvider, withContext } = createStyleContext(drawer)\n\nexport const Drawer = withProvider(ArkDrawer.Root, undefined, {\n  defaultProps: {\n    unmountOnExit: true,\n    lazyMount: true,\n  },\n})\nexport const DrawerBody = withContext(styled(ark.main), 'body')\nexport const DrawerCloseTrigger = withContext(styled(ArkDrawer.CloseTrigger), 'closeTrigger')\nexport const DrawerFooter = withContext(styled(ark.footer), 'footer')\n\ntype HeaderProps = ComponentPropsWithoutRef<typeof ark.header> & {\n  showCloseTrigger?: boolean\n}\n\nconst Header = forwardRef<ElementRef<typeof ark.header>, HeaderProps>(\n  ({ children, showCloseTrigger = true, ...props }, ref) => (\n    <ark.header {...props} ref={ref}>\n      {children}\n      {showCloseTrigger && (\n        <DrawerCloseTrigger asChild>\n          <IconButton ml=\"auto\" aria-label=\"close\" variant=\"tertiary\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </IconButton>\n        </DrawerCloseTrigger>\n      )}\n    </ark.header>\n  ),\n)\nHeader.displayName = 'DrawerHeader'\n\nexport const DrawerHeader = withContext(Header, 'header')\nexport const DrawerTitle = withContext(styled(ArkDrawer.Title), 'title')\nexport const DrawerTrigger = withContext(styled(ArkDrawer.Trigger), 'trigger')\n\nconst DrawerPositioner = withContext(styled(ArkDrawer.Positioner), 'positioner')\nconst DrawerBackdrop = withContext(styled(ArkDrawer.Backdrop), 'backdrop')\n\nconst Content = forwardRef<ElementRef<typeof ArkDrawer.Content>, ComponentPropsWithoutRef<typeof ArkDrawer.Content>>(\n  ({ children, ...props }, ref) => {\n    const isMobile = useMediaQuery(`(max-width: ${token('breakpoints.md')})`, {\n      defaultValue: false,\n    })\n    const { open, getContentProps } = useDialogContext()\n\n    useLayoutEffect(() => {\n      if (!open) return\n      const { id } = getContentProps()\n      if (!id) return\n      const $content = document.getElementById(id)\n      if (!$content) return\n      const $footer = $content.querySelector('footer')\n      if (!$footer) return\n      const update = () => {\n        $content.style.setProperty('--footer-height', `${Math.ceil($footer.clientHeight)}px`)\n      }\n      update()\n      if (isMobile) return\n      const observer = new ResizeObserver(update)\n      observer.observe($footer)\n      return () => observer.disconnect()\n    }, [open, isMobile])\n\n    return (\n      <>\n        <DrawerBackdrop />\n        <DrawerPositioner>\n          <ArkDrawer.Content ref={ref} {...props}>\n            {children}\n          </ArkDrawer.Content>\n        </DrawerPositioner>\n      </>\n    )\n  },\n)\nContent.displayName = ArkDrawer.Content.displayName\n\nexport const DrawerContent = withContext(styled(Content), 'content')\nexport const DrawerContext = ArkDrawer.Context\n\nexport interface DrawerProps extends ComponentProps<typeof Drawer> {}\nexport interface DrawerBackdropProps extends ComponentProps<typeof DrawerBackdrop> {}\nexport interface DrawerBodyProps extends ComponentProps<typeof DrawerBody> {}\nexport interface DrawerCloseTriggerProps extends ComponentProps<typeof DrawerCloseTrigger> {}\nexport interface DrawerContentProps extends ComponentProps<typeof DrawerContent> {}\nexport interface DrawerFooterProps extends ComponentProps<typeof DrawerFooter> {}\nexport interface DrawerHeaderProps extends ComponentProps<typeof DrawerHeader> {}\nexport interface DrawerPositionerProps extends ComponentProps<typeof DrawerPositioner> {}\nexport interface DrawerTitleProps extends ComponentProps<typeof DrawerTitle> {}\nexport interface DrawerTriggerProps extends ComponentProps<typeof DrawerTrigger> {}\nexport interface DrawerContextProps extends ComponentProps<typeof DrawerContext> {}\n"],"names":["withProvider","withContext","createStyleContext","drawer","Drawer","ArkDrawer","DrawerBody","styled","ark","DrawerCloseTrigger","DrawerFooter","Header","forwardRef","children","showCloseTrigger","props","ref","jsx","IconButton","DrawerHeader","DrawerTitle","DrawerTrigger","DrawerPositioner","DrawerBackdrop","Content","isMobile","useMediaQuery","token","open","getContentProps","useDialogContext","useLayoutEffect","id","$content","$footer","update","observer","jsxs","Fragment","DrawerContent","DrawerContext"],"mappings":";;;;;;;;;;AAUA,MAAM,EAAE,cAAAA,GAAc,aAAAC,MAAgBC,EAAmBC,CAAM,GAElDC,IAASJ,EAAaK,EAAU,MAAM,QAAW;AAAA,EAC5D,cAAc;AAAA,IACZ,eAAe;AAAA,IACf,WAAW;AAAA,EAAA;AAEf,CAAC,GACYC,IAAaL,EAAYM,EAAOC,EAAI,IAAI,GAAG,MAAM,GACjDC,IAAqBR,EAAYM,EAAOF,EAAU,YAAY,GAAG,cAAc,GAC/EK,IAAeT,EAAYM,EAAOC,EAAI,MAAM,GAAG,QAAQ,GAM9DG,IAASC;AAAA,EACb,CAAC,EAAE,UAAAC,GAAU,kBAAAC,IAAmB,IAAM,GAAGC,EAAA,GAASC,wBAC/CR,EAAI,QAAJ,EAAY,GAAGO,GAAO,KAAAC,GACpB,UAAA;AAAA,IAAAH;AAAA,IACAC,KACC,gBAAAG,EAACR,GAAA,EAAmB,SAAO,IACzB,4BAACS,GAAA,EAAW,IAAG,QAAO,cAAW,SAAQ,SAAQ,YAC/C,UAAA,gBAAAD,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,OAAM,8BAChE,UAAA,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,UAAS;AAAA,QACT,GAAE;AAAA,QACF,MAAK;AAAA,MAAA;AAAA,IAAA,EACP,CACF,GACF,EAAA,CACF;AAAA,EAAA,EAAA,CAEJ;AAEJ;AACAN,EAAO,cAAc;AAEd,MAAMQ,IAAelB,EAAYU,GAAQ,QAAQ,GAC3CS,IAAcnB,EAAYM,EAAOF,EAAU,KAAK,GAAG,OAAO,GAC1DgB,IAAgBpB,EAAYM,EAAOF,EAAU,OAAO,GAAG,SAAS,GAEvEiB,IAAmBrB,EAAYM,EAAOF,EAAU,UAAU,GAAG,YAAY,GACzEkB,IAAiBtB,EAAYM,EAAOF,EAAU,QAAQ,GAAG,UAAU,GAEnEmB,IAAUZ;AAAA,EACd,CAAC,EAAE,UAAAC,GAAU,GAAGE,EAAA,GAASC,MAAQ;AAC/B,UAAMS,IAAWC,EAAc,eAAeC,EAAM,gBAAgB,CAAC,KAAK;AAAA,MACxE,cAAc;AAAA,IAAA,CACf,GACK,EAAE,MAAAC,GAAM,iBAAAC,EAAA,IAAoBC,EAAA;AAElC,WAAAC,EAAgB,MAAM;AACpB,UAAI,CAACH,EAAM;AACX,YAAM,EAAE,IAAAI,EAAA,IAAOH,EAAA;AACf,UAAI,CAACG,EAAI;AACT,YAAMC,IAAW,SAAS,eAAeD,CAAE;AAC3C,UAAI,CAACC,EAAU;AACf,YAAMC,IAAUD,EAAS,cAAc,QAAQ;AAC/C,UAAI,CAACC,EAAS;AACd,YAAMC,IAAS,MAAM;AACnB,QAAAF,EAAS,MAAM,YAAY,mBAAmB,GAAG,KAAK,KAAKC,EAAQ,YAAY,CAAC,IAAI;AAAA,MACtF;AAEA,UADAC,EAAA,GACIV,EAAU;AACd,YAAMW,IAAW,IAAI,eAAeD,CAAM;AAC1C,aAAAC,EAAS,QAAQF,CAAO,GACjB,MAAME,EAAS,WAAA;AAAA,IACxB,GAAG,CAACR,GAAMH,CAAQ,CAAC,GAGjB,gBAAAY,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAArB,EAACM,GAAA,EAAe;AAAA,MAChB,gBAAAN,EAACK,GAAA,EACC,UAAA,gBAAAL,EAACZ,EAAU,SAAV,EAAkB,KAAAW,GAAW,GAAGD,GAC9B,UAAAF,EAAA,CACH,EAAA,CACF;AAAA,IAAA,GACF;AAAA,EAEJ;AACF;AACAW,EAAQ,cAAcnB,EAAU,QAAQ;AAEjC,MAAMkC,IAAgBtC,EAAYM,EAAOiB,CAAO,GAAG,SAAS,GACtDgB,IAAgBnC,EAAU;"}
+{"version":3,"file":"Drawer.js","names":[],"sources":["../../../src/components/drawer/Drawer.tsx"],"sourcesContent":["import { ark, Dialog as ArkDrawer, useDialogContext } from '@ark-ui/react'\nimport { useMediaQuery } from 'usehooks-ts'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { drawer } from '@stokelp/styled-system/recipes'\nimport { token } from '@stokelp/styled-system/tokens'\nimport { ComponentProps, ComponentPropsWithoutRef, ElementRef, forwardRef, useLayoutEffect } from 'react'\n\nimport { createStyleContext } from '~/utils/slots'\nimport { IconButton } from '~/components/icon-button'\n\nconst { withProvider, withContext } = createStyleContext(drawer)\n\nexport const Drawer = withProvider(ArkDrawer.Root, undefined, {\n  defaultProps: {\n    unmountOnExit: true,\n    lazyMount: true,\n  },\n})\nexport const DrawerBody = withContext(styled(ark.main), 'body')\nexport const DrawerCloseTrigger = withContext(styled(ArkDrawer.CloseTrigger), 'closeTrigger')\nexport const DrawerFooter = withContext(styled(ark.footer), 'footer')\n\ntype HeaderProps = ComponentPropsWithoutRef<typeof ark.header> & {\n  showCloseTrigger?: boolean\n}\n\nconst Header = forwardRef<ElementRef<typeof ark.header>, HeaderProps>(\n  ({ children, showCloseTrigger = true, ...props }, ref) => (\n    <ark.header {...props} ref={ref}>\n      {children}\n      {showCloseTrigger && (\n        <DrawerCloseTrigger asChild>\n          <IconButton ml=\"auto\" aria-label=\"close\" variant=\"tertiary\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </IconButton>\n        </DrawerCloseTrigger>\n      )}\n    </ark.header>\n  ),\n)\nHeader.displayName = 'DrawerHeader'\n\nexport const DrawerHeader = withContext(Header, 'header')\nexport const DrawerTitle = withContext(styled(ArkDrawer.Title), 'title')\nexport const DrawerTrigger = withContext(styled(ArkDrawer.Trigger), 'trigger')\n\nconst DrawerPositioner = withContext(styled(ArkDrawer.Positioner), 'positioner')\nconst DrawerBackdrop = withContext(styled(ArkDrawer.Backdrop), 'backdrop')\n\nconst Content = forwardRef<ElementRef<typeof ArkDrawer.Content>, ComponentPropsWithoutRef<typeof ArkDrawer.Content>>(\n  ({ children, ...props }, ref) => {\n    const isMobile = useMediaQuery(`(max-width: ${token('breakpoints.md')})`, {\n      defaultValue: false,\n    })\n    const { open, getContentProps } = useDialogContext()\n\n    useLayoutEffect(() => {\n      if (!open) return\n      const { id } = getContentProps()\n      if (!id) return\n      const $content = document.getElementById(id)\n      if ($content) {\n        const $footer = $content.querySelector('footer')\n        if ($footer) {\n          if (isMobile) {\n            $content.style.setProperty('--footer-height', `${Math.ceil($footer.clientHeight)}px`)\n          } else {\n            $content.style.setProperty('--footer-height', `70px`)\n          }\n        }\n      }\n    }, [open, isMobile])\n\n    return (\n      <>\n        <DrawerBackdrop />\n        <DrawerPositioner>\n          <ArkDrawer.Content ref={ref} {...props}>\n            {children}\n          </ArkDrawer.Content>\n        </DrawerPositioner>\n      </>\n    )\n  },\n)\nContent.displayName = ArkDrawer.Content.displayName\n\nexport const DrawerContent = withContext(styled(Content), 'content')\nexport const DrawerContext = ArkDrawer.Context\n\nexport interface DrawerProps extends ComponentProps<typeof Drawer> {}\nexport interface DrawerBackdropProps extends ComponentProps<typeof DrawerBackdrop> {}\nexport interface DrawerBodyProps extends ComponentProps<typeof DrawerBody> {}\nexport interface DrawerCloseTriggerProps extends ComponentProps<typeof DrawerCloseTrigger> {}\nexport interface DrawerContentProps extends ComponentProps<typeof DrawerContent> {}\nexport interface DrawerFooterProps extends ComponentProps<typeof DrawerFooter> {}\nexport interface DrawerHeaderProps extends ComponentProps<typeof DrawerHeader> {}\nexport interface DrawerPositionerProps extends ComponentProps<typeof DrawerPositioner> {}\nexport interface DrawerTitleProps extends ComponentProps<typeof DrawerTitle> {}\nexport interface DrawerTriggerProps extends ComponentProps<typeof DrawerTrigger> {}\nexport interface DrawerContextProps extends ComponentProps<typeof DrawerContext> {}\n"],"mappings":";;;;;;;;;;;AAUA,IAAM,EAAE,iBAAc,mBAAgB,EAAmB,CAAM,GAElD,IAAS,EAAa,EAAU,MAAM,KAAA,GAAW,EAC5D,cAAc;CACZ,eAAe;CACf,WAAW;AACb,EACF,CAAC,GACY,IAAa,EAAY,EAAO,EAAI,IAAI,GAAG,MAAM,GACjD,IAAqB,EAAY,EAAO,EAAU,YAAY,GAAG,cAAc,GAC/E,IAAe,EAAY,EAAO,EAAI,MAAM,GAAG,QAAQ,GAM9D,IAAS,GACZ,EAAE,aAAU,sBAAmB,IAAM,GAAG,KAAS,MAChD,kBAAC,EAAI,QAAL;CAAY,GAAI;CAAY;WAA5B,CACG,GACA,KACC,kBAAC,GAAD;EAAoB,SAAA;YAClB,kBAAC,GAAD;GAAY,IAAG;GAAO,cAAW;GAAQ,SAAQ;aAC/C,kBAAC,OAAD;IAAK,OAAM;IAAK,QAAO;IAAK,SAAQ;IAAY,MAAK;IAAO,OAAM;cAChE,kBAAC,QAAD;KACE,UAAS;KACT,UAAS;KACT,GAAE;KACF,MAAK;IACN,CAAA;GACE,CAAA;EACK,CAAA;CACM,CAAA,CAEZ;EAEhB;AACA,EAAO,cAAc;AAErB,IAAa,IAAe,EAAY,GAAQ,QAAQ,GAC3C,IAAc,EAAY,EAAO,EAAU,KAAK,GAAG,OAAO,GAC1D,IAAgB,EAAY,EAAO,EAAU,OAAO,GAAG,SAAS,GAEvE,IAAmB,EAAY,EAAO,EAAU,UAAU,GAAG,YAAY,GACzE,IAAiB,EAAY,EAAO,EAAU,QAAQ,GAAG,UAAU,GAEnE,IAAU,GACb,EAAE,aAAU,GAAG,KAAS,MAAQ;CAC/B,IAAM,IAAW,EAAc,eAAe,EAAM,gBAAgB,EAAE,IAAI,EACxE,cAAc,GAChB,CAAC,GACK,EAAE,SAAM,uBAAoB,EAAiB;CAmBnD,OAjBA,QAAsB;EACpB,IAAI,CAAC,GAAM;EACX,IAAM,EAAE,UAAO,EAAgB;EAC/B,IAAI,CAAC,GAAI;EACT,IAAM,IAAW,SAAS,eAAe,CAAE;EAC3C,IAAI,GAAU;GACZ,IAAM,IAAU,EAAS,cAAc,QAAQ;GAC/C,AAAI,MACE,IACF,EAAS,MAAM,YAAY,mBAAmB,GAAG,KAAK,KAAK,EAAQ,YAAY,EAAE,GAAG,IAEpF,EAAS,MAAM,YAAY,mBAAmB,MAAM;EAG1D;CACF,GAAG,CAAC,GAAM,CAAQ,CAAC,GAGjB,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,CAAiB,CAAA,GACjB,kBAAC,GAAD,EAAA,UACE,kBAAC,EAAU,SAAX;EAAwB;EAAK,GAAI;EAC9B;CACgB,CAAA,EACH,CAAA,CAClB,EAAA,CAAA;AAEN,CACF;AACA,EAAQ,cAAc,EAAU,QAAQ;AAExC,IAAa,IAAgB,EAAY,EAAO,CAAO,GAAG,SAAS,GACtD,IAAgB,EAAU"}