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

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

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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,n){let r,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 i,o,l=Object.create,c=Object.defineProperty,d=Object.getOwnPropertyDescriptor,s=Object.getOwnPropertyNames,u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,h=(e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of s(t))m.call(e,a)||a===n||c(e,a,{get:()=>t[a],enumerable:!(r=d(t,a))||r.enumerable});return e},f={},w={$dispatcherGuard:()=>k,$makeReadOnly:()=>N,$reset:()=>W,$structuralCheck:()=>$,c:()=>D,clearRenderCounterRegistry:()=>T,renderCounterRegistry:()=>P,useRenderCounter:()=>R};for(var y in w)c(f,y,{get:w[y],enumerable:!0});e.exports=h(c({},"__esModule",{value:!0}),f);var b=(a=null!=(r=n("C"))?l(u(r)):{},h(r&&r.__esModule?a:c(a,"default",{value:r,enumerable:!0}),r)),{useRef:g,useEffect:p,isValidElement:S}=b,_=null!=(i=b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?i:b.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),D="function"==typeof(null==(o=b.__COMPILER_RUNTIME)?void 0:o.c)?b.__COMPILER_RUNTIME.c:function(e){return b.useMemo(()=>{let t=Array(e);for(let n=0;n<e;n++)t[n]=v;return t[v]=!0,t},[])},C={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{C[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var M=null;function E(e){return _.ReactCurrentDispatcher.current=e,_.ReactCurrentDispatcher.current}C.useMemoCache=e=>{if(null!=M)return M.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var x=[];function k(e){let t=_.ReactCurrentDispatcher.current;if(0===e){if(x.push(t),1===x.length&&(M=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.");E(C)}else if(1===e){let e=x.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===x.length&&(M=null),E(e)}else if(2===e)x.push(t),E(M);else if(3===e){let e=x.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");E(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function W(e){for(let t=0;t<e.length;t++)e[t]=v}function N(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var P=new Map;function T(){for(let e of P.values())e.forEach(e=>{e.count=0})}function R(e){let t=g(null);null!=t.current&&(t.current.count+=1),p(()=>{if(null==t.current){let n,r={count:0};null==(n=P.get(e))&&(n=new Set,P.set(e,n)),n.add(r),t.current=r}return()=>{var n;let r;null!==t.current&&(n=t.current,null!=(r=P.get(e))&&r.delete(n))}})}var O=new Set;function $(e,t,n,r,a,i){function o(e,t,o,l){let c=`${r}:${i} [${a}] ${n}${o} changed from ${e} to ${t} at depth ${l}`;O.has(c)||(O.add(c),console.error(c))}!function e(t,n,r,a){if(!(a>2)){if(t!==n)if(typeof t!=typeof n)o(`type ${typeof t}`,`type ${typeof n}`,r,a);else if("object"==typeof t){let i=Array.isArray(t),l=Array.isArray(n);if(null===t&&null!==n)o("null",`type ${typeof n}`,r,a);else if(null===n)o(`type ${typeof t}`,"null",r,a);else if(t instanceof Map)if(n instanceof Map)if(t.size!==n.size)o(`Map instance with size ${t.size}`,`Map instance with size ${n.size}`,r,a);else for(let[i,l]of t)n.has(i)?e(l,n.get(i),`${r}.get(${i})`,a+1):o(`Map instance with key ${i}`,`Map instance without key ${i}`,r,a);else o("Map instance","other value",r,a);else if(n instanceof Map)o("other value","Map instance",r,a);else if(t instanceof Set)if(n instanceof Set)if(t.size!==n.size)o(`Set instance with size ${t.size}`,`Set instance with size ${n.size}`,r,a);else for(let e of n)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,r,a);else o("Set instance","other value",r,a);else if(n instanceof Set)o("other value","Set instance",r,a);else if(i||l)if(i!==l)o(`type ${i?"array":"object"}`,`type ${l?"array":"object"}`,r,a);else if(t.length!==n.length)o(`array with length ${t.length}`,`array with length ${n.length}`,r,a);else for(let i=0;i<t.length;i++)e(t[i],n[i],`${r}[${i}]`,a+1);else if(S(t)||S(n))S(t)!==S(n)?o(`type ${S(t)?"React element":"object"}`,`type ${S(n)?"React element":"object"}`,r,a):t.type!==n.type?o(`React element of type ${t.type}`,`React element of type ${n.type}`,r,a):e(t.props,n.props,`[props of ${r}]`,a+1);else{for(let e in n)e in t||o(`object without key ${e}`,`object with key ${e}`,r,a);for(let i in t)i in n?e(t[i],n[i],`${r}.${i}`,a+1):o(`object with key ${i}`,`object without key ${i}`,r,a)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(n)?isNaN(t)!==isNaN(n)&&o(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(n)?"NaN":"non-NaN value"}`,r,a):t!==n&&o(t,n,r,a)}}}(e,t,"",0)}},p(e,t,n){let r=new WeakMap,a=new WeakMap;function i(e,t,n){let i=t,o=n;if("object"==typeof i&&null!==i&&"$$typeof"in i&&i.$$typeof===Symbol.for("react.context")&&"Provider"in i&&(i=i.Provider),"function"==typeof i&&null!=o.ref&&!i.prototype?.isReactComponent){let t=i,n=r.get(e);n||(n=new WeakMap,r.set(e,n));let a=n.get(t);a||((a=e.forwardRef((e,n)=>t({...e,ref:n}))).displayName=t.displayName??t.name,n.set(t,a)),i=a}if("string"==typeof i&&"boolean"==typeof o.inert&&((o={...o}).inert?o.inert="":delete o.inert),"string"==typeof i)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 i&&null!=o.ref&&(i=function(e,t){let n=a.get(e);n||(n=new Map,a.set(e,n));let r=n.get(t);if(r)return r;let i=e.forwardRef((n,r)=>{let a=e.useRef(null);if(!a.current||a.current.original!==r){let e;a.current={original:r,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof r){let n=r(t);e="function"==typeof n?n:void 0}else r&&(r.current=t)}}}return e.createElement(t,{...n,ref:a.current.callback})});return i.displayName=`CanvasHost(${t})`,n.set(t,i),i}(e,i)),{type:i,props:o}}function o(e){let t=(t,n,r)=>{let a=i(e,t,n??{});return e.createElement(a.type,void 0===r?a.props:{...a.props,key:r})};return{jsx:t,jsxs:(t,n,r)=>{let a=i(e,t,n??{}),{children:o,...l}=a.props;return e.createElement(a.type,void 0===r?l:{...l,key:r},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function l(e){return{...e,createElement:(t,n,...r)=>{let a=i(e,t,n??{});return e.createElement(a.type,a.props,...r)},cloneElement:(t,n,...r)=>{let a=e.cloneElement(t,n??void 0,...r),o=a.ref,l=i(e,a.type,{...a.props,ref:o});return l.type===a.type&&"string"!=typeof a.type?a:e.createElement(l.type,{...l.props,key:a.key})}}}n.d(t,{MA:()=>o,YJ:()=>l})},C(e,t,n){n.r(t);let r=(0,n("p").YJ)(window.React),{Children:a,Component:i,Fragment:o,Profiler:l,PureComponent:c,StrictMode:d,Suspense:s,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:m,cloneElement:h,createContext:f,createElement:w,createFactory:y,createRef:b,forwardRef:g,isValidElement:p,lazy:S,memo:_,startTransition:v,unstable_act:D,useCallback:C,useContext:M,useDebugValue:E,useDeferredValue:x,useEffect:k,useId:W,useImperativeHandle:N,useInsertionEffect:P,useLayoutEffect:T,useMemo:R,useReducer:O,useRef:$,useState:A,useSyncExternalStore:I,useTransition:z,version:j,use:Y}=r;n.d(t,{},{Children:a,Component:i,Fragment:o,Profiler:l,PureComponent:c,StrictMode:d,Suspense:s,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:m,cloneElement:h,createContext:f,createElement:w,createFactory:y,createRef:b,default:r,forwardRef:g,isValidElement:p,lazy:S,memo:_,startTransition:v,unstable_act:D,use:Y,useCallback:C,useContext:M,useDebugValue:E,useDeferredValue:x,useEffect:k,useId:W,useImperativeHandle:N,useInsertionEffect:P,useLayoutEffect:T,useMemo:R,useReducer:O,useRef:$,useState:A,useSyncExternalStore:I,useTransition:z,version:j})}},t={};function n(r){var a=t[r];if(void 0!==a)return a.exports;var i=t[r]={exports:{}};return e[r](i,i.exports,n),i.exports}n.d=(e,t,r)=>{var a=(t,r)=>{for(var a in t)n.o(t,a)&&!n.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,[r]:t[a]})};a(t,"get"),a(r,"value")},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:r,Fragment:a}=(0,n("p").MA)(window.React);var i,o=n("vD"),l=n("C");let c={lessThanXSeconds:{one:"less than a second",other:"less than {{count}} seconds"},xSeconds:{one:"1 second",other:"{{count}} seconds"},halfAMinute:"half a minute",lessThanXMinutes:{one:"less than a minute",other:"less than {{count}} minutes"},xMinutes:{one:"1 minute",other:"{{count}} minutes"},aboutXHours:{one:"about 1 hour",other:"about {{count}} hours"},xHours:{one:"1 hour",other:"{{count}} hours"},xDays:{one:"1 day",other:"{{count}} days"},aboutXWeeks:{one:"about 1 week",other:"about {{count}} weeks"},xWeeks:{one:"1 week",other:"{{count}} weeks"},aboutXMonths:{one:"about 1 month",other:"about {{count}} months"},xMonths:{one:"1 month",other:"{{count}} months"},aboutXYears:{one:"about 1 year",other:"about {{count}} years"},xYears:{one:"1 year",other:"{{count}} years"},overXYears:{one:"over 1 year",other:"over {{count}} years"},almostXYears:{one:"almost 1 year",other:"almost {{count}} years"}};function d(e){return (t={})=>{let n=t.width?String(t.width):e.defaultWidth;return e.formats[n]||e.formats[e.defaultWidth]}}let s={date:d({formats:{full:"EEEE, MMMM do, y",long:"MMMM do, y",medium:"MMM d, y",short:"MM/dd/yyyy"},defaultWidth:"full"}),time:d({formats:{full:"h:mm:ss a zzzz",long:"h:mm:ss a z",medium:"h:mm:ss a",short:"h:mm a"},defaultWidth:"full"}),dateTime:d({formats:{full:"{{date}} 'at' {{time}}",long:"{{date}} 'at' {{time}}",medium:"{{date}}, {{time}}",short:"{{date}}, {{time}}"},defaultWidth:"full"})},u={lastWeek:"'last' eeee 'at' p",yesterday:"'yesterday at' p",today:"'today at' p",tomorrow:"'tomorrow at' p",nextWeek:"eeee 'at' p",other:"P"};function m(e){return(t,n)=>{let r;if("formatting"===(n?.context?String(n.context):"standalone")&&e.formattingValues){let t=e.defaultFormattingWidth||e.defaultWidth,a=n?.width?String(n.width):t;r=e.formattingValues[a]||e.formattingValues[t]}else{let t=e.defaultWidth,a=n?.width?String(n.width):e.defaultWidth;r=e.values[a]||e.values[t]}return r[e.argumentCallback?e.argumentCallback(t):t]}}function h(e){return(t,n={})=>{let r,a=n.width,i=a&&e.matchPatterns[a]||e.matchPatterns[e.defaultMatchWidth],o=t.match(i);if(!o)return null;let l=o[0],c=a&&e.parsePatterns[a]||e.parsePatterns[e.defaultParseWidth],d=Array.isArray(c)?function(e,t){for(let n=0;n<e.length;n++)if(t(e[n]))return n}(c,e=>e.test(l)):function(e,t){for(let n in e)if(Object.prototype.hasOwnProperty.call(e,n)&&t(e[n]))return n}(c,e=>e.test(l));return r=e.valueCallback?e.valueCallback(d):d,{value:r=n.valueCallback?n.valueCallback(r):r,rest:t.slice(l.length)}}}let f={code:"en-US",formatDistance:(e,t,n)=>{let r,a=c[e];if(r="string"==typeof a?a:1===t?a.one:a.other.replace("{{count}}",t.toString()),n?.addSuffix)if(n.comparison&&n.comparison>0)return"in "+r;else return r+" ago";return r},formatLong:s,formatRelative:(e,t,n,r)=>u[e],localize:{ordinalNumber:(e,t)=>{let n=Number(e),r=n%100;if(r>20||r<10)switch(r%10){case 1:return n+"st";case 2:return n+"nd";case 3:return n+"rd"}return n+"th"},era:m({values:{narrow:["B","A"],abbreviated:["BC","AD"],wide:["Before Christ","Anno Domini"]},defaultWidth:"wide"}),quarter:m({values:{narrow:["1","2","3","4"],abbreviated:["Q1","Q2","Q3","Q4"],wide:["1st quarter","2nd quarter","3rd quarter","4th quarter"]},defaultWidth:"wide",argumentCallback:e=>e-1}),month:m({values:{narrow:["J","F","M","A","M","J","J","A","S","O","N","D"],abbreviated:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],wide:["January","February","March","April","May","June","July","August","September","October","November","December"]},defaultWidth:"wide"}),day:m({values:{narrow:["S","M","T","W","T","F","S"],short:["Su","Mo","Tu","We","Th","Fr","Sa"],abbreviated:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],wide:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},defaultWidth:"wide"}),dayPeriod:m({values:{narrow:{am:"a",pm:"p",midnight:"mi",noon:"n",morning:"morning",afternoon:"afternoon",evening:"evening",night:"night"},abbreviated:{am:"AM",pm:"PM",midnight:"midnight",noon:"noon",morning:"morning",afternoon:"afternoon",evening:"evening",night:"night"},wide:{am:"a.m.",pm:"p.m.",midnight:"midnight",noon:"noon",morning:"morning",afternoon:"afternoon",evening:"evening",night:"night"}},defaultWidth:"wide",formattingValues:{narrow:{am:"a",pm:"p",midnight:"mi",noon:"n",morning:"in the morning",afternoon:"in the afternoon",evening:"in the evening",night:"at night"},abbreviated:{am:"AM",pm:"PM",midnight:"midnight",noon:"noon",morning:"in the morning",afternoon:"in the afternoon",evening:"in the evening",night:"at night"},wide:{am:"a.m.",pm:"p.m.",midnight:"midnight",noon:"noon",morning:"in the morning",afternoon:"in the afternoon",evening:"in the evening",night:"at night"}},defaultFormattingWidth:"wide"})},match:{ordinalNumber:(i={matchPattern:/^(\d+)(th|st|nd|rd)?/i,parsePattern:/\d+/i,valueCallback:e=>parseInt(e,10)},(e,t={})=>{let n=e.match(i.matchPattern);if(!n)return null;let r=n[0],a=e.match(i.parsePattern);if(!a)return null;let o=i.valueCallback?i.valueCallback(a[0]):a[0];return{value:o=t.valueCallback?t.valueCallback(o):o,rest:e.slice(r.length)}}),era:h({matchPatterns:{narrow:/^(b|a)/i,abbreviated:/^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i,wide:/^(before christ|before common era|anno domini|common era)/i},defaultMatchWidth:"wide",parsePatterns:{any:[/^b/i,/^(a|c)/i]},defaultParseWidth:"any"}),quarter:h({matchPatterns:{narrow:/^[1234]/i,abbreviated:/^q[1234]/i,wide:/^[1234](th|st|nd|rd)? quarter/i},defaultMatchWidth:"wide",parsePatterns:{any:[/1/i,/2/i,/3/i,/4/i]},defaultParseWidth:"any",valueCallback:e=>e+1}),month:h({matchPatterns:{narrow:/^[jfmasond]/i,abbreviated:/^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i,wide:/^(january|february|march|april|may|june|july|august|september|october|november|december)/i},defaultMatchWidth:"wide",parsePatterns:{narrow:[/^j/i,/^f/i,/^m/i,/^a/i,/^m/i,/^j/i,/^j/i,/^a/i,/^s/i,/^o/i,/^n/i,/^d/i],any:[/^ja/i,/^f/i,/^mar/i,/^ap/i,/^may/i,/^jun/i,/^jul/i,/^au/i,/^s/i,/^o/i,/^n/i,/^d/i]},defaultParseWidth:"any"}),day:h({matchPatterns:{narrow:/^[smtwf]/i,short:/^(su|mo|tu|we|th|fr|sa)/i,abbreviated:/^(sun|mon|tue|wed|thu|fri|sat)/i,wide:/^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i},defaultMatchWidth:"wide",parsePatterns:{narrow:[/^s/i,/^m/i,/^t/i,/^w/i,/^t/i,/^f/i,/^s/i],any:[/^su/i,/^m/i,/^tu/i,/^w/i,/^th/i,/^f/i,/^sa/i]},defaultParseWidth:"any"}),dayPeriod:h({matchPatterns:{narrow:/^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i,any:/^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i},defaultMatchWidth:"any",parsePatterns:{any:{am:/^a/i,pm:/^p/i,midnight:/^mi/i,noon:/^no/i,morning:/morning/i,afternoon:/afternoon/i,evening:/evening/i,night:/night/i}},defaultParseWidth:"any"})},options:{weekStartsOn:0,firstWeekContainsDate:1}},w={},y=Symbol.for("constructDateFrom");function b(e,t){return"function"==typeof e?e(t):e&&"object"==typeof e&&y in e?e[y](t):e instanceof Date?new e.constructor(t):new Date(t)}function g(e,t){return b(t||e,e)}function p(e){let t=g(e),n=new Date(Date.UTC(t.getFullYear(),t.getMonth(),t.getDate(),t.getHours(),t.getMinutes(),t.getSeconds(),t.getMilliseconds()));return n.setUTCFullYear(t.getFullYear()),e-n}function S(e,t){let n=g(e,t?.in);return n.setHours(0,0,0,0),n}function _(e,t){let n=t?.weekStartsOn??t?.locale?.options?.weekStartsOn??w.weekStartsOn??w.locale?.options?.weekStartsOn??0,r=g(e,t?.in),a=r.getDay();return r.setDate(r.getDate()-(7*(a<n)+a-n)),r.setHours(0,0,0,0),r}function v(e,t){return _(e,{...t,weekStartsOn:1})}function D(e,t){let n=g(e,t?.in),r=n.getFullYear(),a=b(n,0);a.setFullYear(r+1,0,4),a.setHours(0,0,0,0);let i=v(a),o=b(n,0);o.setFullYear(r,0,4),o.setHours(0,0,0,0);let l=v(o);return n.getTime()>=i.getTime()?r+1:n.getTime()>=l.getTime()?r:r-1}function C(e,t){let n=g(e,t?.in),r=n.getFullYear(),a=t?.firstWeekContainsDate??t?.locale?.options?.firstWeekContainsDate??w.firstWeekContainsDate??w.locale?.options?.firstWeekContainsDate??1,i=b(t?.in||e,0);i.setFullYear(r+1,0,a),i.setHours(0,0,0,0);let o=_(i,t),l=b(t?.in||e,0);l.setFullYear(r,0,a),l.setHours(0,0,0,0);let c=_(l,t);return+n>=+o?r+1:+n>=+c?r:r-1}function M(e,t){let n=Math.abs(e).toString().padStart(t,"0");return(e<0?"-":"")+n}let E={y(e,t){let n=e.getFullYear(),r=n>0?n:1-n;return M("yy"===t?r%100:r,t.length)},M(e,t){let n=e.getMonth();return"M"===t?String(n+1):M(n+1,2)},d:(e,t)=>M(e.getDate(),t.length),a(e,t){let n=e.getHours()/12>=1?"pm":"am";switch(t){case"a":case"aa":return n.toUpperCase();case"aaa":return n;case"aaaaa":return n[0];default:return"am"===n?"a.m.":"p.m."}},h:(e,t)=>M(e.getHours()%12||12,t.length),H:(e,t)=>M(e.getHours(),t.length),m:(e,t)=>M(e.getMinutes(),t.length),s:(e,t)=>M(e.getSeconds(),t.length),S(e,t){let n=t.length;return M(Math.trunc(e.getMilliseconds()*Math.pow(10,n-3)),t.length)}},x={G:function(e,t,n){let r=+(e.getFullYear()>0);switch(t){case"G":case"GG":case"GGG":return n.era(r,{width:"abbreviated"});case"GGGGG":return n.era(r,{width:"narrow"});default:return n.era(r,{width:"wide"})}},y:function(e,t,n){if("yo"===t){let t=e.getFullYear();return n.ordinalNumber(t>0?t:1-t,{unit:"year"})}return E.y(e,t)},Y:function(e,t,n,r){let a=C(e,r),i=a>0?a:1-a;return"YY"===t?M(i%100,2):"Yo"===t?n.ordinalNumber(i,{unit:"year"}):M(i,t.length)},R:function(e,t){return M(D(e),t.length)},u:function(e,t){return M(e.getFullYear(),t.length)},Q:function(e,t,n){let r=Math.ceil((e.getMonth()+1)/3);switch(t){case"Q":return String(r);case"QQ":return M(r,2);case"Qo":return n.ordinalNumber(r,{unit:"quarter"});case"QQQ":return n.quarter(r,{width:"abbreviated",context:"formatting"});case"QQQQQ":return n.quarter(r,{width:"narrow",context:"formatting"});default:return n.quarter(r,{width:"wide",context:"formatting"})}},q:function(e,t,n){let r=Math.ceil((e.getMonth()+1)/3);switch(t){case"q":return String(r);case"qq":return M(r,2);case"qo":return n.ordinalNumber(r,{unit:"quarter"});case"qqq":return n.quarter(r,{width:"abbreviated",context:"standalone"});case"qqqqq":return n.quarter(r,{width:"narrow",context:"standalone"});default:return n.quarter(r,{width:"wide",context:"standalone"})}},M:function(e,t,n){let r=e.getMonth();switch(t){case"M":case"MM":return E.M(e,t);case"Mo":return n.ordinalNumber(r+1,{unit:"month"});case"MMM":return n.month(r,{width:"abbreviated",context:"formatting"});case"MMMMM":return n.month(r,{width:"narrow",context:"formatting"});default:return n.month(r,{width:"wide",context:"formatting"})}},L:function(e,t,n){let r=e.getMonth();switch(t){case"L":return String(r+1);case"LL":return M(r+1,2);case"Lo":return n.ordinalNumber(r+1,{unit:"month"});case"LLL":return n.month(r,{width:"abbreviated",context:"standalone"});case"LLLLL":return n.month(r,{width:"narrow",context:"standalone"});default:return n.month(r,{width:"wide",context:"standalone"})}},w:function(e,t,n,r){let a,i,o,l,c=Math.round((_(a=g(e,r?.in),r)-(i=r?.firstWeekContainsDate??r?.locale?.options?.firstWeekContainsDate??w.firstWeekContainsDate??w.locale?.options?.firstWeekContainsDate??1,o=C(a,r),(l=b(r?.in||a,0)).setFullYear(o,0,i),l.setHours(0,0,0,0),_(l,r)))/6048e5)+1;return"wo"===t?n.ordinalNumber(c,{unit:"week"}):M(c,t.length)},I:function(e,t,n){let r,a,i,o=Math.round((v(r=g(e,void 0))-(a=D(r,void 0),(i=b(r,0)).setFullYear(a,0,4),i.setHours(0,0,0,0),v(i)))/6048e5)+1;return"Io"===t?n.ordinalNumber(o,{unit:"week"}):M(o,t.length)},d:function(e,t,n){return"do"===t?n.ordinalNumber(e.getDate(),{unit:"date"}):E.d(e,t)},D:function(e,t,n){let r,a,i=function(e,t){let[n,r]=function(e,...t){let n=b.bind(null,e||t.find(e=>"object"==typeof e));return t.map(n)}(void 0,e,t),a=S(n),i=S(r);return Math.round((a-p(a)-(i-p(i)))/864e5)}(a=g(e,void 0),((r=g(a,void 0)).setFullYear(r.getFullYear(),0,1),r.setHours(0,0,0,0),r))+1;return"Do"===t?n.ordinalNumber(i,{unit:"dayOfYear"}):M(i,t.length)},E:function(e,t,n){let r=e.getDay();switch(t){case"E":case"EE":case"EEE":return n.day(r,{width:"abbreviated",context:"formatting"});case"EEEEE":return n.day(r,{width:"narrow",context:"formatting"});case"EEEEEE":return n.day(r,{width:"short",context:"formatting"});default:return n.day(r,{width:"wide",context:"formatting"})}},e:function(e,t,n,r){let a=e.getDay(),i=(a-r.weekStartsOn+8)%7||7;switch(t){case"e":return String(i);case"ee":return M(i,2);case"eo":return n.ordinalNumber(i,{unit:"day"});case"eee":return n.day(a,{width:"abbreviated",context:"formatting"});case"eeeee":return n.day(a,{width:"narrow",context:"formatting"});case"eeeeee":return n.day(a,{width:"short",context:"formatting"});default:return n.day(a,{width:"wide",context:"formatting"})}},c:function(e,t,n,r){let a=e.getDay(),i=(a-r.weekStartsOn+8)%7||7;switch(t){case"c":return String(i);case"cc":return M(i,t.length);case"co":return n.ordinalNumber(i,{unit:"day"});case"ccc":return n.day(a,{width:"abbreviated",context:"standalone"});case"ccccc":return n.day(a,{width:"narrow",context:"standalone"});case"cccccc":return n.day(a,{width:"short",context:"standalone"});default:return n.day(a,{width:"wide",context:"standalone"})}},i:function(e,t,n){let r=e.getDay(),a=0===r?7:r;switch(t){case"i":return String(a);case"ii":return M(a,t.length);case"io":return n.ordinalNumber(a,{unit:"day"});case"iii":return n.day(r,{width:"abbreviated",context:"formatting"});case"iiiii":return n.day(r,{width:"narrow",context:"formatting"});case"iiiiii":return n.day(r,{width:"short",context:"formatting"});default:return n.day(r,{width:"wide",context:"formatting"})}},a:function(e,t,n){let r=e.getHours()/12>=1?"pm":"am";switch(t){case"a":case"aa":return n.dayPeriod(r,{width:"abbreviated",context:"formatting"});case"aaa":return n.dayPeriod(r,{width:"abbreviated",context:"formatting"}).toLowerCase();case"aaaaa":return n.dayPeriod(r,{width:"narrow",context:"formatting"});default:return n.dayPeriod(r,{width:"wide",context:"formatting"})}},b:function(e,t,n){let r,a=e.getHours();switch(r=12===a?"noon":0===a?"midnight":a/12>=1?"pm":"am",t){case"b":case"bb":return n.dayPeriod(r,{width:"abbreviated",context:"formatting"});case"bbb":return n.dayPeriod(r,{width:"abbreviated",context:"formatting"}).toLowerCase();case"bbbbb":return n.dayPeriod(r,{width:"narrow",context:"formatting"});default:return n.dayPeriod(r,{width:"wide",context:"formatting"})}},B:function(e,t,n){let r,a=e.getHours();switch(r=a>=17?"evening":a>=12?"afternoon":a>=4?"morning":"night",t){case"B":case"BB":case"BBB":return n.dayPeriod(r,{width:"abbreviated",context:"formatting"});case"BBBBB":return n.dayPeriod(r,{width:"narrow",context:"formatting"});default:return n.dayPeriod(r,{width:"wide",context:"formatting"})}},h:function(e,t,n){if("ho"===t){let t=e.getHours()%12;return 0===t&&(t=12),n.ordinalNumber(t,{unit:"hour"})}return E.h(e,t)},H:function(e,t,n){return"Ho"===t?n.ordinalNumber(e.getHours(),{unit:"hour"}):E.H(e,t)},K:function(e,t,n){let r=e.getHours()%12;return"Ko"===t?n.ordinalNumber(r,{unit:"hour"}):M(r,t.length)},k:function(e,t,n){let r=e.getHours();return(0===r&&(r=24),"ko"===t)?n.ordinalNumber(r,{unit:"hour"}):M(r,t.length)},m:function(e,t,n){return"mo"===t?n.ordinalNumber(e.getMinutes(),{unit:"minute"}):E.m(e,t)},s:function(e,t,n){return"so"===t?n.ordinalNumber(e.getSeconds(),{unit:"second"}):E.s(e,t)},S:function(e,t){return E.S(e,t)},X:function(e,t,n){let r=e.getTimezoneOffset();if(0===r)return"Z";switch(t){case"X":return W(r);case"XXXX":case"XX":return N(r);default:return N(r,":")}},x:function(e,t,n){let r=e.getTimezoneOffset();switch(t){case"x":return W(r);case"xxxx":case"xx":return N(r);default:return N(r,":")}},O:function(e,t,n){let r=e.getTimezoneOffset();switch(t){case"O":case"OO":case"OOO":return"GMT"+k(r,":");default:return"GMT"+N(r,":")}},z:function(e,t,n){let r=e.getTimezoneOffset();switch(t){case"z":case"zz":case"zzz":return"GMT"+k(r,":");default:return"GMT"+N(r,":")}},t:function(e,t,n){return M(Math.trunc(e/1e3),t.length)},T:function(e,t,n){return M(+e,t.length)}};function k(e,t=""){let n=e>0?"-":"+",r=Math.abs(e),a=Math.trunc(r/60),i=r%60;return 0===i?n+String(a):n+String(a)+t+M(i,2)}function W(e,t){return e%60==0?(e>0?"-":"+")+M(Math.abs(e)/60,2):N(e,t)}function N(e,t=""){let n=Math.abs(e);return(e>0?"-":"+")+M(Math.trunc(n/60),2)+t+M(n%60,2)}let P=(e,t)=>{switch(e){case"P":return t.date({width:"short"});case"PP":return t.date({width:"medium"});case"PPP":return t.date({width:"long"});default:return t.date({width:"full"})}},T=(e,t)=>{switch(e){case"p":return t.time({width:"short"});case"pp":return t.time({width:"medium"});case"ppp":return t.time({width:"long"});default:return t.time({width:"full"})}},R={p:T,P:(e,t)=>{let n,r=e.match(/(P+)(p+)?/)||[],a=r[1],i=r[2];if(!i)return P(e,t);switch(a){case"P":n=t.dateTime({width:"short"});break;case"PP":n=t.dateTime({width:"medium"});break;case"PPP":n=t.dateTime({width:"long"});break;default:n=t.dateTime({width:"full"})}return n.replace("{{date}}",P(a,t)).replace("{{time}}",T(i,t))}},O=/^D+$/,$=/^Y+$/,A=["D","DD","YY","YYYY"],I=/[yYQqMLwIdDecihHKkms]o|(\w)\1*|''|'(''|[^'])+('|$)|./g,z=/P+p+|P+|p+|''|'(''|[^'])+('|$)|./g,j=/^'([^]*?)'?$/,Y=/''/g,V=/[a-zA-Z]/;function F(e,t,n){let r=n?.locale??w.locale??f,a=n?.firstWeekContainsDate??n?.locale?.options?.firstWeekContainsDate??w.firstWeekContainsDate??w.locale?.options?.firstWeekContainsDate??1,i=n?.weekStartsOn??n?.locale?.options?.weekStartsOn??w.weekStartsOn??w.locale?.options?.weekStartsOn??0,o=g(e,n?.in);if(!(o instanceof Date||"object"==typeof o&&"[object Date]"===Object.prototype.toString.call(o))&&"number"!=typeof o||isNaN(+g(o)))throw RangeError("Invalid time value");let l=t.match(z).map(e=>{let t=e[0];return"p"===t||"P"===t?(0,R[t])(e,r.formatLong):e}).join("").match(I).map(e=>{if("''"===e)return{isToken:!1,value:"'"};let t=e[0];if("'"===t){var n;let t;return{isToken:!1,value:(t=(n=e).match(j))?t[1].replace(Y,"'"):n}}if(x[t])return{isToken:!0,value:e};if(t.match(V))throw RangeError("Format string contains an unescaped latin alphabet character `"+t+"`");return{isToken:!1,value:e}});r.localize.preprocessor&&(l=r.localize.preprocessor(o,l));let c={firstWeekContainsDate:a,weekStartsOn:i,locale:r};return l.map(a=>{if(!a.isToken)return a.value;let i=a.value;return(!n?.useAdditionalWeekYearTokens&&$.test(i)||!n?.useAdditionalDayOfYearTokens&&O.test(i))&&function(e,t,n){var r,a,i;let o,l=(r=e,a=t,i=n,o="Y"===r[0]?"years":"days of the month",`Use \`${r.toLowerCase()}\` instead of \`${r}\` (in \`${a}\`) for formatting ${o} to the input \`${i}\`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md`);if(console.warn(l),A.includes(e))throw RangeError(l)}(i,t,String(e)),(0,x[i[0]])(o,i,r.localize,c)}).join("")}let L=(0,l.createContext)(void 0);function H(e,t){let n=(0,l.useContext)(L);return void 0!==t?t:n?e?`${n}--${e}`:n:void 0}L.Provider;let q=window.WallarmDS.Icons.Calendar,B=window.WallarmDS.Icons.ChevronDown,G=window.WallarmDS.Icons.Clock,Q=window.WallarmDS.CalendarDate,U=window.WallarmDS.CalendarDateTime,X=window.WallarmDS.Time,J=window.WallarmDS.Attribute,Z=window.WallarmDS.AttributeLabel,K=window.WallarmDS.AttributeValue,ee=window.WallarmDS.Button,et=window.WallarmDS.CalendarBody,en=window.WallarmDS.CalendarContent,er=window.WallarmDS.CalendarGrids,ea=window.WallarmDS.CalendarInputHeader,ei=window.WallarmDS.CalendarTrigger,eo=window.WallarmDS.DateFormatProvider,el=window.WallarmDS.DateInput,ec=window.WallarmDS.Dialog,ed=window.WallarmDS.DialogBody,es=window.WallarmDS.DialogContent,eu=window.WallarmDS.DialogFooter,em=window.WallarmDS.DialogFooterControls,eh=window.WallarmDS.DialogHeader,ef=window.WallarmDS.DialogTitle,ew=window.WallarmDS.OverflowList,ey=window.WallarmDS.SelectButton,eb=window.WallarmDS.SelectContent,eg=window.WallarmDS.SelectInput,ep=window.WallarmDS.SelectOption,eS=window.WallarmDS.SelectOptionIndicator,e_=window.WallarmDS.SelectOptionText,ev=window.WallarmDS.SelectPositioner,eD=window.WallarmDS.Tag,eC=window.WallarmDS.Text,eM=window.WallarmDS.toCalendarDateValue,eE=window.WallarmDS.toReactAriaDateValue,ex=window.WallarmDS.withMinuteGranularity,ek=window.WallarmDS.InlineEdit,eW=window.WallarmDS.useInlineEdit,eN=window.WallarmDS.InlineEditControl,eP=window.WallarmDS.InlineEditDate,eT=window.WallarmDS.InlineEditDateTime,eR=window.WallarmDS.InlineEditError,eO=window.WallarmDS.InlineEditInput,e$=window.WallarmDS.InlineEditNumber,eA=window.WallarmDS.InlineEditPreview,eI=window.WallarmDS.InlineEditPreviewIcon,ez=window.WallarmDS.InlineEditPreviewValue,ej=window.WallarmDS.InlineEditSelect,eY=window.WallarmDS.InlineEditTextarea,eV=window.WallarmDS.InlineEditTime,eF={title:"Inputs/InlineEdit",component:ek,subcomponents:{InlineEditPreview:eA,InlineEditPreviewValue:ez,InlineEditPreviewIcon:eI,InlineEditControl:eN,InlineEditError:eR,InlineEditInput:eO,InlineEditNumber:e$,InlineEditTextarea:eY,InlineEditSelect:ej,InlineEditDate:eP,InlineEditDateTime:eT,InlineEditTime:eV},parameters:{layout:"centered",docs:{description:{component:"Turns a displayed value into its own editor, so a reader can correct one field without opening a form — reach for a form when several values change together. Every story composes it inside an `Attribute`, because that is what keeps the read and edit states the same height and stops the row jumping on toggle."}}},argTypes:{status:{control:"select",options:["idle","loading","saved","error"],description:"Async-feedback status. Uncontrolled stories drive this internally."},activationMode:{control:"select",options:["click","focus","none"],description:"How the preview enters edit mode."},submitMode:{control:"select",options:["enter","blur","both","none"],description:"Which interactions commit the draft."},disabled:{control:"boolean"},readOnly:{control:"boolean"},defaultEdit:{control:"boolean"},selectOnFocus:{control:"boolean"},savedDuration:{control:"number",description:"Milliseconds the `saved` status is shown before reverting to `idle`."},value:{table:{disable:!0}},defaultValue:{table:{disable:!0}},onValueChange:{table:{disable:!0}},onValueCommit:{table:{disable:!0}},onValueRevert:{table:{disable:!0}},onBeforeValueCommit:{table:{disable:!0}},edit:{table:{disable:!0}},onEditChange:{table:{disable:!0}},children:{table:{disable:!0}},className:{table:{disable:!0}},ref:{table:{disable:!0}}}},eL=[{label:"Admin",value:"admin"},{label:"Editor",value:"editor"},{label:"Viewer",value:"viewer"},{label:"Auditor",value:"auditor"}],eH=[{label:"production",value:"production"},{label:"us-east-1",value:"us-east-1"},{label:"critical",value:"critical"},{label:"tier-1",value:"tier-1"},{label:"public",value:"public"},{label:"monitored",value:"monitored"}];function eq(n){return n.map(n=>t(ep,{item:n,children:[e(e_,{children:n.label}),e(eS,{})]},n.value))}function eB(){let t,n=(0,o.c)(2),r=H("input");return n[0]!==r?(t=e(eg,{"data-testid":r,size:"inline-edit"}),n[0]=r,n[1]=t):t=n[1],t}function eG(){let t,n=(0,o.c)(2),r=H("input");return n[0]!==r?(t=e(ey,{"data-testid":r,size:"inline-edit"}),n[0]=r,n[1]=t):t=n[1],t}function eQ(t){let n,r,a,i,l=(0,o.c)(12),{granularity:c}=t,d=H("input"),{value:s,setValue:u}=eW();l[0]!==c||l[1]!==s?(n="minute"===c?ex(s??null):s??null,l[0]=c,l[1]=s,l[2]=n):n=l[2];let m=n;return l[3]!==m?(r=eE(m),l[3]=m,l[4]=r):r=l[4],l[5]!==u?(a=e=>u(eM(e)),l[5]=u,l[6]=a):a=l[6],l[7]!==c||l[8]!==r||l[9]!==a||l[10]!==d?(i=e(el,{"data-testid":d,value:r,onChange:a,granularity:c,size:"inline-edit",showIcon:!1}),l[7]=c,l[8]=r,l[9]=a,l[10]=d,l[11]=i):i=l[11],i}function eU(e){return eL.find(t=>t.value===e)?.label??e}function eX(t){return e(eD,{children:t},t)}let eJ=[{name:"TextEditor",story:n=>{let r,a,i,c,d,s,u=(0,o.c)(10),[m,h]=(0,l.useState)("Checkout API");return u[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(Z,{children:"Name"}),u[0]=r):r=u[0],u[1]===Symbol.for("react.memo_cache_sentinel")?(a=e=>h(e),u[1]=a):a=u[1],u[2]!==m?(i=e(eA,{"data-analytics-id":"inline-edit-name",children:m}),u[2]=m,u[3]=i):i=u[3],u[4]===Symbol.for("react.memo_cache_sentinel")?(c=e(eN,{children:e(eO,{"data-analytics-id":"inline-edit-name-input","aria-label":"Name"})}),d=e(eR,{}),u[4]=c,u[5]=d):(c=u[4],d=u[5]),u[6]!==n||u[7]!==i||u[8]!==m?(s=e("div",{className:"w-[320px]",children:t(J,{children:[r,e(K,{children:t(ek,{...n,value:m,onValueCommit:a,"data-testid":"text",children:[i,c,d]})})]})}),u[6]=n,u[7]=i,u[8]=m,u[9]=s):s=u[9],s},meta:eF},{name:"NumberEditor",story:n=>{let r,a,i,c,d,s=(0,o.c)(9),[u,m]=(0,l.useState)("8443");return s[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(Z,{children:"Port"}),s[0]=r):r=s[0],s[1]===Symbol.for("react.memo_cache_sentinel")?(a=e=>m(e),s[1]=a):a=s[1],s[2]!==u?(i=e(eA,{children:u}),s[2]=u,s[3]=i):i=s[3],s[4]===Symbol.for("react.memo_cache_sentinel")?(c=e(eN,{children:e(e$,{})}),s[4]=c):c=s[4],s[5]!==n||s[6]!==u||s[7]!==i?(d=e("div",{className:"w-[320px]",children:t(J,{children:[r,e(K,{children:t(ek,{...n,value:u,onValueCommit:a,"data-testid":"number",children:[i,c]})})]})}),s[5]=n,s[6]=u,s[7]=i,s[8]=d):d=s[8],d},meta:eF},{name:"TextareaEditor",story:n=>{let r,a,i,c,d,s,u=(0,o.c)(10),[m,h]=(0,l.useState)("Displays a labeled value for a single object attribute. Used in detail panels, drawers and forms to present structured information.");return u[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(Z,{children:"About"}),u[0]=r):r=u[0],u[1]===Symbol.for("react.memo_cache_sentinel")?(a=e=>h(e),u[1]=a):a=u[1],u[2]!==m?(i=e(eA,{lineClamp:3,children:m}),u[2]=m,u[3]=i):i=u[3],u[4]===Symbol.for("react.memo_cache_sentinel")?(c=e(eN,{children:e(eY,{minRows:2,maxRows:6})}),d=e(eR,{}),u[4]=c,u[5]=d):(c=u[4],d=u[5]),u[6]!==m||u[7]!==n||u[8]!==i?(s=e("div",{className:"w-[320px]",children:t(J,{children:[r,e(K,{children:t(ek,{...n,value:m,onValueCommit:a,"data-testid":"textarea",children:[i,c,d]})})]})}),u[6]=m,u[7]=n,u[8]=i,u[9]=s):s=u[9],s},meta:eF},{name:"SelectEditor",story:n=>{let r,a,i,c,d,s,u,m,h,f,w=(0,o.c)(16);w[0]===Symbol.for("react.memo_cache_sentinel")?(r=["editor"],w[0]=r):r=w[0];let[y,b]=(0,l.useState)(r);w[1]!==y?(a=eL.find(e=>e.value===(y[0]??""))?.label??"",w[1]=y,w[2]=a):a=w[2];let g=a;return w[3]===Symbol.for("react.memo_cache_sentinel")?(i=e(Z,{children:"Role"}),w[3]=i):i=w[3],w[4]===Symbol.for("react.memo_cache_sentinel")?(c=e=>b(e),w[4]=c):c=w[4],w[5]!==g?(d=e(ez,{children:g}),w[5]=g,w[6]=d):d=w[6],w[7]===Symbol.for("react.memo_cache_sentinel")?(s=e(eI,{children:e(B,{size:"md"})}),w[7]=s):s=w[7],w[8]!==d?(u=t(eA,{children:[d,s]}),w[8]=d,w[9]=u):u=w[9],w[10]===Symbol.for("react.memo_cache_sentinel")?(m=e(ey,{size:"inline-edit"}),w[10]=m):m=w[10],w[11]===Symbol.for("react.memo_cache_sentinel")?(h=e(eN,{children:t(ej,{items:eL,children:[m,e(ev,{children:e(eb,{children:eq(eL)})})]})}),w[11]=h):h=w[11],w[12]!==n||w[13]!==y||w[14]!==u?(f=e("div",{className:"w-[320px]",children:t(J,{children:[i,e(K,{children:t(ek,{...n,value:y,onValueCommit:c,"data-testid":"select",children:[u,h]})})]})}),w[12]=n,w[13]=y,w[14]=u,w[15]=f):f=w[15],f},meta:eF},{name:"MultiSelectEditor",story:n=>{let r,a,i,c,d,s,u,m,h,f,w=(0,o.c)(16);w[0]===Symbol.for("react.memo_cache_sentinel")?(r=["editor","viewer"],w[0]=r):r=w[0];let[y,b]=(0,l.useState)(r);w[1]!==y?(a=y.map(eU).join(", "),w[1]=y,w[2]=a):a=w[2];let g=a;return w[3]===Symbol.for("react.memo_cache_sentinel")?(i=e(Z,{children:"Roles"}),w[3]=i):i=w[3],w[4]===Symbol.for("react.memo_cache_sentinel")?(c=e=>b(e),w[4]=c):c=w[4],w[5]!==g?(d=e(ez,{children:g}),w[5]=g,w[6]=d):d=w[6],w[7]===Symbol.for("react.memo_cache_sentinel")?(s=e(eI,{children:e(B,{size:"md"})}),w[7]=s):s=w[7],w[8]!==d?(u=t(eA,{children:[d,s]}),w[8]=d,w[9]=u):u=w[9],w[10]===Symbol.for("react.memo_cache_sentinel")?(m=e(ey,{size:"inline-edit"}),w[10]=m):m=w[10],w[11]===Symbol.for("react.memo_cache_sentinel")?(h=e(eN,{children:t(ej,{items:eL,multiple:!0,children:[m,e(ev,{children:e(eb,{children:eq(eL)})})]})}),w[11]=h):h=w[11],w[12]!==n||w[13]!==y||w[14]!==u?(f=e("div",{className:"w-[320px]",children:t(J,{children:[i,e(K,{children:t(ek,{...n,value:y,onValueCommit:c,"data-testid":"multi-select",children:[u,h]})})]})}),w[12]=n,w[13]=y,w[14]=u,w[15]=f):f=w[15],f},meta:eF},{name:"TagsEditor",story:n=>{let r,a,i,c,d,s,u,m,h,f=(0,o.c)(14);f[0]===Symbol.for("react.memo_cache_sentinel")?(r=["production","critical"],f[0]=r):r=f[0];let[w,y]=(0,l.useState)(r);return f[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(Z,{children:"Tags"}),f[1]=a):a=f[1],f[2]===Symbol.for("react.memo_cache_sentinel")?(i=e=>y(e),f[2]=i):i=f[2],f[3]!==w?(c=e(ez,{children:e(ew,{className:"gap-4",items:w,itemRenderer:eX})}),f[3]=w,f[4]=c):c=f[4],f[5]===Symbol.for("react.memo_cache_sentinel")?(d=e(eI,{children:e(B,{size:"md"})}),f[5]=d):d=f[5],f[6]!==c?(s=t(eA,{children:[c,d]}),f[6]=c,f[7]=s):s=f[7],f[8]===Symbol.for("react.memo_cache_sentinel")?(u=e(eB,{}),f[8]=u):u=f[8],f[9]===Symbol.for("react.memo_cache_sentinel")?(m=e(eN,{children:t(ej,{items:eH,multiple:!0,children:[u,e(ev,{children:e(eb,{children:eq(eH)})})]})}),f[9]=m):m=f[9],f[10]!==n||f[11]!==s||f[12]!==w?(h=e("div",{className:"w-[320px]",children:t(J,{children:[a,e(K,{children:t(ek,{...n,value:w,onValueCommit:i,"data-testid":"tags",children:[s,m]})})]})}),f[10]=n,f[11]=s,f[12]=w,f[13]=h):h=f[13],h},meta:eF},{name:"DateEditor",story:n=>{let r,a,i,c,d,s,u,m,h,f,w=(0,o.c)(16);w[0]===Symbol.for("react.memo_cache_sentinel")?(r=new Q(2026,6,15),w[0]=r):r=w[0];let[y,b]=(0,l.useState)(r);w[1]!==y?(a=y?F(new Date(y.year,y.month-1,y.day),"d MMM, yyyy"):"—",w[1]=y,w[2]=a):a=w[2];let g=a;return w[3]===Symbol.for("react.memo_cache_sentinel")?(i=e(Z,{children:"Date"}),w[3]=i):i=w[3],w[4]===Symbol.for("react.memo_cache_sentinel")?(c=e=>b(e),w[4]=c):c=w[4],w[5]!==g?(d=e(ez,{children:g}),w[5]=g,w[6]=d):d=w[6],w[7]===Symbol.for("react.memo_cache_sentinel")?(s=e(eI,{children:e(q,{size:"md"})}),w[7]=s):s=w[7],w[8]!==d?(u=t(eA,{children:[d,s]}),w[8]=d,w[9]=u):u=w[9],w[10]===Symbol.for("react.memo_cache_sentinel")?(m=e(ei,{children:e(eQ,{granularity:"day"})}),w[10]=m):m=w[10],w[11]===Symbol.for("react.memo_cache_sentinel")?(h=e(eN,{children:t(eP,{children:[m,e(en,{children:e(et,{children:e(er,{})})})]})}),w[11]=h):h=w[11],w[12]!==n||w[13]!==y||w[14]!==u?(f=e("div",{className:"w-[320px]",children:e(eo,{order:"day-first",hourCycle:24,children:t(J,{children:[i,e(K,{children:t(ek,{...n,value:y,onValueCommit:c,"data-testid":"date",children:[u,h]})})]})})}),w[12]=n,w[13]=y,w[14]=u,w[15]=f):f=w[15],f},meta:eF},{name:"TimeEditor",story:n=>{let r,a,i,c,d,s,u,m,h,f=(0,o.c)(15);f[0]===Symbol.for("react.memo_cache_sentinel")?(r=new X(14,30),f[0]=r):r=f[0];let[w,y]=(0,l.useState)(r);f[1]!==w?(a=w?F(new Date(2e3,0,1,w.hour,w.minute),"h:mm a"):"—",f[1]=w,f[2]=a):a=f[2];let b=a;return f[3]===Symbol.for("react.memo_cache_sentinel")?(i=e(Z,{children:"Time"}),f[3]=i):i=f[3],f[4]===Symbol.for("react.memo_cache_sentinel")?(c=e=>y(e),f[4]=c):c=f[4],f[5]!==b?(d=e(ez,{children:b}),f[5]=b,f[6]=d):d=f[6],f[7]===Symbol.for("react.memo_cache_sentinel")?(s=e(eI,{children:e(G,{size:"md"})}),f[7]=s):s=f[7],f[8]!==d?(u=t(eA,{children:[d,s]}),f[8]=d,f[9]=u):u=f[9],f[10]===Symbol.for("react.memo_cache_sentinel")?(m=e(eN,{children:e(eV,{})}),f[10]=m):m=f[10],f[11]!==n||f[12]!==u||f[13]!==w?(h=e("div",{className:"w-[320px]",children:e(eo,{order:"day-first",hourCycle:12,children:t(J,{children:[i,e(K,{children:t(ek,{...n,value:w,onValueCommit:c,"data-testid":"time",children:[u,m]})})]})})}),f[11]=n,f[12]=u,f[13]=w,f[14]=h):h=f[14],h},meta:eF},{name:"DateTimeEditor",story:n=>{let r,a,i,c,d,s,u,m,h,f,w=(0,o.c)(16);w[0]===Symbol.for("react.memo_cache_sentinel")?(r=new U(2026,6,15,14,30),w[0]=r):r=w[0];let[y,b]=(0,l.useState)(r);w[1]!==y?(a=y?F(new Date(y.year,y.month-1,y.day,y.hour,y.minute),"d MMM, yyyy h:mm a"):"—",w[1]=y,w[2]=a):a=w[2];let g=a;return w[3]===Symbol.for("react.memo_cache_sentinel")?(i=e(Z,{children:"Date & Time"}),w[3]=i):i=w[3],w[4]===Symbol.for("react.memo_cache_sentinel")?(c=e=>b(e),w[4]=c):c=w[4],w[5]!==g?(d=e(ez,{children:g}),w[5]=g,w[6]=d):d=w[6],w[7]===Symbol.for("react.memo_cache_sentinel")?(s=e(eI,{children:e(q,{size:"md"})}),w[7]=s):s=w[7],w[8]!==d?(u=t(eA,{children:[d,s]}),w[8]=d,w[9]=u):u=w[9],w[10]===Symbol.for("react.memo_cache_sentinel")?(m=e(ei,{children:e(eQ,{granularity:"minute"})}),w[10]=m):m=w[10],w[11]===Symbol.for("react.memo_cache_sentinel")?(h=e(eN,{children:t(eT,{children:[m,e(en,{children:t(et,{children:[e(ea,{}),e(er,{})]})})]})}),w[11]=h):h=w[11],w[12]!==n||w[13]!==y||w[14]!==u?(f=e("div",{className:"w-[320px]",children:e(eo,{order:"day-first",hourCycle:12,children:t(J,{children:[i,e(K,{children:t(ek,{...n,value:y,onValueCommit:c,"data-testid":"datetime",children:[u,h]})})]})})}),w[12]=n,w[13]=y,w[14]=u,w[15]=f):f=w[15],f},meta:eF},{name:"HorizontalLayout",story:n=>{let r,a,i,c,d,s,u,m,h,f,w,y,b,g,p,S,_,v=(0,o.c)(29),[D,C]=(0,l.useState)("Checkout API");v[0]===Symbol.for("react.memo_cache_sentinel")?(r=["editor"],v[0]=r):r=v[0];let[M,E]=(0,l.useState)(r);v[1]!==M?(a=eL.find(e=>e.value===(M[0]??""))?.label??"",v[1]=M,v[2]=a):a=v[2];let x=a;return v[3]===Symbol.for("react.memo_cache_sentinel")?(i=e(Z,{children:"Name"}),v[3]=i):i=v[3],v[4]===Symbol.for("react.memo_cache_sentinel")?(c=e=>C(e),v[4]=c):c=v[4],v[5]!==D?(d=e(eA,{children:D}),v[5]=D,v[6]=d):d=v[6],v[7]===Symbol.for("react.memo_cache_sentinel")?(s=e(eN,{children:e(eO,{"aria-label":"Name"})}),u=e(eR,{}),v[7]=s,v[8]=u):(s=v[7],u=v[8]),v[9]!==n||v[10]!==D||v[11]!==d?(m=t(J,{orientation:"horizontal",children:[i,e(K,{children:t(ek,{...n,value:D,onValueCommit:c,"data-testid":"horizontal-text",children:[d,s,u]})})]}),v[9]=n,v[10]=D,v[11]=d,v[12]=m):m=v[12],v[13]===Symbol.for("react.memo_cache_sentinel")?(h=e(Z,{children:"Role"}),v[13]=h):h=v[13],v[14]===Symbol.for("react.memo_cache_sentinel")?(f=e=>E(e),v[14]=f):f=v[14],v[15]!==x?(w=e(ez,{children:x}),v[15]=x,v[16]=w):w=v[16],v[17]===Symbol.for("react.memo_cache_sentinel")?(y=e(eI,{children:e(B,{size:"md"})}),v[17]=y):y=v[17],v[18]!==w?(b=t(eA,{children:[w,y]}),v[18]=w,v[19]=b):b=v[19],v[20]===Symbol.for("react.memo_cache_sentinel")?(g=e(ey,{size:"inline-edit"}),v[20]=g):g=v[20],v[21]===Symbol.for("react.memo_cache_sentinel")?(p=e(eN,{children:t(ej,{items:eL,children:[g,e(ev,{children:e(eb,{children:eq(eL)})})]})}),v[21]=p):p=v[21],v[22]!==n||v[23]!==M||v[24]!==b?(S=t(J,{orientation:"horizontal",children:[h,e(K,{children:t(ek,{...n,value:M,onValueCommit:f,"data-testid":"horizontal-select",children:[b,p]})})]}),v[22]=n,v[23]=M,v[24]=b,v[25]=S):S=v[25],v[26]!==S||v[27]!==m?(_=t("div",{className:"flex w-[420px] flex-col gap-8",children:[m,S]}),v[26]=S,v[27]=m,v[28]=_):_=v[28],_},meta:eF},{name:"States",story:n=>{let r,a,i,l,c,d,s,u,m,h,f,w,y,b,g=(0,o.c)(20);return g[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(Z,{children:"Name"}),g[0]=r):r=g[0],g[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(eA,{children:"Checkout API and ABC"}),g[1]=a):a=g[1],g[2]===Symbol.for("react.memo_cache_sentinel")?(i=e(eN,{children:e(eO,{})}),g[2]=i):i=g[2],g[3]!==n?(l=t(J,{children:[r,e(K,{children:t(ek,{...n,defaultValue:"Checkout API and ABC",status:"loading","data-testid":"loading",children:[a,i]})})]}),g[3]=n,g[4]=l):l=g[4],g[5]===Symbol.for("react.memo_cache_sentinel")?(c=e(Z,{children:"Name"}),g[5]=c):c=g[5],g[6]===Symbol.for("react.memo_cache_sentinel")?(d=e(eA,{children:"Checkout API and ABC"}),g[6]=d):d=g[6],g[7]===Symbol.for("react.memo_cache_sentinel")?(s=e(eN,{children:e(eO,{})}),g[7]=s):s=g[7],g[8]!==n?(u=t(J,{children:[c,e(K,{children:t(ek,{...n,defaultValue:"Checkout API and ABC",status:"saved","data-testid":"saved",children:[d,s]})})]}),g[8]=n,g[9]=u):u=g[9],g[10]===Symbol.for("react.memo_cache_sentinel")?(m=e(Z,{children:"Name"}),g[10]=m):m=g[10],g[11]===Symbol.for("react.memo_cache_sentinel")?(h=e(eA,{children:"Checkout API and ABC"}),g[11]=h):h=g[11],g[12]===Symbol.for("react.memo_cache_sentinel")?(f=e(eN,{children:e(eO,{})}),w=e(eR,{children:"An error message."}),g[12]=f,g[13]=w):(f=g[12],w=g[13]),g[14]!==n?(y=t(J,{children:[m,e(K,{children:t(ek,{...n,defaultValue:"Checkout API and ABC",defaultEdit:!0,status:"error","data-testid":"error",children:[h,f,w]})})]}),g[14]=n,g[15]=y):y=g[15],g[16]!==y||g[17]!==l||g[18]!==u?(b=t("div",{className:"flex w-[420px] flex-col gap-12",children:[l,u,y]}),g[16]=y,g[17]=l,g[18]=u,g[19]=b):b=g[19],b},meta:eF},{name:"Async",story:n=>{let r,a,i,c,d,s,u=(0,o.c)(10),[m,h]=(0,l.useState)("Checkout API");u[0]===Symbol.for("react.memo_cache_sentinel")?(r=e=>new Promise((t,n)=>{setTimeout(()=>{0===e.trim().length?n(Error("Name is required.")):(h(e),t())},1200)}),u[0]=r):r=u[0];let f=r;return u[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(Z,{children:"Name"}),u[1]=a):a=u[1],u[2]!==m?(i=e(eA,{children:m}),u[2]=m,u[3]=i):i=u[3],u[4]===Symbol.for("react.memo_cache_sentinel")?(c=e(eN,{children:e(eO,{})}),d=e(eR,{}),u[4]=c,u[5]=d):(c=u[4],d=u[5]),u[6]!==n||u[7]!==i||u[8]!==m?(s=e("div",{className:"w-[320px]",children:t(J,{children:[a,e(K,{children:t(ek,{...n,value:m,onValueCommit:f,"data-testid":"attr",children:[i,c,d]})})]})}),u[6]=n,u[7]=i,u[8]=m,u[9]=s):s=u[9],s},meta:eF},{name:"NonEditable",story:n=>{let r,a,i,l,c,d,s,u,m,h=(0,o.c)(13);return h[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(Z,{children:"Read only"}),h[0]=r):r=h[0],h[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(eA,{children:"Locked value"}),h[1]=a):a=h[1],h[2]===Symbol.for("react.memo_cache_sentinel")?(i=e(eN,{children:e(eO,{})}),h[2]=i):i=h[2],h[3]!==n?(l=t(J,{children:[r,e(K,{children:t(ek,{...n,defaultValue:"Locked value",readOnly:!0,"data-testid":"readonly",children:[a,i]})})]}),h[3]=n,h[4]=l):l=h[4],h[5]===Symbol.for("react.memo_cache_sentinel")?(c=e(Z,{children:"Disabled"}),h[5]=c):c=h[5],h[6]===Symbol.for("react.memo_cache_sentinel")?(d=e(eA,{children:"Disabled value"}),h[6]=d):d=h[6],h[7]===Symbol.for("react.memo_cache_sentinel")?(s=e(eN,{children:e(eO,{})}),h[7]=s):s=h[7],h[8]!==n?(u=t(J,{children:[c,e(K,{children:t(ek,{...n,defaultValue:"Disabled value",disabled:!0,"data-testid":"disabled",children:[d,s]})})]}),h[8]=n,h[9]=u):u=h[9],h[10]!==l||h[11]!==u?(m=t("div",{className:"flex w-[320px] flex-col gap-8",children:[l,u]}),h[10]=l,h[11]=u,h[12]=m):m=h[12],m},meta:eF},{name:"ConfirmCommit",story:n=>{let r,a,i,c,d,s,u,m,h,f,w,y,b,g,p,S,_,v,D,C,M,E,x,k,W,N,P,T=(0,o.c)(44),[R,O]=(0,l.useState)("dev@wallarm.com");T[0]===Symbol.for("react.memo_cache_sentinel")?(r=["editor"],T[0]=r):r=T[0];let[$,A]=(0,l.useState)(r),[I,z]=(0,l.useState)(null),j=(0,l.useRef)(null);T[1]===Symbol.for("react.memo_cache_sentinel")?(a=e=>new Promise(t=>{j.current=t,z(e)}),T[1]=a):a=T[1];let Y=a;T[2]===Symbol.for("react.memo_cache_sentinel")?(i=e=>{j.current?.(e),j.current=null,z(null)},T[2]=i):i=T[2];let V=i;T[3]!==$?(c=eL.find(e=>e.value===($[0]??""))?.label??"",T[3]=$,T[4]=c):c=T[4];let F=c;T[5]===Symbol.for("react.memo_cache_sentinel")?(d=e(Z,{children:"Email"}),T[5]=d):d=T[5],T[6]===Symbol.for("react.memo_cache_sentinel")?(s=(e,t)=>e===t||Y(`Change email to ${e}?`),u=e=>O(e),T[6]=s,T[7]=u):(s=T[6],u=T[7]),T[8]!==R?(m=e(eA,{children:R}),T[8]=R,T[9]=m):m=T[9],T[10]===Symbol.for("react.memo_cache_sentinel")?(h=e(eN,{children:e(eO,{type:"email","aria-label":"Email"})}),T[10]=h):h=T[10],T[11]!==n||T[12]!==R||T[13]!==m?(f=t(J,{children:[d,e(K,{children:t(ek,{...n,value:R,onBeforeValueCommit:s,onValueCommit:u,"data-testid":"confirm-email",children:[m,h]})})]}),T[11]=n,T[12]=R,T[13]=m,T[14]=f):f=T[14],T[15]===Symbol.for("react.memo_cache_sentinel")?(w=e(Z,{children:"Role"}),T[15]=w):w=T[15],T[16]===Symbol.for("react.memo_cache_sentinel")?(y=(e,t)=>{let n=e.join();if(n===t.join())return!0;let r=eL.find(t=>t.value===e[0])?.label??n;return Y(`Change role to ${r}?`)},b=e=>A(e),T[16]=y,T[17]=b):(y=T[16],b=T[17]),T[18]!==F?(g=e(ez,{children:F}),T[18]=F,T[19]=g):g=T[19],T[20]===Symbol.for("react.memo_cache_sentinel")?(p=e(eI,{children:e(B,{size:"md"})}),T[20]=p):p=T[20],T[21]!==g?(S=t(eA,{children:[g,p]}),T[21]=g,T[22]=S):S=T[22],T[23]===Symbol.for("react.memo_cache_sentinel")?(_=e(eG,{}),T[23]=_):_=T[23],T[24]===Symbol.for("react.memo_cache_sentinel")?(v=e(eN,{children:t(ej,{items:eL,children:[_,e(ev,{children:e(eb,{children:eq(eL)})})]})}),T[24]=v):v=T[24],T[25]!==n||T[26]!==$||T[27]!==S?(D=t(J,{children:[w,e(K,{children:t(ek,{...n,value:$,onBeforeValueCommit:y,onValueCommit:b,"data-testid":"confirm-role",children:[S,v]})})]}),T[25]=n,T[26]=$,T[27]=S,T[28]=D):D=T[28];let L=null!==I;return T[29]===Symbol.for("react.memo_cache_sentinel")?(C=e=>{e||V(!1)},T[29]=C):C=T[29],T[30]===Symbol.for("react.memo_cache_sentinel")?(M=e(eh,{children:e(ef,{children:"Confirm change"})}),T[30]=M):M=T[30],T[31]!==I?(E=e(ed,{children:e(eC,{children:I})}),T[31]=I,T[32]=E):E=T[32],T[33]===Symbol.for("react.memo_cache_sentinel")?(x=e(ee,{variant:"ghost",color:"neutral",size:"large",onClick:()=>V(!1),"data-testid":"confirm-decline",children:"Cancel"}),T[33]=x):x=T[33],T[34]===Symbol.for("react.memo_cache_sentinel")?(k=e(eu,{children:t(em,{children:[x,e(ee,{variant:"primary",color:"brand",size:"large",onClick:()=>V(!0),"data-testid":"confirm-accept",children:"Change"})]})}),T[34]=k):k=T[34],T[35]!==E?(W=t(es,{children:[M,E,k]}),T[35]=E,T[36]=W):W=T[36],T[37]!==L||T[38]!==W?(N=e(ec,{open:L,onOpenChange:C,"data-testid":"confirm-dialog",children:W}),T[37]=L,T[38]=W,T[39]=N):N=T[39],T[40]!==D||T[41]!==N||T[42]!==f?(P=t("div",{className:"flex w-[320px] flex-col gap-8",children:[f,D,N]}),T[40]=D,T[41]=N,T[42]=f,T[43]=P):P=T[43],P},meta:eF}];function eZ({entry:e}){let{story:t,meta:n}=e,r={...n.args,...t.args},a="function"==typeof t||t.$$typeof?t:t.render||n.render||n.component,i=()=>l.default.createElement(a,r),o={args:r,globals:{theme:"light"},parameters:{...n.parameters,...t.parameters},viewMode:"story"};for(let e of[...n.decorators||[],...t.decorators||[]].reverse()){let t=i;i=()=>e(t,o)}return l.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},l.default.createElement("h2",{className:"text-sm mb-12"},e.name),l.default.createElement(i))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(l.default.createElement(window.WallarmDS.Root,null,eJ.map((e,t)=>l.default.createElement(eZ,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,187 @@
+Short, single-line free text — reach for `Textarea` when the answer runs to sentences, and `Select` when it comes from a known set. Wrap it in `Field` for the label and description; a placeholder is an example of the answer, never a substitute for the label and never where required information lives.
+
+## 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 | — |  |
+| `pattern` | `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, HTMLInputElement> \| undefined` | no | — |  |
+| `type` | `HTMLInputTypeAttribute \| undefined` | no | — |  |
+| `disabled` | `boolean \| undefined` | no | `false` |  |
+| `name` | `string \| undefined` | no | — |  |
+| `value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `height` | `string \| number \| undefined` | no | — |  |
+| `max` | `string \| number \| undefined` | no | — |  |
+| `min` | `string \| number \| undefined` | no | — |  |
+| `width` | `string \| number \| undefined` | no | — |  |
+| `alt` | `string \| undefined` | no | — |  |
+| `src` | `string \| undefined` | no | — |  |
+| `auto-complete` | `HTMLInputAutoCompleteAttribute \| undefined` | no | — |  |
+| `max-length` | `number \| undefined` | no | — |  |
+| `min-length` | `number \| undefined` | no | — |  |
+| `placeholder` | `string \| undefined` | no | — |  |
+| `read-only` | `boolean \| undefined` | no | — |  |
+| `required` | `boolean \| undefined` | no | — |  |
+| `checked` | `boolean \| undefined` | no | — |  |
+| `accept` | `string \| undefined` | no | — |  |
+| `multiple` | `boolean \| undefined` | no | — |  |
+| `step` | `string \| number \| undefined` | no | — |  |
+| `size` | `"default" \| "medium" \| "small" \| "inline-edit"` | no | `default` |  |
+| `error` | `boolean` | no | `false` |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Stories
+
+### Basic
+
+The bare control. Dropped inside a `Field` it reads that context and wires up its own
+label, description and error state — you don't pass them.
+
+Source: Input/Input.stories.tsx#Basic
+
+### Sizes
+
+A 36 / 32 / 24px scale shared with `Textarea`, `InputGroup` and the date inputs, so a row
+of mixed fields lines up. Reach below `default` only in dense places like a table filter.
+
+Source: Input/Input.stories.tsx#Sizes
+
+### Focused
+
+Focus is a ring outside the border rather than a border change, so nothing reflows by a
+pixel when the reader tabs through a form.
+
+Source: Input/Input.stories.tsx#Focused
+
+### Disabled
+
+Dimmed and not focusable. Say elsewhere what would enable it — a disabled field with no
+explanation reads as broken.
+
+Source: Input/Input.stories.tsx#Disabled
+
+### WithValue
+
+A filled field. Placeholder text is deliberately set at the same size as real input so the
+text doesn't jump when typing starts; only its colour is lighter.
+
+Source: Input/Input.stories.tsx#WithValue
+
+### WithError
+
+`error` reddens the border and sets `aria-invalid`. It shows that something is wrong but
+not what — the message is `FieldError`'s job.
+
+Source: Input/Input.stories.tsx#WithError
+
+## Story sources
+
+### Input/Input.stories.tsx
+
+```tsx
+import { fn } from 'storybook/test';
+import type { Meta, StoryFn, StoryObj } from 'storybook-react-rsbuild';
+import { HStack } from '../Stack';
+import { Input } from './Input';
+
+const DESCRIPTION = [
+  'Short, single-line free text — reach for `Textarea` when the answer runs to sentences, and `Select` when it comes from a known set.',
+  'Wrap it in `Field` for the label and description; a placeholder is an example of the answer, never a substitute for the label and never where required information lives.',
+].join(' ');
+
+const meta = {
+  title: 'Inputs/Input',
+  component: Input,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+  args: {
+    onChange: fn(),
+    placeholder: 'Placeholder',
+  },
+  argTypes: {
+    error: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+
+/**
+ * The bare control. Dropped inside a `Field` it reads that context and wires up its own
+ * label, description and error state — you don't pass them.
+ */
+export const Basic: StoryObj<typeof meta> = {
+  args: {
+    'data-testid': 'input',
+  },
+};
+
+/**
+ * A 36 / 32 / 24px scale shared with `Textarea`, `InputGroup` and the date inputs, so a row
+ * of mixed fields lines up. Reach below `default` only in dense places like a table filter.
+ */
+export const Sizes: StoryFn<typeof meta> = ({ ...args }) => (
+  <HStack gap={16} align='start'>
+    <Input {...args} size='default' />
+    <Input {...args} size='medium' />
+    <Input {...args} size='small' />
+  </HStack>
+);
+
+/**
+ * Focus is a ring outside the border rather than a border change, so nothing reflows by a
+ * pixel when the reader tabs through a form.
+ */
+export const Focused: StoryObj<typeof meta> = {
+  parameters: { pseudo: { focusVisible: true } },
+};
+
+/**
+ * Dimmed and not focusable. Say elsewhere what would enable it — a disabled field with no
+ * explanation reads as broken.
+ */
+export const Disabled: StoryObj<typeof meta> = {
+  args: {
+    disabled: true,
+  },
+};
+
+/**
+ * A filled field. Placeholder text is deliberately set at the same size as real input so the
+ * text doesn't jump when typing starts; only its colour is lighter.
+ */
+export const WithValue: StoryObj<typeof meta> = {
+  args: {
+    value: 'Some value...',
+  },
+};
+
+/**
+ * `error` reddens the border and sets `aria-invalid`. It shows that something is wrong but
+ * not what — the message is `FieldError`'s job.
+ */
+export const WithError: StoryObj<typeof meta> = {
+  args: {
+    error: true,
+  },
+};
+```

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

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

package/dist/project/components/Input/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 o,l,i=Object.create,s=Object.defineProperty,c=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||s(e,a,{get:()=>t[a],enumerable:!(n=c(t,a))||n.enumerable});return e},d={},y={$dispatcherGuard:()=>k,$makeReadOnly:()=>M,$reset:()=>O,$structuralCheck:()=>T,c:()=>$,clearRenderCounterRegistry:()=>x,renderCounterRegistry:()=>j,useRenderCounter:()=>D};for(var h in y)s(d,h,{get:y[h],enumerable:!0});e.exports=m(s({},"__esModule",{value:!0}),d);var g=(a=null!=(n=r("C"))?i(f(n)):{},m(n&&n.__esModule?a:s(a,"default",{value:n,enumerable:!0}),n)),{useRef:R,useEffect:v,isValidElement:w}=g,E=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,b=Symbol.for("react.memo_cache_sentinel"),$="function"==typeof(null==(l=g.__COMPILER_RUNTIME)?void 0:l.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=b;return t[b]=!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 N(e){return E.ReactCurrentDispatcher.current=e,E.ReactCurrentDispatcher.current}_.useMemoCache=e=>{if(null!=S)return S.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function k(e){let t=E.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.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.");N(_)}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&&(S=null),N(e)}else if(2===e)C.push(t),N(S);else if(3===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");N(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function O(e){for(let t=0;t<e.length;t++)e[t]=b}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var j=new Map;function x(){for(let e of j.values())e.forEach(e=>{e.count=0})}function D(e){let t=R(null);null!=t.current&&(t.current.count+=1),v(()=>{if(null==t.current){let r,n={count:0};null==(r=j.get(e))&&(r=new Set,j.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=j.get(e))&&n.delete(r))}})}var I=new Set;function T(e,t,r,n,a,o){function l(e,t,l,i){let s=`${n}:${o} [${a}] ${r}${l} changed from ${e} to ${t} at depth ${i}`;I.has(s)||(I.add(s),console.error(s))}!function e(t,r,n,a){if(!(a>2)){if(t!==r)if(typeof t!=typeof r)l(`type ${typeof t}`,`type ${typeof r}`,n,a);else if("object"==typeof t){let o=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)l("null",`type ${typeof r}`,n,a);else if(null===r)l(`type ${typeof t}`,"null",n,a);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)l(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,a);else for(let[o,i]of t)r.has(o)?e(i,r.get(o),`${n}.get(${o})`,a+1):l(`Map instance with key ${o}`,`Map instance without key ${o}`,n,a);else l("Map instance","other value",n,a);else if(r instanceof Map)l("other value","Map instance",n,a);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)l(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,a);else for(let e of r)t.has(e)||l(`Set instance without element ${e}`,`Set instance with element ${e}`,n,a);else l("Set instance","other value",n,a);else if(r instanceof Set)l("other value","Set instance",n,a);else if(o||i)if(o!==i)l(`type ${o?"array":"object"}`,`type ${i?"array":"object"}`,n,a);else if(t.length!==r.length)l(`array with length ${t.length}`,`array with length ${r.length}`,n,a);else for(let o=0;o<t.length;o++)e(t[o],r[o],`${n}[${o}]`,a+1);else if(w(t)||w(r))w(t)!==w(r)?l(`type ${w(t)?"React element":"object"}`,`type ${w(r)?"React element":"object"}`,n,a):t.type!==r.type?l(`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||l(`object without key ${e}`,`object with key ${e}`,n,a);for(let o in t)o in r?e(t[o],r[o],`${n}.${o}`,a+1):l(`object with key ${o}`,`object without key ${o}`,n,a)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&l(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,a):t!==r&&l(t,r,n,a)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,a=new WeakMap;function o(e,t,r){let o=t,l=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!=l.ref&&!o.prototype?.isReactComponent){let t=o,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)),o=a}if("string"==typeof o&&"boolean"==typeof l.inert&&((l={...l}).inert?l.inert="":delete l.inert),"string"==typeof o)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in l&&(l={...l,[t]:l[e]},delete l[e]);return"string"==typeof o&&null!=l.ref&&(o=function(e,t){let r=a.get(e);r||(r=new Map,a.set(e,r));let n=r.get(t);if(n)return n;let o=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 o.displayName=`CanvasHost(${t})`,r.set(t,o),o}(e,o)),{type:o,props:l}}function l(e){let t=(t,r,n)=>{let a=o(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=o(e,t,r??{}),{children:l,...i}=a.props;return e.createElement(a.type,void 0===n?i:{...i,key:n},...Array.isArray(l)?l:[l])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...n)=>{let a=o(e,t,r??{});return e.createElement(a.type,a.props,...n)},cloneElement:(t,r,...n)=>{let a=e.cloneElement(t,r??void 0,...n),l=a.ref,i=o(e,a.type,{...a.props,ref:l});return i.type===a.type&&"string"!=typeof a.type?a:e.createElement(i.type,{...i.props,key:a.key})}}}r.d(t,{MA:()=>l,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:s,StrictMode:c,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:p,cloneElement:m,createContext:d,createElement:y,createFactory:h,createRef:g,forwardRef:R,isValidElement:v,lazy:w,memo:E,startTransition:b,unstable_act:$,useCallback:_,useContext:S,useDebugValue:N,useDeferredValue:C,useEffect:k,useId:O,useImperativeHandle:M,useInsertionEffect:j,useLayoutEffect:x,useMemo:D,useReducer:I,useRef:T,useState:P,useSyncExternalStore:z,useTransition:A,version:W,use:L}=n;r.d(t,{},{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:s,StrictMode:c,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:p,cloneElement:m,createContext:d,createElement:y,createFactory:h,createRef:g,default:n,forwardRef:R,isValidElement:v,lazy:w,memo:E,startTransition:b,unstable_act:$,use:L,useCallback:_,useContext:S,useDebugValue:N,useDeferredValue:C,useEffect:k,useId:O,useImperativeHandle:M,useInsertionEffect:j,useLayoutEffect:x,useMemo:D,useReducer:I,useRef:T,useState:P,useSyncExternalStore:z,useTransition:A,version:W})}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,r),o.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 o=r("vD");let l=window.WallarmDS.HStack,i=window.WallarmDS.Input,s={title:"Inputs/Input",component:i,parameters:{layout:"centered",docs:{description:{component:"Short, single-line free text — reach for `Textarea` when the answer runs to sentences, and `Select` when it comes from a known set. Wrap it in `Field` for the label and description; a placeholder is an example of the answer, never a substitute for the label and never where required information lives."}}},args:{onChange:function(e=()=>{}){let t=(...t)=>e(...t);for(let r of["mockName","mockReturnValue","mockResolvedValue","mockImplementation"])t[r]=n=>("mockImplementation"===r?e=n:"mockReturnValue"===r?e=()=>n:"mockResolvedValue"===r&&(e=()=>Promise.resolve(n)),t);return t}(),placeholder:"Placeholder"},argTypes:{error:{control:"boolean"},disabled:{control:"boolean"}}};var c=r("C");let u=[{name:"Basic",story:{args:{"data-testid":"input"}},meta:s},{name:"Sizes",story:r=>{let n,a,s=(0,o.c)(4);return s[0]!==r?({...n}=r,s[0]=r,s[1]=n):n=s[1],s[2]!==n?(a=t(l,{gap:16,align:"start",children:[e(i,{...n,size:"default"}),e(i,{...n,size:"medium"}),e(i,{...n,size:"small"})]}),s[2]=n,s[3]=a):a=s[3],a},meta:s},{name:"Focused",story:{parameters:{pseudo:{focusVisible:!0}}},meta:s},{name:"Disabled",story:{args:{disabled:!0}},meta:s},{name:"WithValue",story:{args:{value:"Some value..."}},meta:s},{name:"WithError",story:{args:{error:!0}},meta:s}];function f({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,o=()=>c.default.createElement(a,n),l={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,l)}return c.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},c.default.createElement("h2",{className:"text-sm mb-12"},e.name),c.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(c.default.createElement(window.WallarmDS.Root,null,u.map((e,t)=>c.default.createElement(f,{key:t,entry:e})))),t}}})();