@truework/forms - npm Package Compare versions

Comparing version 0.6.1 to 0.6.2

dist/index.d.ts

		@@ -1,2 +0,2 @@
		export { CheckboxProps, CheckboxFieldProps, Checkbox, CheckboxField, } from './Checkbox';
		export { CheckboxProps, CheckboxFieldProps, Checkbox, CheckboxField, CheckboxGroup, } from './Checkbox';
		export { DateValidationOptions, DateInputProps, DateInputFieldProps, DateInput, DateInputField, DateInputFieldWithLabel, } from './DateInput';
		@@ -3,0 +3,0 @@ export { DropdownProps, DropdownFieldProps, DropdownFieldWithLabelProps, Dropdown, DropdownField, DropdownFieldWithLabel, } from './Dropdown';

dist/index.esm.js

		@@ -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{get as t,times as i}from"lodash";import{createElement as a,useRef as l,useState as s,useEffect as c,Fragment as d,forwardRef as p,Children as u,cloneElement as b}from"react";import h,{css as m}from"styled-components";import{Field as f,ErrorMessage as g}from"formik";import{Span as v,H5 as x,Icon as y,Box as w}from"@truework/ui";function k(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 _=Object.freeze([""]),O=h(y)(_),z=h.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 "+O+" {\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 "}),D=h(x)(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 "}),j=h.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 ~ "+z+" {\n border-color: "+r.colors.primaryDark+";\n }\n &:checked ~ "+z+" {\n background: "+r.colors.primary+";\n border-color: "+r.colors.primaryDark+";\n\n "+O+" {\n transform: scale(1);\n }\n }\n &:focus ~ "+D+", &:focus ~"+v+", &:checked ~ "+v+" {\n color: "+r.colors.primary+";\n }\n\n "+(n.hasError?"\n & ~ "+z+" {\n border-color: "+r.colors.error+" !important;\n }\n ":"")+"\n "}),B=h.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 "+z+" {\n background: "+r.colors.background+";\n }\n "+v+" {\n color: "+r.colors.placeholder+";\n }\n ":"\n &:hover "+z+" {\n border-color: "+r.colors.primaryDark+";\n }\n &:hover "+D+", &:hover "+v+" {\n color: "+r.colors.primary+";\n }\n ")+"\n "});function E(n){var r=n.children,o=n.name,e=n.checked,t=n.disabled,i=k(n,["children","name","checked","disabled"]);return a(B,{htmlFor:o,disabled:t},a(j,Object.assign({id:o,name:o,type:"checkbox",checked:e,disabled:t},i)),a(z,{checked:e},a(O,{name:"Check"})),a(v,{display:"block",width:"calc(100% - 16px)",fontSize:1,lineHeight:1,fontWeight:5,style:{transitionProperty:"color",transitionDuration:"150ms",transitionTimingFunction:"ease-in-out"}},r))}function C(n){var r=n.name,o=n.validate,e=n.onChange,i=n.onBlur,l=k(n,["name","validate","onChange","onBlur"]);return a(f,{name:r,validate:o},function(n){var o=n.field,s=Boolean(t(n.form,["errors",r]));return a(E,Object.assign({},l,o,{checked:Boolean(o.value),hasError:s,onChange:function(n){o.onChange(n),e&&e(n)},onBlur:function(n){o.onBlur(n),i&&i(n)}}))})}function F(n){return n<10?"0"+n:""+n}h.div(function(n){var r=n.theme;return"\n width: 100%;\n\n "+B+" {\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 "+B+":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 "+B+":last-child {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n }\n "});var T=Object.freeze(["\n display: block;\n position: relative;\n font-weight: 500;\n letter-spacing: 0.6px;\n ","\n ","\n ","\n"]),I=h.label(T,o,r,n);I.displayName="Label",I.defaultProps={fontSize:1,lineHeight:1,mb:"xs"};var P=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"]),R=h.select(function(n){var r=n.theme,o=n.hasError;return m(P,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 S(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 d=n.initialDay;void 0===d&&(d=0);var p=n.initialYear;void 0===p&&(p=0);var u=n.minMonth;void 0===u&&(u=1);var b=n.minDay;void 0===b&&(b=1);var h=n.minYear;void 0===h&&(h=1980);var m=n.maxMonth;void 0===m&&(m=12);var f=n.maxDay;void 0===f&&(f=31);var g=n.maxYear;void 0===g&&(g=2030);var v=n.hasError,x=n.onUpdate,k=l(null),_=l(null),O=l(null),z=s(t),D=z[0],j=z[1],B=s(d),E=B[0],C=B[1],T=s(p),I=T[0],P=T[1],S=function(n){return new Date(n.year,n.month,0).getUTCDate()}({year:I\|\|2020,month:D});return c(function(){I&&D&&E&&x(I+"-"+F(D)+"-"+F(E))},[D,E,I]),a(w,{ml:"-4px",mr:"-4px",p:"4px"},a(w,{display:"flex",alignItems:"center",height:"48px",pl:"56px"},a(R,{ref:k,name:r+"-month",value:D,disabled:e,onChange:function(n){j(parseInt(n.target.value,10)),_.current&&_.current.focus()},"aria-label":o+": Month",hasValue:Boolean(D),hasError:v},a("option",{value:"0",disabled:!0,selected:!0},"mm"),i(m-u+1,function(){return""}).map(function(n,r){var o=u+r;return a("option",{key:o,value:o},F(o))})),a(w,{height:"50%",width:"1px",bg:v?"error":"outline",zIndex:2,transform:"rotate(10deg)"}),a(R,{ref:_,name:r+"-day",value:E,disabled:e,onChange:function(n){C(parseInt(n.target.value,10)),O.current&&O.current.focus()},"aria-label":o+": Day",hasValue:Boolean(E),hasError:v},a("option",{value:"0",disabled:!0,selected:!0},"dd"),i(Math.min(f,S)-b+1,function(){return""}).map(function(n,r){var o=b+r;return a("option",{key:o,value:o},F(o))})),a(w,{height:"50%",width:"1px",bg:v?"error":"outline",zIndex:2,transform:"rotate(10deg)"}),a(R,{ref:O,name:r+"-year",value:I,disabled:e,onChange:function(n){P(parseInt(n.target.value,10))},"aria-label":o+": Year",hasValue:Boolean(I),hasError:v},a("option",{value:"0",disabled:!0,selected:!0},"yyyy"),i(g-h+1,function(n){return h+n}).map(function(n){return a("option",{key:n,value:n},n)})),a(w,{className:"__bg",bg:v?"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"}),a(w,{className:"__border",bg:"white",border:["1px solid",v?"error":"outline"],position:"absolute",top:"0",bottom:"0",left:"0",right:"0",zIndex:0,borderRadius:"4px",transitionProperty:"border-color",transitionDuration:"fast",transitionTimingFunction:"ease"},a(w,{"aria-hidden":"true",position:"absolute",top:"0",left:"0",display:"flex",alignItems:"center",justifyContent:"center",px:"sm",height:"100%",zIndex:0,color:v?"error":"secondary",bg:v?"#FDEBF0":"background",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px",borderRight:["1px solid",v?"error":"outline"],transitionProperty:"border-color, color",transitionDuration:"fast",transitionTimingFunction:"ease"},a(y,{name:"Calendar"})))))}function N(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 a(f,{name:r,validate:o},function(n){var o=n.field,i=n.form,l=Boolean(t(i,["errors",r])),s=(o.value\|\|"").split("-"),c=s[0];void 0===c&&(c="");var d=s[1];void 0===d&&(d="");var p=s[2];return void 0===p&&(p=""),a(S,Object.assign({name:r},e,{initialMonth:d?parseInt(d,10):void 0,initialDay:p?parseInt(p,10):void 0,initialYear:c?parseInt(c,10):void 0,hasError:l,onUpdate:function(n){i.setFieldValue(r,n)}}))})}function H(n){return a(d,null,a(I,{htmlFor:n.name},n.label),a(N,Object.assign({},n)))}function V(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 M=h(w)(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 Y(n){var r=n.children,o=V(n,["children"]);return a(M,Object.assign({as:"li"},o),r)}var A=p(function(n,r){var o=n.children,e=V(n,["children"]);return a(w,Object.assign({ref:r,as:"ul",boxShadow:"medium",borderRadius:2,overflow:"auto",width:"100%",bg:"white"},e),o)});A.displayName="Body";var L=h.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"});L.displayName="ControlOuter";var W=p(function(n,r){var o=n.children,e=n.isActive,t=n.hasError,i=V(n,["children","isActive","hasError"]);return a("div",{style:{position:"relative"}},a(L,Object.assign({ref:r,isActive:e,hasError:t,type:"button"},i),a(v,{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"},a(v,{width:"100%",fontWeight:4,style:{whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",letterSpacing:"0.6px"}},o),a(y,{name:"ChevronDown",ml:"xs"}))),a(w,{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"}),a(w,{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 U(n){var r=n.value,o=n.placeholder,i=n.label,l=n.items,c=n.hasError,d=n.disabled,p=n.onSelect,u=n.onRemove,b=s(t(l.filter(function(n){return n.value===r})[0],"label")\|\|o\|\|"Please select"),h=b[0],m=b[1],f=e({items:l.map(function(n){return Object.assign({},n,{selected:n.value===r})}),onSelect:function(n){m(n.label),p&&p(n)},onRemove:function(n){m("Please select"),u&&u(n)}}),g=f.items,v=f.isOpen,x=f.getDropProps;return a(w,null,a(W,Object.assign({id:f.id},d?{}:(0,f.getControlProps)(),{"aria-label":i,isActive:v,hasError:c,disabled:d}),h),v&&a(w,{position:"absolute",bottom:"0",width:"100%",transform:"translateY(100%) translateY(6px)",zIndex:1e3},a(A,Object.assign({},x(),{style:{maxHeight:"240px",overflow:"auto"}}),g.map(function(n){return a(Y,Object.assign({key:n.value,selected:n.selected,highlighted:n.highlighted},n.getItemProps()),n.label)}))))}function X(n){var r=n.name,o=n.validate,e=V(n,["name","validate"]);return a(f,{name:r,validate:o},function(n){var r=n.field,o=n.form,t=Boolean(o.errors&&o.errors[r.name]);return a(U,Object.assign({},e,{hasError:t,onSelect:function(n){o.setFieldValue(r.name,n.value),e.onSelect&&e.onSelect(n)}}))})}function q(n){return a(d,null,a(I,{htmlFor:n.name},n.label),a(X,Object.assign({},n)))}function G(n){return a(g,{name:n.name,render:function(n){return a(v,{color:"error",fontSize:0},n)}})}function J(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}W.displayName="Control";var K=h.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 &:-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: "+(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"});K.displayName="InputElement";var Q=p(function(n,r){var o=n.hasError,e=n.preTab,t=n.postTab,i=J(n,["hasError","preTab","postTab"]),l=Boolean(e),s=e\|\|t;return a(w,{display:"flex",ml:"-2px",mr:"-2px",p:"2px"},a(K,Object.assign({ref:r,hasError:o},i)),s&&a(w,{className:"__tab","aria-hidden":"true",display:"flex",alignItems:"center",justifyContent:"center",px:"sm",zIndex:1,color:o?"error":"secondary",bg:o?"#FDEBF0":"background",borderTopLeftRadius:l?"4px":"0",borderBottomLeftRadius:l?"4px":"0",borderTopRightRadius:l?"0":"4px",borderBottomRightRadius:l?"0":"4px",border:["1px solid",o?"error":"outline"],order:l?-1:1,transitionProperty:"border-color, color",transitionDuration:"fast",transitionTimingFunction:"ease"},s),a(w,{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"}),a(w,{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 Z(n){var r=n.name,o=n.validate,e=n.onChange,i=n.onBlur,l=J(n,["name","validate","onChange","onBlur"]);return a(f,{name:r,validate:o},function(n){var o=n.field,s=Boolean(t(n.form,["errors",r]));return a(Q,Object.assign({},l,o,{hasError:s,onChange:function(n){o.onChange(n),e&&e(n)},onBlur:function(n){o.onBlur(n),i&&i(n)}}))})}function $(n){return a(d,null,a(I,{htmlFor:n.name},n.label),a(Z,Object.assign({},n)))}function nn(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 rn=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"]),on=h.div(function(n){var r=n.theme;return"\n width: 100%;\n border: 1px solid "+r.colors.outline+";\n border-radius: 4px;\n\n "+ln+" {\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 & "+ln+" {\n border-color: "+r.colors.error+" !important;\n }\n ":"")+"\n "}),en=h.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 "}),tn=h.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 ~ "+en+" {\n border-color: "+r.colors.primaryDark+";\n }\n &:checked ~ "+en+" {\n background: "+r.colors.primary+";\n border-color: "+r.colors.primaryDark+";\n\n &::after {\n transform: scale(1);\n }\n }\n &:disabled ~ "+en+" {\n border-color: "+r.colors.outline+" !important;\n }\n &:disabled ~ "+v+" {\n color: "+r.colors.secondary+";\n }\n &:disabled ~ "+an+" {\n background-color: "+r.colors.background+";\n }\n "}),an=h.span(rn),ln=h.label(function(n){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 "+en+" {\n border-color: "+n.theme.colors.primaryDark+";\n }\n "});function sn(n){var r=n.children,o=n.name,e=n.checked,t=nn(n,["children","name","checked"]),i=o+t.value;return a(ln,{htmlFor:i},a(tn,Object.assign({id:i,name:o,type:"radio",checked:e},t)),a(en,{checked:e}),a(v,{display:"block",position:"relative",zIndex:1,width:"calc(100% - 16px)",fontSize:1,lineHeight:1,fontWeight:5},r),a(an,null))}function cn(n){var r=n.children,o=n.name,e=n.validate,i=n.onChange,l=n.onBlur,s=nn(n,["children","name","validate","onChange","onBlur"]);return a(f,{name:o,validate:e},function(n){var e=n.field,c=Boolean(t(n.form,["errors",o]));return a(on,{hasError:c},u.toArray(r).map(function(n){return b(n,Object.assign({},e,s,{value:n.props.value,hasError:c,checked:Boolean(e.value===n.props.value),onChange:function(n){e.onChange(n),i&&i(n)},onBlur:function(n){e.onBlur(n),l&&l(n)}}))}))})}function dn(n){return a(d,null,a(I,{htmlFor:n.name},n.label),a(cn,Object.assign({},n)))}function pn(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 un=h.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"});un.displayName="SelectElement";var bn=p(function(n,r){var o=n.children,e=n.hasError,t=n.placeholder;void 0===t&&(t="");var i=pn(n,["children","hasError","placeholder"]);return a(w,{ml:"-2px",mr:"-2px",p:"2px"},a(un,Object.assign({ref:r,hasValue:Boolean(i.value),hasError:e},i,{value:i.value\|\|""}),t&&a("option",{value:"",disabled:!0},t),o),a(w,{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"}),a(w,{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"}),a(w,{position:"absolute",right:"0",top:"0",bottom:"0",height:"16px",my:"auto",pr:"sm",style:{pointerEvents:"none"}},a(y,{name:"ChevronDown",color:"secondary"})))});function hn(n){var r=n.name,o=n.validate,e=n.onChange,i=n.onBlur,l=pn(n,["name","validate","onChange","onBlur"]);return a(f,{name:r,validate:o},function(n){var o=n.field,s=Boolean(t(n.form,["errors",r]));return a(bn,Object.assign({},l,o,{hasError:s,onChange:function(n){o.onChange(n),e&&e(n)},onBlur:function(n){o.onBlur(n),i&&i(n)}}))})}function mn(n){return a(d,null,a(I,{htmlFor:n.name},n.label),a(hn,Object.assign({},n)))}var fn=h(w)(function(n){return"\n border-left: 2px solid currentColor;\n padding-left: "+n.theme.space.sm+";\n "});function gn(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 vn=h.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"});vn.displayName="TextareaElement",vn.defaultProps={rows:4};var xn=p(function(n,r){var o=n.hasError,e=gn(n,["hasError"]);return a(w,{ml:"-2px",mr:"-2px",p:"2px"},a(vn,Object.assign({ref:r,hasError:o},e)),a(w,{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"}),a(w,{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 yn(n){var r=n.name,o=n.validate,e=n.onChange,i=n.onBlur,l=gn(n,["name","validate","onChange","onBlur"]);return a(f,{name:r,validate:o},function(n){var o=n.field,s=Boolean(t(n.form,["errors",r]));return a(xn,Object.assign({},l,o,{hasError:s,onChange:function(n){o.onChange(n),e&&e(n)},onBlur:function(n){o.onBlur(n),i&&i(n)}}))})}function wn(n){return a(d,null,a(I,{htmlFor:n.name},n.label),a(yn,Object.assign({},n)))}var kn=Object.freeze(["\n ","\n"]),_n="\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",On=h.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"}),zn=h.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 "}),Dn=h.label(function(n){return"\n display: flex;\n align-items: center;\n margin-bottom: 0 !important;\n\n &:hover "+zn+" {\n "+On+" {\n border-color: "+n.theme.colors.primaryDark+";\n }\n }\n "}),jn=h.input(function(n){var r=n.theme;return"\n "+_n+"\n\n &:focus ~ "+zn+" {\n border-color: "+r.colors.primary+";\n }\n &:checked ~ "+zn+" {\n border-color: "+r.colors.primary+";\n\n "+On+" {\n background: "+r.colors.primary+";\n border-color: "+r.colors.primaryDark+";\n transform: translateX(24px);\n }\n }\n &:disabled ~ "+zn+" {\n pointer-events: none;\n "+On+" {\n border-color: "+r.colors.outline+";\n }\n }\n "}),Bn=h.span(kn,_n);function En(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 a(Dn,{htmlFor:o},a(jn,Object.assign({id:o,name:o,type:"checkbox",checked:e},t)),a(zn,null,a(On,null,a(y,{name:"Check",width:"12px",height:"12px",position:"absolute",top:"0",bottom:"0",left:"0",right:"0",m:"auto",style:{strokeWidth:"2px"}}))),a(Bn,null,r))}function Cn(n){var r=n.label;return a(f,{name:n.name,validate:n.validate},function(n){var o=n.field;return a(En,Object.assign({label:r},o,{checked:Boolean(o.value)}))})}export{E as Checkbox,C as CheckboxField,S as DateInput,N as DateInputField,H as DateInputFieldWithLabel,U as Dropdown,X as DropdownField,q as DropdownFieldWithLabel,G as ErrorMessage,Q as Input,Z as InputField,$ as InputFieldWithLabel,I as Label,sn as Radio,cn as RadioField,dn as RadioFieldWithLabel,bn as Select,hn as SelectField,mn as SelectFieldWithLabel,fn as SubGroup,xn as Textarea,yn as TextareaField,wn as TextareaFieldWithLabel,En as Toggle,Cn as ToggleField};
		import{space as n,color as r,typography as o}from"styled-system";import{useSelect as e}from"use-drop";import{get as t,times as i}from"lodash";import{createElement as a,useRef as l,useState as s,useEffect as c,Fragment as d,forwardRef as p,Children as u,cloneElement as b}from"react";import h,{css as m}from"styled-components";import{Field as f,ErrorMessage as g}from"formik";import{Span as v,H5 as x,Icon as y,Box as w}from"@truework/ui";function k(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 _=Object.freeze([""]),O=h(y)(_),z=h.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 "+O+" {\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 "}),D=h(x)(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 "}),j=h.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 ~ "+z+" {\n border-color: "+r.colors.primaryDark+";\n }\n &:checked ~ "+z+" {\n background: "+r.colors.primary+";\n border-color: "+r.colors.primaryDark+";\n\n "+O+" {\n transform: scale(1);\n }\n }\n &:focus ~ "+D+", &:focus ~"+v+", &:checked ~ "+v+" {\n color: "+r.colors.primary+";\n }\n\n "+(n.hasError?"\n & ~ "+z+" {\n border-color: "+r.colors.error+" !important;\n }\n ":"")+"\n "}),B=h.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 "+z+" {\n background: "+r.colors.background+";\n }\n "+v+" {\n color: "+r.colors.placeholder+";\n }\n ":"\n &:hover "+z+" {\n border-color: "+r.colors.primaryDark+";\n }\n &:hover "+D+", &:hover "+v+" {\n color: "+r.colors.primary+";\n }\n ")+"\n "}),E=h.div(function(n){var r=n.theme;return"\n width: 100%;\n\n "+B+" {\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 "+B+":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 "+B+":last-child {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n }\n "});function C(n){var r=n.children,o=n.name,e=n.checked,t=n.disabled,i=k(n,["children","name","checked","disabled"]);return a(B,{htmlFor:o,disabled:t},a(j,Object.assign({id:o,name:o,type:"checkbox",checked:e,disabled:t},i)),a(z,{checked:e},a(O,{name:"Check"})),a(v,{display:"block",width:"calc(100% - 16px)",fontSize:1,lineHeight:1,fontWeight:5,style:{transitionProperty:"color",transitionDuration:"150ms",transitionTimingFunction:"ease-in-out"}},r))}function F(n){var r=n.name,o=n.validate,e=n.onChange,i=n.onBlur,l=k(n,["name","validate","onChange","onBlur"]);return a(f,{name:r,validate:o},function(n){var o=n.field,s=Boolean(t(n.form,["errors",r]));return a(C,Object.assign({},l,o,{checked:Boolean(o.value),hasError:s,onChange:function(n){o.onChange(n),e&&e(n)},onBlur:function(n){o.onBlur(n),i&&i(n)}}))})}function T(n){return n<10?"0"+n:""+n}var I=Object.freeze(["\n display: block;\n position: relative;\n font-weight: 500;\n letter-spacing: 0.6px;\n ","\n ","\n ","\n"]),P=h.label(I,o,r,n);P.displayName="Label",P.defaultProps={fontSize:1,lineHeight:1,mb:"xs"};var R=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"]),S=h.select(function(n){var r=n.theme,o=n.hasError;return m(R,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 N(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 d=n.initialDay;void 0===d&&(d=0);var p=n.initialYear;void 0===p&&(p=0);var u=n.minMonth;void 0===u&&(u=1);var b=n.minDay;void 0===b&&(b=1);var h=n.minYear;void 0===h&&(h=1980);var m=n.maxMonth;void 0===m&&(m=12);var f=n.maxDay;void 0===f&&(f=31);var g=n.maxYear;void 0===g&&(g=2030);var v=n.hasError,x=n.onUpdate,k=l(null),_=l(null),O=l(null),z=s(t),D=z[0],j=z[1],B=s(d),E=B[0],C=B[1],F=s(p),I=F[0],P=F[1],R=function(n){return new Date(n.year,n.month,0).getUTCDate()}({year:I\|\|2020,month:D});return c(function(){I&&D&&E&&x(I+"-"+T(D)+"-"+T(E))},[D,E,I]),a(w,{ml:"-4px",mr:"-4px",p:"4px"},a(w,{display:"flex",alignItems:"center",height:"48px",pl:"56px"},a(S,{ref:k,name:r+"-month",value:D,disabled:e,onChange:function(n){j(parseInt(n.target.value,10)),_.current&&_.current.focus()},"aria-label":o+": Month",hasValue:Boolean(D),hasError:v},a("option",{value:"0",disabled:!0,selected:!0},"mm"),i(m-u+1,function(){return""}).map(function(n,r){var o=u+r;return a("option",{key:o,value:o},T(o))})),a(w,{height:"50%",width:"1px",bg:v?"error":"outline",zIndex:2,transform:"rotate(10deg)"}),a(S,{ref:_,name:r+"-day",value:E,disabled:e,onChange:function(n){C(parseInt(n.target.value,10)),O.current&&O.current.focus()},"aria-label":o+": Day",hasValue:Boolean(E),hasError:v},a("option",{value:"0",disabled:!0,selected:!0},"dd"),i(Math.min(f,R)-b+1,function(){return""}).map(function(n,r){var o=b+r;return a("option",{key:o,value:o},T(o))})),a(w,{height:"50%",width:"1px",bg:v?"error":"outline",zIndex:2,transform:"rotate(10deg)"}),a(S,{ref:O,name:r+"-year",value:I,disabled:e,onChange:function(n){P(parseInt(n.target.value,10))},"aria-label":o+": Year",hasValue:Boolean(I),hasError:v},a("option",{value:"0",disabled:!0,selected:!0},"yyyy"),i(g-h+1,function(n){return h+n}).map(function(n){return a("option",{key:n,value:n},n)})),a(w,{className:"__bg",bg:v?"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"}),a(w,{className:"__border",bg:"white",border:["1px solid",v?"error":"outline"],position:"absolute",top:"0",bottom:"0",left:"0",right:"0",zIndex:0,borderRadius:"4px",transitionProperty:"border-color",transitionDuration:"fast",transitionTimingFunction:"ease"},a(w,{"aria-hidden":"true",position:"absolute",top:"0",left:"0",display:"flex",alignItems:"center",justifyContent:"center",px:"sm",height:"100%",zIndex:0,color:v?"error":"secondary",bg:v?"#FDEBF0":"background",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px",borderRight:["1px solid",v?"error":"outline"],transitionProperty:"border-color, color",transitionDuration:"fast",transitionTimingFunction:"ease"},a(y,{name:"Calendar"})))))}function H(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 a(f,{name:r,validate:o},function(n){var o=n.field,i=n.form,l=Boolean(t(i,["errors",r])),s=(o.value\|\|"").split("-"),c=s[0];void 0===c&&(c="");var d=s[1];void 0===d&&(d="");var p=s[2];return void 0===p&&(p=""),a(N,Object.assign({name:r},e,{initialMonth:d?parseInt(d,10):void 0,initialDay:p?parseInt(p,10):void 0,initialYear:c?parseInt(c,10):void 0,hasError:l,onUpdate:function(n){i.setFieldValue(r,n)}}))})}function V(n){return a(d,null,a(P,{htmlFor:n.name},n.label),a(H,Object.assign({},n)))}function M(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 Y=h(w)(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 A(n){var r=n.children,o=M(n,["children"]);return a(Y,Object.assign({as:"li"},o),r)}var L=p(function(n,r){var o=n.children,e=M(n,["children"]);return a(w,Object.assign({ref:r,as:"ul",boxShadow:"medium",borderRadius:2,overflow:"auto",width:"100%",bg:"white"},e),o)});L.displayName="Body";var W=h.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"});W.displayName="ControlOuter";var U=p(function(n,r){var o=n.children,e=n.isActive,t=n.hasError,i=M(n,["children","isActive","hasError"]);return a("div",{style:{position:"relative"}},a(W,Object.assign({ref:r,isActive:e,hasError:t,type:"button"},i),a(v,{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"},a(v,{width:"100%",fontWeight:4,style:{whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",letterSpacing:"0.6px"}},o),a(y,{name:"ChevronDown",ml:"xs"}))),a(w,{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"}),a(w,{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 X(n){var r=n.value,o=n.placeholder,i=n.label,l=n.items,c=n.hasError,d=n.disabled,p=n.onSelect,u=n.onRemove,b=s(t(l.filter(function(n){return n.value===r})[0],"label")\|\|o\|\|"Please select"),h=b[0],m=b[1],f=e({items:l.map(function(n){return Object.assign({},n,{selected:n.value===r})}),onSelect:function(n){m(n.label),p&&p(n)},onRemove:function(n){m("Please select"),u&&u(n)}}),g=f.items,v=f.isOpen,x=f.getDropProps;return a(w,null,a(U,Object.assign({id:f.id},d?{}:(0,f.getControlProps)(),{"aria-label":i,isActive:v,hasError:c,disabled:d}),h),v&&a(w,{position:"absolute",bottom:"0",width:"100%",transform:"translateY(100%) translateY(6px)",zIndex:1e3},a(L,Object.assign({},x(),{style:{maxHeight:"240px",overflow:"auto"}}),g.map(function(n){return a(A,Object.assign({key:n.value,selected:n.selected,highlighted:n.highlighted},n.getItemProps()),n.label)}))))}function q(n){var r=n.name,o=n.validate,e=M(n,["name","validate"]);return a(f,{name:r,validate:o},function(n){var r=n.field,o=n.form,t=Boolean(o.errors&&o.errors[r.name]);return a(X,Object.assign({},e,{hasError:t,onSelect:function(n){o.setFieldValue(r.name,n.value),e.onSelect&&e.onSelect(n)}}))})}function G(n){return a(d,null,a(P,{htmlFor:n.name},n.label),a(q,Object.assign({},n)))}function J(n){return a(g,{name:n.name,render:function(n){return a(v,{color:"error",fontSize:0},n)}})}function K(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}U.displayName="Control";var Q=h.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 &:-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: "+(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"});Q.displayName="InputElement";var Z=p(function(n,r){var o=n.hasError,e=n.preTab,t=n.postTab,i=K(n,["hasError","preTab","postTab"]),l=Boolean(e),s=e\|\|t;return a(w,{display:"flex",ml:"-2px",mr:"-2px",p:"2px"},a(Q,Object.assign({ref:r,hasError:o},i)),s&&a(w,{className:"__tab","aria-hidden":"true",display:"flex",alignItems:"center",justifyContent:"center",px:"sm",zIndex:1,color:o?"error":"secondary",bg:o?"#FDEBF0":"background",borderTopLeftRadius:l?"4px":"0",borderBottomLeftRadius:l?"4px":"0",borderTopRightRadius:l?"0":"4px",borderBottomRightRadius:l?"0":"4px",border:["1px solid",o?"error":"outline"],order:l?-1:1,transitionProperty:"border-color, color",transitionDuration:"fast",transitionTimingFunction:"ease"},s),a(w,{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"}),a(w,{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 $(n){var r=n.name,o=n.validate,e=n.onChange,i=n.onBlur,l=K(n,["name","validate","onChange","onBlur"]);return a(f,{name:r,validate:o},function(n){var o=n.field,s=Boolean(t(n.form,["errors",r]));return a(Z,Object.assign({},l,o,{hasError:s,onChange:function(n){o.onChange(n),e&&e(n)},onBlur:function(n){o.onBlur(n),i&&i(n)}}))})}function nn(n){return a(d,null,a(P,{htmlFor:n.name},n.label),a($,Object.assign({},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}var on=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"]),en=h.div(function(n){var r=n.theme;return"\n width: 100%;\n border: 1px solid "+r.colors.outline+";\n border-radius: 4px;\n\n "+sn+" {\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 & "+sn+" {\n border-color: "+r.colors.error+" !important;\n }\n ":"")+"\n "}),tn=h.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 "}),an=h.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 ~ "+tn+" {\n border-color: "+r.colors.primaryDark+";\n }\n &:checked ~ "+tn+" {\n background: "+r.colors.primary+";\n border-color: "+r.colors.primaryDark+";\n\n &::after {\n transform: scale(1);\n }\n }\n &:disabled ~ "+tn+" {\n border-color: "+r.colors.outline+" !important;\n }\n &:disabled ~ "+v+" {\n color: "+r.colors.secondary+";\n }\n &:disabled ~ "+ln+" {\n background-color: "+r.colors.background+";\n }\n "}),ln=h.span(on),sn=h.label(function(n){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 "+tn+" {\n border-color: "+n.theme.colors.primaryDark+";\n }\n "});function cn(n){var r=n.children,o=n.name,e=n.checked,t=rn(n,["children","name","checked"]),i=o+t.value;return a(sn,{htmlFor:i},a(an,Object.assign({id:i,name:o,type:"radio",checked:e},t)),a(tn,{checked:e}),a(v,{display:"block",position:"relative",zIndex:1,width:"calc(100% - 16px)",fontSize:1,lineHeight:1,fontWeight:5},r),a(ln,null))}function dn(n){var r=n.children,o=n.name,e=n.validate,i=n.onChange,l=n.onBlur,s=rn(n,["children","name","validate","onChange","onBlur"]);return a(f,{name:o,validate:e},function(n){var e=n.field,c=Boolean(t(n.form,["errors",o]));return a(en,{hasError:c},u.toArray(r).map(function(n){return b(n,Object.assign({},e,s,{value:n.props.value,hasError:c,checked:Boolean(e.value===n.props.value),onChange:function(n){e.onChange(n),i&&i(n)},onBlur:function(n){e.onBlur(n),l&&l(n)}}))}))})}function pn(n){return a(d,null,a(P,{htmlFor:n.name},n.label),a(dn,Object.assign({},n)))}function un(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 bn=h.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"});bn.displayName="SelectElement";var hn=p(function(n,r){var o=n.children,e=n.hasError,t=n.placeholder;void 0===t&&(t="");var i=un(n,["children","hasError","placeholder"]);return a(w,{ml:"-2px",mr:"-2px",p:"2px"},a(bn,Object.assign({ref:r,hasValue:Boolean(i.value),hasError:e},i,{value:i.value\|\|""}),t&&a("option",{value:"",disabled:!0},t),o),a(w,{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"}),a(w,{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"}),a(w,{position:"absolute",right:"0",top:"0",bottom:"0",height:"16px",my:"auto",pr:"sm",style:{pointerEvents:"none"}},a(y,{name:"ChevronDown",color:"secondary"})))});function mn(n){var r=n.name,o=n.validate,e=n.onChange,i=n.onBlur,l=un(n,["name","validate","onChange","onBlur"]);return a(f,{name:r,validate:o},function(n){var o=n.field,s=Boolean(t(n.form,["errors",r]));return a(hn,Object.assign({},l,o,{hasError:s,onChange:function(n){o.onChange(n),e&&e(n)},onBlur:function(n){o.onBlur(n),i&&i(n)}}))})}function fn(n){return a(d,null,a(P,{htmlFor:n.name},n.label),a(mn,Object.assign({},n)))}var gn=h(w)(function(n){return"\n border-left: 2px solid currentColor;\n padding-left: "+n.theme.space.sm+";\n "});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 xn=h.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"});xn.displayName="TextareaElement",xn.defaultProps={rows:4};var yn=p(function(n,r){var o=n.hasError,e=vn(n,["hasError"]);return a(w,{ml:"-2px",mr:"-2px",p:"2px"},a(xn,Object.assign({ref:r,hasError:o},e)),a(w,{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"}),a(w,{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 wn(n){var r=n.name,o=n.validate,e=n.onChange,i=n.onBlur,l=vn(n,["name","validate","onChange","onBlur"]);return a(f,{name:r,validate:o},function(n){var o=n.field,s=Boolean(t(n.form,["errors",r]));return a(yn,Object.assign({},l,o,{hasError:s,onChange:function(n){o.onChange(n),e&&e(n)},onBlur:function(n){o.onBlur(n),i&&i(n)}}))})}function kn(n){return a(d,null,a(P,{htmlFor:n.name},n.label),a(wn,Object.assign({},n)))}var _n=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",zn=h.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"}),Dn=h.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 "}),jn=h.label(function(n){return"\n display: flex;\n align-items: center;\n margin-bottom: 0 !important;\n\n &:hover "+Dn+" {\n "+zn+" {\n border-color: "+n.theme.colors.primaryDark+";\n }\n }\n "}),Bn=h.input(function(n){var r=n.theme;return"\n "+On+"\n\n &:focus ~ "+Dn+" {\n border-color: "+r.colors.primary+";\n }\n &:checked ~ "+Dn+" {\n border-color: "+r.colors.primary+";\n\n "+zn+" {\n background: "+r.colors.primary+";\n border-color: "+r.colors.primaryDark+";\n transform: translateX(24px);\n }\n }\n &:disabled ~ "+Dn+" {\n pointer-events: none;\n "+zn+" {\n border-color: "+r.colors.outline+";\n }\n }\n "}),En=h.span(_n,On);function Cn(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 a(jn,{htmlFor:o},a(Bn,Object.assign({id:o,name:o,type:"checkbox",checked:e},t)),a(Dn,null,a(zn,null,a(y,{name:"Check",width:"12px",height:"12px",position:"absolute",top:"0",bottom:"0",left:"0",right:"0",m:"auto",style:{strokeWidth:"2px"}}))),a(En,null,r))}function Fn(n){var r=n.label;return a(f,{name:n.name,validate:n.validate},function(n){var o=n.field;return a(Cn,Object.assign({label:r},o,{checked:Boolean(o.value)}))})}export{C as Checkbox,F as CheckboxField,E as CheckboxGroup,N as DateInput,H as DateInputField,V as DateInputFieldWithLabel,X as Dropdown,q as DropdownField,G as DropdownFieldWithLabel,J as ErrorMessage,Z as Input,$ as InputField,nn as InputFieldWithLabel,P as Label,cn as Radio,dn as RadioField,pn as RadioFieldWithLabel,hn as Select,mn as SelectField,fn as SelectFieldWithLabel,gn as SubGroup,yn as Textarea,wn as TextareaField,kn as TextareaFieldWithLabel,Cn as Toggle,Fn as ToggleField};
		//# sourceMappingURL=index.esm.js.map

dist/index.js

		@@ -1,2 +0,2 @@
		var n,e=require("styled-system"),r=require("use-drop"),o=require("lodash"),t=require("react"),a=require("styled-components"),i=(n=a)&&"object"==typeof n&&"default"in n?n.default:n,l=require("formik"),s=require("@truework/ui");function c(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 d=Object.freeze([""]),p=i(s.Icon)(d),u=i.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 "+p+" {\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 "}),m=i(s.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 "}),b=i.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 ~ "+u+" {\n border-color: "+e.colors.primaryDark+";\n }\n &:checked ~ "+u+" {\n background: "+e.colors.primary+";\n border-color: "+e.colors.primaryDark+";\n\n "+p+" {\n transform: scale(1);\n }\n }\n &:focus ~ "+m+", &:focus ~"+s.Span+", &:checked ~ "+s.Span+" {\n color: "+e.colors.primary+";\n }\n\n "+(n.hasError?"\n & ~ "+u+" {\n border-color: "+e.colors.error+" !important;\n }\n ":"")+"\n "}),h=i.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 "+u+" {\n background: "+e.colors.background+";\n }\n "+s.Span+" {\n color: "+e.colors.placeholder+";\n }\n ":"\n &:hover "+u+" {\n border-color: "+e.colors.primaryDark+";\n }\n &:hover "+m+", &:hover "+s.Span+" {\n color: "+e.colors.primary+";\n }\n ")+"\n "});function f(n){var e=n.children,r=n.name,o=n.checked,a=n.disabled,i=c(n,["children","name","checked","disabled"]);return t.createElement(h,{htmlFor:r,disabled:a},t.createElement(b,Object.assign({id:r,name:r,type:"checkbox",checked:o,disabled:a},i)),t.createElement(u,{checked:o},t.createElement(p,{name:"Check"})),t.createElement(s.Span,{display:"block",width:"calc(100% - 16px)",fontSize:1,lineHeight:1,fontWeight:5,style:{transitionProperty:"color",transitionDuration:"150ms",transitionTimingFunction:"ease-in-out"}},e))}function g(n){return n<10?"0"+n:""+n}i.div(function(n){var e=n.theme;return"\n width: 100%;\n\n "+h+" {\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 "+h+":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 "+h+":last-child {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n }\n "});var x=Object.freeze(["\n display: block;\n position: relative;\n font-weight: 500;\n letter-spacing: 0.6px;\n ","\n ","\n ","\n"]),v=i.label(x,e.typography,e.color,e.space);v.displayName="Label",v.defaultProps={fontSize:1,lineHeight:1,mb:"xs"};var y=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"]),E=i.select(function(n){var e=n.theme,r=n.hasError;return a.css(y,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 w(n){var e=n.name,r=n.label;void 0===r&&(r="Date");var a=n.disabled,i=n.initialMonth;void 0===i&&(i=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,x=n.onUpdate,v=t.useRef(null),y=t.useRef(null),w=t.useRef(null),k=t.useState(i),B=k[0],F=k[1],_=t.useState(l),O=_[0],D=_[1],z=t.useState(c),j=z[0],C=z[1],I=function(n){return new Date(n.year,n.month,0).getUTCDate()}({year:j\|\|2020,month:B});return t.useEffect(function(){j&&B&&O&&x(j+"-"+g(B)+"-"+g(O))},[B,O,j]),t.createElement(s.Box,{ml:"-4px",mr:"-4px",p:"4px"},t.createElement(s.Box,{display:"flex",alignItems:"center",height:"48px",pl:"56px"},t.createElement(E,{ref:v,name:e+"-month",value:B,disabled:a,onChange:function(n){F(parseInt(n.target.value,10)),y.current&&y.current.focus()},"aria-label":r+": Month",hasValue:Boolean(B),hasError:f},t.createElement("option",{value:"0",disabled:!0,selected:!0},"mm"),o.times(m-d+1,function(){return""}).map(function(n,e){var r=d+e;return t.createElement("option",{key:r,value:r},g(r))})),t.createElement(s.Box,{height:"50%",width:"1px",bg:f?"error":"outline",zIndex:2,transform:"rotate(10deg)"}),t.createElement(E,{ref:y,name:e+"-day",value:O,disabled:a,onChange:function(n){D(parseInt(n.target.value,10)),w.current&&w.current.focus()},"aria-label":r+": Day",hasValue:Boolean(O),hasError:f},t.createElement("option",{value:"0",disabled:!0,selected:!0},"dd"),o.times(Math.min(b,I)-p+1,function(){return""}).map(function(n,e){var r=p+e;return t.createElement("option",{key:r,value:r},g(r))})),t.createElement(s.Box,{height:"50%",width:"1px",bg:f?"error":"outline",zIndex:2,transform:"rotate(10deg)"}),t.createElement(E,{ref:w,name:e+"-year",value:j,disabled:a,onChange:function(n){C(parseInt(n.target.value,10))},"aria-label":r+": Year",hasValue:Boolean(j),hasError:f},t.createElement("option",{value:"0",disabled:!0,selected:!0},"yyyy"),o.times(h-u+1,function(n){return u+n}).map(function(n){return t.createElement("option",{key:n,value:n},n)})),t.createElement(s.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"}),t.createElement(s.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"},t.createElement(s.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"},t.createElement(s.Icon,{name:"Calendar"})))))}function k(n){var e=n.name,r=n.validate,a=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 t.createElement(l.Field,{name:e,validate:r},function(n){var r=n.field,i=n.form,l=Boolean(o.get(i,["errors",e])),s=(r.value\|\|"").split("-"),c=s[0];void 0===c&&(c="");var d=s[1];void 0===d&&(d="");var p=s[2];return void 0===p&&(p=""),t.createElement(w,Object.assign({name:e},a,{initialMonth:d?parseInt(d,10):void 0,initialDay:p?parseInt(p,10):void 0,initialYear:c?parseInt(c,10):void 0,hasError:l,onUpdate:function(n){i.setFieldValue(e,n)}}))})}function B(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 F=i(s.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 _(n){var e=n.children,r=B(n,["children"]);return t.createElement(F,Object.assign({as:"li"},r),e)}var O=t.forwardRef(function(n,e){var r=n.children,o=B(n,["children"]);return t.createElement(s.Box,Object.assign({ref:e,as:"ul",boxShadow:"medium",borderRadius:2,overflow:"auto",width:"100%",bg:"white"},o),r)});O.displayName="Body";var D=i.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"});D.displayName="ControlOuter";var z=t.forwardRef(function(n,e){var r=n.children,o=n.isActive,a=n.hasError,i=B(n,["children","isActive","hasError"]);return t.createElement("div",{style:{position:"relative"}},t.createElement(D,Object.assign({ref:e,isActive:o,hasError:a,type:"button"},i),t.createElement(s.Span,{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"},t.createElement(s.Span,{width:"100%",fontWeight:4,style:{whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",letterSpacing:"0.6px"}},r),t.createElement(s.Icon,{name:"ChevronDown",ml:"xs"}))),t.createElement(s.Box,{className:"__bg",bg:a?"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"}),t.createElement(s.Box,{className:"__border",bg:"white",border:["1px solid",a?"error":"outline"],position:"absolute",top:"0",bottom:"0",left:"0",right:"0",zIndex:0,borderRadius:"4px",transitionProperty:"border-color",transitionDuration:"fast",transitionTimingFunction:"ease"}))});function j(n){var e=n.value,a=n.placeholder,i=n.label,l=n.items,c=n.hasError,d=n.disabled,p=n.onSelect,u=n.onRemove,m=t.useState(o.get(l.filter(function(n){return n.value===e})[0],"label")\|\|a\|\|"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 t.createElement(s.Box,null,t.createElement(z,Object.assign({id:f.id},d?{}:(0,f.getControlProps)(),{"aria-label":i,isActive:x,hasError:c,disabled:d}),b),x&&t.createElement(s.Box,{position:"absolute",bottom:"0",width:"100%",transform:"translateY(100%) translateY(6px)",zIndex:1e3},t.createElement(O,Object.assign({},v(),{style:{maxHeight:"240px",overflow:"auto"}}),g.map(function(n){return t.createElement(_,Object.assign({key:n.value,selected:n.selected,highlighted:n.highlighted},n.getItemProps()),n.label)}))))}function C(n){var e=n.name,r=n.validate,o=B(n,["name","validate"]);return t.createElement(l.Field,{name:e,validate:r},function(n){var e=n.field,r=n.form,a=Boolean(r.errors&&r.errors[e.name]);return t.createElement(j,Object.assign({},o,{hasError:a,onSelect:function(n){r.setFieldValue(e.name,n.value),o.onSelect&&o.onSelect(n)}}))})}function I(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}z.displayName="Control";var S=i.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 &:-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: "+(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"});S.displayName="InputElement";var T=t.forwardRef(function(n,e){var r=n.hasError,o=n.preTab,a=n.postTab,i=I(n,["hasError","preTab","postTab"]),l=Boolean(o),c=o\|\|a;return t.createElement(s.Box,{display:"flex",ml:"-2px",mr:"-2px",p:"2px"},t.createElement(S,Object.assign({ref:e,hasError:r},i)),c&&t.createElement(s.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:l?"4px":"0",borderBottomLeftRadius:l?"4px":"0",borderTopRightRadius:l?"0":"4px",borderBottomRightRadius:l?"0":"4px",border:["1px solid",r?"error":"outline"],order:l?-1:1,transitionProperty:"border-color, color",transitionDuration:"fast",transitionTimingFunction:"ease"},c),t.createElement(s.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"}),t.createElement(s.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 R(n){var e=n.name,r=n.validate,a=n.onChange,i=n.onBlur,s=I(n,["name","validate","onChange","onBlur"]);return t.createElement(l.Field,{name:e,validate:r},function(n){var r=n.field,l=Boolean(o.get(n.form,["errors",e]));return t.createElement(T,Object.assign({},s,r,{hasError:l,onChange:function(n){r.onChange(n),a&&a(n)},onBlur:function(n){r.onBlur(n),i&&i(n)}}))})}function P(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 N=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"]),H=i.div(function(n){var e=n.theme;return"\n width: 100%;\n border: 1px solid "+e.colors.outline+";\n border-radius: 4px;\n\n "+M+" {\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 & "+M+" {\n border-color: "+e.colors.error+" !important;\n }\n ":"")+"\n "}),L=i.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 "}),V=i.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 ~ "+L+" {\n border-color: "+e.colors.primaryDark+";\n }\n &:checked ~ "+L+" {\n background: "+e.colors.primary+";\n border-color: "+e.colors.primaryDark+";\n\n &::after {\n transform: scale(1);\n }\n }\n &:disabled ~ "+L+" {\n border-color: "+e.colors.outline+" !important;\n }\n &:disabled ~ "+s.Span+" {\n color: "+e.colors.secondary+";\n }\n &:disabled ~ "+W+" {\n background-color: "+e.colors.background+";\n }\n "}),W=i.span(N),M=i.label(function(n){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 "+L+" {\n border-color: "+n.theme.colors.primaryDark+";\n }\n "});function q(n){var e=n.children,r=n.name,a=n.validate,i=n.onChange,s=n.onBlur,c=P(n,["children","name","validate","onChange","onBlur"]);return t.createElement(l.Field,{name:r,validate:a},function(n){var a=n.field,l=Boolean(o.get(n.form,["errors",r]));return t.createElement(H,{hasError:l},t.Children.toArray(e).map(function(n){return t.cloneElement(n,Object.assign({},a,c,{value:n.props.value,hasError:l,checked:Boolean(a.value===n.props.value),onChange:function(n){a.onChange(n),i&&i(n)},onBlur:function(n){a.onBlur(n),s&&s(n)}}))}))})}function Y(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 A=i.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"});A.displayName="SelectElement";var U=t.forwardRef(function(n,e){var r=n.children,o=n.hasError,a=n.placeholder;void 0===a&&(a="");var i=Y(n,["children","hasError","placeholder"]);return t.createElement(s.Box,{ml:"-2px",mr:"-2px",p:"2px"},t.createElement(A,Object.assign({ref:e,hasValue:Boolean(i.value),hasError:o},i,{value:i.value\|\|""}),a&&t.createElement("option",{value:"",disabled:!0},a),r),t.createElement(s.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"}),t.createElement(s.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"}),t.createElement(s.Box,{position:"absolute",right:"0",top:"0",bottom:"0",height:"16px",my:"auto",pr:"sm",style:{pointerEvents:"none"}},t.createElement(s.Icon,{name:"ChevronDown",color:"secondary"})))});function G(n){var e=n.name,r=n.validate,a=n.onChange,i=n.onBlur,s=Y(n,["name","validate","onChange","onBlur"]);return t.createElement(l.Field,{name:e,validate:r},function(n){var r=n.field,l=Boolean(o.get(n.form,["errors",e]));return t.createElement(U,Object.assign({},s,r,{hasError:l,onChange:function(n){r.onChange(n),a&&a(n)},onBlur:function(n){r.onBlur(n),i&&i(n)}}))})}var X=i(s.Box)(function(n){return"\n border-left: 2px solid currentColor;\n padding-left: "+n.theme.space.sm+";\n "});function J(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=i.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"});K.displayName="TextareaElement",K.defaultProps={rows:4};var Q=t.forwardRef(function(n,e){var r=n.hasError,o=J(n,["hasError"]);return t.createElement(s.Box,{ml:"-2px",mr:"-2px",p:"2px"},t.createElement(K,Object.assign({ref:e,hasError:r},o)),t.createElement(s.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"}),t.createElement(s.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 Z(n){var e=n.name,r=n.validate,a=n.onChange,i=n.onBlur,s=J(n,["name","validate","onChange","onBlur"]);return t.createElement(l.Field,{name:e,validate:r},function(n){var r=n.field,l=Boolean(o.get(n.form,["errors",e]));return t.createElement(Q,Object.assign({},s,r,{hasError:l,onChange:function(n){r.onChange(n),a&&a(n)},onBlur:function(n){r.onBlur(n),i&&i(n)}}))})}var $=Object.freeze(["\n ","\n"]),nn="\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",en=i.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"}),rn=i.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 "}),on=i.label(function(n){return"\n display: flex;\n align-items: center;\n margin-bottom: 0 !important;\n\n &:hover "+rn+" {\n "+en+" {\n border-color: "+n.theme.colors.primaryDark+";\n }\n }\n "}),tn=i.input(function(n){var e=n.theme;return"\n "+nn+"\n\n &:focus ~ "+rn+" {\n border-color: "+e.colors.primary+";\n }\n &:checked ~ "+rn+" {\n border-color: "+e.colors.primary+";\n\n "+en+" {\n background: "+e.colors.primary+";\n border-color: "+e.colors.primaryDark+";\n transform: translateX(24px);\n }\n }\n &:disabled ~ "+rn+" {\n pointer-events: none;\n "+en+" {\n border-color: "+e.colors.outline+";\n }\n }\n "}),an=i.span($,nn);function ln(n){var e=n.label,r=n.name,o=n.checked,a=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 t.createElement(on,{htmlFor:r},t.createElement(tn,Object.assign({id:r,name:r,type:"checkbox",checked:o},a)),t.createElement(rn,null,t.createElement(en,null,t.createElement(s.Icon,{name:"Check",width:"12px",height:"12px",position:"absolute",top:"0",bottom:"0",left:"0",right:"0",m:"auto",style:{strokeWidth:"2px"}}))),t.createElement(an,null,e))}exports.Checkbox=f,exports.CheckboxField=function(n){var e=n.name,r=n.validate,a=n.onChange,i=n.onBlur,s=c(n,["name","validate","onChange","onBlur"]);return t.createElement(l.Field,{name:e,validate:r},function(n){var r=n.field,l=Boolean(o.get(n.form,["errors",e]));return t.createElement(f,Object.assign({},s,r,{checked:Boolean(r.value),hasError:l,onChange:function(n){r.onChange(n),a&&a(n)},onBlur:function(n){r.onBlur(n),i&&i(n)}}))})},exports.DateInput=w,exports.DateInputField=k,exports.DateInputFieldWithLabel=function(n){return t.createElement(t.Fragment,null,t.createElement(v,{htmlFor:n.name},n.label),t.createElement(k,Object.assign({},n)))},exports.Dropdown=j,exports.DropdownField=C,exports.DropdownFieldWithLabel=function(n){return t.createElement(t.Fragment,null,t.createElement(v,{htmlFor:n.name},n.label),t.createElement(C,Object.assign({},n)))},exports.ErrorMessage=function(n){return t.createElement(l.ErrorMessage,{name:n.name,render:function(n){return t.createElement(s.Span,{color:"error",fontSize:0},n)}})},exports.Input=T,exports.InputField=R,exports.InputFieldWithLabel=function(n){return t.createElement(t.Fragment,null,t.createElement(v,{htmlFor:n.name},n.label),t.createElement(R,Object.assign({},n)))},exports.Label=v,exports.Radio=function(n){var e=n.children,r=n.name,o=n.checked,a=P(n,["children","name","checked"]),i=r+a.value;return t.createElement(M,{htmlFor:i},t.createElement(V,Object.assign({id:i,name:r,type:"radio",checked:o},a)),t.createElement(L,{checked:o}),t.createElement(s.Span,{display:"block",position:"relative",zIndex:1,width:"calc(100% - 16px)",fontSize:1,lineHeight:1,fontWeight:5},e),t.createElement(W,null))},exports.RadioField=q,exports.RadioFieldWithLabel=function(n){return t.createElement(t.Fragment,null,t.createElement(v,{htmlFor:n.name},n.label),t.createElement(q,Object.assign({},n)))},exports.Select=U,exports.SelectField=G,exports.SelectFieldWithLabel=function(n){return t.createElement(t.Fragment,null,t.createElement(v,{htmlFor:n.name},n.label),t.createElement(G,Object.assign({},n)))},exports.SubGroup=X,exports.Textarea=Q,exports.TextareaField=Z,exports.TextareaFieldWithLabel=function(n){return t.createElement(t.Fragment,null,t.createElement(v,{htmlFor:n.name},n.label),t.createElement(Z,Object.assign({},n)))},exports.Toggle=ln,exports.ToggleField=function(n){var e=n.label;return t.createElement(l.Field,{name:n.name,validate:n.validate},function(n){var r=n.field;return t.createElement(ln,Object.assign({label:e},r,{checked:Boolean(r.value)}))})};
		var n,e=require("styled-system"),r=require("use-drop"),o=require("lodash"),t=require("react"),a=require("styled-components"),i=(n=a)&&"object"==typeof n&&"default"in n?n.default:n,l=require("formik"),s=require("@truework/ui");function c(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 d=Object.freeze([""]),p=i(s.Icon)(d),u=i.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 "+p+" {\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 "}),m=i(s.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 "}),b=i.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 ~ "+u+" {\n border-color: "+e.colors.primaryDark+";\n }\n &:checked ~ "+u+" {\n background: "+e.colors.primary+";\n border-color: "+e.colors.primaryDark+";\n\n "+p+" {\n transform: scale(1);\n }\n }\n &:focus ~ "+m+", &:focus ~"+s.Span+", &:checked ~ "+s.Span+" {\n color: "+e.colors.primary+";\n }\n\n "+(n.hasError?"\n & ~ "+u+" {\n border-color: "+e.colors.error+" !important;\n }\n ":"")+"\n "}),h=i.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 "+u+" {\n background: "+e.colors.background+";\n }\n "+s.Span+" {\n color: "+e.colors.placeholder+";\n }\n ":"\n &:hover "+u+" {\n border-color: "+e.colors.primaryDark+";\n }\n &:hover "+m+", &:hover "+s.Span+" {\n color: "+e.colors.primary+";\n }\n ")+"\n "}),f=i.div(function(n){var e=n.theme;return"\n width: 100%;\n\n "+h+" {\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 "+h+":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 "+h+":last-child {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n }\n "});function g(n){var e=n.children,r=n.name,o=n.checked,a=n.disabled,i=c(n,["children","name","checked","disabled"]);return t.createElement(h,{htmlFor:r,disabled:a},t.createElement(b,Object.assign({id:r,name:r,type:"checkbox",checked:o,disabled:a},i)),t.createElement(u,{checked:o},t.createElement(p,{name:"Check"})),t.createElement(s.Span,{display:"block",width:"calc(100% - 16px)",fontSize:1,lineHeight:1,fontWeight:5,style:{transitionProperty:"color",transitionDuration:"150ms",transitionTimingFunction:"ease-in-out"}},e))}function x(n){return n<10?"0"+n:""+n}var v=Object.freeze(["\n display: block;\n position: relative;\n font-weight: 500;\n letter-spacing: 0.6px;\n ","\n ","\n ","\n"]),y=i.label(v,e.typography,e.color,e.space);y.displayName="Label",y.defaultProps={fontSize:1,lineHeight:1,mb:"xs"};var E=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"]),w=i.select(function(n){var e=n.theme,r=n.hasError;return a.css(E,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 k(n){var e=n.name,r=n.label;void 0===r&&(r="Date");var a=n.disabled,i=n.initialMonth;void 0===i&&(i=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,v=t.useRef(null),y=t.useRef(null),E=t.useRef(null),k=t.useState(i),B=k[0],F=k[1],_=t.useState(l),O=_[0],D=_[1],z=t.useState(c),j=z[0],C=z[1],I=function(n){return new Date(n.year,n.month,0).getUTCDate()}({year:j\|\|2020,month:B});return t.useEffect(function(){j&&B&&O&&g(j+"-"+x(B)+"-"+x(O))},[B,O,j]),t.createElement(s.Box,{ml:"-4px",mr:"-4px",p:"4px"},t.createElement(s.Box,{display:"flex",alignItems:"center",height:"48px",pl:"56px"},t.createElement(w,{ref:v,name:e+"-month",value:B,disabled:a,onChange:function(n){F(parseInt(n.target.value,10)),y.current&&y.current.focus()},"aria-label":r+": Month",hasValue:Boolean(B),hasError:f},t.createElement("option",{value:"0",disabled:!0,selected:!0},"mm"),o.times(m-d+1,function(){return""}).map(function(n,e){var r=d+e;return t.createElement("option",{key:r,value:r},x(r))})),t.createElement(s.Box,{height:"50%",width:"1px",bg:f?"error":"outline",zIndex:2,transform:"rotate(10deg)"}),t.createElement(w,{ref:y,name:e+"-day",value:O,disabled:a,onChange:function(n){D(parseInt(n.target.value,10)),E.current&&E.current.focus()},"aria-label":r+": Day",hasValue:Boolean(O),hasError:f},t.createElement("option",{value:"0",disabled:!0,selected:!0},"dd"),o.times(Math.min(b,I)-p+1,function(){return""}).map(function(n,e){var r=p+e;return t.createElement("option",{key:r,value:r},x(r))})),t.createElement(s.Box,{height:"50%",width:"1px",bg:f?"error":"outline",zIndex:2,transform:"rotate(10deg)"}),t.createElement(w,{ref:E,name:e+"-year",value:j,disabled:a,onChange:function(n){C(parseInt(n.target.value,10))},"aria-label":r+": Year",hasValue:Boolean(j),hasError:f},t.createElement("option",{value:"0",disabled:!0,selected:!0},"yyyy"),o.times(h-u+1,function(n){return u+n}).map(function(n){return t.createElement("option",{key:n,value:n},n)})),t.createElement(s.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"}),t.createElement(s.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"},t.createElement(s.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"},t.createElement(s.Icon,{name:"Calendar"})))))}function B(n){var e=n.name,r=n.validate,a=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 t.createElement(l.Field,{name:e,validate:r},function(n){var r=n.field,i=n.form,l=Boolean(o.get(i,["errors",e])),s=(r.value\|\|"").split("-"),c=s[0];void 0===c&&(c="");var d=s[1];void 0===d&&(d="");var p=s[2];return void 0===p&&(p=""),t.createElement(k,Object.assign({name:e},a,{initialMonth:d?parseInt(d,10):void 0,initialDay:p?parseInt(p,10):void 0,initialYear:c?parseInt(c,10):void 0,hasError:l,onUpdate:function(n){i.setFieldValue(e,n)}}))})}function F(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 _=i(s.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 O(n){var e=n.children,r=F(n,["children"]);return t.createElement(_,Object.assign({as:"li"},r),e)}var D=t.forwardRef(function(n,e){var r=n.children,o=F(n,["children"]);return t.createElement(s.Box,Object.assign({ref:e,as:"ul",boxShadow:"medium",borderRadius:2,overflow:"auto",width:"100%",bg:"white"},o),r)});D.displayName="Body";var z=i.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"});z.displayName="ControlOuter";var j=t.forwardRef(function(n,e){var r=n.children,o=n.isActive,a=n.hasError,i=F(n,["children","isActive","hasError"]);return t.createElement("div",{style:{position:"relative"}},t.createElement(z,Object.assign({ref:e,isActive:o,hasError:a,type:"button"},i),t.createElement(s.Span,{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"},t.createElement(s.Span,{width:"100%",fontWeight:4,style:{whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",letterSpacing:"0.6px"}},r),t.createElement(s.Icon,{name:"ChevronDown",ml:"xs"}))),t.createElement(s.Box,{className:"__bg",bg:a?"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"}),t.createElement(s.Box,{className:"__border",bg:"white",border:["1px solid",a?"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,a=n.placeholder,i=n.label,l=n.items,c=n.hasError,d=n.disabled,p=n.onSelect,u=n.onRemove,m=t.useState(o.get(l.filter(function(n){return n.value===e})[0],"label")\|\|a\|\|"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 t.createElement(s.Box,null,t.createElement(j,Object.assign({id:f.id},d?{}:(0,f.getControlProps)(),{"aria-label":i,isActive:x,hasError:c,disabled:d}),b),x&&t.createElement(s.Box,{position:"absolute",bottom:"0",width:"100%",transform:"translateY(100%) translateY(6px)",zIndex:1e3},t.createElement(D,Object.assign({},v(),{style:{maxHeight:"240px",overflow:"auto"}}),g.map(function(n){return t.createElement(O,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=F(n,["name","validate"]);return t.createElement(l.Field,{name:e,validate:r},function(n){var e=n.field,r=n.form,a=Boolean(r.errors&&r.errors[e.name]);return t.createElement(C,Object.assign({},o,{hasError:a,onSelect:function(n){r.setFieldValue(e.name,n.value),o.onSelect&&o.onSelect(n)}}))})}function S(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}j.displayName="Control";var T=i.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 &:-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: "+(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 R=t.forwardRef(function(n,e){var r=n.hasError,o=n.preTab,a=n.postTab,i=S(n,["hasError","preTab","postTab"]),l=Boolean(o),c=o\|\|a;return t.createElement(s.Box,{display:"flex",ml:"-2px",mr:"-2px",p:"2px"},t.createElement(T,Object.assign({ref:e,hasError:r},i)),c&&t.createElement(s.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:l?"4px":"0",borderBottomLeftRadius:l?"4px":"0",borderTopRightRadius:l?"0":"4px",borderBottomRightRadius:l?"0":"4px",border:["1px solid",r?"error":"outline"],order:l?-1:1,transitionProperty:"border-color, color",transitionDuration:"fast",transitionTimingFunction:"ease"},c),t.createElement(s.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"}),t.createElement(s.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 P(n){var e=n.name,r=n.validate,a=n.onChange,i=n.onBlur,s=S(n,["name","validate","onChange","onBlur"]);return t.createElement(l.Field,{name:e,validate:r},function(n){var r=n.field,l=Boolean(o.get(n.form,["errors",e]));return t.createElement(R,Object.assign({},s,r,{hasError:l,onChange:function(n){r.onChange(n),a&&a(n)},onBlur:function(n){r.onBlur(n),i&&i(n)}}))})}function N(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 H=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"]),L=i.div(function(n){var e=n.theme;return"\n width: 100%;\n border: 1px solid "+e.colors.outline+";\n border-radius: 4px;\n\n "+q+" {\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 & "+q+" {\n border-color: "+e.colors.error+" !important;\n }\n ":"")+"\n "}),V=i.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 "}),W=i.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 ~ "+V+" {\n border-color: "+e.colors.primaryDark+";\n }\n &:checked ~ "+V+" {\n background: "+e.colors.primary+";\n border-color: "+e.colors.primaryDark+";\n\n &::after {\n transform: scale(1);\n }\n }\n &:disabled ~ "+V+" {\n border-color: "+e.colors.outline+" !important;\n }\n &:disabled ~ "+s.Span+" {\n color: "+e.colors.secondary+";\n }\n &:disabled ~ "+M+" {\n background-color: "+e.colors.background+";\n }\n "}),M=i.span(H),q=i.label(function(n){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 "+V+" {\n border-color: "+n.theme.colors.primaryDark+";\n }\n "});function Y(n){var e=n.children,r=n.name,a=n.validate,i=n.onChange,s=n.onBlur,c=N(n,["children","name","validate","onChange","onBlur"]);return t.createElement(l.Field,{name:r,validate:a},function(n){var a=n.field,l=Boolean(o.get(n.form,["errors",r]));return t.createElement(L,{hasError:l},t.Children.toArray(e).map(function(n){return t.cloneElement(n,Object.assign({},a,c,{value:n.props.value,hasError:l,checked:Boolean(a.value===n.props.value),onChange:function(n){a.onChange(n),i&&i(n)},onBlur:function(n){a.onBlur(n),s&&s(n)}}))}))})}function A(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 U=i.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"});U.displayName="SelectElement";var G=t.forwardRef(function(n,e){var r=n.children,o=n.hasError,a=n.placeholder;void 0===a&&(a="");var i=A(n,["children","hasError","placeholder"]);return t.createElement(s.Box,{ml:"-2px",mr:"-2px",p:"2px"},t.createElement(U,Object.assign({ref:e,hasValue:Boolean(i.value),hasError:o},i,{value:i.value\|\|""}),a&&t.createElement("option",{value:"",disabled:!0},a),r),t.createElement(s.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"}),t.createElement(s.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"}),t.createElement(s.Box,{position:"absolute",right:"0",top:"0",bottom:"0",height:"16px",my:"auto",pr:"sm",style:{pointerEvents:"none"}},t.createElement(s.Icon,{name:"ChevronDown",color:"secondary"})))});function X(n){var e=n.name,r=n.validate,a=n.onChange,i=n.onBlur,s=A(n,["name","validate","onChange","onBlur"]);return t.createElement(l.Field,{name:e,validate:r},function(n){var r=n.field,l=Boolean(o.get(n.form,["errors",e]));return t.createElement(G,Object.assign({},s,r,{hasError:l,onChange:function(n){r.onChange(n),a&&a(n)},onBlur:function(n){r.onBlur(n),i&&i(n)}}))})}var J=i(s.Box)(function(n){return"\n border-left: 2px solid currentColor;\n padding-left: "+n.theme.space.sm+";\n "});function K(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 Q=i.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"});Q.displayName="TextareaElement",Q.defaultProps={rows:4};var Z=t.forwardRef(function(n,e){var r=n.hasError,o=K(n,["hasError"]);return t.createElement(s.Box,{ml:"-2px",mr:"-2px",p:"2px"},t.createElement(Q,Object.assign({ref:e,hasError:r},o)),t.createElement(s.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"}),t.createElement(s.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){var e=n.name,r=n.validate,a=n.onChange,i=n.onBlur,s=K(n,["name","validate","onChange","onBlur"]);return t.createElement(l.Field,{name:e,validate:r},function(n){var r=n.field,l=Boolean(o.get(n.form,["errors",e]));return t.createElement(Z,Object.assign({},s,r,{hasError:l,onChange:function(n){r.onChange(n),a&&a(n)},onBlur:function(n){r.onBlur(n),i&&i(n)}}))})}var nn=Object.freeze(["\n ","\n"]),en="\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",rn=i.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"}),on=i.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 "}),tn=i.label(function(n){return"\n display: flex;\n align-items: center;\n margin-bottom: 0 !important;\n\n &:hover "+on+" {\n "+rn+" {\n border-color: "+n.theme.colors.primaryDark+";\n }\n }\n "}),an=i.input(function(n){var e=n.theme;return"\n "+en+"\n\n &:focus ~ "+on+" {\n border-color: "+e.colors.primary+";\n }\n &:checked ~ "+on+" {\n border-color: "+e.colors.primary+";\n\n "+rn+" {\n background: "+e.colors.primary+";\n border-color: "+e.colors.primaryDark+";\n transform: translateX(24px);\n }\n }\n &:disabled ~ "+on+" {\n pointer-events: none;\n "+rn+" {\n border-color: "+e.colors.outline+";\n }\n }\n "}),ln=i.span(nn,en);function sn(n){var e=n.label,r=n.name,o=n.checked,a=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 t.createElement(tn,{htmlFor:r},t.createElement(an,Object.assign({id:r,name:r,type:"checkbox",checked:o},a)),t.createElement(on,null,t.createElement(rn,null,t.createElement(s.Icon,{name:"Check",width:"12px",height:"12px",position:"absolute",top:"0",bottom:"0",left:"0",right:"0",m:"auto",style:{strokeWidth:"2px"}}))),t.createElement(ln,null,e))}exports.Checkbox=g,exports.CheckboxField=function(n){var e=n.name,r=n.validate,a=n.onChange,i=n.onBlur,s=c(n,["name","validate","onChange","onBlur"]);return t.createElement(l.Field,{name:e,validate:r},function(n){var r=n.field,l=Boolean(o.get(n.form,["errors",e]));return t.createElement(g,Object.assign({},s,r,{checked:Boolean(r.value),hasError:l,onChange:function(n){r.onChange(n),a&&a(n)},onBlur:function(n){r.onBlur(n),i&&i(n)}}))})},exports.CheckboxGroup=f,exports.DateInput=k,exports.DateInputField=B,exports.DateInputFieldWithLabel=function(n){return t.createElement(t.Fragment,null,t.createElement(y,{htmlFor:n.name},n.label),t.createElement(B,Object.assign({},n)))},exports.Dropdown=C,exports.DropdownField=I,exports.DropdownFieldWithLabel=function(n){return t.createElement(t.Fragment,null,t.createElement(y,{htmlFor:n.name},n.label),t.createElement(I,Object.assign({},n)))},exports.ErrorMessage=function(n){return t.createElement(l.ErrorMessage,{name:n.name,render:function(n){return t.createElement(s.Span,{color:"error",fontSize:0},n)}})},exports.Input=R,exports.InputField=P,exports.InputFieldWithLabel=function(n){return t.createElement(t.Fragment,null,t.createElement(y,{htmlFor:n.name},n.label),t.createElement(P,Object.assign({},n)))},exports.Label=y,exports.Radio=function(n){var e=n.children,r=n.name,o=n.checked,a=N(n,["children","name","checked"]),i=r+a.value;return t.createElement(q,{htmlFor:i},t.createElement(W,Object.assign({id:i,name:r,type:"radio",checked:o},a)),t.createElement(V,{checked:o}),t.createElement(s.Span,{display:"block",position:"relative",zIndex:1,width:"calc(100% - 16px)",fontSize:1,lineHeight:1,fontWeight:5},e),t.createElement(M,null))},exports.RadioField=Y,exports.RadioFieldWithLabel=function(n){return t.createElement(t.Fragment,null,t.createElement(y,{htmlFor:n.name},n.label),t.createElement(Y,Object.assign({},n)))},exports.Select=G,exports.SelectField=X,exports.SelectFieldWithLabel=function(n){return t.createElement(t.Fragment,null,t.createElement(y,{htmlFor:n.name},n.label),t.createElement(X,Object.assign({},n)))},exports.SubGroup=J,exports.Textarea=Z,exports.TextareaField=$,exports.TextareaFieldWithLabel=function(n){return t.createElement(t.Fragment,null,t.createElement(y,{htmlFor:n.name},n.label),t.createElement($,Object.assign({},n)))},exports.Toggle=sn,exports.ToggleField=function(n){var e=n.label;return t.createElement(l.Field,{name:n.name,validate:n.validate},function(n){var r=n.field;return t.createElement(sn,Object.assign({label:e},r,{checked:Boolean(r.value)}))})};
		//# sourceMappingURL=index.js.map

package.json

		{
		"name": "@truework/forms",
		"version": "0.6.1",
		"version": "0.6.2",
		"description": "",
		@@ -96,3 +96,3 @@ "main": "dist/index.js",
		},
		"gitHead": "cab94ced80ceef242e768811b3fef520eea052e3"
		"gitHead": "b14f7096cc917ae3ad3f6d0d27948951468b3089"
		}

src/index.ts

		@@ -6,2 +6,3 @@ export {
		CheckboxField,
		CheckboxGroup,
		} from './Checkbox';
		@@ -8,0 +9,0 @@ export {

dist/index.esm.js.map

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

@truework/forms - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics