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

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

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Status Indication" 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/Badge/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,c=Object.create,i=Object.defineProperty,s=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,p=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of d(t))m.call(e,a)||a===r||i(e,a,{get:()=>t[a],enumerable:!(n=s(t,a))||n.enumerable});return e},f={},h={$dispatcherGuard:()=>C,$makeReadOnly:()=>k,$reset:()=>j,$structuralCheck:()=>I,c:()=>N,clearRenderCounterRegistry:()=>M,renderCounterRegistry:()=>x,useRenderCounter:()=>z};for(var y in h)i(f,y,{get:h[y],enumerable:!0});e.exports=p(i({},"__esModule",{value:!0}),f);var b=(a=null!=(n=r("C"))?c(u(n)):{},p(n&&n.__esModule?a:i(a,"default",{value:n,enumerable:!0}),n)),{useRef:g,useEffect:_,isValidElement:S}=b,w=null!=(l=b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:b.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),N="function"==typeof(null==(o=b.__COMPILER_RUNTIME)?void 0:o.c)?b.__COMPILER_RUNTIME.c:function(e){return b.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 E=null;function O(e){return w.ReactCurrentDispatcher.current=e,w.ReactCurrentDispatcher.current}R.useMemoCache=e=>{if(null!=E)return E.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var $=[];function C(e){let t=w.ReactCurrentDispatcher.current;if(0===e){if($.push(t),1===$.length&&(E=t),t===R)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");O(R)}else if(1===e){let e=$.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===$.length&&(E=null),O(e)}else if(2===e)$.push(t),O(E);else if(3===e){let e=$.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");O(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function j(e){for(let t=0;t<e.length;t++)e[t]=v}function k(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var x=new Map;function M(){for(let e of x.values())e.forEach(e=>{e.count=0})}function z(e){let t=g(null);null!=t.current&&(t.current.count+=1),_(()=>{if(null==t.current){let r,n={count:0};null==(r=x.get(e))&&(r=new Set,x.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=x.get(e))&&n.delete(r))}})}var T=new Set;function I(e,t,r,n,a,l){function o(e,t,o,c){let i=`${n}:${l} [${a}] ${r}${o} changed from ${e} to ${t} at depth ${c}`;T.has(i)||(T.add(i),console.error(i))}!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),c=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,c]of t)r.has(l)?e(c,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||c)if(l!==c)o(`type ${l?"array":"object"}`,`type ${c?"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(S(t)||S(r))S(t)!==S(r)?o(`type ${S(t)?"React element":"object"}`,`type ${S(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,...c}=a.props;return e.createElement(a.type,void 0===n?c:{...c,key:n},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function c(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,c=l(e,a.type,{...a.props,ref:o});return c.type===a.type&&"string"!=typeof a.type?a:e.createElement(c.type,{...c.props,key:a.key})}}}r.d(t,{MA:()=>o,YJ:()=>c})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:a,Component:l,Fragment:o,Profiler:c,PureComponent:i,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:m,cloneElement:p,createContext:f,createElement:h,createFactory:y,createRef:b,forwardRef:g,isValidElement:_,lazy:S,memo:w,startTransition:v,unstable_act:N,useCallback:R,useContext:E,useDebugValue:O,useDeferredValue:$,useEffect:C,useId:j,useImperativeHandle:k,useInsertionEffect:x,useLayoutEffect:M,useMemo:z,useReducer:T,useRef:I,useState:D,useSyncExternalStore:A,useTransition:P,version:W,use:V}=n;r.d(t,{},{Children:a,Component:l,Fragment:o,Profiler:c,PureComponent:i,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:m,cloneElement:p,createContext:f,createElement:h,createFactory:y,createRef:b,default:n,forwardRef:g,isValidElement:_,lazy:S,memo:w,startTransition:v,unstable_act:N,use:V,useCallback:R,useContext:E,useDebugValue:O,useDeferredValue:$,useEffect:C,useId:j,useImperativeHandle:k,useInsertionEffect:x,useLayoutEffect:M,useMemo:z,useReducer:T,useRef:I,useState:D,useSyncExternalStore:A,useTransition:P,version:W})}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var l=t[n]={exports:{}};return e[n](l,l.exports,r),l.exports}r.d=(e,t,n)=>{var a=(t,n)=>{for(var a in t)r.o(t,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,[n]:t[a]})};a(t,"get"),a(n,"value")},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:n,Fragment:a}=(0,r("p").MA)(window.React);var l=r("vD"),o=r("C");let c={Solid:"solid",Secondary:"secondary",Outline:"outline",Text:"text",TextColor:"text-color"},i={Slate:"slate",Red:"red",WOrange:"w-orange",Amber:"amber",Yellow:"yellow",Lime:"lime",Green:"green",Emerald:"emerald",Teal:"teal",Cyan:"cyan",Sky:"sky",Blue:"blue",Indigo:"indigo",Violet:"violet",Fuchsia:"fuchsia",Pink:"pink",Rose:"rose",Gray:"gray",Zinc:"zinc",Neutral:"neutral",Stone:"stone"},s=[i.Slate,i.Gray,i.Zinc,i.Neutral,i.Stone],d=window.WallarmDS.Icons.Check,u=window.WallarmDS.Icons.CircleCheck,m=window.WallarmDS.Icons.Info,p=window.WallarmDS.Icons.PenTool,f=window.WallarmDS.Icons.X,h=window.WallarmDS.HStack,y=window.WallarmDS.Badge,b=(e,t)=>"solid"===e||"outline"===e&&"slate"===t,g=e=>e.charAt(0).toUpperCase()+e.slice(1),_={title:"Status Indication/Badge",component:y,parameters:{layout:"centered",docs:{description:{component:"The status chip the rest of the family is built from — reach for the dedicated component when one exists (`HttpMethod`, `ResponseCode`, `Ip`, `Country`) rather than rebuilding it here, and for `Tag` when the chip is interactive. Colour carries the meaning, so choose it from what the value is rather than from what looks right on the page."}}},argTypes:{size:{control:"select",options:["medium","large"]},type:{control:"select",options:Object.values(c)},color:{control:"select",options:Object.values(i)},textVariant:{control:"select",options:["default","code"]},muted:{control:"boolean"}}};function S(t){return e("th",{className:"sb-annotation p-8 text-left",children:t},t)}function w(t){return e("tr",{children:Object.values(c).map(r=>e("td",{className:"p-8",children:b(r,t)?e(y,{type:r,color:t,muted:!0,children:g(t)}):null},r))},t)}function v(t){return e("th",{className:"sb-annotation p-8 text-left",children:t},t)}function N(t){let[r,n]=t;return e("tr",{children:Object.values(c).map(t=>e("td",{className:"p-8",children:e(y,{"data-testid":"badge",type:t,color:n,children:r})},t))},n)}function R(t){return e("th",{className:"sb-annotation p-8 text-left",children:t},t)}function E(r){let[n,a]=r;return t(o.Fragment,{children:[e("tr",{children:Object.values(c).map(t=>e("td",{className:"p-8",children:e(y,{"data-testid":"badge",type:t,color:a,children:n})},t))}),e("tr",{children:Object.values(c).map(r=>e("td",{className:"p-8",children:t(y,{"data-testid":"badge",type:r,color:a,children:[n,e(f,{})]})},r))}),e("tr",{children:Object.values(c).map(r=>e("td",{className:"p-8",children:t(y,{"data-testid":"badge",type:r,color:a,children:[e(p,{}),n]})},r))}),e("tr",{children:Object.values(c).map(r=>e("td",{className:"p-8",children:t(y,{"data-testid":"badge",type:r,color:a,children:[e(p,{}),n,e(f,{})]})},r))}),e("tr",{children:Object.values(c).map(t=>e("td",{className:"p-8",children:e(y,{"data-testid":"badge",type:t,color:a,variant:"dotted",children:n})},t))}),e("tr",{children:Object.values(c).map(r=>e("td",{className:"p-8",children:t(y,{"data-testid":"badge",type:r,color:a,variant:"dotted",children:[n,e(f,{})]})},r))}),e("tr",{children:Object.values(c).map(r=>e("td",{className:"p-8",children:t(y,{"data-testid":"badge",type:r,color:a,children:[n,e(m,{})]})},r))}),e("tr",{children:Object.values(c).map(t=>e("td",{className:"p-8",children:e(y,{"data-testid":"badge",type:t,color:a,children:e(p,{})})},t))}),s.includes(a)&&e("tr",{children:Object.values(c).map(t=>e("td",{className:"p-8",children:b(t,a)?e(y,{"data-testid":"badge",type:t,color:a,muted:!0,children:g(a)}):null},t))},a)]},a)}let O=[{name:"Basic",story:t=>{let r,n,a=(0,l.c)(4);return a[0]!==t?({...r}=t,a[0]=t,a[1]=r):r=a[1],a[2]!==r?(n=e(y,{...r,children:"Badge"}),a[2]=r,a[3]=n):n=a[3],n},meta:_},{name:"Dotted",story:t=>{let r,n,a=(0,l.c)(4);return a[0]!==t?({...r}=t,a[0]=t,a[1]=r):r=a[1],a[2]!==r?(n=e(y,{...r,variant:"dotted",children:"Badge"}),a[2]=r,a[3]=n):n=a[3],n},meta:_},{name:"Sizes",story:r=>{let n,a,o=(0,l.c)(4);return o[0]!==r?({...n}=r,o[0]=r,o[1]=n):n=o[1],o[2]!==n?(a=t(h,{align:"center",gap:8,children:[e(y,{...n,size:"small",children:"Small"}),e(y,{...n,size:"medium",children:"Medium"}),e(y,{...n,size:"large",children:"Large"})]}),o[2]=n,o[3]=a):a=o[3],a},meta:_},{name:"Types",story:r=>{let n,a,o=(0,l.c)(4);return o[0]!==r?({...n}=r,o[0]=r,o[1]=n):n=o[1],o[2]!==n?(a=t(h,{gap:8,children:[e(y,{...n,type:"solid",children:"Solid"}),e(y,{...n,type:"secondary",children:"Secondary"}),e(y,{...n,type:"outline",children:"Outline"}),e(y,{...n,type:"text",children:"Text"}),e(y,{...n,type:"text-color",children:"Text Color"})]}),o[2]=n,o[3]=a):a=o[3],a},meta:_},{name:"TextVariants",story:r=>{let n,a,o=(0,l.c)(4);return o[0]!==r?({...n}=r,o[0]=r,o[1]=n):n=o[1],o[2]!==n?(a=t(h,{gap:8,children:[e(y,{...n,textVariant:"default",children:"Default Text"}),e(y,{...n,textVariant:"code",children:"Code Text"})]}),o[2]=n,o[3]=a):a=o[3],a},meta:_},{name:"WithIconsLeft",story:r=>{let n,a,o,c,i,s,p,b,g,_,S,w,v=(0,l.c)(23);return v[0]!==r?({...n}=r,v[0]=r,v[1]=n):n=v[1],v[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(d,{size:"sm"}),v[2]=a):a=v[2],v[3]!==n?(o=t(y,{...n,children:[a,"Success"]}),v[3]=n,v[4]=o):o=v[4],v[5]===Symbol.for("react.memo_cache_sentinel")?(c=e(f,{size:"sm"}),v[5]=c):c=v[5],v[6]!==n?(i=t(y,{...n,children:[c,"Error"]}),v[6]=n,v[7]=i):i=v[7],v[8]===Symbol.for("react.memo_cache_sentinel")?(s=e(m,{size:"sm"}),v[8]=s):s=v[8],v[9]!==n?(p=t(y,{...n,children:[s,"Info"]}),v[9]=n,v[10]=p):p=v[10],v[11]===Symbol.for("react.memo_cache_sentinel")?(b=e(u,{size:"sm"}),v[11]=b):b=v[11],v[12]!==n?(g=t(y,{...n,children:[b,"Verified"]}),v[12]=n,v[13]=g):g=v[13],v[14]===Symbol.for("react.memo_cache_sentinel")?(_=e(d,{size:"sm"}),v[14]=_):_=v[14],v[15]!==n?(S=t(y,{...n,children:[_,"Complete"]}),v[15]=n,v[16]=S):S=v[16],v[17]!==S||v[18]!==o||v[19]!==i||v[20]!==p||v[21]!==g?(w=t(h,{gap:8,children:[o,i,p,g,S]}),v[17]=S,v[18]=o,v[19]=i,v[20]=p,v[21]=g,v[22]=w):w=v[22],w},meta:_},{name:"WithIconsRight",story:r=>{let n,a,o,c,i,s,p,b,g,_,S,w,v=(0,l.c)(23);return v[0]!==r?({...n}=r,v[0]=r,v[1]=n):n=v[1],v[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(d,{size:"sm"}),v[2]=a):a=v[2],v[3]!==n?(o=t(y,{...n,children:["Success",a]}),v[3]=n,v[4]=o):o=v[4],v[5]===Symbol.for("react.memo_cache_sentinel")?(c=e(f,{size:"sm"}),v[5]=c):c=v[5],v[6]!==n?(i=t(y,{...n,children:["Error",c]}),v[6]=n,v[7]=i):i=v[7],v[8]===Symbol.for("react.memo_cache_sentinel")?(s=e(m,{size:"sm"}),v[8]=s):s=v[8],v[9]!==n?(p=t(y,{...n,children:["Info",s]}),v[9]=n,v[10]=p):p=v[10],v[11]===Symbol.for("react.memo_cache_sentinel")?(b=e(u,{size:"sm"}),v[11]=b):b=v[11],v[12]!==n?(g=t(y,{...n,children:["Verified",b]}),v[12]=n,v[13]=g):g=v[13],v[14]===Symbol.for("react.memo_cache_sentinel")?(_=e(d,{size:"sm"}),v[14]=_):_=v[14],v[15]!==n?(S=t(y,{...n,children:["Complete",_]}),v[15]=n,v[16]=S):S=v[16],v[17]!==S||v[18]!==o||v[19]!==i||v[20]!==p||v[21]!==g?(w=t(h,{gap:8,children:[o,i,p,g,S]}),v[17]=S,v[18]=o,v[19]=i,v[20]=p,v[21]=g,v[22]=w):w=v[22],w},meta:_},{name:"IconsOnly",story:r=>{let n,a,o,c,i,s,p,b,g,_,S,w,v=(0,l.c)(23);return v[0]!==r?({...n}=r,v[0]=r,v[1]=n):n=v[1],v[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(d,{size:"sm"}),v[2]=a):a=v[2],v[3]!==n?(o=e(y,{...n,children:a}),v[3]=n,v[4]=o):o=v[4],v[5]===Symbol.for("react.memo_cache_sentinel")?(c=e(f,{size:"sm"}),v[5]=c):c=v[5],v[6]!==n?(i=e(y,{...n,children:c}),v[6]=n,v[7]=i):i=v[7],v[8]===Symbol.for("react.memo_cache_sentinel")?(s=e(m,{size:"sm"}),v[8]=s):s=v[8],v[9]!==n?(p=e(y,{...n,children:s}),v[9]=n,v[10]=p):p=v[10],v[11]===Symbol.for("react.memo_cache_sentinel")?(b=e(u,{size:"sm"}),v[11]=b):b=v[11],v[12]!==n?(g=e(y,{...n,children:b}),v[12]=n,v[13]=g):g=v[13],v[14]===Symbol.for("react.memo_cache_sentinel")?(_=e(d,{size:"sm"}),v[14]=_):_=v[14],v[15]!==n?(S=e(y,{...n,children:_}),v[15]=n,v[16]=S):S=v[16],v[17]!==S||v[18]!==o||v[19]!==i||v[20]!==p||v[21]!==g?(w=t(h,{gap:8,children:[o,i,p,g,S]}),v[17]=S,v[18]=o,v[19]=i,v[20]=p,v[21]=g,v[22]=w):w=v[22],w},meta:_},{name:"MutedVariants",story:()=>{let r,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=t("table",{className:"w-full",children:[e("thead",{children:e("tr",{children:Object.keys(c).map(S)})}),e("tbody",{children:s.map(w)})]}),n[0]=r):r=n[0],r},meta:_},{name:"MutedOutline",story:()=>{let t,r=(0,l.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"rounded-8 bg-bg-light-danger p-16 text-text-danger","data-testid":"muted-outline-host",children:e(y,{"data-testid":"muted-outline",type:"outline",color:"slate",muted:!0,children:"Muted outline"})}),r[0]=t):t=r[0],t},meta:_},{name:"ColorVariants",story:()=>{let r,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=t("table",{className:"w-full",children:[e("thead",{children:e("tr",{children:Object.keys(c).map(v)})}),e("tbody",{children:Object.entries(i).map(N)})]}),n[0]=r):r=n[0],r},meta:_},{name:"ContentVariants",story:()=>{let r,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=t("table",{className:"w-full",children:[e("thead",{children:e("tr",{children:Object.keys(c).map(R)})}),e("tbody",{children:Object.entries(i).map(E)})]}),n[0]=r):r=n[0],r},meta:_}];function $({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},a="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,l=()=>o.default.createElement(a,n),c={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,c)}return o.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},o.default.createElement("h2",{className:"text-sm mb-12"},e.name),o.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(o.default.createElement(window.WallarmDS.Root,null,O.map((e,t)=>o.default.createElement($,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,341 @@
+A full-width message pinned above the header, for something account- or system-wide. The test is whether it would still matter on another page: yes and it is a `Banner`, no and it is an `Alert`. There is no success variant — “it worked” is a `Toast` — and no `icon` prop either: the icon appears only when a `BannerIcon` is composed in.
+
+## Props as canvas attributes
+
+Use kebab-case attribute names. Pass non-string values through renderVals holes, including booleans. The full emitted API is in `components/index.d.ts`.
+
+| Attribute | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `variant` | `"primary" \| "secondary" \| "destructive" \| "info" \| "warning"` | no | `primary` | Visual variant of the banner |
+| `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.BannerClose` — `BannerCloseProps` in the declaration bundle.
+- `WallarmDS.BannerContent` — `BannerContentProps` in the declaration bundle.
+- `WallarmDS.BannerControls` — `BannerControlsProps` in the declaration bundle.
+- `WallarmDS.BannerDescription` — `BannerDescriptionProps` in the declaration bundle.
+- `WallarmDS.BannerIcon` — `BannerIconProps` in the declaration bundle.
+- `WallarmDS.BannerLink` — `BannerLinkProps` in the declaration bundle.
+- `WallarmDS.BannerTitle` — `BannerTitleProps` in the declaration bundle.
+
+## Stories
+
+### Default
+
+The playground — toggle the controls to compose a banner and see which parts are optional.
+
+Source: Banner/Banner.stories.tsx#Default
+
+### AllColors
+
+`primary` (dark) and `secondary` (light) are the neutral bars and carry no icon of their own; destructive, info and warning each bring one.
+
+Source: Banner/Banner.stories.tsx#AllColors
+
+### WithDescription
+
+A description earns its place by adding the consequence — here the node version the feature needs — never by restating the title.
+
+Source: Banner/Banner.stories.tsx#WithDescription
+
+### WithInlineLink
+
+A `BannerLink` inside the title, for when the action belongs in the sentence. Use the inline link or the trailing buttons, never both.
+
+Source: Banner/Banner.stories.tsx#WithInlineLink
+
+### LongText
+
+Two lines is the ceiling, after which the text truncates into a tooltip. One line is what to aim for.
+
+Source: Banner/Banner.stories.tsx#LongText
+
+### CustomIcon
+
+`BannerIcon`’s `icon` prop overrides the variant default, or gives `primary` and `secondary` the icon they otherwise lack — which is how an announcement gets its megaphone.
+
+Source: Banner/Banner.stories.tsx#CustomIcon
+
+### WithActions
+
+Trailing buttons in `BannerControls`, small and never solid, labelled with the verb that follows: “Renew”, not “Learn more”.
+
+Source: Banner/Banner.stories.tsx#WithActions
+
+### Closable
+
+`BannerClose` where the reader may dismiss it. Leave it off while the condition still holds, since a banner is meant to outlast a page view.
+
+Source: Banner/Banner.stories.tsx#Closable
+
+## Story sources
+
+### Banner/Banner.stories.tsx
+
+```tsx
+import { useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Megaphone } from '../../icons';
+import { Button } from '../Button';
+import { Banner, type BannerProps } from './Banner';
+import { BannerClose } from './BannerClose';
+import { BannerContent } from './BannerContent';
+import { BannerControls } from './BannerControls';
+import { BannerDescription } from './BannerDescription';
+import { BannerIcon } from './BannerIcon';
+import { BannerLink } from './BannerLink';
+import { BannerTitle } from './BannerTitle';
+
+const DESCRIPTION = [
+  'A full-width message pinned above the header, for something account- or system-wide. The test is whether it would still matter on another page: yes and it is a `Banner`, no and it is an `Alert`.',
+  'There is no success variant — “it worked” is a `Toast` — and no `icon` prop either: the icon appears only when a `BannerIcon` is composed in.',
+].join(' ');
+
+const meta = {
+  title: 'Messaging/Banner',
+  component: Banner,
+  subcomponents: {
+    BannerClose,
+    BannerContent,
+    BannerControls,
+    BannerDescription,
+    BannerIcon,
+    BannerLink,
+    BannerTitle,
+  },
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'destructive', 'info', 'warning'],
+      description: 'Visual variant of the banner',
+    },
+  },
+} satisfies Meta<typeof Banner>;
+
+export default meta;
+
+interface BannerControlArgs extends BannerProps {
+  customIcon: boolean;
+  description: boolean;
+  inlineAction: boolean;
+  actions: boolean;
+  closable: boolean;
+  title: string;
+  text: string;
+}
+
+/** The playground — toggle the controls to compose a banner and see which parts are optional. */
+export const Default: StoryFn<BannerControlArgs> = ({
+  variant,
+  customIcon,
+  description,
+  inlineAction,
+  actions,
+  closable,
+  title,
+  text,
+}) => (
+  <Banner variant={variant}>
+    <BannerIcon
+      icon={customIcon ? <Megaphone size='lg' className='text-icon-brand' /> : undefined}
+    />
+    <BannerContent>
+      <BannerTitle action={inlineAction ? <BannerLink href='#'>Action</BannerLink> : undefined}>
+        {title}
+      </BannerTitle>
+      {description && <BannerDescription>{text}</BannerDescription>}
+    </BannerContent>
+    {(actions || closable) && (
+      <BannerControls>
+        {actions && (
+          <Button variant='secondary' color='neutral' size='small'>
+            Button
+          </Button>
+        )}
+        {closable && <BannerClose />}
+      </BannerControls>
+    )}
+  </Banner>
+);
+
+Default.args = {
+  variant: 'info',
+  customIcon: false,
+  description: false,
+  inlineAction: false,
+  actions: false,
+  closable: false,
+  title: 'Message goes here',
+  text: 'Description goes here',
+};
+
+Default.argTypes = {
+  customIcon: {
+    control: 'boolean',
+    description: 'Override with a custom icon',
+  },
+  description: { control: 'boolean', description: 'Show the description line' },
+  inlineAction: {
+    control: 'boolean',
+    description: 'Show an inline action link in the title',
+  },
+  actions: { control: 'boolean', description: 'Show a trailing action button' },
+  closable: { control: 'boolean', description: 'Show the close button' },
+  title: { control: 'text', description: 'Title (message) text' },
+  text: { control: 'text', description: 'Description text' },
+};
+
+/** `primary` (dark) and `secondary` (light) are the neutral bars and carry no icon of their own; destructive, info and warning each bring one. */
+export const AllColors: StoryFn<BannerProps> = () => (
+  <div className='flex flex-col gap-16'>
+    <Banner variant='primary'>
+      <BannerContent>
+        <BannerTitle>Message goes here</BannerTitle>
+      </BannerContent>
+    </Banner>
+
+    <Banner variant='secondary'>
+      <BannerContent>
+        <BannerTitle>Message goes here</BannerTitle>
+      </BannerContent>
+    </Banner>
+
+    <Banner variant='destructive'>
+      <BannerIcon />
+      <BannerContent>
+        <BannerTitle>Message goes here</BannerTitle>
+      </BannerContent>
+    </Banner>
+
+    <Banner variant='info'>
+      <BannerIcon />
+      <BannerContent>
+        <BannerTitle>Message goes here</BannerTitle>
+      </BannerContent>
+    </Banner>
+
+    <Banner variant='warning'>
+      <BannerIcon />
+      <BannerContent>
+        <BannerTitle>Message goes here</BannerTitle>
+      </BannerContent>
+    </Banner>
+  </div>
+);
+
+/** A description earns its place by adding the consequence — here the node version the feature needs — never by restating the title. */
+export const WithDescription: StoryFn<BannerProps> = () => (
+  <Banner variant='info'>
+    <BannerIcon />
+    <BannerContent>
+      <BannerTitle>Credential Stuffing Detection</BannerTitle>
+      <BannerDescription>
+        Credential Stuffing Detection requires Wallarm node version 4.10.3 or higher.
+      </BannerDescription>
+    </BannerContent>
+  </Banner>
+);
+
+/** A `BannerLink` inside the title, for when the action belongs in the sentence. Use the inline link or the trailing buttons, never both. */
+export const WithInlineLink: StoryFn<BannerProps> = () => (
+  <Banner variant='warning'>
+    <BannerIcon />
+    <BannerContent>
+      <BannerTitle action={<BannerLink href='#'>Learn more</BannerLink>}>
+        You have exceeded the monthly quota for your company
+      </BannerTitle>
+    </BannerContent>
+  </Banner>
+);
+
+/** Two lines is the ceiling, after which the text truncates into a tooltip. One line is what to aim for. */
+export const LongText: StoryFn<BannerProps> = () => (
+  <Banner variant='primary'>
+    <BannerContent>
+      <BannerTitle lineClamp={2}>
+        Banner will render at most two lines before truncating the text. Banners address system-wide
+        conditions, not individual user actions. The voice should be institutional and factual, even
+        when the situation is urgent. Every word must earn its place within the 2-line budget, but
+        one line is more preferred.
+      </BannerTitle>
+    </BannerContent>
+    <BannerControls>
+      <BannerClose />
+    </BannerControls>
+  </Banner>
+);
+
+/** `BannerIcon`’s `icon` prop overrides the variant default, or gives `primary` and `secondary` the icon they otherwise lack — which is how an announcement gets its megaphone. */
+export const CustomIcon: StoryFn<BannerProps> = () => (
+  <Banner variant='secondary'>
+    <BannerIcon icon={<Megaphone size='lg' className='text-icon-brand' />} />
+    <BannerContent>
+      <BannerTitle action={<BannerLink href='#'>View plans</BannerLink>}>
+        New features are now available on the Pro plan
+      </BannerTitle>
+    </BannerContent>
+    <BannerControls>
+      <BannerClose />
+    </BannerControls>
+  </Banner>
+);
+
+/** Trailing buttons in `BannerControls`, small and never solid, labelled with the verb that follows: “Renew”, not “Learn more”. */
+export const WithActions: StoryFn<BannerProps> = () => (
+  <Banner variant='destructive'>
+    <BannerIcon />
+    <BannerContent>
+      <BannerTitle>Your subscription has expired</BannerTitle>
+    </BannerContent>
+    <BannerControls>
+      <Button variant='outline' color='neutral' size='small'>
+        Dismiss
+      </Button>
+      <Button variant='outline' color='neutral' size='small'>
+        Renew
+      </Button>
+    </BannerControls>
+  </Banner>
+);
+
+/** `BannerClose` where the reader may dismiss it. Leave it off while the condition still holds, since a banner is meant to outlast a page view. */
+export const Closable: StoryFn<BannerProps> = () => {
+  const [open, setOpen] = useState(true);
+
+  if (!open) {
+    return (
+      <div className='p-16'>
+        <Button onClick={() => setOpen(true)}>Show banner</Button>
+      </div>
+    );
+  }
+
+  return (
+    <Banner variant='primary'>
+      <BannerContent>
+        <BannerTitle>A new version of the dashboard is available</BannerTitle>
+      </BannerContent>
+      <BannerControls>
+        <BannerClose onClick={() => setOpen(false)} />
+      </BannerControls>
+    </Banner>
+  );
+};
+```

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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,n){let r,o;/**
+ * 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,l,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,m=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty,f=(e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let o of u(t))d.call(e,o)||o===n||c(e,o,{get:()=>t[o],enumerable:!(r=s(t,o))||r.enumerable});return e},h={},p={$dispatcherGuard:()=>M,$makeReadOnly:()=>k,$reset:()=>D,$structuralCheck:()=>I,c:()=>R,clearRenderCounterRegistry:()=>x,renderCounterRegistry:()=>O,useRenderCounter:()=>T};for(var y in p)c(h,y,{get:p[y],enumerable:!0});e.exports=f(c({},"__esModule",{value:!0}),h);var _=(o=null!=(r=n("C"))?i(m(r)):{},f(r&&r.__esModule?o:c(o,"default",{value:r,enumerable:!0}),r)),{useRef:w,useEffect:b,isValidElement:g}=_,v=null!=(a=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?a:_.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,S=Symbol.for("react.memo_cache_sentinel"),R="function"==typeof(null==(l=_.__COMPILER_RUNTIME)?void 0:l.c)?_.__COMPILER_RUNTIME.c:function(e){return _.useMemo(()=>{let t=Array(e);for(let n=0;n<e;n++)t[n]=S;return t[S]=!0,t},[])},E={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{E[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var $=null;function C(e){return v.ReactCurrentDispatcher.current=e,v.ReactCurrentDispatcher.current}E.useMemoCache=e=>{if(null!=$)return $.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var N=[];function M(e){let t=v.ReactCurrentDispatcher.current;if(0===e){if(N.push(t),1===N.length&&($=t),t===E)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");C(E)}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&&($=null),C(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");C(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function D(e){for(let t=0;t<e.length;t++)e[t]=S}function k(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var O=new Map;function x(){for(let e of O.values())e.forEach(e=>{e.count=0})}function T(e){let t=w(null);null!=t.current&&(t.current.count+=1),b(()=>{if(null==t.current){let n,r={count:0};null==(n=O.get(e))&&(n=new Set,O.set(e,n)),n.add(r),t.current=r}return()=>{var n;let r;null!==t.current&&(n=t.current,null!=(r=O.get(e))&&r.delete(n))}})}var A=new Set;function I(e,t,n,r,o,a){function l(e,t,l,i){let c=`${r}:${a} [${o}] ${n}${l} changed from ${e} to ${t} at depth ${i}`;A.has(c)||(A.add(c),console.error(c))}!function e(t,n,r,o){if(!(o>2)){if(t!==n)if(typeof t!=typeof n)l(`type ${typeof t}`,`type ${typeof n}`,r,o);else if("object"==typeof t){let a=Array.isArray(t),i=Array.isArray(n);if(null===t&&null!==n)l("null",`type ${typeof n}`,r,o);else if(null===n)l(`type ${typeof t}`,"null",r,o);else if(t instanceof Map)if(n instanceof Map)if(t.size!==n.size)l(`Map instance with size ${t.size}`,`Map instance with size ${n.size}`,r,o);else for(let[a,i]of t)n.has(a)?e(i,n.get(a),`${r}.get(${a})`,o+1):l(`Map instance with key ${a}`,`Map instance without key ${a}`,r,o);else l("Map instance","other value",r,o);else if(n instanceof Map)l("other value","Map instance",r,o);else if(t instanceof Set)if(n instanceof Set)if(t.size!==n.size)l(`Set instance with size ${t.size}`,`Set instance with size ${n.size}`,r,o);else for(let e of n)t.has(e)||l(`Set instance without element ${e}`,`Set instance with element ${e}`,r,o);else l("Set instance","other value",r,o);else if(n instanceof Set)l("other value","Set instance",r,o);else if(a||i)if(a!==i)l(`type ${a?"array":"object"}`,`type ${i?"array":"object"}`,r,o);else if(t.length!==n.length)l(`array with length ${t.length}`,`array with length ${n.length}`,r,o);else for(let a=0;a<t.length;a++)e(t[a],n[a],`${r}[${a}]`,o+1);else if(g(t)||g(n))g(t)!==g(n)?l(`type ${g(t)?"React element":"object"}`,`type ${g(n)?"React element":"object"}`,r,o):t.type!==n.type?l(`React element of type ${t.type}`,`React element of type ${n.type}`,r,o):e(t.props,n.props,`[props of ${r}]`,o+1);else{for(let e in n)e in t||l(`object without key ${e}`,`object with key ${e}`,r,o);for(let a in t)a in n?e(t[a],n[a],`${r}.${a}`,o+1):l(`object with key ${a}`,`object without key ${a}`,r,o)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(n)?isNaN(t)!==isNaN(n)&&l(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(n)?"NaN":"non-NaN value"}`,r,o):t!==n&&l(t,n,r,o)}}}(e,t,"",0)}},p(e,t,n){let r=new WeakMap,o=new WeakMap;function a(e,t,n){let a=t,l=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!=l.ref&&!a.prototype?.isReactComponent){let t=a,n=r.get(e);n||(n=new WeakMap,r.set(e,n));let o=n.get(t);o||((o=e.forwardRef((e,n)=>t({...e,ref:n}))).displayName=t.displayName??t.name,n.set(t,o)),a=o}if("string"==typeof a&&"boolean"==typeof l.inert&&((l={...l}).inert?l.inert="":delete l.inert),"string"==typeof a)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 a&&null!=l.ref&&(a=function(e,t){let n=o.get(e);n||(n=new Map,o.set(e,n));let r=n.get(t);if(r)return r;let a=e.forwardRef((n,r)=>{let o=e.useRef(null);if(!o.current||o.current.original!==r){let e;o.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:o.current.callback})});return a.displayName=`CanvasHost(${t})`,n.set(t,a),a}(e,a)),{type:a,props:l}}function l(e){let t=(t,n,r)=>{let o=a(e,t,n??{});return e.createElement(o.type,void 0===r?o.props:{...o.props,key:r})};return{jsx:t,jsxs:(t,n,r)=>{let o=a(e,t,n??{}),{children:l,...i}=o.props;return e.createElement(o.type,void 0===r?i:{...i,key:r},...Array.isArray(l)?l:[l])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,n,...r)=>{let o=a(e,t,n??{});return e.createElement(o.type,o.props,...r)},cloneElement:(t,n,...r)=>{let o=e.cloneElement(t,n??void 0,...r),l=o.ref,i=a(e,o.type,{...o.props,ref:l});return i.type===o.type&&"string"!=typeof o.type?o:e.createElement(i.type,{...i.props,key:o.key})}}}n.d(t,{MA:()=>l,YJ:()=>i})},C(e,t,n){n.r(t);let r=(0,n("p").YJ)(window.React),{Children:o,Component:a,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:d,cloneElement:f,createContext:h,createElement:p,createFactory:y,createRef:_,forwardRef:w,isValidElement:b,lazy:g,memo:v,startTransition:S,unstable_act:R,useCallback:E,useContext:$,useDebugValue:C,useDeferredValue:N,useEffect:M,useId:D,useImperativeHandle:k,useInsertionEffect:O,useLayoutEffect:x,useMemo:T,useReducer:A,useRef:I,useState:j,useSyncExternalStore:W,useTransition:z,version:P,use:B}=r;n.d(t,{},{Children:o,Component:a,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:d,cloneElement:f,createContext:h,createElement:p,createFactory:y,createRef:_,default:r,forwardRef:w,isValidElement:b,lazy:g,memo:v,startTransition:S,unstable_act:R,use:B,useCallback:E,useContext:$,useDebugValue:C,useDeferredValue:N,useEffect:M,useId:D,useImperativeHandle:k,useInsertionEffect:O,useLayoutEffect:x,useMemo:T,useReducer:A,useRef:I,useState:j,useSyncExternalStore:W,useTransition:z,version:P})}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var a=t[r]={exports:{}};return e[r](a,a.exports,n),a.exports}n.d=(e,t,r)=>{var o=(t,r)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,[r]:t[o]})};o(t,"get"),o(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:o}=(0,n("p").MA)(window.React);var a=n("vD"),l=n("C");let i=window.WallarmDS.Icons.Megaphone,c=window.WallarmDS.Button,s=window.WallarmDS.Banner,u=window.WallarmDS.BannerClose,m=window.WallarmDS.BannerContent,d=window.WallarmDS.BannerControls,f=window.WallarmDS.BannerDescription,h=window.WallarmDS.BannerIcon,p=window.WallarmDS.BannerLink,y=window.WallarmDS.BannerTitle,_={title:"Messaging/Banner",component:s,subcomponents:{BannerClose:u,BannerContent:m,BannerControls:d,BannerDescription:f,BannerIcon:h,BannerLink:p,BannerTitle:y},parameters:{layout:"fullscreen",docs:{description:{component:"A full-width message pinned above the header, for something account- or system-wide. The test is whether it would still matter on another page: yes and it is a `Banner`, no and it is an `Alert`. There is no success variant — “it worked” is a `Toast` — and no `icon` prop either: the icon appears only when a `BannerIcon` is composed in."}}},argTypes:{variant:{control:{type:"select"},options:["primary","secondary","destructive","info","warning"],description:"Visual variant of the banner"}}},w=n=>{let r,o,l,_,w,b,g,v,S=(0,a.c)(23),{variant:R,customIcon:E,description:$,inlineAction:C,actions:N,closable:M,title:D,text:k}=n;return S[0]!==E?(r=E?e(i,{size:"lg",className:"text-icon-brand"}):void 0,S[0]=E,S[1]=r):r=S[1],S[2]!==r?(o=e(h,{icon:r}),S[2]=r,S[3]=o):o=S[3],S[4]!==C?(l=C?e(p,{href:"#",children:"Action"}):void 0,S[4]=C,S[5]=l):l=S[5],S[6]!==l||S[7]!==D?(_=e(y,{action:l,children:D}),S[6]=l,S[7]=D,S[8]=_):_=S[8],S[9]!==$||S[10]!==k?(w=$&&e(f,{children:k}),S[9]=$,S[10]=k,S[11]=w):w=S[11],S[12]!==_||S[13]!==w?(b=t(m,{children:[_,w]}),S[12]=_,S[13]=w,S[14]=b):b=S[14],S[15]!==N||S[16]!==M?(g=(N||M)&&t(d,{children:[N&&e(c,{variant:"secondary",color:"neutral",size:"small",children:"Button"}),M&&e(u,{})]}),S[15]=N,S[16]=M,S[17]=g):g=S[17],S[18]!==o||S[19]!==b||S[20]!==g||S[21]!==R?(v=t(s,{variant:R,children:[o,b,g]}),S[18]=o,S[19]=b,S[20]=g,S[21]=R,S[22]=v):v=S[22],v};w.args={variant:"info",customIcon:!1,description:!1,inlineAction:!1,actions:!1,closable:!1,title:"Message goes here",text:"Description goes here"},w.argTypes={customIcon:{control:"boolean",description:"Override with a custom icon"},description:{control:"boolean",description:"Show the description line"},inlineAction:{control:"boolean",description:"Show an inline action link in the title"},actions:{control:"boolean",description:"Show a trailing action button"},closable:{control:"boolean",description:"Show the close button"},title:{control:"text",description:"Title (message) text"},text:{control:"text",description:"Description text"}};let b=[{name:"Default",story:w,meta:_},{name:"AllColors",story:()=>{let n,r,o,l,i,c,u,d,f=(0,a.c)(8);return f[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(s,{variant:"primary",children:e(m,{children:e(y,{children:"Message goes here"})})}),f[0]=n):n=f[0],f[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(s,{variant:"secondary",children:e(m,{children:e(y,{children:"Message goes here"})})}),f[1]=r):r=f[1],f[2]===Symbol.for("react.memo_cache_sentinel")?(o=e(h,{}),f[2]=o):o=f[2],f[3]===Symbol.for("react.memo_cache_sentinel")?(l=t(s,{variant:"destructive",children:[o,e(m,{children:e(y,{children:"Message goes here"})})]}),f[3]=l):l=f[3],f[4]===Symbol.for("react.memo_cache_sentinel")?(i=e(h,{}),f[4]=i):i=f[4],f[5]===Symbol.for("react.memo_cache_sentinel")?(c=t(s,{variant:"info",children:[i,e(m,{children:e(y,{children:"Message goes here"})})]}),f[5]=c):c=f[5],f[6]===Symbol.for("react.memo_cache_sentinel")?(u=e(h,{}),f[6]=u):u=f[6],f[7]===Symbol.for("react.memo_cache_sentinel")?(d=t("div",{className:"flex flex-col gap-16",children:[n,r,l,c,t(s,{variant:"warning",children:[u,e(m,{children:e(y,{children:"Message goes here"})})]})]}),f[7]=d):d=f[7],d},meta:_},{name:"WithDescription",story:()=>{let n,r,o=(0,a.c)(2);return o[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(h,{}),o[0]=n):n=o[0],o[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(s,{variant:"info",children:[n,t(m,{children:[e(y,{children:"Credential Stuffing Detection"}),e(f,{children:"Credential Stuffing Detection requires Wallarm node version 4.10.3 or higher."})]})]}),o[1]=r):r=o[1],r},meta:_},{name:"WithInlineLink",story:()=>{let n,r,o=(0,a.c)(2);return o[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(h,{}),o[0]=n):n=o[0],o[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(s,{variant:"warning",children:[n,e(m,{children:e(y,{action:e(p,{href:"#",children:"Learn more"}),children:"You have exceeded the monthly quota for your company"})})]}),o[1]=r):r=o[1],r},meta:_},{name:"LongText",story:()=>{let n,r,o=(0,a.c)(2);return o[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(m,{children:e(y,{lineClamp:2,children:"Banner will render at most two lines before truncating the text. Banners address system-wide conditions, not individual user actions. The voice should be institutional and factual, even when the situation is urgent. Every word must earn its place within the 2-line budget, but one line is more preferred."})}),o[0]=n):n=o[0],o[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(s,{variant:"primary",children:[n,e(d,{children:e(u,{})})]}),o[1]=r):r=o[1],r},meta:_},{name:"CustomIcon",story:()=>{let n,r,o,l=(0,a.c)(3);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(h,{icon:e(i,{size:"lg",className:"text-icon-brand"})}),l[0]=n):n=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(m,{children:e(y,{action:e(p,{href:"#",children:"View plans"}),children:"New features are now available on the Pro plan"})}),l[1]=r):r=l[1],l[2]===Symbol.for("react.memo_cache_sentinel")?(o=t(s,{variant:"secondary",children:[n,r,e(d,{children:e(u,{})})]}),l[2]=o):o=l[2],o},meta:_},{name:"WithActions",story:()=>{let n,r,o,l=(0,a.c)(3);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(h,{}),l[0]=n):n=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(m,{children:e(y,{children:"Your subscription has expired"})}),l[1]=r):r=l[1],l[2]===Symbol.for("react.memo_cache_sentinel")?(o=t(s,{variant:"destructive",children:[n,r,t(d,{children:[e(c,{variant:"outline",color:"neutral",size:"small",children:"Dismiss"}),e(c,{variant:"outline",color:"neutral",size:"small",children:"Renew"})]})]}),l[2]=o):o=l[2],o},meta:_},{name:"Closable",story:()=>{let n,r,o=(0,a.c)(3),[i,f]=(0,l.useState)(!0);if(!i){let t;return o[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"p-16",children:e(c,{onClick:()=>f(!0),children:"Show banner"})}),o[0]=t):t=o[0],t}return o[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(m,{children:e(y,{children:"A new version of the dashboard is available"})}),o[1]=n):n=o[1],o[2]===Symbol.for("react.memo_cache_sentinel")?(r=t(s,{variant:"primary",children:[n,e(d,{children:e(u,{onClick:()=>f(!1)})})]}),o[2]=r):r=o[2],r},meta:_}];function g({entry:e}){let{story:t,meta:n}=e,r={...n.args,...t.args},o="function"==typeof t||t.$$typeof?t:t.render||n.render||n.component,a=()=>l.default.createElement(o,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 l.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},l.default.createElement("h2",{className:"text-sm mb-12"},e.name),l.default.createElement(a))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(l.default.createElement(window.WallarmDS.Root,null,b.map((e,t)=>l.default.createElement(g,{key:t,entry:e})))),t}}})();