@contentful/f36-forms
Advanced tools
Comparing version 4.58.4 to 4.59.0
@@ -1,2 +0,2 @@ | ||
import V, { createContext, forwardRef, useRef, useEffect, useCallback, useState, useContext } from 'react'; | ||
import _, { createContext, forwardRef, useRef, useEffect, useCallback, useState, useContext } from 'react'; | ||
import { Text } from '@contentful/f36-typography'; | ||
@@ -9,6 +9,6 @@ import { useDensity } from '@contentful/f36-utils'; | ||
var Po=Object.defineProperty,ko=Object.defineProperties;var Io=Object.getOwnPropertyDescriptors;var Q=Object.getOwnPropertySymbols;var Ie=Object.prototype.hasOwnProperty,Te=Object.prototype.propertyIsEnumerable;var ke=(e,o,t)=>o in e?Po(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,s=(e,o)=>{for(var t in o||(o={}))Ie.call(o,t)&&ke(e,t,o[t]);if(Q)for(var t of Q(o))Te.call(o,t)&&ke(e,t,o[t]);return e},m=(e,o)=>ko(e,Io(o));var c=(e,o)=>{var t={};for(var r in e)Ie.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&Q)for(var r of Q(e))o.indexOf(r)<0&&Te.call(e,r)&&(t[r]=e[r]);return t};var Ee=()=>{},ae=createContext(void 0),So=()=>useContext(ae),P=e=>{var t,r,i,n,p;let o=So();return o?{isDisabled:(t=e.isDisabled)!=null?t:o.isDisabled,isInvalid:(r=e.isInvalid)!=null?r:o.isInvalid,isReadOnly:(i=e.isReadOnly)!=null?i:o.isReadOnly,isRequired:(n=e.isRequired)!=null?n:o.isRequired,id:(p=e.id)!=null?p:o.id,maxLength:o.maxLength,inputValue:o.inputValue,setMaxLength:o.setMaxLength||Ee,setInputValue:o.setInputValue||Ee}:e};var N=V.forwardRef((r,t)=>{var i=r,{testId:e="cf-ui-help-text"}=i,o=c(i,["testId"]);let{id:n}=P({}),p=useDensity();return V.createElement(Text,m(s({as:"p",fontColor:"gray500",fontSize:p==="high"?"fontSizeMHigh":"fontSizeM",lineHeight:p==="high"?"lineHeightMHigh":"lineHeightM",testId:e,id:`${n}-helptext`,marginTop:"spacingXs"},o),{ref:t}))});N.displayName="HelpText";var $=forwardRef((i,r)=>{var n=i,{children:e,testId:o="cf-ui-validation-message"}=n,t=c(n,["children","testId"]);let{id:p}=P({}),l=useDensity();return V.createElement(Flex,m(s({marginTop:"spacing2Xs"},t),{ref:r,testId:o,alignItems:"center",id:p?`${p}-validation`:void 0,"aria-live":"assertive"}),V.createElement(Flex,{marginRight:l==="high"?"spacing2Xs":"spacingXs"},V.createElement(ErrorCircleOutlineIcon,{size:l==="high"?"tiny":"small",variant:"negative","aria-hidden":"true"})),V.createElement(Text,{as:"p",fontColor:"red600",fontSize:l==="high"?"fontSizeMHigh":"fontSizeM",lineHeight:l==="high"?"lineHeightMHigh":"lineHeightM"},e))});$.displayName="ValidationMessage";var ce=({isDisabled:e})=>({alignItems:"center",background:e?a.gray300:a.colorWhite,border:`2px solid ${a.gray300}`,boxSizing:"border-box",display:"inline-flex",height:a.spacingM,justifyContent:"center",width:a.spacingM}),wo=({isDisabled:e})=>{let o=m(s({},ce({isDisabled:e})),{backgroundColor:e?a.gray300:a.colorWhite,borderRadius:a.borderRadiusSmall,"& svg":{fill:e?a.gray300:a.colorWhite},"input:indeterminate + &, input:checked + &":{backgroundColor:e?a.gray300:a.blue600,borderColor:e?a.gray300:a.blue600,"& svg":{fill:e?a.gray600:a.colorWhite}}});return css(o)},vo=({isDisabled:e})=>{let o={content:'""',borderRadius:"50%",backgroundColor:e?a.gray300:a.colorWhite,width:a.borderRadiusMedium,height:a.borderRadiusMedium},t=m(s({},ce({isDisabled:e})),{backgroundColor:e?a.gray300:a.colorWhite,borderRadius:"50%","&:before":s({},o),"input:checked + &":{backgroundColor:e?a.gray300:a.blue600,borderColor:e?a.gray300:a.blue600,"&:before":{backgroundColor:e?a.gray600:a.colorWhite}}});return css(t)},Go=({isDisabled:e,size:o})=>{let t=o==="small"?{height:a.spacingM,width:a.spacingXl,"&:before":{height:a.spacingS,width:a.spacingS},"input:checked + &:before":{transform:`translateX(${a.spacingM})`}}:{height:"20px",width:"40px","&:before":{height:a.spacingM,width:a.spacingM},"input:checked + &:before":{transform:"translateX(20px)"}},r=m(s({},ce({isDisabled:e})),{background:a.gray600,borderColor:a.gray600,borderRadius:a.borderRadiusSmall,justifyContent:"space-around",position:"relative",flexShrink:0,"&:before":{background:a.colorWhite,borderRadius:`calc(${a.borderRadiusSmall}/2)`,content:'""',left:0,position:"absolute",transition:`transform ${a.transitionEasingDefault} ${a.transitionDurationDefault}`},"input:checked + &":{background:a.blue600,borderColor:a.blue600}}),i={"&, input:checked + &":{background:a.gray200,borderColor:a.gray200},"&:before":{background:a.gray400},"& svg":{fill:a.gray400}};return css([r,t,e&&i])},Oo=e=>{let{isDisabled:o,size:t}=e;return {radio:vo({isDisabled:o}),checkbox:wo({isDisabled:o}),switch:Go({isDisabled:o,size:t})}},Me=Oo;var Le=e=>{let{type:o,isIndeterminate:t,isDisabled:r,size:i="medium"}=e,n=Me({isDisabled:r,size:i});return o==="switch"?V.createElement("span",{className:n.switch},V.createElement(DoneIcon,{size:"tiny",variant:"white"}),V.createElement(CloseIcon,{size:"tiny",variant:"white"})):V.createElement("span",{className:n[o]},o==="checkbox"&&(t?V.createElement(MinusIcon,{size:"tiny",variant:"white"}):V.createElement(DoneIcon,{size:"tiny",variant:"white"})))};var Be=e=>e==="small"?{height:a.spacingM,width:a.spacingXl}:{height:"20px",width:"40px"},_o=({size:e,type:o,density:t})=>{let r=a.spacingM;return o==="switch"&&(r=Be(e).width),{marginLeft:`calc(${r} + ${a.spacingXs})`,marginTop:0,fontSize:t==="high"?a.fontSizeMHigh:a.fontSizeM,lineHeight:t==="high"?a.lineHeightMHigh:a.lineHeightM}},Vo=({isDisabled:e,type:o,size:t,density:r})=>({wrapper:css({alignItems:"center",display:"inline-flex",position:"relative",margin:"0",columnGap:a.spacingXs}),input:css([{cursor:e?"not-allowed":"pointer",height:a.spacingM,margin:0,opacity:0,position:"absolute",width:a.spacingM,zIndex:a.zIndexDefault,"+ span":{minWidth:a.spacingM},"&:focus":{outline:"none","& + span":{boxShadow:a.glowPrimary}},"&:focus:not(:focus-visible) + span":{boxShadow:"unset"},"&:focus-visible + span":{boxShadow:a.glowPrimary}},o==="switch"&&Be(t)]),helpText:css(_o({size:t,type:o,density:r}))}),He=Vo;function we(e,o){let Ce=e,{isChecked:t=void 0,onChange:r,onFocus:i,onBlur:n,onKeyDown:p,type:l="checkbox",value:f,isDisabled:u,isIndeterminate:y,isInvalid:b,isRequired:x=!1,id:C,willBlurOnEsc:T=!0,testId:k="cf-ui-base-checkbox",className:h="",defaultChecked:E=void 0,name:L,inputProps:I={},children:M,"aria-label":G,size:B="medium",helpText:R}=Ce,S=c(Ce,["isChecked","onChange","onFocus","onBlur","onKeyDown","type","value","isDisabled","isIndeterminate","isInvalid","isRequired","id","willBlurOnEsc","testId","className","defaultChecked","name","inputProps","children","aria-label","size","helpText"]),w=useDensity(),O=useRef(null),v=o||O,{id:se}=P({});useEffect(()=>{v.current&&(v.current.indeterminate=y);},[y,v]);let W=He({isDisabled:u,type:l,size:B,density:w}),pe=useCallback(z=>{z.persist(),i&&i(z);},[i]),Z=useCallback(z=>{z.persist(),n&&n(z);},[n]),J=useCallback(z=>{var Pe;z.persist(),T&&z.key==="Escape"&&((Pe=v==null?void 0:v.current)==null||Pe.blur()),p&&p(z);},[T,p,v]),H=typeof t!==void 0?t:E,be=C?`${C}-helptext`:void 0,Co=b?`${se}-validation`:R?be:void 0;return V.createElement(Flex,{alignItems:"flex-start",flexDirection:"column",className:h},V.createElement(Text,s({as:"label",fontColor:"gray900",fontWeight:"fontWeightMedium",fontSize:w==="high"?"fontSizeMHigh":"fontSizeM",lineHeight:w==="high"?"lineHeightMHigh":"lineHeightM",className:W.wrapper,htmlFor:C,testId:k},S),V.createElement("input",m(s({},I),{"aria-label":G,checked:t,defaultChecked:E,className:W.input,type:l==="switch"?"checkbox":l,onChange:r,onFocus:pe,onBlur:Z,onKeyDown:J,value:f,disabled:u,role:l,"aria-checked":y?"mixed":H,ref:v,required:x,"aria-required":x?"true":void 0,"aria-invalid":b?"true":void 0,"aria-describedby":Co,id:C,name:L})),V.createElement(Le,{type:l,isDisabled:u,isIndeterminate:y,size:B}),M),R&&V.createElement(N,{id:be,className:W.helpText},R))}we.displayName="BaseCheckbox";var _=V.forwardRef(we);var ue=createContext(void 0),jo=()=>useContext(ue),ee=e=>{var p,l,f;let o=jo();if(!o)return e;let t,r;return o.type==="checkbox"&&(t=o.value===void 0||(p=o.value)==null?void 0:p.includes(e.value),r=t!==void 0||(l=o.defaultValue)==null?void 0:l.includes(e.value)),o.type==="radio"&&(t=o.value===void 0?void 0:o.value===e.value,r=t!==void 0?void 0:o.defaultValue===e.value),{defaultChecked:r,isChecked:t,onBlur:u=>{e.onBlur&&e.onBlur(u),o.onBlur&&o.onBlur(u);},onChange:u=>{e.onChange&&e.onChange(u),o.onChange&&o.onChange(u);},name:(f=o.name)!=null?f:e.name,value:e.value}};var Zo=(e,o)=>{let R=e,{testId:t="cf-ui-checkbox",id:r,isDisabled:i,isRequired:n,isInvalid:p,children:l,onBlur:f,onChange:u,defaultChecked:y,isChecked:b,value:x,name:C}=R,T=c(R,["testId","id","isDisabled","isRequired","isInvalid","children","onBlur","onChange","defaultChecked","isChecked","value","name"]),k=useId(r,"checkbox"),h=ee({onBlur:f,onChange:u,value:x,defaultChecked:y,isChecked:b,name:C}),S=P({id:k,isDisabled:i,isInvalid:p,isRequired:n}),B=c(S,["inputValue","setInputValue","maxLength","setMaxLength","isReadOnly"]);return V.createElement(_,m(s(s(s({},B),h),T),{type:"checkbox",testId:t,ref:o}),l)},Ge=V.forwardRef(Zo);var Qo=(e,o)=>{let p=e,{children:t,className:r,testId:i="cf-ui-base-checkbox-group"}=p,n=c(p,["children","className","testId"]);return V.createElement(ue.Provider,{value:n},V.createElement(Stack,{ref:o,testId:i,className:r,flexDirection:"column",alignItems:"flex-start",spacing:"spacingXs"},t))},oe=V.forwardRef(Qo);var Yo=(e,o)=>{let n=e,{children:t,testId:r="cf-ui-checkbox-group"}=n,i=c(n,["children","testId"]);return V.createElement(oe,s({ref:o,testId:r,type:"checkbox"},i),t)},ze=V.forwardRef(Yo);var Ne=Ge;Ne.Group=ze;var tt="div";function Ve(b,y){var x=b,{as:e,isInvalid:o,isRequired:t,isDisabled:r,isReadOnly:i,children:n,marginBottom:p="spacingL",id:l,testId:f="cf-ui-form-control"}=x,u=c(x,["as","isInvalid","isRequired","isDisabled","isReadOnly","children","marginBottom","id","testId"]);let C=useId(l,"field-"),[T,k]=useState(""),[h,E]=useState(0),L=e==="fieldset"?void 0:"group",I=e||tt,M={id:C,isRequired:t,isDisabled:r,isInvalid:o,isReadOnly:i,inputValue:T,setInputValue:k,maxLength:h,setMaxLength:E};return V.createElement(ae.Provider,{value:M},V.createElement(Box,s({as:I,ref:y,role:L,testId:f,marginBottom:p},u),n))}Ve.displayName="FormControl";var De=V.forwardRef(Ve);function We(){return {root:css({display:"inline-block",fontWeight:a.fontWeightMedium}),indicator:css({color:a.gray500,fontWeight:a.fontWeightNormal,marginLeft:a.spacing2Xs})}}var pt="label";function Xe(f,l){var u=f,{as:e,children:o,className:t,isRequired:r,requiredText:i="required",testId:n="cf-ui-form-label"}=u,p=c(u,["as","children","className","isRequired","requiredText","testId"]);let y=useDensity(),b=We(),x=P({isRequired:r}),C=x.id?x.id+"-label":void 0,T=e!=="legend"?{htmlFor:p.htmlFor||x.id}:{};return V.createElement(Text,m(s(m(s({as:e||pt,marginBottom:"spacingXs"},p),{fontColor:"gray900",id:C}),T),{className:cx(b.root,t),ref:l,testId:n,fontSize:y==="high"?"fontSizeMHigh":"fontSizeM",lineHeight:y==="high"?"lineHeightMHigh":"lineHeightM"}),o,x.isRequired&&V.createElement("span",{className:b.indicator},"(",i,")"))}Xe.displayName="FormLabel";var re=forwardRef(Xe);function qe(){return {root:css({flexShrink:0,paddingLeft:a.spacingM,textAlign:"right"})}}var X=forwardRef((i,r)=>{var n=i,{testId:e="cf-ui-counter",className:o}=n,t=c(n,["testId","className"]);let{maxLength:p,inputValue:l}=P({}),f=qe();return !!p&&V.createElement(Text,m(s({as:"p",fontColor:"gray700",fontSize:"fontSizeM",testId:e,marginTop:"spacingXs"},t),{className:cx(f.root,o),ref:r}),l.length," / ",p)});X.displayName="Counter";var q=De;q.Label=re;q.ValidationMessage=$;q.HelpText=N;q.Counter=X;var xt=(e,o)=>{let R=e,{testId:t="cf-ui-radio-button",id:r,isDisabled:i,isInvalid:n,isRequired:p,children:l,onBlur:f,onChange:u,defaultChecked:y,isChecked:b,value:x,name:C}=R,T=c(R,["testId","id","isDisabled","isInvalid","isRequired","children","onBlur","onChange","defaultChecked","isChecked","value","name"]),k=useId(r,"radio"),h=ee({onBlur:f,onChange:u,value:x,defaultChecked:y,isChecked:b,name:C}),S=P({id:k,isDisabled:i,isInvalid:n,isRequired:p}),B=c(S,["inputValue","setInputValue","maxLength","setMaxLength","isReadOnly"]);return V.createElement(_,m(s(s(s({},B),T),h),{type:"radio",testId:t,ref:o}),l)},je=V.forwardRef(xt);var ht=(e,o)=>{let n=e,{children:t,testId:r="cf-ui-radio-group"}=n,i=c(n,["children","testId"]);return V.createElement(oe,s({ref:o,testId:r,type:"radio"},i),t)},Ze=V.forwardRef(ht);var Je=je;Je.Group=Ze;var gt=({size:e})=>e==="small"?{padding:`${a.spacing2Xs} ${a.spacingXs}`,height:"32px",maxHeight:"32px"}:{height:"40px",maxHeight:"40px"},Qe=({isDisabled:e,isInvalid:o,zIndexBase:t=a.zIndexDefault})=>e||o?t+1:t,yt=({as:e,isDisabled:o,isInvalid:t,size:r,resize:i})=>({rootComponentWithIcon:css({position:"relative",display:"flex",width:"100%",zIndex:Qe({isDisabled:o,isInvalid:t})}),input:css(m(s({outline:"none",boxShadow:a.insetBoxShadowDefault,boxSizing:"border-box",backgroundColor:o?a.gray100:a.colorWhite,border:`1px solid ${t?a.red600:a.gray300}`,borderRadius:a.borderRadiusMedium,color:a.gray700,fontFamily:a.fontStackPrimary,fontSize:a.fontSizeM,lineHeight:a.lineHeightM,padding:`10px ${a.spacingS}`,margin:0,cursor:o?"not-allowed":"auto",width:"100%",zIndex:Qe({isDisabled:o,isInvalid:t})},e==="textarea"?{resize:i}:gt({size:r})),{"&::placeholder":{color:a.gray500},"&:active, &:active:hover":{borderColor:t?a.red600:o?a.gray300:a.blue600,boxShadow:t?a.glowNegative:o?"none":a.glowPrimary},"&:focus":{borderColor:t?a.red600:o?a.gray300:a.blue600,boxShadow:t?a.glowNegative:o?"none":a.glowPrimary}})),inputWithIcon:css({paddingLeft:r==="small"?a.spacingXl:"38px"}),iconPlaceholder:css({position:"absolute",pointerEvents:"none",top:0,bottom:0,left:r==="small"?a.spacingXs:a.spacingS,display:"flex",alignItems:"center",zIndex:a.zIndexDefault})}),Ye=yt;var Ct="input";function oo(e,o){let J=e,{as:t=Ct,className:r,isDisabled:i,isReadOnly:n,isRequired:p,isInvalid:l,id:f,name:u,onBlur:y,onChange:b,onFocus:x,onKeyDown:C,testId:T="cf-ui-base-input",type:k="text",value:h=void 0,placeholder:E,willBlurOnEsc:L=!0,style:I,icon:M,defaultValue:G,size:B="medium",resize:R="vertical"}=J,S=c(J,["as","className","isDisabled","isReadOnly","isRequired","isInvalid","id","name","onBlur","onChange","onFocus","onKeyDown","testId","type","value","placeholder","willBlurOnEsc","style","icon","defaultValue","size","resize"]),w=Ye({as:t,isDisabled:i,isInvalid:l,size:B,resize:R}),O=useCallback(H=>{H.persist(),x&&x(H);},[x]),v=useCallback(H=>{H.persist(),!(i||n)&&b&&b(H);},[b,i,n]),se=useCallback(H=>{H.persist(),C&&C(H),H.nativeEvent.code==="Escape"&&L&&H.currentTarget.blur();},[L,C]),W=M&&V.createElement(Box,{as:"span",className:w.iconPlaceholder},V.cloneElement(M,{size:B==="small"?"tiny":"small",variant:"muted","aria-hidden":!0})),pe=t,Z=H=>V.createElement(pe,m(s({},S),{value:h,defaultValue:G,"data-test-id":T,style:I,placeholder:E,className:cx(w.input,H,r),name:u,type:k,ref:o,id:f,readOnly:n,"aria-readonly":n?"true":void 0,"aria-required":p?"true":void 0,"aria-invalid":l?"true":void 0,"aria-describedby":f?`${f}-${l?"validation":"helptext"}`:void 0,disabled:i,required:p,onChange:v,onBlur:y,onKeyDown:se,onFocus:O,size:B}));return M?V.createElement(Box,{as:"div",className:w.rootComponentWithIcon},Z(w.inputWithIcon),W):Z()}oo.displayName="BaseInput";var j=V.forwardRef(oo);var It=(k,T)=>{var h=k,{className:e,testId:o="cf-ui-text-input",id:t,value:r,defaultValue:i,onChange:n,onFocus:p,isInvalid:l,isDisabled:f,isRequired:u,isReadOnly:y,size:b="medium",maxLength:x}=h,C=c(h,["className","testId","id","value","defaultValue","onChange","onFocus","isInvalid","isDisabled","isRequired","isReadOnly","size","maxLength"]);let w=P({id:t,isInvalid:l,isDisabled:f,isRequired:u,isReadOnly:y}),{setMaxLength:E,maxLength:L,setInputValue:I,inputValue:M}=w,G=c(w,["setMaxLength","maxLength","setInputValue","inputValue"]);useEffect(()=>{var O;x!==void 0&&typeof E=="function"&&(E(x),I((O=r!=null?r:i)!=null?O:""));},[x,E,I,i,r]);let B=O=>{typeof I=="function"&&I(O.target.value),n==null||n(O);},R=useRef(null),S=T||R;return V.createElement(j,m(s(s({type:"text"},C),G),{testId:o,ref:S,onChange:x?B:n,onFocus:p,as:"input",className:e,value:r,defaultValue:i,size:b,maxLength:x}))},ro=V.forwardRef(It);var Et=({spacing:e})=>{if(e==="none")return css({position:"relative","& button, & input":{borderRadius:"0 !important"},"& > *":{marginRight:"-1px !important","&:not(:focus), & button:not(:focus)":{boxShadow:"none !important"},"&:first-child, &:first-child > input, &:first-child button":{borderBottomLeftRadius:`${a.borderRadiusMedium} !important`,borderTopLeftRadius:`${a.borderRadiusMedium} !important`},"&:last-child, &:last-child > input, &:last-child button":{borderBottomRightRadius:`${a.borderRadiusMedium} !important`,borderTopRightRadius:`${a.borderRadiusMedium} !important`,marginRight:"0 !important"},"&:focus, &:focus-within":{zIndex:a.zIndexDefault+1}}})},no=({spacing:e})=>({inputGroup:Et({spacing:e})});var Mt=(e,o)=>{let l=e,{children:t,className:r,spacing:i="none"}=l,n=c(l,["children","className","spacing"]),p=no({spacing:i});return V.createElement(Stack,m(s({},n),{spacing:i,ref:o,fullWidth:!0,className:cx(p.inputGroup,r)}),t)},so=V.forwardRef(Mt);var po=ro;po.Group=so;var Ft=(e,o)=>{let k=e,{testId:t="cf-ui-switch",id:r,isDisabled:i,isInvalid:n,isRequired:p,children:l}=k,f=c(k,["testId","id","isDisabled","isInvalid","isRequired","children"]),h=P({id:r,isDisabled:i,isInvalid:n,isRequired:p}),T=c(h,["inputValue","setInputValue","maxLength","setMaxLength","isReadOnly"]);return V.createElement(_,m(s(s({},T),f),{testId:t,type:"switch",ref:o}),l)},lo=V.forwardRef(Ft);var mo=()=>({error:css({"&:focus":{borderColor:a.red600,boxShadow:a.glowNegative}}),disabled:css({"&:focus":{borderColor:a.gray300,boxShadow:"none"}})});var Ht=(T,C)=>{var k=T,{className:e,isDisabled:o,isInvalid:t,isRequired:r,isReadOnly:i,onChange:n,testId:p="cf-ui-textarea",id:l,resize:f="vertical",maxLength:u,value:y,defaultValue:b}=k,x=c(k,["className","isDisabled","isInvalid","isRequired","isReadOnly","onChange","testId","id","resize","maxLength","value","defaultValue"]);let h=mo(),R=P({id:l,isInvalid:t,isDisabled:o,isRequired:r,isReadOnly:i}),{setMaxLength:E,maxLength:L,setInputValue:I,inputValue:M}=R,G=c(R,["setMaxLength","maxLength","setInputValue","inputValue"]);useEffect(()=>{var S;u!==void 0&&typeof E=="function"&&(E(u),I((S=y!=null?y:b)!=null?S:""));},[b,u,I,E,y]);let B=S=>{typeof I=="function"&&I(S.target.value),n==null||n(S);};return V.createElement(j,m(s(s({},x),G),{defaultValue:b,value:y,testId:p,as:"textarea",ref:C,className:cx(e,{[h.disabled]:o,[h.error]:t}),maxLength:u,resize:f,onChange:u?B:n}))},fo=V.forwardRef(Ht);var ye=r=>{var i=r,{testId:e="cf-ui-select-option",isDisabled:o}=i,t=c(i,["testId","isDisabled"]);return V.createElement("option",m(s({"data-test-id":e},t),{disabled:o}))};function xo({isInvalid:e,isDisabled:o,size:t,density:r}){let i=()=>{switch(!0){case t==="small":return {padding:`${a.spacing2Xs} ${a.spacingL} ${a.spacing2Xs} ${a.spacingXs}`,height:"32px"};case(t==="medium"&&r==="high"):return {padding:`${a.spacing2Xs} ${a.spacingL} ${a.spacing2Xs} ${a.spacingXs}`,height:"32px",fontSize:a.fontSizeMHigh,lineHeight:a.lineHeightMHigh,borderRadius:a.borderRadiusSmall};case(t==="medium"||r==="low"):default:return {padding:`10px ${a.spacingL} 10px ${a.spacingS}`,height:"40px"}}},n=css({width:"100%",display:"block",appearance:"none",backgroundColor:a.colorWhite,color:a.gray700,fontSize:a.fontSizeM,lineHeight:a.lineHeightM,fontFamily:a.fontStackPrimary,borderRadius:a.borderRadiusMedium,boxShadow:a.insetBoxShadowDefault,outline:"none",border:`1px solid ${a.gray300}`,cursor:"pointer",overflow:"hidden",textOverflow:"ellipsis","&::placeholder":{color:a.gray500},"&:focus":{outline:"none",boxShadow:a.glowPrimary,borderColor:a.blue500},"&:-moz-focusring":{color:"transparent",textShadow:"0 0 0 #000"},"&::-ms-expand":{display:"none"}}),p=css({backgroundColor:a.gray100,cursor:"not-allowed",color:a.gray600,"&:focus, &:active":{borderColor:a.gray300}}),l=css({borderColor:o?a.red300:a.red600,"&:focus":{borderColor:a.red600,boxShadow:a.glowNegative}});return {wrapper:css({position:"relative",display:"block",width:"auto"}),select:css([n,i(),o&&p,e&&l]),icon:css({position:"absolute",right:a.spacingXs,top:"50%",marginTop:"-8px",pointerEvents:"none"})}}var Nt=(T,C)=>{var k=T,{id:e,children:o,className:t,isInvalid:r,isDisabled:i,isRequired:n,testId:p="cf-ui-select",willBlurOnEsc:l=!0,onKeyDown:f,size:u="medium",value:y=void 0,defaultValue:b=void 0}=k,x=c(k,["id","children","className","isInvalid","isDisabled","isRequired","testId","willBlurOnEsc","onKeyDown","size","value","defaultValue"]);let h=P({isDisabled:i,isInvalid:r,isRequired:n,id:e}),E=useDensity(),L=xo({isDisabled:h.isDisabled,isInvalid:h.isInvalid,size:u,density:E}),I=useCallback(M=>{M.nativeEvent.code==="Escape"&&l&&M.currentTarget.blur(),f&&f(M);},[f,l]);return V.createElement("div",{className:cx(L.wrapper,t)},V.createElement("select",m(s({},x),{id:h.id,"data-test-id":p,className:L.select,onKeyDown:I,required:h.isRequired,"aria-required":h.isRequired?"true":void 0,"aria-invalid":h.isInvalid?!0:void 0,"aria-describedby":h.id?`${h.id}-${h.isInvalid?"validation":"helptext"}`:void 0,disabled:h.isDisabled,defaultValue:b,value:y,ref:C}),o),V.createElement(ChevronDownIcon,{className:L.icon,variant:"muted"}))},ho=V.forwardRef(Nt);var go=ho;go.Option=ye;function yo(n,i){var p=n,{children:e,onSubmit:o,testId:t="cf-ui-form-label"}=p,r=c(p,["children","onSubmit","testId"]);let l=useCallback(f=>{f.preventDefault(),o&&o(f);},[o]);return V.createElement("form",s({ref:i,"data-test-id":t,onSubmit:l},r),e)}yo.displayName="Form";var bo=forwardRef(yo); | ||
var Po=Object.defineProperty,Io=Object.defineProperties;var ko=Object.getOwnPropertyDescriptors;var J=Object.getOwnPropertySymbols;var Se=Object.prototype.hasOwnProperty,Te=Object.prototype.propertyIsEnumerable;var ke=(e,o,t)=>o in e?Po(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,s=(e,o)=>{for(var t in o||(o={}))Se.call(o,t)&&ke(e,t,o[t]);if(J)for(var t of J(o))Te.call(o,t)&&ke(e,t,o[t]);return e},m=(e,o)=>Io(e,ko(o));var l=(e,o)=>{var t={};for(var r in e)Se.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&J)for(var r of J(e))o.indexOf(r)<0&&Te.call(e,r)&&(t[r]=e[r]);return t};var Ee=()=>{},le=createContext(void 0),Eo=()=>useContext(le),P=e=>{var t,r,i,n,p;let o=Eo();return o?{isDisabled:(t=e.isDisabled)!=null?t:o.isDisabled,isInvalid:(r=e.isInvalid)!=null?r:o.isInvalid,isReadOnly:(i=e.isReadOnly)!=null?i:o.isReadOnly,isRequired:(n=e.isRequired)!=null?n:o.isRequired,id:(p=e.id)!=null?p:o.id,maxLength:o.maxLength,inputValue:o.inputValue,setMaxLength:o.setMaxLength||Ee,setInputValue:o.setInputValue||Ee}:e};var D=_.forwardRef((r,t)=>{var i=r,{testId:e="cf-ui-help-text"}=i,o=l(i,["testId"]);let{id:n}=P({}),p=useDensity();return _.createElement(Text,m(s({as:"p",fontColor:"gray500",fontSize:p==="high"?"fontSizeMHigh":"fontSizeM",lineHeight:p==="high"?"lineHeightMHigh":"lineHeightM",testId:e,id:`${n}-helptext`,marginTop:"spacingXs"},o),{ref:t}))});D.displayName="HelpText";var $=forwardRef((i,r)=>{var n=i,{children:e,testId:o="cf-ui-validation-message"}=n,t=l(n,["children","testId"]);let{id:p}=P({}),c=useDensity();return _.createElement(Flex,m(s({marginTop:"spacing2Xs"},t),{ref:r,testId:o,alignItems:"center",id:p?`${p}-validation`:void 0,"aria-live":"assertive"}),_.createElement(Flex,{marginRight:c==="high"?"spacing2Xs":"spacingXs"},_.createElement(ErrorCircleOutlineIcon,{size:c==="high"?"tiny":"small",variant:"negative","aria-hidden":"true"})),_.createElement(Text,{as:"p",fontColor:"red600",fontSize:c==="high"?"fontSizeMHigh":"fontSizeM",lineHeight:c==="high"?"lineHeightMHigh":"lineHeightM"},e))});$.displayName="ValidationMessage";var me=({isDisabled:e})=>({alignItems:"center",background:e?a.gray300:a.colorWhite,border:`2px solid ${a.gray300}`,boxSizing:"border-box",display:"inline-flex",height:a.spacingM,justifyContent:"center",width:a.spacingM}),vo=({isDisabled:e})=>{let o=m(s({},me({isDisabled:e})),{backgroundColor:e?a.gray300:a.colorWhite,borderRadius:a.borderRadiusSmall,"& svg":{fill:e?a.gray300:a.colorWhite},"input:indeterminate + &, input:checked + &":{backgroundColor:e?a.gray300:a.blue600,borderColor:e?a.gray300:a.blue600,"& svg":{fill:e?a.gray600:a.colorWhite}}});return css(o)},wo=({isDisabled:e})=>{let o={content:'""',borderRadius:"50%",backgroundColor:e?a.gray300:a.colorWhite,width:a.borderRadiusMedium,height:a.borderRadiusMedium},t=m(s({},me({isDisabled:e})),{backgroundColor:e?a.gray300:a.colorWhite,borderRadius:"50%","&:before":s({},o),"input:checked + &":{backgroundColor:e?a.gray300:a.blue600,borderColor:e?a.gray300:a.blue600,"&:before":{backgroundColor:e?a.gray600:a.colorWhite}}});return css(t)},Go=({isDisabled:e,size:o})=>{let t=o==="small"?{height:a.spacingM,width:a.spacingXl,"&:before":{height:a.spacingS,width:a.spacingS},"input:checked + &:before":{transform:`translateX(${a.spacingM})`}}:{height:"20px",width:"40px","&:before":{height:a.spacingM,width:a.spacingM},"input:checked + &:before":{transform:"translateX(20px)"}},r=m(s({},me({isDisabled:e})),{background:a.gray600,borderColor:a.gray600,borderRadius:a.borderRadiusSmall,justifyContent:"space-around",position:"relative",flexShrink:0,"&:before":{background:a.colorWhite,borderRadius:`calc(${a.borderRadiusSmall}/2)`,content:'""',left:0,position:"absolute",transition:`transform ${a.transitionEasingDefault} ${a.transitionDurationDefault}`},"input:checked + &":{background:a.blue600,borderColor:a.blue600}}),i={"&, input:checked + &":{background:a.gray200,borderColor:a.gray200},"&:before":{background:a.gray400},"& svg":{fill:a.gray400}};return css([r,t,e&&i])},Oo=e=>{let{isDisabled:o,size:t}=e;return {radio:wo({isDisabled:o}),checkbox:vo({isDisabled:o}),switch:Go({isDisabled:o,size:t})}},Fe=Oo;var He=e=>{let{type:o,isIndeterminate:t,isDisabled:r,size:i="medium"}=e,n=Fe({isDisabled:r,size:i});return o==="switch"?_.createElement("span",{className:n.switch},_.createElement(DoneIcon,{size:"tiny",variant:"white"}),_.createElement(CloseIcon,{size:"tiny",variant:"white"})):_.createElement("span",{className:n[o]},o==="checkbox"&&(t?_.createElement(MinusIcon,{size:"tiny",variant:"white"}):_.createElement(DoneIcon,{size:"tiny",variant:"white"})))};var Be=e=>e==="small"?{height:a.spacingM,width:a.spacingXl}:{height:"20px",width:"40px"},No=({size:e,type:o,density:t})=>{let r=a.spacingM;return o==="switch"&&(r=Be(e).width),{marginLeft:`calc(${r} + ${a.spacingXs})`,marginTop:0,fontSize:t==="high"?a.fontSizeMHigh:a.fontSizeM,lineHeight:t==="high"?a.lineHeightMHigh:a.lineHeightM}},_o=({isDisabled:e,type:o,size:t,density:r})=>({wrapper:css({alignItems:"center",display:"inline-flex",position:"relative",margin:"0",columnGap:a.spacingXs}),input:css([{cursor:e?"not-allowed":"pointer",height:a.spacingM,margin:0,opacity:0,position:"absolute",width:a.spacingM,zIndex:a.zIndexDefault,"+ span":{minWidth:a.spacingM},"&:focus":{outline:"none","& + span":{boxShadow:a.glowPrimary}},"&:focus:not(:focus-visible) + span":{boxShadow:"unset"},"&:focus-visible + span":{boxShadow:a.glowPrimary}},o==="switch"&&Be(t)]),helpText:css(No({size:t,type:o,density:r}))}),ve=_o;function we(e,o){let Pe=e,{isChecked:t=void 0,onChange:r,onFocus:i,onBlur:n,onKeyDown:p,type:c="checkbox",value:d,isDisabled:x,isIndeterminate:y,isInvalid:b,isRequired:g=!1,id:C,willBlurOnEsc:S=!0,testId:I="cf-ui-base-checkbox",className:h="",defaultChecked:T=void 0,name:H,inputProps:k={},children:M,"aria-label":G,size:B="medium",helpText:R}=Pe,E=l(Pe,["isChecked","onChange","onFocus","onBlur","onKeyDown","type","value","isDisabled","isIndeterminate","isInvalid","isRequired","id","willBlurOnEsc","testId","className","defaultChecked","name","inputProps","children","aria-label","size","helpText"]),z=useDensity(),v=useRef(null),w=o||v,{id:se}=P({});useEffect(()=>{w.current&&(w.current.indeterminate=y);},[y,w]);let W=ve({isDisabled:x,type:c,size:B,density:z}),pe=useCallback(O=>{O.persist(),i&&i(O);},[i]),ae=useCallback(O=>{O.persist(),n&&n(O);},[n]),K=useCallback(O=>{var Ie;O.persist(),S&&O.key==="Escape"&&((Ie=w==null?void 0:w.current)==null||Ie.blur()),p&&p(O);},[S,p,w]),Z=typeof t!==void 0?t:T,F=C?`${C}-helptext`:void 0,Co=b?`${se}-validation`:R?F:void 0;return _.createElement(Flex,{alignItems:"flex-start",flexDirection:"column",className:h},_.createElement(Text,s({as:"label",fontColor:"gray900",fontWeight:"fontWeightMedium",fontSize:z==="high"?"fontSizeMHigh":"fontSizeM",lineHeight:z==="high"?"lineHeightMHigh":"lineHeightM",className:W.wrapper,htmlFor:C,testId:I},E),_.createElement("input",m(s({},k),{"aria-label":G,checked:t,defaultChecked:T,className:W.input,type:c==="switch"?"checkbox":c,onChange:r,onFocus:pe,onBlur:ae,onKeyDown:K,value:d,disabled:x,role:c,"aria-checked":y?"mixed":Z,ref:w,required:g,"aria-required":g?"true":void 0,"aria-invalid":b?"true":void 0,"aria-describedby":Co,id:C,name:H})),_.createElement(He,{type:c,isDisabled:x,isIndeterminate:y,size:B}),M),R&&_.createElement(D,{id:F,className:W.helpText},R))}we.displayName="BaseCheckbox";var N=_.forwardRef(we);var fe=createContext(void 0),jo=()=>useContext(fe),Y=e=>{var p,c,d;let o=jo();if(!o)return e;let t,r;return o.type==="checkbox"&&(t=o.value===void 0||(p=o.value)==null?void 0:p.includes(e.value),r=t!==void 0||(c=o.defaultValue)==null?void 0:c.includes(e.value)),o.type==="radio"&&(t=o.value===void 0?void 0:o.value===e.value,r=t!==void 0?void 0:o.defaultValue===e.value),{defaultChecked:r,isChecked:t,onBlur:x=>{e.onBlur&&e.onBlur(x),o.onBlur&&o.onBlur(x);},onChange:x=>{e.onChange&&e.onChange(x),o.onChange&&o.onChange(x);},name:(d=o.name)!=null?d:e.name,value:e.value}};var Zo=(e,o)=>{let R=e,{testId:t="cf-ui-checkbox",id:r,isDisabled:i,isRequired:n,isInvalid:p,children:c,onBlur:d,onChange:x,defaultChecked:y,isChecked:b,value:g,name:C}=R,S=l(R,["testId","id","isDisabled","isRequired","isInvalid","children","onBlur","onChange","defaultChecked","isChecked","value","name"]),I=useId(r,"checkbox"),h=Y({onBlur:d,onChange:x,value:g,defaultChecked:y,isChecked:b,name:C}),E=P({id:I,isDisabled:i,isInvalid:p,isRequired:n}),B=l(E,["inputValue","setInputValue","maxLength","setMaxLength","isReadOnly"]);return _.createElement(N,m(s(s(s({},B),h),S),{type:"checkbox",testId:t,ref:o}),c)},Oe=_.forwardRef(Zo);var Qo=(e,o)=>{let p=e,{children:t,className:r,testId:i="cf-ui-base-checkbox-group"}=p,n=l(p,["children","className","testId"]);return _.createElement(fe.Provider,{value:n},_.createElement(Stack,{ref:o,testId:i,className:r,flexDirection:"column",alignItems:"flex-start",spacing:"spacingXs"},t))},ee=_.forwardRef(Qo);var Yo=(e,o)=>{let n=e,{children:t,testId:r="cf-ui-checkbox-group"}=n,i=l(n,["children","testId"]);return _.createElement(ee,s({ref:o,testId:r,type:"checkbox"},i),t)},De=_.forwardRef(Yo);var Ne=Oe;Ne.Group=De;var tt="div";function Ve(b,y){var g=b,{as:e,isInvalid:o,isRequired:t,isDisabled:r,isReadOnly:i,children:n,marginBottom:p="spacingL",id:c,testId:d="cf-ui-form-control"}=g,x=l(g,["as","isInvalid","isRequired","isDisabled","isReadOnly","children","marginBottom","id","testId"]);let C=useId(c,"field-"),[S,I]=useState(""),[h,T]=useState(0),H=e==="fieldset"?void 0:"group",k=e||tt,M={id:C,isRequired:t,isDisabled:r,isInvalid:o,isReadOnly:i,inputValue:S,setInputValue:I,maxLength:h,setMaxLength:T};return _.createElement(le.Provider,{value:M},_.createElement(Box,s({as:k,ref:y,role:H,testId:d,marginBottom:p},x),n))}Ve.displayName="FormControl";var Ae=_.forwardRef(Ve);function $e(){return {root:css({display:"inline-block",fontWeight:a.fontWeightMedium}),indicator:css({color:a.gray500,fontWeight:a.fontWeightNormal,marginLeft:a.spacing2Xs})}}var pt="label";function qe(d,c){var x=d,{as:e,children:o,className:t,isRequired:r,requiredText:i="required",testId:n="cf-ui-form-label"}=x,p=l(x,["as","children","className","isRequired","requiredText","testId"]);let y=useDensity(),b=$e(),g=P({isRequired:r}),C=g.id?g.id+"-label":void 0,S=e!=="legend"?{htmlFor:p.htmlFor||g.id}:{};return _.createElement(Text,m(s(m(s({as:e||pt,marginBottom:"spacingXs"},p),{fontColor:"gray900",id:C}),S),{className:cx(b.root,t),ref:c,testId:n,fontSize:y==="high"?"fontSizeMHigh":"fontSizeM",lineHeight:y==="high"?"lineHeightMHigh":"lineHeightM"}),o,g.isRequired&&_.createElement("span",{className:b.indicator},"(",i,")"))}qe.displayName="FormLabel";var te=forwardRef(qe);function Ue(){return {root:css({flexShrink:0,paddingLeft:a.spacingM,textAlign:"right"})}}var X=forwardRef((i,r)=>{var n=i,{testId:e="cf-ui-counter",className:o}=n,t=l(n,["testId","className"]);let{maxLength:p,inputValue:c}=P({}),d=Ue();return !!p&&_.createElement(Text,m(s({as:"p",fontColor:"gray700",fontSize:"fontSizeM",testId:e,marginTop:"spacingXs"},t),{className:cx(d.root,o),ref:r}),c.length," / ",p)});X.displayName="Counter";var q=Ae;q.Label=te;q.ValidationMessage=$;q.HelpText=D;q.Counter=X;var xt=(e,o)=>{let R=e,{testId:t="cf-ui-radio-button",id:r,isDisabled:i,isInvalid:n,isRequired:p,children:c,onBlur:d,onChange:x,defaultChecked:y,isChecked:b,value:g,name:C}=R,S=l(R,["testId","id","isDisabled","isInvalid","isRequired","children","onBlur","onChange","defaultChecked","isChecked","value","name"]),I=useId(r,"radio"),h=Y({onBlur:d,onChange:x,value:g,defaultChecked:y,isChecked:b,name:C}),E=P({id:I,isDisabled:i,isInvalid:n,isRequired:p}),B=l(E,["inputValue","setInputValue","maxLength","setMaxLength","isReadOnly"]);return _.createElement(N,m(s(s(s({},B),S),h),{type:"radio",testId:t,ref:o}),c)},Ke=_.forwardRef(xt);var ht=(e,o)=>{let n=e,{children:t,testId:r="cf-ui-radio-group"}=n,i=l(n,["children","testId"]);return _.createElement(ee,s({ref:o,testId:r,type:"radio"},i),t)},Je=_.forwardRef(ht);var Qe=Ke;Qe.Group=Je;var gt=({size:e,density:o})=>{let t=o==="high";return e==="small"?{padding:a.spacingXs,minHeight:t?a.spacingL:a.spacingXl,maxHeight:t?a.spacingL:a.spacingXl}:{padding:t?a.spacingXs:`10px ${a.spacingS}`,minHeight:t?a.spacingXl:"40px",maxHeight:t?a.spacingXl:"40px"}},Ye=({isDisabled:e,isInvalid:o,zIndexBase:t=a.zIndexDefault})=>e||o?t+1:t,yt=({isDisabled:e,isInvalid:o})=>e?{borderColor:a.gray300,boxShadow:"none"}:o?{borderColor:a.red600,boxShadow:a.glowNegative}:{},bt=({as:e,isDisabled:o,isInvalid:t,size:r,resize:i,density:n="low"})=>{let p={low:{borderRadius:a.borderRadiusMedium,lineHeight:a.lineHeightM,fontSize:a.fontSizeM},high:{borderRadius:a.borderRadiusSmall,lineHeight:a.lineHeightMHigh,fontSize:a.fontSizeMHigh}};return {rootComponentWithIcon:css({position:"relative",display:"flex",width:"100%",zIndex:Ye({isDisabled:o,isInvalid:t})}),input:css(m(s(s({outline:"none",boxShadow:a.insetBoxShadowDefault,boxSizing:"border-box",backgroundColor:o?a.gray100:a.colorWhite,border:`1px solid ${t?a.red600:a.gray300}`,color:a.gray700,fontFamily:a.fontStackPrimary,margin:0,cursor:o?"not-allowed":"auto",width:"100%",zIndex:Ye({isDisabled:o,isInvalid:t})},p[n]),e==="textarea"?{resize:i}:gt({size:r,density:n})),{"&::placeholder":{color:a.gray500},"&:active, &:active:hover, &:focus":s({borderColor:a.blue600,boxShadow:a.glowPrimary},yt({isDisabled:o,isInvalid:t}))})),inputWithIcon:css({paddingLeft:a.spacingXl}),iconPlaceholder:css({position:"absolute",pointerEvents:"none",top:0,bottom:0,left:r==="small"?a.spacingXs:a.spacingS,display:"flex",alignItems:"center",zIndex:a.zIndexDefault})}},eo=bt;var It="input";function to(e,o){let Z=e,{as:t=It,className:r,isDisabled:i,isReadOnly:n,isRequired:p,isInvalid:c,id:d,name:x,onBlur:y,onChange:b,onFocus:g,onKeyDown:C,testId:S="cf-ui-base-input",type:I="text",value:h=void 0,placeholder:T,willBlurOnEsc:H=!0,style:k,icon:M,defaultValue:G,size:B="medium",resize:R="vertical"}=Z,E=l(Z,["as","className","isDisabled","isReadOnly","isRequired","isInvalid","id","name","onBlur","onChange","onFocus","onKeyDown","testId","type","value","placeholder","willBlurOnEsc","style","icon","defaultValue","size","resize"]),z=useDensity(),v=eo({as:t,isDisabled:i,isInvalid:c,size:B,resize:R,density:z}),w=useCallback(F=>{F.persist(),g&&g(F);},[g]),se=useCallback(F=>{F.persist(),!(i||n)&&b&&b(F);},[b,i,n]),W=useCallback(F=>{F.persist(),C&&C(F),F.nativeEvent.code==="Escape"&&H&&F.currentTarget.blur();},[H,C]),pe=M&&_.createElement(Box,{as:"span",className:v.iconPlaceholder},_.cloneElement(M,{size:"tiny",variant:"muted","aria-hidden":!0})),ae=t,K=F=>_.createElement(ae,m(s({},E),{value:h,defaultValue:G,"data-test-id":S,style:k,placeholder:T,className:cx(v.input,F,r),name:x,type:I,ref:o,id:d,readOnly:n,"aria-readonly":n?"true":void 0,"aria-required":p?"true":void 0,"aria-invalid":c?"true":void 0,"aria-describedby":d?`${d}-${c?"validation":"helptext"}`:void 0,disabled:i,required:p,onChange:se,onBlur:y,onKeyDown:W,onFocus:w,size:B}));return M?_.createElement(Box,{as:"div",className:v.rootComponentWithIcon},K(v.inputWithIcon),pe):K()}to.displayName="BaseInput";var j=_.forwardRef(to);var Tt=(I,S)=>{var h=I,{className:e,testId:o="cf-ui-text-input",id:t,value:r,defaultValue:i,onChange:n,onFocus:p,isInvalid:c,isDisabled:d,isRequired:x,isReadOnly:y,size:b="medium",maxLength:g}=h,C=l(h,["className","testId","id","value","defaultValue","onChange","onFocus","isInvalid","isDisabled","isRequired","isReadOnly","size","maxLength"]);let z=P({id:t,isInvalid:c,isDisabled:d,isRequired:x,isReadOnly:y}),{setMaxLength:T,maxLength:H,setInputValue:k,inputValue:M}=z,G=l(z,["setMaxLength","maxLength","setInputValue","inputValue"]);useEffect(()=>{var v;g!==void 0&&typeof T=="function"&&(T(g),k((v=r!=null?r:i)!=null?v:""));},[g,T,k,i,r]);let B=v=>{typeof k=="function"&&k(v.target.value),n==null||n(v);},R=useRef(null),E=S||R;return _.createElement(j,m(s(s({type:"text"},C),G),{testId:o,ref:E,onChange:g?B:n,onFocus:p,as:"input",className:e,value:r,defaultValue:i,size:b,maxLength:g}))},no=_.forwardRef(Tt);var Rt=({spacing:e,density:o})=>{if(e!=="none")return;let t=o==="high"?a.borderRadiusSmall:a.borderRadiusMedium;return css({position:"relative","& button, & input":{borderRadius:"0 !important"},"& > *":{marginRight:"-1px !important","&:not(:focus), & button:not(:focus)":{boxShadow:"none !important"},"&:first-child, &:first-child > input, &:first-child button":{borderBottomLeftRadius:`${t} !important`,borderTopLeftRadius:`${t} !important`},"&:last-child, &:last-child > input, &:last-child button":{borderBottomRightRadius:`${t} !important`,borderTopRightRadius:`${t} !important`,marginRight:"0 !important"},"&:focus, &:focus-within":{zIndex:a.zIndexDefault+1}}})},io=({spacing:e,density:o})=>({inputGroup:Rt({spacing:e,density:o})});var Ht=(e,o)=>{let d=e,{children:t,className:r,spacing:i="none"}=d,n=l(d,["children","className","spacing"]),p=useDensity(),c=io({spacing:i,density:p});return _.createElement(Stack,m(s({},n),{spacing:i,ref:o,fullWidth:!0,className:cx(c.inputGroup,r)}),t)},po=_.forwardRef(Ht);var ao=no;ao.Group=po;var Bt=(e,o)=>{let I=e,{testId:t="cf-ui-switch",id:r,isDisabled:i,isInvalid:n,isRequired:p,children:c}=I,d=l(I,["testId","id","isDisabled","isInvalid","isRequired","children"]),h=P({id:r,isDisabled:i,isInvalid:n,isRequired:p}),S=l(h,["inputValue","setInputValue","maxLength","setMaxLength","isReadOnly"]);return _.createElement(N,m(s(s({},S),d),{testId:t,type:"switch",ref:o}),c)},co=_.forwardRef(Bt);var mo=()=>({root:css({padding:`10px ${a.spacingS}`}),error:css({"&:focus":{borderColor:a.red600,boxShadow:a.glowNegative}}),disabled:css({"&:focus":{borderColor:a.gray300,boxShadow:"none"}})});var Gt=(S,C)=>{var I=S,{className:e,isDisabled:o,isInvalid:t,isRequired:r,isReadOnly:i,onChange:n,testId:p="cf-ui-textarea",id:c,resize:d="vertical",maxLength:x,value:y,defaultValue:b}=I,g=l(I,["className","isDisabled","isInvalid","isRequired","isReadOnly","onChange","testId","id","resize","maxLength","value","defaultValue"]);let h=mo(),R=P({id:c,isInvalid:t,isDisabled:o,isRequired:r,isReadOnly:i}),{setMaxLength:T,maxLength:H,setInputValue:k,inputValue:M}=R,G=l(R,["setMaxLength","maxLength","setInputValue","inputValue"]);useEffect(()=>{var E;x!==void 0&&typeof T=="function"&&(T(x),k((E=y!=null?y:b)!=null?E:""));},[b,x,k,T,y]);let B=E=>{typeof k=="function"&&k(E.target.value),n==null||n(E);};return _.createElement(j,m(s(s({},g),G),{defaultValue:b,value:y,testId:p,as:"textarea",ref:C,className:cx(h.root,e,{[h.disabled]:o,[h.error]:t}),maxLength:x,resize:d,onChange:x?B:n}))},fo=_.forwardRef(Gt);var Ce=r=>{var i=r,{testId:e="cf-ui-select-option",isDisabled:o}=i,t=l(i,["testId","isDisabled"]);return _.createElement("option",m(s({"data-test-id":e},t),{disabled:o}))};function xo({isInvalid:e,isDisabled:o,size:t,density:r}){let i=()=>{switch(!0){case t==="small":return {padding:`${a.spacing2Xs} ${a.spacingL} ${a.spacing2Xs} ${a.spacingXs}`,height:"32px"};case(t==="medium"&&r==="high"):return {padding:`${a.spacing2Xs} ${a.spacingL} ${a.spacing2Xs} ${a.spacingXs}`,height:"32px",fontSize:a.fontSizeMHigh,lineHeight:a.lineHeightMHigh,borderRadius:a.borderRadiusSmall};case(t==="medium"||r==="low"):default:return {padding:`10px ${a.spacingL} 10px ${a.spacingS}`,height:"40px"}}},n=css({width:"100%",display:"block",appearance:"none",backgroundColor:a.colorWhite,color:a.gray700,fontSize:a.fontSizeM,lineHeight:a.lineHeightM,fontFamily:a.fontStackPrimary,borderRadius:a.borderRadiusMedium,boxShadow:a.insetBoxShadowDefault,outline:"none",border:`1px solid ${a.gray300}`,cursor:"pointer",overflow:"hidden",textOverflow:"ellipsis","&::placeholder":{color:a.gray500},"&:focus":{outline:"none",boxShadow:a.glowPrimary,borderColor:a.blue500},"&:-moz-focusring":{color:"transparent",textShadow:"0 0 0 #000"},"&::-ms-expand":{display:"none"}}),p=css({backgroundColor:a.gray100,cursor:"not-allowed",color:a.gray600,"&:focus, &:active":{borderColor:a.gray300}}),c=css({borderColor:o?a.red300:a.red600,"&:focus":{borderColor:a.red600,boxShadow:a.glowNegative}});return {wrapper:css({position:"relative",display:"block",width:"auto"}),select:css([n,i(),o&&p,e&&c]),icon:css({position:"absolute",right:a.spacingXs,top:"50%",marginTop:"-8px",pointerEvents:"none"})}}var Vt=(S,C)=>{var I=S,{id:e,children:o,className:t,isInvalid:r,isDisabled:i,isRequired:n,testId:p="cf-ui-select",willBlurOnEsc:c=!0,onKeyDown:d,size:x="medium",value:y=void 0,defaultValue:b=void 0}=I,g=l(I,["id","children","className","isInvalid","isDisabled","isRequired","testId","willBlurOnEsc","onKeyDown","size","value","defaultValue"]);let h=P({isDisabled:i,isInvalid:r,isRequired:n,id:e}),T=useDensity(),H=xo({isDisabled:h.isDisabled,isInvalid:h.isInvalid,size:x,density:T}),k=useCallback(M=>{M.nativeEvent.code==="Escape"&&c&&M.currentTarget.blur(),d&&d(M);},[d,c]);return _.createElement("div",{className:cx(H.wrapper,t)},_.createElement("select",m(s({},g),{id:h.id,"data-test-id":p,className:H.select,onKeyDown:k,required:h.isRequired,"aria-required":h.isRequired?"true":void 0,"aria-invalid":h.isInvalid?!0:void 0,"aria-describedby":h.id?`${h.id}-${h.isInvalid?"validation":"helptext"}`:void 0,disabled:h.isDisabled,defaultValue:b,value:y,ref:C}),o),_.createElement(ChevronDownIcon,{className:H.icon,variant:"muted"}))},ho=_.forwardRef(Vt);var go=ho;go.Option=Ce;function yo(n,i){var p=n,{children:e,onSubmit:o,testId:t="cf-ui-form-label"}=p,r=l(p,["children","onSubmit","testId"]);let c=useCallback(d=>{d.preventDefault(),o&&o(d);},[o]);return _.createElement("form",s({ref:i,"data-test-id":t,onSubmit:c},r),e)}yo.displayName="Form";var bo=forwardRef(yo); | ||
export { Ne as Checkbox, X as Counter, bo as Form, q as FormControl, re as FormLabel, N as HelpText, ye as Option, Je as Radio, go as Select, lo as Switch, po as TextInput, fo as Textarea, $ as ValidationMessage }; | ||
export { Ne as Checkbox, X as Counter, bo as Form, q as FormControl, te as FormLabel, D as HelpText, Ce as Option, Qe as Radio, go as Select, co as Switch, ao as TextInput, fo as Textarea, $ as ValidationMessage }; | ||
//# sourceMappingURL=out.js.map | ||
//# sourceMappingURL=index.js.map |
'use strict'; | ||
var V = require('react'); | ||
var _ = require('react'); | ||
var f36Typography = require('@contentful/f36-typography'); | ||
@@ -13,6 +13,6 @@ var f36Utils = require('@contentful/f36-utils'); | ||
var V__default = /*#__PURE__*/_interopDefault(V); | ||
var ___default = /*#__PURE__*/_interopDefault(_); | ||
var a__default = /*#__PURE__*/_interopDefault(a); | ||
var Po=Object.defineProperty,ko=Object.defineProperties;var Io=Object.getOwnPropertyDescriptors;var Q=Object.getOwnPropertySymbols;var Ie=Object.prototype.hasOwnProperty,Te=Object.prototype.propertyIsEnumerable;var ke=(e,o,t)=>o in e?Po(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,s=(e,o)=>{for(var t in o||(o={}))Ie.call(o,t)&&ke(e,t,o[t]);if(Q)for(var t of Q(o))Te.call(o,t)&&ke(e,t,o[t]);return e},m=(e,o)=>ko(e,Io(o));var c=(e,o)=>{var t={};for(var r in e)Ie.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&Q)for(var r of Q(e))o.indexOf(r)<0&&Te.call(e,r)&&(t[r]=e[r]);return t};var Ee=()=>{},ae=V.createContext(void 0),So=()=>V.useContext(ae),P=e=>{var t,r,i,n,p;let o=So();return o?{isDisabled:(t=e.isDisabled)!=null?t:o.isDisabled,isInvalid:(r=e.isInvalid)!=null?r:o.isInvalid,isReadOnly:(i=e.isReadOnly)!=null?i:o.isReadOnly,isRequired:(n=e.isRequired)!=null?n:o.isRequired,id:(p=e.id)!=null?p:o.id,maxLength:o.maxLength,inputValue:o.inputValue,setMaxLength:o.setMaxLength||Ee,setInputValue:o.setInputValue||Ee}:e};var N=V__default.default.forwardRef((r,t)=>{var i=r,{testId:e="cf-ui-help-text"}=i,o=c(i,["testId"]);let{id:n}=P({}),p=f36Utils.useDensity();return V__default.default.createElement(f36Typography.Text,m(s({as:"p",fontColor:"gray500",fontSize:p==="high"?"fontSizeMHigh":"fontSizeM",lineHeight:p==="high"?"lineHeightMHigh":"lineHeightM",testId:e,id:`${n}-helptext`,marginTop:"spacingXs"},o),{ref:t}))});N.displayName="HelpText";var $=V.forwardRef((i,r)=>{var n=i,{children:e,testId:o="cf-ui-validation-message"}=n,t=c(n,["children","testId"]);let{id:p}=P({}),l=f36Utils.useDensity();return V__default.default.createElement(f36Core.Flex,m(s({marginTop:"spacing2Xs"},t),{ref:r,testId:o,alignItems:"center",id:p?`${p}-validation`:void 0,"aria-live":"assertive"}),V__default.default.createElement(f36Core.Flex,{marginRight:l==="high"?"spacing2Xs":"spacingXs"},V__default.default.createElement(f36Icons.ErrorCircleOutlineIcon,{size:l==="high"?"tiny":"small",variant:"negative","aria-hidden":"true"})),V__default.default.createElement(f36Typography.Text,{as:"p",fontColor:"red600",fontSize:l==="high"?"fontSizeMHigh":"fontSizeM",lineHeight:l==="high"?"lineHeightMHigh":"lineHeightM"},e))});$.displayName="ValidationMessage";var ce=({isDisabled:e})=>({alignItems:"center",background:e?a__default.default.gray300:a__default.default.colorWhite,border:`2px solid ${a__default.default.gray300}`,boxSizing:"border-box",display:"inline-flex",height:a__default.default.spacingM,justifyContent:"center",width:a__default.default.spacingM}),wo=({isDisabled:e})=>{let o=m(s({},ce({isDisabled:e})),{backgroundColor:e?a__default.default.gray300:a__default.default.colorWhite,borderRadius:a__default.default.borderRadiusSmall,"& svg":{fill:e?a__default.default.gray300:a__default.default.colorWhite},"input:indeterminate + &, input:checked + &":{backgroundColor:e?a__default.default.gray300:a__default.default.blue600,borderColor:e?a__default.default.gray300:a__default.default.blue600,"& svg":{fill:e?a__default.default.gray600:a__default.default.colorWhite}}});return emotion.css(o)},vo=({isDisabled:e})=>{let o={content:'""',borderRadius:"50%",backgroundColor:e?a__default.default.gray300:a__default.default.colorWhite,width:a__default.default.borderRadiusMedium,height:a__default.default.borderRadiusMedium},t=m(s({},ce({isDisabled:e})),{backgroundColor:e?a__default.default.gray300:a__default.default.colorWhite,borderRadius:"50%","&:before":s({},o),"input:checked + &":{backgroundColor:e?a__default.default.gray300:a__default.default.blue600,borderColor:e?a__default.default.gray300:a__default.default.blue600,"&:before":{backgroundColor:e?a__default.default.gray600:a__default.default.colorWhite}}});return emotion.css(t)},Go=({isDisabled:e,size:o})=>{let t=o==="small"?{height:a__default.default.spacingM,width:a__default.default.spacingXl,"&:before":{height:a__default.default.spacingS,width:a__default.default.spacingS},"input:checked + &:before":{transform:`translateX(${a__default.default.spacingM})`}}:{height:"20px",width:"40px","&:before":{height:a__default.default.spacingM,width:a__default.default.spacingM},"input:checked + &:before":{transform:"translateX(20px)"}},r=m(s({},ce({isDisabled:e})),{background:a__default.default.gray600,borderColor:a__default.default.gray600,borderRadius:a__default.default.borderRadiusSmall,justifyContent:"space-around",position:"relative",flexShrink:0,"&:before":{background:a__default.default.colorWhite,borderRadius:`calc(${a__default.default.borderRadiusSmall}/2)`,content:'""',left:0,position:"absolute",transition:`transform ${a__default.default.transitionEasingDefault} ${a__default.default.transitionDurationDefault}`},"input:checked + &":{background:a__default.default.blue600,borderColor:a__default.default.blue600}}),i={"&, input:checked + &":{background:a__default.default.gray200,borderColor:a__default.default.gray200},"&:before":{background:a__default.default.gray400},"& svg":{fill:a__default.default.gray400}};return emotion.css([r,t,e&&i])},Oo=e=>{let{isDisabled:o,size:t}=e;return {radio:vo({isDisabled:o}),checkbox:wo({isDisabled:o}),switch:Go({isDisabled:o,size:t})}},Me=Oo;var Le=e=>{let{type:o,isIndeterminate:t,isDisabled:r,size:i="medium"}=e,n=Me({isDisabled:r,size:i});return o==="switch"?V__default.default.createElement("span",{className:n.switch},V__default.default.createElement(f36Icons.DoneIcon,{size:"tiny",variant:"white"}),V__default.default.createElement(f36Icons.CloseIcon,{size:"tiny",variant:"white"})):V__default.default.createElement("span",{className:n[o]},o==="checkbox"&&(t?V__default.default.createElement(f36Icons.MinusIcon,{size:"tiny",variant:"white"}):V__default.default.createElement(f36Icons.DoneIcon,{size:"tiny",variant:"white"})))};var Be=e=>e==="small"?{height:a__default.default.spacingM,width:a__default.default.spacingXl}:{height:"20px",width:"40px"},_o=({size:e,type:o,density:t})=>{let r=a__default.default.spacingM;return o==="switch"&&(r=Be(e).width),{marginLeft:`calc(${r} + ${a__default.default.spacingXs})`,marginTop:0,fontSize:t==="high"?a__default.default.fontSizeMHigh:a__default.default.fontSizeM,lineHeight:t==="high"?a__default.default.lineHeightMHigh:a__default.default.lineHeightM}},Vo=({isDisabled:e,type:o,size:t,density:r})=>({wrapper:emotion.css({alignItems:"center",display:"inline-flex",position:"relative",margin:"0",columnGap:a__default.default.spacingXs}),input:emotion.css([{cursor:e?"not-allowed":"pointer",height:a__default.default.spacingM,margin:0,opacity:0,position:"absolute",width:a__default.default.spacingM,zIndex:a__default.default.zIndexDefault,"+ span":{minWidth:a__default.default.spacingM},"&:focus":{outline:"none","& + span":{boxShadow:a__default.default.glowPrimary}},"&:focus:not(:focus-visible) + span":{boxShadow:"unset"},"&:focus-visible + span":{boxShadow:a__default.default.glowPrimary}},o==="switch"&&Be(t)]),helpText:emotion.css(_o({size:t,type:o,density:r}))}),He=Vo;function we(e,o){let Ce=e,{isChecked:t=void 0,onChange:r,onFocus:i,onBlur:n,onKeyDown:p,type:l="checkbox",value:f,isDisabled:u,isIndeterminate:y,isInvalid:b,isRequired:x=!1,id:C,willBlurOnEsc:T=!0,testId:k="cf-ui-base-checkbox",className:h="",defaultChecked:E=void 0,name:L,inputProps:I={},children:M,"aria-label":G,size:B="medium",helpText:R}=Ce,S=c(Ce,["isChecked","onChange","onFocus","onBlur","onKeyDown","type","value","isDisabled","isIndeterminate","isInvalid","isRequired","id","willBlurOnEsc","testId","className","defaultChecked","name","inputProps","children","aria-label","size","helpText"]),w=f36Utils.useDensity(),O=V.useRef(null),v=o||O,{id:se}=P({});V.useEffect(()=>{v.current&&(v.current.indeterminate=y);},[y,v]);let W=He({isDisabled:u,type:l,size:B,density:w}),pe=V.useCallback(z=>{z.persist(),i&&i(z);},[i]),Z=V.useCallback(z=>{z.persist(),n&&n(z);},[n]),J=V.useCallback(z=>{var Pe;z.persist(),T&&z.key==="Escape"&&((Pe=v==null?void 0:v.current)==null||Pe.blur()),p&&p(z);},[T,p,v]),H=typeof t!==void 0?t:E,be=C?`${C}-helptext`:void 0,Co=b?`${se}-validation`:R?be:void 0;return V__default.default.createElement(f36Core.Flex,{alignItems:"flex-start",flexDirection:"column",className:h},V__default.default.createElement(f36Typography.Text,s({as:"label",fontColor:"gray900",fontWeight:"fontWeightMedium",fontSize:w==="high"?"fontSizeMHigh":"fontSizeM",lineHeight:w==="high"?"lineHeightMHigh":"lineHeightM",className:W.wrapper,htmlFor:C,testId:k},S),V__default.default.createElement("input",m(s({},I),{"aria-label":G,checked:t,defaultChecked:E,className:W.input,type:l==="switch"?"checkbox":l,onChange:r,onFocus:pe,onBlur:Z,onKeyDown:J,value:f,disabled:u,role:l,"aria-checked":y?"mixed":H,ref:v,required:x,"aria-required":x?"true":void 0,"aria-invalid":b?"true":void 0,"aria-describedby":Co,id:C,name:L})),V__default.default.createElement(Le,{type:l,isDisabled:u,isIndeterminate:y,size:B}),M),R&&V__default.default.createElement(N,{id:be,className:W.helpText},R))}we.displayName="BaseCheckbox";var _=V__default.default.forwardRef(we);var ue=V.createContext(void 0),jo=()=>V.useContext(ue),ee=e=>{var p,l,f;let o=jo();if(!o)return e;let t,r;return o.type==="checkbox"&&(t=o.value===void 0||(p=o.value)==null?void 0:p.includes(e.value),r=t!==void 0||(l=o.defaultValue)==null?void 0:l.includes(e.value)),o.type==="radio"&&(t=o.value===void 0?void 0:o.value===e.value,r=t!==void 0?void 0:o.defaultValue===e.value),{defaultChecked:r,isChecked:t,onBlur:u=>{e.onBlur&&e.onBlur(u),o.onBlur&&o.onBlur(u);},onChange:u=>{e.onChange&&e.onChange(u),o.onChange&&o.onChange(u);},name:(f=o.name)!=null?f:e.name,value:e.value}};var Zo=(e,o)=>{let R=e,{testId:t="cf-ui-checkbox",id:r,isDisabled:i,isRequired:n,isInvalid:p,children:l,onBlur:f,onChange:u,defaultChecked:y,isChecked:b,value:x,name:C}=R,T=c(R,["testId","id","isDisabled","isRequired","isInvalid","children","onBlur","onChange","defaultChecked","isChecked","value","name"]),k=f36Core.useId(r,"checkbox"),h=ee({onBlur:f,onChange:u,value:x,defaultChecked:y,isChecked:b,name:C}),S=P({id:k,isDisabled:i,isInvalid:p,isRequired:n}),B=c(S,["inputValue","setInputValue","maxLength","setMaxLength","isReadOnly"]);return V__default.default.createElement(_,m(s(s(s({},B),h),T),{type:"checkbox",testId:t,ref:o}),l)},Ge=V__default.default.forwardRef(Zo);var Qo=(e,o)=>{let p=e,{children:t,className:r,testId:i="cf-ui-base-checkbox-group"}=p,n=c(p,["children","className","testId"]);return V__default.default.createElement(ue.Provider,{value:n},V__default.default.createElement(f36Core.Stack,{ref:o,testId:i,className:r,flexDirection:"column",alignItems:"flex-start",spacing:"spacingXs"},t))},oe=V__default.default.forwardRef(Qo);var Yo=(e,o)=>{let n=e,{children:t,testId:r="cf-ui-checkbox-group"}=n,i=c(n,["children","testId"]);return V__default.default.createElement(oe,s({ref:o,testId:r,type:"checkbox"},i),t)},ze=V__default.default.forwardRef(Yo);var Ne=Ge;Ne.Group=ze;var tt="div";function Ve(b,y){var x=b,{as:e,isInvalid:o,isRequired:t,isDisabled:r,isReadOnly:i,children:n,marginBottom:p="spacingL",id:l,testId:f="cf-ui-form-control"}=x,u=c(x,["as","isInvalid","isRequired","isDisabled","isReadOnly","children","marginBottom","id","testId"]);let C=f36Core.useId(l,"field-"),[T,k]=V.useState(""),[h,E]=V.useState(0),L=e==="fieldset"?void 0:"group",I=e||tt,M={id:C,isRequired:t,isDisabled:r,isInvalid:o,isReadOnly:i,inputValue:T,setInputValue:k,maxLength:h,setMaxLength:E};return V__default.default.createElement(ae.Provider,{value:M},V__default.default.createElement(f36Core.Box,s({as:I,ref:y,role:L,testId:f,marginBottom:p},u),n))}Ve.displayName="FormControl";var De=V__default.default.forwardRef(Ve);function We(){return {root:emotion.css({display:"inline-block",fontWeight:a__default.default.fontWeightMedium}),indicator:emotion.css({color:a__default.default.gray500,fontWeight:a__default.default.fontWeightNormal,marginLeft:a__default.default.spacing2Xs})}}var pt="label";function Xe(f,l){var u=f,{as:e,children:o,className:t,isRequired:r,requiredText:i="required",testId:n="cf-ui-form-label"}=u,p=c(u,["as","children","className","isRequired","requiredText","testId"]);let y=f36Utils.useDensity(),b=We(),x=P({isRequired:r}),C=x.id?x.id+"-label":void 0,T=e!=="legend"?{htmlFor:p.htmlFor||x.id}:{};return V__default.default.createElement(f36Typography.Text,m(s(m(s({as:e||pt,marginBottom:"spacingXs"},p),{fontColor:"gray900",id:C}),T),{className:emotion.cx(b.root,t),ref:l,testId:n,fontSize:y==="high"?"fontSizeMHigh":"fontSizeM",lineHeight:y==="high"?"lineHeightMHigh":"lineHeightM"}),o,x.isRequired&&V__default.default.createElement("span",{className:b.indicator},"(",i,")"))}Xe.displayName="FormLabel";var re=V.forwardRef(Xe);function qe(){return {root:emotion.css({flexShrink:0,paddingLeft:a__default.default.spacingM,textAlign:"right"})}}var X=V.forwardRef((i,r)=>{var n=i,{testId:e="cf-ui-counter",className:o}=n,t=c(n,["testId","className"]);let{maxLength:p,inputValue:l}=P({}),f=qe();return !!p&&V__default.default.createElement(f36Typography.Text,m(s({as:"p",fontColor:"gray700",fontSize:"fontSizeM",testId:e,marginTop:"spacingXs"},t),{className:emotion.cx(f.root,o),ref:r}),l.length," / ",p)});X.displayName="Counter";var q=De;q.Label=re;q.ValidationMessage=$;q.HelpText=N;q.Counter=X;var xt=(e,o)=>{let R=e,{testId:t="cf-ui-radio-button",id:r,isDisabled:i,isInvalid:n,isRequired:p,children:l,onBlur:f,onChange:u,defaultChecked:y,isChecked:b,value:x,name:C}=R,T=c(R,["testId","id","isDisabled","isInvalid","isRequired","children","onBlur","onChange","defaultChecked","isChecked","value","name"]),k=f36Core.useId(r,"radio"),h=ee({onBlur:f,onChange:u,value:x,defaultChecked:y,isChecked:b,name:C}),S=P({id:k,isDisabled:i,isInvalid:n,isRequired:p}),B=c(S,["inputValue","setInputValue","maxLength","setMaxLength","isReadOnly"]);return V__default.default.createElement(_,m(s(s(s({},B),T),h),{type:"radio",testId:t,ref:o}),l)},je=V__default.default.forwardRef(xt);var ht=(e,o)=>{let n=e,{children:t,testId:r="cf-ui-radio-group"}=n,i=c(n,["children","testId"]);return V__default.default.createElement(oe,s({ref:o,testId:r,type:"radio"},i),t)},Ze=V__default.default.forwardRef(ht);var Je=je;Je.Group=Ze;var gt=({size:e})=>e==="small"?{padding:`${a__default.default.spacing2Xs} ${a__default.default.spacingXs}`,height:"32px",maxHeight:"32px"}:{height:"40px",maxHeight:"40px"},Qe=({isDisabled:e,isInvalid:o,zIndexBase:t=a__default.default.zIndexDefault})=>e||o?t+1:t,yt=({as:e,isDisabled:o,isInvalid:t,size:r,resize:i})=>({rootComponentWithIcon:emotion.css({position:"relative",display:"flex",width:"100%",zIndex:Qe({isDisabled:o,isInvalid:t})}),input:emotion.css(m(s({outline:"none",boxShadow:a__default.default.insetBoxShadowDefault,boxSizing:"border-box",backgroundColor:o?a__default.default.gray100:a__default.default.colorWhite,border:`1px solid ${t?a__default.default.red600:a__default.default.gray300}`,borderRadius:a__default.default.borderRadiusMedium,color:a__default.default.gray700,fontFamily:a__default.default.fontStackPrimary,fontSize:a__default.default.fontSizeM,lineHeight:a__default.default.lineHeightM,padding:`10px ${a__default.default.spacingS}`,margin:0,cursor:o?"not-allowed":"auto",width:"100%",zIndex:Qe({isDisabled:o,isInvalid:t})},e==="textarea"?{resize:i}:gt({size:r})),{"&::placeholder":{color:a__default.default.gray500},"&:active, &:active:hover":{borderColor:t?a__default.default.red600:o?a__default.default.gray300:a__default.default.blue600,boxShadow:t?a__default.default.glowNegative:o?"none":a__default.default.glowPrimary},"&:focus":{borderColor:t?a__default.default.red600:o?a__default.default.gray300:a__default.default.blue600,boxShadow:t?a__default.default.glowNegative:o?"none":a__default.default.glowPrimary}})),inputWithIcon:emotion.css({paddingLeft:r==="small"?a__default.default.spacingXl:"38px"}),iconPlaceholder:emotion.css({position:"absolute",pointerEvents:"none",top:0,bottom:0,left:r==="small"?a__default.default.spacingXs:a__default.default.spacingS,display:"flex",alignItems:"center",zIndex:a__default.default.zIndexDefault})}),Ye=yt;var Ct="input";function oo(e,o){let J=e,{as:t=Ct,className:r,isDisabled:i,isReadOnly:n,isRequired:p,isInvalid:l,id:f,name:u,onBlur:y,onChange:b,onFocus:x,onKeyDown:C,testId:T="cf-ui-base-input",type:k="text",value:h=void 0,placeholder:E,willBlurOnEsc:L=!0,style:I,icon:M,defaultValue:G,size:B="medium",resize:R="vertical"}=J,S=c(J,["as","className","isDisabled","isReadOnly","isRequired","isInvalid","id","name","onBlur","onChange","onFocus","onKeyDown","testId","type","value","placeholder","willBlurOnEsc","style","icon","defaultValue","size","resize"]),w=Ye({as:t,isDisabled:i,isInvalid:l,size:B,resize:R}),O=V.useCallback(H=>{H.persist(),x&&x(H);},[x]),v=V.useCallback(H=>{H.persist(),!(i||n)&&b&&b(H);},[b,i,n]),se=V.useCallback(H=>{H.persist(),C&&C(H),H.nativeEvent.code==="Escape"&&L&&H.currentTarget.blur();},[L,C]),W=M&&V__default.default.createElement(f36Core.Box,{as:"span",className:w.iconPlaceholder},V__default.default.cloneElement(M,{size:B==="small"?"tiny":"small",variant:"muted","aria-hidden":!0})),pe=t,Z=H=>V__default.default.createElement(pe,m(s({},S),{value:h,defaultValue:G,"data-test-id":T,style:I,placeholder:E,className:emotion.cx(w.input,H,r),name:u,type:k,ref:o,id:f,readOnly:n,"aria-readonly":n?"true":void 0,"aria-required":p?"true":void 0,"aria-invalid":l?"true":void 0,"aria-describedby":f?`${f}-${l?"validation":"helptext"}`:void 0,disabled:i,required:p,onChange:v,onBlur:y,onKeyDown:se,onFocus:O,size:B}));return M?V__default.default.createElement(f36Core.Box,{as:"div",className:w.rootComponentWithIcon},Z(w.inputWithIcon),W):Z()}oo.displayName="BaseInput";var j=V__default.default.forwardRef(oo);var It=(k,T)=>{var h=k,{className:e,testId:o="cf-ui-text-input",id:t,value:r,defaultValue:i,onChange:n,onFocus:p,isInvalid:l,isDisabled:f,isRequired:u,isReadOnly:y,size:b="medium",maxLength:x}=h,C=c(h,["className","testId","id","value","defaultValue","onChange","onFocus","isInvalid","isDisabled","isRequired","isReadOnly","size","maxLength"]);let w=P({id:t,isInvalid:l,isDisabled:f,isRequired:u,isReadOnly:y}),{setMaxLength:E,maxLength:L,setInputValue:I,inputValue:M}=w,G=c(w,["setMaxLength","maxLength","setInputValue","inputValue"]);V.useEffect(()=>{var O;x!==void 0&&typeof E=="function"&&(E(x),I((O=r!=null?r:i)!=null?O:""));},[x,E,I,i,r]);let B=O=>{typeof I=="function"&&I(O.target.value),n==null||n(O);},R=V.useRef(null),S=T||R;return V__default.default.createElement(j,m(s(s({type:"text"},C),G),{testId:o,ref:S,onChange:x?B:n,onFocus:p,as:"input",className:e,value:r,defaultValue:i,size:b,maxLength:x}))},ro=V__default.default.forwardRef(It);var Et=({spacing:e})=>{if(e==="none")return emotion.css({position:"relative","& button, & input":{borderRadius:"0 !important"},"& > *":{marginRight:"-1px !important","&:not(:focus), & button:not(:focus)":{boxShadow:"none !important"},"&:first-child, &:first-child > input, &:first-child button":{borderBottomLeftRadius:`${a__default.default.borderRadiusMedium} !important`,borderTopLeftRadius:`${a__default.default.borderRadiusMedium} !important`},"&:last-child, &:last-child > input, &:last-child button":{borderBottomRightRadius:`${a__default.default.borderRadiusMedium} !important`,borderTopRightRadius:`${a__default.default.borderRadiusMedium} !important`,marginRight:"0 !important"},"&:focus, &:focus-within":{zIndex:a__default.default.zIndexDefault+1}}})},no=({spacing:e})=>({inputGroup:Et({spacing:e})});var Mt=(e,o)=>{let l=e,{children:t,className:r,spacing:i="none"}=l,n=c(l,["children","className","spacing"]),p=no({spacing:i});return V__default.default.createElement(f36Core.Stack,m(s({},n),{spacing:i,ref:o,fullWidth:!0,className:emotion.cx(p.inputGroup,r)}),t)},so=V__default.default.forwardRef(Mt);var po=ro;po.Group=so;var Ft=(e,o)=>{let k=e,{testId:t="cf-ui-switch",id:r,isDisabled:i,isInvalid:n,isRequired:p,children:l}=k,f=c(k,["testId","id","isDisabled","isInvalid","isRequired","children"]),h=P({id:r,isDisabled:i,isInvalid:n,isRequired:p}),T=c(h,["inputValue","setInputValue","maxLength","setMaxLength","isReadOnly"]);return V__default.default.createElement(_,m(s(s({},T),f),{testId:t,type:"switch",ref:o}),l)},lo=V__default.default.forwardRef(Ft);var mo=()=>({error:emotion.css({"&:focus":{borderColor:a__default.default.red600,boxShadow:a__default.default.glowNegative}}),disabled:emotion.css({"&:focus":{borderColor:a__default.default.gray300,boxShadow:"none"}})});var Ht=(T,C)=>{var k=T,{className:e,isDisabled:o,isInvalid:t,isRequired:r,isReadOnly:i,onChange:n,testId:p="cf-ui-textarea",id:l,resize:f="vertical",maxLength:u,value:y,defaultValue:b}=k,x=c(k,["className","isDisabled","isInvalid","isRequired","isReadOnly","onChange","testId","id","resize","maxLength","value","defaultValue"]);let h=mo(),R=P({id:l,isInvalid:t,isDisabled:o,isRequired:r,isReadOnly:i}),{setMaxLength:E,maxLength:L,setInputValue:I,inputValue:M}=R,G=c(R,["setMaxLength","maxLength","setInputValue","inputValue"]);V.useEffect(()=>{var S;u!==void 0&&typeof E=="function"&&(E(u),I((S=y!=null?y:b)!=null?S:""));},[b,u,I,E,y]);let B=S=>{typeof I=="function"&&I(S.target.value),n==null||n(S);};return V__default.default.createElement(j,m(s(s({},x),G),{defaultValue:b,value:y,testId:p,as:"textarea",ref:C,className:emotion.cx(e,{[h.disabled]:o,[h.error]:t}),maxLength:u,resize:f,onChange:u?B:n}))},fo=V__default.default.forwardRef(Ht);var ye=r=>{var i=r,{testId:e="cf-ui-select-option",isDisabled:o}=i,t=c(i,["testId","isDisabled"]);return V__default.default.createElement("option",m(s({"data-test-id":e},t),{disabled:o}))};function xo({isInvalid:e,isDisabled:o,size:t,density:r}){let i=()=>{switch(!0){case t==="small":return {padding:`${a__default.default.spacing2Xs} ${a__default.default.spacingL} ${a__default.default.spacing2Xs} ${a__default.default.spacingXs}`,height:"32px"};case(t==="medium"&&r==="high"):return {padding:`${a__default.default.spacing2Xs} ${a__default.default.spacingL} ${a__default.default.spacing2Xs} ${a__default.default.spacingXs}`,height:"32px",fontSize:a__default.default.fontSizeMHigh,lineHeight:a__default.default.lineHeightMHigh,borderRadius:a__default.default.borderRadiusSmall};case(t==="medium"||r==="low"):default:return {padding:`10px ${a__default.default.spacingL} 10px ${a__default.default.spacingS}`,height:"40px"}}},n=emotion.css({width:"100%",display:"block",appearance:"none",backgroundColor:a__default.default.colorWhite,color:a__default.default.gray700,fontSize:a__default.default.fontSizeM,lineHeight:a__default.default.lineHeightM,fontFamily:a__default.default.fontStackPrimary,borderRadius:a__default.default.borderRadiusMedium,boxShadow:a__default.default.insetBoxShadowDefault,outline:"none",border:`1px solid ${a__default.default.gray300}`,cursor:"pointer",overflow:"hidden",textOverflow:"ellipsis","&::placeholder":{color:a__default.default.gray500},"&:focus":{outline:"none",boxShadow:a__default.default.glowPrimary,borderColor:a__default.default.blue500},"&:-moz-focusring":{color:"transparent",textShadow:"0 0 0 #000"},"&::-ms-expand":{display:"none"}}),p=emotion.css({backgroundColor:a__default.default.gray100,cursor:"not-allowed",color:a__default.default.gray600,"&:focus, &:active":{borderColor:a__default.default.gray300}}),l=emotion.css({borderColor:o?a__default.default.red300:a__default.default.red600,"&:focus":{borderColor:a__default.default.red600,boxShadow:a__default.default.glowNegative}});return {wrapper:emotion.css({position:"relative",display:"block",width:"auto"}),select:emotion.css([n,i(),o&&p,e&&l]),icon:emotion.css({position:"absolute",right:a__default.default.spacingXs,top:"50%",marginTop:"-8px",pointerEvents:"none"})}}var Nt=(T,C)=>{var k=T,{id:e,children:o,className:t,isInvalid:r,isDisabled:i,isRequired:n,testId:p="cf-ui-select",willBlurOnEsc:l=!0,onKeyDown:f,size:u="medium",value:y=void 0,defaultValue:b=void 0}=k,x=c(k,["id","children","className","isInvalid","isDisabled","isRequired","testId","willBlurOnEsc","onKeyDown","size","value","defaultValue"]);let h=P({isDisabled:i,isInvalid:r,isRequired:n,id:e}),E=f36Utils.useDensity(),L=xo({isDisabled:h.isDisabled,isInvalid:h.isInvalid,size:u,density:E}),I=V.useCallback(M=>{M.nativeEvent.code==="Escape"&&l&&M.currentTarget.blur(),f&&f(M);},[f,l]);return V__default.default.createElement("div",{className:emotion.cx(L.wrapper,t)},V__default.default.createElement("select",m(s({},x),{id:h.id,"data-test-id":p,className:L.select,onKeyDown:I,required:h.isRequired,"aria-required":h.isRequired?"true":void 0,"aria-invalid":h.isInvalid?!0:void 0,"aria-describedby":h.id?`${h.id}-${h.isInvalid?"validation":"helptext"}`:void 0,disabled:h.isDisabled,defaultValue:b,value:y,ref:C}),o),V__default.default.createElement(f36Icons.ChevronDownIcon,{className:L.icon,variant:"muted"}))},ho=V__default.default.forwardRef(Nt);var go=ho;go.Option=ye;function yo(n,i){var p=n,{children:e,onSubmit:o,testId:t="cf-ui-form-label"}=p,r=c(p,["children","onSubmit","testId"]);let l=V.useCallback(f=>{f.preventDefault(),o&&o(f);},[o]);return V__default.default.createElement("form",s({ref:i,"data-test-id":t,onSubmit:l},r),e)}yo.displayName="Form";var bo=V.forwardRef(yo); | ||
var Po=Object.defineProperty,Io=Object.defineProperties;var ko=Object.getOwnPropertyDescriptors;var J=Object.getOwnPropertySymbols;var Se=Object.prototype.hasOwnProperty,Te=Object.prototype.propertyIsEnumerable;var ke=(e,o,t)=>o in e?Po(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,s=(e,o)=>{for(var t in o||(o={}))Se.call(o,t)&&ke(e,t,o[t]);if(J)for(var t of J(o))Te.call(o,t)&&ke(e,t,o[t]);return e},m=(e,o)=>Io(e,ko(o));var l=(e,o)=>{var t={};for(var r in e)Se.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&J)for(var r of J(e))o.indexOf(r)<0&&Te.call(e,r)&&(t[r]=e[r]);return t};var Ee=()=>{},le=_.createContext(void 0),Eo=()=>_.useContext(le),P=e=>{var t,r,i,n,p;let o=Eo();return o?{isDisabled:(t=e.isDisabled)!=null?t:o.isDisabled,isInvalid:(r=e.isInvalid)!=null?r:o.isInvalid,isReadOnly:(i=e.isReadOnly)!=null?i:o.isReadOnly,isRequired:(n=e.isRequired)!=null?n:o.isRequired,id:(p=e.id)!=null?p:o.id,maxLength:o.maxLength,inputValue:o.inputValue,setMaxLength:o.setMaxLength||Ee,setInputValue:o.setInputValue||Ee}:e};var D=___default.default.forwardRef((r,t)=>{var i=r,{testId:e="cf-ui-help-text"}=i,o=l(i,["testId"]);let{id:n}=P({}),p=f36Utils.useDensity();return ___default.default.createElement(f36Typography.Text,m(s({as:"p",fontColor:"gray500",fontSize:p==="high"?"fontSizeMHigh":"fontSizeM",lineHeight:p==="high"?"lineHeightMHigh":"lineHeightM",testId:e,id:`${n}-helptext`,marginTop:"spacingXs"},o),{ref:t}))});D.displayName="HelpText";var $=_.forwardRef((i,r)=>{var n=i,{children:e,testId:o="cf-ui-validation-message"}=n,t=l(n,["children","testId"]);let{id:p}=P({}),c=f36Utils.useDensity();return ___default.default.createElement(f36Core.Flex,m(s({marginTop:"spacing2Xs"},t),{ref:r,testId:o,alignItems:"center",id:p?`${p}-validation`:void 0,"aria-live":"assertive"}),___default.default.createElement(f36Core.Flex,{marginRight:c==="high"?"spacing2Xs":"spacingXs"},___default.default.createElement(f36Icons.ErrorCircleOutlineIcon,{size:c==="high"?"tiny":"small",variant:"negative","aria-hidden":"true"})),___default.default.createElement(f36Typography.Text,{as:"p",fontColor:"red600",fontSize:c==="high"?"fontSizeMHigh":"fontSizeM",lineHeight:c==="high"?"lineHeightMHigh":"lineHeightM"},e))});$.displayName="ValidationMessage";var me=({isDisabled:e})=>({alignItems:"center",background:e?a__default.default.gray300:a__default.default.colorWhite,border:`2px solid ${a__default.default.gray300}`,boxSizing:"border-box",display:"inline-flex",height:a__default.default.spacingM,justifyContent:"center",width:a__default.default.spacingM}),vo=({isDisabled:e})=>{let o=m(s({},me({isDisabled:e})),{backgroundColor:e?a__default.default.gray300:a__default.default.colorWhite,borderRadius:a__default.default.borderRadiusSmall,"& svg":{fill:e?a__default.default.gray300:a__default.default.colorWhite},"input:indeterminate + &, input:checked + &":{backgroundColor:e?a__default.default.gray300:a__default.default.blue600,borderColor:e?a__default.default.gray300:a__default.default.blue600,"& svg":{fill:e?a__default.default.gray600:a__default.default.colorWhite}}});return emotion.css(o)},wo=({isDisabled:e})=>{let o={content:'""',borderRadius:"50%",backgroundColor:e?a__default.default.gray300:a__default.default.colorWhite,width:a__default.default.borderRadiusMedium,height:a__default.default.borderRadiusMedium},t=m(s({},me({isDisabled:e})),{backgroundColor:e?a__default.default.gray300:a__default.default.colorWhite,borderRadius:"50%","&:before":s({},o),"input:checked + &":{backgroundColor:e?a__default.default.gray300:a__default.default.blue600,borderColor:e?a__default.default.gray300:a__default.default.blue600,"&:before":{backgroundColor:e?a__default.default.gray600:a__default.default.colorWhite}}});return emotion.css(t)},Go=({isDisabled:e,size:o})=>{let t=o==="small"?{height:a__default.default.spacingM,width:a__default.default.spacingXl,"&:before":{height:a__default.default.spacingS,width:a__default.default.spacingS},"input:checked + &:before":{transform:`translateX(${a__default.default.spacingM})`}}:{height:"20px",width:"40px","&:before":{height:a__default.default.spacingM,width:a__default.default.spacingM},"input:checked + &:before":{transform:"translateX(20px)"}},r=m(s({},me({isDisabled:e})),{background:a__default.default.gray600,borderColor:a__default.default.gray600,borderRadius:a__default.default.borderRadiusSmall,justifyContent:"space-around",position:"relative",flexShrink:0,"&:before":{background:a__default.default.colorWhite,borderRadius:`calc(${a__default.default.borderRadiusSmall}/2)`,content:'""',left:0,position:"absolute",transition:`transform ${a__default.default.transitionEasingDefault} ${a__default.default.transitionDurationDefault}`},"input:checked + &":{background:a__default.default.blue600,borderColor:a__default.default.blue600}}),i={"&, input:checked + &":{background:a__default.default.gray200,borderColor:a__default.default.gray200},"&:before":{background:a__default.default.gray400},"& svg":{fill:a__default.default.gray400}};return emotion.css([r,t,e&&i])},Oo=e=>{let{isDisabled:o,size:t}=e;return {radio:wo({isDisabled:o}),checkbox:vo({isDisabled:o}),switch:Go({isDisabled:o,size:t})}},Fe=Oo;var He=e=>{let{type:o,isIndeterminate:t,isDisabled:r,size:i="medium"}=e,n=Fe({isDisabled:r,size:i});return o==="switch"?___default.default.createElement("span",{className:n.switch},___default.default.createElement(f36Icons.DoneIcon,{size:"tiny",variant:"white"}),___default.default.createElement(f36Icons.CloseIcon,{size:"tiny",variant:"white"})):___default.default.createElement("span",{className:n[o]},o==="checkbox"&&(t?___default.default.createElement(f36Icons.MinusIcon,{size:"tiny",variant:"white"}):___default.default.createElement(f36Icons.DoneIcon,{size:"tiny",variant:"white"})))};var Be=e=>e==="small"?{height:a__default.default.spacingM,width:a__default.default.spacingXl}:{height:"20px",width:"40px"},No=({size:e,type:o,density:t})=>{let r=a__default.default.spacingM;return o==="switch"&&(r=Be(e).width),{marginLeft:`calc(${r} + ${a__default.default.spacingXs})`,marginTop:0,fontSize:t==="high"?a__default.default.fontSizeMHigh:a__default.default.fontSizeM,lineHeight:t==="high"?a__default.default.lineHeightMHigh:a__default.default.lineHeightM}},_o=({isDisabled:e,type:o,size:t,density:r})=>({wrapper:emotion.css({alignItems:"center",display:"inline-flex",position:"relative",margin:"0",columnGap:a__default.default.spacingXs}),input:emotion.css([{cursor:e?"not-allowed":"pointer",height:a__default.default.spacingM,margin:0,opacity:0,position:"absolute",width:a__default.default.spacingM,zIndex:a__default.default.zIndexDefault,"+ span":{minWidth:a__default.default.spacingM},"&:focus":{outline:"none","& + span":{boxShadow:a__default.default.glowPrimary}},"&:focus:not(:focus-visible) + span":{boxShadow:"unset"},"&:focus-visible + span":{boxShadow:a__default.default.glowPrimary}},o==="switch"&&Be(t)]),helpText:emotion.css(No({size:t,type:o,density:r}))}),ve=_o;function we(e,o){let Pe=e,{isChecked:t=void 0,onChange:r,onFocus:i,onBlur:n,onKeyDown:p,type:c="checkbox",value:d,isDisabled:x,isIndeterminate:y,isInvalid:b,isRequired:g=!1,id:C,willBlurOnEsc:S=!0,testId:I="cf-ui-base-checkbox",className:h="",defaultChecked:T=void 0,name:H,inputProps:k={},children:M,"aria-label":G,size:B="medium",helpText:R}=Pe,E=l(Pe,["isChecked","onChange","onFocus","onBlur","onKeyDown","type","value","isDisabled","isIndeterminate","isInvalid","isRequired","id","willBlurOnEsc","testId","className","defaultChecked","name","inputProps","children","aria-label","size","helpText"]),z=f36Utils.useDensity(),v=_.useRef(null),w=o||v,{id:se}=P({});_.useEffect(()=>{w.current&&(w.current.indeterminate=y);},[y,w]);let W=ve({isDisabled:x,type:c,size:B,density:z}),pe=_.useCallback(O=>{O.persist(),i&&i(O);},[i]),ae=_.useCallback(O=>{O.persist(),n&&n(O);},[n]),K=_.useCallback(O=>{var Ie;O.persist(),S&&O.key==="Escape"&&((Ie=w==null?void 0:w.current)==null||Ie.blur()),p&&p(O);},[S,p,w]),Z=typeof t!==void 0?t:T,F=C?`${C}-helptext`:void 0,Co=b?`${se}-validation`:R?F:void 0;return ___default.default.createElement(f36Core.Flex,{alignItems:"flex-start",flexDirection:"column",className:h},___default.default.createElement(f36Typography.Text,s({as:"label",fontColor:"gray900",fontWeight:"fontWeightMedium",fontSize:z==="high"?"fontSizeMHigh":"fontSizeM",lineHeight:z==="high"?"lineHeightMHigh":"lineHeightM",className:W.wrapper,htmlFor:C,testId:I},E),___default.default.createElement("input",m(s({},k),{"aria-label":G,checked:t,defaultChecked:T,className:W.input,type:c==="switch"?"checkbox":c,onChange:r,onFocus:pe,onBlur:ae,onKeyDown:K,value:d,disabled:x,role:c,"aria-checked":y?"mixed":Z,ref:w,required:g,"aria-required":g?"true":void 0,"aria-invalid":b?"true":void 0,"aria-describedby":Co,id:C,name:H})),___default.default.createElement(He,{type:c,isDisabled:x,isIndeterminate:y,size:B}),M),R&&___default.default.createElement(D,{id:F,className:W.helpText},R))}we.displayName="BaseCheckbox";var N=___default.default.forwardRef(we);var fe=_.createContext(void 0),jo=()=>_.useContext(fe),Y=e=>{var p,c,d;let o=jo();if(!o)return e;let t,r;return o.type==="checkbox"&&(t=o.value===void 0||(p=o.value)==null?void 0:p.includes(e.value),r=t!==void 0||(c=o.defaultValue)==null?void 0:c.includes(e.value)),o.type==="radio"&&(t=o.value===void 0?void 0:o.value===e.value,r=t!==void 0?void 0:o.defaultValue===e.value),{defaultChecked:r,isChecked:t,onBlur:x=>{e.onBlur&&e.onBlur(x),o.onBlur&&o.onBlur(x);},onChange:x=>{e.onChange&&e.onChange(x),o.onChange&&o.onChange(x);},name:(d=o.name)!=null?d:e.name,value:e.value}};var Zo=(e,o)=>{let R=e,{testId:t="cf-ui-checkbox",id:r,isDisabled:i,isRequired:n,isInvalid:p,children:c,onBlur:d,onChange:x,defaultChecked:y,isChecked:b,value:g,name:C}=R,S=l(R,["testId","id","isDisabled","isRequired","isInvalid","children","onBlur","onChange","defaultChecked","isChecked","value","name"]),I=f36Core.useId(r,"checkbox"),h=Y({onBlur:d,onChange:x,value:g,defaultChecked:y,isChecked:b,name:C}),E=P({id:I,isDisabled:i,isInvalid:p,isRequired:n}),B=l(E,["inputValue","setInputValue","maxLength","setMaxLength","isReadOnly"]);return ___default.default.createElement(N,m(s(s(s({},B),h),S),{type:"checkbox",testId:t,ref:o}),c)},Oe=___default.default.forwardRef(Zo);var Qo=(e,o)=>{let p=e,{children:t,className:r,testId:i="cf-ui-base-checkbox-group"}=p,n=l(p,["children","className","testId"]);return ___default.default.createElement(fe.Provider,{value:n},___default.default.createElement(f36Core.Stack,{ref:o,testId:i,className:r,flexDirection:"column",alignItems:"flex-start",spacing:"spacingXs"},t))},ee=___default.default.forwardRef(Qo);var Yo=(e,o)=>{let n=e,{children:t,testId:r="cf-ui-checkbox-group"}=n,i=l(n,["children","testId"]);return ___default.default.createElement(ee,s({ref:o,testId:r,type:"checkbox"},i),t)},De=___default.default.forwardRef(Yo);var Ne=Oe;Ne.Group=De;var tt="div";function Ve(b,y){var g=b,{as:e,isInvalid:o,isRequired:t,isDisabled:r,isReadOnly:i,children:n,marginBottom:p="spacingL",id:c,testId:d="cf-ui-form-control"}=g,x=l(g,["as","isInvalid","isRequired","isDisabled","isReadOnly","children","marginBottom","id","testId"]);let C=f36Core.useId(c,"field-"),[S,I]=_.useState(""),[h,T]=_.useState(0),H=e==="fieldset"?void 0:"group",k=e||tt,M={id:C,isRequired:t,isDisabled:r,isInvalid:o,isReadOnly:i,inputValue:S,setInputValue:I,maxLength:h,setMaxLength:T};return ___default.default.createElement(le.Provider,{value:M},___default.default.createElement(f36Core.Box,s({as:k,ref:y,role:H,testId:d,marginBottom:p},x),n))}Ve.displayName="FormControl";var Ae=___default.default.forwardRef(Ve);function $e(){return {root:emotion.css({display:"inline-block",fontWeight:a__default.default.fontWeightMedium}),indicator:emotion.css({color:a__default.default.gray500,fontWeight:a__default.default.fontWeightNormal,marginLeft:a__default.default.spacing2Xs})}}var pt="label";function qe(d,c){var x=d,{as:e,children:o,className:t,isRequired:r,requiredText:i="required",testId:n="cf-ui-form-label"}=x,p=l(x,["as","children","className","isRequired","requiredText","testId"]);let y=f36Utils.useDensity(),b=$e(),g=P({isRequired:r}),C=g.id?g.id+"-label":void 0,S=e!=="legend"?{htmlFor:p.htmlFor||g.id}:{};return ___default.default.createElement(f36Typography.Text,m(s(m(s({as:e||pt,marginBottom:"spacingXs"},p),{fontColor:"gray900",id:C}),S),{className:emotion.cx(b.root,t),ref:c,testId:n,fontSize:y==="high"?"fontSizeMHigh":"fontSizeM",lineHeight:y==="high"?"lineHeightMHigh":"lineHeightM"}),o,g.isRequired&&___default.default.createElement("span",{className:b.indicator},"(",i,")"))}qe.displayName="FormLabel";var te=_.forwardRef(qe);function Ue(){return {root:emotion.css({flexShrink:0,paddingLeft:a__default.default.spacingM,textAlign:"right"})}}var X=_.forwardRef((i,r)=>{var n=i,{testId:e="cf-ui-counter",className:o}=n,t=l(n,["testId","className"]);let{maxLength:p,inputValue:c}=P({}),d=Ue();return !!p&&___default.default.createElement(f36Typography.Text,m(s({as:"p",fontColor:"gray700",fontSize:"fontSizeM",testId:e,marginTop:"spacingXs"},t),{className:emotion.cx(d.root,o),ref:r}),c.length," / ",p)});X.displayName="Counter";var q=Ae;q.Label=te;q.ValidationMessage=$;q.HelpText=D;q.Counter=X;var xt=(e,o)=>{let R=e,{testId:t="cf-ui-radio-button",id:r,isDisabled:i,isInvalid:n,isRequired:p,children:c,onBlur:d,onChange:x,defaultChecked:y,isChecked:b,value:g,name:C}=R,S=l(R,["testId","id","isDisabled","isInvalid","isRequired","children","onBlur","onChange","defaultChecked","isChecked","value","name"]),I=f36Core.useId(r,"radio"),h=Y({onBlur:d,onChange:x,value:g,defaultChecked:y,isChecked:b,name:C}),E=P({id:I,isDisabled:i,isInvalid:n,isRequired:p}),B=l(E,["inputValue","setInputValue","maxLength","setMaxLength","isReadOnly"]);return ___default.default.createElement(N,m(s(s(s({},B),S),h),{type:"radio",testId:t,ref:o}),c)},Ke=___default.default.forwardRef(xt);var ht=(e,o)=>{let n=e,{children:t,testId:r="cf-ui-radio-group"}=n,i=l(n,["children","testId"]);return ___default.default.createElement(ee,s({ref:o,testId:r,type:"radio"},i),t)},Je=___default.default.forwardRef(ht);var Qe=Ke;Qe.Group=Je;var gt=({size:e,density:o})=>{let t=o==="high";return e==="small"?{padding:a__default.default.spacingXs,minHeight:t?a__default.default.spacingL:a__default.default.spacingXl,maxHeight:t?a__default.default.spacingL:a__default.default.spacingXl}:{padding:t?a__default.default.spacingXs:`10px ${a__default.default.spacingS}`,minHeight:t?a__default.default.spacingXl:"40px",maxHeight:t?a__default.default.spacingXl:"40px"}},Ye=({isDisabled:e,isInvalid:o,zIndexBase:t=a__default.default.zIndexDefault})=>e||o?t+1:t,yt=({isDisabled:e,isInvalid:o})=>e?{borderColor:a__default.default.gray300,boxShadow:"none"}:o?{borderColor:a__default.default.red600,boxShadow:a__default.default.glowNegative}:{},bt=({as:e,isDisabled:o,isInvalid:t,size:r,resize:i,density:n="low"})=>{let p={low:{borderRadius:a__default.default.borderRadiusMedium,lineHeight:a__default.default.lineHeightM,fontSize:a__default.default.fontSizeM},high:{borderRadius:a__default.default.borderRadiusSmall,lineHeight:a__default.default.lineHeightMHigh,fontSize:a__default.default.fontSizeMHigh}};return {rootComponentWithIcon:emotion.css({position:"relative",display:"flex",width:"100%",zIndex:Ye({isDisabled:o,isInvalid:t})}),input:emotion.css(m(s(s({outline:"none",boxShadow:a__default.default.insetBoxShadowDefault,boxSizing:"border-box",backgroundColor:o?a__default.default.gray100:a__default.default.colorWhite,border:`1px solid ${t?a__default.default.red600:a__default.default.gray300}`,color:a__default.default.gray700,fontFamily:a__default.default.fontStackPrimary,margin:0,cursor:o?"not-allowed":"auto",width:"100%",zIndex:Ye({isDisabled:o,isInvalid:t})},p[n]),e==="textarea"?{resize:i}:gt({size:r,density:n})),{"&::placeholder":{color:a__default.default.gray500},"&:active, &:active:hover, &:focus":s({borderColor:a__default.default.blue600,boxShadow:a__default.default.glowPrimary},yt({isDisabled:o,isInvalid:t}))})),inputWithIcon:emotion.css({paddingLeft:a__default.default.spacingXl}),iconPlaceholder:emotion.css({position:"absolute",pointerEvents:"none",top:0,bottom:0,left:r==="small"?a__default.default.spacingXs:a__default.default.spacingS,display:"flex",alignItems:"center",zIndex:a__default.default.zIndexDefault})}},eo=bt;var It="input";function to(e,o){let Z=e,{as:t=It,className:r,isDisabled:i,isReadOnly:n,isRequired:p,isInvalid:c,id:d,name:x,onBlur:y,onChange:b,onFocus:g,onKeyDown:C,testId:S="cf-ui-base-input",type:I="text",value:h=void 0,placeholder:T,willBlurOnEsc:H=!0,style:k,icon:M,defaultValue:G,size:B="medium",resize:R="vertical"}=Z,E=l(Z,["as","className","isDisabled","isReadOnly","isRequired","isInvalid","id","name","onBlur","onChange","onFocus","onKeyDown","testId","type","value","placeholder","willBlurOnEsc","style","icon","defaultValue","size","resize"]),z=f36Utils.useDensity(),v=eo({as:t,isDisabled:i,isInvalid:c,size:B,resize:R,density:z}),w=_.useCallback(F=>{F.persist(),g&&g(F);},[g]),se=_.useCallback(F=>{F.persist(),!(i||n)&&b&&b(F);},[b,i,n]),W=_.useCallback(F=>{F.persist(),C&&C(F),F.nativeEvent.code==="Escape"&&H&&F.currentTarget.blur();},[H,C]),pe=M&&___default.default.createElement(f36Core.Box,{as:"span",className:v.iconPlaceholder},___default.default.cloneElement(M,{size:"tiny",variant:"muted","aria-hidden":!0})),ae=t,K=F=>___default.default.createElement(ae,m(s({},E),{value:h,defaultValue:G,"data-test-id":S,style:k,placeholder:T,className:emotion.cx(v.input,F,r),name:x,type:I,ref:o,id:d,readOnly:n,"aria-readonly":n?"true":void 0,"aria-required":p?"true":void 0,"aria-invalid":c?"true":void 0,"aria-describedby":d?`${d}-${c?"validation":"helptext"}`:void 0,disabled:i,required:p,onChange:se,onBlur:y,onKeyDown:W,onFocus:w,size:B}));return M?___default.default.createElement(f36Core.Box,{as:"div",className:v.rootComponentWithIcon},K(v.inputWithIcon),pe):K()}to.displayName="BaseInput";var j=___default.default.forwardRef(to);var Tt=(I,S)=>{var h=I,{className:e,testId:o="cf-ui-text-input",id:t,value:r,defaultValue:i,onChange:n,onFocus:p,isInvalid:c,isDisabled:d,isRequired:x,isReadOnly:y,size:b="medium",maxLength:g}=h,C=l(h,["className","testId","id","value","defaultValue","onChange","onFocus","isInvalid","isDisabled","isRequired","isReadOnly","size","maxLength"]);let z=P({id:t,isInvalid:c,isDisabled:d,isRequired:x,isReadOnly:y}),{setMaxLength:T,maxLength:H,setInputValue:k,inputValue:M}=z,G=l(z,["setMaxLength","maxLength","setInputValue","inputValue"]);_.useEffect(()=>{var v;g!==void 0&&typeof T=="function"&&(T(g),k((v=r!=null?r:i)!=null?v:""));},[g,T,k,i,r]);let B=v=>{typeof k=="function"&&k(v.target.value),n==null||n(v);},R=_.useRef(null),E=S||R;return ___default.default.createElement(j,m(s(s({type:"text"},C),G),{testId:o,ref:E,onChange:g?B:n,onFocus:p,as:"input",className:e,value:r,defaultValue:i,size:b,maxLength:g}))},no=___default.default.forwardRef(Tt);var Rt=({spacing:e,density:o})=>{if(e!=="none")return;let t=o==="high"?a__default.default.borderRadiusSmall:a__default.default.borderRadiusMedium;return emotion.css({position:"relative","& button, & input":{borderRadius:"0 !important"},"& > *":{marginRight:"-1px !important","&:not(:focus), & button:not(:focus)":{boxShadow:"none !important"},"&:first-child, &:first-child > input, &:first-child button":{borderBottomLeftRadius:`${t} !important`,borderTopLeftRadius:`${t} !important`},"&:last-child, &:last-child > input, &:last-child button":{borderBottomRightRadius:`${t} !important`,borderTopRightRadius:`${t} !important`,marginRight:"0 !important"},"&:focus, &:focus-within":{zIndex:a__default.default.zIndexDefault+1}}})},io=({spacing:e,density:o})=>({inputGroup:Rt({spacing:e,density:o})});var Ht=(e,o)=>{let d=e,{children:t,className:r,spacing:i="none"}=d,n=l(d,["children","className","spacing"]),p=f36Utils.useDensity(),c=io({spacing:i,density:p});return ___default.default.createElement(f36Core.Stack,m(s({},n),{spacing:i,ref:o,fullWidth:!0,className:emotion.cx(c.inputGroup,r)}),t)},po=___default.default.forwardRef(Ht);var ao=no;ao.Group=po;var Bt=(e,o)=>{let I=e,{testId:t="cf-ui-switch",id:r,isDisabled:i,isInvalid:n,isRequired:p,children:c}=I,d=l(I,["testId","id","isDisabled","isInvalid","isRequired","children"]),h=P({id:r,isDisabled:i,isInvalid:n,isRequired:p}),S=l(h,["inputValue","setInputValue","maxLength","setMaxLength","isReadOnly"]);return ___default.default.createElement(N,m(s(s({},S),d),{testId:t,type:"switch",ref:o}),c)},co=___default.default.forwardRef(Bt);var mo=()=>({root:emotion.css({padding:`10px ${a__default.default.spacingS}`}),error:emotion.css({"&:focus":{borderColor:a__default.default.red600,boxShadow:a__default.default.glowNegative}}),disabled:emotion.css({"&:focus":{borderColor:a__default.default.gray300,boxShadow:"none"}})});var Gt=(S,C)=>{var I=S,{className:e,isDisabled:o,isInvalid:t,isRequired:r,isReadOnly:i,onChange:n,testId:p="cf-ui-textarea",id:c,resize:d="vertical",maxLength:x,value:y,defaultValue:b}=I,g=l(I,["className","isDisabled","isInvalid","isRequired","isReadOnly","onChange","testId","id","resize","maxLength","value","defaultValue"]);let h=mo(),R=P({id:c,isInvalid:t,isDisabled:o,isRequired:r,isReadOnly:i}),{setMaxLength:T,maxLength:H,setInputValue:k,inputValue:M}=R,G=l(R,["setMaxLength","maxLength","setInputValue","inputValue"]);_.useEffect(()=>{var E;x!==void 0&&typeof T=="function"&&(T(x),k((E=y!=null?y:b)!=null?E:""));},[b,x,k,T,y]);let B=E=>{typeof k=="function"&&k(E.target.value),n==null||n(E);};return ___default.default.createElement(j,m(s(s({},g),G),{defaultValue:b,value:y,testId:p,as:"textarea",ref:C,className:emotion.cx(h.root,e,{[h.disabled]:o,[h.error]:t}),maxLength:x,resize:d,onChange:x?B:n}))},fo=___default.default.forwardRef(Gt);var Ce=r=>{var i=r,{testId:e="cf-ui-select-option",isDisabled:o}=i,t=l(i,["testId","isDisabled"]);return ___default.default.createElement("option",m(s({"data-test-id":e},t),{disabled:o}))};function xo({isInvalid:e,isDisabled:o,size:t,density:r}){let i=()=>{switch(!0){case t==="small":return {padding:`${a__default.default.spacing2Xs} ${a__default.default.spacingL} ${a__default.default.spacing2Xs} ${a__default.default.spacingXs}`,height:"32px"};case(t==="medium"&&r==="high"):return {padding:`${a__default.default.spacing2Xs} ${a__default.default.spacingL} ${a__default.default.spacing2Xs} ${a__default.default.spacingXs}`,height:"32px",fontSize:a__default.default.fontSizeMHigh,lineHeight:a__default.default.lineHeightMHigh,borderRadius:a__default.default.borderRadiusSmall};case(t==="medium"||r==="low"):default:return {padding:`10px ${a__default.default.spacingL} 10px ${a__default.default.spacingS}`,height:"40px"}}},n=emotion.css({width:"100%",display:"block",appearance:"none",backgroundColor:a__default.default.colorWhite,color:a__default.default.gray700,fontSize:a__default.default.fontSizeM,lineHeight:a__default.default.lineHeightM,fontFamily:a__default.default.fontStackPrimary,borderRadius:a__default.default.borderRadiusMedium,boxShadow:a__default.default.insetBoxShadowDefault,outline:"none",border:`1px solid ${a__default.default.gray300}`,cursor:"pointer",overflow:"hidden",textOverflow:"ellipsis","&::placeholder":{color:a__default.default.gray500},"&:focus":{outline:"none",boxShadow:a__default.default.glowPrimary,borderColor:a__default.default.blue500},"&:-moz-focusring":{color:"transparent",textShadow:"0 0 0 #000"},"&::-ms-expand":{display:"none"}}),p=emotion.css({backgroundColor:a__default.default.gray100,cursor:"not-allowed",color:a__default.default.gray600,"&:focus, &:active":{borderColor:a__default.default.gray300}}),c=emotion.css({borderColor:o?a__default.default.red300:a__default.default.red600,"&:focus":{borderColor:a__default.default.red600,boxShadow:a__default.default.glowNegative}});return {wrapper:emotion.css({position:"relative",display:"block",width:"auto"}),select:emotion.css([n,i(),o&&p,e&&c]),icon:emotion.css({position:"absolute",right:a__default.default.spacingXs,top:"50%",marginTop:"-8px",pointerEvents:"none"})}}var Vt=(S,C)=>{var I=S,{id:e,children:o,className:t,isInvalid:r,isDisabled:i,isRequired:n,testId:p="cf-ui-select",willBlurOnEsc:c=!0,onKeyDown:d,size:x="medium",value:y=void 0,defaultValue:b=void 0}=I,g=l(I,["id","children","className","isInvalid","isDisabled","isRequired","testId","willBlurOnEsc","onKeyDown","size","value","defaultValue"]);let h=P({isDisabled:i,isInvalid:r,isRequired:n,id:e}),T=f36Utils.useDensity(),H=xo({isDisabled:h.isDisabled,isInvalid:h.isInvalid,size:x,density:T}),k=_.useCallback(M=>{M.nativeEvent.code==="Escape"&&c&&M.currentTarget.blur(),d&&d(M);},[d,c]);return ___default.default.createElement("div",{className:emotion.cx(H.wrapper,t)},___default.default.createElement("select",m(s({},g),{id:h.id,"data-test-id":p,className:H.select,onKeyDown:k,required:h.isRequired,"aria-required":h.isRequired?"true":void 0,"aria-invalid":h.isInvalid?!0:void 0,"aria-describedby":h.id?`${h.id}-${h.isInvalid?"validation":"helptext"}`:void 0,disabled:h.isDisabled,defaultValue:b,value:y,ref:C}),o),___default.default.createElement(f36Icons.ChevronDownIcon,{className:H.icon,variant:"muted"}))},ho=___default.default.forwardRef(Vt);var go=ho;go.Option=Ce;function yo(n,i){var p=n,{children:e,onSubmit:o,testId:t="cf-ui-form-label"}=p,r=l(p,["children","onSubmit","testId"]);let c=_.useCallback(d=>{d.preventDefault(),o&&o(d);},[o]);return ___default.default.createElement("form",s({ref:i,"data-test-id":t,onSubmit:c},r),e)}yo.displayName="Form";var bo=_.forwardRef(yo); | ||
@@ -23,9 +23,9 @@ exports.Checkbox = Ne; | ||
exports.FormControl = q; | ||
exports.FormLabel = re; | ||
exports.HelpText = N; | ||
exports.Option = ye; | ||
exports.Radio = Je; | ||
exports.FormLabel = te; | ||
exports.HelpText = D; | ||
exports.Option = Ce; | ||
exports.Radio = Qe; | ||
exports.Select = go; | ||
exports.Switch = lo; | ||
exports.TextInput = po; | ||
exports.Switch = co; | ||
exports.TextInput = ao; | ||
exports.Textarea = fo; | ||
@@ -32,0 +32,0 @@ exports.ValidationMessage = $; |
{ | ||
"name": "@contentful/f36-forms", | ||
"version": "4.58.4", | ||
"version": "4.59.0", | ||
"description": "Forma 36: Form React Components", | ||
@@ -9,6 +9,6 @@ "scripts": { | ||
"dependencies": { | ||
"@contentful/f36-core": "^4.58.4", | ||
"@contentful/f36-core": "^4.59.0", | ||
"@contentful/f36-icons": "^4.27.0", | ||
"@contentful/f36-tokens": "^4.0.4", | ||
"@contentful/f36-typography": "^4.58.4", | ||
"@contentful/f36-typography": "^4.59.0", | ||
"@contentful/f36-utils": "^4.24.3", | ||
@@ -15,0 +15,0 @@ "emotion": "^10.0.17" |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
246045
571