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

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

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Data Display" 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/Attribute/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,n){let r,l;/**
+ * 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 i,c,o=Object.create,a=Object.defineProperty,d=Object.getOwnPropertyDescriptor,m=Object.getOwnPropertyNames,s=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty,u=(e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let l of m(t))h.call(e,l)||l===n||a(e,l,{get:()=>t[l],enumerable:!(r=d(t,l))||r.enumerable});return e},f={},_={$dispatcherGuard:()=>I,$makeReadOnly:()=>C,$reset:()=>D,$structuralCheck:()=>k,c:()=>E,clearRenderCounterRegistry:()=>$,renderCounterRegistry:()=>A,useRenderCounter:()=>W};for(var y in _)a(f,y,{get:_[y],enumerable:!0});e.exports=u(a({},"__esModule",{value:!0}),f);var p=(l=null!=(r=n("C"))?o(s(r)):{},u(r&&r.__esModule?l:a(l,"default",{value:r,enumerable:!0}),r)),{useRef:S,useEffect:b,isValidElement:w}=p,g=null!=(i=p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?i:p.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),E="function"==typeof(null==(c=p.__COMPILER_RUNTIME)?void 0:c.c)?p.__COMPILER_RUNTIME.c:function(e){return p.useMemo(()=>{let t=Array(e);for(let n=0;n<e;n++)t[n]=v;return t[v]=!0,t},[])},N={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{N[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 z=null;function R(e){return g.ReactCurrentDispatcher.current=e,g.ReactCurrentDispatcher.current}N.useMemoCache=e=>{if(null!=z)return z.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var x=[];function I(e){let t=g.ReactCurrentDispatcher.current;if(0===e){if(x.push(t),1===x.length&&(z=t),t===N)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.");R(N)}else if(1===e){let e=x.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===x.length&&(z=null),R(e)}else if(2===e)x.push(t),R(z);else if(3===e){let e=x.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");R(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function D(e){for(let t=0;t<e.length;t++)e[t]=v}function C(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var A=new Map;function $(){for(let e of A.values())e.forEach(e=>{e.count=0})}function W(e){let t=S(null);null!=t.current&&(t.current.count+=1),b(()=>{if(null==t.current){let n,r={count:0};null==(n=A.get(e))&&(n=new Set,A.set(e,n)),n.add(r),t.current=r}return()=>{var n;let r;null!==t.current&&(n=t.current,null!=(r=A.get(e))&&r.delete(n))}})}var O=new Set;function k(e,t,n,r,l,i){function c(e,t,c,o){let a=`${r}:${i} [${l}] ${n}${c} changed from ${e} to ${t} at depth ${o}`;O.has(a)||(O.add(a),console.error(a))}!function e(t,n,r,l){if(!(l>2)){if(t!==n)if(typeof t!=typeof n)c(`type ${typeof t}`,`type ${typeof n}`,r,l);else if("object"==typeof t){let i=Array.isArray(t),o=Array.isArray(n);if(null===t&&null!==n)c("null",`type ${typeof n}`,r,l);else if(null===n)c(`type ${typeof t}`,"null",r,l);else if(t instanceof Map)if(n instanceof Map)if(t.size!==n.size)c(`Map instance with size ${t.size}`,`Map instance with size ${n.size}`,r,l);else for(let[i,o]of t)n.has(i)?e(o,n.get(i),`${r}.get(${i})`,l+1):c(`Map instance with key ${i}`,`Map instance without key ${i}`,r,l);else c("Map instance","other value",r,l);else if(n instanceof Map)c("other value","Map instance",r,l);else if(t instanceof Set)if(n instanceof Set)if(t.size!==n.size)c(`Set instance with size ${t.size}`,`Set instance with size ${n.size}`,r,l);else for(let e of n)t.has(e)||c(`Set instance without element ${e}`,`Set instance with element ${e}`,r,l);else c("Set instance","other value",r,l);else if(n instanceof Set)c("other value","Set instance",r,l);else if(i||o)if(i!==o)c(`type ${i?"array":"object"}`,`type ${o?"array":"object"}`,r,l);else if(t.length!==n.length)c(`array with length ${t.length}`,`array with length ${n.length}`,r,l);else for(let i=0;i<t.length;i++)e(t[i],n[i],`${r}[${i}]`,l+1);else if(w(t)||w(n))w(t)!==w(n)?c(`type ${w(t)?"React element":"object"}`,`type ${w(n)?"React element":"object"}`,r,l):t.type!==n.type?c(`React element of type ${t.type}`,`React element of type ${n.type}`,r,l):e(t.props,n.props,`[props of ${r}]`,l+1);else{for(let e in n)e in t||c(`object without key ${e}`,`object with key ${e}`,r,l);for(let i in t)i in n?e(t[i],n[i],`${r}.${i}`,l+1):c(`object with key ${i}`,`object without key ${i}`,r,l)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(n)?isNaN(t)!==isNaN(n)&&c(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(n)?"NaN":"non-NaN value"}`,r,l):t!==n&&c(t,n,r,l)}}}(e,t,"",0)}},p(e,t,n){let r=new WeakMap,l=new WeakMap;function i(e,t,n){let i=t,c=n;if("object"==typeof i&&null!==i&&"$$typeof"in i&&i.$$typeof===Symbol.for("react.context")&&"Provider"in i&&(i=i.Provider),"function"==typeof i&&null!=c.ref&&!i.prototype?.isReactComponent){let t=i,n=r.get(e);n||(n=new WeakMap,r.set(e,n));let l=n.get(t);l||((l=e.forwardRef((e,n)=>t({...e,ref:n}))).displayName=t.displayName??t.name,n.set(t,l)),i=l}if("string"==typeof i&&"boolean"==typeof c.inert&&((c={...c}).inert?c.inert="":delete c.inert),"string"==typeof i)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in c&&(c={...c,[t]:c[e]},delete c[e]);return"string"==typeof i&&null!=c.ref&&(i=function(e,t){let n=l.get(e);n||(n=new Map,l.set(e,n));let r=n.get(t);if(r)return r;let i=e.forwardRef((n,r)=>{let l=e.useRef(null);if(!l.current||l.current.original!==r){let e;l.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:l.current.callback})});return i.displayName=`CanvasHost(${t})`,n.set(t,i),i}(e,i)),{type:i,props:c}}function c(e){let t=(t,n,r)=>{let l=i(e,t,n??{});return e.createElement(l.type,void 0===r?l.props:{...l.props,key:r})};return{jsx:t,jsxs:(t,n,r)=>{let l=i(e,t,n??{}),{children:c,...o}=l.props;return e.createElement(l.type,void 0===r?o:{...o,key:r},...Array.isArray(c)?c:[c])},jsxDEV:t,Fragment:e.Fragment}}function o(e){return{...e,createElement:(t,n,...r)=>{let l=i(e,t,n??{});return e.createElement(l.type,l.props,...r)},cloneElement:(t,n,...r)=>{let l=e.cloneElement(t,n??void 0,...r),c=l.ref,o=i(e,l.type,{...l.props,ref:c});return o.type===l.type&&"string"!=typeof l.type?l:e.createElement(o.type,{...o.props,key:l.key})}}}n.d(t,{MA:()=>c,YJ:()=>o})},C(e,t,n){n.r(t);let r=(0,n("p").YJ)(window.React),{Children:l,Component:i,Fragment:c,Profiler:o,PureComponent:a,StrictMode:d,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:s,act:h,cloneElement:u,createContext:f,createElement:_,createFactory:y,createRef:p,forwardRef:S,isValidElement:b,lazy:w,memo:g,startTransition:v,unstable_act:E,useCallback:N,useContext:z,useDebugValue:R,useDeferredValue:x,useEffect:I,useId:D,useImperativeHandle:C,useInsertionEffect:A,useLayoutEffect:$,useMemo:W,useReducer:O,useRef:k,useState:P,useSyncExternalStore:M,useTransition:T,version:L,use:j}=r;n.d(t,{},{Children:l,Component:i,Fragment:c,Profiler:o,PureComponent:a,StrictMode:d,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:s,act:h,cloneElement:u,createContext:f,createElement:_,createFactory:y,createRef:p,default:r,forwardRef:S,isValidElement:b,lazy:w,memo:g,startTransition:v,unstable_act:E,use:j,useCallback:N,useContext:z,useDebugValue:R,useDeferredValue:x,useEffect:I,useId:D,useImperativeHandle:C,useInsertionEffect:A,useLayoutEffect:$,useMemo:W,useReducer:O,useRef:k,useState:P,useSyncExternalStore:M,useTransition:T,version:L})}},t={};function n(r){var l=t[r];if(void 0!==l)return l.exports;var i=t[r]={exports:{}};return e[r](i,i.exports,n),i.exports}n.d=(e,t,r)=>{var l=(t,r)=>{for(var l in t)n.o(t,l)&&!n.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,[r]:t[l]})};l(t,"get"),l(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:l}=(0,n("p").MA)(window.React);var i=n("vD"),c=n("C");let o=window.WallarmDS.Icons.Copy,a=window.WallarmDS.Icons.Filter,d=window.WallarmDS.Badge,m=window.WallarmDS.Code,s=window.WallarmDS.InlineCodeSnippet,h=window.WallarmDS.FormatDateTime,u=window.WallarmDS.InlineEditControl,f=window.WallarmDS.InlineEditError,_=window.WallarmDS.InlineEditInput,y=window.WallarmDS.InlineEditPreview,p=window.WallarmDS.InlineEdit,S=window.WallarmDS.Ip,b=window.WallarmDS.IpAddress,w=window.WallarmDS.IpCountry,g=window.WallarmDS.IpList,v=window.WallarmDS.IpProvider,E=window.WallarmDS.Link,N=window.WallarmDS.OverflowList,z=window.WallarmDS.Tag,R=window.WallarmDS.Text,x=window.WallarmDS.Attribute,I=window.WallarmDS.AttributeActions,D=window.WallarmDS.AttributeActionsContent,C=window.WallarmDS.AttributeActionsItem,A=window.WallarmDS.AttributeActionsTarget,$=window.WallarmDS.AttributeEmptyDescription,W=window.WallarmDS.AttributeLabel,O=window.WallarmDS.AttributeLabelDescription,k=window.WallarmDS.AttributeLabelInfo,P=window.WallarmDS.AttributeValue,M={title:"Data Display/Attribute",component:x,subcomponents:{AttributeLabel:W,AttributeLabelDescription:O,AttributeLabelInfo:k,AttributeValue:P,AttributeEmptyDescription:$,AttributeActions:I,AttributeActionsTarget:A,AttributeActionsContent:D,AttributeActionsItem:C,InlineEditPreview:y,InlineEditControl:u,InlineEditInput:_,InlineEditError:f},parameters:{layout:"centered",docs:{description:{component:"Pairs one field's label with its value on a detail page — reach for `Table` when the same fields repeat across many objects, and `Field` when the value is being collected rather than read. The value slot takes whichever display component fits the data and hosts `InlineEdit` when the field is editable in place, while `AttributeActions` hangs a per-value menu off it."}}}},T=()=>t(D,{children:[t(C,{onSelect:()=>{},children:[e(a,{}),"Investigate by this value"]}),t(C,{onSelect:()=>{},children:[e(o,{}),"Copy value"]})]}),L=n=>t(l,{children:[t(x,{orientation:"horizontal",children:[e(W,{children:"Source IP"}),e(P,{children:t(I,{"data-testid":"attr-source-ip",children:[e(A,{disableNestedInteractive:n,children:e(R,{size:"sm",children:"142.198.167.52"})}),T()]})})]}),t(x,{orientation:"horizontal",children:[e(W,{children:"Status"}),e(P,{children:t(I,{"data-testid":"attr-badge",children:[e(A,{disableNestedInteractive:n,children:e(d,{"data-testid":"attr-badge-value",color:"red",variant:"dotted",children:"Blocked"})}),T()]})})]}),t(x,{orientation:"horizontal",children:[e(W,{children:"IPs"}),e(P,{children:t(I,{"data-testid":"attr-ip-overflow",children:[e(A,{disableNestedInteractive:n,children:t(g,{type:"horizontal",children:[t(S,{children:[e(w,{code:"US"}),e(b,{children:"142.198.167.52"}),e(v,{children:"Azure"})]}),t(S,{children:[e(w,{code:"US"}),e(b,{children:"34.74.73.20"}),e(v,{children:"AWS"})]}),t(S,{children:[e(w,{code:"DE"}),e(b,{children:"34.74.73.20"}),e(v,{children:"GCP"})]}),t(S,{children:[e(w,{code:"NL"}),e(b,{children:"10.0.0.1"})]}),t(S,{children:[e(w,{code:"JP"}),e(b,{children:"192.168.1.1"})]})]})}),T()]})})]}),t(x,{orientation:"horizontal",children:[e(W,{children:"Payload"}),e(P,{children:t(I,{"data-testid":"attr-code-snippet",children:[e(A,{disableNestedInteractive:n,children:e(s,{code:'{ "action": "login", "user_id": 42 }',size:"sm"})}),T()]})})]}),t(x,{orientation:"horizontal",children:[e(W,{children:"Documentation"}),e(P,{children:t(I,{"data-testid":"attr-link",children:[e(A,{disableNestedInteractive:n,children:e(E,{href:"#",size:"md",children:"View full report"})}),T()]})})]}),t(x,{orientation:"horizontal",children:[e(W,{children:"Tags"}),e(P,{children:t(I,{"data-testid":"attr-tags",children:[e(A,{disableNestedInteractive:n,children:e(N,{className:"gap-4",items:["production","us-east-1","critical","tier-1","public","monitored"],itemRenderer:t=>e(z,{"data-testid":"attr-tag",children:t},t)})}),T()]})})]})]}),j=()=>{let t,n=(0,i.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"w-[400px] flex flex-col gap-8",children:L(!1)}),n[0]=t):t=n[0],t};j.storyName="Horizontal With Actions (default — copy on text, menu outside)";let U=()=>{let t,n=(0,i.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"w-[400px] flex flex-col gap-8",children:L(!0)}),n[0]=t):t=n[0],t};function F(n){let r,l,o,a,d,m,s,h=(0,i.c)(12),{orientation:S}=n,[b,w]=(0,c.useState)("Checkout API");return h[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{children:"Name"}),h[0]=r):r=h[0],h[1]===Symbol.for("react.memo_cache_sentinel")?(l=e=>w(e),h[1]=l):l=h[1],h[2]!==b?(o=e(y,{children:b}),h[2]=b,h[3]=o):o=h[3],h[4]===Symbol.for("react.memo_cache_sentinel")?(a=e(u,{children:e(_,{})}),d=e(f,{}),h[4]=a,h[5]=d):(a=h[4],d=h[5]),h[6]!==b||h[7]!==o?(m=e(P,{children:t(p,{value:b,onValueCommit:l,children:[o,a,d]})}),h[6]=b,h[7]=o,h[8]=m):m=h[8],h[9]!==S||h[10]!==m?(s=e("div",{className:"w-[420px]",children:t(x,{orientation:S,"data-testid":"attr",children:[r,m]})}),h[9]=S,h[10]=m,h[11]=s):s=h[11],s}function H(n){let r,l,o,a,d,m,s,h,S,b,w,g,v,E,N=(0,i.c)(25),{orientation:z}=n,[D,C]=(0,c.useState)("Checkout API"),$="horizontal"===z?"w-[420px] flex flex-col gap-8":"w-[420px] flex flex-col gap-16";return N[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{children:"Request ID"}),N[0]=r):r=N[0],N[1]===Symbol.for("react.memo_cache_sentinel")?(l=e(P,{children:e(R,{size:"sm",children:"abc-123-def-456"})}),N[1]=l):l=N[1],N[2]!==z?(o=t(x,{orientation:z,"data-testid":"attr-plain",children:[r,l]}),N[2]=z,N[3]=o):o=N[3],N[4]===Symbol.for("react.memo_cache_sentinel")?(a=e(W,{children:"Source IP"}),N[4]=a):a=N[4],N[5]===Symbol.for("react.memo_cache_sentinel")?(d=e(P,{children:t(I,{children:[e(A,{children:e(R,{size:"sm",children:"142.198.167.52"})}),T()]})}),N[5]=d):d=N[5],N[6]!==z?(m=t(x,{orientation:z,"data-testid":"attr-actions",children:[a,d]}),N[6]=z,N[7]=m):m=N[7],N[8]===Symbol.for("react.memo_cache_sentinel")?(s=e(W,{children:"Name"}),N[8]=s):s=N[8],N[9]===Symbol.for("react.memo_cache_sentinel")?(h=e=>C(e),N[9]=h):h=N[9],N[10]!==D?(S=e(y,{children:D}),N[10]=D,N[11]=S):S=N[11],N[12]===Symbol.for("react.memo_cache_sentinel")?(b=e(u,{children:e(_,{})}),w=e(f,{}),N[12]=b,N[13]=w):(b=N[12],w=N[13]),N[14]!==D||N[15]!==S?(g=e(P,{children:t(p,{value:D,onValueCommit:h,children:[S,b,w]})}),N[14]=D,N[15]=S,N[16]=g):g=N[16],N[17]!==z||N[18]!==g?(v=t(x,{orientation:z,"data-testid":"attr-inline-edit",children:[s,g]}),N[17]=z,N[18]=g,N[19]=v):v=N[19],N[20]!==$||N[21]!==v||N[22]!==o||N[23]!==m?(E=t("div",{className:$,children:[o,m,v]}),N[20]=$,N[21]=v,N[22]=o,N[23]=m,N[24]=E):E=N[24],E}U.storyName="Horizontal With Actions (disableNestedInteractive — menu only)";let V=()=>{let t,n=(0,i.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(H,{}),n[0]=t):t=n[0],t};V.storyName="Mixed (plain + Actions + InlineEdit)";let B=()=>{let t,n=(0,i.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(H,{orientation:"horizontal"}),n[0]=t):t=n[0],t};function X(t){return e(z,{children:t},t)}function q(t){return e(z,{children:t},t)}function Z(t){return e(z,{children:t},t)}function G(t){return e(z,{children:t},t)}function J(t){return e(z,{children:t},t)}function Y(t){return e(z,{children:t},t)}B.storyName="Horizontal Mixed (plain + Actions + InlineEdit)";let Q=[{name:"Default",story:()=>{let n,r,l=(0,i.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(W,{children:"Request ID"}),l[0]=n):n=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"w-[400px]",children:t(x,{children:[n,e(P,{children:e(R,{size:"sm",children:"abc-123-def-456"})})]})}),l[1]=r):r=l[1],r},meta:M},{name:"WithDescription",story:()=>{let n,r,l=(0,i.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(W,{children:["Created at",e(O,{children:"The time when the request was first received"})]}),l[0]=n):n=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"w-[400px]",children:t(x,{children:[n,e(P,{children:e(R,{size:"sm",children:"April 9, 2026, 14:32"})})]})}),l[1]=r):r=l[1],r},meta:M},{name:"WithInfo",story:()=>{let n,r,l,c,o=(0,i.c)(4);return o[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(W,{children:["Request ID",e(k,{children:"Unique identifier assigned to each incoming request"})]}),o[0]=n):n=o[0],o[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(x,{children:[n,e(P,{children:e(R,{size:"sm",children:"abc-123-def-456"})})]}),o[1]=r):r=o[1],o[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(W,{children:[e(k,{children:"Unique identifier assigned to each incoming request"}),"Request ID"]}),o[2]=l):l=o[2],o[3]===Symbol.for("react.memo_cache_sentinel")?(c=t("div",{className:"w-[400px] flex flex-col gap-16",children:[r,t(x,{children:[l,e(P,{children:e(R,{size:"sm",children:"abc-123-def-456"})})]})]}),o[3]=c):c=o[3],c},meta:M},{name:"WithLink",story:()=>{let n,r,l=(0,i.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(W,{children:["Source",e(E,{href:"#",size:"md",children:"View docs"})]}),l[0]=n):n=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"w-[400px]",children:t(x,{children:[n,e(P,{children:e(R,{size:"sm",children:"API Gateway"})})]})}),l[1]=r):r=l[1],r},meta:M},{name:"Empty",story:()=>{let n,r,l,c,o,a=(0,i.c)(5);return a[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(x,{children:[t(W,{children:["Region",e(O,{children:"Manual composition"})]}),e(P,{})]}),a[0]=n):n=a[0],a[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{children:"Region"}),a[1]=r):r=a[1],a[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(x,{isEmpty:!0,children:[r,e(P,{children:e(R,{size:"sm",children:"This text is replaced by the em-dash placeholder"})})]}),a[2]=l):l=a[2],a[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(x,{isEmpty:!0,children:[t(W,{children:["Owner",e($,{children:"Not yet assigned"})]}),e(P,{})]}),a[3]=c):c=a[3],a[4]===Symbol.for("react.memo_cache_sentinel")?(o=t("div",{className:"w-[400px] flex flex-col gap-16",children:[n,l,c,t(x,{isEmpty:!0,children:[t(W,{children:["SSO provider",t($,{children:["Not connected —"," ",e(E,{href:"#",size:"md",children:"set up integration"})]})]}),e(P,{})]})]}),a[4]=o):o=a[4],o},meta:M},{name:"Loading",story:()=>{let n,r,l=(0,i.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(x,{loading:!0,children:[e(W,{children:"Created at"}),e(P,{})]}),l[0]=n):n=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(r=t("div",{className:"w-[400px] flex flex-col gap-16",children:[n,t(x,{loading:!0,children:[e(W,{children:"Status"}),e(P,{})]})]}),l[1]=r):r=l[1],r},meta:M},{name:"Composition",story:()=>{let n,r,l,c,o,a,u,f,_,y,p,z,I,D,C,A,$,O,k,M,T,L,j,U,F,H,V=(0,i.c)(26);return V[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(W,{children:"Status"}),V[0]=n):n=V[0],V[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(x,{children:[n,e(P,{children:e(d,{color:"red",variant:"dotted",children:"Blocked"})})]}),V[1]=r):r=V[1],V[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(W,{children:"First seen"}),V[2]=l):l=V[2],V[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(x,{children:[l,e(P,{children:e(h,{value:"2026-04-03T10:15:00Z",format:"relative"})})]}),V[3]=c):c=V[3],V[4]===Symbol.for("react.memo_cache_sentinel")?(o=e(W,{children:"Attack type"}),V[4]=o):o=V[4],V[5]===Symbol.for("react.memo_cache_sentinel")?(a=t(x,{children:[o,e(P,{children:e(N,{className:"gap-4",items:["XSS","BOLA","SQL Injection","Scanner","CSRF","XXE","RCE","LFI","IDOR"],itemRenderer:X})})]}),V[5]=a):a=V[5],V[6]===Symbol.for("react.memo_cache_sentinel")?(u=e(W,{children:"Sessions"}),V[6]=u):u=V[6],V[7]===Symbol.for("react.memo_cache_sentinel")?(f=t(x,{children:[u,e(P,{children:e(R,{size:"sm",children:"3 sessions"})})]}),V[7]=f):f=V[7],V[8]===Symbol.for("react.memo_cache_sentinel")?(_=e(W,{children:"Users"}),V[8]=_):_=V[8],V[9]===Symbol.for("react.memo_cache_sentinel")?(y=t(x,{children:[_,e(P,{children:e(N,{className:"gap-4",items:["artem@acme.com","uxd@acme.com","ops@acme.com","security@acme.com","admin@acme.com"],itemRenderer:q})})]}),V[9]=y):y=V[9],V[10]===Symbol.for("react.memo_cache_sentinel")?(p=e(W,{children:"IPs"}),V[10]=p):p=V[10],V[11]===Symbol.for("react.memo_cache_sentinel")?(z=t(S,{children:[e(w,{code:"US"}),e(b,{children:"142.198.167.52"}),e(v,{children:"Azure"})]}),V[11]=z):z=V[11],V[12]===Symbol.for("react.memo_cache_sentinel")?(I=t(S,{children:[e(w,{code:"US"}),e(b,{children:"34.74.73.20"}),e(v,{children:"AWS"})]}),V[12]=I):I=V[12],V[13]===Symbol.for("react.memo_cache_sentinel")?(D=t(S,{children:[e(w,{code:"DE"}),e(b,{children:"34.74.73.20"}),e(v,{children:"GCP"})]}),V[13]=D):D=V[13],V[14]===Symbol.for("react.memo_cache_sentinel")?(C=t(S,{children:[e(w,{code:"NL"}),e(b,{children:"10.0.0.1"})]}),V[14]=C):C=V[14],V[15]===Symbol.for("react.memo_cache_sentinel")?(A=t(x,{children:[p,e(P,{children:t(g,{children:[z,I,D,C,t(S,{children:[e(w,{code:"JP"}),e(b,{children:"192.168.1.1"})]})]})})]}),V[15]=A):A=V[15],V[16]===Symbol.for("react.memo_cache_sentinel")?($=e(W,{children:"Source IP"}),V[16]=$):$=V[16],V[17]===Symbol.for("react.memo_cache_sentinel")?(O=t(x,{children:[$,e(P,{children:t(S,{children:[e(w,{code:"US"}),e(b,{children:"142.198.167.52"}),e(v,{children:"Azure"})]})})]}),V[17]=O):O=V[17],V[18]===Symbol.for("react.memo_cache_sentinel")?(k=e(W,{children:"Created at"}),V[18]=k):k=V[18],V[19]===Symbol.for("react.memo_cache_sentinel")?(M=t(x,{children:[k,e(P,{children:e(h,{value:"2026-04-02T14:03:00Z",format:"datetime"})})]}),V[19]=M):M=V[19],V[20]===Symbol.for("react.memo_cache_sentinel")?(T=e(W,{children:"Documentation"}),V[20]=T):T=V[20],V[21]===Symbol.for("react.memo_cache_sentinel")?(L=t(x,{children:[T,e(P,{children:e(E,{href:"#",size:"md",children:"View full report"})})]}),V[21]=L):L=V[21],V[22]===Symbol.for("react.memo_cache_sentinel")?(j=e(W,{children:"Payload (inline)"}),V[22]=j):j=V[22],V[23]===Symbol.for("react.memo_cache_sentinel")?(U=t(x,{children:[j,e(P,{children:e(s,{code:'{ "action": "login", "user_id": 42 }',size:"sm"})})]}),V[23]=U):U=V[23],V[24]===Symbol.for("react.memo_cache_sentinel")?(F=e(W,{children:"Payload (code)"}),V[24]=F):F=V[24],V[25]===Symbol.for("react.memo_cache_sentinel")?(H=t("div",{className:"grid grid-cols-2 gap-x-8 gap-y-16 w-[874px]",children:[r,c,a,f,y,A,O,M,L,U,t(x,{children:[F,e(P,{children:e(m,{size:"s",children:'{ "action": "login", "user_id": 42 }'})})]})]}),V[25]=H):H=V[25],H},meta:M},{name:"WithActions",story:()=>{let n,r,l,c,o,a,u,f,_,y,p,z,D,C,$,O,k,M,L,j,U,F,H,V,B,X,q=(0,i.c)(26);return q[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(W,{children:"Status"}),q[0]=n):n=q[0],q[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(x,{children:[n,e(P,{children:t(I,{"data-testid":"attribute-with-actions",children:[e(A,{children:e(d,{color:"red",variant:"dotted",children:"Blocked"})}),T()]})})]}),q[1]=r):r=q[1],q[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(W,{children:"First seen"}),q[2]=l):l=q[2],q[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(x,{children:[l,e(P,{children:t(I,{children:[e(A,{children:e(h,{value:"2026-04-03T10:15:00Z",format:"relative"})}),T()]})})]}),q[3]=c):c=q[3],q[4]===Symbol.for("react.memo_cache_sentinel")?(o=e(W,{children:"Attack type"}),q[4]=o):o=q[4],q[5]===Symbol.for("react.memo_cache_sentinel")?(a=t(x,{children:[o,e(P,{children:t(I,{children:[e(A,{children:e(N,{className:"gap-4",items:["XSS","BOLA","SQL Injection","Scanner","CSRF","XXE","RCE","LFI","IDOR"],itemRenderer:Z})}),T()]})})]}),q[5]=a):a=q[5],q[6]===Symbol.for("react.memo_cache_sentinel")?(u=e(W,{children:"Sessions"}),q[6]=u):u=q[6],q[7]===Symbol.for("react.memo_cache_sentinel")?(f=t(x,{children:[u,e(P,{children:t(I,{children:[e(A,{children:e(R,{size:"sm",children:"3 sessions"})}),T()]})})]}),q[7]=f):f=q[7],q[8]===Symbol.for("react.memo_cache_sentinel")?(_=e(W,{children:"Users"}),q[8]=_):_=q[8],q[9]===Symbol.for("react.memo_cache_sentinel")?(y=t(x,{children:[_,e(P,{children:t(I,{children:[e(A,{children:e(N,{className:"gap-4",items:["artem@acme.com","uxd@acme.com","ops@acme.com","security@acme.com","admin@acme.com"],itemRenderer:G})}),T()]})})]}),q[9]=y):y=q[9],q[10]===Symbol.for("react.memo_cache_sentinel")?(p=e(W,{children:"IPs"}),q[10]=p):p=q[10],q[11]===Symbol.for("react.memo_cache_sentinel")?(z=t(S,{children:[e(w,{code:"US"}),e(b,{children:"142.198.167.52"}),e(v,{children:"Azure"})]}),q[11]=z):z=q[11],q[12]===Symbol.for("react.memo_cache_sentinel")?(D=t(S,{children:[e(w,{code:"US"}),e(b,{children:"34.74.73.20"}),e(v,{children:"AWS"})]}),q[12]=D):D=q[12],q[13]===Symbol.for("react.memo_cache_sentinel")?(C=t(S,{children:[e(w,{code:"DE"}),e(b,{children:"34.74.73.20"}),e(v,{children:"GCP"})]}),q[13]=C):C=q[13],q[14]===Symbol.for("react.memo_cache_sentinel")?($=t(S,{children:[e(w,{code:"NL"}),e(b,{children:"10.0.0.1"})]}),q[14]=$):$=q[14],q[15]===Symbol.for("react.memo_cache_sentinel")?(O=t(x,{children:[p,e(P,{children:t(I,{children:[e(A,{children:t(g,{children:[z,D,C,$,t(S,{children:[e(w,{code:"JP"}),e(b,{children:"192.168.1.1"})]})]})}),T()]})})]}),q[15]=O):O=q[15],q[16]===Symbol.for("react.memo_cache_sentinel")?(k=e(W,{children:"Source IP"}),q[16]=k):k=q[16],q[17]===Symbol.for("react.memo_cache_sentinel")?(M=t(x,{children:[k,e(P,{children:t(I,{children:[e(A,{children:t(S,{children:[e(w,{code:"US"}),e(b,{children:"142.198.167.52"}),e(v,{children:"Azure"})]})}),T()]})})]}),q[17]=M):M=q[17],q[18]===Symbol.for("react.memo_cache_sentinel")?(L=e(W,{children:"Created at"}),q[18]=L):L=q[18],q[19]===Symbol.for("react.memo_cache_sentinel")?(j=t(x,{children:[L,e(P,{children:t(I,{children:[e(A,{children:e(h,{value:"2026-04-02T14:03:00Z",format:"datetime"})}),T()]})})]}),q[19]=j):j=q[19],q[20]===Symbol.for("react.memo_cache_sentinel")?(U=e(W,{children:"Documentation"}),q[20]=U):U=q[20],q[21]===Symbol.for("react.memo_cache_sentinel")?(F=t(x,{children:[U,e(P,{children:t(I,{children:[e(A,{children:e(E,{href:"#",size:"md",children:"View full report"})}),T()]})})]}),q[21]=F):F=q[21],q[22]===Symbol.for("react.memo_cache_sentinel")?(H=e(W,{children:"Payload (inline)"}),q[22]=H):H=q[22],q[23]===Symbol.for("react.memo_cache_sentinel")?(V=t(x,{children:[H,e(P,{children:t(I,{children:[e(A,{children:e(s,{code:'{ "action": "login", "user_id": 42 }',size:"sm"})}),T()]})})]}),q[23]=V):V=q[23],q[24]===Symbol.for("react.memo_cache_sentinel")?(B=e(W,{children:"Payload (code)"}),q[24]=B):B=q[24],q[25]===Symbol.for("react.memo_cache_sentinel")?(X=t("div",{className:"grid grid-cols-2 gap-x-8 gap-y-16 w-[874px]",children:[r,c,a,f,y,O,M,j,F,V,t(x,{children:[B,e(P,{children:t(I,{children:[e(A,{children:e(m,{size:"s",children:'{ "action": "login", "user_id": 42 }'})}),T()]})})]})]}),q[25]=X):X=q[25],X},meta:M},{name:"Horizontal",story:()=>{let n,r,l=(0,i.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(W,{children:"Status"}),l[0]=n):n=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"w-[400px]",children:t(x,{orientation:"horizontal",children:[n,e(P,{children:e(d,{color:"red",variant:"dotted",children:"Blocked"})})]})}),l[1]=r):r=l[1],r},meta:M},{name:"HorizontalTruncation",story:()=>{let n,r,l,c,o,a,d=(0,i.c)(6);return d[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(W,{width:256,children:"Short"}),d[0]=n):n=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(x,{orientation:"horizontal",children:[n,e(P,{children:e(R,{size:"sm",children:"Fits in 256px label cell"})})]}),d[1]=r):r=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(W,{width:256,children:"This label text is much longer than 256 pixels and must be truncated"}),d[2]=l):l=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(x,{orientation:"horizontal",children:[l,e(P,{children:e(R,{size:"sm",children:"Value"})})]}),d[3]=c):c=d[3],d[4]===Symbol.for("react.memo_cache_sentinel")?(o=e(W,{children:"Users"}),d[4]=o):o=d[4],d[5]===Symbol.for("react.memo_cache_sentinel")?(a=t("div",{className:"w-[500px] flex flex-col gap-8",children:[r,c,t(x,{orientation:"horizontal",children:[o,e(P,{children:e(R,{size:"sm",truncate:!0,children:"artem@acme.com, uxd@acme.com, ops@acme.com, security@acme.com, admin@acme.com"})})]})]}),d[5]=a):a=d[5],a},meta:M},{name:"HorizontalComposition",story:()=>{let n,r,l,c,o,a,m,s,u,f,_,y,p,E,z,I,D=(0,i.c)(16);return D[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(W,{children:"Status"}),D[0]=n):n=D[0],D[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(x,{orientation:"horizontal",children:[n,e(P,{children:e(d,{color:"red",variant:"dotted",children:"Blocked"})})]}),D[1]=r):r=D[1],D[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(W,{children:"First seen"}),D[2]=l):l=D[2],D[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(x,{orientation:"horizontal",children:[l,e(P,{children:e(h,{value:"2026-04-03T10:15:00Z",format:"relative"})})]}),D[3]=c):c=D[3],D[4]===Symbol.for("react.memo_cache_sentinel")?(o=e(W,{children:"Attack type"}),D[4]=o):o=D[4],D[5]===Symbol.for("react.memo_cache_sentinel")?(a=t(x,{orientation:"horizontal",children:[o,e(P,{children:e(N,{className:"gap-4",items:["XSS","BOLA","SQL Injection","Scanner","CSRF","XXE","RCE","LFI","IDOR"],itemRenderer:J})})]}),D[5]=a):a=D[5],D[6]===Symbol.for("react.memo_cache_sentinel")?(m=e(W,{children:"Last seen"}),D[6]=m):m=D[6],D[7]===Symbol.for("react.memo_cache_sentinel")?(s=t(x,{orientation:"horizontal",children:[m,e(P,{children:e(h,{value:"2025-04-02T14:03:00Z",format:"date"})})]}),D[7]=s):s=D[7],D[8]===Symbol.for("react.memo_cache_sentinel")?(u=e(W,{children:"Sessions"}),D[8]=u):u=D[8],D[9]===Symbol.for("react.memo_cache_sentinel")?(f=t(x,{orientation:"horizontal",children:[u,e(P,{children:e(R,{size:"sm",children:"3 sessions"})})]}),D[9]=f):f=D[9],D[10]===Symbol.for("react.memo_cache_sentinel")?(_=e(W,{children:"Users"}),D[10]=_):_=D[10],D[11]===Symbol.for("react.memo_cache_sentinel")?(y=t(x,{orientation:"horizontal",children:[_,e(P,{children:e(N,{className:"gap-4",items:["artem@acme.com","uxd@acme.com","ops@acme.com","security@acme.com","admin@acme.com"],itemRenderer:Y})})]}),D[11]=y):y=D[11],D[12]===Symbol.for("react.memo_cache_sentinel")?(p=e(W,{children:"IPs"}),D[12]=p):p=D[12],D[13]===Symbol.for("react.memo_cache_sentinel")?(E=t(S,{children:[e(w,{code:"US"}),e(b,{children:"142.198.167.52"}),e(v,{children:"Azure"})]}),D[13]=E):E=D[13],D[14]===Symbol.for("react.memo_cache_sentinel")?(z=t(S,{children:[e(w,{code:"US"}),e(b,{children:"34.74.73.20"}),e(v,{children:"AWS"})]}),D[14]=z):z=D[14],D[15]===Symbol.for("react.memo_cache_sentinel")?(I=t("div",{className:"grid grid-cols-2 gap-x-8 gap-y-6 w-[874px]",children:[r,c,a,s,f,y,e("div",{className:"col-span-2",children:t(x,{orientation:"horizontal",children:[p,e(P,{children:t(g,{type:"horizontal",children:[E,z,t(S,{children:[e(w,{code:"DE"}),e(b,{children:"34.74.73.20"}),e(v,{children:"GCP"})]})]})})]})})]}),D[15]=I):I=D[15],I},meta:M},{name:"HorizontalLoading",story:()=>{let n,r,l=(0,i.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(x,{orientation:"horizontal",loading:!0,children:[e(W,{children:"Created at"}),e(P,{})]}),l[0]=n):n=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(r=t("div",{className:"w-[400px] flex flex-col gap-8",children:[n,t(x,{orientation:"horizontal",loading:!0,children:[e(W,{children:"Status"}),e(P,{})]})]}),l[1]=r):r=l[1],r},meta:M},{name:"HorizontalEmpty",story:()=>{let n,r,l,c,o,a=(0,i.c)(5);return a[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(x,{orientation:"horizontal",children:[t(W,{width:160,children:["Region",e(O,{children:"Manual composition"})]}),e(P,{})]}),a[0]=n):n=a[0],a[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{width:160,children:"Region"}),a[1]=r):r=a[1],a[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(x,{orientation:"horizontal",isEmpty:!0,children:[r,e(P,{children:e(R,{size:"sm",children:"This text is replaced by the em-dash placeholder"})})]}),a[2]=l):l=a[2],a[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(x,{orientation:"horizontal",isEmpty:!0,children:[t(W,{width:160,children:["Owner",e($,{children:"Not yet assigned"})]}),e(P,{})]}),a[3]=c):c=a[3],a[4]===Symbol.for("react.memo_cache_sentinel")?(o=t("div",{className:"w-[400px] flex flex-col gap-8",children:[n,l,c,t(x,{orientation:"horizontal",isEmpty:!0,children:[t(W,{width:160,children:["SSO provider",t($,{children:["Not connected —"," ",e(E,{href:"#",size:"md",children:"set up integration"})]})]}),e(P,{})]})]}),a[4]=o):o=a[4],o},meta:M},{name:"HorizontalWithActions",story:j,meta:M},{name:"HorizontalWithActionsMenuOnly",story:U,meta:M},{name:"WithInlineEdit",story:()=>{let t,n=(0,i.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(F,{}),n[0]=t):t=n[0],t},meta:M},{name:"HorizontalWithInlineEdit",story:()=>{let t,n=(0,i.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(F,{orientation:"horizontal"}),n[0]=t):t=n[0],t},meta:M},{name:"Mixed",story:V,meta:M},{name:"HorizontalMixed",story:B,meta:M}];function K({entry:e}){let{story:t,meta:n}=e,r={...n.args,...t.args},l="function"==typeof t||t.$$typeof?t:t.render||n.render||n.component,i=()=>c.default.createElement(l,r),o={args:r,globals:{theme:"light"},parameters:{...n.parameters,...t.parameters},viewMode:"story"};for(let e of[...n.decorators||[],...t.decorators||[]].reverse()){let t=i;i=()=>e(t,o)}return c.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},c.default.createElement("h2",{className:"text-sm mb-12"},e.name),c.default.createElement(i))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(c.default.createElement(window.WallarmDS.Root,null,Q.map((e,t)=>c.default.createElement(K,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,416 @@
+A person's photo on a rounded plate, falling back to initials or an icon while it loads, when it fails, or when there is none. It is decorative beside a visible name; standing alone, give it `aria-label` so it reads as an image. Add `AvatarContent` with `AvatarName` (and an optional `AvatarDescription`) for the user item: plate and name in one row. To let people change it, make the avatar the `FileUploadTrigger` (`asChild`) and give it `as='button'` — picking only previews, and your form uploads.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `on-status-change` | `((details: StatusChangeDetails) => void) \| undefined` | no | — |  |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `title` | `string \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `size` | `"sm" \| "md" \| "lg"` | no | `lg` |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+| `as` | `"span" \| undefined` | no | `span` | Root tag. 'button' makes the avatar itself interactive (e.g. inside FileUploadTrigger asChild). |
+| `as-child` | `false \| undefined` | no | `false` | Render the single child element as the root instead of `as`; takes precedence over it. |
+| `type` | `"button" \| "submit" \| "reset" \| undefined` | no | — |  |
+| `disabled` | `boolean \| undefined` | no | — |  |
+| `name` | `string \| undefined` | no | — |  |
+| `value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.AvatarContent` — `AvatarContentProps` in the declaration bundle.
+- `WallarmDS.AvatarDescription` — `AvatarDescriptionProps` in the declaration bundle.
+- `WallarmDS.AvatarFallback` — `AvatarFallbackProps` in the declaration bundle.
+- `WallarmDS.AvatarImage` — `AvatarImageProps` in the declaration bundle.
+- `WallarmDS.AvatarName` — `AvatarNameProps` in the declaration bundle.
+- `WallarmDS.AvatarOverlay` — `AvatarOverlayProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+A photo with an initials fallback — the fallback also covers the moment before the photo arrives.
+
+Source: Avatar/Avatar.stories.tsx#Basic
+
+### Sizes
+
+`sm` (20px) and `md` (24px, the nav-rail plate) are the compact sizes for user items; `lg` (32px,
+the default) is for rows and forms. Each row shows a photo, initials and the icon, then the same
+three inside a Branded frame.
+
+Source: Avatar/Avatar.stories.tsx#Sizes
+
+### WithName
+
+The user item (Figma 12557:5856): the plate and the name in one row, 6px apart. The name is
+`text-sm` at every size and truncates with an ellipsis when the row is narrow.
+
+Source: Avatar/Avatar.stories.tsx#WithName
+
+### WithDescription
+
+`AvatarDescription` adds a secondary line under the name — the email in the account menu. Both lines truncate.
+
+Source: Avatar/Avatar.stories.tsx#WithDescription
+
+### Fallback
+
+Initials are the first letters of the first and last word of `name`; without a name the person icon shows, whether the photo is missing or failed to load.
+
+Source: Avatar/Avatar.stories.tsx#Fallback
+
+### CustomIcon
+
+`icon` replaces the default person glyph whenever `name` gives no initials.
+
+Source: Avatar/Avatar.stories.tsx#CustomIcon
+
+### Branded
+
+Inside a Branded frame the empty plate takes the brand tint and stroke, initials and the icon take the brand colour, and a photo is unchanged.
+
+Source: Avatar/Avatar.stories.tsx#Branded
+
+### ClickToUpload
+
+Click the avatar, or focus it and press Enter, to pick a photo — hover and focus show the edit
+icon, and the pick only previews until your form saves.
+
+Source: Avatar/Avatar.stories.tsx#ClickToUpload
+
+### WithActions
+
+The settings-row pattern: explicit Remove and Replace buttons beside a plain avatar, with the accepted formats and size spelled out.
+
+Source: Avatar/Avatar.stories.tsx#WithActions
+
+### Uploading
+
+While the new photo uploads, disable the trigger and force the overlay with `visible` so it holds a `Loader`.
+
+Source: Avatar/Avatar.stories.tsx#Uploading
+
+## Story sources
+
+### Avatar/Avatar.stories.tsx
+
+```tsx
+import { useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Activity, RefreshCcw, Trash2 } from '../../icons';
+import { Button } from '../Button';
+import { FieldDescription, FieldLabel } from '../Field';
+import { FileUpload, FileUploadError, FileUploadTrigger, useFilePreviewUrl } from '../FileUpload';
+import { Loader } from '../Loader';
+import { HStack, VStack } from '../Stack';
+import {
+  Avatar,
+  AvatarContent,
+  AvatarDescription,
+  AvatarFallback,
+  AvatarImage,
+  AvatarName,
+  AvatarOverlay,
+  type AvatarProps,
+} from '.';
+
+// Deterministic "photo": no network, identical pixels in every screenshot run.
+const PHOTO = `data:image/svg+xml;utf8,${encodeURIComponent(
+  "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect width='64' height='64' fill='#8ec5fc'/><circle cx='32' cy='26' r='12' fill='#f6d5b8'/><rect x='14' y='42' width='36' height='22' rx='11' fill='#4b6cb7'/></svg>",
+)}`;
+
+const ACCEPT = 'image/png,image/jpeg,image/webp';
+const MAX_SIZE = 512 * 1024;
+
+const DESCRIPTION = [
+  "A person's photo on a rounded plate, falling back to initials or an icon while it loads, when it fails, or when there is none.",
+  'It is decorative beside a visible name; standing alone, give it `aria-label` so it reads as an image.',
+  'Add `AvatarContent` with `AvatarName` (and an optional `AvatarDescription`) for the user item: plate and name in one row.',
+  "To let people change it, make the avatar the `FileUploadTrigger` (`asChild`) and give it `as='button'` — picking only previews, and your form uploads.",
+].join(' ');
+
+const meta = {
+  title: 'Data Display/Avatar',
+  component: Avatar,
+  parameters: {
+    layout: 'centered',
+    docs: { description: { component: DESCRIPTION } },
+  },
+  argTypes: {
+    size: { control: 'select', options: ['sm', 'md', 'lg'] },
+  },
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+
+/** A photo with an initials fallback — the fallback also covers the moment before the photo arrives. */
+export const Basic: StoryFn<AvatarProps> = args => (
+  <Avatar data-testid='avatar' {...args}>
+    <AvatarImage src={PHOTO} />
+    <AvatarFallback name='Ada Lovelace' />
+  </Avatar>
+);
+
+const SIZES = ['sm', 'md', 'lg'] as const;
+
+/**
+ * `sm` (20px) and `md` (24px, the nav-rail plate) are the compact sizes for user items; `lg` (32px,
+ * the default) is for rows and forms. Each row shows a photo, initials and the icon, then the same
+ * three inside a Branded frame.
+ */
+export const Sizes: StoryFn<AvatarProps> = () => (
+  <VStack gap={16} align='start' data-testid='avatar'>
+    {SIZES.map(size => (
+      <HStack key={size} gap={12} align='center' data-testid={`avatar-${size}`}>
+        <Avatar size={size} data-testid={`avatar-${size}-photo`}>
+          <AvatarImage src={PHOTO} />
+          <AvatarFallback name='Ada Lovelace' />
+        </Avatar>
+        <Avatar size={size} data-testid={`avatar-${size}-initials`}>
+          <AvatarFallback name='Ada Lovelace' />
+        </Avatar>
+        <Avatar size={size} data-testid={`avatar-${size}-icon`}>
+          <AvatarFallback />
+        </Avatar>
+        <HStack gap={12} align='center' data-frame-style='branded'>
+          <Avatar size={size} data-testid={`avatar-${size}-branded-photo`}>
+            <AvatarImage src={PHOTO} />
+            <AvatarFallback name='Ada Lovelace' />
+          </Avatar>
+          <Avatar size={size} data-testid={`avatar-${size}-branded-initials`}>
+            <AvatarFallback name='Ada Lovelace' />
+          </Avatar>
+          <Avatar size={size} data-testid={`avatar-${size}-branded-icon`}>
+            <AvatarFallback />
+          </Avatar>
+        </HStack>
+        <span className='sb-annotation'>{size}</span>
+      </HStack>
+    ))}
+  </VStack>
+);
+
+/**
+ * The user item (Figma 12557:5856): the plate and the name in one row, 6px apart. The name is
+ * `text-sm` at every size and truncates with an ellipsis when the row is narrow.
+ */
+export const WithName: StoryFn<AvatarProps> = () => (
+  <VStack gap={16} align='start' data-testid='avatar'>
+    {(['sm', 'md'] as const).map(size => (
+      <VStack key={size} gap={8} align='start' data-testid={`avatar-${size}`}>
+        <Avatar size={size} data-testid={`avatar-${size}-photo`}>
+          <AvatarImage src={PHOTO} />
+          <AvatarFallback name='Artem Miskevich' />
+          <AvatarContent>
+            <AvatarName>Artem Miskevich</AvatarName>
+          </AvatarContent>
+        </Avatar>
+        <Avatar size={size} data-testid={`avatar-${size}-initials`}>
+          <AvatarFallback name='Artem Miskevich' />
+          <AvatarContent>
+            <AvatarName>Artem Miskevich</AvatarName>
+          </AvatarContent>
+        </Avatar>
+        <div data-frame-style='branded'>
+          <Avatar size={size} data-testid={`avatar-${size}-branded`}>
+            <AvatarFallback name='Artem Miskevich' />
+            <AvatarContent>
+              <AvatarName>Artem Miskevich</AvatarName>
+            </AvatarContent>
+          </Avatar>
+        </div>
+        <div className='w-120'>
+          <Avatar size={size} data-testid={`avatar-${size}-truncated`}>
+            <AvatarFallback name='Maximilian Alexander-Montgomery' />
+            <AvatarContent>
+              <AvatarName>Maximilian Alexander-Montgomery</AvatarName>
+            </AvatarContent>
+          </Avatar>
+        </div>
+      </VStack>
+    ))}
+  </VStack>
+);
+
+/** `AvatarDescription` adds a secondary line under the name — the email in the account menu. Both lines truncate. */
+export const WithDescription: StoryFn<AvatarProps> = () => (
+  <VStack gap={16} align='start' data-testid='avatar'>
+    <Avatar data-testid='avatar-photo'>
+      <AvatarImage src={PHOTO} />
+      <AvatarFallback name='Artem Miskevich' />
+      <AvatarContent>
+        <AvatarName>Artem Miskevich</AvatarName>
+        <AvatarDescription>admin@wallarm.com</AvatarDescription>
+      </AvatarContent>
+    </Avatar>
+    <Avatar size='md' data-testid='avatar-md'>
+      <AvatarFallback name='Artem Miskevich' />
+      <AvatarContent>
+        <AvatarName>Artem Miskevich</AvatarName>
+        <AvatarDescription>admin@wallarm.com</AvatarDescription>
+      </AvatarContent>
+    </Avatar>
+    <div className='w-160'>
+      <Avatar data-testid='avatar-truncated'>
+        <AvatarFallback />
+        <AvatarContent>
+          <AvatarName>Maximilian Alexander-Montgomery</AvatarName>
+          <AvatarDescription>maximilian.alexander-montgomery@wallarm.com</AvatarDescription>
+        </AvatarContent>
+      </Avatar>
+    </div>
+  </VStack>
+);
+
+/** Initials are the first letters of the first and last word of `name`; without a name the person icon shows, whether the photo is missing or failed to load. */
+export const Fallback: StoryFn<AvatarProps> = () => (
+  <HStack gap={12} align='center' data-testid='avatar'>
+    <Avatar>
+      <AvatarFallback name='Grace Hopper' />
+    </Avatar>
+    <Avatar>
+      <AvatarFallback />
+    </Avatar>
+    <Avatar data-testid='avatar-broken-initials'>
+      <AvatarImage src='/does-not-exist.png' />
+      <AvatarFallback name='Alan Turing' />
+    </Avatar>
+    <Avatar data-testid='avatar-broken-icon'>
+      <AvatarImage src='/does-not-exist.png' />
+      <AvatarFallback />
+    </Avatar>
+  </HStack>
+);
+
+/** `icon` replaces the default person glyph whenever `name` gives no initials. */
+export const CustomIcon: StoryFn<AvatarProps> = () => (
+  <Avatar data-testid='avatar'>
+    <AvatarFallback icon={Activity} />
+  </Avatar>
+);
+
+/** Inside a Branded frame the empty plate takes the brand tint and stroke, initials and the icon take the brand colour, and a photo is unchanged. */
+export const Branded: StoryFn<AvatarProps> = () => (
+  <HStack gap={12} align='center' data-frame-style='branded' data-testid='avatar'>
+    <Avatar>
+      <AvatarFallback />
+    </Avatar>
+    <Avatar>
+      <AvatarFallback name='Ada Lovelace' />
+    </Avatar>
+    <Avatar data-testid='avatar-branded-photo'>
+      <AvatarImage src={PHOTO} />
+      <AvatarFallback />
+    </Avatar>
+  </HStack>
+);
+
+const useAvatarUpload = (initial?: string) => {
+  const [stored, setStored] = useState(initial);
+  const [files, setFiles] = useState<File[]>([]);
+  const preview = useFilePreviewUrl(files[0]);
+  const remove = () => {
+    setStored(undefined);
+    setFiles([]);
+  };
+  return { src: preview ?? stored, files, setFiles, remove };
+};
+
+/**
+ * Click the avatar, or focus it and press Enter, to pick a photo — hover and focus show the edit
+ * icon, and the pick only previews until your form saves.
+ */
+export const ClickToUpload: StoryFn = () => {
+  const { src, files, setFiles } = useAvatarUpload();
+  return (
+    <FileUpload
+      data-testid='avatar-upload'
+      accept={ACCEPT}
+      maxFileSize={MAX_SIZE}
+      value={files}
+      onValueChange={setFiles}
+    >
+      <FileUploadTrigger asChild data-analytics-id='AVATAR_CHANGE'>
+        <Avatar as='button' aria-label='Change avatar'>
+          <AvatarImage src={src} />
+          <AvatarFallback />
+          <AvatarOverlay />
+        </Avatar>
+      </FileUploadTrigger>
+      <FileUploadError />
+    </FileUpload>
+  );
+};
+
+/** The settings-row pattern: explicit Remove and Replace buttons beside a plain avatar, with the accepted formats and size spelled out. */
+export const WithActions: StoryFn = () => {
+  const { src, files, setFiles, remove } = useAvatarUpload(PHOTO);
+  return (
+    <FileUpload
+      data-testid='avatar-upload'
+      accept={ACCEPT}
+      maxFileSize={MAX_SIZE}
+      value={files}
+      onValueChange={setFiles}
+    >
+      <HStack gap={12} align='center' className='w-[480px] justify-between'>
+        <VStack gap={0} align='start'>
+          <FieldLabel>Avatar</FieldLabel>
+          <FieldDescription>PNG, JPEG, or WebP · up to 512 KB</FieldDescription>
+        </VStack>
+        <HStack gap={12} align='center'>
+          {src && (
+            <Button
+              variant='ghost'
+              color='neutral'
+              size='small'
+              aria-label='Remove avatar'
+              data-testid='avatar-remove'
+              onClick={remove}
+            >
+              <Trash2 />
+            </Button>
+          )}
+          <FileUploadTrigger
+            variant='ghost'
+            color='neutral'
+            size='small'
+            aria-label='Replace avatar'
+          >
+            <RefreshCcw />
+          </FileUploadTrigger>
+          <Avatar data-testid='avatar'>
+            <AvatarImage src={src} />
+            <AvatarFallback />
+          </Avatar>
+        </HStack>
+      </HStack>
+      <FileUploadError />
+    </FileUpload>
+  );
+};
+
+/** While the new photo uploads, disable the trigger and force the overlay with `visible` so it holds a `Loader`. */
+export const Uploading: StoryFn = () => (
+  <FileUpload data-testid='avatar-upload' accept={ACCEPT}>
+    <FileUploadTrigger asChild disabled>
+      <Avatar as='button' aria-label='Change avatar' aria-busy>
+        <AvatarImage src={PHOTO} />
+        <AvatarFallback />
+        <AvatarOverlay visible>
+          <Loader size='md' />
+        </AvatarOverlay>
+      </Avatar>
+    </FileUploadTrigger>
+  </FileUpload>
+);
+```

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

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Data Display" 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/Avatar/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,a){let r,n;/**
+ * 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,i,o=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,p=(e,t,a,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let n of d(t))u.call(e,n)||n===a||c(e,n,{get:()=>t[n],enumerable:!(r=s(t,n))||r.enumerable});return e},h={},f={$dispatcherGuard:()=>N,$makeReadOnly:()=>M,$reset:()=>k,$structuralCheck:()=>z,c:()=>$,clearRenderCounterRegistry:()=>x,renderCounterRegistry:()=>D,useRenderCounter:()=>O};for(var y in f)c(h,y,{get:f[y],enumerable:!0});e.exports=p(c({},"__esModule",{value:!0}),h);var v=(n=null!=(r=a("C"))?o(m(r)):{},p(r&&r.__esModule?n:c(n,"default",{value:r,enumerable:!0}),r)),{useRef:g,useEffect:w,isValidElement:b}=v,_=null!=(l=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:v.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,S=Symbol.for("react.memo_cache_sentinel"),$="function"==typeof(null==(i=v.__COMPILER_RUNTIME)?void 0:i.c)?v.__COMPILER_RUNTIME.c:function(e){return v.useMemo(()=>{let t=Array(e);for(let a=0;a<e;a++)t[a]=S;return t[S]=!0,t},[])},R={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{R[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 A(e){return _.ReactCurrentDispatcher.current=e,_.ReactCurrentDispatcher.current}R.useMemoCache=e=>{if(null!=E)return E.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function N(e){let t=_.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.length&&(E=t),t===R)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.");A(R)}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&&(E=null),A(e)}else if(2===e)C.push(t),A(E);else if(3===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");A(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function k(e){for(let t=0;t<e.length;t++)e[t]=S}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var D=new Map;function x(){for(let e of D.values())e.forEach(e=>{e.count=0})}function O(e){let t=g(null);null!=t.current&&(t.current.count+=1),w(()=>{if(null==t.current){let a,r={count:0};null==(a=D.get(e))&&(a=new Set,D.set(e,a)),a.add(r),t.current=r}return()=>{var a;let r;null!==t.current&&(a=t.current,null!=(r=D.get(e))&&r.delete(a))}})}var W=new Set;function z(e,t,a,r,n,l){function i(e,t,i,o){let c=`${r}:${l} [${n}] ${a}${i} changed from ${e} to ${t} at depth ${o}`;W.has(c)||(W.add(c),console.error(c))}!function e(t,a,r,n){if(!(n>2)){if(t!==a)if(typeof t!=typeof a)i(`type ${typeof t}`,`type ${typeof a}`,r,n);else if("object"==typeof t){let l=Array.isArray(t),o=Array.isArray(a);if(null===t&&null!==a)i("null",`type ${typeof a}`,r,n);else if(null===a)i(`type ${typeof t}`,"null",r,n);else if(t instanceof Map)if(a instanceof Map)if(t.size!==a.size)i(`Map instance with size ${t.size}`,`Map instance with size ${a.size}`,r,n);else for(let[l,o]of t)a.has(l)?e(o,a.get(l),`${r}.get(${l})`,n+1):i(`Map instance with key ${l}`,`Map instance without key ${l}`,r,n);else i("Map instance","other value",r,n);else if(a instanceof Map)i("other value","Map instance",r,n);else if(t instanceof Set)if(a instanceof Set)if(t.size!==a.size)i(`Set instance with size ${t.size}`,`Set instance with size ${a.size}`,r,n);else for(let e of a)t.has(e)||i(`Set instance without element ${e}`,`Set instance with element ${e}`,r,n);else i("Set instance","other value",r,n);else if(a instanceof Set)i("other value","Set instance",r,n);else if(l||o)if(l!==o)i(`type ${l?"array":"object"}`,`type ${o?"array":"object"}`,r,n);else if(t.length!==a.length)i(`array with length ${t.length}`,`array with length ${a.length}`,r,n);else for(let l=0;l<t.length;l++)e(t[l],a[l],`${r}[${l}]`,n+1);else if(b(t)||b(a))b(t)!==b(a)?i(`type ${b(t)?"React element":"object"}`,`type ${b(a)?"React element":"object"}`,r,n):t.type!==a.type?i(`React element of type ${t.type}`,`React element of type ${a.type}`,r,n):e(t.props,a.props,`[props of ${r}]`,n+1);else{for(let e in a)e in t||i(`object without key ${e}`,`object with key ${e}`,r,n);for(let l in t)l in a?e(t[l],a[l],`${r}.${l}`,n+1):i(`object with key ${l}`,`object without key ${l}`,r,n)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(a)?isNaN(t)!==isNaN(a)&&i(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(a)?"NaN":"non-NaN value"}`,r,n):t!==a&&i(t,a,r,n)}}}(e,t,"",0)}},p(e,t,a){let r=new WeakMap,n=new WeakMap;function l(e,t,a){let l=t,i=a;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!=i.ref&&!l.prototype?.isReactComponent){let t=l,a=r.get(e);a||(a=new WeakMap,r.set(e,a));let n=a.get(t);n||((n=e.forwardRef((e,a)=>t({...e,ref:a}))).displayName=t.displayName??t.name,a.set(t,n)),l=n}if("string"==typeof l&&"boolean"==typeof i.inert&&((i={...i}).inert?i.inert="":delete i.inert),"string"==typeof l)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in i&&(i={...i,[t]:i[e]},delete i[e]);return"string"==typeof l&&null!=i.ref&&(l=function(e,t){let a=n.get(e);a||(a=new Map,n.set(e,a));let r=a.get(t);if(r)return r;let l=e.forwardRef((a,r)=>{let n=e.useRef(null);if(!n.current||n.current.original!==r){let e;n.current={original:r,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof r){let a=r(t);e="function"==typeof a?a:void 0}else r&&(r.current=t)}}}return e.createElement(t,{...a,ref:n.current.callback})});return l.displayName=`CanvasHost(${t})`,a.set(t,l),l}(e,l)),{type:l,props:i}}function i(e){let t=(t,a,r)=>{let n=l(e,t,a??{});return e.createElement(n.type,void 0===r?n.props:{...n.props,key:r})};return{jsx:t,jsxs:(t,a,r)=>{let n=l(e,t,a??{}),{children:i,...o}=n.props;return e.createElement(n.type,void 0===r?o:{...o,key:r},...Array.isArray(i)?i:[i])},jsxDEV:t,Fragment:e.Fragment}}function o(e){return{...e,createElement:(t,a,...r)=>{let n=l(e,t,a??{});return e.createElement(n.type,n.props,...r)},cloneElement:(t,a,...r)=>{let n=e.cloneElement(t,a??void 0,...r),i=n.ref,o=l(e,n.type,{...n.props,ref:i});return o.type===n.type&&"string"!=typeof n.type?n:e.createElement(o.type,{...o.props,key:n.key})}}}a.d(t,{MA:()=>i,YJ:()=>o})},C(e,t,a){a.r(t);let r=(0,a("p").YJ)(window.React),{Children:n,Component:l,Fragment:i,Profiler:o,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:u,cloneElement:p,createContext:h,createElement:f,createFactory:y,createRef:v,forwardRef:g,isValidElement:w,lazy:b,memo:_,startTransition:S,unstable_act:$,useCallback:R,useContext:E,useDebugValue:A,useDeferredValue:C,useEffect:N,useId:k,useImperativeHandle:M,useInsertionEffect:D,useLayoutEffect:x,useMemo:O,useReducer:W,useRef:z,useState:T,useSyncExternalStore:j,useTransition:I,version:P,use:L}=r;a.d(t,{},{Children:n,Component:l,Fragment:i,Profiler:o,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:u,cloneElement:p,createContext:h,createElement:f,createFactory:y,createRef:v,default:r,forwardRef:g,isValidElement:w,lazy:b,memo:_,startTransition:S,unstable_act:$,use:L,useCallback:R,useContext:E,useDebugValue:A,useDeferredValue:C,useEffect:N,useId:k,useImperativeHandle:M,useInsertionEffect:D,useLayoutEffect:x,useMemo:O,useReducer:W,useRef:z,useState:T,useSyncExternalStore:j,useTransition:I,version:P})}},t={};function a(r){var n=t[r];if(void 0!==n)return n.exports;var l=t[r]={exports:{}};return e[r](l,l.exports,a),l.exports}a.d=(e,t,r)=>{var n=(t,r)=>{for(var n in t)a.o(t,n)&&!a.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,[r]:t[n]})};n(t,"get"),n(r,"value")},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.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:n}=(0,a("p").MA)(window.React);var l=a("vD"),i=a("C");let o=window.WallarmDS.Icons.Activity,c=window.WallarmDS.Icons.RefreshCcw,s=window.WallarmDS.Icons.Trash2,d=window.WallarmDS.Button,m=window.WallarmDS.FieldDescription,u=window.WallarmDS.FieldLabel,p=window.WallarmDS.FileUpload,h=window.WallarmDS.FileUploadError,f=window.WallarmDS.FileUploadTrigger,y=window.WallarmDS.useFilePreviewUrl,v=window.WallarmDS.Loader,g=window.WallarmDS.HStack,w=window.WallarmDS.VStack,b=window.WallarmDS.Avatar,_=window.WallarmDS.AvatarContent,S=window.WallarmDS.AvatarDescription,$=window.WallarmDS.AvatarFallback,R=window.WallarmDS.AvatarImage,E=window.WallarmDS.AvatarName,A=window.WallarmDS.AvatarOverlay,C=`data:image/svg+xml;utf8,${encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect width='64' height='64' fill='#8ec5fc'/><circle cx='32' cy='26' r='12' fill='#f6d5b8'/><rect x='14' y='42' width='36' height='22' rx='11' fill='#4b6cb7'/></svg>")}`,N="image/png,image/jpeg,image/webp",k={title:"Data Display/Avatar",component:b,parameters:{layout:"centered",docs:{description:{component:"A person's photo on a rounded plate, falling back to initials or an icon while it loads, when it fails, or when there is none. It is decorative beside a visible name; standing alone, give it `aria-label` so it reads as an image. Add `AvatarContent` with `AvatarName` (and an optional `AvatarDescription`) for the user item: plate and name in one row. To let people change it, make the avatar the `FileUploadTrigger` (`asChild`) and give it `as='button'` — picking only previews, and your form uploads."}}},argTypes:{size:{control:"select",options:["sm","md","lg"]}}},M=["sm","md","lg"],D=e=>{let t,a,r,n=(0,l.c)(5),[o,c]=(0,i.useState)(e);n[0]===Symbol.for("react.memo_cache_sentinel")?(t=[],n[0]=t):t=n[0];let[s,d]=(0,i.useState)(t),m=y(s[0]);n[1]===Symbol.for("react.memo_cache_sentinel")?(a=()=>{c(void 0),d([])},n[1]=a):a=n[1];let u=a,p=m??o;return n[2]!==s||n[3]!==p?(r={src:p,files:s,setFiles:d,remove:u},n[2]=s,n[3]=p,n[4]=r):r=n[4],r};function x(a){return t(g,{gap:12,align:"center","data-testid":`avatar-${a}`,children:[t(b,{size:a,"data-testid":`avatar-${a}-photo`,children:[e(R,{src:C}),e($,{name:"Ada Lovelace"})]}),e(b,{size:a,"data-testid":`avatar-${a}-initials`,children:e($,{name:"Ada Lovelace"})}),e(b,{size:a,"data-testid":`avatar-${a}-icon`,children:e($,{})}),t(g,{gap:12,align:"center","data-frame-style":"branded",children:[t(b,{size:a,"data-testid":`avatar-${a}-branded-photo`,children:[e(R,{src:C}),e($,{name:"Ada Lovelace"})]}),e(b,{size:a,"data-testid":`avatar-${a}-branded-initials`,children:e($,{name:"Ada Lovelace"})}),e(b,{size:a,"data-testid":`avatar-${a}-branded-icon`,children:e($,{})})]}),e("span",{className:"sb-annotation",children:a})]},a)}function O(a){return t(w,{gap:8,align:"start","data-testid":`avatar-${a}`,children:[t(b,{size:a,"data-testid":`avatar-${a}-photo`,children:[e(R,{src:C}),e($,{name:"Artem Miskevich"}),e(_,{children:e(E,{children:"Artem Miskevich"})})]}),t(b,{size:a,"data-testid":`avatar-${a}-initials`,children:[e($,{name:"Artem Miskevich"}),e(_,{children:e(E,{children:"Artem Miskevich"})})]}),e("div",{"data-frame-style":"branded",children:t(b,{size:a,"data-testid":`avatar-${a}-branded`,children:[e($,{name:"Artem Miskevich"}),e(_,{children:e(E,{children:"Artem Miskevich"})})]})}),e("div",{className:"w-120",children:t(b,{size:a,"data-testid":`avatar-${a}-truncated`,children:[e($,{name:"Maximilian Alexander-Montgomery"}),e(_,{children:e(E,{children:"Maximilian Alexander-Montgomery"})})]})})]},a)}let W=[{name:"Basic",story:a=>{let r,n,i,o=(0,l.c)(4);return o[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(R,{src:C}),n=e($,{name:"Ada Lovelace"}),o[0]=r,o[1]=n):(r=o[0],n=o[1]),o[2]!==a?(i=t(b,{"data-testid":"avatar",...a,children:[r,n]}),o[2]=a,o[3]=i):i=o[3],i},meta:k},{name:"Sizes",story:()=>{let t,a=(0,l.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(w,{gap:16,align:"start","data-testid":"avatar",children:M.map(x)}),a[0]=t):t=a[0],t},meta:k},{name:"WithName",story:()=>{let t,a,r=(0,l.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=["sm","md"],r[0]=t):t=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(w,{gap:16,align:"start","data-testid":"avatar",children:t.map(O)}),r[1]=a):a=r[1],a},meta:k},{name:"WithDescription",story:()=>{let a,r,n,i,o,c,s,d=(0,l.c)(7);return d[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(R,{src:C}),r=e($,{name:"Artem Miskevich"}),d[0]=a,d[1]=r):(a=d[0],r=d[1]),d[2]===Symbol.for("react.memo_cache_sentinel")?(n=t(b,{"data-testid":"avatar-photo",children:[a,r,t(_,{children:[e(E,{children:"Artem Miskevich"}),e(S,{children:"admin@wallarm.com"})]})]}),d[2]=n):n=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(i=e($,{name:"Artem Miskevich"}),d[3]=i):i=d[3],d[4]===Symbol.for("react.memo_cache_sentinel")?(o=t(b,{size:"md","data-testid":"avatar-md",children:[i,t(_,{children:[e(E,{children:"Artem Miskevich"}),e(S,{children:"admin@wallarm.com"})]})]}),d[4]=o):o=d[4],d[5]===Symbol.for("react.memo_cache_sentinel")?(c=e($,{}),d[5]=c):c=d[5],d[6]===Symbol.for("react.memo_cache_sentinel")?(s=t(w,{gap:16,align:"start","data-testid":"avatar",children:[n,o,e("div",{className:"w-160",children:t(b,{"data-testid":"avatar-truncated",children:[c,t(_,{children:[e(E,{children:"Maximilian Alexander-Montgomery"}),e(S,{children:"maximilian.alexander-montgomery@wallarm.com"})]})]})})]}),d[6]=s):s=d[6],s},meta:k},{name:"Fallback",story:()=>{let a,r,n,i,o=(0,l.c)(4);return o[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(b,{children:e($,{name:"Grace Hopper"})}),o[0]=a):a=o[0],o[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(b,{children:e($,{})}),o[1]=r):r=o[1],o[2]===Symbol.for("react.memo_cache_sentinel")?(n=t(b,{"data-testid":"avatar-broken-initials",children:[e(R,{src:"/does-not-exist.png"}),e($,{name:"Alan Turing"})]}),o[2]=n):n=o[2],o[3]===Symbol.for("react.memo_cache_sentinel")?(i=t(g,{gap:12,align:"center","data-testid":"avatar",children:[a,r,n,t(b,{"data-testid":"avatar-broken-icon",children:[e(R,{src:"/does-not-exist.png"}),e($,{})]})]}),o[3]=i):i=o[3],i},meta:k},{name:"CustomIcon",story:()=>{let t,a=(0,l.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(b,{"data-testid":"avatar",children:e($,{icon:o})}),a[0]=t):t=a[0],t},meta:k},{name:"Branded",story:()=>{let a,r,n,i=(0,l.c)(3);return i[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(b,{children:e($,{})}),i[0]=a):a=i[0],i[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(b,{children:e($,{name:"Ada Lovelace"})}),i[1]=r):r=i[1],i[2]===Symbol.for("react.memo_cache_sentinel")?(n=t(g,{gap:12,align:"center","data-frame-style":"branded","data-testid":"avatar",children:[a,r,t(b,{"data-testid":"avatar-branded-photo",children:[e(R,{src:C}),e($,{})]})]}),i[2]=n):n=i[2],n},meta:k},{name:"ClickToUpload",story:()=>{let a,r,n,i,o,c,s=(0,l.c)(11),{src:d,files:m,setFiles:u}=D();return s[0]!==d?(a=e(R,{src:d}),s[0]=d,s[1]=a):a=s[1],s[2]===Symbol.for("react.memo_cache_sentinel")?(r=e($,{}),n=e(A,{}),s[2]=r,s[3]=n):(r=s[2],n=s[3]),s[4]!==a?(i=e(f,{asChild:!0,"data-analytics-id":"AVATAR_CHANGE",children:t(b,{as:"button","aria-label":"Change avatar",children:[a,r,n]})}),s[4]=a,s[5]=i):i=s[5],s[6]===Symbol.for("react.memo_cache_sentinel")?(o=e(h,{}),s[6]=o):o=s[6],s[7]!==m||s[8]!==u||s[9]!==i?(c=t(p,{"data-testid":"avatar-upload",accept:N,maxFileSize:524288,value:m,onValueChange:u,children:[i,o]}),s[7]=m,s[8]=u,s[9]=i,s[10]=c):c=s[10],c},meta:k},{name:"WithActions",story:()=>{let a,r,n,i,o,y,v,_,S,E=(0,l.c)(18),{src:A,files:k,setFiles:M,remove:x}=D(C);return E[0]===Symbol.for("react.memo_cache_sentinel")?(a=t(w,{gap:0,align:"start",children:[e(u,{children:"Avatar"}),e(m,{children:"PNG, JPEG, or WebP · up to 512 KB"})]}),E[0]=a):a=E[0],E[1]!==x||E[2]!==A?(r=A&&e(d,{variant:"ghost",color:"neutral",size:"small","aria-label":"Remove avatar","data-testid":"avatar-remove",onClick:x,children:e(s,{})}),E[1]=x,E[2]=A,E[3]=r):r=E[3],E[4]===Symbol.for("react.memo_cache_sentinel")?(n=e(f,{variant:"ghost",color:"neutral",size:"small","aria-label":"Replace avatar",children:e(c,{})}),E[4]=n):n=E[4],E[5]!==A?(i=e(R,{src:A}),E[5]=A,E[6]=i):i=E[6],E[7]===Symbol.for("react.memo_cache_sentinel")?(o=e($,{}),E[7]=o):o=E[7],E[8]!==i?(y=t(b,{"data-testid":"avatar",children:[i,o]}),E[8]=i,E[9]=y):y=E[9],E[10]!==r||E[11]!==y?(v=t(g,{gap:12,align:"center",className:"w-[480px] justify-between",children:[a,t(g,{gap:12,align:"center",children:[r,n,y]})]}),E[10]=r,E[11]=y,E[12]=v):v=E[12],E[13]===Symbol.for("react.memo_cache_sentinel")?(_=e(h,{}),E[13]=_):_=E[13],E[14]!==k||E[15]!==M||E[16]!==v?(S=t(p,{"data-testid":"avatar-upload",accept:N,maxFileSize:524288,value:k,onValueChange:M,children:[v,_]}),E[14]=k,E[15]=M,E[16]=v,E[17]=S):S=E[17],S},meta:k},{name:"Uploading",story:()=>{let a,r,n,i=(0,l.c)(3);return i[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(R,{src:C}),r=e($,{}),i[0]=a,i[1]=r):(a=i[0],r=i[1]),i[2]===Symbol.for("react.memo_cache_sentinel")?(n=e(p,{"data-testid":"avatar-upload",accept:N,children:e(f,{asChild:!0,disabled:!0,children:t(b,{as:"button","aria-label":"Change avatar","aria-busy":!0,children:[a,r,e(A,{visible:!0,children:e(v,{size:"md"})})]})})}),i[2]=n):n=i[2],n},meta:k}];function z({entry:e}){let{story:t,meta:a}=e,r={...a.args,...t.args},n="function"==typeof t||t.$$typeof?t:t.render||a.render||a.component,l=()=>i.default.createElement(n,r),o={args:r,globals:{theme:"light"},parameters:{...a.parameters,...t.parameters},viewMode:"story"};for(let e of[...a.decorators||[],...t.decorators||[]].reverse()){let t=l;l=()=>e(t,o)}return i.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},i.default.createElement("h2",{className:"text-sm mb-12"},e.name),i.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(i.default.createElement(window.WallarmDS.Root,null,W.map((e,t)=>i.default.createElement(z,{key:t,entry:e})))),t}}})();