@spark-ui/components 18.1.0 → 18.1.2

package/dist/combobox/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../visually-hidden/index.js"),t=require("../icon-DY4l9nsc.js"),n=require("../spinner-CmPypfJR.js"),r=require("../icon-button-DRFf308H.js"),i=require("../popover-DVz0JvON.js");let a=require("class-variance-authority"),o=require("react"),s=require("react/jsx-runtime"),c=require("@spark-ui/icons/ArrowHorizontalDown"),l=require("@spark-ui/hooks/use-merge-refs"),u=require("@spark-ui/components/form-field"),d=require("@spark-ui/icons/Check"),f=require("@spark-ui/hooks/use-combined-state"),p=require("downshift"),m=require("@spark-ui/icons/DeleteOutline");function h(e,t){let n=0;for(let[r]of e.entries()){if(r===t)return n;n++}return-1}var g=(e,t)=>{let n=0;for(let r of e.keys()){if(n===t)return r;n++}},_=(e,t)=>{let n=g(e,t);return n===void 0?void 0:e.get(n)},v=e=>e?e.type.displayName:``,y=(e,t=[])=>(o.Children.forEach(e,e=>{if((0,o.isValidElement)(e)){if(v(e)===`Combobox.Item`){let n=e.props;t.push({value:n.value,disabled:!!n.disabled,text:x(n.children)})}e.props.children&&y(e.props.children,t)}}),t),b=e=>{if(!e)return``;for(let t of o.Children.toArray(e))if((0,o.isValidElement)(t)){let e=t;if(v(e)===`Combobox.ItemText`)return e.props.children;let n=b(e.props.children);if(n)return n}return``},x=e=>typeof e==`string`?e:b(e),S=e=>{let t=new Map;return y(e).forEach(e=>{t.set(e.value,e)}),t},C=(e,t)=>o.Children.toArray(e).some(e=>(0,o.isValidElement)(e)?v(e)===t?!0:e.props.children?C(e.props.children,t):!1:!1),w=(e,t)=>o.Children.toArray(e).filter(o.isValidElement).find(e=>t===v(e)||``),T=({multiselect:e,selectedItems:t,allowCustomValue:n=!1,setSelectedItems:r,triggerAreaRef:i,items:a})=>(o,{changes:s,type:c})=>{let l=i.current?.contains?.(document.activeElement);switch(c){case p.useCombobox.stateChangeTypes.InputClick:return{...s,isOpen:!0};case p.useCombobox.stateChangeTypes.InputKeyDownEnter:case p.useCombobox.stateChangeTypes.ItemClick:{let n={...s};return s.selectedItem!=null&&(n.inputValue=``,n.isOpen=!0,n.highlightedIndex=h(a,s.selectedItem.value),r(e.selectedItems.some(e=>e.value===s.selectedItem?.value)?t.filter(e=>e.value!==s.selectedItem?.value):[...t,s.selectedItem])),n}case p.useCombobox.stateChangeTypes.ToggleButtonClick:return{...s,inputValue:n?s.inputValue:``};case p.useCombobox.stateChangeTypes.InputChange:return{...s,selectedItem:s.highlightedIndex===-1?null:s.selectedItem};case p.useCombobox.stateChangeTypes.InputBlur:return{...s,inputValue:n?s.inputValue:``,isOpen:l};default:return s}},ee=({filteredItems:e,allowCustomValue:t=!1,setSelectedItem:n})=>(r,{changes:i,type:a})=>{let o=e.find(e=>e.text.toLowerCase()===r.inputValue.toLowerCase());switch(a){case p.useCombobox.stateChangeTypes.InputKeyDownEscape:return i.selectedItem||n(null),i;case p.useCombobox.stateChangeTypes.ItemClick:case p.useCombobox.stateChangeTypes.InputKeyDownEnter:return i.selectedItem&&n(i.selectedItem),i;case p.useCombobox.stateChangeTypes.InputClick:return{...i,isOpen:!0};case p.useCombobox.stateChangeTypes.ToggleButtonClick:case p.useCombobox.stateChangeTypes.InputBlur:return t?i:r.inputValue===``?(n(null),{...i,selectedItem:null}):o?(n(o),{...i,selectedItem:o,inputValue:o.text}):r.selectedItem?{...i,inputValue:r.selectedItem.text}:{...i,inputValue:``};default:return i}},E=(0,o.createContext)(null),D=(e,t)=>t?new Map(Array.from(e).filter(([e,{text:n}])=>n.toLowerCase().includes(t.toLowerCase()))):e,O=`:combobox`,k=({children:e,state:t,allowCustomValue:n=!1,filtering:r=`auto`,disabled:a=!1,multiple:c=!1,readOnly:l=!1,wrap:d=!0,value:m,defaultValue:h,onValueChange:g,open:v,defaultOpen:y,onOpenChange:b,isLoading:x})=>{let w=(0,o.useRef)(!1),[k,A]=(0,o.useState)(``),[j,M]=(0,o.useState)(r===`strict`),N=(0,o.useRef)(null),P=(0,o.useRef)(null),[F,te]=(0,o.useState)(null),[I]=(0,f.useCombinedState)(m,h),L=r===`strict`||r===`auto`&&j,[R,z]=(0,o.useState)(S(e)),[B,V]=(0,o.useState)(L?D(R,k):R),[H,U]=(0,o.useState)(R.get(I)||null),[W,ne]=(0,o.useState)(I?[...R.values()].filter(e=>I.includes(e.value)):[]),G=e=>{M(!1),e?.value!==H?.value&&(U(e),setTimeout(()=>{g?.(e?.value)},0))},K=e=>{ne(e),setTimeout(()=>{g?.(e.map(e=>e.value))},0)};(0,o.useEffect)(()=>{if(!w.current){w.current=!0;return}if(c){let e=I.reduce((e,t)=>{let n=R.get(t);return n?[...e,n]:e},[]);ne(I?e:[])}else U(R.get(I)||null)},[c?JSON.stringify(I):I]);let q=(0,u.useFormFieldControl)(),J=`${O}-label-${(0,o.useId)()}`,Y=`${O}-field-${(0,o.useId)()}`,X=q.id||Y,Z=q.labelId||J,re=q.state||t,Q=q.disabled??a,ie=q.readOnly??l,[ae,$]=(0,o.useState)(C(e,`Combobox.Popover`)),[oe,se]=(0,o.useState)(!1),[ce,le]=(0,o.useState)(`mouse`);(0,o.useEffect)(()=>{V(L?D(R,k):R)},[k,R]);let ue=(0,p.useMultipleSelection)({selectedItems:W,stateReducer:(e,{type:t,changes:n})=>{let r=p.useMultipleSelection.stateChangeTypes;switch(t){case r.SelectedItemKeyDownBackspace:case r.SelectedItemKeyDownDelete:{K(n.selectedItems||[]);let i;return i=t===r.SelectedItemKeyDownDelete?e?.activeIndex===n.selectedItems?.length?-1:e.activeIndex:(n?.activeIndex||0)-1>=0?e.activeIndex-1:n?.activeIndex,{...n,activeIndex:i}}case r.SelectedItemClick:return P.current&&P.current.focus(),{...n,activeIndex:-1};case r.FunctionRemoveSelectedItem:return{...n,activeIndex:-1};case r.DropdownKeyDownNavigationPrevious:return fe.closeMenu(),n;default:return n}}}),de=Array.from(B.values());(0,o.useEffect)(()=>{F?.(k||``)},[k]);let fe=(0,p.useCombobox)({inputId:X,items:de,selectedItem:c?void 0:H,id:X,labelId:Z,inputValue:k,onInputValueChange:({inputValue:e})=>{if(A(e),L){let t=D(R,e||``);V(t)}},initialIsOpen:y,...v!=null&&{isOpen:v},onIsOpenChange:e=>{e.isOpen!=null&&b?.(e.isOpen)},itemToString:e=>e?.text,isItemDisabled:e=>{let t=!!k&&!de.some(t=>e.value===t.value);return e.disabled||t},stateReducer:c?T({multiselect:ue,selectedItems:W,allowCustomValue:n,setSelectedItems:K,triggerAreaRef:N,items:R}):ee({allowCustomValue:n,setSelectedItem:G,filteredItems:[...B.values()]}),scrollIntoView:e=>{e&&e.scrollIntoView({block:`nearest`})}});(0,o.useEffect)(()=>{let t=S(e),n=[...R.values()],r=[...t.values()];(n.length!==r.length||n.some((e,t)=>{let n=e.value!==r[t]?.value,i=e.text!==r[t]?.text;return n||i}))&&z(t)},[e]);let[pe,me]=ae?[i.t,{open:!0}]:[o.Fragment,{}];return(0,s.jsx)(E,{value:{itemsMap:R,filteredItemsMap:B,highlightedItem:_(B,fe.highlightedIndex),multiple:c,disabled:Q,readOnly:ie,areSelectedItemsInTrigger:oe,setAreSelectedItemsInTrigger:se,hasPopover:ae,setHasPopover:$,state:re,lastInteractionType:ce,setLastInteractionType:le,wrap:d,innerInputRef:P,triggerAreaRef:N,...fe,...ue,setInputValue:A,selectItem:G,setSelectedItems:K,isLoading:x,setOnInputValueChange:te,isTyping:j,setIsTyping:M},children:(0,s.jsx)(pe,{...me,children:e})})},A=()=>{let e=(0,o.useContext)(E);if(!e)throw Error(`useComboboxContext must be used within a Combobox provider`);return e},j=({children:e,...t})=>(0,s.jsx)(k,{...t,children:e});j.displayName=`Combobox`;var M=({className:e,tabIndex:n=-1,onClick:r,ref:i,...o})=>{let c=A();return(0,s.jsx)(`button`,{ref:i,className:(0,a.cx)(e,`h-sz-44 text-neutral hover:text-neutral-hovered`),tabIndex:n,onClick:e=>{e.stopPropagation(),c.multiple?c.setSelectedItems([]):c.selectItem(null),c.setInputValue(``),c.innerInputRef.current&&c.innerInputRef.current.focus(),r&&r(e)},type:`button`,...o,children:(0,s.jsx)(t.t,{size:`sm`,children:(0,s.jsx)(m.DeleteOutline,{})})})};M.displayName=`Combobox.ClearButton`;var N=({className:e,closedLabel:n,openedLabel:i,intent:o=`neutral`,design:u=`ghost`,size:d=`sm`,ref:f,...p})=>{let m=A(),{ref:h,...g}=m.getToggleButtonProps({disabled:m.disabled||m.readOnly,onClick:e=>{e.stopPropagation()}}),_=g[`aria-expanded`];return(0,s.jsx)(r.t,{ref:(0,l.useMergeRefs)(f,h),className:(0,a.cx)(e,`ml-sm mt-[calc((44px-32px)/2)]`),intent:o,design:u,size:d,...g,...p,"aria-label":_?i:n,disabled:m.disabled,children:(0,s.jsx)(t.t,{className:(0,a.cx)(`shrink-0`,`rotate-0 transition duration-100 ease-in`,{"rotate-180":_}),size:`sm`,children:(0,s.jsx)(c.ArrowHorizontalDown,{})})})};N.displayName=`Combobox.Disclosure`;var P=({className:e,children:t,ref:n})=>A().filteredItemsMap.size===0?(0,s.jsx)(`div`,{ref:n,className:(0,a.cx)(`px-lg py-md text-body-1 text-on-surface/dim-1`,e),children:t}):null;P.displayName=`Combobox.Empty`;var F=(0,o.createContext)(null),te=({children:e})=>{let t=`${O}-group-label-${(0,o.useId)()}`;return(0,s.jsx)(F,{value:{groupLabelId:t},children:e})},I=()=>{let e=(0,o.useContext)(F);if(!e)throw Error(`useComboboxGroupContext must be used within a ComboboxGroup provider`);return e},L=({children:e,ref:t,...n})=>(0,s.jsx)(te,{children:(0,s.jsx)(R,{ref:t,...n,children:e})}),R=({children:e,className:t,ref:n})=>{let r=A(),i=I();return o.Children.toArray(e).some(e=>(0,o.isValidElement)(e)&&r.filteredItemsMap.get(e.props.value))?(0,s.jsx)(`div`,{ref:n,role:`group`,"aria-labelledby":i.groupLabelId,className:(0,a.cx)(t),children:e}):null};L.displayName=`Combobox.Group`;var z=({"aria-label":t,className:n,placeholder:r,value:c,defaultValue:d,onValueChange:p,ref:m,...h})=>{let g=A(),_=(0,u.useFormFieldControl)(),[v]=(0,f.useCombinedState)(c,d),{isInvalid:y,description:b}=_;(0,o.useEffect)(()=>{v!=null&&g.setInputValue(v)},[v]),(0,o.useEffect)(()=>{p&&g.setOnInputValueChange(()=>p),!g.multiple&&g.selectedItem&&g.setInputValue(g.selectedItem.text)},[]);let x=g.hasPopover?i.t.Trigger:o.Fragment,S=g.hasPopover?{asChild:!0,type:void 0}:{},C=g.getDropdownProps(),w=(0,l.useMergeRefs)(m,g.innerInputRef,C.ref),T=g.getInputProps({disabled:g.disabled||g.readOnly,...C,onKeyDown:e=>{C.onKeyDown?.(e),g.setLastInteractionType(`keyboard`),g.setIsTyping(!0)},onChange:e=>{g.setInputValue(e.target.value)},ref:w}),ee=g.multiple?!g.areSelectedItemsInTrigger||g.selectedItems.length===0:g.selectedItem===null;function E(e,t){return n=>{e?.(n),t?.(n)}}let D={onBlur:E(h.onBlur,T.onBlur),onChange:E(h.onChange,T.onChange),onClick:E(h.onClick,T.onClick),onKeyDown:E(h.onKeyDown,T.onKeyDown)};return(0,s.jsxs)(s.Fragment,{children:[t&&(0,s.jsx)(e.VisuallyHidden,{children:(0,s.jsx)(`label`,{...g.getLabelProps(),children:t})}),(0,s.jsx)(x,{...S,children:(0,s.jsx)(`input`,{"data-spark-component":`combobox-input`,type:`text`,...ee&&{placeholder:r},className:(0,a.cx)(`max-w-full shrink-0 grow basis-[80px]`,`h-sz-28 bg-surface px-sm text-body-1 text-ellipsis outline-hidden`,`disabled:text-on-surface/dim-3 disabled:cursor-not-allowed disabled:bg-transparent`,`read-only:text-on-surface read-only:cursor-default read-only:bg-transparent`,n),...h,...T,...D,value:g.inputValue,"aria-label":t,disabled:g.disabled,readOnly:g.readOnly,"aria-invalid":y,"aria-describedby":b})})]})};z.displayName=`Combobox.Input`;var B=(0,o.createContext)(null),V=({value:e,disabled:t=!1,children:n})=>{let r=A(),[i,a]=(0,o.useState)(void 0),c=h(r.filteredItemsMap,e),l={disabled:t,value:e,text:x(n)},u=r.multiple?r.selectedItems.some(t=>t.value===e):r.selectedItem?.value===e;return(0,s.jsx)(B,{value:{textId:i,setTextId:a,isSelected:u,itemData:l,index:c,disabled:t},children:n})},H=()=>{let e=(0,o.useContext)(B);if(!e)throw Error(`useComboboxItemContext must be used within a ComboboxItem provider`);return e},U=({children:e,ref:t,...n})=>{let{value:r,disabled:i}=n;return(0,s.jsx)(V,{value:r,disabled:i,children:(0,s.jsx)(ne,{ref:t,...n,children:e})})},W=(0,a.cva)(`px-lg py-md text-body-1`,{variants:{selected:{true:`font-bold`},disabled:{true:`opacity-dim-3 cursor-not-allowed`,false:`cursor-pointer`},highlighted:{true:``},interactionType:{mouse:``,keyboard:``}},compoundVariants:[{highlighted:!0,interactionType:`mouse`,class:`bg-surface-hovered`},{highlighted:!0,interactionType:`keyboard`,class:`u-outline`}]}),ne=({className:e,disabled:t=!1,value:n,children:r,ref:i,...o})=>{let c=A(),u=H(),d=!!c.filteredItemsMap.get(n),{ref:f,...p}=c.getItemProps({item:u.itemData,index:u.index}),m=(0,l.useMergeRefs)(i,f);return d?(0,s.jsx)(`li`,{ref:m,className:(0,a.cx)(W({selected:u.isSelected,disabled:t,highlighted:c.highlightedItem?.value===n,interactionType:c.lastInteractionType,className:e})),...p,...o,"aria-selected":u.isSelected,"aria-labelledby":u.textId,children:r},n):null};U.displayName=`Combobox.Item`;var G=({className:e,children:n,label:r,ref:i})=>{let{disabled:o,isSelected:c}=H(),l=n||(0,s.jsx)(t.t,{size:`sm`,children:(0,s.jsx)(d.Check,{"aria-label":r})});return(0,s.jsx)(`span`,{ref:i,className:(0,a.cx)(`min-h-sz-16 min-w-sz-16 flex`,o&&`opacity-dim-3`,e),children:c&&l})};G.displayName=`Combobox.ItemIndicator`;var K=({children:e,className:t,ref:r,...i})=>{let c=A(),{ref:u,...d}=c.getMenuProps({onMouseMove:()=>{c.setLastInteractionType(`mouse`)}}),f=(0,o.useRef)(null),p=(0,l.useMergeRefs)(r,u,f),m=!c.hasPopover||c.isOpen,h=c.hasPopover&&!m;return(0,o.useLayoutEffect)(()=>{f.current?.parentElement&&(f.current.parentElement.style.pointerEvents=h?`none`:``,f.current.style.pointerEvents=h?`none`:``)},[h]),(0,s.jsx)(`ul`,{ref:p,className:(0,a.cx)(t,`flex flex-col`,m?`block`:`pointer-events-none invisible opacity-0`,c.hasPopover&&`p-lg`,c.isLoading&&`items-center overflow-y-auto`),...i,...d,"aria-busy":c.isLoading,"data-spark-component":`combobox-items`,children:c.isLoading?(0,s.jsx)(n.t,{size:`sm`}):e})};K.displayName=`Combobox.Items`;var q=({children:e,className:t,ref:n})=>{let r=`${O}-item-text-${(0,o.useId)()}`,{setTextId:i}=H();return(0,o.useEffect)(()=>(i(r),()=>i(void 0))),(0,s.jsx)(`span`,{id:r,className:(0,a.cx)(`inline`,t),ref:n,children:e})};q.displayName=`Combobox.ItemText`;var J=({children:e,className:t,ref:n})=>(0,s.jsx)(`div`,{ref:n,id:I().groupLabelId,className:(0,a.cx)(`px-md py-sm text-body-2 text-neutral italic`,t),children:e});J.displayName=`Combobox.Label`;var Y=({children:e})=>(0,s.jsx)(t.t,{size:`sm`,className:`h-sz-44 shrink-0`,children:e});Y.displayName=`Combobox.LeadingIcon`;var X=({children:e,matchTriggerWidth:t=!0,sideOffset:n=4,className:r,ref:c,...l})=>{let u=A();return(0,o.useEffect)(()=>(u.setHasPopover(!0),()=>u.setHasPopover(!1)),[]),(0,s.jsx)(i.t.Content,{ref:c,inset:!0,asChild:!0,matchTriggerWidth:t,className:(0,a.cx)(`z-dropdown! relative`,r),sideOffset:n,onOpenAutoFocus:e=>{e.preventDefault()},...l,"data-spark-component":`combobox-popover`,children:e})};X.displayName=`Combobox.Popover`;var Z=({children:e,...t})=>(0,s.jsx)(i.t.Portal,{...t,children:e});Z.displayName=`Combobox.Portal`;var re=({item:e,index:n})=>{let r=A(),i=!r.disabled&&!r.readOnly,o=e=>{let t=e.target;r.lastInteractionType===`keyboard`&&t.scrollIntoView({behavior:`smooth`,block:`nearest`,inline:`nearest`})},{disabled:c,...l}=r.getSelectedItemProps({disabled:r.disabled||r.readOnly,selectedItem:e,index:n});return(0,s.jsxs)(c?`button`:`span`,{role:`presentation`,"data-spark-component":`combobox-selected-item`,className:(0,a.cx)(`h-sz-28 bg-neutral-container flex items-center rounded-md align-middle`,`text-body-2 text-on-neutral-container`,`disabled:opacity-dim-3 disabled:cursor-not-allowed`,`focus-visible:u-outline-inset outline-hidden`,{"px-md":!i,"pl-md":i}),...l,tabIndex:-1,...c&&{disabled:!0},onFocus:o,children:[(0,s.jsx)(`span`,{className:(0,a.cx)(`line-clamp-1 overflow-x-hidden leading-normal break-all text-ellipsis`,{"w-max":!r.wrap}),children:e.text}),r.disabled,i&&(0,s.jsx)(`button`,{type:`button`,tabIndex:-1,"aria-hidden":!0,className:`px-md h-full cursor-pointer`,onClick:t=>{t.stopPropagation();let n=r.selectedItems.filter(t=>t.value!==e.value);r.setSelectedItems(n),r.innerInputRef.current&&r.innerInputRef.current.focus({preventScroll:!0})},children:(0,s.jsx)(t.t,{size:`sm`,children:(0,s.jsx)(m.DeleteOutline,{})})})]},`selected-item-${n}`)},Q=()=>{let e=A();return e.multiple&&e.selectedItems.length?(0,s.jsx)(s.Fragment,{children:e.selectedItems.map((e,t)=>(0,s.jsx)(re,{item:e,index:t},e.value))}):null};Q.displayName=`Combobox.SelectedItems`;var ie=(0,a.cva)([`flex items-start gap-md min-h-sz-44 text-body-1`,`h-fit rounded-input px-lg`,`ring-1 outline-hidden ring-inset focus-within:ring-2 focus-within:ring-focus`],{variants:{allowWrap:{true:``,false:`h-sz-44`},state:{undefined:`ring-outline`,error:`ring-error`,alert:`ring-alert`,success:`ring-success`},disabled:{true:`cursor-not-allowed border-outline bg-on-surface/dim-5 text-on-surface/dim-3`},readOnly:{true:`cursor-default bg-on-surface/dim-5 text-on-surface`}},compoundVariants:[{disabled:!1,state:void 0,class:`default:hover:ring-outline-high`},{disabled:!1,readOnly:!1,class:`bg-surface text-on-surface cursor-text`}],defaultVariants:{state:void 0,disabled:!1,readOnly:!1}}),ae=(e,t)=>{let n=(0,o.useRef)(null);(0,o.useEffect)(()=>{let r=()=>{let i=e.current?.scrollWidth||null;n.current&&i&&i>n.current&&t(),n.current=i,requestAnimationFrame(r)},i=requestAnimationFrame(r);return()=>cancelAnimationFrame(i)},[e])},$=({className:e,children:t,ref:n})=>{let r=A(),c=(0,u.useFormFieldControl)(),d=w(t,`Combobox.LeadingIcon`),f=w(t,`Combobox.SelectedItems`),p=w(t,`Combobox.Input`),m=w(t,`Combobox.ClearButton`),h=w(t,`Combobox.Disclosure`),[g,_]=r.hasPopover?[i.t.Anchor,{asChild:!0,type:void 0}]:[o.Fragment,{}],v=(0,l.useMergeRefs)(n,r.triggerAreaRef),y=(0,o.useRef)(null),b=c.disabled||r.disabled,x=c.readOnly||r.readOnly,S=!!m&&!b&&!x,C=()=>{if(y.current&&!r.wrap){let{scrollWidth:e,clientWidth:t}=y.current;y.current.scrollLeft=e-t}};ae(y,C);let T=!!f;return(0,o.useEffect)(()=>{r.setAreSelectedItemsInTrigger(T)},[T]),(0,o.useEffect)(()=>{let e=new ResizeObserver(C);return y.current&&e.observe(y.current),()=>{e.disconnect()}},[]),(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(g,{..._,children:(0,s.jsxs)(`div`,{ref:v,className:ie({className:e,state:r.state,disabled:b,readOnly:x,allowWrap:r.wrap}),onClick:()=>{!r.isOpen&&!b&&!x&&(r.openMenu(),r.innerInputRef.current&&r.innerInputRef.current.focus())},children:[d,(0,s.jsxs)(`div`,{ref:y,className:(0,a.cx)(`min-w-none gap-sm py-md inline-flex grow items-start`,r.wrap?`flex-wrap`:`u-no-scrollbar overflow-x-auto p-[2px]`),children:[f,p]}),S&&m,h]})})})};$.displayName=`Combobox.Trigger`;var oe=Object.assign(j,{Group:L,Item:U,Items:K,ItemText:q,ItemIndicator:G,Label:J,Popover:X,Trigger:$,LeadingIcon:Y,Empty:P,Input:z,Disclosure:N,SelectedItems:Q,ClearButton:M,Portal:Z});oe.displayName=`Combobox`,L.displayName=`Combobox.Group`,K.displayName=`Combobox.Items`,U.displayName=`Combobox.Item`,q.displayName=`Combobox.ItemText`,G.displayName=`Combobox.ItemIndicator`,J.displayName=`Combobox.Label`,X.displayName=`Combobox.Popover`,$.displayName=`Combobox.Trigger`,Y.displayName=`Combobox.LeadingIcon`,P.displayName=`Combobox.Empty`,z.displayName=`Combobox.Input`,N.displayName=`Combobox.Disclosure`,Q.displayName=`Combobox.SelectedItems`,M.displayName=`Combobox.ClearButton`,Z.displayName=`Combobox.Portal`,exports.Combobox=oe,exports.ComboboxProvider=k,exports.useComboboxContext=A;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../visually-hidden/index.js"),t=require("../icon-CfEsla9z.js"),n=require("../spinner-BAreohbs.js"),r=require("../icon-button-B2TM0Xby.js"),i=require("../popover-B-mcHcLF.js");let a=require("class-variance-authority"),o=require("react"),s=require("react/jsx-runtime"),c=require("@spark-ui/icons/ArrowHorizontalDown"),l=require("@spark-ui/hooks/use-merge-refs"),u=require("@spark-ui/components/form-field"),d=require("@spark-ui/icons/Check"),f=require("@spark-ui/hooks/use-combined-state"),p=require("downshift"),m=require("@spark-ui/icons/DeleteOutline");function h(e,t){let n=0;for(let[r]of e.entries()){if(r===t)return n;n++}return-1}var g=(e,t)=>{let n=0;for(let r of e.keys()){if(n===t)return r;n++}},_=(e,t)=>{let n=g(e,t);return n===void 0?void 0:e.get(n)},v=e=>e?e.type.displayName:``,y=(e,t=[])=>(o.Children.forEach(e,e=>{if((0,o.isValidElement)(e)){if(v(e)===`Combobox.Item`){let n=e.props;t.push({value:n.value,disabled:!!n.disabled,text:x(n.children)})}e.props.children&&y(e.props.children,t)}}),t),b=e=>{if(!e)return``;for(let t of o.Children.toArray(e))if((0,o.isValidElement)(t)){let e=t;if(v(e)===`Combobox.ItemText`)return e.props.children;let n=b(e.props.children);if(n)return n}return``},x=e=>typeof e==`string`?e:b(e),S=e=>{let t=new Map;return y(e).forEach(e=>{t.set(e.value,e)}),t},C=(e,t)=>o.Children.toArray(e).some(e=>(0,o.isValidElement)(e)?v(e)===t?!0:e.props.children?C(e.props.children,t):!1:!1),w=(e,t)=>o.Children.toArray(e).filter(o.isValidElement).find(e=>t===v(e)||``),T=({multiselect:e,selectedItems:t,allowCustomValue:n=!1,setSelectedItems:r,triggerAreaRef:i,items:a})=>(o,{changes:s,type:c})=>{let l=i.current?.contains?.(document.activeElement);switch(c){case p.useCombobox.stateChangeTypes.InputClick:return{...s,isOpen:!0};case p.useCombobox.stateChangeTypes.InputKeyDownEnter:case p.useCombobox.stateChangeTypes.ItemClick:{let n={...s};return s.selectedItem!=null&&(n.inputValue=``,n.isOpen=!0,n.highlightedIndex=h(a,s.selectedItem.value),r(e.selectedItems.some(e=>e.value===s.selectedItem?.value)?t.filter(e=>e.value!==s.selectedItem?.value):[...t,s.selectedItem])),n}case p.useCombobox.stateChangeTypes.ToggleButtonClick:return{...s,inputValue:n?s.inputValue:``};case p.useCombobox.stateChangeTypes.InputChange:return{...s,selectedItem:s.highlightedIndex===-1?null:s.selectedItem};case p.useCombobox.stateChangeTypes.InputBlur:return{...s,inputValue:n?s.inputValue:``,isOpen:l};default:return s}},ee=({filteredItems:e,allowCustomValue:t=!1,setSelectedItem:n})=>(r,{changes:i,type:a})=>{let o=e.find(e=>e.text.toLowerCase()===r.inputValue.toLowerCase());switch(a){case p.useCombobox.stateChangeTypes.InputKeyDownEscape:return i.selectedItem||n(null),i;case p.useCombobox.stateChangeTypes.ItemClick:case p.useCombobox.stateChangeTypes.InputKeyDownEnter:return i.selectedItem&&n(i.selectedItem),i;case p.useCombobox.stateChangeTypes.InputClick:return{...i,isOpen:!0};case p.useCombobox.stateChangeTypes.ToggleButtonClick:case p.useCombobox.stateChangeTypes.InputBlur:return t?i:r.inputValue===``?(n(null),{...i,selectedItem:null}):o?(n(o),{...i,selectedItem:o,inputValue:o.text}):r.selectedItem?{...i,inputValue:r.selectedItem.text}:{...i,inputValue:``};default:return i}},E=(0,o.createContext)(null),D=(e,t)=>t?new Map(Array.from(e).filter(([e,{text:n}])=>n.toLowerCase().includes(t.toLowerCase()))):e,O=`:combobox`,k=({children:e,state:t,allowCustomValue:n=!1,filtering:r=`auto`,disabled:a=!1,multiple:c=!1,readOnly:l=!1,wrap:d=!0,value:m,defaultValue:h,onValueChange:g,open:v,defaultOpen:y,onOpenChange:b,isLoading:x})=>{let w=(0,o.useRef)(!1),[k,A]=(0,o.useState)(``),[j,M]=(0,o.useState)(r===`strict`),N=(0,o.useRef)(null),P=(0,o.useRef)(null),[F,te]=(0,o.useState)(null),[I]=(0,f.useCombinedState)(m,h),L=r===`strict`||r===`auto`&&j,[R,z]=(0,o.useState)(S(e)),[B,V]=(0,o.useState)(L?D(R,k):R),[H,U]=(0,o.useState)(R.get(I)||null),[W,ne]=(0,o.useState)(I?[...R.values()].filter(e=>I.includes(e.value)):[]),G=e=>{M(!1),e?.value!==H?.value&&(U(e),setTimeout(()=>{g?.(e?.value)},0))},K=e=>{ne(e),setTimeout(()=>{g?.(e.map(e=>e.value))},0)};(0,o.useEffect)(()=>{if(!w.current){w.current=!0;return}if(c){let e=I.reduce((e,t)=>{let n=R.get(t);return n?[...e,n]:e},[]);ne(I?e:[])}else U(R.get(I)||null)},[c?JSON.stringify(I):I]);let q=(0,u.useFormFieldControl)(),J=`${O}-label-${(0,o.useId)()}`,Y=`${O}-field-${(0,o.useId)()}`,X=q.id||Y,Z=q.labelId||J,re=q.state||t,Q=q.disabled??a,ie=q.readOnly??l,[ae,$]=(0,o.useState)(C(e,`Combobox.Popover`)),[oe,se]=(0,o.useState)(!1),[ce,le]=(0,o.useState)(`mouse`);(0,o.useEffect)(()=>{V(L?D(R,k):R)},[k,R]);let ue=(0,p.useMultipleSelection)({selectedItems:W,stateReducer:(e,{type:t,changes:n})=>{let r=p.useMultipleSelection.stateChangeTypes;switch(t){case r.SelectedItemKeyDownBackspace:case r.SelectedItemKeyDownDelete:{K(n.selectedItems||[]);let i;return i=t===r.SelectedItemKeyDownDelete?e?.activeIndex===n.selectedItems?.length?-1:e.activeIndex:(n?.activeIndex||0)-1>=0?e.activeIndex-1:n?.activeIndex,{...n,activeIndex:i}}case r.SelectedItemClick:return P.current&&P.current.focus(),{...n,activeIndex:-1};case r.FunctionRemoveSelectedItem:return{...n,activeIndex:-1};case r.DropdownKeyDownNavigationPrevious:return fe.closeMenu(),n;default:return n}}}),de=Array.from(B.values());(0,o.useEffect)(()=>{F?.(k||``)},[k]);let fe=(0,p.useCombobox)({inputId:X,items:de,selectedItem:c?void 0:H,id:X,labelId:Z,inputValue:k,onInputValueChange:({inputValue:e})=>{if(A(e),L){let t=D(R,e||``);V(t)}},initialIsOpen:y,...v!=null&&{isOpen:v},onIsOpenChange:e=>{e.isOpen!=null&&b?.(e.isOpen)},itemToString:e=>e?.text,isItemDisabled:e=>{let t=!!k&&!de.some(t=>e.value===t.value);return e.disabled||t},stateReducer:c?T({multiselect:ue,selectedItems:W,allowCustomValue:n,setSelectedItems:K,triggerAreaRef:N,items:R}):ee({allowCustomValue:n,setSelectedItem:G,filteredItems:[...B.values()]}),scrollIntoView:e=>{e&&e.scrollIntoView({block:`nearest`})}});(0,o.useEffect)(()=>{let t=S(e),n=[...R.values()],r=[...t.values()];(n.length!==r.length||n.some((e,t)=>{let n=e.value!==r[t]?.value,i=e.text!==r[t]?.text;return n||i}))&&z(t)},[e]);let[pe,me]=ae?[i.t,{open:!0}]:[o.Fragment,{}];return(0,s.jsx)(E,{value:{itemsMap:R,filteredItemsMap:B,highlightedItem:_(B,fe.highlightedIndex),multiple:c,disabled:Q,readOnly:ie,areSelectedItemsInTrigger:oe,setAreSelectedItemsInTrigger:se,hasPopover:ae,setHasPopover:$,state:re,lastInteractionType:ce,setLastInteractionType:le,wrap:d,innerInputRef:P,triggerAreaRef:N,...fe,...ue,setInputValue:A,selectItem:G,setSelectedItems:K,isLoading:x,setOnInputValueChange:te,isTyping:j,setIsTyping:M},children:(0,s.jsx)(pe,{...me,children:e})})},A=()=>{let e=(0,o.useContext)(E);if(!e)throw Error(`useComboboxContext must be used within a Combobox provider`);return e},j=({children:e,...t})=>(0,s.jsx)(k,{...t,children:e});j.displayName=`Combobox`;var M=({className:e,tabIndex:n=-1,onClick:r,ref:i,...o})=>{let c=A();return(0,s.jsx)(`button`,{ref:i,className:(0,a.cx)(e,`h-sz-44 text-neutral hover:text-neutral-hovered`),tabIndex:n,onClick:e=>{e.stopPropagation(),c.multiple?c.setSelectedItems([]):c.selectItem(null),c.setInputValue(``),c.innerInputRef.current&&c.innerInputRef.current.focus(),r&&r(e)},type:`button`,...o,children:(0,s.jsx)(t.t,{size:`sm`,children:(0,s.jsx)(m.DeleteOutline,{})})})};M.displayName=`Combobox.ClearButton`;var N=({className:e,closedLabel:n,openedLabel:i,intent:o=`neutral`,design:u=`ghost`,size:d=`sm`,ref:f,...p})=>{let m=A(),{ref:h,...g}=m.getToggleButtonProps({disabled:m.disabled||m.readOnly,onClick:e=>{e.stopPropagation()}}),_=g[`aria-expanded`];return(0,s.jsx)(r.t,{ref:(0,l.useMergeRefs)(f,h),className:(0,a.cx)(e,`ml-sm mt-[calc((44px-32px)/2)]`),intent:o,design:u,size:d,...g,...p,"aria-label":_?i:n,disabled:m.disabled,children:(0,s.jsx)(t.t,{className:(0,a.cx)(`shrink-0`,`rotate-0 transition duration-100 ease-in`,{"rotate-180":_}),size:`sm`,children:(0,s.jsx)(c.ArrowHorizontalDown,{})})})};N.displayName=`Combobox.Disclosure`;var P=({className:e,children:t,ref:n})=>A().filteredItemsMap.size===0?(0,s.jsx)(`div`,{ref:n,className:(0,a.cx)(`px-lg py-md text-body-1 text-on-surface/dim-1`,e),children:t}):null;P.displayName=`Combobox.Empty`;var F=(0,o.createContext)(null),te=({children:e})=>{let t=`${O}-group-label-${(0,o.useId)()}`;return(0,s.jsx)(F,{value:{groupLabelId:t},children:e})},I=()=>{let e=(0,o.useContext)(F);if(!e)throw Error(`useComboboxGroupContext must be used within a ComboboxGroup provider`);return e},L=({children:e,ref:t,...n})=>(0,s.jsx)(te,{children:(0,s.jsx)(R,{ref:t,...n,children:e})}),R=({children:e,className:t,ref:n})=>{let r=A(),i=I();return o.Children.toArray(e).some(e=>(0,o.isValidElement)(e)&&r.filteredItemsMap.get(e.props.value))?(0,s.jsx)(`div`,{ref:n,role:`group`,"aria-labelledby":i.groupLabelId,className:(0,a.cx)(t),children:e}):null};L.displayName=`Combobox.Group`;var z=({"aria-label":t,className:n,placeholder:r,value:c,defaultValue:d,onValueChange:p,ref:m,...h})=>{let g=A(),_=(0,u.useFormFieldControl)(),[v]=(0,f.useCombinedState)(c,d),{isInvalid:y,description:b}=_;(0,o.useEffect)(()=>{v!=null&&g.setInputValue(v)},[v]),(0,o.useEffect)(()=>{p&&g.setOnInputValueChange(()=>p),!g.multiple&&g.selectedItem&&g.setInputValue(g.selectedItem.text)},[]);let x=g.hasPopover?i.t.Trigger:o.Fragment,S=g.hasPopover?{asChild:!0,type:void 0}:{},C=g.getDropdownProps(),w=(0,l.useMergeRefs)(m,g.innerInputRef,C.ref),T=g.getInputProps({disabled:g.disabled||g.readOnly,...C,onKeyDown:e=>{C.onKeyDown?.(e),g.setLastInteractionType(`keyboard`),g.setIsTyping(!0)},onChange:e=>{g.setInputValue(e.target.value)},ref:w}),ee=g.multiple?!g.areSelectedItemsInTrigger||g.selectedItems.length===0:g.selectedItem===null;function E(e,t){return n=>{e?.(n),t?.(n)}}let D={onBlur:E(h.onBlur,T.onBlur),onChange:E(h.onChange,T.onChange),onClick:E(h.onClick,T.onClick),onKeyDown:E(h.onKeyDown,T.onKeyDown)};return(0,s.jsxs)(s.Fragment,{children:[t&&(0,s.jsx)(e.VisuallyHidden,{children:(0,s.jsx)(`label`,{...g.getLabelProps(),children:t})}),(0,s.jsx)(x,{...S,children:(0,s.jsx)(`input`,{"data-spark-component":`combobox-input`,type:`text`,...ee&&{placeholder:r},className:(0,a.cx)(`max-w-full shrink-0 grow basis-[80px]`,`h-sz-28 bg-surface px-sm text-body-1 text-ellipsis outline-hidden`,`disabled:text-on-surface/dim-3 disabled:cursor-not-allowed disabled:bg-transparent`,`read-only:text-on-surface read-only:cursor-default read-only:bg-transparent`,n),...h,...T,...D,value:g.inputValue,"aria-label":t,disabled:g.disabled,readOnly:g.readOnly,"aria-invalid":y,"aria-describedby":b})})]})};z.displayName=`Combobox.Input`;var B=(0,o.createContext)(null),V=({value:e,disabled:t=!1,children:n})=>{let r=A(),[i,a]=(0,o.useState)(void 0),c=h(r.filteredItemsMap,e),l={disabled:t,value:e,text:x(n)},u=r.multiple?r.selectedItems.some(t=>t.value===e):r.selectedItem?.value===e;return(0,s.jsx)(B,{value:{textId:i,setTextId:a,isSelected:u,itemData:l,index:c,disabled:t},children:n})},H=()=>{let e=(0,o.useContext)(B);if(!e)throw Error(`useComboboxItemContext must be used within a ComboboxItem provider`);return e},U=({children:e,ref:t,...n})=>{let{value:r,disabled:i}=n;return(0,s.jsx)(V,{value:r,disabled:i,children:(0,s.jsx)(ne,{ref:t,...n,children:e})})},W=(0,a.cva)(`px-lg py-md text-body-1`,{variants:{selected:{true:`font-bold`},disabled:{true:`opacity-dim-3 cursor-not-allowed`,false:`cursor-pointer`},highlighted:{true:``},interactionType:{mouse:``,keyboard:``}},compoundVariants:[{highlighted:!0,interactionType:`mouse`,class:`bg-surface-hovered`},{highlighted:!0,interactionType:`keyboard`,class:`u-outline`}]}),ne=({className:e,disabled:t=!1,value:n,children:r,ref:i,...o})=>{let c=A(),u=H(),d=!!c.filteredItemsMap.get(n),{ref:f,...p}=c.getItemProps({item:u.itemData,index:u.index}),m=(0,l.useMergeRefs)(i,f);return d?(0,s.jsx)(`li`,{ref:m,className:(0,a.cx)(W({selected:u.isSelected,disabled:t,highlighted:c.highlightedItem?.value===n,interactionType:c.lastInteractionType,className:e})),...p,...o,"aria-selected":u.isSelected,"aria-labelledby":u.textId,children:r},n):null};U.displayName=`Combobox.Item`;var G=({className:e,children:n,label:r,ref:i})=>{let{disabled:o,isSelected:c}=H(),l=n||(0,s.jsx)(t.t,{size:`sm`,children:(0,s.jsx)(d.Check,{"aria-label":r})});return(0,s.jsx)(`span`,{ref:i,className:(0,a.cx)(`min-h-sz-16 min-w-sz-16 flex`,o&&`opacity-dim-3`,e),children:c&&l})};G.displayName=`Combobox.ItemIndicator`;var K=({children:e,className:t,ref:r,...i})=>{let c=A(),{ref:u,...d}=c.getMenuProps({onMouseMove:()=>{c.setLastInteractionType(`mouse`)}}),f=(0,o.useRef)(null),p=(0,l.useMergeRefs)(r,u,f),m=!c.hasPopover||c.isOpen,h=c.hasPopover&&!m;return(0,o.useLayoutEffect)(()=>{f.current?.parentElement&&(f.current.parentElement.style.pointerEvents=h?`none`:``,f.current.style.pointerEvents=h?`none`:``)},[h]),(0,s.jsx)(`ul`,{ref:p,className:(0,a.cx)(t,`flex flex-col`,m?`block`:`pointer-events-none invisible opacity-0`,c.hasPopover&&`p-lg`,c.isLoading&&`items-center overflow-y-auto`),...i,...d,"aria-busy":c.isLoading,"data-spark-component":`combobox-items`,children:c.isLoading?(0,s.jsx)(n.t,{size:`sm`}):e})};K.displayName=`Combobox.Items`;var q=({children:e,className:t,ref:n})=>{let r=`${O}-item-text-${(0,o.useId)()}`,{setTextId:i}=H();return(0,o.useEffect)(()=>(i(r),()=>i(void 0))),(0,s.jsx)(`span`,{id:r,className:(0,a.cx)(`inline`,t),ref:n,children:e})};q.displayName=`Combobox.ItemText`;var J=({children:e,className:t,ref:n})=>(0,s.jsx)(`div`,{ref:n,id:I().groupLabelId,className:(0,a.cx)(`px-md py-sm text-body-2 text-neutral italic`,t),children:e});J.displayName=`Combobox.Label`;var Y=({children:e})=>(0,s.jsx)(t.t,{size:`sm`,className:`h-sz-44 shrink-0`,children:e});Y.displayName=`Combobox.LeadingIcon`;var X=({children:e,matchTriggerWidth:t=!0,sideOffset:n=4,className:r,ref:c,...l})=>{let u=A();return(0,o.useEffect)(()=>(u.setHasPopover(!0),()=>u.setHasPopover(!1)),[]),(0,s.jsx)(i.t.Content,{ref:c,inset:!0,asChild:!0,matchTriggerWidth:t,className:(0,a.cx)(`z-dropdown! relative`,r),sideOffset:n,onOpenAutoFocus:e=>{e.preventDefault()},...l,"data-spark-component":`combobox-popover`,children:e})};X.displayName=`Combobox.Popover`;var Z=({children:e,...t})=>(0,s.jsx)(i.t.Portal,{...t,children:e});Z.displayName=`Combobox.Portal`;var re=({item:e,index:n})=>{let r=A(),i=!r.disabled&&!r.readOnly,o=e=>{let t=e.target;r.lastInteractionType===`keyboard`&&t.scrollIntoView({behavior:`smooth`,block:`nearest`,inline:`nearest`})},{disabled:c,...l}=r.getSelectedItemProps({disabled:r.disabled||r.readOnly,selectedItem:e,index:n});return(0,s.jsxs)(c?`button`:`span`,{role:`presentation`,"data-spark-component":`combobox-selected-item`,className:(0,a.cx)(`h-sz-28 bg-neutral-container flex items-center rounded-md align-middle`,`text-body-2 text-on-neutral-container`,`disabled:opacity-dim-3 disabled:cursor-not-allowed`,`focus-visible:u-outline-inset outline-hidden`,{"px-md":!i,"pl-md":i}),...l,tabIndex:-1,...c&&{disabled:!0},onFocus:o,children:[(0,s.jsx)(`span`,{className:(0,a.cx)(`line-clamp-1 overflow-x-hidden leading-normal break-all text-ellipsis`,{"w-max":!r.wrap}),children:e.text}),r.disabled,i&&(0,s.jsx)(`button`,{type:`button`,tabIndex:-1,"aria-hidden":!0,className:`px-md h-full cursor-pointer`,onClick:t=>{t.stopPropagation();let n=r.selectedItems.filter(t=>t.value!==e.value);r.setSelectedItems(n),r.innerInputRef.current&&r.innerInputRef.current.focus({preventScroll:!0})},children:(0,s.jsx)(t.t,{size:`sm`,children:(0,s.jsx)(m.DeleteOutline,{})})})]},`selected-item-${n}`)},Q=()=>{let e=A();return e.multiple&&e.selectedItems.length?(0,s.jsx)(s.Fragment,{children:e.selectedItems.map((e,t)=>(0,s.jsx)(re,{item:e,index:t},e.value))}):null};Q.displayName=`Combobox.SelectedItems`;var ie=(0,a.cva)([`flex items-start gap-md min-h-sz-44 text-body-1`,`h-fit rounded-input px-lg`,`ring-1 outline-hidden ring-inset focus-within:ring-2 focus-within:ring-focus`],{variants:{allowWrap:{true:``,false:`h-sz-44`},state:{undefined:`ring-outline`,error:`ring-error`,alert:`ring-alert`,success:`ring-success`},disabled:{true:`cursor-not-allowed border-outline bg-on-surface/dim-5 text-on-surface/dim-3`},readOnly:{true:`cursor-default bg-on-surface/dim-5 text-on-surface`}},compoundVariants:[{disabled:!1,state:void 0,class:`default:hover:ring-outline-high`},{disabled:!1,readOnly:!1,class:`bg-surface text-on-surface cursor-text`}],defaultVariants:{state:void 0,disabled:!1,readOnly:!1}}),ae=(e,t)=>{let n=(0,o.useRef)(null);(0,o.useEffect)(()=>{let r=()=>{let i=e.current?.scrollWidth||null;n.current&&i&&i>n.current&&t(),n.current=i,requestAnimationFrame(r)},i=requestAnimationFrame(r);return()=>cancelAnimationFrame(i)},[e])},$=({className:e,children:t,ref:n})=>{let r=A(),c=(0,u.useFormFieldControl)(),d=w(t,`Combobox.LeadingIcon`),f=w(t,`Combobox.SelectedItems`),p=w(t,`Combobox.Input`),m=w(t,`Combobox.ClearButton`),h=w(t,`Combobox.Disclosure`),[g,_]=r.hasPopover?[i.t.Anchor,{asChild:!0,type:void 0}]:[o.Fragment,{}],v=(0,l.useMergeRefs)(n,r.triggerAreaRef),y=(0,o.useRef)(null),b=c.disabled||r.disabled,x=c.readOnly||r.readOnly,S=!!m&&!b&&!x,C=()=>{if(y.current&&!r.wrap){let{scrollWidth:e,clientWidth:t}=y.current;y.current.scrollLeft=e-t}};ae(y,C);let T=!!f;return(0,o.useEffect)(()=>{r.setAreSelectedItemsInTrigger(T)},[T]),(0,o.useEffect)(()=>{let e=new ResizeObserver(C);return y.current&&e.observe(y.current),()=>{e.disconnect()}},[]),(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(g,{..._,children:(0,s.jsxs)(`div`,{ref:v,className:ie({className:e,state:r.state,disabled:b,readOnly:x,allowWrap:r.wrap}),onClick:()=>{!r.isOpen&&!b&&!x&&(r.openMenu(),r.innerInputRef.current&&r.innerInputRef.current.focus())},children:[d,(0,s.jsxs)(`div`,{ref:y,className:(0,a.cx)(`min-w-none gap-sm py-md inline-flex grow items-start`,r.wrap?`flex-wrap`:`u-no-scrollbar overflow-x-auto p-[2px]`),children:[f,p]}),S&&m,h]})})})};$.displayName=`Combobox.Trigger`;var oe=Object.assign(j,{Group:L,Item:U,Items:K,ItemText:q,ItemIndicator:G,Label:J,Popover:X,Trigger:$,LeadingIcon:Y,Empty:P,Input:z,Disclosure:N,SelectedItems:Q,ClearButton:M,Portal:Z});oe.displayName=`Combobox`,L.displayName=`Combobox.Group`,K.displayName=`Combobox.Items`,U.displayName=`Combobox.Item`,q.displayName=`Combobox.ItemText`,G.displayName=`Combobox.ItemIndicator`,J.displayName=`Combobox.Label`,X.displayName=`Combobox.Popover`,$.displayName=`Combobox.Trigger`,Y.displayName=`Combobox.LeadingIcon`,P.displayName=`Combobox.Empty`,z.displayName=`Combobox.Input`,N.displayName=`Combobox.Disclosure`,Q.displayName=`Combobox.SelectedItems`,M.displayName=`Combobox.ClearButton`,Z.displayName=`Combobox.Portal`,exports.Combobox=oe,exports.ComboboxProvider=k,exports.useComboboxContext=A;
 //# sourceMappingURL=index.js.map

package/dist/combobox/index.mjs

@@ -1,8 +1,8 @@
 import { VisuallyHidden as e } from "../visually-hidden/index.mjs";
-import { t } from "../icon-Bs-39J-H.mjs";
-import { t as n } from "../spinner-TfGcjNm3.mjs";
-import { t as r } from "../icon-button-C1ThqdK1.mjs";
-import { t as i } from "../popover-CGhSHQzb.mjs";
+import { t } from "../icon-VM_Ys9Xn.mjs";
+import { t as n } from "../spinner-DnrZf01S.mjs";
+import { t as r } from "../icon-button-CexCkoV0.mjs";
+import { t as i } from "../popover-COqbFikI.mjs";
 import { cva as a, cx as o } from "class-variance-authority";
 import { Children as s, Fragment as c, createContext as l, isValidElement as u, useContext as d, useEffect as f, useId as p, useLayoutEffect as m, useRef as h, useState as g } from "react";
 import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";

package/dist/dialog/DialogClose.d.ts

@@ -10,4 +10,4 @@ export interface CloseProps extends Omit<ComponentProps<typeof BaseDialog.Close>
 /**
  * A button that closes the dialog. Renders a <button> element.
  */
-export declare const Close: ({ asChild, ...props }: CloseProps) => import("react").JSX.Element;
+export declare const Close: ({ asChild, children, ...props }: CloseProps) => import("react").JSX.Element;

package/dist/dialog/DialogTrigger.d.ts

@@ -11,6 +11,6 @@ export interface TriggerProps extends Omit<ComponentProps<typeof BaseDialog.Trig
  * A button that opens the dialog. Renders a <button> element.
  */
 export declare const Trigger: {
-    ({ asChild, ...props }: TriggerProps): import("react").JSX.Element;
+    ({ asChild, children, ...props }: TriggerProps): import("react").JSX.Element;
     displayName: string;
 };

package/dist/dialog/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../icon-DY4l9nsc.js"),t=require("../DialogContent.styles-FnwXayCC.js"),n=require("../icon-button-DRFf308H.js"),r=require("../useRenderSlot-DHV0CegV.js");let i=require("class-variance-authority"),a=require("react"),o=require("react/jsx-runtime"),s=require("@spark-ui/hooks/use-merge-refs"),c=require("@spark-ui/hooks/use-scroll-overflow"),l=require("@spark-ui/icons/Close"),u=require("@base-ui/react/dialog");var d=(0,a.createContext)(null),f=({children:e,withFade:t=!1})=>{let[n,r]=(0,a.useState)(!1);return(0,o.jsx)(d,{value:{isFullScreen:n,setIsFullScreen:r,withFade:t},children:e})},p=()=>{let e=(0,a.useContext)(d);if(!e)throw Error(`useDialog must be used within a Dialog provider`);return e},m=({withFade:e=!1,onOpenChange:t,...n})=>{let r=t?(e,n)=>{t(e)}:void 0;return(0,o.jsx)(f,{withFade:e,children:(0,o.jsx)(u.Dialog.Root,{"data-spark-component":`dialog`,onOpenChange:r,...n})})};m.createHandle=u.Dialog.createHandle,m.displayName=`Dialog.Root`;var h=({children:e,className:t,inset:n=!1,ref:r,...l})=>{let u=(0,a.useRef)(null),d=(0,s.useMergeRefs)(r,u),{withFade:f}=p(),{overflow:m}=(0,c.useScrollOverflow)(u);return(0,o.jsx)(`div`,{"data-spark-component":`dialog-body`,ref:d,className:(0,i.cx)(`focus-visible:u-outline relative grow overflow-y-auto outline-hidden`,`transition-all duration-300`,{"px-xl py-lg":!n},t),style:{...f&&{maskImage:`linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))`,maskSize:`100% calc(100% + ${m.top?`0px`:`44px`} + ${m.bottom?`0px`:`44px`})`,maskPosition:`0 ${m.top?`0px`:`-44px`}`}},...l,children:e})};h.displayName=`Dialog.Body`;var g=({asChild:e=!1,...t})=>{let n=r.t(e,`button`);return(0,o.jsx)(u.Dialog.Close,{"data-spark-component":`dialog-close`,render:n,...t})},_=({"aria-label":t,className:r,size:a=`md`,intent:s=`neutral`,design:c=`ghost`,children:u=(0,o.jsx)(l.Close,{}),ref:d,...f})=>(0,o.jsx)(g,{"data-spark-component":`dialog-close-button`,"data-part":`close`,ref:d,className:(0,i.cx)([`absolute`,`top-md`,`right-xl`],r),asChild:!0,...f,children:(0,o.jsx)(n.t,{intent:s,size:a,design:c,"aria-label":t,children:(0,o.jsx)(e.t,{children:u})})}),v=Object.assign(_,{id:`CloseButton`});_.displayName=`Dialog.CloseButton`;var y=({className:e,isNarrow:n=!1,size:r=`md`,ref:s,...c})=>{let{setIsFullScreen:l}=p();return(0,a.useEffect)(()=>(r===`fullscreen`&&l(!0),()=>l(!1)),[l,r]),(0,o.jsx)(u.Dialog.Popup,{ref:s,"data-spark-component":`dialog-content`,role:`dialog`,className:a=>(0,i.cx)(t.t({isNarrow:n,size:r,className:typeof e==`function`?e(a):e})),...c})};y.displayName=`Dialog.Content`;var b=e=>(0,o.jsx)(u.Dialog.Description,{"data-spark-component":`dialog-description`,...e});b.displayName=`Dialog.Description`;var x=({children:e,className:t,ref:n,...r})=>(0,o.jsx)(`footer`,{"data-spark-component":`dialog-footer`,ref:n,className:(0,i.cx)(t,[`px-xl`,`py-lg`]),...r,children:e});x.displayName=`Dialog.Footer`;var S=({children:e,className:t,ref:n,...r})=>(0,o.jsx)(`header`,{"data-spark-component":`dialog-header`,ref:n,className:(0,i.cx)(t,[`px-xl`,`py-lg`]),...r,children:e});S.displayName=`Dialog.Header`;var C=({className:e,...t})=>(0,o.jsx)(u.Dialog.Backdrop,{"data-spark-component":`dialog-overlay`,className:t=>(0,i.cx)(`z-overlay size-screen fixed inset-0`,`bg-overlay/dim-1`,`data-starting-style:animate-fade-in`,`data-ending-style:animate-fade-out`,typeof e==`function`?e(t):e),...t});C.displayName=`Dialog.Overlay`;var w=({className:e,...t})=>(0,o.jsx)(u.Dialog.Portal,{"data-spark-component":`dialog-portal`,className:(0,i.cx)(e,`z-modal absolute`),...t});w.displayName=`Dialog.Portal`;var T=({className:e,ref:t,...n})=>(0,o.jsx)(u.Dialog.Title,{"data-spark-component":`dialog-title`,ref:t,className:(0,i.cx)(`text-headline-1 text-on-surface`,`group-has-data-[part=close]:pr-3xl`,e),...n});T.displayName=`Dialog.Title`;var E=({asChild:e=!1,...t})=>{let n=r.t(e,`button`);return(0,o.jsx)(u.Dialog.Trigger,{"data-spark-component":`dialog-trigger`,render:n,...t})};E.displayName=`Dialog.Trigger`;var D=Object.assign(m,{Trigger:E,Portal:w,Overlay:C,Content:y,Header:S,Body:h,Footer:x,Close:g,CloseButton:v,Title:T,Description:b});D.displayName=`Dialog`,exports.Dialog=D;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../icon-CfEsla9z.js"),t=require("../DialogContent.styles-FnwXayCC.js"),n=require("../icon-button-B2TM0Xby.js");let r=require("@spark-ui/internal-utils"),i=require("class-variance-authority"),a=require("react"),o=require("react/jsx-runtime"),s=require("@spark-ui/hooks/use-merge-refs"),c=require("@spark-ui/hooks/use-scroll-overflow"),l=require("@spark-ui/icons/Close"),u=require("@base-ui/react/dialog");var d=(0,a.createContext)(null),f=({children:e,withFade:t=!1})=>{let[n,r]=(0,a.useState)(!1);return(0,o.jsx)(d,{value:{isFullScreen:n,setIsFullScreen:r,withFade:t},children:e})},p=()=>{let e=(0,a.useContext)(d);if(!e)throw Error(`useDialog must be used within a Dialog provider`);return e},m=({withFade:e=!1,onOpenChange:t,...n})=>{let r=t?(e,n)=>{t(e)}:void 0;return(0,o.jsx)(f,{withFade:e,children:(0,o.jsx)(u.Dialog.Root,{"data-spark-component":`dialog`,onOpenChange:r,...n})})};m.createHandle=u.Dialog.createHandle,m.displayName=`Dialog.Root`;var h=({children:e,className:t,inset:n=!1,ref:r,...l})=>{let u=(0,a.useRef)(null),d=(0,s.useMergeRefs)(r,u),{withFade:f}=p(),{overflow:m}=(0,c.useScrollOverflow)(u);return(0,o.jsx)(`div`,{"data-spark-component":`dialog-body`,ref:d,className:(0,i.cx)(`focus-visible:u-outline relative grow overflow-y-auto outline-hidden`,`transition-all duration-300`,{"px-xl py-lg":!n},t),style:{...f&&{maskImage:`linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))`,maskSize:`100% calc(100% + ${m.top?`0px`:`44px`} + ${m.bottom?`0px`:`44px`})`,maskPosition:`0 ${m.top?`0px`:`-44px`}`}},...l,children:e})};h.displayName=`Dialog.Body`;var g=({asChild:e=!1,children:t,...n})=>{let{renderProp:i,innerChildren:a}=(0,r.createRenderSlot)(e,t);return(0,o.jsx)(u.Dialog.Close,{"data-spark-component":`dialog-close`,render:i,...n,children:a})},_=({"aria-label":t,className:r,size:a=`md`,intent:s=`neutral`,design:c=`ghost`,children:u=(0,o.jsx)(l.Close,{}),ref:d,...f})=>(0,o.jsx)(g,{"data-spark-component":`dialog-close-button`,"data-part":`close`,ref:d,className:(0,i.cx)([`absolute`,`top-md`,`right-xl`],r),asChild:!0,...f,children:(0,o.jsx)(n.t,{intent:s,size:a,design:c,"aria-label":t,children:(0,o.jsx)(e.t,{children:u})})}),v=Object.assign(_,{id:`CloseButton`});_.displayName=`Dialog.CloseButton`;var y=({className:e,isNarrow:n=!1,size:r=`md`,ref:s,...c})=>{let{setIsFullScreen:l}=p();return(0,a.useEffect)(()=>(r===`fullscreen`&&l(!0),()=>l(!1)),[l,r]),(0,o.jsx)(u.Dialog.Popup,{ref:s,"data-spark-component":`dialog-content`,role:`dialog`,className:a=>(0,i.cx)(t.t({isNarrow:n,size:r,className:typeof e==`function`?e(a):e})),...c})};y.displayName=`Dialog.Content`;var b=e=>(0,o.jsx)(u.Dialog.Description,{"data-spark-component":`dialog-description`,...e});b.displayName=`Dialog.Description`;var x=({children:e,className:t,ref:n,...r})=>(0,o.jsx)(`footer`,{"data-spark-component":`dialog-footer`,ref:n,className:(0,i.cx)(t,[`px-xl`,`py-lg`]),...r,children:e});x.displayName=`Dialog.Footer`;var S=({children:e,className:t,ref:n,...r})=>(0,o.jsx)(`header`,{"data-spark-component":`dialog-header`,ref:n,className:(0,i.cx)(t,[`px-xl`,`py-lg`]),...r,children:e});S.displayName=`Dialog.Header`;var C=({className:e,...t})=>(0,o.jsx)(u.Dialog.Backdrop,{"data-spark-component":`dialog-overlay`,className:t=>(0,i.cx)(`z-overlay size-screen fixed inset-0`,`bg-overlay/dim-1`,`data-starting-style:animate-fade-in`,`data-ending-style:animate-fade-out`,typeof e==`function`?e(t):e),...t});C.displayName=`Dialog.Overlay`;var w=({className:e,...t})=>(0,o.jsx)(u.Dialog.Portal,{"data-spark-component":`dialog-portal`,className:(0,i.cx)(e,`z-modal absolute`),...t});w.displayName=`Dialog.Portal`;var T=({className:e,ref:t,...n})=>(0,o.jsx)(u.Dialog.Title,{"data-spark-component":`dialog-title`,ref:t,className:(0,i.cx)(`text-headline-1 text-on-surface`,`group-has-data-[part=close]:pr-3xl`,e),...n});T.displayName=`Dialog.Title`;var E=({asChild:e=!1,children:t,...n})=>{let{renderProp:i,innerChildren:a}=(0,r.createRenderSlot)(e,t);return(0,o.jsx)(u.Dialog.Trigger,{"data-spark-component":`dialog-trigger`,render:i,...n,children:a})};E.displayName=`Dialog.Trigger`;var D=Object.assign(m,{Trigger:E,Portal:w,Overlay:C,Content:y,Header:S,Body:h,Footer:x,Close:g,CloseButton:v,Title:T,Description:b});D.displayName=`Dialog`,exports.Dialog=D;
 //# sourceMappingURL=index.js.map

package/dist/dialog/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/dialog/DialogContext.tsx","../../src/dialog/Dialog.tsx","../../src/dialog/DialogBody.tsx","../../src/dialog/DialogClose.tsx","../../src/dialog/DialogCloseButton.tsx","../../src/dialog/DialogContent.tsx","../../src/dialog/DialogDescription.tsx","../../src/dialog/DialogFooter.tsx","../../src/dialog/DialogHeader.tsx","../../src/dialog/DialogOverlay.tsx","../../src/dialog/DialogPortal.tsx","../../src/dialog/DialogTitle.tsx","../../src/dialog/DialogTrigger.tsx","../../src/dialog/index.ts"],"sourcesContent":["import { createContext, type ReactNode, useContext, useState } from 'react'\n\nexport interface DialogContextState {\n  isFullScreen: boolean\n  setIsFullScreen: (value: boolean) => void\n  withFade: boolean\n}\n\nconst DialogContext = createContext<DialogContextState | null>(null)\n\nexport const DialogProvider = ({\n  children: childrenProp,\n  withFade = false,\n}: {\n  children: ReactNode\n  withFade?: boolean\n}) => {\n  const [isFullScreen, setIsFullScreen] = useState(false)\n\n  return (\n    <DialogContext\n      value={{\n        isFullScreen,\n        setIsFullScreen,\n        withFade,\n      }}\n    >\n      {childrenProp}\n    </DialogContext>\n  )\n}\n\nexport const useDialog = () => {\n  const context = useContext(DialogContext)\n\n  if (!context) {\n    throw Error('useDialog must be used within a Dialog provider')\n  }\n\n  return context\n}\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, type ReactElement } from 'react'\n\nimport { DialogProvider } from './DialogContext'\n\nexport interface DialogProps extends Omit<\n  ComponentProps<typeof BaseDialog.Root>,\n  'onOpenChange' | 'render'\n> {\n  /**\n   * Specifies if the dialog is open or not.\n   */\n  open?: boolean\n  /**\n   * Default open state.\n   */\n  defaultOpen?: boolean\n  /**\n   * Handler executed on every dialog open state change.\n   */\n  onOpenChange?: (open: boolean) => void\n  /**\n   * Specifies if the dialog is a modal.\n   */\n  modal?: boolean\n  /**\n   * Specifies if the dialog should have a fade animation on its body (in case it is scrollable).\n   */\n  withFade?: boolean\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n}\n\nexport const Dialog = ({ withFade = false, onOpenChange, ...props }: DialogProps): ReactElement => {\n  const handleOpenChange = onOpenChange\n    ? (open: boolean, _eventDetails: unknown) => {\n        onOpenChange(open)\n      }\n    : undefined\n\n  return (\n    <DialogProvider withFade={withFade}>\n      <BaseDialog.Root data-spark-component=\"dialog\" onOpenChange={handleOpenChange} {...props} />\n    </DialogProvider>\n  )\n}\n\nDialog.createHandle = BaseDialog.createHandle\nDialog.displayName = 'Dialog.Root'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { useScrollOverflow } from '@spark-ui/hooks/use-scroll-overflow'\nimport { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref, useRef } from 'react'\n\nimport { useDialog } from './DialogContext'\n\nexport interface BodyProps {\n  children: ReactNode\n  className?: string\n  tabIndex?: number\n  ref?: Ref<HTMLDivElement>\n  inset?: boolean\n}\n\n/**\n * The scrollable body section of the dialog. Renders a <div> element.\n */\nexport const Body = ({\n  children,\n  className,\n  inset = false,\n  ref: forwardedRef,\n  ...rest\n}: BodyProps): ReactElement => {\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n  const { withFade } = useDialog()\n\n  const { overflow } = useScrollOverflow(scrollAreaRef)\n\n  return (\n    <div\n      data-spark-component=\"dialog-body\"\n      ref={ref}\n      className={cx(\n        'focus-visible:u-outline relative grow overflow-y-auto outline-hidden',\n        'transition-all duration-300',\n        {\n          ['px-xl py-lg']: !inset,\n        },\n        className\n      )}\n      style={{\n        ...(withFade && {\n          maskImage:\n            'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))',\n          maskSize: `100% calc(100% + ${overflow.top ? '0px' : '44px'} + ${overflow.bottom ? '0px' : '44px'})`,\n          maskPosition: `0 ${overflow.top ? '0px' : '-44px'}`,\n        }),\n      }}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nBody.displayName = 'Dialog.Body'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from '../drawer/useRenderSlot'\n\nexport interface CloseProps extends Omit<ComponentProps<typeof BaseDialog.Close>, 'render'> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that closes the dialog. Renders a <button> element.\n */\nexport const Close = ({ asChild = false, ...props }: CloseProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return <BaseDialog.Close data-spark-component=\"dialog-close\" render={renderSlot} {...props} />\n}\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport { IconButton, type IconButtonProps } from '../icon-button'\nimport { Close, CloseProps } from './DialogClose'\n\nexport type CloseButtonProps = CloseProps &\n  Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>\n\n/**\n * A styled close button positioned in the dialog header. Renders a <button> element.\n */\nconst Root = ({\n  'aria-label': ariaLabel,\n  className,\n  size = 'md',\n  intent = 'neutral',\n  design = 'ghost',\n  children = <CloseSVG />,\n  ref,\n  ...rest\n}: CloseButtonProps) => {\n  return (\n    <Close\n      data-spark-component=\"dialog-close-button\"\n      data-part=\"close\"\n      ref={ref}\n      className={cx(['absolute', 'top-md', 'right-xl'], className)}\n      asChild\n      {...rest}\n    >\n      <IconButton intent={intent} size={size} design={design} aria-label={ariaLabel}>\n        <Icon>{children}</Icon>\n      </IconButton>\n    </Close>\n  )\n}\n\nexport const CloseButton = Object.assign(Root, {\n  id: 'CloseButton',\n})\n\nRoot.displayName = 'Dialog.CloseButton'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref, useEffect } from 'react'\n\nimport { dialogContentStyles, type DialogContentStylesProps } from './DialogContent.styles'\nimport { useDialog } from './DialogContext'\n\nexport interface ContentProps\n  extends Omit<ComponentProps<typeof BaseDialog.Popup>, 'render'>, DialogContentStylesProps {\n  /**\n   * When set to true, the content will adjust its width to fit the content rather than taking up the full available width.\n   */\n  isNarrow?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The popup element that contains the dialog content. Renders a <div> element.\n */\nexport const Content = ({\n  className,\n  isNarrow = false,\n  size = 'md',\n  ref,\n  ...rest\n}: ContentProps) => {\n  const { setIsFullScreen } = useDialog()\n\n  useEffect(() => {\n    if (size === 'fullscreen') setIsFullScreen(true)\n\n    return () => setIsFullScreen(false)\n  }, [setIsFullScreen, size])\n\n  return (\n    <BaseDialog.Popup\n      ref={ref}\n      data-spark-component=\"dialog-content\"\n      role=\"dialog\"\n      className={state =>\n        cx(\n          dialogContentStyles({\n            isNarrow,\n            size,\n            className: typeof className === 'function' ? className(state) : className,\n          })\n        )\n      }\n      {...rest}\n    />\n  )\n}\n\nContent.displayName = 'Dialog.Content'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nexport type DescriptionProps = ComponentProps<typeof BaseDialog.Description> & {\n  ref?: Ref<HTMLParagraphElement>\n}\n\n/**\n * A paragraph with additional information about the dialog. Renders a <p> element.\n */\nexport const Description = (props: DescriptionProps) => (\n  <BaseDialog.Description data-spark-component=\"dialog-description\" {...props} />\n)\n\nDescription.displayName = 'Dialog.Description'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface FooterProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The footer section of the dialog, typically containing action buttons. Renders a <footer> element.\n */\nexport const Footer = ({ children, className, ref, ...rest }: FooterProps): ReactElement => (\n  <footer\n    data-spark-component=\"dialog-footer\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </footer>\n)\n\nFooter.displayName = 'Dialog.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface HeaderProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The header section of the dialog. Renders a <header> element.\n */\nexport const Header = ({ children, className, ref, ...rest }: HeaderProps): ReactElement => (\n  <header\n    data-spark-component=\"dialog-header\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </header>\n)\n\nHeader.displayName = 'Dialog.Header'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface OverlayProps extends Omit<ComponentProps<typeof BaseDialog.Backdrop>, 'render'> {\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The backdrop element that dims the rest of the page. Renders a <div> element.\n */\nexport const Overlay = ({ className, ...props }: OverlayProps) => {\n  return (\n    <BaseDialog.Backdrop\n      data-spark-component=\"dialog-overlay\"\n      className={state =>\n        cx(\n          'z-overlay size-screen fixed inset-0',\n          'bg-overlay/dim-1',\n          'data-starting-style:animate-fade-in',\n          'data-ending-style:animate-fade-out',\n          typeof className === 'function' ? className(state) : className\n        )\n      }\n      {...props}\n    />\n  )\n}\n\nOverlay.displayName = 'Dialog.Overlay'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nexport type PortalProps = ComponentProps<typeof BaseDialog.Portal>\n\n/**\n * A portal that renders the dialog in a different part of the DOM. Renders a <div> element.\n */\nexport const Portal = ({ className, ...props }: PortalProps) => {\n  return (\n    <BaseDialog.Portal\n      data-spark-component=\"dialog-portal\"\n      className={cx(className, 'z-modal absolute')}\n      {...props}\n    />\n  )\n}\n\nPortal.displayName = 'Dialog.Portal'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport type TitleProps = ComponentProps<typeof BaseDialog.Title> & {\n  ref?: Ref<HTMLHeadingElement>\n}\n\n/**\n * The title of the dialog, announced to assistive technology. Renders an <h2> element.\n */\nexport const Title = ({ className, ref, ...others }: TitleProps) => {\n  return (\n    <BaseDialog.Title\n      data-spark-component=\"dialog-title\"\n      ref={ref}\n      className={cx(\n        'text-headline-1 text-on-surface',\n        'group-has-data-[part=close]:pr-3xl',\n        className\n      )}\n      {...others}\n    />\n  )\n}\n\nTitle.displayName = 'Dialog.Title'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from '../drawer/useRenderSlot'\n\nexport interface TriggerProps extends Omit<ComponentProps<typeof BaseDialog.Trigger>, 'render'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that opens the dialog. Renders a <button> element.\n */\nexport const Trigger = ({ asChild = false, ...props }: TriggerProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return <BaseDialog.Trigger data-spark-component=\"dialog-trigger\" render={renderSlot} {...props} />\n}\n\nTrigger.displayName = 'Dialog.Trigger'\n","import { Dialog as Root } from './Dialog'\nimport { Body } from './DialogBody'\nimport { Close } from './DialogClose'\nimport { CloseButton } from './DialogCloseButton'\nimport { Content } from './DialogContent'\nimport { Description } from './DialogDescription' // aria-describedby\nimport { Footer } from './DialogFooter'\nimport { Header } from './DialogHeader'\nimport { Overlay } from './DialogOverlay'\nimport { Portal } from './DialogPortal'\nimport { Title } from './DialogTitle' // aria-labelledby\nimport { Trigger } from './DialogTrigger'\n\n/**\n * A modal window that displays content on top of the main page, requiring user interaction before returning to the main flow.\n */\nexport const Dialog: typeof Root & {\n  Trigger: typeof Trigger\n  Portal: typeof Portal\n  Overlay: typeof Overlay\n  Content: typeof Content\n  Header: typeof Header\n  Body: typeof Body\n  Footer: typeof Footer\n  Close: typeof Close\n  CloseButton: typeof CloseButton\n  Title: typeof Title\n  Description: typeof Description\n} = Object.assign(Root, {\n  Trigger,\n  Portal,\n  Overlay,\n  Content,\n  Header,\n  Body,\n  Footer,\n  Close,\n  CloseButton,\n  Title,\n  Description,\n})\n\nDialog.displayName = 'Dialog'\n\nexport { type DialogProps } from './Dialog'\nexport { type ContentProps as DialogContentProps } from './DialogContent'\nexport { type HeaderProps as DialogHeaderProps } from './DialogHeader'\nexport { type BodyProps as DialogBodyProps } from './DialogBody'\nexport { type FooterProps as DialogFooterProps } from './DialogFooter'\nexport { type TriggerProps as DialogTriggerProps } from './DialogTrigger'\nexport { type OverlayProps as DialogOverlayProps } from './DialogOverlay'\nexport { type PortalProps as DialogPortalProps } from './DialogPortal'\nexport { type TitleProps as DialogTitleProps } from './DialogTitle'\nexport { type DescriptionProps as DialogDescriptionProps } from './DialogDescription'\nexport { type CloseProps as DialogCloseProps } from './DialogClose'\nexport { type CloseButtonProps as DialogCloseButtonProps } from './DialogCloseButton'\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/dialog/DialogContext.tsx","../../src/dialog/Dialog.tsx","../../src/dialog/DialogBody.tsx","../../src/dialog/DialogClose.tsx","../../src/dialog/DialogCloseButton.tsx","../../src/dialog/DialogContent.tsx","../../src/dialog/DialogDescription.tsx","../../src/dialog/DialogFooter.tsx","../../src/dialog/DialogHeader.tsx","../../src/dialog/DialogOverlay.tsx","../../src/dialog/DialogPortal.tsx","../../src/dialog/DialogTitle.tsx","../../src/dialog/DialogTrigger.tsx","../../src/dialog/index.ts"],"sourcesContent":["import { createContext, type ReactNode, useContext, useState } from 'react'\n\nexport interface DialogContextState {\n  isFullScreen: boolean\n  setIsFullScreen: (value: boolean) => void\n  withFade: boolean\n}\n\nconst DialogContext = createContext<DialogContextState | null>(null)\n\nexport const DialogProvider = ({\n  children: childrenProp,\n  withFade = false,\n}: {\n  children: ReactNode\n  withFade?: boolean\n}) => {\n  const [isFullScreen, setIsFullScreen] = useState(false)\n\n  return (\n    <DialogContext\n      value={{\n        isFullScreen,\n        setIsFullScreen,\n        withFade,\n      }}\n    >\n      {childrenProp}\n    </DialogContext>\n  )\n}\n\nexport const useDialog = () => {\n  const context = useContext(DialogContext)\n\n  if (!context) {\n    throw Error('useDialog must be used within a Dialog provider')\n  }\n\n  return context\n}\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, type ReactElement } from 'react'\n\nimport { DialogProvider } from './DialogContext'\n\nexport interface DialogProps extends Omit<\n  ComponentProps<typeof BaseDialog.Root>,\n  'onOpenChange' | 'render'\n> {\n  /**\n   * Specifies if the dialog is open or not.\n   */\n  open?: boolean\n  /**\n   * Default open state.\n   */\n  defaultOpen?: boolean\n  /**\n   * Handler executed on every dialog open state change.\n   */\n  onOpenChange?: (open: boolean) => void\n  /**\n   * Specifies if the dialog is a modal.\n   */\n  modal?: boolean\n  /**\n   * Specifies if the dialog should have a fade animation on its body (in case it is scrollable).\n   */\n  withFade?: boolean\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n}\n\nexport const Dialog = ({ withFade = false, onOpenChange, ...props }: DialogProps): ReactElement => {\n  const handleOpenChange = onOpenChange\n    ? (open: boolean, _eventDetails: unknown) => {\n        onOpenChange(open)\n      }\n    : undefined\n\n  return (\n    <DialogProvider withFade={withFade}>\n      <BaseDialog.Root data-spark-component=\"dialog\" onOpenChange={handleOpenChange} {...props} />\n    </DialogProvider>\n  )\n}\n\nDialog.createHandle = BaseDialog.createHandle\nDialog.displayName = 'Dialog.Root'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { useScrollOverflow } from '@spark-ui/hooks/use-scroll-overflow'\nimport { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref, useRef } from 'react'\n\nimport { useDialog } from './DialogContext'\n\nexport interface BodyProps {\n  children: ReactNode\n  className?: string\n  tabIndex?: number\n  ref?: Ref<HTMLDivElement>\n  inset?: boolean\n}\n\n/**\n * The scrollable body section of the dialog. Renders a <div> element.\n */\nexport const Body = ({\n  children,\n  className,\n  inset = false,\n  ref: forwardedRef,\n  ...rest\n}: BodyProps): ReactElement => {\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n  const { withFade } = useDialog()\n\n  const { overflow } = useScrollOverflow(scrollAreaRef)\n\n  return (\n    <div\n      data-spark-component=\"dialog-body\"\n      ref={ref}\n      className={cx(\n        'focus-visible:u-outline relative grow overflow-y-auto outline-hidden',\n        'transition-all duration-300',\n        {\n          ['px-xl py-lg']: !inset,\n        },\n        className\n      )}\n      style={{\n        ...(withFade && {\n          maskImage:\n            'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))',\n          maskSize: `100% calc(100% + ${overflow.top ? '0px' : '44px'} + ${overflow.bottom ? '0px' : '44px'})`,\n          maskPosition: `0 ${overflow.top ? '0px' : '-44px'}`,\n        }),\n      }}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nBody.displayName = 'Dialog.Body'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { createRenderSlot } from '@spark-ui/internal-utils'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface CloseProps extends Omit<ComponentProps<typeof BaseDialog.Close>, 'render'> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that closes the dialog. Renders a <button> element.\n */\nexport const Close = ({ asChild = false, children, ...props }: CloseProps) => {\n  const { renderProp, innerChildren } = createRenderSlot(asChild, children)\n\n  return (\n    <BaseDialog.Close data-spark-component=\"dialog-close\" render={renderProp} {...props}>\n      {innerChildren}\n    </BaseDialog.Close>\n  )\n}\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport { IconButton, type IconButtonProps } from '../icon-button'\nimport { Close, CloseProps } from './DialogClose'\n\nexport type CloseButtonProps = CloseProps &\n  Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>\n\n/**\n * A styled close button positioned in the dialog header. Renders a <button> element.\n */\nconst Root = ({\n  'aria-label': ariaLabel,\n  className,\n  size = 'md',\n  intent = 'neutral',\n  design = 'ghost',\n  children = <CloseSVG />,\n  ref,\n  ...rest\n}: CloseButtonProps) => {\n  return (\n    <Close\n      data-spark-component=\"dialog-close-button\"\n      data-part=\"close\"\n      ref={ref}\n      className={cx(['absolute', 'top-md', 'right-xl'], className)}\n      asChild\n      {...rest}\n    >\n      <IconButton intent={intent} size={size} design={design} aria-label={ariaLabel}>\n        <Icon>{children}</Icon>\n      </IconButton>\n    </Close>\n  )\n}\n\nexport const CloseButton = Object.assign(Root, {\n  id: 'CloseButton',\n})\n\nRoot.displayName = 'Dialog.CloseButton'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref, useEffect } from 'react'\n\nimport { dialogContentStyles, type DialogContentStylesProps } from './DialogContent.styles'\nimport { useDialog } from './DialogContext'\n\nexport interface ContentProps\n  extends Omit<ComponentProps<typeof BaseDialog.Popup>, 'render'>, DialogContentStylesProps {\n  /**\n   * When set to true, the content will adjust its width to fit the content rather than taking up the full available width.\n   */\n  isNarrow?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The popup element that contains the dialog content. Renders a <div> element.\n */\nexport const Content = ({\n  className,\n  isNarrow = false,\n  size = 'md',\n  ref,\n  ...rest\n}: ContentProps) => {\n  const { setIsFullScreen } = useDialog()\n\n  useEffect(() => {\n    if (size === 'fullscreen') setIsFullScreen(true)\n\n    return () => setIsFullScreen(false)\n  }, [setIsFullScreen, size])\n\n  return (\n    <BaseDialog.Popup\n      ref={ref}\n      data-spark-component=\"dialog-content\"\n      role=\"dialog\"\n      className={state =>\n        cx(\n          dialogContentStyles({\n            isNarrow,\n            size,\n            className: typeof className === 'function' ? className(state) : className,\n          })\n        )\n      }\n      {...rest}\n    />\n  )\n}\n\nContent.displayName = 'Dialog.Content'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nexport type DescriptionProps = ComponentProps<typeof BaseDialog.Description> & {\n  ref?: Ref<HTMLParagraphElement>\n}\n\n/**\n * A paragraph with additional information about the dialog. Renders a <p> element.\n */\nexport const Description = (props: DescriptionProps) => (\n  <BaseDialog.Description data-spark-component=\"dialog-description\" {...props} />\n)\n\nDescription.displayName = 'Dialog.Description'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface FooterProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The footer section of the dialog, typically containing action buttons. Renders a <footer> element.\n */\nexport const Footer = ({ children, className, ref, ...rest }: FooterProps): ReactElement => (\n  <footer\n    data-spark-component=\"dialog-footer\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </footer>\n)\n\nFooter.displayName = 'Dialog.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface HeaderProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The header section of the dialog. Renders a <header> element.\n */\nexport const Header = ({ children, className, ref, ...rest }: HeaderProps): ReactElement => (\n  <header\n    data-spark-component=\"dialog-header\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </header>\n)\n\nHeader.displayName = 'Dialog.Header'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface OverlayProps extends Omit<ComponentProps<typeof BaseDialog.Backdrop>, 'render'> {\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The backdrop element that dims the rest of the page. Renders a <div> element.\n */\nexport const Overlay = ({ className, ...props }: OverlayProps) => {\n  return (\n    <BaseDialog.Backdrop\n      data-spark-component=\"dialog-overlay\"\n      className={state =>\n        cx(\n          'z-overlay size-screen fixed inset-0',\n          'bg-overlay/dim-1',\n          'data-starting-style:animate-fade-in',\n          'data-ending-style:animate-fade-out',\n          typeof className === 'function' ? className(state) : className\n        )\n      }\n      {...props}\n    />\n  )\n}\n\nOverlay.displayName = 'Dialog.Overlay'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nexport type PortalProps = ComponentProps<typeof BaseDialog.Portal>\n\n/**\n * A portal that renders the dialog in a different part of the DOM. Renders a <div> element.\n */\nexport const Portal = ({ className, ...props }: PortalProps) => {\n  return (\n    <BaseDialog.Portal\n      data-spark-component=\"dialog-portal\"\n      className={cx(className, 'z-modal absolute')}\n      {...props}\n    />\n  )\n}\n\nPortal.displayName = 'Dialog.Portal'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport type TitleProps = ComponentProps<typeof BaseDialog.Title> & {\n  ref?: Ref<HTMLHeadingElement>\n}\n\n/**\n * The title of the dialog, announced to assistive technology. Renders an <h2> element.\n */\nexport const Title = ({ className, ref, ...others }: TitleProps) => {\n  return (\n    <BaseDialog.Title\n      data-spark-component=\"dialog-title\"\n      ref={ref}\n      className={cx(\n        'text-headline-1 text-on-surface',\n        'group-has-data-[part=close]:pr-3xl',\n        className\n      )}\n      {...others}\n    />\n  )\n}\n\nTitle.displayName = 'Dialog.Title'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { createRenderSlot } from '@spark-ui/internal-utils'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface TriggerProps extends Omit<ComponentProps<typeof BaseDialog.Trigger>, 'render'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that opens the dialog. Renders a <button> element.\n */\nexport const Trigger = ({ asChild = false, children, ...props }: TriggerProps) => {\n  const { renderProp, innerChildren } = createRenderSlot(asChild, children)\n\n  return (\n    <BaseDialog.Trigger data-spark-component=\"dialog-trigger\" render={renderProp} {...props}>\n      {innerChildren}\n    </BaseDialog.Trigger>\n  )\n}\n\nTrigger.displayName = 'Dialog.Trigger'\n","import { Dialog as Root } from './Dialog'\nimport { Body } from './DialogBody'\nimport { Close } from './DialogClose'\nimport { CloseButton } from './DialogCloseButton'\nimport { Content } from './DialogContent'\nimport { Description } from './DialogDescription' // aria-describedby\nimport { Footer } from './DialogFooter'\nimport { Header } from './DialogHeader'\nimport { Overlay } from './DialogOverlay'\nimport { Portal } from './DialogPortal'\nimport { Title } from './DialogTitle' // aria-labelledby\nimport { Trigger } from './DialogTrigger'\n\n/**\n * A modal window that displays content on top of the main page, requiring user interaction before returning to the main flow.\n */\nexport const Dialog: typeof Root & {\n  Trigger: typeof Trigger\n  Portal: typeof Portal\n  Overlay: typeof Overlay\n  Content: typeof Content\n  Header: typeof Header\n  Body: typeof Body\n  Footer: typeof Footer\n  Close: typeof Close\n  CloseButton: typeof CloseButton\n  Title: typeof Title\n  Description: typeof Description\n} = Object.assign(Root, {\n  Trigger,\n  Portal,\n  Overlay,\n  Content,\n  Header,\n  Body,\n  Footer,\n  Close,\n  CloseButton,\n  Title,\n  Description,\n})\n\nDialog.displayName = 'Dialog'\n\nexport { type DialogProps } from './Dialog'\nexport { type ContentProps as DialogContentProps } from './DialogContent'\nexport { type HeaderProps as DialogHeaderProps } from './DialogHeader'\nexport { type BodyProps as DialogBodyProps } from './DialogBody'\nexport { type FooterProps as DialogFooterProps } from './DialogFooter'\nexport { type TriggerProps as DialogTriggerProps } from './DialogTrigger'\nexport { type OverlayProps as DialogOverlayProps } from './DialogOverlay'\nexport { type PortalProps as DialogPortalProps } from './DialogPortal'\nexport { type TitleProps as DialogTitleProps } from './DialogTitle'\nexport { type DescriptionProps as DialogDescriptionProps } from './DialogDescription'\nexport { type CloseProps as DialogCloseProps } from './DialogClose'\nexport { type CloseButtonProps as DialogCloseButtonProps } from './DialogCloseButton'\n"],"mappings":"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"}

package/dist/dialog/index.mjs

@@ -1,7 +1,7 @@
-import { t as e } from "../icon-Bs-39J-H.mjs";
+import { t as e } from "../icon-VM_Ys9Xn.mjs";
 import { t } from "../DialogContent.styles-ClKRO43s.mjs";
-import { t as n } from "../icon-button-C1ThqdK1.mjs";
-import { t as r } from "../useRenderSlot-5CPC9Lkj.mjs";
+import { t as n } from "../icon-button-CexCkoV0.mjs";
+import { createRenderSlot as r } from "@spark-ui/internal-utils";
 import { cx as i } from "class-variance-authority";
 import { createContext as a, useContext as o, useEffect as s, useRef as c, useState as l } from "react";
 import { jsx as u } from "react/jsx-runtime";
@@ -58,12 +58,13 @@ var y = ({ children: e, className: t, inset: n = !1, ref: r, ...a }) => {
 y.displayName = "Dialog.Body";
 //#endregion
 //#region src/dialog/DialogClose.tsx
-var b = ({ asChild: e = !1, ...t }) => {
-	let n = r(e, "button");
+var b = ({ asChild: e = !1, children: t, ...n }) => {
+	let { renderProp: i, innerChildren: a } = r(e, t);
 	return /* @__PURE__ */ u(m.Close, {
 		"data-spark-component": "dialog-close",
-		render: n,
-		...t
+		render: i,
+		...n,
+		children: a
 	});
 }, x = ({ "aria-label": t, className: r, size: a = "md", intent: o = "neutral", design: s = "ghost", children: c = /* @__PURE__ */ u(p, {}), ref: l, ...d }) => /* @__PURE__ */ u(b, {
 	"data-spark-component": "dialog-close-button",
@@ -156,12 +157,13 @@ var k = ({ className: e, ref: t, ...n }) => /* @__PURE__ */ u(m.Title, {
 k.displayName = "Dialog.Title";
 //#endregion
 //#region src/dialog/DialogTrigger.tsx
-var A = ({ asChild: e = !1, ...t }) => {
-	let n = r(e, "button");
+var A = ({ asChild: e = !1, children: t, ...n }) => {
+	let { renderProp: i, innerChildren: a } = r(e, t);
 	return /* @__PURE__ */ u(m.Trigger, {
 		"data-spark-component": "dialog-trigger",
-		render: n,
-		...t
+		render: i,
+		...n,
+		children: a
 	});
 };
 A.displayName = "Dialog.Trigger";

package/dist/dialog/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/dialog/DialogContext.tsx","../../src/dialog/Dialog.tsx","../../src/dialog/DialogBody.tsx","../../src/dialog/DialogClose.tsx","../../src/dialog/DialogCloseButton.tsx","../../src/dialog/DialogContent.tsx","../../src/dialog/DialogDescription.tsx","../../src/dialog/DialogFooter.tsx","../../src/dialog/DialogHeader.tsx","../../src/dialog/DialogOverlay.tsx","../../src/dialog/DialogPortal.tsx","../../src/dialog/DialogTitle.tsx","../../src/dialog/DialogTrigger.tsx","../../src/dialog/index.ts"],"sourcesContent":["import { createContext, type ReactNode, useContext, useState } from 'react'\n\nexport interface DialogContextState {\n  isFullScreen: boolean\n  setIsFullScreen: (value: boolean) => void\n  withFade: boolean\n}\n\nconst DialogContext = createContext<DialogContextState | null>(null)\n\nexport const DialogProvider = ({\n  children: childrenProp,\n  withFade = false,\n}: {\n  children: ReactNode\n  withFade?: boolean\n}) => {\n  const [isFullScreen, setIsFullScreen] = useState(false)\n\n  return (\n    <DialogContext\n      value={{\n        isFullScreen,\n        setIsFullScreen,\n        withFade,\n      }}\n    >\n      {childrenProp}\n    </DialogContext>\n  )\n}\n\nexport const useDialog = () => {\n  const context = useContext(DialogContext)\n\n  if (!context) {\n    throw Error('useDialog must be used within a Dialog provider')\n  }\n\n  return context\n}\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, type ReactElement } from 'react'\n\nimport { DialogProvider } from './DialogContext'\n\nexport interface DialogProps extends Omit<\n  ComponentProps<typeof BaseDialog.Root>,\n  'onOpenChange' | 'render'\n> {\n  /**\n   * Specifies if the dialog is open or not.\n   */\n  open?: boolean\n  /**\n   * Default open state.\n   */\n  defaultOpen?: boolean\n  /**\n   * Handler executed on every dialog open state change.\n   */\n  onOpenChange?: (open: boolean) => void\n  /**\n   * Specifies if the dialog is a modal.\n   */\n  modal?: boolean\n  /**\n   * Specifies if the dialog should have a fade animation on its body (in case it is scrollable).\n   */\n  withFade?: boolean\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n}\n\nexport const Dialog = ({ withFade = false, onOpenChange, ...props }: DialogProps): ReactElement => {\n  const handleOpenChange = onOpenChange\n    ? (open: boolean, _eventDetails: unknown) => {\n        onOpenChange(open)\n      }\n    : undefined\n\n  return (\n    <DialogProvider withFade={withFade}>\n      <BaseDialog.Root data-spark-component=\"dialog\" onOpenChange={handleOpenChange} {...props} />\n    </DialogProvider>\n  )\n}\n\nDialog.createHandle = BaseDialog.createHandle\nDialog.displayName = 'Dialog.Root'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { useScrollOverflow } from '@spark-ui/hooks/use-scroll-overflow'\nimport { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref, useRef } from 'react'\n\nimport { useDialog } from './DialogContext'\n\nexport interface BodyProps {\n  children: ReactNode\n  className?: string\n  tabIndex?: number\n  ref?: Ref<HTMLDivElement>\n  inset?: boolean\n}\n\n/**\n * The scrollable body section of the dialog. Renders a <div> element.\n */\nexport const Body = ({\n  children,\n  className,\n  inset = false,\n  ref: forwardedRef,\n  ...rest\n}: BodyProps): ReactElement => {\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n  const { withFade } = useDialog()\n\n  const { overflow } = useScrollOverflow(scrollAreaRef)\n\n  return (\n    <div\n      data-spark-component=\"dialog-body\"\n      ref={ref}\n      className={cx(\n        'focus-visible:u-outline relative grow overflow-y-auto outline-hidden',\n        'transition-all duration-300',\n        {\n          ['px-xl py-lg']: !inset,\n        },\n        className\n      )}\n      style={{\n        ...(withFade && {\n          maskImage:\n            'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))',\n          maskSize: `100% calc(100% + ${overflow.top ? '0px' : '44px'} + ${overflow.bottom ? '0px' : '44px'})`,\n          maskPosition: `0 ${overflow.top ? '0px' : '-44px'}`,\n        }),\n      }}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nBody.displayName = 'Dialog.Body'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from '../drawer/useRenderSlot'\n\nexport interface CloseProps extends Omit<ComponentProps<typeof BaseDialog.Close>, 'render'> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that closes the dialog. Renders a <button> element.\n */\nexport const Close = ({ asChild = false, ...props }: CloseProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return <BaseDialog.Close data-spark-component=\"dialog-close\" render={renderSlot} {...props} />\n}\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport { IconButton, type IconButtonProps } from '../icon-button'\nimport { Close, CloseProps } from './DialogClose'\n\nexport type CloseButtonProps = CloseProps &\n  Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>\n\n/**\n * A styled close button positioned in the dialog header. Renders a <button> element.\n */\nconst Root = ({\n  'aria-label': ariaLabel,\n  className,\n  size = 'md',\n  intent = 'neutral',\n  design = 'ghost',\n  children = <CloseSVG />,\n  ref,\n  ...rest\n}: CloseButtonProps) => {\n  return (\n    <Close\n      data-spark-component=\"dialog-close-button\"\n      data-part=\"close\"\n      ref={ref}\n      className={cx(['absolute', 'top-md', 'right-xl'], className)}\n      asChild\n      {...rest}\n    >\n      <IconButton intent={intent} size={size} design={design} aria-label={ariaLabel}>\n        <Icon>{children}</Icon>\n      </IconButton>\n    </Close>\n  )\n}\n\nexport const CloseButton = Object.assign(Root, {\n  id: 'CloseButton',\n})\n\nRoot.displayName = 'Dialog.CloseButton'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref, useEffect } from 'react'\n\nimport { dialogContentStyles, type DialogContentStylesProps } from './DialogContent.styles'\nimport { useDialog } from './DialogContext'\n\nexport interface ContentProps\n  extends Omit<ComponentProps<typeof BaseDialog.Popup>, 'render'>, DialogContentStylesProps {\n  /**\n   * When set to true, the content will adjust its width to fit the content rather than taking up the full available width.\n   */\n  isNarrow?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The popup element that contains the dialog content. Renders a <div> element.\n */\nexport const Content = ({\n  className,\n  isNarrow = false,\n  size = 'md',\n  ref,\n  ...rest\n}: ContentProps) => {\n  const { setIsFullScreen } = useDialog()\n\n  useEffect(() => {\n    if (size === 'fullscreen') setIsFullScreen(true)\n\n    return () => setIsFullScreen(false)\n  }, [setIsFullScreen, size])\n\n  return (\n    <BaseDialog.Popup\n      ref={ref}\n      data-spark-component=\"dialog-content\"\n      role=\"dialog\"\n      className={state =>\n        cx(\n          dialogContentStyles({\n            isNarrow,\n            size,\n            className: typeof className === 'function' ? className(state) : className,\n          })\n        )\n      }\n      {...rest}\n    />\n  )\n}\n\nContent.displayName = 'Dialog.Content'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nexport type DescriptionProps = ComponentProps<typeof BaseDialog.Description> & {\n  ref?: Ref<HTMLParagraphElement>\n}\n\n/**\n * A paragraph with additional information about the dialog. Renders a <p> element.\n */\nexport const Description = (props: DescriptionProps) => (\n  <BaseDialog.Description data-spark-component=\"dialog-description\" {...props} />\n)\n\nDescription.displayName = 'Dialog.Description'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface FooterProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The footer section of the dialog, typically containing action buttons. Renders a <footer> element.\n */\nexport const Footer = ({ children, className, ref, ...rest }: FooterProps): ReactElement => (\n  <footer\n    data-spark-component=\"dialog-footer\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </footer>\n)\n\nFooter.displayName = 'Dialog.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface HeaderProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The header section of the dialog. Renders a <header> element.\n */\nexport const Header = ({ children, className, ref, ...rest }: HeaderProps): ReactElement => (\n  <header\n    data-spark-component=\"dialog-header\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </header>\n)\n\nHeader.displayName = 'Dialog.Header'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface OverlayProps extends Omit<ComponentProps<typeof BaseDialog.Backdrop>, 'render'> {\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The backdrop element that dims the rest of the page. Renders a <div> element.\n */\nexport const Overlay = ({ className, ...props }: OverlayProps) => {\n  return (\n    <BaseDialog.Backdrop\n      data-spark-component=\"dialog-overlay\"\n      className={state =>\n        cx(\n          'z-overlay size-screen fixed inset-0',\n          'bg-overlay/dim-1',\n          'data-starting-style:animate-fade-in',\n          'data-ending-style:animate-fade-out',\n          typeof className === 'function' ? className(state) : className\n        )\n      }\n      {...props}\n    />\n  )\n}\n\nOverlay.displayName = 'Dialog.Overlay'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nexport type PortalProps = ComponentProps<typeof BaseDialog.Portal>\n\n/**\n * A portal that renders the dialog in a different part of the DOM. Renders a <div> element.\n */\nexport const Portal = ({ className, ...props }: PortalProps) => {\n  return (\n    <BaseDialog.Portal\n      data-spark-component=\"dialog-portal\"\n      className={cx(className, 'z-modal absolute')}\n      {...props}\n    />\n  )\n}\n\nPortal.displayName = 'Dialog.Portal'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport type TitleProps = ComponentProps<typeof BaseDialog.Title> & {\n  ref?: Ref<HTMLHeadingElement>\n}\n\n/**\n * The title of the dialog, announced to assistive technology. Renders an <h2> element.\n */\nexport const Title = ({ className, ref, ...others }: TitleProps) => {\n  return (\n    <BaseDialog.Title\n      data-spark-component=\"dialog-title\"\n      ref={ref}\n      className={cx(\n        'text-headline-1 text-on-surface',\n        'group-has-data-[part=close]:pr-3xl',\n        className\n      )}\n      {...others}\n    />\n  )\n}\n\nTitle.displayName = 'Dialog.Title'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from '../drawer/useRenderSlot'\n\nexport interface TriggerProps extends Omit<ComponentProps<typeof BaseDialog.Trigger>, 'render'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that opens the dialog. Renders a <button> element.\n */\nexport const Trigger = ({ asChild = false, ...props }: TriggerProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return <BaseDialog.Trigger data-spark-component=\"dialog-trigger\" render={renderSlot} {...props} />\n}\n\nTrigger.displayName = 'Dialog.Trigger'\n","import { Dialog as Root } from './Dialog'\nimport { Body } from './DialogBody'\nimport { Close } from './DialogClose'\nimport { CloseButton } from './DialogCloseButton'\nimport { Content } from './DialogContent'\nimport { Description } from './DialogDescription' // aria-describedby\nimport { Footer } from './DialogFooter'\nimport { Header } from './DialogHeader'\nimport { Overlay } from './DialogOverlay'\nimport { Portal } from './DialogPortal'\nimport { Title } from './DialogTitle' // aria-labelledby\nimport { Trigger } from './DialogTrigger'\n\n/**\n * A modal window that displays content on top of the main page, requiring user interaction before returning to the main flow.\n */\nexport const Dialog: typeof Root & {\n  Trigger: typeof Trigger\n  Portal: typeof Portal\n  Overlay: typeof Overlay\n  Content: typeof Content\n  Header: typeof Header\n  Body: typeof Body\n  Footer: typeof Footer\n  Close: typeof Close\n  CloseButton: typeof CloseButton\n  Title: typeof Title\n  Description: typeof Description\n} = Object.assign(Root, {\n  Trigger,\n  Portal,\n  Overlay,\n  Content,\n  Header,\n  Body,\n  Footer,\n  Close,\n  CloseButton,\n  Title,\n  Description,\n})\n\nDialog.displayName = 'Dialog'\n\nexport { type DialogProps } from './Dialog'\nexport { type ContentProps as DialogContentProps } from './DialogContent'\nexport { type HeaderProps as DialogHeaderProps } from './DialogHeader'\nexport { type BodyProps as DialogBodyProps } from './DialogBody'\nexport { type FooterProps as DialogFooterProps } from './DialogFooter'\nexport { type TriggerProps as DialogTriggerProps } from './DialogTrigger'\nexport { type OverlayProps as DialogOverlayProps } from './DialogOverlay'\nexport { type PortalProps as DialogPortalProps } from './DialogPortal'\nexport { type TitleProps as DialogTitleProps } from './DialogTitle'\nexport { type DescriptionProps as DialogDescriptionProps } from './DialogDescription'\nexport { type CloseProps as DialogCloseProps } from './DialogClose'\nexport { type CloseButtonProps as DialogCloseButtonProps } from './DialogCloseButton'\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/dialog/DialogContext.tsx","../../src/dialog/Dialog.tsx","../../src/dialog/DialogBody.tsx","../../src/dialog/DialogClose.tsx","../../src/dialog/DialogCloseButton.tsx","../../src/dialog/DialogContent.tsx","../../src/dialog/DialogDescription.tsx","../../src/dialog/DialogFooter.tsx","../../src/dialog/DialogHeader.tsx","../../src/dialog/DialogOverlay.tsx","../../src/dialog/DialogPortal.tsx","../../src/dialog/DialogTitle.tsx","../../src/dialog/DialogTrigger.tsx","../../src/dialog/index.ts"],"sourcesContent":["import { createContext, type ReactNode, useContext, useState } from 'react'\n\nexport interface DialogContextState {\n  isFullScreen: boolean\n  setIsFullScreen: (value: boolean) => void\n  withFade: boolean\n}\n\nconst DialogContext = createContext<DialogContextState | null>(null)\n\nexport const DialogProvider = ({\n  children: childrenProp,\n  withFade = false,\n}: {\n  children: ReactNode\n  withFade?: boolean\n}) => {\n  const [isFullScreen, setIsFullScreen] = useState(false)\n\n  return (\n    <DialogContext\n      value={{\n        isFullScreen,\n        setIsFullScreen,\n        withFade,\n      }}\n    >\n      {childrenProp}\n    </DialogContext>\n  )\n}\n\nexport const useDialog = () => {\n  const context = useContext(DialogContext)\n\n  if (!context) {\n    throw Error('useDialog must be used within a Dialog provider')\n  }\n\n  return context\n}\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, type ReactElement } from 'react'\n\nimport { DialogProvider } from './DialogContext'\n\nexport interface DialogProps extends Omit<\n  ComponentProps<typeof BaseDialog.Root>,\n  'onOpenChange' | 'render'\n> {\n  /**\n   * Specifies if the dialog is open or not.\n   */\n  open?: boolean\n  /**\n   * Default open state.\n   */\n  defaultOpen?: boolean\n  /**\n   * Handler executed on every dialog open state change.\n   */\n  onOpenChange?: (open: boolean) => void\n  /**\n   * Specifies if the dialog is a modal.\n   */\n  modal?: boolean\n  /**\n   * Specifies if the dialog should have a fade animation on its body (in case it is scrollable).\n   */\n  withFade?: boolean\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n}\n\nexport const Dialog = ({ withFade = false, onOpenChange, ...props }: DialogProps): ReactElement => {\n  const handleOpenChange = onOpenChange\n    ? (open: boolean, _eventDetails: unknown) => {\n        onOpenChange(open)\n      }\n    : undefined\n\n  return (\n    <DialogProvider withFade={withFade}>\n      <BaseDialog.Root data-spark-component=\"dialog\" onOpenChange={handleOpenChange} {...props} />\n    </DialogProvider>\n  )\n}\n\nDialog.createHandle = BaseDialog.createHandle\nDialog.displayName = 'Dialog.Root'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { useScrollOverflow } from '@spark-ui/hooks/use-scroll-overflow'\nimport { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref, useRef } from 'react'\n\nimport { useDialog } from './DialogContext'\n\nexport interface BodyProps {\n  children: ReactNode\n  className?: string\n  tabIndex?: number\n  ref?: Ref<HTMLDivElement>\n  inset?: boolean\n}\n\n/**\n * The scrollable body section of the dialog. Renders a <div> element.\n */\nexport const Body = ({\n  children,\n  className,\n  inset = false,\n  ref: forwardedRef,\n  ...rest\n}: BodyProps): ReactElement => {\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n  const { withFade } = useDialog()\n\n  const { overflow } = useScrollOverflow(scrollAreaRef)\n\n  return (\n    <div\n      data-spark-component=\"dialog-body\"\n      ref={ref}\n      className={cx(\n        'focus-visible:u-outline relative grow overflow-y-auto outline-hidden',\n        'transition-all duration-300',\n        {\n          ['px-xl py-lg']: !inset,\n        },\n        className\n      )}\n      style={{\n        ...(withFade && {\n          maskImage:\n            'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))',\n          maskSize: `100% calc(100% + ${overflow.top ? '0px' : '44px'} + ${overflow.bottom ? '0px' : '44px'})`,\n          maskPosition: `0 ${overflow.top ? '0px' : '-44px'}`,\n        }),\n      }}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nBody.displayName = 'Dialog.Body'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { createRenderSlot } from '@spark-ui/internal-utils'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface CloseProps extends Omit<ComponentProps<typeof BaseDialog.Close>, 'render'> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that closes the dialog. Renders a <button> element.\n */\nexport const Close = ({ asChild = false, children, ...props }: CloseProps) => {\n  const { renderProp, innerChildren } = createRenderSlot(asChild, children)\n\n  return (\n    <BaseDialog.Close data-spark-component=\"dialog-close\" render={renderProp} {...props}>\n      {innerChildren}\n    </BaseDialog.Close>\n  )\n}\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport { IconButton, type IconButtonProps } from '../icon-button'\nimport { Close, CloseProps } from './DialogClose'\n\nexport type CloseButtonProps = CloseProps &\n  Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>\n\n/**\n * A styled close button positioned in the dialog header. Renders a <button> element.\n */\nconst Root = ({\n  'aria-label': ariaLabel,\n  className,\n  size = 'md',\n  intent = 'neutral',\n  design = 'ghost',\n  children = <CloseSVG />,\n  ref,\n  ...rest\n}: CloseButtonProps) => {\n  return (\n    <Close\n      data-spark-component=\"dialog-close-button\"\n      data-part=\"close\"\n      ref={ref}\n      className={cx(['absolute', 'top-md', 'right-xl'], className)}\n      asChild\n      {...rest}\n    >\n      <IconButton intent={intent} size={size} design={design} aria-label={ariaLabel}>\n        <Icon>{children}</Icon>\n      </IconButton>\n    </Close>\n  )\n}\n\nexport const CloseButton = Object.assign(Root, {\n  id: 'CloseButton',\n})\n\nRoot.displayName = 'Dialog.CloseButton'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref, useEffect } from 'react'\n\nimport { dialogContentStyles, type DialogContentStylesProps } from './DialogContent.styles'\nimport { useDialog } from './DialogContext'\n\nexport interface ContentProps\n  extends Omit<ComponentProps<typeof BaseDialog.Popup>, 'render'>, DialogContentStylesProps {\n  /**\n   * When set to true, the content will adjust its width to fit the content rather than taking up the full available width.\n   */\n  isNarrow?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The popup element that contains the dialog content. Renders a <div> element.\n */\nexport const Content = ({\n  className,\n  isNarrow = false,\n  size = 'md',\n  ref,\n  ...rest\n}: ContentProps) => {\n  const { setIsFullScreen } = useDialog()\n\n  useEffect(() => {\n    if (size === 'fullscreen') setIsFullScreen(true)\n\n    return () => setIsFullScreen(false)\n  }, [setIsFullScreen, size])\n\n  return (\n    <BaseDialog.Popup\n      ref={ref}\n      data-spark-component=\"dialog-content\"\n      role=\"dialog\"\n      className={state =>\n        cx(\n          dialogContentStyles({\n            isNarrow,\n            size,\n            className: typeof className === 'function' ? className(state) : className,\n          })\n        )\n      }\n      {...rest}\n    />\n  )\n}\n\nContent.displayName = 'Dialog.Content'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nexport type DescriptionProps = ComponentProps<typeof BaseDialog.Description> & {\n  ref?: Ref<HTMLParagraphElement>\n}\n\n/**\n * A paragraph with additional information about the dialog. Renders a <p> element.\n */\nexport const Description = (props: DescriptionProps) => (\n  <BaseDialog.Description data-spark-component=\"dialog-description\" {...props} />\n)\n\nDescription.displayName = 'Dialog.Description'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface FooterProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The footer section of the dialog, typically containing action buttons. Renders a <footer> element.\n */\nexport const Footer = ({ children, className, ref, ...rest }: FooterProps): ReactElement => (\n  <footer\n    data-spark-component=\"dialog-footer\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </footer>\n)\n\nFooter.displayName = 'Dialog.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface HeaderProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The header section of the dialog. Renders a <header> element.\n */\nexport const Header = ({ children, className, ref, ...rest }: HeaderProps): ReactElement => (\n  <header\n    data-spark-component=\"dialog-header\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </header>\n)\n\nHeader.displayName = 'Dialog.Header'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface OverlayProps extends Omit<ComponentProps<typeof BaseDialog.Backdrop>, 'render'> {\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The backdrop element that dims the rest of the page. Renders a <div> element.\n */\nexport const Overlay = ({ className, ...props }: OverlayProps) => {\n  return (\n    <BaseDialog.Backdrop\n      data-spark-component=\"dialog-overlay\"\n      className={state =>\n        cx(\n          'z-overlay size-screen fixed inset-0',\n          'bg-overlay/dim-1',\n          'data-starting-style:animate-fade-in',\n          'data-ending-style:animate-fade-out',\n          typeof className === 'function' ? className(state) : className\n        )\n      }\n      {...props}\n    />\n  )\n}\n\nOverlay.displayName = 'Dialog.Overlay'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nexport type PortalProps = ComponentProps<typeof BaseDialog.Portal>\n\n/**\n * A portal that renders the dialog in a different part of the DOM. Renders a <div> element.\n */\nexport const Portal = ({ className, ...props }: PortalProps) => {\n  return (\n    <BaseDialog.Portal\n      data-spark-component=\"dialog-portal\"\n      className={cx(className, 'z-modal absolute')}\n      {...props}\n    />\n  )\n}\n\nPortal.displayName = 'Dialog.Portal'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport type TitleProps = ComponentProps<typeof BaseDialog.Title> & {\n  ref?: Ref<HTMLHeadingElement>\n}\n\n/**\n * The title of the dialog, announced to assistive technology. Renders an <h2> element.\n */\nexport const Title = ({ className, ref, ...others }: TitleProps) => {\n  return (\n    <BaseDialog.Title\n      data-spark-component=\"dialog-title\"\n      ref={ref}\n      className={cx(\n        'text-headline-1 text-on-surface',\n        'group-has-data-[part=close]:pr-3xl',\n        className\n      )}\n      {...others}\n    />\n  )\n}\n\nTitle.displayName = 'Dialog.Title'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { createRenderSlot } from '@spark-ui/internal-utils'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface TriggerProps extends Omit<ComponentProps<typeof BaseDialog.Trigger>, 'render'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that opens the dialog. Renders a <button> element.\n */\nexport const Trigger = ({ asChild = false, children, ...props }: TriggerProps) => {\n  const { renderProp, innerChildren } = createRenderSlot(asChild, children)\n\n  return (\n    <BaseDialog.Trigger data-spark-component=\"dialog-trigger\" render={renderProp} {...props}>\n      {innerChildren}\n    </BaseDialog.Trigger>\n  )\n}\n\nTrigger.displayName = 'Dialog.Trigger'\n","import { Dialog as Root } from './Dialog'\nimport { Body } from './DialogBody'\nimport { Close } from './DialogClose'\nimport { CloseButton } from './DialogCloseButton'\nimport { Content } from './DialogContent'\nimport { Description } from './DialogDescription' // aria-describedby\nimport { Footer } from './DialogFooter'\nimport { Header } from './DialogHeader'\nimport { Overlay } from './DialogOverlay'\nimport { Portal } from './DialogPortal'\nimport { Title } from './DialogTitle' // aria-labelledby\nimport { Trigger } from './DialogTrigger'\n\n/**\n * A modal window that displays content on top of the main page, requiring user interaction before returning to the main flow.\n */\nexport const Dialog: typeof Root & {\n  Trigger: typeof Trigger\n  Portal: typeof Portal\n  Overlay: typeof Overlay\n  Content: typeof Content\n  Header: typeof Header\n  Body: typeof Body\n  Footer: typeof Footer\n  Close: typeof Close\n  CloseButton: typeof CloseButton\n  Title: typeof Title\n  Description: typeof Description\n} = Object.assign(Root, {\n  Trigger,\n  Portal,\n  Overlay,\n  Content,\n  Header,\n  Body,\n  Footer,\n  Close,\n  CloseButton,\n  Title,\n  Description,\n})\n\nDialog.displayName = 'Dialog'\n\nexport { type DialogProps } from './Dialog'\nexport { type ContentProps as DialogContentProps } from './DialogContent'\nexport { type HeaderProps as DialogHeaderProps } from './DialogHeader'\nexport { type BodyProps as DialogBodyProps } from './DialogBody'\nexport { type FooterProps as DialogFooterProps } from './DialogFooter'\nexport { type TriggerProps as DialogTriggerProps } from './DialogTrigger'\nexport { type OverlayProps as DialogOverlayProps } from './DialogOverlay'\nexport { type PortalProps as DialogPortalProps } from './DialogPortal'\nexport { type TitleProps as DialogTitleProps } from './DialogTitle'\nexport { type DescriptionProps as DialogDescriptionProps } from './DialogDescription'\nexport { type CloseProps as DialogCloseProps } from './DialogClose'\nexport { type CloseButtonProps as DialogCloseButtonProps } from './DialogCloseButton'\n"],"mappings":"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"}

package/dist/divider/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../slot/index.js");let t=require("class-variance-authority"),n=require("react/jsx-runtime"),r=require("@spark-ui/internal-utils"),i=require("@base-ui/react/separator");var a=[{intent:`current`,isEmpty:!0,class:(0,r.tw)([`border-current`])},{intent:`current`,isEmpty:!1,class:(0,r.tw)([`before:border-current after:border-current`])},{intent:`outline`,isEmpty:!0,class:(0,r.tw)([`border-outline`])},{intent:`outline`,isEmpty:!1,class:(0,r.tw)([`before:border-outline after:border-outline`])}],o=(0,t.cva)([`overflow-hidden group`],{variants:{isEmpty:{true:[`border-solid`],false:[`inline-flex items-center`,`after:border-solid before:border-solid`]},orientation:{vertical:[`w-fit inline-flex`],horizontal:[`w-full`]},writingMode:{"horizontal-tb":[],"vertical-lr":[]},alignment:{start:[],end:[],center:[]},intent:{current:[],outline:[]}},defaultVariants:{orientation:`horizontal`,writingMode:`horizontal-tb`,alignment:`center`,intent:`outline`},compoundVariants:[{isEmpty:!0,orientation:`horizontal`,class:(0,r.tw)([`my-lg border-t-sm`])},{isEmpty:!0,orientation:`vertical`,class:(0,r.tw)([`mx-lg min-h-sz-24 border-l-sm`])},{isEmpty:!1,orientation:`horizontal`,writingMode:`horizontal-tb`,class:(0,r.tw)([`flex-row my-sm grow-0`,`before:border-t-sm`,`after:border-t-sm`,`*:px-lg`])},{isEmpty:!1,orientation:`vertical`,writingMode:`horizontal-tb`,class:(0,r.tw)([`flex-col mx-sm`,`before:border-l-sm`,`after:border-l-sm`,`*:py-lg`])},{isEmpty:!1,orientation:`vertical`,writingMode:`vertical-lr`,class:(0,r.tw)([`flex-col mx-sm`,`before:border-l-sm`,`after:border-l-sm`,`*:px-lg`])},{isEmpty:!1,orientation:`horizontal`,alignment:`end`,class:(0,r.tw)([`after:w-sz-40 before:grow after:grow-0`])},{isEmpty:!1,orientation:`horizontal`,alignment:`start`,class:(0,r.tw)([`before:w-sz-40 before:grow-0 after:grow`])},{isEmpty:!1,orientation:`horizontal`,alignment:`center`,class:(0,r.tw)([`justify-center before:grow after:grow`])},{isEmpty:!1,orientation:`vertical`,alignment:`end`,class:(0,r.tw)([`after:h-sz-40 before:grow after:grow-0 before:min-h-sz-40`])},{isEmpty:!1,orientation:`vertical`,alignment:`start`,class:(0,r.tw)([`before:h-sz-40 before:grow-0 after:grow after:min-h-sz-40`])},{isEmpty:!1,orientation:`vertical`,alignment:`center`,class:(0,r.tw)([`justify-center before:grow after:grow before:min-h-sz-40 after:min-h-sz-40`])},...a]}),s=({asChild:r,className:a,isDecorative:s=!1,children:c,orientation:l=`horizontal`,writingMode:u=`horizontal-tb`,alignment:d=`center`,intent:f=`outline`,ref:p,role:m,...h})=>{let g=r?!c?.props?.children:!c,_;s?_={role:`none`}:m!==void 0&&(_={role:m});let v=r?t=>(0,n.jsx)(e.Slot,{...t}):void 0;return(0,n.jsx)(i.Separator,{"data-spark-component":`divider`,className:(0,t.cx)(o({isEmpty:g,orientation:l,alignment:d,intent:f,writingMode:u}),a),orientation:l,ref:p,...h,render:v,..._,"data-writing-mode":u,children:c})};s.displayName=`Divider`;var c=({children:e,ref:r,className:i,...a})=>e?(0,n.jsx)(`span`,{"data-spark-component":`divider-content`,ref:r,...a,className:(0,t.cx)(`group-data-[writing-mode=vertical-lr]:[writing-mode:vertical-lr]`,i),children:e}):null;c.displayName=`Divider.Content`;var l=Object.assign(s,{Content:c});l.displayName=`Divider`,l.Content.displayName=`Divider.Content`,exports.Divider=l;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../slot/index.js");let t=require("@spark-ui/internal-utils"),n=require("class-variance-authority"),r=require("react/jsx-runtime"),i=require("@base-ui/react/separator");var a=[{intent:`current`,isEmpty:!0,class:(0,t.tw)([`border-current`])},{intent:`current`,isEmpty:!1,class:(0,t.tw)([`before:border-current after:border-current`])},{intent:`outline`,isEmpty:!0,class:(0,t.tw)([`border-outline`])},{intent:`outline`,isEmpty:!1,class:(0,t.tw)([`before:border-outline after:border-outline`])}],o=(0,n.cva)([`overflow-hidden group`],{variants:{isEmpty:{true:[`border-solid`],false:[`inline-flex items-center`,`after:border-solid before:border-solid`]},orientation:{vertical:[`w-fit inline-flex`],horizontal:[`w-full`]},writingMode:{"horizontal-tb":[],"vertical-lr":[]},alignment:{start:[],end:[],center:[]},intent:{current:[],outline:[]}},defaultVariants:{orientation:`horizontal`,writingMode:`horizontal-tb`,alignment:`center`,intent:`outline`},compoundVariants:[{isEmpty:!0,orientation:`horizontal`,class:(0,t.tw)([`my-lg border-t-sm`])},{isEmpty:!0,orientation:`vertical`,class:(0,t.tw)([`mx-lg min-h-sz-24 border-l-sm`])},{isEmpty:!1,orientation:`horizontal`,writingMode:`horizontal-tb`,class:(0,t.tw)([`flex-row my-sm grow-0`,`before:border-t-sm`,`after:border-t-sm`,`*:px-lg`])},{isEmpty:!1,orientation:`vertical`,writingMode:`horizontal-tb`,class:(0,t.tw)([`flex-col mx-sm`,`before:border-l-sm`,`after:border-l-sm`,`*:py-lg`])},{isEmpty:!1,orientation:`vertical`,writingMode:`vertical-lr`,class:(0,t.tw)([`flex-col mx-sm`,`before:border-l-sm`,`after:border-l-sm`,`*:px-lg`])},{isEmpty:!1,orientation:`horizontal`,alignment:`end`,class:(0,t.tw)([`after:w-sz-40 before:grow after:grow-0`])},{isEmpty:!1,orientation:`horizontal`,alignment:`start`,class:(0,t.tw)([`before:w-sz-40 before:grow-0 after:grow`])},{isEmpty:!1,orientation:`horizontal`,alignment:`center`,class:(0,t.tw)([`justify-center before:grow after:grow`])},{isEmpty:!1,orientation:`vertical`,alignment:`end`,class:(0,t.tw)([`after:h-sz-40 before:grow after:grow-0 before:min-h-sz-40`])},{isEmpty:!1,orientation:`vertical`,alignment:`start`,class:(0,t.tw)([`before:h-sz-40 before:grow-0 after:grow after:min-h-sz-40`])},{isEmpty:!1,orientation:`vertical`,alignment:`center`,class:(0,t.tw)([`justify-center before:grow after:grow before:min-h-sz-40 after:min-h-sz-40`])},...a]}),s=({asChild:t,className:a,isDecorative:s=!1,children:c,orientation:l=`horizontal`,writingMode:u=`horizontal-tb`,alignment:d=`center`,intent:f=`outline`,ref:p,role:m,...h})=>{let g=t?!c?.props?.children:!c,_;s?_={role:`none`}:m!==void 0&&(_={role:m});let v=t?t=>(0,r.jsx)(e.Slot,{...t}):void 0;return(0,r.jsx)(i.Separator,{"data-spark-component":`divider`,className:(0,n.cx)(o({isEmpty:g,orientation:l,alignment:d,intent:f,writingMode:u}),a),orientation:l,ref:p,...h,render:v,..._,"data-writing-mode":u,children:c})};s.displayName=`Divider`;var c=({children:e,ref:t,className:i,...a})=>e?(0,r.jsx)(`span`,{"data-spark-component":`divider-content`,ref:t,...a,className:(0,n.cx)(`group-data-[writing-mode=vertical-lr]:[writing-mode:vertical-lr]`,i),children:e}):null;c.displayName=`Divider.Content`;var l=Object.assign(s,{Content:c});l.displayName=`Divider`,l.Content.displayName=`Divider.Content`,exports.Divider=l;
 //# sourceMappingURL=index.js.map

package/dist/divider/index.mjs

@@ -1,31 +1,31 @@
 import { Slot as e } from "../slot/index.mjs";
-import { cva as t, cx as n } from "class-variance-authority";
-import { jsx as r } from "react/jsx-runtime";
-import { tw as i } from "@spark-ui/internal-utils";
+import { tw as t } from "@spark-ui/internal-utils";
+import { cva as n, cx as r } from "class-variance-authority";
+import { jsx as i } from "react/jsx-runtime";
 import { Separator as a } from "@base-ui/react/separator";
 //#region src/divider/variants/intents.tsx
 var o = [
 	{
 		intent: "current",
 		isEmpty: !0,
-		class: i(["border-current"])
+		class: t(["border-current"])
 	},
 	{
 		intent: "current",
 		isEmpty: !1,
-		class: i(["before:border-current after:border-current"])
+		class: t(["before:border-current after:border-current"])
 	},
 	{
 		intent: "outline",
 		isEmpty: !0,
-		class: i(["border-outline"])
+		class: t(["border-outline"])
 	},
 	{
 		intent: "outline",
 		isEmpty: !1,
-		class: i(["before:border-outline after:border-outline"])
+		class: t(["before:border-outline after:border-outline"])
 	}
-], s = t(["overflow-hidden group"], {
+], s = n(["overflow-hidden group"], {
 	variants: {
 		isEmpty: {
 			true: ["border-solid"],
@@ -59,18 +59,18 @@ var o = [
 		{
 			isEmpty: !0,
 			orientation: "horizontal",
-			class: i(["my-lg border-t-sm"])
+			class: t(["my-lg border-t-sm"])
 		},
 		{
 			isEmpty: !0,
 			orientation: "vertical",
-			class: i(["mx-lg min-h-sz-24 border-l-sm"])
+			class: t(["mx-lg min-h-sz-24 border-l-sm"])
 		},
 		{
 			isEmpty: !1,
 			orientation: "horizontal",
 			writingMode: "horizontal-tb",
-			class: i([
+			class: t([
 				"flex-row my-sm grow-0",
 				"before:border-t-sm",
 				"after:border-t-sm",
@@ -81,7 +81,7 @@ var o = [
 			isEmpty: !1,
 			orientation: "vertical",
 			writingMode: "horizontal-tb",
-			class: i([
+			class: t([
 				"flex-col mx-sm",
 				"before:border-l-sm",
 				"after:border-l-sm",
@@ -92,7 +92,7 @@ var o = [
 			isEmpty: !1,
 			orientation: "vertical",
 			writingMode: "vertical-lr",
-			class: i([
+			class: t([
 				"flex-col mx-sm",
 				"before:border-l-sm",
 				"after:border-l-sm",
@@ -103,53 +103,53 @@ var o = [
 			isEmpty: !1,
 			orientation: "horizontal",
 			alignment: "end",
-			class: i(["after:w-sz-40 before:grow after:grow-0"])
+			class: t(["after:w-sz-40 before:grow after:grow-0"])
 		},
 		{
 			isEmpty: !1,
 			orientation: "horizontal",
 			alignment: "start",
-			class: i(["before:w-sz-40 before:grow-0 after:grow"])
+			class: t(["before:w-sz-40 before:grow-0 after:grow"])
 		},
 		{
 			isEmpty: !1,
 			orientation: "horizontal",
 			alignment: "center",
-			class: i(["justify-center before:grow after:grow"])
+			class: t(["justify-center before:grow after:grow"])
 		},
 		{
 			isEmpty: !1,
 			orientation: "vertical",
 			alignment: "end",
-			class: i(["after:h-sz-40 before:grow after:grow-0 before:min-h-sz-40"])
+			class: t(["after:h-sz-40 before:grow after:grow-0 before:min-h-sz-40"])
 		},
 		{
 			isEmpty: !1,
 			orientation: "vertical",
 			alignment: "start",
-			class: i(["before:h-sz-40 before:grow-0 after:grow after:min-h-sz-40"])
+			class: t(["before:h-sz-40 before:grow-0 after:grow after:min-h-sz-40"])
 		},
 		{
 			isEmpty: !1,
 			orientation: "vertical",
 			alignment: "center",
-			class: i(["justify-center before:grow after:grow before:min-h-sz-40 after:min-h-sz-40"])
+			class: t(["justify-center before:grow after:grow before:min-h-sz-40 after:min-h-sz-40"])
 		},
 		...o
 	]
-}), c = ({ asChild: t, className: i, isDecorative: o = !1, children: c, orientation: l = "horizontal", writingMode: u = "horizontal-tb", alignment: d = "center", intent: f = "outline", ref: p, role: m, ...h }) => {
+}), c = ({ asChild: t, className: n, isDecorative: o = !1, children: c, orientation: l = "horizontal", writingMode: u = "horizontal-tb", alignment: d = "center", intent: f = "outline", ref: p, role: m, ...h }) => {
 	let g = t ? !c?.props?.children : !c, _;
 	o ? _ = { role: "none" } : m !== void 0 && (_ = { role: m });
-	let v = t ? (t) => /* @__PURE__ */ r(e, { ...t }) : void 0;
-	return /* @__PURE__ */ r(a, {
+	let v = t ? (t) => /* @__PURE__ */ i(e, { ...t }) : void 0;
+	return /* @__PURE__ */ i(a, {
 		"data-spark-component": "divider",
-		className: n(s({
+		className: r(s({
 			isEmpty: g,
 			orientation: l,
 			alignment: d,
 			intent: f,
 			writingMode: u
-		}), i),
+		}), n),
 		orientation: l,
 		ref: p,
 		...h,
@@ -162,11 +162,11 @@ var o = [
 c.displayName = "Divider";
 //#endregion
 //#region src/divider/DividerContent.tsx
-var l = ({ children: e, ref: t, className: i, ...a }) => e ? /* @__PURE__ */ r("span", {
+var l = ({ children: e, ref: t, className: n, ...a }) => e ? /* @__PURE__ */ i("span", {
 	"data-spark-component": "divider-content",
 	ref: t,
 	...a,
-	className: n("group-data-[writing-mode=vertical-lr]:[writing-mode:vertical-lr]", i),
+	className: r("group-data-[writing-mode=vertical-lr]:[writing-mode:vertical-lr]", n),
 	children: e
 }) : null;
 l.displayName = "Divider.Content";

package/dist/drawer/DrawerClose.d.ts

@@ -11,6 +11,6 @@ export interface DrawerCloseProps extends Omit<ComponentProps<typeof BaseDialog.
  * A button that closes the drawer. Renders a <button> element.
  */
 export declare const DrawerClose: {
-    ({ asChild, ...props }: DrawerCloseProps): import("react").JSX.Element;
+    ({ asChild, children, ...props }: DrawerCloseProps): import("react").JSX.Element;
     displayName: string;
 };

package/dist/drawer/DrawerTrigger.d.ts

@@ -11,6 +11,6 @@ export interface DrawerTriggerProps extends Omit<ComponentProps<typeof BaseDialo
  * A button that opens the drawer. Renders a <button> element.
  */
 export declare const DrawerTrigger: {
-    ({ asChild, ...props }: DrawerTriggerProps): import("react").JSX.Element;
+    ({ asChild, children, ...props }: DrawerTriggerProps): import("react").JSX.Element;
     displayName: string;
 };