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

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

@@ -0,0 +1,254 @@
+A password field with a reveal toggle, which is the whole point of reaching for it over an `Input` of type password. Where rules are enforced, pair it with `PasswordComplexity` so the reader watches them being met rather than discovering them on submit.
+
+## 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 | — |  |
+| `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 | — |  |
+| `size` | `"default" \| "medium" \| "small" \| "inline-edit"` | no | `default` |  |
+| `alt` | `string \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+| `src` | `string \| undefined` | no | — |  |
+| `error` | `boolean` | no | `false` |  |
+| `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 | — |  |
+
+## Stories
+
+### Basic
+
+Masked by default, with the eye toggling to plain text. The toggle is a real button, so it
+is reachable by keyboard rather than being a mouse-only affordance.
+
+Source: PasswordInput/PasswordInput.stories.tsx#Basic
+
+### WithField
+
+Inside `Field`, which supplies the label and description above it.
+
+Source: PasswordInput/PasswordInput.stories.tsx#WithField
+
+### WithError
+
+`error` on the field. Say what is wrong in `FieldError` — a red border on a masked field
+leaves the reader guessing at something they cannot see.
+
+Source: PasswordInput/PasswordInput.stories.tsx#WithError
+
+### WithRequirements
+
+`PasswordComplexity` fed by the exported `passwordValidators`, ticking off each rule as it
+is met. Show the rules from the start rather than revealing them after a failure.
+
+Source: PasswordInput/PasswordInput.stories.tsx#WithRequirements
+
+### Disabled
+
+Dimmed, with the reveal toggle out as well — there is nothing to reveal that the reader can
+act on.
+
+Source: PasswordInput/PasswordInput.stories.tsx#Disabled
+
+### Sizes
+
+The same height scale as `Input`, so a password field lines up with the fields around it.
+
+Source: PasswordInput/PasswordInput.stories.tsx#Sizes
+
+## Story sources
+
+### PasswordInput/PasswordInput.stories.tsx
+
+```tsx
+import { useState } from 'react';
+import type { Meta, StoryFn, StoryObj } from 'storybook-react-rsbuild';
+import { Field } from '../Field/Field';
+import { FieldAction } from '../Field/FieldAction';
+import { FieldError } from '../Field/FieldError';
+import { FieldIndicator } from '../Field/FieldIndicator';
+import { FieldLabel } from '../Field/FieldLabel';
+import {
+  PasswordComplexity,
+  type PasswordComplexityItem,
+} from '../PasswordComplexity/PasswordComplexity';
+import { passwordValidators } from '../PasswordComplexity/validators';
+import { HStack, VStack } from '../Stack';
+import { PasswordInput } from './PasswordInput';
+
+const DESCRIPTION = [
+  'A password field with a reveal toggle, which is the whole point of reaching for it over an `Input` of type password.',
+  'Where rules are enforced, pair it with `PasswordComplexity` so the reader watches them being met rather than discovering them on submit.',
+].join(' ');
+
+const meta = {
+  title: 'Inputs/PasswordInput',
+  component: PasswordInput,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+  argTypes: {
+    error: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof PasswordInput>;
+
+export default meta;
+
+/**
+ * Masked by default, with the eye toggling to plain text. The toggle is a real button, so it
+ * is reachable by keyboard rather than being a mouse-only affordance.
+ */
+export const Basic: StoryObj<typeof meta> = {
+  args: {
+    placeholder: 'Enter',
+  },
+};
+
+/**
+ * Inside `Field`, which supplies the label and description above it.
+ */
+export const WithField: StoryFn<typeof meta> = () => (
+  <Field required>
+    <FieldLabel>
+      Password
+      <FieldIndicator />
+      <FieldAction type='muted'>Forgot password?</FieldAction>
+    </FieldLabel>
+    <PasswordInput placeholder='Enter' />
+  </Field>
+);
+
+/**
+ * `error` on the field. Say what is wrong in `FieldError` — a red border on a masked field
+ * leaves the reader guessing at something they cannot see.
+ */
+export const WithError: StoryFn<typeof meta> = () => (
+  <Field required>
+    <FieldLabel>
+      Password
+      <FieldIndicator />
+    </FieldLabel>
+    <PasswordInput placeholder='Enter' error />
+    <FieldError>Password is incorrect</FieldError>
+  </Field>
+);
+
+/**
+ * `PasswordComplexity` fed by the exported `passwordValidators`, ticking off each rule as it
+ * is met. Show the rules from the start rather than revealing them after a failure.
+ */
+export const WithRequirements: StoryFn<typeof meta> = () => {
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+
+  const items: PasswordComplexityItem[] = [
+    {
+      id: 'length',
+      label: 'At least 8 characters',
+      met: passwordValidators.minLength(8)(password),
+    },
+    {
+      id: 'uppercase',
+      label: 'One uppercase letter (A\u2013Z)',
+      met: passwordValidators.hasUppercase(password),
+    },
+    {
+      id: 'lowercase',
+      label: 'One lowercase letter (a\u2013z)',
+      met: passwordValidators.hasLowercase(password),
+    },
+    { id: 'number', label: 'One number (0\u20139)', met: passwordValidators.hasNumber(password) },
+    {
+      id: 'symbol',
+      label: 'One symbol (e.g. ! ? @ #)',
+      met: passwordValidators.hasSymbol(password),
+    },
+    {
+      id: 'match',
+      label: 'Both passwords match',
+      met: passwordValidators.passwordsMatch(password, confirmPassword),
+    },
+  ];
+
+  return (
+    <VStack gap={16} className='w-[320px]'>
+      <Field>
+        <FieldLabel>New password</FieldLabel>
+        <PasswordInput
+          placeholder='New password...'
+          value={password}
+          onChange={e => setPassword(e.target.value)}
+        />
+      </Field>
+
+      <VStack gap={6}>
+        <Field>
+          <FieldLabel>Confirm password</FieldLabel>
+          <PasswordInput
+            placeholder='Confirm password...'
+            value={confirmPassword}
+            onChange={e => setConfirmPassword(e.target.value)}
+          />
+        </Field>
+        <PasswordComplexity items={items} />
+      </VStack>
+    </VStack>
+  );
+};
+
+/**
+ * Dimmed, with the reveal toggle out as well — there is nothing to reveal that the reader can
+ * act on.
+ */
+export const Disabled: StoryObj<typeof meta> = {
+  args: {
+    placeholder: 'Enter',
+    disabled: true,
+  },
+};
+
+/**
+ * The same height scale as `Input`, so a password field lines up with the fields around it.
+ */
+export const Sizes: StoryFn<typeof meta> = () => (
+  <HStack gap={16} align='start'>
+    <PasswordInput placeholder='Default' size='default' />
+    <PasswordInput placeholder='Medium' size='medium' />
+    <PasswordInput placeholder='Small' size='small' />
+  </HStack>
+);
+```

package/dist/project/components/PasswordInput/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/PasswordInput/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,a;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var l,o,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,d=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of u(t))f.call(e,a)||a===r||c(e,a,{get:()=>t[a],enumerable:!(n=s(t,a))||n.enumerable});return e},m={},h={$dispatcherGuard:()=>O,$makeReadOnly:()=>D,$reset:()=>M,$structuralCheck:()=>I,c:()=>R,clearRenderCounterRegistry:()=>P,renderCounterRegistry:()=>k,useRenderCounter:()=>j};for(var y in h)c(m,y,{get:h[y],enumerable:!0});e.exports=d(c({},"__esModule",{value:!0}),m);var w=(a=null!=(n=r("C"))?i(p(n)):{},d(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:g,useEffect:b,isValidElement:S}=w,_=null!=(l=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:w.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,E=Symbol.for("react.memo_cache_sentinel"),R="function"==typeof(null==(o=w.__COMPILER_RUNTIME)?void 0:o.c)?w.__COMPILER_RUNTIME.c:function(e){return w.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=E;return t[E]=!0,t},[])},v={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{v[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var $=null;function N(e){return _.ReactCurrentDispatcher.current=e,_.ReactCurrentDispatcher.current}v.useMemoCache=e=>{if(null!=$)return $.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function O(e){let t=_.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.length&&($=t),t===v)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");N(v)}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&&($=null),N(e)}else if(2===e)C.push(t),N($);else if(3===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");N(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function M(e){for(let t=0;t<e.length;t++)e[t]=E}function D(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var k=new Map;function P(){for(let e of k.values())e.forEach(e=>{e.count=0})}function j(e){let t=g(null);null!=t.current&&(t.current.count+=1),b(()=>{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 x=new Set;function I(e,t,r,n,a,l){function o(e,t,o,i){let c=`${n}:${l} [${a}] ${r}${o} changed from ${e} to ${t} at depth ${i}`;x.has(c)||(x.add(c),console.error(c))}!function e(t,r,n,a){if(!(a>2)){if(t!==r)if(typeof t!=typeof r)o(`type ${typeof t}`,`type ${typeof r}`,n,a);else if("object"==typeof t){let l=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)o("null",`type ${typeof r}`,n,a);else if(null===r)o(`type ${typeof t}`,"null",n,a);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)o(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,a);else for(let[l,i]of t)r.has(l)?e(i,r.get(l),`${n}.get(${l})`,a+1):o(`Map instance with key ${l}`,`Map instance without key ${l}`,n,a);else o("Map instance","other value",n,a);else if(r instanceof Map)o("other value","Map instance",n,a);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)o(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,a);else for(let e of r)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,n,a);else o("Set instance","other value",n,a);else if(r instanceof Set)o("other value","Set instance",n,a);else if(l||i)if(l!==i)o(`type ${l?"array":"object"}`,`type ${i?"array":"object"}`,n,a);else if(t.length!==r.length)o(`array with length ${t.length}`,`array with length ${r.length}`,n,a);else for(let l=0;l<t.length;l++)e(t[l],r[l],`${n}[${l}]`,a+1);else if(S(t)||S(r))S(t)!==S(r)?o(`type ${S(t)?"React element":"object"}`,`type ${S(r)?"React element":"object"}`,n,a):t.type!==r.type?o(`React element of type ${t.type}`,`React element of type ${r.type}`,n,a):e(t.props,r.props,`[props of ${n}]`,a+1);else{for(let e in r)e in t||o(`object without key ${e}`,`object with key ${e}`,n,a);for(let l in t)l in r?e(t[l],r[l],`${n}.${l}`,a+1):o(`object with key ${l}`,`object without key ${l}`,n,a)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&o(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,a):t!==r&&o(t,r,n,a)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,a=new WeakMap;function l(e,t,r){let l=t,o=r;if("object"==typeof l&&null!==l&&"$$typeof"in l&&l.$$typeof===Symbol.for("react.context")&&"Provider"in l&&(l=l.Provider),"function"==typeof l&&null!=o.ref&&!l.prototype?.isReactComponent){let t=l,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let a=r.get(t);a||((a=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,a)),l=a}if("string"==typeof l&&"boolean"==typeof o.inert&&((o={...o}).inert?o.inert="":delete o.inert),"string"==typeof l)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in o&&(o={...o,[t]:o[e]},delete o[e]);return"string"==typeof l&&null!=o.ref&&(l=function(e,t){let r=a.get(e);r||(r=new Map,a.set(e,r));let n=r.get(t);if(n)return n;let l=e.forwardRef((r,n)=>{let a=e.useRef(null);if(!a.current||a.current.original!==n){let e;a.current={original:n,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof n){let r=n(t);e="function"==typeof r?r:void 0}else n&&(n.current=t)}}}return e.createElement(t,{...r,ref:a.current.callback})});return l.displayName=`CanvasHost(${t})`,r.set(t,l),l}(e,l)),{type:l,props:o}}function o(e){let t=(t,r,n)=>{let a=l(e,t,r??{});return e.createElement(a.type,void 0===n?a.props:{...a.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let a=l(e,t,r??{}),{children:o,...i}=a.props;return e.createElement(a.type,void 0===n?i:{...i,key:n},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...n)=>{let a=l(e,t,r??{});return e.createElement(a.type,a.props,...n)},cloneElement:(t,r,...n)=>{let a=e.cloneElement(t,r??void 0,...n),o=a.ref,i=l(e,a.type,{...a.props,ref:o});return i.type===a.type&&"string"!=typeof a.type?a:e.createElement(i.type,{...i.props,key:a.key})}}}r.d(t,{MA:()=>o,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:a,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:p,act:f,cloneElement:d,createContext:m,createElement:h,createFactory:y,createRef:w,forwardRef:g,isValidElement:b,lazy:S,memo:_,startTransition:E,unstable_act:R,useCallback:v,useContext:$,useDebugValue:N,useDeferredValue:C,useEffect:O,useId:M,useImperativeHandle:D,useInsertionEffect:k,useLayoutEffect:P,useMemo:j,useReducer:x,useRef:I,useState:W,useSyncExternalStore:A,useTransition:T,version:z,use:L}=n;r.d(t,{},{Children:a,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:p,act:f,cloneElement:d,createContext:m,createElement:h,createFactory:y,createRef:w,default:n,forwardRef:g,isValidElement:b,lazy:S,memo:_,startTransition:E,unstable_act:R,use:L,useCallback:v,useContext:$,useDebugValue:N,useDeferredValue:C,useEffect:O,useId:M,useImperativeHandle:D,useInsertionEffect:k,useLayoutEffect:P,useMemo:j,useReducer:x,useRef:I,useState:W,useSyncExternalStore:A,useTransition:T,version:z})}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var l=t[n]={exports:{}};return e[n](l,l.exports,r),l.exports}r.d=(e,t,n)=>{var a=(t,n)=>{for(var a in t)r.o(t,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,[n]:t[a]})};a(t,"get"),a(n,"value")},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:n,Fragment:a}=(0,r("p").MA)(window.React);var l=r("vD"),o=r("C");let i=window.WallarmDS.Field,c=window.WallarmDS.FieldAction,s=window.WallarmDS.FieldError,u=window.WallarmDS.FieldIndicator,p=window.WallarmDS.FieldLabel,f=window.WallarmDS.PasswordComplexity,d=window.WallarmDS.passwordValidators,m=window.WallarmDS.HStack,h=window.WallarmDS.VStack,y=window.WallarmDS.PasswordInput,w={title:"Inputs/PasswordInput",component:y,parameters:{layout:"centered",docs:{description:{component:"A password field with a reveal toggle, which is the whole point of reaching for it over an `Input` of type password. Where rules are enforced, pair it with `PasswordComplexity` so the reader watches them being met rather than discovering them on submit."}}},argTypes:{error:{control:"boolean"},disabled:{control:"boolean"}}},g=[{name:"Basic",story:{args:{placeholder:"Enter"}},meta:w},{name:"WithField",story:()=>{let r,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(i,{required:!0,children:[t(p,{children:["Password",e(u,{}),e(c,{type:"muted",children:"Forgot password?"})]}),e(y,{placeholder:"Enter"})]}),n[0]=r):r=n[0],r},meta:w},{name:"WithError",story:()=>{let r,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(i,{required:!0,children:[t(p,{children:["Password",e(u,{})]}),e(y,{placeholder:"Enter",error:!0}),e(s,{children:"Password is incorrect"})]}),n[0]=r):r=n[0],r},meta:w},{name:"WithRequirements",story:()=>{let r,n,a,c,s,u,m,w,g,b,S,_,E,R,v,$,N,C,O,M,D,k,P=(0,l.c)(48),[j,x]=(0,o.useState)(""),[I,W]=(0,o.useState)("");P[0]!==j?(r=d.minLength(8)(j),P[0]=j,P[1]=r):r=P[1],P[2]!==r?(n={id:"length",label:"At least 8 characters",met:r},P[2]=r,P[3]=n):n=P[3],P[4]!==j?(a=d.hasUppercase(j),P[4]=j,P[5]=a):a=P[5],P[6]!==a?(c={id:"uppercase",label:"One uppercase letter (A–Z)",met:a},P[6]=a,P[7]=c):c=P[7],P[8]!==j?(s=d.hasLowercase(j),P[8]=j,P[9]=s):s=P[9],P[10]!==s?(u={id:"lowercase",label:"One lowercase letter (a–z)",met:s},P[10]=s,P[11]=u):u=P[11],P[12]!==j?(m=d.hasNumber(j),P[12]=j,P[13]=m):m=P[13],P[14]!==m?(w={id:"number",label:"One number (0–9)",met:m},P[14]=m,P[15]=w):w=P[15],P[16]!==j?(g=d.hasSymbol(j),P[16]=j,P[17]=g):g=P[17],P[18]!==g?(b={id:"symbol",label:"One symbol (e.g. ! ? @ #)",met:g},P[18]=g,P[19]=b):b=P[19],P[20]!==I||P[21]!==j?(S=d.passwordsMatch(j,I),P[20]=I,P[21]=j,P[22]=S):S=P[22],P[23]!==S?(_={id:"match",label:"Both passwords match",met:S},P[23]=S,P[24]=_):_=P[24],P[25]!==n||P[26]!==_||P[27]!==c||P[28]!==u||P[29]!==w||P[30]!==b?(E=[n,c,u,w,b,_],P[25]=n,P[26]=_,P[27]=c,P[28]=u,P[29]=w,P[30]=b,P[31]=E):E=P[31];let A=E;return P[32]===Symbol.for("react.memo_cache_sentinel")?(R=e(p,{children:"New password"}),P[32]=R):R=P[32],P[33]===Symbol.for("react.memo_cache_sentinel")?(v=e=>x(e.target.value),P[33]=v):v=P[33],P[34]!==j?($=t(i,{children:[R,e(y,{placeholder:"New password...",value:j,onChange:v})]}),P[34]=j,P[35]=$):$=P[35],P[36]===Symbol.for("react.memo_cache_sentinel")?(N=e(p,{children:"Confirm password"}),P[36]=N):N=P[36],P[37]===Symbol.for("react.memo_cache_sentinel")?(C=e=>W(e.target.value),P[37]=C):C=P[37],P[38]!==I?(O=t(i,{children:[N,e(y,{placeholder:"Confirm password...",value:I,onChange:C})]}),P[38]=I,P[39]=O):O=P[39],P[40]!==A?(M=e(f,{items:A}),P[40]=A,P[41]=M):M=P[41],P[42]!==O||P[43]!==M?(D=t(h,{gap:6,children:[O,M]}),P[42]=O,P[43]=M,P[44]=D):D=P[44],P[45]!==$||P[46]!==D?(k=t(h,{gap:16,className:"w-[320px]",children:[$,D]}),P[45]=$,P[46]=D,P[47]=k):k=P[47],k},meta:w},{name:"Disabled",story:{args:{placeholder:"Enter",disabled:!0}},meta:w},{name:"Sizes",story:()=>{let r,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(m,{gap:16,align:"start",children:[e(y,{placeholder:"Default",size:"default"}),e(y,{placeholder:"Medium",size:"medium"}),e(y,{placeholder:"Small",size:"small"})]}),n[0]=r):r=n[0],r},meta:w}];function b({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},a="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,l=()=>o.default.createElement(a,n),i={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=l;l=()=>e(t,i)}return o.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},o.default.createElement("h2",{className:"text-sm mb-12"},e.name),o.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(o.default.createElement(window.WallarmDS.Root,null,g.map((e,t)=>o.default.createElement(b,{key:t,entry:e})))),t}}})();