import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{St as o,_ as s}from"./iframe-D-oZzXNK.js";import{n as c,t as l}from"./dist-Cc1j9Pjk.js";import{i as u,r as d}from"./lib-8ue2PVWI.js";var f,p,m,h,g,_,v=t((()=>{f=`container__g46MP`,p=`label__dGrlk`,m=`required__w9EwB`,h=`description__AST5n`,g=`error__uRqiU`,_={container:f,label:p,required:m,description:h,error:g}}));function y({id:e,error:t,description:n,hasError:r}){let i={};return r&&(i[`aria-invalid`]=!0),t&&(i[`aria-invalid`]=!0,i[`aria-errormessage`]=`${e}-error`),n&&(i[`aria-describedby`]=`${e}-description`),i}var b,x,S,C=t((()=>{s(),b=e(n(),1),v(),d(),i(),l(),x=a(),S=({id:e,label:t,hideLabel:n,description:i,error:a,hasError:s,children:l,required:d,dataset:f,onClick:p,preplyDsComponent:m=c.FormControl,useLegacyRequiredLabel:h=!1})=>{let g=(0,b.useId)(),v=e||g,S=y({id:v,error:a,description:i,hasError:s}),C=r(f,{preplyDsComponent:m});return(0,x.jsxs)(`div`,{className:_.container,...C,onClick:p,children:[(0,x.jsxs)(`label`,{htmlFor:v,className:_.label,"data-hidden":n||!t,"data-testid":`label`,children:[t,!!h&&d&&(0,x.jsxs)(`span`,{"aria-hidden":!0,className:_.required,children:[` • `,(0,x.jsx)(u,{id:`preply-ds.fieldLabel.required`,defaultMessage:`Required`,description:`Form field required label`})]}),!h&&!d&&(0,x.jsxs)(`span`,{"aria-hidden":!0,className:_.required,children:[` • `,(0,x.jsx)(u,{id:`preply-ds.fieldLabel.optional`,defaultMessage:`Optional`,description:`Form field optional label`})]})]}),(0,x.jsx)(o,{id:v,required:d,...S,children:l}),a?(0,x.jsx)(`p`,{className:_.error,role:`alert`,id:`${v}-error`,"data-testid":`error`,children:a}):i?(0,x.jsx)(`p`,{className:_.description,id:`${v}-description`,"data-testid":`description`,children:i}):null]})};try{S.displayName=`FormControl`,S.__docgenInfo={description:"FormControl component provides a consistent layout and accessibility\nfor the form fields. You can use it to create custom fields not supported\nby the DS yet.\n\nNote that FormControl will implicitly provide some props to the child component:\n\n- `id` forwarded from FormControl props or will be generated automatically for accessibility purposes;\n- `aria-invalid` and `aria-errormessage` when `error` is provided;\n- `aria-describedby` when `description` is provided;\n- `required` when FormControl's `required` is true;",displayName:`FormControl`,props:{id:{defaultValue:null,description:`The id to be passed to the input element.
If not provided, will be generated for accessibility purposes.`,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},label:{defaultValue:null,description:"The field label. This is needed for accessibility purposes, but can be\nhidden using the `hideLabel` prop.",name:`label`,required:!0,type:{name:`enum`,value:[{value:`undefined`},{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},hideLabel:{defaultValue:null,description:"Use this to hide the `label` visually, but keep it in the accessibility\ntree.",name:`hideLabel`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},description:{defaultValue:null,description:`Additional descriptive text that appears below the input field
to provide more context or instructions to the user.`,name:`description`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},error:{defaultValue:null,description:`Error message to display when the field has an invalid value.`,name:`error`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to explicitly describe the error to users",name:`hasError`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},required:{defaultValue:null,description:`Indicates if the field is required. When false, adds a "Optional"
indicator next to the label.`,name:`required`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler<HTMLDivElement>`}]}},preplyDsComponent:{defaultValue:{value:`webComponentNames.FormControl`},description:`@deprecated The attribute is meant for internal usage only
@ignore`,name:`preplyDsComponent`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},useLegacyRequiredLabel:{defaultValue:{value:`false`},description:`When true, adds a "Required" indicator next to the label for the required fields.
When false, adds a "Optional" indicator next to the label for the optional fields instead.
@deprecated This is a temporary solution for gradual migration to the "Optional" label.`,name:`useLegacyRequiredLabel`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}}}}}catch{}}));export{C as n,S as t};