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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,a;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var l,o,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty,m=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of u(t))p.call(e,a)||a===r||c(e,a,{get:()=>t[a],enumerable:!(n=s(t,a))||n.enumerable});return e},d={},h={$dispatcherGuard:()=>k,$makeReadOnly:()=>M,$reset:()=>x,$structuralCheck:()=>I,c:()=>R,clearRenderCounterRegistry:()=>T,renderCounterRegistry:()=>O,useRenderCounter:()=>j};for(var y in h)c(d,y,{get:h[y],enumerable:!0});e.exports=m(c({},"__esModule",{value:!0}),d);var g=(a=null!=(n=r("C"))?i(f(n)):{},m(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:w,useEffect:b,isValidElement:v}=g,_=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,S=Symbol.for("react.memo_cache_sentinel"),R="function"==typeof(null==(o=g.__COMPILER_RUNTIME)?void 0:o.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=S;return t[S]=!0,t},[])},E={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{E[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var N=null;function $(e){return _.ReactCurrentDispatcher.current=e,_.ReactCurrentDispatcher.current}E.useMemoCache=e=>{if(null!=N)return N.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function k(e){let t=_.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.length&&(N=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.");$(E)}else if(1===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===C.length&&(N=null),$(e)}else if(2===e)C.push(t),$(N);else if(3===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");$(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function x(e){for(let t=0;t<e.length;t++)e[t]=S}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var O=new Map;function T(){for(let e of O.values())e.forEach(e=>{e.count=0})}function j(e){let t=w(null);null!=t.current&&(t.current.count+=1),b(()=>{if(null==t.current){let r,n={count:0};null==(r=O.get(e))&&(r=new Set,O.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=O.get(e))&&n.delete(r))}})}var D=new Set;function I(e,t,r,n,a,l){function o(e,t,o,i){let c=`${n}:${l} [${a}] ${r}${o} changed from ${e} to ${t} at depth ${i}`;D.has(c)||(D.add(c),console.error(c))}!function e(t,r,n,a){if(!(a>2)){if(t!==r)if(typeof t!=typeof r)o(`type ${typeof t}`,`type ${typeof r}`,n,a);else if("object"==typeof t){let l=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)o("null",`type ${typeof r}`,n,a);else if(null===r)o(`type ${typeof t}`,"null",n,a);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)o(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,a);else for(let[l,i]of t)r.has(l)?e(i,r.get(l),`${n}.get(${l})`,a+1):o(`Map instance with key ${l}`,`Map instance without key ${l}`,n,a);else o("Map instance","other value",n,a);else if(r instanceof Map)o("other value","Map instance",n,a);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)o(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,a);else for(let e of r)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,n,a);else o("Set instance","other value",n,a);else if(r instanceof Set)o("other value","Set instance",n,a);else if(l||i)if(l!==i)o(`type ${l?"array":"object"}`,`type ${i?"array":"object"}`,n,a);else if(t.length!==r.length)o(`array with length ${t.length}`,`array with length ${r.length}`,n,a);else for(let l=0;l<t.length;l++)e(t[l],r[l],`${n}[${l}]`,a+1);else if(v(t)||v(r))v(t)!==v(r)?o(`type ${v(t)?"React element":"object"}`,`type ${v(r)?"React element":"object"}`,n,a):t.type!==r.type?o(`React element of type ${t.type}`,`React element of type ${r.type}`,n,a):e(t.props,r.props,`[props of ${n}]`,a+1);else{for(let e in r)e in t||o(`object without key ${e}`,`object with key ${e}`,n,a);for(let l in t)l in r?e(t[l],r[l],`${n}.${l}`,a+1):o(`object with key ${l}`,`object without key ${l}`,n,a)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&o(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,a):t!==r&&o(t,r,n,a)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,a=new WeakMap;function l(e,t,r){let l=t,o=r;if("object"==typeof l&&null!==l&&"$$typeof"in l&&l.$$typeof===Symbol.for("react.context")&&"Provider"in l&&(l=l.Provider),"function"==typeof l&&null!=o.ref&&!l.prototype?.isReactComponent){let t=l,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let a=r.get(t);a||((a=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,a)),l=a}if("string"==typeof l&&"boolean"==typeof o.inert&&((o={...o}).inert?o.inert="":delete o.inert),"string"==typeof l)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in o&&(o={...o,[t]:o[e]},delete o[e]);return"string"==typeof l&&null!=o.ref&&(l=function(e,t){let r=a.get(e);r||(r=new Map,a.set(e,r));let n=r.get(t);if(n)return n;let l=e.forwardRef((r,n)=>{let a=e.useRef(null);if(!a.current||a.current.original!==n){let e;a.current={original:n,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof n){let r=n(t);e="function"==typeof r?r:void 0}else n&&(n.current=t)}}}return e.createElement(t,{...r,ref:a.current.callback})});return l.displayName=`CanvasHost(${t})`,r.set(t,l),l}(e,l)),{type:l,props:o}}function o(e){let t=(t,r,n)=>{let a=l(e,t,r??{});return e.createElement(a.type,void 0===n?a.props:{...a.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let a=l(e,t,r??{}),{children:o,...i}=a.props;return e.createElement(a.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 a=l(e,t,r??{});return e.createElement(a.type,a.props,...n)},cloneElement:(t,r,...n)=>{let a=e.cloneElement(t,r??void 0,...n),o=a.ref,i=l(e,a.type,{...a.props,ref:o});return i.type===a.type&&"string"!=typeof a.type?a:e.createElement(i.type,{...i.props,key:a.key})}}}r.d(t,{MA:()=>o,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:a,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:p,cloneElement:m,createContext:d,createElement:h,createFactory:y,createRef:g,forwardRef:w,isValidElement:b,lazy:v,memo:_,startTransition:S,unstable_act:R,useCallback:E,useContext:N,useDebugValue:$,useDeferredValue:C,useEffect:k,useId:x,useImperativeHandle:M,useInsertionEffect:O,useLayoutEffect:T,useMemo:j,useReducer:D,useRef:I,useState:A,useSyncExternalStore:P,useTransition:L,version:W,use:z}=n;r.d(t,{},{Children:a,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:p,cloneElement:m,createContext:d,createElement:h,createFactory:y,createRef:g,default:n,forwardRef:w,isValidElement:b,lazy:v,memo:_,startTransition:S,unstable_act:R,use:z,useCallback:E,useContext:N,useDebugValue:$,useDeferredValue:C,useEffect:k,useId:x,useImperativeHandle:M,useInsertionEffect:O,useLayoutEffect:T,useMemo:j,useReducer:D,useRef:I,useState:A,useSyncExternalStore:P,useTransition:L,version:W})}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var l=t[n]={exports:{}};return e[n](l,l.exports,r),l.exports}r.d=(e,t,n)=>{var a=(t,n)=>{for(var a in t)r.o(t,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,[n]:t[a]})};a(t,"get"),a(n,"value")},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:n,Fragment:a}=(0,r("p").MA)(window.React);var l=r("vD"),o=r("C");let i=window.WallarmDS.AnimatedBackground,c=window.WallarmDS.Button,s=window.WallarmDS.Input,u=window.WallarmDS.VStack,f=window.WallarmDS.Text,p=window.WallarmDS.SplashScreen,m={title:"Loading/SplashScreen",component:p,parameters:{layout:"centered",docs:{description:{component:"The full-screen entrance for a cold start — the brand `Logo` over an indeterminate bar, shown once while the app boots. Never on a route change and never as a general loading veil: in-app waits belong to `Loader`, `Skeleton` or `Progress`, and `AppShell` ships its own first-load reveal, so run one or the other rather than both. You drive `visible` and nothing else — the phases between are internal — and since it enforces no minimum on-screen time, guarding against a flash on a fast boot is the caller’s job."}}}},d=()=>{let r,n,a,s,u,f,m,d,h=(0,l.c)(10),[y,g]=(0,o.useState)(!0);return h[0]!==y?(r=()=>{if(!y)return;let e=window.setTimeout(()=>{g(!1)},2e3);return()=>window.clearTimeout(e)},n=[y],h[0]=y,h[1]=r,h[2]=n):(r=h[1],n=h[2]),(0,o.useEffect)(r,n),h[3]===Symbol.for("react.memo_cache_sentinel")?(a=e(i,{}),h[3]=a):a=h[3],h[4]===Symbol.for("react.memo_cache_sentinel")?(s={width:480,height:600,borderRadius:12},h[4]=s):s=h[4],h[5]===Symbol.for("react.memo_cache_sentinel")?(u=e("h2",{className:"text-lg font-semibold text-text-primary",children:"Welcome"}),f=e("p",{className:"text-center text-sm text-text-secondary",children:"Content revealed after splash animation."}),h[5]=u,h[6]=f):(u=h[5],f=h[6]),h[7]===Symbol.for("react.memo_cache_sentinel")?(m=t("div",{className:"flex h-full flex-col items-center justify-center gap-4 p-8",children:[u,f,e(c,{type:"button",onClick:()=>g(!0),children:"Replay"})]}),h[7]=m):m=h[7],h[8]!==y?(d=t("div",{className:"relative h-screen w-screen",children:[a,e("div",{className:"absolute inset-0 flex items-center justify-center",children:e(p,{visible:y,shrinkTarget:s,className:"bg-bg-page-bg shadow-lg",children:m})})]}),h[8]=y,h[9]=d):d=h[9],d};d.parameters={layout:"fullscreen"};let h=()=>{let r,n,a,u,m,d,h,y,g=(0,l.c)(10),[w,b]=(0,o.useState)(!0);g[0]!==w?(r=()=>{if(!w)return;let e=window.setTimeout(()=>{b(!1)},2e3);return()=>window.clearTimeout(e)},n=[w],g[0]=w,g[1]=r,g[2]=n):(r=g[1],n=g[2]),(0,o.useEffect)(r,n),g[3]===Symbol.for("react.memo_cache_sentinel")?(a=()=>{b(!0)},g[3]=a):a=g[3];let v=a;return g[4]===Symbol.for("react.memo_cache_sentinel")?(u=e(i,{}),g[4]=u):u=g[4],g[5]===Symbol.for("react.memo_cache_sentinel")?(m={width:480,borderRadius:12},g[5]=m):m=g[5],g[6]===Symbol.for("react.memo_cache_sentinel")?(d=e(f,{size:"xl",children:"Sign In"}),g[6]=d):d=g[6],g[7]===Symbol.for("react.memo_cache_sentinel")?(h=t("div",{className:"flex h-full w-full flex-col items-center justify-center gap-16 p-24",children:[d,t("div",{className:"flex w-full flex-col gap-12",children:[e(s,{placeholder:"Email"}),e(s,{placeholder:"Password",type:"password"})]}),e(c,{variant:"primary",color:"brand",className:"w-full",onClick:v,children:"Sign In"})]}),g[7]=h):h=g[7],g[8]!==w?(y=t("div",{className:"relative h-screen w-screen",children:[u,e("div",{className:"absolute inset-0 flex items-center justify-center",children:e(p,{visible:w,shrinkTarget:m,className:"bg-bg-page-bg shadow-lg",children:h})})]}),g[8]=w,g[9]=y):y=g[9],y};function y(e){return!e}h.parameters={layout:"fullscreen"};let g=[{name:"Basic",story:()=>{let t,r=(0,l.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(p,{}),r[0]=t):t=r[0],t},meta:m},{name:"Toggle",story:()=>{let r,n,a,i,s=(0,l.c)(8),[f,m]=(0,o.useState)(!0);s[0]!==f?(r=e("div",{className:"flex h-400 w-400 items-center justify-center",children:e(p,{visible:f})}),s[0]=f,s[1]=r):r=s[1],s[2]===Symbol.for("react.memo_cache_sentinel")?(n=()=>m(y),s[2]=n):n=s[2];let d=f?"Hide":"Show";return s[3]!==d?(a=e(c,{type:"button",onClick:n,children:d}),s[3]=d,s[4]=a):a=s[4],s[5]!==r||s[6]!==a?(i=t(u,{align:"center",children:[r,a]}),s[5]=r,s[6]=a,s[7]=i):i=s[7],i},meta:m},{name:"ShrinkToCard",story:d,meta:m},{name:"MeasuredHeight",story:h,meta:m}];function w({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},a="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,l=()=>o.default.createElement(a,n),i={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=l;l=()=>e(t,i)}return o.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},o.default.createElement("h2",{className:"text-sm mb-12"},e.name),o.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(o.default.createElement(window.WallarmDS.Root,null,g.map((e,t)=>o.default.createElement(w,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,402 @@
+Pairs one action with a menu of related ones, for when a second action matters enough that burying it in a `DropdownMenu` would hide it. Both halves are ordinary `Button`s, so they must share a variant, colour and size — the group only joins their facing corners.
+
+## Props as canvas attributes
+
+Use kebab-case attribute names. Pass non-string values through renderVals holes, including booleans. The full emitted API is in `components/index.d.ts`.
+
+| Attribute | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `title` | `string \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Stories
+
+### Default
+
+The two halves are plain `Button` children. `SplitButton` strips their facing corners and
+gives the pair a `role='group'` so it reads as one control.
+
+Source: SplitButton/SplitButton.stories.tsx#Default
+
+### Variants
+
+Every sanctioned pairing, and the reason the pair must match: outline buttons drop the
+gap and overlap their borders into a single hairline, which only looks right when both halves
+carry the same variant.
+
+Source: SplitButton/SplitButton.stories.tsx#Variants
+
+### Sizes
+
+Both halves take the same `size`, since the group aligns them rather than sizing them.
+
+Source: SplitButton/SplitButton.stories.tsx#Sizes
+
+### Content
+
+Text, icon-and-text, and icon-only leading halves. The trailing half stays a bare
+chevron — giving it a label doubles the width and makes the menu look like a second action.
+
+Source: SplitButton/SplitButton.stories.tsx#Content
+
+### WithDropdownMenu
+
+The real shape: the leading half performs the default action, and only the chevron opens
+the menu. Repeat the default inside the menu only if its wording differs there.
+
+Source: SplitButton/SplitButton.stories.tsx#WithDropdownMenu
+
+## Story sources
+
+### SplitButton/SplitButton.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { ChevronDown, CircleDashed } from '../../icons';
+import { Button } from '../Button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../DropdownMenu';
+import { NumericBadge } from '../NumericBadge';
+import { HStack, VStack } from '../Stack';
+import { SplitButton } from './SplitButton';
+
+const DESCRIPTION = [
+  'Pairs one action with a menu of related ones, for when a second action matters enough that burying it in a `DropdownMenu` would hide it.',
+  'Both halves are ordinary `Button`s, so they must share a variant, colour and size — the group only joins their facing corners.',
+].join(' ');
+
+const meta = {
+  title: 'Actions/SplitButton',
+  component: SplitButton,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+} satisfies Meta<typeof SplitButton>;
+
+export default meta;
+
+/**
+ * The two halves are plain `Button` children. `SplitButton` strips their facing corners and
+ * gives the pair a `role='group'` so it reads as one control.
+ */
+export const Default: StoryFn<typeof meta> = () => (
+  <SplitButton data-testid='split-button'>
+    <Button variant='primary' color='brand'>
+      Button
+    </Button>
+    <Button variant='primary' color='brand'>
+      <ChevronDown />
+    </Button>
+  </SplitButton>
+);
+
+/**
+ * Every sanctioned pairing, and the reason the pair must match: outline buttons drop the
+ * gap and overlap their borders into a single hairline, which only looks right when both halves
+ * carry the same variant.
+ */
+export const Variants: StoryFn<typeof meta> = () => (
+  <VStack>
+    <span className='sb-annotation'>Primary / Brand</span>
+    <HStack>
+      <SplitButton>
+        <Button variant='primary' color='brand'>
+          Button
+        </Button>
+        <Button variant='primary' color='brand'>
+          <ChevronDown />
+        </Button>
+      </SplitButton>
+    </HStack>
+
+    <span className='sb-annotation'>Outline / Neutral</span>
+    <HStack>
+      <SplitButton>
+        <Button variant='outline' color='neutral'>
+          Button
+        </Button>
+        <Button variant='outline' color='neutral'>
+          <ChevronDown />
+        </Button>
+      </SplitButton>
+    </HStack>
+
+    <span className='sb-annotation'>Secondary / Neutral</span>
+    <HStack>
+      <SplitButton>
+        <Button variant='secondary' color='neutral'>
+          Button
+        </Button>
+        <Button variant='secondary' color='neutral'>
+          <ChevronDown />
+        </Button>
+      </SplitButton>
+    </HStack>
+
+    <span className='sb-annotation'>Ghost / Neutral</span>
+    <HStack>
+      <SplitButton>
+        <Button variant='ghost' color='neutral'>
+          Button
+        </Button>
+        <Button variant='ghost' color='neutral'>
+          <ChevronDown />
+        </Button>
+      </SplitButton>
+    </HStack>
+
+    <span className='sb-annotation'>Secondary / Brand</span>
+    <HStack>
+      <SplitButton>
+        <Button variant='secondary' color='brand'>
+          Button
+        </Button>
+        <Button variant='secondary' color='brand'>
+          <ChevronDown />
+        </Button>
+      </SplitButton>
+    </HStack>
+
+    <span className='sb-annotation'>Ghost / Brand</span>
+    <HStack>
+      <SplitButton>
+        <Button variant='ghost' color='brand'>
+          Button
+        </Button>
+        <Button variant='ghost' color='brand'>
+          <ChevronDown />
+        </Button>
+      </SplitButton>
+    </HStack>
+
+    <span className='sb-annotation sb-annotation-alt'>Ghost / Neutral Alt</span>
+    <div className='flex flex-col gap-16 rounded-lg bg-component-tooltip-bg p-8'>
+      <HStack>
+        <SplitButton>
+          <Button variant='ghost' color='neutral-alt'>
+            Button
+          </Button>
+          <Button variant='ghost' color='neutral-alt'>
+            <ChevronDown />
+          </Button>
+        </SplitButton>
+      </HStack>
+    </div>
+
+    <span className='sb-annotation sb-annotation-alt'>Secondary / Neutral Alt</span>
+    <div className='flex flex-col gap-16 rounded-lg bg-component-tooltip-bg p-8'>
+      <HStack>
+        <SplitButton>
+          <Button variant='secondary' color='neutral-alt'>
+            Button
+          </Button>
+          <Button variant='secondary' color='neutral-alt'>
+            <ChevronDown />
+          </Button>
+        </SplitButton>
+      </HStack>
+    </div>
+  </VStack>
+);
+
+/**
+ * Both halves take the same `size`, since the group aligns them rather than sizing them.
+ */
+export const Sizes: StoryFn<typeof meta> = () => (
+  <HStack align='end' justify='center'>
+    <SplitButton>
+      <Button variant='primary' color='brand' size='small'>
+        Small
+      </Button>
+      <Button variant='primary' color='brand' size='small'>
+        <ChevronDown />
+      </Button>
+    </SplitButton>
+    <SplitButton>
+      <Button variant='primary' color='brand' size='medium'>
+        Medium
+      </Button>
+      <Button variant='primary' color='brand' size='medium'>
+        <ChevronDown />
+      </Button>
+    </SplitButton>
+    <SplitButton>
+      <Button variant='primary' color='brand' size='large'>
+        Large
+      </Button>
+      <Button variant='primary' color='brand' size='large'>
+        <ChevronDown />
+      </Button>
+    </SplitButton>
+  </HStack>
+);
+
+/**
+ * Text, icon-and-text, and icon-only leading halves. The trailing half stays a bare
+ * chevron — giving it a label doubles the width and makes the menu look like a second action.
+ */
+export const Content: StoryFn<typeof meta> = () => (
+  <VStack>
+    <span className='sb-annotation'>Text only</span>
+    <HStack align='end'>
+      <SplitButton>
+        <Button variant='primary' color='brand' size='large'>
+          Large
+        </Button>
+        <Button variant='primary' color='brand' size='large'>
+          <ChevronDown />
+        </Button>
+      </SplitButton>
+      <SplitButton>
+        <Button variant='outline' color='neutral' size='large'>
+          Large
+        </Button>
+        <Button variant='outline' color='neutral' size='large'>
+          <ChevronDown />
+        </Button>
+      </SplitButton>
+      <SplitButton>
+        <Button variant='secondary' color='neutral' size='large'>
+          Large
+        </Button>
+        <Button variant='secondary' color='neutral' size='large'>
+          <ChevronDown />
+        </Button>
+      </SplitButton>
+    </HStack>
+
+    <span className='sb-annotation'>Icon + Text</span>
+    <HStack align='end'>
+      <SplitButton>
+        <Button variant='primary' color='brand' size='large'>
+          <CircleDashed />
+          Large
+        </Button>
+        <Button variant='primary' color='brand' size='large'>
+          <ChevronDown />
+        </Button>
+      </SplitButton>
+      <SplitButton>
+        <Button variant='outline' color='neutral' size='large'>
+          <CircleDashed />
+          Large
+        </Button>
+        <Button variant='outline' color='neutral' size='large'>
+          <ChevronDown />
+        </Button>
+      </SplitButton>
+      <SplitButton>
+        <Button variant='secondary' color='neutral' size='large'>
+          <CircleDashed />
+          Large
+        </Button>
+        <Button variant='secondary' color='neutral' size='large'>
+          <ChevronDown />
+        </Button>
+      </SplitButton>
+    </HStack>
+
+    <span className='sb-annotation'>Icon + Text + Badge</span>
+    <HStack align='end'>
+      <SplitButton>
+        <Button variant='primary' color='brand' size='large'>
+          <CircleDashed />
+          Large
+          <NumericBadge type='outline'>1</NumericBadge>
+        </Button>
+        <Button variant='primary' color='brand' size='large'>
+          <ChevronDown />
+        </Button>
+      </SplitButton>
+      <SplitButton>
+        <Button variant='outline' color='neutral' size='large'>
+          <CircleDashed />
+          Large
+          <NumericBadge type='outline'>1</NumericBadge>
+        </Button>
+        <Button variant='outline' color='neutral' size='large'>
+          <ChevronDown />
+        </Button>
+      </SplitButton>
+      <SplitButton>
+        <Button variant='secondary' color='neutral' size='large'>
+          <CircleDashed />
+          Large
+          <NumericBadge type='outline'>1</NumericBadge>
+        </Button>
+        <Button variant='secondary' color='neutral' size='large'>
+          <ChevronDown />
+        </Button>
+      </SplitButton>
+    </HStack>
+
+    <span className='sb-annotation'>Icon only</span>
+    <HStack align='end'>
+      <SplitButton>
+        <Button variant='primary' color='brand' size='large'>
+          <CircleDashed />
+        </Button>
+        <Button variant='primary' color='brand' size='large'>
+          <ChevronDown />
+        </Button>
+      </SplitButton>
+      <SplitButton>
+        <Button variant='outline' color='neutral' size='large'>
+          <CircleDashed />
+        </Button>
+        <Button variant='outline' color='neutral' size='large'>
+          <ChevronDown />
+        </Button>
+      </SplitButton>
+      <SplitButton>
+        <Button variant='secondary' color='neutral' size='large'>
+          <CircleDashed />
+        </Button>
+        <Button variant='secondary' color='neutral' size='large'>
+          <ChevronDown />
+        </Button>
+      </SplitButton>
+    </HStack>
+  </VStack>
+);
+
+/**
+ * The real shape: the leading half performs the default action, and only the chevron opens
+ * the menu. Repeat the default inside the menu only if its wording differs there.
+ */
+export const WithDropdownMenu: StoryFn<typeof meta> = () => (
+  <DropdownMenu>
+    <SplitButton data-testid='split-button-dropdown'>
+      <Button variant='primary' color='brand'>
+        Save
+      </Button>
+      <DropdownMenuTrigger asChild>
+        <Button variant='primary' color='brand'>
+          <ChevronDown />
+        </Button>
+      </DropdownMenuTrigger>
+    </SplitButton>
+    <DropdownMenuContent>
+      <DropdownMenuItem value='draft'>Save as draft</DropdownMenuItem>
+      <DropdownMenuItem value='publish'>Save and publish</DropdownMenuItem>
+      <DropdownMenuItem value='template'>Save as template</DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+);
+```

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

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

@@ -0,0 +1,12 @@
+var e={vD(e,r,n){let t,a;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var l,o,c=Object.create,i=Object.defineProperty,s=Object.getOwnPropertyDescriptor,m=Object.getOwnPropertyNames,d=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,h=(e,r,n,t)=>{if(r&&"object"==typeof r||"function"==typeof r)for(let a of m(r))u.call(e,a)||a===n||i(e,a,{get:()=>r[a],enumerable:!(t=s(r,a))||t.enumerable});return e},f={},y={$dispatcherGuard:()=>C,$makeReadOnly:()=>M,$reset:()=>D,$structuralCheck:()=>I,c:()=>N,clearRenderCounterRegistry:()=>k,renderCounterRegistry:()=>O,useRenderCounter:()=>x};for(var p in y)i(f,p,{get:y[p],enumerable:!0});e.exports=h(i({},"__esModule",{value:!0}),f);var _=(a=null!=(t=n("C"))?c(d(t)):{},h(t&&t.__esModule?a:i(a,"default",{value:t,enumerable:!0}),t)),{useRef:b,useEffect:S,isValidElement:g}=_,v=null!=(l=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:_.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,w=Symbol.for("react.memo_cache_sentinel"),N="function"==typeof(null==(o=_.__COMPILER_RUNTIME)?void 0:o.c)?_.__COMPILER_RUNTIME.c:function(e){return _.useMemo(()=>{let r=Array(e);for(let n=0;n<e;n++)r[n]=w;return r[w]=!0,r},[])},R={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{R[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var E=null;function $(e){return v.ReactCurrentDispatcher.current=e,v.ReactCurrentDispatcher.current}R.useMemoCache=e=>{if(null!=E)return E.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var z=[];function C(e){let r=v.ReactCurrentDispatcher.current;if(0===e){if(z.push(r),1===z.length&&(E=r),r===R)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");$(R)}else if(1===e){let e=z.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===z.length&&(E=null),$(e)}else if(2===e)z.push(r),$(E);else if(3===e){let e=z.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");$(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function D(e){for(let r=0;r<e.length;r++)e[r]=w}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var O=new Map;function k(){for(let e of O.values())e.forEach(e=>{e.count=0})}function x(e){let r=b(null);null!=r.current&&(r.current.count+=1),S(()=>{if(null==r.current){let n,t={count:0};null==(n=O.get(e))&&(n=new Set,O.set(e,n)),n.add(t),r.current=t}return()=>{var n;let t;null!==r.current&&(n=r.current,null!=(t=O.get(e))&&t.delete(n))}})}var j=new Set;function I(e,r,n,t,a,l){function o(e,r,o,c){let i=`${t}:${l} [${a}] ${n}${o} changed from ${e} to ${r} at depth ${c}`;j.has(i)||(j.add(i),console.error(i))}!function e(r,n,t,a){if(!(a>2)){if(r!==n)if(typeof r!=typeof n)o(`type ${typeof r}`,`type ${typeof n}`,t,a);else if("object"==typeof r){let l=Array.isArray(r),c=Array.isArray(n);if(null===r&&null!==n)o("null",`type ${typeof n}`,t,a);else if(null===n)o(`type ${typeof r}`,"null",t,a);else if(r instanceof Map)if(n instanceof Map)if(r.size!==n.size)o(`Map instance with size ${r.size}`,`Map instance with size ${n.size}`,t,a);else for(let[l,c]of r)n.has(l)?e(c,n.get(l),`${t}.get(${l})`,a+1):o(`Map instance with key ${l}`,`Map instance without key ${l}`,t,a);else o("Map instance","other value",t,a);else if(n instanceof Map)o("other value","Map instance",t,a);else if(r instanceof Set)if(n instanceof Set)if(r.size!==n.size)o(`Set instance with size ${r.size}`,`Set instance with size ${n.size}`,t,a);else for(let e of n)r.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,t,a);else o("Set instance","other value",t,a);else if(n instanceof Set)o("other value","Set instance",t,a);else if(l||c)if(l!==c)o(`type ${l?"array":"object"}`,`type ${c?"array":"object"}`,t,a);else if(r.length!==n.length)o(`array with length ${r.length}`,`array with length ${n.length}`,t,a);else for(let l=0;l<r.length;l++)e(r[l],n[l],`${t}[${l}]`,a+1);else if(g(r)||g(n))g(r)!==g(n)?o(`type ${g(r)?"React element":"object"}`,`type ${g(n)?"React element":"object"}`,t,a):r.type!==n.type?o(`React element of type ${r.type}`,`React element of type ${n.type}`,t,a):e(r.props,n.props,`[props of ${t}]`,a+1);else{for(let e in n)e in r||o(`object without key ${e}`,`object with key ${e}`,t,a);for(let l in r)l in n?e(r[l],n[l],`${t}.${l}`,a+1):o(`object with key ${l}`,`object without key ${l}`,t,a)}}else{if("function"==typeof r)return;isNaN(r)||isNaN(n)?isNaN(r)!==isNaN(n)&&o(`${isNaN(r)?"NaN":"non-NaN value"}`,`${isNaN(n)?"NaN":"non-NaN value"}`,t,a):r!==n&&o(r,n,t,a)}}}(e,r,"",0)}},p(e,r,n){let t=new WeakMap,a=new WeakMap;function l(e,r,n){let l=r,o=n;if("object"==typeof l&&null!==l&&"$$typeof"in l&&l.$$typeof===Symbol.for("react.context")&&"Provider"in l&&(l=l.Provider),"function"==typeof l&&null!=o.ref&&!l.prototype?.isReactComponent){let r=l,n=t.get(e);n||(n=new WeakMap,t.set(e,n));let a=n.get(r);a||((a=e.forwardRef((e,n)=>r({...e,ref:n}))).displayName=r.displayName??r.name,n.set(r,a)),l=a}if("string"==typeof l&&"boolean"==typeof o.inert&&((o={...o}).inert?o.inert="":delete o.inert),"string"==typeof l)for(let[e,r]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in o&&(o={...o,[r]:o[e]},delete o[e]);return"string"==typeof l&&null!=o.ref&&(l=function(e,r){let n=a.get(e);n||(n=new Map,a.set(e,n));let t=n.get(r);if(t)return t;let l=e.forwardRef((n,t)=>{let a=e.useRef(null);if(!a.current||a.current.original!==t){let e;a.current={original:t,callback:r=>{if(null==r&&e){let r=e;e=void 0,r();return}if("function"==typeof t){let n=t(r);e="function"==typeof n?n:void 0}else t&&(t.current=r)}}}return e.createElement(r,{...n,ref:a.current.callback})});return l.displayName=`CanvasHost(${r})`,n.set(r,l),l}(e,l)),{type:l,props:o}}function o(e){let r=(r,n,t)=>{let a=l(e,r,n??{});return e.createElement(a.type,void 0===t?a.props:{...a.props,key:t})};return{jsx:r,jsxs:(r,n,t)=>{let a=l(e,r,n??{}),{children:o,...c}=a.props;return e.createElement(a.type,void 0===t?c:{...c,key:t},...Array.isArray(o)?o:[o])},jsxDEV:r,Fragment:e.Fragment}}function c(e){return{...e,createElement:(r,n,...t)=>{let a=l(e,r,n??{});return e.createElement(a.type,a.props,...t)},cloneElement:(r,n,...t)=>{let a=e.cloneElement(r,n??void 0,...t),o=a.ref,c=l(e,a.type,{...a.props,ref:o});return c.type===a.type&&"string"!=typeof a.type?a:e.createElement(c.type,{...c.props,key:a.key})}}}n.d(r,{MA:()=>o,YJ:()=>c})},C(e,r,n){n.r(r);let t=(0,n("p").YJ)(window.React),{Children:a,Component:l,Fragment:o,Profiler:c,PureComponent:i,StrictMode:s,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:u,cloneElement:h,createContext:f,createElement:y,createFactory:p,createRef:_,forwardRef:b,isValidElement:S,lazy:g,memo:v,startTransition:w,unstable_act:N,useCallback:R,useContext:E,useDebugValue:$,useDeferredValue:z,useEffect:C,useId:D,useImperativeHandle:M,useInsertionEffect:O,useLayoutEffect:k,useMemo:x,useReducer:j,useRef:I,useState:T,useSyncExternalStore:L,useTransition:B,version:A,use:W}=t;n.d(r,{},{Children:a,Component:l,Fragment:o,Profiler:c,PureComponent:i,StrictMode:s,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:u,cloneElement:h,createContext:f,createElement:y,createFactory:p,createRef:_,default:t,forwardRef:b,isValidElement:S,lazy:g,memo:v,startTransition:w,unstable_act:N,use:W,useCallback:R,useContext:E,useDebugValue:$,useDeferredValue:z,useEffect:C,useId:D,useImperativeHandle:M,useInsertionEffect:O,useLayoutEffect:k,useMemo:x,useReducer:j,useRef:I,useState:T,useSyncExternalStore:L,useTransition:B,version:A})}},r={};function n(t){var a=r[t];if(void 0!==a)return a.exports;var l=r[t]={exports:{}};return e[t](l,l.exports,n),l.exports}n.d=(e,r,t)=>{var a=(r,t)=>{for(var a in r)n.o(r,a)&&!n.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,[t]:r[a]})};a(r,"get"),a(t,"value")},n.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),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:r,jsxDEV:t,Fragment:a}=(0,n("p").MA)(window.React);var l=n("vD");let o=window.WallarmDS.Icons.ChevronDown,c=window.WallarmDS.Icons.CircleDashed,i=window.WallarmDS.Button,s=window.WallarmDS.DropdownMenu,m=window.WallarmDS.DropdownMenuContent,d=window.WallarmDS.DropdownMenuItem,u=window.WallarmDS.DropdownMenuTrigger,h=window.WallarmDS.NumericBadge,f=window.WallarmDS.HStack,y=window.WallarmDS.VStack,p=window.WallarmDS.SplitButton,_={title:"Actions/SplitButton",component:p,parameters:{layout:"centered",docs:{description:{component:"Pairs one action with a menu of related ones, for when a second action matters enough that burying it in a `DropdownMenu` would hide it. Both halves are ordinary `Button`s, so they must share a variant, colour and size — the group only joins their facing corners."}}}};var b=n("C");let S=[{name:"Default",story:()=>{let n,t,a=(0,l.c)(2);return a[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(i,{variant:"primary",color:"brand",children:"Button"}),a[0]=n):n=a[0],a[1]===Symbol.for("react.memo_cache_sentinel")?(t=r(p,{"data-testid":"split-button",children:[n,e(i,{variant:"primary",color:"brand",children:e(o,{})})]}),a[1]=t):t=a[1],t},meta:_},{name:"Variants",story:()=>{let n,t,a,c,s,m,d,u,h,_,b,S,g,v,w,N,R,E,$,z,C,D,M,O,k=(0,l.c)(24);return k[0]===Symbol.for("react.memo_cache_sentinel")?(n=e("span",{className:"sb-annotation",children:"Primary / Brand"}),k[0]=n):n=k[0],k[1]===Symbol.for("react.memo_cache_sentinel")?(t=e(i,{variant:"primary",color:"brand",children:"Button"}),k[1]=t):t=k[1],k[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(f,{children:r(p,{children:[t,e(i,{variant:"primary",color:"brand",children:e(o,{})})]})}),c=e("span",{className:"sb-annotation",children:"Outline / Neutral"}),k[2]=a,k[3]=c):(a=k[2],c=k[3]),k[4]===Symbol.for("react.memo_cache_sentinel")?(s=e(i,{variant:"outline",color:"neutral",children:"Button"}),k[4]=s):s=k[4],k[5]===Symbol.for("react.memo_cache_sentinel")?(m=e(f,{children:r(p,{children:[s,e(i,{variant:"outline",color:"neutral",children:e(o,{})})]})}),d=e("span",{className:"sb-annotation",children:"Secondary / Neutral"}),k[5]=m,k[6]=d):(m=k[5],d=k[6]),k[7]===Symbol.for("react.memo_cache_sentinel")?(u=e(i,{variant:"secondary",color:"neutral",children:"Button"}),k[7]=u):u=k[7],k[8]===Symbol.for("react.memo_cache_sentinel")?(h=e(f,{children:r(p,{children:[u,e(i,{variant:"secondary",color:"neutral",children:e(o,{})})]})}),_=e("span",{className:"sb-annotation",children:"Ghost / Neutral"}),k[8]=h,k[9]=_):(h=k[8],_=k[9]),k[10]===Symbol.for("react.memo_cache_sentinel")?(b=e(i,{variant:"ghost",color:"neutral",children:"Button"}),k[10]=b):b=k[10],k[11]===Symbol.for("react.memo_cache_sentinel")?(S=e(f,{children:r(p,{children:[b,e(i,{variant:"ghost",color:"neutral",children:e(o,{})})]})}),g=e("span",{className:"sb-annotation",children:"Secondary / Brand"}),k[11]=S,k[12]=g):(S=k[11],g=k[12]),k[13]===Symbol.for("react.memo_cache_sentinel")?(v=e(i,{variant:"secondary",color:"brand",children:"Button"}),k[13]=v):v=k[13],k[14]===Symbol.for("react.memo_cache_sentinel")?(w=e(f,{children:r(p,{children:[v,e(i,{variant:"secondary",color:"brand",children:e(o,{})})]})}),N=e("span",{className:"sb-annotation",children:"Ghost / Brand"}),k[14]=w,k[15]=N):(w=k[14],N=k[15]),k[16]===Symbol.for("react.memo_cache_sentinel")?(R=e(i,{variant:"ghost",color:"brand",children:"Button"}),k[16]=R):R=k[16],k[17]===Symbol.for("react.memo_cache_sentinel")?(E=e(f,{children:r(p,{children:[R,e(i,{variant:"ghost",color:"brand",children:e(o,{})})]})}),$=e("span",{className:"sb-annotation sb-annotation-alt",children:"Ghost / Neutral Alt"}),k[17]=E,k[18]=$):(E=k[17],$=k[18]),k[19]===Symbol.for("react.memo_cache_sentinel")?(z=e(i,{variant:"ghost",color:"neutral-alt",children:"Button"}),k[19]=z):z=k[19],k[20]===Symbol.for("react.memo_cache_sentinel")?(C=e("div",{className:"flex flex-col gap-16 rounded-lg bg-component-tooltip-bg p-8",children:e(f,{children:r(p,{children:[z,e(i,{variant:"ghost",color:"neutral-alt",children:e(o,{})})]})})}),D=e("span",{className:"sb-annotation sb-annotation-alt",children:"Secondary / Neutral Alt"}),k[20]=C,k[21]=D):(C=k[20],D=k[21]),k[22]===Symbol.for("react.memo_cache_sentinel")?(M=e(i,{variant:"secondary",color:"neutral-alt",children:"Button"}),k[22]=M):M=k[22],k[23]===Symbol.for("react.memo_cache_sentinel")?(O=r(y,{children:[n,a,c,m,d,h,_,S,g,w,N,E,$,C,D,e("div",{className:"flex flex-col gap-16 rounded-lg bg-component-tooltip-bg p-8",children:e(f,{children:r(p,{children:[M,e(i,{variant:"secondary",color:"neutral-alt",children:e(o,{})})]})})})]}),k[23]=O):O=k[23],O},meta:_},{name:"Sizes",story:()=>{let n,t,a,c,s,m,d=(0,l.c)(6);return d[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(i,{variant:"primary",color:"brand",size:"small",children:"Small"}),d[0]=n):n=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(t=r(p,{children:[n,e(i,{variant:"primary",color:"brand",size:"small",children:e(o,{})})]}),d[1]=t):t=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(i,{variant:"primary",color:"brand",size:"medium",children:"Medium"}),d[2]=a):a=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(c=r(p,{children:[a,e(i,{variant:"primary",color:"brand",size:"medium",children:e(o,{})})]}),d[3]=c):c=d[3],d[4]===Symbol.for("react.memo_cache_sentinel")?(s=e(i,{variant:"primary",color:"brand",size:"large",children:"Large"}),d[4]=s):s=d[4],d[5]===Symbol.for("react.memo_cache_sentinel")?(m=r(f,{align:"end",justify:"center",children:[t,c,r(p,{children:[s,e(i,{variant:"primary",color:"brand",size:"large",children:e(o,{})})]})]}),d[5]=m):m=d[5],m},meta:_},{name:"Content",story:()=>{let n,t,a,s,m,d,u,_,b,S,g,v,w,N,R,E,$,z,C,D,M,O,k,x,j,I,T,L,B,A,W,P=(0,l.c)(31);return P[0]===Symbol.for("react.memo_cache_sentinel")?(n=e("span",{className:"sb-annotation",children:"Text only"}),P[0]=n):n=P[0],P[1]===Symbol.for("react.memo_cache_sentinel")?(t=e(i,{variant:"primary",color:"brand",size:"large",children:"Large"}),P[1]=t):t=P[1],P[2]===Symbol.for("react.memo_cache_sentinel")?(a=r(p,{children:[t,e(i,{variant:"primary",color:"brand",size:"large",children:e(o,{})})]}),P[2]=a):a=P[2],P[3]===Symbol.for("react.memo_cache_sentinel")?(s=e(i,{variant:"outline",color:"neutral",size:"large",children:"Large"}),P[3]=s):s=P[3],P[4]===Symbol.for("react.memo_cache_sentinel")?(m=r(p,{children:[s,e(i,{variant:"outline",color:"neutral",size:"large",children:e(o,{})})]}),P[4]=m):m=P[4],P[5]===Symbol.for("react.memo_cache_sentinel")?(d=e(i,{variant:"secondary",color:"neutral",size:"large",children:"Large"}),P[5]=d):d=P[5],P[6]===Symbol.for("react.memo_cache_sentinel")?(u=r(f,{align:"end",children:[a,m,r(p,{children:[d,e(i,{variant:"secondary",color:"neutral",size:"large",children:e(o,{})})]})]}),_=e("span",{className:"sb-annotation",children:"Icon + Text"}),P[6]=u,P[7]=_):(u=P[6],_=P[7]),P[8]===Symbol.for("react.memo_cache_sentinel")?(b=r(i,{variant:"primary",color:"brand",size:"large",children:[e(c,{}),"Large"]}),P[8]=b):b=P[8],P[9]===Symbol.for("react.memo_cache_sentinel")?(S=r(p,{children:[b,e(i,{variant:"primary",color:"brand",size:"large",children:e(o,{})})]}),P[9]=S):S=P[9],P[10]===Symbol.for("react.memo_cache_sentinel")?(g=r(i,{variant:"outline",color:"neutral",size:"large",children:[e(c,{}),"Large"]}),P[10]=g):g=P[10],P[11]===Symbol.for("react.memo_cache_sentinel")?(v=r(p,{children:[g,e(i,{variant:"outline",color:"neutral",size:"large",children:e(o,{})})]}),P[11]=v):v=P[11],P[12]===Symbol.for("react.memo_cache_sentinel")?(w=r(i,{variant:"secondary",color:"neutral",size:"large",children:[e(c,{}),"Large"]}),P[12]=w):w=P[12],P[13]===Symbol.for("react.memo_cache_sentinel")?(N=r(f,{align:"end",children:[S,v,r(p,{children:[w,e(i,{variant:"secondary",color:"neutral",size:"large",children:e(o,{})})]})]}),R=e("span",{className:"sb-annotation",children:"Icon + Text + Badge"}),P[13]=N,P[14]=R):(N=P[13],R=P[14]),P[15]===Symbol.for("react.memo_cache_sentinel")?(E=e(c,{}),P[15]=E):E=P[15],P[16]===Symbol.for("react.memo_cache_sentinel")?($=r(i,{variant:"primary",color:"brand",size:"large",children:[E,"Large",e(h,{type:"outline",children:"1"})]}),P[16]=$):$=P[16],P[17]===Symbol.for("react.memo_cache_sentinel")?(z=r(p,{children:[$,e(i,{variant:"primary",color:"brand",size:"large",children:e(o,{})})]}),P[17]=z):z=P[17],P[18]===Symbol.for("react.memo_cache_sentinel")?(C=e(c,{}),P[18]=C):C=P[18],P[19]===Symbol.for("react.memo_cache_sentinel")?(D=r(i,{variant:"outline",color:"neutral",size:"large",children:[C,"Large",e(h,{type:"outline",children:"1"})]}),P[19]=D):D=P[19],P[20]===Symbol.for("react.memo_cache_sentinel")?(M=r(p,{children:[D,e(i,{variant:"outline",color:"neutral",size:"large",children:e(o,{})})]}),P[20]=M):M=P[20],P[21]===Symbol.for("react.memo_cache_sentinel")?(O=e(c,{}),P[21]=O):O=P[21],P[22]===Symbol.for("react.memo_cache_sentinel")?(k=r(i,{variant:"secondary",color:"neutral",size:"large",children:[O,"Large",e(h,{type:"outline",children:"1"})]}),P[22]=k):k=P[22],P[23]===Symbol.for("react.memo_cache_sentinel")?(x=r(f,{align:"end",children:[z,M,r(p,{children:[k,e(i,{variant:"secondary",color:"neutral",size:"large",children:e(o,{})})]})]}),j=e("span",{className:"sb-annotation",children:"Icon only"}),P[23]=x,P[24]=j):(x=P[23],j=P[24]),P[25]===Symbol.for("react.memo_cache_sentinel")?(I=e(i,{variant:"primary",color:"brand",size:"large",children:e(c,{})}),P[25]=I):I=P[25],P[26]===Symbol.for("react.memo_cache_sentinel")?(T=r(p,{children:[I,e(i,{variant:"primary",color:"brand",size:"large",children:e(o,{})})]}),P[26]=T):T=P[26],P[27]===Symbol.for("react.memo_cache_sentinel")?(L=e(i,{variant:"outline",color:"neutral",size:"large",children:e(c,{})}),P[27]=L):L=P[27],P[28]===Symbol.for("react.memo_cache_sentinel")?(B=r(p,{children:[L,e(i,{variant:"outline",color:"neutral",size:"large",children:e(o,{})})]}),P[28]=B):B=P[28],P[29]===Symbol.for("react.memo_cache_sentinel")?(A=e(i,{variant:"secondary",color:"neutral",size:"large",children:e(c,{})}),P[29]=A):A=P[29],P[30]===Symbol.for("react.memo_cache_sentinel")?(W=r(y,{children:[n,u,_,N,R,x,j,r(f,{align:"end",children:[T,B,r(p,{children:[A,e(i,{variant:"secondary",color:"neutral",size:"large",children:e(o,{})})]})]})]}),P[30]=W):W=P[30],W},meta:_},{name:"WithDropdownMenu",story:()=>{let n,t,a,c=(0,l.c)(3);return c[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(i,{variant:"primary",color:"brand",children:"Save"}),c[0]=n):n=c[0],c[1]===Symbol.for("react.memo_cache_sentinel")?(t=r(p,{"data-testid":"split-button-dropdown",children:[n,e(u,{asChild:!0,children:e(i,{variant:"primary",color:"brand",children:e(o,{})})})]}),c[1]=t):t=c[1],c[2]===Symbol.for("react.memo_cache_sentinel")?(a=r(s,{children:[t,r(m,{children:[e(d,{value:"draft",children:"Save as draft"}),e(d,{value:"publish",children:"Save and publish"}),e(d,{value:"template",children:"Save as template"})]})]}),c[2]=a):a=c[2],a},meta:_}];function g({entry:e}){let{story:r,meta:n}=e,t={...n.args,...r.args},a="function"==typeof r||r.$$typeof?r:r.render||n.render||n.component,l=()=>b.default.createElement(a,t),o={args:t,globals:{theme:"light"},parameters:{...n.parameters,...r.parameters},viewMode:"story"};for(let e of[...n.decorators||[],...r.decorators||[]].reverse()){let r=l;l=()=>e(r,o)}return b.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},b.default.createElement("h2",{className:"text-sm mb-12"},e.name),b.default.createElement(l))}window.WallarmPreview={mount(e){let r=window.ReactDOM.createRoot(e);return r.render(b.default.createElement(window.WallarmDS.Root,null,S.map((e,r)=>b.default.createElement(g,{key:r,entry:e})))),r}}})();