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

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

@@ -0,0 +1,224 @@
+The card every chart in the family sits in: the surface, the 32px title bar, and actions that appear on hover — it draws no data itself, so reach for `BarList`, `PieChart`, `LineChart`, `HorizontalBarStack` or `Metric` for the chart inside it. Worth knowing before composing one: `ChartActions` takes no layout space while hidden, so the title has the full header width until you hover.
+
+## Props as canvas attributes
+
+Use kebab-case attribute names. Pass non-string values through renderVals holes, including booleans. The full emitted API is in `components/index.d.ts`.
+
+| Attribute | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `title` | `string \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.ChartActions` — `ChartActionsProps` in the declaration bundle.
+- `WallarmDS.ChartEmpty` — `ChartEmptyProps` in the declaration bundle.
+- `WallarmDS.ChartHeader` — `ChartHeaderProps` in the declaration bundle.
+- `WallarmDS.ChartTitle` — `ChartTitleProps` in the declaration bundle.
+
+## Stories
+
+### Default
+
+The frame with everything it owns — title, hover-revealed actions, and a body slot standing
+in for the chart.
+
+Source: SimpleCharts/Chart/Chart.stories.tsx#Default
+
+### WithAlwaysVisibleActions
+
+`alwaysVisible` pins the actions open, which is what a card does while a filter is applied:
+the control that clears it must not need hovering to be found.
+
+Source: SimpleCharts/Chart/Chart.stories.tsx#WithAlwaysVisibleActions
+
+### CustomSize
+
+The card is a full-width block with a minimum height; give it a width and height directly
+when a dashboard slot demands a particular size.
+
+Source: SimpleCharts/Chart/Chart.stories.tsx#CustomSize
+
+### LongTitle
+
+`ChartTitle` stays on one line and truncates, so the actions keep their place however long
+the title runs.
+
+Source: SimpleCharts/Chart/Chart.stories.tsx#LongTitle
+
+### Empty
+
+`ChartEmpty` centres a default 'No data' in the body — the frame and the title stay, so the
+card does not vanish from the grid when its data does.
+
+Source: SimpleCharts/Chart/Chart.stories.tsx#Empty
+
+### EmptyWithCustomMessage
+
+Pass children to say why it is empty. A card emptied by a filter should say so, since the
+fix is different from having no data at all.
+
+Source: SimpleCharts/Chart/Chart.stories.tsx#EmptyWithCustomMessage
+
+## Story sources
+
+### SimpleCharts/Chart/Chart.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { FilterX, Settings } from '../../../icons';
+import { Button } from '../../Button';
+import { Chart } from './Chart';
+import { ChartActions } from './ChartActions';
+import { ChartEmpty } from './ChartEmpty';
+import { ChartHeader } from './ChartHeader';
+import { ChartTitle } from './ChartTitle';
+
+const DESCRIPTION = [
+  'The card every chart in the family sits in: the surface, the 32px title bar, and actions that appear on hover — it draws no data itself, so reach for `BarList`, `PieChart`, `LineChart`, `HorizontalBarStack` or `Metric` for the chart inside it.',
+  'Worth knowing before composing one: `ChartActions` takes no layout space while hidden, so the title has the full header width until you hover.',
+].join(' ');
+
+const meta = {
+  title: 'Data Display/SimpleCharts/Chart',
+  component: Chart,
+  subcomponents: {
+    ChartHeader,
+    ChartTitle,
+    ChartActions,
+    ChartEmpty,
+  },
+  parameters: {
+    layout: 'padded',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7470-917&m=dev',
+    },
+    docs: { description: { component: DESCRIPTION } },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Chart>;
+
+export default meta;
+
+/**
+ * The frame with everything it owns — title, hover-revealed actions, and a body slot standing
+ * in for the chart.
+ */
+export const Default: StoryFn<typeof meta> = () => (
+  <div className='w-400'>
+    <Chart data-testid='chart'>
+      <ChartHeader>
+        <ChartTitle>Top 5 Endpoints</ChartTitle>
+        <ChartActions>
+          <Button variant='ghost' color='neutral' size='small' aria-label='Clear filter'>
+            <FilterX />
+          </Button>
+          <Button variant='ghost' color='neutral' size='small' aria-label='Settings'>
+            <Settings />
+          </Button>
+        </ChartActions>
+      </ChartHeader>
+      <ChartEmpty>chart content</ChartEmpty>
+    </Chart>
+  </div>
+);
+
+/**
+ * `alwaysVisible` pins the actions open, which is what a card does while a filter is applied:
+ * the control that clears it must not need hovering to be found.
+ */
+export const WithAlwaysVisibleActions: StoryFn<typeof meta> = () => (
+  <div className='w-400'>
+    <Chart data-testid='chart'>
+      <ChartHeader>
+        <ChartTitle>Top 5 Endpoints</ChartTitle>
+        <ChartActions alwaysVisible>
+          <Button variant='ghost' color='neutral' size='small' aria-label='Clear filter'>
+            <FilterX />
+          </Button>
+          <Button variant='ghost' color='neutral' size='small' aria-label='Settings'>
+            <Settings />
+          </Button>
+        </ChartActions>
+      </ChartHeader>
+      <ChartEmpty>filtered chart content</ChartEmpty>
+    </Chart>
+  </div>
+);
+
+/**
+ * The card is a full-width block with a minimum height; give it a width and height directly
+ * when a dashboard slot demands a particular size.
+ */
+export const CustomSize: StoryFn<typeof meta> = () => (
+  <Chart className='w-640 h-320'>
+    <ChartHeader>
+      <ChartTitle>Custom 640 × 320</ChartTitle>
+    </ChartHeader>
+    <ChartEmpty>tall chart content</ChartEmpty>
+  </Chart>
+);
+
+/**
+ * `ChartTitle` stays on one line and truncates, so the actions keep their place however long
+ * the title runs.
+ */
+export const LongTitle: StoryFn<typeof meta> = () => (
+  <div className='w-300'>
+    <Chart>
+      <ChartHeader>
+        <ChartTitle>
+          A very long chart title that needs to be truncated so actions remain visible
+        </ChartTitle>
+        <ChartActions>
+          <Button variant='ghost' color='neutral' size='small' aria-label='Clear filter'>
+            <FilterX />
+          </Button>
+          <Button variant='ghost' color='neutral' size='small' aria-label='Settings'>
+            <Settings />
+          </Button>
+        </ChartActions>
+      </ChartHeader>
+      <ChartEmpty>chart content</ChartEmpty>
+    </Chart>
+  </div>
+);
+
+/**
+ * `ChartEmpty` centres a default 'No data' in the body — the frame and the title stay, so the
+ * card does not vanish from the grid when its data does.
+ */
+export const Empty: StoryFn<typeof meta> = () => (
+  <div className='w-400'>
+    <Chart>
+      <ChartHeader>
+        <ChartTitle>Top 5 Endpoints</ChartTitle>
+      </ChartHeader>
+      <ChartEmpty />
+    </Chart>
+  </div>
+);
+
+/**
+ * Pass children to say why it is empty. A card emptied by a filter should say so, since the
+ * fix is different from having no data at all.
+ */
+export const EmptyWithCustomMessage: StoryFn<typeof meta> = () => (
+  <div className='w-400'>
+    <Chart>
+      <ChartHeader>
+        <ChartTitle>Top 5 Endpoints</ChartTitle>
+      </ChartHeader>
+      <ChartEmpty>No endpoints match the current filter</ChartEmpty>
+    </Chart>
+  </div>
+);
+```

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

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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,a;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var l,o,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,f=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty,m=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of u(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:()=>M,$makeReadOnly:()=>k,$reset:()=>O,$structuralCheck:()=>x,c:()=>E,clearRenderCounterRegistry:()=>T,renderCounterRegistry:()=>D,useRenderCounter:()=>j};for(var y in h)c(p,y,{get:h[y],enumerable:!0});e.exports=m(c({},"__esModule",{value:!0}),p);var w=(a=null!=(n=r("C"))?i(f(n)):{},m(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:g,useEffect:_,isValidElement:b}=w,S=null!=(l=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:w.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),E="function"==typeof(null==(o=w.__COMPILER_RUNTIME)?void 0:o.c)?w.__COMPILER_RUNTIME.c:function(e){return w.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=v;return t[v]=!0,t},[])},R={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{R[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var C=null;function $(e){return S.ReactCurrentDispatcher.current=e,S.ReactCurrentDispatcher.current}R.useMemoCache=e=>{if(null!=C)return C.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var N=[];function M(e){let t=S.ReactCurrentDispatcher.current;if(0===e){if(N.push(t),1===N.length&&(C=t),t===R)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");$(R)}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),$(e)}else if(2===e)N.push(t),$(C);else if(3===e){let e=N.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");$(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 k(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var D=new Map;function T(){for(let e of D.values())e.forEach(e=>{e.count=0})}function j(e){let t=g(null);null!=t.current&&(t.current.count+=1),_(()=>{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 A=new Set;function x(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}`;A.has(c)||(A.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(b(t)||b(r))b(t)!==b(r)?o(`type ${b(t)?"React element":"object"}`,`type ${b(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:d,cloneElement:m,createContext:p,createElement:h,createFactory:y,createRef:w,forwardRef:g,isValidElement:_,lazy:b,memo:S,startTransition:v,unstable_act:E,useCallback:R,useContext:C,useDebugValue:$,useDeferredValue:N,useEffect:M,useId:O,useImperativeHandle:k,useInsertionEffect:D,useLayoutEffect:T,useMemo:j,useReducer:A,useRef:x,useState:z,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:f,act:d,cloneElement:m,createContext:p,createElement:h,createFactory:y,createRef:w,default:n,forwardRef:g,isValidElement:_,lazy:b,memo:S,startTransition:v,unstable_act:E,use:L,useCallback:R,useContext:C,useDebugValue:$,useDeferredValue:N,useEffect:M,useId:O,useImperativeHandle:k,useInsertionEffect:D,useLayoutEffect:T,useMemo:j,useReducer:A,useRef:x,useState:z,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");let o=window.WallarmDS.Icons.FilterX,i=window.WallarmDS.Icons.Settings,c=window.WallarmDS.Button,s=window.WallarmDS.Chart,u=window.WallarmDS.ChartActions,f=window.WallarmDS.ChartEmpty,d=window.WallarmDS.ChartHeader,m=window.WallarmDS.ChartTitle,p={title:"Data Display/SimpleCharts/Chart",component:s,subcomponents:{ChartHeader:d,ChartTitle:m,ChartActions:u,ChartEmpty:f},parameters:{layout:"padded",design:{type:"figma",url:"https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7470-917&m=dev"},docs:{description:{component:"The card every chart in the family sits in: the surface, the 32px title bar, and actions that appear on hover — it draws no data itself, so reach for `BarList`, `PieChart`, `LineChart`, `HorizontalBarStack` or `Metric` for the chart inside it. Worth knowing before composing one: `ChartActions` takes no layout space while hidden, so the title has the full header width until you hover."}}},tags:["autodocs"]};var h=r("C");let y=[{name:"Default",story:()=>{let r,n,a,p=(0,l.c)(3);return p[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(m,{children:"Top 5 Endpoints"}),p[0]=r):r=p[0],p[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(c,{variant:"ghost",color:"neutral",size:"small","aria-label":"Clear filter",children:e(o,{})}),p[1]=n):n=p[1],p[2]===Symbol.for("react.memo_cache_sentinel")?(a=e("div",{className:"w-400",children:t(s,{"data-testid":"chart",children:[t(d,{children:[r,t(u,{children:[n,e(c,{variant:"ghost",color:"neutral",size:"small","aria-label":"Settings",children:e(i,{})})]})]}),e(f,{children:"chart content"})]})}),p[2]=a):a=p[2],a},meta:p},{name:"WithAlwaysVisibleActions",story:()=>{let r,n,a,p=(0,l.c)(3);return p[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(m,{children:"Top 5 Endpoints"}),p[0]=r):r=p[0],p[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(c,{variant:"ghost",color:"neutral",size:"small","aria-label":"Clear filter",children:e(o,{})}),p[1]=n):n=p[1],p[2]===Symbol.for("react.memo_cache_sentinel")?(a=e("div",{className:"w-400",children:t(s,{"data-testid":"chart",children:[t(d,{children:[r,t(u,{alwaysVisible:!0,children:[n,e(c,{variant:"ghost",color:"neutral",size:"small","aria-label":"Settings",children:e(i,{})})]})]}),e(f,{children:"filtered chart content"})]})}),p[2]=a):a=p[2],a},meta:p},{name:"CustomSize",story:()=>{let r,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(s,{className:"w-640 h-320",children:[e(d,{children:e(m,{children:"Custom 640 × 320"})}),e(f,{children:"tall chart content"})]}),n[0]=r):r=n[0],r},meta:p},{name:"LongTitle",story:()=>{let r,n,a,p=(0,l.c)(3);return p[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(m,{children:"A very long chart title that needs to be truncated so actions remain visible"}),p[0]=r):r=p[0],p[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(c,{variant:"ghost",color:"neutral",size:"small","aria-label":"Clear filter",children:e(o,{})}),p[1]=n):n=p[1],p[2]===Symbol.for("react.memo_cache_sentinel")?(a=e("div",{className:"w-300",children:t(s,{children:[t(d,{children:[r,t(u,{children:[n,e(c,{variant:"ghost",color:"neutral",size:"small","aria-label":"Settings",children:e(i,{})})]})]}),e(f,{children:"chart content"})]})}),p[2]=a):a=p[2],a},meta:p},{name:"Empty",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(s,{children:[e(d,{children:e(m,{children:"Top 5 Endpoints"})}),e(f,{})]})}),n[0]=r):r=n[0],r},meta:p},{name:"EmptyWithCustomMessage",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(s,{children:[e(d,{children:e(m,{children:"Top 5 Endpoints"})}),e(f,{children:"No endpoints match the current filter"})]})}),n[0]=r):r=n[0],r},meta:p}];function w({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=()=>h.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 h.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},h.default.createElement("h2",{className:"text-sm mb-12"},e.name),h.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(h.default.createElement(window.WallarmDS.Root,null,y.map((e,t)=>h.default.createElement(w,{key:t,entry:e})))),t}}})();