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

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

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

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

@@ -0,0 +1,156 @@
+var e={vD(e,t,n){let a,r;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var o,l,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,m=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty,h=(e,t,n,a)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let r of d(t))p.call(e,r)||r===n||c(e,r,{get:()=>t[r],enumerable:!(a=s(t,r))||a.enumerable});return e},u={},f={$dispatcherGuard:()=>W,$makeReadOnly:()=>I,$reset:()=>R,$structuralCheck:()=>O,c:()=>v,clearRenderCounterRegistry:()=>A,renderCounterRegistry:()=>E,useRenderCounter:()=>k};for(var y in f)c(u,y,{get:f[y],enumerable:!0});e.exports=h(c({},"__esModule",{value:!0}),u);var g=(r=null!=(a=n("C"))?i(m(a)):{},h(a&&a.__esModule?r:c(r,"default",{value:a,enumerable:!0}),a)),{useRef:w,useEffect:b,isValidElement:_}=g,S=null!=(o=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,x=Symbol.for("react.memo_cache_sentinel"),v="function"==typeof(null==(l=g.__COMPILER_RUNTIME)?void 0:l.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let n=0;n<e;n++)t[n]=x;return t[x]=!0,t},[])},C={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{C[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var N=null;function T(e){return S.ReactCurrentDispatcher.current=e,S.ReactCurrentDispatcher.current}C.useMemoCache=e=>{if(null!=N)return N.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var D=[];function W(e){let t=S.ReactCurrentDispatcher.current;if(0===e){if(D.push(t),1===D.length&&(N=t),t===C)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");T(C)}else if(1===e){let e=D.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===D.length&&(N=null),T(e)}else if(2===e)D.push(t),T(N);else if(3===e){let e=D.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");T(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function R(e){for(let t=0;t<e.length;t++)e[t]=x}function I(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var E=new Map;function A(){for(let e of E.values())e.forEach(e=>{e.count=0})}function k(e){let t=w(null);null!=t.current&&(t.current.count+=1),b(()=>{if(null==t.current){let n,a={count:0};null==(n=E.get(e))&&(n=new Set,E.set(e,n)),n.add(a),t.current=a}return()=>{var n;let a;null!==t.current&&(n=t.current,null!=(a=E.get(e))&&a.delete(n))}})}var L=new Set;function O(e,t,n,a,r,o){function l(e,t,l,i){let c=`${a}:${o} [${r}] ${n}${l} changed from ${e} to ${t} at depth ${i}`;L.has(c)||(L.add(c),console.error(c))}!function e(t,n,a,r){if(!(r>2)){if(t!==n)if(typeof t!=typeof n)l(`type ${typeof t}`,`type ${typeof n}`,a,r);else if("object"==typeof t){let o=Array.isArray(t),i=Array.isArray(n);if(null===t&&null!==n)l("null",`type ${typeof n}`,a,r);else if(null===n)l(`type ${typeof t}`,"null",a,r);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}`,a,r);else for(let[o,i]of t)n.has(o)?e(i,n.get(o),`${a}.get(${o})`,r+1):l(`Map instance with key ${o}`,`Map instance without key ${o}`,a,r);else l("Map instance","other value",a,r);else if(n instanceof Map)l("other value","Map instance",a,r);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}`,a,r);else for(let e of n)t.has(e)||l(`Set instance without element ${e}`,`Set instance with element ${e}`,a,r);else l("Set instance","other value",a,r);else if(n instanceof Set)l("other value","Set instance",a,r);else if(o||i)if(o!==i)l(`type ${o?"array":"object"}`,`type ${i?"array":"object"}`,a,r);else if(t.length!==n.length)l(`array with length ${t.length}`,`array with length ${n.length}`,a,r);else for(let o=0;o<t.length;o++)e(t[o],n[o],`${a}[${o}]`,r+1);else if(_(t)||_(n))_(t)!==_(n)?l(`type ${_(t)?"React element":"object"}`,`type ${_(n)?"React element":"object"}`,a,r):t.type!==n.type?l(`React element of type ${t.type}`,`React element of type ${n.type}`,a,r):e(t.props,n.props,`[props of ${a}]`,r+1);else{for(let e in n)e in t||l(`object without key ${e}`,`object with key ${e}`,a,r);for(let o in t)o in n?e(t[o],n[o],`${a}.${o}`,r+1):l(`object with key ${o}`,`object without key ${o}`,a,r)}}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"}`,a,r):t!==n&&l(t,n,a,r)}}}(e,t,"",0)}},p(e,t,n){let a=new WeakMap,r=new WeakMap;function o(e,t,n){let o=t,l=n;if("object"==typeof o&&null!==o&&"$$typeof"in o&&o.$$typeof===Symbol.for("react.context")&&"Provider"in o&&(o=o.Provider),"function"==typeof o&&null!=l.ref&&!o.prototype?.isReactComponent){let t=o,n=a.get(e);n||(n=new WeakMap,a.set(e,n));let r=n.get(t);r||((r=e.forwardRef((e,n)=>t({...e,ref:n}))).displayName=t.displayName??t.name,n.set(t,r)),o=r}if("string"==typeof o&&"boolean"==typeof l.inert&&((l={...l}).inert?l.inert="":delete l.inert),"string"==typeof o)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in l&&(l={...l,[t]:l[e]},delete l[e]);return"string"==typeof o&&null!=l.ref&&(o=function(e,t){let n=r.get(e);n||(n=new Map,r.set(e,n));let a=n.get(t);if(a)return a;let o=e.forwardRef((n,a)=>{let r=e.useRef(null);if(!r.current||r.current.original!==a){let e;r.current={original:a,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof a){let n=a(t);e="function"==typeof n?n:void 0}else a&&(a.current=t)}}}return e.createElement(t,{...n,ref:r.current.callback})});return o.displayName=`CanvasHost(${t})`,n.set(t,o),o}(e,o)),{type:o,props:l}}function l(e){let t=(t,n,a)=>{let r=o(e,t,n??{});return e.createElement(r.type,void 0===a?r.props:{...r.props,key:a})};return{jsx:t,jsxs:(t,n,a)=>{let r=o(e,t,n??{}),{children:l,...i}=r.props;return e.createElement(r.type,void 0===a?i:{...i,key:a},...Array.isArray(l)?l:[l])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,n,...a)=>{let r=o(e,t,n??{});return e.createElement(r.type,r.props,...a)},cloneElement:(t,n,...a)=>{let r=e.cloneElement(t,n??void 0,...a),l=r.ref,i=o(e,r.type,{...r.props,ref:l});return i.type===r.type&&"string"!=typeof r.type?r:e.createElement(i.type,{...i.props,key:r.key})}}}n.d(t,{MA:()=>l,YJ:()=>i})},C(e,t,n){n.r(t);let a=(0,n("p").YJ)(window.React),{Children:r,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:p,cloneElement:h,createContext:u,createElement:f,createFactory:y,createRef:g,forwardRef:w,isValidElement:b,lazy:_,memo:S,startTransition:x,unstable_act:v,useCallback:C,useContext:N,useDebugValue:T,useDeferredValue:D,useEffect:W,useId:R,useImperativeHandle:I,useInsertionEffect:E,useLayoutEffect:A,useMemo:k,useReducer:L,useRef:O,useState:$,useSyncExternalStore:M,useTransition:j,version:z,use:P}=a;n.d(t,{},{Children:r,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:p,cloneElement:h,createContext:u,createElement:f,createFactory:y,createRef:g,default:a,forwardRef:w,isValidElement:b,lazy:_,memo:S,startTransition:x,unstable_act:v,use:P,useCallback:C,useContext:N,useDebugValue:T,useDeferredValue:D,useEffect:W,useId:R,useImperativeHandle:I,useInsertionEffect:E,useLayoutEffect:A,useMemo:k,useReducer:L,useRef:O,useState:$,useSyncExternalStore:M,useTransition:j,version:z})}},t={};function n(a){var r=t[a];if(void 0!==r)return r.exports;var o=t[a]={exports:{}};return e[a](o,o.exports,n),o.exports}n.d=(e,t,a)=>{var r=(t,a)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,[a]:t[r]})};r(t,"get"),r(a,"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:a,Fragment:r}=(0,n("p").MA)(window.React);var o=n("vD"),l=n("C");let i=window.WallarmDS.Icons.Info,c=window.WallarmDS.Icons.Skull,s=window.WallarmDS.Icons.TriangleAlert,d=window.WallarmDS.Button,m=window.WallarmDS.Drawer,p=window.WallarmDS.DrawerBody,h=window.WallarmDS.DrawerContent,u=window.WallarmDS.DrawerHeader,f=window.WallarmDS.DrawerTitle,y=window.WallarmDS.DrawerTrigger,g=window.WallarmDS.VStack,w=window.WallarmDS.Tooltip,b=window.WallarmDS.TooltipContent,_=window.WallarmDS.TooltipTrigger;window.WallarmDS.loadHighlightJsAdapter;let S=window.WallarmDS.loadPrismAdapter;window.WallarmDS.loadShikiAdapter;let x=window.WallarmDS.CodeSnippetActions,v=window.WallarmDS.CodeSnippetAdapterProvider,C=window.WallarmDS.CodeSnippetCode,N=window.WallarmDS.CodeSnippetContent,T=window.WallarmDS.CodeSnippetCopyButton,D=window.WallarmDS.CodeSnippetFullscreenButton,W=window.WallarmDS.CodeSnippetHeader,R=window.WallarmDS.CodeSnippetLineNumbers,I=window.WallarmDS.CodeSnippetRoot,E=window.WallarmDS.CodeSnippetShowMoreButton,A=window.WallarmDS.CodeSnippetTab,k=window.WallarmDS.CodeSnippetTabs,L=window.WallarmDS.CodeSnippetTitle,O=window.WallarmDS.CodeSnippetWrapButton,$=window.WallarmDS.getHttpFolds,M={title:"Data Display/CodeSnippet/CodeSnippet",component:I,parameters:{layout:"padded",docs:{description:{component:"A block of code to be read and copied, never edited — reach for `InlineCodeSnippet` when the code belongs inside a sentence, and a real editor when the value is meant to change. Everything beyond the code is composed: a `CodeSnippetHeader` carrying a title or tabs, `CodeSnippetActions` for copy, wrap and fullscreen, `CodeSnippetLineNumbers`, and per-line colour, prefixes and folds — and highlighting happens only inside a `CodeSnippetAdapterProvider`. The snippet sits inside a `display: contents` wrapper that keeps it mounted across fullscreen, so space snippets with their own `className` (for example `mt-16`) or a `gap` on the parent — not `space-*`, `divide-*` or child selectors on the parent."}},design:{type:"figma",url:"https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=3087-29516&m=dev"}},tags:["autodocs"]},j=`const greeting = "Hello, World!";
+console.log(greeting);
+
+function add(a, b) {
+    return a + b;
+}
+
+export default add;`,z=`npm install @wallarm-org/sdk
+npm run build
+npm run test`,P=`{
+    "name": "@wallarm-org/sdk",
+    "version": "1.0.0",
+    "dependencies": {
+        "react": "^19.0.0",
+        "typescript": "^5.0.0"
+    }
+}`,H=`// This is a code snippet that demonstrates both vertical and horizontal scrolling
+const veryLongVariableName = "This is a very long string that will require horizontal scrolling to see the entire content of the line";
+const anotherLongLine = { key1: "value1", key2: "value2", key3: "value3", key4: "value4", key5: "value5", key6: "value6", key7: "value7" };
+
+function processData(input) {
+    const result = [];
+    for (let i = 0; i < input.length; i++) {
+        result.push(input[i] * 2);
+    }
+    return result;
+}
+
+async function fetchUserData(userId) {
+    const response = await fetch(\`/api/users/$\{userId}\`);
+    const data = await response.json();
+    return data;
+}
+
+class DataProcessor {
+    constructor(config) {
+        this.config = config;
+    }
+
+    process(data) {
+        return data.map(item => item * this.config.multiplier);
+    }
+}
+
+const config = { multiplier: 2 };
+const processor = new DataProcessor(config);
+
+export { processData, fetchUserData, DataProcessor };`,U=`type User = {
+    id: number;
+    name: string;
+    email: string;
+    isActive: boolean;
+};
+
+type UserRole = 'admin' | 'user' | 'guest';
+
+/*
+ *  Get user by id
+ *  */
+async function fetchUser(id: number): Promise<User> {
+    const response = await fetch(\`/api/users/$\{id}\`);
+    if (!response.ok) {
+        throw new Error('User not found');
+    }
+    return response.json();
+}
+
+// Default users
+const users: User[] = [];
+export { fetchUser, users };`,J=`curl -X POST "https://api.wallarm.com/v2/node" \\
+  -H "Authorization: Bearer $WALLARM_API_TOKEN" \\
+  -H "Content-Type: application/json" \\
+  -d '{
+    "name": "my-node",
+    "type": "cloud",
+    "enabled": true
+  }'`,V=`GET /api/v2/users?page=1&limit=20 HTTP/1.1
+Host: api.wallarm.com
+Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
+Content-Type: application/json
+Accept: application/json
+User-Agent: WallarmSDK/2.0
+Cache-Control: no-cache`,B={npm:"npx wasd-new@latest add code-snippet inline-code-snippet button",pnpm:"pnpm dlx wasd-new@latest add code-snippet inline-code-snippet button",yarn:"yarn dlx wasd-new@latest add code-snippet inline-code-snippet button",bun:"bunx wasd-new@latest add code-snippet inline-code-snippet button"},F=`Host: inventory.example.com
+User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
+Referer: https://app.example.com/dashboard
+Accept: application/json, text/plain, */*
+Accept-Language: en-US,en;q=0.9
+Connection: keep-alive
+Cache-Control: no-cache
+Referer: https://app.example.com/dashboard
+Accept: application/json, text/plain, */*
+Accept-Language: en-US,en;q=0.9
+Connection: keep-alive
+Cache-Control: no-cache`,G=`Host: inventory.example.com
+User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
+Referer: https://app.example.com/dashboard
+Accept: application/json, text/plain, */*
+Accept-Language: en-US,en;q=0.9
+Connection: keep-alive
+Cache-Control: no-cache
+Authorization: Bearer token123
+X-Request-ID: abc-def-ghi`,X=`GET /api/v2/users HTTP/1.1
+Host: api.example.com
+Accept: application/json
+Authorization: Bearer eyJhbGciOiJIUzI1NiJ9
+X-Request-ID: abc-123
+Content-Type: application/json
+Cache-Control: no-cache
+
+{
+  "filter": {
+    "status": "active",
+    "role": "admin"
+  },
+  "pagination": {
+    "page": 1,
+    "limit": 50
+  }
+}`,q=`HTTP/1.1 200 OK
+Content-Type: application/json; charset=utf-8
+X-Request-ID: abc-123
+X-RateLimit-Remaining: 98
+Cache-Control: private, max-age=0
+
+{
+  "data": [
+    {
+      "id": 1,
+      "name": "Alice",
+      "role": "admin",
+      "status": "active"
+    },
+    {
+      "id": 2,
+      "name": "Bob",
+      "role": "admin",
+      "status": "active"
+    }
+  ],
+  "meta": {
+    "total": 2,
+    "page": 1,
+    "limit": 50
+  }
+}`,Y=window.WallarmDS.VStack,K=window.WallarmDS.InlineCodeSnippet,Z={title:"Data Display/CodeSnippet/InlineCodeSnippet",component:K,parameters:{layout:"centered",design:{type:"figma",url:"https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=3087-29516&m=dev"},docs:{description:{component:"A fragment of code inside a sentence, copied by clicking it — reach for `Code` when the text only needs the mono treatment, and `CodeSnippet` when it needs syntax highlighting, a header or line numbers. It takes its size from the text around it, so a snippet in a caption stays the size of the caption; keep it to a single line so the sentence still reads."}}},tags:["autodocs"]},Q=[{name:"Default",story:()=>{let t,n=(0,o.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(I,{code:z,language:"text",children:e(N,{children:e(C,{})})}),n[0]=t):t=n[0],t},meta:M},{name:"WithLineNumbers",story:()=>{let n,a=(0,o.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(I,{code:j,language:"text",children:t(N,{children:[e(R,{}),e(C,{})]})}),a[0]=n):n=a[0],n},meta:M},{name:"Sizes",story:()=>{let n,a,r,l,i,c,s=(0,o.c)(6);return s[0]===Symbol.for("react.memo_cache_sentinel")?(n=e("span",{className:"sb-annotation",children:"sm (default)"}),s[0]=n):n=s[0],s[1]===Symbol.for("react.memo_cache_sentinel")?(a=t(g,{align:"start",gap:4,children:[n,e(I,{code:z,language:"text",size:"sm",children:e(N,{children:e(C,{})})})]}),s[1]=a):a=s[1],s[2]===Symbol.for("react.memo_cache_sentinel")?(r=e("span",{className:"sb-annotation",children:"md"}),s[2]=r):r=s[2],s[3]===Symbol.for("react.memo_cache_sentinel")?(l=t(g,{align:"start",gap:4,children:[r,e(I,{code:z,language:"text",size:"md",children:e(N,{children:e(C,{})})})]}),s[3]=l):l=s[3],s[4]===Symbol.for("react.memo_cache_sentinel")?(i=e("span",{className:"sb-annotation",children:"lg"}),s[4]=i):i=s[4],s[5]===Symbol.for("react.memo_cache_sentinel")?(c=t(g,{gap:16,children:[a,l,t(g,{align:"start",gap:4,children:[i,e(I,{code:z,language:"text",size:"lg",children:e(N,{children:e(C,{})})})]})]}),s[5]=c):c=s[5],c},meta:M},{name:"LineAnnotations",story:()=>{let n,a,r,l,d=(0,o.c)(4);return d[0]===Symbol.for("react.memo_cache_sentinel")?(n={color:"danger",prefix:t(w,{children:[e(_,{children:e(c,{})}),e(b,{children:"Tooltip"})]})},d[0]=n):n=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(a={color:"warning",prefix:t(w,{children:[e(_,{children:e(s,{})}),e(b,{children:"Tooltip"})]})},d[1]=a):a=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(r={3:n,5:a,7:{color:"info",prefix:t(w,{children:[e(_,{children:e(i,{})}),e(b,{children:"Tooltip"})]})}},d[2]=r):r=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(l=e(I,{code:"Host: inventory.example.com\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)\nAppleWebKit/537.36\nAccept: application/json, text/plain, */*\nAccept-Language: en-US,en;q=0.9\nConnection: keep-alive\nCache-Control: no-cache",language:"text",lines:r,children:t(N,{children:[e(R,{}),e(C,{})]})}),d[3]=l):l=d[3],l},meta:M},{name:"LineColors",story:()=>{let n,a,r=(0,o.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(n={2:{color:"danger"},3:{color:"warning"},4:{color:"info"},5:{color:"success"},6:{color:"brand"},7:{color:"ai"},8:{color:"neutral"}},r[0]=n):n=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(I,{code:"Line 1: Default (no color)\nLine 2: Danger color\nLine 3: Warning color\nLine 4: Info color\nLine 5: Success color\nLine 6: Brand color\nLine 7: AI color\nLine 8: Neutral color",language:"text",lines:n,children:t(N,{children:[e(R,{}),e(C,{})]})}),r[1]=a):a=r[1],a},meta:M},{name:"LineRanges",story:()=>{let n,a,r,l=(0,o.c)(3);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n={color:"danger",ranges:[{start:8,end:24}]},l[0]=n):n=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(a={4:n,7:{color:"info",ranges:[{start:17,end:30}]}},l[1]=a):a=l[1],l[2]===Symbol.for("react.memo_cache_sentinel")?(r=e(I,{code:"GET /api/v2/users HTTP/1.1\nHost: inventory.example.com\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)\nAccept: application/json, text/plain, */*\nAccept-Language: en-US,en;q=0.9\nConnection: keep-alive\nX-Forwarded-For: 192.168.1.100\nCache-Control: no-cache",language:"text",lines:a,children:t(N,{children:[e(R,{}),e(C,{})]})}),l[2]=r):r=l[2],r},meta:M},{name:"TextStyles",story:()=>{let n,a,r=(0,o.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(n={2:{textStyle:"medium"},3:{textStyle:"italic"},4:{color:"danger",textStyle:"italic"},5:{color:"neutral"},6:{className:"underline"},7:{style:{textDecoration:"line-through"}}},r[0]=n):n=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(I,{code:"Line 1: Default (regular)\nLine 2: Medium weight\nLine 3: Italic style\nLine 4: Danger with italic override\nLine 5: Neutral (default italic)\nLine 6: Custom className\nLine 7: Custom inline style",language:"text",lines:n,children:t(N,{children:[e(R,{}),e(C,{})]})}),r[1]=a):a=r[1],a},meta:M},{name:"LineWithPrefix",story:()=>{let n,a,r=(0,o.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(n={2:{color:"danger",prefix:"-"},3:{color:"success",prefix:"+"},4:{color:"success",prefix:"+"}},r[0]=n):n=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(I,{code:'const greeting = "Hello";\nconsole.log("old message");\nconsole.log("new message");\nconsole.log("another new line");\n\nexport default greeting;',language:"text",lines:n,children:t(N,{children:[e(R,{}),e(C,{})]})}),r[1]=a):a=r[1],a},meta:M},{name:"LineWrapping",story:()=>{let n,a,r,l,i,c,s,d,m,p,h,u,f,y,w,b,_,S,x,v,T,D,W=(0,o.c)(22);return W[0]===Symbol.for("react.memo_cache_sentinel")?(n=e("span",{className:"sb-annotation",children:"Without wrapping"}),a={maxWidth:"600px"},W[0]=n,W[1]=a):(n=W[0],a=W[1]),W[2]===Symbol.for("react.memo_cache_sentinel")?(r=t(g,{align:"start",gap:4,children:[n,e("div",{style:a,children:e(I,{code:'const veryLongVariableName = "This is a very long string that will demonstrate line wrapping behavior when the content exceeds the container width";\nconsole.log(veryLongVariableName);',language:"text",children:t(N,{children:[e(R,{}),e(C,{})]})})})]}),W[2]=r):r=W[2],W[3]===Symbol.for("react.memo_cache_sentinel")?(l=e("span",{className:"sb-annotation",children:"With wrapping"}),i={maxWidth:"600px"},W[3]=l,W[4]=i):(l=W[3],i=W[4]),W[5]===Symbol.for("react.memo_cache_sentinel")?(c=t(g,{align:"start",gap:4,children:[l,e("div",{style:i,children:e(I,{code:'const veryLongVariableName = "This is a very long string that will demonstrate line wrapping behavior when the content exceeds the container width";\nconsole.log(veryLongVariableName);',language:"text",wrapLines:!0,children:t(N,{children:[e(R,{}),e(C,{})]})})})]}),W[5]=c):c=W[5],W[6]===Symbol.for("react.memo_cache_sentinel")?(s=e("span",{className:"sb-annotation",children:"Without wrapping, with annotations"}),d={maxWidth:"600px"},W[6]=s,W[7]=d):(s=W[6],d=W[7]),W[8]===Symbol.for("react.memo_cache_sentinel")?(m={1:{color:"danger",prefix:"-"},2:{color:"success",prefix:"+"}},W[8]=m):m=W[8],W[9]===Symbol.for("react.memo_cache_sentinel")?(p=t(g,{align:"start",gap:4,children:[s,e("div",{style:d,children:e(I,{code:'const veryLongVariableName = "This is a very long string that will demonstrate line wrapping behavior when the content exceeds the container width";\nconsole.log(veryLongVariableName);',language:"text",lines:m,children:t(N,{children:[e(R,{}),e(C,{})]})})})]}),W[9]=p):p=W[9],W[10]===Symbol.for("react.memo_cache_sentinel")?(h=e("span",{className:"sb-annotation",children:"Wrapping with annotations"}),u={maxWidth:"600px"},W[10]=h,W[11]=u):(h=W[10],u=W[11]),W[12]===Symbol.for("react.memo_cache_sentinel")?(f={1:{color:"danger",prefix:"-"},2:{color:"success",prefix:"+"}},W[12]=f):f=W[12],W[13]===Symbol.for("react.memo_cache_sentinel")?(y=t(g,{align:"start",gap:4,children:[h,e("div",{style:u,children:e(I,{code:'const veryLongVariableName = "This is a very long string that will demonstrate line wrapping behavior when the content exceeds the container width";\nconsole.log(veryLongVariableName);',language:"text",wrapLines:!0,lines:f,children:t(N,{children:[e(R,{}),e(C,{})]})})})]}),W[13]=y):y=W[13],W[14]===Symbol.for("react.memo_cache_sentinel")?(w=e("span",{className:"sb-annotation",children:"Folds without wrapping"}),b={maxWidth:"600px"},W[14]=w,W[15]=b):(w=W[14],b=W[15]),W[16]===Symbol.for("react.memo_cache_sentinel")?(_=$('GET /api/v2/users?page=1&limit=20&filter=active&sort=name&order=asc&include=profile,settings HTTP/1.1\nHost: api.wallarm.com\nAuthorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0\nContent-Type: application/json\nAccept: application/json\n\n{\n  "filter": { "status": "active", "role": "admin" }\n}',{headers:{defaultCollapsed:!0}}),W[16]=_):_=W[16],W[17]===Symbol.for("react.memo_cache_sentinel")?(S=t(g,{align:"start",gap:4,children:[w,e("div",{style:b,children:e(I,{code:'GET /api/v2/users?page=1&limit=20&filter=active&sort=name&order=asc&include=profile,settings HTTP/1.1\nHost: api.wallarm.com\nAuthorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0\nContent-Type: application/json\nAccept: application/json\n\n{\n  "filter": { "status": "active", "role": "admin" }\n}',language:"text",folds:_,children:t(N,{children:[e(R,{}),e(C,{})]})})})]}),W[17]=S):S=W[17],W[18]===Symbol.for("react.memo_cache_sentinel")?(x=e("span",{className:"sb-annotation",children:"Folds with wrapping"}),v={maxWidth:"600px"},W[18]=x,W[19]=v):(x=W[18],v=W[19]),W[20]===Symbol.for("react.memo_cache_sentinel")?(T=$('GET /api/v2/users?page=1&limit=20&filter=active&sort=name&order=asc&include=profile,settings HTTP/1.1\nHost: api.wallarm.com\nAuthorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0\nContent-Type: application/json\nAccept: application/json\n\n{\n  "filter": { "status": "active", "role": "admin" }\n}',{headers:{defaultCollapsed:!0}}),W[20]=T):T=W[20],W[21]===Symbol.for("react.memo_cache_sentinel")?(D=t(g,{gap:16,children:[r,c,p,y,S,t(g,{align:"start",gap:4,children:[x,e("div",{style:v,children:e(I,{code:'GET /api/v2/users?page=1&limit=20&filter=active&sort=name&order=asc&include=profile,settings HTTP/1.1\nHost: api.wallarm.com\nAuthorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0\nContent-Type: application/json\nAccept: application/json\n\n{\n  "filter": { "status": "active", "role": "admin" }\n}',language:"text",wrapLines:!0,folds:T,children:t(N,{children:[e(R,{}),e(C,{})]})})})]})]}),W[21]=D):D=W[21],D},meta:M},{name:"WithBothScrolls",story:()=>{let n,a,r,l,i,d,m=(0,o.c)(6);return m[0]===Symbol.for("react.memo_cache_sentinel")?(n={maxWidth:"500px",maxHeight:"300px",background:"white"},m[0]=n):n=m[0],m[1]===Symbol.for("react.memo_cache_sentinel")?(a={color:"warning",prefix:e(s,{})},r={color:"info"},m[1]=a,m[2]=r):(a=m[1],r=m[2]),m[3]===Symbol.for("react.memo_cache_sentinel")?(l={2:a,3:r,13:{color:"danger",prefix:e(c,{})},20:{color:"success",prefix:"+"}},i={height:"280px"},m[3]=l,m[4]=i):(l=m[3],i=m[4]),m[5]===Symbol.for("react.memo_cache_sentinel")?(d=e("div",{style:n,children:e(I,{code:H,language:"text",lines:l,style:i,children:t(N,{children:[e(R,{}),e(C,{})]})})}),m[5]=d):d=m[5],d},meta:M},{name:"CustomStartingLine",story:()=>{let n,a=(0,o.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(I,{code:j,language:"text",startingLineNumber:97,children:t(N,{children:[e(R,{}),e(C,{})]})}),a[0]=n):n=a[0],n},meta:M},{name:"TypescriptWithPrism",story:()=>{let n,a=(0,o.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(v,{adapter:S,children:e(I,{code:U,language:"typescript",children:t(N,{children:[e(R,{}),e(C,{})]})})}),a[0]=n):n=a[0],n},meta:M},{name:"BashWithPrism",story:()=>{let n,a=(0,o.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(v,{adapter:S,children:e(I,{code:J,language:"bash",children:t(N,{children:[e(R,{}),e(C,{})]})})}),a[0]=n):n=a[0],n},meta:M},{name:"HTTPRequestWithPrism",story:()=>{let n,a=(0,o.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(v,{adapter:S,children:e(I,{code:V,language:"http",children:t(N,{children:[e(R,{}),e(C,{})]})})}),a[0]=n):n=a[0],n},meta:M},{name:"WithHeader",story:()=>{let n,a,r=(0,o.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(W,{children:e(L,{children:"install.sh"})}),r[0]=n):n=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(a=t(I,{code:z,language:"text",children:[n,e(N,{children:e(C,{})})]}),r[1]=a):a=r[1],a},meta:M},{name:"WithTabsAndActions",story:()=>{let n,a,r,i,c,s,d,m,p,h,u=(0,o.c)(14),[f,y]=(0,l.useState)("npm"),g=B[f]??"";return u[0]===Symbol.for("react.memo_cache_sentinel")?(n={width:"320px"},u[0]=n):n=u[0],u[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(A,{value:"npm",children:"npm"}),r=e(A,{value:"pnpm",children:"pnpm"}),i=e(A,{value:"yarn",children:"yarn"}),c=e(A,{value:"bun",children:"bun"}),u[1]=a,u[2]=r,u[3]=i,u[4]=c):(a=u[1],r=u[2],i=u[3],c=u[4]),u[5]!==f?(s=t(k,{value:f,onValueChange:y,children:[a,r,i,c]}),u[5]=f,u[6]=s):s=u[6],u[7]===Symbol.for("react.memo_cache_sentinel")?(d=t(x,{children:[e(D,{}),e(O,{}),e(T,{})]}),u[7]=d):d=u[7],u[8]!==s?(m=t(W,{children:[s,d]}),u[8]=s,u[9]=m):m=u[9],u[10]===Symbol.for("react.memo_cache_sentinel")?(p=e(N,{children:e(C,{})}),u[10]=p):p=u[10],u[11]!==g||u[12]!==m?(h=e("div",{style:n,children:t(I,{code:g,language:"text",children:[m,p]})}),u[11]=g,u[12]=m,u[13]=h):h=u[13],h},meta:M},{name:"WithFloatingActions",story:()=>{let n,a,r,l=(0,o.c)(3);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n={width:"320px"},l[0]=n):n=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(a=t(x,{children:[e(O,{}),e(T,{})]}),l[1]=a):a=l[1],l[2]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{style:n,children:t(I,{code:j,language:"text",children:[a,t(N,{children:[e(R,{}),e(C,{})]})]})}),l[2]=r):r=l[2],r},meta:M},{name:"ShowMore",story:()=>{let n,a,r,l,i,c,s,d=(0,o.c)(7);return d[0]===Symbol.for("react.memo_cache_sentinel")?(n={display:"flex",flexDirection:"column",gap:"24px",width:"500px"},a=e("p",{className:"sb-annotation mb-8",children:"12 lines, clipped at 7 — 5 hidden"}),d[0]=n,d[1]=a):(n=d[0],a=d[1]),d[2]===Symbol.for("react.memo_cache_sentinel")?(r=t("div",{children:[a,e(I,{code:F,language:"text",maxLines:7,"data-testid":"show-more-clipped",children:e(N,{children:e(C,{})})})]}),l=e("p",{className:"sb-annotation mb-8",children:"9 lines, clipped at 7 — 2 hidden, no button"}),d[2]=r,d[3]=l):(r=d[2],l=d[3]),d[4]===Symbol.for("react.memo_cache_sentinel")?(i=t("div",{children:[l,e(I,{code:G,language:"text",maxLines:7,"data-testid":"show-more-threshold",children:e(N,{children:e(C,{})})})]}),c=e("p",{className:"sb-annotation mb-8",children:"the button rendered by hand"}),d[4]=i,d[5]=c):(i=d[4],c=d[5]),d[6]===Symbol.for("react.memo_cache_sentinel")?(s=t("div",{style:n,children:[r,i,t("div",{children:[c,t(I,{code:F,language:"text",maxLines:7,children:[e(N,{children:e(C,{})}),e(E,{"data-analytics-id":"CODE_SHOW_MORE"})]})]})]}),d[6]=s):s=d[6],s},meta:M},{name:"HTTPRequestWithFolding",story:()=>{let n,a,r=(0,o.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(n=$(X),r[0]=n):n=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(I,{code:X,language:"text",folds:n,children:t(N,{children:[e(R,{}),e(C,{})]})}),r[1]=a):a=r[1],a},meta:M},{name:"HTTPResponseWithFolding",story:()=>{let n,a,r=(0,o.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(n=$(q),r[0]=n):n=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(I,{code:q,language:"text",folds:n,children:t(N,{children:[e(R,{}),e(C,{})]})}),r[1]=a):a=r[1],a},meta:M},{name:"WithFoldingExpanded",story:()=>{let n,a,r,l,i=(0,o.c)(4);return i[0]===Symbol.for("react.memo_cache_sentinel")?(n=$(X),a={color:"warning"},i[0]=n,i[1]=a):(n=i[0],a=i[1]),i[2]===Symbol.for("react.memo_cache_sentinel")?(r={3:a,4:{color:"danger",ranges:[{start:14,end:42,color:"danger"}]},10:{color:"info"},11:{color:"info"}},i[2]=r):r=i[2],i[3]===Symbol.for("react.memo_cache_sentinel")?(l=e(I,{code:X,language:"text",folds:n,lines:r,children:t(N,{children:[e(R,{}),e(C,{})]})}),i[3]=l):l=i[3],l},meta:M},{name:"FullscreenInsideDrawer",story:()=>{let n,a,r,l,i,c=(0,o.c)(5);return c[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(y,{asChild:!0,children:e(d,{variant:"outline",color:"neutral",children:"Open Drawer"})}),c[0]=n):n=c[0],c[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(u,{children:e(f,{children:"Request"})}),c[1]=a):a=c[1],c[2]===Symbol.for("react.memo_cache_sentinel")?(r=e(L,{children:"package.json"}),c[2]=r):r=c[2],c[3]===Symbol.for("react.memo_cache_sentinel")?(l=t(W,{children:[r,t(x,{children:[e(D,{}),e(T,{})]})]}),c[3]=l):l=c[3],c[4]===Symbol.for("react.memo_cache_sentinel")?(i=t(m,{children:[n,t(h,{children:[a,e(p,{children:t(I,{code:P,language:"json",children:[l,e(N,{children:e(C,{})})]})})]})]}),c[4]=i):i=c[4],i},meta:M},{name:"Default",story:()=>{let n,a,r,l=(0,o.c)(3);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n=t("p",{className:"text-xs text-text-primary",children:["Small text: Run"," ",e(K,{code:"npm install @wads/ui","data-testid":"inline-code-copyable"})," to install dependencies."]}),l[0]=n):n=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(a=t("p",{className:"text-sm text-text-primary",children:["Medium text: Run ",e(K,{code:"npm install @wads/ui"})," to install dependencies."]}),l[1]=a):a=l[1],l[2]===Symbol.for("react.memo_cache_sentinel")?(r=t(Y,{align:"start",children:[n,a,t("p",{className:"text-base text-text-primary",children:["Large text: Run ",e(K,{code:"npm install @wads/ui"})," to install dependencies."]})]}),l[2]=r):r=l[2],r},meta:Z},{name:"Sizes",story:()=>{let n,a,r,l,i,c,s=(0,o.c)(6);return s[0]===Symbol.for("react.memo_cache_sentinel")?(n=e("span",{className:"sb-annotation",children:"sm"}),s[0]=n):n=s[0],s[1]===Symbol.for("react.memo_cache_sentinel")?(a=t(Y,{align:"start",gap:4,children:[n,t("div",{className:"text-xs text-text-primary",children:["To start creating an interface, run"," ",e(K,{code:"npm install @wads/ui",size:"sm"})," and then apply the following..."]})]}),s[1]=a):a=s[1],s[2]===Symbol.for("react.memo_cache_sentinel")?(r=e("span",{className:"sb-annotation",children:"md"}),s[2]=r):r=s[2],s[3]===Symbol.for("react.memo_cache_sentinel")?(l=t(Y,{align:"start",gap:4,children:[r,t("div",{className:"text-sm text-text-primary",children:["To start creating an interface, run"," ",e(K,{code:"npm install @wads/ui",size:"md"})," and then apply the following..."]})]}),s[3]=l):l=s[3],s[4]===Symbol.for("react.memo_cache_sentinel")?(i=e("span",{className:"sb-annotation",children:"lg"}),s[4]=i):i=s[4],s[5]===Symbol.for("react.memo_cache_sentinel")?(c=t(Y,{align:"start",gap:16,children:[a,l,t(Y,{align:"start",gap:4,children:[i,t("div",{className:"text-base text-text-primary",children:["To start creating an interface, run"," ",e(K,{code:"npm install @wads/ui",size:"lg"})," and then apply the following..."]})]})]}),s[5]=c):c=s[5],c},meta:Z},{name:"NonCopyable",story:()=>{let n,a=(0,o.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(n=t("p",{className:"text-sm text-text-primary",children:["This code is not copyable:"," ",e(K,{code:"npm install @wads/ui",copyable:!1,"data-testid":"inline-code-non-copyable"})]}),a[0]=n):n=a[0],n},meta:Z},{name:"VariousContent",story:()=>{let n,a=(0,o.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(Y,{align:"start",children:[e(K,{code:"npm install"}),e(K,{code:"curl -X POST https://api.wallarm.com"}),e(K,{code:'{"status": "ok"}'}),e(K,{code:"SELECT * FROM users WHERE id = 1"}),e(K,{code:"git commit -m 'feat: add feature'"})]}),a[0]=n):n=a[0],n},meta:Z}];function ee({entry:e}){let{story:t,meta:n}=e,a={...n.args,...t.args},r="function"==typeof t||t.$$typeof?t:t.render||n.render||n.component,o=()=>l.default.createElement(r,a),i={args:a,globals:{theme:"light"},parameters:{...n.parameters,...t.parameters},viewMode:"story"};for(let e of[...n.decorators||[],...t.decorators||[]].reverse()){let t=o;o=()=>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(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(l.default.createElement(window.WallarmDS.Root,null,Q.map((e,t)=>l.default.createElement(ee,{key:t,entry:e})))),t}}})();