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

package/dist/project/components/LineChart/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/LineChart/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,a;/**
+ * 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,m=Object.getOwnPropertyNames,d=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty,u=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of m(t))h.call(e,a)||a===r||c(e,a,{get:()=>t[a],enumerable:!(n=s(t,a))||n.enumerable});return e},y={},f={$dispatcherGuard:()=>N,$makeReadOnly:()=>F,$reset:()=>E,$structuralCheck:()=>M,c:()=>x,clearRenderCounterRegistry:()=>K,renderCounterRegistry:()=>D,useRenderCounter:()=>$};for(var p in f)c(y,p,{get:f[p],enumerable:!0});e.exports=u(c({},"__esModule",{value:!0}),y);var _=(a=null!=(n=r("C"))?o(d(n)):{},u(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:S,useEffect:b,isValidElement:k}=_,w=null!=(l=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:_.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,g=Symbol.for("react.memo_cache_sentinel"),x="function"==typeof(null==(i=_.__COMPILER_RUNTIME)?void 0:i.c)?_.__COMPILER_RUNTIME.c:function(e){return _.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=g;return t[g]=!0,t},[])},v={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{v[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 C=null;function R(e){return w.ReactCurrentDispatcher.current=e,w.ReactCurrentDispatcher.current}v.useMemoCache=e=>{if(null!=C)return C.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var T=[];function N(e){let t=w.ReactCurrentDispatcher.current;if(0===e){if(T.push(t),1===T.length&&(C=t),t===v)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(v)}else if(1===e){let e=T.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===T.length&&(C=null),R(e)}else if(2===e)T.push(t),R(C);else if(3===e){let e=T.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 E(e){for(let t=0;t<e.length;t++)e[t]=g}function F(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var D=new Map;function K(){for(let e of D.values())e.forEach(e=>{e.count=0})}function $(e){let t=S(null);null!=t.current&&(t.current.count+=1),b(()=>{if(null==t.current){let r,n={count:0};null==(r=D.get(e))&&(r=new Set,D.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=D.get(e))&&n.delete(r))}})}var W=new Set;function M(e,t,r,n,a,l){function i(e,t,i,o){let c=`${n}:${l} [${a}] ${r}${i} changed from ${e} to ${t} at depth ${o}`;W.has(c)||(W.add(c),console.error(c))}!function e(t,r,n,a){if(!(a>2)){if(t!==r)if(typeof t!=typeof r)i(`type ${typeof t}`,`type ${typeof r}`,n,a);else if("object"==typeof t){let l=Array.isArray(t),o=Array.isArray(r);if(null===t&&null!==r)i("null",`type ${typeof r}`,n,a);else if(null===r)i(`type ${typeof t}`,"null",n,a);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)i(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,a);else for(let[l,o]of t)r.has(l)?e(o,r.get(l),`${n}.get(${l})`,a+1):i(`Map instance with key ${l}`,`Map instance without key ${l}`,n,a);else i("Map instance","other value",n,a);else if(r instanceof Map)i("other value","Map instance",n,a);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)i(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,a);else for(let e of r)t.has(e)||i(`Set instance without element ${e}`,`Set instance with element ${e}`,n,a);else i("Set instance","other value",n,a);else if(r instanceof Set)i("other value","Set instance",n,a);else if(l||o)if(l!==o)i(`type ${l?"array":"object"}`,`type ${o?"array":"object"}`,n,a);else if(t.length!==r.length)i(`array with length ${t.length}`,`array with length ${r.length}`,n,a);else for(let l=0;l<t.length;l++)e(t[l],r[l],`${n}[${l}]`,a+1);else if(k(t)||k(r))k(t)!==k(r)?i(`type ${k(t)?"React element":"object"}`,`type ${k(r)?"React element":"object"}`,n,a):t.type!==r.type?i(`React element of type ${t.type}`,`React element of type ${r.type}`,n,a):e(t.props,r.props,`[props of ${n}]`,a+1);else{for(let e in r)e in t||i(`object without key ${e}`,`object with key ${e}`,n,a);for(let l in t)l in r?e(t[l],r[l],`${n}.${l}`,a+1):i(`object with key ${l}`,`object without key ${l}`,n,a)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&i(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,a):t!==r&&i(t,r,n,a)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,a=new WeakMap;function l(e,t,r){let l=t,i=r;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,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let a=r.get(t);a||((a=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,a)),l=a}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 r=a.get(e);r||(r=new Map,a.set(e,r));let n=r.get(t);if(n)return n;let l=e.forwardRef((r,n)=>{let a=e.useRef(null);if(!a.current||a.current.original!==n){let e;a.current={original:n,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof n){let r=n(t);e="function"==typeof r?r:void 0}else n&&(n.current=t)}}}return e.createElement(t,{...r,ref:a.current.callback})});return l.displayName=`CanvasHost(${t})`,r.set(t,l),l}(e,l)),{type:l,props:i}}function i(e){let t=(t,r,n)=>{let a=l(e,t,r??{});return e.createElement(a.type,void 0===n?a.props:{...a.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let a=l(e,t,r??{}),{children:i,...o}=a.props;return e.createElement(a.type,void 0===n?o:{...o,key:n},...Array.isArray(i)?i:[i])},jsxDEV:t,Fragment:e.Fragment}}function o(e){return{...e,createElement:(t,r,...n)=>{let a=l(e,t,r??{});return e.createElement(a.type,a.props,...n)},cloneElement:(t,r,...n)=>{let a=e.cloneElement(t,r??void 0,...n),i=a.ref,o=l(e,a.type,{...a.props,ref:i});return o.type===a.type&&"string"!=typeof a.type?a:e.createElement(o.type,{...o.props,key:a.key})}}}r.d(t,{MA:()=>i,YJ:()=>o})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:a,Component:l,Fragment:i,Profiler:o,PureComponent:c,StrictMode:s,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:h,cloneElement:u,createContext:y,createElement:f,createFactory:p,createRef:_,forwardRef:S,isValidElement:b,lazy:k,memo:w,startTransition:g,unstable_act:x,useCallback:v,useContext:C,useDebugValue:R,useDeferredValue:T,useEffect:N,useId:E,useImperativeHandle:F,useInsertionEffect:D,useLayoutEffect:K,useMemo:$,useReducer:W,useRef:M,useState:L,useSyncExternalStore:O,useTransition:G,version:I,use:A}=n;r.d(t,{},{Children:a,Component:l,Fragment:i,Profiler:o,PureComponent:c,StrictMode:s,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:h,cloneElement:u,createContext:y,createElement:f,createFactory:p,createRef:_,default:n,forwardRef:S,isValidElement:b,lazy:k,memo:w,startTransition:g,unstable_act:x,use:A,useCallback:v,useContext:C,useDebugValue:R,useDeferredValue:T,useEffect:N,useId:E,useImperativeHandle:F,useInsertionEffect:D,useLayoutEffect:K,useMemo:$,useReducer:W,useRef:M,useState:L,useSyncExternalStore:O,useTransition:G,version:I})}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var l=t[n]={exports:{}};return e[n](l,l.exports,r),l.exports}r.d=(e,t,n)=>{var a=(t,n)=>{for(var a in t)r.o(t,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,[n]:t[a]})};a(t,"get"),a(n,"value")},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.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:n,Fragment:a}=(0,r("p").MA)(window.React);var l=r("vD"),i=r("C");let o=new Intl.NumberFormat("en-US"),c=e=>t=>`${e(t.from)} → ${e(t.to)}`,s=(e,t,r)=>{let n=43758.5453*Math.sin((e+t)*r);return n-Math.floor(n)},m=(e,t=1)=>{let r=new Date(2025,0,1,0,0,0).getTime(),n=[];for(let a=0;a<e;a++){let e=r+60*a*6e4,l=Math.round(120+30*Math.sin((a+t)/4)+(s(a,t,12.9898)-.5)*80),i=Math.round(24+10*Math.cos((a+t)/5)+(s(a,t,78.233)-.5)*32),o=Math.round(80+14*Math.sin((a+t)/6)+(s(a,t,39.346)-.5)*40);n.push({timestamp:e,requests:l,errors:i,latency:o})}return n},d=[{key:"requests",label:"Requests",color:"brand"}],h=[{key:"requests",label:"Requests",color:"brand"},{key:"errors",label:"Errors",color:"red"},{key:"latency",label:"Latency",color:"blue"}],u=[{key:"requests",label:"Requests",color:"brand"},{key:"errors",label:"Errors (target)",color:"red",variant:"dashed"}],y=[{key:"requests",label:"Requests",color:"var(--color-violet-500)"},{key:"errors",label:"Errors",color:"var(--color-emerald-500)"}],f=m(24),p=m(24,1),_=m(24,7),S=(()=>{let e=new Date(2024,0,1,0,0,0).getTime(),t=[];for(let r=0;r<60;r++){let n=e+24*r*36e5,a=Math.round(1e3+400*Math.sin(r/9)+r%13*12),l=Math.round(80+30*Math.cos(r/11)+r%7*3);t.push({timestamp:n,requests:a,errors:l})}return t})(),b=m(1e3),k=[{timestamp:new Date(2025,0,1,12,0,0).getTime(),requests:142}],w=f.map((e,t)=>t>=6&&t<=8||t>=15&&t<=16?{...e,errors:null}:e),g={requests:" req",errors:" err",latency:" ms"},x=window.WallarmDS.Icons.FilterX,v=window.WallarmDS.Icons.RefreshCcw,C=window.WallarmDS.Icons.ZoomOut,R=window.WallarmDS.Button,T=window.WallarmDS.Skeleton,N=window.WallarmDS.HStack,E=window.WallarmDS.Tooltip,F=window.WallarmDS.TooltipContent,D=window.WallarmDS.TooltipTrigger,K=window.WallarmDS.Chart,$=window.WallarmDS.ChartActions,W=window.WallarmDS.ChartHeader,M=window.WallarmDS.ChartTitle,L=window.WallarmDS.useChartTimeFormatters,O=window.WallarmDS.MetricDelta,G=window.WallarmDS.MetricHeader,I=window.WallarmDS.MetricValue,A=window.WallarmDS.LineChart,j=window.WallarmDS.LineChartBody,q=window.WallarmDS.LineChartEmpty,P=window.WallarmDS.LineChartGrid,z=window.WallarmDS.LineChartHoverPopover,H=window.WallarmDS.LineChartHoverPopoverDot,V=window.WallarmDS.LineChartHoverPopoverRow,X=window.WallarmDS.LineChartHoverPopoverTimestamp,Z=window.WallarmDS.LineChartLegend,U=window.WallarmDS.LineChartLegendItem,B=window.WallarmDS.LineChartLine,J=window.WallarmDS.LineChartTooltip,Y=window.WallarmDS.LineChartXAxis,Q=window.WallarmDS.LineChartYAxis,ee=window.WallarmDS.LineChartZoomBrush,et=e=>{let t;return t=Number(e),o.format(t)},er={title:"Data Display/SimpleCharts/LineChart",component:A,subcomponents:{LineChartBody:j,LineChartGrid:P,LineChartXAxis:Y,LineChartYAxis:Q,LineChartLine:B,LineChartTooltip:J,LineChartHoverPopover:z,LineChartHoverPopoverTimestamp:X,LineChartHoverPopoverRow:V,LineChartHoverPopoverDot:H,LineChartLegend:Z,LineChartLegendItem:U,LineChartZoomBrush:ee,LineChartEmpty:q},parameters:{layout:"padded",design:{type:"figma",url:"https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7490-123142&m=dev"},docs:{description:{component:"A time series in the family's card — request volume, error rate, latency, anything where the X axis reads left to right; reach for `BarList` for a top-N comparison and `PieChart` for a share of a total. Every part is an opt-in child, so a bare sparkline and a fully instrumented panel are the same component with different children, and hover, filtering and zoom all travel through one context."}}},tags:["autodocs"]},en=()=>{let r,n,a,i,o,c,s,m=(0,l.c)(11),{formatHour:h,formatHourWithTimezone:u}=L();return m[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{children:e(M,{children:"Requests per hour"})}),m[0]=r):r=m[0],m[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(P,{}),m[1]=n):n=m[1],m[2]!==h?(a=e(Y,{tickFormatter:h,minTickGap:32}),m[2]=h,m[3]=a):a=m[3],m[4]===Symbol.for("react.memo_cache_sentinel")?(i=e(Q,{tickFormatter:et}),o=e(B,{seriesKey:"requests",curve:"linear"}),m[4]=i,m[5]=o):(i=m[4],o=m[5]),m[6]!==u?(c=e(J,{xTickFormatter:u}),m[6]=u,m[7]=c):c=m[7],m[8]!==a||m[9]!==c?(s=e("div",{className:"w-560",children:t(K,{children:[r,e(A,{data:f,series:d,xKey:"timestamp",children:t(j,{children:[n,a,i,o,c]})})]})}),m[8]=a,m[9]=c,m[10]=s):s=m[10],s};en.parameters={design:{type:"figma",url:"https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7490-123143&m=dev"}};let ea=()=>{let r,n,a,i,o,c,s,m,d=(0,l.c)(12),{formatHour:u,formatHourWithTimezone:y}=L();return d[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{children:e(M,{children:"Traffic, errors, and latency"})}),d[0]=r):r=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(Z,{children:h.map(ey)}),d[1]=n):n=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(P,{}),d[2]=a):a=d[2],d[3]!==u?(i=e(Y,{tickFormatter:u,minTickGap:32}),d[3]=u,d[4]=i):i=d[4],d[5]===Symbol.for("react.memo_cache_sentinel")?(o=e(Q,{tickFormatter:et}),c=h.map(ef),d[5]=o,d[6]=c):(o=d[5],c=d[6]),d[7]!==y?(s=e(J,{xTickFormatter:y}),d[7]=y,d[8]=s):s=d[8],d[9]!==i||d[10]!==s?(m=e("div",{className:"w-560",children:t(K,{"data-testid":"chart",children:[r,t(A,{"data-testid":"line-chart",data:f,series:h,xKey:"timestamp",children:[n,t(j,{children:[a,i,o,c,s]})]})]})}),d[9]=i,d[10]=s,d[11]=m):m=d[11],m};ea.parameters={design:{type:"figma",url:"https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7509-2355&m=dev"}};let el=t=>{let r,n,a=(0,l.c)(4),{series:i}=t,o=void 0===i?h:i;return a[0]!==o?(r=o.map(ep),a[0]=o,a[1]=r):r=a[1],a[2]!==r?(n=e(Z,{children:r}),a[2]=r,a[3]=n):n=a[3],n},ei=()=>{let r,n,a,i,o,c,s,m,d=(0,l.c)(12),{formatHour:u,formatHourWithTimezone:y}=L();return d[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{children:e(M,{children:"Requests per hour"})}),d[0]=r):r=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(n=t("div",{className:"flex items-center justify-between pr-8",children:[t(G,{className:"px-16",children:[e(I,{children:2903}),e(O,{value:10,trend:"up",sentiment:"negative"})]}),e(el,{})]}),d[1]=n):n=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(P,{}),d[2]=a):a=d[2],d[3]!==u?(i=e(Y,{tickFormatter:u,minTickGap:32}),d[3]=u,d[4]=i):i=d[4],d[5]===Symbol.for("react.memo_cache_sentinel")?(o=e(Q,{tickFormatter:et}),c=h.map(e_),d[5]=o,d[6]=c):(o=d[5],c=d[6]),d[7]!==y?(s=e(J,{xTickFormatter:y}),d[7]=y,d[8]=s):s=d[8],d[9]!==i||d[10]!==s?(m=e("div",{className:"w-800",children:t(K,{children:[r,t(A,{data:f,series:h,xKey:"timestamp",children:[n,t(j,{children:[a,i,o,c,s]})]})]})}),d[9]=i,d[10]=s,d[11]=m):m=d[11],m};ei.parameters={design:{type:"figma",url:"https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=11626-37312"}};let eo=()=>{let r,n,a,i,o,c,s,m,d,u,y,p,_,S,b,k,w,g,x,v,C,R,T,E,F,D,$,O,G,I,q,z,H,V,X,U=(0,l.c)(57),{formatHour:B,formatHourWithTimezone:ee}=L();return U[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{children:e(M,{children:"Top — JSX order"})}),U[0]=r):r=U[0],U[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(Z,{children:h.map(eC)}),U[1]=n):n=U[1],U[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(P,{}),U[2]=a):a=U[2],U[3]!==B?(i=e(Y,{tickFormatter:B,minTickGap:32}),U[3]=B,U[4]=i):i=U[4],U[5]===Symbol.for("react.memo_cache_sentinel")?(o=e(Q,{tickFormatter:et}),c=h.map(eR),U[5]=o,U[6]=c):(o=U[5],c=U[6]),U[7]!==ee?(s=e(J,{xTickFormatter:ee}),U[7]=ee,U[8]=s):s=U[8],U[9]!==i||U[10]!==s?(m=t(K,{children:[r,t(A,{data:f,series:h,xKey:"timestamp",children:[n,t(j,{children:[a,i,o,c,s]})]})]}),U[9]=i,U[10]=s,U[11]=m):m=U[11],U[12]===Symbol.for("react.memo_cache_sentinel")?(d=e(W,{children:e(M,{children:"Bottom — JSX order"})}),U[12]=d):d=U[12],U[13]===Symbol.for("react.memo_cache_sentinel")?(u=e(P,{}),U[13]=u):u=U[13],U[14]!==B?(y=e(Y,{tickFormatter:B,minTickGap:32}),U[14]=B,U[15]=y):y=U[15],U[16]===Symbol.for("react.memo_cache_sentinel")?(p=e(Q,{tickFormatter:et}),_=h.map(eT),U[16]=p,U[17]=_):(p=U[16],_=U[17]),U[18]!==ee?(S=e(J,{xTickFormatter:ee}),U[18]=ee,U[19]=S):S=U[19],U[20]!==y||U[21]!==S?(b=t(j,{children:[u,y,p,_,S]}),U[20]=y,U[21]=S,U[22]=b):b=U[22],U[23]===Symbol.for("react.memo_cache_sentinel")?(k=e(Z,{children:h.map(eN)}),U[23]=k):k=U[23],U[24]!==b?(w=t(K,{children:[d,t(A,{data:f,series:h,xKey:"timestamp",children:[b,k]})]}),U[24]=b,U[25]=w):w=U[25],U[26]===Symbol.for("react.memo_cache_sentinel")?(g=e(W,{children:e(M,{children:"Left — wrapped in HStack"})}),U[26]=g):g=U[26],U[27]===Symbol.for("react.memo_cache_sentinel")?(x=e(Z,{orientation:"vertical",children:h.map(eE)}),U[27]=x):x=U[27],U[28]===Symbol.for("react.memo_cache_sentinel")?(v=e(P,{}),U[28]=v):v=U[28],U[29]!==B?(C=e(Y,{tickFormatter:B,minTickGap:32}),U[29]=B,U[30]=C):C=U[30],U[31]===Symbol.for("react.memo_cache_sentinel")?(R=e(Q,{tickFormatter:et}),T=h.map(eF),U[31]=R,U[32]=T):(R=U[31],T=U[32]),U[33]!==ee?(E=e(J,{xTickFormatter:ee}),U[33]=ee,U[34]=E):E=U[34],U[35]!==C||U[36]!==E?(F=t(K,{children:[g,e(A,{data:f,series:h,xKey:"timestamp",children:t(N,{flexGrow:!0,gap:12,align:"stretch",children:[x,t(j,{children:[v,C,R,T,E]})]})})]}),U[35]=C,U[36]=E,U[37]=F):F=U[37],U[38]===Symbol.for("react.memo_cache_sentinel")?(D=e(W,{children:e(M,{children:"Right — wrapped in HStack"})}),U[38]=D):D=U[38],U[39]===Symbol.for("react.memo_cache_sentinel")?($=e(P,{}),U[39]=$):$=U[39],U[40]!==B?(O=e(Y,{tickFormatter:B,minTickGap:32}),U[40]=B,U[41]=O):O=U[41],U[42]===Symbol.for("react.memo_cache_sentinel")?(G=e(Q,{tickFormatter:et}),I=h.map(eD),U[42]=G,U[43]=I):(G=U[42],I=U[43]),U[44]!==ee?(q=e(J,{xTickFormatter:ee}),U[44]=ee,U[45]=q):q=U[45],U[46]!==O||U[47]!==q?(z=t(j,{children:[$,O,G,I,q]}),U[46]=O,U[47]=q,U[48]=z):z=U[48],U[49]===Symbol.for("react.memo_cache_sentinel")?(H=e(Z,{orientation:"vertical",children:h.map(eK)}),U[49]=H):H=U[49],U[50]!==z?(V=t(K,{children:[D,e(A,{data:f,series:h,xKey:"timestamp",children:t(N,{flexGrow:!0,gap:12,align:"stretch",children:[z,H]})})]}),U[50]=z,U[51]=V):V=U[51],U[52]!==w||U[53]!==F||U[54]!==V||U[55]!==m?(X=t("div",{className:"grid grid-cols-2 gap-16 w-1120",children:[m,w,F,V]}),U[52]=w,U[53]=F,U[54]=V,U[55]=m,U[56]=X):X=U[56],X};eo.parameters={layout:"padded"};let ec=()=>{let r,n,a,o,s,m,d,u,y,f,p,_,b,k,w,g,x,v=(0,l.c)(32),{formatDate:T,formatDateWithTimezone:N}=L(),[O,G]=(0,i.useState)(S);v[0]===Symbol.for("react.memo_cache_sentinel")?(r=e=>{e?G(t=>t.slice(e.fromIndex,e.toIndex+1)):G(S)},v[0]=r):r=v[0];let I=r,q=O!==S;v[1]!==T?(n=c(T),v[1]=T,v[2]=n):n=v[2];let z=n,H=(0,i.useRef)(null);return v[3]!==q?(a=()=>{if(!q)return;let e=e=>{if("Escape"!==e.key)return;let t=e.target,r=null===t||t===document.body||t===document.documentElement,n=t instanceof Node&&H.current?.contains(t);(r||n)&&(e.preventDefault(),I(null))};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},o=[q,I],v[3]=q,v[4]=a,v[5]=o):(a=v[4],o=v[5]),(0,i.useEffect)(a,o),v[6]===Symbol.for("react.memo_cache_sentinel")?(s=e(M,{children:'Drag on the plot, then click "Zoom in" — Esc to cancel'}),v[6]=s):s=v[6],v[7]!==q?(m=q&&t(E,{children:[e(D,{asChild:!0,children:e(R,{variant:"ghost",color:"neutral",size:"small","aria-label":"Reset time selection",onClick:()=>I(null),children:e(C,{})})}),e(F,{children:"Reset time selection"})]}),v[7]=q,v[8]=m):m=v[8],v[9]!==q||v[10]!==m?(d=t(W,{children:[s,e($,{alwaysVisible:q,children:m})]}),v[9]=q,v[10]=m,v[11]=d):d=v[11],v[12]===Symbol.for("react.memo_cache_sentinel")?(u=e(el,{}),v[12]=u):u=v[12],v[13]===Symbol.for("react.memo_cache_sentinel")?(y=e(P,{}),v[13]=y):y=v[13],v[14]!==T?(f=e(Y,{tickFormatter:T,minTickGap:48}),v[14]=T,v[15]=f):f=v[15],v[16]===Symbol.for("react.memo_cache_sentinel")?(p=e(Q,{tickFormatter:et}),_=h.map(eI),v[16]=p,v[17]=_):(p=v[16],_=v[17]),v[18]!==N?(b=e(J,{xTickFormatter:N}),v[18]=N,v[19]=b):b=v[19],v[20]!==z?(k=e(ee,{formatRange:z}),v[20]=z,v[21]=k):k=v[21],v[22]!==b||v[23]!==k||v[24]!==f?(w=t(j,{height:220,children:[y,f,p,_,b,k]}),v[22]=b,v[23]=k,v[24]=f,v[25]=w):w=v[25],v[26]!==w||v[27]!==O?(g=t(A,{"data-testid":"line-chart",data:O,series:h,xKey:"timestamp",onZoomChange:I,children:[u,w]}),v[26]=w,v[27]=O,v[28]=g):g=v[28],v[29]!==g||v[30]!==d?(x=t(K,{ref:H,"data-testid":"chart",children:[d,g]}),v[29]=g,v[30]=d,v[31]=x):x=v[31],x},es=t=>{let r,n,a=(0,l.c)(3),{orientation:i}=t;return a[0]===Symbol.for("react.memo_cache_sentinel")?(r=[0,1,2].map(eA),a[0]=r):r=a[0],a[1]!==i?(n=e(Z,{orientation:i,children:r}),a[1]=i,a[2]=n):n=a[2],n},em=()=>{let r,n,a,i,o,c,s,m=(0,l.c)(7);return m[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(K,{"aria-busy":"true","aria-live":"polite",children:[e(W,{children:e(M,{children:"No legend"})}),e(q,{})]}),m[0]=r):r=m[0],m[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(K,{"aria-busy":"true","aria-live":"polite",children:[e(W,{children:e(M,{children:"Top — JSX order"})}),e(es,{}),e(q,{})]}),m[1]=n):n=m[1],m[2]===Symbol.for("react.memo_cache_sentinel")?(a=t(K,{"aria-busy":"true","aria-live":"polite",children:[e(W,{children:e(M,{children:"Bottom — JSX order"})}),e(q,{}),e(es,{})]}),m[2]=a):a=m[2],m[3]===Symbol.for("react.memo_cache_sentinel")?(i=e(W,{children:e(M,{children:"Left — wrapped in HStack"})}),m[3]=i):i=m[3],m[4]===Symbol.for("react.memo_cache_sentinel")?(o=t(K,{"aria-busy":"true","aria-live":"polite",children:[i,t(N,{flexGrow:!0,gap:12,align:"stretch",children:[e(es,{orientation:"vertical"}),e(q,{className:"flex-1 min-w-0"})]})]}),m[4]=o):o=m[4],m[5]===Symbol.for("react.memo_cache_sentinel")?(c=e(W,{children:e(M,{children:"Right — wrapped in HStack"})}),m[5]=c):c=m[5],m[6]===Symbol.for("react.memo_cache_sentinel")?(s=t("div",{className:"grid grid-cols-2 gap-16 w-1120",children:[r,n,a,o,t(K,{"aria-busy":"true","aria-live":"polite",children:[c,t(N,{flexGrow:!0,gap:12,align:"stretch",children:[e(q,{className:"flex-1 min-w-0"}),e(es,{orientation:"vertical"})]})]})]}),m[6]=s):s=m[6],s};em.parameters={design:{type:"figma",url:"https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7519-2617&m=dev"}};let ed=r=>{let n,o,c,s,m,d,u,y,p,_,S,b,k,w,g=(0,l.c)(43),{placement:x,title:C}=r,{formatHour:T,formatHourWithTimezone:O}=L(),[G,I]=(0,i.useState)(!0);g[0]!==G?(n=()=>{if(!G)return;let e=setTimeout(()=>I(!1),2e3);return()=>clearTimeout(e)},o=[G],g[0]=G,g[1]=n,g[2]=o):(n=g[1],o=g[2]),(0,i.useEffect)(n,o);let z="left"===x||"right"===x,H=z?"vertical":"horizontal";g[3]!==G||g[4]!==H?(c=G?e(es,{orientation:H}):e(Z,{orientation:H,children:h.map(ej)}),g[3]=G,g[4]=H,g[5]=c):c=g[5];let V=c;g[6]!==T||g[7]!==O||g[8]!==z||g[9]!==G?(s=G?e(q,{className:z?"flex-1 min-w-0":void 0}):t(j,{children:[e(P,{}),e(Y,{tickFormatter:T,minTickGap:32}),e(Q,{tickFormatter:et}),h.map(eq),e(J,{xTickFormatter:O})]}),g[6]=T,g[7]=O,g[8]=z,g[9]=G,g[10]=s):s=g[10];let X=s;if("none"===x)m=X;else if("top"===x){let e;g[11]!==X||g[12]!==V?(e=t(a,{children:[V,X]}),g[11]=X,g[12]=V,g[13]=e):e=g[13],m=e}else if("bottom"===x){let e;g[14]!==X||g[15]!==V?(e=t(a,{children:[X,V]}),g[14]=X,g[15]=V,g[16]=e):e=g[16],m=e}else if("left"===x){let e;g[17]!==X||g[18]!==V?(e=t(N,{flexGrow:!0,gap:12,align:"stretch",children:[V,X]}),g[17]=X,g[18]=V,g[19]=e):e=g[19],m=e}else{let e;g[20]!==X||g[21]!==V?(e=t(N,{flexGrow:!0,gap:12,align:"stretch",children:[X,V]}),g[20]=X,g[21]=V,g[22]=e):e=g[22],m=e}return g[23]!==C?(d=e(M,{children:C}),g[23]=C,g[24]=d):d=g[24],g[25]===Symbol.for("react.memo_cache_sentinel")?(u=()=>I(!0),y=e(v,{}),g[25]=u,g[26]=y):(u=g[25],y=g[26]),g[27]!==G?(p=e(D,{asChild:!0,children:e(R,{variant:"ghost",color:"neutral",size:"small","aria-label":"Reload",disabled:G,onClick:u,children:y})}),g[27]=G,g[28]=p):p=g[28],g[29]===Symbol.for("react.memo_cache_sentinel")?(_=e(F,{children:"Reload"}),g[29]=_):_=g[29],g[30]!==G||g[31]!==p?(S=e($,{alwaysVisible:!0,children:t(E,{disabled:G,children:[p,_]})}),g[30]=G,g[31]=p,g[32]=S):S=g[32],g[33]!==S||g[34]!==d?(b=t(W,{children:[d,S]}),g[33]=S,g[34]=d,g[35]=b):b=g[35],g[36]!==m||g[37]!==G?(k=G?m:e(A,{data:f,series:h,xKey:"timestamp",children:m}),g[36]=m,g[37]=G,g[38]=k):k=g[38],g[39]!==G||g[40]!==b||g[41]!==k?(w=t(K,{"aria-busy":G,"aria-live":"polite",children:[b,k]}),g[39]=G,g[40]=b,g[41]=k,g[42]=w):w=g[42],w},eh=()=>{let r,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"w-560",children:t(K,{children:[e(W,{children:e(M,{children:"No data"})}),e(q,{children:"No data"})]})}),n[0]=r):r=n[0],r};eh.parameters={design:{type:"figma",url:"https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=8670-2594&m=dev"}};let eu=()=>{let r,n,a,o,s,m,d,u,y,f,p,_,S,k,w,g=(0,l.c)(31),{formatDate:x,formatDateTime:v,formatDateTimeWithTimezone:T}=L();g[0]!==v?(r=c(v),g[0]=v,g[1]=r):r=g[1];let N=r,[O,G]=(0,i.useState)(null);e:{let e;if(!O){n=b;break e}g[2]!==O.fromIndex||g[3]!==O.toIndex?(e=b.slice(O.fromIndex,O.toIndex+1),g[2]=O.fromIndex,g[3]=O.toIndex,g[4]=e):e=g[4],n=e}let I=n;g[5]===Symbol.for("react.memo_cache_sentinel")?(a=e(M,{children:"1,000 hourly samples — drag to zoom"}),g[5]=a):a=g[5];let q=null!==O;return g[6]!==O?(o=null!==O&&t(E,{children:[e(D,{asChild:!0,children:e(R,{variant:"ghost",color:"neutral",size:"small","aria-label":"Reset time selection",onClick:()=>G(null),children:e(C,{})})}),e(F,{children:"Reset time selection"})]}),g[6]=O,g[7]=o):o=g[7],g[8]!==q||g[9]!==o?(s=t(W,{children:[a,e($,{alwaysVisible:q,children:o})]}),g[8]=q,g[9]=o,g[10]=s):s=g[10],g[11]===Symbol.for("react.memo_cache_sentinel")?(m=e(Z,{children:h.map(eP)}),g[11]=m):m=g[11],g[12]===Symbol.for("react.memo_cache_sentinel")?(d=e(P,{}),g[12]=d):d=g[12],g[13]!==x?(u=e(Y,{tickFormatter:x,minTickGap:64}),g[13]=x,g[14]=u):u=g[14],g[15]===Symbol.for("react.memo_cache_sentinel")?(f=e(Q,{tickFormatter:et}),y=h.map(ez),g[15]=y,g[16]=f):(y=g[15],f=g[16]),g[17]!==T?(p=e(J,{xTickFormatter:T}),g[17]=T,g[18]=p):p=g[18],g[19]!==N?(_=e(ee,{formatRange:N}),g[19]=N,g[20]=_):_=g[20],g[21]!==p||g[22]!==_||g[23]!==u?(S=t(j,{height:220,children:[d,u,f,y,p,_]}),g[21]=p,g[22]=_,g[23]=u,g[24]=S):S=g[24],g[25]!==S||g[26]!==I?(k=t(A,{data:I,series:h,xKey:"timestamp",onZoomChange:G,children:[m,S]}),g[25]=S,g[26]=I,g[27]=k):k=g[27],g[28]!==k||g[29]!==s?(w=t(K,{children:[s,k]}),g[28]=k,g[29]=s,g[30]=w):w=g[30],w};function ey(r){return t(U,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function ef(t){return e(B,{seriesKey:t.key},t.key)}function ep(r){return t(U,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function e_(t){return e(B,{seriesKey:t.key},t.key)}function eS(t){return e(B,{seriesKey:t.key,curve:"linear"},t.key)}function eb(t){return e(B,{seriesKey:t.key},t.key)}function ek(t){return e(B,{seriesKey:t.key},t.key)}function ew(t){return e(B,{seriesKey:t.key},t.key)}function eg(r){return t(U,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function ex(t){return e(B,{seriesKey:t.key},t.key)}function ev(t){let{series:r,value:n}=t,a=g[r.key]??"";return e(V,{series:r,value:"number"==typeof n?n:0,formatValue:e=>`${"number"==typeof e?o.format(e):String(e??"")}${a}`},r.key)}function eC(r){return t(U,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function eR(t){return e(B,{seriesKey:t.key},t.key)}function eT(t){return e(B,{seriesKey:t.key},t.key)}function eN(r){return t(U,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function eE(r){return t(U,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function eF(t){return e(B,{seriesKey:t.key},t.key)}function eD(t){return e(B,{seriesKey:t.key},t.key)}function eK(r){return t(U,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function e$(e){return e.key}function eW(t){return e(B,{seriesKey:t.key},t.key)}function eM(r){return t(U,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function eL(t){return e(B,{seriesKey:t.key},t.key)}function eO(r){return t(U,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function eG(t){return e(B,{seriesKey:t.key},t.key)}function eI(t){return e(B,{seriesKey:t.key},t.key)}function eA(t){return e(U,{seriesKey:`skeleton-${t}`,children:e(T,{width:"72px",height:"20px",rounded:4})},t)}function ej(r){return t(U,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function eq(t){return e(B,{seriesKey:t.key},t.key)}function eP(r){return t(U,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function ez(t){return e(B,{seriesKey:t.key,disableAnimation:!0},t.key)}let eH=[{name:"Default",story:en,meta:er},{name:"DefaultMulti",story:ea,meta:er},{name:"WithMetric",story:ei,meta:er},{name:"Curves",story:()=>{let r,n,a,i,o,c,s,m,d,u,y,p,_,S,b,k,w,g,x,v=(0,l.c)(29),{formatHour:C,formatHourWithTimezone:R}=L();return v[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{children:e(M,{children:"Linear interpolation"})}),v[0]=r):r=v[0],v[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(el,{}),v[1]=n):n=v[1],v[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(P,{}),v[2]=a):a=v[2],v[3]!==C?(i=e(Y,{tickFormatter:C,minTickGap:32}),v[3]=C,v[4]=i):i=v[4],v[5]===Symbol.for("react.memo_cache_sentinel")?(o=e(Q,{tickFormatter:et}),c=h.map(eS),v[5]=o,v[6]=c):(o=v[5],c=v[6]),v[7]!==R?(s=e(J,{xTickFormatter:R}),v[7]=R,v[8]=s):s=v[8],v[9]!==i||v[10]!==s?(m=t(K,{children:[r,t(A,{data:f,series:h,xKey:"timestamp",children:[n,t(j,{children:[a,i,o,c,s]})]})]}),v[9]=i,v[10]=s,v[11]=m):m=v[11],v[12]===Symbol.for("react.memo_cache_sentinel")?(d=e(W,{children:e(M,{children:"Mixed curves — monotone vs linear"})}),v[12]=d):d=v[12],v[13]===Symbol.for("react.memo_cache_sentinel")?(u=e(el,{}),v[13]=u):u=v[13],v[14]===Symbol.for("react.memo_cache_sentinel")?(y=e(P,{}),v[14]=y):y=v[14],v[15]!==C?(p=e(Y,{tickFormatter:C,minTickGap:32}),v[15]=C,v[16]=p):p=v[16],v[17]===Symbol.for("react.memo_cache_sentinel")?(_=e(Q,{tickFormatter:et}),S=e(B,{seriesKey:"requests",curve:"monotone"}),b=e(B,{seriesKey:"errors",curve:"linear"}),k=e(B,{seriesKey:"latency",curve:"linear"}),v[17]=_,v[18]=S,v[19]=b,v[20]=k):(_=v[17],S=v[18],b=v[19],k=v[20]),v[21]!==R?(w=e(J,{xTickFormatter:R}),v[21]=R,v[22]=w):w=v[22],v[23]!==p||v[24]!==w?(g=t(K,{children:[d,t(A,{data:f,series:h,xKey:"timestamp",children:[u,t(j,{children:[y,p,_,S,b,k,w]})]})]}),v[23]=p,v[24]=w,v[25]=g):g=v[25],v[26]!==g||v[27]!==m?(x=t("div",{className:"grid grid-cols-2 gap-16 w-1120",children:[m,g]}),v[26]=g,v[27]=m,v[28]=x):x=v[28],x},meta:er},{name:"LineStyling",story:()=>{let r,n,a,i,o,c,s,m,d,h,p,_,S,b,k,w,g,x=(0,l.c)(27),{formatHour:v,formatHourWithTimezone:C}=L();return x[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{children:e(M,{children:"Solid + dashed series"})}),x[0]=r):r=x[0],x[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(el,{series:u}),x[1]=n):n=x[1],x[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(P,{}),x[2]=a):a=x[2],x[3]!==v?(i=e(Y,{tickFormatter:v,minTickGap:32}),x[3]=v,x[4]=i):i=x[4],x[5]===Symbol.for("react.memo_cache_sentinel")?(o=e(Q,{tickFormatter:et}),c=u.map(eb),x[5]=o,x[6]=c):(o=x[5],c=x[6]),x[7]!==C?(s=e(J,{xTickFormatter:C}),x[7]=C,x[8]=s):s=x[8],x[9]!==i||x[10]!==s?(m=t(K,{children:[r,t(A,{data:f,series:u,xKey:"timestamp",children:[n,t(j,{children:[a,i,o,c,s]})]})]}),x[9]=i,x[10]=s,x[11]=m):m=x[11],x[12]===Symbol.for("react.memo_cache_sentinel")?(d=e(W,{children:e(M,{children:"Custom palette via CSS color string"})}),x[12]=d):d=x[12],x[13]===Symbol.for("react.memo_cache_sentinel")?(h=e(el,{series:y}),x[13]=h):h=x[13],x[14]===Symbol.for("react.memo_cache_sentinel")?(p=e(P,{}),x[14]=p):p=x[14],x[15]!==v?(_=e(Y,{tickFormatter:v,minTickGap:32}),x[15]=v,x[16]=_):_=x[16],x[17]===Symbol.for("react.memo_cache_sentinel")?(S=e(Q,{tickFormatter:et}),b=y.map(ek),x[17]=S,x[18]=b):(S=x[17],b=x[18]),x[19]!==C?(k=e(J,{xTickFormatter:C}),x[19]=C,x[20]=k):k=x[20],x[21]!==_||x[22]!==k?(w=t(K,{children:[d,t(A,{data:f,series:y,xKey:"timestamp",children:[h,t(j,{children:[p,_,S,b,k]})]})]}),x[21]=_,x[22]=k,x[23]=w):w=x[23],x[24]!==w||x[25]!==m?(g=t("div",{className:"grid grid-cols-2 gap-16 w-1120",children:[m,w]}),x[24]=w,x[25]=m,x[26]=g):g=x[26],g},meta:er},{name:"EdgeCases",story:()=>{let r,n,a,i,o,c,s,m,u,y,p,_,S,b,g,x,v,C,R=(0,l.c)(28),{formatHour:T,formatHourWithTimezone:N}=L();return R[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{children:e(M,{children:"Sparkline — no chrome"})}),R[0]=r):r=R[0],R[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(K,{children:[r,e(A,{data:f,series:d,xKey:"timestamp",children:e(j,{children:e(B,{seriesKey:"requests"})})})]}),R[1]=n):n=R[1],R[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(W,{children:e(M,{children:"Single data point"})}),R[2]=a):a=R[2],R[3]===Symbol.for("react.memo_cache_sentinel")?(i=e(P,{}),R[3]=i):i=R[3],R[4]!==T?(o=e(Y,{tickFormatter:T}),R[4]=T,R[5]=o):o=R[5],R[6]===Symbol.for("react.memo_cache_sentinel")?(c=e(Q,{tickFormatter:et}),s=e(B,{seriesKey:"requests"}),R[6]=c,R[7]=s):(c=R[6],s=R[7]),R[8]!==N?(m=e(J,{xTickFormatter:N}),R[8]=N,R[9]=m):m=R[9],R[10]!==o||R[11]!==m?(u=t(K,{children:[a,e(A,{data:k,series:d,xKey:"timestamp",children:t(j,{children:[i,o,c,s,m]})})]}),R[10]=o,R[11]=m,R[12]=u):u=R[12],R[13]===Symbol.for("react.memo_cache_sentinel")?(y=e(W,{children:e(M,{children:"Series with null gaps"})}),R[13]=y):y=R[13],R[14]===Symbol.for("react.memo_cache_sentinel")?(p=e(el,{}),R[14]=p):p=R[14],R[15]===Symbol.for("react.memo_cache_sentinel")?(_=e(P,{}),R[15]=_):_=R[15],R[16]!==T?(S=e(Y,{tickFormatter:T,minTickGap:32}),R[16]=T,R[17]=S):S=R[17],R[18]===Symbol.for("react.memo_cache_sentinel")?(b=e(Q,{tickFormatter:et}),g=h.map(ew),R[18]=b,R[19]=g):(b=R[18],g=R[19]),R[20]!==N?(x=e(J,{xTickFormatter:N}),R[20]=N,R[21]=x):x=R[21],R[22]!==S||R[23]!==x?(v=t(K,{children:[y,t(A,{data:w,series:h,xKey:"timestamp",children:[p,t(j,{children:[_,S,b,g,x]})]})]}),R[22]=S,R[23]=x,R[24]=v):v=R[24],R[25]!==v||R[26]!==u?(C=t("div",{className:"grid grid-cols-2 gap-16 w-1120",children:[n,u,v]}),R[25]=v,R[26]=u,R[27]=C):C=R[27],C},meta:er},{name:"CustomTooltip",story:()=>{let r,n,a,i,o,c,s,m,d=(0,l.c)(12),{formatHour:u,formatHourWithTimezone:y}=L();return d[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{children:e(M,{children:"Custom tooltip with units"})}),d[0]=r):r=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(Z,{children:h.map(eg)}),d[1]=n):n=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(P,{}),d[2]=a):a=d[2],d[3]!==u?(i=e(Y,{tickFormatter:u,minTickGap:32}),d[3]=u,d[4]=i):i=d[4],d[5]===Symbol.for("react.memo_cache_sentinel")?(o=e(Q,{tickFormatter:et}),c=h.map(ex),d[5]=o,d[6]=c):(o=d[5],c=d[6]),d[7]!==y?(s=e(J,{children:r=>{let{rows:n,xValue:a}=r;return t(z,{children:[e(X,{children:y(a)}),n.map(ev)]})}}),d[7]=y,d[8]=s):s=d[8],d[9]!==i||d[10]!==s?(m=e("div",{className:"w-560",children:t(K,{children:[r,t(A,{data:f,series:h,xKey:"timestamp",children:[n,t(j,{children:[a,i,o,c,s]})]})]})}),d[9]=i,d[10]=s,d[11]=m):m=d[11],m},meta:er},{name:"LegendPlacements",story:eo,meta:er},{name:"Filterable",story:()=>{let r,n,a,o,c,s,m,d,u,y,p,_,S,b,k,w=(0,l.c)(29),{formatHour:g,formatHourWithTimezone:v}=L();w[0]===Symbol.for("react.memo_cache_sentinel")?(r=[],w[0]=r):r=w[0];let[C,T]=(0,i.useState)(r);w[1]===Symbol.for("react.memo_cache_sentinel")?(n=e=>{T(t=>0===t.length?h.filter(t=>t.key!==e).map(e$):t.includes(e)?t.filter(t=>t!==e):[...t,e])},w[1]=n):n=w[1];let N=n,O=C.length>0;return w[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(M,{children:"Click a row to isolate, click another to add"}),w[2]=a):a=w[2],w[3]!==O?(o=O&&t(E,{children:[e(D,{asChild:!0,children:e(R,{variant:"ghost",color:"neutral",size:"small","aria-label":"Clear filter",onClick:()=>T([]),children:e(x,{})})}),e(F,{children:"Remove filter"})]}),w[3]=O,w[4]=o):o=w[4],w[5]!==O||w[6]!==o?(c=t(W,{children:[a,e($,{alwaysVisible:O,children:o})]}),w[5]=O,w[6]=o,w[7]=c):c=w[7],w[8]!==C?(s=h.map(r=>t(E,{children:[e(D,{asChild:!0,children:t(U,{seriesKey:r.key,onClick:()=>N(r.key),children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]})}),e(F,{children:C.includes(r.key)?"Remove filter":"Click to filter"})]},r.key)),w[8]=C,w[9]=s):s=w[9],w[10]!==s?(m=e(Z,{children:s}),w[10]=s,w[11]=m):m=w[11],w[12]===Symbol.for("react.memo_cache_sentinel")?(d=e(P,{}),w[12]=d):d=w[12],w[13]!==g?(u=e(Y,{tickFormatter:g,minTickGap:32}),w[13]=g,w[14]=u):u=w[14],w[15]===Symbol.for("react.memo_cache_sentinel")?(p=e(Q,{tickFormatter:et}),y=h.map(eW),w[15]=y,w[16]=p):(y=w[15],p=w[16]),w[17]!==v?(_=e(J,{xTickFormatter:v}),w[17]=v,w[18]=_):_=w[18],w[19]!==_||w[20]!==u?(S=t(j,{children:[d,u,p,y,_]}),w[19]=_,w[20]=u,w[21]=S):S=w[21],w[22]!==C||w[23]!==S||w[24]!==m?(b=t(A,{"data-testid":"line-chart",data:f,series:h,xKey:"timestamp",filteredKeys:C,children:[m,S]}),w[22]=C,w[23]=S,w[24]=m,w[25]=b):b=w[25],w[26]!==b||w[27]!==c?(k=e("div",{className:"w-560",children:t(K,{"data-testid":"chart",children:[c,b]})}),w[26]=b,w[27]=c,w[28]=k):k=w[28],k},meta:er},{name:"CrossChartHoverSync",story:()=>{let r,n,a,o,c,s,m,d,u,y,f,S,b,k,w,g,x,v,C,R=(0,l.c)(33),{formatHour:T,formatHourWithTimezone:N}=L(),[E,F]=(0,i.useState)(null);return R[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{children:e(M,{children:"Region A"})}),R[0]=r):r=R[0],R[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(Z,{children:h.map(eM)}),R[1]=n):n=R[1],R[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(P,{}),R[2]=a):a=R[2],R[3]!==T?(o=e(Y,{tickFormatter:T,minTickGap:32}),R[3]=T,R[4]=o):o=R[4],R[5]===Symbol.for("react.memo_cache_sentinel")?(c=e(Q,{tickFormatter:et}),s=h.map(eL),R[5]=c,R[6]=s):(c=R[5],s=R[6]),R[7]!==N?(m=e(J,{xTickFormatter:N}),R[7]=N,R[8]=m):m=R[8],R[9]!==o||R[10]!==m?(d=t(j,{children:[a,o,c,s,m]}),R[9]=o,R[10]=m,R[11]=d):d=R[11],R[12]!==E||R[13]!==d?(u=t(K,{children:[r,t(A,{data:p,series:h,xKey:"timestamp",syncId:"regions",activeKey:E,onActiveKeyChange:F,children:[n,d]})]}),R[12]=E,R[13]=d,R[14]=u):u=R[14],R[15]===Symbol.for("react.memo_cache_sentinel")?(y=e(W,{children:e(M,{children:"Region B"})}),R[15]=y):y=R[15],R[16]===Symbol.for("react.memo_cache_sentinel")?(f=e(Z,{children:h.map(eO)}),R[16]=f):f=R[16],R[17]===Symbol.for("react.memo_cache_sentinel")?(S=e(P,{}),R[17]=S):S=R[17],R[18]!==T?(b=e(Y,{tickFormatter:T,minTickGap:32}),R[18]=T,R[19]=b):b=R[19],R[20]===Symbol.for("react.memo_cache_sentinel")?(k=e(Q,{tickFormatter:et}),w=h.map(eG),R[20]=k,R[21]=w):(k=R[20],w=R[21]),R[22]!==N?(g=e(J,{xTickFormatter:N}),R[22]=N,R[23]=g):g=R[23],R[24]!==b||R[25]!==g?(x=t(j,{children:[S,b,k,w,g]}),R[24]=b,R[25]=g,R[26]=x):x=R[26],R[27]!==E||R[28]!==x?(v=t(K,{children:[y,t(A,{data:_,series:h,xKey:"timestamp",syncId:"regions",activeKey:E,onActiveKeyChange:F,children:[f,x]})]}),R[27]=E,R[28]=x,R[29]=v):v=R[29],R[30]!==v||R[31]!==u?(C=t("div",{className:"grid grid-cols-2 gap-16 w-1120",children:[u,v]}),R[30]=v,R[31]=u,R[32]=C):C=R[32],C},meta:er},{name:"Zoom",story:()=>{let t,r=(0,l.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"w-560",children:e(ec,{})}),r[0]=t):t=r[0],t},meta:er},{name:"Loading",story:em,meta:er},{name:"Refreshing",story:()=>{let r,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=t("div",{className:"grid grid-cols-2 gap-16 w-1120",children:[e(ed,{placement:"none",title:"No legend"}),e(ed,{placement:"top",title:"Top — JSX order"}),e(ed,{placement:"bottom",title:"Bottom — JSX order"}),e(ed,{placement:"left",title:"Left — wrapped in HStack"}),e(ed,{placement:"right",title:"Right — wrapped in HStack"})]}),n[0]=r):r=n[0],r},meta:er},{name:"Empty",story:eh,meta:er},{name:"LongTimeRange",story:()=>{let t,r=(0,l.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"w-720",children:e(eu,{})}),r[0]=t):t=r[0],t},meta:er}];function eV({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},a="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,l=()=>i.default.createElement(a,n),o={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.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,eH.map((e,t)=>i.default.createElement(eV,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,160 @@
+The navigation member of the Actions family — a styled `<a>` that takes the reader somewhere. If activating it changes where you are it is a `Link`; if it does something in place it is a `Button`, however text-like it looks. `type` is semantic, so never hand-colour a link, and the hover underline is automatic. Link text has to describe its destination — “Click here” and “Learn more” read as nothing in a screen reader’s link list.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `download` | `any` | no | — |  |
+| `href` | `string \| undefined` | no | — |  |
+| `href-lang` | `string \| undefined` | no | — |  |
+| `target` | `HTMLAttributeAnchorTarget \| undefined` | no | — |  |
+| `type` | `"default" \| "alt" \| "muted" \| "table"` | no | `default` |  |
+| `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 | — |  |
+| `disabled` | `boolean` | no | `false` |  |
+| `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | no | `lg` |  |
+| `weight` | `"regular" \| "medium"` | no | `regular` |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+| `as-child` | `boolean \| undefined` | no | `false` |  |
+
+## Stories
+
+### Basic
+
+The default link at its default size, which is `lg` — a link inside smaller copy needs an explicit size.
+
+Source: Link/Link.stories.tsx#Basic
+
+### Types
+
+`default`, `alt` and `muted`. `alt` is the inverted family for dark surfaces, which is why it barely reads here; the fourth type, `table`, is the master-cell title link and only belongs there.
+
+Source: Link/Link.stories.tsx#Types
+
+### Weight
+
+`medium` where the surrounding copy is heavier, or to lift a standalone link — there is no bold, so `medium` is as far as it goes.
+
+Source: Link/Link.stories.tsx#Weight
+
+### Sizes
+
+`xs` to `xl`, each matched to a text size. An inline link takes the scale of the copy around it rather than being sized on its own.
+
+Source: Link/Link.stories.tsx#Sizes
+
+### Icons
+
+Icons are children, not a prop. A trailing icon is the direction cue — the external-link mark for a new tab, an arrow for “explore” — and a new tab still needs `target` and `rel` set by hand.
+
+Source: Link/Link.stories.tsx#Icons
+
+## Story sources
+
+### Link/Link.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { ArrowRight, SquareArrowOutUpRight } from '../../icons';
+import { VStack } from '../Stack';
+import { Link } from './Link';
+
+const DESCRIPTION = [
+  'The navigation member of the Actions family — a styled `<a>` that takes the reader somewhere. If activating it changes where you are it is a `Link`; if it does something in place it is a `Button`, however text-like it looks.',
+  '`type` is semantic, so never hand-colour a link, and the hover underline is automatic. Link text has to describe its destination — “Click here” and “Learn more” read as nothing in a screen reader’s link list.',
+].join(' ');
+
+const meta = {
+  title: 'Navigation/Link',
+  component: Link,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+} satisfies Meta<typeof Link>;
+
+export default meta;
+
+/** The default link at its default size, which is `lg` — a link inside smaller copy needs an explicit size. */
+export const Basic: StoryFn<typeof meta> = () => <Link href='#'>Link</Link>;
+
+/** `default`, `alt` and `muted`. `alt` is the inverted family for dark surfaces, which is why it barely reads here; the fourth type, `table`, is the master-cell title link and only belongs there. */
+export const Types: StoryFn<typeof meta> = () => (
+  <VStack>
+    <Link href='#' type='default'>
+      Link
+    </Link>
+
+    <Link href='#' type='alt'>
+      Link
+    </Link>
+
+    <Link href='#' type='muted'>
+      Link
+    </Link>
+  </VStack>
+);
+
+/** `medium` where the surrounding copy is heavier, or to lift a standalone link — there is no bold, so `medium` is as far as it goes. */
+export const Weight: StoryFn<typeof meta> = () => (
+  <VStack>
+    <Link href='#' weight='regular'>
+      Link
+    </Link>
+
+    <Link href='#' weight='medium'>
+      Link
+    </Link>
+  </VStack>
+);
+
+/** `xs` to `xl`, each matched to a text size. An inline link takes the scale of the copy around it rather than being sized on its own. */
+export const Sizes: StoryFn<typeof meta> = () => (
+  <VStack>
+    <Link href='#' size='xl'>
+      Link
+    </Link>
+
+    <Link href='#' size='lg'>
+      Link
+    </Link>
+
+    <Link href='#' size='md'>
+      Link
+    </Link>
+
+    <Link href='#' size='sm'>
+      Link
+    </Link>
+
+    <Link href='#' size='xs'>
+      Link
+    </Link>
+  </VStack>
+);
+
+/** Icons are children, not a prop. A trailing icon is the direction cue — the external-link mark for a new tab, an arrow for “explore” — and a new tab still needs `target` and `rel` set by hand. */
+export const Icons: StoryFn<typeof meta> = () => (
+  <VStack>
+    <Link href='#'>
+      Open new tab <SquareArrowOutUpRight />
+    </Link>
+
+    <Link href='#'>
+      Let's explore <ArrowRight />
+    </Link>
+  </VStack>
+);
+```

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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,a;/**
+ * 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,u=Object.getOwnPropertyNames,f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty,d=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of u(t))p.call(e,a)||a===r||c(e,a,{get:()=>t[a],enumerable:!(n=s(t,a))||n.enumerable});return e},m={},h={$dispatcherGuard:()=>C,$makeReadOnly:()=>M,$reset:()=>O,$structuralCheck:()=>I,c:()=>b,clearRenderCounterRegistry:()=>x,renderCounterRegistry:()=>L,useRenderCounter:()=>D};for(var y in h)c(m,y,{get:h[y],enumerable:!0});e.exports=d(c({},"__esModule",{value:!0}),m);var g=(a=null!=(n=r("C"))?i(f(n)):{},d(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:w,useEffect:_,isValidElement:R}=g,v=null!=(o=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,E=Symbol.for("react.memo_cache_sentinel"),b="function"==typeof(null==(l=g.__COMPILER_RUNTIME)?void 0:l.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=E;return t[E]=!0,t},[])},$={};["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]=()=>{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 S=null;function k(e){return v.ReactCurrentDispatcher.current=e,v.ReactCurrentDispatcher.current}$.useMemoCache=e=>{if(null!=S)return S.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var N=[];function C(e){let t=v.ReactCurrentDispatcher.current;if(0===e){if(N.push(t),1===N.length&&(S=t),t===$)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.");k($)}else if(1===e){let e=N.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===N.length&&(S=null),k(e)}else if(2===e)N.push(t),k(S);else if(3===e){let e=N.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");k(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function O(e){for(let t=0;t<e.length;t++)e[t]=E}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var L=new Map;function x(){for(let e of L.values())e.forEach(e=>{e.count=0})}function D(e){let t=w(null);null!=t.current&&(t.current.count+=1),_(()=>{if(null==t.current){let r,n={count:0};null==(r=L.get(e))&&(r=new Set,L.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=L.get(e))&&n.delete(r))}})}var j=new Set;function I(e,t,r,n,a,o){function l(e,t,l,i){let c=`${n}:${o} [${a}] ${r}${l} changed from ${e} to ${t} at depth ${i}`;j.has(c)||(j.add(c),console.error(c))}!function e(t,r,n,a){if(!(a>2)){if(t!==r)if(typeof t!=typeof r)l(`type ${typeof t}`,`type ${typeof r}`,n,a);else if("object"==typeof t){let o=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)l("null",`type ${typeof r}`,n,a);else if(null===r)l(`type ${typeof t}`,"null",n,a);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)l(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,a);else for(let[o,i]of t)r.has(o)?e(i,r.get(o),`${n}.get(${o})`,a+1):l(`Map instance with key ${o}`,`Map instance without key ${o}`,n,a);else l("Map instance","other value",n,a);else if(r instanceof Map)l("other value","Map instance",n,a);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)l(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,a);else for(let e of r)t.has(e)||l(`Set instance without element ${e}`,`Set instance with element ${e}`,n,a);else l("Set instance","other value",n,a);else if(r instanceof Set)l("other value","Set instance",n,a);else if(o||i)if(o!==i)l(`type ${o?"array":"object"}`,`type ${i?"array":"object"}`,n,a);else if(t.length!==r.length)l(`array with length ${t.length}`,`array with length ${r.length}`,n,a);else for(let o=0;o<t.length;o++)e(t[o],r[o],`${n}[${o}]`,a+1);else if(R(t)||R(r))R(t)!==R(r)?l(`type ${R(t)?"React element":"object"}`,`type ${R(r)?"React element":"object"}`,n,a):t.type!==r.type?l(`React element of type ${t.type}`,`React element of type ${r.type}`,n,a):e(t.props,r.props,`[props of ${n}]`,a+1);else{for(let e in r)e in t||l(`object without key ${e}`,`object with key ${e}`,n,a);for(let o in t)o in r?e(t[o],r[o],`${n}.${o}`,a+1):l(`object with key ${o}`,`object without key ${o}`,n,a)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&l(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,a):t!==r&&l(t,r,n,a)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,a=new WeakMap;function o(e,t,r){let o=t,l=r;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,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let a=r.get(t);a||((a=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,a)),o=a}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 r=a.get(e);r||(r=new Map,a.set(e,r));let n=r.get(t);if(n)return n;let o=e.forwardRef((r,n)=>{let a=e.useRef(null);if(!a.current||a.current.original!==n){let e;a.current={original:n,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof n){let r=n(t);e="function"==typeof r?r:void 0}else n&&(n.current=t)}}}return e.createElement(t,{...r,ref:a.current.callback})});return o.displayName=`CanvasHost(${t})`,r.set(t,o),o}(e,o)),{type:o,props:l}}function l(e){let t=(t,r,n)=>{let a=o(e,t,r??{});return e.createElement(a.type,void 0===n?a.props:{...a.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let a=o(e,t,r??{}),{children:l,...i}=a.props;return e.createElement(a.type,void 0===n?i:{...i,key:n},...Array.isArray(l)?l:[l])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...n)=>{let a=o(e,t,r??{});return e.createElement(a.type,a.props,...n)},cloneElement:(t,r,...n)=>{let a=e.cloneElement(t,r??void 0,...n),l=a.ref,i=o(e,a.type,{...a.props,ref:l});return i.type===a.type&&"string"!=typeof a.type?a:e.createElement(i.type,{...i.props,key:a.key})}}}r.d(t,{MA:()=>l,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:p,cloneElement:d,createContext:m,createElement:h,createFactory:y,createRef:g,forwardRef:w,isValidElement:_,lazy:R,memo:v,startTransition:E,unstable_act:b,useCallback:$,useContext:S,useDebugValue:k,useDeferredValue:N,useEffect:C,useId:O,useImperativeHandle:M,useInsertionEffect:L,useLayoutEffect:x,useMemo:D,useReducer:j,useRef:I,useState:T,useSyncExternalStore:A,useTransition:z,version:P,use:W}=n;r.d(t,{},{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:p,cloneElement:d,createContext:m,createElement:h,createFactory:y,createRef:g,default:n,forwardRef:w,isValidElement:_,lazy:R,memo:v,startTransition:E,unstable_act:b,use:W,useCallback:$,useContext:S,useDebugValue:k,useDeferredValue:N,useEffect:C,useId:O,useImperativeHandle:M,useInsertionEffect:L,useLayoutEffect:x,useMemo:D,useReducer:j,useRef:I,useState:T,useSyncExternalStore:A,useTransition:z,version:P})}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,r),o.exports}r.d=(e,t,n)=>{var a=(t,n)=>{for(var a in t)r.o(t,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,[n]:t[a]})};a(t,"get"),a(n,"value")},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.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:n,Fragment:a}=(0,r("p").MA)(window.React);var o=r("vD");let l=window.WallarmDS.Icons.ArrowRight,i=window.WallarmDS.Icons.SquareArrowOutUpRight,c=window.WallarmDS.VStack,s=window.WallarmDS.Link,u={title:"Navigation/Link",component:s,parameters:{layout:"centered",docs:{description:{component:"The navigation member of the Actions family — a styled `<a>` that takes the reader somewhere. If activating it changes where you are it is a `Link`; if it does something in place it is a `Button`, however text-like it looks. `type` is semantic, so never hand-colour a link, and the hover underline is automatic. Link text has to describe its destination — “Click here” and “Learn more” read as nothing in a screen reader’s link list."}}}};var f=r("C");let p=[{name:"Basic",story:()=>{let t,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(s,{href:"#",children:"Link"}),r[0]=t):t=r[0],t},meta:u},{name:"Types",story:()=>{let r,n=(0,o.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(c,{children:[e(s,{href:"#",type:"default",children:"Link"}),e(s,{href:"#",type:"alt",children:"Link"}),e(s,{href:"#",type:"muted",children:"Link"})]}),n[0]=r):r=n[0],r},meta:u},{name:"Weight",story:()=>{let r,n=(0,o.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(c,{children:[e(s,{href:"#",weight:"regular",children:"Link"}),e(s,{href:"#",weight:"medium",children:"Link"})]}),n[0]=r):r=n[0],r},meta:u},{name:"Sizes",story:()=>{let r,n=(0,o.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(c,{children:[e(s,{href:"#",size:"xl",children:"Link"}),e(s,{href:"#",size:"lg",children:"Link"}),e(s,{href:"#",size:"md",children:"Link"}),e(s,{href:"#",size:"sm",children:"Link"}),e(s,{href:"#",size:"xs",children:"Link"})]}),n[0]=r):r=n[0],r},meta:u},{name:"Icons",story:()=>{let r,n,a=(0,o.c)(2);return a[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(s,{href:"#",children:["Open new tab ",e(i,{})]}),a[0]=r):r=a[0],a[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(c,{children:[r,t(s,{href:"#",children:["Let's explore ",e(l,{})]})]}),a[1]=n):n=a[1],n},meta:u}];function d({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},a="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,o=()=>f.default.createElement(a,n),l={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=o;o=()=>e(t,l)}return f.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},f.default.createElement("h2",{className:"text-sm mb-12"},e.name),f.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(f.default.createElement(window.WallarmDS.Root,null,p.map((e,t)=>f.default.createElement(d,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,181 @@
+A semantic `ul` or `ol` with its spacing and markers under control — reach for `ordered` only when the sequence matters, and for a `Table` as soon as each item carries fields of its own. Markers are off by default and `role="list"` is set either way, so a list without bullets is still a list to a screen reader.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `variant` | `ListVariant \| undefined` | no | `unordered` |  |
+| `spacing` | `"0" \| "2" \| "4" \| "8" \| "12" \| "16" \| "24"` | no | `4` |  |
+| `marker` | `"none" \| "disc" \| "decimal"` | no | `none` |  |
+| `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 | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.ListIcon` — `ListIconProps` in the declaration bundle.
+- `WallarmDS.ListItem` — `ListItemProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+The default: unordered, no marker, 4px between items — a plain vertical group that
+still announces itself as a list.
+
+Source: List/List.stories.tsx#Basic
+
+### Ordered
+
+`variant='ordered'` changes the element to `ol`; the numbers themselves come from
+`marker='decimal'`, which is a separate decision from the element.
+
+Source: List/List.stories.tsx#Ordered
+
+### WithDisc
+
+`marker='disc'` turns the bullets on and indents the list by 24px to make room for them.
+
+Source: List/List.stories.tsx#WithDisc
+
+### WithIcons
+
+`ListIcon` puts a meaningful glyph where the marker would be, coloured by what the row
+says; `ListItem` is a flex row, so the icon and its text share a baseline.
+
+Source: List/List.stories.tsx#WithIcons
+
+### Spacing
+
+Three of the seven spacing steps. The gap sits between items only, so a wrapped item
+keeps its own lines tight while the list stays loose.
+
+Source: List/List.stories.tsx#Spacing
+
+## Story sources
+
+### List/List.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { List } from './List';
+import { ListIcon } from './ListIcon';
+import { ListItem } from './ListItem';
+
+const DESCRIPTION = [
+  'A semantic `ul` or `ol` with its spacing and markers under control — reach for `ordered` only when the sequence matters, and for a `Table` as soon as each item carries fields of its own.',
+  'Markers are off by default and `role="list"` is set either way, so a list without bullets is still a list to a screen reader.',
+].join(' ');
+
+const meta = {
+  title: 'Data Display/List',
+  component: List,
+  subcomponents: {
+    ListItem,
+    ListIcon,
+  },
+  parameters: {
+    layout: 'centered',
+    docs: { description: { component: DESCRIPTION } },
+  },
+} satisfies Meta<typeof List>;
+
+export default meta;
+
+/**
+ * The default: unordered, no marker, 4px between items — a plain vertical group that
+ * still announces itself as a list.
+ */
+export const Basic: StoryFn<typeof meta> = () => (
+  <List>
+    <ListItem>First item</ListItem>
+    <ListItem>Second item</ListItem>
+    <ListItem>Third item</ListItem>
+  </List>
+);
+
+/**
+ * `variant='ordered'` changes the element to `ol`; the numbers themselves come from
+ * `marker='decimal'`, which is a separate decision from the element.
+ */
+export const Ordered: StoryFn<typeof meta> = () => (
+  <List variant='ordered' marker='decimal'>
+    <ListItem>First step</ListItem>
+    <ListItem>Second step</ListItem>
+    <ListItem>Third step</ListItem>
+  </List>
+);
+
+/**
+ * `marker='disc'` turns the bullets on and indents the list by 24px to make room for them.
+ */
+export const WithDisc: StoryFn<typeof meta> = () => (
+  <List marker='disc'>
+    <ListItem>Apples</ListItem>
+    <ListItem>Bananas</ListItem>
+    <ListItem>Cherries</ListItem>
+  </List>
+);
+
+/**
+ * `ListIcon` puts a meaningful glyph where the marker would be, coloured by what the row
+ * says; `ListItem` is a flex row, so the icon and its text share a baseline.
+ */
+export const WithIcons: StoryFn<typeof meta> = () => (
+  <List>
+    <ListItem>
+      <ListIcon className='text-text-success'>&#10003;</ListIcon>
+      Completed task
+    </ListItem>
+    <ListItem>
+      <ListIcon className='text-text-warning'>&#9888;</ListIcon>
+      Pending review
+    </ListItem>
+    <ListItem>
+      <ListIcon className='text-text-error'>&#10007;</ListIcon>
+      Failed check
+    </ListItem>
+  </List>
+);
+
+/**
+ * Three of the seven spacing steps. The gap sits between items only, so a wrapped item
+ * keeps its own lines tight while the list stays loose.
+ */
+export const Spacing: StoryFn<typeof meta> = () => (
+  <div className='flex gap-48'>
+    <div>
+      <p className='sb-annotation mb-8'>spacing=0</p>
+      <List spacing={0}>
+        <ListItem>Item A</ListItem>
+        <ListItem>Item B</ListItem>
+        <ListItem>Item C</ListItem>
+      </List>
+    </div>
+    <div>
+      <p className='sb-annotation mb-8'>spacing=8</p>
+      <List spacing={8}>
+        <ListItem>Item A</ListItem>
+        <ListItem>Item B</ListItem>
+        <ListItem>Item C</ListItem>
+      </List>
+    </div>
+    <div>
+      <p className='sb-annotation mb-8'>spacing=16</p>
+      <List spacing={16}>
+        <ListItem>Item A</ListItem>
+        <ListItem>Item B</ListItem>
+        <ListItem>Item C</ListItem>
+      </List>
+    </div>
+  </div>
+);
+```

package/dist/project/components/List/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/List/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,a;/**
+ * 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,o,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty,d=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of u(t))p.call(e,a)||a===r||c(e,a,{get:()=>t[a],enumerable:!(n=s(t,a))||n.enumerable});return e},m={},h={$dispatcherGuard:()=>k,$makeReadOnly:()=>M,$reset:()=>O,$structuralCheck:()=>T,c:()=>E,clearRenderCounterRegistry:()=>x,renderCounterRegistry:()=>I,useRenderCounter:()=>D};for(var y in h)c(m,y,{get:h[y],enumerable:!0});e.exports=d(c({},"__esModule",{value:!0}),m);var _=(a=null!=(n=r("C"))?i(f(n)):{},d(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:b,useEffect:g,isValidElement:w}=_,R=null!=(l=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:_.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),E="function"==typeof(null==(o=_.__COMPILER_RUNTIME)?void 0:o.c)?_.__COMPILER_RUNTIME.c:function(e){return _.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=v;return t[v]=!0,t},[])},S={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{S[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 R.ReactCurrentDispatcher.current=e,R.ReactCurrentDispatcher.current}S.useMemoCache=e=>{if(null!=$)return $.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function k(e){let t=R.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.length&&($=t),t===S)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(S)}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 O(e){for(let t=0;t<e.length;t++)e[t]=v}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var I=new Map;function x(){for(let e of I.values())e.forEach(e=>{e.count=0})}function D(e){let t=b(null);null!=t.current&&(t.current.count+=1),g(()=>{if(null==t.current){let r,n={count:0};null==(r=I.get(e))&&(r=new Set,I.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=I.get(e))&&n.delete(r))}})}var j=new Set;function T(e,t,r,n,a,l){function o(e,t,o,i){let c=`${n}:${l} [${a}] ${r}${o} changed from ${e} to ${t} at depth ${i}`;j.has(c)||(j.add(c),console.error(c))}!function e(t,r,n,a){if(!(a>2)){if(t!==r)if(typeof t!=typeof r)o(`type ${typeof t}`,`type ${typeof r}`,n,a);else if("object"==typeof t){let l=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)o("null",`type ${typeof r}`,n,a);else if(null===r)o(`type ${typeof t}`,"null",n,a);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)o(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,a);else for(let[l,i]of t)r.has(l)?e(i,r.get(l),`${n}.get(${l})`,a+1):o(`Map instance with key ${l}`,`Map instance without key ${l}`,n,a);else o("Map instance","other value",n,a);else if(r instanceof Map)o("other value","Map instance",n,a);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)o(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,a);else for(let e of r)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,n,a);else o("Set instance","other value",n,a);else if(r instanceof Set)o("other value","Set instance",n,a);else if(l||i)if(l!==i)o(`type ${l?"array":"object"}`,`type ${i?"array":"object"}`,n,a);else if(t.length!==r.length)o(`array with length ${t.length}`,`array with length ${r.length}`,n,a);else for(let l=0;l<t.length;l++)e(t[l],r[l],`${n}[${l}]`,a+1);else if(w(t)||w(r))w(t)!==w(r)?o(`type ${w(t)?"React element":"object"}`,`type ${w(r)?"React element":"object"}`,n,a):t.type!==r.type?o(`React element of type ${t.type}`,`React element of type ${r.type}`,n,a):e(t.props,r.props,`[props of ${n}]`,a+1);else{for(let e in r)e in t||o(`object without key ${e}`,`object with key ${e}`,n,a);for(let l in t)l in r?e(t[l],r[l],`${n}.${l}`,a+1):o(`object with key ${l}`,`object without key ${l}`,n,a)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&o(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,a):t!==r&&o(t,r,n,a)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,a=new WeakMap;function l(e,t,r){let l=t,o=r;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!=o.ref&&!l.prototype?.isReactComponent){let t=l,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let a=r.get(t);a||((a=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,a)),l=a}if("string"==typeof l&&"boolean"==typeof o.inert&&((o={...o}).inert?o.inert="":delete o.inert),"string"==typeof l)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in o&&(o={...o,[t]:o[e]},delete o[e]);return"string"==typeof l&&null!=o.ref&&(l=function(e,t){let r=a.get(e);r||(r=new Map,a.set(e,r));let n=r.get(t);if(n)return n;let l=e.forwardRef((r,n)=>{let a=e.useRef(null);if(!a.current||a.current.original!==n){let e;a.current={original:n,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof n){let r=n(t);e="function"==typeof r?r:void 0}else n&&(n.current=t)}}}return e.createElement(t,{...r,ref:a.current.callback})});return l.displayName=`CanvasHost(${t})`,r.set(t,l),l}(e,l)),{type:l,props:o}}function o(e){let t=(t,r,n)=>{let a=l(e,t,r??{});return e.createElement(a.type,void 0===n?a.props:{...a.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let a=l(e,t,r??{}),{children:o,...i}=a.props;return e.createElement(a.type,void 0===n?i:{...i,key:n},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...n)=>{let a=l(e,t,r??{});return e.createElement(a.type,a.props,...n)},cloneElement:(t,r,...n)=>{let a=e.cloneElement(t,r??void 0,...n),o=a.ref,i=l(e,a.type,{...a.props,ref:o});return i.type===a.type&&"string"!=typeof a.type?a:e.createElement(i.type,{...i.props,key:a.key})}}}r.d(t,{MA:()=>o,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:a,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:p,cloneElement:d,createContext:m,createElement:h,createFactory:y,createRef:_,forwardRef:b,isValidElement:g,lazy:w,memo:R,startTransition:v,unstable_act:E,useCallback:S,useContext:$,useDebugValue:N,useDeferredValue:C,useEffect:k,useId:O,useImperativeHandle:M,useInsertionEffect:I,useLayoutEffect:x,useMemo:D,useReducer:j,useRef:T,useState:A,useSyncExternalStore:P,useTransition:L,version:z,use:W}=n;r.d(t,{},{Children:a,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:p,cloneElement:d,createContext:m,createElement:h,createFactory:y,createRef:_,default:n,forwardRef:b,isValidElement:g,lazy:w,memo:R,startTransition:v,unstable_act:E,use:W,useCallback:S,useContext:$,useDebugValue:N,useDeferredValue:C,useEffect:k,useId:O,useImperativeHandle:M,useInsertionEffect:I,useLayoutEffect:x,useMemo:D,useReducer:j,useRef:T,useState:A,useSyncExternalStore:P,useTransition:L,version:z})}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var l=t[n]={exports:{}};return e[n](l,l.exports,r),l.exports}r.d=(e,t,n)=>{var a=(t,n)=>{for(var a in t)r.o(t,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,[n]:t[a]})};a(t,"get"),a(n,"value")},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.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:n,Fragment:a}=(0,r("p").MA)(window.React);var l=r("vD");let o=window.WallarmDS.List,i=window.WallarmDS.ListIcon,c=window.WallarmDS.ListItem,s={title:"Data Display/List",component:o,subcomponents:{ListItem:c,ListIcon:i},parameters:{layout:"centered",docs:{description:{component:'A semantic `ul` or `ol` with its spacing and markers under control — reach for `ordered` only when the sequence matters, and for a `Table` as soon as each item carries fields of its own. Markers are off by default and `role="list"` is set either way, so a list without bullets is still a list to a screen reader.'}}}};var u=r("C");let f=[{name:"Basic",story:()=>{let r,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(o,{children:[e(c,{children:"First item"}),e(c,{children:"Second item"}),e(c,{children:"Third item"})]}),n[0]=r):r=n[0],r},meta:s},{name:"Ordered",story:()=>{let r,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(o,{variant:"ordered",marker:"decimal",children:[e(c,{children:"First step"}),e(c,{children:"Second step"}),e(c,{children:"Third step"})]}),n[0]=r):r=n[0],r},meta:s},{name:"WithDisc",story:()=>{let r,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(o,{marker:"disc",children:[e(c,{children:"Apples"}),e(c,{children:"Bananas"}),e(c,{children:"Cherries"})]}),n[0]=r):r=n[0],r},meta:s},{name:"WithIcons",story:()=>{let r,n,a,s=(0,l.c)(3);return s[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(c,{children:[e(i,{className:"text-text-success",children:"✓"}),"Completed task"]}),s[0]=r):r=s[0],s[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(c,{children:[e(i,{className:"text-text-warning",children:"⚠"}),"Pending review"]}),s[1]=n):n=s[1],s[2]===Symbol.for("react.memo_cache_sentinel")?(a=t(o,{children:[r,n,t(c,{children:[e(i,{className:"text-text-error",children:"✗"}),"Failed check"]})]}),s[2]=a):a=s[2],a},meta:s},{name:"Spacing",story:()=>{let r,n,a,i,s,u,f=(0,l.c)(6);return f[0]===Symbol.for("react.memo_cache_sentinel")?(r=e("p",{className:"sb-annotation mb-8",children:"spacing=0"}),f[0]=r):r=f[0],f[1]===Symbol.for("react.memo_cache_sentinel")?(n=t("div",{children:[r,t(o,{spacing:0,children:[e(c,{children:"Item A"}),e(c,{children:"Item B"}),e(c,{children:"Item C"})]})]}),a=e("p",{className:"sb-annotation mb-8",children:"spacing=8"}),f[1]=n,f[2]=a):(n=f[1],a=f[2]),f[3]===Symbol.for("react.memo_cache_sentinel")?(i=t("div",{children:[a,t(o,{spacing:8,children:[e(c,{children:"Item A"}),e(c,{children:"Item B"}),e(c,{children:"Item C"})]})]}),s=e("p",{className:"sb-annotation mb-8",children:"spacing=16"}),f[3]=i,f[4]=s):(i=f[3],s=f[4]),f[5]===Symbol.for("react.memo_cache_sentinel")?(u=t("div",{className:"flex gap-48",children:[n,i,t("div",{children:[s,t(o,{spacing:16,children:[e(c,{children:"Item A"}),e(c,{children:"Item B"}),e(c,{children:"Item C"})]})]})]}),f[5]=u):u=f[5],u},meta:s}];function p({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},a="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,l=()=>u.default.createElement(a,n),o={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=l;l=()=>e(t,o)}return u.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},u.default.createElement("h2",{className:"text-sm mb-12"},e.name),u.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(u.default.createElement(window.WallarmDS.Root,null,f.map((e,t)=>u.default.createElement(p,{key:t,entry:e})))),t}}})();