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

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

@@ -0,0 +1,324 @@
+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.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `title` | `string \| undefined` | no | — |  |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `disabled` | `boolean` | no | `false` |  |
+| `size` | `"small" \| "medium" \| "large" \| null \| undefined` | no | `medium` |  |
+| `as-child` | `boolean \| undefined` | no | `false` |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.TagClose` — `TagCloseProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+The default. It is focusable and clickable, which is what separates it from a badge even when
+it looks the same.
+
+Source: Tag/Tag.stories.tsx#Basic
+
+### Sizes
+
+The same two heights as `Badge`, so a row mixing them stays level.
+
+Source: Tag/Tag.stories.tsx#Sizes
+
+### Disabled
+
+Out of the tab order and unclickable, but still readable — a filter that cannot currently
+apply is still information.
+
+Source: Tag/Tag.stories.tsx#Disabled
+
+### Closable
+
+A dismiss control for a value the reader added, such as an applied filter. Removal is the
+only thing the control should do.
+
+Source: Tag/Tag.stories.tsx#Closable
+
+### Selectable
+
+A toggle, for filtering by tapping the values themselves. Selected state has to be visible
+without colour alone.
+
+Source: Tag/Tag.stories.tsx#Selectable
+
+### WithIcons
+
+An icon beside the label, carrying the kind of thing rather than its state.
+
+Source: Tag/Tag.stories.tsx#WithIcons
+
+### WithOnClick
+
+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.
+
+Source: Tag/Tag.stories.tsx#WithOnClick
+
+## Story sources
+
+### Tag/Tag.stories.tsx
+
+```tsx
+import { useState } from 'react';
+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 {
+  Select,
+  SelectButtonTag,
+  SelectButtonTagValue,
+  SelectContent,
+  type SelectDataItem,
+  SelectOption,
+  SelectOptionIndicator,
+  SelectOptionText,
+  SelectPositioner,
+} from '../Select';
+import { HStack, VStack } from '../Stack';
+import { Tag } from './Tag';
+import { TagClose } from './TagClose';
+
+const DESCRIPTION = [
+  '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.',
+].join(' ');
+
+const onTagClick = fn().mockName('onTagClick');
+
+const meta = {
+  title: 'Status Indication/Tag',
+  component: Tag,
+  subcomponents: { TagClose },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['medium', 'large'],
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Tag>;
+
+export default meta;
+
+/**
+ * The default. It is focusable and clickable, which is what separates it from a badge even when
+ * it looks the same.
+ */
+export const Basic: StoryFn<typeof meta> = ({ ...args }) => <Tag {...args}>Tag</Tag>;
+
+/**
+ * The same two heights as `Badge`, so a row mixing them stays level.
+ */
+export const Sizes: StoryFn<typeof meta> = ({ ...args }) => (
+  <HStack align='center' gap={8}>
+    <Tag {...args} size='medium'>
+      Medium Tag
+    </Tag>
+    <Tag {...args} size='large'>
+      Large Tag
+    </Tag>
+  </HStack>
+);
+
+/**
+ * Out of the tab order and unclickable, but still readable — a filter that cannot currently
+ * apply is still information.
+ */
+export const Disabled: StoryFn<typeof meta> = ({ ...args }) => (
+  <HStack gap={8}>
+    <Tag {...args} size='medium' disabled>
+      Disabled Medium
+    </Tag>
+    <Tag {...args} size='large' disabled>
+      Disabled Large
+    </Tag>
+  </HStack>
+);
+
+/**
+ * A dismiss control for a value the reader added, such as an applied filter. Removal is the
+ * only thing the control should do.
+ */
+export const Closable: StoryFn<typeof meta> = ({ ...args }) => {
+  const [isVisible, setIsVisible] = useState<boolean>(true);
+
+  return (
+    <>
+      {isVisible && (
+        <Tag {...args} data-testid='tag'>
+          Closable tag
+          <TagClose onClick={() => setIsVisible(false)} />
+        </Tag>
+      )}
+    </>
+  );
+};
+
+/**
+ * A toggle, for filtering by tapping the values themselves. Selected state has to be visible
+ * without colour alone.
+ */
+export const Selectable: StoryFn<typeof meta> = () => {
+  const collection = createListCollection<SelectDataItem>({
+    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: item => item.value === 'UTC+2',
+  });
+
+  return (
+    <VStack gap={8}>
+      <Select collection={collection}>
+        <SelectButtonTag>
+          <Earth />
+          <SelectButtonTagValue placeholder='Timezone' />
+        </SelectButtonTag>
+
+        <SelectPositioner>
+          <SelectContent>
+            {collection.items.map(skill => (
+              <SelectOption key={skill.value} item={skill}>
+                <SelectOptionText>{skill.label}</SelectOptionText>
+                <SelectOptionIndicator />
+              </SelectOption>
+            ))}
+          </SelectContent>
+        </SelectPositioner>
+      </Select>
+
+      <Select collection={collection}>
+        <SelectButtonTag size='large'>
+          <Earth />
+          <SelectButtonTagValue placeholder='Timezone' />
+        </SelectButtonTag>
+
+        <SelectPositioner>
+          <SelectContent>
+            {collection.items.map(skill => (
+              <SelectOption key={skill.value} item={skill}>
+                <SelectOptionText>{skill.label}</SelectOptionText>
+                <SelectOptionIndicator />
+              </SelectOption>
+            ))}
+          </SelectContent>
+        </SelectPositioner>
+      </Select>
+    </VStack>
+  );
+};
+
+/**
+ * An icon beside the label, carrying the kind of thing rather than its state.
+ */
+export const WithIcons: StoryFn<typeof meta> = ({ ...args }) => (
+  <VStack gap={12} align='stretch'>
+    <VStack gap={8}>
+      <span className='sb-annotation'>medium</span>
+      <HStack gap={8}>
+        <Tag {...args} size='medium'>
+          <Earth />
+          Tag with left icon
+        </Tag>
+        <Tag {...args} size='medium'>
+          Tag with right icon
+          <Info />
+        </Tag>
+        <Tag {...args} size='medium'>
+          <Earth />
+          Tag with left and right icons
+          <Info />
+        </Tag>
+      </HStack>
+    </VStack>
+    <VStack gap={8}>
+      <span className='sb-annotation'>large</span>
+      <HStack gap={8}>
+        <Tag {...args} size='large'>
+          <Earth />
+          Tag with left icon
+        </Tag>
+        <Tag {...args} size='large'>
+          Tag with right icon
+          <Info />
+        </Tag>
+        <Tag {...args} size='large'>
+          <Earth />
+          Tag with left and right icons
+          <Info />
+        </Tag>
+      </HStack>
+    </VStack>
+  </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.
+ */
+export const WithOnClick: StoryFn<typeof meta> = ({ ...args }) => (
+  <Tag {...args} onClick={onTagClick}>
+    Click me
+  </Tag>
+);
+```

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

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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,i){let r,n;/**
+ * 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,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}}})();

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

@@ -0,0 +1,200 @@
+Geist for body copy, labels and anything read as prose — reach for `Heading` when the text is a title and `Link` when it navigates. Weight carries emphasis and colour carries de-emphasis, so build hierarchy from those rather than by changing size.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `title` | `string \| undefined` | no | — |  |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `color` | `"primary" \| "primary-alt" \| "secondary" \| "secondary-alt" \| "tertiary-alt" \| "danger" \| "inherit"` | no | `inherit` |  |
+| `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | no | `lg` |  |
+| `weight` | `"light" \| "regular" \| "medium" \| "bold"` | no | `regular` |  |
+| `align` | `"left" \| "center" \| "right"` | no | — |  |
+| `inline` | `boolean` | no | — |  |
+| `grow` | `boolean` | no | `false` |  |
+| `truncate` | `boolean` | no | `false` |  |
+| `decoration` | `"dashed"` | no | — |  |
+| `line-height` | `"none" \| "tight" \| "snug" \| "normal" \| "relaxed"` | no | — |  |
+| `text-transform` | `"uppercase" \| "lowercase" \| "capitalize" \| "none"` | no | — |  |
+| `as-child` | `boolean \| undefined` | no | `false` |  |
+| `line-clamp` | `number \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Stories
+
+### Basic
+
+The default step. Text inherits its colour from the surroundings, which is why de-emphasis is
+a deliberate choice rather than the absence of one.
+
+Source: Text/Text.stories.tsx#Basic
+
+### Sizes
+
+The ramp, for density rather than hierarchy — step down in a dense table, not to signal that
+something matters less. `md` matches `sm` (14 / 20); it is the step Card's body text uses.
+
+Source: Text/Text.stories.tsx#Sizes
+
+### Weights
+
+All four weights at one size. Weight is emphasis within a level, never a way to create one.
+
+Source: Text/Text.stories.tsx#Weights
+
+### Colors
+
+The de-emphasis ladder. Colour is how text recedes; a smaller size only makes it harder to
+read.
+
+Source: Text/Text.stories.tsx#Colors
+
+### AsChild
+
+`asChild` puts the typography on your own element, for when the tag matters to the document
+but the styling should still come from here.
+
+Source: Text/Text.stories.tsx#AsChild
+
+## Story sources
+
+### Text/Text.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { VStack } from '../Stack';
+import { Text } from './Text';
+
+const DESCRIPTION = [
+  'Geist for body copy, labels and anything read as prose — reach for `Heading` when the text is a title and `Link` when it navigates.',
+  'Weight carries emphasis and colour carries de-emphasis, so build hierarchy from those rather than by changing size.',
+].join(' ');
+
+const meta = {
+  title: 'Typography/Text',
+  component: Text,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+
+  args: {},
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    },
+    weight: {
+      control: 'select',
+      options: ['light', 'regular', 'medium', 'bold'],
+    },
+    asChild: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Text>;
+
+export default meta;
+
+/**
+ * The default step. Text inherits its colour from the surroundings, which is why de-emphasis is
+ * a deliberate choice rather than the absence of one.
+ */
+export const Basic: StoryFn<typeof meta> = ({ ...args }) => (
+  <Text {...args}>Default body text</Text>
+);
+
+/** Size / leading in px, measured from the rendered component. */
+const SIZES = [
+  { size: 'xl', metrics: '18 / 28' },
+  { size: 'lg', metrics: '16 / 24' },
+  { size: 'md', metrics: '14 / 20' },
+  { size: 'sm', metrics: '14 / 20' },
+  { size: 'xs', metrics: '12 / 16' },
+] as const;
+
+/**
+ * The ramp, for density rather than hierarchy — step down in a dense table, not to signal that
+ * something matters less. `md` matches `sm` (14 / 20); it is the step Card's body text uses.
+ */
+export const Sizes: StoryFn<typeof meta> = ({ ...args }) => (
+  <VStack gap={24} align='start'>
+    {SIZES.map(({ size, metrics }) => (
+      <VStack key={size} gap={4} align='start'>
+        <Text size='xs' color='secondary'>
+          size=&apos;{size}&apos; · {metrics}
+        </Text>
+        <Text {...args} size={size}>
+          The quick brown fox jumps over the lazy dog
+        </Text>
+      </VStack>
+    ))}
+  </VStack>
+);
+
+/**
+ * All four weights at one size. Weight is emphasis within a level, never a way to create one.
+ */
+export const Weights: StoryFn<typeof meta> = ({ ...args }) => (
+  <VStack align='start'>
+    <Text {...args} size='lg' weight='light'>
+      Light Weight Body Text
+    </Text>
+    <Text {...args} size='lg' weight='regular'>
+      Regular Weight Body Text
+    </Text>
+    <Text {...args} size='lg' weight='medium'>
+      Medium Weight Body Text
+    </Text>
+    <Text {...args} size='lg' weight='bold'>
+      Bold Weight Body Text
+    </Text>
+  </VStack>
+);
+
+/**
+ * The de-emphasis ladder. Colour is how text recedes; a smaller size only makes it harder to
+ * read.
+ */
+export const Colors: StoryFn<typeof meta> = ({ ...args }) => (
+  <VStack align='start'>
+    <Text {...args} color='primary'>
+      Primary color text
+    </Text>
+    <Text {...args} color='primary-alt'>
+      Primary alt color text
+    </Text>
+    <Text {...args} color='secondary'>
+      Secondary color text
+    </Text>
+    <Text {...args} color='secondary-alt'>
+      Secondary alt color text
+    </Text>
+    <Text {...args} color='tertiary-alt'>
+      Tertiary alt color text
+    </Text>
+  </VStack>
+);
+
+/**
+ * `asChild` puts the typography on your own element, for when the tag matters to the document
+ * but the styling should still come from here.
+ */
+export const AsChild: StoryFn<typeof meta> = ({ ...args }) => (
+  <Text {...args} size='lg' weight='medium' asChild>
+    <span>Custom Span Element with AsChild</span>
+  </Text>
+);
+```

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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,l;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var o,a,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty,d=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let l of u(t))p.call(e,l)||l===r||c(e,l,{get:()=>t[l],enumerable:!(n=s(t,l))||n.enumerable});return e},y={},m={$dispatcherGuard:()=>x,$makeReadOnly:()=>O,$reset:()=>M,$structuralCheck:()=>D,c:()=>v,clearRenderCounterRegistry:()=>z,renderCounterRegistry:()=>k,useRenderCounter:()=>T};for(var h in m)c(y,h,{get:m[h],enumerable:!0});e.exports=d(c({},"__esModule",{value:!0}),y);var g=(l=null!=(n=r("C"))?i(f(n)):{},d(n&&n.__esModule?l:c(l,"default",{value:n,enumerable:!0}),n)),{useRef:w,useEffect:R,isValidElement:E}=g,b=null!=(o=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,$=Symbol.for("react.memo_cache_sentinel"),v="function"==typeof(null==(a=g.__COMPILER_RUNTIME)?void 0:a.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=$;return t[$]=!0,t},[])},_={};["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]=()=>{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 S=null;function C(e){return b.ReactCurrentDispatcher.current=e,b.ReactCurrentDispatcher.current}_.useMemoCache=e=>{if(null!=S)return S.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var N=[];function x(e){let t=b.ReactCurrentDispatcher.current;if(0===e){if(N.push(t),1===N.length&&(S=t),t===_)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(_)}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&&(S=null),C(e)}else if(2===e)N.push(t),C(S);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 M(e){for(let t=0;t<e.length;t++)e[t]=$}function O(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var k=new Map;function z(){for(let e of k.values())e.forEach(e=>{e.count=0})}function T(e){let t=w(null);null!=t.current&&(t.current.count+=1),R(()=>{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 j=new Set;function D(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}`;j.has(c)||(j.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(E(t)||E(r))E(t)!==E(r)?a(`type ${E(t)?"React element":"object"}`,`type ${E(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:f,act:p,cloneElement:d,createContext:y,createElement:m,createFactory:h,createRef:g,forwardRef:w,isValidElement:R,lazy:E,memo:b,startTransition:$,unstable_act:v,useCallback:_,useContext:S,useDebugValue:C,useDeferredValue:N,useEffect:x,useId:M,useImperativeHandle:O,useInsertionEffect:k,useLayoutEffect:z,useMemo:T,useReducer:j,useRef:D,useState:A,useSyncExternalStore:P,useTransition:I,version:W,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:f,act:p,cloneElement:d,createContext:y,createElement:m,createFactory:h,createRef:g,default:n,forwardRef:w,isValidElement:R,lazy:E,memo:b,startTransition:$,unstable_act:v,use:L,useCallback:_,useContext:S,useDebugValue:C,useDeferredValue:N,useEffect:x,useId:M,useImperativeHandle:O,useInsertionEffect:k,useLayoutEffect:z,useMemo:T,useReducer:j,useRef:D,useState:A,useSyncExternalStore:P,useTransition:I,version:W})}},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.VStack,i=window.WallarmDS.Text,c={title:"Typography/Text",component:i,parameters:{layout:"centered",docs:{description:{component:"Geist for body copy, labels and anything read as prose — reach for `Heading` when the text is a title and `Link` when it navigates. Weight carries emphasis and colour carries de-emphasis, so build hierarchy from those rather than by changing size."}}},args:{},argTypes:{size:{control:"select",options:["xs","sm","md","lg","xl"]},weight:{control:"select",options:["light","regular","medium","bold"]},asChild:{control:"boolean"}}},s=[{size:"xl",metrics:"18 / 28"},{size:"lg",metrics:"16 / 24"},{size:"md",metrics:"14 / 20"},{size:"sm",metrics:"14 / 20"},{size:"xs",metrics:"12 / 16"}];var u=r("C");let f=[{name:"Basic",story:t=>{let r,n,l=(0,o.c)(4);return l[0]!==t?({...r}=t,l[0]=t,l[1]=r):r=l[1],l[2]!==r?(n=e(i,{...r,children:"Default body text"}),l[2]=r,l[3]=n):n=l[3],n},meta:c},{name:"Sizes",story:r=>{let n,l,c,u=(0,o.c)(6);return u[0]!==r?({...n}=r,u[0]=r,u[1]=n):n=u[1],u[2]!==n?(l=s.map(r=>{let{size:l,metrics:o}=r;return t(a,{gap:4,align:"start",children:[t(i,{size:"xs",color:"secondary",children:["size='",l,"' · ",o]}),e(i,{...n,size:l,children:"The quick brown fox jumps over the lazy dog"})]},l)}),u[2]=n,u[3]=l):l=u[3],u[4]!==l?(c=e(a,{gap:24,align:"start",children:l}),u[4]=l,u[5]=c):c=u[5],c},meta:c},{name:"Weights",story:r=>{let n,l,c=(0,o.c)(4);return c[0]!==r?({...n}=r,c[0]=r,c[1]=n):n=c[1],c[2]!==n?(l=t(a,{align:"start",children:[e(i,{...n,size:"lg",weight:"light",children:"Light Weight Body Text"}),e(i,{...n,size:"lg",weight:"regular",children:"Regular Weight Body Text"}),e(i,{...n,size:"lg",weight:"medium",children:"Medium Weight Body Text"}),e(i,{...n,size:"lg",weight:"bold",children:"Bold Weight Body Text"})]}),c[2]=n,c[3]=l):l=c[3],l},meta:c},{name:"Colors",story:r=>{let n,l,c=(0,o.c)(4);return c[0]!==r?({...n}=r,c[0]=r,c[1]=n):n=c[1],c[2]!==n?(l=t(a,{align:"start",children:[e(i,{...n,color:"primary",children:"Primary color text"}),e(i,{...n,color:"primary-alt",children:"Primary alt color text"}),e(i,{...n,color:"secondary",children:"Secondary color text"}),e(i,{...n,color:"secondary-alt",children:"Secondary alt color text"}),e(i,{...n,color:"tertiary-alt",children:"Tertiary alt color text"})]}),c[2]=n,c[3]=l):l=c[3],l},meta:c},{name:"AsChild",story:t=>{let r,n,l,a=(0,o.c)(5);return a[0]!==t?({...r}=t,a[0]=t,a[1]=r):r=a[1],a[2]===Symbol.for("react.memo_cache_sentinel")?(n=e("span",{children:"Custom Span Element with AsChild"}),a[2]=n):n=a[2],a[3]!==r?(l=e(i,{...r,size:"lg",weight:"medium",asChild:!0,children:n}),a[3]=r,a[4]=l):l=a[4],l},meta:c}];function p({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=()=>u.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 u.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},u.default.createElement("h2",{className:"text-sm mb-12"},e.name),u.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(u.default.createElement(window.WallarmDS.Root,null,f.map((e,t)=>u.default.createElement(p,{key:t,entry:e})))),t}}})();