@wallarm-org/claude-design 4.9.0 → 4.10.0

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

@@ -9,4 +9,4 @@ var e={vD(e,t,r){let n,a;/**
  * @nolint
  * @preventMunge
  * @preserve-invariant-messages
- */var o,l,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,m=Object.getOwnPropertyNames,u=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty,f=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of m(t))d.call(e,a)||a===r||c(e,a,{get:()=>t[a],enumerable:!(n=s(t,a))||n.enumerable});return e},p={},h={$dispatcherGuard:()=>E,$makeReadOnly:()=>D,$reset:()=>$,$structuralCheck:()=>W,c:()=>v,clearRenderCounterRegistry:()=>M,renderCounterRegistry:()=>O,useRenderCounter:()=>T};for(var y in h)c(p,y,{get:h[y],enumerable:!0});e.exports=f(c({},"__esModule",{value:!0}),p);var w=(a=null!=(n=r("C"))?i(u(n)):{},f(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:_,useEffect:b,isValidElement:S}=w,k=null!=(o=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:w.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,g=Symbol.for("react.memo_cache_sentinel"),v="function"==typeof(null==(l=w.__COMPILER_RUNTIME)?void 0:l.c)?w.__COMPILER_RUNTIME.c:function(e){return w.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=g;return t[g]=!0,t},[])},C={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{C[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 x=null;function N(e){return k.ReactCurrentDispatcher.current=e,k.ReactCurrentDispatcher.current}C.useMemoCache=e=>{if(null!=x)return x.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var R=[];function E(e){let t=k.ReactCurrentDispatcher.current;if(0===e){if(R.push(t),1===R.length&&(x=t),t===C)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(C)}else if(1===e){let e=R.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===R.length&&(x=null),N(e)}else if(2===e)R.push(t),N(x);else if(3===e){let e=R.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 $(e){for(let t=0;t<e.length;t++)e[t]=g}function D(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var O=new Map;function M(){for(let e of O.values())e.forEach(e=>{e.count=0})}function T(e){let t=_(null);null!=t.current&&(t.current.count+=1),b(()=>{if(null==t.current){let r,n={count:0};null==(r=O.get(e))&&(r=new Set,O.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=O.get(e))&&n.delete(r))}})}var F=new Set;function W(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}`;F.has(c)||(F.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(S(t)||S(r))S(t)!==S(r)?l(`type ${S(t)?"React element":"object"}`,`type ${S(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:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:d,cloneElement:f,createContext:p,createElement:h,createFactory:y,createRef:w,forwardRef:_,isValidElement:b,lazy:S,memo:k,startTransition:g,unstable_act:v,useCallback:C,useContext:x,useDebugValue:N,useDeferredValue:R,useEffect:E,useId:$,useImperativeHandle:D,useInsertionEffect:O,useLayoutEffect:M,useMemo:T,useReducer:F,useRef:W,useState:j,useSyncExternalStore:L,useTransition:I,version:P,use:A}=n;r.d(t,{},{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:d,cloneElement:f,createContext:p,createElement:h,createFactory:y,createRef:w,default:n,forwardRef:_,isValidElement:b,lazy:S,memo:k,startTransition:g,unstable_act:v,use:A,useCallback:C,useContext:x,useDebugValue:N,useDeferredValue:R,useEffect:E,useId:$,useImperativeHandle:D,useInsertionEffect:O,useLayoutEffect:M,useMemo:T,useReducer:F,useRef:W,useState:j,useSyncExternalStore:L,useTransition:I,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=new Intl.NumberFormat("en-US"),i=window.WallarmDS.Skeleton,c=window.WallarmDS.Chart,s=window.WallarmDS.ChartHeader,m=window.WallarmDS.ChartTitle,u=window.WallarmDS.useChartTimeFormatters,d=window.WallarmDS.LineChartEmpty,f=window.WallarmDS.LineChartGrid,p=window.WallarmDS.LineChartHoverPopoverDot,h=window.WallarmDS.LineChartLegend,y=window.WallarmDS.LineChartLegendItem,w=window.WallarmDS.LineChartTooltip,_=window.WallarmDS.LineChartYAxis,b=window.WallarmDS.ColumnChart,S=window.WallarmDS.ColumnChartBody,k=window.WallarmDS.ColumnChartStack,g=window.WallarmDS.ColumnChartXAxis,v={title:"Data Display/SimpleCharts/Vertical Stacked Columns Chart",component:b,subcomponents:{ColumnChartBody:S,ColumnChartStack:k,ColumnChartXAxis:g},parameters:{layout:"centered",design:{type:"figma",url:"https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=12612-31838"},docs:{description:{component:"Vertical stacked columns in the SimpleCharts family — a column per step (a day, an hour), split by category, with a legend over the plot that carries each category and its total. Parts stack in legend order, the first category on top. Column width adapts to the chart width and the number of steps, from 32px down to 16px. Hover a column for its breakdown; hover a legend item to fade the other categories out."}}},tags:["autodocs"]},C=Date.UTC(2026,0,1),x=[{key:"malicious",label:"Malicious anomaly",color:"red"},{key:"truePositive",label:"True positive",color:"brand"},{key:"falsePositive",label:"False positive",color:"amber"},{key:"benign",label:"Benign anomaly",color:"green"}],N=[[4,6,38,4],[5,0,12,10],[6,40,34,4],[6,14,72,4],[4,0,1,30],[3,8,22,6],[7,18,46,5]].map(([e,t,r,n],a)=>({timestamp:C+864e5*a,malicious:e,truePositive:t,falsePositive:r,benign:n})),R=Object.fromEntries(x.map(e=>[e.key,N.reduce((t,r)=>t+Number(r[e.key]??0),0)])),E=[...N,...N].map((e,t)=>({...e,timestamp:C+864e5*t})),$=e=>{let t;return t=Number(e),l.format(t)},D=(function(e=()=>{}){let t=(...t)=>e(...t);for(let r of["mockName","mockReturnValue","mockResolvedValue","mockImplementation"])t[r]=n=>("mockImplementation"===r?e=n:"mockReturnValue"===r?e=()=>n:"mockResolvedValue"===r&&(e=()=>Promise.resolve(n)),t);return t})().mockName("openVerdict");function O(r){let n;return t(y,{seriesKey:r.key,children:[e(p,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label}),e("span",{className:"text-xs font-mono font-medium text-text-primary",children:(n=R[r.key]??0,l.format(n))})]},r.key)}function M(r){return t(y,{seriesKey:r.key,children:[e(p,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function T(r){return t(y,{seriesKey:r.key,children:[e(p,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function F(e){D(e.currentTarget.dataset.key)}function W(t){return e(y,{seriesKey:t.key,children:e(i,{width:"96px",height:"16px",rounded:4})},t.key)}var j=r("C");let L=[{name:"Default",story:()=>{let r,n,a,l,i,d,p,y,v=(0,o.c)(12),{formatDate:C,formatDateWithTimezone:R}=u();return v[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(s,{children:e(m,{children:"Findings by verdict"})}),v[0]=r):r=v[0],v[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(h,{children:x.map(O)}),v[1]=n):n=v[1],v[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(f,{}),v[2]=a):a=v[2],v[3]!==C?(l=e(g,{tickFormatter:C}),v[3]=C,v[4]=l):l=v[4],v[5]===Symbol.for("react.memo_cache_sentinel")?(i=e(_,{tickFormatter:$}),d=e(k,{}),v[5]=i,v[6]=d):(i=v[5],d=v[6]),v[7]!==R?(p=e(w,{xTickFormatter:R}),v[7]=R,v[8]=p):p=v[8],v[9]!==l||v[10]!==p?(y=e("div",{className:"w-800",children:t(c,{children:[r,t(b,{data:N,series:x,xKey:"timestamp","data-testid":"column-chart",children:[n,t(S,{children:[a,l,i,d,p]})]})]})}),v[9]=l,v[10]=p,v[11]=y):y=v[11],y},meta:v},{name:"AdaptiveWidth",story:()=>{let r,n,a,l,i,d,p,h,y,v,C,R,D,O,M,T=(0,o.c)(25),{formatDate:F,formatDateWithTimezone:W}=u();return T[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(s,{children:e(m,{children:"7 days"})}),T[0]=r):r=T[0],T[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(f,{}),T[1]=n):n=T[1],T[2]!==F?(a=e(g,{tickFormatter:F}),T[2]=F,T[3]=a):a=T[3],T[4]===Symbol.for("react.memo_cache_sentinel")?(l=e(_,{tickFormatter:$}),i=e(k,{}),T[4]=l,T[5]=i):(l=T[4],i=T[5]),T[6]!==W?(d=e(w,{xTickFormatter:W}),T[6]=W,T[7]=d):d=T[7],T[8]!==a||T[9]!==d?(p=e("div",{className:"w-428",children:t(c,{children:[r,e(b,{data:N,series:x,xKey:"timestamp","data-testid":"column-chart-week",children:t(S,{children:[n,a,l,i,d]})})]})}),T[8]=a,T[9]=d,T[10]=p):p=T[10],T[11]===Symbol.for("react.memo_cache_sentinel")?(h=e(s,{children:e(m,{children:"14 days"})}),T[11]=h):h=T[11],T[12]===Symbol.for("react.memo_cache_sentinel")?(y=e(f,{}),T[12]=y):y=T[12],T[13]!==F?(v=e(g,{tickFormatter:F}),T[13]=F,T[14]=v):v=T[14],T[15]===Symbol.for("react.memo_cache_sentinel")?(C=e(_,{tickFormatter:$}),R=e(k,{}),T[15]=C,T[16]=R):(C=T[15],R=T[16]),T[17]!==W?(D=e(w,{xTickFormatter:W}),T[17]=W,T[18]=D):D=T[18],T[19]!==D||T[20]!==v?(O=e("div",{className:"w-428",children:t(c,{children:[h,e(b,{data:E,series:x,xKey:"timestamp","data-testid":"column-chart-two-weeks",children:t(S,{children:[y,v,C,R,D]})})]})}),T[19]=D,T[20]=v,T[21]=O):O=T[21],T[22]!==O||T[23]!==p?(M=t("div",{className:"flex gap-16",children:[p,O]}),T[22]=O,T[23]=p,T[24]=M):M=T[24],M},meta:v},{name:"CardHeight",story:()=>{let r,n,a,l,i,d,p,y,v,C,R,E,D,O,F,W,j,L=(0,o.c)(27),{formatDate:I,formatDateWithTimezone:P}=u();return L[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(s,{children:e(m,{children:"128px card"})}),L[0]=r):r=L[0],L[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(h,{children:x.map(M)}),L[1]=n):n=L[1],L[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(f,{}),L[2]=a):a=L[2],L[3]!==I?(l=e(g,{tickFormatter:I}),L[3]=I,L[4]=l):l=L[4],L[5]===Symbol.for("react.memo_cache_sentinel")?(i=e(_,{tickFormatter:$}),d=e(k,{}),L[5]=i,L[6]=d):(i=L[5],d=L[6]),L[7]!==P?(p=e(w,{xTickFormatter:P}),L[7]=P,L[8]=p):p=L[8],L[9]!==l||L[10]!==p?(y=t(c,{className:"h-128",children:[r,t(b,{data:N,series:x,xKey:"timestamp","data-testid":"column-chart-min",children:[n,t(S,{children:[a,l,i,d,p]})]})]}),L[9]=l,L[10]=p,L[11]=y):y=L[11],L[12]===Symbol.for("react.memo_cache_sentinel")?(v=e(s,{children:e(m,{children:"320px card"})}),L[12]=v):v=L[12],L[13]===Symbol.for("react.memo_cache_sentinel")?(C=e(h,{children:x.map(T)}),L[13]=C):C=L[13],L[14]===Symbol.for("react.memo_cache_sentinel")?(R=e(f,{}),L[14]=R):R=L[14],L[15]!==I?(E=e(g,{tickFormatter:I}),L[15]=I,L[16]=E):E=L[16],L[17]===Symbol.for("react.memo_cache_sentinel")?(D=e(_,{tickFormatter:$}),O=e(k,{}),L[17]=D,L[18]=O):(D=L[17],O=L[18]),L[19]!==P?(F=e(w,{xTickFormatter:P}),L[19]=P,L[20]=F):F=L[20],L[21]!==E||L[22]!==F?(W=t(c,{className:"h-320",children:[v,t(b,{data:N,series:x,xKey:"timestamp","data-testid":"column-chart-tall",children:[C,t(S,{children:[R,E,D,O,F]})]})]}),L[21]=E,L[22]=F,L[23]=W):W=L[23],L[24]!==W||L[25]!==y?(j=t("div",{className:"flex w-800 flex-col gap-16",children:[y,W]}),L[24]=W,L[25]=y,L[26]=j):j=L[26],j},meta:v},{name:"ClickableLegend",story:()=>{let r,n,a,i,d,v,C,E,D=(0,o.c)(12),{formatDate:O,formatDateWithTimezone:M}=u();return D[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(s,{children:e(m,{children:"Click a verdict to open it"})}),D[0]=r):r=D[0],D[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(h,{children:x.map(r=>{let n;return t(y,{seriesKey:r.key,onClick:F,children:[e(p,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label}),e("span",{className:"text-xs font-mono font-medium text-text-primary",children:(n=R[r.key]??0,l.format(n))})]},r.key)})}),D[1]=n):n=D[1],D[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(f,{}),D[2]=a):a=D[2],D[3]!==O?(i=e(g,{tickFormatter:O}),D[3]=O,D[4]=i):i=D[4],D[5]===Symbol.for("react.memo_cache_sentinel")?(d=e(_,{tickFormatter:$}),v=e(k,{}),D[5]=d,D[6]=v):(d=D[5],v=D[6]),D[7]!==M?(C=e(w,{xTickFormatter:M}),D[7]=M,D[8]=C):C=D[8],D[9]!==i||D[10]!==C?(E=e("div",{className:"w-800",children:t(c,{children:[r,t(b,{data:N,series:x,xKey:"timestamp","data-testid":"column-chart",children:[n,t(S,{children:[a,i,d,v,C]})]})]})}),D[9]=i,D[10]=C,D[11]=E):E=D[11],E},meta:v},{name:"Loading",story:()=>{let r,n,a=(0,o.c)(2);return a[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(s,{children:e(m,{children:"Findings by verdict"})}),a[0]=r):r=a[0],a[1]===Symbol.for("react.memo_cache_sentinel")?(n=e("div",{className:"w-800",children:t(c,{"aria-busy":"true","aria-live":"polite",children:[r,e(h,{children:x.map(W)}),e(d,{})]})}),a[1]=n):n=a[1],n},meta:v},{name:"Empty",story:()=>{let r,n=(0,o.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"w-800",children:t(c,{children:[e(s,{children:e(m,{children:"Findings by verdict"})}),e(d,{children:"No findings in this period"})]})}),n[0]=r):r=n[0],r},meta:v}];function I({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=()=>j.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 j.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},j.default.createElement("h2",{className:"text-sm mb-12"},e.name),j.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(j.default.createElement(window.WallarmDS.Root,null,L.map((e,t)=>j.default.createElement(I,{key:t,entry:e})))),t}}})();
+ */var o,l,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,m=Object.getOwnPropertyNames,u=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty,f=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of m(t))d.call(e,a)||a===r||c(e,a,{get:()=>t[a],enumerable:!(n=s(t,a))||n.enumerable});return e},p={},h={$dispatcherGuard:()=>E,$makeReadOnly:()=>D,$reset:()=>$,$structuralCheck:()=>W,c:()=>v,clearRenderCounterRegistry:()=>M,renderCounterRegistry:()=>O,useRenderCounter:()=>T};for(var y in h)c(p,y,{get:h[y],enumerable:!0});e.exports=f(c({},"__esModule",{value:!0}),p);var _=(a=null!=(n=r("C"))?i(u(n)):{},f(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:w,useEffect:b,isValidElement:S}=_,k=null!=(o=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:_.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,g=Symbol.for("react.memo_cache_sentinel"),v="function"==typeof(null==(l=_.__COMPILER_RUNTIME)?void 0:l.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},[])},x={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{x[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 N(e){return k.ReactCurrentDispatcher.current=e,k.ReactCurrentDispatcher.current}x.useMemoCache=e=>{if(null!=C)return C.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var R=[];function E(e){let t=k.ReactCurrentDispatcher.current;if(0===e){if(R.push(t),1===R.length&&(C=t),t===x)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(x)}else if(1===e){let e=R.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===R.length&&(C=null),N(e)}else if(2===e)R.push(t),N(C);else if(3===e){let e=R.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 $(e){for(let t=0;t<e.length;t++)e[t]=g}function D(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var O=new Map;function M(){for(let e of O.values())e.forEach(e=>{e.count=0})}function T(e){let t=w(null);null!=t.current&&(t.current.count+=1),b(()=>{if(null==t.current){let r,n={count:0};null==(r=O.get(e))&&(r=new Set,O.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=O.get(e))&&n.delete(r))}})}var F=new Set;function W(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}`;F.has(c)||(F.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(S(t)||S(r))S(t)!==S(r)?l(`type ${S(t)?"React element":"object"}`,`type ${S(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:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:d,cloneElement:f,createContext:p,createElement:h,createFactory:y,createRef:_,forwardRef:w,isValidElement:b,lazy:S,memo:k,startTransition:g,unstable_act:v,useCallback:x,useContext:C,useDebugValue:N,useDeferredValue:R,useEffect:E,useId:$,useImperativeHandle:D,useInsertionEffect:O,useLayoutEffect:M,useMemo:T,useReducer:F,useRef:W,useState:j,useSyncExternalStore:L,useTransition:I,version:P,use:A}=n;r.d(t,{},{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:d,cloneElement:f,createContext:p,createElement:h,createFactory:y,createRef:_,default:n,forwardRef:w,isValidElement:b,lazy:S,memo:k,startTransition:g,unstable_act:v,use:A,useCallback:x,useContext:C,useDebugValue:N,useDeferredValue:R,useEffect:E,useId:$,useImperativeHandle:D,useInsertionEffect:O,useLayoutEffect:M,useMemo:T,useReducer:F,useRef:W,useState:j,useSyncExternalStore:L,useTransition:I,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=new Intl.NumberFormat("en-US"),i=window.WallarmDS.Skeleton,c=window.WallarmDS.Chart,s=window.WallarmDS.ChartHeader,m=window.WallarmDS.ChartTitle,u=window.WallarmDS.useChartTimeFormatters,d=window.WallarmDS.LineChartEmpty,f=window.WallarmDS.LineChartGrid,p=window.WallarmDS.LineChartHoverPopoverDot,h=window.WallarmDS.LineChartLegend,y=window.WallarmDS.LineChartLegendItem,_=window.WallarmDS.LineChartTooltip,w=window.WallarmDS.LineChartYAxis,b=window.WallarmDS.ColumnChart,S=window.WallarmDS.ColumnChartBody,k=window.WallarmDS.ColumnChartStack,g=window.WallarmDS.ColumnChartXAxis,v={title:"Data Display/SimpleCharts/Vertical Stacked Columns Chart",component:b,subcomponents:{ColumnChartBody:S,ColumnChartStack:k,ColumnChartXAxis:g},parameters:{layout:"centered",docs:{description:{component:"Vertical stacked columns in the SimpleCharts family — a column per step (a day, an hour), split by category, with a legend over the plot that carries each category and its total. Parts stack in legend order, the first category on top. Column width adapts to the chart width and the number of steps, from 32px down to 16px. Hover a column for its breakdown; hover a legend item to fade the other categories out."}}},tags:["autodocs"]},x=Date.UTC(2026,0,1),C=[{key:"malicious",label:"Malicious anomaly",color:"red"},{key:"truePositive",label:"True positive",color:"brand"},{key:"falsePositive",label:"False positive",color:"amber"},{key:"benign",label:"Benign anomaly",color:"green"}],N=[[4,6,38,4],[5,0,12,10],[6,40,34,4],[6,14,72,4],[4,0,1,30],[3,8,22,6],[7,18,46,5]].map(([e,t,r,n],a)=>({timestamp:x+864e5*a,malicious:e,truePositive:t,falsePositive:r,benign:n})),R=Object.fromEntries(C.map(e=>[e.key,N.reduce((t,r)=>t+Number(r[e.key]??0),0)])),E=[...N,...N].map((e,t)=>({...e,timestamp:x+864e5*t})),$=e=>{let t;return t=Number(e),l.format(t)},D=(function(e=()=>{}){let t=(...t)=>e(...t);for(let r of["mockName","mockReturnValue","mockResolvedValue","mockImplementation"])t[r]=n=>("mockImplementation"===r?e=n:"mockReturnValue"===r?e=()=>n:"mockResolvedValue"===r&&(e=()=>Promise.resolve(n)),t);return t})().mockName("openVerdict");function O(r){let n;return t(y,{seriesKey:r.key,children:[e(p,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label}),e("span",{className:"text-xs font-mono font-medium text-text-primary",children:(n=R[r.key]??0,l.format(n))})]},r.key)}function M(r){return t(y,{seriesKey:r.key,children:[e(p,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function T(r){return t(y,{seriesKey:r.key,children:[e(p,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function F(e){D(e.currentTarget.dataset.key)}function W(t){return e(y,{seriesKey:t.key,children:e(i,{width:"96px",height:"16px",rounded:4})},t.key)}var j=r("C");let L=[{name:"Default",story:()=>{let r,n,a,l,i,d,p,y,v=(0,o.c)(12),{formatDate:x,formatDateWithTimezone:R}=u();return v[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(s,{children:e(m,{children:"Findings by verdict"})}),v[0]=r):r=v[0],v[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(h,{children:C.map(O)}),v[1]=n):n=v[1],v[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(f,{}),v[2]=a):a=v[2],v[3]!==x?(l=e(g,{tickFormatter:x}),v[3]=x,v[4]=l):l=v[4],v[5]===Symbol.for("react.memo_cache_sentinel")?(i=e(w,{tickFormatter:$}),d=e(k,{}),v[5]=i,v[6]=d):(i=v[5],d=v[6]),v[7]!==R?(p=e(_,{xTickFormatter:R}),v[7]=R,v[8]=p):p=v[8],v[9]!==l||v[10]!==p?(y=e("div",{className:"w-800",children:t(c,{children:[r,t(b,{data:N,series:C,xKey:"timestamp","data-testid":"column-chart",children:[n,t(S,{children:[a,l,i,d,p]})]})]})}),v[9]=l,v[10]=p,v[11]=y):y=v[11],y},meta:v},{name:"AdaptiveWidth",story:()=>{let r,n,a,l,i,d,p,h,y,v,x,R,D,O,M,T=(0,o.c)(25),{formatDate:F,formatDateWithTimezone:W}=u();return T[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(s,{children:e(m,{children:"7 days"})}),T[0]=r):r=T[0],T[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(f,{}),T[1]=n):n=T[1],T[2]!==F?(a=e(g,{tickFormatter:F}),T[2]=F,T[3]=a):a=T[3],T[4]===Symbol.for("react.memo_cache_sentinel")?(l=e(w,{tickFormatter:$}),i=e(k,{}),T[4]=l,T[5]=i):(l=T[4],i=T[5]),T[6]!==W?(d=e(_,{xTickFormatter:W}),T[6]=W,T[7]=d):d=T[7],T[8]!==a||T[9]!==d?(p=e("div",{className:"w-428",children:t(c,{children:[r,e(b,{data:N,series:C,xKey:"timestamp","data-testid":"column-chart-week",children:t(S,{children:[n,a,l,i,d]})})]})}),T[8]=a,T[9]=d,T[10]=p):p=T[10],T[11]===Symbol.for("react.memo_cache_sentinel")?(h=e(s,{children:e(m,{children:"14 days"})}),T[11]=h):h=T[11],T[12]===Symbol.for("react.memo_cache_sentinel")?(y=e(f,{}),T[12]=y):y=T[12],T[13]!==F?(v=e(g,{tickFormatter:F}),T[13]=F,T[14]=v):v=T[14],T[15]===Symbol.for("react.memo_cache_sentinel")?(x=e(w,{tickFormatter:$}),R=e(k,{}),T[15]=x,T[16]=R):(x=T[15],R=T[16]),T[17]!==W?(D=e(_,{xTickFormatter:W}),T[17]=W,T[18]=D):D=T[18],T[19]!==D||T[20]!==v?(O=e("div",{className:"w-428",children:t(c,{children:[h,e(b,{data:E,series:C,xKey:"timestamp","data-testid":"column-chart-two-weeks",children:t(S,{children:[y,v,x,R,D]})})]})}),T[19]=D,T[20]=v,T[21]=O):O=T[21],T[22]!==O||T[23]!==p?(M=t("div",{className:"flex gap-16",children:[p,O]}),T[22]=O,T[23]=p,T[24]=M):M=T[24],M},meta:v},{name:"CardHeight",story:()=>{let r,n,a,l,i,d,p,y,v,x,R,E,D,O,F,W,j,L=(0,o.c)(27),{formatDate:I,formatDateWithTimezone:P}=u();return L[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(s,{children:e(m,{children:"128px card"})}),L[0]=r):r=L[0],L[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(h,{children:C.map(M)}),L[1]=n):n=L[1],L[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(f,{}),L[2]=a):a=L[2],L[3]!==I?(l=e(g,{tickFormatter:I}),L[3]=I,L[4]=l):l=L[4],L[5]===Symbol.for("react.memo_cache_sentinel")?(i=e(w,{tickFormatter:$}),d=e(k,{}),L[5]=i,L[6]=d):(i=L[5],d=L[6]),L[7]!==P?(p=e(_,{xTickFormatter:P}),L[7]=P,L[8]=p):p=L[8],L[9]!==l||L[10]!==p?(y=t(c,{className:"h-128",children:[r,t(b,{data:N,series:C,xKey:"timestamp","data-testid":"column-chart-min",children:[n,t(S,{children:[a,l,i,d,p]})]})]}),L[9]=l,L[10]=p,L[11]=y):y=L[11],L[12]===Symbol.for("react.memo_cache_sentinel")?(v=e(s,{children:e(m,{children:"320px card"})}),L[12]=v):v=L[12],L[13]===Symbol.for("react.memo_cache_sentinel")?(x=e(h,{children:C.map(T)}),L[13]=x):x=L[13],L[14]===Symbol.for("react.memo_cache_sentinel")?(R=e(f,{}),L[14]=R):R=L[14],L[15]!==I?(E=e(g,{tickFormatter:I}),L[15]=I,L[16]=E):E=L[16],L[17]===Symbol.for("react.memo_cache_sentinel")?(D=e(w,{tickFormatter:$}),O=e(k,{}),L[17]=D,L[18]=O):(D=L[17],O=L[18]),L[19]!==P?(F=e(_,{xTickFormatter:P}),L[19]=P,L[20]=F):F=L[20],L[21]!==E||L[22]!==F?(W=t(c,{className:"h-320",children:[v,t(b,{data:N,series:C,xKey:"timestamp","data-testid":"column-chart-tall",children:[x,t(S,{children:[R,E,D,O,F]})]})]}),L[21]=E,L[22]=F,L[23]=W):W=L[23],L[24]!==W||L[25]!==y?(j=t("div",{className:"flex w-800 flex-col gap-16",children:[y,W]}),L[24]=W,L[25]=y,L[26]=j):j=L[26],j},meta:v},{name:"ClickableLegend",story:()=>{let r,n,a,i,d,v,x,E,D=(0,o.c)(12),{formatDate:O,formatDateWithTimezone:M}=u();return D[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(s,{children:e(m,{children:"Click a verdict to open it"})}),D[0]=r):r=D[0],D[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(h,{children:C.map(r=>{let n;return t(y,{seriesKey:r.key,onClick:F,children:[e(p,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label}),e("span",{className:"text-xs font-mono font-medium text-text-primary",children:(n=R[r.key]??0,l.format(n))})]},r.key)})}),D[1]=n):n=D[1],D[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(f,{}),D[2]=a):a=D[2],D[3]!==O?(i=e(g,{tickFormatter:O}),D[3]=O,D[4]=i):i=D[4],D[5]===Symbol.for("react.memo_cache_sentinel")?(d=e(w,{tickFormatter:$}),v=e(k,{}),D[5]=d,D[6]=v):(d=D[5],v=D[6]),D[7]!==M?(x=e(_,{xTickFormatter:M}),D[7]=M,D[8]=x):x=D[8],D[9]!==i||D[10]!==x?(E=e("div",{className:"w-800",children:t(c,{children:[r,t(b,{data:N,series:C,xKey:"timestamp","data-testid":"column-chart",children:[n,t(S,{children:[a,i,d,v,x]})]})]})}),D[9]=i,D[10]=x,D[11]=E):E=D[11],E},meta:v},{name:"Loading",story:()=>{let r,n,a=(0,o.c)(2);return a[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(s,{children:e(m,{children:"Findings by verdict"})}),a[0]=r):r=a[0],a[1]===Symbol.for("react.memo_cache_sentinel")?(n=e("div",{className:"w-800",children:t(c,{"aria-busy":"true","aria-live":"polite",children:[r,e(h,{children:C.map(W)}),e(d,{})]})}),a[1]=n):n=a[1],n},meta:v},{name:"Empty",story:()=>{let r,n=(0,o.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"w-800",children:t(c,{children:[e(s,{children:e(m,{children:"Findings by verdict"})}),e(d,{children:"No findings in this period"})]})}),n[0]=r):r=n[0],r},meta:v}];function I({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=()=>j.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 j.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},j.default.createElement("h2",{className:"text-sm mb-12"},e.name),j.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(j.default.createElement(window.WallarmDS.Root,null,L.map((e,t)=>j.default.createElement(I,{key:t,entry:e})))),t}}})();

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

@@ -104,9 +104,6 @@ import {
 } from './HorizontalBarStack';
 import { HorizontalBarStackSkeleton } from './HorizontalBarStackSkeleton';
 
-const figmaUrl =
-  'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=9667-10883';
-
 const severityData: HorizontalBarStackDatum[] = [
   { name: 'Critical', value: 42, color: 'red' },
   { name: 'High', value: 31, color: 'brand' },
@@ -123,7 +120,6 @@ const meta = {
   component: HorizontalBarStack,
   parameters: {
     layout: 'centered',
-    design: { type: 'figma', url: figmaUrl },
     docs: { description: { component: DESCRIPTION } },
   },
   args: {

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

@@ -9,4 +9,4 @@ var e={vD(e,t,r){let n,a;/**
  * @nolint
  * @preventMunge
  * @preserve-invariant-messages
- */var l,o,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,d=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,p=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of u(t))f.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:()=>O,$reset:()=>M,$structuralCheck:()=>z,c:()=>R,clearRenderCounterRegistry:()=>T,renderCounterRegistry:()=>D,useRenderCounter:()=>j};for(var y in h)c(m,y,{get:h[y],enumerable:!0});e.exports=p(c({},"__esModule",{value:!0}),m);var g=(a=null!=(n=r("C"))?i(d(n)):{},p(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:w,useEffect:b,isValidElement:v}=g,S=null!=(l=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,_=Symbol.for("react.memo_cache_sentinel"),R="function"==typeof(null==(o=g.__COMPILER_RUNTIME)?void 0:o.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=_;return t[_]=!0,t},[])},E={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{E[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var $=null;function N(e){return S.ReactCurrentDispatcher.current=e,S.ReactCurrentDispatcher.current}E.useMemoCache=e=>{if(null!=$)return $.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function k(e){let t=S.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.length&&($=t),t===E)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");N(E)}else if(1===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===C.length&&($=null),N(e)}else if(2===e)C.push(t),N($);else if(3===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");N(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function M(e){for(let t=0;t<e.length;t++)e[t]=_}function O(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var D=new Map;function T(){for(let e of D.values())e.forEach(e=>{e.count=0})}function j(e){let t=w(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 x=new Set;function z(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}`;x.has(c)||(x.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(v(t)||v(r))v(t)!==v(r)?o(`type ${v(t)?"React element":"object"}`,`type ${v(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:d,act:f,cloneElement:p,createContext:m,createElement:h,createFactory:y,createRef:g,forwardRef:w,isValidElement:b,lazy:v,memo:S,startTransition:_,unstable_act:R,useCallback:E,useContext:$,useDebugValue:N,useDeferredValue:C,useEffect:k,useId:M,useImperativeHandle:O,useInsertionEffect:D,useLayoutEffect:T,useMemo:j,useReducer:x,useRef:z,useState:A,useSyncExternalStore:W,useTransition:I,version:P,use:L}=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:d,act:f,cloneElement:p,createContext:m,createElement:h,createFactory:y,createRef:g,default:n,forwardRef:w,isValidElement:b,lazy:v,memo:S,startTransition:_,unstable_act:R,use:L,useCallback:E,useContext:$,useDebugValue:N,useDeferredValue:C,useEffect:k,useId:M,useImperativeHandle:O,useInsertionEffect:D,useLayoutEffect:T,useMemo:j,useReducer:x,useRef:z,useState:A,useSyncExternalStore:W,useTransition:I,version:P})}},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"),o=r("C");let i=window.WallarmDS.Chart,c=window.WallarmDS.ChartHeader,s=window.WallarmDS.ChartTitle,u=window.WallarmDS.MetricDelta,d=window.WallarmDS.MetricHeader,f=window.WallarmDS.MetricValue,p=window.WallarmDS.HorizontalBarStack,m=window.WallarmDS.HorizontalBarStackSkeleton,h=[{name:"Critical",value:42,color:"red"},{name:"High",value:31,color:"brand"},{name:"Medium",value:18,color:"amber"}],y={title:"Data Display/SimpleCharts/HorizontalBarStack",component:p,parameters:{layout:"centered",design:{type:"figma",url:"https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=9667-10883"},docs:{description:{component:"One total read as a few named parts in a single band — reach for `BarList` when each part deserves a row of its own, and `Metric` when there is no breakdown to show at all. The header is composed from the shared `Metric` bricks rather than configured, so a value and its delta read the same here as anywhere else in the family; hovering a segment or a legend item fades the rest."}}},args:{"data-testid":"horizontal-bar-stack"},argTypes:{data:{control:!1},children:{control:!1},selectedNames:{control:!1},onSelect:{control:!1},activeName:{control:!1},onActiveNameChange:{control:!1},ref:{control:!1},className:{control:"text"}}},g=r=>{let n,a,o=(0,l.c)(3);return o[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(c,{children:e(s,{children:"Findings by severity"})}),o[0]=n):n=o[0],o[1]!==r?(a=e("div",{className:"w-400",children:t(i,{children:[n,e(p,{...r})]})}),o[1]=r,o[2]=a):a=o[2],a},w=g.bind({});w.args={data:h,children:t(d,{children:[e(f,{children:"91"}),e(u,{value:10,trend:"up",sentiment:"negative"})]})};let b=g.bind({});b.args={data:h,children:e(d,{children:e(f,{children:"91"})})};let v=g.bind({});v.args={data:h};let S=g.bind({});S.args={data:h,total:120,children:t(d,{children:[e(f,{children:"91"}),e(u,{value:4,trend:"down",sentiment:"positive"})]})};let _=g.bind({});_.args={data:h,legend:!1,children:e(d,{children:e(f,{children:"91"})})};let R=g.bind({});R.args={data:["red","brand","amber","blue","green","purple"].map((e,t)=>({name:e,value:10+t,color:e})),children:e(d,{children:e(f,{children:"75"})})};let E=[{name:"Default",story:w,meta:y},{name:"NoDelta",story:b,meta:y},{name:"NoValue",story:v,meta:y},{name:"WithRemainder",story:S,meta:y},{name:"LegendOff",story:_,meta:y},{name:"Palette",story:R,meta:y},{name:"Loading",story:()=>{let r,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"w-400",children:t(i,{children:[e(c,{children:e(s,{children:"Findings by severity"})}),e(m,{"data-testid":"horizontal-bar-stack-skeleton"})]})}),n[0]=r):r=n[0],r},meta:y},{name:"Selectable",story:()=>{let r,n,a,u,m,y=(0,l.c)(7),[g,w]=(0,o.useState)("Critical");return y[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(c,{children:e(s,{children:"Findings by severity"})}),y[0]=r):r=y[0],y[1]!==g?(n=g?[g]:[],y[1]=g,y[2]=n):n=y[2],y[3]===Symbol.for("react.memo_cache_sentinel")?(a=e=>w(t=>t===e?null:e),y[3]=a):a=y[3],y[4]===Symbol.for("react.memo_cache_sentinel")?(u=e(d,{children:e(f,{children:"91"})}),y[4]=u):u=y[4],y[5]!==n?(m=e("div",{className:"w-400",children:t(i,{children:[r,e(p,{"data-testid":"horizontal-bar-stack",data:h,selectedNames:n,onSelect:a,children:u})]})}),y[5]=n,y[6]=m):m=y[6],m},meta:y}];function $({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=()=>o.default.createElement(a,n),i={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,i)}return o.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},o.default.createElement("h2",{className:"text-sm mb-12"},e.name),o.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(o.default.createElement(window.WallarmDS.Root,null,E.map((e,t)=>o.default.createElement($,{key:t,entry:e})))),t}}})();
+ */var l,o,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,d=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,p=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of u(t))f.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:()=>O,$reset:()=>M,$structuralCheck:()=>z,c:()=>R,clearRenderCounterRegistry:()=>j,renderCounterRegistry:()=>D,useRenderCounter:()=>T};for(var y in h)c(m,y,{get:h[y],enumerable:!0});e.exports=p(c({},"__esModule",{value:!0}),m);var g=(a=null!=(n=r("C"))?i(d(n)):{},p(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:w,useEffect:b,isValidElement:v}=g,S=null!=(l=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,_=Symbol.for("react.memo_cache_sentinel"),R="function"==typeof(null==(o=g.__COMPILER_RUNTIME)?void 0:o.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=_;return t[_]=!0,t},[])},E={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{E[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var $=null;function N(e){return S.ReactCurrentDispatcher.current=e,S.ReactCurrentDispatcher.current}E.useMemoCache=e=>{if(null!=$)return $.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function k(e){let t=S.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.length&&($=t),t===E)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");N(E)}else if(1===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===C.length&&($=null),N(e)}else if(2===e)C.push(t),N($);else if(3===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");N(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function M(e){for(let t=0;t<e.length;t++)e[t]=_}function O(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var D=new Map;function j(){for(let e of D.values())e.forEach(e=>{e.count=0})}function T(e){let t=w(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 x=new Set;function z(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}`;x.has(c)||(x.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(v(t)||v(r))v(t)!==v(r)?o(`type ${v(t)?"React element":"object"}`,`type ${v(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:d,act:f,cloneElement:p,createContext:m,createElement:h,createFactory:y,createRef:g,forwardRef:w,isValidElement:b,lazy:v,memo:S,startTransition:_,unstable_act:R,useCallback:E,useContext:$,useDebugValue:N,useDeferredValue:C,useEffect:k,useId:M,useImperativeHandle:O,useInsertionEffect:D,useLayoutEffect:j,useMemo:T,useReducer:x,useRef:z,useState:A,useSyncExternalStore:I,useTransition:P,version:W,use:L}=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:d,act:f,cloneElement:p,createContext:m,createElement:h,createFactory:y,createRef:g,default:n,forwardRef:w,isValidElement:b,lazy:v,memo:S,startTransition:_,unstable_act:R,use:L,useCallback:E,useContext:$,useDebugValue:N,useDeferredValue:C,useEffect:k,useId:M,useImperativeHandle:O,useInsertionEffect:D,useLayoutEffect:j,useMemo:T,useReducer:x,useRef:z,useState:A,useSyncExternalStore:I,useTransition:P,version:W})}},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"),o=r("C");let i=window.WallarmDS.Chart,c=window.WallarmDS.ChartHeader,s=window.WallarmDS.ChartTitle,u=window.WallarmDS.MetricDelta,d=window.WallarmDS.MetricHeader,f=window.WallarmDS.MetricValue,p=window.WallarmDS.HorizontalBarStack,m=window.WallarmDS.HorizontalBarStackSkeleton,h=[{name:"Critical",value:42,color:"red"},{name:"High",value:31,color:"brand"},{name:"Medium",value:18,color:"amber"}],y={title:"Data Display/SimpleCharts/HorizontalBarStack",component:p,parameters:{layout:"centered",docs:{description:{component:"One total read as a few named parts in a single band — reach for `BarList` when each part deserves a row of its own, and `Metric` when there is no breakdown to show at all. The header is composed from the shared `Metric` bricks rather than configured, so a value and its delta read the same here as anywhere else in the family; hovering a segment or a legend item fades the rest."}}},args:{"data-testid":"horizontal-bar-stack"},argTypes:{data:{control:!1},children:{control:!1},selectedNames:{control:!1},onSelect:{control:!1},activeName:{control:!1},onActiveNameChange:{control:!1},ref:{control:!1},className:{control:"text"}}},g=r=>{let n,a,o=(0,l.c)(3);return o[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(c,{children:e(s,{children:"Findings by severity"})}),o[0]=n):n=o[0],o[1]!==r?(a=e("div",{className:"w-400",children:t(i,{children:[n,e(p,{...r})]})}),o[1]=r,o[2]=a):a=o[2],a},w=g.bind({});w.args={data:h,children:t(d,{children:[e(f,{children:"91"}),e(u,{value:10,trend:"up",sentiment:"negative"})]})};let b=g.bind({});b.args={data:h,children:e(d,{children:e(f,{children:"91"})})};let v=g.bind({});v.args={data:h};let S=g.bind({});S.args={data:h,total:120,children:t(d,{children:[e(f,{children:"91"}),e(u,{value:4,trend:"down",sentiment:"positive"})]})};let _=g.bind({});_.args={data:h,legend:!1,children:e(d,{children:e(f,{children:"91"})})};let R=g.bind({});R.args={data:["red","brand","amber","blue","green","purple"].map((e,t)=>({name:e,value:10+t,color:e})),children:e(d,{children:e(f,{children:"75"})})};let E=[{name:"Default",story:w,meta:y},{name:"NoDelta",story:b,meta:y},{name:"NoValue",story:v,meta:y},{name:"WithRemainder",story:S,meta:y},{name:"LegendOff",story:_,meta:y},{name:"Palette",story:R,meta:y},{name:"Loading",story:()=>{let r,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"w-400",children:t(i,{children:[e(c,{children:e(s,{children:"Findings by severity"})}),e(m,{"data-testid":"horizontal-bar-stack-skeleton"})]})}),n[0]=r):r=n[0],r},meta:y},{name:"Selectable",story:()=>{let r,n,a,u,m,y=(0,l.c)(7),[g,w]=(0,o.useState)("Critical");return y[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(c,{children:e(s,{children:"Findings by severity"})}),y[0]=r):r=y[0],y[1]!==g?(n=g?[g]:[],y[1]=g,y[2]=n):n=y[2],y[3]===Symbol.for("react.memo_cache_sentinel")?(a=e=>w(t=>t===e?null:e),y[3]=a):a=y[3],y[4]===Symbol.for("react.memo_cache_sentinel")?(u=e(d,{children:e(f,{children:"91"})}),y[4]=u):u=y[4],y[5]!==n?(m=e("div",{className:"w-400",children:t(i,{children:[r,e(p,{"data-testid":"horizontal-bar-stack",data:h,selectedNames:n,onSelect:a,children:u})]})}),y[5]=n,y[6]=m):m=y[6],m},meta:y}];function $({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=()=>o.default.createElement(a,n),i={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,i)}return o.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},o.default.createElement("h2",{className:"text-sm mb-12"},e.name),o.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(o.default.createElement(window.WallarmDS.Root,null,E.map((e,t)=>o.default.createElement($,{key:t,entry:e})))),t}}})();

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

@@ -240,10 +240,6 @@ const meta = {
   },
   parameters: {
     layout: 'padded',
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7490-123142&m=dev',
-    },
     docs: { description: { component: DESCRIPTION } },
   },
   tags: ['autodocs'],
@@ -277,13 +273,6 @@ export const Default: StoryFn<typeof meta> = () => {
   );
 };
 
-Default.parameters = {
-  design: {
-    type: 'figma',
-    url: 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7490-123143&m=dev',
-  },
-};
-
 /**
  * Three series with a legend composed from `LineChartLegendItem` rows. The dot in each row is
  * the same one the tooltip uses, so the colours cannot drift apart.
@@ -325,13 +314,6 @@ export const DefaultMulti: StoryFn<typeof meta> = () => {
   );
 };
 
-DefaultMulti.parameters = {
-  design: {
-    type: 'figma',
-    url: 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7509-2355&m=dev',
-  },
-};
-
 const MultiLegend = ({ series = multiSeries }: { series?: LineChartSeries[] }) => (
   <LineChartLegend>
     {series.map(s => (
@@ -379,13 +361,6 @@ export const WithMetric: StoryFn<typeof meta> = () => {
   );
 };
 
-WithMetric.parameters = {
-  design: {
-    type: 'figma',
-    url: 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=11626-37312',
-  },
-};
-
 /**
  * Straight joins tell the truth about where the samples are; `monotone` smooths between them
  * and reads better for a rate. Mix the two only when the series mean genuinely different
@@ -1029,13 +1004,6 @@ export const Loading: StoryFn<typeof meta> = () => (
   </div>
 );
 
-Loading.parameters = {
-  design: {
-    type: 'figma',
-    url: 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7519-2617&m=dev',
-  },
-};
-
 type RefreshingPlacement = 'none' | 'top' | 'bottom' | 'left' | 'right';
 
 const RefreshingChart = ({
@@ -1180,13 +1148,6 @@ export const Empty: StoryFn<typeof meta> = () => (
   </div>
 );
 
-Empty.parameters = {
-  design: {
-    type: 'figma',
-    url: 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=8670-2594&m=dev',
-  },
-};
-
 const LongTimeRangeChart = () => {
   const { formatDate, formatDateTime, formatDateTimeWithTimezone } = useChartTimeFormatters();
   const formatDateTimeRangeText = useMemo(() => formatRange(formatDateTime), [formatDateTime]);

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

@@ -9,4 +9,4 @@ var e={vD(e,t,r){let n,a;/**
  * @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}}})();
+ */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:()=>T,$makeReadOnly:()=>F,$reset:()=>E,$structuralCheck:()=>L,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:k,useEffect:S,isValidElement:b}=_,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 N=[];function T(e){let t=w.ReactCurrentDispatcher.current;if(0===e){if(N.push(t),1===N.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=N.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===N.length&&(C=null),R(e)}else if(2===e)N.push(t),R(C);else if(3===e){let e=N.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=k(null);null!=t.current&&(t.current.count+=1),S(()=>{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 M=new Set;function L(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}`;M.has(c)||(M.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(b(t)||b(r))b(t)!==b(r)?i(`type ${b(t)?"React element":"object"}`,`type ${b(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:k,isValidElement:S,lazy:b,memo:w,startTransition:g,unstable_act:x,useCallback:v,useContext:C,useDebugValue:R,useDeferredValue:N,useEffect:T,useId:E,useImperativeHandle:F,useInsertionEffect:D,useLayoutEffect:K,useMemo:$,useReducer:M,useRef:L,useState:W,useSyncExternalStore:O,useTransition:I,version:G,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:k,isValidElement:S,lazy:b,memo:w,startTransition:g,unstable_act:x,use:A,useCallback:v,useContext:C,useDebugValue:R,useDeferredValue:N,useEffect:T,useId:E,useImperativeHandle:F,useInsertionEffect:D,useLayoutEffect:K,useMemo:$,useReducer:M,useRef:L,useState:W,useSyncExternalStore:O,useTransition:I,version:G})}},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),k=(()=>{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})(),S=m(1e3),b=[{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,N=window.WallarmDS.Skeleton,T=window.WallarmDS.HStack,E=window.WallarmDS.Tooltip,F=window.WallarmDS.TooltipContent,D=window.WallarmDS.TooltipTrigger,K=window.WallarmDS.Chart,$=window.WallarmDS.ChartActions,M=window.WallarmDS.ChartHeader,L=window.WallarmDS.ChartTitle,W=window.WallarmDS.useChartTimeFormatters,O=window.WallarmDS.MetricDelta,I=window.WallarmDS.MetricHeader,G=window.WallarmDS.MetricValue,A=window.WallarmDS.LineChart,j=window.WallarmDS.LineChartBody,P=window.WallarmDS.LineChartEmpty,z=window.WallarmDS.LineChartGrid,q=window.WallarmDS.LineChartHoverPopover,H=window.WallarmDS.LineChartHoverPopoverDot,U=window.WallarmDS.LineChartHoverPopoverRow,V=window.WallarmDS.LineChartHoverPopoverTimestamp,B=window.WallarmDS.LineChartLegend,X=window.WallarmDS.LineChartLegendItem,J=window.WallarmDS.LineChartLine,Z=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:z,LineChartXAxis:Y,LineChartYAxis:Q,LineChartLine:J,LineChartTooltip:Z,LineChartHoverPopover:q,LineChartHoverPopoverTimestamp:V,LineChartHoverPopoverRow:U,LineChartHoverPopoverDot:H,LineChartLegend:B,LineChartLegendItem:X,LineChartZoomBrush:ee,LineChartEmpty:P},parameters:{layout:"padded",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=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(ed),a[0]=o,a[1]=r):r=a[1],a[2]!==r?(n=e(B,{children:r}),a[2]=r,a[3]=n):n=a[3],n},ea=()=>{let r,n,a,i,o,c,s,m,d,u,y,p,_,k,S,b,w,g,x,v,C,R,N,E,F,D,$,O,I,G,P,q,H,U,V,X=(0,l.c)(57),{formatHour:J,formatHourWithTimezone:ee}=W();return X[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(M,{children:e(L,{children:"Top — JSX order"})}),X[0]=r):r=X[0],X[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(B,{children:h.map(eb)}),X[1]=n):n=X[1],X[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(z,{}),X[2]=a):a=X[2],X[3]!==J?(i=e(Y,{tickFormatter:J,minTickGap:32}),X[3]=J,X[4]=i):i=X[4],X[5]===Symbol.for("react.memo_cache_sentinel")?(o=e(Q,{tickFormatter:et}),c=h.map(ew),X[5]=o,X[6]=c):(o=X[5],c=X[6]),X[7]!==ee?(s=e(Z,{xTickFormatter:ee}),X[7]=ee,X[8]=s):s=X[8],X[9]!==i||X[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]})]})]}),X[9]=i,X[10]=s,X[11]=m):m=X[11],X[12]===Symbol.for("react.memo_cache_sentinel")?(d=e(M,{children:e(L,{children:"Bottom — JSX order"})}),X[12]=d):d=X[12],X[13]===Symbol.for("react.memo_cache_sentinel")?(u=e(z,{}),X[13]=u):u=X[13],X[14]!==J?(y=e(Y,{tickFormatter:J,minTickGap:32}),X[14]=J,X[15]=y):y=X[15],X[16]===Symbol.for("react.memo_cache_sentinel")?(p=e(Q,{tickFormatter:et}),_=h.map(eg),X[16]=p,X[17]=_):(p=X[16],_=X[17]),X[18]!==ee?(k=e(Z,{xTickFormatter:ee}),X[18]=ee,X[19]=k):k=X[19],X[20]!==y||X[21]!==k?(S=t(j,{children:[u,y,p,_,k]}),X[20]=y,X[21]=k,X[22]=S):S=X[22],X[23]===Symbol.for("react.memo_cache_sentinel")?(b=e(B,{children:h.map(ex)}),X[23]=b):b=X[23],X[24]!==S?(w=t(K,{children:[d,t(A,{data:f,series:h,xKey:"timestamp",children:[S,b]})]}),X[24]=S,X[25]=w):w=X[25],X[26]===Symbol.for("react.memo_cache_sentinel")?(g=e(M,{children:e(L,{children:"Left — wrapped in HStack"})}),X[26]=g):g=X[26],X[27]===Symbol.for("react.memo_cache_sentinel")?(x=e(B,{orientation:"vertical",children:h.map(ev)}),X[27]=x):x=X[27],X[28]===Symbol.for("react.memo_cache_sentinel")?(v=e(z,{}),X[28]=v):v=X[28],X[29]!==J?(C=e(Y,{tickFormatter:J,minTickGap:32}),X[29]=J,X[30]=C):C=X[30],X[31]===Symbol.for("react.memo_cache_sentinel")?(R=e(Q,{tickFormatter:et}),N=h.map(eC),X[31]=R,X[32]=N):(R=X[31],N=X[32]),X[33]!==ee?(E=e(Z,{xTickFormatter:ee}),X[33]=ee,X[34]=E):E=X[34],X[35]!==C||X[36]!==E?(F=t(K,{children:[g,e(A,{data:f,series:h,xKey:"timestamp",children:t(T,{flexGrow:!0,gap:12,align:"stretch",children:[x,t(j,{children:[v,C,R,N,E]})]})})]}),X[35]=C,X[36]=E,X[37]=F):F=X[37],X[38]===Symbol.for("react.memo_cache_sentinel")?(D=e(M,{children:e(L,{children:"Right — wrapped in HStack"})}),X[38]=D):D=X[38],X[39]===Symbol.for("react.memo_cache_sentinel")?($=e(z,{}),X[39]=$):$=X[39],X[40]!==J?(O=e(Y,{tickFormatter:J,minTickGap:32}),X[40]=J,X[41]=O):O=X[41],X[42]===Symbol.for("react.memo_cache_sentinel")?(I=e(Q,{tickFormatter:et}),G=h.map(eR),X[42]=I,X[43]=G):(I=X[42],G=X[43]),X[44]!==ee?(P=e(Z,{xTickFormatter:ee}),X[44]=ee,X[45]=P):P=X[45],X[46]!==O||X[47]!==P?(q=t(j,{children:[$,O,I,G,P]}),X[46]=O,X[47]=P,X[48]=q):q=X[48],X[49]===Symbol.for("react.memo_cache_sentinel")?(H=e(B,{orientation:"vertical",children:h.map(eN)}),X[49]=H):H=X[49],X[50]!==q?(U=t(K,{children:[D,e(A,{data:f,series:h,xKey:"timestamp",children:t(T,{flexGrow:!0,gap:12,align:"stretch",children:[q,H]})})]}),X[50]=q,X[51]=U):U=X[51],X[52]!==w||X[53]!==F||X[54]!==U||X[55]!==m?(V=t("div",{className:"grid grid-cols-2 gap-16 w-1120",children:[m,w,F,U]}),X[52]=w,X[53]=F,X[54]=U,X[55]=m,X[56]=V):V=X[56],V};ea.parameters={layout:"padded"};let el=()=>{let r,n,a,o,s,m,d,u,y,f,p,_,S,b,w,g,x,v=(0,l.c)(32),{formatDate:N,formatDateWithTimezone:T}=W(),[O,I]=(0,i.useState)(k);v[0]===Symbol.for("react.memo_cache_sentinel")?(r=e=>{e?I(t=>t.slice(e.fromIndex,e.toIndex+1)):I(k)},v[0]=r):r=v[0];let G=r,P=O!==k;v[1]!==N?(n=c(N),v[1]=N,v[2]=n):n=v[2];let q=n,H=(0,i.useRef)(null);return v[3]!==P?(a=()=>{if(!P)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(),G(null))};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},o=[P,G],v[3]=P,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(L,{children:'Drag on the plot, then click "Zoom in" — Esc to cancel'}),v[6]=s):s=v[6],v[7]!==P?(m=P&&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"})]}),v[7]=P,v[8]=m):m=v[8],v[9]!==P||v[10]!==m?(d=t(M,{children:[s,e($,{alwaysVisible:P,children:m})]}),v[9]=P,v[10]=m,v[11]=d):d=v[11],v[12]===Symbol.for("react.memo_cache_sentinel")?(u=e(en,{}),v[12]=u):u=v[12],v[13]===Symbol.for("react.memo_cache_sentinel")?(y=e(z,{}),v[13]=y):y=v[13],v[14]!==N?(f=e(Y,{tickFormatter:N,minTickGap:48}),v[14]=N,v[15]=f):f=v[15],v[16]===Symbol.for("react.memo_cache_sentinel")?(p=e(Q,{tickFormatter:et}),_=h.map(eM),v[16]=p,v[17]=_):(p=v[16],_=v[17]),v[18]!==T?(S=e(Z,{xTickFormatter:T}),v[18]=T,v[19]=S):S=v[19],v[20]!==q?(b=e(ee,{formatRange:q}),v[20]=q,v[21]=b):b=v[21],v[22]!==S||v[23]!==b||v[24]!==f?(w=t(j,{height:220,children:[y,f,p,_,S,b]}),v[22]=S,v[23]=b,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:G,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},ei=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(eL),a[0]=r):r=a[0],a[1]!==i?(n=e(B,{orientation:i,children:r}),a[1]=i,a[2]=n):n=a[2],n},eo=r=>{let n,o,c,s,m,d,u,y,p,_,k,S,b,w,g=(0,l.c)(43),{placement:x,title:C}=r,{formatHour:N,formatHourWithTimezone:O}=W(),[I,G]=(0,i.useState)(!0);g[0]!==I?(n=()=>{if(!I)return;let e=setTimeout(()=>G(!1),2e3);return()=>clearTimeout(e)},o=[I],g[0]=I,g[1]=n,g[2]=o):(n=g[1],o=g[2]),(0,i.useEffect)(n,o);let q="left"===x||"right"===x,H=q?"vertical":"horizontal";g[3]!==I||g[4]!==H?(c=I?e(ei,{orientation:H}):e(B,{orientation:H,children:h.map(eW)}),g[3]=I,g[4]=H,g[5]=c):c=g[5];let U=c;g[6]!==N||g[7]!==O||g[8]!==q||g[9]!==I?(s=I?e(P,{className:q?"flex-1 min-w-0":void 0}):t(j,{children:[e(z,{}),e(Y,{tickFormatter:N,minTickGap:32}),e(Q,{tickFormatter:et}),h.map(eO),e(Z,{xTickFormatter:O})]}),g[6]=N,g[7]=O,g[8]=q,g[9]=I,g[10]=s):s=g[10];let V=s;if("none"===x)m=V;else if("top"===x){let e;g[11]!==V||g[12]!==U?(e=t(a,{children:[U,V]}),g[11]=V,g[12]=U,g[13]=e):e=g[13],m=e}else if("bottom"===x){let e;g[14]!==V||g[15]!==U?(e=t(a,{children:[V,U]}),g[14]=V,g[15]=U,g[16]=e):e=g[16],m=e}else if("left"===x){let e;g[17]!==V||g[18]!==U?(e=t(T,{flexGrow:!0,gap:12,align:"stretch",children:[U,V]}),g[17]=V,g[18]=U,g[19]=e):e=g[19],m=e}else{let e;g[20]!==V||g[21]!==U?(e=t(T,{flexGrow:!0,gap:12,align:"stretch",children:[V,U]}),g[20]=V,g[21]=U,g[22]=e):e=g[22],m=e}return g[23]!==C?(d=e(L,{children:C}),g[23]=C,g[24]=d):d=g[24],g[25]===Symbol.for("react.memo_cache_sentinel")?(u=()=>G(!0),y=e(v,{}),g[25]=u,g[26]=y):(u=g[25],y=g[26]),g[27]!==I?(p=e(D,{asChild:!0,children:e(R,{variant:"ghost",color:"neutral",size:"small","aria-label":"Reload",disabled:I,onClick:u,children:y})}),g[27]=I,g[28]=p):p=g[28],g[29]===Symbol.for("react.memo_cache_sentinel")?(_=e(F,{children:"Reload"}),g[29]=_):_=g[29],g[30]!==I||g[31]!==p?(k=e($,{alwaysVisible:!0,children:t(E,{disabled:I,children:[p,_]})}),g[30]=I,g[31]=p,g[32]=k):k=g[32],g[33]!==k||g[34]!==d?(S=t(M,{children:[d,k]}),g[33]=k,g[34]=d,g[35]=S):S=g[35],g[36]!==m||g[37]!==I?(b=I?m:e(A,{data:f,series:h,xKey:"timestamp",children:m}),g[36]=m,g[37]=I,g[38]=b):b=g[38],g[39]!==I||g[40]!==S||g[41]!==b?(w=t(K,{"aria-busy":I,"aria-live":"polite",children:[S,b]}),g[39]=I,g[40]=S,g[41]=b,g[42]=w):w=g[42],w},ec=()=>{let r,n,a,o,s,m,d,u,y,f,p,_,k,b,w,g=(0,l.c)(31),{formatDate:x,formatDateTime:v,formatDateTimeWithTimezone:N}=W();g[0]!==v?(r=c(v),g[0]=v,g[1]=r):r=g[1];let T=r,[O,I]=(0,i.useState)(null);e:{let e;if(!O){n=S;break e}g[2]!==O.fromIndex||g[3]!==O.toIndex?(e=S.slice(O.fromIndex,O.toIndex+1),g[2]=O.fromIndex,g[3]=O.toIndex,g[4]=e):e=g[4],n=e}let G=n;g[5]===Symbol.for("react.memo_cache_sentinel")?(a=e(L,{children:"1,000 hourly samples — drag to zoom"}),g[5]=a):a=g[5];let P=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:()=>I(null),children:e(C,{})})}),e(F,{children:"Reset time selection"})]}),g[6]=O,g[7]=o):o=g[7],g[8]!==P||g[9]!==o?(s=t(M,{children:[a,e($,{alwaysVisible:P,children:o})]}),g[8]=P,g[9]=o,g[10]=s):s=g[10],g[11]===Symbol.for("react.memo_cache_sentinel")?(m=e(B,{children:h.map(eI)}),g[11]=m):m=g[11],g[12]===Symbol.for("react.memo_cache_sentinel")?(d=e(z,{}),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(eG),g[15]=y,g[16]=f):(y=g[15],f=g[16]),g[17]!==N?(p=e(Z,{xTickFormatter:N}),g[17]=N,g[18]=p):p=g[18],g[19]!==T?(_=e(ee,{formatRange:T}),g[19]=T,g[20]=_):_=g[20],g[21]!==p||g[22]!==_||g[23]!==u?(k=t(j,{height:220,children:[d,u,f,y,p,_]}),g[21]=p,g[22]=_,g[23]=u,g[24]=k):k=g[24],g[25]!==k||g[26]!==G?(b=t(A,{data:G,series:h,xKey:"timestamp",onZoomChange:I,children:[m,k]}),g[25]=k,g[26]=G,g[27]=b):b=g[27],g[28]!==b||g[29]!==s?(w=t(K,{children:[s,b]}),g[28]=b,g[29]=s,g[30]=w):w=g[30],w};function es(r){return t(X,{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 em(t){return e(J,{seriesKey:t.key},t.key)}function ed(r){return t(X,{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 eh(t){return e(J,{seriesKey:t.key},t.key)}function eu(t){return e(J,{seriesKey:t.key,curve:"linear"},t.key)}function ey(t){return e(J,{seriesKey:t.key},t.key)}function ef(t){return e(J,{seriesKey:t.key},t.key)}function ep(t){return e(J,{seriesKey:t.key},t.key)}function e_(r){return t(X,{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 ek(t){return e(J,{seriesKey:t.key},t.key)}function eS(t){let{series:r,value:n}=t,a=g[r.key]??"";return e(U,{series:r,value:"number"==typeof n?n:0,formatValue:e=>`${"number"==typeof e?o.format(e):String(e??"")}${a}`},r.key)}function eb(r){return t(X,{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 ew(t){return e(J,{seriesKey:t.key},t.key)}function eg(t){return e(J,{seriesKey:t.key},t.key)}function ex(r){return t(X,{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 ev(r){return t(X,{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 eC(t){return e(J,{seriesKey:t.key},t.key)}function eR(t){return e(J,{seriesKey:t.key},t.key)}function eN(r){return t(X,{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 eT(e){return e.key}function eE(t){return e(J,{seriesKey:t.key},t.key)}function eF(r){return t(X,{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 eD(t){return e(J,{seriesKey:t.key},t.key)}function eK(r){return t(X,{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(J,{seriesKey:t.key},t.key)}function eM(t){return e(J,{seriesKey:t.key},t.key)}function eL(t){return e(X,{seriesKey:`skeleton-${t}`,children:e(N,{width:"72px",height:"20px",rounded:4})},t)}function eW(r){return t(X,{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 eO(t){return e(J,{seriesKey:t.key},t.key)}function eI(r){return t(X,{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(J,{seriesKey:t.key,disableAnimation:!0},t.key)}let eA=[{name:"Default",story:()=>{let r,n,a,i,o,c,s,m=(0,l.c)(11),{formatHour:h,formatHourWithTimezone:u}=W();return m[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(M,{children:e(L,{children:"Requests per hour"})}),m[0]=r):r=m[0],m[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(z,{}),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(J,{seriesKey:"requests",curve:"linear"}),m[4]=i,m[5]=o):(i=m[4],o=m[5]),m[6]!==u?(c=e(Z,{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},meta:er},{name:"DefaultMulti",story:()=>{let r,n,a,i,o,c,s,m,d=(0,l.c)(12),{formatHour:u,formatHourWithTimezone:y}=W();return d[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(M,{children:e(L,{children:"Traffic, errors, and latency"})}),d[0]=r):r=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(B,{children:h.map(es)}),d[1]=n):n=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(z,{}),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(em),d[5]=o,d[6]=c):(o=d[5],c=d[6]),d[7]!==y?(s=e(Z,{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},meta:er},{name:"WithMetric",story:()=>{let r,n,a,i,o,c,s,m,d=(0,l.c)(12),{formatHour:u,formatHourWithTimezone:y}=W();return d[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(M,{children:e(L,{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(I,{className:"px-16",children:[e(G,{children:2903}),e(O,{value:10,trend:"up",sentiment:"negative"})]}),e(en,{})]}),d[1]=n):n=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(z,{}),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(eh),d[5]=o,d[6]=c):(o=d[5],c=d[6]),d[7]!==y?(s=e(Z,{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},meta:er},{name:"Curves",story:()=>{let r,n,a,i,o,c,s,m,d,u,y,p,_,k,S,b,w,g,x,v=(0,l.c)(29),{formatHour:C,formatHourWithTimezone:R}=W();return v[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(M,{children:e(L,{children:"Linear interpolation"})}),v[0]=r):r=v[0],v[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(en,{}),v[1]=n):n=v[1],v[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(z,{}),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(eu),v[5]=o,v[6]=c):(o=v[5],c=v[6]),v[7]!==R?(s=e(Z,{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(M,{children:e(L,{children:"Mixed curves — monotone vs linear"})}),v[12]=d):d=v[12],v[13]===Symbol.for("react.memo_cache_sentinel")?(u=e(en,{}),v[13]=u):u=v[13],v[14]===Symbol.for("react.memo_cache_sentinel")?(y=e(z,{}),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}),k=e(J,{seriesKey:"requests",curve:"monotone"}),S=e(J,{seriesKey:"errors",curve:"linear"}),b=e(J,{seriesKey:"latency",curve:"linear"}),v[17]=_,v[18]=k,v[19]=S,v[20]=b):(_=v[17],k=v[18],S=v[19],b=v[20]),v[21]!==R?(w=e(Z,{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,_,k,S,b,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,_,k,S,b,w,g,x=(0,l.c)(27),{formatHour:v,formatHourWithTimezone:C}=W();return x[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(M,{children:e(L,{children:"Solid + dashed series"})}),x[0]=r):r=x[0],x[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(en,{series:u}),x[1]=n):n=x[1],x[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(z,{}),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(ey),x[5]=o,x[6]=c):(o=x[5],c=x[6]),x[7]!==C?(s=e(Z,{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(M,{children:e(L,{children:"Custom palette via CSS color string"})}),x[12]=d):d=x[12],x[13]===Symbol.for("react.memo_cache_sentinel")?(h=e(en,{series:y}),x[13]=h):h=x[13],x[14]===Symbol.for("react.memo_cache_sentinel")?(p=e(z,{}),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")?(k=e(Q,{tickFormatter:et}),S=y.map(ef),x[17]=k,x[18]=S):(k=x[17],S=x[18]),x[19]!==C?(b=e(Z,{xTickFormatter:C}),x[19]=C,x[20]=b):b=x[20],x[21]!==_||x[22]!==b?(w=t(K,{children:[d,t(A,{data:f,series:y,xKey:"timestamp",children:[h,t(j,{children:[p,_,k,S,b]})]})]}),x[21]=_,x[22]=b,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,_,k,S,g,x,v,C,R=(0,l.c)(28),{formatHour:N,formatHourWithTimezone:T}=W();return R[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(M,{children:e(L,{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(J,{seriesKey:"requests"})})})]}),R[1]=n):n=R[1],R[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(M,{children:e(L,{children:"Single data point"})}),R[2]=a):a=R[2],R[3]===Symbol.for("react.memo_cache_sentinel")?(i=e(z,{}),R[3]=i):i=R[3],R[4]!==N?(o=e(Y,{tickFormatter:N}),R[4]=N,R[5]=o):o=R[5],R[6]===Symbol.for("react.memo_cache_sentinel")?(c=e(Q,{tickFormatter:et}),s=e(J,{seriesKey:"requests"}),R[6]=c,R[7]=s):(c=R[6],s=R[7]),R[8]!==T?(m=e(Z,{xTickFormatter:T}),R[8]=T,R[9]=m):m=R[9],R[10]!==o||R[11]!==m?(u=t(K,{children:[a,e(A,{data:b,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(M,{children:e(L,{children:"Series with null gaps"})}),R[13]=y):y=R[13],R[14]===Symbol.for("react.memo_cache_sentinel")?(p=e(en,{}),R[14]=p):p=R[14],R[15]===Symbol.for("react.memo_cache_sentinel")?(_=e(z,{}),R[15]=_):_=R[15],R[16]!==N?(k=e(Y,{tickFormatter:N,minTickGap:32}),R[16]=N,R[17]=k):k=R[17],R[18]===Symbol.for("react.memo_cache_sentinel")?(S=e(Q,{tickFormatter:et}),g=h.map(ep),R[18]=S,R[19]=g):(S=R[18],g=R[19]),R[20]!==T?(x=e(Z,{xTickFormatter:T}),R[20]=T,R[21]=x):x=R[21],R[22]!==k||R[23]!==x?(v=t(K,{children:[y,t(A,{data:w,series:h,xKey:"timestamp",children:[p,t(j,{children:[_,k,S,g,x]})]})]}),R[22]=k,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}=W();return d[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(M,{children:e(L,{children:"Custom tooltip with units"})}),d[0]=r):r=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(B,{children:h.map(e_)}),d[1]=n):n=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(z,{}),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(ek),d[5]=o,d[6]=c):(o=d[5],c=d[6]),d[7]!==y?(s=e(Z,{children:r=>{let{rows:n,xValue:a}=r;return t(q,{children:[e(V,{children:y(a)}),n.map(eS)]})}}),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:ea,meta:er},{name:"Filterable",story:()=>{let r,n,a,o,c,s,m,d,u,y,p,_,k,S,b,w=(0,l.c)(29),{formatHour:g,formatHourWithTimezone:v}=W();w[0]===Symbol.for("react.memo_cache_sentinel")?(r=[],w[0]=r):r=w[0];let[C,N]=(0,i.useState)(r);w[1]===Symbol.for("react.memo_cache_sentinel")?(n=e=>{N(t=>0===t.length?h.filter(t=>t.key!==e).map(eT):t.includes(e)?t.filter(t=>t!==e):[...t,e])},w[1]=n):n=w[1];let T=n,O=C.length>0;return w[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(L,{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:()=>N([]),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(M,{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(X,{seriesKey:r.key,onClick:()=>T(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(B,{children:s}),w[10]=s,w[11]=m):m=w[11],w[12]===Symbol.for("react.memo_cache_sentinel")?(d=e(z,{}),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(eE),w[15]=y,w[16]=p):(y=w[15],p=w[16]),w[17]!==v?(_=e(Z,{xTickFormatter:v}),w[17]=v,w[18]=_):_=w[18],w[19]!==_||w[20]!==u?(k=t(j,{children:[d,u,p,y,_]}),w[19]=_,w[20]=u,w[21]=k):k=w[21],w[22]!==C||w[23]!==k||w[24]!==m?(S=t(A,{"data-testid":"line-chart",data:f,series:h,xKey:"timestamp",filteredKeys:C,children:[m,k]}),w[22]=C,w[23]=k,w[24]=m,w[25]=S):S=w[25],w[26]!==S||w[27]!==c?(b=e("div",{className:"w-560",children:t(K,{"data-testid":"chart",children:[c,S]})}),w[26]=S,w[27]=c,w[28]=b):b=w[28],b},meta:er},{name:"CrossChartHoverSync",story:()=>{let r,n,a,o,c,s,m,d,u,y,f,k,S,b,w,g,x,v,C,R=(0,l.c)(33),{formatHour:N,formatHourWithTimezone:T}=W(),[E,F]=(0,i.useState)(null);return R[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(M,{children:e(L,{children:"Region A"})}),R[0]=r):r=R[0],R[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(B,{children:h.map(eF)}),R[1]=n):n=R[1],R[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(z,{}),R[2]=a):a=R[2],R[3]!==N?(o=e(Y,{tickFormatter:N,minTickGap:32}),R[3]=N,R[4]=o):o=R[4],R[5]===Symbol.for("react.memo_cache_sentinel")?(c=e(Q,{tickFormatter:et}),s=h.map(eD),R[5]=c,R[6]=s):(c=R[5],s=R[6]),R[7]!==T?(m=e(Z,{xTickFormatter:T}),R[7]=T,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(M,{children:e(L,{children:"Region B"})}),R[15]=y):y=R[15],R[16]===Symbol.for("react.memo_cache_sentinel")?(f=e(B,{children:h.map(eK)}),R[16]=f):f=R[16],R[17]===Symbol.for("react.memo_cache_sentinel")?(k=e(z,{}),R[17]=k):k=R[17],R[18]!==N?(S=e(Y,{tickFormatter:N,minTickGap:32}),R[18]=N,R[19]=S):S=R[19],R[20]===Symbol.for("react.memo_cache_sentinel")?(b=e(Q,{tickFormatter:et}),w=h.map(e$),R[20]=b,R[21]=w):(b=R[20],w=R[21]),R[22]!==T?(g=e(Z,{xTickFormatter:T}),R[22]=T,R[23]=g):g=R[23],R[24]!==S||R[25]!==g?(x=t(j,{children:[k,S,b,w,g]}),R[24]=S,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(el,{})}),r[0]=t):t=r[0],t},meta:er},{name:"Loading",story:()=>{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(M,{children:e(L,{children:"No legend"})}),e(P,{})]}),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(M,{children:e(L,{children:"Top — JSX order"})}),e(ei,{}),e(P,{})]}),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(M,{children:e(L,{children:"Bottom — JSX order"})}),e(P,{}),e(ei,{})]}),m[2]=a):a=m[2],m[3]===Symbol.for("react.memo_cache_sentinel")?(i=e(M,{children:e(L,{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(T,{flexGrow:!0,gap:12,align:"stretch",children:[e(ei,{orientation:"vertical"}),e(P,{className:"flex-1 min-w-0"})]})]}),m[4]=o):o=m[4],m[5]===Symbol.for("react.memo_cache_sentinel")?(c=e(M,{children:e(L,{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(T,{flexGrow:!0,gap:12,align:"stretch",children:[e(P,{className:"flex-1 min-w-0"}),e(ei,{orientation:"vertical"})]})]})]}),m[6]=s):s=m[6],s},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(eo,{placement:"none",title:"No legend"}),e(eo,{placement:"top",title:"Top — JSX order"}),e(eo,{placement:"bottom",title:"Bottom — JSX order"}),e(eo,{placement:"left",title:"Left — wrapped in HStack"}),e(eo,{placement:"right",title:"Right — wrapped in HStack"})]}),n[0]=r):r=n[0],r},meta:er},{name:"Empty",story:()=>{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(M,{children:e(L,{children:"No data"})}),e(P,{children:"No data"})]})}),n[0]=r):r=n[0],r},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(ec,{})}),r[0]=t):t=r[0],t},meta:er}];function ej({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,eA.map((e,t)=>i.default.createElement(ej,{key:t,entry:e})))),t}}})();

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

@@ -140,7 +140,7 @@ export const WithIcons: StoryFn<typeof meta> = () => (
       Pending review
     </ListItem>
     <ListItem>
-      <ListIcon className='text-text-error'>&#10007;</ListIcon>
+      <ListIcon className='text-text-danger'>&#10007;</ListIcon>
       Failed check
     </ListItem>
   </List>

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

@@ -9,4 +9,4 @@ var e={vD(e,t,r){let n,a;/**
  * @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}}})();
+ */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-danger",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}}})();

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

@@ -76,12 +76,6 @@ import { MetricSparkline, type MetricSparklinePoint } from './MetricSparkline';
 import { MetricTotal } from './MetricTotal';
 import { MetricValue } from './MetricValue';
 
-const figmaUrl =
-  'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=11437-11939';
-
-const sparklineFigmaUrl =
-  'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=12610-10640';
-
 const DESCRIPTION = [
   "The family's compact stat — one number, optionally against a total and a change — for a card with no breakdown to draw; reach for `HorizontalBarStack` once that number splits into named parts.",
   'It is a brick set rather than a set of props: `MetricHeader` holds `MetricValue`, `MetricTotal` and `MetricDelta`, with `MetricCaption` beneath. On the delta, `sentiment` picks the colour and `trend` picks the arrow, on purpose independently — a number going up is not always good news.',
@@ -93,7 +87,6 @@ const meta = {
   component: Metric,
   parameters: {
     layout: 'padded',
-    design: { type: 'figma', url: figmaUrl },
     docs: { description: { component: DESCRIPTION } },
   },
 } satisfies Meta<typeof Metric>;
@@ -250,7 +243,6 @@ export const Sparkline: StoryFn = () => (
     </Chart>
   </div>
 );
-Sparkline.parameters = { design: { type: 'figma', url: sparklineFigmaUrl } };
 
 /**
  * The sparkline's `color` is set per chart, on purpose apart from the delta's `sentiment`:
@@ -320,5 +312,4 @@ export const SparklineColors: StoryFn = () => (
     </div>
   </div>
 );
-SparklineColors.parameters = { design: { type: 'figma', url: sparklineFigmaUrl } };
 ```