@wallarm-org/claude-design 4.14.0 → 4.16.0

package/dist/project/components/Table/stories.md

@@ -11,9 +11,11 @@ import type { Meta, StoryFn } from 'storybook-react-rsbuild';
 import {
   ChevronDown,
   ChevronRight,
+  CircleStop,
   Copy,
   Database,
   Ellipsis,
+  Eye,
   Filter,
   FilterX,
   Lock,
@@ -23,6 +25,7 @@ import {
   Trash2,
 } from '../../icons';
 import { Attribute, AttributeLabel, AttributeValue } from '../Attribute';
+import { AgentItem, Avatar, AvatarContent, AvatarFallback, AvatarName } from '../Avatar';
 import { Badge } from '../Badge';
 import {
   BulkBarSummaryClear,
@@ -123,6 +126,8 @@ const onCopyValue = fn().mockName('onCopyValue');
 const onShowOnly = fn().mockName('onShowOnly');
 const onExclude = fn().mockName('onExclude');
 const onExecute = fn().mockName('onExecute');
+const onViewRun = fn().mockName('onViewRun');
+const onStopRun = fn().mockName('onStopRun');
 
 const DESCRIPTION = [
   'The grid for many records of one shape — reach for a `Card` grid when a row reads better as an object than as a set of columns, and for `Attribute` when you are showing one record rather than many.',
@@ -210,6 +215,118 @@ export const Basic: StoryFn<typeof meta> = () => {
   );
 };
 
+/**
+ * An agent in a cell — the Agent, Found by or Run by column: `AgentItem` at 20 px beside the text-sm row, the agent's
+ * glyph with no plate, where a person gets the `Avatar` plate. The row actions stay in the master cell
+ * (`meta.renderMenuAction`).
+ */
+export const AgentCell: StoryFn<typeof meta> = () => {
+  interface AgentRun {
+    id: string;
+    agent: 'radar' | 'sift' | 'trim';
+    agentName: string;
+    finding: string;
+    runBy: { type: 'agent'; agent: 'wally'; name: string } | { type: 'person'; name: string };
+  }
+
+  const runs: AgentRun[] = [
+    {
+      id: '1',
+      agent: 'radar',
+      agentName: 'Radar',
+      finding: 'Credential stuffing on /api/v1/login',
+      runBy: { type: 'agent', agent: 'wally', name: 'Wally' },
+    },
+    {
+      id: '2',
+      agent: 'sift',
+      agentName: 'Sift',
+      finding: '12 false positives in the SQLi rule',
+      runBy: { type: 'person', name: 'Artem Miskevich' },
+    },
+    {
+      id: '3',
+      agent: 'trim',
+      agentName: 'Trim',
+      finding: '4 rules that never match',
+      runBy: { type: 'agent', agent: 'wally', name: 'Wally' },
+    },
+  ];
+
+  const columns: TableColumnDef<AgentRun>[] = [
+    {
+      accessorKey: 'agentName',
+      header: 'Agent',
+      size: 200,
+      meta: {
+        renderMenuAction: () => (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant='ghost' color='neutral' size='small' aria-label='More'>
+                <Ellipsis />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem onSelect={onViewRun}>
+                <DropdownMenuItemIcon>
+                  <Eye />
+                </DropdownMenuItemIcon>
+                <DropdownMenuItemText>View run</DropdownMenuItemText>
+              </DropdownMenuItem>
+              <DropdownMenuItem onSelect={onStopRun}>
+                <DropdownMenuItemIcon>
+                  <CircleStop />
+                </DropdownMenuItemIcon>
+                <DropdownMenuItemText>Stop run</DropdownMenuItemText>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ),
+      },
+      cell: ({ row }) => (
+        <AgentItem agent={row.original.agent} data-testid={`agent-cell-agent-${row.id}`}>
+          <AvatarContent>
+            <AvatarName>{row.original.agentName}</AvatarName>
+          </AvatarContent>
+        </AgentItem>
+      ),
+    },
+    { accessorKey: 'finding', header: 'Finding', size: 320 },
+    {
+      id: 'runBy',
+      header: 'Run by',
+      size: 200,
+      cell: ({ row }) =>
+        row.original.runBy.type === 'agent' ? (
+          <AgentItem agent={row.original.runBy.agent} data-testid={`agent-cell-run-by-${row.id}`}>
+            <AvatarContent>
+              <AvatarName>{row.original.runBy.name}</AvatarName>
+            </AvatarContent>
+          </AgentItem>
+        ) : (
+          <Avatar size='sm' data-testid={`agent-cell-run-by-${row.id}`}>
+            <AvatarFallback name={row.original.runBy.name} />
+            <AvatarContent>
+              <AvatarName>{row.original.runBy.name}</AvatarName>
+            </AvatarContent>
+          </Avatar>
+        ),
+    },
+  ];
+
+  const getRowId = (run: AgentRun) => run.id;
+
+  return (
+    <Table
+      aria-label='Agent runs'
+      data={runs}
+      columns={columns}
+      getRowId={getRowId}
+      data-testid='agent-cell'
+    />
+  );
+};
+
 /**
  * `stretch={false}` — columns keep their defined widths and do not expand to fill the container.
  * Empty space appears on the right when the total column width is less than the container width.

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

@@ -65,6 +65,13 @@ An icon beside the label, carrying the kind of thing rather than its state.
 
 Source: Tag/Tag.stories.tsx#WithIcons
 
+### Agent
+
+An agent in a tag stands as its character beside its name, with no plate: 16 px in a medium
+tag, 20 px in a large one. A person keeps the icon slot above.
+
+Source: Tag/Tag.stories.tsx#Agent
+
 ### WithOnClick
 
 A plain click handler, for a chip that navigates or opens rather than toggling — but not as a
@@ -82,6 +89,7 @@ import { createListCollection } from '@ark-ui/react/collection';
 import { fn } from 'storybook/test';
 import type { Meta, StoryFn } from 'storybook-react-rsbuild';
 import { Earth, Info } from '../../icons';
+import { AgentGlyph } from '../AgentGlyph';
 import {
   Select,
   SelectButtonTag,
@@ -312,6 +320,43 @@ export const WithIcons: StoryFn<typeof meta> = ({ ...args }) => (
   </VStack>
 );
 
+/**
+ * An agent in a tag stands as its character beside its name, with no plate: 16 px in a medium
+ * tag, 20 px in a large one. A person keeps the icon slot above.
+ */
+export const Agent: StoryFn<typeof meta> = ({ ...args }) => (
+  <VStack gap={12} align='stretch'>
+    <HStack gap={8}>
+      <Tag {...args} size='medium' data-testid='tag-agent-medium'>
+        <AgentGlyph agent='radar' size={16} data-testid='tag-agent-medium--glyph' />
+        Radar
+      </Tag>
+      <Tag {...args} size='medium'>
+        <AgentGlyph agent='lens' size={16} />
+        Lens
+      </Tag>
+      <Tag {...args} size='medium'>
+        <AgentGlyph agent='bard' size={16} />
+        Bard
+      </Tag>
+    </HStack>
+    <HStack gap={8}>
+      <Tag {...args} size='large' data-testid='tag-agent-large'>
+        <AgentGlyph agent='radar' size={20} data-testid='tag-agent-large--glyph' />
+        Radar
+      </Tag>
+      <Tag {...args} size='large'>
+        <AgentGlyph agent='lens' size={20} />
+        Lens
+      </Tag>
+      <Tag {...args} size='large'>
+        <AgentGlyph agent='bard' size={20} />
+        Bard
+      </Tag>
+    </HStack>
+  </VStack>
+);
+
 /**
  * A plain click handler, for a chip that navigates or opens rather than toggling — but not as a
  * link, which Carbon rules out for tags.

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

@@ -9,4 +9,4 @@ var e={vD(e,t,i){let r,n;/**
  * @nolint
  * @preventMunge
  * @preserve-invariant-messages
- */var l,s,a=Object.create,o=Object.defineProperty,c=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,h=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,m=(e,t,i,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let n of u(t))f.call(e,n)||n===i||o(e,n,{get:()=>t[n],enumerable:!(r=c(t,n))||r.enumerable});return e},p={},d={$dispatcherGuard:()=>O,$makeReadOnly:()=>$,$reset:()=>x,$structuralCheck:()=>V,c:()=>I,clearRenderCounterRegistry:()=>k,renderCounterRegistry:()=>N,useRenderCounter:()=>D};for(var y in d)o(p,y,{get:d[y],enumerable:!0});e.exports=m(o({},"__esModule",{value:!0}),p);var g=(n=null!=(r=i("C"))?a(h(r)):{},m(r&&r.__esModule?n:o(n,"default",{value:r,enumerable:!0}),r)),{useRef:b,useEffect:S,isValidElement:w}=g,v=null!=(l=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,_=Symbol.for("react.memo_cache_sentinel"),I="function"==typeof(null==(s=g.__COMPILER_RUNTIME)?void 0:s.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let i=0;i<e;i++)t[i]=_;return t[_]=!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 T=null;function R(e){return v.ReactCurrentDispatcher.current=e,v.ReactCurrentDispatcher.current}C.useMemoCache=e=>{if(null!=T)return T.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var E=[];function O(e){let t=v.ReactCurrentDispatcher.current;if(0===e){if(E.push(t),1===E.length&&(T=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.");R(C)}else if(1===e){let e=E.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===E.length&&(T=null),R(e)}else if(2===e)E.push(t),R(T);else if(3===e){let e=E.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");R(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function x(e){for(let t=0;t<e.length;t++)e[t]=_}function $(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var N=new Map;function k(){for(let e of N.values())e.forEach(e=>{e.count=0})}function D(e){let t=b(null);null!=t.current&&(t.current.count+=1),S(()=>{if(null==t.current){let i,r={count:0};null==(i=N.get(e))&&(i=new Set,N.set(e,i)),i.add(r),t.current=r}return()=>{var i;let r;null!==t.current&&(i=t.current,null!=(r=N.get(e))&&r.delete(i))}})}var M=new Set;function V(e,t,i,r,n,l){function s(e,t,s,a){let o=`${r}:${l} [${n}] ${i}${s} changed from ${e} to ${t} at depth ${a}`;M.has(o)||(M.add(o),console.error(o))}!function e(t,i,r,n){if(!(n>2)){if(t!==i)if(typeof t!=typeof i)s(`type ${typeof t}`,`type ${typeof i}`,r,n);else if("object"==typeof t){let l=Array.isArray(t),a=Array.isArray(i);if(null===t&&null!==i)s("null",`type ${typeof i}`,r,n);else if(null===i)s(`type ${typeof t}`,"null",r,n);else if(t instanceof Map)if(i instanceof Map)if(t.size!==i.size)s(`Map instance with size ${t.size}`,`Map instance with size ${i.size}`,r,n);else for(let[l,a]of t)i.has(l)?e(a,i.get(l),`${r}.get(${l})`,n+1):s(`Map instance with key ${l}`,`Map instance without key ${l}`,r,n);else s("Map instance","other value",r,n);else if(i instanceof Map)s("other value","Map instance",r,n);else if(t instanceof Set)if(i instanceof Set)if(t.size!==i.size)s(`Set instance with size ${t.size}`,`Set instance with size ${i.size}`,r,n);else for(let e of i)t.has(e)||s(`Set instance without element ${e}`,`Set instance with element ${e}`,r,n);else s("Set instance","other value",r,n);else if(i instanceof Set)s("other value","Set instance",r,n);else if(l||a)if(l!==a)s(`type ${l?"array":"object"}`,`type ${a?"array":"object"}`,r,n);else if(t.length!==i.length)s(`array with length ${t.length}`,`array with length ${i.length}`,r,n);else for(let l=0;l<t.length;l++)e(t[l],i[l],`${r}[${l}]`,n+1);else if(w(t)||w(i))w(t)!==w(i)?s(`type ${w(t)?"React element":"object"}`,`type ${w(i)?"React element":"object"}`,r,n):t.type!==i.type?s(`React element of type ${t.type}`,`React element of type ${i.type}`,r,n):e(t.props,i.props,`[props of ${r}]`,n+1);else{for(let e in i)e in t||s(`object without key ${e}`,`object with key ${e}`,r,n);for(let l in t)l in i?e(t[l],i[l],`${r}.${l}`,n+1):s(`object with key ${l}`,`object without key ${l}`,r,n)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(i)?isNaN(t)!==isNaN(i)&&s(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(i)?"NaN":"non-NaN value"}`,r,n):t!==i&&s(t,i,r,n)}}}(e,t,"",0)}},p(e,t,i){let r=new WeakMap,n=new WeakMap;function l(e,t,i){let l=t,s=i;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!=s.ref&&!l.prototype?.isReactComponent){let t=l,i=r.get(e);i||(i=new WeakMap,r.set(e,i));let n=i.get(t);n||((n=e.forwardRef((e,i)=>t({...e,ref:i}))).displayName=t.displayName??t.name,i.set(t,n)),l=n}if("string"==typeof l&&"boolean"==typeof s.inert&&((s={...s}).inert?s.inert="":delete s.inert),"string"==typeof l)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in s&&(s={...s,[t]:s[e]},delete s[e]);return"string"==typeof l&&null!=s.ref&&(l=function(e,t){let i=n.get(e);i||(i=new Map,n.set(e,i));let r=i.get(t);if(r)return r;let l=e.forwardRef((i,r)=>{let n=e.useRef(null);if(!n.current||n.current.original!==r){let e;n.current={original:r,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof r){let i=r(t);e="function"==typeof i?i:void 0}else r&&(r.current=t)}}}return e.createElement(t,{...i,ref:n.current.callback})});return l.displayName=`CanvasHost(${t})`,i.set(t,l),l}(e,l)),{type:l,props:s}}function s(e){let t=(t,i,r)=>{let n=l(e,t,i??{});return e.createElement(n.type,void 0===r?n.props:{...n.props,key:r})};return{jsx:t,jsxs:(t,i,r)=>{let n=l(e,t,i??{}),{children:s,...a}=n.props;return e.createElement(n.type,void 0===r?a:{...a,key:r},...Array.isArray(s)?s:[s])},jsxDEV:t,Fragment:e.Fragment}}function a(e){return{...e,createElement:(t,i,...r)=>{let n=l(e,t,i??{});return e.createElement(n.type,n.props,...r)},cloneElement:(t,i,...r)=>{let n=e.cloneElement(t,i??void 0,...r),s=n.ref,a=l(e,n.type,{...n.props,ref:s});return a.type===n.type&&"string"!=typeof n.type?n:e.createElement(a.type,{...a.props,key:n.key})}}}i.d(t,{MA:()=>s,YJ:()=>a})},C(e,t,i){i.r(t);let r=(0,i("p").YJ)(window.React),{Children:n,Component:l,Fragment:s,Profiler:a,PureComponent:o,StrictMode:c,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:h,act:f,cloneElement:m,createContext:p,createElement:d,createFactory:y,createRef:g,forwardRef:b,isValidElement:S,lazy:w,memo:v,startTransition:_,unstable_act:I,useCallback:C,useContext:T,useDebugValue:R,useDeferredValue:E,useEffect:O,useId:x,useImperativeHandle:$,useInsertionEffect:N,useLayoutEffect:k,useMemo:D,useReducer:M,useRef:V,useState:j,useSyncExternalStore:z,useTransition:A,version:U,use:W}=r;i.d(t,{},{Children:n,Component:l,Fragment:s,Profiler:a,PureComponent:o,StrictMode:c,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:h,act:f,cloneElement:m,createContext:p,createElement:d,createFactory:y,createRef:g,default:r,forwardRef:b,isValidElement:S,lazy:w,memo:v,startTransition:_,unstable_act:I,use:W,useCallback:C,useContext:T,useDebugValue:R,useDeferredValue:E,useEffect:O,useId:x,useImperativeHandle:$,useInsertionEffect:N,useLayoutEffect:k,useMemo:D,useReducer:M,useRef:V,useState:j,useSyncExternalStore:z,useTransition:A,version:U})}},t={};function i(r){var n=t[r];if(void 0!==n)return n.exports;var l=t[r]={exports:{}};return e[r](l,l.exports,i),l.exports}i.d=(e,t,r)=>{var n=(t,r)=>{for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,[r]:t[n]})};n(t,"get"),n(r,"value")},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.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:n}=(0,i("p").MA)(window.React);var l=i("vD"),s=i("C"),a=Object.defineProperty,o=(e,t,i)=>{let r;return(r="symbol"!=typeof t?t+"":t)in e?a(e,r,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[r]=i},c=e=>null!=e&&"object"==typeof e&&!Array.isArray(e),u=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);Function.prototype.toString.call(Object);var h=e=>e?.constructor.name==="Array",f=(e,t)=>{if(Object.is(e,t))return!0;if(null==e&&null!=t||null!=e&&null==t)return!1;if("function"==typeof e?.isEqual&&"function"==typeof t?.isEqual)return e.isEqual(t);if("function"==typeof e&&"function"==typeof t)return e.toString()===t.toString();if(h(e)&&h(t))return((e,t)=>{if(e.length!==t.length)return!1;for(let i=0;i<e.length;i++)if(!f(e[i],t[i]))return!1;return!0})(Array.from(e),Array.from(t));if("object"!=typeof e||"object"!=typeof t)return!1;let i=Object.keys(t??Object.create(null)),r=i.length;for(let t=0;t<r;t++)if(!Reflect.has(e,i[t]))return!1;for(let n=0;n<r;n++){let r=i[n];if(!f(e[r],t[r]))return!1}return!0},m={itemToValue:e=>"string"==typeof e?e:c(e)&&u(e,"value")?e.value:"",itemToString:e=>"string"==typeof e?e:c(e)&&u(e,"label")?e.label:m.itemToValue(e),isItemDisabled:e=>!!(c(e)&&u(e,"disabled"))&&!!e.disabled},p=class e{constructor(t){o(this,"options",t),o(this,"items"),o(this,"indexMap",null),o(this,"copy",t=>new e({...this.options,items:t??[...this.items]})),o(this,"isEqual",e=>f(this.items,e.items)),o(this,"setItems",e=>this.copy(e)),o(this,"getValues",(e=this.items)=>{let t=[];for(let i of e){let e=this.getItemValue(i);null!=e&&t.push(e)}return t}),o(this,"find",e=>{if(null==e)return null;let t=this.indexOf(e);return -1!==t?this.at(t):null}),o(this,"findMany",e=>{let t=[];for(let i of e){let e=this.find(i);null!=e&&t.push(e)}return t}),o(this,"at",e=>{if(!this.options.groupBy&&!this.options.groupSort)return this.items[e]??null;let t=0;for(let[,i]of this.group())for(let r of i){if(t===e)return r;t++}return null}),o(this,"sortFn",(e,t)=>(this.indexOf(e)??0)-(this.indexOf(t)??0)),o(this,"sort",e=>[...e].sort(this.sortFn.bind(this))),o(this,"getItemValue",e=>null==e?null:this.options.itemToValue?.(e)??m.itemToValue(e)),o(this,"getItemDisabled",e=>null!=e&&(this.options.isItemDisabled?.(e)??m.isItemDisabled(e))),o(this,"stringifyItem",e=>null==e?null:this.options.itemToString?.(e)??m.itemToString(e)),o(this,"stringify",e=>null==e?null:this.stringifyItem(this.find(e))),o(this,"stringifyItems",(e,t=", ")=>{let i=[];for(let t of e){let e=this.stringifyItem(t);null!=e&&i.push(e)}return i.join(t)}),o(this,"stringifyMany",(e,t)=>this.stringifyItems(this.findMany(e),t)),o(this,"has",e=>-1!==this.indexOf(e)),o(this,"hasItem",e=>null!=e&&this.has(this.getItemValue(e))),o(this,"group",()=>{let{groupBy:e,groupSort:t}=this.options;if(!e)return[["",[...this.items]]];let i=new Map;this.items.forEach((t,r)=>{let n=e(t,r);i.has(n)||i.set(n,[]),i.get(n).push(t)});let r=Array.from(i.entries());return t&&r.sort(([e],[i])=>{if("function"==typeof t)return t(e,i);if(Array.isArray(t)){let r=t.indexOf(e),n=t.indexOf(i);return -1===r?1:-1===n?-1:r-n}return"asc"===t?e.localeCompare(i):"desc"===t?i.localeCompare(e):0}),r}),o(this,"getNextValue",(e,t=1,i=!1)=>{let r=this.indexOf(e);if(-1===r)return null;for(r=i?Math.min(r+t,this.size-1):r+t;r<=this.size&&this.getItemDisabled(this.at(r));)r++;return this.getItemValue(this.at(r))}),o(this,"getPreviousValue",(e,t=1,i=!1)=>{let r=this.indexOf(e);if(-1===r)return null;for(r=i?Math.max(r-t,0):r-t;r>=0&&this.getItemDisabled(this.at(r));)r--;return this.getItemValue(this.at(r))}),o(this,"indexOf",e=>{if(null==e)return -1;if(!this.options.groupBy&&!this.options.groupSort)return this.items.findIndex(t=>this.getItemValue(t)===e);if(!this.indexMap){this.indexMap=new Map;let e=0;for(let[,t]of this.group())for(let i of t){let t=this.getItemValue(i);null!=t&&this.indexMap.set(t,e),e++}}return this.indexMap.get(e)??-1}),o(this,"getByText",(e,t)=>{let i=null!=t?this.indexOf(t):-1,r=1===e.length;for(let n=0;n<this.items.length;n++){let l=this.items[(i+n+1)%this.items.length];if((!r||this.getItemValue(l)!==t)&&!this.getItemDisabled(l)&&d(this.stringifyItem(l),e))return l}}),o(this,"search",(e,t)=>{let{state:i,currentValue:r,timeout:n=350}=t,l=i.keysSoFar+e,s=l.length>1&&Array.from(l).every(e=>e===l[0])?l[0]:l,a=this.getByText(s,r),o=this.getItemValue(a);function c(){clearTimeout(i.timer),i.timer=-1}return!function e(t){i.keysSoFar=t,c(),""!==t&&(i.timer=+setTimeout(()=>{e(""),c()},n))}(l),o}),o(this,"update",(e,t)=>{let i=this.indexOf(e);return -1===i?this:this.copy([...this.items.slice(0,i),t,...this.items.slice(i+1)])}),o(this,"upsert",(e,t,i="append")=>{let r=this.indexOf(e);return -1===r?("append"===i?this.append:this.prepend)(t):this.copy([...this.items.slice(0,r),t,...this.items.slice(r+1)])}),o(this,"insert",(e,...t)=>this.copy(y(this.items,e,...t))),o(this,"insertBefore",(e,...t)=>{let i=this.indexOf(e);if(-1===i)if(0!==this.items.length)return this;else i=0;return this.copy(y(this.items,i,...t))}),o(this,"insertAfter",(e,...t)=>{let i=this.indexOf(e);if(-1===i)if(0!==this.items.length)return this;else i=0;return this.copy(y(this.items,i+1,...t))}),o(this,"prepend",(...e)=>this.copy(y(this.items,0,...e))),o(this,"append",(...e)=>this.copy(y(this.items,this.items.length,...e))),o(this,"filter",e=>{let t=this.items.filter((t,i)=>e(this.stringifyItem(t),i,t));return this.copy(t)}),o(this,"remove",(...e)=>{let t=e.map(e=>"string"==typeof e?e:this.getItemValue(e));return this.copy(this.items.filter(e=>{let i=this.getItemValue(e);return null!=i&&!t.includes(i)}))}),o(this,"move",(e,t)=>{let i=this.indexOf(e);return -1===i?this:this.copy(g(this.items,[i],t))}),o(this,"moveBefore",(e,...t)=>{let i=this.items.findIndex(t=>this.getItemValue(t)===e);if(-1===i)return this;let r=t.map(e=>this.items.findIndex(t=>this.getItemValue(t)===e)).sort((e,t)=>e-t);return this.copy(g(this.items,r,i))}),o(this,"moveAfter",(e,...t)=>{let i=this.items.findIndex(t=>this.getItemValue(t)===e);if(-1===i)return this;let r=t.map(e=>this.items.findIndex(t=>this.getItemValue(t)===e)).sort((e,t)=>e-t);return this.copy(g(this.items,r,i+1))}),o(this,"reorder",(e,t)=>this.copy(g(this.items,[e],t))),o(this,"compareValue",(e,t)=>{let i=this.indexOf(e),r=this.indexOf(t);return i<r?-1:+(i>r)}),o(this,"range",(e,t)=>{let i=[],r=e;for(;null!=r;){if(this.find(r)&&i.push(r),r===t)return i;r=this.getNextValue(r)}return[]}),o(this,"getValueRange",(e,t)=>e&&t?0>=this.compareValue(e,t)?this.range(e,t):this.range(t,e):[]),o(this,"toString",()=>{let e="";for(let t of this.items)e+=[this.getItemValue(t),this.stringifyItem(t),this.getItemDisabled(t)].filter(Boolean).join(":")+",";return e}),o(this,"toJSON",()=>({size:this.size,first:this.firstValue,last:this.lastValue})),this.items=[...t.items]}get size(){return this.items.length}get firstValue(){let e=0;for(;this.getItemDisabled(this.at(e));)e++;return this.getItemValue(this.at(e))}get lastValue(){let e=this.size-1;for(;this.getItemDisabled(this.at(e));)e--;return this.getItemValue(this.at(e))}*[Symbol.iterator](){yield*this.items}},d=(e,t)=>!!e?.toLowerCase().startsWith(t.toLowerCase());function y(e,t,...i){return[...e.slice(0,t),...i,...e.slice(t)]}function g(e,t,i){let r=(t=[...t].sort((e,t)=>e-t)).map(t=>e[t]);for(let i=t.length-1;i>=0;i--)e=[...e.slice(0,t[i]),...e.slice(t[i]+1)];return i=Math.max(0,i-t.filter(e=>e<i).length),[...e.slice(0,i),...r,...e.slice(i)]}let b=window.WallarmDS.Icons.Earth,S=window.WallarmDS.Icons.Info,w=window.WallarmDS.Select,v=window.WallarmDS.SelectButtonTag,_=window.WallarmDS.SelectButtonTagValue,I=window.WallarmDS.SelectContent,C=window.WallarmDS.SelectOption,T=window.WallarmDS.SelectOptionIndicator,R=window.WallarmDS.SelectOptionText,E=window.WallarmDS.SelectPositioner,O=window.WallarmDS.HStack,x=window.WallarmDS.VStack,$=window.WallarmDS.Tag,N=window.WallarmDS.TagClose,k=(function(e=()=>{}){let t=(...t)=>e(...t);for(let i of["mockName","mockReturnValue","mockResolvedValue","mockImplementation"])t[i]=r=>("mockImplementation"===i?e=r:"mockReturnValue"===i?e=()=>r:"mockResolvedValue"===i&&(e=()=>Promise.resolve(r)),t);return t})().mockName("onTagClick"),D={title:"Status Indication/Tag",component:$,subcomponents:{TagClose:N},parameters:{layout:"centered",docs:{description:{component:"An interactive chip for a keyword or attribute the reader can select or remove — a chip that only states a value is a `Badge`. Give it one job: Carbon warns against tags carrying several functions at once, and a chip that both filters and deletes is one people trigger by accident."}}},argTypes:{size:{control:"select",options:["medium","large"]},disabled:{control:"boolean"}}};function M(e){return"UTC+2"===e.value}function V(i){return t(C,{item:i,children:[e(R,{children:i.label}),e(T,{})]},i.value)}function j(i){return t(C,{item:i,children:[e(R,{children:i.label}),e(T,{})]},i.value)}let z=[{name:"Basic",story:t=>{let i,r,n=(0,l.c)(4);return n[0]!==t?({...i}=t,n[0]=t,n[1]=i):i=n[1],n[2]!==i?(r=e($,{...i,children:"Tag"}),n[2]=i,n[3]=r):r=n[3],r},meta:D},{name:"Sizes",story:i=>{let r,n,s=(0,l.c)(4);return s[0]!==i?({...r}=i,s[0]=i,s[1]=r):r=s[1],s[2]!==r?(n=t(O,{align:"center",gap:8,children:[e($,{...r,size:"medium",children:"Medium Tag"}),e($,{...r,size:"large",children:"Large Tag"})]}),s[2]=r,s[3]=n):n=s[3],n},meta:D},{name:"Disabled",story:i=>{let r,n,s=(0,l.c)(4);return s[0]!==i?({...r}=i,s[0]=i,s[1]=r):r=s[1],s[2]!==r?(n=t(O,{gap:8,children:[e($,{...r,size:"medium",disabled:!0,children:"Disabled Medium"}),e($,{...r,size:"large",disabled:!0,children:"Disabled Large"})]}),s[2]=r,s[3]=n):n=s[3],n},meta:D},{name:"Closable",story:i=>{let r,a,o,c=(0,l.c)(7);c[0]!==i?({...r}=i,c[0]=i,c[1]=r):r=c[1];let[u,h]=(0,s.useState)(!0);return c[2]!==r||c[3]!==u?(a=u&&t($,{...r,"data-testid":"tag",children:["Closable tag",e(N,{onClick:()=>h(!1)})]}),c[2]=r,c[3]=u,c[4]=a):a=c[4],c[5]!==a?(o=e(n,{children:a}),c[5]=a,c[6]=o):o=c[6],o},meta:D},{name:"Selectable",story:()=>{let i,r,n,s,a,o,c=(0,l.c)(6);return c[0]===Symbol.for("react.memo_cache_sentinel")?(r=new p({items:[{value:"UTC",label:"UTC"},{value:"UTC+1",label:"UTC+1"},{value:"UTC+2",label:"UTC+2"},{value:"UTC+3",label:"UTC+3"},{value:"UTC+4",label:"UTC+4"},{value:"UTC+5",label:"UTC+5"},{value:"UTC+6",label:"UTC+6"},{value:"UTC+7",label:"UTC+7"}],isItemDisabled:M}),i=x,n=8,s=t(w,{collection:r,children:[t(v,{children:[e(b,{}),e(_,{placeholder:"Timezone"})]}),e(E,{children:e(I,{children:r.items.map(V)})})]}),c[0]=i,c[1]=r,c[2]=n,c[3]=s):(i=c[0],r=c[1],n=c[2],s=c[3]),c[4]===Symbol.for("react.memo_cache_sentinel")?(a=t(v,{size:"large",children:[e(b,{}),e(_,{placeholder:"Timezone"})]}),c[4]=a):a=c[4],c[5]===Symbol.for("react.memo_cache_sentinel")?(o=t(i,{gap:n,children:[s,t(w,{collection:r,children:[a,e(E,{children:e(I,{children:r.items.map(j)})})]})]}),c[5]=o):o=c[5],o},meta:D},{name:"WithIcons",story:i=>{let r,n,s,a,o,c,u,h,f,m,p,d,y,g,w,v,_,I,C,T,R=(0,l.c)(35);return R[0]!==i?({...r}=i,R[0]=i,R[1]=r):r=R[1],R[2]===Symbol.for("react.memo_cache_sentinel")?(n=e("span",{className:"sb-annotation",children:"medium"}),R[2]=n):n=R[2],R[3]===Symbol.for("react.memo_cache_sentinel")?(s=e(b,{}),R[3]=s):s=R[3],R[4]!==r?(a=t($,{...r,size:"medium",children:[s,"Tag with left icon"]}),R[4]=r,R[5]=a):a=R[5],R[6]===Symbol.for("react.memo_cache_sentinel")?(o=e(S,{}),R[6]=o):o=R[6],R[7]!==r?(c=t($,{...r,size:"medium",children:["Tag with right icon",o]}),R[7]=r,R[8]=c):c=R[8],R[9]===Symbol.for("react.memo_cache_sentinel")?(u=e(b,{}),R[9]=u):u=R[9],R[10]===Symbol.for("react.memo_cache_sentinel")?(h=e(S,{}),R[10]=h):h=R[10],R[11]!==r?(f=t($,{...r,size:"medium",children:[u,"Tag with left and right icons",h]}),R[11]=r,R[12]=f):f=R[12],R[13]!==a||R[14]!==c||R[15]!==f?(m=t(x,{gap:8,children:[n,t(O,{gap:8,children:[a,c,f]})]}),R[13]=a,R[14]=c,R[15]=f,R[16]=m):m=R[16],R[17]===Symbol.for("react.memo_cache_sentinel")?(p=e("span",{className:"sb-annotation",children:"large"}),R[17]=p):p=R[17],R[18]===Symbol.for("react.memo_cache_sentinel")?(d=e(b,{}),R[18]=d):d=R[18],R[19]!==r?(y=t($,{...r,size:"large",children:[d,"Tag with left icon"]}),R[19]=r,R[20]=y):y=R[20],R[21]===Symbol.for("react.memo_cache_sentinel")?(g=e(S,{}),R[21]=g):g=R[21],R[22]!==r?(w=t($,{...r,size:"large",children:["Tag with right icon",g]}),R[22]=r,R[23]=w):w=R[23],R[24]===Symbol.for("react.memo_cache_sentinel")?(v=e(b,{}),R[24]=v):v=R[24],R[25]===Symbol.for("react.memo_cache_sentinel")?(_=e(S,{}),R[25]=_):_=R[25],R[26]!==r?(I=t($,{...r,size:"large",children:[v,"Tag with left and right icons",_]}),R[26]=r,R[27]=I):I=R[27],R[28]!==y||R[29]!==w||R[30]!==I?(C=t(x,{gap:8,children:[p,t(O,{gap:8,children:[y,w,I]})]}),R[28]=y,R[29]=w,R[30]=I,R[31]=C):C=R[31],R[32]!==C||R[33]!==m?(T=t(x,{gap:12,align:"stretch",children:[m,C]}),R[32]=C,R[33]=m,R[34]=T):T=R[34],T},meta:D},{name:"WithOnClick",story:t=>{let i,r,n=(0,l.c)(4);return n[0]!==t?({...i}=t,n[0]=t,n[1]=i):i=n[1],n[2]!==i?(r=e($,{...i,onClick:k,children:"Click me"}),n[2]=i,n[3]=r):r=n[3],r},meta:D}];function A({entry:e}){let{story:t,meta:i}=e,r={...i.args,...t.args},n="function"==typeof t||t.$$typeof?t:t.render||i.render||i.component,l=()=>s.default.createElement(n,r),a={args:r,globals:{theme:"light"},parameters:{...i.parameters,...t.parameters},viewMode:"story"};for(let e of[...i.decorators||[],...t.decorators||[]].reverse()){let t=l;l=()=>e(t,a)}return s.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},s.default.createElement("h2",{className:"text-sm mb-12"},e.name),s.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(s.default.createElement(window.WallarmDS.Root,null,z.map((e,t)=>s.default.createElement(A,{key:t,entry:e})))),t}}})();
+ */var l,a,s=Object.create,o=Object.defineProperty,c=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,h=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,f=(e,t,i,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let n of u(t))m.call(e,n)||n===i||o(e,n,{get:()=>t[n],enumerable:!(r=c(t,n))||r.enumerable});return e},d={},p={$dispatcherGuard:()=>O,$makeReadOnly:()=>$,$reset:()=>x,$structuralCheck:()=>z,c:()=>I,clearRenderCounterRegistry:()=>N,renderCounterRegistry:()=>D,useRenderCounter:()=>k};for(var g in p)o(d,g,{get:p[g],enumerable:!0});e.exports=f(o({},"__esModule",{value:!0}),d);var y=(n=null!=(r=i("C"))?s(h(r)):{},f(r&&r.__esModule?n:o(n,"default",{value:r,enumerable:!0}),r)),{useRef:b,useEffect:S,isValidElement:w}=y,_=null!=(l=y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:y.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),I="function"==typeof(null==(a=y.__COMPILER_RUNTIME)?void 0:a.c)?y.__COMPILER_RUNTIME.c:function(e){return y.useMemo(()=>{let t=Array(e);for(let i=0;i<e;i++)t[i]=v;return t[v]=!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 T=null;function R(e){return _.ReactCurrentDispatcher.current=e,_.ReactCurrentDispatcher.current}C.useMemoCache=e=>{if(null!=T)return T.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var E=[];function O(e){let t=_.ReactCurrentDispatcher.current;if(0===e){if(E.push(t),1===E.length&&(T=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.");R(C)}else if(1===e){let e=E.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===E.length&&(T=null),R(e)}else if(2===e)E.push(t),R(T);else if(3===e){let e=E.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");R(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function x(e){for(let t=0;t<e.length;t++)e[t]=v}function $(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var D=new Map;function N(){for(let e of D.values())e.forEach(e=>{e.count=0})}function k(e){let t=b(null);null!=t.current&&(t.current.count+=1),S(()=>{if(null==t.current){let i,r={count:0};null==(i=D.get(e))&&(i=new Set,D.set(e,i)),i.add(r),t.current=r}return()=>{var i;let r;null!==t.current&&(i=t.current,null!=(r=D.get(e))&&r.delete(i))}})}var M=new Set;function z(e,t,i,r,n,l){function a(e,t,a,s){let o=`${r}:${l} [${n}] ${i}${a} changed from ${e} to ${t} at depth ${s}`;M.has(o)||(M.add(o),console.error(o))}!function e(t,i,r,n){if(!(n>2)){if(t!==i)if(typeof t!=typeof i)a(`type ${typeof t}`,`type ${typeof i}`,r,n);else if("object"==typeof t){let l=Array.isArray(t),s=Array.isArray(i);if(null===t&&null!==i)a("null",`type ${typeof i}`,r,n);else if(null===i)a(`type ${typeof t}`,"null",r,n);else if(t instanceof Map)if(i instanceof Map)if(t.size!==i.size)a(`Map instance with size ${t.size}`,`Map instance with size ${i.size}`,r,n);else for(let[l,s]of t)i.has(l)?e(s,i.get(l),`${r}.get(${l})`,n+1):a(`Map instance with key ${l}`,`Map instance without key ${l}`,r,n);else a("Map instance","other value",r,n);else if(i instanceof Map)a("other value","Map instance",r,n);else if(t instanceof Set)if(i instanceof Set)if(t.size!==i.size)a(`Set instance with size ${t.size}`,`Set instance with size ${i.size}`,r,n);else for(let e of i)t.has(e)||a(`Set instance without element ${e}`,`Set instance with element ${e}`,r,n);else a("Set instance","other value",r,n);else if(i instanceof Set)a("other value","Set instance",r,n);else if(l||s)if(l!==s)a(`type ${l?"array":"object"}`,`type ${s?"array":"object"}`,r,n);else if(t.length!==i.length)a(`array with length ${t.length}`,`array with length ${i.length}`,r,n);else for(let l=0;l<t.length;l++)e(t[l],i[l],`${r}[${l}]`,n+1);else if(w(t)||w(i))w(t)!==w(i)?a(`type ${w(t)?"React element":"object"}`,`type ${w(i)?"React element":"object"}`,r,n):t.type!==i.type?a(`React element of type ${t.type}`,`React element of type ${i.type}`,r,n):e(t.props,i.props,`[props of ${r}]`,n+1);else{for(let e in i)e in t||a(`object without key ${e}`,`object with key ${e}`,r,n);for(let l in t)l in i?e(t[l],i[l],`${r}.${l}`,n+1):a(`object with key ${l}`,`object without key ${l}`,r,n)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(i)?isNaN(t)!==isNaN(i)&&a(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(i)?"NaN":"non-NaN value"}`,r,n):t!==i&&a(t,i,r,n)}}}(e,t,"",0)}},p(e,t,i){let r=new WeakMap,n=new WeakMap;function l(e,t,i){let l=t,a=i;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!=a.ref&&!l.prototype?.isReactComponent){let t=l,i=r.get(e);i||(i=new WeakMap,r.set(e,i));let n=i.get(t);n||((n=e.forwardRef((e,i)=>t({...e,ref:i}))).displayName=t.displayName??t.name,i.set(t,n)),l=n}if("string"==typeof l&&"boolean"==typeof a.inert&&((a={...a}).inert?a.inert="":delete a.inert),"string"==typeof l)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in a&&(a={...a,[t]:a[e]},delete a[e]);return"string"==typeof l&&null!=a.ref&&(l=function(e,t){let i=n.get(e);i||(i=new Map,n.set(e,i));let r=i.get(t);if(r)return r;let l=e.forwardRef((i,r)=>{let n=e.useRef(null);if(!n.current||n.current.original!==r){let e;n.current={original:r,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof r){let i=r(t);e="function"==typeof i?i:void 0}else r&&(r.current=t)}}}return e.createElement(t,{...i,ref:n.current.callback})});return l.displayName=`CanvasHost(${t})`,i.set(t,l),l}(e,l)),{type:l,props:a}}function a(e){let t=(t,i,r)=>{let n=l(e,t,i??{});return e.createElement(n.type,void 0===r?n.props:{...n.props,key:r})};return{jsx:t,jsxs:(t,i,r)=>{let n=l(e,t,i??{}),{children:a,...s}=n.props;return e.createElement(n.type,void 0===r?s:{...s,key:r},...Array.isArray(a)?a:[a])},jsxDEV:t,Fragment:e.Fragment}}function s(e){return{...e,createElement:(t,i,...r)=>{let n=l(e,t,i??{});return e.createElement(n.type,n.props,...r)},cloneElement:(t,i,...r)=>{let n=e.cloneElement(t,i??void 0,...r),a=n.ref,s=l(e,n.type,{...n.props,ref:a});return s.type===n.type&&"string"!=typeof n.type?n:e.createElement(s.type,{...s.props,key:n.key})}}}i.d(t,{MA:()=>a,YJ:()=>s})},C(e,t,i){i.r(t);let r=(0,i("p").YJ)(window.React),{Children:n,Component:l,Fragment:a,Profiler:s,PureComponent:o,StrictMode:c,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:h,act:m,cloneElement:f,createContext:d,createElement:p,createFactory:g,createRef:y,forwardRef:b,isValidElement:S,lazy:w,memo:_,startTransition:v,unstable_act:I,useCallback:C,useContext:T,useDebugValue:R,useDeferredValue:E,useEffect:O,useId:x,useImperativeHandle:$,useInsertionEffect:D,useLayoutEffect:N,useMemo:k,useReducer:M,useRef:z,useState:V,useSyncExternalStore:j,useTransition:A,version:U,use:W}=r;i.d(t,{},{Children:n,Component:l,Fragment:a,Profiler:s,PureComponent:o,StrictMode:c,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:h,act:m,cloneElement:f,createContext:d,createElement:p,createFactory:g,createRef:y,default:r,forwardRef:b,isValidElement:S,lazy:w,memo:_,startTransition:v,unstable_act:I,use:W,useCallback:C,useContext:T,useDebugValue:R,useDeferredValue:E,useEffect:O,useId:x,useImperativeHandle:$,useInsertionEffect:D,useLayoutEffect:N,useMemo:k,useReducer:M,useRef:z,useState:V,useSyncExternalStore:j,useTransition:A,version:U})}},t={};function i(r){var n=t[r];if(void 0!==n)return n.exports;var l=t[r]={exports:{}};return e[r](l,l.exports,i),l.exports}i.d=(e,t,r)=>{var n=(t,r)=>{for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,[r]:t[n]})};n(t,"get"),n(r,"value")},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.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:n}=(0,i("p").MA)(window.React);var l=i("vD"),a=i("C"),s=Object.defineProperty,o=(e,t,i)=>{let r;return(r="symbol"!=typeof t?t+"":t)in e?s(e,r,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[r]=i},c=e=>null!=e&&"object"==typeof e&&!Array.isArray(e),u=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);Function.prototype.toString.call(Object);var h=e=>e?.constructor.name==="Array",m=(e,t)=>{if(Object.is(e,t))return!0;if(null==e&&null!=t||null!=e&&null==t)return!1;if("function"==typeof e?.isEqual&&"function"==typeof t?.isEqual)return e.isEqual(t);if("function"==typeof e&&"function"==typeof t)return e.toString()===t.toString();if(h(e)&&h(t))return((e,t)=>{if(e.length!==t.length)return!1;for(let i=0;i<e.length;i++)if(!m(e[i],t[i]))return!1;return!0})(Array.from(e),Array.from(t));if("object"!=typeof e||"object"!=typeof t)return!1;let i=Object.keys(t??Object.create(null)),r=i.length;for(let t=0;t<r;t++)if(!Reflect.has(e,i[t]))return!1;for(let n=0;n<r;n++){let r=i[n];if(!m(e[r],t[r]))return!1}return!0},f={itemToValue:e=>"string"==typeof e?e:c(e)&&u(e,"value")?e.value:"",itemToString:e=>"string"==typeof e?e:c(e)&&u(e,"label")?e.label:f.itemToValue(e),isItemDisabled:e=>!!(c(e)&&u(e,"disabled"))&&!!e.disabled},d=class e{constructor(t){o(this,"options",t),o(this,"items"),o(this,"indexMap",null),o(this,"copy",t=>new e({...this.options,items:t??[...this.items]})),o(this,"isEqual",e=>m(this.items,e.items)),o(this,"setItems",e=>this.copy(e)),o(this,"getValues",(e=this.items)=>{let t=[];for(let i of e){let e=this.getItemValue(i);null!=e&&t.push(e)}return t}),o(this,"find",e=>{if(null==e)return null;let t=this.indexOf(e);return -1!==t?this.at(t):null}),o(this,"findMany",e=>{let t=[];for(let i of e){let e=this.find(i);null!=e&&t.push(e)}return t}),o(this,"at",e=>{if(!this.options.groupBy&&!this.options.groupSort)return this.items[e]??null;let t=0;for(let[,i]of this.group())for(let r of i){if(t===e)return r;t++}return null}),o(this,"sortFn",(e,t)=>(this.indexOf(e)??0)-(this.indexOf(t)??0)),o(this,"sort",e=>[...e].sort(this.sortFn.bind(this))),o(this,"getItemValue",e=>null==e?null:this.options.itemToValue?.(e)??f.itemToValue(e)),o(this,"getItemDisabled",e=>null!=e&&(this.options.isItemDisabled?.(e)??f.isItemDisabled(e))),o(this,"stringifyItem",e=>null==e?null:this.options.itemToString?.(e)??f.itemToString(e)),o(this,"stringify",e=>null==e?null:this.stringifyItem(this.find(e))),o(this,"stringifyItems",(e,t=", ")=>{let i=[];for(let t of e){let e=this.stringifyItem(t);null!=e&&i.push(e)}return i.join(t)}),o(this,"stringifyMany",(e,t)=>this.stringifyItems(this.findMany(e),t)),o(this,"has",e=>-1!==this.indexOf(e)),o(this,"hasItem",e=>null!=e&&this.has(this.getItemValue(e))),o(this,"group",()=>{let{groupBy:e,groupSort:t}=this.options;if(!e)return[["",[...this.items]]];let i=new Map;this.items.forEach((t,r)=>{let n=e(t,r);i.has(n)||i.set(n,[]),i.get(n).push(t)});let r=Array.from(i.entries());return t&&r.sort(([e],[i])=>{if("function"==typeof t)return t(e,i);if(Array.isArray(t)){let r=t.indexOf(e),n=t.indexOf(i);return -1===r?1:-1===n?-1:r-n}return"asc"===t?e.localeCompare(i):"desc"===t?i.localeCompare(e):0}),r}),o(this,"getNextValue",(e,t=1,i=!1)=>{let r=this.indexOf(e);if(-1===r)return null;for(r=i?Math.min(r+t,this.size-1):r+t;r<=this.size&&this.getItemDisabled(this.at(r));)r++;return this.getItemValue(this.at(r))}),o(this,"getPreviousValue",(e,t=1,i=!1)=>{let r=this.indexOf(e);if(-1===r)return null;for(r=i?Math.max(r-t,0):r-t;r>=0&&this.getItemDisabled(this.at(r));)r--;return this.getItemValue(this.at(r))}),o(this,"indexOf",e=>{if(null==e)return -1;if(!this.options.groupBy&&!this.options.groupSort)return this.items.findIndex(t=>this.getItemValue(t)===e);if(!this.indexMap){this.indexMap=new Map;let e=0;for(let[,t]of this.group())for(let i of t){let t=this.getItemValue(i);null!=t&&this.indexMap.set(t,e),e++}}return this.indexMap.get(e)??-1}),o(this,"getByText",(e,t)=>{let i=null!=t?this.indexOf(t):-1,r=1===e.length;for(let n=0;n<this.items.length;n++){let l=this.items[(i+n+1)%this.items.length];if((!r||this.getItemValue(l)!==t)&&!this.getItemDisabled(l)&&p(this.stringifyItem(l),e))return l}}),o(this,"search",(e,t)=>{let{state:i,currentValue:r,timeout:n=350}=t,l=i.keysSoFar+e,a=l.length>1&&Array.from(l).every(e=>e===l[0])?l[0]:l,s=this.getByText(a,r),o=this.getItemValue(s);function c(){clearTimeout(i.timer),i.timer=-1}return!function e(t){i.keysSoFar=t,c(),""!==t&&(i.timer=+setTimeout(()=>{e(""),c()},n))}(l),o}),o(this,"update",(e,t)=>{let i=this.indexOf(e);return -1===i?this:this.copy([...this.items.slice(0,i),t,...this.items.slice(i+1)])}),o(this,"upsert",(e,t,i="append")=>{let r=this.indexOf(e);return -1===r?("append"===i?this.append:this.prepend)(t):this.copy([...this.items.slice(0,r),t,...this.items.slice(r+1)])}),o(this,"insert",(e,...t)=>this.copy(g(this.items,e,...t))),o(this,"insertBefore",(e,...t)=>{let i=this.indexOf(e);if(-1===i)if(0!==this.items.length)return this;else i=0;return this.copy(g(this.items,i,...t))}),o(this,"insertAfter",(e,...t)=>{let i=this.indexOf(e);if(-1===i)if(0!==this.items.length)return this;else i=0;return this.copy(g(this.items,i+1,...t))}),o(this,"prepend",(...e)=>this.copy(g(this.items,0,...e))),o(this,"append",(...e)=>this.copy(g(this.items,this.items.length,...e))),o(this,"filter",e=>{let t=this.items.filter((t,i)=>e(this.stringifyItem(t),i,t));return this.copy(t)}),o(this,"remove",(...e)=>{let t=e.map(e=>"string"==typeof e?e:this.getItemValue(e));return this.copy(this.items.filter(e=>{let i=this.getItemValue(e);return null!=i&&!t.includes(i)}))}),o(this,"move",(e,t)=>{let i=this.indexOf(e);return -1===i?this:this.copy(y(this.items,[i],t))}),o(this,"moveBefore",(e,...t)=>{let i=this.items.findIndex(t=>this.getItemValue(t)===e);if(-1===i)return this;let r=t.map(e=>this.items.findIndex(t=>this.getItemValue(t)===e)).sort((e,t)=>e-t);return this.copy(y(this.items,r,i))}),o(this,"moveAfter",(e,...t)=>{let i=this.items.findIndex(t=>this.getItemValue(t)===e);if(-1===i)return this;let r=t.map(e=>this.items.findIndex(t=>this.getItemValue(t)===e)).sort((e,t)=>e-t);return this.copy(y(this.items,r,i+1))}),o(this,"reorder",(e,t)=>this.copy(y(this.items,[e],t))),o(this,"compareValue",(e,t)=>{let i=this.indexOf(e),r=this.indexOf(t);return i<r?-1:+(i>r)}),o(this,"range",(e,t)=>{let i=[],r=e;for(;null!=r;){if(this.find(r)&&i.push(r),r===t)return i;r=this.getNextValue(r)}return[]}),o(this,"getValueRange",(e,t)=>e&&t?0>=this.compareValue(e,t)?this.range(e,t):this.range(t,e):[]),o(this,"toString",()=>{let e="";for(let t of this.items)e+=[this.getItemValue(t),this.stringifyItem(t),this.getItemDisabled(t)].filter(Boolean).join(":")+",";return e}),o(this,"toJSON",()=>({size:this.size,first:this.firstValue,last:this.lastValue})),this.items=[...t.items]}get size(){return this.items.length}get firstValue(){let e=0;for(;this.getItemDisabled(this.at(e));)e++;return this.getItemValue(this.at(e))}get lastValue(){let e=this.size-1;for(;this.getItemDisabled(this.at(e));)e--;return this.getItemValue(this.at(e))}*[Symbol.iterator](){yield*this.items}},p=(e,t)=>!!e?.toLowerCase().startsWith(t.toLowerCase());function g(e,t,...i){return[...e.slice(0,t),...i,...e.slice(t)]}function y(e,t,i){let r=(t=[...t].sort((e,t)=>e-t)).map(t=>e[t]);for(let i=t.length-1;i>=0;i--)e=[...e.slice(0,t[i]),...e.slice(t[i]+1)];return i=Math.max(0,i-t.filter(e=>e<i).length),[...e.slice(0,i),...r,...e.slice(i)]}let b=window.WallarmDS.Icons.Earth,S=window.WallarmDS.Icons.Info,w=window.WallarmDS.AgentGlyph,_=window.WallarmDS.Select,v=window.WallarmDS.SelectButtonTag,I=window.WallarmDS.SelectButtonTagValue,C=window.WallarmDS.SelectContent,T=window.WallarmDS.SelectOption,R=window.WallarmDS.SelectOptionIndicator,E=window.WallarmDS.SelectOptionText,O=window.WallarmDS.SelectPositioner,x=window.WallarmDS.HStack,$=window.WallarmDS.VStack,D=window.WallarmDS.Tag,N=window.WallarmDS.TagClose,k=(function(e=()=>{}){let t=(...t)=>e(...t);for(let i of["mockName","mockReturnValue","mockResolvedValue","mockImplementation"])t[i]=r=>("mockImplementation"===i?e=r:"mockReturnValue"===i?e=()=>r:"mockResolvedValue"===i&&(e=()=>Promise.resolve(r)),t);return t})().mockName("onTagClick"),M={title:"Status Indication/Tag",component:D,subcomponents:{TagClose:N},parameters:{layout:"centered",docs:{description:{component:"An interactive chip for a keyword or attribute the reader can select or remove — a chip that only states a value is a `Badge`. Give it one job: Carbon warns against tags carrying several functions at once, and a chip that both filters and deletes is one people trigger by accident."}}},argTypes:{size:{control:"select",options:["medium","large"]},disabled:{control:"boolean"}}};function z(e){return"UTC+2"===e.value}function V(i){return t(T,{item:i,children:[e(E,{children:i.label}),e(R,{})]},i.value)}function j(i){return t(T,{item:i,children:[e(E,{children:i.label}),e(R,{})]},i.value)}let A=[{name:"Basic",story:t=>{let i,r,n=(0,l.c)(4);return n[0]!==t?({...i}=t,n[0]=t,n[1]=i):i=n[1],n[2]!==i?(r=e(D,{...i,children:"Tag"}),n[2]=i,n[3]=r):r=n[3],r},meta:M},{name:"Sizes",story:i=>{let r,n,a=(0,l.c)(4);return a[0]!==i?({...r}=i,a[0]=i,a[1]=r):r=a[1],a[2]!==r?(n=t(x,{align:"center",gap:8,children:[e(D,{...r,size:"medium",children:"Medium Tag"}),e(D,{...r,size:"large",children:"Large Tag"})]}),a[2]=r,a[3]=n):n=a[3],n},meta:M},{name:"Disabled",story:i=>{let r,n,a=(0,l.c)(4);return a[0]!==i?({...r}=i,a[0]=i,a[1]=r):r=a[1],a[2]!==r?(n=t(x,{gap:8,children:[e(D,{...r,size:"medium",disabled:!0,children:"Disabled Medium"}),e(D,{...r,size:"large",disabled:!0,children:"Disabled Large"})]}),a[2]=r,a[3]=n):n=a[3],n},meta:M},{name:"Closable",story:i=>{let r,s,o,c=(0,l.c)(7);c[0]!==i?({...r}=i,c[0]=i,c[1]=r):r=c[1];let[u,h]=(0,a.useState)(!0);return c[2]!==r||c[3]!==u?(s=u&&t(D,{...r,"data-testid":"tag",children:["Closable tag",e(N,{onClick:()=>h(!1)})]}),c[2]=r,c[3]=u,c[4]=s):s=c[4],c[5]!==s?(o=e(n,{children:s}),c[5]=s,c[6]=o):o=c[6],o},meta:M},{name:"Selectable",story:()=>{let i,r,n,a,s,o,c=(0,l.c)(6);return c[0]===Symbol.for("react.memo_cache_sentinel")?(r=new d({items:[{value:"UTC",label:"UTC"},{value:"UTC+1",label:"UTC+1"},{value:"UTC+2",label:"UTC+2"},{value:"UTC+3",label:"UTC+3"},{value:"UTC+4",label:"UTC+4"},{value:"UTC+5",label:"UTC+5"},{value:"UTC+6",label:"UTC+6"},{value:"UTC+7",label:"UTC+7"}],isItemDisabled:z}),i=$,n=8,a=t(_,{collection:r,children:[t(v,{children:[e(b,{}),e(I,{placeholder:"Timezone"})]}),e(O,{children:e(C,{children:r.items.map(V)})})]}),c[0]=i,c[1]=r,c[2]=n,c[3]=a):(i=c[0],r=c[1],n=c[2],a=c[3]),c[4]===Symbol.for("react.memo_cache_sentinel")?(s=t(v,{size:"large",children:[e(b,{}),e(I,{placeholder:"Timezone"})]}),c[4]=s):s=c[4],c[5]===Symbol.for("react.memo_cache_sentinel")?(o=t(i,{gap:n,children:[a,t(_,{collection:r,children:[s,e(O,{children:e(C,{children:r.items.map(j)})})]})]}),c[5]=o):o=c[5],o},meta:M},{name:"WithIcons",story:i=>{let r,n,a,s,o,c,u,h,m,f,d,p,g,y,w,_,v,I,C,T,R=(0,l.c)(35);return R[0]!==i?({...r}=i,R[0]=i,R[1]=r):r=R[1],R[2]===Symbol.for("react.memo_cache_sentinel")?(n=e("span",{className:"sb-annotation",children:"medium"}),R[2]=n):n=R[2],R[3]===Symbol.for("react.memo_cache_sentinel")?(a=e(b,{}),R[3]=a):a=R[3],R[4]!==r?(s=t(D,{...r,size:"medium",children:[a,"Tag with left icon"]}),R[4]=r,R[5]=s):s=R[5],R[6]===Symbol.for("react.memo_cache_sentinel")?(o=e(S,{}),R[6]=o):o=R[6],R[7]!==r?(c=t(D,{...r,size:"medium",children:["Tag with right icon",o]}),R[7]=r,R[8]=c):c=R[8],R[9]===Symbol.for("react.memo_cache_sentinel")?(u=e(b,{}),R[9]=u):u=R[9],R[10]===Symbol.for("react.memo_cache_sentinel")?(h=e(S,{}),R[10]=h):h=R[10],R[11]!==r?(m=t(D,{...r,size:"medium",children:[u,"Tag with left and right icons",h]}),R[11]=r,R[12]=m):m=R[12],R[13]!==s||R[14]!==c||R[15]!==m?(f=t($,{gap:8,children:[n,t(x,{gap:8,children:[s,c,m]})]}),R[13]=s,R[14]=c,R[15]=m,R[16]=f):f=R[16],R[17]===Symbol.for("react.memo_cache_sentinel")?(d=e("span",{className:"sb-annotation",children:"large"}),R[17]=d):d=R[17],R[18]===Symbol.for("react.memo_cache_sentinel")?(p=e(b,{}),R[18]=p):p=R[18],R[19]!==r?(g=t(D,{...r,size:"large",children:[p,"Tag with left icon"]}),R[19]=r,R[20]=g):g=R[20],R[21]===Symbol.for("react.memo_cache_sentinel")?(y=e(S,{}),R[21]=y):y=R[21],R[22]!==r?(w=t(D,{...r,size:"large",children:["Tag with right icon",y]}),R[22]=r,R[23]=w):w=R[23],R[24]===Symbol.for("react.memo_cache_sentinel")?(_=e(b,{}),R[24]=_):_=R[24],R[25]===Symbol.for("react.memo_cache_sentinel")?(v=e(S,{}),R[25]=v):v=R[25],R[26]!==r?(I=t(D,{...r,size:"large",children:[_,"Tag with left and right icons",v]}),R[26]=r,R[27]=I):I=R[27],R[28]!==g||R[29]!==w||R[30]!==I?(C=t($,{gap:8,children:[d,t(x,{gap:8,children:[g,w,I]})]}),R[28]=g,R[29]=w,R[30]=I,R[31]=C):C=R[31],R[32]!==C||R[33]!==f?(T=t($,{gap:12,align:"stretch",children:[f,C]}),R[32]=C,R[33]=f,R[34]=T):T=R[34],T},meta:M},{name:"Agent",story:i=>{let r,n,a,s,o,c,u,h,m,f,d,p,g,y,b,S,_=(0,l.c)(31);return _[0]!==i?({...r}=i,_[0]=i,_[1]=r):r=_[1],_[2]===Symbol.for("react.memo_cache_sentinel")?(n=e(w,{agent:"radar",size:16,"data-testid":"tag-agent-medium--glyph"}),_[2]=n):n=_[2],_[3]!==r?(a=t(D,{...r,size:"medium","data-testid":"tag-agent-medium",children:[n,"Radar"]}),_[3]=r,_[4]=a):a=_[4],_[5]===Symbol.for("react.memo_cache_sentinel")?(s=e(w,{agent:"lens",size:16}),_[5]=s):s=_[5],_[6]!==r?(o=t(D,{...r,size:"medium",children:[s,"Lens"]}),_[6]=r,_[7]=o):o=_[7],_[8]===Symbol.for("react.memo_cache_sentinel")?(c=e(w,{agent:"bard",size:16}),_[8]=c):c=_[8],_[9]!==r?(u=t(D,{...r,size:"medium",children:[c,"Bard"]}),_[9]=r,_[10]=u):u=_[10],_[11]!==a||_[12]!==o||_[13]!==u?(h=t(x,{gap:8,children:[a,o,u]}),_[11]=a,_[12]=o,_[13]=u,_[14]=h):h=_[14],_[15]===Symbol.for("react.memo_cache_sentinel")?(m=e(w,{agent:"radar",size:20,"data-testid":"tag-agent-large--glyph"}),_[15]=m):m=_[15],_[16]!==r?(f=t(D,{...r,size:"large","data-testid":"tag-agent-large",children:[m,"Radar"]}),_[16]=r,_[17]=f):f=_[17],_[18]===Symbol.for("react.memo_cache_sentinel")?(d=e(w,{agent:"lens",size:20}),_[18]=d):d=_[18],_[19]!==r?(p=t(D,{...r,size:"large",children:[d,"Lens"]}),_[19]=r,_[20]=p):p=_[20],_[21]===Symbol.for("react.memo_cache_sentinel")?(g=e(w,{agent:"bard",size:20}),_[21]=g):g=_[21],_[22]!==r?(y=t(D,{...r,size:"large",children:[g,"Bard"]}),_[22]=r,_[23]=y):y=_[23],_[24]!==p||_[25]!==y||_[26]!==f?(b=t(x,{gap:8,children:[f,p,y]}),_[24]=p,_[25]=y,_[26]=f,_[27]=b):b=_[27],_[28]!==b||_[29]!==h?(S=t($,{gap:12,align:"stretch",children:[h,b]}),_[28]=b,_[29]=h,_[30]=S):S=_[30],S},meta:M},{name:"WithOnClick",story:t=>{let i,r,n=(0,l.c)(4);return n[0]!==t?({...i}=t,n[0]=t,n[1]=i):i=n[1],n[2]!==i?(r=e(D,{...i,onClick:k,children:"Click me"}),n[2]=i,n[3]=r):r=n[3],r},meta:M}];function U({entry:e}){let{story:t,meta:i}=e,r={...i.args,...t.args},n="function"==typeof t||t.$$typeof?t:t.render||i.render||i.component,l=()=>a.default.createElement(n,r),s={args:r,globals:{theme:"light"},parameters:{...i.parameters,...t.parameters},viewMode:"story"};for(let e of[...i.decorators||[],...t.decorators||[]].reverse()){let t=l;l=()=>e(t,s)}return a.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},a.default.createElement("h2",{className:"text-sm mb-12"},e.name),a.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(a.default.createElement(window.WallarmDS.Root,null,A.map((e,t)=>a.default.createElement(U,{key:t,entry:e})))),t}}})();

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

@@ -42,6 +42,13 @@ which is why the third step's long description does not break the rhythm.
 
 Source: Timeline/Timeline.stories.tsx#WithContent
 
+### WithAgent
+
+The actor of an entry, composed in `TimelineContent`: an agent through `AgentItem`, a person
+through `Avatar`, beside the same label. 20 px beside the text-sm rows, 16 px beside text-xs.
+
+Source: Timeline/Timeline.stories.tsx#WithAgent
+
 ### WithoutConnector
 
 Content with no rail at all — effectively a `List` of titles and descriptions, for when the
@@ -55,6 +62,9 @@ Source: Timeline/Timeline.stories.tsx#WithoutConnector
 
 ```tsx
 import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { AgentItem, Avatar, AvatarContent, AvatarFallback, AvatarName } from '../Avatar';
+import { HStack } from '../Stack';
+import { Text } from '../Text';
 import { Timeline } from './Timeline';
 import { TimelineConnector } from './TimelineConnector';
 import { TimelineContent } from './TimelineContent';
@@ -172,6 +182,71 @@ export const WithContent: StoryFn<typeof meta> = () => (
   </div>
 );
 
+/**
+ * The actor of an entry, composed in `TimelineContent`: an agent through `AgentItem`, a person
+ * through `Avatar`, beside the same label. 20 px beside the text-sm rows, 16 px beside text-xs.
+ */
+export const WithAgent: StoryFn<typeof meta> = () => (
+  <div className='max-w-[360px]'>
+    <Timeline data-testid='timeline'>
+      <TimelineItem>
+        <TimelineConnector>
+          <TimelineIndicator>1</TimelineIndicator>
+          <TimelineSeparator />
+        </TimelineConnector>
+        <TimelineContent>
+          <TimelineTitle>Rule proposed</TimelineTitle>
+          <HStack gap={4}>
+            <TimelineDescription>Proposed by</TimelineDescription>
+            <AgentItem agent='trim' data-testid='timeline-agent'>
+              <AvatarContent>
+                <AvatarName>Trim</AvatarName>
+              </AvatarContent>
+            </AgentItem>
+          </HStack>
+        </TimelineContent>
+      </TimelineItem>
+      <TimelineItem>
+        <TimelineConnector>
+          <TimelineIndicator>2</TimelineIndicator>
+          <TimelineSeparator />
+        </TimelineConnector>
+        <TimelineContent>
+          <TimelineTitle>Rule approved</TimelineTitle>
+          <HStack gap={4}>
+            <TimelineDescription>Approved by</TimelineDescription>
+            <Avatar size='sm' data-testid='timeline-person'>
+              <AvatarFallback name='Artem Miskevich' />
+              <AvatarContent>
+                <AvatarName>Artem Miskevich</AvatarName>
+              </AvatarContent>
+            </Avatar>
+          </HStack>
+        </TimelineContent>
+      </TimelineItem>
+      <TimelineItem>
+        <TimelineConnector>
+          <TimelineIndicator>3</TimelineIndicator>
+          <TimelineSeparator />
+        </TimelineConnector>
+        <TimelineContent>
+          <TimelineTitle>Rule applied</TimelineTitle>
+          <HStack gap={4}>
+            <Text size='xs' color='secondary'>
+              Verified by
+            </Text>
+            <AgentItem agent='radar' size={16} data-testid='timeline-agent-xs'>
+              <AvatarContent>
+                <AvatarName>Radar</AvatarName>
+              </AvatarContent>
+            </AgentItem>
+          </HStack>
+        </TimelineContent>
+      </TimelineItem>
+    </Timeline>
+  </div>
+);
+
 /**
  * Content with no rail at all — effectively a `List` of titles and descriptions, for when the
  * order carries the sequence and a drawn line would only add furniture.

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

@@ -9,4 +9,4 @@ var e={vD(e,t,r){let n,l;/**
  * @nolint
  * @preventMunge
  * @preserve-invariant-messages
- */var o,a,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,d=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,h=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let l of u(t))f.call(e,l)||l===r||c(e,l,{get:()=>t[l],enumerable:!(n=s(t,l))||n.enumerable});return e},m={},p={$dispatcherGuard:()=>O,$makeReadOnly:()=>k,$reset:()=>T,$structuralCheck:()=>I,c:()=>E,clearRenderCounterRegistry:()=>D,renderCounterRegistry:()=>M,useRenderCounter:()=>j};for(var y in p)c(m,y,{get:p[y],enumerable:!0});e.exports=h(c({},"__esModule",{value:!0}),m);var w=(l=null!=(n=r("C"))?i(d(n)):{},h(n&&n.__esModule?l:c(l,"default",{value:n,enumerable:!0}),n)),{useRef:_,useEffect:g,isValidElement:b}=w,S=null!=(o=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:w.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,R=Symbol.for("react.memo_cache_sentinel"),E="function"==typeof(null==(a=w.__COMPILER_RUNTIME)?void 0:a.c)?w.__COMPILER_RUNTIME.c:function(e){return w.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=R;return t[R]=!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 S.ReactCurrentDispatcher.current=e,S.ReactCurrentDispatcher.current}v.useMemoCache=e=>{if(null!=$)return $.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var N=[];function O(e){let t=S.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 T(e){for(let t=0;t<e.length;t++)e[t]=R}function k(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var M=new Map;function D(){for(let e of M.values())e.forEach(e=>{e.count=0})}function j(e){let t=_(null);null!=t.current&&(t.current.count+=1),g(()=>{if(null==t.current){let r,n={count:0};null==(r=M.get(e))&&(r=new Set,M.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=M.get(e))&&n.delete(r))}})}var x=new Set;function I(e,t,r,n,l,o){function a(e,t,a,i){let c=`${n}:${o} [${l}] ${r}${a} changed from ${e} to ${t} at depth ${i}`;x.has(c)||(x.add(c),console.error(c))}!function e(t,r,n,l){if(!(l>2)){if(t!==r)if(typeof t!=typeof r)a(`type ${typeof t}`,`type ${typeof r}`,n,l);else if("object"==typeof t){let o=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)a("null",`type ${typeof r}`,n,l);else if(null===r)a(`type ${typeof t}`,"null",n,l);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)a(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,l);else for(let[o,i]of t)r.has(o)?e(i,r.get(o),`${n}.get(${o})`,l+1):a(`Map instance with key ${o}`,`Map instance without key ${o}`,n,l);else a("Map instance","other value",n,l);else if(r instanceof Map)a("other value","Map instance",n,l);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)a(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,l);else for(let e of r)t.has(e)||a(`Set instance without element ${e}`,`Set instance with element ${e}`,n,l);else a("Set instance","other value",n,l);else if(r instanceof Set)a("other value","Set instance",n,l);else if(o||i)if(o!==i)a(`type ${o?"array":"object"}`,`type ${i?"array":"object"}`,n,l);else if(t.length!==r.length)a(`array with length ${t.length}`,`array with length ${r.length}`,n,l);else for(let o=0;o<t.length;o++)e(t[o],r[o],`${n}[${o}]`,l+1);else if(b(t)||b(r))b(t)!==b(r)?a(`type ${b(t)?"React element":"object"}`,`type ${b(r)?"React element":"object"}`,n,l):t.type!==r.type?a(`React element of type ${t.type}`,`React element of type ${r.type}`,n,l):e(t.props,r.props,`[props of ${n}]`,l+1);else{for(let e in r)e in t||a(`object without key ${e}`,`object with key ${e}`,n,l);for(let o in t)o in r?e(t[o],r[o],`${n}.${o}`,l+1):a(`object with key ${o}`,`object without key ${o}`,n,l)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&a(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,l):t!==r&&a(t,r,n,l)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,l=new WeakMap;function o(e,t,r){let o=t,a=r;if("object"==typeof o&&null!==o&&"$$typeof"in o&&o.$$typeof===Symbol.for("react.context")&&"Provider"in o&&(o=o.Provider),"function"==typeof o&&null!=a.ref&&!o.prototype?.isReactComponent){let t=o,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let l=r.get(t);l||((l=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,l)),o=l}if("string"==typeof o&&"boolean"==typeof a.inert&&((a={...a}).inert?a.inert="":delete a.inert),"string"==typeof o)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in a&&(a={...a,[t]:a[e]},delete a[e]);return"string"==typeof o&&null!=a.ref&&(o=function(e,t){let r=l.get(e);r||(r=new Map,l.set(e,r));let n=r.get(t);if(n)return n;let o=e.forwardRef((r,n)=>{let l=e.useRef(null);if(!l.current||l.current.original!==n){let e;l.current={original:n,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof n){let r=n(t);e="function"==typeof r?r:void 0}else n&&(n.current=t)}}}return e.createElement(t,{...r,ref:l.current.callback})});return o.displayName=`CanvasHost(${t})`,r.set(t,o),o}(e,o)),{type:o,props:a}}function a(e){let t=(t,r,n)=>{let l=o(e,t,r??{});return e.createElement(l.type,void 0===n?l.props:{...l.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let l=o(e,t,r??{}),{children:a,...i}=l.props;return e.createElement(l.type,void 0===n?i:{...i,key:n},...Array.isArray(a)?a:[a])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...n)=>{let l=o(e,t,r??{});return e.createElement(l.type,l.props,...n)},cloneElement:(t,r,...n)=>{let l=e.cloneElement(t,r??void 0,...n),a=l.ref,i=o(e,l.type,{...l.props,ref:a});return i.type===l.type&&"string"!=typeof l.type?l:e.createElement(i.type,{...i.props,key:l.key})}}}r.d(t,{MA:()=>a,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:l,Component:o,Fragment:a,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:f,cloneElement:h,createContext:m,createElement:p,createFactory:y,createRef:w,forwardRef:_,isValidElement:g,lazy:b,memo:S,startTransition:R,unstable_act:E,useCallback:v,useContext:$,useDebugValue:C,useDeferredValue:N,useEffect:O,useId:T,useImperativeHandle:k,useInsertionEffect:M,useLayoutEffect:D,useMemo:j,useReducer:x,useRef:I,useState:P,useSyncExternalStore:A,useTransition:W,version:z,use:L}=n;r.d(t,{},{Children:l,Component:o,Fragment:a,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:f,cloneElement:h,createContext:m,createElement:p,createFactory:y,createRef:w,default:n,forwardRef:_,isValidElement:g,lazy:b,memo:S,startTransition:R,unstable_act:E,use:L,useCallback:v,useContext:$,useDebugValue:C,useDeferredValue:N,useEffect:O,useId:T,useImperativeHandle:k,useInsertionEffect:M,useLayoutEffect:D,useMemo:j,useReducer:x,useRef:I,useState:P,useSyncExternalStore:A,useTransition:W,version:z})}},t={};function r(n){var l=t[n];if(void 0!==l)return l.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,r),o.exports}r.d=(e,t,n)=>{var l=(t,n)=>{for(var l in t)r.o(t,l)&&!r.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,[n]:t[l]})};l(t,"get"),l(n,"value")},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:n,Fragment:l}=(0,r("p").MA)(window.React);var o=r("vD");let a=window.WallarmDS.Timeline,i=window.WallarmDS.TimelineConnector,c=window.WallarmDS.TimelineContent,s=window.WallarmDS.TimelineDescription,u=window.WallarmDS.TimelineIndicator,d=window.WallarmDS.TimelineItem,f=window.WallarmDS.TimelineSeparator,h=window.WallarmDS.TimelineTitle,m={title:"Data Display/Timeline",component:a,subcomponents:{TimelineItem:d,TimelineConnector:i,TimelineIndicator:u,TimelineSeparator:f,TimelineContent:c,TimelineTitle:h,TimelineDescription:s},parameters:{layout:"centered",docs:{description:{component:"A vertical run of events in the order they happened — a timeline records what occurred, so reach for `Progress` when the question is how far along something is rather than what has already taken place. `TimelineConnector` and `TimelineContent` are each optional, and the last item looks after itself: its line and its bottom padding go without any special casing."}}}};var p=r("C");let y=[{name:"Basic",story:()=>{let r,n,l,c,s,h=(0,o.c)(5);return h[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(d,{children:t(i,{children:[e(u,{children:"1"}),e(f,{})]})}),h[0]=r):r=h[0],h[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(d,{children:t(i,{children:[e(u,{children:"2"}),e(f,{})]})}),h[1]=n):n=h[1],h[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(d,{children:t(i,{children:[e(u,{children:"3"}),e(f,{})]})}),h[2]=l):l=h[2],h[3]===Symbol.for("react.memo_cache_sentinel")?(c=e(d,{children:t(i,{children:[e(u,{children:"4"}),e(f,{})]})}),h[3]=c):c=h[3],h[4]===Symbol.for("react.memo_cache_sentinel")?(s=t(a,{"data-testid":"timeline",children:[r,n,l,c,e(d,{children:t(i,{children:[e(u,{children:"5"}),e(f,{})]})})]}),h[4]=s):s=h[4],s},meta:m},{name:"WithContent",story:()=>{let r,n,l,m,p,y,w=(0,o.c)(6);return w[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(i,{children:[e(u,{children:"1"}),e(f,{})]}),w[0]=r):r=w[0],w[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(d,{children:[r,t(c,{children:[e(h,{children:"Order placed"}),e(s,{children:"The order was placed by the customer."})]})]}),w[1]=n):n=w[1],w[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(i,{children:[e(u,{children:"2"}),e(f,{})]}),w[2]=l):l=w[2],w[3]===Symbol.for("react.memo_cache_sentinel")?(m=t(d,{children:[l,t(c,{children:[e(h,{children:"Order confirmed"}),e(s,{children:"Payment received, order confirmed."})]})]}),w[3]=m):m=w[3],w[4]===Symbol.for("react.memo_cache_sentinel")?(p=t(i,{children:[e(u,{children:"3"}),e(f,{})]}),w[4]=p):p=w[4],w[5]===Symbol.for("react.memo_cache_sentinel")?(y=e("div",{className:"max-w-[360px]",children:t(a,{children:[n,m,t(d,{children:[p,t(c,{children:[e(h,{children:"Order shipped"}),e(s,{children:"The package left the warehouse and is on its way. This step has the longest description of the three, to show the connecting line stretching to match a taller row."})]})]})]})}),w[5]=y):y=w[5],y},meta:m},{name:"WithoutConnector",story:()=>{let r,n,l,i=(0,o.c)(3);return i[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(d,{children:t(c,{children:[e(h,{children:"Order placed"}),e(s,{children:"The order was placed by the customer."})]})}),i[0]=r):r=i[0],i[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(d,{children:t(c,{children:[e(h,{children:"Order confirmed"}),e(s,{children:"Payment received, order confirmed."})]})}),i[1]=n):n=i[1],i[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(a,{children:[r,n,e(d,{children:t(c,{children:[e(h,{children:"Order shipped"}),e(s,{children:"The package left the warehouse and is on its way. This step has the longest description of the three, to show the connecting line stretching to match a taller row."})]})})]}),i[2]=l):l=i[2],l},meta:m}];function w({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},l="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,o=()=>p.default.createElement(l,n),a={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=o;o=()=>e(t,a)}return p.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},p.default.createElement("h2",{className:"text-sm mb-12"},e.name),p.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(p.default.createElement(window.WallarmDS.Root,null,y.map((e,t)=>p.default.createElement(w,{key:t,entry:e})))),t}}})();
+ */var a,o,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,m=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty,u=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let l of d(t))h.call(e,l)||l===r||c(e,l,{get:()=>t[l],enumerable:!(n=s(t,l))||n.enumerable});return e},f={},p={$dispatcherGuard:()=>O,$makeReadOnly:()=>D,$reset:()=>T,$structuralCheck:()=>W,c:()=>R,clearRenderCounterRegistry:()=>M,renderCounterRegistry:()=>k,useRenderCounter:()=>x};for(var y in p)c(f,y,{get:p[y],enumerable:!0});e.exports=u(c({},"__esModule",{value:!0}),f);var _=(l=null!=(n=r("C"))?i(m(n)):{},u(n&&n.__esModule?l:c(l,"default",{value:n,enumerable:!0}),n)),{useRef:w,useEffect:S,isValidElement:b}=_,g=null!=(a=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?a:_.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),R="function"==typeof(null==(o=_.__COMPILER_RUNTIME)?void 0:o.c)?_.__COMPILER_RUNTIME.c:function(e){return _.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=v;return t[v]=!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 g.ReactCurrentDispatcher.current=e,g.ReactCurrentDispatcher.current}E.useMemoCache=e=>{if(null!=$)return $.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var N=[];function O(e){let t=g.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 T(e){for(let t=0;t<e.length;t++)e[t]=v}function D(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var k=new Map;function M(){for(let e of k.values())e.forEach(e=>{e.count=0})}function x(e){let t=w(null);null!=t.current&&(t.current.count+=1),S(()=>{if(null==t.current){let r,n={count:0};null==(r=k.get(e))&&(r=new Set,k.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=k.get(e))&&n.delete(r))}})}var A=new Set;function W(e,t,r,n,l,a){function o(e,t,o,i){let c=`${n}:${a} [${l}] ${r}${o} changed from ${e} to ${t} at depth ${i}`;A.has(c)||(A.add(c),console.error(c))}!function e(t,r,n,l){if(!(l>2)){if(t!==r)if(typeof t!=typeof r)o(`type ${typeof t}`,`type ${typeof r}`,n,l);else if("object"==typeof t){let a=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)o("null",`type ${typeof r}`,n,l);else if(null===r)o(`type ${typeof t}`,"null",n,l);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)o(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,l);else for(let[a,i]of t)r.has(a)?e(i,r.get(a),`${n}.get(${a})`,l+1):o(`Map instance with key ${a}`,`Map instance without key ${a}`,n,l);else o("Map instance","other value",n,l);else if(r instanceof Map)o("other value","Map instance",n,l);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)o(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,l);else for(let e of r)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,n,l);else o("Set instance","other value",n,l);else if(r instanceof Set)o("other value","Set instance",n,l);else if(a||i)if(a!==i)o(`type ${a?"array":"object"}`,`type ${i?"array":"object"}`,n,l);else if(t.length!==r.length)o(`array with length ${t.length}`,`array with length ${r.length}`,n,l);else for(let a=0;a<t.length;a++)e(t[a],r[a],`${n}[${a}]`,l+1);else if(b(t)||b(r))b(t)!==b(r)?o(`type ${b(t)?"React element":"object"}`,`type ${b(r)?"React element":"object"}`,n,l):t.type!==r.type?o(`React element of type ${t.type}`,`React element of type ${r.type}`,n,l):e(t.props,r.props,`[props of ${n}]`,l+1);else{for(let e in r)e in t||o(`object without key ${e}`,`object with key ${e}`,n,l);for(let a in t)a in r?e(t[a],r[a],`${n}.${a}`,l+1):o(`object with key ${a}`,`object without key ${a}`,n,l)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&o(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,l):t!==r&&o(t,r,n,l)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,l=new WeakMap;function a(e,t,r){let a=t,o=r;if("object"==typeof a&&null!==a&&"$$typeof"in a&&a.$$typeof===Symbol.for("react.context")&&"Provider"in a&&(a=a.Provider),"function"==typeof a&&null!=o.ref&&!a.prototype?.isReactComponent){let t=a,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let l=r.get(t);l||((l=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,l)),a=l}if("string"==typeof a&&"boolean"==typeof o.inert&&((o={...o}).inert?o.inert="":delete o.inert),"string"==typeof a)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in o&&(o={...o,[t]:o[e]},delete o[e]);return"string"==typeof a&&null!=o.ref&&(a=function(e,t){let r=l.get(e);r||(r=new Map,l.set(e,r));let n=r.get(t);if(n)return n;let a=e.forwardRef((r,n)=>{let l=e.useRef(null);if(!l.current||l.current.original!==n){let e;l.current={original:n,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof n){let r=n(t);e="function"==typeof r?r:void 0}else n&&(n.current=t)}}}return e.createElement(t,{...r,ref:l.current.callback})});return a.displayName=`CanvasHost(${t})`,r.set(t,a),a}(e,a)),{type:a,props:o}}function o(e){let t=(t,r,n)=>{let l=a(e,t,r??{});return e.createElement(l.type,void 0===n?l.props:{...l.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let l=a(e,t,r??{}),{children:o,...i}=l.props;return e.createElement(l.type,void 0===n?i:{...i,key:n},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...n)=>{let l=a(e,t,r??{});return e.createElement(l.type,l.props,...n)},cloneElement:(t,r,...n)=>{let l=e.cloneElement(t,r??void 0,...n),o=l.ref,i=a(e,l.type,{...l.props,ref:o});return i.type===l.type&&"string"!=typeof l.type?l:e.createElement(i.type,{...i.props,key:l.key})}}}r.d(t,{MA:()=>o,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:l,Component:a,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:h,cloneElement:u,createContext:f,createElement:p,createFactory:y,createRef:_,forwardRef:w,isValidElement:S,lazy:b,memo:g,startTransition:v,unstable_act:R,useCallback:E,useContext:$,useDebugValue:C,useDeferredValue:N,useEffect:O,useId:T,useImperativeHandle:D,useInsertionEffect:k,useLayoutEffect:M,useMemo:x,useReducer:A,useRef:W,useState:j,useSyncExternalStore:I,useTransition:P,version:z,use:L}=n;r.d(t,{},{Children:l,Component:a,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:h,cloneElement:u,createContext:f,createElement:p,createFactory:y,createRef:_,default:n,forwardRef:w,isValidElement:S,lazy:b,memo:g,startTransition:v,unstable_act:R,use:L,useCallback:E,useContext:$,useDebugValue:C,useDeferredValue:N,useEffect:O,useId:T,useImperativeHandle:D,useInsertionEffect:k,useLayoutEffect:M,useMemo:x,useReducer:A,useRef:W,useState:j,useSyncExternalStore:I,useTransition:P,version:z})}},t={};function r(n){var l=t[n];if(void 0!==l)return l.exports;var a=t[n]={exports:{}};return e[n](a,a.exports,r),a.exports}r.d=(e,t,n)=>{var l=(t,n)=>{for(var l in t)r.o(t,l)&&!r.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,[n]:t[l]})};l(t,"get"),l(n,"value")},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:n,Fragment:l}=(0,r("p").MA)(window.React);var a=r("vD");let o=window.WallarmDS.AgentItem,i=window.WallarmDS.Avatar,c=window.WallarmDS.AvatarContent,s=window.WallarmDS.AvatarFallback,d=window.WallarmDS.AvatarName,m=window.WallarmDS.HStack,h=window.WallarmDS.Text,u=window.WallarmDS.Timeline,f=window.WallarmDS.TimelineConnector,p=window.WallarmDS.TimelineContent,y=window.WallarmDS.TimelineDescription,_=window.WallarmDS.TimelineIndicator,w=window.WallarmDS.TimelineItem,S=window.WallarmDS.TimelineSeparator,b=window.WallarmDS.TimelineTitle,g={title:"Data Display/Timeline",component:u,subcomponents:{TimelineItem:w,TimelineConnector:f,TimelineIndicator:_,TimelineSeparator:S,TimelineContent:p,TimelineTitle:b,TimelineDescription:y},parameters:{layout:"centered",docs:{description:{component:"A vertical run of events in the order they happened — a timeline records what occurred, so reach for `Progress` when the question is how far along something is rather than what has already taken place. `TimelineConnector` and `TimelineContent` are each optional, and the last item looks after itself: its line and its bottom padding go without any special casing."}}}};var v=r("C");let R=[{name:"Basic",story:()=>{let r,n,l,o,i,c=(0,a.c)(5);return c[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(w,{children:t(f,{children:[e(_,{children:"1"}),e(S,{})]})}),c[0]=r):r=c[0],c[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(w,{children:t(f,{children:[e(_,{children:"2"}),e(S,{})]})}),c[1]=n):n=c[1],c[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(w,{children:t(f,{children:[e(_,{children:"3"}),e(S,{})]})}),c[2]=l):l=c[2],c[3]===Symbol.for("react.memo_cache_sentinel")?(o=e(w,{children:t(f,{children:[e(_,{children:"4"}),e(S,{})]})}),c[3]=o):o=c[3],c[4]===Symbol.for("react.memo_cache_sentinel")?(i=t(u,{"data-testid":"timeline",children:[r,n,l,o,e(w,{children:t(f,{children:[e(_,{children:"5"}),e(S,{})]})})]}),c[4]=i):i=c[4],i},meta:g},{name:"WithContent",story:()=>{let r,n,l,o,i,c,s=(0,a.c)(6);return s[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(f,{children:[e(_,{children:"1"}),e(S,{})]}),s[0]=r):r=s[0],s[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(w,{children:[r,t(p,{children:[e(b,{children:"Order placed"}),e(y,{children:"The order was placed by the customer."})]})]}),s[1]=n):n=s[1],s[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(f,{children:[e(_,{children:"2"}),e(S,{})]}),s[2]=l):l=s[2],s[3]===Symbol.for("react.memo_cache_sentinel")?(o=t(w,{children:[l,t(p,{children:[e(b,{children:"Order confirmed"}),e(y,{children:"Payment received, order confirmed."})]})]}),s[3]=o):o=s[3],s[4]===Symbol.for("react.memo_cache_sentinel")?(i=t(f,{children:[e(_,{children:"3"}),e(S,{})]}),s[4]=i):i=s[4],s[5]===Symbol.for("react.memo_cache_sentinel")?(c=e("div",{className:"max-w-[360px]",children:t(u,{children:[n,o,t(w,{children:[i,t(p,{children:[e(b,{children:"Order shipped"}),e(y,{children:"The package left the warehouse and is on its way. This step has the longest description of the three, to show the connecting line stretching to match a taller row."})]})]})]})}),s[5]=c):c=s[5],c},meta:g},{name:"WithAgent",story:()=>{let r,n,l,g,v,R,E,$,C,N,O,T,D,k=(0,a.c)(13);return k[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(f,{children:[e(_,{children:"1"}),e(S,{})]}),k[0]=r):r=k[0],k[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(b,{children:"Rule proposed"}),k[1]=n):n=k[1],k[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(y,{children:"Proposed by"}),k[2]=l):l=k[2],k[3]===Symbol.for("react.memo_cache_sentinel")?(g=t(w,{children:[r,t(p,{children:[n,t(m,{gap:4,children:[l,e(o,{agent:"trim","data-testid":"timeline-agent",children:e(c,{children:e(d,{children:"Trim"})})})]})]})]}),k[3]=g):g=k[3],k[4]===Symbol.for("react.memo_cache_sentinel")?(v=t(f,{children:[e(_,{children:"2"}),e(S,{})]}),k[4]=v):v=k[4],k[5]===Symbol.for("react.memo_cache_sentinel")?(R=e(b,{children:"Rule approved"}),k[5]=R):R=k[5],k[6]===Symbol.for("react.memo_cache_sentinel")?(E=e(y,{children:"Approved by"}),k[6]=E):E=k[6],k[7]===Symbol.for("react.memo_cache_sentinel")?($=e(s,{name:"Artem Miskevich"}),k[7]=$):$=k[7],k[8]===Symbol.for("react.memo_cache_sentinel")?(C=t(w,{children:[v,t(p,{children:[R,t(m,{gap:4,children:[E,t(i,{size:"sm","data-testid":"timeline-person",children:[$,e(c,{children:e(d,{children:"Artem Miskevich"})})]})]})]})]}),k[8]=C):C=k[8],k[9]===Symbol.for("react.memo_cache_sentinel")?(N=t(f,{children:[e(_,{children:"3"}),e(S,{})]}),k[9]=N):N=k[9],k[10]===Symbol.for("react.memo_cache_sentinel")?(O=e(b,{children:"Rule applied"}),k[10]=O):O=k[10],k[11]===Symbol.for("react.memo_cache_sentinel")?(T=e(h,{size:"xs",color:"secondary",children:"Verified by"}),k[11]=T):T=k[11],k[12]===Symbol.for("react.memo_cache_sentinel")?(D=e("div",{className:"max-w-[360px]",children:t(u,{"data-testid":"timeline",children:[g,C,t(w,{children:[N,t(p,{children:[O,t(m,{gap:4,children:[T,e(o,{agent:"radar",size:16,"data-testid":"timeline-agent-xs",children:e(c,{children:e(d,{children:"Radar"})})})]})]})]})]})}),k[12]=D):D=k[12],D},meta:g},{name:"WithoutConnector",story:()=>{let r,n,l,o=(0,a.c)(3);return o[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(w,{children:t(p,{children:[e(b,{children:"Order placed"}),e(y,{children:"The order was placed by the customer."})]})}),o[0]=r):r=o[0],o[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(w,{children:t(p,{children:[e(b,{children:"Order confirmed"}),e(y,{children:"Payment received, order confirmed."})]})}),o[1]=n):n=o[1],o[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(u,{children:[r,n,e(w,{children:t(p,{children:[e(b,{children:"Order shipped"}),e(y,{children:"The package left the warehouse and is on its way. This step has the longest description of the three, to show the connecting line stretching to match a taller row."})]})})]}),o[2]=l):l=o[2],l},meta:g}];function E({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},l="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,a=()=>v.default.createElement(l,n),o={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=a;a=()=>e(t,o)}return v.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},v.default.createElement("h2",{className:"text-sm mb-12"},e.name),v.default.createElement(a))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(v.default.createElement(window.WallarmDS.Root,null,R.map((e,t)=>v.default.createElement(E,{key:t,entry:e})))),t}}})();

package/dist/project/components/bundle.css

@@ -1039,6 +1039,9 @@
   .m-none {
     margin: var(--spacing-none);
   }
+  .-mx-\(--agent-inset\) {
+    margin-inline: calc(var(--agent-inset) * -1);
+  }
   .-mx-8 {
     margin-inline: calc(var(--spacing-8) * -1);
   }
@@ -1729,6 +1732,9 @@
     width: 100%;
     height: 100%;
   }
+  .h-\(--agent-h\)\! {
+    height: var(--agent-h) !important;
+  }
   .h-\(--height\) {
     height: var(--height);
   }
@@ -2141,6 +2147,9 @@
   .min-h-screen {
     min-height: 100vh;
   }
+  .w-\(--agent-w\)\! {
+    width: var(--agent-w) !important;
+  }
   .w-\(--app-shell-aside-width\) {
     width: var(--app-shell-aside-width);
   }
@@ -12113,6 +12122,9 @@
       background-color: transparent;
     }
   }
+  .has-\[\[data-slot\=agent-glyph\]\]\:overflow-visible:has(:is([data-slot=agent-glyph])) {
+    overflow: visible;
+  }
   .has-\[\[data-slot\=attribute-actions-target\]\]\:-ml-7:has(:is([data-slot=attribute-actions-target])) {
     margin-left: calc(var(--spacing) * -7);
   }
@@ -16568,6 +16580,10 @@
     content: var(--tw-content);
     transition: opacity 150ms ease;
   }
+  .\[\&_\[data-slot\=avatar-name\]\]\:text-xs [data-slot=avatar-name] {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
   .\[\&_\[data-slot\=drawer-body\]\:has\(\[data-part\=viewport\]\[data-overflow-y\]\)\]\:border-y [data-slot=drawer-body]:has([data-part=viewport][data-overflow-y]) {
     border-block-style: var(--tw-border-style);
     border-block-width: 1px;