@preply/ds-docs 10.0.0 → 11.1.0

package/dist/assets/AlertDialog.stories-BKmaZZoo.js

@@ -1,243 +0,0 @@
-import{aa as Z,r as s,ax as we,a8 as ke,j as t,ab as I,ad as P,ae as Be,af as C,ag as D,ai as x,aj as Fe,ak as Me,ay as ze,I as We,g as $e}from"./iframe-DjYTJz7A.js";import{H as Le}from"./Heading-BPJGe0Bg.js";import{B as v}from"./Button-DS2bg8PO.js";import{w as Ge}from"./componentNames-hc9KR2nX.js";import{R as Ue,h as Ve,u as qe,F as Ye}from"./index-DOwxXd3L.js";import"./preload-helper-Dp1pzeXC.js";import"./text-accent-C5-m5mrW.js";import"./text-centered-D70wah8Y.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-DZ6hllTG.js";import"./ButtonBase-sV1YoG7h.js";import"./Spinner-BG27lVzS.js";import"./useMergeRefs-CL5DIjXV.js";import"./useHostname-By9vNKnQ.js";import"./index-CC6DAVyL.js";var N="Dialog",[Q,ee]=Z(N),[He,p]=Q(N),te=e=>{const{__scopeDialog:n,children:o,open:r,defaultOpen:a,onOpenChange:i,modal:l=!0}=e,c=s.useRef(null),g=s.useRef(null),[u,y]=ke({prop:r,defaultProp:a??!1,onChange:i,caller:N});return t.jsx(He,{scope:n,triggerRef:c,contentRef:g,contentId:I(),titleId:I(),descriptionId:I(),open:u,onOpenChange:y,onOpenToggle:s.useCallback(()=>y(Pe=>!Pe),[y]),modal:l,children:o})};te.displayName=N;var ne="DialogTrigger",oe=s.forwardRef((e,n)=>{const{__scopeDialog:o,...r}=e,a=p(ne,o),i=x(n,a.triggerRef);return t.jsx(C.button,{type:"button","aria-haspopup":"dialog","aria-expanded":a.open,"aria-controls":a.contentId,"data-state":B(a.open),...r,ref:i,onClick:D(e.onClick,a.onOpenToggle)})});oe.displayName=ne;var w="DialogPortal",[Xe,re]=Q(w,{forceMount:void 0}),ae=e=>{const{__scopeDialog:n,forceMount:o,children:r,container:a}=e,i=p(w,n);return t.jsx(Xe,{scope:n,forceMount:o,children:s.Children.map(r,l=>t.jsx(P,{present:o||i.open,children:t.jsx(Be,{asChild:!0,container:a,children:l})}))})};ae.displayName=w;var O="DialogOverlay",ie=s.forwardRef((e,n)=>{const o=re(O,e.__scopeDialog),{forceMount:r=o.forceMount,...a}=e,i=p(O,e.__scopeDialog);return i.modal?t.jsx(P,{present:r||i.open,children:t.jsx(Ke,{...a,ref:n})}):null});ie.displayName=O;var Je=Fe("DialogOverlay.RemoveScroll"),Ke=s.forwardRef((e,n)=>{const{__scopeDialog:o,...r}=e,a=p(O,o);return t.jsx(Ue,{as:Je,allowPinchZoom:!0,shards:[a.contentRef],children:t.jsx(C.div,{"data-state":B(a.open),...r,ref:n,style:{pointerEvents:"auto",...r.style}})})}),m="DialogContent",se=s.forwardRef((e,n)=>{const o=re(m,e.__scopeDialog),{forceMount:r=o.forceMount,...a}=e,i=p(m,e.__scopeDialog);return t.jsx(P,{present:r||i.open,children:i.modal?t.jsx(Ze,{...a,ref:n}):t.jsx(Qe,{...a,ref:n})})});se.displayName=m;var Ze=s.forwardRef((e,n)=>{const o=p(m,e.__scopeDialog),r=s.useRef(null),a=x(n,o.contentRef,r);return s.useEffect(()=>{const i=r.current;if(i)return Ve(i)},[]),t.jsx(le,{...e,ref:a,trapFocus:o.open,disableOutsidePointerEvents:!0,onCloseAutoFocus:D(e.onCloseAutoFocus,i=>{var l;i.preventDefault(),(l=o.triggerRef.current)==null||l.focus()}),onPointerDownOutside:D(e.onPointerDownOutside,i=>{const l=i.detail.originalEvent,c=l.button===0&&l.ctrlKey===!0;(l.button===2||c)&&i.preventDefault()}),onFocusOutside:D(e.onFocusOutside,i=>i.preventDefault())})}),Qe=s.forwardRef((e,n)=>{const o=p(m,e.__scopeDialog),r=s.useRef(!1),a=s.useRef(!1);return t.jsx(le,{...e,ref:n,trapFocus:!1,disableOutsidePointerEvents:!1,onCloseAutoFocus:i=>{var l,c;(l=e.onCloseAutoFocus)==null||l.call(e,i),i.defaultPrevented||(r.current||(c=o.triggerRef.current)==null||c.focus(),i.preventDefault()),r.current=!1,a.current=!1},onInteractOutside:i=>{var g,u;(g=e.onInteractOutside)==null||g.call(e,i),i.defaultPrevented||(r.current=!0,i.detail.originalEvent.type==="pointerdown"&&(a.current=!0));const l=i.target;((u=o.triggerRef.current)==null?void 0:u.contains(l))&&i.preventDefault(),i.detail.originalEvent.type==="focusin"&&a.current&&i.preventDefault()}})}),le=s.forwardRef((e,n)=>{const{__scopeDialog:o,trapFocus:r,onOpenAutoFocus:a,onCloseAutoFocus:i,...l}=e,c=p(m,o),g=s.useRef(null),u=x(n,g);return qe(),t.jsxs(t.Fragment,{children:[t.jsx(Ye,{asChild:!0,loop:!0,trapped:r,onMountAutoFocus:a,onUnmountAutoFocus:i,children:t.jsx(Me,{role:"dialog",id:c.contentId,"aria-describedby":c.descriptionId,"aria-labelledby":c.titleId,"data-state":B(c.open),...l,ref:u,onDismiss:()=>c.onOpenChange(!1)})}),t.jsxs(t.Fragment,{children:[t.jsx(tt,{titleId:c.titleId}),t.jsx(ot,{contentRef:g,descriptionId:c.descriptionId})]})]})}),k="DialogTitle",ce=s.forwardRef((e,n)=>{const{__scopeDialog:o,...r}=e,a=p(k,o);return t.jsx(C.h2,{id:a.titleId,...r,ref:n})});ce.displayName=k;var de="DialogDescription",ue=s.forwardRef((e,n)=>{const{__scopeDialog:o,...r}=e,a=p(de,o);return t.jsx(C.p,{id:a.descriptionId,...r,ref:n})});ue.displayName=de;var ge="DialogClose",pe=s.forwardRef((e,n)=>{const{__scopeDialog:o,...r}=e,a=p(ge,o);return t.jsx(C.button,{type:"button",...r,ref:n,onClick:D(e.onClick,()=>a.onOpenChange(!1))})});pe.displayName=ge;function B(e){return e?"open":"closed"}var fe="DialogTitleWarning",[et,me]=we(fe,{contentName:m,titleName:k,docsSlug:"dialog"}),tt=({titleId:e})=>{const n=me(fe),o=`\`${n.contentName}\` requires a \`${n.titleName}\` for the component to be accessible for screen reader users.
-
-If you want to hide the \`${n.titleName}\`, you can wrap it with our VisuallyHidden component.
-
-For more information, see https://radix-ui.com/primitives/docs/components/${n.docsSlug}`;return s.useEffect(()=>{e&&(document.getElementById(e)||console.error(o))},[o,e]),null},nt="DialogDescriptionWarning",ot=({contentRef:e,descriptionId:n})=>{const r=`Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${me(nt).contentName}}.`;return s.useEffect(()=>{var i;const a=(i=e.current)==null?void 0:i.getAttribute("aria-describedby");n&&a&&(document.getElementById(n)||console.warn(r))},[r,e,n]),null},rt=te,at=oe,it=ae,st=ie,lt=se,ct=ce,dt=ue,he=pe,ve="AlertDialog",[ut]=Z(ve,[ee]),f=ee(),ye=e=>{const{__scopeAlertDialog:n,...o}=e,r=f(n);return t.jsx(rt,{...r,...o,modal:!0})};ye.displayName=ve;var gt="AlertDialogTrigger",De=s.forwardRef((e,n)=>{const{__scopeAlertDialog:o,...r}=e,a=f(o);return t.jsx(at,{...a,...r,ref:n})});De.displayName=gt;var pt="AlertDialogPortal",Ae=e=>{const{__scopeAlertDialog:n,...o}=e,r=f(n);return t.jsx(it,{...r,...o})};Ae.displayName=pt;var ft="AlertDialogOverlay",Ce=s.forwardRef((e,n)=>{const{__scopeAlertDialog:o,...r}=e,a=f(o);return t.jsx(st,{...a,...r,ref:n})});Ce.displayName=ft;var A="AlertDialogContent",[mt,ht]=ut(A),vt=ze("AlertDialogContent"),xe=s.forwardRef((e,n)=>{const{__scopeAlertDialog:o,children:r,...a}=e,i=f(o),l=s.useRef(null),c=x(n,l),g=s.useRef(null);return t.jsx(et,{contentName:A,titleName:_e,docsSlug:"alert-dialog",children:t.jsx(mt,{scope:o,cancelRef:g,children:t.jsxs(lt,{role:"alertdialog",...i,...a,ref:c,onOpenAutoFocus:D(a.onOpenAutoFocus,u=>{var y;u.preventDefault(),(y=g.current)==null||y.focus({preventScroll:!0})}),onPointerDownOutside:u=>u.preventDefault(),onInteractOutside:u=>u.preventDefault(),children:[t.jsx(vt,{children:r}),t.jsx(Dt,{contentRef:l})]})})})});xe.displayName=A;var _e="AlertDialogTitle",be=s.forwardRef((e,n)=>{const{__scopeAlertDialog:o,...r}=e,a=f(o);return t.jsx(ct,{...a,...r,ref:n})});be.displayName=_e;var Te="AlertDialogDescription",Re=s.forwardRef((e,n)=>{const{__scopeAlertDialog:o,...r}=e,a=f(o);return t.jsx(dt,{...a,...r,ref:n})});Re.displayName=Te;var yt="AlertDialogAction",Se=s.forwardRef((e,n)=>{const{__scopeAlertDialog:o,...r}=e,a=f(o);return t.jsx(he,{...a,...r,ref:n})});Se.displayName=yt;var je="AlertDialogCancel",Ee=s.forwardRef((e,n)=>{const{__scopeAlertDialog:o,...r}=e,{cancelRef:a}=ht(je,o),i=f(o),l=x(n,a);return t.jsx(he,{...i,...r,ref:l})});Ee.displayName=je;var Dt=({contentRef:e})=>{const n=`\`${A}\` requires a description for the component to be accessible for screen reader users.
-
-You can add a description to the \`${A}\` by passing a \`${Te}\` component as a child, which also benefits sighted users by adding visible context to the dialog.
-
-Alternatively, you can use your own component as a description by assigning it an \`id\` and passing the same value to the \`aria-describedby\` prop in \`${A}\`. If the description is confusing or duplicative for sighted users, you can use the \`@radix-ui/react-visually-hidden\` primitive as a wrapper around your description component.
-
-For more information, see https://radix-ui.com/primitives/docs/components/alert-dialog`;return s.useEffect(()=>{var r;document.getElementById((r=e.current)==null?void 0:r.getAttribute("aria-describedby"))||console.warn(n)},[n,e]),null},At=ye,Ct=De,xt=Ae,_t=Ce,bt=xe,Tt=Se,Rt=Ee,St=be,jt=Re;const Et="overlay__vG-Gu",Ot="content__Nk-Ib",Nt="description__1dRpy",It="actions__FsX-e",_={overlay:Et,content:Ot,description:Nt,actions:It},Oe=({children:e})=>t.jsx(Ct,{asChild:!0,children:s.Children.only(e)}),Pt=s.forwardRef(function(n,o){return t.jsx(Tt,{asChild:!0,children:t.jsx(v,{...n,ref:o})})}),wt=s.forwardRef(function(n,o){return t.jsx(Rt,{asChild:!0,children:t.jsx(v,{...n,ref:o})})}),kt=({open:e,title:n,description:o,dataset:r,children:a})=>{const i=We(),l=$e(r,{preplyDsComponent:Ge.AlertDialog});let c;const g=[];return s.Children.forEach(a,u=>{s.isValidElement(u)&&(u.type===Oe?c=u:g.push(u))}),t.jsxs(At,{open:e,children:[c,t.jsxs(xt,{container:i,children:[t.jsx(_t,{className:_.overlay}),t.jsxs(bt,{...l,className:_.content,children:[t.jsx(St,{asChild:!0,children:t.jsx(Le,{tag:"h3",variant:"medium",children:n})}),t.jsx(jt,{asChild:!0,children:t.jsx("p",{className:_.description,children:o})}),t.jsx("div",{className:_.actions,children:g})]})]})]})},d=Object.assign(kt,{Trigger:Oe,Action:Pt,Cancel:wt});try{d.displayName="AlertDialog",d.__docgenInfo={description:"A modal alertdialog that interrupts the user with important content and expects a response.\n\nUnlike a `Dialog`, it cannot be dismissed by clicking outside or pressing escape.",displayName:"AlertDialog",props:{title:{defaultValue:null,description:"The alert's title, describing what the user needs to confirm",name:"title",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},description:{defaultValue:null,description:"Details about the action and its consequences",name:"description",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},children:{defaultValue:null,description:"The AlertDialog actions.\n@see  `AlertDialog.Actions` for a common actions convenience wrapper.",name:"children",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},open:{defaultValue:null,description:`Controls the visibility of the alert.
-
-Alternatively, you can use the \`AlertDialog.Trigger\` subcomponent for
-an uncontrolled instance.`,name:"open",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}const{expect:E,userEvent:Ne,waitFor:Ie}=__STORYBOOK_MODULE_TEST__,{action:h}=__STORYBOOK_MODULE_ACTIONS__,Kt={title:"Components/AlertDialog",component:d,parameters:{preventIframeFromScrollingParent:!0,docs:{description:{component:"A modal alert dialog for confirming destructive or important actions."},story:{inline:!1,height:300}}},play:async({canvas:e,step:n})=>{await n("Open alert",async()=>(await Ne.click(e.getByTestId("alert-trigger")),Ie(()=>{const o=e.getByTestId("alert-dialog");E(o).toBeVisible()})))}},b={parameters:{docs:{description:{story:"Uncontrolled alert using the `Trigger`, `Cancel`, and `Action` subcomponents."}}},args:{title:"Confirm",description:"This action cannot be undone.",dataset:{testid:"alert-dialog"}},render:function(n){return t.jsxs(d,{...n,children:[t.jsx(d.Trigger,{children:t.jsx(v,{dataset:{testid:"alert-trigger"},children:"Action"})}),t.jsx(d.Cancel,{variant:"tertiary",onClick:h("cancel"),children:"Cancel"}),t.jsx(d.Action,{onClick:h("confirm"),children:"Confirm"})]})}},T={parameters:{docs:{description:{story:"Uncontrolled alert using the `Trigger`, and two `Action` subcomponents.\n\nThe two actions are styled differently to suggest a preferred action to the one the user has requested.\n\nFor example, in this case, the user is prompted to reschedule instead of canceling."}}},args:{title:"Cancel Lesson",description:"Your balance will not be refunded. Would you like to reschedule instead?",dataset:{testid:"alert-dialog"}},render:function(n){return t.jsxs(d,{...n,children:[t.jsx(d.Trigger,{children:t.jsx(v,{variant:"critical",dataset:{testid:"alert-trigger"},children:"Cancel Lesson"})}),t.jsx(d.Action,{variant:"ghost",onClick:h("cancel"),children:"Cancel lesson"}),t.jsx(d.Action,{variant:"secondary",onClick:h("reschedule"),children:"Reschedule"})]})}},R={parameters:{docs:{description:{story:"Fully controlled using custom `Buttons`."}}},args:{title:"Delete Account",description:"This action cannot be undone.",dataset:{testid:"alert-dialog"}},render:function(n){const[o,r]=s.useState(!1),a=()=>{r(!1),h("account deleted")()},i=()=>{r(!1),h("deletion canceled")()};return t.jsxs(t.Fragment,{children:[t.jsx(v,{onClick:()=>r(!0),dataset:{testid:"alert-trigger"},children:"Action"}),t.jsxs(d,{...n,open:o,children:[t.jsx(d.Cancel,{variant:"tertiary",onClick:i,children:"Cancel"}),t.jsx(d.Action,{variant:"critical",onClick:a,children:"Delete"})]})]})}},S={parameters:{docs:{description:{story:"Fully controlled using a single custom `Button`."}}},args:{title:"Payment failed",description:"The page will refresh. Please try again.",dataset:{testid:"alert-dialog"}},render:function(n){const[o,r]=s.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(v,{onClick:()=>r(!0),dataset:{testid:"alert-trigger"},children:"Action"}),t.jsx(d,{...n,open:o,children:t.jsx(d.Action,{onClick:()=>{r(!1),h("page refreshed")()},children:"Refresh"})})]})}},j={parameters:{docs:{description:{story:`
-The Dialog component provides CSS property escape hatches for controlling the z-index of both the overlay and content:
-
-- \`--ds-dialog-overlay-z-index-override\`: Controls the overlay's z-index
-- \`--ds-dialog-content-z-index-override\`: Controls the content's z-index
-
-These should only be used when necessary, as proper stacking context isolation is preferred.
-
-In the following example, the stacking order of the dialog trigger, overlay, and content are
-reveresed using the above CSS properties.
-
-Note: This is done using a \`useEffect\` just for the sake of the story. In a real-world scenario, this should ideally be done in a global stylesheet or a theme provider.
-                `}}},args:{title:"Delete Account",description:"This action cannot be undone.",dataset:{testid:"alert-dialog"}},render:function(n){const[o,r]=s.useState(!1);return s.useEffect(()=>(document.body.style.setProperty("--ds-dialog-overlay-z-index-override","88"),document.body.style.setProperty("--ds-dialog-content-z-index-override","77"),()=>{document.body.style.removeProperty("--ds-dialog-overlay-z-index-override"),document.body.style.removeProperty("--ds-dialog-content-z-index-override")}),[]),t.jsxs("div",{style:{position:"relative",zIndex:99},children:[t.jsx(v,{dataset:{testid:"alert-trigger"},onClick:()=>r(!0),children:"Open"}),t.jsxs(d,{...n,open:o,children:[t.jsx(d.Cancel,{variant:"tertiary",onClick:()=>r(!1),children:"Cancel"}),t.jsx(d.Action,{variant:"critical",onClick:()=>r(!1),children:"Delete"})]})]})},play:async({canvas:e,step:n})=>{await n("Open alert",async()=>(await Ne.click(e.getByTestId("alert-trigger")),Ie(()=>{const o=e.getByTestId("alert-dialog");E(o).toBeVisible()}))),await n("Check content's computed z-index",async()=>{const o=e.getByTestId("alert-dialog"),r=getComputedStyle(o);E(r.zIndex).toBe("77")}),await n("Check overlay's computed z-index",async()=>{const o=e.getByTestId("alert-dialog").previousElementSibling;if(!o)throw new Error("The overlay happened to be the previous sibling of the dialog content, but it isn't anymore. Please update the test.");const r=getComputedStyle(o);E(r.zIndex).toBe("88")})}};var F,M,z;b.parameters={...b.parameters,docs:{...(F=b.parameters)==null?void 0:F.docs,source:{originalSource:`{
-  parameters: {
-    docs: {
-      description: {
-        story: \`Uncontrolled alert using the \\\`Trigger\\\`, \\\`Cancel\\\`, and \\\`Action\\\` subcomponents.\`
-      }
-    }
-  },
-  args: {
-    title: 'Confirm',
-    description: 'This action cannot be undone.',
-    dataset: {
-      testid: 'alert-dialog'
-    }
-  },
-  render: function Story(props) {
-    return <AlertDialog {...props}>
-                <AlertDialog.Trigger>
-                    <Button dataset={{
-          testid: 'alert-trigger'
-        }}>Action</Button>
-                </AlertDialog.Trigger>
-                <AlertDialog.Cancel variant="tertiary" onClick={action('cancel')}>
-                    Cancel
-                </AlertDialog.Cancel>
-                <AlertDialog.Action onClick={action('confirm')}>Confirm</AlertDialog.Action>
-            </AlertDialog>;
-  }
-}`,...(z=(M=b.parameters)==null?void 0:M.docs)==null?void 0:z.source}}};var W,$,L;T.parameters={...T.parameters,docs:{...(W=T.parameters)==null?void 0:W.docs,source:{originalSource:`{
-  parameters: {
-    docs: {
-      description: {
-        story: \`Uncontrolled alert using the \\\`Trigger\\\`, and two \\\`Action\\\` subcomponents.
-
-The two actions are styled differently to suggest a preferred action to the one the user has requested.
-
-For example, in this case, the user is prompted to reschedule instead of canceling.\`
-      }
-    }
-  },
-  args: {
-    title: 'Cancel Lesson',
-    description: 'Your balance will not be refunded. Would you like to reschedule instead?',
-    dataset: {
-      testid: 'alert-dialog'
-    }
-  },
-  render: function Story(props) {
-    return <AlertDialog {...props}>
-                <AlertDialog.Trigger>
-                    <Button variant="critical" dataset={{
-          testid: 'alert-trigger'
-        }}>
-                        Cancel Lesson
-                    </Button>
-                </AlertDialog.Trigger>
-                <AlertDialog.Action variant="ghost" onClick={action('cancel')}>
-                    Cancel lesson
-                </AlertDialog.Action>
-                <AlertDialog.Action variant="secondary" onClick={action('reschedule')}>
-                    Reschedule
-                </AlertDialog.Action>
-            </AlertDialog>;
-  }
-}`,...(L=($=T.parameters)==null?void 0:$.docs)==null?void 0:L.source}}};var G,U,V;R.parameters={...R.parameters,docs:{...(G=R.parameters)==null?void 0:G.docs,source:{originalSource:`{
-  parameters: {
-    docs: {
-      description: {
-        story: 'Fully controlled using custom \`Buttons\`.'
-      }
-    }
-  },
-  args: {
-    title: 'Delete Account',
-    description: 'This action cannot be undone.',
-    dataset: {
-      testid: 'alert-dialog'
-    }
-  },
-  render: function Story(props) {
-    const [open, setOpen] = useState(false);
-    const handleConfirm = () => {
-      setOpen(false);
-      action('account deleted')();
-    };
-    const handleCancel = () => {
-      setOpen(false);
-      action('deletion canceled')();
-    };
-    return <>
-                <Button onClick={() => setOpen(true)} dataset={{
-        testid: 'alert-trigger'
-      }}>
-                    Action
-                </Button>
-                <AlertDialog {...props} open={open}>
-                    <AlertDialog.Cancel variant="tertiary" onClick={handleCancel}>
-                        Cancel
-                    </AlertDialog.Cancel>
-                    <AlertDialog.Action variant="critical" onClick={handleConfirm}>
-                        Delete
-                    </AlertDialog.Action>
-                </AlertDialog>
-            </>;
-  }
-}`,...(V=(U=R.parameters)==null?void 0:U.docs)==null?void 0:V.source}}};var q,Y,H;S.parameters={...S.parameters,docs:{...(q=S.parameters)==null?void 0:q.docs,source:{originalSource:`{
-  parameters: {
-    docs: {
-      description: {
-        story: 'Fully controlled using a single custom \`Button\`.'
-      }
-    }
-  },
-  args: {
-    title: 'Payment failed',
-    description: 'The page will refresh. Please try again.',
-    dataset: {
-      testid: 'alert-dialog'
-    }
-  },
-  render: function Story(props) {
-    const [open, setOpen] = useState(false);
-    return <>
-                <Button onClick={() => setOpen(true)} dataset={{
-        testid: 'alert-trigger'
-      }}>
-                    Action
-                </Button>
-                <AlertDialog {...props} open={open}>
-                    <AlertDialog.Action onClick={() => {
-          setOpen(false);
-          action('page refreshed')();
-        }}>
-                        Refresh
-                    </AlertDialog.Action>
-                </AlertDialog>
-            </>;
-  }
-}`,...(H=(Y=S.parameters)==null?void 0:Y.docs)==null?void 0:H.source}}};var X,J,K;j.parameters={...j.parameters,docs:{...(X=j.parameters)==null?void 0:X.docs,source:{originalSource:`{
-  parameters: {
-    docs: {
-      description: {
-        story: \`
-The Dialog component provides CSS property escape hatches for controlling the z-index of both the overlay and content:
-
-- \\\`--ds-dialog-overlay-z-index-override\\\`: Controls the overlay's z-index
-- \\\`--ds-dialog-content-z-index-override\\\`: Controls the content's z-index
-
-These should only be used when necessary, as proper stacking context isolation is preferred.
-
-In the following example, the stacking order of the dialog trigger, overlay, and content are
-reveresed using the above CSS properties.
-
-Note: This is done using a \\\`useEffect\\\` just for the sake of the story. In a real-world scenario, this should ideally be done in a global stylesheet or a theme provider.
-                \`
-      }
-    }
-  },
-  args: {
-    title: 'Delete Account',
-    description: 'This action cannot be undone.',
-    dataset: {
-      testid: 'alert-dialog'
-    }
-  },
-  render: function Story(props) {
-    const [open, setOpen] = useState(false);
-    useEffect(() => {
-      document.body.style.setProperty('--ds-dialog-overlay-z-index-override', '88');
-      document.body.style.setProperty('--ds-dialog-content-z-index-override', '77');
-      return () => {
-        document.body.style.removeProperty('--ds-dialog-overlay-z-index-override');
-        document.body.style.removeProperty('--ds-dialog-content-z-index-override');
-      };
-    }, []);
-    return <div style={{
-      position: 'relative',
-      zIndex: 99
-    }}>
-                <Button dataset={{
-        testid: 'alert-trigger'
-      }} onClick={() => setOpen(true)}>
-                    Open
-                </Button>
-                <AlertDialog {...props} open={open}>
-                    <AlertDialog.Cancel variant="tertiary" onClick={() => setOpen(false)}>
-                        Cancel
-                    </AlertDialog.Cancel>
-                    <AlertDialog.Action variant="critical" onClick={() => setOpen(false)}>
-                        Delete
-                    </AlertDialog.Action>
-                </AlertDialog>
-            </div>;
-  },
-  play: async ({
-    canvas,
-    step
-  }) => {
-    await step('Open alert', async () => {
-      await userEvent.click(canvas.getByTestId('alert-trigger'));
-      return waitFor(() => {
-        const alert = canvas.getByTestId('alert-dialog');
-        expect(alert).toBeVisible();
-      });
-    });
-    await step(\`Check content's computed z-index\`, async () => {
-      const alert = canvas.getByTestId('alert-dialog');
-      const styles = getComputedStyle(alert);
-      expect(styles.zIndex).toBe('77');
-    });
-    await step(\`Check overlay's computed z-index\`, async () => {
-      const overlay = canvas.getByTestId('alert-dialog').previousElementSibling;
-      if (!overlay) throw new Error(\`The overlay happened to be the previous sibling of the dialog content, but it isn't anymore. Please update the test.\`);
-      const styles = getComputedStyle(overlay);
-      expect(styles.zIndex).toBe('88');
-    });
-  }
-}`,...(K=(J=j.parameters)==null?void 0:J.docs)==null?void 0:K.source}}};const Zt=["Uncontrolled","UncontrolledWithSuggestionAction","Controlled","ControlledWithSingleButton","WithZIndexOverride"];export{R as Controlled,S as ControlledWithSingleButton,b as Uncontrolled,T as UncontrolledWithSuggestionAction,j as WithZIndexOverride,Zt as __namedExportsOrder,Kt as default};

package/dist/assets/Avatar-B6s9WtES.css

@@ -1 +0,0 @@
-.Avatar__K41Tw{display:inline-block}.Avatar__K41Tw img{vertical-align:bottom;object-fit:cover;border-radius:var(--dad9ec)}.Avatar--size-24__hDb5G img{width:var(--86aa8e);height:var(--86aa8e)}.Avatar--size-32__0goVI img{width:var(--32bbec);height:var(--32bbec)}.Avatar--size-48__uGMSJ img{width:var(--950ab5);height:var(--950ab5)}.Avatar--size-64__WD77O img{width:var(--cc5dc7);height:var(--cc5dc7)}.Avatar--size-96__OxIe2 img{width:var(--796da2);height:var(--796da2)}.Avatar--size-160__8tEPo img{width:var(--329ba7);height:var(--329ba7)}@media (min-width: 400px){.Avatar--narrow-l--size-24__L-54O img{width:var(--86aa8e);height:var(--86aa8e)}.Avatar--narrow-l--size-32__Mdeh3 img{width:var(--32bbec);height:var(--32bbec)}.Avatar--narrow-l--size-48__1xNsg img{width:var(--950ab5);height:var(--950ab5)}.Avatar--narrow-l--size-64__ZQ5C- img{width:var(--cc5dc7);height:var(--cc5dc7)}.Avatar--narrow-l--size-96__DuZVB img{width:var(--796da2);height:var(--796da2)}.Avatar--narrow-l--size-160__PN1pX img{width:var(--329ba7);height:var(--329ba7)}}@media (min-width: 700px){.Avatar--medium-s--size-24__6--6m img{width:var(--86aa8e);height:var(--86aa8e)}.Avatar--medium-s--size-32__7rlpv img{width:var(--32bbec);height:var(--32bbec)}.Avatar--medium-s--size-48__R893D img{width:var(--950ab5);height:var(--950ab5)}.Avatar--medium-s--size-64__x4N0d img{width:var(--cc5dc7);height:var(--cc5dc7)}.Avatar--medium-s--size-96__1qdaO img{width:var(--796da2);height:var(--796da2)}.Avatar--medium-s--size-160__z7IAl img{width:var(--329ba7);height:var(--329ba7)}}@media (min-width: 880px){.Avatar--medium-l--size-24__Ndkzw img{width:var(--86aa8e);height:var(--86aa8e)}.Avatar--medium-l--size-32__3miIB img{width:var(--32bbec);height:var(--32bbec)}.Avatar--medium-l--size-48__arPBB img{width:var(--950ab5);height:var(--950ab5)}.Avatar--medium-l--size-64__aFQa7 img{width:var(--cc5dc7);height:var(--cc5dc7)}.Avatar--medium-l--size-96__eg03F img{width:var(--796da2);height:var(--796da2)}.Avatar--medium-l--size-160__fGJ7K img{width:var(--329ba7);height:var(--329ba7)}}@media (min-width: 1200px){.Avatar--wide-s--size-24__Ue7o0 img{width:var(--86aa8e);height:var(--86aa8e)}.Avatar--wide-s--size-32__hYoGY img{width:var(--32bbec);height:var(--32bbec)}.Avatar--wide-s--size-48__Q9kzJ img{width:var(--950ab5);height:var(--950ab5)}.Avatar--wide-s--size-64__vvQME img{width:var(--cc5dc7);height:var(--cc5dc7)}.Avatar--wide-s--size-96__tVnz3 img{width:var(--796da2);height:var(--796da2)}.Avatar--wide-s--size-160__brJ59 img{width:var(--329ba7);height:var(--329ba7)}}@media (min-width: 1900px){.Avatar--wide-l--size-24__EMfbp img{width:var(--86aa8e);height:var(--86aa8e)}.Avatar--wide-l--size-32__7bYZs img{width:var(--32bbec);height:var(--32bbec)}.Avatar--wide-l--size-48__548Bt img{width:var(--950ab5);height:var(--950ab5)}.Avatar--wide-l--size-64__5Ce08 img{width:var(--cc5dc7);height:var(--cc5dc7)}.Avatar--wide-l--size-96__-6w7Y img{width:var(--796da2);height:var(--796da2)}.Avatar--wide-l--size-160__5ft-T img{width:var(--329ba7);height:var(--329ba7)}}.Avatar--round__ZDtGc img{border-radius:var(--8517a6)}.Avatar__K41Tw img{border-style:solid;border-width:var(--c4d145);border-color:var(--54e6b5)}

package/dist/assets/Avatar-Dlo9b83e.js

@@ -1,6 +0,0 @@
-import{r as z,u as p,v as c,w,g as f,j as a,A as g}from"./iframe-DjYTJz7A.js";import{f as y}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{w as e}from"./componentNames-hc9KR2nX.js";import{A as h}from"./constants-5om8Ptru.js";const x="Avatar__K41Tw",N={Avatar:x,"Avatar--size-24":"Avatar--size-24__hDb5G","Avatar--size-32":"Avatar--size-32__0goVI","Avatar--size-48":"Avatar--size-48__uGMSJ","Avatar--size-64":"Avatar--size-64__WD77O","Avatar--size-96":"Avatar--size-96__OxIe2","Avatar--size-160":"Avatar--size-160__8tEPo","Avatar--narrow-l--size-24":"Avatar--narrow-l--size-24__L-54O","Avatar--narrow-l--size-32":"Avatar--narrow-l--size-32__Mdeh3","Avatar--narrow-l--size-48":"Avatar--narrow-l--size-48__1xNsg","Avatar--narrow-l--size-64":"Avatar--narrow-l--size-64__ZQ5C-","Avatar--narrow-l--size-96":"Avatar--narrow-l--size-96__DuZVB","Avatar--narrow-l--size-160":"Avatar--narrow-l--size-160__PN1pX","Avatar--medium-s--size-24":"Avatar--medium-s--size-24__6--6m","Avatar--medium-s--size-32":"Avatar--medium-s--size-32__7rlpv","Avatar--medium-s--size-48":"Avatar--medium-s--size-48__R893D","Avatar--medium-s--size-64":"Avatar--medium-s--size-64__x4N0d","Avatar--medium-s--size-96":"Avatar--medium-s--size-96__1qdaO","Avatar--medium-s--size-160":"Avatar--medium-s--size-160__z7IAl","Avatar--medium-l--size-24":"Avatar--medium-l--size-24__Ndkzw","Avatar--medium-l--size-32":"Avatar--medium-l--size-32__3miIB","Avatar--medium-l--size-48":"Avatar--medium-l--size-48__arPBB","Avatar--medium-l--size-64":"Avatar--medium-l--size-64__aFQa7","Avatar--medium-l--size-96":"Avatar--medium-l--size-96__eg03F","Avatar--medium-l--size-160":"Avatar--medium-l--size-160__fGJ7K","Avatar--wide-s--size-24":"Avatar--wide-s--size-24__Ue7o0","Avatar--wide-s--size-32":"Avatar--wide-s--size-32__hYoGY","Avatar--wide-s--size-48":"Avatar--wide-s--size-48__Q9kzJ","Avatar--wide-s--size-64":"Avatar--wide-s--size-64__vvQME","Avatar--wide-s--size-96":"Avatar--wide-s--size-96__tVnz3","Avatar--wide-s--size-160":"Avatar--wide-s--size-160__brJ59","Avatar--wide-l--size-24":"Avatar--wide-l--size-24__EMfbp","Avatar--wide-l--size-32":"Avatar--wide-l--size-32__7bYZs","Avatar--wide-l--size-48":"Avatar--wide-l--size-48__548Bt","Avatar--wide-l--size-64":"Avatar--wide-l--size-64__5Ce08","Avatar--wide-l--size-96":"Avatar--wide-l--size-96__-6w7Y","Avatar--wide-l--size-160":"Avatar--wide-l--size-160__5ft-T","Avatar--round":"Avatar--round__ZDtGc"},s=z.forwardRef(function({size:i=g,round:t,src:l,alt:v="",dataset:d,crossOrigin:u,...m},A){const n=t??!0,o=p(N,e.Avatar,[c("size",i),w("round",void 0,n)]),_={...y(m),ref:A,className:o.join(" "),...f(d,{preplyDsComponent:e.Avatar})};return a.jsx("picture",{..._,children:a.jsx("img",{src:l||h,alt:v,crossOrigin:u})})});try{s.displayName="Avatar",s.__docgenInfo={description:"",displayName:"Avatar",props:{size:{defaultValue:{value:"32"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:"ResponsiveProp<AvatarSize>"}]}},round:{defaultValue:null,description:"@deprecated this prop is deprecated and has no effect",name:"round",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},src:{defaultValue:null,description:`The avatar image URL.
-If not provided, the default placeholder image is used instead.`,name:"src",required:!1,type:{name:"enum",value:[{value:"string"}]}},alt:{defaultValue:{value:""},description:`A description of the image.
-This is recommended for accessibility purposes, specifically for users
-of screen readers.
-@example <Avatar src={...} alt="Foobar's profile" />`,name:"alt",required:!1,type:{name:"enum",value:[{value:"string"}]}},dataset:{defaultValue:null,description:`Sets data attributes on the DOM element.
-@example <Avatar dataset={{ 'qa-id': 'user-avatar' }} /> // will add data-qa-id="user-avatar" to the HTML element`,name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},crossOrigin:{defaultValue:null,description:"CORS policy for the image.",name:"crossOrigin",required:!1,type:{name:"enum",value:[{value:'""'},{value:'"anonymous"'},{value:'"use-credentials"'}]}}}}}catch{}export{s as A};

package/dist/assets/Avatar.stories-B27rtxK8.js

@@ -1,42 +0,0 @@
-import{j as a}from"./iframe-DjYTJz7A.js";import{A as s}from"./Avatar-Dlo9b83e.js";import{S as d}from"./consts-KAYct7Gj.js";import"./preload-helper-Dp1pzeXC.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-hc9KR2nX.js";import"./constants-5om8Ptru.js";const S={title:"components/Avatar",component:s,argTypes:{size:{description:d}}},t=()=>a.jsxs("div",{style:{display:"flex",gap:"8px",alignItems:"end"},children:[a.jsx(s,{size:"160"}),a.jsx(s,{src:"./assets/avatar-1.png",size:"96"}),a.jsx(s,{src:"./assets/avatar-2.png",size:"64"}),a.jsx(s,{src:"./assets/avatar-3.png",size:"48"}),a.jsx(s,{src:"./assets/avatar-4.png",size:"32"}),a.jsx(s,{src:"./assets/avatar-5.png",size:"24"})]}),r={parameters:{chromatic:{disableSnapshot:!0}},args:{size:"32",src:"./assets/avatar-1.png",dataset:{qaid:"avatar"}},argTypes:{src:{control:"text"},dataset:{control:"object"},alt:{control:"text"},round:{table:{disable:!0}}}};var e,n,o;t.parameters={...t.parameters,docs:{...(e=t.parameters)==null?void 0:e.docs,source:{originalSource:`() => <div style={{
-  display: 'flex',
-  gap: '8px',
-  alignItems: 'end'
-}}>
-        <Avatar size="160" />
-        <Avatar src="./assets/avatar-1.png" size="96" />
-        <Avatar src="./assets/avatar-2.png" size="64" />
-        <Avatar src="./assets/avatar-3.png" size="48" />
-        <Avatar src="./assets/avatar-4.png" size="32" />
-        <Avatar src="./assets/avatar-5.png" size="24" />
-    </div>`,...(o=(n=t.parameters)==null?void 0:n.docs)==null?void 0:o.source}}};var i,p,c;r.parameters={...r.parameters,docs:{...(i=r.parameters)==null?void 0:i.docs,source:{originalSource:`{
-  parameters: {
-    chromatic: {
-      disableSnapshot: true
-    }
-  },
-  args: {
-    size: '32',
-    src: './assets/avatar-1.png',
-    dataset: {
-      qaid: 'avatar'
-    }
-  },
-  argTypes: {
-    src: {
-      control: 'text'
-    },
-    dataset: {
-      control: 'object'
-    },
-    alt: {
-      control: 'text'
-    },
-    // Disable deprecated props
-    round: {
-      table: {
-        disable: true
-      }
-    }
-  }
-}`,...(c=(p=r.parameters)==null?void 0:p.docs)==null?void 0:c.source}}};const j=["Sizes","Playground"];export{r as Playground,t as Sizes,j as __namedExportsOrder,S as default};

package/dist/assets/AvatarWithStatus.stories-DBeEaQQL.js

@@ -1,41 +0,0 @@
-import{r as T,u as b,w as q,v as C,G as N,g as R,j as a,a4 as w,A as V}from"./iframe-DjYTJz7A.js";import{f as D}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{A as E}from"./Avatar-Dlo9b83e.js";import{w as r}from"./componentNames-hc9KR2nX.js";import"./preload-helper-Dp1pzeXC.js";import"./constants-5om8Ptru.js";const I="AvatarWithStatus__z8Zik",i={AvatarWithStatus:I,"AvatarWithStatus--indicator":"AvatarWithStatus--indicator__dsdXa","AvatarWithStatus--online":"AvatarWithStatus--online__pGAFw","AvatarWithStatus--size-64":"AvatarWithStatus--size-64__vG-kB","AvatarWithStatus--size-96":"AvatarWithStatus--size-96__Dgqc1","AvatarWithStatus--size-160":"AvatarWithStatus--size-160__7gCR7"},e=T.forwardRef(function({online:A=!1,size:n=w,dataset:f,alt:S,crossOrigin:g,src:_,...y},W){const x=b(i,r.AvatarWithStatus,[q("online",void 0,A),C("size",n)]),z=[...N(i,r.AvatarWithStatus,["indicator"])],j={...D(y),ref:W,className:x.join(" "),...R(f,{preplyDsComponent:r.AvatarWithStatus})};return a.jsxs("div",{...j,children:[a.jsx("span",{className:z.join(" ")}),a.jsx("div",{children:a.jsx(E,{alt:S,crossOrigin:g,src:_,size:n??V})})]})});try{e.displayName="AvatarWithStatus",e.__docgenInfo={description:"",displayName:"AvatarWithStatus",props:{dataset:{defaultValue:null,description:`Sets data attributes on the DOM element.
-@example <Avatar dataset={{ 'qa-id': 'user-avatar' }} /> // will add data-qa-id="user-avatar" to the HTML element`,name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},src:{defaultValue:null,description:`The avatar image URL.
-If not provided, the default placeholder image is used instead.`,name:"src",required:!1,type:{name:"enum",value:[{value:"string"}]}},alt:{defaultValue:null,description:`A description of the image.
-This is recommended for accessibility purposes, specifically for users
-of screen readers.
-@example <Avatar src={...} alt="Foobar's profile" />`,name:"alt",required:!1,type:{name:"enum",value:[{value:"string"}]}},crossOrigin:{defaultValue:null,description:"CORS policy for the image.",name:"crossOrigin",required:!1,type:{name:"enum",value:[{value:'""'},{value:'"anonymous"'},{value:'"use-credentials"'}]}},online:{defaultValue:{value:"false"},description:"Controls the status of the visual indicator.",name:"online",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},size:{defaultValue:{value:"64"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:"ResponsiveProp<AvatarWithStatusSize>"}]}}}}}catch{}const Z={title:"components/AvatarWithStatus",component:e},t=()=>a.jsxs("div",{style:{display:"flex",gap:"8px"},children:[a.jsx(e,{size:"64",online:!0}),a.jsx(e,{size:"64",online:!1})]}),s={parameters:{chromatic:{disableSnapshot:!0}},args:{size:"64",src:"./assets/avatar-1.png",online:!1,dataset:{qaid:"avatar-with-status"}},argTypes:{src:{control:"text"},dataset:{control:"object"},alt:{control:"text"},online:{control:"boolean"}}};var o,l,u,c,d;t.parameters={...t.parameters,docs:{...(o=t.parameters)==null?void 0:o.docs,source:{originalSource:`() => <div style={{
-  display: 'flex',
-  gap: '8px'
-}}>
-        <AvatarWithStatus size="64" online />
-        <AvatarWithStatus size="64" online={false} />
-    </div>`,...(u=(l=t.parameters)==null?void 0:l.docs)==null?void 0:u.source},description:{story:`This component augments [Avatar](/docs/components-avatar--docs) to add a
-connection status indicator.`,...(d=(c=t.parameters)==null?void 0:c.docs)==null?void 0:d.description}}};var p,m,v;s.parameters={...s.parameters,docs:{...(p=s.parameters)==null?void 0:p.docs,source:{originalSource:`{
-  parameters: {
-    chromatic: {
-      disableSnapshot: true
-    }
-  },
-  args: {
-    size: '64',
-    src: './assets/avatar-1.png',
-    online: false,
-    dataset: {
-      qaid: 'avatar-with-status'
-    }
-  },
-  argTypes: {
-    src: {
-      control: 'text'
-    },
-    dataset: {
-      control: 'object'
-    },
-    alt: {
-      control: 'text'
-    },
-    online: {
-      control: 'boolean'
-    }
-  }
-}`,...(v=(m=s.parameters)==null?void 0:m.docs)==null?void 0:v.source}}};const k=["Statuses","Playground"];export{s as Playground,t as Statuses,k as __namedExportsOrder,Z as default};

package/dist/assets/Badge-CEZW6Ww4.js

@@ -1,10 +0,0 @@
-import{r as y,g as b,j as t}from"./iframe-DjYTJz7A.js";import{f as h}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{I as B}from"./Icon-kphbe0CE.js";import{w as T}from"./componentNames-hc9KR2nX.js";const x="badge__ioy0w",I="label__lXPEF",u={badge:x,label:I},V=e=>{switch(e){case"xs":return"small";case"s":return"medium";case"m":return"large";default:return e}},r=y.forwardRef(function({type:d="neutral",size:l="medium",leadingSvgIcon:n,dataset:o,children:m,accent:s,inverted:i,hideLabel:c,...p},v){const g=V(l),a={...o,size:g};s===void 0&&i===void 0?a.type=d:(a.accent=s||"unset",a.inverted=!!i);const f={...h(p),ref:v,className:u.badge,...b(a,{preplyDsComponent:T.Badge})};return t.jsxs("span",{...f,children:[!!n&&t.jsx(B,{accent:"primary",size:l==="large"?"24":"16",svg:n}),t.jsx("span",{className:u.label,"data-hidden":c,children:m})]})});try{r.displayName="Badge",r.__docgenInfo={description:"",displayName:"Badge",props:{size:{defaultValue:{value:"medium"},description:"The size of the badge.",name:"size",required:!1,type:{name:"enum",value:[{value:'"s"'},{value:'"small"'},{value:'"medium"'},{value:'"large"'},{value:'"xs"'},{value:'"m"'}]}},leadingSvgIcon:{defaultValue:null,description:`The leading SVG icon.
-@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';
-
-<Badge leadingSvgIcon={TokyoUITag}>Badge</Badge>
-or
-<Badge leadingSvgIcon={<TokyoUITag />}>Badge</Badge>`,name:"leadingSvgIcon",required:!1,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},hideLabel:{defaultValue:null,description:`@deprecated Look at <IconTile> if you need an icon-only badge.
-
-Hides badge label visually, but keeps it in the accessibility tree.
-Use this prop to implement icons-only badges.
-@example <Badge leadingSvgIcon={<TokyoUITag />} hideLabel>Badge</Badge>`,name:"hideLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},assistiveText:{defaultValue:null,description:"@deprecated badge children should have all necessary information",name:"assistiveText",required:!1,type:{name:"enum",value:[{value:"string"}]}},type:{defaultValue:{value:"neutral"},description:"The type of the badge.",name:"type",required:!1,type:{name:"enum",value:[{value:'"neutral"'},{value:'"info"'},{value:'"ai"'},{value:'"warning"'},{value:'"critical"'},{value:'"positive"'}]}},accent:{defaultValue:null,description:"@deprecated Use `type` instead.",name:"accent",required:!1,type:{name:"enum",value:[{value:'"info"'},{value:'"warning"'},{value:'"critical"'},{value:'"positive"'},{value:'"accent"'},{value:'"tertiary"'}]}},inverted:{defaultValue:null,description:"@deprecated inverted badge is deprecated & will be removed in the future releases",name:"inverted",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}}}}}catch{}export{r as B};

package/dist/assets/Badge.stories-ioY8q4d7.js

@@ -1,90 +0,0 @@
-import{j as e}from"./iframe-DjYTJz7A.js";import{F as n}from"./TokyoUITag-fMAL09F9.js";import{L as d}from"./LayoutFlex-p_p7LCCd.js";import{B as a}from"./Badge-CEZW6Ww4.js";import"./preload-helper-Dp1pzeXC.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./layout-relative.module-BM7yIsEb.js";import"./componentNames-hc9KR2nX.js";import"./Icon-kphbe0CE.js";import"./text-accent-C5-m5mrW.js";import"./render-icon-DZ6hllTG.js";const q={title:"components/Badge",component:a,parameters:{layout:"padded",docs:{source:{type:"dynamic"}}}},t=()=>e.jsxs(d,{gap:"16",children:[e.jsx(a,{type:"neutral",children:"Neutral"}),e.jsx(a,{type:"positive",children:"Positive"}),e.jsx(a,{type:"info",children:"Info"}),e.jsx(a,{type:"warning",children:"Warning"}),e.jsx(a,{type:"critical",children:"Critical"}),e.jsx(a,{type:"ai",children:"AI"}),e.jsx(a,{type:"neutral",leadingSvgIcon:e.jsx(n,{}),children:"Neutral"}),e.jsx(a,{type:"positive",leadingSvgIcon:e.jsx(n,{}),children:"Positive"}),e.jsx(a,{type:"info",leadingSvgIcon:e.jsx(n,{}),children:"Info"}),e.jsx(a,{type:"warning",leadingSvgIcon:e.jsx(n,{}),children:"Warning"}),e.jsx(a,{type:"critical",leadingSvgIcon:e.jsx(n,{}),children:"Critical"}),e.jsx(a,{type:"ai",leadingSvgIcon:e.jsx(n,{}),children:"AI"})]});n.displayName="TokyoUITag";const r=()=>e.jsxs(d,{gap:"16",alignItems:"center",children:[e.jsx(a,{size:"small",leadingSvgIcon:e.jsx(n,{}),children:"Small"}),e.jsx(a,{size:"medium",leadingSvgIcon:e.jsx(n,{}),children:"Medium"}),e.jsx(a,{size:"large",leadingSvgIcon:e.jsx(n,{}),children:"Large"})]}),i=()=>e.jsx(d,{gap:"16",direction:"column",children:e.jsx(a,{size:"small",leadingSvgIcon:e.jsx(n,{}),children:"Badge"})});i.tags=["!autodocs"];const o=()=>e.jsx("div",{style:{maxWidth:150,margin:"0 auto"},children:e.jsx(a,{size:"medium",leadingSvgIcon:e.jsx(n,{}),children:"I'm way too long to be a badge label"})}),s={parameters:{chromatic:{disableSnapshot:!0}},args:{type:"neutral",size:"medium",children:"Badge",dataset:{qaid:"badge"}},argTypes:{dataset:{control:"object"},leadingSvgIcon:{options:["None","With Icon"],mapping:{None:void 0,"With Icon":n},control:"select"},assistiveText:{table:{disable:!0}},accent:{table:{disable:!0}},inverted:{table:{disable:!0}}}};var g,l,c;t.parameters={...t.parameters,docs:{...(g=t.parameters)==null?void 0:g.docs,source:{originalSource:`() => <LayoutFlex gap="16">
-        <Badge type="neutral">Neutral</Badge>
-        <Badge type="positive">Positive</Badge>
-        <Badge type="info">Info</Badge>
-        <Badge type="warning">Warning</Badge>
-        <Badge type="critical">Critical</Badge>
-        <Badge type="ai">AI</Badge>
-        <Badge type="neutral" leadingSvgIcon={<TokyoUITag />}>
-            Neutral
-        </Badge>
-        <Badge type="positive" leadingSvgIcon={<TokyoUITag />}>
-            Positive
-        </Badge>
-        <Badge type="info" leadingSvgIcon={<TokyoUITag />}>
-            Info
-        </Badge>
-        <Badge type="warning" leadingSvgIcon={<TokyoUITag />}>
-            Warning
-        </Badge>
-        <Badge type="critical" leadingSvgIcon={<TokyoUITag />}>
-            Critical
-        </Badge>
-        <Badge type="ai" leadingSvgIcon={<TokyoUITag />}>
-            AI
-        </Badge>
-    </LayoutFlex>`,...(c=(l=t.parameters)==null?void 0:l.docs)==null?void 0:c.source}}};var p,m,u;r.parameters={...r.parameters,docs:{...(p=r.parameters)==null?void 0:p.docs,source:{originalSource:`() => <LayoutFlex gap="16" alignItems="center">
-        <Badge size="small" leadingSvgIcon={<TokyoUITag />}>
-            Small
-        </Badge>
-        <Badge size="medium" leadingSvgIcon={<TokyoUITag />}>
-            Medium
-        </Badge>
-        <Badge size="large" leadingSvgIcon={<TokyoUITag />}>
-            Large
-        </Badge>
-    </LayoutFlex>`,...(u=(m=r.parameters)==null?void 0:m.docs)==null?void 0:u.source}}};var y,I,x;i.parameters={...i.parameters,docs:{...(y=i.parameters)==null?void 0:y.docs,source:{originalSource:`() => <LayoutFlex gap="16" direction="column">
-        <Badge size="small" leadingSvgIcon={<TokyoUITag />}>
-            Badge
-        </Badge>
-    </LayoutFlex>`,...(x=(I=i.parameters)==null?void 0:I.docs)==null?void 0:x.source}}};var v,B,j,h,S;o.parameters={...o.parameters,docs:{...(v=o.parameters)==null?void 0:v.docs,source:{originalSource:`() => <div style={{
-  maxWidth: 150,
-  margin: '0 auto'
-}}>
-        <Badge size="medium" leadingSvgIcon={<TokyoUITag />}>
-            I&apos;m way too long to be a badge label
-        </Badge>
-    </div>`,...(j=(B=o.parameters)==null?void 0:B.docs)==null?void 0:j.source},description:{story:"Please avoid using long labels for badges.",...(S=(h=o.parameters)==null?void 0:h.docs)==null?void 0:S.description}}};var T,b,f;s.parameters={...s.parameters,docs:{...(T=s.parameters)==null?void 0:T.docs,source:{originalSource:`{
-  parameters: {
-    chromatic: {
-      disableSnapshot: true
-    }
-  },
-  args: {
-    type: 'neutral',
-    size: 'medium',
-    children: 'Badge',
-    dataset: {
-      qaid: 'badge'
-    }
-  },
-  argTypes: {
-    dataset: {
-      control: 'object'
-    },
-    leadingSvgIcon: {
-      options: ['None', 'With Icon'],
-      mapping: {
-        None: undefined,
-        'With Icon': TokyoUITag
-      },
-      control: 'select'
-    },
-    // Disable deprecated props
-    assistiveText: {
-      table: {
-        disable: true
-      }
-    },
-    accent: {
-      table: {
-        disable: true
-      }
-    },
-    inverted: {
-      table: {
-        disable: true
-      }
-    }
-  }
-}`,...(f=(b=s.parameters)==null?void 0:b.docs)==null?void 0:f.source}}};const E=["Types","Sizes","AsFlexChild","LongLabel","Playground"];export{i as AsFlexChild,o as LongLabel,s as Playground,r as Sizes,t as Types,E as __namedExportsOrder,q as default};

package/dist/assets/Box-CfDLuPKr.css

@@ -1 +0,0 @@
-.Box__T6Fyt{margin:0;list-style:none;font-weight:inherit;border:none;text-align:inherit;border-spacing:0;color:var(--628fb7);color:var(--3546c3);box-shadow:var(--a814c9);flex:1}.Box--box-radius-0__FWPBJ{border-radius:var(--adc668)}.Box--box-radius-2__IXJHQ{border-radius:var(--9817c7)}.Box--box-radius-4__aoSlX{border-radius:var(--7dcb5e)}.Box--box-radius-8__-BuzF{border-radius:var(--2071ea)}.Box--box-radius-16__n3666{border-radius:var(--f3f949)}.Box--box-radius-300__MyFTq{border-radius:var(--bb0f63)}@media (min-width: 400px){.Box--narrow-l--box-radius-0__rbA8v{border-radius:var(--adc668)}.Box--narrow-l--box-radius-2__Cn0nB{border-radius:var(--9817c7)}.Box--narrow-l--box-radius-4__dXX4d{border-radius:var(--7dcb5e)}.Box--narrow-l--box-radius-8__c2qTs{border-radius:var(--2071ea)}.Box--narrow-l--box-radius-16__7yiZ2{border-radius:var(--f3f949)}.Box--narrow-l--box-radius-300__Ic2BC{border-radius:var(--bb0f63)}}@media (min-width: 700px){.Box--medium-s--box-radius-0__6dX4D{border-radius:var(--adc668)}.Box--medium-s--box-radius-2__h-yhf{border-radius:var(--9817c7)}.Box--medium-s--box-radius-4__YmbvG{border-radius:var(--7dcb5e)}.Box--medium-s--box-radius-8__NOIeK{border-radius:var(--2071ea)}.Box--medium-s--box-radius-16__Q-4Io{border-radius:var(--f3f949)}.Box--medium-s--box-radius-300__fynf3{border-radius:var(--bb0f63)}}@media (min-width: 880px){.Box--medium-l--box-radius-0__-HCNC{border-radius:var(--adc668)}.Box--medium-l--box-radius-2__cWx-n{border-radius:var(--9817c7)}.Box--medium-l--box-radius-4__ibcr4{border-radius:var(--7dcb5e)}.Box--medium-l--box-radius-8__zm-dC{border-radius:var(--2071ea)}.Box--medium-l--box-radius-16__o3E1Q{border-radius:var(--f3f949)}.Box--medium-l--box-radius-300__Hsi3C{border-radius:var(--bb0f63)}}@media (min-width: 1200px){.Box--wide-s--box-radius-0__H9zOa{border-radius:var(--adc668)}.Box--wide-s--box-radius-2__FnsdM{border-radius:var(--9817c7)}.Box--wide-s--box-radius-4__G4jL0{border-radius:var(--7dcb5e)}.Box--wide-s--box-radius-8__7Mz6S{border-radius:var(--2071ea)}.Box--wide-s--box-radius-16__or-lk{border-radius:var(--f3f949)}.Box--wide-s--box-radius-300__rPeg0{border-radius:var(--bb0f63)}}@media (min-width: 1900px){.Box--wide-l--box-radius-0__HQ2Tn{border-radius:var(--adc668)}.Box--wide-l--box-radius-2__GYO54{border-radius:var(--9817c7)}.Box--wide-l--box-radius-4__267az{border-radius:var(--7dcb5e)}.Box--wide-l--box-radius-8__1hPOR{border-radius:var(--2071ea)}.Box--wide-l--box-radius-16__gp8Ov{border-radius:var(--f3f949)}.Box--wide-l--box-radius-300__NiuZR{border-radius:var(--bb0f63)}}.Box--background-primary__00zVu{background-color:var(--3546c3)}.Box--background-secondary__hY7w0{background-color:var(--302ecf)}.Box--background-tertiary__cIPge{background-color:var(--a5c761)}.Box--background-overlay__vbs8V{background-color:var(--02a0d5)}.Box--background-disabled__81WYT{background-color:var(--319b29)}.Box--background-brand__2W0VB{background-color:var(--cd91ab)}.Box--background-brandB2b__KQrLm{background-color:var(--706789)}.Box--background-accentLight__x6RrQ{background-color:var(--560eda)}.Box--background-accentDark__agpDd{background-color:var(--e4c520)}.Box--background-positiveLight__67dRq{background-color:var(--1836a4)}.Box--background-positiveDark__lYghV{background-color:var(--ae7f1f)}.Box--background-infoLight__u-TX4{background-color:var(--94a45e)}.Box--background-infoDark__ud4qs{background-color:var(--79dffb)}.Box--background-warningLight__JtSuS{background-color:var(--b503b8)}.Box--background-warningDark__SIgOQ{background-color:var(--34fc43)}.Box--background-criticalLight__uPTDs{background-color:var(--f15644)}.Box--background-criticalDark__12Zft{background-color:var(--87fcf8)}.Box--background-statusOnline__5PZcQ{background-color:var(--cbc115)}.Box--background-statusOffline__Vh0CO{background-color:var(--7ff085)}.Box--background-primaryInverted__TePy2{background-color:var(--4983fe)}.Box--background-secondaryInverted__tMytW{background-color:var(--19649f)}.Box--background-tertiaryInverted__K2wU5{background-color:var(--a469f2)}

package/dist/assets/Box.stories-udfSjNu1.js

@@ -1,44 +0,0 @@
-import{r as S,u as O,v as i,g as q,j as a,L as I,a5 as A,a6 as H}from"./iframe-DjYTJz7A.js";import{H as c}from"./Heading-BPJGe0Bg.js";import{L as m}from"./LayoutFlex-p_p7LCCd.js";import{T as b}from"./Text-C8DrHLQF.js";import{f as R}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{g as N}from"./layout-relative.module-BM7yIsEb.js";import{w as u}from"./componentNames-hc9KR2nX.js";import{a as V,S as j}from"./consts-KAYct7Gj.js";import"./preload-helper-Dp1pzeXC.js";import"./text-accent-C5-m5mrW.js";import"./text-centered-D70wah8Y.js";const C="Box__T6Fyt",E={Box:C,"Box--box-radius-0":"Box--box-radius-0__FWPBJ","Box--box-radius-2":"Box--box-radius-2__IXJHQ","Box--box-radius-4":"Box--box-radius-4__aoSlX","Box--box-radius-8":"Box--box-radius-8__-BuzF","Box--box-radius-16":"Box--box-radius-16__n3666","Box--box-radius-300":"Box--box-radius-300__MyFTq","Box--narrow-l--box-radius-0":"Box--narrow-l--box-radius-0__rbA8v","Box--narrow-l--box-radius-2":"Box--narrow-l--box-radius-2__Cn0nB","Box--narrow-l--box-radius-4":"Box--narrow-l--box-radius-4__dXX4d","Box--narrow-l--box-radius-8":"Box--narrow-l--box-radius-8__c2qTs","Box--narrow-l--box-radius-16":"Box--narrow-l--box-radius-16__7yiZ2","Box--narrow-l--box-radius-300":"Box--narrow-l--box-radius-300__Ic2BC","Box--medium-s--box-radius-0":"Box--medium-s--box-radius-0__6dX4D","Box--medium-s--box-radius-2":"Box--medium-s--box-radius-2__h-yhf","Box--medium-s--box-radius-4":"Box--medium-s--box-radius-4__YmbvG","Box--medium-s--box-radius-8":"Box--medium-s--box-radius-8__NOIeK","Box--medium-s--box-radius-16":"Box--medium-s--box-radius-16__Q-4Io","Box--medium-s--box-radius-300":"Box--medium-s--box-radius-300__fynf3","Box--medium-l--box-radius-0":"Box--medium-l--box-radius-0__-HCNC","Box--medium-l--box-radius-2":"Box--medium-l--box-radius-2__cWx-n","Box--medium-l--box-radius-4":"Box--medium-l--box-radius-4__ibcr4","Box--medium-l--box-radius-8":"Box--medium-l--box-radius-8__zm-dC","Box--medium-l--box-radius-16":"Box--medium-l--box-radius-16__o3E1Q","Box--medium-l--box-radius-300":"Box--medium-l--box-radius-300__Hsi3C","Box--wide-s--box-radius-0":"Box--wide-s--box-radius-0__H9zOa","Box--wide-s--box-radius-2":"Box--wide-s--box-radius-2__FnsdM","Box--wide-s--box-radius-4":"Box--wide-s--box-radius-4__G4jL0","Box--wide-s--box-radius-8":"Box--wide-s--box-radius-8__7Mz6S","Box--wide-s--box-radius-16":"Box--wide-s--box-radius-16__or-lk","Box--wide-s--box-radius-300":"Box--wide-s--box-radius-300__rPeg0","Box--wide-l--box-radius-0":"Box--wide-l--box-radius-0__HQ2Tn","Box--wide-l--box-radius-2":"Box--wide-l--box-radius-2__GYO54","Box--wide-l--box-radius-4":"Box--wide-l--box-radius-4__267az","Box--wide-l--box-radius-8":"Box--wide-l--box-radius-8__1hPOR","Box--wide-l--box-radius-16":"Box--wide-l--box-radius-16__gp8Ov","Box--wide-l--box-radius-300":"Box--wide-l--box-radius-300__NiuZR","Box--background-primary":"Box--background-primary__00zVu","Box--background-secondary":"Box--background-secondary__hY7w0","Box--background-tertiary":"Box--background-tertiary__cIPge","Box--background-overlay":"Box--background-overlay__vbs8V","Box--background-disabled":"Box--background-disabled__81WYT","Box--background-brand":"Box--background-brand__2W0VB","Box--background-brandB2b":"Box--background-brandB2b__KQrLm","Box--background-accentLight":"Box--background-accentLight__x6RrQ","Box--background-accentDark":"Box--background-accentDark__agpDd","Box--background-positiveLight":"Box--background-positiveLight__67dRq","Box--background-positiveDark":"Box--background-positiveDark__lYghV","Box--background-infoLight":"Box--background-infoLight__u-TX4","Box--background-infoDark":"Box--background-infoDark__ud4qs","Box--background-warningLight":"Box--background-warningLight__JtSuS","Box--background-warningDark":"Box--background-warningDark__SIgOQ","Box--background-criticalLight":"Box--background-criticalLight__uPTDs","Box--background-criticalDark":"Box--background-criticalDark__12Zft","Box--background-statusOnline":"Box--background-statusOnline__5PZcQ","Box--background-statusOffline":"Box--background-statusOffline__Vh0CO","Box--background-primaryInverted":"Box--background-primaryInverted__TePy2","Box--background-secondaryInverted":"Box--background-secondaryInverted__tMytW","Box--background-tertiaryInverted":"Box--background-tertiaryInverted__K2wU5"},r=S.forwardRef(function({children:g,background:_="primary",radius:v=A,padding:p=H,tag:k,dataset:f,...y},h){const w=O(E,u.Box,[i("box-radius",v),i("background",_)]),L=N(p),P=k??I,D=[...w,...L],T={...R(y),ref:h,className:D.join(" "),...q(f,{preplyDsComponent:u.Box})};return a.jsx(P,{...T,children:g})});try{r.displayName="Box",r.__docgenInfo={description:"A styleable container.\n\nUse this with `Layout*` components to create complex content containers.",displayName:"Box",props:{background:{defaultValue:{value:"primary"},description:"",name:"background",required:!1,type:{name:"enum",value:[{value:'"accentDark"'},{value:'"disabled"'},{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"overlay"'},{value:'"brand"'},{value:'"brandB2b"'},{value:'"accentLight"'},{value:'"positiveLight"'},{value:'"positiveDark"'},{value:'"infoLight"'},{value:'"infoDark"'},{value:'"warningLight"'},{value:'"warningDark"'},{value:'"criticalLight"'},{value:'"criticalDark"'},{value:'"statusOnline"'},{value:'"statusOffline"'},{value:'"primaryInverted"'},{value:'"secondaryInverted"'},{value:'"tertiaryInverted"'}]}},radius:{defaultValue:{value:"16"},description:"",name:"radius",required:!1,type:{name:"enum",value:[{value:'"0"'},{value:'"2"'},{value:'"4"'},{value:'"8"'},{value:'"16"'},{value:'"300"'},{value:"ResponsiveProp<BoxRadius>"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"article"'},{value:'"caption"'},{value:'"div"'},{value:'"fieldset"'},{value:'"figcaption"'},{value:'"figure"'},{value:'"footer"'},{value:'"header"'},{value:'"li"'},{value:'"main"'},{value:'"ol"'},{value:'"p"'},{value:'"section"'},{value:'"span"'},{value:'"table"'},{value:'"tbody"'},{value:'"td"'},{value:'"tfoot"'},{value:'"th"'},{value:'"thead"'},{value:'"tr"'},{value:'"ul"'}]}},padding:{defaultValue:{value:"24"},description:"",name:"padding",required:!1,type:{name:"enum",value:[{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:'"0"'},{value:'"1"'},{value:'"2"'},{value:'"4"'},{value:'"6"'},{value:'"8"'},{value:'"12"'},{value:'"16"'},{value:'"20"'},{value:"[BoxPadding, BoxPadding]"},{value:"[BoxPadding, BoxPadding, BoxPadding]"},{value:"[BoxPadding, BoxPadding, BoxPadding, BoxPadding]"},{value:"ResponsiveProp<ShortHand<BoxPadding>>"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLElement | null) => void"},{value:"RefObject<HTMLElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const K={title:"components/Box",component:r,argTypes:{radius:{description:j},padding:{description:V}}},e=()=>a.jsx(r,{background:"positiveLight",children:a.jsxs(m,{gap:"16",direction:"column",children:[a.jsx(c,{tag:"h3",variant:"medium",children:"Heading"}),a.jsx(b,{accent:"positive",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed metus nisi, ornare sit amet elit ut, porttitor commodo ipsum. Aliquam vel est quis erat sagittis posuere et vitae eros"})]})});e.storyName="Box";const o={parameters:{chromatic:{disableSnapshot:!0}},args:{background:void 0,radius:void 0,padding:void 0,children:a.jsxs(m,{gap:"16",direction:"column",children:[a.jsx(c,{variant:"large",tag:"h3",children:"Heading"}),a.jsx(b,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed metus nisi, ornare sit amet elit ut, porttitor commodo ipsum. Aliquam vel est quis erat sagittis posuere et vitae eros"})]}),dataset:{qaid:"box"}},argTypes:{children:{control:!1},dataset:{control:"object"}}};var d,s,t;e.parameters={...e.parameters,docs:{...(d=e.parameters)==null?void 0:d.docs,source:{originalSource:`() => <Box background="positiveLight">
-        <LayoutFlex gap="16" direction="column">
-            <Heading tag="h3" variant="medium">
-                Heading
-            </Heading>
-            <Text accent="positive">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed metus nisi, ornare sit
-                amet elit ut, porttitor commodo ipsum. Aliquam vel est quis erat sagittis posuere et
-                vitae eros
-            </Text>
-        </LayoutFlex>
-    </Box>`,...(t=(s=e.parameters)==null?void 0:s.docs)==null?void 0:t.source}}};var n,l,x;o.parameters={...o.parameters,docs:{...(n=o.parameters)==null?void 0:n.docs,source:{originalSource:`{
-  parameters: {
-    chromatic: {
-      disableSnapshot: true
-    }
-  },
-  args: {
-    background: undefined,
-    radius: undefined,
-    padding: undefined,
-    children: <LayoutFlex gap="16" direction="column">
-                <Heading variant="large" tag="h3">
-                    Heading
-                </Heading>
-                <Text>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed metus nisi, ornare
-                    sit amet elit ut, porttitor commodo ipsum. Aliquam vel est quis erat sagittis
-                    posuere et vitae eros
-                </Text>
-            </LayoutFlex>,
-    dataset: {
-      qaid: 'box'
-    }
-  },
-  argTypes: {
-    children: {
-      control: false
-    },
-    dataset: {
-      control: 'object'
-    }
-  }
-}`,...(x=(l=o.parameters)==null?void 0:l.docs)==null?void 0:x.source}}};const $=["Base","Playground"];export{e as Base,o as Playground,$ as __namedExportsOrder,K as default};