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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,n){let r,l;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var a,o,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,f=(e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let l of d(t))m.call(e,l)||l===n||c(e,l,{get:()=>t[l],enumerable:!(r=s(t,l))||r.enumerable});return e},h={},p={$dispatcherGuard:()=>I,$makeReadOnly:()=>$,$reset:()=>N,$structuralCheck:()=>x,c:()=>C,clearRenderCounterRegistry:()=>M,renderCounterRegistry:()=>W,useRenderCounter:()=>O};for(var y in p)c(h,y,{get:p[y],enumerable:!0});e.exports=f(c({},"__esModule",{value:!0}),h);var S=(l=null!=(r=n("C"))?i(u(r)):{},f(r&&r.__esModule?l:c(l,"default",{value:r,enumerable:!0}),r)),{useRef:_,useEffect:g,isValidElement:w}=S,b=null!=(a=S.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?a:S.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,k=Symbol.for("react.memo_cache_sentinel"),C="function"==typeof(null==(o=S.__COMPILER_RUNTIME)?void 0:o.c)?S.__COMPILER_RUNTIME.c:function(e){return S.useMemo(()=>{let t=Array(e);for(let n=0;n<e;n++)t[n]=k;return t[k]=!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 D=null;function R(e){return b.ReactCurrentDispatcher.current=e,b.ReactCurrentDispatcher.current}v.useMemoCache=e=>{if(null!=D)return D.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var E=[];function I(e){let t=b.ReactCurrentDispatcher.current;if(0===e){if(E.push(t),1===E.length&&(D=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=E.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===E.length&&(D=null),R(e)}else if(2===e)E.push(t),R(D);else if(3===e){let e=E.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 N(e){for(let t=0;t<e.length;t++)e[t]=k}function $(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var W=new Map;function M(){for(let e of W.values())e.forEach(e=>{e.count=0})}function O(e){let t=_(null);null!=t.current&&(t.current.count+=1),g(()=>{if(null==t.current){let n,r={count:0};null==(n=W.get(e))&&(n=new Set,W.set(e,n)),n.add(r),t.current=r}return()=>{var n;let r;null!==t.current&&(n=t.current,null!=(r=W.get(e))&&r.delete(n))}})}var T=new Set;function x(e,t,n,r,l,a){function o(e,t,o,i){let c=`${r}:${a} [${l}] ${n}${o} changed from ${e} to ${t} at depth ${i}`;T.has(c)||(T.add(c),console.error(c))}!function e(t,n,r,l){if(!(l>2)){if(t!==n)if(typeof t!=typeof n)o(`type ${typeof t}`,`type ${typeof n}`,r,l);else if("object"==typeof t){let a=Array.isArray(t),i=Array.isArray(n);if(null===t&&null!==n)o("null",`type ${typeof n}`,r,l);else if(null===n)o(`type ${typeof t}`,"null",r,l);else if(t instanceof Map)if(n instanceof Map)if(t.size!==n.size)o(`Map instance with size ${t.size}`,`Map instance with size ${n.size}`,r,l);else for(let[a,i]of t)n.has(a)?e(i,n.get(a),`${r}.get(${a})`,l+1):o(`Map instance with key ${a}`,`Map instance without key ${a}`,r,l);else o("Map instance","other value",r,l);else if(n instanceof Map)o("other value","Map instance",r,l);else if(t instanceof Set)if(n instanceof Set)if(t.size!==n.size)o(`Set instance with size ${t.size}`,`Set instance with size ${n.size}`,r,l);else for(let e of n)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,r,l);else o("Set instance","other value",r,l);else if(n instanceof Set)o("other value","Set instance",r,l);else if(a||i)if(a!==i)o(`type ${a?"array":"object"}`,`type ${i?"array":"object"}`,r,l);else if(t.length!==n.length)o(`array with length ${t.length}`,`array with length ${n.length}`,r,l);else for(let a=0;a<t.length;a++)e(t[a],n[a],`${r}[${a}]`,l+1);else if(w(t)||w(n))w(t)!==w(n)?o(`type ${w(t)?"React element":"object"}`,`type ${w(n)?"React element":"object"}`,r,l):t.type!==n.type?o(`React element of type ${t.type}`,`React element of type ${n.type}`,r,l):e(t.props,n.props,`[props of ${r}]`,l+1);else{for(let e in n)e in t||o(`object without key ${e}`,`object with key ${e}`,r,l);for(let a in t)a in n?e(t[a],n[a],`${r}.${a}`,l+1):o(`object with key ${a}`,`object without key ${a}`,r,l)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(n)?isNaN(t)!==isNaN(n)&&o(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(n)?"NaN":"non-NaN value"}`,r,l):t!==n&&o(t,n,r,l)}}}(e,t,"",0)}},p(e,t,n){let r=new WeakMap,l=new WeakMap;function a(e,t,n){let a=t,o=n;if("object"==typeof a&&null!==a&&"$$typeof"in a&&a.$$typeof===Symbol.for("react.context")&&"Provider"in a&&(a=a.Provider),"function"==typeof a&&null!=o.ref&&!a.prototype?.isReactComponent){let t=a,n=r.get(e);n||(n=new WeakMap,r.set(e,n));let l=n.get(t);l||((l=e.forwardRef((e,n)=>t({...e,ref:n}))).displayName=t.displayName??t.name,n.set(t,l)),a=l}if("string"==typeof a&&"boolean"==typeof o.inert&&((o={...o}).inert?o.inert="":delete o.inert),"string"==typeof a)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 a&&null!=o.ref&&(a=function(e,t){let n=l.get(e);n||(n=new Map,l.set(e,n));let r=n.get(t);if(r)return r;let a=e.forwardRef((n,r)=>{let l=e.useRef(null);if(!l.current||l.current.original!==r){let e;l.current={original:r,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof r){let n=r(t);e="function"==typeof n?n:void 0}else r&&(r.current=t)}}}return e.createElement(t,{...n,ref:l.current.callback})});return a.displayName=`CanvasHost(${t})`,n.set(t,a),a}(e,a)),{type:a,props:o}}function o(e){let t=(t,n,r)=>{let l=a(e,t,n??{});return e.createElement(l.type,void 0===r?l.props:{...l.props,key:r})};return{jsx:t,jsxs:(t,n,r)=>{let l=a(e,t,n??{}),{children:o,...i}=l.props;return e.createElement(l.type,void 0===r?i:{...i,key:r},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,n,...r)=>{let l=a(e,t,n??{});return e.createElement(l.type,l.props,...r)},cloneElement:(t,n,...r)=>{let l=e.cloneElement(t,n??void 0,...r),o=l.ref,i=a(e,l.type,{...l.props,ref:o});return i.type===l.type&&"string"!=typeof l.type?l:e.createElement(i.type,{...i.props,key:l.key})}}}n.d(t,{MA:()=>o,YJ:()=>i})},C(e,t,n){n.r(t);let r=(0,n("p").YJ)(window.React),{Children:l,Component:a,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:m,cloneElement:f,createContext:h,createElement:p,createFactory:y,createRef:S,forwardRef:_,isValidElement:g,lazy:w,memo:b,startTransition:k,unstable_act:C,useCallback:v,useContext:D,useDebugValue:R,useDeferredValue:E,useEffect:I,useId:N,useImperativeHandle:$,useInsertionEffect:W,useLayoutEffect:M,useMemo:O,useReducer:T,useRef:x,useState:A,useSyncExternalStore:z,useTransition:B,version:j,use:L}=r;n.d(t,{},{Children:l,Component:a,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:m,cloneElement:f,createContext:h,createElement:p,createFactory:y,createRef:S,default:r,forwardRef:_,isValidElement:g,lazy:w,memo:b,startTransition:k,unstable_act:C,use:L,useCallback:v,useContext:D,useDebugValue:R,useDeferredValue:E,useEffect:I,useId:N,useImperativeHandle:$,useInsertionEffect:W,useLayoutEffect:M,useMemo:O,useReducer:T,useRef:x,useState:A,useSyncExternalStore:z,useTransition:B,version:j})}},t={};function n(r){var l=t[r];if(void 0!==l)return l.exports;var a=t[r]={exports:{}};return e[r](a,a.exports,n),a.exports}n.d=(e,t,r)=>{var l=(t,r)=>{for(var l in t)n.o(t,l)&&!n.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,[r]:t[l]})};l(t,"get"),l(r,"value")},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:r,Fragment:l}=(0,n("p").MA)(window.React);var a=n("vD"),o=n("C");function i(e=()=>{}){let t=(...t)=>e(...t);for(let n of["mockName","mockReturnValue","mockResolvedValue","mockImplementation"])t[n]=r=>("mockImplementation"===n?e=r:"mockReturnValue"===n?e=()=>r:"mockResolvedValue"===n&&(e=()=>Promise.resolve(r)),t);return t}let c=window.WallarmDS.Icons.Copy,s=window.WallarmDS.Icons.Folder,d=window.WallarmDS.Icons.Trash2,u=window.WallarmDS.Badge,m=window.WallarmDS.BulkBarSummary,f=window.WallarmDS.BulkBarSummaryClear,h=window.WallarmDS.BulkBarSummaryCount,p=window.WallarmDS.BulkBarSummarySelectAll,y=window.WallarmDS.BulkBarSummarySeparator,S=window.WallarmDS.Button,_=window.WallarmDS.Card,g=window.WallarmDS.CardContent,w=window.WallarmDS.CardFooter,b=window.WallarmDS.CardHeader,k=window.WallarmDS.CardTitle,C=window.WallarmDS.Drawer,v=window.WallarmDS.DrawerBody,D=window.WallarmDS.DrawerContent,R=window.WallarmDS.DrawerHeader,E=window.WallarmDS.DrawerResizeHandle,I=window.WallarmDS.DrawerTitle,N=window.WallarmDS.DrawerTrigger,$=window.WallarmDS.HStack,W=window.WallarmDS.VStack,M=window.WallarmDS.Text,O=window.WallarmDS.Selection,T=window.WallarmDS.SelectionAll,x=window.WallarmDS.SelectionBulkBar,A=window.WallarmDS.SelectionItem,z=window.WallarmDS.useSelectionContext,B=[{id:"1",title:"Production cluster",region:"us-east-1",status:"Active"},{id:"2",title:"Staging cluster",region:"eu-west-1",status:"Active"},{id:"3",title:"Dev cluster",region:"us-west-2",status:"Idle"},{id:"4",title:"Legacy cluster",region:"ap-south-1",status:"Error"},{id:"5",title:"Read replica",region:"us-east-1",status:"Active",locked:!0}],j=i().mockName("onDuplicate"),L=i().mockName("onDelete"),P=i().mockName("onMove"),U=i().mockName("onInspect"),V=i().mockName("onConfirm"),F={title:"Data Display/Selection",component:O,subcomponents:{SelectionItem:A,SelectionAll:T,SelectionBulkBar:x},parameters:{layout:"padded",docs:{description:{component:"Turns a set of anything — cards, rows, list items — into a selectable collection: a checkbox on each one, shift-click for a range, and a bulk-action bar that arrives once something is ticked. The selection is controlled and ordered by `items`, so what comes back follows the list rather than the order of clicks, and ids no longer present in `items` are kept rather than dropped — a selection can outlive a page change, and clearing it is the caller's decision. Not for Table rows — a `Table` has its own checkbox column: pass `rowSelection` + `onRowSelectionChange` and put bulk actions in `TableActionBar`."}}}},H=n=>{let r,l,o,i,c=(0,a.c)(10),{cluster:s}=n;return c[0]!==s.title?(r=e(b,{children:e(k,{children:s.title})}),c[0]=s.title,c[1]=r):r=c[1],c[2]!==s.region?(l=e(g,{children:e(M,{size:"sm",color:"secondary",children:s.region})}),c[2]=s.region,c[3]=l):l=c[3],c[4]!==s.status?(o=e(w,{children:e(u,{children:s.status})}),c[4]=s.status,c[5]=o):o=c[5],c[6]!==r||c[7]!==l||c[8]!==o?(i=t(_,{className:"flex-1",children:[r,l,o]}),c[6]=r,c[7]=l,c[8]=o,c[9]=i):i=c[9],i},Y=n=>{let r,l,o,i,c,s,u,_,g,w,b=(0,a.c)(23),{onDeleteSelected:k}=n,{selectedIds:C,isAllSelected:v,selectAll:D,clear:R}=z();return b[0]!==C.size?(r=e(h,{count:C.size,"data-testid":"bulk-count"}),b[0]=C.size,b[1]=r):r=b[1],b[2]!==v||b[3]!==D?(l=e(p,{"data-testid":"bulk-select-all","data-analytics-id":"BULK_SELECT_ALL",onClick:D,disabled:v}),b[2]=v,b[3]=D,b[4]=l):l=b[4],b[5]===Symbol.for("react.memo_cache_sentinel")?(o=e(y,{}),b[5]=o):o=b[5],b[6]!==R?(i=e(f,{"data-testid":"bulk-clear","data-analytics-id":"BULK_CLEAR",onClick:R}),b[6]=R,b[7]=i):i=b[7],b[8]!==l||b[9]!==i?(c=t($,{gap:6,children:[l,o,i]}),b[8]=l,b[9]=i,b[10]=c):c=b[10],b[11]!==r||b[12]!==c?(s=t(m,{"data-testid":"bulk-summary",children:[r,c]}),b[11]=r,b[12]=c,b[13]=s):s=b[13],b[14]!==k||b[15]!==C?(u=()=>{let e=[...C];L(e),k(e)},b[14]=k,b[15]=C,b[16]=u):u=b[16],b[17]===Symbol.for("react.memo_cache_sentinel")?(_=e(d,{}),b[17]=_):_=b[17],b[18]!==u?(g=t(S,{"data-testid":"bulk-delete","data-analytics-id":"BULK_DELETE",color:"brand",onClick:u,children:[_," Delete"]}),b[18]=u,b[19]=g):g=b[19],b[20]!==s||b[21]!==g?(w=t(x,{placement:"absolute","data-testid":"selection-bulk-bar",children:[s,g]}),b[20]=s,b[21]=g,b[22]=w):w=b[22],w};function G(e){return e.id}function J(t){return e(A,{itemId:t.id,children:e(H,{cluster:t})},t.id)}function K(e){return e.id}function Z(t){return e(A,{itemId:t.id,children:e(H,{cluster:t})},t.id)}function X(e){return e.id}function q(t){return e(A,{itemId:t.id,children:e(H,{cluster:t})},t.id)}function Q(e){return e.id}function ee(t){return e(A,{itemId:t.id,disabled:t.locked,children:e(H,{cluster:t})},t.id)}function et(e){return e.id}function en(t){return e(A,{itemId:t.id,children:e(H,{cluster:t})},t.id)}function er(e){return e.id}function el(t){return e(A,{itemId:t.id,children:e(H,{cluster:t})},t.id)}function ea(e){return e.id}function eo(t){return e(A,{itemId:t.id,children:e(H,{cluster:t})},t.id)}function ei(e){return e.id}function ec(t){return e(A,{itemId:t.id,children:e(H,{cluster:t})},t.id)}function es(e){return e.id}function ed(t){return e(A,{itemId:t.id,children:e(H,{cluster:t})},t.id)}function eu(e){return e.id}function em(t){return e(A,{itemId:t.id,children:e(H,{cluster:t})},t.id)}let ef=[{name:"Default",story:()=>{let n,r,l,i,s,u,m,f,h,p,y=(0,a.c)(18);y[0]===Symbol.for("react.memo_cache_sentinel")?(n=[],y[0]=n):n=y[0];let[_,g]=(0,o.useState)(n);return y[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{gap:12,children:B.map(J)}),y[1]=r):r=y[1],y[2]!==_?(l=()=>j(_),y[2]=_,y[3]=l):l=y[3],y[4]===Symbol.for("react.memo_cache_sentinel")?(i=e(c,{}),y[4]=i):i=y[4],y[5]!==l?(s=t(S,{variant:"ghost",color:"neutral-alt",onClick:l,children:[i," Duplicate"]}),y[5]=l,y[6]=s):s=y[6],y[7]!==_?(u=()=>L(_),y[7]=_,y[8]=u):u=y[8],y[9]===Symbol.for("react.memo_cache_sentinel")?(m=e(d,{}),y[9]=m):m=y[9],y[10]!==u?(f=t(S,{color:"brand",onClick:u,children:[m," Delete"]}),y[10]=u,y[11]=f):f=y[11],y[12]!==s||y[13]!==f?(h=t(x,{children:[s,f]}),y[12]=s,y[13]=f,y[14]=h):h=y[14],y[15]!==_||y[16]!==h?(p=t(O,{"data-testid":"selection",items:B,getItemId:G,value:_,onChange:g,children:[r,h]}),y[15]=_,y[16]=h,y[17]=p):p=y[17],p},meta:F},{name:"WithSelectAll",story:()=>{let n,r,l,i,c,s,u,m=(0,a.c)(11);m[0]===Symbol.for("react.memo_cache_sentinel")?(n=[],m[0]=n):n=m[0];let[f,h]=(0,o.useState)(n);return m[1]===Symbol.for("react.memo_cache_sentinel")?(r=t($,{gap:8,align:"center",children:[e(T,{}),e(M,{size:"sm",color:"secondary",children:"Select all"})]}),m[1]=r):r=m[1],m[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(W,{gap:16,children:[r,e(W,{gap:12,children:B.map(Z)})]}),m[2]=l):l=m[2],m[3]!==f?(i=()=>L(f),m[3]=f,m[4]=i):i=m[4],m[5]===Symbol.for("react.memo_cache_sentinel")?(c=e(d,{}),m[5]=c):c=m[5],m[6]!==i?(s=e(x,{children:t(S,{color:"brand",onClick:i,children:[c," Delete"]})}),m[6]=i,m[7]=s):s=m[7],m[8]!==f||m[9]!==s?(u=t(O,{"data-testid":"selection",items:B,getItemId:K,value:f,onChange:h,children:[l,s]}),m[8]=f,m[9]=s,m[10]=u):u=m[10],u},meta:F},{name:"Grid",story:()=>{let n,r,l,i,c=(0,a.c)(7);c[0]===Symbol.for("react.memo_cache_sentinel")?(n=[],c[0]=n):n=c[0];let[s,d]=(0,o.useState)(n);return c[1]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"grid grid-cols-3 gap-12",children:B.map(q)}),c[1]=r):r=c[1],c[2]!==s?(l=e(x,{children:e(S,{onClick:()=>U(s),children:"Inspect"})}),c[2]=s,c[3]=l):l=c[3],c[4]!==s||c[5]!==l?(i=t(O,{"data-testid":"selection",items:B,getItemId:X,value:s,onChange:d,children:[r,l]}),c[4]=s,c[5]=l,c[6]=i):i=c[6],i},meta:F},{name:"WithDisabled",story:()=>{let n,r,l,i,c,s,u,m=(0,a.c)(11);m[0]===Symbol.for("react.memo_cache_sentinel")?(n=[],m[0]=n):n=m[0];let[f,h]=(0,o.useState)(n);return m[1]===Symbol.for("react.memo_cache_sentinel")?(r=t($,{gap:8,align:"center",children:[e(T,{}),e(M,{size:"sm",color:"secondary",children:"Select all (locked items skipped)"})]}),m[1]=r):r=m[1],m[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(W,{gap:8,children:[r,e(W,{gap:12,children:B.map(ee)})]}),m[2]=l):l=m[2],m[3]!==f?(i=()=>L(f),m[3]=f,m[4]=i):i=m[4],m[5]===Symbol.for("react.memo_cache_sentinel")?(c=e(d,{}),m[5]=c):c=m[5],m[6]!==i?(s=e(x,{children:t(S,{color:"brand",onClick:i,children:[c," Delete"]})}),m[6]=i,m[7]=s):s=m[7],m[8]!==f||m[9]!==s?(u=t(O,{"data-testid":"selection",items:B,getItemId:Q,value:f,onChange:h,children:[l,s]}),m[8]=f,m[9]=s,m[10]=u):u=m[10],u},meta:F},{name:"RangeSelection",story:()=>{let n,r,l,i,c=(0,a.c)(7);c[0]===Symbol.for("react.memo_cache_sentinel")?(n=[],c[0]=n):n=c[0];let[s,d]=(0,o.useState)(n);return c[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(W,{gap:12,children:[e("span",{className:"sb-annotation",children:"hold shift and click another checkbox"}),B.map(en)]}),c[1]=r):r=c[1],c[2]!==s?(l=e(x,{children:e(S,{color:"brand",onClick:()=>V(s),children:"Confirm"})}),c[2]=s,c[3]=l):l=c[3],c[4]!==s||c[5]!==l?(i=t(O,{"data-testid":"selection",items:B,getItemId:et,value:s,onChange:d,children:[r,l]}),c[4]=s,c[5]=l,c[6]=i):i=c[6],i},meta:F},{name:"BulkActions",story:()=>{let n,r,l,i,u,m,f,h,p,y,_,g,w,b=(0,a.c)(24);b[0]===Symbol.for("react.memo_cache_sentinel")?(n=[],b[0]=n):n=b[0];let[k,C]=(0,o.useState)(n);return b[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{gap:12,children:B.map(el)}),b[1]=r):r=b[1],b[2]!==k?(l=()=>P(k),b[2]=k,b[3]=l):l=b[3],b[4]===Symbol.for("react.memo_cache_sentinel")?(i=e(s,{}),b[4]=i):i=b[4],b[5]!==l?(u=t(S,{variant:"ghost",color:"neutral-alt",onClick:l,children:[i," Move"]}),b[5]=l,b[6]=u):u=b[6],b[7]!==k?(m=()=>j(k),b[7]=k,b[8]=m):m=b[8],b[9]===Symbol.for("react.memo_cache_sentinel")?(f=e(c,{}),b[9]=f):f=b[9],b[10]!==m?(h=t(S,{variant:"ghost",color:"neutral-alt",onClick:m,children:[f," Duplicate"]}),b[10]=m,b[11]=h):h=b[11],b[12]!==k?(p=()=>L(k),b[12]=k,b[13]=p):p=b[13],b[14]===Symbol.for("react.memo_cache_sentinel")?(y=e(d,{}),b[14]=y):y=b[14],b[15]!==p?(_=t(S,{color:"brand",onClick:p,children:[y," Delete"]}),b[15]=p,b[16]=_):_=b[16],b[17]!==_||b[18]!==u||b[19]!==h?(g=t(x,{children:[u,h,_]}),b[17]=_,b[18]=u,b[19]=h,b[20]=g):g=b[20],b[21]!==k||b[22]!==g?(w=t(O,{"data-testid":"selection",items:B,getItemId:er,value:k,onChange:C,children:[r,g]}),b[21]=k,b[22]=g,b[23]=w):w=b[23],w},meta:F},{name:"EmptyAndPartial",story:()=>{let n,r,l,i,c,s,u,m,f,h,p,y=(0,a.c)(20),[_,g]=(0,o.useState)(B);y[0]===Symbol.for("react.memo_cache_sentinel")?(n=["1","ghost"],y[0]=n):n=y[0];let[w,b]=(0,o.useState)(n);return y[1]!==_?(r=()=>{b(e=>e.filter(e=>_.some(t=>t.id===e)))},l=[_],y[1]=_,y[2]=r,y[3]=l):(r=y[2],l=y[3]),(0,o.useEffect)(r,l),y[4]===Symbol.for("react.memo_cache_sentinel")?(i=e(S,{onClick:()=>g([]),variant:"outline",children:"Clear items"}),y[4]=i):i=y[4],y[5]===Symbol.for("react.memo_cache_sentinel")?(c=t($,{gap:8,children:[i,e(S,{onClick:()=>g(B),variant:"outline",children:"Restore items"})]}),y[5]=c):c=y[5],y[6]!==_?(s=0===_.length?e(M,{size:"sm",color:"secondary",children:"No items."}):_.map(eo),y[6]=_,y[7]=s):s=y[7],y[8]!==s?(u=e(W,{gap:12,children:s}),y[8]=s,y[9]=u):u=y[9],y[10]!==w?(m=()=>L(w),y[10]=w,y[11]=m):m=y[11],y[12]===Symbol.for("react.memo_cache_sentinel")?(f=e(d,{}),y[12]=f):f=y[12],y[13]!==m?(h=e(x,{children:t(S,{color:"brand",onClick:m,children:[f," Delete"]})}),y[13]=m,y[14]=h):h=y[14],y[15]!==_||y[16]!==w||y[17]!==u||y[18]!==h?(p=t(W,{gap:16,children:[c,t(O,{"data-testid":"selection",items:_,getItemId:ea,value:w,onChange:b,children:[u,h]})]}),y[15]=_,y[16]=w,y[17]=u,y[18]=h,y[19]=p):p=y[19],p},meta:F},{name:"WithoutBulkBar",story:()=>{let n,r,l,i,c,s=(0,a.c)(9);s[0]===Symbol.for("react.memo_cache_sentinel")?(n=[],s[0]=n):n=s[0];let[d,u]=(0,o.useState)(n);return s[1]!==d.length?(r=t(M,{size:"sm",color:"secondary",children:["Selected: ",d.length]}),s[1]=d.length,s[2]=r):r=s[2],s[3]===Symbol.for("react.memo_cache_sentinel")?(l=e(W,{gap:12,children:B.map(ec)}),s[3]=l):l=s[3],s[4]!==r?(i=t(W,{gap:16,children:[r,l]}),s[4]=r,s[5]=i):i=s[5],s[6]!==d||s[7]!==i?(c=e(O,{"data-testid":"selection",items:B,getItemId:ei,value:d,onChange:u,children:i}),s[6]=d,s[7]=i,s[8]=c):c=s[8],c},meta:F},{name:"CompoundBulkBar",story:()=>{let n,r,l,i,c,s,d=(0,a.c)(11),[u,m]=(0,o.useState)(B);d[0]===Symbol.for("react.memo_cache_sentinel")?(n=[],d[0]=n):n=d[0];let[f,h]=(0,o.useState)(n);d[1]===Symbol.for("react.memo_cache_sentinel")?(r=e=>{m(t=>t.filter(t=>!e.includes(t.id))),h([])},d[1]=r):r=d[1];let p=r;return d[2]!==u?(l=u.map(ed),d[2]=u,d[3]=l):l=d[3],d[4]!==l?(i=e(W,{gap:12,children:l}),d[4]=l,d[5]=i):i=d[5],d[6]===Symbol.for("react.memo_cache_sentinel")?(c=e(Y,{onDeleteSelected:p}),d[6]=c):c=d[6],d[7]!==u||d[8]!==f||d[9]!==i?(s=t(O,{"data-testid":"selection",items:u,getItemId:es,value:f,onChange:h,children:[i,c]}),d[7]=u,d[8]=f,d[9]=i,d[10]=s):s=d[10],s},meta:F},{name:"InsideDrawer",story:()=>{let n,r,l,i,u,m,f,h,p,y,_,g,w,b,k,A,z,U=(0,a.c)(28);U[0]===Symbol.for("react.memo_cache_sentinel")?(n=[],U[0]=n):n=U[0];let[V,F]=(0,o.useState)(n);return U[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(N,{asChild:!0,children:e(S,{variant:"outline",color:"neutral",children:"Open drawer with selection"})}),U[1]=r):r=U[1],U[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(E,{}),U[2]=l):l=U[2],U[3]===Symbol.for("react.memo_cache_sentinel")?(i=e(R,{children:e(I,{children:"Clusters"})}),U[3]=i):i=U[3],U[4]===Symbol.for("react.memo_cache_sentinel")?(u=t($,{gap:8,align:"center",children:[e(T,{}),e(M,{size:"sm",color:"secondary",children:"Select all"})]}),U[4]=u):u=U[4],U[5]===Symbol.for("react.memo_cache_sentinel")?(m=e(v,{children:t(W,{gap:16,children:[u,e(W,{gap:12,children:B.map(em)})]})}),U[5]=m):m=U[5],U[6]!==V?(f=()=>j(V),U[6]=V,U[7]=f):f=U[7],U[8]===Symbol.for("react.memo_cache_sentinel")?(h=e(c,{}),U[8]=h):h=U[8],U[9]!==f?(p=t(S,{variant:"secondary",color:"neutral-alt",size:"large",onClick:f,children:[h," Duplicate"]}),U[9]=f,U[10]=p):p=U[10],U[11]!==V?(y=()=>P(V),U[11]=V,U[12]=y):y=U[12],U[13]===Symbol.for("react.memo_cache_sentinel")?(_=e(s,{}),U[13]=_):_=U[13],U[14]!==y?(g=t(S,{variant:"secondary",color:"neutral-alt",size:"large",onClick:y,children:[_," Move"]}),U[14]=y,U[15]=g):g=U[15],U[16]!==V?(w=()=>L(V),U[16]=V,U[17]=w):w=U[17],U[18]===Symbol.for("react.memo_cache_sentinel")?(b=e(d,{}),U[18]=b):b=U[18],U[19]!==w?(k=t(S,{variant:"secondary",color:"destructive",size:"large",onClick:w,children:[b," Delete"]}),U[19]=w,U[20]=k):k=U[20],U[21]!==g||U[22]!==k||U[23]!==p?(A=t(x,{placement:"absolute",children:[p,g,k]}),U[21]=g,U[22]=k,U[23]=p,U[24]=A):A=U[24],U[25]!==V||U[26]!==A?(z=t(C,{width:720,children:[r,e(D,{children:t(O,{items:B,getItemId:eu,value:V,onChange:F,className:"flex min-h-0 flex-1 flex-col",children:[l,i,m,A]})})]}),U[25]=V,U[26]=A,U[27]=z):z=U[27],z},meta:F}];function eh({entry:e}){let{story:t,meta:n}=e,r={...n.args,...t.args},l="function"==typeof t||t.$$typeof?t:t.render||n.render||n.component,a=()=>o.default.createElement(l,r),i={args:r,globals:{theme:"light"},parameters:{...n.parameters,...t.parameters},viewMode:"story"};for(let e of[...n.decorators||[],...t.decorators||[]].reverse()){let t=a;a=()=>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(a))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(o.default.createElement(window.WallarmDS.Root,null,ef.map((e,t)=>o.default.createElement(eh,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,77 @@
+A 1px rule for the places where whitespace alone does not show that one group has ended — reach for `Stack` gaps first, because a drawn line is a statement. Most families ship their own (`DropdownMenuSeparator`, `SelectSeparator`, `FieldSeparator`, `NavRailSeparator` and the rest) already carrying that context’s defaults; the raw primitive is for generic content. It is decorative by default, so set `decorative={false}` only when the line marks a boundary a screen-reader user should hear.
+
+## Props as canvas attributes
+
+Use kebab-case attribute names. Pass non-string values through renderVals holes, including booleans. The full emitted API is in `components/index.d.ts`.
+
+| Attribute | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `title` | `string \| undefined` | no | — |  |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `orientation` | `"horizontal" \| "vertical"` | no | `horizontal` |  |
+| `spacing` | `"1" \| "2" \| "4" \| "6" \| "8" \| "12" \| "16" \| "20" \| "24" \| "28" \| "32" \| "36" \| "40" \| "44" \| "48" \| "56" \| "64" \| "80" \| "96" \| "112" \| "128" \| "144"` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+| `decorative` | `boolean \| undefined` | no | `true` |  |
+
+## Stories
+
+### Basic
+
+Both orientations in one frame. `spacing` carries the gap around the rule, so never wrap it in a margin `div`, and the vertical one stretches to its row — which means the row has to have a height.
+
+Source: Separator/Separator.stories.tsx#Basic
+
+## Story sources
+
+### Separator/Separator.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Heading } from '../Heading';
+import { HStack, VStack } from '../Stack';
+import { Text } from '../Text';
+import { Separator } from './Separator';
+
+const DESCRIPTION = [
+  'A 1px rule for the places where whitespace alone does not show that one group has ended — reach for `Stack` gaps first, because a drawn line is a statement.',
+  'Most families ship their own (`DropdownMenuSeparator`, `SelectSeparator`, `FieldSeparator`, `NavRailSeparator` and the rest) already carrying that context’s defaults; the raw primitive is for generic content.',
+  'It is decorative by default, so set `decorative={false}` only when the line marks a boundary a screen-reader user should hear.',
+].join(' ');
+
+const meta = {
+  title: 'Primitives/Separator',
+  component: Separator,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+} satisfies Meta<typeof Separator>;
+
+export default meta;
+
+/** Both orientations in one frame. `spacing` carries the gap around the rule, so never wrap it in a margin `div`, and the vertical one stretches to its row — which means the row has to have a height. */
+export const Basic: StoryFn<typeof meta> = () => (
+  <VStack>
+    <Heading>Separator examples</Heading>
+    <Text>Wallarm Design System component library.</Text>
+    <Separator spacing={16} />
+    <HStack gap={0}>
+      <Text>Blog</Text>
+      <Separator decorative orientation='vertical' spacing={16} />
+      <Text>Docs</Text>
+      <Separator decorative orientation='vertical' spacing={16} />
+      <Text>Source</Text>
+    </HStack>
+  </VStack>
+);
+```

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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,a;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var o,l,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty,d=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of u(t))p.call(e,a)||a===r||c(e,a,{get:()=>t[a],enumerable:!(n=s(t,a))||n.enumerable});return e},m={},y={$dispatcherGuard:()=>M,$makeReadOnly:()=>k,$reset:()=>O,$structuralCheck:()=>I,c:()=>$,clearRenderCounterRegistry:()=>x,renderCounterRegistry:()=>D,useRenderCounter:()=>j};for(var h in y)c(m,h,{get:y[h],enumerable:!0});e.exports=d(c({},"__esModule",{value:!0}),m);var w=(a=null!=(n=r("C"))?i(f(n)):{},d(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:g,useEffect:v,isValidElement:S}=w,R=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,E=Symbol.for("react.memo_cache_sentinel"),$="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]=E;return t[E]=!0,t},[])},_={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{_[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var b=null;function N(e){return R.ReactCurrentDispatcher.current=e,R.ReactCurrentDispatcher.current}_.useMemoCache=e=>{if(null!=b)return b.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function M(e){let t=R.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.length&&(b=t),t===_)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");N(_)}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&&(b=null),N(e)}else if(2===e)C.push(t),N(b);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]=E}function k(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var D=new Map;function x(){for(let e of D.values())e.forEach(e=>{e.count=0})}function j(e){let t=g(null);null!=t.current&&(t.current.count+=1),v(()=>{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 T=new Set;function I(e,t,r,n,a,o){function l(e,t,l,i){let c=`${n}:${o} [${a}] ${r}${l} changed from ${e} to ${t} at depth ${i}`;T.has(c)||(T.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:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:p,cloneElement:d,createContext:m,createElement:y,createFactory:h,createRef:w,forwardRef:g,isValidElement:v,lazy:S,memo:R,startTransition:E,unstable_act:$,useCallback:_,useContext:b,useDebugValue:N,useDeferredValue:C,useEffect:M,useId:O,useImperativeHandle:k,useInsertionEffect:D,useLayoutEffect:x,useMemo:j,useReducer:T,useRef:I,useState:A,useSyncExternalStore:P,useTransition:W,version:z,use:L}=n;r.d(t,{},{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:p,cloneElement:d,createContext:m,createElement:y,createFactory:h,createRef:w,default:n,forwardRef:g,isValidElement:v,lazy:S,memo:R,startTransition:E,unstable_act:$,use:L,useCallback:_,useContext:b,useDebugValue:N,useDeferredValue:C,useEffect:M,useId:O,useImperativeHandle:k,useInsertionEffect:D,useLayoutEffect:x,useMemo:j,useReducer:T,useRef:I,useState:A,useSyncExternalStore:P,useTransition:W,version:z})}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,r),o.exports}r.d=(e,t,n)=>{var a=(t,n)=>{for(var a in t)r.o(t,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,[n]:t[a]})};a(t,"get"),a(n,"value")},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:n,Fragment:a}=(0,r("p").MA)(window.React);var o=r("vD");let l=window.WallarmDS.Heading,i=window.WallarmDS.HStack,c=window.WallarmDS.VStack,s=window.WallarmDS.Text,u=window.WallarmDS.Separator;var f=r("C");let p=[{name:"Basic",story:()=>{let r,n,a,f,p=(0,o.c)(4);return p[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(l,{children:"Separator examples"}),n=e(s,{children:"Wallarm Design System component library."}),a=e(u,{spacing:16}),p[0]=r,p[1]=n,p[2]=a):(r=p[0],n=p[1],a=p[2]),p[3]===Symbol.for("react.memo_cache_sentinel")?(f=t(c,{children:[r,n,a,t(i,{gap:0,children:[e(s,{children:"Blog"}),e(u,{decorative:!0,orientation:"vertical",spacing:16}),e(s,{children:"Docs"}),e(u,{decorative:!0,orientation:"vertical",spacing:16}),e(s,{children:"Source"})]})]}),p[3]=f):f=p[3],f},meta:{title:"Primitives/Separator",component:u,parameters:{layout:"centered",docs:{description:{component:"A 1px rule for the places where whitespace alone does not show that one group has ended — reach for `Stack` gaps first, because a drawn line is a statement. Most families ship their own (`DropdownMenuSeparator`, `SelectSeparator`, `FieldSeparator`, `NavRailSeparator` and the rest) already carrying that context’s defaults; the raw primitive is for generic content. It is decorative by default, so set `decorative={false}` only when the line marks a boundary a screen-reader user should hear."}}}}}];function d({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},a="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,o=()=>f.default.createElement(a,n),l={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=o;o=()=>e(t,l)}return f.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},f.default.createElement("h2",{className:"text-sm mb-12"},e.name),f.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(f.default.createElement(window.WallarmDS.Root,null,p.map((e,t)=>f.default.createElement(d,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,358 @@
+A content-shaped placeholder for a region whose layout you know but whose data has not landed — it shortens the perceived wait and stops the page jumping when the content arrives. Reach for it on the first or full load of a page, list, card or table; a single inline wait is a `Loader`, a measurable one is `Progress`, and a wait under a second wants nothing at all. Never put a skeleton and a spinner in the same region. The root is `aria-hidden`, so the loading announcement has to come from a live region of your own.
+
+## 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 | — |  |
+| `transparent` | `boolean` | no | `true` |  |
+| `rounded` | `"none" \| "full" \| "2" \| "4" \| "6" \| "8" \| "10" \| "12" \| "16" \| "24" \| "32"` | no | `6` |  |
+| `with-dimensions` | `boolean` | no | — |  |
+| `with-children` | `boolean` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+| `loading` | `boolean \| undefined` | no | `true` |  |
+| `width` | `SkeletonDimension` | no | — |  |
+| `height` | `SkeletonDimension` | no | — |  |
+
+## Stories
+
+### Basic
+
+One sized box. `width` and `height` take any CSS length, and `rounded` should match the shape of whatever is coming.
+
+Source: Skeleton/Skeleton.stories.tsx#Basic
+
+### Shapes
+
+Standalone boxes built to match the real components beside them. The point of the comparison is the measurements: a placeholder that is not the content’s size is what makes the page jump on swap-in.
+
+Source: Skeleton/Skeleton.stories.tsx#Shapes
+
+### Wrap
+
+The cleaner way — wrap the real content and toggle `loading`. The skeleton takes the content’s exact box, so there is nothing to keep in sync by hand.
+
+Source: Skeleton/Skeleton.stories.tsx#Wrap
+
+### Transparent
+
+`transparent`, the default, animates over invisible content so the surface behind shows through; `transparent={false}` fills the box with `surface-1`.
+
+Source: Skeleton/Skeleton.stories.tsx#Transparent
+
+## Story sources
+
+### Skeleton/Skeleton.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { CircleDashed, Globe } from '../../icons';
+import { Badge } from '../Badge';
+import { Button } from '../Button';
+import { Heading } from '../Heading';
+import { SegmentedTabs, SegmentedTabsList, SegmentedTabsTrigger } from '../SegmentedTabs';
+import { HStack } from '../Stack';
+import { Tag, TagClose } from '../Tag';
+import { Text } from '../Text';
+import { Skeleton, type SkeletonProps } from './Skeleton';
+
+const DESCRIPTION = [
+  'A content-shaped placeholder for a region whose layout you know but whose data has not landed — it shortens the perceived wait and stops the page jumping when the content arrives.',
+  'Reach for it on the first or full load of a page, list, card or table; a single inline wait is a `Loader`, a measurable one is `Progress`, and a wait under a second wants nothing at all. Never put a skeleton and a spinner in the same region.',
+  'The root is `aria-hidden`, so the loading announcement has to come from a live region of your own.',
+].join(' ');
+
+const meta = {
+  title: 'Loading/Skeleton',
+  component: Skeleton,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+  argTypes: {
+    width: {
+      control: 'number',
+    },
+    height: {
+      control: 'number',
+    },
+    rounded: {
+      control: 'number',
+    },
+    transparent: {
+      control: 'boolean',
+    },
+    loading: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+
+/** One sized box. `width` and `height` take any CSS length, and `rounded` should match the shape of whatever is coming. */
+export const Basic: StoryFn<typeof meta> = () => <Skeleton width='200px' height='20px' />;
+
+/** Standalone boxes built to match the real components beside them. The point of the comparison is the measurements: a placeholder that is not the content’s size is what makes the page jump on swap-in. */
+export const Shapes: StoryFn<SkeletonProps> = () => (
+  <HStack gap={24} align='start'>
+    <div className='flex flex-col items-end gap-24 w-[400px]'>
+      {/* Title */}
+      <Skeleton width='256px' height='40px' />
+
+      {/* Text */}
+      <Skeleton width='256px' height='24px' />
+
+      {/* Tags row */}
+      <HStack gap={4}>
+        <Skeleton width='48px' height='20px' />
+        <Skeleton width='48px' height='20px' />
+        <Skeleton width='48px' height='20px' />
+        <Skeleton width='48px' height='20px' />
+      </HStack>
+
+      {/* Icon Button */}
+      <Skeleton width='36px' height='36px' />
+
+      {/* Circle + text + badge */}
+      <HStack align='center' gap={4}>
+        <Skeleton width='20px' height='24px' rounded='full' />
+        <Skeleton width='88px' height='24px' />
+        <Skeleton width='32px' height='24px' />
+      </HStack>
+
+      {/* Button */}
+      <Skeleton width='100px' height='36px' rounded={8} />
+
+      {/* Segmented tabs */}
+      <Skeleton width='284px' height='36px' rounded={12} />
+    </div>
+
+    <div className='flex flex-col gap-24 w-[400px]'>
+      {/* Title */}
+      <Heading size='4xl'>Advanced API Security</Heading>
+
+      {/* Text */}
+      <Text size='md'>Advanced API Security</Text>
+
+      {/* Tags row */}
+      <div className='flex flex-row gap-4'>
+        <Tag>
+          Tag
+          <TagClose />
+        </Tag>
+        <Tag>
+          Tag
+          <TagClose />
+        </Tag>
+        <Tag>
+          Tag
+          <TagClose />
+        </Tag>
+        <Badge>+5</Badge>
+      </div>
+
+      {/* Icon Button */}
+      <Button variant='outline' color='neutral' size='large'>
+        <CircleDashed />
+      </Button>
+
+      {/* Circle + text + badge */}
+      <div className='flex flex-row items-center gap-4'>
+        <Globe className='size-[20px] text-text-secondary' />
+        <Text size='md'>34.74.73.20</Text>
+        <Badge>AWS</Badge>
+      </div>
+
+      {/* Button */}
+      <div className='flex w-100'>
+        <Button variant='primary' color='brand' size='large'>
+          <CircleDashed />
+          Button
+        </Button>
+      </div>
+
+      {/* Segmented tabs */}
+      <div className='flex w-284'>
+        <SegmentedTabs defaultValue='item1'>
+          <SegmentedTabsList>
+            <SegmentedTabsTrigger value='item1'>Item</SegmentedTabsTrigger>
+            <SegmentedTabsTrigger value='item2'>Item</SegmentedTabsTrigger>
+            <SegmentedTabsTrigger value='item3'>Item</SegmentedTabsTrigger>
+            <SegmentedTabsTrigger value='item4'>Item</SegmentedTabsTrigger>
+            <SegmentedTabsTrigger value='item5'>Item</SegmentedTabsTrigger>
+          </SegmentedTabsList>
+        </SegmentedTabs>
+      </div>
+    </div>
+  </HStack>
+);
+
+/** The cleaner way — wrap the real content and toggle `loading`. The skeleton takes the content’s exact box, so there is nothing to keep in sync by hand. */
+export const Wrap: StoryFn<SkeletonProps> = () => (
+  <HStack gap={24} align='start'>
+    <div className='flex flex-col items-end gap-24 w-[400px]'>
+      {/* Title */}
+      <Skeleton>
+        <Heading size='4xl'>Advanced API Security</Heading>
+      </Skeleton>
+
+      {/* Text */}
+      <Skeleton>
+        <Text size='md'>Advanced API Security</Text>
+      </Skeleton>
+
+      {/* Tags row */}
+      <HStack gap={4}>
+        <Skeleton>
+          <Tag>
+            Tag
+            <TagClose />
+          </Tag>
+        </Skeleton>
+        <Skeleton>
+          <Tag>
+            Tag
+            <TagClose />
+          </Tag>
+        </Skeleton>
+        <Skeleton>
+          <Tag>
+            Tag
+            <TagClose />
+          </Tag>
+        </Skeleton>
+        <Skeleton>
+          <Badge>+5</Badge>
+        </Skeleton>
+      </HStack>
+
+      {/* Icon Button */}
+      <Skeleton rounded={8}>
+        <Button variant='outline' color='neutral' size='large'>
+          <CircleDashed />
+        </Button>
+      </Skeleton>
+
+      {/* Circle + text + badge */}
+      <HStack align='center' gap={4}>
+        <Skeleton rounded='full'>
+          <Globe className='size-[20px] text-text-secondary' />
+        </Skeleton>
+        <Skeleton>
+          <Text size='md'>34.74.73.20</Text>
+        </Skeleton>
+        <Skeleton>
+          <Badge>AWS</Badge>
+        </Skeleton>
+      </HStack>
+
+      {/* Button */}
+      <Skeleton rounded={8}>
+        <Button variant='primary' color='brand' size='large'>
+          <CircleDashed />
+          Button
+        </Button>
+      </Skeleton>
+
+      {/* Segmented tabs */}
+      <Skeleton rounded={12}>
+        <SegmentedTabs defaultValue='item1'>
+          <SegmentedTabsList>
+            <SegmentedTabsTrigger value='item1'>Item</SegmentedTabsTrigger>
+            <SegmentedTabsTrigger value='item2'>Item</SegmentedTabsTrigger>
+            <SegmentedTabsTrigger value='item3'>Item</SegmentedTabsTrigger>
+            <SegmentedTabsTrigger value='item4'>Item</SegmentedTabsTrigger>
+            <SegmentedTabsTrigger value='item5'>Item</SegmentedTabsTrigger>
+          </SegmentedTabsList>
+        </SegmentedTabs>
+      </Skeleton>
+    </div>
+
+    <div className='flex flex-col gap-24 w-[400px]'>
+      {/* Title */}
+      <Heading size='4xl'>Advanced API Security</Heading>
+
+      {/* Text */}
+      <Text size='md'>Advanced API Security</Text>
+
+      {/* Tags row */}
+      <div className='flex flex-row gap-4'>
+        <Tag>
+          Tag
+          <TagClose />
+        </Tag>
+        <Tag>
+          Tag
+          <TagClose />
+        </Tag>
+        <Tag>
+          Tag
+          <TagClose />
+        </Tag>
+        <Badge>+5</Badge>
+      </div>
+
+      {/* Icon Button */}
+      <Button variant='outline' color='neutral' size='large'>
+        <CircleDashed />
+      </Button>
+
+      {/* Circle + text + badge */}
+      <div className='flex flex-row items-center gap-4'>
+        <Globe className='size-[20px] text-text-secondary' />
+        <Text size='md'>34.74.73.20</Text>
+        <Badge>AWS</Badge>
+      </div>
+
+      {/* Button */}
+      <div className='flex w-100'>
+        <Button variant='primary' color='brand' size='large'>
+          <CircleDashed />
+          Button
+        </Button>
+      </div>
+
+      {/* Segmented tabs */}
+      <div className='flex w-284'>
+        <SegmentedTabs defaultValue='item1'>
+          <SegmentedTabsList>
+            <SegmentedTabsTrigger value='item1'>Item</SegmentedTabsTrigger>
+            <SegmentedTabsTrigger value='item2'>Item</SegmentedTabsTrigger>
+            <SegmentedTabsTrigger value='item3'>Item</SegmentedTabsTrigger>
+            <SegmentedTabsTrigger value='item4'>Item</SegmentedTabsTrigger>
+            <SegmentedTabsTrigger value='item5'>Item</SegmentedTabsTrigger>
+          </SegmentedTabsList>
+        </SegmentedTabs>
+      </div>
+    </div>
+  </HStack>
+);
+
+/** `transparent`, the default, animates over invisible content so the surface behind shows through; `transparent={false}` fills the box with `surface-1`. */
+export const Transparent: StoryFn<SkeletonProps> = () => (
+  <div className='flex flex-col gap-8 p-8 rounded-8 bg-orange-100'>
+    <div className='flex items-center justify-end gap-24'>
+      <span className='sb-annotation'>transparent</span>
+      <Skeleton width='200px' height='20px' />
+    </div>
+    <div className='flex items-center justify-end gap-24'>
+      <span className='sb-annotation'>filled</span>
+      <Skeleton width='200px' height='20px' transparent={false} />
+    </div>
+  </div>
+);
+```

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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,l;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var a,o,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,h=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let l of d(t))u.call(e,l)||l===r||c(e,l,{get:()=>t[l],enumerable:!(n=s(t,l))||n.enumerable});return e},f={},p={$dispatcherGuard:()=>I,$makeReadOnly:()=>T,$reset:()=>C,$structuralCheck:()=>M,c:()=>x,clearRenderCounterRegistry:()=>D,renderCounterRegistry:()=>k,useRenderCounter:()=>O};for(var y in p)c(f,y,{get:p[y],enumerable:!0});e.exports=h(c({},"__esModule",{value:!0}),f);var g=(l=null!=(n=r("C"))?i(m(n)):{},h(n&&n.__esModule?l:c(l,"default",{value:n,enumerable:!0}),n)),{useRef:_,useEffect:w,isValidElement:S}=g,b=null!=(a=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?a:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),x="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]=v;return t[v]=!0,t},[])},N={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{N[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var R=null;function E(e){return b.ReactCurrentDispatcher.current=e,b.ReactCurrentDispatcher.current}N.useMemoCache=e=>{if(null!=R)return R.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var $=[];function I(e){let t=b.ReactCurrentDispatcher.current;if(0===e){if($.push(t),1===$.length&&(R=t),t===N)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");E(N)}else if(1===e){let e=$.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===$.length&&(R=null),E(e)}else if(2===e)$.push(t),E(R);else if(3===e){let e=$.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");E(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function C(e){for(let t=0;t<e.length;t++)e[t]=v}function T(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var k=new Map;function D(){for(let e of k.values())e.forEach(e=>{e.count=0})}function O(e){let t=_(null);null!=t.current&&(t.current.count+=1),w(()=>{if(null==t.current){let r,n={count:0};null==(r=k.get(e))&&(r=new Set,k.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=k.get(e))&&n.delete(r))}})}var A=new Set;function M(e,t,r,n,l,a){function o(e,t,o,i){let c=`${n}:${a} [${l}] ${r}${o} changed from ${e} to ${t} at depth ${i}`;A.has(c)||(A.add(c),console.error(c))}!function e(t,r,n,l){if(!(l>2)){if(t!==r)if(typeof t!=typeof r)o(`type ${typeof t}`,`type ${typeof r}`,n,l);else if("object"==typeof t){let a=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)o("null",`type ${typeof r}`,n,l);else if(null===r)o(`type ${typeof t}`,"null",n,l);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,l);else for(let[a,i]of t)r.has(a)?e(i,r.get(a),`${n}.get(${a})`,l+1):o(`Map instance with key ${a}`,`Map instance without key ${a}`,n,l);else o("Map instance","other value",n,l);else if(r instanceof Map)o("other value","Map instance",n,l);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,l);else for(let e of r)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,n,l);else o("Set instance","other value",n,l);else if(r instanceof Set)o("other value","Set instance",n,l);else if(a||i)if(a!==i)o(`type ${a?"array":"object"}`,`type ${i?"array":"object"}`,n,l);else if(t.length!==r.length)o(`array with length ${t.length}`,`array with length ${r.length}`,n,l);else for(let a=0;a<t.length;a++)e(t[a],r[a],`${n}[${a}]`,l+1);else if(S(t)||S(r))S(t)!==S(r)?o(`type ${S(t)?"React element":"object"}`,`type ${S(r)?"React element":"object"}`,n,l):t.type!==r.type?o(`React element of type ${t.type}`,`React element of type ${r.type}`,n,l):e(t.props,r.props,`[props of ${n}]`,l+1);else{for(let e in r)e in t||o(`object without key ${e}`,`object with key ${e}`,n,l);for(let a in t)a in r?e(t[a],r[a],`${n}.${a}`,l+1):o(`object with key ${a}`,`object without key ${a}`,n,l)}}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,l):t!==r&&o(t,r,n,l)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,l=new WeakMap;function a(e,t,r){let a=t,o=r;if("object"==typeof a&&null!==a&&"$$typeof"in a&&a.$$typeof===Symbol.for("react.context")&&"Provider"in a&&(a=a.Provider),"function"==typeof a&&null!=o.ref&&!a.prototype?.isReactComponent){let t=a,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let l=r.get(t);l||((l=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,l)),a=l}if("string"==typeof a&&"boolean"==typeof o.inert&&((o={...o}).inert?o.inert="":delete o.inert),"string"==typeof a)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 a&&null!=o.ref&&(a=function(e,t){let r=l.get(e);r||(r=new Map,l.set(e,r));let n=r.get(t);if(n)return n;let a=e.forwardRef((r,n)=>{let l=e.useRef(null);if(!l.current||l.current.original!==n){let e;l.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:l.current.callback})});return a.displayName=`CanvasHost(${t})`,r.set(t,a),a}(e,a)),{type:a,props:o}}function o(e){let t=(t,r,n)=>{let l=a(e,t,r??{});return e.createElement(l.type,void 0===n?l.props:{...l.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let l=a(e,t,r??{}),{children:o,...i}=l.props;return e.createElement(l.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 l=a(e,t,r??{});return e.createElement(l.type,l.props,...n)},cloneElement:(t,r,...n)=>{let l=e.cloneElement(t,r??void 0,...n),o=l.ref,i=a(e,l.type,{...l.props,ref:o});return i.type===l.type&&"string"!=typeof l.type?l:e.createElement(i.type,{...i.props,key:l.key})}}}r.d(t,{MA:()=>o,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:l,Component:a,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:u,cloneElement:h,createContext:f,createElement:p,createFactory:y,createRef:g,forwardRef:_,isValidElement:w,lazy:S,memo:b,startTransition:v,unstable_act:x,useCallback:N,useContext:R,useDebugValue:E,useDeferredValue:$,useEffect:I,useId:C,useImperativeHandle:T,useInsertionEffect:k,useLayoutEffect:D,useMemo:O,useReducer:A,useRef:M,useState:z,useSyncExternalStore:j,useTransition:W,version:P,use:L}=n;r.d(t,{},{Children:l,Component:a,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:u,cloneElement:h,createContext:f,createElement:p,createFactory:y,createRef:g,default:n,forwardRef:_,isValidElement:w,lazy:S,memo:b,startTransition:v,unstable_act:x,use:L,useCallback:N,useContext:R,useDebugValue:E,useDeferredValue:$,useEffect:I,useId:C,useImperativeHandle:T,useInsertionEffect:k,useLayoutEffect:D,useMemo:O,useReducer:A,useRef:M,useState:z,useSyncExternalStore:j,useTransition:W,version:P})}},t={};function r(n){var l=t[n];if(void 0!==l)return l.exports;var a=t[n]={exports:{}};return e[n](a,a.exports,r),a.exports}r.d=(e,t,n)=>{var l=(t,n)=>{for(var l in t)r.o(t,l)&&!r.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,[n]:t[l]})};l(t,"get"),l(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:l}=(0,r("p").MA)(window.React);var a=r("vD");let o=window.WallarmDS.Icons.CircleDashed,i=window.WallarmDS.Icons.Globe,c=window.WallarmDS.Badge,s=window.WallarmDS.Button,d=window.WallarmDS.Heading,m=window.WallarmDS.SegmentedTabs,u=window.WallarmDS.SegmentedTabsList,h=window.WallarmDS.SegmentedTabsTrigger,f=window.WallarmDS.HStack,p=window.WallarmDS.Tag,y=window.WallarmDS.TagClose,g=window.WallarmDS.Text,_=window.WallarmDS.Skeleton,w={title:"Loading/Skeleton",component:_,parameters:{layout:"centered",docs:{description:{component:"A content-shaped placeholder for a region whose layout you know but whose data has not landed — it shortens the perceived wait and stops the page jumping when the content arrives. Reach for it on the first or full load of a page, list, card or table; a single inline wait is a `Loader`, a measurable one is `Progress`, and a wait under a second wants nothing at all. Never put a skeleton and a spinner in the same region. The root is `aria-hidden`, so the loading announcement has to come from a live region of your own."}}},argTypes:{width:{control:"number"},height:{control:"number"},rounded:{control:"number"},transparent:{control:"boolean"},loading:{control:"boolean"}}};var S=r("C");let b=[{name:"Basic",story:()=>{let t,r=(0,a.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(_,{width:"200px",height:"20px"}),r[0]=t):t=r[0],t},meta:w},{name:"Shapes",story:()=>{let r,n,l,w,S,b,v,x,N,R,E,$,I,C,T=(0,a.c)(14);return T[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(_,{width:"256px",height:"40px"}),n=e(_,{width:"256px",height:"24px"}),T[0]=r,T[1]=n):(r=T[0],n=T[1]),T[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(f,{gap:4,children:[e(_,{width:"48px",height:"20px"}),e(_,{width:"48px",height:"20px"}),e(_,{width:"48px",height:"20px"}),e(_,{width:"48px",height:"20px"})]}),w=e(_,{width:"36px",height:"36px"}),T[2]=l,T[3]=w):(l=T[2],w=T[3]),T[4]===Symbol.for("react.memo_cache_sentinel")?(S=t("div",{className:"flex flex-col items-end gap-24 w-[400px]",children:[r,n,l,w,t(f,{align:"center",gap:4,children:[e(_,{width:"20px",height:"24px",rounded:"full"}),e(_,{width:"88px",height:"24px"}),e(_,{width:"32px",height:"24px"})]}),e(_,{width:"100px",height:"36px",rounded:8}),e(_,{width:"284px",height:"36px",rounded:12})]}),T[4]=S):S=T[4],T[5]===Symbol.for("react.memo_cache_sentinel")?(b=e(d,{size:"4xl",children:"Advanced API Security"}),v=e(g,{size:"md",children:"Advanced API Security"}),T[5]=b,T[6]=v):(b=T[5],v=T[6]),T[7]===Symbol.for("react.memo_cache_sentinel")?(x=t(p,{children:["Tag",e(y,{})]}),T[7]=x):x=T[7],T[8]===Symbol.for("react.memo_cache_sentinel")?(N=t(p,{children:["Tag",e(y,{})]}),T[8]=N):N=T[8],T[9]===Symbol.for("react.memo_cache_sentinel")?(R=t("div",{className:"flex flex-row gap-4",children:[x,N,t(p,{children:["Tag",e(y,{})]}),e(c,{children:"+5"})]}),T[9]=R):R=T[9],T[10]===Symbol.for("react.memo_cache_sentinel")?(E=e(s,{variant:"outline",color:"neutral",size:"large",children:e(o,{})}),T[10]=E):E=T[10],T[11]===Symbol.for("react.memo_cache_sentinel")?($=t("div",{className:"flex flex-row items-center gap-4",children:[e(i,{className:"size-[20px] text-text-secondary"}),e(g,{size:"md",children:"34.74.73.20"}),e(c,{children:"AWS"})]}),T[11]=$):$=T[11],T[12]===Symbol.for("react.memo_cache_sentinel")?(I=e("div",{className:"flex w-100",children:t(s,{variant:"primary",color:"brand",size:"large",children:[e(o,{}),"Button"]})}),T[12]=I):I=T[12],T[13]===Symbol.for("react.memo_cache_sentinel")?(C=t(f,{gap:24,align:"start",children:[S,t("div",{className:"flex flex-col gap-24 w-[400px]",children:[b,v,R,E,$,I,e("div",{className:"flex w-284",children:e(m,{defaultValue:"item1",children:t(u,{children:[e(h,{value:"item1",children:"Item"}),e(h,{value:"item2",children:"Item"}),e(h,{value:"item3",children:"Item"}),e(h,{value:"item4",children:"Item"}),e(h,{value:"item5",children:"Item"})]})})})]})]}),T[13]=C):C=T[13],C},meta:w},{name:"Wrap",story:()=>{let r,n,l,w,S,b,v,x,N,R,E,$,I,C,T,k,D,O,A,M,z,j=(0,a.c)(21);return j[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(_,{children:e(d,{size:"4xl",children:"Advanced API Security"})}),j[0]=r):r=j[0],j[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(_,{children:e(g,{size:"md",children:"Advanced API Security"})}),j[1]=n):n=j[1],j[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(_,{children:t(p,{children:["Tag",e(y,{})]})}),j[2]=l):l=j[2],j[3]===Symbol.for("react.memo_cache_sentinel")?(w=e(_,{children:t(p,{children:["Tag",e(y,{})]})}),j[3]=w):w=j[3],j[4]===Symbol.for("react.memo_cache_sentinel")?(S=e(_,{children:t(p,{children:["Tag",e(y,{})]})}),j[4]=S):S=j[4],j[5]===Symbol.for("react.memo_cache_sentinel")?(b=t(f,{gap:4,children:[l,w,S,e(_,{children:e(c,{children:"+5"})})]}),j[5]=b):b=j[5],j[6]===Symbol.for("react.memo_cache_sentinel")?(v=e(_,{rounded:8,children:e(s,{variant:"outline",color:"neutral",size:"large",children:e(o,{})})}),j[6]=v):v=j[6],j[7]===Symbol.for("react.memo_cache_sentinel")?(x=e(_,{rounded:"full",children:e(i,{className:"size-[20px] text-text-secondary"})}),j[7]=x):x=j[7],j[8]===Symbol.for("react.memo_cache_sentinel")?(N=e(_,{children:e(g,{size:"md",children:"34.74.73.20"})}),j[8]=N):N=j[8],j[9]===Symbol.for("react.memo_cache_sentinel")?(R=t(f,{align:"center",gap:4,children:[x,N,e(_,{children:e(c,{children:"AWS"})})]}),j[9]=R):R=j[9],j[10]===Symbol.for("react.memo_cache_sentinel")?(E=e(_,{rounded:8,children:t(s,{variant:"primary",color:"brand",size:"large",children:[e(o,{}),"Button"]})}),j[10]=E):E=j[10],j[11]===Symbol.for("react.memo_cache_sentinel")?($=t("div",{className:"flex flex-col items-end gap-24 w-[400px]",children:[r,n,b,v,R,E,e(_,{rounded:12,children:e(m,{defaultValue:"item1",children:t(u,{children:[e(h,{value:"item1",children:"Item"}),e(h,{value:"item2",children:"Item"}),e(h,{value:"item3",children:"Item"}),e(h,{value:"item4",children:"Item"}),e(h,{value:"item5",children:"Item"})]})})})]}),j[11]=$):$=j[11],j[12]===Symbol.for("react.memo_cache_sentinel")?(I=e(d,{size:"4xl",children:"Advanced API Security"}),C=e(g,{size:"md",children:"Advanced API Security"}),j[12]=I,j[13]=C):(I=j[12],C=j[13]),j[14]===Symbol.for("react.memo_cache_sentinel")?(T=t(p,{children:["Tag",e(y,{})]}),j[14]=T):T=j[14],j[15]===Symbol.for("react.memo_cache_sentinel")?(k=t(p,{children:["Tag",e(y,{})]}),j[15]=k):k=j[15],j[16]===Symbol.for("react.memo_cache_sentinel")?(D=t("div",{className:"flex flex-row gap-4",children:[T,k,t(p,{children:["Tag",e(y,{})]}),e(c,{children:"+5"})]}),j[16]=D):D=j[16],j[17]===Symbol.for("react.memo_cache_sentinel")?(O=e(s,{variant:"outline",color:"neutral",size:"large",children:e(o,{})}),j[17]=O):O=j[17],j[18]===Symbol.for("react.memo_cache_sentinel")?(A=t("div",{className:"flex flex-row items-center gap-4",children:[e(i,{className:"size-[20px] text-text-secondary"}),e(g,{size:"md",children:"34.74.73.20"}),e(c,{children:"AWS"})]}),j[18]=A):A=j[18],j[19]===Symbol.for("react.memo_cache_sentinel")?(M=e("div",{className:"flex w-100",children:t(s,{variant:"primary",color:"brand",size:"large",children:[e(o,{}),"Button"]})}),j[19]=M):M=j[19],j[20]===Symbol.for("react.memo_cache_sentinel")?(z=t(f,{gap:24,align:"start",children:[$,t("div",{className:"flex flex-col gap-24 w-[400px]",children:[I,C,D,O,A,M,e("div",{className:"flex w-284",children:e(m,{defaultValue:"item1",children:t(u,{children:[e(h,{value:"item1",children:"Item"}),e(h,{value:"item2",children:"Item"}),e(h,{value:"item3",children:"Item"}),e(h,{value:"item4",children:"Item"}),e(h,{value:"item5",children:"Item"})]})})})]})]}),j[20]=z):z=j[20],z},meta:w},{name:"Transparent",story:()=>{let r,n,l=(0,a.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(r=t("div",{className:"flex items-center justify-end gap-24",children:[e("span",{className:"sb-annotation",children:"transparent"}),e(_,{width:"200px",height:"20px"})]}),l[0]=r):r=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(n=t("div",{className:"flex flex-col gap-8 p-8 rounded-8 bg-orange-100",children:[r,t("div",{className:"flex items-center justify-end gap-24",children:[e("span",{className:"sb-annotation",children:"filled"}),e(_,{width:"200px",height:"20px",transparent:!1})]})]}),l[1]=n):n=l[1],n},meta:w}];function v({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},l="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,a=()=>S.default.createElement(l,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=a;a=()=>e(t,o)}return S.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},S.default.createElement("h2",{className:"text-sm mb-12"},e.name),S.default.createElement(a))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(S.default.createElement(window.WallarmDS.Root,null,b.map((e,t)=>S.default.createElement(v,{key:t,entry:e})))),t}}})();