welcome-ui 1.0.0-beta.3 → 1.0.0-beta.4

package/dist/DatePicker.js

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),Y=require("./System.js"),c=require("./CustomInput-9aCUiD6o.js"),P=Y.forwardRef(({autoFocus:I,dataTestId:R,dateFormat:b="dd/MM/yyyy",disabled:F,endYear:M=c.DEFAULT_DATE.getFullYear(),icon:d,iconPlacement:i="left",locale:p,onBlur:f,onChange:s,onFocus:m,placeholder:g,popperProps:A,preventVirtualKeyboard:H=!1,showMonthYearPicker:y,size:D="md",startYear:h=1900,transparent:q,useWeekdaysShort:x=!0,value:t=c.DEFAULT_DATE,...n},a)=>{const C=n==null?void 0:n.timeIntervals,o=e=>c.getDate(e,C),N=g||n.placeholderText,[j,E]=r.useState(I&&"date"||null),[K,l]=r.useState(o(t)),T=r.useRef();r.useEffect(()=>{s&&s(o(t))},[]),r.useEffect(()=>{var k;const e=o(t),u=typeof t=="object"?t==null?void 0:t.toISOString():t;((k=new Date(Date.parse(u)))==null?void 0:k.getTime())-(e==null?void 0:e.getTime())!==0&&s&&s(e),l(e)},[t]);const S=()=>{var e;return(e=T.current)==null?void 0:e.blur()},L=e=>{E("date"),m&&m(e)},O=e=>{E(null),f&&f(e)},U=e=>{["Escape","Enter"].includes(e.key)&&S()},_=e=>{e.preventDefault(),S(),l(null),s&&s(null)},B=e=>{if(!e)return;const u=o(e);e.setHours(u.getHours(),u.getMinutes()),l(e),s&&s(new Date(e))};return r.createElement(c.StyledDatePicker,{autoComplete:"off",calendarClassName:"date-picker-popper",customInput:r.createElement(c.CustomInput,{className:"date-picker","data-testid":R,focused:j,handleBlur:e=>O(e),handleFocus:e=>L(e),icon:d,iconPlacement:i,inputMode:H?"none":"text",onReset:_,ref:e=>{T.current=e,typeof a=="function"?a(e):a.current=e},size:D}),dateFormat:b,disabled:F,iconPlacement:!!d&&i,locale:p,onChange:B,onKeyDown:U,placeholderText:N,popperContainer:c.CustomPopper,popperProps:A,renderCustomHeader:e=>r.createElement(c.CustomHeader,{endYear:M,isMonthYearPicker:y,locale:p,startYear:h,...e}),selected:K,showMonthYearPicker:y,size:D,transparent:q,useWeekdaysShort:x,...n})});P.displayName="DatePicker";exports.DatePicker=P;

package/dist/DatePicker.mjs

@@ -0,0 +1,108 @@
+"use client";
+import d, { useState as R, useRef as w, useEffect as I } from "react";
+import { forwardRef as G } from "./System.mjs";
+import { S as J, c as Q, b as V, C as W, D as P, g as X } from "./CustomInput-CenfXh_H.mjs";
+const Z = G(
+  ({
+    autoFocus: S,
+    dataTestId: b,
+    dateFormat: x = "dd/MM/yyyy",
+    disabled: F,
+    endYear: H = P.getFullYear(),
+    icon: l,
+    iconPlacement: u = "left",
+    locale: p,
+    onBlur: i,
+    onChange: s,
+    onFocus: m,
+    placeholder: M,
+    popperProps: g,
+    preventVirtualKeyboard: h = !1,
+    showMonthYearPicker: f,
+    size: y = "md",
+    startYear: C = 1900,
+    transparent: N,
+    useWeekdaysShort: _ = !0,
+    value: t = P,
+    ...r
+  }, n) => {
+    const A = r == null ? void 0 : r.timeIntervals, o = (e) => X(e, A), K = M || r.placeholderText, [j, D] = R(S && "date" || null), [B, a] = R(o(t)), E = w();
+    I(() => {
+      s && s(o(t));
+    }, []), I(() => {
+      var k;
+      const e = o(t), c = typeof t == "object" ? t == null ? void 0 : t.toISOString() : t;
+      ((k = new Date(Date.parse(c))) == null ? void 0 : k.getTime()) - (e == null ? void 0 : e.getTime()) !== 0 && s && s(e), a(e);
+    }, [t]);
+    const T = () => {
+      var e;
+      return (e = E.current) == null ? void 0 : e.blur();
+    }, L = (e) => {
+      D("date"), m && m(e);
+    }, O = (e) => {
+      D(null), i && i(e);
+    }, U = (e) => {
+      ["Escape", "Enter"].includes(e.key) && T();
+    }, Y = (e) => {
+      e.preventDefault(), T(), a(null), s && s(null);
+    }, q = (e) => {
+      if (!e) return;
+      const c = o(e);
+      e.setHours(c.getHours(), c.getMinutes()), a(e), s && s(new Date(e));
+    };
+    return /* @__PURE__ */ d.createElement(
+      J,
+      {
+        autoComplete: "off",
+        calendarClassName: "date-picker-popper",
+        customInput: /* @__PURE__ */ d.createElement(
+          Q,
+          {
+            className: "date-picker",
+            "data-testid": b,
+            focused: j,
+            handleBlur: (e) => O(e),
+            handleFocus: (e) => L(e),
+            icon: l,
+            iconPlacement: u,
+            inputMode: h ? "none" : "text",
+            onReset: Y,
+            ref: (e) => {
+              E.current = e, typeof n == "function" ? n(e) : n.current = e;
+            },
+            size: y
+          }
+        ),
+        dateFormat: x,
+        disabled: F,
+        iconPlacement: !!l && u,
+        locale: p,
+        onChange: q,
+        onKeyDown: U,
+        placeholderText: K,
+        popperContainer: V,
+        popperProps: g,
+        renderCustomHeader: (e) => /* @__PURE__ */ d.createElement(
+          W,
+          {
+            endYear: H,
+            isMonthYearPicker: f,
+            locale: p,
+            startYear: C,
+            ...e
+          }
+        ),
+        selected: B,
+        showMonthYearPicker: f,
+        size: y,
+        transparent: N,
+        useWeekdaysShort: _,
+        ...r
+      }
+    );
+  }
+);
+Z.displayName = "DatePicker";
+export {
+  Z as DatePicker
+};

package/dist/DateTimePicker.js

@@ -0,0 +1,38 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),b=require("./DatePicker.js"),$=require("./TimePicker.js"),a=require("./CustomInput-9aCUiD6o.js"),h=require("./System.js"),p=require("@xstyled/styled-components"),g=p.css`
+  &:focus {
+    position: relative;
+    z-index: 1;
+  }
+`,S=p.divBox`
+  position: relative;
+  display: inline-flex;
+  flex-wrap: nowrap;
+
+  .react-datepicker-wrapper {
+    flex-grow: 1;
+    ${a.StyledDatePicker} {
+      ${g};
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    ${a.StyledTimePicker} {
+      ${g};
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  .react-datepicker-wrapper:first-child:not(:only-child) {
+    margin-right: -1px;
+  }
+
+  .react-datepicker__input-container {
+    display: block;
+  }
+
+  .react-datepicker {
+    font-family: inherit;
+  }
+
+  ${p.system};
+`,D=h.forwardRef(({children:r,dataTestId:s,disabled:u,locale:d,onChange:o,size:f="md",transparent:m,value:i=a.DEFAULT_DATE},k)=>{const y=t.Children.count(r)>1&&t.Children.toArray(r).find(e=>e.type.displayName==="TimePicker"),P=t.isValidElement(y)?y.props.timeIntervals:void 0,l=e=>a.getDate(e,P),[E,T]=t.useState(l(i)),c=e=>{T(e||null),o&&o(e&&new Date(e))};return t.useEffect(()=>{o&&c(l(i))},[]),t.useEffect(()=>{var n;const e=l(i);((n=new Date(i))==null?void 0:n.getTime())-(e==null?void 0:e.getTime())!==0&&o&&c(e),T(e)},[i]),t.createElement(S,{"data-testid":s},r&&t.Children.map(r,(e,n)=>t.cloneElement(e,{key:n,onChange:c,inputRef:n<1?k:null,locale:d,timeIntervals:P,value:E,transparent:m})),!r&&t.createElement(t.Fragment,null,t.createElement(b.DatePicker,{dataTestId:`${s}-datePicker`,disabled:u,locale:d,onChange:c,ref:k,size:f,transparent:m,value:i}),t.createElement($.TimePicker,{dataTestId:`${s}-timePicker`,disabled:u,locale:d,onChange:c,size:f,transparent:m,value:i})))});D.displayName="DateTimePicker";exports.DateTimePicker=D;

package/dist/DateTimePicker.mjs

@@ -0,0 +1,109 @@
+"use client";
+import r, { Children as p, useState as E, useEffect as P, cloneElement as $ } from "react";
+import { DatePicker as x } from "./DatePicker.mjs";
+import { TimePicker as _ } from "./TimePicker.mjs";
+import { S as b, a as w, D as h, g as S } from "./CustomInput-CenfXh_H.mjs";
+import { forwardRef as A } from "./System.mjs";
+import N, { css as R, system as C } from "@xstyled/styled-components";
+const T = R`
+  &:focus {
+    position: relative;
+    z-index: 1;
+  }
+`, F = N.divBox`
+  position: relative;
+  display: inline-flex;
+  flex-wrap: nowrap;
+
+  .react-datepicker-wrapper {
+    flex-grow: 1;
+    ${b} {
+      ${T};
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    ${w} {
+      ${T};
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  .react-datepicker-wrapper:first-child:not(:only-child) {
+    margin-right: -1px;
+  }
+
+  .react-datepicker__input-container {
+    display: block;
+  }
+
+  .react-datepicker {
+    font-family: inherit;
+  }
+
+  ${C};
+`, I = A(
+  ({
+    children: i,
+    dataTestId: c,
+    disabled: l,
+    locale: n,
+    onChange: m,
+    size: f = "md",
+    transparent: s,
+    value: t = h
+  }, k) => {
+    const u = p.count(i) > 1 && p.toArray(i).find(
+      (e) => e.type.displayName === "TimePicker"
+    ), y = r.isValidElement(u) ? u.props.timeIntervals : void 0, d = (e) => S(e, y), [D, g] = E(d(t)), o = (e) => {
+      g(e || null), m && m(e && new Date(e));
+    };
+    return P(() => {
+      m && o(d(t));
+    }, []), P(() => {
+      var a;
+      const e = d(t);
+      ((a = new Date(t)) == null ? void 0 : a.getTime()) - (e == null ? void 0 : e.getTime()) !== 0 && m && o(e), g(e);
+    }, [t]), /* @__PURE__ */ r.createElement(F, { "data-testid": c }, i && p.map(
+      i,
+      (e, a) => $(e, {
+        // eslint-disable-next-line react/no-array-index-key
+        key: a,
+        onChange: o,
+        // give ref only to the first child
+        inputRef: a < 1 ? k : null,
+        locale: n,
+        timeIntervals: y,
+        value: D,
+        transparent: s
+      })
+    ), !i && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(
+      x,
+      {
+        dataTestId: `${c}-datePicker`,
+        disabled: l,
+        locale: n,
+        onChange: o,
+        ref: k,
+        size: f,
+        transparent: s,
+        value: t
+      }
+    ), /* @__PURE__ */ r.createElement(
+      _,
+      {
+        dataTestId: `${c}-timePicker`,
+        disabled: l,
+        locale: n,
+        onChange: o,
+        size: f,
+        transparent: s,
+        value: t
+      }
+    )));
+  }
+);
+I.displayName = "DateTimePicker";
+export {
+  I as DateTimePicker
+};

package/dist/DateTimePickerCommon.js

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./CustomInput-9aCUiD6o.js");exports.CustomHeader=e.CustomHeader;exports.CustomInput=e.CustomInput;exports.CustomPopper=e.CustomPopper;exports.DEFAULT_DATE=e.DEFAULT_DATE;exports.StyledDatePicker=e.StyledDatePicker;exports.StyledTimePicker=e.StyledTimePicker;exports.fixAriaMessageStyle=e.fixAriaMessageStyle;exports.getDate=e.getDate;exports.getMonths=e.getMonths;exports.getYears=e.getYears;

package/dist/DateTimePickerCommon.mjs

@@ -0,0 +1,14 @@
+"use client";
+import { C as a, c as t, b as r, D as o, S as i, a as g, f as m, g as u, d as D, e as c } from "./CustomInput-CenfXh_H.mjs";
+export {
+  a as CustomHeader,
+  t as CustomInput,
+  r as CustomPopper,
+  o as DEFAULT_DATE,
+  i as StyledDatePicker,
+  g as StyledTimePicker,
+  m as fixAriaMessageStyle,
+  u as getDate,
+  D as getMonths,
+  c as getYears
+};

package/dist/Drawer.js

@@ -0,0 +1,64 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),l=require("./System.js"),o=require("@xstyled/styled-components"),c=require("./Box.js"),B=require("./CloseButton.js"),b=require("./SYRFVSLH-BpAfr7UE.js"),u=require("./Text.js"),$=require("./index-Cs1IZBks.js"),D=require("./Button.js"),f=require("./JC64G2H7-YkBMNrtl.js"),k=require("./AXB53BZF-KWM2jKTz.js"),C=e=>{switch(e){case"top":return{top:"0 !important",right:0,left:0,transform:"translateY(-100%)"};case"right":return{top:"0 !important",right:0,bottom:0,transform:"translateX(100%)"};case"bottom":return{right:0,bottom:0,left:0,transform:"translateY(100%)"};case"left":return{top:"0 !important",bottom:0,left:0,transform:"translateX(-100%)"}}},m=["sm","md","lg"],v=(e,r)=>{switch(r){case"top":case"bottom":return m.includes(e)?o.th(`drawers.sizes.vertical.${e}`):{height:e};case"right":case"left":return m.includes(e)?o.th(`drawers.sizes.horizontal.${e}`):{width:e}}},S=o.divBox(({placement:e,size:r})=>o.css`
+    ${o.th("cards.default")};
+    ${o.th("drawers.default")};
+    ${C(e)}
+    ${v(r,e)}
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    opacity: 0;
+    transition: medium;
+    max-width: 100%;
+
+    &[data-enter] {
+      opacity: 1;
+      transform: translate(0, 0);
+    }
+  `),p=o.div.withConfig({shouldForwardProp:e=>!["hideOnInteractOutside"].includes(e)})(({hideOnInteractOutside:e})=>o.css`
+    ${o.th("drawers.backdrop")};
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    opacity: 0;
+    transition: opacity 150ms ease-in-out;
+    ${o.system};
+
+    ${e&&o.css`
+      cursor: pointer;
+    `}
+
+    &[data-enter] {
+      opacity: 1;
+    }
+  `),T=o.divBox`
+  ${o.th("drawers.title")};
+`,q=o.divBox`
+  ${o.th("drawers.content")};
+`,I=o(B.CloseButton)`
+  ${o.th("drawers.closeButton")};
+`,R=o.divBox`
+  ${o.th("drawers.footer")};
+`,x=({zIndex:e="2",...r})=>{const n=o.useTheme();return t.createElement(c.Box,{h:"0"},t.createElement(b.DialogDismiss,{render:t.createElement(I,{left:`calc(100% - ${n.space.lg} - ${n.buttons.sizes.sm.height})`,mt:"lg",position:"sticky",top:"0",zIndex:e,...r})}))},F=l.forwardRef((e,r)=>t.createElement(q,{flex:"1",overflowY:{md:"auto"},ref:r,...e})),j=l.forwardRef((e,r)=>t.createElement(R,{bottom:{xs:0,md:"auto"},position:{xs:"sticky",md:"static"},ref:r,w:"100%",...e})),O=({children:e,zIndex:r="1",...n})=>t.createElement(T,{alignItems:"center",display:"flex",justifyContent:"space-between",position:{xs:"sticky",md:"static"},top:{xs:0,md:"auto"},w:"100%",zIndex:r,...n},t.createElement(u.Text,{m:"0",variant:"h3",w:"100%"},e)),A=o.divBox`
+  overflow-y: scroll;
+  flex: 1;
+  margin: 0 auto;
+  width: 100%;
+`,Y=o.divBox(({size:e})=>o.css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    height: 48;
+    width: 48;
+    border-radius: md;
+    background-color: beige-20;
+    transition: background-color ${o.th("transitions.medium")};
+
+    ${e==="sm"&&o.css`
+      height: 32;
+      width: 32;
+    `}
+  `),_=l.forwardRef(({children:e,maxWidth:r=820,store:n,...s},a)=>{const i=o.useTheme();return t.createElement(g,{...s,autoFocusOnShow:!1,h:{_:"100%",md:"calc(100% - 3rem)"},hideOnInteractOutside:!0,placement:"bottom",ref:a,store:n,style:{borderTopLeftRadius:i.radii.xxl,borderTopRightRadius:i.radii.xxl},withBackdrop:!0,withCloseButton:!0},t.createElement(A,{maxWidth:r},t.createElement(c.Box,{p:{_:"xl md",md:"3xl xl"}},e)))}),H=({action:e,icon:r,onBackButtonClick:n,subtitle:s,title:a})=>t.createElement(c.Box,{alignItems:{md:"center"},backgroundColor:"neutral-10",display:"flex",flexDirection:{_:"column",md:"row"},gap:"xl",justifyContent:"space-between",mb:"xl",mt:"-md",position:"sticky",py:"md",top:0,zIndex:1},t.createElement(c.Box,{alignItems:"center",display:"flex",gap:{_:"md",md:"xl"}},!!n&&t.createElement(D.Button,{onClick:n,shape:"circle",size:"lg",variant:"ghost"},t.createElement($.ArrowLeftIcon,null)),!!r&&t.createElement(L,{icon:r}),t.createElement(c.Box,{display:"flex",flexDirection:"column",gap:"xxs"},t.createElement(u.Text,{pr:"xl",variant:"h3"},a),s)),e&&t.createElement(c.Box,{alignItems:"center",display:"flex",flexShrink:0,gap:"md"},e)),L=({icon:e,size:r="md"})=>t.createElement(Y,{size:r},t.createElement(e,{color:"neutral-90",size:r})),P=l.forwardRef(({children:e,hideOnInteractOutside:r=!0,placement:n="right",size:s="lg",store:a,withBackdrop:i=!1,withCloseButton:w=!0,...y},E)=>t.createElement(f.Dialog,{backdrop:i?t.createElement(p,{hideOnInteractOutside:r}):!1,hideOnInteractOutside:r,modal:i,ref:E,render:t.createElement(S,{placement:n,size:s}),store:a,...y},t.createElement(t.Fragment,null,w&&t.createElement(x,null),e)));function X(e={}){return f.useDialogStore({animated:!0,...e})}const h=({hideOnInteractOutside:e=!0,...r})=>t.createElement(p,{hideOnInteractOutside:e,...r}),d=l.forwardRef(({as:e,store:r,...n},s)=>t.createElement(k.DialogDisclosure,{ref:s,render:e?a=>t.createElement(e,{...a}):void 0,store:r,...n})),g=Object.assign(P,{Trigger:d,Backdrop:h,Close:x,Title:O,Content:F,Footer:j}),Z=Object.assign(_,{Trigger:d,Header:H});exports.AssetDrawer=Z;exports.Drawer=g;exports.DrawerBackdrop=h;exports.Trigger=d;exports.useDrawer=X;

package/dist/Drawer.mjs

@@ -0,0 +1,267 @@
+"use client";
+import e from "react";
+import { forwardRef as d } from "./System.mjs";
+import a, { css as m, th as n, system as $, useTheme as p } from "@xstyled/styled-components";
+import { Box as l } from "./Box.mjs";
+import { CloseButton as b } from "./CloseButton.mjs";
+import { D } from "./SYRFVSLH-DyepaZf7.mjs";
+import { Text as f } from "./Text.mjs";
+import { l as B } from "./index-ColyClKR.mjs";
+import { Button as k } from "./Button.mjs";
+import { D as C, u as v } from "./JC64G2H7-CQsqXPS_.mjs";
+import { D as I } from "./AXB53BZF-BxNazDnS.mjs";
+const S = (t) => {
+  switch (t) {
+    case "top":
+      return {
+        top: "0 !important",
+        right: 0,
+        left: 0,
+        transform: "translateY(-100%)"
+      };
+    case "right":
+      return {
+        top: "0 !important",
+        right: 0,
+        bottom: 0,
+        transform: "translateX(100%)"
+      };
+    case "bottom":
+      return {
+        right: 0,
+        bottom: 0,
+        left: 0,
+        transform: "translateY(100%)"
+      };
+    case "left":
+      return {
+        top: "0 !important",
+        bottom: 0,
+        left: 0,
+        transform: "translateX(-100%)"
+      };
+  }
+}, u = ["sm", "md", "lg"], _ = (t, r) => {
+  switch (r) {
+    case "top":
+    case "bottom":
+      return u.includes(t) ? n(`drawers.sizes.vertical.${t}`) : {
+        height: t
+      };
+    case "right":
+    case "left":
+      return u.includes(t) ? n(`drawers.sizes.horizontal.${t}`) : {
+        width: t
+      };
+  }
+}, T = a.divBox(
+  ({ placement: t, size: r }) => m`
+    ${n("cards.default")};
+    ${n("drawers.default")};
+    ${S(t)}
+    ${_(r, t)}
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    opacity: 0;
+    transition: medium;
+    max-width: 100%;
+
+    &[data-enter] {
+      opacity: 1;
+      transform: translate(0, 0);
+    }
+  `
+), g = a.div.withConfig({
+  shouldForwardProp: (t) => !["hideOnInteractOutside"].includes(t)
+})(
+  ({ hideOnInteractOutside: t }) => m`
+    ${n("drawers.backdrop")};
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    opacity: 0;
+    transition: opacity 150ms ease-in-out;
+    ${$};
+
+    ${t && m`
+      cursor: pointer;
+    `}
+
+    &[data-enter] {
+      opacity: 1;
+    }
+  `
+), j = a.divBox`
+  ${n("drawers.title")};
+`, F = a.divBox`
+  ${n("drawers.content")};
+`, O = a(b)`
+  ${n("drawers.closeButton")};
+`, R = a.divBox`
+  ${n("drawers.footer")};
+`, x = ({ zIndex: t = "2", ...r }) => {
+  const o = p();
+  return /* @__PURE__ */ e.createElement(l, { h: "0" }, /* @__PURE__ */ e.createElement(
+    D,
+    {
+      render: /* @__PURE__ */ e.createElement(
+        O,
+        {
+          left: `calc(100% - ${o.space.lg} - ${o.buttons.sizes.sm.height})`,
+          mt: "lg",
+          position: "sticky",
+          top: "0",
+          zIndex: t,
+          ...r
+        }
+      )
+    }
+  ));
+}, Y = d((t, r) => /* @__PURE__ */ e.createElement(F, { flex: "1", overflowY: { md: "auto" }, ref: r, ...t })), A = d((t, r) => /* @__PURE__ */ e.createElement(
+  R,
+  {
+    bottom: { xs: 0, md: "auto" },
+    position: { xs: "sticky", md: "static" },
+    ref: r,
+    w: "100%",
+    ...t
+  }
+)), L = ({ children: t, zIndex: r = "1", ...o }) => /* @__PURE__ */ e.createElement(
+  j,
+  {
+    alignItems: "center",
+    display: "flex",
+    justifyContent: "space-between",
+    position: { xs: "sticky", md: "static" },
+    top: { xs: 0, md: "auto" },
+    w: "100%",
+    zIndex: r,
+    ...o
+  },
+  /* @__PURE__ */ e.createElement(f, { m: "0", variant: "h3", w: "100%" }, t)
+), P = a.divBox`
+  overflow-y: scroll;
+  flex: 1;
+  margin: 0 auto;
+  width: 100%;
+`, X = a.divBox(
+  ({ size: t }) => m`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    height: 48;
+    width: 48;
+    border-radius: md;
+    background-color: beige-20;
+    transition: background-color ${n("transitions.medium")};
+
+    ${t === "sm" && m`
+      height: 32;
+      width: 32;
+    `}
+  `
+), z = d(
+  ({ children: t, maxWidth: r = 820, store: o, ...s }, i) => {
+    const c = p();
+    return /* @__PURE__ */ e.createElement(
+      J,
+      {
+        ...s,
+        autoFocusOnShow: !1,
+        h: { _: "100%", md: "calc(100% - 3rem)" },
+        hideOnInteractOutside: !0,
+        placement: "bottom",
+        ref: i,
+        store: o,
+        style: {
+          borderTopLeftRadius: c.radii.xxl,
+          borderTopRightRadius: c.radii.xxl
+        },
+        withBackdrop: !0,
+        withCloseButton: !0
+      },
+      /* @__PURE__ */ e.createElement(P, { maxWidth: r }, /* @__PURE__ */ e.createElement(l, { p: { _: "xl md", md: "3xl xl" } }, t))
+    );
+  }
+), H = ({
+  action: t,
+  icon: r,
+  onBackButtonClick: o,
+  subtitle: s,
+  title: i
+}) => /* @__PURE__ */ e.createElement(
+  l,
+  {
+    alignItems: { md: "center" },
+    backgroundColor: "neutral-10",
+    display: "flex",
+    flexDirection: { _: "column", md: "row" },
+    gap: "xl",
+    justifyContent: "space-between",
+    mb: "xl",
+    mt: "-md",
+    position: "sticky",
+    py: "md",
+    top: 0,
+    zIndex: 1
+  },
+  /* @__PURE__ */ e.createElement(l, { alignItems: "center", display: "flex", gap: { _: "md", md: "xl" } }, !!o && /* @__PURE__ */ e.createElement(k, { onClick: o, shape: "circle", size: "lg", variant: "ghost" }, /* @__PURE__ */ e.createElement(B, null)), !!r && /* @__PURE__ */ e.createElement(Z, { icon: r }), /* @__PURE__ */ e.createElement(l, { display: "flex", flexDirection: "column", gap: "xxs" }, /* @__PURE__ */ e.createElement(f, { pr: "xl", variant: "h3" }, i), s)),
+  t && /* @__PURE__ */ e.createElement(l, { alignItems: "center", display: "flex", flexShrink: 0, gap: "md" }, t)
+), Z = ({ icon: t, size: r = "md" }) => /* @__PURE__ */ e.createElement(X, { size: r }, /* @__PURE__ */ e.createElement(t, { color: "neutral-90", size: r })), q = d(
+  ({
+    children: t,
+    hideOnInteractOutside: r = !0,
+    placement: o = "right",
+    size: s = "lg",
+    store: i,
+    withBackdrop: c = !1,
+    withCloseButton: w = !0,
+    ...E
+  }, y) => /* @__PURE__ */ e.createElement(
+    C,
+    {
+      backdrop: c ? /* @__PURE__ */ e.createElement(g, { hideOnInteractOutside: r }) : !1,
+      hideOnInteractOutside: r,
+      modal: c,
+      ref: y,
+      render: /* @__PURE__ */ e.createElement(T, { placement: o, size: s }),
+      store: i,
+      ...E
+    },
+    /* @__PURE__ */ e.createElement(e.Fragment, null, w && /* @__PURE__ */ e.createElement(x, null), t)
+  )
+);
+function nt(t = {}) {
+  return v({ animated: !0, ...t });
+}
+const G = ({
+  hideOnInteractOutside: t = !0,
+  ...r
+}) => /* @__PURE__ */ e.createElement(g, { hideOnInteractOutside: t, ...r }), h = d(({ as: t, store: r, ...o }, s) => /* @__PURE__ */ e.createElement(
+  I,
+  {
+    ref: s,
+    render: t ? (i) => /* @__PURE__ */ e.createElement(t, { ...i }) : void 0,
+    store: r,
+    ...o
+  }
+)), J = Object.assign(q, {
+  Trigger: h,
+  Backdrop: G,
+  Close: x,
+  Title: L,
+  Content: Y,
+  Footer: A
+}), at = Object.assign(z, { Trigger: h, Header: H });
+export {
+  at as AssetDrawer,
+  J as Drawer,
+  G as DrawerBackdrop,
+  h as Trigger,
+  nt as useDrawer
+};