@wallarm-org/claude-design 0.0.0-stage → 4.9.0

package/dist/project/components/Toast/preview.html

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Messaging" height=480 -->
+<!doctype html><html><head><meta charset="utf-8"></head><body><div id="preview"></div><script src="./stories.js"></script><script>window.WallarmPreview.mount(document.getElementById('preview'));</script></body></html>

package/dist/project/components/Toast/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,n){let a,r;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var o,l,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,p=(e,t,n,a)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let r of d(t))m.call(e,r)||r===n||c(e,r,{get:()=>t[r],enumerable:!(a=s(t,r))||a.enumerable});return e},h={},f={$dispatcherGuard:()=>R,$makeReadOnly:()=>$,$reset:()=>T,$structuralCheck:()=>M,c:()=>C,clearRenderCounterRegistry:()=>O,renderCounterRegistry:()=>x,useRenderCounter:()=>A};for(var y in f)c(h,y,{get:f[y],enumerable:!0});e.exports=p(c({},"__esModule",{value:!0}),h);var w=(r=null!=(a=n("C"))?i(u(a)):{},p(a&&a.__esModule?r:c(r,"default",{value:a,enumerable:!0}),a)),{useRef:g,useEffect:v,isValidElement:b}=w,_=null!=(o=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:w.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,S=Symbol.for("react.memo_cache_sentinel"),C="function"==typeof(null==(l=w.__COMPILER_RUNTIME)?void 0:l.c)?w.__COMPILER_RUNTIME.c:function(e){return w.useMemo(()=>{let t=Array(e);for(let n=0;n<e;n++)t[n]=S;return t[S]=!0,t},[])},k={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{k[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var E=null;function N(e){return _.ReactCurrentDispatcher.current=e,_.ReactCurrentDispatcher.current}k.useMemoCache=e=>{if(null!=E)return E.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var D=[];function R(e){let t=_.ReactCurrentDispatcher.current;if(0===e){if(D.push(t),1===D.length&&(E=t),t===k)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");N(k)}else if(1===e){let e=D.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===D.length&&(E=null),N(e)}else if(2===e)D.push(t),N(E);else if(3===e){let e=D.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");N(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function T(e){for(let t=0;t<e.length;t++)e[t]=S}function $(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var x=new Map;function O(){for(let e of x.values())e.forEach(e=>{e.count=0})}function A(e){let t=g(null);null!=t.current&&(t.current.count+=1),v(()=>{if(null==t.current){let n,a={count:0};null==(n=x.get(e))&&(n=new Set,x.set(e,n)),n.add(a),t.current=a}return()=>{var n;let a;null!==t.current&&(n=t.current,null!=(a=x.get(e))&&a.delete(n))}})}var W=new Set;function M(e,t,n,a,r,o){function l(e,t,l,i){let c=`${a}:${o} [${r}] ${n}${l} changed from ${e} to ${t} at depth ${i}`;W.has(c)||(W.add(c),console.error(c))}!function e(t,n,a,r){if(!(r>2)){if(t!==n)if(typeof t!=typeof n)l(`type ${typeof t}`,`type ${typeof n}`,a,r);else if("object"==typeof t){let o=Array.isArray(t),i=Array.isArray(n);if(null===t&&null!==n)l("null",`type ${typeof n}`,a,r);else if(null===n)l(`type ${typeof t}`,"null",a,r);else if(t instanceof Map)if(n instanceof Map)if(t.size!==n.size)l(`Map instance with size ${t.size}`,`Map instance with size ${n.size}`,a,r);else for(let[o,i]of t)n.has(o)?e(i,n.get(o),`${a}.get(${o})`,r+1):l(`Map instance with key ${o}`,`Map instance without key ${o}`,a,r);else l("Map instance","other value",a,r);else if(n instanceof Map)l("other value","Map instance",a,r);else if(t instanceof Set)if(n instanceof Set)if(t.size!==n.size)l(`Set instance with size ${t.size}`,`Set instance with size ${n.size}`,a,r);else for(let e of n)t.has(e)||l(`Set instance without element ${e}`,`Set instance with element ${e}`,a,r);else l("Set instance","other value",a,r);else if(n instanceof Set)l("other value","Set instance",a,r);else if(o||i)if(o!==i)l(`type ${o?"array":"object"}`,`type ${i?"array":"object"}`,a,r);else if(t.length!==n.length)l(`array with length ${t.length}`,`array with length ${n.length}`,a,r);else for(let o=0;o<t.length;o++)e(t[o],n[o],`${a}[${o}]`,r+1);else if(b(t)||b(n))b(t)!==b(n)?l(`type ${b(t)?"React element":"object"}`,`type ${b(n)?"React element":"object"}`,a,r):t.type!==n.type?l(`React element of type ${t.type}`,`React element of type ${n.type}`,a,r):e(t.props,n.props,`[props of ${a}]`,r+1);else{for(let e in n)e in t||l(`object without key ${e}`,`object with key ${e}`,a,r);for(let o in t)o in n?e(t[o],n[o],`${a}.${o}`,r+1):l(`object with key ${o}`,`object without key ${o}`,a,r)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(n)?isNaN(t)!==isNaN(n)&&l(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(n)?"NaN":"non-NaN value"}`,a,r):t!==n&&l(t,n,a,r)}}}(e,t,"",0)}},p(e,t,n){let a=new WeakMap,r=new WeakMap;function o(e,t,n){let o=t,l=n;if("object"==typeof o&&null!==o&&"$$typeof"in o&&o.$$typeof===Symbol.for("react.context")&&"Provider"in o&&(o=o.Provider),"function"==typeof o&&null!=l.ref&&!o.prototype?.isReactComponent){let t=o,n=a.get(e);n||(n=new WeakMap,a.set(e,n));let r=n.get(t);r||((r=e.forwardRef((e,n)=>t({...e,ref:n}))).displayName=t.displayName??t.name,n.set(t,r)),o=r}if("string"==typeof o&&"boolean"==typeof l.inert&&((l={...l}).inert?l.inert="":delete l.inert),"string"==typeof o)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in l&&(l={...l,[t]:l[e]},delete l[e]);return"string"==typeof o&&null!=l.ref&&(o=function(e,t){let n=r.get(e);n||(n=new Map,r.set(e,n));let a=n.get(t);if(a)return a;let o=e.forwardRef((n,a)=>{let r=e.useRef(null);if(!r.current||r.current.original!==a){let e;r.current={original:a,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof a){let n=a(t);e="function"==typeof n?n:void 0}else a&&(a.current=t)}}}return e.createElement(t,{...n,ref:r.current.callback})});return o.displayName=`CanvasHost(${t})`,n.set(t,o),o}(e,o)),{type:o,props:l}}function l(e){let t=(t,n,a)=>{let r=o(e,t,n??{});return e.createElement(r.type,void 0===a?r.props:{...r.props,key:a})};return{jsx:t,jsxs:(t,n,a)=>{let r=o(e,t,n??{}),{children:l,...i}=r.props;return e.createElement(r.type,void 0===a?i:{...i,key:a},...Array.isArray(l)?l:[l])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,n,...a)=>{let r=o(e,t,n??{});return e.createElement(r.type,r.props,...a)},cloneElement:(t,n,...a)=>{let r=e.cloneElement(t,n??void 0,...a),l=r.ref,i=o(e,r.type,{...r.props,ref:l});return i.type===r.type&&"string"!=typeof r.type?r:e.createElement(i.type,{...i.props,key:r.key})}}}n.d(t,{MA:()=>l,YJ:()=>i})},C(e,t,n){n.r(t);let a=(0,n("p").YJ)(window.React),{Children:r,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:m,cloneElement:p,createContext:h,createElement:f,createFactory:y,createRef:w,forwardRef:g,isValidElement:v,lazy:b,memo:_,startTransition:S,unstable_act:C,useCallback:k,useContext:E,useDebugValue:N,useDeferredValue:D,useEffect:R,useId:T,useImperativeHandle:$,useInsertionEffect:x,useLayoutEffect:O,useMemo:A,useReducer:W,useRef:M,useState:I,useSyncExternalStore:j,useTransition:L,version:P,use:z}=a;n.d(t,{},{Children:r,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:m,cloneElement:p,createContext:h,createElement:f,createFactory:y,createRef:w,default:a,forwardRef:g,isValidElement:v,lazy:b,memo:_,startTransition:S,unstable_act:C,use:z,useCallback:k,useContext:E,useDebugValue:N,useDeferredValue:D,useEffect:R,useId:T,useImperativeHandle:$,useInsertionEffect:x,useLayoutEffect:O,useMemo:A,useReducer:W,useRef:M,useState:I,useSyncExternalStore:j,useTransition:L,version:P})}},t={};function n(a){var r=t[a];if(void 0!==r)return r.exports;var o=t[a]={exports:{}};return e[a](o,o.exports,n),o.exports}n.d=(e,t,a)=>{var r=(t,a)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,[a]:t[r]})};r(t,"get"),r(a,"value")},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:a,Fragment:r}=(0,n("p").MA)(window.React);var o=n("vD"),l=n("C");let i=window.WallarmDS.Icons.Activity,c=window.WallarmDS.Icons.CircleCheck,s=window.WallarmDS.Icons.Info,d=window.WallarmDS.Icons.LoaderCircle,u=window.WallarmDS.Icons.OctagonAlert,m=window.WallarmDS.Icons.TriangleAlert,p=window.WallarmDS.Button,h=window.WallarmDS.Dialog,f=window.WallarmDS.DialogBody,y=window.WallarmDS.DialogContent,w=window.WallarmDS.DialogHeader,g=window.WallarmDS.DialogTitle,v=window.WallarmDS.DialogTrigger,b=window.WallarmDS.Drawer,_=window.WallarmDS.DrawerBody,S=window.WallarmDS.DrawerContent,C=window.WallarmDS.DrawerHeader,k=window.WallarmDS.DrawerTitle,E=window.WallarmDS.DrawerTrigger,N=window.WallarmDS.HStack,D=window.WallarmDS.VStack,R=window.WallarmDS.ToastActions,T=window.WallarmDS.Toaster,$=window.WallarmDS.useToast,x=(function(e=()=>{}){let t=(...t)=>e(...t);for(let n of["mockName","mockReturnValue","mockResolvedValue","mockImplementation"])t[n]=a=>("mockImplementation"===n?e=a:"mockReturnValue"===n?e=()=>a:"mockResolvedValue"===n&&(e=()=>Promise.resolve(a)),t);return t})().mockName("onToastAction"),O={title:"Messaging/Toast",component:T,parameters:{layout:"centered",docs:{description:{component:"A transient notification fired from `useToast()` — you never place one in the tree, and a single `Toaster` at the app root owns placement, stacking and the timer. Because it disappears, nothing may live only here: reach for a `Dialog` when the reader has to decide, `Banner` for standing account state, and `Alert` for a message that belongs to a region. Actions on a toast stay optional for the same reason."}}}},A=Number.MAX_SAFE_INTEGER,W=()=>{let n,a,r,l,i,h,f,y,w,g,v,b,_,S,C,k,E=(0,o.c)(20),R=$();E[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(c,{}),E[0]=n):n=E[0],E[1]===Symbol.for("react.memo_cache_sentinel")?(a={label:"Success",icon:n,type:"success",title:"Success!",description:"Your changes have been saved successfully."},E[1]=a):a=E[1],E[2]===Symbol.for("react.memo_cache_sentinel")?(r=e(u,{}),E[2]=r):r=E[2],E[3]===Symbol.for("react.memo_cache_sentinel")?(l={label:"Error",icon:r,type:"error",title:"Error occurred",description:"Something went wrong. Please try again."},E[3]=l):l=E[3],E[4]===Symbol.for("react.memo_cache_sentinel")?(i=e(m,{}),E[4]=i):i=E[4],E[5]===Symbol.for("react.memo_cache_sentinel")?(h={label:"Warning",icon:i,type:"warning",title:"Warning",description:"This action cannot be undone."},E[5]=h):h=E[5],E[6]===Symbol.for("react.memo_cache_sentinel")?(f=e(s,{}),E[6]=f):f=E[6],E[7]===Symbol.for("react.memo_cache_sentinel")?(y={label:"Info",icon:f,type:"info",title:"New update available",description:"Version 2.1.0 is now available for download."},E[7]=y):y=E[7],E[8]===Symbol.for("react.memo_cache_sentinel")?(w=e(d,{}),E[8]=w):w=E[8],E[9]===Symbol.for("react.memo_cache_sentinel")?(g={label:"Loading",icon:w,type:"loading",title:"Loading...",description:"Please wait while we process your request."},E[9]=g):g=E[9],E[10]===Symbol.for("react.memo_cache_sentinel")?(v=[a,l,h,y,g,{label:"Default",icon:null,type:"default",title:"Default toast",description:"This is a default toast without an icon."}],E[10]=v):v=E[10];let T=v;return E[11]===Symbol.for("react.memo_cache_sentinel")?(b=e("p",{className:"sb-annotation",children:"timed"}),E[11]=b):b=E[11],E[12]!==R?(_=t(D,{gap:4,align:"start",children:[b,e(N,{gap:8,wrap:"wrap",children:T.map(e=>{let{label:n,icon:a,type:r,title:o,description:l}=e;return t(p,{variant:"outline",color:"neutral",onClick:()=>R.create({title:o,variant:"extended",description:l,type:r}),children:[a,n]},n)})})]}),E[12]=R,E[13]=_):_=E[13],E[14]===Symbol.for("react.memo_cache_sentinel")?(S=e("p",{className:"sb-annotation",children:"static — no timer"}),E[14]=S):S=E[14],E[15]!==R?(C=t(D,{gap:4,align:"start",children:[S,e(N,{gap:8,wrap:"wrap",children:T.map(e=>{let{label:n,icon:a,type:r,title:o,description:l}=e;return t(p,{variant:"secondary",color:"neutral",onClick:()=>R.create({title:o,variant:"extended",description:l,type:r,duration:A}),children:[a,n]},n)})})]}),E[15]=R,E[16]=C):C=E[16],E[17]!==_||E[18]!==C?(k=t(D,{gap:16,align:"start",children:[_,C]}),E[17]=_,E[18]=C,E[19]=k):k=E[19],k},M=[{name:"Basic",story:()=>{let t,n=(0,o.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(W,{}),n[0]=t):t=n[0],t},meta:O},{name:"WithNestedOverlays",story:()=>{let n,a,r,l,i,c,s,d,u=(0,o.c)(13),m=$();u[0]!==m?(n=()=>m.create({title:"Saved",description:"This toast must render above every open overlay.",type:"success",duration:A}),u[0]=m,u[1]=n):n=u[1];let N=n;return u[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(E,{asChild:!0,children:e(p,{variant:"outline",color:"neutral",children:"Open drawer"})}),u[2]=a):a=u[2],u[3]===Symbol.for("react.memo_cache_sentinel")?(r=e(C,{children:e(k,{children:"[Level 1] Drawer"})}),u[3]=r):r=u[3],u[4]!==N?(l=e(p,{variant:"outline",color:"neutral",onClick:N,children:"Show toast from drawer"}),u[4]=N,u[5]=l):l=u[5],u[6]===Symbol.for("react.memo_cache_sentinel")?(i=e(v,{asChild:!0,children:e(p,{variant:"ghost",color:"neutral",children:"Open nested dialog"})}),u[6]=i):i=u[6],u[7]===Symbol.for("react.memo_cache_sentinel")?(c=e(w,{children:e(g,{children:"[Level 2] Dialog"})}),u[7]=c):c=u[7],u[8]!==N?(s=t(h,{children:[i,t(y,{children:[c,e(f,{children:e(p,{variant:"outline",color:"neutral",onClick:N,children:"Show toast from nested dialog"})})]})]}),u[8]=N,u[9]=s):s=u[9],u[10]!==l||u[11]!==s?(d=t(b,{"data-testid":"overlay-drawer",children:[a,t(S,{children:[r,e(_,{children:t(D,{gap:12,align:"start",children:[l,s]})})]})]}),u[10]=l,u[11]=s,u[12]=d):d=u[12],d},meta:O},{name:"UpdateLoadingToSuccess",story:()=>{let n,a,r,i,c,s,d,u,m,h,f,y=(0,o.c)(23),w=$(),g=(0,l.useRef)(void 0);y[0]!==w?(n=e=>{g.current=w.create({title:"Loading",description:"Loading ...",type:"loading",variant:"extended",duration:e})},y[0]=w,y[1]=n):n=y[1];let v=n;y[2]!==w?(a=e=>{g.current&&w.update({id:g.current,title:"Success",description:"Success!",type:"success",variant:"extended",duration:e})},y[2]=w,y[3]=a):a=y[3];let b=a;return y[4]===Symbol.for("react.memo_cache_sentinel")?(r=e("p",{className:"sb-annotation",children:"timed"}),y[4]=r):r=y[4],y[5]!==v?(i=e(p,{variant:"outline",color:"neutral",onClick:()=>v(),children:"Create loading toast"}),y[5]=v,y[6]=i):i=y[6],y[7]!==b?(c=e(p,{variant:"outline",color:"neutral",onClick:()=>b(),children:"Update to success"}),y[7]=b,y[8]=c):c=y[8],y[9]!==i||y[10]!==c?(s=t(D,{gap:4,align:"start",children:[r,t(N,{gap:8,wrap:"wrap",children:[i,c]})]}),y[9]=i,y[10]=c,y[11]=s):s=y[11],y[12]===Symbol.for("react.memo_cache_sentinel")?(d=e("p",{className:"sb-annotation",children:"static — no timer"}),y[12]=d):d=y[12],y[13]!==v?(u=e(p,{variant:"secondary",color:"neutral",onClick:()=>v(A),children:"Create loading toast"}),y[13]=v,y[14]=u):u=y[14],y[15]!==b?(m=e(p,{variant:"secondary",color:"neutral",onClick:()=>b(A),children:"Update to success"}),y[15]=b,y[16]=m):m=y[16],y[17]!==u||y[18]!==m?(h=t(D,{gap:4,align:"start",children:[d,t(N,{gap:8,wrap:"wrap",children:[u,m]})]}),y[17]=u,y[18]=m,y[19]=h):h=y[19],y[20]!==s||y[21]!==h?(f=t(D,{gap:16,align:"start",children:[s,h]}),y[20]=s,y[21]=h,y[22]=f):f=y[22],f},meta:O},{name:"DescriptionKeepsExtended",story:()=>{let n,a,r,l,i,c,s,d,u,m,h,f=(0,o.c)(23),y=$();f[0]!==y?(n=e=>y.create({title:"Failed to mark as True Positive",description:"resolved vector count must not exceed 500000",type:"error",variant:"simple",duration:e}),f[0]=y,f[1]=n):n=f[1];let w=n;f[2]!==y?(a=e=>y.create({title:"Marked 2 attacks",type:"success",variant:"simple",duration:e}),f[2]=y,f[3]=a):a=f[3];let g=a;return f[4]===Symbol.for("react.memo_cache_sentinel")?(r=e("p",{className:"sb-annotation",children:"timed"}),f[4]=r):r=f[4],f[5]!==w?(l=e(p,{variant:"outline",color:"neutral",onClick:()=>w(),children:"Simple with description"}),f[5]=w,f[6]=l):l=f[6],f[7]!==g?(i=e(p,{variant:"outline",color:"neutral",onClick:()=>g(),children:"Simple without description"}),f[7]=g,f[8]=i):i=f[8],f[9]!==l||f[10]!==i?(c=t(D,{gap:4,align:"start",children:[r,t(N,{gap:8,wrap:"wrap",children:[l,i]})]}),f[9]=l,f[10]=i,f[11]=c):c=f[11],f[12]===Symbol.for("react.memo_cache_sentinel")?(s=e("p",{className:"sb-annotation",children:"static — no timer"}),f[12]=s):s=f[12],f[13]!==w?(d=e(p,{variant:"secondary",color:"neutral",onClick:()=>w(A),children:"Simple with description"}),f[13]=w,f[14]=d):d=f[14],f[15]!==g?(u=e(p,{variant:"secondary",color:"neutral",onClick:()=>g(A),children:"Simple without description"}),f[15]=g,f[16]=u):u=f[16],f[17]!==d||f[18]!==u?(m=t(D,{gap:4,align:"start",children:[s,t(N,{gap:8,wrap:"wrap",children:[d,u]})]}),f[17]=d,f[18]=u,f[19]=m):m=f[19],f[20]!==c||f[21]!==m?(h=t(D,{gap:16,align:"start",children:[c,m]}),f[20]=c,f[21]=m,f[22]=h):h=f[22],h},meta:O},{name:"SimpleWithActions",story:()=>{let n,a,r,l,i,c,s,d,u,m,h,f=(0,o.c)(23),y=$();f[0]!==y?(n=t=>y.create({title:"Message sent",type:"success",variant:"simple",duration:t,actions:e(R,{children:e(p,{variant:"secondary",size:"small",color:"neutral-alt",onClick:x,children:"Undo"})})}),f[0]=y,f[1]=n):n=f[1];let w=n;f[2]!==y?(a=n=>y.create({title:"Connection restored",type:"info",variant:"simple",duration:n,actions:t(R,{children:[e(p,{variant:"secondary",size:"small",color:"neutral-alt",onClick:x,children:"View"}),e(p,{variant:"secondary",size:"small",color:"neutral-alt",onClick:x,children:"Dismiss"})]})}),f[2]=y,f[3]=a):a=f[3];let g=a;return f[4]===Symbol.for("react.memo_cache_sentinel")?(r=e("p",{className:"sb-annotation",children:"timed"}),f[4]=r):r=f[4],f[5]!==w?(l=e(p,{variant:"outline",color:"neutral",onClick:()=>w(),children:"Simple Toast with Action"}),f[5]=w,f[6]=l):l=f[6],f[7]!==g?(i=e(p,{variant:"outline",color:"neutral",onClick:()=>g(),children:"Simple Toast with Two Actions"}),f[7]=g,f[8]=i):i=f[8],f[9]!==l||f[10]!==i?(c=t(D,{gap:4,align:"start",children:[r,t(N,{gap:8,wrap:"wrap",children:[l,i]})]}),f[9]=l,f[10]=i,f[11]=c):c=f[11],f[12]===Symbol.for("react.memo_cache_sentinel")?(s=e("p",{className:"sb-annotation",children:"static — no timer"}),f[12]=s):s=f[12],f[13]!==w?(d=e(p,{variant:"secondary",color:"neutral",onClick:()=>w(A),children:"Simple Toast with Action"}),f[13]=w,f[14]=d):d=f[14],f[15]!==g?(u=e(p,{variant:"secondary",color:"neutral",onClick:()=>g(A),children:"Simple Toast with Two Actions"}),f[15]=g,f[16]=u):u=f[16],f[17]!==d||f[18]!==u?(m=t(D,{gap:4,align:"start",children:[s,t(N,{gap:8,wrap:"wrap",children:[d,u]})]}),f[17]=d,f[18]=u,f[19]=m):m=f[19],f[20]!==c||f[21]!==m?(h=t(D,{gap:16,align:"start",children:[c,m]}),f[20]=c,f[21]=m,f[22]=h):h=f[22],h},meta:O},{name:"ExtendedWithActions",story:()=>{let n,a,r,l,i,c,s,d,u,m,h,f=(0,o.c)(23),y=$();f[0]!==y?(n=t=>y.create({title:"Extended Toast",description:"This is an extended toast with default layout.",type:"success",variant:"extended",duration:t,actions:e(R,{children:e(p,{variant:"secondary",size:"small",color:"neutral-alt",onClick:x,children:"Action"})})}),f[0]=y,f[1]=n):n=f[1];let w=n;f[2]!==y?(a=n=>y.create({title:"File processed",description:"Your file has been processed successfully.",type:"info",variant:"extended",duration:n,actions:t(R,{children:[e(p,{variant:"secondary",size:"small",color:"neutral-alt",onClick:x,children:"View"}),e(p,{variant:"secondary",size:"small",color:"neutral-alt",onClick:x,children:"Download"})]})}),f[2]=y,f[3]=a):a=f[3];let g=a;return f[4]===Symbol.for("react.memo_cache_sentinel")?(r=e("p",{className:"sb-annotation",children:"timed"}),f[4]=r):r=f[4],f[5]!==w?(l=e(p,{variant:"outline",color:"neutral",onClick:()=>w(),children:"Extended Toast with Action"}),f[5]=w,f[6]=l):l=f[6],f[7]!==g?(i=e(p,{variant:"outline",color:"neutral",onClick:()=>g(),children:"Extended Toast with Two Actions"}),f[7]=g,f[8]=i):i=f[8],f[9]!==l||f[10]!==i?(c=t(D,{gap:4,align:"start",children:[r,t(N,{gap:8,wrap:"wrap",children:[l,i]})]}),f[9]=l,f[10]=i,f[11]=c):c=f[11],f[12]===Symbol.for("react.memo_cache_sentinel")?(s=e("p",{className:"sb-annotation",children:"static — no timer"}),f[12]=s):s=f[12],f[13]!==w?(d=e(p,{variant:"secondary",color:"neutral",onClick:()=>w(A),children:"Extended Toast with Action"}),f[13]=w,f[14]=d):d=f[14],f[15]!==g?(u=e(p,{variant:"secondary",color:"neutral",onClick:()=>g(A),children:"Extended Toast with Two Actions"}),f[15]=g,f[16]=u):u=f[16],f[17]!==d||f[18]!==u?(m=t(D,{gap:4,align:"start",children:[s,t(N,{gap:8,wrap:"wrap",children:[d,u]})]}),f[17]=d,f[18]=u,f[19]=m):m=f[19],f[20]!==c||f[21]!==m?(h=t(D,{gap:16,align:"start",children:[c,m]}),f[20]=c,f[21]=m,f[22]=h):h=f[22],h},meta:O},{name:"LongText",story:()=>{let n,a,r,l,i,c,s,d,u,m,h,f,y=(0,o.c)(24),w=$();y[0]===Symbol.for("react.memo_cache_sentinel")?(n="This is a very very very long title that will be truncated after a certain number of lines".repeat(4),y[0]=n):n=y[0];let g=n,v="This is a very long description that will be truncated after a certain number of lines. Hover over the description to see the full text in a tooltip. "+"This allows for better space management while still providing access to all the information.".repeat(2);y[1]!==w?(a=e=>w.create({title:"This is a very very very long title that will be truncated after a certain number of lines",variant:"simple",type:"info",duration:e}),y[1]=w,y[2]=a):a=y[2];let b=a;y[3]!==w?(r=e=>w.create({title:g,variant:"extended",description:v,type:"info",duration:e}),y[3]=w,y[4]=r):r=y[4];let _=r;return y[5]===Symbol.for("react.memo_cache_sentinel")?(l=e("p",{className:"sb-annotation",children:"timed"}),y[5]=l):l=y[5],y[6]!==b?(i=e(p,{variant:"outline",color:"neutral",onClick:()=>b(),children:"Simple with long title"}),y[6]=b,y[7]=i):i=y[7],y[8]!==_?(c=e(p,{variant:"outline",color:"neutral",onClick:()=>_(),children:"Extended with long text"}),y[8]=_,y[9]=c):c=y[9],y[10]!==i||y[11]!==c?(s=t(D,{gap:4,align:"start",children:[l,t(N,{gap:8,wrap:"wrap",children:[i,c]})]}),y[10]=i,y[11]=c,y[12]=s):s=y[12],y[13]===Symbol.for("react.memo_cache_sentinel")?(d=e("p",{className:"sb-annotation",children:"static — no timer"}),y[13]=d):d=y[13],y[14]!==b?(u=e(p,{variant:"secondary",color:"neutral",onClick:()=>b(A),children:"Simple with long title"}),y[14]=b,y[15]=u):u=y[15],y[16]!==_?(m=e(p,{variant:"secondary",color:"neutral",onClick:()=>_(A),children:"Extended with long text"}),y[16]=_,y[17]=m):m=y[17],y[18]!==u||y[19]!==m?(h=t(D,{gap:4,align:"start",children:[d,t(N,{gap:8,wrap:"wrap",children:[u,m]})]}),y[18]=u,y[19]=m,y[20]=h):h=y[20],y[21]!==h||y[22]!==s?(f=t(D,{gap:16,align:"start",children:[s,h]}),y[21]=h,y[22]=s,y[23]=f):f=y[23],f},meta:O},{name:"WithoutCloseButton",story:()=>{let n,a,r,l,i,c,s=(0,o.c)(11),d=$();s[0]!==d?(n=e=>d.create({title:"Non-closable toast",variant:"extended",description:"This toast cannot be closed manually.",type:"info",closable:!1,duration:e}),s[0]=d,s[1]=n):n=s[1];let u=n;return s[2]===Symbol.for("react.memo_cache_sentinel")?(a=e("p",{className:"sb-annotation",children:"timed"}),s[2]=a):a=s[2],s[3]!==u?(r=t(D,{gap:4,align:"start",children:[a,e(N,{gap:8,wrap:"wrap",children:e(p,{variant:"outline",color:"neutral",onClick:()=>u(),children:"Non-closable Toast"})})]}),s[3]=u,s[4]=r):r=s[4],s[5]===Symbol.for("react.memo_cache_sentinel")?(l=e("p",{className:"sb-annotation",children:"static — no timer"}),s[5]=l):l=s[5],s[6]!==u?(i=t(D,{gap:4,align:"start",children:[l,e(N,{gap:8,wrap:"wrap",children:e(p,{variant:"secondary",color:"neutral",onClick:()=>u(A),children:"Non-closable Toast"})})]}),s[6]=u,s[7]=i):i=s[7],s[8]!==r||s[9]!==i?(c=t(D,{gap:16,align:"start",children:[r,i]}),s[8]=r,s[9]=i,s[10]=c):c=s[10],c},meta:O},{name:"CustomIcon",story:()=>{let n,a,r,l,c,s,d,u,m,h,f,y=(0,o.c)(23),w=$();y[0]!==w?(n=t=>w.create({title:"Custom icon toast",variant:"extended",description:"This toast uses a custom icon that overrides the type-based icon.",type:"success",icon:e(i,{size:"lg",className:"text-purple-500"}),duration:t}),y[0]=w,y[1]=n):n=y[1];let g=n;y[2]!==w?(a=t=>w.create({title:"Custom icon with action",variant:"extended",description:"You can use any icon component as a custom icon.",type:"info",icon:e(i,{}),duration:t}),y[2]=w,y[3]=a):a=y[3];let v=a;return y[4]===Symbol.for("react.memo_cache_sentinel")?(r=e("p",{className:"sb-annotation",children:"timed"}),y[4]=r):r=y[4],y[5]!==g?(l=e(p,{variant:"outline",color:"neutral",onClick:()=>g(),children:"Custom Icon with own color"}),y[5]=g,y[6]=l):l=y[6],y[7]!==v?(c=e(p,{variant:"outline",color:"neutral",onClick:()=>v(),children:"Custom Icon without color"}),y[7]=v,y[8]=c):c=y[8],y[9]!==l||y[10]!==c?(s=t(D,{gap:4,align:"start",children:[r,t(N,{gap:8,wrap:"wrap",children:[l,c]})]}),y[9]=l,y[10]=c,y[11]=s):s=y[11],y[12]===Symbol.for("react.memo_cache_sentinel")?(d=e("p",{className:"sb-annotation",children:"static — no timer"}),y[12]=d):d=y[12],y[13]!==g?(u=e(p,{variant:"secondary",color:"neutral",onClick:()=>g(A),children:"Custom Icon with own color"}),y[13]=g,y[14]=u):u=y[14],y[15]!==v?(m=e(p,{variant:"secondary",color:"neutral",onClick:()=>v(A),children:"Custom Icon without color"}),y[15]=v,y[16]=m):m=y[16],y[17]!==u||y[18]!==m?(h=t(D,{gap:4,align:"start",children:[d,t(N,{gap:8,wrap:"wrap",children:[u,m]})]}),y[17]=u,y[18]=m,y[19]=h):h=y[19],y[20]!==s||y[21]!==h?(f=t(D,{gap:16,align:"start",children:[s,h]}),y[20]=s,y[21]=h,y[22]=f):f=y[22],f},meta:O},{name:"CustomIconColors",story:()=>{let t,n,a,r,l,c=(0,o.c)(6),s=$();c[0]===Symbol.for("react.memo_cache_sentinel")?(t={name:"default",label:"Default",type:"default"},c[0]=t):t=c[0],c[1]===Symbol.for("react.memo_cache_sentinel")?(n={name:"loading",label:"Loading",type:"loading"},c[1]=n):n=c[1],c[2]===Symbol.for("react.memo_cache_sentinel")?(a={name:"info",label:"Info",type:"info"},c[2]=a):a=c[2],c[3]===Symbol.for("react.memo_cache_sentinel")?(r=[t,n,a,{name:"own-color",label:"Own color",type:"success"}],c[3]=r):r=c[3];let d=r;return c[4]!==s?(l=e(N,{gap:8,wrap:"wrap",children:d.map(t=>{let{name:n,label:a,type:r}=t;return e(p,{variant:"outline",color:"neutral","data-testid":`custom-icon-trigger-${n}`,onClick:()=>s.create({id:`custom-icon-${n}`,title:`${a} custom icon`,type:r,duration:A,icon:e(i,{"data-testid":`custom-icon-${n}-svg`,className:"own-color"===n?"text-purple-500":void 0})}),children:a},n)})}),c[4]=s,c[5]=l):l=c[5],l},meta:O}];function I({entry:e}){let{story:t,meta:n}=e,a={...n.args,...t.args},r="function"==typeof t||t.$$typeof?t:t.render||n.render||n.component,o=()=>l.default.createElement(r,a),i={args:a,globals:{theme:"light"},parameters:{...n.parameters,...t.parameters},viewMode:"story"};for(let e of[...n.decorators||[],...t.decorators||[]].reverse()){let t=o;o=()=>e(t,i)}return l.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},l.default.createElement("h2",{className:"text-sm mb-12"},e.name),l.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(l.default.createElement(window.WallarmDS.Root,null,M.map((e,t)=>l.default.createElement(I,{key:t,entry:e})))),t}}})();

package/dist/project/components/ToggleButton/README.md

@@ -0,0 +1,292 @@
+A button that stays pressed — for something the reader flips in place and can see the result of, like pinning a panel or holding a filter on. Reach for `Switch` when it belongs in a settings form, and `SegmentedControl` when one of several options has to win.
+
+## Props as canvas attributes
+
+Use kebab-case attribute names. Pass non-string values through renderVals holes, including booleans. The full emitted API is in `components/index.d.ts`.
+
+| Attribute | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `title` | `string \| undefined` | no | — |  |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `default-value` | `string \| number \| readonly string[] \| undefined` | no | `false` |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `color` | `"brand" \| "neutral"` | no | `brand` |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `type` | `"button" \| "submit" \| "reset" \| undefined` | no | — |  |
+| `disabled` | `boolean \| undefined` | no | `false` |  |
+| `name` | `string \| undefined` | no | — |  |
+| `value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `as-child` | `boolean \| undefined` | no | `false` |  |
+| `size` | `"small" \| "medium" \| "large" \| "inline-edit"` | no | `large` |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+| `loading` | `boolean` | no | `false` |  |
+| `as` | `C \| undefined` | no | — |  |
+| `full-width` | `boolean` | no | — |  |
+| `variant` | `"outline" \| "ghost"` | no | `outline` |  |
+| `active` | `boolean` | no | — |  |
+| `on-toggle` | `((active: boolean, event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) \| undefined` | no | — |  |
+
+## Stories
+
+### Basic
+
+Uncontrolled: the button tracks its own pressed state from `defaultValue`, and `onToggle`
+hands you the next value.
+
+Source: ToggleButton/ToggleButton.stories.tsx#Basic
+
+### VariantsAndColors
+
+`outline` reads as a control that is always there; `ghost` disappears until needed, for
+toolbars. `brand` tints the pressed state, `neutral` keeps it grey for when several toggles sit
+together and colour would shout.
+
+Source: ToggleButton/ToggleButton.stories.tsx#VariantsAndColors
+
+### Sizes
+
+Three heights matching `Button`, so a toggle can sit in a row of them without breaking
+the line.
+
+Source: ToggleButton/ToggleButton.stories.tsx#Sizes
+
+### Disabled
+
+Both states while disabled. A disabled toggle still shows whether it is on, which is the
+point — say elsewhere why it cannot be changed.
+
+Source: ToggleButton/ToggleButton.stories.tsx#Disabled
+
+### Loading
+
+For a toggle whose effect is a request. It keeps the label's footprint and disables itself,
+so the pressed state does not flicker while the answer is in flight.
+
+Source: ToggleButton/ToggleButton.stories.tsx#Loading
+
+### Icons
+
+An icon before or after the label. Pressed state is carried by the whole button, not the
+icon, so don't swap the icon to signal it.
+
+Source: ToggleButton/ToggleButton.stories.tsx#Icons
+
+### IconOnly
+
+The toolbar case: an icon alone squares the button off. `aria-label` is doing all the
+naming here, so it is not optional.
+
+Source: ToggleButton/ToggleButton.stories.tsx#IconOnly
+
+### Controlled
+
+Pass `active` and own the state when something else has to move with it — a panel opening,
+a filter applying. Once `active` is set the button stops tracking itself.
+
+Source: ToggleButton/ToggleButton.stories.tsx#Controlled
+
+## Story sources
+
+### ToggleButton/ToggleButton.stories.tsx
+
+```tsx
+import { useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { ChevronLeft, ChevronRight } from '../../icons';
+import { HStack, VStack } from '../Stack';
+import { ToggleButton } from './ToggleButton';
+
+const DESCRIPTION = [
+  'A button that stays pressed — for something the reader flips in place and can see the result of, like pinning a panel or holding a filter on.',
+  'Reach for `Switch` when it belongs in a settings form, and `SegmentedControl` when one of several options has to win.',
+].join(' ');
+
+const meta = {
+  title: 'Actions/ToggleButton',
+  component: ToggleButton,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['outline', 'ghost'],
+    },
+    color: {
+      control: 'select',
+      options: ['brand', 'neutral'],
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+    },
+    active: {
+      control: 'boolean',
+    },
+    loading: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof ToggleButton>;
+
+export default meta;
+
+/**
+ * Uncontrolled: the button tracks its own pressed state from `defaultValue`, and `onToggle`
+ * hands you the next value.
+ */
+export const Basic: StoryFn<typeof meta> = ({ ...args }) => (
+  <ToggleButton {...args} data-testid='toggle-button'>
+    Toggle Me
+  </ToggleButton>
+);
+
+/**
+ * `outline` reads as a control that is always there; `ghost` disappears until needed, for
+ * toolbars. `brand` tints the pressed state, `neutral` keeps it grey for when several toggles sit
+ * together and colour would shout.
+ */
+export const VariantsAndColors: StoryFn<typeof meta> = ({ ...args }) => (
+  <VStack>
+    <span className='sb-annotation'>Brand</span>
+    <HStack>
+      <ToggleButton {...args} variant='outline' color='brand'>
+        Outline
+      </ToggleButton>
+      <ToggleButton {...args} variant='ghost' color='brand'>
+        Ghost
+      </ToggleButton>
+    </HStack>
+
+    <span className='sb-annotation'>Neutral</span>
+    <HStack>
+      <ToggleButton variant='outline' color='neutral'>
+        Outline
+      </ToggleButton>
+      <ToggleButton variant='ghost' color='neutral'>
+        Ghost
+      </ToggleButton>
+    </HStack>
+  </VStack>
+);
+
+/**
+ * Three heights matching `Button`, so a toggle can sit in a row of them without breaking
+ * the line.
+ */
+export const Sizes: StoryFn<typeof meta> = ({ ...args }) => (
+  <HStack align='center'>
+    <ToggleButton {...args} size='small'>
+      Small
+    </ToggleButton>
+    <ToggleButton {...args} size='medium'>
+      Medium
+    </ToggleButton>
+    <ToggleButton {...args} size='large'>
+      Large
+    </ToggleButton>
+  </HStack>
+);
+
+/**
+ * Both states while disabled. A disabled toggle still shows whether it is on, which is the
+ * point — say elsewhere why it cannot be changed.
+ */
+export const Disabled: StoryFn<typeof meta> = ({ ...args }) => (
+  <HStack>
+    <ToggleButton {...args} disabled>
+      Disabled
+    </ToggleButton>
+    <ToggleButton {...args} disabled active>
+      Disabled Active
+    </ToggleButton>
+    <ToggleButton {...args} disabled variant='ghost'>
+      Ghost Disabled
+    </ToggleButton>
+  </HStack>
+);
+
+/**
+ * For a toggle whose effect is a request. It keeps the label's footprint and disables itself,
+ * so the pressed state does not flicker while the answer is in flight.
+ */
+export const Loading: StoryFn<typeof meta> = ({ ...args }) => (
+  <HStack>
+    <ToggleButton {...args} loading>
+      Loading
+    </ToggleButton>
+    <ToggleButton {...args} loading active>
+      Loading Active
+    </ToggleButton>
+    <ToggleButton {...args} loading variant='ghost'>
+      Ghost Loading
+    </ToggleButton>
+  </HStack>
+);
+
+/**
+ * An icon before or after the label. Pressed state is carried by the whole button, not the
+ * icon, so don't swap the icon to signal it.
+ */
+export const Icons: StoryFn<typeof meta> = ({ ...args }) => (
+  <HStack>
+    <ToggleButton {...args}>
+      <ChevronLeft />
+      Left icon
+    </ToggleButton>
+    <ToggleButton {...args}>
+      Right icon
+      <ChevronRight />
+    </ToggleButton>
+    <ToggleButton {...args}>
+      <ChevronLeft />
+      Both icons
+      <ChevronRight />
+    </ToggleButton>
+  </HStack>
+);
+
+/**
+ * The toolbar case: an icon alone squares the button off. `aria-label` is doing all the
+ * naming here, so it is not optional.
+ */
+export const IconOnly: StoryFn<typeof meta> = ({ ...args }) => (
+  <HStack>
+    <ToggleButton {...args} aria-label='Toggle option 1'>
+      <ChevronRight />
+    </ToggleButton>
+    <ToggleButton {...args} loading aria-label='Toggle option 2'>
+      <ChevronRight />
+    </ToggleButton>
+    <ToggleButton {...args} disabled aria-label='Toggle option 3'>
+      <ChevronRight />
+    </ToggleButton>
+  </HStack>
+);
+
+/**
+ * Pass `active` and own the state when something else has to move with it — a panel opening,
+ * a filter applying. Once `active` is set the button stops tracking itself.
+ */
+export const Controlled: StoryFn<typeof meta> = ({ ...args }) => {
+  const [active, setActive] = useState<boolean>(false);
+
+  return (
+    <ToggleButton {...args} aria-label='Toggle option 1' active={active} onToggle={setActive}>
+      Controlled
+    </ToggleButton>
+  );
+};
+```

package/dist/project/components/ToggleButton/preview.html

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Actions" height=480 -->
+<!doctype html><html><head><meta charset="utf-8"></head><body><div id="preview"></div><script src="./stories.js"></script><script>window.WallarmPreview.mount(document.getElementById('preview'));</script></body></html>

package/dist/project/components/ToggleButton/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,n){let r,o;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var l,a,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,f=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty,p=(e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let o of u(t))d.call(e,o)||o===n||c(e,o,{get:()=>t[o],enumerable:!(r=s(t,o))||r.enumerable});return e},m={},h={$dispatcherGuard:()=>O,$makeReadOnly:()=>k,$reset:()=>M,$structuralCheck:()=>I,c:()=>R,clearRenderCounterRegistry:()=>T,renderCounterRegistry:()=>D,useRenderCounter:()=>j};for(var y in h)c(m,y,{get:h[y],enumerable:!0});e.exports=p(c({},"__esModule",{value:!0}),m);var g=(o=null!=(r=n("C"))?i(f(r)):{},p(r&&r.__esModule?o:c(o,"default",{value:r,enumerable:!0}),r)),{useRef:b,useEffect:_,isValidElement:v}=g,w=null!=(l=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,S=Symbol.for("react.memo_cache_sentinel"),R="function"==typeof(null==(a=g.__COMPILER_RUNTIME)?void 0:a.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let n=0;n<e;n++)t[n]=S;return t[S]=!0,t},[])},E={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{E[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var $=null;function N(e){return w.ReactCurrentDispatcher.current=e,w.ReactCurrentDispatcher.current}E.useMemoCache=e=>{if(null!=$)return $.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function O(e){let t=w.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.length&&($=t),t===E)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");N(E)}else if(1===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===C.length&&($=null),N(e)}else if(2===e)C.push(t),N($);else if(3===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");N(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function M(e){for(let t=0;t<e.length;t++)e[t]=S}function k(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var D=new Map;function T(){for(let e of D.values())e.forEach(e=>{e.count=0})}function j(e){let t=b(null);null!=t.current&&(t.current.count+=1),_(()=>{if(null==t.current){let n,r={count:0};null==(n=D.get(e))&&(n=new Set,D.set(e,n)),n.add(r),t.current=r}return()=>{var n;let r;null!==t.current&&(n=t.current,null!=(r=D.get(e))&&r.delete(n))}})}var A=new Set;function I(e,t,n,r,o,l){function a(e,t,a,i){let c=`${r}:${l} [${o}] ${n}${a} changed from ${e} to ${t} at depth ${i}`;A.has(c)||(A.add(c),console.error(c))}!function e(t,n,r,o){if(!(o>2)){if(t!==n)if(typeof t!=typeof n)a(`type ${typeof t}`,`type ${typeof n}`,r,o);else if("object"==typeof t){let l=Array.isArray(t),i=Array.isArray(n);if(null===t&&null!==n)a("null",`type ${typeof n}`,r,o);else if(null===n)a(`type ${typeof t}`,"null",r,o);else if(t instanceof Map)if(n instanceof Map)if(t.size!==n.size)a(`Map instance with size ${t.size}`,`Map instance with size ${n.size}`,r,o);else for(let[l,i]of t)n.has(l)?e(i,n.get(l),`${r}.get(${l})`,o+1):a(`Map instance with key ${l}`,`Map instance without key ${l}`,r,o);else a("Map instance","other value",r,o);else if(n instanceof Map)a("other value","Map instance",r,o);else if(t instanceof Set)if(n instanceof Set)if(t.size!==n.size)a(`Set instance with size ${t.size}`,`Set instance with size ${n.size}`,r,o);else for(let e of n)t.has(e)||a(`Set instance without element ${e}`,`Set instance with element ${e}`,r,o);else a("Set instance","other value",r,o);else if(n instanceof Set)a("other value","Set instance",r,o);else if(l||i)if(l!==i)a(`type ${l?"array":"object"}`,`type ${i?"array":"object"}`,r,o);else if(t.length!==n.length)a(`array with length ${t.length}`,`array with length ${n.length}`,r,o);else for(let l=0;l<t.length;l++)e(t[l],n[l],`${r}[${l}]`,o+1);else if(v(t)||v(n))v(t)!==v(n)?a(`type ${v(t)?"React element":"object"}`,`type ${v(n)?"React element":"object"}`,r,o):t.type!==n.type?a(`React element of type ${t.type}`,`React element of type ${n.type}`,r,o):e(t.props,n.props,`[props of ${r}]`,o+1);else{for(let e in n)e in t||a(`object without key ${e}`,`object with key ${e}`,r,o);for(let l in t)l in n?e(t[l],n[l],`${r}.${l}`,o+1):a(`object with key ${l}`,`object without key ${l}`,r,o)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(n)?isNaN(t)!==isNaN(n)&&a(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(n)?"NaN":"non-NaN value"}`,r,o):t!==n&&a(t,n,r,o)}}}(e,t,"",0)}},p(e,t,n){let r=new WeakMap,o=new WeakMap;function l(e,t,n){let l=t,a=n;if("object"==typeof l&&null!==l&&"$$typeof"in l&&l.$$typeof===Symbol.for("react.context")&&"Provider"in l&&(l=l.Provider),"function"==typeof l&&null!=a.ref&&!l.prototype?.isReactComponent){let t=l,n=r.get(e);n||(n=new WeakMap,r.set(e,n));let o=n.get(t);o||((o=e.forwardRef((e,n)=>t({...e,ref:n}))).displayName=t.displayName??t.name,n.set(t,o)),l=o}if("string"==typeof l&&"boolean"==typeof a.inert&&((a={...a}).inert?a.inert="":delete a.inert),"string"==typeof l)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in a&&(a={...a,[t]:a[e]},delete a[e]);return"string"==typeof l&&null!=a.ref&&(l=function(e,t){let n=o.get(e);n||(n=new Map,o.set(e,n));let r=n.get(t);if(r)return r;let l=e.forwardRef((n,r)=>{let o=e.useRef(null);if(!o.current||o.current.original!==r){let e;o.current={original:r,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof r){let n=r(t);e="function"==typeof n?n:void 0}else r&&(r.current=t)}}}return e.createElement(t,{...n,ref:o.current.callback})});return l.displayName=`CanvasHost(${t})`,n.set(t,l),l}(e,l)),{type:l,props:a}}function a(e){let t=(t,n,r)=>{let o=l(e,t,n??{});return e.createElement(o.type,void 0===r?o.props:{...o.props,key:r})};return{jsx:t,jsxs:(t,n,r)=>{let o=l(e,t,n??{}),{children:a,...i}=o.props;return e.createElement(o.type,void 0===r?i:{...i,key:r},...Array.isArray(a)?a:[a])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,n,...r)=>{let o=l(e,t,n??{});return e.createElement(o.type,o.props,...r)},cloneElement:(t,n,...r)=>{let o=e.cloneElement(t,n??void 0,...r),a=o.ref,i=l(e,o.type,{...o.props,ref:a});return i.type===o.type&&"string"!=typeof o.type?o:e.createElement(i.type,{...i.props,key:o.key})}}}n.d(t,{MA:()=>a,YJ:()=>i})},C(e,t,n){n.r(t);let r=(0,n("p").YJ)(window.React),{Children:o,Component:l,Fragment:a,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:d,cloneElement:p,createContext:m,createElement:h,createFactory:y,createRef:g,forwardRef:b,isValidElement:_,lazy:v,memo:w,startTransition:S,unstable_act:R,useCallback:E,useContext:$,useDebugValue:N,useDeferredValue:C,useEffect:O,useId:M,useImperativeHandle:k,useInsertionEffect:D,useLayoutEffect:T,useMemo:j,useReducer:A,useRef:I,useState:x,useSyncExternalStore:L,useTransition:z,version:P,use:W}=r;n.d(t,{},{Children:o,Component:l,Fragment:a,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:d,cloneElement:p,createContext:m,createElement:h,createFactory:y,createRef:g,default:r,forwardRef:b,isValidElement:_,lazy:v,memo:w,startTransition:S,unstable_act:R,use:W,useCallback:E,useContext:$,useDebugValue:N,useDeferredValue:C,useEffect:O,useId:M,useImperativeHandle:k,useInsertionEffect:D,useLayoutEffect:T,useMemo:j,useReducer:A,useRef:I,useState:x,useSyncExternalStore:L,useTransition:z,version:P})}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var l=t[r]={exports:{}};return e[r](l,l.exports,n),l.exports}n.d=(e,t,r)=>{var o=(t,r)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,[r]:t[o]})};o(t,"get"),o(r,"value")},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:r,Fragment:o}=(0,n("p").MA)(window.React);var l=n("vD"),a=n("C");let i=window.WallarmDS.Icons.ChevronLeft,c=window.WallarmDS.Icons.ChevronRight,s=window.WallarmDS.HStack,u=window.WallarmDS.VStack,f=window.WallarmDS.ToggleButton,d={title:"Actions/ToggleButton",component:f,parameters:{layout:"centered",docs:{description:{component:"A button that stays pressed — for something the reader flips in place and can see the result of, like pinning a panel or holding a filter on. Reach for `Switch` when it belongs in a settings form, and `SegmentedControl` when one of several options has to win."}}},argTypes:{variant:{control:"select",options:["outline","ghost"]},color:{control:"select",options:["brand","neutral"]},size:{control:"select",options:["small","medium","large"]},active:{control:"boolean"},loading:{control:"boolean"},disabled:{control:"boolean"}}},p=[{name:"Basic",story:t=>{let n,r,o=(0,l.c)(4);return o[0]!==t?({...n}=t,o[0]=t,o[1]=n):n=o[1],o[2]!==n?(r=e(f,{...n,"data-testid":"toggle-button",children:"Toggle Me"}),o[2]=n,o[3]=r):r=o[3],r},meta:d},{name:"VariantsAndColors",story:n=>{let r,o,a,i,c,d,p=(0,l.c)(9);return p[0]!==n?({...r}=n,p[0]=n,p[1]=r):r=p[1],p[2]===Symbol.for("react.memo_cache_sentinel")?(o=e("span",{className:"sb-annotation",children:"Brand"}),p[2]=o):o=p[2],p[3]!==r?(a=t(s,{children:[e(f,{...r,variant:"outline",color:"brand",children:"Outline"}),e(f,{...r,variant:"ghost",color:"brand",children:"Ghost"})]}),p[3]=r,p[4]=a):a=p[4],p[5]===Symbol.for("react.memo_cache_sentinel")?(i=e("span",{className:"sb-annotation",children:"Neutral"}),p[5]=i):i=p[5],p[6]===Symbol.for("react.memo_cache_sentinel")?(c=t(s,{children:[e(f,{variant:"outline",color:"neutral",children:"Outline"}),e(f,{variant:"ghost",color:"neutral",children:"Ghost"})]}),p[6]=c):c=p[6],p[7]!==a?(d=t(u,{children:[o,a,i,c]}),p[7]=a,p[8]=d):d=p[8],d},meta:d},{name:"Sizes",story:n=>{let r,o,a=(0,l.c)(4);return a[0]!==n?({...r}=n,a[0]=n,a[1]=r):r=a[1],a[2]!==r?(o=t(s,{align:"center",children:[e(f,{...r,size:"small",children:"Small"}),e(f,{...r,size:"medium",children:"Medium"}),e(f,{...r,size:"large",children:"Large"})]}),a[2]=r,a[3]=o):o=a[3],o},meta:d},{name:"Disabled",story:n=>{let r,o,a=(0,l.c)(4);return a[0]!==n?({...r}=n,a[0]=n,a[1]=r):r=a[1],a[2]!==r?(o=t(s,{children:[e(f,{...r,disabled:!0,children:"Disabled"}),e(f,{...r,disabled:!0,active:!0,children:"Disabled Active"}),e(f,{...r,disabled:!0,variant:"ghost",children:"Ghost Disabled"})]}),a[2]=r,a[3]=o):o=a[3],o},meta:d},{name:"Loading",story:n=>{let r,o,a=(0,l.c)(4);return a[0]!==n?({...r}=n,a[0]=n,a[1]=r):r=a[1],a[2]!==r?(o=t(s,{children:[e(f,{...r,loading:!0,children:"Loading"}),e(f,{...r,loading:!0,active:!0,children:"Loading Active"}),e(f,{...r,loading:!0,variant:"ghost",children:"Ghost Loading"})]}),a[2]=r,a[3]=o):o=a[3],o},meta:d},{name:"Icons",story:n=>{let r,o,a,u,d,p,m,h,y,g=(0,l.c)(16);return g[0]!==n?({...r}=n,g[0]=n,g[1]=r):r=g[1],g[2]===Symbol.for("react.memo_cache_sentinel")?(o=e(i,{}),g[2]=o):o=g[2],g[3]!==r?(a=t(f,{...r,children:[o,"Left icon"]}),g[3]=r,g[4]=a):a=g[4],g[5]===Symbol.for("react.memo_cache_sentinel")?(u=e(c,{}),g[5]=u):u=g[5],g[6]!==r?(d=t(f,{...r,children:["Right icon",u]}),g[6]=r,g[7]=d):d=g[7],g[8]===Symbol.for("react.memo_cache_sentinel")?(p=e(i,{}),g[8]=p):p=g[8],g[9]===Symbol.for("react.memo_cache_sentinel")?(m=e(c,{}),g[9]=m):m=g[9],g[10]!==r?(h=t(f,{...r,children:[p,"Both icons",m]}),g[10]=r,g[11]=h):h=g[11],g[12]!==a||g[13]!==d||g[14]!==h?(y=t(s,{children:[a,d,h]}),g[12]=a,g[13]=d,g[14]=h,g[15]=y):y=g[15],y},meta:d},{name:"IconOnly",story:n=>{let r,o,a,i,u,d,p,m,h=(0,l.c)(15);return h[0]!==n?({...r}=n,h[0]=n,h[1]=r):r=h[1],h[2]===Symbol.for("react.memo_cache_sentinel")?(o=e(c,{}),h[2]=o):o=h[2],h[3]!==r?(a=e(f,{...r,"aria-label":"Toggle option 1",children:o}),h[3]=r,h[4]=a):a=h[4],h[5]===Symbol.for("react.memo_cache_sentinel")?(i=e(c,{}),h[5]=i):i=h[5],h[6]!==r?(u=e(f,{...r,loading:!0,"aria-label":"Toggle option 2",children:i}),h[6]=r,h[7]=u):u=h[7],h[8]===Symbol.for("react.memo_cache_sentinel")?(d=e(c,{}),h[8]=d):d=h[8],h[9]!==r?(p=e(f,{...r,disabled:!0,"aria-label":"Toggle option 3",children:d}),h[9]=r,h[10]=p):p=h[10],h[11]!==a||h[12]!==u||h[13]!==p?(m=t(s,{children:[a,u,p]}),h[11]=a,h[12]=u,h[13]=p,h[14]=m):m=h[14],m},meta:d},{name:"Controlled",story:t=>{let n,r,o=(0,l.c)(5);o[0]!==t?({...n}=t,o[0]=t,o[1]=n):n=o[1];let[i,c]=(0,a.useState)(!1);return o[2]!==i||o[3]!==n?(r=e(f,{...n,"aria-label":"Toggle option 1",active:i,onToggle:c,children:"Controlled"}),o[2]=i,o[3]=n,o[4]=r):r=o[4],r},meta:d}];function m({entry:e}){let{story:t,meta:n}=e,r={...n.args,...t.args},o="function"==typeof t||t.$$typeof?t:t.render||n.render||n.component,l=()=>a.default.createElement(o,r),i={args:r,globals:{theme:"light"},parameters:{...n.parameters,...t.parameters},viewMode:"story"};for(let e of[...n.decorators||[],...t.decorators||[]].reverse()){let t=l;l=()=>e(t,i)}return a.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},a.default.createElement("h2",{className:"text-sm mb-12"},e.name),a.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(a.default.createElement(window.WallarmDS.Root,null,p.map((e,t)=>a.default.createElement(m,{key:t,entry:e})))),t}}})();

package/dist/project/components/Tooltip/README.md

@@ -0,0 +1,199 @@
+A short label on hover or focus, for naming something the interface cannot afford to spell out — an icon button, a truncated value. It holds no interactive content and cannot be reached by keyboard beyond its trigger, so anything the reader needs to click belongs in a `Popover`.
+
+## Props as canvas attributes
+
+Use kebab-case attribute names. Pass non-string values through renderVals holes, including booleans. The full emitted API is in `components/index.d.ts`.
+
+| Attribute | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `open` | `boolean \| undefined` | no | — |  |
+| `default-open` | `boolean \| undefined` | no | — |  |
+| `on-open-change` | `((open: boolean) => void) \| undefined` | no | — |  |
+| `open-delay` | `number \| undefined` | no | — |  |
+| `close-delay` | `number \| undefined` | no | — |  |
+| `close-on-pointer-down` | `boolean \| undefined` | no | — |  |
+| `close-on-escape` | `boolean \| undefined` | no | — |  |
+| `close-on-scroll` | `boolean \| undefined` | no | — |  |
+| `interactive` | `boolean \| undefined` | no | — |  |
+| `disabled` | `boolean \| undefined` | no | — |  |
+| `positioning` | `PositioningOptions \| undefined` | no | — |  |
+| `ids` | `ElementIds \| undefined` | no | — | Override the trigger element's id. Pass the same id to another compound component's `ids.trigger` (e.g. `Popover`, `DropdownMenu`) to compose their triggers on one element via nested `asChild` without an extra wrapper node — otherwise the outer trigger's id wins and this tooltip can't find its anchor, mispositioning at the viewport origin. |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.TooltipContent` — `TooltipContentProps` in the declaration bundle.
+- `WallarmDS.TooltipTrigger` — `TooltipTriggerProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+Trigger and content. Keep it to a few words: a tooltip that needs reading is a tooltip nobody
+reads.
+
+Source: Tooltip/Tooltip.stories.tsx#Basic
+
+### WithDescription
+
+A second line for a consequence rather than a name. This is the ceiling — past it, the
+content wants a `Popover`.
+
+Source: Tooltip/Tooltip.stories.tsx#WithDescription
+
+### WithNestedDialog
+
+A tooltip on a trigger that also opens a dialog, checking the tooltip dismisses rather than
+hanging over the panel.
+
+Source: Tooltip/Tooltip.stories.tsx#WithNestedDialog
+
+### WithKbd
+
+A `Kbd` inside the tooltip, which is the convention for naming a control and its shortcut in
+one breath.
+
+Source: Tooltip/Tooltip.stories.tsx#WithKbd
+
+## Story sources
+
+### Tooltip/Tooltip.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { ChevronRight } from '../../icons';
+import { Button } from '../Button';
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '../Dialog';
+import { Kbd } from '../Kbd';
+import { Text } from '../Text';
+import { Tooltip } from './Tooltip';
+import { TooltipContent } from './TooltipContent';
+import { TooltipTrigger } from './TooltipTrigger';
+
+const DESCRIPTION = [
+  'A short label on hover or focus, for naming something the interface cannot afford to spell out — an icon button, a truncated value.',
+  'It holds no interactive content and cannot be reached by keyboard beyond its trigger, so anything the reader needs to click belongs in a `Popover`.',
+].join(' ');
+
+const meta = {
+  title: 'Overlay/Tooltip',
+  component: Tooltip,
+  subcomponents: { TooltipContent, TooltipTrigger },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+
+/**
+ * Trigger and content. Keep it to a few words: a tooltip that needs reading is a tooltip nobody
+ * reads.
+ */
+export const Basic: StoryFn<typeof meta> = () => (
+  <Tooltip data-testid='tooltip'>
+    <TooltipTrigger asChild>
+      <Button variant='outline' color='neutral'>
+        <ChevronRight />
+      </Button>
+    </TooltipTrigger>
+    <TooltipContent>Right</TooltipContent>
+  </Tooltip>
+);
+
+/**
+ * A second line for a consequence rather than a name. This is the ceiling — past it, the
+ * content wants a `Popover`.
+ */
+export const WithDescription: StoryFn<typeof meta> = () => (
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button variant='outline' color='neutral'>
+        <ChevronRight />
+      </Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      <Text size='xs' weight='medium'>
+        Title
+      </Text>
+      <Text size='xs'>Description</Text>
+    </TooltipContent>
+  </Tooltip>
+);
+
+/**
+ * A tooltip on a trigger that also opens a dialog, checking the tooltip dismisses rather than
+ * hanging over the panel.
+ */
+export const WithNestedDialog: StoryFn<typeof meta> = () => (
+  <Dialog>
+    <DialogTrigger asChild>
+      <Button variant='outline' color='neutral'>
+        Open dialog with nested tooltip
+      </Button>
+    </DialogTrigger>
+
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>[Level 1] Main Dialog</DialogTitle>
+      </DialogHeader>
+
+      <DialogBody>
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant='ghost' color='neutral' size='small'>
+              Open nested dialog
+            </Button>
+          </DialogTrigger>
+
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>[Level 2] With Tooltip</DialogTitle>
+            </DialogHeader>
+
+            <DialogBody>
+              <Tooltip data-testid='nested-tooltip' interactive>
+                <TooltipTrigger asChild>
+                  <Button variant='outline' color='neutral'>
+                    Hover me
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Tooltip above the dialog</TooltipContent>
+              </Tooltip>
+            </DialogBody>
+          </DialogContent>
+        </Dialog>
+      </DialogBody>
+    </DialogContent>
+  </Dialog>
+);
+
+/**
+ * A `Kbd` inside the tooltip, which is the convention for naming a control and its shortcut in
+ * one breath.
+ */
+export const WithKbd: StoryFn<typeof meta> = () => (
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button variant='outline' color='neutral'>
+        <ChevronRight />
+      </Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      Add instance <Kbd>⌘</Kbd>
+    </TooltipContent>
+  </Tooltip>
+);
+```

package/dist/project/components/Tooltip/preview.html

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Overlay" height=480 -->
+<!doctype html><html><head><meta charset="utf-8"></head><body><div id="preview"></div><script src="./stories.js"></script><script>window.WallarmPreview.mount(document.getElementById('preview'));</script></body></html>