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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,a;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var l,i,o=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,p=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,m=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of d(t))u.call(e,a)||a===r||c(e,a,{get:()=>t[a],enumerable:!(n=s(t,a))||n.enumerable});return e},h={},f={$dispatcherGuard:()=>x,$makeReadOnly:()=>k,$reset:()=>D,$structuralCheck:()=>W,c:()=>C,clearRenderCounterRegistry:()=>O,renderCounterRegistry:()=>T,useRenderCounter:()=>I};for(var y in f)c(h,y,{get:f[y],enumerable:!0});e.exports=m(c({},"__esModule",{value:!0}),h);var S=(a=null!=(n=r("C"))?o(p(n)):{},m(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:g,useEffect:w,isValidElement:b}=S,_=null!=(l=S.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:S.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),C="function"==typeof(null==(i=S.__COMPILER_RUNTIME)?void 0:i.c)?S.__COMPILER_RUNTIME.c:function(e){return S.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 N=null;function E(e){return _.ReactCurrentDispatcher.current=e,_.ReactCurrentDispatcher.current}R.useMemoCache=e=>{if(null!=N)return N.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var $=[];function x(e){let t=_.ReactCurrentDispatcher.current;if(0===e){if($.push(t),1===$.length&&(N=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.");E(R)}else if(1===e){let e=$.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===$.length&&(N=null),E(e)}else if(2===e)$.push(t),E(N);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 D(e){for(let t=0;t<e.length;t++)e[t]=v}function k(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var T=new Map;function O(){for(let e of T.values())e.forEach(e=>{e.count=0})}function I(e){let t=g(null);null!=t.current&&(t.current.count+=1),w(()=>{if(null==t.current){let r,n={count:0};null==(r=T.get(e))&&(r=new Set,T.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=T.get(e))&&n.delete(r))}})}var M=new Set;function W(e,t,r,n,a,l){function i(e,t,i,o){let c=`${n}:${l} [${a}] ${r}${i} changed from ${e} to ${t} at depth ${o}`;M.has(c)||(M.add(c),console.error(c))}!function e(t,r,n,a){if(!(a>2)){if(t!==r)if(typeof t!=typeof r)i(`type ${typeof t}`,`type ${typeof r}`,n,a);else if("object"==typeof t){let l=Array.isArray(t),o=Array.isArray(r);if(null===t&&null!==r)i("null",`type ${typeof r}`,n,a);else if(null===r)i(`type ${typeof t}`,"null",n,a);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)i(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,a);else for(let[l,o]of t)r.has(l)?e(o,r.get(l),`${n}.get(${l})`,a+1):i(`Map instance with key ${l}`,`Map instance without key ${l}`,n,a);else i("Map instance","other value",n,a);else if(r instanceof Map)i("other value","Map instance",n,a);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)i(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,a);else for(let e of r)t.has(e)||i(`Set instance without element ${e}`,`Set instance with element ${e}`,n,a);else i("Set instance","other value",n,a);else if(r instanceof Set)i("other value","Set instance",n,a);else if(l||o)if(l!==o)i(`type ${l?"array":"object"}`,`type ${o?"array":"object"}`,n,a);else if(t.length!==r.length)i(`array with length ${t.length}`,`array with length ${r.length}`,n,a);else for(let l=0;l<t.length;l++)e(t[l],r[l],`${n}[${l}]`,a+1);else if(b(t)||b(r))b(t)!==b(r)?i(`type ${b(t)?"React element":"object"}`,`type ${b(r)?"React element":"object"}`,n,a):t.type!==r.type?i(`React element of type ${t.type}`,`React element of type ${r.type}`,n,a):e(t.props,r.props,`[props of ${n}]`,a+1);else{for(let e in r)e in t||i(`object without key ${e}`,`object with key ${e}`,n,a);for(let l in t)l in r?e(t[l],r[l],`${n}.${l}`,a+1):i(`object with key ${l}`,`object without key ${l}`,n,a)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&i(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,a):t!==r&&i(t,r,n,a)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,a=new WeakMap;function l(e,t,r){let l=t,i=r;if("object"==typeof l&&null!==l&&"$$typeof"in l&&l.$$typeof===Symbol.for("react.context")&&"Provider"in l&&(l=l.Provider),"function"==typeof l&&null!=i.ref&&!l.prototype?.isReactComponent){let t=l,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let a=r.get(t);a||((a=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,a)),l=a}if("string"==typeof l&&"boolean"==typeof i.inert&&((i={...i}).inert?i.inert="":delete i.inert),"string"==typeof l)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in i&&(i={...i,[t]:i[e]},delete i[e]);return"string"==typeof l&&null!=i.ref&&(l=function(e,t){let r=a.get(e);r||(r=new Map,a.set(e,r));let n=r.get(t);if(n)return n;let l=e.forwardRef((r,n)=>{let a=e.useRef(null);if(!a.current||a.current.original!==n){let e;a.current={original:n,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof n){let r=n(t);e="function"==typeof r?r:void 0}else n&&(n.current=t)}}}return e.createElement(t,{...r,ref:a.current.callback})});return l.displayName=`CanvasHost(${t})`,r.set(t,l),l}(e,l)),{type:l,props:i}}function i(e){let t=(t,r,n)=>{let a=l(e,t,r??{});return e.createElement(a.type,void 0===n?a.props:{...a.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let a=l(e,t,r??{}),{children:i,...o}=a.props;return e.createElement(a.type,void 0===n?o:{...o,key:n},...Array.isArray(i)?i:[i])},jsxDEV:t,Fragment:e.Fragment}}function o(e){return{...e,createElement:(t,r,...n)=>{let a=l(e,t,r??{});return e.createElement(a.type,a.props,...n)},cloneElement:(t,r,...n)=>{let a=e.cloneElement(t,r??void 0,...n),i=a.ref,o=l(e,a.type,{...a.props,ref:i});return o.type===a.type&&"string"!=typeof a.type?a:e.createElement(o.type,{...o.props,key:a.key})}}}r.d(t,{MA:()=>i,YJ:()=>o})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:a,Component:l,Fragment:i,Profiler:o,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:p,act:u,cloneElement:m,createContext:h,createElement:f,createFactory:y,createRef:S,forwardRef:g,isValidElement:w,lazy:b,memo:_,startTransition:v,unstable_act:C,useCallback:R,useContext:N,useDebugValue:E,useDeferredValue:$,useEffect:x,useId:D,useImperativeHandle:k,useInsertionEffect:T,useLayoutEffect:O,useMemo:I,useReducer:M,useRef:W,useState:P,useSyncExternalStore:A,useTransition:j,version:L,use:z}=n;r.d(t,{},{Children:a,Component:l,Fragment:i,Profiler:o,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:p,act:u,cloneElement:m,createContext:h,createElement:f,createFactory:y,createRef:S,default:n,forwardRef:g,isValidElement:w,lazy:b,memo:_,startTransition:v,unstable_act:C,use:z,useCallback:R,useContext:N,useDebugValue:E,useDeferredValue:$,useEffect:x,useId:D,useImperativeHandle:k,useInsertionEffect:T,useLayoutEffect:O,useMemo:I,useReducer:M,useRef:W,useState:P,useSyncExternalStore:A,useTransition:j,version:L})}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var l=t[n]={exports:{}};return e[n](l,l.exports,r),l.exports}r.d=(e,t,n)=>{var a=(t,n)=>{for(var a in t)r.o(t,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,[n]:t[a]})};a(t,"get"),a(n,"value")},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:n,Fragment:a}=(0,r("p").MA)(window.React);var l=r("vD"),i=r("C");let o=window.WallarmDS.Icons.Lock,c=window.WallarmDS.Button,s=window.WallarmDS.Drawer,d=window.WallarmDS.DrawerBody,p=window.WallarmDS.DrawerContent,u=window.WallarmDS.DrawerFooter,m=window.WallarmDS.DrawerFooterControls,h=window.WallarmDS.DrawerHeader,f=window.WallarmDS.DrawerTitle,y=window.WallarmDS.DrawerTrigger,S=window.WallarmDS.HStack,g=window.WallarmDS.VStack,w=window.WallarmDS.Text,b=window.WallarmDS.Stepper,_=window.WallarmDS.StepperContent,v=window.WallarmDS.StepperDescription,C=window.WallarmDS.StepperIndicator,R=window.WallarmDS.StepperItem,N=window.WallarmDS.StepperList,E=window.WallarmDS.StepperNextTrigger,$=window.WallarmDS.StepperPrevTrigger,x=window.WallarmDS.StepperSeparator,D=window.WallarmDS.StepperTitle,k=window.WallarmDS.StepperTrigger,T={title:"Navigation/Stepper",component:b,subcomponents:{StepperList:N,StepperItem:R,StepperTrigger:k,StepperIndicator:C,StepperTitle:D,StepperDescription:v,StepperSeparator:x,StepperContent:_,StepperPrevTrigger:$,StepperNextTrigger:E},parameters:{layout:"padded",docs:{description:{component:"A horizontal row of numbered steps for a flow that is split into a few screens, such as a create drawer — it shows where the reader is and lets them jump to any step. It is compound, like Ark UI Steps: `count` on the root and `index` on every `StepperItem` and `StepperContent` are explicit. `StepperContent` shows the current step’s body, and `StepperPrevTrigger` / `StepperNextTrigger` move between steps; Next stops at the last step, where the page renders its own submit button. It never blocks a step: the page owns each step’s `status` (`completed`, `danger`, `upcoming`), and the current step always renders as active. Reach for `Timeline` for a history of events, `Tour` for guided onboarding, `Progress` for how far along a task is, and `Tabs` for sections that have no order."}}},argTypes:{count:{control:{type:"number",min:1,max:6},description:"Number of steps, 1–6. Required. In Basic it also sets how many steps render."},step:{control:"number",description:"Controlled current step, 0-based."},defaultStep:{control:"number",description:"Uncontrolled initial step. Default 0."},statusLabels:{control:"object",description:"Screen-reader-only suffixes for completed and danger steps."}}},O=["General","Rules","Scope","Review"],I=t=>{let r,n,a,i,o,c=(0,l.c)(11);return(c[0]!==t?({count:n,...r}=t,c[0]=t,c[1]=r,c[2]=n):(r=c[1],n=c[2]),c[3]!==n)?(a=Array.from({length:n},(e,t)=>O[t]??`Step ${t+1}`).map(F),c[3]=n,c[4]=a):a=c[4],c[5]!==a?(i=e(N,{"aria-label":"Create policy steps",children:a}),c[5]=a,c[6]=i):i=c[6],c[7]!==r||c[8]!==n||c[9]!==i?(o=e(b,{"data-testid":"stepper",defaultStep:0,...r,count:n,children:i}),c[7]=r,c[8]=n,c[9]=i,c[10]=o):o=c[10],o};I.args={count:O.length};let M=[{title:"General",status:"completed"},{title:"Rules",status:"danger"},{title:"Scope",status:"danger"},{title:"Review",status:"upcoming"}],W=[{type:"completed",status:"completed"},{type:"danger",status:"danger"},{type:"active",status:void 0},{type:"upcoming",status:"upcoming"}],P=[{title:"General",status:"completed"},{title:"Rules",description:"Request · Lua · HMAC auth"},{title:"Scope",description:"Optional"},{title:"Review"}],A=()=>{let e,t,r,n=(0,l.c)(7),[a,o]=(0,i.useState)(0);n[0]===Symbol.for("react.memo_cache_sentinel")?(e=O.map(q),n[0]=e):e=n[0];let[c,s]=(0,i.useState)(e);n[1]!==a?(t=e=>{s(e=>e.map((e,t)=>t===a?1===t?"danger":"completed":e)),o(e)},n[1]=a,n[2]=t):t=n[2];let d=t;return n[3]!==d||n[4]!==c||n[5]!==a?(r={step:a,statuses:c,goTo:d},n[3]=d,n[4]=c,n[5]=a,n[6]=r):r=n[6],r},j=e=>{let t,r,n=(0,l.c)(3),a=(0,i.useRef)(null),o=(0,i.useRef)(!1);n[0]===Symbol.for("react.memo_cache_sentinel")?(t=e=>{e&&o.current&&(o.current=!1,e.focus())},n[0]=t):t=n[0];let c=t;return n[1]!==e?(r={nextRef:a,submitRef:c,onBackClick:()=>{1===e&&a.current?.focus()},onNextClick:()=>{o.current=e===O.length-2}},n[1]=e,n[2]=r):r=n[2],r},L=t=>{let r,n=(0,l.c)(2),{label:a}=t;return n[0]!==a?(r=e("div",{className:"flex h-200 w-full items-center justify-center rounded-12 bg-bg-surface-5",children:e(w,{size:"sm",color:"secondary",children:a})}),n[0]=a,n[1]=r):r=n[1],r},z=["General","Conditions","Actions","Notifications","Schedule","Review"],U=t=>{let r,n,a=(0,l.c)(3),{testId:i}=t;return a[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(N,{"aria-label":"Create trigger steps",children:z.map(K)}),a[0]=r):r=a[0],a[1]!==i?(n=e(b,{"data-testid":i,count:z.length,defaultStep:2,children:r}),a[1]=i,a[2]=n):n=a[2],n},B=O.map((e,t)=>({title:e,analyticsId:`POLICY_STEP_${e.toUpperCase()}`,analyticsProps:JSON.stringify({flow:"create-policy",step:t}),testId:3===t?"step-review":`stepper--item-${t}--trigger`}));function F(r,n){return t(R,{index:n,children:[t(k,{children:[e(C,{}),e(D,{children:r})]}),e(x,{})]},r)}function Y(r,n){let{title:a,status:l}=r;return t(R,{index:n,status:l,children:[t(k,{children:[e(C,{}),e(D,{children:a})]}),e(x,{})]},a)}function G(r){let{type:n,status:a}=r;return t(g,{gap:4,align:"start",children:[e(b,{"data-testid":`stepper-type-${n}`,count:"active"===n?1:2,step:0,children:e(N,{className:"p-0","aria-label":`${n} step`,children:t(R,{index:+("active"!==n),status:a,children:[t(k,{children:[e(C,{}),e(D,{children:"Step"})]}),e(x,{})]})})}),e("span",{className:"sb-annotation",children:n})]},n)}function H(r,n){let{title:a,description:l,status:i}=r;return t(R,{index:n,status:i,children:[t(k,{children:[e(C,{}),e(D,{children:a}),l&&e(v,{children:l})]}),e(x,{})]},a)}function V(r,n){return t(R,{index:n,children:[t(k,{children:[e(C,{}),e(D,{children:r})]}),e(x,{})]},r)}function q(){return"upcoming"}function J(e){return e+1}function X(t,r){return e(_,{index:r,className:"py-16",children:e(L,{label:`${t} fields`})},t)}function K(r,n){return t(R,{index:n,status:n<2?"completed":"upcoming",children:[t(k,{children:[e(C,{}),e(D,{children:r})]}),e(x,{})]},r)}function Z(e){return e.preventDefault()}function Q(t,r){return e(_,{index:r,className:"px-24 py-16",children:e(L,{label:`${t} fields`})},t)}function ee(r,n){return t(R,{index:n,children:[t(k,{children:[e(C,{children:2===n?e(o,{size:"sm"}):void 0}),e(D,{children:r})]}),e(x,{})]},r)}function et(r,n){let{title:a,analyticsId:l,analyticsProps:i,testId:o}=r;return t(R,{index:n,children:[t(k,{"data-analytics-id":l,"data-analytics-props":i,..."step-review"===o&&{"data-testid":o},children:[e(C,{}),e(D,{children:a})]}),e(x,{})]},a)}function er(t){let{title:r,analyticsId:n,analyticsProps:a,testId:l}=t;return e("span",{className:"sb-annotation",children:`<button> data-testid="${l}" data-analytics-id="${n}" data-analytics-props='${a}'`},r)}let en=[{name:"Basic",story:I,meta:T},{name:"StepTypes",story:()=>{let r,n,a=(0,l.c)(2);return a[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(b,{"data-testid":"stepper",count:M.length,step:2,children:e(N,{"aria-label":"Create policy steps",children:M.map(Y)})}),a[0]=r):r=a[0],a[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(g,{gap:24,children:[r,e(S,{gap:32,align:"center",children:W.map(G)})]}),a[1]=n):n=a[1],n},meta:T},{name:"WithDescription",story:()=>{let t,r=(0,l.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(b,{"data-testid":"stepper",count:P.length,defaultStep:1,children:e(N,{"aria-label":"Create policy steps",children:P.map(H)})}),r[0]=t):t=r[0],t},meta:T},{name:"Navigation",story:()=>{let r,n,a,o,c,s=(0,l.c)(9),[d,p]=(0,i.useState)(0);s[0]===Symbol.for("react.memo_cache_sentinel")?(r=e=>p(e.step),s[0]=r):r=s[0],s[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(N,{"aria-label":"Create policy steps",children:O.map(V)}),s[1]=n):n=s[1],s[2]!==d?(a=e(b,{"data-testid":"stepper",count:O.length,step:d,onStepChange:r,children:n}),s[2]=d,s[3]=a):a=s[3];let u=O[d];return s[4]!==u?(o=t("span",{className:"sb-annotation","data-testid":"stepper-readout",children:["Current step: ",u]}),s[4]=u,s[5]=o):o=s[5],s[6]!==a||s[7]!==o?(c=t(g,{gap:16,children:[a,o]}),s[6]=a,s[7]=o,s[8]=c):c=s[8],c},meta:T},{name:"InDrawer",story:()=>{let r,n,a,o,S,g,w,_,v,T,I,M,W=(0,l.c)(30),{step:P,statuses:L,goTo:z}=A(),{nextRef:U,submitRef:B,onBackClick:F,onNextClick:Y}=j(P),[G,H]=(0,i.useState)(0),V=P===O.length-1;W[0]===Symbol.for("react.memo_cache_sentinel")?(r=e=>{e.preventDefault(),H(J)},W[0]=r):r=W[0];let q=r;return W[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(y,{asChild:!0,children:e(c,{variant:"outline",color:"neutral","data-testid":"drawer-open",children:"Create policy"})}),W[1]=n):n=W[1],W[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(h,{children:e(f,{children:"Create policy"})}),W[2]=a):a=W[2],W[3]!==z?(o=e=>z(e.step),W[3]=z,W[4]=o):o=W[4],W[5]!==L?(S=O.map((r,n)=>t(R,{index:n,status:L[n],children:[t(k,{children:[e(C,{}),e(D,{children:r})]}),e(x,{})]},r)),W[5]=L,W[6]=S):S=W[6],W[7]!==S?(g=e(N,{"aria-label":"Create policy steps",children:S}),W[7]=S,W[8]=g):g=W[8],W[9]===Symbol.for("react.memo_cache_sentinel")?(w=O.map(X),W[9]=w):w=W[9],W[10]!==G?(_=t(d,{children:[w,t("span",{className:"sb-annotation","data-testid":"stepper-submitted",children:["Submitted: ",G]})]}),W[10]=G,W[11]=_):_=W[11],W[12]!==F||W[13]!==P?(v=P>0&&e(m,{placement:"left",children:e($,{asChild:!0,onClick:F,children:e(c,{variant:"outline",color:"neutral",size:"large",children:"Back"})})}),W[12]=F,W[13]=P,W[14]=v):v=W[14],W[15]!==V||W[16]!==U||W[17]!==Y||W[18]!==P||W[19]!==B?(T=e(m,{placement:"right",children:V?e(c,{ref:B,type:"submit",variant:"primary",color:"brand",size:"large",children:"Create policy"}):e(E,{asChild:!0,onClick:Y,children:t(c,{ref:U,variant:"primary",color:"brand",size:"large",children:["Next: ",O[P+1]]})})}),W[15]=V,W[16]=U,W[17]=Y,W[18]=P,W[19]=B,W[20]=T):T=W[20],W[21]!==v||W[22]!==T?(I=t(u,{children:[v,T]}),W[21]=v,W[22]=T,W[23]=I):I=W[23],W[24]!==P||W[25]!==I||W[26]!==o||W[27]!==g||W[28]!==_?(M=t(s,{"data-testid":"drawer",width:640,children:[n,t(p,{children:[a,e("form",{onSubmit:q,className:"flex min-h-0 flex-1 flex-col",children:t(b,{"data-testid":"stepper",count:O.length,step:P,onStepChange:o,className:"flex min-h-0 flex-1 flex-col",children:[g,_,I]})})]})]}),W[24]=P,W[25]=I,W[26]=o,W[27]=g,W[28]=_,W[29]=M):M=W[29],M},meta:T},{name:"LongLabel",story:()=>{let r,n,a,i=(0,l.c)(3);return i[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(R,{index:0,children:[t(k,{children:[e(C,{}),e(D,{children:"General"})]}),e(x,{})]}),i[0]=r):r=i[0],i[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(R,{index:1,"data-testid":"stepper-long",children:[t(k,{children:[e(C,{}),e(D,{children:"Rules applied to every request that matches the selected application and path"}),e(v,{children:"Request · Lua · HMAC auth · Response headers · Rate limit · Custom blocking page"})]}),e(x,{})]}),i[1]=n):n=i[1],i[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(b,{"data-testid":"stepper",count:3,defaultStep:0,children:t(N,{"aria-label":"Create policy steps",children:[r,n,t(R,{index:2,children:[t(k,{children:[e(C,{}),e(D,{children:"Review"})]}),e(x,{})]})]})}),i[2]=a):a=i[2],a},meta:T},{name:"SixSteps",story:()=>{let r,n,a=(0,l.c)(2);return a[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(U,{testId:"stepper"}),a[0]=r):r=a[0],a[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(g,{gap:24,children:[r,e("div",{className:"w-640",children:e(U,{testId:"stepper-narrow"})})]}),a[1]=n):n=a[1],n},meta:T},{name:"WithFooter",story:()=>{let r,n,a,i,o,s,d,p,h=(0,l.c)(24),{step:f,statuses:y,goTo:S}=A(),{nextRef:g,submitRef:w,onBackClick:_,onNextClick:v}=j(f),T=f===O.length-1;return h[0]!==S?(r=e=>S(e.step),h[0]=S,h[1]=r):r=h[1],h[2]!==y?(n=O.map((r,n)=>t(R,{index:n,status:y[n],children:[t(k,{children:[e(C,{}),e(D,{children:r})]}),e(x,{})]},r)),h[2]=y,h[3]=n):n=h[3],h[4]!==n?(a=e(N,{"aria-label":"Create policy steps",children:n}),h[4]=n,h[5]=a):a=h[5],h[6]===Symbol.for("react.memo_cache_sentinel")?(i=O.map(Q),h[6]=i):i=h[6],h[7]!==_||h[8]!==f?(o=f>0&&e(m,{placement:"left",children:e($,{asChild:!0,"data-testid":"stepper-back",onClick:_,children:e(c,{variant:"outline",color:"neutral",size:"large",children:"Back"})})}),h[7]=_,h[8]=f,h[9]=o):o=h[9],h[10]!==T||h[11]!==g||h[12]!==v||h[13]!==f||h[14]!==w?(s=e(m,{placement:"right",children:T?e(c,{ref:w,type:"submit",variant:"primary",color:"brand",size:"large","data-testid":"stepper-submit",children:"Create policy"}):e(E,{asChild:!0,"data-testid":"stepper-next",onClick:v,children:t(c,{ref:g,variant:"primary",color:"brand",size:"large",children:["Next: ",O[f+1]]})})}),h[10]=T,h[11]=g,h[12]=v,h[13]=f,h[14]=w,h[15]=s):s=h[15],h[16]!==o||h[17]!==s?(d=t(u,{children:[o,s]}),h[16]=o,h[17]=s,h[18]=d):d=h[18],h[19]!==f||h[20]!==r||h[21]!==a||h[22]!==d?(p=e("form",{onSubmit:Z,className:"flex w-640 flex-col overflow-hidden rounded-12 border-1 border-border-primary-light",children:t(b,{"data-testid":"stepper",count:O.length,step:f,onStepChange:r,children:[a,i,d]})}),h[19]=f,h[20]=r,h[21]=a,h[22]=d,h[23]=p):p=h[23],p},meta:T},{name:"CustomIndicator",story:()=>{let t,r=(0,l.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(b,{"data-testid":"stepper",count:3,defaultStep:0,children:e(N,{"aria-label":"Create policy steps",children:["General","Rules","Billing"].map(ee)})}),r[0]=t):t=r[0],t},meta:T},{name:"AnalyticsAndTestIds",story:()=>{let r,n,a,i,o=(0,l.c)(4);return o[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(N,{"aria-label":"Create policy steps",children:B.map(et)}),o[0]=r):r=o[0],o[1]===Symbol.for("react.memo_cache_sentinel")?(n=e($,{asChild:!0,"data-analytics-id":"POLICY_STEP_BACK",children:e(c,{variant:"outline",color:"neutral",children:"Back"})}),o[1]=n):n=o[1],o[2]===Symbol.for("react.memo_cache_sentinel")?(a=t(b,{"data-testid":"stepper",count:O.length,defaultStep:1,children:[r,t(S,{gap:8,className:"px-24 py-16",children:[n,e(E,{asChild:!0,"data-analytics-id":"POLICY_STEP_NEXT",children:e(c,{children:"Next"})})]})]}),o[2]=a):a=o[2],o[3]===Symbol.for("react.memo_cache_sentinel")?(i=t(g,{gap:16,children:[a,t(g,{gap:4,align:"start",children:[e("span",{className:"sb-annotation",children:'<div> data-testid="stepper" · <ol> data-testid="stepper--list"'}),B.map(er),e("span",{className:"sb-annotation",children:'<button> data-testid="stepper--prev-trigger" data-analytics-id="POLICY_STEP_BACK" · <button> data-testid="stepper--next-trigger" data-analytics-id="POLICY_STEP_NEXT"'})]})]}),o[3]=i):i=o[3],i},meta:T}];function ea({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},a="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,l=()=>i.default.createElement(a,n),o={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=l;l=()=>e(t,o)}return i.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},i.default.createElement("h2",{className:"text-sm mb-12"},e.name),i.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(i.default.createElement(window.WallarmDS.Root,null,en.map((e,t)=>i.default.createElement(ea,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,236 @@
+Turns one setting on or off, and takes effect the moment it is flipped — reach for `Checkbox` when the answer is submitted with a form, and `ToggleButton` when the control belongs in a toolbar rather than a settings list. Because there is no Save to undo it, avoid a switch for anything destructive or slow.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `a11y-mode` | `boolean \| undefined` | no | `false` |  |
+| `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 | — |  |
+| `html-for` | `string \| undefined` | no | — |  |
+| `label` | `string \| undefined` | no | — | Specifies the localized strings that identifies the accessibility elements and their states |
+| `disabled` | `boolean \| undefined` | no | — | Whether the switch is disabled. |
+| `name` | `string \| undefined` | no | — | The name of the input field in a switch (Useful for form submission). |
+| `value` | `string \| number \| undefined` | no | — | The value of switch input. Useful for form submission. |
+| `ids` | `ElementIds \| undefined` | no | — | The ids of the elements in the switch. Useful for composition. |
+| `read-only` | `boolean \| undefined` | no | — | Whether the switch is read-only |
+| `required` | `boolean \| undefined` | no | — | If `true`, the switch input is marked as required, |
+| `on-checked-change` | `((details: CheckedChangeDetails) => void) \| undefined` | no | — | Function to call when the switch is clicked. |
+| `invalid` | `boolean \| undefined` | no | — | If `true`, the switch is marked as invalid. |
+| `checked` | `boolean \| undefined` | no | — | The controlled checked state of the switch |
+| `as-child` | `boolean \| undefined` | no | — | Use the provided child element as the default rendered element, combining their props and behavior. |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.SwitchDescription` — `SwitchDescriptionProps` in the declaration bundle.
+- `WallarmDS.SwitchLabel` — `SwitchLabelProps` in the declaration bundle.
+- `WallarmDS.SwitchControl` — `SwitchControlProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+`SwitchControl` plus `SwitchLabel`. Name the thing being switched rather than the action, since
+the control already carries the verb: "Email notifications", not "Enable notifications".
+
+Source: Switch/Switch.stories.tsx#Basic
+
+### Checked
+
+The on state. The track fills with brand and the thumb travels, so on and off differ by
+both colour and position.
+
+Source: Switch/Switch.stories.tsx#Checked
+
+### Disabled
+
+Dimmed and not clickable, in both states. A disabled switch still shows where the setting
+stands, which is the point of showing it at all.
+
+Source: Switch/Switch.stories.tsx#Disabled
+
+### WithDescription
+
+`SwitchDescription` adds a second line and switches the row to a grid, so the text aligns
+with the label rather than the track.
+
+Source: Switch/Switch.stories.tsx#WithDescription
+
+### Multiple
+
+Several switches in a column. They are independent settings, not a choice between
+options — if only one may be on, that is a `Radio` group.
+
+Source: Switch/Switch.stories.tsx#Multiple
+
+### AccessibilityMode
+
+`a11yMode` draws a tick or a cross inside the track, so the state survives being read
+without colour. Worth turning on wherever the setting matters more than the aesthetic.
+
+Source: Switch/Switch.stories.tsx#AccessibilityMode
+
+## Story sources
+
+### Switch/Switch.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Info } from '../../icons';
+import { VStack } from '../Stack';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../Tooltip';
+import { Switch } from './Switch';
+import { SwitchControl } from './SwitchControl';
+import { SwitchDescription } from './SwitchDescription';
+import { SwitchLabel } from './SwitchLabel';
+
+const DESCRIPTION = [
+  'Turns one setting on or off, and takes effect the moment it is flipped — reach for `Checkbox` when the answer is submitted with a form, and `ToggleButton` when the control belongs in a toolbar rather than a settings list.',
+  'Because there is no Save to undo it, avoid a switch for anything destructive or slow.',
+].join(' ');
+
+const meta = {
+  title: 'Inputs/Switch',
+  component: Switch,
+  subcomponents: { SwitchControl, SwitchLabel, SwitchDescription },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+
+/**
+ * `SwitchControl` plus `SwitchLabel`. Name the thing being switched rather than the action, since
+ * the control already carries the verb: "Email notifications", not "Enable notifications".
+ */
+export const Basic: StoryFn<typeof meta> = args => (
+  <Switch {...args} data-testid='switch'>
+    <SwitchControl />
+    <SwitchLabel>Enable notifications </SwitchLabel>
+  </Switch>
+);
+
+/**
+ * The on state. The track fills with brand and the thumb travels, so on and off differ by
+ * both colour and position.
+ */
+export const Checked: StoryFn<typeof meta> = () => (
+  <Switch checked>
+    <SwitchControl />
+    <SwitchLabel>Enable notifications</SwitchLabel>
+  </Switch>
+);
+
+/**
+ * Dimmed and not clickable, in both states. A disabled switch still shows where the setting
+ * stands, which is the point of showing it at all.
+ */
+export const Disabled: StoryFn<typeof meta> = () => (
+  <VStack>
+    <Switch disabled>
+      <SwitchControl />
+      <SwitchLabel>Enable notifications</SwitchLabel>
+    </Switch>
+
+    <Switch checked disabled>
+      <SwitchControl />
+      <SwitchLabel>Enable notifications</SwitchLabel>
+    </Switch>
+  </VStack>
+);
+
+/**
+ * `SwitchDescription` adds a second line and switches the row to a grid, so the text aligns
+ * with the label rather than the track.
+ */
+export const WithDescription: StoryFn<typeof meta> = () => (
+  <Switch>
+    <SwitchControl />
+    <SwitchLabel>Enable notifications</SwitchLabel>
+    <SwitchDescription>Receive notifications about updates and new features.</SwitchDescription>
+  </Switch>
+);
+
+/**
+ * Several switches in a column. They are independent settings, not a choice between
+ * options — if only one may be on, that is a `Radio` group.
+ */
+export const Multiple: StoryFn<typeof meta> = () => (
+  <VStack align='start'>
+    <Switch>
+      <SwitchControl />
+      <SwitchLabel>
+        Email notifications{' '}
+        <Tooltip>
+          <TooltipTrigger>
+            <Info />
+          </TooltipTrigger>
+          <TooltipContent>Additional information</TooltipContent>
+        </Tooltip>
+      </SwitchLabel>
+      <SwitchDescription>Receive email notifications about important updates.</SwitchDescription>
+    </Switch>
+
+    <Switch checked>
+      <SwitchControl />
+      <SwitchLabel>
+        Push notifications{' '}
+        <Tooltip>
+          <TooltipTrigger>
+            <Info />
+          </TooltipTrigger>
+          <TooltipContent>Additional information</TooltipContent>
+        </Tooltip>
+      </SwitchLabel>
+      <SwitchDescription>Get push notifications on your mobile device.</SwitchDescription>
+    </Switch>
+
+    <Switch>
+      <SwitchControl />
+      <SwitchLabel>
+        SMS notifications{' '}
+        <Tooltip>
+          <TooltipTrigger>
+            <Info />
+          </TooltipTrigger>
+          <TooltipContent>Additional information</TooltipContent>
+        </Tooltip>
+      </SwitchLabel>
+      <SwitchDescription>Receive SMS notifications for critical alerts.</SwitchDescription>
+    </Switch>
+  </VStack>
+);
+
+/**
+ * `a11yMode` draws a tick or a cross inside the track, so the state survives being read
+ * without colour. Worth turning on wherever the setting matters more than the aesthetic.
+ */
+export const AccessibilityMode: StoryFn<typeof meta> = () => (
+  <VStack>
+    <Switch a11yMode>
+      <SwitchControl />
+      <SwitchLabel>Enable notifications</SwitchLabel>
+    </Switch>
+
+    <Switch a11yMode checked>
+      <SwitchControl />
+      <SwitchLabel>Enable notifications</SwitchLabel>
+    </Switch>
+  </VStack>
+);
+```

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

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Inputs" 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/Switch/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,f=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty,p=(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},m={},h={$dispatcherGuard:()=>M,$makeReadOnly:()=>O,$reset:()=>k,$structuralCheck:()=>A,c:()=>R,clearRenderCounterRegistry:()=>T,renderCounterRegistry:()=>D,useRenderCounter:()=>j};for(var y in h)c(m,y,{get:h[y],enumerable:!0});e.exports=p(c({},"__esModule",{value:!0}),m);var w=(o=null!=(r=n("C"))?i(f(r)):{},p(r&&r.__esModule?o:c(o,"default",{value:r,enumerable:!0}),r)),{useRef:b,useEffect:_,isValidElement:S}=w,E=null!=(a=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?a:w.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,g=Symbol.for("react.memo_cache_sentinel"),R="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 n=0;n<e;n++)t[n]=g;return t[g]=!0,t},[])},v={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{v[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var $=null;function C(e){return E.ReactCurrentDispatcher.current=e,E.ReactCurrentDispatcher.current}v.useMemoCache=e=>{if(null!=$)return $.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var N=[];function M(e){let t=E.ReactCurrentDispatcher.current;if(0===e){if(N.push(t),1===N.length&&($=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.");C(v)}else if(1===e){let e=N.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===N.length&&($=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 k(e){for(let t=0;t<e.length;t++)e[t]=g}function O(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var D=new Map;function T(){for(let e of D.values())e.forEach(e=>{e.count=0})}function j(e){let t=b(null);null!=t.current&&(t.current.count+=1),_(()=>{if(null==t.current){let n,r={count:0};null==(n=D.get(e))&&(n=new Set,D.set(e,n)),n.add(r),t.current=r}return()=>{var n;let r;null!==t.current&&(n=t.current,null!=(r=D.get(e))&&r.delete(n))}})}var x=new Set;function A(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}`;x.has(c)||(x.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(S(t)||S(n))S(t)!==S(n)?l(`type ${S(t)?"React element":"object"}`,`type ${S(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:f,act:d,cloneElement:p,createContext:m,createElement:h,createFactory:y,createRef:w,forwardRef:b,isValidElement:_,lazy:S,memo:E,startTransition:g,unstable_act:R,useCallback:v,useContext:$,useDebugValue:C,useDeferredValue:N,useEffect:M,useId:k,useImperativeHandle:O,useInsertionEffect:D,useLayoutEffect:T,useMemo:j,useReducer:x,useRef:A,useState:I,useSyncExternalStore:P,useTransition:W,version:z,use:L}=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:f,act:d,cloneElement:p,createContext:m,createElement:h,createFactory:y,createRef:w,default:r,forwardRef:b,isValidElement:_,lazy:S,memo:E,startTransition:g,unstable_act:R,use:L,useCallback:v,useContext:$,useDebugValue:C,useDeferredValue:N,useEffect:M,useId:k,useImperativeHandle:O,useInsertionEffect:D,useLayoutEffect:T,useMemo:j,useReducer:x,useRef:A,useState:I,useSyncExternalStore:P,useTransition:W,version:z})}},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");let l=window.WallarmDS.Icons.Info,i=window.WallarmDS.VStack,c=window.WallarmDS.Tooltip,s=window.WallarmDS.TooltipContent,u=window.WallarmDS.TooltipTrigger,f=window.WallarmDS.Switch,d=window.WallarmDS.SwitchControl,p=window.WallarmDS.SwitchDescription,m=window.WallarmDS.SwitchLabel,h={title:"Inputs/Switch",component:f,subcomponents:{SwitchControl:d,SwitchLabel:m,SwitchDescription:p},parameters:{layout:"centered",docs:{description:{component:"Turns one setting on or off, and takes effect the moment it is flipped — reach for `Checkbox` when the answer is submitted with a form, and `ToggleButton` when the control belongs in a toolbar rather than a settings list. Because there is no Save to undo it, avoid a switch for anything destructive or slow."}}}};var y=n("C");let w=[{name:"Basic",story:n=>{let r,o,l,i=(0,a.c)(4);return i[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(d,{}),o=e(m,{children:"Enable notifications "}),i[0]=r,i[1]=o):(r=i[0],o=i[1]),i[2]!==n?(l=t(f,{...n,"data-testid":"switch",children:[r,o]}),i[2]=n,i[3]=l):l=i[3],l},meta:h},{name:"Checked",story:()=>{let n,r=(0,a.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(f,{checked:!0,children:[e(d,{}),e(m,{children:"Enable notifications"})]}),r[0]=n):n=r[0],n},meta:h},{name:"Disabled",story:()=>{let n,r,o=(0,a.c)(2);return o[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(f,{disabled:!0,children:[e(d,{}),e(m,{children:"Enable notifications"})]}),o[0]=n):n=o[0],o[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(i,{children:[n,t(f,{checked:!0,disabled:!0,children:[e(d,{}),e(m,{children:"Enable notifications"})]})]}),o[1]=r):r=o[1],r},meta:h},{name:"WithDescription",story:()=>{let n,r=(0,a.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(f,{children:[e(d,{}),e(m,{children:"Enable notifications"}),e(p,{children:"Receive notifications about updates and new features."})]}),r[0]=n):n=r[0],n},meta:h},{name:"Multiple",story:()=>{let n,r,o,h,y,w,b=(0,a.c)(6);return b[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(d,{}),b[0]=n):n=b[0],b[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(f,{children:[n,t(m,{children:["Email notifications"," ",t(c,{children:[e(u,{children:e(l,{})}),e(s,{children:"Additional information"})]})]}),e(p,{children:"Receive email notifications about important updates."})]}),b[1]=r):r=b[1],b[2]===Symbol.for("react.memo_cache_sentinel")?(o=e(d,{}),b[2]=o):o=b[2],b[3]===Symbol.for("react.memo_cache_sentinel")?(h=t(f,{checked:!0,children:[o,t(m,{children:["Push notifications"," ",t(c,{children:[e(u,{children:e(l,{})}),e(s,{children:"Additional information"})]})]}),e(p,{children:"Get push notifications on your mobile device."})]}),b[3]=h):h=b[3],b[4]===Symbol.for("react.memo_cache_sentinel")?(y=e(d,{}),b[4]=y):y=b[4],b[5]===Symbol.for("react.memo_cache_sentinel")?(w=t(i,{align:"start",children:[r,h,t(f,{children:[y,t(m,{children:["SMS notifications"," ",t(c,{children:[e(u,{children:e(l,{})}),e(s,{children:"Additional information"})]})]}),e(p,{children:"Receive SMS notifications for critical alerts."})]})]}),b[5]=w):w=b[5],w},meta:h},{name:"AccessibilityMode",story:()=>{let n,r,o=(0,a.c)(2);return o[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(f,{a11yMode:!0,children:[e(d,{}),e(m,{children:"Enable notifications"})]}),o[0]=n):n=o[0],o[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(i,{children:[n,t(f,{a11yMode:!0,checked:!0,children:[e(d,{}),e(m,{children:"Enable notifications"})]})]}),o[1]=r):r=o[1],r},meta:h}];function b({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=()=>y.default.createElement(o,r),l={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,l)}return y.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},y.default.createElement("h2",{className:"text-sm mb-12"},e.name),y.default.createElement(a))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(y.default.createElement(window.WallarmDS.Root,null,w.map((e,t)=>y.default.createElement(b,{key:t,entry:e})))),t}}})();