@truework/forms
Advanced tools
Comparing version 0.8.8 to 1.0.0
@@ -34,3 +34,3 @@ import * as React from 'react'; | ||
*/ | ||
export declare function DateInput({ name, label, disabled, initialMonth, initialDay, initialYear, minMonth, minDay, minYear, maxMonth, maxDay, maxYear, hasError, onUpdate, }: DateInputProps): JSX.Element; | ||
export declare function DateInput({ name, label, disabled, initialMonth, initialDay, initialYear, minMonth, minDay, minYear, maxMonth, maxDay, maxYear, hasError, onUpdate }: DateInputProps): JSX.Element; | ||
export declare function DateInputField({ name, validate, ...rest }: DateInputFieldProps): JSX.Element; | ||
@@ -37,0 +37,0 @@ export declare function DateInputFieldWithLabel(props: { |
@@ -31,4 +31,4 @@ import * as React from 'react'; | ||
} & React.RefAttributes<unknown>>; | ||
export declare function Dropdown({ value, placeholder, label, items, hasError, disabled, onSelect, onRemove, }: DropdownProps): JSX.Element; | ||
export declare function Dropdown({ value, placeholder, label, items, hasError, disabled, onSelect, onRemove }: DropdownProps): JSX.Element; | ||
export declare function DropdownField({ name, validate, ...rest }: DropdownFieldProps): JSX.Element; | ||
export declare function DropdownFieldWithLabel(props: DropdownFieldProps): JSX.Element; |
@@ -1,2 +0,2 @@ | ||
import{space as n,color as r,typography as o}from"styled-system";import{useSelect as e}from"use-drop";import t,{css as i}from"styled-components";import{Span as a,H5 as l,Icon as s,Box as c,P as d}from"@truework/ui";import{createElement as p,useRef as u,useState as b,useEffect as h,Fragment as m,forwardRef as f,Children as g,cloneElement as v,useCallback as y}from"react";import{Field as x,ErrorMessage as w}from"formik";import{get as k,times as O}from"lodash";import{clean as _,mask as z,format as j}from"parse-ssn";function D(n,r){var o={};for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&-1===r.indexOf(e)&&(o[e]=n[e]);return o}var E=Object.freeze([""]),B=t(s)(E),F=t.div(function(n){var r=n.theme;return"\n position: relative;\n width: 16px;\n height: 16px;\n border-radius: 2px;\n margin-top: 2px;\n margin-right: 8px;\n border: 1px solid "+(n.checked?r.colors.primaryDark:r.colors.outline)+";\n transition-property: background, border-color;\n transition-duration: "+r.transitionDurations.fast+";\n transition-timing-function: "+r.transitionTimingFunctions.ease+";\n\n "+B+" {\n display: block;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: auto;\n width: 12px;\n height: 12px;\n color: white;\n stroke: white;\n stroke-width: 2px;\n transition-property: transform;\n transition-duration: "+r.transitionDurations.fast+";\n transition-timing-function: "+r.transitionTimingFunctions.ease+";\n transform: scale(0);\n }\n "}),C=t(l)(function(n){var r=n.theme;return"\n width: calc(100% - 16px);\n transition-property: color;\n transition-duration: "+r.transitionDurations.fast+";\n transition-timing-function: "+r.transitionTimingFunctions.ease+";\n "}),T=t.input(function(n){var r=n.theme;return"\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n position: absolute;\n whitespace: nowrap;\n wordwrap: normal;\n\n &:focus ~ "+F+" {\n border-color: "+r.colors.primaryDark+";\n }\n &:checked ~ "+F+" {\n background: "+r.colors.primary+";\n border-color: "+r.colors.primaryDark+";\n\n "+B+" {\n transform: scale(1);\n }\n }\n &:focus ~ "+C+", &:focus ~"+a+", &:checked ~ "+a+" {\n color: "+r.colors.primary+";\n }\n\n "+(n.hasError?"\n & ~ "+F+" {\n border-color: "+r.colors.error+" !important;\n }\n ":"")+"\n "}),I=t.label(function(n){var r=n.theme;return"\n display: flex;\n align-items: flex-start;\n width: 100%;\n margin-bottom: 0 !important;\n\n "+(n.disabled?"\n "+F+" {\n background: "+r.colors.background+";\n }\n "+a+" {\n color: "+r.colors.placeholder+";\n }\n ":"\n &:hover "+F+" {\n border-color: "+r.colors.primaryDark+";\n }\n &:hover "+C+", &:hover "+a+" {\n color: "+r.colors.primary+";\n }\n ")+"\n "}),P=t.div(function(n){var r=n.theme;return"\n width: 100%;\n\n "+I+" {\n padding: "+r.space.sm+";\n border: 1px solid "+r.colors.outline+";\n border-top: none;\n display: flex;\n align-items: center;\n }\n\n "+I+":first-child {\n border-top: 1px solid "+r.colors.outline+";\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n }\n\n "+I+":last-child {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n }\n "});function R(n){var r=n.children,o=n.name,e=n.checked,t=n.disabled,i=D(n,["children","name","checked","disabled"]);return p(I,{htmlFor:o,disabled:t},p(T,Object.assign({id:o,name:o,type:"checkbox",checked:e,disabled:t},i)),p(F,{checked:e},p(B,{name:"Check"})),p(a,{display:"block",width:"calc(100% - 16px)",fontSize:1,lineHeight:1,fontWeight:5,style:{transitionProperty:"color",transitionDuration:"150ms",transitionTimingFunction:"ease-in-out"}},r))}function S(n){var r=n.name,o=n.validate,e=n.onChange,t=n.onBlur,i=D(n,["name","validate","onChange","onBlur"]);return p(x,{name:r,validate:o},function(n){var o=n.field,a=Boolean(k(n.form,["errors",r]));return p(R,Object.assign({},i,o,{checked:Boolean(o.value),hasError:a,onChange:function(n){o.onChange(n),e&&e(n)},onBlur:function(n){o.onBlur(n),t&&t(n)}}))})}function N(n){return n<10?"0"+n:""+n}var H=Object.freeze(["\n display: block;\n position: relative;\n font-weight: 500;\n letter-spacing: 0.6px;\n ","\n ","\n ","\n"]),V=t.label(H,o,r,n);V.displayName="Label",V.defaultProps={fontSize:1,lineHeight:1,mb:"xs"};var M=Object.freeze(["\n appearance: none;\n border: none;\n display: block;\n position: relative;\n font-family: ",";\n color: ",";\n font-size: ",";\n line-height: ",";\n letter-spacing: 0.6px;\n margin: 0;\n min-height: 48px;\n padding: ",";\n background: transparent;\n color: ",";\n cursor: pointer;\n z-index: 2;\n transition-property: border-color, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in-out;\n\n &::-ms-expand {\n display: none;\n }\n &:disabled {\n background: transparent;\n color: ",";\n cursor: not-allowed;\n & ~ .__border {\n background: ",";\n cursor: not-allowed;\n }\n }\n &:not(:disabled):active,\n &:not(:disabled):focus,\n &:not(:disabled):hover {\n outline: 0;\n color: ",";\n\n & ~ .__bg {\n opacity: 1;\n }\n & ~ .__border {\n border-color: ",";\n\n div {\n border-color: ",";\n color: ",";\n }\n }\n }\n"]),U=t.select(function(n){var r=n.theme,o=n.hasError;return i(M,r.fonts.roboto,r.colors.body,r.fontSizes[1],r.lineHeights[0],r.space.sm,n.hasValue?r.colors.body:r.colors.secondary,function(n){return n.theme.colors.placeholder},r.colors.background,r.colors.body,o?r.colors.error:r.colors.primary,o?r.colors.error:r.colors.primary,o?r.colors.error:r.colors.primary)});function Y(n){var r=n.name,o=n.label;void 0===o&&(o="Date");var e=n.disabled,t=n.initialMonth;void 0===t&&(t=0);var i=n.initialDay;void 0===i&&(i=0);var a=n.initialYear;void 0===a&&(a=0);var l=n.minMonth;void 0===l&&(l=1);var d=n.minDay;void 0===d&&(d=1);var m=n.minYear;void 0===m&&(m=1980);var f=n.maxMonth;void 0===f&&(f=12);var g=n.maxDay;void 0===g&&(g=31);var v=n.maxYear;void 0===v&&(v=2030);var y=n.hasError,x=n.onUpdate,w=u(null),k=u(null),_=u(null),z=b(t),j=z[0],D=z[1],E=b(i),B=E[0],F=E[1],C=b(a),T=C[0],I=C[1],P=function(n){return new Date(n.year,n.month,0).getUTCDate()}({year:T||2020,month:j});return h(function(){T&&j&&B&&x(T+"-"+N(j)+"-"+N(B))},[j,B,T]),p(c,{ml:"-4px",mr:"-4px",p:"4px"},p(c,{display:"flex",alignItems:"center",height:"48px",pl:"56px"},p(U,{ref:w,name:r+"-month",value:j,disabled:e,onChange:function(n){D(parseInt(n.target.value,10)),k.current&&k.current.focus()},"aria-label":o+": Month",hasValue:Boolean(j),hasError:y},p("option",{value:"0",disabled:!0,selected:!0},"mm"),O(f-l+1,function(){return""}).map(function(n,r){var o=l+r;return p("option",{key:o,value:o},N(o))})),p(c,{height:"50%",width:"1px",bg:y?"error":"outline",zIndex:2,transform:"rotate(10deg)"}),p(U,{ref:k,name:r+"-day",value:B,disabled:e,onChange:function(n){F(parseInt(n.target.value,10)),_.current&&_.current.focus()},"aria-label":o+": Day",hasValue:Boolean(B),hasError:y},p("option",{value:"0",disabled:!0,selected:!0},"dd"),O(Math.min(g,P)-d+1,function(){return""}).map(function(n,r){var o=d+r;return p("option",{key:o,value:o},N(o))})),p(c,{height:"50%",width:"1px",bg:y?"error":"outline",zIndex:2,transform:"rotate(10deg)"}),p(U,{ref:_,name:r+"-year",value:T,disabled:e,onChange:function(n){I(parseInt(n.target.value,10))},"aria-label":o+": Year",hasValue:Boolean(T),hasError:y},p("option",{value:"0",disabled:!0,selected:!0},"yyyy"),O(v-m+1,function(n){return m+n}).map(function(n){return p("option",{key:n,value:n},n)})),p(c,{className:"__bg",bg:y?"error-alpha01":"primary-alpha01",position:"absolute",top:"-4px",bottom:"-4px",left:"-4px",right:"-4px",zIndex:0,borderRadius:"6px",opacity:0,transitionProperty:"opacity",transitionDuration:"fast",transitionTimingFunction:"ease"}),p(c,{className:"__border",bg:"white",border:["1px solid",y?"error":"outline"],position:"absolute",top:"0",bottom:"0",left:"0",right:"0",zIndex:0,borderRadius:"4px",transitionProperty:"border-color",transitionDuration:"fast",transitionTimingFunction:"ease"},p(c,{"aria-hidden":"true",position:"absolute",top:"0",left:"0",display:"flex",alignItems:"center",justifyContent:"center",px:"sm",height:"100%",zIndex:0,color:y?"error":"secondary",bg:y?"#FDEBF0":"background",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px",borderRight:["1px solid",y?"error":"outline"],transitionProperty:"border-color, color",transitionDuration:"fast",transitionTimingFunction:"ease"},p(s,{name:"Calendar"})))))}function A(n){var r=n.name,o=n.validate,e=function(n,r){var o={};for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&-1===r.indexOf(e)&&(o[e]=n[e]);return o}(n,["name","validate"]);return p(x,{name:r,validate:o},function(n){var o=n.field,t=n.form,i=Boolean(k(t,["errors",r])),a=(o.value||"").split("-"),l=a[0];void 0===l&&(l="");var s=a[1];void 0===s&&(s="");var c=a[2];return void 0===c&&(c=""),p(Y,Object.assign({name:r},e,{initialMonth:s?parseInt(s,10):void 0,initialDay:c?parseInt(c,10):void 0,initialYear:l?parseInt(l,10):void 0,hasError:i,onUpdate:function(n){t.setFieldValue(r,n)}}))})}function L(n){return p(m,null,p(V,{htmlFor:n.name},n.label),p(A,Object.assign({},n)))}function W(n,r){var o={};for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&-1===r.indexOf(e)&&(o[e]=n[e]);return o}var K=t(c)(function(n){var r=n.theme,o=n.selected,e=n.highlighted;return"\n display: flex;\n align-items: center;\n padding: "+r.space.sm+";\n color: "+(o||e?r.colors.body:r.colors.secondary)+";\n background-color: "+(o||e?r.colors.background:"white")+";\n cursor: pointer;\n font-size: "+r.fontSizes[1]+";\n font-weight: 400;\n line-height: "+r.lineHeights[1]+";\n letter-spacing: 0.6px;\n\n &:hover {\n background: "+r.colors.background+";\n }\n"});function X(n){var r=n.children,o=W(n,["children"]);return p(K,Object.assign({as:"li"},o),r)}var q=f(function(n,r){var o=n.children,e=W(n,["children"]);return p(c,Object.assign({ref:r,as:"ul",boxShadow:"medium",borderRadius:2,overflow:"auto",width:"100%",bg:"white"},e),o)});q.displayName="Body";var G=t.button(function(n){var r=n.theme,o=n.hasError;return"\n display: block;\n position: relative;\n width: 100%;\n z-index: 1;\n height: 48px;\n padding: 0 16px;\n text-align: left;\n font-size: "+r.fontSizes[1]+";\n font-weight: 400;\n line-height: "+r.lineHeights[1]+";\n color: "+r.colors.secondary+";\n transition-property: color;\n transition-duration: "+r.transitionDurations.fast+";\n transition-timing-function: "+r.transitionTimingFunctions.ease+";\n\n "+(n.disabled?"\n background: transparent;\n color: "+r.colors.placeholder+";\n cursor: not-allowed;\n & ~ .__border {\n background: "+r.colors.background+";\n cursor: not-allowed;\n }\n ":"\n &:active,\n &:focus,\n &:hover {\n outline: 0;\n color: "+r.colors.body+";\n\n & ~ .__bg {\n opacity: 1;\n }\n & ~ .__border {\n border-color: "+(o?r.colors.error:r.colors.primary)+";\n\n div {\n border-color: "+(o?r.colors.error:r.colors.primary)+";\n color: "+(o?r.colors.error:r.colors.primary)+";\n }\n }\n }\n ")+"\n\n "+(n.isActive?"\n outline: 0;\n color: "+r.colors.body+";\n\n & ~ .__bg {\n opacity: 1;\n }\n & ~ .__border {\n border-color: "+(o?r.colors.error:r.colors.primary)+";\n\n div {\n border-color: "+(o?r.colors.error:r.colors.primary)+";\n color: "+(o?r.colors.error:r.colors.primary)+";\n }\n }\n ":"")+"\n"});G.displayName="ControlOuter";var J=f(function(n,r){var o=n.children,e=n.isActive,t=n.hasError,i=W(n,["children","isActive","hasError"]);return p("div",{style:{position:"relative"}},p(G,Object.assign({ref:r,isActive:e,hasError:t,type:"button"},i),p(a,{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"},p(a,{width:"100%",fontWeight:4,style:{whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",letterSpacing:"0.6px"}},o),p(s,{name:"ChevronDown",ml:"xs"}))),p(c,{className:"__bg",bg:t?"error-alpha01":"primary-alpha01",position:"absolute",top:"-2px",bottom:"-2px",left:"-2px",right:"-2px",zIndex:0,borderRadius:"6px",opacity:0,transitionProperty:"opacity",transitionDuration:"fast",transitionTimingFunction:"ease"}),p(c,{className:"__border",bg:"white",border:["1px solid",t?"error":"outline"],position:"absolute",top:"0",bottom:"0",left:"0",right:"0",zIndex:0,borderRadius:"4px",transitionProperty:"border-color",transitionDuration:"fast",transitionTimingFunction:"ease"}))});function Q(n){var r=n.value,o=n.placeholder,t=n.label,i=n.items,a=n.hasError,l=n.disabled,s=n.onSelect,d=n.onRemove,u=b(k(i.filter(function(n){return n.value===r})[0],"label")||o||"Please select"),h=u[0],m=u[1],f=e({items:i.map(function(n){return Object.assign({},n,{selected:n.value===r})}),onSelect:function(n){m(n.label),s&&s(n)},onRemove:function(n){m("Please select"),d&&d(n)}}),g=f.items,v=f.isOpen,y=f.getDropProps;return p(c,null,p(J,Object.assign({id:f.id},l?{}:(0,f.getControlProps)(),{"aria-label":t,isActive:v,hasError:a,disabled:l}),h),v&&p(c,{position:"absolute",bottom:"0",width:"100%",transform:"translateY(100%) translateY(6px)",zIndex:1e3},p(q,Object.assign({},y(),{style:{maxHeight:"240px",overflow:"auto"}}),g.map(function(n){return p(X,Object.assign({key:n.value,selected:n.selected,highlighted:n.highlighted},n.getItemProps()),n.label)}))))}function Z(n){var r=n.name,o=n.validate,e=W(n,["name","validate"]);return p(x,{name:r,validate:o},function(n){var r=n.field,o=n.form,t=Boolean(o.errors&&o.errors[r.name]);return p(Q,Object.assign({},e,{hasError:t,onSelect:function(n){o.setFieldValue(r.name,n.value),e.onSelect&&e.onSelect(n)}}))})}function $(n){return p(m,null,p(V,{htmlFor:n.name},n.label),p(Z,Object.assign({},n)))}function nn(n){return p(w,{name:n.name,render:function(n){return p(a,{color:"error",fontSize:0},n)}})}function rn(n,r){var o={};for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&-1===r.indexOf(e)&&(o[e]=n[e]);return o}J.displayName="Control";var on=t.input(function(n){var r=n.theme,o=n.small,e=n.hasError;return"\n appearance: none;\n border: none;\n display: block;\n position: relative;\n font-family: "+r.fonts.roboto+";\n color: "+r.colors.body+";\n font-size: "+(o?r.fontSizes[0]:r.fontSizes[1])+";\n line-height: "+r.lineHeights[0]+";\n letter-spacing: 0.6px;\n width: 100%;\n margin: 0;\n min-height: "+(o?"36px":"48px")+";\n padding: "+(o?"10px":r.space.sm)+";\n background: transparent;\n color: "+(n.hasValue?r.colors.body:r.colors.secondary)+";\n cursor: pointer;\n z-index: 2;\n transition-property: border-color, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in-out;\n\n &::placeholder {\n color: "+r.colors.secondary+";\n line-height: "+r.lineHeights[0]+";\n opacity: 1;\n }\n &:-webkit-autofill {\n -webkit-text-fill-color: "+r.colors.body+";\n -webkit-box-shadow: 0 0 0px 1000px #fff inset;\n }\n &:disabled {\n background: transparent;\n color: "+r.colors.placeholder+";\n cursor: not-allowed;\n & ~ .__border {\n background: "+r.colors.background+";\n cursor: not-allowed;\n }\n }\n &:invalid,\n &:not(:disabled):active,\n &:not(:disabled):focus,\n &:not(:disabled):hover {\n box-shadow: none;\n outline: 0;\n color: "+r.colors.body+";\n\n & ~ .__bg {\n opacity: 1;\n }\n & ~ .__border {\n border-color: "+(e?r.colors.error:r.colors.primary)+";\n }\n & ~ .__tab {\n border-color: "+(e?r.colors.error:r.colors.primary)+";\n color: "+(e?r.colors.error:r.colors.primary)+";\n }\n }\n "+(o?"\n & ~ .__tab {\n padding: 10px;\n }\n ":"")+"\n"});on.displayName="InputElement";var en=f(function(n,r){var o=n.hasError,e=n.preTab,t=n.postTab,i=rn(n,["hasError","preTab","postTab"]),a=Boolean(e),l=e||t;return p(c,{display:"flex",ml:"-2px",mr:"-2px",p:"2px"},p(on,Object.assign({ref:r,hasError:o},i)),l&&p(c,{className:"__tab","aria-hidden":"true",display:"flex",alignItems:"center",justifyContent:"center",px:"sm",zIndex:1,color:o?"error":"secondary",bg:o?"#FDEBF0":"background",borderTopLeftRadius:a?"4px":"0",borderBottomLeftRadius:a?"4px":"0",borderTopRightRadius:a?"0":"4px",borderBottomRightRadius:a?"0":"4px",border:["1px solid",o?"error":"outline"],order:a?-1:1,transitionProperty:"border-color, color",transitionDuration:"fast",transitionTimingFunction:"ease"},l),p(c,{className:"__bg",bg:o?"error-alpha01":"primary-alpha01",position:"absolute",top:"0",bottom:"0",left:"0",right:"0",zIndex:0,borderRadius:"6px",opacity:0,transitionProperty:"opacity",transitionDuration:"fast",transitionTimingFunction:"ease"}),p(c,{className:"__border",bg:"white",border:["1px solid",o?"error":"outline"],position:"absolute",top:"2px",bottom:"2px",left:"2px",right:"2px",zIndex:0,borderRadius:"4px",transitionProperty:"border-color",transitionDuration:"fast",transitionTimingFunction:"ease"}))});function tn(n){var r=n.name,o=n.validate,e=n.onChange,t=n.onBlur,i=rn(n,["name","validate","onChange","onBlur"]);return p(x,{name:r,validate:o},function(n){var o=n.field,a=Boolean(k(n.form,["errors",r]));return p(en,Object.assign({},i,o,{hasError:a,onChange:function(n){o.onChange(n),e&&e(n)},onBlur:function(n){o.onBlur(n),t&&t(n)}}))})}function an(n){return p(m,null,p(V,{htmlFor:n.name},n.label),p(tn,Object.assign({},n)))}function ln(n,r){var o={};for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&-1===r.indexOf(e)&&(o[e]=n[e]);return o}var sn=Object.freeze(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n cursor: pointer;\n z-index: 0;\n"]),cn=t.span(function(n){var r=n.theme;return"\n font-size: "+r.fontSizes[1]+";\n font-weight: "+r.fontWeights[5]+";\n line-height: "+r.lineHeights[0]+";\n transition-property: color;\n transition-duration: "+r.transitionDurations.fast+";\n transition-timing-function: "+r.transitionTimingFunctions.ease+";\n "}),dn=t.div(function(n){var r=n.theme;return"\n width: 100%;\n border: 1px solid "+r.colors.outline+";\n border-radius: 4px;\n\n "+hn+" {\n padding: "+r.space.sm+";\n border-top: 1px solid "+r.colors.outline+";\n\n &:first-of-type {\n border-top: 0;\n }\n }\n\n "+(n.hasError?"\n border-color: "+r.colors.error+" !important;\n\n & "+hn+" {\n border-color: "+r.colors.error+" !important;\n }\n ":"")+"\n "}),pn=t.div(function(n){var r=n.theme;return"\n position: relative;\n width: 16px;\n height: 16px;\n border-radius: 100%;\n margin-top: 2px;\n margin-right: 8px;\n border: 1px solid "+(n.checked?r.colors.primaryDark:r.colors.outline)+";\n z-index: 1;\n transition-property: background, border-color;\n transition-duration: "+r.transitionDurations.fast+";\n transition-timing-function: "+r.transitionTimingFunctions.ease+";\n\n &::after {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: auto;\n width: 8px;\n height: 8px;\n border-radius: 100%;\n background: white;\n transition-property: transform;\n transition-duration: "+r.transitionDurations.fast+";\n transition-timing-function: "+r.transitionTimingFunctions.ease+";\n transform: scale(0);\n }\n "}),un=t.input(function(n){var r=n.theme;return"\n position: relative;\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n position: absolute;\n whitespace: nowrap;\n wordwrap: normal;\n z-index: 1;\n\n &:focus ~ "+pn+" {\n border-color: "+r.colors.primaryDark+";\n }\n &:focus ~ "+c+" "+cn+" {\n color: "+r.colors.primary+";\n }\n\n &:checked ~ "+pn+" {\n background: "+r.colors.primary+";\n border-color: "+r.colors.primaryDark+";\n\n &::after {\n transform: scale(1);\n }\n }\n &:checked ~ "+c+" "+cn+" {\n color: "+r.colors.primary+";\n }\n\n &:disabled ~ "+pn+" {\n border-color: "+r.colors.outline+" !important;\n }\n &:disabled ~ "+bn+" {\n background-color: "+r.colors.background+";\n }\n &:disabled ~ "+c+" "+cn+" {\n color: "+r.colors.secondary+" !important;\n }\n "}),bn=t.span(sn),hn=t.label(function(n){var r=n.theme;return"\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n margin-bottom: 0 !important;\n cursor: pointer;\n overflow: hidden;\n\n &:hover "+pn+" {\n border-color: "+r.colors.primaryDark+";\n }\n &:hover "+cn+" {\n color: "+r.colors.primary+";\n }\n "});function mn(n){var r=n.name,o=n.checked,e=n.description,t=n.label,i=ln(n,["children","name","checked","description","label"]),a=r+i.value;return p(hn,{htmlFor:a},p(un,Object.assign({id:a,name:r,type:"radio",checked:o},i)),p(pn,{checked:o}),p(c,{display:"block",position:"relative",zIndex:1,width:"calc(100% - 16px)"},t&&p(cn,null,t),e&&p(d,{color:"secondary",fontSize:0,fontWeight:4,lineHeight:0},e)),p(bn,null))}function fn(n){var r=n.children,o=n.name,e=n.validate,t=n.onChange,i=n.onBlur,a=ln(n,["children","name","validate","onChange","onBlur"]);return p(x,{name:o,validate:e},function(n){var e=n.field,l=Boolean(k(n.form,["errors",o]));return p(dn,{hasError:l},g.toArray(r).map(function(n){return v(n,Object.assign({},e,a,{value:n.props.value,hasError:l,checked:Boolean(e.value===n.props.value),onChange:function(n){e.onChange(n),t&&t(n)},onBlur:function(n){e.onBlur(n),i&&i(n)}}))}))})}function gn(n){var r=n.label,o=ln(n,["label"]);return p(m,null,p(V,{htmlFor:o.name},r),p(fn,Object.assign({},o)))}function vn(n,r){var o={};for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&-1===r.indexOf(e)&&(o[e]=n[e]);return o}var yn=t.select(function(n){var r=n.theme,o=n.hasError;return"\n appearance: none;\n border: none;\n display: block;\n position: relative;\n font-family: "+r.fonts.roboto+";\n color: "+r.colors.body+";\n font-size: "+r.fontSizes[1]+";\n line-height: "+r.lineHeights[0]+";\n letter-spacing: 0.6px;\n width: 100%;\n margin: 0;\n min-height: 48px;\n padding: "+r.space.sm+";\n background: transparent;\n color: "+(n.hasValue?r.colors.body:r.colors.secondary)+";\n cursor: pointer;\n z-index: 2;\n transition-property: border-color, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in-out;\n\n &::placeholder {\n color: "+r.colors.secondary+";\n line-height: "+r.lineHeights[0]+";\n opacity: 1;\n }\n &:-webkit-autofill {\n -webkit-text-fill-color: "+r.colors.body+";\n -webkit-box-shadow: 0 0 0px 1000px #fff inset;\n }\n &:disabled {\n background: transparent;\n color: "+r.colors.placeholder+";\n cursor: not-allowed;\n & ~ .__border {\n background: "+r.colors.background+";\n cursor: not-allowed;\n }\n }\n &:invalid,\n &:-moz-ui-invalid,\n &:not(:disabled):active,\n &:not(:disabled):focus,\n &:not(:disabled):hover {\n box-shadow: none;\n outline: 0;\n color: "+r.colors.body+";\n\n & ~ .__bg {\n opacity: 1;\n }\n & ~ .__border {\n border-color: "+(o?r.colors.error:r.colors.primary)+";\n\n div {\n border-color: "+(o?r.colors.error:r.colors.primary)+";\n color: "+(o?r.colors.error:r.colors.primary)+";\n }\n }\n }\n"});yn.displayName="SelectElement";var xn=f(function(n,r){var o=n.children,e=n.hasError,t=n.placeholder;void 0===t&&(t="");var i=vn(n,["children","hasError","placeholder"]);return p(c,{ml:"-2px",mr:"-2px",p:"2px"},p(yn,Object.assign({ref:r,hasValue:Boolean(i.value),hasError:e},i,{value:i.value||""}),t&&p("option",{value:"",disabled:!0},t),o),p(c,{className:"__bg",bg:e?"error-alpha01":"primary-alpha01",position:"absolute",top:"0",bottom:"0",left:"0",right:"0",zIndex:0,borderRadius:"6px",opacity:0,transitionProperty:"opacity",transitionDuration:"fast",transitionTimingFunction:"ease"}),p(c,{className:"__border",bg:"white",border:["1px solid",e?"error":"outline"],position:"absolute",top:"2px",bottom:"2px",left:"2px",right:"2px",zIndex:0,borderRadius:"4px",transitionProperty:"border-color",transitionDuration:"fast",transitionTimingFunction:"ease"}),p(c,{position:"absolute",right:"0",top:"0",bottom:"0",height:"16px",my:"auto",pr:"sm",style:{pointerEvents:"none"}},p(s,{name:"ChevronDown",color:"secondary"})))});function wn(n){var r=n.name,o=n.validate,e=n.onChange,t=n.onBlur,i=vn(n,["name","validate","onChange","onBlur"]);return p(x,{name:r,validate:o},function(n){var o=n.field,a=Boolean(k(n.form,["errors",r]));return p(xn,Object.assign({},i,o,{hasError:a,onChange:function(n){o.onChange(n),e&&e(n)},onBlur:function(n){o.onBlur(n),t&&t(n)}}))})}function kn(n){return p(m,null,p(V,{htmlFor:n.name},n.label),p(wn,Object.assign({},n)))}var On=t(c)(function(n){return"\n border-left: 2px solid currentColor;\n padding-left: "+n.theme.space.sm+";\n "});function _n(n,r){var o={};for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&-1===r.indexOf(e)&&(o[e]=n[e]);return o}var zn=t.textarea(function(n){var r=n.theme,o=n.hasError;return"\n appearance: none;\n border: none;\n display: block;\n position: relative;\n font-family: "+r.fonts.roboto+";\n color: "+r.colors.body+";\n font-size: "+r.fontSizes[1]+";\n line-height: "+r.lineHeights[0]+";\n letter-spacing: 0.6px;\n width: 100%;\n margin: 0;\n min-height: 48px;\n padding: "+r.space.sm+";\n background: transparent;\n color: "+(n.hasValue?r.colors.body:r.colors.secondary)+";\n cursor: pointer;\n z-index: 2;\n transition-property: border-color, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in-out;\n\n &::placeholder {\n color: "+r.colors.secondary+";\n line-height: "+r.lineHeights[0]+";\n opacity: 1;\n }\n &:-webkit-autofill {\n -webkit-text-fill-color: "+r.colors.body+";\n -webkit-box-shadow: 0 0 0px 1000px #fff inset;\n }\n &:disabled {\n background: transparent;\n color: "+r.colors.placeholder+";\n cursor: not-allowed;\n & ~ .__border {\n background: "+r.colors.background+";\n cursor: not-allowed;\n }\n }\n &:invalid,\n &:-moz-ui-invalid,\n &:not(:disabled):active,\n &:not(:disabled):focus,\n &:not(:disabled):hover {\n box-shadow: none;\n outline: 0;\n color: "+r.colors.body+";\n\n & ~ .__bg {\n opacity: 1;\n }\n & ~ .__border {\n border-color: "+(o?r.colors.error:r.colors.primary)+";\n\n div {\n border-color: "+(o?r.colors.error:r.colors.primary)+";\n color: "+(o?r.colors.error:r.colors.primary)+";\n }\n }\n }\n"});zn.displayName="TextareaElement",zn.defaultProps={rows:4};var jn=f(function(n,r){var o=n.hasError,e=_n(n,["hasError"]);return p(c,{ml:"-2px",mr:"-2px",p:"2px"},p(zn,Object.assign({ref:r,hasError:o},e)),p(c,{className:"__bg",bg:o?"error-alpha01":"primary-alpha01",position:"absolute",top:"0",bottom:"0",left:"0",right:"0",zIndex:0,borderRadius:"6px",opacity:0,transitionProperty:"opacity",transitionDuration:"fast",transitionTimingFunction:"ease"}),p(c,{className:"__border",bg:"white",border:["1px solid",o?"error":"outline"],position:"absolute",top:"2px",bottom:"2px",left:"2px",right:"2px",zIndex:0,borderRadius:"4px",transitionProperty:"border-color",transitionDuration:"fast",transitionTimingFunction:"ease"}))});function Dn(n){var r=n.name,o=n.validate,e=n.onChange,t=n.onBlur,i=_n(n,["name","validate","onChange","onBlur"]);return p(x,{name:r,validate:o},function(n){var o=n.field,a=Boolean(k(n.form,["errors",r]));return p(jn,Object.assign({},i,o,{hasError:a,onChange:function(n){o.onChange(n),e&&e(n)},onBlur:function(n){o.onBlur(n),t&&t(n)}}))})}function En(n){return p(m,null,p(V,{htmlFor:n.name},n.label),p(Dn,Object.assign({},n)))}var Bn=Object.freeze(["\n ","\n"]),Fn="\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n position: absolute;\n whitespace: nowrap;\n wordwrap: normal;\n",Cn=t.div(function(n){var r=n.theme;return"\n display: block;\n position: absolute;\n top: 3px;\n bottom: 0;\n left: 3px;\n width: 24px;\n height: 24px;\n border-radius: 100px;\n border: 1px solid "+r.colors.outline+";\n color: white;\n background: white;\n stroke: white;\n transition-property: transform, background, border-color;\n transition-duration: "+r.transitionDurations.fast+";\n transition-timing-function: "+r.transitionTimingFunctions.natural+";\n"}),Tn=t.div(function(n){var r=n.theme;return"\n position: relative;\n width: 56px;\n height: 32px;\n border-radius: 100px;\n border: 1px solid "+r.colors.outline+";\n background: "+r.colors.background+";\n cursor: pointer;\n transition-property: background, border-color;\n transition-duration: "+r.transitionDurations.fast+";\n transition-timing-function: "+r.transitionTimingFunctions.natural+";\n "}),In=t.label(function(n){return"\n display: flex;\n align-items: center;\n margin-bottom: 0 !important;\n\n &:hover "+Tn+" {\n "+Cn+" {\n border-color: "+n.theme.colors.primaryDark+";\n }\n }\n "}),Pn=t.input(function(n){var r=n.theme;return"\n "+Fn+"\n\n &:focus ~ "+Tn+" {\n border-color: "+r.colors.primary+";\n }\n &:checked ~ "+Tn+" {\n border-color: "+r.colors.primary+";\n\n "+Cn+" {\n background: "+r.colors.primary+";\n border-color: "+r.colors.primaryDark+";\n transform: translateX(24px);\n }\n }\n &:disabled ~ "+Tn+" {\n pointer-events: none;\n "+Cn+" {\n border-color: "+r.colors.outline+";\n }\n }\n "}),Rn=t.span(Bn,Fn);function Sn(n){var r=n.label,o=n.name,e=n.checked,t=function(n,r){var o={};for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&-1===r.indexOf(e)&&(o[e]=n[e]);return o}(n,["label","name","checked"]);return p(In,{htmlFor:o},p(Pn,Object.assign({id:o,name:o,type:"checkbox",checked:e},t)),p(Tn,null,p(Cn,null,p(s,{name:"Check",width:"12px",height:"12px",position:"absolute",top:"0",bottom:"0",left:"0",right:"0",m:"auto",style:{strokeWidth:"2px"}}))),p(Rn,null,r))}function Nn(n){var r=n.label;return p(x,{name:n.name,validate:n.validate},function(n){var o=n.field;return p(Sn,Object.assign({label:r},o,{checked:Boolean(o.value)}))})}function Hn(n){var r=n.value;void 0===r&&(r="");var o=n.masker;void 0===o&&(o="*");var e=n.separator;void 0===e&&(e="-");var t=new RegExp("[^0-9"+e+"]").test(r)?"":_(r,o),i=j(z(t,o),e),a=b(t),l=a[0],s=a[1],c=b(i),d=c[0],u=c[1],m=y(function(n){n.persist();var r=n.target.value,t=r.slice(-1);if(!(new RegExp("[^0-9"+e+o+"]").test(t)||r.length>11)){var i=_(r,o),a=_(l),c=i.length<a.length?a.slice(0,i.length):new RegExp("["+e+o+"]").test(t)?a:a+i.slice(-1);s(c),u(j(z(c,o),e))}},[l,s,d,u]),f=y(function(n){n.persist();var r=n.target.value.length;n.target.setSelectionRange(r,r)},[]);return h(function(){n.onUpdate&&n.onUpdate(l)},[l]),p(en,Object.assign({},n,{value:d,onChange:m,onFocus:f,onKeyUp:f,onKeyDown:f,onClick:f}))}function Vn(n){var r=n.name,o=n.validate,e=function(n,r){var o={};for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&-1===r.indexOf(e)&&(o[e]=n[e]);return o}(n,["name","validate"]);return p(x,{name:r,validate:o},function(n){var o=n.field,t=n.form,i=Boolean(k(t,["errors",r]));return p(Hn,Object.assign({},e,o,{hasError:i,onUpdate:function(n){t.setFieldValue(r,n)}}))})}function Mn(n){return p(m,null,p(V,{htmlFor:n.name},n.label),p(Vn,Object.assign({},n)))}export{P as CheckboxGroup,R as Checkbox,S as CheckboxField,Y as DateInput,A as DateInputField,L as DateInputFieldWithLabel,X as Item,q as Body,J as Control,Q as Dropdown,Z as DropdownField,$ as DropdownFieldWithLabel,nn as ErrorMessage,en as Input,tn as InputField,an as InputFieldWithLabel,V as Label,mn as Radio,fn as RadioField,gn as RadioFieldWithLabel,xn as Select,wn as SelectField,kn as SelectFieldWithLabel,On as SubGroup,jn as Textarea,Dn as TextareaField,En as TextareaFieldWithLabel,Fn as hidden,Sn as Toggle,Nn as ToggleField,Hn as SSNInput,Vn as SSNInputField,Mn as SSNInputFieldWithLabel}; | ||
import{space as n,color as r,typography as o}from"styled-system";import{useSelect as e}from"use-drop";import t,{css as i}from"styled-components";import{Span as a,H5 as l,Icon as s,Box as c,P as d}from"@truework/ui";import{createElement as p,useRef as u,useState as b,useEffect as h,Fragment as m,forwardRef as f,Children as g,cloneElement as v,useCallback as y}from"react";import{Field as x,ErrorMessage as w}from"formik";import{get as k,times as O}from"lodash";import{clean as _,mask as z,format as j}from"parse-ssn";function D(n,r){var o={};for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&-1===r.indexOf(e)&&(o[e]=n[e]);return o}var E=Object.freeze([""]),B=t(s)(E),F=t.div(function(n){var r=n.theme;return"\n position: relative;\n width: 16px;\n height: 16px;\n border-radius: 2px;\n margin-top: 2px;\n margin-right: 8px;\n border: 1px solid "+(n.checked?r.colors.primaryDark:r.colors.outline)+";\n transition-property: background, border-color;\n transition-duration: "+r.transitionDurations.fast+";\n transition-timing-function: "+r.transitionTimingFunctions.ease+";\n\n "+B+" {\n display: block;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: auto;\n width: 12px;\n height: 12px;\n color: white;\n stroke: white;\n stroke-width: 2px;\n transition-property: transform;\n transition-duration: "+r.transitionDurations.fast+";\n transition-timing-function: "+r.transitionTimingFunctions.ease+";\n transform: scale(0);\n }\n "}),C=t(l)(function(n){var r=n.theme;return"\n width: calc(100% - 16px);\n transition-property: color;\n transition-duration: "+r.transitionDurations.fast+";\n transition-timing-function: "+r.transitionTimingFunctions.ease+";\n "}),T=t.input(function(n){var r=n.theme;return"\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n position: absolute;\n whitespace: nowrap;\n wordwrap: normal;\n\n &:focus ~ "+F+" {\n border-color: "+r.colors.primaryDark+";\n }\n &:checked ~ "+F+" {\n background: "+r.colors.primary+";\n border-color: "+r.colors.primaryDark+";\n\n "+B+" {\n transform: scale(1);\n }\n }\n &:focus ~ "+C+", &:focus ~"+a+", &:checked ~ "+a+" {\n color: "+r.colors.primary+";\n }\n\n "+(n.hasError?"\n & ~ "+F+" {\n border-color: "+r.colors.error+" !important;\n }\n ":"")+"\n "}),I=t.label(function(n){var r=n.theme;return"\n display: flex;\n align-items: flex-start;\n width: 100%;\n margin-bottom: 0 !important;\n\n "+(n.disabled?"\n "+F+" {\n background: "+r.colors.background+";\n }\n "+a+" {\n color: "+r.colors.placeholder+";\n }\n ":"\n &:hover "+F+" {\n border-color: "+r.colors.primaryDark+";\n }\n &:hover "+C+", &:hover "+a+" {\n color: "+r.colors.primary+";\n }\n ")+"\n "}),P=t.div(function(n){var r=n.theme;return"\n width: 100%;\n\n "+I+" {\n padding: "+r.space.sm+";\n border: 1px solid "+r.colors.outline+";\n border-top: none;\n display: flex;\n align-items: center;\n }\n\n "+I+":first-child {\n border-top: 1px solid "+r.colors.outline+";\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n }\n\n "+I+":last-child {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n }\n "});function R(n){var r=n.children,o=n.name,e=n.checked,t=n.disabled,i=D(n,["children","name","checked","disabled"]);return p(I,{htmlFor:o,disabled:t},p(T,Object.assign({id:o,name:o,type:"checkbox",checked:e,disabled:t},i)),p(F,{checked:e},p(B,{name:"Check"})),p(a,{display:"block",width:"calc(100% - 16px)",fontSize:1,lineHeight:1,fontWeight:5,style:{transitionProperty:"color",transitionDuration:"150ms",transitionTimingFunction:"ease-in-out"}},r))}function S(n){var r=n.name,o=n.validate,e=n.onChange,t=n.onBlur,i=D(n,["name","validate","onChange","onBlur"]);return p(x,{name:r,validate:o},function(n){var o=n.field,a=Boolean(k(n.form,["errors",r]));return p(R,Object.assign({},i,o,{checked:Boolean(o.value),hasError:a,onChange:function(n){o.onChange(n),e&&e(n)},onBlur:function(n){o.onBlur(n),t&&t(n)}}))})}function N(n){return n<10?"0"+n:""+n}var H=Object.freeze(["\n display: block;\n position: relative;\n font-weight: 500;\n letter-spacing: 0.6px;\n ","\n ","\n ","\n"]),V=t.label(H,o,r,n);V.displayName="Label",V.defaultProps={fontSize:1,lineHeight:1,mb:"xs"};var M=Object.freeze(["\n appearance: none;\n border: none;\n display: block;\n position: relative;\n font-family: ",";\n color: ",";\n font-size: ",";\n line-height: ",";\n letter-spacing: 0.6px;\n margin: 0;\n min-height: 48px;\n padding: ",";\n background: transparent;\n color: ",";\n cursor: pointer;\n z-index: 2;\n transition-property: border-color, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in-out;\n\n &::-ms-expand {\n display: none;\n }\n &:disabled {\n background: transparent;\n color: ",";\n cursor: not-allowed;\n & ~ .__border {\n background: ",";\n cursor: not-allowed;\n }\n }\n &:not(:disabled):active,\n &:not(:disabled):focus,\n &:not(:disabled):hover {\n outline: 0;\n color: ",";\n\n & ~ .__bg {\n opacity: 1;\n }\n & ~ .__border {\n border-color: ",";\n\n div {\n border-color: ",";\n color: ",";\n }\n }\n }\n "]),U=t.select(function(n){var r=n.theme,o=n.hasError;return i(M,r.fonts.roboto,r.colors.body,r.fontSizes[1],r.lineHeights[0],r.space.sm,n.hasValue?r.colors.body:r.colors.secondary,function(n){return n.theme.colors.placeholder},r.colors.background,r.colors.body,o?r.colors.error:r.colors.primary,o?r.colors.error:r.colors.primary,o?r.colors.error:r.colors.primary)});function Y(n){var r=n.name,o=n.label;void 0===o&&(o="Date");var e=n.disabled,t=n.initialMonth;void 0===t&&(t=0);var i=n.initialDay;void 0===i&&(i=0);var a=n.initialYear;void 0===a&&(a=0);var l=n.minMonth;void 0===l&&(l=1);var d=n.minDay;void 0===d&&(d=1);var m=n.minYear;void 0===m&&(m=1980);var f=n.maxMonth;void 0===f&&(f=12);var g=n.maxDay;void 0===g&&(g=31);var v=n.maxYear;void 0===v&&(v=2030);var y=n.hasError,x=n.onUpdate,w=u(null),k=u(null),_=u(null),z=b(t),j=z[0],D=z[1],E=b(i),B=E[0],F=E[1],C=b(a),T=C[0],I=C[1],P=function(n){return new Date(n.year,n.month,0).getUTCDate()}({year:T||2020,month:j});return h(function(){T&&j&&B&&x(T+"-"+N(j)+"-"+N(B))},[j,B,T]),p(c,{ml:"-4px",mr:"-4px",p:"4px"},p(c,{display:"flex",alignItems:"center",height:"48px",pl:"56px"},p(U,{ref:w,name:r+"-month",value:j,disabled:e,onChange:function(n){D(parseInt(n.target.value,10)),k.current&&k.current.focus()},"aria-label":o+": Month",hasValue:Boolean(j),hasError:y},p("option",{value:"0",disabled:!0,selected:!0},"mm"),O(f-l+1,function(){return""}).map(function(n,r){var o=l+r;return p("option",{key:o,value:o},N(o))})),p(c,{height:"50%",width:"1px",bg:y?"error":"outline",zIndex:2,transform:"rotate(10deg)"}),p(U,{ref:k,name:r+"-day",value:B,disabled:e,onChange:function(n){F(parseInt(n.target.value,10)),_.current&&_.current.focus()},"aria-label":o+": Day",hasValue:Boolean(B),hasError:y},p("option",{value:"0",disabled:!0,selected:!0},"dd"),O(Math.min(g,P)-d+1,function(){return""}).map(function(n,r){var o=d+r;return p("option",{key:o,value:o},N(o))})),p(c,{height:"50%",width:"1px",bg:y?"error":"outline",zIndex:2,transform:"rotate(10deg)"}),p(U,{ref:_,name:r+"-year",value:T,disabled:e,onChange:function(n){I(parseInt(n.target.value,10))},"aria-label":o+": Year",hasValue:Boolean(T),hasError:y},p("option",{value:"0",disabled:!0,selected:!0},"yyyy"),O(v-m+1,function(n){return m+n}).map(function(n){return p("option",{key:n,value:n},n)})),p(c,{className:"__bg",bg:y?"error-alpha01":"primary-alpha01",position:"absolute",top:"-4px",bottom:"-4px",left:"-4px",right:"-4px",zIndex:0,borderRadius:"6px",opacity:0,transitionProperty:"opacity",transitionDuration:"fast",transitionTimingFunction:"ease"}),p(c,{className:"__border",bg:"white",border:["1px solid",y?"error":"outline"],position:"absolute",top:"0",bottom:"0",left:"0",right:"0",zIndex:0,borderRadius:"4px",transitionProperty:"border-color",transitionDuration:"fast",transitionTimingFunction:"ease"},p(c,{"aria-hidden":"true",position:"absolute",top:"0",left:"0",display:"flex",alignItems:"center",justifyContent:"center",px:"sm",height:"100%",zIndex:0,color:y?"error":"secondary",bg:y?"#FDEBF0":"background",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px",borderRight:["1px solid",y?"error":"outline"],transitionProperty:"border-color, color",transitionDuration:"fast",transitionTimingFunction:"ease"},p(s,{name:"Calendar"})))))}function A(n){var r=n.name,o=n.validate,e=function(n,r){var o={};for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&-1===r.indexOf(e)&&(o[e]=n[e]);return o}(n,["name","validate"]);return p(x,{name:r,validate:o},function(n){var o=n.field,t=n.form,i=Boolean(k(t,["errors",r])),a=(o.value||"").split("-"),l=a[0];void 0===l&&(l="");var s=a[1];void 0===s&&(s="");var c=a[2];return void 0===c&&(c=""),p(Y,Object.assign({name:r},e,{initialMonth:s?parseInt(s,10):void 0,initialDay:c?parseInt(c,10):void 0,initialYear:l?parseInt(l,10):void 0,hasError:i,onUpdate:function(n){t.setFieldValue(r,n)}}))})}function L(n){return p(m,null,p(V,{htmlFor:n.name},n.label),p(A,Object.assign({},n)))}function W(n,r){var o={};for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&-1===r.indexOf(e)&&(o[e]=n[e]);return o}var K=t(c)(function(n){var r=n.theme,o=n.selected,e=n.highlighted;return"\n display: flex;\n align-items: center;\n padding: "+r.space.sm+";\n color: "+(o||e?r.colors.body:r.colors.secondary)+";\n background-color: "+(o||e?r.colors.background:"white")+";\n cursor: pointer;\n font-size: "+r.fontSizes[1]+";\n font-weight: 400;\n line-height: "+r.lineHeights[1]+";\n letter-spacing: 0.6px;\n\n &:hover {\n background: "+r.colors.background+";\n }\n"});function X(n){var r=n.children,o=W(n,["children"]);return p(K,Object.assign({as:"li"},o),r)}var q=f(function(n,r){var o=n.children,e=W(n,["children"]);return p(c,Object.assign({ref:r,as:"ul",boxShadow:"medium",borderRadius:2,overflow:"auto",width:"100%",bg:"white"},e),o)});q.displayName="Body";var G=t.button(function(n){var r=n.theme,o=n.hasError;return"\n display: block;\n position: relative;\n width: 100%;\n z-index: 1;\n height: 48px;\n padding: 0 16px;\n text-align: left;\n font-size: "+r.fontSizes[1]+";\n font-weight: 400;\n line-height: "+r.lineHeights[1]+";\n color: "+r.colors.secondary+";\n transition-property: color;\n transition-duration: "+r.transitionDurations.fast+";\n transition-timing-function: "+r.transitionTimingFunctions.ease+";\n\n "+(n.disabled?"\n background: transparent;\n color: "+r.colors.placeholder+";\n cursor: not-allowed;\n & ~ .__border {\n background: "+r.colors.background+";\n cursor: not-allowed;\n }\n ":"\n &:active,\n &:focus,\n &:hover {\n outline: 0;\n color: "+r.colors.body+";\n\n & ~ .__bg {\n opacity: 1;\n }\n & ~ .__border {\n border-color: "+(o?r.colors.error:r.colors.primary)+";\n\n div {\n border-color: "+(o?r.colors.error:r.colors.primary)+";\n color: "+(o?r.colors.error:r.colors.primary)+";\n }\n }\n }\n ")+"\n\n "+(n.isActive?"\n outline: 0;\n color: "+r.colors.body+";\n\n & ~ .__bg {\n opacity: 1;\n }\n & ~ .__border {\n border-color: "+(o?r.colors.error:r.colors.primary)+";\n\n div {\n border-color: "+(o?r.colors.error:r.colors.primary)+";\n color: "+(o?r.colors.error:r.colors.primary)+";\n }\n }\n ":"")+"\n"});G.displayName="ControlOuter";var J=f(function(n,r){var o=n.children,e=n.isActive,t=n.hasError,i=W(n,["children","isActive","hasError"]);return p("div",{style:{position:"relative"}},p(G,Object.assign({ref:r,isActive:e,hasError:t,type:"button"},i),p(a,{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"},p(a,{width:"100%",fontWeight:4,style:{whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",letterSpacing:"0.6px"}},o),p(s,{name:"ChevronDown",ml:"xs"}))),p(c,{className:"__bg",bg:t?"error-alpha01":"primary-alpha01",position:"absolute",top:"-2px",bottom:"-2px",left:"-2px",right:"-2px",zIndex:0,borderRadius:"6px",opacity:0,transitionProperty:"opacity",transitionDuration:"fast",transitionTimingFunction:"ease"}),p(c,{className:"__border",bg:"white",border:["1px solid",t?"error":"outline"],position:"absolute",top:"0",bottom:"0",left:"0",right:"0",zIndex:0,borderRadius:"4px",transitionProperty:"border-color",transitionDuration:"fast",transitionTimingFunction:"ease"}))});function Q(n){var r=n.value,o=n.placeholder,t=n.label,i=n.items,a=n.hasError,l=n.disabled,s=n.onSelect,d=n.onRemove,u=b(k(i.filter(function(n){return n.value===r})[0],"label")||o||"Please select"),h=u[0],m=u[1],f=e({items:i.map(function(n){return Object.assign({},n,{selected:n.value===r})}),onSelect:function(n){m(n.label),s&&s(n)},onRemove:function(n){m("Please select"),d&&d(n)}}),g=f.items,v=f.isOpen,y=f.getDropProps;return p(c,null,p(J,Object.assign({id:f.id},l?{}:(0,f.getControlProps)(),{"aria-label":t,isActive:v,hasError:a,disabled:l}),h),v&&p(c,{position:"absolute",bottom:"0",width:"100%",transform:"translateY(100%) translateY(6px)",zIndex:1e3},p(q,Object.assign({},y(),{style:{maxHeight:"240px",overflow:"auto"}}),g.map(function(n){return p(X,Object.assign({key:n.value,selected:n.selected,highlighted:n.highlighted},n.getItemProps()),n.label)}))))}function Z(n){var r=n.name,o=n.validate,e=W(n,["name","validate"]);return p(x,{name:r,validate:o},function(n){var r=n.field,o=n.form,t=Boolean(o.errors&&o.errors[r.name]);return p(Q,Object.assign({},e,{hasError:t,onSelect:function(n){o.setFieldValue(r.name,n.value),e.onSelect&&e.onSelect(n)}}))})}function $(n){return p(m,null,p(V,{htmlFor:n.name},n.label),p(Z,Object.assign({},n)))}function nn(n){return p(w,{name:n.name,render:function(n){return p(a,{color:"error",fontSize:0},n)}})}function rn(n,r){var o={};for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&-1===r.indexOf(e)&&(o[e]=n[e]);return o}J.displayName="Control";var on=t.input(function(n){var r=n.theme,o=n.small,e=n.hasError;return"\n appearance: none;\n border: none;\n display: block;\n position: relative;\n font-family: "+r.fonts.roboto+";\n color: "+r.colors.body+";\n font-size: "+(o?r.fontSizes[0]:r.fontSizes[1])+";\n line-height: "+r.lineHeights[0]+";\n letter-spacing: 0.6px;\n width: 100%;\n margin: 0;\n min-height: "+(o?"36px":"48px")+";\n padding: "+(o?"10px":r.space.sm)+";\n background: transparent;\n color: "+(n.hasValue?r.colors.body:r.colors.secondary)+";\n cursor: pointer;\n z-index: 2;\n transition-property: border-color, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in-out;\n\n &::placeholder {\n color: "+r.colors.secondary+";\n line-height: "+r.lineHeights[0]+";\n opacity: 1;\n }\n &:-webkit-autofill {\n -webkit-text-fill-color: "+r.colors.body+";\n -webkit-box-shadow: 0 0 0px 1000px #fff inset;\n }\n &:disabled {\n background: transparent;\n color: "+r.colors.placeholder+";\n cursor: not-allowed;\n & ~ .__border {\n background: "+r.colors.background+";\n cursor: not-allowed;\n }\n }\n &:invalid,\n &:not(:disabled):active,\n &:not(:disabled):focus,\n &:not(:disabled):hover {\n box-shadow: none;\n outline: 0;\n color: "+r.colors.body+";\n\n & ~ .__bg {\n opacity: 1;\n }\n & ~ .__border {\n border-color: "+(e?r.colors.error:r.colors.primary)+";\n }\n & ~ .__tab {\n border-color: "+(e?r.colors.error:r.colors.primary)+";\n color: "+(e?r.colors.error:r.colors.primary)+";\n }\n }\n "+(o?"\n & ~ .__tab {\n padding: 10px;\n }\n ":"")+"\n"});on.displayName="InputElement";var en=f(function(n,r){var o=n.hasError,e=n.preTab,t=n.postTab,i=rn(n,["hasError","preTab","postTab"]),a=Boolean(e),l=e||t;return p(c,{display:"flex",ml:"-2px",mr:"-2px",p:"2px"},p(on,Object.assign({ref:r,hasError:o},i)),l&&p(c,{className:"__tab","aria-hidden":"true",display:"flex",alignItems:"center",justifyContent:"center",px:"sm",zIndex:1,color:o?"error":"secondary",bg:o?"#FDEBF0":"background",borderTopLeftRadius:a?"4px":"0",borderBottomLeftRadius:a?"4px":"0",borderTopRightRadius:a?"0":"4px",borderBottomRightRadius:a?"0":"4px",border:["1px solid",o?"error":"outline"],order:a?-1:1,transitionProperty:"border-color, color",transitionDuration:"fast",transitionTimingFunction:"ease"},l),p(c,{className:"__bg",bg:o?"error-alpha01":"primary-alpha01",position:"absolute",top:"0",bottom:"0",left:"0",right:"0",zIndex:0,borderRadius:"6px",opacity:0,transitionProperty:"opacity",transitionDuration:"fast",transitionTimingFunction:"ease"}),p(c,{className:"__border",bg:"white",border:["1px solid",o?"error":"outline"],position:"absolute",top:"2px",bottom:"2px",left:"2px",right:"2px",zIndex:0,borderRadius:"4px",transitionProperty:"border-color",transitionDuration:"fast",transitionTimingFunction:"ease"}))});function tn(n){var r=n.name,o=n.validate,e=n.onChange,t=n.onBlur,i=rn(n,["name","validate","onChange","onBlur"]);return p(x,{name:r,validate:o},function(n){var o=n.field,a=Boolean(k(n.form,["errors",r]));return p(en,Object.assign({},i,o,{hasError:a,onChange:function(n){o.onChange(n),e&&e(n)},onBlur:function(n){o.onBlur(n),t&&t(n)}}))})}function an(n){return p(m,null,p(V,{htmlFor:n.name},n.label),p(tn,Object.assign({},n)))}function ln(n,r){var o={};for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&-1===r.indexOf(e)&&(o[e]=n[e]);return o}var sn=Object.freeze(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n cursor: pointer;\n z-index: 0;\n"]),cn=t.span(function(n){var r=n.theme;return"\n font-size: "+r.fontSizes[1]+";\n font-weight: "+r.fontWeights[5]+";\n line-height: "+r.lineHeights[0]+";\n transition-property: color;\n transition-duration: "+r.transitionDurations.fast+";\n transition-timing-function: "+r.transitionTimingFunctions.ease+";\n "}),dn=t.div(function(n){var r=n.theme;return"\n width: 100%;\n border: 1px solid "+r.colors.outline+";\n border-radius: 4px;\n\n "+hn+" {\n padding: "+r.space.sm+";\n border-top: 1px solid "+r.colors.outline+";\n\n &:first-of-type {\n border-top: 0;\n }\n }\n\n "+(n.hasError?"\n border-color: "+r.colors.error+" !important;\n\n & "+hn+" {\n border-color: "+r.colors.error+" !important;\n }\n ":"")+"\n "}),pn=t.div(function(n){var r=n.theme;return"\n position: relative;\n width: 16px;\n height: 16px;\n border-radius: 100%;\n margin-top: 2px;\n margin-right: 8px;\n border: 1px solid "+(n.checked?r.colors.primaryDark:r.colors.outline)+";\n z-index: 1;\n transition-property: background, border-color;\n transition-duration: "+r.transitionDurations.fast+";\n transition-timing-function: "+r.transitionTimingFunctions.ease+";\n\n &::after {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: auto;\n width: 8px;\n height: 8px;\n border-radius: 100%;\n background: white;\n transition-property: transform;\n transition-duration: "+r.transitionDurations.fast+";\n transition-timing-function: "+r.transitionTimingFunctions.ease+";\n transform: scale(0);\n }\n "}),un=t.input(function(n){var r=n.theme;return"\n position: relative;\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n position: absolute;\n whitespace: nowrap;\n wordwrap: normal;\n z-index: 1;\n\n &:focus ~ "+pn+" {\n border-color: "+r.colors.primaryDark+";\n }\n &:focus ~ "+c+" "+cn+" {\n color: "+r.colors.primary+";\n }\n\n &:checked ~ "+pn+" {\n background: "+r.colors.primary+";\n border-color: "+r.colors.primaryDark+";\n\n &::after {\n transform: scale(1);\n }\n }\n &:checked ~ "+c+" "+cn+" {\n color: "+r.colors.primary+";\n }\n\n &:disabled ~ "+pn+" {\n border-color: "+r.colors.outline+" !important;\n }\n &:disabled ~ "+bn+" {\n background-color: "+r.colors.background+";\n }\n &:disabled ~ "+c+" "+cn+" {\n color: "+r.colors.secondary+" !important;\n }\n "}),bn=t.span(sn),hn=t.label(function(n){var r=n.theme;return"\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n margin-bottom: 0 !important;\n cursor: pointer;\n overflow: hidden;\n\n &:hover "+pn+" {\n border-color: "+r.colors.primaryDark+";\n }\n &:hover "+cn+" {\n color: "+r.colors.primary+";\n }\n "});function mn(n){var r=n.name,o=n.checked,e=n.description,t=n.label,i=ln(n,["children","name","checked","description","label"]),a=r+i.value;return p(hn,{htmlFor:a},p(un,Object.assign({id:a,name:r,type:"radio",checked:o},i)),p(pn,{checked:o}),p(c,{display:"block",position:"relative",zIndex:1,width:"calc(100% - 16px)"},t&&p(cn,null,t),e&&p(d,{color:"secondary",fontSize:0,fontWeight:4,lineHeight:0},e)),p(bn,null))}function fn(n){var r=n.children,o=n.name,e=n.validate,t=n.onChange,i=n.onBlur,a=ln(n,["children","name","validate","onChange","onBlur"]);return p(x,{name:o,validate:e},function(n){var e=n.field,l=Boolean(k(n.form,["errors",o]));return p(dn,{hasError:l},g.toArray(r).map(function(n){return v(n,Object.assign({},e,a,{value:n.props.value,hasError:l,checked:Boolean(e.value===n.props.value),onChange:function(n){e.onChange(n),t&&t(n)},onBlur:function(n){e.onBlur(n),i&&i(n)}}))}))})}function gn(n){var r=n.label,o=ln(n,["label"]);return p(m,null,p(V,{htmlFor:o.name},r),p(fn,Object.assign({},o)))}function vn(n,r){var o={};for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&-1===r.indexOf(e)&&(o[e]=n[e]);return o}var yn=t.select(function(n){var r=n.theme,o=n.hasError;return"\n appearance: none;\n border: none;\n display: block;\n position: relative;\n font-family: "+r.fonts.roboto+";\n color: "+r.colors.body+";\n font-size: "+r.fontSizes[1]+";\n line-height: "+r.lineHeights[0]+";\n letter-spacing: 0.6px;\n width: 100%;\n margin: 0;\n min-height: 48px;\n padding: "+r.space.sm+";\n background: transparent;\n color: "+(n.hasValue?r.colors.body:r.colors.secondary)+";\n cursor: pointer;\n z-index: 2;\n transition-property: border-color, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in-out;\n\n &::placeholder {\n color: "+r.colors.secondary+";\n line-height: "+r.lineHeights[0]+";\n opacity: 1;\n }\n &:-webkit-autofill {\n -webkit-text-fill-color: "+r.colors.body+";\n -webkit-box-shadow: 0 0 0px 1000px #fff inset;\n }\n &:disabled {\n background: transparent;\n color: "+r.colors.placeholder+";\n cursor: not-allowed;\n & ~ .__border {\n background: "+r.colors.background+";\n cursor: not-allowed;\n }\n }\n &:invalid,\n &:-moz-ui-invalid,\n &:not(:disabled):active,\n &:not(:disabled):focus,\n &:not(:disabled):hover {\n box-shadow: none;\n outline: 0;\n color: "+r.colors.body+";\n\n & ~ .__bg {\n opacity: 1;\n }\n & ~ .__border {\n border-color: "+(o?r.colors.error:r.colors.primary)+";\n\n div {\n border-color: "+(o?r.colors.error:r.colors.primary)+";\n color: "+(o?r.colors.error:r.colors.primary)+";\n }\n }\n }\n"});yn.displayName="SelectElement";var xn=f(function(n,r){var o=n.children,e=n.hasError,t=n.placeholder;void 0===t&&(t="");var i=vn(n,["children","hasError","placeholder"]);return p(c,{ml:"-2px",mr:"-2px",p:"2px"},p(yn,Object.assign({ref:r,hasValue:Boolean(i.value),hasError:e},i,{value:i.value||""}),t&&p("option",{value:"",disabled:!0},t),o),p(c,{className:"__bg",bg:e?"error-alpha01":"primary-alpha01",position:"absolute",top:"0",bottom:"0",left:"0",right:"0",zIndex:0,borderRadius:"6px",opacity:0,transitionProperty:"opacity",transitionDuration:"fast",transitionTimingFunction:"ease"}),p(c,{className:"__border",bg:"white",border:["1px solid",e?"error":"outline"],position:"absolute",top:"2px",bottom:"2px",left:"2px",right:"2px",zIndex:0,borderRadius:"4px",transitionProperty:"border-color",transitionDuration:"fast",transitionTimingFunction:"ease"}),p(c,{position:"absolute",right:"0",top:"0",bottom:"0",height:"16px",my:"auto",pr:"sm",style:{pointerEvents:"none"}},p(s,{name:"ChevronDown",color:"secondary"})))});function wn(n){var r=n.name,o=n.validate,e=n.onChange,t=n.onBlur,i=vn(n,["name","validate","onChange","onBlur"]);return p(x,{name:r,validate:o},function(n){var o=n.field,a=Boolean(k(n.form,["errors",r]));return p(xn,Object.assign({},i,o,{hasError:a,onChange:function(n){o.onChange(n),e&&e(n)},onBlur:function(n){o.onBlur(n),t&&t(n)}}))})}function kn(n){return p(m,null,p(V,{htmlFor:n.name},n.label),p(wn,Object.assign({},n)))}var On=t(c)(function(n){return"\n border-left: 2px solid currentColor;\n padding-left: "+n.theme.space.sm+";\n "});function _n(n,r){var o={};for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&-1===r.indexOf(e)&&(o[e]=n[e]);return o}var zn=t.textarea(function(n){var r=n.theme,o=n.hasError;return"\n appearance: none;\n border: none;\n display: block;\n position: relative;\n font-family: "+r.fonts.roboto+";\n color: "+r.colors.body+";\n font-size: "+r.fontSizes[1]+";\n line-height: "+r.lineHeights[0]+";\n letter-spacing: 0.6px;\n width: 100%;\n margin: 0;\n min-height: 48px;\n padding: "+r.space.sm+";\n background: transparent;\n color: "+(n.hasValue?r.colors.body:r.colors.secondary)+";\n cursor: pointer;\n z-index: 2;\n transition-property: border-color, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in-out;\n\n &::placeholder {\n color: "+r.colors.secondary+";\n line-height: "+r.lineHeights[0]+";\n opacity: 1;\n }\n &:-webkit-autofill {\n -webkit-text-fill-color: "+r.colors.body+";\n -webkit-box-shadow: 0 0 0px 1000px #fff inset;\n }\n &:disabled {\n background: transparent;\n color: "+r.colors.placeholder+";\n cursor: not-allowed;\n & ~ .__border {\n background: "+r.colors.background+";\n cursor: not-allowed;\n }\n }\n &:invalid,\n &:-moz-ui-invalid,\n &:not(:disabled):active,\n &:not(:disabled):focus,\n &:not(:disabled):hover {\n box-shadow: none;\n outline: 0;\n color: "+r.colors.body+";\n\n & ~ .__bg {\n opacity: 1;\n }\n & ~ .__border {\n border-color: "+(o?r.colors.error:r.colors.primary)+";\n\n div {\n border-color: "+(o?r.colors.error:r.colors.primary)+";\n color: "+(o?r.colors.error:r.colors.primary)+";\n }\n }\n }\n"});zn.displayName="TextareaElement",zn.defaultProps={rows:4};var jn=f(function(n,r){var o=n.hasError,e=_n(n,["hasError"]);return p(c,{ml:"-2px",mr:"-2px",p:"2px"},p(zn,Object.assign({ref:r,hasError:o},e)),p(c,{className:"__bg",bg:o?"error-alpha01":"primary-alpha01",position:"absolute",top:"0",bottom:"0",left:"0",right:"0",zIndex:0,borderRadius:"6px",opacity:0,transitionProperty:"opacity",transitionDuration:"fast",transitionTimingFunction:"ease"}),p(c,{className:"__border",bg:"white",border:["1px solid",o?"error":"outline"],position:"absolute",top:"2px",bottom:"2px",left:"2px",right:"2px",zIndex:0,borderRadius:"4px",transitionProperty:"border-color",transitionDuration:"fast",transitionTimingFunction:"ease"}))});function Dn(n){var r=n.name,o=n.validate,e=n.onChange,t=n.onBlur,i=_n(n,["name","validate","onChange","onBlur"]);return p(x,{name:r,validate:o},function(n){var o=n.field,a=Boolean(k(n.form,["errors",r]));return p(jn,Object.assign({},i,o,{hasError:a,onChange:function(n){o.onChange(n),e&&e(n)},onBlur:function(n){o.onBlur(n),t&&t(n)}}))})}function En(n){return p(m,null,p(V,{htmlFor:n.name},n.label),p(Dn,Object.assign({},n)))}var Bn=Object.freeze(["\n ","\n"]),Fn="\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n position: absolute;\n whitespace: nowrap;\n wordwrap: normal;\n",Cn=t.div(function(n){var r=n.theme;return"\n display: block;\n position: absolute;\n top: 3px;\n bottom: 0;\n left: 3px;\n width: 24px;\n height: 24px;\n border-radius: 100px;\n border: 1px solid "+r.colors.outline+";\n color: white;\n background: white;\n stroke: white;\n transition-property: transform, background, border-color;\n transition-duration: "+r.transitionDurations.fast+";\n transition-timing-function: "+r.transitionTimingFunctions.natural+";\n"}),Tn=t.div(function(n){var r=n.theme;return"\n position: relative;\n width: 56px;\n height: 32px;\n border-radius: 100px;\n border: 1px solid "+r.colors.outline+";\n background: "+r.colors.background+";\n cursor: pointer;\n transition-property: background, border-color;\n transition-duration: "+r.transitionDurations.fast+";\n transition-timing-function: "+r.transitionTimingFunctions.natural+";\n "}),In=t.label(function(n){return"\n display: flex;\n align-items: center;\n margin-bottom: 0 !important;\n\n &:hover "+Tn+" {\n "+Cn+" {\n border-color: "+n.theme.colors.primaryDark+";\n }\n }\n "}),Pn=t.input(function(n){var r=n.theme;return"\n "+Fn+"\n\n &:focus ~ "+Tn+" {\n border-color: "+r.colors.primary+";\n }\n &:checked ~ "+Tn+" {\n border-color: "+r.colors.primary+";\n\n "+Cn+" {\n background: "+r.colors.primary+";\n border-color: "+r.colors.primaryDark+";\n transform: translateX(24px);\n }\n }\n &:disabled ~ "+Tn+" {\n pointer-events: none;\n "+Cn+" {\n border-color: "+r.colors.outline+";\n }\n }\n "}),Rn=t.span(Bn,Fn);function Sn(n){var r=n.label,o=n.name,e=n.checked,t=function(n,r){var o={};for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&-1===r.indexOf(e)&&(o[e]=n[e]);return o}(n,["label","name","checked"]);return p(In,{htmlFor:o},p(Pn,Object.assign({id:o,name:o,type:"checkbox",checked:e},t)),p(Tn,null,p(Cn,null,p(s,{name:"Check",width:"12px",height:"12px",position:"absolute",top:"0",bottom:"0",left:"0",right:"0",m:"auto",style:{strokeWidth:"2px"}}))),p(Rn,null,r))}function Nn(n){var r=n.label;return p(x,{name:n.name,validate:n.validate},function(n){var o=n.field;return p(Sn,Object.assign({label:r},o,{checked:Boolean(o.value)}))})}function Hn(n){var r=n.value;void 0===r&&(r="");var o=n.masker;void 0===o&&(o="*");var e=n.separator;void 0===e&&(e="-");var t=new RegExp("[^0-9"+e+"]").test(r)?"":_(r,o),i=j(z(t,o),e),a=b(t),l=a[0],s=a[1],c=b(i),d=c[0],u=c[1],m=y(function(n){n.persist();var r=n.target.value,t=r.slice(-1);if(!(new RegExp("[^0-9"+e+o+"]").test(t)||r.length>11)){var i=_(r,o),a=_(l),c=i.length<a.length?a.slice(0,i.length):new RegExp("["+e+o+"]").test(t)?a:a+i.slice(-1);s(c),u(j(z(c,o),e))}},[l,s,d,u]),f=y(function(n){n.persist();var r=n.target.value.length;n.target.setSelectionRange(r,r)},[]);return h(function(){n.onUpdate&&n.onUpdate(l)},[l]),p(en,Object.assign({},n,{value:d,onChange:m,onFocus:f,onKeyUp:f,onKeyDown:f,onClick:f}))}function Vn(n){var r=n.name,o=n.validate,e=function(n,r){var o={};for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&-1===r.indexOf(e)&&(o[e]=n[e]);return o}(n,["name","validate"]);return p(x,{name:r,validate:o},function(n){var o=n.field,t=n.form,i=Boolean(k(t,["errors",r]));return p(Hn,Object.assign({},e,o,{hasError:i,onUpdate:function(n){t.setFieldValue(r,n)}}))})}function Mn(n){return p(m,null,p(V,{htmlFor:n.name},n.label),p(Vn,Object.assign({},n)))}export{P as CheckboxGroup,R as Checkbox,S as CheckboxField,Y as DateInput,A as DateInputField,L as DateInputFieldWithLabel,X as Item,q as Body,J as Control,Q as Dropdown,Z as DropdownField,$ as DropdownFieldWithLabel,nn as ErrorMessage,en as Input,tn as InputField,an as InputFieldWithLabel,V as Label,mn as Radio,fn as RadioField,gn as RadioFieldWithLabel,xn as Select,wn as SelectField,kn as SelectFieldWithLabel,On as SubGroup,jn as Textarea,Dn as TextareaField,En as TextareaFieldWithLabel,Fn as hidden,Sn as Toggle,Nn as ToggleField,Hn as SSNInput,Vn as SSNInputField,Mn as SSNInputFieldWithLabel}; | ||
//# sourceMappingURL=index.esm.js.map |
@@ -1,2 +0,2 @@ | ||
var n,e=require("styled-system"),r=require("use-drop"),o=require("styled-components"),t=(n=o)&&"object"==typeof n&&"default"in n?n.default:n,a=require("@truework/ui"),i=require("react"),l=require("formik"),s=require("lodash"),c=require("parse-ssn");function d(n,e){var r={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&-1===e.indexOf(o)&&(r[o]=n[o]);return r}var p=Object.freeze([""]),u=t(a.Icon)(p),m=t.div(function(n){var e=n.theme;return"\n position: relative;\n width: 16px;\n height: 16px;\n border-radius: 2px;\n margin-top: 2px;\n margin-right: 8px;\n border: 1px solid "+(n.checked?e.colors.primaryDark:e.colors.outline)+";\n transition-property: background, border-color;\n transition-duration: "+e.transitionDurations.fast+";\n transition-timing-function: "+e.transitionTimingFunctions.ease+";\n\n "+u+" {\n display: block;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: auto;\n width: 12px;\n height: 12px;\n color: white;\n stroke: white;\n stroke-width: 2px;\n transition-property: transform;\n transition-duration: "+e.transitionDurations.fast+";\n transition-timing-function: "+e.transitionTimingFunctions.ease+";\n transform: scale(0);\n }\n "}),b=t(a.H5)(function(n){var e=n.theme;return"\n width: calc(100% - 16px);\n transition-property: color;\n transition-duration: "+e.transitionDurations.fast+";\n transition-timing-function: "+e.transitionTimingFunctions.ease+";\n "}),h=t.input(function(n){var e=n.theme;return"\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n position: absolute;\n whitespace: nowrap;\n wordwrap: normal;\n\n &:focus ~ "+m+" {\n border-color: "+e.colors.primaryDark+";\n }\n &:checked ~ "+m+" {\n background: "+e.colors.primary+";\n border-color: "+e.colors.primaryDark+";\n\n "+u+" {\n transform: scale(1);\n }\n }\n &:focus ~ "+b+", &:focus ~"+a.Span+", &:checked ~ "+a.Span+" {\n color: "+e.colors.primary+";\n }\n\n "+(n.hasError?"\n & ~ "+m+" {\n border-color: "+e.colors.error+" !important;\n }\n ":"")+"\n "}),f=t.label(function(n){var e=n.theme;return"\n display: flex;\n align-items: flex-start;\n width: 100%;\n margin-bottom: 0 !important;\n\n "+(n.disabled?"\n "+m+" {\n background: "+e.colors.background+";\n }\n "+a.Span+" {\n color: "+e.colors.placeholder+";\n }\n ":"\n &:hover "+m+" {\n border-color: "+e.colors.primaryDark+";\n }\n &:hover "+b+", &:hover "+a.Span+" {\n color: "+e.colors.primary+";\n }\n ")+"\n "}),g=t.div(function(n){var e=n.theme;return"\n width: 100%;\n\n "+f+" {\n padding: "+e.space.sm+";\n border: 1px solid "+e.colors.outline+";\n border-top: none;\n display: flex;\n align-items: center;\n }\n\n "+f+":first-child {\n border-top: 1px solid "+e.colors.outline+";\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n }\n\n "+f+":last-child {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n }\n "});function x(n){var e=n.children,r=n.name,o=n.checked,t=n.disabled,l=d(n,["children","name","checked","disabled"]);return i.createElement(f,{htmlFor:r,disabled:t},i.createElement(h,Object.assign({id:r,name:r,type:"checkbox",checked:o,disabled:t},l)),i.createElement(m,{checked:o},i.createElement(u,{name:"Check"})),i.createElement(a.Span,{display:"block",width:"calc(100% - 16px)",fontSize:1,lineHeight:1,fontWeight:5,style:{transitionProperty:"color",transitionDuration:"150ms",transitionTimingFunction:"ease-in-out"}},e))}function v(n){return n<10?"0"+n:""+n}var y=Object.freeze(["\n display: block;\n position: relative;\n font-weight: 500;\n letter-spacing: 0.6px;\n ","\n ","\n ","\n"]),E=t.label(y,e.typography,e.color,e.space);E.displayName="Label",E.defaultProps={fontSize:1,lineHeight:1,mb:"xs"};var w=Object.freeze(["\n appearance: none;\n border: none;\n display: block;\n position: relative;\n font-family: ",";\n color: ",";\n font-size: ",";\n line-height: ",";\n letter-spacing: 0.6px;\n margin: 0;\n min-height: 48px;\n padding: ",";\n background: transparent;\n color: ",";\n cursor: pointer;\n z-index: 2;\n transition-property: border-color, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in-out;\n\n &::-ms-expand {\n display: none;\n }\n &:disabled {\n background: transparent;\n color: ",";\n cursor: not-allowed;\n & ~ .__border {\n background: ",";\n cursor: not-allowed;\n }\n }\n &:not(:disabled):active,\n &:not(:disabled):focus,\n &:not(:disabled):hover {\n outline: 0;\n color: ",";\n\n & ~ .__bg {\n opacity: 1;\n }\n & ~ .__border {\n border-color: ",";\n\n div {\n border-color: ",";\n color: ",";\n }\n }\n }\n"]),k=t.select(function(n){var e=n.theme,r=n.hasError;return o.css(w,e.fonts.roboto,e.colors.body,e.fontSizes[1],e.lineHeights[0],e.space.sm,n.hasValue?e.colors.body:e.colors.secondary,function(n){return n.theme.colors.placeholder},e.colors.background,e.colors.body,r?e.colors.error:e.colors.primary,r?e.colors.error:e.colors.primary,r?e.colors.error:e.colors.primary)});function B(n){var e=n.name,r=n.label;void 0===r&&(r="Date");var o=n.disabled,t=n.initialMonth;void 0===t&&(t=0);var l=n.initialDay;void 0===l&&(l=0);var c=n.initialYear;void 0===c&&(c=0);var d=n.minMonth;void 0===d&&(d=1);var p=n.minDay;void 0===p&&(p=1);var u=n.minYear;void 0===u&&(u=1980);var m=n.maxMonth;void 0===m&&(m=12);var b=n.maxDay;void 0===b&&(b=31);var h=n.maxYear;void 0===h&&(h=2030);var f=n.hasError,g=n.onUpdate,x=i.useRef(null),y=i.useRef(null),E=i.useRef(null),w=i.useState(t),B=w[0],F=w[1],O=i.useState(l),_=O[0],D=O[1],z=i.useState(c),j=z[0],S=z[1],C=function(n){return new Date(n.year,n.month,0).getUTCDate()}({year:j||2020,month:B});return i.useEffect(function(){j&&B&&_&&g(j+"-"+v(B)+"-"+v(_))},[B,_,j]),i.createElement(a.Box,{ml:"-4px",mr:"-4px",p:"4px"},i.createElement(a.Box,{display:"flex",alignItems:"center",height:"48px",pl:"56px"},i.createElement(k,{ref:x,name:e+"-month",value:B,disabled:o,onChange:function(n){F(parseInt(n.target.value,10)),y.current&&y.current.focus()},"aria-label":r+": Month",hasValue:Boolean(B),hasError:f},i.createElement("option",{value:"0",disabled:!0,selected:!0},"mm"),s.times(m-d+1,function(){return""}).map(function(n,e){var r=d+e;return i.createElement("option",{key:r,value:r},v(r))})),i.createElement(a.Box,{height:"50%",width:"1px",bg:f?"error":"outline",zIndex:2,transform:"rotate(10deg)"}),i.createElement(k,{ref:y,name:e+"-day",value:_,disabled:o,onChange:function(n){D(parseInt(n.target.value,10)),E.current&&E.current.focus()},"aria-label":r+": Day",hasValue:Boolean(_),hasError:f},i.createElement("option",{value:"0",disabled:!0,selected:!0},"dd"),s.times(Math.min(b,C)-p+1,function(){return""}).map(function(n,e){var r=p+e;return i.createElement("option",{key:r,value:r},v(r))})),i.createElement(a.Box,{height:"50%",width:"1px",bg:f?"error":"outline",zIndex:2,transform:"rotate(10deg)"}),i.createElement(k,{ref:E,name:e+"-year",value:j,disabled:o,onChange:function(n){S(parseInt(n.target.value,10))},"aria-label":r+": Year",hasValue:Boolean(j),hasError:f},i.createElement("option",{value:"0",disabled:!0,selected:!0},"yyyy"),s.times(h-u+1,function(n){return u+n}).map(function(n){return i.createElement("option",{key:n,value:n},n)})),i.createElement(a.Box,{className:"__bg",bg:f?"error-alpha01":"primary-alpha01",position:"absolute",top:"-4px",bottom:"-4px",left:"-4px",right:"-4px",zIndex:0,borderRadius:"6px",opacity:0,transitionProperty:"opacity",transitionDuration:"fast",transitionTimingFunction:"ease"}),i.createElement(a.Box,{className:"__border",bg:"white",border:["1px solid",f?"error":"outline"],position:"absolute",top:"0",bottom:"0",left:"0",right:"0",zIndex:0,borderRadius:"4px",transitionProperty:"border-color",transitionDuration:"fast",transitionTimingFunction:"ease"},i.createElement(a.Box,{"aria-hidden":"true",position:"absolute",top:"0",left:"0",display:"flex",alignItems:"center",justifyContent:"center",px:"sm",height:"100%",zIndex:0,color:f?"error":"secondary",bg:f?"#FDEBF0":"background",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px",borderRight:["1px solid",f?"error":"outline"],transitionProperty:"border-color, color",transitionDuration:"fast",transitionTimingFunction:"ease"},i.createElement(a.Icon,{name:"Calendar"})))))}function F(n){var e=n.name,r=n.validate,o=function(n,e){var r={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&-1===e.indexOf(o)&&(r[o]=n[o]);return r}(n,["name","validate"]);return i.createElement(l.Field,{name:e,validate:r},function(n){var r=n.field,t=n.form,a=Boolean(s.get(t,["errors",e])),l=(r.value||"").split("-"),c=l[0];void 0===c&&(c="");var d=l[1];void 0===d&&(d="");var p=l[2];return void 0===p&&(p=""),i.createElement(B,Object.assign({name:e},o,{initialMonth:d?parseInt(d,10):void 0,initialDay:p?parseInt(p,10):void 0,initialYear:c?parseInt(c,10):void 0,hasError:a,onUpdate:function(n){t.setFieldValue(e,n)}}))})}function O(n,e){var r={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&-1===e.indexOf(o)&&(r[o]=n[o]);return r}var _=t(a.Box)(function(n){var e=n.theme,r=n.selected,o=n.highlighted;return"\n display: flex;\n align-items: center;\n padding: "+e.space.sm+";\n color: "+(r||o?e.colors.body:e.colors.secondary)+";\n background-color: "+(r||o?e.colors.background:"white")+";\n cursor: pointer;\n font-size: "+e.fontSizes[1]+";\n font-weight: 400;\n line-height: "+e.lineHeights[1]+";\n letter-spacing: 0.6px;\n\n &:hover {\n background: "+e.colors.background+";\n }\n"});function D(n){var e=n.children,r=O(n,["children"]);return i.createElement(_,Object.assign({as:"li"},r),e)}var z=i.forwardRef(function(n,e){var r=n.children,o=O(n,["children"]);return i.createElement(a.Box,Object.assign({ref:e,as:"ul",boxShadow:"medium",borderRadius:2,overflow:"auto",width:"100%",bg:"white"},o),r)});z.displayName="Body";var j=t.button(function(n){var e=n.theme,r=n.hasError;return"\n display: block;\n position: relative;\n width: 100%;\n z-index: 1;\n height: 48px;\n padding: 0 16px;\n text-align: left;\n font-size: "+e.fontSizes[1]+";\n font-weight: 400;\n line-height: "+e.lineHeights[1]+";\n color: "+e.colors.secondary+";\n transition-property: color;\n transition-duration: "+e.transitionDurations.fast+";\n transition-timing-function: "+e.transitionTimingFunctions.ease+";\n\n "+(n.disabled?"\n background: transparent;\n color: "+e.colors.placeholder+";\n cursor: not-allowed;\n & ~ .__border {\n background: "+e.colors.background+";\n cursor: not-allowed;\n }\n ":"\n &:active,\n &:focus,\n &:hover {\n outline: 0;\n color: "+e.colors.body+";\n\n & ~ .__bg {\n opacity: 1;\n }\n & ~ .__border {\n border-color: "+(r?e.colors.error:e.colors.primary)+";\n\n div {\n border-color: "+(r?e.colors.error:e.colors.primary)+";\n color: "+(r?e.colors.error:e.colors.primary)+";\n }\n }\n }\n ")+"\n\n "+(n.isActive?"\n outline: 0;\n color: "+e.colors.body+";\n\n & ~ .__bg {\n opacity: 1;\n }\n & ~ .__border {\n border-color: "+(r?e.colors.error:e.colors.primary)+";\n\n div {\n border-color: "+(r?e.colors.error:e.colors.primary)+";\n color: "+(r?e.colors.error:e.colors.primary)+";\n }\n }\n ":"")+"\n"});j.displayName="ControlOuter";var S=i.forwardRef(function(n,e){var r=n.children,o=n.isActive,t=n.hasError,l=O(n,["children","isActive","hasError"]);return i.createElement("div",{style:{position:"relative"}},i.createElement(j,Object.assign({ref:e,isActive:o,hasError:t,type:"button"},l),i.createElement(a.Span,{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"},i.createElement(a.Span,{width:"100%",fontWeight:4,style:{whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",letterSpacing:"0.6px"}},r),i.createElement(a.Icon,{name:"ChevronDown",ml:"xs"}))),i.createElement(a.Box,{className:"__bg",bg:t?"error-alpha01":"primary-alpha01",position:"absolute",top:"-2px",bottom:"-2px",left:"-2px",right:"-2px",zIndex:0,borderRadius:"6px",opacity:0,transitionProperty:"opacity",transitionDuration:"fast",transitionTimingFunction:"ease"}),i.createElement(a.Box,{className:"__border",bg:"white",border:["1px solid",t?"error":"outline"],position:"absolute",top:"0",bottom:"0",left:"0",right:"0",zIndex:0,borderRadius:"4px",transitionProperty:"border-color",transitionDuration:"fast",transitionTimingFunction:"ease"}))});function C(n){var e=n.value,o=n.placeholder,t=n.label,l=n.items,c=n.hasError,d=n.disabled,p=n.onSelect,u=n.onRemove,m=i.useState(s.get(l.filter(function(n){return n.value===e})[0],"label")||o||"Please select"),b=m[0],h=m[1],f=r.useSelect({items:l.map(function(n){return Object.assign({},n,{selected:n.value===e})}),onSelect:function(n){h(n.label),p&&p(n)},onRemove:function(n){h("Please select"),u&&u(n)}}),g=f.items,x=f.isOpen,v=f.getDropProps;return i.createElement(a.Box,null,i.createElement(S,Object.assign({id:f.id},d?{}:(0,f.getControlProps)(),{"aria-label":t,isActive:x,hasError:c,disabled:d}),b),x&&i.createElement(a.Box,{position:"absolute",bottom:"0",width:"100%",transform:"translateY(100%) translateY(6px)",zIndex:1e3},i.createElement(z,Object.assign({},v(),{style:{maxHeight:"240px",overflow:"auto"}}),g.map(function(n){return i.createElement(D,Object.assign({key:n.value,selected:n.selected,highlighted:n.highlighted},n.getItemProps()),n.label)}))))}function I(n){var e=n.name,r=n.validate,o=O(n,["name","validate"]);return i.createElement(l.Field,{name:e,validate:r},function(n){var e=n.field,r=n.form,t=Boolean(r.errors&&r.errors[e.name]);return i.createElement(C,Object.assign({},o,{hasError:t,onSelect:function(n){r.setFieldValue(e.name,n.value),o.onSelect&&o.onSelect(n)}}))})}function R(n,e){var r={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&-1===e.indexOf(o)&&(r[o]=n[o]);return r}S.displayName="Control";var T=t.input(function(n){var e=n.theme,r=n.small,o=n.hasError;return"\n appearance: none;\n border: none;\n display: block;\n position: relative;\n font-family: "+e.fonts.roboto+";\n color: "+e.colors.body+";\n font-size: "+(r?e.fontSizes[0]:e.fontSizes[1])+";\n line-height: "+e.lineHeights[0]+";\n letter-spacing: 0.6px;\n width: 100%;\n margin: 0;\n min-height: "+(r?"36px":"48px")+";\n padding: "+(r?"10px":e.space.sm)+";\n background: transparent;\n color: "+(n.hasValue?e.colors.body:e.colors.secondary)+";\n cursor: pointer;\n z-index: 2;\n transition-property: border-color, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in-out;\n\n &::placeholder {\n color: "+e.colors.secondary+";\n line-height: "+e.lineHeights[0]+";\n opacity: 1;\n }\n &:-webkit-autofill {\n -webkit-text-fill-color: "+e.colors.body+";\n -webkit-box-shadow: 0 0 0px 1000px #fff inset;\n }\n &:disabled {\n background: transparent;\n color: "+e.colors.placeholder+";\n cursor: not-allowed;\n & ~ .__border {\n background: "+e.colors.background+";\n cursor: not-allowed;\n }\n }\n &:invalid,\n &:not(:disabled):active,\n &:not(:disabled):focus,\n &:not(:disabled):hover {\n box-shadow: none;\n outline: 0;\n color: "+e.colors.body+";\n\n & ~ .__bg {\n opacity: 1;\n }\n & ~ .__border {\n border-color: "+(o?e.colors.error:e.colors.primary)+";\n }\n & ~ .__tab {\n border-color: "+(o?e.colors.error:e.colors.primary)+";\n color: "+(o?e.colors.error:e.colors.primary)+";\n }\n }\n "+(r?"\n & ~ .__tab {\n padding: 10px;\n }\n ":"")+"\n"});T.displayName="InputElement";var P=i.forwardRef(function(n,e){var r=n.hasError,o=n.preTab,t=n.postTab,l=R(n,["hasError","preTab","postTab"]),s=Boolean(o),c=o||t;return i.createElement(a.Box,{display:"flex",ml:"-2px",mr:"-2px",p:"2px"},i.createElement(T,Object.assign({ref:e,hasError:r},l)),c&&i.createElement(a.Box,{className:"__tab","aria-hidden":"true",display:"flex",alignItems:"center",justifyContent:"center",px:"sm",zIndex:1,color:r?"error":"secondary",bg:r?"#FDEBF0":"background",borderTopLeftRadius:s?"4px":"0",borderBottomLeftRadius:s?"4px":"0",borderTopRightRadius:s?"0":"4px",borderBottomRightRadius:s?"0":"4px",border:["1px solid",r?"error":"outline"],order:s?-1:1,transitionProperty:"border-color, color",transitionDuration:"fast",transitionTimingFunction:"ease"},c),i.createElement(a.Box,{className:"__bg",bg:r?"error-alpha01":"primary-alpha01",position:"absolute",top:"0",bottom:"0",left:"0",right:"0",zIndex:0,borderRadius:"6px",opacity:0,transitionProperty:"opacity",transitionDuration:"fast",transitionTimingFunction:"ease"}),i.createElement(a.Box,{className:"__border",bg:"white",border:["1px solid",r?"error":"outline"],position:"absolute",top:"2px",bottom:"2px",left:"2px",right:"2px",zIndex:0,borderRadius:"4px",transitionProperty:"border-color",transitionDuration:"fast",transitionTimingFunction:"ease"}))});function N(n){var e=n.name,r=n.validate,o=n.onChange,t=n.onBlur,a=R(n,["name","validate","onChange","onBlur"]);return i.createElement(l.Field,{name:e,validate:r},function(n){var r=n.field,l=Boolean(s.get(n.form,["errors",e]));return i.createElement(P,Object.assign({},a,r,{hasError:l,onChange:function(n){r.onChange(n),o&&o(n)},onBlur:function(n){r.onBlur(n),t&&t(n)}}))})}function H(n,e){var r={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&-1===e.indexOf(o)&&(r[o]=n[o]);return r}var L=Object.freeze(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n cursor: pointer;\n z-index: 0;\n"]),W=t.span(function(n){var e=n.theme;return"\n font-size: "+e.fontSizes[1]+";\n font-weight: "+e.fontWeights[5]+";\n line-height: "+e.lineHeights[0]+";\n transition-property: color;\n transition-duration: "+e.transitionDurations.fast+";\n transition-timing-function: "+e.transitionTimingFunctions.ease+";\n "}),V=t.div(function(n){var e=n.theme;return"\n width: 100%;\n border: 1px solid "+e.colors.outline+";\n border-radius: 4px;\n\n "+Y+" {\n padding: "+e.space.sm+";\n border-top: 1px solid "+e.colors.outline+";\n\n &:first-of-type {\n border-top: 0;\n }\n }\n\n "+(n.hasError?"\n border-color: "+e.colors.error+" !important;\n\n & "+Y+" {\n border-color: "+e.colors.error+" !important;\n }\n ":"")+"\n "}),q=t.div(function(n){var e=n.theme;return"\n position: relative;\n width: 16px;\n height: 16px;\n border-radius: 100%;\n margin-top: 2px;\n margin-right: 8px;\n border: 1px solid "+(n.checked?e.colors.primaryDark:e.colors.outline)+";\n z-index: 1;\n transition-property: background, border-color;\n transition-duration: "+e.transitionDurations.fast+";\n transition-timing-function: "+e.transitionTimingFunctions.ease+";\n\n &::after {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: auto;\n width: 8px;\n height: 8px;\n border-radius: 100%;\n background: white;\n transition-property: transform;\n transition-duration: "+e.transitionDurations.fast+";\n transition-timing-function: "+e.transitionTimingFunctions.ease+";\n transform: scale(0);\n }\n "}),M=t.input(function(n){var e=n.theme;return"\n position: relative;\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n position: absolute;\n whitespace: nowrap;\n wordwrap: normal;\n z-index: 1;\n\n &:focus ~ "+q+" {\n border-color: "+e.colors.primaryDark+";\n }\n &:focus ~ "+a.Box+" "+W+" {\n color: "+e.colors.primary+";\n }\n\n &:checked ~ "+q+" {\n background: "+e.colors.primary+";\n border-color: "+e.colors.primaryDark+";\n\n &::after {\n transform: scale(1);\n }\n }\n &:checked ~ "+a.Box+" "+W+" {\n color: "+e.colors.primary+";\n }\n\n &:disabled ~ "+q+" {\n border-color: "+e.colors.outline+" !important;\n }\n &:disabled ~ "+U+" {\n background-color: "+e.colors.background+";\n }\n &:disabled ~ "+a.Box+" "+W+" {\n color: "+e.colors.secondary+" !important;\n }\n "}),U=t.span(L),Y=t.label(function(n){var e=n.theme;return"\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n margin-bottom: 0 !important;\n cursor: pointer;\n overflow: hidden;\n\n &:hover "+q+" {\n border-color: "+e.colors.primaryDark+";\n }\n &:hover "+W+" {\n color: "+e.colors.primary+";\n }\n "});function A(n){var e=n.children,r=n.name,o=n.validate,t=n.onChange,a=n.onBlur,c=H(n,["children","name","validate","onChange","onBlur"]);return i.createElement(l.Field,{name:r,validate:o},function(n){var o=n.field,l=Boolean(s.get(n.form,["errors",r]));return i.createElement(V,{hasError:l},i.Children.toArray(e).map(function(n){return i.cloneElement(n,Object.assign({},o,c,{value:n.props.value,hasError:l,checked:Boolean(o.value===n.props.value),onChange:function(n){o.onChange(n),t&&t(n)},onBlur:function(n){o.onBlur(n),a&&a(n)}}))}))})}function G(n,e){var r={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&-1===e.indexOf(o)&&(r[o]=n[o]);return r}var K=t.select(function(n){var e=n.theme,r=n.hasError;return"\n appearance: none;\n border: none;\n display: block;\n position: relative;\n font-family: "+e.fonts.roboto+";\n color: "+e.colors.body+";\n font-size: "+e.fontSizes[1]+";\n line-height: "+e.lineHeights[0]+";\n letter-spacing: 0.6px;\n width: 100%;\n margin: 0;\n min-height: 48px;\n padding: "+e.space.sm+";\n background: transparent;\n color: "+(n.hasValue?e.colors.body:e.colors.secondary)+";\n cursor: pointer;\n z-index: 2;\n transition-property: border-color, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in-out;\n\n &::placeholder {\n color: "+e.colors.secondary+";\n line-height: "+e.lineHeights[0]+";\n opacity: 1;\n }\n &:-webkit-autofill {\n -webkit-text-fill-color: "+e.colors.body+";\n -webkit-box-shadow: 0 0 0px 1000px #fff inset;\n }\n &:disabled {\n background: transparent;\n color: "+e.colors.placeholder+";\n cursor: not-allowed;\n & ~ .__border {\n background: "+e.colors.background+";\n cursor: not-allowed;\n }\n }\n &:invalid,\n &:-moz-ui-invalid,\n &:not(:disabled):active,\n &:not(:disabled):focus,\n &:not(:disabled):hover {\n box-shadow: none;\n outline: 0;\n color: "+e.colors.body+";\n\n & ~ .__bg {\n opacity: 1;\n }\n & ~ .__border {\n border-color: "+(r?e.colors.error:e.colors.primary)+";\n\n div {\n border-color: "+(r?e.colors.error:e.colors.primary)+";\n color: "+(r?e.colors.error:e.colors.primary)+";\n }\n }\n }\n"});K.displayName="SelectElement";var X=i.forwardRef(function(n,e){var r=n.children,o=n.hasError,t=n.placeholder;void 0===t&&(t="");var l=G(n,["children","hasError","placeholder"]);return i.createElement(a.Box,{ml:"-2px",mr:"-2px",p:"2px"},i.createElement(K,Object.assign({ref:e,hasValue:Boolean(l.value),hasError:o},l,{value:l.value||""}),t&&i.createElement("option",{value:"",disabled:!0},t),r),i.createElement(a.Box,{className:"__bg",bg:o?"error-alpha01":"primary-alpha01",position:"absolute",top:"0",bottom:"0",left:"0",right:"0",zIndex:0,borderRadius:"6px",opacity:0,transitionProperty:"opacity",transitionDuration:"fast",transitionTimingFunction:"ease"}),i.createElement(a.Box,{className:"__border",bg:"white",border:["1px solid",o?"error":"outline"],position:"absolute",top:"2px",bottom:"2px",left:"2px",right:"2px",zIndex:0,borderRadius:"4px",transitionProperty:"border-color",transitionDuration:"fast",transitionTimingFunction:"ease"}),i.createElement(a.Box,{position:"absolute",right:"0",top:"0",bottom:"0",height:"16px",my:"auto",pr:"sm",style:{pointerEvents:"none"}},i.createElement(a.Icon,{name:"ChevronDown",color:"secondary"})))});function J(n){var e=n.name,r=n.validate,o=n.onChange,t=n.onBlur,a=G(n,["name","validate","onChange","onBlur"]);return i.createElement(l.Field,{name:e,validate:r},function(n){var r=n.field,l=Boolean(s.get(n.form,["errors",e]));return i.createElement(X,Object.assign({},a,r,{hasError:l,onChange:function(n){r.onChange(n),o&&o(n)},onBlur:function(n){r.onBlur(n),t&&t(n)}}))})}var Q=t(a.Box)(function(n){return"\n border-left: 2px solid currentColor;\n padding-left: "+n.theme.space.sm+";\n "});function Z(n,e){var r={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&-1===e.indexOf(o)&&(r[o]=n[o]);return r}var $=t.textarea(function(n){var e=n.theme,r=n.hasError;return"\n appearance: none;\n border: none;\n display: block;\n position: relative;\n font-family: "+e.fonts.roboto+";\n color: "+e.colors.body+";\n font-size: "+e.fontSizes[1]+";\n line-height: "+e.lineHeights[0]+";\n letter-spacing: 0.6px;\n width: 100%;\n margin: 0;\n min-height: 48px;\n padding: "+e.space.sm+";\n background: transparent;\n color: "+(n.hasValue?e.colors.body:e.colors.secondary)+";\n cursor: pointer;\n z-index: 2;\n transition-property: border-color, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in-out;\n\n &::placeholder {\n color: "+e.colors.secondary+";\n line-height: "+e.lineHeights[0]+";\n opacity: 1;\n }\n &:-webkit-autofill {\n -webkit-text-fill-color: "+e.colors.body+";\n -webkit-box-shadow: 0 0 0px 1000px #fff inset;\n }\n &:disabled {\n background: transparent;\n color: "+e.colors.placeholder+";\n cursor: not-allowed;\n & ~ .__border {\n background: "+e.colors.background+";\n cursor: not-allowed;\n }\n }\n &:invalid,\n &:-moz-ui-invalid,\n &:not(:disabled):active,\n &:not(:disabled):focus,\n &:not(:disabled):hover {\n box-shadow: none;\n outline: 0;\n color: "+e.colors.body+";\n\n & ~ .__bg {\n opacity: 1;\n }\n & ~ .__border {\n border-color: "+(r?e.colors.error:e.colors.primary)+";\n\n div {\n border-color: "+(r?e.colors.error:e.colors.primary)+";\n color: "+(r?e.colors.error:e.colors.primary)+";\n }\n }\n }\n"});$.displayName="TextareaElement",$.defaultProps={rows:4};var nn=i.forwardRef(function(n,e){var r=n.hasError,o=Z(n,["hasError"]);return i.createElement(a.Box,{ml:"-2px",mr:"-2px",p:"2px"},i.createElement($,Object.assign({ref:e,hasError:r},o)),i.createElement(a.Box,{className:"__bg",bg:r?"error-alpha01":"primary-alpha01",position:"absolute",top:"0",bottom:"0",left:"0",right:"0",zIndex:0,borderRadius:"6px",opacity:0,transitionProperty:"opacity",transitionDuration:"fast",transitionTimingFunction:"ease"}),i.createElement(a.Box,{className:"__border",bg:"white",border:["1px solid",r?"error":"outline"],position:"absolute",top:"2px",bottom:"2px",left:"2px",right:"2px",zIndex:0,borderRadius:"4px",transitionProperty:"border-color",transitionDuration:"fast",transitionTimingFunction:"ease"}))});function en(n){var e=n.name,r=n.validate,o=n.onChange,t=n.onBlur,a=Z(n,["name","validate","onChange","onBlur"]);return i.createElement(l.Field,{name:e,validate:r},function(n){var r=n.field,l=Boolean(s.get(n.form,["errors",e]));return i.createElement(nn,Object.assign({},a,r,{hasError:l,onChange:function(n){r.onChange(n),o&&o(n)},onBlur:function(n){r.onBlur(n),t&&t(n)}}))})}var rn=Object.freeze(["\n ","\n"]),on="\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n position: absolute;\n whitespace: nowrap;\n wordwrap: normal;\n",tn=t.div(function(n){var e=n.theme;return"\n display: block;\n position: absolute;\n top: 3px;\n bottom: 0;\n left: 3px;\n width: 24px;\n height: 24px;\n border-radius: 100px;\n border: 1px solid "+e.colors.outline+";\n color: white;\n background: white;\n stroke: white;\n transition-property: transform, background, border-color;\n transition-duration: "+e.transitionDurations.fast+";\n transition-timing-function: "+e.transitionTimingFunctions.natural+";\n"}),an=t.div(function(n){var e=n.theme;return"\n position: relative;\n width: 56px;\n height: 32px;\n border-radius: 100px;\n border: 1px solid "+e.colors.outline+";\n background: "+e.colors.background+";\n cursor: pointer;\n transition-property: background, border-color;\n transition-duration: "+e.transitionDurations.fast+";\n transition-timing-function: "+e.transitionTimingFunctions.natural+";\n "}),ln=t.label(function(n){return"\n display: flex;\n align-items: center;\n margin-bottom: 0 !important;\n\n &:hover "+an+" {\n "+tn+" {\n border-color: "+n.theme.colors.primaryDark+";\n }\n }\n "}),sn=t.input(function(n){var e=n.theme;return"\n "+on+"\n\n &:focus ~ "+an+" {\n border-color: "+e.colors.primary+";\n }\n &:checked ~ "+an+" {\n border-color: "+e.colors.primary+";\n\n "+tn+" {\n background: "+e.colors.primary+";\n border-color: "+e.colors.primaryDark+";\n transform: translateX(24px);\n }\n }\n &:disabled ~ "+an+" {\n pointer-events: none;\n "+tn+" {\n border-color: "+e.colors.outline+";\n }\n }\n "}),cn=t.span(rn,on);function dn(n){var e=n.label,r=n.name,o=n.checked,t=function(n,e){var r={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&-1===e.indexOf(o)&&(r[o]=n[o]);return r}(n,["label","name","checked"]);return i.createElement(ln,{htmlFor:r},i.createElement(sn,Object.assign({id:r,name:r,type:"checkbox",checked:o},t)),i.createElement(an,null,i.createElement(tn,null,i.createElement(a.Icon,{name:"Check",width:"12px",height:"12px",position:"absolute",top:"0",bottom:"0",left:"0",right:"0",m:"auto",style:{strokeWidth:"2px"}}))),i.createElement(cn,null,e))}function pn(n){var e=n.value;void 0===e&&(e="");var r=n.masker;void 0===r&&(r="*");var o=n.separator;void 0===o&&(o="-");var t=new RegExp("[^0-9"+o+"]").test(e)?"":c.clean(e,r),a=c.format(c.mask(t,r),o),l=i.useState(t),s=l[0],d=l[1],p=i.useState(a),u=p[0],m=p[1],b=i.useCallback(function(n){n.persist();var e=n.target.value,t=e.slice(-1);if(!(new RegExp("[^0-9"+o+r+"]").test(t)||e.length>11)){var a=c.clean(e,r),i=c.clean(s),l=a.length<i.length?i.slice(0,a.length):new RegExp("["+o+r+"]").test(t)?i:i+a.slice(-1);d(l),m(c.format(c.mask(l,r),o))}},[s,d,u,m]),h=i.useCallback(function(n){n.persist();var e=n.target.value.length;n.target.setSelectionRange(e,e)},[]);return i.useEffect(function(){n.onUpdate&&n.onUpdate(s)},[s]),i.createElement(P,Object.assign({},n,{value:u,onChange:b,onFocus:h,onKeyUp:h,onKeyDown:h,onClick:h}))}function un(n){var e=n.name,r=n.validate,o=function(n,e){var r={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&-1===e.indexOf(o)&&(r[o]=n[o]);return r}(n,["name","validate"]);return i.createElement(l.Field,{name:e,validate:r},function(n){var r=n.field,t=n.form,a=Boolean(s.get(t,["errors",e]));return i.createElement(pn,Object.assign({},o,r,{hasError:a,onUpdate:function(n){t.setFieldValue(e,n)}}))})}exports.CheckboxGroup=g,exports.Checkbox=x,exports.CheckboxField=function(n){var e=n.name,r=n.validate,o=n.onChange,t=n.onBlur,a=d(n,["name","validate","onChange","onBlur"]);return i.createElement(l.Field,{name:e,validate:r},function(n){var r=n.field,l=Boolean(s.get(n.form,["errors",e]));return i.createElement(x,Object.assign({},a,r,{checked:Boolean(r.value),hasError:l,onChange:function(n){r.onChange(n),o&&o(n)},onBlur:function(n){r.onBlur(n),t&&t(n)}}))})},exports.DateInput=B,exports.DateInputField=F,exports.DateInputFieldWithLabel=function(n){return i.createElement(i.Fragment,null,i.createElement(E,{htmlFor:n.name},n.label),i.createElement(F,Object.assign({},n)))},exports.Item=D,exports.Body=z,exports.Control=S,exports.Dropdown=C,exports.DropdownField=I,exports.DropdownFieldWithLabel=function(n){return i.createElement(i.Fragment,null,i.createElement(E,{htmlFor:n.name},n.label),i.createElement(I,Object.assign({},n)))},exports.ErrorMessage=function(n){return i.createElement(l.ErrorMessage,{name:n.name,render:function(n){return i.createElement(a.Span,{color:"error",fontSize:0},n)}})},exports.Input=P,exports.InputField=N,exports.InputFieldWithLabel=function(n){return i.createElement(i.Fragment,null,i.createElement(E,{htmlFor:n.name},n.label),i.createElement(N,Object.assign({},n)))},exports.Label=E,exports.Radio=function(n){var e=n.name,r=n.checked,o=n.description,t=n.label,l=H(n,["children","name","checked","description","label"]),s=e+l.value;return i.createElement(Y,{htmlFor:s},i.createElement(M,Object.assign({id:s,name:e,type:"radio",checked:r},l)),i.createElement(q,{checked:r}),i.createElement(a.Box,{display:"block",position:"relative",zIndex:1,width:"calc(100% - 16px)"},t&&i.createElement(W,null,t),o&&i.createElement(a.P,{color:"secondary",fontSize:0,fontWeight:4,lineHeight:0},o)),i.createElement(U,null))},exports.RadioField=A,exports.RadioFieldWithLabel=function(n){var e=n.label,r=H(n,["label"]);return i.createElement(i.Fragment,null,i.createElement(E,{htmlFor:r.name},e),i.createElement(A,Object.assign({},r)))},exports.Select=X,exports.SelectField=J,exports.SelectFieldWithLabel=function(n){return i.createElement(i.Fragment,null,i.createElement(E,{htmlFor:n.name},n.label),i.createElement(J,Object.assign({},n)))},exports.SubGroup=Q,exports.Textarea=nn,exports.TextareaField=en,exports.TextareaFieldWithLabel=function(n){return i.createElement(i.Fragment,null,i.createElement(E,{htmlFor:n.name},n.label),i.createElement(en,Object.assign({},n)))},exports.hidden=on,exports.Toggle=dn,exports.ToggleField=function(n){var e=n.label;return i.createElement(l.Field,{name:n.name,validate:n.validate},function(n){var r=n.field;return i.createElement(dn,Object.assign({label:e},r,{checked:Boolean(r.value)}))})},exports.SSNInput=pn,exports.SSNInputField=un,exports.SSNInputFieldWithLabel=function(n){return i.createElement(i.Fragment,null,i.createElement(E,{htmlFor:n.name},n.label),i.createElement(un,Object.assign({},n)))}; | ||
var n,e=require("styled-system"),r=require("use-drop"),o=require("styled-components"),t=(n=o)&&"object"==typeof n&&"default"in n?n.default:n,a=require("@truework/ui"),i=require("react"),l=require("formik"),s=require("lodash"),c=require("parse-ssn");function d(n,e){var r={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&-1===e.indexOf(o)&&(r[o]=n[o]);return r}var p=Object.freeze([""]),u=t(a.Icon)(p),m=t.div(function(n){var e=n.theme;return"\n position: relative;\n width: 16px;\n height: 16px;\n border-radius: 2px;\n margin-top: 2px;\n margin-right: 8px;\n border: 1px solid "+(n.checked?e.colors.primaryDark:e.colors.outline)+";\n transition-property: background, border-color;\n transition-duration: "+e.transitionDurations.fast+";\n transition-timing-function: "+e.transitionTimingFunctions.ease+";\n\n "+u+" {\n display: block;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: auto;\n width: 12px;\n height: 12px;\n color: white;\n stroke: white;\n stroke-width: 2px;\n transition-property: transform;\n transition-duration: "+e.transitionDurations.fast+";\n transition-timing-function: "+e.transitionTimingFunctions.ease+";\n transform: scale(0);\n }\n "}),b=t(a.H5)(function(n){var e=n.theme;return"\n width: calc(100% - 16px);\n transition-property: color;\n transition-duration: "+e.transitionDurations.fast+";\n transition-timing-function: "+e.transitionTimingFunctions.ease+";\n "}),h=t.input(function(n){var e=n.theme;return"\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n position: absolute;\n whitespace: nowrap;\n wordwrap: normal;\n\n &:focus ~ "+m+" {\n border-color: "+e.colors.primaryDark+";\n }\n &:checked ~ "+m+" {\n background: "+e.colors.primary+";\n border-color: "+e.colors.primaryDark+";\n\n "+u+" {\n transform: scale(1);\n }\n }\n &:focus ~ "+b+", &:focus ~"+a.Span+", &:checked ~ "+a.Span+" {\n color: "+e.colors.primary+";\n }\n\n "+(n.hasError?"\n & ~ "+m+" {\n border-color: "+e.colors.error+" !important;\n }\n ":"")+"\n "}),f=t.label(function(n){var e=n.theme;return"\n display: flex;\n align-items: flex-start;\n width: 100%;\n margin-bottom: 0 !important;\n\n "+(n.disabled?"\n "+m+" {\n background: "+e.colors.background+";\n }\n "+a.Span+" {\n color: "+e.colors.placeholder+";\n }\n ":"\n &:hover "+m+" {\n border-color: "+e.colors.primaryDark+";\n }\n &:hover "+b+", &:hover "+a.Span+" {\n color: "+e.colors.primary+";\n }\n ")+"\n "}),g=t.div(function(n){var e=n.theme;return"\n width: 100%;\n\n "+f+" {\n padding: "+e.space.sm+";\n border: 1px solid "+e.colors.outline+";\n border-top: none;\n display: flex;\n align-items: center;\n }\n\n "+f+":first-child {\n border-top: 1px solid "+e.colors.outline+";\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n }\n\n "+f+":last-child {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n }\n "});function x(n){var e=n.children,r=n.name,o=n.checked,t=n.disabled,l=d(n,["children","name","checked","disabled"]);return i.createElement(f,{htmlFor:r,disabled:t},i.createElement(h,Object.assign({id:r,name:r,type:"checkbox",checked:o,disabled:t},l)),i.createElement(m,{checked:o},i.createElement(u,{name:"Check"})),i.createElement(a.Span,{display:"block",width:"calc(100% - 16px)",fontSize:1,lineHeight:1,fontWeight:5,style:{transitionProperty:"color",transitionDuration:"150ms",transitionTimingFunction:"ease-in-out"}},e))}function v(n){return n<10?"0"+n:""+n}var y=Object.freeze(["\n display: block;\n position: relative;\n font-weight: 500;\n letter-spacing: 0.6px;\n ","\n ","\n ","\n"]),E=t.label(y,e.typography,e.color,e.space);E.displayName="Label",E.defaultProps={fontSize:1,lineHeight:1,mb:"xs"};var w=Object.freeze(["\n appearance: none;\n border: none;\n display: block;\n position: relative;\n font-family: ",";\n color: ",";\n font-size: ",";\n line-height: ",";\n letter-spacing: 0.6px;\n margin: 0;\n min-height: 48px;\n padding: ",";\n background: transparent;\n color: ",";\n cursor: pointer;\n z-index: 2;\n transition-property: border-color, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in-out;\n\n &::-ms-expand {\n display: none;\n }\n &:disabled {\n background: transparent;\n color: ",";\n cursor: not-allowed;\n & ~ .__border {\n background: ",";\n cursor: not-allowed;\n }\n }\n &:not(:disabled):active,\n &:not(:disabled):focus,\n &:not(:disabled):hover {\n outline: 0;\n color: ",";\n\n & ~ .__bg {\n opacity: 1;\n }\n & ~ .__border {\n border-color: ",";\n\n div {\n border-color: ",";\n color: ",";\n }\n }\n }\n "]),k=t.select(function(n){var e=n.theme,r=n.hasError;return o.css(w,e.fonts.roboto,e.colors.body,e.fontSizes[1],e.lineHeights[0],e.space.sm,n.hasValue?e.colors.body:e.colors.secondary,function(n){return n.theme.colors.placeholder},e.colors.background,e.colors.body,r?e.colors.error:e.colors.primary,r?e.colors.error:e.colors.primary,r?e.colors.error:e.colors.primary)});function B(n){var e=n.name,r=n.label;void 0===r&&(r="Date");var o=n.disabled,t=n.initialMonth;void 0===t&&(t=0);var l=n.initialDay;void 0===l&&(l=0);var c=n.initialYear;void 0===c&&(c=0);var d=n.minMonth;void 0===d&&(d=1);var p=n.minDay;void 0===p&&(p=1);var u=n.minYear;void 0===u&&(u=1980);var m=n.maxMonth;void 0===m&&(m=12);var b=n.maxDay;void 0===b&&(b=31);var h=n.maxYear;void 0===h&&(h=2030);var f=n.hasError,g=n.onUpdate,x=i.useRef(null),y=i.useRef(null),E=i.useRef(null),w=i.useState(t),B=w[0],F=w[1],O=i.useState(l),_=O[0],D=O[1],z=i.useState(c),j=z[0],S=z[1],C=function(n){return new Date(n.year,n.month,0).getUTCDate()}({year:j||2020,month:B});return i.useEffect(function(){j&&B&&_&&g(j+"-"+v(B)+"-"+v(_))},[B,_,j]),i.createElement(a.Box,{ml:"-4px",mr:"-4px",p:"4px"},i.createElement(a.Box,{display:"flex",alignItems:"center",height:"48px",pl:"56px"},i.createElement(k,{ref:x,name:e+"-month",value:B,disabled:o,onChange:function(n){F(parseInt(n.target.value,10)),y.current&&y.current.focus()},"aria-label":r+": Month",hasValue:Boolean(B),hasError:f},i.createElement("option",{value:"0",disabled:!0,selected:!0},"mm"),s.times(m-d+1,function(){return""}).map(function(n,e){var r=d+e;return i.createElement("option",{key:r,value:r},v(r))})),i.createElement(a.Box,{height:"50%",width:"1px",bg:f?"error":"outline",zIndex:2,transform:"rotate(10deg)"}),i.createElement(k,{ref:y,name:e+"-day",value:_,disabled:o,onChange:function(n){D(parseInt(n.target.value,10)),E.current&&E.current.focus()},"aria-label":r+": Day",hasValue:Boolean(_),hasError:f},i.createElement("option",{value:"0",disabled:!0,selected:!0},"dd"),s.times(Math.min(b,C)-p+1,function(){return""}).map(function(n,e){var r=p+e;return i.createElement("option",{key:r,value:r},v(r))})),i.createElement(a.Box,{height:"50%",width:"1px",bg:f?"error":"outline",zIndex:2,transform:"rotate(10deg)"}),i.createElement(k,{ref:E,name:e+"-year",value:j,disabled:o,onChange:function(n){S(parseInt(n.target.value,10))},"aria-label":r+": Year",hasValue:Boolean(j),hasError:f},i.createElement("option",{value:"0",disabled:!0,selected:!0},"yyyy"),s.times(h-u+1,function(n){return u+n}).map(function(n){return i.createElement("option",{key:n,value:n},n)})),i.createElement(a.Box,{className:"__bg",bg:f?"error-alpha01":"primary-alpha01",position:"absolute",top:"-4px",bottom:"-4px",left:"-4px",right:"-4px",zIndex:0,borderRadius:"6px",opacity:0,transitionProperty:"opacity",transitionDuration:"fast",transitionTimingFunction:"ease"}),i.createElement(a.Box,{className:"__border",bg:"white",border:["1px solid",f?"error":"outline"],position:"absolute",top:"0",bottom:"0",left:"0",right:"0",zIndex:0,borderRadius:"4px",transitionProperty:"border-color",transitionDuration:"fast",transitionTimingFunction:"ease"},i.createElement(a.Box,{"aria-hidden":"true",position:"absolute",top:"0",left:"0",display:"flex",alignItems:"center",justifyContent:"center",px:"sm",height:"100%",zIndex:0,color:f?"error":"secondary",bg:f?"#FDEBF0":"background",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px",borderRight:["1px solid",f?"error":"outline"],transitionProperty:"border-color, color",transitionDuration:"fast",transitionTimingFunction:"ease"},i.createElement(a.Icon,{name:"Calendar"})))))}function F(n){var e=n.name,r=n.validate,o=function(n,e){var r={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&-1===e.indexOf(o)&&(r[o]=n[o]);return r}(n,["name","validate"]);return i.createElement(l.Field,{name:e,validate:r},function(n){var r=n.field,t=n.form,a=Boolean(s.get(t,["errors",e])),l=(r.value||"").split("-"),c=l[0];void 0===c&&(c="");var d=l[1];void 0===d&&(d="");var p=l[2];return void 0===p&&(p=""),i.createElement(B,Object.assign({name:e},o,{initialMonth:d?parseInt(d,10):void 0,initialDay:p?parseInt(p,10):void 0,initialYear:c?parseInt(c,10):void 0,hasError:a,onUpdate:function(n){t.setFieldValue(e,n)}}))})}function O(n,e){var r={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&-1===e.indexOf(o)&&(r[o]=n[o]);return r}var _=t(a.Box)(function(n){var e=n.theme,r=n.selected,o=n.highlighted;return"\n display: flex;\n align-items: center;\n padding: "+e.space.sm+";\n color: "+(r||o?e.colors.body:e.colors.secondary)+";\n background-color: "+(r||o?e.colors.background:"white")+";\n cursor: pointer;\n font-size: "+e.fontSizes[1]+";\n font-weight: 400;\n line-height: "+e.lineHeights[1]+";\n letter-spacing: 0.6px;\n\n &:hover {\n background: "+e.colors.background+";\n }\n"});function D(n){var e=n.children,r=O(n,["children"]);return i.createElement(_,Object.assign({as:"li"},r),e)}var z=i.forwardRef(function(n,e){var r=n.children,o=O(n,["children"]);return i.createElement(a.Box,Object.assign({ref:e,as:"ul",boxShadow:"medium",borderRadius:2,overflow:"auto",width:"100%",bg:"white"},o),r)});z.displayName="Body";var j=t.button(function(n){var e=n.theme,r=n.hasError;return"\n display: block;\n position: relative;\n width: 100%;\n z-index: 1;\n height: 48px;\n padding: 0 16px;\n text-align: left;\n font-size: "+e.fontSizes[1]+";\n font-weight: 400;\n line-height: "+e.lineHeights[1]+";\n color: "+e.colors.secondary+";\n transition-property: color;\n transition-duration: "+e.transitionDurations.fast+";\n transition-timing-function: "+e.transitionTimingFunctions.ease+";\n\n "+(n.disabled?"\n background: transparent;\n color: "+e.colors.placeholder+";\n cursor: not-allowed;\n & ~ .__border {\n background: "+e.colors.background+";\n cursor: not-allowed;\n }\n ":"\n &:active,\n &:focus,\n &:hover {\n outline: 0;\n color: "+e.colors.body+";\n\n & ~ .__bg {\n opacity: 1;\n }\n & ~ .__border {\n border-color: "+(r?e.colors.error:e.colors.primary)+";\n\n div {\n border-color: "+(r?e.colors.error:e.colors.primary)+";\n color: "+(r?e.colors.error:e.colors.primary)+";\n }\n }\n }\n ")+"\n\n "+(n.isActive?"\n outline: 0;\n color: "+e.colors.body+";\n\n & ~ .__bg {\n opacity: 1;\n }\n & ~ .__border {\n border-color: "+(r?e.colors.error:e.colors.primary)+";\n\n div {\n border-color: "+(r?e.colors.error:e.colors.primary)+";\n color: "+(r?e.colors.error:e.colors.primary)+";\n }\n }\n ":"")+"\n"});j.displayName="ControlOuter";var S=i.forwardRef(function(n,e){var r=n.children,o=n.isActive,t=n.hasError,l=O(n,["children","isActive","hasError"]);return i.createElement("div",{style:{position:"relative"}},i.createElement(j,Object.assign({ref:e,isActive:o,hasError:t,type:"button"},l),i.createElement(a.Span,{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"},i.createElement(a.Span,{width:"100%",fontWeight:4,style:{whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",letterSpacing:"0.6px"}},r),i.createElement(a.Icon,{name:"ChevronDown",ml:"xs"}))),i.createElement(a.Box,{className:"__bg",bg:t?"error-alpha01":"primary-alpha01",position:"absolute",top:"-2px",bottom:"-2px",left:"-2px",right:"-2px",zIndex:0,borderRadius:"6px",opacity:0,transitionProperty:"opacity",transitionDuration:"fast",transitionTimingFunction:"ease"}),i.createElement(a.Box,{className:"__border",bg:"white",border:["1px solid",t?"error":"outline"],position:"absolute",top:"0",bottom:"0",left:"0",right:"0",zIndex:0,borderRadius:"4px",transitionProperty:"border-color",transitionDuration:"fast",transitionTimingFunction:"ease"}))});function C(n){var e=n.value,o=n.placeholder,t=n.label,l=n.items,c=n.hasError,d=n.disabled,p=n.onSelect,u=n.onRemove,m=i.useState(s.get(l.filter(function(n){return n.value===e})[0],"label")||o||"Please select"),b=m[0],h=m[1],f=r.useSelect({items:l.map(function(n){return Object.assign({},n,{selected:n.value===e})}),onSelect:function(n){h(n.label),p&&p(n)},onRemove:function(n){h("Please select"),u&&u(n)}}),g=f.items,x=f.isOpen,v=f.getDropProps;return i.createElement(a.Box,null,i.createElement(S,Object.assign({id:f.id},d?{}:(0,f.getControlProps)(),{"aria-label":t,isActive:x,hasError:c,disabled:d}),b),x&&i.createElement(a.Box,{position:"absolute",bottom:"0",width:"100%",transform:"translateY(100%) translateY(6px)",zIndex:1e3},i.createElement(z,Object.assign({},v(),{style:{maxHeight:"240px",overflow:"auto"}}),g.map(function(n){return i.createElement(D,Object.assign({key:n.value,selected:n.selected,highlighted:n.highlighted},n.getItemProps()),n.label)}))))}function I(n){var e=n.name,r=n.validate,o=O(n,["name","validate"]);return i.createElement(l.Field,{name:e,validate:r},function(n){var e=n.field,r=n.form,t=Boolean(r.errors&&r.errors[e.name]);return i.createElement(C,Object.assign({},o,{hasError:t,onSelect:function(n){r.setFieldValue(e.name,n.value),o.onSelect&&o.onSelect(n)}}))})}function R(n,e){var r={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&-1===e.indexOf(o)&&(r[o]=n[o]);return r}S.displayName="Control";var T=t.input(function(n){var e=n.theme,r=n.small,o=n.hasError;return"\n appearance: none;\n border: none;\n display: block;\n position: relative;\n font-family: "+e.fonts.roboto+";\n color: "+e.colors.body+";\n font-size: "+(r?e.fontSizes[0]:e.fontSizes[1])+";\n line-height: "+e.lineHeights[0]+";\n letter-spacing: 0.6px;\n width: 100%;\n margin: 0;\n min-height: "+(r?"36px":"48px")+";\n padding: "+(r?"10px":e.space.sm)+";\n background: transparent;\n color: "+(n.hasValue?e.colors.body:e.colors.secondary)+";\n cursor: pointer;\n z-index: 2;\n transition-property: border-color, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in-out;\n\n &::placeholder {\n color: "+e.colors.secondary+";\n line-height: "+e.lineHeights[0]+";\n opacity: 1;\n }\n &:-webkit-autofill {\n -webkit-text-fill-color: "+e.colors.body+";\n -webkit-box-shadow: 0 0 0px 1000px #fff inset;\n }\n &:disabled {\n background: transparent;\n color: "+e.colors.placeholder+";\n cursor: not-allowed;\n & ~ .__border {\n background: "+e.colors.background+";\n cursor: not-allowed;\n }\n }\n &:invalid,\n &:not(:disabled):active,\n &:not(:disabled):focus,\n &:not(:disabled):hover {\n box-shadow: none;\n outline: 0;\n color: "+e.colors.body+";\n\n & ~ .__bg {\n opacity: 1;\n }\n & ~ .__border {\n border-color: "+(o?e.colors.error:e.colors.primary)+";\n }\n & ~ .__tab {\n border-color: "+(o?e.colors.error:e.colors.primary)+";\n color: "+(o?e.colors.error:e.colors.primary)+";\n }\n }\n "+(r?"\n & ~ .__tab {\n padding: 10px;\n }\n ":"")+"\n"});T.displayName="InputElement";var P=i.forwardRef(function(n,e){var r=n.hasError,o=n.preTab,t=n.postTab,l=R(n,["hasError","preTab","postTab"]),s=Boolean(o),c=o||t;return i.createElement(a.Box,{display:"flex",ml:"-2px",mr:"-2px",p:"2px"},i.createElement(T,Object.assign({ref:e,hasError:r},l)),c&&i.createElement(a.Box,{className:"__tab","aria-hidden":"true",display:"flex",alignItems:"center",justifyContent:"center",px:"sm",zIndex:1,color:r?"error":"secondary",bg:r?"#FDEBF0":"background",borderTopLeftRadius:s?"4px":"0",borderBottomLeftRadius:s?"4px":"0",borderTopRightRadius:s?"0":"4px",borderBottomRightRadius:s?"0":"4px",border:["1px solid",r?"error":"outline"],order:s?-1:1,transitionProperty:"border-color, color",transitionDuration:"fast",transitionTimingFunction:"ease"},c),i.createElement(a.Box,{className:"__bg",bg:r?"error-alpha01":"primary-alpha01",position:"absolute",top:"0",bottom:"0",left:"0",right:"0",zIndex:0,borderRadius:"6px",opacity:0,transitionProperty:"opacity",transitionDuration:"fast",transitionTimingFunction:"ease"}),i.createElement(a.Box,{className:"__border",bg:"white",border:["1px solid",r?"error":"outline"],position:"absolute",top:"2px",bottom:"2px",left:"2px",right:"2px",zIndex:0,borderRadius:"4px",transitionProperty:"border-color",transitionDuration:"fast",transitionTimingFunction:"ease"}))});function N(n){var e=n.name,r=n.validate,o=n.onChange,t=n.onBlur,a=R(n,["name","validate","onChange","onBlur"]);return i.createElement(l.Field,{name:e,validate:r},function(n){var r=n.field,l=Boolean(s.get(n.form,["errors",e]));return i.createElement(P,Object.assign({},a,r,{hasError:l,onChange:function(n){r.onChange(n),o&&o(n)},onBlur:function(n){r.onBlur(n),t&&t(n)}}))})}function H(n,e){var r={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&-1===e.indexOf(o)&&(r[o]=n[o]);return r}var L=Object.freeze(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n cursor: pointer;\n z-index: 0;\n"]),W=t.span(function(n){var e=n.theme;return"\n font-size: "+e.fontSizes[1]+";\n font-weight: "+e.fontWeights[5]+";\n line-height: "+e.lineHeights[0]+";\n transition-property: color;\n transition-duration: "+e.transitionDurations.fast+";\n transition-timing-function: "+e.transitionTimingFunctions.ease+";\n "}),V=t.div(function(n){var e=n.theme;return"\n width: 100%;\n border: 1px solid "+e.colors.outline+";\n border-radius: 4px;\n\n "+Y+" {\n padding: "+e.space.sm+";\n border-top: 1px solid "+e.colors.outline+";\n\n &:first-of-type {\n border-top: 0;\n }\n }\n\n "+(n.hasError?"\n border-color: "+e.colors.error+" !important;\n\n & "+Y+" {\n border-color: "+e.colors.error+" !important;\n }\n ":"")+"\n "}),q=t.div(function(n){var e=n.theme;return"\n position: relative;\n width: 16px;\n height: 16px;\n border-radius: 100%;\n margin-top: 2px;\n margin-right: 8px;\n border: 1px solid "+(n.checked?e.colors.primaryDark:e.colors.outline)+";\n z-index: 1;\n transition-property: background, border-color;\n transition-duration: "+e.transitionDurations.fast+";\n transition-timing-function: "+e.transitionTimingFunctions.ease+";\n\n &::after {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: auto;\n width: 8px;\n height: 8px;\n border-radius: 100%;\n background: white;\n transition-property: transform;\n transition-duration: "+e.transitionDurations.fast+";\n transition-timing-function: "+e.transitionTimingFunctions.ease+";\n transform: scale(0);\n }\n "}),M=t.input(function(n){var e=n.theme;return"\n position: relative;\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n position: absolute;\n whitespace: nowrap;\n wordwrap: normal;\n z-index: 1;\n\n &:focus ~ "+q+" {\n border-color: "+e.colors.primaryDark+";\n }\n &:focus ~ "+a.Box+" "+W+" {\n color: "+e.colors.primary+";\n }\n\n &:checked ~ "+q+" {\n background: "+e.colors.primary+";\n border-color: "+e.colors.primaryDark+";\n\n &::after {\n transform: scale(1);\n }\n }\n &:checked ~ "+a.Box+" "+W+" {\n color: "+e.colors.primary+";\n }\n\n &:disabled ~ "+q+" {\n border-color: "+e.colors.outline+" !important;\n }\n &:disabled ~ "+U+" {\n background-color: "+e.colors.background+";\n }\n &:disabled ~ "+a.Box+" "+W+" {\n color: "+e.colors.secondary+" !important;\n }\n "}),U=t.span(L),Y=t.label(function(n){var e=n.theme;return"\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n margin-bottom: 0 !important;\n cursor: pointer;\n overflow: hidden;\n\n &:hover "+q+" {\n border-color: "+e.colors.primaryDark+";\n }\n &:hover "+W+" {\n color: "+e.colors.primary+";\n }\n "});function A(n){var e=n.children,r=n.name,o=n.validate,t=n.onChange,a=n.onBlur,c=H(n,["children","name","validate","onChange","onBlur"]);return i.createElement(l.Field,{name:r,validate:o},function(n){var o=n.field,l=Boolean(s.get(n.form,["errors",r]));return i.createElement(V,{hasError:l},i.Children.toArray(e).map(function(n){return i.cloneElement(n,Object.assign({},o,c,{value:n.props.value,hasError:l,checked:Boolean(o.value===n.props.value),onChange:function(n){o.onChange(n),t&&t(n)},onBlur:function(n){o.onBlur(n),a&&a(n)}}))}))})}function G(n,e){var r={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&-1===e.indexOf(o)&&(r[o]=n[o]);return r}var K=t.select(function(n){var e=n.theme,r=n.hasError;return"\n appearance: none;\n border: none;\n display: block;\n position: relative;\n font-family: "+e.fonts.roboto+";\n color: "+e.colors.body+";\n font-size: "+e.fontSizes[1]+";\n line-height: "+e.lineHeights[0]+";\n letter-spacing: 0.6px;\n width: 100%;\n margin: 0;\n min-height: 48px;\n padding: "+e.space.sm+";\n background: transparent;\n color: "+(n.hasValue?e.colors.body:e.colors.secondary)+";\n cursor: pointer;\n z-index: 2;\n transition-property: border-color, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in-out;\n\n &::placeholder {\n color: "+e.colors.secondary+";\n line-height: "+e.lineHeights[0]+";\n opacity: 1;\n }\n &:-webkit-autofill {\n -webkit-text-fill-color: "+e.colors.body+";\n -webkit-box-shadow: 0 0 0px 1000px #fff inset;\n }\n &:disabled {\n background: transparent;\n color: "+e.colors.placeholder+";\n cursor: not-allowed;\n & ~ .__border {\n background: "+e.colors.background+";\n cursor: not-allowed;\n }\n }\n &:invalid,\n &:-moz-ui-invalid,\n &:not(:disabled):active,\n &:not(:disabled):focus,\n &:not(:disabled):hover {\n box-shadow: none;\n outline: 0;\n color: "+e.colors.body+";\n\n & ~ .__bg {\n opacity: 1;\n }\n & ~ .__border {\n border-color: "+(r?e.colors.error:e.colors.primary)+";\n\n div {\n border-color: "+(r?e.colors.error:e.colors.primary)+";\n color: "+(r?e.colors.error:e.colors.primary)+";\n }\n }\n }\n"});K.displayName="SelectElement";var X=i.forwardRef(function(n,e){var r=n.children,o=n.hasError,t=n.placeholder;void 0===t&&(t="");var l=G(n,["children","hasError","placeholder"]);return i.createElement(a.Box,{ml:"-2px",mr:"-2px",p:"2px"},i.createElement(K,Object.assign({ref:e,hasValue:Boolean(l.value),hasError:o},l,{value:l.value||""}),t&&i.createElement("option",{value:"",disabled:!0},t),r),i.createElement(a.Box,{className:"__bg",bg:o?"error-alpha01":"primary-alpha01",position:"absolute",top:"0",bottom:"0",left:"0",right:"0",zIndex:0,borderRadius:"6px",opacity:0,transitionProperty:"opacity",transitionDuration:"fast",transitionTimingFunction:"ease"}),i.createElement(a.Box,{className:"__border",bg:"white",border:["1px solid",o?"error":"outline"],position:"absolute",top:"2px",bottom:"2px",left:"2px",right:"2px",zIndex:0,borderRadius:"4px",transitionProperty:"border-color",transitionDuration:"fast",transitionTimingFunction:"ease"}),i.createElement(a.Box,{position:"absolute",right:"0",top:"0",bottom:"0",height:"16px",my:"auto",pr:"sm",style:{pointerEvents:"none"}},i.createElement(a.Icon,{name:"ChevronDown",color:"secondary"})))});function J(n){var e=n.name,r=n.validate,o=n.onChange,t=n.onBlur,a=G(n,["name","validate","onChange","onBlur"]);return i.createElement(l.Field,{name:e,validate:r},function(n){var r=n.field,l=Boolean(s.get(n.form,["errors",e]));return i.createElement(X,Object.assign({},a,r,{hasError:l,onChange:function(n){r.onChange(n),o&&o(n)},onBlur:function(n){r.onBlur(n),t&&t(n)}}))})}var Q=t(a.Box)(function(n){return"\n border-left: 2px solid currentColor;\n padding-left: "+n.theme.space.sm+";\n "});function Z(n,e){var r={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&-1===e.indexOf(o)&&(r[o]=n[o]);return r}var $=t.textarea(function(n){var e=n.theme,r=n.hasError;return"\n appearance: none;\n border: none;\n display: block;\n position: relative;\n font-family: "+e.fonts.roboto+";\n color: "+e.colors.body+";\n font-size: "+e.fontSizes[1]+";\n line-height: "+e.lineHeights[0]+";\n letter-spacing: 0.6px;\n width: 100%;\n margin: 0;\n min-height: 48px;\n padding: "+e.space.sm+";\n background: transparent;\n color: "+(n.hasValue?e.colors.body:e.colors.secondary)+";\n cursor: pointer;\n z-index: 2;\n transition-property: border-color, color;\n transition-duration: 150ms;\n transition-timing-function: ease-in-out;\n\n &::placeholder {\n color: "+e.colors.secondary+";\n line-height: "+e.lineHeights[0]+";\n opacity: 1;\n }\n &:-webkit-autofill {\n -webkit-text-fill-color: "+e.colors.body+";\n -webkit-box-shadow: 0 0 0px 1000px #fff inset;\n }\n &:disabled {\n background: transparent;\n color: "+e.colors.placeholder+";\n cursor: not-allowed;\n & ~ .__border {\n background: "+e.colors.background+";\n cursor: not-allowed;\n }\n }\n &:invalid,\n &:-moz-ui-invalid,\n &:not(:disabled):active,\n &:not(:disabled):focus,\n &:not(:disabled):hover {\n box-shadow: none;\n outline: 0;\n color: "+e.colors.body+";\n\n & ~ .__bg {\n opacity: 1;\n }\n & ~ .__border {\n border-color: "+(r?e.colors.error:e.colors.primary)+";\n\n div {\n border-color: "+(r?e.colors.error:e.colors.primary)+";\n color: "+(r?e.colors.error:e.colors.primary)+";\n }\n }\n }\n"});$.displayName="TextareaElement",$.defaultProps={rows:4};var nn=i.forwardRef(function(n,e){var r=n.hasError,o=Z(n,["hasError"]);return i.createElement(a.Box,{ml:"-2px",mr:"-2px",p:"2px"},i.createElement($,Object.assign({ref:e,hasError:r},o)),i.createElement(a.Box,{className:"__bg",bg:r?"error-alpha01":"primary-alpha01",position:"absolute",top:"0",bottom:"0",left:"0",right:"0",zIndex:0,borderRadius:"6px",opacity:0,transitionProperty:"opacity",transitionDuration:"fast",transitionTimingFunction:"ease"}),i.createElement(a.Box,{className:"__border",bg:"white",border:["1px solid",r?"error":"outline"],position:"absolute",top:"2px",bottom:"2px",left:"2px",right:"2px",zIndex:0,borderRadius:"4px",transitionProperty:"border-color",transitionDuration:"fast",transitionTimingFunction:"ease"}))});function en(n){var e=n.name,r=n.validate,o=n.onChange,t=n.onBlur,a=Z(n,["name","validate","onChange","onBlur"]);return i.createElement(l.Field,{name:e,validate:r},function(n){var r=n.field,l=Boolean(s.get(n.form,["errors",e]));return i.createElement(nn,Object.assign({},a,r,{hasError:l,onChange:function(n){r.onChange(n),o&&o(n)},onBlur:function(n){r.onBlur(n),t&&t(n)}}))})}var rn=Object.freeze(["\n ","\n"]),on="\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n position: absolute;\n whitespace: nowrap;\n wordwrap: normal;\n",tn=t.div(function(n){var e=n.theme;return"\n display: block;\n position: absolute;\n top: 3px;\n bottom: 0;\n left: 3px;\n width: 24px;\n height: 24px;\n border-radius: 100px;\n border: 1px solid "+e.colors.outline+";\n color: white;\n background: white;\n stroke: white;\n transition-property: transform, background, border-color;\n transition-duration: "+e.transitionDurations.fast+";\n transition-timing-function: "+e.transitionTimingFunctions.natural+";\n"}),an=t.div(function(n){var e=n.theme;return"\n position: relative;\n width: 56px;\n height: 32px;\n border-radius: 100px;\n border: 1px solid "+e.colors.outline+";\n background: "+e.colors.background+";\n cursor: pointer;\n transition-property: background, border-color;\n transition-duration: "+e.transitionDurations.fast+";\n transition-timing-function: "+e.transitionTimingFunctions.natural+";\n "}),ln=t.label(function(n){return"\n display: flex;\n align-items: center;\n margin-bottom: 0 !important;\n\n &:hover "+an+" {\n "+tn+" {\n border-color: "+n.theme.colors.primaryDark+";\n }\n }\n "}),sn=t.input(function(n){var e=n.theme;return"\n "+on+"\n\n &:focus ~ "+an+" {\n border-color: "+e.colors.primary+";\n }\n &:checked ~ "+an+" {\n border-color: "+e.colors.primary+";\n\n "+tn+" {\n background: "+e.colors.primary+";\n border-color: "+e.colors.primaryDark+";\n transform: translateX(24px);\n }\n }\n &:disabled ~ "+an+" {\n pointer-events: none;\n "+tn+" {\n border-color: "+e.colors.outline+";\n }\n }\n "}),cn=t.span(rn,on);function dn(n){var e=n.label,r=n.name,o=n.checked,t=function(n,e){var r={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&-1===e.indexOf(o)&&(r[o]=n[o]);return r}(n,["label","name","checked"]);return i.createElement(ln,{htmlFor:r},i.createElement(sn,Object.assign({id:r,name:r,type:"checkbox",checked:o},t)),i.createElement(an,null,i.createElement(tn,null,i.createElement(a.Icon,{name:"Check",width:"12px",height:"12px",position:"absolute",top:"0",bottom:"0",left:"0",right:"0",m:"auto",style:{strokeWidth:"2px"}}))),i.createElement(cn,null,e))}function pn(n){var e=n.value;void 0===e&&(e="");var r=n.masker;void 0===r&&(r="*");var o=n.separator;void 0===o&&(o="-");var t=new RegExp("[^0-9"+o+"]").test(e)?"":c.clean(e,r),a=c.format(c.mask(t,r),o),l=i.useState(t),s=l[0],d=l[1],p=i.useState(a),u=p[0],m=p[1],b=i.useCallback(function(n){n.persist();var e=n.target.value,t=e.slice(-1);if(!(new RegExp("[^0-9"+o+r+"]").test(t)||e.length>11)){var a=c.clean(e,r),i=c.clean(s),l=a.length<i.length?i.slice(0,a.length):new RegExp("["+o+r+"]").test(t)?i:i+a.slice(-1);d(l),m(c.format(c.mask(l,r),o))}},[s,d,u,m]),h=i.useCallback(function(n){n.persist();var e=n.target.value.length;n.target.setSelectionRange(e,e)},[]);return i.useEffect(function(){n.onUpdate&&n.onUpdate(s)},[s]),i.createElement(P,Object.assign({},n,{value:u,onChange:b,onFocus:h,onKeyUp:h,onKeyDown:h,onClick:h}))}function un(n){var e=n.name,r=n.validate,o=function(n,e){var r={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&-1===e.indexOf(o)&&(r[o]=n[o]);return r}(n,["name","validate"]);return i.createElement(l.Field,{name:e,validate:r},function(n){var r=n.field,t=n.form,a=Boolean(s.get(t,["errors",e]));return i.createElement(pn,Object.assign({},o,r,{hasError:a,onUpdate:function(n){t.setFieldValue(e,n)}}))})}exports.CheckboxGroup=g,exports.Checkbox=x,exports.CheckboxField=function(n){var e=n.name,r=n.validate,o=n.onChange,t=n.onBlur,a=d(n,["name","validate","onChange","onBlur"]);return i.createElement(l.Field,{name:e,validate:r},function(n){var r=n.field,l=Boolean(s.get(n.form,["errors",e]));return i.createElement(x,Object.assign({},a,r,{checked:Boolean(r.value),hasError:l,onChange:function(n){r.onChange(n),o&&o(n)},onBlur:function(n){r.onBlur(n),t&&t(n)}}))})},exports.DateInput=B,exports.DateInputField=F,exports.DateInputFieldWithLabel=function(n){return i.createElement(i.Fragment,null,i.createElement(E,{htmlFor:n.name},n.label),i.createElement(F,Object.assign({},n)))},exports.Item=D,exports.Body=z,exports.Control=S,exports.Dropdown=C,exports.DropdownField=I,exports.DropdownFieldWithLabel=function(n){return i.createElement(i.Fragment,null,i.createElement(E,{htmlFor:n.name},n.label),i.createElement(I,Object.assign({},n)))},exports.ErrorMessage=function(n){return i.createElement(l.ErrorMessage,{name:n.name,render:function(n){return i.createElement(a.Span,{color:"error",fontSize:0},n)}})},exports.Input=P,exports.InputField=N,exports.InputFieldWithLabel=function(n){return i.createElement(i.Fragment,null,i.createElement(E,{htmlFor:n.name},n.label),i.createElement(N,Object.assign({},n)))},exports.Label=E,exports.Radio=function(n){var e=n.name,r=n.checked,o=n.description,t=n.label,l=H(n,["children","name","checked","description","label"]),s=e+l.value;return i.createElement(Y,{htmlFor:s},i.createElement(M,Object.assign({id:s,name:e,type:"radio",checked:r},l)),i.createElement(q,{checked:r}),i.createElement(a.Box,{display:"block",position:"relative",zIndex:1,width:"calc(100% - 16px)"},t&&i.createElement(W,null,t),o&&i.createElement(a.P,{color:"secondary",fontSize:0,fontWeight:4,lineHeight:0},o)),i.createElement(U,null))},exports.RadioField=A,exports.RadioFieldWithLabel=function(n){var e=n.label,r=H(n,["label"]);return i.createElement(i.Fragment,null,i.createElement(E,{htmlFor:r.name},e),i.createElement(A,Object.assign({},r)))},exports.Select=X,exports.SelectField=J,exports.SelectFieldWithLabel=function(n){return i.createElement(i.Fragment,null,i.createElement(E,{htmlFor:n.name},n.label),i.createElement(J,Object.assign({},n)))},exports.SubGroup=Q,exports.Textarea=nn,exports.TextareaField=en,exports.TextareaFieldWithLabel=function(n){return i.createElement(i.Fragment,null,i.createElement(E,{htmlFor:n.name},n.label),i.createElement(en,Object.assign({},n)))},exports.hidden=on,exports.Toggle=dn,exports.ToggleField=function(n){var e=n.label;return i.createElement(l.Field,{name:n.name,validate:n.validate},function(n){var r=n.field;return i.createElement(dn,Object.assign({label:e},r,{checked:Boolean(r.value)}))})},exports.SSNInput=pn,exports.SSNInputField=un,exports.SSNInputFieldWithLabel=function(n){return i.createElement(i.Fragment,null,i.createElement(E,{htmlFor:n.name},n.label),i.createElement(un,Object.assign({},n)))}; | ||
//# sourceMappingURL=index.js.map |
@@ -1,2 +0,2 @@ | ||
export declare function getLastDayOfMonth({ year, month, }: { | ||
export declare function getLastDayOfMonth({ year, month }: { | ||
year: number; | ||
@@ -3,0 +3,0 @@ month: number; |
{ | ||
"name": "@truework/forms", | ||
"version": "0.8.8", | ||
"version": "1.0.0", | ||
"description": "", | ||
@@ -14,8 +14,10 @@ "main": "dist/index.js", | ||
"build:storybook": "build-storybook", | ||
"lint": "pretty-quick --staged && lint-staged" | ||
"format": "prettier-standard './src/**/*'", | ||
"lint": "prettier-standard './src/**/*' --check" | ||
}, | ||
"lint-staged": { | ||
"*.ts|*.tsx": [ | ||
"eslint --fix" | ||
] | ||
"husky": { | ||
"hooks": { | ||
"pre-commit": "npm run format && npm run lint", | ||
"prepare-commit-msg": "exec < /dev/tty && git cz --hook || true" | ||
} | ||
}, | ||
@@ -60,40 +62,26 @@ "jest": { | ||
"@types/styled-system": "^5.1.1", | ||
"@typescript-eslint/eslint-plugin": "^2.26.0", | ||
"@typescript-eslint/parser": "^2.26.0", | ||
"babel-loader": "^8.0.5", | ||
"babel-preset-react-app": "^9.1.2", | ||
"babel-loader": "^8.2.2", | ||
"babel-preset-react-app": "^10.0.0", | ||
"commitizen": "^4.2.2", | ||
"core-js": "^3.0.0", | ||
"eslint": "^6.8.0", | ||
"eslint-config-airbnb": "^18.1.0", | ||
"eslint-config-prettier": "^6.10.1", | ||
"eslint-import-resolver-alias": "^1.1.2", | ||
"eslint-loader": "^3.0.3", | ||
"eslint-plugin-import": "^2.20.2", | ||
"eslint-plugin-jsx-a11y": "^6.2.3", | ||
"eslint-plugin-prettier": "^3.1.2", | ||
"eslint-plugin-react": "^7.19.0", | ||
"cz-conventional-changelog": "^3.3.0", | ||
"husky": "^4.2.3", | ||
"jest": "^24.5.0", | ||
"lint-staged": "^10.1.1", | ||
"microbundle": "^0.11.0", | ||
"prettier": "^2.0.2", | ||
"pretty-quick": "^2.0.1", | ||
"react": ">=16.8", | ||
"react-dom": ">=16.8", | ||
"styled-components": "^5.0.0", | ||
"prettier-standard": "^16.4.1", | ||
"react-dom": "^16.14.0", | ||
"semantic-release": "^17.3.1", | ||
"ts-jest": "^24.0.0" | ||
}, | ||
"peerDependencies": { | ||
"react": "^16.8.0", | ||
"styled-components": "4.x || 5.x" | ||
}, | ||
"dependencies": { | ||
"@truework/ui": "^0.6.2", | ||
"@truework/ui": "^1.0.2", | ||
"formik": "^2.1.5", | ||
"lodash": "^4.17.15", | ||
"parse-ssn": "^0.3.2", | ||
"react": "^16.14.0", | ||
"styled-components": "^5.2.1", | ||
"styled-system": "^5.1.5", | ||
"use-drop": "^0.5.1" | ||
}, | ||
"gitHead": "46aa56ed80fbf94c318581d48273608cc2d2c4fd" | ||
} | ||
} |
@@ -1,12 +0,12 @@ | ||
export * from './Checkbox'; | ||
export * from './DateInput'; | ||
export * from './Dropdown'; | ||
export * from './ErrorMessage'; | ||
export * from './Input'; | ||
export * from './Label'; | ||
export * from './Radio'; | ||
export * from './Select'; | ||
export * from './SubGroup'; | ||
export * from './Textarea'; | ||
export * from './Toggle'; | ||
export * from './SSNInput'; | ||
export * from './Checkbox' | ||
export * from './DateInput' | ||
export * from './Dropdown' | ||
export * from './ErrorMessage' | ||
export * from './Input' | ||
export * from './Label' | ||
export * from './Radio' | ||
export * from './Select' | ||
export * from './SubGroup' | ||
export * from './Textarea' | ||
export * from './Toggle' | ||
export * from './SSNInput' |
@@ -1,14 +0,14 @@ | ||
export function getLastDayOfMonth({ | ||
export function getLastDayOfMonth ({ | ||
year, | ||
month, | ||
month | ||
}: { | ||
year: number; | ||
month: number; | ||
year: number | ||
month: number | ||
}) { | ||
const d = new Date(year, month, 0); | ||
return d.getUTCDate(); | ||
const d = new Date(year, month, 0) | ||
return d.getUTCDate() | ||
} | ||
export function zeroPadDate(value: number): string { | ||
return value < 10 ? `0${value}` : `${value}`; | ||
export function zeroPadDate (value: number): string { | ||
return value < 10 ? `0${value}` : `${value}` | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
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
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
28
2845
1
286110
42
1
+ Addedreact@^16.14.0
+ Addedstyled-components@^5.2.1
+ Added@truework/ui@1.5.0(transitive)
- Removed@truework/ui@0.6.2(transitive)
Updated@truework/ui@^1.0.2