import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{C as r,Q as i,Y as a,et as o,t as s,w as c}from"./dist-DtfJeYQK.js";import{t as l}from"./jsx-runtime-C2wGStra.js";import{n as u,t as d}from"./Icon-0Ag8a3l4.js";import{n as f,t as p}from"./Text-DO3xXyuu.js";import{r as m,t as h}from"./styled-components.browser.esm-BF2I7YPU.js";import{n as g,t as _}from"./FormControl-De3NG2dC.js";import{n as v,t as y}from"./TokyoUIUpload-CUWW9S7c.js";var b,x,S,C,w,T,E,D;t((()=>{g(),m(),b=e(n(),1),u(),v(),s(),c(),f(),x=l(),S={title:`Components/FormControl`,component:_,parameters:{layout:`padded`}},C=h.input.attrs({type:`file`})`
    visibility: hidden;
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
`,w=h.label`
    background: ${r(a.background.secondary)};
    padding: ${r(o[24])} ${r(o[16])};
    border-radius: ${r(i[8])};
    cursor: pointer;

    &:has(input[aria-invalid='true']) {
        background: ${r(a.background.criticalLight)};
    }
`,T=h.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
`,E=()=>(0,x.jsx)(_,{label:`Upload photo`,description:`Your photo will be displayed in your profile`,children:(0,x.jsx)(e=>{let[t,n]=(0,b.useState)(`Select file to upload`),r=e[`aria-invalid`]?`critical`:`secondary`,i=t=>{n(t.target.files?.[0]?.name||`Select file to upload`),e.onChange?.(t)};return(0,x.jsxs)(w,{children:[(0,x.jsx)(C,{...e,onChange:i}),(0,x.jsxs)(T,{children:[(0,x.jsx)(d,{size:`32`,svg:y,accent:r}),(0,x.jsx)(p,{variant:`default-regular`,accent:r,children:t})]})]})},{})}),E.parameters={...E.parameters,docs:{...E.parameters?.docs,source:{originalSource:`() => {
  const FileInput = (props: HTMLAttributes<HTMLInputElement>) => {
    const [text, setText] = useState('Select file to upload');
    const accent = props['aria-invalid'] ? 'critical' : 'secondary';
    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
      setText(e.target.files?.[0]?.name || 'Select file to upload');
      props.onChange?.(e);
    };
    return <Label>
                <Input {...props} onChange={handleChange} />
                <Inner>
                    <Icon size="32" svg={TokyoUIUpload} accent={accent} />
                    <Text variant="default-regular" accent={accent}>
                        {text}
                    </Text>
                </Inner>
            </Label>;
  };
  return <FormControl label="Upload photo" description="Your photo will be displayed in your profile">
            <FileInput />
        </FormControl>;
}`,...E.parameters?.docs?.source},description:{story:`This example demonstrates how to use the FormControl to create a custom input field.`,...E.parameters?.docs?.description}}},D=[`CustomFormField`]}))();export{E as CustomFormField,D as __namedExportsOrder,S as default};