import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Icon-0Ag8a3l4.js";import{n as o,t as s}from"./PasswordField-BxtwGoHI.js";import{n as c,t as l}from"./TokyoUILock-BzXlk9ZM.js";var u,d,f,p,m,h,g,_,v,y,b,x,S,C,w,T,E;t((()=>{u=e(n(),1),o(),c(),i(),d=r(),{expect:f,userEvent:p,within:m,fn:h}=__STORYBOOK_MODULE_TEST__,g={title:`components/PasswordField`,component:s,args:{name:`password`,label:`Password`,placeholder:`Enter a password`,defaultValue:``,dataset:{testid:`field`,foo:`bar`},inputDataset:{testid:`input`,foo:`bar`},onChange:h(),onValueChange:h(),onBlur:h(),onFocus:h(),onClick:h(),onCopy:h(),onKeyDown:h(),onKeyUp:h(),onPaste:h()}},_={play:async({canvasElement:e,step:t,args:n})=>{let r=m(e),i=r.getByTestId(`field`),a=r.getByTestId(`input`);await t(`it should render correct label`,async()=>{f(m(i).getByTestId(`label`)).toHaveTextContent(`Password • Optional`),f(a).toHaveAccessibleName(`Password`)}),await t(`it should call onFocus when the input is focused`,async()=>{a.focus(),f(n.onFocus).toHaveBeenCalled()}),await t(`it should call callback when the value changes`,async()=>{await p.type(a,`secret123`),f(n.onValueChange).toHaveBeenCalledWith(`secret123`),f(n.onChange).toHaveBeenCalled()}),await t(`it should call onBlur when the input is blurred`,async()=>{await p.keyboard(`{tab}`),f(n.onBlur).toHaveBeenCalled()}),await t(`it should render the dataset props`,async()=>{f(i).toHaveAttribute(`data-testid`,`field`),f(i).toHaveAttribute(`data-foo`,`bar`),f(a).toHaveAttribute(`data-testid`,`input`),f(a).toHaveAttribute(`data-foo`,`bar`)}),await t(`it should have password type by default`,async()=>{f(a).toHaveAttribute(`type`,`password`)})}},v={render:function(e){let[t,n]=(0,u.useState)(e.value);return(0,d.jsx)(s,{...e,value:t,onChange:t=>{n(t.target.value),e.onChange?.(t)}})},args:{label:`Controlled PasswordField`,placeholder:`Enter your password...`,value:`secret123`,defaultValue:void 0},play:async({canvas:e,step:t})=>{await t(`it should render the correct initial value`,async()=>{await f(e.getByTestId(`input`)).toHaveValue(`secret123`)}),await t(`it should update the value when the user types`,async()=>{let t=e.getByTestId(`input`);await p.clear(t),await p.type(t,`newpassword`),f(t).toHaveValue(`newpassword`)})}},y={args:{description:`Include letters, numbers and symbols`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`description`);await t(`it should render the description`,async()=>{f(n).toHaveAccessibleDescription(`Include letters, numbers and symbols`),f(r).toHaveTextContent(`Include letters, numbers and symbols`)})}},b={args:{required:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`label`);await t(`it should render correct label`,async()=>{f(n).toHaveAccessibleName(`Password`),f(r).toHaveTextContent(`Password`)}),await t(`it should render required attribute`,async()=>{f(n).toHaveAttribute(`required`)})}},x={args:{hideLabel:!0},play:async({canvas:e,step:t})=>{await t(`it should render correct a11y label`,async()=>{f(e.getByTestId(`input`)).toHaveAccessibleName(`Password`)})}},S={args:{error:`This is an error message`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`error`);await t(`it should render the error message`,async()=>{f(n).toHaveAccessibleErrorMessage(`This is an error message`),f(r).toHaveTextContent(`This is an error message`)})}},C={args:{disabled:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the disabled input`,async()=>{f(n).toHaveAttribute(`disabled`)})}},w={args:{readOnly:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the read only input`,async()=>{f(n).toHaveAttribute(`readonly`)})}},T={parameters:{chromatic:{disableSnapshot:!0}},args:{label:`Password`,placeholder:`e.g.: abc123%pt0!`,description:`Include letters, numbers and symbols`},argTypes:{label:{control:`text`},placeholder:{control:`text`},description:{control:`text`},error:{control:`text`},value:{control:`text`},defaultValue:{control:`text`},inputDataset:{control:`object`},dataset:{control:`object`},id:{control:`text`},required:{control:`boolean`},hideLabel:{control:`boolean`},name:{control:`text`},disabled:{control:`boolean`},readOnly:{control:`boolean`},maxLength:{control:`number`},icon:{options:[`None`,`With Icon`],mapping:{None:void 0,"With Icon":(0,d.jsx)(a,{svg:l})},control:`select`},autoComplete:{control:`select`},hasError:{table:{disable:!0}}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
  play: async ({
    canvasElement,
    step,
    args
  }) => {
    const canvas = within(canvasElement);
    const field = canvas.getByTestId('field');
    const input = canvas.getByTestId('input');
    await step('it should render correct label', async () => {
      const label = within(field).getByTestId('label');
      expect(label).toHaveTextContent('Password • Optional');
      expect(input).toHaveAccessibleName('Password');
    });
    await step('it should call onFocus when the input is focused', async () => {
      input.focus();
      expect(args.onFocus).toHaveBeenCalled();
    });
    await step('it should call callback when the value changes', async () => {
      await userEvent.type(input, 'secret123');
      expect(args.onValueChange).toHaveBeenCalledWith('secret123');
      expect(args.onChange).toHaveBeenCalled();
    });
    await step('it should call onBlur when the input is blurred', async () => {
      await userEvent.keyboard('{tab}');
      expect(args.onBlur).toHaveBeenCalled();
    });
    await step('it should render the dataset props', async () => {
      expect(field).toHaveAttribute('data-testid', 'field');
      expect(field).toHaveAttribute('data-foo', 'bar');
      expect(input).toHaveAttribute('data-testid', 'input');
      expect(input).toHaveAttribute('data-foo', 'bar');
    });
    await step('it should have password type by default', async () => {
      expect(input).toHaveAttribute('type', 'password');
    });
  }
}`,..._.parameters?.docs?.source},description:{story:"An empty field with a `label` and a `placeholder`.",..._.parameters?.docs?.description}}},v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
  render: function ControlledPasswordField(args) {
    const [value, setValue] = useState(args.value);
    return <PasswordField {...args} value={value} onChange={e => {
      setValue(e.target.value);
      args.onChange?.(e);
    }} />;
  },
  args: {
    label: 'Controlled PasswordField',
    placeholder: 'Enter your password...',
    value: 'secret123',
    defaultValue: undefined
  },
  play: async ({
    canvas,
    step
  }) => {
    await step('it should render the correct initial value', async () => {
      const input = canvas.getByTestId('input');
      await expect(input).toHaveValue('secret123');
    });
    await step('it should update the value when the user types', async () => {
      const input = canvas.getByTestId('input');
      await userEvent.clear(input);
      await userEvent.type(input, 'newpassword');
      expect(input).toHaveValue('newpassword');
    });
  }
}`,...v.parameters?.docs?.source},description:{story:`A controlled component where the value is managed by React state.`,...v.parameters?.docs?.description}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
  args: {
    description: 'Include letters, numbers and symbols'
  },
  play: async ({
    canvas,
    step
  }) => {
    const input = canvas.getByTestId('input');
    const description = canvas.getByTestId('description');
    await step('it should render the description', async () => {
      expect(input).toHaveAccessibleDescription('Include letters, numbers and symbols');
      expect(description).toHaveTextContent('Include letters, numbers and symbols');
    });
  }
}`,...y.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
  args: {
    required: true
  },
  play: async ({
    canvas,
    step
  }) => {
    const input = canvas.getByTestId('input');
    const label = canvas.getByTestId('label');
    await step('it should render correct label', async () => {
      expect(input).toHaveAccessibleName('Password');
      expect(label).toHaveTextContent('Password');
    });
    await step('it should render required attribute', async () => {
      expect(input).toHaveAttribute('required');
    });
  }
}`,...b.parameters?.docs?.source}}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
  args: {
    hideLabel: true
  },
  play: async ({
    canvas,
    step
  }) => {
    await step('it should render correct a11y label', async () => {
      const input = canvas.getByTestId('input');
      expect(input).toHaveAccessibleName('Password');
    });
  }
}`,...x.parameters?.docs?.source}}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
  args: {
    error: 'This is an error message'
  },
  play: async ({
    canvas,
    step
  }) => {
    const input = canvas.getByTestId('input');
    const error = canvas.getByTestId('error');
    await step('it should render the error message', async () => {
      expect(input).toHaveAccessibleErrorMessage('This is an error message');
      expect(error).toHaveTextContent('This is an error message');
    });
  }
}`,...S.parameters?.docs?.source}}},C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{
  args: {
    disabled: true
  },
  play: async ({
    canvas,
    step
  }) => {
    const input = canvas.getByTestId('input');
    await step('it should render the disabled input', async () => {
      expect(input).toHaveAttribute('disabled');
    });
  }
}`,...C.parameters?.docs?.source}}},w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
  args: {
    readOnly: true
  },
  play: async ({
    canvas,
    step
  }) => {
    const input = canvas.getByTestId('input');
    await step('it should render the read only input', async () => {
      expect(input).toHaveAttribute('readonly');
    });
  }
}`,...w.parameters?.docs?.source}}},T.parameters={...T.parameters,docs:{...T.parameters?.docs,source:{originalSource:`{
  parameters: {
    chromatic: {
      disableSnapshot: true
    }
  },
  args: {
    label: 'Password',
    placeholder: 'e.g.: abc123%pt0!',
    description: 'Include letters, numbers and symbols'
  },
  argTypes: {
    label: {
      control: 'text'
    },
    placeholder: {
      control: 'text'
    },
    description: {
      control: 'text'
    },
    error: {
      control: 'text'
    },
    value: {
      control: 'text'
    },
    defaultValue: {
      control: 'text'
    },
    inputDataset: {
      control: 'object'
    },
    dataset: {
      control: 'object'
    },
    id: {
      control: 'text'
    },
    required: {
      control: 'boolean'
    },
    hideLabel: {
      control: 'boolean'
    },
    name: {
      control: 'text'
    },
    disabled: {
      control: 'boolean'
    },
    readOnly: {
      control: 'boolean'
    },
    maxLength: {
      control: 'number'
    },
    icon: {
      options: ['None', 'With Icon'],
      mapping: {
        None: undefined,
        'With Icon': <Icon svg={TokyoUILock} />
      },
      control: 'select'
    },
    autoComplete: {
      control: 'select'
    },
    // Disable deprecated props
    hasError: {
      table: {
        disable: true
      }
    }
  }
}`,...T.parameters?.docs?.source}}},E=[`Basic`,`Controlled`,`WithDescription`,`Required`,`WithHiddenLabel`,`HasError`,`Disabled`,`ReadOnly`,`Playground`]}))();export{_ as Basic,v as Controlled,C as Disabled,S as HasError,T as Playground,w as ReadOnly,b as Required,y as WithDescription,x as WithHiddenLabel,E as __namedExportsOrder,g as default};